:root{--paper:#eeeada;--ink:#2d352e;--teal:#12615d;--yellow:#f1ca52;--orange:#bc421e;--brand-turquoise:#0fadb5;--brand-green:#76b041;--brand-yellow:#ffc914;--brand-orange:#cc6a00}
body:before{content:"";display:block;height:7px;background:linear-gradient(90deg,#0fadb5 0 25%,#76b041 25% 50%,#ffc914 50% 75%,#cc6a00 75%)}
.brand{gap:16px}.brand img.emblem{width:74px;height:74px;object-fit:contain;mix-blend-mode:normal;border-radius:0}.brand-name{font:30px/1.1 Cooper,Georgia,serif}.brand-name small{display:block;font:12px/1.5 system-ui;margin-top:6px;color:var(--muted)}
.site-header{padding-top:16px;padding-bottom:16px}.site-header nav a.active{background:#2d352e;color:#fcfcf6}
.section-heading{margin:28px 0 22px}.section-heading .eyebrow{color:var(--muted)}h1{font-size:clamp(1.8rem,3vw,2.65rem)}
.scale-card{background:var(--teal);color:#fff}
.scale-card .eyebrow,.relative>span{color:#c4dfcb}.scale-card #mode-character,.degree-list,.relative p{color:#d1e4d8}
.scale-card .relative{border-top-color:#ffffff30}.note-chip{background:#ffffff16;border-color:#ffffff25}.note-chip.root{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.scale-card .text-link{border-bottom-color:#ffffff55;color:#fcfcf6}.lock{background:#e9ece3}.lock[aria-pressed=false]{background:#fcfcf6;border-color:#626a5e}
.settings{background:#e9ece3}
/* Small brand accents stay outside the musical notation. */
.heading-period{color:var(--orange)}
#lesson-nav a[aria-current="true"]{box-shadow:inset 5px 0 var(--brand-green)}
.site-header nav a:hover,.site-header nav a:focus-visible,.site-header nav a:active{background:var(--brand-yellow);color:var(--ink)}
.scale-card .text-link>span{color:var(--brand-turquoise)}
.scale-card .try-this .eyebrow:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand-yellow);margin-right:8px;vertical-align:2px}
.about-strip>a{text-decoration-color:var(--brand-orange);text-decoration-thickness:2px}
.concept-note{padding:18px;text-align:center;background:#dedbc7;font-size:12px;color:#52604e}.concept-note a{color:#12615d}
.brand .wordmark-tag{display:flex;align-items:center;justify-content:center;max-width:none;background:#fff;align-self:stretch;margin-top:-16px;padding:20px 16px 14px;box-shadow:0 2px 2px #2d352e12}.wordmark-tag img{mix-blend-mode:multiply;transform:scale(1.2)}.brand{align-self:stretch;align-items:center}
@media(max-width:600px){.brand{gap:10px}h1{max-width:none;font-size:1.9rem}.site-header nav a{padding:9px 10px}}