.phonics-studio-overlay{--pron-accent:#ffad32;position:fixed;inset:0;z-index:149;display:none;overflow:auto;padding:18px;background:radial-gradient(circle at 8% 9%,rgba(255,181,94,.38),transparent 29%),radial-gradient(circle at 92% 10%,rgba(145,205,173,.38),transparent 28%),#fff8ee}.phonics-studio-overlay.open{display:block}.phonics-studio-shell{width:min(1500px,100%);min-height:calc(100vh - 36px);margin:auto;border:1px solid #ead9ce;border-radius:31px;background:rgba(255,255,255,.98);box-shadow:0 28px 75px rgba(85,57,40,.17);overflow:hidden}.phonics-studio-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 22px;border-bottom:1px solid #ebdfd7;background:rgba(255,253,250,.96)}.phonics-studio-brand{display:flex;align-items:center;gap:12px}.phonics-studio-brand i{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:#fff0c7;font-size:28px;font-style:normal}.phonics-studio-brand h2{margin:0;font-size:clamp(24px,3vw,38px)}.phonics-studio-brand p{margin:2px 0 0;color:#786c64;font-size:11px}.phonics-head-actions{display:flex;align-items:center;gap:8px}.pron-save-state{padding:7px 10px;border-radius:999px;background:#e8f7ec;color:#337147;font-size:9px;font-weight:800}
.pron-quest-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:23px 25px;background:linear-gradient(135deg,color-mix(in srgb,var(--pron-accent) 22%,white),#f3effa 58%,#edf8f0)}.pron-quest-hero>div:first-child>span{color:#a95425;font-size:9px;font-weight:850;letter-spacing:.13em}.pron-quest-hero h3{margin:5px 0 2px;font-size:clamp(28px,3.5vw,48px);letter-spacing:-.045em}.pron-quest-hero p{margin:0;color:#756960;font-size:12px}.pron-score-cluster{display:flex;gap:9px}.pron-score-cluster article{min-width:116px;padding:12px 17px;border:1px solid rgba(255,255,255,.85);border-radius:18px;background:rgba(255,255,255,.8);text-align:center;box-shadow:0 7px 18px rgba(80,58,43,.06)}.pron-score-cluster small{display:block;color:#7d7068;font-size:8px;font-weight:800}.pron-score-cluster b{display:block;margin-top:3px;color:#3d3631;font-size:24px}
.pron-quest-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 22px;border-bottom:1px solid #eee1d9;background:#fffdfb}.pron-sound-tabs{display:flex;gap:7px;flex-wrap:wrap}.pron-sound-tabs button{padding:10px 14px;border:2px solid #e8ddd5;border-radius:999px;background:#fff;color:#675a52;font:800 11px Lexend,sans-serif;cursor:pointer}.pron-sound-tabs button:hover,.pron-sound-tabs button.active{border-color:var(--sound-color);background:color-mix(in srgb,var(--sound-color) 15%,white);color:#3f3732}.pron-toolbar-actions{display:flex;align-items:end;gap:7px;flex-wrap:wrap}.pron-toolbar-actions label{display:grid;gap:3px;color:#7c6f67;font-size:7px;font-weight:850;letter-spacing:.08em}.pron-toolbar-actions select{min-width:150px;padding:9px;border:1px solid #e2d6ce;border-radius:11px;background:#fff;font:700 10px Lexend,sans-serif}
.pron-team-bar{display:none;grid-template-columns:1fr 1fr;gap:10px;padding:12px 22px;background:#f7f4f1}.pron-team-bar.show{display:grid}.pron-team-bar button{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;padding:9px 13px;border:2px solid transparent;border-radius:15px;background:#fff;cursor:pointer}.pron-team-bar button.active{border-color:var(--pron-accent);box-shadow:0 6px 16px color-mix(in srgb,var(--pron-accent) 18%,transparent)}.pron-team-bar span{font-size:7px;font-weight:850;letter-spacing:.1em}.pron-team-bar input{min-width:0;border:0;background:transparent;font:750 11px Lexend,sans-serif;outline:none}.pron-team-bar b{font-size:20px}.pron-team-bar small{color:#897c74;font-size:7px}
.pron-quest-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:16px;padding:18px 22px}.pron-board-wrap{min-width:0}.pron-progress{display:flex;align-items:center;gap:13px;margin-bottom:12px;color:#74685f;font-size:9px}.pron-progress>div{flex:1;height:9px;border-radius:999px;background:#eee7e2;overflow:hidden}.pron-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pron-accent),#65b97c);transition:width .35s}.pron-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.pron-card{position:relative;min-height:150px;padding:17px 10px 13px;border:2px solid #eadfd8;border-radius:20px;background:linear-gradient(145deg,#fff,#fffaf6);color:#433b36;box-shadow:0 8px 18px rgba(77,56,42,.06);cursor:pointer;animation:pronCardIn .35s both;animation-delay:var(--card-delay);transition:.18s}@keyframes pronCardIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}.pron-card:hover{transform:translateY(-4px) rotate(-.5deg);border-color:var(--pron-accent);box-shadow:0 13px 26px color-mix(in srgb,var(--pron-accent) 18%,transparent)}.pron-card.active{border-color:var(--pron-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--pron-accent) 17%,transparent)}.pron-card.done{border-color:#8bc89b;background:#eff9f1}.pron-card-points{position:absolute;right:8px;top:8px;padding:5px 7px;border-radius:999px;background:#fff0c7;color:#8a6514;font-size:8px;font-weight:850}.pron-card.done .pron-card-points{background:#50a36a;color:#fff}.pron-card>i{display:block;margin:8px 0 9px;font-size:48px;font-style:normal;filter:drop-shadow(0 6px 5px rgba(59,45,35,.09))}.pron-card>b{display:block;font-size:12px}.pron-card>small{display:block;margin-top:5px;color:#8a7c73;font-size:7px}
.pron-stage{position:sticky;top:16px;align-self:start;min-height:515px;border:2px solid color-mix(in srgb,var(--pron-accent) 45%,#eadfd8);border-radius:27px;background:radial-gradient(circle at 50% 15%,color-mix(in srgb,var(--pron-accent) 20%,white),#fff 50%);box-shadow:0 16px 34px rgba(77,56,42,.08);overflow:hidden}.pron-stage-empty,.pron-mouth-tip{min-height:515px;display:grid;place-content:center;justify-items:center;padding:32px;text-align:center}.pron-stage-empty>i,.pron-mouth-tip>i{font-size:76px;font-style:normal}.pron-stage-empty>b{margin-top:14px;font-size:20px}.pron-stage-empty>p{max-width:270px;margin:6px 0 15px;color:#7d7068;font-size:10px;line-height:1.6}.pron-mini-legend{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.pron-mini-legend span{padding:6px 8px;border-radius:999px;background:#f6f1ed;color:#74685f;font-size:7px;font-weight:750}.pron-stage-card{padding:19px;text-align:center}.pron-stage-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.pron-stage-top span,.pron-stage-top b{padding:6px 8px;border-radius:999px;font-size:8px}.pron-stage-top span{background:#f0ebf7;color:#6f5e84}.pron-stage-top b{background:#fff0c7;color:#876316}.pron-stage-emoji{margin:16px 0 3px;font-size:92px;line-height:1;filter:drop-shadow(0 12px 10px rgba(76,53,38,.12))}.pron-stage-card h3{margin:8px 0;font-size:clamp(23px,2.3vw,32px)}.pron-challenge-line{min-height:72px;margin:0;padding:14px;border-radius:16px;background:#fff8f1;font:750 15px/1.5 Lexend,sans-serif}.pron-listen-row{display:flex;justify-content:center;gap:7px;margin-top:12px}.pron-attempt-dots{display:flex;align-items:center;justify-content:center;gap:7px;margin:13px 0}.pron-attempt-dots span{width:13px;height:13px;border:2px solid #d8cdc5;border-radius:50%;background:#fff}.pron-attempt-dots span.used{border-color:#f19558;background:#f19558}.pron-attempt-dots small{margin-left:4px;color:#8a7c73;font-size:7px}.pron-stage-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:8px}.pron-stage-actions button{min-height:47px;border:0;border-radius:14px;font:800 11px Lexend,sans-serif;cursor:pointer}.pron-try{background:#f0ebe7;color:#63574f}.pron-nailed{background:linear-gradient(135deg,#f5a943,#f17443);color:#fff;box-shadow:0 8px 17px rgba(232,108,55,.2)}.pron-nailed:disabled{background:#75b888;box-shadow:none;cursor:default}.pron-stage.shake{animation:pronShake .38s}@keyframes pronShake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}.pron-mouth-tip span{margin-top:10px;color:#b0522c;font-size:8px;font-weight:850;letter-spacing:.12em}.pron-mouth-tip h3{margin:8px 0 4px;font-size:25px}.pron-mouth-tip p{max-width:300px;margin:0 0 18px;color:#6f635c;font:650 14px/1.7 Lexend,sans-serif}
.pron-quest-footer{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 22px;border-top:1px solid #e9ddd5;background:rgba(61,76,68,.97);color:#fff;font-size:10px}.pron-particle{position:fixed;z-index:170;left:var(--x);bottom:-40px;pointer-events:none;font-size:25px;font-style:normal;animation:pronBurst 1.35s ease-out var(--delay) forwards}@keyframes pronBurst{0%{opacity:0;transform:translate(0,20px) scale(.4) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--drift),-90vh) scale(1.25) rotate(420deg)}}.phonics-studio-shell:fullscreen{width:100%;height:100%;border:0;border-radius:0;overflow:auto}
@media(max-width:1050px){.pron-quest-layout{grid-template-columns:1fr}.pron-stage{position:static;min-height:430px}.pron-stage-empty,.pron-mouth-tip{min-height:430px}.pron-card-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.phonics-studio-overlay{padding:0}.phonics-studio-shell{min-height:100vh;border-radius:0}.pron-quest-hero,.pron-quest-toolbar{align-items:flex-start;flex-direction:column}.pron-score-cluster{width:100%}.pron-score-cluster article{flex:1}.pron-card-grid{grid-template-columns:repeat(2,1fr)}.pron-team-bar{grid-template-columns:1fr}.pron-quest-layout{padding:13px}.phonics-studio-brand p,.pron-save-state{display:none}}@media(max-width:440px){.pron-card-grid{grid-template-columns:1fr 1fr;gap:8px}.pron-card{min-height:130px}.pron-card>i{font-size:39px}.phonics-studio-head,.pron-quest-hero,.pron-quest-toolbar,.pron-team-bar,.pron-quest-footer{padding-left:13px;padding-right:13px}.pron-toolbar-actions label{width:100%}.pron-toolbar-actions select{width:100%}}