:root{--appearance-panel:#1c2816;--appearance-ink:#eef4e6;--appearance-muted:#b6c5a8;--appearance-line:#6f8755;--appearance-accent:#d7f48c}
.theme-picker{position:relative;color:var(--appearance-ink);flex-shrink:0;z-index:100;font:12px/1.5 'DM Sans',sans-serif}
.theme-picker summary{position:relative;display:flex;align-items:center;gap:5px;min-height:26px;padding:4px 7px;font-size:10px;line-height:1.2;background:var(--appearance-panel);border:1px solid var(--appearance-line);border-radius:4px;list-style:none;cursor:pointer;white-space:nowrap}
.theme-picker summary::-webkit-details-marker{display:none}.theme-picker summary>span:first-child{font-size:12px;line-height:1}.theme-picker .theme-current{display:none}.theme-picker[open] summary{outline:2px solid var(--appearance-accent);outline-offset:2px}
.theme-options{position:absolute;top:calc(100% + 10px);right:0;width:320px;max-width:calc(100vw - 40px);margin:0;padding:18px;background:var(--appearance-panel);color:var(--appearance-ink);border:1px solid var(--appearance-line);border-radius:10px;box-shadow:0 12px 35px #0008}
.theme-options legend{float:left;width:100%;font-size:13px;font-weight:700;margin:0 0 13px;padding:0;color:var(--appearance-ink)}
.theme-options label{clear:both;display:flex;align-items:flex-start;gap:12px;padding:12px 9px;border:1px solid transparent;border-radius:5px;cursor:pointer;color:var(--appearance-ink);font-size:13px}.theme-options label:has(input:checked){border-color:var(--appearance-line)}.theme-options input{flex-shrink:0;margin:4px 0 0;width:17px;height:17px;accent-color:var(--appearance-accent)}.theme-options strong{display:block;font-size:13px;color:var(--appearance-ink)}.theme-options small{display:block;font-size:11px;line-height:1.7;color:var(--appearance-muted);margin-top:4px}.theme-options p{font-size:10px!important;line-height:1.8!important;color:var(--appearance-muted)!important;margin:13px 9px 0!important}.theme-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.theme-picker :is(summary,input):focus-visible{outline:3px solid var(--appearance-accent);outline-offset:4px}
html[data-theme=readable]{color-scheme:light;--appearance-panel:#f4f5f1;--appearance-ink:#1b2a20;--appearance-muted:#43533b;--appearance-line:#687a57;--appearance-accent:#245b34}
html[data-theme=readable] body{background:#e8e9e4;color:#1b2a20;font-size:16px;line-height:1.65}
html[data-theme=readable] :is(.landscape,.theory-landscape,.articles-landscape,.membership-landscape){opacity:.14}
html[data-theme=readable] .intro-art{opacity:.5}
html[data-theme=readable] :is(.reading-body p,.reading-body li,.reading-body td,.reading-body th){font-size:17px;line-height:1.9}
html[data-theme=readable] :is(.reading-intro,.hero-copy,.hero .quote-explanation){font-size:16px;line-height:1.9}
html[data-theme=readable] :is(.lesson p,.course-lesson p,.card-copy p,.builder-help,.piano-help,.voicing-note){font-size:15px;line-height:1.85}
html[data-theme=readable] :is(.reading-meta,.reading-body .eyebrow,.section-label,.aside-label,.card-meta){color:#43533b}
html[data-theme=readable] :is(input,textarea,select){color-scheme:light}
html[data-theme=readable] input::placeholder,html[data-theme=readable] textarea::placeholder{color:#526348;opacity:1}
html[data-theme=contrast]{color-scheme:light;--appearance-panel:#fff;--appearance-ink:#000;--appearance-muted:#000;--appearance-line:#000;--appearance-accent:#000}
html[data-theme=contrast] body{background:#fff;color:#000;font-family:Arial,sans-serif;font-size:16px;line-height:1.75}
html[data-theme=contrast] body *{background-image:none!important;box-shadow:none!important;text-shadow:none!important;transition:none!important;animation:none!important}
html[data-theme=contrast] :is(.landscape,.theory-landscape,.articles-landscape,.membership-landscape,.intro-art,.hero-caption){display:none!important}
html[data-theme=contrast] :is(h1,h2,h3,h4,em){font-family:Arial,sans-serif;font-style:normal;font-weight:700;letter-spacing:normal}
html[data-theme=contrast] :is(.reading-body p,.reading-body li,.reading-body td,.reading-body th){font-size:18px;line-height:1.9}
html[data-theme=contrast] :is(.reading-intro,.hero-copy,.hero .quote-explanation,.lesson p,.course-lesson p){font-size:16px;line-height:1.85}
html[data-theme=contrast] :is(.section-label,.eyebrow,.aside-label,.card-meta,.reading-meta,.draft,.hero-note,.quote-credit){color:#000}
html[data-theme=contrast] :is(input,textarea,select){background:#fff;color:#000;border-color:#000;color-scheme:light}
html[data-theme=contrast] :is(input,textarea)::placeholder{color:#333;opacity:1}
html[data-theme=contrast] :is(svg,.card-art img,.reading-illustration img){filter:grayscale(1) contrast(1.15)}
html[data-theme=contrast] :is(a,summary){text-decoration:underline;text-underline-offset:4px}
html[data-theme=contrast] .site-header .site-nav>a[aria-current=page]{outline:2px solid #000;outline-offset:3px}
html[data-theme=contrast] :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #000!important;outline-offset:4px}
html[data-theme=contrast] :is(.button,.plan-action,.play,.listen-button){background:#000;color:#fff;border:2px solid #000}
html[data-theme=contrast] :is(.button,.plan-action,.play,.listen-button) :is(span,em){color:inherit}
html[data-theme=contrast] .theme-picker{font-family:Arial,sans-serif}
@media(max-width:1050px){.site-header .site-nav{order:3}.site-header .theme-picker{order:2;margin-left:auto}}
@media(max-width:700px){.theme-picker summary{font-size:10px;min-height:26px}.theme-options{width:300px}.theme-options label{padding:13px 8px}.theme-options strong{font-size:14px}.theme-options small{font-size:12px}html[data-theme=readable] .hero:has(.rameau-quote),html[data-theme=contrast] .hero:has(.rameau-quote){min-height:660px}}
@media(forced-colors:active){.theme-picker summary,.theme-options,.theme-options label:has(input:checked){border:1px solid ButtonText}.theme-options input{forced-color-adjust:auto}}

html[data-theme=contrast] :is(p,li,label,select,input,textarea,button,summary,small,output){font-size:14px}
html[data-theme=contrast] :is(.section-label,.eyebrow,.aside-label,.card-meta,.reading-meta,.draft,.hero-note,.quote-credit){font-size:13px}
html[data-theme=contrast] .site-header .site-nav>a{min-height:44px}
html[data-theme=contrast] :is(.fret-footer,.tiny){font-size:12px}
html[data-theme=contrast] #bpm{font-size:28px}
html[data-theme=readable] .chord-type-row,html[data-theme=contrast] .chord-type-row{flex-direction:column;align-items:stretch;gap:10px}
html[data-theme=readable] .chord-type-row label,html[data-theme=contrast] .chord-type-row label{min-width:0;width:100%}
html[data-theme=readable] .chord-type-row p,html[data-theme=contrast] .chord-type-row p{font-size:14px;line-height:1.8;margin:0}
html[data-theme=contrast] .section-label{flex-wrap:wrap;line-height:1.7}
html[data-theme=contrast] .theme-options :is(strong,small){font-size:14px}
html[data-theme=contrast] .theme-options p{font-size:13px!important}

.theme-picker summary::before{content:"";position:absolute;inset:-9px 0}
html[data-theme=contrast] .theme-picker summary{font-size:12px;min-height:26px}

html[data-theme=readable] .about-landscape{opacity:.12}
html[data-theme=readable] .about-reading p{font-size:17px;line-height:1.9}
html[data-theme=readable] .about-lead{font-size:17px}
html[data-theme=contrast] .about-landscape{display:none}
html[data-theme=contrast] .about-reading p{font-size:18px;line-height:1.9}
html[data-theme=contrast] .about-lead{font-size:17px}

:is(.fret-scroll,.keyboard-wrap):focus-visible{outline:3px solid var(--appearance-accent);outline-offset:4px}

.site-theme-toggle{
  min-width:52px;min-height:44px;padding:0 4px;border:0;background:transparent;
  color:var(--appearance-ink);cursor:pointer;font:600 11px/1 system-ui,sans-serif;
}
.site-theme-toggle::before{
  content:"";display:inline-block;width:7px;height:7px;margin-right:4px;vertical-align:1px;
  border:1px solid currentColor;border-radius:50%;
}
.site-theme-toggle[aria-pressed=true]::before{background:#67c9dd}
.site-header .header-tools.header-tools--site-theme{
  grid-template-columns:48px 108px 48px 48px 60px!important;
}
.site-header .header-tools>.site-theme-toggle{grid-column:5;grid-row:1;order:4}
@media(max-width:390px){
  .site-header .header-tools.header-tools--site-theme{
    grid-template-columns:44px 88px 44px 44px 52px!important;
  }
  .site-header .header-tools.header-tools--site-theme>.language-picker{
    width:88px!important;grid-template-columns:44px 44px!important;
  }
  .site-header .header-tools.header-tools--site-theme :is(.nav-account,.global-search-trigger,.theme-picker>summary){
    width:44px!important;
  }
}
html[data-site-palette=blue][data-theme=original] body,
html[data-site-palette=blue][data-theme=original] .site-header,
html[data-site-palette=blue][data-theme=original] .site-header::before,
html[data-site-palette=blue][data-theme=original] .site-header .header-tools::before,
html[data-site-palette=blue][data-theme=original] .modus-home :is(.home-hero,.illustrated-portals,.new-philosophy){
  background-color:#0b1421!important;
}
html[data-site-palette=blue][data-theme=original] .modus-home .landscape::after{
  background-image:linear-gradient(90deg,rgba(11,20,33,.88),rgba(11,20,33,.6) 31%,transparent 58%),
    linear-gradient(0deg,#0b1421,transparent 30%)!important;
}
html[data-site-palette=blue][data-theme=original] .modus-home .new-philosophy>picture[data-a06-background]::after{
  background-image:linear-gradient(0deg,rgba(11,20,33,.5),#0b1421 92%);
}
/* Shared Blue surfaces. Reading and contrast modes retain their own palette. */
html[data-site-palette=blue][data-theme=original]{
  --blue-base:#0b1421;
  --blue-panel:#17283c;
  --blue-raised:#223a55;
  --blue-line:#415f80;
  --blue-muted:#bfd3eb;
  --appearance-panel:var(--blue-panel);
  --appearance-ink:#e6edf7;
  --appearance-muted:var(--blue-muted);
  --appearance-line:var(--blue-line);
  --appearance-accent:#67c9dd;
}
html[data-site-palette=blue][data-theme=original] :is(.modus-home,.modus-interior){
  --bg:var(--blue-base);
  --panel:var(--blue-panel);
  --line:var(--blue-line);
  --muted:var(--blue-muted);
  --modus-forest:var(--blue-base);
  --modus-surface:var(--blue-panel);
  --modus-muted:var(--blue-muted);
  --modus-edge:var(--blue-line);
}
html[data-site-palette=blue][data-theme=original] :is(.site-header .nav-panel,.site-header .theme-options,
  .article-card,.upcoming-card,.section-card,.study-card,.route-card,.catalog-preview-card,
  .article-quiz,.article-learning,.article-prerequisites,.article-practice,.start-resume,
  .global-search-dialog,.builder-panel,.selected-panel,.lesson,.journey-stage,.price-card,
  .account-panel,.billing-panel,.membership-dialog,.student-info-dialog,.student-verification-panel,
  .modus-feedback-panel,.modus-help-panel,.map-inspector,.map-stage,.scale-reading){
  background-color:var(--blue-panel)!important;
}
html[data-site-palette=blue][data-theme=original] :is(.card-level-row,.level-badge,
  .home-portal,.global-search-result:is(:hover,:focus-visible),.modus-feedback-toggle){
  background-color:var(--blue-raised);
}
html[data-site-palette=blue][data-theme=original] #library :is(.card-level-row,.card-art,.card-art img){
  background-color:var(--blue-base)!important;
}
html[data-site-palette=blue][data-theme=original] #library .level-badge{
  background-color:var(--blue-raised)!important;
  border-color:var(--blue-line);
  color:var(--blue-muted);
}
html[data-site-palette=blue][data-theme=original] #library :is(.card-meta,.card-description,.upcoming-card-meta){
  color:var(--blue-muted);
}
html[data-site-palette=blue][data-theme=original] :is(.article-search,.library-filter,.filter-row input,
  .map-toolbar select,.scale-controls select,.harmonic-context-controls select,
  .progression-presets-controls select,.modus-feedback-form :is(input,select,textarea)){
  background-color:var(--blue-base);
  border-color:var(--blue-line);
  color:#e6edf7;
}
html[data-site-palette=blue][data-theme=original] :is(.scale-neck,.scale-fret-band){
  fill:var(--blue-panel);
}
html[data-site-palette=blue][data-theme=original] :is(.scale-fret-wire,.scale-string,.scale-neck-edge){
  stroke:var(--blue-line);
}
html[data-site-palette=blue][data-theme=original] :is(.scale-fret-labels,.scale-string-label,.scale-row-label){
  fill:var(--blue-muted);
}
html[data-site-palette=blue][data-theme=original] .modus-home .home-introduction{
  background-image:linear-gradient(90deg,#17283c,#0b1421);
}
html[data-site-palette=blue][data-theme=original] .modus-home .home-portal::before{
  background-image:linear-gradient(0deg,rgba(11,20,33,.96),rgba(11,20,33,.35) 85%);
}
html[data-site-palette=blue][data-theme=original] :is(.scale-scroll,.scale-formula,.scale-note-chips>span){
  background-color:var(--blue-panel);
}
html[data-site-palette=blue][data-theme=original] .scale-note circle{fill:#456b91}
html[data-site-palette=blue][data-theme=original] .scale-root circle{fill:#ffdf29}
html[data-site-palette=blue][data-theme=original] .scale-root text{fill:#0b1421}
html[data-site-palette=blue][data-theme=original] .scale-note .scale-root-ring{stroke:#ffdf29}
html[data-site-palette=blue][data-theme=original] .scale-note .scale-character-ring{stroke:#9db9da}
html[data-site-palette=blue][data-theme=original] .scale-note-chips>.is-root{background-color:#ffdf29;color:#0b1421}
html[data-site-palette=blue][data-theme=original] :is(.modus-help-toggle,.modus-feedback-toggle,
  .modus-context-tip,.global-search-result:is(:hover,:focus-visible)){
  background-color:var(--blue-raised);
  border-color:var(--blue-line);
}
html[data-site-palette=blue][data-theme=original] :is(.modus-help-toggle,.modus-feedback-toggle):is(:hover,:focus-visible){
  background-color:#345677;
}
html[data-site-palette=blue][data-theme=original] .modus-feedback-toggle svg{stroke:#67c9dd}
html[data-site-palette=blue][data-theme=original] .modus-feedback-send{background-color:#ffdf29;color:#0b1421}
html[data-site-palette=blue][data-theme=original] .modus-feedback-send:hover{background-color:#ffe763}
html[data-site-palette=blue][data-theme=original] .map-node.match rect{stroke:#67c9dd}
html[data-site-palette=blue][data-theme=original] .map-node:focus-visible rect{stroke:#ffdf29}
html[data-site-palette=blue][data-theme=original] .map-dot.dim{background-color:var(--blue-line)}
html[data-site-palette=blue][data-theme=original] .map-dot.working{background-color:#9db9da}
html[data-site-palette=blue][data-theme=original] .map-dot.learned{background-color:#67c9dd}