:root{font-family:system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;color:#51463d;background:#f7f1e5;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#51463d;--muted:#9b8c7b;--paper:#fffdf7;--line:#efe7d8;--pink:#f5c5cb;--sage:#d4e6cf;--lav:#ddd9f4;--gold:#ffd879}
*{box-sizing:border-box}html{min-height:100%;background:#f7f1e5}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 0,#fff9ed 0,transparent 58%),#f7f1e5;-webkit-tap-highlight-color:transparent;touch-action:pan-y}button{font:inherit;color:inherit}.app-shell{width:min(100%,760px);margin:0 auto;padding:18px 24px max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between}.brand-lockup{display:flex;align-items:center;gap:12px}.brand-lockup h1{font-size:clamp(18px,4vw,23px);margin:0;font-weight:900;letter-spacing:.02em}.eyebrow{font-size:9px;letter-spacing:.21em;color:#b29979;margin:0 0 4px;font-weight:900}.cat-avatar{width:56px;height:52px;position:relative;background:#fff3dc;border:2px solid #f2dfba;border-radius:19px;display:grid;place-items:center;overflow:hidden}.cat-avatar svg{width:47px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.cat-face{fill:#fffaf0;stroke:#b99168;stroke-width:2.3}.cat-ear{fill:#f4b1a0;stroke:#b99168;stroke-width:2.3;stroke-linejoin:round}.cat-eye,.cat-mouth,.cat-whisker{fill:none;stroke:#69564a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.cat-blush{fill:none;stroke:#f1a3a0;stroke-width:3.5;stroke-linecap:round}.cat-spark{position:absolute;right:5px;top:5px;color:#edbd51;font-size:13px;opacity:0;transform:scale(.5)}.cat-avatar[data-state="happy"] svg{animation:cat-hop .65s ease-in-out 2}.cat-avatar[data-state="happy"] .eye-left,.cat-avatar[data-state="happy"] .eye-right{animation:blink .6s ease-in-out 2}.cat-avatar[data-state="happy"] .cat-spark{animation:spark-in .5s .1s both}.cat-avatar[data-state="encourage"] svg{transform:rotate(-7deg)}.star-counter{min-width:71px;height:45px;padding:0 13px;border-radius:16px;background:#fff9e9;border:1px solid #f0dfb8;display:flex;align-items:center;justify-content:center;gap:8px;color:#d19c32;box-shadow:0 3px 0 #ead7ad;font-size:21px}.star-counter strong{font-size:18px;color:#735f3c}.star-counter.bump{animation:counter-bump .5s ease}
.lesson-card,.build-card,.choice-card{background:rgba(255,253,247,.88);border:1px solid rgba(236,225,206,.88);border-radius:25px;box-shadow:0 7px 0 rgba(222,209,187,.36),0 14px 30px rgba(112,91,63,.05)}.lesson-card{display:grid;grid-template-columns:1fr 1fr;min-height:238px;overflow:hidden}.lesson-art{position:relative;min-height:238px;display:grid;place-items:center;background:linear-gradient(145deg,#edf1dc,#faf1dd 76%)}.lesson-art:before,.lesson-art:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#fff9d8;box-shadow:80px 32px #fff9d8,-71px 64px #fff9d8,54px -71px #fff9d8;opacity:.8}.lesson-art:before{top:25px;left:25px}.lesson-art:after{right:30px;bottom:31px;transform:scale(.6)}.flower{position:relative;z-index:1;width:min(72%,220px);max-height:190px;filter:drop-shadow(0 8px 5px rgba(121,105,80,.1));animation:flower-sway 4s ease-in-out infinite}.art-label{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#809270;background:#f8f6e7;padding:5px 10px;border-radius:99px}.lesson-copy{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px}.tiny-label{font-size:12px;color:#b69a79;font-weight:700;letter-spacing:.16em}.lesson-copy h2{font-family:'Noto Sans SC',sans-serif;margin:2px 0 12px;font-size:68px;line-height:1.1;color:#6c6552;font-weight:700}.cat-prompt{max-width:100%;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:16px;background:#fff4e5;border:1px solid #f0e3cf}.cat-prompt p{margin:0;font-size:13px;line-height:1.4;color:#856e58}.prompt-cat{font-size:18px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-heading h2{font-size:17px;margin:2px 0 0;font-weight:900}.step-kicker{font-size:10px;letter-spacing:.16em;color:#b79c79;font-weight:900}.build-card,.choice-card{padding:18px 20px 16px}.step-count{font-size:11px;color:#a99880;background:#f6f0e5;padding:7px 10px;border-radius:99px;white-space:nowrap}.syllable-board{min-height:102px;margin-top:15px;border-radius:19px;background:#f8f5ed;border:1px dashed #e5d9c5;display:flex;align-items:center;justify-content:center;padding:12px;position:relative;overflow:hidden}.slots{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.5vw,18px);transition:opacity .35s,transform .35s}.slot{width:clamp(54px,13vw,72px);height:clamp(57px,14vw,74px);border:2px dashed #dfd4c2;border-radius:17px;display:grid;place-items:center;background:rgba(255,255,255,.48);font-size:29px;font-weight:900;color:#63594e;position:relative;flex:0 0 auto}.slot::after{content:attr(data-label);position:absolute;bottom:-18px;font:600 9px 'Noto Sans SC',sans-serif;color:#b2a48f;white-space:nowrap}.slot.filled{border-style:solid;border-color:#d5e5cc;background:#eff6e9;box-shadow:0 3px 0 #dce9d3}.slot[data-kind="initial"].filled{background:#eef3df;border-color:#dce6c3}.slot[data-kind="medial"].filled{background:#edf4e9;border-color:#d0e3cc}.slot[data-kind="final"].filled{background:#f9eeee;border-color:#f0d8d9}.slot.plus{width:auto;height:auto;border:0;background:transparent;box-shadow:none;font-size:22px;color:#c2b39b;font-weight:500}.slot.plus:after{display:none}.full-syllable{display:none;font-size:clamp(48px,12vw,65px);font-weight:900;letter-spacing:.02em;color:#66815f;line-height:1}.syllable-board[data-complete="true"] .slots{display:none}.syllable-board[data-complete="true"] .full-syllable{display:block;animation:syllable-in .48s cubic-bezier(.2,.8,.2,1) both}.teaching-line{text-align:center;margin:13px 0 0;color:#a18e74;font-size:12px;min-height:17px}.choice-heading{margin-bottom:15px}.hint-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#f5f0e5;color:#b5a58d;font-weight:900;font-size:13px}.options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.options:has(.option-card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}.option-card{min-width:0;height:70px;border:1px solid #ece2d3;border-bottom-width:4px;border-radius:19px;background:#fffdf8;display:grid;place-items:center;font-size:30px;font-weight:900;cursor:pointer;user-select:none;touch-action:manipulation;transition:transform .12s,border-color .18s,box-shadow .18s,background .18s;box-shadow:0 3px 10px rgba(105,87,61,.045)}.option-card[data-kind="initial"]{background:#f0f3e5;border-color:#e4e9d4;border-bottom-color:#d3ddbc}.option-card[data-kind="medial"]{background:#eff5eb;border-color:#dfebdc;border-bottom-color:#cedfca}.option-card[data-kind="final"]{background:#fbefef;border-color:#f3dede;border-bottom-color:#eacfd0}.option-card[data-kind="tone"]{background:#f3f0fa;border-color:#e8e2f4;border-bottom-color:#d8cfeb}.option-card:active{transform:translateY(3px) scale(.97);border-bottom-width:1px}.option-card:focus-visible,button:focus-visible{outline:3px solid #d7ad57;outline-offset:3px}.options.locked .option-card{pointer-events:none}.option-card.shake{animation:shake .33s ease}.option-card.hint{animation:correct-glow .85s ease 2}.teaching-line.complete-line{font-size:14px;font-weight:800;color:#788e6e}.finish-actions{display:flex;gap:10px}.finish-actions[hidden],.more-message[hidden]{display:none}.primary-button,.secondary-button{flex:1;min-height:54px;border-radius:16px;border:1px solid #e7dcc9;border-bottom-width:4px;font-size:15px;font-weight:900;cursor:pointer}.primary-button{background:#e9f0df;border-color:#d6e3c8;border-bottom-color:#c1d2af;color:#627856}.secondary-button{background:#fff3df;border-color:#f1e0bd;border-bottom-color:#e7d1a7;color:#9a7946}.primary-button:active,.secondary-button:active{transform:translateY(3px);border-bottom-width:1px}.more-message{text-align:center;color:#a18762;font-weight:700;margin:14px 0 2px;font-size:13px}footer{display:flex;justify-content:space-between;align-items:center;color:#b4a58f;font-size:11px;padding:0 3px}.reset-button{border:0;background:none;color:#a99375;text-decoration:underline;text-underline-offset:3px;padding:8px 4px;cursor:pointer;font-size:11px}.flight-layer,.reward-layer{position:fixed;inset:0;pointer-events:none;z-index:10;overflow:hidden}.flight-card{position:fixed;z-index:2;display:grid;place-items:center;border-radius:17px;font-size:29px;font-weight:900;box-shadow:0 6px 20px rgba(75,61,45,.18);border:1px solid #e5e0d2}.flight-card[data-kind="initial"]{background:#f0f3e5}.flight-card[data-kind="medial"]{background:#eff5eb}.flight-card[data-kind="final"]{background:#fbefef}.reward-star{position:fixed;color:#f0bd42;font-size:25px;text-shadow:0 2px 0 #cf9b37,0 5px 12px #efd98d;animation:star-fly .8s cubic-bezier(.2,.7,.25,1) forwards}.reward-star:nth-child(2){animation-delay:.11s}.reward-star:nth-child(3){animation-delay:.22s}
@keyframes shake{20%,60%{transform:translateX(-6px) rotate(-2deg)}40%,80%{transform:translateX(6px) rotate(2deg)}}@keyframes correct-glow{50%{box-shadow:0 0 0 5px #f5d987,0 0 18px #f4df9f;transform:scale(1.05)}}@keyframes cat-hop{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-8px) rotate(-4deg)}65%{transform:translateY(-3px) rotate(3deg)}}@keyframes blink{0%,35%,100%{opacity:1}18%{opacity:.1}}@keyframes spark-in{to{opacity:1;transform:scale(1) rotate(15deg)}}@keyframes flower-sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}@keyframes syllable-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes counter-bump{35%{transform:scale(1.17) rotate(-4deg)}70%{transform:scale(.96) rotate(2deg)}}@keyframes star-fly{0%{opacity:1;transform:translate(0,0) scale(1.2) rotate(0)}72%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35) rotate(210deg)}}
@media(max-width:520px){.app-shell{padding:12px 14px max(18px,env(safe-area-inset-bottom));gap:12px}.topbar{height:65px}.lesson-card{min-height:192px;border-radius:21px}.lesson-art{min-height:192px}.flower{width:78%;max-height:156px}.lesson-copy{padding:14px 8px}.lesson-copy h2{font-size:58px;margin-bottom:9px}.cat-prompt{padding:8px 9px;gap:5px}.cat-prompt p{font-size:11px}.prompt-cat{font-size:15px}.build-card,.choice-card{padding:15px 14px 14px;border-radius:21px}.section-heading h2{font-size:15px}.slot{width:clamp(48px,13vw,63px);height:57px;font-size:25px;border-radius:15px}.options{gap:9px}.option-card{height:64px;font-size:27px;border-radius:16px}.step-count{font-size:10px;padding:6px 8px}.syllable-board{min-height:92px}.cat-avatar{width:51px;height:49px}.star-counter{min-width:64px;height:42px}}
@media(max-width:360px){.app-shell{padding-inline:10px}.brand-lockup{gap:8px}.brand-lockup h1{font-size:17px}.eyebrow{font-size:8px}.lesson-copy h2{font-size:51px}.cat-prompt p{font-size:10px}.options{gap:6px}.option-card{height:59px;font-size:24px}.slot{width:47px;height:53px}.slots{gap:7px}}
@media(min-width:700px){.app-shell{padding-top:24px;gap:18px}.lesson-card,.lesson-art{min-height:260px}.build-card,.choice-card{padding:20px 24px}.option-card{height:76px}.syllable-board{min-height:110px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Cow-cat answer companion */
.cat-interaction.answer-feedback{display:grid;grid-template-columns:minmax(112px,150px) minmax(0,1fr);align-items:center;justify-content:stretch;gap:18px;min-height:156px;margin:16px 0 12px;padding:12px 18px;border:1px solid #efe1ca;border-radius:22px;background:#fff9ed;color:var(--ink);text-align:left}
.cat-interaction[hidden]{display:none}
.feedback-cat-frame{display:grid;place-items:center;width:100%;height:136px;overflow:visible}
.feedback-cat-image{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(81,64,43,.08));transform-origin:50% 85%}
.feedback-cat-image.is-changing{animation:cat-expression-in .28s ease both}
.feedback-cat-frame[data-state="thinking"] .feedback-cat-image{animation:cat-breathe 3.2s ease-in-out infinite}
.feedback-cat-frame[data-state="confused"] .feedback-cat-image{transform:rotate(-2deg)}
.feedback-cat-frame[data-state="encourage"] .feedback-cat-image{transform:rotate(1deg)}
.feedback-cat-frame[data-state="celebrate"] .feedback-cat-image{animation:cat-gentle-hop .7s ease-in-out 2}
.feedback-cat-frame[data-state="happy"] .feedback-cat-image{animation:cat-breathe 2.4s ease-in-out 2}
.feedback-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.feedback-kicker{font-size:10px;letter-spacing:.12em;font-weight:900;color:#b09370}
.feedback-bubble{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:58px;padding:12px 14px;border:1px solid #eee0cb;border-radius:17px;background:#fffdf8;color:#755f49;font-size:15px;font-weight:800;line-height:1.5;box-shadow:0 3px 0 rgba(225,211,189,.35)}
.feedback-bubble:before{content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;transform:rotate(45deg);border-left:1px solid #eee0cb;border-bottom:1px solid #eee0cb;background:#fffdf8}
.feedback-icon{flex:none;font-size:17px;color:#a7896b}
.answer-feedback[data-state="celebrate"] .feedback-icon,.answer-feedback[data-state="happy"] .feedback-icon{color:#6d955e}
.answer-feedback[data-state="crying"] .feedback-icon{color:#a7896b}
@keyframes cat-expression-in{from{opacity:.35;transform:translateY(3px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cat-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes cat-gentle-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:520px){.cat-interaction.answer-feedback{grid-template-columns:104px minmax(0,1fr);gap:9px;min-height:124px;margin:13px 0 10px;padding:9px 10px;border-radius:19px}.feedback-cat-frame{height:112px}.feedback-copy{gap:6px}.feedback-kicker{font-size:9px}.feedback-bubble{min-height:54px;padding:10px 11px;font-size:13px;line-height:1.45;border-radius:15px}.feedback-bubble:before{top:19px}.feedback-icon{font-size:15px}}
@media(max-width:360px){.cat-interaction.answer-feedback{grid-template-columns:86px minmax(0,1fr);gap:6px;padding:8px}.feedback-cat-frame{height:96px}.feedback-bubble{padding:9px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.feedback-cat-frame[data-state] .feedback-cat-image{animation:none!important}}

/* Official storybook card skins and lesson illustration */
.lesson-card{grid-template-columns:43% 57%;min-height:220px}
.lesson-art{min-height:220px;padding:12px 10px 28px}
.lesson-art:before,.lesson-art:after{z-index:0}
.lesson-illustration-wrap{position:relative;z-index:1;width:100%;height:100%;min-height:160px;display:grid;place-items:center}
.lesson-illustration{display:block;width:100%;height:100%;max-height:188px;object-fit:contain;filter:drop-shadow(0 6px 5px rgba(121,105,80,.1));}
.lesson-illustration-fallback{font-size:clamp(58px,13vw,100px);line-height:1}
.lesson-art .art-label{z-index:2;bottom:9px;font-size:10px}
.lesson-copy{padding:16px 14px}
.lesson-copy h2{font-size:clamp(46px,10vw,62px)}
.pinyin-card{position:relative;display:block;width:100%;aspect-ratio:1484 / 1060;padding:0;border:0;border-radius:0;background:transparent;color:#493326;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .13s ease,filter .13s ease;overflow:visible}
.pinyin-card:active{transform:scale(.965);filter:brightness(.98)}
.pinyin-card:focus-visible{outline:3px solid #806547;outline-offset:2px;border-radius:12px}
.pinyin-card__skin{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.pinyin-card__text{position:absolute;inset:22% 8% 17%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:800;line-height:1.02;color:#493326;pointer-events:none}
.pinyin-card__value{max-width:100%;font-size:clamp(23px,7.4vw,40px);letter-spacing:.01em;white-space:nowrap}
.pinyin-card--long .pinyin-card__value{font-size:clamp(19px,6vw,32px);letter-spacing:0}
.pinyin-card__caption{margin-top:1px;font-size:clamp(9px,2.5vw,13px);font-weight:700;line-height:1.05;white-space:nowrap}
.options{align-items:center;gap:8px}
.options .pinyin-card.option-card{height:auto;min-height:0;border:0;border-radius:0;border-bottom:0;background:transparent;box-shadow:none;font-size:inherit;overflow:visible}
.options .pinyin-card.option-card[data-kind="tone"] .pinyin-card__text{inset:18% 8% 18%}
.options .pinyin-card.option-card[data-kind="tone"] .pinyin-card__caption{font-size:clamp(9px,2.6vw,13px)}
.slot{width:clamp(58px,17vw,76px);height:clamp(42px,12vw,54px);border-radius:10px;font-size:24px}
.slot.filled{overflow:visible;border:0;background:transparent;box-shadow:none}
.slot .pinyin-card.slot-value{width:calc(100% + 12px);height:calc(100% + 4px);aspect-ratio:1484 / 1060;overflow:visible}
.slot .pinyin-card__value{font-size:clamp(21px,6vw,30px)}
.slot .pinyin-card--long .pinyin-card__value{font-size:clamp(18px,5vw,25px)}
.tone-edit{top:-7px;right:-8px}
.flight-card{position:fixed;z-index:12;display:block;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:none;overflow:visible}
.flight-card .pinyin-card__skin{object-fit:contain}
.flight-card .pinyin-card__text{inset:22% 8% 17%}
@media(max-width:520px){
  .lesson-card{grid-template-columns:43% 57%;min-height:190px}
  .lesson-art{min-height:190px;padding:8px 7px 25px}
  .lesson-illustration-wrap{min-height:145px}
  .lesson-illustration{max-height:160px}
  .lesson-copy{padding:11px 8px}
  .lesson-copy h2{font-size:clamp(44px,13vw,58px);margin-bottom:8px}
  .cat-prompt{padding:7px 8px}
  .cat-prompt p{font-size:11px}
  .options{gap:5px}
  .options .pinyin-card__value{font-size:clamp(22px,7vw,31px)}
  .options .pinyin-card--long .pinyin-card__value{font-size:clamp(18px,5.6vw,26px)}
  .slot{width:clamp(53px,16vw,65px);height:clamp(39px,12vw,48px);font-size:22px}
  .slot .pinyin-card.slot-value{width:calc(100% + 10px);height:calc(100% + 3px)}
  .slot .pinyin-card__value{font-size:clamp(19px,6vw,25px)}
  .slot .pinyin-card--long .pinyin-card__value{font-size:clamp(17px,5vw,22px)}
}
@media(max-width:360px){
  .lesson-card{min-height:178px}
  .lesson-art{min-height:178px}
  .lesson-illustration-wrap{min-height:132px}
  .lesson-copy{padding-inline:6px}
  .lesson-copy h2{font-size:46px}
  .options{gap:3px}
  .slot{width:51px;height:38px}
}

.question-progress{padding:8px 12px;border-radius:99px;background:#f2eee2;color:#89785f;border:1px solid #e8deca;font-size:12px;font-weight:800;white-space:nowrap}
.header-tools{display:flex;align-items:center;gap:8px}
.sound-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #e8deca;background:#fffaf0;color:#8d795d;border-radius:13px;padding:8px 10px;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.sound-toggle:active{transform:translateY(1px)}
.audio-ui-icon{display:block;width:19px;height:16px;flex:none;object-fit:contain}
.audio-action-button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pronunciation-icon{width:20px;height:16px;object-fit:contain}
.lesson-emoji{min-height:190px;display:grid;place-items:center;font-size:clamp(76px,15vw,126px);line-height:1;filter:drop-shadow(0 9px 5px rgba(121,105,80,.11));animation:flower-sway 4s ease-in-out infinite}
.character-row{display:flex;align-items:center;justify-content:center;gap:10px}
.character-row h2{margin:2px 0 12px}
.pronunciation-button{width:40px;height:40px;margin:0 0 7px;border:1px solid #eadbbd;border-bottom-width:3px;border-radius:14px;background:#fff5dd;color:#947b51;font-size:19px;cursor:pointer;touch-action:manipulation}
.pronunciation-button:active{transform:translateY(2px);border-bottom-width:1px}
.lesson-emoji.fruit-image{font-size:clamp(44px,8vw,72px);white-space:nowrap;letter-spacing:-.18em}
.settlement-card,.parent-panel{background:rgba(255,253,247,.92);border:1px solid #ece1ce;border-radius:25px;box-shadow:0 7px 0 rgba(222,209,187,.36),0 14px 30px rgba(112,91,63,.05);padding:24px;text-align:center}
.settlement-card[hidden],.parent-panel[hidden]{display:none}
.settlement-card h2{font-size:clamp(20px,5vw,28px);margin:8px 0;color:#677b58}
.settlement-card p{color:#907c62;font-size:14px;margin:8px 0 20px}
.settlement-cat{font-size:76px;line-height:1.2;animation:cat-hop .8s ease-in-out infinite}
.settlement-actions{display:flex;gap:10px}
.settlement-actions button{min-height:54px}
.end-card{margin-top:4px}
.footer-actions{display:flex;align-items:center;gap:13px}
.parent-button{border:0;background:none;color:#a99375;padding:8px 3px;cursor:pointer;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.parent-panel{text-align:left;padding:18px;margin-top:0}
.parent-panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.parent-panel-heading h2{margin:3px 0 0;font-size:18px}
.close-parent{border:0;border-radius:50%;width:34px;height:34px;background:#f5f0e5;color:#8e7d63;font-size:24px;cursor:pointer}
.record-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.record-summary span{background:#f7f3e9;border-radius:12px;padding:8px 10px;font-size:11px;color:#8c7a61}
.record-summary strong{color:#5f7556}
.table-scroll{overflow-x:auto;border:1px solid #eee5d6;border-radius:12px}
.record-table{border-collapse:collapse;width:100%;min-width:510px;font-size:12px}
.record-table th,.record-table td{padding:9px 10px;border-bottom:1px solid #eee8dc;text-align:left;white-space:nowrap}
.record-table th{background:#f8f4eb;color:#917f65;font-size:11px}
.record-table tr:last-child td{border-bottom:0}
.record-note{margin:12px 0 0!important;font-size:11px!important;color:#a3927b!important}
@media(max-width:520px){.topbar{height:auto;min-height:65px;display:grid;grid-template-columns:1fr auto;grid-template-areas:'brand stars' 'tools tools';row-gap:5px;padding-bottom:2px}.brand-lockup{grid-area:brand}.star-counter{grid-area:stars}.header-tools{grid-area:tools;justify-self:center}.question-progress{padding:5px 10px;font-size:11px}.sound-toggle{padding:6px 9px}.lesson-emoji{min-height:156px;font-size:clamp(68px,19vw,100px)}.lesson-copy h2{font-size:58px}.pronunciation-button{width:36px;height:36px;font-size:17px}.settlement-card,.parent-panel{padding:17px 14px;border-radius:21px}.settlement-actions{flex-direction:column}.footer-actions{gap:8px}.record-summary span{font-size:10px}}

.slot-value{width:100%;height:100%;display:grid;place-items:center;padding:0;border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}
.slot-value:disabled{cursor:default}
.tone-edit{position:absolute;top:-8px;right:-9px;z-index:1;min-width:27px;height:19px;padding:0 4px;border:1px solid #dfd5ef;border-radius:99px;background:#f5f0fb;color:#85749d;font-size:9px;font-weight:800;line-height:1;cursor:pointer;touch-action:manipulation}
.tone-edit:disabled{cursor:default}
.flight-card[data-kind="tone"]{background:#f3f0fa}
.answer-actions,.help-actions{display:flex;gap:9px;justify-content:center;margin-top:13px}
.answer-actions[hidden],.help-actions[hidden]{display:none}
.options[hidden],.lesson-card[hidden],.build-card[hidden],.choice-card[hidden]{display:none}
.answer-actions .primary-button{width:min(100%,390px);min-height:60px;font-size:18px;animation:submit-breathe 2s ease-in-out infinite}
.help-actions .secondary-button{min-height:48px;padding:7px 10px;font-size:12px}
.help-actions button:disabled{opacity:.55;cursor:not-allowed}
.answer-feedback{display:flex;justify-content:center;align-items:center;gap:8px;margin:14px auto 0;padding:11px 14px;border-radius:15px;background:#f7f4ea;color:#80735e;font-size:14px;font-weight:800;text-align:center}
.answer-feedback[hidden]{display:none}
.answer-feedback[data-state="correct"]{background:#edf6e8;color:#5e8053}
.answer-feedback[data-state="incorrect"]{background:#f8f1e9;color:#927b60}
.answer-feedback[data-state="revealed"]{background:#f1eff8;color:#71668e;flex-wrap:wrap}
.feedback-icon{font-size:20px}
.answer-feedback[data-state="incorrect"] .feedback-icon{color:#a88d70}
.answer-feedback[data-state="correct"] .feedback-icon{color:#69a35c}
.syllable-board.is-incorrect{animation:gentle-check .38s ease}
@keyframes submit-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
@keyframes gentle-check{25%,75%{transform:translateX(-3px)}50%{transform:translateX(3px)}}

/* Pear-only Storybook UI V2 pilot. Activated only by ?storybook=pear on question li2. */
body.storybook-layout {
  background: radial-gradient(ellipse at 50% 0, #fffaf0 0, #f7f0df 72%);
}
body.storybook-layout .app-shell {
  gap: 10px;
  padding-top: 10px;
}
body.storybook-layout .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 58px 28px;
  gap: 1px 8px;
  height: 88px;
  align-items: center;
}
body.storybook-layout .brand-lockup {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  z-index: 0;
  min-width: 0;
  height: 58px;
  padding: 4px 16px;
  gap: 0;
}
body.storybook-layout .brand-lockup::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px -10px;
  background: url("./assets-optimized/webp/assets/desk/academy_sign_blank.webp") center / 100% 100% no-repeat;
}
body.storybook-layout .brand-lockup > div:last-child { min-width: 0; text-align: center; }
body.storybook-layout .brand-lockup .cat-avatar { display: none; }
body.storybook-layout .brand-lockup .eyebrow { margin: 0 0 1px; font-size: 8px; letter-spacing: .18em; }
body.storybook-layout .brand-lockup h1 { font-size: clamp(14px, 4vw, 19px); line-height: 1.1; white-space: nowrap; }
body.storybook-layout .header-tools {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
body.storybook-layout .question-progress { font-size: 12px; }
body.storybook-layout .sound-toggle { min-height: 26px; padding: 3px 8px; font-size: 11px; }
body.storybook-layout .star-counter {
  grid-column: 2;
  grid-row: 1;
  min-width: 58px;
  height: 48px;
  border-radius: 18px;
  background: #fff8e8;
  box-shadow: 0 3px 0 #ead7ad;
}
body.storybook-layout .lesson-card {
  position: relative;
  grid-template-columns: 56% 44%;
  min-height: 188px;
  overflow: hidden;
  border-radius: 24px;
  border-color: #e8d9bc;
  background: #fffaf0;
  box-shadow: 0 4px 0 rgba(222, 209, 187, .28);
}
body.storybook-layout .lesson-art {
  min-height: 188px;
  padding: 7px 0 8px 6px;
  background-image: linear-gradient(90deg, rgba(255,250,240,0) 56%, #fffaf0 100%), url("./assets-optimized/webp/assets/scene/scene_spring_garden.webp");
  background-size: 100% 100%, cover;
  background-position: center, 46% 53%;
  background-repeat: no-repeat;
}
body.storybook-layout .lesson-art::before,
body.storybook-layout .lesson-art::after { display: none; }
body.storybook-layout .lesson-illustration-wrap { min-height: 0; height: 100%; }
body.storybook-layout .lesson-illustration {
  width: 100%;
  height: 100%;
  max-height: 174px;
  object-fit: contain;
  filter: drop-shadow(0 5px 4px rgba(96, 78, 46, .13));
}
body.storybook-layout .lesson-art .art-label,
body.storybook-layout .lesson-copy > .tiny-label,
body.storybook-layout .lesson-copy .cat-prompt { display: none; }
body.storybook-layout .lesson-copy {
  z-index: 1;
  align-items: center;
  justify-content: center;
  padding: 12px 8px 12px 0;
  background: linear-gradient(90deg, rgba(255,250,240,0), #fffaf0 24%);
}
body.storybook-layout .lesson-copy .character-row { gap: 4px; }
body.storybook-layout .lesson-copy h2 {
  margin: 0;
  color: #5b3925;
  font-size: clamp(64px, 17vw, 84px);
  line-height: 1;
}
body.storybook-layout .pronunciation-button {
  width: 45px;
  height: 45px;
  min-width: 45px;
  margin-left: 1px;
  border-radius: 50%;
  background: #fff4d8;
  border-color: #ecd7a8;
  color: #68452d;
}
body.storybook-layout .lesson-copy .character-row { gap: clamp(38px, 6vw, 58px); }
body.storybook-layout .pronunciation-button { margin-left: 4px; }
body.storybook-layout .lesson-copy .character-row { gap: 8px; }
body.storybook-layout .pronunciation-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: 0 0 0 -4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
}
body.storybook-layout .pronunciation-button .pronunciation-icon { width: 23px; height: 20px; }
body.storybook-layout .build-card,
body.storybook-layout .choice-card {
  border: 1px solid #ecdfc8;
  border-radius: 21px;
  background: rgba(255, 253, 247, .93);
  box-shadow: 0 3px 0 rgba(222, 209, 187, .22);
}
body.storybook-layout .build-card { padding-top: 14px; padding-bottom: 13px; }
body.storybook-layout .choice-card { padding-top: 14px; }
body.storybook-layout .section-heading h2 { color: #634b34; }
body.storybook-layout .syllable-board {
  min-height: 78px;
  margin-top: 10px;
  border: 1px dashed #ddcbaa;
  border-radius: 15px;
  background: rgba(251, 247, 237, .74);
}
body.storybook-layout .teaching-line { margin-top: 8px; }
body.storybook-layout .choice-heading { margin-bottom: 10px; }
body.storybook-layout .cat-interaction.answer-feedback {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 174px;
  margin: 0 0 8px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.storybook-layout .cat-interaction.answer-feedback::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("./assets-optimized/webp/assets/desk/desk_scene_background.webp") center bottom / 100% auto no-repeat;
}
body.storybook-layout .feedback-cat-frame {
  position: absolute;
  z-index: 1;
  left: 2%;
  bottom: 18px;
  width: clamp(102px, 32vw, 132px);
  height: clamp(104px, 34vw, 138px);
}
body.storybook-layout .feedback-cat-image { filter: drop-shadow(0 3px 3px rgba(71, 52, 30, .12)); }
body.storybook-layout .feedback-cat-frame[data-state="thinking"] .feedback-cat-image { animation: cat-breathe 3.2s ease-in-out infinite; }
body.storybook-layout .feedback-cat-frame[data-state="confused"] .feedback-cat-image { transform: rotate(-2deg); }
body.storybook-layout .feedback-cat-frame[data-state="encourage"] .feedback-cat-image { transform: rotate(1deg); }
body.storybook-layout .feedback-cat-frame[data-state="celebrate"] .feedback-cat-image,
body.storybook-layout .feedback-cat-frame[data-state="happy"] .feedback-cat-image { animation: cat-gentle-hop .7s ease-in-out 2; }
body.storybook-layout .feedback-copy {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 8px;
  width: min(58%, 250px);
}
body.storybook-layout .feedback-bubble {
  min-height: 48px;
  padding: 9px 11px;
  border-color: rgba(234, 218, 191, .92);
  background: rgba(255, 253, 247, .96);
  font-size: 13px;
  box-shadow: 0 2px 0 rgba(209, 180, 137, .25);
}
body.storybook-layout .cat-interaction.answer-feedback::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: url("./assets-optimized/webp/assets/desk/desk_front_edge.webp") center bottom / 100% auto no-repeat;
}
body.storybook-layout .answer-actions,
body.storybook-layout .help-actions,
body.storybook-layout .finish-actions { position: relative; z-index: 4; }
@media (max-width: 520px) {
  body.storybook-layout .app-shell { gap: 8px; padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
  body.storybook-layout .topbar { height: 82px; grid-template-rows: 52px 26px; }
  body.storybook-layout .brand-lockup { height: 52px; padding-inline: 13px; }
  body.storybook-layout .star-counter { min-width: 53px; height: 43px; padding-inline: 8px; }
  body.storybook-layout .lesson-card { grid-template-columns: 55% 45%; min-height: 172px; }
  body.storybook-layout .lesson-art { min-height: 172px; }
  body.storybook-layout .lesson-illustration { max-height: 158px; }
  body.storybook-layout .lesson-copy h2 { font-size: clamp(58px, 16vw, 72px); }
  body.storybook-layout .pronunciation-button { width: 40px; height: 40px; min-width: 40px; font-size: 17px; }
  body.storybook-layout .build-card,
  body.storybook-layout .choice-card { padding: 12px 12px 11px; }
  body.storybook-layout .syllable-board { min-height: 70px; }
  body.storybook-layout .cat-interaction.answer-feedback { min-height: 150px; }
  body.storybook-layout .feedback-cat-frame { bottom: 14px; width: clamp(96px, 30vw, 116px); height: clamp(98px, 31vw, 122px); }
  body.storybook-layout .feedback-copy { top: 8px; right: 5px; width: 59%; }
  body.storybook-layout .feedback-bubble { min-height: 44px; padding: 8px 9px; font-size: 12px; }
  body.storybook-layout .cat-interaction.answer-feedback::after { height: 40%; }
}
@media (max-width: 360px) {
  body.storybook-layout .lesson-card { grid-template-columns: 53% 47%; }
  body.storybook-layout .feedback-copy { width: 60%; }
}

body.storybook-layout #resetExperiment { display: none; }


/* Pear-only V2.1 layout refinement. */
body.storybook-layout .brand-lockup {
  width: min(246px, 100%);
  height: 58px;
  padding: 0;
}
body.storybook-layout .brand-lockup::before { inset: 0; background-size: 100% 100%; }
body.storybook-layout .brand-copy {
  position: absolute;
  left: 17%; right: 17%; top: 50%;
  min-width: 0;
  transform: translateY(-50%);
  text-align: center;
  white-space: nowrap;
}
body.storybook-layout .brand-copy .eyebrow { font-size: 7px; letter-spacing: .15em; margin: 0 0 2px; }
body.storybook-layout .brand-copy h1 { font-size: clamp(14px, 3.8vw, 18px); letter-spacing: 0; }
body.storybook-layout .lesson-card { min-height: 150px; }
body.storybook-layout .lesson-art { min-height: 150px; }
body.storybook-layout .lesson-illustration { max-height: 140px; }
body.storybook-layout .lesson-copy h2 { font-size: clamp(58px, 15vw, 72px); }
body.storybook-layout .pronunciation-button { display: grid; place-items: center; }
body.storybook-layout .pronunciation-icon { display: block; width: 25px; height: 21px; object-fit: contain; }
body.storybook-layout .build-card { padding: 14px 16px 13px; }
body.storybook-layout .syllable-board { min-height: 110px; padding: 12px 10px; overflow: visible; }
body.storybook-layout .slots { gap: clamp(8px, 2vw, 13px); }
body.storybook-layout .slot:not(.plus) {
  width: clamp(80px, 22vw, 86px);
  height: clamp(66px, 18vw, 76px);
  border-radius: 16px;
  font-size: 32px;
}
body.storybook-layout .slot.plus { font-size: 24px; }
body.storybook-layout .slot .pinyin-card.slot-value { width: 100%; height: 100%; }
body.storybook-layout .slot .pinyin-card__value { font-size: clamp(27px, 7.5vw, 34px); }
body.storybook-layout .slot .pinyin-card--long .pinyin-card__value { font-size: clamp(22px, 6vw, 28px); }
body.storybook-layout .cat-interaction.answer-feedback {
  min-height: 126px;
  margin: 2px 0 4px;
  transition: min-height .28s ease, margin .28s ease;
}
body.storybook-layout .cat-interaction.answer-feedback::before {
  inset: 0;
  background-position: center bottom;
  background-size: 100% auto;
}
body.storybook-layout .feedback-cat-frame {
  z-index: 2;
  left: 3%; bottom: 2px;
  width: clamp(108px, 34vw, 136px);
  height: clamp(108px, 34vw, 136px);
  transition: width .28s ease, height .28s ease, bottom .28s ease, left .28s ease;
}
body.storybook-layout .feedback-cat-image { object-fit: contain; }
body.storybook-layout .feedback-copy { top: 8px; right: 8px; width: min(58%, 245px); }
body.storybook-layout .cat-interaction.answer-feedback::after { display: none; }
body.storybook-layout .cat-interaction.answer-feedback.cat-scene--compact { min-height: 96px; }
body.storybook-layout .cat-interaction.answer-feedback.cat-scene--compact .feedback-cat-frame {
  left: 2%; bottom: 0; width: 104px; height: 104px;
}
body.storybook-layout .cat-interaction.answer-feedback.cat-scene--compact .feedback-copy { top: 4px; }
body.storybook-layout .cat-interaction.answer-feedback,
body.storybook-layout .feedback-cat-frame,
body.storybook-layout .feedback-copy { transition-timing-function: cubic-bezier(.2,.7,.25,1); }
@media (max-width: 520px) {
  body.storybook-layout .brand-lockup { width: min(236px, 100%); height: 52px; }
  body.storybook-layout .brand-copy { left: 18%; right: 18%; }
  body.storybook-layout .brand-copy h1 { font-size: clamp(13px, 3.8vw, 16px); }
  body.storybook-layout .lesson-card, body.storybook-layout .lesson-art { min-height: 136px; }
  body.storybook-layout .lesson-illustration { max-height: 128px; }
  body.storybook-layout .lesson-copy { padding-right: 5px; }
  body.storybook-layout .lesson-copy h2 { font-size: clamp(54px, 14vw, 64px); }
  body.storybook-layout .pronunciation-button { width: 38px; height: 38px; min-width: 38px; }
  body.storybook-layout .pronunciation-icon { width: 23px; height: 19px; }
  body.storybook-layout .build-card { padding: 12px 12px 11px; }
  body.storybook-layout .syllable-board { min-height: 104px; padding-inline: 8px; }
  body.storybook-layout .slot:not(.plus) { width: clamp(80px, 22vw, 86px); height: clamp(66px, 18vw, 76px); }
  body.storybook-layout .cat-interaction.answer-feedback { min-height: 122px; }
  body.storybook-layout .cat-interaction.answer-feedback.cat-scene--compact { min-height: 92px; }
  body.storybook-layout .feedback-cat-frame { bottom: 0; width: clamp(106px, 34vw, 132px); height: clamp(106px, 34vw, 132px); }
  body.storybook-layout .cat-interaction.answer-feedback.cat-scene--compact .feedback-cat-frame { width: 98px; height: 98px; }
  body.storybook-layout .feedback-copy { top: 6px; right: 4px; width: 60%; }
  body.storybook-layout .feedback-bubble { min-height: 42px; font-size: 12px; }
}
@media (max-width: 380px) {
  body.storybook-layout .slot:not(.plus) { width: clamp(80px, 22vw, 82px); }
  body.storybook-layout .slots { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  body.storybook-layout .cat-interaction.answer-feedback,
  body.storybook-layout .feedback-cat-frame,
  body.storybook-layout .feedback-copy { transition: none !important; }
}

@media (max-width: 520px) {
  body.storybook-layout { overflow-x: clip; }
  body.storybook-layout .app-shell,
  body.storybook-layout .app-shell > *,
  body.storybook-layout .topbar,
  body.storybook-layout .lesson-card,
  body.storybook-layout .build-card,
  body.storybook-layout .choice-card { min-width: 0; max-width: 100%; }
  body.storybook-layout .lesson-card { grid-template-columns: minmax(0, 55%) minmax(0, 45%); }
  body.storybook-layout .lesson-art,
  body.storybook-layout .lesson-copy,
  body.storybook-layout .header-tools { min-width: 0; }
}


/* Boat pilot: reuse the approved pear layout and use the cozy home scene. */
body.storybook-chuan .lesson-art {
  background-image: linear-gradient(90deg, rgba(255,250,240,0) 56%, #fffaf0 100%), url("./assets-optimized/webp/assets/scene/scene_cozy_home.webp");
  background-size: 100% 100%, cover;
  background-position: center, center 62%;
  background-repeat: no-repeat;
}

/* The approved storybook layout now serves the full playable bank. */
body.storybook-layout .lesson-art {
  background-image: linear-gradient(90deg, rgba(255,250,240,0) 56%, #fffaf0 100%), var(--question-scene-image, url("./assets-optimized/webp/assets/scene/scene_spring_garden.webp"));
  background-size: 100% 100%, cover;
  background-position: center, center 62%;
  background-repeat: no-repeat;
}

/* Make the tone editor a clearly labeled, child-friendly touch target. */
body.storybook-layout .slot.has-tone-selection { overflow: visible; }
body.storybook-layout .tone-edit {
  top: -13px;
  right: -8px;
  transform: none;
  width: 66px;
  min-width: 66px;
  height: 30px;
  min-height: 30px;
  padding: 0 5px;
  border: 2px solid #e5bd5e;
  border-radius: 12px;
  background: #fff5cf;
  color: #664b16;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(187, 145, 47, .2);
  cursor: pointer;
  touch-action: manipulation;
}
body.storybook-layout .tone-edit::after {
  content: "";
  position: absolute;
  inset: -7px;
}
body.storybook-layout .tone-edit:focus-visible {
  outline: 3px solid #765c2e;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  body.storybook-layout .tone-edit { transition: none !important; }
}

.hall-return{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 11px;border:1px solid #e8deca;border-radius:13px;background:#fffaf0;color:#89765c;text-decoration:none;font-size:11px;font-weight:900;white-space:nowrap;touch-action:manipulation}.hall-return:focus-visible{outline:3px solid #d7ad57;outline-offset:3px}
@media(max-width:520px){.header-tools{flex-wrap:wrap;justify-content:center}.hall-return{min-height:36px;padding-inline:9px}}

.previous-question{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 11px;border:1px solid #e8deca;border-radius:13px;background:#fffaf0;color:#89765c;font-size:11px;font-weight:900;white-space:nowrap;touch-action:manipulation}.previous-question:disabled{opacity:.46;cursor:default}.previous-question:focus-visible{outline:3px solid #d7ad57;outline-offset:3px}
@media(max-width:520px){.previous-question{min-height:36px;padding-inline:9px}}
.star-counter small{align-self:flex-end;margin:0 0 7px 1px;color:#927d5c;font-size:9px;font-weight:900;white-space:nowrap}
.round-badge-result{padding:10px 12px;border-radius:14px;background:#f5eedb;color:#786342!important;font-weight:800}
.round-badge-result img{vertical-align:middle;object-fit:contain;margin-right:8px}

/* Lite practice header: keep the title and right-aligned hall/audio controls on one row. */
body.storybook-layout .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:52px 30px;gap:2px 8px;height:88px;min-height:88px;align-items:center;}
body.storybook-layout .brand-lockup{grid-column:1;grid-row:1;width:auto;height:52px;padding:3px 14px;}
body.storybook-layout .practice-header-actions{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;}
body.storybook-layout .practice-header-actions .hall-return{min-height:36px;padding-inline:9px;font-size:10px;}
body.storybook-layout .practice-header-actions .sound-toggle{min-height:36px;padding:5px 8px;}
body.storybook-layout .header-tools{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;}
body.storybook-layout .header-tools .question-progress{margin-inline:auto;}
@media(max-width:520px){body.storybook-layout .topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px 30px;height:82px;min-height:82px;gap:2px 5px;}body.storybook-layout .brand-lockup{width:auto;height:48px;padding-inline:8px;}body.storybook-layout .brand-copy{left:12%;right:12%;}body.storybook-layout .brand-copy h1{font-size:clamp(13px,4vw,16px);}body.storybook-layout .practice-header-actions{gap:4px;}body.storybook-layout .practice-header-actions .hall-return{min-height:34px;padding-inline:7px;font-size:10px;}body.storybook-layout .practice-header-actions .sound-toggle{min-height:34px;padding:4px 6px;font-size:10px;}body.storybook-layout .practice-header-actions .audio-ui-icon{width:16px;height:14px;}body.storybook-layout .header-tools{grid-row:2;}}
.round-badge-result{display:flex;flex-direction:column;align-items:center;gap:7px;margin:0 auto 14px;padding:0;background:transparent;color:#786342!important;}
.round-badge-result[hidden],.settlement-progress[hidden]{display:none!important;}
.round-badge-result img{display:block;width:clamp(118px,32vw,148px);height:clamp(118px,32vw,148px);object-fit:contain;margin:0;filter:drop-shadow(0 6px 7px #69553620);}
.settlement-badge-name{font-size:18px;color:#665239;}
.settlement-badge-level{font-size:13px;color:#9a805c;}
.settlement-progress{margin:0 auto 12px!important;padding:10px 14px;border-radius:15px;background:#f6efd9;color:#876c43!important;font-weight:800;}
.lite-round-settlement .step-kicker{display:block;margin:2px 0 4px;}
.lite-round-settlement h2{margin:4px 0 14px;}
.lite-round-settlement .settlement-stat{margin:7px 0 11px;}
.lite-round-settlement .settlement-actions{margin-top:22px;}
.lite-round-settlement .settlement-actions a{display:flex;flex:1;align-items:center;justify-content:center;min-height:54px;text-decoration:none;}
.lite-round-settlement #settlementStars{display:none!important;}
.app-shell.is-settled .topbar,.app-shell.is-settled .practice-note,.app-shell.is-settled .lesson-card,.app-shell.is-settled .build-card,.app-shell.is-settled .choice-card,.app-shell.is-settled footer,.app-shell.is-settled .parent-panel,.app-shell.is-settled .end-card{display:none!important;}
.app-shell.is-settled{min-height:100svh;justify-content:center;}
@media(max-width:520px){.lite-round-settlement{padding:24px 18px!important;}.lite-round-settlement .settlement-actions{flex-direction:column;}}