.workshop-panel{border:1px solid #697c9c;border-radius:12px;background:#19263e;padding:12px;margin:8px 0}.workshop-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.workshop-heading small{font-size:9px;letter-spacing:.12em;color:#b6cce8}.workshop-heading b{font-size:13px;color:#e0ff7b}.workshop-note{font-size:10px;line-height:1.4;color:#c2d1e6;margin:7px 0}.phrase-cards{display:grid;grid-template-columns:1fr 1fr;gap:5px;list-style:none;padding:0;margin:8px 0}.phrase-cards li{display:flex;align-items:center;gap:7px;padding:7px;background:#2b3854;border:1px solid #697c9c55;border-radius:7px;min-width:0}.step-number{font-size:17px;color:#a1b9d7}.phrase-cards li>div{min-width:0;flex:1}.phrase-cards b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phrase-cards small{display:block;font-size:9px;color:#b5c7df;margin-top:3px}.phrase-cards select{padding:4px;font-size:9px;width:68px;background:#19263e}.card-tools{display:flex;gap:1px}.card-tools button{padding:3px 4px;font-size:11px;background:transparent}.phrase-cards li[data-state=current]{border-color:#e0ff7b;box-shadow:inset 3px 0 #e0ff7b}.phrase-cards li[data-state=done]{opacity:.6}.step-check{color:#e0ff7b}.phrase-meter{font-size:9px;color:#afc7e7}.craft-actions{display:flex;gap:6px;margin-top:10px}.craft-actions button{font-size:10px;padding:7px}.craft-actions .primary{margin-left:auto}.workshop-status{font-size:11px;color:#e0ff7b;margin:9px 0 0;min-height:15px}.player[data-role=composer] .arena{height:160px!important}.player[data-role=composer] .arena-info,.player[data-role=composer] .trail{display:none}.player[data-workshop=true] .arena{height:clamp(180px,calc(100dvh - 670px),330px)}.player[data-workshop=true] .phrase-cards{grid-template-columns:1fr}.player[data-role=dancer] .phrase-cards{grid-template-columns:1fr 1fr}.player[data-role=composer] .coach,.player[data-role=composer] .release,.player[data-role=composer] .flow-choices{display:none!important}.workshop-launch{display:flex!important;align-items:center;justify-content:space-between;border:1px solid #bbcfef!important;border-radius:10px;padding:10px 13px!important;margin-top:8px;width:100%;text-align:left;background:#2c3959!important}.workshop-launch b{font-size:14px}.workshop-launch small{font-size:10px;color:#bfcee5}.workshop-options{margin-top:10px;padding:12px;background:#2a3752;border-radius:10px}.workshop-options p{font-size:11px!important;margin:0 0 9px}.workshop-options select{width:100%;margin:5px 0;padding:7px}.workshop-options button{width:100%;margin-top:8px}.workshop-recap{color:#cfee8b!important}
@media(max-width:850px){.workshop-heading{align-items:flex-start;flex-direction:column;gap:4px}.phrase-cards li{flex-wrap:wrap}.card-tools{margin-left:auto}.player[data-role=dancer] .phrase-cards{grid-template-columns:1fr}.workshop-launch small{max-width:55%;text-align:right}}
.player[data-workshop=true] .coach,.player[data-workshop=true] .flow-choices{display:none!important}.player[data-role=dancer] .arena{height:clamp(220px,calc(100dvh - 530px),380px)}.player[data-role=dancer] .phrase-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:6px 0}.player[data-role=dancer] .phrase-cards li{padding:5px}.player[data-role=dancer] .phrase-cards small{display:none}.player[data-role=dancer] .workshop-note{display:none}.player[data-role=dancer] .workshop-panel{padding:9px}.player[data-role=dancer] .phrase-meter{display:none}.phrase-beats{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin:7px 0}.phrase-beats i{font-style:normal;font-size:9px;text-align:center;border-top:3px solid var(--beat-color);color:#cad6e8;background:#ffffff08;border-radius:2px;padding:2px}.phrase-beats i[data-played=true]{background:#dfff76;color:#14242f;border-color:#dfff76}
.player[data-role=composer] .dance-signal{display:none}.player[data-role=dancer] .release{margin-top:4px}
@media(min-width:1001px){.player[data-role=composer] .phrase-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.player[data-role=composer] .phrase-cards li{flex-wrap:wrap}.player[data-role=composer] .card-tools{margin-left:auto}.player[data-role=composer] .phrase-cards small{display:none}}
.player .dance-signal{bottom:8px}

.player[data-role=composer] .arena{opacity:1}

/* One live demonstration reuses the composer's stage and fits above the cards. */
.craft-demo{position:absolute;inset:12px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:12px}
.craft-demo[hidden]{display:none}.craft-demo>div{display:flex;flex-direction:column;gap:5px;max-width:38%;text-shadow:0 1px 6px #000;background:#111b30cc;padding:9px;border-radius:8px}
.craft-demo small{font-size:8px;letter-spacing:.1em;color:#defd80}.craft-demo b{font-size:13px;color:#fff4dc}.craft-demo span{font-size:9px;line-height:1.35;color:#d2e0f0}
.craft-demo button{pointer-events:auto;padding:6px 8px;font-size:10px;background:#142338dd}
.phrase-cards .step-preview{display:block;max-width:100%;padding:3px 0;background:transparent;border:0;border-radius:3px;font:inherit;font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.step-preview span{font-size:8px;color:#c5ddfa}.step-preview[aria-pressed=true],.step-preview[aria-pressed=true] span{color:#e0ff7b}.step-preview:focus-visible{outline:2px solid #e0ff7b;outline-offset:3px}
.player[data-role=composer] .pad[data-confirm=true]{border-color:#e0ff7b;box-shadow:inset 0 0 0 1px #e0ff7b}.player[data-role=composer] .pad[data-confirm=true]:after{content:'+';position:absolute;right:5px;top:2px;color:#e0ff7b;font-size:14px;font-weight:800}
.player[data-role=composer] .workshop-panel{padding:9px}.player[data-role=composer] .workshop-note{margin:5px 0}
.player[data-role=composer] .phrase-cards{margin:6px 0;gap:4px}.player[data-role=composer] .phrase-cards li{padding:4px;gap:5px}
.player[data-role=composer] .phrase-cards select{padding:3px;width:65px}.player[data-role=composer] .craft-actions{margin-top:6px}
.player[data-role=composer] .workshop-status{margin-top:6px}.player[data-role=composer] .phrase-beats{max-height:42px;overflow-y:auto;margin:5px 0}
@media(min-width:1001px) and (max-height:800px){.player[data-role=composer] .pad{height:32px}.player[data-role=composer] .arena{height:145px!important}}
@media(max-width:850px){.craft-demo{inset:6px}.craft-demo>div{max-width:40%;padding:6px}.craft-demo b{font-size:11px}.craft-demo span{display:none}.craft-demo button{align-self:flex-end}}