:root { --ink:#1f2b26; --muted:#68706b; --paper:#f7f2e9; --card:#fffdf8; --accent:#e96c4d; --yellow:#f5c94c; --line:#ddd6c9; --shadow:0 16px 35px rgba(49,40,25,.09); --font-scale:1; --font-family:ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif; }
html { font-size:calc(16px * var(--font-scale)); }
html[data-palette="sea"] { --ink:#123d47; --muted:#5e777a; --paper:#eaf5f2; --card:#fcfffd; --accent:#197f80; --yellow:#e7b647; --line:#c7dfdb; --shadow:0 16px 35px rgba(20,82,79,.10); }
html[data-palette="night"] { --ink:#f5f1e7; --muted:#b9bbb8; --paper:#192320; --card:#25302c; --accent:#f18c66; --yellow:#f2c84c; --line:#3b4944; --shadow:0 16px 35px rgba(0,0,0,.25); }
html[data-palette="plum"] { --ink:#39233d; --muted:#796b7d; --paper:#f7eef5; --card:#fffaff; --accent:#ae5079; --yellow:#dcae43; --line:#e3d4e1; --shadow:0 16px 35px rgba(75,35,75,.10); }
html[data-font="friendly"] { --font-family:ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif; } html[data-font="classic"] { --font-family:Georgia, "Times New Roman", serif; } html[data-font="clear"] { --font-family:Arial, Helvetica, sans-serif; } body, button, input, select, textarea { font-family:var(--font-family); } body * { font-family:inherit; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.45 ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif; } body.player-open { overflow:hidden; }
button, input { font:inherit; }
button { cursor:pointer; }
.shell { max-width:1040px; margin:auto; padding:28px 28px 18px; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--line); padding-bottom:23px; }.header-actions { display:flex; align-items:center; gap:8px; }.language-toggle,.appearance-toggle { border:1px solid var(--line); border-radius:7px; padding:6px 9px; background:transparent; color:var(--ink); font-weight:700; font-size:.8rem; }.appearance-toggle { font-family:Georgia,serif; font-size:1rem; line-height:1; }
.brand { color:var(--ink); text-decoration:none; font-family:Georgia,serif; font-size:1.35rem; font-weight:700; }.brand span { color:var(--accent); }.site-header p { margin:0; color:var(--muted); font-size:.88rem; }
.hero { padding:74px 0 50px; max-width:720px; }.eyebrow { margin:0 0 8px; color:var(--accent); font-size:.73rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.hero h1 { font:700 clamp(2.7rem,7vw,5.5rem)/.97 Georgia,serif; letter-spacing:-.055em; margin:0; }.intro { max-width:560px; margin:25px 0 0; color:var(--muted); font-size:1.05rem; }.demo-link { display:flex; gap:12px; align-items:center; margin-top:25px; border:0; background:var(--ink); border-radius:9px; color:white; font-weight:750; padding:12px 16px; }.demo-link span { color:var(--yellow); font-size:1.25rem; }
.song-picker { display:block; border-top:1px solid var(--line); padding:25px 0; }.song-picker h2 { font:700 1.25rem Georgia,serif; margin:0; }.song-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:18px; }.song-choice { min-height:112px; text-align:left; background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:13px; padding:16px; font:700 1.05rem/1.2 Georgia,serif; box-shadow:0 3px 9px rgba(49,40,25,.03); }.song-choice > span { display:block; }.song-choice small { display:block; margin-top:6px; color:var(--muted); font:600 .68rem ui-rounded,system-ui,sans-serif; letter-spacing:.02em; }.song-choice:after { content:attr(data-cta); display:block; color:var(--accent); font:700 .72rem ui-rounded, system-ui, sans-serif; letter-spacing:.04em; margin-top:10px; }.song-choice:hover { border-color:var(--ink); transform:translateY(-2px); }
.lesson-overlay { display:none; position:fixed; inset:0; z-index:10; background:var(--paper); overflow-y:auto; padding:22px; }.lesson-overlay.open { display:block; }.lesson { width:min(760px, 100%); margin:auto; min-height:calc(100vh - 44px); border-radius:20px; background:var(--card); padding:clamp(22px,5vw,50px); box-shadow:var(--shadow); position:relative; }.close-player { position:absolute; top:16px; right:16px; height:40px; width:40px; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--ink); font-size:1.7rem; line-height:1; }.lesson-heading { display:flex; justify-content:space-between; gap:20px; padding-right:42px; }.lesson h2 { margin:0; font:700 clamp(2rem,5vw,3.3rem)/1 Georgia,serif; letter-spacing:-.04em; }.lesson-heading p:not(.eyebrow) { color:var(--muted); margin:9px 0 0; }.secondary-control { color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:8px; padding:9px 12px; height:max-content; }.start-guide { display:flex; align-items:center; gap:14px; margin-top:27px; padding:15px; background:color-mix(in srgb, var(--paper) 65%, var(--yellow)); border-radius:11px; }.start-number { display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:50%; background:var(--accent); color:white; font:700 1.25rem Georgia,serif; }.start-copy { flex:1; }.start-guide b { font-size:.95rem; }.start-guide p { margin:2px 0 0; color:var(--muted); font-size:.79rem; }.key-landmark { width:112px; height:54px; display:flex; position:relative; flex:0 0 112px; padding-top:0; }.key-landmark .white { flex:1; display:flex; justify-content:center; align-items:flex-end; padding-bottom:4px; background:var(--card); border:1px solid #aaa195; border-radius:0 0 3px 3px; color:var(--muted); font-size:.55rem; }.key-landmark .black { position:absolute; width:13px; height:29px; top:0; background:var(--ink); border-radius:0 0 3px 3px; }.key-landmark .b1{left:10px}.key-landmark .b2{left:26px}.key-landmark .b3{left:58px}.key-landmark .b4{left:74px}.key-landmark .b5{left:90px}.key-landmark[data-start="C"] .c,.key-landmark[data-start="A"] .a { background:var(--accent); color:white; font-weight:800; border-color:var(--accent); }
.mode-tabs { display:flex; border-bottom:1px solid var(--line); margin-top:42px; gap:25px; }.mode-tab { border:0; background:transparent; padding:0 0 12px; color:var(--muted); font-weight:700; position:relative; }.mode-tab.active { color:var(--ink); }.mode-tab.active:after { content:""; position:absolute; height:3px; background:var(--accent); left:0; right:0; bottom:-1px; }.notation-switch { display:flex; align-items:center; gap:4px; margin-top:18px; color:var(--muted); font-size:.82rem; }.notation-switch > span { margin-right:6px; }.notation-option { border:1px solid var(--line); color:var(--muted); background:transparent; padding:5px 9px; font-weight:700; }.notation-option:first-of-type { border-radius:6px 0 0 6px; }.notation-option:last-child { border-radius:0 6px 6px 0; margin-left:-5px; }.notation-option.active { background:var(--ink); border-color:var(--ink); color:white; }.player { padding:30px 0 0; }.mode-copy { color:var(--muted); margin:0 0 20px; }.now-playing { font:700 clamp(4rem,13vw,8rem)/1 Georgia,serif; letter-spacing:.05em; min-height:130px; display:flex; align-items:center; justify-content:center; background:#fbf0d8; border-radius:14px; }.progress-wrap { height:4px; background:#eee6d9; border-radius:5px; overflow:hidden; margin:20px 0; }.progress { height:100%; background:var(--accent); width:0; transition:width .1s linear; }.controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }.primary-control { border:0; background:var(--ink); color:white; padding:10px 20px; border-radius:8px; font-weight:700; }.primary-control:hover { background:var(--accent); }.speed-control { display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--muted); font-size:.9rem; }.speed-control input { accent-color:var(--accent); }.speed-control output { min-width:35px; color:var(--ink); }
.timing-cue { min-height:31px; display:flex; justify-content:center; align-items:center; gap:8px; margin-top:10px; color:var(--accent); font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.timing-cue .beat-dot { display:block; width:11px; height:11px; border-radius:50%; background:var(--accent); animation:beat-pop .48s ease-out both; }.timing-cue .next-cue { color:var(--muted); font-size:.69rem; font-weight:600; letter-spacing:0; text-transform:none; margin-left:7px; }@keyframes beat-pop { 0% { transform:scale(.4); opacity:.3; box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 42% { transform:scale(1.35); opacity:1; box-shadow:0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { transform:scale(1); opacity:1; } }.instructions { display:none; padding:32px 0 10px; font:700 clamp(1.5rem,4vw,2.8rem)/1.8 Georgia,serif; letter-spacing:.08em; word-spacing:.24em; }.instructions.show { display:block; }.note { display:inline-block; padding:0 3px; border-radius:4px; }.note.current { background:var(--yellow); box-shadow:0 0 0 3px color-mix(in srgb, var(--yellow) 35%, transparent); }.roll-list { max-height:270px; overflow:hidden; text-align:center; padding:10px 0 0; }.roll-note { display:block; font:700 2.5rem/1.35 Georgia,serif; color:#c9c3b9; transition:all .2s; }.roll-note.current { color:var(--ink); font-size:4rem; }.roll-note.past { opacity:.25; }
.legend { margin:30px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; }
.appearance-panel { position:fixed; z-index:20; top:69px; right:max(16px, calc((100vw - 1040px) / 2)); width:230px; padding:17px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }.appearance-panel label { display:grid; gap:6px; color:var(--muted); font-size:.8rem; }.appearance-panel select { width:100%; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:8px; }.setting-label { display:block; color:var(--muted); font-size:.8rem; margin:16px 0 7px; }.palette-options { display:flex; gap:9px; }.palette-option { height:28px; width:28px; border-radius:50%; border:2px solid transparent; }.palette-option.active { outline:2px solid var(--ink); outline-offset:2px; }.palette-option.warm { background:#e96c4d; }.palette-option.sea { background:#197f80; }.palette-option.night { background:#25302c; }.palette-option.plum { background:#ae5079; }
:dir(rtl) .brand { direction:ltr; }:dir(rtl) .hero h1 { letter-spacing:0; }:dir(rtl) .lesson-heading { padding-right:0; padding-left:42px; }:dir(rtl) .close-player { right:auto; left:16px; }:dir(rtl) .song-choice { text-align:right; }:dir(rtl) .start-guide { text-align:right; }:dir(rtl) .notation-option:last-child { margin-left:0; margin-right:-5px; border-radius:6px 0 0 6px; }:dir(rtl) .notation-option:first-of-type { border-radius:0 6px 6px 0; }:dir(rtl) .demo-link span:last-child { transform:scaleX(-1); }:dir(rtl) .appearance-panel { right:auto; left:max(16px, calc((100vw - 1040px) / 2)); }
footer { color:var(--muted); font-size:.85rem; text-align:center; padding:40px 0 12px; }
@media (max-width:650px) { .shell { padding:20px 16px; }.site-header p { display:none; }.hero { padding:58px 0 35px; }.hero h1 { font-size:clamp(2.8rem,15vw,4.4rem); }.song-list { grid-template-columns:1fr; gap:10px; }.song-choice { min-height:88px; display:flex; align-items:center; justify-content:space-between; font-size:1.25rem; }.song-choice:after { margin:0; }.lesson-overlay { padding:0; }.lesson { min-height:100dvh; border-radius:0; padding:23px 18px 34px; }.lesson-heading { padding-right:37px; }.lesson h2 { font-size:2.35rem; }.start-guide { margin-top:20px; align-items:flex-start; flex-wrap:wrap; }.start-copy { min-width:calc(100% - 55px); }.key-landmark { margin-left:52px; }.mode-tabs { gap:17px; margin-top:30px; overflow-x:auto; }.mode-tab { white-space:nowrap; }.notation-switch { margin-top:14px; }.now-playing { min-height:175px; font-size:7rem; }.controls { gap:9px; }.primary-control { flex:1; padding:14px 20px; }.secondary-control { padding:14px 13px; }.speed-control { width:100%; margin:5px 0 0; }.speed-control input { flex:1; }.legend { line-height:1.8; }.close-player { top:11px; right:12px; }.appearance-panel { top:64px; right:12px; }:dir(rtl) .lesson-heading { padding-right:0; padding-left:37px; }:dir(rtl) .close-player { right:auto; left:12px; }:dir(rtl) .key-landmark { margin-left:0; margin-right:52px; }:dir(rtl) .appearance-panel { right:auto; left:12px; } }

/* User-selected typeface and scale apply to every visible text control. */
body, body * { font-family:var(--font-family) !important; }
.key-landmark .white.active { background:var(--accent); color:white; font-weight:800; border-color:var(--accent); animation:key-pulse .5s ease-out both; } @keyframes key-pulse { 0% { transform:translateY(0); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 40% { transform:translateY(-5px); box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { transform:translateY(0); } }
.font-size-control { display:flex; align-items:center; gap:8px; }.font-size-control input { accent-color:var(--accent); flex:1; }.font-size-control output { color:var(--ink); min-width:34px; text-align:right; }

/* Keep playback and notation choices together at the top of every lesson view. */
.lesson-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }.lesson-toolbar .speed-control { margin-left:0; }.lesson-toolbar .notation-switch { margin-top:0; flex:0 0 auto; }.lesson-toolbar .notation-option { padding:4px 7px; font-size:.74rem; }
@media (max-width:650px) { .lesson-toolbar { align-items:flex-start; }.lesson-toolbar .controls { flex:1; }.lesson-toolbar .speed-control { width:100%; }.lesson-toolbar .notation-switch { margin-top:3px; } }