/* One visual mark, one sound control, and two deliberate lighting conditions. */
.header-actions { gap: 8px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.theme-icon { display: inline-grid; place-items: center; width: 16px; font-size: 17px; line-height: 1; }
.header-button .theme-icon, #theme-toggle .theme-icon { color: currentColor; }
.header-button #theme-label { color: currentColor; }

.intro h1.hero-logo { width: min(100%, 340px); max-width: none; line-height: 0; }
.hero-logo img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.14)); }
.intro-copy { margin: 16px 0 19px; }

.music-player {
  width: min(100%, 350px);
  margin-top: 19px;
  padding: 15px 16px 6px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.035);
}
.music-topline { font-size: 10px; letter-spacing: .055em; }
.music-player .audio-tuning {
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  animation: none;
}
.music-player .audio-control-meta label {
  color: #f2f1e9;
  font-family: Geist, Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -.025em;
  text-transform: none;
}
.music-player .audio-control-meta output { color: #bad8ae; font-size: 16px; font-weight: 600; }
.music-player #music-volume { height: 43px; }
.music-player #music-volume::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; }
.music-player #music-volume::-webkit-slider-thumb { width: 24px; height: 25px; margin-top: -10px; border-radius: 5px; }
.music-player #music-volume::-moz-range-track,
.music-player #music-volume::-moz-range-progress { height: 8px; border-radius: 4px; }
.music-player #music-volume::-moz-range-thumb { width: 24px; height: 25px; border-radius: 5px; }
.music-player .volume-scale { margin-top: -2px; font-size: 10px; }
.music-secondary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; border-top: 1px solid #3d3a39; padding-top: 11px; }
.music-details { flex: 1 1 auto; min-width: 0; }
.music-details strong { font-size: 12px; }
.music-details span { font-size: 10px; }
.music-transport { flex: 0 0 auto; gap: 4px; }
.music-transport button, .music-upload {
  display: grid;
  place-items: center;
  border: 1px solid #514c49;
  box-shadow: none;
  transition: scale 150ms cubic-bezier(.4,0,.2,1), background-color 150ms cubic-bezier(.4,0,.2,1), border-color 150ms cubic-bezier(.4,0,.2,1);
}
.music-transport button:not(:disabled):hover, .music-upload:hover { border-color: #a9a4a1; background: #33302d; }
.music-transport button:not(:disabled):active, .music-upload:active { scale: .96; }
.music-skip { width: 40px; height: 40px; }
.music-play { width: 44px; height: 44px; }
.music-more { margin-top: 7px; border-top: 1px solid #3d3a39; }
.music-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 42px; color: #b8b3b0; font-size: 11px; cursor: pointer; list-style: none; }
.music-more summary::-webkit-details-marker { display: none; }
.music-more summary span { font-size: 18px; transition: transform 180ms cubic-bezier(.2,0,0,1); }
.music-more[open] summary span { transform: rotate(180deg); }
.music-more summary:hover { color: #eeeeee; }
.music-more-content { border-top: 1px solid #3d3a39; padding: 12px 0 14px; }
.music-more-content .audio-control-meta label { color: #b8b3b0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 400; text-transform: uppercase; }
.music-more-content #music-progress { height: 32px; }
.music-upload { display: inline-flex; min-height: 40px; margin-top: 8px; padding: 0 12px; background: #292522; color: #eeeeee; }
.sound-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; color: #b8b3b0; font-size: 12px; }
.sound-setting-button { min-height: 40px; border: 1px solid #514c49; border-radius: 3px; padding: 0 12px; background: #292522; color: #eeeeee; font-size: 12px; cursor: pointer; transition: scale 150ms cubic-bezier(.4,0,.2,1), background-color 150ms cubic-bezier(.4,0,.2,1); }
.sound-setting-button:hover { background: #33302d; }
.sound-setting-button:active { scale: .96; }
.sound-setting-button span { color: #a0ca92; }

html[data-theme="day"] { color-scheme: light; --ink: #252920; --muted: #555b50; --fine: #6c7166; --accent: #527b42; --accent-bright: #406735; --line: #c7cbbd; --panel: #f7f5ec; --navy: #f7f5ec; --navy-deep: #ece8dc; }
html[data-theme="day"] body { background: #ece8dc; color: #252920; }
html[data-theme="day"] .desk-surface,
html[data-theme="day"] body[data-surface="custom"] .desk-surface { filter: blur(27px) brightness(1.05) saturate(.34); }
html[data-theme="day"] body[data-surface="leather"] .desk-surface,
html[data-theme="day"] body[data-surface="walnut"] .desk-surface,
html[data-theme="day"] body[data-surface="stone"] .desk-surface { filter: brightness(1.05) saturate(.34); }
html[data-theme="day"] .page-shell::before { background: rgba(245,242,230,.82); }
html[data-theme="day"] #desk-light { opacity: .08; }
html[data-theme="day"] .site-header { border-bottom-color: rgba(37,41,32,.2); }
html[data-theme="day"] .brand, html[data-theme="day"] .creator-credit strong { color: #252920; }
html[data-theme="day"] .creator-credit { border-left-color: #c2c6b8; color: #646a5d; }
html[data-theme="day"] .header-button { border-color: #adb3a5; background: rgba(252,251,245,.75); color: #252920; }
html[data-theme="day"] .header-button:hover,
html[data-theme="day"] .header-button[aria-expanded="true"] { border-color: #5b7153; background: #fffef7; color: #252920; }
html[data-theme="day"] .eyebrow, html[data-theme="day"] .instruction-label,
html[data-theme="day"] .panel-topline, html[data-theme="day"] .metric-label { color: #5a6254; }
html[data-theme="day"] .intro-copy, html[data-theme="day"] .instructions p,
html[data-theme="day"] .score-hint { color: #4e554a; }
html[data-theme="day"] .primary-button, html[data-theme="day"] .secondary-button,
html[data-theme="day"] .post-score-button { background: #263b29; color: #f8f6e9; }
html[data-theme="day"] .primary-button:hover, html[data-theme="day"] .secondary-button:hover,
html[data-theme="day"] .post-score-button:hover { background: #39533b; }
html[data-theme="day"] .instructions { border-top-color: #bfc5b5; }
html[data-theme="day"] .instructions strong { border-color: #b8bfb0; background: #f9f8ef; color: #263b29; }
html[data-theme="day"] .music-player { border-color: #c4c9b9; background: rgba(249,248,239,.93); box-shadow: 0 14px 38px rgba(37,41,32,.1), inset 0 1px 0 #fff; }
html[data-theme="day"] .music-player:hover { border-color: #a8b09c; background: #fbfaf2; }
html[data-theme="day"] .music-topline, html[data-theme="day"] .music-details span,
html[data-theme="day"] .music-more summary, html[data-theme="day"] .volume-scale { color: #62695d; }
html[data-theme="day"] .music-details strong,
html[data-theme="day"] .music-player .audio-control-meta label { color: #252920; }
html[data-theme="day"] .music-player .audio-control-meta output,
html[data-theme="day"] .audio-time { color: #466d37; }
html[data-theme="day"] .music-more-content .audio-control-meta label { color: #62695d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 400; text-transform: uppercase; }
html[data-theme="day"] .music-secondary, html[data-theme="day"] .music-more,
html[data-theme="day"] .music-more-content { border-color: #d5d8cc; }
html[data-theme="day"] .music-more summary:hover { color: #252920; }
html[data-theme="day"] .music-transport button, html[data-theme="day"] .music-upload { border-color: #b8bfb0; background: #f3f2e9; color: #252920; }
html[data-theme="day"] .music-transport button:not(:disabled):hover,
html[data-theme="day"] .music-upload:hover { border-color: #5b7153; background: #e9eddf; }
html[data-theme="day"] .music-play { border-color: #263b29; background: #263b29; color: #fff !important; }
html[data-theme="day"] .music-play:not(:disabled):hover { background: #39533b !important; }
html[data-theme="day"] .audio-range::-webkit-slider-runnable-track { border-color: #aeb7a3; background: linear-gradient(90deg,#547d43 0 var(--range-fill,0%),#d5d9cb var(--range-fill,0%) 100%); }
html[data-theme="day"] .audio-range::-webkit-slider-thumb { border-color: #496441; background: #fffef8; box-shadow: 0 0 0 1px #aeb7a3; }
html[data-theme="day"] .audio-range::-moz-range-track { border-color: #aeb7a3; background: #d5d9cb; }
html[data-theme="day"] .audio-range::-moz-range-progress { background: #547d43; }
html[data-theme="day"] .audio-range::-moz-range-thumb { border-color: #496441; background: #fffef8; }
html[data-theme="day"] .phone { filter: drop-shadow(0 28px 26px rgba(39,41,31,.3)); }
html[data-theme="day"] body[data-phase="running"] .phone { filter: drop-shadow(0 28px 26px rgba(39,41,31,.3)); }
html[data-theme="day"] .phone-caption { color: #5f6759; }
html[data-theme="day"] .maker-open, html[data-theme="day"] .phone-caption span { color: #466d37; }
html[data-theme="day"] .maker-open:hover { color: #263b29; }
html[data-theme="day"] .score-panel { border-left-color: #bec5b5; }
html[data-theme="day"] .panel-line, html[data-theme="day"] .score-block,
html[data-theme="day"] .best-row, html[data-theme="day"] .leaderboard,
html[data-theme="day"] .leaderboard-list li { border-color: #bec5b5; }
html[data-theme="day"] .panel-line { background: #bec5b5; }
html[data-theme="day"] .score-value, html[data-theme="day"] .score-value.t-digit-group,
html[data-theme="day"] .leaderboard-list .points { color: #527b42; }
html[data-theme="day"] .best-row, html[data-theme="day"] .leaderboard-preview { color: #5b6256; }
html[data-theme="day"] .best-row strong, html[data-theme="day"] .result h2,
html[data-theme="day"] .leaderboard-summary strong { color: #252920; }
html[data-theme="day"] .leaderboard-kicker, html[data-theme="day"] .room-code,
html[data-theme="day"] .board-chevron, html[data-theme="day"] .result p,
html[data-theme="day"] .score-form label { color: #5a6254; }
html[data-theme="day"] .board-emblem, html[data-theme="day"] .player-country-badge,
html[data-theme="day"] .challenge-banner { border-color: #c1c8b8; background: #f9f8ef; color: #263b29; }
html[data-theme="day"] .board-emblem { color: #527b42; }
html[data-theme="day"] .board-chevron:hover, html[data-theme="day"] .text-button { color: #263b29; }
html[data-theme="day"] .invite-button, html[data-theme="day"] .share-grid button,
html[data-theme="day"] .share-grid a, html[data-theme="day"] .score-form input,
html[data-theme="day"] .country-control { border-color: #bdc5b5; background: #f9f8ef; color: #252920; }
html[data-theme="day"] .invite-button:hover, html[data-theme="day"] .share-grid button:hover,
html[data-theme="day"] .share-grid a:hover { background: #eef1e6; }
html[data-theme="day"] #player-country option { background: #f9f8ef; }
html[data-theme="day"] .settings-panel, html[data-theme="day"] .maker-dialog { border-color: #b9c0b0; background: #f9f8ef; color: #252920; box-shadow: 0 20px 50px rgba(35,39,30,.18); }
html[data-theme="day"] .settings-head h2, html[data-theme="day"] .maker-dialog h2,
html[data-theme="day"] .maker-dialog-body > p.maker-message { color: #252920; }
html[data-theme="day"] .setting-group, html[data-theme="day"] .maker-dialog-top { border-color: #d5d9cb; }
html[data-theme="day"] .setting-group legend, html[data-theme="day"] .select-label,
html[data-theme="day"] .toggle-row, html[data-theme="day"] .sound-setting,
html[data-theme="day"] .maker-dialog-kicker, html[data-theme="day"] .maker-dialog-body > p:not(.maker-overline) { color: #5b6256; }
html[data-theme="day"] .surface-option, html[data-theme="day"] #speed-select,
html[data-theme="day"] .sound-setting-button, html[data-theme="day"] .maker-dialog-top button,
html[data-theme="day"] .maker-contact a { border-color: #bdc5b5; background: #f2f3e9; color: #252920; }
html[data-theme="day"] .surface-option:hover, html[data-theme="day"] .sound-setting-button:hover,
html[data-theme="day"] .maker-contact a:hover { border-color: #8c9b83; background: #e9eddf; }
html[data-theme="day"] .surface-option.selected { border-color: #527b42; color: #263b29; }
html[data-theme="day"] .sound-setting-button span, html[data-theme="day"] .maker-overline,
html[data-theme="day"] .maker-dialog h2 span { color: #527b42; }
html[data-theme="day"] .maker-contact .maker-email { border-color: #263b29; background: #263b29; color: #fffef8; }
html[data-theme="day"] .maker-contact .maker-email:hover { background: #39533b; }
html[data-theme="day"] .site-grain { opacity: .018; mix-blend-mode: multiply; }

@media (max-width: 620px) {
  .theme-toggle { width: 42px; padding: 0; }
  .theme-toggle #theme-label { display: none; }
  .intro h1.hero-logo { width: min(100%, 320px); }
  .music-player { width: min(100%, 370px); }
  html[data-theme="day"] .score-panel { border-top-color: #bec5b5; }
}
@media (max-width: 385px) {
  .header-actions { gap: 5px; }
  .theme-toggle { width: 40px; }
  .intro h1.hero-logo { width: min(100%, 292px); }
}
@media (prefers-reduced-motion: reduce) {
  .intro h1.hero-logo { animation: none !important; }
}