.pill-showcase{padding:14px;border:1px solid var(--film-line);background:linear-gradient(140deg,var(--film-high),var(--card));border-radius:24px}.pill-stage{position:relative;display:grid;place-items:center;min-height:250px;padding:34px 20px;border-radius:18px;overflow:hidden;background:radial-gradient(120% 120% at 50% 115%,#3d2b66,#1b1331 52%,#120c22);border:1px solid #ffffff12;isolation:isolate}.pill-stage-glow{position:absolute;left:50%;top:58%;width:62%;height:46%;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#8b5cf655,transparent);filter:blur(6px);opacity:.85;pointer-events:none}.pill-picture{grid-area:1/1;max-width:100%;height:auto;opacity:0;transform:translateY(8px) scale(.94);transition:opacity .28s ease,transform .55s cubic-bezier(.2,.9,.25,1.08);filter:drop-shadow(0 18px 28px #0a0616aa)}.pill-stage-wrap[data-design=classic] .pill-picture[data-design=classic],.pill-stage-wrap[data-design=levelRail] .pill-picture[data-design=levelRail],.pill-stage-wrap[data-design=readingWell] .pill-picture[data-design=readingWell]{opacity:1;transform:none}.pill-choices{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:6px;margin-top:12px}.pill-choices button{border:1px solid var(--line);background:var(--card);color:var(--body);min-height:44px;padding:8px 13px;border-radius:11px;font-size:14px;font-weight:500;transition:background .2s,border-color .2s,color .2s}.pill-choices button:hover{border-color:var(--film-line);color:var(--ink)}.pill-choices button.selected{background:var(--soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);font-weight:600}.pill-notes{margin-top:14px;min-height:66px}.pill-note{display:none;margin:0;font-size:15px;line-height:1.55;color:var(--body)}.pill-note strong{color:var(--ink);font-weight:600}.pill-stage-wrap[data-design=classic] .pill-note[data-design=classic],.pill-stage-wrap[data-design=levelRail] .pill-note[data-design=levelRail],.pill-stage-wrap[data-design=readingWell] .pill-note[data-design=readingWell]{display:block}.pill-showcase>small{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:12px}.sound-story,.shortcuts-story{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;padding-block:72px;border-top:1px solid var(--line)}.shortcuts-story{grid-template-columns:1.15fr .85fr}.sound-story h2,.shortcuts-story h2{font-size:clamp(36px,3.65vw,53px);font-weight:600;letter-spacing:-.045em;line-height:1.12}.sound-story p,.shortcuts-story p{font-size:18px;line-height:1.75;color:var(--body);margin-top:22px}.sound-copy small,.shortcuts-copy small{display:block;font-size:13px;line-height:1.55;color:var(--muted);margin-top:18px}.sound-samples{min-width:0}.sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sound-grid button{position:relative;display:flex;align-items:flex-start;gap:12px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);transition:background .2s,border-color .2s,transform .2s;min-height:88px}.sound-grid button:hover{background:var(--soft);border-color:var(--film-line)}.sound-grid button[data-playing]{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 9%,var(--card))}.sound-play{position:relative;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}.sound-play-icon{width:16px;height:16px;transition:opacity .15s}.sound-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2px;opacity:0;transition:opacity .15s}.sound-wave b{width:3px;height:6px;border-radius:2px;background:currentColor}.sound-grid button[data-playing] .sound-play-icon{opacity:0}.sound-grid button[data-playing] .sound-wave{opacity:1}.sound-grid button[data-playing] .sound-wave b{animation:sound-bar .55s ease-in-out infinite alternate}.sound-grid button[data-playing] .sound-wave b:nth-child(2){animation-delay:.08s}.sound-grid button[data-playing] .sound-wave b:nth-child(3){animation-delay:.16s}.sound-grid button[data-playing] .sound-wave b:nth-child(4){animation-delay:.24s}.sound-grid button[data-playing] .sound-wave b:nth-child(5){animation-delay:.32s}.sound-grid button[data-playing=stop] .sound-wave b{animation-duration:.35s}.sound-grid button[data-playing]:after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--accent);opacity:0;animation:sound-ring .9s ease-out}@keyframes sound-bar{0%{height:5px}to{height:18px}}@keyframes sound-ring{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.04)}}.sound-text{min-width:0}.sound-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:15px;font-weight:600;line-height:1.3}.sound-name em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:2px 7px;border-radius:99px}.sound-grid small{display:block;font-size:13px;line-height:1.45;color:var(--body);margin-top:4px}.sound-samples>p{font-size:13px;line-height:1.5;color:var(--muted);margin-top:12px;min-height:20px}.key-picker{padding:14px;border:1px solid var(--film-line);border-radius:24px;background:linear-gradient(140deg,var(--film-high),var(--card));min-width:0}.kp-stage{position:relative;border-radius:18px;background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--accent) 16%,var(--film-well)),var(--film-well) 70%);border:1px solid var(--line);padding:46px 18px 36px;overflow:hidden}.kp-keys{display:flex;justify-content:center;align-items:flex-end;gap:3.2%}.kp-key{position:relative;flex:0 1 17%;max-width:124px;min-width:0;padding:0;border:0;background:none;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .35s cubic-bezier(.2,.8,.25,1)}.kp-key:hover{transform:translateY(-3px)}.kp-key[data-state=pressed]{transform:translateY(2px)}.kp-key:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.kp-key-glow{position:absolute;left:50%;bottom:6%;width:150%;height:90%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 60%,transparent),transparent);opacity:0;transition:opacity .45s ease;pointer-events:none;z-index:-1}.kp-key[data-state=pressed] .kp-key-glow{opacity:1}.kp-key-art{position:relative;display:block;width:100%;aspect-ratio:222/217}.kp-key-art img{position:absolute;left:0;width:100%;height:auto;display:block}.kp-base{bottom:0}.kp-cap{top:0;transition:transform .38s cubic-bezier(.25,.9,.3,1.15)}.kp-key[data-state=pressed] .kp-cap{transform:translateY(9%)}.kp-key-shadow{position:absolute;left:8%;right:8%;bottom:-6px;height:14px;border-radius:50%;background:#1a102e;opacity:.22;filter:blur(6px);transition:opacity .35s,transform .35s;z-index:-1}.kp-key[data-state=pressed] .kp-key-shadow{opacity:.1;transform:scaleX(.9)}.kp-caption{margin:12px 6px 2px;font-size:15px;line-height:1.5;color:var(--body);min-height:46px}.kp-caption:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}html[data-theme=dark] .kp-key-shadow{background:#000;opacity:.4}@media(max-width:999px){.sound-story,.shortcuts-story{grid-template-columns:1fr;gap:34px;padding-block:54px}.shortcuts-story .key-picker{order:1}.shortcuts-copy{order:0}.sound-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.pill-showcase{padding:10px;border-radius:19px}.pill-stage{min-height:200px;padding:26px 14px}.pill-choices button{font-size:13px;min-height:40px;padding:6px 10px}.pill-note{font-size:14px}.sound-story h2,.shortcuts-story h2{font-size:36px}.sound-story p,.shortcuts-story p{font-size:17px;line-height:1.65;margin-top:18px}.sound-story,.shortcuts-story{padding-block:44px;gap:28px}.sound-grid{gap:8px}.sound-grid button{padding:12px;min-height:80px}.sound-name{font-size:14px}.sound-grid small{font-size:12px}.key-picker{padding:10px;border-radius:19px}.kp-stage{padding:30px 10px 26px}.kp-keys{gap:2.4%}.kp-key{flex:0 1 18.5%}.kp-caption{font-size:14px}}@media(prefers-reduced-motion:reduce){.pill-picture,.kp-cap,.kp-key,.kp-key-glow,.kp-key-shadow{transition:none}.sound-grid button[data-playing] .sound-wave b,.sound-grid button[data-playing]:after{animation:none}}