:root{
  --bg:#060709; --ink:#EEF3F1; --dim:#8C9A96; --line:#1A1F22; --card:#0C0F12; --acc:#2FE6A7; --bust:#FF5D6C;
  --mono:'IBM Plex Mono',ui-monospace,monospace; --disp:'Archivo Black',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
body{padding-bottom:64px}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:-.01em;margin:0}
code{font-family:var(--mono)}

/* ---- chrome ---- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(6,7,9,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--disp);font-size:15px;letter-spacing:.02em}
.mark img{width:26px;height:26px;border-radius:50%}
.nav{display:flex;gap:14px;margin-left:auto;font-size:12.5px;color:var(--dim)}
.nav a{text-decoration:none}
.nav a:hover{color:var(--acc)}
.right{display:flex;align-items:center;gap:10px}
#social a{font-size:12px;color:var(--dim);text-decoration:none;margin-left:8px}
#walletBtn{font:600 12px/1 var(--body);color:var(--bg);background:var(--acc);border:0;border-radius:999px;padding:9px 14px;cursor:pointer}
#walletBtn.on{background:transparent;color:var(--acc);border:1px solid #1F4C40}
main{max-width:720px;margin:0 auto;padding:18px 14px 40px}
.foot{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:8px;padding:9px 14px;background:rgba(6,7,9,.94);border-top:1px solid var(--line);font-size:11.5px;color:var(--dim)}
.foot code{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot .k{letter-spacing:.14em}
.foot button,.foot a{font:600 11px/1 var(--body);border:1px solid #23302C;background:transparent;color:var(--acc);border-radius:999px;padding:6px 10px;text-decoration:none;cursor:pointer;white-space:nowrap}
.foot #buy{background:var(--acc);color:var(--bg);border-color:var(--acc);margin-left:auto}

/* ---- the question ---- */
.ask{margin:0 0 12px}
.ask h1{font-size:clamp(23px,6.8vw,36px);line-height:1.06}
.ask h1 em{font-style:normal;color:var(--acc)}
.ask p{margin:8px 0 0;color:var(--dim);font-size:13.5px;line-height:1.45}

