:root{--canvas:#f2f4f0;--surface:#fbfcfa;--surface-2:#e9ede7;--ink:#17231d;--muted:#526158;--border:#cdd4cc;--accent:#176b48;--accent-dark:#0e5035;--danger:#9c2f2f;--focus:#c77718;--radius:10px;--font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.55 var(--font)}button,input,select,textarea{font:inherit}button,a,select,input[type=checkbox]{touch-action:manipulation}a{color:var(--accent-dark)}a:hover{text-decoration-thickness:2px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.skip-link{position:fixed;inset:8px auto auto 8px;z-index:20;padding:10px 14px;background:var(--ink);color:var(--surface);transform:translateY(-150%)}.skip-link:focus{transform:none}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.site-header,.site-footer{max-width:1540px;margin:auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}.site-header{border-bottom:1px solid var(--border)}.brand{display:inline-grid;grid-template-columns:44px auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;color:var(--ink);text-decoration:none}.brand-mark{grid-row:1/3;width:44px;height:44px;object-fit:contain}.brand-name{font-weight:800;line-height:1;letter-spacing:-.04em}.brand-name span{color:var(--accent)}.brand-owner{align-self:start;color:var(--muted);font-size:.66rem;font-weight:700;line-height:1;letter-spacing:.06em;text-transform:uppercase}nav{display:flex;flex-wrap:wrap;gap:20px}nav a{color:var(--muted);text-decoration:none;font-weight:650;font-size:.9rem}main{max-width:1540px;margin:auto;padding:24px 28px 72px}
.tool{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}.tool-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 28px 18px}.tool-intro h1{font-size:1.65rem;line-height:1.15;letter-spacing:-.035em;margin:0 0 6px}.tool-intro p{margin:0;color:var(--muted);max-width:72ch}.free-label{white-space:nowrap;font-size:.82rem;font-weight:750;color:var(--accent-dark);background:#e2eee6;padding:6px 9px;border-radius:6px}
.settings{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(130px,.7fr) minmax(160px,.85fr) auto;gap:12px;padding:14px 28px;border-block:1px solid var(--border);background:var(--surface-2)}.settings label{display:grid;gap:5px;color:var(--muted);font-size:.76rem;font-weight:750;letter-spacing:.01em}.settings input[type=text],.settings select{width:100%;height:42px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--ink);padding:0 11px}.settings .check{display:flex;align-items:center;gap:8px;padding-top:20px;color:var(--ink);font-size:.88rem}.check input{width:18px;height:18px;accent-color:var(--accent)}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:590px}.panel{min-width:0;display:flex;flex-direction:column}.input-panel{border-right:1px solid var(--border)}.panel-header{min-height:76px;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border)}.panel-header h2{margin:0;font-size:.95rem}.panel-header p{margin:2px 0 0;color:var(--muted);font:12px/1.4 var(--mono)}.output-header>div:first-child{display:flex;align-items:center;gap:16px}.actions,.secondary-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.actions button{min-height:40px;border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:7px;padding:8px 11px;font-size:.8rem;font-weight:750;cursor:pointer}.actions button:hover:not(:disabled){border-color:#8b988e;background:var(--surface-2)}.actions button:active:not(:disabled){transform:translateY(1px)}.actions button.primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}.actions button.primary:hover:not(:disabled){background:#2b3931}.actions button:disabled{opacity:.45;cursor:not-allowed}
#markdown-input{flex:1;width:100%;min-height:510px;resize:vertical;border:0;background:var(--surface);color:var(--ink);padding:22px;font:14px/1.65 var(--mono);tab-size:2}#markdown-input:focus{outline-offset:-3px}.tabs{display:flex;gap:2px}.tab{border:0!important;background:transparent!important;color:var(--muted)!important;padding:7px 8px!important;min-height:36px!important}.tab.active{color:var(--ink)!important;box-shadow:inset 0 -2px var(--accent)}.output-view{flex:1;min-height:510px;min-width:0}.output-view[hidden]{display:none}#preview-frame{display:block;width:100%;height:100%;min-height:510px;border:0;background:#fff}.source-view{margin:0;padding:22px;overflow:auto;background:#18221c;color:#e8eee9;font:13px/1.6 var(--mono);white-space:pre;tab-size:2}.empty-state{margin:auto;padding:32px;color:var(--muted);text-align:center}.empty-state[hidden]{display:none}.status-row{display:flex;justify-content:space-between;gap:16px;padding:10px 16px;border-top:1px solid var(--border);color:var(--muted);font-size:.78rem}.status-row p{margin:0}.status-row [data-kind=success]{color:var(--accent-dark)}.status-row [data-kind=error]{color:var(--danger)}
.content-section{max-width:1050px;margin:72px auto 0}.content-section h2,.prose-page h1,.prose-page h2{letter-spacing:-.025em;line-height:1.2}.content-section h2{font-size:1.65rem}.content-section p,.content-section li,.prose-page p,.prose-page li{max-width:72ch;color:#334239}.answer-first ol{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;list-style:none;counter-reset:steps}.answer-first li{counter-increment:steps;padding:18px;border-top:1px solid var(--border)}.answer-first li:before{content:counter(steps);display:block;margin-bottom:18px;color:var(--accent);font:700 13px var(--mono)}.example,.split-copy{display:grid;grid-template-columns:1.2fr .8fr;gap:40px}.example pre{overflow:auto;margin:0;padding:22px;background:#18221c;color:#e8eee9;border-radius:var(--radius);font:13px/1.6 var(--mono)}.example h3{margin-top:0}.split-copy{border-block:1px solid var(--border);padding-block:34px}.faq details{border-bottom:1px solid var(--border)}.faq summary{padding:20px 0;cursor:pointer;font-weight:750}.faq details p{padding-bottom:18px;margin:0}.ad-region{max-width:1050px;min-height:100px;margin:48px auto 0;border:1px dashed var(--border);display:grid;place-items:center;color:var(--muted);font-size:.72rem}.ad-region[hidden]{display:none}.site-footer{border-top:1px solid var(--border);color:var(--muted);font-size:.86rem}.site-footer p{margin:0}.prose-page{max-width:760px;min-height:65vh;margin:56px auto;padding:0 28px 72px}.prose-page h1{font-size:2.4rem;margin-bottom:28px}.prose-page h2{margin-top:42px}.text-button{display:inline-block;padding:11px 14px;border-radius:7px;background:var(--ink);color:var(--surface);font-weight:750;text-decoration:none}.error-page{text-align:center;padding-top:14vh}.eyebrow{font:700 13px var(--mono)!important;color:var(--accent)!important}.toast{position:fixed;z-index:30;right:20px;bottom:20px;max-width:min(380px,calc(100vw - 40px));padding:12px 16px;border-radius:8px;background:var(--ink);color:var(--surface);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .18s ease-out,transform .18s ease-out}.toast.show{opacity:1;transform:none}
@media(max-width:1050px){.settings{grid-template-columns:repeat(2,minmax(0,1fr))}.settings .check{padding-top:0}.workspace{grid-template-columns:1fr}.input-panel{border-right:0;border-bottom:1px solid var(--border)}.answer-first ol{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.site-header,.site-footer{padding:16px}.site-header nav a:nth-child(-n+2){display:none}main{padding:16px 12px 56px}.tool-intro{padding:20px 16px;display:block}.free-label{display:inline-block;margin-top:12px}.settings{grid-template-columns:1fr;padding:12px 16px}.settings .check{min-height:44px}.panel-header{align-items:flex-start;flex-direction:column;padding:12px}.panel-header .actions{width:100%;justify-content:flex-start}.panel-header .actions button{flex:1}.output-header>div:first-child{width:100%;justify-content:space-between}.output-header .actions button:last-child{flex-basis:100%}#markdown-input,.output-view,#preview-frame{min-height:430px}.status-row{display:block}.status-row p+ p{margin-top:4px}.content-section{margin-top:52px;padding-inline:4px}.answer-first ol,.example,.split-copy{grid-template-columns:1fr}.example,.split-copy{gap:24px}.site-footer{align-items:flex-start;flex-direction:column}.prose-page{padding-inline:18px}.prose-page h1{font-size:2rem}}
@media(max-width:390px){.secondary-actions button{flex:1 1 30%}.actions button{font-size:.76rem;padding-inline:8px}.tabs{gap:0}.tool-intro h1{font-size:1.45rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}