:root{--bg: #0f1419;--bg-elevated: #161d24;--bg-editor: #0b1014;--border: #24303a;--text: #e7eef4;--text-muted: #8b9aab;--text-faint: #5c6b7a;--accent: #2ec9b3;--syntax: #e06b74;--ok: #5dba8c;--font: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px}#app{display:flex;flex-direction:column;min-height:100dvh}.skip{position:absolute;left:12px;top:-40px;z-index:10;padding:6px 10px;background:var(--bg-elevated);border:1px solid var(--accent);color:var(--text);font-size:13px;text-decoration:none}.skip:focus{top:8px}button{font:inherit;color:inherit;cursor:pointer;background:transparent;border:0}button:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.topbar{display:flex;flex:none;justify-content:space-between;align-items:center;height:48px;padding:0 14px;background:var(--bg-elevated);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px;min-width:0}.logo{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px}.logo img{display:block;width:22px;height:22px}.brand-text{display:flex;flex-direction:column;line-height:1.15}.brand-title{margin:0;letter-spacing:-.01em;font-size:15px;font-weight:600}.brand-site{color:var(--text-faint);letter-spacing:.04em;font-size:11px}.lang{display:inline-flex;align-items:center;gap:6px;color:var(--text-faint);font-size:12px}.lang button{color:var(--text-faint);height:auto;padding:0;font-size:12px}.lang button[aria-pressed=true]{color:var(--text);font-weight:600}.lang-sep{color:var(--text-faint)}.mode-bar{display:flex;flex:none;align-items:center;gap:0;height:40px;padding:0 14px;background:var(--bg-elevated);border-bottom:1px solid var(--border)}.seg{height:28px;padding:0 12px;border:1px solid var(--border);background:#12181f;color:var(--text);font-size:13px}.seg+.seg{margin-left:-1px}.seg:first-of-type{border-radius:6px 0 0 6px}.seg:last-of-type{border-radius:0 6px 6px 0}.seg[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#0b1014;font-weight:600}.panel{flex:1;padding:16px 14px 20px;background:var(--bg)}.panel-title{margin:0 0 6px;font-size:14px;font-weight:600}.hint{margin:0 0 14px;color:var(--text-muted);font-size:13px;line-height:1.45}.row{display:flex;align-items:center;gap:8px;margin:0 0 10px}.tool{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;border:1px solid var(--border);border-radius:6px;background:#12181f;color:var(--text);font-size:13px}.tool:hover{border-color:#334351}.tool svg{flex:none;color:var(--text-muted)}.primary{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#0b1014;font-size:13px;font-weight:600}.primary:hover{filter:brightness(1.05)}.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}.field-shell{position:relative;margin:0 0 12px}#field1,#field2{display:block;width:100%;min-height:calc(15.5em + 16px);margin:0 0 12px;padding:8px 10px;resize:vertical;border:1px solid var(--border);border-radius:6px;background:var(--bg-editor);color:var(--text);caret-color:var(--accent);font-family:var(--font-mono);font-size:13px;line-height:1.55}.field-shell #field1{margin:0}.field-overlay{position:absolute;left:10px;top:8px;right:10px;margin:0;color:var(--text-faint);font-family:var(--font);font-size:13px;line-height:1.55;pointer-events:none}.field-shell.has-text .field-overlay{display:none}.privacy{margin:4px 0 0;color:var(--text-faint);font-size:12px}.status{display:flex;flex:none;align-items:center;gap:8px;height:30px;padding:0 14px;overflow:hidden;white-space:nowrap;border-top:1px solid var(--border);background:var(--bg-elevated);color:var(--text-faint);font-size:12px}.status-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--text-faint)}.status[data-state=ok]{color:var(--ok)}.status[data-state=ok] .status-dot{background:var(--ok)}.status[data-state=error]{color:var(--syntax)}.status[data-state=error] .status-dot{background:var(--syntax)}.status-text{min-width:0;overflow:hidden;text-overflow:ellipsis}.legal-link{flex:none;color:var(--text-faint);font-size:11px;text-decoration:underline;text-underline-offset:3px}.legal-link:hover{color:var(--text)}.file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.toast{position:fixed;z-index:5;bottom:42px;left:50%;transform:translate(-50%);padding:.4rem .75rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-elevated);color:var(--text);font-size:13px}.about{max-width:40rem;margin:0 auto;padding:2.5rem 1.25rem 4rem;color:var(--text)}.about h1,.about-de>h2:first-of-type{margin:0 0 .75rem;letter-spacing:-.02em;font-size:1.65rem;font-weight:600;line-height:1.25}.about h2{margin:1.75rem 0 .5rem;font-size:1.05rem;font-weight:600}.about p,.about-subline{margin:0;color:var(--text-muted);font-size:.95rem;line-height:1.55}.about-subline{margin-bottom:.25rem}.about code{font-family:var(--font-mono);font-size:.88em}.about-de,html[lang=de] .about-en{display:none}html[lang=de] .about-de{display:block}.faq{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--border)}.faq details{padding:.65rem 0;border-bottom:1px solid var(--border)}.faq summary{cursor:pointer;font-size:.95rem;font-weight:600}.faq details p{margin-top:.45rem}@media(max-width:1280px){.panel{padding:16px 14px 20px}}@media(max-width:390px){.topbar,.mode-bar,.status{padding-left:10px;padding-right:10px}.tool,.primary,.seg{height:36px;min-height:36px}.status .legal-link:last-of-type{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
