/* One navigation rail, one working section, one scroll area. */
.studio-app #creator.creator-workspace { top:86px; right:76px; bottom:88px; width:min(540px,calc(100vw - 100px)); padding:12px; border-color:#ffffff29; background:#080b10f5; }
#creator.creator-workspace .panel-head { min-height:34px; gap:8px; padding:0 0 10px; }
#creator.creator-workspace .panel-head>span { font-size:10px; letter-spacing:.12em; }
#creator.creator-workspace .panel-head-actions { flex:1; }
#creator.creator-workspace .panel-head-actions output { max-width:140px; font-size:10px; color:#a4b5c0; }
.workspace-find,.workspace-expand { color:#dae6ef; background:#ffffff08; border:1px solid #ffffff24; padding:7px 10px; border-radius:4px; white-space:nowrap; font:10px ui-monospace,monospace; cursor:pointer; }
.workspace-find:hover,.workspace-expand:hover { border-color:#00d4ff; }
.workspace-layout { display:grid; grid-template-columns:86px minmax(0,1fr); flex:1; min-height:0; gap:14px; }
#creator.creator-workspace .tab-grid { display:flex; flex-direction:column; overflow:auto; margin:0; padding:0 10px 0 0; gap:3px; border-right:1px solid #ffffff18; scrollbar-width:none; }
#creator.creator-workspace .tab { display:flex; align-items:center; justify-content:flex-start; flex-shrink:0; min-height:40px; gap:7px; padding:8px; text-align:left; border:0; border-radius:4px; background:transparent; color:#94a5b1; font-size:10px; }
#creator.creator-workspace .tab-icon { display:none; }
#creator.creator-workspace .tab.is-active { background:#00d4ff1a; color:#80e7ff; box-shadow:inset 2px 0 #00d4ff; }
#creator.creator-workspace .tab:hover { background:#ffffff0a; color:#fff; }
.workspace-content { display:flex; flex-direction:column; min-width:0; min-height:0; }
.workspace-section-bar { display:flex; gap:12px; align-items:center; padding:2px 0 12px; min-height:42px; flex-shrink:0; border-bottom:1px solid #ffffff18; margin-bottom:12px; }
.workspace-section-bar>strong { color:#fff; font:600 18px/1.2 system-ui,sans-serif; }
.workspace-section-bar select { margin-left:auto; max-width:65%; min-width:0; height:32px; border:1px solid #ffffff26; border-radius:4px; background:#161d25; color:#dce8f0; font:10px ui-monospace,monospace; padding:4px 24px 4px 8px; }
#creator.creator-workspace .tab-panel { display:none; overflow:auto; overscroll-behavior:contain; flex:1; min-height:0; padding:0 5px 16px 0; scrollbar-width:thin; }
#creator.creator-workspace .tab-panel.is-active { display:block; }
#creator.creator-workspace .tab-panel>.menu-section { margin:0; padding:0; border:0; }
#creator.creator-workspace .menu-section[hidden],#creator.creator-workspace [hidden] { display:none!important; }
#creator.creator-workspace .tab-panel>.menu-section>summary { display:none; }
#creator.creator-workspace .field { margin:0 0 16px; gap:8px; }
#creator.creator-workspace .field>span { color:#b7c6d2; font-size:11px; letter-spacing:.04em; }
#creator.creator-workspace .action-row,#creator.creator-workspace .crew-actions { gap:7px; margin-bottom:14px; }
#creator.creator-workspace .mini-button,#creator.creator-workspace .primary-action,#creator.creator-workspace .file-action { min-height:38px; border-radius:4px; font-size:10px; }
#creator.creator-workspace input[type=range] { min-height:28px; cursor:pointer; }
#creator.creator-workspace .control-note { font-size:11px; line-height:1.6; color:#a5b6c3; }
#creator.creator-workspace>.meter-row { display:none; }
#creator.creator-workspace .dance-director { padding:14px; }
#creator.creator-workspace .create-panel-tools { display:none; }
#creator.creator-workspace.is-create-popout:not(.is-window-popout) { width:min(640px,calc(100vw - 100px)); top:86px; bottom:88px; }
.studio-app #creator.creator-workspace.workspace-expanded { left:16px; right:76px; top:86px; bottom:88px; width:auto; height:auto; max-height:none; }
#creator.creator-workspace.workspace-expanded .workspace-layout { grid-template-columns:110px minmax(0,1fr); }
#creator.creator-workspace.workspace-expanded .workspace-content { max-width:1000px; width:100%; justify-self:center; }
.creator-popout-host #creator.creator-workspace { display:flex; flex-direction:column; height:calc(100dvh - 70px); min-height:360px; }
.creator-popout-host .workspace-expand { display:none; }
.workspace-found { outline:2px solid #00d4ff!important; outline-offset:4px; }
.workspace-search { width:min(620px,calc(100vw - 28px)); max-height:min(720px,85dvh); overflow:auto; padding:24px; color:#e9f4fa; background:#0b111a; border:1px solid #ffffff30; border-radius:10px; box-shadow:0 24px 100px #0009; }
.workspace-search::backdrop { background:#020408b8; backdrop-filter:blur(8px); }
.workspace-search h2 { font:600 22px system-ui,sans-serif; margin:0 0 20px; }
.workspace-search>input { width:100%; height:48px; font:15px system-ui,sans-serif; background:#141f2b; border:1px solid #ffffff35; border-radius:5px; color:#fff; padding:12px; }
.workspace-search p { color:#9eafbd; font:12px system-ui,sans-serif; }
.workspace-search-close { float:right; padding:6px 10px; color:#d6e8f4; background:transparent; border:1px solid #ffffff30; border-radius:4px; cursor:pointer; }
.workspace-search-results { display:grid; gap:6px; }
.workspace-search-results button { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px; background:#ffffff06; border:1px solid #ffffff13; border-radius:5px; color:#e6eef5; text-align:left; cursor:pointer; }
.workspace-search-results button:hover { background:#00d4ff13; border-color:#00d4ff; }
.workspace-search-results strong { font:500 13px/1.4 system-ui,sans-serif; }
.workspace-search-results span { color:#85dfff; font:11px ui-monospace,monospace; }
.workspace-transport { position:fixed; z-index:20; bottom:16px; left:22px; right:76px; display:flex; align-items:center; gap:8px; min-height:54px; padding:8px 12px; border:1px solid #ffffff27; border-radius:6px; background:#080c13ee; backdrop-filter:blur(14px); color:#eff8ff; }
.workspace-transport[hidden],.ui-hidden .workspace-transport { display:none; }
.timeline-open .workspace-transport { display:none; }
.workspace-transport button { min-height:36px; border:1px solid #ffffff22; border-radius:4px; padding:8px 12px; background:#ffffff05; color:inherit; cursor:pointer; font:11px ui-monospace,monospace; }
.workspace-transport button:disabled { opacity:.35; cursor:default; }
.workspace-transport [data-transport=play] { background:#00d4ff; color:#020608; min-width:66px; font-weight:700; }
.workspace-transport .transport-track { display:grid; text-align:left; gap:3px; min-width:0; max-width:340px; flex:1; border:0; background:transparent; padding:0 10px; }
.transport-track strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:500 12px system-ui,sans-serif; }
.transport-track span { font-size:10px; color:#9daebb; }
.workspace-transport input { flex:1; min-width:60px; max-width:600px; accent-color:#00d4ff; }
@media(max-width:700px) and (orientation:portrait) {
 .studio-app #creator.creator-workspace { top:auto; bottom:80px; left:8px; right:8px; width:auto; height:55dvh; max-height:none; padding:9px; }
 #creator.creator-workspace .workspace-layout { grid-template-columns:64px minmax(0,1fr); gap:9px; }
 #creator.creator-workspace .tab-grid { padding-right:6px; }
 #creator.creator-workspace .tab { min-height:38px; padding:6px; font-size:9px; }
 #creator.creator-workspace .panel-head-actions output { max-width:95px; font-size:9px; }
 #creator.creator-workspace .panel-head>span { display:none; }
 #creator.creator-workspace .workspace-section-bar { gap:6px; }
 #creator.creator-workspace .workspace-section-bar>strong { font-size:17px; }
 .studio-app #creator.creator-workspace.workspace-expanded,.studio-app #creator.creator-workspace.is-create-popout { top:68px; bottom:80px; height:auto; }
 .workspace-transport { bottom:8px; left:8px; right:8px; gap:4px; padding:7px; min-height:58px; }
 .workspace-transport button { padding:7px; font-size:10px; }
 .workspace-transport input { display:none; }
 .workspace-transport .transport-track { padding:0 5px; }
 .workspace-transport [data-transport=play] { min-width:48px; }
 .workspace-transport [data-transport=previous],.workspace-transport [data-transport=next] { display:none; }
 .workspace-expand { padding:7px; }
 .scene-activity { top:65px; right:58px; }
}
@media(max-height:600px) and (orientation:landscape) {
 .studio-app #creator.creator-workspace,.studio-app #creator.creator-workspace.is-create-popout { top:8px; left:auto; right:52px; bottom:70px; width:54vw; padding:8px; }
 #creator.creator-workspace .panel-head { padding-bottom:6px; min-height:28px; }
 #creator.creator-workspace .panel-head>span,#creator.creator-workspace .panel-head-actions output { display:none; }
 #creator.creator-workspace .workspace-layout { grid-template-columns:62px minmax(0,1fr); gap:8px; }
 #creator.creator-workspace .tab { min-height:32px; padding:6px; font-size:9px; }
 #creator.creator-workspace .tab-grid { padding-right:5px; }
 .workspace-section-bar { min-height:32px; padding-bottom:7px; margin-bottom:9px; }
 .workspace-section-bar>strong { font-size:16px; }
 .studio-app #creator.creator-workspace.workspace-expanded { top:8px; left:8px; right:52px; bottom:70px; width:auto; }
 .studio-app .studio-header { top:8px; left:12px; right:auto; }
 .studio-app .title-lock { top:76px; }
 .studio-app .title-lock h1 { font-size:36px; }
 .workspace-transport { bottom:8px; left:12px; right:52px; }
 .workspace-transport .transport-track { max-width:240px; }
 .scene-activity { bottom:78px; max-width:34vw; }
}
@media(prefers-reduced-motion:reduce) { .workspace-found { transition:none; } }

.studio-app .stage-canvas,.studio-app.creator-open .stage-canvas { width:var(--workspace-preview-width,100vw)!important; height:var(--workspace-preview-height,100dvh)!important; left:0; top:0; }
.studio-app .film { opacity:.055; }

@media(max-width:700px) and (orientation:portrait) { .studio-app.creator-open .title-lock { top:65px; } .studio-app.creator-open .title-lock h1 { font-size:30px; } .studio-app.creator-open .title-lock p { font-size:8px; } }

#creator.creator-workspace .slots { max-width:660px; }
#creator.creator-workspace .slot-thumb { background-size:contain; background-repeat:no-repeat; background-position:center; }

.scene-activity { bottom:94px; max-width:min(430px,calc(var(--workspace-preview-width,100vw) - 44px)); }
@media(max-width:700px) and (orientation:portrait) { .scene-activity { top:108px; bottom:auto; } }
@media(max-height:600px) and (orientation:landscape) { .scene-activity { bottom:78px; left:12px; padding:8px; } .scene-activity>span { display:none; } .scene-activity button { padding:6px; font-size:10px; } }

.creator-open .free-look-hint { display:none; }

/* Studio navigation and comfortable controls. */
#creator.creator-workspace { background:#0b1018f7; }
#creator.creator-workspace .workspace-layout { grid-template-columns:102px minmax(0,1fr); gap:16px; }
.workspace-nav-group { color:#637586; font:8px/1.4 ui-monospace,monospace; letter-spacing:.09em; margin:12px 0 5px 8px; }
.workspace-nav-group:first-child { margin-top:0; }
#creator.creator-workspace .tab { font:500 11px/1.2 system-ui,sans-serif; min-height:37px; }
#creator.creator-workspace .field { display:grid; grid-template-columns:1fr; padding:0; background:none; gap:6px; }
#creator.creator-workspace .field>span { display:flex; justify-content:space-between; align-items:center; }
#creator.creator-workspace .field input:not([type=range]):not([type=color]),#creator.creator-workspace .field select,#creator.creator-workspace .field textarea { width:100%; min-height:38px; padding:9px; background:#ffffff07; border:1px solid #ffffff22; border-radius:5px; color:#e7eef6; font:12px/1.5 system-ui,sans-serif; }
#creator.creator-workspace .tab-panel>.menu-section { background:transparent; }
.workspace-section-bar { margin-bottom:8px; padding-bottom:10px; min-height:38px; }
.workspace-section-bar select { display:none; }
.workspace-section-nav { display:flex; flex-wrap:wrap; gap:5px; padding:0 0 14px; }
.workspace-section-nav button { border:1px solid #ffffff16; border-radius:5px; background:transparent; color:#9eacbb; padding:8px; cursor:pointer; font:11px/1.25 system-ui,sans-serif; }
.workspace-section-nav button[aria-pressed=true] { color:#b6effa; border-color:#00c8ea66; background:#00c8ea10; }
.workspace-section-nav[hidden] { display:none; }
.workspace-scene-search { width:100%; margin-bottom:12px; height:38px; padding:8px 12px; color:#fff; background:#ffffff08; border:1px solid #ffffff22; border-radius:5px; font:12px system-ui,sans-serif; }
#creator.creator-workspace .terrain-buttons { gap:8px; }
#creator.creator-workspace .terrain-button { min-height:62px; }
#creator.creator-workspace .slot { min-height:88px; }
#creator.creator-workspace .slot-animation { font:10px/1.2 system-ui,sans-serif; text-transform:none; }
.workspace-play-mode { border:1px solid #68dbed!important; background:#093441!important; color:#b6f3ff!important; }
.workspace-eyebrow { font:10px ui-monospace,monospace; letter-spacing:.12em; color:#78d8e9; }
.create-intro h2 { font:600 25px/1.2 system-ui,sans-serif; color:#f0f6fb; margin:10px 0; }
.create-intro p { font:12px/1.65 system-ui,sans-serif; color:#a4b5c4; margin-bottom:18px; }
#creator.creator-workspace .photo-avatar-stage { width:100%; max-height:250px; aspect-ratio:1.5; background:#111b25; border:1px solid #ffffff26; border-radius:8px; }
#photoAvatarEmpty { color:#7c8e9f; font:12px system-ui,sans-serif; padding:30px; text-align:center; }
.photo-avatar-stage.has-photo #photoAvatarEmpty,.photo-avatar-stage.is-camera-active #photoAvatarEmpty { display:none; }
.photo-avatar-stage video,.photo-avatar-stage canvas { object-fit:contain; }
.selfie-section>output { display:block; font:10px ui-monospace,monospace; color:#73debf; margin:12px 0; }
.selfie-fit { margin:14px 0; border:1px solid #ffffff1c; border-radius:5px; padding:12px; }
.selfie-fit summary { cursor:pointer; font:12px system-ui,sans-serif; color:#aec6d8; margin-bottom:12px; }
@media(max-width:700px) { #creator.creator-workspace .workspace-layout { grid-template-columns:64px minmax(0,1fr); gap:9px; } .workspace-section-nav { display:none; } .workspace-section-bar select { display:block; } .workspace-nav-group { font-size:6px; margin-left:4px; } #creator.creator-workspace .tab { font-size:10px; min-height:33px; } .studio-header-actions .workspace-play-mode { padding:6px; } }
@media(max-height:600px) and (orientation:landscape) { #creator.creator-workspace .workspace-layout { grid-template-columns:65px minmax(0,1fr); gap:8px; } .workspace-nav-group { display:none; } .workspace-section-nav { display:none; } .workspace-section-bar select { display:block; } #creator.creator-workspace .tab { min-height:31px; font-size:10px; } }

/* Rhythm games use the soundtrack clock and leave the scene visible. */
.rhythm-game[hidden] { display:none; }
.rhythm-game { position:fixed; inset:0; z-index:70; color:#eef6ff; background:linear-gradient(90deg,#020812ba,transparent 55%,#02081244); font-family:system-ui,sans-serif; }
.game-open .studio-header,.game-open .title-lock,.game-open .topbar,.game-open .quick-status-controls,.game-open .menu-collapse-toggle { display:none!important; }
.game-head { display:flex; align-items:center; gap:12px; padding:20px 28px; background:#050c17d9; border-bottom:1px solid #ffffff1c; }
.game-head>div:first-child { margin-right:auto; }
.game-head span { font-size:10px; color:#8aafc4; letter-spacing:.12em; }
.game-head h2 { font-size:24px; margin:4px 0 0; }
.game-stats { display:flex; gap:24px; margin-right:24px; }
.game-stats span { display:grid; gap:4px; letter-spacing:0; }
.game-stats strong { font:600 22px ui-monospace,monospace; color:#b8f4ff; }
.rhythm-game button { min-height:42px; border:1px solid #ffffff35; background:#101d2de8; color:#e6f3ff; border-radius:7px; padding:10px 14px; cursor:pointer; }
.game-stage { position:absolute; top:102px; bottom:0; left:0; right:0; }
.game-highway { position:absolute; width:min(480px,44vw); height:calc(100% - 105px); top:0; left:5vw; border:1px solid #b2eaff33; border-top:0; border-radius:0 0 14px 14px; background:repeating-linear-gradient(90deg,#071725df 0%,#071725df calc(20% - 1px),#4c6d8555 calc(20% - 1px),#4c6d8555 20%); overflow:hidden; }
.game-receptors { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:space-around; padding:0 4px; border-top:2px solid #9aeaffaa; }
.game-receptors button { font:700 32px system-ui,sans-serif; width:18%; height:54px; padding:0; margin-top:4px; touch-action:none; background:#162c3c; }
.game-receptors .is-held { background:#137b94; box-shadow:0 0 24px #4ed8f855; }
.game-note { position:absolute; top:0; width:16%; height:45px; margin-left:2%; border-radius:7px; display:grid; place-content:center; font:700 33px/1 system-ui,sans-serif; color:#0a1928; background:#a6f4fa; box-shadow:0 4px 16px #0008; will-change:transform; }
.game-note[data-lane="1"] { left:20%; background:#f5cc87; }.game-note[data-lane="2"] { left:40%; background:#c3a9f6; }.game-note[data-lane="3"] { left:60%; background:#99e8b7; }.game-note[data-lane="4"] { left:80%; background:#f1f7ff; }
.game-note small { font:8px ui-monospace,monospace; text-align:center; }
.game-note[hidden] { display:none; }
.game-feedback { position:absolute; top:34%; right:4vw; width:43vw; text-align:center; font:700 38px/1.2 system-ui,sans-serif; text-shadow:0 3px 25px #000; pointer-events:none; }
.game-feedback .game-results { pointer-events:auto; padding:26px; background:#06111fea; border:1px solid #91deff44; border-radius:16px; }
.game-results>span { font:10px ui-monospace,monospace; color:#98d4ef; }.game-results h2 { font-size:30px; }.game-results p { font-size:14px; line-height:1.8; font-weight:400; }.game-results button { font-size:13px; margin:6px; }
.game-camera { position:absolute; right:28px; bottom:110px; width:230px; border-radius:12px; overflow:hidden; border:1px solid #ffffff33; background:#071422; }
.game-camera video { width:100%; display:block; transform:scaleX(-1); }.game-camera span { display:block; padding:8px; font-size:11px; color:#d4ebf8; }
.rhythm-game[data-input=keyboard] .game-camera { display:none; }
.game-progress { position:absolute; bottom:65px; height:4px; left:5vw; right:5vw; background:#ffffff20; }.game-progress span { display:block; height:100%; background:#64dce9; width:0; }
.game-instructions { position:absolute; bottom:13px; width:100%; text-align:center; font:12px/1.5 system-ui,sans-serif; color:#c1d7e4; }
.game-lobby { width:min(620px,calc(100vw - 24px)); }.game-lobby h2 { color:#f0f8ff; }.game-mode-cards { display:grid; gap:8px; margin:20px 0; }.game-mode-cards label { display:grid; grid-template-columns:24px 1fr; gap:5px; border:1px solid #ffffff26; border-radius:8px; padding:14px; cursor:pointer; }.game-mode-cards label:has(input:checked) { border-color:#53d6e9; background:#17465755; }.game-mode-cards input { grid-row:span 2; accent-color:#62dff0; }.game-mode-cards strong { font-size:15px; }.game-mode-cards span { font-size:12px; color:#9ab2c6; }.game-lobby .studio-field { display:grid; gap:7px; margin-bottom:15px; font-size:12px; }.game-lobby select,.game-lobby input[type=number] { padding:10px; border-radius:5px; border:1px solid #ffffff2c; background:#152334; color:#e2f1fc; }.game-lobby-status { color:#ffd1a2!important; }.game-lobby [data-start-game] { width:100%; padding:14px; }
@media(max-width:700px) { .game-head { padding:12px; gap:7px; flex-wrap:wrap; }.game-head h2 { font-size:17px; }.game-head>div:first-child { flex:1; }.game-stats { order:4; width:100%; justify-content:space-around; margin:0; gap:10px; }.game-stats strong { font-size:17px; }.game-head button { padding:8px; font-size:11px; min-height:36px; }.game-stage { top:118px; }.game-highway { width:90vw; left:5vw; height:calc(100% - 120px); }.game-feedback { top:22%; left:10vw; width:80vw; font-size:28px; }.game-camera { right:12px; top:0; bottom:auto; width:100px; opacity:.9; }.game-camera span { font-size:8px; padding:4px; }.game-feedback:has(.game-results) { z-index:5; }.game-results h2 { font-size:23px; }.game-instructions { font-size:10px; padding:0 16px; }.game-progress { bottom:78px; } }
@media(max-height:600px) and (orientation:landscape) { .game-head { padding:8px 14px; }.game-head h2 { font-size:18px; }.game-head span { font-size:8px; }.game-stats strong { font-size:18px; }.game-stage { top:66px; }.game-highway { height:calc(100% - 60px); }.game-progress { bottom:42px; }.game-instructions { bottom:4px; font-size:10px; }.game-camera { width:140px; bottom:65px; }.game-receptors button { height:39px; font-size:25px; }.game-feedback { font-size:27px; } }

/* Four cue lanes for arrows/poses, five only when the round includes a freeze. */
.game-highway { background:repeating-linear-gradient(90deg,#071725df 0%,#071725df calc(100% / var(--game-lanes,4) - 1px),#4c6d8555 calc(100% / var(--game-lanes,4) - 1px),#4c6d8555 calc(100% / var(--game-lanes,4))); }
.game-receptors { grid-template-columns:repeat(var(--game-lanes,4),1fr); }
.game-receptors button[hidden] { display:none; }
.game-note { width:calc(100% / var(--game-lanes,4) - 4%); }
.game-note[data-lane="1"] { left:calc(100% / var(--game-lanes,4)); }.game-note[data-lane="2"] { left:calc(200% / var(--game-lanes,4)); }.game-note[data-lane="3"] { left:calc(300% / var(--game-lanes,4)); }.game-note[data-lane="4"] { left:calc(400% / var(--game-lanes,4)); }

.game-note.is-active-hold { background:linear-gradient(to top,#68e8ab var(--hold-progress,0%),#e3d5ff var(--hold-progress,0%)); box-shadow:0 0 22px #b9ffcf88; }

.game-lobby-help { margin:14px 0; color:#9eafbf; font:12px/1.6 system-ui,sans-serif; }
.game-lobby-help summary { cursor:pointer; color:#b4e8f0; }
.game-lobby [data-start-game] { width:100%; min-height:44px; }
.game-lobby [data-start-game] { background:#00d4ff; color:#041019; border:1px solid #6ce7ff; border-radius:6px; font:600 14px/1.2 system-ui,sans-serif; cursor:pointer; }
.game-lobby [data-start-game]:disabled { opacity:.45; cursor:wait; }