/* Orli v3 site · Try a Bite · the class board (the pupil screen)
   ---------------------------------------------------------------------------
   A port of how "Breathe with Orla" looks on the class board in Orli Schools
   (origin/main 91c32168, 3 Nov 2026: Debbie's Bites review of 26 Oct, so the
   Bite's card and "What is an Orli Bite?" open it, there is no Orli-bop, and
   the shared ending closes it). The values here are the product's own, so
   they are scoped to the board and not site tokens:

     BiteFrame.css (opening, class note, closing aside), SpeechBeats,
     ReflectionPrompts, AdventureCelebration + SharedStage.css
     BiteActivityStage.css ("Orla's pond", approved 18 Oct 2026)
     RoryAdventure.css (.composer-pupil-stage)  where the stage is tinted
     adventureDesignSystem.ts (ADVENTURE_RUNTIME_THEMES.orla)  Orla's colours

   Everything is sized in container units of the 16:9 screen (cqw / cqh), as
   the product's stage is, so the board is the same picture at any size. The
   product's px minimums are left out: on a phone the board is a faithful
   miniature and the captions under it carry the words.
   ------------------------------------------------------------------------- */

.tb-screen {
  /* ADVENTURE_RUNTIME_THEMES.orla */
  --b-accent: #328360;
  --b-bright: #65c598;
  --b-soft: #ddefdf;
  --b-deep: #195440;
  --b-ink: #243d30;
  --b-paper: #fffdf7;
  --b-cream: #fffdf6;
  /* The stage's tint behind titles and celebrations. The product's composed
     stage uses Rory's red here for every world (RoryAdventure.css), which
     browns Orla's garden; this port uses Orla's own deep green instead
     (logged for the product in INTEGRATION.md). Same weights as the product. */
  --b-tint: rgb(18 58 42 / .48);
    --b-shade: rgb(14 44 32 / .32);     /* text shadow on the tint */
  --b-card-r: 2.258cqw;               /* StageSystem.css --stage-card-radius */
  --b-ease: cubic-bezier(.22, 1, .36, 1);
  --b-scene: 420ms;
  /* The visitor's own text size: the board's words grow with it, like
     every other page (WCAG 1.4.4). player.js sets the ratio of the root
     size to the browser's default 16 px (1 at default, so the picture is
     unchanged); the board's words are sized "Ncqw * --tb-ts". */
  --tb-ts: 1;

  position: relative; isolation: isolate;
  aspect-ratio: 16 / 9; width: 100%;
  container-type: size;
  overflow: hidden;
  background: var(--b-soft);
  color: var(--b-ink);
  font-family: var(--o-font-ui);
  -webkit-user-select: none; user-select: none;
}
.tb-screen img { -webkit-user-drag: none; }

/* ============================================================ the world
   Orla's garden behind every moment; the pond for the breathing. Questions
   soften the world a little (RoryAdventureStage softensWorld). */
.tb-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tb-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--b-scene) ease, filter 700ms ease, scale 700ms ease;
}
.tb-art__pond { opacity: 0; }
.tb-screen[data-moment="practice"] .tb-art__pond { opacity: 1; }
.tb-screen[data-moment="reflect"] .tb-art__garden { filter: blur(.25cqw); scale: 1.04; }
/* The Bite's card and the class note: the world stays behind, softened
   (BiteFrame.css: blur, then a paper-to-mint veil). */
.tb-screen:is([data-moment="waiting"], [data-moment="about"]) .tb-art__garden { filter: blur(.4cqw) saturate(.85); scale: 1.05; }
/* The tint belongs to the stage, not to a moment, so it eases from one
   moment to the next without a bright flash in between. */
.tb-art::after { content: ""; position: absolute; inset: 0; background-color: transparent; transition: background-color var(--b-scene) ease; }
.tb-art::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity var(--b-scene) ease;
  background: linear-gradient(180deg, color-mix(in srgb, var(--b-paper) 46%, transparent), color-mix(in srgb, var(--b-soft) 38%, transparent) 60%, color-mix(in srgb, var(--b-deep) 18%, transparent)); }
.tb-screen:is([data-moment="waiting"], [data-moment="about"]) .tb-art::before { opacity: 1; }
.tb-screen[data-moment="complete"] .tb-art::after { background-color: var(--b-tint); }

/* ============================================================== scenes
   A moment that isn't on the board is hidden outright. Only the incoming
   moment fades in, so two moments' words never show at once. */
