:root{--bg:#0D110E;--bg2:#121813;--card:#182019;--card2:#202A21;--line:rgba(232,244,222,.09);--text:#F1F4EA;--dim:#A4AE9F;--faint:#6C7768;--lime:#C9F24A;--teal:#3CDDBF;--violet:#9C88FF;--coral:#FF5C6C;--ink:#0F160A}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:Onest,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;min-height:100dvh}
a{color:var(--lime)}
.wrap{max-width:560px;margin:0 auto;padding:20px 20px 48px}
.top{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-family:Unbounded,sans-serif;font-weight:800;letter-spacing:.14em;font-size:15px;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:10px}
.brand img{width:28px;height:28px;border-radius:8px}
.caps{font-family:Unbounded,sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
h1{font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(30px,8.4vw,42px);line-height:1.08;letter-spacing:-.01em}
h2{font-family:Unbounded,sans-serif;font-weight:700;font-size:20px;line-height:1.25}
h3{font-family:Unbounded,sans-serif;font-weight:600;font-size:15px;line-height:1.3}
p{font-size:16px;line-height:1.55;color:var(--dim)}
.lime{color:var(--lime)}
.card{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:20px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:60px;border-radius:22px;font-family:Unbounded,sans-serif;font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;width:100%;transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--lime);color:var(--ink)}
.btn.secondary{background:var(--card2);color:var(--text)}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.gap{height:12px}.gap2{height:24px}
.mascot{display:block}
.mascot .body{animation:cham 9s linear infinite}
.mascot .eye{transform-box:fill-box;transform-origin:center;animation:blink 3.6s infinite}
@keyframes cham{0%,100%{fill:var(--lime)}25%{fill:var(--teal)}50%{fill:var(--violet)}75%{fill:#FFC94A}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
.code{font-family:Unbounded,sans-serif;font-weight:800;font-size:40px;letter-spacing:.18em;color:var(--lime)}
.row{display:flex;gap:10px}
.tile{flex:1;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:14px}
.tile b{display:block;font-family:Unbounded,sans-serif;font-weight:600;font-size:15px;color:var(--text);margin-bottom:2px}
.tile span{font-size:13.5px;color:var(--dim)}
.steps{display:grid;gap:10px}
.step{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px}
.step i{flex:0 0 34px;height:34px;border-radius:11px;background:#2A352B;color:var(--lime);font-style:normal;font-family:Unbounded,sans-serif;font-weight:600;display:flex;align-items:center;justify-content:center}
.foot{margin-top:40px;font-size:13px;color:var(--faint);text-align:center;line-height:1.7}
.foot a{color:var(--dim)}
.doc h2{margin:28px 0 10px}.doc p,.doc li{font-size:15.5px;line-height:1.6;color:var(--dim)}.doc ul{padding-left:20px;display:grid;gap:6px}