/* ══════════════════════════════════════════════════════════════════════════
   ACETATE — acetate.si
   Design DNA: lacquer black, amber cut, bone type. Everything on an 8px grid.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* palette */
  --ink:#08070A;
  --ink-2:#0D0C11;
  --lacquer:#111017;
  --amber:#E8A33D;
  --amber-hi:#F6D8A0;
  --oxide:#C4553B;
  --bone:#EDE7DB;
  --bone-dim:#A9A296;
  --bone-ghost:#6C665D;
  --line:rgba(237,231,219,.11);
  --line-hard:rgba(237,231,219,.20);
  --blue:#2E7BF6;

  /* geometry — a single 8px module governs every gap, pad and radius */
  --u:8px;
  --gap:calc(var(--u)*2);
  --pad-x:clamp(20px, 3.2vw, 48px);
  --pad-y:clamp(16px, 2.2vh, 26px);
  --r-tile:22px;
  --r-card:18px;
  --r-ctl:11px;

  /* type */
  --sans:'Inter Tight', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
img,svg{display:block;max-width:100%}
[hidden]{display:none !important}   /* beats component display rules */
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
::selection{background:rgba(232,163,61,.28);color:var(--bone)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ── hypnotic field ──────────────────────────────────────────────────────── */
.field{position:fixed;inset:0;z-index:0;background:radial-gradient(120% 90% at 50% 42%, #14121A 0%, #0A0910 46%, #050508 100%)}
.field canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.field-bloom{
  position:absolute;left:50%;top:44%;width:min(150vh,150vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(232,163,61,.14) 0%, rgba(196,85,59,.06) 34%, transparent 66%);
  filter:blur(30px);animation:breathe 17s ease-in-out infinite;pointer-events:none;
}
@keyframes breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.09)}}
.field-grain{
  position:absolute;inset:-120%;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.65'/></svg>");
  animation:drift 6s steps(6) infinite;
}
@keyframes drift{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
.field-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(115% 85% at 50% 45%, transparent 42%, rgba(3,3,5,.72) 100%)}

/* ── shell ───────────────────────────────────────────────────────────────── */
.shell{
  position:relative;z-index:1;
  height:100dvh;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:calc(var(--pad-y) + env(safe-area-inset-top)) calc(var(--pad-x) + env(safe-area-inset-right)) calc(var(--pad-y) + env(safe-area-inset-bottom)) calc(var(--pad-x) + env(safe-area-inset-left));
  max-width:1560px;margin:0 auto;width:100%;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.mark{width:clamp(46px,4.4vw,58px);aspect-ratio:1;display:block;flex:none;filter:drop-shadow(0 6px 22px rgba(232,163,61,.20))}
.mark svg{width:100%;height:100%}
.mark-grooves{transform-origin:48px 48px;animation:spin 9s linear infinite}
.mark-cut{stroke-dasharray:2.4 3.6}
@keyframes spin{to{transform:rotate(360deg)}}
.mark-arm{transform-origin:92px 14px;animation:cue 11s var(--ease-out) infinite}
@keyframes cue{0%,100%{transform:rotate(0deg)}45%{transform:rotate(-7deg)}70%{transform:rotate(-5deg)}}
.brand-txt{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand-name{font-weight:700;font-size:clamp(17px,1.5vw,20px);letter-spacing:.30em;color:var(--bone)}
.brand-url{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--bone-ghost);margin-top:6px}
.brand-url span{color:var(--amber)}

.hdr-right{display:flex;align-items:center;gap:14px}
.stat{
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--bone-dim);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);white-space:nowrap;
}
.stat-led{width:6px;height:6px;border-radius:50%;background:var(--bone-ghost);box-shadow:0 0 0 0 rgba(232,163,61,.5)}
.stat-led.live{background:#54D08A;animation:led 2.6s ease-out infinite}
.stat-led.warn{background:var(--oxide)}
@keyframes led{0%{box-shadow:0 0 0 0 rgba(84,208,138,.45)}70%{box-shadow:0 0 0 7px rgba(84,208,138,0)}100%{box-shadow:0 0 0 0 rgba(84,208,138,0)}}

/* the inconspicuous login: a cut-dot, no label */
.cutdot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:border-color .3s var(--ease),background .3s var(--ease)}
.cutdot span{width:7px;height:7px;border-radius:50%;background:var(--bone-ghost);transition:all .3s var(--ease)}
.cutdot:hover{border-color:var(--line-hard)}
.cutdot:hover span{background:var(--amber);box-shadow:0 0 12px rgba(232,163,61,.8)}
.cutdot.in span{background:var(--amber);box-shadow:0 0 10px rgba(232,163,61,.7)}

