/* landing-page-design audit: named type, spacing, motion and complete interaction states. */
@font-face{font-family:Manrope;src:url('./vendor/manrope-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('./vendor/manrope-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url('./vendor/manrope-600.woff2') format('woff2');font-weight:600;font-display:swap}
:root{--sans:Manrope,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;--spacing-0:0;--spacing-25:2px;--spacing-50:4px;--spacing-75:8px;--spacing-100:12px;--spacing-200:16px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--spacing-700:64px;--spacing-800:80px;--spacing-900:96px;--motion:cubic-bezier(.22,1,.36,1);--caption-size:12px;--caption-line:16px}
.heading-4{font-size:30px;line-height:36px;font-weight:600}.heading-5{font-size:24px;line-height:32px;font-weight:600}.title-3{font-size:16px;line-height:24px;font-weight:500}.body-6{font-size:14px;line-height:20px;font-weight:400}.caption-5{font-size:12px;line-height:16px;font-weight:400}.button-md{font-size:16px;line-height:24px;font-weight:600}.button-sm{font-size:14px;line-height:20px;font-weight:600}.button-xsm{font-size:12px;line-height:16px;font-weight:600}
body{background-image:none}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
.brand{font-size:20px;line-height:28px}.brand-mark{font-size:20px;line-height:28px}.cover-title{font-size:36px;line-height:40px}.cover-subtitle,.cover-owner,.cover-caption,.cover-status{font-size:12px;line-height:16px}.cover-status strong{font-size:20px;line-height:28px}.open-passport{font-size:14px;line-height:20px;padding:var(--spacing-75) var(--spacing-100)}
.skip-link{position:fixed;left:var(--spacing-200);top:var(--spacing-200);transform:translateY(-160%);z-index:150;background:var(--teal-dark);color:#fff;padding:var(--spacing-75) var(--spacing-100);border-radius:8px;font:500 14px/20px var(--sans)}.skip-link:focus{transform:none}
.button{padding:var(--spacing-75) var(--spacing-100);border-radius:8px;font:500 14px/20px var(--sans);min-height:40px;transition:transform 500ms var(--motion),opacity 300ms var(--motion),background-color 300ms var(--motion)}
.button.primary{min-height:48px;font:600 16px/24px var(--sans)}.button.small{min-height:36px;font:600 12px/16px var(--sans);padding:var(--spacing-75) var(--spacing-100)}.button:active:not(:disabled){transform:scale(.98)}.button:disabled{opacity:.5}
.profile-button,.toggle-chip,.filter-chip,.poem-row,.challenge-tile,.stamp-button{transition:transform 500ms var(--motion),opacity 300ms var(--motion),background-color 300ms var(--motion)}
.toggle-chip{font:500 12px/16px var(--sans);min-height:32px;padding:var(--spacing-50) var(--spacing-75);border-radius:8px}.reading-step{font:400 12px/16px var(--sans);gap:var(--spacing-50);letter-spacing:0}.reading-step i{width:var(--spacing-75)}
.poem-heading h2{font:500 24px/32px var(--serif);letter-spacing:var(--spacing-25)}.poem-heading.long h2{font-size:20px;line-height:28px;letter-spacing:0}.poem-heading.very-long h2{font-size:18px;line-height:28px}
.poem-line,.poem-lines.with-pinyin .poem-line,.verse-small .poem-line,.verse-small .poem-lines.with-pinyin .poem-line{font:400 24px/32px var(--serif);letter-spacing:0}.py{font:400 12px/16px var(--sans);letter-spacing:0;word-spacing:var(--spacing-25)}
.poem-meta,.practice-status,.page-range,.question-source,.note,.eyebrow,.list-count,.ticket-author,.filter-chip,.pill,.context-label{font-size:12px;line-height:16px}
.practice-status{margin:var(--spacing-50) 0 0}.page-range{display:none}.practice-controls{padding-top:var(--spacing-75)}.practice-controls .inline-actions{gap:var(--spacing-75)}.practice-controls .button.small{font-size:12px;line-height:16px}.practice-controls .button.primary{min-height:48px;font-size:14px;line-height:20px;margin-top:var(--spacing-75)}
.manual-entry{display:block;margin:0 auto;padding:var(--spacing-50) 0;font:400 12px/16px var(--sans)}
.reading-step{gap:var(--spacing-25)}.reading-step i{width:var(--spacing-50)}.reading-step-button{min-width:32px;min-height:24px;font:400 12px/16px var(--sans);padding:var(--spacing-50);border:0;background:transparent;color:var(--muted);border-radius:4px;white-space:nowrap;transition:transform 500ms var(--motion),background-color 300ms var(--motion)}.reading-step-button.active{color:var(--teal);font-weight:500}.reading-step-button:disabled{opacity:1}.reading-step-button:hover:not(:disabled){background:#e8efdf}.reading-step-button:active:not(:disabled){transform:scale(.98)}
.game-voice-actions{flex-shrink:0;margin-top:var(--spacing-75);display:flex;flex-direction:column;gap:var(--spacing-50)}.game-voice-actions>.text-button{padding:var(--spacing-50) 0;font-size:12px;line-height:16px}.game-voice-actions .button.primary{font-size:14px;line-height:20px}
.poem-row p{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.poem-row-title{font-size:18px;line-height:28px}.library-filters select{font-size:12px;line-height:16px}.poem-row{height:64px;min-height:64px;padding:var(--spacing-75) 0}.poem-row .pill{font-size:12px;line-height:16px}.nav-item{font:500 12px/16px var(--sans);gap:var(--spacing-50)}.pager-info strong{font-size:12px;line-height:16px}.pager-info span{font-size:12px;line-height:16px;letter-spacing:0}.book-pager button{font-size:12px;line-height:16px}.stat-triplet span{font-size:12px;line-height:16px}
.challenge-tile h3{font-size:18px;line-height:28px}.challenge-tile p{font-size:12px;line-height:16px}.home-welcome h2{font-size:20px;line-height:28px}.home-welcome span{font-size:12px;line-height:16px}.home-ticket{background:#f4f7eb}.home-ticket .ticket-title{font-size:24px;line-height:32px}.home-ticket .eyebrow{font-size:12px;line-height:16px}.home-bottom .button{font-size:12px;line-height:16px}
.game-page .poem-heading h2{font-size:24px;line-height:32px}.game-page .poem-heading.long h2{font-size:20px;line-height:28px}.game-page .poem-meta,.game-page .question-source,.game-page .practice-status{font-size:12px;line-height:16px}.game-page .poem-line{font-size:24px;line-height:32px}.game-hints .button{font-size:12px;line-height:16px}.game-page .answer-option{font-size:18px;line-height:28px}.game-page .answer-feedback{font-size:12px;line-height:16px}.sequence-game .sequence-piece,.sequence-game .sequence-slot{font-size:14px;line-height:20px}
.section-title,.collection-page .section-title{font-size:24px;line-height:32px;font-weight:500}.challenge-page .section-title{font-size:20px;line-height:28px;font-weight:500}.identity-name,.home-page .stat-triplet strong,.mobile-summary .stat-triplet strong{font-size:20px;line-height:28px;font-weight:500}.poetic-caption{font-size:16px;line-height:24px}.guide-quote{font-size:18px;line-height:28px}.passport-serial,.guide-label,.home-page .stat-triplet span,.poem-row .pill,.stamp-button>small,.stamp .stamp-sub,.stamp .stamp-date{font-size:12px;line-height:16px}.stamp-button>span{font-size:12px;line-height:16px;font-weight:500}.stamp .stamp-title{font-size:16px;line-height:24px}.stamp .stamp-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:76px}.stamp-button{min-height:160px;gap:var(--spacing-50)}.game-page .question-prompt{font-size:20px;line-height:28px}.home-ticket{border-radius:4px}.body-7{font:400 24px/32px var(--serif)}
.voice-window{width:min(520px,calc(100vw - 24px));height:min(720px,calc(var(--app-height,100dvh) - 24px));padding:0;overflow:hidden;border-radius:16px;background:#f8faf3}
.voice-panel{height:100%;min-height:0;display:flex;flex-direction:column;gap:var(--spacing-100);padding:var(--spacing-300)}
.voice-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-100);flex-shrink:0}.voice-header .caption-5{margin-bottom:var(--spacing-50);color:var(--muted)}.voice-header h2{color:var(--teal-dark)}.voice-header .icon-button{width:40px;height:40px;min-height:40px;border-radius:8px}
.voice-intro,.voice-capture,.voice-processing{display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-200);text-align:center;overflow:auto}.voice-intro p,.voice-capture p,.voice-processing p{max-width:28em}
.voice-emblem{width:80px;height:80px;background:#e4edde;border-radius:16px;display:grid;place-items:center;color:var(--teal)}
.voice-notice{padding:var(--spacing-100);background:#f2ebd9;color:#785b29;border-radius:8px}.voice-actions{display:flex;flex-direction:column;gap:var(--spacing-75);flex-shrink:0}.voice-secondary{display:flex;gap:var(--spacing-75);justify-content:center;flex-wrap:wrap}.voice-secondary .button{flex:1;white-space:nowrap}.voice-secondary .text-button{width:100%;font-size:12px;line-height:16px;padding:0}
.voice-meter{display:flex;gap:var(--spacing-75);align-items:center;justify-content:center;height:96px;color:var(--teal)}.voice-meter span{display:block;width:var(--spacing-75);height:80px;background:currentColor;border-radius:4px;transform:scaleY(.12);transition:transform 300ms var(--motion)}.voice-clock{font-variant-numeric:tabular-nums;color:var(--teal-dark)}
.voice-summary{padding:var(--spacing-100);background:#eaf1e3;border-radius:8px;flex-shrink:0}.voice-summary .caption-5{margin-top:var(--spacing-50)}.voice-replay{display:block;width:100%;height:40px;flex-shrink:0}.voice-comparison{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:var(--spacing-100)}
.voice-line-result{padding:var(--spacing-75) 0;border-bottom:1px solid var(--line)}.voice-line-result p:first-child{color:var(--muted);margin-bottom:var(--spacing-50)}.voice-word.missing,.voice-word.change,.voice-word.extra{background:#f0e3c4;color:#77581f}.voice-word.homophone{text-decoration:underline;text-decoration-color:#b59b69;text-underline-offset:4px}.voice-word.match{color:var(--teal-dark)}
.voice-result-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-75);flex-shrink:0}.voice-result-pager .button.small{min-height:32px;font-size:12px;line-height:16px;padding:var(--spacing-50) var(--spacing-75)}
.voice-skeleton{display:flex;flex-direction:column;gap:var(--spacing-100);width:100%;max-width:280px}.voice-skeleton span{height:var(--spacing-200);background:#dce7d7;border-radius:4px;animation:voice-opacity 1000ms var(--motion) infinite alternate}.voice-skeleton span:nth-child(2){opacity:.7}.voice-skeleton span:last-child{opacity:.4}
@keyframes voice-opacity{from{opacity:.35}to{opacity:.8}}
@media(max-width:850px){.voice-window{top:var(--spacing-100);bottom:auto;margin:0 auto}.voice-panel{padding:var(--spacing-200);gap:var(--spacing-75)}.heading-5{font-size:20px;line-height:28px}.voice-intro,.voice-capture{gap:var(--spacing-100)}.voice-emblem{width:64px;height:64px}.voice-header .icon-button{width:32px;height:32px;min-height:32px}.poem-row{height:64px;min-height:64px}}
@media(max-width:360px){.reading-step{font-size:12px;line-height:16px;gap:var(--spacing-25)}.poem-topline .toggle-chip{font-size:12px;line-height:16px;padding:var(--spacing-50)}.poem-line,.poem-lines.with-pinyin .poem-line{font-size:24px;line-height:32px}.voice-panel{padding:var(--spacing-100)}.voice-header h2{font-size:20px;line-height:28px}.voice-intro p{font-size:12px;line-height:16px}.voice-capture .body-6{font-size:12px;line-height:16px}}
@media(max-height:650px){.voice-meter{height:64px}.voice-meter span{height:48px}.voice-emblem{width:48px;height:48px}.voice-intro,.voice-capture{gap:var(--spacing-75)}.voice-window .voice-panel{gap:var(--spacing-75)}.practice-controls .button.primary{min-height:40px}.practice-status{font-size:12px;line-height:16px}.game-page .poem-heading h2{font-size:20px;line-height:28px}.game-voice-actions .button.primary{min-height:40px}.voice-header .caption-5{font-size:12px;line-height:16px}}
@media(max-height:650px){.cover-title{font-size:30px;line-height:36px}.cover-subtitle{letter-spacing:var(--spacing-25)}}
@media(prefers-reduced-motion:reduce){.voice-skeleton span{animation:none;opacity:.7}.voice-meter span{transition:none}.skip-link{transition:none}}