:root{font-family:Arial Rounded MT Bold,PingFang SC,Microsoft YaHei,sans-serif;color:#173c66;background:#b9e6f8;font-synthesis:none;--paper-ease: cubic-bezier(.25, 1, .5, 1)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;background:#74c8ed;-webkit-font-smoothing:antialiased}#root{min-height:100vh;min-height:100dvh}button{font:inherit}.game-shell{position:relative;isolation:isolate;width:100vw;height:100vh;height:100dvh;min-height:100dvh;overflow:hidden;display:grid;place-items:center;background:#b9e6f8}.game-shell:before{content:"";position:absolute;z-index:-2;top:-5vmax;right:-5vmax;bottom:-5vmax;left:-5vmax;background:url(/assets/ui-base-clean-v2.png) center / cover no-repeat;filter:blur(clamp(18px,2.4vmax,42px)) saturate(.9) brightness(.96);transform:scale(1.04);pointer-events:none}.game-shell:after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 48%,#b9e6f805 30%,#245e822e),#74c8ed14;pointer-events:none}.game-stage{position:relative;z-index:0;width:min(100vw,140.625dvh);max-width:100vw;max-height:100dvh;aspect-ratio:1440 / 1024;overflow:hidden;isolation:isolate;background:#74c8ed;box-shadow:0 20px 70px #19415e52}.visual-source{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none}.magic-particles{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;opacity:.82}.magic-particles canvas{width:100%;height:100%}.star-progress{position:absolute;z-index:3;top:13.2%;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:clamp(5px,.65vw,10px);padding:clamp(5px,.6vw,9px) clamp(10px,1.2vw,18px);border:3px solid rgba(255,255,255,.5);border-radius:999px;background:#3777adb8;box-shadow:0 5px 12px #1e4b7338,inset 0 2px 5px #ffffff3d;font-size:clamp(20px,3vw,44px)}.star-progress svg{filter:drop-shadow(0 3px 0 rgba(95,70,39,.22));transition:color .18s ease,transform .18s ease,filter .18s ease}.star-progress .earned{color:#ffd43f;stroke:#e99b14;stroke-width:12}.star-progress .unearned{color:#dbe6ee;stroke:#a8b9c8;stroke-width:12;filter:none}.live-paper{position:absolute;z-index:2;left:31.8%;top:20.2%;width:46.7%;height:33.6%;border:2px solid rgba(216,170,103,.28);border-radius:2.2vw;transition:transform .16s ease,border-color .16s ease}.live-paper.paper-error{transform:translate(-.45%);border-color:#ec765f}.paper-clip{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:inherit;background:#fff9e5f9;box-shadow:inset 0 0 20px #cda05c14}.paper-clip:before,.paper-clip:after{content:"";position:absolute;z-index:4;left:1.5%;right:1.5%;height:8%;pointer-events:none;opacity:0;transition:opacity .14s ease}.paper-clip:before{top:0;background:linear-gradient(to bottom,rgba(104,72,34,.18),transparent)}.paper-clip:after{bottom:0;background:linear-gradient(to top,rgba(104,72,34,.1),transparent)}.paper-motion-line-roll .paper-clip:before,.paper-motion-poem-roll .paper-clip:before,.paper-motion-poem-roll .paper-clip:after{opacity:1}.paper-sheet{position:absolute;top:0;right:0;bottom:0;left:0;padding:4.2% 3% 1.5%;background:#fff9e5f9;transform-origin:center top}.paper-line-viewport{position:absolute;top:24%;left:3%;right:3%;height:60%;overflow:hidden}.paper-line{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;transform:translateZ(0)}.paper-line-content{width:100%}.paper-line .pinyin-row{margin-top:0}.paper-motion-line-roll .outgoing-line{animation:paper-line-out .42s var(--paper-ease) both;will-change:transform,opacity}.paper-motion-line-roll .incoming-line{animation:paper-line-in .42s var(--paper-ease) both;will-change:transform,opacity}.paper-motion-poem-roll .outgoing-sheet{animation:paper-sheet-out .7s var(--paper-ease) both;will-change:transform,opacity}.paper-motion-poem-roll .incoming-sheet{animation:paper-sheet-in .7s var(--paper-ease) both;will-change:transform,opacity}@keyframes paper-line-out{0%{transform:translateZ(0) scaleY(1);opacity:1}to{transform:translate3d(0,-108%,0) scaleY(.88);opacity:0}}@keyframes paper-line-in{0%{transform:translate3d(0,108%,0) scaleY(.92);opacity:0}to{transform:translateZ(0) scaleY(1);opacity:1}}@keyframes paper-sheet-out{0%{transform:translateZ(0) scaleY(1);opacity:1}to{transform:translate3d(0,-108%,0) scaleY(.9);opacity:.12}}@keyframes paper-sheet-in{0%{transform:translate3d(0,108%,0) scaleY(.92);opacity:.18}to{transform:translateZ(0) scaleY(1);opacity:1}}.poem-heading{position:absolute;top:9.5%;left:0;right:0;display:flex;justify-content:center;gap:.65em;font-family:STKaiti,KaiTi,serif;font-size:clamp(14px,2.1vw,31px);color:#173c66}.pinyin-row,.hanzi-row{display:grid;grid-template-columns:repeat(var(--line-length, 5),minmax(0,1fr));align-items:center;text-align:center}.pinyin-row{margin-top:4%;min-height:18%;font-size:clamp(12px,1.95vw,29px);font-weight:700;letter-spacing:-.03em}.hanzi-row{margin-top:4%;font-family:STKaiti,KaiTi,serif;font-size:clamp(28px,5.2vw,74px);font-weight:800;line-height:1}.paper-line-content[data-line-length="7"] .pinyin-row{font-size:clamp(8px,1.48vw,21px)}.paper-line-content[data-line-length="7"] .hanzi-row{margin-top:3%;font-size:clamp(22px,4.15vw,59px)}.syllable,.hanzi-row span{transition:color .16s ease,transform .16s ease}.syllable.current{display:flex;flex-direction:column;align-items:center;gap:.18em;line-height:1}.tone-pinyin{color:#e9a400}.tone-letter{color:#e9a400;transition:color .16s ease}.done{color:#31a35c}.current{color:#e9a400}.tone-letter.is-correct{color:#31a35c}.hanzi-row .current{transform:translateY(-4%) scale(1.08)}.waiting{color:#173c66}.paper-error .tone-letter.is-current{color:#e65742}.paper-status{position:absolute;left:6%;right:6%;bottom:3.5%;display:flex;justify-content:space-between;font-size:clamp(8px,.95vw,14px);color:#173c66a8}.gentle-hint{position:absolute;left:50%;bottom:-13%;transform:translate(-50%);width:max-content;padding:.55em 1.1em;border-radius:999px;background:#fff0ea;color:#ca4f3c;font-size:clamp(9px,1vw,15px);box-shadow:0 8px 18px #78432a29}.bottom-controls{position:absolute;z-index:3;left:39.2%;right:7.2%;bottom:5.8%;height:10.6%;display:flex;align-items:center;justify-content:space-between}.next-button{position:relative;width:49.1%;height:100%;border:5px solid #ffc37b;border-radius:999px;background:#ff9026;color:#fff;font-size:clamp(24px,3.7vw,54px);font-weight:900;text-shadow:0 2px 0 rgba(154,70,13,.28);box-shadow:0 8px #cd5b17,0 14px 24px #713d1740;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.next-button:hover,.next-button:focus-visible{transform:translateY(-3%)}.next-button:active{transform:translateY(5%);box-shadow:0 3px #cd5b17,0 8px 14px #713d1738}.next-button:disabled,.result-actions button:disabled{cursor:wait;filter:saturate(.65);opacity:.78}.round-controls{display:flex;align-items:center;gap:1.1vw}.round-button{display:grid;place-items:center;width:clamp(44px,7.5vw,108px);aspect-ratio:1;border:5px solid rgba(255,255,255,.94);border-radius:50%;color:#fff;font-size:clamp(20px,3.4vw,49px);box-shadow:0 6px #285f7757,0 12px 20px #2c485733;cursor:pointer}.round-button.sound{background:#65c84f}.round-button:not(.is-on){filter:saturate(.55)}.overlay{position:absolute;z-index:10;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#163c665c;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.welcome-card,.result-card{width:min(44%,600px);padding:3.6% 4%;border:6px solid #ffe1a8;border-radius:clamp(26px,3.5vw,52px);background:#fff8e5;text-align:center;box-shadow:0 20px 60px #19384c52}.eyebrow{margin:0 0 .55em;color:#e36d32;font-size:clamp(11px,1.3vw,19px);font-weight:900;letter-spacing:.08em}.welcome-card h1,.result-card h2{margin:0;color:#173c66;line-height:1.14;font-size:clamp(30px,4.2vw,61px)}.welcome-card p:not(.eyebrow){max-width:28em;margin:1em auto 1.4em;color:#52708b;font-size:clamp(11px,1.35vw,20px);line-height:1.7}.primary-action,.install-action,.result-actions button{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:3.2em;padding:.75em 1.4em;border:0;border-radius:999px;background:#ff8b2b;color:#fff;font-size:clamp(13px,1.55vw,23px);font-weight:900;box-shadow:0 6px #c95e1d;cursor:pointer}.welcome-actions{display:flex;align-items:stretch;justify-content:center;gap:clamp(8px,1.1vw,18px)}.welcome-actions button{flex:1 1 0;min-width:0;max-width:11em;min-height:3.35em;padding-inline:clamp(.65em,1.2vw,1.4em);white-space:nowrap}.install-action{background:#42a9df;box-shadow:0 6px #2474a2}.reciting-badge{position:absolute;z-index:8;left:50%;top:62%;transform:translate(-50%);display:flex;align-items:center;gap:.7em;padding:.8em 1.4em;border-radius:999px;background:#fff7df;color:#e16b2d;font-size:clamp(12px,1.5vw,21px);font-weight:900;box-shadow:0 12px 32px #34525e42}.result-card{width:min(52%,700px)}.result-card h2{font-size:clamp(24px,3vw,44px)}.result-poem{margin-top:.7em;font-family:STKaiti,KaiTi,serif;font-size:clamp(21px,2.5vw,37px);color:#2d6e91}.result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;margin:1.7em 0}.result-metrics div{padding:1em .4em;border-radius:20px;background:#eef8e8}.result-metrics span,.result-metrics strong{display:block}.result-metrics span{color:#617888;font-size:clamp(9px,1vw,15px)}.result-metrics strong{margin-top:.22em;color:#25844e;font-size:clamp(20px,2.4vw,35px)}.result-actions{display:flex;justify-content:center;gap:1em}.result-actions button:first-child{background:#43a9df;box-shadow:0 6px #2677a5}button:focus-visible{outline:4px solid #173c66;outline-offset:4px}@media(max-aspect-ratio:4 / 5){.game-stage{width:100vw}.welcome-card,.result-card{width:72%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.paper-motion-line-roll .outgoing-line,.paper-motion-poem-roll .outgoing-sheet{animation-name:paper-fade-out!important;animation-duration:.1s!important}.paper-motion-line-roll .incoming-line,.paper-motion-poem-roll .incoming-sheet{animation-name:paper-fade-in!important;animation-duration:.1s!important}}@keyframes paper-fade-out{0%{opacity:1}to{opacity:0}}@keyframes paper-fade-in{0%{opacity:0}to{opacity:1}}