:root{--font-rounded: "SF Pro Rounded", ui-rounded, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;font-family:var(--font-rounded);font-weight:500;color:#445b83;background:#dca477;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:#dca477;-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:#dca477}.game-shell:before{content:"";position:absolute;z-index:-2;top:-5vmax;right:-5vmax;bottom:-5vmax;left:-5vmax;background-image:url(/assets/tang-poem-room.png);background-image:image-set(url(/assets/tang-poem-room.webp) 1x);background-position:center;background-size:cover;background-repeat: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:#8b532d14;pointer-events:none}.game-stage{position:fixed;z-index:0;top:0;right:0;bottom:0;left:0;overflow:hidden;isolation:isolate;background:transparent}.scene-layer{position:absolute;left:50%;top:50%;width:calc(100dvh * var(--scene-ratio));height:100dvh;aspect-ratio:1672 / 941;transform:translate(-50%,-50%);overflow:hidden;container-type:size;background-image:url(/assets/tang-poem-room.png);background-image:image-set(url(/assets/tang-poem-room.webp) 1x);background-position:center;background-size:100% 100%;background-repeat: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:30.45%;top:31.3%;width:41.25%;height:46.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-recitation-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:0;background:transparent;transform-origin:center top}.paper-line-viewport{position:absolute;top:26%;left:0;right:0;height:58%;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%;padding-inline:2.5%}.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-recitation-roll .outgoing-recitation{animation:paper-line-out .42s var(--paper-ease) both;will-change:transform,opacity}.paper-motion-recitation-roll .incoming-recitation{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:5.5%;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.08em;line-height:1.05}.poem-heading strong{font-family:var(--font-rounded);font-size:2.6cqw;font-weight:500;line-height:1.5;color:#374b73}.poem-heading span{font-family:var(--font-rounded);font-size:1.6cqw;font-weight:500;color:#b8824d}.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:0;min-height:18%;font-family:var(--font-rounded);font-size:2.033cqw;font-weight:500;line-height:1.1;letter-spacing:.08em;color:#6f89a8}.hanzi-row{margin-top:6%;font-family:var(--font-rounded);font-size:4.306cqw;font-weight:600;line-height:1;color:#445b83}.paper-line-content[data-line-length="7"] .pinyin-row{font-size:1.794cqw}.paper-line-content[data-line-length="7"] .hanzi-row{margin-top:5%;font-size:3.947cqw}.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;transform:scale(1.2)}.tone-pinyin{color:#df8d1b}.tone-letter{color:#df8d1b;transition:color .16s ease}.syllable.done,.syllable.waiting{color:#6f89a8}.hanzi-row span{color:#445b83;-webkit-text-stroke:.1cqw #fff;paint-order:stroke fill}.tone-letter.is-correct{color:#47a36a}.hanzi-row .current{color:#445b83;transform:scale(1.1)}.hanzi-row .waiting{color:#c9d2dd;-webkit-text-stroke-color:#fff}.hanzi-row .is-speaking{color:#f4b126}.paper-error .tone-letter.is-current{color:#dd4f43}.recitation-cue{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#f4b126;transform:translateZ(0)}.recitation-cue-title{font-family:var(--font-rounded);font-size:3.349cqw;font-weight:700;color:#374b73}.recitation-cue-author{font-family:var(--font-rounded);font-size:2.153cqw;font-weight:500;color:#b8824d}.recitation-cue-line{font-family:var(--font-rounded);font-size:4.306cqw;font-weight:900;color:#f4b126;-webkit-text-stroke:.06cqw #c57a00;paint-order:stroke fill}.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:500;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:500;letter-spacing:.08em}.welcome-card h1,.result-card h2{margin:0;color:#173c66;line-height:1.14;font-size:clamp(30px,4.2vw,61px);font-weight:500}.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:500;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:500;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:var(--font-rounded);font-size:clamp(21px,2.5vw,37px);font-weight:700;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);font-weight:500}.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-recitation-roll .outgoing-recitation,.paper-motion-poem-roll .outgoing-sheet{animation-name:paper-fade-out!important;animation-duration:.1s!important}.paper-motion-line-roll .incoming-line,.paper-motion-recitation-roll .incoming-recitation,.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}}