:root {
  color-scheme: light;
  --panel: #fdfcf8;
  --panel-line: #dedbd2;
  --theme-accent: #846a99;
  --theme-selected: #eee7f2;
}
.theme-picker { position: relative; }
.theme-picker summary { list-style: none; cursor: pointer; }
.theme-picker summary::-webkit-details-marker { display: none; }
.theme-picker summary:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 4px; }
.theme-picker[open] summary { background: var(--theme-selected); }
.theme-panel {
  position: absolute; top: calc(100% + 12px); right: 0; width: 250px;
  padding: 18px; border: 1px solid var(--panel-line); border-radius: 14px;
  background: var(--panel); color: var(--ink); box-shadow: 0 12px 38px #16131e24;
}
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 12px; }
.theme-options button { display: grid; justify-items: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; padding: 12px 4px; font-size: 11px; }
.theme-options button svg { width: 18px; height: 18px; }
.theme-options button:hover { background: var(--theme-selected); }
.theme-options button[aria-pressed="true"] { background: var(--theme-selected); border-color: var(--theme-accent); }
.theme-panel p { margin: 14px 0 0; font-size: 10px; line-height: 1.6; color: var(--muted); }
.export-paper { display: flex; gap: 10px; border: 0; padding: 0; margin: 18px 0 0; }
.export-paper legend { font-size: 10px; color: #8c8378; margin-bottom: 10px; }
.export-paper label { position: relative; flex: 1; cursor: pointer; }
.export-paper input { position: absolute; opacity: 0; }
.export-paper label>span { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--panel-line); border-radius: 9px; font-size: 11px; }
.export-paper input:checked+span { border-color: var(--theme-accent); background: var(--theme-selected); }
.export-paper input:focus-visible+span { outline: 2px solid var(--theme-accent); outline-offset: 3px; }
.export-paper:disabled { opacity: .65; }
.paper-sample { display: block; width: 19px; height: 19px; border-radius: 50%; border: 1px solid #8f869477; }
.paper-sample.light { background: #fbfaf7; }
.paper-sample.dusk { background: #25262b; }

:root[data-theme="dusk"] {
  color-scheme: dark; color: #e5dfe6; background: #25262b;
  --paper: #25262b; --ink: #e5dfe6; --muted: #b6afbc; --line: #514d58;
  --panel: #2d2d34; --panel-line: #53505b; --theme-accent: #b9a0ca; --theme-selected: #433a4c;
}
:root[data-theme="dusk"] :is(button,a,input,summary):focus-visible { outline-color: #c5acd8; }
:root[data-theme="dusk"] .palette.selected { background: #ffffff08; border-color: #68606f; }
:root[data-theme="dusk"] :is(.palette:hover,.icon-button:hover,.icon-button[aria-expanded="true"]) { background: #ffffff0d; }
:root[data-theme="dusk"] .horizon-play { background: #25262bf5; border-color: #aaa3b0; box-shadow: 0 0 0 5px #25262b2e; }
:root[data-theme="dusk"] .horizon-play:hover { background: #34323b; }
:root[data-theme="dusk"] .player-card { background: #2d2d348c; border-color: #53505b; box-shadow: 0 5px 30px #15131c18, 0 1px 0 #ffffff06 inset; }
:root[data-theme="dusk"] .play-button { background: #bba8c7; color: #25262b; }
:root[data-theme="dusk"] .play-button:hover { background: #cebbd9; }
:root[data-theme="dusk"] #source-tag { border-color: #68606f; color: #c7becb; }
:root[data-theme="dusk"] :is(#track-subtitle,.progress-row,.file-hint,.footer,.footer>span:first-child,.quiet-button,.eyebrow,.setting output,.setting small,.group-heading>span,.shortcuts,.drop-zone p,.render-error p,.dialog-description,.source-choice-copy small,.example-meta,.example-number,.examples-footnote,#loading-track,.loading-detail,#export-description,.export-formats legend,.export-paper legend,.format-label small,.export-note,#export-duration,#export-detail) { color: var(--muted); }
:root[data-theme="dusk"] :is(.examples-button,.export-button,.source-button:hover,.source-button.active,.quiet-button:hover,.example-arrow,.source-choice-arrow,.drop-zone>svg,.export-track svg) { color: #c8acd9; }
:root[data-theme="dusk"] .settings-panel { background: #2d2d34f5; border-color: var(--panel-line); box-shadow: 0 15px 65px #11101944; }
:root[data-theme="dusk"] .setting-group { border-color: var(--panel-line); }
:root[data-theme="dusk"] kbd { background: #44404b; }
:root[data-theme="dusk"] :is(.paper-dialog,.export-dialog) { background: var(--panel); border-color: var(--panel-line); box-shadow: 0 22px 90px #11101966; }
:root[data-theme="dusk"] :is(.paper-dialog,.export-dialog)::backdrop { background: #14131bb3; }
:root[data-theme="dusk"] :is(.source-choice,.example-song,.format-card) { background: #ffffff03; border-color: var(--panel-line); }
:root[data-theme="dusk"] :is(.source-choice:hover,.example-song:hover,.loading-cancel:hover) { background: var(--theme-selected); border-color: var(--theme-accent); color: var(--ink); }
:root[data-theme="dusk"] .example-art>svg { color: #e3d5e9; }
:root[data-theme="dusk"] .wash-bloom { mix-blend-mode: normal; }
:root[data-theme="dusk"] .wash-horizon { stroke: #aaa3b0; }
:root[data-theme="dusk"] .wash-ring { fill: var(--panel); stroke: #aaa3b0; }
:root[data-theme="dusk"] :is(.loading-status,.export-status,.export-specs span) { color: #cfc1d5; }
:root[data-theme="dusk"] :is(.loading-cancel,.export-specs span,.export-track) { border-color: var(--panel-line); }
:root[data-theme="dusk"] .loading-cancel { color: var(--muted); }
:root[data-theme="dusk"] .format-card svg { color: #c4b5cd; }
:root[data-theme="dusk"] .format-card svg rect { stroke: #a292af; }
:root[data-theme="dusk"] .format-card svg circle { fill: var(--panel); }
:root[data-theme="dusk"] .export-format input:checked+.format-card { border-color: var(--theme-accent); background: var(--theme-selected); }
:root[data-theme="dusk"] .export-format input:checked+.format-card svg { color: #d4bcdf; }
:root[data-theme="dusk"] .export-status.export-error { color: #e7a6a0; }
:root[data-theme="dusk"] .primary-button { background: #bba8c7; border-color: #bba8c7; color: #25262b; }
:root[data-theme="dusk"] .primary-button:hover { background: #cebbd9; }
:root[data-theme="dusk"] .drop-zone { background: #25262bed; border-color: #9e8bab; }
:root[data-theme="dusk"] .toast { background: #403849; color: #e5dfe6; }
:root[data-theme="dusk"] input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right,#bba8c7 var(--fill),#5c5663 var(--fill)); }
:root[data-theme="dusk"] input[type="range"]::-moz-range-track { background: #5c5663; }
:root[data-theme="dusk"] input[type="range"]::-moz-range-progress { background: #bba8c7; }
:root[data-theme="dusk"] input[type="range"]::-webkit-slider-thumb { background: #bba8c7; }
:root[data-theme="dusk"] input[type="range"]::-moz-range-thumb { background: #bba8c7; }
:root[data-theme="dusk"] :is(#export-progress,#loading-progress) { background: #514957; }
:root[data-theme="dusk"] :is(#export-progress,#loading-progress)::-webkit-progress-bar { background: #514957; }
:root[data-theme="dusk"] #loading-progress:indeterminate { background: linear-gradient(90deg,#514957 15%,#a78cad 45%,#8aa8b3 55%,#514957 85%); background-size: 250% 100%; }
:root[data-theme="dusk"] #loading-progress:indeterminate::-webkit-progress-bar { background: transparent; }
@media(max-width:540px) {
  .header-actions { max-width: 95px; gap: 0; }
  .theme-picker .icon-button { width: 30px; height: 30px; }
  .theme-picker .icon-button svg { width: 16px; height: 16px; }
  .theme-panel { position: fixed; top: 103px; right: 17px; width: min(250px,calc(100% - 34px)); }
}