:root{
  --bg:#0D0B14;
  --bg-raise:#16121F;
  --sel:#221B33;
  --fg:#E4E1EE;
  --muted:#A5A1B2;
  --dim:#615D72;
  --accent:#7C3AED;
  --purple:#A78BFA;
  --accent-glow:rgba(124,58,237,.5);
  --bar-bg:rgba(13,11,20,.85);
  --bar-border:rgba(124,58,237,.55);
  --pill-bg:rgba(124,58,237,.12);
  --pill-border:rgba(124,58,237,.4);
  --green:#A6E3A1;
  --red:#F38BA8;
  --yellow:#F9E2AF;
  --line:rgba(124,58,237,.14);
  --blink:530ms;
  --glow-purple:var(--accent-glow);
  --glow-green:rgba(166,227,161,.4);
  --glow-yellow:rgba(249,226,175,.35);
  --ease:cubic-bezier(.22,1,.36,1);
}
@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:
    radial-gradient(1100px 700px at 88% -12%,rgba(167,139,250,.05),transparent 60%),
    radial-gradient(1300px 850px at 8% 4%,rgba(124,58,237,.09),transparent 62%),
    var(--bg);
  color:var(--muted);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(14.5px,13px + .18vw,17px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:12vh;
  overflow-x:hidden;
}
/* atmosphere: vignette + phosphor scanlines + film grain — desktop only,
   declared inside the gate so mobile never builds the layers */
@media (min-width:769px){
  body:not(.lite-root)::before{
    content:"";
    position:fixed;inset:0;z-index:3;pointer-events:none;
    background:
      radial-gradient(ellipse 120% 90% at 50% 50%,transparent 58%,rgba(10,10,18,.38) 100%),
      repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.09) 2px 3px);
  }
}
@media (min-width:769px) and (prefers-reduced-motion:no-preference){
  body:not(.lite-root)::after{
    content:"";
    position:fixed;inset:-60%;z-index:3;pointer-events:none;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
    opacity:.038;
    animation:grain 8s steps(10) infinite;
  }
  @keyframes grain{
    0%,100%{transform:translate(0,0)}
    10%{transform:translate(-4%,-7%)}
    20%{transform:translate(-9%,3%)}
    30%{transform:translate(6%,-12%)}
    40%{transform:translate(-3%,11%)}
    50%{transform:translate(-8%,-5%)}
    60%{transform:translate(7%,4%)}
    70%{transform:translate(-2%,8%)}
    80%{transform:translate(4%,-10%)}
    90%{transform:translate(9%,6%)}
  }
}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--sel);border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--dim)}

.prompt{color:var(--green);text-shadow:0 0 10px rgba(166,227,161,.22)}
.prompt .tick{color:var(--purple);text-shadow:0 0 8px var(--glow-purple),0 0 26px rgba(124,58,237,.25)}
.cmd{color:var(--fg)}
.arg{color:var(--yellow)}
.flag{color:var(--purple)}
.comment{color:var(--dim)}
.ok{color:var(--green)}
.warn{color:var(--yellow)}
.path-c{color:var(--purple)}

.cursor{
  display:inline-block;
  width:9px;height:1.05em;
  background:var(--accent);
  vertical-align:-2px;
  margin-left:2px;
  border-radius:1px;
  box-shadow:0 0 8px var(--glow-purple),0 0 22px rgba(124,58,237,.35);
}
.blink{animation:blink var(--blink) steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* output lines stream in cinematically; without JS or with reduced motion
   everything renders in its final state */
.anim .ln{opacity:0;transform:translateY(14px)}
.anim .ln.in{
  opacity:1;transform:none;
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
@media (min-width:769px){
  .anim .ln{filter:blur(5px)}
  .anim .ln.in{
    filter:blur(0);
    transition:opacity .65s var(--ease),transform .65s var(--ease),filter .5s var(--ease);
  }
}

/* boot overlay — created by js/boot.js, once per session */
#boot{
  position:fixed;inset:0;z-index:20;
  background:var(--bg);
  padding:clamp(18px,5vh,64px) clamp(18px,6vw,80px);
  opacity:1;transition:opacity .45s var(--ease);
}
#boot pre{
  font-size:clamp(11px,1.6vw,13.5px);line-height:1.9;
  color:var(--green);text-shadow:0 0 8px var(--glow-green);
  white-space:pre-wrap;
}
#boot.off{opacity:0;pointer-events:none}
#boothint{
  position:absolute;bottom:24px;left:0;right:0;text-align:center;
  font-size:11px;color:var(--dim);
  animation:blink 1.2s steps(1) infinite;
}
.booting{overflow:hidden}

/* ambient animations pause when the tab is hidden (class set by js/perf.js) */
.tab-hidden body::after,
.tab-hidden .hero::before,
.tab-hidden .hero::after{animation-play-state:paused}
/* breathe pauses while the hero is scrolled out of view */
.hero-off .hero::before,.hero-off .hero::after{animation-play-state:paused}

.sr-only{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

.skiplink{
  position:fixed;top:-100%;left:16px;z-index:30;
  padding:8px 14px;
  background:var(--bg-raise);color:var(--fg);
  border:1px solid var(--accent);border-radius:4px;
  text-decoration:none;font-size:13px;
}
.skiplink:focus-visible{top:60px;outline:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}