@font-face{font-family:Inter;src:url(/static/fonts/inter-latin.woff2) format('woff2');font-weight:400 800;font-display:swap}
:root{
  --bg:#FFFFFF; --soft:#F6F7F9; --ink:#14161A; --ink-2:#5B6170; --ink-3:#8A919E; --line:#E6E8EC;
  --hot:#E0362C; --hot-soft:#FDEBE9; --crazy:#6E56E8; --crazy-soft:#EFECFD; --ok:#17915F;
  --radius:18px; --f:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.board,.step,.people,#s1,#c18{scroll-margin-top:72px}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
.wrap{max-width:1120px; margin:0 auto; padding:0 16px}
.label{font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2)}
.muted{color:var(--ink-2)} .small{font-size:14px} .tiny{font-size:12.5px; color:var(--ink-3)}
.hot{color:var(--hot)} .crazy{color:var(--crazy)}

/* header / footer */
header.top{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; height:56px}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:12.5px; letter-spacing:.11em; white-space:nowrap; text-transform:uppercase; text-decoration:none}
.brand i{display:inline-grid; grid-template-columns:1fr 1fr; width:20px; height:20px; border-radius:5px; overflow:hidden; flex:none}
.brand i b:nth-child(1),.brand i b:nth-child(4){background:var(--hot)} .brand i b:nth-child(2),.brand i b:nth-child(3){background:var(--crazy)}
.navlink{font-size:13px; font-weight:700; text-decoration:none; padding:7px 10px; border-radius:999px; border:1px solid var(--line); white-space:nowrap}
.navlink b{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--ink); color:#fff; font-size:12px; margin-left:4px}
footer.bot{border-top:1px solid var(--line); margin-top:48px; padding:22px 0 36px; font-size:13px; color:var(--ink-3)}
footer.bot .wrap{display:flex; flex-wrap:wrap; gap:8px 18px}
footer.bot a{text-decoration:none} footer.bot a:hover{color:var(--ink)}

/* hero */
.intro{padding:28px 0 18px}
.intro h1{font-size:clamp(34px,8.4vw,60px); line-height:1; letter-spacing:-.035em; font-weight:800; margin:10px 0 0; text-wrap:balance}
.intro .lead{margin:14px 0 0; max-width:56ch; color:var(--ink-2); font-size:17px}
.live{display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--ink-2)}
.live i{width:8px; height:8px; border-radius:50%; background:var(--ok)}

.grid{display:grid; grid-template-columns:1fr; gap:18px; align-items:start}
@media (min-width:900px){ .grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:28px} .board{position:sticky; top:72px} }

