*{box-sizing:border-box}
:root{
  --pit:#0C0B09;--amber:#FFB020;--seam:#1A1814;--steel:#6A5327;--red:#FF3B2F;
  --ink:rgba(255,176,32,.86);--dim:rgba(255,176,32,.52);--tile:#131110;--tile2:#0F0E0C;
  --ease:cubic-bezier(.2,.7,.3,1);
}
html,body{margin:0;padding:0;max-width:100%}
body{
  background:var(--pit);color:var(--ink);
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;line-height:1.55;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--amber);text-decoration:none}
a:not([href]){color:var(--steel);cursor:default}
h1,h2{font-family:'Michroma',sans-serif;font-weight:400;text-transform:uppercase;color:var(--amber);margin:0;letter-spacing:.01em;overflow-wrap:break-word;hyphens:none}
p{margin:0 0 10px}
.steel{color:var(--steel)}
.num{text-align:right}
.flaps{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--amber)}
.flapc{display:inline-block;min-width:.60em;text-align:center}
.flapc.set{color:var(--amber)}
.down{color:var(--red) !important}
:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
#top,#board,#launch,#curve,#slab,#stake,#docs{scroll-margin-top:92px}

/* motion primitives */
@keyframes qwRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes qwThunk{0%{transform:translateY(0)}45%{transform:translateY(2px)}100%{transform:translateY(0)}}
.thunk{animation:qwThunk .18s ease}
.hall .h1,.hall .lede,.hall .proof,.hall .slip,.hall .clerk,.boardWrap,.rail.right .meter,.rail.right .panel{animation:qwRise .62s var(--ease) both}
.hall .h1{animation-delay:.06s}
.hall .lede{animation-delay:.14s}
.hall .proof{animation-delay:.2s}
.hall .slip{animation-delay:.26s}
.hall .clerk{animation-delay:.36s}
.boardWrap{animation-delay:.18s}
.rail.right .meter:nth-of-type(1){animation-delay:.26s}
.rail.right .meter:nth-of-type(2){animation-delay:.32s}
.rail.right .meter:nth-of-type(3){animation-delay:.38s}
.rail.right .panel{animation-delay:.44s}
html.js [data-reveal]{opacity:0;transform:translateY(14px)}
html.js [data-reveal].in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}

