:root{--bg:#0b0d12;--ink:#f4f6fb;--mut:#9aa3b5;--line:#232838;--acc:#ff3d6e;--acc2:#36e0c4;--card:#141824}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--acc2)}h1,h2,h3{line-height:1.15;margin:.2em 0 .4em}h1{font-size:clamp(2rem,6vw,3.4rem);letter-spacing:-.02em}h2{font-size:clamp(1.5rem,4vw,2.2rem)}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.8rem 1.2rem;background:rgba(11,13,18,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.5rem}.logo-dot{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe0a3,#f7b267);box-shadow:0 10px 0 -3px var(--acc)}
.top nav{margin-left:auto;display:flex;gap:1rem}.top nav a{color:var(--mut);text-decoration:none;font-size:.95rem}.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--ink);font-size:1.5rem}
@media(max-width:820px){.burger{display:block}.top nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#0b0d12;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}.nav-open .top nav{display:flex}}
main{max-width:1180px;margin:0 auto;padding:0 1.2rem}
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:2.5rem;align-items:center;padding:3rem 0}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:1.5rem}}
.eyebrow{color:var(--acc2);text-transform:uppercase;font-weight:700;font-size:.8rem;letter-spacing:.12em}.lede{font-size:1.12rem;color:#d5dae6}
.btn{display:inline-block;background:var(--acc);color:#fff;padding:.8rem 1.3rem;border-radius:12px;font-weight:700;text-decoration:none;margin:.3rem .4rem .3rem 0}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.ticks{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;color:var(--mut);font-size:.92rem}.ticks li:before{content:"✓ ";color:var(--acc2)}
/* MACHINE */
.machine{background:linear-gradient(160deg,#1c1f27,#07080b 60%);border-radius:22px;padding:14px;box-shadow:0 40px 80px -30px #000,inset 0 1px 0 #3a3f4d,0 0 0 1px #2a2e3a;max-width:620px;margin:auto}
.mtop{display:flex;justify-content:space-between;align-items:baseline;padding:6px 10px 12px}.mtop span{font-weight:900;letter-spacing:.12em;background:linear-gradient(90deg,var(--acc),#ffb86b);-webkit-background-clip:text;color:transparent}.mtop em{font-style:normal;font-size:.62rem;color:var(--mut);letter-spacing:.14em}
.mbody{display:grid;grid-template-columns:1fr 128px;gap:12px}
.glass{position:relative;border-radius:12px;background:linear-gradient(180deg,#121826,#0a0e17);box-shadow:inset 0 0 0 2px #2b3243,inset 0 0 40px rgba(54,224,196,.12);padding:10px;overflow:hidden}
.shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.09) 38%,transparent 46%,transparent 60%,rgba(255,255,255,.05) 64%,transparent 70%)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slot{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));border:0;border-bottom:3px solid #3a4152;padding:8px 2px 4px;cursor:pointer;color:inherit;display:flex;flex-direction:column;align-items:center;border-radius:6px 6px 0 0;transition:.2s}
.slot:hover,.slot.sel{background:rgba(54,224,196,.12)}.slot.sel{outline:2px solid var(--acc2)}
.slot .tag{font-size:.56rem;line-height:1.1;font-weight:700;background:#f4f6fb;color:#111;padding:2px 4px;border-radius:3px;margin-top:4px;text-align:center;min-height:2.3em;display:flex;align-items:center}
.slot .pt{font-size:.58rem;color:var(--acc2);font-family:ui-monospace,monospace;margin-top:2px}
.coil{width:90%;height:6px;margin-top:3px;background:repeating-linear-gradient(90deg,#8a93a6 0 2px,transparent 2px 6px);border-radius:3px;opacity:.7}
/* Little People figurine */
.fig{--s:1;display:flex;flex-direction:column;align-items:center;width:calc(34px*var(--s));transition:transform .25s}
.slot:hover .fig{transform:translateY(-4px) rotate(-4deg)}
.fig .head{position:relative;width:calc(24px*var(--s));height:calc(24px*var(--s));border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7c2,#f2b880 70%);z-index:2;box-shadow:inset -2px -3px 0 rgba(0,0,0,.12)}
.fig .head:before{content:"";position:absolute;left:-1px;right:-1px;top:-2px;height:45%;border-radius:50% 50% 30% 30%;background:var(--hat)}
.fig .head i{position:absolute;left:28%;top:52%;width:44%;height:22%;background:radial-gradient(circle,#222 40%,transparent 45%) 0 0/50% 100% repeat-x;}
.fig .head i:after{content:"";position:absolute;left:25%;top:120%;width:50%;height:60%;border-bottom:2px solid #a0522d;border-radius:0 0 50% 50%}
.fig .body{width:calc(30px*var(--s));height:calc(34px*var(--s));margin-top:calc(-3px*var(--s));border-radius:45% 45% 30% 30%/30% 30% 20% 20%;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 40%,rgba(0,0,0,.25)),var(--body)}
.fig.sm{--s:1.5}
.panel{background:linear-gradient(180deg,#232733,#12141b);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 0 0 1px #343a49}
.screen{background:#041a17;border-radius:6px;padding:8px;font-family:ui-monospace,monospace;color:#5dffd8;display:flex;flex-direction:column;min-height:110px;box-shadow:inset 0 0 12px rgba(93,255,216,.25);font-size:.7rem}
.screen small{opacity:.6;font-size:.58rem}.screen b{font-size:1.5rem}.screen #sprice{color:#ffd166;font-weight:700}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.keys span{background:#2f3442;border-radius:4px;text-align:center;font:700 .7rem ui-monospace,monospace;padding:5px 0;color:#cfd5e2;box-shadow:0 2px 0 #0a0b0f}.keys .ok{background:#1f6f5f}
.pay{display:flex;flex-direction:column;align-items:center;gap:5px}.pay small{font-size:.5rem;color:var(--mut);letter-spacing:.1em}.card-slot{width:70%;height:6px;background:#000;border-radius:3px;box-shadow:0 0 0 2px #444}.coin{width:10px;height:22px;background:#000;border-radius:3px;box-shadow:0 0 0 2px #555}
.vend{background:var(--acc);color:#fff;border:0;border-radius:8px;padding:10px 4px;font-weight:800;cursor:pointer;font-size:.8rem}.vend:disabled{opacity:.45;cursor:not-allowed}
.tray{margin-top:12px;height:58px;border-radius:10px;background:#000;box-shadow:inset 0 8px 18px rgba(255,255,255,.04),0 0 0 2px #2a2e3a;display:flex;align-items:center;justify-content:center;gap:1rem;color:#555;font-size:.65rem;letter-spacing:.3em;overflow:hidden}
.tray .fig{animation:drop .6s cubic-bezier(.3,1.6,.6,1)}@keyframes drop{from{transform:translateY(-60px)}}
@media(max-width:520px){.mbody{grid-template-columns:1fr}.panel{display:grid;grid-template-columns:1.2fr 1fr;align-items:start}.pay{display:none}.vend{grid-column:1/-1}.grid{gap:3px}.slot .tag{font-size:.5rem}.fig{--s:.85}}
/* sections */
.band{background:linear-gradient(135deg,#151a28,#10131c);border:1px solid var(--line);border-radius:18px;padding:1.6rem;margin:1rem 0}
.sec{padding:2.2rem 0}.sub2{color:var(--mut)}.pagehead{padding:2.5rem 0 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;align-items:flex-start;transition:.2s}.card:hover{border-color:#3b4460;transform:translateY(-2px)}
.card .fig{flex:none;margin-top:4px}.card h3{font-size:1.05rem;margin:.1em 0}.card p{color:var(--mut);font-size:.9rem;margin:.2em 0 .6em}.code{font:700 .7rem ui-monospace,monospace;color:var(--acc2)}
.row{display:flex;justify-content:space-between;align-items:center}.row b{font-size:1.2rem}small{color:var(--mut);font-weight:400}
.get{background:var(--acc2);color:#04221c;border:0;border-radius:999px;padding:.45rem 1rem;font-weight:800;cursor:pointer}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.three>div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
table{width:100%;border-collapse:collapse;margin:1rem 0}td,th{padding:.7rem;border-bottom:1px solid var(--line);text-align:left}th{color:var(--mut);font-weight:600}
.fine,.fine2{color:var(--mut);font-size:.8rem}
.sponsor-slot{border:2px dashed #3b4460;border-radius:18px;padding:1.4rem;text-align:center;margin:1rem 0}.badge{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;background:#2a2f40;padding:3px 8px;border-radius:999px;color:#ffd166}
.news{text-align:center}.sub{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:560px;margin:1rem auto}.sub input{flex:1 1 220px;padding:.85rem 1rem;border-radius:12px;border:1px solid var(--line);background:#0f121a;color:var(--ink);font-size:1rem}.sub button{background:var(--acc);color:#fff;border:0;border-radius:12px;padding:.85rem 1.3rem;font-weight:800;cursor:pointer}.sub .hp{position:absolute;left:-9999px}.msg{flex-basis:100%;margin:.2rem 0;color:var(--acc2)}
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem;margin:.5rem 0}summary{font-weight:700;cursor:pointer}details p{color:#cfd5e2}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0}.chip{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:.4rem .9rem;cursor:pointer}.chip.on{background:var(--acc2);color:#04221c}
.packs,.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1rem 0}.pack{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:.4rem}.pack p{color:var(--mut);margin:0}.pack b{font-size:1.5rem}.pack span{color:var(--acc2);font-size:.85rem}.pack .get{align-self:flex-start;margin-top:.4rem}
.ptable td:nth-child(2){font-weight:700}
footer{border-top:1px solid var(--line);margin-top:3rem;padding:2rem 1.2rem}.fcols{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.fcols a{display:block;color:var(--mut);text-decoration:none;font-size:.9rem;padding:2px 0}.fcols p{color:var(--mut);font-size:.9rem}footer .fine{text-align:center}
dialog{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:18px;max-width:420px;width:92%;padding:1.5rem}dialog::backdrop{background:rgba(0,0,0,.6)}dialog .x{float:right;background:none;border:0;color:var(--mut);font-size:1.3rem;cursor:pointer}
.fig svg{width:48px;height:56px;display:block;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}.fig.sm svg{width:72px;height:84px}.fig{width:auto}
.picker .chip.on{background:var(--acc2);color:#04221c}#pick .card{display:none}#pick.show .card.m{display:flex}
.prof{padding:2rem 0;border-top:1px solid var(--line)}.packline{margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.packline span{color:var(--acc2)}a.chip{text-decoration:none}
@media(max-width:520px){.fig svg{width:40px;height:47px}}
