:root{color-scheme:light;--ease-out-quart: cubic-bezier(.25, 1, .5, 1);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ink: oklch(.18 .02 60);--ink-muted: oklch(.42 .015 70);--ink-faint: oklch(.55 .01 70);--paper: oklch(.985 .006 80);--paper-warm: oklch(.97 .012 70);--rule: oklch(.88 .008 70);--surface: oklch(1 0 0);--zh: oklch(.55 .18 25);--zh-soft: oklch(.93 .04 30);--ja: oklch(.5 .14 180);--ja-soft: oklch(.92 .04 180);--ko: oklch(.5 .15 280);--ko-soft: oklch(.92 .04 280);--vi: oklch(.6 .16 130);--vi-soft: oklch(.92 .04 130);--tone-1: oklch(.55 .2 25);--tone-2: oklch(.6 .18 140);--tone-3: oklch(.55 .2 250);--tone-4: oklch(.5 .2 300);--text-display: "Cormorant Garamond", "Noto Serif SC", "Noto Serif JP", Georgia, serif;--text-ui: "Source Sans 3", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--text-ui);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;background:var(--paper);color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app{min-height:100vh;display:flex;flex-direction:column}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.site-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:1.25rem;padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,5vw,3.5rem);border-bottom:1px solid var(--rule);animation:fadeIn .6s var(--ease-out-quart) backwards}.wordmark{display:flex;align-items:center;gap:.65rem;font-family:var(--text-display);font-size:1.6rem;font-weight:700;letter-spacing:.18em;color:var(--ink)}.wordmark-seal{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;font-size:1.25rem;color:var(--paper);background:var(--zh);border-radius:6px;transform:rotate(-4deg);box-shadow:inset 0 0 0 2px #fcf3f166}.language-line{font-size:.85rem;letter-spacing:.18em;color:var(--ink-muted);text-transform:uppercase}.mode-toggle{display:inline-flex;margin-left:auto;border:1px solid var(--rule);border-radius:999px;overflow:hidden}.mode-option{padding:.35rem 1rem;background:transparent;color:var(--ink-muted);border:none;font-family:var(--text-ui);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s}.mode-option:hover{color:var(--ink)}.mode-option.active{background:var(--ink);color:var(--paper)}.ui-lang-picker{display:inline-flex;gap:.25rem;flex-wrap:wrap}.ui-lang-option{padding:.2rem .6rem;background:transparent;color:var(--ink-faint);border:1px solid transparent;border-radius:999px;font-family:var(--text-ui);font-size:.75rem;font-weight:500;cursor:pointer;transition:color .2s,border-color .2s}.ui-lang-option:hover{color:var(--ink-muted)}.ui-lang-option.active{color:var(--ink);border-color:var(--rule)}.mode-option:focus-visible{outline:none;box-shadow:0 0 0 3px var(--zh-soft)}.page-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:clamp(2rem,5vw,4rem) clamp(1.25rem,5vw,3.5rem) clamp(3rem,6vw,5rem)}.intro-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4rem);align-items:start;padding-bottom:clamp(2.5rem,5vw,4rem);margin-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--rule);animation:fadeUp .7s var(--ease-out-expo) .1s backwards}.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--zh);margin-bottom:.85rem}.intro-copy h1{font-family:var(--text-display);font-size:clamp(2.5rem,5vw,4.25rem);font-weight:600;line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin-bottom:1.25rem}.intro-copy h1 em{font-style:italic;color:var(--ja);font-weight:500}.intro-text{max-width:36ch;font-size:1.05rem;color:var(--ink-muted);margin-bottom:1.75rem}.flow-line{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-faint)}.flow-line span{color:var(--ink-muted);font-size:1rem}.translation-form{display:flex;flex-direction:column;gap:1.25rem;padding:clamp(1.5rem,3vw,2rem);background:var(--surface);border:1px solid var(--rule);border-radius:18px;box-shadow:0 24px 48px -28px #1d140d2e}.form-heading{display:flex;align-items:flex-start;gap:.85rem}.form-number{font-family:var(--text-display);font-size:1.6rem;font-weight:600;color:var(--ja);line-height:1;padding-top:.1rem}.form-kicker{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.25rem}.form-heading h2{font-family:var(--text-display);font-size:1.4rem;font-weight:600;color:var(--ink)}.language-field{border:0;padding:0;margin:0}.source-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.source-option{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.65rem .85rem;background:var(--paper);border:1.5px solid var(--rule);border-radius:12px;color:var(--ink-muted);font-family:var(--text-ui);cursor:pointer;text-align:left;transition:border-color .2s,transform .2s var(--ease-out-quart),background .2s}.source-option:hover{transform:translateY(-1px)}.source-option.chinese{border-color:#dbc9c7}.source-option.japanese{border-color:#c1d2ce}.source-option.korean{border-color:#cbcddb}.source-option.vietnamese{border-color:#c9d1c3}.source-option.chinese.active{background:var(--zh-soft);border-color:var(--zh);color:var(--zh)}.source-option.japanese.active{background:var(--ja-soft);border-color:var(--ja);color:var(--ja)}.source-option.korean.active{background:var(--ko-soft);border-color:var(--ko);color:var(--ko)}.source-option.vietnamese.active{background:var(--vi-soft);border-color:var(--vi);color:var(--vi)}.source-native{font-family:var(--text-display);font-size:1.25rem;font-weight:600;color:var(--ink)}.source-option.active .source-native{color:inherit}.source-english{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-group label{font-size:.8rem;font-weight:600;letter-spacing:.05em;color:var(--ink-muted)}.input-group textarea{width:100%;padding:.85rem 1rem;font-family:inherit;font-size:1.1rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:12px;outline:none;resize:vertical;transition:border-color .2s,box-shadow .2s}.input-group textarea:focus{border-color:var(--zh);box-shadow:0 0 0 3px var(--zh-soft)}.input-group textarea::placeholder{color:var(--ink-faint)}.form-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.form-guidance{font-size:.8rem;color:var(--ink-faint)}.translate-button{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;font-family:var(--text-ui);font-size:.95rem;font-weight:700;letter-spacing:.04em;color:var(--paper);background:var(--ink);border:none;border-radius:12px;cursor:pointer;transition:transform .2s var(--ease-out-quart),background .2s}.translate-button:hover:not(:disabled){transform:translateY(-1px);background:var(--zh)}.translate-button:disabled{opacity:.5;cursor:not-allowed}.form-error{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;color:#a20519;font-size:.9rem;font-weight:600}.form-error-retry{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;border-radius:999px;padding:.2rem .7rem;cursor:pointer}.form-error-retry:hover{background:#a2051914}.form-error-info{color:var(--ink-muted)}.translation-results{animation:fadeUp .6s var(--ease-out-expo) .2s backwards}.results-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.5rem}.results-heading h2{font-family:var(--text-display);font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:600;color:var(--ink)}.romanization-toggle{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--ink-muted);cursor:pointer;-webkit-user-select:none;user-select:none}.romanization-toggle input{accent-color:var(--zh, var(--ink));width:1rem;height:1rem;cursor:pointer}.rate-control{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden}.rate-option{padding:.3rem .8rem;background:transparent;color:var(--ink-muted);border:none;font-family:var(--text-ui);font-size:.8rem;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background .2s,color .2s}.rate-option:hover{color:var(--ink)}.rate-option.active{background:var(--ink);color:var(--paper)}.rate-option:focus-visible{outline:none;box-shadow:0 0 0 3px var(--zh-soft)}.source-quote{margin:0;padding:.65rem 1rem;border-left:3px solid var(--ja);background:var(--paper-warm);border-radius:0 8px 8px 0;font-size:.95rem;color:var(--ink-muted);max-width:32ch}.source-quote span{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.3rem}.source-quote p{font-family:var(--text-display);font-size:1.1rem;color:var(--ink)}.translation-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.translation-output{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:var(--surface);border:1px solid var(--rule);border-radius:16px;transition:transform .25s var(--ease-out-quart),box-shadow .25s;animation:fadeUp .5s var(--ease-out-quart) backwards}.translation-output:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px #1d140d33}.translation-output.chinese{border-top:4px solid var(--zh)}.translation-output.japanese{border-top:4px solid var(--ja)}.translation-output.korean{border-top:4px solid var(--ko)}.translation-output.vietnamese{border-top:4px solid var(--vi)}.output-heading{display:flex;align-items:center;gap:.85rem}.output-number{font-family:var(--text-display);font-size:1.1rem;font-weight:600;color:var(--ja);letter-spacing:.04em}.translation-output.chinese .output-number{color:var(--zh)}.translation-output.japanese .output-number{color:var(--ja)}.translation-output.korean .output-number{color:var(--ko)}.translation-output.vietnamese .output-number{color:var(--vi)}.output-heading h3{font-family:var(--text-display);font-size:1.4rem;font-weight:600;color:var(--ink);line-height:1.1}.output-heading p{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}.output-native{font-family:var(--text-display);font-size:clamp(1.85rem,3vw,2.4rem);font-weight:600;color:var(--ink);line-height:1.2;padding:.75rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center;word-break:break-word}.output-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.output-actions{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto}.copy-button{display:inline-flex;align-items:center;padding:.55rem .9rem;background:transparent;color:var(--ink-muted);border:1px solid var(--rule);border-radius:999px;font-family:var(--text-ui);font-size:.85rem;font-weight:600;cursor:pointer;transition:color .2s,border-color .2s,background .2s}.copy-button:hover{color:var(--ink);border-color:var(--ink-muted)}.copy-button:focus-visible{outline:none;border-color:var(--zh);box-shadow:0 0 0 3px var(--zh-soft)}.output-pronunciation{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.output-pronunciation span{font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}.output-pronunciation strong{font-size:1.05rem;font-weight:500;font-style:italic;color:var(--ink);word-break:break-word}.listen-button{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;background:var(--ink);color:var(--paper);border:none;border-radius:999px;font-family:var(--text-ui);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .2s,transform .2s var(--ease-out-quart)}.listen-button:hover:not(:disabled){background:var(--ja);transform:translateY(-1px)}.translation-output.chinese .listen-button:hover:not(:disabled){background:var(--zh)}.translation-output.korean .listen-button:hover:not(:disabled){background:var(--ko)}.translation-output.vietnamese .listen-button:hover:not(:disabled){background:var(--vi)}.listen-button:disabled{opacity:.5;cursor:not-allowed}.listen-icon{display:inline-flex;align-items:center;justify-content:center}.loading-dots span{animation:dotPulse 1.4s ease-in-out infinite}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes dotPulse{0%,80%,to{opacity:.3}40%{opacity:1}}.poetry-reader{animation:fadeUp .6s var(--ease-out-expo) backwards}.poetry-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.5rem}.voice-select{display:inline-flex;flex-direction:column;gap:.25rem}.voice-select-label{font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}.voice-select select{padding:.35rem .7rem;font-family:var(--text-ui);font-size:.85rem;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:999px;cursor:pointer;max-width:220px}.voice-select select:focus-visible{outline:none;border-color:var(--zh);box-shadow:0 0 0 3px var(--zh-soft)}.poetry-heading h2{font-family:var(--text-display);font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:600;color:var(--ink)}.poetry-subtitle{font-size:1rem;color:var(--ink-muted);margin-top:.5rem}.poem-text{white-space:pre-line;text-align:center}.poem-pronunciation strong{white-space:pre-line}.poem-selector{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2rem}.poem-chip{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.7rem 1.2rem;background:var(--paper);border:1.5px solid var(--rule);border-radius:12px;cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--ease-out-quart)}.poem-chip:hover{transform:translateY(-1px)}.poem-chip.active{background:var(--zh-soft);border-color:var(--zh)}.poem-chip-title{font-family:var(--text-display);font-size:1.2rem;font-weight:600;color:var(--ink)}.poem-chip-author{font-size:.75rem;letter-spacing:.1em;color:var(--ink-faint)}.site-footer{padding:1.75rem clamp(1.25rem,5vw,3.5rem);border-top:1px solid var(--rule);text-align:center;font-size:.8rem;color:var(--ink-faint)}@media (max-width: 880px){.intro-layout{grid-template-columns:1fr}.results-heading{align-items:flex-start;flex-direction:column}}@media (max-width: 720px){.translation-list{grid-template-columns:1fr}.source-options{grid-template-columns:1fr 1fr}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}