/* All interactive surfaces follow the selected network palette.
   Define on body as the palette is applied there, including top-layer dialogs. */
:root,body{
  --ui-a:var(--site-glow-left-color,#775cce);
  --ui-b:var(--site-glow-accent-color,#58b9e1);
  --ui-c:var(--site-glow-right-color,#ffa690);
  --ui-accent:color-mix(in srgb,var(--ui-b) 72%,#edf4ff);
  --ui-text:#edf3fa;
  --ui-muted:#a6b6c7;
  --ui-bg:#0b121b;
  --ui-border:color-mix(in srgb,var(--ui-b) 36%,#293449);
  --ui-hover:color-mix(in srgb,var(--ui-b) 15%,#101927);
  --ui-selected:color-mix(in srgb,var(--ui-a) 25%,#172237);
  --ui-focus:color-mix(in srgb,var(--ui-b) 60%,#fff);
  --ui-fill:linear-gradient(115deg,color-mix(in srgb,var(--ui-a) 42%,#142035),color-mix(in srgb,var(--ui-b) 30%,#142035),color-mix(in srgb,var(--ui-c) 22%,#142035));
  --mint:var(--ui-accent);
  --white:var(--ui-text);
  --muted:var(--ui-muted);
  --line:color-mix(in srgb,var(--ui-b) 15%,#202b3a);
  color-scheme:dark;
}
body{--surface2:#111a24}
body :is(button,input,select,textarea,summary,a):focus-visible{
  outline:2px solid var(--ui-focus);
  outline-offset:3px;
}
body :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--ui-accent)}
body select{color-scheme:dark;border-color:var(--ui-border)}
body select option,body select optgroup{color:var(--ui-text);background:var(--ui-bg)}
body select option:checked{color:var(--ui-text);background:var(--ui-selected)}
body .button{border-radius:9px}
body :is(.button.mint-bg,.library-button,.community-count-join,.member-entry),
body .live-app-header [data-live-install]{
  color:var(--ui-text);
  background:var(--ui-fill);
  border:1px solid var(--ui-border);
  box-shadow:inset 0 1px 0 #ffffff0a;
}
body :is(.button.mint-bg,.library-button,.community-count-join,.member-entry):hover,
body .live-app-header [data-live-install]:hover{
  color:#fff;
  background:var(--ui-fill);
  border-color:var(--ui-accent);
  box-shadow:0 5px 24px color-mix(in srgb,var(--ui-a) 18%,transparent);
}
body .button.outline{border-color:var(--ui-border);color:var(--ui-text)}
body .button.outline:hover{background:var(--ui-hover);border-color:var(--ui-accent)}
body :is(.member-header-button,.language-switch,.motion-control,.profile-avatar-action){border-radius:8px}
body :is(.header-actions button,.ticker-status button,#menu):hover{color:var(--ui-text)}
body :is(.support-amounts button[aria-pressed=true],.support-frequency input:checked+span,.support-vote.is-selected,.library-topic:has(input:checked),.article-save [data-save-article][aria-pressed=true]){
  color:var(--ui-text);background:var(--ui-selected);border-color:var(--ui-accent);
}
body .hero h1 .mint{
  background-image:linear-gradient(110deg,var(--ui-a),var(--ui-accent) 50%,var(--ui-c));
}
body .sparkline path{stroke:var(--ui-accent)}
body .scroll-rail{background:linear-gradient(90deg,var(--ui-a),var(--ui-b),var(--ui-c))}
body :is(.member-dialog,.yt-news-dialog,.live-scenes-dialog){border-color:var(--ui-border)}
body :is(.member-close,.yt-news-dialog-header>button,.live-scenes-close):hover{background:var(--ui-hover);color:var(--ui-text)}
body .hero-network{
  --scene-a:var(--ui-b);--scene-b:var(--ui-a);--scene-c:var(--ui-c);
}
body .graph-tools button[aria-pressed=true],body #graph-palette-toggle[aria-expanded=true],
body #graph-palette-picker [data-graph-palette][aria-pressed=true],
body .graph-sharing [data-network-sound][aria-pressed=true]{
  color:var(--ui-text);background:var(--ui-selected);border-color:var(--ui-accent);
}
body .graph-tools button:hover,body #graph-palette-picker [data-graph-palette]:hover,
body .graph-sharing button:hover{color:var(--ui-text);background:var(--ui-hover);border-color:var(--ui-border)}
body :is(#graph-palette-picker,.graph-share-panel,.graph-info){border-color:var(--ui-border)}
body .is-theater .graph-tools{border-color:var(--ui-border)}
body .graph-sound-volume select,body .yt-news-filters select,body .support-field select{
  background:var(--ui-bg);color:var(--ui-text);border-color:var(--ui-border);
}
body .hero-network :is(button,input,select,a):focus-visible{outline-color:var(--ui-focus)}
body .hero-network .graph-intro h2>span,body .graph-glow-heading output{color:var(--ui-accent)}
body .hero-network #graph-glow{accent-color:var(--ui-accent)}
@media(forced-colors:active){
  body :is(.button.mint-bg,.library-button,.member-entry){border-color:ButtonText}
}