@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vt323-latin-400-normal.woff2) format("woff2")}
/* Layout: one CRT console column. Status bar, scrollback with the prompt at its foot, quick-command strip. */
/* Layout: one CRT console column. Status bar, scrollback with the prompt at its foot, quick-command strip.
   Every text color below is checked to reach at least 4.5:1 contrast (WCAG AA) against both backgrounds. */
:root{
  --bg:#030805; --screen:#06110a; --fg:#86eb9b; --hi:#dcffe3; --dim:#5f9e6c; --rule:#173a20;
  --accent:#5dff88; --warn:#ffd166; --err:#ff9c5b; --lit:var(--hi);
  --glow:rgb(93 255 136 / .32); --scan:.2; --vignette:inset 0 0 60px rgb(0 0 0 / .55); --canvas-glow:4;
  --f-display:"VT323","IBM Plex Mono",ui-monospace,monospace;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
:root[data-crt="amber"]{
  --bg:#080502; --screen:#110b04; --fg:#ffb547; --hi:#ffe6bd; --dim:#b3823f; --rule:#3b2710;
  --accent:#ffc966; --warn:#ffe08a; --err:#ff8f7f; --glow:rgb(255 181 71 / .3);
}
:root[data-crt="ice"]{
  --bg:#03070c; --screen:#061019; --fg:#8fd3ff; --hi:#e3f5ff; --dim:#6a98bb; --rule:#14324c;
  --accent:#6fe3ff; --warn:#ffd166; --err:#ff9c6e; --glow:rgb(111 227 255 / .3);
}
/* High contrast: near-white on black, no glow or scanlines, blue/yellow/orange status colors that
   stay distinct with red-green color blindness. Also applied automatically when the system asks for
   more contrast and the visitor hasn't picked a theme. */
:root[data-crt="contrast"]{
  --bg:#000000; --screen:#000000; --fg:#f0f0f0; --hi:#ffffff; --dim:#c4c4c4; --rule:#6b6b6b;
  --accent:#7cc8ff; --warn:#ffd23f; --err:#ff9b54; --lit:var(--accent);
  --glow:transparent; --scan:0; --vignette:none; --canvas-glow:0;
}
@media (prefers-contrast: more){
  :root:not([data-crt]){
    --bg:#000000; --screen:#000000; --fg:#f0f0f0; --hi:#ffffff; --dim:#c4c4c4; --rule:#6b6b6b;
    --accent:#7cc8ff; --warn:#ffd23f; --err:#ff9b54; --lit:var(--accent);
    --glow:transparent; --scan:0; --vignette:none; --canvas-glow:0;
  }
}
/* Paper: dark text on off-white, for people who find any dark screen hard to read. */
:root[data-crt="paper"]{
  --bg:#eef0ea; --screen:#fbfbf8; --fg:#1f2a23; --hi:#0a120d; --dim:#4f5d54; --rule:#c9d0c8;
  --accent:#0b5a9c; --warn:#7a4e00; --err:#b23c00;
  --glow:transparent; --scan:0; --vignette:none; --canvas-glow:0;
  color-scheme:light;
}
/* crt off: keep the theme's colors, drop glow, scanlines and vignette. */
:root[data-fx="off"]{ --glow:transparent; --scan:0; --vignette:none; --canvas-glow:0; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0}
body{background:var(--bg);color:var(--fg);font:400 14px/1.6 var(--f-mono)}
.app{height:100%;max-width:920px;margin:0 auto;padding-inline:16px;padding-block:12px;display:flex;flex-direction:column;gap:10px}

.bar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:baseline;gap:10px}
.logo{font-family:var(--f-display);font-size:34px;line-height:1;color:var(--hi);text-shadow:0 0 8px var(--glow);letter-spacing:.02em}
.logo{text-decoration:none}
.logo b{color:var(--accent);font-weight:400}
.ver{color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.status{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.08em}
.pill{border:1px solid currentColor;padding:1px 7px;border-radius:3px;color:var(--dim)}
.pill.live{color:var(--accent)} .pill.demo{color:var(--warn)}
.pill::before{content:"● ";font-size:10px}
.clock{color:var(--dim);font-variant-numeric:tabular-nums}

.crt{flex:1;min-height:0;position:relative;background:var(--screen);border:1px solid var(--rule);border-radius:8px;overflow:hidden;
  box-shadow:var(--vignette)}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgb(0 0 0 / var(--scan)) 2px 3px),
             radial-gradient(ellipse at center,transparent 60%,rgb(0 0 0 / calc(var(--scan) * 2.2)) 100%)}
.screen{height:100%;overflow-y:auto;padding:16px 18px 22px;text-shadow:0 0 5px var(--glow);
  scrollbar-color:var(--rule) transparent;scrollbar-width:thin}
.ln{white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.6em}
.echo{color:var(--hi);margin-top:10px}
.ps1{color:var(--accent)}
.sys{color:var(--dim)} .warn{color:var(--warn)} .err{color:var(--err)}

