/* Science landing page: hero banner, story rows, book modal.
   Tokens only — see static/css/core/theme.css. Hero uses the approved house
   style (--cream/--paper/--mint/--tangerine/--gold, Bricolage/Space Mono —
   theme.css ~line 158) rather than the site's general --color-* palette,
   matching courses-house-style.css's treatment.

   The gradient hero banner, badge pill, and certificate card are shared with
   mathhistory-landing.js's hero — see landing-hero-shared.css (linked before
   this file in science/templates/science/index.html), which is the single
   source for .sl-hero-wrap/.sl-hero/.sl-badge*/.sl-disp/.sl-slide-title/
   .sl-cert*. Only this file's carousel-specific layer (multi-slide stage,
   dots, per-slide-type colour overrides on the gradient, and the .sl-cert
   entrance choreography, which needs the carousel's is-active toggling to
   trigger from) lives here. */

/* Bold gradient background means every slide needs light-on-dark text
   instead of the light-hero dark-on-cream text used elsewhere on the page —
   scoped overrides here rather than duplicating each slide's markup.
   (.sl-hero .sl-slide-title p and .sl-hero .sl-disp itself are in the
   shared file; these remaining slide types are carousel-only.) */
.sl-hero .sl-discovery-text p,
.sl-hero .sl-slide-trail p,
.sl-hero .sl-badges-center p,
.sl-hero .sl-slide-quiz p,
.sl-hero .sl-slide-books p,
.sl-hero .sl-slide-narrator p {
    color: rgba(255, 255, 255, 0.85);
}

.sl-hero .sl-narrator-blurb {
    color: rgba(255, 255, 255, 0.8);
}

.sl-hero .sl-narrator-name {
    color: #fff;
}

.sl-hero .sl-discovery-photo .sl-scrim {
    background: linear-gradient(90deg, transparent 60%, var(--teal-deep));
}

.sl-hero .sl-slide-discovery.is-reverse .sl-discovery-photo .sl-scrim {
    background: linear-gradient(-90deg, transparent 60%, var(--teal-deep));
}

.sl-hero .sl-progress-pill,
.sl-hero .sl-lang-toggle button {
    background: rgba(255, 255, 255, 0.85);
}

.sl-hero .sl-quiz-type {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
}

.sl-hero .sl-quiz-type-q {
    color: #fff;
}

.sl-hero .sl-quiz-type-label {
    color: #fff;
}

.sl-hero .sl-quiz-option {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
}

.sl-hero .sl-quiz-option.is-correct {
    background: rgba(16, 185, 129, 0.32);
    border-color: #fff;
    color: #fff;
}

.sl-hero .sl-quiz-order-row,
.sl-hero .sl-quiz-match-row {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
}

.sl-hero .sl-quiz-match-name {
    color: #fff;
}

.sl-hero .sl-quiz-match-name small {
    color: rgba(255, 255, 255, 0.7);
}

.sl-hero .sl-quiz-timeline-track {
    background: rgba(255, 255, 255, 0.35);
}

.sl-hero .sl-quiz-timeline-dot {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.sl-hero .sl-quiz-timeline-label {
    color: rgba(255, 255, 255, 0.75);
}

.sl-hero .sl-quiz-timeline-tick.is-correct .sl-quiz-timeline-label {
    color: #fff;
}

.sl-hero .sl-trail-node {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
}

.sl-hero .sl-trail-line {
    background: rgba(255, 255, 255, 0.35);
}

.sl-hero .sl-trail-labels {
    color: rgba(255, 255, 255, 0.8);
}

.sl-progress-pill {
    font-family: var(--jm-font-mono);
    font-size: 0.875rem;
    color: var(--teal-deep);
    background: var(--mint);
    border: 1px solid var(--line);
    padding: 0.375rem 0.8125rem;
    border-radius: 999px;
    cursor: pointer;
}

.sl-lang-toggle {
    display: flex;
    font-family: var(--jm-font-mono);
    font-size: 0.8125rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}

.sl-lang-toggle button {
    border: none;
    background: var(--mint);
    color: var(--teal-deep);
    padding: 0.375rem 0.6875rem;
    cursor: pointer;
}

.sl-lang-toggle button.is-active {
    background: var(--teal);
    color: #fff;
}

.sl-progress-drop {
    position: absolute;
    top: 60px;
    right: 26px;
    width: 230px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 0.875rem 1rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 6;
}

.sl-progress-drop.is-shown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sl-progress-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.sl-progress-bar-bg {
    height: 6px;
    border-radius: 3px;
    background: var(--mint2);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.sl-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--tangerine));
}

