:root{--bg:#0B0E12;--bg2:#14181F;--bg3:#1B212B;--ink:#EDEAE0;--mute:#8B9099;--line:#2A313D;--straw:#E8B23A;--straw2:rgba(232,178,58,.16);--straw3:rgba(232,178,58,.5);--wet:#4FA3D1;--dry:#7FBF6A;--r:0px;
  --disp:"Press Start 2P",ui-monospace,monospace;--mono:"Space Mono",ui-monospace,monospace}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 var(--mono);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}code{font-family:var(--mono)}[hidden]{display:none!important}
::selection{background:var(--straw);color:#1a1204}

/* ---- chrome: identity strip, top (the CA rail owns the bottom) ---- */
.ident{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:rgba(11,14,18,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.mk{display:flex;align-items:center;gap:8px;font:12px/1 var(--disp);letter-spacing:.02em;color:var(--straw)}.mk img{width:24px;height:24px;image-rendering:pixelated;border:2px solid var(--line)}
.nv{display:flex;gap:14px;font-size:12px;color:var(--mute)}.nv a:hover{color:var(--ink)}
.rt{display:flex;align-items:center;gap:10px}#soc a{color:var(--mute);font-size:12px;margin-right:8px}
#connectBtn{border:2px solid var(--line);padding:7px 12px;font-size:11px;background:var(--bg2);letter-spacing:.02em}
#connectBtn.on{border-color:var(--straw);color:var(--straw)}

main{max-width:1160px;margin:0 auto;padding:20px 14px 128px}
.layout{display:grid;grid-template-columns:1fr;gap:22px}

/* ---- hero: the lay form (measured as this page's "hero", first big thing under the chrome) ---- */
.hero{background:var(--bg2);border:2px solid var(--line);padding:18px}
.hero .eyebrow{font:11px var(--disp);letter-spacing:.06em;color:var(--straw);margin:0 0 10px}
.hero .lede{margin:0 0 16px;color:var(--mute);max-width:56ch;font-size:13px}
.layRow{display:flex;gap:10px;flex-wrap:wrap}
#layAmt{flex:1;min-width:160px;padding:13px 12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:700 16px var(--mono)}
.btn{display:inline-block;padding:13px 18px;border:2px solid var(--line);background:var(--bg3);text-align:center;font:11px var(--disp);letter-spacing:.04em;white-space:nowrap}
.btn.pri{background:var(--straw);color:#1a1204;border-color:var(--straw)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.hero .fine{margin-top:10px;font-size:12px;color:var(--mute)}.hero .fine b{color:var(--straw)}

/* ---- the roof: card-stack of courses (the object) ---- */
.roofWrap{background:var(--bg2);border:2px solid var(--line);padding:16px}
.roofWrap .h2{font:13px var(--disp);letter-spacing:.04em;margin:0 0 4px;color:var(--ink)}
.clock{display:inline-block;margin-bottom:12px;font:11px var(--mono);color:var(--mute);border:1px solid var(--line);padding:3px 8px}
.clock.live{color:var(--dry);border-color:var(--dry)}
.stack{display:flex;flex-direction:column-reverse;gap:4px}
.course{display:grid;grid-template-columns:28px 1fr auto auto;gap:8px;align-items:center;padding:9px 10px;background:var(--bg3);border-left:6px solid var(--line);font-size:12px}
.course.dry{border-left-color:var(--dry)}.course.soaked{border-left-color:var(--wet);opacity:.55}
.course .ix{font:10px var(--disp);color:var(--mute)}.course .who{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course .amt{font-weight:700}.course .tag{font:9px var(--disp);letter-spacing:.04em;padding:2px 6px}
.course.dry .tag{background:rgba(127,191,106,.16);color:var(--dry)}.course.soaked .tag{background:rgba(79,163,209,.16);color:var(--wet)}
.course.top{border-left-color:var(--straw);box-shadow:inset 0 0 0 1px var(--straw3)}
.empty{padding:20px 10px;color:var(--mute);font-size:13px;text-align:center}

/* ---- secondary column: recent activity (desktop gains it beside the roof; mobile it just flows below) ---- */
.activity{background:var(--bg2);border:2px solid var(--line);padding:14px}
.activity .h3{font:11px var(--disp);letter-spacing:.04em;margin:0 0 10px;color:var(--ink)}
.arow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:12px}.arow:first-child{border-top:0}
.arow .pill{font:9px var(--disp);padding:2px 6px;background:var(--straw2);color:var(--straw)}
.arow .who{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arow .t{color:var(--mute);font-size:11px}
.primer{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:12px;color:var(--mute)}
.primer b{color:var(--ink)}

/* ---- steps / prose ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.step{padding:12px;border:1px solid var(--line);background:var(--bg2);font-size:12px;color:var(--mute)}
.step b{display:block;color:var(--straw);font:11px var(--disp);margin-bottom:6px;letter-spacing:.03em}
h1.pg{font:16px var(--disp);letter-spacing:.03em;margin:6px 0 14px}
.lede{color:var(--mute);max-width:60ch;font-size:13px}
.prose{color:var(--mute);max-width:64ch;font-size:13px}.prose h3{color:var(--ink);font:12px var(--disp);letter-spacing:.03em;margin:20px 0 8px}.prose p{margin:0 0 10px}
.tape{border:2px solid var(--line);background:var(--bg2)}
.row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);font-size:12px}.row:first-child{border-top:0}
.row .pill{font:9px var(--disp);padding:2px 6px;background:var(--straw2);color:var(--straw)}
.row .who{color:var(--mute)}.row .amt{font-weight:700}.row .t{color:var(--mute);font-size:11px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12px;color:var(--mute)}.kv code{color:var(--ink)}

/* ---- panel (lay/fold sheet) ---- */
#panel{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.pnl{width:100%;max-width:520px;background:var(--bg2);border:2px solid var(--line);border-bottom:0;padding:16px 16px 22px}
.pnlHead{display:flex;justify-content:space-between;align-items:center;font:13px var(--disp);letter-spacing:.03em;margin-bottom:12px}#panelClose{font-size:20px;color:var(--mute)}
.wl button{display:flex;align-items:center;gap:10px;width:100%;padding:11px;border:2px solid var(--line);margin-bottom:8px}.wl img{width:20px;height:20px}
.ping{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#0a0a0c;padding:10px 14px;font-size:12px;z-index:30;border:2px solid var(--bg)}

/* ---- the CA rail: fixed to the bottom, above the thumb ---- */
.rail{position:fixed;left:0;right:0;bottom:0;z-index:7;background:rgba(11,14,18,.96);border-top:2px solid var(--straw3);backdrop-filter:blur(8px)}
.rInner{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 14px}
.rLab{font:9px var(--disp);color:var(--mute);letter-spacing:.05em}
#caText{flex:1 1 200px;min-width:0;font:12px var(--mono);color:var(--ink);word-break:break-all}
.rail button,.rail a{border:2px solid var(--line);padding:7px 12px;font:10px var(--disp)}
.rail #copyCa{background:var(--straw);color:#1a1204;border-color:var(--straw)}
.rail #buy{color:var(--straw);border-color:var(--straw3)}

@media (min-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr) minmax(300px,360px);align-items:start}
  .primary{display:flex;flex-direction:column;gap:22px}
  .steps{margin-top:0}
}
@media (max-width:640px){.nv{display:none}.steps{grid-template-columns:1fr}.course{grid-template-columns:22px 1fr auto}.course .tag{display:none}}