/* tickertape */
.tape{position:fixed;top:0;left:0;right:0;height:26px;background:#070706;border-bottom:1px solid var(--seam);overflow:hidden;z-index:60}
.tape-track{display:inline-block;white-space:nowrap;padding-top:4px;font-size:11px;color:var(--steel);letter-spacing:.14em;animation:tape 42s linear infinite;will-change:transform}
.tape-track b{color:var(--amber);font-weight:500}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* nav */
.nav{position:sticky;top:26px;z-index:50;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;margin-top:26px;background:rgba(12,11,9,.94);border-bottom:1px solid var(--seam);backdrop-filter:blur(3px)}
.brand{display:flex;align-items:center;gap:8px;font-family:'Michroma',sans-serif;font-size:12px;color:var(--amber)}
.brand img{width:24px;height:24px;border:1px solid var(--seam)}
.brand i{color:var(--steel);font-style:normal}
.links{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-left:auto}
.links a{color:var(--dim);transition:color .15s ease}
.links a:hover{color:var(--amber)}
.navacts{display:flex;gap:8px;align-items:center}
.btn{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 12px;min-height:38px;border:1px solid var(--steel);background:transparent;color:var(--amber);cursor:pointer;border-radius:0;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .08s ease}
.btn.primary{background:var(--amber);color:#0C0B09;border-color:var(--amber);font-weight:700}
.btn.primary:hover{background:#ffc24d}
.btn.ghost:hover{border-color:var(--amber)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn.wide{width:100%}

/* hall */
.hall{position:relative;display:grid;grid-template-columns:1fr;gap:14px;padding:16px 14px 28px}
.hall::before{content:"";position:absolute;inset:0;background:url(hero.jpg) center 30% / cover no-repeat;opacity:.17;
  -webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.25) 60%,transparent);mask-image:linear-gradient(#000,rgba(0,0,0,.25) 60%,transparent);pointer-events:none;z-index:0}
.hall>*{position:relative;z-index:1;min-width:0}
.h1{font-size:clamp(20px,6.2vw,30px);line-height:1.22;margin-bottom:10px}
.lede{color:var(--dim);max-width:46ch}
.proof{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);
  border-top:1px solid var(--seam);border-bottom:1px solid var(--seam);padding:8px 0;margin:0 0 14px}
.proof b{color:var(--amber);font-weight:500;font-variant-numeric:tabular-nums}
.proof i{color:var(--seam);font-style:normal}

/* order slip */
.slip{border:1px solid var(--seam);background:linear-gradient(var(--tile),var(--tile2));padding:12px}
.slipHead{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;color:var(--steel);border-bottom:1px solid var(--seam);padding-bottom:8px;margin-bottom:10px}
.fld{display:block;margin-bottom:10px}
.fld span,.fldlab{display:block;font-size:10px;letter-spacing:.16em;color:var(--steel);margin-bottom:4px}
.fld input{width:100%;background:#0A0908;border:1px solid var(--seam);color:var(--amber);font-family:inherit;font-size:14px;padding:10px;min-height:42px;border-radius:0;letter-spacing:.08em;transition:border-color .15s ease}
.fld input:focus{outline:none;border-color:var(--steel)}
.legsel{margin:12px 0}
.legTrack{position:relative;display:flex;align-items:center;justify-content:flex-end;height:42px;border:1px solid var(--seam);background:#0A0908;padding:3px;overflow:hidden}
.legAlt{position:absolute;left:12px;font-size:11px;color:#2a2318;letter-spacing:.18em}
.legKnob{position:relative;height:34px;min-width:50%;background:var(--amber);color:#0C0B09;border:0;font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.12em;cursor:grab;touch-action:none;transition:transform .16s cubic-bezier(.2,1.6,.5,1)}
.legKnob:active{cursor:grabbing}
.legNote{display:block;font-size:10px;color:var(--steel);margin-top:5px;letter-spacing:.14em}
.pairPreview{font-size:clamp(18px,5vw,24px);letter-spacing:.06em;margin:4px 0 12px;color:var(--steel)}
.pairPreview i{font-style:normal;color:var(--steel);padding:0 2px}
.pairPreview b{color:var(--amber)}
.formMsg{font-size:11px;color:var(--steel);margin-top:8px}
.formMsg.bad{color:var(--red)}
.clerk{margin:16px 0 0;display:flex;gap:10px;align-items:flex-end}
.clerk img{width:96px;border:1px solid var(--seam);object-fit:cover;object-position:center top}
.clerk figcaption{font-size:10px;color:var(--steel);letter-spacing:.06em;max-width:18ch}

/* board */
.boardWrap{position:relative;border:1px solid var(--seam);background:#0A0908;overflow:hidden}
.boardWrap::before{content:"";position:absolute;inset:0;background:url(texture-flaps.jpg) center / 360px auto repeat;
  opacity:.09;filter:sepia(1) hue-rotate(-12deg) saturate(1.8) brightness(.8);pointer-events:none;z-index:0}
.boardWrap>*{position:relative;z-index:1}
.boardHead,.boardFoot{display:grid;grid-template-columns:minmax(0,1fr) 88px 62px 50px;gap:6px;padding:9px 10px;font-size:10px;letter-spacing:.14em;color:var(--steel);background:#070706;border-bottom:1px solid var(--seam)}
.boardFoot{display:flex;justify-content:space-between;border-bottom:0;border-top:1px solid var(--seam)}
.rows{min-height:260px;background:repeating-linear-gradient(to bottom,rgba(255,176,32,.035) 0 1px,transparent 1px 42px)}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 88px 62px 50px;gap:6px;align-items:center;
  padding:9px 10px;border-bottom:1px solid var(--seam);background:linear-gradient(#141210,#0D0C0A)}
.row::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55);pointer-events:none}
.pairCell{display:flex;align-items:baseline;gap:3px;min-width:0}
.base{color:var(--amber);font-weight:700;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9ch}
.sl{color:var(--steel)}
.qt{display:inline-block;background:#1b1710;border:1px solid var(--seam);color:var(--amber);padding:1px 5px;font-size:11px;letter-spacing:.08em;transition:transform .12s ease,box-shadow .12s ease}
.row:hover .qt{transform:translateY(-4px);box-shadow:0 4px 0 #000}
.row .solEq{display:none;position:absolute;left:10px;bottom:1px;font-size:9px;color:var(--steel);letter-spacing:.06em}
.row:hover .solEq{display:block}
.px{text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
.st{font-size:9px;letter-spacing:.1em;color:var(--steel);text-align:center;border:1px solid var(--seam);padding:2px 0}
.slipBtn{text-align:right;background:transparent;border:0;color:var(--dim);font-family:inherit;font-size:11px;cursor:pointer;min-height:32px;padding:0 2px;transition:color .15s ease,transform .08s ease}
.slipBtn:hover{color:var(--amber)}
.slipBtn:active{transform:translateY(1px)}
.rows .row:nth-child(n+7){opacity:.8}
.rows .row:nth-child(n+9){opacity:.62;filter:blur(.3px)}
.rows .row:nth-child(n+11){opacity:.45;filter:blur(.7px)}
.rows .row:hover{opacity:1;filter:none}
.empty{padding:36px 16px;color:var(--steel);font-size:12px;max-width:44ch;line-height:1.7}

/* meters + panels */
.meter{border:1px solid var(--seam);background:linear-gradient(var(--tile),var(--tile2));padding:11px 12px;margin-bottom:10px}
.mLabel{display:block;font-size:9.5px;letter-spacing:.17em;color:var(--steel);margin-bottom:4px}
.meter .flaps{display:block;font-size:22px}
.meter .flaps.big{font-size:clamp(26px,7vw,34px);line-height:1.1}
.mSub{display:block;font-size:10px;color:var(--steel);margin-top:4px;letter-spacing:.04em}
.panel{border:1px solid var(--seam);background:linear-gradient(var(--tile),var(--tile2));padding:11px 12px}
.panelHead{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.16em;color:var(--steel);border-bottom:1px solid var(--seam);padding-bottom:8px;margin-bottom:8px}
.chip{font-size:9px;letter-spacing:.14em;border:1px solid var(--steel);color:var(--steel);padding:2px 6px}
.chip.live{color:#0C0B09;background:var(--amber);border-color:var(--amber)}
.kv{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px dashed rgba(106,83,39,.3);font-size:11px;color:var(--steel)}
.kv:last-of-type{border-bottom:0}
.kv b{color:var(--amber);font-weight:500;font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.kv.tight{padding-top:2px;border:0}
.panelActs{display:flex;gap:8px;margin:10px 0 6px}
.panelActs .btn{flex:1}

/* stations */
.station{padding:28px 14px;border-top:1px solid var(--seam)}
.stHead h2{font-size:clamp(17px,4.6vw,24px);margin-bottom:6px}
.stHead p{color:var(--steel);max-width:60ch}
.curveGrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.caBox{display:flex;align-items:center;gap:10px;border:1px solid var(--seam);background:#0A0908;padding:10px}
.caLogo{width:38px;height:38px;border:1px solid var(--seam);flex:none}
.caText{min-width:0;flex:1}
.caText code{display:block;font-size:11px;color:var(--amber);overflow-wrap:anywhere;letter-spacing:.02em}
.stateCard,.widget{border:1px solid var(--seam);background:linear-gradient(var(--tile),var(--tile2));padding:12px}
.prog{height:8px;background:#0A0908;border:1px solid var(--seam);margin:10px 0 4px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--amber);transition:width .5s ease}
.tabs{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.tab{flex:none;background:transparent;border:1px solid var(--seam);color:var(--steel);font-family:inherit;font-size:11px;letter-spacing:.12em;padding:7px 14px;min-height:34px;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.tab:hover{border-color:var(--steel);color:var(--amber)}
.tab:active{transform:translateY(1px)}
.tab.on{background:var(--amber);color:#0C0B09;border-color:var(--amber);font-weight:700}
.tabs .chip{margin-left:auto}

/* slab */
.slab{display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
.slabArt img{width:100%;border:1px solid var(--seam);object-fit:cover;max-height:280px;object-position:center}
.splitList{list-style:none;margin:12px 0;padding:0}
.splitList li{display:flex;gap:12px;align-items:baseline;border-top:1px solid var(--seam);padding:10px 0}
.splitList b{font-family:'Michroma',sans-serif;font-size:24px;color:var(--amber);min-width:52px}
.splitList span{color:var(--dim)}

/* docs */
.stations{list-style:none;display:grid;grid-template-columns:1fr;gap:10px;padding:0;margin:16px 0}
.stations li{border:1px solid var(--seam);background:linear-gradient(var(--tile),var(--tile2));padding:12px;position:relative}
.stations .n{font-size:10px;color:var(--steel);letter-spacing:.2em}
.stations b{display:block;font-family:'Michroma',sans-serif;font-size:12px;color:var(--amber);margin:6px 0 4px;text-transform:uppercase}
.stations p{color:var(--dim);margin:0;font-size:12px}
.addr{border:1px solid var(--seam);padding:12px;background:#0A0908}

/* footer */
.foot{display:flex;flex-direction:column;gap:10px;padding:18px 14px 30px;border-top:1px solid var(--seam);font-size:11px;color:var(--steel)}
.footL,.footR{display:flex;align-items:center;gap:10px}
.fLogo{width:22px;height:22px;border:1px solid var(--seam)}

/* toast */
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,12px);background:#141210;border:1px solid var(--steel);color:var(--amber);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;z-index:90;opacity:0;pointer-events:none;max-width:92vw;text-align:center;
  transition:opacity .2s ease,transform .2s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:759px){
  .nav{padding:8px 12px;gap:8px}
  .navacts{order:1;margin-left:auto}
  .links{order:2;width:100%;margin-left:0;justify-content:space-between;gap:4px;font-size:10.5px}
  .links a{padding:7px 0;display:inline-block}
  .hall{padding:14px 12px 24px}
  .clerk img{width:78px}
}
@media(min-width:760px){
  body{font-size:14px}
  .hall{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:22px 20px 34px;gap:16px}
  .rail.right{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
  .rail.right .panel{grid-column:1 / -1}
  .curveGrid{grid-template-columns:1fr 1fr}
  .caBox{grid-column:1 / -1}
  .slab{grid-template-columns:1fr 1fr;padding:34px 20px}
  .stations{grid-template-columns:repeat(2,1fr)}
  .foot{flex-direction:row;justify-content:space-between;align-items:center}
}
@media(min-width:1080px){
  .hall{grid-template-columns:340px minmax(0,1fr) 300px;padding:26px 26px 44px;gap:18px}
  .rail.right{grid-column:auto;display:block}
  .station{padding:46px 26px}
  .curveGrid{grid-template-columns:1.1fr 1fr 1fr}
  .caBox{grid-column:1 / -1}
  .stations{grid-template-columns:repeat(4,1fr)}
  .rows{min-height:420px}
  .h1{font-size:34px}
  .proof{display:none}
}
@media(prefers-reduced-motion:reduce){
  .tape-track{animation:none}
  .flapc{transition:none}
  .hall .h1,.hall .lede,.hall .proof,.hall .slip,.hall .clerk,.boardWrap,.rail.right .meter,.rail.right .panel{animation:none}
  html.js [data-reveal]{opacity:1;transform:none}
  .thunk{animation:none}
  .btn,.tab,.qt,.prog i,.toast{transition:none}
}
