/* "Listen" cassette player + word-by-word read-along (Majlis Talks). Charcoal shell, white label, Ardh-toned stripes. */
.cs,.cs-pill{--cs-ink:var(--n-ink,#111111);--cs-grey:var(--n-grey,#8a8a86);--cs-line:color-mix(in srgb,var(--cs-ink) 16%,transparent)}
.cs{position:relative;width:100%;max-width:26rem;margin:1.15rem 0 1.25rem;font-family:var(--font);color:var(--cs-ink);
  break-inside:avoid;-webkit-column-break-inside:avoid;text-indent:0;-webkit-user-select:none;user-select:none}
.cs[hidden]{display:none}
.cs p{margin:0;text-indent:0;max-width:none}
.cs-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(17,17,17,.13)) drop-shadow(0 2px 3px rgba(17,17,17,.1))}
.cs-svg text{font-family:"Montserrat",var(--font);fill:#111111}
.cs-svg .cs-ar{font-family:"Noto Naskh Arabic","Geeza Pro","Arabic Typesetting",serif;font-weight:500}
.cs-kick{font-size:9.6px;font-weight:600;letter-spacing:.2em}
.cs-ar-kick{font-size:12px}
.cs-title{font-size:19px;font-weight:700;letter-spacing:-.02em}
.cs-num{font-size:8.6px;font-weight:600;letter-spacing:.22em;fill:#6b645a!important;font-variant-numeric:tabular-nums}
.cs-side{font-size:7.8px;font-weight:700;letter-spacing:.14em;fill:#f7f2e6!important}
.cs-ar-side{font-size:11px;fill:#3b362f!important}
.cs-time{font-size:10.5px;font-weight:500;fill:#5f594f!important;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cs-fine{font-size:7.6px;font-weight:500;letter-spacing:.16em;fill:#6b645a!important}
/* shell skins: cream (default) and smoked clear (?shell=clear) */
.cs-svg .sh-body{fill:url(#cs-g-cream)}
.cs-svg .sh-tab{fill:url(#cs-g-cream-tab);stroke:#111111;stroke-opacity:.12}
.cs-svg .sh-grain{opacity:.45;mix-blend-mode:multiply}
.cs-svg .sh-guts{display:none}
.cs-svg .lb-paper{fill:#f7f2e6}
.cs-svg .lb-band{fill:#8fada8}
.cs-svg .lb-pill{fill:#111111}
.cs-svg .win{fill:#3a332c}
.cs--clear .cs-svg .sh-body{fill:url(#cs-g-smoke)}
.cs--clear .cs-svg .sh-tab{fill:url(#cs-g-smoke-tab);stroke:#ffffff;stroke-opacity:.12}
.cs--clear .cs-svg .sh-grain{opacity:.18}
.cs--clear .cs-svg .sh-guts{display:inline}
.cs--clear .cs-svg .win{fill:#2c2a27;fill-opacity:.85}
.cs--clear .cs-svg{filter:drop-shadow(0 10px 14px rgba(17,17,17,.18))}
.cs-svg .reel{transform-box:fill-box;transform-origin:center;animation:cs-spin 1.9s linear infinite;animation-play-state:paused}
.cs-svg .reel.r2{animation-duration:2.4s}
.cs.is-playing .cs-svg .reel{animation-play-state:running}
.cs-svg .pack{transition:r .35s linear}
@keyframes cs-spin{to{transform:rotate(-360deg)}}
.cs-shell{position:relative}
.cs-hit{position:absolute;display:block;margin:0;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* controls: a slim row under the shell, so the cassette keeps its real proportions */
.cs-ctl{display:flex;align-items:center;gap:.4rem;margin-top:.7rem}
.cs-btn{flex:none;display:grid;place-items:center;width:2rem;height:2rem;margin:0;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--cs-ink) 22%,transparent);background:var(--n-page,#fcfcfa);color:var(--cs-ink);
  -webkit-tap-highlight-color:transparent;transition:background-color .2s,transform .15s,border-color .2s}
.cs-btn svg{width:1.05rem;height:1.05rem;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.cs-btn .f{fill:currentColor}
.cs-play{width:2.35rem;height:2.35rem;background:var(--cs-ink);color:var(--n-page,#fcfcfa);border-color:var(--cs-ink)}
.cs-play svg{width:1.15rem;height:1.15rem}
@media (hover:hover){.cs-btn:hover{border-color:color-mix(in srgb,var(--cs-ink) 55%,transparent)}.cs-play:hover{background:color-mix(in srgb,var(--cs-ink) 85%,#7a6a52)}}
.cs-btn:active{transform:scale(.92)}
.cs-btn:focus-visible,.cs-bar:focus-visible{outline:1.5px solid #8fada8;outline-offset:2px}
.cs .g-pause,.cs.is-playing .g-play,.cs .g-mute,.cs.is-muted .g-snd,.cs .g-load,.cs.is-loading .g-play,.cs.is-loading .g-pause{display:none}
.cs.is-playing .g-pause,.cs.is-muted .g-mute{display:inline}
.cs.is-loading .g-load{display:inline;transform-box:fill-box;transform-origin:center;animation:cs-spin .9s linear infinite reverse}
.cs-bar{position:relative;flex:1;min-width:2.5rem;height:1.6rem;margin:0 .3rem;cursor:pointer;touch-action:none;border-radius:4px}
.cs-bar::before,.cs-bar i{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:color-mix(in srgb,var(--cs-ink) 16%,transparent)}
.cs-bar i{background:var(--cs-ink);transform-origin:left center;transform:scaleX(var(--p,0))}
.cs-bar b{position:absolute;top:50%;left:calc(var(--p,0)*100%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--n-page,#fcfcfa);border:1.5px solid var(--cs-ink);box-sizing:border-box}
.cs-tt{flex:none;font-size:.7rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--cs-grey);letter-spacing:.02em;white-space:nowrap}
.cs-sl{margin:0 .25em;opacity:.6}
.cs-n{margin-top:.55rem!important;font-size:.66rem;color:var(--cs-grey);line-height:1.3;letter-spacing:.02em}
/* floating mini tape (only while listening and the big one is off screen) */
.cs-pill{position:fixed;z-index:60;left:50%;bottom:calc(var(--cs-b,16px) + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:.45rem;
  padding:.42rem .75rem .42rem .55rem;border:0;border-radius:999px;background:#1e1e1d;color:#ecebe5;
  font:500 .68rem/1 var(--font);letter-spacing:.04em;font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 8px 20px -10px rgba(17,17,17,.55);
  opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.cs-pill.is-shown{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.cs-pill svg{width:2.1rem;height:auto;display:block}
.cs-pill .ln{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke}
.cs-pill .thin{opacity:.6}
.cs-pill .reel{transform-box:fill-box;transform-origin:center;animation:cs-spin 1.6s linear infinite;animation-play-state:paused}
.cs-pill.is-playing .reel{animation-play-state:running}
.cs-pill:focus-visible{outline:1px solid var(--cs-ink);outline-offset:3px}
/* read-along */
.cw{border-radius:2px;transition:background-color .3s ease,color .5s ease,box-shadow .3s ease}
.cs-on .cw{cursor:pointer}
@media (hover:hover){.cs-on .cw:hover{text-decoration:underline;text-decoration-color:var(--n-grey,#8a8a86);text-decoration-thickness:1px;text-underline-offset:.18em}}
.cw.cw-read{color:color-mix(in srgb,var(--n-ink,#111111) 58%,transparent)}
.cw.cw-now{color:var(--n-ink,#111111);background:color-mix(in srgb,#d9bd85 45%,transparent);
  box-shadow:0 0 0 .12em color-mix(in srgb,#d9bd85 45%,transparent);-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (max-width:760px){.cs{margin:1.1rem 0 1.2rem}}
@media (prefers-reduced-motion:reduce){.cs-svg .reel,.cs-pill .reel{animation:none}.cs-hit,.cw{transition:none}}