:root{--bg: #f5f6fb;--surface: #ffffff;--surface-muted: #eef0f8;--border: #d9dcea;--text: #1b1f33;--text-muted: #5a6180;--accent: #1e1b4b;--accent-end: #312e81;--brand: #4f46e5;--brand-hover: #4338ca;--brand-gradient: linear-gradient(135deg, #22d3ee 0%, #6366f1 45%, #4f46e5 100%);--nav-text: #c7d2fe;--link: #4f46e5;--green: #16a34a;--green-hover: #15803d;--green-text: #ffffff;--warning: #a15c07;--error: #c62828;--code-bg: #fbfbfc;--radius: 10px;--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #0c0e1f;--surface: #14172e;--surface-muted: #1d2142;--border: #2c3160;--text: #e7e9f7;--text-muted: #9ca3c7;--accent: #1e1b4b;--accent-end: #312e81;--brand: #4f46e5;--brand-hover: #5b53f0;--link: #a5b4fc;--green: #22a353;--green-hover: #2cbc62;--warning: #e3a33b;--error: #ff7b72;--code-bg: #0f1226;color-scheme:dark}}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}a{color:var(--link)}code,kbd{font-family:var(--mono);font-size:.875em}code{padding:.1em .35em;border-radius:4px;background:var(--surface-muted)}kbd{padding:.1em .4em;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;background:var(--surface)}h1,h2,h3{line-height:1.25}.container{width:100%;max-width:1320px;margin:0 auto;padding:0 16px}.skip-link{position:absolute;left:16px;top:-48px;padding:8px 12px;border-radius:6px;background:var(--surface);z-index:10}.skip-link:focus{top:8px}.site-header{background:linear-gradient(90deg,var(--accent),var(--accent-end));color:#fff}.site-header__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:12px;padding-bottom:12px}.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.125rem;text-decoration:none}.site-nav{display:flex;flex-wrap:wrap;gap:4px 20px}.site-nav a{color:var(--nav-text);text-decoration:none;font-size:.9375rem}.site-nav a:hover{color:#fff;text-decoration:underline}.site-footer{margin-top:64px;border-top:1px solid var(--border);color:var(--text-muted);font-size:.875rem}.site-footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 24px;padding-top:16px;padding-bottom:16px}.hero{padding-top:32px;padding-bottom:20px}.hero h1{margin:0 0 8px;font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem)}.hero__lead{max-width:820px;margin:0;color:var(--text-muted);font-size:1.0625rem}.app{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}.sidebar,.workspace{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.sidebar{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;padding:16px}.sidebar__heading{margin:0 0 12px;font-size:1.125rem}.field-group{margin:0 0 16px;padding:0;border:0;min-width:0}.field-group:last-child{margin-bottom:0}.field-group__legend{margin-bottom:8px;padding:0;color:var(--text-muted);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.segmented{display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:8px;background:var(--surface-muted)}.segmented__item input{position:absolute;opacity:0;pointer-events:none}.segmented__item span{display:block;padding:6px 4px;border-radius:6px;text-align:center;font-size:.875rem;font-weight:600;color:var(--text-muted);cursor:pointer}.segmented__item input:checked+span{background:var(--surface);color:var(--text);box-shadow:0 1px 2px #00000026}.segmented__item input:focus-visible+span{outline:2px solid var(--link);outline-offset:1px}.option{padding:10px 0;border-top:1px solid var(--border)}.option:first-of-type{border-top:0;padding-top:0}.option__title{display:block;margin-bottom:6px;font-weight:600;font-size:.9375rem}.option__description{margin:4px 0 0;color:var(--text-muted);font-size:.8125rem;line-height:1.45}.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;font-size:.9375rem}.toggle input{position:absolute;opacity:0;pointer-events:none}.toggle__track{position:relative;flex:none;width:36px;height:20px;border-radius:999px;background:var(--border);transition:background-color .15s}.toggle__track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0000004d;transition:transform .15s}.toggle input:checked+.toggle__track{background:var(--brand)}.toggle input:checked+.toggle__track:after{transform:translate(16px)}.toggle input:focus-visible+.toggle__track{outline:2px solid var(--link);outline-offset:2px}.text-input{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--code-bg);color:var(--text);font:.875rem var(--mono)}.workspace{padding:16px}.examples{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}.examples__label{margin-right:4px;color:var(--text-muted);font-size:.875rem}.chip{padding:3px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface-muted);color:var(--text);font:inherit;font-size:.8125rem;cursor:pointer}.chip:hover{border-color:var(--brand)}html:not(.js) .examples,html:not(.js) .actions,html:not(.js) .link-button,html:not(.js) .pane-switch{display:none}.panes{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px}.app[data-direction=html-to-css] [data-direction=css-to-html],.app[data-direction=css-to-html] [data-direction=html-to-css]{display:none}.segmented--two{grid-template-columns:repeat(2,1fr)}.pane-switch{display:flex;align-items:center;padding-top:30px}.switch-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer;box-shadow:0 1px 3px #0000001f;transition:border-color .15s,color .15s,transform .2s}.switch-button:hover{border-color:var(--link);color:var(--link)}.switch-button:active{transform:scale(.94)}.switch-button:focus-visible{outline:3px solid var(--link);outline-offset:2px}.pane__header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}.pane__title{font-weight:600;font-size:.9375rem}.link-button{padding:0;border:0;background:none;color:var(--link);font:inherit;font-size:.875rem;cursor:pointer}.link-button:hover{text-decoration:underline}.code{display:block;width:100%;min-height:420px;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--code-bg);color:var(--text);font:.8125rem/1.55 var(--mono);tab-size:2;resize:vertical;white-space:pre;overflow-wrap:normal}.code:focus,.text-input:focus{outline:2px solid var(--link);outline-offset:-1px}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px}.convert-button{min-width:220px;padding:14px 36px;border:0;border-radius:10px;background:var(--green);color:var(--green-text);font:inherit;font-size:1.25rem;font-weight:700;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 14px #16a34a59;transition:background-color .15s,transform .05s}.convert-button:hover{background:var(--green-hover)}.convert-button:active{transform:translateY(1px)}.convert-button:focus-visible{outline:3px solid var(--link);outline-offset:2px}.status{flex:1 1 200px;margin:0;font-size:.9375rem}.status[data-tone=success]{color:var(--green)}.status[data-tone=warning]{color:var(--warning)}.status[data-tone=error]{color:var(--error)}.shortcut-hint{margin:0;color:var(--text-muted);font-size:.8125rem}.content{margin-top:56px}.content h2{margin:0 0 16px;font-size:1.625rem}.content h3{margin:0 0 6px;font-size:1.0625rem}.content p{margin:0}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:step}.steps li,.card{padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.steps li{counter-increment:step}.steps li:before{content:counter(step);display:inline-grid;place-items:center;width:28px;height:28px;margin-bottom:8px;border-radius:50%;background:var(--brand-gradient);color:#fff;font-weight:700}.steps__note{max-width:900px;color:var(--text-muted)}.content .steps__note{margin-top:16px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.card p,.steps p{color:var(--text-muted);font-size:.9375rem}.promo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:center}.promo__text p+p,.promo__text *+p{margin-top:16px}.promo__list{display:grid;gap:10px;margin:12px 0 0;padding-left:20px}.promo__list li::marker{color:var(--brand)}.promo__links{display:flex;flex-wrap:wrap;gap:10px}.promo__image{width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius)}.button{display:inline-block;padding:9px 18px;border-radius:8px;background:var(--brand);color:#fff;font-weight:600;text-decoration:none}.button:hover{background:var(--brand-hover)}.button--secondary,.button--secondary:hover{border:1px solid var(--border);background:var(--surface);color:var(--text)}.button--secondary:hover{border-color:var(--brand)}.faq{display:grid;gap:8px;max-width:900px}.faq details{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.faq summary{padding:14px 18px;font-weight:600;cursor:pointer}.faq details p{padding:0 18px 16px;color:var(--text-muted)}@media(max-width:1000px){.app,.promo{grid-template-columns:minmax(0,1fr)}.sidebar{order:2;position:static;max-height:none}.steps{grid-template-columns:minmax(0,1fr)}}@media(max-width:700px){.panes{grid-template-columns:minmax(0,1fr)}.pane-switch{justify-content:center;padding-top:0}.switch-button svg{transform:rotate(90deg)}.code{min-height:260px}.convert-button{width:100%}.shortcut-hint{display:none}}