/* A compact broadcast mixer, with faders and viewer switches in one console. */
.hb-settings{max-width:none;margin:0 0 0 76px;padding:clamp(18px,3vw,40px);}
.st-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:20px;}
#league-shell .st-heading h1{font-size:clamp(36px,4vw,54px);margin-top:5px;}
.st-device{font-size:10px;color:var(--dim);display:flex;align-items:center;gap:7px;}
.st-device i{width:5px;height:5px;background:#b9cba6;}
.st-console{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);border:1px solid #414c4e;background:#182329;}
.st-audio{min-width:0;}.st-display{border-left:1px solid #414c4e;}
.st-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid #414c4e;}
#league-shell .st-section-head h2{font-size:24px;}.st-section-head>span{font-size:9px;letter-spacing:.08em;color:var(--dim);}
#league-shell .st-section-head>button{padding:5px 10px;font-size:11px;}
.st-channels{display:grid;grid-template-columns:1fr 1fr;}.st-channel{padding:20px;min-width:0;}.st-channel+.st-channel{border-left:1px solid #414c4e;}
.st-channel header{display:flex;align-items:center;justify-content:space-between;gap:8px;}.st-code{font-size:9px;color:#b9a37f;letter-spacing:.1em;}
#league-shell .st-channel h2{font-size:30px;margin-top:6px;}
#league-shell .st-channel p{font-size:11px;line-height:1.5;min-height:33px;margin:12px 0 18px;}
.st-fader{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px;}.st-fader label{font-size:11px;color:var(--dim);}.st-fader output{font:600 36px/1 'Saira Condensed',sans-serif;color:#e3c08b;font-variant-numeric:tabular-nums;}.st-fader output small{font-size:14px;margin-left:3px;}
#league-shell .st-fader input[type=range]{grid-column:1/-1;appearance:none;-webkit-appearance:none;background:transparent;border:0;padding:0;height:32px;margin:0;cursor:pointer;}
.st-fader input::-webkit-slider-runnable-track{height:6px;background:linear-gradient(to right,#d9b780 var(--level),#39484d var(--level));}
.st-fader input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:24px;background:#e2ddd0;border:2px solid #182329;margin-top:-9px;border-radius:0;}
.st-fader input::-moz-range-track{height:6px;background:#39484d;}.st-fader input::-moz-range-progress{height:6px;background:#d9b780;}.st-fader input::-moz-range-thumb{width:10px;height:22px;border:2px solid #182329;background:#e2ddd0;border-radius:0;}
.st-scale{grid-column:1/-1;display:flex;justify-content:space-between;color:#a6a99d;font-size:9px;}
.st-audio-note{border-top:1px solid #414c4e;padding:12px 20px;font-size:10px;color:var(--dim);}
.st-option{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid #343f42;}
#league-shell .st-option h3{font-size:22px;}#league-shell .st-option p{font-size:11px;line-height:1.4;margin:5px 0 0;max-width:30em;}
#league-shell .st-switch{display:flex;align-items:center;gap:8px;padding:8px;background:transparent;border:0;font-size:10px;min-width:72px;flex-shrink:0;}
.st-switch i{position:relative;width:30px;height:16px;border:1px solid #7b8177;background:#233037;}.st-switch i:after{content:'';position:absolute;left:3px;top:3px;width:8px;height:8px;background:#a4aaa0;}
.st-switch[aria-checked=true] i{border-color:#c8ad7b;background:#4d4937;}.st-switch[aria-checked=true] i:after{left:17px;background:#e3c08b;}.st-switch[aria-checked=true] span{color:#e3c08b;}
#league-shell .st-display-note{font-size:10px;line-height:1.4;margin:0;padding:12px 20px;}
.st-footer{display:flex;align-items:center;gap:14px;padding-top:16px;}.st-footer>span{font-size:10px;color:var(--dim);}
#league-shell .st-footer button{font-size:11px;padding:8px 12px;background:transparent;}.st-return{margin-left:auto;}.st-return span{margin-left:16px;color:#d9b780;}

@media(max-width:760px){.hb-settings{margin-left:0;padding:16px 16px 73px;}.st-heading{margin-bottom:12px;}.st-device{font-size:9px;}.st-console{grid-template-columns:1fr;}.st-display{border-left:0;border-top:1px solid #414c4e;}.st-channel{padding:14px;}.st-section-head{padding:10px 14px;}#league-shell .st-channel h2{font-size:25px;}#league-shell .st-channel p{font-size:10px;margin:8px 0 10px;min-height:30px;}.st-fader output{font-size:30px;}.st-option{padding:10px 14px;}.st-audio-note,#league-shell .st-display-note{padding:9px 14px;font-size:9px;}#league-shell .st-option h3{font-size:20px;}#league-shell .st-option p{font-size:10px;}.st-footer{gap:8px;padding-top:12px;}.st-footer>span{display:none;}#league-shell .hb-header nav button{padding:6px 3px;font-size:8px;flex-direction:column;gap:3px;}}
@media(max-height:600px) and (min-width:761px){.hb-settings{padding:16px 24px;}.st-heading{margin-bottom:12px;}.st-channel{padding:12px 18px;}.st-option{padding:11px 18px;}.st-section-head{padding:10px 18px;}}
@media(max-width:760px){
 .st-channel header{position:relative;display:block;}.st-channel header .st-switch{position:absolute;right:0;top:-5px;min-width:0;padding:4px;gap:0;}.st-channel header .st-switch span{display:none;}
 #league-shell .st-channel h2{margin-top:12px;white-space:nowrap;font-size:24px;}
}
@media(max-width:760px) and (max-height:740px){
 .hb-settings{padding:10px 12px 67px;}.st-heading{margin-bottom:8px;}#league-shell .st-heading h1{font-size:32px;}.st-heading .hb-eyebrow{font-size:8px;}
 .st-channel{padding:10px 12px;}#league-shell .st-channel p{font-size:9px;min-height:27px;margin:6px 0 8px;}
 .st-section-head{padding:8px 12px;}#league-shell .st-section-head h2{font-size:22px;}.st-option{padding:8px 12px;}
 #league-shell .st-option p{font-size:9px;}#league-shell .st-display-note{display:none;}.st-audio-note{padding:7px 12px;font-size:8px;}
 .st-footer{padding-top:8px;}
}
@media(max-width:760px) and (max-height:740px){
 #league-shell .st-channel p,.st-audio-note{display:none;}.st-fader{margin-top:8px;}
 .st-heading{margin-bottom:6px;}.st-section-head{padding:6px 12px;}.st-footer{padding-top:6px;}
}
@media(min-width:761px) and (max-height:520px){
 .hb-settings{padding:10px 20px;}.st-heading{margin-bottom:8px;}#league-shell .st-heading h1{font-size:32px;}.st-heading .hb-eyebrow{display:none;}
 #league-shell .st-channel p,.st-audio-note,#league-shell .st-display-note,#league-shell .st-option p{display:none;}
 .st-section-head{padding:6px 14px;}#league-shell .st-section-head h2{font-size:21px;}.st-channel{padding:12px 14px;}
 #league-shell .st-channel h2{font-size:25px;margin-top:3px;}.st-fader{margin-top:8px;}.st-fader output{font-size:28px;}.st-option{padding:7px 14px;}.st-footer{padding-top:8px;}
}
@media(min-width:761px) and (max-height:520px){
 .st-channel header{position:relative;display:block;}.st-channel header .st-switch{position:absolute;right:0;top:-4px;min-width:0;padding:4px;gap:0;}.st-channel header .st-switch span{display:none;}
 #league-shell .st-channel h2{margin-top:10px;white-space:nowrap;}
}
/* Both match sides share one palette across the scene and every UI surface. */
.st-console{grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,1fr);}
.st-colors{min-width:0;border-left:1px solid #414c4e;}
.st-color-editors{display:grid;grid-template-columns:1fr 1fr;}.st-color-editor{padding:14px 12px;min-width:0;}.st-color-editor+div{border-left:1px solid #414c4e;}
.st-color-editor header{display:flex;align-items:center;justify-content:space-between;gap:8px;}#league-shell .st-color-editor h3{font-size:23px;color:var(--team);white-space:nowrap;}.st-color-editor svg{width:56px;height:25px;min-width:0;}
.st-color-fields{display:flex;align-items:center;gap:6px;margin:10px 0;}
#league-shell .st-color-fields input[type=color]{appearance:none;-webkit-appearance:none;flex:0 0 32px;width:32px;height:32px;border:1px solid #758085;padding:2px;cursor:pointer;margin:0;background:transparent;}
.st-color-fields input[type=color]::-webkit-color-swatch-wrapper{padding:0;}.st-color-fields input[type=color]::-webkit-color-swatch{border:0;}.st-color-fields input[type=color]::-moz-color-swatch{border:0;}
#league-shell .st-color-fields input[type=text]{min-width:0;width:100%;padding:7px 5px;margin:0;font-size:11px;height:32px;letter-spacing:.02em;}
#league-shell .st-color-fields input[aria-invalid=true]{border-color:#ef827b;outline-color:#ef827b;}
.st-color-sample{display:flex;align-items:center;gap:5px;color:var(--team);font-size:7px;}.st-color-sample i{height:3px;flex:1;background:var(--team);}.st-color-sample b{font-size:11px;}
.st-presets{border-top:1px solid #414c4e;padding:12px;}.st-presets>span{display:block;font-size:8px;color:var(--dim);letter-spacing:.08em;margin-bottom:8px;}.st-presets>div{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
#league-shell .st-presets button{display:flex;align-items:center;gap:4px;padding:7px 6px;background:transparent;font-size:8px;border-color:#435259;min-width:0;}
.st-presets button i{height:12px;width:6px;flex-shrink:0;}.st-presets button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#league-shell .st-presets button[aria-pressed=true]{border-color:#d9b780;background:#313b3c;}
#league-shell #ship-color-help{font-size:10px;line-height:1.4;margin:0;border-top:1px solid #414c4e;padding:10px 12px;}
@media(min-width:1101px){.st-channels{grid-template-columns:1fr;}.st-channel{padding:12px 18px;}.st-channel+.st-channel{border-left:0;border-top:1px solid #414c4e;}#league-shell .st-channel p{min-height:0;margin:8px 0 12px;}#league-shell .st-channel h2{font-size:27px;}.st-fader output{font-size:30px;}}
@media(min-width:761px) and (max-width:1100px){.st-console{grid-template-columns:1.2fr 1fr;}.st-audio{grid-row:1;}.st-display{grid-row:1;grid-column:2;}.st-colors{grid-column:1/-1;border-left:0;border-top:1px solid #414c4e;display:grid;grid-template-columns:1.2fr 1fr;}.st-colors>.st-section-head{grid-column:1/-1;}.st-color-editors{grid-row:2/4;}.st-presets{border-top:0;border-left:1px solid #414c4e;}.st-presets>div{grid-template-columns:repeat(3,1fr);}#league-shell #ship-color-help{grid-column:2;border-left:1px solid #414c4e;font-size:9px;padding:6px 12px;}.st-color-editor{padding:12px 18px;}.st-color-editor svg{width:72px;}.st-color-fields{margin:8px 0;}}
@media(max-width:760px){.st-console{grid-template-columns:1fr;}.st-colors{border-left:0;border-top:1px solid #414c4e;}.st-color-editors{grid-template-columns:1fr 1fr;}.st-color-editor{padding:10px 12px;}.st-presets{padding:8px 12px;}.st-presets>div{grid-template-columns:repeat(3,1fr);}.st-presets>span{display:none;}#league-shell #ship-color-help{padding:8px 12px;font-size:9px;}}
@media(max-width:760px) and (max-height:740px){#league-shell #ship-color-help{display:none;}.st-color-editor{padding:7px 12px;}.st-color-editor header svg,.st-color-sample{display:none;}#league-shell .st-color-editor h3{font-size:19px;}.st-color-fields{margin:6px 0 0;}.st-presets{padding:6px 12px;}#league-shell .st-presets button{padding:5px;}.st-presets button span{display:none;}.st-presets button{justify-content:center;}}
.st-panes{display:none;}
@media(max-width:760px),(min-width:761px) and (max-height:520px){
 .st-panes{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #414c4e;border-bottom:0;}
 #league-shell .st-panes button{padding:9px 6px;border:0;border-right:1px solid #414c4e;background:#17252c;font-size:11px;}
 #league-shell .st-panes button:last-child{border-right:0;}#league-shell .st-panes button[aria-pressed=true]{background:#2e3b40;color:#e3c08b;box-shadow:inset 0 -2px #d9b780;}
 .st-console{grid-template-columns:1fr;}.st-console>section{border:0;grid-column:auto;grid-row:auto;}
 .st-console[data-pane=audio]>.st-colors,.st-console[data-pane=audio]>.st-display,
 .st-console[data-pane=colors]>.st-audio,.st-console[data-pane=colors]>.st-display,
 .st-console[data-pane=display]>.st-audio,.st-console[data-pane=display]>.st-colors{display:none;}
 .st-console>.st-colors{display:block;}.st-console[data-pane=audio]>.st-colors,.st-console[data-pane=display]>.st-colors{display:none;}
 .st-colors #ship-color-help{border-left:0;}.st-colors .st-presets{border-left:0;border-top:1px solid #414c4e;}
}
@media(min-width:761px) and (max-height:520px){
 .st-channels{grid-template-columns:1fr 1fr;}.st-channel+.st-channel{border-left:1px solid #414c4e;border-top:0;}
 .st-color-editors{grid-template-columns:1fr 1fr;}.st-color-editor{padding:10px 20px;}.st-color-fields{max-width:240px;}
 .st-presets>div{grid-template-columns:repeat(6,1fr);}.st-presets>span,#league-shell #ship-color-help{display:none;}
}
@media(min-width:1101px) and (min-height:521px){
 .st-channel{padding:10px 18px;}.st-channel .st-code{display:none;}#league-shell .st-channel h2{margin:0;font-size:25px;}
 #league-shell .st-channel p{font-size:10px;margin:7px 0 10px;}.st-fader{gap:3px;}.st-fader output{font-size:26px;}
 #league-shell .st-fader input[type=range]{height:28px;}.st-scale{font-size:8px;}.st-audio-note{padding:9px 18px;}
}
@media(min-width:761px) and (max-width:1100px) and (min-height:521px){
 .st-panes{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #414c4e;border-bottom:0;}
 #league-shell .st-panes button{padding:9px 6px;border:0;border-right:1px solid #414c4e;background:#17252c;font-size:11px;}
 #league-shell .st-panes button[aria-pressed=true]{background:#2e3b40;color:#e3c08b;box-shadow:inset 0 -2px #d9b780;}
 .st-console{grid-template-columns:1fr;}.st-console>section{border:0;grid-column:auto;grid-row:auto;}
 .st-console>.st-colors{display:block;}.st-colors .st-presets{border-left:0;border-top:1px solid #414c4e;}.st-presets>div{grid-template-columns:repeat(6,1fr);}
 #league-shell #ship-color-help{border-left:0;}
 .st-console[data-pane=audio]>.st-colors,.st-console[data-pane=audio]>.st-display,
 .st-console[data-pane=colors]>.st-audio,.st-console[data-pane=colors]>.st-display,
 .st-console[data-pane=display]>.st-audio,.st-console[data-pane=display]>.st-colors{display:none;}
}
@media(max-width:760px){
 #league-shell .st-color-fields input[type=color],#league-shell .st-color-fields input[type=text]{height:40px;}
 #league-shell .st-presets button{min-height:38px;font-size:9px;justify-content:flex-start;}.st-presets button span{display:inline;}
 #league-shell #ship-color-help{display:block;}
}