:root{
  --black:#161616; --panel:#1e1e1e; --panel2:#242424;
  --cream:#f2ede4; --dim:#a89f92; --red:#e52026; --brand:#d8b46a; --green:#3fb950; --gold:#d8b46a;
  --line:#33302b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--black);color:var(--cream);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.masthead{border-bottom:3px solid var(--brand);padding:28px 20px 16px;text-align:center}
.masthead-inner{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.lockup{height:64px;width:auto}
.market-word{font-family:"Bebas Neue",sans-serif;font-size:64px;letter-spacing:4px;color:var(--cream)}
.market-word::before{content:"";display:inline-block;width:14px;height:14px;background:var(--brand);margin-right:14px}
.tagline{color:var(--dim);margin:10px 0 0;font-size:15px}
.ticker-wrap{overflow:hidden;border-bottom:1px solid var(--line);background:#101010;white-space:nowrap}
.ticker{display:inline-block;padding:8px 0;font-family:"IBM Plex Mono",monospace;font-size:13px;animation:tick 90s linear infinite}
.ticker span{margin-right:34px}
.ticker .up{color:var(--green)} .ticker .dn{color:var(--red)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
main{max-width:1080px;margin:0 auto;padding:20px}
.statusbar{display:flex;gap:28px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);padding:14px 18px;margin-bottom:20px}
.statusbar .lbl{display:block;font-size:11px;letter-spacing:1px;color:var(--dim);font-family:"IBM Plex Mono",monospace}
.statusbar span:last-child{font-family:"IBM Plex Mono",monospace;font-weight:600}
.movers{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.mover-box{background:var(--panel);border:1px solid var(--line);padding:16px 18px}
.mover-box h2{font-family:"Bebas Neue",sans-serif;font-size:18px;margin:0 0 12px}
.mover-box h2 span{font-family:system-ui,sans-serif;font-size:12px;color:var(--dim)}
.gainers h2{color:var(--green)} .losers h2{color:var(--red)}
.mover-box ol{margin:0;padding-left:22px}
.mover-box li{margin:7px 0;font-family:"IBM Plex Mono",monospace;font-size:14px}
.mover-box li b{font-family:system-ui,sans-serif}
.up{color:var(--green)} .dn{color:var(--red)}
.board-wrap{background:var(--panel);border:1px solid var(--line);padding:18px}
.board-head h2{font-family:"Bebas Neue",sans-serif;margin:0;font-size:22px}
.board-head p{color:var(--dim);font-size:14px;margin:6px 0 14px}
table.board{width:100%;border-collapse:collapse;font-size:15px}
.board th{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:1px;color:var(--dim);text-align:left;padding:10px 8px;border-bottom:2px solid var(--line);cursor:pointer;white-space:nowrap}
.board td{padding:10px 8px;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace}
.board td.title{font-family:system-ui,sans-serif;font-weight:600}
.board td.title small{display:block;color:var(--dim);font-weight:400;font-size:12px}
.board tr:hover td{background:var(--panel2)}
.num{text-align:right}
a.buy{color:var(--gold);text-decoration:none;font-size:13px;white-space:nowrap}
a.buy:hover{text-decoration:underline}
.how{margin-top:28px}
.how h2{font-family:"Bebas Neue",sans-serif;font-size:22px}
.how ol{line-height:1.7}
.how li{margin:8px 0}
.disclaimer{color:var(--dim);font-size:13px;border-left:3px solid var(--brand);padding-left:12px}
footer{text-align:center;color:var(--dim);font-size:13px;padding:28px 20px 40px;border-top:1px solid var(--line)}
.foot-skull{width:56px;height:56px;opacity:.9}
canvas.spark{width:110px;height:28px}
@media(min-width:701px) and (max-width:900px){
  table.board{font-size:13px}
  .board td,.board th{padding:8px 6px}
  canvas.spark{width:90px}
}
@media(max-width:700px){
  main{padding:14px}
  .masthead{padding:20px 14px 12px}
  .lockup{height:44px}
  .market-word{font-size:42px}
  .tagline{font-size:14px}
  .ticker{font-size:12px}
  .statusbar{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 14px}
  .movers{grid-template-columns:1fr}
  .mover-box li{font-size:13px}
  .board-wrap{padding:12px}
  /* The board becomes a stack of cards; the header row becomes sort chips. */
  table.board,.board thead,.board tbody{display:block;width:100%}
  .board thead tr{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
  .board th{border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--panel2)}
  .board th:nth-child(8),.board th:last-child{display:none}
  .board tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px}
  .board td{border-bottom:0;padding:4px 0;font-size:14px}
  .board tr:hover td{background:transparent}
  .board td:nth-child(1){display:none}
  .board td.title{flex:1 1 55%;font-size:17px}
  .board td:nth-child(3){flex:1 1 30%;text-align:right;font-size:22px;font-weight:600;color:var(--brand)}
  .board td:nth-child(4),.board td:nth-child(5),.board td:nth-child(6),.board td:nth-child(7){flex:1 1 40%;display:flex;justify-content:space-between;gap:12px}
  .board td:nth-child(4)::before{content:"24h"}
  .board td:nth-child(5)::before{content:"7d"}
  .board td:nth-child(6)::before{content:"Attention"}
  .board td:nth-child(7)::before{content:"Buzz"}
  .board td:nth-child(4)::before,.board td:nth-child(5)::before,.board td:nth-child(6)::before,.board td:nth-child(7)::before,.board td:nth-child(8)::before{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:1px;color:var(--dim)}
  .board td:nth-child(8){flex:1 1 100%;display:flex;justify-content:space-between;align-items:center}
  .board td:nth-child(8)::before{content:"Trend (30d)"}
  .board td:nth-child(9){flex:1 1 100%;text-align:right}
  .board td:nth-child(9) a.buy{display:inline-block;border:1px solid var(--gold);border-radius:999px;padding:6px 14px}
}