.bs {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; visibility: hidden; transition: none;
}
.bs[data-active] { opacity: 1; visibility: visible; transition: opacity var(--b-scene) ease; }
.bs h2, .bs p { margin: 0; }

/* Shared board controls: the product's stage buttons. The ring keeps the
   site's 3px #1F3D32 with a white gap so it shows on any painting. */
.bs :where(button) {
  font: inherit; color: inherit; margin: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bs button:focus-visible { outline: 3px solid var(--o-focus); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
.bs :where(button:disabled) { cursor: default; }

/* The doodle icons, drawn in currentColor (SchoolsDoodle) */
.b-ico { display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.b-ico--arrow { --m: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-arrow-right.svg"); }
.b-ico--back { --m: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-arrow-left.svg"); }
.b-ico--tick { --m: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg"); }
.b-ico--clock { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--clock.svg"); }
.b-ico--heart { --m: url("../../../../design-kit/icons/schools-doodles/resources--doodle-heart.svg"); }
.b-ico--again { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--replay.svg"); }

/* The shared paper card (StageSystem.css) */
.bs-card {
  background: var(--b-paper);
  border: 1px solid rgb(255 255 255 / .9);
  border-radius: var(--b-card-r);
  box-shadow: 0 1.4cqh 3.2cqh color-mix(in srgb, var(--b-deep) 18%, transparent);
}
/* The screen title pill (adventure-screen-title) */
.bs-pill {
  position: absolute; z-index: 6; left: 50%; top: 4.6%; translate: -50% 0;
  padding: 1.5cqh 2.4cqw; border-radius: 999px;
  background: rgb(255 253 248 / .97); border: 1px solid rgb(255 255 255 / .9);
  box-shadow: 0 .8cqh 2cqh rgb(11 47 71 / .16);
  color: var(--b-deep); font: 750 calc(2.3cqw * var(--tb-ts, 1)) / 1.1 var(--o-font-ui); letter-spacing: -.02em; white-space: nowrap;
}

/* ================================================ 1 · the Bite's card
   The Bite's own storybook card, floating gently, the title in a pill at
   the top and Orla waiting at the card's corner (BiteFrame.css
   .bite-opening). Before Play this is the poster. */
.bs-open__card {
  position: absolute; z-index: 2; top: 21%; left: 50%; width: min(30cqw, 52cqh);
  display: grid; overflow: hidden; translate: -50% 0; rotate: -2deg;
  border-radius: 1.8cqw; background: var(--b-paper);
  box-shadow: 0 2.4cqh 5cqh color-mix(in srgb, var(--b-deep) 26%, transparent);
  animation: bs-open-float 5.5s ease-in-out infinite;
}
.bs-open__cover { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 70%; }
.bs-open__body { display: grid; gap: 1cqh; padding: 2.2cqh 1.8cqw 2.4cqh; }
.bs-open__body b { color: var(--b-deep); font: 800 calc(2.4cqw * var(--tb-ts, 1)) / 1.05 var(--o-font-ui); letter-spacing: -.02em; }
.bs-open__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8cqw; color: var(--b-ink); font: 650 calc(1.25cqw * var(--tb-ts, 1)) / 1.2 var(--o-font-ui); }
.bs-open__meta > span:first-child { padding: .5cqh .9cqw; border-radius: 999px; background: var(--b-soft); color: var(--b-deep); }
.bs-open__meta > span:last-child { display: inline-flex; align-items: center; gap: .4cqw; }
.bs-open__orla { position: absolute; z-index: 3; bottom: 7%; left: 59%; width: min(16cqw, 28cqh); transform-origin: 50% 100%;
  animation: bs-open-sway 4.5s ease-in-out infinite; }
.bs-open__orla img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1.2cqh 1.4cqh rgb(24 40 28 / .22)); }
@keyframes bs-open-float { 50% { translate: -50% -1.4cqh; rotate: 1deg; } }
@keyframes bs-open-sway { 50% { translate: 0 -.8cqh; rotate: -3deg; } }

/* ============================================ 1 · What is an Orli Bite?
   A plain note to the class on one paper card, no Orli speaking: one lead
   line, then two points with doodles, to take in at a glance from the back
   of the room (BiteFrame.css .bite-about). The product's small "Orli Bites"
   label over the title is left out (no kicker titles on the site). */
.bs-about__card {
  position: absolute; z-index: 2; top: 50%; left: 50%; translate: -50% -50%;
  display: grid; justify-items: center; gap: 2.6cqh; width: min(70cqw, 124cqh);
  padding: 5.6cqh 4.4cqw 5cqh; text-align: center;
}
.bs-about__card h2 { color: var(--b-deep); font: 800 calc(4.4cqw * var(--tb-ts, 1)) / 1.05 var(--o-font-ui); letter-spacing: -.03em; text-wrap: balance; }
.bs-about__lead { max-width: 34ch; color: var(--b-ink); font: 650 calc(2.4cqw * var(--tb-ts, 1)) / 1.25 var(--o-font-ui); text-wrap: balance; }
.bs-about__points { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; width: 100%; margin: 1cqh 0 0; padding: 0; list-style: none; }
.bs-about__points li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.4cqw;
  padding: 2.4cqh 1.8cqw; border-radius: 1.8cqw; background: var(--b-soft); text-align: start;
  color: var(--b-ink); font: 650 calc(2cqw * var(--tb-ts, 1)) / 1.25 var(--o-font-ui); text-wrap: pretty;
}
.bs-about__icon { display: grid; place-items: center; width: 8cqh; aspect-ratio: 1; border-radius: 50%; background: var(--b-paper); color: var(--b-deep); }
.bs-about__icon .b-ico { width: 58%; height: 58%; }

/* =================================================== 3 · Orla speaks
   Orla on the left, one line at a time in the bubble (SpeechBeats). */
.bs-actor { position: absolute; z-index: 8; left: 21%; top: 89%; height: 54%; aspect-ratio: 1; translate: -50% -100%; }
.bs-actor img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
  transform-origin: 50% 100%; animation: bs-sway 5.6s ease-in-out infinite; }
.bs-actor::after { content: ""; position: absolute; z-index: 0; left: 18%; right: 18%; bottom: -3%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(14 44 32 / .36), transparent); }
@keyframes bs-sway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }
.bs-actor[data-speaking] img { animation: bs-sway 5.6s ease-in-out infinite, bs-speak 1.6s ease-in-out infinite; }
@keyframes bs-speak { 0%, 100% { scale: 1; } 30% { scale: 1.03 .975; } 60% { scale: .99 1.015; } }

.bs-beats {
  position: absolute; z-index: 10; left: 39%; right: 5.5%; top: 58%; translate: 0 -50%;
  padding: 3.8cqh 2.6cqw 3.6cqh; border-radius: 1.8cqw;
  background: #f7f6f2; color: #2b2a27;
  box-shadow: 0 1cqh 2.6cqh rgb(11 31 22 / .2);
}
.bs-beats__tail { position: absolute; left: -1.1cqw; top: 50%; width: 2.4cqw; height: 2.4cqw; translate: 0 -50%; rotate: 45deg; background: inherit; border-radius: .3cqw; }
.bs-beats__line { position: relative; font: 600 calc(2.6cqw * var(--tb-ts, 1)) / 1.32 var(--o-font-ui); letter-spacing: -.01em; text-wrap: pretty; min-height: 1.32em; }
.bs-beats__line span { display: block; }
.bs-beats__line[data-fresh] { animation: bs-line 420ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes bs-line { from { opacity: 0; translate: 0 1.2cqh; } }
.bs-beats__dots { display: flex; gap: .7cqw; margin-block-start: 1.6cqh; }
.bs-beats__dots i { width: .9cqw; height: .9cqw; border-radius: 50%; background: rgb(36 102 73 / .25); }
.bs-beats__dots i[data-on] { background: #2f8a5f; }
.bs-beats__controls { position: absolute; right: -1.2cqw; bottom: -2.4cqh; display: flex; align-items: center; gap: .8cqw; }
.bs-beats__controls button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6cqw;
  min-width: 4.4cqw; height: 4.4cqw; padding: 0 1.2cqw; border-radius: 999px;
  border: 1px solid rgb(31 61 50 / .16); background: #fff; color: var(--b-deep);
  font: 700 calc(1.5cqw * var(--tb-ts, 1)) / 1 var(--o-font-ui); box-shadow: 0 .5cqh 1.2cqh rgb(11 31 22 / .16);
}
.bs-beats__controls .b-ico { width: 1.6cqw; height: 1.6cqw; }
.bs-beats__back { padding: 0 !important; width: 4.4cqw; }
.bs-beats__next { background: var(--b-deep) !important; color: var(--b-cream) !important; border-color: transparent !important; }
.bs-beats__done { width: 4.4cqw; padding: 0 !important; background: #e9f5ee !important; border: .25cqw solid #2f8a5f !important; color: #2f8a5f !important; }
.bs-beats__controls button:disabled { opacity: .45; }

/* ==================================================== 4 · Orla's pond
   The painted pond is the guide: Orla floats on the lily pad and one lily
   opens after each breath out, so the pond counts the breaths. Each breath
   goes in and comes back out (website review, 3 Nov): on the breath in a
   ring of light grows round her pad, the water around her lightens and she
   rises a little; on the breath out all three return to where they began.
   player.js drives --rs (the ring's size) and the opacities from the clock.
   Reduced motion: the light only. Still: the words and the count only. */
.bs--pond::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 52%, rgb(24 40 28 / .12)); transition: opacity var(--b-scene) ease; }
.bs--pond[data-started]::after { opacity: 0; }
.bs-pond { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bs-pond__glow { position: absolute; left: 50%; top: 76%; width: 80cqw; aspect-ratio: 2.3; translate: -50% -50%; opacity: 0;
  background: radial-gradient(closest-side, rgb(255 253 236 / .95), rgb(255 250 225 / .6) 42%, rgb(255 250 225 / 0)); }
.bs-pond__ripple { position: absolute; left: 50%; top: 78.5%; width: 46cqw; aspect-ratio: 4.2; translate: -50% -50%;
  display: grid; place-items: center; opacity: 0; transform: scale(var(--rs, .52)); }
.bs-pond__ripple > span { grid-area: 1 / 1; width: 100%; height: 100%; border: max(2px, .45cqw) solid rgb(255 254 246); border-radius: 50%;
  box-shadow: 0 0 0 max(1px, .16cqw) rgb(25 84 64 / .22), 0 0 1.8cqw rgb(255 250 225 / .9), inset 0 0 1.6cqw rgb(255 250 225 / .6); }
.bs-pond__ripple > span + span { width: 70%; height: 70%; opacity: .7; }
.bs-pond__lily { position: absolute; width: 7.4cqw; height: auto; translate: -50% -64%; opacity: 0; scale: .45;
  filter: drop-shadow(0 .4cqh .6cqh rgb(24 40 28 / .18)); transition: opacity 900ms ease, scale 900ms var(--b-ease); }
.bs-pond__lily[data-open] { opacity: 1; scale: 1; }
.bs-pond__orla { position: absolute; left: 50%; top: 78.5%; width: 10.5cqw; translate: -50% -94%; transform-origin: 50% 100%; }
.bs-pond__orla > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1cqh 1.2cqh rgb(24 40 28 / .2)); }

