.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;gap:0;background:var(--bg)}.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}.preview-serp{flex-shrink:0;margin:0;padding:.5rem .6rem .6rem;border-bottom:1px solid var(--border);background:var(--surface);color:var(--text);font-family:Arial,Helvetica,sans-serif;min-width:0}.preview-serp__cite{display:flex;align-items:center;gap:.5rem;min-width:0}.preview-serp__favicon{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--muted) 16%,var(--surface));color:var(--muted);display:grid;place-items:center}.preview-serp__cite-text{min-width:0;overflow:hidden}.preview-serp__site{color:var(--text)}.preview-serp__site,.preview-serp__url{font-size:var(--font-sm);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-serp__url{margin-top:1px;color:var(--muted)}.preview-serp__title{font-size:var(--font-xl);line-height:1.3;font-weight:400;color:var(--primary)}.preview-serp__desc,.preview-serp__title{margin:.2rem 0 0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;word-break:break-word}.preview-serp__desc{font-size:var(--font-sm);line-height:1.58;color:var(--muted)}@media (max-width:768px){.panels-quad.panels-quad--mobile-tabs{grid-template-columns:none;grid-template-rows:none}.panels-quad:not(.panels-quad--mobile-tabs){grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);flex:1 1 auto;min-height:0;height:100%}.panels-quad:not(.panels-quad--mobile-tabs) .panel--css,.panels-quad:not(.panels-quad--mobile-tabs) .panel--html,.panels-quad:not(.panels-quad--mobile-tabs) .panel--js,.panels-quad:not(.panels-quad--mobile-tabs) .panel--preview-quad{grid-column:auto;min-height:0}.panels-quad:not(.panels-quad--mobile-tabs) .panel--css{grid-column:1;grid-row:1}.panels-quad:not(.panels-quad--mobile-tabs) .panel--js{grid-column:2;grid-row:1}.panels-quad:not(.panels-quad--mobile-tabs) .panel--html{grid-column:1;grid-row:2}.panels-quad:not(.panels-quad--mobile-tabs) .panel--preview-quad{grid-column:2;grid-row:2}.panels-quad:not(.panels-quad--mobile-tabs) .panels-quad__col-handle,.panels-quad:not(.panels-quad--mobile-tabs) .panels-quad__row-handle{display:none}}.hv-seo{border-top:1px solid var(--border,var(--border));background:var(--bg,var(--bg));color:var(--text)}html[data-theme=dark] .hv-seo{background:var(--bg);color:var(--text);border-top-color:var(--border)}.hv-seo__inner{max-width:56rem;margin:0 auto;padding:1.5rem .75rem 2rem}.hv-seo__intro{display:grid;gap:1.15rem;margin-bottom:1.5rem}.hv-seo__title{margin:0 0 .45rem;font-size:var(--font-xl);font-weight:700;letter-spacing:-.03em;line-height:1.25}.hv-seo__lead,.hv-seo__text{margin:0 0 .6rem;font-size:var(--font-normal);line-height:1.7;color:var(--muted)}.hv-seo__copy .hv-seo__lead:last-child,.hv-seo__copy .hv-seo__text:last-child{margin-bottom:0}html[data-theme=dark] .hv-seo__lead,html[data-theme=dark] .hv-seo__text{color:var(--muted)}.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;gap:.75rem 1rem;align-content:start}.hv-seo__facts>div{padding-top:.6rem;border-top:1px solid var(--border)}html[data-theme=dark] .hv-seo__facts>div{border-top-color:var(--border)}.hv-seo__facts dt{margin:0 0 .2rem;font-size:var(--font-sm);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.hv-seo__facts dd{margin:0;font-size:var(--font-normal);font-weight:600;letter-spacing:-.01em;color:var(--text)}html[data-theme=dark] .hv-seo__facts dd{color:var(--text)}.hv-seo__cases,.hv-seo__flow{margin:0 0 1.5rem;padding-top:1.25rem;border-top:1px solid var(--border)}html[data-theme=dark] .hv-seo__cases,html[data-theme=dark] .hv-seo__flow{border-top-color:var(--border)}.hv-seo__block-head{margin:0 0 .85rem}.hv-seo__block-head h3,.hv-seo__subtitle{margin:0 0 .35rem;font-size:var(--font-xl);font-weight:700;letter-spacing:-.02em}.hv-seo__subtitle{margin:1rem 0 .45rem}.hv-seo__block-head p{margin:0;font-size:var(--font-normal);line-height:1.6;color:var(--muted)}html[data-theme=dark] .hv-seo__block-head p{color:var(--muted)}.hv-seo__steps{list-style:none;margin:0;padding:0;display:grid;gap:0}.hv-seo__steps>li{display:grid;grid-template-columns:2.75rem 1fr;gap:.65rem;align-items:start;padding:.75rem 0;border-top:1px solid var(--border)}.hv-seo__steps>li:last-child{border-bottom:1px solid var(--border)}html[data-theme=dark] .hv-seo__steps>li,html[data-theme=dark] .hv-seo__steps>li:last-child{border-color:var(--border)}.hv-seo__step-num{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:999px;border:1px solid var(--border);font-size:var(--font-sm);font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;letter-spacing:.04em}.hv-seo__step-num,html[data-theme=dark] .hv-seo__step-num{background:var(--bg);box-shadow:0 0 0 3px var(--bg);color:var(--text)}html[data-theme=dark] .hv-seo__step-num{border-color:var(--border)}.hv-seo__case-list h4,.hv-seo__steps h4{margin:0 0 .35rem;font-size:var(--font-normal);font-weight:650;letter-spacing:-.02em}.hv-seo__case-list p,.hv-seo__steps p{margin:0;font-size:var(--font-normal);line-height:1.6;color:var(--muted)}html[data-theme=dark] .hv-seo__case-list p,html[data-theme=dark] .hv-seo__steps p{color:var(--muted)}.hv-seo__case-list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}.hv-seo__case-list li{padding:0 0 0 .75rem;border-left:2px solid var(--border)}html[data-theme=dark] .hv-seo__case-list li{border-left-color:var(--text)}.hv-seo__text--after{margin-top:1rem}.hv-seo a{color:var(--primary-2);font-weight:600}.hv-seo a,.hv-seo a:hover{text-decoration:none}html[data-theme=dark] .hv-seo a{color:var(--primary-2)}.hv-seo__links,.hv-seo__list,html[data-theme=dark] .hv-seo__links,html[data-theme=dark] .hv-seo__list{color:var(--muted)}.hv-seo__case-list code,.hv-seo__list code,.hv-seo__steps code{font-size:var(--font-sm)}.hv-seo__faq{display:flex;flex-direction:column;gap:.4rem;margin-top:1.15rem}.hv-seo__faq-item{border:1px solid var(--border);border-radius:10px;background:var(--white);padding:.45rem .6rem}html[data-theme=dark] .hv-seo__faq-item{border-color:var(--border);background:var(--surface)}.hv-seo__faq-item summary{cursor:pointer;font-weight:600;font-size:var(--font-normal);line-height:1.4}.hv-seo__faq-item p{margin:.45rem 0 .15rem;font-size:var(--font-normal);line-height:1.55;color:var(--muted)}html[data-theme=dark] .hv-seo__faq-item p{color:var(--muted)}@media (min-width:768px){.hv-seo__intro{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:1.5rem;align-items:start}.hv-seo__steps{grid-template-columns:repeat(3,1fr)}.hv-seo__steps>li{grid-template-columns:1fr;gap:.5rem;padding:0 1rem;border-top:0;border-right:1px solid var(--border)}.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[data-theme=dark] .hv-seo__steps>li{border-right-color:var(--border)}.hv-seo__case-list{grid-template-columns:repeat(3,1fr);gap:1rem}}.hv-viewport-toggle{display:inline-flex;align-items:center;gap:.1rem;padding:.1rem;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--border) 30%,var(--surface))}.hv-viewport-toggle .btn-icon{border:0;border-radius:6px;background:transparent}.hv-viewport-toggle .btn-icon.btn--active{background:var(--surface);color:var(--primary);box-shadow:0 1px 2px color-mix(in srgb,var(--black) 10%,transparent)}.preview-zoom-scaler .hv-viewport-stage{position:absolute;inset:0;display:flex;justify-content:center;align-items:stretch;overflow:auto;background:color-mix(in srgb,var(--border) 28%,var(--bg))}.preview-zoom-scaler .hv-viewport-stage[data-viewport=desktop]{background:var(--white);justify-content:stretch}.preview-zoom-scaler .hv-viewport-frame{position:relative;flex:0 0 auto;width:100%;height:100%;min-height:100%;background:var(--white)}.preview-zoom-scaler .hv-viewport-stage:not([data-viewport=desktop]) .hv-viewport-frame{box-shadow:0 0 0 1px var(--border),0 10px 28px color-mix(in srgb,var(--black) 14%,transparent)}.preview-zoom-scaler .hv-viewport-frame .preview-frame{position:absolute;inset:0;width:100%;height:100%;min-height:0;display:block;border:none;background:var(--white)}