html { scroll-padding-top:76px; }
.btn-demo { border-color:rgba(6,182,212,.65); background:rgba(6,182,212,.07); }
.btn-demo:hover { background:rgba(6,182,212,.14); }

.demo-section {
  position:relative;
  overflow:hidden;
  padding:76px 0 84px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse at 12% 12%,rgba(139,92,246,.12),transparent 38%),
    radial-gradient(ellipse at 90% 82%,rgba(6,182,212,.08),transparent 36%),
    #0d0d14;
}
.demo-intro { max-width:760px; margin:0 auto 34px; text-align:center; }
.demo-intro .sub { margin-bottom:0; }
.demo-kicker { margin-bottom:8px; color:var(--accent2); font-size:.76rem; font-weight:800; letter-spacing:.16em; }
.demo-intro h2 { margin-bottom:10px; }
#playableTutorial > .container { max-width:1280px; }
.demo-panel {
  max-width:1220px;
  margin:0 auto;
  padding:clamp(12px,1.25vw,18px);
  border:1px solid #34334e;
  border-radius:20px;
  background:linear-gradient(145deg,rgba(24,24,37,.98),rgba(16,17,27,.98));
  box-shadow:0 28px 90px rgba(0,0,0,.36),0 0 54px rgba(139,92,246,.08);
}
.demo-app-embed { overflow:hidden; border:1px solid #343743; border-radius:12px; background:#030712; }
.demo-app-iframe { display:block; width:100%; height:clamp(620px,72vh,820px); border:0; background:#030712; }
.demo-panel-head { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.demo-step-count { margin:0 0 8px; color:var(--accent2); font-size:.82rem; font-weight:700; }
.demo-progress-track { width:min(280px,45vw); height:5px; overflow:hidden; border-radius:99px; background:#2a2a3b; }
.demo-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .3s ease; }
.demo-reset,.demo-secondary-button,.demo-delete-cue,.demo-icon-button {
  border:1px solid #37374c;
  border-radius:8px;
  padding:8px 12px;
  background:#171722;
  color:#c5c3d3;
  font:inherit;
  font-size:.8rem;
  cursor:pointer;
}
.demo-reset:hover,.demo-secondary-button:hover,.demo-icon-button:hover { border-color:#74718f; color:#fff; }
.demo-guidance {
  margin:16px 0 20px;
  padding:12px 15px;
  border-left:3px solid var(--accent2);
  border-radius:0 9px 9px 0;
  background:rgba(6,182,212,.07);
  color:#d9d8e8;
  font-size:.92rem;
}

/* A compact, static app shell around the real Songs-editor workflow. */
.demo-product-frame { overflow:hidden; border:1px solid #343743; border-radius:12px; background:#111318; color:#e5e7eb; text-align:left; }
.demo-product-topbar {
  display:flex;
  min-height:49px;
  align-items:center;
  gap:20px;
  padding:8px 15px;
  border-bottom:1px solid #292d35;
  background:#191b21;
  color:#e5e7eb;
  font-size:.76rem;
}
.demo-brand { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.demo-brand strong { color:#f3f4f6; font-size:.78rem; letter-spacing:.01em; }
.demo-brand-mark { display:grid; width:27px; height:27px; place-items:center; border-radius:7px; background:#6d52ca; color:#fff; font-size:.65rem; font-weight:800; }
.demo-project-name { overflow:hidden; color:#9ca3af; text-overflow:ellipsis; white-space:nowrap; }
.demo-preview-status { display:flex; align-items:center; gap:7px; margin-left:auto; color:#9ca3af; white-space:nowrap; }
.demo-preview-status i { width:7px; height:7px; border-radius:50%; background:#39c984; box-shadow:0 0 8px rgba(57,201,132,.5); }
.demo-product-layout { display:flex; min-height:480px; }
.demo-sidebar {
  display:flex;
  flex:0 0 82px;
  flex-direction:column;
  gap:4px;
  padding:13px 7px;
  border-right:1px solid #292d35;
  background:#17191f;
}
.demo-nav-item {
  display:flex;
  min-height:60px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:8px;
  color:#9ca3af;
  font-size:.61rem;
  line-height:1.1;
  text-align:center;
}
.demo-nav-item > span:first-child { font-size:1.1rem; line-height:1; }
.demo-nav-item.is-current { background:rgba(129,97,235,.17); color:#b5a0ff; }
.demo-product-main { flex:1; min-width:0; padding:22px; }
.demo-page-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:19px; }
.demo-page-heading h3 { margin:0; color:#f3f4f6; font-size:1.18rem; line-height:1.3; }
.demo-page-heading p { margin:4px 0 0; color:#9297a2; font-size:.72rem; }
.demo-song-editor { display:grid; grid-template-columns:minmax(190px,.72fr) minmax(0,2fr); gap:17px; align-items:stretch; }
.demo-song-list,.demo-editor { min-width:0; border:1px solid #2b2f38; border-radius:9px; background:#15171d; }
.demo-song-list { padding:12px; }
.demo-song-list > h4 { margin:0 0 10px; color:#c5c8cf; font-size:.76rem; font-weight:650; }
.demo-song-list-items { display:flex; flex-direction:column; gap:7px; }
.demo-song-option {
  display:flex;
  width:100%;
  min-width:0;
  align-items:flex-start;
  gap:9px;
  padding:10px 9px;
  border:1px solid transparent;
  border-radius:7px;
  background:#1b1e25;
  color:#e5e7eb;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .16s,border-color .16s;
}
.demo-song-option:hover { border-color:#424653; background:#20232b; }
.demo-song-option[aria-pressed="true"] { border-color:rgba(143,112,255,.67); background:rgba(106,80,193,.16); box-shadow:inset 0 0 0 1px rgba(143,112,255,.1); }
.demo-song-icon { display:grid; flex:0 0 28px; width:28px; height:28px; place-items:center; border-radius:6px; background:#292d36; color:#b5a0ff; font-size:.93rem; }
.demo-song-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:5px; }
.demo-song-copy strong { overflow:hidden; color:#e5e7eb; font-size:.72rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.demo-song-copy small { color:#9297a2; font-size:.63rem; line-height:1.4; }
.demo-editor { min-height:365px; overflow:hidden; }
.demo-editor-empty { display:flex; min-height:365px; flex-direction:column; align-items:center; justify-content:center; padding:22px; color:#9297a2; text-align:center; }
.demo-editor-empty[hidden] { display:none; }
.demo-empty-icon { display:grid; width:46px; height:46px; margin-bottom:11px; place-items:center; border:1px solid #383b45; border-radius:50%; color:#9c85f3; font-size:1.25rem; }
.demo-editor-empty h4 { margin:0 0 5px; color:#e1e3e8; font-size:.9rem; }
.demo-editor-empty p { max-width:250px; margin:0; color:#9499a4; font-size:.72rem; line-height:1.5; }
.demo-song-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid #2b2f38; }
.demo-song-heading h4 { margin:0; color:#f3f4f6; font-size:.93rem; font-weight:650; }
.demo-song-heading p { margin:5px 0 0; color:#9ca3af; font-size:.66rem; }
.demo-song-heading .demo-transport { flex:0 1 auto; gap:10px; margin:0; }
.demo-song-heading .demo-volume { gap:6px; }
.demo-song-heading .demo-volume input { width:66px; }
.demo-editor-toolbar { display:flex; align-items:center; padding:8px 14px; border-bottom:1px solid #2b2f38; }
.demo-add-cue,.demo-save-cue,.demo-play,.demo-download {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  padding:7px 11px;
  border:0;
  border-radius:7px;
  background:#7256d6;
  color:#fff;
  font:inherit;
  font-size:.72rem;
  font-weight:650;
  white-space:nowrap;
  cursor:pointer;
  transition:filter .16s,background .16s;
}
.demo-add-cue:hover:not(:disabled),.demo-save-cue:hover,.demo-play:hover:not(:disabled),.demo-download:hover { filter:brightness(1.12); }
.demo-add-cue:disabled,.demo-play:disabled { opacity:.44; cursor:not-allowed; }
.demo-add-cue > span:first-child { font-size:1rem; line-height:.8; }

.demo-cue-form { padding:13px 15px 14px; border-bottom:1px solid #30343c; background:#1b1e25; }
.demo-cue-form[hidden],.demo-editor-active[hidden] { display:none; }
.demo-form-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.demo-form-heading h5 { margin:0; color:#eceef2; font-size:.79rem; font-weight:650; }
.demo-icon-button { display:grid; width:26px; height:26px; min-width:26px; padding:0; place-items:center; border-radius:6px; font-size:1.2rem; line-height:1; }
.demo-form-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.demo-field { display:flex; min-width:0; flex-direction:column; gap:5px; color:#aeb3be; font-size:.64rem; }
.demo-field-wide { grid-column:span 2; }
.demo-field input,.demo-field select {
  width:100%;
  min-width:0;
  height:32px;
  padding:5px 8px;
  border:1px solid #3b404a;
  border-radius:5px;
  outline:none;
  background:#111318;
  color:#e5e7eb;
  font:inherit;
  font-size:.72rem;
}
.demo-field input:focus,.demo-field select:focus { border-color:#8b72ed; box-shadow:0 0 0 2px rgba(139,114,237,.18); }
.demo-targets { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0; padding:8px 9px; border:1px solid #353a44; border-radius:6px; }
.demo-targets legend { float:left; width:100%; margin-bottom:2px; color:#aeb3be; font-size:.64rem; }
.demo-fixture-toggle { padding:5px 9px; border:1px solid #3b404a; border-radius:5px; background:#111318; color:#aeb3be; font:inherit; font-size:.66rem; cursor:pointer; }
.demo-fixture-toggle.is-selected { border-color:#8069dd; background:rgba(114,86,214,.18); color:#c9bcff; }
.demo-duration-controls { display:flex; align-items:center; gap:5px; }
.demo-duration-controls input { flex:1; width:45%; }
.demo-duration-controls select { flex:1; }
.demo-duration-free[hidden] { display:none; }
.demo-text-button { align-self:flex-start; padding:0; border:0; background:transparent; color:#858b98; font:inherit; font-size:.58rem; text-align:left; text-decoration:underline; cursor:pointer; }
.demo-text-button:hover { color:#d4d7df; }
.demo-field small { min-height:1em; color:#7f8591; font-size:.58rem; }
.demo-color-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.demo-color-picker input { height:32px; padding:3px; cursor:pointer; }
.demo-color-presets { display:grid; grid-template-columns:repeat(5,18px); gap:4px; }
.demo-color-presets button { width:18px; height:18px; padding:0; border:2px solid #555b66; border-radius:4px; cursor:pointer; }
.demo-color-presets button.is-active { border-color:#e5e7eb; box-shadow:0 0 0 1px #8b72ed; }
.demo-form-error { min-height:1em; margin:9px 0 0; color:#fca5a5; font-size:.67rem; }
.demo-form-actions { display:flex; align-items:center; gap:8px; margin-top:8px; }
.demo-form-action-spacer { flex:1; }
.demo-delete-cue { border-color:#62393f; color:#ff9b9b; }
.demo-delete-cue:hover { border-color:#b04c57; background:#3b1f25; }
.demo-delete-cue[hidden] { display:none; }
.demo-save-cue { min-height:32px; }

.demo-timeline { padding:13px 14px 12px; }
.demo-timeline-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; color:#c8cbd2; font-size:.7rem; }
.demo-timeline-toolbar strong { color:#e4e6eb; font-size:.74rem; font-weight:650; }
.demo-timeline-toolbar > span { color:#9297a2; font-variant-numeric:tabular-nums; font-size:.65rem; }
.demo-timeline-scroll { overflow-x:auto; overflow-y:hidden; padding-bottom:4px; scrollbar-color:#444956 #191b21; scrollbar-width:thin; }
.demo-timeline-inner { min-width:640px; }
.demo-ruler { position:relative; height:24px; overflow:hidden; border-radius:4px 4px 0 0; background:#22252d; }
.demo-bar-label { position:absolute; top:5px; padding-left:5px; border-left:1px solid #606672; color:#aeb3bd; font-size:.59rem; line-height:13px; }
.demo-timeline-surface { position:relative; min-height:152px; overflow:hidden; border:1px solid #30343c; border-top:0; background:#13151b; cursor:crosshair; touch-action:pan-y; }
.demo-waveform { position:absolute; inset:0; width:100%; height:100%; opacity:.78; pointer-events:none; }
.demo-measure-grid,.demo-cue-blocks { position:absolute; inset:0; }
.demo-grid-line { position:absolute; top:0; bottom:0; border-left:1px solid rgba(112,118,131,.14); pointer-events:none; }
.demo-grid-line.is-bar { border-left-color:rgba(153,160,176,.32); }
.demo-cue-block {
  position:absolute;
  z-index:2;
  display:flex;
  min-width:38px;
  height:30px;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:3px 7px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:5px;
  background:var(--cue-color,#8b5cf6);
  color:#17151e;
  font:inherit;
  font-size:.58rem;
  font-weight:700;
  line-height:1.2;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 2px 7px rgba(0,0,0,.28);
}
.demo-cue-block:hover,.demo-cue-block:focus-visible { z-index:4; filter:brightness(1.12); }
.demo-cue-block small { overflow:hidden; font-size:.51rem; font-weight:500; text-overflow:ellipsis; }
.demo-playhead { position:absolute; z-index:3; top:0; bottom:0; left:0; width:2px; background:#f5f3ff; box-shadow:0 0 7px rgba(206,190,255,.7); pointer-events:none; }
.demo-playhead::before { position:absolute; top:0; left:-4px; width:10px; height:7px; border-radius:2px 2px 0 0; background:#b39cff; content:""; }
.demo-no-cues { position:absolute; top:50%; left:50%; width:max-content; max-width:85%; transform:translate(-50%,-50%); margin:0; color:rgba(185,190,202,.75); font-size:.68rem; pointer-events:none; }
.demo-no-cues[hidden] { display:none; }
.demo-seek { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; margin-top:10px; color:#959ba6; font-size:.64rem; }
.demo-seek input { width:100%; height:16px; margin:0; accent-color:#9178ef; cursor:pointer; }
.demo-transport { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.demo-transport-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.demo-play { min-width:78px; min-height:30px; padding:6px 10px; }
.demo-play span:first-child { font-size:.63rem; }
.demo-secondary-button { min-height:30px; padding:6px 10px; font-size:.67rem; }
.demo-secondary-button:disabled { opacity:.45; cursor:not-allowed; }
.demo-volume { display:flex; align-items:center; gap:8px; color:#9297a2; font-size:.63rem; white-space:nowrap; }
.demo-volume input { width:90px; accent-color:#9178ef; }
.demo-player-status { min-height:1em; margin:7px 0 0; color:#9297a2; font-size:.63rem; }
.demo-complete { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:14px; padding:14px 16px; border:1px solid rgba(6,182,212,.42); border-radius:10px; background:linear-gradient(110deg,rgba(139,92,246,.12),rgba(6,182,212,.08)); }
.demo-complete[hidden] { display:none; }
.demo-complete h3 { margin:0 0 4px; color:#fff; font-size:.95rem; }
.demo-complete p { margin:0; color:#aaa7ba; font-size:.75rem; }
.demo-download { flex:0 0 auto; min-height:34px; font-size:.72rem; text-decoration:none; }
.demo-privacy { margin:15px 0 0; color:#77758a; font-size:.72rem; text-align:center; }
.demo-section button:focus-visible,.demo-section input:focus-visible,.demo-section select:focus-visible,.demo-section a:focus-visible {
  outline:2px solid var(--accent2);
  outline-offset:3px;
}

@media (max-width:900px) {
  .demo-product-main { padding:17px; }
  .demo-song-editor { grid-template-columns:minmax(170px,.65fr) minmax(0,1.7fr); gap:12px; }
}
@media (max-width:720px) { html { scroll-padding-top:106px; } }
@media (max-width:660px) {
  .demo-section { padding:52px 0 60px; }
  .demo-panel { border-radius:15px; }
  .demo-app-iframe { height:700px; }
  .demo-product-topbar { gap:12px; padding:7px 10px; }
  .demo-project-name { display:none; }
  .demo-product-layout { flex-direction:column; }
  .demo-sidebar { flex:0 0 auto; flex-direction:row; gap:3px; overflow-x:auto; padding:5px; border-right:0; border-bottom:1px solid #292d35; }
  .demo-nav-item { flex:1 0 57px; min-height:48px; gap:3px; font-size:.57rem; }
  .demo-nav-item > span:first-child { font-size:.95rem; }
  .demo-product-main { padding:12px; }
  .demo-song-editor { grid-template-columns:1fr; }
  .demo-song-list { padding:9px; }
  .demo-song-list-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .demo-song-option { gap:6px; padding:8px 6px; }
  .demo-song-icon { flex-basis:23px; width:23px; height:23px; }
  .demo-song-copy strong { font-size:.64rem; }
  .demo-song-copy small { font-size:.57rem; }
  .demo-editor,.demo-editor-empty { min-height:330px; }
  .demo-song-heading { align-items:flex-start; flex-wrap:wrap; padding:12px; }
  .demo-song-heading .demo-transport { flex:1 1 100%; justify-content:space-between; }
  .demo-song-heading .demo-volume { width:auto; justify-content:flex-end; }
  .demo-editor-toolbar { padding:8px 12px; }
  .demo-add-cue { white-space:normal; }
  .demo-cue-form { padding:12px; }
  .demo-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-field-wide { grid-column:span 2; }
  .demo-color-fields { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .demo-timeline { padding:12px 10px; }
  .demo-transport { align-items:center; flex-direction:row; }
  .demo-volume input { width:min(25vw,100px); }
}
@media (max-width:430px) {
  .demo-panel-head { align-items:flex-start; }
  .demo-reset { padding:7px 9px; font-size:.72rem; }
  .demo-product-topbar { min-height:43px; font-size:.68rem; }
  .demo-brand strong { font-size:.7rem; }
  .demo-preview-status { font-size:.61rem; }
  .demo-product-main { padding:9px; }
  .demo-song-list-items { grid-template-columns:1fr; }
  .demo-song-option { align-items:center; }
  .demo-song-copy { flex-direction:row; align-items:center; justify-content:space-between; gap:8px; }
  .demo-song-copy small { text-align:right; }
  .demo-song-heading { flex-direction:column; }
  .demo-song-heading .demo-transport { width:100%; flex:1 1 auto; }
  .demo-song-heading .demo-volume { width:auto; }
  .demo-add-cue { align-self:flex-start; }
  .demo-form-grid { gap:8px; }
  .demo-color-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-form-actions { flex-wrap:wrap; }
  .demo-form-action-spacer { display:none; }
  .demo-form-actions > button { flex:1; }
  .demo-form-actions > .demo-delete-cue { flex:1 0 100%; }
  .demo-timeline-toolbar { align-items:flex-start; flex-direction:column; gap:3px; }
  .demo-complete { align-items:stretch; flex-direction:column; }
  .demo-download { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .demo-progress-track span,.demo-song-option,.demo-add-cue,.demo-play,.demo-download { transition:none; }
}

/* Demo-only virtual stage: a compact, keyboard-operable setup before the song editor. */
.demo-stage-setup {
  margin:0 0 16px;
  padding:12px;
  border:1px solid #343743;
  border-radius:10px;
  background:linear-gradient(115deg,#191b22 0%,#171a20 100%);
}
.demo-stage-heading,.demo-stage-heading-copy,.demo-stage-content {
  display:flex;
  align-items:center;
}
.demo-stage-heading {
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.demo-stage-heading-copy { min-width:0; gap:10px; }
.demo-stage-step {
  display:grid;
  flex:0 0 30px;
  width:30px;
  height:30px;
  place-items:center;
  border:1px solid rgba(164,145,255,.34);
  border-radius:8px;
  background:rgba(114,86,214,.14);
  color:#c2b4ff;
  font:700 .67rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.demo-stage-heading h4 { margin:0; color:#eef0f4; font-size:.82rem; line-height:1.25; }
.demo-stage-heading p { margin:3px 0 0; color:#9297a2; font-size:.65rem; line-height:1.4; }
.demo-stage-badge {
  flex:0 0 auto;
  padding:5px 7px;
  border:1px solid rgba(79,194,158,.29);
  border-radius:5px;
  background:rgba(50,143,117,.1);
  color:#83d5b9;
  font-size:.56rem;
  font-weight:750;
  letter-spacing:.09em;
}
.demo-stage-content { align-items:stretch; gap:12px; }
.demo-stage-plan {
  position:relative;
  flex:1 1 auto;
  min-width:0;
  height:145px;
  overflow:hidden;
  border:1px solid #3b414b;
  border-radius:8px;
  background:
    linear-gradient(rgba(207,214,226,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(207,214,226,.055) 1px,transparent 1px),
    #20242c;
  background-size:24px 24px;
  box-shadow:inset 0 0 24px rgba(5,8,13,.23);
}
.demo-stage-plan::before {
  position:absolute;
  inset:13px 10px;
  border:1px solid rgba(163,174,190,.2);
  border-radius:5px;
  content:"";
  pointer-events:none;
}
.demo-stage-edge {
  position:absolute;
  z-index:1;
  left:50%;
  padding:2px 6px;
  color:#858c99;
  font-size:.49rem;
  font-weight:700;
  letter-spacing:.13em;
  transform:translateX(-50%);
}
.demo-stage-upstage { top:5px; }
.demo-stage-downstage { bottom:4px; }
.demo-stage-centerline {
  position:absolute;
  top:30px;
  bottom:23px;
  left:50%;
  border-left:1px dashed rgba(168,176,190,.15);
}
.demo-stage-fixture {
  position:absolute;
  z-index:2;
  display:flex;
  min-height:38px;
  align-items:center;
  gap:7px;
  padding:5px 8px;
  border:1px solid rgba(150,128,255,.61);
  border-radius:7px;
  background:rgba(47,42,71,.96);
  color:#f1efff;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .16s,background .16s,border-color .16s;
}
.demo-stage-fixture:hover { transform:translateY(-2px); background:#3a3456; }
.demo-stage-fixture[aria-pressed="false"] { border-style:dashed; background:rgba(25,27,34,.94); color:#c2c5ce; }
.demo-stage-fixture[aria-pressed="true"] { box-shadow:0 0 0 2px rgba(160,139,255,.12); }
.demo-stage-fixture:disabled { cursor:default; opacity:.82; }
.demo-stage-fixture:disabled:hover { transform:none; }
.demo-stage-fixture-par { bottom:25px; left:9%; }
.demo-stage-fixture-bar { top:29px; right:9%; }
.demo-stage-fixture-mark {
  position:relative;
  display:block;
  flex:0 0 19px;
  width:19px;
  height:19px;
  border:1px solid #b6a5ff;
  border-radius:50%;
  background:radial-gradient(circle,#e2d9ff 0 2px,#9178ef 3px 5px,rgba(145,120,239,.15) 6px);
}
.demo-stage-fixture-mark::after {
  position:absolute;
  top:15px;
  left:50%;
  width:24px;
  height:24px;
  border:1px solid rgba(172,151,255,.35);
  border-top:0;
  border-radius:0 0 50% 50%;
  content:"";
  transform:translateX(-50%);
}
.demo-stage-fixture-bar .demo-stage-fixture-mark {
  flex-basis:25px;
  width:25px;
  height:7px;
  border:1px solid #84d8cd;
  border-radius:3px;
  background:linear-gradient(90deg,#7cdcc9 0 15%,transparent 15% 21%,#7cdcc9 21% 36%,transparent 36% 42%,#7cdcc9 42% 57%,transparent 57% 63%,#7cdcc9 63% 78%,transparent 78% 84%,#7cdcc9 84%);
}
.demo-stage-fixture-bar .demo-stage-fixture-mark::after { display:none; }
.demo-stage-fixture-label { display:flex; flex-direction:column; gap:2px; white-space:nowrap; }
.demo-stage-fixture-label strong { font-size:.61rem; font-weight:700; }
.demo-stage-fixture-label small { color:#b1aec0; font-size:.52rem; }
.demo-stage-action { padding:3px 4px; border:1px solid rgba(181,164,255,.27); border-radius:4px; color:#c5b8ff; font-size:.47rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.demo-stage-performer {
  position:absolute;
  bottom:26px;
  left:50%;
  display:flex;
  align-items:flex-end;
  gap:7px;
  transform:translateX(-50%);
}
.demo-stage-performer span {
  display:block;
  width:8px;
  height:16px;
  border:1px solid #858c9b;
  border-radius:5px 5px 3px 3px;
  background:#515865;
}
.demo-stage-performer span:nth-child(2) { height:21px; border-color:#a18df1; background:#6c5bb3; }
.demo-stage-summary {
  display:flex;
  flex:0 0 178px;
  flex-direction:column;
  justify-content:center;
  padding:8px 10px;
  border:1px solid #2d323b;
  border-radius:8px;
  background:#15181e;
}
.demo-stage-count { display:flex; align-items:center; gap:7px; margin:0 0 5px; color:#e6e8ed; font-size:.66rem; }
.demo-stage-count strong { font-weight:650; }
.demo-stage-live-dot { width:7px; height:7px; border-radius:50%; background:#63c9a3; box-shadow:0 0 0 3px rgba(99,201,163,.1); }
.demo-stage-summary > p:nth-child(2) { margin:0; color:#9297a2; font-size:.6rem; line-height:1.45; }
.demo-stage-next { display:flex; align-items:center; gap:6px; margin-top:9px; color:#c3b6ff; font-size:.57rem; line-height:1.35; }
.demo-stage-next > span:first-child {
  display:grid;
  flex:0 0 19px;
  width:19px;
  height:19px;
  place-items:center;
  border:1px solid rgba(164,145,255,.32);
  border-radius:5px;
  font:700 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.demo-stage-setup button:focus-visible { outline:2px solid #b6a5ff; outline-offset:3px; }

@media (max-width:900px) {
  .demo-stage-summary { flex-basis:155px; }
  .demo-stage-fixture-par { left:5%; }
  .demo-stage-fixture-bar { right:5%; }
}
@media (max-width:660px) {
  .demo-stage-setup { margin-bottom:12px; padding:10px; }
  .demo-stage-content { flex-direction:column; gap:8px; }
  .demo-stage-plan { flex:none; width:100%; height:142px; }
  .demo-stage-summary { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 8px; padding:8px 9px; }
  .demo-stage-count { margin:0; }
  .demo-stage-summary > p:nth-child(2) { grid-column:1; }
  .demo-stage-next { grid-column:2; grid-row:1 / span 2; max-width:135px; margin:0; }
}
@media (max-width:430px) {
  .demo-stage-heading { align-items:flex-start; }
  .demo-stage-heading p { max-width:210px; }
  .demo-stage-badge { margin-top:2px; font-size:.51rem; }
  .demo-stage-plan { height:135px; }
  .demo-stage-fixture { min-height:34px; gap:5px; padding:4px 6px; }
  .demo-stage-fixture-label strong { font-size:.56rem; }
  .demo-stage-fixture-label small { font-size:.48rem; }
  .demo-stage-fixture-par { left:4%; bottom:23px; }
  .demo-stage-fixture-bar { right:4%; top:26px; }
  .demo-stage-performer { bottom:24px; }
  .demo-stage-summary { grid-template-columns:1fr; }
  .demo-stage-next { grid-column:1; grid-row:auto; max-width:none; margin-top:5px; }
}
@media (prefers-reduced-motion:reduce) {
  .demo-stage-fixture { transition:none; }
}