.head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;color:var(--hi)}
.head::after{content:"";flex:1 1 40px;border-top:1px dashed var(--rule);margin-left:4px}
.hip{font-weight:500}
.tag{border:1px solid currentColor;border-radius:3px;padding:0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-shadow:none}
.tag.pub{color:var(--accent)} .tag.priv{color:var(--warn)}

.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:20px;margin:6px 0 4px 2px}
.kv dt{color:var(--dim)}
.kv dd{margin:0;overflow-wrap:anywhere}
.kv dd.big{font-family:var(--f-display);font-size:40px;line-height:1.05;color:var(--hi);text-shadow:0 0 10px var(--glow)}
.kv dt.bigl{align-self:center}
.kv .sep{grid-column:1/-1;height:6px}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

.prompt{display:flex;gap:10px;align-items:baseline;margin-top:10px}
.prompt label{flex:none}
.prompt input{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:0;color:var(--hi);font:inherit;text-shadow:inherit;caret-color:var(--accent);caret-shape:block}
.prompt input::placeholder{color:var(--dim);opacity:.7}

.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips span{color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-right:2px}
.chips button{font:inherit;font-size:13px;color:var(--fg);background:transparent;border:1px solid var(--rule);border-radius:4px;padding:5px 10px;cursor:pointer}
.chips button:hover{color:var(--hi);border-color:var(--dim)}
.chips button:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

.geo{margin:8px 0 6px;max-width:640px}
.geo canvas{display:block;width:100%;aspect-ratio:2.2/1;cursor:pointer;border:1px solid var(--rule);border-radius:4px}
.geo-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:5px;color:var(--dim);font-size:12px;letter-spacing:.04em}
.geo-btn{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-shadow:inherit}
.geo-btn:hover{color:var(--hi)}
.geo-btn:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

.static h1{font:inherit;margin:8px 0 0}
.static-list{list-style:none;margin:4px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
a.cmd{color:var(--accent)}
a.cmd:hover{color:var(--hi)}

/* footer under the quick commands */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font-size:11px;letter-spacing:.04em;color:var(--dim)}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--hi)}
.foot-links{display:flex;gap:14px}
.foot-btn{font:inherit;color:var(--dim);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.foot-btn:hover{color:var(--hi)}
.foot-btn:focus-visible,.foot a:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

/* sponsored line in the terminal: calm, clearly labeled */
.sponsor{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:8px;padding-top:6px;border-top:1px dashed var(--rule);color:var(--fg)}
.sponsor .tag{flex:none}
.sponsor a{color:var(--fg);text-decoration-color:var(--dim)}
.sponsor a:hover{color:var(--hi)}

/* content pages (privacy policy) */
.doc{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:16px 56px}
.doc .bar{padding-bottom:12px;border-bottom:1px dashed var(--rule)}
.doc-back{color:var(--dim);font-size:13px}
.doc-back:hover{color:var(--hi)}
.doc-body{max-width:68ch;text-shadow:0 0 5px var(--glow)}
.doc-body h1{font-family:var(--f-display);font-weight:400;font-size:44px;line-height:1;color:var(--hi);margin:18px 0 4px;text-wrap:balance}
.doc-body h2{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:30px 0 8px}
.doc-body p{margin:0 0 12px;line-height:1.7}
.doc-meta{color:var(--dim);font-size:12px}
.doc-lede{color:var(--hi)}
.doc-kv{row-gap:10px;margin:6px 0 0}
.doc-kv dd{line-height:1.7}
.todo{color:var(--warn);border:1px dashed var(--warn);padding:0 6px;border-radius:3px}
@media (max-width:600px){ .doc-kv{grid-template-columns:1fr;row-gap:2px} .doc-kv dd{margin-bottom:10px} .doc-body h1{font-size:36px} }

/* errors and warnings carry a text tag, so meaning never depends on color alone */
.err::before,.warn::before{display:inline-block;margin-right:8px;padding:0 5px;border:1px solid currentColor;border-radius:3px;font-size:11px;font-weight:500;letter-spacing:.08em;line-height:1.5;text-shadow:none}
.err::before{content:"ERR"}
.warn::before{content:"NOTE"}

/* screen-reader-only live region */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* visible keyboard focus on the prompt */
.prompt:focus-within .ps1{text-decoration:underline;text-underline-offset:4px}

/* Windows high-contrast and other forced-color modes: let the system colors win, drop effects */
@media (forced-colors: active){
  .crt::after{display:none}
  .screen,.doc-body{text-shadow:none}
  .tag,.chips button,.geo canvas,.crt{border-color:CanvasText}
}

@media (max-width:520px){
  .screen{padding:12px 12px 18px;font-size:13px}
  .kv{column-gap:12px}
  .kv dd.big{font-size:32px}
  .logo{font-size:30px}
}