:root{font-family:Noto Sans SC,Microsoft YaHei,system-ui,sans-serif;color:#2f2924;background:#f3efe7;font-synthesis:none;text-rendering:optimizeLegibility;--paper: #f3efe7;--paper-light: #faf7f0;--ink: #2f2924;--muted: #81786e;--line: rgba(77, 61, 49, .16);--cinnabar: #c64b3f;--cinnabar-dark: #9e382f}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px;min-height:100vh;min-height:100svh;background:radial-gradient(circle at 15% 18%,rgba(255,255,255,.7),transparent 24rem),repeating-linear-gradient(8deg,rgba(71,56,42,.016) 0 1px,transparent 1px 5px),var(--paper)}button,input{font:inherit}button{color:inherit}.app-shell{width:100%;min-height:100svh;padding:0 clamp(24px,4vw,72px) 32px;overflow:hidden}.topbar{height:88px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-family:STKaiti,KaiTi,serif;font-size:25px;font-weight:700;letter-spacing:.08em}.brand-mark{display:grid;place-items:center;width:38px;height:38px;color:#fff8ed;background:var(--cinnabar);border-radius:4px 8px 5px 7px;font-size:23px;transform:rotate(-2deg);box-shadow:inset 0 0 0 1px #ffffff29}.workspace{width:min(1340px,100%);min-height:calc(100svh - 120px);margin:0 auto;display:grid;grid-template-columns:minmax(310px,.72fr) minmax(480px,1.28fr);gap:clamp(48px,7vw,120px);align-items:center}.query-panel{padding:48px 0 34px;display:flex;flex-direction:column;min-height:650px}.query-copy{min-height:210px}.result-pinyin{color:var(--cinnabar-dark);font-size:18px;font-weight:600;letter-spacing:.12em;animation:rise-in .24s ease-out both}h1{max-width:540px;margin:20px 0 16px;font-family:STKaiti,KaiTi,serif;font-size:clamp(38px,4vw,64px);font-weight:700;line-height:1.12;letter-spacing:-.035em}.query-copy p{display:flex;align-items:center;gap:8px;min-height:24px;margin:0;color:var(--muted);font-size:15px}.query-copy p svg{width:18px;color:var(--cinnabar);animation:breathe 1.1s ease-in-out infinite alternate}.query-copy p.is-warning{color:var(--cinnabar-dark)}.candidate-area{margin:8px 0 26px;animation:rise-in .28s ease-out both}.candidate-area>span{display:block;margin-bottom:10px;color:var(--muted);font-size:13px}.candidate-area>div{display:flex;gap:10px}.candidate-area button{width:64px;height:64px;border:1px solid var(--line);border-radius:10px;background:#ffffff52;font-family:STKaiti,KaiTi,serif;font-size:34px;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease}.candidate-area button:hover{transform:translateY(-3px);background:#fffaf1;border-color:#c64b3f66}.input-zone{margin-top:auto;max-width:450px}.voice-button{display:flex;align-items:center;gap:18px;width:100%;min-height:84px;padding:10px;border:0;border-radius:52px;color:#fff9f0;background:var(--cinnabar);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:0 16px 34px #6f30272e,inset 0 0 0 1px #ffffff24;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.voice-button:hover:not(:disabled){transform:translateY(-2px);background:#bc4439;box-shadow:0 19px 38px #6f30273d,inset 0 0 0 1px #ffffff29}.voice-button:active:not(:disabled),.voice-button.is-active{transform:scale(.985);background:var(--cinnabar-dark)}.voice-button:disabled{opacity:.58;cursor:wait}.voice-button__surface{display:grid;place-items:center;flex:0 0 62px;height:62px;border-radius:50%;background:#ffffff24}.voice-button__surface svg{width:28px;height:28px}.voice-button__label{flex:1;padding-right:62px;font-size:18px;font-weight:700;letter-spacing:.08em;text-align:center}.voice-meter{display:flex;align-items:center;gap:4px;height:34px}.voice-meter i{width:3px;height:30px;border-radius:2px;background:currentColor;transform-origin:center;transition:transform 80ms linear}.input-divider{display:flex;align-items:center;gap:14px;margin:22px 4px 14px;color:#9d9489;font-size:12px}.input-divider:before,.input-divider:after{content:"";flex:1;height:1px;background:var(--line)}.text-form{display:flex;align-items:center;height:58px;padding:0 7px 0 20px;border:1px solid var(--line);border-radius:30px;background:#ffffff57;transition:border-color .16s ease,background .16s ease}.text-form:focus-within{border-color:#c64b3f80;background:#ffffff94}.text-form input{flex:1;min-width:0;border:0;outline:0;color:var(--ink);background:transparent;font-size:15px}.text-form input::placeholder{color:#9d9489}.text-form button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;color:#fff;background:var(--ink);cursor:pointer;transition:transform .16s ease,opacity .16s ease}.text-form button:hover:not(:disabled){transform:translate(2px)}.text-form button:disabled{opacity:.2;cursor:default}.text-form button svg{width:20px}.recent{display:flex;align-items:center;gap:8px;margin-top:23px}.recent>span{margin-right:4px;color:#9d9489;font-size:12px}.recent button{width:34px;height:34px;border:0;border-radius:50%;color:#6d645b;background:#4c3e3112;font-family:STKaiti,KaiTi,serif;font-size:18px;cursor:pointer;transition:color .15s ease,background .15s ease}.recent button:hover{color:var(--cinnabar-dark);background:#c64b3f1a}.board-panel{width:100%;max-width:min(70svh,720px);justify-self:end}.hanzi-board{position:relative;width:100%;aspect-ratio:1;max-height:calc(100svh - 190px);overflow:hidden;border:1px solid rgba(182,78,67,.52);background:radial-gradient(circle at 47% 42%,rgba(255,255,255,.9),transparent 60%),#fffcf68f;box-shadow:0 24px 70px #42332617;animation:board-enter .7s cubic-bezier(.2,.75,.2,1) both}.hanzi-board:before{content:"";position:absolute;inset:10px;border:1px solid rgba(182,78,67,.16);pointer-events:none}.grid-line{position:absolute;z-index:0;pointer-events:none;opacity:.48}.grid-line--vertical{left:50%;top:0;bottom:0;border-left:1px dashed var(--cinnabar)}.grid-line--horizontal{top:50%;left:0;right:0;border-top:1px dashed var(--cinnabar)}.grid-line--diagonal-a,.grid-line--diagonal-b{top:50%;left:-21%;width:142%;border-top:1px dashed rgba(198,75,63,.65);transform-origin:center}.grid-line--diagonal-a{transform:rotate(45deg)}.grid-line--diagonal-b{transform:rotate(-45deg)}.hanzi-target{position:absolute;inset:0;z-index:2}.hanzi-target.is-hidden{visibility:hidden}.hanzi-target svg{display:block}.board-empty,.board-loading,.hanzi-fallback{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.board-empty>span{color:#473c3117;font-family:STKaiti,KaiTi,serif;font-size:clamp(150px,26vw,330px);line-height:.95}.hanzi-fallback small{margin-top:20px;color:#968d83;font-size:12px;letter-spacing:.08em}.board-loading{gap:16px;color:var(--muted);font-size:13px}.board-loading i{width:7px;height:7px;border-radius:50%;background:var(--cinnabar);box-shadow:-16px 0 #c64b3f33,16px 0 #c64b3f80;animation:loading-dots .9s ease-in-out infinite alternate}.hanzi-fallback>span{font-family:STKaiti,KaiTi,serif;font-size:clamp(160px,31vw,390px);line-height:1}@keyframes board-enter{0%{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}@keyframes rise-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes breathe{to{transform:rotate(15deg) scale(1.08)}}@keyframes loading-dots{to{box-shadow:-16px 0 #c64b3fb3,16px 0 #c64b3f26}}@media(max-width:900px){.app-shell{padding:0 22px 28px;overflow:visible}.topbar{height:72px}.workspace{min-height:auto;grid-template-columns:1fr;gap:28px;padding:28px 0 0}.query-panel{display:contents}.query-copy{min-height:auto;order:1}h1{margin:12px 0 9px;font-size:clamp(34px,9vw,50px)}.board-panel{order:2;justify-self:center;max-width:min(74svh,620px)}.hanzi-board{max-height:none}.candidate-area{order:3;margin:0}.input-zone{order:4;width:100%;max-width:none;margin:0}.recent{order:5;margin:-4px 0 10px}}@media(max-width:520px){.app-shell{padding:0 16px 24px}.workspace{padding-top:22px;gap:20px}.query-copy p{font-size:13px}.voice-button{min-height:72px}.voice-button__surface{flex-basis:52px;height:52px}.voice-button__label{padding-right:52px;font-size:16px}.candidate-area button{width:56px;height:56px;font-size:30px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}