#phonics{--ph-ink:#294a40;--ph-green:#54836e;--ph-paper:#fff9eb;color:var(--ph-ink);background:var(--ph-paper);border-radius:28px;overflow:hidden;box-shadow:0 12px 45px #0003;text-align:left;font-family:'Noto Sans TC',sans-serif}
#phonics.on{display:flex;align-items:stretch;justify-content:flex-start}
#phonics button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#phonics button:focus-visible{outline:3px solid #ba5d27;outline-offset:3px}
#phonics button:disabled{cursor:default;opacity:.52}
#phonics [hidden]{display:none!important}
.ph-top{display:flex;align-items:center;gap:10px;padding:17px 15px 14px;border-bottom:1px solid #36594815;flex-shrink:0;background:#fffcf5}
.ph-top>div{flex:1;min-width:0}.ph-top b{font-size:14px}.ph-top small{display:block;font:700 9px/1.8 sans-serif;letter-spacing:1px;color:#65766a}.ph-badge{border:1px solid #d6debe;border-radius:9px;padding:5px;color:#56725a;font:700 11px sans-serif}.ph-back{border:1px solid #dadfce;border-radius:50%;width:40px;height:40px;background:transparent;font-size:23px!important;flex-shrink:0}
.ph-body{overflow:auto;overscroll-behavior:contain;padding:18px 17px 22px;min-height:0;scrollbar-width:thin}
.ph-hero{height:237px;position:relative;overflow:hidden;border-radius:23px;background:linear-gradient(#dfefe8,#f0f5e4);padding:22px 19px}
.ph-eyebrow{font:700 9px/1.6 sans-serif;letter-spacing:2px;color:#63816d}.ph-hero h1{font-size:23px;line-height:1.55;letter-spacing:1px;margin:9px 0;position:relative;z-index:2}.ph-fox{position:absolute;width:143px;right:5px;bottom:5px;z-index:2;animation:ph-bob 5s ease-in-out infinite}.ph-ground{position:absolute;bottom:-30px;left:-20px;right:-30px;height:95px;border-radius:50%;background:#c0d8ac;transform:rotate(-5deg)}.ph-ground i{position:absolute;width:3px;height:15px;background:#669875;top:20px;left:60px;transform:rotate(-15deg)}.ph-ground i:before,.ph-ground i:after{content:'';position:absolute;width:10px;height:5px;border-radius:80% 0;background:#719979;top:1px;left:-8px;transform:rotate(24deg)}.ph-ground i:after{left:1px;top:5px;transform:rotate(-30deg)}.ph-ground i:nth-child(2){left:100px;top:35px}.ph-ground i:nth-child(3){left:32px;top:40px}.ph-floating{position:absolute;display:grid;place-items:center;background:#ffe19b;width:37px;height:40px;border-radius:13px;font:700 29px Fredoka,sans-serif;box-shadow:0 4px 0 #ceaf6f50}.ph-float-a{bottom:59px;left:38px;transform:rotate(-13deg)}.ph-float-s{right:26px;top:27px;transform:rotate(14deg);background:#efbca6;color:#744a3d}
.ph-progress{display:flex;flex-wrap:wrap;justify-content:space-between;gap:9px;margin:19px 2px 17px;font-size:11px}.ph-progress b{font:700 13px Fredoka,sans-serif}.ph-progress>div{width:100%;height:6px;background:#e6e9d8;border-radius:6px;overflow:hidden}.ph-progress i{height:100%;display:block;background:#719a70;border-radius:6px}
.ph-continue{border:0;display:flex;align-items:center;gap:13px;width:100%;padding:16px 13px;background:#355e4d;color:#fff9eb!important;border-radius:19px;box-shadow:0 5px 0 #244232}.ph-seed{width:46px;height:55px;background:#517460;border-radius:14px;display:grid;place-items:center;font-size:29px}.ph-continue>span:nth-child(2){flex:1;text-align:left}.ph-continue small{display:block;font-size:10px;color:#d5e4ca}.ph-continue b{font:700 26px/1.3 Fredoka,sans-serif;display:block}.ph-continue em{display:block;font-style:normal;font-size:10px;color:#e3eccc;margin-top:3px}.ph-continue strong{font-size:18px;margin-right:2px}
.ph-tools{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px}.ph-tools button{background:#f6e7bf;border:1px solid #e8d9ad;border-radius:17px;min-height:104px;text-align:left;padding:14px}.ph-tools button+button{background:#eee7f4;border-color:#dcd2e7}.ph-tools b{font:700 25px Fredoka,sans-serif;display:block;letter-spacing:2px;margin-bottom:6px}.ph-tools span{display:block;font-size:12px}.ph-tools small{display:block;font-size:9px;opacity:.72;margin-top:2px}
.ph-path{margin-top:22px;border-top:1px dashed #bfcab7;padding-top:14px}.ph-path summary{font-size:13px;cursor:pointer}.ph-path summary>span{float:right;color:#8b7135}.ph-lessons{display:grid;gap:8px;margin-top:14px}.ph-lesson{display:flex;align-items:center;gap:10px;width:100%;background:#fffcf6;border:1px solid #e0e2cc;border-radius:14px;padding:12px;text-align:left}.ph-lesson>span{background:#e9edda;border-radius:50%;display:grid;place-items:center;width:34px;height:34px;font:700 16px Fredoka,sans-serif;flex-shrink:0}.ph-lesson>div{flex:1}.ph-lesson b{font-size:12px}.ph-lesson small{display:block;font:700 15px Fredoka,sans-serif;margin-top:4px}.ph-lesson em{font-size:10px;font-style:normal;color:#5b725e}.ph-lesson.complete{background:#ecf1df}
.ph-note{font-size:11px;line-height:1.8;color:#697660;text-align:center;margin:18px 0 10px}.ph-parent{font-size:10px;line-height:1.9;color:#6b7768;margin-top:17px}.ph-parent summary{cursor:pointer}.ph-message{font-size:12px;line-height:1.8;min-height:24px;color:#506747;text-align:center;margin:14px 0}.ph-explore-card,.ph-learn-card{border:1px solid #e3e4cc;background:#fffcf6;border-radius:22px;padding:24px 16px 13px;text-align:center}.ph-letter{font:600 100px/1.4 Fredoka,sans-serif;color:#3b6950;letter-spacing:4px}.ph-letter>span{color:#8ca879;font-size:.74em;margin-left:3px}.ph-sound-buttons{display:flex;gap:9px}.ph-audio{border:1px solid #e4d39e;background:#fae6ac;border-radius:15px;padding:13px 8px;font-size:13px!important;min-height:58px;flex:1;box-shadow:0 3px 0 #d6c598}.ph-audio span{font-size:23px;vertical-align:middle}.ph-audio small{display:block;font:600 10px/1.5 sans-serif;margin-top:2px}.ph-audio.ph-mint{background:#e1ebd5;border-color:#c2d2b8;box-shadow:0 3px 0 #c1ceb3}.ph-audio.is-speaking,.ph-listen-orb.is-speaking{animation:ph-pulse .9s ease-in-out infinite}.ph-example{border:0;background:transparent;padding:14px 4px 2px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%}.ph-example b{font:600 22px Fredoka,sans-serif}.ph-example .ph-picture{font-size:35px}.ph-example>span:last-child{color:#799073}
.ph-alphabet{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:18px}.ph-alphabet button{border:1px solid #e3dfc5;border-radius:12px;background:#fffcf6;height:53px;font:600 20px Fredoka,sans-serif!important}.ph-alphabet small{font-size:15px;margin-left:2px;color:#8a9778}.ph-alphabet button.selected{border-color:#52785c;background:#dce9cc;box-shadow:0 3px 0 #b4c4a1}
.ph-primary{width:100%;padding:15px 10px;background:#3b674f;color:#fff8df!important;border:0;border-radius:15px;font-size:14px!important;box-shadow:0 4px 0 #284b38}.ph-steps{display:flex;gap:7px;justify-content:center;margin:0 0 18px}.ph-steps i{width:27px;height:6px;border-radius:5px;background:#e4e7d4}.ph-steps i.done{background:#789a69}.ph-main-audio{display:block;width:100%;margin-top:7px}.ph-picture{display:inline-block;font-size:67px;line-height:1.2}.ph-word{display:flex;justify-content:center;gap:9px;margin:15px 0}.ph-word span{font:600 52px/1.3 Fredoka,sans-serif;width:57px;background:#eef0dd;border-radius:13px;border-bottom:3px solid #d4dabb;transition:background .15s,transform .15s}.ph-word span.lit{background:#f7d583;transform:translateY(-5px);border-bottom-color:#d3b45c}
.ph-quiz-progress{height:6px;background:#e2e8d5;border-radius:5px;margin-bottom:23px;overflow:hidden}.ph-quiz-progress i{height:100%;display:block;background:#81a075}#phonics h2{font-size:19px;text-align:center;line-height:1.6;margin:0}.ph-sub{font:500 12px sans-serif;color:#768370;text-align:center;margin:8px 0}.ph-listen-orb{display:flex;flex-direction:column;justify-content:center;align-items:center;width:108px;height:108px;border:5px solid #fff7e2;outline:1px solid #edd99f;border-radius:50%;background:#f7d88e;margin:22px auto;box-shadow:0 7px 0 #e4c780}.ph-listen-orb>span{font:700 49px/1.1 Fredoka,sans-serif}.ph-listen-orb small{font-size:10px;line-height:2}.ph-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:23px 0 17px}.ph-options button{min-height:84px;border:2px solid #dce2cc;border-radius:18px;background:#fffcf5;box-shadow:0 4px 0 #e1e5d0}.ph-options b{font:600 44px Fredoka,sans-serif}.ph-options.with-pictures button{padding:12px 3px}.ph-options.with-pictures b{font-size:21px;display:block;margin-top:5px}.ph-options .ph-picture{font-size:35px}.ph-options button:disabled{opacity:.58!important}.ph-options button.correct{background:#d6e9c5;border-color:#7c9c69;opacity:1!important}.ph-options button.correct:after{content:'✓';font-size:15px;display:block}.ph-spell-slots{display:flex;justify-content:center;gap:10px;margin-top:20px}.ph-spell-slots>span{width:64px;height:70px;border:2px dashed #b8c8a9;border-radius:16px;display:grid;place-items:center;font:600 42px Fredoka,sans-serif}.ph-spell-slots>span.filled{border-style:solid;background:#e1edcd;border-color:#acc393}.ph-spell-tray{display:flex;justify-content:center;gap:12px;margin:23px 0 10px}.ph-spell-tray button{height:64px;width:64px;font:600 39px Fredoka,sans-serif!important;border:1px solid #ddc990;border-radius:14px;box-shadow:0 4px 0 #d6bc7d;background:#ffe7aa}.ph-undo{display:block;background:transparent;border:0;text-decoration:underline;margin:18px auto;font-size:12px!important}.ph-finish{text-align:center;padding:18px 0}.ph-bloom{display:block;font-size:100px;animation:ph-bloom .7s ease-out}.ph-finish h1{font-size:25px;line-height:1.6}.ph-finish>p{font:600 25px Fredoka,sans-serif;color:#6e8460}.ph-result-star{background:#f7e8b5;border-radius:16px;padding:15px;font-size:17px;margin:26px 0 8px}.try-again{animation:ph-nudge .3s ease}
/* SPELL POP now lives beside the sound garden, with familiar lower-case tiles. */
#kyrosLevels.on,#kyrosPlay.on{overflow-y:auto;padding-bottom:12px}#kyrosPlay .boxes{gap:7px}#kyrosPlay .box{min-width:0;flex:1;max-width:58px}#kyrosPlay .tile:focus-visible{outline:3px solid var(--gold)}.spell-guide{font-size:12px;line-height:1.8;color:var(--mute);margin:8px 0 17px}.spell-audio-status{font-size:12px;color:var(--gold);min-height:18px}.spell-actions{display:flex;gap:8px;justify-content:center;margin-bottom:10px}.spell-actions button{border:1px solid #a88ed5;border-radius:13px;background:#29243d;color:#f3e5ff;padding:12px;font:inherit;font-size:12px}.spell-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;max-width:160px;margin:5px auto 17px}.spell-dots i{height:13px;width:13px;background:#e0c8ff;border-radius:50%}
@keyframes ph-bob{50%{transform:translateY(-4px) rotate(2deg)}}@keyframes ph-pulse{50%{box-shadow:0 0 0 7px #dfc98e55}}@keyframes ph-bloom{from{transform:scale(.6) rotate(-20deg);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes ph-nudge{33%{transform:translateX(-4px)}66%{transform:translateX(4px)}}
@media(max-width:350px){.ph-top{padding:12px 10px;gap:7px}.ph-body{padding:14px 12px 18px}.ph-top b{font-size:12px}.ph-hero{height:216px;padding:19px 15px}.ph-hero h1{font-size:21px}.ph-fox{width:126px}.ph-tools button{padding:11px}.ph-letter{font-size:83px}.ph-options{gap:7px}.ph-options b{font-size:36px}.ph-word span{width:52px}.ph-continue b{font-size:23px}}
@media(prefers-reduced-motion:reduce){#phonics *,#phonics *:before,#phonics *:after{animation:none!important;transition:none!important}}
#kyrosLevels,#kyrosPlay{background:#f7f0fc;border-radius:25px;color:#55436b;padding:17px 14px!important}#kyrosLevels .ask,#kyrosPlay .num-big{color:#685184}#kyrosLevels .ask small,#kyrosLevels .spell-guide,#kyrosPlay .spell-guide{color:#786888}#kyrosLevels .back,#kyrosPlay .back{color:#62526c}#kyrosLevels .k-lv{background:#fffcff;border-color:#d6c6e5;color:#635071;box-shadow:0 3px 0 #d6c6e5}#kyrosLevels .k-lv.cleared{background:#e4d6ef}#kyrosLevels .k-lv b{text-transform:lowercase;color:#665079}#kyrosLevels .k-foot{color:#746281;font-size:12px}#kyrosPlay .box{border-color:#c8b5d8;background:#faf6ff;color:#645077}#kyrosPlay .box.filled{background:#e5d6f4}#kyrosPlay .tile{background:#e4d3f4;color:#5d4774;border-color:#cbb6e0;box-shadow:0 4px 0 #baa2ce}#kyrosPlay .hud{color:#776783}#kyrosPlay .hear{background:#e7d7f5;color:#645477}#kyrosPlay .spell-actions button{background:#fffcff;color:#665177;border-color:#cab6dc}#kyrosPlay .spell-dots i{background:#aa8ac5}#kyrosPlay .k-tip,#kyrosPlay .k-great,#kyrosPlay .spell-audio-status{color:#71567c}#kyrosPlay .primary{background:#806697;color:#fff;border:0}
.ph-picture svg{display:block;width:1.25em;height:1.25em}.ph-example .ph-picture svg{width:1.1em;height:1.1em}.ph-options .ph-picture svg{width:1.1em;height:1.1em}
.ph-learn-card>.ph-eyebrow{display:block;margin-bottom:14px}.ph-learn-card>.ph-picture{display:block;width:fit-content;margin:0 auto}
#kyrosPlay .primary{box-shadow:0 5px 0 #644b78}
#kyrosLevels .k-lv small{color:#856538}