@font-face{font-family:"Saira Stencil One";src:url(fonts/SairaStencilOne-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Chakra Petch";font-weight:700;src:url(fonts/ChakraPetch-Bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Silkscreen";src:url(fonts/Silkscreen-Regular.ttf) format("truetype");font-display:swap}
:root{
  /* layout: one dark vinyl-record page like the app's keypad half; content in a single readable column */
  color-scheme:dark;
  --bezel:#0b0b0d; --plate:#141419; --plate-2:#1b1b22; --etch:#34343c; --ink:#eceef3; --ink-2:#b6b9c3; --ink-3:#868a95;
  --glow:#ff2e7b; --glow-soft:#ff2e7b73; --glow-faint:#ff2e7b24;
  --f-mark:"Saira Stencil One","Chakra Petch",system-ui,sans-serif;
  --f-head:"Chakra Petch",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-label:"Silkscreen",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--bezel)}
body{margin:0;background:var(--bezel);color:var(--ink);font:16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:var(--glow-soft);text-underline-offset:3px}
a:hover{text-decoration-color:var(--glow)}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:22px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:52px;height:52px;border-radius:13px;box-shadow:0 0 0 1px #ffffff14,0 8px 24px #000a}
.mark{font-family:var(--f-mark);font-size:36px;line-height:1;letter-spacing:.02em;color:#f7f8fb;
  text-shadow:0 0 1px #fff,-5px 0 16px #38d39f80,0 0 20px #5aa7ff66,7px 0 20px #9a6bff80}
nav.links{display:flex;flex-wrap:wrap;gap:4px 18px;font-family:var(--f-head);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
nav.links a{text-decoration:none;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent}
nav.links a:hover,nav.links a[aria-current]{color:#fff;border-bottom-color:var(--glow)}
.etch{display:block;width:100%;height:22px;color:var(--glow)}
.etch path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px var(--glow))}
h1,h2,h3{font-family:var(--f-head);font-weight:700;text-wrap:balance;line-height:1.2;margin:0}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-block:36px 56px}
.hero h1{font-size:clamp(34px,5vw,54px)}
.hero p{color:var(--ink-2);font-size:18px;max-width:34ch;margin:18px 0 0}
.frame{border-radius:30px;padding:10px;background:linear-gradient(160deg,#2a2a33,#0d0d10 45%,#24242c);
  box-shadow:0 30px 70px #000d,inset 0 0 0 1px #ffffff12}
.frame img{display:block;width:100%;height:auto;border-radius:22px}
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;padding-block:8px 48px}
.app{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:18px;
  background:radial-gradient(120% 90% at 50% 0,#ffffff0a,#0000 60%),linear-gradient(180deg,var(--plate-2),var(--plate));box-shadow:inset 0 0 0 1px #ffffff10}
.app h2{font-family:var(--f-mark);font-weight:400;font-size:34px;letter-spacing:.02em}
.app h2 small{font-family:var(--f-head);font-size:.6em;color:var(--ink-2);letter-spacing:.03em}
.app h2 .by{font-family:var(--f-head);font-size:.4em;letter-spacing:.2em;text-transform:uppercase;color:var(--glow);text-shadow:0 0 8px var(--glow);margin-right:.35em;vertical-align:.45em}
.app p{margin:0;color:var(--ink-2)}
.chip{align-self:flex-start;font-family:var(--f-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  padding:3px 8px;border-radius:5px;border:1px solid var(--glow);box-shadow:0 0 10px var(--glow-faint)}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;align-items:center;padding-block:24px 56px}
.duo p{color:var(--ink-2);margin:12px 0 0}
.origin{color:var(--ink-3);font-style:italic}
.nw{white-space:nowrap}
.doc{max-width:70ch;padding-block:12px 64px}
.doc h1{font-size:clamp(30px,4.4vw,42px);margin-bottom:6px}
.doc h2{font-size:21px;margin:34px 0 8px}
.doc p,.doc li{color:var(--ink-2)}
.doc ul{padding-left:22px}
.doc li{margin:6px 0}
.updated{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.lede{font-size:18px;color:var(--ink)!important}
.faq dt{font-family:var(--f-head);font-weight:700;font-size:18px;margin-top:26px;color:var(--ink)}
.faq dd{margin:6px 0 0;color:var(--ink-2)}
footer{border-top:1px solid #ffffff10;margin-top:24px;padding-block:24px 40px;color:var(--ink-3);font-size:14px}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
footer nav{display:flex;flex-wrap:wrap;gap:4px 16px}
footer a{color:var(--ink-2)}
/* not found: a big stencil 404 lit like the keypad, over a record's faint grooves */
.nf{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding-block:7vh 10vh;isolation:isolate}
.nf::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 30%,#ffffff08 0 1px,#0000 1px 4px);
  -webkit-mask:radial-gradient(closest-side at 50% 30%,#000 35%,#0000);mask:radial-gradient(closest-side at 50% 30%,#000 35%,#0000)}
.nf-code{margin:0;font-family:var(--f-mark);font-size:clamp(110px,26vw,220px);line-height:.9;letter-spacing:.04em;color:#f7f8fb;
  text-shadow:0 0 2px #fff,0 0 22px var(--glow),0 0 60px var(--glow-soft)}
.nf .etch{max-width:420px}
.nf h1{font-size:clamp(26px,4vw,36px)}
.nf .lede{margin:0;color:var(--ink-2);font-size:18px}
body.solo{min-height:100vh;display:flex;align-items:center;justify-content:center}
body.solo .nf{padding-inline:16px;width:100%;max-width:640px}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-block:20px 40px}
  .hero p{max-width:none}
  .mark{font-size:30px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}