#demo .console{min-width:0}
#demo .console-heading{gap:16px}
#demo .console h3{margin-bottom:16px}
#demo .sections{display:flex;gap:2px}
#demo .segment{min-height:44px;min-width:44px;font-size:12px}
#demo .wave{gap:1px;touch-action:none;cursor:crosshair;padding:0}
#demo .wave>i{min-width:0;pointer-events:none}
#demo .wave svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#demo .playhead{left:0;transform:none;pointer-events:none}
#wave-help{font-size:11px;color:#a9c0d0;margin:8px 0 0}
#demo .demo-controls{flex-wrap:wrap;gap:10px}
#demo .now{flex:1;min-width:180px;max-width:none;font-size:12px}
#demo .demo-play{height:52px;width:52px;flex:0 0 52px;font-size:20px}
#demo .loop-button,#demo .demo-reset{min-height:44px;min-width:44px;font-size:12px}
#demo button:disabled{opacity:.5;cursor:default}
#demo .mixer{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#43728d #0d1e2c;scrollbar-width:thin;padding:12px 4px 14px;scroll-snap-type:x proximity;scroll-padding:4px}
#demo .channel{flex:1 0 100px;padding:14px 4px 10px;scroll-snap-align:start}
#demo .channel label{font-size:10px;letter-spacing:.3px}
#demo .channel output{font-size:12px}
#demo .channel button{width:44px;height:44px;font-size:12px;margin:0 1px}
#demo .fader{height:155px;width:48px}
#demo .fader input{width:44px;background:linear-gradient(to top,var(--channel) var(--fill),#03090e var(--fill)) center / 6px 100% no-repeat;touch-action:none}
#demo .fader input::-webkit-slider-thumb{width:38px;height:28px}
#demo .fader input::-moz-range-thumb{width:38px;height:28px}
#demo .mixer-hint{display:flex;justify-content:space-between;gap:12px;color:#b6cad7;font-size:10px;letter-spacing:1px;margin:20px 0 0}
#demo .mixer-hint span{color:#72d5ff;letter-spacing:0}
#demo .demo-guide{position:relative;top:auto;z-index:1;scroll-margin-top:90px}
#demo .demo-guide[data-active=true]{position:sticky;top:76px;z-index:12}
#demo .guide-actions button{min-height:44px}
#demo .demo-note{line-height:1.7}
#demo .demo-note a{color:#82d4fa;text-decoration:underline;text-underline-offset:3px}
#demo [hidden]{display:none!important}
#demo .guide-actions{flex-wrap:wrap}
#demo #tour-next:disabled{opacity:.45;cursor:default}
#demo .channel.tour-target{outline:2px solid #9cddff;outline-offset:-2px}
#demo .demo-guide[data-active=true]{background:#102330f5;backdrop-filter:blur(12px);box-shadow:0 8px 24px #0005}
#demo .console,#demo .channel,#demo .demo-controls{scroll-margin-top:230px}
#demo .console-bottom{align-items:center;gap:10px;font-size:11px;letter-spacing:.3px}
#demo .song-info{display:block;white-space:nowrap;font-size:12px;color:#bad3e3}
#demo #tour-progress{align-self:flex-end}
#demo .demo-unavailable .sections,#demo .demo-unavailable .wave,#demo .demo-unavailable #wave-help,#demo .demo-unavailable .demo-controls,#demo .demo-unavailable .mixer,#demo .demo-unavailable #mixer-hint,#demo .demo-unavailable .console-bottom,#demo .demo-unavailable .song-info{display:none}
@media(max-width:700px){
 #demo .console-heading{align-items:flex-start;flex-direction:column;gap:0}
 #demo .song-info{margin-bottom:16px}
 #demo .demo-guide{padding:20px;gap:15px}
 #demo .demo-guide p{font-size:13px}
 #demo .guide-kicker{font-size:9px}
 #demo .guide-actions{width:100%;flex-wrap:wrap}
 #demo .now{flex-basis:100%}
 #demo .loop-button{flex:1;line-height:1.3}
 #demo #demo-stop{flex:0 0 44px}
 #demo .mixer-hint{flex-direction:column;gap:3px}
 #demo .channel{flex-basis:112px}
 #demo .fader{height:160px}
 #demo .sections{overflow-x:auto;scrollbar-width:thin}
 #demo .segment{flex-basis:76px!important;min-width:76px}
 #demo .demo-guide[data-active=true]{top:64px;padding:14px;gap:8px}
 #demo .demo-guide h3{font-size:18px;margin-bottom:6px}
 #demo .demo-guide .guide-actions{gap:6px}
 #demo .demo-guide .guide-actions button{padding:8px 12px;font-size:11px}
}

