:root{--bg:#0b0c10;--bg2:#13151c;--line:#2a2e3a;--txt:#f2f3f7;--txt2:#b4b9c7;--lime:#c6ff3d;--pink:#ff4fa0;--yel:#ffd43b;--blu:#3d7bff}
body{background:radial-gradient(1200px 600px at 75% -10%,#1d2233 0,transparent 60%),var(--bg);color:var(--txt);font-family:"Inter",system-ui,sans-serif}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;opacity:.18;z-index:-1}
:focus-visible{outline-color:var(--lime)}
.brand i b{border-color:var(--txt)}.brand i b:nth-child(1){background:var(--lime)}.brand i b:nth-child(2){background:var(--pink)}.brand i b:nth-child(3){background:var(--blu)}.brand i b:nth-child(4){background:var(--yel)}
.tag{background:transparent;border-color:var(--line);color:var(--txt2)}.tag::before{background:var(--lime);box-shadow:none}
h1{font-weight:800;letter-spacing:-.04em}
h1 .pop{background:var(--lime);color:#0b0c10;transform:none;border-radius:12px}
.lead{color:var(--txt2)}
.btn{background:transparent;color:var(--txt);border:2px solid #5a6072;box-shadow:none;border-radius:10px}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px -8px rgba(198,255,61,.35);border-color:var(--txt)}
.btn.dark{background:var(--lime);color:#0b0c10;border-color:var(--lime)}
kbd{background:#1b1e27;color:var(--txt);border-color:#5a6072}
.hint{color:var(--txt2)}
.pick button{background:#151821;color:var(--txt);border-color:#3a3f4d}.pick button[aria-pressed="true"]{background:var(--lime);color:#0b0c10;border-color:var(--lime)}
/* laptop */
.laptop{position:relative;padding-bottom:26px}
.stage{background:radial-gradient(500px 300px at 70% 30%,rgba(255,79,160,.25),transparent 70%),radial-gradient(400px 260px at 20% 80%,rgba(198,255,61,.18),transparent 70%),#07080b;border:10px solid #23262f;border-radius:18px 18px 6px 6px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px #3a3f4d}
.laptop::after{content:"";position:absolute;left:-6%;right:-6%;bottom:0;height:26px;background:linear-gradient(#3a3d47,#1c1e25);border-radius:0 0 22px 22px;box-shadow:0 20px 40px -10px rgba(0,0,0,.8)}
.menubar{background:rgba(255,255,255,.06);color:var(--txt2);border-bottom:1px solid #2a2e3a}
.win{background:#1a1d26;color:var(--txt);border:1px solid #3a3f4d;box-shadow:0 18px 30px -12px rgba(0,0,0,.8);border-radius:9px}
.win .bar{border-bottom:1px solid #2a2e3a;color:var(--txt2)}.win .bar i{border:none}
.w1{border-top:3px solid var(--lime)}.w2{border-top:3px solid var(--pink)}.w3{border-top:3px solid var(--yel)}.w4{background:#1a1d26;color:var(--txt);border-top:3px solid var(--blu)}.w4 .bar{border-color:#2a2e3a}
.win .body u{opacity:.22}
.stage[data-l="0"] .w1{box-shadow:-30px 0 40px -20px rgba(198,255,61,.5)}.stage[data-l="0"] .w2{box-shadow:30px 0 40px -20px rgba(255,79,160,.5)}
.hud{background:rgba(198,255,61,.95);color:#0b0c10}.hud kbd{background:#0b0c10;color:var(--lime);border-color:#0b0c10}
/* keycaps */
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.keycap{display:grid;gap:14px;justify-items:center;text-align:center}
.cap{width:100%;aspect-ratio:1/1;border-radius:22px;padding:14% 14% 20%;position:relative;box-shadow:inset 0 -14px 0 rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.45),0 18px 30px -12px rgba(0,0,0,.8);transition:transform .2s var(--ease)}
.cap:hover{transform:translateY(-4px)}
.cap .num{position:absolute;top:10%;left:12%;font:800 1.15rem "JetBrains Mono",monospace;color:#0b0c10}
.cap .g{display:grid;gap:5px;height:100%;margin-top:18%}
.cap .g i{border-radius:5px;background:rgba(11,12,16,.82);border:1px solid rgba(255,255,255,.25)}
.c1{background:linear-gradient(#d7ff6a,#a6e21f)}.c2{background:linear-gradient(#6b9bff,#2f63e0)}.c3{background:linear-gradient(#ff7ab8,#e6327f)}.c4{background:linear-gradient(#ffe066,#f0b90b)}
.c2 .num{color:#fff}
.keycap span.lbl{font-weight:700;color:var(--txt)}
section{border-top:1px solid var(--line)}
h2{color:var(--txt)}.sub{color:var(--txt2)}
.card{background:#12141b;border:1px solid var(--line);box-shadow:none;border-radius:16px;color:var(--txt)}
.card p{color:var(--txt2)}
.card .n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:#0b0c10}
.card.p,.card.l{background:#12141b}
.cards .card:nth-child(1){border-color:rgba(198,255,61,.45)}.cards .card:nth-child(1) .n{background:var(--lime)}
.cards .card:nth-child(2){border-color:rgba(255,79,160,.45)}.cards .card:nth-child(2) .n{background:var(--pink)}
.cards .card:nth-child(3){border-color:rgba(255,212,59,.45)}.cards .card:nth-child(3) .n{background:var(--yel)}
.soonbox{background:linear-gradient(135deg,#171a22,#0f1116);border:1px solid #3a3f4d;box-shadow:0 0 0 1px rgba(198,255,61,.2),0 30px 60px -30px rgba(198,255,61,.35);color:var(--txt)}
.soonbox p{color:var(--txt2)}
.note{color:var(--txt2)}
footer.site{background:#08090c;border-top:1px solid var(--line);color:var(--txt2)}footer.site nav a{color:var(--txt)}
.page .card a{color:var(--lime)}
@media (max-width:900px){.keys{grid-template-columns:1fr 1fr}.laptop::after{left:-3%;right:-3%}}
@media (prefers-reduced-motion:reduce){.cap:hover,.btn:hover{transform:none}}
.keycap{min-width:0}
.cap{display:flex;flex-direction:column;padding:16% 13% 18%;aspect-ratio:1/1;overflow:hidden}
.cap .g{flex:1;height:auto;margin-top:16px;min-height:0}
.keys{margin-bottom:28px}
button.keycap{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
button.keycap .cap,button.keycap .g{display:flex}.cap .g{display:grid}
button.keycap:focus-visible{outline:3px solid var(--lime);outline-offset:6px;border-radius:22px}
button.keycap[aria-pressed="true"] .cap{transform:translateY(4px);box-shadow:inset 0 -6px 0 rgba(0,0,0,.28),0 0 0 3px #fff,0 10px 30px -8px rgba(255,255,255,.35)}
.lbl{color:var(--txt)}
.c2{background:linear-gradient(#7aa6ff,#5a8cff)}.c2 .num{color:#0b0c10}
.pick button{border-color:#5a6072}
@media (prefers-reduced-motion:reduce){button.keycap .cap{transition:none}}
button.keycap .cap{width:100%}button.keycap .cap .g{display:grid;width:100%;align-self:stretch}