:root{font-family:Microsoft YaHei,PingFang SC,Arial,sans-serif;--pinyin-font: KaiTi, STKaiti, "Kaiti SC", "Microsoft YaHei", "PingFang SC", Georgia, serif;color:#253247;background:#eef6ff;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:0;overflow-x:hidden;background:#eaf4ff}button{font:inherit}.app-shell{max-width:1680px;min-height:100vh;margin:0 auto;padding:18px;background:linear-gradient(180deg,#ffffffeb,#e5f3ffe0),repeating-linear-gradient(90deg,rgba(111,171,229,.12) 0 1px,transparent 1px 22px)}.topbar{height:58px;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:24px;padding:0 22px;border:1px solid #d5e0ea;border-radius:8px 8px 0 0;background:#fffffff2;box-shadow:0 2px 10px #426c9c14}.brand{color:#93cef3;font-size:26px;font-weight:900;letter-spacing:8px}.section-title{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800;color:#1d2533}.back-arrow{font-size:26px;line-height:1}.user-pill{min-width:180px;height:38px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;border:1px solid #d2d8df;border-radius:18px;background:#f8fafc;color:#3d4450}.user-icon{width:18px;height:18px;border-radius:50%;color:#111;font-size:13px}.coin{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#ffc33e;color:#fff;font-weight:900;box-shadow:inset 0 0 0 3px #f5a900}.workspace{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px;padding:26px 22px 22px;border:1px solid #d5e0ea;border-top:0;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#f0f9ffe6,#e5f2ffe6),url(/assets/grass-board.png) bottom center / 100% auto no-repeat}.sidebar{min-height:780px;padding:12px;border:1px solid #cbdbea;border-radius:8px;background:#fffffff5;box-shadow:0 8px 24px #3d76ab1f}.nav-item{height:55px;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;color:#253247;text-decoration:none}.nav-item:focus,.nav-item:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #2e97df2e}.nav-item.is-active{background:#eff8ff}.nav-item.locked{opacity:.72}.nav-symbol{width:38px;height:38px;display:grid;place-items:center;border:1px solid #8bc0ec;border-radius:9px;color:#2587d9;background:#fff;font-size:20px;font-weight:900}.nav-item.is-active .nav-symbol{border-color:#2e97df;background:#349ce8;color:#fff;box-shadow:0 5px 10px #2e97df4d}.nav-item strong,.nav-item small{display:block}.nav-item strong{font-size:15px;letter-spacing:0}.nav-item small{margin-top:2px;color:#288bd8;font-size:11px;font-weight:700}.progress-card,.achievement-card{margin-top:14px;padding:14px;border:1px solid #bfe0fb;border-radius:8px;background:#fbfdff;text-align:center}.progress-card h3{margin:0 0 12px;font-size:16px}.progress-ring{--value: 0;width:102px;height:102px;display:grid;place-items:center;margin:0 auto 10px;border-radius:50%;background:conic-gradient(#1e88ff calc(var(--value) * 1%),#e5e7eb 0);position:relative}.progress-ring:after{content:"";width:72px;height:72px;position:absolute;border-radius:50%;background:#fff}.progress-ring span{position:relative;z-index:1;font-weight:900}.progress-card p{margin:0;font-size:13px}.achievement-card{display:flex;align-items:center;justify-content:center;gap:12px;background:#f1f8ff}.achievement-card strong,.achievement-card small{display:block;text-align:left}.achievement-card strong{color:#5e9df3;font-size:18px}.achievement-card small{color:#48566b;font-size:12px}.star-badge{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#56aaf5;color:#fff;font-size:24px}.page-surface{min-width:0}.learning-page{display:grid;gap:12px}.panel,.guide-panel,.quiz-panel,.reward-board,.chant-card,.tip-strip,.goals-strip{border:1px solid #ccd9e4;border-radius:8px;background:#fffffff5;box-shadow:0 8px 20px #426c9c14}.panel{padding:14px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:#1f2b3b;font-weight:900}.panel-title span:before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:#2a9af0;box-shadow:0 0 8px #2a9af08c}.panel-title small{color:#697789;font-weight:700}.finals-page{grid-template-columns:minmax(720px,1fr) 640px;grid-template-rows:auto auto}.lesson-grid{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:260px 1fr 92px;gap:10px}.letter-panel{grid-column:1;grid-row:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;overflow:hidden}.big-letter{min-height:0;display:grid;grid-template-columns:1fr 40px;align-items:center;justify-items:center;border:1px solid #c8d6e3;border-radius:8px;background:#f5fbff}.big-letter span{color:#f0a03b;font-family:var(--pinyin-font);font-size:clamp(76px,9vw,102px);line-height:1;min-width:0}.letter-panel p{margin:10px 0 0;color:#3a4350;font-weight:700;line-height:1.32;max-width:100%;overflow-wrap:anywhere;text-align:center}.tone-panel{grid-column:2;grid-row:1}.tone-lanes{display:grid;grid-template-columns:repeat(4,minmax(88px,1fr));gap:14px;height:206px;align-items:end}.tone-card{position:relative;min-height:176px;display:grid;align-content:center;justify-items:center;gap:6px;padding:10px 8px 12px;border-radius:9px;color:#fff;box-shadow:0 8px 14px #40587a2e;transform:translateY(4px);overflow:visible;transition:transform .18s ease-out,filter .18s ease-out,box-shadow .18s ease-out}.tone-card:after,.answer-card:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:inherit;border:3px solid rgba(255,255,255,.88);opacity:0;pointer-events:none;transform:scale(.96);transition:opacity .18s ease-out,transform .18s ease-out}.tone-card.active{transform:translateY(-8px);box-shadow:0 0 0 5px #ffffffb8,0 14px 24px #40587a38;animation:kid-choice-breathe 1.9s ease-in-out infinite}.tone-card.playing{filter:brightness(1.08) saturate(1.08)}.tone-card:hover{filter:brightness(1.06) saturate(1.04);transform:translateY(-7px) scale(1.02);box-shadow:0 14px 24px #40587a3d}.tone-card:hover:after,.tone-card.active:after,.answer-card:hover:after,.answer-card.chosen:after,.answer-card.correct:after,.answer-card.wrong:after{opacity:1;transform:scale(1)}.tone-letter{position:relative;display:inline-grid;place-items:center;width:1em;font-family:var(--pinyin-font);color:#fff;font-weight:900;line-height:1}.tone-letter-large{margin-top:8px;margin-bottom:2px;font-size:72px}.tone-letter-compact{margin-top:8px;font-size:48px}.tone-base{line-height:1}.tone-accent{position:absolute;top:-.28em;left:50%;transform:translate(-50%);font-size:.58em;line-height:1;pointer-events:none}.tone-motion{position:absolute;top:8px;left:50%;width:58px;height:24px;transform:translate(-50%);pointer-events:none}.tone-track,.tone-cue{position:absolute;left:0;top:50%}.tone-track{width:58px;height:4px;border-radius:999px;background:#ffffffd1;box-shadow:0 1px #2f486b1a;transform:translateY(-50%)}.tone-cue{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #2f486b2e;animation-duration:1.45s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-play-state:paused}.tone-card.active .tone-cue,.tone-card.playing .tone-cue,.tone-card:hover .tone-cue{animation-play-state:running}.tone-flat .tone-cue{animation-name:tone-flat-cue}.tone-rise .tone-track{transform:translateY(-50%) rotate(-21deg)}.tone-rise .tone-cue{width:13px;height:11px;border-radius:2px;clip-path:polygon(0 0,100% 50%,0 100%);animation-name:tone-rise-cue}.tone-dip .tone-track{top:2px;height:20px;border:0;border-bottom:4px solid rgba(255,255,255,.82);border-radius:0 0 44px 44px;background:transparent;transform:none}.tone-dip .tone-cue{animation-name:tone-dip-cue}.tone-fall .tone-track{transform:translateY(-50%) rotate(21deg)}.tone-fall .tone-cue{width:13px;height:11px;border-radius:2px;clip-path:polygon(0 0,100% 50%,0 100%);animation-name:tone-fall-cue}.tone-card small{font-weight:800}.tone-card.violet,.answer-card.violet{background:#b69ff1}.tone-card.green,.answer-card.green{background:#74d0a8}.tone-card.orange,.answer-card.orange{background:#f9b266}.tone-card.blue,.answer-card.blue{background:#8fcaee}.guide-panel{grid-column:1 / -1;grid-row:3;padding:14px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;min-height:92px}.teacher-card{display:grid;grid-template-columns:78px auto;align-items:center;justify-items:center;gap:12px;text-align:left}.buddy-stage{position:relative;width:72px;height:72px;transform-origin:50% 92%;animation:buddy-idle-bob 3.8s ease-in-out infinite}.teacher-card img{width:100%;height:100%;object-fit:contain}.buddy-blink,.buddy-pointer,.buddy-ear{position:absolute;pointer-events:none}.buddy-blink{right:22px;top:23px;width:13px;height:4px;border-radius:999px;background:#224c7ae6;opacity:0;transform:rotate(-8deg);animation:buddy-blink 4.8s ease-in-out infinite}.buddy-pointer{right:-34px;top:28px;width:34px;height:4px;border-radius:999px;background:#ffc640;opacity:0;transform:translate(-6px) rotate(-8deg);transform-origin:left center}.buddy-pointer:after{content:"";position:absolute;right:-8px;top:50%;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid #ffc640;transform:translateY(-50%)}.buddy-ear{left:7px;top:22px;width:18px;height:18px;border:3px solid rgba(46,151,223,.42);border-radius:50%;opacity:0}.buddy-happy .buddy-stage{animation:buddy-happy-hop .62s cubic-bezier(.2,1.25,.32,1) 2}.buddy-listen .buddy-stage{animation:buddy-listen-tilt 1.05s ease-in-out infinite}.buddy-listen .buddy-ear{animation:buddy-ear-pulse .9s ease-out infinite}.buddy-prompt .buddy-pointer{opacity:1;animation:buddy-point 1.15s ease-in-out infinite}.teacher-card h2{margin:2px 0 4px;font-size:22px}.teacher-card p,.speech-bubble{margin:0;color:#4a5668;font-weight:700}.speech-bubble{padding:10px;border:1px solid #d7dee8;border-radius:8px;background:#fff;font-size:14px}.writing-practice{grid-column:1;grid-row:2}.compare-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #ffba7d}.compare-grid div{min-height:82px;display:grid;place-items:center;gap:4px;border-right:1px dashed #ffba7d;color:#78412e}.compare-grid div:last-child{border-right:0}.compare-grid strong{font-family:var(--pinyin-font);font-size:54px;line-height:1}.compare-grid span{font-size:12px;font-weight:800}.keyboard-area{grid-column:2;grid-row:2}.keyboard-panel{display:grid;grid-template-rows:1fr auto;gap:8px;min-height:385px;padding:10px;border:1px solid #c6d8eb;border-radius:8px;background:#f7fbff}.sky-game{position:relative;overflow:hidden;min-height:195px;border-radius:8px;background:linear-gradient(180deg,#c4e5fff5,#e6f7fff5),url(/assets/grass-board.png) bottom center / cover no-repeat}.sound-bubble{position:absolute;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#ffd766;color:#6e5420;font-family:var(--pinyin-font);font-size:25px;font-weight:900;box-shadow:0 4px 9px #547ca433;animation:floaty 3.8s ease-in-out infinite;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none;transform:translate(-50%,-50%);transition:opacity .18s ease,filter .18s ease;z-index:2}.sound-bubble:nth-child(2n){animation-delay:.7s}.sound-bubble:focus-visible{outline:3px solid rgba(46,151,223,.35);outline-offset:3px}.sound-bubble.falling{animation:none;filter:saturate(1.08)}.sound-bubble.caught{opacity:0;pointer-events:none}.sound-bubble.missed{opacity:.24;pointer-events:none}.tone-ripple{position:absolute;width:42px;height:42px;display:grid;place-items:center;border:2px solid rgba(46,151,223,.58);border-radius:50%;color:#1d75b7;font-family:var(--pinyin-font);font-size:18px;font-weight:900;pointer-events:none;transform:translate(-50%,-50%);animation:ripple-pop .62s ease-out forwards;z-index:3}.score-box{position:absolute;right:14px;top:16px;display:grid;gap:4px;padding:8px 12px;border-radius:8px;background:#ffffffe6;text-align:center}.score-box strong{color:#78b632;font-size:22px}.score-box b{color:#e14b3f}.catcher{position:absolute;left:66%;top:88%;width:76px;height:18px;border-radius:20px;background:#9adf47;box-shadow:inset 0 -4px #62a722;transform:translate(-50%,-50%);transition:left 80ms linear,top 80ms linear;z-index:2}.sky-game:after{content:"";position:absolute;left:0;right:0;bottom:18px;height:1px;opacity:0;pointer-events:none}.game-result{position:absolute;left:50%;top:50%;z-index:4;display:grid;align-content:center;place-items:center;gap:7px;width:min(260px,calc(100% - 36px));min-height:126px;padding:16px 18px;border:1px solid rgba(121,185,67,.28);border-radius:8px;background:#ffffffeb;color:#438b24;font-weight:900;text-align:center;transform:translate(-50%,-50%);box-shadow:0 10px 24px #34567a29}.game-result.failed{border-color:#e14b3f47;color:#e14b3f}.game-result strong{font-size:24px;line-height:1.1}.game-result span{color:#536171;font-size:13px;line-height:1.45}.game-result button{min-width:104px;min-height:34px;margin-top:3px;border:0;border-radius:17px;background:#ffd735;color:#7a5500;font-weight:900;cursor:pointer;box-shadow:0 3px #d8ac19}.game-result button:active{transform:translateY(2px);box-shadow:0 1px #d8ac19}.keyboard{display:grid;gap:5px;min-width:0}.key-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;min-width:0}.keycap{min-width:0;min-height:35px;display:grid;place-items:center;padding:0 3px;border:1px solid #c5d0dc;border-radius:6px;background:linear-gradient(180deg,#fff,#eaf1f8);color:#536171;font-size:clamp(9px,1.15vw,12px);font-weight:800;line-height:1;overflow:hidden;text-align:center;text-overflow:clip;white-space:nowrap;box-shadow:0 2px #c7d3e0}.keycap.active{background:#78c84d;color:#fff;box-shadow:0 0 0 3px #78c84d38,0 2px #4d9d28;animation:key-choice-prompt 1.45s ease-in-out infinite}.keycap.spacer{visibility:hidden;pointer-events:none}.practice-column{display:grid;gap:12px}.quiz-panel{position:relative;overflow:hidden;padding:12px}.quiz-header{display:flex;justify-content:space-between;color:#218ce5;font-weight:900}.wave-line{height:78px;display:grid;grid-template-columns:1fr 180px 46px;align-items:center;gap:14px;margin-top:10px;padding:0 18px;border:1px solid #d2dce6;border-radius:8px}.wave-line span{text-align:center;font-family:var(--pinyin-font);font-size:62px;line-height:1}.wave-line i{height:34px;background:linear-gradient(90deg,#ff5c76 0 18%,transparent 18% 22%,#66c4a6 22% 40%,transparent 40% 45%,#ff5c76 45% 62%,transparent 62% 67%,#66c4a6 67% 100%);background-size:150% 100%;clip-path:polygon(0 45%,5% 28%,10% 70%,15% 16%,20% 82%,25% 38%,30% 62%,35% 20%,40% 76%,45% 48%,50% 54%,55% 18%,60% 80%,65% 42%,70% 62%,75% 30%,80% 70%,85% 46%,90% 55%,95% 38%,100% 60%)}.wave-line.playing i{animation:wave-dance .56s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(46,151,223,.22))}.quiz-label{margin:10px 0;color:#3b8fe9;font-weight:900}.answer-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.answer-card{position:relative;min-height:100px;display:grid;place-items:center;gap:4px;border:2px solid rgba(255,255,255,.86);border-radius:8px;color:#fff;box-shadow:0 7px 14px #34567a2e;cursor:pointer;transform:translateY(0);transition:transform .18s ease-out,filter .18s ease-out,box-shadow .18s ease-out,outline-color .18s ease-out}.answer-card.chosen{outline:4px solid rgba(121,185,67,.38);transform:translateY(-4px) scale(1.02);box-shadow:0 0 0 6px #ffd73533,0 12px 22px #34567a38;animation:kid-choice-breathe 1.9s ease-in-out infinite}.answer-card.correct{outline:4px solid rgba(121,185,67,.62);box-shadow:0 0 0 6px #79b94329,0 7px 14px #34567a2e;animation:kid-correct-pop .42s cubic-bezier(.2,1.35,.32,1)}.answer-card.wrong{outline:4px solid rgba(225,75,63,.58);filter:saturate(.95);animation:kid-wrong-shake .32s ease-in-out}.answer-card:disabled{cursor:default}.answer-card:not(:disabled):hover{filter:brightness(1.06) saturate(1.04);transform:translateY(-5px) scale(1.02);box-shadow:0 13px 22px #34567a3d}.answer-card:focus-visible{outline:4px solid rgba(46,151,223,.58);outline-offset:3px}.answer-card small{font-weight:900}.star-burst{position:absolute;left:50%;top:62%;z-index:4;pointer-events:none}.star-burst span{position:absolute;left:0;top:0;color:#ffd735;font-size:24px;line-height:1;text-shadow:0 2px 0 #ffad2e,0 5px 12px rgba(66,108,156,.2);opacity:0;animation:star-burst .76s cubic-bezier(.2,.82,.28,1) forwards;animation-delay:var(--burst-delay)}.success-strip{min-height:52px;display:grid;grid-template-columns:54px 1fr 120px;align-items:center;gap:10px;margin-top:12px;padding:8px 10px;border:1px solid #dbe5ef;border-radius:8px;background:#fffef8;color:#65b53e;font-weight:900}.success-strip.error{background:#fff8f8;color:#d84b3f}.success-strip.passed{background:#f6fff0;color:#43a22e}.success-strip img{width:44px;height:44px;object-fit:contain}.success-strip:not(.error) img{animation:reward-star-spin .62s ease-out}.success-strip button{height:36px;border:0;border-radius:18px;background:#ffd735;color:#7a5500;font-weight:900}.reward-board{min-height:380px;padding:18px;background:linear-gradient(180deg,#fffffff0,#ffffffe6),url(/assets/grass-board.png) bottom center / cover no-repeat}.reward-board h1{margin:0 0 14px;color:#ee993b;font-size:34px;text-align:center}.finals-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;perspective:900px}.finals-grid button{position:relative;min-height:82px;display:grid;place-items:center;gap:4px;border:2px dashed #9ec8ff;border-radius:8px;background:#ffffffd6;color:#8cb6e7;font-weight:900;cursor:pointer;overflow:hidden;transform:translateY(0) scale(1);transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .18s ease-out,background .18s ease-out,border-color .18s ease-out,color .18s ease-out}.finals-grid button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 0 35%,rgba(255,255,255,.86) 48%,transparent 62% 100%);opacity:0;pointer-events:none;transform:translate(-130%)}.finals-grid button:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:10px;border:3px solid rgba(255,255,255,.9);opacity:0;pointer-events:none;transform:scale(.96);transition:opacity .18s ease-out,transform .18s ease-out}.finals-grid button:hover{z-index:2;border-color:#62a8ff;background:#fffffffa;color:#5c9ae4;box-shadow:0 14px 24px #426c9c33;transform:translateY(-7px) scale(1.05)}.finals-grid button:hover:after,.finals-grid button.done:after{opacity:1;transform:scale(1)}.finals-grid button.done{border-color:#87d45c;color:#27bd24;background:#f4fff0;box-shadow:0 0 0 5px #87d45c29}.finals-grid button.done:hover{border-color:#65c942;color:#20b720;background:#f0ffe9;box-shadow:0 0 0 6px #87d45c38,0 16px 26px #426c9c38;transform:translateY(-8px) scale(1.07)}.finals-grid button.lit{animation:final-card-flip .76s cubic-bezier(.18,.82,.24,1)}.finals-grid button.lit:before{animation:final-card-shine .76s ease-out}.finals-grid span{font-family:var(--pinyin-font);font-size:34px;line-height:1}.finals-grid small{min-width:24px;height:18px;display:grid;place-items:center;border-radius:9px;background:currentColor;color:#fff;font-size:10px}.goals-strip{grid-column:1 / -1;min-height:74px;display:grid;grid-template-columns:180px 1fr 1fr 1fr;align-items:center;gap:20px;padding:12px 24px}.goals-strip strong,.goals-strip small{display:block}.goals-strip strong{font-size:18px}.goals-strip small{margin-top:4px;font-size:11px;font-weight:800}.goal{display:flex;align-items:center;gap:10px;color:#5f6774;font-weight:700}.goal:before{content:"";width:26px;height:26px;border:1px solid #c7d2dc;border-radius:50%;background:#fff}.goal.done:before{content:"✓";display:grid;place-items:center;border-color:#77b93d;background:#77b93d;color:#fff;font-weight:900}.grid-page{grid-template-rows:auto 1fr auto}.grid-intro{position:relative;min-height:118px;display:grid;grid-template-columns:minmax(420px,1fr) 390px 150px;align-items:center;gap:24px;padding:18px;border:1px solid #ccd9e4;border-radius:8px;background:#fffffff5}.intro-title{display:flex;align-items:center;gap:18px}.intro-title img{width:72px;height:72px;object-fit:contain}.intro-title h1{margin:0;color:#111827;font-size:32px;letter-spacing:0}.intro-title p{margin:8px 0 0;font-weight:900}.tip-bubble{display:flex;align-items:center;gap:12px;min-height:62px;padding:12px 18px;border:1px solid #d7e4ef;border-radius:8px;background:#f2fbff;color:#3f4a59;font-weight:900}.tip-bubble span{color:#ffc928;font-size:30px}.intro-buddy{width:130px;height:130px;object-fit:contain;justify-self:end;align-self:end;margin-bottom:-18px}.grid-layout{display:grid;grid-template-columns:minmax(500px,1.02fr) minmax(230px,.5fr) minmax(430px,.92fr);grid-template-rows:235px auto;gap:12px;align-items:stretch}.know-grid{grid-column:1 / 3;grid-row:1;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 210px;column-gap:22px;min-width:0}.know-grid .panel-title{grid-column:1 / -1}.pinyin-lines{position:relative;min-height:160px;background:#e9f7ff;overflow:hidden;isolation:isolate}.pinyin-lines:before{content:"";position:absolute;top:0;bottom:0;left:82px;width:10px;background:#ffe3b9;z-index:1}.pinyin-lines .line{position:absolute;left:92px;right:0;border-top:2px solid #51606f;z-index:2}.pinyin-lines .line.active{border-top-color:#ff7a00;border-top-width:5px;filter:drop-shadow(0 0 4px rgba(255,122,0,.58));z-index:4}.band-highlight{position:absolute;left:92px;right:0;height:33.33%;border:3px solid rgba(255,151,28,.72);background:#ffdc5361;box-shadow:inset 0 0 18px #ffb61e3d;pointer-events:none;z-index:1}.band-highlight.band-upper{top:0}.band-highlight.band-middle{top:33.33%}.band-highlight.band-lower{top:66.66%}.pinyin-lines.large:after{content:"";position:absolute;left:92px;right:0;top:33.33%;height:33.33%;background:linear-gradient(90deg,#ffd65014,#ffd65061,#78c44d1f);opacity:0;pointer-events:none;z-index:0;animation:grid-middle-glow 1.25s .86s ease-out both}.pinyin-lines.large .line{transform-origin:left center;animation:grid-line-draw .76s ease-out both}.pinyin-lines.large .two{animation-delay:.12s}.pinyin-lines.large .three{animation-delay:.24s}.pinyin-lines.large .four{animation-delay:.36s}.pinyin-lines .one{top:0}.pinyin-lines .two{top:33.33%;border-top-style:dashed}.pinyin-lines .three{top:66.66%;border-top-style:dashed}.pinyin-lines .four{bottom:0}.grid-band-hit,.grid-line-hit{position:absolute;left:92px;right:0;padding:0;border:0;background:transparent;cursor:pointer}.grid-band-hit{height:33.33%;z-index:2}.grid-band-hit.upper{top:0}.grid-band-hit.middle{top:33.33%}.grid-band-hit.lower{top:66.66%}.grid-line-hit{height:18px;transform:translateY(-50%);z-index:5}.grid-line-hit.one{top:0;transform:none}.grid-line-hit.two{top:33.33%}.grid-line-hit.three{top:66.66%}.grid-line-hit.four{bottom:0;transform:none}.grid-band-hit:hover,.grid-band-hit:focus-visible{background:#ffd6501f;outline:3px solid rgba(255,173,51,.48);outline-offset:-3px}.grid-line-hit:hover,.grid-line-hit:focus-visible{background:#ff7a001f;outline:0}.band{position:absolute;left:12px;min-width:58px;padding:6px 10px;border-radius:14px;color:#fff;text-align:center;font-size:13px;font-family:inherit;font-weight:900;border:0;cursor:pointer;z-index:1}.band:hover,.band:focus-visible,.band.active{outline:0;box-shadow:0 0 0 3px #fff,0 0 0 6px currentColor;transform:scale(1.06)}.band.jumping,.line-legend button.jumping{animation:grid-control-hop .42s cubic-bezier(.34,1.56,.64,1);will-change:transform}.band.upper{top:20%;background:#f57d91}.band.middle{top:49%;background:#75b83d}.band.lower{bottom:13%;background:#ffb45b}.line-legend{display:grid;align-content:start;gap:12px;margin:0;padding:0;list-style:none;font-weight:900}.selected-rule-card{position:absolute;right:14px;bottom:14px;width:220px;padding:12px;border:1px solid #d8ecff;border-radius:8px;background:#f8fcff}.selected-rule-card strong{display:block;margin-bottom:4px;color:#1d2f48;font-size:15px}.selected-rule-card p{margin:0;color:#5d6674;font-size:12px;font-weight:700;line-height:1.45}.line-legend li{display:block}.line-legend button{width:100%;display:flex;align-items:center;gap:10px;padding:4px 6px;border:2px solid transparent;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.line-legend button:hover,.line-legend button:focus-visible{background:#f2f9ff;outline:0}.line-legend button.active{border-color:#75bdf0;background:#e8f6ff;box-shadow:0 3px 8px #238cd329}.line-legend i{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#f6768f;color:#fff;font-style:normal}.line-legend li:nth-child(2) i{background:#79bd42}.line-legend li:nth-child(3) i{background:#ffb95e}.line-legend li:nth-child(4) i{background:#4aa3ea}.chant-card{grid-column:1;grid-row:2;position:relative;display:grid;grid-template-columns:1fr;gap:14px;padding:14px 16px 12px;overflow:hidden;background:#fff8f1;border-color:#f90}.chant-card>img{position:absolute;left:18px;top:10px;width:68px;height:68px;object-fit:contain;z-index:1}.chant-banner{grid-column:1 / -1;height:46px;display:flex;justify-content:center}.chant-banner img{height:46px;max-width:420px;object-fit:contain}.rule-list{grid-column:1 / -1;display:grid;grid-template-columns:1fr;gap:8px}.rule-card{min-height:64px;display:grid;grid-template-columns:40px minmax(116px,.72fr) minmax(132px,.9fr) minmax(130px,1fr);align-items:center;gap:8px;padding:7px 10px;border:1px solid #ffd0a3;border-radius:8px;background:#ffffffe6;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.rule-card:hover,.rule-card.active{border-color:#f90;box-shadow:0 8px 18px #ff99002e;transform:translateY(-1px)}.rule-card.chant-cue{animation:chant-card-glow .64s ease-out}.rule-card.chant-cue>strong{animation:chant-number-hop .64s cubic-bezier(.2,1.25,.32,1)}.rule-card.chant-cue .rule-mini-lines{animation:chant-mini-light .64s ease-out}.rule-card>strong{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:2px dashed rgba(255,255,255,.65);background:#ffb12e;color:#fff;font-size:20px;box-shadow:0 0 0 2px #ffb12e}.rule-card:nth-child(2)>strong{background:#78bd42;box-shadow:0 0 0 2px #78bd42}.rule-card:nth-child(3)>strong{background:#4aa3ea;box-shadow:0 0 0 2px #4aa3ea}.rule-card:nth-child(4)>strong{background:#9a67f1;box-shadow:0 0 0 2px #9a67f1}.rule-list h3{margin:0;color:#1d2f48;font-size:15px;line-height:1.25}.rule-list p{margin:0;color:#5d6674;font-size:12px;font-weight:700;line-height:1.45}.rule-mini-lines{position:relative;width:min(168px,100%);aspect-ratio:176 / 76;justify-self:center;border-radius:8px;background:#fffefb;--letter-color: #ba342d;overflow:hidden}.rule-mini-lines .line{position:absolute;left:6px;right:28px;border-top:1px solid #999}.rule-mini-lines .one{top:0}.rule-mini-lines .two{top:33.33%;border-top-style:dashed;opacity:.7}.rule-mini-lines .three{top:66.66%;border-top-style:dashed;opacity:.7}.rule-mini-lines .four{bottom:0}.pinyin-glyph{position:absolute;display:block;border:0;background:var(--letter-color);transform-origin:center;transition:background .16s ease-out;-webkit-mask-image:var(--glyph-mask);mask-image:var(--glyph-mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%}.pinyin-glyph.glyph-a{--glyph-mask: url(/assets/grid-glyph-a.png)}.pinyin-glyph.glyph-m{--glyph-mask: url(/assets/grid-glyph-m.png)}.pinyin-glyph.glyph-i{--glyph-mask: url(/assets/grid-glyph-i.png)}.rule-mini-lines .pinyin-glyph{top:0;right:28px;bottom:0;left:6px}.rule-mini-lines .glyph-b{--glyph-mask: url(/assets/grid-glyph-b.png)}.rule-mini-lines .glyph-g{--glyph-mask: url(/assets/grid-glyph-g.png)}.rule-mini-lines.rule-3,.rule-mini-lines.rule-4{--letter-color: #78bd42}.rule-mini-lines i{position:absolute;right:8px;width:14px;height:14px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:10px;font-style:normal;line-height:1}.rule-mini-lines .mark-1{top:0;background:#f04b55}.rule-mini-lines .mark-2{top:14px;background:#78bd42}.rule-mini-lines .mark-3{top:28px;background:#ffae2e}.rule-mini-lines .mark-4{top:42px;background:#4aa3ea}.standing-rules{grid-column:2;grid-row:2;display:grid;align-content:start;gap:12px;background:#f3f9ed;min-width:0}.standing-rules article{padding:12px;border:1px solid #d5dfcd;border-radius:8px;background:#fff;text-align:center}.standing-rules h3{margin:0 0 8px;color:var(--rule-color);font-size:20px}.standing-rules p{margin:0;line-height:1.9;font-weight:900;letter-spacing:3px}.writing-demo{grid-column:3;grid-row:1 / 3;overflow:hidden;min-width:0}.writing-demo article{position:relative;display:grid;grid-template-columns:clamp(176px,34%,214px) minmax(0,1fr) 42px;align-items:center;gap:12px;min-height:100px;padding:10px 8px;border-bottom:1px solid #d7e1eb;border-radius:8px;isolation:isolate;transition:box-shadow .18s ease-out,filter .18s ease-out}.writing-demo article:before{content:"";position:absolute;top:6px;right:0;bottom:6px;left:0;border-radius:8px;background:linear-gradient(90deg,#dff4ffeb,#f6fcffb8);box-shadow:inset 0 0 0 2px #2e97df29;opacity:0;pointer-events:none;transform:scaleX(.96);transform-origin:right center;z-index:0;transition:opacity .18s ease-out,transform .18s ease-out}.writing-demo article>*{position:relative;z-index:1}.writing-demo article.listening{filter:saturate(1.05);box-shadow:0 8px 18px #2e97df14}.writing-demo article.listening:before{opacity:1;transform:scaleX(1);animation:demo-row-listen-flash .84s ease-out}.writing-demo article.listening .mini-lines .pinyin-glyph{background:var(--letter-opposite-color);animation:demo-letter-sway .56s ease-in-out infinite}.writing-demo article:last-child{border-bottom:0}.mini-lines{position:relative;aspect-ratio:176 / 76;min-height:76px}.mini-lines>span:not(.pinyin-glyph){position:absolute;left:0;right:0;border-top:2px solid var(--line-color)}.mini-lines span:nth-child(1){top:0}.mini-lines span:nth-child(2){top:33.3%;border-top-style:dashed}.mini-lines span:nth-child(3){top:66.6%;border-top-style:dashed}.mini-lines span:nth-child(4){bottom:0}.mini-lines .pinyin-glyph{top:0;right:0;bottom:0;left:0}.mini-lines .glyph-b{--glyph-mask: url(/assets/grid-glyph-b.png)}.mini-lines .glyph-g{--glyph-mask: url(/assets/grid-glyph-g.png)}.writing-demo strong{display:inline-block;min-width:70px;margin-bottom:6px;padding:4px 12px;border-radius:13px;background:var(--badge-color);color:#fff}.writing-demo p{margin:0;color:#4f5968;font-weight:700}.tip-strip{min-height:64px;display:flex;align-items:center;gap:14px;padding:10px 22px;overflow:hidden}.tip-strip img{width:44px;height:44px;object-fit:contain}.tip-strip strong{color:#ff7c1e;font-size:18px}.tip-strip span{font-weight:900;letter-spacing:4px;line-height:1.6}.admin-demo-page{display:grid;gap:12px}.admin-demo-header,.admin-form-panel,.admin-preview-panel{border:1px solid #ccd9e4;border-radius:8px;background:#fffffff7;box-shadow:0 8px 20px #426c9c14}.admin-demo-header{min-height:116px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:18px 22px}.admin-demo-header small{color:#288bd8;font-weight:900}.admin-demo-header h1{margin:6px 0 8px;color:#1d2533;font-size:28px;line-height:1.2}.admin-demo-header p{max-width:720px;margin:0;color:#4f5968;font-weight:700;line-height:1.7}.admin-demo-actions,.admin-form-footer,.admin-preset-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.admin-link,.admin-primary-button,.admin-secondary-button,.admin-preset-row button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border-radius:8px;font-weight:900;text-decoration:none;cursor:pointer}.admin-link,.admin-secondary-button,.admin-preset-row button{border:1px solid #c7d7e8;background:#f8fbff;color:#253247}.admin-primary-button{min-width:148px;border:0;background:#2e97df;color:#fff;box-shadow:0 8px 16px #2e97df3d}.admin-link:hover,.admin-secondary-button:hover,.admin-preset-row button:hover{border-color:#2e97df;color:#1d75b7}.admin-primary-button:disabled,.admin-secondary-button:disabled{cursor:not-allowed;opacity:.64}.admin-demo-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:12px;align-items:start}.admin-form-panel,.admin-preview-panel{padding:18px}.admin-panel-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.admin-panel-title strong,.admin-panel-title span{display:block}.admin-panel-title strong{color:#1f2b3b;font-size:18px}.admin-panel-title span{margin-top:3px;color:#697789;font-size:12px;font-weight:800}.admin-status{min-height:30px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid #d7dee8;border-radius:8px;background:#f8fafc;color:#4f5968;font-size:12px;font-weight:900}.admin-status.success{border-color:#9cd37f;background:#f5fff0;color:#438b24}.admin-status.error{border-color:#ffc1c1;background:#fff5f5;color:#bf3b3b}.admin-preset-row{margin-bottom:16px}.admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.admin-form-grid label{display:grid;gap:7px;color:#2f3b4d;font-weight:900}.admin-form-grid label span{font-size:13px}.admin-form-grid input,.admin-form-grid textarea{width:100%;border:1px solid #c8d6e3;border-radius:8px;background:#fbfdff;color:#253247;font:inherit;font-weight:700}.admin-form-grid input{min-height:42px;padding:0 12px}.admin-form-grid textarea{min-height:90px;padding:10px 12px;resize:vertical}.admin-form-grid input:focus,.admin-form-grid textarea:focus{outline:0;border-color:#2e97df;box-shadow:0 0 0 3px #2e97df24}.admin-wide-field{grid-column:1 / -1}.admin-media-field{display:grid;gap:7px}.admin-media-label{color:#2f3b4d;font-size:13px;font-weight:900}.admin-upload-zone{min-height:126px;display:grid;place-items:center;align-content:center;gap:5px;padding:16px;border:2px dashed #a9bfd3;border-radius:8px;background:#f7fbff;color:#35465a;text-align:center;cursor:pointer;transition:border-color .16s ease,background-color .16s ease}.admin-upload-zone:hover,.admin-upload-zone:focus-visible,.admin-upload-zone.dragging{outline:0;border-color:#2e97df;background:#eef8ff}.admin-upload-zone.dragging{border-style:solid}.admin-upload-zone.error{border-color:#df7777;background:#fff8f8}.admin-upload-zone strong{font-size:15px}.admin-upload-zone small{color:#697789;font-size:12px;font-weight:700}.admin-upload-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#dcefff;color:#1d75b7;font-size:24px;font-weight:900;line-height:1}.admin-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.admin-upload-progress{width:min(280px,82%);height:5px;margin-top:5px;overflow:hidden;border-radius:3px;background:#d9e4ee}.admin-upload-progress i{height:100%;display:block;background:#2e97df;transition:width .12s linear}.admin-media-url-row{position:relative}.admin-media-url-row input{padding-right:44px}.admin-media-url-row button{position:absolute;top:50%;right:6px;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:#697789;font-size:22px;line-height:1;cursor:pointer}.admin-media-url-row button:hover{background:#e8f0f7;color:#253247}.admin-upload-message{min-height:18px;margin:0;color:#697789;font-size:12px;font-weight:700}.admin-upload-message.success{color:#438b24}.admin-upload-message.error{color:#bf3b3b}.admin-form-footer{justify-content:flex-end;margin-top:18px}.admin-preview-letter{min-height:190px;display:grid;place-items:center;border:1px solid #ffd3a3;border-radius:8px;background:#fff8f1;color:#ee993b;font-family:var(--pinyin-font);font-size:118px;font-weight:900;line-height:1}.admin-video-preview{width:100%;max-height:300px;display:block;aspect-ratio:16 / 9;border:1px solid #c8d6e3;border-radius:8px;background:#111;object-fit:cover}.admin-preview-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.admin-preview-list div{min-height:70px;display:grid;align-content:center;gap:5px;padding:10px;border:1px solid #d7e4ef;border-radius:8px;background:#f7fbff}.admin-preview-list dt,.admin-preview-list dd{margin:0}.admin-preview-list dt{color:#697789;font-size:12px;font-weight:900}.admin-preview-list dd{color:#1f2b3b;font-size:20px;font-weight:900}.admin-preview-tip{min-height:48px;margin:0;padding:12px;border:1px solid #d7dee8;border-radius:8px;background:#fffef8;color:#4f5968;font-weight:800;line-height:1.6}.admin-api-strip{display:grid;gap:8px;margin-top:14px}.admin-api-strip span{min-height:34px;display:flex;align-items:center;padding:0 10px;border-radius:8px;background:#eef7ff;color:#1d75b7;font-family:Consolas,monospace;font-size:12px;font-weight:800}.sound-button{position:relative;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;isolation:isolate;transition:transform .16s ease-out}.sound-button img{width:36px;height:36px;object-fit:contain;position:relative;z-index:1}.sound-pulse{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border:3px solid rgba(46,151,223,.36);border-radius:50%;opacity:0;transform:scale(.65);z-index:0}.sound-button:active{transform:scale(.94)}.sound-button.playing img{animation:sound-button-bob .52s ease-in-out infinite;filter:drop-shadow(0 3px 5px rgba(46,151,223,.22))}.sound-button.playing .sound-pulse{animation:sound-pulse-ring .76s ease-out infinite}.sound-button.playing:after{content:"";position:absolute;top:-13px;right:-13px;bottom:-13px;left:-13px;border:2px solid rgba(46,151,223,.24);border-radius:50%;animation:sound-pulse-ring .76s .16s ease-out infinite;pointer-events:none;z-index:0}@keyframes floaty{0%,to{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-10px)}}@keyframes ripple-pop{0%{opacity:.9;transform:translate(-50%,-50%) scale(.35)}70%{opacity:.55}to{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}@keyframes tone-flat-cue{0%{transform:translateY(-50%)}to{transform:translate(48px,-50%)}}@keyframes tone-rise-cue{0%{transform:translate(2px,7px) rotate(-21deg)}to{transform:translate(45px,-10px) rotate(-21deg)}}@keyframes tone-dip-cue{0%,to{transform:translate(2px,-7px)}50%{transform:translate(25px,8px)}}@keyframes tone-fall-cue{0%{transform:translate(2px,-10px) rotate(21deg)}to{transform:translate(45px,7px) rotate(21deg)}}@keyframes grid-line-draw{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes grid-middle-glow{0%,to{opacity:0}32%{opacity:.95}64%{opacity:.46}}@keyframes chant-card-glow{0%,to{box-shadow:0 8px 18px #ff99001f}42%{box-shadow:0 0 0 4px #ffcb4052,0 12px 22px #f903}}@keyframes chant-number-hop{0%,to{transform:translateY(0) scale(1)}42%{transform:translateY(-6px) scale(1.12)}70%{transform:translateY(1px) scale(.98)}}@keyframes grid-control-hop{0%,to{transform:translateY(0) scale(1)}38%{transform:translateY(-9px) scale(1.08)}68%{transform:translateY(2px) scale(.99)}}@keyframes chant-mini-light{0%,to{filter:none;box-shadow:none}45%{filter:brightness(1.04) saturate(1.08);box-shadow:inset 0 0 0 2px #ffcb4052}}@keyframes demo-row-listen-flash{0%{opacity:0;transform:scaleX(.92)}34%{opacity:1;transform:scaleX(1)}to{opacity:.72;transform:scaleX(1)}}@keyframes demo-letter-sway{0%,to{filter:none}50%{filter:brightness(1.08) saturate(1.08)}}@keyframes sound-pulse-ring{0%{opacity:.8;transform:scale(.62)}to{opacity:0;transform:scale(1.5)}}@keyframes sound-button-bob{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes key-choice-prompt{0%,to{box-shadow:0 0 0 3px #78c84d38,0 2px #4d9d28}50%{box-shadow:0 0 0 7px #78c84d33,0 2px #4d9d28}}@keyframes wave-dance{0%,to{background-position:0 0;transform:scaleY(.88)}50%{background-position:100% 0;transform:scaleY(1.18)}}@keyframes star-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0)}18%{opacity:1}to{opacity:0;transform:translate(var(--burst-x),var(--burst-y)) scale(1.15) rotate(210deg)}}@keyframes final-card-flip{0%{transform:rotateY(0) scale(1)}45%{transform:rotateY(84deg) scale(1.04)}to{transform:rotateY(0) scale(1)}}@keyframes final-card-shine{0%{opacity:0;transform:translate(-130%)}20%{opacity:1}to{opacity:0;transform:translate(130%)}}@keyframes reward-star-spin{0%{transform:scale(.72) rotate(-16deg)}65%{transform:scale(1.16) rotate(14deg)}to{transform:scale(1) rotate(0)}}@keyframes buddy-idle-bob{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-2deg)}}@keyframes buddy-blink{0%,42%,46%,to{opacity:0}43.5%,44.5%{opacity:1}}@keyframes buddy-happy-hop{0%,to{transform:translateY(0) scale(1)}42%{transform:translateY(-10px) scale(1.04)}70%{transform:translateY(1px) scale(.98)}}@keyframes buddy-listen-tilt{0%,to{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(5deg) translateY(-2px)}}@keyframes buddy-ear-pulse{0%{opacity:.8;transform:scale(.7)}to{opacity:0;transform:scale(1.55)}}@keyframes buddy-point{0%,to{transform:translate(-6px) rotate(-8deg)}50%{transform:translate(2px) rotate(-8deg)}}@keyframes kid-choice-breathe{0%,to{box-shadow:0 0 0 5px #ffffffb3,0 12px 22px #34567a2e}50%{box-shadow:0 0 0 8px #ffd73547,0 16px 26px #34567a38}}@keyframes kid-correct-pop{0%{transform:translateY(-4px) scale(1)}45%{transform:translateY(-7px) scale(1.06)}to{transform:translateY(-4px) scale(1.02)}}@keyframes kid-wrong-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}@media (prefers-reduced-motion: reduce){.tone-card,.answer-card,.tone-card:after,.answer-card:after,.tone-cue,.wave-line i,.star-burst span,.success-strip img,.finals-grid button,.finals-grid button:before,.buddy-stage,.buddy-blink,.buddy-pointer,.buddy-ear,.sound-button,.keycap.active,.sound-button img,.sound-button:after,.sound-pulse,.pinyin-lines.large:after,.pinyin-lines.large .line,.band.jumping,.line-legend button.jumping,.rule-card.chant-cue,.rule-card.chant-cue>strong,.rule-card.chant-cue .rule-mini-lines,.writing-demo article,.writing-demo article:before,.writing-demo article.listening .mini-lines .pinyin-glyph{transition:none;animation:none!important}}@media (max-width: 1300px){.workspace{grid-template-columns:200px minmax(0,1fr);padding-inline:16px}.finals-page{grid-template-columns:1fr}.practice-column{grid-template-columns:1fr 1fr}.grid-layout{grid-template-columns:1fr;grid-template-rows:auto}.know-grid,.chant-card,.standing-rules,.writing-demo{grid-column:1;grid-row:auto}.writing-demo{max-height:none}.grid-intro{grid-template-columns:minmax(360px,1fr) 340px 120px}.intro-buddy{width:112px;height:112px}}@media (max-width: 1050px){.workspace{grid-template-columns:1fr}.sidebar{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:8px}.nav-item{height:48px}.progress-card,.achievement-card{margin-top:0}.admin-demo-header,.admin-demo-layout{grid-template-columns:1fr}.admin-demo-actions,.admin-form-footer{justify-content:flex-start}.admin-form-grid,.admin-preview-list{grid-template-columns:1fr}}@media (min-width: 1501px){.workspace{grid-template-columns:192px minmax(0,1fr);gap:8px;padding:26px 10px 12px}.sidebar{min-height:0;padding:8px}.nav-item{height:53px;grid-template-columns:42px 1fr;gap:8px;padding:5px 6px}.nav-item strong{font-size:14px}.nav-item small{font-size:9px}.nav-item.router-link-active{background:transparent}.nav-item.router-link-active .nav-symbol{border-color:#8bc0ec;background:#fff;color:#2587d9;box-shadow:none}.nav-item.is-active{background:#eff8ff}.nav-item.is-active .nav-symbol,.nav-item:first-child .nav-symbol{border-color:#2e97df;background:#349ce8;color:#fff;box-shadow:0 5px 10px #2e97df4d}.progress-card,.achievement-card{margin-top:10px;padding:10px}.progress-card h3{margin-bottom:8px}.progress-ring{width:94px;height:94px;margin-bottom:7px}.progress-ring:after{width:68px;height:68px}.achievement-card{min-height:84px}.achievement-card strong{font-size:16px}.finals-dashboard{grid-template-columns:204px minmax(480px,.86fr) minmax(610px,1.14fr);grid-template-rows:318px minmax(400px,1fr);min-height:746px}.lesson-stack{grid-template-rows:244px 192px 102px minmax(160px,1fr)}.study-stage,.practice-column{grid-template-rows:318px minmax(400px,1fr)}.video-frame{background:#f7fbff}.teacher-portrait{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.study-stage .tone-panel{grid-template-columns:minmax(0,1fr) 174px;grid-template-rows:auto minmax(0,1fr);column-gap:10px}.study-stage .tone-panel>.panel-title{grid-column:1;grid-row:1}.study-stage .tone-lanes{grid-column:1;grid-row:2;grid-template-columns:repeat(4,minmax(62px,1fr));gap:10px}.study-stage .tone-card{min-height:158px;padding-inline:5px}.study-stage .tone-card:nth-child(2),.study-stage .tone-card:nth-child(4){min-height:204px}.study-stage .tone-card:nth-child(3){min-height:176px}.study-stage .guide-panel{grid-column:2;grid-row:1 / 3;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 82px;align-items:end;gap:4px}.study-stage .teacher-card{grid-template-columns:1fr;align-content:end;gap:4px;text-align:center}.tone-teacher{width:98px;height:98px;border-radius:50%;object-fit:cover;object-position:center top}.study-stage .teacher-card h2{font-size:19px}.study-stage .teacher-card p{margin:0;font-size:11px}.study-stage .buddy-stage{width:76px;height:76px}.answer-card.violet{background:#c29ae9;color:#b16de8}.answer-card.green{background:#8fd2b2;color:#75aa30}.answer-card.orange{background:#f3b67b;color:#f39a25}.answer-card.blue{background:#8fbce8;color:#458fe8}.practice-column .reward-board{padding:10px 12px;background:linear-gradient(180deg,#fffffffa 0,#fffffffa 72%,#ffffff61),url(/assets/grass-board.png) bottom center / 100% auto no-repeat}.practice-column .reward-board h1{margin-bottom:8px;font-size:34px}.practice-column .finals-grid{gap:8px}.practice-column .finals-grid button{min-height:86px}.finals-page .goals-strip{min-height:66px}}.user-icon{position:relative;width:19px;height:19px;flex:0 0 19px}.user-icon:before{content:"";position:absolute;left:6px;top:1px;width:8px;height:8px;border-radius:50%;background:#111}.user-icon:after{content:"";position:absolute;left:2px;bottom:0;width:16px;height:9px;border-radius:7px 7px 3px 3px;background:#111}.finals-page{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px;min-width:0}.finals-dashboard{display:grid;grid-template-columns:220px minmax(470px,.96fr) minmax(560px,1.08fr);grid-template-rows:306px minmax(378px,1fr);gap:8px;min-width:0;min-height:690px;padding:10px;border:1px solid #ccd9e4;border-radius:8px;background:#fffffff5;box-shadow:0 8px 20px #426c9c14}.lesson-stack{grid-row:1 / 3;display:grid;grid-template-rows:210px 208px 102px minmax(138px,1fr);gap:8px;min-width:0}.study-stage,.practice-column{display:grid;grid-template-rows:306px minmax(378px,1fr);gap:8px;min-width:0}.finals-dashboard .panel,.finals-dashboard .quiz-panel,.finals-dashboard .keyboard-panel,.finals-dashboard .reward-board,.study-stat-card,.bonus-card{border:1px solid #d3dde8;border-radius:8px;background:#fffffff0;box-shadow:0 4px 10px #44688c14}.finals-dashboard .panel-title{min-height:24px;margin-bottom:8px;font-size:14px}.finals-dashboard .panel-title small{font-size:11px}.finals-dashboard .letter-panel{grid-column:auto;grid-row:auto;padding:10px}.finals-dashboard .big-letter{min-height:126px;border-color:#d5e2ec;background:#f2f9ff}.finals-dashboard .big-letter span{font-size:112px}.finals-dashboard .letter-panel p{margin-top:8px;color:#4b5666;font-size:13px;line-height:1.35}.video-demo-card{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px;padding:8px;overflow:hidden}.video-frame{position:relative;overflow:hidden;min-height:0;border:1px solid #d4dce5;border-radius:8px;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.9),transparent 28%),linear-gradient(180deg,#f7fbff,#e9f2fb 56%,#d7e7f7)}.video-trigger{width:100%;padding:0;text-align:left;cursor:pointer}.video-trigger:focus-visible{outline:3px solid #2e97df;outline-offset:2px}.video-trigger:hover .teacher-portrait{transform:scale(1.02)}.video-trigger:hover .video-play{transform:scale(1.08)}.video-unavailable{position:absolute;left:50%;bottom:10px;z-index:2;transform:translate(-50%);padding:4px 9px;border-radius:8px;background:#1f2b3bc2;color:#fff;font-size:11px;font-weight:800;white-space:nowrap}.teacher-portrait{position:absolute;top:16px;right:24px;bottom:0;left:24px;width:calc(100% - 48px);height:calc(100% - 16px);display:grid;justify-items:center;align-content:end;object-fit:cover;transition:transform .16s ease}.teacher-face{width:62px;height:70px;border-radius:48% 48% 44% 44%;background:#ffd7bf;box-shadow:-22px -4px 0 5px #2b2734,22px -4px 0 5px #2b2734,0 -14px 0 8px #2b2734;z-index:2}.teacher-face:before,.teacher-face:after{content:"";position:absolute}.teacher-shirt{width:150px;height:88px;margin-top:-4px;border-radius:26px 26px 0 0;background:linear-gradient(180deg,#6fb2ef,#3f8ed6);box-shadow:inset 0 10px #fff3}.video-play{position:absolute;right:12px;bottom:12px;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:#fff;color:#4e8fd6;cursor:pointer;box-shadow:0 3px 10px #426c9c38;transition:transform .16s ease}.video-play span{width:0;height:0;margin-left:3px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:13px solid currentColor}.video-demo-card p{margin:0;color:#4e97d8;font-size:12px;font-weight:900;line-height:1.3}.video-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:grid;place-items:center;padding:24px;background:#0d1826c7}.video-modal{width:min(80vw,1120px);max-height:calc(100vh - 48px);overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 24px 64px #00000052}.video-modal-header{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 20px}.video-modal-header h2{margin:0;color:#24384d;font-size:20px;line-height:1.4}.video-modal-close{flex:0 0 40px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#40566e;font-size:32px;line-height:1;cursor:pointer}.video-modal-close:hover,.video-modal-close:focus-visible{background:#edf3f8;color:#1f7fc1;outline:none}.video-modal-player{width:100%;max-height:calc(100vh - 128px);display:block;aspect-ratio:16 / 9;background:#111;object-fit:contain}@media (max-width: 700px){.video-modal-backdrop{padding:12px}.video-modal{width:100%;max-height:calc(100vh - 24px)}.video-modal-header{min-height:52px;padding-left:14px}.video-modal-header h2{font-size:17px}.video-modal-player{max-height:calc(100vh - 76px)}}.mouth-card{padding:0;overflow:hidden}.mouth-card .compare-grid{height:100%;border:0}.mouth-card .compare-grid div{min-height:0;padding:4px}.mouth-card .compare-grid strong{font-size:50px}.growth-card{display:grid;justify-items:center;align-content:center;gap:4px;padding:10px;color:#5888bf;text-align:center}.growth-card img{width:72px;height:72px;object-fit:contain}.growth-card span{color:#4b8ed6;font-weight:900}.growth-card small{color:#697789;font-weight:800}.growth-card i{width:132px;height:8px;border-radius:999px;background:linear-gradient(90deg,#2e97df calc(var(--value) * 1%),#dfe6ee 0)}.study-stage .tone-panel{grid-column:auto;grid-row:auto;display:grid;grid-template-rows:auto minmax(0,1fr) 76px;gap:8px;min-width:0;padding:10px;overflow:hidden;background:#f1f8ff}.study-stage .tone-lanes{height:auto;grid-template-columns:repeat(4,minmax(84px,1fr));gap:12px;align-items:end;min-height:0}.study-stage .tone-card{--tone-offset: 0px;min-height:188px;align-content:end;padding:24px 8px 12px;border:1px solid rgba(83,124,166,.12);border-radius:8px;transform:translateY(var(--tone-offset))}.study-stage .tone-card.violet{background:#c4a4f2}.study-stage .tone-card.green{background:#8bd7bc}.study-stage .tone-panel>.panel-title span{color:#30343b;letter-spacing:0}.study-stage .tone-panel>.panel-title span:before{display:none}.study-stage .tone-panel>.panel-title small{display:none}.study-stage .tone-card.orange{background:#f3b7ca}.study-stage .tone-card.blue{background:#aed9f2}.study-stage .tone-card.active{transform:translateY(var(--tone-offset));animation:none}.study-stage .tone-card:hover{transform:translateY(calc(var(--tone-offset) - 5px)) scale(1.02)}.study-stage .tone-card .tone-motion{top:42px}.study-stage .tone-card .tone-name{font-size:18px;font-weight:900;white-space:nowrap}.tone-number{position:absolute;left:8px;top:8px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#9d67ec;color:#fff;font-size:13px;font-weight:900}.study-stage .tone-card:nth-child(2) .tone-number{background:#31bf87}.study-stage .tone-card:nth-child(3) .tone-number{background:#f06f91}.study-stage .tone-card:nth-child(4) .tone-number{background:#69bce9}.study-stage .tone-card .sound-button{width:56px;height:30px;grid-template-columns:auto 24px;gap:2px;padding:2px 5px 2px 8px;border-radius:16px;background:#ffffff38;color:#fff;margin-top:2px}.study-stage .tone-card .sound-button:before{content:"听";font-size:14px;font-weight:900;line-height:1}.study-stage .tone-card .sound-button img{width:24px;height:24px}.study-stage .tone-card .sound-pulse{top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:18px}.study-stage .guide-panel{grid-column:auto;grid-row:auto;min-height:0;grid-template-columns:auto 62px minmax(110px,1fr) 68px;gap:8px;padding:0;align-items:center}.study-stage .buddy-stage>img{width:100%;height:100%;display:block;object-fit:contain}.tone-guide-title,.tone-guide-copy{margin:0}.tone-guide-title{color:#292d34;font-size:20px;line-height:1.1;text-align:center}.tone-guide-copy{padding:6px 8px;border:1px solid #d8d8d8;border-radius:8px;background:#fff;color:#3b3b3b;font-size:11px;font-weight:800;line-height:1.55;text-align:center}.study-stage .teacher-card{grid-template-columns:62px minmax(0,1fr);gap:8px;min-width:0}.teacher-figure{position:relative;width:58px;height:62px}.teacher-head{position:absolute;left:16px;top:2px;width:28px;height:32px;border-radius:50%;background:#ffd6bd;box-shadow:0 -8px 0 5px #5d3a31}.teacher-body{position:absolute;left:8px;right:8px;bottom:0;height:34px;border-radius:14px 14px 8px 8px;background:#ffcb66}.study-stage .teacher-card h2{margin:0 0 3px;font-size:18px}.study-stage .teacher-card p{font-size:12px;line-height:1.35}.study-stage .buddy-stage{width:68px;height:68px}.study-stage .keyboard-area{grid-column:auto;grid-row:auto;min-height:0}.study-stage .keyboard-panel{height:100%;min-height:0;grid-template-rows:minmax(180px,1fr) auto;padding:8px}.study-stage .sky-game{min-height:0}.practice-column{grid-template-columns:1fr}.quiz-zone{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:8px;min-width:0}.quiz-zone .quiz-panel{min-width:0;padding:10px}.quiz-status-column{display:grid;gap:8px;min-width:0}.study-stat-card,.bonus-card{display:grid;justify-items:center;align-content:center;gap:6px;min-height:0;padding:8px;color:#4b6683;text-align:center}.study-stat-card strong,.bonus-card strong{color:#2e97df;font-size:13px}.mini-progress{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#78bd42 calc(var(--value) * 1%),#e3e8ee 0)}.mini-progress span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#fff;font-size:13px;font-weight:900}.bonus-card img{width:54px;height:54px;object-fit:contain}.bonus-card b{color:#bd3434;font-size:24px}.quiz-zone .wave-line{height:62px;grid-template-columns:1fr 160px 40px;gap:10px;margin-top:8px}.quiz-zone .wave-line span{font-size:58px}.quiz-zone .answer-row{grid-template-columns:repeat(4,minmax(84px,1fr));gap:12px}.quiz-zone .answer-card{min-height:106px;align-content:center;padding:8px}.quiz-zone .answer-card .tone-motion{top:12px}.quiz-zone .answer-card small{min-width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#ffffffb8;color:inherit}.practice-column .reward-board{min-height:0;padding:12px}.practice-column .reward-board h1{margin-bottom:10px;font-size:clamp(28px,2.7vw,38px);line-height:1.1}.practice-column .finals-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.practice-column .finals-grid button{min-height:74px}.practice-column .finals-grid span{font-size:clamp(26px,2.3vw,34px)}.finals-page .goals-strip{min-height:64px;grid-template-columns:190px 1fr 1fr 1fr;padding:10px 20px;background:#fffffff5}.finals-page .goals-strip>div:before{content:"🎯";margin-right:10px;font-size:28px;vertical-align:middle}@media (max-width: 1500px){.finals-dashboard{grid-template-columns:210px minmax(420px,.92fr) minmax(500px,1.08fr)}.quiz-zone{grid-template-columns:minmax(0,1fr) 104px}.practice-column .finals-grid{gap:8px}}@media (max-width: 1300px){.finals-dashboard{grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto auto}.lesson-stack{grid-row:1 / 3}.practice-column{grid-column:2}.finals-page .goals-strip{grid-template-columns:1fr;gap:10px}}@media (max-width: 1050px){.finals-dashboard{grid-template-columns:1fr;grid-template-rows:auto}.lesson-stack,.study-stage,.practice-column{grid-column:auto;grid-row:auto}.lesson-stack{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}.growth-card,.mouth-card{min-height:140px}}.tone-teacher{width:58px;height:62px;object-fit:contain}.app-shell.grid-shell{width:100%;max-width:1680px;min-height:100vh;padding:4px 8px 9px}.grid-shell .topbar{width:100%;height:53px;grid-template-columns:190px minmax(0,1fr) auto;gap:16px;padding:0 20px;border-radius:0;box-shadow:none}.grid-shell .brand{display:block;font-size:24px}.grid-shell .section-title{gap:10px;font-size:17px}.grid-shell .back-arrow{font-size:24px}.grid-shell .user-pill{min-width:234px;height:34px;border-radius:16px}.grid-shell .workspace{display:grid;min-height:880px;grid-template-columns:196px minmax(0,1fr);gap:4px;padding:30px 20px 20px}.grid-shell .page-surface{width:100%}.grid-shell .sidebar{min-height:830px;padding:8px}.grid-shell .nav-item{height:53px;grid-template-columns:42px 1fr;gap:8px;padding:5px 6px}.grid-shell .nav-item strong{font-size:14px}.grid-shell .nav-item small{font-size:9px}.grid-shell .nav-item.router-link-active{background:transparent}.grid-shell .nav-item.router-link-active .nav-symbol{border-color:currentColor;background:#fff;color:inherit;box-shadow:none}.grid-shell .nav-item.is-active{background:#eff8ff}.grid-shell .nav-item.is-active .nav-symbol{border-color:currentColor;background:#fff;color:inherit;box-shadow:inset 0 0 0 2px #2e97df1f}.grid-shell .nav-primary{color:#3097e1}.grid-shell .nav-primary .nav-symbol{border-color:#3097e1;background:#349ce8;color:#fff;box-shadow:0 4px 8px #2e97df40}.grid-shell .nav-blue .nav-symbol{color:#348dca}.grid-shell .nav-green .nav-symbol{border-color:#9dcc62;color:#72ad34}.grid-shell .nav-orange .nav-symbol{border-color:#f4b363;color:#f08a22}.grid-shell .nav-purple .nav-symbol{border-color:#b19af3;color:#8f6ded}.grid-shell .nav-red .nav-symbol{border-color:transparent;color:#ff6f75}.grid-shell .nav-cyan .nav-symbol{border-color:transparent;color:#42b8c4}.grid-shell .grid-page{min-width:0;height:830px;grid-template-rows:96px 614px 58px;gap:10px;padding:20px 16px 22px;border:1px solid #d4dde6;border-radius:10px;background:#fffffff7;box-shadow:0 8px 22px #426c9c14;overflow:hidden}.grid-shell .grid-intro{min-height:0;grid-template-columns:360px minmax(0,1fr) 235px 132px;gap:14px;padding:0;border:0;border-radius:0;background:transparent}.grid-shell .intro-title{align-self:stretch;height:96px;min-height:0;gap:18px;padding:14px 20px;border:1px solid #cfd8df;border-radius:8px;background:#f8fbfd}.grid-shell .intro-title img{width:62px;height:62px}.grid-shell .intro-title h1{font-size:28px}.grid-shell .intro-title p{margin-top:8px;font-size:15px}.grid-shell .tip-bubble{grid-column:3;min-height:68px;padding:10px 14px;font-size:15px;line-height:1.45}.grid-shell .tip-bubble span{font-size:28px}.grid-shell .intro-buddy{grid-column:4;width:132px;height:132px;margin-bottom:-7px}.grid-shell .grid-layout{grid-template-columns:32.5% 16.6% minmax(0,1fr);grid-template-rows:236px 368px;gap:10px 14px}.grid-shell .know-grid{grid-column:1 / 3;grid-row:1;grid-template-columns:minmax(360px,1fr) 145px;grid-template-rows:26px 147px;column-gap:14px;padding:10px 16px 14px}.grid-shell .know-grid .panel-title{margin-bottom:8px}.grid-shell .know-grid .panel-title small,.grid-shell .standing-rules .panel-title small,.grid-shell .writing-demo .panel-title small,.grid-shell .selected-rule-card{display:none}.grid-shell .pinyin-lines{min-height:0}.grid-shell .pinyin-lines:before{left:86px;width:8px}.grid-shell .pinyin-lines .line,.grid-shell .pinyin-lines.large:after{left:94px}.grid-shell .band-highlight,.grid-shell .grid-band-hit,.grid-shell .grid-line-hit{left:94px}.grid-shell .band{left:10px;min-width:54px;padding:5px 8px;font-size:12px}.grid-shell .line-legend{gap:10px;font-size:14px}.grid-shell .line-legend i{width:20px;height:20px}.grid-shell .chant-card{grid-column:1;grid-row:2;gap:0;padding:0 10px 10px}.grid-shell .chant-card>img{left:18px;top:-28px;width:68px;height:68px}.grid-shell .chant-banner,.grid-shell .chant-banner img{height:42px}.grid-shell .rule-list{gap:0}.grid-shell .rule-card{height:76px;min-height:0;grid-template-columns:34px minmax(0,92px) 145px minmax(0,1fr);gap:4px;padding:5px 8px;overflow:hidden}.grid-shell .rule-card>strong{width:32px;height:32px;font-size:18px}.grid-shell .rule-list h3{font-size:13px}.grid-shell .rule-list p{min-width:0;font-size:11px;line-height:1.4;overflow-wrap:anywhere}.grid-shell .rule-mini-lines{width:146px}.grid-shell .standing-rules{grid-column:2;grid-row:2;align-self:stretch;gap:8px;margin-top:37px;padding:10px}.grid-shell .standing-rules .panel-title{margin-bottom:0}.grid-shell .standing-rules article{padding:7px 8px}.grid-shell .standing-rules h3{margin-bottom:4px;font-size:18px}.grid-shell .standing-rules p{font-size:13px;line-height:1.7;letter-spacing:2px}.grid-shell .writing-demo{grid-column:3;grid-row:1 / 3;display:grid;grid-template-rows:29px repeat(4,minmax(0,1fr));padding:10px 16px 7px}.grid-shell .writing-demo .panel-title{margin-bottom:5px}.grid-shell .writing-demo article{min-height:0;grid-template-columns:160px minmax(0,1fr) 42px;gap:16px;padding:8px 16px}.grid-shell .mini-lines{width:145px;min-height:0;justify-self:center}.grid-shell .writing-demo strong{min-width:0;margin-bottom:6px;padding:4px 12px;font-size:13px}.grid-shell .writing-demo p{font-size:14px;line-height:1.45}.grid-shell .tip-strip{min-height:0;padding:7px 22px;box-shadow:none}.grid-shell .tip-strip img{width:40px;height:40px}.grid-shell .tip-strip strong{font-size:16px}.grid-shell .tip-strip span{font-size:14px;letter-spacing:4px}@media (max-width: 1300px){.grid-shell .grid-page{height:auto;min-height:830px;grid-template-rows:96px auto 58px;overflow:visible}.grid-shell .grid-layout{grid-template-columns:1fr;grid-template-rows:auto}.grid-shell .know-grid,.grid-shell .chant-card,.grid-shell .standing-rules,.grid-shell .writing-demo{grid-column:1;grid-row:auto}.grid-shell .standing-rules{margin-top:0}.grid-shell .writing-demo{min-height:614px}}@media (min-width: 1501px){.finals-dashboard{grid-template-columns:204px minmax(480px,.86fr) minmax(610px,1.14fr);grid-template-rows:318px minmax(400px,1fr);min-height:746px}.lesson-stack{grid-template-rows:244px 192px 102px minmax(160px,1fr)}.study-stage,.practice-column{grid-template-rows:318px minmax(400px,1fr)}.video-frame{background:#f7fbff}.teacher-portrait{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.study-stage .tone-panel{grid-template-columns:minmax(0,1fr) 174px;grid-template-rows:auto minmax(0,1fr);column-gap:10px}.study-stage .tone-panel>.panel-title{grid-column:1;grid-row:1}.study-stage .tone-lanes{grid-column:1;grid-row:2;grid-template-columns:repeat(4,minmax(62px,1fr));gap:10px}.study-stage .tone-card{min-height:212px;padding-inline:5px}.study-stage .tone-card:nth-child(1){min-height:212px}.study-stage .tone-card:nth-child(2),.study-stage .tone-card:nth-child(4){--tone-offset: -38px;min-height:212px}.study-stage .tone-card:nth-child(3){min-height:212px}.study-stage .guide-panel{grid-column:2;grid-row:1 / 3;grid-template-columns:1fr;grid-template-rows:auto 108px auto minmax(72px,1fr);justify-items:center;align-items:center;align-content:start;gap:2px}.tone-teacher{width:118px;height:108px}.tone-guide-title{font-size:21px}.tone-guide-copy{width:118px;font-size:11px}.study-stage .buddy-stage{width:82px;height:82px}.practice-column .reward-board{padding:10px 12px;background:linear-gradient(180deg,#fffffffa 0,#fffffffa 72%,#ffffff61),url(/assets/grass-board.png) bottom center / 100% auto no-repeat}.practice-column .reward-board h1{margin-bottom:8px;font-size:34px}.practice-column .finals-grid{gap:8px}.practice-column .finals-grid button{min-height:86px}.finals-page .goals-strip{min-height:66px}}