/* Halo Pad — shared tokens. One deliberate look: pure black, bright gold halo, high contrast. */
:root{
  --bg:#000000; --surface:#0C0C10; --surface-2:#15151B; --line:#2A2A33; --line-2:#3A3A46;
  --ink:#FFFFFF; --muted:#C9C9D6; --dim:#9696A8;
  --gold:#FFC23D; --gold-2:#FFE49A; --gold-ink:#140F00; --gold-glow:rgba(255,194,61,.45);
  --burn:#FF6B3D; --ops:#A78BFA; --ok:#34E39A; --err:#FF6464;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:16px; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;padding-inline:20px;overflow-x:clip;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin-inline:auto;position:relative}
h1,h2,h3{font-family:var(--f-display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--gold);color:var(--gold-ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;margin-inline:-20px;padding:14px 20px;background:rgba(0,0,0,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1120px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:18px;text-decoration:none}
.brand-mark{width:26px;height:26px;border-radius:50%;border:3px solid var(--gold);box-shadow:0 0 18px var(--gold-glow),inset 0 0 8px var(--gold-glow)}
.links{display:flex;gap:22px;flex-wrap:wrap;font-weight:700;font-size:14px}
.links a{text-decoration:none;color:var(--muted);transition:color .2s}
.links a:hover{color:var(--ink)}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font:800 15px var(--f-body);border:1.5px solid var(--ink);background:var(--ink);color:#000;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);box-shadow:0 0 0 0 var(--gold-glow)}
.btn.gold:hover{box-shadow:0 8px 30px -6px var(--gold-glow)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.btn:hover::after{transform:translateX(120%)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn:disabled::after{display:none}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.msg{border-radius:12px;padding:12px 14px;font-size:14px;font-weight:700}
.msg.err{background:rgba(255,100,100,.12);color:var(--err);border:1px solid rgba(255,100,100,.35)}
.msg.ok{background:rgba(52,227,154,.10);color:var(--ok);border:1px solid rgba(52,227,154,.3)}
.msg a{word-break:break-all}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(52,227,154,.12);color:var(--ok);width:max-content}

/* reveal: content is visible at rest; JS only adds a short entrance */
.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.pre{opacity:0;transform:translateY(24px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}