.wf{border-top:1px solid rgba(var(--brass-rgb), .14);transition:border-color var(--dur-base) var(--ease-out-strong);align-items:center;gap:14px;padding:14px 0 4px;display:flex}.wf.is-playing{border-top-color:rgba(var(--brass-rgb), .34)}.wf-btn{border:1px solid var(--brass);width:36px;height:36px;color:var(--brass);cursor:pointer;transition:background var(--dur-base) var(--ease-out-strong), color var(--dur-base) var(--ease-out-strong), transform var(--dur-press) var(--ease-out-strong);background:0 0;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}@media (hover:hover) and (pointer:fine){.wf-btn:hover{background:var(--brass);color:var(--bg)}}.wf-btn:active{transform:scale(.94)}.wf-btn:after{content:"";position:absolute;inset:-8px}.wf-btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.wf.is-playing .wf-btn{background:var(--brass);color:var(--bg)}.wf-bars{cursor:pointer;outline:none;flex:1;align-items:center;gap:2px;min-width:0;height:42px;display:flex;position:relative;overflow:hidden}.wf-bars:focus-visible{box-shadow:0 0 0 2px rgba(var(--brass-rgb), .4);border-radius:3px}.wf-bar{min-width:2px;transition:background var(--dur-fast) var(--ease-out-strong);background:#f1eadb61;border-radius:1px;flex:1}.wf-bar.is-played{background:var(--brass)}@media (hover:hover) and (pointer:fine){.wf-bars:hover .wf-bar:not(.is-played){background:#f1eadb8c}}.wf-playhead{width:1.5px;box-shadow:0 0 4px rgba(var(--brass-rgb), .5);pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-out-strong);background:#f1eadbeb;border-radius:1px;position:absolute;top:10%;bottom:10%;transform:translate(-50%)}.wf.is-playing .wf-playhead,.wf-bars:active .wf-playhead{opacity:1}@media (hover:hover) and (pointer:fine){.wf:hover .wf-playhead{opacity:1}}.wf.is-loading .wf-bar{animation:wf-pulse 1.6s var(--ease-out-strong) infinite}.wf.is-loading .wf-bar:nth-child(2n){animation-delay:80ms}.wf.is-loading .wf-bar:nth-child(3n){animation-delay:.16s}.wf.is-loading .wf-bar:nth-child(5n){animation-delay:.24s}@keyframes wf-pulse{0%,to{opacity:.65}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.wf.is-loading .wf-bar{animation:none}}.wf-time{letter-spacing:.08em;color:#f1eadb8c;font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0;min-width:70px;font-size:.7rem}.wf-time-current{color:var(--brass);font-weight:500}.wf-time-sep{opacity:.4;margin:0 2px}.wf-time-duration{color:#f1eadb8c}@media (max-width:540px){.wf{gap:10px;padding:12px 0 4px}.wf-btn{width:32px;height:32px}.wf-bars{height:36px}.wf-time{min-width:60px;font-size:.65rem}}
