/* Моретестов · light atlas, editorial cards, quiet quiz. */
:root {
  color-scheme: light;
  --paper: #f7f9f5;
  --white: #fff;
  --ink: #142c49;
  --muted: #496276;
  --sea: #00677b;
  --sea-deep: #004f64;
  --aqua: #e1f4ef;
  --aqua-line: #a8d8d0;
  --line: #d5e2e2;
  --coral: #fb795f;
  --focus: #076985;
  --good: #20634f;
  --good-bg: #e6f6ee;
  --bad: #923a36;
  --bad-bg: #fff0eb;
  --measure: 68ch;
  --container: 1200px;
  --gutter: clamp(1rem, 3.6vw, 2.75rem);
  --block: clamp(3rem, 6.7vw, 6.25rem);
  --radius: 1.125rem;
  --shadow: 0 2px 3px rgb(20 44 73 / 3%), 0 16px 34px -26px rgb(20 44 73 / 34%);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden]:not([hidden="until-found"]) { display: none !important; }

body {
  display: flex;
  min-block-size: 100vh;
  flex-direction: column;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 var(--font);
  -webkit-text-size-adjust: 100%;
}

main { flex: 1; min-inline-size: 0; }

:where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }

:where(h1, h2, h3, h4) {
  font-weight: 750;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

:where(p, li, a, button, legend) { overflow-wrap: anywhere; }

:where(img, svg) { display: block; max-inline-size: 100%; }
img { block-size: auto; }

a {
  color: var(--sea);
  text-decoration-thickness: .075em;
  text-underline-offset: .22em;
}

a:hover { color: var(--sea-deep); }
:where(button, input, select, textarea) { color: inherit; font: inherit; }
:where(button, input[type="radio"], input[type="checkbox"]) { accent-color: var(--sea); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

::selection { background: #8ee9d8; color: var(--ink); }

.container {
  inline-size: min(calc(100% - 2 * var(--gutter)), var(--container));
  margin-inline: auto;
}

:where(.skip-link, .skip-to-content) {
  position: absolute;
  z-index: 10;
  inset: .75rem auto auto var(--gutter);
  display: grid;
  min-block-size: 44px;
  align-items: center;
  padding: .5rem 1rem;
  transform: translateY(-180%);
  border-radius: .5rem;
  background: var(--ink);
  color: var(--white);
}

:where(.skip-link, .skip-to-content):focus {
  transform: none;
  color: var(--white);
  outline-color: var(--sea);
}

.site-header {
  background: var(--white);
  border-block-end: 1px solid var(--line);
}

.header-inner {
  display: grid;
  min-block-size: 4.75rem;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: .5rem clamp(1.1rem, 3vw, 3rem);
  padding-block: .625rem;
}

.brand {
  display: inline-flex;
  min-block-size: 44px;
  min-inline-size: 0;
  align-items: center;
  justify-self: start;
  gap: .625rem;
  color: var(--ink);
  font-size: clamp(1.13rem, 2.4vw, 1.42rem);
  font-weight: 820;
  letter-spacing: -.055em;
  line-height: 1.05;
  text-decoration: none;
}

.brand:hover { color: var(--sea); }

.brand-mark {
  display: inline-grid;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .58rem .58rem .58rem .19rem;
  background: var(--sea);
  color: #f3fffc;
  font-size: 1.23rem;
  font-weight: 650;
  letter-spacing: 0;
}

.brand-mark > svg { inline-size: 1.45rem; block-size: 1.45rem; }

.site-nav, .footer-nav {
  display: flex;
  min-inline-size: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: .125rem clamp(.75rem, 2vw, 1.75rem);
}

:where(.site-nav, .footer-nav) :where(ul, ol) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: inherit;
  padding: 0;
  list-style: none;
}

.site-nav { justify-content: center; }

.site-nav a, .footer-nav a {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  color: inherit;
  font-size: .88rem;
  font-weight: 660;
  line-height: 1.2;
  text-decoration: none;
}

.site-nav a:is(:hover, [aria-current="page"]),
.footer-nav a:is(:hover, [aria-current="page"]) { text-decoration: underline; }

.site-nav a:is(:hover, [aria-current="page"]) { color: var(--sea); }

.button, .header-action {
  display: inline-flex;
  min-block-size: 3rem;
  max-inline-size: 100%;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .6875rem 1.125rem;
  border: 1px solid transparent;
  border-radius: .7rem;
  font-size: .94rem;
  font-weight: 740;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  cursor: pointer;
}

.button-primary {
  background: var(--sea);
  color: var(--white);
}

.button-primary:not(:disabled, [aria-disabled="true"]):hover {
  background: var(--sea-deep);
  color: var(--white);
}

.button-secondary, .header-action:not(.button-primary) {
  border-color: #9cbfbe;
  background: var(--white);
  color: var(--sea-deep);
}

.button-secondary:not(:disabled, [aria-disabled="true"]):hover,
.header-action:not(.button-primary):hover { border-color: var(--sea); background: #effaf7; }

.header-action { min-block-size: 44px; justify-self: end; }

.button:is(:disabled, [aria-disabled="true"]) {
  border-color: var(--line);
  background: #edf1f0;
  color: #536872;
  cursor: default;
}

.hero { padding-block-start: clamp(1.15rem, 3vw, 2.5rem); }

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3.5vw, 3.5rem);
  min-block-size: 29rem;
  padding: clamp(1.5rem, 3.7vw, 3.4rem);
  border: 1px solid var(--aqua-line);
  border-radius: clamp(1.25rem, 3vw, 2.2rem);
  background: var(--aqua);
  isolation: isolate;
}

.hero-copy { position: relative; z-index: 1; min-inline-size: 0; }

.eyebrow, .section-kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--sea-deep);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .115em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before, .section-kicker::before {
  inline-size: .54rem;
  block-size: .54rem;
  flex: 0 0 auto;
  border: 1px solid #a63d32;
  background: var(--coral);
  content: "";
}

