/* ============================================================
   Zephyr — the screen contents: one terminal transcript.
   Prompt → output, plain monochrome phosphor. No display type,
   no cards, no design chrome — just what a terminal prints.
   ============================================================ */

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-size:20px; line-height:1.4; overflow-x:hidden; }
::selection { background:rgba(231,180,92,0.32); color:#0C0A06; }

/* the transcript column (page scrolls under the CRT frame) */
.term { max-width:1000px; margin:0 auto; padding:40px clamp(22px,3.5vw,44px) 66px; }

/* login / header line */
.term-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  color:var(--dim); padding-bottom:9px; margin-bottom:14px; border-bottom:1px solid var(--rule2); }
.term-head .mark { color:var(--amber); }
.term-head nav { display:flex; gap:14px; }
.term-head nav a { color:var(--dim); text-decoration:none; }
.term-head nav a::before { content:'['; color:var(--rule2); } .term-head nav a::after { content:']'; color:var(--rule2); }
.term-head nav a:hover, .term-head nav a[aria-current] { color:var(--amber); }

/* prompt + command */
.cmd { color:var(--bright); margin:26px 0 8px; word-break:break-word; }
.cmd::before { content:'zephyr@zc:~$ '; color:var(--amber); }

/* output text */
p, .out { color:var(--body); margin:0 0 12px; max-width:86ch; }
strong, b { color:var(--bright); font-weight:400; }
code { color:var(--bright); }
em { color:var(--amber); font-style:normal; }
a { color:var(--amber); text-decoration:underline; text-underline-offset:2px; }
a:hover { color:var(--bright); text-shadow:var(--glow); }

/* small terminal headings (README-in-a-shell) */
h1 { font-size:24px; color:var(--bright); margin:0 0 8px; letter-spacing:.5px; }
h2 { font-size:20px; color:var(--bright); margin:0 0 2px; text-transform:uppercase; letter-spacing:.6px; }
h2::after { content:''; display:block; border-bottom:1px solid var(--rule2); margin:5px 0 12px; }
h3 { font-size:19px; color:var(--amber); margin:22px 0 6px; }
h3::before { content:'## '; color:var(--dim); }
h2 .amber, h1 .amber { color:var(--amber); }
h2 br { display:none; } h2 br + .amber::before { content:' '; }

.sec { margin-top:30px; }
.hr { display:none; }
.kicker { color:var(--dim); margin-bottom:6px; }
.kicker::before { content:'# '; }
.lede { color:var(--body); margin:0 0 12px; max-width:86ch; }
.lede em { color:var(--bright); }

/* code / listings / logs */
pre { margin:4px 0 16px; padding:2px 0 2px 14px; border-left:1px solid var(--rule2);
  color:var(--bright); font-family:var(--font); font-size:18px; line-height:1.38; white-space:pre; overflow-x:auto; }
pre.motd { border-left:0; color:var(--amber); padding-left:0; margin:2px 0 14px; }
.sx-kw{ color:var(--bright); } .sx-fn{ color:var(--amber); } .sx-num{ color:var(--amber); } .sx-str{ color:var(--amber); } .sx-cm{ color:var(--dim); }

/* the "cat file" label above a listing */
.file { color:var(--bright); margin:16px 0 4px; }
.file::before { content:'zephyr@zc:~$ cat '; color:var(--amber); }

/* live compile log */
.compile { min-height:210px; }
.compile .cursor { display:inline-block; width:9px; height:15px; background:var(--amber); box-shadow:var(--glow); vertical-align:-2px; animation:blink 1.05s steps(1) infinite; }
@keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* aligned monospace tables */
.dtable, .suite { width:100%; border-collapse:collapse; font-family:var(--font); font-size:18px; margin:4px 0 16px; }
.dtable th, .suite th { text-align:left; padding:2px 20px 4px 0; color:var(--dim); border-bottom:1px solid var(--rule2); font-weight:400; font-size:16px; }
.dtable th.n, .suite th.n, .dtable th.z, .suite th.z { text-align:right; }
.dtable td, .suite td { padding:2px 20px 2px 0; color:var(--body); vertical-align:top; }
.dtable td:first-child, .suite td:first-child { color:var(--amber); white-space:nowrap; }
.dtable td.n, .suite td.n { text-align:right; color:var(--dim); font-variant-numeric:tabular-nums; }
.dtable td.z, .suite td.z { text-align:right; color:var(--bright); font-variant-numeric:tabular-nums; }
.dtable td.plain, .suite td.res { color:var(--body); }
.r-win{ color:var(--bright)!important; } .r-tie{ color:var(--body)!important; } .r-near{ color:var(--dim)!important; }

/* benchmark bars — [####----] */
.bench { margin:4px 0 16px; }
.bench .row { display:grid; grid-template-columns:84px 1fr 60px; align-items:center; gap:12px; padding:2px 0; }
.bench .lang { color:var(--body); } .bench .row.win .lang { color:var(--bright); }
.bench .track { height:14px; border:1px solid var(--rule2); position:relative; overflow:hidden; }
.bench .fill { position:absolute; inset:1px auto 1px 1px; width:0; background:repeating-linear-gradient(90deg, var(--dim) 0 3px, transparent 3px 6px); transition:width 1s ease; }
.sec.seen .bench .fill { width:calc(var(--w,0) - 2px); }
.bench .row.win .fill { background:var(--amber); box-shadow:var(--glow); }
.bench .ms { text-align:right; color:var(--dim); font-variant-numeric:tabular-nums; } .bench .row.win .ms { color:var(--bright); }

/* method lists (plain) */
.chips { color:var(--amber); line-height:1.9; margin:2px 0 16px; max-width:86ch; }
.chip { margin-right:16px; white-space:nowrap; }
.note { color:var(--body); margin:4px 0 16px; max-width:86ch; }
.note::before { content:'note: '; color:var(--amber); }
.note b { color:var(--bright); }
.list { list-style:none; padding:0; margin:0 0 14px; }
.list li { position:relative; padding-left:20px; margin:5px 0; color:var(--body); max-width:86ch; }
.list li::before { content:'-'; position:absolute; left:3px; color:var(--amber); }

/* commands-as-links */
.btns { display:flex; gap:22px; flex-wrap:wrap; margin-top:22px; }
.btn { color:var(--amber); text-decoration:none; } .btn::before { content:'> '; color:var(--dim); }
.btn:hover { color:var(--bright); text-shadow:var(--glow); }

footer { margin-top:44px; padding-top:12px; border-top:1px solid var(--rule2); color:var(--dim); font-size:17px; }
footer a { color:var(--dim); } footer a:hover { color:var(--amber); }

/* reveals — a line prints in */
.js .reveal { opacity:0; } .js.go .reveal { animation:fadein .5s ease both; }
.js .sec .reveal-s { opacity:0; transition:opacity .45s ease; } .js .sec.seen .reveal-s { opacity:1; }
@keyframes fadein { from{opacity:0} to{opacity:1} }

@media (prefers-reduced-motion: reduce) {
  .reveal, .sec .reveal-s { opacity:1 !important; animation:none !important; }
  .sec.seen .bench .fill { transition:none; }
  .compile .cursor { animation:none; }
}