/*
 * Board player (v2): looks and behaves like a video player.
 *
 *   stage     the "picture": a light slide that fills the player edge to edge
 *   controls  one dark bar: seek across the whole lecture, then the buttons
 *
 * Unlike a video, the picture is live HTML, so it is never letterboxed into a
 * fixed 16:9 box and text is never scaled down to fit. The slide fills the
 * stage, stays at a readable size on a phone, and scrolls inside the stage in
 * the rare case a legacy slide is too tall.
 */
.bp-player {
    --bp-accent: #3b82f6;
    --bp-accent-strong: #2563eb;
    --bp-accent-soft: #eff4ff;
    --bp-ink: #0f172a;
    --bp-ink-2: #475569;
    --bp-line: #e2e8f0;
    --bp-surface: #ffffff;
    --bp-frame: #0b1220;            /* the dark player body */
    --bp-chrome: #111a2e;           /* control bar */
    --bp-chrome-ink: #e5e7eb;
    --bp-good: #15803d;
    --bp-good-soft: #ecfdf3;
    --bp-bad: #b91c1c;
    --bp-bad-soft: #fef2f2;

    container-type: inline-size;
    container-name: bp;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    /* minmax(0, ...) and min-width: 0 are essential. Grid children default to
       min-width: auto, so one wide image or long word would otherwise push the
       player wider than the phone and clip the controls. */
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 50px);          /* learn page top bar is 50px */
    height: calc(100dvh - 50px);
    background: var(--bp-frame);
    color: var(--bp-ink);
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
    overflow: hidden;
}
.bp-player *, .bp-player *::before, .bp-player *::after { box-sizing: border-box; }
/* Read aloud, never drawn. Not display:none, which screen readers skip, and not
   zero width either, which stops some of them announcing the text at all. */
.bp-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.bp-player:fullscreen, .bp-player.bp-pseudo-full { height: 100vh; height: 100dvh; }
.bp-player.bp-pseudo-full { position: fixed; inset: 0; z-index: 2000; }