/* ── main ────────────────────────────────────────────────────────────────── */
.main{
  display:grid;grid-template-columns:minmax(300px,.92fr) minmax(0,1.45fr);
  gap:clamp(28px,4vw,72px);align-items:stretch;min-height:0;padding:calc(var(--u)*2) 0;
}
.hero{max-width:46ch;align-self:center}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;color:var(--amber)}
.eyebrow-rule{width:34px;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.hero h1{
  margin:0;font-size:clamp(34px,4.4vw,62px);line-height:1.03;letter-spacing:-.035em;font-weight:600;color:var(--bone);
}
.hero h1 em{font-style:italic;color:var(--amber);font-weight:500}
.lede{margin:calc(var(--u)*2.5) 0 0;color:var(--bone-dim);font-size:clamp(14px,1.05vw,16px);line-height:1.62;max-width:44ch}
.ticker{list-style:none;display:flex;gap:clamp(16px,2vw,30px);margin:calc(var(--u)*4) 0 0;padding:0;flex-wrap:wrap}
.ticker li{display:flex;flex-direction:column;gap:5px;padding-left:12px;border-left:1px solid var(--line-hard)}
.ticker b{font-family:var(--mono);font-size:17px;color:var(--bone);font-weight:500;letter-spacing:-.02em}
.ticker span{font-size:10.5px;letter-spacing:.06em;color:var(--bone-ghost);max-width:16ch;line-height:1.35}

/* ── the desk grid ───────────────────────────────────────────────────────── */
.grid-wrap{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*2)}
.grid-label{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--bone-ghost)}
.grid-rule{flex:1;height:1px;background:var(--line)}
.grid-hint{color:var(--bone-ghost);opacity:.7;text-transform:lowercase;letter-spacing:.08em}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}

.tile{
  position:relative;isolation:isolate;overflow:hidden;text-align:left;
  aspect-ratio:1/.86;min-height:112px;
  border-radius:var(--r-tile);
  padding:calc(var(--u)*1.75);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--u);
  background:
    linear-gradient(158deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.018) 34%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #17151C 0%, #100E14 100%);
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 28px -18px rgba(0,0,0,.95);
  transition:transform .42s var(--ease-out), border-color .42s var(--ease), box-shadow .42s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.tile::after{
  content:'';position:absolute;inset:-40% -60%;z-index:-1;
  background:linear-gradient(100deg,transparent 38%,rgba(232,163,61,.16) 50%,transparent 62%);
  transform:translateX(-60%);transition:transform .9s var(--ease-out);
}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:rgba(232,163,61,.42);box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 26px 44px -26px rgba(0,0,0,1), 0 0 0 1px rgba(232,163,61,.09)}
.tile:hover::after,.tile:focus-visible::after{transform:translateX(60%)}
.tile:active{transform:translateY(-1px) scale(.985)}
.tile-glyph{width:30px;height:30px;color:var(--amber);opacity:.95}
.tile-glyph svg{width:100%;height:100%}
.tile-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.tile-name{font-size:13.5px;font-weight:600;letter-spacing:-.012em;color:var(--bone);line-height:1.2}
.tile-blurb{font-size:10.5px;line-height:1.4;color:var(--bone-ghost);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-n{position:absolute;top:calc(var(--u)*1.75);right:calc(var(--u)*1.75);font-family:var(--mono);font-size:9.5px;color:var(--bone-ghost);opacity:.55;letter-spacing:.06em}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap);flex-wrap:wrap;
  padding-top:calc(var(--u)*1.5);border-top:1px solid var(--line);
  font-size:10.5px;color:var(--bone-ghost);letter-spacing:.02em;
}
.foot-l{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-l a{color:var(--bone-ghost);transition:color .25s var(--ease)}
.foot-l a:hover{color:var(--bone-dim)}
.foot-r{display:flex;align-items:center;gap:7px}
.made{color:var(--bone-dim)}
.bluedot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 9px rgba(46,123,246,.85);display:inline-block;flex:none;margin-left:7px;vertical-align:middle;animation:bd 3.4s ease-in-out infinite}
.foot-r .bluedot{margin-left:0}
@keyframes bd{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}

