/* A single cassette transport across the story, the transcript and the review. */
.tape-player {
  --tape-ink:#214740; --tape-amber:#f8ce78; --tape-progress:0; --tape-filled:0%; --tape-angle:0deg;
  container:story-deck / inline-size;
  width:min(100%,720px); margin:12px 0; color:var(--tape-ink);
}
.tape-player [hidden] {display:none!important}
.tape-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tape-machine {
  background:#edf3e8; border:1.5px solid #547768; border-radius:12px;
  box-shadow:0 3px #547768;
}
.tape-strip {
  display:grid; grid-template-columns:clamp(86px,16cqi,116px) auto minmax(0,1fr) 42px;
  grid-template-areas:"cassette play clock settings" "cassette seek seek settings";
  align-items:center; column-gap:12px; row-gap:0; padding:8px 13px 7px 9px;
}
.tape-cartridge {grid-area:cassette;position:relative;align-self:center;width:100%;color:#254c46}
.tape-drawing {display:block;width:100%;height:auto}
.tape-hub {transform-box:fill-box;transform-origin:center;transform:rotate(var(--tape-angle))}
.tape-pack-left {r:calc(18px - 4px * var(--tape-progress))}
.tape-pack-right {r:calc(14px + 4px * var(--tape-progress))}
.tape-inscription {
  position:absolute; inset:10% 10% auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;
  font:900 clamp(.59rem,1.9cqi,.75rem)/1.1 TonSerif,Georgia,serif;
}
.tape-play,.tape-settings,.tape-speaker {
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--tape-ink);background:#fafaf0;border:1px solid #889e89;
  touch-action:manipulation;
}
.tape-play {
  grid-area:play;justify-self:start;gap:7px;min-height:39px;padding:4px 12px 4px 5px;
  border:1.5px solid #68634a;border-radius:24px;background:#ffdfa1;box-shadow:0 2px #807454;
  font:750 .9rem/1.12 "Segoe UI",sans-serif;transition:transform .13s,box-shadow .13s;
}
.tape-play-disc {display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:50%;background:#294d45;color:#fff4d0}
.tape-glyph {display:block;width:20px;height:20px;fill:none}
.tape-play .tape-glyph {width:15px;height:15px}
.tape-clock {
  grid-area:clock;justify-self:end;white-space:nowrap;color:#52685b;
  font:550 clamp(.87rem,3.3cqi,1.1rem)/1.2 Consolas,"Courier New",monospace;
  font-variant-numeric:tabular-nums;
}
.tape-clock strong {color:#1d423c;font-weight:750}
.tape-divider {padding:0 .09em;color:#65755e}
.tape-seeker {grid-area:seek;display:flex;align-items:center;min-width:0;height:25px;margin:0}
.tape-seeker input,.tape-volume-slider input {
  appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;height:100%;margin:0;padding:0;
  background:transparent;border:0;box-shadow:none;accent-color:#36705f;cursor:pointer
}
.tape-seeker input::-webkit-slider-runnable-track {height:6px;border-radius:4px;background:linear-gradient(to right,#39755e var(--tape-filled),#bdcaba var(--tape-filled))}
.tape-seeker input::-moz-range-track {height:6px;border-radius:4px;background:#bdcaba}
.tape-seeker input::-moz-range-progress {height:6px;border-radius:4px;background:#39755e}
.tape-seeker input::-webkit-slider-thumb {-webkit-appearance:none;width:12px;height:17px;margin-top:-5.5px;border:1.5px solid #244b3f;border-radius:4px;background:#ffdd91}
.tape-seeker input::-moz-range-thumb {width:10px;height:15px;border:1.5px solid #244b3f;border-radius:4px;background:#ffdd91}
.tape-settings {grid-area:settings;width:42px;height:42px;border-radius:50%;background:transparent}
.tape-settings[aria-expanded=true],.tape-speaker[aria-pressed=true] {background:#d1e4d0;border-color:#486d5e}
.tape-player[data-muted=true] .tape-settings {border-style:dashed}
.tape-adjustments {display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap;border-top:1px solid #afc4ae;padding:5px 12px;background:#f7f8ef;border-radius:0 0 12px 12px}
.tape-speed,.tape-volume,.tape-volume-slider {display:flex;align-items:center;gap:6px;min-width:0;font-size:.83rem;font-weight:650}
.tape-speed select {min-height:36px;padding:3px;border:1px solid #9ab19e;border-radius:5px;background:#fffdf5;color:var(--tape-ink)}
.tape-speaker {border-radius:7px;width:36px;height:36px}
.tape-volume-slider input {width:72px;height:30px;appearance:auto;-webkit-appearance:auto}
.tape-machine :is(button,input,select):focus-visible {outline:3px solid #a5560a;outline-offset:2px}
.tape-machine :disabled {opacity:.55;cursor:default}
.tape-error {margin:0;padding:6px 12px;color:#792e19;font-size:.86rem}
.tape-glyph-pause,.tape-glyph-again,.tape-glyph-quiet {display:none}
.tape-player[data-state=playing] .tape-glyph-start,.tape-player:is([data-state=ended],[data-state=error]) .tape-glyph-start,.tape-player[data-muted=true] .tape-glyph-loud{display:none}
.tape-player[data-state=playing] .tape-glyph-pause,.tape-player:is([data-state=ended],[data-state=error]) .tape-glyph-again,.tape-player[data-muted=true] .tape-glyph-quiet{display:block}
.tape-player[data-state=playing] .tape-play,.tape-play:active {transform:translateY(2px);box-shadow:0 0 #807454;background:#f4cf87}
@media(hover:hover) and (pointer:fine){
 .tape-player:not([data-state=playing]) .tape-play:not(:active):hover{transform:translateY(-1px);box-shadow:0 3px #807454}
 .tape-settings:hover,.tape-speaker:hover{background:#dce9d9}
}
@container story-deck (max-width:460px){
 .tape-strip {grid-template-columns:76px auto minmax(0,1fr) 35px;column-gap:6px;padding:7px 7px 5px 4px}
 .tape-play {min-height:35px;padding:3px 7px 3px 3px;gap:4px;font-size:.79rem}
 .tape-play-disc {width:23px;height:23px}.tape-play .tape-glyph{width:13px;height:13px}
 .tape-clock{font-size:.77rem}.tape-divider{padding:0}
 .tape-settings{width:35px;height:38px;border-radius:7px;border-color:transparent}
 .tape-inscription{top:10%;font-size:.58rem}
 .tape-adjustments{justify-content:space-between;gap:4px 10px}
}
@container story-deck (max-width:340px){
 .tape-strip {grid-template-columns:66px minmax(0,1fr) auto 29px;column-gap:3px}
 .tape-play{max-width:100%;min-width:0;overflow-wrap:anywhere}
 .tape-settings{width:29px}.tape-clock{font-size:.72rem}.tape-glyph{width:17px}
 .tape-volume-slider input{width:55px}
}
@media(prefers-reduced-motion:reduce){.tape-hub,.tape-player .tape-play{transform:none!important;transition:none}}
@media(forced-colors:active){.tape-machine,.tape-play,.tape-settings{border-color:CanvasText}.tape-seeker input{appearance:auto}}