.sl-progress-story-quiz {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--tangerine);
    text-align: right;
    margin: -0.375rem 0 0.75rem;
}

.sl-progress-gold {
    color: var(--gold);
    font-weight: 700;
}

.sl-progress-empty {
    font-size: 0.9375rem;
    color: var(--muted);
    text-align: center;
    padding: 0.25rem 0 0.75rem;
}

.sl-progress-empty a {
    color: var(--teal-deep);
    font-weight: 700;
}

.sl-progress-link {
    display: block;
    text-align: center;
    font-family: var(--jm-font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    color: var(--teal-deep);
    background: var(--mint);
    border-top: 1px solid var(--line);
    margin: 0 -1rem -0.875rem;
    padding: 0.625rem 1rem;
    text-decoration: none;
    border-radius: 0 0 12px 12px;
}

.sl-progress-link:hover {
    background: var(--mint2);
    color: var(--teal-deep);
}

/* .sl-hero-stage / .sl-hero-slide (the carousel stage + crossfading slide
   wrapper) moved to landing-hero-shared.css 2026-07-12 — pure structural/
   animation mechanics with zero science-specific content, and mathhistory's
   hero now uses the exact same carousel (see mathhistory-landing.js). Kept
   out of this file so both apps' stage/slide/dots/arrows stay one
   definition instead of two copies drifting apart. */

/* .sl-badge*, .sl-disp, .sl-slide-title (+ .sl-cert-group/.sl-title-text/h1/p/
   .sl-slide-title-sub) all moved to landing-hero-shared.css -- shared with
   mathhistory's hero, see the file header comment above. */

/* slide: discovery (photo + text), mirrorable via .is-reverse */
.sl-slide-discovery {
    display: flex;
    height: 100%;
}

.sl-slide-discovery.is-reverse {
    flex-direction: row-reverse;
}

.sl-discovery-photo {
    width: 42%;
    background-size: cover;
    background-position: center 20%;
    position: relative;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.12);
}

.sl-discovery-photo.sl-badge-tangerine { box-shadow: inset 0 0 60px rgba(255, 107, 74, 0.45); }
.sl-discovery-photo.sl-badge-gold { box-shadow: inset 0 0 60px rgba(255, 176, 32, 0.45); }
.sl-discovery-photo.sl-badge-teal { box-shadow: inset 0 0 60px rgba(18, 181, 166, 0.45); }
.sl-discovery-photo.sl-badge-cyan { box-shadow: inset 0 0 60px rgba(34, 211, 238, 0.45); }

.sl-discovery-photo .sl-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, var(--paper));
}

.sl-slide-discovery.is-reverse .sl-discovery-photo .sl-scrim {
    background: linear-gradient(-90deg, transparent 60%, var(--paper));
}

.sl-discovery-photo-label {
    position: absolute;
    left: 16px;
    bottom: 16px;
    font-family: var(--jm-font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: rgba(14, 42, 40, 0.6);
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
}

.sl-slide-discovery.is-reverse .sl-discovery-photo-label {
    left: auto;
    right: 16px;
}

.sl-discovery-text {
    width: 58%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.25rem 2.75rem;
}

.sl-slide-discovery.is-reverse .sl-discovery-text {
    align-items: flex-end;
    text-align: right;
}

.sl-discovery-text h2 {
    font-size: 1.6875rem;
    margin: 0.625rem 0 0.75rem;
    max-width: 420px;
}

.sl-discovery-text p {
    font-size: 1rem;
    color: var(--muted);
    max-width: 420px;
    line-height: 1.55;
    margin: 0;
}

/* slide: trail (path diagram) */
.sl-slide-trail {
    padding: 2.125rem 2.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sl-slide-trail h2 {
    font-size: 1.5rem;
    margin: 0.875rem 0 0.25rem;
}

.sl-slide-trail p {
    color: var(--muted);
    font-size: 1rem;
    margin: 0;
    max-width: 420px;
}

.sl-trail-path {
    display: flex;
    align-items: center;
    margin: 1.625rem 0 0.5rem;
}

.sl-trail-node {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mint2);
    border: 2px solid var(--line);
    flex-shrink: 0;
}

.sl-trail-node.is-done {
    background: var(--teal);
    border-color: var(--teal-deep);
}

.sl-trail-node.is-current {
    background: var(--gold);
    border-color: #e09000;
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 5px rgba(255, 176, 32, 0.25);
}

.sl-trail-node.is-yours {
    background: var(--tangerine);
    border-color: #d9502e;
}

.sl-trail-line {
    flex: 1;
    height: 3px;
    background: var(--line);
    margin: 0 -2px;
}

.sl-trail-line.is-done {
    background: var(--teal);
}

.sl-trail-labels {
    display: flex;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--muted);
    font-family: var(--jm-font-mono);
}