/* ---- the instrument ---- */
.rig{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 16px 16px;box-shadow:0 30px 60px -40px #000,inset 0 1px 0 #ffffff0a}
.dial{position:relative;display:block;width:min(232px,58vw);margin:0 auto}
.dial svg{display:block;width:100%;height:auto;overflow:visible}
.dial .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.dial .num b{font-family:var(--disp);font-size:clamp(42px,12vw,56px);line-height:.9;letter-spacing:-.03em}
.dial .num small{font-size:10.5px;letter-spacing:.2em;color:var(--dim);margin-top:8px}
.slide{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;margin:4px 0 0;display:block}
.slide::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--acc) var(--p),#1A2226 var(--p))}
.slide::-moz-range-track{height:6px;border-radius:99px;background:#1A2226}
.slide::-moz-range-progress{height:6px;border-radius:99px;background:var(--acc)}
.slide::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:linear-gradient(180deg,#fff,#B9C6C2);border:2px solid var(--acc);box-shadow:0 0 18px #2FE6A755;cursor:grab}
.slide::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--acc);cursor:grab}
.ticks{display:flex;justify-content:space-between;font:600 10px/1 var(--mono);color:#4B5956;margin:-2px 2px 0}
.split{display:flex;height:32px;border-radius:9px;overflow:hidden;margin:12px 0 0;border:1px solid var(--line);font:600 11px/32px var(--mono)}
.split i{font-style:normal;display:block;text-align:center;white-space:nowrap;overflow:hidden}
.split .me{background:linear-gradient(180deg,#2FE6A7,#17B37F);color:#04120D}
.split .them{background:#111619;color:var(--dim)}
.verdict{margin:11px 0 0;font-size:13px;line-height:1.45;color:var(--dim)}
.verdict b{color:var(--ink)}
.verdict.bad b{color:var(--bust)}
.btn{font:700 15px/1 var(--body);border:0;border-radius:12px;padding:15px 18px;cursor:pointer;width:100%;display:block}
.btn.pri{background:var(--acc);color:#04120D}
.btn.pri:disabled{background:#16211E;color:#4B5956;cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid #23302C;color:var(--ink)}
.rig .btn{margin-top:12px}
.fineprint{margin:10px 2px 0;font-size:11.5px;color:#5B6A66;text-align:center}

/* ---- round strip ---- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}
.strip>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 10px}
.strip .k{font-size:9.5px;letter-spacing:.16em;color:#5B6A66}
.strip .v{font-family:var(--mono);font-size:17px;font-weight:600;margin-top:5px}
.strip .v.acc{color:var(--acc)}

/* ---- the room ---- */
h2{font-size:12px;letter-spacing:.18em;color:var(--dim);margin:26px 0 10px;font-family:var(--body);font-weight:600}
.hist{display:flex;align-items:flex-end;gap:4px;height:90px;padding:0 2px}
.hist span{flex:1;background:#16211E;border-radius:4px 4px 0 0;position:relative;min-height:3px;transition:height .3s}
.hist span.hot{background:linear-gradient(180deg,var(--acc),#12604A)}
.histx{display:flex;justify-content:space-between;font:600 9.5px/1 var(--mono);color:#4B5956;margin-top:6px}
.tape{display:flex;flex-direction:column;gap:6px}
.row{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 12px;font-size:12.5px}
.row .who{color:var(--dim);font-family:var(--mono);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .amt{margin-left:auto;font-family:var(--mono);font-weight:600;white-space:nowrap}
.row .t{color:#4B5956;font-size:10.5px;font-family:var(--mono);min-width:30px;text-align:right}
.pill{font:600 9.5px/1 var(--mono);letter-spacing:.1em;padding:5px 7px;border-radius:5px;background:#16211E;color:var(--acc);white-space:nowrap}
.pill.bust{background:#2A1319;color:var(--bust)}
.pill.seat{background:#141A1D;color:var(--dim)}
.pair{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;font-weight:600}
.pair s{text-decoration:none;color:var(--dim);font-weight:400}
.empty{background:var(--card);border:1px dashed #1E2528;border-radius:12px;padding:22px 16px;color:var(--dim);font-size:13px;text-align:center}

/* ---- steps + prose ---- */
.steps{display:flex;flex-direction:column;gap:8px;margin:22px 0 0}
.step{background:var(--card);border:1px solid var(--line);border-left:2px solid var(--acc);border-radius:11px;padding:12px 14px;font-size:13px;line-height:1.5;color:var(--dim)}
.step b{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.16em;color:var(--ink);margin-bottom:5px}
.prose{font-size:14px;line-height:1.65;color:var(--dim)}
.prose h3{font-size:14px;color:var(--ink);margin:22px 0 6px;font-family:var(--body);font-weight:700}
.prose code{font-size:11.5px;word-break:break-all;color:var(--acc)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:12.5px;margin:12px 0 0}
.kv span{color:#5B6A66}
.kv code{font-size:12px}

/* ---- sheet + toast ---- */
#modal{position:fixed;inset:0;z-index:60;background:#000000b8;display:flex;align-items:flex-end;justify-content:center}
#modal[hidden]{display:none}
.sheet{width:100%;max-width:460px;background:#0A0D10;border:1px solid var(--line);border-radius:18px 18px 0 0;padding:16px 16px 26px}
.sheetHead{display:flex;align-items:center;justify-content:space-between;font-family:var(--disp);font-size:13px;letter-spacing:.1em;margin-bottom:12px}
.sheetHead button{background:none;border:0;color:var(--dim);font-size:22px;line-height:1;cursor:pointer}
.wl{display:flex;flex-direction:column;gap:8px}
.wl button{display:flex;align-items:center;gap:10px;background:#101418;border:1px solid var(--line);color:var(--ink);border-radius:11px;padding:13px;font:600 13px var(--body);cursor:pointer}
.wl img{width:20px;height:20px;border-radius:5px}
.stake .fine{font-size:13px;line-height:1.55;color:var(--dim);margin-bottom:12px}
.stake .fine b{color:var(--ink)}
.warn{background:#2A1319;border:1px solid #4A2029;color:#FFB3BB;border-radius:10px;padding:11px;font-size:12.5px;margin-bottom:10px}
.toast{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);z-index:80;background:#131A1D;border:1px solid #24312D;color:var(--ink);border-radius:999px;padding:11px 18px;font-size:12.5px;max-width:92vw}
@media(min-width:620px){ main{padding:26px 18px 48px} .ask h1{font-size:40px} .steps{flex-direction:row} .step{flex:1} }