@layer components {
  .quiz {
    display: grid;
    gap: var(--space-6);
    overflow-wrap: anywhere;
  }

  .q2-grid {
    display: grid;
    gap: var(--space-6);
    align-items: start;
    overflow-wrap: anywhere;
  }

  :is(.quiz, .feedback) {
    .quiz-top {
      display: grid;
      gap: var(--space-3);
      justify-items: start;
    }

    .crumb {
      display: inline-flex;
      gap: var(--space-2);
      text-decoration: none;

      &:hover { color: var(--color-text); }
    }

    .quiz-eyebrow { margin-block-start: var(--space-3); }

    .quiz-title {
      margin: 0;
      font-size: var(--text-3xl);
      font-weight: 300;
      letter-spacing: -0.02em;
      line-height: var(--line-height-tight);
    }

    .q2-progress {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      inline-size: min(100%, var(--measure));
      margin-block-start: var(--space-2);
    }

    .line-meter {
      flex: 1;
      block-size: 2px;
      background: var(--color-border);

      span {
        display: block;
        block-size: 100%;
        inline-size: calc(var(--value) * 100%);
        background: var(--color-text);
      }
    }

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

    .glyph {
      flex: none;
      inline-size: 14px;
      block-size: 14px;
    }

    .cta {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
      min-block-size: 3rem;
      padding: 0 var(--space-5);
      border: 0;
      border-radius: var(--radius-sharp);
      background: var(--logo-gradient) var(--color-gradient-bottom);
      color: var(--color-on-gradient);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 500;
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      filter:
        drop-shadow(0 2px 3px color-mix(in oklch, var(--color-accent) 0%, transparent))
        drop-shadow(0 6px 14px color-mix(in oklch, var(--color-accent) 0%, transparent));
      transition: filter var(--duration-wipe) var(--ease-in-out);

      &::after {
        content: "";
        position: absolute;
        inset: -0.375rem;
        border: 1.5px solid var(--color-accent);
        pointer-events: none;
        mask:
          linear-gradient(#000 0 0) top left / var(--bracket) var(--bracket) no-repeat,
          linear-gradient(#000 0 0) top right / var(--bracket) var(--bracket) no-repeat,
          linear-gradient(#000 0 0) bottom left / var(--bracket) var(--bracket) no-repeat,
          linear-gradient(#000 0 0) bottom right / var(--bracket) var(--bracket) no-repeat;
        transition: scale var(--duration-wipe) var(--ease-in-out);
      }

      &:hover, &:focus-visible {
        filter:
          drop-shadow(0 2px 3px color-mix(in oklch, var(--color-accent) 10%, transparent))
          drop-shadow(0 6px 14px color-mix(in oklch, var(--color-accent) 16%, transparent));
      }

      @media (prefers-reduced-motion: no-preference) {
        &:hover::after, &:focus-visible::after { scale: 1.04 1.13; }
      }
    }

    .button-wipe {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: 3rem;
      padding-inline: var(--space-5);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      color: var(--color-text);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 500;
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      text-decoration: none;
      white-space: nowrap;
      transition: border-color var(--duration-wipe) var(--ease-in-out);

      &::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: -1;
        inline-size: calc(100% + var(--wipe-feather));
        background: linear-gradient(90deg, var(--color-wipe-fill) calc(100% - var(--wipe-feather)), transparent);
        transform: translateX(-100%);
        transition: transform var(--duration-wipe) var(--ease-in-out);
      }

      &:hover, &:focus-visible { border-color: var(--color-wipe-border); }

      &:hover::before, &:focus-visible::before { transform: translateX(0); }
    }

    :is(.card, .panel) {
      position: relative;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sharp);
      background: var(--color-panel);
      color: var(--color-text);
      box-shadow:
        0 1px 2px var(--color-panel-shadow-near),
        0 6px 18px var(--color-panel-shadow-far);
    }

    .has-rule::before {
      content: "";
      position: absolute;
      inset: -1px -1px auto;
      block-size: 2px;
      border-radius: var(--radius-sharp) var(--radius-sharp) 0 0;
      background: var(--logo-gradient-rule);
    }

    .q2-question {
      display: grid;
      gap: var(--space-5);
      min-inline-size: 0;

      form {
        display: grid;
        gap: var(--space-5);
        justify-items: start;
      }

      .choices { inline-size: 100%; }
    }

    .q2-question > .statements {
      margin-block: calc(var(--space-4) - var(--space-5)) calc(var(--space-2) + var(--space-3) - var(--space-5));
    }

    .stem {
      max-inline-size: var(--measure);
      font-size: var(--text-lg);
      line-height: 1.55;
    }

    legend.stem {
      padding: 0;
      margin-block-end: var(--space-5);

      &:has(+ .statements) { margin-block-end: var(--space-4); }
    }

    .choices {
      --choice-bg: var(--color-panel);
      display: grid;
      gap: var(--space-3);
      min-inline-size: 0;
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
    }

    .choice {
      position: relative;
      display: grid;
      grid-template-columns: 2rem minmax(0, 1fr);
      gap: var(--space-4);
      align-items: start;
      padding: var(--space-4);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      background: var(--choice-bg);
      transition:
        border-color var(--duration-fill) var(--ease-out),
        background-color var(--duration-fill) var(--ease-out),
        box-shadow var(--duration-fill) var(--ease-out);

      &.is-correct {
        border-color: var(--color-correct);
        background: color-mix(in oklch, var(--color-accent) 9%, var(--choice-bg));

        .choice-letter {
          border-color: transparent;
          background: var(--logo-gradient) var(--color-gradient-bottom);
          color: var(--color-on-gradient);
        }

        .choice-mark { color: var(--color-correct); }
      }

      &.is-incorrect {
        border-color: var(--color-incorrect);
        background: color-mix(in oklch, var(--color-incorrect) 8%, var(--choice-bg));

        .choice-letter { border-color: var(--color-incorrect); color: var(--color-incorrect); }

        .choice-mark { color: var(--color-incorrect); }
      }

      &.is-other {
        border-color: var(--color-border);
        color: var(--color-text-muted);

        .choice-letter { border-color: var(--color-border); color: var(--color-text-muted); }
      }
    }

    label.choice {
      cursor: pointer;

      &:hover { background: color-mix(in oklch, var(--color-text) 4%, var(--choice-bg)); }

      &:has(.choice-input:checked) {
        border-color: var(--color-text);
        box-shadow: inset 0 0 0 1px var(--color-text);

        .choice-letter { border-color: var(--color-text); background: var(--color-text); color: var(--choice-bg); }
      }

      &:has(.choice-input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 3px; }
    }

    .choice-input {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: 0;
      opacity: 0;
    }

    .choice-letter {
      display: grid;
      place-items: center;
      inline-size: 2rem;
      block-size: 2rem;
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-text-muted);
      transition: background-color var(--duration-fill) var(--ease-out), color var(--duration-fill) var(--ease-out);
    }

    .choice-text { max-inline-size: none; padding-block-start: 0.2rem; }

    .choice-body { display: grid; min-inline-size: 0; }

    .choice-mark {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: var(--space-3);
      translate: 0 -50%;
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      padding-inline: var(--space-2);
      background: var(--color-surface);
      line-height: 1.4;
      white-space: nowrap;
    }

    .verdict {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-lg);
      font-weight: 500;
      line-height: var(--line-height-tight);

      .glyph { inline-size: 1.125rem; block-size: 1.125rem; }

      &.is-correct { color: var(--color-correct); }

      &:is(.is-incorrect, .is-unanswered) { color: var(--color-incorrect); }
    }

    .explain-text {
      max-inline-size: var(--measure);
      line-height: var(--line-height-relaxed);
      color: var(--color-text-muted);
    }

    .q2-diagram { min-inline-size: 0; }

    .diagram {
      padding: var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sharp);
      background: var(--color-surface);

      :is(img, iframe) { inline-size: 100%; max-inline-size: 25rem; margin-inline: auto; }

      iframe { display: block; border: 0; }
    }

    .q2-panel {
      display: grid;
      gap: var(--space-5);
      padding: var(--space-6);

      .explain-text { font-size: var(--text-base); }

      .explain-text.is-right { color: var(--color-text); }

      &::after {
        content: "";
        position: absolute;
        inset: var(--space-2);
        border: 1px solid color-mix(in oklch, var(--color-accent) 35%, transparent);
        pointer-events: none;
        mask:
          linear-gradient(#000 0 0) top left / 0.625rem 0.625rem no-repeat,
          linear-gradient(#000 0 0) top right / 0.625rem 0.625rem no-repeat,
          linear-gradient(#000 0 0) bottom left / 0.625rem 0.625rem no-repeat,
          linear-gradient(#000 0 0) bottom right / 0.625rem 0.625rem no-repeat;
      }
    }

    .panel-head {
      display: flex;
      justify-content: space-between;
      gap: var(--space-3);
      max-inline-size: none;
      padding-block-end: var(--space-3);
      border-block-end: 1px dashed var(--color-border-strong);
    }

    .panel-head-title { color: var(--color-accent); }

    .explain {
      display: grid;
      gap: var(--space-3);

      h3 { font-weight: 400; }
    }

    .explain-right {
      padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
      border-inline-start: 2px solid var(--color-accent);
      background: color-mix(in oklch, var(--color-accent) 7%, transparent);

      h3 { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); }
    }

    .letter-chip {
      grid-row: 1 / span 2;
      display: grid;
      place-items: center;
      inline-size: 1.75rem;
      block-size: 1.75rem;
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      color: var(--color-text-muted);

      &.is-key {
        grid-row: auto;
        inline-size: 1.375rem;
        block-size: 1.375rem;
        border-color: transparent;
        background: var(--logo-gradient) var(--color-gradient-bottom);
        color: var(--color-on-gradient);
      }
    }

    .why-list {
      display: grid;
      gap: var(--space-4);

      > div { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); }

      dt { display: contents; }

      .chosen-tag { grid-column: 2; grid-row: 1; color: var(--color-incorrect); }

      dd { grid-column: 2; font-size: var(--text-sm); line-height: var(--line-height-relaxed); color: var(--color-text-muted); }

      .is-chosen {
        dd { color: var(--color-text); }

        .letter-chip { border-color: var(--color-incorrect); color: var(--color-incorrect); }
      }
    }

    .panel-actions {
      display: flex;
      justify-content: flex-end;
      padding-block-start: var(--space-5);
      border-block-start: 1px solid var(--color-border);
    }

    .q2-hero {
      display: grid;
      gap: var(--space-6);
      padding: var(--space-6);
      background: color-mix(in oklch, var(--color-accent) 7%, var(--color-panel));
    }

    .q2-score {
      display: grid;
      gap: var(--space-3);
    }

    .figure {
      display: inline-flex;
      align-items: baseline;
      font-family: var(--font-display);
      font-size: var(--text-hero);
      font-weight: 300;
      line-height: 1;
      letter-spacing: -0.03em;
    }

    .figure-unit { font-size: 0.5em; margin-inline-start: 0.04em; color: var(--color-text-muted); }

    .score-line {
      font-size: var(--text-lg);
      color: var(--color-text-muted);

      strong { color: var(--color-text); font-weight: 500; }
    }

    .q2-tiles-wrap {
      display: grid;
      gap: var(--space-3);
      align-content: end;
      container-type: inline-size;
    }

    .q2-tiles {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-2);
      margin: 0;
      padding: 0;
      list-style: none;

      @container (width < 20rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    .q-tile {
      display: grid;
      gap: var(--space-2);
      padding: var(--space-3);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      background: var(--color-panel);
      color: var(--color-text);
      text-decoration: none;
      transition: background-color var(--duration-fill) var(--ease-out);

      &:hover { background: var(--color-panel-hover); }

      .glyph { inline-size: 1.125rem; block-size: 1.125rem; }

      &.is-correct .glyph { color: var(--color-correct); }

      &.is-incorrect {
        border-color: color-mix(in oklch, var(--color-incorrect) 60%, transparent);
        background: color-mix(in oklch, var(--color-incorrect) 8%, var(--color-panel));

        .glyph { color: var(--color-incorrect); }
      }
    }

    .tile-word { font-size: var(--text-sm); color: var(--color-text-muted); }

    .results-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-4);
    }

    .all-clear {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      color: var(--color-correct);
      font-weight: 500;
    }

    .review {
      display: grid;
      gap: var(--space-5);
      margin: 0;
    }

    .section-index {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--space-2) var(--space-4);
      font-family: var(--font-section);
      font-size: var(--text-section);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-text-muted);

      h2 { margin: 0; font: inherit; }
    }

    .index-rule {
      flex: 1;
      align-self: center;
      min-inline-size: var(--space-6);
      block-size: 1px;
      background: var(--color-border);
    }

    .q2-review {
      padding-block-start: var(--space-6);
      border-block-start: 1px solid var(--color-border);
      scroll-margin-block-start: 8rem;

      &:first-of-type { border-block-start: 0; padding-block-start: 0; }

      .q2-panel { box-shadow: none; }
    }
  }

  .quiz > .feedback .q2-panel { animation: panel-in var(--duration-spring) var(--ease-out) both; }

  @keyframes panel-in {
    from { opacity: 0; }
  }

  @keyframes panel-slide {
    from { opacity: 0; translate: var(--space-8) 0; }
  }

  @media (min-width: 64rem) {
    .quiz .q2-grid {
      grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
      column-gap: var(--space-8);

      .q2-question { grid-column: 1; grid-row: 1; }

      .q2-panel { grid-column: 2; grid-row: 1 / span 2; }

      .q2-diagram { grid-column: 1; grid-row: 2; }
    }

    .quiz > .feedback .q2-panel { animation-name: panel-slide; }

    :is(.quiz, .feedback) {
      .q2-hero {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: end;
        column-gap: var(--space-10);

        .results-actions { grid-column: 1 / -1; }
      }

      .q2-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    }
  }

  @media (max-width: 32rem) {
    .quiz { gap: var(--space-5); }

    :is(.quiz, .feedback) {
      .quiz-title { font-size: var(--text-2xl); }

      .stem { font-size: var(--text-base); }

      .choice { gap: var(--space-3); padding: var(--space-3); }

      .panel-actions .cta, .results-actions > *, .results-actions .cta {
        inline-size: 100%;
        white-space: normal;
        text-align: center;
      }

      .q2-panel { padding: var(--space-5); }

      .q2-hero { padding: var(--space-4); }

      .figure { font-size: var(--text-5xl); }
    }
  }
}