.hero-navigation{min-width:0;display:flex;flex-direction:column;gap:20px;align-self:center}.hero-navigation .classic-nav{align-self:stretch}
.theme-picker{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);padding:10px;border-radius:12px;width:fit-content;max-width:100%;background:var(--panel)}
.theme-picker .theme-caption{flex-basis:100%;font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.theme-picker button{min-height:40px;padding:8px 10px;font-size:12px;background:transparent;color:var(--white);border-color:transparent}
.theme-picker button[aria-pressed=true]{background:#254440;border-color:#3b9c92;color:#bff5e9}
html[data-theme=light]{color-scheme:light;--bg:#e7ddcc;--panel:#f1e8da;--line:#c6b8a3;--accent:#007b73;--muted:#475e6d;--white:#192d3a;scrollbar-color:#93856f #e2d6c3}
html[data-theme=light] .studioheader{background:#e7ddccf7}
.transport{background:#233846;border-color:#587888;box-shadow:0 3px 12px #0002;color:#f1f2f5}
.transport button:hover{background:#344e5e}
html[data-theme=light] .transport{background:#d5e2e5;border-color:#879fa7;box-shadow:0 3px 12px #3a4c5912;color:#192d3a}
html[data-theme=light] .transport button:hover{background:#bdd1d6}
html[data-theme=light] .transport .seekwrap input{accent-color:#34646b}
html[data-theme=light] button{background:#e5dbc9;color:#273b42;border-color:#bcae97}
html[data-theme=light] button:hover{background:#dacdb7;border-color:#93856f}
html[data-theme=light] button.active,html[data-theme=light] button[aria-pressed=true],html[data-theme=light] .classic-nav .selected{background:#d3eeea;color:#075d55;border-color:#378f83}
html[data-theme=light] .classic-nav button,html[data-theme=light] .transport button,html[data-theme=light] .resetrow button{background:transparent}
html[data-theme=light] .transport .playbutton{background:#183f4b;color:#fff}
html[data-theme=light] .transport button.active{background:#f5e8b8;color:#614700}
html[data-theme=light] .theme-picker button[aria-pressed=true]{background:#d3eeea;color:#075d55;border-color:#378f83}
html[data-theme=light] #notice{background:#e1f0ef;color:#244e52;border-color:#43877f}
html[data-theme=light] #notice.error{background:#fbe2e6;color:#861e34;border-color:#b4445e}
html[data-theme=light] input:not([type=range]):not([type=checkbox]):not([type=file]),html[data-theme=light] select,html[data-theme=light] textarea{background:#f5ecde;color:#192d3a;border-color:#b3a28a}
html[data-theme=light] .upload,html[data-theme=light] .primary{background:#d3eeea;color:#075d55;border-color:#378f83}
html[data-theme=light] .trackevidence,html[data-theme=light] .trackvolume output,html[data-theme=light] .panrow,html[data-theme=light] .panrow button,html[data-theme=light] #connection,html[data-theme=light] .dialcaption,html[data-theme=light] .dialwrap #speedValue{color:#4b6471}
html[data-theme=light] .trackstate{color:#08685d}
html[data-theme=light] .mutedtrack .trackidentity strong,html[data-theme=light] .mutedtrack .trackidentity strong::before,html[data-theme=light] .mutedtrack .trackstate{color:#a51b38}
html[data-theme=light] .tracktop button:first-of-type[aria-pressed=true]{background:#f9dce3;color:#8e1933;border-color:#bd566e}
html[data-theme=light] .removeSong{color:#a51b38}
html[data-theme=light] .speeddial{background:radial-gradient(circle at 40% 30%,#f3e9d9,#d4d4c2 75%);border-color:#83aaa5;box-shadow:0 5px 18px #233b4320,inset 0 0 0 2px #b1ceca}
html[data-theme=light] .dialmarker:before{background:#007b73}
html[data-theme=light] .reset-speed,html[data-theme=light] #metroShortcut.active{background:#d3eeea;color:#075d55;border-color:#378f83}
html[data-theme=light] .bottomtools span{color:#72530a}
html[data-theme=light] #chordsList .staff-chord{color:#253d4a;background:transparent}
html[data-theme=light] #chordsList .staff-chord strong{color:#00776c}
html[data-theme=light] #chordsList .staff-chord small{color:#526a78}
html[data-theme=light] #chordsList .staff-chord.active{background:#d3eeea;border-color:#378f83}
html[data-theme=light] #chordsList .staff-chord:hover{background:#e5f3f1}
html[data-theme=light] .staff-line{stroke:#607986}
html[data-theme=light] #chordsList{scrollbar-color:#648f94 #e2d6c3}
html[data-theme=light] .timedlist .active{background:#d3eeea;color:#075d55}
html[data-theme=light] .sidepanel{box-shadow:-12px 0 45px #17384625}
html[data-theme=light] #accessPanel{background:#e1eef1}
@media(max-width:800px){.hero-navigation{grid-column:1/-1;grid-row:1;gap:12px}.theme-picker{width:100%;padding:8px;gap:5px}.theme-picker .theme-caption{flex-basis:auto;flex:1;letter-spacing:.02em}.theme-picker button{padding:7px 9px;font-size:11px}}
.theme-picker{background:#182e48;border-color:#618abc;box-shadow:0 3px 14px #07162940}.theme-picker .theme-caption{color:#c7ddfa}.theme-picker button{color:#edf5ff}.theme-picker button[aria-pressed=true]{background:#325782;color:#fff;border-color:#9fc9f8}
.hero .classic-nav button[data-tab=studio]{background:#183e3b;border-color:#438f86;color:#a8f4e7}
.hero .classic-nav button[data-tab=record]{background:#392c52;border-color:#896ba9;color:#ecd7ff}
.hero .classic-nav button[data-tab=help]{background:#483b21;border-color:#a48a4f;color:#ffe6ab}
.hero .classic-nav button.selected{box-shadow:inset 0 -3px currentColor;font-weight:750}
.hero .classic-nav button:hover{filter:brightness(1.18)}
html[data-theme=light] .theme-picker{background:#dfedff;border-color:#6f9cca;box-shadow:0 3px 12px #16365512}
html[data-theme=light] .theme-picker .theme-caption{color:#294e77}
html[data-theme=light] .theme-picker button{color:#193c67;background:transparent}
html[data-theme=light] .theme-picker button[aria-pressed=true]{background:#285c90;color:#fff;border-color:#285c90}
html[data-theme=light] .hero .classic-nav button[data-tab=studio]{background:#d4efe9;border-color:#438f86;color:#125e52}
html[data-theme=light] .hero .classic-nav button[data-tab=record]{background:#eadff5;border-color:#9b78bb;color:#603b81}
html[data-theme=light] .hero .classic-nav button[data-tab=help]{background:#fff0c9;border-color:#b99a54;color:#705013}
.theme-picker{width:fit-content;padding:6px 8px;gap:5px;border-radius:22px;flex-wrap:nowrap}
.theme-picker .theme-caption{flex:none;font-size:9px;letter-spacing:.02em;margin-right:3px}
.theme-picker button{min-height:32px;padding:5px 9px;font-size:11px;border-radius:999px;white-space:nowrap}
@media(max-width:800px){.theme-picker{width:fit-content;padding:5px 7px;gap:4px}.theme-picker .theme-caption{flex:none;font-size:9px}.theme-picker button{min-height:32px;padding:5px 8px;font-size:11px}}
/* Compact sun/moon controls: labels remain accessible and appear on hover. */
.hero-navigation .theme-picker,html[data-theme=light] .hero-navigation .theme-picker{padding:0;gap:12px;border:0;background:transparent;box-shadow:none;border-radius:0;width:fit-content}
.theme-picker .theme-caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-navigation .theme-picker button{position:relative;display:grid;place-items:center;width:26px;height:26px;min-height:26px;min-width:26px;padding:0;font-size:15px;line-height:1;border-radius:50%;border:1px solid #7795ac}
.theme-picker button::before{content:'';position:absolute;inset:-7px;border-radius:50%}
.theme-picker button::after{content:attr(aria-label);position:absolute;left:0;top:34px;z-index:10;background:#172c3c;color:#fff;border:1px solid #829dad;border-radius:5px;padding:5px 8px;font-size:11px;line-height:1.4;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none}
.theme-picker button:focus-visible::after{opacity:1;visibility:visible}
@media(hover:hover){.theme-picker button:hover::after{opacity:1;visibility:visible}}
.hero-navigation .theme-picker button[aria-pressed=true]{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent)}