/* ---------- tokens ---------- */
:root{
  --bg:#050505;
  --ink-rgb:159,199,172;
  --ink:rgb(var(--ink-rgb));
  --ink-70:rgba(var(--ink-rgb),.7);
  --ink-45:rgba(var(--ink-rgb),.45);
  --ink-25:rgba(var(--ink-rgb),.25);
  --ink-12:rgba(var(--ink-rgb),.12);
  --ink-06:rgba(var(--ink-rgb),.06);
  --depth:0.38;                 /* how much of the substrate shows through: 0 = paper, 1 = the raw eye */
  --persistence:0.07;           /* hysteresis of the eye: a dot flips only when light clearly crosses its threshold */
  --grot:'Barlow Condensed','Arial Narrow','Roboto Condensed','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --serif:'Cormorant Garamond','Times New Roman',Georgia,serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:40px;
  --t:1.6s;                     /* stage transition */
  --tq:120ms;                   /* answers to actions */
  --bar-h:52px;
  --rail-w:14px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#050505; } }
:root[data-theme="dark"]{ --bg:#050505; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--grot);font-size:15px;line-height:1.4;transition:background-color var(--t) ease,color var(--t) ease;-webkit-font-smoothing:antialiased;min-height:100vh}
canvas{display:block}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- layer 0: substrate ---------- */
.sub{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0}
#subov{z-index:1}
/* ---------- layer 1: persistence watermark ---------- */
.wm{position:fixed;right:-.04em;bottom:-.22em;z-index:2;pointer-events:none;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(140px,30vw,460px);line-height:1;color:var(--ink);opacity:.07;white-space:nowrap;user-select:none}
.wm .g{position:absolute;right:0;bottom:0;opacity:1;transition:opacity 40s linear}

/* ---------- type ---------- */
.lbl{font-family:var(--grot);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-70)}
.val{font-family:var(--mono);font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.h1{font-family:var(--grot);font-weight:600;font-size:clamp(34px,5vw,56px);line-height:.98;letter-spacing:-.005em;margin:0}
.h2{font-family:var(--grot);font-weight:600;font-size:26px;line-height:1.05;margin:0 0 var(--s3)}
.h3{font-family:var(--grot);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin:0}
.lede{font-size:19px;line-height:1.3;max-width:56ch;margin:var(--s4) 0 0}
p{margin:0 0 var(--s3)}
.prose{max-width:62ch;font-size:15.5px}
.prose p{margin:0 0 var(--s3)}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{background:var(--ink);color:var(--bg);text-decoration:none}

/* ---------- layer 2: frame ---------- */
.bar{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--ink);transition:background-color var(--t) ease,border-color var(--t) ease}
.bar .in{display:flex;align-items:center;gap:var(--s4);padding:0 var(--s4);height:var(--bar-h);max-width:1400px;margin:0 auto}
.bar .in>*{flex:0 0 auto}
.bar .grow{flex:1 1 auto;min-width:0}
#title{width:94px;height:30px}
.bar .meta{display:flex;gap:var(--s4);align-items:baseline}
.bar .meta .val{white-space:nowrap}
@media (max-width:820px){ .bar .meta,.bar .session{display:none} .bar .in{gap:var(--s3)} }
.pulse-bar{display:block;width:100%;height:12px;border-top:1px solid var(--ink-12)}
.rail{position:fixed;left:0;top:calc(var(--bar-h) + 13px);bottom:0;width:var(--rail-w);z-index:3;border-right:1px solid var(--ink-12);background:var(--bg);transition:background-color var(--t) ease}
.rail canvas{width:100%;height:100%}
@media (max-width:820px){ .rail{display:none} }

/* ---------- layer 3: surface ---------- */
.view{position:relative;z-index:5;max-width:1400px;margin:0 auto;padding:var(--s5) var(--s4) 120px calc(var(--s4) + var(--rail-w))}
@media (max-width:820px){ .view{padding-left:var(--s4)} }
.view[hidden]{display:none}
.console{display:grid;grid-template-columns:150px 1fr;gap:var(--s5)}
@media (max-width:820px){ .console{grid-template-columns:1fr} }
.side{position:sticky;top:calc(var(--bar-h) + 13px + var(--s5));align-self:start;display:flex;flex-direction:column;gap:2px}
@media (max-width:820px){ .side{position:static;flex-direction:row;overflow-x:auto;gap:var(--s2);padding-bottom:var(--s2)} }
.side button{text-align:left;cursor:pointer;padding:6px 8px;background:transparent;border:1px solid transparent;color:var(--ink-70)}
.side button.on{border-color:var(--ink);color:var(--ink);background:var(--bg)}
.side button:hover{color:var(--ink)}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:1100px){ .panels{grid-template-columns:1fr} }
.panel{background:var(--bg);border:1px solid var(--ink-45);transition:background-color var(--t) ease,border-color var(--t) ease;min-width:0}
.panel.wide{grid-column:1/-1}
.panel>header{display:grid;grid-template-columns:1fr auto auto;gap:var(--s3);align-items:center;padding:var(--s2) var(--s3);border-bottom:1px solid var(--ink-25)}
.panel>header canvas{width:84px;height:14px}
.panel .body{padding:var(--s3)}
.paper{background:var(--bg);border:1px solid var(--ink-45);padding:var(--s5);transition:background-color var(--t) ease,border-color var(--t) ease}

