*{box-sizing:border-box} :root{font-family:Arial,Helvetica,sans-serif;color:#24221e;background:#f3efe7;font-synthesis:none}body{margin:0}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #996946;outline-offset:4px}button[hidden],[hidden]{display:none!important}button{color:inherit}.shell{max-width:1250px;margin:auto;padding:0 38px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:24px 0 35px}.brand{font-size:12px;color:#857c71;letter-spacing:1px}.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#fffdf8;border:1px solid #e1d8cb;border-radius:40px;padding:14px 19px;min-height:45px;font-size:14px;font-weight:600}.pill:hover:not(:disabled){border-color:#635b51}.plain{border:0;background:none;padding:8px 0;min-height:38px;font-size:14px;display:inline-flex;gap:10px;align-items:center}.layout{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0,1.15fr);gap:30px}.model-column{padding-top:4px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:1.25px;color:#80786e;margin:0 0 15px}.model-column h1{font-family:Georgia,'Times New Roman',serif;font-size:72px;line-height:1.05;font-weight:500;letter-spacing:-2px;margin:0 0 16px}.intro{font-size:15px;color:#7d7468;line-height:1.6;margin:0 0 21px}video{display:block;width:100%;aspect-ratio:16/9;border-radius:18px;background:#24221e;object-fit:contain}.model-caption{font-size:13px;line-height:1.6;color:#82796e;margin:12px 0 22px}.lesson-picker{display:flex;gap:8px}.lesson-picker button{font-size:17px;background:transparent;border:1px solid #dfd6c9;padding:8px 17px;border-radius:30px}.lesson-picker button[aria-current=true]{background:#24221e;color:#fffdf8;border-color:#24221e}.quiet{font-size:12px;color:#8a8175;line-height:1.6}#variation{max-width:380px}.stagebar{display:grid;grid-template-columns:.8fr .8fr 1.4fr;gap:9px;margin-bottom:25px}.stagebar button{text-align:left;min-width:0;padding:13px 12px;background:transparent;border:1px solid #e1d8cb;border-radius:17px;display:flex;flex-direction:column;gap:8px}.stagebar button[aria-current=true]{background:#fffdf8;border-color:#3c362d;box-shadow:0 5px 16px #30271906}.stagebar span{font-size:10px;letter-spacing:.6px;color:#80786e}.stagebar strong{font-size:13px;line-height:1.4;font-weight:600}.stagebar small{font-size:11px;color:#8a8175;margin-top:auto}.card{border:1px solid #e3dacd;border-radius:24px;background:#fffdf8;padding:30px;box-shadow:0 12px 40px #3c291409}.card .eyebrow{margin-bottom:10px}.card h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,3.8vw,51px);font-weight:500;letter-spacing:-1.2px;line-height:1.12;margin:0 0 10px}.ipa{font-family:Georgia,'Times New Roman',serif;font-size:23px;color:#8b8277;margin:0 0 17px;line-height:1.45}.tip{font-size:14px;line-height:1.6;color:#81776b;margin:0 0 23px;min-height:23px}.model-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.record-row{display:flex;gap:19px;align-items:center;margin:26px 0}.record-button{flex:none;border:0;background:#a82f26;color:white;border-radius:50%;width:76px;height:76px;display:grid;place-items:center;box-shadow:none}.record-button:hover:not(:disabled){background:#8c251e}.record-button svg{width:30px;height:30px}.record-button span{font-size:27px}.record-row strong{font-size:16px;font-weight:600}.record-row p{margin:7px 0 2px}.record-row>div>span{font-size:11px}.recording .record-button{animation:pulse 1.4s infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px #a82f2614}}#message{font-size:13px;line-height:1.5;color:#9f4538;margin:0 0 15px}#message:empty{display:none}.result{border-top:1px solid #e5ddd1;padding-top:24px;margin-top:20px;display:flex;gap:23px;align-items:center}.ring{flex:none;width:122px;height:122px;padding:13px;border-radius:50%;background:conic-gradient(#24221e var(--fill,0%),#e8e0d4 0);display:grid;place-items:center}.ring>div{background:#fffdf8;width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.ring strong{font-family:Georgia,serif;font-size:35px;font-weight:500;line-height:1.1}.ring span{font-size:10px;color:#8d8376;margin-top:5px}.result-copy h3{font-size:15px;line-height:1.5;margin:0 0 6px}.result-copy>p:not(.eyebrow){font-size:12px;line-height:1.65;color:#8a8074;margin:5px 0}.result-copy .eyebrow{font-size:9px}.score-button{border:0;background:#24221e;color:#fffdf8;border-radius:30px;font-size:14px;font-weight:600;padding:13px 21px;margin-top:21px;min-height:43px}.score-button:hover:not(:disabled){background:#494034}.consent{font-size:10px;margin:8px 0 0}.playback{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}.playback .pill{font-size:12px;padding:12px 16px;min-height:41px}.playback .plain{font-size:11px;color:#8f6550}#download{display:inline-block;margin-top:14px;text-underline-offset:3px}.recent{margin-top:23px}.recent-head{display:flex;align-items:center;justify-content:space-between}.recent-head h3{margin:0}.recent-head button{font-size:11px}.tries{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;min-height:110px}.tries:empty{display:none}.try{border:0;background:transparent;padding:8px 5px 0;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;height:128px;justify-content:end;border-radius:8px}.try .value{font-size:11px;color:#82786b}.try .bar{display:block;width:80%;max-width:38px;border-radius:5px 5px 0 0;background:#b0a99e;min-height:5px}.try[aria-pressed=true] .bar{background:#226c57}.try[aria-pressed=true] .value{color:#226c57;font-weight:700}.try .number{font-size:10px;color:#9e9588}.try:hover{background:#e9e2d766}#empty{margin:10px 0}#tries-hint{font-size:10px;margin:8px 0 0}details{margin:22px 0;color:#968b7d;font-size:11px;line-height:1.65}summary{cursor:pointer;color:#877b6d}footer{display:flex;justify-content:space-between;font-size:11px;color:#a69a88;padding:35px 0 25px}footer span{font-style:italic}.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0 100px}.library-card{padding:27px;border:1px solid #ddd1c1;border-radius:20px;background:#fffdf8;text-align:left}.library-card strong{display:block;font:50px Georgia,serif;margin:15px 0}.library-card small{font-size:12px;color:#928270}.library-card span{display:block;font-size:16px}#library h1{font:48px/1.1 Georgia,serif}#library>p:not(.eyebrow){color:#8c7c6b}dialog{background:#fffdf8;color:#24221e;border:1px solid #dfd2c1;border-radius:20px;max-width:550px;width:90%;padding:28px}dialog::backdrop{background:#2c251666}dialog textarea{display:block;width:100%;font:14px/1.6 Arial;padding:12px;border:1px solid #d8cabb;margin:15px 0;resize:vertical}dialog p{color:#807264}@media(max-width:900px){.shell{padding:0 25px}.layout{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:22px}.card{padding:22px}.ring{width:100px;height:100px;padding:10px}.ring strong{font-size:30px}.result{gap:15px}.stagebar{grid-template-columns:1fr 1fr 1.3fr}.stagebar strong{font-size:12px}.stagebar button{padding:11px 8px}.stagebar span{font-size:9px}.brand{display:none}}@media(max-width:680px){.shell{padding:0 18px}.topbar{padding:17px 0 25px}.topbar .pill{padding:11px 14px;font-size:12px}.plain{font-size:13px}.layout{display:flex;flex-direction:column;gap:20px}.model-column{display:grid;grid-template-columns:1fr 1.25fr;column-gap:20px;align-items:start}.model-column>.eyebrow{grid-column:1;grid-row:1;margin:0 0 8px;font-size:9px}.model-column h1{grid-column:1;grid-row:2;font-size:52px;margin:0 0 8px}.intro{display:none}.model-column video{grid-column:2;grid-row:1/4;border-radius:13px}.model-caption{grid-column:1/3;margin:12px 0 0;font-size:11px}.lesson-picker{grid-column:1;grid-row:3;gap:5px}.lesson-picker button{padding:5px 9px;font-size:14px}.model-column #variation{grid-column:1/3;margin:7px 0 0;font-size:10px}.stagebar{margin-bottom:15px;gap:7px}.stagebar button{border-radius:13px;padding:12px 10px}.stagebar strong{font-size:12px}.stagebar span{font-size:9px}.card{border-radius:20px;padding:23px 20px}.card h2{font-size:38px}.ipa{font-size:21px}.tip{font-size:13px}.model-actions .quiet{font-size:11px}.model-actions .pill{font-size:12px}.record-button{width:66px;height:66px}.result{gap:18px}.ring{width:105px;height:105px}.result-copy h3{font-size:14px}.score-button{width:100%}.playback .pill{flex:1;white-space:nowrap;padding:12px 10px}.library-grid{grid-template-columns:1fr;gap:12px;margin-bottom:30px}.library-card{padding:20px}.library-card strong{font-size:35px}#library h1{font-size:38px}footer{font-size:10px;padding-top:15px}.tries{gap:5px}.card .eyebrow{font-size:10px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* Liz's purple and pink identity, with the focused practice layout retained. */
:root{color:#352543;background:#faf8fd}.topbar{border-bottom:1px solid #ebe2f2;margin-bottom:27px;padding-bottom:22px}.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;color:#5d3976;letter-spacing:0}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#fff;background:linear-gradient(125deg,#8038ed,#e742a0);font:23px Georgia,serif}.eyebrow{color:#8b6e9e}.model-column h1{color:#7f3dbe}.intro,.tip{color:#816a8d}.model-caption,.quiet,.stagebar span,.stagebar small{color:#897394}.pill{background:#fff;border-color:#e6d8ef;color:#72488d}.pill:hover:not(:disabled){border-color:#b582d1;background:#fbf7ff}.plain{color:#6d4a83}.stagebar button{border-color:#e6dcef;background:#f7f2fc}.stagebar button[aria-current=true]{border-color:#b577dc;background:#fff;box-shadow:0 4px 16px #813db310}.stagebar strong{color:#583869}.card{background:#fff;border-color:#eaddf2;box-shadow:0 12px 40px #63388208}.card h2{color:#493153}.ipa{color:#947aa1}.record-button,.score-button{background:linear-gradient(115deg,#8138ed,#df419e);color:#fff;box-shadow:0 5px 14px #9d42bb1e}.record-button:hover:not(:disabled),.score-button:hover:not(:disabled){background:linear-gradient(115deg,#702bd8,#ca318b)}.recording .record-button{background:linear-gradient(115deg,#a331b9,#cf367a);animation:brandPulse 1.4s infinite}@keyframes brandPulse{50%{box-shadow:0 0 0 8px #a440cb14}}.result{border-top-color:#eee4f3}.ring{background:conic-gradient(#a247d1 var(--fill,0%),#eee4f5 0)}.ring>div{background:#fff}.ring strong{color:#7f3fb0}.ring span,.result-copy>p:not(.eyebrow){color:#8a7496}.result-copy h3{color:#593767}.lesson-picker button{border-color:#e1d1ed;color:#8752ac}.lesson-picker button[aria-current=true]{background:linear-gradient(120deg,#8740d9,#bb46b3);border-color:transparent;color:#fff}.try .bar{background:#d3b7e3}.try[aria-pressed=true] .bar{background:linear-gradient(0deg,#8541d4,#ce4aac)}.try[aria-pressed=true] .value{color:#9a42ba}.try .value,.try .number{color:#977da5}.try:hover{background:#f0e7f7}details,summary{color:#937e9f}footer{color:#a18eac}.library-card{background:#fff;border-color:#e4d4ef}.library-card strong{color:#8440bd}.library-card small,.library-card span{color:#90739f}#library h1 span{background:linear-gradient(105deg,#8138ed,#df419e);background-clip:text;-webkit-background-clip:text;color:transparent}#library>p:not(.eyebrow){color:#8a7398}dialog{background:#fff;border-color:#e6d5ef}dialog textarea{border-color:#dfc9ec}#message{color:#a23c88}button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:#b45bd1}
.model-player{position:relative;overflow:hidden;border-radius:18px;background:#302139;isolation:isolate}.model-player video{border-radius:inherit}.model-toggle{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;background:transparent;opacity:1;transition:opacity .25s ease;cursor:pointer}.model-toggle span{display:grid;place-items:center;width:55px;height:55px;padding-left:3px;background:#fffef5ec;box-shadow:0 3px 18px #25103725;border-radius:50%;color:#7b3bb4;font-size:22px}.model-player.is-playing .model-toggle{opacity:0}.model-player.is-playing .model-toggle:focus-visible{opacity:1}.model-toggle:disabled{opacity:0}.model-toggle:focus-visible{outline:3px solid #c87ded;outline-offset:-4px;border-radius:18px}
@media(max-width:900px){.brand{font-size:12px}}@media(max-width:680px){.topbar{margin-bottom:23px;padding-bottom:16px}.brand{display:none}.model-column .model-player{grid-column:2;grid-row:1/4;border-radius:13px}.model-column .model-player video{border-radius:inherit}.model-toggle span{width:43px;height:43px;font-size:17px}}
/* Clear, short directions for English learners. */
.learning-guide{padding:15px 17px;border-radius:13px;background:#f7f1fc;border:1px solid #e8daf2;margin:0 0 20px}.guide-steps{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px;color:#9b82a9}.guide-steps .active{font-weight:700;color:#7a35b4}.learning-guide p{font-size:14px;line-height:1.5;color:#5e3e74;margin:10px 0 0}.record-label-button{border:0;background:transparent;padding:8px 0;min-height:44px;text-align:left;font:600 16px Arial;color:#593767}.continue-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:15px}.continue-actions .score-button{margin:0}.continue-actions:has(button:not([hidden])){margin-bottom:8px}.ipa-help{margin:0 0 15px!important;font-size:12px}.ipa-help summary{color:#8c65a3}.ipa-help .ipa{margin:9px 0 0}.next-highlight{outline:3px solid #d5b3ee;outline-offset:4px}.record-row{margin:23px 0}.model-actions .quiet{font-size:11px}#record-state{font-size:12px;line-height:1.6;display:block;max-width:320px}.tip{font-size:15px}.result-copy>p:not(.eyebrow){font-size:13px}.quiet{color:#786286}.score-button,.pill{min-height:44px}@media(max-width:680px){.guide-steps{gap:7px;font-size:11px}.learning-guide p{font-size:13px}.continue-actions{display:grid;grid-template-columns:1fr 1fr}.continue-actions button{width:100%;font-size:12px;padding:12px 10px}.record-label-button{font-size:15px}#record-state{font-size:11px}.tip{font-size:13px}}

/* Clear directions above the choices they describe. */
.path-callout{background:#eee3ff;border:2px solid #a875e8;border-radius:18px;padding:18px 22px;margin:0 0 18px;color:#51218b;font-size:18px;line-height:1.45}
.path-callout strong{display:block;font-weight:800}
.path-callout p{margin:6px 0 0;font-size:16px}
.path-callout span[aria-hidden]{font-size:28px;line-height:1;vertical-align:middle}
.library-callout{margin-top:30px;max-width:560px;display:flex;align-items:center;justify-content:space-between;font-size:26px}
.guide-steps{flex-wrap:wrap}.guide-steps span{white-space:normal}

/* Bright green learner guidance, with dark text for readability. */
.model-column .intro{background:#dcfce7;border:2px solid #22c55e;border-left:7px solid #16a34a;border-radius:16px;padding:20px 22px;color:#14532d;margin:0 0 22px;line-height:1.4}
.model-column .intro strong{display:block;font-size:26px;font-weight:800;letter-spacing:-.4px}
.model-column .intro span{display:block;margin-top:10px;font-size:16px;font-weight:600;line-height:1.5}
.path-callout{background:#dcfce7;border-color:#22c55e;color:#14532d;box-shadow:0 4px 16px #16a34a12}
.path-callout span[aria-hidden]{color:#15803d;font-weight:800}
.learning-guide{background:#ecfdf3;border:2px solid #4ade80}
.guide-steps{color:#326b48}.guide-steps .active{color:#14532d;background:#bbf7d0;border-radius:7px;padding:5px 8px;font-weight:800}
.learning-guide p{color:#14532d;font-size:16px;font-weight:700}
.next-highlight{outline:3px solid #22c55e;outline-offset:4px}
@media(max-width:680px){.model-column .intro{padding:17px 19px}.model-column .intro strong{font-size:24px}.model-column .intro span{font-size:15px}.learning-guide p{font-size:15px}}

/* Put the exercise choices first, followed by Liz’s demonstration. */
.layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr)}
.model-column .intro{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;color:#593767}
@media(max-width:680px){.layout{grid-template-columns:1fr}.model-column .intro{padding:0}}

/* Three readable, colour-coded steps; the outline marks the current step. */
.guide-steps{font-size:15px;font-weight:800;gap:9px;line-height:1.5}
.guide-steps span[id]{padding:7px 10px;border-radius:9px;font-weight:800;border:1px solid transparent}
#guide-listen{background:#bbf7d0;color:#14532d;border-color:#86efac}
#guide-record{background:#bfdbfe;color:#1e3a8a;border-color:#93c5fd}
#guide-score{background:#e9d5ff;color:#581c87;border-color:#d8b4fe}
.guide-steps span.active{outline:2px solid currentColor;outline-offset:2px}
.guide-steps span[aria-hidden]{font-size:18px;font-weight:800;color:#14532d}
.ipa-help .ipa{margin:0 0 15px;font-size:25px;line-height:1.45}
@media(max-width:680px){.guide-steps{font-size:14px;gap:8px}.guide-steps span[id]{padding:7px 8px}.ipa-help .ipa{font-size:22px}}

#copy{max-width:260px;line-height:1.35;text-align:center}#copy-dialog .pill{margin:8px 8px 0 0;text-decoration:none}@media(max-width:680px){#copy{max-width:185px;font-size:12px;padding:10px 12px}.topbar{flex-wrap:wrap}}

/* Make the community sharing action easy to find. */
#copy{background:#fde047;color:#422006;border:2px solid #eab308;font-weight:800;box-shadow:0 3px 10px #a1620724}
#copy:hover:not(:disabled){background:#facc15;border-color:#ca8a04}
#copy:focus-visible{outline:3px solid #854d0e;outline-offset:4px}
#copy:disabled{background:#fef3a4;color:#715c2a;border-color:#e7ce70;opacity:1;box-shadow:none}