:root{font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#18181b;background:#f4f4f5}*{box-sizing:border-box}body{margin:0;background:#f4f4f5}button,textarea{font:inherit}button{cursor:pointer}#app{min-height:100vh;background:radial-gradient(circle at 75% 8%,rgba(16,185,129,.04),transparent 27%),#f4f4f5;transition:.2s}header{height:66px;padding:0 max(28px,calc((100vw - 1200px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e4e4e7;background:rgba(250,250,250,.84);backdrop-filter:blur(18px)}.brand,.right,.engine,.engine>div,.languages>div,.actions,.tones,.history>div:first-child{display:flex;align-items:center}.brand{gap:11px}.brand>i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#18181b;color:#fff;font-style:normal;font-weight:800}.brand b{font-size:16px}.brand span{font:10px ui-monospace,monospace;letter-spacing:.17em;color:#71717a;border-left:1px solid #d4d4d8;padding-left:11px}.right{gap:16px}.right small{color:#52525b}.right small i,.route i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.09);margin-right:8px}.right button{border:1px solid #dedee1;border-radius:10px;width:34px;height:34px;background:#fff}.page{max-width:1200px;margin:auto;padding:54px 28px 70px}.hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:26px}.hero label{font:700 10px ui-monospace,monospace;letter-spacing:.18em;color:#71717a}.hero h1{font-size:36px;line-height:1.18;letter-spacing:-.04em;margin:11px 0 8px}.hero p{margin:0;color:#71717a;font-size:14px}.rule{display:flex;padding:5px;border:1px solid #e4e4e7;background:#fff;border-radius:12px}.rule span{padding:8px 13px;font-size:12px;color:#71717a}.rule span:first-child{background:#18181b;color:#fff;border-radius:8px}.card{border:1px solid transparent;border-radius:20px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(180deg,rgba(255,255,255,.9),rgba(0,0,0,.07)) border-box;box-shadow:0 1px 2px rgba(0,0,0,.02),0 8px 16px rgba(0,0,0,.03),0 24px 48px rgba(0,0,0,.03);overflow:hidden}.engine{justify-content:space-between;padding:16px 20px;border-bottom:1px solid #ededf0}.route{font-size:12px;color:#52525b}.engine>div{gap:5px}.engine label{font-size:11px;color:#a1a1aa;margin-right:5px}.engine button,.tones button{border:0;background:#f4f4f5;color:#71717a;border-radius:8px;padding:8px 11px;font-size:12px}.engine button.on,.tones button.on{background:#27272a;color:#fff}.languages{height:74px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px;border-bottom:1px solid #e4e4e7}.languages>div:last-child{justify-self:end}.languages i{display:grid;place-items:center;width:30px;height:30px;border:1px solid #e4e4e7;border-radius:9px;font-style:normal;font-size:10px;font-weight:800;margin-right:10px}.languages span{display:grid;gap:3px}.languages small{font-size:10px;color:#a1a1aa}.languages b{font-size:13px}.languages strong{font-size:12px;color:#52525b;background:#fafafa;border:1px solid #eee;padding:7px 12px;border-radius:999px}.panes{display:grid;grid-template-columns:1fr 1fr;min-height:330px}.panes article{padding:22px;display:flex;flex-direction:column}.panes .input{border-right:1px solid #e4e4e7;transition:.2s}.panes .input:focus-within{box-shadow:inset 0 0 0 2px rgba(16,185,129,.14);background:rgba(236,253,245,.12)}.title{display:flex;justify-content:space-between;align-items:center}.title b{font-size:13px}.title button{border:0;background:transparent;color:#71717a;font-size:12px;padding:5px 7px}.output .title button{background:#27272a;color:#fff;padding:8px 14px;border-radius:8px;min-width:65px}.output .title button.copied{background:#e4e4e7;color:#3f3f46}textarea{resize:none;border:0;outline:0;background:transparent;min-height:215px;padding:20px 0;color:#27272a;font-size:18px;line-height:1.75}.output #result{flex:1;padding:20px 0;white-space:pre-wrap;font-size:18px;line-height:1.75;color:#3f3f46}.panes footer{display:flex;justify-content:space-between;color:#a1a1aa;font-size:11px}.panes code{font:11px ui-monospace,monospace}.actions{min-height:78px;justify-content:space-between;padding:16px 20px;border-top:1px solid #e4e4e7}.tones{gap:7px}.tones label{font-size:11px;color:#71717a;margin-right:3px}.tones button{height:38px;padding:0 14px;border:1px solid transparent}.tones button:not(.on){background:#fff;border-color:#e4e4e7}.actions>#translate{height:44px;border:0;border-radius:11px;background:#18181b;color:#fff;padding:0 18px 0 22px;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.12)}#translate span{margin-left:12px}kbd{font:9px ui-monospace,monospace;background:#3f3f46;border:1px solid #52525b;padding:3px 5px;border-radius:4px;color:#d4d4d8;margin-left:4px}.note{min-height:42px;display:flex;align-items:center;gap:8px;padding:10px 20px;background:#f4f4f5;color:#71717a;font-size:11px;border-top:1px solid #e4e4e7}.note i{font-style:normal;color:#10b981;font-size:9px}.note b{font-weight:600;color:#52525b}.history{margin-top:32px}.history>div:first-child{gap:10px}.history b{font-size:14px}.history span{font-size:11px;color:#a1a1aa}.history button{margin-left:auto;border:0;background:transparent;color:#a1a1aa;font-size:11px}.history #history{margin-top:12px}.empty{height:125px;border:1px dashed #d4d4d8;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a1a1aa;gap:6px}.empty i{font-style:normal;font-size:21px}.empty b{color:#71717a;font-size:12px}.history-item{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:15px 18px;background:#fff;border:1px solid #e4e4e7;border-radius:12px;margin-bottom:8px;font-size:13px}.history-item div:last-child{color:#71717a}.history-item small{grid-column:1/-1;color:#a1a1aa;font:10px ui-monospace,monospace}
#app[data-theme="dark"]{background:#09090b;color:#fafafa}#app[data-theme="dark"] header{background:rgba(9,9,11,.86);border-color:#27272a}#app[data-theme="dark"] .brand>i,#app[data-theme="dark"] .actions>#translate{background:#fafafa;color:#18181b}#app[data-theme="dark"] .right button,#app[data-theme="dark"] .rule,#app[data-theme="dark"] .tones button:not(.on),#app[data-theme="dark"] .history-item{background:#18181b;color:#f4f4f5;border-color:#2c2c30}#app[data-theme="dark"] .card{background:linear-gradient(#18181b,#18181b) padding-box,linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03)) border-box}#app[data-theme="dark"] .engine,#app[data-theme="dark"] .languages,#app[data-theme="dark"] .actions,#app[data-theme="dark"] .note,#app[data-theme="dark"] .input{border-color:#2c2c30}#app[data-theme="dark"] .engine button,#app[data-theme="dark"] .note{background:#27272a}#app[data-theme="dark"] .engine button.on,#app[data-theme="dark"] .tones button.on,#app[data-theme="dark"] .output .title button{background:#fafafa;color:#18181b}#app[data-theme="dark"] textarea,#app[data-theme="dark"] .output #result{color:#e4e4e7}#app[data-theme="dark"] .languages strong{background:#27272a;border-color:#3f3f46;color:#d4d4d8}
@media(max-width:760px){header{height:58px;padding:0 16px}.brand span,.right small{display:none}.page{padding:28px 12px 46px}.hero{display:block}.hero h1{font-size:29px}.rule{margin-top:20px;width:max-content}.engine{align-items:flex-start;gap:12px}.engine>div{flex-wrap:wrap;justify-content:flex-end}.engine label{display:none}.languages{padding:0 14px}.languages strong{font-size:0;padding:7px}.languages strong:after{content:"↔";font-size:13px}.panes{grid-template-columns:1fr}.panes .input{border-right:0;border-bottom:1px solid #e4e4e7}.panes article{min-height:270px;padding:18px}textarea,.output #result{min-height:150px}.actions{align-items:flex-end;gap:12px}.tones{flex-wrap:wrap}.tones label{width:100%}.tones button{height:34px;padding:0 10px}.actions>#translate{width:50px;font-size:0;padding:0}.actions>#translate:after{content:"↵";font-size:18px}.actions>#translate span{display:none}.note{flex-wrap:wrap}.note span{width:100%;padding-left:17px}.history-item{grid-template-columns:1fr}}
.history-item{width:100%;text-align:left;gap:8px 20px}