/* ---------- stage ---------- */
.bp-stage {
    position: relative; min-width: 0; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    justify-items: center;
    cursor: pointer;                     /* tap the picture to play or pause */
    /* Text size follows the PLAYER's width (cqi), not the window's, because the
       learn page's side panels change how wide the player is. Never below 16px. */
    /* The picture scales with the player the way a video does: 16px on a phone,
       ~18px in a laptop column, ~26px at 2000px, ~33px at 2800px, ~40px at 4K.
       The vh term stops a wide-but-short window from overflowing downwards. */
    font-size: clamp(1rem, min(0.75rem + 0.72cqi, 0.6rem + 2.2vh), 2.75rem);
}
.bp-board {
    background: var(--bp-surface);
    width: 100%; min-width: 0; min-height: 0;        /* edge to edge: no dark bars beside the slide */
    display: grid; grid-template-rows: auto auto minmax(0, 1fr);
}
.bp-board-head {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 14px 18px 12px; border-bottom: 1px solid var(--bp-line);
}
.bp-slide-title {
    margin: 0; flex: 1; min-width: 0;
    font-size: clamp(1.15rem, min(1rem + 0.8cqi, 0.8rem + 3vh), 3.4rem); line-height: 1.3; font-weight: 700;
    overflow-wrap: anywhere;
    padding-left: .6em; border-left: .22em solid var(--bp-accent-strong); border-radius: 2px;
}
.bp-counter {
    font-size: max(.8rem, .62em); color: var(--bp-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;
    padding: .2em .8em; border-radius: 999px; background: #f1f5f9;
}
.bp-board-body {
    overflow-y: auto; overscroll-behavior: contain; min-width: 0; min-height: 0;
    padding: 16px 18px 20px; overflow-wrap: anywhere;
    /* --bp-fit is set per slide by player.js (fitPicture): the text is scaled so
       the content fills the stage without scrolling, never below 16px. */
    font-size: calc(1em * var(--bp-fit, 1));
    /* A slide shorter than the stage does not hug the top with an empty half
       below it. The spare height is shared 1 : 2 above and below, so the
       content sits a third of the way down: filled, but still visually
       attached to its title. The two spacer rows shrink to nothing when a
       slide is taller than the stage, so it then scrolls from its top. */
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 2fr);
}
.bp-board-body::before, .bp-board-body::after { content: ''; }
.bp-board-body > * { width: 100%; }
.bp-status:not(:empty) { margin: 4px 18px; padding: 6px 10px; border-radius: 8px; font-size: .8rem; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

/* An opening or section slide shows its title large in the picture, so the header
   keeps only the slide counter instead of repeating it. */
.bp-on-title .bp-slide-title { visibility: hidden; }
.bp-on-title .bp-board-head { border-bottom-color: transparent; }

/* big centre play button, shown before the first play */
.bp-bigplay {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(15, 23, 42, .72); color: #fff; display: grid; place-items: center;
    box-shadow: 0 10px 30px rgba(2, 6, 23, .35);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.bp-bigplay svg { width: 40px; height: 40px; fill: currentColor; margin-left: 4px; }
.bp-bigplay:hover { background: var(--bp-accent-strong); transform: translate(-50%, -50%) scale(1.06); }
/* Like the big video sites: the large button invites the FIRST play only. After
   that a pause must not drop a button on top of the text being read; the bar's
   play button and a tap on the picture do the job. */
.bp-is-playing .bp-bigplay, .bp-on-activity .bp-bigplay, .bp-started .bp-bigplay { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); }
.bp-on-activity .bp-stage { cursor: default; }

/* ---------- picture components ---------- */
.bp-c, .bp-c-body { display: block; min-width: 0; }
.bp-prose > :first-child { margin-top: 0; }
.bp-prose > :last-child { margin-bottom: 0; }
.bp-prose p { margin: 0 0 .7em; }
.bp-prose ul, .bp-prose ol { margin: 0 0 .7em; padding-left: 1.3em; }
.bp-prose li { margin: .25em 0; }
.bp-prose h1, .bp-prose h2, .bp-prose h3, .bp-prose h4, .bp-prose h5, .bp-prose h6 {
    font-size: 1.1em; line-height: 1.35; font-weight: 700; color: var(--bp-accent-strong); margin: 1em 0 .4em;
}
.bp-prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: .5em 0; border: 1px solid var(--bp-line); border-radius: 12px; overflow: hidden; }
.bp-prose th, .bp-prose td { border-bottom: 1px solid var(--bp-line); border-right: 1px solid var(--bp-line); padding: .5em .75em; text-align: left; vertical-align: top; }
.bp-prose tr > :last-child { border-right: 0; }
.bp-prose tbody tr:last-child > * { border-bottom: 0; }
.bp-prose th { background: var(--bp-accent-soft); color: #1e3a8a; font-weight: 700; }
.bp-prose tbody tr:nth-child(even) td { background: #f8fafc; }
.bp-prose pre { background: #0f172a; color: #e2e8f0; padding: .8em 1em; border-radius: 10px; overflow-x: auto; font-size: .85em; }
.bp-prose code { font-family: Consolas, 'Source Code Pro', monospace; font-size: .92em; }
.bp-prose :not(pre) > code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }
.bp-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.bp-prose blockquote { margin: .6em 0; padding: .5em 1em; border-left: 4px solid var(--bp-accent); background: var(--bp-accent-soft); border-radius: 0 10px 10px 0; }
.bp-muted { color: var(--bp-ink-2); }

/* points: lead line, groups with a heading, points with sub-points, closing note */
.bp-lead { margin: 0 0 .9em; font-size: 1.04em; color: var(--bp-ink-2); }
.bp-group + .bp-group { margin-top: 1.1em; }
.bp-group-heading {
    margin: 0 0 .45em; font-size: 1.06em; line-height: 1.35; font-weight: 700; color: var(--bp-accent-strong);
    display: flex; align-items: center; gap: .55em;
}
.bp-group-heading::after { content: ''; flex: 1; height: 2px; border-radius: 1px; background: linear-gradient(to right, #c7d7fe, transparent); }
.bp-group-intro { margin: 0 0 .45em; color: var(--bp-ink-2); }

.bp-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; }
.bp-bullet {
    position: relative; padding: .45em .8em .45em 1.9em;
    border-radius: 12px; border: 1px solid transparent;
}
.bp-bullet::before {
    content: ''; position: absolute; left: .75em; top: 1.02em;
    width: .46em; height: .46em; border-radius: 50%; background: #94a3b8;
    transition: background-color .3s ease, transform .3s ease;
}
.bp-bullet-text > p { margin: 0; }
.bp-bullet-text strong { color: #0b1220; }
.bp-bullet.bp-current { background: var(--bp-accent-soft); border-color: #c7d7fe; }
.bp-bullet.bp-current::before { background: var(--bp-accent-strong); transform: scale(1.3); }

.bp-sub { list-style: none; margin: .3em 0 .1em; padding: 0; display: grid; gap: .2em; color: var(--bp-ink-2); }
.bp-sub li { position: relative; padding-left: 1.15em; }
.bp-sub li::before { content: ''; position: absolute; left: .1em; top: .78em; width: .55em; height: 2px; border-radius: 1px; background: #94a3b8; }
.bp-sub li > p { margin: 0; }

.bp-note {
    margin: 1.1em 0 0; padding: .7em 1em; border-left: 4px solid #f59e0b; border-radius: 0 12px 12px 0;
    background: #fffbeb; color: #78350f; font-style: normal;
}
.bp-note em { font-style: normal; }

/* everything that appears with the narration shares one entrance */
.bp-bullet, .bp-group-heading, .bp-group-intro, .bp-note {
    opacity: 0; transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease, background-color .3s ease, border-color .3s ease;
}
.bp-shown { opacity: 1; transform: none; }
.bp-instant, .bp-instant::before { transition: none; }

/* Compact mode (set by fitPicture when a slide only just misses fitting at 16px):
   same text size, less air. */
.bp-compact { line-height: 1.45; padding-top: 10px; padding-bottom: 10px; }
.bp-compact .bp-bullets { gap: .05em; }
.bp-compact .bp-bullet { padding-top: .22em; padding-bottom: .22em; }
.bp-compact .bp-bullet::before { top: .74em; }
.bp-compact .bp-lead { margin-bottom: .45em; }
.bp-compact .bp-group + .bp-group { margin-top: .55em; }
.bp-compact .bp-group-heading { margin-bottom: .2em; }
.bp-compact .bp-note { margin-top: .5em; padding: .4em .8em; }
.bp-compact .bp-figure img { max-height: 30vh; }
.bp-compact .bp-prose p, .bp-compact .bp-prose ul, .bp-compact .bp-prose ol { margin-bottom: .4em; }
.bp-compact .bp-prose th, .bp-compact .bp-prose td { padding: .3em .6em; }
.bp-compact .bp-column { padding: .6em .9em; }
/* activities have fixed-size tap targets, so only their spacing can give */
.bp-compact .bp-activity-prompt { margin-bottom: .45em; }
.bp-compact .bp-os-list, .bp-compact .bp-choices, .bp-compact .bp-mp-col { gap: 5px; }
.bp-compact .bp-os-item { padding: 1px 6px 1px 2px; }
.bp-compact .bp-os-move { height: 38px; }
.bp-compact .bp-os-grip { height: 38px; }
.bp-compact .bp-activity-hint { margin-bottom: .45em; }
.bp-compact .bp-fb-sentence { line-height: 2.4; }
.bp-compact .bp-choice, .bp-compact .bp-mp-item { padding-top: .35em; padding-bottom: .35em; min-height: 44px; }
.bp-compact .bp-cat-drop { min-height: 64px; padding: 8px; }
.bp-compact .bp-cat-buckets { gap: 10px; }
.bp-compact .bp-cat-pool { margin-top: 8px; }
.bp-compact .bp-feedback { margin-top: .4em; min-height: 1.4em; }
.bp-compact .bp-activity-actions { margin-top: .35em; }

/* image beside or above the text */
.bp-has-image { display: grid; gap: 1.2em; grid-template-columns: minmax(0, 1fr); align-items: center; }
.bp-figure { margin: 0; text-align: center; min-width: 0; }
.bp-figure img {
    max-width: 100%; max-height: 42vh; width: auto; height: auto; object-fit: contain;
    border-radius: 14px; border: 1px solid var(--bp-line); background: #fff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
}
.bp-figure figcaption { margin-top: .6em; color: var(--bp-ink-2); }
.bp-c-image .bp-figure img { max-height: 66vh; }
.bp-columns { display: grid; gap: 1em; grid-template-columns: minmax(0, 1fr); }
.bp-column { background: #f8fafc; border: 1px solid var(--bp-line); border-radius: 14px; padding: .9em 1.1em; }

/* opening and section slides */
.bp-c-title { padding: .4em 0; }
.bp-title-main { margin: 0 0 .25em; font-size: 1.9em; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.bp-title-sub {
    display: inline-block; margin: 0 0 1em; padding: .15em .8em; border-radius: 999px;
    background: var(--bp-accent-soft); color: var(--bp-accent-strong); font-weight: 700;
}
.bp-variant-section_header { text-align: center; }
.bp-variant-section_header .bp-title-main { font-size: 2.3em; }

/* ---------- simulations and drawn visuals (engines) ----------
   A simulation is a picture, not text, so it is not centred a third of the way
   down like a bullet slide: it takes the whole free height of the board. */
.bp-on-sim .bp-board-body { grid-template-rows: 0 minmax(0, 1fr) 0; }
.bp-c-sim { display: grid; min-width: 0; min-height: 0; height: 100%; }
.bp-sim-loading { place-items: center; }
.bp-sim-loading::after {
    content: ''; width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--bp-line); border-top-color: var(--bp-accent-strong);
    animation: bp-spin .8s linear infinite;
}
@keyframes bp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bp-sim-loading::after { animation: none; } }

/* The frame of a simulation: the picture, then its controls. Beside each other
   when the player is wide, stacked on a phone with the picture on top. */
.bp-sim { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(180px, 1fr) auto; gap: 12px; cursor: default; }
.bp-sim-stage { position: relative; min-width: 0; min-height: 0; border: 1px solid var(--bp-line); border-radius: 14px; background: #fbfdff; overflow: hidden; }
.bp-sim-canvas { display: block; }
.bp-sim-side { min-width: 0; display: grid; gap: 10px; align-content: start; }
.bp-sim-panel { display: grid; gap: 8px; min-width: 0; }
.bp-sim-panel:empty { display: none; }
.bp-sim-controls { display: grid; gap: 2px; }
.bp-sim-control { min-width: 0; }
.bp-sim-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 600; }
.bp-sim-value { font-variant-numeric: tabular-nums; color: var(--bp-accent-strong); font-weight: 700; white-space: nowrap; }
.bp-sim-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer;
    --bp-sim-fill: 50%;
}
.bp-sim-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--bp-accent-strong) var(--bp-sim-fill), var(--bp-line) var(--bp-sim-fill)); }
.bp-sim-range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--bp-accent-strong) var(--bp-sim-fill), var(--bp-line) var(--bp-sim-fill)); }
.bp-sim-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--bp-accent-strong); box-shadow: 0 2px 6px rgba(15, 23, 42, .2); }
.bp-sim-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--bp-accent-strong); }
.bp-sim-range:focus-visible { outline: 2px solid var(--bp-accent-strong); outline-offset: 2px; border-radius: 8px; }
.bp-sim-switch { font: inherit; color: inherit; display: flex; align-items: center; gap: 10px; min-height: 44px; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.bp-sim-switch-track { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: #cbd5e1; transition: background-color .15s ease; }
.bp-sim-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); }
.bp-sim-switch[aria-checked="true"] .bp-sim-switch-track { background: var(--bp-accent-strong); }
.bp-sim-switch[aria-checked="true"] .bp-sim-switch-track::after { transform: translateX(18px); }
.bp-sim-switch:focus-visible, .bp-sim-preset:focus-visible, .bp-sim-select:focus-visible { outline: 2px solid var(--bp-accent-strong); outline-offset: 2px; border-radius: 8px; }
.bp-sim-select { font: inherit; width: 100%; min-height: 44px; padding: 0 .6em; border: 1px solid var(--bp-line); border-radius: 10px; background: var(--bp-surface); color: inherit; }
.bp-sim-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bp-sim-presets-title { font-weight: 700; color: var(--bp-ink-2); }
.bp-sim-preset { font: inherit; font-size: .92em; min-height: 36px; padding: 0 .8em; border-radius: 999px; border: 1px solid #c7d7fe; background: var(--bp-accent-soft); color: #1e3a8a; font-weight: 600; cursor: pointer; }
.bp-sim-preset:hover { border-color: var(--bp-accent-strong); }
.bp-sim-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-sim-actions > button { min-height: 36px; padding-top: 0; padding-bottom: 0; }
.bp-sim-readout { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; padding: .3em .7em; border-radius: 10px; background: rgba(255, 255, 255, .92); border: 1px solid var(--bp-line); color: var(--bp-ink); font-size: .9em; line-height: 1.35; font-variant-numeric: tabular-nums; pointer-events: none; }
.bp-sim-readout:empty { display: none; }
.bp-sim-detail { margin: 0; color: var(--bp-ink-2); font-size: .92em; line-height: 1.4; font-variant-numeric: tabular-nums; }
.bp-sim-detail:empty { display: none; }
@container bp (min-width: 820px) {
    .bp-sim { grid-template-columns: minmax(0, 1fr) minmax(240px, 32%); grid-template-rows: minmax(0, 1fr); gap: 20px; }
    .bp-sim-side { align-content: center; }
}
/* Fingers need bigger targets than a mouse pointer does. */
@media (pointer: coarse) {
    .bp-sim-range { height: 44px; }
    .bp-sim-preset, .bp-sim-actions > button { min-height: 44px; }
}
/* On a narrow player the picture stays in view while the controls scroll under it. */
@container bp (max-width: 819px) {
    .bp-sim { grid-template-rows: auto auto; align-content: start; }
    .bp-sim-stage { position: sticky; top: 0; z-index: 2; height: clamp(190px, 42cqh, 420px); height: clamp(190px, 38vh, 420px); }
}
/* A simulation with no controls gives its whole width to the picture. */
.bp-sim.bp-sim-wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.bp-sim-wide .bp-sim-stage { position: relative; height: auto; }
@media (prefers-reduced-motion: reduce) { .bp-sim-switch-track, .bp-sim-switch-track::after { transition: none; } }

/* table_build */
.bp-tb-wrap { place-items: center; overflow: auto; }
.bp-tb { border-collapse: separate; border-spacing: 0; border: 1px solid var(--bp-line); border-radius: 14px; overflow: hidden; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.bp-tb caption { caption-side: bottom; padding-top: .6em; color: var(--bp-ink-2); font-size: .85em; }
.bp-tb th, .bp-tb td { padding: .5em 1.4em; text-align: center; border-bottom: 1px solid var(--bp-line); border-right: 1px solid var(--bp-line); opacity: 0; transition: opacity .35s ease, background-color .3s ease, color .3s ease; }
.bp-tb tr > :last-child { border-right: 0; }
.bp-tb tbody tr:last-child > td { border-bottom: 0; }
.bp-tb th { background: var(--bp-accent-soft); color: #1e3a8a; font-weight: 700; white-space: nowrap; }
.bp-tb .bp-shown { opacity: 1; }
.bp-tb .bp-tb-lit { background: #fef3c7; color: #92400e; font-weight: 700; }

/* graph_xy */
.bp-gx .bp-sim-readout { top: 8px; bottom: auto; left: 46px; right: auto; font-weight: 700; color: #1e3a8a; }              /* above the curve, clear of the x-axis numbers */
.bp-gx-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bp-gx-grid line { stroke: #e8edf3; stroke-width: 1; }
.bp-gx-ticks text { font-size: 12px; fill: var(--bp-ink-2); font-variant-numeric: tabular-nums; }
.bp-gx-axis { stroke: #64748b; stroke-width: 2; }
.bp-gx-axis-label { font-size: 13px; font-style: italic; fill: var(--bp-ink-2); }
.bp-gx-curve { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bp-gx-curve.bp-gx-lit { stroke-width: 7; }
.bp-gx-frozen { fill: none; stroke: #94a3b8; stroke-width: 3; stroke-dasharray: 7 6; }
.bp-gx-symmetry { stroke: #7c3aed; stroke-width: 2; stroke-dasharray: 5 5; }
.bp-gx-root { fill: #fff; stroke: #b91c1c; stroke-width: 3; }
.bp-gx-vertex { fill: #f59e0b; stroke: #fff; stroke-width: 3; }
.bp-gx-point { fill: var(--bp-accent-strong); stroke: #fff; stroke-width: 3; }
.bp-gx-point.bp-gx-lit { fill: #f59e0b; }
.bp-gx-point-label { font-size: 14px; font-weight: 700; fill: var(--bp-ink); }

/* stats_dist */
.bp-sd-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bp-sd .bp-sim-readout { top: 6px; bottom: auto; left: 8px; right: auto; font-weight: 700; color: #1e3a8a; }
.bp-sd-grid { stroke: #e8edf3; stroke-width: 1; }
.bp-sd-axis { stroke: #64748b; stroke-width: 2; }
.bp-sd-tick { font-size: 12px; fill: var(--bp-ink-2); font-variant-numeric: tabular-nums; }
.bp-sd-bar { fill: #93b4f8; stroke: var(--bp-accent-strong); stroke-width: 1.5; }
.bp-sd-curve { fill: none; stroke: var(--bp-accent-strong); stroke-width: 4; stroke-linejoin: round; }
.bp-sd-area { fill: rgba(245, 158, 11, .35); stroke: none; }
.bp-sd-area.bp-sd-lit { fill: rgba(245, 158, 11, .6); }
.bp-sd-mark { stroke-width: 2.5; stroke-dasharray: 6 5; }
.bp-sd-mark.bp-sd-lit, .bp-sd-expected.bp-sd-lit { stroke-width: 5; }
.bp-sd-mean { stroke: #b91c1c; fill: #b91c1c; }
.bp-sd-median { stroke: #7c3aed; fill: #7c3aed; }
.bp-sd-mark-label { font-size: 13px; font-weight: 700; stroke: none; }
.bp-sd-expected { stroke: #15803d; stroke-width: 2.5; stroke-dasharray: 8 5; }
.bp-sd-expected-label { fill: #15803d; }

/* svg_diagram */
.bp-dg-holder { position: absolute; inset: 0; padding: 10px 10px 44px; display: grid; }
.bp-dg-svg { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.bp-dg-svg [data-step] { transition: opacity .4s ease; }
.bp-dg-svg .bp-dg-hidden { opacity: 0; }
.bp-dg-svg .bp-instant { transition: none; }
.bp-dg-pulse { animation: bp-dg-pulse 1.1s ease-in-out 3; transform-box: fill-box; transform-origin: center; }
@keyframes bp-dg-pulse { 50% { transform: scale(1.18); filter: drop-shadow(0 0 10px rgba(250, 204, 21, .95)); } }
@media (prefers-reduced-motion: reduce) { .bp-dg-svg [data-step] { transition: none; } .bp-dg-pulse { animation: none; filter: drop-shadow(0 0 8px rgba(250, 204, 21, .95)); } }

/* custom (sandboxed frame) */
.bp-cu-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }

/* mol3d */
.bp-m3 .bp-sim-canvas { position: absolute; inset: 0; cursor: grab; }
.bp-m3 .bp-sim-canvas:active { cursor: grabbing; }
.bp-m3 .bp-sim-canvas:focus-visible { outline: 2px solid var(--bp-accent-strong); outline-offset: -4px; border-radius: 14px; }
.bp-m3 .bp-sim-readout { top: 8px; bottom: auto; left: 8px; right: auto; font-weight: 700; font-size: 1.1em; color: #1e3a8a; }
.bp-m3 .bp-sim-stage { background: radial-gradient(circle at 50% 40%, #ffffff, #eef2f7); }

/* sim_motion2d */
.bp-m2 .bp-sim-canvas { position: absolute; inset: 0; }
.bp-m2 .bp-sim-readout { top: 8px; bottom: auto; left: 48px; right: auto; font-weight: 700; color: #1e3a8a; }

/* sim_logic_gate */
.bp-lg-circuit { position: absolute; inset: 0; padding: 8px 8px 46px; }   /* the readout caption lies along the bottom */
.bp-lg-svg { display: block; width: 100%; height: 100%; }
.bp-lg-wire { stroke: #94a3b8; stroke-width: 4; stroke-linecap: round; transition: stroke .2s ease; }
.bp-lg-wire.bp-lg-live { stroke: var(--bp-good); }
.bp-lg-body { fill: var(--bp-accent-soft); stroke: var(--bp-accent-strong); stroke-width: 4; stroke-linejoin: round; }
.bp-lg-open { fill: none; }
.bp-lg-label { font-size: 22px; font-weight: 700; fill: #1e3a8a; }
.bp-lg-switch { cursor: pointer; outline: none; }
.bp-lg-switch-box { fill: var(--bp-surface); stroke: #94a3b8; stroke-width: 3; transition: fill .2s ease, stroke .2s ease; }
.bp-lg-switch[aria-checked="true"] .bp-lg-switch-box { fill: var(--bp-good-soft); stroke: var(--bp-good); }
.bp-lg-switch:hover .bp-lg-switch-box { stroke: var(--bp-accent-strong); }
.bp-lg-switch:focus-visible .bp-lg-switch-box { stroke: var(--bp-accent-strong); stroke-width: 5; }
.bp-lg-switch-text { font-size: 24px; font-weight: 700; fill: var(--bp-ink); pointer-events: none; }
.bp-lg-lamp { fill: #e2e8f0; stroke: #94a3b8; stroke-width: 3; transition: fill .2s ease, stroke .2s ease, filter .2s ease; }
.bp-lg-lamp.bp-lg-lit { fill: #fde047; stroke: #ca8a04; filter: drop-shadow(0 0 10px rgba(250, 204, 21, .95)); }
.bp-lg-out-text { font-size: 18px; font-weight: 700; fill: var(--bp-ink); }
.bp-lg-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--bp-line); border-radius: 12px; overflow: hidden; text-align: center; font-variant-numeric: tabular-nums; }
.bp-lg-table caption { caption-side: top; text-align: left; font-weight: 700; color: var(--bp-ink-2); padding-bottom: .3em; }
.bp-lg-table th, .bp-lg-table td { padding: .3em .6em; border-bottom: 1px solid var(--bp-line); }
.bp-lg-table tbody tr:last-child td { border-bottom: 0; }
.bp-lg-table th { background: var(--bp-accent-soft); color: #1e3a8a; }
.bp-lg-out-cell { font-weight: 700; }
.bp-lg-table tr { transition: background-color .2s ease; }
.bp-lg-active td { background: var(--bp-good-soft); color: #14532d; font-weight: 700; }
.bp-lg-pointed td { box-shadow: inset 0 2px 0 #f59e0b, inset 0 -2px 0 #f59e0b; }
.bp-lg-hint { margin: 0; color: var(--bp-accent-strong); font-weight: 600; }
.bp-lg-marked { animation: bp-lg-pulse 1.2s ease-in-out 2; }
@keyframes bp-lg-pulse { 50% { filter: drop-shadow(0 0 10px rgba(37, 99, 235, .75)); } }
.bp-lg.bp-instant *, .bp-tb .bp-instant { transition: none; }
@media (prefers-reduced-motion: reduce) { .bp-lg-marked { animation: none; outline: 2px dashed var(--bp-accent-strong); outline-offset: 4px; } .bp-lg *, .bp-tb th, .bp-tb td { transition: none; } }

/* ---------- activities (a pause in the video) ---------- */
.bp-activity { max-width: max(820px, 44em); margin: 0 auto; cursor: default; }
.bp-activity-prompt { font-weight: 700; font-size: 1.1em; line-height: 1.4; margin-bottom: .3em; }
.bp-activity-hint { color: var(--bp-ink-2); margin-bottom: .9em; }
.bp-activity-prompt:last-of-type { margin-bottom: .9em; }
.bp-activity-body { min-width: 0; }
.bp-feedback { margin-top: .9em; min-height: 1.6em; font-weight: 600; }
.bp-feedback-right { color: var(--bp-good); }
.bp-feedback-wrong { color: var(--bp-bad); }
.bp-activity-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: .8em; }
.bp-activity-actions [hidden] { display: none; }
.bp-btn-primary, .bp-btn-secondary, .bp-btn-ghost, .bp-btn-link {
    font: inherit; font-weight: 600; border-radius: 999px; padding: .55em 1.4em; min-height: 44px;
    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; border: 2px solid var(--bp-accent-strong);
}
.bp-btn-primary { background: var(--bp-accent-strong); color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, .28); }
.bp-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.bp-btn-secondary { background: transparent; color: var(--bp-accent-strong); }
.bp-btn-ghost { background: transparent; color: #cbd5e1; border-color: transparent; }
.bp-btn-ghost:hover { color: #fff; }
.bp-btn-link { background: transparent; border-color: transparent; color: var(--bp-ink-2); margin-left: auto; padding-inline: .6em; }
.bp-btn-link:hover { color: var(--bp-ink); text-decoration: underline; }

/* shared states */
.bp-right { border-color: var(--bp-good) !important; background: var(--bp-good-soft) !important; }
.bp-wrong { border-color: var(--bp-bad) !important; background: var(--bp-bad-soft) !important; }
.bp-selected { border-color: var(--bp-accent-strong) !important; background: var(--bp-accent-soft) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .2); }
.bp-drop-over { border-color: var(--bp-accent-strong) !important; background: var(--bp-accent-soft) !important; }
.bp-dragging { opacity: .35; }
.bp-activity-done .bp-cat-item, .bp-activity-done .bp-os-item, .bp-activity-done .bp-mp-item { cursor: default; }

/* single choice */
.bp-choices { display: grid; gap: 10px; }
.bp-choice {
    font: inherit; text-align: left; color: inherit; background: var(--bp-surface);
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .8em;
    border: 2px solid var(--bp-line); border-radius: 14px; padding: .6em .9em; min-height: 52px; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.bp-choice:hover:not(:disabled) { border-color: var(--bp-accent); background: #f8fafc; }
.bp-choice:active:not(:disabled) { transform: scale(.995); }
.bp-choice-key {
    width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-weight: 700; font-size: .85em; background: #eef2f7; color: var(--bp-ink-2);
}
.bp-choice.bp-right .bp-choice-key { background: var(--bp-good); color: #fff; }
.bp-choice.bp-wrong .bp-choice-key { background: var(--bp-bad); color: #fff; }

/* categorize: bucket cards with a coloured header and a drop zone */
.bp-cat-buckets { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bp-cat-bucket {
    --tone: #2563eb; --tone-soft: #eff4ff;
    display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; cursor: pointer;
    border: 2px solid var(--bp-line); border-radius: 16px; background: var(--bp-surface);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bp-cat-bucket[data-tone="2"] { --tone: #9333ea; --tone-soft: #faf5ff; }
.bp-cat-bucket[data-tone="3"] { --tone: #0891b2; --tone-soft: #ecfeff; }
.bp-cat-bucket[data-tone="4"] { --tone: #c2410c; --tone-soft: #fff7ed; }
.bp-cat-bucket-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: .5em .9em; background: var(--tone-soft); border-bottom: 2px solid var(--tone); color: var(--tone); font-weight: 700;
}
.bp-cat-count { min-width: 1.8em; height: 1.8em; padding: 0 .5em; border-radius: 999px; display: grid; place-items: center; font-size: .8em; background: var(--tone); color: #fff; }
.bp-cat-drop { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-height: 92px; padding: 12px; min-width: 0; }
.bp-cat-empty .bp-cat-drop { align-content: center; justify-content: center; }
.bp-cat-empty .bp-cat-drop::before {
    content: attr(data-hint); color: #94a3b8; font-size: .9em; border: 2px dashed #cbd5e1; border-radius: 12px; padding: .5em 1.2em;
}
.bp-awaiting .bp-cat-bucket { border-color: var(--tone); box-shadow: 0 0 0 4px var(--tone-soft); }
.bp-cat-bucket.bp-drop-over { border-color: var(--tone) !important; background: var(--tone-soft) !important; transform: scale(1.015); box-shadow: 0 10px 28px rgba(15, 23, 42, .12); }
.bp-cat-bucket:focus-visible { outline: 2px solid var(--bp-accent-strong); outline-offset: 3px; }

.bp-cat-pool {
    display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; min-height: 56px; margin-top: 16px; padding: 12px;
    border-radius: 16px; background: #f1f5f9; border: 2px solid transparent;
}
.bp-cat-pool:empty { display: none; }
.bp-cat-item {
    display: inline-flex; align-items: center; min-height: 44px; padding: .35em 1em; cursor: grab; user-select: none; touch-action: none;
    border: 2px solid var(--bp-line); border-radius: 999px; background: var(--bp-surface); box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.bp-cat-item:hover { border-color: var(--bp-accent); box-shadow: 0 4px 12px rgba(15, 23, 42, .12); }
.bp-drag-ghost {
    position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none; margin: 0; cursor: grabbing; white-space: normal;
    border-color: var(--bp-accent-strong); box-shadow: 0 14px 34px rgba(15, 23, 42, .28); color: var(--bp-ink, #0f172a); line-height: 1.6;
}

/* order steps: drag rows, or use the arrows */
.bp-os-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bp-os-item {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; position: relative;
    padding: 6px 8px 6px 4px; border: 2px solid var(--bp-line); border-radius: 14px; background: var(--bp-surface);
    cursor: grab; user-select: none; box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bp-os-item:hover { border-color: #c7d7fe; }
.bp-os-item.bp-dragging { opacity: 1; z-index: 5; cursor: grabbing; border-color: var(--bp-accent-strong); background: var(--bp-accent-soft); box-shadow: 0 14px 34px rgba(15, 23, 42, .22); transition: none; }
.bp-os-grip {
    width: 28px; height: 44px; flex: none; cursor: grab; touch-action: none; border-radius: 8px;
    background-image: radial-gradient(circle, #94a3b8 1.6px, transparent 1.8px); background-size: 8px 8px; background-position: center; background-repeat: repeat;
    background-clip: content-box; padding: 10px 6px;
}
.bp-os-num { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85em; background: #eef2f7; color: var(--bp-ink-2); }
.bp-os-moves { display: flex; gap: 4px; }
.bp-os-move {
    font: inherit; font-weight: 700; width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--bp-line); background: #f8fafc; color: var(--bp-ink-2);
}
.bp-os-move:hover:not(:disabled) { border-color: var(--bp-accent); background: var(--bp-accent-soft); color: var(--bp-accent-strong); }
.bp-os-move:disabled { opacity: .3; cursor: default; }

/* match pairs: a line is drawn between the two halves of a pair */
.bp-mp-board { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(28px, 8cqi, 110px); }
.bp-mp-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.bp-mp-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.bp-mp-lines path { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.bp-mp-lines path.bp-mp-rubber { stroke-dasharray: 7 7; opacity: .85; }
.bp-mp-item {
    --bp-pair: var(--bp-line);
    font: inherit; color: inherit; text-align: left; position: relative; display: block; width: 100%;
    min-height: 52px; padding: .55em .9em; border: 2px solid var(--bp-line); border-radius: 14px; background: var(--bp-surface);
    cursor: grab; user-select: none; touch-action: pan-y; box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.bp-mp-item:hover { border-color: var(--bp-accent); }
.bp-mp-item[data-pair] { border-color: var(--bp-pair); }
.bp-mp-label { display: block; overflow-wrap: break-word; }
/* the round connector on the inner edge: where the line starts and ends */
.bp-mp-port {
    position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; z-index: 3;
    background: var(--bp-surface); border: 3px solid #94a3b8; transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.bp-mp-left .bp-mp-port { right: -10px; }
.bp-mp-right .bp-mp-port { left: -10px; }
.bp-mp-item:hover .bp-mp-port, .bp-mp-item.bp-selected .bp-mp-port, .bp-mp-item.bp-drop-over .bp-mp-port { border-color: var(--bp-accent-strong); transform: scale(1.2); }
.bp-mp-item[data-pair] .bp-mp-port { border-color: var(--bp-pair); background: var(--bp-pair); }
.bp-awaiting .bp-mp-item:not(.bp-selected) .bp-mp-port { border-color: var(--bp-accent); }

/* fill in the blank: a sentence card with pill-shaped gaps */
.bp-fb-card { padding: 1.1em 1.4em; border-radius: 18px; background: #f8fafc; border: 1px solid var(--bp-line); border-left: 5px solid var(--bp-accent-strong); }
.bp-fb-sentence { margin: 0; line-height: 2.7; }
.bp-fb-blank { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 .25em; border: 2px solid #c7d7fe; border-radius: 999px; background: var(--bp-surface); overflow: hidden; line-height: 1.4; transition: border-color .15s ease, box-shadow .15s ease; }
.bp-fb-blank:focus-within { border-color: var(--bp-accent-strong); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.bp-fb-num { align-self: stretch; display: grid; place-items: center; min-width: 2em; padding: 0 .5em; font-size: .8em; font-weight: 700; background: var(--bp-accent-soft); color: var(--bp-accent-strong); }
.bp-fb-select {
    -webkit-appearance: none; appearance: none; font: inherit; font-weight: 600; color: var(--bp-accent-strong); cursor: pointer;
    border: 0; background-color: transparent; min-height: 40px; max-width: 100%; padding: .2em 2.1em .2em .7em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232563eb' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .45em center; background-size: 1.3em;
}
.bp-fb-select:focus { outline: none; }
.bp-fb-select.bp-fb-empty { color: #94a3b8; font-weight: 500; }
.bp-fb-select option { color: var(--bp-ink); font-weight: 500; }
.bp-fb-blank.bp-right .bp-fb-num { background: var(--bp-good); color: #fff; }
.bp-fb-blank.bp-right .bp-fb-select { color: var(--bp-good); }
.bp-fb-blank.bp-wrong .bp-fb-num { background: var(--bp-bad); color: #fff; }
.bp-fb-blank.bp-wrong .bp-fb-select { color: var(--bp-bad); }

.bp-cat-item:focus-visible, .bp-mp-item:focus-visible, .bp-os-move:focus-visible, .bp-choice:focus-visible { outline: 2px solid var(--bp-accent-strong); outline-offset: 2px; }

/* predict_then_run: the simulation appears under the choices once the learner has committed */
.bp-predict-stage { position: relative; margin-top: .8em; min-height: 300px; height: min(46vh, 420px); display: grid; }
.bp-predict-stage[hidden] { display: none; }
.bp-predict-stage > .bp-c-sim { height: 100%; }
.bp-choice.bp-selected { border-color: var(--bp-accent-strong); background: var(--bp-accent-soft); }

/* ---------- control bar ---------- */
.bp-controls {
    background: var(--bp-chrome); color: var(--bp-chrome-ink); min-width: 0;
    padding: 0 10px calc(6px + env(safe-area-inset-bottom));
}
.bp-seek { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.bp-seek-track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); transition: height .12s ease; }
.bp-seek:hover .bp-seek-track, .bp-seek:focus-visible .bp-seek-track { height: 6px; }
.bp-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--bp-accent); }
.bp-seek-fill::after {                                  /* the scrubber knob */
    content: ''; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
    border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(59, 130, 246, .35);
    transform: scale(0); transition: transform .12s ease;
}
.bp-seek:hover .bp-seek-fill::after, .bp-seek:focus-visible .bp-seek-fill::after { transform: scale(1); }
@media (pointer: coarse) { .bp-seek { height: 30px; } .bp-seek-fill::after { transform: scale(1); } }
/* chapter marks: a gap in the bar where each slide starts */
.bp-seek-marks i { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--bp-chrome); }
.bp-seek-marks i.bp-mark-activity { top: -3px; bottom: -3px; width: 8px; height: auto; margin-left: -4px; border-radius: 4px; background: #fbbf24; }
.bp-seek:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; border-radius: 6px; }
.bp-seek-tip {
    position: absolute; bottom: 26px; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
    max-width: 70cqi; overflow: hidden; text-overflow: ellipsis;
    background: rgba(2, 6, 23, .92); color: #fff; font-size: .78rem; padding: 4px 8px; border-radius: 6px;
}
.bp-seek-tip[hidden] { display: none; }

.bp-btn-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.bp-btn {
    font: inherit; color: inherit; background: transparent; border: 0; border-radius: 8px;
    width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; cursor: pointer;
}
.bp-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.bp-btn:disabled { opacity: .35; cursor: default; }
.bp-btn svg { width: 24px; height: 24px; fill: currentColor; }
.bp-btn:focus-visible, .bp-bigplay:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.bp-choice:focus-visible, .bp-btn-primary:focus-visible, .bp-btn-secondary:focus-visible, .bp-btn-ghost:focus-visible, .bp-btn-link:focus-visible { outline: 2px solid var(--bp-accent-strong); outline-offset: 2px; }
.bp-icon-pause, .bp-is-playing .bp-icon-play, .bp-icon-muted, .bp-is-muted .bp-icon-sound { display: none; }
.bp-is-playing .bp-icon-pause, .bp-is-muted .bp-icon-muted { display: block; }
/* volume: always visible where there is room and a mouse; phones use their hardware keys */
.bp-volume-group { display: flex; align-items: center; flex: none; }
.bp-volume {
    -webkit-appearance: none; appearance: none; display: none;
    width: 84px; height: 4px; margin: 0 10px 0 2px; border-radius: 2px; cursor: pointer;
    background: linear-gradient(to right, #fff var(--bp-volume, 100%), rgba(255, 255, 255, .28) var(--bp-volume, 100%));
}
.bp-volume::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.bp-volume::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.bp-volume::-moz-range-track { background: transparent; }
.bp-volume:focus-visible { outline: 2px solid #93c5fd; outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) { .bp-volume { display: block; } }
@container bp (max-width: 560px) { .bp-volume { display: none; } }
/* Very narrow players: a phone in a card, or a small handset. The bar had more
   buttons than room, so the fullscreen button fell off the right edge. Volume
   goes first, because every phone has hardware volume keys and none of the
   others have a substitute. */
@container bp (max-width: 380px) {
    .bp-volume-group { display: none; }
    .bp-btn { width: 38px; }
    .bp-time { font-size: .72rem; margin-left: 2px; }
    .bp-rate { min-width: 40px; padding: 0 4px; }
    .bp-controls { padding-left: 4px; padding-right: 4px; }
}

.bp-time { font-size: .82rem; margin-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; color: #cbd5e1; }
.bp-rate { width: auto; min-width: 48px; padding: 0 8px; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bp-spacer { flex: 1; min-width: 0; }
.bp-on-activity #bp-play { visibility: hidden; }

/* ---------- fullscreen: the picture takes everything, the bar floats over it ---------- */
.bp-is-full { grid-template-rows: minmax(0, 1fr); }
.bp-is-full .bp-board-body { padding-bottom: 96px; }      /* the last line can scroll clear of the bar */
.bp-is-full .bp-controls {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    background: linear-gradient(to top, rgba(11, 18, 32, .96) 60%, rgba(11, 18, 32, 0));
    padding-top: 18px;
    transition: opacity .25s ease, transform .25s ease;
}
/* After a few idle seconds while playing, the bar and the cursor get out of the way. */
.bp-is-full.bp-idle .bp-controls { opacity: 0; transform: translateY(12px); pointer-events: none; }
.bp-is-full.bp-idle, .bp-is-full.bp-idle .bp-stage { cursor: none; }

/* ---------- end screen ---------- */
.bp-complete {
    position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 12px;
    text-align: center; padding: 24px; background: rgba(11, 18, 32, .94); color: #fff; cursor: default;
}
.bp-complete[hidden] { display: none; }
.bp-complete h2 { margin: 0; font-size: 1.6rem; }
.bp-complete p { margin: 0 0 6px; color: #cbd5e1; max-width: 34ch; }
.bp-preview-flag {
    position: absolute; top: 8px; right: 8px; z-index: 4; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    background: #fef3c7; color: #92400e; border: 1px solid #fde68a; padding: 2px 8px; border-radius: 999px;
}

/* ---------- narrow phones ---------- */
@container bp (max-width: 480px) {
    .bp-btn { width: 40px; height: 40px; }
    .bp-time { font-size: .76rem; margin-left: 4px; }
    .bp-bigplay { width: 68px; height: 68px; }
    .bp-bigplay svg { width: 32px; height: 32px; }
    .bp-figure img { max-height: 30vh; }   /* leave room for the points under an image */
    /* matching on a phone: tighter cards, a narrow lane for the lines */
    .bp-sim { gap: 8px; }
    .bp-lg-table th, .bp-lg-table td { padding: .1em .4em; }
    .bp-lg-table caption { display: none; }
    .bp-sim-readout { padding: .3em .7em; }
    .bp-mp-board { column-gap: 26px; }
    .bp-mp-col { gap: 10px; }
    .bp-mp-item { padding: .5em .65em; }
    .bp-mp-port { width: 14px; height: 14px; margin-top: -7px; }
    .bp-mp-left .bp-mp-port { right: -9px; }
    .bp-mp-right .bp-mp-port { left: -9px; }
    .bp-os-item { gap: 6px; padding-right: 6px; }
    .bp-os-move { width: 36px; }
    .bp-fb-card { padding: .8em .9em; }
    .bp-cat-drop { min-height: 76px; padding: 10px; }
}

/* ---------- roomy: picture sits in a frame, image beside text ---------- */
@container bp (min-width: 700px) {
    .bp-board-head { padding: 20px 32px 16px; }
    .bp-board-body { padding: 24px 32px 32px; }
    .bp-status:not(:empty) { margin: 4px 32px; }
    .bp-has-image { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2em; }
    .bp-figure img { max-height: 60vh; }
    .bp-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bp-controls { padding: 0 16px 8px; }
}
/* On a very wide player the slide still fills the width, but its content is
   centred and held to a comfortable line length. Text lines that run the full
   width of a large monitor are tiring to read. The scrollbar stays at the edge. */
@container bp (min-width: 1240px) {
    /* Widths are in em, so they grow with the text: the content takes roughly
       two thirds to three quarters of a very wide player at every size. The
       picture scales up like a video instead of sitting as a small island. */
    .bp-board-head, .bp-status:not(:empty) { width: 100%; max-width: calc(62em + 64px); margin-inline: auto; }
    .bp-board-body > :not(.bp-activity) { max-width: 62em; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .bp-bullet, .bp-bullet::before, .bp-group-heading, .bp-group-intro, .bp-note, .bp-bigplay, .bp-seek-track, .bp-seek-fill::after, .bp-is-full .bp-controls { transition: none; }
}

/* ---------- very large players (big monitors, 4K at low scaling) ---------- */
@container bp (min-width: 2200px) {
    .bp-btn { width: 56px; height: 56px; }
    .bp-btn svg { width: 30px; height: 30px; }
    .bp-time, .bp-rate { font-size: 1.05rem; }
    .bp-seek { height: 28px; }
    .bp-seek-track { height: 6px; }
    .bp-volume { width: 120px; height: 6px; }
    .bp-seek:hover .bp-seek-track, .bp-seek:focus-visible .bp-seek-track { height: 9px; }
    .bp-bigplay { width: 120px; height: 120px; }
    .bp-bigplay svg { width: 56px; height: 56px; }
    .bp-controls { padding: 0 28px 12px; }
    .bp-board-head { padding-top: 32px; }
}