:root { --cream:#FFF8F1; --card:#FFFFFF; --ink:#2B2340; --soft:#6A6380; --pink:#F6A6C1; --pink-d:#E07FA4; --lilac:#C7B8F5; --mint:#A8E6CF; --butter:#FFE29A; --sky:#A9D6F5; --line:#EFE3EC; --accent:#F6A6C1; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--cream); color:var(--ink); font:17px/1.62 'Onest',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; } img { max-width:100%; height:auto; display:block; }
h1, h2, h3 { font-family:'Unbounded',system-ui,sans-serif; font-weight:600; line-height:1.05; letter-spacing:-.02em; text-wrap:balance; }
h1 em, h2 em { font-style:normal; background:linear-gradient(transparent 58%, var(--accent) 58% 90%, transparent 90%); transition:background .3s; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-999px; } .skip:focus { left:8px; top:8px; background:var(--ink); color:#fff; padding:8px; z-index:99; }
:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
[hidden] { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.top { position:sticky; top:0; z-index:20; background:rgba(255,248,241,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:24px; height:70px; }
.logo { display:flex; align-items:center; gap:1px; text-decoration:none; }
.logo img { width:38px; height:38px; }
.logo span { font:600 24px/1 'Unbounded'; letter-spacing:-.03em; padding-top:1px; }
.top nav { display:flex; gap:22px; margin-left:auto; }
.top nav a { text-decoration:none; font-weight:500; font-size:15px; color:var(--soft); padding:6px 0; border-bottom:2px solid transparent; }
.top nav a:hover, .top nav a[aria-current] { color:var(--ink); border-color:var(--pink-d); }
.cta { text-decoration:none; font-weight:700; font-size:14.5px; background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; white-space:nowrap; box-shadow:0 4px 0 #15101F; transition:transform .1s, box-shadow .1s; }
.cta:active { transform:translateY(3px); box-shadow:0 1px 0 #15101F; }
.btn { display:inline-block; background:var(--ink); color:#fff; font:700 15.5px 'Onest'; text-decoration:none; padding:13px 22px; border:0; border-radius:999px; cursor:pointer; box-shadow:0 4px 0 #15101F; transition:transform .1s, box-shadow .1s; }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 #15101F; }
.btn.line { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink), 0 4px 0 var(--ink); }
.btn.sm { padding:8px 14px; font-size:14px; }
.sec { padding:96px 0; } .sec h2 { font-size:clamp(32px,4vw,56px); margin:0 0 16px; }
.sec.alt { background:#FFF; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lede { font-size:clamp(18px,1.5vw,20px); color:var(--soft); max-width:38em; margin:0 0 36px; }
.src { font-size:13.5px; color:var(--soft); margin-top:16px; }
.page-intro { padding:72px 0 30px; } .page-intro h1 { font-size:clamp(40px,5.6vw,80px); margin:0 0 18px; max-width:15ch; }
.page-intro p { font-size:clamp(18px,1.5vw,21px); color:var(--soft); max-width:36em; margin:0; }

.hero { padding:72px 0 20px; text-align:center; }
.hero h1 { font-size:clamp(42px,6.4vw,92px); margin:0 auto 18px; max-width:13ch; }
.hero p { font-size:clamp(18px,1.6vw,21px); color:var(--soft); max-width:32em; margin:0 auto 26px; }

/* keyboard */
.kb { --u:min(54px, calc((100vw - 64px) / 15.6)); display:inline-grid; gap:calc(var(--u) * .1); padding:calc(var(--u) * .28); background:var(--case); border-radius:calc(var(--u) * .42); box-shadow:0 2px 0 rgba(0,0,0,.06), 0 24px 40px -18px rgba(70,40,80,.35), inset 0 -6px 0 rgba(0,0,0,.05); transition:background .3s; }
.kr { display:flex; gap:calc(var(--u) * .1); }
.k { --c:var(--base); position:relative; width:calc(var(--u) * var(--w) + var(--u) * .1 * (var(--w) - 1)); height:var(--u); border-radius:calc(var(--u) * .2); background:color-mix(in srgb, var(--c) 78%, var(--legend) 22%); box-shadow:0 calc(var(--u) * .06) 0 color-mix(in srgb, var(--c) 60%, var(--legend) 40%); transition:transform .08s, box-shadow .08s, background .3s; }
.k.mod { --c:var(--mod); }
.k i { position:absolute; left:12%; right:12%; top:6%; bottom:20%; border-radius:calc(var(--u) * .14); background:linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff 30%), var(--c)); display:flex; align-items:flex-start; justify-content:flex-start; padding:calc(var(--u) * .08) calc(var(--u) * .12); font:600 calc(var(--u) * .24)/1 'Onest'; color:var(--legend); font-style:normal; }
.k.mod i { font-size:calc(var(--u) * .2); }
.k.bump i::after { content:''; position:absolute; left:38%; right:38%; bottom:14%; height:2px; border-radius:2px; background:var(--legend); opacity:.45; }
.k.down { transform:translateY(calc(var(--u) * .05)); box-shadow:0 calc(var(--u) * .01) 0 color-mix(in srgb, var(--c) 60%, var(--legend) 40%); }
.k.next { outline:3px solid var(--glow); outline-offset:2px; animation:pulse 1.1s ease-in-out infinite; }
.k.next i { background:linear-gradient(180deg, #fff, color-mix(in srgb, var(--glow) 55%, #fff)); }
.k.miss i { background:#FF9FA8; }
@keyframes pulse { 50% { outline-offset:5px; } }
@media (prefers-reduced-motion:reduce) { .k.next { animation:none; } }

/* tutor */
.tt { display:grid; gap:18px; justify-items:center; }
.tt-bar { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:center; }
.seg { display:inline-flex; flex-wrap:wrap; background:#fff; border:2px solid var(--ink); border-radius:999px; overflow:hidden; }
.seg button { font:600 14px 'Onest'; background:none; border:0; padding:8px 14px; cursor:pointer; color:var(--ink); }
.seg button[aria-pressed=true] { background:var(--ink); color:#fff; }
.tt-cw { display:flex; gap:8px; }
.tt-cw button { width:30px; height:30px; border-radius:50%; border:2px solid #fff; background:linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow:0 0 0 2px var(--line); cursor:pointer; }
.tt-cw button[aria-pressed=true] { box-shadow:0 0 0 2px var(--ink); }
.tt-snd { font-size:14.5px; font-weight:600; display:flex; gap:6px; align-items:center; cursor:pointer; }
.tt-snd input { accent-color:var(--pink-d); width:17px; height:17px; }
.tt-text { width:min(100%, 880px); background:#fff; border:2px solid var(--ink); border-radius:18px; padding:22px 26px; font:500 clamp(19px,2.2vw,26px)/1.6 'Onest'; letter-spacing:.01em; color:#B5AEC6; cursor:text; box-shadow:0 5px 0 var(--ink); min-height:130px; }
.tt-text:focus-within, .tt:focus-within .tt-text { border-color:var(--pink-d); }
.tt-text .ok { color:var(--ink); }
.tt-text .cur { color:var(--ink); background:var(--accent); border-radius:4px; box-shadow:0 0 0 2px var(--accent); }
.tt-text .cur.bad { background:#FF9FA8; box-shadow:0 0 0 2px #FF9FA8; }
.tt-text.done { border-color:#56B88C; box-shadow:0 5px 0 #56B88C; }
.tt-stats { display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; justify-content:center; }
.tt-stats div { text-align:center; } .tt-stats b { display:block; font:600 30px/1.1 'Unbounded'; } .tt-stats span { font-size:13px; color:var(--soft); }
.tt-kb { max-width:100%; overflow:hidden; padding:4px 4px 18px; cursor:text; }
.tt-in { position:absolute; opacity:0; width:1px; height:1px; left:50%; pointer-events:none; }

/* keycap profiles */
.prof { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.prof button { background:#fff; border:2px solid var(--line); border-radius:16px; padding:14px 10px 12px; cursor:pointer; font:600 14px 'Onest'; color:var(--ink); }
.prof button[aria-pressed=true] { border-color:var(--ink); box-shadow:0 4px 0 var(--ink); }
.prof svg { width:100%; height:80px; display:block; }
.prof-out { margin-top:22px; background:#fff; border:2px solid var(--ink); border-radius:18px; padding:22px 26px; display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; }
.prof-out h3 { font-size:28px; margin:0 0 8px; } .prof-out p { margin:0 0 8px; }
.prof-out svg { width:100%; display:block; }
.facts2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.facts2 article { background:#fff; border:2px solid var(--line); border-radius:18px; padding:22px; }
.facts2 h3 { font-size:22px; margin:0 0 8px; } .facts2 p { margin:0 0 8px; color:var(--soft); } .facts2 p:last-child { margin:0; }
.tag { display:inline-block; font:700 12px 'Onest'; padding:3px 9px; border-radius:999px; background:var(--mint); margin-right:6px; }
.tag.b { background:var(--pink); } .tag.c { background:var(--butter); }

/* sizes */
.sizes-bar { display:flex; justify-content:center; margin-bottom:22px; }
.size-kb { display:flex; justify-content:center; overflow:hidden; padding:4px 4px 20px; }
.size-kb .k.off { opacity:.12; transform:scale(.92); }
.size-kb .k { transition:opacity .35s, transform .35s; }
.size-info { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:10px auto 0; text-align:center; }
.size-info b { display:block; font:600 34px 'Unbounded'; } .size-info span { font-size:14px; color:var(--soft); }
.size-desc { max-width:720px; margin:18px auto 0; text-align:center; color:var(--soft); }

/* colorways */
.cws { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.cw { background:#fff; border:2px solid var(--line); border-radius:22px; padding:22px; display:grid; gap:14px; justify-items:center; }
.cw h3 { font-size:24px; margin:0; justify-self:start; }
.cw .kb { --u:min(22px, calc((100vw - 120px) / 15.6)); }
.vote { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; background:#fff; border:2px solid var(--ink); border-radius:22px; padding:26px; box-shadow:0 6px 0 var(--ink); }
.vote fieldset { border:0; margin:0 0 14px; padding:0; } .vote legend { font-weight:700; margin-bottom:8px; }
.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pills label { border:2px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer; font-weight:600; font-size:14.5px; }
.pills label:has(input:checked) { border-color:var(--ink); background:var(--accent); }
.pills input { position:absolute; opacity:0; }

.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cards3 a { display:block; text-decoration:none; background:#fff; border:2px solid var(--ink); border-radius:20px; padding:22px; box-shadow:0 5px 0 var(--ink); transition:transform .12s, box-shadow .12s; }
.cards3 a:hover { transform:translateY(-3px); box-shadow:0 8px 0 var(--ink); }
.cards3 h3 { font-size:22px; margin:12px 0 6px; } .cards3 p { margin:0; color:var(--soft); font-size:15.5px; }
.cards3 .mini { display:flex; justify-content:center; }
.cards3 .mini .kb { --u:13px; }

.faq { max-width:840px; }
.faq details { border-top:2px solid var(--line); padding:18px 0; } .faq details:last-child { border-bottom:2px solid var(--line); }
.faq summary { cursor:pointer; font:600 19px/1.3 'Unbounded'; list-style:none; display:flex; justify-content:space-between; gap:18px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font:500 26px/1 'Onest'; color:var(--pink-d); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:12px 0 0; color:var(--soft); max-width:44em; }
.ask ul { padding-left:20px; } .ask li { margin-bottom:8px; }
.mail { display:inline-block; font:600 clamp(20px,2.4vw,30px) 'Unbounded'; word-break:break-all; background:linear-gradient(transparent 60%, var(--pink) 60%); text-decoration:none; }

.foot { background:var(--ink); color:#D9D3E6; font-size:14.5px; padding:52px 0 36px; }
.foot-g { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.foot-b { display:flex; align-items:center; gap:1px; font:600 22px 'Unbounded'; color:#fff; margin:0 0 10px; }
.foot-h { font-weight:700; color:#fff; margin:0 0 10px; }
.foot-g a { display:block; text-decoration:none; color:#B9B1CC; margin-bottom:6px; } .foot-g a:hover { color:#fff; }
.foot-g p { margin:0; max-width:34em; }
.foot .fine { color:#8F88A3; margin:34px 0 0; padding-top:20px; border-top:1px solid #3F3656; }

@media (max-width:1020px) {
  .top nav { display:none; }
  .prof { grid-template-columns:repeat(3,1fr); } .prof-out, .vote { grid-template-columns:1fr; }
  .cards3, .cws { grid-template-columns:1fr; } .facts2 { grid-template-columns:1fr; }
  .foot-g { grid-template-columns:1fr 1fr; } .foot-g > div:first-child { grid-column:1 / -1; }
}
@media (max-width:620px) {
  body { font-size:16.5px; } .sec { padding:64px 0; } .wrap { padding:0 16px; }
  .kb { --u:calc((100vw - 44px) / 15.9); }
  .k i { font-size:calc(var(--u) * .3); padding:1px 2px; } .k.mod i { font-size:0; }
  .tt-text { padding:16px; }
  .prof { grid-template-columns:repeat(2,1fr); } .size-info b { font-size:24px; }
  .cta { padding:8px 13px; font-size:13.5px; }
}
@media (max-width:350px) { .cta { display:none; } }
@keyframes pop { from { opacity:0; transform:translateY(-6px) scale(.9); } }
.skb .k i { font-size:calc(var(--u) * .22); }
@media (max-width:620px) { .skb .k i { font-size:0; } }