/* Before the start: the card on the right holds the words and the ways to
   join in, with one Start. */
.bs-cue {
  position: absolute; z-index: 2; top: 7%; bottom: 7%; right: 4%; width: 38%; height: fit-content; margin: auto 0;
  display: grid; align-content: start; gap: 3.6cqh; padding: 5.6cqh 3.4cqw 5.2cqh;
  /* With the visitor's larger text the card scrolls inside the board
     rather than losing Start off its foot. */
  max-height: 86%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  transition: opacity var(--b-scene) ease, translate var(--b-scene) var(--b-ease);
}
.bs--pond[data-started] .bs-cue { opacity: 0; translate: 2cqw 0; visibility: hidden; transition: opacity var(--b-scene) ease, translate var(--b-scene) var(--b-ease), visibility 0s linear var(--b-scene); }
.bs-cue__words { display: grid; gap: 1.8cqh; }
.bs-cue h2 { color: var(--b-deep); font: 800 calc(3.4cqw * var(--tb-ts, 1)) / 1.06 var(--o-font-ui); letter-spacing: -.03em; text-wrap: balance; }
.bs-cue p { color: var(--b-ink); font: 500 calc(2cqw * var(--tb-ts, 1)) / 1.45 var(--o-font-body); text-wrap: pretty; }
.bs-ways { display: grid; gap: 1.4cqh; }
.bs-ways__label { color: color-mix(in srgb, var(--b-ink) 72%, transparent) !important; font: 700 calc(1.45cqw * var(--tb-ts, 1)) / 1.25 var(--o-font-body) !important; }
/* The three ways as three tiles, each with its picture (Ryan, 3 Nov: the
   dots said nothing): Orla held in cupped hands, a board with the breath
   rising and falling, an open eye. Drawn in the Schools doodle line in
   Orla's colours; the hands and Orla are vector or 2x art, so they stay
   crisp on a classroom screen. */