.sl-trail-labels span {
    flex: 1;
    text-align: center;
}

.sl-trail-labels span:first-child {
    text-align: left;
}

.sl-trail-labels span:last-child {
    text-align: right;
}

/* slide: badges (orbit) */
.sl-slide-badges {
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-badges-center {
    text-align: center;
    z-index: 2;
}

.sl-badges-center h2 {
    font-size: 1.625rem;
    margin: 0.875rem 0 0.375rem;
}

.sl-badges-center p {
    color: var(--muted);
    font-size: 1rem;
    margin: 0;
}

/* Certificate mockup box/typography (.sl-cert, .sl-cert-seal/title/name/
   story/for/date) is in landing-hero-shared.css now -- shared static resting
   state (opacity:1, no transform), which is exactly what mathhistory's
   carousel-less hero needs. Everything below is an ADDITIVE layer, scoped
   under .sl-hero-slide (which only exists in this carousel), overriding the
   shared resting state with an entrance choreography: fans in from
   off-screen from whichever side the group sits on when the slide becomes
   active (with a slight overshoot via the bezier), each card at its own
   angle, staggered by --wi (set per-cert from the loop index). */
.sl-hero-slide .sl-cert {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    transition-delay: calc(var(--wi) * 110ms);
}

.sl-hero-slide .sl-cert.from-left:nth-child(1) { --rot: -8deg; }
.sl-hero-slide .sl-cert.from-left:nth-child(2) { --rot: -5deg; }
.sl-hero-slide .sl-cert.from-left:nth-child(3) { --rot: -2deg; }
.sl-hero-slide .sl-cert.from-left { transform: translateX(-70px) scale(0.6) rotate(var(--rot, -4deg)); }

.sl-hero-slide .sl-cert.from-right:nth-child(1) { --rot: 2deg; }
.sl-hero-slide .sl-cert.from-right:nth-child(2) { --rot: 5deg; }
.sl-hero-slide .sl-cert.from-right:nth-child(3) { --rot: 8deg; }
.sl-hero-slide .sl-cert.from-right { transform: translateX(70px) scale(0.6) rotate(var(--rot, 4deg)); }

.sl-hero-slide.is-active .sl-cert {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(var(--rot, 0deg));
}

.sl-hero-slide.is-active .sl-cert:hover {
    transform: translateX(0) scale(1.08) rotate(0deg);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.32);
    z-index: 3;
}

/* Real medal design: metallic circle (radial gradient + shine highlight)
   with two ribbon tails, instead of a flat gradient disc. Fans in with a
   staggered pop (--wi set per-medal from the loop index). */
.sl-medal {
    position: absolute;
    width: 124px;
    height: 124px;
    opacity: 0;
    transform: scale(0.35) translateY(24px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--wi) * 100ms);
}

.sl-hero-slide.is-active .sl-medal {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.sl-medal-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, var(--ca), var(--cb) 72%);
    border: 3px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32), inset 0 -6px 10px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sl-medal-shine {
    position: absolute;
    top: 8%;
    left: 16%;
    width: 46%;
    height: 30%;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    filter: blur(4px);
    transform: rotate(-20deg);
}