/* ── tool panel ──────────────────────────────────────────────────────────── */
.panel{
  position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:auto 1fr;
  background:linear-gradient(180deg, rgba(9,8,12,.94), rgba(6,5,9,.985));
  backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);
  opacity:0;transform:translateY(14px) scale(.994);transition:opacity .34s var(--ease-out), transform .34s var(--ease-out);
  padding:calc(var(--pad-y) + env(safe-area-inset-top)) calc(var(--pad-x) + env(safe-area-inset-right)) calc(var(--u)*1.5 + env(safe-area-inset-bottom)) calc(var(--pad-x) + env(safe-area-inset-left));
}
.panel[hidden]{display:none}
.panel.open{opacity:1;transform:none}
.panel-hdr{display:flex;align-items:center;gap:clamp(14px,2vw,28px);padding-bottom:calc(var(--u)*1.75);border-bottom:1px solid var(--line)}
.back{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 9px;border-radius:999px;border:1px solid var(--line);color:var(--bone-dim);font-size:12px;transition:all .28s var(--ease);flex:none}
.back svg{width:16px;height:16px}
.back:hover{border-color:var(--line-hard);color:var(--bone);background:rgba(255,255,255,.04)}
.panel-id{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
.panel-glyph{width:34px;height:34px;color:var(--amber);flex:none}
.panel-glyph svg{width:100%;height:100%}
.panel-id h2{margin:0;font-size:clamp(16px,1.7vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.panel-id p{margin:4px 0 0;font-size:11.5px;color:var(--bone-ghost);line-height:1.35}
.panel-run{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--bone-ghost);text-transform:uppercase;white-space:nowrap}

.panel-body{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.4fr);gap:clamp(20px,2.4vw,40px);min-height:0;padding-top:calc(var(--u)*2.5)}

/* brief */
.brief{display:flex;flex-direction:column;gap:calc(var(--u)*2);min-height:0;overflow-y:auto;padding-right:6px;scrollbar-width:thin}
.brief-fields{display:flex;flex-direction:column;gap:calc(var(--u)*2)}
.f{display:flex;flex-direction:column;gap:7px}
.f label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-ghost)}
.f label em{color:var(--oxide);font-style:normal;margin-left:5px}
.f input,.f textarea{
  width:100%;background:rgba(255,255,255,.028);border:1px solid var(--line);border-radius:var(--r-ctl);
  padding:12px 13px;font-size:14px;color:var(--bone);transition:border-color .25s var(--ease),background .25s var(--ease);resize:vertical;
}
.f textarea{min-height:104px;line-height:1.55}
.f input::placeholder,.f textarea::placeholder{color:var(--bone-ghost);opacity:.62}
.f input:focus,.f textarea:focus{outline:none;border-color:rgba(232,163,61,.55);background:rgba(232,163,61,.045)}