.eyebrow::before { border-radius: 50%; }
.section-kicker::before { border-radius: .095rem; transform: rotate(45deg) scale(.78); }

.hero h1 {
  max-inline-size: 15ch;
  margin-block: .85rem 1rem;
  font-size: clamp(2.65rem, 5.15vw, 4.85rem);
  letter-spacing: -.052em;
  line-height: 1.01;
  text-wrap: pretty;
}

.hero h1 :where(em, span, strong) { color: var(--sea); font-style: normal; }

.hero-description {
  max-inline-size: 46ch;
  color: #38576a;
  font-size: clamp(1rem, 1.75vw, 1.2rem);
  line-height: 1.56;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-block-start: 1.45rem;
}

.hero-actions .button { min-block-size: 3.2rem; padding-inline: 1.25rem; }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .85rem;
  margin-block-start: 1.3rem;
  padding: 0;
  color: #405e70;
  font-size: .81rem;
  font-weight: 630;
  list-style: none;
}

.hero-facts > :where(li, span) {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.hero-facts > :where(li, span):not(:has(svg))::before {
  inline-size: .4rem;
  block-size: .4rem;
  flex: 0 0 auto;
  align-self: center;
  border-radius: 50%;
  background: var(--sea);
  content: "";
}

.hero-facts svg {
  inline-size: .95rem;
  block-size: .95rem;
  flex: 0 0 auto;
  color: var(--sea);
}

.hero-art {
  position: relative;
  min-inline-size: 0;
  min-block-size: 15rem;
  align-self: stretch;
  display: grid;
  place-items: center;
  background: center / contain no-repeat url("./hero.svg");
}

.hero-art:has(img) { background: none; }
.hero-art > :where(img, svg) { inline-size: 100%; max-inline-size: 35rem; object-fit: contain; }
.hero-art > img { aspect-ratio: 13 / 12; }

.section { padding-block: var(--block); }
.section + .section { padding-block-start: 0; }
.hero + .section { padding-block-start: clamp(2.85rem, 5.2vw, 4.75rem); }
.page-catalog main > .section:first-of-type,
.page-section main > .section:has(> .container > .seo-copy) {
  padding-block-start: clamp(2rem, 4.15vw, 3.75rem);
}
.page-section main > .section:has(> .container > .seo-copy) { padding-block-end: clamp(2.25rem, 4.4vw, 4rem); }

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: .55rem 1.5rem;
  margin-block-end: clamp(1.1rem, 2.8vw, 1.8rem);
}

.section-kicker { margin-block-end: .5rem; }
.section-heading > .section-kicker { flex-basis: 100%; margin: 0; }

.section-title {
  font-size: clamp(1.95rem, 4vw, 3.55rem);
  letter-spacing: -.049em;
  text-wrap: pretty;
}

.section-link {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  gap: .4rem;
  color: var(--sea);
  font-size: .91rem;
  font-weight: 750;
}

