/* AN8BUILD console: pinned desk workspace, independently scrolling lyrics. */
.studioMixer{--edge:#39454e;--gold:#e8b969;background:linear-gradient(135deg,#30373d,#20262c);color:#e4eaf0;border:1px solid var(--edge);border-radius:7px;padding:9px;min-height:0;min-width:0;font:12px system-ui;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 3px 10px #0005}
.mixHeading{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex-shrink:0;padding-bottom:7px;border-bottom:1px solid #13191e}.mixHeading>b{font-size:11px;letter-spacing:1.4px;color:#a8bdcc;flex-basis:100%}.mixHeading label{display:flex;align-items:center;gap:5px;font-size:11px}.mixHeading input[type=file]{max-width:150px;font-size:10px}.mixHeading a{color:#e8b969}.mixHeading button,.mixHeading select{min-height:28px;font-size:11px}.mixHeading #mixStatus{flex-basis:100%;font-size:10px;color:#93a9b9;line-height:1.3;max-height:30px;overflow:auto}
.mixChannels{display:flex;gap:4px;margin-top:8px;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;align-items:stretch}.mixStrip{display:grid;position:relative;grid-template-columns:minmax(0,1fr) 17px;grid-template-rows:26px 23px minmax(65px,1fr) 20px 28px;gap:5px;background:linear-gradient(90deg,#303941,#252d34);border:1px solid #43515b;border-top:3px solid #5e9cbd;min-width:72px;flex:1;padding:6px 5px 8px;border-radius:3px;min-height:0;box-shadow:inset 1px 0 #ffffff0a}.mixStrip:last-child{border-top-color:#e8b969;background:linear-gradient(90deg,#3e3d36,#2c2d2b)}.mixStrip>b{grid-column:1/-1;grid-row:1;text-align:center;font-size:10px;letter-spacing:.2px;align-self:center;overflow-wrap:anywhere}.mixStrip>meter{grid-column:2;grid-row:3;width:12px;height:100%;writing-mode:vertical-lr;transform:rotate(180deg);appearance:none;border:1px solid #10181c;border-radius:2px;background:#101a17}.mixStrip>meter::-webkit-meter-bar{background:#101a17;border:0;border-radius:0}.mixStrip>meter::-webkit-meter-optimum-value{background:linear-gradient(to right,#4cc987 0%,#77d488 65%,#e6c45d 85%,#e89e58 100%)}
.mixStrip>.volumeFader{grid-column:1;grid-row:3;writing-mode:vertical-lr;direction:rtl;appearance:none;width:28px;height:100%;margin:0;justify-self:center;background:transparent;cursor:ns-resize;accent-color:#d1d8dd}.volumeFader::-webkit-slider-runnable-track{background:linear-gradient(90deg,#131b20,#080e12,#202a31);width:6px;border:1px solid #080d11;border-radius:3px;box-shadow:1px 0 #53606a}.volumeFader::-webkit-slider-thumb{appearance:none;width:27px;height:15px;background:linear-gradient(#e5eaed,#aeb9c1 40%,#e2e6e9 45%,#4b5660 48%,#e0e5e9 55%,#83909a);border:1px solid #66737d;border-radius:2px;box-shadow:0 3px 4px #0009;margin-left:-11px}.volumeFader::-moz-range-track{background:#10181e;width:6px}.volumeFader::-moz-range-thumb{width:27px;height:14px;background:#c7d1d9;border:1px solid #73818d;border-radius:2px}
.mixStrip>.panControl{grid-column:1/-1;grid-row:2;width:100%;margin:0;height:19px;accent-color:#91a6b6;cursor:ew-resize}.mixStrip>output{grid-column:1/-1;grid-row:4;font:10px ui-monospace,monospace;color:#e8b969;background:#141d24;border:1px solid #40505b;padding:2px;text-align:center;border-radius:3px}.mixStrip>.faderScale{position:absolute;top:45%;left:0;writing-mode:vertical-rl;font:8px monospace;color:#7c8d98;pointer-events:none;max-height:45%;overflow:hidden}.mixStrip>button{grid-row:5;min-height:25px;padding:1px;border-radius:3px;background:#18232c;border:1px solid #53616c;font-size:11px;font-weight:700}.mixStrip>button:nth-last-child(2){grid-column:1}.mixStrip>button:last-child{grid-column:2;width:21px;justify-self:end}.mixStrip button[aria-pressed=true]{background:#d6a63e;color:#171a1e;box-shadow:0 0 6px #e7b54666}.mixStrip button:disabled,.mixStrip input:disabled{opacity:.35;cursor:default}
.studioDock{display:flex;flex-direction:column;min-height:0;min-width:0;gap:7px}.studioDock>.studioMixer{flex:1}.studioMonitor{flex-shrink:0;margin:0!important;padding:0!important;border:1px solid #3d4f5b;border-radius:5px;background:#202c35;font:12px system-ui;overflow:auto;max-height:42%}.studioMonitor>summary{padding:8px;cursor:pointer;color:#b9cbd8}.studioMonitor .side{border:0;border-radius:0;padding:9px;overflow:visible}.studioMonitor .side details{font-size:11px}.studioMonitor .beats{max-width:320px}
html:has(.studioDock),body:has(.studioDock){height:100%;overflow:hidden!important;background:#171e24}main:has(.studioDock){height:100dvh;max-width:none!important;padding:8px!important;gap:7px!important;grid-template-rows:44px auto minmax(0,1fr) 105px!important}.workspace:has(.studioDock){grid-template-columns:minmax(0,1fr) 440px!important;min-height:0;gap:9px!important}main:has(.studioDock)>header{min-width:0}main:has(.studioDock)>header nav{flex-wrap:wrap;justify-content:flex-end;gap:10px;font-size:12px}main:has(.studioDock)>header nav a{display:inline!important}main:has(.studioDock) .lyricsPanel{min-height:0}main:has(.studioDock) .lyrics{overflow:auto;min-height:0}main:has(.studioDock) footer{min-height:0;overflow:hidden}main:has(.studioDock) .keyboard{height:78px!important}main:has(.studioDock) .white{height:76px!important}main:has(.studioDock) .black{height:49px!important}
/* Library console remains a bounded, visible console block below its editor. */
main>.studioMixer{height:320px;min-height:260px;margin-top:12px}.mixStrip input:focus-visible{outline:2px solid #e8b969;outline-offset:3px}
@media(min-width:1400px){.workspace:has(.studioDock){grid-template-columns:minmax(0,1fr) 490px!important}.mixStrip{min-width:82px}}
@media(max-height:720px) and (min-width:851px){main:has(.studioDock){grid-template-rows:38px auto minmax(0,1fr) 80px!important;padding:5px!important;gap:5px!important}.mixHeading{gap:4px;padding-bottom:4px}.mixHeading>b{font-size:10px}.mixHeading input[type=file]{max-width:115px}.mixHeading #mixStatus{max-height:16px}.mixChannels{margin-top:5px}.mixStrip{grid-template-rows:21px 18px minmax(40px,1fr) 17px 23px;gap:3px;padding:4px}.studioMonitor>summary{padding:5px}main:has(.studioDock) .keyboard{height:56px!important}main:has(.studioDock) .white{height:54px!important}main:has(.studioDock) .black{height:35px!important}}
@media(max-width:1100px) and (min-width:851px){.workspace:has(.studioDock){grid-template-columns:minmax(0,1fr) 385px!important}.mixStrip{min-width:67px;padding:4px}.mixHeading a{display:none}main:has(.studioDock)>header h1{font-size:18px}}
@media(max-width:850px){html:has(.studioDock),body:has(.studioDock){height:auto;overflow:auto!important}main:has(.studioDock){height:auto;min-height:100dvh;grid-template-rows:auto auto auto 100px!important}.workspace:has(.studioDock){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:350px 310px!important}.studioDock{min-height:0}.studioMonitor{max-height:35%}.mixStrip{min-width:65px}.mixHeading{gap:5px}.mixHeading>b{flex-basis:auto;margin-right:auto}.mixHeading a{display:none}main:has(.studioDock)>header{align-items:flex-start;height:auto}main:has(.studioDock)>header nav{gap:6px;font-size:10px}main:has(.studioDock)>header p{font-size:9px}.mixHeading #mixStatus{max-height:14px}.mixStrip>.faderScale{display:none}}
@media print{.studioMixer,.studioDock{display:none!important}main:has(.studioDock){height:auto!important;display:block!important}.workspace:has(.studioDock){display:block!important}}