/* Course identity is independent of the hourly music scene. */
:root{--course-accent:#354f3d;--course-tint:#edf3e7;--course-edge:#bacbad;--course-deep:#304c40;--course-scene-tint:#f1f6efeb}
body[data-course="N4"]{--bg:#f1f8fc;--paper:#fcfeff;--ink:#203c4e;--muted:#587385;--green:#0369a1;--line:#d9e8f1;--light:#e0f2fe;--orange:#087daf;--course-accent:#0369a1;--course-tint:#e0f2fe;--course-edge:#a8dbf7;--course-deep:#12466b;--course-scene-tint:#eaf6fce8}
body[data-course="N3"]{--bg:#f8f4fc;--paper:#fffdfF;--ink:#3d2b50;--muted:#786486;--green:#7e22ce;--line:#e9def2;--light:#f3e8ff;--orange:#9145c1;--course-accent:#7e22ce;--course-tint:#f3e8ff;--course-edge:#dfc4f4;--course-deep:#4e296a;--course-scene-tint:#f6edfde8}

body:is([data-course="N4"],[data-course="N3"]){color:var(--ink)}
@media(min-width:681px){.sidebar{padding-left:18px;padding-right:18px}}

/* Botanical calligraphy rendered as vector outlines on every device. */
.brand-wrapper{position:relative;gap:4px;padding:0 0 23px;margin-bottom:30px;flex-shrink:0}
.sidebar .brand-wrapper .brand{min-width:0;gap:5px;flex-shrink:0;margin-bottom:0}
.brand-wrapper .brand img{width:22px;height:22px}
.brand-wrapper .brand-name{font-size:28px}
.brand-wrapper .brand-sub{position:absolute;left:27px;bottom:0;margin:0;white-space:nowrap;font-size:8px;letter-spacing:1.6px}
.course-badge-trigger{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:2px;width:78px;min-width:78px;height:58px;padding:0;border-radius:9px;transition:background .15s}
.course-badge-trigger::before{display:none}
.course-badge-trigger:hover,.course-badge-trigger:focus-visible{outline-color:var(--course-accent)}
.course-badge-trigger[aria-expanded="true"]{background:var(--course-tint)}
.course-badge-art{display:block;width:68px;height:50px;object-fit:contain}
.course-badge-level{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.course-badge-n5{background:#edf3e7;color:#354f3d;border-color:#b4c7a8}
.course-badge-n4{background:#e0f2fe;color:#0369a1;border-color:#a8ddfa}
.course-badge-n3{background:#f3e8ff;color:#7e22ce;border-color:#e4ccfa}
.course-badge-trigger{background:transparent;border:0;box-shadow:none}
.badge-chevron{font:10px/1 sans-serif;letter-spacing:0;opacity:.75;transform:none}
.course-menu-badge{display:inline-grid;place-items:center;flex-shrink:0;width:48px;height:38px;border:0;background:none}
.course-menu-badge img{display:block;width:48px;height:36px}
.course-item-top{flex-wrap:wrap;gap:8px}
.course-menu{background:var(--paper);border-color:var(--line);width:320px}
.course-item-title{color:var(--ink)}
.course-item-desc,.course-menu-header h4{color:var(--muted)}
.course-menu-item.active,.course-menu-item:hover,.course-menu-item:focus-visible{background:var(--course-tint);border-color:var(--course-edge)}
.course-item-status.current{background:var(--course-accent)}
.study-header .course-badge-trigger{width:74px;min-width:74px;height:46px}
.study-header .course-badge-art{width:62px;height:46px}

/* Shared surfaces, controls and learning tools inherit the selected course. */
body:is([data-course="N4"],[data-course="N3"])[data-music-scene]{background-color:var(--bg);background-image:linear-gradient(var(--course-scene-tint),var(--course-scene-tint)),var(--scene-art)}
body:is([data-course="N4"],[data-course="N3"]) :is(.topbar,.study-header){background:var(--paper)}
body:is([data-course="N4"],[data-course="N3"]) :is(.nav button.active,.step-tab.active,.lesson-icon,.flashcard,.study-flashcard,.callout,.reminder-card,.journey-note,.avatar,.course-session-banner,.rubric-box){background:var(--course-tint);color:var(--ink);border-color:var(--course-edge)}
body:is([data-course="N4"],[data-course="N3"]) :is(.nav button.active:after,.progress-bar span,.switch.on,.music-play){background:var(--course-accent)}
body:is([data-course="N4"],[data-course="N3"]) :is(.text-button,.lesson-copy h3,.rubric-box h5,.quote .jp,.study-brand,.brand-name){color:var(--course-deep)}
body:is([data-course="N4"],[data-course="N3"]) :is(.nav button,.journey-note p,.quote p,.quote small,.course-session-banner p){color:var(--muted)}
body:is([data-course="N4"],[data-course="N3"]) .nav button.active{color:var(--course-accent)}
body:is([data-course="N4"],[data-course="N3"]) .hero{background:var(--course-deep);color:#fff}
body[data-course="N4"] .hero-art{filter:hue-rotate(115deg) saturate(.65)}
body[data-course="N3"] .hero-art{filter:hue-rotate(205deg) saturate(.6)}
body:is([data-course="N4"],[data-course="N3"]) .hero :is(p,.hero-tag,.hero-bottom){color:#f0f5ff}
body:is([data-course="N4"],[data-course="N3"]) .hero .primary{background:var(--course-tint);color:var(--course-deep)}
body:is([data-course="N4"],[data-course="N3"]) :is(.hero-line span,.hero-tag i){background:var(--course-edge)}
body:is([data-course="N4"],[data-course="N3"]) :is(.day-tile,.course-ex-card,.kana-cell,.match-tile,.study-music-panel){background:var(--paper);color:var(--ink);border-color:var(--line)}
body:is([data-course="N4"],[data-course="N3"]) :is(.day-tile.current,.match-tile.selected){background:var(--course-tint);border-color:var(--course-accent);outline-color:var(--course-accent)}
body:is([data-course="N4"],[data-course="N3"]) :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--course-accent)}
body:is([data-course="N4"],[data-course="N3"]) :is(button,a,input,textarea,select):focus-visible{outline-color:var(--course-accent)}
body:is([data-course="N4"],[data-course="N3"]) .music-art{background:var(--course-tint);color:var(--course-accent)}
body:is([data-course="N4"],[data-course="N3"]) .music-trigger.is-playing{background:var(--course-tint);color:var(--course-accent);border-color:var(--course-edge)}
@media(max-width:680px){
 .sidebar .brand-wrapper{display:none}
 .topbar-inner>.mobile-brand{display:flex;width:100%;gap:8px;align-items:center;color:var(--course-deep)}
 .mobile-brand .course-badge-trigger{margin-left:auto;width:78px;min-width:78px;height:50px}
 .study-header .course-badge-trigger{width:68px;min-width:68px;height:44px}
 .study-header .course-badge-art{width:58px;height:43px}
}