.section-grid, .test-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(.75rem, 1.9vw, 1.35rem);
}

.section-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.section-card, .test-card {
  --tone: #075d62;
  --tint: #e3f5ef;
  --tone-line: #a7d9cc;
  position: relative;
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  align-items: start;
  gap: .66rem;
  isolation: isolate;
  padding: clamp(1.05rem, 2.25vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.section-card {
  border-color: var(--tone-line);
  background: var(--tint);
}

.test-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
}

.test-card > .chip { align-self: center; justify-self: start; }
.test-card > :where(.card-title, .card-description, .card-meta) { grid-column: 1 / -1; }

.section-card::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto auto;
  inline-size: 6.5rem;
  block-size: 5.2rem;
  border-start-end-radius: calc(var(--radius) - 1px);
  background:
    radial-gradient(circle at 100% 0, transparent 32%, var(--tone-line) 32.4% 33.2%, transparent 33.6% 47%, var(--tone-line) 47.4% 48.2%, transparent 48.6% 62%, var(--tone-line) 62.4% 63.2%, transparent 63.6%);
  pointer-events: none;
  content: "";
}

.theme-mint   { --tone: #075d62; --tint: #e3f5ef; --tone-line: #a7d9cc; }
.theme-violet { --tone: #4e3a7e; --tint: #f0eafa; --tone-line: #d1c2e9; }
.theme-amber  { --tone: #744a18; --tint: #fff1d6; --tone-line: #e7cc95; }
.theme-blue   { --tone: #25558b; --tint: #e5f1fc; --tone-line: #b1cfe7; }
.theme-pink   { --tone: #8b405c; --tint: #faeaf0; --tone-line: #e6c0d0; }

:is(.section-card, .test-card):is(:hover, :focus-within) {
  border-color: var(--tone);
  box-shadow: 0 10px 20px -17px var(--tone);
  color: var(--ink);
}

.card-icon {
  display: inline-grid;
  inline-size: 3rem;
  block-size: 3rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--tone-line, var(--aqua-line));
  border-radius: .7rem .7rem .7rem .2rem;
  background: var(--tint, var(--aqua));
  color: var(--tone, var(--sea));
  font-size: 1.4rem;
  font-weight: 740;
  line-height: 1;
}

.section-card .card-icon { background: rgb(255 255 255 / 64%); }
.card-icon :where(svg, img) { inline-size: 1.45rem; block-size: 1.45rem; }

.card-title {
  font-size: clamp(1.15rem, 2.05vw, 1.62rem);
  font-weight: 760;
  letter-spacing: -.036em;
  text-wrap: pretty;
}

.card-title a { color: inherit; text-decoration: none; }
:is(.section-card, .test-card):is(:hover, :focus-within) .card-title a { text-decoration: underline; }

.card-description { color: var(--muted); font-size: .93rem; line-height: 1.55; }

.card-meta {
  display: flex;
  min-inline-size: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: .22rem .55rem;
  margin-block-start: auto;
  padding-block-start: .5rem;
  color: var(--tone, var(--muted));
  font-size: .79rem;
  font-weight: 690;
  line-height: 1.35;
}

:is(.section-card, .test-card) > .card-meta {
  min-block-size: 2.15rem;
  padding-block-start: 0;
  padding-inline-end: 2.65rem;
}

.card-meta > span + span::before {
  margin-inline-end: .55rem;
  content: "·" / "";
}

.card-arrow {
  display: inline-grid;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  flex: 0 0 auto;
  place-items: center;
  margin-block-start: .2rem;
  border: 1px solid var(--tone-line, var(--aqua-line));
  border-radius: 50%;
  background: var(--white);
  color: var(--tone, var(--sea));
  font-size: 1.05rem;
  line-height: 1;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.card-arrow svg { inline-size: .95rem; block-size: .95rem; }

:is(.section-card, .test-card) > .card-arrow {
  position: absolute;
  inset: auto clamp(1.05rem, 2.25vw, 1.6rem) clamp(1.05rem, 2.25vw, 1.6rem) auto;
  margin: 0;
}

.section-link .card-arrow { margin: 0; }

:is(.section-card, .test-card):is(:hover, :focus-within) .card-arrow {
  border-color: var(--tone);
  background: var(--tone);
  color: var(--white);
}

.chip {
  display: inline-flex;
  max-inline-size: 100%;
  align-items: center;
  gap: .3rem;
  padding: .31rem .64rem;
  border: 1px solid var(--tone-line, var(--line));
  border-radius: 99rem;
  background: var(--tint, #eff5f3);
  color: var(--tone, #335c6d);
  font-size: .76rem;
  font-weight: 680;
  line-height: 1.25;
}

a.chip { min-block-size: 44px; text-decoration: none; }
a.chip:hover { text-decoration: underline; }

.breadcrumbs {
  margin-block: .55rem clamp(.9rem, 2.6vw, 1.65rem);
  color: var(--muted);
  font-size: .83rem;
}

.breadcrumbs :where(ol, ul), ol.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .45rem;
  padding: 0;
  list-style: none;
}

.breadcrumbs li { display: inline-flex; min-inline-size: 0; align-items: center; gap: .45rem; }
.breadcrumbs li + li::before { color: #617887; content: "›"; }
.breadcrumbs a { display: inline-flex; min-block-size: 44px; align-items: center; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 650; }

.page-hero {
  padding-block: clamp(1.3rem, 3.8vw, 3.5rem) clamp(2rem, 4.5vw, 4.15rem);
  border-block-end: 1px solid var(--aqua-line);
  background: var(--aqua);
}

.page-hero:has(.breadcrumbs) { padding-block-start: .65rem; }

.page-hero h1 {
  max-inline-size: 24ch;
  margin-block: .55rem .8rem;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  letter-spacing: -.05em;
  line-height: 1.02;
  text-wrap: balance;
}

.page-test .page-hero { padding-block-end: clamp(1.15rem, 2.5vw, 2.1rem); }
.page-test .page-hero h1 { max-inline-size: 24ch; font-size: clamp(2rem, 4.5vw, 4rem); }

.page-hero p:not(.eyebrow, .section-kicker) {
  max-inline-size: 62ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.55vw, 1.16rem);
  text-wrap: pretty;
}

.page-hero p + p { margin-block-start: .65rem; }

:where(.test-meta, .page-meta, .test-tags, .quiz-meta) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-block-start: .9rem;
  padding: 0;
  list-style: none;
}

.seo-copy {
  max-inline-size: var(--measure);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.container.seo-copy { max-inline-size: none; }
.seo-copy :where(h2, h3) { max-inline-size: 28ch; color: var(--ink); letter-spacing: -.045em; }
.seo-copy h2 { font-size: clamp(1.55rem, 3.3vw, 2.5rem); }
.seo-copy h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.seo-copy :where(p, ul, ol) { max-inline-size: var(--measure); }
.seo-copy > * + * { margin-block-start: .85rem; }
.seo-copy :where(ul, ol) { padding-inline-start: 1.3rem; }
.seo-copy li + li { margin-block-start: .4rem; }

.search-form {
  display: flex;
  max-inline-size: 49rem;
  flex-wrap: wrap;
  align-items: end;
  gap: .55rem;
  margin-block: 1rem 1.1rem;
}

.search-form > label {
  flex-basis: 100%;
  color: var(--ink);
  font-size: .91rem;
  font-weight: 740;
}

.search-input {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 3.1rem;
  flex: 1 1 14rem;
  padding: .69rem .95rem;
  border: 1px solid #829ea7;
  border-radius: .7rem;
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.25;
}

.search-input::placeholder { color: #526e7c; opacity: 1; }
.search-input:hover { border-color: var(--sea); }
.search-form .button { min-block-size: 3.1rem; }
.search-form + [role="status"], [data-search-status] { margin-block-end: 1rem; color: var(--muted); }
[data-search-status]:empty { margin-block-end: 0; }

.empty-state {
  padding: clamp(1.15rem, 3vw, 2rem);
  border: 1px dashed #90afae;
  border-radius: var(--radius);
  background: #edf7f3;
  color: var(--muted);
}

.empty-state h2, .empty-state h3 { margin-block-end: .5rem; color: var(--ink); }
.empty-state .button { margin-block-start: .8rem; }

.test-layout {
  display: grid;
  align-items: start;
  gap: clamp(1.25rem, 4vw, 3.25rem);
  padding-block: clamp(1.1rem, 2.8vw, 2.5rem) clamp(1.65rem, 4.25vw, 3.5rem);
}

.test-layout > * { min-inline-size: 0; }
.test-layout + .related-tests { padding-block-start: .5rem; }
.test-context .seo-copy { margin-block-start: 1rem; }

.quiz-shell {
  min-inline-size: 0;
  padding: clamp(1.1rem, 3.8vw, 2.55rem);
  border: 1px solid var(--line);
  border-radius: clamp(1rem, 2.4vw, 1.65rem);
  background: var(--white);
  box-shadow: var(--shadow);
}

:where(.quiz-shell, .quiz-intro, .quiz-stage, .quiz-result) > :where(h2, h3) {
  font-size: clamp(1.45rem, 3vw, 2.45rem);
  letter-spacing: -.043em;
}

.quiz-intro > :where(p, ul, ol) { max-inline-size: var(--measure); color: var(--muted); }
.quiz-intro > * + * { margin-block-start: .95rem; }

.quiz-last-result {
  margin-block-start: .85rem;
  padding: .6rem .8rem;
  border-inline-start: .2rem solid var(--sea);
  border-radius: 0 .4rem .4rem 0;
  background: var(--aqua);
  font-weight: 690;
}

.quiz-progress {
  display: grid;
  gap: .55rem;
  margin-block-end: clamp(1rem, 3vw, 1.75rem);
}

.quiz-progress-text {
  color: var(--sea-deep);
  font-size: .79rem;
  font-weight: 780;
  letter-spacing: .045em;
  line-height: 1.4;
}

.quiz-progress-bar {
  display: block;
  inline-size: 100%;
  block-size: .5rem;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 99rem;
  background: #e2edeb;
  color: var(--sea);
  accent-color: var(--sea);
}

.quiz-progress-bar::-webkit-progress-bar { border-radius: 99rem; background: #e2edeb; }
.quiz-progress-bar::-webkit-progress-value { border-radius: 99rem; background: var(--sea); }
.quiz-progress-bar::-moz-progress-bar { border-radius: 99rem; background: var(--sea); }
.quiz-progress-bar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--sea); }

.quiz-question {
  max-inline-size: 34ch;
  margin-block-end: clamp(1rem, 3vw, 1.55rem);
  font-size: clamp(1.47rem, 3.25vw, 2.48rem);
  font-weight: 760;
  letter-spacing: -.045em;
  line-height: 1.14;
  text-wrap: pretty;
}

:is(.quiz-stage .quiz-question, .quiz-result h2)[tabindex="-1"] {
  position: relative;
  scroll-margin-block-start: 1.25rem;
}

:is(.quiz-stage .quiz-question, .quiz-result h2)[tabindex="-1"]:focus-visible { outline: none; }

:is(.quiz-stage .quiz-question, .quiz-result h2)[tabindex="-1"]:focus-visible::before {
  position: absolute;
  inset: 0 auto 0 -.62rem;
  inline-size: 3px;
  border-radius: 1rem;
  background: var(--focus);
  content: "";
}

.quiz-media {
  max-inline-size: 42rem;
  margin-block: .75rem 1rem;
}

.quiz-media > :is(img, video) {
  display: block;
  max-inline-size: 100%;
  max-block-size: min(65vh, 32rem);
  border-radius: .65rem;
  object-fit: contain;
}

.quiz-media > video {
  inline-size: 100%;
  background: var(--ink);
}

.quiz-media > :is(figcaption, .quiz-media-link, .quiz-media-description) {
  margin-block-start: .45rem;
  font-size: .875rem;
}

.quiz-media > figcaption { color: var(--muted); }
.quiz-media-link { display: inline-flex; min-block-size: 44px; align-items: center; }

.quiz-media-description > summary {
  min-block-size: 44px;
  padding-block: .65rem;
  color: var(--sea);
  font-weight: 720;
  cursor: pointer;
}

.quiz-media-description > p { color: var(--muted); }

.quiz-options {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.quiz-option {
  display: flex;
  inline-size: 100%;
  min-block-size: 3.18rem;
  min-inline-size: 0;
  align-items: center;
  gap: .75rem;
  padding: .68rem .87rem;
  border: 1px solid #a0b7bb;
  border-radius: .65rem;
  background: var(--white);
  color: var(--ink);
  font-size: clamp(.95rem, 1.6vw, 1.07rem);
  font-weight: 570;
  line-height: 1.35;
  text-align: start;
  transition: background-color 150ms ease, border-color 150ms ease;
  cursor: pointer;
}

.quiz-option:not(:has(input))::before {
  inline-size: 1.2rem;
  block-size: 1.2rem;
  flex: 0 0 auto;
  border: 2px solid #698590;
  border-radius: 50%;
  background: var(--white);
  content: "";
}

.quiz-option:not(:disabled):hover { border-color: var(--sea); background: #f0f9f7; }
.quiz-option :where(input[type="radio"], input[type="checkbox"]) { margin: 0; flex: 0 0 auto; }
.quiz-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

.quiz-option:is([aria-checked="true"], [aria-pressed="true"], .is-selected, :has(input:checked)) {
  border-color: var(--sea);
  background: #e2f5ef;
  box-shadow: inset 0 0 0 1px var(--sea);
  font-weight: 710;
}

.quiz-option:not(:has(input)):is([aria-checked="true"], [aria-pressed="true"], .is-selected)::before {
  border-color: var(--sea);
  background: var(--sea);
  box-shadow: inset 0 0 0 3px var(--white);
}

.quiz-option:is(:disabled, [aria-disabled="true"]) { cursor: default; }
.quiz-option:is(.is-correct, [data-state="correct"]) { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.quiz-option:is(.is-incorrect, [data-state="incorrect"]) { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }

.quiz-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}

:is(.quiz-stage, .quiz-result) .quiz-controls { margin-block-start: clamp(1.15rem, 3vw, 1.75rem); }

.quiz-result > h2 { margin-block-end: .9rem; }
.quiz-result { scroll-margin-block-start: 1rem; }

.quiz-score {
  position: relative;
  display: flex;
  min-block-size: 6.5rem;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .6rem;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(.85rem, 3.1vw, 1.65rem);
  border-radius: .85rem;
  background: var(--sea-deep);
  color: #edfdfb;
  font-size: clamp(.95rem, 2vw, 1.17rem);
  font-weight: 670;
}

.quiz-score::after {
  position: absolute;
  z-index: -1;
  inset: -2rem -1rem auto auto;
  inline-size: 13rem;
  block-size: 13rem;
  border: 1px solid rgb(150 235 222 / 32%);
  border-radius: 50%;
  box-shadow: 0 0 0 .8rem rgb(150 235 222 / 16%), 0 0 0 1.6rem rgb(150 235 222 / 10%);
  pointer-events: none;
  content: "";
}

.quiz-score strong {
  color: #b3fff0;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  line-height: 1;
}

.quiz-review { margin-block-start: clamp(1rem, 3vw, 1.6rem); }
.quiz-review h3 { margin-block-end: .75rem; font-size: clamp(1.18rem, 2.25vw, 1.55rem); letter-spacing: -.025em; }

.quiz-review-list {
  display: grid;
  gap: .75rem;
  padding-inline-start: 1.6rem;
}

.quiz-review-item {
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: #f9fbfa;
}

.quiz-review-item::marker { color: var(--sea); font-weight: 780; }
.quiz-review-item h4 { margin-block-end: .5rem; font-size: 1rem; line-height: 1.35; }
.quiz-review-item p { color: var(--muted); }
.quiz-review-item p + p { margin-block-start: .35rem; }

.quiz-explanation {
  padding: .55rem .7rem;
  border-inline-start: .19rem solid var(--good);
  border-radius: 0 .35rem .35rem 0;
  background: var(--good-bg);
  color: var(--good);
}

.quiz-review-item .quiz-explanation { margin-block-start: .6rem; color: var(--good); }
.related-tests > h2 { margin-block-end: .9rem; font-size: clamp(1.5rem, 3.3vw, 2.45rem); letter-spacing: -.04em; }

[data-quiz-static] :where(ul, ol) { padding-inline-start: 1.35rem; }
[data-quiz-static] :where(h2, h3, p, details, li) + :where(p, ul, ol, details, li) { margin-block-start: .6rem; }
[data-quiz-static] summary { min-block-size: 44px; padding-block: .6rem; color: var(--sea); font-weight: 720; cursor: pointer; }
[data-quiz-static] .quiz-static-list > li + li { margin-block-start: 1.45rem; }
[data-quiz-static] .quiz-options { display: block; margin-block: .6rem; list-style: circle; }
[data-quiz-static] .quiz-question { margin-block-end: .65rem; font-size: clamp(1.1rem, 2.5vw, 1.5rem); }

.site-footer {
  padding-block: clamp(1.6rem, 4vw, 3.15rem);
  background: var(--ink);
  color: #dcebef;
  --focus: #8fe7dc;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}

.site-footer :where(a, .brand) { color: #f5fafa; }
.site-footer a:hover { color: #a2f1e3; }
.site-footer .brand-mark { background: #92e3d5; color: var(--ink); }
.site-footer p { max-inline-size: 56ch; color: #c1d6de; font-size: .88rem; }
.site-footer p + p { margin-block-start: .4rem; }

@media (min-width: 57rem) {
  .test-layout { grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.1fr); }
  .test-layout > .quiz-shell { grid-area: 1 / 2; }
  .test-context { grid-area: 1 / 1; }
}

@media (max-width: 62.5rem) {
  .section-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
  .header-inner { column-gap: .9rem; }
  .site-nav { gap: 0 .85rem; }
  .hero-inner { min-block-size: 25rem; }
  .hero h1 { font-size: clamp(2.55rem, 6.7vw, 4.25rem); }
  .section-grid, .test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 42rem) {
  .header-inner { min-block-size: 4rem; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem 1rem; }
  .header-action { display: none; }

  .site-nav {
    justify-content: end;
    column-gap: clamp(.65rem, 3vw, 1.05rem);
  }

  .site-nav a { font-size: .83rem; }
  .hero-inner { grid-template-columns: 1fr; min-block-size: 0; gap: .65rem; }
  .hero h1 { max-inline-size: 16ch; font-size: clamp(2.4rem, 8vw, 3.65rem); }
  .hero-art { min-block-size: 0; inline-size: min(100%, 21rem); aspect-ratio: 13 / 12; justify-self: center; }
}

@media (max-width: 34rem) {
  .section-grid, .test-grid,
  .section-grid:has(> :nth-child(2):last-child),
  .section-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }

  .hero-inner { padding: 1.18rem; }
  .hero-actions .button { padding-inline: .8rem; }
  .hero-art { inline-size: min(100%, 15.5rem); }
}

@media (max-width: 31rem) {
  .header-inner { grid-template-columns: minmax(0, 1fr); }
  .site-nav { justify-content: start; border-block-start: 1px solid var(--line); }
}

@media (max-width: 24rem) {
  .brand { gap: .4rem; }
  .brand-mark { inline-size: 1.95rem; block-size: 1.95rem; }
  .hero-actions > .button, .quiz-controls > .button { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .brand-mark, .card-icon, .quiz-score, .quiz-option { border: 1px solid ButtonText; }
  :is(.quiz-stage .quiz-question, .quiz-result h2)[tabindex="-1"]:focus-visible::before {
    forced-color-adjust: none;
    background: Highlight;
  }
  .quiz-option:not(:has(input)):is([aria-checked="true"], [aria-pressed="true"], .is-selected)::before {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    box-shadow: inset 0 0 0 3px Canvas;
  }
}

.quiz-correct-review { margin-top: 1rem; }
.quiz-correct-review summary {
  min-height: 44px;
  padding: .65rem .8rem;
  border: 1px solid #a6c7c6;
  border-radius: .7rem;
  color: #175c70;
  font-weight: 700;
  cursor: pointer;
}
.quiz-correct-review[open] > .quiz-review-list { margin-top: .8rem; }

/* Discussion on test pages */
.test-layout + .community,
.test-layout + .community[hidden] + .related-tests { padding-block-start: .5rem; }

.community {
  --community-space: clamp(1rem, 3.15vw, 2.35rem);
  padding-block-end: clamp(2.3rem, 5.1vw, 4.5rem);
}

.community-panel {
  min-inline-size: 0;
  border: 1px solid var(--line);
  border-radius: clamp(1rem, 2.4vw, 1.65rem);
  background: var(--white);
  box-shadow: var(--shadow);
}

.community-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  padding: clamp(1rem, 2.5vw, 1.55rem) var(--community-space);
  border-block-end: 1px solid var(--aqua-line);
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background: var(--aqua);
}

.community-title {
  font-size: clamp(1.38rem, 3.2vw, 2.5rem);
  letter-spacing: -.044em;
}

.community-like {
  min-inline-size: 0;
  gap: .5rem;
  padding-inline: .85rem .65rem;
  border-color: #7ba9aa;
  white-space: normal;
}

.community-like svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.community-like-count {
  min-inline-size: 1.9rem;
  padding: .23rem .4rem;
  border-radius: .4rem;
  background: #ebf5f2;
  color: var(--sea-deep);
  font-size: .83rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.community-like.button[aria-pressed="true"] {
  border-color: var(--sea);
  background: var(--sea);
  color: var(--white);
}

.community-like[aria-pressed="true"] svg { fill: currentColor; }
.community-like[aria-pressed="true"]:not([aria-disabled="true"]):hover { background: var(--sea-deep); }
.community :is(button, textarea)[aria-busy="true"] { cursor: wait; }

.community-load {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem 1rem;
}

.community-load:has(.community-notice:not(:empty), button:not([hidden])) {
  padding: 1rem var(--community-space);
}

.community-content {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(1.15rem, 3.2vw, 2.75rem);
  padding: var(--community-space);
}

.community-form {
  display: grid;
  min-inline-size: 0;
  gap: .65rem;
  padding: clamp(.9rem, 2.3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f3f8f6;
}

.community-form-title, .community-comments-title {
  color: var(--ink);
  font-size: clamp(1.12rem, 2.15vw, 1.48rem);
  font-weight: 750;
  letter-spacing: -.024em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.community-hint, .community-empty {
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.52;
}

.community-textarea {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 7rem;
  padding: .7rem .8rem;
  border: 1px solid #829ea7;
  border-radius: .65rem;
  background: var(--white);
  color: var(--ink);
  line-height: 1.45;
  resize: vertical;
}

.community-textarea:hover { border-color: var(--sea); }
.community-textarea[aria-invalid="true"] { border-color: var(--bad); }
.community-textarea[readonly] { background: #f5f8f7; }

.community-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.community-counter {
  color: var(--muted);
  font-size: .81rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.community-counter-over { color: var(--bad); }

.community-notice {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.4;
}

.community-notice:empty {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.community-notice-error:not(:empty) {
  padding: .55rem .7rem;
  border-inline-start: .18rem solid var(--bad);
  border-radius: .2rem .45rem .45rem .2rem;
  background: var(--bad-bg);
  color: var(--bad);
}

.community-form-status:not(:empty) {
  padding: .55rem .7rem;
  border-inline-start: .18rem solid var(--sea);
  border-radius: .2rem .45rem .45rem .2rem;
  background: var(--aqua);
  color: var(--sea-deep);
}

.community-comments { min-inline-size: 0; }
.community-comments-title { margin-block-end: .75rem; }

.community-comment-list {
  display: grid;
  gap: .65rem;
  padding: 0;
  list-style: none;
}

.community-comment {
  min-inline-size: 0;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: #f9fbfa;
}

.community-comment-text { overflow-wrap: anywhere; white-space: pre-wrap; }

.community-comment-date {
  display: block;
  margin-block-start: .45rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 620;
}

.community-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 44rem) {
  .community-content { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
  .community-like.button[aria-pressed="true"] { border-color: Highlight; }
  .community-textarea[aria-invalid="true"] { border-style: dashed; }
}

/* Sharing a test or its score */
.shared-score { margin-block-start: .9rem; }

.shared-score {
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: .5rem .75rem;
  border-inline-start: .2rem solid var(--sea);
  border-radius: 0 .45rem .45rem 0;
  background: var(--white);
  color: var(--sea-deep);
  font-weight: 720;
}

.share-widget { min-inline-size: 0; max-inline-size: 100%; }
.quiz-result .quiz-controls { align-items: start; }
.quiz-result [data-share-result] { flex: 1 1 14rem; }

.share-toggle {
  list-style: none;
  text-align: start;
}

.share-toggle::-webkit-details-marker { display: none; }
.share-toggle::marker { content: ""; }
.share-toggle svg { inline-size: 1.1rem; block-size: 1.1rem; flex: 0 0 auto; }

.share-toggle::after {
  inline-size: .43rem;
  block-size: .43rem;
  flex: 0 0 auto;
  margin-inline-start: .15rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-.1rem) rotate(45deg);
  content: "";
}

.share-widget[open] > .share-toggle::after { transform: translateY(.1rem) rotate(225deg); }

.share-panel {
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-block-start: .55rem;
  padding: .7rem;
  border: 1px solid var(--aqua-line);
  border-radius: .8rem;
  background: #f3f9f7;
}

.share-links { display: flex; flex-wrap: wrap; gap: .45rem; }

.share-links .button {
  min-block-size: 44px;
  padding: .5rem .7rem;
  font-size: .86rem;
}

.share-status {
  color: var(--sea-deep);
  font-size: .88rem;
  overflow-wrap: anywhere;
}

.share-status:not(:empty) { margin-block-start: .65rem; }

.share-copy-field {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  margin-block-start: .5rem;
  padding: .55rem .65rem;
  border: 1px solid #829ea7;
  border-radius: .5rem;
  background: var(--white);
  color: var(--ink);
  resize: vertical;
}