:root { color-scheme: dark; --bg:#09131c; --panel:#10202c; --line:#2b4352; --muted:#aec0cc; --mint:#9ce6ce; --ink:#f1f5f6; font-family:Inter,Segoe UI,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at 95% 0%,#123b3b66,transparent 45%),var(--bg); color:var(--ink); }
a { color:inherit; }
button,input,textarea { font:inherit; }
button,a,input,textarea,pre,[tabindex] { outline-offset:5px; }
:focus-visible { outline:3px solid var(--mint); }
[hidden] { display:none !important; }
.skip-link { position:fixed; left:16px; top:-100px; background:var(--mint); color:var(--bg); padding:14px; z-index:2; }
.skip-link:focus { top:12px; }
.site-header { max-width:1440px; margin:auto; padding:26px 44px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:24px; }
.brand { font-weight:800; font-size:13px; letter-spacing:.08em; text-decoration:none; }
.brand span { color:var(--muted); font-weight:500; }
.back-link { font-size:14px; text-underline-offset:5px; white-space:nowrap; }
main { max-width:1440px; margin:auto; padding:46px 44px 28px; }
.intro { max-width:920px; padding-bottom:38px; }
.eyebrow { color:var(--mint); font:600 11px/1.5 ui-monospace,Consolas,monospace; letter-spacing:.14em; }
.status-dot { display:inline-block; background:var(--mint); width:7px; height:7px; border-radius:50%; margin-right:8px; }
h1 { font-size:clamp(36px,4.5vw,64px); font-weight:600; line-height:1.08; letter-spacing:-.04em; margin:20px 0; }
h1 em { font-style:normal; color:var(--mint); }
.lede { color:var(--muted); max-width:660px; font-size:17px; line-height:1.7; }
.trust-row { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:24px; font-size:12px; color:var(--muted); }
.trust-row span::before { content:'✓'; color:var(--mint); margin-right:8px; }
.workspace { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); }
.tool-nav { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); background:#0b1924; border-bottom:1px solid var(--line); }
.tool-button { border:0; border-bottom:3px solid transparent; color:var(--muted); background:transparent; min-height:64px; padding:14px 10px; cursor:pointer; font-weight:600; font-size:13px; }
.tool-button[aria-pressed=true] { color:var(--mint); background:#1a3438; border-bottom-color:var(--mint); }
.tool-button:hover { color:var(--ink); background:#1a303c; }
.workspace-body { display:grid; grid-template-columns:1fr 1fr; }
.input-panel,.output-panel { padding:30px; min-width:0; }
.output-panel { background:#0b1822; border-left:1px solid var(--line); }
h2 { font-size:24px; font-weight:600; letter-spacing:-.02em; margin:12px 0; overflow-wrap:anywhere; }
.description,.result-status { color:var(--muted); font-size:14px; line-height:1.7; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; margin-top:26px; }
.field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.field.wide { grid-column:1/-1; }
label { font-size:13px; font-weight:500; }
input,textarea { background:#0a1721; color:var(--ink); border:1px solid #49616d; border-radius:7px; padding:11px 12px; min-height:44px; width:100%; }
textarea { resize:vertical; min-height:112px; line-height:1.55; }
input[aria-invalid=true],textarea[aria-invalid=true] { border-color:#ffb1a6; }
.field-hint { font-size:12px; line-height:1.5; color:var(--muted); margin:0; }
button { min-height:44px; }
.primary,.quiet { border-radius:8px; cursor:pointer; padding:11px 15px; font-size:13px; font-weight:600; }
.primary { background:var(--mint); color:#102923; border:1px solid var(--mint); display:flex; justify-content:space-between; gap:22px; }
.primary:hover { background:#b9f4df; }
.quiet { color:var(--ink); background:transparent; border:1px solid #49616d; }
.quiet:hover:not(:disabled) { background:#1c3542; }
button:disabled { opacity:.5; cursor:not-allowed; }
.form-actions,.export-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.privacy-note,.receipt-note,.desk-footer { color:var(--muted); font-size:12px; line-height:1.7; }
.privacy-note { margin:22px 0 0; }
.output-header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.draft-badge { color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:5px 8px; font:10px ui-monospace,Consolas,monospace; }
.work-output { white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.85 Segoe UI,system-ui,sans-serif; margin:24px 0; max-height:650px; overflow:auto; padding-right:10px; }
.error { color:#ffd0c8; background:#482723; padding:12px; border-radius:6px; font-size:14px; line-height:1.5; }
.desk-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 0; }
.desk-footer p { max-width:720px; }
@media(max-width:1000px) { .tool-nav { grid-template-columns:repeat(3,1fr); } .fields { grid-template-columns:1fr; } }
@media(max-width:720px) { .site-header { padding:20px; } .brand span { display:none; } main { padding:26px 16px 16px; } .intro { padding-bottom:24px; } .workspace-body { grid-template-columns:1fr; } .output-panel { border-left:0; border-top:1px solid var(--line); } .input-panel,.output-panel { padding:22px 18px; } .desk-footer { align-items:flex-start; flex-direction:column; gap:8px; } .tool-button { font-size:12px; } .work-output { max-height:none; } }
@media(prefers-reduced-motion:no-preference) { button { transition:background .15s ease; } }