.waveform-navigator{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;box-sizing:border-box;padding:0;position:relative;container-type:inline-size}.waveform-interactive{position:relative;outline:none;border-radius:8px}.waveform-interactive:focus-visible{outline:3px solid #0066cc;outline-offset:2px;box-shadow:0 0 0 4px #06c3}.waveform-canvas{display:block;width:100%;height:120px;cursor:pointer;border-radius:8px;box-shadow:0 6px 18px #1018280f;background:transparent;touch-action:none}.controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;margin-top:12px}.controls .left{justify-self:start;min-width:0}.controls .time{font-size:.95rem}.controls .center{display:flex;gap:14px;align-items:center;justify-content:center;justify-self:center}.controls .ctrl{background:transparent;border:none;border-radius:8px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}.controls .ctrl:hover{background:rgba(15,23,42,.04)}.controls .play{width:56px;height:56px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 18px #1118271f;border:none;cursor:pointer}.play-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}@keyframes waveform-spin{to{transform:rotate(360deg)}}.play-wrapper--loading:before{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:9999px;border:3px solid transparent;border-top-color:var(--play-spinner-color, #111827);border-right-color:var(--play-spinner-color, #111827);animation:waveform-spin .7s linear infinite;pointer-events:none}.controls .rewind,.controls .forward{width:44px;height:44px;border-radius:10px;box-shadow:0 1px 2px #1018280a;border:1px solid #e6e9ef}.controls .right{display:flex;align-items:center;gap:8px;position:relative;justify-self:end;min-width:0}.controls .speaker{display:flex;align-items:center;justify-content:center;padding:6px;background:transparent;border:none;cursor:pointer;border-radius:6px}.controls .speaker:hover{background:rgba(15,23,42,.04)}.controls .vol-range{width:140px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--volume-fill-color, #111827) 0%,var(--volume-fill-color, #111827) var(--volume-percent, 100%),#e5e7eb var(--volume-percent, 100%),#e5e7eb 100%);border-radius:2px;cursor:pointer;outline:none}.controls .vol-range::-webkit-slider-track{height:4px;background:transparent;border-radius:2px}.controls .vol-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--volume-fill-color, #111827);cursor:pointer;margin-top:-1px}.controls .vol-range::-moz-range-track{height:4px;background:#e5e7eb;border-radius:2px;border:none}.controls .vol-range::-moz-range-progress{height:4px;background:var(--volume-fill-color, #111827);border-radius:2px}.controls .vol-range::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--volume-fill-color, #111827);cursor:pointer}.hover-line{position:absolute;top:0;bottom:0;width:2px;background:rgba(0,0,0,.45);transform:translate(-50%);pointer-events:none}.hover-tooltip{position:absolute;top:-34px;transform:translate(-50%);background:rgba(17,24,39,.95);color:#fff;padding:6px 8px;font-size:12px;border-radius:6px;pointer-events:none;white-space:nowrap}.waveform-error{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.95);border-radius:8px;padding:20px;text-align:center;z-index:10}.waveform-error-icon{font-size:32px;margin-bottom:8px}.waveform-error-message{color:#dc2626;font-size:14px;font-weight:500;max-width:400px;line-height:1.5}@container (max-width: 640px){.controls .vol-range{width:100px}}@container (max-width: 480px){.controls,.controls .center{gap:6px}.controls .play{width:36px;height:36px}.play-wrapper--loading:before{top:-4px;right:-4px;bottom:-4px;left:-4px}.controls .rewind,.controls .forward{width:28px;height:28px}.controls .rewind svg,.controls .forward svg{width:14px;height:14px}.controls .time{font-size:.78rem}.controls .vol-range{display:none}}@media (hover: none) and (pointer: coarse){.controls .right{display:none}}.vol-popup{position:absolute;bottom:calc(100% + 8px);right:0;background:#fff;border-radius:10px;box-shadow:0 4px 16px #10182826;padding:12px 8px;display:flex;flex-direction:column;align-items:center;z-index:20}.vol-range-vertical{-webkit-appearance:none;-moz-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:4px;height:80px;cursor:pointer;border-radius:2px;outline:none;background:linear-gradient(to top,var(--volume-fill-color, #111827) 0%,var(--volume-fill-color, #111827) var(--volume-percent, 100%),#e5e7eb var(--volume-percent, 100%),#e5e7eb 100%)}.vol-range-vertical::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--volume-fill-color, #111827);cursor:pointer}.vol-range-vertical::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--volume-fill-color, #111827);cursor:pointer}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;padding:0;margin:0;background:#fff;color:#111827}#root{max-width:960px;margin:0 auto;padding:24px 18px}.tab-nav{display:flex;gap:4px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid #e5e7eb;margin-bottom:0}.tab-button{padding:6px 16px;border:1px solid transparent;border-radius:6px;background:none;cursor:pointer;font-size:14px;font-weight:500;color:#6b7280;transition:background .15s,color .15s,border-color .15s}.tab-button:hover{background:#f3f4f6;color:#111827}.tab-button--active{background:#111827;color:#fff;border-color:#111827}.tab-panel{padding:28px 0}.demo-section{padding:16px;border-radius:8px;margin-bottom:0}.demo-section h3{font-size:14px;font-weight:600;color:#374151;margin-bottom:8px}.status-item{display:flex;flex-direction:column;gap:4px}.status-label{font-size:11px;color:#4b5563;text-transform:uppercase;letter-spacing:.03em}.status-value{font-size:14px;font-weight:600;color:#111827}.status-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;width:fit-content}.badge-green{background:#f0fdf4;color:#166534}.badge-yellow{background:#fef3c7;color:#92400e}.badge-grey{background:#f3f4f6;color:#374151}.demo-button{padding:5px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;font-size:13px;font-weight:500;color:#374151;transition:background .1s}.demo-button:hover{background:#f9fafb}.demo-checkbox{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.demo-checkbox input[type=checkbox]{width:16px;height:16px;cursor:pointer}