/* Listening room: an arrange window with a dedicated output channel. */
#listen{background:#10161e;background-image:linear-gradient(135deg,#1d2a342e,transparent 65%);color:#e8edf0}
#listen::before{display:none}
#listen .listen-heading,#listen .preview-note,#listen .demo-switch,#listen .players{max-width:1320px;margin-left:auto;margin-right:auto}
#listen .listen-heading .eyebrow{color:#ee9a63}
#listen .listen-heading>p,#listen .preview-note{color:#bac6d0}
#listen .preview-note{margin-bottom:18px}
#listen .demo-switch{display:flex;justify-content:flex-start;gap:4px;margin-bottom:14px;padding:0;background:none;border:0}
#listen .demo-switch button{min-height:44px;padding:10px 19px;border:1px solid #42515c;border-radius:5px;background:#19232d;color:#c0cbd3;font-size:12px;font-weight:600}
#listen .demo-switch button[aria-pressed=true]{border-color:#ee9a63;background:#2a2624;color:#ffcc8c}
#listen .players{display:block;overflow:visible;padding:0;scroll-snap-type:none}
#listen .audio-player{--accent:#78cdbc;--track-head:102px;--ruler:28px;display:block;min-width:0;padding:0;border:1px solid #4b5964;border-radius:8px;background:#151d26;box-shadow:0 18px 36px #03080c55,inset 0 1px #ffffff0c;overflow:hidden}
#listen .audio-player[data-product=wurmhole]{--accent:#ee9a63}
#listen .audio-player[hidden]{display:none!important}
#listen .audio-player::before,#listen .audio-player::after{display:none}
#listen .player-top{height:39px;gap:16px;padding:0 16px;border-bottom:1px solid #35414c;background:#202a34}
#listen .player-top h3{font:600 11px/1.2 var(--body);letter-spacing:.13em;color:#dfe8ed}
#listen .player-top .micro{font:10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;color:#a6b7c3;letter-spacing:.06em}
#listen .daw-session-light{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:9px;background:var(--accent)}
#listen .daw-transport{display:grid;grid-template-columns:40px 40px minmax(0,1fr) 116px;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #35414c;background:#1a232d}
#listen .play,#listen .player-loop{display:grid;place-items:center;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border:1px solid #596875;border-radius:4px;background:#2b3743;box-shadow:inset 0 1px #ffffff09;color:#dce5e9}
#listen .play span{font-size:15px;line-height:1}
#listen .play:hover,#listen .player-loop:hover{background:#394754}
#listen .is-playing .play{background:var(--accent);border-color:var(--accent);color:#101c20}
#listen .player-loop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#listen .player-loop[aria-pressed=true]{border-color:#ffcc8c;color:#ffcc8c;background:#342e23}
#listen .clip-label{display:block;min-width:0;margin:0}
#listen .clip-label select{display:block;width:100%;height:40px;min-height:40px;margin:0;padding:7px 25px 7px 11px;border:1px solid #455460;background:#111b24;color:#d7e5ed;box-shadow:inset 0 1px 3px #0004;font:500 12px/1.2 var(--body);text-overflow:ellipsis}
#listen .play-time{display:block;padding:9px 8px;border:1px solid #43514d;border-radius:3px;background:#0a1519;box-shadow:inset 0 2px 4px #0005;color:#f2d5a1;text-align:center;white-space:nowrap;font:400 16px/20px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.01em}
#listen .daw-workspace{display:grid;grid-template-columns:minmax(0,1fr) 128px}
#listen .daw-arrange{position:relative;min-width:0;background:#101820}
#listen .daw-ruler{display:flex;justify-content:space-between;align-items:start;height:var(--ruler);margin-left:var(--track-head);padding:0 10px;border-bottom:1px solid #3e4b56;background:repeating-linear-gradient(90deg,#63717c60 0 1px,transparent 1px 5%),#19232d;overflow:hidden}
#listen .daw-ruler span{padding:3px 3px 0;background:#19232d;color:#a8bac6;font:10px/16px ui-monospace,SFMono-Regular,Consolas,monospace}
#listen .daw-track{display:grid;grid-template-columns:var(--track-head) minmax(0,1fr);min-width:0;height:115px;border-bottom:1px solid #34414b}
#listen .daw-track-head{position:relative;display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:8px;padding:12px;border-right:1px solid #4a5963;background:#202c36;color:#cfdee7}
#listen .daw-track-chip{width:5px;height:13px;border-radius:2px;background:#829fad;flex-shrink:0}
#listen .daw-track-name{font:600 10px/1.4 var(--body);letter-spacing:.1em}
#listen .daw-track-ms{display:flex;gap:4px;width:100%;padding-left:13px;color:#a5b5c0;font:9px/20px ui-monospace,SFMono-Regular,Consolas,monospace}
#listen .daw-track-ms span{display:block;width:21px;text-align:center;border:1px solid #4b5c68;border-radius:2px;background:#16212a}
#listen .daw-track + .daw-track .daw-track-chip{background:var(--accent)}
#listen .daw-track-bed{display:flex;align-items:stretch;min-width:0;padding:10px 8px;background:repeating-linear-gradient(90deg,#53657220 0 1px,transparent 1px 5%)}
#listen .daw-region{position:relative;min-width:0;width:100%;border:1px solid #607e9066;border-radius:4px;background:#263d4d;color:#cbdce7;overflow:hidden;transition:opacity .08s linear}
#listen .daw-track + .daw-track .daw-region{border-color:#80ccbb70;background:#21493f;color:#b7eadb}
#listen [data-product=wurmhole] .daw-track + .daw-track .daw-region{border-color:#ee9a6366;background:#503728;color:#ffdbb4}
#listen .daw-region-name{position:relative;display:block;z-index:1;padding:4px 8px;font:10px/14px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#0002}
#listen .daw-waveform{display:block;width:100%;height:calc(100% - 22px);border-top:1px solid #ffffff10}
#listen .daw-region::after{content:'Press play';position:absolute;top:57%;left:10px;color:inherit;font:10px/1 var(--body);opacity:.8}
#listen .has-waveforms .daw-region::after{display:none}
#listen .daw-seek-surface{position:absolute;z-index:2;left:var(--track-head);right:0;top:var(--ruler);height:230px;overflow:hidden;cursor:col-resize;touch-action:pan-y}
#listen .daw-playhead{position:absolute;inset:0;pointer-events:none}
#listen .daw-playhead::before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;width:1px;background:#f6d39b}
#listen .daw-playhead::after{content:'';position:absolute;left:-3px;top:0;width:7px;height:6px;background:#f6d39b;clip-path:polygon(0 0,100% 0,50% 100%)}
#listen .player-timeline{display:block;margin:0;padding:0 9px 0 calc(var(--track-head) + 9px);background:#18232c}
#listen .player-timeline .seek-label{display:block;margin:0}
#listen .seek{height:28px;width:100%;margin:0;cursor:col-resize;accent-color:#ffcc8c}
#listen .daw-channel{display:grid;grid-template-columns:minmax(0,1fr) 32px;grid-template-rows:auto 1fr auto;column-gap:7px;align-items:center;padding:12px 10px 9px;border-left:1px solid #4b5964;background:#202b35}
#listen .daw-channel-title{grid-column:1/-1;align-self:start;margin-bottom:13px;font:600 9px/1.5 var(--body);letter-spacing:.15em;text-align:center;color:#c0d0da}
#listen .mix-control{gap:5px;min-width:64px;width:64px;margin:0;justify-self:center}
#listen .mix-knob{width:64px;height:64px;background:conic-gradient(from 225deg,var(--accent) 0deg var(--mix-sweep),#4a5964 var(--mix-sweep) 270deg,transparent 270deg)}
#listen [data-product=wurmhole] .mix-knob{--accent:#ee9a63}
#listen .mix-knob::before{inset:4px;border:1px solid #111820;background:#18222b}
#listen .mix-dial{inset:10px;border-color:#6c7e89;background:linear-gradient(140deg,#53636f,#27333e 70%);box-shadow:0 2px 3px #0008,inset 0 1px #ffffff20}
#listen [data-product=wurmdrive] .mix-dial{background:linear-gradient(140deg,#c4ad7e,#83704d 70%);border-color:#c4ad7e}
#listen .mix-dial::after{top:4px;height:11px;width:2px;left:calc(50% - 1px)}
#listen .mix-label{font-size:9px;color:#d5e1e7;letter-spacing:.12em}
#listen .mix-value{color:#e7d4b1;font:12px/18px ui-monospace,SFMono-Regular,Consolas,monospace}
#listen .daw-meter{display:grid;grid-template-columns:6px 6px 12px;gap:3px;height:148px;align-self:center;position:relative}
#listen .daw-meter-channel{position:relative;overflow:hidden;background:linear-gradient(to top,#77c6b2 0 65%,#ffcc8c 82%,#ee9a63 94%,#e1786e 100%);border:1px solid #4b5b64;border-radius:1px}
#listen .daw-meter-channel::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to top,transparent 0 8px,#091217 8px 10px);pointer-events:none}
#listen .daw-meter-fill{position:absolute;inset:0;transform:scaleY(1);transform-origin:top;background:#111b22}
#listen .daw-meter-peak{position:absolute;inset:0;transform:translateY(0);pointer-events:none}
#listen .daw-meter-peak::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#ffe3b9}
#listen .daw-meter-scale{position:relative;color:#a8bbc6;font:7px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
#listen .daw-meter-scale span{position:absolute;left:0;white-space:nowrap}
#listen .daw-meter-scale span:nth-child(1){top:0}
#listen .daw-meter-scale span:nth-child(2){top:20%}
#listen .daw-meter-scale span:nth-child(3){top:40%}
#listen .daw-meter-scale span:nth-child(4){bottom:0}
#listen .daw-channel-foot{grid-column:1/-1;margin-top:12px;color:#a8bac7;text-align:center;font:9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}
#listen .player-fallback{flex-direction:column;gap:4px;margin:0;padding:3px;background:#15212a;border-color:#495c68}
#listen .player-fallback button{min-width:50px;min-height:34px;background:#2b3b47;color:#d7e6ee;border-color:#5b6b75;box-shadow:none}
#listen .player-fallback button[aria-pressed=true]{background:var(--accent);color:#10201e}
#listen .daw-session-foot{display:flex;gap:14px;justify-content:space-between;align-items:center;padding:8px 13px;background:#18222c;border-top:1px solid #34414b}
#listen .player-status{margin:0;min-height:14px;color:#b7c9d5;font:10px/1.5 var(--body)}
#listen .daw-duration{flex-shrink:0;white-space:nowrap;color:#a6b9c7;font:9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
#listen :focus-visible{outline:2px solid #ffcc8c;outline-offset:3px}
#listen .daw-arrange:focus-within{box-shadow:inset 0 0 0 1px #ffcc8c80}
@media(min-width:1700px){#listen .daw-track{height:128px}#listen .daw-seek-surface{height:256px}}
@media(max-width:650px){
 #listen .audio-player{--track-head:52px;--ruler:25px;border-radius:6px}
 #listen .player-top{height:33px;padding:0 10px;gap:8px}
 #listen .player-top h3{font-size:10px}
 #listen .player-top .micro{font-size:8px}
 #listen .daw-transport{grid-template-columns:36px 36px minmax(0,1fr) 87px;gap:5px;padding:7px}
 #listen .play,#listen .player-loop{width:36px;min-width:36px;height:40px;min-height:40px}
 #listen .clip-label select{font-size:10px;padding-left:7px;padding-right:15px}
 #listen .play-time{padding:9px 4px;font-size:12px;letter-spacing:0}
 #listen .daw-workspace{grid-template-columns:minmax(0,1fr)}
 #listen .daw-ruler{padding:0 4px}
 #listen .daw-ruler span{font-size:8px;padding:2px 1px 0}
 #listen .daw-track{height:94px}
 #listen .daw-track-head{padding:7px 5px;gap:4px;flex-wrap:nowrap}
 #listen .daw-track-name{font-size:8px;letter-spacing:0}
 #listen .daw-track-chip{width:3px;height:12px}
 #listen .daw-track-ms{display:none}
 #listen .daw-track-bed{padding:7px 5px}
 #listen .daw-region-name{font-size:9px;padding:3px 5px}
 #listen .daw-waveform{height:calc(100% - 20px)}
 #listen .daw-seek-surface{height:188px}
 #listen .player-timeline{padding-left:calc(var(--track-head) + 5px);padding-right:5px}
 #listen .daw-channel{grid-template-columns:1fr 72px 1fr;grid-template-rows:auto;gap:8px;padding:9px 15px;border-left:0;border-top:1px solid #4b5964}
 #listen .daw-channel-title{grid-column:1;grid-row:1;align-self:center;margin:0 0 20px;text-align:left;line-height:1.7}
 #listen .mix-control{grid-column:2;grid-row:1;gap:2px}
 #listen .daw-meter{grid-column:3;grid-row:1;justify-self:end;height:84px}
 #listen .daw-channel-foot{grid-column:1;grid-row:1;margin-top:38px;align-self:center;text-align:left;font-size:8px}
 #listen .daw-session-foot{gap:8px;padding:7px 9px;align-items:flex-start}
 #listen .player-status{font-size:9px;min-height:27px}
 #listen .daw-duration{font-size:8px}
 #listen .player-fallback{grid-column:2;grid-row:1}
}
@media(prefers-reduced-motion:reduce){#listen .daw-region{transition:none}}
/* Claude 2026-10-24: lanes seek on click/drag, so the range input is kept only for keyboard and screen readers.
   Hidden on screen; it shows as a thin line under the lanes while it has keyboard focus. */
#listen .player-timeline .seek-label{position:relative;height:0;overflow:visible}
#listen .seek{position:absolute;left:0;right:0;top:-6px;height:6px;opacity:0}
#listen .seek:focus-visible{opacity:1}