:root {
  --bg:#071013; --sand:#102127; --ink:#f3f8f8; --ink2:#a4c5cf; --ink3:#768a93; --ink4:#6a7f86;
  --line:#20363d; --line2:#2f4f58; --green:#86efac; --sky:#69aac1;
  --display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sans:"Geist", ui-sans-serif, system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, monospace;
}
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); min-height:100%; }
body { min-height:100vh; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--green); color:var(--bg); }
.display, h1, h2, .word { font-family:var(--display); letter-spacing:-.04em; font-weight:600; }
.eyebrow { margin:0; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); }

.bar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; max-width:none; padding:12px max(16px, calc((100% - 1120px) / 2)); border-bottom:1px solid var(--line); background:rgba(7,16,19,.9); backdrop-filter:blur(10px); flex-wrap:wrap; }
main, footer { width:min(1120px,100%); margin:0 auto; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); }
.mark { width:32px; height:32px; display:grid; grid-template-columns:1fr 1fr; gap:3px; place-items:center; padding:6px; border:1px solid var(--line2); border-radius:9px; background:#192f37; }
.mark i { width:8px; height:8px; border-radius:50%; background:var(--green); display:block; }
.mark i:nth-child(3), .mark i:nth-child(4) { background:var(--sky); }
.word { font-size:22px; }
nav { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:4px 6px; max-width:100%; color:var(--ink2); font-size:13.5px; }
.pill { border-radius:999px; padding:6px 12px; }
.pill.on { background:var(--green); color:#071013; font-weight:600; }
.live { margin:0 6px; font:12px var(--mono); color:var(--ink3); white-space:nowrap; }
.live::before { content:''; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--green); }
button.connect, a.btn.ghost, button.ghost { background:var(--sand); color:var(--ink); border:1px solid var(--line); border-radius:999px; font:500 13px var(--mono); height:auto; padding:7px 12px; }
button, a.btn { border:0; background:var(--green); color:#071013; font:600 14px var(--sans); border-radius:999px; padding:10px 18px; cursor:pointer; }
button:hover, a.btn:hover { background:#1fd978; }
button:disabled { opacity:.55; cursor:wait; }
a.btn.ghost:hover, button.ghost:hover, button.connect:hover { background:#18262a; }

.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:64px 16px 36px; }
h1 { margin:12px 0 0; font-size:clamp(46px,6.4vw,76px); line-height:.92; max-width:12ch; }
.lead { max-width:38em; margin:22px 0 0; color:var(--ink2); font-size:16.5px; line-height:1.7; }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.official { margin-top:28px; max-width:38em; }
.official-name { margin:0; font:600 18px var(--display); letter-spacing:-0.03em; }
.official-ca { display:block; width:100%; margin-top:8px; text-align:left; background:var(--sand); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:12px 14px; font:13px var(--mono); word-break:break-all; }
.official-ca:hover { background:#18262a; }
.official .meta { margin:8px 0 0; }
.official .meta a { color:var(--green); }
.float { min-height:460px; border-radius:36px; border:1px solid var(--line); overflow:hidden; background:
  radial-gradient(70% 50% at 50% 18%, rgba(105,170,193,.38), transparent 62%),
  linear-gradient(180deg, #16303a 0%, #0c1c22 55%, #071013 100%);
  box-shadow:0 24px 60px -30px #000000aa; display:grid; place-items:center; }
#stage { width:100%; height:auto; display:block; background:transparent; border:0; }

.tape { width:100%; max-width:none; margin:8px 0 0; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#08161a; }
.tape-track { display:flex; gap:28px; width:max-content; padding:12px 0; animation:tape 36s linear infinite; font:600 13px var(--mono); letter-spacing:.08em; color:var(--ink2); }
.tape-track span::before { content:''; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:2px; background:var(--green); vertical-align:middle; }
@keyframes tape { from { transform:translateX(0); } to { transform:translateX(-50%); } }

.panel { padding:56px 16px 8px; }
.panel h2 { margin:10px 0 0; font-size:clamp(32px,4vw,44px); line-height:1.02; max-width:16ch; }
form { display:flex; gap:10px; margin-top:22px; }
input, .field input { flex:1; min-width:0; background:var(--sand); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:14px 16px; font:16px var(--sans); outline:none; }
input:focus { border-color:var(--green); }
#q, #coinSymbol { text-transform:uppercase; font-family:var(--mono); }
form button { border-radius:999px; padding:0 18px; }
#roster { display:flex; gap:10px; overflow:auto; margin-top:18px; padding-bottom:4px; }
#roster article { min-width:150px; border:1px solid var(--line); border-radius:16px; padding:14px; background:var(--sand); }
#roster b { display:block; font:600 15px var(--display); }
#roster span { font:12px var(--mono); color:var(--ink3); }
.tag { margin:16px 0 0; font:15px var(--display); }
.traits { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.traits li { border:1px solid var(--line); border-radius:999px; padding:6px 10px; font:12px var(--mono); color:var(--ink3); background:var(--sand); }
.traits b { color:var(--ink); font-weight:500; }
.picks { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.picks button { background:var(--sand); color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:8px 12px; font:13px var(--mono); }
.picks button.on { background:var(--green); color:#071013; border-color:var(--green); }
.hint, .status, .note, .meta { color:var(--ink3); font-size:13.5px; line-height:1.55; }
.hint { margin:12px 0 0; }
.send { display:block; margin-top:22px; font:13px var(--mono); color:var(--ink3); }
.send b { color:var(--ink); }
.send input[type="range"] { width:100%; margin-top:8px; accent-color:var(--green); padding:0; border:0; background:transparent; border-radius:0; }
.split { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.split div { border:1px solid var(--line); border-radius:16px; padding:14px; background:var(--sand); }
.split b { display:block; font:600 22px var(--display); color:var(--ink); }
.split span { font:12px var(--mono); color:var(--ink3); }
.card { border:1px solid var(--line); border-radius:20px; padding:18px; margin-top:16px; background:var(--sand); }
.card.read { background:linear-gradient(180deg, rgba(134,239,172,.1), var(--sand) 90px); }
.card h2 { margin:0; font-size:28px; }
.about { margin:12px 0 0; color:var(--ink); line-height:1.5; }
.pages { list-style:none; margin:12px 0 0; padding:0; }
.pages li { display:grid; grid-template-columns:72px 92px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:14px; }
.pages a { color:var(--ink); }
.pages a:hover { color:var(--green); }
.form { font:12px var(--mono); color:var(--green); }
.date, .mint { font:12px var(--mono); color:var(--ink3); }
.mint { word-break:break-all; }
button.launch { width:100%; margin-top:16px; padding:14px 18px; }
#discard { margin-top:10px; }
.field { margin-top:14px; }
.field label { display:flex; justify-content:space-between; gap:12px; font:12px var(--mono); color:var(--ink3); margin-bottom:6px; }
.field input { width:100%; flex:none; }
.note { margin:14px 0 0; }
.note b { color:var(--ink); font-weight:500; }
#nameBytes.bad, #symBytes.bad { color:#fb7185; }
[data-view] { display:none; }
[data-view].on { display:block; }
#coinList, #profileBody { display:grid; gap:12px; margin-top:22px; }
#coinList > :only-child { grid-column:1 / -1; }
@media (min-width:800px) { #coinList { grid-template-columns:1fr 1fr; } }
.coin-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.badge { font:600 12px var(--mono); color:#071013; background:var(--green); border-radius:999px; padding:4px 8px; }
a.card { display:block; }
.agents-cv { position:fixed; inset:0; width:100%; height:100%; z-index:60; pointer-events:none; }
footer { display:grid; grid-template-columns:1.4fr 1fr; gap:24px; padding:48px 16px 64px; border-top:1px solid var(--line); margin-top:48px; color:var(--ink2); font-size:13.5px; line-height:1.6; }
footer .word { margin-bottom:8px; }
footer p { margin:0; max-width:36em; }
@media (max-width:800px) {
  .hero, footer { grid-template-columns:1fr; }
  .hero { padding-top:36px; }
  h1 { font-size:46px; }
  .float { min-height:0; }
  form { flex-direction:column; }
  form button { height:46px; }
  .split, .pages li { grid-template-columns:1fr; }
  .date { grid-column:1; }
}