.sm-narrator{--bar-bg:rgba(8,12,22,.92);--border:rgba(255,255,255,.12);--border-hi:rgba(255,255,255,.3);--icon:#fff;position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:10000;display:inline-flex;align-items:center;gap:.4rem;width:34rem;max-width:calc(100vw - 2rem);padding:.5rem .7rem;border-radius:999px;background:var(--bar-bg);border:1px solid var(--border);font-family:"DM Sans",system-ui,sans-serif;color:var(--icon);backdrop-filter:blur(16px);box-shadow:0 8px 32px rgba(0,0,0,.6);transition:width .25s ease,padding .25s ease}
.sm-narrator:hover{border-color:var(--border-hi)}
.sm-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--icon);padding:.15rem;cursor:pointer;transition:opacity .2s}
.sm-btn:hover{opacity:.7}
.sm-btn svg{width:1.3rem;height:1.3rem;fill:var(--icon)}
.sm-narrator .sm-play svg{width:1.55rem;height:1.55rem}
.sm-seek{display:flex;align-items:center;gap:.4rem;flex:1;min-width:0;font-size:.75rem;color:var(--icon);font-variant-numeric:tabular-nums}
.sm-time-duration{display:none}
.sm-range{flex:1;accent-color:var(--icon);cursor:pointer}
.sm-narrator .sm-speed{color-scheme:dark;background:transparent;border:1px solid var(--border);color:var(--icon);border-radius:999px;padding:.3rem .4rem;min-width:3.5rem;text-align:center;font-family:inherit;font-size:.85rem;font-variant-numeric:tabular-nums;cursor:pointer}
.sm-narrator .sm-speed:hover{border-color:var(--border-hi)}
.sm-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;background:transparent;border:1px solid var(--border);color:var(--icon);border-radius:999px;padding:.3rem .4rem;min-width:3.5rem;height:100%;box-sizing:border-box;font-family:inherit;font-size:.85rem;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:border-color .2s,color .2s;white-space:nowrap;flex-shrink:0}
.sm-toggle svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}
.sm-toggle:hover{border-color:var(--border-hi)}
.sm-toggle.is-off{color:rgba(255,255,255,.4);border-color:rgba(255,255,255,.08)}
.sm-narrator.sm-collapsed{width:auto;min-width:0;gap:0;padding:.4rem .7rem}
.sm-narrator.sm-collapsed > *:not(.sm-toggle){display:none !important}
@media (max-width: 640px){
  .sm-narrator{transform:translateX(-50%) scale(0.75);transform-origin:center bottom;bottom:.5rem}
}