@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101513;--panel:#1b221f;--line:#303b35;--mint:#bbf779;--muted:#94a298}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f0f4ee;font-family:'DM Sans',system-ui,sans-serif;padding:0 32px}button,input,select{font:inherit}button,select{cursor:pointer}button{background:#222c26;color:inherit;border:1px solid var(--line);border-radius:10px;padding:11px 16px}button:hover{background:#344237}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:3px}header{display:flex;align-items:center;gap:12px;height:92px;border-bottom:1px solid var(--line)}.brand{font:700 26px 'Space Grotesk',sans-serif;display:flex;gap:12px;align-items:center;margin-right:auto}.logo{border-radius:12px;background:var(--mint);color:#142313;font-size:34px;line-height:45px;width:45px;text-align:center}.brand small{display:block;color:var(--muted);font:9px 'DM Sans';letter-spacing:2px;margin-top:5px}.mint{color:var(--mint)}.status{color:#d5d9cf;font-size:12px}.status i{display:inline-block;width:7px;height:7px;background:#edb86a;border-radius:50%;margin-right:7px}.heading{display:flex;justify-content:space-between;align-items:center;padding:30px 0 22px}.eyebrow{color:var(--muted);font-size:10px;letter-spacing:2px}h1{font:500 clamp(23px,3vw,36px) 'Space Grotesk';margin:8px 0}label{display:block;font-size:13px;color:#b7c1b9}select,input:not([type=checkbox]):not([type=range]):not([type=color]){width:100%;padding:12px;background:#1b231e;color:#fff;border:1px solid var(--line);border-radius:8px;margin-top:8px}.bus-label{font-size:9px;letter-spacing:2px;min-width:150px}.bus-label select{font-size:14px;letter-spacing:0}nav{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px}nav>div{display:flex;gap:7px}nav button{border:none;background:transparent;color:var(--muted)}nav button.active{background:var(--mint);color:#1a2814;font-weight:700}#modeLabel{font-size:11px;color:var(--muted);letter-spacing:1px}.context{display:flex;justify-content:space-between;align-items:center;margin:20px 0 12px;font-size:13px}.context span{color:var(--muted);font-size:11px}main{display:flex;gap:18px;height:clamp(340px,52vh,580px);min-height:340px}#strips{display:flex;gap:10px;overflow-x:auto;flex:1;min-width:0;padding-bottom:10px;scrollbar-color:#465c4a transparent}#pinned{display:flex;gap:10px;border-left:1px solid var(--line);padding-left:18px;flex-shrink:0}.strip{width:110px;flex-shrink:0;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:12px;display:flex;flex-direction:column;align-items:center;padding:12px 8px;position:relative}.strip.feature{width:145px;background:#233023}.strip.master{background:#263322}.strip .tag{font-size:9px;letter-spacing:1.4px;color:var(--accent);height:19px}.strip .name{width:100%;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;height:39px;padding:8px 2px;background:transparent;border:0}.strip .name.group:hover{background:#303b35}.strip .db{font:500 23px 'Space Grotesk';margin:8px 0 3px;font-variant-numeric:tabular-nums}.strip .unit{font-size:9px;color:var(--muted);letter-spacing:1px}.fader-wrap{flex:1;min-height:100px;display:flex;align-items:center;justify-content:center;position:relative;width:100%;padding:15px 0}.fader-wrap:before{content:'+10 ─\A\A  0 ─\A\A−20 ─\A\A−40 ─\A\A −∞ ─';white-space:pre;position:absolute;left:3px;top:12px;bottom:12px;color:#617266;font:9px monospace;line-height:1.35;pointer-events:none}.fader{writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;width:7px;height:100%;background:#090e0b;border-radius:5px;touch-action:none;margin:0;position:relative}.fader::-webkit-slider-thumb{appearance:none;width:38px;height:22px;background:linear-gradient(#e7ece5 0%,#a9b4a7 45%,#546751 48%,#546751 53%,#b9c6b5 56%);border:1px solid #080d09;border-radius:5px;box-shadow:0 4px 9px #0008}.fader::-moz-range-thumb{width:38px;height:22px;background:#c8d5c1;border:1px solid #080d09;border-radius:5px}.feature .fader::-webkit-slider-thumb{width:48px;height:26px;background:linear-gradient(#d8ffab,#8fc255)}.pan{width:90%;accent-color:var(--accent);height:18px;margin:5px}.pan-label{font-size:9px;color:var(--muted);height:15px}.channel-foot{font-size:10px;color:var(--muted);padding-top:8px}footer{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);padding:20px 0}footer>span:first-child{color:#c6ad7a}dialog{width:min(620px,94vw);max-height:90dvh;background:#19211c;color:#eef4ed;border:1px solid #465647;border-radius:18px;padding:24px}dialog::backdrop{background:#030906c9;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;gap:12px;align-items:center}h2{font:500 24px 'Space Grotesk';margin:0}h3{font-size:15px;margin-top:25px}p{font-size:13px;color:#b4c1b5;line-height:1.65}.muted{font-size:12px;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.channel-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:6px 0}.channel-row label{flex:1;color:#e1e9e0}.channel-row button{padding:7px 12px}.channel-row input,.checks input{accent-color:var(--mint);width:18px;height:18px;vertical-align:middle;margin-right:9px}.group-row{display:flex;align-items:center;gap:8px;padding:10px 0}.group-row span{flex:1}.primary{background:var(--mint);color:#1a2814;font-weight:700}.primary:hover{background:#d4ff9f}.wide{width:100%;margin-top:20px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.checks label{display:flex;align-items:center}.notice{border:1px solid #776343;background:#332c1c;padding:16px;border-radius:10px;margin-top:18px;line-height:1.6;font-size:13px}.empty{padding:30px;color:var(--muted);font-size:14px}#breadcrumb button{padding:5px 10px;margin-right:10px}
@media(max-width:700px){body{padding:0 12px}header{height:72px;gap:7px}.brand{font-size:20px}.logo{width:34px;line-height:36px;font-size:28px}.brand small{font-size:7px;letter-spacing:1px}.status{padding:9px;font-size:10px}#settings{padding:9px}#settings span{display:none}.heading{padding:20px 0 16px}.eyebrow{font-size:8px;letter-spacing:1px}.bus-label{min-width:110px;width:110px}h1{font-size:22px;max-width:180px}main{gap:8px;height:54dvh}.strip{width:91px;padding:10px 5px}.strip.feature{width:96px}#pinned{gap:6px;padding-left:8px}.strip .name{font-size:12px}.strip .db{font-size:22px}.context span{display:none}.fader-wrap:before{font-size:8px;left:0}footer{font-size:9px}footer span:last-child{display:none}dialog{padding:18px}.checks{gap:8px}}@media(max-height:550px) and (orientation:landscape){header{height:52px}.heading{padding:10px 0}.heading h1{font-size:21px}.eyebrow{display:none}nav{padding-bottom:7px}.context{margin:8px 0}main{height:calc(100dvh - 205px);min-height:220px}.strip .tag{height:12px}.strip .name{height:27px;padding:3px}.strip .db{font-size:19px;margin:2px}.fader-wrap{padding:7px 0}.fader-wrap:before{display:none}footer{padding:9px 0}.strip{padding:7px}}
.fader-wrap:before{content:"";width:14px;left:8px;top:15px;bottom:15px;background:repeating-linear-gradient(to bottom,#415046 0 1px,transparent 1px 10%);opacity:.65}
/* Size all visible controls from the available mixer width, in either orientation. */
body{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));min-height:100dvh;display:flex;flex-direction:column}
main{gap:0;flex:1;height:auto;min-height:320px;padding-bottom:4px}
#strips{gap:6px;padding-bottom:4px;align-items:stretch}
#pinned{gap:6px;margin-left:6px;padding-left:2px;padding-bottom:4px}
.strip{width:var(--strip-width,100px);padding:10px 5px;min-width:0}
.strip.feature{width:var(--pinned-width,130px)}
.channel-icon{height:28px;flex-shrink:0;color:var(--accent);display:flex;align-items:center;justify-content:center}
.channel-icon svg{width:24px;height:24px}.icon-number{font:12px monospace;border:1px solid currentColor;border-radius:4px;padding:3px}
.strip .tag{font-size:8px;letter-spacing:.5px;white-space:nowrap}.strip .name{flex-shrink:0}.strip .db{flex-shrink:0}
.strip.feature:not(.master){background:var(--panel)}
.feature:not(.master) .fader::-webkit-slider-thumb{background:linear-gradient(#e7ece5,#a9b4a7)}
main[data-compact=true] .strip .name{font-size:10px}main[data-compact=true] .strip .db{font-size:20px}main[data-compact=true] .channel-foot{font-size:8px}
.fader-wrap{min-height:90px}.fader{height:100%;min-height:70px}footer{flex-shrink:0}
@media(max-width:700px){header{height:58px;flex-shrink:0}.heading{padding:12px 0}.heading h1{font-size:20px}.context{margin:10px 0}nav{padding-bottom:9px}main{height:auto;min-height:320px}.strip.feature{width:var(--pinned-width,90px)}#pinned{padding-left:2px;gap:6px}.strip .tag{font-size:7px}.channel-foot{font-size:8px}footer{padding:10px 0}.strip .name{height:32px;padding:6px 1px}}
@media(orientation:landscape) and (max-height:600px){body{height:100dvh;min-height:340px;display:grid;grid-template-columns:1fr auto;grid-template-rows:44px 37px 25px minmax(210px,1fr) 22px;column-gap:16px}header{grid-column:1;grid-row:1;height:44px;border:0}.brand{font-size:18px}.brand small,.logo,.eyebrow,.heading h1{display:none}.heading{grid-column:2;grid-row:1 / 3;padding:0;align-self:center}.bus-label{min-width:135px;font-size:8px}.bus-label select{padding:8px;margin-top:3px}nav{grid-column:1;grid-row:2;padding:0;border:0}nav button{padding:7px 14px}.context{grid-column:1 / -1;grid-row:3;margin:0;font-size:11px;align-self:center}.context span{display:none}main{grid-column:1 / -1;grid-row:4;min-height:0;height:100%;padding:0}.strip{padding:5px}.strip .tag{height:12px;font-size:7px}.channel-icon{height:20px}.channel-icon svg{width:19px;height:19px}.strip .name{height:22px;padding:2px;font-size:11px}.strip .db{font-size:18px;margin:0}.strip .unit{font-size:8px}.fader-wrap{min-height:55px;padding:5px 0}.fader{min-height:45px}.channel-foot{display:none}.pan{height:12px;margin:2px}.pan-label{height:11px;font-size:8px}footer{grid-column:1 / -1;grid-row:5;padding:4px 0;font-size:8px}}
body{height:100dvh;min-height:560px}header,.heading,nav,.context{flex-shrink:0}main{min-height:260px}.fader-wrap .fader{position:absolute;top:12px;bottom:12px;height:calc(100% - 24px);min-height:0}.fader-wrap{min-height:0}
@media(orientation:landscape) and (max-height:600px){body{min-height:340px}main{min-height:0}.fader-wrap .fader{top:6px;bottom:6px;height:calc(100% - 12px)}}