:root {
  color-scheme: dark;
  color: #e5e8f1;
  background: #11131a;
  --accent: #a394ff;
  --line: #2c303f;
  --muted: #969db1;
  --surface: #191c26;
  --surface-raised: #222634;
}
body { background: #11131a; }
button, select { background: #222634; color: #d4d9e9; border-color: var(--line); }
button:hover:not(:disabled) { background: #302b48; border-color: #7e70bc; color: #eee9ff; }
button:disabled { opacity: .45; }
button, input, select { font-family: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #b2a5ff; outline-offset: 3px; }
.primary, .play { background: #9d8bf4; color: #15101f; border-color: #9d8bf4; }
.primary:hover:not(:disabled), .play:hover:not(:disabled) { background: #b7a8ff; color: #15101f; }
.topbar, .sidebar, .timeline { background: var(--surface); }
.brand { color: #f0f0f8; }
.brand-icon { color: #b4a3ff; }
.brand .beta { color: #8f96ad; }
.project-title input:disabled { opacity: .7; }
.project-title span { color: #a6adc1; }
#save-status[data-kind=saved] { color: #85cfaf; }
#save-status[data-kind=pending] { color: #d8bc7f; }
#save-status[data-kind=error] { color: #f49cae; }
input:not([type=checkbox]):not([type=range]):not([type=color]) {
  background: #141720; border-color: #343a4d; color: #e6e9f3;
}
.project-title input:not([type=checkbox]):not([type=range]):not([type=color]) { background: transparent; border: 0; padding: 0; }
input[type=color] { background: #141720; border-color: #343a4d; }
input[type=range], input[type=checkbox] { accent-color: #ac9aff; }
.section-label, .eyebrow { color: #929bb3; }
.section-label span { color: #bdadff; }
.intro { color: #969eb3; }
.dancer-row { background: transparent; color: #c6cdde; }
.dancer-row.active { background: #2c2643; border-color: #4d406b; color: #d1c4ff; }
.dancer-row .number, h2 span { color: #858fa7; }
label, .checkbox { color: #a0a9bf; }
.danger { color: #e49eaf; background: transparent; }
.local-note, .audio-note { color: #8f99af; }
.status-dot { background: #85cfaf; }
.stage-surround { background: #161923; border-color: #303647; }
#stage { background: #1d2230; border-color: #3a4258; box-shadow: 0 12px 40px #0002; }
#stage pattern path { stroke: #30384b; }
#stage > line { stroke: #424c65; }
#stage .dancer text:last-child { fill: #b7c0d7; }
svg .dancer > circle[stroke="#fff"] { stroke: #1d2230; }
.stage-direction, .audience { color: #929db6; }
.audience span { background: #3a4256; }
.stage-footer { color: #969fb5; }
.live-badge { color: #baacf3; }
.formation-card { background: #1d2230; border-color: #33394b; color: #d5daea; }
.formation-card.active { background: #302841; border-color: #ad99ff; }
.card-meta { background: #1b1f2a; }
.formation-card.active .card-meta { background: #2b243d; }
.card-meta span, .time-label { color: #9aa4bc; }
#time-current { color: #d4c8ff; }
.transport #stop { color: #c2c9dc; }
.workspace { min-height: calc(100vh - 145px); transition: opacity .2s; }
.workspace[inert] { opacity: .48; }
.cloud-bar { display: flex; align-items: center; gap: 20px; min-height: 61px; padding: 11px 30px; border-bottom: 1px solid var(--line); background: #151820; }
.cloud-library { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.cloud-symbol { color: #b6a4ff; font-size: 23px; margin-right: 1px; }
#cloud-projects { width: 195px; border: 1px solid #343a4d; border-radius: 7px; padding: 8px 28px 8px 10px; font-size: 11px; text-overflow: ellipsis; }
#refresh-projects { padding: 5px 10px; font-size: 18px; }
.cloud-info { display: flex; flex: 1; align-items: center; flex-wrap: wrap; gap: 8px; color: #a1aac0; font-size: 10px; line-height: 1.7; }
.account { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
#account-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b4bdd2; font-size: 11px; }
#sign-in { border-color: #65548f; background: #302641; color: #e3d8ff; }
#sign-out { font-size: 10px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#toast { background: #343045; border: 1px solid #645480; color: #eee8ff; max-width: min(620px, calc(100vw - 32px)); width: max-content; }
body.playing .stage-surround { border-color: #8871ca; box-shadow: 0 0 22px #987de80b; }
@media (max-width: 1100px) {
  .cloud-bar { flex-wrap: wrap; gap: 10px 20px; padding: 10px 18px; }
  .cloud-info { order: 3; flex-basis: 100%; }
  .account { margin-left: auto; }
}
@media (max-width: 700px) {
  .cloud-bar { padding: 10px 16px; gap: 8px; }
  #cloud-projects { width: 160px; }
  #account-name { display: none; }
  #sign-in { font-size: 10px; padding: 9px; }
  .cloud-library { gap: 5px; }
  .cloud-symbol { font-size: 19px; }
  .sidebar { background: #191c26; }
  .workspace { min-height: 0; }
}