.sl-medal-icon {
    position: relative;
    font-size: 2.75rem;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.sl-medal-ribbon {
    position: absolute;
    bottom: -18px;
    width: 26px;
    height: 44px;
    background: var(--ribbon);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

.sl-medal-ribbon-l {
    left: 27px;
    transform: rotate(-14deg);
}

.sl-medal-ribbon-r {
    right: 27px;
    transform: rotate(14deg);
}

.sl-medal.is-locked .sl-medal-circle {
    background: #dfe3e6;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 0 0 2px dashed rgba(255, 255, 255, 0.6);
}

.sl-medal.is-locked .sl-medal-shine {
    display: none;
}

.sl-medal.is-locked .sl-medal-icon {
    font-size: 1.625rem;
    opacity: 0.6;
    filter: none;
}

.sl-medal.is-locked .sl-medal-ribbon {
    background: #c3c9cd;
}

/* Locked medals render smaller than earned ones — visually de-emphasised
   ("not yet earned") and small enough to tuck into the gap between the two
   earned medals on each side without reaching the centred heading/cert row. */
.sl-hero-slide.is-active .sl-medal.is-locked {
    transform: scale(0.58);
}

/* slide: meet your guide (narrator picker) */
.sl-slide-narrator {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.875rem 2.5rem;
}

.sl-slide-narrator h2 {
    font-size: 1.5rem;
    margin: 0.75rem 0 0.125rem;
}

.sl-slide-narrator p {
    color: var(--muted);
    font-size: 1rem;
    margin: 0;
}

.sl-narrator-cards {
    display: flex;
    gap: 0.875rem;
    margin-top: 1.125rem;
}

.sl-narrator-card {
    flex: 1;
    text-align: center;
}

.sl-narrator-avatar {
    display: inline-block;
    width: 108px;
    height: 108px;
}

.sl-narrator-avatar svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

.sl-narrator-name {
    font-family: var(--jm-font-display);
    font-weight: 800;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.sl-narrator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.sl-narrator-blurb {
    font-size: 0.9375rem;
    line-height: 1.35;
    margin: 0.25rem 0 0;
}

/* slide: scientist wall — same rectangular-cover treatment as the book
   spines, fanned across the width to read as "there are a lot of these",
   each card entering with a staggered delay (--wi, set per-card from the
   loop index) the moment this slide becomes active. */
.sl-slide-scientists {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 2rem 1rem;
}

.sl-scientists-head {
    margin-bottom: 0.5rem;
}

.sl-scientists-head h2 {
    font-size: 1.75rem;
    margin: 0.625rem 0 0.75rem;
}

.sl-theme-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sl-theme-pill {
    appearance: none;
    cursor: pointer;
    font-family: var(--jm-font-mono);
    font-size: 0.9375rem;
    padding: 0.5rem 1.0625rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--mint);
    color: var(--teal-deep);
}

.sl-theme-pill:hover,
.sl-theme-pill:focus-visible {
    border-color: var(--teal);
    outline: none;
}

.sl-theme-pill.is-active {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal);
}

.sl-wall {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    padding-bottom: 0.5rem;
}

.sl-wall-card {
    width: 100px;
    height: 144px;
    border-radius: 7px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    margin-left: -34px;
    border: 2px solid var(--paper);
    opacity: 0;
    transform: translateX(50px) rotate(0deg);
    transition: opacity 0.45s ease, transform 0.45s ease;
    transition-delay: calc(var(--wi) * 60ms);
}

.sl-wall-card:first-child {
    margin-left: 0;
}

.sl-hero-slide.is-active .sl-wall-card {
    opacity: 1;
    transform: rotate(var(--rot));
}

.sl-wall-card:hover {
    transform: rotate(0deg) translateY(-14px) scale(1.08);
    z-index: 5;
    transition-delay: 0s;
}

.sl-wall-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sl-wall-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: var(--jm-font-mono);
    font-size: 0.75rem;
    color: #fff;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent);
    text-align: center;
    padding: 0.5rem 0.25rem 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sl-wall-card:hover .sl-wall-name {
    opacity: 1;
}

/* slide: quiz types */
.sl-slide-quiz {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.875rem 2.5rem;
}

.sl-slide-quiz h2 {
    font-size: 1.5rem;
    margin: 0.75rem 0 0.125rem;
}

.sl-slide-quiz p {
    color: var(--muted);
    font-size: 1rem;
    margin: 0;
}

.sl-quiz-types {
    display: flex;
    gap: 0.875rem;
    margin-top: 1.125rem;
}

.sl-quiz-type {
    background: var(--mint);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    flex: 1;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: calc(var(--wi) * 90ms);
}

.sl-hero-slide.is-active .sl-quiz-type {
    opacity: 1;
    transform: translateY(0);
}

.sl-quiz-type.is-teal {
    background: rgba(18, 181, 166, 0.22);
    border-color: var(--teal);
}

.sl-quiz-type.is-tangerine {
    background: rgba(255, 107, 74, 0.22);
    border-color: var(--tangerine);
}

.sl-quiz-type.is-gold {
    background: rgba(255, 176, 32, 0.24);
    border-color: var(--gold);
}

.sl-quiz-type.is-cyan {
    background: rgba(34, 211, 238, 0.24);
    border-color: var(--cyan);
}

.sl-quiz-type-label {
    font-family: var(--jm-font-mono);
    font-size: 0.75rem;
    color: var(--tangerine);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sl-quiz-type-q {
    font-size: 1rem;
    color: var(--ink);
    font-weight: 700;
    margin: 0.375rem 0 0.5rem;
    line-height: 1.35;
}

.sl-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sl-quiz-option {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.9375rem;
    color: var(--muted);
    line-height: 1.3;
}

.sl-quiz-option-mark {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    color: #fff;
}

.sl-quiz-option.is-correct {
    background: rgba(16, 185, 129, 0.16);
    border-color: var(--teal);
    color: var(--ink);
    font-weight: 700;
}

.sl-quiz-option.is-correct .sl-quiz-option-mark {
    background: var(--teal);
    border-color: var(--teal);
}

/* Chronology demo: a drag-to-reorder list, not a pick-one list — numbered
   rows with a drag handle, shown already in the correct order. */
.sl-quiz-order {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sl-quiz-order-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.9375rem;
    color: var(--ink);
    line-height: 1.3;
}

.sl-quiz-order-handle {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 0.75rem;
    cursor: grab;
}

.sl-quiz-order-num {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Match-up demo: photo-to-name pairs, not a pick-one list. */
.sl-quiz-match {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.sl-quiz-match-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.1875rem 0.5rem;
}

.sl-quiz-match-photo {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-size: cover;
    background-position: center top;
    border: 1.5px solid var(--tangerine);
}

.sl-quiz-match-line {
    flex-shrink: 0;
    width: 10px;
    height: 1.5px;
    background: var(--line);
}

.sl-quiz-match-name {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}

.sl-quiz-match-name small {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--muted);
}

.sl-quiz-match-check {
    flex-shrink: 0;
    color: var(--teal);
    font-weight: 700;
    font-size: 0.6875rem;
}

/* When? demo: a mini timeline instead of a pick-one list — the correct
   decade's dot/label is enlarged and coloured in. */
.sl-quiz-timeline {
    position: relative;
    padding-top: 0.625rem;
    display: flex;
    justify-content: space-between;
}

.sl-quiz-timeline-track {
    position: absolute;
    top: calc(0.625rem + 5px);
    left: 4px;
    right: 4px;
    height: 2px;
    background: var(--line);
}

.sl-quiz-timeline-tick {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3125rem;
    flex: 1;
}

.sl-quiz-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--line);
}