.opts{border:1px solid var(--line);border-radius:var(--r-card);padding:calc(var(--u)*1.75);margin:0;display:flex;flex-direction:column;gap:calc(var(--u)*1.75)}
.opts legend{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-ghost);padding:0 7px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:rgba(255,255,255,.03);border-radius:10px;padding:3px}
.seg button{height:32px;border-radius:8px;font-size:12px;color:var(--bone-dim);transition:all .28s var(--ease)}
.seg button.on{background:linear-gradient(180deg,rgba(232,163,61,.22),rgba(232,163,61,.13));color:var(--amber-hi);box-shadow:0 1px 0 rgba(255,255,255,.07) inset}
.seg button:hover:not(.on){color:var(--bone)}
.toggle{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.track{width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);position:relative;flex:none;transition:background .3s var(--ease),border-color .3s var(--ease);margin-top:1px}
.knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--bone-ghost);transition:transform .3s var(--ease-out),background .3s var(--ease)}
.toggle input:checked + .track{background:rgba(232,163,61,.30);border-color:rgba(232,163,61,.5)}
.toggle input:checked + .track .knob{transform:translateX(16px);background:var(--amber)}
.toggle input:focus-visible + .track{outline:2px solid var(--amber);outline-offset:3px}
.toggle-txt{font-size:12.5px;color:var(--bone-dim);display:flex;flex-direction:column;gap:3px;line-height:1.35}
.toggle-txt em{font-style:normal;font-size:10.5px;color:var(--bone-ghost)}

.run{
  position:relative;overflow:hidden;height:50px;border-radius:var(--r-ctl);
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,#F0B255,#D8912F);color:#14100A;font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 14px 30px -16px rgba(232,163,61,.85);
  transition:transform .2s var(--ease),filter .25s var(--ease),opacity .25s var(--ease);flex:none;
}
.run:hover{filter:brightness(1.06)}
.run:active{transform:scale(.988)}
.run[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.35)}
.run-key{font-family:var(--mono);font-size:11px;opacity:.6;border:1px solid rgba(20,16,10,.32);border-radius:5px;padding:1px 5px}
.brief-note{margin:0;font-size:10px;line-height:1.5;color:var(--bone-ghost);opacity:.8}

/* output */
.out{display:grid;grid-template-rows:auto 1fr auto;min-height:0;border:1px solid var(--line);border-radius:var(--r-card);background:rgba(255,255,255,.016);overflow:hidden}
.out-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.out-state{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-dim)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--bone-ghost);flex:none}
.out.busy .pulse{background:var(--amber);animation:led2 1.15s ease-in-out infinite}
.out.done .pulse{background:#54D08A}
.out.err .pulse{background:var(--oxide)}
@keyframes led2{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.25)}}
.out-acts{display:flex;gap:6px;flex-wrap:wrap}
.act{height:29px;padding:0 11px;border-radius:8px;border:1px solid var(--line);font-size:11.5px;color:var(--bone-dim);transition:all .25s var(--ease)}
.act:hover{border-color:var(--line-hard);color:var(--bone);background:rgba(255,255,255,.05)}
.act-stop{border-color:rgba(196,85,59,.5);color:var(--oxide)}
.out-scroll{overflow-y:auto;padding:clamp(16px,2vw,28px);scrollbar-width:thin;scroll-behavior:smooth}
.out-scroll::-webkit-scrollbar{width:9px}
.out-scroll::-webkit-scrollbar-thumb{background:rgba(237,231,219,.12);border-radius:9px;border:3px solid transparent;background-clip:content-box}
.out-empty{height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:var(--bone-ghost);font-size:12.5px;text-align:center}
.out-empty-art{display:flex;align-items:flex-end;gap:5px;height:44px}
.out-empty-art span{width:3px;border-radius:2px;background:linear-gradient(180deg,var(--amber),rgba(232,163,61,.18));animation:bars 1.9s ease-in-out infinite}
.out-empty-art span:nth-child(1){height:36%;animation-delay:0s}
.out-empty-art span:nth-child(2){height:76%;animation-delay:.16s}
.out-empty-art span:nth-child(3){height:52%;animation-delay:.32s}
.out-empty-art span:nth-child(4){height:96%;animation-delay:.48s}
.out-empty-art span:nth-child(5){height:44%;animation-delay:.64s}
@keyframes bars{0%,100%{transform:scaleY(.35);opacity:.5}50%{transform:scaleY(1);opacity:1}}
.out-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding:9px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--bone-ghost)}
.out-foot-r{display:inline-flex;align-items:center;gap:6px}