.bs-ways ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9cqw; margin: 0; padding: 0; list-style: none; }
.bs-ways li { display: flex; border-radius: 1.4cqw; background: var(--b-soft); color: var(--b-deep); }
.bs-ways button {
  flex: 1; display: grid; justify-items: center; align-content: start; gap: .9cqh; width: 100%; padding: 1.6cqh .6cqw 1.8cqh;
  border: 2px solid transparent; border-radius: inherit; background: none; text-align: center;
  font: 700 calc(1.5cqw * var(--tb-ts, 1)) / 1.15 var(--o-font-ui); text-wrap: balance;
}
.bs-way-ico {
  display: block; width: 6.2cqw; height: auto; aspect-ratio: 1; overflow: visible; border-radius: 50%; background: var(--b-paper);
  box-shadow: 0 .3cqh .8cqh color-mix(in srgb, var(--b-deep) 16%, transparent);
  fill: none; stroke: var(--b-deep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.bs-way-ico__hand { fill: #f6e3cf; }
.bs-way-ico__fill { fill: #e4f2e8; }
.bs-way-ico__wave { stroke: var(--b-accent); stroke-width: 3; }
.bs-way-ico__dot { fill: var(--b-bright); stroke-width: 2.2; }
.bs-way-ico__iris { fill: var(--b-bright); stroke-width: 2.2; }
.bs-way-ico__pupil { fill: var(--b-deep); stroke: none; }
.bs-way-ico__shine { fill: #fff; stroke: none; }
.bs-ways li:has([aria-pressed="true"]) { background: var(--b-deep); color: var(--b-paper); }
.bs-ways [aria-pressed="true"] .bs-way-ico { box-shadow: 0 0 0 .3cqw var(--b-bright); }
@media (hover: hover) and (pointer: fine) { .bs-ways button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--b-deep) 40%, transparent); } }
.bs-start {
  justify-self: start; display: inline-flex; align-items: center; gap: 1cqw;
  min-height: 8cqh; margin-top: .8cqh; padding: 1.6cqh 3cqw; border: 0; border-radius: 999px;
  background: var(--b-deep); color: var(--b-paper);
  font: 800 calc(1.9cqw * var(--tb-ts, 1)) / 1 var(--o-font-ui); letter-spacing: -.01em;
  box-shadow: 0 .8cqh 1.6cqh color-mix(in srgb, var(--b-deep) 28%, transparent);
}
.bs-start .b-ico { width: 1.9cqw; height: 1.9cqw; }
@media (hover: hover) and (pointer: fine) { .bs-start:hover:not(:disabled) { background: color-mix(in srgb, var(--b-deep) 86%, #000); } }

/* While breathing: the breath in big friendly words at the top. */
.bs-word { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bs-word__card {
  position: absolute; top: 6%; left: 50%; translate: -50% 0;
  display: grid; justify-items: center; gap: .6cqh; padding: 2cqh 3.4cqw 2.2cqh;
  border-radius: 3.2cqw; background: rgb(255 253 248 / .96); box-shadow: 0 1.2cqh 3cqh rgb(24 40 28 / .18);
  text-align: center; white-space: nowrap;
}
.bs-word__card strong { display: inline-block; color: var(--b-deep); font: 800 calc(4.6cqw * var(--tb-ts, 1)) / 1 var(--o-font-ui); letter-spacing: -.03em; }
.bs-word__card > span { color: color-mix(in srgb, var(--b-ink) 78%, transparent); font: 600 calc(1.7cqw * var(--tb-ts, 1)) / 1.3 var(--o-font-body); }
/* Breathing in, the card is a little lighter and mint; breathing out, paper again. */
.bs-word__card[data-breath="in"] { background: rgb(240 250 243 / .97); }
.bs-word__card[data-breath="in"] strong[data-fresh] { animation: bs-word-in 520ms cubic-bezier(.34, 1.5, .5, 1) both; }
.bs-word__card[data-breath="out"] strong[data-fresh] { animation: bs-word-out 520ms cubic-bezier(.34, 1.5, .5, 1) both; }
.bs-word__card:is([data-breath="ready"], [data-breath="done"]) strong[data-fresh] { animation: bs-word-in 520ms cubic-bezier(.34, 1.5, .5, 1) both; }
@keyframes bs-word-in { from { opacity: 0; scale: .8; } }
@keyframes bs-word-out { from { opacity: 0; scale: 1.15; } }
.bs-word__card[hidden] { display: none; }
/* The breath's four seconds, to count along (the product counts them for its other breathing Bites). */
.bs-word__count { display: flex; gap: .8cqw; margin-block-start: .6cqh; }
.bs-word__card:is([data-breath="ready"], [data-breath="done"]) .bs-word__count { display: none; }
.bs-word__count i {
  display: grid; place-items: center; width: 3.2cqw; aspect-ratio: 1; border-radius: 50%;
  border: .2cqw solid color-mix(in srgb, var(--b-deep) 30%, transparent); color: color-mix(in srgb, var(--b-deep) 55%, transparent);
  font: 800 calc(1.5cqw * var(--tb-ts, 1)) / 1 var(--o-font-ui); font-style: normal;
}
.bs-word__count i[data-on] { border-color: var(--b-deep); background: var(--b-deep); color: var(--b-paper); }

/* ===================================================== 5 · A moment to notice */
.bs--reflect .bs-actor { left: 22%; top: 90%; height: 46%; }
.bs-reflect { position: absolute; z-index: 9; left: 41%; right: 6%; top: 19%; bottom: 10%; display: grid; align-content: center; gap: 3.4cqh; }
.bs-marks { display: flex; gap: 1.4cqw; }
.bs-mark {
  position: relative; display: grid; place-items: center;
  width: 9.4cqw; aspect-ratio: 1; padding: 0; border-radius: 50%;
  border: .3cqw solid rgb(255 255 255 / .9); background: var(--b-paper); color: var(--b-deep);
  box-shadow: 0 1cqh 2.2cqh color-mix(in srgb, var(--b-deep) 22%, transparent);
  font: 800 calc(5cqw * var(--tb-ts, 1)) / 1 var(--o-font-ui);
}
.bs-mark small { position: absolute; right: -.4cqw; bottom: -.4cqw; display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; border-radius: 50%;
  background: var(--b-deep); color: var(--b-paper); font: 800 calc(1.6cqw * var(--tb-ts, 1)) / 1 var(--o-font-ui); }
.bs-mark[aria-pressed="true"] { background: var(--b-deep); color: var(--b-paper); }
.bs-mark[aria-pressed="true"] small { background: var(--b-bright); color: var(--b-deep); }
.bs-mark:not(:disabled):not([aria-pressed="true"]) { animation: bs-mark-call 3.6s ease-in-out infinite; }
@keyframes bs-mark-call { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2cqh; } }
.bs-reflect__card { display: grid; gap: 1.6cqh; padding: 4.4cqh 3cqw; }
.bs-reflect__card h2 { color: var(--b-deep); font: 800 calc(3.4cqw * var(--tb-ts, 1)) / 1.12 var(--o-font-ui); letter-spacing: -.025em; text-wrap: balance; }
.bs-reflect__card p { color: var(--b-ink); font: 600 calc(2cqw * var(--tb-ts, 1)) / 1.4 var(--o-font-body); }
.bs-reflect__card [hidden] { display: none; }

/* ======================================================= 6 · complete
   The shared Bite ending (AdventureCelebration, bite-closing): the world
   warms, Orla hops twice, a little confetti, then the words: well done,
   naming the Bite, Orla's line in a bubble beside her, and the Bite's cover
   with a reminder that the class can come back to it. */
.bs--complete {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "title title" "orla aside" "action action";
  align-items: center; column-gap: 3cqw; padding: 5.5cqh 7cqw 6cqh; color: var(--b-cream);
}
.bs-done__shift { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 900ms ease;
  background: radial-gradient(circle at 50% 62%, rgb(255 154 88 / .16), transparent 70%); }
.bs--complete[data-stage] .bs-done__shift { opacity: 1; }
.bs-done__title, .bs-done__aside { opacity: 0; translate: 0 1.2cqh; transition: opacity 520ms var(--b-ease), translate 520ms var(--b-ease); }
.bs--complete:is([data-stage="reveal"], [data-stage="ready"]) :is(.bs-done__title, .bs-done__aside) { opacity: 1; translate: 0 0; }
.bs-done__title { grid-area: title; position: relative; z-index: 5; justify-self: center; max-width: 24ch; text-align: center;
  color: var(--b-cream); font: 800 calc(4cqw * var(--tb-ts, 1)) / 1.08 var(--o-font-ui); letter-spacing: -.03em; text-wrap: balance;
  text-shadow: 0 3px 16px var(--b-shade); }
.bs-done__orla { grid-area: orla; position: relative; z-index: 3; justify-self: end; height: min(100%, 44cqh); aspect-ratio: 1; align-self: end;
  opacity: 0; translate: 0 1.2cqh; transition: opacity 520ms var(--b-ease), translate 520ms var(--b-ease); }
.bs-done__orla img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%; }
.bs--complete[data-stage]:not([data-stage="shift"]) .bs-done__orla { opacity: 1; translate: 0 0; }
.bs--complete[data-stage]:not([data-stage="shift"]) .bs-done__orla img { animation: bs-hop 1.6s cubic-bezier(.34, 1.2, .64, 1) 1 both; }
@keyframes bs-hop { 0% { transform: translateY(0) scale(1, 1); } 18% { transform: translateY(-9%) scale(.96, 1.05); } 36% { transform: translateY(0) scale(1.05, .94); }
  52% { transform: translateY(-5%) scale(.98, 1.03); } 68% { transform: translateY(0) scale(1.02, .98); } 100% { transform: translateY(0) scale(1, 1); } }
/* Orla's line in a speech bubble that hugs its words, its tail towards her; under it the Bite's cover. */
.bs-done__aside { grid-area: aside; position: relative; z-index: 5; display: grid; justify-items: start; gap: 2.6cqh; }
.bs-done__bubble {
  position: relative; max-width: 20ch; padding: 2.6cqh 2.4cqw; border-radius: 2cqw; background: #f7f6f2; color: #2b2a27;
  font: 700 calc(2.6cqw * var(--tb-ts, 1)) / 1.25 var(--o-font-ui); letter-spacing: -.01em; text-wrap: balance;
  box-shadow: 0 1cqh 2.6cqh rgb(11 31 22 / .22);
}
.bs-done__bubble::before { content: ""; position: absolute; left: -1cqw; top: 58%; width: 2.2cqw; aspect-ratio: 1; translate: 0 -50%; rotate: 45deg; background: inherit; border-radius: .3cqw; }
.bs-done__again {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.2cqw; max-width: 30cqw;
  padding: 1.2cqh 1.6cqw 1.2cqh 1.2cqh; border-radius: 1.6cqw; background: rgb(255 253 248 / .95); color: var(--b-ink);
  font: 650 calc(1.5cqw * var(--tb-ts, 1)) / 1.3 var(--o-font-ui); box-shadow: 0 .6cqh 1.6cqh rgb(11 31 22 / .18);
}
.bs-done__again img { width: 6.4cqw; height: auto; aspect-ratio: 1; border-radius: 1cqw; object-fit: cover; object-position: 50% 70%; }
.bs-done__again .b-ico { width: 1.5cqw; height: 1.5cqw; margin-inline-end: .5cqw; vertical-align: -.2cqw; color: var(--b-deep); }
.bs-done__action {
  grid-area: action; justify-self: center;
  position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 1cqw;
  min-height: max(44px, 7.6cqh); padding: 1.4cqh 2.8cqw; border: 0; border-radius: 999px;
  background: rgb(255 253 248 / .97); color: var(--b-deep); font: 800 calc(1.9cqw * var(--tb-ts, 1)) / 1 var(--o-font-ui);
  box-shadow: 0 .8cqh 1.8cqh rgb(11 31 22 / .22);
  opacity: 0; transition: opacity 520ms var(--b-ease);
}
.bs-done__action .b-ico { width: 1.9cqw; height: 1.9cqw; }
.bs--complete[data-stage="ready"] .bs-done__action { opacity: 1; }
.bs-done__confetti { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.bs-done__confetti i {
  position: absolute; top: -6%; left: var(--x); width: var(--s); height: calc(var(--s) * 1.6);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--c); opacity: 0;
  animation: bs-fall var(--d) cubic-bezier(.3, .2, .5, 1) var(--w) 1 both;
}
@keyframes bs-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(var(--r)); }
  8% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), 112cqh) rotate(calc(var(--r) + 260deg)); }
}

