.compat-tool{gap:var(--space-xl) var(--space-3xl);padding-bottom:var(--space-2xl);grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;display:grid}.compat-tool .form{max-width:none}.compat-result{gap:var(--space-lg);padding:var(--space-xl);border-radius:var(--radius-card);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);display:grid}.compat-result h2{font-size:var(--text-2xl);max-width:none}.compat-result__top{align-items:baseline;gap:var(--space-xs) var(--space-lg);flex-wrap:wrap;display:flex}.compat-result__verdict{color:var(--color-ink-2)}.compat-result .figure{font-size:var(--text-md);color:var(--color-ink-2)}.compat-pair-icons{align-items:center;gap:var(--space-sm);color:var(--color-ink);display:flex}.compat-pair-icons .ico{width:40px;height:40px}.matrix{border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:var(--text-sm)}.matrix th{padding:var(--space-2xs);color:var(--color-muted);font-weight:500}.matrix thead th{height:3rem}.matrix th .ico{width:20px;height:20px;color:var(--color-ink-2);margin-inline:auto}.matrix tbody th{text-align:left;white-space:nowrap;padding-right:var(--space-sm)}.matrix tbody th .ico{margin-right:var(--space-2xs);display:inline-block}.matrix td{border:var(--rule-hair) solid var(--color-paper);padding:0}.matrix td a{min-width:2.75rem;min-height:2.75rem;color:var(--color-ink);background:color-mix(in oklab, var(--color-ink) var(--heat,10%), var(--color-paper-2));transition:outline-color var(--dur-short) var(--ease-out);place-items:center;text-decoration:none;display:grid}.matrix td a.is-high{color:var(--color-paper)}@media (hover:hover){.matrix td a:hover{outline:2px solid var(--color-ink);outline-offset:-2px}}.matrix td a:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}.matrix-legend{gap:var(--space-sm) var(--space-lg);margin-top:var(--space-md);font-size:var(--text-sm);color:var(--color-muted);flex-wrap:wrap;display:flex}.pair-head{gap:var(--space-xl) var(--space-3xl);padding-block:var(--space-xl) var(--space-2xl);grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:end;display:grid}.pair-head h1{font-size:var(--text-display-s);max-width:18ch}.pair-head .lead{color:var(--color-ink-2);margin-top:var(--space-lg)}.pair-score{gap:var(--space-md);padding:var(--space-xl);border-radius:var(--radius-card);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);display:grid}.pair-score__caption{font-size:var(--text-sm);color:var(--color-muted)}.scenes{gap:var(--space-lg);counter-reset:scene;margin:0;padding:0;list-style:none;display:grid}.scenes li{gap:var(--space-xs);padding-top:var(--space-md);border-top:var(--rule-hair) solid var(--color-rule);display:grid}.scenes h3{font-size:var(--text-title)}.scenes p{font-size:var(--text-md)}.pair-links{gap:var(--space-xl) var(--gap-columns);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.pair-links h3{margin-bottom:var(--space-md)}.link-list{gap:var(--space-xs);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.link-list a{align-items:center;gap:var(--space-xs);min-height:44px;padding:0 var(--space-md);border-radius:var(--radius-pill);box-shadow:inset 0 0 0 var(--rule-hair) var(--color-rule);color:var(--color-ink-2);font-size:var(--text-sm);transition:background-color var(--dur-short) var(--ease-out);text-decoration:none;display:inline-flex}@media (hover:hover){.link-list a:hover{background:var(--color-paper-2);color:var(--color-ink)}}.link-list a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.link-list .figure{color:var(--color-muted)}.sign-head{gap:var(--space-lg) var(--space-xl);padding-block:var(--space-xl) var(--space-2xl);grid-template-columns:auto minmax(0,1fr);align-items:center;display:grid}.sign-head .ico{width:72px;height:72px;color:var(--color-ink)}.sign-head h1{font-size:var(--text-display-s);max-width:22ch}.sign-head p{grid-column:1/-1}.traits{gap:var(--space-xs);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.traits li{padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-pill);box-shadow:inset 0 0 0 var(--rule-hair) var(--color-rule);font-size:var(--text-sm);color:var(--color-ink-2)}.plain-list{gap:var(--space-sm);padding-left:var(--space-lg);margin:0;display:grid}.plain-list li{font-size:var(--text-md);color:var(--color-ink-2);max-width:60ch}.decans{gap:var(--space-md);margin:0;padding:0;list-style:none;display:grid}.decans li{gap:var(--space-2xs);padding-top:var(--space-md);border-top:var(--rule-hair) solid var(--color-rule);display:grid}.decans b{color:var(--color-ink);font-weight:500}.decans p{font-size:var(--text-md)}.sign-side{gap:var(--space-lg);top:calc(var(--nav-h) + var(--space-lg));padding:var(--space-xl);border-radius:var(--radius-card);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);display:grid;position:sticky}.sign-side h2{font-size:var(--text-2xl)}.quiz{gap:var(--space-2xl);max-width:46rem;padding-bottom:var(--space-2xl);display:grid}.quiz__progress{z-index:var(--z-raised);gap:var(--space-xs);padding-block:var(--space-sm);background:var(--color-paper);display:grid;position:sticky;top:0}.quiz__progress p{font-size:var(--text-sm);color:var(--color-muted)}.quiz fieldset{gap:var(--space-sm);border:0;min-width:0;margin:0;padding:0;display:grid}.quiz legend{margin-bottom:var(--space-md);font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-ink);padding:0;line-height:1.2}.quiz legend .figure{color:var(--color-muted);margin-right:var(--space-xs)}.choice{gap:var(--space-sm);min-height:52px;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-well);background:var(--color-paper-2);box-shadow:inset 0 0 0 var(--rule-hair) var(--color-rule);color:var(--color-ink-2);cursor:pointer;transition:background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);grid-template-columns:20px minmax(0,1fr);align-items:start;display:grid}@media (hover:hover){.choice:hover{background:var(--color-paper-3);color:var(--color-ink)}}.choice:has(input:checked){box-shadow:inset 0 0 0 1px var(--color-ink-2);color:var(--color-ink);background:var(--color-paper-3)}.choice input{width:20px;height:20px;accent-color:var(--color-accent);cursor:pointer;margin:2px 0 0}.choice input:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.quiz__error{color:var(--color-error);font-size:var(--text-sm);min-height:1lh}.quiz-result{gap:var(--space-lg);padding:var(--space-xl);border-radius:var(--radius-card);background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);scroll-margin-top:var(--space-2xl);display:grid}.quiz-result h2{font-size:var(--text-section);max-width:20ch}.quiz-result h3{font-size:var(--text-title);margin-top:var(--space-sm)}.quiz-result p{font-size:var(--text-lead);color:var(--color-ink-2);max-width:60ch}.quiz-result__card{gap:var(--space-lg);grid-template-columns:minmax(0,9rem) minmax(0,1fr);align-items:start;display:grid}.quiz-result__card img{border-radius:var(--radius-well)}@media (width<=60rem){.compat-tool,.pair-head,.pair-links{grid-template-columns:minmax(0,1fr)}.sign-side{position:static}}@media (width<=40rem){.compat-result,.pair-score,.quiz-result,.sign-side{padding:var(--space-lg)}.quiz-result__card{grid-template-columns:minmax(0,1fr)}.quiz-result__card picture{max-width:9rem}}
