:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --accent:#e82a4f; --surface:#fff; --field:#f6f6f8; --ink:#18181a; --muted:#626267; --line:#d3d3d8; background:#f4f4f6; color:var(--ink); }
* { box-sizing:border-box } body { margin:0; padding:32px 20px; } main { max-width:540px; margin:24px auto; padding:32px; border-radius:24px; background:var(--surface); border:1px solid var(--line); }
.brand { margin:0 0 28px; font-size:15px; font-weight:600; color:var(--muted) }.brand span { color:var(--accent); } h1 { font-size:34px; letter-spacing:-1px; margin:0 0 8px }.subtitle { color:var(--muted); margin:0 0 30px; line-height:1.5; overflow-wrap:anywhere; }
label { display:block; margin:20px 0 8px; font-size:15px; font-weight:600 } label span { font-weight:400; color:var(--muted) } input,textarea { display:block; width:100%; border:1px solid var(--line); border-radius:12px; background:var(--field); color:var(--ink); font:inherit; padding:14px; min-height:48px } textarea { resize:vertical } :focus-visible { outline:3px solid var(--accent); outline-offset:3px } input::placeholder,textarea::placeholder { color:var(--muted); opacity:1 }
.privacy,.help,details { font-size:13px; line-height:1.6; color:var(--muted) }.privacy { margin:18px 0 } .help { margin:8px 0 } details { margin:0 0 22px } summary { cursor:pointer; min-height:44px; padding:10px 0 }button { width:100%; min-height:50px; border:0; border-radius:12px; font:inherit; font-weight:600; background:var(--accent); color:white; cursor:pointer } button:disabled { opacity:.55; cursor:default } #result { line-height:1.5; overflow-wrap:anywhere } [hidden] { display:none !important }
.policy { max-width:760px } .policy p { line-height:1.65; overflow-wrap:anywhere } .policy h2 { font-size:22px; margin-top:28px } .policy a { color:var(--accent) } .policy code { font-size:.9em } a { color:var(--accent) }
@media(prefers-color-scheme:dark) { :root { --surface:#1c1c1e; --field:#2c2c2e; --ink:#f7f7fa; --muted:#aaaab2; --line:#45454a; background:#101012 } }
@media(max-width:480px) { body { padding:20px 16px } main { margin:0 auto; padding:24px 20px; border-radius:20px } h1 { font-size:30px } .brand { margin-bottom:28px } }