/* All rules are scoped to the lesson mounted inside the existing app shell. */
.ipa-lesson{--ipa-green:#236747;--ipa-line:#d3ddd3;color:var(--text,#183e31);min-width:0}.ipa-lesson *{box-sizing:border-box}.ipa-lesson button,.ipa-lesson input,.ipa-lesson select,.ipa-lesson textarea{font:inherit}.ipa-lesson button{cursor:pointer}.ipa-heading{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:20px}.ipa-heading h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(28px,3vw,44px);margin:10px 0}.ipa-heading p{max-width:700px;color:var(--muted,#607166);line-height:1.6}.ipa-back{border:0!important;background:transparent!important;padding:0!important;color:var(--ipa-green)!important}.ipa-workbench{display:grid;grid-template-columns:minmax(0,1fr) 360px;border:1px solid var(--ipa-line);border-radius:14px;overflow:hidden;background:#fafbf5}.ipa-explorer{min-width:0}.ipa-toolbar,.ipa-map-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 17px;border-bottom:1px solid var(--ipa-line);background:#fffdf7}.ipa-toolbar>div,.ipa-map-tools>div{display:flex;align-items:center;gap:6px}.ipa-toolbar input{width:210px;min-width:0;border:1px solid var(--ipa-line);border-radius:7px;padding:9px}.ipa-lesson button{border:1px solid var(--ipa-line);border-radius:7px;padding:8px 12px;background:#fffdf7;color:#22513c;font-size:12px}.ipa-lesson button:hover{background:#e2eddc}.ipa-lesson button:disabled{opacity:.5;cursor:not-allowed}.ipa-lesson button:focus-visible,.ipa-lesson input:focus-visible,.ipa-lesson select:focus-visible,.ipa-lesson textarea:focus-visible{outline:3px solid #c28a37;outline-offset:3px}.ipa-toolbar button[aria-pressed=true]{background:#236747;color:white}.ipa-map{height:min(69vh,740px);min-height:480px;position:relative;overflow:hidden;touch-action:none;cursor:grab;background-color:#f7f9f1;background-image:radial-gradient(#95ad873d 1px,transparent 1px);background-size:20px 20px}.ipa-map:active{cursor:grabbing}.ipa-world{position:absolute;left:0;top:0;transform-origin:0 0;width:1px;height:1px;will-change:transform}.ipa-connections{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}.ipa-connections path{stroke:#8caa80;stroke-width:2.5;fill:none}.ipa-lesson .ipa-bubble{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;background:#e7efd9;border:1.5px solid #93b386;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:7px;transition:left .38s ease,top .38s ease,opacity .28s ease,background .18s;box-shadow:0 3px 10px #26482b0b}.ipa-bubble strong{font-size:13px;font-weight:600;line-height:1.18;overflow-wrap:anywhere}.ipa-bubble small{font-size:10px;line-height:1.15;max-width:82px;overflow:hidden;text-overflow:ellipsis}.ipa-lesson .ipa-family{width:130px;height:130px;background:#cdddba}.ipa-family strong{font-size:18px}.ipa-lesson .ipa-root{width:150px;height:150px;background:#23513e;color:white;border:5px solid #dce9d1}.ipa-root strong{font-size:23px}.ipa-lesson .ipa-sound{background:#fffaf0}.ipa-sound strong{font-family:'DejaVu Sans',Arial,sans-serif;font-size:30px;font-weight:400}.ipa-lesson .ipa-selected{outline:3px solid #4c7940;outline-offset:5px}.ipa-visited:after{content:'✓';position:absolute;right:1px;top:1px;border-radius:50%;width:20px;height:20px;background:#236747;color:white;font-size:12px}.ipa-map-tools{border-top:1px solid var(--ipa-line);border-bottom:0;flex-wrap:wrap}.ipa-map-tools button{padding:7px 10px;font-size:11px}.ipa-zoom{font-size:11px;min-width:38px;text-align:center}.ipa-map-help{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#667860;padding:9px 17px;background:#fffdf7}.ipa-progress{white-space:nowrap}.ipa-detail{border-left:1px solid var(--ipa-line);background:#fffdf7;padding:22px;max-height:calc(min(69vh,740px) + 140px);overflow:auto;overscroll-behavior:contain}.ipa-detail h2{font-family:Georgia,serif;font-weight:400;font-size:33px;margin:15px 0}.ipa-detail h3{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;margin:23px 0 11px}.ipa-detail p{font-size:13px;line-height:1.6}.ipa-sound-heading{display:flex;align-items:center;gap:17px}.ipa-sound-heading h2{font-family:Arial,sans-serif;font-size:59px;white-space:nowrap;margin:0}.ipa-sound-heading .status{display:inline-block;font-size:10px;margin:0 5px 5px 0;background:#e6eddd;padding:4px 7px;border-radius:4px}.ipa-sound-heading p{font-size:11px;margin:3px 0}.ipa-word-list{display:grid;gap:8px}.ipa-word{display:grid;grid-template-columns:1fr 1.1fr 20px;align-items:center;border-bottom:1px solid #e8e9dd;padding-bottom:8px;gap:6px}.ipa-word button{text-align:left;border:0!important;padding:5px!important;font-size:14px!important}.ipa-word a{font-size:13px;color:#527957;text-decoration:none}.ipa-transcription{font-family:'DejaVu Sans',Arial,sans-serif;font-size:16px;color:#58695f;overflow-wrap:anywhere;font-weight:400}.ipa-transcription b{color:#164b2f;font-weight:800;background:#edf0c7;border-radius:3px;padding:1px}.ipa-audio-note{display:block;font-size:10px!important;line-height:1.5;color:#697a70;margin-top:10px}.ipa-anatomy{margin:18px 0;border:1px solid var(--ipa-line);border-radius:9px;overflow:hidden;background:white}.ipa-anatomy figcaption{padding:12px;font-size:12px}.ipa-anatomy figcaption span{display:block;font-size:10px;color:#657767;margin-top:4px}.ipa-anatomy svg{display:block;width:100%;max-height:325px;background:white}.ipa-anatomy p{font-size:10px;margin:8px 12px;line-height:1.5}.ipa-anatomy small{display:block;font-size:9px;padding:0 12px 12px;line-height:1.6}.ipa-anatomy a,.ipa-sources a{color:#276544}.ipa-practice{border-top:1px solid var(--ipa-line);padding:15px 0;margin-top:20px}.ipa-practice summary{cursor:pointer;font-size:13px}.ipa-detail-nav,.ipa-contrast{display:flex;gap:9px;justify-content:space-between}.ipa-results{height:min(69vh,740px);min-height:480px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));align-content:start;gap:10px;padding:22px}.ipa-results button{display:flex;align-items:center;flex-direction:column;gap:8px;min-height:80px}.ipa-results strong{font-family:Arial,sans-serif;font-size:28px;font-weight:400}.ipa-results span{font-size:11px}.ipa-status:not(:empty){padding:12px;background:#f4edca;margin:12px 0;border-radius:7px}.ipa-sources{font-size:12px;color:#5c6e62;margin-top:20px;max-width:980px}.ipa-sources summary{cursor:pointer}.ipa-sources p{line-height:1.6}.ipa-lesson .ipa-editor{position:fixed;inset:0;margin:auto;width:min(710px,94vw);max-height:90vh;overflow:auto;border:1px solid var(--ipa-line);border-radius:15px;padding:25px;background:#fffdf7;color:#234c37;z-index:1000}.ipa-editor::backdrop{background:#133e3277;backdrop-filter:blur(3px)}.ipa-edit-head,.ipa-edit-actions{display:flex;justify-content:space-between;align-items:center;gap:15px}.ipa-editor h2{font-family:Georgia,serif;font-weight:400;margin:5px 0 12px}.ipa-editor p{font-size:12px;line-height:1.6}.ipa-editor label{display:block;font-size:12px;margin:15px 0}.ipa-editor input,.ipa-editor textarea,.ipa-editor select{display:block;width:100%;border:1px solid var(--ipa-line);border-radius:6px;padding:10px;background:white;color:inherit;margin-top:6px}.ipa-editor textarea{min-height:80px;resize:vertical}.ipa-editor fieldset{border:1px solid var(--ipa-line);border-radius:7px;margin:16px 0;padding:14px}.ipa-editor legend{font-size:12px}.ipa-example-edit{display:grid;grid-template-columns:1fr 1fr 35px;gap:8px;margin-bottom:8px}.ipa-example-edit input{min-width:0}.ipa-example-edit button{padding:5px}.ipa-edit-actions{padding-top:14px;border-top:1px solid var(--ipa-line);font-size:12px}.ipa-lesson [hidden]{display:none!important}.interactive-library-template{padding:18px;border:1px solid #ccdbc5;background:#f1f5e9;border-radius:12px;margin:18px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}.interactive-library-template h2{font-size:18px;margin:0 0 5px}.interactive-library-template p{font-size:13px;margin:0;color:var(--muted)}@media(max-width:1180px){.ipa-workbench{grid-template-columns:minmax(0,1fr) 310px}.ipa-detail{padding:16px}.ipa-toolbar{flex-wrap:wrap}.ipa-toolbar input{width:100%}.ipa-heading{align-items:flex-start;flex-direction:column}}@media(max-width:850px){.ipa-workbench{grid-template-columns:1fr}.ipa-detail{border-left:0;border-top:1px solid var(--ipa-line);max-height:none}.ipa-map{height:540px;min-height:420px}.ipa-results{height:440px;min-height:0}.ipa-anatomy{max-width:380px}.ipa-map-help{flex-wrap:wrap}.interactive-library-template{align-items:flex-start;flex-direction:column}.ipa-heading h1{font-size:31px}.ipa-map-tools{padding:10px}.ipa-editor{padding:16px!important}}@media(prefers-reduced-motion:reduce){.ipa-bubble{transition:none!important}}

#sound-map-host{padding:28px;max-width:1800px;margin:0 auto;width:100%}@media(max-width:760px){#sound-map-host{padding:16px}}

/* Readable at the width of the lesson, including when the workspace sidebar is open. */
#sound-map-host{container-type:inline-size;padding:24px;max-width:1680px}
.ipa-lesson{font-size:16px;line-height:1.55}
.ipa-heading{gap:16px;margin-bottom:20px;align-items:flex-start}
.ipa-heading h1{font-family:inherit;font-size:clamp(26px,2.5vw,36px);font-weight:650;line-height:1.2;margin:12px 0 8px;letter-spacing:-.025em}
.ipa-heading p{font-size:16px;line-height:1.55;margin:0;max-width:65ch}
.ipa-heading .head-actions{display:flex;flex-flow:row wrap;gap:8px;width:auto;flex-shrink:0;margin:0}
.ipa-heading .head-actions>button{flex:0 1 auto}
.ipa-lesson button{font-size:14px;line-height:1.35;min-height:40px;padding:9px 12px}
.ipa-workbench{grid-template-columns:minmax(0,1fr) 400px}
.ipa-toolbar{gap:12px;padding:12px;flex-wrap:wrap}
.ipa-toolbar input{width:auto;flex:1 1 180px;font-size:16px;min-height:42px;padding:9px 12px}
.ipa-toolbar>div{flex-shrink:0}
.ipa-map{height:480px;min-height:380px}
.ipa-lesson .ipa-bubble{width:120px;height:120px;gap:6px;padding:12px}
.ipa-bubble strong{font-size:16px;line-height:1.25;overflow-wrap:normal}
.ipa-bubble small{font-size:12px;line-height:1.25;max-width:104px}
.ipa-lesson .ipa-family{width:142px;height:142px}
.ipa-family strong{font-size:20px}
.ipa-lesson .ipa-root{width:160px;height:160px}
.ipa-root strong{font-size:24px}
.ipa-sound strong{font-size:38px}
.ipa-map-tools{padding:12px;gap:8px}
.ipa-map-tools button{font-size:13px;padding:8px 10px}
.ipa-zoom{font-size:13px;min-width:44px}
.ipa-map-help{font-size:12px;line-height:1.5;padding:10px 14px;flex-wrap:wrap;gap:6px}
.ipa-detail{padding:24px;max-height:690px}
.ipa-detail h2{font-family:inherit;font-size:28px;font-weight:650;line-height:1.25;margin:12px 0}
.ipa-detail h3{font-size:14px;letter-spacing:.025em;text-transform:none;margin:24px 0 12px}
.ipa-detail p{font-size:16px;line-height:1.65;margin:12px 0}
.ipa-detail .eyebrow{font-size:12px;letter-spacing:.06em}
.ipa-sound-heading h2{font-family:'DejaVu Sans',Arial,sans-serif;font-size:52px;font-weight:400;margin:0}
.ipa-sound-heading .status{font-size:12px;padding:4px 8px}
.ipa-sound-heading p{font-size:14px;margin:4px 0}
.ipa-word{grid-template-columns:minmax(90px,1fr) minmax(0,1.25fr) 32px;gap:8px;padding:8px 0}
.ipa-word button{font-size:16px!important;padding:6px 0!important}
.ipa-word a{font-size:18px;display:grid;place-items:center;min-height:40px}
.ipa-transcription{font-size:19px;line-height:1.5;overflow-wrap:normal}
.ipa-audio-note{font-size:13px!important;line-height:1.6}
.ipa-anatomy figcaption{font-size:15px;padding:16px}
.ipa-anatomy figcaption span{font-size:13px}
.ipa-anatomy svg{max-height:380px}
.ipa-anatomy p{font-size:13px;line-height:1.6;margin:12px 16px}
.ipa-anatomy small{font-size:12px;padding:0 16px 16px;line-height:1.6}
.ipa-practice summary{font-size:16px}
.ipa-results{height:480px;min-height:380px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));padding:16px;gap:12px}
.ipa-results button{min-height:104px}
.ipa-results strong{font-size:34px}
.ipa-results span{font-size:14px}
.ipa-sources{font-size:14px;line-height:1.65}
.ipa-editor p,.ipa-editor label,.ipa-editor legend,.ipa-edit-actions{font-size:14px}
.ipa-editor input,.ipa-editor textarea,.ipa-editor select{font-size:16px}
@container(max-width:1050px){
 .ipa-heading{flex-direction:column}
 .ipa-workbench{grid-template-columns:1fr}
 .ipa-detail{border-left:0;border-top:1px solid var(--ipa-line);max-height:none;padding:24px}
 .ipa-detail>p{max-width:70ch}
 .ipa-anatomy{max-width:540px}
 .ipa-map{height:420px}
}
@container(max-width:480px){
 .ipa-heading h1{font-size:26px}
 .ipa-heading p{font-size:15px}
 .ipa-heading{gap:12px;margin-bottom:16px}
 .ipa-map{height:350px;min-height:350px}
 .ipa-toolbar>div{width:100%}
 .ipa-toolbar>div button{flex:1}
 .ipa-detail{padding:18px}
 .ipa-word{grid-template-columns:minmax(80px,1fr) minmax(0,1.2fr) 28px}
 .ipa-transcription{font-size:18px}
 .ipa-map-tools{gap:6px}
}
@media(max-width:760px){#sound-map-host{padding:16px}}
.ipa-anatomy-tabs{display:flex;gap:8px;padding:0 16px 12px}
.ipa-anatomy-tabs button[aria-pressed=true]{background:#236747;color:white}
.ipa-model-canvas{height:390px;width:100%;overflow:hidden;touch-action:none}
.ipa-model-canvas canvas{display:block;width:100%;height:100%}
.ipa-model-controls{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px 4px;align-items:center}
.ipa-model-controls label{display:flex;gap:6px;align-items:center;font-size:13px}
.ipa-model-controls select{max-width:110px;padding:8px;border:1px solid var(--ipa-line);border-radius:6px;background:white;font-size:14px}
.ipa-model-scrub{display:flex;align-items:center;gap:12px;padding:8px 16px;font-size:14px}
.ipa-model-scrub input{min-width:0;flex:1;accent-color:#236747}
.ipa-model-layers{display:flex;gap:12px;flex-wrap:wrap;padding:8px 16px;font-size:13px}
.ipa-model-layers label{display:flex;align-items:center;gap:5px}
.ipa-model-layers input{width:16px;height:16px;accent-color:#236747}
.ipa-model-stage{font-weight:650;color:#23513e}
.ipa-model-key,.ipa-model-note{color:#53675c}
.ipa-model-host:fullscreen{background:#fffdf7;padding:20px;overflow:auto;color:#234c37}
.ipa-model-host:fullscreen .ipa-model-canvas{max-width:1100px;margin:auto}
.ipa-model-host:fullscreen>p,.ipa-model-host:fullscreen>div:not(.ipa-model-canvas),.ipa-model-host:fullscreen>label{max-width:1000px;margin-left:auto;margin-right:auto}
@container(min-width:700px) and (max-width:1050px){
 .ipa-detail:has(.ipa-detail-copy){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0 28px;align-items:start}
 .ipa-detail-copy{grid-column:1;grid-row:1}
 .ipa-detail .ipa-anatomy{grid-column:2;grid-row:1 / span 2;margin:0;width:100%}
 .ipa-detail-footer{grid-column:1;grid-row:2}
}
.ipa-detail .ipa-model-title{margin:4px 16px 12px;font-size:18px;text-transform:none;letter-spacing:0}
.ipa-model-host:fullscreen .ipa-model-title{max-width:1000px;margin:0 auto 12px;font-size:24px}
.ipa-model-views{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 0}
.ipa-model-views button{font-size:13px;flex:1 1 125px}
.ipa-model-views button[aria-pressed=true]{background:#236747;color:white}
.ipa-model-lip-note{background:#f8e9e6;border-left:3px solid #bd5960;padding:10px 12px;border-radius:4px;color:#733c43}
.ipa-model-references a{color:#276544}