@import url("tokens.css?v=4");
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font:400 var(--text-base)/1.55 var(--font-body);font-feature-settings:"ss01","cv01";}
a{color:inherit;text-decoration:none}
::selection{background:var(--color-ink);color:var(--color-paper)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
h1,h2,h3{margin:0;font-style:normal;font-weight:700;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere;min-width:0}
p{margin:0}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--text-xs);letter-spacing:0;line-height:1.5}
.muted{color:var(--color-muted)}
.accent{color:var(--color-accent)}
.wrap{padding-inline:clamp(var(--space-sm),4vw,var(--space-2xl))}

/* links: underline draws in on hover (transform only) */
.u{position:relative;display:inline-block}
.u::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease-out)}
.u:hover::after,.u:focus-visible::after{transform:scaleX(1)}

/* N9 edge-aligned nav */
.nav{display:flex;justify-content:space-between;align-items:baseline;padding-block:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule)}
.wordmark{font-weight:700;font-size:var(--text-md);letter-spacing:-.03em}
.nav a.u{font-weight:500;white-space:nowrap}

/* buttons: rectangular, black, 2px radius */
.btn{appearance:none;display:inline-flex;align-items:center;gap:.6em;border:0;border-radius:var(--radius);background:var(--color-ink);color:var(--color-paper);font:600 var(--text-base)/1 var(--font-body);padding:.95em 1.3em;cursor:pointer;white-space:nowrap;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--color-ink-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn-ghost{background:transparent;color:var(--color-ink);border:var(--rule-hair) solid var(--color-ink)}
.btn-ghost:hover{background:var(--color-paper-2)}

/* rules */
.rule-heavy{border:0;border-top:var(--rule-heavy) solid var(--color-ink);margin:0}
.rule{border:0;border-top:var(--rule-hair) solid var(--color-rule);margin:0}

/* ===== fold ===== */
.fold{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-md);align-items:start;padding-block:var(--space-xl) var(--space-2xl);min-height:calc(100svh - 5rem)}
.caption{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-lg);color:var(--color-muted);margin-bottom:var(--space-2xl)}
.caption b{color:var(--color-ink);font-weight:500}
.display{grid-column:1/8;font:800 var(--text-display)/.86 var(--font-display);letter-spacing:-.045em;text-transform:lowercase;margin-left:-.05em;margin-top:auto}
.display span{display:block}
.lede{grid-column:1/7;margin-top:var(--space-xl);max-width:26ch;font-size:var(--text-xl);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.sublede{grid-column:1/7;margin-top:var(--space-md);max-width:52ch;color:var(--color-ink-2);font-size:var(--text-md);line-height:1.45}
.fold-cta{grid-column:1/7;margin-top:var(--space-lg);display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);align-items:center}
.ladder-wrap{grid-column:8/13;grid-row:2/span 4;align-self:start;display:flex;flex-direction:column;justify-content:flex-start;padding-top:var(--space-2xs)}

/* one-shot entrance (transform + opacity only) */
.rise{animation:rise var(--dur-slow) var(--ease-out) both}
.rise.d1{animation-delay:60ms}.rise.d2{animation-delay:140ms}.rise.d3{animation-delay:220ms}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== the ladder (live liquidation map) ===== */
.ladder{margin:0;border-top:var(--rule-hair) solid var(--color-ink);padding-top:var(--space-xs)}
.ladder figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-sm);color:var(--color-muted);margin-bottom:var(--space-sm);white-space:nowrap}
.ladder figcaption>span:first-child{overflow:hidden;text-overflow:ellipsis}
.ladder figcaption b{color:var(--color-ink);font-weight:500}
.ladder ol{list-style:none;margin:0;padding:0;display:grid;row-gap:5px}
.ladder li{display:grid;grid-template-columns:5.6em minmax(0,1fr) 4.6em;align-items:center;column-gap:var(--space-xs);height:1.35rem}
.ladder .px{text-align:right;color:var(--color-ink-2)}
.ladder .val{color:var(--color-muted)}
.ladder .bar{height:.7rem;background:var(--color-ink);transform:scaleX(var(--w,0));transform-origin:left;transition:transform var(--dur-slow) var(--ease-out);transition-delay:calc(var(--i,0)*28ms)}
.ladder li.short .bar{background:var(--color-ink-2);opacity:.55}
.ladder li.mark{height:1.55rem;border-block:var(--rule-hair) solid var(--color-accent);margin-block:2px}
.ladder li.mark .px,.ladder li.mark .val{color:var(--color-accent);font-weight:500}
.ladder li.mark .bar{background:transparent;height:1px;border-top:1px dashed var(--color-accent);transform:none}
.ladder li.mark.pulse .px{animation:pulse var(--dur-slow) var(--ease-out) 1}
@keyframes pulse{0%{opacity:.2}100%{opacity:1}}
.legend{margin-top:var(--space-sm);color:var(--color-muted);display:flex;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap}
.ladder.is-updating ol{opacity:.35;transition:opacity var(--dur-fast) var(--ease-out)}

/* ===== stats strip ===== */
.strip{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-xl);padding-block:var(--space-sm);border-bottom:var(--rule-hair) solid var(--color-rule);color:var(--color-muted)}
.strip b{color:var(--color-ink);font-weight:500}

