.sounds-hero{padding-bottom:4px}.sounds-board{padding-top:24px}.board{--progress:0;flex-direction:column;gap:14px;display:flex}.pads{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;display:grid}.pads>li{min-width:0;display:flex}.pad{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);min-width:0;min-height:150px;color:var(--text);font:inherit;text-align:left;cursor:pointer;flex-direction:column;flex:1;gap:8px;padding:14px;transition:border-color .15s,background-color .15s,transform 80ms;display:flex;position:relative;overflow:hidden}.pad:hover{border-color:color-mix(in srgb, var(--tone) 60%, transparent);background:color-mix(in srgb, var(--tone) 8%, var(--surface))}.pad:active{transform:scale(.98)}.pad:focus-visible{outline:2px solid var(--tone);outline-offset:2px}.pad[data-on=true]{border-color:var(--tone);background:color-mix(in srgb, var(--tone) 18%, var(--surface))}.pad-top{justify-content:space-between;align-items:flex-start;display:flex}.pad-emoji{font-size:clamp(2.2rem,7vw,3rem);line-height:1.1}.pad[data-on=true] .pad-emoji{animation:.9s ease-in-out infinite pad-wobble}.pad-key{border:1px solid var(--border-strong);border-radius:var(--r-sm);min-width:24px;color:var(--text-muted);font-family:var(--font-mono);text-align:center;padding:1px 6px;font-size:.76rem;display:none}.pad-name{margin-top:auto;font-size:clamp(1rem,2.4vw,1.14rem);font-weight:700;line-height:1.2}.pad-state{color:var(--text-muted);align-items:center;gap:5px;font-size:.82rem;font-weight:600;display:inline-flex}.pad[data-on=true] .pad-state,.pad:hover .pad-state{color:var(--text)}.pad-state svg{fill:currentColor;width:13px;height:13px}.pad-bar{background:var(--tone);opacity:0;height:4px;transform:scaleX(var(--progress));transform-origin:0;position:absolute;bottom:0;left:0;right:0}.pad[data-on=true] .pad-bar{opacity:1}.deck{z-index:5;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:color-mix(in srgb, var(--surface) 92%, transparent);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(12px);grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 12px;display:grid;position:sticky;bottom:10px}.deck-now{align-items:center;gap:10px;min-width:0;display:flex}.deck-emoji{font-size:1.7rem;line-height:1}.deck-text{flex-direction:column;min-width:0;display:flex}.deck-text strong{text-overflow:ellipsis;white-space:nowrap;font-size:.98rem;overflow:hidden}.deck-text span{color:var(--text-muted);font-family:var(--font-body);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;overflow:hidden}.deck-wave{width:100%;height:40px;color:var(--tone);display:none}.deck-controls{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.deck-button{border:1px solid var(--border-strong);border-radius:var(--r-md);min-width:42px;height:42px;color:var(--text);font:inherit;cursor:pointer;background:0 0;flex:none;justify-content:center;align-items:center;gap:6px;padding:0 10px;font-size:.86rem;font-weight:600;display:inline-flex}.deck-button:hover{background:var(--surface-hover)}.deck-button[data-on=true]{border-color:var(--accent);color:var(--accent)}.deck-button svg{width:16px;height:16px}.deck-volume{min-width:90px;color:var(--text-muted);flex:90px;align-items:center;gap:8px;display:flex}.deck-volume svg{flex:none;width:16px;height:16px}.deck-volume input,.deck-seek{width:100%;min-width:0;accent-color:var(--accent)}.deck-seek{grid-column:1/-1;height:18px;margin:0}.sounds-howto{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(56px,8vw,96px);display:grid}.sounds-steps{flex-direction:column;align-items:flex-start;gap:16px;min-width:0;display:flex}.sounds-steps h2{font-family:var(--font-display);font-size:clamp(2rem,4.6vw,3rem);font-weight:700;line-height:1.05}.sounds-steps ol{flex-direction:column;gap:14px;list-style:none;display:flex}.sounds-steps li{gap:12px;display:flex}.sounds-steps h3{font-size:1.05rem;font-weight:700}.sounds-step-number{background:var(--accent);width:30px;height:30px;color:var(--accent-ink);border-radius:50%;flex:none;justify-content:center;align-items:center;font-weight:700;display:flex}.sounds-mock{align-self:center}.sounds-mock p{margin-bottom:8px}.sounds-mock-buttons{flex-wrap:wrap;gap:8px;display:flex}.sounds-mock-buttons span{color:#fff;background:#4e5058;border-radius:4px;padding:6px 12px;font-size:.86rem;font-weight:500}.sounds-mock .sounds-mock-note{color:#949ba4;margin:10px 0 0;font-size:.76rem}@keyframes pad-wobble{0%,to{transform:rotate(-5deg)scale(1.04)}50%{transform:rotate(5deg)scale(1.1)}}@media (prefers-reduced-motion:reduce){.pad[data-on=true] .pad-emoji{animation:none}}@media (hover:hover) and (pointer:fine){.pad-key{display:inline-block}}@media (min-width:720px){.pads{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pad{min-height:176px;padding:18px}.deck{grid-template-columns:minmax(170px,240px) minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px}.deck-wave{display:block}.deck-volume{flex:0 0 110px}}@media (min-width:900px){.sounds-howto{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}@media (max-width:400px){.deck-surprise span{display:none}}