section.hear-the-difference-section{max-width:1500px;margin:auto}.hear-the-difference-section{width:100vw;position:relative}.hear-the-difference-section *{box-sizing:border-box}.hear-the-difference-container{margin:0 auto}.hear-the-difference-heading{font-family:inherit;line-height:1.1;margin:0;text-align:center;transition:font-size .3s ease}.audio-player-container{position:relative;overflow:hidden;transition:all .5s ease}.player-controls{display:flex;align-items:center;width:100%}.play-button{border:none;cursor:pointer;transition:all .3s ease;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.play-button:hover{transform:scale(1.05)}.play-button:active{transform:scale(.95)}.play-button:focus{outline:2px solid currentColor;outline-offset:2px}.play-button:disabled{cursor:not-allowed;opacity:.5}.play-button svg{transition:transform .2s ease}.play-button:hover svg{transform:scale(1.1)}.waveform-container{flex:1;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;width:100%;min-width:0;gap:1px}.waveform-bar{transition:all .15s ease;border-radius:0;min-height:4px;flex:1;min-width:2px;max-width:6px}.waveform-bar:hover{opacity:.8}.status-indicator{text-align:center;margin-bottom:16px}.status-badge,.mode-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:9999px;font-size:14px;font-weight:500;transition:all .3s ease;border-width:1px;border-style:solid}.status-badge:hover,.mode-badge:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.mode-indicator{text-align:center;margin-bottom:16px}.toggle-container{display:flex;align-items:center;justify-content:center}.toggle-label{transition:color .3s ease;-webkit-user-select:none;user-select:none;cursor:pointer}.toggle-label:hover{opacity:.8}.toggle-switch{position:relative;border:none;cursor:pointer;transition:all .3s ease;-webkit-user-select:none;user-select:none}.toggle-switch:hover{transform:scale(1.05)}.toggle-switch:active{transform:scale(.95)}.toggle-switch:focus{outline:2px solid currentColor;outline-offset:2px}.toggle-slider{position:absolute;top:2px;background-color:#fff;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 4px #0000001a}.toggle-slider:hover{box-shadow:0 4px 8px #00000026}.progress-container{margin-top:24px;width:100%;background-color:#e5e7eb;border-radius:9999px;overflow:hidden}.progress-bar{height:100%;border-radius:9999px;width:0%;transition:all .15s ease;background-image:linear-gradient(90deg,currentColor 0%,currentColor 100%)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@media (max-width: 767px){.play-button{width:var(--play-button-size-mobile, 64px)!important;height:var(--play-button-size-mobile, 64px)!important}.waveform-container{height:var(--waveform-height-mobile, 64px)!important}.toggle-container{gap:16px}.toggle-label{font-size:14px}.status-badge,.mode-badge{font-size:12px;padding:6px 12px}}@media (min-width: 768px){.play-button{width:var(--play-button-size-desktop, 80px)!important;height:var(--play-button-size-desktop, 80px)!important}.waveform-container{height:var(--waveform-height-desktop, 80px)!important}.toggle-container{gap:24px}.toggle-label{font-size:16px}}@media (min-width: 1024px){.player-controls{gap:48px}.toggle-container{gap:32px}}@media (prefers-contrast: high){.play-button,.toggle-switch{border:2px solid currentColor}.waveform-bar{border:1px solid currentColor}}@media (prefers-reduced-motion: reduce){.play-button,.toggle-switch,.toggle-slider,.waveform-bar,.progress-bar,.status-badge,.mode-badge{transition:none}.animate-spin,.animate-pulse{animation:none}}@media print{.hear-the-difference-section{display:none}}.play-button:focus-visible,.toggle-switch:focus-visible{outline:3px solid #2563eb;outline-offset:2px}.loading .waveform-bar{animation:pulse 1.5s ease-in-out infinite}.loading .play-button{pointer-events:none}.error .waveform-bar{opacity:.5}.error .status-badge{background-color:#fef2f2!important;color:#dc2626!important;border-color:#fecaca!important}@media (prefers-color-scheme: dark){.progress-container{background-color:#374151}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/*# sourceMappingURL=/cdn/shop/t/4/assets/hear-the-difference.css.map */