/* The narrator belongs to the presentation frame. Slides keep their 16:9 area. */
.stage{aspect-ratio:16/11;width:min(1480px,calc(100vw - 40px),calc((100dvh - 290px)*1.454545))}
.scene{bottom:12.5cqw}
.finished{bottom:14cqw}
.guide-panel{position:absolute;inset:auto 0 0;height:12.5cqw;padding:1cqw 2.8cqw;display:grid;grid-template-columns:1fr 11cqw;grid-template-rows:auto 1fr auto;gap:.25cqw 2cqw;align-items:center;background:#f1f9fb;color:#07334f;border-top:1px solid #d6e8ef;z-index:3;overflow:hidden}
.guide-art{grid-column:2;grid-row:1/4;justify-self:center;position:relative;width:11cqw;height:11cqw;background:radial-gradient(circle,#dff7fa 0,transparent 65%)}
.mascot-sprite{width:100%;height:100%;background-image:url('media/50b98134b8843482d1368307ac1386108056e9d7df6f0444c47b6a19decf28fc.png');background-repeat:no-repeat;background-size:200% 200%;background-position:0 0;filter:drop-shadow(0 5px 4px #07334f12)}
.guide-eyebrow{grid-column:1;grid-row:1;font-size:.85cqw;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#087d8d;margin:0}
.guide-panel h2{display:none}
.guide-copy{grid-column:1;grid-row:2;font-size:1.17cqw;line-height:1.65;margin:0;color:#3c5c6e;align-self:center}
.guide-copy span.is-current{color:#07334f;background:#def3f6;border-radius:3px}
.guide-status{grid-column:1;grid-row:3;font-size:.83cqw;color:#557381;line-height:1.5;margin:0}
.stage[data-guide-tone="dark"] .guide-panel{background:#062d45;border-top-color:#ffffff18;color:#f5f9fb}
.stage[data-guide-tone="dark"] .guide-copy{color:#d9eaf1}
.stage[data-guide-tone="dark"] .guide-copy span.is-current{color:#fff;background:#087d8d55}
.stage[data-guide-tone="dark"] .guide-eyebrow{color:#65d5df}
.stage[data-guide-tone="dark"] .guide-status{color:#a6c7d7}
.guide-actions{width:min(1480px,calc(100vw - 40px));display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr;gap:10px;align-items:end}
.guide-actions button,.guide-actions select{font:inherit;font-size:12px;border-radius:7px;padding:10px 12px;width:100%;border:1px solid #d0e1eb;color:#07334f;background:#f5f9fc;min-height:40px}
.guide-actions button:hover{background:#e3f3f6}.guide-actions button[aria-pressed="true"]{background:#07334f;color:#fff;border-color:#07334f}
.guide-actions label{font-size:10px;color:#557280;display:block}.guide-actions select{display:block;margin-top:4px;background:#fff}
.guide-rate{display:flex;gap:7px;align-items:center;min-height:40px;background:#fff;border:1px solid #d0e1eb;border-radius:7px;padding:8px 10px}.guide-rate input{width:100%;accent-color:#087d8d}.guide-rate output{font-size:10px;color:#557280;min-width:42px}
.voice-credit{font-size:10px;line-height:1.5;color:#557280;margin:0 0 3px}
.cover p{color:#3c5c6e}.cover .cover-side{width:31%;border-left:0;padding-left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cover-mascot{width:clamp(150px,23cqw,300px);height:clamp(150px,23cqw,300px);background:none}
.cover .cover-side .guide-welcome{font-size:clamp(14px,1.6cqw,21px);line-height:1.5;text-align:center;color:#07334f;margin:10px 0 0}
.cover .cover-side .guide-welcome small{display:block;margin:8px 0 0;font-size:clamp(11px,1cqw,14px);font-weight:400}
.cover #startGuide{background:#ffc337;border-color:#ffc337;color:#07334f;font-weight:600}.cover #startGuide:hover{background:#ffd46a}
.cover .launch{gap:8px}.cover .launch button{padding:11px 13px}
.guide-off .guide-art{opacity:.8}.guide-off .guide-copy{opacity:.8}
@media(max-width:760px){
 .stage{width:calc(100vw - 20px);height:calc(100svh - 180px);min-height:665px;aspect-ratio:auto}
 .scene{bottom:150px}
 .finished{bottom:166px}
 .guide-panel{height:150px;padding:10px 12px;grid-template-columns:1fr 72px;gap:4px 8px}
 .guide-art{width:72px;height:72px}.guide-eyebrow{font-size:9px}.guide-copy{font-size:12px;line-height:1.5;max-height:93px;overflow:auto}.guide-status{font-size:10px}
 .guide-actions{width:calc(100vw - 20px);grid-template-columns:1fr 1fr;gap:8px}.guide-actions button{font-size:11px;padding:9px}
 .cover .cover-side{width:100%;margin-top:16px}.cover-mascot{width:150px;height:150px;min-width:150px;min-height:150px}
 .cover .cover-side .guide-welcome{font-size:15px;margin-top:0}.cover .cover-side .guide-welcome small{font-size:11px}
 .cover .cover-logo{margin-bottom:16px}.cover h1{font-size:32px;margin-bottom:12px}.cover p{font-size:14px;line-height:1.6}
 .cover .launch{margin-top:18px}.cover small{font-size:10px}.cover .launch button{font-size:12px}
}
@media print{.guide-panel,.guide-actions{display:none!important}.stage{width:100%;height:auto;aspect-ratio:auto}.scene,.scene[hidden]{bottom:auto}}

/* A larger image and two compact bars beneath it. */
.app{padding:8px 0;gap:8px}
.topline,.reading-controls,.controls{width:min(1680px,calc(100vw - 24px),calc((100dvh - 178px)*1.509434))}
.stage{width:min(1680px,calc(100vw - 24px),calc((100dvh - 178px)*1.509434));aspect-ratio:16/10.6}
.scene{bottom:10cqw;padding:3.2cqw 4.4cqw;overflow:auto}
.scene .split{grid-template-columns:1fr 1.1fr;gap:3.5cqw}
.scene h2,.scene .split .copy h2,.scene[data-key^="assistant"] h2,.scene[data-key="stock"] h2,.scene[data-key="finance"] h2,.scene[data-title="Zgłoszenie i potwierdzenie terminu"] h2{font-size:clamp(32px,4.15cqw,65px);line-height:1.12}
.scene .subtitle{font-size:clamp(16px,1.6cqw,25px);line-height:1.5}
.scene .joke,.scene .story-aside{font-size:clamp(14px,1.35cqw,20px);line-height:1.5;opacity:1;margin-top:1.5cqw}
.scene .eyebrow,.scene .demo-label,.scene .scene-note{font-size:clamp(11px,1.05cqw,15px)}
.scene .scene-note{left:4.4cqw;right:4.4cqw;bottom:1cqw;color:#486173}
.scene.dark .scene-note{color:#bfd8e4}
.scene .screen-header,.scene .demo-toolbar{font-size:clamp(13px,1.22cqw,18px)}
.scene .muted,.scene .field-row,.scene .check-row,.scene .context-patient p,.scene .source-note p,.scene .assistant-output p,.scene .doc-small p,.scene .care-line p,.scene .setting-line span,.scene .invoice-steps li,.scene .sms-step{font-size:clamp(13px,1.3cqw,19px);line-height:1.5}
.scene .screen-body,.scene .demo-content{padding:1.7cqw}
.scene .small-status{font-size:clamp(13px,1.25cqw,18px)!important}
.scene .type-copy{font-size:clamp(14px,1.35cqw,20px)!important;line-height:1.6!important}
.scene .mini-label,.scene .source-note>span,.scene .warehouse-metrics span,.scene .warehouse-metrics small,.scene .demo-toolbar>span:last-child{font-size:clamp(11px,1.05cqw,15px)}
.scene .module-heading{font-size:clamp(34px,4.4cqw,69px)!important}
.scene .module-name{font-size:clamp(16px,1.9cqw,27px)}
.scene .module-name small{font-size:clamp(11px,1.1cqw,15px)}
.scene .hero-tagline{font-size:clamp(34px,4.5cqw,70px)!important}
.hero-punch{position:static;margin-top:2.3cqw;font-size:clamp(16px,1.5cqw,22px)!important}
.hero-punch strong{font-size:clamp(18px,1.85cqw,27px)!important}
.hero-brand .vb-logo-plate{width:min(570px,68%)}
.film-intro{margin-top:1.8cqw}
.chaos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);gap:1.3cqw 5cqw;min-height:0;align-items:center}
.scene .chaos h2{grid-column:1;grid-row:1/5;width:auto;font-size:clamp(35px,4.8cqw,75px)}
.floating-word{position:static;grid-column:2;width:auto;font-size:clamp(20px,2.6cqw,38px);padding:1.2cqw 1.5cqw;border-radius:9px;line-height:1.2}
.floating-word small{font-size:clamp(12px,1.2cqw,17px);line-height:1.4;margin-top:.5cqw;color:#3c5c6e}
.punchline{font-size:clamp(15px,1.55cqw,22px)!important;line-height:1.5;margin:2cqw 0 0}
.punchline strong{font-size:inherit!important}
.closing-content{max-width:90cqw}
.closing-content .vb-logo-plate{margin-bottom:1.7cqw;max-width:300px}
.closing-content h2{font-size:clamp(34px,4.6cqw,72px)}
.closing-joke{margin-top:1.6cqw}.closing-end{margin-top:1.2cqw}
.guide-panel{height:10cqw;padding:.7cqw 2cqw;grid-template-columns:1fr 8.6cqw;gap:.1cqw 1.3cqw}
.guide-art{width:8.6cqw;height:8.6cqw}
.guide-eyebrow{font-size:clamp(10px,.9cqw,13px);letter-spacing:.06em}
.guide-copy{font-size:clamp(13px,1.35cqw,20px);line-height:1.5;max-height:6.1cqw;overflow:auto;scrollbar-width:thin}
.guide-status{font-size:clamp(10px,.9cqw,13px);line-height:1.3}
.finished{bottom:11.2cqw}
.reading-controls{margin:0;gap:10px;padding:5px 7px;border-radius:8px;min-height:46px;flex-wrap:nowrap;container-type:inline-size;container-name:player-controls}
.reading-buttons{gap:5px;flex-wrap:nowrap;align-items:center}
.reading-buttons button{font-size:11px;padding:8px 9px;white-space:nowrap;min-height:34px;font-weight:600}
.guide-settings{display:flex;align-items:center;gap:9px;margin-left:auto}
.guide-settings label{display:flex;align-items:center;gap:5px;font-size:10px;color:#3c5c6e;white-space:nowrap}
.guide-rate{padding:3px 5px;border:0;min-height:30px;gap:3px}
.guide-rate input{width:68px}.guide-rate output{min-width:30px;font-size:10px}
.controls{height:52px;padding:4px 6px;gap:12px;border-radius:8px;grid-template-columns:auto minmax(90px,1fr) 210px}
.controls .control{font-size:11px;padding:8px 9px}.controls .play{min-width:75px}
.controls .transport{gap:5px}.scrub{gap:8px}.scene-clock{width:210px;text-align:right}
.scene-clock>span{font-size:10px}.scene-clock-track{margin-top:3px;height:2px}
.now-title{font-size:11px;max-width:210px;color:#07334f}.scene-index{color:#087d8d;font-size:10px;margin-right:6px}
.cover{padding:4cqw;gap:2cqw}.cover h1{font-size:clamp(32px,4cqw,62px);line-height:1.14;margin-bottom:1.6cqw}
.cover p{font-size:clamp(14px,1.55cqw,22px);line-height:1.55}.cover .cover-logo{margin-bottom:1.8cqw;width:25cqw}
.cover small{font-size:clamp(10px,1cqw,14px)}.cover .launch{margin-top:2cqw}
@container player-controls (max-width:850px){
 .reading-buttons{min-width:0;flex:1;flex-wrap:wrap}
 .reading-buttons button{font-size:10px;padding:8px 7px}
 .guide-settings{gap:3px;flex-shrink:0}.guide-settings label{font-size:9px}.guide-rate input{width:46px}
}
@media(max-width:1050px){.guide-settings{gap:3px}.guide-settings label{font-size:9px}.guide-rate input{width:46px}.reading-buttons button{font-size:10px;padding:8px 7px}.controls{grid-template-columns:auto minmax(80px,1fr) 165px}.scene-clock,.now-title{width:165px;max-width:165px}}
@media(max-width:760px){
 .app{justify-content:flex-start}.topline,.reading-controls,.controls{width:calc(100vw - 20px)}
 .stage{width:calc(100vw - 20px);aspect-ratio:auto;height:calc(100svh - 225px);min-height:650px}
 .scene{bottom:145px;padding:25px 22px;justify-content:flex-start;overflow:auto}
 .scene .split{grid-template-columns:1fr;gap:22px}.scene h2,.scene .split .copy h2,.scene[data-key^="assistant"] h2,.scene[data-key="stock"] h2,.scene[data-key="finance"] h2,.scene[data-title="Zgłoszenie i potwierdzenie terminu"] h2{font-size:31px}
 .scene .subtitle{font-size:16px}.scene .scene-note{position:static;margin:18px 0 0;font-size:12px}.scene .screen-body,.scene .demo-content{padding:16px}
 .scene .hero-tagline{font-size:35px!important}.hero-brand .vb-logo-plate{width:90%}.hero-punch{margin-top:25px}
 .scene .module-heading{font-size:34px!important}.scene .module-name{font-size:17px;padding:12px 0}
 .chaos{grid-template-columns:1fr;gap:10px}.scene .chaos h2{grid-column:1;grid-row:auto;font-size:34px}.floating-word{grid-column:1;padding:12px 14px;font-size:23px}.floating-word small{font-size:13px}
 .guide-panel{height:145px;padding:8px 11px;grid-template-columns:1fr 70px;gap:3px 7px}.guide-art{width:70px;height:70px}
 .guide-copy{font-size:13px;max-height:94px;line-height:1.5}.guide-eyebrow{font-size:9px}.guide-status{font-size:10px}.finished{bottom:158px}
 .reading-controls{display:grid;grid-template-columns:1fr;margin:0;gap:6px;padding:8px}.reading-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px}.reading-buttons #modeButton{grid-column:auto}.reading-buttons button{font-size:11px;padding:8px;white-space:normal}
 .guide-settings{margin:0;justify-content:space-between;gap:10px}.guide-settings label{font-size:11px}.guide-rate input{width:95px}
 .controls{grid-template-columns:auto 1fr;height:52px;padding:4px;gap:7px}.controls .scene-clock{display:none}.control{font-size:10px}.time{font-size:9px}.controls .play{min-width:65px}
 .cover h1{font-size:32px}.cover .cover-logo{width:195px}.cover p{font-size:15px}.cover .launch{margin-top:18px}.cover small{font-size:11px}.cover .cover-side{width:100%}
}
@media print{.guide-panel,.reading-controls,.controls{display:none!important}.stage{width:100%;height:auto;aspect-ratio:auto}.scene,.scene[hidden]{bottom:auto;overflow:visible}}

/* The stage and all three rows have one physical parent width. */
:root{--presentation-width:min(1680px,calc(100vw - 24px),calc((100dvh - 232px)*1.509434))}
.topline,.presentation-frame{width:var(--presentation-width);max-width:none;min-width:0;box-sizing:border-box}
.presentation-frame{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:none}
.presentation-frame>.stage{width:100%;max-width:100%;min-width:0;box-sizing:border-box;flex:none;margin:0}
.player-bars{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;min-width:0;box-sizing:border-box}
.player-bars>.guide-actions,.player-bars>.reading-controls,.player-bars>.controls{width:100%;max-width:100%;min-width:0;margin:0;box-sizing:border-box;justify-self:stretch}
.topline{container-type:inline-size;container-name:presentation-topbar}
.guide-actions{margin:0;padding:4px 7px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.15fr) minmax(0,1.1fr) minmax(0,1fr);gap:8px;align-items:center;border:1px solid #d6e8ef;border-radius:8px;background:#fff;min-height:38px}
.guide-actions button{font-size:11px;line-height:1.35;font-weight:600;padding:6px 9px;min-height:30px;white-space:normal}
.guide-actions label{display:flex;align-items:center;gap:6px;min-width:0;font-size:11px;line-height:1.35;color:#304e61}
.guide-actions .guide-rate{flex:1;min-width:0;min-height:30px;padding:3px 5px;gap:5px}
.guide-actions .guide-rate input{width:100%;min-width:0}
.guide-actions .guide-rate output{font-size:11px;color:#304e61;min-width:31px;flex-shrink:0}
.reading-controls{display:flex;align-items:center;justify-content:space-between;padding:4px 7px;min-height:38px}
.reading-buttons{flex-shrink:0}.reading-buttons button{min-height:30px;padding:6px 9px;font-size:11px}
.reading-mode-note{margin:0 3px 0 10px;text-align:right;max-width:46%;font-size:11px;line-height:1.35;color:#304e61}
.scene:not(.dark) h1 em,.scene:not(.dark) h2 em{color:#8a6100;text-shadow:none}
.scene:not(.dark) .delivery-status{color:#355569}
.scene .delivery-status{font-size:clamp(12px,1.3cqw,19px);line-height:1.5}
.scene:not(.dark) .scene-note{color:#304e61}
.controls .control,.controls .time,.controls .now-title,.controls .scene-clock>span{color:#07334f}
.controls .control.play{color:#fff}
.controls .time,.controls .scene-clock>span{font-size:11px}
.controls .scene-index{color:#076572}
.cover p,.cover small,.cover .cover-side .guide-welcome small{color:#304e61}
.cover .eyebrow{color:#076572}
.cover .launch button.secondary{background:#fff;color:#07334f;border:1px solid #526f80}
.cover .launch button.secondary:hover{background:#e9f5f7;color:#07334f;border-color:#07334f}
.cover .edition-label{display:block;margin-top:.35rem;color:#304e61;font-weight:600}
@container player-controls (max-width:850px){.reading-buttons{flex-shrink:1;flex-wrap:wrap}.reading-mode-note{max-width:40%;font-size:10px}}
@container presentation-topbar (max-width:950px){.top-caption,.volume-label{display:none}}
@media(max-width:760px){
 :root{--presentation-width:calc(100vw - 20px)}
 .guide-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:6px;min-height:0}
 .guide-actions button{font-size:11px;min-height:34px}.guide-actions label{font-size:11px}
 .reading-controls{display:flex;flex-direction:column;align-items:stretch;padding:6px;gap:6px}
 .reading-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px}
 .reading-buttons #modeButton{grid-column:1/-1}.reading-buttons button{min-height:34px}
 .reading-mode-note{max-width:none;margin:0;text-align:center;font-size:11px}
 .controls .time{font-size:10px}
}
@media print{.player-bars{display:none!important}.presentation-frame{width:100%}}

/* Fill the available window instead of fitting a fixed cinema rectangle. */
@media screen{
 :root{--presentation-width:100%;--guide-height:clamp(148px,20dvh,200px)}
 html,body{width:100%;height:100%;min-height:0;margin:0;background:#e9f1f6;overflow:hidden}
 .app,.app:fullscreen{width:100%;max-width:none;height:100dvh;min-height:0;margin:0;padding:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:4px;align-items:stretch;justify-content:stretch;background:#e9f1f6;box-sizing:border-box}
 .app::backdrop{background:#e9f1f6}
 .topline{width:100%;min-height:44px;padding:3px 12px;gap:12px;box-sizing:border-box}
 .presentation-frame{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:4px}
 .presentation-frame>.stage{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;margin:0;border-radius:0;box-shadow:none;container-type:size;container-name:presentation-stage}
 .player-bars{width:100%;min-height:0;gap:4px}
 .player-bars>.guide-actions,.player-bars>.reading-controls,.player-bars>.controls{width:100%;border-radius:0}
 .scene{inset:0 0 var(--guide-height);padding:clamp(16px,3cqh,32px) clamp(20px,3cqw,64px);justify-content:flex-start;justify-content:safe center;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .scene>*{flex-shrink:0;min-width:0}
 .scene .split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3cqw,60px);min-width:0}
 .scene .copy,.scene .visual{min-width:0;max-width:100%}
 .scene h2,.scene .split .copy h2,.scene[data-key^="assistant"] h2,.scene[data-key="stock"] h2,.scene[data-key="finance"] h2,.scene[data-title="Zgłoszenie i potwierdzenie terminu"] h2{font-size:clamp(30px,min(4.15cqw,6.8cqh),65px);line-height:1.12;margin-bottom:clamp(12px,2cqh,24px)}
 .scene .subtitle{font-size:clamp(16px,min(1.6cqw,3cqh),25px);line-height:1.5;max-width:100%}
 .scene .eyebrow{margin-bottom:clamp(8px,1.6cqh,18px)}
 .scene .joke,.scene .story-aside{font-size:clamp(14px,min(1.35cqw,2.5cqh),20px);line-height:1.5;margin-top:clamp(12px,2cqh,24px);max-width:100%}
 .scene .scene-note{position:static;left:auto;right:auto;bottom:auto;margin:clamp(14px,2cqh,24px) 0 0;font-size:clamp(11px,min(1.05cqw,2cqh),15px);line-height:1.45}
 .scene-number{top:12px;right:20px;font-size:11px}
 .scene .screen-body,.scene .demo-content{padding:clamp(12px,min(1.7cqw,2.5cqh),28px)}
 .scene .screen-header,.scene .demo-toolbar{padding:clamp(9px,min(1.1cqw,1.8cqh),16px) clamp(12px,1.5cqw,28px);font-size:clamp(13px,min(1.22cqw,2.4cqh),18px)}
 .scene .field-row,.scene .check-row,.scene .care-line,.scene .payment,.scene .invoice-steps li{padding-top:clamp(7px,1.7cqh,16px);padding-bottom:clamp(7px,1.7cqh,16px)}
 .scene .source-note,.scene .note-box,.scene .doc-small{padding:clamp(12px,min(1.4cqw,2.3cqh),24px)}
 .scene .type-copy{min-height:clamp(72px,12cqh,130px);font-size:clamp(14px,min(1.35cqw,2.7cqh),20px)!important;line-height:1.5!important}
 .scene .message-letter .type-copy{min-height:clamp(72px,11cqh,120px)}
 .scene .warehouse-metrics strong,.scene .review-progress strong{font-size:clamp(30px,min(3.5cqw,6cqh),56px)}
 .scene .invoice-total>strong{font-size:clamp(36px,min(4.7cqw,7.5cqh),72px)}
 .scene .warehouse-metrics>div{padding:clamp(8px,1.7cqh,16px) clamp(8px,1cqw,18px)}
 .scene .module-heading,.scene .hero-tagline{font-size:clamp(30px,min(4.4cqw,7cqh),69px)!important}
 .scene .module-name{font-size:clamp(16px,min(1.9cqw,3.2cqh),27px);padding:clamp(8px,1.8cqh,20px) 0}
 .scene .hero-punch{margin-top:clamp(16px,2.3cqh,30px)}
 .scene .hero-brand .vb-logo-plate{width:clamp(180px,min(45cqw,60cqh),570px);max-width:100%}
 .scene .floating-word{font-size:clamp(20px,min(2.6cqw,4.5cqh),38px);padding:clamp(10px,1.7cqh,20px) clamp(12px,1.5cqw,26px)}
 .scene .chaos{gap:clamp(10px,1.7cqh,20px) clamp(20px,4cqw,60px)}
 .scene .chaos h2{font-size:clamp(30px,min(4.8cqw,7cqh),75px)}
 .closing-content{width:100%;max-width:100%}
 .closing-content h2{font-size:clamp(30px,min(4.6cqw,7cqh),72px)}
 .closing-content .vb-logo-plate{margin-bottom:clamp(12px,2cqh,24px)}
 .guide-panel{height:var(--guide-height);padding:7px clamp(12px,1.7cqw,32px);grid-template-columns:minmax(0,1fr) min(168px,calc(var(--guide-height) - 18px));grid-template-rows:auto minmax(0,1fr) auto;gap:2px 16px;overflow:hidden}
 .guide-panel>.guide-art{width:min(168px,calc(var(--guide-height) - 18px));height:min(168px,calc(var(--guide-height) - 18px))}
 .guide-copy{font-size:clamp(13px,min(1.3cqw,2.4cqh),20px);line-height:1.45;min-height:0;max-height:none;align-self:stretch;overflow:auto;scrollbar-width:thin}
 .guide-eyebrow{font-size:clamp(10px,.8cqw,13px);line-height:1.2}
 .guide-status{font-size:clamp(10px,.8cqw,13px);line-height:1.2}
 .finished{bottom:calc(var(--guide-height) + 14px)}
 .cover{padding:clamp(20px,4cqh,48px) clamp(24px,4cqw,84px);gap:clamp(20px,4cqw,64px);align-items:center;align-items:safe center;overflow:auto;overscroll-behavior:contain}
 .cover-text{min-width:0;flex:1}
 .cover .cover-logo{aspect-ratio:auto;width:clamp(180px,min(24cqw,38cqh),330px);height:auto;max-width:100%;margin-bottom:clamp(12px,2cqh,28px)}
 .cover h1{font-size:clamp(32px,min(4cqw,7cqh),62px);line-height:1.14;margin:clamp(12px,2cqh,24px) 0}
 .cover p{font-size:clamp(15px,min(1.55cqw,3cqh),22px);line-height:1.5;max-width:100%}
 .cover .launch{margin-top:clamp(14px,2cqh,24px)}
 .cover .launch button{font-size:clamp(12px,1cqw,16px);padding:10px 13px}
 .cover small{font-size:clamp(11px,.85cqw,14px);margin-top:clamp(12px,1.6cqh,20px)}
 .cover .cover-side{flex:none;width:28%;margin-top:0}
 .cover .cover-mascot{width:clamp(170px,min(25cqw,42cqh),340px);height:clamp(170px,min(25cqw,42cqh),340px);min-width:0;min-height:0}
}
@media screen and (max-width:760px){
 .topline{padding:4px 8px;gap:8px}
 .scene{padding:18px 16px;justify-content:flex-start}
 .scene .split{grid-template-columns:minmax(0,1fr);gap:20px}
 .scene .chaos{grid-template-columns:minmax(0,1fr)}
 .scene .chaos h2,.scene .floating-word{grid-column:1;grid-row:auto}
 .guide-panel{grid-template-columns:minmax(0,1fr) 104px;gap:2px 8px;padding:6px 10px}
 .guide-panel>.guide-art{width:104px;height:104px}
 .guide-copy{font-size:13px;line-height:1.4}
 .guide-eyebrow,.guide-status{font-size:9px}
 .cover{display:block;padding:20px;align-items:flex-start}
 .cover .cover-side{width:100%;margin-top:18px}
 .cover .cover-mascot{width:180px;height:180px}
 .cover .cover-logo{width:180px}
}
@media screen and (max-height:600px){
 .app,.app:fullscreen{overflow-y:auto}
 .presentation-frame{height:auto;grid-template-rows:minmax(320px,1fr) auto}
 .presentation-frame>.stage{min-height:320px}
 .scene{justify-content:flex-start}
 .scene .scene-note{margin-top:14px}
 .cover{align-items:flex-start}
}

/* One unchanged sprite sheet, composed into quiet facial gestures.
   Feet and the lower body stay fixed; no layer translates or bounces. */
.mascot-sprite,.academy-guide-portrait{position:relative;background-size:0 0!important;background-position:0 0!important;transform:none!important;animation:none!important;isolation:isolate}
.guide-art.is-speaking{animation:none!important;transform:none!important}
.mascot-sprite::after,.academy-guide-portrait::after{content:none!important}
.mascot-body,.mascot-head,.mascot-face,.mascot-ear,.mascot-mouth,.mascot-blink,.mascot-blink-image,.mascot-paw{position:absolute;inset:0;display:block;pointer-events:none;background-image:inherit;background-size:200% 200%;background-repeat:no-repeat;background-position:0 0}
.mascot-body{mask-image:linear-gradient(transparent 68%,#000 76%);transform:none!important;animation:none!important}
.mascot-head{background-size:0 0;transform-origin:50% 80%;transform:none;mask-image:linear-gradient(#000 77%,transparent 84%)}
.mascot-face{mask-image:url("media/bcecd47128faabd52e705a00c2444869f9b18c899262185910f0868f2de7b804.svg");mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat}
.mascot-ear-left{clip-path:polygon(20% 22%,31% 18%,39% 30%,33% 44%,21% 43%);transform-origin:33% 43%}
.mascot-ear-right{clip-path:polygon(69% 27%,79% 24%,88% 27%,90% 35%,86% 46%,78% 44%);transform-origin:79% 44%}
.mascot-paw{clip-path:ellipse(7.2% 7% at 85.3% 66.7%);transform-origin:85.3% 66.7%;mask-image:radial-gradient(ellipse 7.2% 7% at 85.3% 66.7%,#000 88%,transparent 100%)}
.mascot-mouth{background-position:100% 0;clip-path:ellipse(8.6% 4.6% at 51% 66.3%);opacity:0}
.mascot-blink{background-size:0 0;opacity:0;mask-image:radial-gradient(ellipse 11% 9.8% at 36.4% 53.4%,#000 88%,transparent 100%),radial-gradient(ellipse 10.8% 9.5% at 66.8% 55.9%,#000 88%,transparent 100%)}
.mascot-blink-image{background-position:100% 100%;transform:translate(1.116%,6.220%)}
.guide-art.is-speaking .mascot-head,.academy-guide.is-speaking .mascot-head{animation:mascot-head-turn 6.2s ease-in-out infinite}
.guide-art.is-speaking .mascot-ear-left,.academy-guide.is-speaking .mascot-ear-left{animation:mascot-ear-left-twitch 7.4s ease-in-out infinite}
.guide-art.is-speaking .mascot-ear-right,.academy-guide.is-speaking .mascot-ear-right{animation:mascot-ear-right-twitch 9.1s ease-in-out infinite}
.guide-art.is-speaking .mascot-paw,.academy-guide.is-speaking .mascot-paw{animation:mascot-paw-wave 10.6s ease-in-out infinite}
.guide-art.is-speaking .mascot-blink,.academy-guide.is-speaking .mascot-blink{animation:mascot-blink 5.8s steps(1,end) infinite}
.mascot-sprite[data-frame="1"] .mascot-mouth{opacity:1}
.academy-guide.is-speaking .mascot-mouth{animation:mascot-mouth .34s steps(1,end) infinite}
@keyframes mascot-head-turn{0%,100%{transform:rotate(0deg)}18%{transform:rotate(-3deg)}48%{transform:rotate(3.5deg)}76%{transform:rotate(-1.2deg)}}
@keyframes mascot-ear-left-twitch{0%,43%,58%,100%{transform:rotate(0deg)}48%{transform:rotate(-2deg)}53%{transform:rotate(1.2deg)}}
@keyframes mascot-ear-right-twitch{0%,62%,77%,100%{transform:rotate(0deg)}67%{transform:rotate(2deg)}72%{transform:rotate(-1.2deg)}}
@keyframes mascot-paw-wave{0%,10%,38%,100%{transform:rotate(0deg)}17%{transform:rotate(-16deg)}24%{transform:rotate(12deg)}30%{transform:rotate(-12deg)}34%{transform:rotate(0deg)}}
@keyframes mascot-blink{0%,91%,95%,100%{opacity:0}92%,94%{opacity:1}}
@keyframes mascot-mouth{0%,100%{opacity:0}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .guide-art.is-speaking .mascot-head,.academy-guide.is-speaking .mascot-head,.guide-art.is-speaking .mascot-ear,.academy-guide.is-speaking .mascot-ear,.guide-art.is-speaking .mascot-paw,.academy-guide.is-speaking .mascot-paw{animation:none!important;transform:none!important}
 .guide-art.is-speaking .mascot-blink,.academy-guide.is-speaking .mascot-blink,.mascot-sprite[data-frame="1"] .mascot-mouth,.academy-guide.is-speaking .mascot-mouth{animation:none!important;opacity:0!important}
}