.panels-quad{--panels-col:50%;--panels-row:50%;display:grid;grid-template-columns:var(--panels-col) 6px 1fr;grid-template-rows:var(--panels-row) 6px 1fr;flex:1 1;min-width:0;min-height:0;overflow:hidden;position:relative;grid-gap:0;gap:0;background:var(--border)}.panels-quad .panel--css{grid-column:1;grid-row:1}.panels-quad .panel--js{grid-column:3;grid-row:1}.panels-quad .panel--html{grid-column:1;grid-row:3}.panels-quad .panel--preview-quad{grid-column:3;grid-row:3}.panels-quad__col-handle{grid-column:2;grid-row:1/-1;cursor:col-resize;touch-action:none;position:relative;z-index:3;background:linear-gradient(to right,transparent,color-mix(in srgb,var(--border) 70%,transparent) 45%,color-mix(in srgb,var(--primary) 25%,var(--border)) 50%,color-mix(in srgb,var(--border) 70%,transparent) 55%,transparent)}.panels-quad__col-handle:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4px;height:36px;border-radius:999px;background:color-mix(in srgb,var(--muted) 55%,transparent)}.panels-quad__col-handle:focus-visible:after,.panels-quad__col-handle:hover:after{background:var(--primary)}.panels-quad__col-handle:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}.panels-quad__row-handle{grid-column:1/-1;grid-row:2;cursor:row-resize;touch-action:none;position:relative;z-index:3;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--border) 70%,transparent) 45%,color-mix(in srgb,var(--primary) 25%,var(--border)) 50%,color-mix(in srgb,var(--border) 70%,transparent) 55%,transparent)}.panels-quad__row-handle:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:4px;border-radius:999px;background:color-mix(in srgb,var(--muted) 55%,transparent)}.panels-quad__row-handle:focus-visible:after,.panels-quad__row-handle:hover:after{background:var(--primary)}.panels-quad__row-handle:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}body.is-resizing-panels{-webkit-user-select:none;user-select:none}body.is-resizing-panels iframe{pointer-events:none}.preview-frame--placeholder{background:var(--surface);flex:1 1}@media (max-width:768px){.panels-quad{grid-template-columns:1fr;grid-template-rows:minmax(120px,20%) minmax(120px,20%) minmax(140px,26%) minmax(160px,1fr)}.panels-quad .panel--css,.panels-quad .panel--html,.panels-quad .panel--js,.panels-quad .panel--preview-quad{grid-column:1}.panels-quad .panel--css{grid-row:1}.panels-quad .panel--js{grid-row:2}.panels-quad .panel--html{grid-row:3}.panels-quad .panel--preview-quad{grid-row:4}.panels-quad__col-handle,.panels-quad__row-handle{display:none}}.hv-dom{border-top:1px solid var(--border);max-height:220px;overflow:auto;padding:.5rem .75rem .75rem;font-size:.75rem;background:var(--panel,transparent)}.hv-dom__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.35rem}.hv-dom__title{font-weight:600;font-size:.8rem}.hv-dom__note{margin:0 0 .5rem;color:var(--muted);line-height:1.4}.hv-dom__stats{display:flex;flex-wrap:wrap;gap:.35rem .75rem;list-style:none;margin:0 0 .6rem;padding:0}.hv-dom__stats li{display:inline-flex;gap:.35rem;align-items:baseline;color:var(--muted)}.hv-dom__stats strong{color:var(--text);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.hv-dom__outline{list-style:none;margin:0;padding:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.hv-dom__outline li{display:flex;align-items:baseline;gap:.4rem;padding:.12rem 0;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}.hv-dom__outline code{font-size:.72rem;word-break:break-all}.hv-dom__kids{color:var(--muted);font-size:.68rem}.hv-dom__empty{margin:0;color:var(--muted)}.diff-panel{flex-shrink:0;height:var(--diff-height,220px);min-height:100px;border-top:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column}.diff-panel[hidden]{display:none!important}.diff-resize-handle{flex-shrink:0;height:8px;margin-top:-4px;cursor:row-resize;touch-action:none;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--border) 70%,transparent) 45%,color-mix(in srgb,var(--primary) 25%,var(--border)) 50%,color-mix(in srgb,var(--border) 70%,transparent) 55%,transparent);position:relative;z-index:2}.diff-resize-handle:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:4px;border-radius:999px;background:color-mix(in srgb,var(--muted) 55%,transparent)}.diff-resize-handle:focus-visible:after,.diff-resize-handle:hover:after{background:var(--primary)}.diff-resize-handle:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}body.is-resizing-diff{cursor:row-resize!important;-webkit-user-select:none;user-select:none}body.is-resizing-diff iframe{pointer-events:none}.diff-panel__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.4rem .75rem;border-bottom:1px solid var(--border);font-size:.8rem;font-weight:600;flex-shrink:0}.diff-panel__title{display:flex;align-items:center;gap:.4rem}.diff-stats{font-weight:400;color:var(--muted);font-size:.75rem}.diff-panel__actions{display:flex;align-items:center;gap:.35rem}.diff-content{flex:1 1;overflow:auto;min-height:0}.diff-grid{display:grid;grid-template-columns:1fr 1fr;min-height:100%}.diff-col__head{position:sticky;top:0;z-index:1;padding:.3rem .5rem;font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:color-mix(in srgb,var(--border) 40%,var(--surface));border-bottom:1px solid var(--border)}.diff-col:first-child{border-right:1px solid var(--border)}.diff-line{display:flex;font-family:ui-monospace,Cascadia Code,Fira Code,monospace;font-size:.72rem;line-height:1.5;border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent)}.diff-num{flex-shrink:0;width:2.5rem;padding:0 .35rem;text-align:right;color:var(--muted);background:color-mix(in srgb,var(--border) 25%,var(--surface));-webkit-user-select:none;user-select:none}.diff-text{flex:1 1;padding:0 .5rem;white-space:pre-wrap;word-break:break-all}.diff-line--added{background:color-mix(in srgb,#059669 12%,var(--surface))}.diff-line--added .diff-num{background:color-mix(in srgb,#059669 20%,var(--surface));color:#059669}.diff-line--removed{background:color-mix(in srgb,#dc2626 12%,var(--surface))}.diff-line--removed .diff-num{background:color-mix(in srgb,#dc2626 20%,var(--surface));color:#dc2626}.diff-line--faded{opacity:.35}@media (max-width:768px){.diff-panel{max-height:min(38vh,280px)}.diff-grid{grid-template-columns:1fr}.diff-col:first-child{border-right:none;border-bottom:1px solid var(--border)}.diff-line{font-size:.68rem}.diff-num{width:2rem}}@media (max-width:900px){.diff-panel{max-height:min(35vh,220px);min-height:80px}}.validation{padding:.4rem .75rem;font-size:.75rem;border-top:1px solid var(--border);max-height:80px;overflow-y:auto}.validation-ok{color:var(--success);margin:0;font-weight:600}.validation-err{color:var(--error);margin:0 0 .25rem;font-weight:600}.validation ul{margin:0;padding-left:1.2rem;color:var(--muted)}@media (max-width:900px){.validation{max-height:56px;flex-shrink:0}}.hv-seo{border-top:1px solid var(--border,#e2e8f0);background:var(--bg,#f8fafc);color:#0f172a}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo,html[data-htmlviewer-theme=dark] .hv-seo{background:#0f172a;color:#f1f5f9;border-top-color:#334155}.hv-seo__inner{max-width:56rem;margin:0 auto;padding:2.75rem 1.25rem 3.5rem}.hv-seo__intro{display:grid;grid-gap:2rem;gap:2rem;margin-bottom:2.75rem}.hv-seo__title{margin:0 0 .65rem;font-size:1.45rem;font-weight:700;letter-spacing:-.03em;line-height:1.25}.hv-seo__lead,.hv-seo__text{margin:0 0 .9rem;font-size:.98rem;line-height:1.7;color:#64748b}.hv-seo__copy .hv-seo__lead:last-child,.hv-seo__copy .hv-seo__text:last-child{margin-bottom:0}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__lead,html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__text,html[data-htmlviewer-theme=dark] .hv-seo__lead,html[data-htmlviewer-theme=dark] .hv-seo__text{color:#94a3b8}.hv-seo__lead strong,.hv-seo__text strong{color:inherit;font-weight:650}.hv-seo__facts{margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-gap:1.15rem 1.5rem;gap:1.15rem 1.5rem;align-content:start}.hv-seo__facts>div{padding-top:.85rem;border-top:1px solid #e2e8f0}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__facts>div,html[data-htmlviewer-theme=dark] .hv-seo__facts>div{border-top-color:#334155}.hv-seo__facts dt{margin:0 0 .2rem;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#64748b}.hv-seo__facts dd{margin:0;font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:#0f172a}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__facts dd,html[data-htmlviewer-theme=dark] .hv-seo__facts dd{color:#f1f5f9}.hv-seo__cases,.hv-seo__flow{margin:0 0 2.75rem;padding-top:2.25rem;border-top:1px solid #e2e8f0}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__cases,html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__flow,html[data-htmlviewer-theme=dark] .hv-seo__cases,html[data-htmlviewer-theme=dark] .hv-seo__flow{border-top-color:#334155}.hv-seo__block-head{margin:0 0 1.35rem}.hv-seo__block-head h3,.hv-seo__subtitle{margin:0 0 .45rem;font-size:1.15rem;font-weight:700;letter-spacing:-.02em}.hv-seo__subtitle{margin:1.75rem 0 .65rem}.hv-seo__block-head p{margin:0;font-size:.95rem;line-height:1.6;color:#64748b}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__block-head p,html[data-htmlviewer-theme=dark] .hv-seo__block-head p{color:#94a3b8}.hv-seo__steps{list-style:none;margin:0;padding:0;display:grid;grid-gap:0;gap:0}.hv-seo__steps>li{display:grid;grid-template-columns:2rem 1fr;grid-gap:1rem;gap:1rem;padding:1.25rem 0;border-top:1px solid #e2e8f0}.hv-seo__steps>li:last-child{border-bottom:1px solid #e2e8f0}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__steps>li,html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__steps>li:last-child,html[data-htmlviewer-theme=dark] .hv-seo__steps>li,html[data-htmlviewer-theme=dark] .hv-seo__steps>li:last-child{border-color:#334155}.hv-seo__step-num{padding-top:.15rem;font-size:.85rem;font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:#64748b}.hv-seo__case-list h4,.hv-seo__steps h4{margin:0 0 .35rem;font-size:1rem;font-weight:650;letter-spacing:-.02em}.hv-seo__case-list p,.hv-seo__steps p{margin:0;font-size:.92rem;line-height:1.6;color:#64748b}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__case-list p,html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__steps p,html[data-htmlviewer-theme=dark] .hv-seo__case-list p,html[data-htmlviewer-theme=dark] .hv-seo__steps p{color:#94a3b8}.hv-seo__case-list{list-style:none;margin:0;padding:0;display:grid;grid-gap:1.35rem;gap:1.35rem}.hv-seo__case-list li{padding:0 0 0 1.15rem;border-left:2px solid #e2e8f0}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__case-list li,html[data-htmlviewer-theme=dark] .hv-seo__case-list li{border-left-color:#334155}.hv-seo__text--after{margin-top:1.5rem}.hv-seo a{color:#1d4ed8;font-weight:600;text-decoration:none}.hv-seo a:hover{text-decoration:underline}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo a,html[data-htmlviewer-theme=dark] .hv-seo a{color:#93c5fd}.hv-seo__links,.hv-seo__list{margin:0 0 1.25rem;padding-left:1.2rem;font-size:.95rem;line-height:1.55;color:#64748b}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__links,html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__list,html[data-htmlviewer-theme=dark] .hv-seo__links,html[data-htmlviewer-theme=dark] .hv-seo__list{color:#94a3b8}.hv-seo__links li,.hv-seo__list li{margin-bottom:.4rem}.hv-seo__case-list code,.hv-seo__list code,.hv-seo__steps code{font-size:.88em}.hv-seo__faq{display:flex;flex-direction:column;gap:.5rem;margin-top:2rem}.hv-seo__faq-item{border:1px solid #e2e8f0;border-radius:10px;background:#fff;padding:.65rem .9rem}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__faq-item,html[data-htmlviewer-theme=dark] .hv-seo__faq-item{border-color:#334155;background:#1e293b}.hv-seo__faq-item summary{cursor:pointer;font-weight:600;font-size:.92rem;line-height:1.4}.hv-seo__faq-item p{margin:.55rem 0 .15rem;font-size:.9rem;line-height:1.55;color:#64748b}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__faq-item p,html[data-htmlviewer-theme=dark] .hv-seo__faq-item p{color:#94a3b8}@media (min-width:768px){.hv-seo__intro{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:2.5rem;align-items:start}.hv-seo__steps{grid-template-columns:repeat(3,1fr)}.hv-seo__steps>li{grid-template-columns:1fr;gap:.75rem;padding:0 1.5rem;border-top:0;border-right:1px solid #e2e8f0}.hv-seo__steps>li:last-child{border-right:0;border-bottom:0;padding-right:0}.hv-seo__steps>li:first-child{padding-left:0}html:has(#htmlviewer-app[data-theme=dark]) .hv-seo__steps>li,html[data-htmlviewer-theme=dark] .hv-seo__steps>li{border-right-color:#334155}.hv-seo__case-list{grid-template-columns:repeat(3,1fr);gap:1.75rem}}.sidebar{display:none!important;width:0;overflow:hidden;flex-shrink:0;align-self:stretch;flex-direction:column;padding:.6rem;background:var(--surface);border-left:1px solid var(--border);min-height:0}.sidebar__ads,.sidebar__inner{display:flex;flex-direction:column;flex:1 1;min-height:0;width:100%;align-items:center}.sidebar__ads{gap:.5rem;overflow-y:auto}.ad-slot{width:var(--ad-width);max-width:100%;height:var(--ad-height);flex-shrink:0}.ad-placeholder,.ad-slot{display:flex;align-items:center;justify-content:center}.ad-placeholder{height:100%;min-height:var(--ad-height);border:1px dashed var(--border);border-radius:8px;flex-direction:column;font-size:.75rem;padding:.75rem;line-height:1.4}.ad-placeholder,.sidebar__note{width:100%;text-align:center;color:var(--muted)}.sidebar__note{font-size:.62rem;margin:auto 0 0;padding-top:.5rem;line-height:1.35;flex-shrink:0}