:root{
--paper:#f4f4f2;--surface:#ffffff;--surface2:#e8e8e5;--well:#f0f0ee;
--ink:#000000;--ink2:#3a3a3c;--grey:#8e8e93;--edge:rgba(0,0,0,.08);
--red:#d71921;--radius:14px;--shadow:0 12px 40px rgba(0,0,0,.10);
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Geist",system-ui,sans-serif;
}
[data-theme="dark"]{
--paper:#000000;--surface:#1c1c1e;--surface2:#2c2c2e;--well:#111113;
--ink:#ffffff;--ink2:#d1d1d6;--grey:#8e8e93;--edge:rgba(255,255,255,.11);
--shadow:0 16px 50px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--paper);color:var(--ink);font-family:var(--sans);
min-height:100vh;display:flex;flex-direction:column;align-items:center;
-webkit-font-smoothing:antialiased;
}
.glyph{
position:fixed;inset:0;pointer-events:none;opacity:.05;
background-image:radial-gradient(currentColor 1px,transparent 1.4px);
background-size:22px 22px;
mask-image:linear-gradient(to bottom,black,transparent 70%);
}
.top{
width:min(1080px,92vw);display:flex;justify-content:space-between;align-items:center;
padding:22px 0;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px color-mix(in srgb,var(--red) 14%,transparent)}
.brand .word{font-size:15px}
.brand .tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;border:1px solid var(--edge);border-radius:999px;padding:4px 9px;color:var(--grey)}
.nav{display:flex;gap:8px;align-items:center}
.link{background:none;border:0;color:var(--ink2);font-size:14px;padding:9px 12px;border-radius:10px;cursor:pointer}
.link:hover{background:var(--surface)}
.pill{background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer}
.iconbtn{background:var(--surface);border:1px solid var(--edge);border-radius:999px;width:36px;height:36px;cursor:pointer;color:var(--ink)}
#view{width:min(1080px,92vw);flex:1;padding-bottom:60px}
.hero{
background:var(--surface);border:1px solid var(--edge);border-radius:calc(var(--radius) + 10px);
padding:56px 48px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.hero:after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(600px 220px at 80% 0%,color-mix(in srgb,var(--red) 10%,transparent),transparent);
}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--grey)}
h1{font-size:clamp(38px,6vw,64px);line-height:1.02;margin:14px 0;letter-spacing:-.03em;font-weight:700}
.sub{color:var(--ink2);font-size:17px;max-width:56ch;line-height:1.6}
.row{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.btn{background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:13px 24px;font-size:15px;font-weight:600;cursor:pointer}
.btn.ghost{background:var(--surface2);color:var(--ink)}
.btn.danger{background:var(--red);color:#fff}
.btn:disabled{opacity:.5}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.card{background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius);padding:22px;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.card h3{margin:0 0 8px;font-size:16px;letter-spacing:-.01em}
.card p{margin:0;color:var(--ink2);font-size:14px;line-height:1.6}
.mono{font-family:var(--mono)}
.panel{background:var(--surface);border:1px solid var(--edge);border-radius:calc(var(--radius) + 6px);padding:28px;box-shadow:var(--shadow)}
.panel h2{margin:0;font-size:22px;letter-spacing:-.02em}
.muted{color:var(--grey);font-size:13px}
.field{margin-top:16px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--grey);margin-bottom:8px}
.field input,.field select{
width:100%;background:var(--well);border:1px solid var(--edge);border-radius:var(--radius);
padding:13px 14px;font-size:15px;color:var(--ink);outline:none;
}
.field input:focus{border-color:var(--ink)}
.switchrow{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--edge)}
.switchrow:last-child{border-bottom:0}
.switchrow b{font-size:15px}
.switchrow span{display:block;color:var(--grey);font-size:13px;margin-top:2px}
.switch{width:52px;height:30px;border-radius:999px;background:var(--surface2);border:1px solid var(--edge);position:relative;cursor:pointer;flex:none}
.switch:after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--grey);transition:all .2s}
.switch[aria-checked="true"]{background:var(--ink)}
.switch[aria-checked="true"]:after{left:24px;background:var(--paper)}
.codebox{
font-family:var(--mono);font-size:34px;letter-spacing:.3em;text-align:center;
background:var(--well);border:1px dashed var(--grey);border-radius:var(--radius);padding:18px;margin:14px 0;
}
.list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.item{display:flex;justify-content:space-between;align-items:center;background:var(--well);border:1px solid var(--edge);border-radius:var(--radius);padding:12px 14px}
.item small{color:var(--grey);font-family:var(--mono);font-size:11px}
.hash{font-family:var(--mono);font-size:11px;color:var(--grey);word-break:break-all}
.track{display:flex;gap:12px;align-items:center;margin-top:10px}
.disc{width:44px;height:44px;border-radius:50%;background:conic-gradient(from 0deg,#111,#444,#111);flex:none;position:relative}
.disc:after{content:"";position:absolute;inset:16px;background:var(--surface);border-radius:50%}
.foot{width:min(1080px,92vw);display:flex;justify-content:space-between;padding:20px 0 30px;color:var(--grey);font-size:13px}
#health{color:#30d158}
.tabs{display:flex;gap:8px;margin:18px 0}
.tab{border:1px solid var(--edge);background:var(--surface);color:var(--ink2);border-radius:999px;padding:9px 16px;cursor:pointer;font-size:14px}
.tab.active{background:var(--ink);color:var(--paper)}
.err{background:color-mix(in srgb,var(--red) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--red) 40%,transparent);color:var(--red);border-radius:var(--radius);padding:12px 14px;font-size:14px;margin-top:12px}
.ok{background:color-mix(in srgb,#30d158 12%,var(--surface));border:1px solid color-mix(in srgb,#30d158 40%,transparent);border-radius:var(--radius);padding:12px 14px;font-size:14px;margin-top:12px}
@media(max-width:760px){.grid{grid-template-columns:1fr}.hero{padding:32px 22px}}