/* Contextual, non-blocking walkthrough. The console itself never moves for style. */
#demo .demo-guide{position:relative;top:auto;display:flex;align-items:center;gap:20px;padding:17px 22px;background:#102634;border:1px solid #2e5268;box-shadow:none}
#demo .demo-guide p{margin:4px 0 0;font-size:12px;color:#aac5d6;white-space:normal}
#demo #tour-start{flex-shrink:0;min-height:44px;padding:10px 16px;border:1px solid #5686a0;border-radius:6px;background:#183e52;color:#b5eaff;font-size:12px;font-weight:700}
#demo .console,#demo .channel,#demo .demo-controls{scroll-margin-top:110px}
#demo .channel-pan{height:64px;display:flex;flex-direction:column;justify-content:center;margin:3px 5px 5px;gap:2px}
#demo .channel-pan>span{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.5px;color:#8ba4b6;line-height:1.2}
#demo .channel-pan output{font-size:9px;letter-spacing:0;color:#bacddd;display:inline;margin:0}
#demo .channel-pan input{width:100%;height:32px;accent-color:var(--channel);cursor:ew-resize;touch-action:none}
#demo .channel-bus{height:72px;display:grid;place-items:center;color:#b4df79;font-size:8px;max-width:85px;line-height:1.6;margin:auto}
#demo .demo-pads{margin-top:18px;padding:22px;border:1px solid #695a8c;border-radius:10px;background:linear-gradient(120deg,#242a41,#172635);position:relative}
#demo .demo-pad-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}
#demo .demo-pads .guide-kicker{color:#c7adef}
#demo .demo-pads h4{font-size:18px;margin:6px 0;font-weight:600;line-height:1.3}
#demo .demo-pads p{font-size:10px;color:#a4aec6;margin:0}
#demo .demo-pads button{min-height:44px;border-radius:6px;border:1px solid #7c66a4;background:#2d334d;color:#d9c4ff;font-size:12px;font-weight:600}
#demo #pad-toggle{padding:10px 18px;white-space:nowrap}
#demo #pad-toggle[aria-pressed=true]{background:#c3a1f0;color:#211533}
#demo .demo-pad-controls{display:flex;align-items:center;gap:30px;margin-top:22px}
#demo #pad-keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;flex:1}
#demo #pad-keys button{flex:1;min-width:38px}
#demo #pad-keys button[aria-pressed=true]{border-color:#d2a9ff;background:#60487e;color:white}
#demo .pad-level{display:grid;grid-template-columns:1fr auto;font-size:11px;color:#bcc7d8;gap:2px 12px;flex:0 1 210px}
#demo .pad-level output{color:#dbbaff;font-size:11px}
#demo .pad-level input{grid-column:1/-1;width:100%;height:34px;accent-color:#c4a2ef;touch-action:none}
#demo .demo-pads[data-playing=true]{border-color:#c5a3ef;box-shadow:inset 0 0 50px #a688e215}
.demo-coach{--coach-paper:#f7f9fc;--coach-ink:#142b3a;--coach-muted:#405565;--coach-accent:#ffcc66;display:none;position:fixed;inset:auto;margin:0;width:360px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 100px);overflow:visible;z-index:90;padding:19px 22px 14px;border:1px solid #fff;border-radius:12px;background:var(--coach-paper);color:var(--coach-ink);box-shadow:0 20px 70px #0009,0 0 0 1px #142b3a20;font-family:'DM Sans',sans-serif;line-height:1.5;text-align:left}
.demo-coach:popover-open,.demo-coach[data-open=true]{display:block}
.demo-coach::backdrop{background:transparent;pointer-events:none}
.coach-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
#coach-step{font-size:9px;letter-spacing:.8px;color:#543900;font-weight:800;background:#ffe8b8;padding:5px 8px;border-radius:4px}
.demo-coach button{font-family:inherit;min-height:44px;border-radius:6px;font-size:12px;font-weight:700;line-height:1.4;cursor:pointer}
#coach-close{width:44px;height:44px;min-height:44px;flex-shrink:0;margin:-9px -9px -5px 0;font-size:25px;font-weight:400;background:transparent;color:var(--coach-muted);border:0}
.demo-coach h3{font-size:23px;line-height:1.2;margin:0 0 10px;letter-spacing:-.4px;color:var(--coach-ink)}
.demo-coach p{font-size:13px;line-height:1.65;color:var(--coach-muted);margin:0}
.coach-progress{display:flex;gap:4px;margin:17px 0 10px}
.coach-progress i{height:4px;background:#ccd5de;flex:1;border-radius:2px}
.coach-progress i[data-complete=true]{background:#768c9d}
.coach-progress i[data-active=true]{background:#a96a00}
#coach-feedback{font-size:11px;font-weight:600;color:#4b380e;min-height:32px;line-height:1.5;margin-bottom:11px}
.coach-actions{display:flex;gap:8px}
.coach-actions button{padding:10px 12px;flex:1;border:1px solid #9baab7;background:#fff;color:var(--coach-ink)}
#coach-primary{background:var(--coach-accent);color:#29200c;border-color:#e4ac3e}
.demo-coach button:disabled{opacity:.55;cursor:wait}
.coach-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:7px 0 0}
.coach-footer button{min-height:44px;font-size:11px;font-weight:600;padding:4px 0;border:0;background:transparent;color:var(--coach-muted)}
#coach-takeover{color:#153e5a}
.coach-arrow{position:absolute;width:12px;height:12px;background:var(--coach-paper);border:1px solid #fff;transform:rotate(45deg);pointer-events:none}
.demo-coach[data-side=right] .coach-arrow{left:-7px;top:var(--arrow-y);border-top:0;border-right:0}
.demo-coach[data-side=left] .coach-arrow{right:-7px;top:var(--arrow-y);border-bottom:0;border-left:0}
.demo-coach[data-side=above] .coach-arrow{bottom:-7px;left:var(--arrow-x);border-top:0;border-left:0}
.demo-coach[data-side=below] .coach-arrow{top:-7px;left:var(--arrow-x);border-bottom:0;border-right:0}
#demo .tour-target{outline:2px solid #ffcc66!important;outline-offset:5px;box-shadow:0 0 0 7px #ffcc661f!important;border-radius:5px}
.tour-focus-layer{position:fixed;inset:0;width:100%;height:100%;z-index:80;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 180ms var(--ease-out)}
.tour-focus-layer.visible{opacity:1;visibility:visible}
.tour-cursor{position:fixed;left:0;top:0;pointer-events:none;z-index:89;display:flex;align-items:flex-end;gap:5px;opacity:0;transition:opacity 180ms var(--ease-out)}
.tour-cursor.visible{opacity:1}
.tour-cursor svg{width:22px;height:28px;fill:#ffcc66;stroke:#29200c;stroke-width:1.5;filter:drop-shadow(0 2px 3px #0006)}
.tour-cursor b{font:700 10px 'DM Sans',sans-serif;padding:3px 8px;background:#ffcc66;color:#29200c;border-radius:4px}
#coach-pads{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:9px 0;margin-top:8px;border:0;border-top:1px solid #d6dde5;border-radius:0;background:transparent;color:#624489;font-size:12px}
.demo-coach button:focus-visible{outline:3px solid #815800;outline-offset:3px}
#demo .demo-entry-actions{display:flex;gap:10px;flex-shrink:0}
#demo #pads-listen{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 16px;border:1px solid #d5b1ff;border-radius:6px;background:#cbb0ef;color:#27193b;font-size:12px;font-weight:800}
#demo #pads-listen span{font-size:19px;line-height:1}
#demo #pad-toggle{background:#cbb0ef;border-color:#d8beff;color:#27193b;font-weight:800;min-height:48px}
#demo #pad-toggle[aria-pressed=true]{background:#382a4f;color:#f2e7ff;border-color:#d8beff}
#demo #pad-status{margin-top:10px;color:#d8beff;font-size:11px}
#demo #pad-status::before{content:'';display:inline-block;vertical-align:middle;width:6px;height:6px;margin-right:7px;background:#768092;border-radius:50%}
#demo .demo-pads[data-playing=true] #pad-status::before{background:#c9a2ff;box-shadow:0 0 9px #c9a2ff88}
.demo-coach [hidden]{display:none!important}
.demo-coach[data-pad-only=true] .coach-progress{display:none}
.demo-coach[data-pad-only=true] #coach-feedback{margin-top:14px}
@media(max-width:700px){
 #demo .demo-guide{padding:15px;align-items:flex-start;flex-direction:column;gap:12px}
 #demo #tour-start{width:100%}
 #demo .demo-entry-actions{width:100%;flex-direction:column}
 #demo .demo-pads{padding:16px}
 #demo .demo-pad-heading{flex-direction:column;align-items:flex-start;gap:12px}
 #demo .demo-pad-controls{flex-direction:column;align-items:stretch;gap:12px}
 #demo #pad-keys{gap:4px;flex-wrap:wrap}
 #demo #pad-keys button{min-width:0}
 #demo .pad-level{flex-basis:auto}
 .demo-coach{width:330px;padding:14px 16px 9px}
 .demo-coach h3{font-size:21px;margin-bottom:8px}
 .demo-coach p{font-size:12px;line-height:1.6}
 .coach-progress{margin:12px 0 8px}
 #coach-feedback{margin-bottom:8px;min-height:28px}
 .coach-top{margin-bottom:8px}
 .demo-coach button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.tour-cursor{display:none;transition:none}.tour-focus-layer{transition:none}}
.motion-paused .tour-cursor{display:none}
.motion-paused .tour-focus-layer{transition:none}
@media(min-width:701px) and (max-width:1000px){#demo .demo-guide{flex-wrap:wrap}#demo .demo-entry-actions{width:100%}}
@media(max-height:500px){.demo-coach{max-height:calc(100dvh - 24px);overflow-y:auto}.coach-arrow{display:none}}

/* Product recordings, with the same identifying colors as the LiveTracks catalog. */
#demo #pad-sounds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
#demo #pad-sounds button{display:flex;align-items:center;gap:10px;min-height:62px;padding:12px;text-align:left;background:#182535;border-color:#3b4a5e;color:#e3ebf3;font-size:14px}
#demo #pad-sounds button[aria-pressed=true]{border-color:var(--pad-color);background:color-mix(in srgb,var(--pad-color) 12%,#182535);box-shadow:inset 0 0 0 1px var(--pad-color)}
#demo .pad-sound-orb{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffffff80,transparent 65%),var(--pad-color);box-shadow:0 0 14px color-mix(in srgb,var(--pad-color) 20%,transparent)}
#demo .pad-sound-check{margin-left:auto;color:var(--pad-color);opacity:0}
#demo [aria-pressed=true] .pad-sound-check{opacity:1}
#demo #pad-sounds button:focus-visible{outline:3px solid #fff;outline-offset:4px}
#demo .demo-pads[data-loading=true] #pad-status{color:#f4cf98}
@media(max-width:700px){
 #demo #pad-sounds{gap:7px}
 #demo #pad-sounds button{flex-direction:column;position:relative;gap:7px;padding:13px 5px 10px;font-size:12px;min-height:78px}
 #demo .pad-sound-check{position:absolute;right:7px;top:7px;font-size:10px}
}