:root { --bg: #0e1116; --fg: #eef0f5; --muted: #9aa0b2; --green: #45b07a; --purple: #a78bfa; --pink: #e879f9; --card: rgba(255,255,255,.05); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(69,176,122,.25), transparent 60%),
              radial-gradient(1000px 600px at 110% 10%, rgba(167,139,250,.25), transparent 60%), var(--bg);
  min-height: 100vh; display: flex; flex-direction: column; }
.wrap { flex: 1; display: grid; place-items: center; padding: 3rem 1rem; }
.hero { text-align: center; max-width: 640px; width: 100%; }
h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); margin: .6rem 0 .2rem; letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--green), var(--purple), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { color: var(--muted); font-size: 1.15rem; margin: 0 0 1.8rem; }
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem; border-radius: 999px; background: var(--card); font-weight: 600; font-size: .9rem; }
.pill .dot { width: .6rem; height: .6rem; border-radius: 50%; background: #e05d5d; }
.pill.on .dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.pill.starting .dot { background: #e3a945; }
.stats { display: flex; justify-content: center; gap: 2.5rem; margin: 1.5rem 0; }
.stats .big { display: block; font-size: 2rem; font-weight: 700; }
.label { color: var(--muted); font-size: .85rem; }
.address { margin: 1.6rem 0; }
.address .label { display: block; margin-bottom: .4rem; }
.copy { font: inherit; color: var(--fg); background: var(--card); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .8rem 1.2rem; cursor: pointer; font-size: 1.2rem; }
.copy:hover { border-color: var(--purple); }
.hint { color: var(--muted); font-size: .8rem; margin-left: .6rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cta { display: inline-block; margin-top: .6rem; padding: .9rem 1.6rem; border-radius: 12px; color: #07120c; font-weight: 700; text-decoration: none;
  background: linear-gradient(90deg, var(--green), var(--purple)); }
.cta small { font-weight: 500; opacity: .8; }
.howto { text-align: left; display: inline-block; margin: 1.6rem auto 0; color: var(--muted); }
.howto strong { color: var(--fg); }
.back { display: block; margin-top: 1.5rem; color: var(--muted); }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 1rem; }