.think{margin:0 0 20px;border:1px dashed var(--line-hard);border-radius:12px;background:rgba(232,163,61,.035)}
.think summary{cursor:pointer;padding:9px 13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);list-style:none}
.think summary::-webkit-details-marker{display:none}
.think summary::before{content:'▸ ';display:inline-block;transition:transform .25s var(--ease)}
.think[open] summary::before{content:'▾ '}
.think-n{color:var(--bone-ghost);margin-left:6px}
.think pre{margin:0;padding:0 13px 13px;max-height:190px;overflow-y:auto;white-space:pre-wrap;font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--bone-ghost)}

/* rendered markdown */
.md{font-size:14.5px;line-height:1.68;color:var(--bone);max-width:78ch}
.md:empty{display:none}
.md h2{margin:30px 0 12px;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--amber);text-transform:uppercase;font-family:var(--mono);letter-spacing:.1em}
.md h2:first-child{margin-top:0}
.md h3{margin:24px 0 9px;font-size:14.5px;font-weight:600;color:var(--bone)}
.md p{margin:0 0 13px}
.md ul,.md ol{margin:0 0 15px;padding-left:20px}
.md li{margin:0 0 6px}
.md li::marker{color:var(--amber)}
.md strong{color:var(--amber-hi);font-weight:600}
.md em{color:var(--bone-dim)}
.md code{font-family:var(--mono);font-size:12.5px;background:rgba(232,163,61,.12);padding:1.5px 5px;border-radius:5px;color:var(--amber-hi)}
.md pre{background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:10px;padding:14px;overflow-x:auto;margin:0 0 15px}
.md pre code{background:none;padding:0;color:var(--bone-dim);font-size:12px;line-height:1.6}
.md blockquote{margin:0 0 15px;padding:2px 0 2px 15px;border-left:2px solid rgba(232,163,61,.5);color:var(--bone-dim)}
.md hr{border:0;height:1px;background:var(--line);margin:24px 0}
.md a{color:var(--amber);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.md table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:12.5px;display:block;overflow-x:auto;white-space:normal}
.md th,.md td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.md th{white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-ghost);border-bottom-color:var(--line-hard);position:sticky;top:0;background:#0C0B10}
.md tbody tr:hover{background:rgba(232,163,61,.045)}
.caret{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ── account sheet ───────────────────────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(4,4,7,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .3s var(--ease)}
.sheet[hidden]{display:none}
.sheet.open{opacity:1}
.sheet-card{position:relative;width:min(430px,100%);max-height:86dvh;overflow-y:auto;border-radius:20px;border:1px solid var(--line-hard);background:linear-gradient(180deg,#15131A,#0C0B10);padding:calc(var(--u)*3.5);box-shadow:0 40px 90px -30px rgba(0,0,0,1);transform:translateY(12px) scale(.985);transition:transform .34s var(--ease-out)}
.sheet.open .sheet-card{transform:none}
.sheet-x{position:absolute;top:14px;right:16px;width:30px;height:30px;border-radius:50%;font-size:19px;line-height:1;color:var(--bone-ghost);transition:all .25s var(--ease)}
.sheet-x:hover{background:rgba(255,255,255,.06);color:var(--bone)}
.sheet h3{margin:0 0 8px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.sheet-sub{margin:0 0 22px;font-size:12.5px;line-height:1.6;color:var(--bone-ghost)}
.auth-form{display:flex;flex-direction:column;gap:8px}
.auth-form label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-ghost)}
.auth-form input{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-ctl);padding:12px 13px;font-size:14px}
.auth-form input:focus{outline:none;border-color:rgba(232,163,61,.55)}
.auth-form button{height:44px;border-radius:var(--r-ctl);background:linear-gradient(180deg,#F0B255,#D8912F);color:#14100A;font-weight:600;font-size:14px;margin-top:6px;transition:filter .25s var(--ease)}
.auth-form button:hover{filter:brightness(1.06)}
.auth-msg{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:var(--amber);min-height:1em}
.hist{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.hist-hd{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-ghost);margin-bottom:10px}
.hist-hd button{font:inherit;color:var(--bone-ghost);text-decoration:underline;text-underline-offset:2px}
.hist-hd button:hover{color:var(--oxide)}
#histList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;max-height:180px;overflow-y:auto}
#histList li{font-size:12px}
#histList li.hist-none{color:var(--bone-ghost);font-size:11.5px}
#histList button{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:8px 10px;border-radius:9px;border:1px solid transparent;color:var(--bone-dim);transition:all .22s var(--ease)}
#histList button:hover{background:rgba(255,255,255,.045);border-color:var(--line);color:var(--bone)}
#histList time{font-family:var(--mono);font-size:10px;color:var(--bone-ghost);flex:none}
.signout{margin-top:18px;width:100%;height:38px;border-radius:var(--r-ctl);border:1px solid var(--line);color:var(--bone-dim);font-size:12.5px;transition:all .25s var(--ease)}
.signout:hover{border-color:rgba(196,85,59,.5);color:var(--oxide)}

/* ── toast ───────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:120;
  padding:11px 18px;border-radius:999px;border:1px solid var(--line-hard);background:rgba(20,18,24,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:12.5px;color:var(--bone);opacity:0;pointer-events:none;transition:all .34s var(--ease-out);max-width:calc(100vw - 40px);text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ══ responsive ══════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .main{grid-template-columns:1fr;gap:clamp(24px,4vh,40px);align-content:center}
  .hero{max-width:none}
  .lede{max-width:60ch}
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tile{aspect-ratio:1/.94;min-height:104px}
  body,.shell{overflow:auto}
  .shell{height:auto;min-height:100dvh}
}
@media (max-width:980px){
  /* single column: rows must size to content and the panel itself does the scrolling,
     otherwise a compressed auto row lets the brief spill under the output card */
  .panel-body{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;overflow-y:auto;gap:20px;padding-bottom:24px}
  .brief{overflow:visible;min-height:auto}
  .out{min-height:min(460px,72dvh)}
}
@media (max-width:820px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ticker li{padding-left:10px}
}
@media (max-width:600px){
  :root{--gap:11px;--r-tile:18px}
  .shell{padding-top:calc(14px + env(safe-area-inset-top))}
  .hero h1{font-size:clamp(30px,8.6vw,42px)}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile{aspect-ratio:1/1.06;min-height:98px;padding:12px;border-radius:var(--r-tile)}
  .tile-glyph{width:24px;height:24px}
  .tile-name{font-size:11.5px;line-height:1.22}
  .tile-blurb{display:none}
  .tile-n{display:none}
  .brand-name{font-size:15px;letter-spacing:.22em}
  .stat{height:28px;padding:0 10px;font-size:9.5px}
  .foot{flex-direction:column;align-items:flex-start;gap:10px;font-size:10px}
  .panel{padding-left:16px;padding-right:16px}
  .panel-hdr{gap:12px}
  .panel-id h2{font-size:15px}
  .panel-id p{display:none}
  .panel-run{display:none}
  .panel-glyph{width:26px;height:26px}
  .out-scroll{padding:16px}
  .md{font-size:14px}
  .md table{font-size:11.5px}
  .sheet-card{padding:24px 20px}
  .out-bar{flex-direction:column;align-items:flex-start;gap:9px}
}
@media (max-width:380px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ticker li:nth-child(3){display:none}
}
/* Desktop is a fixed viewport: the desk fills the space left over, exactly, so the
   footer is never pushed off screen regardless of window height. */
@media (min-width:1181px){
  .grid{flex:1;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));align-items:center}
  .tile{aspect-ratio:auto;height:100%;min-height:84px;max-height:250px}
}
@media (min-width:1181px) and (max-height:820px){
  .hero h1{font-size:clamp(30px,3.4vw,44px)}
  .ticker{margin-top:calc(var(--u)*2.5)}
  .lede{font-size:13.5px}
}
@media (min-width:1181px) and (max-height:700px){
  .lede{display:none}
  .tile-blurb{-webkit-line-clamp:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.08s !important}
  .field-grain{display:none}
}
@media print{
  .field,.hdr,.foot,.brief,.out-bar,.out-foot,.panel-hdr{display:none !important}
  body,.panel{background:#fff;color:#000;overflow:visible}
  .md{color:#000;max-width:none}
  .md h2{color:#000}
}