/* One quiet visual field. The dock belongs to the scene at every viewport. */
#shell{max-width:1600px;padding:0 clamp(18px,3.4vw,56px);min-height:100svh}
.topbar{height:88px}.brand-name{font-size:20px;letter-spacing:-.04em}.brand-mark{width:30px}.brand-note{display:none}.top-actions{gap:6px}.top-actions button{font-size:12px;color:var(--secondary)}
.intro{padding:17px 0 30px;align-items:flex-end;gap:28px}.intro h1{font-size:clamp(28px,3vw,42px);font-weight:450;letter-spacing:-.045em}.intro p{font-size:13px;color:var(--muted);margin-top:10px}.intro-controls{min-width:440px}.mode-label{display:block;font:10px var(--mono);letter-spacing:.15em;color:var(--muted);margin:0 0 10px 4px}
.preset-bar{padding:4px;gap:4px;background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 55%,transparent);border-radius:10px}.preset-bar button{min-height:40px;padding:9px 15px;font-size:12px;flex:1}.preset-bar button[aria-pressed=true].choice{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);background:var(--raised);color:var(--text)}
main{flex:1}.stage-wrap{flex:1;min-height:450px}.stage{min-height:450px;flex:1;border:1px solid color-mix(in srgb,var(--line) 45%,transparent);border-radius:16px;background:var(--bg2)}
.stage-top{top:22px;left:24px;right:24px}.scene-id{background:transparent;padding:0;gap:12px;font-size:12px}.scene-id .seed{font-size:10px;opacity:.65}.stage-top button{background:color-mix(in srgb,var(--bg2) 65%,transparent);border:1px solid #ffffff0d;border-radius:8px;min-height:42px;padding:8px 12px;font-size:11px;backdrop-filter:blur(12px)}
.stage-center{top:43%;min-width:0;width:100%;padding:0 20px;text-shadow:0 2px 24px #0009}.stage-center .state-line{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#efedf0}.stage-center .large-number{font-size:clamp(60px,6vw,84px);font-weight:300;line-height:1.15;margin-top:12px}.stage-center .unit{font:11px var(--mono);margin-left:8px;text-transform:uppercase;letter-spacing:.1em}.stage-center .freq-note{font-size:11px;color:#d5d2d7;margin-top:14px}.stage-center .stage-start{font-size:12px;min-height:42px;min-width:138px;margin-top:20px;background:color-mix(in srgb,var(--bg2) 72%,transparent);border:1px solid #ffffff35;color:#fff;backdrop-filter:blur(12px)}
.stage-bottom{bottom:120px;left:24px;right:24px}.scene-caption{display:none}.stage-bottom-actions{display:flex;margin-left:auto;align-items:center;gap:12px}.stage-bottom button{background:color-mix(in srgb,var(--bg2) 60%,transparent);font-size:11px;min-height:36px;padding:6px 10px;border:1px solid #ffffff12}.stage-bottom #sceneSettings{opacity:.8}
.stage-dock{position:absolute;z-index:3;left:22px;right:22px;bottom:22px;min-height:80px;padding:12px 16px 16px;display:grid;grid-template-columns:minmax(160px,1fr) auto minmax(160px,1fr);align-items:center;gap:18px;border:1px solid #ffffff14;border-radius:12px;background:color-mix(in srgb,var(--bg2) 80%,transparent);backdrop-filter:blur(22px);box-shadow:0 8px 40px #0002}
.stage-dock .now-title{font-size:12px;font-weight:500}.stage-dock .now-sub{font-size:10px;color:var(--muted)}.meter{width:24px;height:26px;gap:4px}.meter i{width:2px}.meter i:nth-child(3){height:25px}.stage-dock .playback{gap:8px}.stage-dock .play-main{width:48px;height:48px;background:var(--accent);color:var(--ink);box-shadow:0 0 24px color-mix(in srgb,var(--accent) 8%,transparent)}.stage-dock .play-main:hover{background:var(--strong)}.stage-dock .play-main svg{width:21px;height:21px}.stage-dock .timer-button{font-size:11px;padding:8px;min-width:88px}.stage-dock .icon-only{width:38px;min-height:44px}.stage-dock .route-quick{font-size:11px;white-space:nowrap;padding:7px;min-height:44px}.stage-dock .route-quick svg{width:17px}.stage-dock .volume-control{width:120px;gap:6px}.stage-dock .transport-end{gap:10px}.dock-progress{position:absolute;left:16px;right:16px;bottom:7px;height:2px;background:#ffffff08}.dock-progress>span{background:var(--accent)}
.footer{padding:13px 0 16px;min-height:60px;flex-shrink:0}.footer-meta{display:flex;align-items:center;gap:22px;margin-left:auto;order:2;font-size:10px}.footer-note{color:var(--muted)}.footer button{font-size:11px}.connection svg{width:12px}.footer .connection{gap:6px}
.scene-option{position:relative;border:1px solid transparent}.scene-option[aria-pressed=true]{box-shadow:none;border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--text)}.scene-option svg{height:76px;background:linear-gradient(145deg,var(--bg2),var(--raised));opacity:.85}.scene-option span{font-size:12px}.theme[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--accent)}
.cinema .stage{height:100vh;min-height:100vh;border:0}.cinema .stage-dock{position:fixed;left:5vw;right:5vw;bottom:5vh;max-width:1100px;margin:auto;padding:12px 18px 16px}.cinema .stage-bottom{bottom:calc(5vh + 98px);display:flex}.cinema .stage-top{left:5vw;right:5vw;top:5vh}.cinema .stage-center{top:43%}.cinema .tv-help{font-size:11px}.blackout .stage{border-color:#181818}
@media(min-width:1101px){.stage{height:max(460px,calc(100svh - 290px))}.stage-wrap{flex:none}}
@media(max-width:1100px){.topbar{height:76px}.intro{flex-direction:column;align-items:stretch;gap:23px;padding:14px 0 24px}.intro-controls{min-width:0}.mode-label{display:none}.stage{min-height:500px}.stage-dock{grid-template-columns:1fr auto;gap:10px}.stage-dock .transport-end{grid-column:1/-1;justify-content:space-between}.stage-dock .route-quick .button-text{display:inline}.stage-dock .volume-control{width:160px}.stage-dock .now-sub{white-space:normal}.stage-bottom{bottom:162px}.stage-center{top:38%}.footer-note{display:none}}
@media(max-width:640px){#shell{padding:0 16px}.topbar{height:70px}.brand-name{font-size:19px}.top-actions{gap:2px}.top-actions button{width:40px;padding:0}.top-actions #openSettings{width:auto;padding:0 6px 0 10px}.top-actions #openSettings .button-text{display:inline;font-size:12px}.top-actions #saveQuick{display:none}.top-actions #tvButton{display:flex}.intro h1{font-size:31px}.intro{gap:20px;padding:9px 0 18px}.intro p{max-width:none;font-size:12px}.preset-bar{gap:2px;padding:4px}.preset-bar button{font-size:11px;padding:9px 2px;min-height:42px;white-space:normal}.stage-wrap{min-height:510px}.stage{height:510px;min-height:510px;border-radius:12px}.stage-top{top:15px;left:15px;right:15px}.scene-id{font-size:11px;gap:8px}.scene-id .seed{display:none}.stage-top button{font-size:10px;min-height:40px}.stage-center{top:37%;padding:0 14px}.stage-center .state-line{font-size:9px;letter-spacing:.12em}.stage-center .large-number{font-size:62px}.stage-center .stage-start{margin-top:18px}.stage-dock{left:10px;right:10px;bottom:10px;padding:11px 12px 15px;grid-template-columns:minmax(0,1fr) auto;gap:4px 7px}.stage-dock .playback{gap:3px}.stage-dock .timer-button{min-width:66px;padding:8px 4px;font-size:10px}.stage-dock .timer-button svg{display:none}.stage-dock .play-main{width:46px;height:46px}.stage-dock #mixButton{display:none}.stage-dock .now{gap:8px}.stage-dock .now-title{font-size:11px}.stage-dock .now-sub{font-size:9px}.stage-dock .meter{width:18px}.stage-dock .transport-end{display:flex;grid-column:1/-1;border-top:1px solid #ffffff09;margin-top:5px;padding-top:3px;gap:4px}.stage-dock .route-quick{font-size:10px}.stage-dock .volume-control{width:120px;max-width:46%}.stage-dock .route-quick .button-text{display:inline}.stage-dock .icon-only{width:32px}.stage-bottom{bottom:148px;left:15px;right:15px;flex-direction:row}.stage-bottom-actions{width:auto}.stage-bottom #sceneSettings{font-size:10px;min-height:36px}.footer{flex-direction:row;align-items:center;gap:8px;padding:12px 0 max(12px,env(safe-area-inset-bottom))}.footer-meta{margin-left:auto;font-size:9px}.footer button{font-size:10px}.footer .connection svg{display:none}.panel-tabs{padding-left:16px;padding-right:16px}.panel-head{padding-left:20px;padding-right:20px}.panel-scroll{padding-left:20px;padding-right:20px}.cinema .stage-dock{left:12px;right:12px;bottom:20px}.cinema .stage-bottom{bottom:164px}.cinema .transport-end{display:flex}.cinema .stage-top{left:20px;right:20px}.cinema .tv-help{display:none}}
@media(max-height:600px) and (min-width:641px){.topbar{height:60px}.intro{flex-direction:row;align-items:flex-end;padding:8px 0 18px}.intro-controls{min-width:360px}.intro h1{font-size:28px}.stage{min-height:360px;height:360px}.stage-center{top:35%}.stage-center .large-number{font-size:54px}.stage-center .stage-start{display:none}.cinema .stage{height:100vh}.cinema .stage-dock{bottom:20px}.cinema .stage-bottom{bottom:125px}}
@media(min-width:1101px){.stage{flex:none;height:max(460px,calc(100svh - 290px))}.stage-wrap{min-height:0}}