/* ===== sections ===== */
.sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-md)}
.sec-watch{padding-block:var(--space-2xl) var(--space-xl)}
.sec-trade{padding-block:var(--space-3xl);border-top:var(--rule-hair) solid var(--color-rule)}
.sec-cta{padding-block:var(--space-xl) var(--space-3xl);border-top:var(--rule-hair) solid var(--color-rule)}
.sec h2{grid-column:1/5;font-size:var(--text-2xl);letter-spacing:-.035em;line-height:1.02;text-transform:lowercase}
.sec .kicker{grid-column:1/5;margin-top:var(--space-sm);max-width:30ch;color:var(--color-muted)}
.sec .body{grid-column:5/13}
.prose{max-width:var(--measure);display:grid;align-content:start;gap:var(--space-sm);font-size:var(--text-md);line-height:1.5}
.prose strong{font-weight:600}

/* Swiss tables — rules, not cards */
.tbl{width:100%;border-collapse:collapse;border-top:var(--rule-hair) solid var(--color-ink)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:var(--space-sm) var(--space-sm) var(--space-sm) 0;border-bottom:var(--rule-hair) solid var(--color-rule)}
.tbl th{font-weight:500;color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs);padding-block:var(--space-xs)}
.tbl td.code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);width:5em;padding-top:1.05rem}
.tbl td.name{font-weight:600}
.tbl td.src{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);width:26%}
.tbl td.yes{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ok);width:6em;white-space:nowrap;text-align:right;padding-right:0}
.tbl td.no{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent);width:6em;white-space:nowrap;text-align:right;padding-right:0}
.tbl th:last-child{text-align:right;padding-right:0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xl)}

/* Ft2 inline footer */
.foot{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-lg);justify-content:space-between;padding-block:var(--space-md) var(--space-xl);border-top:var(--rule-hair) solid var(--color-ink);color:var(--color-muted)}

/* ===== approve page ===== */
.sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-md);padding-block:var(--space-2xl) var(--space-3xl)}
.sheet h1{grid-column:1/8;font-size:var(--text-3xl);letter-spacing:-.04em;line-height:1}
.sheet .intro{grid-column:1/7;margin-top:var(--space-md);font-size:var(--text-md);max-width:var(--measure)}
.sheet .steps{grid-column:1/8;margin-top:var(--space-xl);list-style:none;padding:0;border-top:var(--rule-hair) solid var(--color-ink)}
.step{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:var(--space-sm);padding-block:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule)}
.n{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-muted);padding-top:.15rem}
.n.done{color:var(--color-ok)}.n.bad{color:var(--color-accent)}
.t>b{display:block;font-weight:600}
.t small b{font-weight:600;color:var(--color-ink)}
.t small{display:block;color:var(--color-muted);font-size:var(--text-sm);margin-top:var(--space-3xs);line-height:1.5}
.sheet .actions{grid-column:1/8;margin-top:var(--space-lg);display:grid;gap:var(--space-xs)}
.sheet .msg{grid-column:1/8;margin-top:var(--space-sm);min-height:0;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);white-space:pre-wrap;min-height:1.5em;border-left:2px solid var(--color-rule);padding-left:var(--space-xs)}
.sheet .msg.ok{border-color:var(--color-ok);color:var(--color-ink)}
.sheet .msg.bad{border-color:var(--color-accent);color:var(--color-ink)}
.sheet aside{grid-column:8/13;grid-row:3/span 4;align-self:start;padding-top:.6rem}
.sheet>*{align-self:start}
.sheet .fine{grid-column:1/8;margin-top:var(--space-lg);color:var(--color-muted);font-size:var(--text-sm);max-width:var(--measure)}
code{font-family:var(--font-mono);font-size:.9em;background:var(--color-paper-2);padding:.05em .35em;border-radius:var(--radius)}

/* ===== responsive ===== */
@media (max-width:900px){
  .fold{min-height:0;padding-block:var(--space-lg) var(--space-xl)}
  .display,.lede,.sublede,.fold-cta,.ladder-wrap{grid-column:1/-1}
  .caption{margin-bottom:var(--space-lg)}
  .ladder-wrap{grid-row:auto;margin-top:var(--space-2xl)}
  .sec h2,.sec .kicker,.sec .body{grid-column:1/-1}
  .sec .body{margin-top:var(--space-lg)}
  .two{grid-template-columns:1fr;gap:var(--space-xl)}
  .sheet h1,.sheet .intro,.sheet .steps,.sheet .actions,.sheet .msg,.sheet aside,.sheet .fine{grid-column:1/-1}
  .sheet aside{grid-row:auto;margin-top:var(--space-xl);padding-top:0}
  .tbl td.name{width:auto}.tbl td.src{width:auto}
}
@media (max-width:520px){
  .tbl td.src{display:none}.tbl th.src{display:none}
  .ladder li{grid-template-columns:4.8em minmax(0,1fr) 4.2em}
  .nav a.u{font-size:var(--text-sm)}
}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none}
  .ladder .bar{transition:none}
  .ladder li.mark.pulse .px{animation:none}
  .u::after{transition:none}
}