:root{--ci:#2c2531;--cm:#69616e;--cp:#7d315f;--cr:#c6547d;--cb:#fff4f7;--cl:#f5f0f8;--ce:#e8dce5}
.compat-hero{background:linear-gradient(135deg,#fff8fa,#f6edf8 55%,#fff);border-bottom:1px solid var(--ce);color:var(--ci)}
.compat-hero__inner{max-width:930px;padding-top:3.4rem;padding-bottom:3.7rem;text-align:center}.compat-breadcrumb{align-items:center;color:var(--cm);display:flex;flex-wrap:wrap;font-size:.9rem;gap:.55rem;justify-content:center;margin-bottom:1.4rem}.compat-breadcrumb a{color:var(--cp);text-decoration:none}.compat-hero__badge{background:#fff;border:1px solid var(--ce);border-radius:999px;color:var(--cp);display:inline-flex;gap:.5rem;margin-bottom:1rem;padding:.45rem .9rem}.compat-hero h1{color:var(--ci);font-size:clamp(2.05rem,5vw,3.5rem);letter-spacing:-.035em;line-height:1.08;margin:0 auto 1.1rem;max-width:820px}.compat-hero p{color:var(--cm);font-size:1.12rem;line-height:1.75;margin:0 auto 1.6rem;max-width:760px}
.compat-hero__cta,.compat-primary-button{background:linear-gradient(135deg,var(--cp),var(--cr));border:0;border-radius:12px;color:#fff;cursor:pointer;display:inline-flex;font-weight:700;justify-content:center;padding:.9rem 1.3rem;text-decoration:none}.compat-hero__cta:hover,.compat-primary-button:hover{color:#fff;filter:brightness(.96);transform:translateY(-1px)}
.compat-tool-section{background:#fbfafc;padding:3.25rem 0}.compat-tool-layout{align-items:start;display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 290px}.compat-tool-card{background:#fff;border:1px solid var(--ce);border-radius:20px;box-shadow:0 18px 45px rgba(77,42,67,.08);overflow:hidden}.compat-tool-card__head{align-items:flex-start;border-bottom:1px solid var(--ce);display:flex;gap:1rem;justify-content:space-between;padding:1.5rem}.compat-tool-card__head h2{color:var(--ci);font-size:1.55rem;margin:.15rem 0 0}.compat-eyebrow,.compat-kicker{color:var(--cp);font-size:.78rem;font-weight:800;letter-spacing:.1em;margin:0;text-transform:uppercase}.compat-private{background:var(--cl);border-radius:999px;color:var(--cp);flex:0 0 auto;font-size:.78rem;padding:.45rem .7rem}.compat-state{padding:1.6rem}.compat-checklist{color:var(--cm);display:grid;gap:.55rem;margin:1.2rem 0 1.5rem;padding-left:1.25rem}.compat-progress-row{color:var(--cm);display:flex;font-size:.88rem;justify-content:space-between}.compat-progress{background:#efe8ed;border-radius:999px;height:8px;margin:.55rem 0 1.4rem;overflow:hidden}.compat-progress span{background:linear-gradient(90deg,var(--cp),var(--cr));display:block;height:100%;transition:width .25s}.compat-dimension{color:var(--cp);font-size:.8rem;font-weight:800;letter-spacing:.08em;margin-bottom:.45rem;text-transform:uppercase}.compat-question{color:var(--ci);font-size:1.25rem;font-weight:700;line-height:1.45;margin-bottom:1.2rem}.compat-answers{display:grid;gap:.7rem}.compat-answer{background:#fff;border:1px solid var(--ce);border-radius:12px;color:var(--ci);cursor:pointer;padding:.85rem 1rem;text-align:left;transition:.18s}.compat-answer:hover,.compat-answer:focus-visible{background:var(--cb);border-color:var(--cr);outline:3px solid rgba(198,84,125,.15)}.compat-answer.is-selected{background:var(--cl);border-color:var(--cp)}.compat-navigation{margin-top:1rem}.compat-secondary-button{background:#fff;border:1px solid var(--ce);border-radius:10px;color:var(--cp);cursor:pointer;font-weight:700;padding:.75rem 1rem}.compat-secondary-button:disabled{cursor:not-allowed;opacity:.5}.compat-side-note{background:var(--cp);border-radius:18px;color:#fff;padding:1.5rem}.compat-side-note>i{font-size:1.6rem;margin-bottom:.8rem}.compat-side-note h2{color:#fff;font-size:1.25rem;line-height:1.35}.compat-side-note p{line-height:1.65}.compat-side-note__small{font-size:.88rem;opacity:.78}.compat-loading{align-items:center;color:var(--cm);display:flex;gap:.8rem}.compat-spinner{animation:compat-spin .8s linear infinite;border:3px solid var(--ce);border-radius:50%;border-top-color:var(--cp);height:28px;width:28px}@keyframes compat-spin{to{transform:rotate(360deg)}}.compat-result{text-align:center}.compat-result__score{color:var(--cp);font-size:3.4rem;font-weight:800;line-height:1;margin:.75rem 0}.compat-result__score small{color:var(--cm);font-size:1rem}.compat-result__dimensions{display:grid;gap:.85rem;margin:1.5rem 0;text-align:left}.compat-dimension-result__head{display:flex;font-weight:700;justify-content:space-between}.compat-dimension-result__bar{background:#efe8ed;border-radius:999px;height:9px;margin-top:.4rem;overflow:hidden}.compat-dimension-result__bar span{background:linear-gradient(90deg,var(--cp),var(--cr));display:block;height:100%}.compat-result__advice{background:var(--cb);border-left:4px solid var(--cr);border-radius:8px;margin-bottom:1.25rem;padding:1rem;text-align:left}.compat-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}.compat-copy-status{color:var(--cm);font-size:.88rem;min-height:1.2rem}.compat-error{background:#fff3f3;color:#7d1f2d}.compat-noscript{background:#fff7df;margin:0;padding:1rem 1.6rem}
.compat-content-section{padding:3.8rem 0}.compat-content-section--soft{background:var(--cl)}.compat-reading-width{max-width:930px}.compat-content-section h2,.compat-related h2{color:var(--ci);font-size:clamp(1.65rem,3vw,2.25rem);margin:.4rem 0 1.25rem}.compat-content-section p,.compat-content-section li{color:var(--cm);line-height:1.78}.compat-steps{display:grid;gap:.85rem;padding-left:1.4rem}.compat-example,.compat-warning{background:var(--cb);border:1px solid var(--ce);border-radius:14px;margin-top:1.5rem;padding:1.25rem}.compat-example h3{color:var(--ci);margin-top:0}.compat-dimension-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.compat-dimension-grid article{background:#fff;border:1px solid var(--ce);border-radius:14px;padding:1.25rem}.compat-dimension-grid i{color:var(--cr);font-size:1.4rem}.compat-dimension-grid h3{color:var(--ci);margin:.7rem 0 .25rem}.compat-score-table-wrap{margin-top:1.6rem;overflow-x:auto}.compat-score-table{background:#fff;border-collapse:collapse;min-width:680px;width:100%}.compat-score-table caption{color:var(--ci);font-weight:700;padding:.7rem;text-align:left}.compat-score-table th,.compat-score-table td{border:1px solid var(--ce);padding:.8rem;text-align:left;vertical-align:top}.compat-score-table th{background:#f8f3f7;color:var(--ci)}.compat-faq{display:grid;gap:.75rem}.compat-faq details{background:#fff;border:1px solid var(--ce);border-radius:12px;padding:1rem 1.1rem}.compat-faq summary{color:var(--ci);cursor:pointer;font-weight:700}.compat-faq a{color:var(--cp)}.compat-related{padding:3.5rem 0 4.5rem}.compat-related-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}.compat-related-grid a{align-items:flex-start;background:#fff;border:1px solid var(--ce);border-radius:14px;color:var(--ci);display:flex;gap:.8rem;padding:1.1rem;text-decoration:none}.compat-related-grid a:hover{border-color:var(--cr);transform:translateY(-2px)}.compat-related-grid i{color:var(--cr);font-size:1.35rem;margin-top:.1rem}.compat-related-grid small{color:var(--cm);display:block;line-height:1.45;margin-top:.3rem}
@media(max-width:850px){.compat-tool-layout{grid-template-columns:1fr}.compat-side-note{order:2}.compat-related-grid{grid-template-columns:1fr}}@media(max-width:620px){.compat-hero__inner{padding-top:2.4rem;padding-bottom:2.8rem}.compat-hero p{font-size:1rem}.compat-tool-card__head{display:block}.compat-private{display:inline-block;margin-top:.8rem}.compat-state,.compat-tool-card__head{padding:1.2rem}.compat-dimension-grid{grid-template-columns:1fr}.compat-actions{align-items:stretch;flex-direction:column}.compat-primary-button,.compat-secondary-button{width:100%}}