.sl-quiz-timeline-label {
    font-size: 0.9375rem;
    color: var(--muted);
}

.sl-quiz-timeline-tick.is-correct .sl-quiz-timeline-dot {
    width: 14px;
    height: 14px;
    background: var(--cyan);
    border-color: var(--cyan);
}

.sl-quiz-timeline-tick.is-correct .sl-quiz-timeline-label {
    color: var(--ink);
    font-weight: 700;
}

/* slide: books */
.sl-slide-books {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 2.125rem 2.25rem;
}

.sl-book-group {
    display: flex;
    gap: 1.25rem;
    flex-shrink: 0;
}

.sl-book-text {
    flex-shrink: 0;
    max-width: 300px;
}

.sl-slide-books h2 {
    font-size: 1.75rem;
    margin: 0.875rem 0 0.5rem;
}

.sl-slide-books p {
    color: var(--muted);
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/* Each cover enters from a different direction (--wi staggers the delay,
   --resty/--restrot set its fanned resting position once it arrives). */
.sl-book-cover {
    width: 118px;
    height: 176px;
    border-radius: 6px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(var(--wi) * 90ms);
}

.sl-book-cover.from-left { transform: translateX(-100px) rotate(-6deg); }
.sl-book-cover.from-right { transform: translateX(100px) rotate(6deg); }
.sl-book-cover.from-bottom { transform: translateY(90px) rotate(4deg); }
.sl-book-cover.from-top { transform: translateY(-90px) rotate(-4deg); }

.sl-hero-slide.is-active .sl-book-cover {
    opacity: 1;
    transform: translateY(var(--resty)) rotate(var(--restrot));
}

.sl-book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* .sl-hero-dots / .sl-hero-dotbtn / .sl-hero-nav-arrow moved to
   landing-hero-shared.css 2026-07-12 alongside .sl-hero-stage/.sl-hero-slide
   above — see that comment. */

/* A direct child of .sl-hero-wrap (a sibling of .sl-hero, not nested
   inside it) so the negative bottom offset below can straddle the hero's
   bottom edge — .sl-hero itself has overflow:hidden, which would clip an
   overlapping child instead of letting it hang over the boundary. */
.sl-scroll-cue {
    position: absolute;
    bottom: -22px;
    right: 24px;
    z-index: 6;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.sl-scroll-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tangerine), var(--gold));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
    animation: sl-scroll-bounce 1.6s infinite;
    transition: transform 0.2s ease;
}

.sl-scroll-cue:hover .sl-scroll-btn {
    transform: scale(1.12);
}

@keyframes sl-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

.sl-section-head {
    scroll-margin-top: 120px;
    margin: 2.5rem 0 0.5rem;
    padding: 1.5rem 1rem 0;
    border-top: 1px solid var(--color-border-light);
}

