@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { color-scheme: dark; --bg:#08070d; --panel:#11101a; --panel-hi:#181725; --ink:#efeff6; --muted:#8f8c9f; --line:#2a2839; --acid:#d5ff5f; --blue:#5364ff; --pink:#ff5bc8; --orange:#ff9c67; --shadow:0 18px 70px #0008; }
* { box-sizing:border-box; }
html,body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font-family:'Space Grotesk',system-ui,sans-serif; font-size:16px; }
body { min-height:100vh; background:radial-gradient(circle at 78% 12%, #24204a33, transparent 32rem), var(--bg); }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(1500px,100%); margin:0 auto; padding:18px 24px 24px; }
.topbar,.footer,.panel-heading,.dock-group,.utility-row,.palette-row,.save-row,.set-controls,.control-footer { display:flex; align-items:center; }
.topbar { justify-content:space-between; height:40px; margin-bottom:14px; font-family:'DM Mono',monospace; font-size:12px; letter-spacing:.04em; }
.brand { display:flex; align-items:center; gap:8px; font-weight:500; letter-spacing:.14em; }.brand-mark { color:var(--acid); font-size:18px; }.brand-version { color:var(--muted); }
.status-line { color:var(--muted); display:flex; gap:8px; align-items:center; }.status-line span:first-child { color:var(--acid); }.status-dot { width:6px; height:6px; border-radius:50%; background:var(--acid); box-shadow:0 0 12px var(--acid); }
.top-actions { display:flex; gap:8px; }.ghost-button,.icon-button,.small-button,.accent-button,.round-button { border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:5px; transition:.2s ease; }.ghost-button { padding:8px 10px; color:var(--muted); font-size:12px; }.icon-button { width:31px; height:31px; padding:0; font-size:17px; }.small-button { padding:8px 10px; font-size:12px; }.accent-button { padding:9px 12px; background:var(--acid); color:#0d1008; border-color:var(--acid); font-weight:600; }.round-button { width:31px; height:31px; border-radius:50%; border-color:var(--acid); color:var(--acid); }.ghost-button:hover,.icon-button:hover,.small-button:hover { border-color:#77738d; color:#fff; background:#252333; }.accent-button:hover { filter:brightness(1.12); }.small-button:focus-visible,.accent-button:focus-visible,.icon-button:focus-visible,.ghost-button:focus-visible,input:focus-visible { outline:2px solid var(--acid); outline-offset:2px; }
.stage-wrap { position:relative; height:min(61vh,680px); min-height:360px; overflow:hidden; border:1px solid var(--line); background:#06070a; box-shadow:var(--shadow); }.stage-wrap::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#0005,transparent 24%,transparent 70%,#0007); }.stage-wrap canvas { display:block; width:100%; height:100%; image-rendering:auto; }
.stage-overlay { position:absolute; z-index:2; display:flex; gap:8px; font:11px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 1px 8px #000; }.top-left{top:16px;left:18px}.top-right{top:16px;right:18px}.bottom-left{bottom:16px;left:18px;color:#d9d6df}.bottom-right{bottom:16px;right:18px;color:var(--acid)}.divider { color:var(--muted); }.blackout-label { position:absolute; z-index:3; inset:0; display:grid; place-items:center; font:14px 'DM Mono',monospace; color:var(--acid); letter-spacing:.16em; background:#020207e8; }.blackout-label[hidden] { display:none; }
.workbench { display:grid; grid-template-columns:220px 1fr 330px; gap:12px; margin-top:12px; }.panel { border:1px solid var(--line); background:linear-gradient(145deg,#151421,#0f0e16); }.panel-heading { justify-content:space-between; min-height:40px; padding:0 13px; border-bottom:1px solid var(--line); font:11px 'DM Mono',monospace; letter-spacing:.08em; color:#d7d3e0; }.panel-count,.hint,.dirty-state { color:var(--muted); font:11px 'DM Mono',monospace; }.dirty-state { color:var(--acid); }.scene-list { padding:8px; }.scene-item { display:flex; gap:10px; align-items:center; width:100%; text-align:left; padding:10px; border:1px solid transparent; background:transparent; color:var(--ink); border-radius:4px; }.scene-item:hover { background:#201e2d; }.scene-item.active { background:#242333; border-color:#45415c; }.scene-index { color:var(--muted); font:11px 'DM Mono',monospace; }.scene-item.active .scene-index { color:var(--acid); }.scene-name { font-size:13px; }.scene-status { margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--muted); }.scene-item.active .scene-status { background:var(--acid); box-shadow:0 0 8px var(--acid); }.rail-note { display:flex; gap:8px; padding:14px; color:var(--muted); font-size:12px; line-height:1.4; border-top:1px solid var(--line); }.signal-mark { color:var(--pink); }
.controls-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; padding:14px; }.control { display:grid; gap:6px; min-width:0; }.control label { display:flex; justify-content:space-between; color:#c4c0ce; font:11px 'DM Mono',monospace; text-transform:uppercase; }.control output { color:var(--acid); }.control input[type=range],.tempo-control input[type=range],.brightness-control input[type=range] { width:100%; accent-color:var(--acid); }.control-footer { gap:10px; padding:10px 14px 14px; border-top:1px solid var(--line); }.control-footer .hint { flex:1; }
.preset-strip { display:flex; gap:6px; padding:0 14px 12px; overflow-x:auto; scrollbar-width:thin; }.preset-chip { flex:0 0 auto; min-width:112px; padding:8px; border:1px solid var(--line); border-radius:4px; background:#0c0b12; color:var(--muted); text-align:left; }.preset-chip strong,.preset-chip small { display:block; }.preset-chip strong { color:var(--ink); font-size:11px; font-weight:500; }.preset-chip small { margin-top:3px; font:9px 'DM Mono',monospace; }.preset-chip.active { border-color:var(--acid); box-shadow:inset 0 -2px var(--acid); }.preset-chip.active strong { color:var(--acid); }
.set-controls { gap:8px; padding:10px; }.cue-list { padding:0 10px 6px; display:grid; gap:6px; }.cue { display:grid; grid-template-columns:24px 1fr auto; gap:8px; align-items:center; padding:8px; background:#0c0b12; border:1px solid #242232; font-size:12px; }.cue.current { border-color:var(--acid); }.cue-num { color:var(--muted); font:10px 'DM Mono',monospace; }.cue-main { display:grid; gap:2px; }.cue-title { color:#ebe9f3; }.cue-meta { color:var(--muted); font:10px 'DM Mono',monospace; }.cue-actions { display:flex; gap:2px; }.cue-update,.cue-remove { border:0; color:var(--muted); background:transparent; }.cue-update:hover,.cue-remove:hover { color:var(--acid); }.cue-footer { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px; border-top:1px solid var(--line); }.transport-pill { padding:5px 7px; border:1px solid #383449; color:var(--acid); font:11px 'DM Mono',monospace; white-space:nowrap; }
.bottom-dock { display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:10px; padding:10px 12px; margin-top:12px; }.dock-group { gap:8px; min-width:0; }.source-group,.output-group { justify-content:flex-end; }.output-group { flex-wrap:wrap; }.dock-label { color:var(--muted); font:10px 'DM Mono',monospace; }.tempo-control { display:grid; grid-template-columns:auto minmax(80px,140px) 26px; gap:8px; align-items:center; color:var(--muted); font:11px 'DM Mono',monospace; margin-left:auto; }.tempo-control output { color:var(--acid); }.file-button { position:relative; overflow:hidden; }.file-button input { position:absolute; inset:0; opacity:0; cursor:pointer; }.frame-count-control { display:flex; align-items:center; gap:5px; color:var(--muted); font:10px 'DM Mono',monospace; }.frame-count-control input { width:48px; padding:7px 5px; border:1px solid var(--line); border-radius:4px; background:#0c0b12; color:var(--ink); }.frame-progress { flex:1 1 130px; min-width:120px; color:var(--muted); font:10px 'DM Mono',monospace; }.utility-row { gap:12px; margin-top:12px; align-items:stretch; }.utility-card { flex:1; }.palette-row,.save-row { gap:14px; padding:12px 14px; flex-wrap:wrap; }.palette-row label { display:flex; align-items:center; gap:6px; color:var(--muted); font:11px 'DM Mono',monospace; }.palette-row input[type=color] { width:24px; height:24px; padding:0; border:0; background:transparent; }.toggle-line input { accent-color:var(--acid); }.brightness-control { flex:1; min-width:140px; }.save-row .hint { flex:1; min-width:180px; }.footer { justify-content:space-between; gap:16px; padding-top:16px; color:#625f70; font:10px 'DM Mono',monospace; letter-spacing:.04em; }
dialog { color:var(--ink); background:#171522; border:1px solid #4c4860; padding:0; box-shadow:var(--shadow); min-width:min(440px,calc(100vw - 32px)); }dialog::backdrop{background:#05040bb8;backdrop-filter:blur(4px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font:11px 'DM Mono',monospace}.dialog-heading .icon-button{border:0}.key-map{display:grid;gap:14px;padding:18px;font-size:14px}.key-map span{display:flex;justify-content:space-between;gap:20px;color:#c4c0ce}kbd{padding:3px 6px;border:1px solid #4a4659;background:#0d0c13;color:var(--acid);font:11px 'DM Mono',monospace}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);padding:10px 14px;background:#eafca6;color:#0d1008;font:12px 'DM Mono',monospace;opacity:0;pointer-events:none;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:980px){.app-shell{padding:14px}.workbench{grid-template-columns:180px 1fr}.set-panel{grid-column:1/-1}.bottom-dock{grid-template-columns:1fr 1fr}.output-group{justify-content:flex-start}.footer{flex-wrap:wrap}.footer span:last-child{width:100%}}
@media (max-width:680px){.topbar{font-size:10px}.top-actions .ghost-button{display:none}.status-line{margin-left:auto;margin-right:8px}.stage-wrap{height:52vh;min-height:320px}.stage-overlay{font-size:9px}.bottom-right{display:none}.workbench{grid-template-columns:1fr}.scene-rail,.control-panel,.set-panel{min-width:0}.scene-rail{order:0}.control-panel{order:1}.set-panel{grid-column:auto;order:2}.scene-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.scene-item{display:grid;gap:4px;padding:8px;min-width:0}.scene-status{display:none}.scene-name{font-size:11px;overflow-wrap:anywhere}.rail-note{display:none}.controls-grid{grid-template-columns:1fr 1fr;gap:10px}.bottom-dock{grid-template-columns:1fr;}.source-group,.output-group{justify-content:flex-start;flex-wrap:wrap}.tempo-control{margin-left:0}.utility-row{display:grid}.footer{font-size:9px;line-height:1.4}.footer span:nth-child(2){display:none}}
.high-contrast { --ink:#fff; --muted:#c4c0ce; --line:#615b78; --panel:#08070d; }
.phase-actions { grid-column: 1 / -1; display:grid; gap:8px; padding-top:4px; border-top:1px solid var(--line); }
.phase-action-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.phase-action-row label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.phase-action-row select { max-width:260px; border:1px solid var(--line); border-radius:4px; background:var(--panel); color:var(--ink); padding:7px 8px; }
.phase-action-readout { color:var(--muted); font-size:11px; letter-spacing:.02em; }
.phase-archive-readout { color:var(--acid); font:10px 'DM Mono',monospace; line-height:1.5; overflow-wrap:anywhere; }
.stage-wrap { height:min(70vh,820px); }
.panel-heading-actions { display:flex; align-items:center; gap:10px; }
.workflow-hint { color:var(--muted); font:10px 'DM Mono',monospace; text-transform:none; letter-spacing:0; }
.workflow-toggle { display:flex; gap:2px; padding:2px; border:1px solid var(--line); border-radius:5px; background:#0b0a11; }
.mode-button { border:0; border-radius:3px; padding:5px 8px; color:var(--muted); background:transparent; font:11px 'DM Mono',monospace; cursor:pointer; }
.mode-button.active { color:#0d1008; background:var(--acid); }
.scene-item { align-items:flex-start; min-height:82px; }
.scene-card-copy { display:grid; gap:4px; min-width:0; }
.scene-name { font-size:14px; }
.scene-mechanism { color:var(--acid); font:11px 'DM Mono',monospace; line-height:1.25; }
.scene-start { color:var(--muted); font:10px 'DM Mono',monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stage-overlay.bottom-left { flex-direction:column; align-items:flex-start; gap:4px; max-width:70%; }
.stage-mechanism { color:var(--acid); font:10px 'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase; }
.focus-mode .app-shell { width:100%; max-width:none; padding:10px; }
.focus-mode .stage-wrap { height:calc(100vh - 72px); min-height:0; border-color:transparent; }
.focus-mode .workbench,.focus-mode .bottom-dock,.focus-mode .utility-row,.focus-mode .footer { display:none; }
.mobile-quickbar { display:none; }
@media (max-width:680px) { .top-actions .ghost-button:first-child { display:block; } .scene-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .scene-item { min-height:92px; } .scene-name { font-size:13px; overflow-wrap:anywhere; } .scene-mechanism { font-size:10px; } .scene-start { font-size:9px; } .panel-heading-actions { gap:5px; } .workflow-hint { display:none; } .mode-button { padding:5px 6px; } }
@media (max-width:680px) { .stage-wrap { height:min(42vh,420px); min-height:260px; } .mobile-quickbar { position:sticky; top:0; z-index:4; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:6px; margin-top:8px; border:1px solid var(--line); background:#11101aee; backdrop-filter:blur(10px); } .mobile-quickbar .small-button { min-width:0; padding:8px 4px; font-size:10px; white-space:nowrap; } }
@media (max-width:680px) { .stage-overlay.top-left { top:10px; left:12px; right:auto; width:48%; max-width:48%; display:grid; gap:3px; } .stage-overlay.top-left .divider,.stage-overlay.top-right .divider { display:none; } .stage-overlay.top-left #scenePresetName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .stage-overlay.top-right { top:10px; right:12px; width:44%; max-width:44%; display:grid; justify-items:end; gap:3px; text-align:right; } }
@media (min-width:981px) { .app-shell { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(560px,.95fr); grid-template-areas:'topbar topbar' 'stage workbench' 'dock dock' 'utility utility' 'footer footer'; column-gap:12px; row-gap:12px; } .topbar { grid-area:topbar; margin-bottom:0; } .stage-wrap { grid-area:stage; position:sticky; top:14px; align-self:start; height:min(calc(100vh - 120px),680px); min-height:440px; } .workbench { grid-area:workbench; display:grid; grid-template-columns:minmax(156px,.58fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(210px,1fr); height:min(calc(100vh - 120px),680px); min-height:440px; margin-top:0; gap:10px; overflow:hidden; } .scene-rail { grid-column:1; grid-row:1 / span 2; min-height:0; overflow-y:auto; } .control-panel { grid-column:2; grid-row:1; min-height:0; overflow-y:auto; } .set-panel { grid-column:2; grid-row:2; min-height:0; overflow-y:auto; } .cue-list { min-height:0; overflow-y:auto; } .bottom-dock { grid-area:dock; margin-top:0; } .utility-row { grid-area:utility; margin-top:0; } .footer { grid-area:footer; } }

/* The stage keeps Euclidean proportions; artwork colors never recolor UI controls. */
.stage-wrap { height:auto; min-height:0; aspect-ratio:8 / 5; }
.stage-wrap canvas { touch-action:none; }
.palette-panel { min-width:0; margin-top:12px; }
.palette-presets { display:flex; flex-wrap:wrap; gap:6px; padding:12px 14px 0; }
.palette-preset { background:#1b1928; color:#ddd9eb; border:1px solid #49435f; padding:7px 10px; border-radius:5px; font-size:14px; }
.palette-preset:hover { border-color:var(--acid); }
.palette-row input[type=color] { width:38px; height:30px; cursor:pointer; }
.palette-row label,.control label,.scene-name,.small-button,.file-button,.mode-button { font-size:14px; }
.scene-mechanism,.hint,.panel-heading,.stage-mechanism,.frame-progress { font-size:12px; }
.scene-start { font-size:12px; }
.preset-chip strong { font-size:14px; }.preset-chip small { font-size:12px; }
.control-footer { flex-wrap:wrap; }.control-footer .hint { min-width:130px; }
.controls-grid { gap:16px; }
select { max-width:100%; background:#171522; border:1px solid #514b64; border-radius:4px; color:var(--ink); padding:6px; font:inherit; }
.source-group { flex-wrap:wrap; justify-content:flex-start; align-content:flex-start; }
.audio-status { flex:1 1 100%; font-size:14px; color:var(--acid); line-height:1.5; }
.music-help { flex:1 1 100%; font-size:12px; color:var(--muted); line-height:1.5; }
.music-help a { color:#bab2ff; }
.sensitivity-control { display:flex; gap:8px; align-items:center; font-size:14px; color:var(--muted); }
.sensitivity-control input { max-width:100px; accent-color:var(--acid); }
.bottom-dock { grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr) minmax(0,1fr); align-items:start; }
.stage-overlay { pointer-events:none; }
.stage-overlay.bottom-right { max-width:38%; text-align:right; }
.stage-overlay.bottom-left { max-width:57%; font-size:12px; line-height:1.4; }
.control-panel,.panel-heading-actions,.set-panel,.scene-rail { min-width:0; }
.panel-heading { flex-wrap:wrap; gap:8px; padding-top:10px; padding-bottom:10px; }
.evolution-name-row input { min-width:0; }
button:focus-visible,select:focus-visible,.file-button:focus-within { outline:2px solid var(--acid); outline-offset:3px; }
.focus-mode .palette-panel { display:none; }
@media (min-width:981px) {
  .app-shell { grid-template-columns:minmax(0,1.3fr) minmax(500px,1fr); grid-template-areas:'topbar topbar' 'stage workbench' 'palette workbench' 'dock dock' 'utility utility' 'footer footer'; align-items:start; }
  .stage-wrap { position:relative; top:auto; height:auto; min-height:0; aspect-ratio:8 / 5; }
  .palette-panel { grid-area:palette; margin-top:0; align-self:start; }
  .workbench { height:720px; min-height:0; grid-template-columns:minmax(150px,.65fr) minmax(0,1fr); grid-template-rows:minmax(0,1.5fr) minmax(180px,1fr); }
  .controls-grid { grid-template-columns:1fr; }
}
@media (max-width:980px) { .bottom-dock { grid-template-columns:1fr; }.transport-group { flex-wrap:wrap; }.palette-row { gap:12px; } }
@media (max-width:680px) {
  .stage-wrap { min-height:0; height:auto; aspect-ratio:8 / 5; }
  .stage-overlay.bottom-left { display:none; }
  .topbar { height:auto; flex-wrap:wrap; gap:8px; }.status-line { display:none; }
  .scene-list { max-height:240px; overflow-y:auto; }.scene-item { min-height:88px; }
  .scene-mechanism,.scene-start { font-size:12px; }.scene-start { display:none; }
  .control label { font-size:13px; }.palette-row label { font-size:14px; }
  .mobile-quickbar .small-button { font-size:12px; padding:9px 3px; }
  .palette-panel { margin-top:10px; }.palette-row { padding:10px; }
}

.effects-panel { margin-top:12px; min-width:0; }
.effect-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px; }
.effect-grid label { display:grid; grid-template-columns:1fr auto; gap:6px; font-size:14px; color:#c4c0ce; }
.effect-grid output { color:var(--acid); font:12px 'DM Mono',monospace; }
.effect-grid input { width:100%; grid-column:1/-1; accent-color:var(--acid); }
.effect-actions { display:flex; gap:6px; }.effect-actions button { font-size:13px; }
.effect-note { margin:0; padding:0 14px 14px; color:var(--muted); font-size:12px; line-height:1.5; }
.focus-mode .effects-panel { display:none; }
.focus-mode .app-shell { display:block; }
.focus-mode .stage-wrap { width:min(100%,calc(160dvh - 160px)); height:auto; aspect-ratio:8 / 5; margin:12px auto 0; }
@media(min-width:981px) {
  .app-shell { grid-template-areas:'topbar topbar' 'stage workbench' 'palette workbench' 'effects workbench' 'dock dock' 'utility utility' 'footer footer'; }
  .effects-panel { grid-area:effects; margin-top:0; }.workbench { height:920px; }
}