/* Botchd site: "Service Manual, night shift" (same tokens as the game UI, prototype 0.9.48) */
:root{
  color-scheme:dark;
  --ground:#14120F; --panel:#1F1B17; --keytop:#2E2924; --keyside:#0A0908;
  --bone:#F2EDE3; --muted:#A39A8C; --line:rgba(242,237,227,.14); --line2:rgba(242,237,227,.5);
  --accent:#FF5B1F; --accentSide:#9E380F; --accentGlow:rgba(255,91,31,.45); --ink:#1D1A17;
  --gold:#FFC23D; --pink:#FF9ED8; --green:#5FE07A; --cyan:#5FF6FF; --red:#FF3B4F;
  --serif:'Instrument Serif',Georgia,serif;
  --ui:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--ground);color:var(--bone);
  font:400 14px/1.55 var(--ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-underline-offset:4px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px;border-radius:4px}
h1,h2,h3,p{margin:0}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1}
.kicker{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.muted{color:var(--muted)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:1040px;margin:0 auto;padding:18px 20px 0}
.stack{display:flex;flex-direction:column;gap:3px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.stack b{font-weight:600}
.stack span{color:var(--muted);white-space:nowrap}
.nt{text-transform:none}
.stack a{text-decoration:none}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 9px;border-radius:10px;background:var(--keytop);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 3px 0 var(--keyside),0 0 0 1px rgba(242,237,227,.07);white-space:nowrap}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accentGlow);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* hero */
main{flex:1;width:100%;display:flex;flex-direction:column}
main.doc{display:block}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px 24px;
  background:radial-gradient(260px 180px at 50% 30%,rgba(255,91,31,.12),rgba(255,91,31,0) 70%)}
#botti{display:block;width:100%;max-width:560px;height:clamp(150px,21vh,200px);touch-action:manipulation;cursor:pointer}
.wordmark{display:block;width:min(240px,60vw);height:auto;color:var(--bone);margin-top:10px;
  filter:drop-shadow(0 5px 0 #0a0908)}
.tag{margin-top:22px;font-size:clamp(28px,5vw,40px);text-wrap:balance}
.tag em{font-style:italic;color:var(--accent)}
.lede{margin-top:10px;max-width:60ch;text-wrap:balance;color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.lede b{color:var(--bone);font-weight:600}

/* sign-up */
.signup{width:100%;max-width:440px;margin:28px auto 0;text-align:left}
.signup .kicker{display:flex;align-items:center;gap:8px;color:var(--accent);margin-bottom:12px}
.signup .kicker::before{content:'';width:10px;height:10px;border-radius:3px;background:var(--accent);box-shadow:0 2px 0 var(--accentSide)}
.row{display:flex;gap:10px;align-items:flex-start}
.field{flex:1;min-width:0}
input[type=email]{width:100%;height:48px;padding:0 14px;border:0;border-radius:12px;background:var(--ground);color:var(--bone);
  font:500 15px/1 var(--ui);letter-spacing:.02em;box-shadow:inset 0 0 0 1.5px var(--line2),inset 0 3px 0 rgba(0,0,0,.35)}
input[type=email]::placeholder{color:#6f675d}
input[type=email]:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent),inset 0 3px 0 rgba(0,0,0,.35)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fine{margin-top:4px;font-size:11px;line-height:1.55;color:var(--muted);text-align:center}
.status:empty{display:none}
.status{text-align:center;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.04em}
.status.ok{color:var(--green)}
.status.err{color:var(--red)}

/* keycaps (from the game) */
.chrome{--top:var(--keytop);--side:var(--keyside);--fg:var(--bone);--hi:rgba(255,255,255,.09);
  appearance:none;border:0;margin:0 0 6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 18px;border-radius:13px;background:var(--top);color:var(--fg);
  font:600 12.5px/1.1 var(--ui);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  box-shadow:inset 0 1px 0 var(--hi),inset 0 -10px 16px -10px rgba(0,0,0,.45),0 6px 0 var(--side),0 0 0 1px rgba(242,237,227,.07),0 18px 22px -12px rgba(0,0,0,.9);
  transition:transform .06s,box-shadow .06s}
.chrome:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 1px 0 var(--hi),inset 0 -10px 16px -10px rgba(0,0,0,.45),0 2px 0 var(--side),0 0 0 1px rgba(242,237,227,.07),0 8px 12px -8px rgba(0,0,0,.9)}
.chrome.hot{--top:var(--accent);--side:var(--accentSide);--fg:var(--ink);--hi:rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 var(--hi),inset 0 -12px 18px -12px rgba(0,0,0,.2),0 6px 0 var(--side),0 18px 26px -14px rgba(0,0,0,.9),0 0 32px -6px var(--accentGlow)}
.chrome:disabled{cursor:default;opacity:.7}
.chrome svg{width:18px;height:18px;flex:none}

/* ticker (from the game's title screen) */
.ticker{margin-top:clamp(36px,7vh,64px);height:44px;border-top:1.5px solid var(--line2);border-bottom:1.5px solid var(--line2);overflow:hidden;display:flex;align-items:center}
.ticker>div{display:flex;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.08em;animation:tick 48s linear infinite}
.ticker span{padding-right:24px}
.ticker b{color:var(--accent);font-weight:600}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* footer */
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 24px;width:100%;max-width:1040px;margin:0 auto;padding:16px 20px 24px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--bone)}
footer a:hover{color:var(--accent)}
footer svg{width:15px;height:15px}

/* privacy page */
.doc{width:100%;max-width:680px;margin:0 auto;padding:28px 20px 40px}
.doc h1{font-size:clamp(44px,9vw,64px);margin:6px 0 10px}
.doc h2{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05;margin:36px 0 12px;padding-top:16px;border-top:1.5px solid var(--line2)}
.doc p,.doc li{font-size:13.5px;line-height:1.75;color:#d9d2c5}
.doc p+p{margin-top:12px}
.doc ul{margin:10px 0 0;padding-left:18px}
.doc li+li{margin-top:6px}
.doc strong{color:var(--bone);font-weight:600}
.doc table{width:100%;border-collapse:collapse;margin-top:12px;font-size:12.5px}
.doc td,.doc th{padding:9px 8px 9px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.doc th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.doc .meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.back{display:inline-flex;margin-top:28px;text-decoration:none}

@media (max-width:520px){
  .row{flex-direction:column;align-items:stretch}
  .row .chrome{width:100%}
  .topbar .chip{padding:7px 10px 8px;font-size:10px}
}
@media (max-width:400px){
  .stack span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ticker>div,.chip i{animation:none}
}