.sl-section-title {
    font-family: var(--jm-font-display);
    color: var(--teal-ink);
    font-weight: 800;
    font-size: 1.375rem;
    margin: 0 0 0.25rem;
}

.sl-section-sub {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin: 0;
}

.sl-row {
    /* Clears the site header + .sl-jumpnav (fixed, ~113px combined) when a
       jump-nav button scrolls a row into view -- otherwise the row's top
       edge lands hidden behind both fixed bars. */
    scroll-margin-top: 120px;
    margin: 1.5rem 0;
    /* The page wrapper's own container-fluid px-2/px-md-3 padding (8-16px)
       reads as flush against the edge once the tiles are this large --
       this row-level padding adds real breathing room beyond it. */
    padding: 1rem 1rem 1.25rem;
    background: linear-gradient(120deg, var(--mint) 0%, var(--paper) 65%);
    border-radius: 16px;
}

.sl-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 0.25rem 0.625rem;
}

.sl-row-title {
    font-family: var(--jm-font-display);
    color: var(--teal-ink);
    font-size: 1.1875rem;
    font-weight: 800;
    margin: 0;
}

.sl-row-sub {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.sl-row-track-wrap {
    position: relative;
}

.sl-row-track {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0.25rem 0.25rem 0.625rem;
    scrollbar-width: none;
}

.sl-row-track::-webkit-scrollbar {
    display: none;
}

.sl-row-nav {
    position: absolute;
    top: 0;
    bottom: 10px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--color-bg-subtle), transparent);
    border: none;
    color: var(--color-primary);
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
}

.sl-row-track-wrap:hover .sl-row-nav {
    opacity: 1;
}

.sl-row-nav.is-right {
    left: auto;
    right: 0;
    background: linear-gradient(-90deg, var(--color-bg-subtle), transparent);
}

/* A row whose track doesn't actually overflow has nothing to scroll to --
   showing the nav arrows anyway reads as broken, not just decorative. */
.sl-row.is-no-overflow .sl-row-nav {
    display: none;
}

.sl-tile {
    flex: 0 0 190px;
    scroll-snap-align: start;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    border: 2px solid var(--tangerine);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease;
}

.sl-tile.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.sl-tile:hover,
.sl-tile:focus-visible {
    box-shadow: 0 0 0 3px var(--gold), 0 14px 24px rgba(0, 0, 0, 0.28);
    transform: translateX(0) scale(1.04);
    z-index: 2;
}

/* The photo is its own stacked block between the two banners now, not a
   full-bleed background with the banners floating on top of it -- it just
   fills whatever height is left in the card after both banners take their
   own (content-driven) height, via flex + min-height:0 so it can actually
   shrink inside the fixed-aspect-ratio card instead of overflowing it. */
.sl-tile-photo {
    flex: 1 1 auto;
    min-height: 0;
    background-size: cover;
    background-position: center 20%;
}

/* Trading-card treatment: a solid banner top and bottom bookend the
   portrait -- now genuinely separate blocks in normal flow (not absolutely
   positioned over the image), so the title and category label never cover
   any of the photo. */
.sl-tile-unit {
    font-size: 0.8125rem;
    background: var(--cream);
    color: #d9502e;
    font-weight: 700;
    line-height: 1.25;
    padding: 0.5rem 0.625rem;
    border-bottom: 2px solid var(--tangerine);
}

.sl-tile-foot {
    padding: 0.625rem 0.6875rem;
    color: #fff;
    background: var(--ink);
}

.sl-tile-title {
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    /* base.css has a global `p { color: var(--text) }` reset that otherwise
       overrides .sl-tile-foot's inherited white -- an explicit rule always
       beats inheritance regardless of the ancestor's colour, so without
       this the title rendered in dark ink no matter how dark the banner
       behind it was. */
    color: #fff;
}

.sl-tile-credit {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    border: none;
    font-size: 0.625rem;
    line-height: 18px;
    cursor: pointer;
}

/* Leading card in every reel: a colourful, non-photo anchor showing the
   row's own title/subtitle so a short row still reads as "a themed shelf",
   not just a couple of stray tiles floating in blank space. */
/* Solid, single-hue teal rather than the old teal-to-tangerine diagonal --
   two unrelated accent colours blending across one small card read as a
   muddy fade. A single-hue radial glow keeps some depth without competing
   with the tangerine border every tile (including this one) already has. */
.sl-tile-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.375rem;
    padding: 1rem 0.75rem;
    background: radial-gradient(120% 120% at 30% 20%, var(--teal) 0%, var(--teal-deep) 70%);
    cursor: default;
}

