:root{--bg:#f4f6fa;--bg-grad-a:#eef2f9;--bg-grad-b:#f7f5f0;--surface:#ffffff;--surface-sunken:#f6f8fc;--border:#dde3ee;--border-strong:#c3cddf;--text:#12203a;--text-muted:#5b6880;--text-faint:#8590a5;--accent:#123a75;--accent-hover:#0d2c5a;--accent-soft:#e6edf9;--gold:#a8781a;--gold-soft:#fbf3e0;--danger:#9a3412;--danger-soft:#fdf1e7;--radius:12px;--radius-sm:8px;--shadow:0 1px 2px rgba(18,32,58,0.06),0 8px 24px rgba(18,32,58,0.06);--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}@media (prefers-color-scheme:dark){:root{--bg:#0c1220;--bg-grad-a:#0d1526;--bg-grad-b:#131421;--surface:#141c2e;--surface-sunken:#101828;--border:#26314a;--border-strong:#38445f;--text:#e8edf7;--text-muted:#9aa7bf;--text-faint:#6f7d97;--accent:#7aa7e8;--accent-hover:#9dc0f2;--accent-soft:#1a2740;--gold:#e0b667;--gold-soft:#2a2312;--danger:#f0a882;--danger-soft:#2c1a12;--shadow:0 1px 2px rgba(0,0,0,0.4),0 8px 24px rgba(0,0,0,0.3)}}*{box-sizing:border-box}body,html{margin:0;padding:0}body{background:var(--bg);background-image:linear-gradient(160deg,var(--bg-grad-a),var(--bg-grad-b));background-attachment:fixed;color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}.page{max-width:1100px;margin:0 auto;padding:40px 20px 64px}.header{border-bottom:1px solid var(--border);padding-bottom:24px;margin-bottom:28px}.eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:var(--gold-soft);border-radius:999px;padding:4px 12px;margin-bottom:14px}h1{font-size:clamp(26px,4vw,36px);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px}.tagline{margin:0;color:var(--text-muted);max-width:62ch}.layout{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:24px;gap:24px}@media (min-width:940px){.layout{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}.output-panel{position:-webkit-sticky;position:sticky;top:24px}}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.panel+.panel{margin-top:20px}h2{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px}.panel-help{margin:0 0 18px;font-size:13px;color:var(--text-muted)}.choices{display:grid;grid-gap:18px;gap:18px}@media (min-width:520px){.choices{grid-template-columns:1fr 1fr}}fieldset{border:0;margin:0;padding:0;min-width:0}legend{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);padding:0;margin-bottom:8px}.segmented{display:flex;gap:4px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px}.segmented button{flex:1 1;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--text-muted);font:inherit;font-size:14px;font-weight:600;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background .12s ease,color .12s ease}.segmented button:hover{color:var(--text)}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgba(18,32,58,.12)}.template-caption{margin:14px 0 0;font-size:12.5px;color:var(--text-faint)}.template-caption strong{color:var(--text-muted);font-weight:600}.field+.field{margin-top:18px}.field-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px}label{font-size:13.5px;font-weight:600}.use-example{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;white-space:nowrap}.use-example:hover{text-decoration:underline}.hint{margin:0 0 7px;font-size:12.5px;color:var(--text-faint)}input[type=text],textarea{width:100%;font:inherit;font-size:14px;color:var(--text);background:var(--surface-sunken);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:9px 11px;transition:border-color .12s ease,box-shadow .12s ease}textarea{resize:vertical;min-height:62px;line-height:1.5}input[type=text]:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}input::placeholder,textarea::placeholder{color:var(--text-faint);opacity:.75}.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;font-size:14px;font-weight:600;border-radius:var(--radius-sm);padding:10px 18px;cursor:pointer;border:1px solid transparent;transition:background .12s ease,border-color .12s ease,color .12s ease}.btn-primary{background:var(--accent);color:#fff}@media (prefers-color-scheme:dark){.btn-primary{color:#0c1220}}.btn-primary:hover{background:var(--accent-hover)}.btn-ghost{background:transparent;color:var(--text-muted);border-color:var(--border-strong)}.btn-ghost:hover{color:var(--text);border-color:var(--text-faint)}.btn-small{padding:6px 12px;font-size:12.5px}.output-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.output-tools,.warning{display:flex;gap:8px}.warning{align-items:flex-start;background:var(--danger-soft);color:var(--danger);border-radius:var(--radius-sm);padding:9px 12px;font-size:12.5px;margin-bottom:12px}.output{background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;font-family:var(--mono);font-size:12.9px;line-height:1.65;white-space:pre-wrap;word-wrap:break-word;margin:0;max-height:62vh;overflow-y:auto}.output.empty{font-family:inherit;font-size:13.5px;text-align:center;padding:44px 24px}.meta,.output.empty{color:var(--text-faint)}.meta{margin:10px 0 0;font-size:12px}.footer{margin-top:36px;padding-top:18px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-faint)}@media (prefers-reduced-motion:reduce){*{transition:none!important}}