/* Console and optional treatments are isolated to the full site. */
:root{--settings-bg:#f7f6f3;--settings-ink:#292c2c;--settings-muted:#696f70;--settings-line:#30363926;--settings-fill:#fff8}
.network-filter-defs{pointer-events:none}
#network canvas{filter:var(--network-filters,url("#network-chromatic"));clip-path:inset(var(--network-edge,1px))}
#network-scanlines{--scanline-color:#1b2026;position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;background:repeating-linear-gradient(0deg,var(--scanline-color) 0px,var(--scanline-color) 1px,transparent 1px,transparent 4px);transition:opacity .4s}
main,.controls,.copyright{z-index:2}
#settings-console{width:min(570px,calc(100vw - 28px));max-height:calc(100dvh - 36px);height:auto;margin:auto;padding:0;border:1px solid var(--settings-line);border-radius:22px;color:var(--settings-ink);background:var(--settings-bg);box-shadow:0 24px 100px #0003;overflow:hidden;font-family:Comfortaa,Arial,sans-serif}
#settings-console::backdrop{background:#141b2210}
.settings-header{display:flex;align-items:center;gap:12px;padding:24px 28px 18px;border-bottom:1px solid var(--settings-line)}
.settings-header h2{font-size:23px;font-weight:400;margin:0}.settings-header img{width:25px;height:25px}
.settings-close{margin-left:auto;border:0;background:transparent;color:inherit;width:38px;height:38px;font-size:27px}
.settings-body{overflow:auto;max-height:calc(100dvh - 208px);padding:10px 28px 18px;scrollbar-width:thin;scrollbar-color:#8b9293 transparent;scrollbar-gutter:stable;overscroll-behavior:contain}
.settings-body details{border-bottom:1px solid var(--settings-line);padding:14px 0}.settings-body summary{cursor:pointer;font-size:15px;padding:6px 0}.settings-body details[open] > summary{margin-bottom:14px}
.settings-body p{font-family:Arial,sans-serif;font-size:13px;line-height:1.6;color:var(--settings-muted);margin:8px 0 16px}
.setting-toggle{display:flex;align-items:center;gap:10px;font-size:13px;margin:18px 0 10px}.setting-toggle input{width:17px;height:17px;accent-color:#647980}
.setting-slider{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin:12px 0 20px;font-size:12px}.setting-slider input{grid-column:1/-1;width:100%;accent-color:#647980;cursor:pointer}.setting-slider output{font-family:Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--settings-muted)}
.settings-body .settings-advanced{margin:16px 0;padding:12px 14px;border:1px solid var(--settings-line);border-radius:12px;background:var(--settings-fill)}
.settings-advanced h3{font-size:13px;font-weight:400;margin:22px 0 10px}.settings-advanced h3:first-of-type{margin-top:8px}
.settings-advanced select{width:100%;padding:10px 12px;border:1px solid var(--settings-line);border-radius:8px;background:var(--settings-bg);color:var(--settings-ink);font:12px Comfortaa,Arial,sans-serif}
.settings-advanced .setting-toggle{margin-top:10px}.advanced-eq{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-top:18px}
.advanced-eq .setting-slider{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;font-size:11px;text-align:center;white-space:nowrap}
.advanced-eq .setting-slider output{order:2}.advanced-eq input[type="range"]{width:100%;margin:4px 0}

.settings-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--settings-line);padding:16px 28px;font-family:Arial,sans-serif;font-size:12px;color:var(--settings-muted)}
.settings-footer button,.settings-music-button{border:1px solid var(--settings-line);border-radius:10px;background:var(--settings-fill);color:var(--settings-ink);font-size:12px;padding:11px 14px;cursor:pointer}
#settings-mp3{display:block;width:100%;font:12px Arial,sans-serif;color:var(--settings-ink);margin:12px 0}#settings-mp3::file-selector-button{padding:10px;border:1px solid var(--settings-line);border-radius:8px;background:var(--settings-fill);color:inherit;margin-right:10px}
#settings-track{overflow-wrap:anywhere;font-weight:600}#settings-status:empty{display:none}#settings-status{margin-bottom:0}
#settings-console :focus-visible{outline:2px solid #759bb5;outline-offset:3px}
html,body,#information,#settings-console,#site-menu,.team-face,.team-back,.team-name,.team-role,.team-bio{transition:background-color 1.1s ease,color 1.1s ease,border-color 1.1s ease}
html[data-theme="night"]{--settings-bg:#25292c;--settings-ink:#efeee9;--settings-muted:#b4b9ba;--settings-line:#f3f2eb30;--settings-fill:#ffffff09;color-scheme:dark}
html[data-theme="night"],html[data-theme="night"] body{background:#202427;color:#efeee9}
html[data-theme="night"] #network{background:#202427}
html[data-theme="night"] #network-scanlines{--scanline-color:#e8edef}
html[data-theme="night"] .identity:before{background:radial-gradient(ellipse,#202427e8,transparent 70%)}
html[data-theme="night"] .identity h1{color:#efeee9}
html[data-theme="night"] #site-menu{background:#25292c4d;border-color:#ffffff22;box-shadow:0 12px 45px #0003}
html[data-theme="night"] #site-menu button,html[data-theme="night"] #site-menu button:hover,html[data-theme="night"] #site-menu button:focus-visible,html[data-theme="night"] #site-menu button.is-tapped{color:#efeee9;background:transparent}
html[data-theme="night"] #site-menu .menu-item-icon,html[data-theme="night"] #site-menu button:hover .menu-item-icon,html[data-theme="night"] #site-menu button.is-tapped .menu-item-icon,html[data-theme="night"] .menu-toggle img,html[data-theme="night"] .social-links img,html[data-theme="night"] #sound img,html[data-theme="night"] #settings-open img,html[data-theme="night"] .settings-header img{filter:brightness(0) invert(.94)}
html[data-theme="night"] .menu-toggle span{background:#efeee9}
html[data-theme="night"] .menu-toggle,html[data-theme="night"] .social-links a,html[data-theme="night"] .social-links button,html[data-theme="night"] .controls button{background:#25292cc7;color:#efeee9;border-color:#efeee930}
html[data-theme="night"] #information{background:#25292cf5;color:#efeee9;border-color:#ffffff26}
html[data-theme="night"] #information::backdrop{background:#14171944}
html[data-theme="night"] #panel-copy p,html[data-theme="night"] #panel-copy .article-body p,html[data-theme="night"] #panel-copy .article-body li,html[data-theme="night"] .team-bio,html[data-theme="night"] .article-choice{color:#dedfdb}
html[data-theme="night"] .team-role,html[data-theme="night"] .team-hint,html[data-theme="night"] .copyright,html[data-theme="night"] .music-credit,html[data-theme="night"] .article-date,html[data-theme="night"] #card-position{color:#b4b9ba}
html[data-theme="night"] .article-choice:hover{background:#ffffff08}
html[data-theme="night"] .card-navigation,html[data-theme="night"] .article-slider-controls{border-color:#ffffff22}
html[data-theme="night"] .card-navigation button,html[data-theme="night"] .article-slider-controls button,html[data-theme="night"] .panel-close{color:#efeee9;background:transparent;border-color:#ffffff26}
html[data-theme="night"] .volume-popover,html[data-theme="night"] .contact-form input,html[data-theme="night"] .contact-form textarea{background:#292e31;color:#efeee9;border-color:#ffffff33}
html[data-theme="night"] .contact-actions a,html[data-theme="night"] .article-body a{color:#e9b083}
html[data-theme="night"] .article-body pre{background:#191d20}
/* Section labels track their node colors, with brighter accents against the dark modal. */
#information .panel-label{color:var(--section-color,#76716b)}
html[data-theme="night"] #information[data-section="technology"] .panel-label{color:#b695ff}
html[data-theme="night"] #information[data-section="lucidity"] .panel-label{color:#ff75c8}
/* Night cards sit one shade deeper than the modal; portraits and flip behavior stay intact. */
html[data-theme="night"] #information.is-team .team-face,
html[data-theme="night"] #information.is-team .team-back{background:#191d20;color:#efeee9;border-color:#ffffff30;box-shadow:0 8px 22px #0004}
html[data-theme="night"] #information.is-team .team-back-label{color:#b7c2df}
/* The four front names echo About, Technology, Lucidity, and Research. */
html[data-theme="night"] #information.is-team .team-item:nth-child(1) .team-front .team-name{color:#00bce8}
html[data-theme="night"] #information.is-team .team-item:nth-child(2) .team-front .team-name{color:#b695ff}
html[data-theme="night"] #information.is-team .team-item:nth-child(3) .team-front .team-name{color:#ff75c8}
html[data-theme="night"] #information.is-team .team-item:nth-child(4) .team-front .team-name{color:#b1e83b}
@media(max-width:480px){.settings-header{padding:18px 20px 14px}.settings-body{padding-inline:20px}.settings-footer{padding:14px 20px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html,body,#information,#settings-console,#site-menu,.team-face,.team-back,.team-name,.team-role,.team-bio{transition:none}}

#information{transition:opacity .22s ease,transform .22s ease,background-color 1.1s ease,color 1.1s ease}
#site-menu{transition:opacity .5s ease,transform .5s ease,visibility .5s ease,background-color 1.1s ease}
.music-credit{max-width:min(55vw,500px)}.music-credit>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#settings-console .settings-close{width:38px;height:38px;min-width:38px;min-height:38px;padding:0;flex:0 0 38px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;line-height:1}
html[data-theme="night"] #volume-value{color:#f4f3ee}
html[data-theme="night"] #volume-slider::-webkit-slider-runnable-track{border-color:#f4f3ee;background:linear-gradient(to top,#f4f3ee 0 var(--volume-fill),#111 var(--volume-fill) 100%)}
html[data-theme="night"] #volume-slider::-moz-range-track{border-color:#f4f3ee;background:linear-gradient(to top,#f4f3ee 0 var(--volume-fill),#111 var(--volume-fill) 100%)}
html[data-theme="night"] #volume-slider::-webkit-slider-thumb{background:#f4f3ee;border-color:#111}
html[data-theme="night"] #volume-slider::-moz-range-thumb{background:#f4f3ee;border-color:#111}
html[data-theme="night"] #volume-slider:focus-visible{outline-color:#f4f3ee}

/* Custom music stays peripheral to the identity and network. */
#settings-party[aria-pressed="true"]{background:#643caf;color:#fff;border-color:#956de0;box-shadow:0 0 16px #a878e52b}
#settings-playlist{list-style:none;padding:0;margin:14px 0;max-height:200px;overflow:auto;scrollbar-width:thin}
#settings-playlist li{display:flex;align-items:center;gap:8px;margin:5px 0}
#settings-playlist button{border:1px solid var(--settings-line);border-radius:8px;padding:10px;background:transparent;color:var(--settings-ink);cursor:pointer}
#settings-playlist .playlist-track{flex:1;text-align:left;min-width:0;overflow-wrap:anywhere;font:12px/1.5 Arial,sans-serif}
#settings-playlist .playlist-track[aria-current="true"]{background:var(--settings-fill);border-color:#9980bb}
.custom-music-ui{position:fixed;z-index:3;color:var(--settings-ink);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s ease,visibility .8s;font-family:Comfortaa,Arial,sans-serif}
.custom-music-ui.is-visible{opacity:1;visibility:visible;pointer-events:auto}
#custom-now-playing{left:clamp(22px,3vw,70px);top:auto;bottom:26px;display:flex;align-items:center;gap:16px;max-width:min(500px,35vw);pointer-events:none}
#custom-cover{width:clamp(64px,7vw,112px);height:clamp(64px,7vw,112px);object-fit:cover;border-radius:10px;box-shadow:0 4px 16px #20232620}
#custom-now-playing p{margin:5px 0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
#custom-now-playing #custom-title{font-size:15px;font-weight:700}
#custom-now-playing #custom-album{font-size:11px;opacity:.65}
#custom-transport{bottom:25px;left:calc(var(--wordmark-center,50%) - 18px);transform:translateX(-50%);display:flex;gap:8px;padding:6px;background:transparent;border:0}
#custom-transport button{display:grid;place-items:center;width:42px;height:42px;border:0;background:transparent;color:inherit;cursor:pointer;transition:color .3s,filter .3s}
#custom-transport button:hover{color:#00bce9;filter:drop-shadow(0 0 4px #00bce950)}
#custom-transport button:focus-visible{outline:2px solid currentColor;outline-offset:1px}
#custom-transport button:disabled{opacity:.3;cursor:default;transform:none}
#custom-transport svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
#custom-transport .pause-symbol,#custom-transport.is-playing .play-symbol{display:none}
#custom-transport.is-playing .pause-symbol{display:block}
body[data-spatial-state]:not([data-spatial-state="RESTING"]) .custom-music-ui{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:700px){#custom-now-playing{left:22px;top:auto;bottom:150px;max-width:calc(100vw - 48px);gap:12px}#custom-cover{width:64px;height:64px}#custom-now-playing p{font-size:11px}#custom-now-playing #custom-title{font-size:13px}#custom-transport{bottom:86px;left:16px;right:auto;transform:none;display:flex;gap:4px}#custom-transport button{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.custom-music-ui,#custom-transport button{transition:none}}


#settings-folder{max-width:100%;font-size:12px;color:inherit} .playlist-toolbar{margin-top:18px} #custom-now-playing>div{min-width:0} #custom-cover{flex-shrink:0} #playlist-import-available[hidden]{display:none}
@media(max-width:700px){#custom-now-playing{gap:10px;left:16px}#custom-now-playing #custom-title{font-size:12px}#custom-now-playing p{font-size:10px}#custom-cover{width:52px;height:52px}}

/* One glass tray, with bare icon hit targets. */
#custom-transport{border-radius:22px;border:1px solid var(--settings-line);background:color-mix(in srgb,var(--settings-bg) 42%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 5px 24px #0000000d}
#custom-transport button,#custom-transport button:hover{border:0;border-radius:0;background:transparent;box-shadow:none}
#playback-mode-icon{display:block;width:22px;height:22px;background:currentColor;mask:var(--mode-icon) center/contain no-repeat;-webkit-mask:var(--mode-icon) center/contain no-repeat}
#settings-console .settings-close{border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;transition:color .25s}
#settings-console .settings-close:hover{color:#00bce9;background:transparent;box-shadow:none}
#settings-console .settings-close{color:var(--settings-ink)}
#music-credit[hidden]{display:none!important}


/* Keep the mobile transport centered on the same baseline as the 48px controls. */
@media(max-width:700px){
  #custom-transport{bottom:19px;gap:2px;padding:3px}
  #custom-transport button{width:clamp(26px,8vw,38px);min-height:48px;height:48px;padding:4px}
  #custom-now-playing{bottom:88px}
}
@media(max-width:600px){#custom-transport{bottom:13px}#custom-now-playing{bottom:82px}}
#settings-equalizer{width:100%;padding:10px 12px;margin:0 0 18px;border:1px solid var(--settings-line);border-radius:10px;background:var(--settings-bg);color:inherit;font:inherit}

#settings-party{width:190px;max-width:100%;height:48px;white-space:nowrap}

@media(min-width:701px){#custom-now-playing{bottom:22px;align-items:flex-end}#custom-transport{bottom:22px}}

.folder-picker{display:flex;align-items:center;gap:10px;margin:12px 0;font:12px Arial,sans-serif;color:var(--settings-ink)}
#settings-folder-button{padding:10px;border:1px solid var(--settings-line);border-radius:8px;background:var(--settings-fill);color:inherit;font:inherit;min-height:0;flex-shrink:0}
#folder-picker-name{overflow-wrap:anywhere;min-width:0}

#settings-console .settings-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* Contact copy stays legible against the night-mode modal. */
html[data-theme="night"] #information.is-contact .contact-form label,
html[data-theme="night"] #information.is-contact .contact-actions button,
html[data-theme="night"] #information.is-contact .contact-status,
html[data-theme="night"] #information.is-contact #card-position{color:#efeee9}
#music-drop-choice{width:min(420px,calc(100vw - 32px));margin:auto;padding:26px;border:1px solid var(--settings-line);border-radius:20px;background:var(--settings-bg);color:var(--settings-ink);box-shadow:0 24px 80px #0005;font-family:Comfortaa,Arial,sans-serif}
#music-drop-choice::backdrop{background:#11192088;backdrop-filter:blur(4px)}
#music-drop-choice h2{font-size:20px;font-weight:400;margin:0 0 12px}
#music-drop-choice p{font:14px/1.5 Arial,sans-serif;color:var(--settings-muted);margin:0 0 24px}
.music-drop-actions{display:flex;flex-wrap:wrap;gap:10px}
.music-drop-actions button{min-height:42px;border:1px solid var(--settings-line);border-radius:12px;background:var(--settings-fill);color:var(--settings-ink);font-size:12px;padding:10px 14px}
.music-drop-actions button:hover{border-color:#b66be5;color:#b66be5}

/* A failed track keeps its cover visible with a quiet availability veil. */
#custom-cover-frame{position:relative;display:inline-flex;flex-shrink:0;align-self:inherit}
#custom-cover-unavailable{position:absolute;inset:0;border-radius:10px;background:rgba(27,30,33,.58);color:#f4f3ef;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:11px/1.2 Arial,sans-serif;text-shadow:0 1px 2px #202326;pointer-events:none}
#custom-cover-unavailable[hidden]{display:none}
#custom-cover-unavailable svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;opacity:.85}
#custom-cover-frame.is-unavailable #custom-cover{filter:saturate(.45)}
@media(max-width:700px){#custom-cover-unavailable{font-size:8px;gap:3px}#custom-cover-unavailable svg{width:16px;height:16px}}

/* Quick opening fade for both music/settings flyouts. */
@keyframes settings-dialog-in{from{opacity:0}to{opacity:1}}
#settings-console[open],#audius-browser[open]{animation:settings-dialog-in 180ms ease-out both}
#settings-console[open]::backdrop,#audius-browser[open]::backdrop{animation:settings-dialog-in 180ms ease-out both}
@media(prefers-reduced-motion:reduce){#settings-console[open],#audius-browser[open],#settings-console[open]::backdrop,#audius-browser[open]::backdrop{animation:none}}
/* Extra breathing room for the Themes transparency control. */
.setting-slider.setting-transparency{margin:26px 0 16px;row-gap:14px}
.setting-transparency-title{font-size:14px;font-weight:700;line-height:1.5}
.setting-transparency output{align-self:center}

.setting-transparency input[type=range]{min-width:0;margin-inline:0;box-sizing:border-box}

/* A native switch with the sun/moon on the uncovered side of its track. */
.theme-toggle{gap:14px;min-height:36px;width:fit-content;cursor:pointer}
.theme-switch{position:relative;display:inline-block;width:86px;height:36px;flex:0 0 86px}
.theme-toggle .theme-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:3;cursor:pointer}
.theme-switch-track{position:absolute;inset:0;overflow:hidden;border-radius:999px;background:#fafbf8;box-shadow:inset 0 2px 5px #0003,inset 0 0 0 1px #93989166,0 1px 2px #0001;transition:background-color 520ms ease,box-shadow 520ms ease}
.theme-switch-thumb{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;z-index:1;background:radial-gradient(ellipse at 50% 100%,#fff 0%,#fff 24%,#f2f3f1 52%,#d8dcd8 78%,#b9c0ba 100%);box-shadow:inset 0 0 0 1.5px #fff,inset 0 2px 3px #ffffff80,0 2px 4px #0004;transition:transform 520ms cubic-bezier(.65,0,.35,1)}
.theme-switch-track svg{position:absolute;top:7px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:opacity 360ms ease}
.theme-switch-sun{right:7px;color:#ff9f24;opacity:1;filter:drop-shadow(0 0 2px #ff9f2440)}
.theme-switch-sun circle{fill:currentColor;stroke:none}
.theme-switch-moon{left:7px;color:#f9faf7;opacity:0}
.theme-switch-moon path{fill:currentColor;stroke:none}
.theme-switch input:checked+.theme-switch-track{background:#182c49;box-shadow:inset 0 2px 5px #0003,inset 0 0 0 1px #93989166,0 1px 2px #0001}
.theme-switch input:checked+.theme-switch-track .theme-switch-thumb{transform:translateX(50px);background:radial-gradient(ellipse at 50% 100%,#fff 0%,#fff 24%,#edf2f7 52%,#c7d2de 78%,#99aec3 100%);box-shadow:inset 0 0 0 1.5px #ffffffeb,inset 0 2px 3px #ffffff70,0 2px 4px #000b}
.theme-switch input:checked+.theme-switch-track .theme-switch-sun{opacity:0}
.theme-switch input:checked+.theme-switch-track .theme-switch-moon{opacity:1}
.theme-toggle:hover .theme-switch-track{outline:1px solid #a278e5;outline-offset:0}
.theme-switch input:focus-visible+.theme-switch-track{outline:2px solid #a278e5;outline-offset:3px}
.theme-switch input:disabled{cursor:not-allowed}.theme-switch:has(input:disabled){opacity:.55}
@media(prefers-reduced-motion:reduce){.theme-switch-track,.theme-switch-thumb,.theme-switch-track svg{transition:none}}

/* Keep the theme switch beside Close, with a compact version on phones. */
.settings-header-actions{display:flex;align-items:center;gap:14px;margin-left:auto;flex-shrink:0}
.settings-header-actions .theme-toggle{display:flex;align-items:center;margin:0;min-height:38px}
.settings-header-actions .settings-close{margin-left:0;flex-shrink:0}
@media(max-width:480px){
 .settings-header{gap:8px}
 .settings-header h2{font-size:20px}
 .settings-header img{width:22px;height:22px;flex-shrink:0}
 .settings-header-actions{gap:12px}
 .settings-header-actions .theme-switch{width:64px;height:30px;flex-basis:64px}
 .settings-header-actions .theme-switch-thumb{width:24px;height:24px}
 .settings-header-actions .theme-switch input:checked+.theme-switch-track .theme-switch-thumb{transform:translateX(34px)}
 .settings-header-actions .theme-switch-track svg{top:6px;width:18px;height:18px}
 .settings-header-actions .theme-switch-sun{right:6px}
 .settings-header-actions .theme-switch-moon{left:6px}
 .settings-header-actions .settings-close{width:32px;height:36px}
}

/* Contrasting close-icon accents, shared by Day and Night Mode. */
#information{--close-highlight:#00bce8}
#information[data-section="about"]{--close-highlight:#f51fa6}
#information[data-section="technology"]{--close-highlight:#b1e83b}
#information[data-section="lucidity"]{--close-highlight:#00bce8}
#information[data-section="research"]{--close-highlight:#b695ff}
#information[data-section="team"]{--close-highlight:#398cff}
#information[data-section="contact"]{--close-highlight:#73e6ba}
#information .panel-close:hover,#information .panel-close:focus-visible{color:var(--close-highlight);background:transparent;box-shadow:none}
/* Audio contains independent channel controls and the nested music library. */
.settings-body .settings-subsection{margin:16px 0 0;padding:12px 14px;border:1px solid var(--settings-line);border-radius:12px;background:var(--settings-fill)}
.audio-volume-slider{font-size:13px;margin:18px 0 22px}
.audio-volume-slider>span{font-weight:700}
.settings-subsection>summary{font-size:14px}

/* Segmented, non-interactive now-playing strip. */
.settings-now-playing{display:flex;align-items:stretch;border:1px solid var(--settings-line);border-radius:14px;overflow:hidden;background:var(--settings-fill);margin:18px 0 22px;color:var(--settings-ink)}
.settings-now-playing-label{display:flex;align-items:center;flex:0 0 auto;padding:13px 12px;border-right:1px solid var(--settings-line);background:#00000008;font:700 10px/1.5 Arial,sans-serif;letter-spacing:.06em}
html[data-theme="night"] .settings-now-playing-label{background:#00000020}
.settings-now-playing-content{display:flex;align-items:center;gap:9px;min-width:0;padding:12px;font:600 12px/1.6 Arial,sans-serif}
#settings-track-source{display:flex;align-items:center;justify-content:center;flex:0 0 16px;width:16px}
#settings-track-source.is-live-radio::before{content:"";display:block;width:7px;height:7px;border-radius:50%;background:#ef4044;opacity:.45}
#settings-track-source.is-live-radio.is-on-air::before{animation:radio-on-air 2.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#settings-track-source.is-live-radio.is-on-air::before{animation:none;opacity:.8}}
@media(max-width:470px){.settings-now-playing-label{padding:11px 9px;font-size:9px}.settings-now-playing-content{padding:10px;gap:7px;font-size:11px}}

.settings-now-playing-label{box-sizing:border-box;flex:0 0 130px;gap:8px}
.settings-now-playing-label svg{width:13px;height:13px;flex:0 0 13px;fill:currentColor}
.settings-status-pause{display:none}
.settings-now-playing.is-paused .settings-status-play{display:none}
.settings-now-playing.is-paused .settings-status-pause{display:block}
@media(max-width:470px){.settings-now-playing-label{flex-basis:116px;gap:6px}}

.settings-audio{--music-strip-height:44.8px}
.settings-now-playing{min-height:var(--music-strip-height);box-sizing:border-box}
@media(max-width:470px){.settings-audio{--music-strip-height:39.6px}}
.settings-now-playing-label{justify-content:center}

.settings-now-playing.is-paused .settings-now-playing-label{animation:settings-paused-pulse 2.8s ease-in-out infinite}
@keyframes settings-paused-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.settings-now-playing-content{flex:1}
#settings-track{min-width:0;flex:1}
.settings-track-text{display:block}
@media(max-width:700px){
 #settings-track{overflow:hidden;white-space:nowrap;overflow-wrap:normal;text-overflow:ellipsis}
 .settings-track-text{width:max-content;min-width:100%}
 #settings-track.is-overflowing .settings-track-text{animation:settings-track-scroll var(--track-scroll-duration,8s) ease-in-out infinite alternate}
}
@keyframes settings-track-scroll{0%,20%{transform:translateX(0)}80%,100%{transform:translateX(var(--track-scroll-distance))}}
@media(prefers-reduced-motion:reduce){
 .settings-now-playing.is-paused .settings-now-playing-label{animation:none}
 #settings-track.is-overflowing .settings-track-text{animation:none;max-width:100%;width:auto;overflow:hidden;text-overflow:ellipsis}
}

.music-field-icon{width:18px;height:18px;flex:0 0 18px;fill:currentColor}
.music-folder-heading{position:relative;display:flex;align-items:center;gap:7px;margin:18px 0 10px}
.music-folder-heading .setting-toggle{margin:0}
.music-folder-help{display:flex;align-items:center}
#settings-console #music-folder-info{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:3px;border:0;border-radius:50%;background:transparent;color:var(--settings-muted);cursor:help}
#settings-console #music-folder-info:is(:hover,:focus-visible){color:var(--settings-accent);background:transparent}
#settings-console #music-folder-info::after{display:none}
#music-folder-info svg{width:20px;height:20px}
#music-folder-note{position:absolute;top:calc(100% + 7px);left:0;width:100%;box-sizing:border-box;z-index:5;padding:13px 15px;border:1px solid var(--settings-line);border-radius:12px;background:var(--settings-bg);color:var(--settings-ink);box-shadow:0 5px 18px #0003;font:12px/1.6 Arial,sans-serif;visibility:hidden;opacity:0;transition:opacity 120ms ease;pointer-events:none}
.music-folder-help:hover #music-folder-note,.music-folder-help:focus-within #music-folder-note{visibility:visible;opacity:1;pointer-events:auto}

.playlist-footer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.settings-playlist-title{border-top:1px solid var(--settings-line);padding-top:22px;margin:24px 0 16px;font-size:23px;font-weight:400;line-height:1.3;color:var(--settings-ink)}
@media(max-width:480px){.settings-playlist-title{font-size:20px}}

.settings-playlist-title{display:flex;align-items:center;gap:10px}
.playlist-mark{display:inline-block;width:1em;height:1em;flex:0 0 1em;background:currentColor;mask:url("images/playlist.svg") center/contain no-repeat;-webkit-mask:url("images/playlist.svg") center/contain no-repeat}

/* Fit six controls in the original five-control tray. */
#custom-transport{box-sizing:content-box;width:242px;gap:0}
#custom-transport button{flex:1;min-width:0;width:auto}
#player-playlist .playlist-mark{width:20px;height:20px;flex:none}
@media(max-width:700px){#custom-transport{width:calc(clamp(130px,40vw,190px) + 8px)}}

.music-field-label[for="settings-files-button"],.music-folder-heading{border-top:1px solid var(--settings-line);padding-top:18px;margin-top:22px}
#settings-console #music-folder-info{width:20px;height:18px;min-height:0;padding:0}#music-folder-info svg{width:18px;height:18px}

.settings-section-icon{display:inline-block;width:18px;height:18px;margin-right:8px;vertical-align:-3px;background:currentColor;mask:var(--section-icon) center/contain no-repeat;-webkit-mask:var(--section-icon) center/contain no-repeat}

/* Main accordion headings use the site's navigation palette. */
summary[data-settings-section="audio"]{--settings-accent:#00bce8}
summary[data-settings-section="shaders"]{--settings-accent:#6330bd}
html[data-theme="night"] summary[data-settings-section="shaders"]{--settings-accent:#b695ff}
summary[data-settings-section="visualizer"]{--settings-accent:#b1e83b}
summary[data-settings-section="accessibility"]{--settings-accent:#ed8f41}
html[data-theme="night"] summary[data-settings-section="accessibility"]{--settings-accent:#ffc28a}

/* Main accordions share the segmented source-button design. */
.settings-body>details{border-bottom:0;padding:7px 0}
.settings-body summary[data-settings-section]{display:flex;align-items:stretch;position:relative;isolation:isolate;list-style:none;padding:0;min-height:44.8px;border:1px solid var(--settings-line);border-radius:10px;background:var(--settings-fill);overflow:hidden;box-sizing:border-box}
summary[data-settings-section]::-webkit-details-marker{display:none}
.settings-section-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:10px 14px}
.settings-section-brand .settings-section-icon{margin:0;vertical-align:baseline;flex:0 0 18px}
.settings-section-chevron{display:flex;align-items:center;justify-content:center;flex:0 0 42px;border-left:1px solid var(--settings-line);background:rgba(20,23,25,.06)}
html[data-theme="night"] .settings-section-chevron{background:rgba(0,0,0,.18)}
.settings-section-chevron svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform 240ms cubic-bezier(.22,1,.36,1)}
details[open]>summary[data-settings-section] .settings-section-chevron svg{transform:rotate(90deg)}
#settings-console summary[data-settings-section]:is(:hover,:focus-visible){border-color:var(--settings-accent)}
summary[data-settings-section]::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;background:linear-gradient(135deg,transparent 35%,#00d7ffe8 43%,#9a70e8f0 48%,#ff48b8f0 52%,#c1ee57e8 57%,transparent 65%);background-size:300% 300%;background-position:100% 100%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
summary[data-settings-section]:is(:hover,:focus-visible)::after{animation:settings-border-shimmer var(--shimmer-duration,1.5s) ease-out 1 both}
@media(prefers-reduced-motion:reduce){.settings-section-chevron svg{transition:none}summary[data-settings-section]::after{animation:none!important}}

/* Nested sections use the same segmented heading without a second outer box. */
.settings-body .settings-subsection,.settings-body .settings-advanced{border:0;background:transparent;border-radius:0;padding:7px 0;margin:0}
.settings-body .settings-advanced::after{display:none}

/* Expanded main sections reveal a more opaque inset drawer. */
.settings-section-drawer{padding:14px;border:1px solid var(--settings-line);border-top:0;border-radius:0 0 12px 12px;background:rgba(235,238,239,.9);box-shadow:inset 0 3px 8px #23303a08}
html[data-theme="night"] .settings-section-drawer{background:rgba(29,33,37,.82);box-shadow:inset 0 3px 10px #00000018}
.settings-body>details[open]>summary[data-settings-section]{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
@media(max-width:480px){.settings-section-drawer{padding:12px}}

#settings-console details[open]>summary[data-settings-section]{color:var(--settings-accent);border-color:var(--settings-accent)}

#settings-console summary[data-settings-section] .settings-section-brand>span:last-child{color:var(--settings-ink)}

summary[data-settings-section="music"]{--settings-accent:#b1e83b}
summary[data-settings-section="volume"]{--settings-accent:#ed8f41}
html[data-theme="night"] summary[data-settings-section="volume"]{--settings-accent:#ffc28a}
summary[data-settings-section="advanced"]{--settings-accent:#6330bd}
html[data-theme="night"] summary[data-settings-section="advanced"]{--settings-accent:#b695ff}

.settings-volume{--volume-accent:#ed8f41}
html[data-theme="night"] .settings-volume{--volume-accent:#ffc28a}
:is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) .setting-slider input[type="range"]{accent-color:var(--volume-accent)}

:is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) .setting-slider input[type="range"]{accent-color:color-mix(in srgb,var(--volume-accent) var(--volume-opacity,100%),transparent)}

/* A fixed orange hue; only volume changes opacity, never hover. */
:is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) input[type="range"]{--volume-tint:color-mix(in srgb,var(--volume-accent) var(--volume-opacity,100%),transparent);appearance:none;-webkit-appearance:none;height:20px;background:transparent;padding:0;border:0}
:is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(to right,var(--volume-tint) 0 var(--volume-fill-percent),var(--settings-line) var(--volume-fill-percent) 100%)}
:is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border:0;border-radius:50%;background:var(--volume-accent);box-shadow:none}
:is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) input[type="range"]::-moz-range-track{height:6px;border-radius:4px;background:var(--settings-line)}
:is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) input[type="range"]::-moz-range-progress{height:6px;border-radius:4px;background:var(--volume-tint)}
:is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) input[type="range"]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--volume-accent);box-shadow:none}

/* The same rounded lighting as the theme switch, scaled to the volume thumbs. */
:is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) input[type="range"]{--volume-thumb-surface:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--volume-accent) 90%,white) 0%,var(--volume-accent) 24%,color-mix(in srgb,var(--volume-accent) 94%,black) 52%,color-mix(in srgb,var(--volume-accent) 84%,black) 78%,color-mix(in srgb,var(--volume-accent) 72%,black) 100%);--volume-thumb-shadow:inset 0 0 0 .8px #ffffff55,inset 0 1px 1.5px #ffffff30,0 1.5px 3px #0004}
html[data-theme="night"] :is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) input[type="range"]{--volume-thumb-shadow:inset 0 0 0 .8px #ffffff55,inset 0 1px 1.5px #ffffff28,0 1.5px 3px #000b}
:is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) input[type="range"]::-webkit-slider-thumb{background:var(--volume-thumb-surface);box-shadow:var(--volume-thumb-shadow)}
:is(.settings-volume,.settings-advanced,.settings-shaders,.settings-visualizer,.settings-accessibility,.settings-themes .setting-transparency) input[type="range"]::-moz-range-thumb{background:var(--volume-thumb-surface);box-shadow:var(--volume-thumb-shadow)}

.settings-advanced{--volume-accent:#6330bd}
html[data-theme="night"] .settings-advanced{--volume-accent:#b695ff}

/* Five vertical EQ faders at every viewport size; boost is at the top. */
#settings-console .advanced-eq{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
#settings-console .advanced-eq .setting-slider{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
#settings-console .advanced-eq input[type="range"]{writing-mode:vertical-lr;direction:rtl;width:20px;height:144px;margin:4px 0;flex:none}
#settings-console .advanced-eq input[type="range"]::-webkit-slider-runnable-track{width:6px;height:100%;background:linear-gradient(to top,var(--volume-tint) 0 var(--volume-fill-percent),var(--settings-line) var(--volume-fill-percent) 100%)}
#settings-console .advanced-eq input[type="range"]::-webkit-slider-thumb{margin-top:0;margin-left:-5px}
#settings-console .advanced-eq input[type="range"]::-moz-range-track{width:6px;height:100%}
#settings-console .advanced-eq input[type="range"]::-moz-range-progress{width:6px;height:auto}

/* Keep the EQ heading at the Advanced heading size and presets below the faders. */
#settings-console .settings-eq-title{font-size:15px;font-weight:400;margin:18px 0 10px}
#settings-console .advanced-eq{margin-bottom:18px}
@media(max-width:470px){#settings-console .advanced-eq{gap:2px}#settings-console .advanced-eq .setting-slider{font-size:9px}}

.eq-frequency>span{margin-left:3px}
@media(max-width:470px){#settings-console .advanced-eq .eq-frequency{line-height:1.3;min-height:24px}#settings-console .advanced-eq .eq-frequency>span{display:block;margin-left:0}}

/* Room preset emphasis follows the Advanced purple palette. */
#settings-console #settings-reverb{--preset-accent:#6330bd;accent-color:var(--preset-accent)}
html[data-theme="night"] #settings-console #settings-reverb{--preset-accent:#b695ff}
#settings-console #settings-reverb:is(:hover,:focus){border-color:var(--preset-accent)}
#settings-console #settings-reverb:focus-visible{outline-color:var(--preset-accent)}
#settings-console #settings-reverb option:checked{background:#6330bd;color:#fff}
#settings-console #settings-reverb + .setting-slider{margin-top:24px}

#settings-console .settings-tone-title{margin-bottom:24px}
#settings-console .settings-tone-title + .setting-slider{margin-top:0}

/* Advanced presets: purple selection text, solid purple hover/focus rows. */
#settings-console .preset-menu{--preset-accent:#6330bd;margin-bottom:18px}
html[data-theme="night"] #settings-console .preset-menu{--preset-accent:#b695ff}
#settings-console .preset-menu select[hidden],#settings-console .preset-options[hidden]{display:none}
#settings-console .preset-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--settings-line);border-radius:8px;background:var(--settings-bg);color:var(--preset-accent);font:12px Comfortaa,Arial,sans-serif;text-align:left;cursor:pointer}
#settings-console .preset-trigger::before{content:"";order:2;width:7px;height:7px;border-right:1.5px solid var(--settings-ink);border-bottom:1.5px solid var(--settings-ink);transform:rotate(45deg);flex:none;margin-right:3px}
#settings-console .preset-trigger:is(:hover,:focus-visible){border-color:var(--preset-accent);outline-color:var(--preset-accent)}
#settings-console .preset-options{margin-top:4px;border:1px solid var(--preset-accent);border-radius:8px;padding:4px;background:var(--settings-bg);max-height:240px;overflow-y:auto}
#settings-console .preset-option{display:block;width:100%;min-height:32px;margin:0;padding:8px 12px;border:0;border-radius:4px;background:transparent;color:var(--settings-ink);font:12px Comfortaa,Arial,sans-serif;text-align:left;cursor:pointer}
#settings-console .preset-option[aria-selected="true"]{color:var(--preset-accent);background:transparent}
#settings-console .preset-option:is(:hover,:focus-visible){background:#6330bd;color:#fff;outline:none}
#settings-console .preset-menu[data-preset="settings-reverb"] + .setting-slider{margin-top:24px}

#settings-console button.preset-option:not(.settings-close):is(:hover,:focus-visible){background:#6330bd;color:#fff;border-color:transparent;outline:none}
#settings-console button.preset-option:not(.settings-close)::after{display:none}
#settings-console button.preset-trigger:not(.settings-close):is(:hover,:focus-visible){background:var(--settings-bg);color:var(--preset-accent);border-color:var(--preset-accent);outline-color:var(--preset-accent)}


/* Shader controls follow their purple section accent in both themes. */
.settings-shaders{--volume-accent:#6330bd}
html[data-theme="night"] .settings-shaders{--volume-accent:#b695ff}
.settings-shaders .setting-toggle input{accent-color:var(--volume-accent)}

/* Visualizer controls follow the section's lime green accent. */
.settings-visualizer{--volume-accent:#b1e83b}
.settings-visualizer .setting-toggle input{accent-color:var(--volume-accent)}

/* Keep the Party Mode label and state in separate, centered segments. */
#settings-console #settings-party{display:flex;align-items:stretch;padding:0;overflow:hidden}
#settings-party .party-mode-label{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;padding:0 10px;font-size:12px}
#settings-party .party-mode-state{display:flex;align-items:center;justify-content:center;flex:0 0 52px;border-left:1px solid var(--settings-line);background:rgba(20,23,25,.06);font-size:11px}
html[data-theme="night"] #settings-party .party-mode-state{background:rgba(0,0,0,.18)}

/* Party Mode has a readable charcoal surface in both themes. */
#settings-console #settings-party{--settings-accent:#b1e83b;background:#292d30;color:#fff;border-color:#ffffff30;box-shadow:none}
#settings-console #settings-party:is(:hover,:focus-visible),#settings-console #settings-party[aria-pressed="true"]{background:#292d30;color:#fff;border-color:#b1e83b;outline-color:#b1e83b}
#settings-console #settings-party[aria-pressed="true"]{box-shadow:0 0 16px #b1e83b24}
#settings-party .party-mode-label{gap:7px}
#settings-console #settings-party :is(.party-mode-label>span:last-child,.party-mode-state){color:#fff}
#settings-console #settings-party .party-mode-state{border-left-color:#ffffff30;background:#0003}
#settings-party .party-mode-icon{display:inline-block;width:18px;height:18px;flex:0 0 18px;background:#b1e83b;mask:url(images/party-disco.svg) center/contain no-repeat;-webkit-mask:url(images/party-disco.svg) center/contain no-repeat}
#settings-console #settings-party::after{background-image:linear-gradient(135deg,transparent 35%,#b1e83b 46%,#e1ffa3 50%,#b1e83b 54%,transparent 65%)}

/* Party Mode stays neutral; its shared border shimmer loops only while hovered. */
#settings-console #settings-party:is(:hover,:focus-visible),#settings-console #settings-party[aria-pressed="true"]{border-color:#ffffff30;outline-color:#fff;box-shadow:none}
#settings-console #settings-party .party-mode-icon{background:#fff}
#settings-console #settings-party::after{background-image:linear-gradient(135deg,transparent 35%,#00d7ffe8 43%,#9a70e8f0 48%,#ff48b8f0 52%,#c1ee57e8 57%,transparent 65%)}
#settings-console #settings-party:hover::after{animation:settings-border-shimmer var(--shimmer-duration,1.5s) linear infinite both}
/* Activation, rather than hover, lights Party Mode in lime green. */
#settings-console #settings-party[aria-pressed="true"]{border-color:#b1e83b;box-shadow:0 0 16px #b1e83b24}
#settings-console #settings-party[aria-pressed="true"] .party-mode-icon{background:#b1e83b}
/* Accessibility controls match the section's orange accent in each theme. */
.settings-accessibility{--volume-accent:#ed8f41}
html[data-theme="night"] .settings-accessibility{--volume-accent:#ffc28a}
.settings-accessibility .setting-toggle input{accent-color:var(--volume-accent)}

/* Themes joins the main drawers with a pastel pink accent. */
summary[data-settings-section="themes"]{--settings-accent:#f2a4c4}

/* Theme presets and live component color controls. */
#settings-console .theme-section-title{font-size:15px;font-weight:400;margin:18px 0 12px}
#settings-console .settings-themes .preset-menu{--preset-accent:#b74c7d}
html[data-theme="night"] #settings-console .settings-themes .preset-menu{--preset-accent:#f2a4c4}
#settings-console .settings-themes .preset-option:is(:hover,:focus-visible){background:#b74c7d;color:#fff}
.settings-themes .setting-toggle input{accent-color:#b74c7d}
html[data-theme="night"] .settings-themes .setting-toggle input{accent-color:#f2a4c4}
.theme-gradient-toggle{margin:22px 0 0}
.theme-color-b{margin-top:12px}
.theme-color-b.is-inactive{opacity:.45;filter:grayscale(1)}
.theme-gradient-toggle.is-inactive>span{color:var(--settings-muted)}
.theme-color-slider output{display:flex;align-items:center;gap:7px}
.theme-color-slider output::before{content:"";width:16px;height:16px;border-radius:50%;border:1px solid var(--settings-line);background:var(--theme-color-swatch)}
#settings-console .theme-color-slider input[type="range"]{appearance:none;-webkit-appearance:none;height:20px;background:transparent;border:0;padding:0}
#settings-console .theme-color-slider input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(to right,#f66,#ff6,#6f6,#6ff,#66f,#f6f,#f66)}
#settings-console .theme-color-slider input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border:1px solid var(--settings-ink);border-radius:50%;background:var(--theme-color-swatch);box-shadow:0 1px 3px #0005}
#settings-console .theme-color-slider input[type="range"]::-moz-range-track{height:6px;border-radius:4px;background:linear-gradient(to right,#f66,#ff6,#6f6,#6ff,#66f,#f6f,#f66)}
#settings-console .theme-color-slider input[type="range"]::-moz-range-thumb{width:16px;height:16px;border:1px solid var(--settings-ink);border-radius:50%;background:var(--theme-color-swatch);box-shadow:0 1px 3px #0005}
#settings-console .theme-color-slider input:disabled{cursor:not-allowed}
html[data-custom-background] .identity::before{opacity:0}

#settings-console .settings-themes button.preset-option:not(.settings-close):is(:hover,:focus-visible){background:#b74c7d;color:#fff}

/* Segmented theme switches mirror Party Mode without recoloring their labels. */
#settings-console #settings-shimmer{display:flex;align-items:stretch;width:190px;max-width:100%;height:48px;overflow:hidden;padding:0;background:#292d30;color:#fff;border-color:#ffffff30}
#settings-shimmer .theme-toggle-label{display:flex;align-items:center;justify-content:center;flex:1;padding:0 10px;color:#fff}
#settings-shimmer .theme-toggle-state{display:flex;align-items:center;justify-content:center;flex:0 0 52px;background:#0003;border-left:1px solid #ffffff30;color:#fff;font-size:11px}
#settings-console #settings-shimmer:is(:hover,:focus-visible){background:#292d30;color:#fff;border-color:#ffffff30;outline-color:#f2a4c4}
#settings-console #settings-shimmer[aria-pressed="true"]{border-color:#f2a4c4}
/* Disable only shimmer layers, preserving chevrons, modal motion, and hover colors. */
html[data-shimmer="off"] :is(.team-card,.menu-toggle)::after,
html[data-shimmer="off"] .menu-toggle::before,
html[data-shimmer="off"] :is(#settings-open,#sound)::before,
html[data-shimmer="off"] #settings-console button::after,
html[data-shimmer="off"] #settings-console summary[data-settings-section]::after,
html[data-shimmer="off"] .settings-body .settings-advanced::after,
html[data-shimmer="off"] :is(#audius-browser,#radio-browser) button::after,
html[data-shimmer="off"] .music-drop-actions button::after,
html[data-shimmer="off"] #information .card-navigation button::after{animation:none!important;opacity:0!important}

/* Shimmer uses the same theme surface and height as the preset dropdowns. */
#settings-console #settings-shimmer{height:42px;min-height:42px;background:var(--settings-bg);color:var(--settings-ink);border-color:var(--settings-line);border-radius:8px}
#settings-console #settings-shimmer:is(:hover,:focus-visible){background:var(--settings-bg);color:var(--settings-ink);border-color:var(--settings-line)}
#settings-console #settings-shimmer :is(.theme-toggle-label,.theme-toggle-state){color:var(--settings-ink)}
#settings-console #settings-shimmer .theme-toggle-state{background:rgba(20,23,25,.06);border-left-color:var(--settings-line)}
html[data-theme="night"] #settings-console #settings-shimmer .theme-toggle-state{background:rgba(0,0,0,.18)}
#settings-console #settings-shimmer[aria-pressed="true"]{border-color:#b74c7d}
html[data-theme="night"] #settings-console #settings-shimmer[aria-pressed="true"]{border-color:#f2a4c4}
#settings-shimmer .theme-toggle-label{gap:7px}
#settings-shimmer .shimmer-toggle-icon{display:inline-block;width:18px;height:18px;flex:0 0 18px;background:var(--settings-ink);mask:url(images/shimmer-sparkle.svg) center/contain no-repeat;-webkit-mask:url(images/shimmer-sparkle.svg) center/contain no-repeat}
#settings-shimmer[aria-pressed="true"] .shimmer-toggle-icon{background:#b74c7d}
html[data-theme="night"] #settings-shimmer[aria-pressed="true"] .shimmer-toggle-icon{background:#f2a4c4}

/* Shade faders reach pure black and white; disabled B controls remain visibly inactive. */
.theme-shade-slider{font-size:11px;margin-top:8px}
.theme-shade-slider.is-inactive{opacity:.45;filter:grayscale(1)}
#settings-console .theme-shade-slider input[type="range"]{appearance:none;-webkit-appearance:none;height:20px;background:transparent;padding:0;border:0}
#settings-console .theme-shade-slider input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(to right,#000,#fff);border:1px solid var(--settings-line)}
#settings-console .theme-shade-slider input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:1px solid var(--settings-ink);border-radius:50%;background:var(--settings-bg);box-shadow:0 1px 3px #0005}
#settings-console .theme-shade-slider input[type="range"]::-moz-range-track{height:6px;border-radius:4px;background:linear-gradient(to right,#000,#fff);border:1px solid var(--settings-line)}
#settings-console .theme-shade-slider input[type="range"]::-moz-range-thumb{width:16px;height:16px;border:1px solid var(--settings-ink);border-radius:50%;background:var(--settings-bg)}
html[data-custom-modal][data-theme]{--modal-glass-surface:hsl(var(--custom-modal-channels) / var(--modal-glass-alpha,.55));--modal-glass-fallback:var(--custom-modal-color)}
html[data-custom-modal] :is(#information,#settings-console,#audius-browser,#radio-browser,#music-drop-choice,#playlist-folder-access,#site-menu){--settings-bg:var(--custom-modal-color);--settings-ink:var(--custom-modal-ink);--settings-muted:var(--custom-modal-muted);color:var(--custom-modal-ink)}
html[data-custom-modal] :is(#information,#settings-console,#audius-browser,#radio-browser) :is(h2,h3,label,summary){color:var(--settings-ink)}
html[data-custom-modal] #panel-copy p{color:var(--custom-modal-muted)}
html[data-custom-modal] .settings-section-drawer{background:hsl(var(--custom-modal-channels) / .82)}
html[data-custom-modal-highlight][data-theme]{--modal-glass-rim:hsl(var(--custom-modal-highlight-channels) / .85);--settings-line:hsl(var(--custom-modal-highlight-channels) / .85)}
html[data-custom-modal] #site-menu{background:var(--modal-glass-surface)}

.settings-themes .setting-transparency{--volume-accent:#b74c7d}
html[data-theme="night"] .settings-themes .setting-transparency{--volume-accent:#f2a4c4}

.theme-file-controls{margin:14px 0 20px}
.theme-file-controls>label{display:block;font-size:12px;margin-bottom:7px}
#settings-theme-name{box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--settings-line);border-radius:10px;background:var(--settings-fill);color:var(--settings-ink);font:inherit;font-size:13px;padding:10px 12px}
#settings-theme-name:focus-visible{outline:2px solid #b74c7d;outline-offset:2px}
html[data-theme="night"] #settings-theme-name:focus-visible{outline-color:#f2a4c4}
.theme-file-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.theme-file-actions button{min-height:42px;flex:1}
.theme-file-note,#settings-theme-status{font-size:11px;color:var(--settings-muted);line-height:1.5;margin:10px 0 0}
#settings-theme-status:empty{display:none}

/* Custom modal controls follow the surface brightness, independently of Day/Night. */
html[data-custom-modal] :is(#information,#settings-console,#audius-browser,#radio-browser,#music-drop-choice,#playlist-folder-access,#site-menu){
  --settings-fill:var(--custom-modal-fill);
  --settings-line:var(--custom-modal-line);
}
html[data-custom-modal][data-custom-modal-highlight] :is(#information,#settings-console,#audius-browser,#radio-browser,#music-drop-choice,#playlist-folder-access,#site-menu){--settings-line:hsl(var(--custom-modal-highlight-channels) / .85)}
html[data-custom-modal][data-modal-tone="dark"] :is(#information,#settings-console,#audius-browser,#radio-browser,#music-drop-choice,#playlist-folder-access,#site-menu){color-scheme:dark}
html[data-custom-modal][data-modal-tone="light"] :is(#information,#settings-console,#audius-browser,#radio-browser,#music-drop-choice,#playlist-folder-access,#site-menu){color-scheme:light}
html[data-custom-modal][data-modal-tone="dark"] .settings-header img{filter:brightness(0) invert(1)}
html[data-custom-modal][data-modal-tone="light"] .settings-header img{filter:brightness(0)}
html[data-custom-modal] :is(.settings-section-chevron,.music-source-browse,#settings-shimmer .theme-toggle-state){background:#00000018}

.theme-color-slider.is-inactive{opacity:.45;filter:grayscale(1)}

/* Contrast-aware theme accents and controls retain the modal hue in either mode. */
html[data-custom-modal] #settings-console :is(button:not(.settings-close):not(#settings-party):not(.preset-option),input[type=text],input[type=search],select){background:var(--settings-fill);color:var(--settings-ink)}
html[data-custom-modal] #settings-console summary[data-settings-section]{background:var(--settings-fill)}
html[data-custom-modal] #settings-console summary[data-settings-section="audio"]{--settings-accent:var(--theme-accent-cyan)}
html[data-custom-modal] #settings-console :is(summary[data-settings-section="shaders"],summary[data-settings-section="advanced"]){--settings-accent:var(--theme-accent-purple)}
html[data-custom-modal] #settings-console :is(summary[data-settings-section="music"],summary[data-settings-section="visualizer"]){--settings-accent:var(--theme-accent-lime)}
html[data-custom-modal] #settings-console :is(summary[data-settings-section="volume"],summary[data-settings-section="accessibility"]){--settings-accent:var(--theme-accent-orange)}
html[data-custom-modal] #settings-console summary[data-settings-section="themes"]{--settings-accent:var(--theme-accent-pink)}
html[data-custom-modal] #settings-console :is(.settings-advanced,.settings-shaders){--volume-accent:var(--theme-accent-purple)}
html[data-custom-modal] #settings-console .settings-visualizer{--volume-accent:var(--theme-accent-lime)}
html[data-custom-modal] #settings-console :is(.settings-volume,.settings-accessibility){--volume-accent:var(--theme-accent-orange)}
html[data-custom-modal] #settings-console .settings-themes .setting-transparency{--volume-accent:var(--theme-accent-pink)}
html[data-custom-modal] #settings-console .preset-menu{--preset-accent:var(--theme-accent-purple);--preset-hover-ink:var(--theme-accent-purpleInk)}
html[data-custom-modal] #settings-console .settings-themes .preset-menu{--preset-accent:var(--theme-accent-pink);--preset-hover-ink:var(--theme-accent-pinkInk)}
html[data-custom-modal] #settings-console button.preset-trigger:not(.settings-close){color:var(--preset-accent)}
html[data-custom-modal] #settings-console .settings-themes button.preset-option:not(.settings-close):is(:hover,:focus-visible),html[data-custom-modal] #settings-console button.preset-option:not(.settings-close):is(:hover,:focus-visible){background:var(--preset-accent);color:var(--preset-hover-ink)}
html[data-custom-modal] #settings-console #settings-shimmer[aria-pressed=true]{border-color:var(--theme-accent-pink)}
html[data-custom-modal] #settings-console #settings-shimmer[aria-pressed=true] .shimmer-toggle-icon{background:var(--theme-accent-pink)}
html[data-custom-modal] #settings-console .settings-themes .setting-toggle input{accent-color:var(--theme-accent-pink)}
html[data-custom-modal] #settings-console :is(.settings-shaders,.settings-visualizer,.settings-accessibility) .setting-toggle input{accent-color:var(--volume-accent)}
html[data-custom-modal] #settings-console button:not(.settings-close):not(#settings-party):not(.preset-option):is(:hover,:focus-visible){background:var(--settings-fill);color:var(--settings-ink);border-color:var(--theme-accent-purple);outline-color:var(--theme-accent-purple)}
html[data-custom-modal] #settings-console button.preset-trigger:not(.settings-close):is(:hover,:focus-visible){color:var(--preset-accent);border-color:var(--preset-accent);outline-color:var(--preset-accent)}
html[data-custom-modal] #settings-console #settings-shimmer:focus-visible,html[data-custom-modal] #settings-theme-name:focus-visible{outline-color:var(--theme-accent-pink)}
html[data-custom-modal] #settings-console #settings-radio:is(:hover,:focus-visible){border-color:var(--theme-accent-orange);outline-color:var(--theme-accent-orange)}
html[data-custom-modal] #settings-console #settings-radio:is(:hover,:focus-visible) .radio-mark{color:var(--theme-accent-orange)}
html[data-custom-modal] #settings-console #settings-radio:is(:hover,:focus-visible) .music-source-brand>span:last-child{color:var(--settings-ink)}
html[data-custom-modal][data-control-tone=dark] #settings-console #settings-audius:is(:hover,:focus-visible) .audius-brand-mark{background-image:url(images/audius-wordmark-color.svg?v=1)}
html[data-custom-modal][data-control-tone=light] #settings-console #settings-audius:is(:hover,:focus-visible) .audius-brand-mark{background-image:url(images/audius-wordmark-color-day.svg?v=1)}

/* Shell text follows glass over the page; drawers and controls use their denser tint. */
html[data-custom-modal] :is(#settings-console,#audius-browser,#radio-browser) :is(.settings-section-drawer,.audius-body,.radio-body){--settings-ink:var(--custom-control-ink);--settings-muted:var(--custom-control-muted);color:var(--settings-ink)}
html[data-custom-modal] #settings-console :is(button:not(.settings-close):not(#settings-party):not(.preset-option),input[type=text],input[type=search],select){color:var(--custom-control-ink)}
html[data-custom-modal] #settings-console button:not(.settings-close):not(#settings-party):not(.preset-option):is(:hover,:focus-visible){color:var(--custom-control-ink)}
html[data-custom-modal] #settings-console button.preset-trigger:not(.settings-close),html[data-custom-modal] #settings-console button.preset-trigger:not(.settings-close):is(:hover,:focus-visible){color:var(--preset-accent)}
html[data-custom-modal] #settings-console #settings-shimmer :is(.theme-toggle-label,.theme-toggle-state){color:var(--custom-control-ink)}
html[data-custom-modal] #settings-console #settings-radio:is(:hover,:focus-visible) .music-source-brand>span:last-child{color:var(--custom-control-ink)}

html[data-custom-modal] #settings-console summary[data-settings-section]{--settings-ink:var(--custom-control-ink)}

/* All modal header foregrounds share the text's contrast switch. */
html[data-custom-modal] :is(.settings-header,.audius-header,.radio-header){color:var(--custom-modal-ink)}
html[data-custom-modal] :is(.settings-header,.audius-header,.radio-header) :is(h2,.settings-close,.audius-close,.radio-close,.radio-mark){color:inherit;transition:none}
html[data-custom-modal] .settings-header img{transition:none}
html[data-custom-modal][data-modal-tone=dark] .audius-header .audius-brand{filter:brightness(0) invert(1)}
html[data-custom-modal][data-modal-tone=light] .audius-header .audius-brand{filter:brightness(0)}
html[data-custom-modal] #settings-console .settings-close:not(:hover):not(:focus-visible){color:var(--custom-modal-ink)}
html[data-custom-modal] #audius-browser .audius-close:not(:hover):not(:focus-visible),html[data-custom-modal] #radio-browser .radio-close:not(:hover):not(:focus-visible){color:var(--custom-modal-ink)}


/* Animate shared foreground tokens once, so inherited labels and icons cannot lag. */
@property --custom-modal-ink{syntax:"<color>";inherits:true;initial-value:#000}
@property --custom-control-ink{syntax:"<color>";inherits:true;initial-value:#000}
@property --custom-modal-muted{syntax:"<color>";inherits:true;initial-value:#000}
@property --custom-control-muted{syntax:"<color>";inherits:true;initial-value:#000}
@property --custom-icon-invert{syntax:"<number>";inherits:true;initial-value:0}
html[data-custom-modal]{transition:--custom-modal-ink 240ms ease,--custom-control-ink 240ms ease,--custom-modal-muted 240ms ease,--custom-control-muted 240ms ease,--custom-icon-invert 240ms ease}
html[data-custom-modal][data-modal-tone=dark]{--custom-icon-invert:1}
html[data-custom-modal][data-modal-tone=light]{--custom-icon-invert:0}
html[data-custom-modal] :is(#settings-console,#audius-browser,#radio-browser){--settings-bg:var(--custom-control-background)}
html[data-custom-modal] .settings-section-drawer{background:var(--custom-control-background)}
html[data-custom-modal] :is(#settings-console,#audius-browser,#radio-browser) :is(h2,h3,p,label,summary,output,button,span,a,input,select),html[data-custom-modal] :is(.settings-header,.audius-header,.radio-header){transition-property:background-color,border-color,box-shadow;transition-duration:240ms;transition-timing-function:ease}
html[data-custom-modal][data-modal-tone] :is(.settings-header img,.audius-header .audius-brand){filter:brightness(0) invert(var(--custom-icon-invert));transition:none}
@media(prefers-reduced-motion:reduce){html[data-custom-modal]{transition:none}}

html[data-custom-modal][data-modal-tone=dark] :is(#settings-console,#audius-browser,#radio-browser){--neutral-text-edge:0 1px 2px #00000045}
html[data-custom-modal][data-modal-tone=light] :is(#settings-console,#audius-browser,#radio-browser){--neutral-text-edge:0 1px 1px #ffffff30}
html[data-custom-modal] :is(#settings-console,#audius-browser,#radio-browser) :is(h2,h3,label,p,output,.settings-section-brand>span:last-child,.settings-close,.audius-close,.radio-close){text-shadow:var(--neutral-text-edge)}

.settings-title-icon{width:25px;height:25px;flex:0 0 25px;background:currentColor;mask:url(images/settings-gear.svg) center/contain no-repeat;-webkit-mask:url(images/settings-gear.svg) center/contain no-repeat}

/* Drawer transparency is visibly 15 percentage points below the modal, including 100%. */
html[data-theme] #settings-console{--drawer-tint:#ebeef0}
html[data-theme=night] #settings-console{--drawer-tint:#1d2125}
html[data-custom-modal][data-theme] #settings-console{--drawer-tint:var(--custom-control-background)}
html[data-theme] #settings-console .settings-section-drawer{background:color-mix(in srgb,var(--drawer-tint) var(--drawer-layer-opacity,33.333333%),transparent)}
@media(prefers-reduced-transparency:reduce){html[data-theme] #settings-console .settings-section-drawer{background:var(--drawer-tint)}}

.theme-brightness-slider.is-inactive{opacity:.45;filter:grayscale(1)}

html[data-theme="day"][data-custom-background] .identity h1{color:var(--theme-wordmark)}

/* A fine edge and soft shadow keep the brand distinct from themed backgrounds. */
.identity h1{text-shadow:0 0 1px #ffffff70,0 2px 4px #00000030}
.identity>img:first-child{filter:drop-shadow(0 0 1px #ffffff60) drop-shadow(0 2px 4px #00000035)}
html[data-theme="night"] .identity h1{text-shadow:0 0 1px #00000070,0 2px 5px #00000065}
html[data-theme="night"] .identity>img:first-child{filter:drop-shadow(0 0 1px #00000070) drop-shadow(0 2px 5px #00000065)}
summary[data-settings-section="effects"]{--settings-accent:#6330bd}
html[data-theme="night"] summary[data-settings-section="effects"]{--settings-accent:#b695ff}
summary[data-settings-section="background-animations"]{--settings-accent:#00bce8}
html[data-custom-modal] #settings-console summary[data-settings-section="effects"]{--settings-accent:var(--theme-accent-purple)}
html[data-custom-modal] #settings-console summary[data-settings-section="background-animations"]{--settings-accent:var(--theme-accent-cyan)}
.settings-background-animations{--volume-accent:#00bce8}
.settings-background-animations .setting-toggle input{accent-color:var(--volume-accent)}
#settings-console .settings-background-animations .preset-trigger{min-height:44px}
#settings-console .settings-background-animations .preset-option[aria-selected="true"]{color:#00bce8;background:transparent}
#settings-console .settings-background-animations .preset-option:hover{color:#fff;background:#008da9}
html[data-network-visible="off"] #network canvas,html[data-network-visible="off"] #network-scanlines{opacity:0!important}
#network canvas{transition:opacity .3s ease}
#background-animations{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.background-animation{position:absolute;inset:-10%;pointer-events:none;overflow:hidden}
.background-animation[hidden]{display:none!important}
.bgWeightless i,.bgDust i{position:absolute;left:var(--x);bottom:-80px;width:var(--w);height:var(--h);background:var(--ambient-color);opacity:var(--alpha);filter:blur(var(--blur));border-radius:2px;animation:psionomy-weightless-rise var(--duration) var(--delay) linear infinite}
.bgDust i{width:3px;height:3px;border-radius:50%;filter:blur(.3px);animation-duration:calc(var(--duration) * 3);opacity:.35}
.bgBokeh{background:radial-gradient(circle at 12% 24%,color-mix(in srgb,var(--ambient-color) 35%,transparent) 0 2%,transparent 7%),radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--ambient-color) 25%,transparent) 0 3%,transparent 9%),radial-gradient(circle at 65% 65%,color-mix(in srgb,var(--ambient-color) 30%,transparent) 0 3%,transparent 10%),radial-gradient(circle at 25% 82%,color-mix(in srgb,var(--ambient-color) 25%,transparent) 0 2%,transparent 8%);filter:blur(7px);animation:psionomy-ambient-drift 18s ease-in-out infinite alternate}
.bgAurora{background:linear-gradient(115deg,transparent 15%,transparent 30%,color-mix(in srgb,var(--ambient-color) 25%,transparent) 42%,color-mix(in srgb,var(--ambient-color) 40%,transparent) 50%,color-mix(in srgb,var(--ambient-color) 20%,transparent) 60%,transparent 75%);filter:blur(24px);animation:psionomy-ambient-drift 22s ease-in-out infinite alternate}
.bgMist{background:radial-gradient(ellipse at 15% 35%,color-mix(in srgb,var(--ambient-color) 22%,transparent),transparent 48%),radial-gradient(ellipse at 85% 75%,color-mix(in srgb,var(--ambient-color) 18%,transparent),transparent 48%);filter:blur(32px);animation:psionomy-ambient-drift 28s ease-in-out infinite alternate}
@keyframes psionomy-weightless-rise{from{transform:translate3d(-15px,80px,0) rotate(-45deg)}to{transform:translate3d(45px,calc(-120vh - 160px),0) rotate(35deg)}}
@keyframes psionomy-ambient-drift{from{transform:translate(-4%,-3%) scale(1)}to{transform:translate(5%,4%) scale(1.06)}}
html[data-background-motion="off"] .background-animation,html[data-background-motion="off"] .background-animation i{animation:none!important}
html[data-background-motion="off"] :is(.bgWeightless,.bgDust) i{bottom:var(--rest);transform:rotate(-20deg)}
@media(prefers-reduced-motion:reduce){.background-animation,.background-animation i{animation:none!important}.bgWeightless i,.bgDust i{bottom:var(--rest);transform:rotate(-20deg)}#network canvas{transition:none}}





/* Hide the legacy static fallback along with the live canvas. */
html[data-network-visible="off"] #network{background:transparent!important}

#weightless-3d{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
#weightless-3d canvas{display:block;width:100%;height:100%}
.bgWeightless3D{display:none}

.bgWeightlessGlass{display:none}

/* Name entry and its file actions form one segmented control. */
.theme-name-control{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--settings-line);border-radius:12px;background:var(--settings-fill);overflow:hidden;--theme-action-fill:color-mix(in srgb,var(--settings-fill) 92%,black)}
html[data-theme="night"] .theme-name-control{--theme-action-fill:color-mix(in srgb,var(--settings-fill) 80%,black)}
.theme-name-control:focus-within{border-color:var(--theme-accent-pink,#b74c7d);box-shadow:0 0 0 1px var(--theme-accent-pink,#b74c7d)}
#settings-console .theme-name-control #settings-theme-name{flex:1;width:0;min-width:0;min-height:42px;border:0;border-radius:0;outline:none;background:transparent;color:var(--settings-ink);padding:10px 12px}
.theme-name-control .theme-file-actions{display:flex;flex:none;flex-wrap:nowrap;gap:0;margin:0}
#settings-console .theme-name-control .theme-file-actions button{flex:none;min-width:58px;min-height:42px;margin:0;padding:8px 12px;border:0;border-left:1px solid var(--settings-line);border-radius:0;background:var(--theme-action-fill);color:var(--settings-ink);font-size:12px}
#settings-console .theme-name-control .theme-file-actions button:hover{color:var(--theme-accent-pink,#b74c7d);background:var(--theme-action-fill)}
#settings-console .theme-name-control .theme-file-actions button:focus-visible{outline:2px solid var(--theme-accent-pink,#b74c7d);outline-offset:-3px}
@media(max-width:480px){#settings-console .theme-name-control .theme-file-actions button{min-width:48px;padding:8px}#settings-console .theme-name-control #settings-theme-name{padding:10px 9px;font-size:12px}}

#settings-console .theme-name-control #settings-theme-name::placeholder{color:color-mix(in srgb,var(--settings-ink) 65%,var(--settings-fill));opacity:1}

/* Ambient effects sit below the live network, whose clear backdrop exposes them. */
#network{z-index:1}
html[data-background-animations="on"] #network{background:transparent!important}

/* Glass floats above the network; opaque cubes remain in the ambient layer. */
#weightless-glass{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}
#weightless-glass canvas{display:block;width:100%;height:100%}

#settings-console .preset-group-heading{display:flex;align-items:center;justify-content:space-between}
#settings-console .preset-group-heading::after{content:'';width:7px;height:7px;flex:none;margin-right:3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s ease}
#settings-console .preset-tree-parent[aria-expanded="true"]>.preset-group-heading::after{transform:rotate(45deg)}
#settings-console .preset-suboptions{margin:2px 0 4px 12px;padding-left:8px;border-left:1px solid var(--settings-line)}
#settings-console .preset-tree-parent[data-selected="true"]>.preset-group-heading{color:var(--preset-accent)}
#settings-console .preset-tree-parent:focus-visible{outline:none}
#settings-console .preset-tree-parent:focus-visible>.preset-group-heading,#settings-console .preset-group-heading:hover{background:#008da9;color:#fff}
html[data-custom-modal] #settings-console .preset-tree-parent:focus-visible>.preset-group-heading,html[data-custom-modal] #settings-console .preset-group-heading:hover{background:var(--preset-accent);color:var(--preset-hover-ink)}
@media(prefers-reduced-motion:reduce){#settings-console .preset-group-heading::after{transition:none}}