.sl-tile-heading-title {
    font-family: var(--jm-font-display);
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    line-height: 1.25;
}

.sl-tile-heading-sub {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
}

.sl-tile-heading:hover,
.sl-tile-heading:focus-visible {
    box-shadow: none;
    transform: none;
}

.sl-book-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1.5rem;
}

.sl-book-backdrop.is-open {
    display: flex;
}

.sl-book {
    width: min(860px, 96vw);
    perspective: 2200px;
}

.sl-book-inner {
    position: relative;
    min-height: 500px;
    background: var(--color-bg);
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.42);
    display: flex;
}

/* No overflow:hidden on .sl-book-inner — Chromium mis-paints a 3D-transformed
   descendant (the right page's flip) when clipped by an ancestor's
   overflow:hidden, rendering it squashed into a sliver even though its
   computed layout is correct. Each page carries its own corner radius
   instead so the card still reads as one rounded shape. */
.sl-book-page-left {
    width: 46%;
    position: relative;
    background-size: cover;
    background-position: center 22%;
    flex-shrink: 0;
    border-radius: 12px 0 0 12px;
    overflow: hidden;
}

.sl-book-page-left-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15, 23, 42, 0.92) 18%, rgba(15, 23, 42, 0.15) 60%, transparent 100%);
}

