/* B preview only. A keeps its original paper sleeve; both share one audio player. */
.hero-story-flow[data-device=turntable]{container-type:inline-size;--scene-center:190px;--chime-height:330px;}
/* Share one visual centre; the bitmap's transparent margins are not its bounds. */
.hero-story-flow[data-device=turntable] .hsf-record{left:64%;width:36%;top:calc(var(--scene-center) - 11.64cqw);}
.hero-story-flow[data-device=turntable] .hsf-instrument{left:30%;width:24%;height:var(--chime-height);top:calc(var(--scene-center) - var(--chime-height) / 2);}
.hsf-turntable{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent);mask-composite:intersect;}
.hsf-turntable-art{position:absolute;inset:0;pointer-events:none;}
/* Separate the spinning vinyl from the stationary chassis and tonearm. */
.hsf-turntable-platter{position:absolute;left:13%;top:14%;width:43%;height:63%;}
.hsf-turntable-platter img{display:block;width:100%;height:100%;animation:hsf-vinyl-spin 18s linear infinite paused;}
.hsf-turntable-art[data-playing=true] .hsf-turntable-platter img{animation-play-state:running;}
.hsf-turntable-arm{position:absolute;inset:0;width:100%;height:100%;clip-path:polygon(56% 14%,63% 14%,63% 28%,60% 29%,57% 45%,55% 49%,52% 53%,53% 55%,50% 59%,50% 61%,46% 62%,45% 57%,49% 51%,51% 50%,54% 44%,57% 28%,56% 24%);}
@keyframes hsf-vinyl-spin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.hsf-turntable-platter img{animation:none;}}
.hero-story-flow[data-device=turntable] .record-quiet{padding:0;aspect-ratio:1.5;container-type:normal;}
.hero-story-flow[data-device=turntable] .record-disc-wrap,
.hero-story-flow[data-device=turntable] .record-sleeve,
.hero-story-flow[data-device=turntable] .record-quiet-mark{display:none;}
.hero-story-flow[data-device=turntable] .record-sleeve-wrap{display:contents;filter:none;}
.hero-story-flow[data-device=turntable] .record-quiet-mark{display:block;left:34.8%;top:49%;bottom:auto;width:4%;height:5%;color:#918979;opacity:.75;}
.hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy{position:absolute;left:66%;top:25%;width:20%;gap:5px;color:#504a40;}
.hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy strong{font-size:clamp(11px,1vw,14px);letter-spacing:0;line-height:1.4;color:inherit;}
.hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy small{font-size:9px;color:#7b7161;line-height:1.4;}
.hero-story-flow[data-device=turntable] .record-quiet-player{position:absolute;inset:0;padding:0;}
.hero-story-flow[data-device=turntable] .record-quiet-player [class*="inlinePlayer"]{display:contents;}
.hero-story-flow[data-device=turntable] .record-quiet-player [class*="inlineTop"]>span{display:none;}
.hero-story-flow[data-device=turntable] .record-quiet-player button[class*="inlinePlay"],
.hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"],
.hero-story-flow[data-device=turntable] .hsf-next{position:absolute;left:66%;width:20%;height:36px;min-height:0;min-width:0;margin:0;padding:0;border:0;border-radius:4px;background:transparent;color:#74654a;display:flex;justify-content:center;align-items:center;font-size:11px;box-shadow:none;cursor:pointer;}
.hero-story-flow[data-device=turntable] .record-quiet-player button[class*="inlinePlay"]{top:52%;left:calc(76% - 18px);width:36px;height:36px;border-radius:50%;background:#e7ddcc;}
.hero-story-flow[data-device=turntable] .record-quiet-player button[class*="inlinePlay"] svg{width:18px;height:18px;}
.hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"]{top:66%;left:65%;width:13%;font-size:10px;}
.hero-story-flow[data-device=turntable] .hsf-next{top:66%;left:78%;width:10%;bottom:auto;font-size:10px;}
.hero-story-flow[data-device=turntable] .record-quiet-player [class*="inlinePlayer"]>input{position:absolute;left:68%;top:46%;width:16%;height:12px;margin:0;accent-color:#a48b56;}
.hero-story-flow[data-device=turntable] .record-quiet-player [class*="quietTimes"]{position:absolute;left:68%;top:42%;width:16%;font-size:8px;color:#827666;}
.hero-story-flow[data-device=turntable] .record-quiet-player [role=alert]{position:absolute;top:93%;font-size:11px;}
.hero-story-flow[data-device=turntable] .hsf-next:hover,
.hero-story-flow[data-device=turntable] .record-quiet-player button:hover{background:#e2d7c6;}
.hero-story-flow[data-device=turntable] button:focus-visible{outline:2px solid #806a40;outline-offset:2px;}
.hero-story-flow[data-device=turntable] [data-hero-pending]{display:contents;}
.hero-story-flow[data-device=turntable] [data-hero-pending] [role=status]{position:absolute;left:66%;top:45%;width:20%;text-align:center;line-height:1.4;}
.hero-story-flow[data-device=turntable] [data-hero-pending] strong{font-size:10px;}
.hero-story-flow[data-device=turntable] [data-hero-pending] small{display:none;}
.hero-story-flow[data-device=turntable] [data-hero-pending-control]{position:absolute;top:55%;left:calc(76% - 18px);width:36px;height:36px;min-height:0;min-width:0;padding:0;margin:0;border:0;border-radius:50%;background:#e7ddcc;color:#74654a;}
@media(max-width:700px){
 .hero-story-flow[data-device=turntable]{height:280px;--scene-center:140px;--chime-height:clamp(115px,32vw,155px);}
 .hero-story-flow[data-device=turntable] .hsf-instrument{left:26%;width:25%;}
 /* Include the progress/time/control rows in the player's visual centre. */
 .hero-story-flow[data-device=turntable] .hsf-record{left:56%;width:44%;top:calc(var(--scene-center) - 16.5733cqw - 32px);}
 .hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy{top:23%;gap:2px;}
 .hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy strong{font-size:clamp(7px,1.7vw,10px);line-height:1.3;overflow-wrap:anywhere;}
 .hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy small{display:none;}
 .hero-story-flow[data-device=turntable] [data-hero-pending-control],
 .hero-story-flow[data-device=turntable] .record-quiet-player button[class*="inlinePlay"],
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"],
 .hero-story-flow[data-device=turntable] .hsf-next{position:absolute;top:calc(100% + 20px);left:0;right:auto;bottom:auto;width:33.333%;height:44px;min-width:0;box-sizing:border-box;font-size:10px;white-space:nowrap;color:#625844;border:0;border-radius:4px;background:transparent;justify-self:auto;text-align:center;grid-area:auto;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"]{left:33.333%;}
 .hero-story-flow[data-device=turntable] .hsf-next{left:66.666%;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="quietTimes"]{font-size:8px;top:100%;left:10%;width:80%;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="inlinePlayer"]>input{top:86%;left:10%;width:80%;height:14px;}
 .hero-story-flow[data-device=turntable] [data-hero-pending] [role=status]{top:49%;}
 .hero-story-flow[data-device=turntable] [data-hero-pending] strong{font-size:7px;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [role=alert]{top:calc(100% + 65px);font-size:10px;}
}
/* Selected concept 3: centre-label playback, quiet display, integrated anchor. */
.hero-story-flow[data-device=turntable] .record-quiet-mark{display:none;}
.hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy{left:66.5%;top:24%;width:19%;height:28%;gap:6px;text-align:left;align-content:start;}
.hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy strong{font-size:clamp(11px,1.05vw,16px);line-height:1.35;letter-spacing:0;}
.hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:clamp(8px,.7vw,11px);line-height:1.4;}
.hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-lyric{position:absolute;top:63%;left:0;width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:pre-line;margin:0;padding-top:5px;border-top:1px solid #d8cdbb;font-family:inherit;font-size:clamp(9px,.8vw,12px);line-height:1.45;color:#726859;}
.hero-story-flow[data-device=turntable] .record-quiet-player button[class*="inlinePlay"],
.hero-story-flow[data-device=turntable] [data-hero-pending-control]{left:34.5%;top:45.5%;transform:translate(-50%,-50%);width:clamp(44px,4.2vw,62px);height:clamp(44px,4.2vw,62px);border:1px solid #d4c6af;background:#eee5d3;color:#81704e;z-index:2;margin:0;}
.hero-story-flow[data-device=turntable] .record-quiet-player button[class*="inlinePlay"] svg{width:20px;height:20px;}
.hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"],
.hero-story-flow[data-device=turntable] .hsf-next{top:65%;height:32px;min-height:32px;width:9%;border:1px solid #cbbda5;border-radius:6px;font-size:clamp(8px,.7vw,11px);background:transparent;white-space:nowrap;}
.hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"]{left:66%;}
.hero-story-flow[data-device=turntable] .hsf-next{left:76.5%;}
.hero-story-flow[data-device=turntable] .record-quiet-player [class*="inlinePlayer"]>input{left:66.5%;top:54%;width:19%;height:18px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;}
.hero-story-flow[data-device=turntable] .record-quiet-player input::-webkit-slider-runnable-track{height:3px;background:#c6beae;border-radius:3px;}
.hero-story-flow[data-device=turntable] .record-quiet-player input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;background:#a58c55;border:0;border-radius:50%;}
.hero-story-flow[data-device=turntable] .record-quiet-player input::-moz-range-track{height:3px;background:#c6beae;border-radius:3px;}
.hero-story-flow[data-device=turntable] .record-quiet-player input::-moz-range-thumb{width:12px;height:12px;background:#a58c55;border:0;border-radius:50%;}
.hero-story-flow[data-device=turntable] .record-quiet-player [class*="quietTimes"]{left:66.5%;top:60%;width:19%;font-size:8px;}
.hero-story-flow[data-device=turntable] [data-hero-pending] [role=status]{left:66.5%;top:52%;width:19%;}
.hero-story-flow[data-device=turntable] .hsf-sound-mount{left:42%;top:calc(var(--scene-center) - var(--chime-height) * .4025 - 9.5px);bottom:auto;transform:translate(-50%,-50%);z-index:5;}
.hero-story-flow[data-device=turntable] .hsf-sound-switch{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;}
.hero-story-flow[data-device=turntable] .hsf-sound-switch img{display:block;width:27px;height:27px;object-fit:contain;transform:scaleX(-1);transition:transform .2s ease;}
.hero-story-flow[data-device=turntable] .hsf-sound-switch[aria-checked=true] img{transform:scaleX(1);}
.hero-story-flow[data-device=turntable] .hsf-sound-switch span{position:absolute;top:42px;white-space:nowrap;padding:5px 8px;border-radius:4px;background:#f6efe3;color:#74654a;font-size:11px;opacity:0;pointer-events:none;}
.hero-story-flow[data-device=turntable] .hsf-sound-switch:hover span,
.hero-story-flow[data-device=turntable] .hsf-sound-switch:focus-visible span{opacity:1;}
.hero-story-flow[data-device=turntable] .hsf-sound-mount small{position:absolute;top:48px;left:50%;transform:translateX(-50%);width:140px;text-align:center;}
@media(max-width:700px){
 .hero-story-flow[data-device=turntable] .hsf-record{left:48%;width:52%;top:calc(var(--scene-center) - 16.8cqw - 13px);}
 .hero-story-flow[data-device=turntable] .hsf-sound-mount{left:38.5%;}
 .hero-story-flow[data-device=turntable] .hsf-sound-switch img{width:23px;height:23px;}
 .hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy{left:65.5%;top:23%;width:21%;gap:3px;}
 .hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy strong{font-size:clamp(8px,2.1vw,12px);line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
 .hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-copy small{display:none;}
 .hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-lyric{top:70%;font-size:clamp(7px,1.6vw,10px);line-height:1.4;margin:0;padding-top:4px;-webkit-line-clamp:2;}
 .hero-story-flow[data-device=turntable] .record-quiet-player button[class*="inlinePlay"],
 .hero-story-flow[data-device=turntable] [data-hero-pending-control]{width:44px;height:44px;background:transparent;border:0;border-radius:50%;}
 .hero-story-flow[data-device=turntable] .record-quiet-player button[class*="inlinePlay"] svg{width:14px;height:14px;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="inlinePlayer"]>input{top:57%;height:24px;left:66%;width:19%;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="quietTimes"]{top:75%;font-size:6px;left:65%;width:22%;}
 .hero-story-flow[data-device=turntable] .record-quiet-player input::-webkit-slider-thumb{width:8px;height:8px;margin-top:-2.5px;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"],
 .hero-story-flow[data-device=turntable] .hsf-next{top:84%;height:44px;min-height:44px;width:40%;font-size:10px;border:0;border-radius:0;background:rgba(239,231,216,.65);}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"]{left:10%;border-radius:0 0 0 8px;}
 .hero-story-flow[data-device=turntable] .hsf-next{left:50%;border-left:1px solid #d8cdbb;border-radius:0 0 8px 0;}
 .hero-story-flow[data-device=turntable] [data-hero-pending] [role=status]{top:52%;}
}
/* warm6: quiet icon controls and a brand-shaped centre play key. */
.hero-story-flow[data-device=turntable] .record-quiet .record-sleeve-lyric{display:none;}
.hero-story-flow[data-device=turntable] .hsf-lyrics-label{display:none;}
.hero-story-flow[data-device=turntable] .hsf-lyrics-icon{display:block;}
.hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"],
.hero-story-flow[data-device=turntable] .hsf-next{border:0;background:transparent;border-radius:50%;}
.hero-story-flow[data-device=turntable] .hsf-next svg,
.hero-story-flow[data-device=turntable] .hsf-lyrics-icon{width:18px;height:18px;}
.hero-story-flow[data-device=turntable] .record-quiet-player button[class*="inlinePlay"]{background:transparent;border:0;}
.hero-story-flow[data-device=turntable] .hsf-bean-play{display:grid;position:absolute;inset:0;place-items:center;color:#b29a65;pointer-events:none;}
.hero-story-flow[data-device=turntable] .hsf-bean-play svg{width:32px!important;height:40px!important;}
.hero-story-flow[data-device=turntable] .record-quiet-player button[class*="inlinePlay"]>svg{position:relative;z-index:1;width:12px;height:12px;color:#fffaf0;margin-top:4px;}
.hero-story-flow[data-device=turntable] .hsf-playback-status{position:absolute;left:66.5%;top:41%;width:19%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:#9b8b70;font-size:clamp(7px,.65vw,10px);}
.hsf-level{display:flex;height:16px;gap:3px;align-items:center;opacity:.6;}
.hsf-level i{display:block;width:2px;border-radius:2px;background:currentColor;transform-origin:center;}
.hsf-playback-status[data-playing=true] .hsf-level i{animation:hsf-breathe 1.4s ease-in-out infinite;}
@keyframes hsf-breathe{50%{opacity:.6;transform:scaleY(.4);}}
@media(max-width:700px){
 .hero-story-flow[data-device=turntable] .hsf-playback-status{top:45%;gap:1px;}
 .hero-story-flow[data-device=turntable] .hsf-level{transform:scale(.7);transform-origin:left center;}
 .hero-story-flow[data-device=turntable] .hsf-playback-status>span:not(.hsf-level){display:none;}
 .hero-story-flow[data-device=turntable] .hsf-bean-play svg{width:20px!important;height:28px!important;}
 .hero-story-flow[data-device=turntable] .record-quiet-player button[class*="inlinePlay"]>svg{width:9px;height:9px;}
}
@media(prefers-reduced-motion:reduce){.hsf-decoration{transition:none;}.hsf-playback-status[data-playing=true] .hsf-level i{animation:none;}}
.hero-story-flow[data-device=turntable] .hsf-bean-play svg{animation:hsf-vinyl-spin 18s linear infinite paused;}
.hero-story-flow[data-device=turntable] .hsf-bean-play[data-spinning=true] svg{animation-play-state:running;}
@media(max-width:700px){
 .hero-story-flow[data-device=turntable] .hsf-record{top:calc(var(--scene-center) - 16.8cqw);}
 .hero-story-flow[data-device=turntable] .hsf-playback-status{top:40%;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="inlinePlayer"]>input{top:49%;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="quietTimes"]{top:57%;font-size:7px;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"],
 .hero-story-flow[data-device=turntable] .hsf-next{top:65%;transform:none;width:11%;height:12%;min-height:0;border:0;background:transparent;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"]{left:65%;}
 .hero-story-flow[data-device=turntable] .hsf-next{left:76%;}
 .hero-story-flow[data-device=turntable] .hsf-next svg,
 .hero-story-flow[data-device=turntable] .hsf-lyrics-icon{width:clamp(10px,2vw,14px);height:clamp(10px,2vw,14px);}
}
@media(prefers-reduced-motion:reduce){.hero-story-flow[data-device=turntable] .hsf-bean-play svg{animation:none;}}
/* Preserve the miniature chassis while keeping icon targets distinct on phones. */
@media(max-width:700px){
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"],
 .hero-story-flow[data-device=turntable] .hsf-next{width:24px;height:24px;min-height:24px;top:65%;}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="expand"]{left:calc(76% - 25px);}
 .hero-story-flow[data-device=turntable] .hsf-next{left:calc(76% + 1px);}
 .hero-story-flow[data-device=turntable] .record-quiet-player [class*="inlinePlayer"]>input{height:12px;}
}