@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  color-scheme:dark;
  --bg:#05060a;--fg:#ededf0;--muted:#9096a3;--faint:#5d6370;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.035);--glass-hi:rgba(255,255,255,.07);
  --violet:#a594ff;--bad:#ff8a8a;--warn:#ffc97a;--ok:#6ee7c8;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--fg);font:15px/1.55 var(--sans);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
::selection{background:rgba(165,148,255,.35)}
a{color:var(--fg);text-decoration-color:var(--line-strong);text-underline-offset:3px}
a:hover{text-decoration-color:var(--fg)}
p{margin:8px 0}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.small{font-size:13px}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em}
.error{color:var(--bad);font-size:14px}.warn{color:var(--warn)}
.error:empty{display:none}
.icon{width:16px;height:16px;flex-shrink:0}

/* Backdrop: slate glow from above, a diagonal light beam, colour orbs, grain. */
/* Phones: the status bar is see-through, so the page frosts under it, like a native app's bar, rather than
   running sharp under the clock and the island. It covers just the inset, so it never touches the top bar. */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);z-index:30;pointer-events:none;
  background:rgba(5,6,10,.55);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 70% at 50% -15%,#243058 0%,#0e1424 45%,var(--bg) 80%)}
.bg::before{content:"";position:absolute;inset:-20%;background:linear-gradient(112deg,transparent 42%,rgba(200,215,255,.085) 49%,rgba(200,215,255,.03) 53%,transparent 60%);filter:blur(24px)}
.bg::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.orb{position:absolute;border-radius:50%;filter:blur(100px)}
.orb.a{width:760px;height:760px;left:-260px;top:-380px;background:#5b45e0;opacity:.22}
.orb.b{width:560px;height:560px;right:-240px;top:160px;background:#0e9fb8;opacity:.11}
.orb.c{width:520px;height:520px;left:35%;bottom:-320px;background:#e0532b;opacity:.08}

/* Type */
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.02;margin:0;padding-bottom:.14em;
  background:linear-gradient(180deg,#fff 35%,rgba(255,255,255,.6));-webkit-background-clip:text;background-clip:text;color:transparent}
h1.display{font-size:clamp(44px,8vw,80px)}
h2.display{font-size:clamp(30px,5vw,40px)}
.label{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:500 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.label .count{font-size:11px;padding:3px 7px;border-radius:999px;background:rgba(165,148,255,.14);color:var(--violet);letter-spacing:0}

/* Surfaces */
.glass{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid var(--line);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -24px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%)}
.pad{padding:18px 20px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:13px;color:var(--fg);
  background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(90deg,rgba(124,92,255,.8),rgba(255,106,61,.6),rgba(34,211,238,.8)) border-box;border:1px solid transparent}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}

/* Controls */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 14px/1 var(--sans);border:0;border-radius:999px;padding:12px 18px;cursor:pointer;text-decoration:none;
  background:#f4f4f6;color:#0a0b10;box-shadow:inset 0 -1px 0 rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.12),0 10px 30px -10px rgba(255,255,255,.28);transition:background .15s,transform .15s,opacity .15s}
button:hover,.btn:hover{background:#fff}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:default;transform:none}
button.quiet,.btn.quiet{background:rgba(255,255,255,.04);color:var(--fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px var(--line-strong)}
button.quiet:hover,.btn.quiet:hover{background:rgba(255,255,255,.08)}
button.sm,.btn.sm{padding:8px 13px;font-size:13px}
button.wide{width:100%}
button.round{width:38px;height:38px;padding:0}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
input,textarea{font:inherit;width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(255,255,255,.03);color:var(--fg);transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--faint)}
/* iOS zooms into any field under 16px when it's focused. */
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}
input:focus,textarea:focus{outline:none;border-color:rgba(165,148,255,.6);box-shadow:0 0 0 4px rgba(124,92,255,.14)}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* Layout */
.shell{max-width:1760px;margin:0 auto;padding:20px 20px 140px;padding-top:max(20px,env(safe-area-inset-top));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
/* Every page shares one frame, so the logo and top bar sit in the same place everywhere (the home page uses the full width); other pages centre their content inside it. */
.shell:not(.app)>:not(.topbar){width:100%;max-width:1080px;margin-left:auto;margin-right:auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;margin-bottom:28px}
.topbar .right{display:flex;align-items:center;gap:10px;min-width:0}
.topbar .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.logo{height:32px;width:auto;display:block}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .tag{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:4px 8px;border:1px solid var(--line);border-radius:999px}
.center{min-height:100vh;display:grid;place-items:center;padding:24px 20px}
.auth{width:100%;max-width:400px;text-align:center;padding:36px 28px 28px}
.auth .mark{width:56px;height:auto;margin:0 auto 22px;display:block}
.auth .display{font-size:40px;margin-bottom:6px}
.auth .actions{margin:26px 0 8px}
.auth .addr{display:flex;flex-direction:column;gap:6px;margin:12px 0 16px}
.auth .addr span{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);color:var(--fg)}
.auth .claim{display:grid;gap:10px;margin:24px 0 8px}
.auth .foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}