.sl-book-left-unit {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 0.8125rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

/* Groups the caption (who's actually pictured) with the story title so both
   sit bottom-anchored together -- previously the portrait had no label at
   all identifying the person in it. */
.sl-book-left-bottom {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sl-book-left-caption {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.sl-book-left-title {
    color: #fff;
    font-size: 1.5625rem;
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.sl-book-page-right-wrap {
    width: 54%;
    position: relative;
    perspective: 1800px;
}

.sl-book-page-right {
    position: absolute;
    inset: 0;
    background: var(--color-bg);
    border-radius: 0 12px 12px 0;
    transform-origin: left center;
    transform: rotateY(-92deg);
    transition: transform 0.8s cubic-bezier(0.5, 0, 0.15, 1);
    padding: 1.625rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
}

.sl-book-page-right.is-open {
    transform: rotateY(0deg);
}

.sl-book-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.5);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.9375rem;
    z-index: 10;
}

.sl-book-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.sl-book-domains {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.sl-book-domain-chip {
    font-size: 0.875rem;
    background: var(--color-info-bg);
    border: 1px solid var(--color-info);
    color: var(--color-primary-hover);
    padding: 3px 10px;
    border-radius: 999px;
}

.sl-book-cast-label {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Stories with a large cast (e.g. "A Global Science", 14 people) would
   otherwise push the synopsis and Play button below the fixed-height page --
   cap the list and let it scroll internally instead. */
.sl-book-cast-list {
    max-height: 190px;
    overflow-y: auto;
    padding-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.sl-book-cast-item {
    font-size: 0.9375rem;
    color: var(--color-text);
    margin-bottom: 0.375rem;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    text-decoration: none;
}

/* Only cast members with a real scene to jump to are clickable -- someone
   without a "scene" (shouldn't normally happen, but the template guards for
   it) renders as a plain, non-interactive row instead of a dead link. */
.sl-book-cast-item.is-link {
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.sl-book-cast-item.is-link:hover,
.sl-book-cast-item.is-link:focus-visible {
    background: var(--color-bg-subtle);
    text-decoration: underline;
}

.sl-book-cast-era {
    color: var(--color-text-light);
    font-size: 0.875rem;
}

.sl-book-cast-placeholder {
    font-size: 0.875rem;
    color: var(--color-text-light);
    font-style: italic;
}

.sl-book-synopsis {
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.6;
    flex: 1;
    margin: 0.875rem 0 1.125rem;
}

.sl-book-actions {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.sl-book-play {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 0.75rem 1.625rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sl-book-play:hover {
    background: var(--color-primary-hover);
}

.sl-book-secondary {
    background: transparent;
    color: var(--color-primary-hover);
    border: 1px solid var(--color-primary);
    border-radius: 9px;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.sl-credit-icon {
    position: relative;
    display: inline-flex;
}

.sl-credit-popover {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    width: 220px;
    background: var(--color-text);
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1.4;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 20;
}

.sl-tile-credit:hover + .sl-credit-popover,
.sl-tile-credit:focus + .sl-credit-popover,
.sl-credit-popover.is-shown {
    opacity: 1;
    pointer-events: auto;
}

.sl-credit-popover a {
    color: var(--color-primary-light);
}

/* "Browse by scientist" row — one card per (story, cast member), text-only
   (no per-scientist portrait art exists), same tap target/card weight as a
   photo .sl-tile but with a plain-panel look instead of a background image. */
.sl-row-track-people {
    padding-bottom: 0.625rem;
}

.sl-people-tile {
    flex: 0 0 156px;
    scroll-snap-align: start;
    border-radius: 8px;
    border: 2px solid var(--teal);
    background: var(--mint);
    padding: 1.125rem 0.875rem;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.sl-people-tile:hover,
.sl-people-tile:focus-visible {
    transform: translateY(-2px);
    border-color: var(--tangerine);
    box-shadow: 0 8px 18px -12px rgba(15, 118, 110, 0.5);
    outline: none;
}

/* Country cards (the only remaining user of this class -- scientist cards
   moved to a photo + small corner badge). A country doesn't have a face, so
   the flag IS its image here -- same circular frame size as .sl-people-photo-wrap
   below, so the two "browse by" rows read as one consistent card system. */
.sl-people-flag {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    line-height: 1;
    margin: 0 auto 0.625rem;
    background: var(--teal-deep);
    overflow: hidden;
}

/* Scientist cards get a real portrait (country tiles stay flag-only --
   .sl-people-flag above -- since a country isn't a face). The flag still
   shows, just as a small corner badge on the photo instead of the whole
   card's icon. */
.sl-people-photo-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 0.625rem;
    background: var(--teal-deep);
}

.sl-people-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sl-people-flag-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.9375rem;
    line-height: 1;
    background: var(--cream);
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Fallback for the handful of cast members with no portrait file on disk --
   the <img>'s @error handler adds this class, hiding the broken image and
   growing the flag back into a plain centred icon (the pre-photo look). */
.sl-people-photo-wrap.no-photo {
    background: none;
}

.sl-people-photo-wrap.no-photo .sl-people-photo {
    display: none;
}

.sl-people-photo-wrap.no-photo .sl-people-flag-badge {
    position: static;
    display: block;
    font-size: 1.5rem;
    background: none;
    box-shadow: none;
    padding: 0;
}

.sl-people-name {
    font-family: var(--jm-font-display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--teal-ink);
    line-height: 1.3;
    /* Reserves two lines' worth of height so a short one-line name (e.g.
       "Democritus") and a wrapping two-line name (e.g. "Ernest Rutherford")
       both leave the era starting from the same y position -- otherwise
       the era text lands at a different height per card depending on
       whether that card's name happened to wrap. */
    min-height: 2.4375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-people-era {
    font-family: var(--jm-font-mono);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Country cards: the country name is what's being browsed, not the flag --
   give it more weight than a scientist card's name gets. */
.sl-country-name {
    font-size: 1.0625rem;
    min-height: 2.75rem;
}

/* Sticky mini-nav — appears once the reader scrolls past the hero, letting
   them jump straight to any row-section instead of only scrolling linearly.
   Fixed just below the shared site header (which itself sits at the very
   top of the page), hidden via translateY until .is-shown. */
.sl-jumpnav {
    position: fixed;
    /* Sits just below the site's own sticky header (.jmaths-nav, ~59px tall,
       z-index 1020) -- pinning to top:0 would render this bar completely
       hidden behind it. */
    top: 59px;
    left: 0;
    right: 0;
    z-index: 1010;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 6px 18px -12px rgba(15, 118, 110, 0.3);
    transform: translateY(-100%);
    transition: transform 0.25s ease;
    scrollbar-width: none;
}

.sl-jumpnav::-webkit-scrollbar {
    display: none;
}

.sl-jumpnav.is-shown {
    transform: translateY(0);
}

.sl-jumpnav-btn {
    appearance: none;
    cursor: pointer;
    flex: 0 0 auto;
    font-family: var(--jm-font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-light);
    background: var(--mint);
    color: var(--teal-deep);
}

.sl-jumpnav-btn:hover,
.sl-jumpnav-btn:focus-visible {
    border-color: var(--teal);
    background: var(--mint2);
    outline: none;
}

@media (max-width: 640px) {
    .sl-quiz-types {
        flex-wrap: wrap;
    }

    .sl-quiz-type {
        flex: 1 1 45%;
    }

    .sl-book-inner {
        flex-direction: column;
        min-height: 0;
    }

    .sl-book-page-left,
    .sl-book-page-right-wrap {
        width: 100%;
    }

    .sl-book-page-left {
        height: 200px;
    }

    .sl-book-page-right {
        position: relative;
        transform: none !important;
        transition: none;
    }
}