@font-face { font-family: 'Spectrascope BigBlue'; src: url('/fonts/bigblue-terminal-nerd.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Spectrascope Display'; src: url('/fonts/archive/Archive-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Spectrascope Hack'; src: url('/fonts/hack-nerd.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Spectrascope Space Mono'; src: url('/fonts/space-mono-nerd.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Spectrascope Cascadia'; src: url('/fonts/cascadia-nerd.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Spectrascope Fantasque'; src: url('/fonts/fantasque-nerd.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Spectrascope Monofur'; src: url('/fonts/monofur-nerd.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Spectrascope Monoid'; src: url('/fonts/monoid-nerd.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Spectrascope Mononoki'; src: url('/fonts/mononoki-nerd.ttf') format('truetype'); font-display: swap; }
:root { --site-small-font: 'Spectrascope Hack', monospace; --bg: #101318; --panel: #1a1e25; --edge: #333a45; --text: #e9e6df; --muted: #9fa9b5; --chords: #e8b96b; --drums: #e97963; --bass: #79b9da; --theme-surface: #232932; --theme-electric: #b594df; }
body #theme-picker[hidden] { display: none !important; }
html body, html body * { font-family: var(--site-small-font) !important; }
html body :is(h1,h2,h3,h4,h5,h6,[role=heading]), html body :is(h1,h2,h3,h4,h5,h6,[role=heading]) * { font-family: 'Spectrascope Display', sans-serif !important; font-weight: 400; }
html body :is(h1,h2) { letter-spacing: 0; line-height: 1.25; overflow-wrap: anywhere; }
html body .scoreboard strong { font-size: clamp(12px,2vw,22px); min-width: 0; white-space: nowrap; }
body .site-header .site-header__inner { position: relative; }
body .site-header .site-header__crumbs { height: 44px; padding-right: 104px; }
body .site-appearance { position: absolute; top: 10px; right: 20px; margin: 0; padding: 0; border: 0; z-index: 2; }
body .site-appearance > summary { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 90px; padding: 8px; border: 1px solid var(--edge); border-radius: 5px; background: var(--theme-surface); color: var(--text); cursor: pointer; list-style: none; font-size: 12px; }
body .site-appearance > summary::-webkit-details-marker { display: none; }
body .site-appearance > summary:focus-visible { outline: 2px solid var(--chords); outline-offset: -3px; }
body .site-appearance__panel { display: grid; gap: 16px; position: absolute; right: 0; top: 50px; width: min(310px,calc(100vw - 24px)); max-height: 65vh; overflow-y: auto; padding: 20px; border: 1px solid var(--edge); border-radius: 8px; background: var(--panel); box-shadow: 0 16px 40px #0009; }
body .site-appearance__panel label { display: grid; gap: 8px; color: var(--text); font-size: 12px; margin: 0; }
body .site-appearance__panel select { width: 100%; min-width: 0; min-height: 44px; padding: 8px; font-size: 12px; color: var(--text); background: var(--theme-surface); border: 1px solid var(--edge); border-radius: 4px; }
body .site-appearance__panel p { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 0; }
html[data-theme] { color-scheme: dark; --line: var(--edge); --line-strong: var(--chords); --green: var(--chords); --amber: var(--drums); --cyan: var(--bass); --red: var(--drums); --mint: var(--bass); --orange: var(--chords); --gold: var(--chords); --pink: var(--drums); --bg-2: var(--theme-surface); --panel-2: var(--theme-surface); }
html[data-theme] body { background: radial-gradient(ellipse at top left,color-mix(in srgb,var(--theme-electric) 14%,var(--bg)),transparent 55%),var(--bg); color: var(--text); }
html[data-theme] body .site-header { background: var(--bg); color: var(--text); border-color: var(--edge); }
html[data-theme] body .site-header a { color: var(--text); }
html[data-theme] body .site-header .site-header__crumbs a { color: var(--muted); }
html[data-theme] body .site-header .site-header__buttons a { background: var(--theme-surface); border-color: var(--edge); }
html[data-theme] body .site-header .site-header__buttons a[aria-current] { color: var(--text); background: color-mix(in srgb,var(--chords) 18%,var(--panel)); border-color: var(--chords); }
html[data-theme] body :is(.shell,.terminal,.cabinet,.arcade-scores,.overlay-card,.caution,.signal,.session-panel) { background: var(--panel); border-color: var(--edge); }
html[data-theme] body:is(.home-page,.terminal-page) { --site-glass-panel: color-mix(in srgb,var(--panel) 48%,transparent); --site-glass-surface: color-mix(in srgb,var(--theme-surface) 30%,transparent); }
html[data-theme] body:is(.home-page,.terminal-page) .shell {
  background: radial-gradient(circle at top left,color-mix(in srgb,var(--chords) 7%,transparent),transparent 28%),radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--bass) 6%,transparent),transparent 24%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 30%,transparent),color-mix(in srgb,var(--bg) 44%,transparent));
}
html[data-theme] body:is(.home-page,.terminal-page) .terminal {
  background: radial-gradient(circle at top left,color-mix(in srgb,var(--bass) 5%,transparent),transparent 20%),radial-gradient(circle at 85% 12%,color-mix(in srgb,var(--chords) 4%,transparent),transparent 22%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 30%,transparent),color-mix(in srgb,var(--bg) 38%,transparent));
}
html[data-theme] body:is(.home-page,.terminal-page) :is(.columns .panel,.archive-card) { background: linear-gradient(180deg,var(--site-glass-panel),var(--site-glass-surface)); }
html[data-theme] body:is(.home-page,.terminal-page) :is(.caution,.signal,.session-panel) { background: var(--site-glass-panel); }
html[data-theme] body:is(.home-page,.terminal-page) .site-header { background: color-mix(in srgb,var(--bg) 72%,transparent); }
html[data-theme] body :is(h1,h2,h3) { color: var(--text); }
html[data-theme] body :is(h1 em,h1 span,h2 span,.arcade-scores h2,.scoreboard strong) { color: var(--chords); }
html[data-theme] body :is(.intro,.quiet,.arcade-scores p,.arcade-scores label,.scoreboard span,.mission p,.arcade-scores th) { color: var(--muted); }
html[data-theme] body :is(button,select,input:not([type=range]):not([type=checkbox]):not([type=radio])) { color: var(--text); background: var(--theme-surface); border-color: var(--edge); }
html[data-theme] body :is(.primary,.button) { background: var(--chords); color: var(--bg); border-color: var(--chords); }
html[data-theme] body :is(.arcade-scores td,.arcade-scores input,.mission,.sectors li,footer) { border-color: var(--edge); }
html[data-theme] body :is(.arcade-scores td a,.arcade-scores td:nth-child(3),.arcade-scores #arcade-website-status) { color: var(--chords); }
html[data-theme] body :is(a,button,select,input,summary):focus-visible { outline-color: var(--chords); }
html { scroll-padding-top: 130px; }
@media (max-width: 600px) {
  html { scroll-padding-top: 180px; }
  body .site-appearance { top: 8px; right: 12px; }
  html body :is(h1,h2) { font-size: clamp(24px,6vw,36px); }
}
