html[data-theme="light"]{color-scheme:light;--color-bg:#f4f5f7;--color-surface:#fff;--color-surface-raised:#eceff2;--color-surface-hover:#e3e7eb;--color-border:#c8ced5;--color-border-strong:#9ca6b1;--color-text:#1b1f24;--color-text-secondary:#46515d;--color-text-muted:#586574;--color-accent:#a84f00;--color-accent-hover:#873f00;--color-accent-deep:#7a3800;--color-text-on-accent:#fff;--color-focus:#007d8f;--color-success:#257a43;--color-danger:#a42f25;--bg:var(--color-bg);--panel:var(--color-surface);--panel-2:var(--color-surface-raised);--line:var(--color-border);--muted:var(--color-text-muted);--text:var(--color-text);--orange:var(--color-accent);--orange-d:var(--color-accent-deep);--teal:var(--color-focus);--shadow:0 20px 55px rgba(22,30,40,.12);--shadow-hover:0 14px 34px rgba(22,30,40,.16)}
.site-controls{display:flex;gap:7px;margin-left:10px}.site-controls select,.theme-toggle{height:36px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:5px;padding:0 9px;font-size:12px}.theme-toggle{width:38px;cursor:pointer;font-size:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.inline-action{margin-top:18px}.overview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:35px}.overview-stats div{background:var(--panel);border:1px solid var(--line);padding:25px;border-radius:6px;display:flex;align-items:baseline;gap:12px}.overview-stats strong{font:500 34px "DM Mono";color:var(--orange)}.overview-stats span{color:var(--muted);font-size:14px}.overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.overview-card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:24px}.overview-card header{display:flex;justify-content:space-between}.overview-card .state{font:500 10px "DM Mono";color:var(--teal)}.overview-card h3{font-size:20px;margin:25px 0 7px}.overview-card p{color:var(--muted);font-size:14px}.overview-card a{color:var(--orange);font-size:13px}.custom-section{padding-top:75px}.custom-content{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.custom-card{background:var(--panel);border:1px solid var(--line);padding:20px;border-radius:6px}.custom-card h3{font-size:17px;margin:8px 0}.custom-card p{color:var(--muted);font-size:13px}.custom-card small{font-family:"DM Mono";color:var(--orange)}.custom-card a{display:inline-block;margin-top:10px;color:var(--orange);font-size:13px}.empty-state{grid-column:1/-1;border:1px dashed var(--line);padding:35px;text-align:center;color:var(--muted)}.manager-layout{display:grid;grid-template-columns:minmax(280px,430px) 1fr;gap:25px;margin-top:35px}.manager-form,.manager-list{background:var(--panel);border:1px solid var(--line);padding:28px;border-radius:7px}.manager-form label{display:block;margin-bottom:17px}.manager-form label span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}.manager-form input,.manager-form textarea,.manager-form select{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:11px}.manager-form output{display:block;min-height:24px;margin-top:12px;color:var(--teal);font-size:13px}.manager-list h2{font-size:22px}.manager-row{border-top:1px solid var(--line);padding:14px 0;display:grid;grid-template-columns:1fr auto;gap:12px}.manager-row small{color:var(--orange)}.manager-row strong{display:block}.manager-row button{background:none;border:1px solid #8f5148;color:#d77d70;border-radius:4px;cursor:pointer;padding:5px 9px}
html[data-theme="light"] .topbar{background:rgba(243,241,236,.92)}html[data-theme="light"] .mobile-nav{background:#f8f6f1}html[data-theme="light"] .hero-instrument{background:linear-gradient(145deg,#fff,#e7e2d9)}html[data-theme="light"] .waveform{background:#e9e5dd}html[data-theme="light"] .signal-strip{background:#e9e5dd}html[data-theme="light"] .btn.secondary,html[data-theme="light"] .chord-card,html[data-theme="light"] .tool-card,html[data-theme="light"] .news-card,html[data-theme="light"] .control-panel,html[data-theme="light"] .result-panel,html[data-theme="light"] .quiz-stage{color:var(--text)}html[data-theme="light"] .root-grid button,html[data-theme="light"] .type-list button,html[data-theme="light"] .quiz-tabs button,html[data-theme="light"] .filters button,html[data-theme="light"] .answers button{background:#f0ede6;color:#333;border-color:#d0cbc1}html[data-theme="light"] .tool-demo select,html[data-theme="light"] .tool-demo input{background:#f3f1ec;color:#222}
@media(max-width:900px){.site-controls{margin-left:auto}.overview-grid,.custom-content{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.site-controls select{width:70px}.overview-stats,.overview-grid,.custom-content,.manager-layout{grid-template-columns:1fr}.overview-stats div{padding:18px}.manager-form,.manager-list{padding:20px}}

.footer-social{display:flex;align-items:center;gap:8px}.footer-social a{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 11px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:5px;color:var(--color-text-secondary);font-size:12px;font-weight:700;transition:transform var(--transition-ui),background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.footer-social a span{display:grid;place-items:center;width:20px;height:20px;border-radius:4px;background:var(--color-surface-raised);color:var(--color-accent);font:600 9px "DM Mono",monospace}.footer-social a:hover{transform:translateY(-2px);background:var(--color-surface-raised);border-color:var(--color-border-strong);color:var(--color-accent)}.footer-social a:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}@media(max-width:620px){.footer-social{flex-wrap:wrap}}
/* Music Labs color system — shared by the dark default and optional light theme. */
body{--color-accent-soft:rgba(255,181,71,.2)}html[data-theme="light"] body{--color-accent-soft:rgba(168,79,0,.16)}
body{background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased}h1,h2,h3,h4,strong{color:var(--color-text)}p{color:inherit}::selection{background:var(--color-accent);color:var(--color-text-on-accent)}
a,button,input,select,textarea{transition:color var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-ui),transform var(--transition-ui)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.topbar{background:rgba(16,17,19,.92);border-color:var(--color-border)}.desktop-nav a{color:var(--color-text-secondary)}.desktop-nav a:hover,.desktop-nav a.active{color:var(--color-text);border-color:var(--color-accent)}.menu-btn span{background:var(--color-text)}
.hero-instrument{background:linear-gradient(145deg,var(--color-surface-raised),var(--color-surface));border-color:var(--color-border);box-shadow:var(--shadow)}.waveform,.signal-strip{background:#121417;border-color:var(--color-border)}.device-head,.lead,.text-link,.section-head p:not(.index),.quiz-banner p:not(.index),.hint,.scale-mood{color:var(--color-text-secondary)}.eyebrow,.index,.tag,.text-link span,.section-head>a,.tool-icon{color:var(--color-accent)}
.btn,.play-btn,.root-grid button,.type-list button,.quiz-tabs button,.filters button,.answers button,.theme-toggle,.site-controls select{border-color:var(--color-border);color:var(--color-text)}.btn.primary,.play-btn,.root-grid button.active,.type-list button.active,.quiz-tabs button.active,.filters button.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-on-accent)}.btn.primary:hover,.play-btn:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,181,71,.2)}.btn.secondary,.root-grid button,.type-list button,.quiz-tabs button,.filters button,.answers button,.theme-toggle,.site-controls select{background:var(--color-surface-raised)}.btn.secondary:hover,.root-grid button:hover:not(.active),.type-list button:hover:not(.active),.quiz-tabs button:hover:not(.active),.filters button:hover:not(.active),.answers button:hover,.theme-toggle:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong)}
.chord-card,.tool-card,.news-card,.control-panel,.result-panel,.quiz-stage,.quiz-banner,.overview-card,.custom-card,.overview-stats div,.manager-form,.manager-list{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text);box-shadow:0 1px 0 rgba(255,255,255,.025)}.chord-card:hover,.tool-card:hover,.news-card:hover,.overview-card:hover,.custom-card:hover{background:var(--color-surface-raised);border-color:var(--color-border-strong);transform:translateY(-3px);box-shadow:var(--shadow-hover)}.chord-card small,.tool-card p,.news-body p,.news-body time,.overview-card p,.custom-card p,.manager-form label span,.empty-state,footer{color:var(--color-text-muted)}.scale-row:hover{background:var(--color-surface)}.scale-row span{color:var(--color-text-secondary)}
.formula span{border-color:var(--color-border);color:var(--color-text-secondary);background:var(--color-surface-raised)}.tool-demo select,.tool-demo input,.manager-form input,.manager-form textarea,.manager-form select{background:var(--color-bg);border-color:var(--color-border);color:var(--color-text)}.tool-demo select:hover,.tool-demo input:hover,.manager-form input:hover,.manager-form textarea:hover,.manager-form select:hover{border-color:var(--color-border-strong)}.answers button.correct{border-color:var(--color-success);background:#17241c}.answers button.wrong{border-color:var(--color-danger);background:#2a1918}.manager-row button{border-color:var(--color-danger);color:var(--color-danger)}
html[data-theme="light"] .topbar{background:rgba(244,245,247,.94)}html[data-theme="light"] .waveform,html[data-theme="light"] .signal-strip{background:var(--color-surface-raised)}html[data-theme="light"] .answers button.correct{background:#e3f3e8}html[data-theme="light"] .answers button.wrong{background:#f9e7e5}html[data-theme="light"] .btn.primary:hover,html[data-theme="light"] .play-btn:hover{box-shadow:0 8px 22px rgba(168,79,0,.2)}
.filters a{display:inline-flex;align-items:center;padding:9px 15px;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font-size:14px;transition:color var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-ui)}.filters a:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);transform:translateY(-1px)}.filters a.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-on-accent);font-weight:700}.filters a:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.feedback-layout{max-width:760px;margin:40px auto 0}.feedback-form{width:100%}.feedback-form textarea{resize:vertical;min-height:170px}.feedback-note{color:var(--color-text-muted);font-size:13px;margin:0 0 20px}.feedback-success{background:var(--color-surface);border:1px solid var(--color-success);border-radius:7px;padding:34px}.feedback-success strong{font-size:22px}.feedback-success p{color:var(--color-text-secondary);margin:8px 0 0}.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.footer-links{display:flex;align-items:center;gap:24px}.footer-feedback{color:var(--color-text-secondary);font-size:13px}.footer-feedback:hover{color:var(--color-accent)}.footer-email{display:flex;flex-direction:column;gap:3px;color:var(--color-text-muted);font-size:11px}.footer-email strong{color:var(--color-accent);font-family:"DM Mono",monospace;font-size:12px;font-weight:500;border-bottom:1px solid transparent}.footer-email:hover strong{border-color:var(--color-accent)}@media(max-width:820px){footer .wrap{align-items:flex-start}.footer-links{order:3;width:100%;justify-content:space-between}}@media(max-width:620px){.footer-links{align-items:flex-start;flex-direction:column;gap:14px}.footer-email strong{overflow-wrap:anywhere}}
.tool-open-link{display:inline-block;margin-top:18px;color:var(--color-accent);font-size:13px;font-weight:700}.tool-workspace{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;margin-top:34px}.tool-input-panel,.tool-result-panel,.delay-grid{background:var(--color-surface);border:1px solid var(--color-border);border-radius:9px;padding:30px}.tool-input-panel{display:flex;flex-direction:column;align-items:stretch}.tool-input-panel label{margin:0 0 10px;color:var(--color-text-secondary);font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.tool-main-input{width:100%;min-height:58px;padding:0 17px;background:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:6px;color:var(--color-text);font:600 18px "DM Mono",monospace;outline:none}.tool-main-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}.tool-hint{margin:9px 0 28px;color:var(--color-text-muted);font-size:13px;line-height:1.6}.stepper{display:grid;grid-template-columns:56px 1fr 56px;gap:8px}.stepper button,.stepper select,.copy-result{min-height:48px;background:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:6px;color:var(--color-text);font:600 15px "DM Mono",monospace;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}.stepper button:hover,.copy-result:hover{border-color:var(--color-accent);background:var(--color-surface-raised)}.stepper button:active,.copy-result:active{transform:translateY(2px)}.stepper select{padding:0 14px;text-align:center}.tool-result-panel{display:flex;min-height:260px;flex-direction:column;justify-content:center}.tool-result-panel small{color:var(--color-text-muted);font-family:"DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase}.tool-result-panel output{display:block;margin:18px 0 28px;color:var(--color-accent);font:700 clamp(28px,4vw,48px)/1.25 "Manrope",sans-serif;overflow-wrap:anywhere}.copy-result{align-self:flex-start;padding:0 18px}.tool-status{min-height:20px;margin:12px 0 0;color:var(--color-text-secondary);font-size:13px}.bpm-workspace{grid-template-columns:minmax(240px,.55fr) minmax(0,1.45fr)}.bpm-input-row{position:relative}.bpm-input-row span{position:absolute;right:17px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);font:500 12px "DM Mono",monospace}.bpm-input-row input{padding-right:60px}.delay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.delay-value{padding:20px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:6px}.delay-value span{display:block;color:var(--color-text-muted);font-size:12px}.delay-value strong{display:block;margin-top:8px;color:var(--color-text);font:600 22px "DM Mono",monospace}.delay-value strong b{color:var(--color-accent);font-size:11px;font-weight:500}@media(max-width:820px){.tool-workspace,.bpm-workspace{grid-template-columns:1fr}.delay-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.tool-input-panel,.tool-result-panel,.delay-grid{padding:20px}.delay-grid{grid-template-columns:1fr}.tool-result-panel{min-height:220px}}