/* term.css — a monospace character-grid / ASCII theme.
   Aesthetic modelled on aino.agency's approach (mono grid, thin rules, ASCII motifs +
   an animated ASCII render, horizontal airy layout, prefers-color-scheme, phosphor-green
   accent). Font is SF Mono / the system monospace — not their licensed ABC family.
   Markup + implementation are ours. */

:root{
  /* light (default), like aino: near-black on paper */
  --bg:#f4f5f6; --panel:#ffffff; --panel-2:#eef0f1;
  --fg:#0c0e0d; --dim:#565d5a; --faint:#8b938f; --line:#d5d9d7; --line-2:#c2c8c5;
  --acc:#0b8f5c;        /* green, terminal */
  --acc-ink:#ffffff;    /* text on green fill */
  --amber:#a86a00;      /* $PROMPT gold, darkened for light */
  --red:#c0392b;
  --ch:0.601ch;
  --measure:90ch;
  --ease:cubic-bezier(.2,.8,.2,1);
}
/* single, committed aesthetic: stark-white lo-fi (aino-adjacent). one theme, no toggle. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:15px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  font-feature-settings:"liga" 0}
a{color:var(--acc);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s var(--ease),color .15s var(--ease)}
a:hover{border-bottom-color:currentColor}
b,strong{font-weight:700}
::selection{background:var(--acc);color:var(--acc-ink)}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 20px}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.navin{max-width:var(--measure);margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:6px}
.brandmark{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.3px;color:var(--fg)}
.brandmark:hover{border-bottom-color:transparent}
.brandmark .sq{width:15px;height:15px;background:var(--acc);display:inline-block}
.navsp{flex:1}
.navlink{color:var(--dim);font-size:13px;font-weight:500;padding:4px 7px}
.navlink:hover{color:var(--fg);border-bottom-color:transparent}
.navlink.on{color:var(--acc)}
.navcta{padding:6px 12px;font-size:13px;font-weight:700;color:var(--acc-ink);background:var(--acc);border:1px solid var(--acc)}
.navcta:hover{filter:brightness(1.05);border-bottom-color:var(--acc)}
.themetoggle{background:none;border:1px solid var(--line);color:var(--dim);font:inherit;font-size:12px;
  padding:5px 9px;cursor:pointer}
.themetoggle:hover{color:var(--fg);border-color:var(--line-2)}

/* ---- type ---- */
h1{font-size:clamp(34px,7vw,60px);line-height:1.02;letter-spacing:-2px;font-weight:800;margin:.1em 0 .3em;color:var(--fg)}
h2{font-size:clamp(20px,3.6vw,27px);letter-spacing:-.8px;font-weight:700;margin:0 0 12px;color:var(--fg)}
h3{font-size:16px;font-weight:700;margin:0 0 6px;color:var(--fg)}
p{margin:0 0 14px}
.lede{font-size:clamp(15px,2.5vw,18px);line-height:1.55;color:var(--dim);max-width:60ch;font-weight:400}
.lede b{color:var(--fg);font-weight:500}
.dim{color:var(--dim)}
.amber{color:var(--amber)}
.acc{color:var(--acc)}
section{padding:34px 0}
header{padding:60px 0 26px}
/* horizontal editorial rows: label gutter | content — the air comes from the grid gap */
.row{display:grid;grid-template-columns:1fr;gap:12px 48px;align-items:start}
@media(min-width:760px){.row{grid-template-columns:19ch minmax(0,1fr)}}
.row .k{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;padding-top:4px}
.row .k::before{content:"// "}
.row .v{max-width:72ch}
.cols{display:grid;gap:34px 48px}
@media(min-width:720px){.cols.two{grid-template-columns:1fr 1fr}}

/* ---- ASCII furniture ---- */
/* bracketed uppercase label: put literal [ ] in markup or use .label */
.label{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--acc)}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);
  margin:0 0 14px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"//";color:var(--acc)}
.eyebrow::after{content:"";flex:1;border-top:1px dashed var(--line-2)}
.rule{border:0;border-top:1px solid var(--line);margin:20px 0}
.rule-dash{border:0;border-top:1px dashed var(--line-2);margin:20px 0}

/* box: bordered panel with corner ticks */
.box{position:relative;background:var(--panel);border:1px solid var(--line);padding:22px}
.box.tick::before,.box.tick::after{position:absolute;color:var(--acc);font-size:12px;line-height:1}
.box.tick::before{content:"+";top:-6px;left:-4px}
.box.tick::after{content:"+";bottom:-7px;right:-3px}
.panel-2{background:var(--panel-2)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13.5px;font-weight:700;
  padding:11px 16px;border:1px solid var(--line-2);background:var(--panel);color:var(--fg);cursor:pointer;
  transition:background .14s var(--ease),color .14s var(--ease),border-color .14s var(--ease)}
.btn:hover{border-color:var(--fg);border-bottom-color:var(--fg)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.primary:hover{filter:brightness(1.06);border-bottom-color:var(--acc)}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#1a1205}
.btn.amber:hover{border-bottom-color:var(--amber)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---- live dot ---- */
.dot{width:8px;height:8px;background:var(--acc);display:inline-block;animation:blink 1.4s steps(1) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.25}}

/* ---- tables ---- */
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid th{text-align:left;color:var(--faint);font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
  font-weight:700;padding:9px 8px;border-bottom:1px solid var(--line)}
table.grid td{padding:11px 8px;border-bottom:1px dashed var(--line);color:var(--fg)}
table.grid tr:last-child td{border-bottom:none}

/* ---- warn ---- */
.warn{border:1px solid var(--red);background:transparent;padding:14px 16px;font-size:13px;color:var(--fg);line-height:1.55}
.warn b{color:var(--red)}
.fine{color:var(--faint);font-size:12px;line-height:1.6;margin:8px 0 0}
footer{border-top:1px solid var(--line);margin-top:30px;padding:26px 0 64px;color:var(--dim);font-size:12.5px}

:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* overflow safety: nothing widens the page past the viewport */
html,body{max-width:100%;overflow-x:clip}
canvas,pre,table,img,video{max-width:100%}
@media(max-width:640px){
  .navin{flex-wrap:wrap;row-gap:7px;gap:8px}
  .navlink{padding:4px 4px}
  .row{gap:10px 0}
  section{padding:26px 0}
  header{padding:40px 0 20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}