.apl{background:var(--surface);border-radius:12px;align-items:center;gap:12px;width:100%;min-width:0;padding:10px 12px;display:flex}.apl .apl-play{background:var(--ink);width:34px;height:34px;color:var(--paper);cursor:pointer;border:0;border-radius:50%;flex:0 0 34px;justify-content:center;align-items:center;padding:0;display:flex}.apl .apl-play:hover{background:var(--ink);color:var(--paper);opacity:.86}.apl .apl-play:disabled{opacity:.4;cursor:default}.apl .apl-play svg{width:12px;height:12px}.apl .apl-play svg path:first-child:last-child{transform:translate(.5px)}.apl-track{flex:1;min-width:0;height:36px;position:relative}.apl-wave{width:100%;height:100%;color:var(--ink-4);align-items:center;gap:2px;display:flex}.apl-wave>i{background:currentColor;border-radius:2px;flex:1;min-width:1px;transition:background .12s}.apl-wave>i.is-played{background:var(--ink-2)}.apl-seek{opacity:0;cursor:pointer;appearance:none;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}.apl-seek:disabled{cursor:default}.apl-seek:focus-visible{opacity:0}.apl-track:focus-within{outline:2px solid var(--signal,var(--ink-3));outline-offset:3px;border-radius:4px}.apl-time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-3);flex:none;font-size:10px;font-weight:500}.apl-el{display:none}.apl--dark{background:#ffffff14}.apl--dark .apl-play{background:var(--paper);color:var(--ink)}.apl--dark .apl-wave{color:#ffffff59}.apl--dark .apl-wave>i.is-played{background:#ffffffeb}.apl--dark .apl-time{color:#ffffffd1}