:root { --bg:#f6f5fb; --fg:#17151f; --muted:#6b6878; --card:#fff; --line:#e3e1ec; --brand:#5B3DF5; --ok:#0a7a45; --err:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg:#111018; --fg:#eeedf3; --muted:#9a97a8; --card:#1b1a24; --line:#2c2a38; --ok:#5fd49a; --err:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { margin: 32px auto; padding: 0 16px; }
.wide { max-width: 760px; } .narrow { max-width: 480px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; margin: 16px auto; }
main.card { margin: 48px auto; }
@media (max-width: 520px) { main.card { margin: 24px 16px; padding: 20px; } }
h1 { font-size: clamp(26px, 5vw, 36px); line-height:1.15; margin: 8px 0 12px; letter-spacing:-0.02em; }
h2 { font-size: 20px; margin: 0 0 12px; }
.hero { padding: 24px 0 8px; } .lead { font-size: 18px; }
.eyebrow { color: var(--brand); font-weight: 600; font-size: 14px; margin:0; text-transform: uppercase; letter-spacing: .04em; }
@media (prefers-color-scheme: dark) { .eyebrow { filter: brightness(1.5); } }
.when { font-weight: 600; font-size: 18px; }
.desc { white-space: pre-line; }
.muted { color: var(--muted); } .small { font-size: 14px; font-weight: 400; }
.stack { display: grid; gap: 14px; }
label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
label.row { display:flex; align-items:center; gap:8px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; } .row > label { flex: 1 1 140px; }
input, textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); width: 100%; }
input[type=color] { padding: 2px; height: 44px; } input[type=checkbox] { width: auto; }
button, .wallet { font: inherit; font-weight: 600; border: 0; border-radius: 12px; padding: 14px 18px; background: var(--brand); color: #fff; cursor: pointer; text-decoration: none; text-align:center; }
button:disabled { opacity: .5; }
.wallets { display: grid; gap: 10px; margin: 20px 0; }
.wallet { display:flex; align-items:center; justify-content:center; gap:10px; background:#000; }
.wallet span { width:22px; height:16px; border-radius:4px; background: linear-gradient(#f5a623 0 25%, #4cd964 25% 50%, #5ac8fa 50% 75%, #ff3b30 75%); }
.wallet.google span { background: linear-gradient(#4285f4 0 25%, #34a853 25% 50%, #fbbc04 50% 75%, #ea4335 75%); }
@media (prefers-color-scheme: dark) { .wallet { outline: 1px solid #555; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.stats div { background: var(--card); border:1px solid var(--line); border-radius: 14px; padding: 14px; }
.stats b { display:block; font-size: 28px; } .stats span { color: var(--muted); font-size: 14px; }
.how { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin: 24px 0; }
.how b { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; }
table { width: 100%; border-collapse: collapse; font-size: 14px; display:block; overflow-x:auto; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
pre { background: var(--bg); padding: 12px; border-radius: 10px; overflow-x: auto; font-size: 13px; }
.ok { color: var(--ok); font-weight: 600; } .err { color: var(--err); font-weight: 600; }
a { color: inherit; }
footer { text-align:center; color: var(--muted); font-size: 14px; padding: 24px 16px 40px; }