/* matrix */
.board{border:1px solid var(--line); border-radius:var(--radius); padding:14px 12px 12px; background:#fff}
.board svg{display:block; width:100%; height:auto}
.z-lbl{font-size:9.5px; font-weight:800; letter-spacing:.08em; fill:#3A3F48}
.z-lbl.sm{font-size:7.6px}
.tick{font-size:8.5px; fill:var(--ink-3); font-variant-numeric:tabular-nums}
.ax-t{font-size:9px; font-weight:800; letter-spacing:.1em}
.ax-s{font-size:8.5px; fill:var(--ink-3); font-weight:600}
.diag-t{font-size:6.4px; font-weight:800; letter-spacing:.12em; fill:#3A3F48}
.pop{fill:#14161A; opacity:.22}
.ref{cursor:pointer; outline:none}
.ref circle{fill:#fff; stroke:#14161A; stroke-width:1.1}
.ref:hover circle,.ref:focus-visible circle,.ref.on circle{stroke-width:2.2}
.ref .nm{font-size:7.2px; font-weight:700; fill:var(--ink); paint-order:stroke; stroke:#fff; stroke-width:2.6px; stroke-linejoin:round}
@media (max-width:560px){ .ref .nm{display:none} }
.me .ring{fill:none; stroke-width:3}
.me .ini{font-size:11px; font-weight:800; fill:#fff}
.me.old{opacity:.9}
@media (prefers-reduced-motion:no-preference){ .me.new{animation:drop .6s cubic-bezier(.2,1.35,.4,1) both} .me.new .pulse{animation:pulse 1.6s ease-out 2} }
.me{transform-box:fill-box; transform-origin:center}
.me .pulse{fill:none; stroke-width:2; opacity:0}
@keyframes drop{0%{transform:translateY(-24px); opacity:0} 100%{transform:none; opacity:1}}
@keyframes pulse{0%{opacity:.8; r:17} 100%{opacity:0; r:32}}
.legend{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin:10px 2px 2px; padding:0; list-style:none; font-size:13px}
@media (min-width:560px){ .legend{grid-template-columns:repeat(3,1fr)} }
.legend li{display:flex; align-items:center; gap:8px}
.sw{width:12px; height:12px; border-radius:3px; flex:none}
.info{display:flex; gap:12px; align-items:flex-start; background:var(--soft); border-radius:14px; padding:12px 14px; margin-top:12px; min-height:56px; font-size:14.5px}
.info svg{flex:none; width:22px; height:22px; margin-top:1px}
.info b{font-weight:800}
.info .src{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}

/* steps */
.flow{display:flex; flex-direction:column; gap:14px}
.step{border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:14px; background:#fff}
.step[hidden]{display:none}
.step h2{margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
.step h2 > span:not(.n) > span{display:inline}
.step h2 .n{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:13px; flex:none}
.note{font-size:13.5px; color:var(--ink-2); margin:0}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; cursor:pointer}
.check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--ink); flex:none}
.upload{display:flex; gap:14px; align-items:center}
.thumb{width:76px; height:76px; border-radius:50%; flex:none; background:var(--soft); border:1.5px dashed #C9CDD4; display:grid; place-items:center; overflow:hidden; color:var(--ink-3); font-weight:800; font-size:22px}
.thumb.has{border:3px solid var(--ink)}
.thumb img{width:100%; height:100%; object-fit:cover}
.status{font-size:14px; margin:0}
.status.err{color:var(--hot); font-weight:700}
.btns{display:flex; flex-wrap:wrap; gap:8px}
.btn{font-weight:800; font-size:15px; border-radius:999px; padding:12px 18px; border:0; cursor:pointer; background:var(--soft); color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px}
.btn.primary{background:var(--hot); color:#fff}
.btn.dark{background:var(--ink); color:#fff}
.btn.ghost{background:#fff; border:1.5px solid var(--line)}
.btn.block{width:100%}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.btn:focus-visible,.chip:focus-visible,input:focus-visible,.ref:focus-visible{outline:3px solid var(--crazy); outline-offset:2px}
input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
input[type=text],input[type=email],textarea{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; font-size:16px; background:#fff}
textarea{min-height:140px; resize:vertical}
.hotbox{display:flex; flex-direction:column; gap:8px}
.range{display:flex; align-items:center; gap:14px}
.range input{flex:1; accent-color:var(--hot); height:28px}
.range output{font-size:30px; font-weight:800; min-width:2.6ch; text-align:right; font-variant-numeric:tabular-nums; color:var(--hot); letter-spacing:-.02em}
.scale{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3); margin-top:-4px}
.q{display:flex; flex-direction:column; gap:9px; padding-top:14px; border-top:1px solid var(--line)}
.q:first-of-type{border-top:0; padding-top:0}
.q p{margin:0; font-weight:700; font-size:15.5px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{font-size:14px; font-weight:600; border-radius:999px; padding:9px 14px; border:1.5px solid var(--line); background:#fff; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--crazy); color:#fff; border-color:var(--crazy)}

/* result */
.result{border-width:2px}
.zchip{align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:6px 11px; border-radius:999px}
.result h3{font-size:30px; line-height:1.05; letter-spacing:-.03em; margin:0; font-weight:800}
.result .txt{margin:0; font-size:17px}
.coords{display:flex; gap:18px; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums}
.game{font-size:13px; color:var(--ink-3); margin:0}

/* pay */
.pay{background:var(--soft); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:12px}
.pay h4{margin:0; font-size:17px; font-weight:800}
.plans{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.plan{border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:12px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px}
.plan[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.plan .p{font-size:22px; font-weight:800; letter-spacing:-.02em}
.plan .d{font-size:12.5px; color:var(--ink-2)}
.pix{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.pix img{width:220px; height:220px; image-rendering:pixelated; border:1px solid var(--line); border-radius:12px; background:#fff}
.pix code{display:block; width:100%; font-size:11.5px; word-break:break-all; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; max-height:84px; overflow:auto; text-align:left}
.soon{background:var(--soft); border-radius:16px; padding:16px}
.soon b{display:block; font-size:16px; margin-bottom:4px}

/* my people */
.people{display:flex; flex-direction:column; gap:10px; margin-top:18px; border:1px solid var(--line); border-radius:var(--radius); padding:16px}
@media (min-width:900px){ .people{max-width:calc(53.5% - 14px)} }
.person{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; border:1px solid var(--line); border-radius:14px; padding:10px 12px}
.person .av{width:46px; height:46px; border-radius:50%; flex:none; overflow:hidden; display:grid; place-items:center; color:#fff; font-weight:800; border:3px solid}
.person .av img{width:100%; height:100%; object-fit:cover}
.person .meta{flex:1; min-width:0}
.person .meta b{display:block; font-size:15px}
.person .meta span{font-size:13px; color:var(--ink-2)}
.person .acts{display:flex; gap:6px; flex-wrap:wrap; flex-basis:100%; padding-left:58px}
.person .acts button{font-size:12.5px; font-weight:700; border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 10px; cursor:pointer}

/* text pages */
.page{max-width:720px; margin:0 auto; padding:28px 0 0}
.page h1{font-size:clamp(30px,7vw,44px); letter-spacing:-.03em; line-height:1.05; margin:8px 0 12px}
.page .card{border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin-top:12px}
.page .card h2{font-size:17px; margin:0 0 6px; font-weight:800}
.page .card p{margin:0; font-size:15px; color:#2B2F36}
.page .card p + p{margin-top:8px}

.toast{position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 16px; border-radius:999px; font-weight:700; font-size:14px; max-width:calc(100% - 32px); text-align:center; z-index:50}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}