.compat-section{max-width:900px;margin-inline:auto;padding-bottom:var(--space-24)}.compat-selector{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-4);align-items:end;margin-bottom:var(--space-10)}.compat-vs{font-size:var(--text-2xl);font-weight:800;color:var(--accent-400);text-align:center;padding-bottom:var(--space-4)}.compat-select-group label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-2)}.compat-select{width:100%;padding:var(--space-4);background:var(--bg-card);border:2px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' fill='none' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}.compat-select:focus{outline:none;border-color:var(--primary-400)}.compat-select option{background:var(--neutral-800);color:var(--text-primary)}.compat-result{animation:fadeInUp .4s var(--ease-out)}.compat-summary{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8);text-align:center;margin-bottom:var(--space-8)}.compat-score{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-size:var(--text-xl);font-weight:800;margin-bottom:var(--space-4)}.compat-score.excellent{background:#2eb8671f;color:#47d181;border:1px solid hsla(145,60%,45%,.25)}.compat-score.good{background:#2e8ab81f;color:#5cadd6;border:1px solid hsla(200,60%,45%,.25)}.compat-score.partial{background:#e8a5301f;color:var(--accent-400);border:1px solid hsla(38,80%,55%,.25)}.compat-score.incompatible{background:#cc33331f;color:#d65c5c;border:1px solid hsla(0,60%,50%,.25)}.compat-title{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-2)}.compat-desc{color:var(--text-secondary);max-width:500px;margin-inline:auto}.compat-details{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-5)}.compat-detail-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);transition:border-color var(--duration-fast) var(--ease-out)}.compat-detail-card:hover{border-color:var(--border-default)}.compat-detail-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.compat-detail-icon{font-size:var(--text-2xl)}.compat-detail-title{font-weight:700}.compat-detail-status{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;margin-bottom:var(--space-3)}.compat-detail-status.yes{background:#2eb8671f;color:#47d181}.compat-detail-status.partial{background:#e8a5301f;color:var(--accent-400)}.compat-detail-status.no{background:#cc33331f;color:#d65c5c}.compat-detail-note{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed)}.compat-items{list-style:none;padding:0;margin:var(--space-4) 0 0 0;border-top:1px solid hsla(220,15%,20%,.3);padding-top:var(--space-3)}.compat-item{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) 0;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-secondary)}.compat-item+.compat-item{border-top:1px solid hsla(220,15%,20%,.15)}.compat-item-icon{flex-shrink:0;font-size:12px;margin-top:2px}.compat-item.item-ok{color:var(--text-secondary)}.compat-item.item-warn{color:var(--accent-400)}.compat-item.item-no{color:#db7070}.compat-matrix{margin-top:var(--space-12)}.compat-matrix h3{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-6)}.matrix-table-wrap{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow-x:auto;padding:var(--space-4)}.matrix-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.matrix-table th{padding:var(--space-3) var(--space-4);text-align:center;font-weight:700;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);white-space:nowrap}.matrix-table th:first-child{text-align:left}.matrix-table td{padding:var(--space-3) var(--space-4);text-align:center;border-bottom:1px solid hsla(220,15%,20%,.3)}.matrix-table td:first-child{text-align:left;font-weight:600;color:var(--accent-400);white-space:nowrap}.matrix-cell{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);font-size:var(--text-base)}@media(max-width:768px){.compat-selector{grid-template-columns:1fr;gap:var(--space-2)}.compat-vs{padding:var(--space-2)}.compat-details{grid-template-columns:1fr}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}