.compare-figure{--compare-line:26px;margin:0}.compare{border:1px solid var(--border);background:var(--tone-ink);box-shadow:0 40px 80px -56px color-mix(in srgb, var(--foreground) 45%, transparent);cursor:ns-resize;-webkit-user-select:none;user-select:none;border-radius:24px;position:relative;overflow:hidden}.compare-block{flex-direction:column;margin:0;display:flex}.compare-block[data-block=screener]{height:calc(8 * var(--compare-line))}.compare-doc .compare-block[data-block=open-end]{margin-top:var(--compare-line)}.compare-code{color:color-mix(in srgb, var(--tone-ink-foreground) 88%, transparent);padding:64px 28px 28px 20px;position:relative}.compare-code pre{font:13px / var(--compare-line) var(--font-mono);white-space:pre}.compare-code p{min-height:var(--compare-line);padding-left:40px;position:relative}.compare-code p:before{content:attr(data-line);text-align:right;width:24px;color:color-mix(in srgb, var(--tone-ink-foreground) 32%, transparent);position:absolute;left:0}.compare-code p[data-gap]{color:color-mix(in srgb, var(--tone-ink-foreground) 40%, transparent)}.compare-code [data-token=tag]{color:var(--family-on-ink)}.compare-code [data-token=attr]{color:#8dceee;color:lab(79.3617% -15.4707 -22.727)}.compare-code [data-token=value]{color:#95dfa4;color:lab(82.8658% -32.834 21.2449)}.compare-code mark{background:color-mix(in srgb, var(--family-on-ink) 22%, transparent);color:var(--tone-ink-foreground);border-radius:5px;margin:-2px -4px;padding:2px 4px}.compare-doc{background:linear-gradient(90deg, transparent 27px, color-mix(in srgb, var(--coral) 30%, transparent) 27px 28px, transparent 28px), var(--card);clip-path:inset(0 0 calc(100% - var(--split)) 0);padding:64px 28px 28px 48px;position:absolute;inset:0}.compare-doc article{gap:6px;font-size:16px;line-height:1.45}.compare-doc article>p b{font-family:var(--font-serif);margin-right:4px}.compare-doc code{font:700 12px var(--font-mono);letter-spacing:.02em;color:var(--family);align-self:flex-start}.compare-doc ol{gap:8px;margin-top:6px;display:grid}.compare-doc li{align-items:center;gap:12px;display:flex}.compare-doc li>span{font:600 12px var(--font-mono);color:var(--muted-foreground)}.compare-doc mark{white-space:nowrap;background:color-mix(in srgb, var(--family) 14%, transparent);font:700 12px var(--font-mono);color:var(--family);border-radius:6px;padding:1px 6px}.compare-ruled{max-width:420px;height:calc(var(--compare-line) * 2);border:1px dashed color-mix(in srgb, var(--foreground) 20%, transparent);border-radius:8px;margin-top:6px}.compare-tag{z-index:1;pointer-events:none;border-radius:99px;padding:6px 12px;font-size:12px;font-weight:700;position:absolute}.compare-tag[data-side=doc]{background:var(--foreground);color:var(--background);top:18px;left:44px}.compare-tag[data-side=code]{background:var(--family-on-ink);color:var(--tone-ink);bottom:18px;right:18px}.compare-seam{top:var(--split);z-index:2;background:var(--family);touch-action:none;height:2px;position:absolute;left:0;right:0;transform:translateY(-1px)}.compare-seam:after{content:"";pointer-events:none;background:linear-gradient(#00000059,#0000);height:16px;position:absolute;inset:2px 0 auto}.compare-seam button{z-index:1;border:5px solid var(--background);background:var(--family);width:48px;height:48px;color:var(--background);box-shadow:0 12px 28px -12px color-mix(in srgb, var(--foreground) 60%, transparent);cursor:ns-resize;touch-action:none;border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;right:28px;transform:translateY(-50%)}.compare-seam button:focus-visible{outline:2px solid var(--foreground);outline-offset:3px}@media (max-width:640px){.compare-figure{--compare-line:22px}.compare-code{padding:56px 16px 20px 12px}.compare-doc{padding:56px 16px 20px 36px}.compare-doc article{font-size:14px}.compare-code pre{font-size:10.5px}.compare-code p{padding-left:28px}.compare-code p:before{width:18px}.compare-tag[data-side=doc]{left:32px}}