/* One control system for Classic and Studio. */
:root{--control-height:36px;--control-font-size:10px;--control-radius:5px;--control-bg:#141414b3;--control-border:#ffffff40;--control-active:#ffffff20}
:root body #headerActions{gap:6px}
:root body :is(#headerActions .look-picker,.desk-mode-picker,.desk-nav,#deskLight){display:inline-flex;align-items:center;gap:2px;box-sizing:border-box;padding:3px;border:1px solid var(--control-border);border-radius:var(--control-radius);background:var(--control-bg);backdrop-filter:blur(12px)}
:root body :is(#headerActions a,#creditsOpen,.desk-mode-picker a,.desk-nav button,.desk-hud button){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex:none;height:var(--control-height);min-height:var(--control-height);padding:0 12px;border:1px solid var(--control-border);border-radius:var(--control-radius);background:var(--control-bg);color:#eee;font:600 var(--control-font-size)/1 'Inter Tight',sans-serif;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;backdrop-filter:blur(12px);transition:background .2s,color .2s,border-color .2s}
:root body :is(#headerActions .look-picker a,.desk-mode-picker a,.desk-nav button){height:calc(var(--control-height) - 8px);min-height:calc(var(--control-height) - 8px);padding:0 9px;border:0;border-radius:calc(var(--control-radius) - 2px);background:transparent;backdrop-filter:none}
:root body :is(#headerActions .look-picker a,.desk-mode-picker a)[aria-current=page],:root body .desk-nav button[aria-pressed=true]{background:var(--control-active);color:#fff}
:root body :is(#headerActions a,#creditsOpen,.desk-mode-picker a,.desk-nav button,.desk-hud button):hover{background:#ffffff12;color:#fff;border-color:#ffffff80}
:root body :is(#headerActions a,#creditsOpen,.desk-mode-picker a,.desk-nav button,.desk-hud button):focus-visible{outline:2px solid #eee;outline-offset:3px}
:root body #creditsOpen{width:var(--control-height);padding:0;text-transform:none;font-style:normal}
:root body .desk-hud{gap:6px}
:root body #deskLight{padding:3px}
:root body #deskLight span{height:calc(var(--control-height) - 8px);width:28px;border-radius:3px}
:root body #deskLight[aria-pressed=false] .desk-sun,:root body #deskLight[aria-pressed=true] .desk-moon{background:var(--control-active)}
@media(max-width:700px){:root{--control-height:34px;--control-font-size:8px}:root body #headerActions{gap:4px}:root body :is(#headerActions a,.desk-hud button){padding-inline:8px}:root body :is(#headerActions .look-picker a,.desk-mode-picker a,.desk-nav button){padding-inline:7px}:root body .desk-nav button[data-number]:before{font-size:var(--control-font-size);letter-spacing:.04em}:root body #creditsOpen{padding:0}}
@media(max-width:360px){:root{--control-font-size:7px}:root body #headerActions{gap:3px}:root body :is(#headerActions a,#headerActions .look-picker a){padding-inline:6px}}

/* Keep segmented labels identical to the standalone controls at every breakpoint. */
:root body #headerActions .look-picker a,:root body .desk-mode-picker a,:root body .desk-nav button{font:600 var(--control-font-size)/1 'Inter Tight',sans-serif;letter-spacing:.04em}

/* The mode switch occupies the same upper-right slot in both editions. */
:root body #headerActions{display:flex;align-items:center;flex-direction:row;top:14px;right:3.2%;left:auto;gap:6px;pointer-events:none}
:root body #headerActions :is(.header-info,.header-tools){display:flex;align-items:center;gap:6px;pointer-events:auto}
:root body #headerActions #deskLight{height:var(--control-height);min-height:var(--control-height);color:#eee;cursor:pointer}
:root body.studio-world .desk-navigation{display:flex;justify-content:center;align-items:center;gap:0}
:root body.studio-world .desk-nav{width:max-content;max-width:calc(100% - 220px);margin:0;justify-content:flex-start}
:root body.studio-world .desk-hud{position:fixed;top:auto;right:3.2%;bottom:calc(var(--ticker-height) + 23px);pointer-events:auto}
@media(max-width:1100px) and (min-width:701px){:root body.studio-world .desk-nav{justify-content:flex-start}}
@media(max-width:700px){
 :root body #headerActions{top:12px;left:60px;right:16px;flex-flow:row nowrap;align-items:center;justify-content:flex-end;gap:4px}
 :root body #headerActions .header-tools{order:0;gap:4px;flex:none}
 :root body #headerActions .header-info{order:1;gap:4px;flex:none}
 :root body #headerActions a{padding-inline:7px;letter-spacing:.02em}
 :root body #headerActions .look-picker a{padding-inline:6px;letter-spacing:.02em}
 :root body #headerActions #creditsOpen{width:28px}
 :root body #headerActions #deskLight span{width:18px}
 :root body.studio-world .desk-navigation{left:12px;right:12px;bottom:12px;flex-direction:column;gap:8px}
 :root body.studio-world .desk-nav{width:100%;max-width:100%;justify-content:flex-start}
 :root body.studio-world .desk-hud{position:static;align-self:center}
}

/* The practice CTA uses the same type, border and height as the header controls. */
:root body .ae-control{display:inline-flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;height:var(--control-height);min-height:var(--control-height);padding:0 14px;border:1px solid var(--control-border);border-radius:var(--control-radius);background:var(--control-bg);color:#eee;font:600 var(--control-font-size)/1 'Inter Tight',sans-serif;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;backdrop-filter:blur(12px)}
:root body .ae-control:hover{background:#ffffff12;border-color:#ffffff80;color:#fff}
:root body .ae-control:focus-visible{outline:2px solid #eee;outline-offset:3px}
@media(max-width:360px){:root body #headerActions{left:48px;right:12px;gap:3px}:root body #headerActions :is(.header-info,.header-tools){gap:3px}:root body #headerActions a,:root body #headerActions .look-picker a{padding-inline:4px;font-size:7px}:root body #headerActions #deskLight span{width:15px}}

/* Sound follows the lighting switch; information follows the view controls. */
:root body #musicToggle{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex:none;width:var(--control-height);height:var(--control-height);padding:0;border:1px solid var(--control-border);border-radius:var(--control-radius);background:var(--control-bg);color:#eee;cursor:pointer;backdrop-filter:blur(12px)}
:root body #musicToggle svg{width:18px;height:18px}
:root body #musicToggle .music-waves{display:none}
:root body #musicToggle[aria-pressed=true]{background:var(--control-active)}
:root body #musicToggle[aria-pressed=true] .music-waves{display:initial}
:root body #musicToggle[aria-pressed=true] .music-muted{display:none}
:root body #musicToggle:hover{background:#ffffff12;border-color:#ffffff80}
:root body #musicToggle:focus-visible{outline:2px solid #eee;outline-offset:3px}
:root body #siteMusic{display:none}
@media(max-width:700px){:root body #musicToggle{width:28px}:root body #musicToggle svg{width:16px;height:16px}}
@media(min-width:361px) and (max-width:400px){:root body #headerActions a,:root body #headerActions .look-picker a{padding-inline:5px}}
@media(max-width:360px){
 :root body #musicToggle{width:26px}
 :root body #headerActions #creditsOpen{width:22px;min-width:22px}
 :root body #headerActions :is(.header-info,.header-tools){gap:2px}
 :root body #headerActions a,:root body #headerActions .look-picker a{font-size:6.5px;letter-spacing:0;padding-inline:3px}
 :root body #headerActions #deskLight span{width:14px}
}