/* ================================================================= back
   Back, on the board itself (website review, 3 Nov: there was no way back
   inside the Bite): one step back, on every step but the first. A paper
   pill in the top left corner, which every moment keeps clear; a full 44px
   target at any board size. */
.bs-back {
  position: absolute; z-index: 21; top: 3cqh; left: 2cqw;
  display: inline-flex; align-items: center; gap: .7cqw; min-height: max(44px, 7cqh); padding: 0 max(12px, 1.8cqw) 0 max(10px, 1.4cqw);
  border: 1px solid rgb(255 255 255 / .9); border-radius: 999px; background: rgb(255 253 248 / .96); color: var(--b-deep);
  box-shadow: 0 .6cqh 1.6cqh rgb(11 31 22 / .18);
  font: 750 max(14px, calc(1.6cqw * var(--tb-ts, 1))) / 1 var(--o-font-ui); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bs-back .b-ico { width: max(14px, 1.6cqw); height: max(14px, 1.6cqw); }
.bs-back[hidden] { display: none; }
.bs-back:focus-visible { outline: 3px solid var(--o-focus); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
@media (hover: hover) and (pointer: fine) { .bs-back:hover { background: #fff; } }
/* A small board (a phone): a round 44px arrow in the corner, clear of the
   note's card and the breath's words. The word stays for screen readers. */
@container tb-board (max-width: 519.98px) {
  .bs-back { top: 5px; left: 5px; width: 44px; height: 44px; min-height: 0; padding: 0; justify-content: center; }
  .bs-back .b-ico { width: 16px; height: 16px; }
  .bs-back__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
}

/* ============================================================== paused
   The session is paused: everything holds, the board carries one tag. */
.bs-paused {
  position: absolute; z-index: 20; top: 3cqh; right: 2cqw;
  padding: 1cqh 1.8cqw; border-radius: 999px; background: var(--o-paper); color: var(--o-ink);
  box-shadow: 0 1px 2px rgb(47 46 43 / .1); font: 650 calc(1.7cqw * var(--tb-ts, 1)) / 1 var(--o-font-ui);
}
.bs-paused[hidden] { display: none; }
/* (pseudo-elements listed on their own: inside :is() they are dropped) */
.tb-screen:is([data-paused], [data-offscreen]) *,
.tb-screen:is([data-paused], [data-offscreen]) *::before,
.tb-screen:is([data-paused], [data-offscreen]) *::after,
.bs:not([data-active]) *,
.bs:not([data-active]) *::before,
.bs:not([data-active]) *::after { animation-play-state: paused !important; }

/* ======================================================= motion levels
   Reduced: state changes stay (a quick fade); no travel, no loops; the
   breath shows as light only. Still: nothing animates. Mirrors the
   product's reducedMotion handling. */
.tb-screen[data-motion="reduced"] .bs[data-active] { transition-duration: 200ms; }
.tb-screen:is([data-motion="reduced"], [data-motion="still"]) :is(.bs-open__card, .bs-open__orla, .bs-actor img, .bs-mark, .bs-done__orla img) { animation: none !important; }
.tb-screen[data-motion="still"] .bs-pond__ripple { display: none; }
.tb-screen:is([data-motion="reduced"], [data-motion="still"]) .bs-pond__lily { transition: opacity 200ms ease; scale: 1; }
.tb-screen:is([data-motion="reduced"], [data-motion="still"]) :is(.bs-word__card strong, .bs-beats__line) { animation: none !important; }
.tb-screen:is([data-motion="reduced"], [data-motion="still"]) .bs-done__confetti { display: none; }
.tb-screen:is([data-motion="reduced"], [data-motion="still"]) :is(.bs-done__title, .bs-done__aside, .bs-done__orla, .bs-cue) { translate: none !important; }
.tb-screen[data-motion="still"] :is(.bs, .tb-art img, .bs-pond__lily, .bs-cue, .bs-done__title, .bs-done__aside, .bs-done__orla, .bs-done__action, .bs-done__shift) { transition: none !important; }
.tb-screen[data-motion="still"] :is(.tb-art, .bs--pond)::after { transition: none !important; }
.tb-screen[data-motion="still"] .tb-art::before { transition: none !important; }

@media (forced-colors: active) {
  .bs-card, .bs-beats, .bs-word__card, .bs-pill, .bs-mark, .bs-start, .bs-done__action, .bs-done__bubble, .bs-done__again, .bs-back, .bs-ways li, .bs-open__card, .bs-about__points li { border: 1px solid CanvasText; forced-color-adjust: auto; }
  .bs-way-ico { stroke: CanvasText; }
  .bs-word__count i[data-on] { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .b-ico { background: CanvasText; }
}