:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#20231f;background:#f4f3ee;--bg: #f4f3ee;--surface: #fffefa;--surface-soft: #eeeee7;--ink: #20231f;--muted: #6d7168;--line: #dcdcd3;--accent: #195f50;--accent-bright: #cbe052;--danger: #9d3f35;--shadow: 0 20px 50px rgb(40 48 35 / 8%)}:root[data-theme=dark]{color-scheme:dark;--bg: #171916;--surface: #20231f;--surface-soft: #292d27;--ink: #f1f2eb;--muted: #aeb3a7;--line: #3c4138;--accent: #83c9b6;--accent-bright: #cbe052;--danger: #f09a8f;--shadow: 0 20px 50px rgb(0 0 0 / 18%)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg);color:var(--ink)}button,textarea,select{font:inherit}button,select{cursor:pointer}button:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}.app-shell{min-height:100vh;padding:0 clamp(18px,4vw,64px)}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:11px;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:16px}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#17372f;background:var(--accent-bright);font-weight:800}.top-actions{display:flex;align-items:center;gap:8px}.language-select select,.icon-button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;height:38px}.language-select select{padding:0 32px 0 12px}.icon-button{width:38px;font-size:19px}.hero{text-align:center;padding:clamp(44px,7vw,82px) 0 36px}.eyebrow{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.22em}.hero h1{max-width:780px;margin:13px auto 26px;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:clamp(30px,5vw,54px);line-height:1.08;letter-spacing:-.045em}.direction{display:inline-flex;align-items:center;gap:12px;padding:6px 7px 6px 18px;border-radius:999px;background:var(--surface-soft);font-weight:600}.direction button{border:0;width:35px;height:35px;border-radius:50%;background:var(--accent);color:var(--surface);font-size:20px;line-height:1}:root[data-theme=dark] .direction button{color:#15231f}.approximation{color:var(--muted);font-size:13px;margin:12px 0 0}.workspace{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}.panel{min-width:0;display:flex;flex-direction:column;min-height:570px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.panel-head{min-height:72px;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.panel-head>div:first-child{display:flex;flex-direction:column;gap:3px}.panel-label{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.panel-head strong{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:17px}.tabs{display:flex;padding:3px;border-radius:9px;background:var(--surface-soft)}.tabs button{padding:6px 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12px}.tabs button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 5px #00000014}textarea,.preview{flex:1;width:100%;min-height:340px;border:0;resize:none;padding:25px;background:transparent;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:clamp(16px,1.5vw,19px);line-height:1.7}textarea:focus{outline:0}textarea::placeholder{color:color-mix(in srgb,var(--muted) 60%,transparent)}.preview{overflow:auto}.rendered-markdown>:first-child{margin-top:0}.rendered-markdown a{color:var(--accent)}.rendered-markdown code{padding:2px 5px;border-radius:5px;background:var(--surface-soft)}.rendered-markdown pre{padding:14px;overflow:auto;border-radius:9px;background:var(--surface-soft)}.empty-state{color:var(--muted)}.letter-bar{min-height:50px;display:flex;align-items:center;gap:5px;padding:8px 20px;border-top:1px solid var(--line);overflow-x:auto}.letter-bar>span{margin-right:5px;color:var(--muted);font-size:11px;white-space:nowrap}.letter-bar button{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--line);border-radius:7px;background:var(--surface-soft);color:var(--ink);font-weight:600}.warning{margin:0;padding:10px 20px;background:color-mix(in srgb,#e2ad43 14%,var(--surface));color:var(--ink);font-size:12px}.panel-footer{min-height:48px;padding:9px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.panel-footer>div{display:flex;gap:12px}.text-button{padding:4px;border:0;background:transparent;color:var(--accent);font-weight:600}.text-button.danger{color:var(--danger)}.copy-actions{display:flex;gap:8px;padding:10px 20px;border-top:1px solid var(--line)}.primary-button,.secondary-button{min-height:38px;padding:8px 14px;border-radius:9px;font-weight:600;font-size:12px}.primary-button{border:1px solid var(--accent);background:var(--accent);color:var(--surface)}:root[data-theme=dark] .primary-button{color:#15231f}.secondary-button{border:1px solid var(--line);background:var(--surface-soft);color:var(--ink)}footer{padding:42px 0 30px;text-align:center;color:var(--muted);font-size:11px}.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}.clipboard-preview{display:none}.status{position:fixed;left:50%;bottom:22px;z-index:10;transform:translate(-50%);margin:0;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--surface);box-shadow:var(--shadow);font-size:13px;font-weight:600}@media(max-width:800px){.app-shell{padding:0 12px}.topbar{height:66px}.brand>span:last-child{display:none}.hero{padding:36px 8px 27px}.workspace{grid-template-columns:1fr}.panel{min-height:500px}.panel-head{padding:13px 14px}textarea,.preview{min-height:285px;padding:18px}.letter-bar,.panel-footer,.copy-actions{padding-left:14px;padding-right:14px}.copy-actions{flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}