:root{color-scheme:light dark;--bg:#f8f8f6;--panel:#fff;--ink:#1d1d1b;--muted:#6c6b66;--line:#deded8;--accent:#235a4d;--accent-ink:#fff;--focus:#8ab9aa}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.shell{max-width:1180px;margin:0 auto;padding:clamp(28px,6vw,76px) 24px 34px}.site-header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:42px}.brand{display:flex;align-items:center;gap:14px}.logo{width:48px;height:48px;flex:none;fill:var(--accent);stroke:var(--accent-ink);stroke-width:2.8;stroke-linecap:round}.logo-cut{stroke-width:4.5}h1{font-size:clamp(2rem,5vw,3.25rem);letter-spacing:-.06em;line-height:1;margin:0 0 10px}.site-header p{margin:0;color:var(--muted)}.privacy{text-align:right;font-size:.87rem}.controls{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px}.presets,.actions{display:flex;gap:7px;flex-wrap:wrap}.preset,.button,.copy-button{appearance:none;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);font:inherit;font-size:.9rem;padding:8px 12px;cursor:pointer}.preset.active,.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.secondary{background:transparent}button:hover{border-color:var(--accent)}button:focus-visible,textarea:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}kbd{font:inherit;font-size:.75em;opacity:.72;margin-left:4px}.editors{display:grid;grid-template-columns:1fr 1fr;gap:16px}.editor-card{position:relative;min-height:420px;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;box-shadow:0 1px 2px #00000008}.editor-head{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line);font-size:.88rem}.editor-head label{font-weight:650}.editor-head span{color:var(--muted);font-variant-numeric:tabular-nums}textarea{display:block;width:100%;height:365px;resize:vertical;border:0;background:transparent;color:var(--ink);padding:16px;font:15px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}textarea::placeholder{color:var(--muted)}.output-card textarea{padding-bottom:54px}.copy-button{position:absolute;right:12px;bottom:12px}.copy-button.copied{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.summary{min-height:1.5em;margin:13px 2px 16px;color:var(--muted);font-size:.9rem}.changes{margin:0 0 30px;padding:15px 17px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.changes h2{margin:0 0 9px;font-size:.9rem}.changes ul{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}.changes li{padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.82rem}.options{border-top:1px solid var(--line);padding-top:18px;max-width:860px}summary{cursor:pointer;font-weight:650}.option-note,.warning{color:var(--muted);font-size:.91rem}.warning{font-size:.82rem}.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:18px 0}.option-grid label{font-size:.92rem}.option-grid input{accent-color:var(--accent)}footer{padding:0 24px 34px;color:var(--muted);font-size:.85rem;text-align:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media (prefers-color-scheme:dark){:root{--bg:#171817;--panel:#20211f;--ink:#f0f0eb;--muted:#b5b5ad;--line:#3b3c38;--accent:#8bc6b3;--accent-ink:#10251e;--focus:#c1e9d9}.editor-card{box-shadow:none}}@media(max-width:720px){.shell{padding-inline:16px}.site-header,.controls{align-items:flex-start;flex-direction:column}.site-header{margin-bottom:28px}.privacy{text-align:left}.editors{grid-template-columns:1fr}.editor-card{min-height:320px}textarea{height:270px}.option-grid{grid-template-columns:1fr}}
html,body,textarea{overscroll-behavior:none}.demo-button{background:#e4eee9;border-color:#c5d8d0;color:#17463b}.demo-button:hover{background:#d7e7df}.changes ul{display:grid;gap:8px}.changes li.change-detail{padding:0;border:0;border-radius:0}.change-detail button{display:grid;width:100%;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.change-detail button:hover,.change-detail button:focus-visible{background:color-mix(in srgb,var(--accent) 12%,var(--panel));border-color:var(--accent)}.change-detail button span{color:var(--muted);font-size:.8rem}.change-detail code{overflow:hidden;color:var(--ink);font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-overflow:ellipsis;white-space:nowrap}.changes .change-detail-static{padding:8px 10px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:.84rem}
body .shell{max-width:1600px}body .editor-card{min-height:520px}body textarea{height:465px}@media (min-width:1280px){body .editors.has-changes{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(300px,.7fr)}body .changes{align-self:stretch;max-height:520px;margin:0;overflow:auto}body .changes .summary{margin:0 0 14px}}@media (min-width:721px) and (max-width:1279px){body .changes{grid-column:1/-1;max-height:300px;margin:0;overflow:auto}}@media (max-width:720px){body .changes{grid-column:auto;max-height:280px;margin:0;overflow:auto}body .editor-card{min-height:320px}body textarea{height:270px}}
body .options{margin-inline:auto}
body .subtitle-detail{display:inline-block;margin-top:4px;font-size:.88em}
body .options>summary{text-align:center}