/* controls */
button,input,select{font:inherit;color:inherit}
.btn{font-family:var(--grot);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--ink);background:var(--bg);color:var(--ink);cursor:pointer;transition:background-color var(--tq),color var(--tq)}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--bg);color:var(--ink)}
.btn.ghost{border-color:transparent}
.btn.ghost:hover{border-color:var(--ink)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn:disabled:hover{background:var(--bg);color:var(--ink)}
.btn.primary:disabled:hover{background:var(--ink);color:var(--bg)}
.row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.field{display:grid;grid-template-columns:1fr auto;gap:2px var(--s3);align-items:baseline;padding:6px 0;border-bottom:1px solid var(--ink-12)}
.field:last-child{border-bottom:0}
.field input[type=range]{grid-column:1/-1}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--ink-45)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:16px;margin-top:-7px;background:var(--ink);border:0;border-radius:0}
input[type=range]::-moz-range-track{height:2px;background:var(--ink-45)}
input[type=range]::-moz-range-thumb{width:10px;height:16px;background:var(--ink);border:0;border-radius:0}
.text{width:100%;padding:6px 8px;background:var(--bg);border:1px solid var(--ink-45);color:var(--ink);font-family:var(--mono);font-size:12px}
.text:focus{border-color:var(--ink);outline:none}
.text::placeholder{color:var(--ink-45)}
.session .text{width:220px}
.select{position:relative;display:inline-block}
.select select{-webkit-appearance:none;appearance:none;padding:6px 26px 6px 8px;background:var(--bg);border:1px solid var(--ink-45);color:var(--ink);font-family:var(--mono);font-size:12px;cursor:pointer}
.select::after{content:'';position:absolute;right:9px;top:50%;width:6px;height:6px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.seg{display:inline-flex;border:1px solid var(--ink)}
.seg button{padding:6px 12px;background:var(--bg);color:var(--ink);border:0;border-right:1px solid var(--ink-45);font-family:var(--grot);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background-color var(--tq),color var(--tq)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:var(--bg)}
.switch{display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .k{width:34px;height:18px;border:1px solid var(--ink);position:relative;transition:background-color var(--tq)}
.switch .k::after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;background:var(--ink);transition:transform var(--tq),background-color var(--tq)}
.switch input:checked+.k{background:var(--ink)}
.switch input:checked+.k::after{transform:translateX(16px);background:var(--bg)}
.switch input:focus-visible+.k{outline:2px solid var(--ink);outline-offset:2px}
.badge{display:inline-block;font-family:var(--grot);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border:1px solid var(--ink-45);color:var(--ink)}
.badge.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.prog{height:3px;background:var(--ink-12);position:relative;overflow:hidden}
.prog i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:0}
.tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-family:var(--grot);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-70);padding:4px 8px 4px 0;border-bottom:1px solid var(--ink-45)}
.tbl td{padding:4px 8px 4px 0;border-bottom:1px solid var(--ink-12);vertical-align:top}
.tbl td.n,.tbl th.n{text-align:right;padding-right:0}
.scroll{overflow-x:auto}
.inst{display:grid;grid-template-columns:1fr auto auto;gap:var(--s3);align-items:center;padding:5px 0;border-bottom:1px solid var(--ink-12)}
.inst:last-child{border-bottom:0}
.inst canvas{width:72px;height:12px}
.inst .val{min-width:9ch;text-align:right}
#lmap{width:100%;max-width:256px;border:1px solid var(--ink-45)}
.voice{font-size:16px;line-height:1.3;max-width:40ch}
.stagename{font-family:var(--serif);font-style:italic;font-weight:500;font-size:44px;line-height:1;margin:0 0 var(--s2)}

/* toasts */
.toasts{position:fixed;right:var(--s4);bottom:var(--s4);z-index:20;display:flex;flex-direction:column;gap:var(--s2);pointer-events:none}
.toast{background:var(--bg);border:1px solid var(--ink);padding:8px 12px;min-width:220px;max-width:320px;opacity:1;transition:opacity 6s linear}
.toast .lbl{display:block;margin-bottom:2px}
/* modal */
dialog{background:var(--bg);color:var(--ink);border:1px solid var(--ink);padding:0;max-width:min(92vw,600px)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog header{display:flex;justify-content:space-between;align-items:center;padding:var(--s2) var(--s3);border-bottom:1px solid var(--ink-25)}
dialog .body{padding:var(--s3)}
#lmapBig{width:100%;max-width:512px;border:1px solid var(--ink-45);margin:0 auto}

/* sheet (site) */
.sheet{display:grid;gap:var(--s4)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.rules{margin:0;padding:0 0 0 1.6em;font-size:14.5px;line-height:1.4;color:var(--ink-70)}
.rules li{padding:3px 0}
.rules li::marker{color:var(--ink-45)}
.rules em{font-style:normal;color:var(--ink)}
.typespec .line{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:baseline;padding:8px 0;border-bottom:1px solid var(--ink-12)}
.typespec .line:last-child{border-bottom:0}
.env{font-family:var(--mono);font-size:10.5px;color:var(--ink-45);line-height:1.5;overflow-wrap:anywhere}
.env b{color:var(--ink-70);font-weight:500}
.env p{margin:0 0 6px}

@media (prefers-reduced-motion: reduce){ *{transition-duration:0s !important} .toast{transition:opacity 2s linear !important} .wm .g{transition:opacity 8s linear !important} }