.sc-flow{position:relative;isolation:isolate;width:100vw;margin:80px calc(50% - 50vw);padding:76px max(4vw,calc((100vw - 1800px)/2));box-sizing:border-box;background:#080a09;overflow:hidden}
.sc-flow::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#080a09,transparent 30%,#080a09),url('assets/show-control/flow-demo/desk.webp') center/cover;opacity:.35}
.sc-flow__heading{max-width:800px;margin-bottom:48px}.sc-flow h2{font:500 clamp(32px,3.4vw,54px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin:12px 0 18px}.sc-flow__heading>p:last-child{color:var(--muted);line-height:1.7}
.sc-flow__grid{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1.5fr) 40px minmax(0,1.25fr);align-items:center;gap:14px}.flow-column{min-width:0}.flow-label{display:flex;justify-content:space-between;gap:12px;margin:0 0 22px;color:var(--accent);font:11px monospace;letter-spacing:.06em}.flow-label span{color:#7b8380}
.flow-window{border:1px solid #343b37;background:#111513;border-radius:5px;overflow:hidden;box-shadow:0 18px 40px #0006}.flow-window__bar{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;background:#1b211e;border-bottom:1px solid #343b37;font:10px monospace;color:#b8bfba}.flow-window__bar strong{color:#edf0ed}.flow-setlist{padding:8px}.flow-song{display:grid;grid-template-columns:24px 1fr auto;gap:7px;align-items:center;width:100%;padding:15px 10px;border:0;border-bottom:1px solid #29312c;background:transparent;color:#bbc3bd;text-align:left;cursor:pointer;font:11px monospace}.flow-song strong{font:500 14px 'Space Grotesk',sans-serif}.flow-song small{color:inherit}.flow-song.is-active{background:var(--accent);color:#080a09;border-radius:2px}.flow-song:hover{outline:1px solid var(--accent);outline-offset:-1px}
.flow-link{color:var(--accent);font-size:24px;text-align:center;position:relative}.is-command .flow-link{animation:flow-command .6s ease-out}@keyframes flow-command{0%{opacity:.25;transform:translateX(-5px)}60%{opacity:1}100%{transform:none}}
.flow-device{position:relative;aspect-ratio:974/610;overflow:clip;container-type:inline-size}.flow-device>img{position:absolute;width:131.4168%;max-width:none;left:-15.811%;top:-23.934%;pointer-events:none}.flow-device__screen{position:absolute;left:27.92%;top:12.13%;width:44.05%;height:46.23%;background:#000;overflow:hidden}.flow-tft{display:block;width:100%;height:100%;font-family:Inter,Arial,sans-serif;font-weight:400;fill:#fff;text-anchor:middle}.flow-tft [hidden]{display:none}

.flow-key{position:absolute;border:1px solid transparent;background:transparent;border-radius:7px;cursor:pointer;color:transparent;padding:0}.flow-key:hover,.flow-key:focus-visible{outline:2px solid var(--accent);outline-offset:4px;background:#ffffff16}.flow-key--play,.flow-key--stop,.flow-key--previous,.flow-key--next,.flow-key--loop{top:70.6%;width:9.8%;height:15.5%}.flow-key--play{left:9.5%}.flow-key--stop{left:27.4%}.flow-key--previous{left:45.4%}.flow-key--next{left:63.4%}.flow-key--loop{left:81.3%}.flow-key--lock{left:9.5%;top:27.2%;width:9.8%;height:15.5%}.flow-key--cue{left:79%;top:22%;width:14%;height:22%;border-radius:50%}[data-locked=true] .flow-key--lock{outline:2px solid var(--accent)}[data-playing=true] .flow-key--play{box-shadow:0 0 16px #a8d99766}.flow-device-help{color:#8e9991;font-size:12px;line-height:1.6;text-align:center;margin:16px 0 0}
.flow-live-toolbar{display:flex;justify-content:space-between;padding:12px;background:#242b27;font:10px monospace;color:#d3dbd5}.flow-arrangement{background:#353535;padding:5px}.flow-arrangement svg{display:block;width:100%;height:auto;font-family:Arial,sans-serif;fill:#e0e0e0}.flow-live-meter{opacity:.2}[data-playing=true] .flow-live-meter{opacity:1;animation:flow-signal .7s ease-in-out infinite alternate}@keyframes flow-signal{to{opacity:.4}}[data-live-loop][data-enabled=false]{stroke:#999}.flow-host-options{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font:10px monospace;color:#c6c6c6;background:#242424;gap:8px}.flow-host-options label{display:flex;align-items:center;gap:5px}.flow-host-options select{font:inherit;background:#383838;border:1px solid #555;color:#eee;padding:4px}.flow-song.is-queued{outline:1px dashed #e6bd59;outline-offset:-3px}.flow-column--live .flow-window{background:#303030;border-color:#555}.flow-column--live .flow-window__bar{background:#252525;border-color:#555}.flow-live-toolbar{background:#414141}.flow-column--live .flow-seek-label{color:#bbb}.flow-live-toolbar [data-live-song]{max-width:40%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.flow-seek-label{display:block;padding:8px 14px 14px;color:#a0aaa3;font:10px monospace}.flow-seek-label input{display:block;width:100%;margin:10px 0 0;accent-color:var(--accent)}
.sc-flow__footer{margin-top:32px;padding-top:18px;border-top:1px solid #303832;display:flex;justify-content:space-between;gap:20px;align-items:start}.sc-flow__footer p{margin:0;color:#a8b3ab;font-size:13px;line-height:1.5}.sc-flow__footer small{display:block;margin-top:8px;color:#78837b;font-size:11px}.sc-flow__footer button{flex:none;background:none;color:var(--accent);border:1px solid #414b43;padding:10px 14px;cursor:pointer}.sc-flow button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1100px){.sc-flow__grid{grid-template-columns:minmax(0,1fr) 22px minmax(0,1.3fr);gap:12px}.flow-column--live{grid-column:1/-1;max-width:640px;width:100%;justify-self:center;margin-top:22px}.flow-link--second{display:none}.flow-column--live .flow-track{height:45px}}
@media(max-width:620px){.sc-flow{padding:44px 6%;margin-top:48px}.sc-flow__heading{margin-bottom:30px}.sc-flow__grid{display:flex;flex-direction:column;gap:20px}.flow-column{width:100%}.flow-link{transform:rotate(90deg)}.flow-link--second{display:block}.flow-label{margin-bottom:14px}.flow-column--live{margin-top:0}.sc-flow__footer{flex-direction:column}.flow-device__screen strong{font-size:3.5cqw}.flow-device-help{font-size:11px}.flow-key{min-height:0;min-width:0}}
@media(prefers-reduced-motion:reduce){.is-command .flow-link,[data-playing=true] .flow-meter{animation:none}}

/* Keep the original enclosure render; stateful translucent caps cover its baked LEDs. */
.flow-key:not(.flow-key--cue)::before{content:'';position:absolute;inset:0;border-radius:22% 22% 17% 17%;background:radial-gradient(ellipse at 50% 58%,rgb(var(--led-rgb) / .94),transparent 80%),linear-gradient(145deg,#676b67,#323831 65%,#72776e);border:1px solid #858c80;box-shadow:inset 0 3px 4px #fff3,inset 0 -4px 5px #0008,0 3px 3px #0009;transition:transform .09s,box-shadow .09s;pointer-events:none}
.flow-key[data-led=on]:not(.flow-key--cue)::before{box-shadow:inset 0 2px 4px #fff5,inset 0 -3px 4px #0005,0 0 12px rgb(var(--led-rgb) / .28)}
.flow-key[data-feedback=pressed]{--feedback-rgb:255 255 255}.flow-key[data-feedback=blocked]{--feedback-rgb:255 20 15}
.flow-key[data-feedback]:not(.flow-key--cue)::before{background:radial-gradient(ellipse,rgb(var(--feedback-rgb)),rgb(var(--feedback-rgb) / .45)),#777;transform:translateY(3px) scale(.97);box-shadow:inset 0 2px 5px #0006,0 0 12px rgb(var(--feedback-rgb) / .35)}
.flow-key--cue[data-feedback]{box-shadow:inset 0 0 0 2px rgb(var(--feedback-rgb) / .6);transform:scale(.97)}
[data-playing=true] .flow-key--play{box-shadow:none}[data-locked=true] .flow-key--lock{outline:none}
.flow-jog-controls{position:absolute;left:75.5%;top:46%;width:21%;height:14%;display:flex;align-items:center;justify-content:center;gap:1cqw;color:#b8babb;font:1.5cqw monospace;letter-spacing:.08em}.flow-jog-controls button{display:grid;place-items:center;flex:0 0 6cqw;width:6cqw;height:7cqw;padding:1.2cqw;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:50%;transition:color .15s,transform .1s}.flow-jog-controls svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.flow-jog-controls button:hover{color:#fff;background:#ffffff08}.flow-jog-controls button:active{transform:scale(.9)}

.flow-song-row{display:grid;grid-template-columns:18px minmax(0,1fr) 24px;align-items:center;border-bottom:1px solid #29312c}.flow-song{min-width:0;border-bottom:0;grid-template-columns:18px minmax(0,1fr) auto;gap:5px;padding:14px 7px}.flow-song strong{font-size:13px}.flow-song small{font-size:9px}.flow-drag{cursor:grab;color:#748479;text-align:center;font-size:18px}.flow-drag:active{cursor:grabbing}.flow-reorder{display:grid;gap:2px;padding-left:3px}.flow-reorder button{width:22px;height:23px;padding:0;background:transparent;color:#bec9c0;border:0;cursor:pointer;font-size:15px}.flow-reorder button:hover{background:#ffffff12}.flow-reorder button:disabled{opacity:.2;cursor:default}.flow-reorder-help{font:10px/1.6 monospace;color:#89988d;margin:4px 14px 12px}.flow-song-row.is-dragging{opacity:.45}.flow-song-row.is-drop-target{box-shadow:inset 0 2px var(--accent)}
@media(prefers-reduced-motion:reduce){.flow-key::before{transition:none}.flow-key[data-feedback]::before,.flow-key--cue[data-feedback]{transform:none}}

@media(prefers-reduced-motion:reduce){.flow-live-meter{animation:none!important}}