@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:wght@400;500;600&display=swap");
:root{--navy:#010A18;--navy2:#0A1A30;--cream:#F1F0EC;--paper:#FAF9F6;--ink:#2A2926;--muted:#6E6B63;--rose:#8B7352;--rose2:#CDBD9F;--gold:#8B7352;--line:#D8D5CE;--soft:#EAE8E3;--sidebar:#EAE8E3;--shadow:rgba(1,10,24,.08);--surface-card:#FAFAF8}
*{box-sizing:border-box}body{font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.site-header{height:92px;background:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid rgba(223,215,205,.65)}
.header-left{display:flex;align-items:baseline;gap:18px}.course-kicker{font-size:10px;letter-spacing:.22em;font-weight:600;color:var(--navy)}.course-title{font-family:"Playfair Display",Georgia,serif;font-size:21px;color:#514b47}
.header-right{display:flex;align-items:center;gap:34px}.progress-wrap{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:.04em;color:#918980}.progress-wrap strong{color:var(--navy);font-weight:600;letter-spacing:.05em}.logo{text-align:right;line-height:.9;min-width:99px}.logo-script{display:block;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:30px;color:var(--navy);letter-spacing:-.02em}.logo-sub{display:block;font-size:7px;letter-spacing:.31em;color:var(--rose);margin-top:8px}
.navy-rule{height:6px;background:var(--navy)}
main{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:335px 1fr;min-height:calc(100vh - 148px)}
.sidebar{padding:50px 30px 72px 5vw;border-right:1px solid var(--line);background:var(--sidebar)}.book-label,
.section-label{font-size:9px;letter-spacing:.21em;font-weight:600;color:var(--rose)}.sidebar h1{font-family:"Playfair Display",Georgia,serif;font-size:37px;font-weight:500;letter-spacing:-.02em;margin:9px 0 13px;color:var(--navy)}.sidebar-intro{font-size:12px;line-height:1.75;color:var(--muted);margin:0 0 32px;max-width:235px}.section-label{color:#7d746d;margin-bottom:11px}
nav button{width:100%;border:1px solid transparent;background:transparent;text-align:left;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:6px;color:#514e4b;cursor:pointer;font:13px "DM Sans",sans-serif;transition:background .18s ease,box-shadow .18s ease,color .18s ease,transform .18s ease}nav button .num{width:24px;color:#9a918a;font-size:10px}nav button:hover{background:rgba(250,249,246,.72);color:var(--navy)}nav button.active{background:var(--paper);color:var(--navy);font-weight:600;border-color:rgba(223,215,205,.8);box-shadow:inset 3px 0 var(--rose),0 7px 18px var(--shadow)}
.book-preview{margin-top:44px;padding-top:27px;border-top:1px solid var(--line)}.book-preview h2{font-family:"Playfair Display",Georgia,serif;font-size:22px;font-weight:500;color:var(--navy);margin:8px 0}.book-preview p{font-size:11px;line-height:1.7;color:var(--muted)}.book-preview span{font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:#a49a92}
.lesson{padding:58px 7vw 82px;max-width:1120px}.lesson-meta{display:flex;align-items:center;gap:10px;color:#8a817a;font-size:9px;letter-spacing:.19em;position:relative;z-index:1}.meta-dot{width:4px;height:4px;border-radius:50%;background:var(--rose)}.lesson h2{font-family:"Playfair Display",Georgia,serif;font-size:57px;line-height:1.02;font-weight:500;letter-spacing:-.025em;color:var(--navy);margin:15px 0 14px}.lead{font-family:"Playfair Display",Georgia,serif;font-size:19px;line-height:1.72;color:#665f59;max-width:790px;margin:0}.concepts{display:flex;gap:7px;flex-wrap:wrap;margin:23px 0 31px}.concepts span{padding:7px 11px;background:#E5E2DC;border:1px solid rgba(223,215,205,.65);border-radius:30px;color:#645b55;font-size:10px}
.lesson-player{background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 48px rgba(74,59,43,.075);overflow:hidden}.player-top{display:flex;align-items:center;justify-content:space-between;padding:25px 27px 19px;border-bottom:1px solid #E7E4DE}.player-top h3{font-family:"Playfair Display",Georgia,serif;font-size:23px;font-weight:500;color:var(--navy);margin:4px 0 0}.player-actions{display:flex;gap:8px}.ghost,
.play{border-radius:5px;padding:9px 13px;font:11px "DM Sans";cursor:pointer;transition:.18s ease}.ghost{border:1px solid var(--line);background:#FAFAF8;color:#6f6964}.ghost:hover{border-color:#cbb9ad;background:#F7F6F2;color:var(--navy)}.play{border:1px solid var(--navy);background:var(--navy);color:#fff}.play:hover{background:var(--navy2)}.stage{min-height:390px;padding:35px 42px 23px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#FAF9F6 0%,#F3F1ED 100%)}.player-caption{padding:15px 27px 17px;border-top:1px solid var(--line);display:flex;gap:20px;align-items:baseline}.player-caption span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--rose);white-space:nowrap}.player-caption p{margin:0;color:#746d67;font-size:11px;line-height:1.5}.timeline{height:3px;background:#E7E4DE}.timeline #timelineFill{height:100%;width:0;background:var(--rose);transition:width .2s linear}
.apply-card{margin-top:25px;padding:28px 27px 29px;border:1px solid var(--line);background:#E9E7E2;border-radius:8px}.apply-card h3{font-family:"Playfair Display",Georgia,serif;font-size:25px;color:var(--navy);font-weight:500;margin:4px 0 8px}.apply-card p{font-size:12px;color:#6e6964;line-height:1.7;max-width:720px;margin:0 0 19px}.next-button{border:0;background:var(--rose);color:#fff;padding:12px 18px;border-radius:5px;font:12px "DM Sans";cursor:pointer;transition:background .18s ease,transform .18s ease}.next-button:hover{background:#8B7352;transform:translateY(-1px)}.next-button span{padding-left:7px}
footer{height:56px;border-top:1px solid var(--line);padding:0 5vw;display:flex;justify-content:space-between;align-items:center;color:#8b827b;font-size:9px;letter-spacing:.09em;background:var(--paper)}
/* V4 demonstration engine — unchanged. The lesson content and illustration rules are intentionally preserved. */
.scene{width:100%;max-width:880px;min-height:300px;position:relative}.scene-title{text-align:center;color:var(--navy);font-family:"Playfair Display";font-size:20px;margin-bottom:22px}.sound-lab{display:flex;flex-direction:column;align-items:center;gap:25px}.sound-orbit{width:170px;height:170px;border-radius:50%;border:1px solid #dbcfc4;position:relative;display:grid;place-items:center}.sound-orbit:before,
.sound-orbit:after{content:"";position:absolute;border:1px solid var(--rose2);border-radius:50%;inset:18px;opacity:.65}.sound-orbit:after{inset:38px}.sound-orbit .note{font-family:"Playfair Display";font-size:48px;color:var(--rose);z-index:1}.sound-orbit.playing{animation:pulse 1.1s ease-in-out infinite}.sound-orbit.playing:before{animation:ring 1.1s ease-out infinite}.sound-orbit.playing:after{animation:ring 1.1s .2s ease-out infinite}@keyframes pulse{50%{transform:scale(1.04)}}@keyframes ring{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.35);opacity:0}}.sound-words{display:flex;gap:32px}.sound-words div{text-align:center}.sound-words b{display:block;font-family:"Playfair Display";font-size:18px;color:var(--navy)}.sound-words small{font-size:10px;color:#8a817a}.pitch-lab{text-align:center}.pitch-arrow{height:80px;display:flex;align-items:center;justify-content:center;gap:30px;color:var(--navy)}.pitch-arrow .arrow{font-size:34px;color:var(--rose)}.pitch-card{display:inline-flex;align-items:flex-end;gap:18px;padding:22px 28px;border:1px solid var(--line);border-radius:8px;background:#FAFAF8}.pitch-bar{width:26px;border-radius:4px 4px 0 0;background:var(--navy);transition:height .5s}.pitch-bar.high{height:125px}.pitch-bar.low{height:45px}.pitch-label{font-size:11px;color:#77706a;margin-top:9px}.piano-scene{text-align:center;width:100%}.piano-message{height:35px;font-family:"Playfair Display";font-size:20px;color:var(--navy);margin-bottom:13px}.piano{height:185px;display:flex;justify-content:center;position:relative;padding:0 4px}.white{height:170px;width:53px;background:#fff;border:1px solid #cfc7bf;border-radius:0 0 6px 6px;position:relative;z-index:1;cursor:pointer;transition:.12s}.white span{position:absolute;bottom:8px;left:0;right:0;font-size:10px;color:#8b817a}.white.active{background:#DDD8CE;transform:translateY(3px)}.black{height:104px;width:32px;background:var(--navy);border-radius:0 0 4px 4px;position:absolute;z-index:2;cursor:pointer;transform:translateX(-50%);box-shadow:0 4px 5px #0002}.black.active{background:var(--rose);transform:translateX(-50%) translateY(3px)}.piano-note{font-size:11px;color:#7e756f;margin-top:13px}.staff-scene{width:100%;max-width:760px}.staff-wrap{height:210px;position:relative;margin:0 auto}.staff-lines{position:absolute;left:8%;right:2%;top:65px;height:80px;background:linear-gradient(to bottom,#77716c 0 1px,transparent 1px 20px,#77716c 20px 21px,transparent 21px 40px,#77716c 40px 41px,transparent 41px 60px,#77716c 60px 61px,transparent 61px 79px,#77716c 79px 80px)}.clef{position:absolute;left:0;top:43px;font-family:"Times New Roman";font-size:78px;color:var(--navy)}.staff-note{position:absolute;width:19px;height:13px;background:var(--navy);border-radius:50%;top:99px;left:46%;transform:translateX(-50%);opacity:0}.staff-note.show{animation:notein .45s forwards}.staff-note.stem:after{content:"";position:absolute;width:2px;height:43px;background:var(--navy);right:2px;bottom:7px}@keyframes notein{from{opacity:0;transform:translate(-50%,10px) scale(.7)}to{opacity:1;transform:translate(-50%,0) scale(1)}}.staff-label{text-align:center;font-size:12px;color:#776e68;margin-top:7px}.connection{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;gap:18px}.connection-box{padding:22px;border:1px solid var(--line);background:#FAFAF8;border-radius:8px;text-align:center}.connection-box strong{font-family:"Playfair Display";font-size:21px;color:var(--navy);display:block}.connection-box small{font-size:10px;color:#8b817b}.connection-arrow{font-size:28px;color:var(--rose);text-align:center}
/* V4 prefixed illustration styles preserved verbatim from the combined baseline. */
.v4-scene{width:100%;max-width:880px;min-height:300px;position:relative}.v4-scene-title{text-align:center;color:var(--navy);font-family:"Playfair Display";font-size:20px;margin-bottom:22px}.v4-sound-lab{display:flex;flex-direction:column;align-items:center;gap:25px}.v4-sound-orbit{width:170px;height:170px;border-radius:50%;border:1px solid #dbcfc4;position:relative;display:grid;place-items:center}.v4-sound-orbit:before,
.v4-sound-orbit:after{content:"";position:absolute;border:1px solid var(--rose2);border-radius:50%;inset:18px;opacity:.65}.v4-sound-orbit:after{inset:38px}.v4-sound-orbit .note{font-family:"Playfair Display";font-size:48px;color:var(--rose);z-index:1}.v4-sound-orbit.playing{animation:v4-pulse 1.1s ease-in-out infinite}.v4-sound-orbit.playing:before{animation:v4-ring 1.1s ease-out infinite}.v4-sound-orbit.playing:after{animation:v4-ring 1.1s .2s ease-out infinite}@keyframes v4-pulse{50%{transform:scale(1.04)}}@keyframes v4-ring{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.35);opacity:0}}.v4-sound-words{display:flex;gap:32px}.v4-sound-words div{text-align:center}.v4-sound-words b{display:block;font-family:"Playfair Display";font-size:18px;color:var(--navy)}.v4-sound-words small{font-size:10px;color:#8a817a}.v4-pitch-lab{text-align:center}.v4-pitch-card{display:inline-flex;align-items:flex-end;gap:18px;padding:22px 28px;border:1px solid var(--line);border-radius:8px;background:#FAFAF8}.v4-pitch-bar{width:26px;border-radius:4px 4px 0 0;background:var(--navy)}.v4-pitch-bar.high{height:125px}.v4-pitch-bar.low{height:45px}.v4-pitch-label{font-size:11px;color:#77706a;margin-top:9px}.v4-pitch-arrow{height:80px;display:flex;align-items:center;justify-content:center;gap:30px;color:var(--navy)}.v4-piano-scene{text-align:center;width:100%}.v4-piano-message{height:35px;font-family:"Playfair Display";font-size:20px;color:var(--navy);margin-bottom:13px}.v4-piano{height:185px;display:flex;justify-content:center;position:relative;padding:0 4px}.v4-white{height:170px;width:53px;background:#fff;border:1px solid #cfc7bf;border-radius:0 0 6px 6px;position:relative;z-index:1;cursor:pointer;transition:.12s}.v4-white span{position:absolute;bottom:8px;left:0;right:0;font-size:10px;color:#8b817a}.v4-white.active{background:#DDD8CE;transform:translateY(3px)}.v4-black{height:104px;width:32px;background:var(--navy);border-radius:0 0 4px 4px;position:absolute;z-index:2;cursor:pointer;transform:translateX(-50%);box-shadow:0 4px 5px #0002}.v4-black.active{background:var(--rose);transform:translateX(-50%) translateY(3px)}.v4-piano-note{font-size:11px;color:#7e756f;margin-top:13px}.v4-staff-scene{width:100%;max-width:760px}.v4-staff-wrap{height:210px;position:relative;margin:0 auto}.v4-staff-lines{position:absolute;left:8%;right:2%;top:65px;height:80px;background:linear-gradient(to bottom,#77716c 0 1px,transparent 1px 20px,#77716c 20px 21px,transparent 21px 40px,#77716c 40px 41px,transparent 41px 60px,#77716c 60px 61px,transparent 61px 79px,#77716c 79px 80px)}.v4-clef{position:absolute;left:0;top:43px;font-family:"Times New Roman";font-size:78px;color:var(--navy)}.v4-staff-note{position:absolute;width:19px;height:13px;background:var(--navy);border-radius:50%;top:99px;left:46%;transform:translateX(-50%);opacity:0}.v4-staff-note.show{animation:v4-notein .45s forwards}.v4-staff-note.stem:after{content:"";position:absolute;width:2px;height:43px;background:var(--navy);right:2px;bottom:7px}@keyframes v4-notein{from{opacity:0;transform:translate(-50%,10px) scale(.7)}to{opacity:1;transform:translate(-50%,0) scale(1)}}.v4-staff-label{text-align:center;font-size:12px;color:#776e68;margin-top:7px}.v4-connection{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;gap:18px}.v4-connection-box{padding:22px;border:1px solid var(--line);background:#FAFAF8;border-radius:8px;text-align:center}.v4-connection-box strong{font-family:"Playfair Display";font-size:21px;color:var(--navy);display:block}.v4-connection-box small{font-size:10px;color:#8b817b}.v4-connection-arrow{font-size:28px;color:var(--rose);text-align:center}
@media(max-width:850px){.site-header{height:auto;padding:18px 24px}.header-left{display:block}.course-kicker{margin-bottom:5px}.header-right{gap:0}.progress-wrap{display:none}.logo{min-width:72px}.logo-script{font-size:23px}main{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:25px}.lesson{padding:38px 24px}.lesson h2{font-size:42px}.stage{padding:25px 12px;min-height:340px}.player-top{align-items:flex-start;gap:14px}.player-actions{flex-direction:column}.connection,
.v4-connection{grid-template-columns:1fr}.connection-arrow,
.v4-connection-arrow{transform:rotate(90deg)}footer{padding:0 24px}.footer span:last-child{display:none}}

/* ===== Dolce shell refinements: header, student profile, curriculum, footer ===== */

.site-header{height:112px;padding:0 4.8vw;align-items:center}
.header-left{gap:14px}.course-kicker{font-size:9px}.course-title{font-size:20px}
.header-right{gap:18px}.toc-header-button{border:1px solid var(--line);background:var(--paper);color:var(--navy);padding:9px 12px;border-radius:5px;font:10px "DM Sans";cursor:pointer}.toc-header-button:hover{border-color:var(--rose2);background:#F7F6F2}
.academy-logo{display:block;width:180px;height:auto;max-height:78px;object-fit:contain;object-position:right center}
.profile-button{width:46px;height:46px;border-radius:50%;padding:0;border:2px solid #d7c8b8;background:var(--paper);overflow:hidden;cursor:pointer;box-shadow:0 3px 10px rgba(20,40,59,.09)}.profile-button img{display:block;width:100%;height:100%;object-fit:cover}
.toc-sidebar-button{width:100%;margin-bottom:30px;border:1px solid var(--line);background:rgba(255,253,249,.75);color:var(--navy);padding:11px 13px;border-radius:6px;text-align:left;font:11px "DM Sans";letter-spacing:.03em;cursor:pointer}.toc-sidebar-button span{margin-right:8px;color:var(--rose)}
footer{height:86px;display:flex;flex-direction:column;justify-content:center;gap:5px;text-align:center;font-family:"Playfair Display",Georgia,serif;font-size:16px;letter-spacing:.02em;color:var(--navy)}footer span{font-family:"DM Sans",Arial,sans-serif;font-size:9px;letter-spacing:.18em;text-transform:none;color:#8b827b}
.toc-view{padding:58px 7vw 82px;max-width:1180px}.toc-heading h2{font-family:"Playfair Display",Georgia,serif;font-size:56px;line-height:1.02;font-weight:500;color:var(--navy);margin:14px 0}.toc-heading p{font-family:"Playfair Display",Georgia,serif;font-size:18px;line-height:1.7;color:#665f59;max-width:780px;margin:0}.toc-total{margin-top:18px;font-size:9px;letter-spacing:.18em;color:var(--rose);font-weight:600}.toc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}.toc-card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:25px 27px;box-shadow:0 12px 28px rgba(74,59,43,.045)}.toc-book{font-size:9px;letter-spacing:.2em;color:var(--rose);font-weight:600}.toc-card h3{font-family:"Playfair Display",Georgia,serif;font-size:26px;font-weight:500;color:var(--navy);margin:6px 0}.toc-count{font-size:10px;color:#9a918a;margin-bottom:15px}.toc-card ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.toc-card li{font-size:11px;line-height:1.45;padding:8px 0;border-top:1px solid #E7E4DE;color:#514e4b;display:flex;gap:9px}.toc-card li span{font-size:9px;color:#a39a92;min-width:18px}.toc-card li:hover{color:var(--navy)}
@media(max-width:1100px){.academy-logo{width:141px}.header-right{gap:11px}.toc-header-button{display:none}}
@media(max-width:850px){.site-header{height:auto;padding:16px 24px}.header-left{display:block}.header-right{gap:9px}.academy-logo{width:126px;max-height:58px}.profile-button{width:42px;height:42px}.toc-grid{grid-template-columns:1fr}.toc-view{padding:38px 24px 70px}.toc-heading h2{font-size:43px}.toc-card ol{grid-template-columns:1fr}.toc-sidebar-button{margin-bottom:22px}}

/* Final header refinement */

.header-left{align-items:center}
.header-left .course-title{font-size:22px;color:var(--navy);margin:0}
.profile-button{display:grid;place-items:center;background:var(--navy);color:#fff;border:2px solid #d7c8b8}
.profile-button img{display:none}
.profile-initials{font:600 13px "DM Sans",Arial,sans-serif;letter-spacing:.06em;color:#fff}


/* Header v3: branded logo left + student profile dropdown. Lesson/illustration styles are unchanged. */


.site-header{height:104px;padding:0 4.8vw;align-items:center}
.header-left{display:flex;align-items:center;min-width:0}
.academy-logo{display:block;width:213px;height:auto;max-height:82px;object-fit:contain;object-position:left center}
.header-right{display:flex;align-items:center;gap:26px}
.course-title{font-family:"Playfair Display",Georgia,serif;font-size:20px;color:var(--navy);margin:0}
.profile-menu{position:relative}
.profile-button{width:46px;height:46px;border-radius:50%;padding:0;display:grid;place-items:center;background:var(--navy);color:#fff;border:2px solid #d7c8b8;overflow:hidden;cursor:pointer;box-shadow:0 3px 10px rgba(20,40,59,.09)}
.profile-initials{font:600 13px "DM Sans",Arial,sans-serif;letter-spacing:.06em;color:#fff}
.profile-dropdown{position:absolute;right:0;top:58px;width:255px;background:#FAFAF8;background-image:none;border:1px solid var(--line);border-radius:8px;box-shadow:none;padding:9px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:30}
.profile-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.profile-dropdown-head{display:flex;align-items:center;gap:11px;padding:11px 10px 13px;border-bottom:1px solid var(--line);margin-bottom:5px}
.profile-dropdown-initials{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font:600 11px "DM Sans";letter-spacing:.05em}
.profile-dropdown-head strong{display:block;font:600 13px "DM Sans";color:var(--navy)}
.profile-dropdown-head span:not(.profile-dropdown-initials){display:block;font-size:10px;color:var(--muted);margin-top:2px}
.profile-item{display:block;width:100%;border:0;background:transparent;text-align:left;padding:11px 10px;border-radius:5px;color:#514e4b;font:12px "DM Sans";cursor:pointer}
.profile-item:hover{background:#ECEAE5;color:var(--navy)}
.profile-progress{padding:10px;border-bottom:1px solid var(--line)}
.profile-progress-row{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);margin-bottom:7px}
.profile-progress-row strong{font-weight:600;color:var(--navy)}
.profile-progress-track{height:5px;background:#E5E2DC;border-radius:99px;overflow:hidden}
.profile-progress-track div{height:100%;width:0;background:var(--rose);border-radius:99px;transition:width .25s ease}
.profile-item.sign-out{color:#8b5e59;margin-top:4px}
@media(max-width:850px){.site-header{height:auto;padding:15px 24px}.academy-logo{width:153px;max-height:62px}.header-right{gap:13px}.course-title{display:none}.profile-button{width:42px;height:42px}.profile-dropdown{top:53px;width:235px}}
@media(max-width:500px){.academy-logo{width:126px}.profile-dropdown{right:-4px}}


/* V4 shell refinement: restore the V2 logo size and course progress indicator. */


.site-header{height:104px;padding:0 4.8vw;align-items:center}
.academy-logo{width:180px;max-height:78px}
.header-right{display:flex;align-items:center;gap:26px}
.progress-wrap{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.04em;color:#918980;white-space:nowrap}
.progress-wrap strong{color:var(--navy);font-weight:600;letter-spacing:.05em}
@media(max-width:1100px){.academy-logo{width:180px}.header-right{gap:16px}}
@media(max-width:850px){.site-header{height:auto;padding:15px 24px}.academy-logo{width:153px;max-height:62px}.header-right{gap:13px}.progress-wrap{display:none}.course-title{display:none}.profile-button{width:42px;height:42px}.profile-dropdown{top:53px;width:235px}}
@media(max-width:500px){.academy-logo{width:126px}.profile-dropdown{right:-4px}}
main{min-height:calc(100vh - 190px);overflow:visible}
.lesson{max-width:none;padding:0;min-width:0;min-height:calc(100vh - 190px);display:flex;flex-direction:column}
.lesson-book-header{display:flex;align-items:center;justify-content:space-between;padding:18px 7vw 0;flex:none}
.lesson-book-label{font-size:10px;letter-spacing:.2em;font-weight:600;color:var(--rose)}
.lesson-chapter-label{font-size:10px;letter-spacing:.18em;font-weight:600;color:#8a817a}
.lesson-pages{flex:0 0 auto;position:relative;overflow:visible}
.lesson-page{display:none;min-height:calc(100vh - 190px - 62px);padding:48px 7vw 40px;position:relative;overflow:hidden;background:var(--cream)}
.lesson-page.active{display:flex;flex-direction:column}
.lesson-page:after{content:"";position:absolute;inset:40px;border:1px solid rgba(223,215,205,.7);pointer-events:none}
.page-number{display:none}
.chapter-page{justify-content:flex-start}.chapter-content{max-width:820px;margin:0;position:relative;z-index:1;padding-top:4px}.chapter-kicker{font-size:10px;letter-spacing:.25em;color:var(--rose);font-weight:600;margin-bottom:16px}.chapter-page h2{font-family:"Playfair Display",Georgia,serif;font-size:64px;line-height:1.02;font-weight:500;letter-spacing:-.03em;color:var(--navy);margin:0 0 18px}.chapter-page .lead{font-size:20px;line-height:1.75;max-width:760px}.chapter-page .concepts{margin:25px 0 28px}.chapter-rule{width:80px;border-top:2px solid var(--rose);margin:8px 0 20px}.chapter-prompt{font-size:12px;color:#7b746e;max-width:590px;line-height:1.7}
.page-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;position:relative;z-index:2}.page-heading h3{font-family:"Playfair Display",Georgia,serif;font-size:32px;font-weight:500;color:var(--navy);margin:5px 0 0}.page-count{font-size:9px;letter-spacing:.15em;color:#9b9189}.demo-page{padding-bottom:18px}.demo-instruction{text-align:center;font-size:11px;color:#918780;margin:14px 0 5px;position:relative;z-index:2}.demo-stage-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.demo-stage{width:100%;height:100%;max-width:920px;border:1px solid var(--line);background:linear-gradient(180deg,#FAF9F6 0%,#F3F1ED 100%);border-radius:8px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;box-shadow:0 14px 34px rgba(74,59,43,.055);padding:25px}.demo-stage:hover{border-color:#cbb9ad}.demo-stage:focus-visible{outline:2px solid var(--rose);outline-offset:3px}.demo-stage.is-running{box-shadow:0 18px 44px rgba(74,59,43,.09)}.demo-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(20,40,59,.9);color:#fff;border-radius:20px;padding:7px 13px;font-size:10px;letter-spacing:.04em;pointer-events:none;z-index:5}.player-caption{position:relative;z-index:2;padding:10px 4px 6px;border-top:0;display:flex;gap:18px;align-items:baseline}.player-caption span{font-size:9px;letter-spacing:.13em;color:var(--rose);white-space:nowrap}.player-caption p{margin:0;color:#746d67;font-size:11px;line-height:1.4}.replay-icon{position:absolute;right:6vw;bottom:46px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--navy);font-size:18px;cursor:pointer;z-index:3}.timeline{height:3px;background:#E7E4DE;position:relative;z-index:2}.timeline #timelineFill{height:100%;width:0;background:var(--rose);transition:width .2s linear}
.explanation-page{justify-content:center}.explanation-content{max-width:900px;width:100%;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;position:relative;z-index:1}.explanation-visual{height:260px;border:1px solid var(--line);border-radius:8px;background:#F3F1ED;display:grid;place-items:center}.mini-note{font-size:120px;color:var(--navy);font-family:"Playfair Display",serif}.mini-keyboard{font-family:"Playfair Display",serif;font-size:26px;color:var(--navy);padding:30px;border-bottom:8px solid #D7D3CB;letter-spacing:.1em}.mini-staff{width:80%;height:150px;position:relative}.mini-staff i{position:absolute;top:55px;left:10%;right:5%;height:80px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 15px,#77716c 16px,#77716c 17px)}.mini-staff span{position:absolute;z-index:2;font:70px "Times New Roman";color:var(--navy);top:35px}.mini-staff b{position:absolute;z-index:3;width:18px;height:12px;background:var(--navy);border-radius:50%;left:58%;top:88px}.explanation-copy p{font-family:"Playfair Display",Georgia,serif;font-size:19px;line-height:1.75;color:#665f59}.concept-callout{margin-top:22px;border-left:2px solid var(--rose);padding:14px 18px;color:var(--navy);font:17px "Playfair Display";line-height:1.55}
.apply-page{justify-content:center}.interactive-content{max-width:800px;width:100%;margin:auto;position:relative;z-index:1;text-align:center}.apply-question{font:16px "Playfair Display";color:#6b655f;margin:18px 0}.apply-choice-grid,
.alphabet-choice{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.apply-choice-grid button,
.alphabet-choice button{min-width:110px;padding:15px 22px;background:var(--paper);border:1px solid var(--line);border-radius:6px;color:var(--navy);font:14px "DM Sans";cursor:pointer}.apply-choice-grid button:hover,
.alphabet-choice button:hover,
.apply-choice-grid button.active,
.alphabet-choice button.active{border-color:var(--rose);background:#E9E6E0}.apply-piano{height:170px;display:flex;justify-content:center;align-items:flex-start;gap:2px}.apply-piano button{width:68px;height:150px;background:#fff;border:1px solid #cfc7bf;border-radius:0 0 6px 6px;position:relative;cursor:pointer;color:#817a73;font-size:10px;align-self:flex-start}.apply-piano button.active{background:#DDD8CE;transform:translateY(3px)}.staff-apply{width:80%;height:170px;margin:0 auto 12px;position:relative}.apply-staff-lines{position:absolute;left:5%;right:5%;top:50px;height:80px;background:linear-gradient(to bottom,#77716c 0 1px,transparent 1px 20px,#77716c 20px 21px,transparent 21px 40px,#77716c 40px 41px,transparent 41px 60px,#77716c 60px 61px,transparent 61px 79px,#77716c 79px 80px)}.apply-note{position:absolute;width:19px;height:13px;background:var(--navy);border-radius:50%;left:55%;top:91px}.apply-key-label{position:absolute;bottom:0;left:0;right:0;color:#8a817a;font-size:11px}.interaction-feedback{text-align:center;min-height:30px;color:var(--navy);font-size:12px;position:relative;z-index:2}.finish-page{justify-content:center}.finish-content{max-width:720px;margin:auto;position:relative;z-index:1}.finish-content h3{font:500 42px "Playfair Display";color:var(--navy);margin:8px 0 14px}.finish-content p{font:18px "Playfair Display";line-height:1.75;color:#665f59}.finish-summary{display:flex;gap:7px;flex-wrap:wrap;margin-top:24px}.finish-summary span{padding:7px 11px;background:#E5E2DC;border:1px solid rgba(223,215,205,.65);border-radius:30px;color:#645b55;font-size:10px}
.lesson-navigation{height:62px;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 7vw;background:transparent;border-top:0;z-index:4;margin-top:12px}.page-button{justify-self:end;border:1px solid var(--navy);background:var(--navy);color:#fff;padding:11px 17px;border-radius:5px;font:11px "DM Sans";cursor:pointer}.page-button.secondary{justify-self:start;background:transparent;color:var(--navy);border-color:var(--line)}.page-button:disabled{opacity:.4;cursor:default}.lesson-page-status{font-size:9px;letter-spacing:.16em;color:#918780}
.v4-scene{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.v4-piano-scene,
.v4-staff-scene,
.v4-sound-lab,
.v4-pitch-lab,
.v4-connection{max-width:760px;width:100%}
@keyframes v4-press{0%{transform:scale(1)}40%{transform:scale(.985)}100%{transform:scale(1)}}.demo-stage.is-running .v4-scene{animation:v4-press .55s ease-out}
@media(max-width:850px){html,
body{}.site-header{height:auto}.navy-rule{height:5px}main{height:auto;min-height:calc(100vh - 150px);overflow:visible}.lesson{height:auto;min-height:0}.lesson-pages{min-height:0}.lesson-page{min-height:calc(100vh - 150px - 60px);padding:36px 24px 32px}.lesson-page:after{inset:28px}.lesson-book-header{padding:14px 24px 0}.chapter-page h2{font-size:45px}.explanation-content{grid-template-columns:1fr;gap:24px}.explanation-visual{height:190px}.lesson-navigation{height:60px;padding:0 24px}.sidebar{max-height:none}.demo-stage{padding:12px}.page-heading h3{font-size:26px}}


/* ===== Revision: auto-hiding header + contained lesson frame ===== */


.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  transition:transform .28s ease, box-shadow .28s ease;
  will-change:transform;
}
.navy-rule{
  position:fixed;
  top:104px;
  left:0;
  right:0;
  z-index:999;
  transition:transform .28s ease;
}
body{padding-top:110px}
body.header-hidden .site-header{transform:translateY(-104px)}
body.header-hidden .navy-rule{transform:translateY(-110px)}
body.header-visible .site-header{box-shadow:0 8px 22px rgba(20,40,59,.08)}

/* The bordered textbook page is now the lesson box itself. */

.lesson-book-header{padding:18px 7vw 0}
.lesson-pages{
  margin:16px 7vw 0;
  border:1px solid rgba(223,215,205,.9);
  border-radius:8px;
  background:var(--cream);
  overflow:hidden;
  box-shadow:0 12px 34px rgba(74,59,43,.045);
}
.lesson-page{
  min-height:clamp(520px,calc(100vh - 270px),760px);
  height:auto;
  padding:42px clamp(34px,5vw,72px) 38px;
  overflow:visible;
}
.lesson-page:after{display:none}
.demo-page{padding-bottom:28px}
.demo-stage-wrap{min-height:310px}
.demo-stage{min-height:310px;height:auto}
.replay-icon{right:clamp(36px,5vw,72px);bottom:38px}

/* Page progress and page controls intentionally live outside the lesson box. */

.page-progress{
  position:relative;
  margin:24px 7vw 2px;
  height:22px;
}
.page-progress-track{
  position:absolute;
  left:0;
  right:0;
  top:9px;
  height:2px;
  border-radius:999px;
  background:#D8D5CE;
  overflow:hidden;
}
.page-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:var(--rose);
  transition:width .28s ease;
}
.page-progress-dots{
  position:absolute;
  inset:5px 0 auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
}
.page-progress-dots span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--cream);
  border:1px solid #cfc5ba;
  justify-self:center;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.page-progress-dots span:first-child{justify-self:start}
.page-progress-dots span:last-child{justify-self:end}
.page-progress-dots span.active,
.page-progress-dots span.complete{
  background:var(--rose);
  border-color:var(--rose);
}
.page-progress-dots span.active{transform:scale(1.15)}
.lesson-navigation{
  height:64px;
  margin:0;
  padding:0 7vw 10px;
}

@media(max-width:850px){
  body{padding-top:77px}
  .site-header{height:72px;padding:10px 24px}
  .navy-rule{top:72px}
  body.header-hidden .site-header{transform:translateY(-72px)}
  body.header-hidden .navy-rule{transform:translateY(-77px)}
  .lesson-pages{margin:14px 24px 0}
  .lesson-page{min-height:0;padding:34px 24px 32px}
  .page-progress{margin:20px 24px 2px}
  .lesson-navigation{padding:0 24px 8px}
  .demo-stage-wrap,
.demo-stage{min-height:280px}
}

/* ===== Full 12-book curriculum navigation ===== */

.sidebar{
  padding:34px 20px 70px 4vw;
  min-width:0;
}
.curriculum-heading{padding-right:10px;margin-bottom:22px}
.curriculum-heading h1{font-size:30px;margin:7px 0 10px}
.curriculum-heading .sidebar-intro{margin-bottom:0;max-width:245px;font-size:11px;line-height:1.65}
.curriculum-nav{display:block}
.curriculum-book{border-top:1px solid rgba(223,215,205,.9)}
.curriculum-book:last-child{border-bottom:1px solid rgba(223,215,205,.9)}
.book-toggle{
  width:100%;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 9px 14px;
  border-radius:0;
  cursor:pointer;
  color:var(--navy);
  text-align:left;
}
.book-toggle:hover{background:rgba(250,249,246,.58)}
.book-toggle-copy{display:block;min-width:0}
.book-toggle .book-label{display:block;font-size:8px;margin-bottom:4px}
.book-toggle strong{display:block;font-family:"Playfair Display",Georgia,serif;font-size:17px;font-weight:500;line-height:1.2;color:var(--navy)}
.book-toggle-icon{font-size:16px;color:#9b9189;transition:transform .18s ease}
.curriculum-book.open .book-toggle-icon{transform:rotate(180deg)}
.book-lessons{padding:0 0 12px}
.book-lessons[hidden]{display:none}
.curriculum-nav .lesson-link{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:start;
  gap:7px;
  padding:8px 9px;
  border-radius:5px;
  color:#514e4b;
  cursor:pointer;
  text-align:left;
  font:11.5px/1.35 "DM Sans",sans-serif;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.curriculum-nav .lesson-link .num{width:auto;color:#9a918a;font-size:9px;line-height:1.7}
.curriculum-nav .lesson-link:hover{background:rgba(250,249,246,.72);color:var(--navy)}
.curriculum-nav .lesson-link.active{background:var(--paper);color:var(--navy);font-weight:600;border-color:rgba(223,215,205,.8);box-shadow:inset 3px 0 var(--rose)}
.curriculum-nav .lesson-link.planned{color:#706c68}
.curriculum-nav .lesson-link.planned .lesson-link-title::after{content:" ";}
.curriculum-nav .lesson-link.preview-selected{background:rgba(255,253,249,.58);border-color:rgba(223,215,205,.7)}
@media(max-width:850px){
  .sidebar{padding:28px 24px 34px}
  .curriculum-heading h1{font-size:28px}
}


/* ===== Separate page architecture ===== */


.site-header,
.navy-rule,
.sidebar,
footer{display:none!important}
body.lesson-only-page{min-height:100vh;background:var(--cream)}
.top-logo{width:108px;height:48px;object-fit:contain;display:block}
.top-course-name{font-family:"Playfair Display",Georgia,serif;font-size:17px;color:var(--navy)}
.top-progress{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#8f8780}
.top-progress strong{color:var(--navy);font-weight:600}
.icon-button{
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  background:rgba(250,249,246,.78);display:flex;align-items:center;justify-content:center;
  color:var(--navy);text-decoration:none;transition:.18s ease;
}
.icon-button:hover{background:var(--paper);border-color:#cfc4ba}
.toc-button{flex-direction:column;gap:3px}
.toc-button span{width:14px;height:1px;background:currentColor;display:block}
.close-toc{font-family:Arial,sans-serif;font-size:24px;font-weight:300;line-height:1}
.book-start-topics{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:0 auto 38px;max-width:650px}
.book-start-topics span{padding:7px 11px;border:1px solid var(--line);border-radius:99px;background:rgba(250,249,246,.58);font-size:10px;color:#6f665f}
.start-lesson-button:hover{background:var(--navy2)}
/* Lesson page: centered and comfortable, with no page header bar */

.lesson-stage{display:block!important;max-width:none!important;min-height:auto!important;margin:0!important}
.lesson-only-page .lesson{
  width:min(980px,calc(100% - 48px));
  max-width:980px!important;
  margin:0 auto!important;
  padding:28px 0 68px!important;
}
.lesson-only-page .lesson-pages{
  min-height:min(690px,calc(100vh - 210px));
}
.lesson-only-page .lesson-page{
  min-height:min(690px,calc(100vh - 210px));
}
.lesson-only-page .lesson h2{font-size:clamp(42px,5vw,57px)}
.lesson-only-page .profile-dropdown{right:0}

/* TOC page */

.toc-wrap{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:55px 0 90px}
.toc-intro{max-width:660px;margin-bottom:48px}
.toc-intro h1{font-family:"Playfair Display",Georgia,serif;font-size:52px;font-weight:500;color:var(--navy);margin:8px 0 14px}
.toc-intro p{font-family:"Playfair Display",Georgia,serif;font-size:18px;line-height:1.65;color:#655f59;margin:0}
.toc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px}
.toc-book{border-top:1px solid var(--line);padding-top:18px}
.toc-book-heading{display:flex;gap:14px;align-items:baseline;margin-bottom:10px}
.toc-book-heading span{font-size:9px;letter-spacing:.16em;color:var(--rose);font-weight:600;white-space:nowrap}
.toc-book-heading h2{font-family:"Playfair Display",Georgia,serif;font-size:25px;font-weight:500;color:var(--navy);margin:0}
.toc-lessons{display:flex;flex-direction:column}
.toc-lesson{padding:8px 9px;text-decoration:none;color:#5d5752;font-size:12px;border-radius:4px}
.toc-lesson:hover{background:rgba(250,249,246,.76);color:var(--navy)}
.toc-lesson.current{background:var(--paper);color:var(--navy);font-weight:600;box-shadow:inset 2px 0 var(--rose)}

@media(max-width:760px){
  .top-logo{width:88px;height:42px}
  .top-course-name{font-size:15px;display:block}
  .top-progress{display:block;margin-top:3px}
  .lesson-only-page .lesson{width:min(100% - 28px,980px);padding-top:18px!important}
  .lesson-only-page .lesson-pages,
.lesson-only-page .lesson-page{min-height:auto}
  .toc-wrap{width:min(100% - 30px,1120px);padding-top:34px}
  .toc-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .top-course-name{display:none}
.toc-intro h1{font-size:42px}
}

.toc-lesson.upcoming{display:flex;align-items:center;justify-content:space-between;color:#8e8781;cursor:default}
.toc-lesson.upcoming small{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#b1a69d;margin-left:12px}
.top-logo{width:100px;height:42px}
.book-start-topics{
  max-width:780px;
  gap:9px;
  margin-bottom:44px;
}
.book-start-topics span{
  padding:8px 13px;
  font-size:11px;
}
.toc-wrap{
  width:min(1240px,calc(100% - 32px));
  padding:34px 0 88px;
}
.toc-intro{
  max-width:760px;
  margin:0 auto 48px;
  text-align:center;
}
.toc-intro .section-label{margin-bottom:10px}
.toc-intro h1{
  margin:0 0 16px;
  font-size:56px;
}
.toc-intro p{
  max-width:690px;
  margin:0 auto;
  font-size:18px;
  line-height:1.65;
}
.toc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px 26px;
  align-items:start;
}
.toc-book{
  padding-top:16px;
  break-inside:avoid;
}
.toc-book-heading{margin-bottom:9px}
.toc-book-heading h2{font-size:23px}
.toc-lesson{
  padding:7px 8px;
  font-size:11.5px;
  line-height:1.4;
}
.toc-lesson.upcoming small{font-size:7px}

@media(max-width:980px){
  .toc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .top-logo{width:86px;height:38px}
.toc-wrap{width:min(100% - 22px,1240px);padding-top:26px}
  .toc-intro h1{font-size:46px}
}
@media(max-width:620px){
  .toc-grid{grid-template-columns:1fr}
}


/* ===== Top spacing + TOC heading refinement v3 ===== */

/* Remove the unused band of space at the very top. */


body.lesson-only-page{
  margin-top:0!important;
  padding-top:0!important;
}
.top-logo{margin-top:0!important}

/* TOC heading sits centered immediately above the three curriculum columns. */

.toc-wrap{
  padding-top:8px!important;
}
.toc-intro{
  width:min(760px,100%);
  margin:0 auto 28px!important;
  text-align:center!important;
}
.toc-intro .section-label{
  text-align:center!important;
  margin:0 0 8px!important;
}
.toc-intro h1{
  text-align:center!important;
  margin:0 0 12px!important;
}
.toc-intro p{
  margin:0 auto!important;
  text-align:center!important;
}
.toc-grid{
  margin-top:0!important;
}


/* ===== Layout refinement v4 ===== */

/* Word-like 0.5 inch top margin */


body.lesson-only-page{
  padding-top:48px!important;
}

/* Lesson page: make the lesson box use more screen width */

.lesson-only-page .lesson{
  width:min(1180px,calc(100% - 32px))!important;
  max-width:1180px!important;
}
.lesson-only-page .lesson-pages{
  width:100%!important;
}
.lesson-only-page .lesson-page{
  width:100%!important;
}

/* TOC intro centered immediately above the three-column books */

.toc-wrap{
  padding-top:18px!important;
}
.toc-intro{
  width:min(780px,100%)!important;
  margin:0 auto 30px!important;
  text-align:center!important;
}
.toc-intro .section-label,
.toc-intro h1,
.toc-intro p{
  text-align:center!important;
}
.toc-grid{
  margin-top:0!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

@media(max-width:980px){
  .toc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  body.lesson-only-page{padding-top:28px!important}
  .toc-grid{grid-template-columns:1fr!important}
  .lesson-only-page .lesson{width:min(100% - 20px,1180px)!important}
}

/* 48px page margins */

body.lesson-only-page{
  padding:48px!important;
}
@media(max-width:620px){
  body.lesson-only-page{
    padding:28px!important;
  }
}

/* Larger wide-format Dolce Music Academy logo */

.top-logo{
  width:270px!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
}
@media(max-width:760px){
  .top-logo{
    width:220px!important;
    height:auto!important;
  }
}

/* ===== Lesson viewport refinement v10 ===== */
/* Center the lesson experience within the usable page width. */

body.lesson-only-page{
  min-height:100vh!important;
}
.lesson-only-page .lesson-stage{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
  margin:0 auto!important;
}
.lesson-only-page .lesson{
  width:min(1180px,100%)!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:14px 0 18px!important;
  box-sizing:border-box!important;
}

/* Remove excess empty vertical space from the lesson box. */

.lesson-only-page .lesson-pages{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
}
.lesson-only-page .lesson-page{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding-top:20px!important;
  padding-bottom:20px!important;
}

/* Keep navigation immediately beneath the lesson instead of below unused box space. */

.lesson-only-page .lesson-nav,
.lesson-only-page .lesson-navigation,
.lesson-only-page .page-nav{
  margin-top:14px!important;
  margin-bottom:0!important;
}

/* On a normal laptop/desktop viewport, tighten vertical rhythm enough for controls
   to remain visible without changing lesson content or horizontal layout. */
@media (min-width:761px) and (max-height:850px){
  .lesson-only-page .lesson{
    padding-top:6px!important;
    padding-bottom:10px!important;
  }
  .lesson-only-page .lesson-page{
    padding-top:12px!important;
    padding-bottom:12px!important;
  }
  .lesson-only-page .lesson h2{
    margin-top:4px!important;
    margin-bottom:10px!important;
  }
  .lesson-only-page .lesson .lesson-kicker,
.lesson-only-page .lesson .eyebrow{
    margin-bottom:6px!important;
  }
}


/* ===== True lesson centering v11 ===== */

/* Remove inherited page/layout constraints that can reserve empty space on the left. */


body.lesson-only-page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
}

.lesson-only-page .lesson-stage{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  box-sizing:border-box!important;
}

/* Let the lesson itself define the centered content region. */

.lesson-only-page .lesson{
  width:calc(100% - 96px)!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  box-sizing:border-box!important;
}

/* Remove internal fixed widths that can offset the visible lesson box. */

.lesson-only-page .lesson-pages,
.lesson-only-page .lesson-page,
.lesson-only-page .lesson-page.active{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  box-sizing:border-box!important;
}

/* If legacy grid/flex columns are still applied anywhere inside the lesson shell,
   make the shell use the full centered width instead of reserving a sidebar column. */

.lesson-only-page .lesson-shell,
.lesson-only-page .lesson-layout,
.lesson-only-page .lesson-container,
.lesson-only-page .lesson-content{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  grid-template-columns:1fr!important;
  flex-basis:auto!important;
  transform:none!important;
}

/* Keep controls aligned to the same centered lesson width. */

.lesson-only-page .page-progress,
.lesson-only-page .lesson-progress,
.lesson-only-page .lesson-navigation,
.lesson-only-page .lesson-nav,
.lesson-only-page .page-nav{
  width:100%!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

@media(max-width:760px){
  .lesson-only-page .lesson{
    width:calc(100% - 32px)!important;
  }
}

/* Use the page itself as the lesson surface. */

body.lesson-only-page{
  padding:18px 32px 20px!important;
  margin:0!important;
  min-height:100vh!important;
  background:var(--cream)!important;
  overflow-x:hidden!important;
}

.lesson-only-page .lesson-stage{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
}

.lesson-only-page .lesson{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Remove the visible lesson box/card treatment. */

.lesson-only-page .lesson-pages,
.lesson-only-page .lesson-page,
.lesson-only-page .lesson-page.active{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:10px 0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Tighten vertical spacing to maximize viewport use. */

.lesson-only-page .lesson h2{
  margin-top:0!important;
  margin-bottom:10px!important;
}
.lesson-only-page .lesson p{
  margin-top:6px!important;
  margin-bottom:8px!important;
}
.lesson-only-page .lesson-page > *:first-child{
  margin-top:0!important;
}
.lesson-only-page .lesson-page > *:last-child{
  margin-bottom:0!important;
}

/* Keep the page progress and navigation close to the lesson content. */

.lesson-only-page .page-progress,
.lesson-only-page .lesson-progress{
  margin-top:10px!important;
  margin-bottom:8px!important;
}
.lesson-only-page .lesson-navigation,
.lesson-only-page .lesson-nav,
.lesson-only-page .page-nav{
  margin-top:10px!important;
  margin-bottom:0!important;
}

/* Reduce oversized demo/illustration areas on shorter screens. */
@media(min-width:761px) and (max-height:850px){
  body.lesson-only-page{
    padding-top:10px!important;
    padding-bottom:12px!important;
  }
  .lesson-only-page .lesson-page{
    padding-top:4px!important;
    padding-bottom:4px!important;
  }
  .lesson-only-page .lesson h2{
    margin-bottom:6px!important;
  }
  .lesson-only-page .demo-stage,
.lesson-only-page .interactive-stage,
.lesson-only-page .visual-stage{
    max-height:42vh!important;
  }
}

@media(max-width:760px){
  body.lesson-only-page{
    padding:12px 16px 16px!important;
  }
}


/* ===== v13: no lesson boxes + fixed bottom navigation ===== */

/* Reserve only enough bottom room for the fixed page navigation. */


body.lesson-only-page{
  padding-bottom:82px!important;
}

/* Strip visual box/card treatment from every lesson page and all nested lesson sections. */

.lesson-only-page .lesson-page,
.lesson-only-page .lesson-page.active,
.lesson-only-page .lesson-page > section,
.lesson-only-page .lesson-page > div,
.lesson-only-page .demo-stage,
.lesson-only-page .demo-card,
.lesson-only-page .demonstration,
.lesson-only-page .interactive-stage,
.lesson-only-page .visual-stage,
.lesson-only-page .example-card,
.lesson-only-page .practice-card,
.lesson-only-page .apply-card,
.lesson-only-page .concept-card,
.lesson-only-page .scene,
.lesson-only-page .scene-card,
.lesson-only-page .lesson-panel,
.lesson-only-page .content-card,
.lesson-only-page .page-card{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
}

/* Remove extra inset spacing that visually reads like a card on pages 2 and 3. */

.lesson-only-page .demo-stage,
.lesson-only-page .demo-card,
.lesson-only-page .interactive-stage,
.lesson-only-page .visual-stage,
.lesson-only-page .practice-card,
.lesson-only-page .example-card,
.lesson-only-page .lesson-panel,
.lesson-only-page .content-card,
.lesson-only-page .page-card{
  padding-left:0!important;
  padding-right:0!important;
  margin-left:0!important;
  margin-right:0!important;
  width:100%!important;
  max-width:none!important;
}

/* Keep Previous / Next fixed at the very bottom of the viewport. */

.lesson-only-page .lesson-navigation,
.lesson-only-page .lesson-nav,
.lesson-only-page .page-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:100!important;
  width:100%!important;
  margin:0!important;
  padding:12px 32px!important;
  background:var(--cream)!important;
  border-top:1px solid rgba(20,40,59,.12)!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  box-sizing:border-box!important;
}

/* If navigation is wrapped inside a narrower parent, force it to span the viewport. */

.lesson-only-page .lesson-navigation > *,
.lesson-only-page .lesson-nav > *,
.lesson-only-page .page-nav > *{
  flex:0 0 auto;
}

@media(max-width:760px){
  body.lesson-only-page{
    padding-bottom:76px!important;
  }

  .lesson-only-page .lesson-navigation,
.lesson-only-page .lesson-nav,
.lesson-only-page .page-nav{
    padding:10px 16px!important;
  }
}


/* ===== v14: fixed progress above fixed navigation ===== */

/* Leave room for the progress line + navigation at the bottom. */


body.lesson-only-page{
  padding-bottom:112px!important;
}

/* Progress line stays fixed directly above Previous / Next controls. */

.lesson-only-page .page-progress{
  position:fixed!important;
  left:32px!important;
  right:32px!important;
  bottom:62px!important;
  z-index:101!important;
  width:auto!important;
  height:24px!important;
  margin:0!important;
  padding:0!important;
  background:var(--cream)!important;
  box-sizing:border-box!important;
}

/* Make sure the line itself fills the available progress area cleanly. */

.lesson-only-page .page-progress-track{
  left:0!important;
  right:0!important;
  top:10px!important;
}
.lesson-only-page .page-progress-dots{
  inset:6px 0 auto!important;
}

/* Keep nav fixed immediately below the progress line. */

.lesson-only-page .lesson-navigation{
  min-height:62px!important;
  height:62px!important;
  padding:10px 32px!important;
}

/* Page 3 explanation is content, not a card: keep the example visible with no box. */

.lesson-only-page .explanation-content{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
}
.lesson-only-page .explanation-visual{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
}

/* Preserve the actual visual/example that populates inside Page 3. */

.lesson-only-page .mini-note,
.lesson-only-page .mini-keyboard,
.lesson-only-page .mini-staff{
  opacity:1!important;
  visibility:visible!important;
}

@media(max-width:760px){
  body.lesson-only-page{
    padding-bottom:104px!important;
  }
  .lesson-only-page .page-progress{
    left:16px!important;
    right:16px!important;
    bottom:58px!important;
  }
  .lesson-only-page .lesson-navigation{
    height:58px!important;
    min-height:58px!important;
    padding:9px 16px!important;
  }
}


/* ===== v15 lesson controls refinement ===== */

/* Top lesson controls: student progress + exit X only. */


.lesson-only-page .lesson-top-controls{
  position:fixed!important;
  top:16px!important;
  left:24px!important;
  right:24px!important;
  z-index:120!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  pointer-events:none;
}
.lesson-only-page .lesson-student-progress,
.lesson-only-page .lesson-close{
  pointer-events:auto;
}
.lesson-only-page .lesson-student-progress{
  display:flex;
  align-items:center;
  gap:10px;
  color:#8f8780;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lesson-only-page .lesson-student-progress strong{
  color:#14283b;
  font-weight:600;
}
.lesson-only-page .lesson-close{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#14283b;
  border:1px solid #dfd7cd;
  background:rgba(241,240,236,.94);
  font-family:"DM Sans",Arial,sans-serif;
  font-size:21px;
  line-height:1;
}
.lesson-only-page .lesson-close:hover{
  background:#FAF9F6;
}

/* Lower the progress line a little. */

.lesson-only-page .page-progress{
  bottom:56px!important;
}

/* Remove the footer/divider line above the fixed navigation. */

.lesson-only-page .lesson-navigation,
.lesson-only-page .lesson-nav,
.lesson-only-page .page-nav{
  border-top:0!important;
}

/* Keep enough top breathing room for the new lesson controls without recreating a header. */

body.lesson-only-page{
  padding-top:54px!important;
}

@media(max-width:760px){
  .lesson-only-page .lesson-top-controls{
    top:10px!important;
    left:14px!important;
    right:14px!important;
  }
  body.lesson-only-page{
    padding-top:46px!important;
  }
  .lesson-only-page .page-progress{
    bottom:52px!important;
  }
}

/* ===== v16: lesson TOC/profile/X + bottom course progress ===== */

/* Top right controls only. */

.lesson-only-page .lesson-top-controls{
  position:fixed!important;
  top:16px!important;
  left:auto!important;
  right:24px!important;
  z-index:140!important;
  display:block!important;
  pointer-events:none;
}
.lesson-only-page .lesson-top-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  pointer-events:auto;
}
.lesson-only-page .lesson-circle-button{
  width:38px!important;
  height:38px!important;
  border:1px solid #dfd7cd!important;
  border-radius:50%!important;
  background:rgba(241,240,236,.96)!important;
  color:#14283b!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
  box-sizing:border-box!important;
}
.lesson-only-page .lesson-toc-button{
  flex-direction:column!important;
  gap:3px!important;
}
.lesson-only-page .lesson-toc-button span{
  display:block!important;
  width:14px!important;
  height:1px!important;
  background:#14283b!important;
}
.lesson-only-page .lesson-close{
  font-family:"DM Sans",Arial,sans-serif!important;
  font-size:21px!important;
  line-height:1!important;
}
.lesson-only-page .lesson-profile-menu{
  position:relative!important;
}
.lesson-only-page .profile-button{
  width:38px!important;
  height:38px!important;
}

/* Remove old top-left course-progress treatment. */

.lesson-only-page .lesson-student-progress{
  display:none!important;
}

/* Bottom order:
   progress line
   course progress
   page X of X
   previous / next buttons
*/

body.lesson-only-page{
  padding-bottom:128px!important;
}
.lesson-only-page .page-progress{
  bottom:91px!important;
  height:18px!important;
}
.lesson-only-page .bottom-course-progress{
  position:fixed!important;
  left:32px!important;
  right:32px!important;
  bottom:69px!important;
  z-index:103!important;
  margin:0!important;
  text-align:center!important;
  color:#8f8780!important;
  font-size:9px!important;
  line-height:14px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  background:var(--cream)!important;
}
.lesson-only-page .bottom-course-progress strong{
  color:#14283b!important;
  font-weight:600!important;
}

/* Existing page-number label sits between course progress and nav. */

.lesson-only-page .page-counter,
.lesson-only-page .page-number,
.lesson-only-page .page-count{
  position:fixed!important;
  left:50%!important;
  bottom:51px!important;
  transform:translateX(-50%)!important;
  z-index:104!important;
  margin:0!important;
}

/* Navigation remains fixed at the bottom. */

.lesson-only-page .lesson-navigation{
  height:48px!important;
  min-height:48px!important;
  padding:5px 32px!important;
}

@media(max-width:760px){
  .lesson-only-page .lesson-top-controls{
    top:10px!important;
    right:14px!important;
  }
  body.lesson-only-page{
    padding-bottom:122px!important;
  }
  .lesson-only-page .page-progress{
    bottom:87px!important;
  }
  .lesson-only-page .bottom-course-progress{
    left:16px!important;
    right:16px!important;
    bottom:65px!important;
  }
  .lesson-only-page .page-counter,
.lesson-only-page .page-number,
.lesson-only-page .page-count{
    bottom:47px!important;
  }
  .lesson-only-page .lesson-navigation{
    height:44px!important;
    min-height:44px!important;
    padding:4px 16px!important;
  }
}


/* ===== v17: center lesson text, illustrations, and examples ===== */

/* Center all lesson-page text content. */


.lesson-only-page .lesson-page,
.lesson-only-page .lesson-page.active{
  text-align:center!important;
}

.lesson-only-page .lesson-page h1,
.lesson-only-page .lesson-page h2,
.lesson-only-page .lesson-page h3,
.lesson-only-page .lesson-page h4,
.lesson-only-page .lesson-page p,
.lesson-only-page .lesson-page .lesson-kicker,
.lesson-only-page .lesson-page .eyebrow,
.lesson-only-page .lesson-page .section-label,
.lesson-only-page .lesson-page .demo-instruction,
.lesson-only-page .lesson-page .scene-caption,
.lesson-only-page .lesson-page .explanation-content{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Center illustrations, demonstrations, and examples. */

.lesson-only-page .lesson-page svg,
.lesson-only-page .lesson-page canvas,
.lesson-only-page .lesson-page img,
.lesson-only-page .demo-stage,
.lesson-only-page .interactive-stage,
.lesson-only-page .visual-stage,
.lesson-only-page .explanation-visual,
.lesson-only-page .example-card,
.lesson-only-page .practice-card,
.lesson-only-page .apply-card,
.lesson-only-page .concept-card,
.lesson-only-page .scene,
.lesson-only-page .mini-note,
.lesson-only-page .mini-keyboard,
.lesson-only-page .mini-staff{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Center flex/grid-based example areas without changing their content. */

.lesson-only-page .lesson-page .demo-stage,
.lesson-only-page .lesson-page .interactive-stage,
.lesson-only-page .lesson-page .visual-stage,
.lesson-only-page .lesson-page .explanation-visual{
  justify-content:center!important;
  align-items:center!important;
}

/* Center grouped lesson examples and response choices. */

.lesson-only-page .lesson-page .example-grid,
.lesson-only-page .lesson-page .practice-grid,
.lesson-only-page .lesson-page .choice-grid,
.lesson-only-page .lesson-page .answer-grid,
.lesson-only-page .lesson-page .apply-grid{
  justify-content:center!important;
  justify-items:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Keep lists readable while centering the overall block. */

.lesson-only-page .lesson-page ul,
.lesson-only-page .lesson-page ol{
  width:fit-content!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:left!important;
}


/* ===== v18: remove centering constraints ===== */

/* Remove fixed/inherited sizing from the lesson shell hierarchy. */


body.lesson-only-page,
.lesson-only-page .lesson-stage,
.lesson-only-page .lesson,
.lesson-only-page .lesson-pages,
.lesson-only-page .lesson-page,
.lesson-only-page .lesson-page.active,
.lesson-only-page .lesson-shell,
.lesson-only-page .lesson-layout,
.lesson-only-page .lesson-container,
.lesson-only-page .lesson-content,
.lesson-only-page .page-content,
.lesson-only-page .content-wrap,
.lesson-only-page .content-inner{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  float:none!important;
  box-sizing:border-box!important;
}

/* Force single centered flow instead of any old sidebar/two-column layout. */

.lesson-only-page .lesson-stage,
.lesson-only-page .lesson,
.lesson-only-page .lesson-pages,
.lesson-only-page .lesson-page,
.lesson-only-page .lesson-shell,
.lesson-only-page .lesson-layout,
.lesson-only-page .lesson-container,
.lesson-only-page .lesson-content{
  display:block!important;
  grid-template-columns:none!important;
  grid-template-areas:none!important;
  justify-content:initial!important;
  align-items:initial!important;
}

/* Center the actual content blocks within the full viewport width. */

.lesson-only-page .lesson-page > *{
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:none!important;
}

/* Text blocks should truly center instead of inheriting narrow left-aligned widths. */

.lesson-only-page .lesson-page h1,
.lesson-only-page .lesson-page h2,
.lesson-only-page .lesson-page h3,
.lesson-only-page .lesson-page h4,
.lesson-only-page .lesson-page p,
.lesson-only-page .lesson-page .lesson-kicker,
.lesson-only-page .lesson-page .eyebrow,
.lesson-only-page .lesson-page .section-label,
.lesson-only-page .lesson-page .demo-instruction,
.lesson-only-page .lesson-page .scene-caption,
.lesson-only-page .lesson-page .explanation-content{
  width:100%!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

/* Remove left offsets / fixed widths from visual and example wrappers. */

.lesson-only-page .demo-stage,
.lesson-only-page .interactive-stage,
.lesson-only-page .visual-stage,
.lesson-only-page .explanation-visual,
.lesson-only-page .example-card,
.lesson-only-page .practice-card,
.lesson-only-page .apply-card,
.lesson-only-page .concept-card,
.lesson-only-page .scene,
.lesson-only-page .example-grid,
.lesson-only-page .practice-grid,
.lesson-only-page .choice-grid,
.lesson-only-page .answer-grid,
.lesson-only-page .apply-grid{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  float:none!important;
  box-sizing:border-box!important;
  text-align:center!important;
  justify-content:center!important;
  justify-items:center!important;
  align-items:center!important;
}

/* Center SVG/canvas/image assets as independent blocks. */

.lesson-only-page .lesson-page svg,
.lesson-only-page .lesson-page canvas,
.lesson-only-page .lesson-page img{
  display:block!important;
  margin-left:auto!important;
  margin-right:auto!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
}

/* Remove legacy column basis/width values from direct child wrappers. */

.lesson-only-page .lesson-page > div,
.lesson-only-page .lesson-page > section{
  flex:0 1 auto!important;
  flex-basis:auto!important;
  max-width:none!important;
  min-width:0!important;
}

/* Keep only intentional page-edge breathing room. */

body.lesson-only-page{
  padding-left:32px!important;
  padding-right:32px!important;
}

@media(max-width:760px){
  body.lesson-only-page{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}


/* ===== v19: restore lesson pagination ===== */

/* Only the active lesson page should be visible. */


.lesson-only-page .lesson-page{
  display:none!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:10px 0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
  text-align:center!important;
}

.lesson-only-page .lesson-page.active{
  display:block!important;
}

/* Keep the lesson-pages wrapper as a normal single-page container. */

.lesson-only-page .lesson-pages{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

/* Do not let legacy page layout rules reveal inactive pages. */

.lesson-only-page .lesson-page:not(.active){
  visibility:hidden!important;
  position:absolute!important;
  pointer-events:none!important;
  opacity:0!important;
}

/* Active page remains in normal document flow. */

.lesson-only-page .lesson-page.active{
  visibility:visible!important;
  position:relative!important;
  pointer-events:auto!important;
  opacity:1!important;
}

/* Preserve centered content inside each individual page. */

.lesson-only-page .lesson-page.active > *{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Keep page-specific grids/flex layouts intact inside the active page;
   only the outer page wrapper is controlled here. */

.lesson-only-page .lesson-page.active .example-grid,
.lesson-only-page .lesson-page.active .practice-grid,
.lesson-only-page .lesson-page.active .choice-grid,
.lesson-only-page .lesson-page.active .answer-grid,
.lesson-only-page .lesson-page.active .apply-grid{
  width:auto!important;
  max-width:100%!important;
}

/* Remove any v18 rule forcing all lesson-page wrappers to display:block. */

/* Book I — Sound interactive science lesson */

.sound-science{width:100%;text-align:center}
.vibration-demo{height:180px;display:flex;justify-content:center;align-items:center;gap:45px}
.sound-fork{font-family:Georgia,serif;font-size:82px;color:var(--navy);transform:rotate(180deg)}
.sound-fork.ringing{animation:forkVibe .09s linear 8}
@keyframes forkVibe{50%{transform:rotate(180deg) translateX(4px)}}
.sound-particles{display:flex;gap:10px;align-items:center}
.sound-particles i,
.wave-dots circle{background:var(--rose);fill:var(--rose)}
.sound-particles i{width:7px;height:7px;border-radius:50%;display:block}
.sound-particles.moving i{animation:particlePush .7s ease-in-out infinite alternate}
.sound-particles.moving i:nth-child(3n){animation-delay:.12s}.sound-particles.moving i:nth-child(3n/**/+1){animation-delay:.24s}
@keyframes particlePush{to{transform:translateX(12px)}}
.sound-wave-svg{width:min(760px,90%);height:190px;display:block;margin:8px auto}
.sound-wave-path{fill:none;stroke:var(--navy);stroke-width:4;stroke-dasharray:14 10}
.sound-wave-path.moving{animation:waveDash .8s linear infinite}
@keyframes waveDash{to{stroke-dashoffset:-48}}
.ear-diagram,
.sound-path{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:35px auto}
.ear-part,
.sound-path span{padding:10px 14px;border-bottom:1px solid var(--line);min-width:110px}
.ear-part b,
.ear-part small{display:block}.ear-part small{font-size:10px;color:var(--muted);margin-top:4px}
.ear-wave.moving{animation:earWave .7s ease-in-out infinite alternate}
.ear-drum.moving{animation:drum .12s linear 8}.ear-signal.moving{animation:signal 1s ease 1}
@keyframes earWave{to{transform:translateX(10px)}} @keyframes drum{50%{transform:scaleX(.94)}} @keyframes signal{50%{color:var(--rose)}}
.space-demo{display:flex;justify-content:center;align-items:center;gap:24px;margin:45px auto;font-size:32px}
.space-gap{font:600 10px "DM Sans",sans-serif;letter-spacing:.18em;padding:24px 42px;border:1px dashed var(--line);color:var(--muted)}
.space-wave.fade{animation:spaceFade 1.1s ease forwards}@keyframes spaceFade{to{opacity:.08;transform:translateX(25px)}}
.sound-lab{width:min(760px,100%);margin:10px auto;text-align:center}
.sound-lab label{display:block;font-size:12px;letter-spacing:.05em}.sound-lab input{display:block;width:min(520px,90%);margin:14px auto 18px}
.sound-lab button,
.medium-test button{border:1px solid var(--line);background:transparent;color:var(--navy);padding:10px 16px;border-radius:999px;cursor:pointer}
.medium-test{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.lab-wave{height:95px;display:grid;place-items:center}
#labWaveLine{width:min(600px,90%);height:55px;background:repeating-radial-gradient(ellipse at center,transparent 0 15px,rgba(20,40,59,.14) 16px 17px,transparent 18px 28px);opacity:.55}
#labWaveLine.pulse{animation:labPulse .8s ease}@keyframes labPulse{50%{transform:scaleX(1.06);opacity:1}}
@media(max-width:700px){.ear-diagram{gap:7px}.ear-part{min-width:92px}.vibration-demo{gap:18px}.space-gap{padding:18px}}


/* ===== v21 lesson structure refinement ===== */


.lesson-only-page .lesson-meta-list{
  position:fixed!important;
  top:16px!important;
  left:24px!important;
  z-index:135!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  text-align:left!important;
}
.lesson-only-page .lesson-meta-list div{
  display:flex!important;
  align-items:baseline!important;
  gap:8px!important;
  line-height:1.15!important;
}
.lesson-only-page .lesson-meta-list span{
  min-width:84px!important;
  color:#8f8780!important;
  font-size:8px!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.lesson-only-page .lesson-meta-list strong{
  color:#14283b!important;
  font-size:10px!important;
  font-weight:600!important;
}

.lesson-only-page .lesson-page > h1,
.lesson-only-page .lesson-page > h2,
.lesson-only-page .lesson-page > h3,
.lesson-only-page .lesson-page .page-title,
.lesson-only-page .lesson-page .lesson-title,
.lesson-only-page .lesson-page .section-title{
  width:100%!important;
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-top:0!important;
  margin-bottom:14px!important;
  display:block!important;
}

.lesson-only-page .lesson-page p,
.lesson-only-page .lesson-page .lesson-description{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.lesson-only-page .lesson-page .tag-row,
.lesson-only-page .lesson-page .tags,
.lesson-only-page .lesson-page .lesson-tags,
.lesson-only-page .lesson-page .concept-tags{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  width:100%!important;
  margin:12px auto 0!important;
}
.lesson-only-page .lesson-page .tag-row > *,
.lesson-only-page .lesson-page .tags > *,
.lesson-only-page .lesson-page .lesson-tags > *,
.lesson-only-page .lesson-page .concept-tags > *{
  flex:0 0 auto!important;
}




.lesson-only-page .bottom-course-progress,
.lesson-only-page #lessonPageStatus{
  display:none!important;
}
.lesson-only-page .page-progress{
  bottom:88px!important;
}

.lesson-only-page .demo-hint,
.lesson-only-page #demoHint,
.lesson-only-page .press-to-begin{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  display:block!important;
  width:100%!important;
  margin:10px auto 0!important;
  padding:0!important;
  text-align:center!important;
  pointer-events:none!important;
  z-index:auto!important;
}
.lesson-only-page .demo-stage{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.lesson-only-page .demo-stage > .demo-hint,
.lesson-only-page .demo-stage > #demoHint{
  order:99!important;
}

body.lesson-only-page{
  padding-top:64px!important;
}
.lesson-only-page .lesson-navigation{
  bottom:0!important;
}

@media(max-width:760px){
  .lesson-only-page .lesson-meta-list{
    top:10px!important;
    left:14px!important;
  }
  .lesson-only-page .lesson-meta-list span{
    min-width:72px!important;
    font-size:7px!important;
  }
  .lesson-only-page .lesson-meta-list strong{
    font-size:9px!important;
  }
  
  .lesson-only-page .page-progress{
    bottom:82px!important;
  }
  body.lesson-only-page{
    padding-top:58px!important;
  }
}


/* ===== v23 fixed lesson metadata relocation ===== */

/* Ensure the accidental v21 duplicate list is gone if cached markup exists. */


.lesson-only-page .lesson-meta-list{display:none!important}

/* The existing book/chapter header and existing lesson title are physically moved here. */

.lesson-only-page .lesson-location{
  position:fixed!important;
  top:16px!important;
  left:24px!important;
  z-index:135!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:3px!important;
  width:auto!important;
  max-width:360px!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
  background:transparent!important;
}
.lesson-only-page .lesson-location .lesson-book-header{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:2px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.lesson-only-page .lesson-location .lesson-book-label,
.lesson-only-page .lesson-location .lesson-chapter-label{
  display:block!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
  font-size:9px!important;
  line-height:1.25!important;
  letter-spacing:.1em!important;
  color:#8f8780!important;
}
.lesson-only-page .lesson-location #title{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:auto!important;
  max-width:340px!important;
  margin:2px 0 0!important;
  padding:0!important;
  text-align:left!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:500!important;
  color:#14283b!important;
}

/* Remove old in-page spacing left behind by the relocated header/title. */

.lesson-only-page .chapter-page .chapter-content{
  padding-top:0!important;
}
.lesson-only-page .chapter-page .chapter-kicker{
  display:none!important;
}

/* Keep the actual page-specific section headings centered. */

.lesson-only-page .lesson-page h2:not(#title),
.lesson-only-page .lesson-page h3,
.lesson-only-page .lesson-page .page-title,
.lesson-only-page .lesson-page .section-title{
  width:100%!important;
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Center the real concept/tag bubbles beneath the intro paragraph. */

.lesson-only-page #lessonTags,
.lesson-only-page #conceptTags,
.lesson-only-page .tag-row,
.lesson-only-page .lesson-tags,
.lesson-only-page .concept-tags,
.lesson-only-page .chapter-tags{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;
  clear:both!important;
  width:100%!important;
  max-width:none!important;
  margin:12px auto 0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:8px!important;
  text-align:center!important;
}
.lesson-only-page #lessonTags > *,
.lesson-only-page #conceptTags > *,
.lesson-only-page .tag-row > *,
.lesson-only-page .lesson-tags > *,
.lesson-only-page .concept-tags > *,
.lesson-only-page .chapter-tags > *{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;
  flex:0 0 auto!important;
  margin:0!important;
}

/* Prevent legacy left-column behavior on the intro content. */

.lesson-only-page .chapter-page .chapter-content,
.lesson-only-page .chapter-page .chapter-copy{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
  text-align:center!important;
}
.lesson-only-page .chapter-page p{
  width:min(820px,100%)!important;
  max-width:820px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

@media(max-width:760px){
  .lesson-only-page .lesson-location{
    top:10px!important;
    left:14px!important;
    max-width:250px!important;
  }
  .lesson-only-page .lesson-location #title{
    max-width:230px!important;
    font-size:13px!important;
  }
}


/* ===== v24: remove word bubbles and restore title ===== */

/* Remove all word-bubble/tag UI from lesson pages. */


.lesson-only-page #lessonTags,
.lesson-only-page #conceptTags,
.lesson-only-page .tag-row,
.lesson-only-page .tags,
.lesson-only-page .lesson-tags,
.lesson-only-page .concept-tags,
.lesson-only-page .chapter-tags,
.lesson-only-page .pill-row,
.lesson-only-page .keyword-row,
.lesson-only-page .tag,
.lesson-only-page .pill,
.lesson-only-page .chip{
  display:none!important;
}

/* Remove any leftover empty spacing from deleted bubble rows. */

.lesson-only-page .chapter-content,
.lesson-only-page .chapter-copy,
.lesson-only-page .lesson-page{
  gap:0!important;
}

/* Restore the original lesson title as the main centered heading above the paragraph. */

.lesson-only-page #title{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0 auto 14px!important;
  padding:0!important;
  text-align:center!important;
  font-size:clamp(42px,5vw,58px)!important;
  line-height:1.05!important;
  font-weight:500!important;
  color:#14283b!important;
}

/* Keep Book / Chapter labels separate from the title. */

.lesson-only-page .lesson-book-header{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 8px!important;
  padding:0!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:12px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  text-align:center!important;
}

/* Intro paragraph centered directly below the restored title. */

.lesson-only-page .chapter-page p,
.lesson-only-page .lesson-description,
.lesson-only-page .intro,
.lesson-only-page .intro-text{
  width:min(820px,100%)!important;
  max-width:820px!important;
  margin:0 auto!important;
  text-align:center!important;
}
.lesson-only-page .lesson-top-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  pointer-events:auto!important;
}
.lesson-only-page .lesson-circle-button,
.lesson-only-page .profile-button{
  width:38px!important;
  height:38px!important;
}

/* ---------- Common lesson heading ---------- */

.lesson-only-page .universal-lesson-header{
  width:100%!important;
  max-width:none!important;
  margin:0 auto 14px!important;
  padding:0!important;
  display:flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:14px!important;
  text-align:center!important;
  color:#14283b!important;
  background:transparent!important;
}
.lesson-only-page .universal-lesson-header span{
  display:inline-block!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  font-family:"DM Sans",Arial,sans-serif!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.25!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}
.lesson-only-page #universalBook{
  color:#8B7352!important;
}
.lesson-only-page #universalChapter{
  color:#14283b!important;
}

/* Old header is retained only for JS compatibility; never shown. */

.lesson-only-page .lesson-book-header{
  display:none!important;
}
.lesson-only-page .chapter-kicker{
  display:none!important;
}

/* The tiny left-side category label is gone. */

.lesson-only-page .lesson-meta,
.lesson-only-page #lessonCategory{
  display:none!important;
}

/* ---------- Center ALL lesson pages ---------- */

body.lesson-only-page{
  width:100%!important;
  min-height:100vh!important;
  margin:0!important;
  padding:66px 24px 132px!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
}
.lesson-only-page .lesson-stage,
.lesson-only-page .lesson,
.lesson-only-page .lesson-pages,
.lesson-only-page .lesson-page,
.lesson-only-page .lesson-page.active{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}
.lesson-only-page .lesson-page{
  text-align:center!important;
}
.lesson-only-page .lesson-page.active{
  display:block!important;
}

/* Every page title is centered above that page's content. */

.lesson-only-page .lesson-page h1,
.lesson-only-page .lesson-page h2,
.lesson-only-page .lesson-page h3,
.lesson-only-page .lesson-page h4,
.lesson-only-page .page-heading,
.lesson-only-page .finish-content{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.lesson-only-page .page-heading{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  width:100%!important;
  max-width:none!important;
  margin:0 auto 12px!important;
}
.lesson-only-page .page-heading > div{
  width:100%!important;
  text-align:center!important;
}
.lesson-only-page .page-heading .page-count{
  display:none!important;
}

/* Main lesson title on page 1 centered above paragraph. */

.lesson-only-page #title{
  position:static!important;
  width:100%!important;
  max-width:none!important;
  margin:0 auto 14px!important;
  padding:0!important;
  text-align:center!important;
  font-size:clamp(42px,5vw,58px)!important;
  line-height:1.05!important;
}

/* Center paragraphs and explanatory copy. */

.lesson-only-page .lesson-page p,
.lesson-only-page .lead,
.lesson-only-page .explanation-copy,
.lesson-only-page .interaction-feedback,
.lesson-only-page .player-caption,
.lesson-only-page .finish-content{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.lesson-only-page .lead,
.lesson-only-page .chapter-page p,
.lesson-only-page .explanation-copy{
  width:min(860px,100%)!important;
  max-width:860px!important;
}

/* Remove all word-bubble/tag UI and its leftover layout space. */

.lesson-only-page .concepts,
.lesson-only-page #concepts,
.lesson-only-page #lessonTags,
.lesson-only-page #conceptTags,
.lesson-only-page .tag-row,
.lesson-only-page .tags,
.lesson-only-page .lesson-tags,
.lesson-only-page .concept-tags,
.lesson-only-page .chapter-tags,
.lesson-only-page .pill-row,
.lesson-only-page .keyword-row,
.lesson-only-page .tag,
.lesson-only-page .pill,
.lesson-only-page .chip{
  display:none!important;
  margin:0!important;
  padding:0!important;
}

/* Remove random decorative line on left / chapter rule. */

.lesson-only-page .chapter-rule{
  display:none!important;
}

/* Center illustrations, examples, demos, interactive areas. */

.lesson-only-page .demo-stage-wrap,
.lesson-only-page .demo-stage,
.lesson-only-page #demo,
.lesson-only-page .explanation-content,
.lesson-only-page .explanation-visual,
.lesson-only-page .interactive-content,
.lesson-only-page #interactiveContent,
.lesson-only-page .sound-science,
.lesson-only-page .sound-lab,
.lesson-only-page .finish-summary,
.lesson-only-page svg,
.lesson-only-page canvas,
.lesson-only-page img{
  margin-left:auto!important;
  margin-right:auto!important;
}
.lesson-only-page .demo-stage-wrap,
.lesson-only-page .explanation-content,
.lesson-only-page .interactive-content,
.lesson-only-page .finish-content{
  width:100%!important;
  max-width:none!important;
  text-align:center!important;
}
.lesson-only-page .explanation-content{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
}
.lesson-only-page .explanation-visual{
  width:min(900px,100%)!important;
  max-width:900px!important;
}
.lesson-only-page .interactive-content{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}

/* No box/card treatment anywhere in lessons. */

.lesson-only-page .lesson-page,
.lesson-only-page .lesson-page > div,
.lesson-only-page .lesson-page > section,
.lesson-only-page .demo-stage,
.lesson-only-page .explanation-visual,
.lesson-only-page .interactive-content,
.lesson-only-page .concept-callout,
.lesson-only-page .finish-summary{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
}

/* ---------- Demo prompt removal ---------- */

.lesson-only-page .demo-instruction,
.lesson-only-page .demo-hint,
.lesson-only-page #demoHint,
.lesson-only-page .press-to-begin{
  display:none!important;
}
.lesson-only-page .demo-stage{
  overflow:visible!important;
}

/* ---------- Full-width progress line ---------- */

.lesson-only-page .page-progress{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:88px!important;
  width:100vw!important;
  height:18px!important;
  margin:0!important;
  padding:0 0!important;
  z-index:150!important;
  background:var(--cream)!important;
  box-sizing:border-box!important;
}
.lesson-only-page .page-progress-track{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:8px!important;
  width:100%!important;
  margin:0!important;
}
.lesson-only-page .page-progress-dots{
  left:0!important;
  right:0!important;
  width:100%!important;
}

/* ---------- Centered status stack BELOW progress line ---------- */
/* Order: Lesson # / Course progress / Page # of # */




/* Hide all duplicate legacy status labels. */

.lesson-only-page .bottom-course-progress,
.lesson-only-page #lessonPageStatus{
  display:none!important;
}

/* ---------- Bottom nav ---------- */

.lesson-only-page .lesson-navigation{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:4px 24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  z-index:160!important;
  background:var(--cream)!important;
  border:0!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
.lesson-only-page .lesson-navigation .page-button{
  margin:0!important;
}

/* Responsive */
@media(max-width:760px){
  body.lesson-only-page{
    padding:60px 14px 128px!important;
  }
  .lesson-only-page .lesson-top-controls{
    top:10px!important;
    left:12px!important;
  }
  .lesson-only-page .universal-lesson-header{
    flex-direction:column!important;
    gap:2px!important;
    margin-bottom:10px!important;
  }
  .lesson-only-page .page-progress{
    bottom:84px!important;
  }
  
  .lesson-only-page .lesson-navigation{
    height:42px!important;
    min-height:42px!important;
    padding:3px 12px!important;
  }
}


/* =========================================================
   v26 — final lesson alignment refinements
   ========================================================= */

/* Move the centered BOOK / CHAPTER heading upward so its vertical
   position aligns with the top-left TOC / Profile / X controls. */


.lesson-only-page .universal-lesson-header{
  position:fixed!important;
  top:14px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:190!important;
  width:auto!important;
  max-width:calc(100vw - 340px)!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  text-align:center!important;
  white-space:nowrap!important;
  background:transparent!important;
}
.lesson-only-page .universal-lesson-header span{
  line-height:38px!important;
}

/* Preserve room below the top controls/header for lesson content. */

body.lesson-only-page{
  padding-top:66px!important;
}

/* Restore the progress line to the v24/v21-style centered line:
   inset from the page edges rather than spanning the entire viewport. */

.lesson-only-page .page-progress{
  position:fixed!important;
  left:32px!important;
  right:32px!important;
  bottom:88px!important;
  width:auto!important;
  height:18px!important;
  margin:0!important;
  padding:0!important;
  z-index:150!important;
  background:var(--cream)!important;
  box-sizing:border-box!important;
}
.lesson-only-page .page-progress-track{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:8px!important;
  width:100%!important;
  margin:0!important;
}

/* Move Lesson / Course Progress / Page status slightly lower,
   while keeping the entire stack precisely centered. */




@media(max-width:760px){
  .lesson-only-page .universal-lesson-header{
    top:10px!important;
    max-width:calc(100vw - 160px)!important;
    gap:5px!important;
    flex-direction:column!important;
  }
  .lesson-only-page .universal-lesson-header span{
    line-height:16px!important;
  }
  .lesson-only-page .page-progress{
    left:16px!important;
    right:16px!important;
    bottom:84px!important;
  }
  
}


/* =========================================================
   v27 — lesson spacing + top-right controls
   ========================================================= */

/* Move TOC / Profile / X group to the top-right. */


.lesson-only-page .lesson-top-controls{
  position:fixed!important;
  top:14px!important;
  left:auto!important;
  right:18px!important;
  z-index:200!important;
}
.lesson-only-page .lesson-top-actions{
  justify-content:flex-end!important;
}

/* Keep the centered BOOK / CHAPTER heading in its current top alignment. */

.lesson-only-page .universal-lesson-header{
  top:14px!important;
}

/* Shift the actual lesson content, including every page title, slightly lower. */

body.lesson-only-page{
  padding-top:82px!important;
}
.lesson-only-page .lesson-stage{
  padding-top:10px!important;
}
.lesson-only-page .lesson-page.active{
  padding-top:8px!important;
}

/* Move Lesson # / Course Progress / Page # of # a little lower. */




/* Keep previous/next fixed at the bottom and progress line unchanged. */

.lesson-only-page .lesson-navigation{
  bottom:0!important;
}

@media(max-width:760px){
  .lesson-only-page .lesson-top-controls{
    top:10px!important;
    left:auto!important;
    right:12px!important;
  }
  body.lesson-only-page{
    padding-top:76px!important;
  }
  .lesson-only-page .lesson-stage{
    padding-top:8px!important;
  }
  .lesson-only-page .lesson-page.active{
    padding-top:6px!important;
  }
  
}


/* v29 — match Start Lesson page margins to Lesson page */
@media(max-width:760px){
}




/* =========================================================
   v33 — keep Page # of # fully visible on all lesson pages
   ========================================================= */

/* Remove any clipping/height constraints from the centered status stack. */




/* Every line in the stack must remain fully visible. */



/* Keep the bottom navigation behind the status text so it cannot cover the page count. */

.lesson-only-page .lesson-navigation{
  z-index:160!important;
}

/* Ensure the progress line also remains behind the status labels. */

.lesson-only-page .page-progress{
  z-index:150!important;
}

/* Remove any inherited masking/overflow on parent lesson wrappers near the fixed status. */

.lesson-only-page,
.lesson-only-page .lesson-stage,
.lesson-only-page .lesson,
.lesson-only-page .lesson-pages{
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
}

/* Keep the status centered in the same location; only free it from constraints. */



@media(max-width:760px){
  
}


/* ===== v34: default Explore-page formatting ===== */
/* The former See & Hear stage is now Explore for every lesson using this shared template. */


.lesson-only-page .demo-page .player-caption{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  width:100%!important;
  padding:8px 4px 4px!important;
  text-align:center!important;
}
.lesson-only-page .demo-page .player-caption p{
  width:100%!important;
  margin:0 auto!important;
  text-align:center!important;
}
.lesson-only-page .demo-page .replay-icon{
  position:static!important;
  display:block!important;
  margin:4px auto 0!important;
  background:transparent!important;
}
/* Nudge only the Previous / Next buttons upward; keep the navigation bar and all other page elements fixed. */
.lesson-only-page .lesson-navigation .page-button{
  position:relative!important;
  top:-5px!important;
}

/* Keep Previous and Next Page visually balanced with identical button dimensions. */
.lesson-only-page .lesson-navigation .page-button{
  width:124px!important;
  min-width:124px!important;
  box-sizing:border-box!important;
  text-align:center!important;
}


/* ===== v35: lesson browsing + reusable Explore demo navigation ===== */
/* Demo dots sit directly on the existing progression line and are generated from each lesson's scene list. */


.lesson-only-page .demo-page .timeline{
  position:relative!important;
}
.lesson-only-page .demo-page .demo-timeline-dots{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.lesson-only-page .demo-page .demo-timeline-dot{
  width:10px;
  height:10px;
  padding:0;
  border:1px solid var(--navy);
  border-radius:50%;
  background:var(--paper);
  box-shadow:0 0 0 3px var(--paper);
  cursor:pointer;
  pointer-events:auto;
}
.lesson-only-page .demo-page .demo-timeline-dot.active{
  background:var(--navy);
}
.lesson-only-page .demo-page .demo-timeline-dot:focus-visible{
  outline:2px solid var(--rose);
  outline-offset:3px;
}

/* Course-level browsing is intentionally separate from page navigation and assignment state. */

.lesson-only-page .lesson-browse-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin-top:30px;
}
.lesson-only-page .lesson-browse-button{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--navy);
  font:500 11px "DM Sans",sans-serif;
  letter-spacing:.04em;
  text-decoration:none;
  cursor:pointer;
}
.lesson-only-page .lesson-browse-nav .lesson-browse-button:first-child{justify-self:start}
.lesson-only-page .lesson-browse-nav .lesson-browse-button:last-child{justify-self:end}
.lesson-only-page .lesson-browse-button:hover:not(:disabled),
.lesson-only-page .lesson-browse-button:focus-visible{
  border-color:var(--rose);
}
.lesson-only-page .lesson-browse-button:disabled{
  opacity:.38;
  cursor:default;
}
.lesson-only-page .lesson-contents-button{
  padding-inline:20px;
}
.lesson-only-page .lesson-browse-note{
  margin:12px 0 0!important;
  text-align:center;
  font-size:10px!important;
  color:#8a817a!important;
  letter-spacing:.02em;
}
@media(max-width:700px){
  .lesson-only-page .lesson-browse-nav{grid-template-columns:1fr;gap:8px}
  .lesson-only-page .lesson-browse-nav .lesson-browse-button{justify-self:stretch!important}
}


/* Global notation rule: every single staff uses exactly five horizontal lines and four spaces. */


/* v38 — Global staff-notation geometry.
   One staff space is the master unit for lines, clefs, notes, stems and ledger lines. */

:root{
  --notation-space:20px;
  --notation-line:1px;
  --notation-ink:#27364a;
  --notation-staff:#77716c;
}

/* Standard 5-line staff: line centers are 0, 1, 2, 3 and 4 staff-spaces. */

.staff-lines,
.v4-staff-lines,
.apply-staff-lines,
.mini-staff i{
  height:calc(var(--notation-space) * 4 + var(--notation-line));
  background:linear-gradient(to bottom,
    var(--notation-staff) 0 var(--notation-line),
    transparent var(--notation-line) var(--notation-space),
    var(--notation-staff) var(--notation-space) calc(var(--notation-space) + var(--notation-line)),
    transparent calc(var(--notation-space) + var(--notation-line)) calc(var(--notation-space) * 2),
    var(--notation-staff) calc(var(--notation-space) * 2) calc(var(--notation-space) * 2 + var(--notation-line)),
    transparent calc(var(--notation-space) * 2 + var(--notation-line)) calc(var(--notation-space) * 3),
    var(--notation-staff) calc(var(--notation-space) * 3) calc(var(--notation-space) * 3 + var(--notation-line)),
    transparent calc(var(--notation-space) * 3 + var(--notation-line)) calc(var(--notation-space) * 4),
    var(--notation-staff) calc(var(--notation-space) * 4) calc(var(--notation-space) * 4 + var(--notation-line))
  );
}

/* Music glyphs scale from staff spacing instead of arbitrary pixel sizes. */

.clef,
.v4-clef,
.notation-clef,
.mini-staff span{
  font-family:"Apple Symbols","Noto Music","Segoe UI Symbol","Times New Roman",serif;
  color:var(--navy);
  line-height:1;
  height:calc(var(--notation-space) * 4.4);
  display:flex;
  align-items:center;
  overflow:visible;
}
.clef,
.v4-clef{
  top:calc(65px - var(--notation-space) * .72);
  font-size:calc(var(--notation-space) * 3.65);
}
.v4-bass-clef{
  position:absolute;
  left:7px;
  top:calc(65px - var(--notation-space) * .12);
  font-family:"Apple Symbols","Noto Music","Segoe UI Symbol","Times New Roman",serif;
  font-size:calc(var(--notation-space) * 2.65);
  line-height:1;
  color:var(--navy);
  z-index:3;
}

/* Notehead width is about one staff-space and height is about 2/3 of a space. */

.staff-note,
.v4-staff-note,
.apply-note,
.mini-staff b,
.notation-note{
  width:calc(var(--notation-space) * .95);
  height:calc(var(--notation-space) * .66);
  border-radius:50%;
  background:var(--navy);
  transform-origin:center;
}
.staff-note,
.v4-staff-note{
  top:calc(65px + var(--notation-space) * 2 - var(--notation-space) * .33);
}
.apply-note{
  top:calc(50px + var(--notation-space) * 2 - var(--notation-space) * .33);
}

/* Stem length and thickness remain proportional to staff spacing. */

.staff-note.stem:after,
.v4-staff-note.stem:after,
.apply-note.stem:after,
.notation-note.stem:after{
  content:"";
  position:absolute;
  width:max(1.5px,calc(var(--notation-space) * .09));
  height:calc(var(--notation-space) * 3.25);
  background:var(--navy);
  right:1px;
  bottom:calc(var(--notation-space) * .32);
}

/* Ledger lines for future notes outside the staff. Add .ledger-above or .ledger-below. */

.notation-note.ledger-above:before,
.notation-note.ledger-below:before,
.staff-note.ledger-above:before,
.staff-note.ledger-below:before,
.v4-staff-note.ledger-above:before,
.v4-staff-note.ledger-below:before,
.apply-note.ledger-above:before,
.apply-note.ledger-below:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--notation-space) * 1.45);
  height:var(--notation-line);
  background:var(--notation-staff);
  transform:translate(-50%,-50%);
  z-index:-1;
}

/* Small staff uses the same geometry at a reduced scale. */

.mini-staff{--notation-space:16px;}
.mini-staff i{top:43px;height:calc(var(--notation-space) * 4 + var(--notation-line));background:linear-gradient(to bottom,
  var(--notation-staff) 0 var(--notation-line),transparent var(--notation-line) var(--notation-space),
  var(--notation-staff) var(--notation-space) calc(var(--notation-space) + var(--notation-line)),transparent calc(var(--notation-space) + var(--notation-line)) calc(var(--notation-space) * 2),
  var(--notation-staff) calc(var(--notation-space) * 2) calc(var(--notation-space) * 2 + var(--notation-line)),transparent calc(var(--notation-space) * 2 + var(--notation-line)) calc(var(--notation-space) * 3),
  var(--notation-staff) calc(var(--notation-space) * 3) calc(var(--notation-space) * 3 + var(--notation-line)),transparent calc(var(--notation-space) * 3 + var(--notation-line)) calc(var(--notation-space) * 4),
  var(--notation-staff) calc(var(--notation-space) * 4) calc(var(--notation-space) * 4 + var(--notation-line)));
}
.mini-staff span{top:calc(43px - var(--notation-space) * .72);font-size:calc(var(--notation-space) * 3.65)}
.mini-staff b{top:calc(43px + var(--notation-space) * 2 - var(--notation-space) * .33)}


/* ===== v39: notation defaults from supplied reference examples ===== */


:root{
  --notation-beat-width:118px;
  --notation-glyph-font:"Bravura Text","Noto Music","Apple Symbols","Segoe UI Symbol",serif;
}

/* Stem direction: third line and above = down; below third line = up. */

.notation-note.stem:after,
.staff-note.stem:after,
.v4-staff-note.stem:after,
.apply-note.stem:after{
  height:calc(var(--notation-space) * 3.25);
  top:auto;bottom:auto;left:auto;right:auto;
}
.notation-note.stem-up:after,
.staff-note.stem-up:after,
.v4-staff-note.stem-up:after,
.apply-note.stem-up:after{
  right:1px;left:auto;bottom:calc(var(--notation-space) * .32);top:auto;
}
.notation-note.stem-down:after,
.staff-note.stem-down:after,
.v4-staff-note.stem-down:after,
.apply-note.stem-down:after{
  left:1px;right:auto;top:calc(var(--notation-space) * .32);bottom:auto;
}

/* Standard note/rest glyphs. Rests are centered on the staff's third (middle) line. */

.notation-glyph{
  display:inline-grid;place-items:center;
  font-family:var(--notation-glyph-font);
  font-size:calc(var(--notation-space) * 2.05);
  line-height:1;
  color:var(--navy);
  position:relative;
}
.notation-rest.rest-middle-line{
  align-self:center;
  transform:translateY(0);
}
.notation-staff .notation-rest.rest-middle-line{
  position:absolute;top:50%;transform:translateY(-50%);
}

/* Beat spacing is primary: every beat receives exactly one equal-width cell. */

.notation-measure{
  display:grid;
  grid-template-columns:repeat(var(--measure-beats),minmax(var(--notation-beat-width),1fr));
  align-items:center;
  width:100%;
  max-width:calc(var(--notation-beat-width) * var(--measure-beats));
  min-height:88px;
  margin-inline:auto;
}
.notation-beat{
  min-width:0;height:82px;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.notation-beat + .notation-beat{border-left:1px solid transparent}
.beat-cluster{
  display:inline-flex;align-items:center;justify-content:center;position:relative;
}
/* Smaller values sit progressively closer together inside the SAME beat width. */
.beat-cluster.subdivision-1{gap:0}
.beat-cluster.subdivision-2{gap:14px}
.beat-cluster.subdivision-4{gap:8px}
.beat-cluster.subdivision-8{gap:4px}
.beat-cluster.subdivision-16{gap:2px}
.rhythm-note-wrap{display:inline-grid;place-items:center;position:relative}

/* Beam groups are scoped to one .notation-beat, so a beam cannot cross a beat boundary. */

.beat-cluster.beamed{padding-top:14px}
.beat-cluster.beamed:before,
.beat-cluster.beamed:after{
  content:"";position:absolute;left:9px;right:9px;height:3px;background:var(--navy);top:8px;
}
.beat-cluster.beamed.beams-2:after{top:14px}
.beat-cluster.beamed.beams-3{--beam-extra:2}
.beat-cluster.beamed.beams-3:before{box-shadow:0 6px 0 var(--navy),0 12px 0 var(--navy)}
.beat-cluster.beamed.beams-3:after{display:none}
.beat-cluster.beamed.beams-4:before{box-shadow:0 6px 0 var(--navy),0 12px 0 var(--navy),0 18px 0 var(--navy)}
.beat-cluster.beamed.beams-4:after{display:none}

/* In beamed groups, use noteheads/stems visually and let the beam count carry the rhythmic value. */

.beat-cluster.beamed .notation-glyph-note{
  font-size:0;width:14px;height:12px;border-radius:50%;background:var(--navy);display:block;
}
.beat-cluster.beamed .rhythm-note-wrap:after{
  content:"";position:absolute;width:2px;height:36px;background:var(--navy);right:0;bottom:5px;
}

@media (max-width:760px){
  :root{--notation-beat-width:82px}
  .notation-measure{overflow-x:auto;justify-content:start}
}

/* v42 — flexible lesson length + rebuilt Sound lesson */

.lesson-page[hidden]{display:none!important}
.sound-reading-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:28px;max-width:980px;width:100%;margin:10px auto 0;align-items:stretch}
.sound-reading-copy,
.particle-physics-card{padding:28px}
.sound-reading-copy p{margin:0 0 18px}.particle-physics-card h4{margin:0 0 18px;color:var(--navy);font-family:"Playfair Display";font-size:22px}
.physics-chain{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:8px;margin-top:26px}.physics-chain span{padding:12px 8px;border-radius:7px;background:#FAFAF8;border:1px solid #ddd4cb;font-size:11px;color:var(--navy);font-weight:700}.physics-chain b{color:var(--rose);font-size:18px}
.longitudinal-particles{height:108px;display:grid;grid-template-columns:1.1fr .8fr 1.1fr .8fr 1.1fr;align-items:center;gap:0;margin:8px 0 2px;overflow:hidden}.particle-band{height:76px;background-image:radial-gradient(circle,var(--navy) 0 3px,transparent 3.5px);background-size:22px 22px;background-position:center}.particle-band.dense{background-size:12px 22px}.particle-band.loose{background-size:31px 22px;opacity:.65}.particle-labels{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#8b817a;margin-bottom:18px}
.wave-property-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:980px;width:100%;margin:6px auto 0}.wave-property-grid article{border:1px solid var(--line);background:rgba(255,255,255,.6);border-radius:10px;padding:21px 18px;min-height:180px}.wave-property-grid strong{display:block;font-family:"Playfair Display";font-size:20px;color:var(--navy)}.wave-property-grid span{display:inline-block;margin:8px 0 12px;padding:4px 8px;border-radius:999px;background:#efe7df;color:var(--rose);font-size:11px;font-weight:700}.wave-property-grid p{margin:0;font-size:12px;line-height:1.6;color:#67605b}.physics-equation-card{max-width:980px;width:100%;margin:2px auto 0;padding:22px 28px}.physics-equation-card .equation{font-family:"Playfair Display";font-size:34px;color:var(--navy);margin-bottom:8px}.physics-equation-card p{margin:6px 0}.physics-equation-card .science-note{font-size:12px;color:#766d67}
.demo-longitudinal{height:120px;display:flex;align-items:center;justify-content:center;gap:11px;position:relative;overflow:hidden;margin:6px auto 12px;max-width:720px}.demo-longitudinal i{width:7px;height:7px;border-radius:50%;background:var(--navy);display:block;transform:translateX(0)}.demo-longitudinal.moving i{animation:particleOsc .85s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-0.035s)}@keyframes particleOsc{from{transform:translateX(-7px)}to{transform:translateX(7px)}}.demo-pressure-labels{display:flex;justify-content:space-around;max-width:620px;margin:0 auto 12px;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#8a817a}.medium-physics-demo{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:760px;margin:12px auto 18px}.medium-physics-demo div{padding:20px 10px;border:1px solid var(--line);background:#FAFAF8;border-radius:8px}.medium-physics-demo b{display:block;color:var(--navy);margin-bottom:6px}.medium-physics-demo span{font-size:10px;color:#7a716b}.medium-physics-demo .vacuum{border-style:dashed}.medium-physics-demo.active div:not(.vacuum){animation:mediumPulse 1s ease both}.medium-physics-demo.active div:nth-child(2){animation-delay:.15s}.medium-physics-demo.active div:nth-child(3){animation-delay:.3s}@keyframes mediumPulse{50%{transform:translateY(-5px);box-shadow:0 8px 20px #0000000d}}.sound-wave-path{fill:none;stroke:var(--navy);stroke-width:3}
.sound-application-lab{max-width:900px;width:100%;margin:0 auto;display:grid;gap:18px}.sound-lab-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:end}.application-prompts{padding:20px 24px;text-align:left}.application-prompts p{margin:10px 0 8px;font-size:13px;color:#5f5954}.application-prompts>div{display:flex;gap:10px;flex-wrap:wrap}.application-prompts button{background:#FAFAF8;color:var(--navy)}
.sound-application-lab .lab-wave{height:105px;display:flex;align-items:center;overflow:hidden}.sound-application-lab #labWaveLine{--freq:220;--amp:.5;width:100%;height:70px;background:repeating-radial-gradient(ellipse at center,transparent 0 19px,rgba(35,53,63,.10) 20px 21px,transparent 22px 38px);transform:scaleY(calc(.45 + var(--amp)))}
@media(max-width:850px){.sound-reading-grid{grid-template-columns:1fr}.wave-property-grid{grid-template-columns:1fr 1fr}.physics-chain{grid-template-columns:1fr}.physics-chain b{transform:rotate(90deg)}.medium-physics-demo{grid-template-columns:1fr 1fr}}


/* v43 — beginner-first Sound lesson */


.sound-story-page .page-heading{margin-bottom:18px}
.sound-story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:stretch}
.sound-story-copy,
.sound-simple-visual,
.beginner-card{border:1px solid rgba(110,107,99,.24);border-radius:18px;padding:26px;background:rgba(255,255,255,.32)}
.sound-story-copy p,
.beginner-card p{font-size:18px;line-height:1.65}
.sound-big-idea{font-size:22px!important;line-height:1.5!important;margin-top:0}
.real-life-card{margin-top:22px;padding:17px 18px;border-left:3px solid #8B7352;background:rgba(139,115,82,.09);border-radius:0 12px 12px 0}
.real-life-card span{font-size:11px;letter-spacing:.16em;font-weight:700;color:#6E6B63}
.real-life-card p{margin:5px 0 0!important;font-size:16px!important}
.sound-simple-visual{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:13px;text-align:center}
.simple-source,
.simple-ear{padding:13px 16px;border:1px solid rgba(42,41,38,.25);border-radius:12px;font-size:13px;letter-spacing:.1em;font-weight:700}
.simple-wave{font-size:36px;letter-spacing:6px}.simple-arrow{font-size:25px;align-self:center}.sound-simple-visual p{width:100%;font-size:17px;line-height:1.55;margin:12px 0 0}
.beginner-demo small{display:block;margin-top:16px;font-size:12px;letter-spacing:.08em;color:#6E6B63}
.reflection-demo{min-height:145px;display:flex;align-items:center;justify-content:center;gap:28px}
.voice-source{font-weight:700}.travel-wave,
.return-wave{font-size:30px;letter-spacing:5px}.sound-wall{height:115px;border-left:7px solid #6E6B63}
.sound-behavior-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.sound-behavior-grid div{border:1px solid rgba(110,107,99,.25);border-radius:12px;padding:14px 8px;text-align:center;background:rgba(255,255,255,.3)}
.sound-behavior-grid b,
.sound-behavior-grid span{display:block}.sound-behavior-grid span{font-size:12px;margin-top:5px;color:#6E6B63}
.real-life-quiz{margin-bottom:22px}.real-life-quiz>div,
.application-prompts>div{display:flex;gap:10px;flex-wrap:wrap}
.beginner-application .apply-question{margin:16px 0 8px}
@media(max-width:800px){.sound-story-grid{grid-template-columns:1fr}.sound-behavior-grid{grid-template-columns:1fr 1fr}}

/* v44 simple Sound */

.sound-simple-lesson{max-width:820px;margin:0 auto;text-align:center;padding:16px 22px}.simple-lesson-icon{font-size:68px;line-height:1;margin:4px 0 12px}.simple-lesson-lead{font-size:25px;line-height:1.4;margin:10px auto;max-width:650px}.sound-simple-lesson>p{font-size:18px;line-height:1.5;max-width:680px;margin:12px auto}.simple-example-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px auto}.simple-example-row span{padding:12px 16px;border:1px solid rgba(110,107,99,.24);border-radius:999px}.simple-bottom-line{margin-top:24px!important;padding-top:16px;border-top:1px solid rgba(110,107,99,.2)}.simple-wave-journey{display:flex;justify-content:center;align-items:center;gap:25px;margin:28px 0 18px}.simple-wave-journey span{font-size:13px;letter-spacing:.12em;font-weight:700}.simple-wave-journey b{font-size:36px;letter-spacing:7px}.simple-real-life{font-style:italic;color:#6E6B63}.sound-simple-application{max-width:760px;margin:auto;text-align:center;padding:18px}.simple-application-title{font-family:"Playfair Display",serif;font-size:32px;margin-bottom:24px}.simple-flow{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:26px}.simple-flow span{padding:13px 16px;border:1px solid rgba(110,107,99,.24);border-radius:12px}.simple-music-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:570px;margin:0 auto 24px}.simple-music-links div{padding:13px;border-radius:12px;background:rgba(139,115,82,.08)}.simple-music-links strong,
.simple-music-links span{display:block}.simple-music-links span{margin-top:4px}.simple-finish-line{font-size:19px}@media(max-width:650px){.simple-music-links{grid-template-columns:1fr}}


/* v45 — visual, delayed-animation Sound lesson */


.sound-intro-layout{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;max-width:900px;margin:0 auto}.sound-intro-copy p{font-size:19px;line-height:1.55}.sound-intro-lead{font-size:28px!important}.sound-intro-bottom{margin-top:22px}
.delayed-illustration{opacity:0;animation:revealIllustration .7s ease 3s forwards}
@keyframes revealIllustration{to{opacity:1}}
.intro-vibration-illustration{min-height:260px;border:1px solid rgba(110,107,99,.22);border-radius:18px;display:flex;align-items:center;justify-content:center;gap:22px;position:relative;background:rgba(255,255,255,.25)}
.vib-object{width:12px;height:105px;border-radius:8px;background:#2A2926;animation:vibMove .16s ease-in-out infinite alternate}.vib-to-wave{display:flex;gap:7px;align-items:center}.vib-to-wave i,
.born-waves span,
.demo-rings i,
.ear-moving-wave i{display:block;border:2px solid #8B7352;border-left:0;border-top-color:transparent;border-bottom-color:transparent;border-radius:50%;width:18px;height:50px;animation:wavePulse 1.2s ease-out infinite}.vib-to-wave i:nth-child(2),
.born-waves span:nth-child(2),
.demo-rings i:nth-child(2){animation-delay:.18s}.vib-to-wave i:nth-child(3),
.born-waves span:nth-child(3),
.demo-rings i:nth-child(3){animation-delay:.36s}.vib-ear,
.travel-ear,
.mini-ear,
.ear-outline{font-size:12px;letter-spacing:.12em;font-weight:700;border:1px solid rgba(42,41,38,.25);border-radius:50%;padding:20px 10px}.illustration-caption{position:absolute;bottom:18px;font-size:12px;letter-spacing:.1em;color:#6E6B63}
@keyframes vibMove{from{transform:translateX(-4px)}to{transform:translateX(4px)}}@keyframes wavePulse{0%{transform:scale(.65);opacity:.2}50%{opacity:1}100%{transform:scale(1.2);opacity:.15}}
.wave-birth-animation{height:130px;display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto 12px}.moving-source{width:10px;height:85px;background:#2A2926;border-radius:6px;animation:vibMove .14s infinite alternate}.born-waves{display:flex;gap:8px}
.traveling-wave-animation{display:flex;align-items:center;justify-content:center;gap:18px;margin:22px auto}.travel-source{font-size:11px;letter-spacing:.1em;font-weight:700}.travel-track{width:260px;height:65px;position:relative;overflow:hidden}.travel-track i{position:absolute;top:17px;width:25px;height:30px;border:2px solid #8B7352;border-left:0;border-radius:50%;animation:travelWave 2.2s linear infinite}.travel-track i:nth-child(2){animation-delay:.4s}.travel-track i:nth-child(3){animation-delay:.8s}.travel-track i:nth-child(4){animation-delay:1.2s}.travel-track i:nth-child(5){animation-delay:1.6s}@keyframes travelWave{from{left:-25px;opacity:0}20%{opacity:1}to{left:260px;opacity:0}}
.demo-vibration-wave{height:190px;display:flex;justify-content:center;align-items:center;gap:25px}.demo-string{height:125px;width:8px;background:#2A2926;border-radius:5px;animation:vibMove .13s infinite alternate}.demo-rings{display:flex;gap:10px}.pitch-visual,
.loudness-visual{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px auto;max-width:650px}.pitch-visual>div,
.loudness-visual>div{text-align:center;padding:18px;border:1px solid rgba(110,107,99,.2);border-radius:15px}.pitch-visual b,
.pitch-visual small,
.loudness-visual b,
.loudness-visual small{display:block}.pitch-visual small,
.loudness-visual small{margin-top:5px}.animated-wave,
.amp-wave,
.mini-wave{display:block;height:55px;margin:0 auto 12px;background-repeat:repeat-x;background-position:center}.slow-wave{background:radial-gradient(ellipse at center,transparent 55%,#2A2926 58%,transparent 62%);background-size:70px 45px}.fast-wave{background:radial-gradient(ellipse at center,transparent 55%,#2A2926 58%,transparent 62%);background-size:28px 45px}.soft-wave{transform:scaleY(.55);background:repeating-radial-gradient(ellipse at center,transparent 0 15px,#2A2926 16px 18px,transparent 19px 30px)}.loud-wave{transform:scaleY(1.1);background:repeating-radial-gradient(ellipse at center,transparent 0 15px,#2A2926 16px 18px,transparent 19px 30px)}
.ear-visual-demo{display:flex;align-items:center;justify-content:center;gap:25px;min-height:190px}.ear-source{width:10px;height:85px;background:#2A2926;border-radius:5px;animation:vibMove .14s infinite alternate}.ear-moving-wave{display:flex;gap:9px}
.sound-visual-application{text-align:center;max-width:850px;margin:auto}.application-picture-flow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:20px 0 30px}.app-picture{width:180px;min-height:145px;border:1px solid rgba(110,107,99,.22);border-radius:16px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.mini-string{height:65px;width:7px;background:#2A2926;border-radius:5px;animation:vibMove .18s infinite alternate}.mini-waves{display:flex;gap:7px}.mini-waves i{width:15px;height:45px;border:2px solid #8B7352;border-left:0;border-radius:50%;animation:wavePulse 1.2s infinite}.application-picture-pairs{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:650px;margin:0 auto 26px}.picture-pair{border-radius:15px;background:rgba(139,115,82,.07);padding:18px}.picture-pair .mini-wave{width:180px;height:30px;border-bottom:2px solid #2A2926}.fast-mini{background:repeating-linear-gradient(90deg,transparent 0 8px,#8B7352 9px 11px,transparent 12px 18px)}.slow-mini{background:repeating-linear-gradient(90deg,transparent 0 25px,#8B7352 26px 28px,transparent 29px 50px)}.small-mini{transform:scaleY(.5);background:repeating-linear-gradient(90deg,transparent 0 14px,#8B7352 15px 17px,transparent 18px 28px)}.big-mini{transform:scaleY(1.2);background:repeating-linear-gradient(90deg,transparent 0 14px,#8B7352 15px 17px,transparent 18px 28px)}
@media(max-width:750px){.sound-intro-layout,
.application-picture-pairs{grid-template-columns:1fr}.pitch-visual,
.loudness-visual{grid-template-columns:1fr}}


/* v46 technical cleanup */
/* Only the dots attached to the actual Explore progression track remain visible. */


.demo-dots:not(.demo-progress-track .demo-dots),
.demo-dot-row:not(.demo-progress-track .demo-dot-row),
.demo-pagination:not(.demo-progress-track .demo-pagination),
.sound-science .demo-dots,
.visual-demo .demo-dots{display:none!important}


.sound-science>small,
.visual-demo>small,
.beginner-demo>small{
  font-family:inherit;
  font-size:16px!important;
  line-height:1.5!important;
  letter-spacing:normal!important;
  text-transform:none!important;
  color:#2A2926!important;
}


/* v47 — legacy page dots are only for lessons with 5 pages or fewer */


.page-progress-dots[hidden]{display:none!important}

/* Sound Explore: visual-only replacements for former piano/fallback demos */

.pitch-motion-demo,
.loudness-motion-demo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  max-width:720px;
  margin:24px auto 18px;
}
.pitch-motion-card,
.loudness-motion-card{
  min-height:210px;
  border:1px solid rgba(110,107,99,.22);
  border-radius:16px;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:rgba(255,255,255,.26);
}
.pitch-motion-card strong,
.pitch-motion-card span,
.loudness-motion-card strong,
.loudness-motion-card span{display:block}
.pitch-motion-card span,
.loudness-motion-card span{font-size:15px;color:#6E6B63}

.motion-source,
.amplitude-source{
  width:8px;
  height:74px;
  border-radius:5px;
  background:#2A2926;
}
.pitch-motion-card.moving .motion-source.slow{animation:v47SlowVibration .42s ease-in-out infinite alternate}
.pitch-motion-card.moving .motion-source.fast{animation:v47FastVibration .12s ease-in-out infinite alternate}
.motion-wave,
.amplitude-rings{display:flex;align-items:center;gap:8px;height:64px}
.motion-wave i,
.amplitude-rings i{
  display:block;
  width:18px;
  height:48px;
  border:2px solid #8B7352;
  border-left:0;
  border-radius:50%;
}
.pitch-motion-card.moving .motion-wave.slow i{animation:v47WavePulse 1.25s ease-out infinite}
.pitch-motion-card.moving .motion-wave.fast i{animation:v47WavePulse .55s ease-out infinite}
.amplitude-source.small{height:45px}
.amplitude-source.big{height:90px}
.loudness-motion-card.moving .amplitude-source.small{animation:v47SmallAmplitude .2s ease-in-out infinite alternate}
.loudness-motion-card.moving .amplitude-source.big{animation:v47BigAmplitude .2s ease-in-out infinite alternate}
.amplitude-rings.small{transform:scale(.75)}
.amplitude-rings.big{transform:scale(1.15)}
.loudness-motion-card.moving .amplitude-rings i{animation:v47WavePulse 1s ease-out infinite}

@keyframes v47SlowVibration{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
@keyframes v47FastVibration{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
@keyframes v47SmallAmplitude{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
@keyframes v47BigAmplitude{from{transform:translateX(-7px)}to{transform:translateX(7px)}}
@keyframes v47WavePulse{0%{opacity:.2;transform:scale(.7)}50%{opacity:1}100%{opacity:.18;transform:scale(1.18)}}

@media(max-width:720px){
  .pitch-motion-demo,
.loudness-motion-demo{grid-template-columns:1fr}
}


/* v48 — Sound lesson based on supplied video transcript */


.delayed-sound-visual{
  opacity:0;
  animation:v48Reveal .65s ease 1.75s forwards;
}
@keyframes v48Reveal{to{opacity:1}}

.sound-video-sequence .page-heading{margin-bottom:12px}
.sound-sequence-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  max-width:920px;
  margin:0 auto;
  align-items:center;
}
.sound-sequence-copy p{
  font-size:19px;
  line-height:1.55;
  margin:12px 0;
}
.sound-sequence-lead{font-size:25px!important;line-height:1.4!important}
.sound-key-line{
  margin-top:22px!important;
  padding-top:16px;
  border-top:1px solid rgba(110,107,99,.22);
}
.sound-real-example{
  padding:13px 15px;
  border-radius:12px;
  background:rgba(139,115,82,.08);
}
.sound-sequence-visual{
  min-height:260px;
  border:1px solid rgba(110,107,99,.22);
  border-radius:18px;
  background:rgba(255,255,255,.27);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:24px;
}

/* Page 1 vibration */

.vibration-scene{flex-direction:column;gap:18px}
.scene-drum{width:115px;height:72px;border:4px solid #2A2926;border-radius:50%;position:relative}
.scene-drum:after{content:"";position:absolute;left:52px;top:70px;width:7px;height:55px;background:#2A2926}
.scene-drum span{position:absolute;inset:8px;border:2px solid #8B7352;border-radius:50%;animation:v48DrumVibrate .16s ease-in-out infinite alternate}
.scene-vibration-marks{display:flex;gap:135px;position:absolute}
.scene-vibration-marks i{width:18px;height:80px;border:2px solid #8B7352;border-left:0;border-radius:50%;animation:v48Pulse 1s ease-out infinite}
.scene-label{font-size:12px;letter-spacing:.15em;font-weight:700;margin-top:55px}

/* Page 2 wave travel */

.wave-travel-scene{gap:18px}
.wave-source{width:8px;height:90px;background:#2A2926;border-radius:5px;animation:v48Vibrate .15s infinite alternate}
.wave-rings{display:flex;gap:8px}
.wave-rings i{display:block;width:18px;height:55px;border:2px solid #8B7352;border-left:0;border-radius:50%;animation:v48TravelPulse 1.3s ease-out infinite}
.wave-rings i:nth-child(2){animation-delay:.16s}.wave-rings i:nth-child(3){animation-delay:.32s}.wave-rings i:nth-child(4){animation-delay:.48s}
.wave-ear{border:1px solid rgba(42,41,38,.3);border-radius:50%;padding:22px 10px;font-size:11px;font-weight:700;letter-spacing:.12em}

/* Amplitude and frequency reading visuals */

.amplitude-scene,
.frequency-scene{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.amplitude-example,
.frequency-example{text-align:center}
.amplitude-example span,
.amplitude-example strong,
.frequency-example span,
.frequency-example strong{display:block}
.amplitude-example span,
.frequency-example span{font-size:11px;letter-spacing:.12em;margin-top:10px}
.wave-drawing,
.freq-wave,
.demo-wave,
.demo-frequency{height:80px;width:180px;margin:auto;position:relative;overflow:hidden}
.wave-drawing:before,
.freq-wave:before,
.demo-wave:before,
.demo-frequency:before{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:repeat-x;
  background-position:center;
}
.wave-small:before,
.small-amplitude:before{background:radial-gradient(ellipse at center,transparent 55%,#8B7352 57%,transparent 60%);background-size:48px 34px}
.wave-large:before,
.large-amplitude:before{background:radial-gradient(ellipse at center,transparent 55%,#8B7352 57%,transparent 60%);background-size:48px 74px}
.freq-low:before,
.low-frequency:before{background:radial-gradient(ellipse at center,transparent 55%,#8B7352 57%,transparent 60%);background-size:82px 58px}
.freq-high:before,
.high-frequency:before{background:radial-gradient(ellipse at center,transparent 55%,#8B7352 57%,transparent 60%);background-size:30px 58px}

/* Explore visuals */

.transcript-amplitude-demo,
.transcript-frequency-demo{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:680px;margin:22px auto
}
.transcript-amplitude-demo>div,
.transcript-frequency-demo>div{
  text-align:center;border:1px solid rgba(110,107,99,.2);border-radius:15px;padding:18px
}
.transcript-amplitude-demo strong,
.transcript-amplitude-demo span,
.transcript-frequency-demo strong,
.transcript-frequency-demo span{display:block}
.transcript-amplitude-demo span,
.transcript-frequency-demo span{font-size:15px;margin-top:5px;color:#6E6B63}

/* Application visuals */

.sound-transcript-application{max-width:820px;margin:auto;text-align:center}
.sound-at-glance-flow{display:flex;align-items:center;justify-content:center;gap:18px;margin:18px 0 28px}
.glance-card{width:210px;min-height:150px;border:1px solid rgba(110,107,99,.22);border-radius:15px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.glance-card strong,
.glance-card span{display:block}.glance-card span{font-size:14px;color:#6E6B63}
.glance-vibration{width:8px;height:60px;background:#2A2926;border-radius:5px;animation:v48Vibrate .16s infinite alternate}
.glance-wave{display:flex;gap:7px}.glance-wave i{width:15px;height:42px;border:2px solid #8B7352;border-left:0;border-radius:50%;animation:v48Pulse 1.1s infinite}
.sound-at-glance-pairs{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:650px;margin:auto}
.glance-pair{padding:18px;border-radius:15px;background:rgba(139,115,82,.07)}
.glance-wave-small,
.glance-wave-big,
.glance-freq-low,
.glance-freq-high{height:34px;margin:8px auto;width:190px;border-bottom:2px solid #8B7352}
.glance-wave-small{transform:scaleY(.55)}.glance-wave-big{transform:scaleY(1.35)}
.glance-freq-low{background:repeating-linear-gradient(90deg,transparent 0 34px,#8B7352 35px 37px,transparent 38px 68px)}
.glance-freq-high{background:repeating-linear-gradient(90deg,transparent 0 10px,#8B7352 11px 13px,transparent 14px 22px)}

@keyframes v48Vibrate{from{transform:translateX(-4px)}to{transform:translateX(4px)}}
@keyframes v48DrumVibrate{from{transform:scale(.96)}to{transform:scale(1.04)}}
@keyframes v48Pulse{0%{opacity:.25;transform:scale(.75)}50%{opacity:1}100%{opacity:.2;transform:scale(1.18)}}
@keyframes v48TravelPulse{0%{opacity:.15;transform:translateX(-8px) scale(.7)}60%{opacity:1}100%{opacity:.15;transform:translateX(12px) scale(1.15)}}

@media(max-width:760px){
  .sound-sequence-layout{grid-template-columns:1fr}
  .amplitude-scene,
.frequency-scene,
.transcript-amplitude-demo,
.transcript-frequency-demo,
.sound-at-glance-pairs{grid-template-columns:1fr}
  .sound-at-glance-flow{flex-direction:column}
}

/* v49 concise/open Sound revision */

.delayed-sound-visual{opacity:0;animation:v49Reveal .55s ease 1.75s forwards!important}@keyframes v49Reveal{to{opacity:1}}
.sound-clean-copy{max-width:760px;margin:0 auto;text-align:center}.sound-clean-copy p{font-size:19px;line-height:1.5;margin:10px auto}.sound-clean-lead{font-size:30px!important}.sound-example-line{color:#6E6B63}
.sound-open-visual{max-width:760px;min-height:190px;margin:15px auto 0;display:flex;align-items:center;justify-content:center;position:relative;padding:5px;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.open-vibrator,
.demo-vibrating-bar{width:8px;height:90px;background:#2A2926;border-radius:5px;animation:v49Vibrate .15s infinite alternate}.open-vibration-mark{font-size:62px;color:#8B7352;position:absolute}.open-vibration-mark.left{transform:translateX(-45px)}.open-vibration-mark.right{transform:translateX(45px)}.open-label{position:absolute;bottom:2px;font-size:15px;color:#6E6B63}
.sound-open-visual svg,
.open-demo svg{overflow:visible}.sound-open-visual path,
.open-demo path{fill:none;stroke:#8B7352;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.frequency-open-demo span,
.demo-frequency-swoops span{font-size:14px;color:#6E6B63}
.open-demo{background:none!important;border:0!important;box-shadow:none!important}.demo-open-vibration{display:flex;align-items:center;justify-content:center;gap:24px;min-height:190px}.demo-swoop-wave{width:80%;height:150px}.demo-swoop-wave path{stroke-dasharray:900;stroke-dashoffset:900}.demo-swoop-wave.drawing path{animation:v49Draw 1.4s ease forwards}.frequency-demo-item{opacity:.5;transition:.25s}.frequency-demo-item.active{opacity:1;transform:scale(1.06)}
@keyframes v49Vibrate{from{transform:translateX(-5px)}to{transform:translateX(5px)}}@keyframes v49WaveTravel{to{stroke-dashoffset:-112}}@keyframes v49Draw{to{stroke-dashoffset:0}}
@media(max-width:720px){}


/* v50 requested Sound page revisions */

/* New global reveal timing for Sound illustrations */


.delayed-sound-visual{
  animation-delay:1s!important;
}
@keyframes v50LoudWave{
  from{transform:scaleY(.92);transform-origin:center}
  to{transform:scaleY(1.08);transform-origin:center}
}
@keyframes v50SoftWave{
  from{transform:scaleY(.96);transform-origin:center}
  to{transform:scaleY(1.04);transform-origin:center}
}

/* Page 4 — vertical frequency layout */

.frequency-open-demo{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  max-width:600px!important;
  min-height:285px!important;
}
.reading-frequency-item{
  width:100%;
  text-align:center;
  opacity:.55;
  transition:opacity .25s ease, transform .25s ease;
}
.reading-frequency-item svg{
  width:100%;
  height:90px;
}
.reading-frequency-item.playing{
  opacity:1;
  transform:scale(1.025);
}
.reading-low.playing svg path{
  stroke-dasharray:22 8;
  animation:v50LowTravel 2.2s linear infinite;
}
.reading-high.playing svg path{
  stroke-dasharray:12 5;
  animation:v50HighTravel .65s linear infinite;
}
@keyframes v50LowTravel{to{stroke-dashoffset:-90}}
@keyframes v50HighTravel{to{stroke-dashoffset:-90}}

/* Sound's former page 5 is excluded by JS, but keep it visually suppressed
   as an additional safeguard when Sound is selected. */

body.sound-lesson .sound-page-five-removed{display:none!important}
@keyframes v51AmplitudeEmphasis{
  from{transform:scaleY(.96)}
  to{transform:scaleY(1.06)}
}

/* Page 4: lower pitch on top, higher pitch below, with much larger vertical waves. */

.frequency-open-demo{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:18px!important;
  width:min(900px,96%)!important;
  max-width:none!important;
  min-height:420px!important;
  height:auto!important;
  overflow:visible!important;
  padding:0!important;
}
.reading-frequency-item{
  width:100%!important;
  min-height:185px!important;
  opacity:.58;
  transition:opacity .25s ease,transform .25s ease;
}
.reading-frequency-item svg{
  display:block;
  width:100%!important;
  height:145px!important;
  max-height:none!important;
  overflow:visible!important;
}
.reading-frequency-item.playing{
  opacity:1;
  transform:scale(1.015);
}
.reading-frequency-item svg path{
  fill:none;
  stroke:#8B7352;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.reading-low.playing svg path{
  stroke-dasharray:28 10;
  animation:v51LowWaveMove 2.4s linear infinite;
}
.reading-high.playing svg path{
  stroke-dasharray:14 5;
  animation:v51HighWaveMove .6s linear infinite;
}
@keyframes v51LowWaveMove{to{stroke-dashoffset:-152}}
@keyframes v51HighWaveMove{to{stroke-dashoffset:-152}}

/* Page 6: clickable visual application. */

.sound-interactive-application button{
  font:inherit;
  color:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.interactive-glance,
.interactive-pair{
  border:1px solid rgba(110,107,99,.22)!important;
  background:rgba(255,255,255,.20)!important;
}
.interactive-glance em,
.interactive-pair em{
  display:block;
  margin-top:7px;
  font-size:13px;
  font-style:normal;
  color:#6E6B63;
}
.interactive-glance:hover,
.interactive-pair:hover{
  background:rgba(139,115,82,.09)!important;
}
.interactive-glance.activated,
.interactive-pair.activated{
  animation:v51AppPulse .55s ease;
}
.interactive-glance.activated .glance-vibration{
  animation:v49Vibrate .12s ease-in-out 5 alternate!important;
}
.interactive-glance.activated .glance-wave i{
  animation:v48Pulse .65s ease 2!important;
}
.interactive-pair.activated .glance-wave-small,
.interactive-pair.activated .glance-wave-big,
.interactive-pair.activated .glance-freq-low,
.interactive-pair.activated .glance-freq-high{
  animation:v51AppWave .6s ease-in-out 2 alternate;
}
@keyframes v51AppPulse{50%{transform:scale(1.025)}}
@keyframes v51AppWave{to{transform:scaleY(1.12)}}
@keyframes v52AmpEmphasis{from{transform:scaleY(.96)}to{transform:scaleY(1.06)}}
@keyframes v52LowMotion{to{stroke-dashoffset:-164}}@keyframes v52HighMotion{to{stroke-dashoffset:-164}}

.sound-live-application{width:min(880px,96%);margin:0 auto}.sound-live-application h4{text-align:center;font-family:"Playfair Display",Georgia,serif;font-size:30px;font-weight:500;margin:0 0 20px}.live-sound-block{padding:18px 0 24px;border-bottom:1px solid rgba(110,107,99,.18)}.live-sound-block:last-child{border-bottom:0}.live-block-copy{text-align:center;margin-bottom:10px}.live-block-copy strong{display:block;font-size:19px}.live-block-copy span{display:block;font-size:15px;color:#6E6B63;margin-top:3px}
.live-wave-button,
.frequency-live-stage{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:135px;padding:0;border:0;background:transparent;cursor:pointer}.live-source{flex:0 0 auto;width:8px;height:82px;background:#2A2926;border-radius:5px}.live-wave-button svg,
.frequency-live-stage svg,
.amplitude-live-stage svg{width:100%;height:135px;overflow:visible}.live-wave-button path,
.frequency-live-stage path,
.amplitude-live-stage path{fill:none;stroke:#8B7352;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.live-wave-button.running .live-source{animation:v52SourceVibrate .12s ease-in-out 7 alternate}.live-wave-button.running path{stroke-dasharray:900;stroke-dashoffset:900;animation:v52DrawWave .9s ease forwards}
.amplitude-live-stage{width:100%;height:155px}.amplitude-live-stage path{transition:transform .35s ease}.amplitude-live-stage path.pulse{animation:v52AmpPulse .6s ease}
.live-controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:8px}.live-controls button{border:1px solid rgba(42,41,38,.24);background:transparent;border-radius:999px;padding:10px 16px;font:inherit;cursor:pointer}.live-controls button:hover{background:rgba(139,115,82,.09)}#volumeState{min-width:62px;text-align:center;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#6E6B63}
.frequency-live-stage.low-frequency path{stroke-dasharray:26 10;animation:v52LowMotion 2.15s linear infinite}.frequency-live-stage.high-frequency path{stroke-dasharray:12 5;animation:v52HighMotion .52s linear infinite}
@keyframes v52SourceVibrate{from{transform:translateX(-5px)}to{transform:translateX(5px)}}@keyframes v52DrawWave{to{stroke-dashoffset:0}}@keyframes v52AmpPulse{50%{stroke-width:5}}
.single-control-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:6px;
}
.single-control-row button{
  border:1px solid rgba(42,41,38,.25);
  background:transparent;
  border-radius:999px;
  padding:11px 18px;
  font:inherit;
  cursor:pointer;
}
.single-control-row button:hover{background:rgba(139,115,82,.09)}
.single-control-row strong{
  min-width:68px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  color:#6E6B63;
}
@keyframes v54Vibrate{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
@keyframes v54DrawWave{to{stroke-dashoffset:0}}
@keyframes v54AmplitudeResponse{50%{stroke-width:5}}
@keyframes v54FreqLow{to{stroke-dashoffset:-164}}
@keyframes v54FreqHigh{to{stroke-dashoffset:-164}}

/* Completion celebration */

.finish-celebration{
  width:min(520px,90%);
  margin:26px auto 22px;
  text-align:center;
  position:relative;
}
.completion-ring{
  width:72px;
  height:72px;
  margin:0 auto 18px;
  border:1px solid rgba(139,115,82,.45);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:30px;
  transform:scale(.7);
  opacity:0;
}
.completion-progress{
  height:6px;
  width:100%;
  border-radius:999px;
  overflow:hidden;
  background:rgba(110,107,99,.14);
}
.completion-progress-fill{
  height:100%;
  width:0;
  background:#8B7352;
  border-radius:999px;
}
.completion-progress-label{
  margin-top:9px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6E6B63;
  opacity:0;
}
.celebration-sparkles i{
  position:absolute;
  left:50%;
  top:24px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#8B7352;
  opacity:0;
}
.finish-celebration.celebrate .completion-ring{
  animation:v54RingIn .55s ease .15s forwards;
}
.finish-celebration.celebrate .completion-progress-fill{
  animation:v54ProgressFill 1.4s ease .55s forwards;
}
.finish-celebration.celebrate .completion-progress-label{
  animation:v54FadeIn .4s ease 1.7s forwards;
}
.finish-celebration.celebrate .celebration-sparkles i{
  animation:v54Spark .8s ease 1.7s forwards;
}
.finish-celebration.celebrate .celebration-sparkles i:nth-child(1){--x:-85px;--y:-48px}
.finish-celebration.celebrate .celebration-sparkles i:nth-child(2){--x:-48px;--y:-78px}
.finish-celebration.celebrate .celebration-sparkles i:nth-child(3){--x:5px;--y:-88px}
.finish-celebration.celebrate .celebration-sparkles i:nth-child(4){--x:58px;--y:-72px}
.finish-celebration.celebrate .celebration-sparkles i:nth-child(5){--x:88px;--y:-38px}
.finish-celebration.celebrate .celebration-sparkles i:nth-child(6){--x:0px;--y:-62px}
@keyframes v54RingIn{to{transform:scale(1);opacity:1}}
@keyframes v54ProgressFill{to{width:100%}}
@keyframes v54FadeIn{to{opacity:1}}
@keyframes v54Spark{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  35%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.3)}
}

/* Page 10 completion celebration: nudge the animation downward to sit more centrally. */

.finish-page .finish-celebration{
  transform:translateY(14px);
}

/* Page 10: move the completion animation slightly farther down and remove layout constraints. */

.finish-page .finish-content{
  overflow:visible!important;
  min-height:0!important;
  height:auto!important;
}
.finish-page .finish-celebration{
  position:relative!important;
  top:22px!important;
  transform:none!important;
  margin-top:26px!important;
  margin-bottom:22px!important;
}
@keyframes v57ParticleVibrate{
  from{transform:translateX(-7px)}
  to{transform:translateX(7px)}
}

/* Page 10: move the completion animation slightly lower again for better visual centering. */

.finish-page .finish-celebration{
  top:34px!important;
}


/* v58 — no-scroll lesson layout + centering refinements */

/* All lesson pages should fit within the viewport without page scrolling. */


html,
body{
  overflow-x:hidden;
}
body.lesson-only-page{
  overflow-y:hidden!important;
  height:100vh!important;
}
.lesson-stage{
  height:calc(100vh - 0px)!important;
  min-height:0!important;
  overflow:hidden!important;
}
.lesson{
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
.lesson-pages{
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
.lesson-page{
  max-height:100%!important;
  overflow:hidden!important;
}
.lesson-page.active{
  overflow:hidden!important;
}

/* Page 10: move completion animation lower toward center. */

.finish-page .finish-celebration{
  top:50px!important;
}

/* Lesson 2 */

.instrument-copy{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.instrument-copy p{
  font-size:19px;
  line-height:1.52;
  margin:10px auto;
}
.instrument-lead{font-size:28px!important}
.instrument-example{color:#6E6B63}

.delayed-instrument-visual{
  opacity:0;
  animation:v62Reveal .55s ease 1s forwards;
}
.instrument-intro-visual{
  width:min(820px,94%);
  margin:26px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.intro-family{
  min-height:165px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.intro-family strong{
  font-size:12px;
  letter-spacing:.13em;
}
.mini-string-source{
  width:5px;height:88px;background:#2A2926;border-radius:5px;
  animation:v62StringMove .35s ease-in-out infinite alternate;
}
.mini-air-source{
  width:100px;height:36px;border:2px solid #6E6B63;border-radius:999px;position:relative;
}
.mini-air-source:after{
  content:"";position:absolute;left:8px;right:8px;top:15px;border-top:3px dotted #8B7352;
  animation:v62AirPulse .8s linear infinite;
}
.mini-drum-source{
  width:92px;height:55px;border:3px solid #2A2926;border-radius:50%;position:relative;
}
.mini-drum-source:after{
  content:"";position:absolute;inset:7px;border:2px solid #8B7352;border-radius:50%;
  animation:v62DrumPulse .35s ease-in-out infinite alternate;
}

.instrument-demo-button{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:min(760px,94%);
  min-height:250px;
  margin:18px auto 0;
  border:0;
  background:transparent;
  font:inherit;
  color:inherit;
  cursor:pointer;
}
.instrument-demo-button>span{
  font-size:14px;
  color:#6E6B63;
}
.large-string-demo{
  width:90%;
  height:115px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.large-string-demo:before,
.large-string-demo:after{
  content:"";position:absolute;top:22px;bottom:22px;width:7px;background:#6E6B63;border-radius:4px;
}
.large-string-demo:before{left:7%}.large-string-demo:after{right:7%}
.large-string-demo i{
  display:block;width:82%;height:3px;background:#8B7352;transform-origin:center;
}
.string-demo-button.active-demo .large-string-demo i{animation:v62Pluck .12s ease-in-out 10 alternate}

.air-tube{
  width:82%;height:105px;border:2px solid #6E6B63;border-radius:999px;position:relative;overflow:hidden;
}
.air-wave{
  position:absolute;top:50%;left:-20%;width:28%;height:2px;background:#8B7352;
}
.air-demo-button.active-demo .air-wave{animation:v62AirTravel .9s linear forwards}

.large-drum-demo{
  width:190px;height:105px;border:4px solid #2A2926;border-radius:50%;position:relative;
}
.large-drum-demo span{
  position:absolute;inset:10px;border:3px solid #8B7352;border-radius:50%;
}
.drum-demo-button.active-demo .large-drum-demo span{animation:v62DrumHit .14s ease-in-out 8 alternate}

.instrument-family-grid{
  width:min(880px,96%);
  margin:24px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.family-card{
  min-height:225px;
  border:1px solid rgba(110,107,99,.22);
  border-radius:16px;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  padding:18px;
}
.family-card strong,
.family-card span{display:block}
.family-card span{font-size:14px;color:#6E6B63;margin-top:5px}
.family-card.active-family{background:rgba(139,115,82,.09);transform:scale(1.025)}
.family-string-graphic{height:95px;display:grid;place-items:center}
.family-string-graphic i{width:80%;height:3px;background:#8B7352}
.family-card.active-family .family-string-graphic i{animation:v62Pluck .12s ease-in-out 10 alternate}
.family-air-graphic{height:95px;display:flex;align-items:center;justify-content:center;gap:12px}
.family-air-graphic i{width:12px;height:12px;border-radius:50%;background:#8B7352}
.family-card.active-family .family-air-graphic i{animation:v62ParticleMove .55s ease-in-out infinite alternate}
.family-drum-graphic{height:95px;display:grid;place-items:center}
.family-drum-graphic i{width:100px;height:55px;border:3px solid #8B7352;border-radius:50%}
.family-card.active-family .family-drum-graphic i{animation:v62DrumHit .14s ease-in-out 8 alternate}
.instrument-family-feedback{text-align:center;font-size:17px;min-height:28px;margin:14px 0 0}

.instrument-application-stage{
  width:min(880px,96%);
  margin:16px auto 0;
  text-align:center;
}
.instrument-application-copy{font-size:18px;margin-bottom:16px}
.instrument-app-buttons{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.instrument-app-buttons button{
  min-height:230px;border:1px solid rgba(110,107,99,.22);border-radius:16px;background:transparent;font:inherit;color:inherit;cursor:pointer;
}
.instrument-app-buttons button strong{display:block;margin-top:12px}
.app-guitar,
.app-flute,
.app-drum{height:110px;display:grid;place-items:center}
.app-guitar i{width:78%;height:3px;background:#8B7352}
.instrument-app-buttons button.playing .app-guitar i{animation:v62Pluck .12s ease-in-out 10 alternate}
.app-flute{display:flex;align-items:center;justify-content:center;gap:14px}
.app-flute i{width:13px;height:13px;border-radius:50%;background:#8B7352}
.instrument-app-buttons button.playing .app-flute i{animation:v62ParticleMove .5s ease-in-out infinite alternate}
.app-drum i{width:105px;height:60px;border:3px solid #8B7352;border-radius:50%}
.instrument-app-buttons button.playing .app-drum i{animation:v62DrumHit .14s ease-in-out 8 alternate}
#instrumentApplicationFeedback{min-height:28px;font-size:17px;margin-top:14px}

@keyframes v62Reveal{to{opacity:1}}
@keyframes v62StringMove{from{transform:translateX(-4px)}to{transform:translateX(4px)}}
@keyframes v62AirPulse{to{transform:translateX(12px)}}
@keyframes v62DrumPulse{from{transform:scale(.95)}to{transform:scale(1.05)}}
@keyframes v62Pluck{from{transform:translateY(-9px)}to{transform:translateY(9px)}}
@keyframes v62AirTravel{from{left:-20%}to{left:100%}}
@keyframes v62DrumHit{from{transform:scale(.94)}to{transform:scale(1.08)}}
@keyframes v62ParticleMove{from{transform:translateX(-8px)}to{transform:translateX(8px)}}

@media(max-width:760px){
  .instrument-intro-visual,
.instrument-family-grid,
.instrument-app-buttons{grid-template-columns:1fr}
}

/* v63 — improved instrument vibration visuals and piano mechanism */

.instrument-intro-visual{grid-template-columns:repeat(4,1fr)!important}
.wiggle-string svg,
.large-wiggle-string svg,
.family-wiggle-string svg{width:100%;height:100%;overflow:visible}
.wiggle-string{width:150px;height:70px}.wiggle-string path,
.large-wiggle-string path,
.family-wiggle-string path{fill:none;stroke:#8B7352;stroke-width:4;stroke-linecap:round}
.wiggle-string path{animation:v63StringWave .7s ease-in-out infinite alternate}
.large-wiggle-string{width:90%;height:145px}.large-wiggle-string path{stroke-width:5}
.string-demo-button.active-demo .large-wiggle-string path{animation:v63BigStringWave .13s ease-in-out 12 alternate}
@keyframes v63StringWave{from{transform:scaleY(.65)}to{transform:scaleY(1.2)}}@keyframes v63BigStringWave{from{transform:scaleY(.45)}to{transform:scaleY(1.35)}}

.mouth-wind,
.large-mouth-wind,
.family-mouth-wind{display:flex;align-items:center;justify-content:center}
.mouth-shape,
.large-mouth,
.family-mouth{border:3px solid #2A2926;border-radius:50% 50% 45% 45%;position:relative;background:transparent}
.mouth-shape{width:54px;height:25px}.large-mouth{width:92px;height:42px}.family-mouth{width:58px;height:27px}
.mouth-shape:after,
.large-mouth:after,
.family-mouth:after{content:"";position:absolute;left:18%;right:18%;top:48%;border-top:2px solid #2A2926}
.mouth-wind span,
.wind-streams i,
.family-mouth-wind i{display:block;height:3px;background:#8B7352;border-radius:99px}
.mouth-wind span{width:35px;margin-left:8px;animation:v63Wind 1s linear infinite}.mouth-wind span:nth-of-type(2){animation-delay:.2s}.mouth-wind span:nth-of-type(3){animation-delay:.4s}
.large-mouth-wind{width:90%;gap:16px}.wind-streams{width:52%;display:flex;flex-direction:column;gap:12px}.wind-streams i{width:80%;opacity:.45}.air-demo-button.active-demo .wind-streams i{animation:v63WindAcross .8s linear forwards}.wind-streams i:nth-child(2){width:95%;animation-delay:.08s}.wind-streams i:nth-child(3){width:70%;animation-delay:.16s}.wind-streams i:nth-child(4){width:88%;animation-delay:.24s}.instrument-tube{width:30%;height:70px;border:2px solid #6E6B63;border-radius:999px}
@keyframes v63Wind{from{transform:translateX(0);opacity:.2}to{transform:translateX(18px);opacity:1}}@keyframes v63WindAcross{from{transform:translateX(-18px);opacity:.2}to{transform:translateX(65px);opacity:1}}

.real-drum,
.large-real-drum,
.family-real-drum{position:relative}
.real-drum{width:100px;height:85px}.drum-top,
.large-drum-top{position:absolute;left:8%;right:8%;top:5%;height:30%;border:3px solid #2A2926;border-radius:50%;background:#EFEEE9;z-index:2}.drum-body,
.large-drum-shell{position:absolute;left:12%;right:12%;top:18%;bottom:8%;border-left:3px solid #2A2926;border-right:3px solid #2A2926;border-bottom:3px solid #2A2926;border-radius:0 0 18px 18px}.drum-stick,
.large-drum-stick{position:absolute;width:4px;height:62%;background:#6E6B63;right:9%;top:-4%;transform:rotate(-34deg);transform-origin:bottom}
.large-real-drum{width:230px;height:170px}.large-drum-top{border-width:4px}.large-drum-shell{border-width:4px}.large-drum-stick{width:5px}.drum-vibration-ring{position:absolute;left:18%;right:18%;top:10%;height:24%;border:3px solid #8B7352;border-radius:50%;opacity:0}.drum-demo-button.active-demo .large-drum-stick{animation:v63StickHit .28s ease forwards}.drum-demo-button.active-demo .drum-vibration-ring{animation:v63DrumRing .8s ease .18s}.drum-demo-button.active-demo .large-drum-top{animation:v63DrumSkin .13s ease-in-out 8 alternate}
@keyframes v63StickHit{to{transform:rotate(-8deg)}}@keyframes v63DrumRing{0%{opacity:0;transform:scale(.8)}40%{opacity:1}100%{opacity:0;transform:scale(1.45)}}@keyframes v63DrumSkin{from{transform:scaleY(.94)}to{transform:scaleY(1.06)}}

.mini-piano-action,
.family-piano-mechanism{position:relative;width:135px;height:85px}.mini-key,
.fp-key{position:absolute;left:4%;bottom:6%;width:55%;height:18px;background:#e7dfd2;border:1px solid #6E6B63}.mini-hammer,
.fp-hammer{position:absolute;left:43%;bottom:24%;width:8px;height:45px;background:#6E6B63;transform:rotate(-25deg);transform-origin:bottom}.mini-piano-string,
.fp-string{position:absolute;left:58%;right:2%;top:18%;height:3px;background:#8B7352}
.piano-action-demo{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(800px,94%);min-height:275px;margin:10px auto 0;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer}.piano-action-demo>span{font-size:14px;color:#6E6B63;margin-top:10px}.piano-mechanism{position:relative;width:min(700px,90%);height:190px}.mechanism-key{position:absolute;left:3%;bottom:12%;width:38%;height:28px;background:#e7dfd2;border:2px solid #6E6B63}.mechanism-hammer{position:absolute;left:37%;bottom:25%;width:13px;height:105px;background:#6E6B63;border-radius:7px;transform:rotate(-28deg);transform-origin:bottom}.mechanism-hammer:after{content:"";position:absolute;top:-12px;left:-8px;width:28px;height:20px;border-radius:50%;background:#6E6B63}.mechanism-string{position:absolute;left:48%;right:2%;top:25%;height:80px}.mechanism-string svg{width:100%;height:100%;overflow:visible}.mechanism-string path{fill:none;stroke:#8B7352;stroke-width:4}
.piano-action-demo.active-demo .mechanism-key{animation:v63KeyPress .2s ease}.piano-action-demo.active-demo .mechanism-hammer{animation:v63HammerHit .35s ease forwards}.piano-action-demo.active-demo .mechanism-string path{animation:v63PianoString .12s ease-in-out .32s 10 alternate}
@keyframes v63KeyPress{50%{transform:rotate(3deg)}}@keyframes v63HammerHit{to{transform:rotate(8deg)}}@keyframes v63PianoString{from{transform:translateY(-7px)}to{transform:translateY(7px)}}

.four-families{grid-template-columns:repeat(4,1fr)!important}.family-wiggle-string{height:90px}.family-mouth-wind{height:90px;gap:8px}.family-mouth-wind i{width:28px;margin-left:3px}.family-card.active-family .family-mouth-wind i{animation:v63Wind  .7s linear infinite}.family-real-drum{height:90px;display:grid;place-items:center}.family-real-drum>div{width:95px;height:55px;border:3px solid #8B7352;border-radius:50%}.family-card.active-family .family-real-drum>div{animation:v63DrumSkin .13s ease-in-out 8 alternate}.family-card.active-family .family-wiggle-string path{animation:v63BigStringWave .13s ease-in-out 12 alternate}.family-card.active-family .fp-hammer{animation:v63HammerHit .35s ease forwards}.family-card.active-family .fp-string{animation:v63PianoString .12s ease-in-out .32s 10 alternate}
@media(max-width:900px){.instrument-intro-visual,
.four-families{grid-template-columns:repeat(2,1fr)!important}}


/* v64 — TOC-safe lesson initialization + improved instrument visuals */

/* Wind from mouth */


.wind-from-mouth{width:min(820px,94%);height:190px;display:flex;align-items:center;justify-content:center;gap:18px}
.wind-face{width:110px;height:125px;border:2px solid #6E6B63;border-radius:48% 48% 44% 44%;position:relative;flex:none}
.wind-mouth{position:absolute;right:-4px;top:55%;width:28px;height:13px;border:3px solid #2A2926;border-left:0;border-radius:0 50% 50% 0}
.wind-flow{width:390px;height:120px;position:relative;overflow:hidden}
.wind-flow i{position:absolute;left:-15%;height:3px;border-radius:99px;background:#8B7352;width:46%;opacity:.3}
.wind-flow i:nth-child(1){top:22%;width:52%}.wind-flow i:nth-child(2){top:34%;width:38%}.wind-flow i:nth-child(3){top:46%;width:58%}.wind-flow i:nth-child(4){top:58%;width:45%}.wind-flow i:nth-child(5){top:70%;width:62%}.wind-flow i:nth-child(6){top:82%;width:36%}
.air-demo-button.active-demo .wind-flow i{animation:v64WindFlow 1.1s ease-out forwards}
.air-demo-button.active-demo .wind-flow i:nth-child(2){animation-delay:.06s}.air-demo-button.active-demo .wind-flow i:nth-child(3){animation-delay:.12s}.air-demo-button.active-demo .wind-flow i:nth-child(4){animation-delay:.18s}.air-demo-button.active-demo .wind-flow i:nth-child(5){animation-delay:.24s}.air-demo-button.active-demo .wind-flow i:nth-child(6){animation-delay:.3s}
.wind-instrument-tube{width:210px;height:70px;border:3px solid #6E6B63;border-radius:999px 20px 20px 999px}
@keyframes v64WindFlow{0%{transform:translateX(0) scaleX(.7);opacity:0}25%{opacity:.8}100%{transform:translateX(430px) scaleX(1.15);opacity:0}}

/* Cymbal vibration */

.large-cymbal-demo{width:460px;height:210px;position:relative;margin:auto}
.cymbal-disc{position:absolute;left:70px;right:70px;top:82px;height:34px;border:4px solid #8B7352;border-radius:50%;background:rgba(139,115,82,.11)}
.cymbal-disc:after{content:"";position:absolute;left:45%;top:-13px;width:36px;height:20px;border:3px solid #8B7352;border-radius:50% 50% 30% 30%;background:#EFEEE9}
.cymbal-stick{position:absolute;right:80px;top:10px;width:6px;height:110px;border-radius:5px;background:#6E6B63;transform:rotate(-35deg);transform-origin:bottom;z-index:2}
.cymbal-vibration i{position:absolute;left:55px;right:55px;top:70px;height:58px;border:2px solid #8B7352;border-radius:50%;opacity:0}
.cymbal-vibration i:nth-child(2){left:35px;right:35px;top:57px;height:84px}.cymbal-vibration i:nth-child(3){left:15px;right:15px;top:43px;height:112px}
.cymbal-demo-button.active-demo .cymbal-stick{animation:v64CymbalStrike .28s ease forwards}
.cymbal-demo-button.active-demo .cymbal-disc{animation:v64CymbalShake .09s linear 14 alternate}
.cymbal-demo-button.active-demo .cymbal-vibration i{animation:v64CymbalRing .85s ease-out forwards}
.cymbal-demo-button.active-demo .cymbal-vibration i:nth-child(2){animation-delay:.08s}.cymbal-demo-button.active-demo .cymbal-vibration i:nth-child(3){animation-delay:.16s}
@keyframes v64CymbalStrike{to{transform:rotate(-8deg)}}@keyframes v64CymbalShake{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}@keyframes v64CymbalRing{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.2)}}

/* Piano mechanism */

.piano-action-labels{width:min(760px,92%);display:grid;grid-template-columns:30% 25% 45%;font-size:11px;letter-spacing:.13em;color:#6E6B63;margin-bottom:4px}
.improved-piano-mechanism{position:relative;width:min(780px,94%);height:205px;margin:auto}
.piano-key-lever{position:absolute;left:2%;bottom:30px;width:34%;height:30px;background:#e7dfd2;border:2px solid #6E6B63;transform-origin:84% 50%}
.piano-pivot{position:absolute;left:29%;bottom:19px;width:18px;height:18px;border-radius:50%;background:#6E6B63}
.piano-hammer-arm{position:absolute;left:38%;bottom:46px;width:12px;height:115px;background:#6E6B63;border-radius:7px;transform:rotate(-28deg);transform-origin:bottom}
.piano-hammer-arm span{position:absolute;left:-11px;top:-13px;width:34px;height:24px;border-radius:50%;background:#6E6B63}
.piano-string-bank{position:absolute;left:53%;right:1%;top:36px;height:105px}
.piano-string-bank svg{width:100%;height:100%;overflow:visible}.piano-string-line{fill:none;stroke:#8B7352;stroke-width:5}
.improved-piano-demo.active-demo .piano-key-lever{animation:v64PianoKey .35s ease}
.improved-piano-demo.active-demo .piano-hammer-arm{animation:v64PianoHammer .42s ease forwards}
.improved-piano-demo.active-demo .piano-string-line{animation:v64PianoString .09s ease-in-out .39s 16 alternate}
@keyframes v64PianoKey{50%{transform:rotate(5deg)}}@keyframes v64PianoHammer{to{transform:rotate(12deg)}}@keyframes v64PianoString{from{transform:translateY(-8px)}to{transform:translateY(8px)}}


.app-guitar svg{width:100%;height:90px;overflow:visible}.app-guitar path{fill:none;stroke:#8B7352;stroke-width:4}
.instrument-app-buttons button.playing .app-guitar path{animation:v63BigStringWave .12s ease-in-out 12 alternate}
.app-horn{height:110px;display:flex;align-items:center;justify-content:center;position:relative}
.app-horn i{position:absolute;left:28%;width:55px;height:3px;background:#8B7352;opacity:0}.app-horn i:nth-of-type(1){top:34%}.app-horn i:nth-of-type(2){top:50%}.app-horn i:nth-of-type(3){top:66%}
.instrument-app-buttons button.playing .app-horn i{animation:v64HornAir .8s ease-out forwards}.instrument-app-buttons button.playing .app-horn i:nth-of-type(2){animation-delay:.1s}.instrument-app-buttons button.playing .app-horn i:nth-of-type(3){animation-delay:.2s}
@keyframes v64HornAir{from{transform:translateX(-20px);opacity:.2}to{transform:translateX(100px);opacity:0}}
.app-cymbal{height:110px;position:relative}.app-cymbal span{position:absolute;left:18%;right:18%;top:42%;height:24px;border:3px solid #8B7352;border-radius:50%}.app-cymbal i{position:absolute;left:10%;right:10%;top:33%;height:45px;border:2px solid #8B7352;border-radius:50%;opacity:0}.app-cymbal i:nth-of-type(2){left:2%;right:2%;top:24%;height:66px}
.instrument-app-buttons button.playing .app-cymbal span{animation:v64CymbalShake .09s linear 14 alternate}.instrument-app-buttons button.playing .app-cymbal i{animation:v64CymbalRing .8s ease-out forwards}

/* New matching page */

.instrument-match-copy{max-width:760px;margin:0 auto 18px;text-align:center;font-size:18px;line-height:1.5}
.instrument-match-grid{width:min(930px,96%);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.match-card{text-align:center;padding:14px;border:1px solid rgba(110,107,99,.22);border-radius:15px}.match-card>strong{display:block;font-size:18px;margin:6px 0 12px}
.match-icon{height:95px;display:flex;align-items:center;justify-content:center;position:relative}
.cello-icon span{width:48px;height:72px;border:3px solid #8B7352;border-radius:48% 48% 40% 40%;position:relative}.cello-icon span:after{content:"";position:absolute;left:21px;top:-27px;width:4px;height:78px;background:#6E6B63}
.oboe-icon span{width:130px;height:14px;border:3px solid #8B7352;border-radius:8px}.oboe-icon i{width:7px;height:7px;border-radius:50%;background:#6E6B63;margin-left:-35px;margin-right:43px}
.maracas-icon span{width:42px;height:52px;border:3px solid #8B7352;border-radius:50%;position:relative;margin:0 12px}.maracas-icon span:after{content:"";position:absolute;left:18px;top:48px;width:5px;height:35px;background:#6E6B63}
.match-choices{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}.match-choices button{border:1px solid rgba(42,41,38,.24);background:transparent;border-radius:999px;padding:7px 9px;font:12px inherit;cursor:pointer}.match-choices button.correct{background:rgba(139,115,82,.2);border-color:#8B7352}.match-choices button.wrong{opacity:.45}
.instrument-match-feedback{text-align:center;min-height:24px;margin-top:14px;font-size:16px}

@media(max-width:850px){.instrument-match-grid{grid-template-columns:1fr}.wind-from-mouth{transform:scale(.85)}}


/* v65 — Lesson 2 visual/audio refinements */

/* Page 1: shared animated family visuals */


.family-string-anim{width:100%;height:95px;display:grid;place-items:center}
.family-string-anim svg{width:88%;height:82px;overflow:visible}
.family-string-anim path{fill:none;stroke:#8B7352;stroke-width:4;stroke-linecap:round;animation:v65StringWiggle .55s ease-in-out infinite alternate;transform-origin:center}
@keyframes v65StringWiggle{from{transform:scaleY(.58)}to{transform:scaleY(1.2)}}

.family-wind-anim{width:100%;height:105px;display:grid;place-items:center;overflow:hidden}
.family-wind-anim svg{width:92%;height:100px;overflow:visible}
.family-wind-anim path{fill:none;stroke:#8B7352;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:360;stroke-dashoffset:360;animation:v65WindDraw 2.1s ease-in-out infinite}
.family-wind-anim path:nth-child(2){animation-delay:.12s}.family-wind-anim path:nth-child(3){animation-delay:.24s}.family-wind-anim path:nth-child(4){animation-delay:.36s}
@keyframes v65WindDraw{0%{stroke-dashoffset:360;opacity:.25;transform:translateX(-10px)}45%{opacity:1}80%,100%{stroke-dashoffset:0;opacity:.15;transform:translateX(16px)}}

.family-cymbal-anim{height:105px;position:relative;width:100%}
.mini-cymbal-disc{position:absolute;left:18%;right:18%;top:47%;height:22px;border:3px solid #8B7352;border-radius:50%;background:rgba(139,115,82,.08)}
.mini-cymbal-disc:after{content:"";position:absolute;left:46%;top:-10px;width:24px;height:14px;border:3px solid #8B7352;border-radius:50%}
.mini-cymbal-stick{position:absolute;right:18%;top:6%;width:4px;height:72px;background:#6E6B63;transform:rotate(-35deg);transform-origin:bottom;animation:v65MiniCymbalStrike 1.55s ease-in-out infinite}
.family-cymbal-anim i{position:absolute;left:13%;right:13%;top:38%;height:42px;border:2px solid #8B7352;border-radius:50%;opacity:0;animation:v65MiniCymbalRing 1.55s ease-out infinite}
.family-cymbal-anim i:nth-of-type(2){left:7%;right:7%;top:30%;height:58px;animation-delay:.08s}.family-cymbal-anim i:nth-of-type(3){left:2%;right:2%;top:22%;height:74px;animation-delay:.16s}
@keyframes v65MiniCymbalStrike{0%,55%,100%{transform:rotate(-35deg)}70%{transform:rotate(-7deg)}}@keyframes v65MiniCymbalRing{0%,58%{opacity:0;transform:scale(.7)}70%{opacity:.7}100%{opacity:0;transform:scale(1.2)}}

.family-piano-anim{height:105px;position:relative;width:100%}
.mini-piano-key{position:absolute;left:8%;bottom:13%;width:34%;height:18px;background:#e7dfd2;border:2px solid #6E6B63;transform-origin:right center;animation:v65MiniKey 1.6s ease-in-out infinite}
.mini-piano-hammer{position:absolute;left:43%;bottom:29%;width:7px;height:52px;background:#6E6B63;transform:rotate(-35deg);transform-origin:bottom;animation:v65MiniHammer 1.6s ease-in-out infinite}
.mini-piano-hammer span{position:absolute;top:-7px;left:-7px;width:21px;height:15px;background:#6E6B63;border-radius:50%}
.mini-piano-string-wave{position:absolute;left:52%;right:3%;top:18%;height:52px}
.mini-piano-string-wave svg{width:100%;height:100%;overflow:visible}.mini-piano-string-wave path{fill:none;stroke:#8B7352;stroke-width:3;animation:v65MiniPianoString 1.6s ease-in-out infinite}
@keyframes v65MiniKey{0%,55%,100%{transform:rotate(0)}68%{transform:rotate(5deg)}}@keyframes v65MiniHammer{0%,58%,100%{transform:rotate(-35deg)}72%{transform:rotate(7deg)}}@keyframes v65MiniPianoString{0%,70%,100%{transform:translateY(0)}76%{transform:translateY(-7px)}82%{transform:translateY(7px)}88%{transform:translateY(-4px)}94%{transform:translateY(3px)}}

/* Page 5 piano: key -> hammer from underneath -> vibrating wiggle string */

.piano-understrike-demo{min-height:290px!important}
.understrike-piano{position:relative;width:min(820px,94%);height:210px}
.understrike-string{position:absolute;left:32%;right:2%;top:24px;height:100px}
.understrike-string svg{width:100%;height:100%;overflow:visible}
.understrike-string path{fill:none;stroke:#8B7352;stroke-width:5}
.understrike-key{position:absolute;left:3%;bottom:22px;width:35%;height:32px;background:#e7dfd2;border:2px solid #6E6B63;transform-origin:88% center}
.understrike-hammer{position:absolute;left:42%;bottom:54px;width:12px;height:92px;background:#6E6B63;border-radius:7px;transform:rotate(-35deg);transform-origin:bottom}
.understrike-hammer span{position:absolute;top:-12px;left:-10px;width:32px;height:22px;background:#6E6B63;border-radius:50%}
.piano-understrike-demo.active-demo .understrike-key{animation:v65PianoKey .25s ease}
.piano-understrike-demo.active-demo .understrike-hammer{animation:v65PianoHammer .42s ease forwards}
.piano-understrike-demo.active-demo .understrike-string path{animation:v65PianoWiggle .11s ease-in-out .38s 14 alternate}
@keyframes v65PianoKey{50%{transform:rotate(5deg)}}@keyframes v65PianoHammer{to{transform:rotate(13deg)}}@keyframes v65PianoWiggle{from{transform:translateY(-9px)}to{transform:translateY(9px)}}

/* Three one-question family pages */

.instrument-family-quiz-page{align-items:stretch!important}
.quiz-instrument-name{text-align:center;font-family:"Playfair Display",Georgia,serif;font-size:32px;letter-spacing:.08em;margin:2px 0 14px}
.family-answer-grid{width:min(940px,98%);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.family-answer-choice{min-height:205px;border:1px solid rgba(110,107,99,.22);border-radius:15px;background:transparent;color:inherit;font:inherit;padding:12px;cursor:pointer;transition:transform .2s,background .2s,opacity .2s}
.family-answer-choice:hover{background:rgba(139,115,82,.08)}
.family-answer-choice strong{display:block;margin-top:4px;font-size:12px;letter-spacing:.10em}
.family-answer-choice.correct{background:rgba(139,115,82,.16);border-color:#8B7352;transform:scale(1.025)}
.family-answer-choice.wrong{opacity:.42}
.instrument-quiz-feedback{text-align:center;min-height:24px;margin:14px 0 0;font-size:17px}

@media(max-width:850px){
  .family-answer-grid{grid-template-columns:repeat(2,1fr)}
}




/* Piano animation used everywhere */




.family-piano-anim{position:relative;width:100%;height:105px}
.piano-mini-string{position:absolute;left:48%;right:3%;top:10%;height:60px}
.piano-mini-string svg{width:100%;height:100%;overflow:visible}
.piano-mini-string path{fill:none;stroke:#8B7352;stroke-width:4}
.piano-mini-felt-lever{position:absolute;left:44%;bottom:24%;width:8px;height:52px;background:#6E6B63;border-radius:6px;transform:rotate(-34deg);transform-origin:bottom;animation:v66MiniFeltLever 1.7s ease-in-out infinite}
.piano-mini-felt-lever span{position:absolute;top:-9px;left:-8px;width:24px;height:17px;border-radius:50%;background:#6E6B63}
.piano-mini-key{position:absolute;left:7%;bottom:12%;width:36%;height:18px;background:#e7dfd2;border:2px solid #6E6B63;transform-origin:right center;animation:v66MiniPianoKey 1.7s ease-in-out infinite}
.family-piano-anim .piano-mini-string path{animation:v66MiniPianoString 1.7s ease-in-out infinite}
@keyframes v66MiniPianoKey{0%,55%,100%{transform:rotate(0)}68%{transform:rotate(5deg)}}
@keyframes v66MiniFeltLever{0%,58%,100%{transform:rotate(-34deg)}72%{transform:rotate(8deg)}}
@keyframes v66MiniPianoString{0%,70%,100%{transform:translateY(0)}76%{transform:translateY(-8px)}82%{transform:translateY(8px)}88%{transform:translateY(-5px)}94%{transform:translateY(4px)}}

/* Page 5 full piano: key below, felt lever rises from underneath, string wiggles */

.piano-felt-demo{min-height:300px!important}
.felt-piano-mechanism{position:relative;width:min(840px,96%);height:215px}
.felt-piano-string{position:absolute;left:34%;right:2%;top:20px;height:100px}
.felt-piano-string svg{width:100%;height:100%;overflow:visible}
.felt-piano-string path{fill:none;stroke:#8B7352;stroke-width:5}
.felt-piano-key{position:absolute;left:3%;bottom:20px;width:36%;height:34px;background:#e7dfd2;border:2px solid #6E6B63;transform-origin:88% center}
.felt-piano-lever{position:absolute;left:43%;bottom:53px;width:13px;height:96px;background:#6E6B63;border-radius:7px;transform:rotate(-36deg);transform-origin:bottom}
.felt-piano-lever span{position:absolute;top:-13px;left:-11px;width:35px;height:24px;background:#6E6B63;border-radius:50%}
.piano-felt-demo.active-demo .felt-piano-key{animation:v66PianoKey .26s ease}
.piano-felt-demo.active-demo .felt-piano-lever{animation:v66FeltStrike .43s ease forwards}
.piano-felt-demo.active-demo .felt-piano-string path{animation:v66StringVibrate .10s ease-in-out .39s 16 alternate}
@keyframes v66PianoKey{50%{transform:rotate(5deg)}}
@keyframes v66FeltStrike{to{transform:rotate(13deg)}}
@keyframes v66StringVibrate{from{transform:translateY(-9px)}to{transform:translateY(9px)}}
.horn-graphic{width:230px;height:130px;position:relative;flex:none}
.horn-loop{position:absolute;left:30px;top:30px;width:110px;height:75px;border:5px solid #8B7352;border-radius:50%}
@keyframes v66HornWind{0%{stroke-dashoffset:650;opacity:.18;transform:translateX(-20px)}40%{opacity:1}100%{stroke-dashoffset:0;opacity:.12;transform:translateX(35px)}}

/* Quiz right/wrong */

.family-answer-choice.correct{
  background:#dff3df!important;
  border-color:#5f9f67!important;
  color:#234f2a!important;
  opacity:1!important;
  transform:scale(1.02);
}
.family-answer-choice.wrong{
  background:#f8dddd!important;
  border-color:#bb6969!important;
  color:#6c2626!important;
  opacity:1!important;
}
.instrument-quiz-feedback{font-weight:600}


/* v68 — hidden state must always override active state */


.lesson-page[hidden],
.lesson-page.active[hidden]{
  display:none!important;
  visibility:hidden!important;
}

.shared-first-meta{display:none!important;}


/* v71 — custom first-page content safeguard */


.lesson-page[data-shared-first="true"] #sharedFirstPageContent{
  width:100%!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
.lesson-page[data-shared-first="true"].sound-clean-page #sharedFirstPageContent,
.lesson-page[data-shared-first="true"].instrument-reading-page #sharedFirstPageContent{
  flex:1 1 auto;
}


/* v72 — Sound completion page alignment */


.finish-page #finishText{
  max-width:760px!important;
  margin:10px auto 0!important;
  text-align:center!important;
  font-size:19px!important;
  line-height:1.5!important;
}

.finish-page .finish-summary{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  width:100%!important;
  max-width:760px!important;
  margin:12px auto 0!important;
  text-align:center!important;
}

.finish-page .finish-celebration{
  margin-top:24px!important;
}


/* v74 — rebuilt piano action: key -> vertical metal rod -> felt ball -> string + damper */


.piano-vertical-action{
  position:relative;
  margin:0 auto;
}

/* Compact version used on overview / family-choice pages */

.compact-piano-action{
  width:150px;
  height:112px;
}

.piano-action-key{
  position:absolute;
  left:8%;
  bottom:8px;
  width:58%;
  height:18px;
  background:#f3eee5;
  border:2px solid #6E6B63;
  border-radius:2px;
  transform-origin:right center;
}

.piano-action-rod{
  position:absolute;
  left:47%;
  bottom:25px;
  width:6px;
  height:54px;
  background:#6E6B63;
  border-radius:4px;
  transform-origin:bottom center;
}

.piano-action-felt{
  position:absolute;
  left:50%;
  top:-11px;
  transform:translateX(-50%);
  width:22px;
  height:22px;
  border-radius:50%;
  background:#8B7352;
  border:2px solid rgba(42,41,38,.22);
}

.piano-action-string{
  position:absolute;
  left:34%;
  right:3%;
  top:7px;
  height:58px;
}

.piano-action-string svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.piano-action-string path{
  fill:none;
  stroke:#8B7352;
  stroke-width:4;
  stroke-linecap:round;
}

.piano-action-damper{
  position:absolute;
  right:11%;
  top:9px;
  width:6px;
  height:35px;
  background:#6E6B63;
}

.piano-action-damper span{
  position:absolute;
  left:50%;
  top:-4px;
  transform:translateX(-50%);
  width:22px;
  height:10px;
  border-radius:3px;
  background:#2A2926;
}

/* Small family animation continuously demonstrates the action */

.compact-piano-action .piano-action-key{
  animation:v74CompactKey 1.8s ease-in-out infinite;
}
.compact-piano-action .piano-action-rod{
  animation:v74CompactRod 1.8s ease-in-out infinite;
}
.compact-piano-action .piano-action-damper{
  animation:v74CompactDamper 1.8s ease-in-out infinite;
}
.compact-piano-action .piano-action-string path{
  animation:v74CompactString 1.8s ease-in-out infinite;
}

@keyframes v74CompactKey{
  0%,52%,100%{transform:rotate(0)}
  64%{transform:rotate(4deg)}
}
@keyframes v74CompactRod{
  0%,54%,100%{transform:translateY(0)}
  67%,74%{transform:translateY(-22px)}
}
@keyframes v74CompactDamper{
  0%,50%,100%{transform:translateY(0)}
  61%,82%{transform:translateY(-10px)}
}
@keyframes v74CompactString{
  0%,72%,100%{transform:translateY(0)}
  77%{transform:translateY(-6px)}
  82%{transform:translateY(6px)}
  87%{transform:translateY(-4px)}
  92%{transform:translateY(3px)}
}

/* Full Page 5 mechanism */

.piano-vertical-demo{
  min-height:300px!important;
}

.full-piano-action{
  width:min(830px,95%);
  height:220px;
}

.full-piano-action .piano-action-key{
  left:3%;
  bottom:18px;
  width:40%;
  height:34px;
  border-width:2px;
}

.full-piano-action .piano-action-rod{
  left:41%;
  bottom:51px;
  width:10px;
  height:96px;
}

.full-piano-action .piano-action-felt{
  top:-16px;
  width:34px;
  height:34px;
}

.full-piano-action .piano-action-string{
  left:34%;
  right:2%;
  top:8px;
  height:112px;
}

.full-piano-action .piano-action-string path{
  stroke-width:5;
}

.full-piano-action .piano-action-damper{
  right:12%;
  top:17px;
  width:9px;
  height:70px;
}

.full-piano-action .piano-action-damper span{
  width:34px;
  height:15px;
  top:-6px;
}

/* Clicked full action:
   key depresses -> damper lifts -> vertical rod rises -> felt ball contacts string -> string vibrates */

.piano-vertical-demo.active-demo .piano-action-key{
  animation:v74FullKey .3s ease;
}
.piano-vertical-demo.active-demo .piano-action-damper{
  animation:v74FullDamper 1.55s ease;
}
.piano-vertical-demo.active-demo .piano-action-rod{
  animation:v74FullRod .52s ease forwards;
}
.piano-vertical-demo.active-demo .piano-action-string path{
  animation:v74FullString .10s ease-in-out .48s 16 alternate;
}

@keyframes v74FullKey{
  50%{transform:rotate(5deg)}
}
@keyframes v74FullDamper{
  15%,78%{transform:translateY(-20px)}
}
@keyframes v74FullRod{
  0%{transform:translateY(0)}
  75%,100%{transform:translateY(-39px)}
}
@keyframes v74FullString{
  from{transform:translateY(-9px)}
  to{transform:translateY(9px)}
}


/* v77 — repaired lesson structure + new dedicated piano mechanism */


.piano-mechanism-demo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(900px,96%);
  margin:14px auto 0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.piano-mechanism-stage{
  position:relative;
  width:min(840px,100%);
  height:250px;
}
.piano-mechanism-string{
  position:absolute;
  left:35%;
  right:2%;
  top:36px;
  height:90px;
}
.piano-mechanism-string svg{width:100%;height:100%;overflow:visible}
.piano-mechanism-string path{
  fill:none;
  stroke:#8B7352;
  stroke-width:5;
  stroke-linecap:round;
}
.piano-mechanism-key{
  position:absolute;
  left:4%;
  bottom:42px;
  width:34%;
  height:38px;
  border:2px solid #6E6B63;
  border-radius:3px;
  background:#f4f0e7;
  transform-origin:right center;
}
.piano-mechanism-rod{
  position:absolute;
  left:44%;
  bottom:78px;
  width:10px;
  height:92px;
  border-radius:5px;
  background:#6E6B63;
}
.piano-mechanism-felt{
  position:absolute;
  left:50%;
  top:-16px;
  width:34px;
  height:34px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#d7c7ad;
  border:2px solid rgba(42,41,38,.18);
}
.piano-mechanism-damper{
  position:absolute;
  right:14%;
  top:34px;
  width:48px;
  height:72px;
}
.damper-pad{
  position:absolute;
  left:50%;
  top:0;
  width:46px;
  height:15px;
  transform:translateX(-50%);
  border-radius:4px;
  background:#2A2926;
}
.damper-stem{
  position:absolute;
  left:50%;
  top:14px;
  width:7px;
  height:47px;
  transform:translateX(-50%);
  border-radius:4px;
  background:#6E6B63;
}
.piano-mechanism-label{
  position:absolute;
  color:#6E6B63;
  font-size:11px;
  letter-spacing:.10em;
}
.label-key{left:16%;bottom:12px}
.label-hammer{left:39%;bottom:12px}
.label-string{right:4%;top:4px}
.label-damper{right:11%;top:112px}
.piano-mechanism-prompt{
  margin-top:2px;
  color:#6E6B63;
  font-size:14px;
}
.piano-mechanism-demo.active-demo .piano-mechanism-key{
  animation:v77PianoKey .32s ease;
}
.piano-mechanism-demo.active-demo .piano-mechanism-damper{
  animation:v77DamperLift 1.55s ease;
}
.piano-mechanism-demo.active-demo .piano-mechanism-rod{
  animation:v77HammerRise .56s ease forwards;
}
.piano-mechanism-demo.active-demo .piano-mechanism-string path{
  animation:v77PianoString .095s ease-in-out .52s 18 alternate;
}
@keyframes v77PianoKey{50%{transform:rotate(4deg)}}
@keyframes v77DamperLift{
  0%,100%{transform:translateY(0)}
  16%,82%{transform:translateY(-20px)}
}
@keyframes v77HammerRise{
  0%{transform:translateY(0)}
  72%,100%{transform:translateY(-48px)}
}
@keyframes v77PianoString{
  from{transform:translateY(-8px)}
  to{transform:translateY(8px)}
}


/* v78 — Page 5 piano hammer geometry refinement
   Starts perpendicular to the key, then rises diagonally to meet the string. */


.piano-mechanism-demo .piano-mechanism-rod{
  left:42%!important;
  bottom:78px!important;
  width:10px!important;
  height:92px!important;
  transform:rotate(0deg) translateY(0)!important;
  transform-origin:bottom center!important;
}

.piano-mechanism-demo.active-demo .piano-mechanism-rod{
  animation:v78HammerAngleRise .58s ease forwards!important;
}

@keyframes v78HammerAngleRise{
  0%{
    transform:rotate(0deg) translateY(0);
  }
  72%,100%{
    transform:rotate(-18deg) translate(-8px,-46px);
  }
}


/* v79 — Page 5 piano hammer linkage */


.piano-mechanism-demo .piano-linkage{
  position:absolute;left:31%;bottom:76px;width:34%;height:112px;
  transform-origin:38% 78%;
}
.piano-mechanism-demo .piano-linkage-arm{
  position:absolute;left:0;bottom:17px;width:78%;height:7px;
  background:#6E6B63;border-radius:5px;
}
.piano-mechanism-demo .piano-linkage-pivot{
  position:absolute;left:36%;bottom:8px;width:22px;height:22px;
  transform:translateX(-50%);border-radius:50%;
  background:#8B7352;border:3px solid #6E6B63;box-sizing:border-box;z-index:2;
}
.piano-mechanism-demo .piano-hammer-arm{
  position:absolute;left:72%;bottom:20px;width:9px;height:92px;
  background:#6E6B63;border-radius:5px;transform-origin:bottom center;
}
.piano-mechanism-demo .piano-hammer-arm .piano-mechanism-felt{
  position:absolute;left:50%;top:-17px;width:34px;height:34px;
  transform:translateX(-50%);border-radius:50%;
  background:#d7c7ad;border:2px solid rgba(42,41,38,.18);
}
.piano-mechanism-demo .piano-mechanism-rod{display:none!important}
.piano-mechanism-demo.active-demo .piano-mechanism-key{animation:v79KeyPress .32s ease}
.piano-mechanism-demo.active-demo .piano-mechanism-damper{animation:v79DamperLift 1.55s ease}
.piano-mechanism-demo.active-demo .piano-linkage{animation:v79LinkageLift .58s ease forwards}
.piano-mechanism-demo.active-demo .piano-hammer-arm{animation:v79HammerSwing .58s ease forwards}
.piano-mechanism-demo.active-demo .piano-mechanism-string path{animation:v79StringVibrate .095s ease-in-out .50s 18 alternate}

@keyframes v79KeyPress{50%{transform:rotate(4deg)}}
@keyframes v79DamperLift{0%,100%{transform:translateY(0)}16%,82%{transform:translateY(-20px)}}
@keyframes v79LinkageLift{0%{transform:rotate(0deg)}72%,100%{transform:rotate(-14deg)}}
@keyframes v79HammerSwing{0%{transform:rotate(0deg)}72%,100%{transform:rotate(-12deg)}}
@keyframes v79StringVibrate{from{transform:translateY(-8px)}to{transform:translateY(8px)}}


/* v80 — Page 5 hammer starts at the right end of the key
   and forms a clear 90-degree vertical arm toward the string */


.piano-mechanism-demo .piano-linkage{
  left:4%!important;
  bottom:76px!important;
  width:50%!important;
  height:112px!important;
  transform-origin:68% 82%!important;
}

.piano-mechanism-demo .piano-linkage-arm{
  left:0!important;
  bottom:17px!important;
  width:68%!important;
  height:7px!important;
}

.piano-mechanism-demo .piano-linkage-pivot{
  left:68%!important;
  bottom:8px!important;
}

.piano-mechanism-demo .piano-hammer-arm{
  left:68%!important;
  bottom:20px!important;
  width:9px!important;
  height:100px!important;
  transform:rotate(0deg)!important;
  transform-origin:bottom center!important;
}

.piano-mechanism-demo.active-demo .piano-hammer-arm{
  animation:v80HammerSwing .58s ease forwards!important;
}

@keyframes v80HammerSwing{
  0%{transform:rotate(0deg)}
  72%,100%{transform:rotate(-10deg)}
}


/* v81 — Page 5: position hammer immediately after key and directly under string */


.piano-mechanism-demo .piano-linkage{
  left:4%!important;
  bottom:52px!important;
  width:58%!important;
  height:112px!important;
  transform-origin:60% 82%!important;
}

.piano-mechanism-demo .piano-linkage-arm{
  left:0!important;
  bottom:17px!important;
  width:60%!important;
}

.piano-mechanism-demo .piano-linkage-pivot{
  left:60%!important;
  bottom:8px!important;
}

.piano-mechanism-demo .piano-hammer-arm{
  left:60%!important;
  bottom:20px!important;
  height:100px!important;
  transform-origin:bottom center!important;
}


/* v82 — Page 5: lower hammer assembly so its base aligns with bottom of key */


.piano-mechanism-demo .piano-linkage{
  bottom:18px!important;
}


/* v83 — Page 5: hammer/linkage begins exactly after the right edge of the key */


.piano-mechanism-demo .piano-linkage{
  left:38%!important;
  width:36%!important;
}

.piano-mechanism-demo .piano-linkage-arm{
  left:0!important;
  width:60%!important;
}

.piano-mechanism-demo .piano-linkage-pivot{
  left:60%!important;
}

.piano-mechanism-demo .piano-hammer-arm{
  left:60%!important;
}

/* v84 — Page 5 label placement only */

.piano-mechanism-demo .label-hammer{
  left:61%!important;
  bottom:72px!important;
  transform:translateX(42px)!important;
  white-space:nowrap!important;
  text-align:left!important;
}
.piano-mechanism-demo .label-string{
  right:0!important;
  top:45px!important;
  transform:translateX(54px)!important;
  white-space:nowrap!important;
  text-align:left!important;
}


/* v85 — Page 5 damper rests on string, lifts for vibration, then returns */


.piano-mechanism-demo .piano-mechanism-damper{
  top:28px!important;
}

/* Keep the damper pad physically resting on the string in the idle state */

.piano-mechanism-demo .damper-pad{
  top:8px!important;
}

/* Lift shortly before impact, stay clear while the string vibrates,
   then return to the string to stop the vibration */

.piano-mechanism-demo.active-demo .piano-mechanism-damper{
  animation:v85DamperCycle 1.9s ease forwards!important;
}

.piano-mechanism-demo.active-demo .piano-mechanism-string path{
  animation:v85StringRing .095s ease-in-out .50s 14 alternate!important;
}

@keyframes v85DamperCycle{
  0%,12%{transform:translateY(0)}
  24%,72%{transform:translateY(-22px)}
  88%,100%{transform:translateY(0)}
}

@keyframes v85StringRing{
  from{transform:translateY(-8px)}
  to{transform:translateY(8px)}
}


/* v86 — Page 5: black damper pad physically rests on the string */


.piano-mechanism-demo .piano-mechanism-damper{
  top:58px!important;
}

/* Bottom edge of black pad aligns with the string */

.piano-mechanism-demo .damper-pad{
  top:8px!important;
  height:15px!important;
}

/* Lift the damper as the hammer reaches the string,
   keep it clear while the string vibrates,
   then return it to the string to stop the vibration. */

.piano-mechanism-demo.active-demo .piano-mechanism-damper{
  animation:v86DamperLiftReturn 1.9s ease forwards!important;
}

@keyframes v86DamperLiftReturn{
  0%,18%{
    transform:translateY(0);
  }
  28%,72%{
    transform:translateY(-24px);
  }
  88%,100%{
    transform:translateY(0);
  }
}


/* v87 — Page 5 label alignment + hammer reset with damper */


.piano-mechanism-demo .label-damper{
  right:6%!important;
  top:112px!important;
  transform:none!important;
  white-space:nowrap!important;
}

/* Align STRING label vertically with the actual string and keep it after the string */

.piano-mechanism-demo .label-string{
  right:0!important;
  top:68px!important;
  transform:translateX(54px)!important;
  white-space:nowrap!important;
  text-align:left!important;
}

/* Hammer strikes, remains away while the string rings, then returns
   to its original resting position as the damper comes back down. */

.piano-mechanism-demo.active-demo .piano-linkage{
  animation:v87LinkageStrikeReturn 1.9s ease forwards!important;
}

.piano-mechanism-demo.active-demo .piano-hammer-arm{
  animation:v87HammerStrikeReturn 1.9s ease forwards!important;
}

@keyframes v87LinkageStrikeReturn{
  0%,18%{transform:rotate(0deg)}
  28%,72%{transform:rotate(-14deg)}
  88%,100%{transform:rotate(0deg)}
}

@keyframes v87HammerStrikeReturn{
  0%,18%{transform:rotate(0deg)}
  28%,72%{transform:rotate(-10deg)}
  88%,100%{transform:rotate(0deg)}
}


/* v88 — smaller approved Page 5 piano mechanism used for all other piano references */


.mini-approved-piano{
  position:relative;
  width:180px;
  height:112px;
  margin:0 auto;
}

.mini-approved-piano .mini-piano-string{
  position:absolute;
  left:41%;
  right:0;
  top:10px;
  height:55px;
}
.mini-approved-piano .mini-piano-string svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.mini-approved-piano .mini-piano-string path{
  fill:none;
  stroke:#8B7352;
  stroke-width:4;
  stroke-linecap:round;
}

.mini-approved-piano .mini-piano-key{
  position:absolute;
  left:0;
  bottom:10px;
  width:42%;
  height:20px;
  border:2px solid #6E6B63;
  border-radius:2px;
  background:#f4f0e7;
  transform-origin:right center;
}

.mini-approved-piano .mini-piano-linkage{
  position:absolute;
  left:42%;
  bottom:10px;
  width:38%;
  height:76px;
  transform-origin:0 100%;
}
.mini-approved-piano .mini-linkage-arm{
  position:absolute;
  left:0;
  bottom:8px;
  width:64%;
  height:5px;
  background:#6E6B63;
  border-radius:4px;
}
.mini-approved-piano .mini-linkage-pivot{
  position:absolute;
  left:64%;
  bottom:2px;
  width:14px;
  height:14px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#8B7352;
  border:2px solid #6E6B63;
  box-sizing:border-box;
}
.mini-approved-piano .mini-hammer-arm{
  position:absolute;
  left:64%;
  bottom:10px;
  width:6px;
  height:62px;
  background:#6E6B63;
  border-radius:4px;
  transform-origin:bottom center;
}
.mini-approved-piano .mini-felt-head{
  position:absolute;
  left:50%;
  top:-11px;
  width:22px;
  height:22px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#d7c7ad;
  border:1px solid rgba(42,41,38,.18);
}

.mini-approved-piano .mini-piano-damper{
  position:absolute;
  right:10%;
  top:20px;
  width:28px;
  height:38px;
}
.mini-approved-piano .mini-damper-pad{
  position:absolute;
  left:50%;
  top:0;
  width:28px;
  height:9px;
  transform:translateX(-50%);
  border-radius:3px;
  background:#2A2926;
}
.mini-approved-piano .mini-damper-stem{
  position:absolute;
  left:50%;
  top:8px;
  width:5px;
  height:27px;
  transform:translateX(-50%);
  border-radius:3px;
  background:#6E6B63;
}

/* Automatic mini demonstration mirrors Page 5 sequence */

.mini-approved-piano .mini-piano-key{
  animation:v88MiniKey 2.2s ease-in-out infinite;
}
.mini-approved-piano .mini-piano-damper{
  animation:v88MiniDamper 2.2s ease-in-out infinite;
}
.mini-approved-piano .mini-piano-linkage{
  animation:v88MiniLinkage 2.2s ease-in-out infinite;
}
.mini-approved-piano .mini-hammer-arm{
  animation:v88MiniHammer 2.2s ease-in-out infinite;
}
.mini-approved-piano .mini-piano-string path{
  animation:v88MiniString 2.2s ease-in-out infinite;
}

@keyframes v88MiniKey{
  0%,18%,100%{transform:rotate(0)}
  28%,72%{transform:rotate(4deg)}
  88%{transform:rotate(0)}
}
@keyframes v88MiniDamper{
  0%,18%,100%{transform:translateY(0)}
  28%,72%{transform:translateY(-12px)}
  88%{transform:translateY(0)}
}
@keyframes v88MiniLinkage{
  0%,18%,100%{transform:rotate(0deg)}
  28%,72%{transform:rotate(-14deg)}
  88%{transform:rotate(0deg)}
}
@keyframes v88MiniHammer{
  0%,18%,100%{transform:rotate(0deg)}
  28%,72%{transform:rotate(-10deg)}
  88%{transform:rotate(0deg)}
}
@keyframes v88MiniString{
  0%,31%,74%,100%{transform:translateY(0)}
  36%{transform:translateY(-4px)}
  41%{transform:translateY(4px)}
  46%{transform:translateY(-3px)}
  51%{transform:translateY(3px)}
  56%{transform:translateY(-2px)}
  61%{transform:translateY(2px)}
  66%{transform:translateY(-1px)}
  71%{transform:translateY(1px)}
}


/* v89 — refine ONLY the smaller piano mechanisms.
   Smaller felt hammer + thinner mechanism lines. */


.mini-approved-piano .mini-linkage-arm{
  height:3px!important;
}

.mini-approved-piano .mini-hammer-arm{
  width:4px!important;
  height:54px!important;
}

.mini-approved-piano .mini-felt-head{
  top:-8px!important;
  width:16px!important;
  height:16px!important;
}

.mini-approved-piano .mini-piano-string path{
  stroke-width:2.25!important;
}

.mini-approved-piano .mini-damper-stem{
  width:3px!important;
}

.mini-approved-piano .mini-linkage-pivot{
  width:11px!important;
  height:11px!important;
  border-width:1.5px!important;
}


/* v90 — Pages 6–9 only: make the small piano string much thinner */


.lesson-page[data-page-role="instrument-explore"] .mini-approved-piano .mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-cello"] .mini-approved-piano .mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .mini-approved-piano .mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .mini-approved-piano .mini-piano-string path{
  stroke-width:1!important;
}


/* v91 — Pages 6–9 mini piano string: isolated from legacy .mini-piano-string rules */


.lesson-page[data-page-role="instrument-explore"] .mini-approved-piano .v91-mini-piano-string,
.lesson-page[data-page-role="instrument-quiz-cello"] .mini-approved-piano .v91-mini-piano-string,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .mini-approved-piano .v91-mini-piano-string,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .mini-approved-piano .v91-mini-piano-string{
  position:absolute!important;
  left:41%!important;
  right:0!important;
  top:10px!important;
  height:55px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
}

.lesson-page[data-page-role="instrument-explore"] .mini-approved-piano .v91-mini-piano-string svg,
.lesson-page[data-page-role="instrument-quiz-cello"] .mini-approved-piano .v91-mini-piano-string svg,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .mini-approved-piano .v91-mini-piano-string svg,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .mini-approved-piano .v91-mini-piano-string svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  background:transparent!important;
}

.lesson-page[data-page-role="instrument-explore"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-cello"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .mini-approved-piano .v91-mini-piano-string path{
  fill:none!important;
  stroke:#8B7352!important;
  stroke-width:.7!important;
  stroke-linecap:round!important;
  vector-effect:non-scaling-stroke!important;
}

/* preserve the approved small-string motion with the new isolated class */

.lesson-page[data-page-role="instrument-explore"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-cello"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .mini-approved-piano .v91-mini-piano-string path{
  animation:v88MiniString 2.2s ease-in-out infinite!important;
}


/* v92 — Pages 6–9: slightly thicker mini piano string */


.lesson-page[data-page-role="instrument-explore"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-cello"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .mini-approved-piano .v91-mini-piano-string path{
  stroke-width:1.15!important;
}


/* v93 — Pages 6–9 mini piano refinement:
   slightly thicker string + slightly shorter hammer */


.lesson-page[data-page-role="instrument-explore"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-cello"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .mini-approved-piano .v91-mini-piano-string path{
  stroke-width:1.55!important;
}

.lesson-page[data-page-role="instrument-explore"] .mini-approved-piano .mini-hammer-arm,
.lesson-page[data-page-role="instrument-quiz-cello"] .mini-approved-piano .mini-hammer-arm,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .mini-approved-piano .mini-hammer-arm,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .mini-approved-piano .mini-hammer-arm{
  height:48px!important;
}


/* v94 — Pages 6–9 mini piano refinement:
   slightly thicker string + noticeably shorter hammer */


.lesson-page[data-page-role="instrument-explore"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-cello"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .mini-approved-piano .v91-mini-piano-string path,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .mini-approved-piano .v91-mini-piano-string path{
  stroke-width:1.9!important;
}

.lesson-page[data-page-role="instrument-explore"] .mini-approved-piano .mini-hammer-arm,
.lesson-page[data-page-role="instrument-quiz-cello"] .mini-approved-piano .mini-hammer-arm,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .mini-approved-piano .mini-hammer-arm,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .mini-approved-piano .mini-hammer-arm{
  height:41px!important;
}


/* v96 — Page 1 piano visual removed completely.
   This overrides any legacy piano animation CSS or stale injected markup. */


.lesson-page[data-shared-first="true"].instrument-reading-page .intro-family.piano-family > *:not(strong){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  animation:none!important;
  transform:none!important;
}

.lesson-page[data-shared-first="true"].instrument-reading-page .intro-family.piano-family{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:165px!important;
}


/* v97 — Page 1 uses exact Page 6 animations. Override v96 Page-1 piano suppression. */


.lesson-page[data-shared-first="true"].instrument-reading-page .intro-family.piano-family > *:not(strong){
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:initial!important;
  animation:initial!important;
  transform:initial!important;
}

/* Preserve Page 6 animation geometry exactly on Page 1. */

.lesson-page[data-shared-first="true"].instrument-reading-page .intro-family .family-string-anim,
.lesson-page[data-shared-first="true"].instrument-reading-page .intro-family .family-wind-anim,
.lesson-page[data-shared-first="true"].instrument-reading-page .intro-family .family-cymbal-anim,
.lesson-page[data-shared-first="true"].instrument-reading-page .intro-family .mini-approved-piano{
  max-width:none!important;
  max-height:none!important;
}


/* v98 — Page 1 piano: remove late sizing constraints and use Page 6 geometry exactly */


.lesson-page[data-shared-first="true"].instrument-reading-page
.intro-family.piano-family .mini-approved-piano{
  position:relative!important;
  display:block!important;
  width:180px!important;
  height:112px!important;
  min-width:180px!important;
  min-height:112px!important;
  max-width:180px!important;
  max-height:112px!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  transform:none!important;
  overflow:visible!important;
}

/* Page 1 copied the Page 6 isolated string class.
   Give it the same container geometry that it has on Page 6. */

.lesson-page[data-shared-first="true"].instrument-reading-page
.intro-family.piano-family .v91-mini-piano-string{
  position:absolute!important;
  left:41%!important;
  right:0!important;
  top:10px!important;
  height:55px!important;
  width:auto!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
}

.lesson-page[data-shared-first="true"].instrument-reading-page
.intro-family.piano-family .v91-mini-piano-string svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
  background:transparent!important;
}

.lesson-page[data-shared-first="true"].instrument-reading-page
.intro-family.piano-family .v91-mini-piano-string path{
  fill:none!important;
  stroke:#8B7352!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  vector-effect:non-scaling-stroke!important;
  animation:v88MiniString 2.2s ease-in-out infinite!important;
}

/* Match the current Page 6 hammer height as well. */

.lesson-page[data-shared-first="true"].instrument-reading-page
.intro-family.piano-family .mini-hammer-arm{
  height:41px!important;
}


/* v104 — Pages 7–9 use the exact Page 6 family animations.
   Neutralize older quiz-only sizing/positioning constraints. */


.lesson-page[data-page-role="instrument-quiz-cello"] .family-answer-choice > :not(strong):not(.instrument-quiz-feedback),
.lesson-page[data-page-role="instrument-quiz-saxophone"] .family-answer-choice > :not(strong):not(.instrument-quiz-feedback),
.lesson-page[data-page-role="instrument-quiz-tambourine"] .family-answer-choice > :not(strong):not(.instrument-quiz-feedback){
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  transform:none;
}

/* Match Page 6 family visual geometry */

.lesson-page[data-page-role="instrument-quiz-cello"] .family-string-anim,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .family-string-anim,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .family-string-anim{
  width:100%!important;
}

.lesson-page[data-page-role="instrument-quiz-cello"] .family-wind-anim,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .family-wind-anim,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .family-wind-anim{
  transform:none!important;
  width:100%!important;
}

.lesson-page[data-page-role="instrument-quiz-cello"] .family-cymbal-anim,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .family-cymbal-anim,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .family-cymbal-anim{
  transform:none!important;
}

.lesson-page[data-page-role="instrument-quiz-cello"] .mini-approved-piano,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .mini-approved-piano,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .mini-approved-piano{
  position:relative!important;
  width:180px!important;
  height:112px!important;
  min-width:180px!important;
  min-height:112px!important;
  max-width:180px!important;
  max-height:112px!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
}

/* Keep the isolated Page 6 piano string geometry on quiz pages */

.lesson-page[data-page-role="instrument-quiz-cello"] .v91-mini-piano-string,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .v91-mini-piano-string,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .v91-mini-piano-string{
  position:absolute!important;
  left:41%!important;
  right:0!important;
  top:10px!important;
  height:55px!important;
  width:auto!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
}


/* v105 — Page 2: traveling vibration along a string */


.traveling-string-demo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(900px,96%);
  margin:20px auto 0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}

.traveling-string-track{
  position:relative;
  width:100%;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.traveling-string-svg{
  width:100%;
  height:120px;
  overflow:visible;
}

.traveling-string-line{
  fill:none;
  stroke:#8B7352;
  stroke-width:3;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

.traveling-string-prompt{
  margin-top:4px;
  color:#6E6B63;
  font-size:14px;
}

/* Idle state is perfectly straight. */

.traveling-string-demo .traveling-string-line{
  d:path("M20 60 L880 60");
}

/* On click, a localized wave packet travels left -> right.
   The whole line does not move vertically; only the disturbance travels. */

.traveling-string-demo.play-wave .traveling-string-line{
  animation:v105TravelingWave 1.7s linear 1;
}

@keyframes v105TravelingWave{
  0%{
    d:path("M20 60 L880 60");
  }
  12%{
    d:path("M20 60 C45 60 55 40 70 40 C85 40 95 80 110 80 C125 80 135 60 160 60 L880 60");
  }
  28%{
    d:path("M20 60 L165 60 C190 60 200 40 215 40 C230 40 240 80 255 80 C270 80 280 60 305 60 L880 60");
  }
  45%{
    d:path("M20 60 L320 60 C345 60 355 40 370 40 C385 40 395 80 410 80 C425 80 435 60 460 60 L880 60");
  }
  62%{
    d:path("M20 60 L475 60 C500 60 510 40 525 40 C540 40 550 80 565 80 C580 80 590 60 615 60 L880 60");
  }
  78%{
    d:path("M20 60 L630 60 C655 60 665 40 680 40 C695 40 705 80 720 80 C735 80 745 60 770 60 L880 60");
  }
  92%{
    d:path("M20 60 L760 60 C785 60 795 40 810 40 C825 40 835 80 850 80 C865 80 875 60 880 60");
  }
  100%{
    d:path("M20 60 L880 60");
  }
}


/* v106 — Page 2 string motion is now driven by JS for reliable visible movement */


.traveling-string-demo.play-wave .traveling-string-line{
  animation:none!important;
}
.traveling-string-line{
  transition:none!important;
}


/* v107 — compact click-to-wiggle string used throughout instrument-family references */


.mini-traveling-string-demo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:150px;
  height:76px;
  margin:0 auto;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.mini-traveling-string-svg{
  display:block;
  width:100%;
  height:70px;
  overflow:visible;
}

.mini-traveling-string-line{
  fill:none;
  stroke:#8B7352;
  stroke-width:2.2;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

/* Remove legacy sizing/animation constraints from old string visuals */

.intro-family.string-family .mini-traveling-string-demo,
.family-card[data-instrument-family="string"] .mini-traveling-string-demo,
.family-answer-choice[data-choice="string"] .mini-traveling-string-demo{
  max-width:none!important;
  max-height:none!important;
  transform:none!important;
  animation:none!important;
}


/* v108 — mini string animations loop automatically; no click/button behavior */


.mini-traveling-string-demo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:150px!important;
  height:76px!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  cursor:default!important;
  pointer-events:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}

.mini-traveling-string-demo .mini-traveling-string-svg{
  display:block!important;
  width:100%!important;
  height:70px!important;
  overflow:visible!important;
}

.mini-traveling-string-demo .mini-traveling-string-line{
  fill:none!important;
  stroke:#8B7352!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  vector-effect:non-scaling-stroke!important;
  animation:none!important;
  transition:none!important;
}


/* v109 — make every SMALL air/wind family animation slightly smaller.
   Page 3's full-size wind demonstration is intentionally unaffected. */


#instrumentFirstPageTemplate .intro-family.air-family .family-wind-anim,
.lesson-page[data-shared-first="true"] .intro-family.air-family .family-wind-anim,
.lesson-page[data-page-role="instrument-explore"] [data-instrument-family="air"] .family-wind-anim,
.lesson-page[data-page-role="instrument-quiz-cello"] .family-answer-choice[data-choice="air"] .family-wind-anim,
.lesson-page[data-page-role="instrument-quiz-saxophone"] .family-answer-choice[data-choice="air"] .family-wind-anim,
.lesson-page[data-page-role="instrument-quiz-tambourine"] .family-answer-choice[data-choice="air"] .family-wind-anim{
  transform:scale(.80)!important;
  transform-origin:center center!important;
}


/* v110 — Page 1 uses the new looping mini string animation.
   Override any older intro-string sizing/animation constraints. */


#instrumentFirstPageTemplate .intro-family.string-family > *:not(strong),
.lesson-page[data-shared-first="true"].instrument-reading-page .intro-family.string-family > *:not(strong){
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  transform:none!important;
  animation:none!important;
}

#instrumentFirstPageTemplate .intro-family.string-family .mini-traveling-string-demo,
.lesson-page[data-shared-first="true"].instrument-reading-page .intro-family.string-family .mini-traveling-string-demo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:150px!important;
  height:76px!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  pointer-events:none!important;
  overflow:visible!important;
}

#instrumentFirstPageTemplate .intro-family.string-family .mini-traveling-string-svg,
.lesson-page[data-shared-first="true"].instrument-reading-page .intro-family.string-family .mini-traveling-string-svg{
  display:block!important;
  width:100%!important;
  height:70px!important;
  overflow:visible!important;
}

#instrumentFirstPageTemplate .intro-family.string-family .mini-traveling-string-line,
.lesson-page[data-shared-first="true"].instrument-reading-page .intro-family.string-family .mini-traveling-string-line{
  fill:none!important;
  stroke:#8B7352!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  vector-effect:non-scaling-stroke!important;
  animation:none!important;
  transition:none!important;
}


/* v128 — self-contained Air/Wind horn interaction */


.lesson-page[data-page-role="instrument-air"] .air-horn-component{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(700px,88vw)!important;
  margin:24px auto 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
}

.lesson-page[data-page-role="instrument-air"] .air-horn-svg{
  display:block!important;
  width:100%!important;
  height:210px!important;
  overflow:visible!important;
}

.lesson-page[data-page-role="instrument-air"] .air-horn-outline,
.lesson-page[data-page-role="instrument-air"] .air-horn-loop,
.lesson-page[data-page-role="instrument-air"] .air-horn-mouth,
.lesson-page[data-page-role="instrument-air"] .air-horn-mouth-inner{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
}

.lesson-page[data-page-role="instrument-air"] .air-horn-outline{
  stroke-width:6!important;
}
.lesson-page[data-page-role="instrument-air"] .air-horn-loop,
.lesson-page[data-page-role="instrument-air"] .air-horn-mouth{
  stroke:#8B7352!important;
  stroke-width:5.5!important;
}
.lesson-page[data-page-role="instrument-air"] .air-horn-mouth-inner{
  stroke-width:4!important;
}

/* Wind lines are part of the same SVG. Hidden at rest. */

.lesson-page[data-page-role="instrument-air"] .air-horn-wind{
  fill:none!important;
  stroke:var(--gold)!important;
  stroke-width:6!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
  opacity:0;
  transform:translateX(-12px);
}

.lesson-page[data-page-role="instrument-air"] .air-horn-wind-group.is-playing .air-horn-wind{
  animation:v128HornWind 1.55s ease-out 1 forwards!important;
}
.lesson-page[data-page-role="instrument-air"] .air-horn-wind-group.is-playing .air-horn-wind-2{
  animation-delay:.08s!important;
}
.lesson-page[data-page-role="instrument-air"] .air-horn-wind-group.is-playing .air-horn-wind-3{
  animation-delay:.16s!important;
}

@keyframes v128HornWind{
  0%{
    opacity:0;
    transform:translateX(-12px);
  }
  14%{
    opacity:1;
    transform:translateX(0);
  }
  72%{
    opacity:1;
    transform:translateX(18px);
  }
  100%{
    opacity:0;
    transform:translateX(34px);
  }
}

.lesson-page[data-page-role="instrument-air"] .air-horn-trigger{
  all:unset!important;
  display:block!important;
  box-sizing:border-box!important;
  width:max-content!important;
  margin:2px auto 0!important;
  padding:2px 8px!important;
  color:#6E6B63!important;
  font:inherit!important;
  font-size:14px!important;
  line-height:1.2!important;
  text-align:center!important;
  cursor:pointer!important;
}

.lesson-page[data-page-role="instrument-air"] .air-horn-trigger span{
  all:unset!important;
  display:block!important;
  color:#6E6B63!important;
  font:inherit!important;
  font-size:14px!important;
  line-height:1.2!important;
  text-align:center!important;
  cursor:pointer!important;
}


/* v129 — slightly smaller Air/Wind horn interaction */


.lesson-page[data-page-role="instrument-air"] .air-horn-component{
  width:min(610px,80vw)!important;
}

.lesson-page[data-page-role="instrument-air"] .air-horn-svg{
  height:184px!important;
}


/* v133 — Air/Wind animation is clickable like the other instrument animations */


.lesson-page[data-page-role="instrument-air"] .air-horn-component{
  cursor:pointer!important;
}

.lesson-page[data-page-role="instrument-air"] .air-horn-svg{
  cursor:pointer!important;
}


/* v143 — Book I, Chapter 3: How Sound Travels */


.travel-only-page{display:none}
.travel-only-page.active{display:flex!important;flex-direction:column;justify-content:center}
.travel-copy{max-width:820px;margin:0 auto;text-align:center;font-family:var(--lesson-body-font);font-size:var(--lesson-copy-size);line-height:var(--lesson-copy-line);color:#2A2926}
.travel-lead{font-size:28px}
.delayed-travel-visual{opacity:0;animation:v143Reveal .55s ease 1s forwards}
@keyframes v143Reveal{to{opacity:1}}

.travel-source-demo{width:min(850px,92%);height:210px;margin:22px auto 0;display:flex;align-items:center;justify-content:center;gap:22px}
.travel-source-cymbal{width:110px;height:110px;position:relative;flex:none}
.travel-source-cymbal:before{content:"";position:absolute;left:5px;right:5px;top:48px;height:22px;border:4px solid #8B7352;border-radius:50%}
.travel-source-cymbal span{position:absolute;width:5px;height:90px;background:#6E6B63;left:51px;top:62px}
.travel-source-wave{width:540px;display:flex;align-items:center;justify-content:space-between}
.travel-source-wave i,
.travel-particles i,
.travel-finish-path i{width:13px;height:13px;border-radius:50%;background:#8B7352;display:block}
.travel-ear{font-family:Georgia,serif;font-size:96px;transform:rotate(180deg);color:#6E6B63;width:70px}
.travel-running .travel-source-wave i{animation:v143Pass .55s ease-in-out 2 alternate}
.travel-running .travel-source-wave i:nth-child(2){animation-delay:.06s}.travel-running .travel-source-wave i:nth-child(3){animation-delay:.12s}.travel-running .travel-source-wave i:nth-child(4){animation-delay:.18s}.travel-running .travel-source-wave i:nth-child(5){animation-delay:.24s}.travel-running .travel-source-wave i:nth-child(6){animation-delay:.30s}.travel-running .travel-source-wave i:nth-child(7){animation-delay:.36s}.travel-running .travel-source-wave i:nth-child(8){animation-delay:.42s}.travel-running .travel-source-wave i:nth-child(9){animation-delay:.48s}.travel-running .travel-source-wave i:nth-child(10){animation-delay:.54s}.travel-running .travel-source-wave i:nth-child(11){animation-delay:.60s}.travel-running .travel-source-wave i:nth-child(12){animation-delay:.66s}
@keyframes v143Pass{to{transform:translateX(9px) scale(1.35);background:#2A2926}}

.travel-particle-demo{all:unset;cursor:pointer;width:min(880px,92%);height:230px;margin:20px auto 0;display:grid;grid-template-columns:80px 1fr 90px;grid-template-rows:1fr 28px;align-items:center;box-sizing:border-box}
.travel-hit{font-size:11px;letter-spacing:.15em;text-align:center;color:#6E6B63}
.travel-particles{display:flex;justify-content:space-between;align-items:center}
.travel-particles i{width:16px;height:16px;background:#8B7352}
.travel-ear-shape{width:48px;height:78px;border:5px solid #6E6B63;border-left:0;border-radius:0 80% 80% 0}
.travel-particle-demo small{grid-column:1/-1;text-align:center;font-size:11px;letter-spacing:.1em;color:#8f8780}
.travel-particle-demo.is-running .travel-particles i{animation:v143Particle .32s ease-in-out 2 alternate}
.travel-particle-demo.is-running .travel-particles i:nth-child(2){animation-delay:.07s}.travel-particle-demo.is-running .travel-particles i:nth-child(3){animation-delay:.14s}.travel-particle-demo.is-running .travel-particles i:nth-child(4){animation-delay:.21s}.travel-particle-demo.is-running .travel-particles i:nth-child(5){animation-delay:.28s}.travel-particle-demo.is-running .travel-particles i:nth-child(6){animation-delay:.35s}.travel-particle-demo.is-running .travel-particles i:nth-child(7){animation-delay:.42s}.travel-particle-demo.is-running .travel-particles i:nth-child(8){animation-delay:.49s}.travel-particle-demo.is-running .travel-particles i:nth-child(9){animation-delay:.56s}.travel-particle-demo.is-running .travel-particles i:nth-child(10){animation-delay:.63s}.travel-particle-demo.is-running .travel-particles i:nth-child(11){animation-delay:.70s}.travel-particle-demo.is-running .travel-particles i:nth-child(12){animation-delay:.77s}.travel-particle-demo.is-running .travel-particles i:nth-child(13){animation-delay:.84s}.travel-particle-demo.is-running .travel-particles i:nth-child(14){animation-delay:.91s}
@keyframes v143Particle{to{transform:translateX(12px);background:#2A2926}}

.travel-medium-grid{width:min(820px,92%);margin:34px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:44px;text-align:center}
.travel-medium-grid>div{display:flex;flex-direction:column;align-items:center;gap:8px}
.travel-medium-grid strong{font-size:12px;letter-spacing:.13em}.travel-medium-grid span{font-size:12px;color:#8f8780}
.medium-particles{width:180px;height:110px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-items:center}
.medium-particles i{width:13px;height:13px;border-radius:50%;background:#8B7352}
.medium-particles.gas{gap:20px}.medium-particles.liquid{gap:7px}.medium-particles.solid{gap:0;border:1px solid #dfd7cd}

.travel-space-demo{width:min(760px,90%);height:160px;margin:30px auto 0;display:grid;grid-template-columns:160px 1fr 90px;align-items:center}
.space-source{font-size:11px;letter-spacing:.12em;text-align:center;padding:20px;border:2px solid #8B7352;border-radius:50%}
.space-gap{height:2px;border-top:2px dashed #dfd7cd;position:relative}.space-gap span{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-size:11px;color:#8f8780;white-space:nowrap}
.space-ear{width:46px;height:76px;border:5px solid #6E6B63;border-left:0;border-radius:0 80% 80% 0}
.travel-answer{text-align:center;font-family:var(--lesson-body-font);font-size:var(--lesson-lead-size)}

.travel-finish{text-align:center;max-width:760px;margin:auto;font-family:var(--lesson-body-font)}.travel-finish h2{font-family:var(--lesson-display-font);font-size:42px;font-weight:500;margin:12px 0}.travel-finish p{font-family:var(--lesson-body-font);font-size:var(--lesson-copy-size);line-height:var(--lesson-copy-line)}.travel-finish>strong{display:block;margin-top:24px;font-size:15px}
.travel-finish-path{display:flex;justify-content:center;gap:28px;margin:34px auto}.travel-finish-path i{animation:v143Finish 1s ease-in-out infinite alternate}.travel-finish-path i:nth-child(2){animation-delay:.1s}.travel-finish-path i:nth-child(3){animation-delay:.2s}.travel-finish-path i:nth-child(4){animation-delay:.3s}.travel-finish-path i:nth-child(5){animation-delay:.4s}.travel-finish-path i:nth-child(6){animation-delay:.5s}.travel-finish-path i:nth-child(7){animation-delay:.6s}
@keyframes v143Finish{to{transform:translateX(8px) scale(1.25);background:#2A2926}}


/* v144 — consistent improved ear illustration across Chapter 3 */


.travel-only-page .improved-ear{
  display:block!important;
  overflow:visible!important;
  flex:none!important;
}

.travel-only-page .improved-ear .ear-outer,
.travel-only-page .improved-ear .ear-inner,
.travel-only-page .improved-ear .ear-canal{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
}

.travel-only-page .improved-ear .ear-outer{
  stroke-width:4!important;
}

.travel-only-page .improved-ear .ear-inner{
  stroke-width:3.2!important;
}

.travel-only-page .improved-ear .ear-canal{
  stroke:#8B7352!important;
  stroke-width:3!important;
}

/* Source animation ear */

.travel-only-page .travel-source-demo .travel-ear.improved-ear{
  width:64px!important;
  height:88px!important;
  color:inherit!important;
  transform:none!important;
  font-size:0!important;
}

/* Particle passing animation ear */

.travel-only-page .travel-particle-demo .travel-ear-shape.improved-ear{
  width:58px!important;
  height:80px!important;
  border:0!important;
  border-radius:0!important;
  justify-self:center!important;
}

/* Vacuum/space application ear */

.travel-only-page .travel-space-demo .space-ear.improved-ear{
  width:58px!important;
  height:80px!important;
  border:0!important;
  border-radius:0!important;
  justify-self:center!important;
}


/* v145 — Chapter 3 Page 1 speaker icon */


.travel-source-demo .travel-speaker-icon{
  width:120px!important;
  height:120px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:none!important;
}

.travel-speaker-svg{
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
}

.travel-speaker-svg .speaker-body,
.travel-speaker-svg .speaker-wave{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
}

.travel-speaker-svg .speaker-body{
  stroke-width:4!important;
}

.travel-speaker-svg .speaker-wave{
  stroke:#8B7352!important;
  stroke-width:4!important;
}

/* v146 — Page 1 repeating travel animation + larger receiving ear */


.lesson-page[data-page-role="travel-source"] .travel-source-demo .travel-ear.improved-ear{
  width:88px!important;
  height:116px!important;
}


/* v147 — Page 1 ear: remove any surrounding ring/container outline */


.lesson-page[data-page-role="travel-source"] .travel-ear.improved-ear{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:0!important;
}
.lesson-page[data-page-role="travel-source"] .travel-ear.improved-ear::before,
.lesson-page[data-page-role="travel-source"] .travel-ear.improved-ear::after{
  content:none!important;
  display:none!important;
}

/* v147 — Page 3 medium animations */

.lesson-page[data-page-role="travel-mediums"] .medium-animation-grid{
  width:min(900px,94%)!important;
  margin:28px auto 0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:28px!important;
  align-items:start!important;
}

.lesson-page[data-page-role="travel-mediums"] .medium-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  gap:7px!important;
}

.lesson-page[data-page-role="travel-mediums"] .medium-card strong{
  font-size:12px!important;
  letter-spacing:.13em!important;
  color:#2A2926!important;
}

.lesson-page[data-page-role="travel-mediums"] .medium-card > span{
  font-size:11px!important;
  color:#8f8780!important;
}

.lesson-page[data-page-role="travel-mediums"] .medium-card p{
  margin:4px 0 0!important;
  max-width:250px!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:14px!important;
  line-height:1.45!important;
  color:#6E6B63!important;
}

.lesson-page[data-page-role="travel-mediums"] .medium-stage{
  position:relative!important;
  width:240px!important;
  height:135px!important;
  border:1px solid #dfd7cd!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:rgba(255,253,250,.35)!important;
}

.lesson-page[data-page-role="travel-mediums"] .medium-source-pulse{
  position:absolute!important;
  left:14px!important;
  top:50%!important;
  width:14px!important;
  height:52px!important;
  transform:translateY(-50%)!important;
  border-radius:7px!important;
  background:#6E6B63!important;
  animation:v147SourcePulse .8s ease-in-out infinite alternate!important;
}

/* ---------------- AIR ---------------- */

.lesson-page[data-page-role="travel-mediums"] .air-particle-field i{
  position:absolute!important;
  width:12px!important;
  height:12px!important;
  border-radius:50%!important;
  background:#8B7352!important;
}

.lesson-page[data-page-role="travel-mediums"] .air-particle-field i:nth-child(1){left:52px!important;top:28px!important}
.lesson-page[data-page-role="travel-mediums"] .air-particle-field i:nth-child(2){left:88px!important;top:78px!important}
.lesson-page[data-page-role="travel-mediums"] .air-particle-field i:nth-child(3){left:118px!important;top:43px!important}
.lesson-page[data-page-role="travel-mediums"] .air-particle-field i:nth-child(4){left:154px!important;top:88px!important}
.lesson-page[data-page-role="travel-mediums"] .air-particle-field i:nth-child(5){left:188px!important;top:34px!important}
.lesson-page[data-page-role="travel-mediums"] .air-particle-field i:nth-child(6){left:67px!important;top:104px!important}
.lesson-page[data-page-role="travel-mediums"] .air-particle-field i:nth-child(7){left:138px!important;top:17px!important}
.lesson-page[data-page-role="travel-mediums"] .air-particle-field i:nth-child(8){left:207px!important;top:76px!important}

.lesson-page[data-page-role="travel-mediums"] .air-medium-stage .air-particle-field i{
  animation:v147AirParticle 1.9s ease-in-out infinite!important;
}
.lesson-page[data-page-role="travel-mediums"] .air-medium-stage .air-particle-field i:nth-child(2){animation-delay:.12s!important}
.lesson-page[data-page-role="travel-mediums"] .air-medium-stage .air-particle-field i:nth-child(3){animation-delay:.24s!important}
.lesson-page[data-page-role="travel-mediums"] .air-medium-stage .air-particle-field i:nth-child(4){animation-delay:.36s!important}
.lesson-page[data-page-role="travel-mediums"] .air-medium-stage .air-particle-field i:nth-child(5){animation-delay:.48s!important}
.lesson-page[data-page-role="travel-mediums"] .air-medium-stage .air-particle-field i:nth-child(6){animation-delay:.60s!important}
.lesson-page[data-page-role="travel-mediums"] .air-medium-stage .air-particle-field i:nth-child(7){animation-delay:.72s!important}
.lesson-page[data-page-role="travel-mediums"] .air-medium-stage .air-particle-field i:nth-child(8){animation-delay:.84s!important}

/* ---------------- WATER ---------------- */

.lesson-page[data-page-role="travel-mediums"] .water-particle-field{
  position:absolute!important;
  left:46px!important;
  right:12px!important;
  top:20px!important;
  bottom:14px!important;
  display:grid!important;
  grid-template-columns:repeat(5,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  align-items:center!important;
  justify-items:center!important;
}

.lesson-page[data-page-role="travel-mediums"] .water-particle-field i{
  width:14px!important;
  height:14px!important;
  border-radius:50%!important;
  background:#8B7352!important;
  animation:v147WaterParticle 1.55s ease-in-out infinite!important;
}
.lesson-page[data-page-role="travel-mediums"] .water-particle-field i:nth-child(2){animation-delay:.08s!important}
.lesson-page[data-page-role="travel-mediums"] .water-particle-field i:nth-child(3){animation-delay:.16s!important}
.lesson-page[data-page-role="travel-mediums"] .water-particle-field i:nth-child(4){animation-delay:.24s!important}
.lesson-page[data-page-role="travel-mediums"] .water-particle-field i:nth-child(5){animation-delay:.32s!important}
.lesson-page[data-page-role="travel-mediums"] .water-particle-field i:nth-child(6){animation-delay:.40s!important}
.lesson-page[data-page-role="travel-mediums"] .water-particle-field i:nth-child(7){animation-delay:.48s!important}
.lesson-page[data-page-role="travel-mediums"] .water-particle-field i:nth-child(8){animation-delay:.56s!important}
.lesson-page[data-page-role="travel-mediums"] .water-particle-field i:nth-child(9){animation-delay:.64s!important}
.lesson-page[data-page-role="travel-mediums"] .water-particle-field i:nth-child(10){animation-delay:.72s!important}

/* ---------------- WOOD ---------------- */

.lesson-page[data-page-role="travel-mediums"] .wood-particle-field{
  position:absolute!important;
  left:44px!important;
  right:14px!important;
  top:24px!important;
  bottom:22px!important;
  display:grid!important;
  grid-template-columns:repeat(6,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:2px!important;
  align-items:center!important;
  justify-items:center!important;
}

.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i{
  width:17px!important;
  height:17px!important;
  border-radius:4px!important;
  background:#8B7352!important;
  animation:v147WoodParticle 1.25s ease-in-out infinite!important;
}
.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i:nth-child(2){animation-delay:.05s!important}
.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i:nth-child(3){animation-delay:.10s!important}
.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i:nth-child(4){animation-delay:.15s!important}
.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i:nth-child(5){animation-delay:.20s!important}
.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i:nth-child(6){animation-delay:.25s!important}
.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i:nth-child(7){animation-delay:.30s!important}
.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i:nth-child(8){animation-delay:.35s!important}
.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i:nth-child(9){animation-delay:.40s!important}
.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i:nth-child(10){animation-delay:.45s!important}
.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i:nth-child(11){animation-delay:.50s!important}
.lesson-page[data-page-role="travel-mediums"] .wood-particle-field i:nth-child(12){animation-delay:.55s!important}

@keyframes v147SourcePulse{
  from{transform:translateY(-50%) scaleY(.78);opacity:.55}
  to{transform:translateY(-50%) scaleY(1.05);opacity:1}
}

@keyframes v147AirParticle{
  0%,100%{transform:translateX(0)}
  35%{transform:translateX(10px)}
  55%{transform:translateX(-4px)}
}

@keyframes v147WaterParticle{
  0%,100%{transform:translateX(0) translateY(0)}
  40%{transform:translateX(7px) translateY(-2px)}
  65%{transform:translateX(-3px) translateY(2px)}
}

@keyframes v147WoodParticle{
  0%,100%{transform:translateX(0)}
  45%{transform:translateX(5px)}
  60%{transform:translateX(-2px)}
}


/* v148 — Page 4: clearer vacuum demonstration with moving/bouncing particles */


.lesson-page[data-page-role="travel-space"] .improved-vacuum-demo{
  width:min(820px,92%)!important;
  height:190px!important;
  margin:24px auto 0!important;
  display:grid!important;
  grid-template-columns:1fr 250px 90px!important;
  align-items:center!important;
  gap:20px!important;
}

.vacuum-matter-side{
  height:150px!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  border-right:1px solid #dfd7cd!important;
}

.vacuum-source{
  width:88px!important;
  height:88px!important;
  border:2px solid #8B7352!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:none!important;
  font-size:10px!important;
  letter-spacing:.1em!important;
  color:#6E6B63!important;
  animation:v148SourceBounce .75s ease-in-out infinite alternate!important;
}

.vacuum-moving-particles{
  position:relative!important;
  flex:1!important;
  height:125px!important;
  margin-left:18px!important;
}

.vacuum-moving-particles i{
  position:absolute!important;
  width:14px!important;
  height:14px!important;
  border-radius:50%!important;
  background:#8B7352!important;
  animation:v148ParticleBounce 1.25s ease-in-out infinite alternate!important;
}

.vacuum-moving-particles i:nth-child(1){left:5%!important;top:17%!important;animation-delay:0s!important}
.vacuum-moving-particles i:nth-child(2){left:21%!important;top:62%!important;animation-delay:.12s!important}
.vacuum-moving-particles i:nth-child(3){left:38%!important;top:30%!important;animation-delay:.24s!important}
.vacuum-moving-particles i:nth-child(4){left:54%!important;top:72%!important;animation-delay:.36s!important}
.vacuum-moving-particles i:nth-child(5){left:67%!important;top:15%!important;animation-delay:.48s!important}
.vacuum-moving-particles i:nth-child(6){left:78%!important;top:49%!important;animation-delay:.60s!important}
.vacuum-moving-particles i:nth-child(7){left:88%!important;top:77%!important;animation-delay:.72s!important}

.vacuum-gap{
  position:relative!important;
  height:150px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
}

.vacuum-gap strong{
  font-size:12px!important;
  letter-spacing:.14em!important;
  color:#2A2926!important;
}

.vacuum-gap>span{
  font-size:11px!important;
  color:#8f8780!important;
}

.vacuum-boundary{
  position:absolute!important;
  left:0!important;
  top:18px!important;
  bottom:18px!important;
  border-left:2px dashed #8B7352!important;
}

.vacuum-stopped-wave{
  position:absolute!important;
  left:-16px!important;
  top:50%!important;
  width:38px!important;
  height:58px!important;
  transform:translateY(-50%)!important;
}

.vacuum-stopped-wave i{
  position:absolute!important;
  left:0!important;
  top:50%!important;
  border:2px solid #8B7352!important;
  border-left:0!important;
  border-top-color:transparent!important;
  border-bottom-color:transparent!important;
  border-radius:0 50% 50% 0!important;
  transform:translateY(-50%)!important;
  opacity:.75!important;
  animation:v148WaveStop 1.4s ease-out infinite!important;
}
.vacuum-stopped-wave i:nth-child(1){width:10px!important;height:22px!important}
.vacuum-stopped-wave i:nth-child(2){width:20px!important;height:38px!important;animation-delay:.12s!important}
.vacuum-stopped-wave i:nth-child(3){width:30px!important;height:54px!important;animation-delay:.24s!important}

.lesson-page[data-page-role="travel-space"] .space-ear.improved-ear{
  width:72px!important;
  height:96px!important;
  border:0!important;
  border-radius:0!important;
  justify-self:center!important;
}

@keyframes v148ParticleBounce{
  0%{transform:translate(0,0) scale(1)}
  35%{transform:translate(8px,-12px) scale(1.08)}
  70%{transform:translate(16px,8px) scale(.96)}
  100%{transform:translate(24px,-5px) scale(1.04)}
}

@keyframes v148SourceBounce{
  from{transform:scale(.94)}
  to{transform:scale(1.04)}
}

@keyframes v148WaveStop{
  0%{opacity:.8;transform:translate(-8px,-50%) scale(.75)}
  65%{opacity:.45;transform:translate(4px,-50%) scale(1)}
  100%{opacity:0;transform:translate(8px,-50%) scale(1.05)}
}

/* v151 — extra Page 1 travel dot immediately before the ear */

.travel-running .travel-source-wave i:nth-child(13){
  animation-delay:.72s!important;
}


/* v152 — Page 1: bring receiving ear closer to the final traveling dot */


.lesson-page[data-page-role="travel-source"] .travel-source-demo .travel-ear.improved-ear{
  margin-left:-14px!important;
}

/* v153 — Chapter 3 Page 1: center the entire animation group */


.lesson-page[data-page-role="travel-source"] .travel-source-demo{
  width:min(820px,90%)!important;
  margin:22px auto 0!important;
  display:grid!important;
  grid-template-columns:120px minmax(0,540px) 88px!important;
  justify-content:center!important;
  align-items:center!important;
  column-gap:8px!important;
}
.lesson-page[data-page-role="travel-source"] .travel-source-wave{
  width:100%!important;
}
.lesson-page[data-page-role="travel-source"] .travel-ear.improved-ear{
  margin-left:-8px!important;
  justify-self:start!important;
}


/* v153 — Chapter 3 completion styled like Chapter 1's completion experience */


.lesson-page[data-page-role="travel-finish"]{
  align-items:center!important;
  text-align:center!important;
}
.lesson-page[data-page-role="travel-finish"] .sound-style-completion{
  width:min(820px,92%)!important;
  margin:auto!important;
  text-align:center!important;
  opacity:0;
  animation:v153CompletionReveal .65s ease .25s forwards;
}
.lesson-page[data-page-role="travel-finish"] .sound-style-completion h2{
  font:42px/1.1 "Playfair Display",Georgia,serif!important;
  font-weight:400!important;
  color:var(--navy)!important;
  margin:12px 0 14px!important;
}
.lesson-page[data-page-role="travel-finish"] .sound-style-completion p{
  max-width:650px!important;
  margin:0 auto!important;
  font:19px/1.5 "Playfair Display",Georgia,serif!important;
  color:#6E6B63!important;
}
.travel-completion-animation{
  width:min(690px,88%)!important;
  height:150px!important;
  margin:28px auto 22px!important;
  display:grid!important;
  grid-template-columns:100px 1fr 82px!important;
  align-items:center!important;
  gap:10px!important;
}
.completion-speaker svg{
  width:90px!important;
  height:90px!important;
  overflow:visible!important;
}
.completion-speaker path{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-width:4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.completion-speaker path:nth-child(n/**/+2){
  stroke:#8B7352!important;
}
.completion-travel-dots{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.completion-travel-dots i{
  display:block!important;
  width:14px!important;
  height:14px!important;
  border-radius:50%!important;
  background:#8B7352!important;
  animation:v153CompletionDot 1.25s ease-in-out infinite!important;
}
.completion-travel-dots i:nth-child(2){animation-delay:.12s!important}
.completion-travel-dots i:nth-child(3){animation-delay:.24s!important}
.completion-travel-dots i:nth-child(4){animation-delay:.36s!important}
.completion-travel-dots i:nth-child(5){animation-delay:.48s!important}
.completion-travel-dots i:nth-child(6){animation-delay:.60s!important}
.completion-travel-dots i:nth-child(7){animation-delay:.72s!important}
.completion-ear{
  width:72px!important;
  height:96px!important;
}
.completion-ear .ear-outer,
.completion-ear .ear-inner,
.completion-ear .ear-canal{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.completion-ear .ear-outer{stroke-width:4!important}
.completion-ear .ear-inner{stroke-width:3.2!important}
.completion-ear .ear-canal{stroke:#8B7352!important;stroke-width:3!important}
.sound-style-completion>strong{
  display:block!important;
  margin-top:12px!important;
  font-size:13px!important;
  letter-spacing:.06em!important;
  color:var(--navy)!important;
}
@keyframes v153CompletionReveal{
  to{opacity:1}
}
@keyframes v153CompletionDot{
  0%,100%{transform:translate(0,0) scale(1);background:#8B7352}
  45%{transform:translateX(10px) scale(1.35);background:#2A2926}
}


/* v155 — Chapter 3 Page 6 uses the shared CHAPTER COMPLETE page/animation */


.lesson-page[data-page-role="travel-finish"]{
  display:none;
}
.lesson-page[data-page-role="travel-finish"].active{
  display:flex!important;
}


/* v158 — Book I, Chapter 4: How We Hear Sound */


.hearing-only-page{display:none}
.hearing-only-page.active{display:flex!important;flex-direction:column;justify-content:center}
.hearing-copy{max-width:830px;margin:0 auto;text-align:center;font-family:var(--lesson-body-font);font-size:var(--lesson-copy-size);line-height:var(--lesson-copy-line);color:#2A2926}
.hearing-copy p{margin:8px 0}
.hearing-lead{font-size:27px}
.delayed-hearing{opacity:0;animation:v158Reveal .55s ease 1s forwards}
@keyframes v158Reveal{to{opacity:1}}

/* Page 1 */

.hearing-chain{width:min(900px,94%);margin:34px auto 0;display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr;align-items:center;text-align:center}
.hearing-chain>div{min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.hearing-chain>i{font-style:normal;color:#8B7352;font-size:28px}
.hearing-chain strong{font-size:11px;letter-spacing:.13em}.hearing-chain small{font-size:11px;color:#8f8780}
.chain-icon{font:74px Georgia;color:#6E6B63;transform:rotate(180deg)}
.chain-vibration{font:36px Georgia;color:#8B7352;animation:v158Pulse 1s ease-in-out infinite alternate}
.chain-nerve{font:54px Georgia;color:#8B7352;animation:v158Nerve 1s linear infinite}
.chain-brain{width:78px;height:60px;border:2px solid #6E6B63;border-radius:50% 45% 55% 48%;display:grid;place-items:center;font-size:9px;letter-spacing:.1em;color:#6E6B63}
@keyframes v158Pulse{to{transform:translateX(8px);opacity:.55}}
@keyframes v158Nerve{to{transform:translateX(9px)}}

/* Page 2 */

.ear-anatomy-stage{width:min(820px,92%);height:300px;margin:12px auto 0;display:flex;justify-content:center}
.outer-ear-diagram{width:700px;height:300px;overflow:visible}
.anatomy-ear,
.anatomy-inner-earline,
.ear-canal-path,
.sound-wave-line{fill:none;stroke:#6E6B63;stroke-linecap:round;stroke-linejoin:round}
.anatomy-ear{stroke-width:5}.anatomy-inner-earline{stroke-width:4}.ear-canal-path{stroke-width:13;opacity:.24}.sound-wave-line{stroke:#8B7352;stroke-width:4}
.outer-ear-diagram text{font-size:11px;letter-spacing:.12em;fill:#6E6B63}
.travel-dot{fill:#8B7352;animation:v158Canal 1.4s ease-in-out infinite}
.travel-dot.d2{animation-delay:.18s}.travel-dot.d3{animation-delay:.36s}
@keyframes v158Canal{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}

/* Page 3 */

.eardrum-demo{width:min(780px,90%);height:220px;margin:22px auto 0;display:grid;grid-template-columns:1fr 30px 180px;align-items:center}
.canal-particles{display:flex;justify-content:space-around;align-items:center}
.canal-particles i{width:15px;height:15px;border-radius:50%;background:#8B7352;animation:v158Particle 1.1s ease-in-out infinite}
.canal-particles i:nth-child(2){animation-delay:.1s}.canal-particles i:nth-child(3){animation-delay:.2s}.canal-particles i:nth-child(4){animation-delay:.3s}.canal-particles i:nth-child(5){animation-delay:.4s}.canal-particles i:nth-child(6){animation-delay:.5s}
.eardrum-membrane{height:145px;width:8px;border-radius:50%;background:#6E6B63;animation:v158Drum .28s ease-in-out infinite alternate}
.eardrum-label{display:flex;flex-direction:column;gap:5px;padding-left:18px}.eardrum-label strong{font-size:12px;letter-spacing:.12em}.eardrum-label span{font-size:11px;color:#8f8780}
@keyframes v158Particle{50%{transform:translateX(12px);background:#2A2926}}
@keyframes v158Drum{to{transform:translateX(7px) scaleY(.95)}}

/* Page 4 */

.ossicle-demo{width:min(820px,92%);height:190px;margin:18px auto 0;display:flex;align-items:center;justify-content:center;gap:28px}
.mini-eardrum{width:7px;height:120px;background:#6E6B63;border-radius:50%;animation:v158Drum .3s ease-in-out infinite alternate}
.bone{width:145px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.bone i{display:block;width:58px;height:58px;border:7px solid #8B7352;border-radius:48% 52% 45% 55%;animation:v158Bone .65s ease-in-out infinite alternate}
.bone:nth-of-type(3) i{animation-delay:.15s}.bone:nth-of-type(4) i{animation-delay:.3s}
.bone span{font-size:10px;letter-spacing:.11em}.bone small{font-size:10px;color:#8f8780}
@keyframes v158Bone{to{transform:translateX(7px) rotate(4deg)}}

/* Page 5 */

.cochlea-demo{width:min(760px,90%);height:280px;margin:4px auto 0;position:relative;display:flex;align-items:center;justify-content:center}
.cochlea-svg{width:500px;height:250px}
.cochlea-shell,
.cochlea-entry,
.cochlea-fluid-wave{fill:none;stroke:#6E6B63;stroke-linecap:round;stroke-linejoin:round}
.cochlea-shell{stroke-width:8}.cochlea-entry{stroke-width:12;opacity:.35}.cochlea-fluid-wave{stroke:#8B7352;stroke-width:4;animation:v158Fluid .7s ease-in-out infinite alternate}
.hair-cell-row{position:absolute;left:290px;top:188px;display:flex;gap:8px;align-items:flex-end}
.hair-cell-row i{display:block;width:3px;height:25px;background:#8B7352;transform-origin:bottom;animation:v158Hair .55s ease-in-out infinite alternate}
.hair-cell-row i:nth-child(2){animation-delay:.08s}.hair-cell-row i:nth-child(3){animation-delay:.16s}.hair-cell-row i:nth-child(4){animation-delay:.24s}.hair-cell-row i:nth-child(5){animation-delay:.32s}.hair-cell-row i:nth-child(6){animation-delay:.40s}.hair-cell-row i:nth-child(7){animation-delay:.48s}
.cochlea-label{position:absolute;right:30px;bottom:28px;display:flex;flex-direction:column;gap:4px}.cochlea-label strong{font-size:11px;letter-spacing:.12em}.cochlea-label span{font-size:10px;color:#8f8780}
@keyframes v158Fluid{to{transform:translateX(10px)}}
@keyframes v158Hair{to{transform:rotate(18deg)}}

/* Page 6 */

.nerve-demo{width:min(780px,92%);height:210px;margin:22px auto 0;display:grid;grid-template-columns:130px 1fr 150px;align-items:center}
.cochlea-mini{width:105px;height:105px;border:7px solid #6E6B63;border-radius:50%;display:grid;place-items:center;font-size:9px;letter-spacing:.1em}
.auditory-nerve{display:flex;justify-content:space-around;position:relative}.auditory-nerve:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid #dfd7cd}
.auditory-nerve i{z-index:1;width:11px;height:11px;border-radius:50%;background:#8B7352;animation:v158Signal 1.15s ease-in-out infinite}
.auditory-nerve i:nth-child(2){animation-delay:.1s}.auditory-nerve i:nth-child(3){animation-delay:.2s}.auditory-nerve i:nth-child(4){animation-delay:.3s}.auditory-nerve i:nth-child(5){animation-delay:.4s}.auditory-nerve i:nth-child(6){animation-delay:.5s}.auditory-nerve i:nth-child(7){animation-delay:.6s}.auditory-nerve i:nth-child(8){animation-delay:.7s}
.brain-outline{width:130px;height:105px;border:5px solid #6E6B63;border-radius:55% 45% 52% 48%;display:grid;place-items:center}.brain-outline span{font-size:10px;letter-spacing:.12em}
@keyframes v158Signal{50%{transform:translateX(10px) scale(1.4);background:#2A2926}}

/* Page 8 — shared chapter-complete styling/animation hooks */

.lesson-page[data-page-role="hearing-finish"]{align-items:center;text-align:center}
.lesson-page[data-page-role="hearing-finish"] .finish-wrap{position:relative;text-align:center;max-width:760px;margin:auto}
.lesson-page[data-page-role="hearing-finish"] .finish-wrap h2{font:40px/1.12 "Playfair Display",Georgia,serif;font-weight:400;margin:12px 0}
.lesson-page[data-page-role="hearing-finish"] .finish-wrap p{font-family:var(--lesson-body-font);font-size:var(--lesson-copy-size);line-height:var(--lesson-copy-line);color:#6E6B63;max-width:650px}
.lesson-page[data-page-role="hearing-finish"] .finish-ring{width:88px;height:88px;border:2px solid #8B7352;border-radius:50%;display:grid;place-items:center;margin:24px auto 12px;animation:v158FinishRing 1.2s ease-in-out infinite alternate}
.lesson-page[data-page-role="hearing-finish"] .finish-ring span{font-size:34px;color:#8B7352}
.lesson-page[data-page-role="hearing-finish"] .finish-celebration .spark{position:absolute;color:#8B7352;animation:v158Spark 1.5s ease-in-out infinite alternate}
.lesson-page[data-page-role="hearing-finish"] .s1{left:8%;top:15%}.lesson-page[data-page-role="hearing-finish"] .s2{right:8%;top:18%;animation-delay:.25s}.lesson-page[data-page-role="hearing-finish"] .s3{left:16%;bottom:15%;animation-delay:.5s}.lesson-page[data-page-role="hearing-finish"] .s4{right:16%;bottom:18%;animation-delay:.75s}
@keyframes v158FinishRing{to{transform:scale(1.08)}}
@keyframes v158Spark{to{transform:translateY(-10px) rotate(20deg);opacity:.35}}


/* v160 — Chapter 4 reuses Chapter 3's established individual ear + vibration motif */


.hearing-only-page .travel-ear.improved-ear,
.hearing-only-page .hearing-ch3-ear{
  width:88px!important;
  height:116px!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  transform:none!important;
  flex:none!important;
}

.hearing-only-page .travel-ear.improved-ear .ear-outer,
.hearing-only-page .travel-ear.improved-ear .ear-inner,
.hearing-only-page .travel-ear.improved-ear .ear-canal{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.hearing-only-page .travel-ear.improved-ear .ear-outer{stroke-width:4!important}
.hearing-only-page .travel-ear.improved-ear .ear-inner{stroke-width:3.2!important}
.hearing-only-page .travel-ear.improved-ear .ear-canal{stroke:#8B7352!important;stroke-width:3!important}

.hearing-only-page .hearing-ch3-wave{
  width:260px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex:none!important;
}
.hearing-only-page .hearing-ch3-wave i{
  width:13px!important;
  height:13px!important;
  border-radius:50%!important;
  background:#8B7352!important;
  display:block!important;
  animation:v160Ch3Vibration .55s ease-in-out infinite alternate!important;
}
.hearing-only-page .hearing-ch3-wave i:nth-child(2){animation-delay:.06s!important}
.hearing-only-page .hearing-ch3-wave i:nth-child(3){animation-delay:.12s!important}
.hearing-only-page .hearing-ch3-wave i:nth-child(4){animation-delay:.18s!important}
.hearing-only-page .hearing-ch3-wave i:nth-child(5){animation-delay:.24s!important}
.hearing-only-page .hearing-ch3-wave i:nth-child(6){animation-delay:.30s!important}
.hearing-only-page .hearing-ch3-wave i:nth-child(7){animation-delay:.36s!important}
.hearing-only-page .hearing-ch3-wave i:nth-child(8){animation-delay:.42s!important}
.hearing-only-page .hearing-ch3-wave i:nth-child(9){animation-delay:.48s!important}
.hearing-only-page .hearing-ch3-wave i:nth-child(10){animation-delay:.54s!important}
.hearing-only-page .hearing-ch3-wave i:nth-child(11){animation-delay:.60s!important}
.hearing-only-page .hearing-ch3-wave i:nth-child(12){animation-delay:.66s!important}
.hearing-only-page .hearing-ch3-wave i:nth-child(13){animation-delay:.72s!important}
@keyframes v160Ch3Vibration{
  to{transform:translateX(9px) scale(1.35);background:#2A2926}
}

/* Intro chain */

.hearing-chain .travel-ear.improved-ear{width:72px!important;height:96px!important}
.hearing-chain .hearing-ch3-wave{width:115px!important}

/* Outer ear page */

.hearing-ch3-ear-canal{
  width:min(760px,94%)!important;
  height:230px!important;
  margin:auto!important;
  display:grid!important;
  grid-template-columns:310px 110px 1fr!important;
  align-items:center!important;
  justify-content:center!important;
}
.hearing-ch3-ear-canal .hearing-ch3-wave{width:290px!important}
.hearing-ch3-ear-canal .hearing-ch3-ear{width:105px!important;height:140px!important}
.hearing-canal-line{
  height:22px!important;
  border-bottom:10px solid rgba(110,107,99,.24)!important;
  position:relative!important;
}
.hearing-canal-line span{
  position:absolute!important;
  top:-18px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  font-size:10px!important;
  letter-spacing:.12em!important;
  white-space:nowrap!important;
  color:#6E6B63!important;
}

/* Eardrum page */

.eardrum-demo .hearing-eardrum-wave{width:100%!important}

/* Brain/application page */

.nerve-demo .hearing-brain-ear{width:88px!important;height:116px!important;justify-self:center!important}
.nerve-demo .hearing-brain-wave{width:100%!important}


/* v161 — signal + brain motifs redrawn from the supplied references */


.hearing-signal-icon{
  width:72px!important;
  height:62px!important;
  overflow:visible!important;
}
.hearing-signal-icon circle{
  fill:#8B7352!important;
  stroke:none!important;
}
.hearing-signal-icon path{
  fill:none!important;
  stroke:#8B7352!important;
  stroke-width:7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.hearing-chain .hearing-signal-icon{
  width:68px!important;
  height:58px!important;
  animation:v161SignalPulse 1.15s ease-in-out infinite!important;
}

.hearing-brain-icon{
  width:130px!important;
  height:108px!important;
  overflow:visible!important;
}
.hearing-brain-icon .brain-outer,
.hearing-brain-icon .brain-fold,
.hearing-brain-icon .brain-stem{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.hearing-brain-icon .brain-outer{stroke-width:6!important}
.hearing-brain-icon .brain-fold{stroke-width:4.5!important}
.hearing-brain-icon .brain-stem{stroke-width:6!important}

.hearing-chain .chain-brain{
  width:120px!important;
  height:105px!important;
  border:0!important;
  border-radius:0!important;
}
.hearing-chain .chain-brain .hearing-brain-icon{
  width:105px!important;
  height:88px!important;
}

.nerve-demo{
  grid-template-columns:120px minmax(240px,1fr) 82px 150px!important;
  gap:10px!important;
}
.signal-arrival{
  display:grid!important;
  place-items:center!important;
}
.signal-arrival .hearing-signal-icon{
  width:58px!important;
  height:50px!important;
  animation:v161SignalPulse 1.15s ease-in-out infinite!important;
}
.nerve-demo .brain-outline.improved-brain{
  width:145px!important;
  height:125px!important;
  border:0!important;
  border-radius:0!important;
  display:grid!important;
  place-items:center!important;
}
.nerve-demo .improved-brain .hearing-brain-icon{
  width:140px!important;
  height:115px!important;
  
}

@keyframes v161SignalPulse{
  0%,100%{transform:scale(.92);opacity:.55}
  50%{transform:scale(1.08);opacity:1}
}
@keyframes v161BrainReceive{
  0%,58%,100%{transform:scale(1)}
  72%{transform:scale(1.035)}
}


/* v162 — Chapter 4 Page 2: clearer ear-canal anatomy animation */


.lesson-page[data-page-role="hearing-outer"] .ear-anatomy-stage{
  width:min(850px,94%)!important;
  height:275px!important;
  margin:14px auto 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}

.hearing-canal-anatomy{
  width:760px!important;
  height:230px!important;
  display:grid!important;
  grid-template-columns:245px 150px 330px!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
}

.incoming-vibration{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:23px!important;
  padding-right:8px!important;
}
.incoming-vibration i{
  width:13px!important;
  height:13px!important;
  border-radius:50%!important;
  background:#8B7352!important;
  animation:v162Incoming 1.05s ease-in-out infinite!important;
}
.incoming-vibration i:nth-child(2){animation-delay:.10s!important}
.incoming-vibration i:nth-child(3){animation-delay:.20s!important}
.incoming-vibration i:nth-child(4){animation-delay:.30s!important}
.incoming-vibration i:nth-child(5){animation-delay:.40s!important}

.canal-ear-holder{
  height:190px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  z-index:2!important;
}
.canal-ear-holder .hearing-canal-ear{
  width:128px!important;
  height:170px!important;
}

.ear-canal-tube{
  height:110px!important;
  position:relative!important;
  margin-left:-23px!important;
  align-self:center!important;
}
.canal-track{
  position:absolute!important;
  left:0!important;
  top:49px!important;
  width:292px!important;
  height:22px!important;
  border-top:3px solid rgba(110,107,99,.34)!important;
  border-bottom:3px solid rgba(110,107,99,.34)!important;
  border-radius:0 13px 13px 0!important;
}
.canal-label{
  position:absolute!important;
  left:86px!important;
  top:15px!important;
  font-size:10px!important;
  letter-spacing:.13em!important;
  color:#6E6B63!important;
}
.canal-sound-dot{
  position:absolute!important;
  top:54px!important;
  width:12px!important;
  height:12px!important;
  border-radius:50%!important;
  background:#8B7352!important;
  opacity:.35!important;
  animation:v162CanalTravel 1.55s linear infinite!important;
}
.canal-sound-dot.cd1{left:8px!important;animation-delay:0s!important}
.canal-sound-dot.cd2{left:8px!important;animation-delay:.20s!important}
.canal-sound-dot.cd3{left:8px!important;animation-delay:.40s!important}
.canal-sound-dot.cd4{left:8px!important;animation-delay:.60s!important}
.canal-sound-dot.cd5{left:8px!important;animation-delay:.80s!important}

.canal-end{
  position:absolute!important;
  left:292px!important;
  top:39px!important;
  width:8px!important;
  height:42px!important;
  border-radius:50%!important;
  background:#6E6B63!important;
  opacity:.55!important;
  animation:v162CanalEnd .65s ease-in-out infinite alternate!important;
}

@keyframes v162Incoming{
  0%,100%{transform:translateX(0) scale(.9);opacity:.45}
  55%{transform:translateX(12px) scale(1.3);opacity:1}
}
@keyframes v162CanalTravel{
  0%{transform:translateX(0) scale(.85);opacity:0}
  12%{opacity:.85}
  55%{transform:translateX(138px) scale(1.15);opacity:1}
  92%{opacity:.8}
  100%{transform:translateX(274px) scale(.9);opacity:0}
}
@keyframes v162CanalEnd{
  to{transform:translateX(3px) scaleY(.94)}
}


/* v163 — Page 3: sound pressure visibly drives the tympanic membrane */


.lesson-page[data-page-role="hearing-eardrum"] .anatomy-eardrum-demo{
  width:min(800px,92%)!important;
  height:235px!important;
  margin:18px auto 0!important;
  display:grid!important;
  grid-template-columns:1fr 120px 60px!important;
  align-items:center!important;
}
.p3-canal{
  height:125px!important;
  position:relative!important;
}
.p3-canal-wall{
  position:absolute!important;
  left:0!important;
  right:0!important;
  height:3px!important;
  background:rgba(110,107,99,.30)!important;
}
.p3-canal-wall.top{top:31px!important}
.p3-canal-wall.bottom{bottom:31px!important}
.p3-canal>span{
  position:absolute!important;
  left:50%!important;
  top:3px!important;
  transform:translateX(-50%)!important;
  font-size:10px!important;
  letter-spacing:.13em!important;
  color:#6E6B63!important;
}
.p3-vibration-train{
  position:absolute!important;
  inset:0 5px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-around!important;
}
.p3-vibration-train i{
  width:14px!important;
  height:14px!important;
  border-radius:50%!important;
  background:#8B7352!important;
  animation:v163Pressure 1.15s ease-in-out infinite!important;
}
.p3-vibration-train i:nth-child(2){animation-delay:.10s!important}
.p3-vibration-train i:nth-child(3){animation-delay:.20s!important}
.p3-vibration-train i:nth-child(4){animation-delay:.30s!important}
.p3-vibration-train i:nth-child(5){animation-delay:.40s!important}
.p3-vibration-train i:nth-child(6){animation-delay:.50s!important}
.p3-eardrum-wrap{
  height:175px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
}
.p3-eardrum{
  width:11px!important;
  height:130px!important;
  border-radius:50%!important;
  background:#6E6B63!important;
  transform-origin:center!important;
  animation:v163Eardrum .32s ease-in-out infinite alternate!important;
}
.p3-eardrum-wrap span{font-size:10px!important;letter-spacing:.12em!important}
.p3-eardrum-wrap small{font-size:10px!important;color:#8f8780!important}
.p3-motion-marks{position:relative!important;height:130px!important}
.p3-motion-marks i{
  position:absolute!important;
  left:4px!important;
  width:20px!important;
  height:48px!important;
  border-right:2px solid #8B7352!important;
  border-radius:50%!important;
  opacity:.6!important;
  animation:v163MotionMark .7s ease-in-out infinite alternate!important;
}
.p3-motion-marks i:first-child{top:13px!important}
.p3-motion-marks i:last-child{bottom:13px!important;animation-delay:.2s!important}

@keyframes v163Pressure{
  0%,100%{transform:translateX(0) scale(.82);opacity:.42}
  52%{transform:translateX(13px) scale(1.28);opacity:1}
}
@keyframes v163Eardrum{
  from{transform:translateX(-5px) scaleY(.98)}
  to{transform:translateX(7px) scaleY(1.02)}
}
@keyframes v163MotionMark{
  to{transform:translateX(8px);opacity:.2}
}

/* v163 — Page 4: eardrum -> malleus -> incus -> stapes transfer chain */

.lesson-page[data-page-role="hearing-middle"] .anatomy-ossicle-demo{
  width:min(860px,94%)!important;
  height:245px!important;
  margin:6px auto 0!important;
  position:relative!important;
  display:grid!important;
  grid-template-columns:90px 610px 105px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
}
.p4-eardrum{
  height:170px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
}
.p4-membrane{
  width:10px!important;
  height:125px!important;
  border-radius:50%!important;
  background:#6E6B63!important;
  animation:v163P4Drum .34s ease-in-out infinite alternate!important;
}
.p4-eardrum span,
.p4-window span{
  font-size:9px!important;
  letter-spacing:.1em!important;
  color:#6E6B63!important;
  white-space:nowrap!important;
}
.ossicle-chain-svg{
  width:610px!important;
  height:210px!important;
  overflow:visible!important;
}
.ossicle-chain-svg .ossicle circle,
.ossicle-chain-svg .ossicle path{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-width:11!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.malleus-shape{transform-origin:115px 68px;animation:v163Malleus .65s ease-in-out infinite alternate!important}
.incus-shape{transform-origin:205px 94px;animation:v163Incus .65s ease-in-out .08s infinite alternate!important}
.stapes-shape{transform-origin:286px 167px;animation:v163Stapes .65s ease-in-out .16s infinite alternate!important}
.p4-transfer-path{
  fill:none!important;
  stroke:rgba(139,115,82,.25)!important;
  stroke-width:2!important;
  stroke-dasharray:5 7!important;
}
.p4-transfer-dot{
  fill:#8B7352!important;
  offset-path:path("M95 66 C150 32 200 45 239 82 C274 116 299 151 340 167")!important;
  offset-distance:0%;
  animation:v163Transfer 1.7s linear infinite!important;
}
.p4-transfer-dot.t2{animation-delay:.34s!important}
.p4-transfer-dot.t3{animation-delay:.68s!important}
.p4-window{
  height:150px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
}
.p4-oval-window{
  width:22px!important;
  height:62px!important;
  border:4px solid #8B7352!important;
  border-radius:50%!important;
  animation:v163Window .65s ease-in-out .22s infinite alternate!important;
}
.p4-label{
  position:absolute!important;
  bottom:6px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:3px!important;
}
.p4-label strong{font-size:9px!important;letter-spacing:.11em!important}
.p4-label small{font-size:9px!important;color:#8f8780!important}
.malleus-label{left:190px!important}
.incus-label{left:365px!important}
.stapes-label{left:540px!important}

@keyframes v163P4Drum{
  to{transform:translateX(6px) scaleY(.97)}
}
@keyframes v163Malleus{
  to{transform:rotate(5deg) translateX(4px)}
}
@keyframes v163Incus{
  to{transform:rotate(-4deg) translateX(4px)}
}
@keyframes v163Stapes{
  to{transform:translateX(7px) rotate(2deg)}
}
@keyframes v163Transfer{
  0%{offset-distance:0%;opacity:0;transform:scale(.75)}
  10%{opacity:1}
  90%{opacity:1}
  100%{offset-distance:100%;opacity:0;transform:scale(1.2)}
}
@keyframes v163Window{
  to{transform:translateX(5px) scaleY(.94)}
}


/* v164 — Chapter 4 readable text measure
   Keep explanatory text centered and narrower than the animation canvas. */


.lesson-page.hearing-only-page .hearing-copy,
.lesson-page.hearing-only-page .page-heading{
  width:min(720px,82vw)!important;
  max-width:720px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.lesson-page.hearing-only-page .hearing-copy p{
  max-width:68ch!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Keep review/completion copy on the same readable measure. */

.lesson-page[data-page-role="hearing-finish"] .finish-wrap > p{
  width:min(720px,82vw)!important;
  max-width:720px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}


/* v165 — Page 4: coherent middle-ear mechanism */


.lesson-page[data-page-role="hearing-middle"] .p4-middle-ear-machine{
  width:min(940px,96vw)!important;
  height:350px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  position:relative!important;
}
.p4-middle-ear-svg{
  width:min(900px,95vw)!important;
  height:300px!important;
  overflow:visible!important;
}
.p4-cavity{
  fill:rgba(229,225,213,.24)!important;
  stroke:rgba(110,107,99,.18)!important;
  stroke-width:2!important;
}
.p4-incoming circle{
  fill:#8B7352!important;
  animation:v165Incoming 1.05s ease-in-out infinite!important;
}
.p4-incoming circle:nth-child(2){animation-delay:.10s!important}
.p4-incoming circle:nth-child(3){animation-delay:.20s!important}
.p4-incoming circle:nth-child(4){animation-delay:.30s!important}

.p4-drum{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-width:9!important;
  stroke-linecap:round!important;
}
.p4-drum-group{
  transform-origin:200px 160px;
  animation:v165Drum .34s ease-in-out infinite alternate!important;
}
.p4-drum-group text,
.p4-anatomy-labels text{
  font-size:11px!important;
  letter-spacing:.12em!important;
  fill:#6E6B63!important;
}
.p4-anatomy-labels .sub{
  font-size:9px!important;
  letter-spacing:.06em!important;
  fill:#9a9289!important;
}

.p4-bone circle,
.p4-bone path{
  fill:none!important;
  stroke:#8B7352!important;
  stroke-width:12!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.p4-malleus{
  transform-origin:282px 103px;
  animation:v165Malleus .68s ease-in-out infinite alternate!important;
}
.p4-incus{
  transform-origin:360px 117px;
  animation:v165Incus .68s ease-in-out .08s infinite alternate!important;
}
.p4-stapes{
  transform-origin:454px 215px;
  animation:v165Stapes .68s ease-in-out .16s infinite alternate!important;
}

.p4-oval-window{
  fill:rgba(139,115,82,.12)!important;
  stroke:#8B7352!important;
  stroke-width:5!important;
  animation:v165Window .68s ease-in-out .20s infinite alternate!important;
}
.p4-cochlea path{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-width:8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.p4-cochlea{
  transform-origin:548px 214px;
  animation:v165Cochlea .9s ease-in-out .22s infinite alternate!important;
}

.p4-energy-guide{
  fill:none!important;
  stroke:rgba(139,115,82,.20)!important;
  stroke-width:3!important;
  stroke-dasharray:4 8!important;
}
.p4-energy-dot{
  fill:#2A2926!important;
  offset-path:path("M154 160 C190 160 214 177 245 145 C282 107 327 98 365 128 C398 154 382 202 422 211 C454 218 485 214 518 215")!important;
  offset-distance:0%;
  animation:v165Energy 1.85s linear infinite!important;
}
.p4-energy-dot.e2{animation-delay:.36s!important}
.p4-energy-dot.e3{animation-delay:.72s!important}

.p4-process-strip{
  margin-top:-10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  font-size:10px!important;
  letter-spacing:.06em!important;
  color:#6E6B63!important;
  text-transform:uppercase!important;
}
.p4-process-strip i{
  font-style:normal!important;
  color:#8B7352!important;
  font-size:16px!important;
}

@keyframes v165Incoming{
  0%,100%{transform:translateX(0) scale(.8);opacity:.35}
  55%{transform:translateX(14px) scale(1.35);opacity:1}
}
@keyframes v165Drum{
  from{transform:translateX(-4px) scaleX(.96)}
  to{transform:translateX(7px) scaleX(1.04)}
}
@keyframes v165Malleus{
  to{transform:rotate(6deg) translate(4px,2px)}
}
@keyframes v165Incus{
  to{transform:rotate(-5deg) translate(5px,2px)}
}
@keyframes v165Stapes{
  to{transform:translateX(9px) scaleX(.97)}
}
@keyframes v165Window{
  to{transform:translateX(5px) scaleY(.91)}
}
@keyframes v165Cochlea{
  to{transform:translateX(3px) scale(1.015)}
}
@keyframes v165Energy{
  0%{offset-distance:0%;opacity:0;transform:scale(.7)}
  8%{opacity:1}
  88%{opacity:1}
  100%{offset-distance:100%;opacity:0;transform:scale(1.35)}
}


/* v166 — Chapter 4 Page 4 only:
   slightly smaller animation + slightly wider paragraph measure */


.lesson-page[data-page-role="hearing-middle"] .hearing-copy{
  width:min(780px,86vw)!important;
  max-width:780px!important;
}
.lesson-page[data-page-role="hearing-middle"] .hearing-copy p{
  max-width:74ch!important;
}

/* Scale the complete Page 4 mechanism down without affecting other pages. */

.lesson-page[data-page-role="hearing-middle"] .p4-middle-ear-machine{
  width:min(860px,92vw)!important;
  height:320px!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-middle-ear-svg{
  width:min(810px,89vw)!important;
  height:270px!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-process-strip{
  transform:scale(.94)!important;
  transform-origin:center top!important;
}


/* v167 — Page 4 only: reduce middle-ear animation further */


.lesson-page[data-page-role="hearing-middle"] .p4-middle-ear-machine{
  width:min(770px,86vw)!important;
  height:285px!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-middle-ear-svg{
  width:min(720px,82vw)!important;
  height:240px!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-process-strip{
  transform:scale(.88)!important;
  transform-origin:center top!important;
  margin-top:-18px!important;
}

/* v167 — Page 5: cochlea as a complete mechanical-to-electrical process */

.lesson-page[data-page-role="hearing-inner"] .p5-cochlea-system{
  width:min(860px,92vw)!important;
  height:330px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
.p5-cochlea-svg{
  width:min(820px,90vw)!important;
  height:285px!important;
  overflow:visible!important;
}

/* Stapes + oval window */

.p5-stapes path{
  fill:none!important;
  stroke:#8B7352!important;
  stroke-width:10!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.p5-stapes{
  transform-origin:128px 138px!important;
  animation:v167Stapes .62s ease-in-out infinite alternate!important;
}
.p5-window{
  fill:rgba(139,115,82,.10)!important;
  stroke:#8B7352!important;
  stroke-width:5!important;
  animation:v167Window .62s ease-in-out .12s infinite alternate!important;
}

/* Cochlea */

.p5-shell{
  fill:rgba(229,225,213,.18)!important;
  stroke:#6E6B63!important;
  stroke-width:8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.p5-entry{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-width:8!important;
  stroke-linecap:round!important;
}
.p5-fluid-guide{
  fill:none!important;
  stroke:rgba(139,115,82,.30)!important;
  stroke-width:4!important;
  stroke-dasharray:5 8!important;
}

/* Fluid movement through the spiral */

.p5-fluid-dot{
  fill:#8B7352!important;
  offset-path:path("M207 139 C254 105 308 79 373 82 C438 85 486 122 487 169 C488 211 445 239 397 235 C351 231 323 203 328 174 C332 151 356 138 381 145")!important;
  offset-distance:0%;
  animation:v167FluidTravel 2.3s linear infinite!important;
}
.p5-fluid-dot.fd2{animation-delay:.28s!important}
.p5-fluid-dot.fd3{animation-delay:.56s!important}
.p5-fluid-dot.fd4{animation-delay:.84s!important}

/* Hair cells */

.p5-basilar{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-width:4!important;
  stroke-linecap:round!important;
}
.p5-hairs path{
  fill:none!important;
  stroke:#8B7352!important;
  stroke-width:5!important;
  stroke-linecap:round!important;
  transform-box:fill-box!important;
  transform-origin:bottom center!important;
  animation:v167HairBend .56s ease-in-out infinite alternate!important;
}
.p5-hairs path:nth-child(2){animation-delay:.06s!important}
.p5-hairs path:nth-child(3){animation-delay:.12s!important}
.p5-hairs path:nth-child(4){animation-delay:.18s!important}
.p5-hairs path:nth-child(5){animation-delay:.24s!important}
.p5-hairs path:nth-child(6){animation-delay:.30s!important}

/* Electrical signal leaving toward auditory nerve */

.p5-nerve-line{
  fill:none!important;
  stroke:rgba(110,107,99,.38)!important;
  stroke-width:4!important;
  stroke-linecap:round!important;
}
.p5-signal-dot{
  fill:#2A2926!important;
  offset-path:path("M414 224 C480 247 532 256 590 248 C629 243 663 227 695 207")!important;
  offset-distance:0%;
  animation:v167Electrical 1.45s linear infinite!important;
}
.p5-signal-dot.sd2{animation-delay:.32s!important}
.p5-signal-dot.sd3{animation-delay:.64s!important}

.p5-labels text{
  font-size:10px!important;
  letter-spacing:.11em!important;
  fill:#6E6B63!important;
}
.p5-process-strip{
  margin-top:-10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:11px!important;
  font-size:9px!important;
  letter-spacing:.07em!important;
  color:#6E6B63!important;
  text-transform:uppercase!important;
}
.p5-process-strip i{
  font-style:normal!important;
  color:#8B7352!important;
  font-size:15px!important;
}

@keyframes v167Stapes{
  to{transform:translateX(8px) scaleX(.97)}
}
@keyframes v167Window{
  to{transform:translateX(5px) scaleY(.90)}
}
@keyframes v167FluidTravel{
  0%{offset-distance:0%;opacity:0;transform:scale(.7)}
  8%{opacity:1}
  90%{opacity:1}
  100%{offset-distance:100%;opacity:0;transform:scale(1.25)}
}
@keyframes v167HairBend{
  from{transform:rotate(-9deg)}
  to{transform:rotate(16deg)}
}
@keyframes v167Electrical{
  0%{offset-distance:0%;opacity:0;transform:scale(.7)}
  12%{opacity:1}
  88%{opacity:1}
  100%{offset-distance:100%;opacity:0;transform:scale(1.35)}
}


/* v168 — P4: redesigned, compact anatomical middle-ear mechanism */


.lesson-page[data-page-role="hearing-middle"] .p4-middle-ear-v168{
  width:min(720px,82vw)!important;
  height:275px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
.p4-v168-svg{width:min(700px,80vw)!important;height:245px!important;overflow:visible!important}
.p4-v168-cavity{fill:rgba(229,225,213,.20)!important;stroke:rgba(110,107,99,.18)!important;stroke-width:2!important}
.p4-v168-sound circle{fill:#8B7352!important;animation:v168Sound 1s ease-in-out infinite!important}
.p4-v168-sound circle:nth-child(2){animation-delay:.09s!important}.p4-v168-sound circle:nth-child(3){animation-delay:.18s!important}.p4-v168-sound circle:nth-child(4){animation-delay:.27s!important}
.p4-v168-drum path{fill:none!important;stroke:#6E6B63!important;stroke-width:8!important;stroke-linecap:round!important}
.p4-v168-drum{transform-origin:164px 134px!important;animation:v168Drum .38s ease-in-out infinite alternate!important}
.p4-v168-bone circle,
.p4-v168-bone path{fill:none!important;stroke:#8B7352!important;stroke-width:10!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.p4-v168-malleus{transform-origin:230px 87px!important;animation:v168Malleus .72s ease-in-out infinite alternate!important}
.p4-v168-incus{transform-origin:298px 104px!important;animation:v168Incus .72s ease-in-out .09s infinite alternate!important}
.p4-v168-stapes{transform-origin:371px 183px!important;animation:v168Stapes .72s ease-in-out .18s infinite alternate!important}
.p4-v168-window{fill:rgba(139,115,82,.10)!important;stroke:#8B7352!important;stroke-width:4!important;animation:v168Window .72s ease-in-out .22s infinite alternate!important}
.p4-v168-cochlea path{fill:none!important;stroke:#6E6B63!important;stroke-width:7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.p4-v168-ripples path{fill:none!important;stroke:#8B7352!important;stroke-width:3!important;stroke-linecap:round!important;animation:v168Ripple 1s ease-out infinite!important}
.p4-v168-ripples path:nth-child(2){animation-delay:.18s!important}
.p4-v168-energy-path{fill:none!important;stroke:rgba(139,115,82,.16)!important;stroke-width:2!important;stroke-dasharray:4 7!important}
.p4-v168-energy{fill:#2A2926!important;offset-path:path("M115 134 C150 134 167 134 190 121 C213 106 229 88 254 89 C286 91 306 109 306 140 C306 169 322 184 350 183 C375 182 400 183 425 183")!important;offset-distance:0%;animation:v168Energy 1.75s linear infinite!important}
.p4-v168-energy.ev2{animation-delay:.34s!important}.p4-v168-energy.ev3{animation-delay:.68s!important}
.p4-v168-labels text{font-size:9px!important;letter-spacing:.10em!important;fill:#6E6B63!important}
.p4-v168-labels .sub{font-size:8px!important;letter-spacing:.05em!important;fill:#9a9289!important}
.p4-v168-caption{margin-top:-12px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font-size:8px!important;letter-spacing:.06em!important;color:#6E6B63!important}
.p4-v168-caption i{font-style:normal!important;color:#8B7352!important;font-size:13px!important}
@keyframes v168Sound{0%,100%{transform:translateX(0) scale(.8);opacity:.35}55%{transform:translateX(10px) scale(1.25);opacity:1}}
@keyframes v168Drum{from{transform:translateX(-3px)}to{transform:translateX(6px) scaleX(1.04)}}
@keyframes v168Malleus{to{transform:rotate(6deg) translate(3px,2px)}}
@keyframes v168Incus{to{transform:rotate(-5deg) translate(4px,2px)}}
@keyframes v168Stapes{to{transform:translateX(8px) scaleX(.96)}}
@keyframes v168Window{to{transform:translateX(4px) scaleY(.9)}}
@keyframes v168Ripple{0%{opacity:0;transform:translateX(-3px) scale(.8)}45%{opacity:1}100%{opacity:0;transform:translateX(10px) scale(1.15)}}
@keyframes v168Energy{0%{offset-distance:0%;opacity:0;transform:scale(.7)}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0;transform:scale(1.25)}}

/* v168 — P5 only: substantially smaller, content unchanged */

.lesson-page[data-page-role="hearing-inner"] .p5-cochlea-system{
  width:min(680px,78vw)!important;
  height:255px!important;
}
.lesson-page[data-page-role="hearing-inner"] .p5-cochlea-svg{
  width:min(630px,74vw)!important;
  height:215px!important;
}
.lesson-page[data-page-role="hearing-inner"] .p5-process-strip{
  transform:scale(.82)!important;
  transform-origin:center top!important;
  margin-top:-20px!important;
}


/* v170 — Page 4 labels: clean placements around the anatomy, no label box/stroke overlays */


.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text{
  paint-order:normal!important;
  stroke:none!important;
  fill:#6E6B63!important;
}

.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels .sub{
  fill:#9a9289!important;
}

/* MALLEUS — above-left of the bone */

.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(1){
  transform:translate(-10px,-18px)!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(2){
  transform:translate(-10px,-18px)!important;
}

/* INCUS — above-right of the bone */

.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(3){
  transform:translate(10px,-18px)!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(4){
  transform:translate(10px,-18px)!important;
}

/* STAPES — below the stirrup, clear of the bone */

.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(5){
  transform:translate(0,18px)!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(6){
  transform:translate(0,18px)!important;
}

/* INNER EAR — above the cochlea */

.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(7){
  transform:translate(8px,-18px)!important;
}

/* EARDRUM label — directly beneath the membrane, not on it */

.lesson-page[data-page-role="hearing-middle"] .p4-v168-drum + text,
.lesson-page[data-page-role="hearing-middle"] .p4-v168-svg text[x="127"][y="231"]{
  transform:translate(-6px,10px)!important;
}

/* v170 — Page 5 OVAL WINDOW label: transparent background / no box effect */

.lesson-page[data-page-role="hearing-inner"] .p5-labels text:nth-child(2){
  fill:#6E6B63!important;
  stroke:none!important;
  paint-order:normal!important;
  filter:none!important;
}


/* v171 — P4: simplified demonstration of the ossicle transfer chain */


.lesson-page[data-page-role="hearing-middle"] .p4-clear-demo{
  width:min(780px,86vw)!important;height:285px!important;margin:0 auto!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
}
.p4-clear-stage{
  width:750px!important;max-width:84vw!important;height:205px!important;
  display:grid!important;
  grid-template-columns:90px 82px 24px 100px 20px 105px 20px 115px 115px!important;
  align-items:center!important;justify-content:center!important;
}
.p4-sound-in{display:flex!important;gap:10px!important;align-items:center!important}
.p4-sound-in i{width:11px!important;height:11px!important;border-radius:50%!important;background:#8B7352!important;animation:v171Sound 1s ease-in-out infinite!important}
.p4-sound-in i:nth-child(2){animation-delay:.1s!important}.p4-sound-in i:nth-child(3){animation-delay:.2s!important}.p4-sound-in i:nth-child(4){animation-delay:.3s!important}
.p4-part,
.p4-window-target{height:180px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;text-align:center!important}
.p4-part strong,
.p4-window-target strong{font-size:9px!important;letter-spacing:.1em!important;color:#6E6B63!important}
.p4-part small,
.p4-window-target small{font-size:8px!important;color:#9a9289!important;white-space:nowrap!important}
.p4-clear-drum{width:8px!important;height:105px!important;border-radius:50%!important;background:#6E6B63!important;animation:v171Drum .35s ease-in-out infinite alternate!important}
.p4-part svg{width:85px!important;height:100px!important;overflow:visible!important}
.p4-part svg circle,
.p4-part svg path{fill:none!important;stroke:#8B7352!important;stroke-width:9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.p4-malleus-part svg{transform-origin:50% 35%!important;animation:v171Malleus .68s ease-in-out infinite alternate!important}
.p4-incus-part svg{transform-origin:50% 42%!important;animation:v171Incus .68s ease-in-out .08s infinite alternate!important}
.p4-stapes-part svg{transform-origin:50% 50%!important;animation:v171Stapes .68s ease-in-out .16s infinite alternate!important}
.p4-link,
.p4-joint{height:2px!important;background:rgba(139,115,82,.4)!important;width:100%!important}
.p4-clear-window{width:18px!important;height:58px!important;border:4px solid #8B7352!important;border-radius:50%!important;animation:v171Window .68s ease-in-out .2s infinite alternate!important}
.p4-clear-flow{display:flex!important;gap:9px!important;align-items:center!important;margin-top:-6px!important;text-transform:uppercase!important;font-size:8px!important;letter-spacing:.06em!important;color:#6E6B63!important}
.p4-clear-flow b{color:#8B7352!important;font-size:14px!important;font-weight:400!important}
@keyframes v171Sound{50%{transform:translateX(8px) scale(1.25);opacity:1}0%,100%{opacity:.4}}
@keyframes v171Drum{to{transform:translateX(6px) scaleY(.96)}}
@keyframes v171Malleus{to{transform:rotate(7deg) translateX(3px)}}
@keyframes v171Incus{to{transform:rotate(-6deg) translateX(4px)}}
@keyframes v171Stapes{to{transform:translateX(8px)}}
@keyframes v171Window{to{transform:translateX(4px) scaleY(.92)}}

/* v171 — P5: OVAL WINDOW label outside the drawing */

.p5-oval-window-external{
  align-self:flex-start!important;margin:-25px 0 0 72px!important;
  display:flex!important;flex-direction:column!important;gap:2px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:#6E6B63!important;
}
.p5-oval-window-external strong{font-size:9px!important;letter-spacing:.11em!important}
.p5-oval-window-external span{font-size:8px!important;color:#9a9289!important}

/* v171 — P6: complete hearing pathway demonstration */

.lesson-page[data-page-role="hearing-brain"] .p6-hearing-path{
  width:min(880px,92vw)!important;height:300px!important;margin:0 auto!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
}
.p6-stage{
  width:840px!important;max-width:90vw!important;height:220px!important;
  display:grid!important;grid-template-columns:115px 80px 160px 255px 180px!important;
  align-items:center!important;justify-content:center!important;
}
.p6-ear{display:flex!important;justify-content:center!important;align-items:center!important}
.p6-ear .p6-reused-ear{width:92px!important;height:122px!important}
.p6-to-cochlea{display:flex!important;gap:10px!important;align-items:center!important;justify-content:center!important}
.p6-to-cochlea i{width:10px!important;height:10px!important;border-radius:50%!important;background:#8B7352!important;animation:v171P6Vibration .9s ease-in-out infinite!important}
.p6-to-cochlea i:nth-child(2){animation-delay:.12s!important}.p6-to-cochlea i:nth-child(3){animation-delay:.24s!important}
.p6-cochlea-unit,
.p6-brain-unit{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:3px!important;position:relative!important}
.p6-cochlea-unit svg{width:125px!important;height:100px!important}
.p6-cochlea-unit svg path{fill:none!important;stroke:#6E6B63!important;stroke-width:7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.p6-cochlea-unit strong,
.p6-brain-unit strong,
.p6-nerve strong{font-size:9px!important;letter-spacing:.1em!important;color:#6E6B63!important}
.p6-cochlea-unit small,
.p6-brain-unit small,
.p6-nerve small{font-size:8px!important;color:#9a9289!important}
.p6-nerve{height:125px!important;position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important}
.p6-nerve-line{position:absolute!important;left:12px!important;right:12px!important;top:50px!important;height:3px!important;background:rgba(110,107,99,.28)!important}
.p6-nerve>i{position:absolute!important;top:45px!important;left:10px!important;width:12px!important;height:12px!important;border-radius:50%!important;background:#8B7352!important;animation:v171NerveTravel 1.65s linear infinite!important}
.p6-nerve .n2{animation-delay:.3s!important}.p6-nerve .n3{animation-delay:.6s!important}.p6-nerve .n4{animation-delay:.9s!important}
.p6-nerve strong{position:absolute!important;top:78px!important}
.p6-nerve small{position:absolute!important;top:94px!important}
.p6-brain-unit svg{width:145px!important;height:116px!important}
.p6-brain-unit svg path{fill:none!important;stroke:#6E6B63;stroke-width:5!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.p6-brain-unit svg .outer{stroke-width:6!important}
.p6-brain-flash{position:absolute!important;top:40px!important;left:63px!important}
.p6-brain-flash i{position:absolute!important;width:9px!important;height:9px!important;border-radius:50%!important;background:#8B7352!important;animation:v171BrainFlash 1.3s ease-out infinite!important}
.p6-brain-flash i:nth-child(2){animation-delay:.22s!important}.p6-brain-flash i:nth-child(3){animation-delay:.44s!important}
.p6-result{display:flex!important;align-items:center!important;gap:11px!important;margin-top:-5px!important;text-transform:uppercase!important;font-size:8px!important;letter-spacing:.07em!important;color:#6E6B63!important}
.p6-result b{font-size:15px!important;color:#8B7352!important;font-weight:400!important}
@keyframes v171P6Vibration{0%,100%{transform:translateX(0) scale(.8);opacity:.35}55%{transform:translateX(8px) scale(1.3);opacity:1}}
@keyframes v171NerveTravel{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(220px);opacity:0}}
@keyframes v171BrainFlash{0%{transform:scale(.4);opacity:0}45%{opacity:1}100%{transform:scale(2.6);opacity:0}}


/* v172 — restore P4 v170 sizing/label treatment */


.lesson-page[data-page-role="hearing-middle"] .p4-middle-ear-v168{
  width:min(720px,82vw)!important;
  height:275px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-v168-svg{
  width:min(700px,80vw)!important;
  height:245px!important;
  overflow:visible!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text{
  paint-order:normal!important;
  stroke:none!important;
  fill:#6E6B63!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels .sub{
  fill:#9a9289!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(1),
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(2){
  transform:translate(-10px,-18px)!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(3),
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(4){
  transform:translate(10px,-18px)!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(5),
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(6){
  transform:translate(0,18px)!important;
}
.lesson-page[data-page-role="hearing-middle"] .p4-v168-labels text:nth-child(7){
  transform:translate(8px,-18px)!important;
}

/* P5 oval-window label sits near the window without covering the drawing */

.lesson-page[data-page-role="hearing-inner"] .p5-oval-label text{
  font-size:9px!important;
  letter-spacing:.11em!important;
  fill:#6E6B63!important;
  stroke:none!important;
  paint-order:normal!important;
}
.lesson-page[data-page-role="hearing-inner"] .p5-oval-label path{
  fill:none!important;
  stroke:#8B7352!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  opacity:.7!important;
}

/* Smaller Page 5 hair cells */

.lesson-page[data-page-role="hearing-inner"] .p5-hairs{
  transform:scale(.72)!important;
  transform-origin:center bottom!important;
}
.lesson-page[data-page-role="hearing-inner"] .p5-hairs path{
  stroke-width:3!important;
}


/* v173 — P4: remove the surrounding/cavity outline from the animation */


.lesson-page[data-page-role="hearing-middle"] .p4-v168-cavity{
  fill:none!important;
  stroke:none!important;
}


/* v175 — single source of truth for Page 6 brain activity */


.lesson-page[data-page-role="hearing-brain"] .p6-brain-unit,
.lesson-page[data-page-role="hearing-brain"] .p6-brain-unit svg{
  overflow:visible!important;
}

.lesson-page[data-page-role="hearing-brain"] .p6-brain-unit svg .outer{
  fill:none!important;
  stroke:#6E6B63!important;
  stroke-width:6!important;
  opacity:1!important;
  animation:none!important;
  filter:none!important;
}

.lesson-page[data-page-role="hearing-brain"] .p6-brain-unit svg path:not(.outer){
  fill:none!important;
  stroke:#6E6B63;
  stroke-width:5!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  opacity:.28;
  animation:none!important;
  transition:none!important;
  visibility:visible!important;
}

.lesson-page[data-page-role="hearing-brain"] .p6-brain-flash{
  display:none!important;
}


/* v176 — Book I, Chapter 5: High & Low Sounds */


.pitchheight-only-page .page-heading,
.pitchheight-only-page .pitchheight-copy{width:min(760px,84vw)!important;max-width:760px!important;margin-left:auto!important;margin-right:auto!important}
.pitchheight-copy p{max-width:72ch!important;margin-left:auto!important;margin-right:auto!important}
@keyframes phDirection{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}

.lesson-page[data-page-role="pitchheight-finish"]{align-items:center;text-align:center}


/* v177 — Chapter 5 uses established animation components from earlier lessons */


.pitchheight-only-page .ch5-reused-frequency{
  width:min(760px,84vw)!important;
  margin:16px auto 0!important;
}
.pitchheight-only-page .ch5-reused-string{
  width:min(760px,84vw)!important;
  margin:18px auto 0!important;
}
.pitchheight-only-page .ch5-reused-family-grid{
  width:min(820px,88vw)!important;
  margin:16px auto 0!important;
}
.pitchheight-only-page .ch5-family-feedback{
  text-align:center!important;
  margin:10px auto 0!important;
}


/* v178 — Chapter 5 animation system:
   frequency concepts use approved low/high wave demo;
   every string uses approved traveling-string visual. */


.pitchheight-only-page .ch5-frequency-demo{
  width:min(760px,84vw)!important;
  margin:16px auto 0!important;
}
.pitchheight-only-page .ch5-p2-frequency{
  width:min(800px,86vw)!important;
}

/* Approved string visual only */

.ch5-string-pair{
  width:min(760px,84vw)!important;
  margin:14px auto 0!important;
  display:grid!important;
  gap:18px!important;
}
.ch5-string-pair .traveling-string-demo{
  width:100%!important;
  margin:0!important;
}
.ch5-string-pair .traveling-string-track{
  width:100%!important;
}
.ch5-string-low .traveling-string-line,
.ch5-string-high .traveling-string-line{
  stroke:#8B7352!important;
}

/* Existing family grid, unchanged visual language */

.pitchheight-only-page .ch5-family-grid{
  width:min(820px,88vw)!important;
  margin:16px auto 0!important;
}
.pitchheight-only-page .ch5-family-feedback{
  text-align:center!important;
  margin:10px auto 0!important;
}


/* v179 — P1 static high/low pitch illustration */


.ch5-p1-static-pitch{
  width:min(760px,84vw)!important;
  margin:18px auto 0!important;
  display:grid!important;
  grid-template-columns:1fr 1px 1fr!important;
  gap:26px!important;
  align-items:center!important;
}
.ch5-static-divider{
  width:1px!important;
  height:145px!important;
  background:rgba(110,107,99,.18)!important;
}
.ch5-static-wave{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
}
.ch5-static-wave strong{
  font-size:10px!important;
  letter-spacing:.12em!important;
  color:#6E6B63!important;
}
.ch5-static-wave span{
  font-size:9px!important;
  color:#8f8780!important;
}
.ch5-static-wave svg{
  width:100%!important;
  height:120px!important;
  overflow:visible!important;
}
.ch5-static-wave svg path{
  fill:none!important;
  stroke:#8B7352!important;
  stroke-width:5px!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.ch5-static-wave .wave-midline{
  stroke:rgba(110,107,99,.16)!important;
  stroke-width:1px!important;
}

/* v179 — P2 force the two established frequency animations side-by-side */

.lesson-page[data-page-role="pitchheight-frequency"] .ch5-p2-frequency{
  width:min(820px,88vw)!important;
  margin:14px auto 0!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  column-gap:34px!important;
  align-items:start!important;
}
.lesson-page[data-page-role="pitchheight-frequency"] .ch5-p2-frequency .frequency-reading{
  width:100%!important;
  min-width:0!important;
}

/* v179 — P3 explicit order: high string above low string */

.lesson-page[data-page-role="pitchheight-string"] .ch5-string-high{
  order:1!important;
}
.lesson-page[data-page-role="pitchheight-string"] .ch5-string-low{
  order:2!important;
}


/* v180 — Page 1/2 vertical balance only */


.lesson-page[data-page-role="pitchheight-intro"] .ch5-p1-static-pitch{
  margin-top:34px!important;
}

.lesson-page[data-page-role="pitchheight-frequency"] .ch5-p2-frequency{
  margin-top:30px!important;
}


/* v181 — P4 interactive high/low listening activity */


.lesson-page[data-page-role="pitchheight-instruments"] .ch5-p4-listening-activity{
  width:min(650px,76vw)!important;
  margin:20px auto 0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
}
.ch5-p4-prompt{position:relative!important;width:100%!important}
.ch5-p4-round{
  position:absolute!important;right:0!important;top:0!important;
  font-size:8px!important;letter-spacing:.1em!important;color:#9a9289!important;
}
.ch5-p4-prompt>strong{
  display:block!important;font-size:9px!important;letter-spacing:.15em!important;color:#8B7352!important;
}
.ch5-p4-prompt p{
  margin:4px 0 10px!important;
  font:18px/1.3 "Playfair Display",Georgia,serif!important;
  color:var(--navy)!important;
}
.ch5-p4-play{
  width:116px!important;height:76px!important;border:1px solid rgba(139,115,82,.38)!important;
  border-radius:50%!important;background:rgba(255,253,249,.75)!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:3px!important;cursor:pointer!important;color:#6E6B63!important;
  transition:transform .2s ease,border-color .2s ease!important;
}
.ch5-p4-play:hover{transform:scale(1.03)!important;border-color:#8B7352!important}
.ch5-p4-speaker{font:25px/1 Georgia,serif!important;color:#8B7352!important}
.ch5-p4-play>span:last-child{font-size:7px!important;letter-spacing:.12em!important}
.ch5-p4-listening-activity.is-playing .ch5-p4-play{
  animation:ch5P4SoundPulse .42s ease-in-out infinite alternate!important;
}
@keyframes ch5P4SoundPulse{
  to{transform:scale(1.07);box-shadow:0 0 0 9px rgba(139,115,82,.08)}
}
.ch5-p4-choices{
  width:340px!important;max-width:80vw!important;
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important;margin-top:15px!important;
}
.ch5-p4-choices button{
  height:52px!important;border:1px solid var(--line)!important;border-radius:8px!important;
  background:rgba(255,253,249,.72)!important;color:var(--navy)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;
  cursor:pointer!important;
}
.ch5-p4-choices button strong{font-size:9px!important;letter-spacing:.13em!important}
.ch5-p4-choice-mark{
  width:10px!important;height:10px!important;border-radius:50%!important;
  border:1px solid #8B7352!important;
}
.ch5-p4-choices button.correct{
  border-color:#789276!important;background:rgba(120,146,118,.08)!important;
}
.ch5-p4-choices button.correct .ch5-p4-choice-mark{background:#789276!important;border-color:#789276!important}
.ch5-p4-choices button.incorrect{
  border-color:#a97c72!important;background:rgba(169,124,114,.07)!important;
}
.ch5-p4-choices button.incorrect .ch5-p4-choice-mark{background:#a97c72!important;border-color:#a97c72!important}
.ch5-p4-result{
  min-height:18px!important;margin-top:9px!important;font-size:9px!important;color:#8f8780!important;
}
.ch5-p4-progress{display:flex!important;gap:7px!important;margin-top:8px!important}
.ch5-p4-progress i{
  width:6px!important;height:6px!important;border-radius:50%!important;background:rgba(110,107,99,.18)!important;
}
.ch5-p4-progress i.active{background:#8B7352!important;transform:scale(1.25)!important}
.ch5-p4-progress i.complete{background:#789276!important}


/* v182 — P4 visual + sound pitch-wave activity */


.lesson-page[data-page-role="pitchheight-instruments"] .ch5-p4-wave-activity{
  width:min(680px,78vw)!important;
  margin:18px auto 0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
}
.ch5-p4-wave-header{width:100%!important;position:relative!important}
.ch5-p4-wave-round{
  position:absolute!important;right:0!important;top:0!important;
  font-size:8px!important;letter-spacing:.1em!important;color:#9a9289!important;
}
.ch5-p4-wave-header>strong{
  display:block!important;font-size:9px!important;letter-spacing:.15em!important;color:#8B7352!important;
}
.ch5-p4-wave-header p{
  margin:4px 0 12px!important;
  font:18px/1.3 "Playfair Display",Georgia,serif!important;
  color:var(--navy)!important;
}
.ch5-p4-wave-card{
  width:560px!important;max-width:82vw!important;
  height:155px!important;
  border:1px solid rgba(110,107,99,.18)!important;
  border-radius:10px!important;
  background:rgba(255,253,249,.72)!important;
  padding:12px 16px 8px!important;
  cursor:pointer!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
}
.ch5-p4-wave-card svg{
  width:100%!important;height:115px!important;overflow:visible!important;
}
.ch5-p4-midline{
  stroke:rgba(110,107,99,.14)!important;stroke-width:1!important;
}
.ch5-p4-wave-path{
  fill:none!important;stroke:#8B7352!important;stroke-width:5!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
.ch5-p4-wave-card.playing .ch5-p4-wave-path{
  animation:ch5P4WavePulse .42s ease-in-out infinite alternate!important;
}
@keyframes ch5P4WavePulse{
  to{transform:translateY(2px);opacity:.62}
}
.ch5-p4-wave-play{
  font-size:7px!important;letter-spacing:.12em!important;color:#8f8780!important;
}
.ch5-p4-wave-choices{
  width:330px!important;max-width:80vw!important;
  display:grid!important;grid-template-columns:1fr 1fr!important;
  gap:18px!important;margin-top:13px!important;
}
.ch5-p4-wave-choices button{
  height:48px!important;border:1px solid var(--line)!important;border-radius:8px!important;
  background:rgba(255,253,249,.72)!important;color:var(--navy)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;cursor:pointer!important;
}
.ch5-p4-wave-choices button span{
  width:10px!important;height:10px!important;border-radius:50%!important;border:1px solid #8B7352!important;
}
.ch5-p4-wave-choices button strong{font-size:9px!important;letter-spacing:.13em!important}
.ch5-p4-wave-choices button.correct{border-color:#789276!important;background:rgba(120,146,118,.08)!important}
.ch5-p4-wave-choices button.correct span{background:#789276!important;border-color:#789276!important}
.ch5-p4-wave-choices button.incorrect{border-color:#a97c72!important;background:rgba(169,124,114,.07)!important}
.ch5-p4-wave-choices button.incorrect span{background:#a97c72!important;border-color:#a97c72!important}
.ch5-p4-wave-result{
  min-height:18px!important;margin-top:8px!important;font-size:9px!important;color:#8f8780!important;
}
.ch5-p4-wave-progress{display:flex!important;gap:7px!important;margin-top:7px!important}
.ch5-p4-wave-progress i{
  width:6px!important;height:6px!important;border-radius:50%!important;background:rgba(110,107,99,.18)!important;
}
.ch5-p4-wave-progress i.active{background:#8B7352!important;transform:scale(1.25)!important}
.ch5-p4-wave-progress i.complete{background:#789276!important}


/* v183 — Page 5 piano direction demonstration */


.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-direction-activity{
  width:min(720px,82vw)!important;
  margin:18px auto 0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
}

.ch5-piano-keyboard{
  width:600px!important;
  max-width:80vw!important;
  height:185px!important;
  position:relative!important;
  margin:0 auto!important;
}

.ch5-white-keys{
  width:100%!important;
  height:165px!important;
  display:grid!important;
  grid-template-columns:repeat(7,1fr)!important;
  gap:2px!important;
  position:absolute!important;
  left:0!important;
  bottom:0!important;
}

.ch5-white-keys button{
  position:relative!important;
  border:2px solid #6E6B63!important;
  border-radius:0 0 7px 7px!important;
  background:#f7f3eb!important;
  cursor:pointer!important;
  transition:transform .14s ease,background .14s ease,box-shadow .14s ease!important;
  overflow:hidden!important;
}

.ch5-white-keys button span{
  position:absolute!important;
  bottom:10px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  font-size:10px!important;
  letter-spacing:.08em!important;
  color:#6E6B63!important;
}

.ch5-white-keys button.playing{
  transform:translateY(7px)!important;
  background:#e9dfce!important;
  box-shadow:inset 0 6px 0 rgba(139,115,82,.18)!important;
}

.ch5-white-keys button.trail::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:14px!important;
  width:12px!important;
  height:12px!important;
  border-radius:50%!important;
  background:#8B7352!important;
  transform:translateX(-50%)!important;
  animation:ch5PianoNoteGlow .7s ease-out forwards!important;
}

@keyframes ch5PianoNoteGlow{
  0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  35%{opacity:1;transform:translate(-50%,0) scale(1.25)}
  100%{opacity:0;transform:translate(-50%,-18px) scale(.8)}
}

.ch5-black-keys{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:105px!important;
  pointer-events:none!important;
}

.ch5-black-keys i{
  position:absolute!important;
  width:48px!important;
  height:102px!important;
  background:#2A2926!important;
  border-radius:0 0 5px 5px!important;
  transform:translateX(-50%)!important;
  box-shadow:0 2px 0 rgba(0,0,0,.15)!important;
}

.ch5-black-keys .b1{left:14.3%!important}
.ch5-black-keys .b2{left:28.6%!important}
.ch5-black-keys .b3{left:57.1%!important}
.ch5-black-keys .b4{left:71.4%!important}
.ch5-black-keys .b5{left:85.7%!important}

.ch5-piano-direction-controls{
  display:flex!important;
  justify-content:center!important;
  gap:14px!important;
  margin-top:12px!important;
}

.ch5-piano-direction-controls button{
  border:1px solid var(--line)!important;
  background:rgba(255,253,249,.72)!important;
  color:var(--navy)!important;
  border-radius:8px!important;
  padding:9px 15px!important;
  font-size:9px!important;
  letter-spacing:.10em!important;
  cursor:pointer!important;
}

.ch5-piano-direction-controls button:hover{
  border-color:#8B7352!important;
}

.ch5-piano-direction-feedback{
  min-height:18px!important;
  margin-top:9px!important;
  font-size:9px!important;
  color:#8f8780!important;
}


/* v184 — Page 5 piano visual polish */


.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-direction-activity{
  width:min(760px,84vw)!important;
  margin-top:22px!important;
}

.ch5-piano-keyboard{
  width:620px!important;
  max-width:82vw!important;
  height:205px!important;
  position:relative!important;
  margin:0 auto!important;
}

.ch5-piano-case{
  position:absolute!important;
  inset:0!important;
  border:2px solid #6E6B63!important;
  border-radius:14px!important;
  background:linear-gradient(to bottom, rgba(229,225,213,.58), rgba(255,253,249,.96))!important;
  box-shadow:0 10px 24px rgba(42,41,38,.08)!important;
  padding:18px 18px 16px!important;
  box-sizing:border-box!important;
}

.ch5-piano-case::before{
  content:""!important;
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  top:14px!important;
  height:7px!important;
  border-radius:6px!important;
  background:#8B7352!important;
  opacity:.65!important;
}

.ch5-white-keys{
  left:18px!important;
  right:18px!important;
  width:auto!important;
  bottom:16px!important;
  height:150px!important;
  gap:1px!important;
}

.ch5-white-keys button{
  border:1.5px solid #6E6B63!important;
  border-radius:0 0 6px 6px!important;
  background:linear-gradient(to bottom,#fffefb 0%,#f4efe6 100%)!important;
  box-shadow:inset 0 -6px 0 rgba(110,107,99,.06)!important;
}

.ch5-white-keys button::before{
  content:""!important;
  position:absolute!important;
  left:8px!important;
  right:8px!important;
  top:8px!important;
  height:2px!important;
  background:rgba(139,115,82,.18)!important;
  border-radius:2px!important;
}

.ch5-white-keys button.playing{
  transform:translateY(7px)!important;
  background:linear-gradient(to bottom,#eadfcf 0%,#e2d4c0 100%)!important;
  box-shadow:inset 0 8px 0 rgba(139,115,82,.20),0 2px 0 rgba(42,41,38,.08)!important;
}

.ch5-white-keys button span{
  bottom:9px!important;
  font-size:9px!important;
  color:#6E6B63!important;
}

.ch5-black-keys{
  left:18px!important;
  right:18px!important;
  top:18px!important;
  height:96px!important;
}

.ch5-black-keys i{
  width:44px!important;
  height:92px!important;
  background:linear-gradient(to bottom,#2A2926 0%,#494641 100%)!important;
  border:1px solid #171613!important;
  border-radius:0 0 5px 5px!important;
  box-shadow:0 5px 7px rgba(0,0,0,.16)!important;
}

.ch5-piano-indicator-rail{
  position:absolute!important;
  left:31px!important;
  right:31px!important;
  top:25px!important;
  height:12px!important;
  display:grid!important;
  grid-template-columns:repeat(7,1fr)!important;
  align-items:center!important;
  pointer-events:none!important;
}

.ch5-piano-indicator-rail i{
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:rgba(139,115,82,.20)!important;
  justify-self:center!important;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease!important;
}

/* Light matching rail position whenever a key is active. */

.ch5-piano-case:has(.ch5-white-keys button:nth-child(1).playing) .ch5-piano-indicator-rail i:nth-child(1),
.ch5-piano-case:has(.ch5-white-keys button:nth-child(2).playing) .ch5-piano-indicator-rail i:nth-child(2),
.ch5-piano-case:has(.ch5-white-keys button:nth-child(3).playing) .ch5-piano-indicator-rail i:nth-child(3),
.ch5-piano-case:has(.ch5-white-keys button:nth-child(4).playing) .ch5-piano-indicator-rail i:nth-child(4),
.ch5-piano-case:has(.ch5-white-keys button:nth-child(5).playing) .ch5-piano-indicator-rail i:nth-child(5),
.ch5-piano-case:has(.ch5-white-keys button:nth-child(6).playing) .ch5-piano-indicator-rail i:nth-child(6),
.ch5-piano-case:has(.ch5-white-keys button:nth-child(7).playing) .ch5-piano-indicator-rail i:nth-child(7){
  background:#8B7352!important;
  transform:scale(1.55)!important;
  box-shadow:0 0 8px rgba(139,115,82,.55)!important;
}

.ch5-piano-direction-controls{
  margin-top:16px!important;
}

.ch5-piano-direction-controls button{
  min-width:92px!important;
  background:#FAF9F6!important;
  box-shadow:0 3px 8px rgba(42,41,38,.05)!important;
}

.ch5-piano-direction-controls button:active{
  transform:translateY(1px)!important;
}

.ch5-piano-direction-feedback{
  margin-top:10px!important;
  font-size:10px!important;
}


/* v185 — P5 only: keep v184 piano, crop black keys to the white-key top boundary */


.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-case{
  overflow:hidden!important;
}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys{
  top:39px!important;
  height:92px!important;
  overflow:hidden!important;
}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys i{
  top:0!important;
  height:92px!important;
}


/* v186 — P5 exact one-octave keyboard: C4 through C5 */


.lesson-page[data-page-role="pitchheight-direction"] .ch5-white-keys{
  grid-template-columns:repeat(8,1fr)!important;
}

/* Black keys: C#, D#, F#, G#, A# */

.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys .b1{left:12.5%!important}
.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys .b2{left:25%!important}
.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys .b3{left:50%!important}
.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys .b4{left:62.5%!important}
.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys .b5{left:75%!important}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-indicator-rail{
  grid-template-columns:repeat(8,1fr)!important;
}

/* Active indicator mapping for all eight C–C keys */

.ch5-piano-case:has(.ch5-white-keys button:nth-child(8).playing) .ch5-piano-indicator-rail i:nth-child(8){
  background:#8B7352!important;
  transform:scale(1.55)!important;
  box-shadow:0 0 8px rgba(139,115,82,.55)!important;
}


/* v187 — P5 clearer, quieter one-octave piano */


.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-keyboard{
  width:590px!important;
  height:184px!important;
}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-case{
  padding:10px 12px 12px!important;
  border:1px solid rgba(110,107,99,.55)!important;
  border-radius:9px!important;
  background:rgba(255,253,249,.68)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

/* Remove decorative gold rail and indicator lights to reduce visual noise. */

.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-case::before,
.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-indicator-rail{
  display:none!important;
}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-white-keys{
  left:12px!important;
  right:12px!important;
  bottom:12px!important;
  height:158px!important;
  gap:1px!important;
}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-white-keys button{
  border:1px solid #6E6B63!important;
  border-radius:0 0 4px 4px!important;
  background:#FAF9F6!important;
  box-shadow:none!important;
}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-white-keys button::before{
  display:none!important;
}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-white-keys button span{
  bottom:9px!important;
  font-size:11px!important;
  font-weight:600!important;
  color:#5f5c56!important;
}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-white-keys button.playing{
  transform:translateY(4px)!important;
  background:#e9dfce!important;
  box-shadow:inset 0 5px 0 rgba(139,115,82,.16)!important;
}

/* Keep only a subtle note pulse on the currently sounding key. */

.lesson-page[data-page-role="pitchheight-direction"] .ch5-white-keys button.trail::after{
  width:8px!important;
  height:8px!important;
  top:16px!important;
  background:#8B7352!important;
}

/* Black keys begin exactly at the top of the white-key field. */

.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys{
  left:12px!important;
  right:12px!important;
  top:14px!important;
  height:96px!important;
  overflow:hidden!important;
}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys i{
  width:39px!important;
  height:92px!important;
  top:0!important;
  background:#2A2926!important;
  border:0!important;
  border-radius:0 0 4px 4px!important;
  box-shadow:none!important;
}

/* C# D# F# G# A# positions on the C4–C5 octave. */

.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys .b1{left:12.5%!important}
.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys .b2{left:25%!important}
.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys .b3{left:50%!important}
.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys .b4{left:62.5%!important}
.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys .b5{left:75%!important}

/* Show half of the next black key (C#5) at the right edge of C5.
   It is visual only, indicating that the keyboard continues. */

.lesson-page[data-page-role="pitchheight-direction"] .ch5-black-keys::after{
  content:""!important;
  position:absolute!important;
  right:-19.5px!important;
  top:0!important;
  width:39px!important;
  height:92px!important;
  background:#2A2926!important;
  border-radius:0 0 4px 4px!important;
}

/* Quieter controls: clear hierarchy without card-like decoration. */

.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-direction-controls{
  gap:10px!important;
  margin-top:12px!important;
}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-direction-controls button{
  min-width:82px!important;
  padding:8px 12px!important;
  background:transparent!important;
  box-shadow:none!important;
  border:1px solid rgba(110,107,99,.32)!important;
}

.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-direction-feedback{
  margin-top:8px!important;
}


/* v190 — Page 5 piano: remove the outer animation outline */


.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-case{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.lesson-page[data-page-role="pitchheight-direction"] .ch5-piano-keyboard{
  border:0!important;
  outline:0!important;
}


/* v195 — Chapter 5 Page 1 only:
   loosen text width and give the low/high visual more breathing room. */


.lesson-page[data-page-role="pitchheight-intro"] .lesson-copy,
.lesson-page[data-page-role="pitchheight-intro"] .lesson-text,
.lesson-page[data-page-role="pitchheight-intro"] .lesson-body,
.lesson-page[data-page-role="pitchheight-intro"] .page-copy{
  max-width:820px!important;
  width:min(820px,88vw)!important;
}

/* Release inherited paragraph width constraints on this page. */

.lesson-page[data-page-role="pitchheight-intro"] p{
  max-width:780px!important;
}

/* Keep the scientific definition readable without squeezing it tightly. */

.lesson-page[data-page-role="pitchheight-intro"] .ch5-science-definition{
  max-width:780px!important;
  width:min(780px,86vw)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Spread the two static frequency comparisons farther apart. */

.lesson-page[data-page-role="pitchheight-intro"] .ch5-p1-static-pitch{
  width:min(840px,90vw)!important;
  grid-template-columns:1fr 1px 1fr!important;
  gap:52px!important;
}

/* Give each wave its own horizontal breathing room. */

.lesson-page[data-page-role="pitchheight-intro"] .ch5-static-wave{
  width:100%!important;
}


/* v196 — Chapter 5 Page 1 text only.
   Slightly widen the copy so short trailing phrases such as "sound low"
   remain with the preceding sentence. Visual positions are unchanged. */


.lesson-page[data-page-role="pitchheight-intro"] .lesson-copy,
.lesson-page[data-page-role="pitchheight-intro"] .lesson-text,
.lesson-page[data-page-role="pitchheight-intro"] .lesson-body,
.lesson-page[data-page-role="pitchheight-intro"] .page-copy{
  max-width:900px!important;
  width:min(900px,92vw)!important;
}

.lesson-page[data-page-role="pitchheight-intro"] p{
  max-width:860px!important;
}

.lesson-page[data-page-role="pitchheight-intro"] .ch5-science-definition{
  max-width:860px!important;
  width:min(860px,90vw)!important;
}


/* v197 — Chapter 5 Page 1: one more small text-width release only. */


.lesson-page[data-page-role="pitchheight-intro"] .lesson-copy,
.lesson-page[data-page-role="pitchheight-intro"] .lesson-text,
.lesson-page[data-page-role="pitchheight-intro"] .lesson-body,
.lesson-page[data-page-role="pitchheight-intro"] .page-copy{
  max-width:950px!important;
  width:min(950px,94vw)!important;
}
.lesson-page[data-page-role="pitchheight-intro"] p{
  max-width:910px!important;
}
.lesson-page[data-page-role="pitchheight-intro"] .ch5-science-definition{
  max-width:910px!important;
  width:min(910px,92vw)!important;
}


/* v198 — Chapter 5 Page 1:
   widen symmetrically from the center, not from one side. */


.lesson-page[data-page-role="pitchheight-intro"] .pitchheight-copy{
  width:min(1220px,96vw)!important;
  max-width:1220px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

.lesson-page[data-page-role="pitchheight-intro"] .pitchheight-copy p{
  width:auto!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

/* Keep this full example sentence on one line at desktop lesson width. */

.lesson-page[data-page-role="pitchheight-intro"] .ch5-p1-single-line{
  white-space:nowrap!important;
}

/* Keep the scientific definition centered while giving it more room too. */

.lesson-page[data-page-role="pitchheight-intro"] .ch5-science-definition{
  width:auto!important;
  max-width:1160px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}


/* v199 — Chapter 5 Page 1:
   use one consistent centered text width based on the full
   “That quality is called pitch…” sentence. */


.lesson-page[data-page-role="pitchheight-intro"] .pitchheight-copy{
  width:min(1040px,94vw)!important;
  max-width:1040px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

.lesson-page[data-page-role="pitchheight-intro"] .pitchheight-copy p,
.lesson-page[data-page-role="pitchheight-intro"] .ch5-science-definition{
  width:100%!important;
  max-width:1040px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

/* This sentence defines the intended desktop measure. */

.lesson-page[data-page-role="pitchheight-intro"] .ch5-p1-single-line{
  white-space:nowrap!important;
}

/* Chapter 6 — Amplitude */

.amplitude-only-page .page-heading,
.amplitude-only-page .amplitude-copy{width:min(900px,88vw);max-width:900px;margin-left:auto;margin-right:auto;text-align:center}
.amplitude-only-page .amplitude-copy p{max-width:900px;margin:8px auto;line-height:1.55}
.ch6-amplitude-compare{width:min(900px,88vw);margin:28px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:54px;text-align:center}
.ch6-amplitude-compare>div{display:grid;gap:8px}.ch6-amplitude-compare strong,
.ch6-amplitude-compare span{font-size:9px;letter-spacing:.1em}
.ch6-amplitude-compare span{color:#8f8780}.ch6-amplitude-compare svg{width:100%;height:120px;overflow:visible}
.ch6-amplitude-compare line{stroke:#d8d0c7;stroke-width:1}.ch6-amplitude-compare path{fill:none;stroke:#14283b;stroke-width:3;stroke-linecap:round}

.ch6-motion-grid{width:min(760px,82vw);margin:34px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.ch6-motion-card{border:0;background:transparent;color:#14283b;cursor:pointer;display:grid;gap:14px;text-align:center}
.ch6-motion-card>strong,
.ch6-motion-card>span{font-size:9px;letter-spacing:.1em}.ch6-motion-card>span{color:#8f8780}
.ch6-motion-track{height:92px;position:relative}.ch6-motion-track i{position:absolute;left:5%;right:5%;top:50%;height:1px;background:#d8d0c7}
.ch6-motion-track b{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:#8B7352;transform:translate(-50%,-50%)}
@keyframes ch6small{0%,100%{left:50%}25%{left:40%}75%{left:60%}}
@keyframes ch6large{0%,100%{left:50%}25%{left:15%}75%{left:85%}}
.ch6-motion-track b.run-small{animation:ch6small 1.25s ease-in-out 2}.ch6-motion-track b.run-large{animation:ch6large 1.25s ease-in-out 2}

.ch6-listen-activity{width:min(820px,86vw);margin:26px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:46px}
.ch6-listen-activity button{border:0;background:transparent;cursor:pointer;color:#14283b;display:grid;gap:7px;text-align:center}
.ch6-listen-activity svg{width:100%;height:110px}.ch6-listen-activity path{fill:none;stroke:#14283b;stroke-width:3;stroke-linecap:round}
.ch6-listen-activity strong{font-size:10px;letter-spacing:.11em}.ch6-listen-activity span{font-size:9px;color:#8f8780}
.ch6-listen-activity button.sounding svg{animation:ch6pulse .45s ease 2}@keyframes ch6pulse{50%{transform:scale(1.025)}}
.ch6-sound-feedback,
.ch6-quiz-result{text-align:center;margin-top:15px;font-size:10px;color:#8f8780}

.ch6-music-demo{width:min(760px,82vw);margin:30px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:46px}
.ch6-music-demo button{border:0;background:transparent;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:12px;color:#14283b}
.ch6-music-demo button>span{font-size:8px;letter-spacing:.1em}.ch6-music-demo button>strong{grid-column:1/-1;font-size:9px;letter-spacing:.1em;margin-top:8px}
.ch6-bars{height:105px;display:flex;align-items:end;justify-content:center;gap:9px}.ch6-bars i{width:13px;background:#8B7352;border-radius:7px 7px 0 0}
.ch6-bars i:nth-child(1){height:20%}.ch6-bars i:nth-child(2){height:38%}.ch6-bars i:nth-child(3){height:56%}.ch6-bars i:nth-child(4){height:76%}.ch6-bars i:nth-child(5){height:100%}
.ch6-bars.reverse{transform:scaleX(-1)}.ch6-music-demo button.playing .ch6-bars i{animation:ch6bar .5s ease both}
.ch6-music-demo button.playing .ch6-bars i:nth-child(2){animation-delay:.47s}.ch6-music-demo button.playing .ch6-bars i:nth-child(3){animation-delay:.94s}.ch6-music-demo button.playing .ch6-bars i:nth-child(4){animation-delay:1.41s}.ch6-music-demo button.playing .ch6-bars i:nth-child(5){animation-delay:1.88s}
@keyframes ch6bar{50%{opacity:.35;transform:translateY(-5px)}}

.ch6-quiz{width:min(720px,80vw);margin:28px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.ch6-quiz button{border:1px solid transparent;background:transparent;padding:12px;cursor:pointer;color:#14283b}.ch6-quiz svg{width:100%;height:100px}
.ch6-quiz path{fill:none;stroke:#14283b;stroke-width:3;stroke-linecap:round}.ch6-quiz span{display:block;font-size:9px;letter-spacing:.1em}
.ch6-quiz button.correct{border-color:#779071}.ch6-quiz button.wrong{border-color:#b47b73}

@media(max-width:760px){.ch6-amplitude-compare,
.ch6-motion-grid,
.ch6-listen-activity,
.ch6-music-demo,
.ch6-quiz{grid-template-columns:1fr;gap:22px}}


/* v2 — P2 narrower first explanation only */


.lesson-page[data-page-role="amplitude-motion"] .ch6-p2-narrow-copy{
  max-width:650px!important;
  width:min(650px,78vw)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* v2 — P4 musical crescendo / decrescendo */

.ch6-dynamics-demo{
  width:min(800px,84vw)!important;
  margin:28px auto 0!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:54px!important;
}
.ch6-dynamic-card{
  border:0!important;
  background:transparent!important;
  cursor:pointer!important;
  color:#14283b!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:9px!important;
}
.ch6-dynamic-labels{
  width:100%!important;
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
}
.ch6-dynamic-labels span{
  font-size:8px!important;
  letter-spacing:.1em!important;
  color:#8f8780!important;
}
.ch6-dynamic-labels span:first-child{text-align:left!important}
.ch6-dynamic-labels span:last-child{text-align:right!important}
.ch6-dynamic-labels strong{
  font-size:9px!important;
  letter-spacing:.12em!important;
}
.ch6-hairpin{
  width:100%!important;
  height:84px!important;
  position:relative!important;
}
.ch6-hairpin>i{
  position:absolute!important;
  left:5%!important;
  right:5%!important;
  top:50%!important;
  height:2px!important;
  background:#8B7352!important;
  transform-origin:left center!important;
}
.ch6-hairpin.crescendo .top{transform:rotate(-7deg)!important}
.ch6-hairpin.crescendo .bottom{transform:rotate(7deg)!important}
.ch6-hairpin.decrescendo .top{transform:rotate(7deg)!important}
.ch6-hairpin.decrescendo .bottom{transform:rotate(-7deg)!important}
.ch6-note-dots{
  position:absolute!important;
  inset:0 7%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.ch6-note-dots b{
  width:10px!important;
  height:10px!important;
  border-radius:50%!important;
  background:#14283b!important;
  opacity:.28!important;
}
.ch6-dynamic-card.playing .ch6-note-dots b{
  animation:ch6DynamicNote .45s ease both!important;
}
.ch6-dynamic-card.playing .ch6-note-dots b:nth-child(2){animation-delay:.43s!important}
.ch6-dynamic-card.playing .ch6-note-dots b:nth-child(3){animation-delay:.86s!important}
.ch6-dynamic-card.playing .ch6-note-dots b:nth-child(4){animation-delay:1.29s!important}
.ch6-dynamic-card.playing .ch6-note-dots b:nth-child(5){animation-delay:1.72s!important}
.ch6-dynamic-card small{
  font-size:9px!important;
  color:#8f8780!important;
}
.ch6-dynamics-feedback{
  text-align:center!important;
  margin-top:11px!important;
  font-size:9px!important;
  color:#8f8780!important;
}
@keyframes ch6DynamicNote{
  0%{opacity:.25;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.45);background:#8B7352}
  100%{opacity:.45;transform:scale(1)}
}

/* v2 — P5 multi-round visual + listening challenge */

.ch6-amplitude-challenge{
  width:min(760px,82vw)!important;
  margin:18px auto 0!important;
  text-align:center!important;
}
.ch6-challenge-head{
  position:relative!important;
}
.ch6-challenge-head>strong{
  display:block!important;
  font-size:9px!important;
  letter-spacing:.14em!important;
  color:#8B7352!important;
}
.ch6-challenge-head>p{
  margin:4px 0 12px!important;
  font:18px/1.3 "Playfair Display",Georgia,serif!important;
  color:#14283b!important;
}
.ch6-challenge-round{
  position:absolute!important;
  right:0!important;
  top:0!important;
  font-size:8px!important;
  letter-spacing:.1em!important;
  color:#8f8780!important;
}
.ch6-challenge-waves{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:34px!important;
}
.ch6-challenge-wave{
  border:1px solid rgba(110,107,99,.18)!important;
  border-radius:9px!important;
  background:rgba(255,253,249,.7)!important;
  padding:10px 14px!important;
  cursor:pointer!important;
  color:#14283b!important;
}
.ch6-challenge-wave svg{
  width:100%!important;
  height:100px!important;
}
.ch6-challenge-wave line{
  stroke:rgba(110,107,99,.18)!important;
  stroke-width:1!important;
}
.ch6-challenge-wave path{
  fill:none!important;
  stroke:#14283b!important;
  stroke-width:3!important;
  stroke-linecap:round!important;
}
.ch6-challenge-wave strong{
  display:block!important;
  font-size:9px!important;
  letter-spacing:.11em!important;
}
.ch6-challenge-wave span{
  display:block!important;
  margin-top:3px!important;
  font-size:7px!important;
  letter-spacing:.1em!important;
  color:#8f8780!important;
}
.ch6-challenge-wave.playing svg{
  animation:ch6WaveListen .4s ease-in-out 2!important;
}
@keyframes ch6WaveListen{50%{transform:scale(1.025)}}
.ch6-challenge-choices{
  display:flex!important;
  justify-content:center!important;
  gap:16px!important;
  margin-top:12px!important;
}
.ch6-challenge-choices button{
  min-width:100px!important;
  padding:8px 14px!important;
  border:1px solid rgba(110,107,99,.28)!important;
  border-radius:7px!important;
  background:transparent!important;
  cursor:pointer!important;
  color:#14283b!important;
  font-size:9px!important;
  letter-spacing:.1em!important;
}
.ch6-challenge-choices button.correct{border-color:#789276!important;background:rgba(120,146,118,.08)!important}
.ch6-challenge-choices button.wrong{border-color:#a97c72!important;background:rgba(169,124,114,.07)!important}
.ch6-challenge-result{
  min-height:18px!important;
  margin-top:8px!important;
  font-size:9px!important;
  color:#8f8780!important;
}
.ch6-challenge-progress{
  display:flex!important;
  justify-content:center!important;
  gap:7px!important;
  margin-top:7px!important;
}
.ch6-challenge-progress i{
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:rgba(110,107,99,.18)!important;
}
.ch6-challenge-progress i.active{background:#8B7352!important;transform:scale(1.25)!important}
.ch6-challenge-progress i.complete{background:#789276!important}

@media(max-width:760px){
  .ch6-dynamics-demo,
.ch6-challenge-waves{grid-template-columns:1fr!important;gap:22px!important}
}


/* v3 — P4 decrescendo visual only:
   wide/open at the loud beginning, narrowing to a point at the soft ending. */


.ch6-hairpin.decrescendo>i{
  transform-origin:right center!important;
}
.ch6-hairpin.decrescendo .top{
  transform:rotate(-7deg)!important;
}
.ch6-hairpin.decrescendo .bottom{
  transform:rotate(7deg)!important;
}


/* v4 — P4 musical dynamics explanation */


.lesson-page[data-page-role="amplitude-music"] .ch6-dynamics-definition{
  max-width:760px!important;
  margin:10px auto 0!important;
}
.ch6-dynamics-feedback>div+div{
  margin-top:4px!important;
}

/* v4 — P5 wave animations are now the answer controls */

.ch6-challenge-wave.correct{
  border-color:#789276!important;
  background:rgba(120,146,118,.08)!important;
}
.ch6-challenge-wave.wrong{
  border-color:#a97c72!important;
  background:rgba(169,124,114,.07)!important;
}
.ch6-challenge-wave{
  transition:border-color .18s ease,background .18s ease,transform .18s ease!important;
}
.ch6-challenge-wave:hover{
  transform:translateY(-2px)!important;
}


/* v5 — Chapter 6 Page 5: slightly narrower centered instructional copy */


.lesson-page[data-page-role="amplitude-activity"] .amplitude-copy{
  width:min(680px,78vw)!important;
  max-width:680px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
.lesson-page[data-page-role="amplitude-activity"] .amplitude-copy p{
  max-width:680px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.timbre-pronounce{font-size:.82em;color:#8f8780}


.lesson-page[data-page-role="timbre-intro"] #ch7IntroHorn{
  width:290px!important;
  max-width:34vw!important;
  margin:0 auto!important;
  overflow:visible!important;
}

.lesson-page[data-page-role="timbre-intro"] #ch7IntroHorn .air-horn-svg{
  width:100%!important;
  height:118px!important;
  overflow:visible!important;
}

.lesson-page[data-page-role="timbre-source"] #ch7TravelingStringDemo{
  width:250px!important;
  max-width:27vw!important;
  margin:0 auto!important;
  transform:none!important;
  overflow:visible!important;
}

.lesson-page[data-page-role="timbre-source"] #ch7SourceAirHorn{
  width:250px!important;
  max-width:27vw!important;
  margin:0 auto!important;
  overflow:visible!important;
}

.lesson-page[data-page-role="timbre-source"] #ch7SourceAirHorn .air-horn-svg{
  width:100%!important;
  height:108px!important;
  overflow:visible!important;
}

.lesson-page[data-page-role="timbre-source"] #ch7CymbalButton{
  width:220px!important;
  max-width:24vw!important;
  margin:0 auto!important;
  transform:none!important;
  overflow:visible!important;
}

@media(max-width:760px){

  .lesson-page[data-page-role="timbre-intro"] #ch7IntroHorn,
.lesson-page[data-page-role="timbre-source"] #ch7TravelingStringDemo,
.lesson-page[data-page-role="timbre-source"] #ch7SourceAirHorn,
.lesson-page[data-page-role="timbre-source"] #ch7CymbalButton{
    max-width:72vw!important;
  }
}

/* Release any inherited sizing constraints that were only needed by the removed visuals. */

.lesson-page[data-page-role="timbre-intro"],
.lesson-page[data-page-role="timbre-source"]{
  overflow:visible!important;
}

.lesson-page[data-page-role="timbre-intro"] .timbre-copy,
.lesson-page[data-page-role="timbre-source"] .timbre-copy{
  max-width:820px!important;
  width:min(820px,88vw)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}


/* v7 — hard chapter isolation.
   Hidden lesson pages must never participate in layout, animation, or pointer handling. */
.lesson-page[hidden]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* v187 — Start a Lesson minor design refinements */
@media(max-width:760px){
}




/* Lesson copyright lives inside the existing fixed status stack. */

/* Canonical lesson status stack — single source of truth. */
body.lesson-only-page .lesson-status-stack{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:40px !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  width:auto !important;
  min-width:210px !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:2px 8px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  text-align:center !important;
  overflow:visible !important;
  background:var(--cream) !important;
  z-index:260 !important;
  box-sizing:border-box !important;
}

body.lesson-only-page .lesson-status-stack > div{
  display:block !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  text-align:center !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

body.lesson-only-page .lesson-status-stack .status-lesson,
body.lesson-only-page .lesson-status-stack .status-course,
body.lesson-only-page .lesson-status-stack .status-page{
  color:#8f8780 !important;
  font-size:8.5px !important;
  line-height:1.3 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  z-index:261 !important;
}

body.lesson-only-page .lesson-status-stack strong{
  color:#14283b !important;
  font-weight:600 !important;
}

body.lesson-only-page .lesson-copyright{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:10px !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  font-family:'DM Sans',Arial,sans-serif !important;
  font-size:8px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-align:center !important;
  white-space:nowrap !important;
  color:#9a9189 !important;
  z-index:262 !important;
  pointer-events:none !important;
}

/* Chapter 1 Page 1 — clean rebuild */
body.lesson-only-page .ch1-p1-rebuilt .ch1-p1-copy{
  width:min(820px,88vw);
  max-width:820px;
  margin:0 auto;
  text-align:center;
}

body.lesson-only-page .ch1-p1-rebuilt .ch1-p1-copy p{
  margin:8px auto;
  font-size:19px;
  line-height:1.55;
}

body.lesson-only-page .ch1-p1-rebuilt .ch1-p1-lead{
  font-size:22px;
}

body.lesson-only-page .ch1-p1-rebuilt .ch1-p1-particle-demo{
  width:min(700px,82vw);
  max-width:700px;
  margin:28px auto 0;
  padding:8px 0 0;
  text-align:center;
}

body.lesson-only-page .ch1-p1-rebuilt .ch1-p1-particle-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:52px;
}

body.lesson-only-page .ch1-p1-rebuilt .ch1-p1-particle-row i{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#8B7352;
  display:block;
  animation:ch1P1ParticleVibration .55s ease-in-out infinite alternate;
}

body.lesson-only-page .ch1-p1-rebuilt .ch1-p1-particle-row i:nth-child(even){
  animation-delay:.14s;
}

body.lesson-only-page .ch1-p1-rebuilt .ch1-p1-particle-row i:nth-child(3n){
  animation-delay:.28s;
}

body.lesson-only-page .ch1-p1-rebuilt .ch1-p1-motion-arrows{
  display:flex;
  justify-content:center;
  gap:52px;
  margin-top:6px;
  font-size:22px;
  line-height:1;
  color:#6E6B63;
}

body.lesson-only-page .ch1-p1-rebuilt .ch1-p1-label{
  margin-top:8px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:12px;
  line-height:1.3;
  letter-spacing:.04em;
  color:#6E6B63;
}

@keyframes ch1P1ParticleVibration{
  from{transform:translateX(-5px)}
  to{transform:translateX(5px)}
}

/* Chapter 1 Page 2 — clean rebuild */
body.lesson-only-page .ch1-p2-rebuilt .ch1-p2-copy{
  width:min(820px,88vw);
  max-width:820px;
  margin:0 auto;
  text-align:center;
}

body.lesson-only-page .ch1-p2-rebuilt .ch1-p2-copy p{
  margin:8px auto;
  font-size:19px;
  line-height:1.55;
}

body.lesson-only-page .ch1-p2-rebuilt .ch1-p2-wave-demo{
  width:min(760px,84vw);
  max-width:760px;
  margin:28px auto 0;
  text-align:center;
  overflow:visible;
}

body.lesson-only-page .ch1-p2-rebuilt .ch1-p2-wave-svg{
  display:block;
  width:100%;
  height:150px;
  overflow:visible;
}

body.lesson-only-page .ch1-p2-rebuilt .ch1-p2-wave-svg path{
  fill:none;
  stroke:#8B7352;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:18 12;
  animation:ch1P2WaveTravel 1.6s linear infinite;
}

body.lesson-only-page .ch1-p2-rebuilt .ch1-p2-label{
  margin-top:4px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:12px;
  line-height:1.3;
  letter-spacing:.05em;
  color:#6E6B63;
}

@keyframes ch1P2WaveTravel{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-60}
}

/* Chapter 1 Page 3 — clean rebuild */
body.lesson-only-page .ch1-p3-rebuilt .ch1-p3-copy{
  width:min(900px,90vw);
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

body.lesson-only-page .ch1-p3-rebuilt .ch1-p3-copy p{
  margin:8px auto;
  font-size:19px;
  line-height:1.55;
}

body.lesson-only-page .ch1-p3-rebuilt .ch1-p3-amplitude-demo{
  width:700px;
  max-width:min(700px,88vw);
  margin:28px auto 0;
  display:grid;
  grid-template-columns:300px 300px;
  justify-content:space-between;
  align-items:start;
}

body.lesson-only-page .ch1-p3-rebuilt .ch1-p3-amplitude-item{
  text-align:center;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}

body.lesson-only-page .ch1-p3-rebuilt .ch1-p3-amplitude-item.showing{
  opacity:1;
  transform:none;
}

body.lesson-only-page .ch1-p3-rebuilt .ch1-p3-amplitude-item svg{
  display:block;
  width:100%;
  height:130px;
  overflow:visible;
}

body.lesson-only-page .ch1-p3-rebuilt .ch1-p3-amplitude-item svg path{
  fill:none;
  stroke:#8B7352;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body.lesson-only-page .ch1-p3-rebuilt .ch1-p3-amplitude-item.sounding svg{
  animation:ch1P3AmplitudePulse .6s ease-in-out infinite alternate;
}

body.lesson-only-page .ch1-p3-rebuilt .ch1-p3-amplitude-item strong{
  display:block;
  margin-top:6px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.08em;
  color:#6E6B63;
}

@keyframes ch1P3AmplitudePulse{
  from{transform:scaleY(.96)}
  to{transform:scaleY(1.04)}
}

/* Chapter 1 Page 4 — clean rebuild */
body.lesson-only-page .ch1-p4-rebuilt .ch1-p4-copy{
  width:min(900px,90vw);
  max-width:900px;
  margin:0 auto;
  text-align:center;
}
body.lesson-only-page .ch1-p4-rebuilt .ch1-p4-copy p{
  margin:8px auto;
  font-size:19px;
  line-height:1.55;
}
body.lesson-only-page .ch1-p4-rebuilt .ch1-p4-frequency-demo{
  width:min(820px,88vw);
  max-width:820px;
  margin:30px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:34px;
  align-items:start;
}
body.lesson-only-page .ch1-p4-rebuilt .ch1-p4-frequency-item{
  width:100%;
  min-width:0;
  text-align:center;
  opacity:.58;
  transition:opacity .25s ease,transform .25s ease;
}
body.lesson-only-page .ch1-p4-rebuilt .ch1-p4-frequency-item.playing{
  opacity:1;
  transform:scale(1.015);
}
body.lesson-only-page .ch1-p4-rebuilt .ch1-p4-frequency-item svg{
  display:block;
  width:100%;
  height:145px;
  overflow:visible;
}
body.lesson-only-page .ch1-p4-rebuilt .ch1-p4-frequency-item svg path{
  fill:none;
  stroke:#8B7352;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* Chapter 1 · Page 4 — show frequency through vibration travel speed. */
@keyframes ch1P4LowWaveTravel{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-152}
}
@keyframes ch1P4HighWaveTravel{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-152}
}
body.lesson-only-page .ch1-p4-rebuilt .ch1-p4-low.playing svg path{
  stroke-dasharray:28 10;
  animation:ch1P4LowWaveTravel 2.4s linear infinite;
}
body.lesson-only-page .ch1-p4-rebuilt .ch1-p4-high.playing svg path{
  stroke-dasharray:14 5;
  animation:ch1P4HighWaveTravel .6s linear infinite;
}
body.lesson-only-page .ch1-p4-rebuilt .ch1-p4-frequency-item strong{
  display:block;
  margin-top:0;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.08em;
  color:#6E6B63;
}
body.lesson-only-page .ch1-p4-rebuilt .ch1-p4-frequency-item span{
  display:block;
  margin-top:2px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:14px;
  line-height:1.25;
  font-weight:400;
  color:#6E6B63;
}
/* Chapter 1 Page 5 — clean rebuild */
body.lesson-only-page .ch1-p5-rebuilt .ch1-p5-explainer{
  width:min(900px,90vw);
  max-width:900px;
  margin:0 auto 14px;
  text-align:center;
  font-size:17px;
  line-height:1.5;
  color:#6E6B63;
}

body.lesson-only-page .ch1-p5-rebuilt .ch1-p5-controls{
  width:min(760px,84vw);
  max-width:760px;
  margin:14px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:18px;
  align-items:end;
}

body.lesson-only-page .ch1-p5-rebuilt .ch1-p5-controls label{
  display:grid;
  gap:7px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:12px;
  line-height:1.25;
  color:#6E6B63;
}

body.lesson-only-page .ch1-p5-rebuilt .ch1-p5-controls label strong{
  font-size:12px;
  color:#2A2926;
}

body.lesson-only-page .ch1-p5-rebuilt .ch1-p5-controls input[type="range"]{
  width:100%;
}

body.lesson-only-page .ch1-p5-rebuilt .ch1-p5-controls button{
  border:1px solid rgba(110,107,99,.28);
  border-radius:999px;
  background:transparent;
  padding:9px 15px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:12px;
  color:#2A2926;
  cursor:pointer;
}

body.lesson-only-page .ch1-p5-rebuilt .ch1-p5-wave-graph{
  width:min(800px,86vw);
  max-width:800px;
  margin:18px auto 0;
}

body.lesson-only-page .ch1-p5-rebuilt .ch1-p5-wave-graph svg{
  display:block;
  width:100%;
  height:185px;
}

body.lesson-only-page .ch1-p5-rebuilt .ch1-p5-wave-axis{
  stroke:rgba(110,107,99,.25);
  stroke-width:1.5;
}

body.lesson-only-page .ch1-p5-rebuilt #ch1P5WavePath{
  fill:none;
  stroke:#8B7352;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body.lesson-only-page .ch1-p5-rebuilt .ch1-p5-readout{
  width:min(760px,84vw);
  max-width:760px;
  margin:8px auto 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:11px;
  line-height:1.35;
  color:#8f8780;
}

/* Chapter 1 Page 6 — clean rebuild */
body.lesson-only-page .ch1-p6-rebuilt .ch1-p6-copy{
  width:min(820px,88vw);
  max-width:820px;
  margin:0 auto;
  text-align:center;
}

body.lesson-only-page .ch1-p6-rebuilt .ch1-p6-copy p{
  margin:8px auto;
  font-size:19px;
  line-height:1.55;
}

body.lesson-only-page .ch1-p6-rebuilt .ch1-p6-wave-wrap{
  width:min(820px,88vw);
  max-width:820px;
  margin:26px auto 0;
}

body.lesson-only-page .ch1-p6-rebuilt .ch1-p6-wave-stage{
  position:relative;
  display:block;
  width:100%;
  height:190px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  overflow:visible;
}

body.lesson-only-page .ch1-p6-rebuilt .ch1-p6-wave-stage svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

body.lesson-only-page .ch1-p6-rebuilt .ch1-p6-wave-stage svg path{
  fill:none;
  stroke:#8B7352;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body.lesson-only-page .ch1-p6-rebuilt .ch1-p6-wave-source{
  position:absolute;
  left:-2px;
  top:50%;
  width:8px;
  height:72px;
  margin-top:-36px;
  border-radius:5px;
  background:#2A2926;
}

body.lesson-only-page .ch1-p6-rebuilt .ch1-p6-wave-stage.running svg path{
  stroke-dasharray:18 12;
  animation:ch1P6WaveTravel .9s linear 1;
}

body.lesson-only-page .ch1-p6-rebuilt .ch1-p6-wave-source{
  transition:transform .16s ease;
}

body.lesson-only-page .ch1-p6-rebuilt .ch1-p6-wave-stage.running .ch1-p6-wave-source{
  animation:ch1P6SourceVibrate .16s ease-in-out 6 alternate;
}

body.lesson-only-page .ch1-p6-rebuilt .ch1-p6-feedback{
  min-height:24px;
  margin-top:10px;
  text-align:center;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:13px;
  line-height:1.35;
  color:#6E6B63;
}

@keyframes ch1P6WaveTravel{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-72}
}

@keyframes ch1P6SourceVibrate{
  from{transform:translateX(-5px)}
  to{transform:translateX(5px)}
}


/* One application idea per page. */ .single-sound-application{width:min(920px,98%);
  margin:0 auto;
  text-align:center;}
.single-app-copy{width:min(700px,94%);
  margin:0 auto 16px;
  font-size:18px;
  line-height:1.55;}
/* Pages 6–8 application area: normalize generated text, labels and buttons */ body.lesson-only-page .lesson-page[data-chapter="1"].sound-application-page .interactive-content, body.lesson-only-page .lesson-page[data-chapter="1"].sound-application-page .interactive-content *, body.lesson-only-page .lesson-page[data-chapter="1"].sound-application-page .interaction-feedback{font-family:'DM Sans',Arial,sans-serif !important;}
body.lesson-only-page .lesson-page[data-chapter="1"].sound-application-page .interactive-content p, body.lesson-only-page .lesson-page[data-chapter="1"].sound-application-page .interactive-content span, body.lesson-only-page .lesson-page[data-chapter="1"].sound-application-page .interactive-content label, body.lesson-only-page .lesson-page[data-chapter="1"].sound-application-page .interaction-feedback{font-size:14px !important;
  line-height:1.4 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#6E6B63 !important;}
body.lesson-only-page .lesson-page[data-chapter="1"].sound-application-page .interactive-content strong{font-size:12px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#6E6B63 !important;}
body.lesson-only-page .lesson-page[data-chapter="1"].sound-application-page .interactive-content button{font-family:'DM Sans',Arial,sans-serif !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  text-transform:none !important;}

/* Chapter 1 Page 7 — clean amplitude application rebuild */
body.lesson-only-page .ch1-p7-rebuilt .ch1-p7-copy{
  width:min(820px,88vw);
  max-width:820px;
  margin:0 auto;
  text-align:center;
}
body.lesson-only-page .ch1-p7-rebuilt .ch1-p7-copy p{
  margin:8px auto;
  font-size:19px;
  line-height:1.55;
}

body.lesson-only-page .ch1-p7-rebuilt .ch1-p7-amplitude-demo{
  width:min(720px,84vw);
  max-width:720px;
  margin:22px auto 0;
  text-align:center;
}

body.lesson-only-page .ch1-p7-rebuilt .ch1-p7-wave-card{
  width:100%;
  margin:0 auto;
}
body.lesson-only-page .ch1-p7-rebuilt .ch1-p7-wave-card svg{
  display:block;
  width:100%;
  height:190px;
  overflow:visible;
}
body.lesson-only-page .ch1-p7-rebuilt #ch1P7WavePath{
  fill:none;
  stroke:#8B7352;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:d .28s ease;
}

body.lesson-only-page .ch1-p7-rebuilt .ch1-p7-level-label{
  margin-top:2px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.10em;
  color:#6E6B63;
}

body.lesson-only-page .ch1-p7-rebuilt .ch1-p7-controls{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:14px;
}
body.lesson-only-page .ch1-p7-rebuilt .ch1-p7-controls button{
  min-width:92px;
  border:1px solid rgba(110,107,99,.28);
  border-radius:999px;
  background:transparent;
  padding:9px 14px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:12px;
  color:#2A2926;
  cursor:pointer;
}
body.lesson-only-page .ch1-p7-rebuilt .ch1-p7-controls button.active{
  border-color:#8B7352;
  background:rgba(139,115,82,.10);
}

body.lesson-only-page .ch1-p7-rebuilt .ch1-p7-feedback{
  min-height:24px;
  margin-top:11px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:13px;
  line-height:1.35;
  color:#6E6B63;
}

/* Chapter 1 Page 8 — clean frequency application rebuild */
body.lesson-only-page .ch1-p8-rebuilt .ch1-p8-copy{
  width:min(820px,88vw);
  max-width:820px;
  margin:0 auto;
  text-align:center;
}
body.lesson-only-page .ch1-p8-rebuilt .ch1-p8-copy p{
  margin:8px auto;
  font-size:19px;
  line-height:1.55;
}

body.lesson-only-page .ch1-p8-rebuilt .ch1-p8-frequency-demo{
  width:min(720px,84vw);
  max-width:720px;
  margin:22px auto 0;
  text-align:center;
}

body.lesson-only-page .ch1-p8-rebuilt .ch1-p8-wave-card svg{
  display:block;
  width:100%;
  height:190px;
  overflow:visible;
}
body.lesson-only-page .ch1-p8-rebuilt #ch1P8WavePath{
  fill:none;
  stroke:#8B7352;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body.lesson-only-page .ch1-p8-rebuilt .ch1-p8-level-label{
  margin-top:2px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.10em;
  color:#6E6B63;
}

body.lesson-only-page .ch1-p8-rebuilt .ch1-p8-controls{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:14px;
}
body.lesson-only-page .ch1-p8-rebuilt .ch1-p8-controls button{
  min-width:118px;
  border:1px solid rgba(110,107,99,.28);
  border-radius:999px;
  background:transparent;
  padding:9px 14px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:12px;
  color:#2A2926;
  cursor:pointer;
}
body.lesson-only-page .ch1-p8-rebuilt .ch1-p8-controls button.active{
  border-color:#8B7352;
  background:rgba(139,115,82,.10);
}

body.lesson-only-page .ch1-p8-rebuilt .ch1-p8-feedback{
  min-height:24px;
  margin-top:11px;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:13px;
  line-height:1.35;
  color:#6E6B63;
}


/* Shared Review component — canonical layout approved from Chapter 6.
   All chapter Review pages use this single visual system; only lesson copy varies. */
.lesson-only-page .shared-review-page .shared-review-subtitle{
  margin:3px 0 0;
  font-size:13px;
  line-height:1.4;
  color:#8f8780;
}
.lesson-only-page .shared-review-page .shared-review-progressive{
  width:min(760px,82vw);
  margin:18px auto 14px;
  display:grid;
  gap:10px;
  text-align:left;
}
.lesson-only-page .shared-review-page .shared-review-item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  align-items:center;
  column-gap:14px;
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-card);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s ease,transform .45s ease;
}
.lesson-only-page .shared-review-page .shared-review-item.revealed{
  opacity:1;
  transform:none;
}
.lesson-only-page .shared-review-page .shared-review-item span{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#E5E2DC;
  color:var(--navy);
  font-size:9px;
  line-height:1;
  letter-spacing:.08em;
}
.lesson-only-page .shared-review-page .shared-review-item p{
  margin:0;
  font:17px/1.4 "Playfair Display",Georgia,serif;
  color:var(--navy);
}
.lesson-only-page .shared-review-page .shared-review-item::after{
  content:"";
  width:42px;
  height:1px;
}


/* Chapter 5 · Page 2 — keep pitch label and descriptor on two lines. */
.lesson-page[data-page-role="pitchheight-frequency"] .ch5-p2-frequency .reading-frequency-item strong,
.lesson-page[data-page-role="pitchheight-frequency"] .ch5-p2-frequency .reading-frequency-item span{
  display:block!important;
  text-align:center!important;
}


/* Chapter 4 · Page 4 — everyday-name descriptor lives in the static caption, not the animation. */
.lesson-page[data-page-role="hearing-middle"] .p4-v168-caption small{
  font-size:.78em;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:#6E6B63;
}


/* Chapter 7 — Timbre. Scoped lesson components only; global lesson chrome/typography remains canonical. */
.timbre-only-page .ch7-intro-copy{max-width:760px;margin:8px auto 24px;text-align:center;font-size:18px;line-height:1.55}.timbre-only-page .ch7-intro-copy p{margin:8px 0}
.ch7-signature-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:min(1000px,86vw);margin:0 auto}.ch7-signature-card{border:1px solid #d8d2c5;background:rgba(255,255,255,.2);padding:18px;cursor:pointer;color:#14283b;font-family:inherit}.ch7-signature-card:hover,.ch7-signature-card.playing{border-color:#8B7352}.ch7-signature-card>span{display:block;font:700 10px Arial;letter-spacing:.18em}.ch7-signature-card small{font:10px Arial;color:#8f8780;letter-spacing:.08em}.ch7-signature-card svg{width:100%;height:82px;overflow:visible}.ch7-signature-card path{fill:none;stroke:#14283b;stroke-width:2.3;vector-effect:non-scaling-stroke}.ch7-signature-card.playing path{stroke-dasharray:7 5;animation:ch7dash .8s linear infinite}@keyframes ch7dash{to{stroke-dashoffset:-24}}.ch7-key-line{text-align:center;margin:20px auto 0;font-size:17px}
.ch7-instrument-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:min(1040px,88vw);margin:24px auto 18px}.ch7-instrument-button{height:205px;border:1px solid #d8d2c5;background:rgba(255,255,255,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;color:#14283b;font-family:inherit}.ch7-instrument-button:hover,.ch7-instrument-button.playing{border-color:#8B7352}.ch7-instrument-button strong{font:700 10px Arial;letter-spacing:.16em}.ch7-instrument-button>span{font:11px Arial;color:#8f8780}.ch7-instrument-button>i{width:42px;height:3px;background:#d8d2c5;position:relative;overflow:hidden}.ch7-instrument-button.playing>i:after{content:"";position:absolute;inset:0;background:#8B7352;animation:ch7scan .65s linear infinite}@keyframes ch7scan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}.ch7-instrument-photo{width:128px;height:108px;display:flex;align-items:center;justify-content:center;overflow:visible}.ch7-instrument-photo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}.ch7-compare-line{display:flex;justify-content:center;gap:42px;font:10px Arial;letter-spacing:.14em;color:#8f8780}.ch7-compare-line b{color:#14283b}.ch7-instruction{text-align:center;margin:17px 0 5px;color:#8f8780}.ch7-repeat-all{display:block;margin:0 auto;border:0;background:transparent;padding:9px 18px;cursor:pointer;color:#14283b;font:700 10px Arial;letter-spacing:.14em}
.ch7-character-lab{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;width:min(1050px,88vw);margin:26px auto}.ch7-character-lab button{height:215px;border:1px solid #d8d2c5;background:rgba(255,255,255,.2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;color:#14283b}.ch7-character-lab strong{font:700 10px Arial;letter-spacing:.16em}.ch7-character-lab small{color:#8f8780;font:11px Arial}.ch7-sound-mark{height:76px;width:140px;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 8px}.ch7-sound-mark i{display:block;background:currentColor}.ch7-sound-mark.airy{color:#8f9898;gap:13px}.ch7-sound-mark.airy i{width:3px;border-radius:99px;opacity:.55}.ch7-sound-mark.airy i:nth-child(1){height:25px}.ch7-sound-mark.airy i:nth-child(2){height:48px;opacity:.75}.ch7-sound-mark.airy i:nth-child(3){height:34px;opacity:.45}.ch7-sound-mark.airy i:nth-child(4){height:18px;opacity:.3}.ch7-sound-mark.rounded{color:#8d7862;position:relative}.ch7-sound-mark.rounded i{position:absolute;border-radius:50%;background:transparent;border:2px solid currentColor}.ch7-sound-mark.rounded i:nth-child(1){width:68px;height:68px;opacity:.35}.ch7-sound-mark.rounded i:nth-child(2){width:46px;height:46px;opacity:.65}.ch7-sound-mark.rounded i:nth-child(3){width:22px;height:22px}.ch7-sound-mark.crisp{color:#747b83;gap:7px}.ch7-sound-mark.crisp i{width:3px;transform:skew(-18deg)}.ch7-sound-mark.crisp i:nth-child(1){height:26px}.ch7-sound-mark.crisp i:nth-child(2){height:58px}.ch7-sound-mark.crisp i:nth-child(3){height:38px}.ch7-sound-mark.crisp i:nth-child(4){height:18px}.ch7-sound-mark.deep{color:#5f5a57;position:relative;align-items:flex-end}.ch7-sound-mark.deep i{position:absolute;border-radius:50% 50% 45% 45%}.ch7-sound-mark.deep i:nth-child(1){width:78px;height:34px;bottom:15px;opacity:.22}.ch7-sound-mark.deep i:nth-child(2){width:54px;height:27px;bottom:20px;opacity:.45}.ch7-sound-mark.deep i:nth-child(3){width:30px;height:20px;bottom:24px;opacity:.8}.ch7-feedback{text-align:center;min-height:22px;margin-top:12px;color:#8f8780;font-size:14px}.ch7-note-callout{max-width:820px;margin:16px auto 0;padding:11px 18px;border-top:1px solid #d8d2c5;text-align:center;color:#8f8780;font-size:14px;line-height:1.45}
.ch7-quiz,.ch7-simple-quiz{max-width:1050px;margin:18px auto 0;text-align:center}.ch7-round{font:10px Arial;letter-spacing:.12em;color:#8f8780;margin-bottom:12px}.ch7-quiz-row{margin-top:14px;margin-bottom:10px}.ch7-quiz-row .ch7-instrument-button{height:190px}.ch7-listen{min-width:220px;border:1px solid #a9a29a;background:transparent;padding:12px 22px;font-family:inherit;font-weight:700;letter-spacing:.04em;cursor:pointer;color:#14283b}.ch7-listen:disabled{opacity:.5}.ch7-choices{display:grid;gap:10px;margin:20px auto 12px;max-width:650px}.ch7-choices.two{grid-template-columns:repeat(2,1fr);max-width:470px}.ch7-choices.three{grid-template-columns:repeat(3,1fr)}.ch7-choices button{min-height:52px;border:1px solid #bdb6ad;background:transparent;padding:9px 12px;font-family:inherit;font-weight:650;cursor:pointer;color:#14283b}.ch7-choices button small{display:block;font-weight:400;margin-top:4px;color:#8f8780}.ch7-instrument-button.correct,.ch7-choices button.correct{border-color:#517052!important;background:rgba(81,112,82,.08)!important}.ch7-instrument-button.wrong,.ch7-choices button.wrong{border-color:#9c5550!important;background:rgba(156,85,80,.07)!important}.ch7-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}.ch7-dots i{width:6px;height:6px;border-radius:50%;background:#d8d2c5}.ch7-dots i.done{background:#8B7352}.ch7-pair-now{font:11px Arial;letter-spacing:.1em;color:#8f8780;margin:11px 0}.ch7-review-prompt{max-width:680px;margin:16px auto 20px;font-size:22px;line-height:1.35;font-weight:400}
@media(max-width:900px){.ch7-instrument-row,.ch7-character-lab{grid-template-columns:repeat(2,1fr)}.ch7-signature-demo{grid-template-columns:1fr}.ch7-choices.three{grid-template-columns:1fr}}


/* v308 Dolce ecosystem theme alignment — visual only; lesson structure/behavior unchanged. */


/* v315 surface refinement: outer lesson canvas only; lesson article surfaces/layout untouched. */
body.lesson-only-page{background:#FCFCFA!important;}

/* v316 lesson navigation surface correction.
   The outer canvas became near-white in v315, exposing the older cream navigation
   strip and filled Next button. Keep navigation visually surface-free. */
body.lesson-only-page .lesson-navigation{
  background:transparent!important;
}
body.lesson-only-page .lesson-navigation .page-button,
body.lesson-only-page .lesson-navigation .page-button.secondary{
  background:transparent!important;
  color:var(--navy)!important;
}

/* v317 lesson chrome cleanup — remove legacy cream surfaces from controls only. */
body.lesson-only-page .page-progress{
  background:transparent!important;
}
body.lesson-only-page .page-progress-dots span{
  background:transparent;
}
body.lesson-only-page .page-progress-dots span.active,
body.lesson-only-page .page-progress-dots span.complete{
  background:var(--rose);
}
body.lesson-only-page .lesson-close,
body.lesson-only-page .icon-button{
  background:transparent!important;
}
body.lesson-only-page .lesson-close:hover,
body.lesson-only-page .icon-button:hover{
  background:transparent!important;
}

/* v318 lesson chrome cleanup — remove remaining legacy surface fills.
   These are shell-only overrides; lesson content/layout remains unchanged. */
body.lesson-only-page .lesson-status-stack{
  background:transparent!important;
}
body.lesson-only-page .lesson-circle-button,
body.lesson-only-page .lesson-toc-button{
  background:transparent!important;
}
body.lesson-only-page .lesson-circle-button:hover,
body.lesson-only-page .lesson-toc-button:hover{
  background:transparent!important;
}
/* Restore the primary Next Page action to canonical Portal navy. */
body.lesson-only-page .lesson-navigation .page-button:not(.secondary),
body.lesson-only-page #nextPage{
  background:#010A18!important;
  border-color:#010A18!important;
  color:#fff!important;
}

/* v319 lesson study-surface refinement — scoped only to the lesson canvas.
   Keep lesson chrome transparent so legacy cream fills cannot reappear. */
body.lesson-only-page,
body.lesson-only-page .lesson-page{
  background:#F5F5F2!important;
}
body.lesson-only-page .lesson-status-stack,
body.lesson-only-page .page-progress,
body.lesson-only-page .lesson-circle-button,
body.lesson-only-page .lesson-toc-button,
body.lesson-only-page .lesson-navigation,
body.lesson-only-page .lesson-navigation .page-button.secondary{
  background:transparent!important;
}
/* Primary Next Page action remains canonical Portal navy. */
body.lesson-only-page .lesson-navigation .page-button:not(.secondary),
body.lesson-only-page #nextPage{
  background:#010A18!important;
  border-color:#010A18!important;
  color:#fff!important;
}


/* v324 canonical lesson surface: profile dropdown and Review cards share one source of truth.
   Explicitly remove any inherited/legacy background image or paper fill. */
body.lesson-only-page .profile-dropdown{
  background:#FAFAF8!important;
  background-image:none!important;
  box-shadow:none!important;
}
body.lesson-only-page .shared-review-page .shared-review-item{
  background:var(--surface-card)!important;
  background-image:none!important;
}


/* v336 — Canonical lesson typography.
   Chapter 1 is the source of truth for the curriculum text hierarchy.
   New chapters inherit these roles by default; chapter CSS should override only when a
   genuinely different visual/notation treatment is intentional. */
:root{
  --lesson-body-font:'DM Sans',Arial,sans-serif;
  --lesson-display-font:'Playfair Display',Georgia,serif;
  --lesson-copy-size:19px;
  --lesson-copy-line:1.55;
  --lesson-lead-size:22px;
  --lesson-small-size:14px;
  --lesson-label-size:12px;
  --lesson-feedback-size:13px;
}
body.lesson-only-page .lesson-page{font-family:var(--lesson-body-font);}
body.lesson-only-page .lesson-page .page-heading h3,
body.lesson-only-page .lesson-page .chapter-page h2,
body.lesson-only-page .lesson-page .simple-application-title,
body.lesson-only-page .lesson-page .sound-live-application h4,
body.lesson-only-page .lesson-page .quiz-instrument-name{font-family:var(--lesson-display-font);}
/* Standard prose containers mirror Chapter 1's 19px / 1.55 reading text. */
body.lesson-only-page .lesson-page .travel-copy,
body.lesson-only-page .lesson-page .hearing-copy,
body.lesson-only-page .lesson-page .sound-clean-copy p,
body.lesson-only-page .lesson-page .sound-intro-copy p,
body.lesson-only-page .lesson-page .instrument-match-copy{
  font-family:var(--lesson-body-font);
  font-size:var(--lesson-copy-size);
  line-height:var(--lesson-copy-line);
}
/* Canonical small instructional/feedback roles from Chapter 1. */
body.lesson-only-page .lesson-page .interaction-feedback,
body.lesson-only-page .lesson-page .ch1-p6-feedback,
body.lesson-only-page .lesson-page .ch1-p7-feedback,
body.lesson-only-page .lesson-page .ch1-p8-feedback{font-family:var(--lesson-body-font);}