/* Shared reading and interface styles are maintained in interface.css. */

      /* ==========================================================================
   TOKENS
   Type is dark throughout. This is a study book; grey pushes prose out of
   focus. Only true chrome is lighter.
   Shape: rectangles with small rounded corners. No capsules anywhere.
   ========================================================================== */
      :root {
        --sand-50: #ffffff;
        --sand-100: #f8fafd;
        --sand-200: #f3f6fb;
        --sand-300: #e6ecf5;
        --sand-400: #79889f;
        --brown-600: #52627b;
        --brown-700: #40516d;
        --brown-800: #25334d;
        --brown-900: #18243d;
        --green-50: #ebf0ff;
        --green-100: #c4d2fc;
        --green-600: #2855d9;
        --green-700: #2447a8;
        --green-800: #18367f;
        --clay-50: #ebf0ff;
        --clay-100: #c4d2fc;
        --clay-600: #6741a5;
        --clay-700: #53318c;

        --font-ui:
          "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;

        /* Type scale. Sized by importance, not by decoration. */
        --size-100: 0.8125rem; /* chrome: step numbers, meta      */
        --size-200: 0.9375rem; /* level-2 nav, small labels       */
        --size-300: 1rem; /* level-1 nav, notes              */
        --size-400: 1.125rem; /* body prose                      */
        --size-500: 1.375rem; /* h3                              */
        --size-600: 1.6875rem; /* h2                              */
        --size-700: 2rem; /* unit title                      */

        --leading-tight: 1.25;
        --leading-body: 1.6;
        --measure: 68ch;

        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 24px;
        --space-6: 32px;
        --space-7: 48px;
        --space-8: 64px;

        /* Rectangles with rounded corners. Nothing is a capsule. */
        --radius-xs: 4px;
        --radius-sm: 6px;
        --radius-md: 8px;
        --radius-lg: 12px;
        /* Capsules and circles are used for tags, counts and icon buttons. Rounded
     rectangles are used for anything that behaves like a button or a panel.
     Mixing the two deliberately is what separates a tag from a control. */
        --radius-pill: 999px;

        /* Minimum touch targets, WCAG 2.5.8 asks for 24px, we use 40/44. */
        --control-sm: 36px;
        --control-md: 44px;

        --surface-page: var(--sand-200);
        --surface-raised: var(--sand-50);
        --surface-sunken: var(--sand-100);
        --text-strong: var(--brown-900);
        --text-body: var(--brown-800);
        --text-secondary: var(--brown-700);
        --text-chrome: var(--brown-600);
        --border: var(--sand-300);
        --border-strong: var(--sand-400);
        --primary: var(--green-700);
        --primary-tint: var(--green-50);
        --primary-line: var(--green-100);
        --accent: var(--clay-600);
        --accent-tint: var(--clay-50);
        --accent-line: var(--clay-100);

        /* One shadow, used only where a sticky bar overlaps content it must sit in
     front of. Borders do the rest of the work. */
        --shadow-sticky: 0 2px 6px rgba(24, 36, 61, 0.1);

        /* Measured at runtime so the three sticky levels stack exactly. */
        --sticky-tabs: 0px;
        --sticky-jump: 0px;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
      }
      body {
        margin: 0;
        background: var(--surface-page);
        color: var(--text-body);
        font-family: var(--font-ui);
        font-size: var(--size-400);
        line-height: var(--leading-body);
        font-synthesis-weight: none;
      }
      .wrap {
        max-width: calc(var(--measure) + var(--space-8));
        margin: 0 auto;
        padding: 0 var(--space-4);
      }

      .skip {
        position: absolute;
        left: -9999px;
        top: 0;
        z-index: 100;
        background: var(--primary);
        color: #fff;
        padding: var(--space-3) var(--space-4);
        border-radius: 0 0 var(--radius-md) 0;
        font-weight: 600;
      }
      .skip:focus {
        left: 0;
      }
      :focus-visible {
        outline: 3px solid var(--primary);
        outline-offset: 2px;
        border-radius: var(--radius-xs);
      }

      /* ============================ LEVEL 1: chapter tabs ====================== */
      .tabs-wrap {
        position: sticky;
        top: 0;
        z-index: 40;
        background: var(--surface-page);
        border-bottom: 1px solid var(--border);
      }
      .tabs-wrap.is-stuck {
        box-shadow: var(--shadow-sticky);
      }
      /* The masthead scrolls away. Only the tab strip stays pinned, so the sticky
   chrome costs about 60px instead of 146px. That matters most on a phone. */
      .masthead {
        padding: var(--space-4) 0 var(--space-3);
      }
      .crumb ol {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        margin: 0 0 var(--space-2);
        padding: 0;
        font-size: var(--size-200);
      }
      .crumb li + li::before {
        content: "›";
        margin-right: var(--space-2);
        color: var(--text-chrome);
      }
      .crumb a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
      }
      .crumb a:hover {
        text-decoration: underline;
      }
      .crumb [aria-current] {
        color: var(--text-chrome);
      }
      .u-n {
        color: var(--primary);
      }
      .search {
        position: relative;
        display: flex;
        align-items: center;
        margin-top: var(--space-4);
      }
      .search-i {
        position: absolute;
        left: var(--space-3);
        width: 20px;
        height: 20px;
        color: var(--text-chrome);
        pointer-events: none;
      }
      .search input {
        width: 100%;
        min-height: var(--control-md);
        font: inherit;
        font-size: var(--size-300);
        color: var(--text-body);
        background: var(--surface-raised);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        padding: var(--space-2) var(--space-8) var(--space-2)
          calc(var(--space-4) + 22px);
      }
      .search input::placeholder {
        color: var(--text-chrome);
      }
      .search input::-webkit-search-cancel-button {
        display: none;
      }
      #q-clear {
        position: absolute;
        right: var(--space-2);
        width: 32px;
        height: 32px;
        border: 0;
        background: none;
        color: var(--text-chrome);
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
        border-radius: var(--radius-xs);
      }
      #q-clear:hover {
        background: var(--sand-300);
        color: var(--text-strong);
      }
      .search-help {
        margin: var(--space-2) 0 0;
        font-size: var(--size-200);
        color: var(--text-secondary);
      }
      .search-count {
        margin: var(--space-2) 0 0;
        font-size: var(--size-200);
        color: var(--primary);
        font-weight: 500;
      }
      .search-count:empty {
        display: none;
      }
      mark {
        background: #dce6ff;
        color: inherit;
        border-radius: 2px;
        padding: 0 2px;
      }
      .no-match {
        display: none !important;
      }
      .kicker {
        font-size: var(--size-100);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--text-chrome);
        font-weight: 600;
        margin: 0;
      }
      .unit-title {
        font-size: var(--size-700);
        line-height: var(--leading-tight);
        color: var(--text-strong);
        margin: var(--space-1) 0 0;
        font-weight: 700;
        letter-spacing: -0.015em;
      }

      /* The strip scrolls, but the scrollbar is hidden. A soft fade at each end
   shows there is more to reach, which reads better on a phone than a bar. */
      .tabs-shell {
        position: relative;
      }
      .tabs-shell::before,
      .tabs-shell::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px;
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.18s ease;
      }
      .tabs-shell::before {
        left: 0;
        background: linear-gradient(
          to right,
          var(--surface-page) 15%,
          rgba(248, 241, 228, 0)
        );
      }
      .tabs-shell::after {
        right: 0;
        background: linear-gradient(
          to left,
          var(--surface-page) 15%,
          rgba(248, 241, 228, 0)
        );
      }
      .tabs-shell.more-left::before {
        opacity: 1;
      }
      .tabs-shell.more-right::after {
        opacity: 1;
      }
      [role="tablist"] {
        display: flex;
        gap: var(--space-1);
        overflow-x: auto;
        padding: var(--space-2) 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
      }
      [role="tablist"]::-webkit-scrollbar {
        display: none;
      }
      [role="tab"] {
        flex: 0 0 auto;
        appearance: none;
        border: 1px solid transparent;
        background: transparent;
        color: var(--text-secondary);
        font: inherit;
        font-size: var(--size-200);
        font-weight: 500;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 0 var(--space-4);
        border-radius: var(--radius-md);
        cursor: pointer;
        white-space: nowrap;
        transition:
          background 0.12s ease,
          color 0.12s ease;
      }
      [role="tab"]:hover {
        background: var(--sand-300);
        color: var(--text-strong);
      }
      [role="tab"][aria-selected="true"] {
        background: var(--primary);
        color: #fff;
        font-weight: 600;
        box-shadow: 0 1px 2px rgba(40, 85, 217, 0.28);
      }

      /* ============================ LEVEL 2: section jump ===================== */
      /* A different shape and weight from level 1, so the two levels never wear the
   same treatment and the hierarchy stays readable when both are stuck. */
      .local-jump {
        position: sticky;
        top: var(--sticky-tabs);
        z-index: 30;
        padding: var(--space-2) 0 var(--space-3);
        background: var(--surface-page);
        box-shadow:
          -50vw 0 0 var(--surface-page),
          50vw 0 0 var(--surface-page);
      }
      .local-jump.is-stuck {
        box-shadow:
          -50vw 0 0 var(--surface-page),
          50vw 0 0 var(--surface-page),
          0 1px 0 var(--border);
      }
      /* A segmented control. One container, the selected segment lifted out of it.
   Subordinate to the tab strip by size and by weight, not by a second colour. */
      .local-jump .seg {
        display: inline-flex;
        gap: 2px;
        padding: 3px;
        background: var(--sand-300);
        border-radius: var(--radius-md);
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .local-jump .seg::-webkit-scrollbar {
        display: none;
      }
      .local-jump a {
        flex: 0 0 auto;
        min-height: var(--control-sm);
        display: inline-flex;
        align-items: center;
        padding: 0 var(--space-4);
        border-radius: var(--radius-sm);
        font-size: var(--size-200);
        font-weight: 500;
        color: var(--text-secondary);
        text-decoration: none;
        white-space: nowrap;
        transition:
          background 0.12s ease,
          color 0.12s ease;
      }
      .local-jump a:hover {
        color: var(--text-strong);
      }
      .local-jump a[aria-current="true"] {
        background: var(--surface-raised);
        color: var(--primary);
        font-weight: 600;
        box-shadow: 0 1px 2px rgba(24, 36, 61, 0.12);
      }

      [role="tabpanel"] {
        padding-bottom: var(--space-8);
      }
      [role="tabpanel"][hidden] {
        display: none;
      }
      .flow-section {
        margin: 0 0 var(--space-7);
        min-width: 0;
        scroll-margin-top: calc(
          var(--sticky-tabs) + var(--sticky-jump) + var(--space-3)
        );
      }

      h2 {
        font-size: var(--size-600);
        line-height: var(--leading-tight);
        color: var(--text-strong);
        margin: 0;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      /* Heading and lede are ONE block with one gap after it. Without this wrapper the
   gap collapses to the h2 margin whenever a section has no lede, so Exercise 1.1
   sat tighter than Concepts and Examples. The rule must hold everywhere: every
   exercise, the review and generated papers. */
      .flow-head {
        margin: var(--space-6) 0 var(--space-5);
      }
      .flow-section:first-child .flow-head,
      [role="tabpanel"] > .flow-section:first-of-type .flow-head {
        margin-top: var(--space-5);
      }
      .flow-head .lede {
        margin: var(--space-2) 0 0;
      }
      h3 {
        font-size: var(--size-500);
        line-height: var(--leading-tight);
        color: var(--text-strong);
        margin: 0 0 var(--space-3);
        font-weight: 600;
      }
      /* A heading inside Concepts, below the h2 but above the cards. It is not a new
   section, so it never appears in the section nav. */
      .sub-head {
        margin: var(--space-6) 0 var(--space-2);
        padding-top: var(--space-4);
        border-top: 1px solid var(--border-strong);
      }
      .lede {
        color: var(--text-secondary);
        font-size: var(--size-300);
        margin: 0 0 var(--space-5);
      }
      .flow-head + * {
        margin-top: 0;
      }

      /* ============================ LEVEL 3: question heading ================= */
      /* The heading is not inside the card. It sits on the page and sticks, while
   each part below it is its own card. That avoids a box inside a box, and it
   is what makes the question label stay visible while you read part (vii). */
      .qblock {
        min-width: 0;
        margin: 0 0 var(--space-7);
      }
      /* Only the label pins. The statement sits underneath it in normal flow, so it
   can wrap freely and is never cut off on a narrow screen. */
      .grp {
        position: sticky;
        top: calc(var(--sticky-tabs) + var(--sticky-jump));
        z-index: 20;
        display: flex;
        padding: var(--space-2) 0;
        background: var(--surface-page);
        box-shadow:
          -50vw 0 0 var(--surface-page),
          50vw 0 0 var(--surface-page);
      }
      .grp.is-stuck {
        box-shadow:
          -50vw 0 0 var(--surface-page),
          50vw 0 0 var(--surface-page),
          0 1px 0 var(--border);
      }
      /* A capsule for the label: it is a small standalone tag, and a pill reads as a
   tag where a rounded rectangle reads as a button. */
      .qn {
        display: inline-flex;
        align-items: center;
        background: var(--primary);
        color: #fff;
        font-size: var(--size-200);
        font-weight: 600;
        letter-spacing: 0.01em;
        padding: var(--space-1) var(--space-4);
        border-radius: var(--radius-pill);
        white-space: nowrap;
      }
      .qn.is-example {
        background: var(--accent);
      }
      .stem {
        display: block;
        margin: var(--space-2) 0 var(--space-3);
        font-size: var(--size-400);
        font-weight: 500;
        color: var(--text-strong);
      }
      .stem {
        font-weight: 500;
        color: var(--text-strong);
      }

      /* ================================ parts ================================= */
      .part {
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--space-4) var(--space-5);
        margin: var(--space-3) 0;
      }
      /* The label and the question it labels are one phrase, so they sit close.
   The floor on the width keeps the question text on a common left edge down a
   list of parts; a longer label such as (viii) simply pushes past it. */
      .qline {
        display: flex;
        gap: var(--space-2);
        align-items: baseline;
      }
      .plabel {
        flex: 0 0 auto;
        font-weight: 600;
        color: var(--accent);
        min-width: 1.9em;
      }

      /* ================================ solution ============================== */
      details.sol {
        margin-top: var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface-sunken);
      }
      details.sol > summary {
        cursor: pointer;
        min-height: var(--control-md);
        padding: var(--space-2) var(--space-4);
        font-weight: 600;
        color: var(--primary);
        font-size: var(--size-300);
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
      }
      details.sol > summary::-webkit-details-marker {
        display: none;
      }
      details.sol > summary::after {
        content: "Show";
        font-weight: 400;
        color: var(--text-chrome);
        font-size: var(--size-200);
      }
      details.sol[open] > summary::after {
        content: "Hide";
      }
      details.sol[open] > summary {
        border-bottom: 1px solid var(--border);
      }
      /* Padding matches the summary exactly, so the step number lines up under the
   word "Solution". */
      .solin {
        padding: var(--space-4);
      }

      /* ---- steps: prose first, then the display ---- */
      ol.steps {
        list-style: none;
        margin: 0;
        padding: 0;
        counter-reset: s;
      }
      ol.steps > li {
        counter-increment: s;
        display: grid;
        grid-template-columns: var(--control-sm) minmax(0, 1fr);
        gap: 0 var(--space-3);
        padding: var(--space-4) 0;
        border-top: 1px solid var(--border);
      }
      ol.steps > li:first-child {
        border-top: 0;
        padding-top: 0;
      }
      /* The number is a small square chip, left-aligned with the summary text above,
   with tabular figures so 9 and 10 keep the same width. */
      ol.steps > li::before {
        content: counter(s);
        grid-column: 1;
        grid-row: 1;
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        font-size: var(--size-100);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--primary);
        background: var(--primary-tint);
        border: 1px solid var(--primary-line);
        border-radius: var(--radius-xs);
        margin-top: 0.15em;
      }
      .swhy {
        grid-column: 2;
        grid-row: 1;
        color: var(--text-body);
      }
      .smath {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        padding: var(--space-2) 0 var(--space-1);
      }

      .ans {
        margin-top: var(--space-4);
        padding: var(--space-3) var(--space-4);
        background: var(--primary-tint);
        border: 1px solid var(--primary-line);
        border-radius: var(--radius-md);
        color: var(--green-800);
        display: flex;
        gap: var(--space-3);
        align-items: baseline;
      }
      .ans b {
        flex: 0 0 auto;
      }

      /* ---- compact exam-style version ---- */
      .written {
        margin-top: var(--space-4);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        background: var(--surface-raised);
        overflow: hidden;
      }
      .written-head {
        padding: var(--space-2) var(--space-4);
        background: var(--sand-100);
        border-bottom: 1px solid var(--border);
        font-size: var(--size-200);
        font-weight: 600;
        color: var(--text-secondary);
      }
      .written-body {
        padding: var(--space-4);
      }
      .w-say {
        margin: 0 0 var(--space-2);
        color: var(--text-body);
        font-size: var(--size-300);
      }
      /* Each array is its own block, so two separate equations are clearly two
   separate pieces of working rather than one long ladder. */
      /* Each expression has one scroll viewport, supplied by MathLayout. Never
   turn the prose or the whole compact solution into another scroll viewport. */
      .w-math {
        min-width: 0;
        margin: 0 0 var(--space-5);
        padding-bottom: var(--space-1);
      }
      .w-math:last-child {
        margin-bottom: 0;
      }
      .w-say + .w-math {
        margin-top: 0;
      }
      .w-math .katex-display {
        margin: 0;
      }

      /* Going deeper. Closed by default, but a full-width prominent trigger. The body
   is flat prose under headings, not a stack of cards inside a card. */
      details.deep {
        margin: var(--space-5) 0 var(--space-4);
        border: 1px solid var(--primary-line);
        border-radius: var(--radius-lg);
        background: var(--primary-tint);
        overflow: hidden;
      }
      details.deep > summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
        min-height: var(--control-md);
      }
      details.deep > summary::-webkit-details-marker {
        display: none;
      }
      details.deep > summary:hover {
        background: var(--green-100);
      }
      .deep-txt {
        flex: 1 1 auto;
        min-width: 0;
      }
      .deep-t {
        display: block;
        font-size: var(--size-400);
        font-weight: 700;
        color: var(--green-800);
      }
      .deep-s {
        display: block;
        font-size: var(--size-200);
        color: var(--text-secondary);
        margin-top: 2px;
      }
      /* A circular toggle. Round reads as "expand", square reads as "button". */
      .deep-x {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        font-weight: 700;
        font-size: var(--size-400);
        line-height: 1;
      }
      details.deep[open] .deep-x {
        transform: rotate(45deg);
      }
      .deep-in {
        padding: var(--space-2) var(--space-5) var(--space-5);
        background: var(--surface-raised);
        border-top: 1px solid var(--primary-line);
      }
      .deep-in h3 {
        margin: var(--space-5) 0 var(--space-2);
        font-size: var(--size-400);
      }
      .deep-in h3:first-child {
        margin-top: var(--space-4);
      }
      .deep-in p {
        margin: 0 0 var(--space-3);
        color: var(--text-body);
      }
      .deep-in .rule {
        margin-top: var(--space-3);
      }
      .deep-in .understand {
        background: none;
        border: 0;
        padding: 0;
        margin: 0;
      }

      /* ---- notes stay shut when the solution opens ---- */
      details.notes {
        margin-top: var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface-raised);
      }
      /* Two disclosures in a row would otherwise double their gap and drift apart
   from the working they belong to. */
      details.vid + details.notes {
        margin-top: var(--space-3);
      }
      details.notes > summary {
        cursor: pointer;
        min-height: var(--control-sm);
        display: flex;
        align-items: center;
        padding: var(--space-2) var(--space-4);
        font-size: var(--size-200);
        color: var(--text-secondary);
        font-weight: 500;
        list-style: none;
      }
      details.notes > summary::-webkit-details-marker {
        display: none;
      }
      details.notes > summary::before {
        content: "+";
        display: inline-grid;
        place-items: center;
        width: 18px;
        height: 18px;
        margin-right: var(--space-2);
        border-radius: var(--radius-xs);
        background: var(--primary-tint);
        color: var(--primary);
        font-weight: 700;
        font-size: var(--size-100);
      }
      details.notes[open] > summary::before {
        content: "−";
      }
      .notesin {
        padding: 0 var(--space-4) var(--space-4);
      }
      .note {
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-sm);
        font-size: var(--size-300);
        border: 1px solid var(--border);
        background: var(--surface-sunken);
        color: var(--text-body);
      }
      .note.watch {
        background: var(--accent-tint);
        border-color: var(--accent-line);
        color: var(--clay-700);
      }
      .note .lbl {
        font-weight: 600;
        display: block;
        margin-bottom: var(--space-1);
      }

      /* ---- video solution ----------------------------------------------------
   The same disclosure shape as Solution, one level quieter, because the video
   is another route to the same working and must never outrank the written
   one. It sits beside the solution rather than inside it, so a student can
   watch without the answer being uncovered first.
   The player does not exist until the panel is opened, and is thrown away
   when it closes. That is what keeps a page of forty parts free of forty
   third-party players, and it is also what stops the sound when a student
   shuts the panel. */
      /* A peer of the answer box and the compact solution, so it takes their gap.
   The notes below it keep the tighter space-3, which is what makes the notes
   read as a tail rather than a fourth section. */
      details.vid {
        margin-top: var(--space-4);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface-raised);
      }
      details.vid > summary {
        cursor: pointer;
        min-height: var(--control-md);
        list-style: none;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-4);
        font-size: var(--size-300);
      }
      details.vid > summary::-webkit-details-marker {
        display: none;
      }
      details.vid > summary:hover {
        background: var(--surface-sunken);
      }
      details.vid > summary::after {
        content: "Watch";
        margin-left: auto;
        font-weight: 400;
        color: var(--text-chrome);
        font-size: var(--size-200);
      }
      details.vid[open] > summary::after {
        content: "Close";
      }
      details.vid[open] > summary {
        border-bottom: 1px solid var(--border);
      }
      /* A circle says play, the way a circle says expand elsewhere in the book. It
   is a solid fill inside a control, which is the one place a solid fill is
   allowed. */
      .vid-play {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--primary);
        display: grid;
        place-items: center;
      }
      .vid-play::before {
        content: "";
        width: 0;
        height: 0;
        margin-left: 2px;
        border-left: 8px solid #fff;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
      }
      .vid-lab {
        min-width: 0;
        font-weight: 600;
        color: var(--text-strong);
      }
      /* The running time is on the trigger, so a student knows what opening it
   costs before it starts. */
      .vid-dur {
        flex: 0 0 auto;
        font-size: var(--size-100);
        font-variant-numeric: tabular-nums;
        color: var(--primary);
        background: var(--primary-tint);
        border: 1px solid var(--primary-line);
        border-radius: var(--radius-xs);
        padding: 0 var(--space-2);
      }
      .vidin {
        padding: var(--space-4);
      }
      .vid-frame {
        position: relative;
        aspect-ratio: 16/9;
        overflow: hidden;
        background: var(--brown-900);
        border-radius: var(--radius-md);
      }
      @supports not (aspect-ratio: 16/9) {
        .vid-frame {
          height: 0;
          padding-top: 56.25%;
        }
      }
      /* The player fills the box exactly. The box is already the video's own shape,
   so there is nothing to scale and nothing to crop. */
      .vid-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
      }
      .vid-alt {
        margin: var(--space-3) 0 0;
        font-size: var(--size-200);
        color: var(--text-chrome);
      }
      .vid-alt a {
        color: var(--primary);
        font-weight: 500;
      }

      /* ================================ concepts ============================== */
      .defn {
        background: var(--surface-raised);
        border: 1px solid var(--border-strong);
        border-left: 4px solid var(--primary);
        border-radius: var(--radius-lg);
        padding: var(--space-4) var(--space-5);
        margin: 0 0 var(--space-5);
      }
      .defn-tag {
        display: inline-block;
        font-size: var(--size-100);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: var(--space-2);
      }
      .defn h3 {
        margin-bottom: var(--space-3);
      }
      .defn-body {
        color: var(--text-body);
      }
      .defn-body p {
        margin: 0 0 var(--space-3);
      }
      .defn-note {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--border);
      }
      .defn-note p {
        margin: 0 0 var(--space-2);
        color: var(--text-secondary);
        font-size: var(--size-300);
      }
      .eg {
        margin-top: var(--space-3);
        background: var(--primary-tint);
        border: 1px solid var(--primary-line);
        border-radius: var(--radius-sm);
        padding: var(--space-3) var(--space-4);
      }
      .eg .lbl {
        font-size: var(--size-100);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        font-weight: 700;
        color: var(--green-800);
        display: block;
        margin-bottom: var(--space-2);
      }
      .eg ul {
        margin: 0;
        padding: 0;
      }
      .eg li {
        margin: 0 0 var(--space-1);
        color: var(--text-body);
      }

      .understand {
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--space-4) var(--space-5);
        margin: 0 0 var(--space-4);
      }
      .understand p {
        margin: 0 0 var(--space-3);
        color: var(--text-body);
      }
      .understand p:last-child {
        margin-bottom: 0;
      }
      .rule {
        background: var(--primary-tint);
        border: 1px solid var(--primary-line);
        border-radius: var(--radius-sm);
        padding: var(--space-3) var(--space-4);
        margin-top: var(--space-4);
      }
      .rule b {
        color: var(--green-800);
      }

      details.extra {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--surface-raised);
        margin-top: var(--space-4);
      }
      details.extra > summary {
        cursor: pointer;
        min-height: var(--control-md);
        display: flex;
        align-items: center;
        padding: var(--space-2) var(--space-5);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: var(--size-300);
        list-style: none;
      }
      details.extra > summary::-webkit-details-marker {
        display: none;
      }
      details.extra > summary::before {
        content: "+";
        display: inline-grid;
        place-items: center;
        width: 20px;
        height: 20px;
        margin-right: var(--space-3);
        border-radius: var(--radius-xs);
        background: var(--sand-300);
        color: var(--text-secondary);
        font-weight: 700;
        font-size: var(--size-100);
      }
      details.extra[open] > summary::before {
        content: "−";
      }
      .extrain {
        padding: 0 var(--space-5) var(--space-4);
      }
      .extrain p {
        color: var(--text-body);
      }
      table.corr {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--size-300);
        margin-top: var(--space-3);
      }
      table.corr th,
      table.corr td {
        text-align: left;
        vertical-align: top;
        padding: var(--space-2) var(--space-3);
        border-bottom: 1px solid var(--border);
      }
      table.corr th {
        font-weight: 600;
        color: var(--text-secondary);
        font-size: var(--size-200);
      }

      /* ================================ chrome ================================ */
      /* Round, because it is an icon control rather than a labelled button.
   On a wide screen it sits in the margin just right of the measure, so it never
   covers content. On a narrow screen there is no margin, so it returns to the
   corner. */
      #toTop {
        position: fixed;
        bottom: var(--space-5);
        z-index: 50;
        /* --content-half is measured at run time. A ch-based calc here would resolve
     against the ROOT font size, not the body's, and land the button on top of
     the text. */
        left: calc(50% + var(--content-half, 50vw) + var(--space-4));
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        border: 1px solid var(--border-strong);
        background: var(--surface-raised);
        color: var(--primary);
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(24, 36, 61, 0.14);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.18s ease,
          visibility 0.18s ease,
          background 0.12s ease,
          transform 0.12s ease;
      }
      #toTop svg {
        width: 20px;
        height: 20px;
        display: block;
      }
      #toTop.on {
        opacity: 1;
        visibility: visible;
      }
      #toTop:hover {
        background: var(--primary);
        color: #fff;
        transform: translateY(-2px);
      }
      #toTop:active {
        transform: translateY(0);
      }
      /* Not enough margin to sit clear of the text: fall back to the corner. */
      #toTop.corner {
        left: auto;
        right: var(--space-4);
      }

      .katex-display {
        margin: var(--space-2) 0;
      }
      .katex {
        font-size: 1.05em;
      }
      /* An inline expression is one word. Without this the browser breaks it at any
   binary operator, so "2z+3w=2" inside a sentence prints as "2z +" on one line
   and "3w = 2" on the next, and a narrow column walks it down the page one
   symbol at a time. Prose around it still wraps normally; anything genuinely
   too wide scrolls inside its own box rather than being broken up. */
      .katex {
        white-space: nowrap;
      }
      .placeholder {
        background: var(--surface-raised);
        border: 1px dashed var(--border-strong);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
        text-align: center;
        color: var(--text-secondary);
      }

      @media (width <= 520px) {
        /* overflow-x:hidden here would make html a scroll container, and every
     position:sticky descendant would then compute against a box that never
     scrolls, so nothing would pin on a phone. overflow-x:clip contains the
     same overflow without creating that container, so sticky keeps working. */
        html,
        body {
          overflow-x: clip;
          max-width: 100%;
        }
        body {
          font-size: 1.0625rem;
        }
        :root {
          --size-700: 1.625rem;
          --size-600: 1.4375rem;
          --size-500: 1.25rem;
        }
        ol.steps > li {
          grid-template-columns: 30px minmax(0, 1fr);
          gap: 0 var(--space-2);
        }
        ol.steps > li::before {
          width: 24px;
          height: 24px;
        }
        .part {
          padding: var(--space-4);
        }
        .defn,
        .understand {
          padding: var(--space-4);
        }
        .ans {
          flex-wrap: wrap;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        * {
          animation: none !important;
          transition: none !important;
        }
      }
      @media print {
        .tabs-wrap,
        .local-jump,
        #toTop,
        .skip {
          display: none !important;
        }
        details .solin,
        details .notesin,
        details .extrain,
        details .vidin {
          display: block !important;
        }
        details.sol,
        details.notes,
        details.extra,
        details.vid {
          border: 0;
          background: none;
        }
        [role="tabpanel"][hidden] {
          display: block !important;
        }
        .grp {
          position: static;
          box-shadow: none;
        }
        /* Paper cannot play a video, so print the address instead of a black box. */
        .vid-frame,
        .vid-play,
        .vid-dur,
        details.vid > summary::after {
          display: none !important;
        }
        .vidin {
          padding: 0;
        }
        .vid-alt a::after {
          content: " (" attr(href) ")";
        }
      }

      /* ==========================================================================
   BOOK VIEW  (contents). Same tokens, so the two views cannot drift apart.
   ========================================================================== */
      .view[hidden] {
        display: none;
      }
      .hero {
        padding: var(--space-6) 0 var(--space-5);
      }
      .hero h1 {
        font-size: var(--size-700);
        line-height: var(--leading-tight);
        margin: var(--space-2) 0;
        color: var(--text-strong);
        font-weight: 700;
        letter-spacing: -0.015em;
      }
      .hero .sub {
        margin: 0;
        color: var(--text-secondary);
        font-size: var(--size-300);
      }
      .stats {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        margin-top: var(--space-5);
      }
      .stat {
        flex: 1 1 7rem;
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: var(--space-3) var(--space-4);
      }
      .stat b {
        display: block;
        font-size: var(--size-600);
        color: var(--primary);
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
      }
      .stat span {
        font-size: var(--size-200);
        color: var(--text-secondary);
      }
      .ucard {
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-3);
        overflow: hidden;
      }
      .ucard.is-idle {
        opacity: 0.72;
      }
      .u-link,
      .u-body {
        display: block;
        padding: var(--space-4) var(--space-5);
        text-decoration: none;
        color: inherit;
        width: 100%;
        text-align: left;
        font: inherit;
        background: none;
        border: 0;
        cursor: pointer;
      }
      .u-body {
        cursor: default;
      }
      .u-link:hover {
        background: var(--primary-tint);
      }
      .u-head {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
      }
      .u-num {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        background: var(--primary);
        color: #fff;
        border-radius: var(--radius-sm);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      .u-head h2 {
        margin: 0;
        font-size: var(--size-500);
        border: 0;
        padding: 0;
        font-weight: 600;
      }
      .u-meta {
        margin: 2px 0 0;
        font-size: var(--size-200);
        color: var(--text-chrome);
      }
      .u-badge {
        margin-left: auto;
        font-size: var(--size-100);
        font-weight: 600;
        padding: 2px var(--space-2);
        border-radius: var(--radius-xs);
        white-space: nowrap;
      }
      .s-in-progress {
        background: var(--primary-tint);
        color: var(--green-800);
        border: 1px solid var(--primary-line);
      }
      .s-not-started {
        background: var(--sand-100);
        color: var(--text-secondary);
        border: 1px solid var(--border);
      }
      .s-not-surveyed {
        background: var(--accent-tint);
        color: var(--clay-700);
        border: 1px solid var(--accent-line);
      }
      .u-ex {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin: var(--space-3) 0 0;
        padding: 0;
      }
      .u-ex li {
        font-size: var(--size-200);
        padding: 2px var(--space-2);
        border-radius: var(--radius-xs);
        border: 1px solid var(--border);
        color: var(--text-secondary);
        background: var(--surface-sunken);
      }
      .u-ex li.is-done {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
        font-weight: 600;
      }
      .u-bar {
        height: 5px;
        background: var(--sand-300);
        border-radius: var(--radius-xs);
        margin-top: var(--space-3);
        overflow: hidden;
      }
      .u-bar span {
        display: block;
        height: 100%;
        background: var(--primary);
      }
      .u-prog {
        margin: var(--space-2) 0 0;
        font-size: var(--size-200);
        color: var(--text-chrome);
      }
      .prov {
        margin: var(--space-2) 0 0;
        font-size: var(--size-200);
        color: var(--clay-700);
      }
      .foot {
        margin: var(--space-6) 0 var(--space-8);
        padding-top: var(--space-4);
        border-top: 1px solid var(--border);
        font-size: var(--size-200);
        color: var(--text-secondary);
      }
      @media (min-width: 48rem) {
        .hero h1 {
          font-size: 2.5rem;
        }
      }
      @media print {
        .view[hidden] {
          display: none !important;
        }
      }

      /* ==========================================================================
   MOBILE STICKY
   The masthead scrolls away with the page. Taking it out of flow with
   position:fixed breaks the sticky context of the bars below it, so instead the
   three sticky levels simply pin in order, and each level is made shorter on a
   phone so the whole stack stays near 100px.
   ========================================================================== */
      @media (max-width: 47.99rem) {
        [role="tab"] {
          min-height: 38px;
          padding: 0 var(--space-3);
        }
        [role="tablist"] {
          padding: var(--space-1) 0 var(--space-2);
        }
        .local-jump {
          padding: var(--space-2) 0;
        }
        .local-jump a {
          min-height: 32px;
          padding: 0 var(--space-3);
          font-size: var(--size-100);
        }
        .grp {
          padding: var(--space-2) 0;
        }
      }

      /* ==========================================================================
   SEARCH RESULTS
   ========================================================================== */
      .results {
        margin-top: var(--space-4);
      }
      .results[hidden] {
        display: none;
      }
      .res-head {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        flex-wrap: wrap;
        margin-bottom: var(--space-3);
      }
      .res-head h2 {
        margin: 0;
        font-size: var(--size-500);
        border: 0;
        padding: 0;
      }
      .res-clear {
        appearance: none;
        border: 1px solid var(--border-strong);
        background: var(--surface-raised);
        color: var(--text-secondary);
        font: inherit;
        font-size: var(--size-200);
        min-height: var(--control-sm);
        padding: 0 var(--space-3);
        border-radius: var(--radius-sm);
        cursor: pointer;
      }
      .res-clear:hover {
        background: var(--sand-300);
        color: var(--text-strong);
      }
      .res-list {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .res-item {
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-2);
      }
      .res-item a {
        display: block;
        padding: var(--space-3) var(--space-4);
        text-decoration: none;
        color: inherit;
      }
      .res-item a:hover {
        background: var(--primary-tint);
      }
      .res-where {
        font-size: var(--size-100);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--primary);
        font-weight: 700;
        display: block;
        margin-bottom: var(--space-1);
      }
      .res-text {
        color: var(--text-body);
        display: block;
      }
      .res-none {
        background: var(--surface-raised);
        border: 1px dashed var(--border-strong);
        border-radius: var(--radius-md);
        padding: var(--space-5);
        color: var(--text-secondary);
      }
      .flash {
        animation: flash 1.6s ease;
      }
      @keyframes flash {
        0%,
        40% {
          background: #dce6ff;
        }
        100% {
          background: transparent;
        }
      }

      /* ==========================================================================
   MCQ (review exercise, generated papers)
   ========================================================================== */
      .opts {
        list-style: none;
        margin: var(--space-3) 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2);
      }
      @media (min-width: 34rem) {
        .opts {
          grid-template-columns: 1fr 1fr;
        }
      }
      .opts li {
        display: flex;
        gap: var(--space-3);
        align-items: flex-start;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface-sunken);
        color: var(--text-body);
      }
      .opt-k {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-xs);
        font-size: var(--size-100);
        font-weight: 700;
        color: var(--text-secondary);
        background: var(--surface-raised);
      }
      .opts li.is-right {
        background: var(--primary-tint);
        border-color: var(--primary-line);
      }
      .opts li.is-right .opt-k {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
      }

      /* ==========================================================================
   PAPER  (generated papers and their marking key)
   The question paper and the key are the same markup with a different body,
   so anything fixed here is fixed in both.
   ========================================================================== */
      /* The sheet is a fixed shape. On a narrow screen it scrolls inside its own
   box rather than pushing the page sideways, which is the rule everywhere in
   this stylesheet: the body never scrolls horizontally. */
      .paper-wrap {
        margin-top: var(--space-5);
        overflow-x: auto;
        overscroll-behavior-x: contain;
      }
      .paper-wrap[hidden] {
        display: none;
      }
      .paper {
        background: var(--surface-raised);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }
      .paper-head {
        padding: var(--space-5);
        border-bottom: 2px solid var(--text-strong);
        text-align: center;
      }
      .paper-head h3 {
        margin: 0;
        font-size: var(--size-600);
        font-weight: 700;
        line-height: var(--leading-tight);
      }
      .paper-head .school {
        margin: 0 0 var(--space-1);
        font-size: var(--size-100);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--text-chrome);
      }
      .paper-sub {
        margin: var(--space-1) 0 0;
        font-size: var(--size-200);
        color: var(--text-secondary);
      }
      .paper-rail {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2) var(--space-5);
        margin-top: var(--space-3);
        font-size: var(--size-200);
        color: var(--text-secondary);
      }
      .paper-rail b {
        color: var(--text-strong);
        font-variant-numeric: tabular-nums;
      }
      /* Ruled blanks. On the printed sheet a student writes on them, and on screen
   they show what the sheet will carry, so nothing appears only at print time. */
      .paper-fill {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-5);
        margin-top: var(--space-4);
        text-align: left;
        font-size: var(--size-200);
        color: var(--text-chrome);
      }
      .paper-fill span {
        flex: 1 1 9rem;
        border-bottom: 1px solid var(--border-strong);
        padding-bottom: 2px;
      }

      .paper-body {
        padding: var(--space-5);
      }

      /* A paper has three levels and they nest the way the unit's do:

     section   Objective, Subjective          the heaviest rule on the sheet
     part      Short-answer, Long-answer      a lighter rule under it
     question  Q1 to Q9                       one number, running the whole paper

   Only the question is numbered. A reader looking for Q7 looks for one thing,
   not for a section letter and a number inside it. */
      .sec {
        margin-bottom: var(--space-6);
      }
      .sec:last-child {
        margin-bottom: 0;
      }
      .sec-head {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        flex-wrap: wrap;
        padding-bottom: var(--space-2);
        border-bottom: 2px solid var(--text-strong);
        margin-bottom: var(--space-4);
      }
      .sec-title {
        margin: 0;
        font-size: var(--size-400);
        font-weight: 700;
        color: var(--text-strong);
        letter-spacing: 0.02em;
      }
      .sec-marks {
        margin-left: auto;
        font-size: var(--size-200);
        font-weight: 600;
        color: var(--primary);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      .pq-part-block + .pq-part-block {
        margin-top: var(--space-6);
      }
      .part-head {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        flex-wrap: wrap;
        padding-bottom: var(--space-1);
        border-bottom: 1px solid var(--border-strong);
        margin-bottom: var(--space-4);
      }
      .part-title {
        margin: 0;
        font-size: var(--size-300);
        font-weight: 700;
        color: var(--text-strong);
      }
      .part-marks {
        margin-left: auto;
        font-size: var(--size-200);
        font-weight: 600;
        color: var(--primary);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      .part-note {
        width: 100%;
        margin: var(--space-1) 0 0;
        font-size: var(--size-200);
        color: var(--text-secondary);
      }

      /* The question number. It leads a head line on a question made of subparts and
   sits in the gutter on a long question, but it is the same label either way,
   so Q1 and Q5 never read as two different kinds of thing. */
      .q-no {
        flex: 0 0 auto;
        font-weight: 700;
        color: var(--primary);
        font-size: var(--size-300);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      .pq-q {
        margin-bottom: var(--space-5);
      }
      .pq-q:last-child {
        margin-bottom: 0;
      }
      .q-head {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        flex-wrap: wrap;
        margin-bottom: var(--space-2);
      }
      .q-note {
        flex: 1 1 12rem;
        margin: 0;
        font-size: var(--size-200);
        color: var(--text-secondary);
      }
      .q-marks {
        margin-left: auto;
        font-size: var(--size-200);
        font-weight: 600;
        color: var(--primary);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      /* A subpart is set exactly as a part is set in the exercise above: the same
   label column width as .plabel, the same gap, the same weight and colour, so a
   student reads a paper the way they already read the unit.

   Baseline, not top. A question carrying a fraction has a tall first line, and
   top alignment then floats its number above the text it belongs to. */
      .pq {
        display: grid;
        grid-template-columns: 1.9em minmax(0, 1fr) auto;
        gap: 0 var(--space-2);
        align-items: baseline;
        padding: var(--space-3) 0;
      }
      .pq-n {
        font-weight: 600;
        color: var(--accent);
        font-size: var(--size-300);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      .pq-body {
        min-width: 0;
      }
      .pq-m {
        font-size: var(--size-200);
        font-weight: 700;
        color: var(--primary);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      /* A long question is the number and then its two parts, so it takes two
   columns where a subpart takes three. Its gutter fits "Q9", where a subpart
   gutter fits "(i)". Getting this wrong squeezes the whole question into the
   label column and sets it one character per line. */
      .pq-long {
        grid-template-columns: 2.6em minmax(0, 1fr);
        break-inside: avoid;
      }
      .pq-part {
        display: grid;
        grid-template-columns: 1.9em minmax(0, 1fr) auto;
        gap: 0 var(--space-2);
        align-items: baseline;
      }
      .pq-part + .pq-part {
        margin-top: var(--space-3);
      }
      .pq-ab {
        font-weight: 600;
        color: var(--accent);
      }
      .pq-qtext {
        min-width: 0;
      }
      /* The option set takes as few lines as it can. Four short answers go on one
   line, two moderate ones per line, and anything two storeys tall keeps a line
   to itself. `optionColumns` in the template picks which, and the class it sets
   is honoured from 34rem up; below that everything halves, because a phone
   cannot hold four of anything side by side. */
      .pq-opts {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2) var(--space-4);
        margin: var(--space-3) 0 0;
        padding: 0;
        font-size: var(--size-300);
      }
      .pq-opts.is-c4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      @media (min-width: 34rem) {
        .pq-opts.is-c4 {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .pq-opts.is-c2 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      /* The option letter only. A bare "li span" here also matched every span
   KaTeX builds inside the option, which put a 4px gap between each atom of
   the expression: "-7i" printed as "- 7 i", and on a narrow column the extra
   width broke it one symbol per line. */
      .pq-opts li .pq-k {
        color: var(--text-chrome);
        font-weight: 600;
        margin-right: var(--space-1);
      }
      .paper-tools {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-top: var(--space-4);
      }
      /* The controls that act on a paper sit under it, not above it. */
      .paper-after {
        margin: var(--space-4) 0 var(--space-2);
        align-items: center;
      }
      .tools-hint {
        flex: 1 1 18rem;
        margin: 0;
        font-size: var(--size-100);
        color: var(--text-chrome);
      }

      /* ==========================================================================
   MARKING KEY
   ========================================================================== */
      .paper-key {
        border-color: var(--primary-line);
      }
      .paper-key .paper-head {
        border-bottom-color: var(--primary);
      }
      .keyrow {
        display: grid;
        grid-template-columns: 4.4em minmax(0, 1fr);
        gap: 0 var(--space-3);
        align-items: baseline;
        padding: var(--space-3) 0;
        border-bottom: 1px dashed var(--border);
        break-inside: avoid;
      }
      .keyrow:last-child {
        border-bottom: 0;
      }
      .keyn {
        font-size: var(--size-200);
        font-weight: 700;
        color: var(--text-strong);
        font-variant-numeric: tabular-nums;
      }
      .keybody {
        min-width: 0;
        font-size: var(--size-300);
      }
      .keybody p {
        margin: 0 0 var(--space-2);
      }
      .keypick {
        font-weight: 600;
        color: var(--primary);
      }
      .keybody .answer {
        background: var(--primary-tint);
        border: 1px solid var(--primary-line);
        border-radius: var(--radius-sm);
        padding: var(--space-2) var(--space-3);
        margin-top: var(--space-2);
      }
      .keybody .answer .eq {
        font-weight: 600;
        color: var(--green-800);
      }

      /* ==========================================================================
   BUTTONS  (generator, paper actions)
   ========================================================================== */
      .btn {
        appearance: none;
        font: inherit;
        font-size: var(--size-200);
        font-weight: 600;
        min-height: var(--control-md);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: 0 var(--space-5);
        border-radius: var(--radius-md);
        cursor: pointer;
        border: 1px solid transparent;
        transition: background 0.12s ease;
      }
      .btn-primary {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 1px 2px rgba(40, 85, 217, 0.28);
      }
      .btn-primary:hover {
        background: var(--green-800);
      }
      .btn-ghost {
        background: var(--surface-raised);
        border-color: var(--border-strong);
        color: var(--text-secondary);
      }
      .btn-ghost:hover {
        background: var(--sand-300);
        color: var(--text-strong);
      }
      /* A button that cannot do anything yet has to look like it. Show marking key
   and Print are dead until a paper exists. */
      .btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .btn-ghost:disabled:hover {
        background: var(--surface-raised);
        color: var(--text-secondary);
      }
      .btn-primary:disabled:hover {
        background: var(--primary);
      }

      /* ==========================================================================
   GENERATOR CONTROLS
   ========================================================================== */
      .gen-form {
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--space-5);
        margin-bottom: var(--space-5);
      }
      .field {
        margin-bottom: var(--space-5);
      }
      .field:last-of-type {
        margin-bottom: var(--space-4);
      }
      .field > .lbl {
        display: block;
        font-size: var(--size-200);
        font-weight: 600;
        color: var(--text-strong);
        margin-bottom: var(--space-1);
      }
      .field .hint {
        margin: 0 0 var(--space-3);
        font-size: var(--size-200);
        color: var(--text-secondary);
      }
      .choice {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
      }
      .choice label {
        flex: 1 1 12rem;
        min-height: var(--control-md);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-4);
        cursor: pointer;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        background: var(--surface-sunken);
        font-size: var(--size-200);
      }
      .choice input {
        accent-color: var(--primary);
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
      }
      .choice label:has(input:checked) {
        background: var(--primary-tint);
        border-color: var(--primary);
        color: var(--green-800);
        font-weight: 600;
      }
      .choice label:has(input:focus-visible) {
        outline: 3px solid var(--primary);
        outline-offset: 2px;
      }
      .mix {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
      }
      .mix label {
        flex: 1 1 7rem;
      }
      .mix span {
        display: block;
        font-size: var(--size-200);
        color: var(--text-secondary);
        margin-bottom: var(--space-1);
      }
      .mix input {
        width: 100%;
        min-height: var(--control-md);
        font: inherit;
        font-size: var(--size-300);
        padding: 0 var(--space-3);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        background: var(--surface-sunken);
        color: var(--text-body);
        font-variant-numeric: tabular-nums;
      }
      .gen-status {
        margin: var(--space-3) 0 0;
        font-size: var(--size-200);
        color: var(--text-secondary);
      }
      .warn {
        background: var(--accent-tint);
        border: 1px solid var(--accent-line);
        color: var(--clay-700);
        border-radius: var(--radius-md);
        padding: var(--space-3) var(--space-4);
        font-size: var(--size-300);
        margin-bottom: var(--space-4);
      }

      /* ==========================================================================
   PRINTING A GENERATED PAPER

   The Print button on the generator puts .printing-paper on the body, and only
   then does the page collapse to the sheet. Printing from the browser menu
   still prints the book the way it always did, which is what a student doing
   revision expects.

   The sheet is measured in points, not in the screen tokens. A paper is a
   fixed physical object: nine multiple choice questions and their options have
   to sit on one page, and the written portion has to start on the next one.
   Sizing that in rem would let a reader's browser settings break the layout of
   an exam.
   ========================================================================== */
      /* Room at the head and foot for the running header and footer the Print
   button writes: what the paper is, when it was printed, which page. */
      @page {
        size: A4 portrait;
        margin: 16mm 13mm 16mm;
      }

      @media print {
        .gen-form,
        .paper-tools,
        .res-clear {
          display: none !important;
        }

        body.printing-paper {
          background: #fff;
        }
        body.printing-paper .masthead,
        body.printing-paper .tabs-wrap,
        body.printing-paper #results,
        body.printing-paper #view-book,
        body.printing-paper #toTop,
        body.printing-paper .skip,
        body.printing-paper .warn,
        body.printing-paper .flow-head,
        body.printing-paper [role="tabpanel"]:not(#panel-generator) {
          display: none !important;
        }
        body.printing-paper .wrap {
          max-width: none;
          margin: 0;
          padding: 0;
        }
        body.printing-paper main {
          padding: 0;
        }
        body.printing-paper .paper-wrap {
          margin: 0;
        }

        .paper {
          border: 0;
          border-radius: 0;
          background: #fff;
          color: #000;
          font-size: 10.5pt;
          line-height: 1.35;
        }
        .paper-head {
          padding: 0 0 6pt;
          border-bottom: 1.5pt solid #000;
        }
        .paper-head h3 {
          font-size: 15pt;
        }
        .paper-head .school {
          font-size: 8.5pt;
          color: #000;
        }
        .paper-sub {
          font-size: 9pt;
          color: #000;
        }
        .paper-rail {
          margin-top: 4pt;
          gap: 2pt 14pt;
          font-size: 9pt;
          color: #000;
        }
        .paper-fill {
          margin-top: 9pt;
          gap: 6pt 16pt;
          font-size: 9pt;
          color: #000;
        }
        .paper-fill span {
          border-bottom: 0.5pt solid #000;
          padding-bottom: 9pt;
        }

        .paper-body {
          padding: 9pt 0 0;
        }
        .sec {
          margin-bottom: 13pt;
        }

        .pq {
          padding: 3.5pt 0;
          border-bottom: 0;
          gap: 0 10pt;
          break-inside: avoid;
          page-break-inside: avoid;
        }
        .pq-n {
          font-size: 9.5pt;
          color: #000;
          font-weight: 600;
        }
        .pq-m {
          font-size: 9pt;
          color: #000;
          min-width: 2.4em;
          text-align: right;
          font-weight: 700;
        }
        .pq-long {
          padding: 4pt 0;
        }
        .pq-ab {
          color: #000;
        }
        .pq-part {
          gap: 0 10pt;
        }
        .pq-part + .pq-part {
          margin-top: 4pt;
        }
        /* The sheet is a fixed width, so the layout the template chose is used as it
     stands rather than halved for a narrow screen. */
        .pq-opts {
          gap: 1pt 10pt;
          margin-top: 2pt;
          font-size: 9.5pt;
        }
        .pq-opts.is-c4 {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .pq-opts.is-c2 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 2pt 14pt;
        }
        .q-no {
          font-size: 10.5pt;
          color: #000;
        }
        .pq-q {
          margin-bottom: 8pt;
        }
        .q-head {
          gap: 8pt;
          margin-bottom: 2pt;
        }
        .q-marks {
          font-size: 9pt;
          color: #000;
        }
        .q-note {
          font-size: 9pt;
          color: #000;
        }
        .sec-head {
          gap: 8pt;
          margin-bottom: 6pt;
          padding-bottom: 2pt;
          border-bottom: 1pt solid #000;
        }
        .sec-title {
          font-size: 11.5pt;
        }
        .sec-marks {
          font-size: 9pt;
          color: #000;
        }
        .pq-part-block + .pq-part-block {
          margin-top: 12pt;
        }
        .part-head {
          gap: 8pt;
          margin-bottom: 5pt;
          padding-bottom: 1pt;
          border-bottom: 0.5pt solid #666;
        }
        .part-title {
          font-size: 10.5pt;
        }
        .part-marks {
          font-size: 9pt;
          color: #000;
        }
        .part-note {
          margin-top: 1pt;
          font-size: 9pt;
          color: #000;
        }
        .pq-long {
          grid-template-columns: 2.6em minmax(0, 1fr);
          padding: 4pt 0;
        }
        /* One question per block in the key, so a block never splits mid answer. */
        /* One answer never splits across a page, and that is as far as the rule
     goes. Putting break-inside:avoid on the whole question block instead threw
     Q1 and its fifteen answers onto a fresh page and left the first page of the
     key blank, because a block taller than a page cannot be kept together. */
        .key-q {
          margin-bottom: 8pt;
        }

        /* The written portion always starts a fresh page, so a student is never
     turning back and forth between the objective part and a short question.
     A break at the very top of the sheet would leave a blank first page. */
        .sec-break {
          break-before: page;
          page-break-before: always;
        }
        .paper-body > .sec-break:first-child {
          break-before: auto;
          page-break-before: auto;
        }

        /* The key is a separate document. It never shares a page with the paper. */
        .paper-key {
          break-before: page;
          page-break-before: always;
        }
        .keyrow {
          padding: 4pt 0;
          break-inside: avoid;
          page-break-inside: avoid;
        }
        .keybody {
          font-size: 9.5pt;
        }
        .keybody p {
          margin-bottom: 2pt;
        }
        .keypick {
          color: #000;
        }
        .keybody .answer {
          margin-top: 2pt;
          padding: 0 0 0 6pt;
          background: none;
          border: 0;
          border-left: 2pt solid #000;
          border-radius: 0;
        }
        .keybody .answer .eq {
          color: #000;
        }
      }

      /* ==========================================================================
   INTERACTIVE MCQ  (review exercise)
   ========================================================================== */
      .mcq-opts {
        list-style: none;
        margin: var(--space-3) 0 0;
        padding: 0;
        display: grid;
        gap: var(--space-2);
      }
      @media (min-width: 34rem) {
        .mcq-opts {
          grid-template-columns: 1fr 1fr;
        }
      }
      .mcq-opts button {
        width: 100%;
        display: flex;
        gap: var(--space-3);
        align-items: center;
        text-align: left;
        font: inherit;
        font-size: var(--size-300);
        color: var(--text-body);
        cursor: pointer;
        min-height: var(--control-md);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        background: var(--surface-sunken);
        transition:
          background 0.12s ease,
          border-color 0.12s ease;
      }
      .mcq-opts button:hover:not([disabled]) {
        background: var(--sand-300);
      }
      .mcq-k {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid var(--border-strong);
        background: var(--surface-raised);
        font-size: var(--size-200);
        font-weight: 700;
        color: var(--text-secondary);
      }
      .mcq-opts button.right {
        background: var(--primary-tint);
        border-color: var(--primary);
        color: var(--green-800);
        font-weight: 600;
      }
      .mcq-opts button.right .mcq-k {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
      }
      .mcq-opts button.right::after {
        content: "\2713";
        margin-left: auto;
        color: var(--primary);
        font-weight: 700;
      }
      .mcq-opts button.wrong {
        background: #fff0f3;
        border-color: #a52342;
        color: #a52342;
        font-weight: 600;
      }
      .mcq-opts button.wrong .mcq-k {
        background: #a52342;
        border-color: #a52342;
        color: #fff;
      }
      .mcq-opts button.wrong::after {
        content: "\2715";
        margin-left: auto;
        color: #a52342;
        font-weight: 700;
      }
      .mcq-opts button[disabled] {
        cursor: default;
      }
      .mcq-verdict {
        margin: var(--space-3) 0 0;
        font-size: var(--size-300);
        font-weight: 600;
        padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-wrap: wrap;
      }
      .mcq-verdict[hidden] {
        display: none;
      }
      .mcq-verdict.ok {
        background: var(--primary-tint);
        color: var(--green-800);
        border: 1px solid var(--primary-line);
      }
      .mcq-verdict.no {
        background: #fff0f3;
        color: #a52342;
        border: 1px solid #e8bcc7;
      }
      /* Sits on the same line as the verdict, pushed to the right. */
      .mcq-retry {
        margin-left: auto;
        appearance: none;
        background: none;
        font: inherit;
        font-size: var(--size-100);
        font-weight: 600;
        cursor: pointer;
        color: inherit;
        min-height: var(--control-sm);
        padding: 0 var(--space-3);
        border: 1px solid currentColor;
        border-radius: var(--radius-pill);
        opacity: 0.7;
      }
      .mcq-retry:hover {
        opacity: 1;
      }
      details.sol[hidden] {
        display: none;
      }

      /* ==========================================================================
   SEARCH RESULTS  sit above the unit navigation, never inside a panel
   ========================================================================== */
      #results {
        margin: 0 auto;
        padding: var(--space-5) var(--space-4) var(--space-6);
        max-width: calc(var(--measure) + var(--space-8));
      }
      #results[hidden] {
        display: none;
      }
      .res-item a {
        border-radius: var(--radius-md);
      }
      .res-where {
        color: var(--primary);
      }

      .choice.checks label {
        flex: 1 1 9rem;
      }
      .choice input[type="checkbox"] {
        accent-color: var(--primary);
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
      }
      .btn-sm {
        min-height: var(--control-sm);
        font-size: var(--size-100);
        padding: 0 var(--space-4);
        border-radius: var(--radius-pill);
      }
      #lengths[hidden] {
        display: none;
      }

      /* A control that carries a second line: the name, then what it costs or what
   it holds. The second line is the whole point of these boxes, so it is set
   as a block rather than run on after the name. */
      .choice label:has(.gen-ex-name),
      .choice label:has(.gen-note) {
        align-items: flex-start;
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
      }
      .gen-ex-name,
      .choice label > span:has(.gen-note) {
        display: block;
        line-height: var(--leading-tight);
      }
      .gen-ex-n,
      .gen-note {
        display: block;
        margin-top: 2px;
        font-size: var(--size-100);
        font-weight: 400;
        color: var(--text-chrome);
        font-variant-numeric: tabular-nums;
      }
      .choice label:has(input:checked) .gen-ex-n,
      .choice label:has(input:checked) .gen-note {
        color: var(--green-800);
      }
      .mix label > span b {
        font-weight: 600;
        color: var(--text-chrome);
      }

      /* Availability and the plan. The first says what there is to draw from, the
   second says what will come out. Both update as the controls move, so the
   Generate button never has to be pressed to find out. */
      .gen-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-3);
      }
      .gen-avail {
        margin: 0 0 0 auto;
        font-size: var(--size-200);
        color: var(--text-secondary);
      }
      .gen-plan {
        margin: 0 0 var(--space-4);
        padding: var(--space-3) var(--space-4);
        background: var(--primary-tint);
        border: 1px solid var(--primary-line);
        border-radius: var(--radius-md);
        font-size: var(--size-200);
        color: var(--green-800);
      }
      .gen-plan b {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }

      /* The code is a recall control, not a setting, so it sits with the buttons and
   is sized to the five characters it takes. */
      .gen-recall {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-left: auto;
      }
      .gen-recall label {
        font-size: var(--size-100);
        color: var(--text-chrome);
      }
      .gen-code {
        width: 7.5rem;
        min-height: var(--control-md);
        font: inherit;
        font-size: var(--size-300);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 0 var(--space-3);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        background: var(--surface-sunken);
        color: var(--text-body);
      }
      .gen-code::placeholder {
        letter-spacing: 0.12em;
        color: var(--text-chrome);
      }
      .field > .lbl label {
        font: inherit;
        color: inherit;
        cursor: pointer;
      }
      @media (max-width: 32rem) {
        .gen-recall {
          margin-left: 0;
          width: 100%;
        }
        .gen-code {
          flex: 1 1 auto;
          width: auto;
        }
      }

      /* Audit revision: readable math, keyboard access and complete paper codes. */
      /* Flex/grid text must use its actual available width, not a shrink-wrapped
   width that mistakes a radical's overhang for horizontal overflow. */
      .qline > span:last-child,
      .ans > span,
      .mcq-opts button > span:last-child {
        min-width: 0;
        max-width: 100%;
        flex: 1;
      }
      .math-fragment {
        max-width: 100%;
      }
      .defn-body,
      .defn-note,
      .eg,
      .deep-in,
      .swhy,
      .written-body,
      .stem,
      .pq-body,
      .pq-qtext,
      .keybody {
        min-width: 0;
        overflow-wrap: break-word;
      }
      .solution-tools {
        font-size: var(--size-200);
        margin-bottom: var(--space-4);
      }
      .solution-tools a {
        color: var(--primary);
        display: inline-flex;
        align-items: center;
        min-height: 36px;
      }
      .part,
      .defn,
      .deep-section,
      .written {
        scroll-margin-top: calc(var(--sticky-tabs) + var(--sticky-jump) + 56px);
      }
      .gen-recall {
        flex: 1 1 100%;
        flex-wrap: wrap;
        margin-left: 0;
      }
      .gen-code {
        width: 100%;
        font-size: var(--size-200);
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
        text-transform: uppercase;
      }
      .paper-rail span:last-child {
        flex-basis: 100%;
        overflow-wrap: anywhere;
        font-size: var(--size-100);
      }
      .gen-status {
        overflow-wrap: anywhere;
      }
      .math-status {
        background: var(--accent-tint);
        padding: 12px;
        position: relative;
      }
      .math-status[hidden] {
        display: none;
      }
      #math-retry {
        font: inherit;
        color: var(--primary);
        min-height: 36px;
      }

      @media (prefers-reduced-motion: reduce) {
        [role="tablist"] {
          scroll-behavior: auto;
        }
      }
      @media print {
        .solution-tools,
        .math-status {
          display: none !important;
        }
        .katex-display,
        .w-math,
        .smath,
        .qline > span:last-child {
          overflow: visible !important;
        }
        .gen-status {
          display: none !important;
        }
        .paper-rail span:last-child {
          font-size: 7pt;
        }
      }

      @media print {
        [role="tabpanel"][hidden] {
          display: none !important;
        }
        .search,
        .search-help,
        .search-count,
        #results {
          display: none !important;
        }
        body.printing-paper #view-unit {
          display: block !important;
        }
        .pq-opts li {
          break-inside: avoid;
        }
      }
      /* Remove screen-only tail space, which otherwise creates blank last pages. */
      @media print {
        body.printing-paper #panel-generator,
        body.printing-paper .flow-section,
        body.printing-paper #gen-out {
          margin: 0 !important;
          padding: 0 !important;
        }
        .paper-wrap {
          overflow: visible !important;
        }
        .paper {
          overflow: visible !important;
        }
        .paper .pq {
          padding: 2.5pt 0;
        }
        .paper .pq-opts {
          margin-top: 1pt;
          gap: 0.5pt 10pt;
          line-height: 1.25;
        }
        .paper .paper-fill {
          margin-top: 6pt;
        }
      }

      .source-note {
        font-size: var(--size-200);
        padding: 8px 0;
        border-top: 1px solid var(--border);
        color: var(--text-secondary);
      }

      /* Print density: keep the font readable, save repeated gaps instead. */
      @media print {
        .paper .pq {
          padding: 1.25pt 0;
        }
        .paper .pq-opts:not(.is-c4) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .paper .sec-head,
        .paper .part-head,
        .paper .q-head {
          break-after: avoid;
          page-break-after: avoid;
        }
        .paper .keyrow {
          padding: 2.5pt 0;
        }
        .paper .keybody p {
          margin-bottom: 1.5pt;
        }
      }

      /* Reading revision 2. Display equations are centered as complete groups;
   the alignment inside an aligned environment is left to KaTeX. */
      .smath,
      .w-math {
        overflow: visible;
      }
      .math-display {
        display: block;
        position: relative;
        min-width: 0;
        max-width: 100%;
        margin: var(--space-2) 0;
      }
      .w-math .math-display {
        margin: 0;
      }
      .math-scroll {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scroll-behavior: auto;
        -webkit-overflow-scrolling: touch;
      }
      .math-display > .math-scroll {
        padding: 0.2em 0 0.4em;
      }
      .math-display .katex-display {
        margin: 0;
        padding: 0;
        overflow: visible;
        text-align: center;
      }
      .math-display .katex-display > .katex {
        display: block;
        width: max-content;
        min-width: 100%;
        padding: 0 0.2em;
        text-align: center;
      }
      /* An inline equation is an atomic word, not a scrollable sentence. Padding
   covers ink overhang without putting a bar beneath short radicals. */
      .math-inline {
        display: inline-block;
        width: max-content;
        max-width: 100%;
        vertical-align: baseline;
      }
      .math-inline > .math-scroll > .katex {
        display: inline-block;
        padding: 0.08em 0.12em;
        white-space: nowrap;
      }
      .math-enhanced .math-inline:not(.is-overflowing) > .math-scroll {
        overflow: visible;
      }
      .math-enhanced .math-inline.is-overflowing {
        vertical-align: middle;
      }
      /* No-JS fallback keeps the native bar. With JS, only its thumb/track colors
   change: this avoids shifting equations as the bar appears and disappears. */
      .math-enhanced .math-scroll {
        scrollbar-color: transparent transparent;
      }
      .math-enhanced .math-scroll::-webkit-scrollbar {
        height: 6px;
      }
      .math-enhanced .math-scroll::-webkit-scrollbar-track {
        background: transparent;
      }
      .math-enhanced .math-scroll::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 6px;
      }
      .math-enhanced .math-scroll::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
      }
      .math-enhanced .is-overflowing > .math-scroll.is-scrolling,
      .math-enhanced .is-overflowing > .math-scroll:focus-visible {
        scrollbar-color: var(--brown-600) transparent;
      }
      .math-enhanced
        .is-overflowing
        > .math-scroll.is-scrolling::-webkit-scrollbar-thumb,
      .math-enhanced
        .is-overflowing
        > .math-scroll:focus-visible::-webkit-scrollbar-thumb {
        background: var(--brown-600);
      }
      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
      }

      .qblock {
        scroll-margin-top: calc(var(--sticky-tabs) + var(--sticky-jump) + 12px);
      }
      .qn {
        margin: 0;
        line-height: var(--leading-body);
      }
      .release-note {
        font-size: var(--size-100);
        color: var(--text-chrome);
        padding: 0 16px;
        text-align: center;
      }
      @media (forced-colors: active) {
        .math-enhanced .math-scroll {
          scrollbar-color: auto;
        }
      }
      @media print {
        .math-inline,
        .math-display,
        .math-scroll {
          max-width: none !important;
          overflow: visible !important;
        }
        .math-inline {
          width: auto;
        }
        .math-display .katex-display > .katex {
          width: auto;
          min-width: 0;
        }
        .release-note {
          display: none !important;
        }
      }
      /* Scroll-viewports are a screen affordance, not extra boxes on a test paper. */
      @media print {
        .math-inline,
        .math-inline > .math-scroll {
          display: contents !important;
        }
        .math-inline > .math-scroll > .katex {
          display: inline !important;
          padding: 0 !important;
        }
        .math-display > .math-scroll {
          padding: 0 !important;
          outline: 0 !important;
        }
        .math-display .katex-display > .katex {
          padding: 0 !important;
        }
      }

      /* Practice revision 3. Native form controls, concise grouping, mobile first. */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      @media print {
        body.printing-paper .practice-setup,
        body.printing-paper .practice-recall,
        body.printing-paper .paper-actions,
        body.printing-paper #gen-status {
          display: none !important;
        }
        body.printing-paper #key-wrap {
          display: block !important;
        }
        body.printing-paper[data-print-mode="paper"] #key-wrap {
          display: none !important;
        }
        body.printing-paper[data-print-mode="key"] #paper-wrap {
          display: none !important;
        }
        body.printing-paper[data-print-mode="key"] .paper-key {
          break-before: auto !important;
          page-break-before: auto !important;
        }
        body.printing-paper .key-work {
          display: none !important;
        }
        body.printing-paper[data-print-mode="worked"] .key-work {
          display: block !important;
          background: none;
          border: 0;
        }
        body.printing-paper[data-print-mode="worked"] .key-work > summary {
          display: none !important;
        }
        body.printing-paper .key-working {
          display: block !important;
          padding: 4pt 0;
        }
        body.printing-paper .key-working p {
          font-size: 9pt;
          line-height: 1.4;
          margin: 3pt 0;
        }
        body.printing-paper .key-math {
          margin: 5pt 0 9pt;
          break-inside: avoid;
          page-break-inside: avoid;
        }
        body.printing-paper .keyrow {
          break-inside: auto;
          page-break-inside: auto;
        }
        body.printing-paper .key-final {
          color: #000;
          font-size: 9.5pt;
          break-inside: avoid;
          page-break-inside: avoid;
        }
        body.printing-paper .key-rubric {
          font-size: 8.5pt;
          break-inside: avoid;
          page-break-inside: avoid;
        }
        .key-rubric p {
          font-size: 8.5pt;
        }
        body.printing-paper .paper-code-line {
          font-size: 8pt;
          margin: 4pt 0 0;
        }
        body.printing-paper .practice .paper-head {
          padding: 0 0 6pt;
        }
        .practice .paper-body {
          padding: 9pt 0 0;
        }
        body.printing-paper .paper-rail {
          gap: 2pt 12pt;
        }
        body.printing-paper .paper-wrap {
          margin: 0;
        }
      }

      /* Keep an explanation with the equation that follows, without attempting to
   keep an entire multi-page solution together. */
      @media print {
        body.printing-paper .key-working > p {
          break-after: avoid;
          page-break-after: avoid;
        }
        body.printing-paper .key-final {
          break-after: avoid;
          page-break-after: avoid;
        }
      }

      /* Print the answer once above the working. The on-screen repeated answer box
   is helpful after scrolling, but adds no information to a printed key. */
      @media print {
        body.printing-paper .key-working > .answer {
          display: none !important;
        }
        body.printing-paper .key-rubric {
          margin-top: 6pt;
          padding-top: 4pt;
        }
        body.printing-paper .key-rubric ul {
          margin: 3pt 0;
        }
        body.printing-paper .key-rubric li {
          padding: 1.5pt 0;
        }
      }

      /* R4 · Ink / Cobalt. Student-facing navigation and practice workspace.
   Colors are semantic roles. Light separators are decorative, not input outlines. */
      :root {
        --ink: #18243d;
        --muted: #52627b;
        --paper: #ffffff;
        --mist: #f3f6fb;
        --blue: #2855d9;
        --blue-deep: #1e3fa5;
        --blue-tint: #ebf0ff;
        --blue-line: #c4d2fc;
        --violet: #6741a5;
        --violet-tint: #f3eefa;
        --violet-line: #ddd0f0;
        --error: #a52342;
        --error-tint: #fff0f3;
        --success: #176447;
        --success-tint: #eaf7f0;
        --surface-page: var(--mist);
        --surface-raised: var(--paper);
        --surface-sunken: #f8fafd;
        --text-strong: var(--ink);
        --text-body: #25334d;
        --text-secondary: #40516d;
        --text-chrome: var(--muted);
        --border: #dce3ef;
        --border-strong: #79889f;
        --primary: var(--blue);
        --primary-tint: var(--blue-tint);
        --primary-line: var(--blue-line);
        --accent: var(--violet);
        --accent-tint: var(--violet-tint);
        --accent-line: var(--violet-line);
        /* Compatibility aliases for the established reading components. */
        --sand-50: #ffffff;
        --sand-100: #f8fafd;
        --sand-200: #f3f6fb;
        --sand-300: #e6ecf5;
        --sand-400: #79889f;
        --brown-600: #52627b;
        --brown-700: #40516d;
        --brown-800: #25334d;
        --brown-900: #18243d;
        --green-50: #ebf0ff;
        --green-100: #c4d2fc;
        --green-600: #2855d9;
        --green-700: #2447a8;
        --green-800: #18367f;
        --clay-50: #f3eefa;
        --clay-100: #ddd0f0;
        --clay-600: #6741a5;
        --clay-700: #53318c;
        --shadow-sticky: 0 3px 12px rgb(24 36 61 / 7%);
      }
      [hidden] {
        display: none !important;
      }
      a,
      button,
      input,
      select,
      textarea {
        -webkit-tap-highlight-color: transparent;
      }
      button,
      input,
      select,
      textarea {
        font-family: var(--font-ui);
      }
      button {
        touch-action: manipulation;
      }
      button:focus-visible,
      a:focus-visible,
      input:focus-visible,
      textarea:focus-visible,
      select:focus-visible,
      summary:focus-visible {
        outline: 3px solid var(--blue);
        outline-offset: 3px;
      }
      .btn {
        font-size: 0.9375rem;
        min-height: 46px;
        border-radius: 8px;
        line-height: 1.25;
        text-decoration: none;
        padding: 12px 20px;
      }
      .btn-primary {
        background: var(--blue);
        color: var(--text-on-primary);
        box-shadow: none;
      }
      .btn-primary:hover {
        background: var(--blue-deep);
      }
      .btn-ghost {
        background: var(--surface-raised);
        color: var(--text-strong);
        border-color: var(--border-strong);
      }
      .btn-ghost:hover {
        background: var(--mist);
      }
      .ui-icon {
        display: inline-block;
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
      .eyebrow {
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        font-weight: 700;
        line-height: 1.5;
        color: var(--text-chrome);
        margin: 0 0 12px;
      }
      .text-button,
      .quiet-button,
      .icon-button {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 9px 12px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--primary);
        font-size: 0.875rem;
        line-height: 1.4;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
      }
      .text-button {
        padding: 9px 0;
        text-decoration: underline;
        text-underline-offset: 4px;
      }
      .quiet-button {
        color: var(--text-secondary);
      }
      .quiet-button:hover,
      .icon-button:hover {
        background: var(--blue-tint);
        color: var(--primary);
      }
      .text-button:hover {
        color: var(--blue-deep);
      }
      .icon-button {
        width: 44px;
        padding: 10px;
      }
      .subtle {
        font-size: 0.8125rem;
        color: var(--text-chrome);
        line-height: 1.65;
        margin: 12px 0 0;
      }
      /* Neutral reading surfaces and a separate, restrained example accent. */
      .tabs-shell::before {
        background: linear-gradient(to right, var(--surface-page), transparent);
      }
      .tabs-shell::after {
        background: linear-gradient(to left, var(--surface-page), transparent);
      }
      [role="tab"][aria-selected="true"] {
        box-shadow: none;
        background: var(--primary);
      }
      .part,
      .defn,
      .written,
      .understand {
        border-color: var(--border);
      }
      .defn {
        border-left-color: var(--primary);
      }
      .written-head {
        background: var(--surface-sunken);
      }
      .note.watch {
        background: var(--violet-tint);
      }
      .mcq-opts button.right {
        background: var(--success-tint);
        border-color: var(--success);
        color: var(--success);
      }
      .mcq-opts button.right .mcq-k {
        background: var(--success);
        border-color: var(--success);
      }
      .mcq-opts button.right::after {
        color: var(--success);
      }
      .mcq-verdict.ok {
        background: var(--success-tint);
        color: var(--success);
        border-color: var(--success);
      }
      .mcq-opts button.wrong,
      .mcq-verdict.no {
        background: var(--error-tint);
        border-color: var(--error);
        color: var(--error);
      }
      .mcq-opts button.wrong .mcq-k {
        background: var(--error);
        border-color: var(--error);
      }
      .mcq-opts button.wrong::after {
        color: var(--error);
      }
      .release-note {
        font-size: 0.75rem;
        color: var(--text-chrome);
        padding: 20px;
        text-align: center;
        margin: 24px 0 0;
      }
      /* Contents: an available unit is an invitation to study, not an author dashboard. */
      #book-main {
        max-width: 1160px;
        padding: 0 28px;
      }
      .library-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        border-bottom: 1px solid var(--border);
        padding: 24px 0;
      }
      .library-brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text-strong);
        line-height: 1.3;
      }
      .library-brand > .ui-icon {
        width: 34px;
        height: 34px;
        color: var(--blue);
      }
      .brand-by {
        display: block;
        font-size: 0.6875rem;
        font-weight: 500;
        color: var(--text-chrome);
        margin-top: 3px;
        letter-spacing: 0.02em;
      }
      .library-edition {
        font-size: 0.8125rem;
        color: var(--text-chrome);
      }
      .library-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 48px;
        align-items: center;
        padding: 52px 8px 48px;
      }
      .library-hero .eyebrow {
        color: var(--blue);
        font-size: 0.75rem;
      }
      .library-hero h1 {
        font-size: clamp(2.4rem, 4.5vw, 3.75rem);
        letter-spacing: -0.045em;
        font-weight: 650;
        line-height: 1.09;
        color: var(--ink);
        margin: 0;
      }
      .library-hero h1 > span {
        color: var(--blue);
      }
      .library-intro {
        font-size: 1rem;
        line-height: 1.65;
        color: var(--text-secondary);
        margin: 22px 0 0;
      }
      .book-cover {
        width: 196px;
        min-height: 240px;
        justify-self: center;
        background: #213c85;
        color: var(--text-on-primary);
        border-radius: 3px 12px 12px 3px;
        border-left: 9px solid #172f70;
        box-shadow: 10px 12px 0 #e0e7f5;
        display: flex;
        flex-direction: column;
        padding: 22px 22px 18px;
        transform: rotate(3deg);
      }
      .cover-top {
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.16em;
      }
      .cover-grade {
        font-size: 6.5rem;
        line-height: 1.05;
        font-weight: 500;
        letter-spacing: -0.06em;
        margin: 12px 0;
        color: #e0e9ff;
      }
      .cover-foot {
        font-size: 0.8125rem;
        line-height: 1.7;
        border-top: 1px solid #728bcc;
        padding-top: 12px;
      }
      .cover-foot > span {
        display: block;
        font-size: 0.625rem;
        color: #d1ddfb;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .contents-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin: 0 0 22px;
      }
      .contents-heading h2 {
        font-size: 1.4rem;
        font-weight: 650;
        letter-spacing: -0.02em;
      }
      .contents-heading p {
        margin: 5px 0 0;
        font-size: 0.8125rem;
        color: var(--text-chrome);
      }
      .unit-search {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface-raised);
        color: var(--text-chrome);
        width: 260px;
        min-width: 0;
        min-height: 44px;
      }
      .unit-search input {
        width: 100%;
        min-width: 0;
        background: none;
        border: 0;
        font-size: 0.875rem;
        min-height: 44px;
        color: var(--ink);
        padding: 8px 0;
      }
      .unit-search:focus-within {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
      }
      .unit-search input:focus-visible {
        outline: 0;
      }
      .unit-search input::-webkit-search-cancel-button {
        display: none;
      }
      .unit-search button {
        padding: 4px;
        border: 0;
        background: none;
        color: var(--muted);
        min-width: 32px;
        min-height: 36px;
        cursor: pointer;
      }
      .unit-directory {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 36px;
      }
      .unit-feature {
        grid-column: 1/-1;
        display: flex;
        align-items: flex-start;
        gap: 24px;
        padding: 30px;
        background: var(--surface-raised);
        border: 1px solid var(--blue-line);
        border-top: 3px solid var(--blue);
        border-radius: 12px;
        margin-bottom: 24px;
        min-width: 0;
      }
      .feature-index {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--blue);
        width: 38px;
        min-height: 38px;
        background: var(--blue-tint);
        border-radius: 8px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 4px;
      }
      .feature-content {
        flex: 1;
        min-width: 0;
      }
      .feature-status {
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--primary);
        letter-spacing: 0.025em;
        margin: 0 0 8px;
      }
      .feature-status > span {
        font-weight: 400;
        color: var(--text-chrome);
      }
      .feature-content h3 {
        font-size: 1.6rem;
        font-weight: 650;
        letter-spacing: -0.025em;
        margin: 0 0 6px;
      }
      .feature-content > p:not(.feature-status) {
        font-size: 0.875rem;
        color: var(--text-secondary);
        margin: 0;
      }
      .feature-links {
        display: flex;
        gap: 20px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 24px;
      }
      .feature-practice {
        font-size: 0.875rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--blue);
        min-height: 44px;
        text-decoration: none;
      }
      .feature-practice:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
      }
      .feature-symbol {
        align-self: center;
        flex: 0 0 220px;
        color: #a4b5db;
        border-left: 1px solid var(--border);
        padding-left: 35px;
        line-height: 1.4;
      }
      .feature-symbol > span {
        font:
          italic 1.8rem Georgia,
          serif;
        color: #526a9d;
      }
      .feature-symbol > small {
        display: block;
        font-size: 0.5625rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        margin-top: 10px;
        color: #52627b;
      }
      .unit-row {
        display: flex;
        align-items: baseline;
        gap: 20px;
        border-bottom: 1px solid var(--border);
        padding: 23px 8px;
        min-width: 0;
      }
      .unit-index {
        font-size: 0.8125rem;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        color: var(--text-chrome);
        flex: 0 0 26px;
      }
      .unit-row h3 {
        font-size: 0.975rem;
        line-height: 1.45;
        font-weight: 550;
        margin: 0;
        color: var(--text-secondary);
      }
      .unit-row p {
        font-size: 0.75rem;
        color: var(--text-chrome);
        margin: 4px 0 0;
      }
      .unit-empty {
        padding: 24px 0;
        color: var(--text-chrome);
        font-size: 0.9375rem;
      }
      .library-foot {
        display: flex;
        gap: 48px;
        margin: 44px 0 20px;
        padding-top: 22px;
        color: var(--text-chrome);
        font-size: 0.75rem;
        line-height: 1.6;
      }
      .library-foot > span {
        flex-shrink: 0;
        font-weight: 550;
      }
      .library-foot > p {
        margin: 0;
        max-width: 580px;
      }
      /* Practice has its own work surface, but returning to a lesson keeps its measure. */
      @media screen {
        body.practice-mode #main,
        body.practice-mode .masthead > .wrap,
        body.practice-mode .tabs-wrap > .wrap {
          max-width: 1160px;
          padding-inline: 28px;
        }
        body.practice-mode .masthead {
          padding: 24px 0 14px;
        }
        body.practice-mode .unit-title {
          font-size: 1.5rem;
        }
        body.practice-mode #toTop {
          display: none;
        }
        body.practice-mode [role="tabpanel"] {
          padding-bottom: 0;
        }
      }
      .practice {
        font-size: 1rem;
        margin: 0 auto;
        max-width: 1104px;
        min-width: 0;
        padding: 30px 0 0;
      }
      .practice-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin: 0 0 26px;
      }
      .practice-heading .eyebrow {
        margin-bottom: 8px;
      }
      .practice-heading h2 {
        font-size: 2rem;
        font-weight: 650;
        letter-spacing: -0.035em;
      }
      .practice-heading p:not(.eyebrow) {
        font-size: 0.9375rem;
        color: var(--text-chrome);
        line-height: 1.6;
        margin: 8px 0 0;
      }
      .practice-heading > .quiet-button {
        align-self: flex-start;
        margin-top: 24px;
      }
      .practice fieldset {
        min-width: 0;
        border: 0;
        padding: 0;
        margin: 0;
      }
      .mode-field {
        margin-bottom: 26px !important;
      }
      .practice-modes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      .mode-option {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        min-height: 82px;
        padding: 18px;
        background: var(--surface-raised);
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        cursor: pointer;
        line-height: 1.4;
        transition:
          background 0.15s,
          border-color 0.15s;
      }
      .mode-option input {
        margin: 3px 0 0;
        flex: 0 0 auto;
        width: 17px;
        height: 17px;
        accent-color: var(--blue);
      }
      .mode-option strong {
        display: block;
        font-size: 0.9375rem;
        font-weight: 650;
      }
      .mode-option small {
        display: block;
        font-size: 0.75rem;
        margin-top: 5px;
        color: var(--text-chrome);
        font-weight: 400;
      }
      .mode-option:has(input:checked) {
        background: var(--blue-tint);
        border-color: var(--blue);
        box-shadow: inset 0 0 0 1px var(--blue);
      }
      .mode-option:has(input:checked) strong {
        color: var(--blue-deep);
      }
      .mode-option:has(input:focus-visible) {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
      }
      .builder-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 32px;
        align-items: start;
      }
      .builder-fields {
        min-width: 0;
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 28px 30px;
      }
      .practice .builder-group + .builder-group {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid var(--border);
      }
      .practice #scope-fields[hidden] + #unit-pattern {
        margin-top: 0;
        border-top: 0;
        padding-top: 0;
      }
      .practice legend,
      .builder-group > h3 {
        font-size: 0.9375rem;
        font-weight: 650;
        margin: 0 0 18px;
        line-height: 1.5;
        color: var(--ink);
      }
      .practice .source-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 8px;
      }
      .source-option {
        display: flex;
        align-items: center;
        gap: 11px;
        cursor: pointer;
        min-height: 55px;
        padding: 4px 0;
      }
      .source-option input {
        width: 18px;
        height: 18px;
        accent-color: var(--blue);
        margin: 0;
        flex: 0 0 auto;
      }
      .source-option strong {
        display: block;
        font-size: 0.875rem;
        font-weight: 550;
        color: var(--text-body);
        line-height: 1.5;
      }
      .source-option small {
        display: block;
        color: var(--text-chrome);
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.4;
        margin-top: 1px;
      }
      .source-option:has(input:checked) strong {
        color: var(--blue-deep);
      }
      #gen-all {
        margin-top: 6px;
        font-size: 0.75rem;
        min-height: 38px;
      }
      .level-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .level-options label {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 13px;
        min-height: 44px;
        border: 1px solid var(--border-strong);
        border-radius: 7px;
        background: var(--surface-raised);
        font-size: 0.8125rem;
        color: var(--text-secondary);
      }
      .level-options input {
        width: 15px;
        height: 15px;
        accent-color: var(--blue);
        margin: 0;
      }
      .level-options label:has(input:checked) {
        border-color: var(--blue);
        background: var(--blue-tint);
        color: var(--blue-deep);
        font-weight: 600;
      }
      .level-options label:has(input:focus-visible) {
        outline: 3px solid var(--blue);
        outline-offset: 3px;
      }
      .level-group .subtle {
        max-width: 53ch;
      }
      .count-fields {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }
      .count-field label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 10px;
      }
      .count-field label small {
        display: block;
        font-size: 0.6875rem;
        font-weight: 400;
        color: var(--text-chrome);
        margin-top: 3px;
      }
      .stepper {
        display: flex;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface-raised);
        overflow: hidden;
        min-width: 0;
      }
      .stepper input {
        min-width: 0;
        width: 100%;
        text-align: center;
        font: inherit;
        color: var(--ink);
        padding: 6px 0;
        border: 0;
        background: transparent;
        -moz-appearance: textfield;
        appearance: textfield;
        min-height: 44px;
      }
      .stepper input::-webkit-outer-spin-button,
      .stepper input::-webkit-inner-spin-button {
        appearance: none;
        margin: 0;
      }
      .stepper button {
        padding: 0;
        width: 36px;
        flex: 0 0 36px;
        min-height: 44px;
        border: 0;
        background: var(--surface-sunken);
        color: var(--text-secondary);
        font-size: 1.2rem;
        cursor: pointer;
      }
      .stepper button:hover:not(:disabled) {
        color: var(--blue);
        background: var(--blue-tint);
      }
      .stepper button:disabled {
        color: #79889f;
        cursor: default;
      }
      .stepper:focus-within {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
      }
      .stepper input:focus-visible,
      .stepper button:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -3px;
      }
      .stepper:has([aria-invalid="true"]) {
        border-color: var(--error);
      }
      .field-error {
        font-size: 0.75rem;
        line-height: 1.5;
        color: var(--error);
        margin: 6px 0 0;
      }
      .field-error:empty {
        display: none;
      }
      .builder-summary {
        position: sticky;
        top: calc(var(--sticky-tabs) + 24px);
        border-radius: 12px;
        padding: 27px 26px;
        background: #eaf0fc;
        min-width: 0;
      }
      .builder-summary h3 {
        font-size: 1.375rem;
        letter-spacing: -0.025em;
        font-weight: 650;
        margin: 0 0 6px;
      }
      .builder-summary .eyebrow {
        color: #49618f;
        font-size: 0.625rem;
        margin-bottom: 10px;
      }
      .summary-marks {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin: 12px 0 20px;
        color: var(--text-secondary);
      }
      .summary-marks strong {
        font-size: 3.125rem;
        letter-spacing: -0.055em;
        font-weight: 600;
        color: var(--ink);
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
      }
      .summary-marks > span {
        font-size: 0.875rem;
      }
      .summary-counts {
        font-size: 0.8125rem;
        margin: 0;
        padding-bottom: 14px;
        border-bottom: 1px solid #c9d4ec;
      }
      .summary-counts > div {
        display: flex;
        gap: 16px;
        justify-content: space-between;
        margin: 8px 0;
      }
      .summary-counts dt {
        color: var(--text-secondary);
      }
      .summary-counts dd {
        margin: 0;
        color: var(--ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
      }
      .summary-scope,
      .summary-instruction {
        font-size: 0.75rem;
        line-height: 1.6;
        color: var(--text-secondary);
        margin: 14px 0 0;
      }
      .summary-scope {
        font-weight: 600;
      }
      .summary-instruction {
        margin-top: 8px;
      }
      .create-button {
        width: 100%;
        justify-content: space-between;
        margin-top: 22px;
      }
      .summary-foot {
        text-align: center;
        font-size: 0.6875rem;
        color: var(--text-chrome);
        line-height: 1.6;
        margin: 12px 0 0;
      }
      #resume-paper {
        font-size: 0.75rem;
        width: 100%;
        margin-top: 8px;
        text-align: center;
      }
      .test-pattern {
        margin: 20px 0 0;
        font-size: 0.8125rem;
      }
      .test-pattern div {
        margin-bottom: 15px;
      }
      .test-pattern dt {
        font-weight: 600;
      }
      .test-pattern dd {
        margin: 4px 0 0;
        color: var(--text-chrome);
        line-height: 1.5;
      }
      .pattern-note {
        font-size: 0.75rem;
        color: var(--blue-deep);
        line-height: 1.55;
        padding-top: 12px;
        border-top: 1px solid var(--border);
        margin: 18px 0 0;
      }
      .gen-error {
        font-size: 0.8125rem;
        line-height: 1.55;
        color: var(--error);
        background: var(--error-tint);
        border-left: 3px solid var(--error);
        padding: 12px;
        margin: 16px 0 0;
        overflow-wrap: anywhere;
      }
      .practice-fineprint {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        margin: 16px 0 0;
        font-size: 0.75rem;
        color: var(--text-chrome);
      }
      .practice-fineprint > .text-button {
        font-size: 0.75rem;
      }
      .practice-status {
        font-size: 0.8125rem;
        color: var(--blue-deep);
        line-height: 1.6;
        margin: 12px 0 16px;
      }
      .practice-status:empty {
        display: none;
      }
      #gen-status {
        max-width: 840px;
        margin-inline: auto;
      }
      #practice-workspace {
        max-width: 880px;
        margin: 0 auto;
      }
      .workspace-header {
        scroll-margin-top: calc(var(--sticky-tabs) + 14px);
      }
      .workspace-top {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin: 0 0 22px;
      }
      .workspace-top .quiet-button:first-child {
        padding-left: 0;
      }
      .workspace-title {
        display: flex;
        align-items: center;
        gap: 20px;
        justify-content: space-between;
        margin-bottom: 22px;
      }
      .workspace-title h2 {
        font-size: 1.875rem;
        font-weight: 650;
        letter-spacing: -0.035em;
      }
      .workspace-title .eyebrow {
        color: var(--blue);
        margin-bottom: 8px;
      }
      .workspace-title p:not(.eyebrow) {
        font-size: 0.8125rem;
        margin: 10px 0 0;
        color: var(--text-chrome);
        line-height: 1.65;
      }
      .workspace-title p > span {
        margin: 0 6px;
      }
      .workspace-title .text-button {
        white-space: nowrap;
        font-size: 0.75rem;
      }
      .workspace-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--border);
      }
      .paper-view-switch {
        display: flex;
        align-self: stretch;
        gap: 20px;
      }
      .paper-view-switch > button {
        border: 0;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        cursor: pointer;
        color: var(--text-chrome);
        font-size: 0.9375rem;
        font-weight: 550;
        padding: 12px 2px;
        min-height: 50px;
        background: none;
      }
      .paper-view-switch > button[aria-pressed="true"] {
        color: var(--primary);
        border-bottom-color: var(--primary);
        font-weight: 650;
      }
      .workspace-tools {
        display: flex;
        gap: 4px;
      }
      .workspace-tools .quiet-button {
        font-size: 0.8125rem;
      }
      .workspace-footer {
        display: flex;
        align-items: center;
        gap: 20px;
        justify-content: space-between;
        margin-top: 14px;
      }
      .workspace-footer p {
        font-size: 0.75rem;
        color: var(--text-chrome);
        line-height: 1.6;
      }
      .workspace-footer .text-button {
        font-size: 0.75rem;
      }
      .practice .paper-wrap {
        min-width: 0;
        max-width: 100%;
        overflow: visible;
        margin-top: 0;
      }
      .practice .paper {
        border-color: var(--border);
        border-radius: 12px;
        min-width: 0;
      }
      .practice .paper-body {
        padding: 30px;
        min-width: 0;
      }
      .practice .pq-opts li {
        min-width: 0;
      }
      .practice .pq-opts {
        font-size: 0.9375rem;
      }
      .practice .keyrow {
        display: block;
        border-bottom: 1px solid var(--border);
        padding: 22px 0;
      }
      .practice .keyrow:first-child {
        padding-top: 0;
      }
      .keyrow-heading {
        display: flex;
        align-items: baseline;
        gap: 14px;
        line-height: 1.6;
        margin-bottom: 12px;
      }
      .keyrow-heading .keyn {
        color: var(--primary);
        flex: 0 0 auto;
        min-width: 48px;
        font-size: 0.8125rem;
      }
      .key-question {
        font-size: 0.9375rem;
        min-width: 0;
      }
      .practice .key-final {
        font-weight: 550;
        color: var(--blue-deep);
        font-size: 1rem;
        margin: 8px 0;
      }
      .keypick {
        font-size: 0.8125rem;
        font-weight: 600;
      }
      .key-work {
        background: var(--surface-sunken);
        border: 1px solid var(--border);
        border-radius: 8px;
        margin: 12px 0 0;
        min-width: 0;
      }
      .key-work > summary {
        font-size: 0.8125rem;
        font-weight: 600;
        padding: 12px 14px;
        color: var(--primary);
        min-height: 44px;
        cursor: pointer;
      }
      .key-working {
        padding: 4px 16px 16px;
        min-width: 0;
      }
      .key-working p {
        font-size: 0.9375rem;
        line-height: 1.65;
        margin: 12px 0;
      }
      .key-math {
        min-width: 0;
        max-width: 100%;
        margin: 12px 0 18px;
      }
      .key-rubric {
        border-top: 1px solid var(--border);
        margin-top: 18px;
        padding-top: 8px;
      }
      .key-rubric p,
      .key-rubric li {
        font-size: 0.75rem;
        color: var(--text-secondary);
      }
      .key-rubric ul {
        padding: 0;
        list-style: none;
        margin: 12px 0;
      }
      .key-rubric li {
        display: flex;
        gap: 18px;
        justify-content: space-between;
        margin: 6px 0;
        line-height: 1.6;
      }
      .paper-code-line {
        overflow-wrap: anywhere;
        font-family: ui-monospace, monospace;
        font-size: 0.75rem;
      }
      @media screen {
        .practice .paper-head {
          display: none;
        }
        .practice .sec-head {
          border-bottom: 1px solid var(--border);
          padding-bottom: 14px;
        }
        .practice .sec-title {
          font-size: 0.9375rem;
          letter-spacing: 0;
        }
        .practice .sec-marks {
          font-size: 0.8125rem;
          color: var(--text-chrome);
          font-weight: 500;
        }
        .practice .q-note {
          font-size: 0.8125rem;
        }
        .practice .pq {
          font-size: 1rem;
          padding-block: 16px;
        }
        .practice .paper-fill {
          display: none;
        }
      }
      /* Native dialogs: code and print controls appear at their point of use. */
      .dialog-open {
        overflow: hidden;
      }
      .practice-dialog {
        width: calc(100% - 32px);
        max-width: 520px;
        max-height: calc(100dvh - 40px);
        margin: auto;
        padding: 26px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface-raised);
        color: var(--text-body);
        box-shadow: 0 24px 100px rgb(24 36 61 / 18%);
        overflow: auto;
        font-size: 0.9375rem;
        line-height: 1.65;
      }
      .practice-dialog::backdrop {
        background: rgb(19 31 53 / 42%);
      }
      .dialog-head {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;
        margin: 0 0 14px;
      }
      .dialog-head h3 {
        font-size: 1.35rem;
        font-weight: 650;
        margin: 0;
        letter-spacing: -0.025em;
      }
      .dialog-head .icon-button {
        flex-shrink: 0;
        margin-right: -9px;
      }
      .practice-dialog p {
        margin: 12px 0;
      }
      .practice-dialog .subtle {
        font-size: 0.875rem;
      }
      .dialog-label {
        display: block;
        font-size: 0.8125rem;
        font-weight: 600;
        margin: 20px 0 8px;
      }
      .code-field {
        width: 100%;
        min-width: 0;
        padding: 12px;
        font-family: ui-monospace, monospace;
        font-size: 0.9375rem;
        line-height: 1.65;
        color: var(--ink);
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        min-height: 48px;
        resize: vertical;
      }
      .code-field[aria-invalid="true"] {
        border-color: var(--error);
      }
      .dialog-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 22px;
      }
      .print-options {
        border: 0;
        padding: 0;
        margin: 0;
      }
      .print-options > label {
        display: flex;
        gap: 12px;
        align-items: center;
        cursor: pointer;
        min-height: 64px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.9375rem;
      }
      .print-options input {
        width: 18px;
        height: 18px;
        accent-color: var(--primary);
        margin: 0;
        flex: 0 0 auto;
      }
      .print-options strong {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
      }
      .print-options small {
        display: block;
        font-size: 0.8125rem;
        color: var(--text-chrome);
        margin-top: 1px;
      }
      @media (width <= 900px) {
        .builder-grid {
          grid-template-columns: minmax(0, 1fr) 260px;
          gap: 22px;
        }
        .builder-fields {
          padding: 24px;
        }
        .builder-summary {
          padding: 24px 20px;
        }
        .count-fields {
          gap: 10px;
        }
        .stepper button {
          width: 30px;
          flex-basis: 30px;
        }
        .feature-symbol {
          display: none;
        }
        .mode-option {
          padding: 16px 12px;
          gap: 8px;
        }
      }
      @media (width <= 700px) {
        #book-main {
          padding-inline: 20px;
        }
        .library-top {
          padding: 20px 0;
        }
        .library-edition {
          font-size: 0.6875rem;
          max-width: 120px;
          text-align: right;
        }
        .library-hero {
          padding: 36px 0;
          grid-template-columns: minmax(0, 1fr) 108px;
          gap: 16px;
        }
        .library-hero h1 {
          font-size: 2.15rem;
        }
        .library-hero .eyebrow {
          font-size: 0.625rem;
        }
        .book-cover {
          width: 102px;
          min-height: 150px;
          padding: 13px 10px 12px;
          border-left-width: 5px;
          border-radius: 2px 8px 8px 2px;
          box-shadow: 6px 8px 0 #e0e7f5;
        }
        .cover-grade {
          font-size: 3.7rem;
          margin: 12px 0;
        }
        .cover-top {
          font-size: 0.34375rem;
          letter-spacing: 0.1em;
        }
        .cover-foot {
          font-size: 0.625rem;
          padding-top: 8px;
        }
        .cover-foot > span {
          font-size: 0.375rem;
        }
        .library-intro {
          font-size: 0.8125rem;
          margin-top: 16px;
        }
        .library-intro br {
          display: none;
        }
        .contents-heading {
          gap: 16px;
          align-items: flex-start;
          flex-direction: column;
        }
        .unit-search {
          width: 100%;
        }
        .unit-directory {
          grid-template-columns: 1fr;
        }
        .unit-feature {
          padding: 24px 20px;
          gap: 14px;
          margin-bottom: 10px;
        }
        .feature-index {
          width: 30px;
          min-height: 30px;
          border-radius: 6px;
          font-size: 0.75rem;
        }
        .feature-content h3 {
          font-size: 1.25rem;
        }
        .feature-content > p:not(.feature-status) {
          font-size: 0.8125rem;
          line-height: 1.7;
        }
        .feature-links {
          gap: 8px;
          align-items: flex-start;
          flex-direction: column;
          margin-top: 18px;
        }
        .feature-practice {
          font-size: 0.8125rem;
        }
        .unit-row {
          padding: 20px 6px;
        }
        .library-foot {
          display: block;
          margin-top: 28px;
        }
        .library-foot p {
          margin-top: 10px;
        }
        body.practice-mode #main,
        body.practice-mode .masthead > .wrap,
        body.practice-mode .tabs-wrap > .wrap {
          padding-inline: 20px;
        }
        body.practice-mode .masthead {
          padding-top: 18px;
        }
        body.practice-mode .unit-title {
          font-size: 1.3rem;
        }
        .practice {
          padding-top: 22px;
        }
        .practice-heading {
          gap: 12px;
          align-items: flex-start;
          flex-direction: column;
          margin-bottom: 18px;
        }
        .practice-heading .eyebrow {
          display: none;
        }
        .practice-heading h2 {
          font-size: 1.75rem;
        }
        .practice-heading p:not(.eyebrow) {
          font-size: 0.875rem;
          max-width: 36ch;
        }
        .practice-heading > .quiet-button {
          margin: 0;
          padding-left: 0;
          min-height: 38px;
          font-size: 0.8125rem;
        }
        .practice-modes {
          gap: 6px;
        }
        .mode-option {
          flex-direction: column;
          gap: 7px;
          padding: 12px 10px;
          min-height: 82px;
        }
        .mode-option strong {
          font-size: 0.8125rem;
        }
        .mode-option small {
          display: none;
        }
        .mode-option input {
          width: 16px;
          height: 16px;
          margin: 0;
        }
        .mode-field {
          margin-bottom: 18px !important;
        }
        .builder-grid {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
        .builder-fields,
        .builder-summary {
          width: 100%;
        }
        .builder-fields {
          padding: 22px;
        }
        .builder-summary {
          position: static;
          padding: 22px;
        }
        .practice .source-options {
          column-gap: 12px;
        }
        .source-option {
          gap: 8px;
        }
        .source-option strong {
          font-size: 0.8125rem;
        }
        .source-option small {
          font-size: 0.6875rem;
        }
        .practice legend {
          font-size: 0.875rem;
          margin-bottom: 12px;
        }
        .level-options {
          gap: 6px;
        }
        .level-options label {
          padding: 9px 10px;
          font-size: 0.75rem;
          gap: 6px;
        }
        .level-options input {
          width: 14px;
          height: 14px;
        }
        .subtle {
          font-size: 0.75rem;
        }
        .summary-marks {
          margin: 8px 0 14px;
        }
        .summary-marks strong {
          font-size: 2.5rem;
        }
        .builder-summary h3 {
          font-size: 1.2rem;
        }
        .summary-counts {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 14px;
          font-size: 0.75rem;
          padding-bottom: 16px;
        }
        .summary-counts > div {
          display: flex;
          flex-direction: column;
          gap: 4px;
          margin: 0;
        }
        .summary-counts dd {
          font-size: 1.125rem;
          order: -1;
        }
        .summary-scope {
          margin-top: 12px;
        }
        .summary-instruction {
          font-size: 0.75rem;
        }
        .summary-instruction br {
          display: none;
        }
        .create-button {
          margin-top: 16px;
        }
        .summary-foot br {
          display: none;
        }
        .summary-foot {
          font-size: 0.6875rem;
        }
        .practice-fineprint {
          display: block;
          font-size: 0.6875rem;
        }
        .practice-fineprint > .text-button {
          display: flex;
          font-size: 0.6875rem;
        }
        .workspace-top {
          gap: 8px;
          margin-bottom: 16px;
        }
        .workspace-top .quiet-button {
          font-size: 0.8125rem;
          padding-inline: 4px;
        }
        .workspace-title {
          display: block;
          margin-bottom: 12px;
        }
        .workspace-title h2 {
          font-size: 1.6rem;
        }
        .workspace-title p:not(.eyebrow) {
          font-size: 0.75rem;
        }
        .workspace-title .text-button {
          font-size: 0.75rem;
          min-height: 38px;
        }
        .workspace-toolbar {
          gap: 8px;
        }
        .paper-view-switch {
          gap: 14px;
        }
        .paper-view-switch > button {
          font-size: 0.875rem;
        }
        .workspace-tools {
          gap: 0;
        }
        .workspace-tools .quiet-button {
          font-size: 0.75rem;
          padding-inline: 8px;
        }
        .workspace-tools .ui-icon {
          display: none;
        }
        .practice .paper-body {
          padding: 20px 16px;
        }
        .practice .pq {
          grid-template-columns: 1.6em minmax(0, 1fr);
          gap: 0 8px;
        }
        .practice .pq-long {
          grid-template-columns: 2em minmax(0, 1fr);
        }
        .practice .pq-part {
          grid-template-columns: 1.5em minmax(0, 1fr) auto;
          gap: 0 6px;
        }
        .practice .pq-opts {
          gap: 10px;
          font-size: 0.875rem;
        }
        .practice .pq-q {
          margin-bottom: 24px;
        }
        .practice .q-head {
          gap: 8px;
        }
        .keyrow-heading {
          display: block;
        }
        .keyrow-heading .keyn {
          display: block;
          margin-bottom: 8px;
        }
        .key-question {
          font-size: 0.875rem;
        }
        .key-working {
          padding: 0 12px 12px;
        }
        .key-working p {
          font-size: 0.875rem;
        }
        .workspace-footer {
          display: block;
        }
        .workspace-footer p {
          font-size: 0.6875rem;
        }
        .workspace-footer .text-button {
          font-size: 0.75rem;
        }
        .practice-dialog {
          padding: 20px;
        }
        .dialog-head h3 {
          font-size: 1.2rem;
        }
      }
      @media (width <= 370px) {
        #book-main {
          padding-inline: 16px;
        }
        .library-hero {
          grid-template-columns: 1fr;
        }
        .book-cover {
          display: none;
        }
        .library-hero h1 {
          font-size: 2.2rem;
        }
        .unit-feature {
          padding: 22px 16px;
        }
        .feature-index {
          display: none;
        }
        body.practice-mode #main,
        body.practice-mode .masthead > .wrap,
        body.practice-mode .tabs-wrap > .wrap {
          padding-inline: 14px;
        }
        .builder-fields {
          padding: 18px 16px;
        }
        .source-options {
          grid-template-columns: 1fr !important;
        }
        .source-option {
          min-height: 49px;
        }
        .source-option small {
          font-size: 0.75rem;
        }
        .source-option strong {
          font-size: 0.875rem;
        }
        .level-options {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .level-options label {
          flex-direction: column;
          gap: 6px;
          padding: 10px 6px;
          font-size: 0.7rem;
        }
        .count-fields {
          gap: 8px;
        }
        .stepper button {
          width: 25px;
          flex-basis: 25px;
        }
        .stepper input {
          font-size: 0.875rem;
        }
        .workspace-tools .quiet-button {
          padding-inline: 6px;
          font-size: 0.6875rem;
        }
        .paper-view-switch {
          gap: 12px;
        }
        .paper-view-switch > button {
          font-size: 0.8125rem;
        }
      }
      @media (forced-colors: active) {
        .mode-option:has(input:checked),
        .level-options label:has(input:checked) {
          outline: 2px solid Highlight;
          outline-offset: 0;
        }
        .paper-view-switch > button[aria-pressed="true"] {
          border-bottom: 3px solid Highlight;
        }
        .btn-primary {
          border: 1px solid ButtonText;
        }
      }
      @media print {
        body.printing-paper .practice-heading,
        body.printing-paper #practice-setup,
        body.printing-paper .workspace-header,
        body.printing-paper .workspace-footer,
        body.printing-paper .practice-dialog,
        body.printing-paper #gen-status {
          display: none !important;
        }
        body.printing-paper #practice-workspace,
        body.printing-paper #gen-out {
          display: block !important;
          max-width: none !important;
        }
        body.printing-paper #paper-wrap,
        body.printing-paper #key-wrap {
          display: block !important;
          margin: 0;
        }
        body.printing-paper[data-print-mode="paper"] #key-wrap {
          display: none !important;
        }
        body.printing-paper[data-print-mode="key"] #paper-wrap {
          display: none !important;
        }
        body.printing-paper .practice {
          padding: 0;
          margin: 0;
          max-width: none;
        }
        body.printing-paper .practice .paper {
          border: 0;
          border-radius: 0;
        }
        body.printing-paper .practice .paper-body {
          padding: 9pt 0 0;
        }
        body.printing-paper .keyrow-heading {
          display: flex;
          gap: 8pt;
          margin: 0 0 4pt;
          break-after: avoid;
          page-break-after: avoid;
        }
        body.printing-paper .keyrow-heading .keyn {
          min-width: 40pt;
          font-size: 9pt;
          color: black;
        }
        body.printing-paper .key-question {
          font-size: 9pt;
          line-height: 1.4;
          flex: 1;
        }
        body.printing-paper .practice .keyrow {
          padding: 8pt 0;
          display: block;
          border-bottom: 0.5pt solid #bbb;
        }
        body.printing-paper .key-work {
          display: none !important;
        }
        body.printing-paper[data-print-mode="worked"] .key-work {
          display: block !important;
          margin: 4pt 0 0;
          border: 0;
          background: none;
        }
        body.printing-paper[data-print-mode="worked"] .key-work > summary {
          display: none !important;
        }
        body.printing-paper .practice .key-final {
          color: black;
          font-size: 9.5pt;
          margin: 3pt 0;
        }
        body.printing-paper .key-working {
          padding: 0;
        }
        body.printing-paper .key-rubric p,
        body.printing-paper .key-rubric li {
          font-size: 8.5pt;
          color: black;
          line-height: 1.4;
        }
        body.printing-paper .key-rubric {
          margin-top: 6pt;
          padding-top: 4pt;
        }
        body.printing-paper .key-working > p {
          break-after: avoid;
        }
        body.printing-paper .key-working > .answer {
          display: none !important;
        }
        .library-top,
        .book-cover,
        .unit-search,
        .library-foot {
          display: none;
        }
      }

      /* Compact scope summary; the five detailed choices remain one action away. */
      .source-picker {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        text-align: left;
        width: 100%;
        padding: 14px 16px;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface-sunken);
        color: var(--ink);
        cursor: pointer;
        min-height: 66px;
      }
      .source-picker strong {
        display: block;
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.5;
      }
      .source-picker small {
        display: block;
        font-size: 0.75rem;
        color: var(--text-chrome);
        line-height: 1.6;
        margin-top: 2px;
      }
      .source-change {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--primary);
        flex-shrink: 0;
      }
      .source-change .ui-icon {
        width: 17px;
        height: 17px;
      }
      .source-picker:hover {
        background: var(--blue-tint);
      }
      .source-fieldset {
        margin-top: 18px !important;
      }
      .source-shortcuts {
        display: flex;
        gap: 24px;
      }
      #gen-all {
        font-size: 0.8125rem;
        min-height: 44px;
      }
      #gen-none {
        font-size: 0.8125rem;
      }
      .builder-summary .summary-marks {
        margin: 12px 0 16px;
      }
      .builder-summary .summary-instruction {
        margin: 10px 0 0;
      }
      #gen-status {
        font-size: 0.75rem;
      }
      @media (width >= 701px) {
        .builder-summary .summary-marks strong {
          font-size: 2.7rem;
        }
        .builder-summary .summary-instruction br {
          display: none;
        }
        .builder-summary .summary-foot br {
          display: none;
        }
        .builder-summary {
          padding-block: 24px;
        }
      }
      @media (width <= 700px) {
        .builder-summary {
          display: grid;
          grid-template-columns: 1fr;
          gap: 0;
        }
        .builder-summary .eyebrow,
        .builder-summary h3,
        .builder-summary .summary-instruction,
        .summary-foot {
          display: none;
        }
        .builder-summary .summary-marks {
          margin: 0 0 14px;
        }
        .builder-summary .summary-marks strong {
          font-size: 1.8rem;
        }
        .builder-summary .summary-counts {
          font-size: 0.6875rem;
        }
        .builder-summary .summary-counts dd {
          font-size: 1rem;
        }
        .builder-summary .summary-scope {
          font-size: 0.6875rem;
        }
        .source-picker {
          padding: 12px;
          gap: 12px;
        }
        .source-picker strong {
          font-size: 0.875rem;
        }
        .source-picker small {
          font-size: 0.6875rem;
        }
        .source-change {
          font-size: 0.75rem;
        }
        .source-change .ui-icon {
          display: none;
        }
        .practice-dialog .source-options {
          grid-template-columns: 1fr;
        }
        .practice-dialog .source-option {
          min-height: 57px;
        }
        .practice-dialog .source-option small {
          font-size: 0.75rem;
        }
        .practice-dialog .source-option strong {
          font-size: 0.875rem;
        }
      }
      /* Fieldset legends remain text headings, not notches through decorative rules. */
      .practice .builder-group + .builder-group {
        padding-top: 0;
        border-top: 0;
        margin-top: 28px;
      }
      .practice #scope-fields[hidden] + #unit-pattern {
        margin-top: 0;
      }
      @media (width <= 700px) {
        .practice .builder-group + .builder-group {
          margin-top: 24px;
        }
      }
      /* Screen sizes must not override the physical print scale. */
      @media print {
        body.printing-paper .practice .pq-opts {
          font-size: 9.5pt;
        }
        body.printing-paper .practice .keyrow {
          padding: 5pt 0;
        }
        body.printing-paper .keyrow-heading {
          margin-bottom: 2pt;
        }
        body.printing-paper .practice .key-final {
          margin: 2pt 0;
        }
        body.printing-paper .key-math {
          margin: 4pt 0 6pt;
        }
        body.printing-paper .paper-key .paper-head {
          border-bottom-color: #000;
        }
        body.printing-paper .key-working > .key-math:not(:has(~ .key-math)) {
          break-after: avoid;
          page-break-after: avoid;
        }
      }

      /* R5 shared reading system. Page roles may vary in width; type and controls do not. */
      :root {
        --heading-tracking: -0.01em;
        --control-md: 44px;
        --radius-lg: 12px;
        --radius-md: 8px;
      }
      .eyebrow,
      .kicker,
      .defn-tag,
      .eg .lbl,
      .res-where,
      .cover-top,
      .cover-foot > span {
        text-transform: none;
        letter-spacing: 0;
        font-size: var(--size-100);
        font-weight: 600;
        line-height: 1.5;
      }
      .practice-heading h2,
      .workspace-title h2,
      .contents-heading h2 {
        font-size: var(--size-600);
        line-height: var(--leading-tight);
        font-weight: 700;
        letter-spacing: var(--heading-tracking);
      }
      .practice .builder-group > h3,
      .practice legend,
      .builder-summary h3,
      .dialog-head h3 {
        font-size: var(--size-400);
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.4;
      }
      .feature-content h3 {
        font-size: var(--size-600);
        font-weight: 700;
        letter-spacing: var(--heading-tracking);
      }
      .library-hero h1 {
        font-size: clamp(2rem, 4vw, 3rem);
        letter-spacing: -0.02em;
        font-weight: 700;
        line-height: 1.15;
      }
      .library-hero {
        padding-block: 40px;
      }
      .library-intro {
        font-size: var(--size-300);
      }
      .feature-symbol > span {
        font: inherit;
        font-size: 1.5rem;
        color: var(--text-secondary);
      }
      .feature-symbol {
        flex-basis: 205px;
        padding-inline-start: 28px;
      }
      .feature-symbol .katex {
        font-size: 1.1em;
      }
      .library-foot {
        margin-top: 32px;
      }
      .library-foot > span {
        font-weight: 400;
      }
      .feature-content > p:not(.feature-status) {
        font-size: var(--size-200);
      }
      /* Geometry, not a glyph's baseline, centers the icons. */
      .ui-icon {
        display: block;
        vertical-align: initial;
      }
      .icon-button,
      .deep-x,
      #q-clear,
      .unit-search button,
      .stepper button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0;
      }
      .icon-button > .ui-icon,
      #q-clear > svg,
      .unit-search button > .ui-icon {
        display: block;
        margin: 0;
      }
      .deep-x {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        transform: none !important;
      }
      .deep-x .ui-icon {
        width: 18px;
        height: 18px;
        stroke-width: 2;
      }
      .deep[open] .deep-x .icon-vertical,
      .source-disclosure[open] > summary .icon-vertical {
        display: none;
      }
      .stepper .ui-icon {
        width: 16px;
        height: 16px;
        stroke-width: 2;
      }
      .solution-tools a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .solution-tools .ui-icon {
        width: 16px;
        height: 16px;
      }
      /* Inline supplements stay beside the mathematics they explain. */
      details.deep {
        background: var(--surface-raised);
        border-color: var(--border);
      }
      details.deep > summary {
        padding: 16px 24px;
      }
      .deep-t {
        font-size: var(--size-400);
        font-weight: 600;
        color: var(--primary);
      }
      .deep-in {
        border-color: var(--border);
      }
      details.notes > summary,
      details.extra > summary {
        font-size: var(--size-200);
        line-height: 1.5;
        gap: 8px;
        min-height: 44px;
      }
      details.notes > summary::before,
      details.extra > summary::before {
        content: "";
        display: block;
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        margin: 0;
        border-radius: 0;
        color: var(--primary);
        background:
          linear-gradient(currentColor, currentColor) center/10px 2px no-repeat,
          linear-gradient(currentColor, currentColor) center/2px 10px no-repeat;
      }
      details.notes[open] > summary::before,
      details.extra[open] > summary::before {
        content: "";
        background: linear-gradient(currentColor, currentColor) center/10px 2px
          no-repeat;
      }
      .note {
        border: 0;
        border-inline-start: 3px solid var(--border);
        border-radius: 0;
        background: transparent;
        padding: 12px 16px;
      }
      .note.watch {
        background: var(--accent-tint);
        border-color: var(--accent-line);
      }
      .note .lbl {
        font-size: var(--size-200);
        letter-spacing: 0;
        text-transform: none;
      }
      .given-system {
        margin-bottom: 20px;
        border-bottom: 1px solid var(--border);
        padding-bottom: 12px;
      }
      .given-system p {
        margin: 0 0 8px;
        font-size: var(--size-300);
      }
      /* The marker itself aligns with its heading. Wrapped lines align with list text. */
      :is(.defn, .deep-in, .notesin, .extrain, .understand) ul {
        list-style: none;
        padding: 0;
        margin: 8px 0;
      }
      :is(.defn, .deep-in, .notesin, .extrain, .understand) ul > li {
        position: relative;
        padding-inline-start: 1em;
        margin-block: 0 8px;
      }
      :is(.defn, .deep-in, .notesin, .extrain, .understand) ul > li::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 0.67em;
        width: 0.3em;
        height: 0.3em;
        border-radius: 50%;
        background: currentColor;
      }
      :where(.deep-in, .notesin, .extrain, .understand) ol:not(.steps) {
        list-style: none;
        padding: 0;
        counter-reset: content-list;
      }
      :where(.deep-in, .notesin, .extrain, .understand) ol:not(.steps) > li {
        position: relative;
        counter-increment: content-list;
        padding-inline-start: 1.8em;
        margin-bottom: 8px;
      }
      :where(.deep-in, .notesin, .extrain, .understand)
        ol:not(.steps)
        > li::before {
        content: counter(content-list) ".";
        position: absolute;
        inset-inline-start: 0;
        font-variant-numeric: tabular-nums;
      }
      /* One configurable paper, with no redundant quick/custom fork. */
      @media screen {
        body.practice-mode #main,
        body.practice-mode .masthead > .wrap,
        body.practice-mode .tabs-wrap > .wrap {
          max-width: calc(var(--measure) + var(--space-8));
          padding-inline: var(--space-4);
        }
        body.practice-mode .masthead {
          padding: var(--space-4) 0 var(--space-3);
        }
        body.practice-mode .unit-title {
          font-size: var(--size-700);
        }
        .practice {
          max-width: none;
          padding-top: 24px;
          font-size: var(--size-300);
        }
      }
      .practice-heading {
        margin-bottom: 24px;
      }
      .practice-heading > .quiet-button {
        margin-top: 0;
        align-self: center;
        font-size: var(--size-200);
      }
      .practice-modes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .mode-option {
        min-height: 72px;
        padding: 16px;
        border-radius: var(--radius-md);
      }
      .mode-option strong {
        font-size: var(--size-200);
        font-weight: 600;
      }
      .mode-option small {
        font-size: var(--size-100);
      }
      .builder-grid {
        grid-template-columns: minmax(0, 1fr) 246px;
        gap: 24px;
      }
      .builder-fields {
        padding: 24px;
        border-radius: var(--radius-lg);
      }
      .builder-summary {
        background: var(--surface-raised);
        border: 1px solid var(--border);
        padding: 24px;
        border-radius: var(--radius-lg);
      }
      .summary-marks strong {
        font-size: 2.5rem;
        letter-spacing: -0.02em;
      }
      .summary-counts {
        font-size: var(--size-200);
      }
      .summary-scope,
      .summary-instruction {
        font-size: var(--size-100);
      }
      .practice .builder-group + .builder-group {
        margin-top: 24px;
        padding-top: 24px;
      }
      .practice legend {
        margin-bottom: 12px;
      }
      .source-disclosure {
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 0 14px;
        background: var(--surface-sunken);
      }
      .source-disclosure > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        cursor: pointer;
        list-style: none;
        min-height: 64px;
        padding: 12px 0;
      }
      .source-disclosure > summary::-webkit-details-marker {
        display: none;
      }
      .source-disclosure > summary > span {
        min-width: 0;
      }
      .source-disclosure strong {
        display: block;
        font-size: var(--size-200);
        font-weight: 600;
      }
      .source-disclosure small {
        display: block;
        font-size: var(--size-100);
        color: var(--text-secondary);
        margin-top: 3px;
      }
      .source-disclosure .source-options {
        grid-template-columns: 1fr;
        border-top: 1px solid var(--border);
        padding-top: 10px;
      }
      .source-disclosure .source-option {
        min-height: 56px;
      }
      .source-disclosure .source-option strong {
        font-weight: 500;
      }
      .source-disclosure .source-shortcuts {
        border-top: 1px solid var(--border);
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
      }
      .source-disclosure .text-button {
        margin: 0;
        font-size: var(--size-100);
      }
      .level-options label {
        font-size: var(--size-100);
        padding: 10px;
        gap: 6px;
      }
      .level-options {
        gap: 6px;
      }
      .subtle {
        font-size: var(--size-100);
      }
      .count-fields {
        gap: 12px;
      }
      .count-field label {
        font-size: var(--size-200);
      }
      .count-field label small {
        font-size: 0.75rem;
      }
      .stepper button {
        width: 28px;
        flex-basis: 28px;
      }
      .stepper input {
        font-size: var(--size-300);
        min-width: 24px;
      }
      #practice-workspace {
        max-width: none;
      }
      .workspace-title h2 {
        font-size: var(--size-600);
      }
      .workspace-toolbar {
        border-bottom: 0;
        padding: 8px 0;
        gap: 12px;
      }
      .paper-view-switch {
        gap: 3px;
        padding: 3px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface-sunken);
        align-self: center;
      }
      .paper-view-switch > button {
        border: 0;
        border-radius: var(--radius-sm);
        min-height: 40px;
        padding: 8px 16px;
        font-size: var(--size-200);
      }
      .paper-view-switch > button[aria-pressed="true"] {
        background: var(--primary);
        color: #fff;
        font-weight: 600;
      }
      .workspace-title .eyebrow {
        font-size: var(--size-200);
        margin-bottom: 4px;
      }
      .workspace-title p:not(.eyebrow) {
        font-size: var(--size-200);
      }
      .workspace-top {
        margin-bottom: 20px;
      }
      .workspace-footer:empty {
        display: none;
      }
      .key-work > summary {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: var(--size-200);
        padding: 12px 16px;
        min-height: 44px;
      }
      .key-work > summary::-webkit-details-marker {
        display: none;
      }
      .key-work > summary::after {
        content: "Show";
        font-size: var(--size-100);
        font-weight: 400;
        color: var(--text-chrome);
        margin-inline-start: 12px;
      }
      .key-work[open] > summary::after {
        content: "Hide";
      }
      .practice .paper-body {
        padding: 24px;
      }
      .practice .keyrow {
        padding-block: 20px;
      }
      @media (width <= 760px) {
        .builder-grid {
          grid-template-columns: 1fr;
          gap: 20px;
        }
        .builder-summary {
          position: static;
          display: block;
          padding: 20px;
        }
        .builder-summary #gen-plan {
          display: block;
        }
        .summary-counts {
          display: none;
        }
        .summary-marks {
          margin: 12px 0;
        }
        .summary-scope {
          margin-top: 12px;
        }
        .summary-instruction {
          margin-top: 8px;
        }
        .create-button {
          margin-top: 16px;
        }
      }
      @media (width <= 520px) {
        .practice-heading {
          gap: 8px;
          flex-wrap: wrap;
        }
        .practice-heading > .quiet-button {
          padding-left: 0;
          font-size: var(--size-100);
        }
        .practice-modes {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
        }
        .mode-option {
          padding: 12px;
          gap: 8px;
          min-height: 88px;
        }
        .mode-option input {
          width: 16px;
          height: 16px;
        }
        .mode-option small {
          font-size: 0.75rem;
        }
        .mode-option strong {
          font-size: 0.875rem;
        }
        .builder-fields {
          padding: 16px;
        }
        .count-fields {
          gap: 8px;
        }
        .stepper button {
          width: 26px;
          flex-basis: 26px;
        }
        .level-options label {
          flex: 1 1 auto;
          justify-content: center;
        }
        .workspace-toolbar {
          flex-wrap: wrap;
          justify-content: space-between;
        }
        .workspace-tools {
          gap: 0;
        }
        .workspace-tools .quiet-button {
          padding-inline: 8px;
        }
        .paper-view-switch > button {
          padding: 8px 12px;
        }
        .practice .paper-body {
          padding: 16px;
        }
        details.deep > summary {
          padding: 16px;
        }
        .deep-in {
          padding-inline: 16px;
        }
      }
      @media print {
        .source-disclosure,
        .given-system ~ .solution-tools {
          display: none !important;
        }
        body.printing-paper .paper-fill {
          display: none !important;
        }
        body.printing-paper .paper .sec-break {
          break-before: page !important;
          page-break-before: always !important;
        }
        body.printing-paper .paper-body > .sec-break:first-child {
          break-before: auto !important;
          page-break-before: auto !important;
        }
        .paper .key-work > summary::after {
          content: none !important;
        }
        .key-work > summary {
          display: none !important;
        }
        .paper .key-working {
          padding: 0 !important;
        }
        .paper .paper-head .school {
          letter-spacing: 0;
          text-transform: none;
        }
      }
      #practice-setup {
        scroll-margin-top: calc(var(--sticky-tabs) + 20px);
      }
      @media screen {
        .practice .builder-group + .builder-group {
          padding-top: 16px;
          margin-top: 20px;
        }
      }
      @media (width <= 520px) {
        .mode-option small {
          display: block;
          font-size: 0.75rem;
        }
        .level-options label {
          flex: 0 1 auto;
          padding-inline: 8px;
        }
        .mode-option {
          min-height: 102px;
        }
      }
      /* A printed section/part heading is a single block, including its instructions. */
      @media print {
        body.printing-paper .paper .part-head,
        body.printing-paper .paper .sec-head,
        body.printing-paper .paper .q-head {
          break-inside: avoid;
          page-break-inside: avoid;
          break-after: avoid;
          page-break-after: avoid;
        }
      }

      /* R6: reason annotations are deliberately tiny and boxed in the TeX source. */
      details.deep {
        border: 1px solid var(--primary-line);
        border-left: 4px solid var(--primary);
        background: var(--primary-tint);
      }
      details.deep > summary {
        min-height: 76px;
        padding-block: 16px;
      }
      details.deep > summary:hover {
        background: #e0e8ff;
      }
      .deep-t {
        font-size: var(--size-400);
        font-weight: 700;
        color: var(--blue-deep);
      }
      .deep-x {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
      }
      .deep-in {
        border-top-color: var(--primary-line);
      }
      .practice .builder-group + .builder-group {
        padding-top: 0 !important;
        margin-top: 22px !important;
      }
      .practice .builder-group > h3,
      .practice legend {
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
      }
      .practice .test-pattern {
        margin-top: 8px;
      }
      .practice .test-pattern div {
        margin-bottom: 12px;
      }
      .practice .test-pattern dd {
        margin-top: 3px;
      }
      .practice .level-group legend {
        padding-top: 0;
      }
      .practice .level-options {
        margin-top: 0;
      }
      .choices-body {
        display: grid;
        gap: 14px;
        font: var(--size-200)/1.5 var(--font-ui);
      }
      .choice-set-control,
      .attempt-field {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        min-width: 0;
      }
      .choice-set-control label {
        flex: 1;
      }
      .attempt-field label {
        flex: 1 1 9rem;
      }
      .attempt-field span {
        color: var(--text-chrome);
      }
      .choice-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 36px;
        cursor: pointer;
      }
      .choice-toggle input {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--primary);
      }
      .attempt-fields {
        display: grid;
        gap: 10px;
      }
      .attempt-fields[hidden],
      .attempt-field[hidden] {
        display: none;
      }
      .choices-body select,
      .attempt-field input,
      .randomize-row select {
        min-height: 44px;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        background: var(--surface-raised);
        color: var(--text-body);
        font: inherit;
        padding: 7px 10px;
      }
      .attempt-field input {
        width: 68px;
      }
      .choice-set-control select {
        min-width: 6.5rem;
      }
      .summary-times {
        border-top: 1px solid var(--border);
        padding-top: 14px;
        margin-top: 14px;
        font: var(--size-100)/1.5 var(--font-ui);
      }
      .summary-times > span {
        font-weight: 600;
        color: var(--text-chrome);
      }
      .summary-times p {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 4px;
        margin: 8px 0;
      }
      .summary-times b {
        font-weight: 600;
        color: var(--text-strong);
      }
      #practice-workspace .workspace-top {
        padding: 8px 0 4px;
        margin: 0;
      }
      .practice-jump {
        margin: 0;
        box-shadow: none !important;
        padding-block: 6px !important;
        z-index: 30;
      }
      .practice-jump .seg {
        display: flex;
        width: max-content;
        max-width: 100%;
        gap: 2px;
      }
      .practice-jump button {
        border: 0;
        background: transparent;
        color: var(--text-secondary);
        font: 600 var(--size-100)/1.4 var(--font-ui);
        min-height: 36px;
        white-space: nowrap;
        cursor: pointer;
        padding: 6px 14px;
        border-radius: var(--radius-sm);
      }
      .practice-jump button:hover,
      .practice-jump button:focus-visible {
        color: var(--primary);
        background: var(--surface-raised);
      }
      #practice-workspace .paper-wrap {
        margin-top: 16px;
      }
      #practice-workspace [id^="paper-"],
      #key-wrap {
        scroll-margin-top: calc(var(--sticky-tabs) + var(--sticky-jump) + 14px);
      }
      .sec-time {
        font-family: var(--font-ui);
        font-size: var(--size-100);
        font-weight: 400;
        color: var(--text-chrome);
        margin-left: auto;
      }
      .sec-head .sec-marks {
        margin-left: 0;
      }
      .paper-controls {
        padding: 20px 0 8px;
        border-bottom: 1px solid var(--border);
        margin: 0 0 16px;
      }
      .paper-action-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }
      .randomize-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 12px;
        margin-top: 18px;
        font: var(--size-200)/1.5 var(--font-ui);
      }
      .randomize-row > label {
        color: var(--text-chrome);
      }
      .randomize-row select {
        max-width: 100%;
        min-width: 11rem;
        flex: 0 1 auto;
      }
      .randomize-row .btn {
        white-space: nowrap;
      }
      #randomize-status:empty {
        display: none;
      }
      .paper-controls .text-button {
        margin-top: 12px;
      }
      #saved-paper-code {
        overflow-wrap: anywhere;
        word-break: break-all;
        letter-spacing: 0;
        font-size: 0.8rem;
      }
      #gen-code {
        text-transform: none;
        letter-spacing: 0;
        font-size: 0.875rem;
      }
      @media (width <= 520px) {
        .practice-jump button {
          padding: 6px 10px;
        }
        .paper-action-row {
          gap: 8px;
        }
        .paper-action-row .btn {
          padding-inline: 14px;
          flex: 1 1 auto;
        }
        .randomize-row > label {
          flex: 0 0 100%;
          font-size: var(--size-100);
        }
        .randomize-row select {
          width: 100%;
          flex: 1 1 100%;
        }
        .randomize-row .btn {
          width: 100%;
        }
        .sec-head {
          gap: 8px;
        }
        .sec-time {
          margin-left: 0;
          flex: 1 1 100%;
          order: 3;
        }
        .attempt-field label {
          flex-basis: 8rem;
        }
        .summary-times {
          font-size: 0.8125rem;
        }
      }
      @media print {
        body.printing-paper .practice-jump,
        body.printing-paper .paper-controls,
        body.printing-paper .workspace-top {
          display: none !important;
        }
        body.printing-paper #practice-workspace .paper-wrap {
          margin: 0;
        }
        .sec-time {
          font-size: 9pt;
          color: #000;
          margin-left: auto;
          flex: 0 1 auto;
          order: 0;
        }
        .sec-head {
          break-after: avoid;
        }
        .pq-part-block {
          break-inside: auto;
        }
      }
      @media screen {
        .practice .paper-head {
          display: block;
          padding: 20px 24px;
          border-bottom: 1px solid var(--border);
        }
        .practice .paper-head h3 {
          font-size: var(--size-500);
          letter-spacing: var(--heading-tracking);
        }
        .practice .paper-key .paper-head {
          display: block;
        }
        .summary-times {
          border-top: 0;
          padding-top: 0;
        }
        .practice .builder-summary .summary-counts {
          display: block;
        }
      }
      /* Printed options must reserve the full height of fractions and radicals.
   An inline span can paint past its line box; inline-block prevents row overlap. */
      @media print {
        body.printing-paper .practice .pq-opts .katex {
          display: inline-block !important;
          vertical-align: middle;
          padding: 0 !important;
        }
        body.printing-paper .practice .pq-opts {
          row-gap: 3pt;
        }
        body.printing-paper .practice .paper-head {
          padding: 0 0 5pt;
        }
        body.printing-paper .practice .paper-head .paper-rail {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          gap: 3pt 14pt;
          margin-top: 4pt;
        }
        body.printing-paper .practice .paper-head .paper-sub {
          margin: 2pt 0 0;
        }
      }

      /* R6.1: one reading measure; explicit marker/caret positions; quiet blue hints. */
      :root {
        --select-inset: 1rem;
        --reason-blue: #4f6fae;
        --reason-line: #9bb0de;
      }
      #book-main {
        max-width: calc(var(--measure) + var(--space-8));
        padding-inline: var(--space-4);
      }
      .library-hero {
        padding-inline: 0;
        grid-template-columns: minmax(0, 1fr) 196px;
        gap: 32px;
      }
      .unit-feature {
        padding: 24px;
        gap: 20px;
      }
      .feature-symbol {
        flex-basis: 158px;
        padding-inline-start: 20px;
      }
      .feature-symbol > span {
        font-size: 1.25rem;
      }
      .unit-directory {
        column-gap: 24px;
      }
      .note.watch,
      .warn,
      .math-status {
        background: var(--blue-tint);
        border-color: var(--blue-line);
        color: var(--text-body);
      }
      .note.watch .lbl {
        color: var(--blue-deep);
      }
      mark {
        background: var(--blue-line);
        color: var(--ink);
      }
      @keyframes flash {
        0%,
        40% {
          background: var(--blue-tint);
        }
        100% {
          background: transparent;
        }
      }
      #toTop {
        left: var(--back-top-left, calc(100vw - 64px));
        right: auto;
        bottom: max(20px, env(safe-area-inset-bottom));
        box-shadow: 0 2px 10px rgb(24 36 61 / 12%);
      }
      #toTop.corner {
        left: var(--back-top-left, calc(100vw - 64px));
        right: auto;
      }
      .paper-recovery {
        margin: 4px 0 0;
        text-align: right;
      }
      .paper-recovery .text-button {
        font-size: var(--size-100);
      }
      .paper-controls {
        padding-block: 16px;
        margin-bottom: 16px;
      }
      .paper-action-row {
        gap: 10px;
      }
      @media (width <= 700px) {
        .library-hero {
          grid-template-columns: minmax(0, 1fr) 140px;
          gap: 24px;
        }
        .book-cover {
          width: 132px;
          min-height: 184px;
          padding: 16px;
        }
        .cover-grade {
          font-size: 4.5rem;
        }
      }
      @media (width <= 520px) {
        .library-hero {
          grid-template-columns: minmax(0, 1fr) 108px;
          gap: 16px;
        }
        .book-cover {
          width: 96px;
          min-height: 142px;
          padding: 12px;
          border-left-width: 5px;
        }
        .cover-grade {
          font-size: 3.25rem;
        }
        .cover-top,
        .cover-foot {
          font-size: 0.625rem;
        }
        .unit-feature {
          padding: 20px 16px;
        }
      }
      @media (width <= 370px) {
        .library-hero {
          grid-template-columns: 1fr;
        }
        .book-cover {
          display: none;
        }
      }
      @media (forced-colors: active) {
        :is(.defn, .deep-in, .notesin, .extrain, .understand) ul > li::before {
          background: CanvasText;
        }
      }
      @media print {
        #practice-workspace .workspace-top,
        .paper-recovery {
          display: none !important;
        }
        #book-main {
          max-width: none;
        }
      }

      /* R6.2 — persistent setup groups and a single sticky paper return control. */
      .practice #scope-fields .source-options {
        grid-template-columns: 1fr;
        gap: 2px;
      }
      .practice #scope-fields .source-option {
        min-height: 52px;
        padding: 6px 0;
        align-items: flex-start;
      }
      .practice #scope-fields .source-option input {
        margin-top: 4px;
      }
      .practice #scope-fields .source-option strong {
        font-size: var(--size-200);
        font-weight: 500;
      }
      .practice #scope-fields .source-option small {
        font-size: var(--size-100);
      }
      .practice .source-shortcuts {
        gap: 24px;
        margin-top: 6px;
      }
      .practice .source-shortcuts[hidden] {
        display: none;
      }
      .practice .source-shortcuts .text-button {
        margin: 0;
        min-height: 40px;
        font-size: var(--size-100);
      }
      #scope-fixed-note {
        margin: 8px 0 0;
      }
      .practice fieldset.builder-group[hidden] {
        display: none;
      }
      .practice #choices-fields .choices-body {
        padding: 0;
      }
      /* The two-sided inset is measured from the INSIDE of the select's own border.
 * The SVG's stroke reaches both sides of its viewBox; no hidden icon gutter. */
      .select-control {
        --select-inset: 1rem;
        --select-border: 1px;
        --select-caret-width: 1rem;
        position: relative;
        display: inline-block;
        vertical-align: middle;
        min-width: 0;
        max-width: 100%;
        color: var(--text-body);
      }
      .select-control > select {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 44px;
        padding-block: 10px;
        padding-inline-start: var(--select-inset) !important;
        padding-inline-end: calc(
          var(--select-inset) + var(--select-caret-width) + 0.75rem
        ) !important;
        border: var(--select-border) solid var(--border-strong);
        border-radius: var(--radius-sm);
        background-color: var(--surface-raised);
        background-image: none !important;
        font: inherit;
        color: inherit;
        cursor: pointer;
      }
      .select-control > .select-caret {
        display: block;
        position: absolute;
        inset-inline-end: calc(var(--select-inset) + var(--select-border));
        top: 50%;
        transform: translateY(-50%);
        width: var(--select-caret-width);
        height: 0.5625rem;
        pointer-events: none;
        color: var(--text-body);
      }
      .select-control:has(select:disabled) {
        color: var(--text-chrome);
      }
      .select-control:has(select:disabled) > .select-caret {
        color: var(--text-chrome);
      }
      .select-control > select:disabled {
        cursor: default;
      }
      .choice-set-control .select-control {
        width: 7.5rem;
        max-width: 100%;
        flex: 0 0 auto;
      }
      /* Grid siblings share the first row on desktop. The return control sticks
 * within the entire paper workspace, not inside a short toolbar container. */
      #practice-workspace #gen-out {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        align-items: start;
      }
      #gen-out > .paper-return {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        position: sticky;
        top: var(--sticky-tabs);
        z-index: 30;
        padding-block: 6px;
        background: var(--surface-page);
        max-width: 100%;
      }
      .paper-return #gen-edit {
        min-height: 44px;
        padding: 10px 8px 10px 0;
        font-size: var(--size-200);
        line-height: 1.4;
        white-space: nowrap;
        background: var(--surface-page);
        border-radius: var(--radius-sm);
      }
      #practice-workspace .workspace-top {
        grid-column: 2;
        grid-row: 1;
        position: static;
        top: auto;
        z-index: auto;
        display: block;
        padding: 6px 0;
        margin: 0;
        border: 0;
        background: none;
        min-width: 0;
      }
      #gen-out > .paper-wrap,
      #gen-out > .paper-controls,
      #gen-out > .paper-recovery {
        grid-column: 1/-1;
        min-width: 0;
      }
      .workspace-top .randomize-row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0;
        min-width: 0;
        justify-content: flex-end;
      }
      .workspace-top .randomize-row > label.sr-only {
        position: absolute;
      }
      .workspace-top .randomize-row .select-control {
        flex: 1 1 auto;
        width: 11.25rem;
        min-width: 0;
        font: var(--size-200)/1.4 var(--font-ui);
      }
      .workspace-top .randomize-row select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font: inherit;
      }
      .workspace-top .randomize-row .btn {
        flex: 0 0 auto;
        width: auto;
        min-height: 44px;
        padding: 10px 12px;
        white-space: nowrap;
        font-size: var(--size-200);
      }
      .workspace-top .randomize-row .ui-icon {
        width: 18px;
        height: 18px;
      }
      .workspace-top #randomize-status {
        margin: 8px 0 0;
        padding: 8px 12px;
        max-width: 35ch;
        background: var(--blue-tint);
        border: 1px solid var(--blue-line);
        border-radius: var(--radius-sm);
      }
      .workspace-top #randomize-status:empty {
        display: none;
      }
      @media (width <= 850px) {
        #practice-workspace #gen-out {
          grid-template-columns: minmax(0, 1fr);
        }
        #practice-workspace .workspace-top {
          grid-column: 1;
          grid-row: 2;
          padding-block: 4px 10px;
        }
        .workspace-top .randomize-row .select-control {
          width: auto;
          max-width: 19rem;
        }
        .workspace-top .randomize-extra {
          display: none;
        }
        .workspace-top #randomize-status {
          max-width: none;
        }
      }
      @media (forced-colors: active) {
        .select-control > select {
          appearance: auto;
          -webkit-appearance: auto;
          padding-inline-end: var(--select-inset) !important;
        }
        .select-control > .select-caret {
          display: none;
        }
      }
      @media print {
        #practice-workspace #gen-out {
          display: block !important;
        }
        #gen-out > .paper-return,
        #practice-workspace .workspace-top {
          display: none !important;
        }
      }

      /* R7 — Practice uses the book's reading hierarchy, spacing and disclosures.
 * Component rules below replace earlier flat-topic / naked-checkbox layouts. */
      .practice .practice-heading h2 {
        font-size: var(--size-600);
        letter-spacing: var(--heading-tracking, -0.01em);
        font-weight: 700;
      }
      .practice .practice-heading {
        gap: 12px;
        margin-bottom: 20px;
      }
      .practice #scope-fields .source-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
      }
      .practice #scope-fields .source-option {
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        background: var(--surface-raised);
        min-height: 80px;
        padding: 12px;
        gap: 10px;
        align-items: flex-start;
        transition:
          background 0.12s,
          border-color 0.12s;
      }
      .practice #scope-fields .source-option:last-child {
        grid-column: 1/-1;
        min-height: 66px;
      }
      .practice #scope-fields .source-option strong {
        font-size: var(--size-200);
        font-weight: 600;
        line-height: 1.35;
      }
      .practice #scope-fields .source-option small {
        font-size: var(--size-100);
        line-height: 1.45;
        margin-top: 4px;
      }
      .practice #scope-fields .source-option input {
        margin-top: 2px;
        width: 18px;
        height: 18px;
      }
      .practice #scope-fields .source-option:has(input:checked) {
        background: var(--blue-tint);
        border-color: var(--blue-line);
      }
      .practice #scope-fields .source-option:hover {
        border-color: var(--primary);
      }
      .practice #scope-fields .source-option:has(input:focus-visible) {
        outline: 3px solid var(--primary);
        outline-offset: 3px;
      }
      .practice #scope-fields:disabled .source-option {
        cursor: default;
      }
      .practice .source-shortcuts {
        display: flex;
        justify-content: flex-end;
        gap: 20px;
        margin: 8px 0 0;
      }
      .practice .source-shortcuts .text-button {
        font-size: var(--size-100);
        min-height: 36px;
        margin: 0;
      }
      .practice .builder-group + .builder-group {
        border-top: 0;
      }
      .practice .builder-summary .summary-marks {
        margin: 12px 0 16px;
        gap: 8px;
      }
      .practice .builder-summary .summary-marks strong {
        font-size: 1.875rem !important;
        font-weight: 650;
        line-height: 1.2;
        letter-spacing: -0.015em;
      }
      .practice .builder-summary h3 {
        font-size: var(--size-400);
        font-weight: 600;
        letter-spacing: 0;
        margin: 0;
      }
      .practice .builder-summary {
        padding: 20px;
      }
      .practice .summary-counts {
        font-size: var(--size-200);
      }
      .practice .summary-times {
        margin-top: 14px;
        padding-top: 0;
      }
      .practice .summary-counts {
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border);
      }
      .practice .summary-times p {
        margin: 8px 0;
      }
      /* The optional grouping is visible as a deliberate, full-width disclosure. */
      .practice #choices-fields {
        border: 1px solid var(--primary-line);
        border-radius: var(--radius-md);
        background: var(--primary-tint);
        padding: 0 !important;
        overflow: visible;
      }
      .practice #choices-fields[hidden] {
        display: none;
      }
      #choices-fields > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        list-style: none;
        padding: 16px;
        min-height: 72px;
        cursor: pointer;
        color: var(--text-strong);
        border-radius: var(--radius-md);
      }
      #choices-fields > summary::-webkit-details-marker {
        display: none;
      }
      #choices-fields > summary strong {
        display: block;
        font-size: var(--size-400);
        line-height: 1.35;
        font-weight: 600;
      }
      #choices-fields > summary small {
        display: block;
        color: var(--text-secondary);
        font-size: var(--size-100);
        line-height: 1.5;
        margin-top: 4px;
      }
      #choices-fields > summary:hover {
        background: var(--blue-line);
      }
      .choice-disclosure-icon {
        display: grid;
        place-items: center;
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
      }
      .choice-disclosure-icon .ui-icon {
        width: 16px;
        height: 16px;
        display: block;
      }
      #choices-fields[open] .icon-vertical {
        display: none;
      }
      #choices-fields[open] > summary {
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        border-bottom: 1px solid var(--primary-line);
      }
      .practice #choices-fields .choices-body {
        display: grid;
        gap: 18px;
        padding: 18px 16px;
        background: var(--surface-raised);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
      }
      .practice .choices-body .choice-group {
        margin: 0;
        padding: 0;
        border: 0;
      }
      .practice .choice-toggle {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: var(--size-200);
        font-weight: 600;
        line-height: 1.5;
        min-height: 40px;
        margin: 0;
        padding: 6px 0;
        cursor: pointer;
      }
      .choice-toggle input {
        margin: 2px 0 0;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        accent-color: var(--primary);
      }
      .choice-toggle:has(input:disabled) {
        color: var(--text-chrome);
        cursor: default;
      }
      .choice-settings {
        margin: 6px 0 0 28px;
        padding: 10px 0 0 14px;
        border-left: 2px solid var(--primary-line);
        min-width: 0;
      }
      .choice-settings[hidden] {
        display: none !important;
      }
      .choice-settings .choice-set-control {
        justify-content: space-between;
        gap: 8px;
        margin: 0 0 12px;
      }
      .choice-settings .choice-set-control > label {
        flex: 1 1 9rem;
        font-size: var(--size-200);
        line-height: 1.45;
      }
      .choice-settings .select-control {
        width: 7.5rem;
      }
      .choice-settings .subtle {
        margin: 0 0 12px;
        font-size: var(--size-100);
        line-height: 1.5;
      }
      .attempt-fields {
        display: grid;
        gap: 10px;
      }
      .choice-settings .attempt-field,
      .attempt-field.choice-settings {
        font-size: var(--size-200);
        gap: 8px;
        align-items: center;
      }
      .choice-settings .attempt-field label {
        flex: 1 1 6rem;
      }
      .choice-settings input[type="number"] {
        min-height: 44px;
        width: 4rem;
        background: var(--surface-raised);
        font: inherit;
        line-height: 1.4;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        padding: 8px;
      }
      /* Only this full-measure bar is sticky. Randomization is a normal-flow row. */
      #practice-workspace #gen-out {
        display: block;
      }
      #gen-out > .paper-return {
        display: block;
        position: sticky;
        top: var(--sticky-tabs);
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 6px 0;
        background: var(--surface-page);
        border-bottom: 1px solid var(--border);
        z-index: 30;
        justify-self: stretch;
      }
      .paper-return #gen-edit {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        padding: 10px 12px;
        min-height: 44px;
        white-space: normal;
        background: var(--surface-page);
        font-size: var(--size-200);
      }
      .paper-return #gen-edit:hover {
        background: var(--blue-tint);
      }
      #practice-workspace .workspace-top {
        display: block;
        position: static;
        padding: 12px 0 0;
        margin: 0;
        border: 0;
      }
      .workspace-top .randomize-row {
        justify-content: flex-end;
        flex-wrap: wrap;
      }
      .workspace-top .randomize-row .select-control {
        flex: 0 1 12rem;
        width: 12rem;
        max-width: 100%;
      }
      #gen-out > .paper-controls {
        border: 0;
        padding: 16px 0 0;
        margin: 0 0 20px;
      }
      /* The section header replaces a large cover/header followed by repeated rules. */
      .practice .exam-paper {
        overflow: visible;
      }
      .practice .exam-paper > .paper-body {
        padding: 0;
      }
      .exam-paper .sec {
        margin: 0;
        padding: 24px;
      }
      .exam-paper .sec + .sec {
        border-top: 1px solid var(--border);
      }
      .exam-header {
        text-align: left;
        margin: 0 0 22px;
      }
      .exam-heading-line {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }
      .exam-course {
        font-size: var(--size-100);
        color: var(--text-secondary);
        margin: 0 0 4px;
        line-height: 1.45;
      }
      .exam-header h3 {
        font-size: var(--size-400);
        line-height: 1.4;
        font-weight: 650;
        letter-spacing: 0;
        margin: 0;
      }
      .exam-kind {
        flex: 0 0 auto;
        font-size: var(--size-100);
        color: var(--text-chrome);
        line-height: 1.45;
        padding-top: 2px;
      }
      .exam-section-line {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-top: 16px;
      }
      .exam-section-line h4 {
        font-size: var(--size-500);
        line-height: 1.3;
        font-weight: 700;
        color: var(--ink);
        margin: 0;
      }
      .exam-metrics {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px 18px;
        color: var(--text-secondary);
        font-size: var(--size-100);
        line-height: 1.5;
      }
      .exam-metrics b {
        font-weight: 600;
        color: var(--text-strong);
        font-variant-numeric: tabular-nums;
      }
      .exam-identity {
        display: grid;
        grid-template-columns: 2fr 1.15fr 1fr;
        gap: 20px;
        margin-top: 20px;
        font-size: var(--size-100);
        line-height: 1.5;
        color: var(--text-secondary);
      }
      .exam-identity > span {
        display: flex;
        align-items: baseline;
        gap: 8px;
        white-space: nowrap;
        min-width: 0;
      }
      .exam-identity .identity-line {
        display: block;
        border-bottom: 1px solid var(--border-strong);
        min-width: 32px;
        flex: 1 1 auto;
        height: 1.4em;
      }
      .exam-paper .part-head {
        border: 0;
        padding: 0;
        margin-bottom: 14px;
        gap: 6px 12px;
      }
      .exam-paper .part-title {
        font-size: var(--size-300);
        letter-spacing: 0;
        font-weight: 650;
      }
      .exam-paper .part-note {
        color: var(--text-body);
        line-height: 1.55;
      }
      .exam-paper .q-note {
        font-size: var(--size-300);
        font-weight: 600;
        color: var(--text-strong);
        line-height: 1.55;
      }
      .exam-paper .q-head {
        gap: 8px 12px;
        margin-bottom: 12px;
      }
      .exam-paper .q-marks {
        font-size: var(--size-100);
      }
      .exam-paper .pq-q + .pq-q {
        margin-top: 24px;
      }
      .exam-paper .pq-qtext,
      .exam-paper .pq-body {
        line-height: 1.65;
      }
      .exam-paper .pq-long {
        border: 0;
      }
      /* Answer key: overview answers first, expandable working beside each answer. */
      .practice .answer-sheet {
        border: 1px solid var(--border);
        background: var(--surface-raised);
        border-radius: var(--radius-lg);
        overflow: visible;
        padding: 24px;
      }
      .answer-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 24px;
      }
      .answer-heading h3 {
        font-size: var(--size-500);
        font-weight: 650;
        margin: 0;
        letter-spacing: 0;
      }
      .answer-heading p {
        font-size: var(--size-100);
        color: var(--text-chrome);
        margin: 6px 0 0;
      }
      .answer-heading .text-button {
        font-size: var(--size-100);
        margin: 0;
      }
      .answer-group + .answer-group {
        margin-top: 28px;
      }
      .answer-group-heading {
        margin: 0 0 12px;
      }
      .answer-group-heading h4 {
        font-size: var(--size-300);
        margin: 0;
        font-weight: 650;
        color: var(--primary);
      }
      .answer-group-heading h4 > span {
        color: var(--text-strong);
        margin-left: 8px;
      }
      .answer-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        align-items: start;
      }
      .answer-stack {
        display: grid;
        gap: 10px;
      }
      .answer-item {
        min-width: 0;
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        overflow: hidden;
      }
      .answer-item > summary {
        display: grid;
        grid-template-columns: 5.25rem minmax(0, 1fr) auto;
        gap: 10px;
        align-items: baseline;
        list-style: none;
        cursor: pointer;
        min-height: 60px;
        padding: 14px 16px;
      }
      .answer-item > summary::-webkit-details-marker {
        display: none;
      }
      .answer-item > summary:hover {
        background: var(--surface-sunken);
      }
      .answer-item[open] > summary {
        background: var(--primary-tint);
        border-bottom: 1px solid var(--primary-line);
      }
      .answer-ref {
        font-size: var(--size-100);
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
      }
      .answer-result {
        display: flex;
        align-items: baseline;
        gap: 10px;
        min-width: 0;
        font-size: var(--size-300);
        line-height: 1.6;
        color: var(--text-strong);
      }
      .answer-value {
        display: block;
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .answer-letter {
        background: var(--primary-tint);
        color: var(--primary);
        border: 1px solid var(--primary-line);
        display: inline-grid;
        place-items: center;
        min-width: 28px;
        height: 28px;
        flex: 0 0 28px;
        border-radius: var(--radius-xs);
        font: 600 var(--size-200)/1 var(--font-ui);
      }
      .answer-reveal {
        display: flex;
        gap: 8px;
        align-items: center;
        font-size: var(--size-100);
        color: var(--primary);
        white-space: nowrap;
      }
      .answer-reveal .ui-icon {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        display: block;
      }
      .answer-item[open] .answer-reveal .ui-icon {
        transform: rotate(180deg);
      }
      .answer-mcq > summary {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 6px;
        padding: 12px;
      }
      .answer-mcq .answer-result {
        grid-column: 1/-1;
        grid-row: 2;
        font-size: var(--size-200);
      }
      .answer-mcq .answer-ref {
        grid-column: 1;
        grid-row: 1;
      }
      .answer-mcq .answer-reveal {
        grid-column: 2;
        grid-row: 1;
      }
      .answer-mcq .answer-reveal > span {
        display: none;
      }
      .answer-grid .answer-item[open] {
        grid-column: 1/-1;
      }
      .answer-grid .answer-item[open] > summary {
        grid-template-columns: 5.25rem minmax(0, 1fr) auto;
        align-items: baseline;
      }
      .answer-grid .answer-item[open] .answer-result {
        grid-column: 2;
        grid-row: 1;
      }
      .answer-grid .answer-item[open] .answer-reveal {
        grid-column: 3;
      }
      .answer-detail {
        padding: 18px 20px;
        min-width: 0;
      }
      .answer-question {
        font-size: var(--size-300);
        line-height: 1.6;
        margin: 0 0 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border);
      }
      .answer-question-label {
        display: block;
        font-size: var(--size-100);
        font-weight: 600;
        color: var(--text-chrome);
        margin-bottom: 6px;
      }
      .answer-detail .key-working {
        padding: 0;
      }
      .answer-detail .key-working p {
        font-size: var(--size-300);
        line-height: 1.6;
      }
      .answer-detail .key-working > .answer {
        display: none;
      }
      .answer-marking {
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
      }
      .answer-marking h6 {
        font-size: var(--size-200);
        font-weight: 600;
        color: var(--text-strong);
        margin: 0 0 10px;
        display: flex;
        justify-content: space-between;
        gap: 12px;
      }
      .answer-marking h6 > span {
        color: var(--text-secondary);
        font-weight: 400;
        white-space: nowrap;
      }
      .answer-marking ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .answer-marking li {
        display: flex;
        gap: 20px;
        justify-content: space-between;
        padding: 4px 0;
        font-size: var(--size-200);
        line-height: 1.5;
      }
      .answer-marking p {
        font-size: var(--size-100);
        color: var(--text-chrome);
        margin: 12px 0 0;
      }
      /* Compact codes do not pretend to encode all the options in six digits. */
      .save-number-row,
      .recall-entry {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
      }
      #saved-paper-code.short-paper-number,
      #gen-code.short-paper-number {
        width: 8.5rem;
        flex: 0 1 8.5rem;
        min-width: 0;
        letter-spacing: 0.12em;
        font: 500 1.125rem/1.5 var(--font-ui);
        padding: 12px 16px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
      }
      #saved-paper-code.short-paper-number {
        background: var(--surface-sunken);
      }
      .practice-dialog .subtle {
        font-size: var(--size-100);
        line-height: 1.55;
      }
      @media (width <= 760px) {
        .practice .builder-summary {
          position: static;
        }
        .practice .builder-summary #gen-plan {
          display: block;
        }
        .answer-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (width <= 520px) {
        .practice #scope-fields .source-option {
          padding: 10px;
          gap: 8px;
          min-height: 92px;
        }
        .practice #scope-fields .source-option strong {
          font-size: 0.875rem;
        }
        .practice #scope-fields .source-option small {
          font-size: 0.75rem;
        }
        .practice #scope-fields .source-option input {
          width: 16px;
          height: 16px;
          flex-basis: 16px;
        }
        .practice #scope-fields .source-option:last-child {
          min-height: 64px;
        }
        .practice #choices-fields > summary {
          padding: 14px;
          gap: 10px;
        }
        #choices-fields > summary strong {
          font-size: var(--size-300);
        }
        .practice #choices-fields .choices-body {
          padding: 16px 14px;
        }
        .choice-settings {
          margin-left: 8px;
          padding-left: 12px;
        }
        .choice-toggle {
          font-size: 0.875rem !important;
        }
        .practice .practice-heading {
          flex-wrap: wrap;
        }
        .practice-heading > .quiet-button {
          padding: 0;
          font-size: var(--size-100);
        }
        .workspace-top .randomize-row {
          flex-wrap: nowrap;
        }
        .workspace-top .randomize-row .select-control {
          flex: 1 1 auto;
          width: auto;
          max-width: none;
        }
        .workspace-top .randomize-row .btn {
          padding-inline: 10px;
        }
        .exam-paper .sec {
          padding: 18px 16px;
        }
        .exam-header {
          margin-bottom: 18px;
        }
        .exam-kind {
          display: none;
        }
        .exam-section-line {
          align-items: flex-start;
          flex-wrap: wrap;
          margin-top: 14px;
          gap: 8px;
        }
        .exam-section-line h4 {
          font-size: var(--size-400);
        }
        .exam-metrics {
          justify-content: flex-start;
          font-size: var(--size-100);
          gap: 6px 12px;
        }
        .exam-identity {
          grid-template-columns: 1fr 1fr;
          gap: 12px 16px;
          margin-top: 16px;
        }
        .exam-identity .identity-name {
          grid-column: 1/-1;
        }
        .exam-header h3 {
          font-size: var(--size-300);
        }
        .exam-paper .q-marks {
          width: 100%;
          margin-left: 0;
          padding-left: 2.5rem;
        }
        .exam-paper .q-note {
          flex-basis: calc(100% - 3rem);
          font-size: 0.9375rem;
        }
        .exam-paper .pq {
          gap: 0 8px;
        }
        .exam-paper .pq-n {
          font-size: 0.875rem;
        }
        .practice .answer-sheet {
          padding: 18px 16px;
        }
        .answer-heading {
          align-items: flex-start;
          flex-wrap: wrap;
          margin-bottom: 20px;
        }
        .answer-heading h3 {
          font-size: var(--size-400);
        }
        .answer-item > summary,
        .answer-grid .answer-item[open] > summary {
          grid-template-columns: minmax(0, 1fr) auto;
          padding: 12px;
          gap: 8px;
        }
        .answer-item .answer-ref,
        .answer-grid .answer-item[open] .answer-ref {
          grid-column: 1;
          grid-row: 1;
        }
        .answer-item .answer-result,
        .answer-grid .answer-item[open] .answer-result {
          grid-column: 1/-1;
          grid-row: 2;
        }
        .answer-item .answer-reveal,
        .answer-grid .answer-item[open] .answer-reveal {
          grid-column: 2;
          grid-row: 1;
        }
        .answer-reveal > span {
          display: none;
        }
        .answer-detail {
          padding: 16px 12px;
        }
        .answer-result {
          font-size: 0.9375rem;
        }
        .recall-entry,
        .save-number-row {
          flex-wrap: wrap;
        }
      }
      @media (width <= 360px) {
        .practice #scope-fields .source-option {
          padding: 9px;
          gap: 6px;
        }
        .practice #scope-fields .source-option strong {
          font-size: 0.8125rem;
        }
        .answer-grid {
          grid-template-columns: 1fr;
        }
      }
      @media print {
        body.printing-paper #gen-out > .paper-return,
        body.printing-paper .answer-heading button {
          display: none !important;
        }
        body.printing-paper .practice .exam-paper {
          border: 0;
          background: #fff;
          overflow: visible;
        }
        body.printing-paper .practice .exam-paper > .paper-body {
          padding: 0 !important;
        }
        body.printing-paper .exam-paper .sec {
          padding: 0;
          margin: 0;
          border: 0;
        }
        body.printing-paper .exam-header {
          margin: 0 0 12pt;
          break-inside: avoid;
          break-after: avoid;
        }
        body.printing-paper .exam-heading-line {
          gap: 10pt;
        }
        body.printing-paper .exam-course {
          font-size: 9pt;
          color: #000;
          margin: 0 0 3pt;
        }
        body.printing-paper .exam-header h3 {
          font-size: 12pt;
          line-height: 1.3;
          color: #000;
        }
        body.printing-paper .exam-kind {
          display: block;
          font-size: 9pt;
          color: #000;
        }
        body.printing-paper .exam-section-line {
          margin-top: 9pt;
          gap: 10pt;
          align-items: baseline;
        }
        body.printing-paper .exam-section-line h4 {
          font-size: 12pt;
          color: #000;
          margin: 0;
        }
        body.printing-paper .exam-metrics {
          font-size: 9pt;
          color: #000;
          gap: 6pt 14pt;
        }
        body.printing-paper .exam-metrics b {
          color: #000;
        }
        body.printing-paper .exam-identity {
          display: grid !important;
          grid-template-columns: 2fr 1.15fr 1fr;
          gap: 15pt;
          margin-top: 12pt;
          font-size: 9pt;
          color: #000;
        }
        body.printing-paper .exam-identity .identity-name {
          grid-column: auto;
        }
        body.printing-paper .exam-identity .identity-line {
          height: 1em;
          border-bottom: 0.5pt solid #555;
        }
        body.printing-paper .exam-paper .part-head {
          border: 0;
          margin-bottom: 7pt;
          gap: 3pt 10pt;
          padding: 0;
          break-inside: avoid;
          break-after: avoid;
        }
        body.printing-paper .exam-paper .part-title {
          font-size: 10.5pt;
          color: #000;
        }
        body.printing-paper .exam-paper .part-note {
          font-size: 9pt;
          color: #000;
          line-height: 1.4;
          margin: 3pt 0 0;
        }
        body.printing-paper .exam-paper .q-head {
          margin-bottom: 5pt;
          gap: 8pt;
          break-inside: avoid;
          break-after: avoid;
        }
        body.printing-paper .exam-paper .q-note {
          font-size: 10pt;
          line-height: 1.4;
          font-weight: 600;
          color: #000;
        }
        body.printing-paper .exam-paper .q-marks {
          width: auto;
          margin-left: auto;
          padding: 0;
          font-size: 9pt;
        }
        body.printing-paper .exam-paper .pq-q + .pq-q {
          margin-top: 10pt;
        }
        body.printing-paper .exam-paper .pq-body,
        body.printing-paper .exam-paper .pq-qtext {
          line-height: 1.4;
        }
        body.printing-paper .exam-paper .pq-long {
          border: 0;
        }
        body.printing-paper .practice .answer-sheet {
          border: 0;
          border-radius: 0;
          padding: 0;
          color: #000;
        }
        body.printing-paper .answer-heading {
          margin: 0 0 12pt;
          display: block;
          break-inside: avoid;
          break-after: avoid;
        }
        body.printing-paper .answer-heading h3 {
          font-size: 14pt;
          color: #000;
        }
        body.printing-paper .answer-heading p {
          font-size: 9pt;
          color: #000;
        }
        body.printing-paper .answer-group {
          break-inside: auto;
          margin-top: 12pt;
        }
        body.printing-paper .answer-group-heading {
          break-after: avoid;
          break-inside: avoid;
          margin-bottom: 6pt;
        }
        body.printing-paper .answer-group-heading h4,
        body.printing-paper .answer-group-heading h4 > span {
          font-size: 10pt;
          color: #000;
        }
        body.printing-paper .answer-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 6pt;
        }
        body.printing-paper .answer-stack {
          gap: 5pt;
        }
        body.printing-paper .answer-item {
          border: 0;
          border-radius: 0;
          background: none;
          break-inside: avoid;
          overflow: visible;
        }
        body.printing-paper .answer-item > summary {
          padding: 4pt 0 !important;
          min-height: 0;
          background: none !important;
          border: 0 !important;
          cursor: default;
          break-inside: avoid;
          break-after: auto;
          grid-template-columns: 4.5em minmax(0, 1fr);
          gap: 4pt;
        }
        body.printing-paper .answer-item .answer-ref {
          grid-column: 1 !important;
          grid-row: 1 !important;
          font-size: 8.5pt;
          color: #000;
        }
        body.printing-paper .answer-item .answer-result {
          grid-column: 2 !important;
          grid-row: 1 !important;
          font-size: 9.5pt;
          color: #000;
          gap: 6pt;
          line-height: 1.5;
        }
        body.printing-paper .answer-item .answer-reveal {
          display: none !important;
        }
        body.printing-paper .answer-letter {
          background: none;
          border: 0;
          min-width: 0;
          height: auto;
          flex: 0 0 auto;
          font-size: 9pt;
          color: #000;
        }
        body.printing-paper .answer-detail {
          display: none !important;
        }
        body.printing-paper[data-print-mode="worked"] .answer-grid {
          display: block;
        }
        body.printing-paper[data-print-mode="worked"] .answer-item {
          display: block;
          break-inside: auto;
          margin-bottom: 12pt;
        }
        body.printing-paper[data-print-mode="worked"] .answer-item > summary {
          break-after: avoid;
        }
        body.printing-paper[data-print-mode="worked"] .answer-detail {
          display: block !important;
          padding: 4pt 0 0;
        }
        body.printing-paper .answer-question {
          font-size: 9.5pt;
          padding: 0;
          border: 0;
          margin: 0 0 7pt;
          break-after: avoid;
          break-inside: avoid;
        }
        body.printing-paper .answer-question-label {
          font-size: 8pt;
          margin-bottom: 2pt;
          color: #000;
        }
        body.printing-paper .answer-detail .key-working {
          padding: 0;
        }
        body.printing-paper .answer-detail .key-working p {
          font-size: 9.5pt;
          line-height: 1.4;
          margin: 4pt 0;
        }
        body.printing-paper .answer-marking {
          margin-top: 8pt;
          padding-top: 0;
          border: 0;
        }
        body.printing-paper .answer-marking h6 {
          font-size: 9pt;
          margin: 0 0 3pt;
          break-after: avoid;
        }
        body.printing-paper .answer-marking li,
        body.printing-paper .answer-marking p {
          font-size: 8.5pt;
          color: #000;
          padding: 1pt 0;
          margin: 0;
        }
        body.printing-paper .answer-marking li {
          break-inside: avoid;
        }
      }
      /* Reset old summary-card mobile reordering: the label/value pairing is stable. */
      .practice .builder-summary h3 {
        display: block;
      }
      .practice .builder-summary .summary-counts {
        display: block;
        font-size: var(--size-200);
      }
      .practice .builder-summary .summary-counts > div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 12px;
        margin: 8px 0;
      }
      .practice .builder-summary .summary-counts dd {
        order: 0;
        font-size: inherit;
        text-align: right;
      }
      @media (width <= 520px) {
        #long-attempt-field {
          display: grid;
          grid-template-columns: 4rem minmax(0, 1fr);
          gap: 8px;
        }
        #long-attempt-field > label {
          grid-column: 1/-1;
        }
        .practice .builder-summary .summary-counts {
          font-size: 0.9375rem;
        }
      }

      /* R7.1: one book measure, a full-viewport masthead rule, and rendered MCQs. */
      #book-main {
        max-width: calc(var(--measure) + var(--space-8));
        padding-inline: var(--space-4);
      }
      .library-masthead {
        border-bottom: 1px solid var(--border);
        background: var(--surface-page);
      }
      .library-masthead > .library-top.wrap {
        max-width: calc(var(--measure) + var(--space-8));
        width: 100%;
        padding: 24px var(--space-4);
        border-bottom: 0;
      }
      .exam-paper-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
        flex: 0 0 auto;
      }
      .exam-total {
        font-size: var(--size-200);
        color: var(--text-secondary);
        white-space: nowrap;
      }
      .exam-total b {
        font-size: 1em;
        color: var(--text-strong);
        font-weight: 700;
        margin-inline-start: 5px;
      }
      /* No empty third grid column: only a label and its question body are present. */
      .practice .exam-paper .pq:not(.pq-long) {
        grid-template-columns: var(--question-screen-gutter, 1.9em) minmax(
            0,
            1fr
          );
      }
      .practice .paper .pq-opts[data-option-layout] {
        display: grid;
        grid-template-columns: var(
          --mcq-screen-columns,
          repeat(4, minmax(0, 1fr))
        );
        column-gap: 20px;
        row-gap: 12px;
        line-height: 1.55;
        margin-top: 12px;
        padding: 0;
        list-style: none;
      }
      .practice .paper .pq-opts[data-option-layout] > li {
        grid-column: span var(--mcq-screen-span, 2);
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        list-style: none;
        align-self: start;
      }
      .practice .paper .pq-option {
        display: flex;
        gap: 0.45em;
        align-items: baseline;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        vertical-align: top;
      }
      .practice .paper .pq-option > .pq-k {
        flex: none;
        margin: 0;
        padding: 0;
        line-height: inherit;
      }
      .practice .paper .pq-option-text {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: break-word;
      }
      /* Preserve native math scrolling only for an indivisible expression that cannot
 * fit even one half-row on a narrow display. Never crop, shrink, or use 3+1. */
      .practice .paper .pq-opts.is-c4 .pq-option {
        white-space: nowrap;
      }
      .practice .paper .pq-opts.mcq-measuring {
        grid-template-columns: repeat(4, max-content) !important;
      }
      .practice .paper .pq-opts.mcq-measuring > li {
        grid-column: span 1 !important;
      }
      .practice .paper .pq-opts.mcq-measuring .pq-option-text {
        flex: none !important;
        min-width: max-content !important;
      }
      .practice .paper .pq-opts.mcq-measuring .pq-option,
      .practice .paper .pq-opts.mcq-measuring .pq-option-text {
        white-space: nowrap !important;
        max-width: none !important;
        width: max-content !important;
      }
      .practice .paper .pq-opts.mcq-measuring .math-inline,
      .practice .paper .pq-opts.mcq-measuring .math-scroll {
        max-width: none !important;
        width: auto !important;
        overflow: visible !important;
      }
      /* The print probe is private, inert and excluded from all page content. These
 * physical dimensions also drive the actual A4 print rules immediately below. */
      .mcq-print-probe {
        position: fixed;
        left: -20000px;
        top: 0;
        width: 184mm;
        visibility: hidden;
        pointer-events: none;
        font-family: var(--font-ui);
        font-size: 10.5pt;
        line-height: 1.4;
      }
      .mcq-print-probe .paper {
        width: 184mm;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        font-family: var(--font-ui);
        font-size: 10.5pt;
        line-height: 1.4;
      }
      .mcq-print-probe .pq {
        display: grid;
        grid-template-columns: var(--question-print-gutter, 1.9em) minmax(
            0,
            1fr
          );
        gap: 0 10pt;
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 10.5pt;
      }
      .practice.mcq-print-probe .paper .pq-opts[data-option-layout] {
        font-size: 9.5pt;
        column-gap: 14pt;
        row-gap: 5pt;
        line-height: 1.5;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mcq-print-probe .math-inline,
      .mcq-print-probe .math-scroll {
        display: contents !important;
      }
      .mcq-print-probe .pq-n {
        font-size: 9.5pt;
        font-weight: 600;
      }
      .mcq-print-probe .print-label-measure {
        display: inline-block;
        position: absolute;
        width: max-content;
        white-space: nowrap;
      }
      .mcq-print-probe .katex {
        display: inline-block !important;
        vertical-align: middle;
        padding: 0 !important;
      }
      @media (width <= 520px) {
        .library-masthead > .library-top.wrap {
          padding-block: 20px;
        }
        .exam-paper-meta {
          gap: 3px;
        }
        .exam-total {
          font-size: var(--size-100);
        }
        .practice .paper .pq-opts[data-option-layout] {
          column-gap: 12px;
          row-gap: 12px;
        }
      }
      @media print {
        @page {
          size: A4 portrait;
          margin: 16mm 13mm 16mm;
        }
        .mcq-print-probe {
          display: none !important;
        }
        body.printing-paper .library-masthead {
          display: none !important;
        }
        body.printing-paper .exam-paper-meta {
          gap: 3pt;
        }
        body.printing-paper .exam-total {
          font-size: 9.5pt;
          color: #000;
        }
        body.printing-paper .exam-total b {
          color: #000;
        }
        body.printing-paper .exam-paper .pq:not(.pq-long) {
          grid-template-columns: var(--question-print-gutter, 1.9em) minmax(
              0,
              1fr
            );
          gap: 0 10pt;
          font-size: 10.5pt;
        }
        body.printing-paper .practice .paper .pq-opts[data-option-layout] {
          grid-template-columns: var(
            --mcq-print-columns,
            repeat(4, minmax(0, 1fr))
          );
          font-size: 9.5pt;
          column-gap: 14pt;
          row-gap: 5pt;
          line-height: 1.5;
          margin-top: 4pt;
          break-inside: avoid;
          page-break-inside: avoid;
        }
        body.printing-paper .practice .paper .pq-opts[data-option-layout] > li {
          grid-column: span var(--mcq-print-span, 2);
        }
        body.printing-paper .practice .paper .pq-opts .pq-option {
          white-space: normal;
        }
        body.printing-paper
          .practice
          .paper
          .pq-opts[data-print-columns="4"]
          .pq-option {
          white-space: nowrap;
        }
      }

      /* R7.2: keep the two requested control groups aligned; no new sticky layer. */
      #practice-workspace .workspace-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 20px;
        padding: 12px 0 0;
      }
      .workspace-top .randomize-row {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: minmax(9rem, 12rem) auto;
        align-items: center;
        gap: 8px;
        margin: 0;
        min-width: 0;
      }
      .workspace-top .randomize-row .select-control {
        display: block;
        height: 44px;
        width: 100%;
        max-width: none;
        min-width: 0;
      }
      .workspace-top .randomize-row .btn {
        height: 44px;
        min-height: 44px;
        margin: 0;
        padding-block: 0;
      }
      .workspace-top .randomize-row select {
        display: block;
        margin: 0;
        height: 44px;
        min-height: 44px;
      }
      .workspace-top .paper-recovery {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        min-width: 0;
        margin: 0;
        padding: 0;
      }
      .workspace-top .paper-recovery .text-button {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin: 0;
        padding: 0 8px;
        line-height: 1.35;
        text-align: left;
      }
      .workspace-top #randomize-status {
        grid-column: 1/-1;
        justify-self: end;
        max-width: none;
        margin: 0;
      }
      .practice #scope-fields .source-shortcuts {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        margin: 8px 0 0;
        padding: 0;
      }
      .practice #scope-fields .source-shortcuts > .text-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        margin: 0;
        padding: 0 10px;
        font-size: var(--size-100);
        line-height: 1.25;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        text-decoration: none;
      }
      .practice #scope-fields .source-shortcuts > .text-button:hover {
        background: var(--blue-tint);
        text-decoration: none;
      }
      @media (width <= 700px) {
        #practice-workspace .workspace-top {
          grid-template-columns: minmax(0, 1fr);
          gap: 6px;
        }
        .workspace-top .randomize-row {
          grid-column: 1;
          grid-row: 1;
          width: 100%;
          grid-template-columns: minmax(0, 1fr) auto;
        }
        .workspace-top .paper-recovery {
          grid-column: 1;
          grid-row: 2;
        }
        .workspace-top .paper-recovery .text-button {
          min-height: 36px;
          padding: 0;
        }
        .workspace-top #randomize-status {
          grid-column: 1;
          grid-row: 3;
          justify-self: stretch;
        }
      }

      /* ==========================================================================
   R8 FINAL-CANDIDATE RESPONSIVE REFINEMENTS
   ========================================================================== */
      /* Q instructions and their mark arithmetic are one reading unit. The mark
   expression is encountered after the instruction: if it fits on the last
   line it sits at the far right; otherwise it drops to its own right-aligned
   line. This avoids a left-floating orphan on narrow phones. */
      .exam-paper .q-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        column-gap: 12px;
        row-gap: 0;
      }
      .exam-paper .q-note {
        display: flow-root;
        min-width: 0;
        margin: 0;
        flex: none;
      }
      .exam-paper .q-marks {
        float: inline-end;
        width: auto;
        margin: 0 0 0 14px;
        padding: 0;
        text-align: right;
        white-space: nowrap;
        color: var(--primary);
      }

      /* The Practice title and saved-paper action remain a single header on phones.
   The action is deliberately compact instead of becoming a centered second
   heading. */
      @media (width <= 700px) {
        .practice .practice-heading {
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
        }
        .practice .practice-heading > div {
          min-width: 0;
        }
        .practice .practice-heading > .quiet-button {
          flex: 0 0 auto;
          align-self: center;
          margin: 0 0 0 auto;
          padding: 4px 2px;
          white-space: nowrap;
          font-size: clamp(0.75rem, 2.8vw, 0.8125rem);
        }
        .practice .practice-heading > .quiet-button .ui-icon {
          width: 18px;
          height: 18px;
        }
      }

      /* Three counters share a common control baseline even when “Short questions”
   needs two lines on a phone. */
      @media (width <= 520px) {
        .practice .count-field {
          display: flex;
          flex-direction: column;
          min-width: 0;
        }
        .practice .count-field > label {
          min-height: 4.25rem;
          margin-bottom: 8px;
        }
        .practice .count-field > .stepper {
          margin-top: 0;
        }
      }
      @media (width <= 340px) {
        .practice .count-field > label {
          min-height: 4.5rem;
          font-size: 0.875rem;
        }
        .practice .count-field > label small {
          font-size: 0.6875rem;
        }
      }

      /* The later mobile rule from r7 intentionally made marks full-width, but the
   new flow-root/float behavior above supersedes it. */
      @media (width <= 520px) {
        .exam-paper .q-marks {
          width: auto;
          margin-left: 14px;
          padding-left: 0;
        }
        .exam-paper .q-note {
          flex-basis: auto;
        }
      }

      /* Consistent tap rhythm for the two small heading actions. */
      .practice .practice-heading > .quiet-button,
      .practice .source-shortcuts > .text-button {
        line-height: 1.35;
      }

      /* R12: one spacing contract for introduced calculation stages in lessons/keys.
   No backgrounds, extra labels, or global alignment column are added. */
      .working-stage {
        min-width: 0;
        max-width: 100%;
        margin: 0;
      }
      .working-stage + .working-stage {
        margin-top: 1.25rem;
      }
      .working-stage > .w-say {
        margin: 0 0 0.5rem;
        line-height: var(--leading-body);
      }
      .working-stage > .w-say:last-child {
        margin-bottom: 0;
      }
      .working-stage > .w-math,
      .working-stage > .key-math {
        margin: 0;
        padding-block: 0.25rem;
        min-width: 0;
        max-width: 100%;
      }
      .working-stage .katex-display {
        margin: 0;
      }
      @media print {
        .working-stage + .working-stage {
          margin-top: 9pt;
        }
        .working-stage > .w-say {
          margin: 0 0 3pt;
          break-after: avoid;
          page-break-after: avoid;
          orphans: 2;
          widows: 2;
        }
        .working-stage > .w-math,
        .working-stage > .key-math {
          margin: 0 !important;
          padding: 2pt 0;
          break-inside: avoid;
          page-break-inside: avoid;
        }
        .working-stage .katex-display {
          margin: 0 !important;
        }
      }