:root{--bg:#070b14;--panel:#0b1220;--line:#1b2a3d;--text:#e6f1f7;--text-2:#8aa0b4;--cyan:#22d3ee;--yellow:#fbbf24;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);color:var(--text);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);font:16px/1.6 -apple-system,Segoe UI,PingFang TC,Microsoft JhengHei,sans-serif}.app,.gate{max-width:720px;margin:0 auto;padding:12px 16px 32px}button,select,input,textarea{font:inherit;color:var(--text)}button{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:8px;min-height:44px;padding:0 16px}button.primary{border-color:var(--cyan);color:#fff;background:#0e7490}button:disabled{opacity:.45;cursor:default}input,select,textarea{border:1px solid var(--line);background:#050a12;border-radius:8px;outline:none;min-height:44px;padding:10px 12px}input:focus,select:focus,textarea:focus{border-color:var(--cyan)}.muted{color:var(--text-2)}.error{color:var(--yellow)}.top{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.brand{color:var(--cyan);font-weight:700}.top nav{gap:6px;display:flex}.top nav button.on{border-color:var(--cyan);color:var(--cyan)}.gate{flex-direction:column;gap:14px;padding-top:18vh;display:flex}.gate h1{color:var(--cyan);margin:0}.translate{flex-direction:column;gap:10px;display:flex}.translate textarea{resize:vertical;width:100%;min-height:130px}.row{flex-wrap:wrap;gap:8px;display:flex}.row button{flex:1}.who{flex-wrap:wrap;gap:8px;display:flex}.who label{color:var(--text-2);flex-direction:column;flex:140px;gap:2px;font-size:13px;display:flex}.who label:first-child{flex-basis:100%}.result{border:1px solid var(--line);background:var(--panel);border-radius:10px;min-height:120px;padding:12px}.result .text{white-space:pre-wrap;margin:0 0 10px;font-size:18px}.spinner{border:2px solid var(--line);border-top-color:var(--cyan);vertical-align:-2px;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.pinyin{border-top:1px solid var(--line);margin-top:12px;padding-top:8px}.pinyin .label{color:var(--text-2);font-size:12px;display:block}.pinyin>div{white-space:pre-wrap;font-size:18px;line-height:1.5}.pinyin .py{vertical-align:bottom;flex-direction:column;align-items:center;margin:0 2px 6px;display:inline-flex}.pinyin .sound{color:var(--cyan);font-size:12px;line-height:1.2}.glossary{flex-direction:column;gap:8px;display:flex}.term{grid-template-columns:1fr 1fr auto;gap:6px;display:grid}.term input{min-width:0}.small{font-size:13px}button.link{min-height:36px;color:var(--cyan);background:0 0;border:0;padding:0 4px;text-decoration:underline}.keyform{gap:8px;margin-bottom:10px;display:flex}.keyform input{flex:1;min-width:0}button.rec{color:#fecdd3;background:#3b0a14;border-color:#f43f5e;animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{box-shadow:0 0 0 6px #f43f5e2e}}.rec-note{color:#fda4af;margin:0;font-size:14px}.switch-row{color:var(--text-2);align-items:center;gap:8px;margin-top:10px;font-size:14px;display:flex}.switch-row input{width:20px;height:20px;min-height:0;accent-color:var(--cyan)}.input-wrap{position:relative}.input-wrap textarea{padding-bottom:44px}.input-wrap .clear{min-height:34px;padding:0 12px;font-size:14px;position:absolute;bottom:8px;right:8px}