/* Only unsupported layouts get a fallback; current browser styling is unchanged. */
@supports not (width: min(440px, 100%)) {
  .shell { width: calc(100% - 32px); max-width: 1120px; }
  .access-card { width: 100%; max-width: 440px; }
  .dialog { width: 100%; max-width: 440px; }
  .save-panel { width: 100%; max-width: 680px; }
  @media (max-width: 560px) { .shell { width: calc(100% - 20px); } }
}
@supports not (font-size: clamp(20px, 4vw, 40px)) {
  h1 { font-size: 44px; }
  .lead { font-size: 16px; }
  .how h2 { font-size: 30px; }
  .result-name { font-size: 34px; }
  .q-text { font-size: 22px; }
  .hero { padding: 40px 8px; }
  @media (max-width: 560px) { h1 { font-size: 36px; } .result-name { font-size: 28px; } }
}
@supports not (inset: 0) {
  .access-gate, .overlay, .save-modal { top: 0; right: 0; bottom: 0; left: 0; }
}
@supports not (display: grid) {
  .access-gate, .overlay, .save-modal { display: flex; align-items: center; justify-content: center; }
  .hero, .facts, .method, .gender-grid, .choices, .three, .dimension-grid,
  .profile-hero-grid, .archive-list, .review-list, .dim-tips, .foot { display: block; }
  .hero > *, .method > *, .gender-grid > *, .three > *, .archive-list > *,
  .review-list > *, .dim-tips > * { margin-bottom: 14px; }
  .panel li { display: flex; }
  .panel li > span { min-width: 32px; }
  .choice { display: flex; width: 100%; margin-bottom: 10px; }
  .choice > span:first-child { flex: 0 0 24px; margin-right: 14px; }
  .profile-hero-side { margin-top: 18px; }
  .dim-row { display: flex; align-items: center; }
  .dim-row > span:first-child { flex: 0 0 96px; }
  .dim-row .dim-bar { flex: 1; margin: 0 8px; }
  .dim-row b { flex: 0 0 36px; text-align: right; }
}