.sounds-page{width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:clamp(1rem,2.5vw,2rem) 0 clamp(3.5rem,7vw,6rem)}
.sounds-hero{margin-bottom:1.15rem}.sounds-page__note{display:flex;align-items:center;gap:.65rem;margin:0 0 1.5rem;padding:.8rem 1rem;border:1px solid rgba(73,55,38,.14);border-radius:999px;background:rgba(255,255,255,.72);color:#5b4a3b;font-size:.92rem;width:max-content;max-width:100%}
.sounds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.sound-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;padding:1.25rem;border:1px solid rgba(73,55,38,.14);border-radius:1.1rem;background:#fff;box-shadow:0 12px 32px rgba(48,35,23,.06);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.sound-card:hover{transform:translateY(-2px);border-color:rgba(126,84,45,.3);box-shadow:0 16px 38px rgba(48,35,23,.09)}
.sound-card.is-active{border-color:rgba(126,84,45,.48)}.sound-card__play{position:relative;display:grid;place-items:center;width:3.2rem;height:3.2rem;margin:.1rem 0 0;border:0;border-radius:50%;background:#6f4b2f;color:#fff;box-shadow:0 8px 20px rgba(74,45,25,.2);cursor:pointer}.sound-card__play:hover{background:#563820}.sound-card__play:focus-visible,.sound-card__seek:focus-visible{outline:3px solid rgba(32,105,155,.42);outline-offset:3px}.sound-card__play-icon{width:0;height:0;border-top:.43rem solid transparent;border-bottom:.43rem solid transparent;border-left:.7rem solid currentColor;margin-left:.12rem}.sound-card.is-playing .sound-card__play-icon{width:.72rem;height:.82rem;border:0;margin:0;background:linear-gradient(90deg,currentColor 0 30%,transparent 30% 70%,currentColor 70% 100%)}
.sound-card__content{min-width:0}.sound-card__title{margin:0 0 .35rem;color:#30251d;font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.25}.sound-card__description{margin:0;color:#66584c;line-height:1.55}.sound-card__timeline{display:grid;grid-template-columns:2.75rem minmax(0,1fr) 2.75rem;align-items:center;gap:.55rem;margin-top:1rem}.sound-card__time{font-variant-numeric:tabular-nums;color:#75685d;font-size:.78rem;text-align:center}.sound-card__seek-wrap{position:relative;height:2.2rem}.sound-waveform{position:absolute;inset:.15rem 0;overflow:hidden}.sound-waveform__layer{display:flex;align-items:center;gap:2px;width:100%;height:100%}.sound-waveform__layer span{flex:1 1 0;height:max(2px,calc(var(--amplitude) * 100%));border-radius:999px;background:#c9beb3}.sound-waveform__progress{position:absolute;inset:0;width:100%;overflow:hidden;clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);will-change:clip-path}.sound-waveform__layer--active{width:100%;min-width:100%;color:#6f4b2f}.sound-waveform__layer--active span{background:#6f4b2f}.sound-card__seek{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.sound-card__error{margin:.65rem 0 0;color:#a23b32;font-size:.88rem}.sounds-page__empty{padding:1.1rem;border:1px solid rgba(73,55,38,.14);border-radius:.8rem;background:#fff;color:#66584c}
@media(max-width:820px){.sounds-grid{grid-template-columns:1fr}}@media(max-width:520px){.sounds-page{width:min(100% - 1.25rem,1180px)}.sound-card{gap:.75rem;padding:1rem}.sound-card__play{width:2.9rem;height:2.9rem}.sound-card__timeline{grid-template-columns:2.4rem minmax(0,1fr) 2.4rem;gap:.35rem}.sound-waveform__layer{gap:1px}.sounds-page__note{width:100%;border-radius:.8rem}}
@media(prefers-reduced-motion:reduce){.sound-card{transition:none}.sound-card:hover{transform:none}}