.compare-hero{text-align:center;padding:2.5rem 0 1.5rem}.compare-hero--minimal{text-align:left;max-width:44rem;margin-bottom:.15rem;padding:2rem 0 1.15rem}.compare-hero h1{font-family:var(--font-display);letter-spacing:-.02em;color:var(--cs-text);margin:0 0 .4rem;font-size:clamp(2rem,5vw,2.75rem);font-weight:700;line-height:1.12}.compare-hero p{color:var(--cs-muted);max-width:52ch;margin:0;font-size:1.05rem;line-height:1.55}.compare-hero-lead{color:color-mix(in srgb, var(--cs-text) 48%, var(--cs-muted))}.compare-same-task-promo{max-width:58ch;margin-top:.4rem!important;font-size:.95rem!important;line-height:1.5!important}.compare-same-task-promo a{color:var(--cs-link);font-weight:600;text-decoration:none}.compare-same-task-promo a:hover{color:var(--cs-brand-link-hover);text-underline-offset:.15em;text-decoration:underline}.compare-controls-shell{z-index:15;border-radius:var(--cs-radius-lg);border:1px solid color-mix(in srgb, var(--cs-border) 72%, transparent);border-top:2px solid color-mix(in srgb, var(--cs-accent) 58%, var(--cs-border));background:color-mix(in srgb, var(--cs-bg-elevated) 92%, transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 24px color-mix(in srgb, var(--cs-text) 4%, transparent);margin:0 auto 1.35rem;padding:1rem 1.1rem;position:sticky;top:5.25rem}.compare-selectors{grid-template-columns:minmax(8rem,10rem) 1fr auto 1fr;align-items:end;gap:.75rem;display:grid}.compare-select-group{flex-direction:column;gap:.4rem;min-width:0;display:flex}.compare-select-group label{color:var(--cs-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:650}.compare-select-group select,.compare-combobox-shell input{width:100%;min-height:2.85rem;font-size:.98rem;font-family:var(--font-body);background:var(--cs-bg-deep);border:1px solid var(--cs-border);border-radius:var(--lab-btn-radius);color:var(--cs-text);cursor:pointer;box-sizing:border-box;padding:.65rem .85rem}.compare-combobox-shell input{cursor:text}.compare-select-group select:focus,.compare-combobox-shell input:focus{border-color:var(--cs-accent);box-shadow:0 0 0 3px var(--cs-accent-soft);outline:none}.compare-combobox-shell{min-width:0;position:relative}.compare-combobox-list{z-index:40;background:var(--cs-bg-elevated);border:1px solid var(--cs-border);border-radius:var(--lab-btn-radius);max-height:min(22rem,55vh);box-shadow:0 12px 28px color-mix(in srgb, var(--cs-text) 12%, transparent);margin:0;padding:.35rem 0;list-style:none;position:absolute;top:calc(100% + .25rem);left:0;right:0;overflow:auto}.compare-combobox-group{letter-spacing:.05em;text-transform:uppercase;color:var(--cs-muted);padding:.45rem .85rem .2rem;font-size:.68rem;font-weight:650}.compare-combobox-option{color:var(--cs-text);cursor:pointer;padding:.45rem .85rem}.compare-combobox-option[aria-selected=true],.compare-combobox-option:hover{background:var(--cs-accent-soft)}.compare-combobox-empty{color:var(--cs-muted);padding:.65rem .85rem;font-size:.9rem}.compare-vs-badge{background:var(--cs-accent-soft);border:1px solid color-mix(in srgb, var(--cs-accent) 40%, transparent);width:2.25rem;height:2.25rem;font-family:var(--font-display);letter-spacing:.04em;color:var(--cs-text);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-bottom:.15rem;font-size:.68rem;font-weight:700;display:flex}.compare-empty-state{color:var(--cs-muted);padding:2rem 0}.compare-loading{color:var(--cs-muted);padding:2rem 0;font-size:.95rem}.compare-insight{border:none;border-left:3px solid color-mix(in srgb, var(--cs-brand-cyan) 78%, var(--cs-accent));border-radius:0 var(--cs-radius-pill) var(--cs-radius-pill) 0;background:var(--cs-surface-subtle);color:color-mix(in srgb, var(--cs-text) 86%, var(--cs-muted));margin:0;padding:.8rem 1rem .8rem 1.05rem;font-size:.92rem;line-height:1.55}.compare-insight strong{color:var(--cs-text);font-weight:650}.compare-insight--neutral{border-left-color:color-mix(in srgb, var(--cs-muted) 45%, transparent);background:var(--cs-panel)}.compare-insight--warning{background:#b4530917;border-left-color:#b45309b3}.compare-section--syntax{border:1px solid color-mix(in srgb, var(--cs-border) 70%, transparent);border-radius:var(--cs-radius-lg);background:var(--cs-panel);padding:0 1rem 1rem}.compare-section--syntax>summary{cursor:pointer;padding:1rem 0 .75rem;list-style:none}.compare-section--syntax>summary::-webkit-details-marker{display:none}.compare-results{gap:1.35rem;display:grid}.compare-results-head{border:none;border-bottom:1px solid color-mix(in srgb, var(--cs-border) 80%, transparent);background:0 0;border-radius:0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem .15rem 1.05rem;display:flex}.compare-results-items{flex-wrap:wrap;align-items:center;gap:.85rem 1rem;display:flex}.compare-results-item{flex-direction:column;gap:.15rem;min-width:0;display:flex}.compare-results-name{font-family:var(--font-display);letter-spacing:-.03em;color:var(--compare-accent,var(--cs-text));font-size:clamp(1.15rem,2.5vw,1.45rem);font-weight:700}.compare-results-link{color:var(--cs-muted);font-size:.85rem;text-decoration:none}.compare-results-link:hover{color:var(--cs-link)}.compare-results-vs{letter-spacing:.1em;text-transform:uppercase;color:var(--cs-muted);opacity:.85;font-size:.7rem;font-weight:700}.compare-results-actions{flex-wrap:wrap;gap:.55rem;display:flex}.btn-sm{min-height:2.35rem;padding:.45rem .9rem;font-size:.88rem}.compare-section{gap:.7rem;display:grid}.compare-section-title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--cs-text);margin:0;font-size:1.05rem;font-weight:650}.compare-matrix{border:1px solid color-mix(in srgb, var(--cs-border) 75%, transparent);border-radius:var(--cs-radius-lg);background:color-mix(in srgb, var(--cs-bg-elevated) 55%, transparent);overflow:hidden}.compare-matrix-row{border-top:1px solid color-mix(in srgb, var(--cs-border) 55%, transparent);grid-template-columns:minmax(9rem,12rem) minmax(0,1fr) minmax(0,1fr);display:grid}.compare-matrix-row:first-child{border-top:none}.compare-matrix-row:not(.compare-matrix-row--head):nth-child(2n){background:color-mix(in srgb, var(--cs-panel) 80%, transparent)}.compare-matrix-row:not(.compare-matrix-row--head):hover{background:var(--cs-surface-subtle)}.compare-matrix-row--head{background:color-mix(in srgb, var(--cs-accent-soft) 55%, var(--cs-panel));border-bottom:1px solid color-mix(in srgb, var(--cs-accent) 22%, var(--cs-border))}.compare-matrix-label{border-right:1px solid color-mix(in srgb, var(--cs-border) 55%, transparent);background:0 0;flex-direction:column;justify-content:flex-start;gap:.4rem;padding:.95rem 1rem;display:flex}.compare-matrix-label--head{letter-spacing:.07em;text-transform:uppercase;color:var(--cs-muted);justify-content:center;font-size:.7rem;font-weight:700}.compare-matrix-label-text{color:var(--cs-text);font-size:.92rem;font-weight:600;line-height:1.35}.compare-matrix-cell{border-right:1px solid color-mix(in srgb, var(--cs-border) 45%, transparent);min-width:0;padding:.95rem 1.05rem}.compare-matrix-cell--right{border-right:none}.compare-matrix-cell--head{font-family:var(--font-display);letter-spacing:-.02em;color:var(--cs-text);align-items:center;font-size:.98rem;font-weight:700;display:flex}.compare-diff{letter-spacing:.05em;text-transform:uppercase;border-radius:4px;align-self:flex-start;padding:.18rem .48rem;font-size:.65rem;font-weight:700;line-height:1.2;display:inline-flex}.compare-diff--same{color:color-mix(in srgb, #15803d 82%, var(--cs-text));background:#15803d1f}.compare-diff--similar{color:color-mix(in srgb, #a16207 78%, var(--cs-text));background:#a162071f}.compare-diff--different{background:var(--cs-danger-soft);color:var(--cs-danger)}html[data-theme=dark] .compare-diff--same{color:#86efac;background:#22c55e24}html[data-theme=dark] .compare-diff--similar{color:#fcd34d;background:#fbbf2424}.compare-text-cell{color:var(--cs-text);font-size:.92rem;line-height:1.6}.compare-text-cell--empty{color:var(--cs-muted)}.compare-text-cell ul{margin:0;padding-left:1.15rem}.compare-text-cell li{margin-bottom:.28rem}.compare-text-cell li:last-child{margin-bottom:0}.compare-code-cell{gap:.45rem;display:grid;position:relative}.compare-code-cell--empty .compare-code-block{color:var(--cs-muted);font-style:italic}.compare-code-level{letter-spacing:.04em;text-transform:uppercase;color:var(--cs-muted);border:1px solid var(--cs-border);border-radius:4px;align-self:flex-start;padding:.12rem .4rem;font-size:.68rem;font-weight:700}.compare-copy-btn{cursor:pointer;font:inherit;justify-self:start}.compare-code-block{border:1px solid var(--cs-border);background:color-mix(in srgb, var(--cs-bg-deep) 88%, var(--cs-text) 4%);white-space:pre-wrap;word-break:break-word;border-radius:8px;margin:0;padding:.75rem .85rem;font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.55;overflow-x:auto}html[data-theme=dark] .compare-code-block{background:#00000059;border-color:#ffffff14}.compare-code-block code{font:inherit;color:var(--cs-text)}.compare-list{margin:0;padding-left:1.2rem}.compare-empty{color:var(--cs-muted);font-size:.88rem}.same-task-section{border:1px solid color-mix(in srgb, var(--cs-border) 70%, transparent);border-radius:var(--cs-radius-lg);background:var(--cs-panel);margin-top:.75rem;padding:1.25rem}.same-task-section h2{font-family:var(--font-display);margin:0 0 .35rem;font-size:1.05rem}.same-task-note{color:var(--cs-muted);margin:0 0 1rem;font-size:.9rem;line-height:1.55}.same-task-controls{flex-wrap:wrap;align-items:center;gap:.65rem;margin-bottom:1rem;display:flex}.same-task-controls label{color:var(--cs-text);font-size:.9rem;font-weight:600}.same-task-select{font-size:.95rem;font-family:var(--font-body);background:var(--cs-bg-deep);border:1px solid var(--cs-border);border-radius:var(--lab-btn-radius);color:var(--cs-text);min-width:12rem;padding:.45rem .85rem}@media (width<=900px){.compare-selectors{grid-template-columns:1fr}.compare-vs-badge{justify-self:center;margin:0}.compare-results-head{flex-direction:column;align-items:flex-start}.compare-matrix-row,.compare-matrix-row--head{grid-template-columns:1fr}.compare-matrix-label,.compare-matrix-cell{border-right:none;border-bottom:1px solid color-mix(in srgb, var(--cs-border) 55%, transparent)}.compare-matrix-cell--right{border-bottom:none}.compare-matrix-row--head .compare-matrix-cell--head{display:none}.compare-matrix-row:not(.compare-matrix-row--head) .compare-matrix-cell--left:before,.compare-matrix-row:not(.compare-matrix-row--head) .compare-matrix-cell--right:before{letter-spacing:.05em;text-transform:uppercase;color:var(--cs-muted);content:attr(data-col-label);margin-bottom:.35rem;font-size:.72rem;font-weight:700;display:block}}@media (width<=640px){.compare-hero--minimal{padding:1.75rem 0 1.1rem}.compare-controls-shell{padding:.85rem;top:4.5rem}.compare-results-actions{width:100%}.compare-results-actions .btn{flex:auto;justify-content:center}}
