:root{font-family:Arial Rounded MT Bold,PingFang SC,Microsoft YaHei,sans-serif;color:#6f3717;background:#e9b779;font-synthesis:none;--paper-ease: cubic-bezier(.25, 1, .5, 1);--scene-ratio: 1.7768331562;--shake-distance: 6px;--shake-overshoot: 4px;--shake-dur-a: 80ms;--shake-dur-b: 60ms;--shake-ease: cubic-bezier(.22, 1, .36, 1);--stagger-dur: .5s;--stagger-distance: 12px;--stagger-stagger: 40ms;--stagger-blur: 3px;--stagger-ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;background:#e9b779;-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;background:#e9b779}.game-shell:before{content:"";position:absolute;z-index:-2;top:-5vmax;right:-5vmax;bottom:-5vmax;left:-5vmax;background:url(/assets/tang-poem-room.png) center / cover no-repeat;filter:blur(clamp(18px,2.4vmax,42px)) saturate(.9) brightness(.94);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%,#ffeccd03 34%,#7037121f),#d48b430a;pointer-events:none}.game-stage{position:fixed;z-index:0;top:0;right:0;bottom:0;left:0;overflow:hidden;isolation:isolate;background:#e9b779}.scene-layer{position:absolute;left:50%;top:50%;width:max(100%,calc(100dvh * var(--scene-ratio)));aspect-ratio:1672 / 941;transform:translate(-50%,-50%);overflow:hidden;container-type:size;background:url(/assets/tang-poem-room.png) center / cover no-repeat}.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%}.live-paper{position:absolute;z-index:2;left:29.9%;top:31.8%;width:41.9%;height:42.1%;border:2px solid transparent;border-radius:.6cqw;transition:border-color .15s ease-out;will-change:transform}.live-paper.paper-error{border-color:#ec765f}.live-paper.is-shaking{animation:paper-error-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear}@keyframes paper-error-shake{0%{transform:translate(0);animation-timing-function:var(--shake-ease)}28.57%{transform:translate(var(--shake-distance));animation-timing-function:var(--shake-ease)}57.14%{transform:translate(calc(var(--shake-distance) * -1));animation-timing-function:var(--shake-ease)}78.57%{transform:translate(var(--shake-overshoot));animation-timing-function:var(--shake-ease)}to{transform:translate(0)}}.paper-clip{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:inherit;background:transparent;box-shadow:none}.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:#fff9e51f;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:KaiTi,serif;font-size:clamp(15px,2cqw,40px);font-weight:800;color:#754019}.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.38cqw,23px);font-weight:700;letter-spacing:-.03em}.hanzi-row{margin-top:4%;font-family:KaiTi,serif;font-size:clamp(30px,3.48cqw,58px);font-weight:800;line-height:1}.paper-line-content[data-line-length="7"] .pinyin-row{font-size:clamp(9px,1.04cqw,17px)}.paper-line-content[data-line-length="7"] .hanzi-row{margin-top:3%;font-size:clamp(23px,2.78cqw,46px)}.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:#754019}.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,.72cqw,12px);color:#6f3717ad}.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,.82cqw,14px);box-shadow:0 8px 18px #78432a29;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}.gentle-hint.is-shown{opacity:1;visibility:visible;transition:opacity .12s ease-out,visibility 0s linear}.t-stagger-line{display:inline-block;opacity:0;transform:translateY(var(--stagger-distance));filter:blur(var(--stagger-blur));transition:opacity var(--stagger-dur) var(--stagger-ease),transform var(--stagger-dur) var(--stagger-ease),filter var(--stagger-dur) var(--stagger-ease);will-change:transform,opacity,filter}.t-stagger-line--2{margin-left:.2em;transition-delay:var(--stagger-stagger)}.t-stagger.is-shown .t-stagger-line{opacity:1;transform:translateY(0);filter:blur(0)}.t-stagger.is-hiding .t-stagger-line{opacity:0;transform:translateY(0);filter:blur(0);transition:opacity .2s ease,transform 0s linear,filter 0s linear;transition-delay:0s}.bottom-controls{position:absolute;z-index:3;left:40.5%;right:29.5%;bottom:7%;height:7%;display:flex;align-items:center;justify-content:space-between}.next-button{position:relative;width:70%;height:100%;border:clamp(3px,.24cqw,4px) solid #ffc37b;border-radius:999px;background:#ff9026;color:#fff;font-size:clamp(18px,1.85cqw,31px);font-weight:900;text-shadow:0 2px 0 rgba(154,70,13,.28);box-shadow:0 6px #cd5b17,0 11px 20px #713d173d;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:.8cqw}.round-button{display:grid;place-items:center;width:clamp(42px,4.25cqw,71px);aspect-ratio:1;border:clamp(3px,.3cqw,5px) solid rgba(255,255,255,.94);border-radius:50%;color:#fff;font-size:clamp(18px,2cqw,34px);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:76%;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.15cqw,19px);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){.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}.live-paper.is-shaking{animation:none!important;transform:none!important}.t-stagger-line{transition:none!important;transform:none!important;filter:none!important}}@keyframes paper-fade-out{0%{opacity:1}to{opacity:0}}@keyframes paper-fade-in{0%{opacity:0}to{opacity:1}}