/* Camera-first dance floor. Kept separate from the Creator's docked panels. */
.dance-lab { z-index:110; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:radial-gradient(ellipse at 22% 28%,#17404e99,transparent 55%),#050e15f5; color:#eef8fa; font:14px/1.5 system-ui,sans-serif; }
.dance-lab[hidden] { display:none!important; }
.dance-lab *, .lab-lobby * { box-sizing:border-box; }
.dance-lab button,.lab-lobby button { border:1px solid #d8f9ff26; border-radius:30px; color:#e5f5f7; background:#a5e7f00b; min-height:44px; padding:10px 18px; cursor:pointer; font:600 12px/1.3 system-ui,sans-serif; }
.dance-lab button:hover,.lab-lobby button:hover { background:#c9faff1b; border-color:#c2f7ff66; }
.dance-lab button:focus-visible,.lab-lobby button:focus-visible { outline:2px solid #acf0e2; outline-offset:3px; }
.dance-lab button:disabled,.lab-lobby button:disabled { opacity:.45; cursor:default; }
.dance-lab button[hidden],.lab-lobby [hidden] { display:none!important; }
.lab-header { display:flex; align-items:center; gap:9px; padding:18px 28px; border-bottom:1px solid #ffffff12; }
.lab-header>div { margin-right:auto; }.lab-header h2 { margin:3px 0 0; font-size:20px; font-weight:500; letter-spacing:-.03em; }
.lab-eyebrow { font:600 10px/1.5 ui-monospace,monospace; letter-spacing:.15em; color:#abd6d9; }
.lab-score { font:500 13px ui-monospace,monospace; color:#b7f6e7; margin-right:15px; }
.lab-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; min-height:0; }
.lab-floor { position:relative; min-width:0; min-height:0; overflow:hidden; }
.lab-render { position:absolute; inset:0; }.lab-render canvas { display:block; width:100%; height:100%; }
.lab-person-labels { position:absolute; top:28px; left:14%; right:14%; display:flex; justify-content:space-between; pointer-events:none; }
.lab-person-labels>span { text-align:center; font:600 10px/1.5 ui-monospace,monospace; letter-spacing:.12em; color:#d0f6ef; }
.lab-person-labels>span:last-child { color:#eed5a2; }.lab-person-labels small { display:block; font:11px/1.6 system-ui; letter-spacing:0; opacity:.65; }
.lab-track { position:absolute; bottom:23px; left:24px; right:24px; display:flex; align-items:center; gap:8px; color:#91b4be; font-size:10px; letter-spacing:.04em; }
.lab-track span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.lab-track i { width:5px; height:5px; border-radius:50%; background:#8bdfc7; flex-shrink:0; }
.lab-count { position:absolute; top:17%; left:50%; transform:translateX(-50%); font:600 clamp(24px,4vw,56px)/1 system-ui; color:#c5f4e6; text-shadow:0 2px 24px #050f16; }
.lab-coaching { margin:20px 20px 20px 0; padding:26px; align-self:center; max-height:calc(100% - 40px); overflow:auto; border:1px solid #e1fcff1b; border-radius:24px; background:linear-gradient(145deg,#d0f3ff0c,#c3eaff03); backdrop-filter:blur(24px); scrollbar-width:thin; }
.lab-coaching h3 { margin:12px 0 14px; font-size:32px; line-height:1.1; font-weight:500; letter-spacing:-.05em; }
.lab-coaching p { color:#a6bdc7; font-size:13px; line-height:1.6; }
.lab-meter { height:5px; margin:25px 0 12px; border-radius:10px; background:#d5f5ff16; overflow:hidden; }
.lab-meter span { display:block; height:100%; width:0; border-radius:10px; background:linear-gradient(90deg,#67caba,#c6f4ce); transition:width .1s linear; }
.lab-coaching .lab-feedback { color:#c6e5df; min-height:42px; font-size:12px; }
.lab-steps { display:flex; gap:7px; margin:15px 0 25px; }.lab-steps:empty{display:none;}.lab-steps span { height:22px; width:22px; border-radius:50%; display:grid; place-items:center; font:10px ui-monospace; background:#bbd9ed0b; color:#71919d; }
.lab-steps .is-current { box-shadow:0 0 0 1px #a1dec9; color:#d9ffec; }.lab-steps .is-done { background:#a1dec9; color:#14352e; }
.lab-actions { display:flex; flex-wrap:wrap; gap:8px; }.lab-actions .lab-primary { width:100%; }
.dance-lab .lab-primary,.lab-lobby .lab-primary { background:#c3eee0; color:#0b2724; border-color:#d1faec; }.dance-lab .lab-primary:hover,.lab-lobby .lab-primary:hover { background:#ddfff2; }
.lab-actions button { font-size:11px; padding:10px 13px; }
.lab-coaching .lab-footnote { font-size:10px; color:#708f9a; margin:22px 0 0; }
.lab-sync { border-top:1px solid #cdeafa17; padding-top:15px; margin-top:20px; font-size:11px; color:#a2c8ca; }.lab-sync summary { cursor:pointer; min-height:30px; }.lab-sync label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:12px 0; }.lab-sync input { width:75px; }.lab-sync input,.lab-sync select,.lab-lesson-select select { color:#d4eeee; background:#0a1b24; border:1px solid #b6d7e42a; border-radius:9px; padding:10px; min-height:44px; }.lab-sync p { font-size:11px; }.lab-sync small { display:block; margin-top:10px; }
.lab-footer { display:flex; align-items:center; gap:20px; min-height:62px; border-top:1px solid #ffffff12; padding:12px 28px max(12px,env(safe-area-inset-bottom)); color:#8eb0b9; font:10px/1.4 ui-monospace,monospace; }.lab-footer>span:first-child { margin-right:auto; }.lab-beats { display:flex; gap:5px; }.lab-beats i { font-style:normal; display:grid; place-items:center; height:25px; width:25px; border-radius:50%; border:1px solid #d3ffff16; transition:background .1s; }.lab-beats i.is-active { background:#c3eee0; color:#0b2724; }
.lab-lobby { width:min(720px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); border:1px solid #c1e7ed35; border-radius:28px; padding:36px; background:radial-gradient(ellipse at 0 0,#163b43,#08131def 75%); color:#eef8f9; box-shadow:0 25px 90px #0009; backdrop-filter:blur(35px); font-family:system-ui,sans-serif; }
.lab-lobby::backdrop { background:#02070dc4; backdrop-filter:blur(10px); }.lab-lobby h2 { font-size:48px; line-height:1.04; letter-spacing:-.065em; font-weight:500; margin:22px 0 16px; }.lab-lobby>p { font-size:13px; line-height:1.65; color:#a6c0ca; }.lab-mode-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:25px 0; }.lab-mode-cards label { position:relative; display:flex; flex-direction:column; gap:7px; padding:20px; border:1px solid #d7faff20; border-radius:17px; cursor:pointer; background:#e5ffff03; }.lab-mode-cards label:has(input:checked) { background:#b0efdc0d; border-color:#a0e3d280; }.lab-mode-cards input { position:absolute; right:16px; top:16px; accent-color:#b9e7d9; width:16px; height:16px; }.lab-mode-number { color:#77a6a9; font:10px ui-monospace; }.lab-mode-cards strong { font-size:17px; font-weight:500; letter-spacing:-.02em; }.lab-mode-cards label>span:last-child { font-size:12px; line-height:1.5; color:#94b4be; }.lab-lesson-select { display:flex; align-items:center; gap:15px; font-size:12px; color:#abc4cc; }.lab-lesson-select select { flex:1; }.lab-lobby .lab-lobby-note { font-size:11px; color:#87a4af; margin:18px 0; }.lab-lobby-actions { display:flex; gap:10px; }.lab-lobby-actions .lab-primary { flex:1; }.lab-lobby [data-error] { color:#ffd1a6; }
@media(max-width:850px) { .lab-layout { grid-template-columns:minmax(0,1fr) 285px; }.lab-coaching { padding:20px; margin-right:12px; }.lab-header { padding:12px 16px; }.lab-coaching h3 { font-size:28px; }.lab-footer { padding-left:16px; padding-right:16px; gap:10px; }.lab-footer [data-next] { display:none; }.lab-person-labels { left:8%; right:8%; } }
@media(max-width:900px) and (orientation:portrait) { .lab-header { flex-wrap:wrap; gap:6px; padding:12px 12px 8px; padding-top:max(12px,env(safe-area-inset-top)); }.lab-header h2 { font-size:17px; }.lab-header .lab-eyebrow { font-size:8px; }.lab-header button { padding:9px 12px; font-size:10px; }.lab-header>div { width:100%; }.lab-score { margin-right:auto; font-size:11px; }.lab-layout { grid-template-columns:1fr; grid-template-rows:minmax(210px,1fr) auto; overflow:auto; }.lab-floor { min-height:260px; }.lab-coaching { margin:0 12px 10px; padding:17px 19px; max-height:none; align-self:stretch; border-radius:19px; }.lab-coaching h3 { font-size:26px; margin:7px 0; }.lab-coaching p { margin:6px 0; font-size:12px; }.lab-meter { margin:14px 0 7px; }.lab-coaching .lab-feedback { min-height:0; }.lab-steps { margin:12px 0; }.lab-coaching .lab-footnote { display:none; }.lab-sync { margin-top:12px; padding-top:10px; }.lab-actions button { min-height:44px; }.lab-footer { flex-wrap:wrap; padding:8px 12px max(8px,env(safe-area-inset-bottom)); gap:6px; }.lab-footer>span:first-child { font-size:9px; flex:1; }.lab-beats i { width:20px; height:20px; font-size:9px; }.lab-beats { gap:3px; }.lab-person-labels { top:8px; left:14%; right:14%; }.lab-person-labels small { font-size:9px; }.lab-track { bottom:8px; left:14px; font-size:9px; }.lab-count { font-size:25px; top:17%; }.lab-lobby { padding:25px 20px; }.lab-lobby h2 { font-size:38px; margin-top:20px; }.lab-mode-cards { gap:8px; margin:20px 0; }.lab-mode-cards label { padding:15px; }.lab-mode-cards strong { font-size:15px; }.lab-mode-cards label>span:last-child { font-size:11px; }.lab-lobby-actions { flex-wrap:wrap; }.lab-lobby-actions button { flex:1; }.lab-lesson-select { flex-direction:column; align-items:stretch; gap:6px; } }
@media(max-height:550px) and (orientation:landscape) { .lab-header { padding:7px 15px; }.lab-header h2 { font-size:15px; }.lab-header .lab-eyebrow { font-size:8px; }.lab-layout { grid-template-columns:minmax(0,1fr) 300px; }.lab-coaching { margin:8px 10px 8px 0; max-height:calc(100% - 16px); padding:16px; }.lab-coaching h3 { font-size:24px; margin:8px 0; }.lab-coaching p { margin:8px 0; font-size:12px; }.lab-coaching .lab-footnote { display:none; }.lab-meter { margin:14px 0 8px; }.lab-steps { margin:10px 0; }.lab-footer { min-height:40px; padding:7px 15px; }.lab-person-labels { top:8px; }.lab-person-labels small { font-size:9px; }.lab-track { bottom:7px; }.lab-count { top:12%; font-size:24px; } }
@media(prefers-reduced-motion:reduce) { .lab-meter span,.lab-beats i { transition:none; } }
.lab-person-labels { left:0; right:0; }
.lab-person-labels>span { position:absolute; transform:translateX(-50%); white-space:nowrap; }

.lab-frame-checks { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.lab-frame-checks[hidden],.lab-frame-preview[hidden] { display:none!important; }
.lab-frame-checks span { padding:5px 9px; border:1px solid #e4bc8040; border-radius:20px; color:#e4bc80; font-size:11px; }
.lab-frame-checks span::before { content:'○ '; }.lab-frame-checks .is-found { color:#b4f4dc; border-color:#b4f4dc60; }.lab-frame-checks .is-found::before { content:'✓ '; }
.lab-render .lab-frame-preview { position:absolute; left:2%; top:13%; width:47%; height:72%; object-fit:contain; border-radius:12px; background:#07151d; }

.lab-workout-select { display:flex; align-items:center; gap:15px; font-size:12px; color:#abc4cc; }.lab-workout-select select { flex:1; padding:12px; min-height:44px; color:#d4eeee; background:#0a1b24; border:1px solid #b6d7e42a; border-radius:9px; }.lab-workout-select[hidden] { display:none; }.lab-steps { flex-wrap:wrap; }.lab-mode-cards label:has(input[value="workout"]) { grid-column:1/-1; background:linear-gradient(115deg,#b0efdc15,#b0efdc03); }