:root{--bg:#E4EAF1;--card:#F6F8FB;--ink:#1D2736;--muted:#5B6678;--line:rgba(29,39,54,.12);--red:#E23B3B;--yel:#F5C518;--blue:#2F6FE4;--green:#2DB55D;--purple:#8E5BD8;--orange:#F08A24}
@media (prefers-color-scheme:dark){:root{--bg:#141A23;--card:#1C2430;--ink:#EEF2F7;--muted:#A3AEBF;--line:rgba(238,242,247,.12)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Rubik",system-ui,sans-serif}
a{color:inherit}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
header{padding:22px 0}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:22px/1 "Secular One","Rubik",sans-serif}
.logo svg{width:34px;height:34px}
nav{display:flex;gap:18px;font-size:15px}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover,nav a[aria-current]{color:var(--ink)}
h1,h2{font-family:"Secular One","Rubik",sans-serif;font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,8vw,68px)}
h2{font-size:clamp(28px,5vw,38px)}
h3{margin:0 0 4px;font-size:18px}
p{margin:0}
.hero{padding:56px 0 64px;display:grid;gap:22px}
.lead{font-size:clamp(17px,2.4vw,20px);color:var(--muted);max-width:36ch}
.drops{display:flex;gap:10px;height:46px;align-items:flex-end}
.drops svg{width:26px;height:34px;animation:fall 2.8s cubic-bezier(.5,0,.6,1) infinite;animation-delay:calc(var(--d)*.22s)}
@keyframes fall{0%{transform:translateY(-28px);opacity:0}18%{opacity:1}40%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.drops svg{animation:none}}
section{padding:48px 0;border-top:1px solid var(--line)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;display:grid;gap:14px}
.game{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center}
.icon{width:120px;height:120px;border-radius:28px;background:linear-gradient(145deg,#FFFFFF,#DCE4EE);display:grid;place-items:center;box-shadow:0 8px 22px rgba(29,39,54,.16)}
.icon svg{width:76px;height:76px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:999px;padding:12px 22px;background:var(--ink);color:var(--bg);text-decoration:none;width:fit-content}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.soon{font-size:14px;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}
.feat b{display:block;width:12px;height:12px;border-radius:50%;background:var(--c);margin-bottom:12px}
.feat p{color:var(--muted);font-size:15px}
.mix{display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;font-weight:500;color:var(--muted)}
.mix span{width:22px;height:22px;border-radius:50%;background:var(--c);display:inline-block;vertical-align:middle;box-shadow:inset 0 0 0 1px var(--line)}
.doc{max-width:720px;padding:20px 0 64px}
.doc h1{font-size:clamp(34px,6vw,48px);margin-bottom:8px}
.doc h2{font-size:24px;margin:36px 0 10px}
.doc p,.doc li{color:var(--ink)}
.doc p+p{margin-top:10px}
.doc ul{padding-left:22px;margin:10px 0}
.doc li+li{margin-top:6px}
.meta{color:var(--muted);font-size:15px}
footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--muted)}
@media (max-width:640px){.grid3{grid-template-columns:1fr}.game{grid-template-columns:1fr}nav{gap:14px}header .wrap{flex-wrap:wrap}}
.mix em{font-style:normal;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}