@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Mulish:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:light;--ink:#23374b;--muted:#576a7e;--gold:#f2c45d;--night:#17112f;--blue:#2b65b5;--teal:#168276;--paper:#f7f8fb;--line:#d7dfeb;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Mulish,system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:var(--blue)}[hidden]{display:none!important}img{max-width:100%;height:auto}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.25}h1{font-size:clamp(2rem,4.5vw,3.7rem);letter-spacing:-.035em}h2{font-size:clamp(1.45rem,2.5vw,2rem)}h3{font-size:1.125rem}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #d6a934;outline-offset:4px}.skip{position:absolute;top:-80px;left:16px;z-index:100;background:white;padding:10px}.skip:focus{top:8px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px max(20px,calc((100vw - 1180px)/2));padding-top:calc(16px + env(safe-area-inset-top));background:var(--night);color:white;border-bottom:1px solid #ffffff1a}.brand{font-size:1.1rem;font-weight:900;color:white;text-decoration:none;white-space:nowrap}.brand span{color:var(--gold)}.topbar nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}.topbar nav a{color:#ede8fc;font-size:.9rem;font-weight:700;text-decoration:none;min-height:44px;display:flex;align-items:center}main{max-width:1180px;margin:auto;padding:32px 24px 60px}.eyebrow{display:block;font-size:.74rem;font-weight:900;letter-spacing:.13em;color:var(--teal);margin-bottom:10px}.course-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;padding:32px 0 40px;align-items:center}.hero-copy h1 em{font-family:Cinzel,Georgia,serif;font-style:normal;color:#4a3979;font-size:.84em;letter-spacing:-.03em}.hero-copy>p{margin:22px 0;max-width:580px;font-size:1.125rem;color:var(--muted)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 18px;border-radius:12px;text-decoration:none;border:1px solid var(--line);font-weight:800;font-size:.95rem;line-height:1.4;max-width:100%;text-align:center}.primary{background:var(--blue);color:white;border-color:var(--blue);box-shadow:0 6px 14px #2b65b51a}.secondary{background:white;color:var(--ink)}.stop{background:#fff0f2;color:#a43553}.hero-copy .hero-detail{font-size:.83rem;margin:15px 0 0}.professors{display:grid;grid-template-columns:1fr 1fr;gap:16px}.professor{border-radius:28px;padding:20px 12px;text-align:center;background:#fff;border:1px solid var(--line);box-shadow:0 14px 38px #20243d0a}.professor.mozart{background:#fff8e7;border-color:#ecdba9;transform:rotate(-2deg)}.professor.moz{background:#f0edf9;border-color:#d6ccee;transform:rotate(2deg)}.portrait{height:195px;display:flex;justify-content:center;align-items:center}.portrait img{height:100%;width:auto;object-fit:contain}.professor.moz .portrait img{border-radius:18px;background:#fff8e7}.teacher-tag{font-size:.68rem;letter-spacing:.1em;font-weight:900;color:var(--teal);display:block}.professor h2{font-family:Cinzel,serif;font-size:1.45rem;margin:6px 0}.professor p{font-size:.83rem;line-height:1.5;color:var(--muted)}.progress-card{display:flex;align-items:center;gap:24px;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:24px}.progress-card>div:first-child{flex:1}.progress-card h2{font-size:1.3rem}.progress-card p{font-size:.9rem;color:var(--muted);margin-top:8px}.progress-meter{min-width:160px;display:grid;gap:4px}.progress-meter strong{font-size:1.7rem;color:var(--teal)}.progress-meter label{font-size:.85rem}progress{width:100%;height:9px;border:0;accent-color:var(--teal);border-radius:8px}.learning-method{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:36px 0 48px}.learning-method>div{border-left:2px solid var(--line);padding-left:18px}.learning-method span{color:var(--teal);font-weight:900;font-size:.85rem}.learning-method h3{margin:8px 0}.learning-method p{font-size:.95rem;color:var(--muted)}#parcours{scroll-margin-top:20px}.section-intro{max-width:760px;margin-bottom:24px}.section-intro p{color:var(--muted);margin-top:12px}.search-label{font-size:.85rem;font-weight:800;display:block;margin-bottom:6px}input[type=search]{width:100%;max-width:550px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);min-height:46px}.lesson-group{margin-top:32px}.lesson-group h3{margin-bottom:14px;font-size:1.15rem}.lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.lesson-card{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:18px;border:1px solid var(--line);border-radius:18px;background:white;color:var(--ink);text-decoration:none;position:relative;min-width:0}.lesson-card:hover{border-color:#7397c8;background:#f9fbff}.lesson-number{background:#edf2f9;color:var(--blue);border-radius:10px;height:34px;display:grid;place-items:center;font-weight:900}.lesson-card h4{margin:0 0 7px;font-size:1rem;line-height:1.35}.lesson-card p{font-size:.85rem;color:var(--muted);line-height:1.45}.lesson-card .card-state{font-size:.75rem;color:var(--teal);font-weight:800;margin-top:10px;display:block}.lesson-card.done{border-color:#90c7b9}.lesson-card.done .lesson-number{background:#e2f4eb;color:#187455}.memo-home{display:flex;align-items:center;gap:30px;border:1px solid #dfd2a3;background:#fff9e9;border-radius:22px;padding:28px;margin-top:36px}.memo-home>div{flex:1}.memo-home h2{font-size:1.4rem}.memo-home p{color:var(--muted);margin-top:10px}.page-footer{padding:22px;text-align:center;font-size:.78rem;color:var(--muted);border-top:1px solid var(--line)}.page-footer span{display:block}.lesson-layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:32px;padding-top:28px}.lesson-sidebar{position:sticky;top:20px;align-self:start;max-height:calc(100dvh - 40px);overflow:auto;padding-right:6px}.back-path{display:block;margin-bottom:20px;font-size:.9rem;font-weight:800;text-decoration:none}.lesson-sidebar label{font-size:.8rem;font-weight:800}.lesson-sidebar select{display:block;width:100%;padding:10px 6px;margin:6px 0;background:white;border:1px solid var(--line);border-radius:10px;min-height:44px;font-size:.82rem}.lesson-sidebar>p{font-size:.8rem;color:var(--muted);margin:12px 0}.lesson-sidebar nav a{display:flex;gap:8px;color:var(--muted);text-decoration:none;padding:10px 8px;min-height:44px;font-size:.8rem;border-radius:10px;line-height:1.4}.lesson-sidebar nav a[aria-current=page]{background:#e4edf9;color:#245796;font-weight:900}.lesson-sidebar nav .nav-group{display:block;font-weight:900;font-size:.72rem;color:#63738b;margin:14px 0 5px}.lesson-main{min-width:0}.lesson-heading{margin-bottom:24px}.lesson-heading h1{font-size:clamp(1.7rem,3vw,2.65rem)}.lesson-heading p{margin:12px 0;color:var(--muted);font-size:1.05rem}.source-page{font-size:.75rem;color:#748096}.step-tabs{display:flex;gap:8px;margin:0 0 24px}.step-tabs button{flex:1;border:1px solid var(--line);background:white;border-radius:12px;padding:12px 8px;min-height:48px;color:var(--muted);font-weight:800;font-size:.9rem}.step-tabs button span{display:inline-grid;place-items:center;width:24px;height:24px;background:#eef1f6;border-radius:50%;margin-right:5px;font-size:.8rem}.step-tabs button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:white}.step-tabs button[aria-pressed=true] span{background:#ffffff2e}.teacher-speech{display:grid;grid-template-columns:110px 1fr;gap:24px;background:white;border:1px solid var(--line);border-radius:24px;padding:24px;align-items:center}.teacher-speech>img{width:100%;max-height:180px;object-fit:contain}.teacher-speech h2{font-size:1.4rem;margin:7px 0 14px}.teacher-speech p{font-size:1.075rem;line-height:1.75}.method-card{padding:24px;background:#eaf3f1;border:1px solid #cee2dc;border-radius:20px;margin-top:18px}.method-card ol{padding-left:25px;margin:10px 0 0}.method-card li{padding:6px 0 6px 6px}.method-card li::marker{font-weight:900;color:var(--teal)}.note-callout{background:#fff8e2;padding:20px 24px;border:1px solid #e6d99f;border-radius:18px;margin-top:18px}.note-callout h3{margin-bottom:8px}.trap-card{margin-top:18px;background:white;padding:16px 20px;border:1px solid var(--line);border-radius:16px}.trap-card summary{cursor:pointer;font-weight:800;min-height:28px}.trap-card p{margin-top:12px;color:var(--muted)}.lab-heading{display:flex;gap:20px;align-items:center;margin-bottom:20px}.lab-heading>img{width:65px;height:97px;object-fit:contain;border-radius:12px;background:#fff8e7}.lab-heading h2{font-size:1.4rem;margin:6px 0}.lab-heading p{color:var(--muted);font-size:.95rem}.lab-card{background:white;border:1px solid var(--line);border-radius:22px;padding:24px}.lab-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}.lab-toolbar label{display:grid;gap:5px;font-size:.85rem;font-weight:800}.lab-toolbar select,.lab-toolbar input[type=number]{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:8px;background:white;color:var(--ink);max-width:100%}.lab-toolbar input[type=number]{width:95px}.score-view{width:100%;background:white;border-radius:12px;overflow:hidden;min-height:190px}.score-view svg{display:block;width:100%;height:auto}.score-view .active .vf-notehead path{fill:var(--teal);stroke:var(--teal)}.note-labels{display:flex;gap:5px;justify-content:space-around;flex-wrap:wrap;margin-bottom:18px}.note-labels span{font-size:.8rem;font-weight:800;padding:4px;border-radius:6px}.note-labels .active{color:white;background:var(--teal)}.lab-caption{font-size:.85rem;color:var(--muted);margin:12px 0}.lab-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.keyboard{position:relative;height:172px;display:flex;margin:18px 0;isolation:isolate}.key{border:1px solid #bac4d2;border-radius:0 0 8px 8px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:8px 2px;font-size:.68rem;flex:1;background:#fff;color:var(--ink);font-weight:800}.key.black{position:absolute;z-index:2;top:0;height:105px;width:8%;background:#253248;color:white;border-color:#122038;font-size:.58rem}.key.selected{background:#f7d67c;color:#23374b}.key.black.selected{background:var(--teal);color:white}.lab-result{padding:16px;border-radius:12px;background:#edf3fb;color:#254b78;font-weight:700;margin:16px 0 0;min-height:54px}.note-pills{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.note-pill{background:#edf2f9;border-radius:10px;padding:8px 12px;font-weight:800}.note-pill em{display:block;font-size:.68rem;color:var(--muted);font-style:normal}.note-pill.active{background:#ccebe4;color:#145e52}.beat-groups{display:flex;gap:16px;justify-content:center;margin:24px 0}.beat-group{display:flex;gap:6px;background:#edf2f8;padding:12px;border-radius:14px}.beat-dot{width:34px;height:34px;display:grid;place-items:center;background:white;border:1px solid var(--line);border-radius:50%;font-size:.8rem}.beat-dot.accent{border-color:var(--teal);color:var(--teal);font-weight:900}.beat-dot.active{background:var(--gold);color:#382810}.rhythm-palette{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.rhythm-palette button{border:1px solid var(--line);border-radius:10px;background:#f8fafc;color:var(--ink);padding:8px 12px;min-height:46px;font-size:.85rem}.measure-parts{display:flex;gap:6px;flex-wrap:wrap;min-height:65px;border:1px dashed #acbdce;border-radius:12px;padding:10px}.measure-parts span{padding:8px 10px;background:#e1f1ec;color:#145e52;border-radius:8px;font-size:.82rem;font-weight:800}.measure-parts span.rest{background:#edf0f5;color:#617084}.quiz-heading p{color:var(--muted);margin:12px 0 20px}.quiz-count{font-size:.85rem;font-weight:800;color:var(--teal);margin-bottom:14px}fieldset{border:0;margin:0;padding:0}legend{font-size:1.3rem;font-weight:800;line-height:1.5;margin-bottom:18px;width:100%}.quiz-choice{display:flex;gap:12px;align-items:flex-start;background:white;border:1px solid var(--line);padding:16px;border-radius:12px;margin-bottom:10px;cursor:pointer;min-height:52px}.quiz-choice:has(input:checked){border-color:var(--blue);background:#eaf2fd}.quiz-choice input{margin-top:5px;width:18px;height:18px;accent-color:var(--blue);flex:0 0 auto}.quiz-choice span{flex:1}#check-answer{margin-top:8px}.quiz-feedback{margin:20px 0;padding:20px;background:#fff3d7;border:1px solid #e2ca88;border-radius:16px}.quiz-feedback.correct{background:#e5f3ed;border-color:#95c4ac}.quiz-feedback strong{display:block;margin-bottom:8px}.lesson-complete{margin-top:24px;padding:26px;text-align:center;background:#e6f2ee;border:1px solid #a2c9b8;border-radius:22px}.lesson-complete>span{font-size:2rem;color:#c7962a}.lesson-complete p{margin:12px 0 20px}.lesson-complete a{margin:4px}.audio-status{font-size:.85rem;color:#a43553;margin:14px 0;min-height:0}.lesson-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:24px;padding:14px 0;border-top:1px solid var(--line)}
@media(max-width:1000px){.course-hero{gap:24px}.portrait{height:160px}.lesson-layout{grid-template-columns:190px minmax(0,1fr);gap:22px}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.teacher-speech{grid-template-columns:80px 1fr;gap:18px;padding:20px}.teacher-speech p{font-size:1rem}.step-tabs button{font-size:.8rem}.progress-card{flex-wrap:wrap}.memo-home{flex-direction:column;align-items:flex-start}}
@media(max-width:760px){.topbar{flex-wrap:wrap;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top))}.topbar nav{gap:12px}.topbar nav a{font-size:.78rem}main{padding:22px 18px 40px}.course-hero{grid-template-columns:1fr;padding:15px 0 28px}.professors{max-width:490px;justify-self:center;width:100%}.portrait{height:155px}.hero-copy h1{font-size:2.5rem}.hero-copy>p{font-size:1rem}.learning-method{gap:14px;padding:26px 0}.learning-method p{font-size:.8rem}.learning-method h3{font-size:1rem}.progress-card{padding:20px}.lesson-layout{display:block}.lesson-sidebar{position:static;max-height:none;padding:0;margin-bottom:22px}.lesson-sidebar nav{display:none}.lesson-sidebar .back-path{margin-bottom:10px}.lesson-sidebar>p{margin:8px 0}.lesson-sidebar select{font-size:.95rem}.lesson-controls{position:sticky;bottom:0;background:rgba(247,248,251,.97);padding:12px 0 calc(12px + env(safe-area-inset-bottom));z-index:5}.lesson-heading h1{font-size:2rem}.step-tabs{gap:5px}.step-tabs button{padding:10px 4px}.step-tabs button span{display:block;margin:0 auto 5px}.teacher-speech{grid-template-columns:60px 1fr;padding:18px;gap:14px}.teacher-speech h2{font-size:1.15rem}.method-card{padding:18px}.lab-card{padding:16px}.beat-groups{gap:10px}.beat-group{padding:8px;gap:3px}.beat-dot{width:28px;height:28px}.keyboard{height:145px}.key.black{height:88px}.lab-heading{gap:12px}.lab-heading h2{font-size:1.2rem}.lab-heading>img{width:52px;height:78px}.lesson-controls .button{font-size:.8rem;padding:10px 12px}.score-view{min-height:145px}}
@media(max-width:430px){.lesson-grid{grid-template-columns:1fr}.topbar nav{gap:10px}.topbar nav a{font-size:.72rem}.professor{padding:16px 8px}.professor p{font-size:.76rem}.learning-method{grid-template-columns:1fr;gap:14px}.learning-method h3{margin:4px 0}.learning-method p{font-size:.9rem}.learning-method span{float:left;margin-right:10px}.hero-actions .button{width:100%}.teacher-speech{display:block}.teacher-speech>img{float:right;width:58px;height:86px;margin:0 0 8px 12px}.quiz-heading h2{font-size:1.4rem}.lab-toolbar{gap:8px}.lab-toolbar label{font-size:.8rem}.note-pill{padding:7px 10px}.key.black{font-size:.55rem}.step-tabs button{font-size:.76rem}}
@media(orientation:landscape) and (max-height:500px){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.lesson-controls{position:static}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.topbar,.lesson-sidebar,.step-tabs,.lesson-controls,.lab-actions,.page-footer{display:none}.lesson-layout{display:block}.step-panel{display:block!important;break-inside:avoid}.teacher-speech,.lab-card{box-shadow:none}body{background:white}}

/* Labels follow the actual engraved noteheads instead of equal-width columns. */
.note-labels.aligned{position:relative;display:block;height:32px}
.note-labels.aligned span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.professor.mozart .portrait img{border-radius:16px}
progress{-webkit-appearance:none;appearance:none;background:#e4eaf0}
progress::-webkit-progress-bar{background:#e4eaf0;border-radius:8px}
progress::-webkit-progress-value{background:var(--teal);border-radius:8px}
progress::-moz-progress-bar{background:var(--teal);border-radius:8px}
.step-tabs{scroll-margin-top:16px}
.teacher-speech>img{border-radius:10px}
/* Visible course language control on desktop, tablet and phone. */
.course-language{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;white-space:nowrap;margin-left:auto;color:#fff}
.course-language select{font:inherit;min-height:44px;max-width:140px;padding:8px 12px;background:#fff;border:1px solid #d5cde4;border-radius:12px;color:#29213e}
.topbar{flex-wrap:wrap;gap:12px}
@media(max-width:760px){.course-language{margin-left:0;justify-content:flex-end;flex:1}.topbar nav{order:3;flex-basis:100%;justify-content:center;flex-wrap:wrap}.course-language select{max-width:130px}.topbar{padding-top:10px;padding-bottom:10px}}