@font-face{font-family:"Pixel Ultima";src:url('assets/fonts/pixel-ultima-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Onest;src:url('assets/fonts/onest.ttf');font-weight:100 900;font-display:swap}
:root{font-family:"IBM Plex Mono",monospace;color:#e7f3ff;background:#486cdd;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #fff3a6;outline-offset:4px}button:not(:disabled):hover{filter:brightness(1.12)}button:not(:disabled):active{filter:brightness(.9);box-shadow:inset 0 3px 4px #18335666}a{color:inherit}.stage{position:relative;isolation:isolate;max-width:1512px;margin:0 auto;display:grid;grid-template-columns:50.93% 49.07%;min-height:0}.background{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.wash{position:absolute;left:50.93%;top:0;right:0;height:900px;background:#5c80e7b3}.halo{position:absolute;left:0;top:0}.glow{position:absolute;left:900px;top:30px}#stars i{position:absolute;background:#dde9ff29;width:2px;height:2px}#stars i.bright{width:4px;height:4px;background:#dde9ff5c}.phone-space{position:relative;min-height:0}.brand{position:absolute;left:35px;top:32px;font-size:13px;text-decoration:none;color:#dae9ff}.phone{position:absolute;left:calc(50% + 30px);top:26px;transform:translateX(-50%);width:529px;height:843px;border:3px solid #a8c5ee;border-radius:91px;background:#223c71;box-shadow:13px 12px 0 0 #163b8d52}.shell-blue{position:absolute;inset:4px 9px 7px;border:2px solid #8faada;border-radius:82px;background:#526fad}.shell-bevel{position:absolute;inset:19px 24px 21px 23px;border:2px solid #b7cce6;border-radius:76px;background:#7894c8}.shell-face{position:absolute;inset:33px 37px 33px;border:2px solid #385789;border-radius:65px;background:#5675b4}.shell-face:before{content:'';position:absolute;left:-2px;top:46px;width:11px;height:608px;background:#b6d0f545;border-radius:6px}.shell-face:after{content:'';position:absolute;right:6px;top:56px;width:12px;height:595px;background:#183b7e4d;border-radius:6px}.shell-shine{position:absolute;top:24px;left:91px;width:353px;height:7px;border-radius:5px;background:#c1d9f940}.speaker{position:absolute;top:50px;left:227px;width:85px;height:10px;border:1px solid #98aed5;border-radius:6px;background:#1d335d}.speaker:after{content:'';position:absolute;left:16px;top:2px;width:50px;height:2px;background:#b2c6e2b3}.phone-brand{position:absolute;top:70px;left:163px;width:196px;text-align:center;font:500 22px Onest,sans-serif;color:#dce9ff}.lcd-shadow{position:absolute;left:50px;top:103px;width:425px;height:370px;border-radius:29px;background:#183356}.lcd-bezel{position:absolute;left:55px;top:106px;width:414px;height:356px;border:3px solid #dce7ed;border-radius:25px;background:#afc1cf;padding:7px}.lcd-gasket{position:relative;width:396px;height:336px;border-radius:18px;background:#314a56;padding:6px 8px}.lcd{position:relative;width:379px;height:326px;border:2px solid #59755c;border-radius:14px;background:#bbd4a0;color:#24472e;box-shadow:inset 5px 0 #71906d80,inset 0 4px #e8f0d199}.lcd h1{position:absolute;left:16px;top:6px;font:700 25px/1.2 "Pixel Ultima",monospace;margin:0}.lcd-icons{position:absolute;right:16px;top:13px;display:flex;gap:2px;align-items:flex-end;height:18px}.lcd-icons i{display:block;width:4px;background:#24472e;height:6px}.lcd-icons i:nth-child(2){height:10px}.lcd-icons i:nth-child(3){height:14px}.lcd-icons i:nth-child(4){height:18px}.lcd-icons b{width:30px;height:17px;border:2px solid #24472e;margin-left:6px;position:relative}.lcd-icons b:before{content:'';position:absolute;left:2px;top:2px;width:19px;height:9px;background:#24472e}.lcd-icons b:after{content:'';position:absolute;right:-5px;top:3px;width:3px;height:7px;background:#24472e}.lcd-meta{position:absolute;left:14px;right:14px;top:42px;display:flex;justify-content:space-between;font-size:16px;padding:0 2px 12px;border-bottom:2px solid #32563bbf}.lcd-meta span:first-child{font-size:17px}#grid{position:absolute;left:17.5px;top:91px;width:340px;display:grid;grid-template-columns:repeat(8,39px);grid-auto-rows:39px;gap:4px}#grid>span,.row-label,.column-label{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}.cell{position:relative;width:39px;height:39px;padding:0;background:#a7c495;border:1px solid #7a9d78;border-radius:1px;color:#2b5136}.cell[aria-pressed=true]{border-color:#557958}.cell[aria-pressed=true]:after{content:'';position:absolute;inset:5px;background:#2b5136}.cell.current{outline:2px solid #40684b;outline-offset:-2px;box-shadow:inset 0 0 0 2px #bbd4a0}.cell:focus-visible{outline-color:#183356;z-index:1}.cell:hover{background:#c9dcad}.lcd-voice{position:absolute;top:268px;left:16px;right:14px;display:flex;justify-content:space-between;font-size:14px;line-height:22px;white-space:nowrap}.lcd-voice h2{font-size:16px;font-weight:400;margin:0}.lcd-bottom{position:absolute;top:295px;left:14px;right:14px;border-top:2px solid #345f3cb3;padding:5px 2px 0;display:flex;justify-content:space-between;font-size:12px;line-height:16px}.lcd.rhythm #grid{top:99px;grid-auto-rows:47px}.lcd.rhythm .cell{height:47px}.physical{position:absolute;border:2px solid #355587;color:#28446d;background:#b9c9df;text-align:center;box-shadow:inset 0 2px #ffffff35}.physical[aria-pressed=true]{background:#d7e6df;border-color:#c9f0d2;box-shadow:inset 0 0 0 2px #4d776e}.voice-button{top:494px;width:107px;height:74px;border-radius:21px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;font-size:15px}#melody{left:69.5px}#rhythm{left:346.5px}.voice-button img{display:block}.beat-icon{display:grid;grid-template-columns:repeat(2,10px);gap:4px}.beat-icon i{display:block;width:10px;height:9px;background:#30496c}.dpad{position:absolute;left:186.5px;top:479px;width:150px;height:104px;border:2px solid #b7cbe4;border-radius:51px;background:#3e598c}.dpad-inner{position:absolute;left:10px;top:10px;width:126px;height:80px;background:#bacae0;border:2px solid #dde7f0;border-radius:38px}.dpad button{position:absolute;padding:0;display:flex;align-items:center;justify-content:center;color:#e4eeff}.arrow{width:28px;height:25px;border:0;background:transparent}.arrow.up{left:59px;top:5px}.arrow.down{left:59px;bottom:5px}.arrow.left{left:7px;top:37px}.arrow.right{right:7px;top:37px}#ping{left:48px;top:33px;width:50px;height:34px;border:2px solid #2b477a;border-radius:14px;background:#5876ac;font-size:12px}.call,.end{top:587px;width:126px;height:46px;border-radius:20px;font-size:18px;color:#f1ffee}.call:before,.end:before{content:'';position:absolute;top:4px;left:13px;right:13px;height:6px;border-radius:5px;background:#b3f9cd4d}.call{left:74.5px;background:#238365;border-color:#a2e5c4}.end{left:322.5px;background:#bd5064;border-color:#ffc0c7;color:#fff5f3}.end:disabled{filter:saturate(.65);opacity:.8}.end:before{background:#ffdbd940}.signal-button{left:221.5px;top:587px;width:80px;height:46px;border-radius:18px;background:#c4d3e4;border-color:#3e5f8a;font-size:11px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}.strength{height:12px;display:flex;gap:3px;align-items:flex-end}.strength i{width:4px;height:3px;background:#30496c}.strength i:nth-child(2){height:6px}.strength i:nth-child(3){height:9px}.strength i:nth-child(4){height:12px}.keypad{position:absolute;top:645px;left:84.5px;width:354px;display:grid;grid-template-columns:repeat(3,102px);gap:6px 24px;font:500 17px Onest,sans-serif;color:#253b61}.keypad span{height:30px;border:2px solid #3a5581;border-radius:15px;background:#d7e2ee;display:flex;align-items:center;justify-content:center;position:relative;user-select:none}.keypad span:before{content:'';position:absolute;left:8px;right:10px;top:1px;height:4px;border-radius:5px;background:#fff6}.story-side{padding:75px clamp(30px,6.88vw,104px) 0 34px;min-width:0}.hero{height:201px;position:relative}.hero p{margin:0;font-size:13px;color:#dae8ff;white-space:nowrap}.hero h2{font:700 clamp(64px,5.75vw,87px)/1.1 "Pixel Ultima",monospace;white-space:nowrap;margin:12px 0 23px -12px;color:#f1f6ff;letter-spacing:0}.hero .tagline{font-size:17px;color:#d2e2ff;padding-bottom:23px;border-bottom:2px solid #c7dfff75}.hero-pixels{position:absolute;right:26px;top:34px;width:10px;height:10px;background:#a2edc7;box-shadow:18px 0 #e1ecffb3}.story-panel{height:418px;border:1px solid #b6cfff;border-radius:15px;background:#2f52b0d9;box-shadow:8px 7px #203f9273;padding:15px 11px 18px}.panel-heading{display:flex;justify-content:space-between;margin:0 8px 9px;padding-bottom:16px;border-bottom:1px solid #b8d3ff66;gap:8px}.panel-heading h2{margin:0;font-size:15px;font-weight:500;white-space:nowrap}.panel-heading output{font-size:14px;white-space:nowrap;color:#bfd7ff}#story-scenes{display:grid;grid-template-rows:repeat(7,42px)}.scene{position:relative;display:grid;grid-template-columns:57px 1fr auto;align-items:center;text-align:left;gap:0;background:transparent;border:0;color:#f1f5ff;border-radius:8px;padding:0 14px;min-width:0}.scene:after{content:'';position:absolute;bottom:0;left:10px;right:14px;height:1px;background:#9ab9f32e}.scene:last-child:after,.scene[aria-current=step]:after{display:none}.scene-number{font-size:16px;color:#b7c7f3}.scene strong{font:700 20px "Pixel Ultima",monospace;white-space:nowrap}.scene small{font-size:12px;color:#b2c8f5;text-align:right;white-space:nowrap}.scene[aria-current=step]{background:#b8e3bef5;border:1px solid #e5fde5;color:#183d59}.scene[aria-current=step] .scene-number,.scene[aria-current=step] small{color:#254f59}.story-progress{display:flex;gap:20px;margin:22px 8px 0;align-items:center}.story-progress>span{font-size:13px;white-space:nowrap}#story-progress{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:8px}#story-progress i{height:8px;border-radius:2px;background:#819ed9a6}#story-progress i.active{background:#bfebc1}.live-panel{margin-top:21px;border:1px solid #9ac1ff;border-radius:15px;background:#284b9f;box-shadow:11px 5px #21469c85;min-height:162px;padding:8px 22px 16px}.live-heading{display:flex;justify-content:space-between;align-items:center}.live-heading h2{font:700 23px "Pixel Ultima",monospace;margin:0}.live-heading output{min-width:113px;text-align:center;border-radius:7px;padding:3px 10px;background:#a9e4c0;color:#1e5147;font-size:15px}.live-guide{display:flex;align-items:center;gap:14px;min-height:32px;border-bottom:1px solid #aec9f452;white-space:nowrap}.live-guide>span{font-size:13px;color:#b4cdf7;min-width:98px}.live-guide p{font-size:13px;margin:0}.live-guide p:last-child{font-size:12px;margin-left:auto}.slider-row{display:grid;grid-template-columns:85px 40px 1fr 58px;align-items:center;gap:12px;margin-top:9px;font-size:14px;min-height:26px}.slider-row>span{font-size:12px;color:#bbd3f3}.slider-row output{font-size:16px;color:#d6f3ff;text-align:right}input[type=range]{appearance:none;display:block;width:100%;height:7px;border-radius:5px;background:linear-gradient(to right,#b2ebc4 var(--fill,50%),#738dd3 var(--fill,50%));cursor:pointer;margin:8px 0}#signal{--fill:0%}input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#e3f7e6;border:2px solid #6cb8a0}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#e3f7e6;border:2px solid #6cb8a0}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1400px) and (min-width:1051px){.story-side{padding-right:30px;padding-left:18px}.scene{grid-template-columns:40px 1fr auto;padding:0 10px}.scene strong{font-size:18px}.scene small{font-size:10px}.hero h2{font-size:76px}.hero p{font-size:11px}.hero .tagline{font-size:14px}.live-guide{gap:8px}.live-guide>span{min-width:78px;font-size:11px}.live-guide p{font-size:11px}.live-guide p:last-child{font-size:10px}.slider-row{grid-template-columns:70px 38px 1fr 44px;gap:8px}.story-progress{gap:10px}.story-progress>span{font-size:11px}}
@media(max-width:1050px){.stage{grid-template-columns:1fr;max-width:770px}.phone-space{min-height:0}.phone{left:50%}.story-side{padding:20px 32px 30px}.hero{height:180px}.hero h2{font-size:76px}.hero .tagline{font-size:15px}.background .wash{left:0;height:100%}.brand{left:24px;top:12px}}
@media(max-width:570px){.phone-space{min-height:calc(100vw * 1.64 + 20px);overflow:hidden}.phone{top:26px;transform:translateX(-50%) scale(calc((100vw - 20px)/529px));transform-origin:top center}.brand{font-size:10px}.story-side{padding:18px 14px}.hero{height:150px}.hero h2{font-size:60px;margin-top:12px}.hero p{font-size:9px}.hero .tagline{font-size:11px}.hero-pixels{right:12px;top:30px}.story-panel{height:auto;padding:14px 8px 18px}.panel-heading h2{font-size:11px}.panel-heading output{font-size:11px}.scene{grid-template-columns:30px 1fr;padding:0 10px}.scene strong{font-size:18px}.scene small{display:none}.story-progress{gap:8px;margin-top:20px}.story-progress>span{font-size:10px}#story-progress{gap:4px}.live-panel{padding:10px 12px 14px}.live-heading h2{font-size:21px}.live-heading output{font-size:12px;min-width:80px}.live-guide{flex-wrap:wrap;gap:5px;padding:8px 0}.live-guide>span{min-width:74px}.live-guide p,.live-guide>span{font-size:11px}.live-guide p:last-child{font-size:10px;width:100%;margin:0 0 0 79px}.slider-row{grid-template-columns:57px 34px 1fr 43px;gap:7px;font-size:12px}.slider-row>span{font-size:10px}.slider-row output{font-size:13px}}
/* Adjustments from the Stage 02 Figma comparison; geometry stays editable. */
.lcd h1{top:12px}.lcd-meta{top:47px;padding-bottom:5px}.lcd-voice{top:270px;font-size:16px}
.hero h2{position:relative;top:4px;margin-bottom:18px}.hero .tagline{padding-bottom:15px}
.story-panel{margin-left:2px;width:calc(100% - 2px)}.panel-heading{padding-bottom:7px;margin-bottom:5px}.story-progress{margin-top:25px}
.live-panel{margin-left:1px;width:calc(100% - 2px);padding-left:23px;padding-right:29px}.slider-row{grid-template-columns:85px 40px 1fr 69px;gap:11px}.slider-row>span{position:relative;left:2px}
.live-guide p{font-size:15px}.live-guide p:last-child{font-size:15px;margin-left:16px}.live-guide p:last-child:before{content:'·';margin-right:20px}
input[type=range]:hover::-webkit-slider-thumb{background:#fff}input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 4px #a9e4c066}input[type=range]:hover::-moz-range-thumb{background:#fff}input[type=range]:active::-moz-range-thumb{box-shadow:0 0 0 4px #a9e4c066}
@media(max-width:1440px){.brand{top:8px}}
@media(max-width:1400px) and (min-width:1051px){.slider-row{grid-template-columns:70px 38px 1fr 44px;gap:8px}.live-guide p{font-size:11px}.live-guide p:last-child{font-size:10px;margin-left:0}.live-guide p:last-child:before{margin-right:8px}}
@media(max-width:570px){.live-panel{padding-left:12px;padding-right:12px}.slider-row{grid-template-columns:57px 34px 1fr 43px;gap:7px}.live-guide p{font-size:11px}.live-guide p:last-child{font-size:10px;margin-left:79px}.live-guide p:last-child:before{content:none}}
/* Stage 5: performance state only; the Nokia body and LCD geometry are retained. */
.lcd-icons i:nth-child(1){height:4px}.lcd-icons i:nth-child(2){height:8px}.lcd-icons i:nth-child(3){height:12px}.lcd-icons i:nth-child(4){height:16px}.lcd-icons i:nth-child(5){height:20px}.lcd-icons i[data-filled=false]{background:#71906d55}
.cell[data-pending=on],.cell[data-pending=off]{outline:1px dashed #24472e;outline-offset:-4px}.cell[data-pending=on]:after{background:#2b513680}.cell[data-pending=off]:after{content:'';position:absolute;inset:5px;border:1px dotted #557958;background:transparent}
.scene.pending{outline:1px dashed #d9f7dd;outline-offset:-3px}.scene.pending .scene-number:after{content:'…'}.signal-button{font-size:10px}.slider-row datalist{display:none}.live-guide #guide-next{font-size:11px;white-space:normal;line-height:1.3}.live-guide #guide-next:before{margin-right:8px}.live-guide{min-height:38px}
@media(max-width:1400px) and (min-width:1051px){.live-guide #guide-current{font-size:10px}.live-guide #guide-next{font-size:10px;margin-left:0}}
@media(max-width:570px){.live-guide #guide-next{font-size:10px}}

/* Stage 07: independent handset sizing and unscaled, readable performance panels. */
.stage{display:grid;grid-template-columns:1fr;place-items:center;max-width:none;min-height:100vh;min-height:100dvh;padding:16px 28px}
.cockpit-viewport{position:relative;width:min(100%,1512px);min-width:0}
.cockpit{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);align-items:center;width:100%;transform:none;--instrument-height:min(900px,max(680px,calc(100vh - 32px)));--phone-scale:1}
@supports(height:100dvh){.cockpit{--instrument-height:min(900px,max(680px,calc(100dvh - 32px)))}}
.phone-space{height:var(--instrument-height);min-height:0}
.phone{left:50%;top:0;transform:translateX(-50%) scale(var(--phone-scale));transform-origin:top center}
.wash{left:49%;height:100%}.glow{left:48%;top:0}
.story-side{display:grid;grid-template-rows:auto minmax(387px,1fr) auto;gap:12px;padding:0;min-width:0;height:var(--instrument-height)}
.hero{height:auto;min-width:0;padding:0 0 4px}
.hero h2{font-size:clamp(64px,5.3vw,82px);line-height:1;margin:0;top:0;letter-spacing:0}
.hero-pixels{right:8px;top:12px}
.story-panel{display:flex;flex-direction:column;height:auto;min-height:0;width:100%;margin:0;padding:12px;border-radius:15px}
.panel-heading{margin:0 0 8px;padding:0 4px 8px;line-height:20px;align-items:center}
.panel-heading h2{font-size:16px;font-weight:400}.panel-heading output{font-size:16px}
#story-scenes{flex:1;display:grid;grid-template-rows:repeat(7,minmax(44px,1fr));gap:0;min-height:308px}
.scene{grid-template-columns:44px minmax(0,1fr);padding:0 14px;min-height:44px;border:2px solid transparent;transition:background-color .12s ease}
.scene strong{font-size:clamp(24px,2vw,28px);line-height:1.1}.scene-number{font-size:18px}
.scene[aria-current=step]{border:2px solid #e5fde5;background:#b8e3be;box-shadow:inset 4px 0 #3c8060}
.scene.pending{outline:2px dashed #e5fde5;outline-offset:-4px}
.story-progress{margin:12px 4px 0;gap:0;min-height:6px}
#story-progress{gap:8px}#story-progress i{height:6px}
.live-panel{width:100%;margin:0;min-height:0;padding:12px 18px;border-radius:15px}
.live-heading{min-height:28px}.live-heading h2{font-size:26px;line-height:1}
.live-heading output{display:flex;justify-content:center;align-items:center;gap:8px;min-width:110px;padding:4px 12px;font-size:16px;line-height:20px;color:#cbdcf0;background:#4465aa;border:1px solid #8eade5}
.live-dot{color:#acbed7;opacity:.55}.live-heading output[data-active=true]{color:#1e5147;background:#a9e4c0;border-color:#b9f1ce}
.live-heading output[data-active=true] .live-dot{color:#247554;opacity:1}
.live-guide{display:grid;grid-template-columns:126px minmax(0,1fr);gap:0 12px;min-height:42px;padding:6px 0;white-space:normal}
.live-guide>span{grid-row:1/3;min-width:0;font-size:12px}
.live-guide #guide-current{font-size:14px;line-height:1.3;margin:0}
.live-guide #guide-next{font-size:13px;line-height:1.3;margin:0;width:auto}
.live-guide #guide-next:before{content:none}
.slider-row{grid-template-columns:85px 48px minmax(0,1fr) 54px;gap:12px;min-height:44px;margin:0;font-size:16px}
.slider-row>span{font-size:12px;left:0}.slider-row output{font-size:18px}
input[type=range]{height:44px;margin:0;border-radius:0;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:5px;background:linear-gradient(to right,#b2ebc4 var(--fill,50%),#738dd3 var(--fill,50%))}
input[type=range]::-moz-range-track{height:8px;border-radius:5px;background:linear-gradient(to right,#b2ebc4 var(--fill,50%),#738dd3 var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-9px}
input[type=range]::-moz-range-thumb{width:22px;height:22px}
.arrow{width:40px;height:38px}.arrow.up{left:53px;top:-1px}.arrow.down{left:53px;bottom:-1px}.arrow.left{left:1px;top:30px}.arrow.right{right:1px;top:30px}
.signal-button.pressed{filter:brightness(.9);background:#d7e6df;box-shadow:inset 0 3px 4px #18335666}
.call,.end{font-size:15px}.call,.end,.signal-button{height:50px}.voice-button{font-size:13px}
.lcd h1{font-size:25px;line-height:1}.lcd-meta{font-size:14px}.lcd-meta span:first-child{font-size:16px}
.lcd-voice{top:263px;height:32px;align-items:center;gap:6px;font-size:14px}.lcd-voice h2{font-size:16px;flex:none}
#lcd-next{margin-left:auto}
.lcd-mute{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:44px;padding:0;border:1px solid #557958;border-radius:4px;background:transparent;color:#24472e}
.lcd.rhythm .lcd-voice{top:251px;height:44px}.lcd-mute[hidden]{display:none}.lcd-mute[aria-pressed=true]{background:#24472e;color:#bbd4a0}.lcd-mute .sound-off,.lcd-mute[aria-pressed=true] .sound-wave{display:none}.lcd-mute[aria-pressed=true] .sound-off{display:block}
.lcd-mute:focus-visible{outline-color:#183356;outline-offset:1px}
@media(max-width:1050px){
  .stage{display:block;padding:16px 20px 28px}
  .cockpit-viewport{width:100%;max-width:770px;margin:auto}
  .cockpit{grid-template-columns:minmax(0,1fr);gap:28px}
  .story-side{height:auto;grid-template-rows:auto auto auto;gap:16px}
  .story-panel{min-height:440px}.hero h2{font-size:76px}
  .wash{left:0}
}
@media(max-width:570px){
  .stage{padding:12px 10px 24px}
  .phone-space{min-height:0;overflow:visible}
  .cockpit{gap:24px}
  .hero h2{font-size:60px}.hero-pixels{top:12px}
  .story-panel{min-height:420px;padding:10px}.panel-heading h2,.panel-heading output{font-size:13px}
  .scene{grid-template-columns:32px minmax(0,1fr);padding:0 8px}.scene strong{font-size:24px}.scene-number{font-size:16px}
  .live-panel{padding:12px}.live-heading h2{font-size:24px}
  .live-guide{grid-template-columns:110px minmax(0,1fr);gap:0 8px}.live-guide>span{font-size:10px}
  .live-guide #guide-current{font-size:13px}.live-guide #guide-next{font-size:12px}
  .slider-row{grid-template-columns:65px 36px minmax(0,1fr) 42px;gap:8px;font-size:14px}.slider-row>span{font-size:11px}.slider-row output{font-size:16px}
}