/* Homepage-only controls share the illustrated player's outer surface. */
.story {gap:12px;padding-bottom:8px}
.story .transport {box-sizing:border-box;width:100%;max-width:none;margin:0;padding:8px 0 0;border:0;border-top:1px solid #d9e3ef;border-radius:0;background:transparent;box-shadow:none}
.playback {gap:8px;margin:0}
.playback-buttons {gap:0}
.playback button {width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#233956}
.playback button:hover {background:#e5edf8}
.playback button:focus-visible,.scrubber input:focus-visible {outline:2px solid #185fbc;outline-offset:2px}
.playback button .icon {width:17px;height:17px}
.playback button>span {width:auto;font-size:18px}
.playback button[data-toggle] {background:#e7effc;color:#185fbc;border:1px solid #d6e4f8;box-shadow:0 2px 5px #1638600a,inset 0 1px 0 #fff;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.playback button[data-toggle]:hover {background:#185fbc;color:white;border-color:#185fbc;box-shadow:0 3px 8px #185fbc26}
.playback button[data-toggle]:active {background:#124e9d;color:white;box-shadow:none}
.playback button[data-toggle] [data-toggle-icon] {display:none}
.play-pause-mark {display:block;width:20px;height:20px;fill:currentColor}
.play-pause-mark .play-mark {display:none}
body[data-playing="false"] .pause-mark {display:none}
body[data-playing="false"] .play-mark {display:block}
@media(prefers-reduced-motion:reduce){.playback button[data-toggle]{transition:none}}
.playback button b {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.scrubber {display:flex;align-items:center;min-width:35px;height:44px}
.scrubber input {height:24px;margin:0;accent-color:#185fbc}
.timecode {display:inline;font-size:10px;color:#536278}
.demo-details>summary {min-height:30px;font-size:10px;color:#63748a;gap:6px}
.demo-details>summary::after {font-size:13px}
.demo-details[open] {padding-bottom:8px}
@media(max-width:340px){.playback{gap:4px}.timecode{font-size:9px}}
/* A stable stage: fonts, module startup, and chapter changes cannot resize it. */
html,body {height:100%;margin:0;overflow:hidden}
main {height:100%;box-sizing:border-box;padding-bottom:8px}
.story {height:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:128px minmax(0,1fr) 83px;align-items:stretch;padding-top:16px;padding-bottom:8px}
.narrative {height:128px;overflow:hidden}
.visual,.scene {height:100%;min-height:0}
.scene {container-type:size}
.phone-wrap {--phone-fit:min(tan(atan2(100cqw,var(--phone-width))),tan(atan2(100cqh,var(--phone-height))));transform:scale(var(--phone-fit));transition:none}
.story .transport {height:83px;overflow:visible;position:relative}
.demo-details[open] {position:absolute;bottom:0;left:0;right:0;z-index:50;max-height:calc(100svh - 32px);overflow:auto;box-sizing:border-box;padding:8px 12px;background:#f6faff;border:1px solid #d9e3ef;border-radius:14px;box-shadow:0 -6px 24px #17243c12}
@media(min-width:500px){.story {display:grid;align-items:stretch;padding-bottom:8px}}