/* B6 design proposal: keep the existing car coordinates and data hooks. */
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined{background:linear-gradient(#caf1ff,#edfaf1 65%,#fff7df);min-height:100%}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-screenhead{padding:12px 18px;min-height:84px;gap:12px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-screenhead>div{min-width:0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-screenhead h2{font-size:28px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-screenhead p{font-size:16px;line-height:1.4}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-count{display:grid;gap:1px;background:#fffdf1;color:#35418e;border:2px solid #fff;border-radius:15px;padding:5px 13px;text-align:center;flex-shrink:0;box-shadow:0 3px 0 #008bcc44}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-count small{font-size:12px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-count b{font-size:20px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-stage{display:block;max-width:1180px;margin:0 auto;padding:18px;background:none}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-workbench{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;align-items:stretch}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-learning{display:flex;flex-direction:column;gap:0;margin:0;padding:16px;border:3px solid #fff;border-radius:23px;min-height:0;min-width:0;background:linear-gradient(#fffef7,#fff8e2);box-shadow:0 4px 0 #bedee2}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-card-heading{display:flex;justify-content:space-between;align-items:center;color:#82541e;font-weight:700;gap:8px;font-size:15px;line-height:1.4}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-reveal{display:flex;justify-content:center;align-items:center;gap:18px;margin:12px 0 16px;min-height:97px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-learning .ppl-phon-picture{font-size:62px;min-height:86px;width:100px;flex-shrink:0;padding:7px;background:linear-gradient(#ddf6ff,#e3eaff);border:2px solid #fff;border-radius:24px;box-shadow:0 3px 0 #cbd9eb}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-lessonhead{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;text-align:left;color:#627197;font-size:15px;min-width:0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-lessonhead strong{font-size:30px;line-height:1.2;max-width:none;padding:0;background:none;color:#293c91;white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:0;width:100%}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter{border:2px solid #fff8b5;border-radius:17px;background:linear-gradient(#ffef61,#ffcf19);box-shadow:0 5px 0 #d9a22b;padding:9px 4px;min-height:93px;min-width:0;width:100%;max-width:none;color:#26368f}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter span{font-size:45px;line-height:1.1}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter small{font-size:17px;line-height:1.4;min-height:20px;color:#67532d}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter.lit{background:linear-gradient(#d4ff9f,#85df82);border-color:#f2ffd7;box-shadow:0 5px 0 #54ac75;color:#245e47;transform:translateY(-2px)}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-letter-help{font-size:13px;line-height:1.5;text-align:center;color:#687495;margin:13px 0 0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-driveframe{position:relative;display:flex;flex-direction:column;grid-area:auto;margin:0;padding:0;min-width:0;overflow:hidden;border:3px solid #fff;border-radius:23px;background:#f9fff1;box-shadow:0 4px 0 #b1d7c9;min-height:0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-landscape{position:relative;flex:1;min-height:154px;background:#b4edfc url('../images/mockup-v211/champions-garden.webp') center 48%/cover no-repeat;display:flex;justify-content:center;align-items:flex-start;padding:14px 9px 55px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-drag-guide{background:#fffcf0f2;border:2px solid #fff;border-radius:25px;padding:6px 13px;font-size:15px;font-weight:700;line-height:1.4;color:#395892;box-shadow:0 3px 0 #3b8d7350;text-align:center}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-gates{position:absolute;inset:auto 0 0;height:51px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-gates span{display:grid;place-items:center;position:absolute;bottom:6px;left:25.6%;width:43px;height:43px;border:3px solid #fff;border-radius:50%;background:linear-gradient(#9b7df4,#6853c7);box-shadow:0 3px 0 #55469e;color:#fff;font-weight:900;font-size:24px;transform:translateX(-50%)}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-gates span:after{content:"";position:absolute;top:37px;height:13px;width:4px;background:#faf2b3;z-index:-1}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-gates span:nth-child(2){left:47.2%}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-gates span:nth-child(3){left:68.8%}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-gates span.is-passed{background:linear-gradient(#b9f37c,#59ba6f);box-shadow:0 3px 0 #35966d;color:#215b42}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-road{height:120px;flex-shrink:0;border:0;border-block:6px solid #fff2bd;border-radius:0;background:linear-gradient(#5d6e87,#43516d);overflow:hidden}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-road:before{border-top:4px dashed #fff7d0;top:66%;z-index:1}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-car{left:8%;top:8px;width:clamp(90px,12vw,140px);height:99px;transform:translateX(-50%);filter:drop-shadow(0 5px 3px #16233955)}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-finish{right:6%;width:22px;background-size:22px 24px;box-shadow:0 0 0 3px #fff9}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-underroad{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:8px;padding:8px 11px;color:#3c6473;font-size:13px;line-height:1.4;background:#fffdf1;border-radius:0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-draghint{font-size:13px;flex:1;order:0;min-width:0;text-align:center}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-meter{height:6px;background:#dcece6;margin:0 11px 9px;border-radius:20px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-meter span{background:linear-gradient(90deg,#69d4b5,#8551db)}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-feedback{font-size:15px;line-height:1.5;min-height:38px;padding:7px 10px;margin:12px 0;color:#375a7e;background:#ffffffdf;border:1px solid #d1e7ee;box-shadow:none}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-picker{background:#fffdf3f2;border:2px solid #fff;border-radius:20px;padding:12px 15px 15px;box-shadow:0 3px 0 #dfdcc4}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-choose{display:flex;justify-content:space-between;align-items:center;padding:0;background:none;margin:0 0 9px;color:#3c4a8b;font-size:16px;gap:10px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-choose span{background:none;border:0;padding:0;font-size:13px;color:#7b789a}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-wordchoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;gap:10px;padding:0;margin:0;scroll-snap-type:none}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-wordchip{display:grid;place-items:center;gap:0;padding:7px 6px;min-width:0;min-height:57px;font-size:24px;line-height:1.3;font-weight:900;background:linear-gradient(#fff272,#ffdd39);border:2px solid #fff8c2;border-radius:14px;color:#303988;box-shadow:0 4px 0 #d3ad39;position:relative}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-wordchip.active{background:linear-gradient(#a26bf3,#7737dc);border-color:#fff;color:#fff;box-shadow:0 4px 0 #6431b1}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-wordchip.active:after{content:"✓";position:absolute;top:-8px;right:-3px;display:grid;place-items:center;background:#20aa7b;color:#fff;border:2px solid #fff;border-radius:50%;width:24px;height:24px;font-size:14px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-actions{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:10px;padding:0;background:none;margin:15px 0 0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-actions .ppl-button{font-size:16px;line-height:1.3;padding:11px 10px;min-height:48px;border-radius:14px;border:2px solid #fff;box-shadow:0 3px 0 #b7d7df}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-actions .ppl-primary{background:linear-gradient(#a35ef4,#7634da);color:#fff;box-shadow:0 3px 0 #6330b0}
@media(min-width:600px) and (max-width:899px){
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-workbench{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-stage{padding:14px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-learning{padding:12px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-reveal{gap:10px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-learning .ppl-phon-picture{width:76px;font-size:48px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-lessonhead strong{font-size:25px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-card-heading{font-size:13px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-drag-guide{font-size:14px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-draghint{display:none}
}
@media(max-width:599px){
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-screenhead{padding:10px;min-height:74px;gap:8px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-screenhead h2{font-size:21px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-screenhead p{font-size:13px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-count{padding:4px 7px;border-radius:12px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-count small{font-size:10px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-count b{font-size:16px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-stage{padding:10px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-workbench{grid-template-columns:minmax(0,1fr);gap:12px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-learning{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:10px;padding:10px 12px;border-radius:19px;align-items:center}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-card-heading{grid-column:1/-1;margin-bottom:7px;font-size:13px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-reveal{display:contents}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-learning .ppl-phon-picture{grid-column:1;grid-row:2/4;width:72px;min-height:72px;font-size:44px;padding:5px;border-radius:18px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-lessonhead{grid-column:2;flex-direction:row;justify-content:space-between;align-items:center;gap:6px;font-size:12px;margin-bottom:7px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-lessonhead strong{font-size:18px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letters{grid-column:2;gap:7px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter{min-height:63px;padding:5px 3px;border-radius:12px;box-shadow:0 3px 0 #d9a22b}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter span{font-size:30px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter small{font-size:14px;min-height:17px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-letter-help{grid-column:1/-1;font-size:12px;margin-top:10px;line-height:1.4}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-landscape{min-height:91px;padding:6px 7px 45px;background-position:center 44%}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-drag-guide{font-size:12px;padding:4px 9px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-gates{height:38px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-gates span{width:32px;height:32px;border-width:2px;font-size:19px;bottom:5px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-gates span:after{top:28px;height:12px;width:3px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-road{height:85px;border-block-width:4px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-car{width:94px;height:76px;top:1px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-underroad{font-size:12px;padding:5px 9px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-draghint{font-size:12px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-meter{height:5px;margin:0 9px 7px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-feedback{font-size:13px;min-height:0;margin:10px 0;padding:6px 8px;line-height:1.4}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-picker{padding:10px 10px 12px;border-radius:17px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-choose{font-size:14px;margin-bottom:8px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-choose span{font-size:11px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-wordchoices{gap:7px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-wordchip{font-size:21px;min-height:45px;padding:5px 2px;border-radius:12px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-actions{gap:6px;margin-top:12px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-actions .ppl-button{font-size:13px;min-height:44px;padding:7px 4px;border-radius:12px}
}
@media(max-width:359px){.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-screenhead h2{font-size:18px}.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-draghint{display:none}.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-lessonhead>span{display:none}}
@media(prefers-reduced-motion:reduce){.phonics-refined *{animation:none!important;transition:none!important}}
/* Fit the car inside both ends while retaining the 8–88% movement coordinates. */
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-car{width:20%;min-width:64px;max-width:140px;transform:translateX(-40%)}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-road.celebrate .ppl-phon-car{animation:phonics-safe-hop .5s ease-in-out 2}
@keyframes phonics-safe-hop{0%,100%{transform:translateX(-40%)}50%{transform:translateX(-40%) translateY(-5px)}}
@media(min-width:600px){
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-stage{padding:16px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-learning{padding:14px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-reveal{min-height:88px;margin:8px 0 12px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-learning .ppl-phon-picture{min-height:80px;width:94px;font-size:56px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter{min-height:84px;padding:6px 4px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter span{font-size:42px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter small{font-size:16px;line-height:1.3}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-letter-help{margin-top:10px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-landscape{min-height:130px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-road{height:108px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-car{height:90px;top:3px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-feedback{margin-block:10px}
}
@media(max-width:599px){
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-stage{padding:8px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-workbench{gap:10px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-letter-help{display:none}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-landscape{min-height:78px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-picker{padding:8px 10px 10px}
}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-case-switch{display:flex;gap:4px;flex-shrink:0;padding:3px;background:#ebeaf8;border-radius:14px;border:1px solid #dcd7ef}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-case-switch button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:5px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:#526188;box-shadow:none;font-size:13px;line-height:1.25}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-case-switch button b{font-size:18px;color:inherit;font-weight:900;text-transform:none}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-case-switch button[aria-pressed=true]{background:linear-gradient(#a76af2,#7b3cda);border-color:#fff;color:#fff;box-shadow:0 2px 0 #6030b0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-case-switch button:focus-visible{outline:3px solid #f6b91e;outline-offset:3px}
@media(min-width:600px){
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-learning{padding:12px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-reveal{min-height:80px;margin:5px 0 9px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-learning .ppl-phon-picture{line-height:1}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-letter-help{margin-top:6px}
}
@media(max-width:599px){
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-card-heading{margin-bottom:5px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-case-switch{gap:2px;padding:2px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-case-switch button{padding:5px 7px;font-size:12px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-case-switch button b{font-size:17px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-learning{padding-block:8px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-workbench{gap:8px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-feedback{margin-block:8px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-word-picker{padding-bottom:8px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-actions{margin-top:8px}
}
@media(min-width:600px) and (max-width:899px){.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-card-heading{flex-wrap:wrap;gap:5px}.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-case-switch{margin-left:auto}}
/* Student view uses simple English; optional guidance lives in dialogs. */
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-subject-tag{display:block;width:max-content;margin-bottom:3px;color:#fff8c0;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.5px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-lesson-tools{display:flex;align-items:center;gap:6px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-case-badge{font-size:21px;line-height:1;color:#7f65af;padding:0 4px;text-transform:none}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-lesson-tools button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;min-width:44px;padding:6px 10px;border:1px solid #dcd7ee;border-radius:12px;background:#f1edff;color:#654aa4;font-size:14px;font-weight:700;line-height:1.3;box-shadow:0 2px 0 #ded6ee}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-lesson-tools [data-ppl-phon-help]{font-size:21px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter{display:grid;place-items:center}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter small{display:none}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter span{font-size:49px}
body.ppl-standalone #playlab-application>.ppl-app.ppl-mockup-v2.phonics-modal-open>.ppl-shell{overflow-y:hidden!important}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog){position:fixed;inset:0;box-sizing:border-box;width:min(560px,calc(100vw - 24px));height:auto;max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0;border:3px solid #fff;border-radius:22px;background:#fffcf4;color:#2c4387;font-family:inherit;box-shadow:0 15px 60px #14295266;overflow:hidden}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog):not([open]){display:none!important}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog)[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
:is(.phonics-teacher-dialog,.phonics-help-dialog)::backdrop{background:#15295588}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog)>header{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(120deg,#7c4bd5,#9c67e6);padding:16px 18px;color:#fff}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog) h2{font-size:23px;line-height:1.3;margin:0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-dialog header p{font-size:14px;line-height:1.5;color:#fff;margin:4px 0 0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog) header>button{min-width:44px;min-height:44px;border:1px solid #fff;border-radius:12px;background:#fff;color:#6542a5;font-size:20px;flex-shrink:0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-dialog-body{overflow:auto;overscroll-behavior:contain;padding:18px;min-height:0;font-size:16px;line-height:1.5}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-dialog fieldset{border:0;padding:0;margin:0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-dialog legend{font-size:18px;font-weight:700;margin:0 0 9px;padding:0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-dialog fieldset label{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #e0daed;border-radius:14px;padding:10px 12px;margin-bottom:9px;cursor:pointer;min-height:66px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-dialog fieldset label:has(input:checked){border-color:#9c68e2;background:#f1eaff}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-dialog input[type=radio]{width:21px;height:21px;accent-color:#7a40c9;flex-shrink:0;margin:0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-dialog label span{display:grid;gap:3px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-dialog label b{font-size:17px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-dialog label small{font-size:13px;color:#69728e;line-height:1.4}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-guide{background:#fff;border:1px solid #dce7f3;border-radius:16px;padding:13px;margin:7px 0 12px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-guide h3{font-size:17px;line-height:1.4;margin:0 0 5px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-guide p{font-size:14px;line-height:1.5;color:#596987;margin:4px 0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 [data-ppl-phon-teacher-sounds]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 [data-ppl-phon-teacher-sounds]>div{padding:8px;background:#eff7ff;border:1px solid #d8e5f4;border-radius:12px;text-align:center}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 [data-ppl-phon-teacher-sounds] dt{font-size:28px;line-height:1.2;font-weight:700}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 [data-ppl-phon-teacher-sounds] dd{font-size:18px;margin:3px 0 0;color:#6c5797}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-bm{font-size:14px;padding:10px 12px;background:#f2f7ec;border-radius:12px;line-height:1.6;color:#486250}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-bm summary{font-weight:700;cursor:pointer;min-height:28px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-bm p{margin-top:8px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-restart-note{font-size:13px;line-height:1.5;color:#7b6851;margin:12px 0 0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog)>footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #e3dced;padding:12px 18px;background:#fff}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog) footer button{min-height:44px;padding:10px 15px;background:#f7f4ff;border:1px solid #d8d1e9;border-radius:12px;color:#57477d;font-size:15px;font-weight:700}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-teacher-dialog [data-ppl-phon-teacher-apply]{background:linear-gradient(#9f65e8,#783fcb);border-color:#7f4cca;color:#fff}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-help-dialog{width:min(440px,calc(100vw - 24px))}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog){height:fit-content}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-help-dialog ol{padding-left:24px;margin:0}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-help-dialog li{padding-left:3px;margin:0 0 16px;color:#66489b}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-help-dialog li span{display:block;color:#5b6c88;font-size:15px;margin-top:3px}
.ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog) :focus-visible{outline:3px solid #f4b52c;outline-offset:3px}
@media(max-width:599px){
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-subject-tag{font-size:10px;line-height:1.2;margin-bottom:2px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-screenhead p{font-size:12px;line-height:1.3}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-screenhead h2{font-size:21px;line-height:1.2}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-refined .ppl-phon-letter span{font-size:36px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-lesson-tools{gap:5px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-lesson-tools button{padding-inline:8px;font-size:12px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 .phonics-dialog-body{padding:14px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog)>header{padding:12px 14px}
 .ppl-app.ppl-mockup-v2.ppl-readable-v210 :is(.phonics-teacher-dialog,.phonics-help-dialog) h2{font-size:21px}
}