.compare-page{padding-top:54px}.compare-headers{z-index:50;background:var(--border-dim);border-bottom:1px solid var(--border);grid-template-columns:1fr 1fr;gap:1px;display:grid;position:sticky;top:54px}.compare-header{text-transform:uppercase;letter-spacing:1px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:12px;font-weight:600;display:flex}.compare-header--dom{color:#166534;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#dcfce7e6}.compare-header--canvas{color:#1e40af;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#dbeafee6}.compare-header-dot{border-radius:50%;width:8px;height:8px}.compare-header--dom .compare-header-dot{background:#22c55e}.compare-header--canvas .compare-header-dot{background:#3b82f6}.compare-cards{flex-direction:column;gap:6px;padding-top:16px;padding-bottom:80px;display:flex}.compare-card{border:1px solid var(--border-dim);background:var(--border-dim);grid-template-columns:1fr 1fr;gap:1px;display:grid}.compare-pane{background:#fff;padding:20px;overflow:hidden}.compare-pane--canvas canvas{max-width:100%;height:auto;display:block}.compare-pane--dom iframe{border:none;width:100%;display:block;overflow:hidden}@media (width<=672px){.compare-header{padding:8px 12px;font-size:11px}.compare-pane{padding:12px}.compare-cards{gap:4px}}