:root{--bg:#17142b;--pn:#221d3f;--mint:#5ff0c0;--lav:#b9a7ff;--cor:#ff6b6b;--tx:#f1eefc;--mu:#a79fc9}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.55 "Trebuchet MS","Segoe UI",system-ui,sans-serif}
header,main,footer{max-width:960px;margin:0 auto;padding:0 20px}
header{display:flex;align-items:center;gap:20px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
header nav{flex:1;display:flex;gap:18px}a{color:var(--lav)}
.logo{font-size:22px;font-weight:700;color:var(--tx);text-decoration:none;letter-spacing:-.5px}.logo b{color:var(--mint);margin-left:2px}
#who{color:var(--mu);margin-right:8px}
.btn{background:var(--mint);color:#10241d;border:0;border-radius:10px;padding:10px 20px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.btn.s{padding:6px 14px}.lnk{background:none;border:0;color:var(--lav);font:inherit;cursor:pointer;padding:6px 0;text-align:left}
:focus-visible{outline:3px solid var(--lav);outline-offset:2px}
.hero{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:40px;padding-bottom:40px;flex-wrap:wrap}
.hero h1{font-size:clamp(30px,5vw,48px);line-height:1.1;margin:0 0 12px;max-width:14ch}.hero p{color:var(--mu);max-width:42ch}
.hero img{border-radius:16px;max-width:100%;height:auto;border:2px solid var(--pn)}
h2{font-size:26px;margin:40px 0 16px}h3{margin:0 0 8px;color:var(--lav)}
.pick{display:flex;gap:16px;flex-wrap:wrap}
.card{background:var(--pn);border:2px solid transparent;border-radius:14px;padding:10px;color:var(--tx);font:inherit;cursor:pointer;text-align:left}
.card img{display:block;border-radius:8px;max-width:100%;height:auto}.card span{display:block;margin-top:8px;font-weight:700}
.card.on{border-color:var(--mint)}
.stage{display:flex;gap:24px;margin-top:24px;flex-wrap:wrap}
.cvw{position:relative;line-height:0}canvas{background:#120f24;border-radius:12px;border:2px solid var(--pn);max-width:100%;touch-action:none}
#ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#120f24cc;border-radius:12px;line-height:1.5}
#ov p{font-size:22px;font-weight:700;margin:0}#ov.hide{display:none}
aside{min-width:200px}aside p{margin:0 0 12px;color:var(--mu)}aside b{display:block;font-size:28px;color:var(--tx)}
.hint{font-size:14px}.pad{display:grid;grid-template-columns:repeat(3,56px);gap:8px}
.pad button{height:48px;border-radius:10px;border:0;background:var(--pn);color:var(--tx);font-size:20px;cursor:pointer}
.boards{display:flex;gap:40px;flex-wrap:wrap}ol{margin:0;padding-left:22px;color:var(--mu)}li b{color:var(--tx)}
footer{color:var(--mu);font-size:14px;padding-top:48px;padding-bottom:32px}
dialog{background:var(--pn);color:var(--tx);border:0;border-radius:16px;padding:24px;width:min(340px,92vw)}
dialog::backdrop{background:#000a}form{display:grid;gap:12px}form h2{margin:0}
label{display:grid;gap:4px;color:var(--mu)}input{padding:10px;border-radius:8px;border:2px solid #3a3366;background:var(--bg);color:var(--tx);font:inherit}
#msg{color:var(--cor);margin:0;min-height:1.4em}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.nf{padding-top:80px}