/* Orli v3 site · How it works (how-it-works.html, 3 Nov)
   ---------------------------------------------------------------------------
   A school week with Orli, scene by scene. Loaded after shell/shell.css (the
   v2 system and the shell); system tokens for everything that is page (type,
   space, radii, colour, the buttons, the section head). The art inside each
   scene is an illustration and keeps its own colours: Orli Schools' screens
   use the product's (orli-schools-v1, its 18 Oct captures), the box its print.

   HOW IT IS BUILT
     .hw-scene        one chapter: a stage (the art) and its steps (the words)
     .hw-stage        the art's ground (sky, classroom wall, dusk) and .hw-room,
                      the space the art fits into
     .hw-frame        a square in that space, as large as fits
     .hw-art          the artboard: 1000 × 1000 units, --u is one unit, so the
                      composition is the same at every size (positions are
                      inline: --x, --y, --w on .hw-a)
     --s              where the reader is in the scene's steps, 0 … n − 1.
                      Live: how.js writes it (smoothed) from the steps' places.
                      Otherwise: --s-still, the scene's composed key frame.
     A moment is a window of --s: --t: clamp(0, (var(--s) − start) / length, 1)

   TWO WAYS TO READ IT
     html[data-hw="live"]  (full motion, script): each stage holds still under
                      the bar while its steps scroll past; the art plays as you
                      read. Side by side from 900px wide in landscape, the stage
                      above the steps otherwise.
     everything else  (Reduced or Still motion, the OS asking for less motion,
                      no script): each scene is its key frame beside its words,
                      a calm long page. No animation at all.
   ------------------------------------------------------------------------- */

@property --u { syntax: '<length>'; inherits: true; initial-value: 0px; }

.hw { overflow-x: clip; }
.hw-journey { position: relative; }
html.js .hw-journey { margin-block-start: calc(-1 * var(--o-header-h)); }

/* ============================================================== the frame */
.hw-scene {
  --s: var(--s-still);
  --hw-colx: max(var(--o-gutter), (100% - var(--o-max-wide)) / 2 + var(--o-gutter));
  --hw-colw: min(30rem, 38%);
  position: relative; isolation: isolate;
  background: var(--hw-ground, var(--o-canvas));
}
.hw-room { position: relative; container: hw-room / size; }
.hw-frame {
  position: absolute; inset: 0; margin: auto;
  width: min(100cqw, 100cqh); height: min(100cqw, 100cqh);
  container-type: inline-size;
}
.hw-art {
  --u: calc(100cqw / 1000);
  position: absolute; inset: 0;
  font-family: var(--o-font-ui); color: var(--o-ink);
  -webkit-user-select: none; user-select: none;
}
.hw-art img { -webkit-user-drag: none; }
.hw-a {
  position: absolute;
  left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w, 100) * var(--u));
}
img.hw-a { height: auto; }

/* The words. Each step: a knot on the thread, a heading, a line or two. */
.hw-steps { position: relative; }
.hw-step { position: relative; padding-inline-start: 44px; }
.hw-step > p { max-inline-size: 34rem; color: var(--o-ink); font-size: var(--o-text-body); line-height: var(--o-lh-body); text-wrap: pretty; }
.hw-step > p + p { margin-block-start: var(--o-space-3); }
.hw-h {
  margin-block-end: var(--o-space-3);
  font: var(--o-weight-title) var(--o-text-title) / var(--o-lh-title) var(--o-font-ui);
  letter-spacing: var(--o-track-title); text-wrap: balance; max-inline-size: 16ch;
}
h3.hw-h { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); max-inline-size: 18ch; }
.hw-title { margin-block-end: var(--o-space-4); max-inline-size: 11ch; text-wrap: balance; }
.hw-step--hero .o-lead { max-inline-size: 30rem; }

/* The thread: a running stitch down the words, a felt knot at each step.
   The knots fill as the felt star passes them (live), or are all filled. */
.hw-steps::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 11px; width: 2px;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--o-ink) 26%, transparent) 0 9px, transparent 9px 17px);
}
.hw-scene--kit .hw-steps::before { inset-block-start: 40%; }
.hw-knot {
  position: absolute; inset-inline-start: 2px; inset-block-start: .55em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--o-star); box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--o-star) 22%, transparent);
  font-size: var(--o-text-title);
}
.hw-knot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, #7d5f0b 70%, transparent); }
.hw-step--hero .hw-knot { display: none; }
h3 ~ .hw-knot, .hw-step:has(h3) .hw-knot { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }

.hw-cue { display: none; }

/* The guide: one felt star, held at the reading line, stitching the thread
   (live only). Its trail is gold thread, fading. */
.hw-guide { display: none; }

/* ============================================ still page (the default) */
.hw-scene { padding-block: var(--o-space-9); }
.hw-stage { display: contents; }
.hw-sky { position: absolute; inset: 0; z-index: -1; }
.hw-sky img, .hw-start__sky img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 100%; }
.hw-room { width: min(100% - 2 * var(--o-gutter), 34rem); aspect-ratio: 1; margin-inline: auto; }
.hw-steps { width: min(100% - 2 * var(--o-gutter), 40rem); margin: var(--o-space-7) auto 0; display: grid; gap: var(--o-space-7); }
.hw-scene--kit { padding-block-start: calc(var(--o-header-h) + var(--o-space-7)); }
.hw-scene--kit .hw-steps { margin-block-start: var(--o-space-5); }
.hw-scene--kit .hw-room { order: 1; }
@media (min-width: 900px) {
  .hw-scene {
    display: grid; grid-template-columns: [steps] minmax(0, 5fr) [art] minmax(0, 6fr);
    align-items: center; column-gap: var(--o-space-8);
    padding-inline: var(--hw-colx);
  }
  .hw-room { grid-column: art; grid-row: 1; width: 100%; max-width: 40rem; justify-self: center; }
  .hw-steps { grid-column: steps; grid-row: 1; width: 100%; margin: 0; }
  .hw-scene--kit .hw-room { order: 0; }
}
.hw-scene + .hw-scene { border-block-start: 1px solid var(--o-line); }
/* Still: the rooms are framed pictures (their desk and light stay inside). */
html:not([data-hw="live"]) :is(.hw-scene--session, .hw-scene--bite, .hw-scene--reflect, .hw-scene--leaders) .hw-frame {
  overflow: clip; border-radius: var(--o-r-card);
  background: radial-gradient(60% 55% at 62% 30%, #fcf9f4 0, transparent 75%), linear-gradient(180deg, #f3ebe0, #ebe1d3);
  box-shadow: var(--o-shadow);
}
html:not([data-hw="live"]) .hw-scene--leaders .hw-frame { background: linear-gradient(180deg, #e7def0 0%, #f5e2d4 60%, #f7eadf 100%); }
html:not([data-hw="live"]) .hw-scene { overflow: clip; }

/* ================================================================ live */
html[data-hw="live"] .hw-scene { display: block; padding: 0; border: 0; }
html[data-hw="live"] .hw-stage { display: block; position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--hw-ground, var(--o-canvas)); }
html[data-hw="live"] .hw-room { position: absolute; width: auto; max-width: none; aspect-ratio: auto; margin: 0; place-self: normal; }
html[data-hw="live"] .hw-guide {
  display: block; position: sticky; z-index: 5; top: 50svh; height: 0;
  margin-inline-start: max(var(--o-gutter), (100% - var(--o-max-wide)) / 2 + var(--o-gutter));
  pointer-events: none;
}
.hw-guide__star {
  position: absolute; left: -12px; top: -24px; width: 48px; height: 48px;
  filter: drop-shadow(0 3px 6px rgb(125 95 11 / .28));
  rotate: calc(var(--hw-turn, 0) * 1deg);
}
@supports (animation-timeline: scroll()) {
  .hw-guide__star { animation: hw-spin linear both; animation-timeline: scroll(root); }
}
@keyframes hw-spin { from { rotate: 0deg; } to { rotate: 1440deg; } }
.hw-guide__trail {
  position: absolute; left: 11px; bottom: 0; width: 3px; height: 34svh; border-radius: 2px;
  background: repeating-linear-gradient(to top, var(--o-star) 0 11px, transparent 11px 18px);
  -webkit-mask: linear-gradient(to top, #000 45%, transparent); mask: linear-gradient(to top, #000 45%, transparent);
}
/* It joins once the title has had the stage, and leaves with the journey. */
html[data-hw="live"] .hw-guide { opacity: var(--hw-guide, 1); transition: opacity 400ms var(--o-ease); }
html[data-hw="live"] .hw-knot { background: var(--o-warm); box-shadow: inset 0 0 0 2px var(--o-warm-high); transition: background-color 400ms var(--o-ease), box-shadow 400ms var(--o-ease), scale 400ms var(--o-settle); }
html[data-hw="live"] .hw-knot::after { border-color: var(--o-n3); }
html[data-hw="live"] .hw-step.is-past .hw-knot { background: var(--o-star); box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--o-star) 22%, transparent); }
html[data-hw="live"] .hw-step.is-past .hw-knot::after { border-color: color-mix(in srgb, #7d5f0b 70%, transparent); }
html[data-hw="live"] .hw-step.is-now .hw-knot { scale: 1.2; }
/* stacked, the star rests on the step's own knot: tuck it in under the star */
@media not ((min-width: 900px) and (min-aspect-ratio: 1/1)) { html[data-hw="live"] .hw-step.is-now .hw-knot { scale: .6; } }

html[data-hw="live"] .hw-cue {
  display: flex; align-items: center; gap: var(--o-space-3); margin-block-start: var(--o-space-7);
  font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); color: var(--o-ink-2);
}
.hw-cue__line { position: relative; width: 2px; height: 44px; background: repeating-linear-gradient(to bottom, var(--o-ink-2) 0 6px, transparent 6px 11px); }
.hw-cue__line::after { content: ""; position: absolute; left: -4px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--o-star); animation: hw-cue 2.4s var(--o-ease) infinite paused; }
html[data-hw="live"] .hw-scene--kit:is([data-at="-1"], [data-at="0"]) .hw-cue__line::after { animation-play-state: running; }
@keyframes hw-cue { 0% { translate: 0 -40px; opacity: 0; } 30% { opacity: 1; } 80%, 100% { translate: 0 0; opacity: 0; } }

/* Side by side: words on the left over the calm side of the ground, the art
   on the right, the steps scrolling past. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  html[data-hw="live"] .hw-room {
    inset: calc(var(--o-header-h) + var(--o-space-4)) var(--o-gutter) var(--o-space-5) calc(var(--hw-colx) + var(--hw-colw) + var(--o-space-6));
  }
  html[data-hw="live"] .hw-steps { margin-block-start: -100svh; margin-inline-start: var(--hw-colx); width: var(--hw-colw); z-index: 1; }
  html[data-hw="live"] .hw-step {
    min-height: 92svh; display: flex; flex-direction: column; justify-content: center;
    padding-block: calc(var(--o-header-h) + 8svh) 8svh;
  }
  html[data-hw="live"] .hw-step--hero { min-height: 100svh; }
  html[data-hw="live"] .hw-step:last-child { min-height: 100svh; }
  html[data-hw="live"] .hw-scene--kit .hw-steps::before { inset-block-start: 100svh; }
}
/* Stacked (phones, tablets upright): the stage holds the top of the window
   and the steps rise from under it; the felt star sits in the words. */
@media not ((min-width: 900px) and (min-aspect-ratio: 1/1)) {
  html[data-hw="live"] { --hw-sh: max(52svh, min(60svh, 100vw + var(--o-header-h))); }
  html[data-hw="live"] .hw-stage {
    z-index: 2; height: var(--hw-sh);
    border-end-start-radius: var(--o-r-card); border-end-end-radius: var(--o-r-card);
    box-shadow: 0 10px 28px -16px rgb(60 57 50 / .35);
  }
  html[data-hw="live"] .hw-room { inset: calc(var(--o-header-h) + var(--o-space-2)) var(--o-gutter) var(--o-space-3); }
  html[data-hw="live"] .hw-steps { width: min(100% - 2 * var(--o-gutter), 40rem); margin-inline: auto; padding-block-end: 10svh; }
  html[data-hw="live"] .hw-step { min-height: calc((100svh - var(--hw-sh)) * .95); padding-block: var(--o-space-6) var(--o-space-5); }
  html[data-hw="live"] .hw-step:first-child { padding-block-start: var(--o-space-6); }
  html[data-hw="live"] .hw-step--hero { min-height: calc(100svh - var(--hw-sh)); }
  /* the star on the thread: the steps' own column (centred, 40rem at most) */
  html[data-hw="live"] .hw-guide { top: calc(var(--hw-sh) + (100svh - var(--hw-sh)) * .32 - 4px); margin-inline-start: max(var(--o-gutter), (100% - 40rem) / 2); }
  html[data-hw="live"] .hw-guide__trail { height: 10svh; }
  /* A soft edge under the stage, so lines of text slide under it rather
     than being cut. Sticky just below the stage; the stage paints over it
     while it arrives. */
  html[data-hw="live"] .hw-scene::before {
    content: ""; display: block; position: sticky; z-index: 2; top: var(--hw-sh); height: 32px; margin-block-end: -32px;
    background: linear-gradient(var(--hw-fade), color-mix(in srgb, var(--hw-fade) 0%, transparent)); pointer-events: none;
  }
  html[data-hw="live"] .hw-scene--leaders { background: var(--hw-fade); }
  /* The camera: on a phone or an upright tablet the art is small, so for
     each step it moves in on what that step is about (the board, the
     laptop, the guide beside the script), gliding between them. --cx/--cy:
     the point to centre, in artboard units; --cz: how close. */
  html[data-hw="live"] .hw-frame {
    transform-origin: 0 0; will-change: transform;
    transform: translate(calc((500 - var(--cz) * var(--cx)) * .1%), calc((500 - var(--cz) * var(--cy)) * .1%)) scale(var(--cz));
  }
  html.hw-ready[data-hw="live"] .hw-frame { transition: transform 1100ms cubic-bezier(.45, 0, .2, 1); }
  html[data-hw="live"] .hw-session { scale: 1; }
  html[data-hw="live"] .hw-scene--session:is([data-at="-1"], [data-at="0"]) { --cx: 520; --cy: 480; --cz: 1.04; }
  html[data-hw="live"] .hw-scene--session[data-at="1"] { --cx: 360; --cy: 252; --cz: 1.42; }
  html[data-hw="live"] .hw-scene--session[data-at="2"] { --cx: 640; --cy: 690; --cz: 1.32; }
  html[data-hw="live"] .hw-scene--session[data-at="3"] { --cx: 850; --cy: 700; --cz: 2.75; }
  html[data-hw="live"] .hw-scene--make:is([data-at="-1"], [data-at="0"]) { --cx: 500; --cy: 540; --cz: 1.3; }
  html[data-hw="live"] .hw-scene--make[data-at="2"] { --cx: 560; --cy: 540; --cz: 1.06; }
  html[data-hw="live"] .hw-scene--bite:is([data-at="-1"], [data-at="0"]) { --cx: 752; --cy: 748; --cz: 1.95; }
  html[data-hw="live"] .hw-scene--bite:is([data-at="1"], [data-at="3"]) { --cx: 500; --cy: 300; --cz: 1.06; }
  html[data-hw="live"] .hw-scene--bite[data-at="2"] { --cx: 500; --cy: 470; --cz: 1; }
  html[data-hw="live"] .hw-scene--bite[data-at="4"] { --cx: 500; --cy: 440; --cz: 1.02; }
  html[data-hw="live"] .hw-scene--reflect:is([data-at="-1"], [data-at="0"]) { --cx: 440; --cy: 330; --cz: 1.22; }
  html[data-hw="live"] .hw-scene--reflect[data-at="1"] { --cx: 330; --cy: 660; --cz: 1.42; }
  html[data-hw="live"] .hw-scene--leaders[data-at="-1"] { --cx: 500; --cy: 440; --cz: 1; }
  html[data-hw="live"] .hw-scene--leaders:is([data-at="0"], [data-at="1"]) { --cx: 500; --cy: 572; --cz: 1.2; }
  html[data-hw="live"] .hw-cue { margin-block-start: var(--o-space-5); }
  .hw-h { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
  h3.hw-h { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
  .hw-knot { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
  .hw-step:has(h3) .hw-knot { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
}
@media not ((min-width: 900px) and (min-aspect-ratio: 1/1)) and (max-width: 420px) {
  .hw-step { padding-inline-start: 36px; }
  .hw-title { font-size: clamp(2.25rem, 1.6rem + 3vw, 2.75rem); }
}

/* The grounds. --hw-seam: the top of the stage (its felt edge, live);
   --hw-fade: the ground under the stage, behind the words (stacked). */
.hw-scene { --cx: 500; --cy: 500; --cz: 1; }
.hw-scene--kit { --hw-ground: #f4d9c0; --hw-fade: #f4d9c0; }
.hw-scene--session, .hw-scene--reflect { --hw-ground: #f5efe6; --hw-seam: #f4ede3; --hw-fade: #f5efe6; }
.hw-scene--make { --hw-ground: var(--o-canvas); --hw-seam: var(--o-canvas); --hw-fade: var(--o-canvas); }
.hw-scene--bite { --hw-ground: #efe7dc; --hw-seam: #efe7dc; --hw-fade: #efe7dc; }
.hw-scene--leaders { --hw-seam: #e7def0; --hw-fade: #f3e7e6; }
.hw-five { --hw-seam: var(--o-canvas); }
/* Live, each scene arrives with a felt edge: a soft wave with a running
   stitch, cut from its own ground, sliding over the scene before it. */
html[data-hw="live"] .hw-scene + .hw-scene::after, html[data-hw="live"] .hw-five::before {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: -30px; height: 32px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 32' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C20 16 40 16 60 26 S100 36 120 26 S160 16 180 26 S220 36 240 26' fill='none' stroke='%236e5537' stroke-opacity='.34' stroke-width='1.6' stroke-dasharray='5 4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 240px 100% repeat-x,
    url("../home/img/magic/felt-grain-256.webp") 0 0 / 256px,
    var(--hw-seam);
  background-blend-mode: normal, soft-light, normal;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 32' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C20 6 40 6 60 16 S100 26 120 16 S160 6 180 16 S220 26 240 16 V32 H0 Z'/%3E%3C/svg%3E") 0 0 / 240px 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 32' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C20 6 40 6 60 16 S100 26 120 16 S160 6 180 16 S220 26 240 16 V32 H0 Z'/%3E%3C/svg%3E") 0 0 / 240px 100% repeat-x;
}
html[data-hw="live"] :is(.hw-scene--session, .hw-scene--reflect) .hw-stage { background: radial-gradient(60% 55% at 70% 32%, #fbf7f1 0, transparent 75%), linear-gradient(180deg, #f4ede3, #efe6da); }
html[data-hw="live"] .hw-scene--bite .hw-stage { background: radial-gradient(60% 50% at 70% 30%, #f6eee4 0, transparent 75%), linear-gradient(180deg, #efe7dc, #e9dfd2); }
.hw-scene--leaders { --hw-ground: linear-gradient(180deg, #e9e1f1 0%, #f6e3d6 55%, #f7eadf 100%); }
html[data-hw="live"] .hw-scene--leaders .hw-stage { background: linear-gradient(180deg, #e7def0 0%, #f5e2d4 60%, #f7eadf 100%); }
html:not([data-hw="live"]) .hw-scene--leaders { background: linear-gradient(180deg, #ece5f3 0%, #f7e7db 100%); }

/* ================================================== shared: rooms, devices */
.hw-nowrap { white-space: nowrap; }
/* The rooms' walls are felt-soft plaster: a fine grain in soft light. */
html[data-hw="live"] :is(.hw-scene--session, .hw-scene--bite, .hw-scene--reflect, .hw-scene--leaders) .hw-stage::before,
html:not([data-hw="live"]) :is(.hw-scene--session, .hw-scene--bite, .hw-scene--reflect, .hw-scene--leaders) .hw-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../home/img/magic/felt-grain-256.webp") 0 0 / 256px; mix-blend-mode: soft-light; opacity: .5;
}
/* Light on the wall around a window (or the board): a soft warm pool. */
.hw-glow {
  height: calc(var(--h) * var(--u)); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 243 224 / .9), rgb(255 238 214 / .45) 45%, rgb(255 238 214 / 0));
}
/* A window onto the Orliverse: sage-painted frame, an arched top, a sill.
   Inside, its sky, far islands, the school island and a cloud each drift
   at their own pace as the scene goes on (--pd: how far; the depth). */
.hw-window {
  --frame: #93b08c;
  height: calc(var(--h) * var(--u));
  border-radius: calc(var(--w) * .5 * var(--u)) calc(var(--w) * .5 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  background: linear-gradient(180deg, #adc6a5, #8fac88);
  box-shadow: 0 calc(16 * var(--u)) calc(30 * var(--u)) calc(-12 * var(--u)) rgb(70 55 30 / .35), inset 0 0 0 calc(2 * var(--u)) rgb(255 255 240 / .35);
}
.hw-window::after {
  content: ""; position: absolute; left: calc(-16 * var(--u)); right: calc(-16 * var(--u)); bottom: calc(-12 * var(--u)); height: calc(18 * var(--u));
  border-radius: calc(6 * var(--u)); background: linear-gradient(180deg, #b9d0b2, #8fac88);
  box-shadow: 0 calc(10 * var(--u)) calc(16 * var(--u)) calc(-6 * var(--u)) rgb(60 50 30 / .35), inset 0 calc(2 * var(--u)) 0 rgb(255 255 240 / .4);
}
.hw-window__view {
  position: absolute; inset: calc(10 * var(--u)); overflow: clip; isolation: isolate;
  border-radius: calc((var(--w) * .5 - 10) * var(--u)) calc((var(--w) * .5 - 10) * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  background: #f6d6bb;
}
.hw-window__sky { position: absolute; left: -15%; top: -6%; width: 130%; height: 112%; object-fit: cover; object-position: 40% 90%; translate: calc(var(--s) * var(--pd) * -1 * var(--u)) 0; }
.hw-window__layer {
  position: absolute; left: calc(var(--l) * 1%); top: calc(var(--t) * 1%); width: calc(var(--lw) * 1%); height: auto; max-width: none;
  translate: calc(var(--s) * var(--pd) * -1 * var(--u)) calc(var(--s) * var(--pd) * .22 * var(--u));
}
.hw-window__bars {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, transparent calc(50% - 4 * var(--u)), var(--frame) 0 calc(50% + 4 * var(--u)), transparent 0),
    linear-gradient(180deg, transparent calc(58% - 4 * var(--u)), var(--frame) 0 calc(58% + 4 * var(--u)), transparent 0);
}
.hw-window__view::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / .26), rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0) 62%, rgb(255 255 255 / .1));
  box-shadow: inset 0 calc(6 * var(--u)) calc(14 * var(--u)) rgb(60 40 20 / .22);
  border-radius: inherit;
}
.hw-window--wide { border-radius: calc(12 * var(--u)); }
.hw-window--wide .hw-window__view { border-radius: calc(5 * var(--u)); }
.hw-window--wide .hw-window__bars {
  background:
    linear-gradient(90deg, transparent calc(33.3% - 4 * var(--u)), var(--frame) 0 calc(33.3% + 4 * var(--u)), transparent 0 calc(66.7% - 4 * var(--u)), var(--frame) 0 calc(66.7% + 4 * var(--u)), transparent 0),
    linear-gradient(180deg, transparent calc(47% - 4 * var(--u)), var(--frame) 0 calc(47% + 4 * var(--u)), transparent 0);
}
.hw-window--wide .hw-window__sky { object-position: 50% 70%; }
/* dusk: the sky deepens to lilac at the top, still warm at the horizon */
.hw-window__dusk { position: absolute; inset: 0; mix-blend-mode: multiply; background: linear-gradient(180deg, rgb(168 140 205 / .62), rgb(236 160 150 / .3) 55%, rgb(255 200 150 / .12)); }

.hw-desk {
  position: absolute; left: calc(-3000 * var(--u)); right: calc(-3000 * var(--u)); top: calc(905 * var(--u)); height: calc(600 * var(--u));
  background: linear-gradient(180deg, #e2cfb4 0, #d6bf9f calc(10 * var(--u)), #cdb390 100%);
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0;
  box-shadow: inset 0 calc(3 * var(--u)) 0 #ecdcc4;
}
.hw-desk::after { content: ""; position: absolute; inset: 0; background: url("../home/img/magic/felt-grain-256.webp") 0 0 / calc(220 * var(--u)); mix-blend-mode: multiply; opacity: .22; border-radius: inherit; }

/* The class board: a screen on the wall, dark until a session puts the
   story on it. The pupil screen inside scales with the board (cqw). */
.hw-board { aspect-ratio: 16 / 9; padding: calc(10 * var(--u)); border-radius: calc(20 * var(--u)); background: linear-gradient(180deg, #2e2f33, #1d1e22); box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) calc(-20 * var(--u)) rgb(40 36 30 / .45), inset 0 0 0 calc(2 * var(--u)) #3a3b40; }
.hw-board::after { content: ""; position: absolute; left: 50%; bottom: calc(-6 * var(--u)); width: 14%; height: calc(6 * var(--u)); translate: -50% 0; border-radius: 0 0 calc(6 * var(--u)) calc(6 * var(--u)); background: #26272b; }
.hw-board__screen { position: relative; height: 100%; border-radius: calc(10 * var(--u)); overflow: clip; background: #15171b; container-type: inline-size; }
.hw-board__off {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.6cqw;
  background: radial-gradient(60% 70% at 50% 42%, #2f4d5e 0, #1e3240 55%, #172631 100%);
}
.hw-board__off img { width: 9cqw; height: auto; opacity: .95; filter: drop-shadow(0 0 2.4cqw rgb(92 202 153 / .45)); }
.hw-board__off::after { content: "Orli Schools"; font: 650 2.2cqw / 1 var(--o-font-ui); letter-spacing: .02em; color: rgb(255 255 255 / .62); }

.hw-pupil { position: absolute; inset: 0; container-type: inline-size; background: #2a3a2a; }
.hw-pupil__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-pupil__pill {
  position: absolute; left: 50%; top: 4.5cqw; translate: -50% 0; white-space: nowrap;
  padding: 1.1cqw 3cqw; border-radius: 999px; background: #f7f5f0;
  font: 700 3.1cqw / 1.1 var(--o-font-ui); color: #195440; letter-spacing: -.01em;
  box-shadow: 0 .4cqw 1.2cqw rgb(0 0 0 / .12);
}
.hw-pupil__orla { position: absolute; left: 11cqw; top: 33cqw; width: 18cqw; filter: drop-shadow(0 1.4cqw 1cqw rgb(30 50 30 / .25)); }
.hw-pupil__orla img { width: 100%; height: auto; }
.hw-pupil__bubble {
  position: absolute; left: 35cqw; top: 31cqw; width: 54cqw; min-height: 11cqw;
  padding: 2.4cqw 2.8cqw 2cqw; border-radius: 2.6cqw; background: #f7f5f0;
  box-shadow: 0 .6cqw 2cqw rgb(0 0 0 / .14);
  display: grid;
}
.hw-pupil__line { grid-area: 1 / 1; font: 600 2.7cqw / 1.35 var(--o-font-ui); color: #2b2a27; text-wrap: pretty; }
.hw-pupil__dots { grid-area: 2 / 1; display: flex; gap: .7cqw; margin-block-start: 1.2cqw; }
.hw-pupil__dots i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #2f8a5e; }

/* A laptop: the lid (bezel and screen) on a hinge, and its base. */
.hw-laptop { --lid: 1; perspective: calc(2400 * var(--u)); }
.hw-laptop__lid {
  position: relative; aspect-ratio: 16 / 10; padding: 1.8%; border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  background: linear-gradient(180deg, #3a3936, #2a2927); box-shadow: inset 0 0 0 calc(2 * var(--u)) #4a4945;
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--lid)) * -86deg));
}
.hw-laptop__screen { position: relative; height: 100%; border-radius: calc(6 * var(--u)); overflow: clip; background: #f2efe9; container-type: inline-size; }
.hw-laptop__base {
  position: relative; display: block; width: 116%; margin-inline-start: -8%; height: calc(var(--w) * .035 * var(--u));
  border-radius: 0 0 calc(18 * var(--u)) calc(18 * var(--u));
  background: linear-gradient(180deg, #e6e1d8, #c9c2b6 70%, #b3ab9e);
  box-shadow: 0 calc(18 * var(--u)) calc(30 * var(--u)) calc(-12 * var(--u)) rgb(50 40 30 / .45);
}
.hw-laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 38%; translate: -50% 0; border-radius: 0 0 calc(8 * var(--u)) calc(8 * var(--u)); background: #b9b1a4; }

/* ------------------------------------------- Orli Schools' console (cqw) */
.hw-console { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; font-family: var(--o-font-ui); color: #25252e; background: #f2efe9; }
.hw-console__top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 1.4cqw 2cqw; background: #fff; border-block-end: .15cqw solid #e6e1d8; }
.hw-chip { display: inline-flex; align-items: center; gap: 1.2cqw; padding: .7cqw 2cqw .7cqw .7cqw; border-radius: 999px; background: #e9efe9; box-shadow: inset 0 0 0 .15cqw #d5e2d7; }
.hw-chip__face { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .15cqw #d5e2d7; }
.hw-chip__face img { width: 70%; height: auto; }
.hw-chip__text { display: grid; gap: .3cqw; font-size: 1.7cqw; line-height: 1.1; }
.hw-chip__text b { font-weight: 750; color: #195440; }
.hw-chip__tag { justify-self: start; padding: .3cqw 1cqw; border-radius: 999px; background: #195440; color: #fff; font-size: 1.3cqw; font-weight: 700; }
.hw-console__tools { display: flex; align-items: center; gap: 1.2cqw; }
.hw-timer { display: inline-flex; align-items: center; gap: 1.1cqw; padding: .8cqw 1.6cqw; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 .15cqw #e2ddd4; }
.hw-timer__clock { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; border: .3cqw solid #25252e; position: relative; }
.hw-timer__clock::before, .hw-timer__clock::after { content: ""; position: absolute; left: 50%; top: 50%; width: .3cqw; height: 1cqw; background: #25252e; transform-origin: 50% 0; rotate: 180deg; translate: -50% 0; border-radius: 1px; }
.hw-timer__clock::after { height: .8cqw; rotate: 270deg; }
.hw-timer__time { font: 750 2.4cqw / 1 var(--o-font-ui); font-variant-numeric: tabular-nums; letter-spacing: .02em; min-width: 7.2cqw; }
.hw-timer__pause { width: 1.6cqw; height: 1.8cqw; border-inline: .5cqw solid #25252e; margin-inline-start: .6cqw; }
.hw-ui-pill { display: inline-flex; align-items: center; gap: .8cqw; padding: .9cqw 1.8cqw; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 .15cqw #e2ddd4; font: 700 1.5cqw / 1 var(--o-font-ui); white-space: nowrap; }
.hw-ext { width: 1.6cqw; height: 1.6cqw; border: .25cqw solid currentColor; border-radius: .3cqw; }
.hw-ui-round { display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .15cqw #e2ddd4; }
.hw-burger { width: 1.9cqw; height: 1.3cqw; border-block: .25cqw solid #25252e; position: relative; }
.hw-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .25cqw; translate: 0 -50%; background: #25252e; }
.hw-console__body { display: grid; grid-template-columns: 22% minmax(0, 1fr) 27%; gap: 1.8cqw; padding: 2cqw; min-height: 0; }
.hw-steplist { margin: 0; padding: 1.2cqw; list-style: none; counter-reset: hw-step; display: grid; align-content: start; gap: .5cqw; border-radius: 2cqw; background: #fff; box-shadow: inset 0 0 0 .15cqw #e9e4dc; }
.hw-steplist li {
  counter-increment: hw-step; display: flex; align-items: center; gap: 1cqw;
  padding: .7cqw .8cqw; border-radius: 1.2cqw; font: 650 1.3cqw / 1.15 var(--o-font-ui); color: #6b6862;
}
.hw-steplist li::before {
  content: counter(hw-step); flex: none; display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%;
  border: .15cqw dashed #c9c3b9; font-size: 1.1cqw; font-weight: 700; color: #8b867d; background: #fff;
}
.hw-steplist li.is-done::before { content: "✓"; border: .2cqw solid #25252e; color: #25252e; font-size: 1.3cqw; }
.hw-steplist li.is-done { color: #25252e; }
.hw-steplist li.is-now { background: #e3ece6; box-shadow: inset 0 0 0 .15cqw #b9d1c1; color: #25252e; }
.hw-steplist li.is-now::before { border: 0; background: #195440; color: #fff; }
.hw-console__mid { display: grid; grid-template-rows: auto auto auto; gap: 1.2cqw; align-content: start; }
.hw-preview { position: relative; aspect-ratio: 16 / 9; border-radius: 1.8cqw; overflow: clip; box-shadow: 0 0 0 .2cqw #fff, 0 .6cqw 1.6cqw rgb(0 0 0 / .1); }
.hw-console__status { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; font: 650 1.25cqw / 1.2 var(--o-font-ui); }
.hw-console__label { display: inline-flex; align-items: center; gap: .8cqw; }
.hw-monitor { width: 2.2cqw; height: 1.6cqw; border: .2cqw solid #25252e; border-radius: .3cqw; }
.hw-status { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: .7cqw; padding: .6cqw 1.3cqw; border-radius: 999px; background: #fbf4e4; box-shadow: inset 0 0 0 .15cqw #f0e2c0; color: #6f5418; }
.hw-status i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #c8902b; }
.hw-status__wait, .hw-status__ok { grid-area: 1 / 2; white-space: nowrap; }
.hw-console__nav { display: flex; align-items: center; gap: 1cqw; padding: 1.4cqw; border-radius: 2cqw; background: #fff; box-shadow: inset 0 0 0 .15cqw #e9e4dc; }
.hw-console__gap { flex: 1; }
.hw-ui-pill--skip { background: #edf3f5; box-shadow: inset 0 0 0 .15cqw #c9d9df; }
.hw-ui-pill--next { background: #252522; color: #fff; box-shadow: 0 .4cqw 1cqw rgb(0 0 0 / .2); }
.hw-guide-panel { display: grid; align-content: start; gap: 1.2cqw; padding: 1.4cqw; border-radius: 2cqw; background: #fff; box-shadow: inset 0 0 0 .15cqw #e9e4dc; font-size: 1.25cqw; line-height: 1.35; transition: box-shadow 300ms; }
.hw-guide-panel__tip { padding: 1.2cqw; border-radius: 1.4cqw; box-shadow: inset 0 0 0 .15cqw #e9e4dc; font-weight: 600; }
.hw-lines { display: grid; gap: .9cqw; padding: 1.2cqw; border-radius: 1.4cqw; box-shadow: inset 0 0 0 .15cqw #e9e4dc; }
.hw-lines b, .hw-notes__title { font-size: 1.4cqw; font-weight: 750; }
.hw-lines__row { display: grid; grid-template-columns: auto 1fr; gap: .9cqw; align-items: start; color: #6b6862; }
.hw-lines__row i { position: relative; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; border: .2cqw solid #b8b2a8; }
.hw-lines__row i::after { content: ""; position: absolute; left: 30%; top: 22%; width: 28%; height: 48%; border: solid #25252e; border-width: 0 .25cqw .25cqw 0; rotate: 45deg; opacity: var(--on, 0); }
.hw-lines__row { --on: 0; }
.hw-lines__row i { border-color: color-mix(in srgb, #25252e calc(var(--on) * 100%), #b8b2a8); }
.hw-notes { padding: 1.2cqw; min-height: 7cqw; border-radius: 1.2cqw; background: #fbf9f6; box-shadow: inset 0 0 0 .15cqw #e2ddd4; color: #736e66; }

/* ================================================================ 1. kit */
.hw-kit {
  --land: clamp(0, var(--s) / .9, 1);
  --land-e: calc(var(--land) * var(--land) * (3 - 2 * var(--land)));
  --open: clamp(0, (var(--s) - 1.05) / .45, 1);
  --open-e: calc(var(--open) * var(--open) * (3 - 2 * var(--open)));
}
.hw-kit__cloud { opacity: .96; }
.hw-far { opacity: .8; translate: calc(var(--s) * var(--pd) * -1 * var(--u)) calc(var(--s) * -4 * var(--u)); }
.hw-kit__cloud--a { translate: calc(var(--s) * -14 * var(--u)) 0; }
.hw-kit__cloud--b { translate: calc(var(--s) * 12 * var(--u)) 0; }
.hw-kit__shadow {
  position: absolute; left: calc(270 * var(--u)); top: calc(655 * var(--u)); width: calc(470 * var(--u)); height: calc(120 * var(--u));
  border-radius: 50%; background: radial-gradient(closest-side, rgb(120 70 50 / .32), rgb(120 70 50 / 0));
  opacity: calc(.45 + .55 * var(--land-e)); scale: calc(.8 + .2 * var(--land-e));
}
/* The box: 460 × 342 × 94 units, its print's own proportions. */
.hw-box {
  --W: calc(460 * var(--u)); --D: calc(342 * var(--u)); --H: calc(94 * var(--u));
  position: absolute; left: calc(500 * var(--u)); top: calc(430 * var(--u)); width: 0; height: 0;
  translate: 0 calc(160 * var(--land-e) * var(--u));
  perspective: calc(2600 * var(--u)); perspective-origin: 50% -30%;
}
.hw-box__body {
  position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(calc((66 - 8 * var(--land-e)) * 1deg)) rotateZ(calc((-38 + 16 * var(--land-e) + 4 * var(--open-e)) * 1deg));
}
.hw-box__f, .hw-box__lid { position: absolute; left: 0; top: 0; display: block; transform-style: preserve-3d; }
.hw-box__f { backface-visibility: hidden; background: #f3eee4 center / 100% 100% no-repeat; }
.hw-box__floor { width: var(--W); height: var(--D); margin: calc(var(--D) / -2) 0 0 calc(var(--W) / -2); background-image: url("img/box/floor.webp"); transform: translateZ(1px); }
.hw-box__front, .hw-box__frontin, .hw-box__back, .hw-box__backin { width: var(--W); height: var(--H); margin: calc(var(--H) / -2) 0 0 calc(var(--W) / -2); }
.hw-box__left, .hw-box__leftin, .hw-box__right, .hw-box__rightin { width: var(--D); height: var(--H); margin: calc(var(--H) / -2) 0 0 calc(var(--D) / -2); }
.hw-box__front { background-image: url("img/box/front.webp"); transform: translate3d(0, calc(var(--D) / 2), calc(var(--H) / 2)) rotateX(-90deg); }
.hw-box__frontin { background-image: url("img/box/frontin.webp"); transform: translate3d(0, calc(var(--D) / 2 - 1px), calc(var(--H) / 2)) rotateX(-90deg) rotateY(180deg); }
.hw-box__back { background-image: url("img/box/back.webp"); transform: translate3d(0, calc(var(--D) / -2), calc(var(--H) / 2)) rotateX(-90deg) rotateY(180deg); }
.hw-box__backin { background-image: url("img/box/backin.webp"); transform: translate3d(0, calc(var(--D) / -2 + 1px), calc(var(--H) / 2)) rotateX(-90deg); }
.hw-box__left { background-image: url("img/box/left.webp"); transform: translate3d(calc(var(--W) / -2), 0, calc(var(--H) / 2)) rotateZ(90deg) rotateX(-90deg); }
.hw-box__leftin { background-image: url("img/box/leftin.webp"); transform: translate3d(calc(var(--W) / -2 + 1px), 0, calc(var(--H) / 2)) rotateZ(-90deg) rotateX(-90deg); }
.hw-box__right { background-image: url("img/box/right.webp"); transform: translate3d(calc(var(--W) / 2), 0, calc(var(--H) / 2)) rotateZ(-90deg) rotateX(-90deg); }
.hw-box__rightin { background-image: url("img/box/rightin.webp"); transform: translate3d(calc(var(--W) / 2 - 1px), 0, calc(var(--H) / 2)) rotateZ(90deg) rotateX(-90deg); }
.hw-box__lid {
  width: var(--W); height: var(--D); margin: calc(var(--D) / -2) 0 0 calc(var(--W) / -2);
  /* 118° open. It turns faster through the angle where it would be seen edge
     on (about 20–50°) and twists a few degrees on the way (none at rest), so
     it never reads as a line. */
  --lid-a: calc(92 * var(--open-e) + 26 * clamp(0, (var(--open-e) - .14) / .16, 1));
  transform-origin: 50% 0; transform: translateZ(var(--H)) rotateX(calc(var(--lid-a) * 1deg)) rotateY(calc(sin(var(--open-e) * 180deg) * -6deg));
}
.hw-box__lidtop, .hw-box__lidin { width: 100%; height: 100%; }
.hw-box__lidtop { background-image: url("img/box/lid.webp"); transform: translateZ(1px); }
.hw-box__lidin { background-image: url("img/box/lidin.webp"); transform: rotateX(180deg) translateZ(1px); }
/* Light pours out as it opens. */
.hw-kit__glow {
  position: absolute; left: calc(230 * var(--u)); top: calc(260 * var(--u)); width: calc(540 * var(--u)); height: calc(460 * var(--u));
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 238 170 / .95), rgb(255 214 120 / .5) 45%, rgb(255 210 140 / 0));
  mix-blend-mode: screen; opacity: calc(var(--open-e) * (1 - clamp(0, (var(--s) - 1.75) / .5, 1) * .55));
  scale: calc(.6 + .4 * var(--open-e));
}
/* The Orlis tumble out: from the box's mouth (500, 540) to their places,
   on an arc, turning as they go. */
.hw-kit__orli {
  --t: clamp(0, (var(--s) - var(--a)) / .3, 1);
  position: absolute; width: calc(var(--w) * var(--u)); height: auto;
  left: calc((var(--x) - var(--w) / 2) * var(--u)); top: calc((var(--y) - var(--w) * .867) * var(--u));
  transform-origin: 50% 88%;
  translate: calc((500 - var(--x)) * (1 - var(--t)) * var(--u)) calc(((540 - var(--y)) * (1 - var(--t)) - var(--h) * 4 * var(--t) * (1 - var(--t))) * var(--u));
  scale: calc(.32 + .68 * var(--t));
  rotate: calc(var(--r) * (1 - var(--t)) * 1deg);
  opacity: clamp(0, var(--t) * 8, 1);
}
.hw-spark {
  --t: clamp(0, (var(--s) - var(--a)) / .5, 1);
  position: absolute; width: calc(var(--w) * var(--u)); height: auto;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  translate: calc(var(--dx) * var(--t) * var(--u)) calc(var(--dy) * var(--t) * var(--u));
  rotate: calc(var(--r) * var(--t) * 1deg);
  opacity: clamp(0, min(var(--t) * 6, (1 - var(--t)) * 2.4), 1);
}
/* Before it lands, the box bobs gently on the air: a translate of its own
   (compositor-only, so it costs nothing while you read), running only while
   the box is the scene on show. */
html[data-hw="live"] .hw-box__body { animation: hw-bob 6s ease-in-out infinite paused; }
html[data-hw="live"] .hw-scene--kit:is([data-at="-1"], [data-at="0"]) .hw-box__body { animation-play-state: running; }
@keyframes hw-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-14 * var(--u) * (1 - var(--land-e))); } }

/* ============================================================ 2. session */
.hw-session {
  --lid: clamp(0, (var(--s) + .75) / .65, 1);
  --lit: clamp(0, (var(--s) - .45) / .38, 1);
  --zoom: clamp(0, (var(--s) - 2.3) / .6, 1);
  scale: calc(1 + .07 * var(--zoom)); transform-origin: 78% 80%;
}
.hw-session .hw-laptop { --lid: clamp(0, (var(--s) + .75) / .65, 1); }
.hw-session .hw-laptop__screen > * { opacity: calc(.15 + .85 * var(--lid)); }
.hw-session .hw-board .hw-pupil { opacity: var(--lit); }
.hw-board .hw-pupil { transition: none; }
.hw-board__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgb(255 255 255 / .1), transparent 40%); pointer-events: none; }
.hw-link { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hw-link__path { fill: none; stroke: var(--o-star); stroke-width: 4; stroke-linecap: round; stroke-dasharray: .018 .014; stroke-dashoffset: 0; opacity: calc(clamp(0, (var(--s) - .3) / .2, 1) * (1 - clamp(0, (var(--s) - 1.5) / .4, 1))); }
.hw-session .hw-status__ok { opacity: var(--lit); }
.hw-session .hw-status__wait { opacity: calc(1 - var(--lit)); }
.hw-session .hw-status { background: color-mix(in srgb, #e3f1e8 calc(var(--lit) * 100%), #fbf4e4); box-shadow: inset 0 0 0 .15cqw color-mix(in srgb, #bcdcc8 calc(var(--lit) * 100%), #f0e2c0); color: color-mix(in srgb, #1f5a3c calc(var(--lit) * 100%), #6f5418); }
.hw-session .hw-status i { background: color-mix(in srgb, #2f9a63 calc(var(--lit) * 100%), #c8902b); }
.hw-session .hw-pupil__line--1 { opacity: calc(1 - clamp(0, (var(--s) - 2.55) / .2, 1)); }
.hw-session .hw-pupil__line--2 { opacity: clamp(0, (var(--s) - 2.65) / .2, 1); }
.hw-session .hw-lines__row--1 { --on: clamp(0, (var(--s) - 1.1) / .15, 1); }
.hw-session .hw-lines__row--2 { --on: clamp(0, (var(--s) - 2.6) / .15, 1); }
.hw-session .hw-lines__row--3 { --on: 0; }
.hw-session .hw-guide-panel { box-shadow: inset 0 0 0 .15cqw #e9e4dc, 0 0 0 calc(clamp(0, (var(--s) - 2.5) / .3, 1) * .6cqw) #9fd9bb; }
.hw-class__orli {
  --t: clamp(0, (var(--s) - 1.5 - var(--i) * .1) / .32, 1);
  translate: calc(var(--s) * -7 * var(--u)) calc((1 - var(--t)) * 120 * var(--u)); opacity: var(--t);
  scale: calc(.9 + .1 * var(--t));
}

/* ============================================================== 3. make */
.hw-make {
  --fill: clamp(0, (var(--s) + .6) / .75, 1);
  --fill-e: calc(var(--fill) * var(--fill) * (3 - 2 * var(--fill)));
  --smile: clamp(0, (var(--s) - .6) / .3, 1);
  --deco: clamp(0, (var(--s) - .78) / .16, 1);
  --book: clamp(0, (var(--s) - 1.4) / .35, 1);
  --hop: clamp(0, (var(--s) - 1.6) / .3, 1);
}
.hw-mat {
  position: absolute; left: calc(70 * var(--u)); top: calc(160 * var(--u)); width: calc(860 * var(--u)); height: calc(760 * var(--u));
  border-radius: 50%;
  background: radial-gradient(closest-side, #a9cfa6, #8fbf8c 70%, #7fb07c);
  box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-30 * var(--u)) rgb(40 60 30 / .4);
}
.hw-mat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("../home/img/magic/felt-grain-256.webp") 0 0 / calc(240 * var(--u)); mix-blend-mode: multiply; opacity: .35; }
.hw-mat::after { content: ""; position: absolute; inset: calc(26 * var(--u)); border-radius: 50%; border: calc(4 * var(--u)) dashed rgb(255 255 255 / .62); }
.hw-make__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hw-fill circle { opacity: calc(clamp(0, (var(--s) + .9) * 6, 1) * (1 - var(--fill))); translate: 0 calc(var(--fill) * 260px); }
.hw-orli__body { transform-box: view-box; transform-origin: 500px 688px; scale: calc(.5 + .5 * var(--fill-e) + .06 * sin(var(--fill) * 180deg)) calc(.34 + .66 * var(--fill-e) - .04 * sin(var(--fill) * 180deg)); }
.hw-orli { transform-box: view-box; translate: calc(var(--book) * -40px) calc(var(--hop) * (1 - var(--hop)) * -240px + var(--book) * -20px); }
.hw-orli__shadow { transform-box: view-box; transform-origin: 500px 672px; scale: calc(.6 + .4 * var(--fill-e) - .25 * var(--hop) * (1 - var(--hop)) * 4); }
/* Eyes and gems start on the mat and fly to the face, turning, on an arc;
   a little overshoot as each lands (--fx, --fy: where it starts, from its
   place on the face; --fr: its turn; --fa: when it goes). */
.hw-fly {
  --t: clamp(0, (var(--s) - var(--fa)) / .26, 1);
  --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
  transform-box: fill-box; transform-origin: 50% 50%;
  translate: calc(var(--fx) * (1 - var(--e)) * 1px) calc((var(--fy) * (1 - var(--e)) - 230 * 4 * var(--t) * (1 - var(--t))) * 1px);
  rotate: calc(var(--fr) * (1 - var(--e)) * 1deg);
  scale: calc(.78 + .22 * var(--e) + .22 * sin(var(--t) * 180deg));
}
.hw-orli__pupil { translate: calc(sin(var(--s) * 640deg) * 9px) calc(cos(var(--s) * 520deg) * 5px); }
.hw-loose-pipe { opacity: calc(1 - var(--smile)); translate: calc(var(--smile) * -80px) calc(var(--smile) * -200px); }
.hw-orli__smile { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--smile)); }
.hw-orli__smile--fuzz { stroke-dasharray: .012 .02; stroke-dashoffset: 0; opacity: var(--smile); }
.hw-orli__cheeks, .hw-orli__hair { opacity: var(--deco); }
.hw-buddy__in { transform-box: fill-box; transform-origin: 50% 100%; }
.hw-buddy { --t: clamp(0, (var(--s) - .72 - var(--i) * .06) / .24, 1); }
.hw-buddy__in { scale: calc(var(--t) + var(--t) * (1 - var(--t)) * 1.6); opacity: clamp(0, var(--t) * 4, 1); }
.hw-make__book { rotate: calc(8deg + (1 - var(--book)) * 14deg); translate: calc((1 - var(--book)) * 300 * var(--u)) calc((1 - var(--book)) * 120 * var(--u)); opacity: var(--book); box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) calc(-8 * var(--u)) rgb(40 50 30 / .4); border-radius: calc(8 * var(--u)); }

/* ============================================================== 4. bite */
.hw-bite {
  --press: clamp(0, (var(--s) - .36) / .08, 1);
  --morph: clamp(0, (var(--s) - .44) / .36, 1);
  --morph-e: calc(var(--morph) * var(--morph) * (3 - 2 * var(--morph)));
  --on: clamp(0, (var(--s) - .76) / .1, 1);
}
.hw-board--big .hw-pupil { opacity: var(--on); }
.hw-board--big .hw-pupil__pill { font-size: 2.6cqw; top: 3.4cqw; }
/* Bite library on the laptop, then the Bite's own console */
.hw-library { position: absolute; inset: 0; padding: 3.4cqw 3.6cqw; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr 1fr; gap: 2.4cqw; background: #fcfaf8; opacity: calc(1 - var(--on)); }
.hw-library__title { grid-column: 1 / -1; font: 750 4cqw / 1 var(--o-font-ui); }
.hw-tile { position: relative; display: grid; grid-template-rows: 1fr auto auto; align-content: start; border-radius: 3cqw; overflow: clip; background: var(--bg); box-shadow: 0 .8cqw 2cqw rgb(60 50 40 / .1); }
.hw-tile img { width: 100%; height: 13.5cqw; object-fit: cover; }
.hw-tile b { padding: 1.2cqw 1.8cqw 0; font: 750 2.6cqw / 1.1 var(--o-font-ui); }
.hw-tile small { padding: .4cqw 1.8cqw 1.4cqw; font: 500 1.8cqw / 1.2 var(--o-font-body); color: #5a5650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-tile__pill { position: absolute; left: 1.8cqw; bottom: 1.4cqw; display: none; }
.hw-tile__go { position: absolute; right: 1.6cqw; top: 11.5cqw; width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--deep); }
.hw-tile__go::after { content: ""; position: absolute; left: 30%; top: 46%; width: 40%; height: .35cqw; background: #fff; }
.hw-tile--orla { scale: calc(1 - .05 * var(--press) * (1 - clamp(0, (var(--s) - .46) / .08, 1))); box-shadow: 0 0 0 calc(.6cqw * var(--press)) #5cca99, 0 .8cqw 2cqw rgb(60 50 40 / .1); }
.hw-pointer {
  --go: clamp(0, (var(--s) - .06) / .3, 1);
  --go-e: calc(var(--go) * var(--go) * (3 - 2 * var(--go)));
  position: absolute; left: 0; top: 0;
  translate: calc((78 - 56 * var(--go-e)) * 1cqw) calc((86 - 46 * var(--go-e) - sin(var(--go) * 180deg) * 6) * .625cqw);
  width: 5cqw; height: 5cqw; pointer-events: none;
  background: #25252e; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l14 9.2-6.3 1.3 3.6 7-3 1.5-3.6-7-4.7 4.3z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l14 9.2-6.3 1.3 3.6 7-3 1.5-3.6-7-4.7 4.3z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 .3cqw #fff) drop-shadow(0 .3cqw .4cqw rgb(0 0 0 / .3));
  scale: calc(1 - .18 * var(--press) * (1 - clamp(0, (var(--s) - .46) / .08, 1)));
  opacity: calc(clamp(0, (var(--s) + .3) * 6, 1) * (1 - clamp(0, (var(--s) - .5) / .12, 1)));
}
.hw-console--bite { opacity: var(--on); grid-template-rows: auto auto 1fr; }
.hw-steplist--bite { margin: 2.6cqw 3cqw 0; grid-template-columns: repeat(2, 1fr); gap: 1.2cqw 2cqw; padding: 2cqw; }
.hw-steplist--bite li { font-size: 2.3cqw; padding: 1.2cqw; gap: 1.4cqw; }
.hw-steplist--bite li::before { width: 4.2cqw; height: 4.2cqw; font-size: 1.9cqw; }
.hw-steplist--bite li.is-done::before { font-size: 2.2cqw; }
.hw-console--bite .hw-console__top { padding: 2.2cqw 3cqw; }
.hw-console--bite .hw-chip__face { width: 7cqw; height: 7cqw; }
.hw-console--bite .hw-chip__text { font-size: 2.7cqw; }
.hw-console--bite .hw-chip__tag { font-size: 2cqw; }
.hw-console--bite .hw-timer { padding: 1.4cqw 2.6cqw; }
.hw-console--bite .hw-timer__clock { width: 4.6cqw; height: 4.6cqw; border-width: .5cqw; }
.hw-console--bite .hw-timer__time { font-size: 4cqw; min-width: 12cqw; }
.hw-console--bite .hw-timer__pause { width: 2.6cqw; height: 3cqw; border-inline-width: .8cqw; }
.hw-console__cue { margin: 2.4cqw 3cqw; padding: 2cqw 2.4cqw; border-radius: 2.4cqw; background: #fff; box-shadow: inset 0 0 0 .2cqw #e9e4dc; font: 600 2.3cqw / 1.35 var(--o-font-ui); color: #25252e; align-self: start; }
/* The morph: Orla's tile grows from the laptop into the board. */
.hw-morph {
  --k: calc(.13 + .87 * var(--morph-e));
  position: absolute; overflow: clip; pointer-events: none;
  left: calc(40 * var(--u)); top: calc(50 * var(--u)); width: calc(920 * var(--u)); height: calc(518 * var(--u));
  transform-origin: 0 0;
  translate: calc(516 * (1 - var(--morph-e)) * var(--u)) calc(624 * (1 - var(--morph-e)) * var(--u));
  scale: var(--k);
  border-radius: calc((14 - 4 * var(--morph-e)) * var(--u) / var(--k));
  box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-20 * var(--u)) rgb(30 60 40 / calc(.5 * var(--morph)));
  opacity: calc(clamp(0, (var(--s) - .44) / .05, 1) * (1 - clamp(0, (var(--s) - .8) / .1, 1)));
}
.hw-morph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* The Bite on the board, moment by moment. */
.hw-bite__hello, .hw-bite__ways, .hw-bite__breathe, .hw-bite__done { position: absolute; inset: 0; }
.hw-bite__hello { opacity: clamp(0, min((var(--s) - .8) / .1, (1.55 - var(--s)) / .1), 1); }
.hw-bite__ways { opacity: clamp(0, min((var(--s) - 1.5) / .1, (2.45 - var(--s)) / .1), 1); }
.hw-bite__breathe { opacity: clamp(0, min((var(--s) - 2.4) / .12, (3.5 - var(--s)) / .1), 1); }
.hw-bite__done { opacity: clamp(0, (var(--s) - 3.45) / .12, 1); }
.hw-pupil--bite .hw-pupil__line--1 { opacity: calc(1 - clamp(0, (var(--s) - 1.15) / .08, 1)); }
.hw-pupil--bite .hw-pupil__line--2 { opacity: clamp(0, (var(--s) - 1.2) / .08, 1); }
.hw-pupil--bite .hw-pupil__orla { top: 30cqw; }
.hw-pupil--bite .hw-pupil__bubble { top: 28cqw; }
.hw-bite__ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2cqw; align-content: center; padding: 14cqw 7cqw 6cqw; }
.hw-way {
  --k: clamp(0, (var(--s) - 1.5 - var(--wi, 0) * .06) / .14, 1);
  display: grid; align-content: start; gap: 1cqw; padding: 2.4cqw; border-radius: 2.6cqw; background: #f7f5f0; box-shadow: 0 .6cqw 2cqw rgb(0 0 0 / .14);
  translate: 0 calc((1 - var(--k)) * 4cqw); opacity: var(--k);
}
.hw-way:nth-child(2) { --wi: 1; } .hw-way:nth-child(3) { --wi: 2; }
.hw-way b { font: 750 2.5cqw / 1.15 var(--o-font-ui); color: #195440; }
.hw-way > span:last-child { font: 500 1.75cqw / 1.35 var(--o-font-body); color: #3d3b36; }
.hw-way__icon { width: 6cqw; height: 6cqw; border-radius: 50%; background: #dfefe7; position: relative; }
.hw-way__icon::after { content: ""; position: absolute; inset: 1.6cqw; border-radius: 50%; background: #3e8a68; }
.hw-way__icon--follow::after { inset: 1.4cqw 1.1cqw; border-radius: 40%; background: none; border: .5cqw solid #3e8a68; }
.hw-way__icon--watch::after { inset: 2.2cqw 1.1cqw; border-radius: 50% / 70%; background: none; border: .5cqw solid #3e8a68; }
.hw-bite__choose { grid-column: 1 / -1; justify-self: center; margin-block-start: 1cqw; padding: 1.4cqw 3cqw; border-radius: 999px; background: rgb(247 245 240 / .92); font: 650 2.1cqw / 1.2 var(--o-font-ui); color: #195440; }
/* Breathe: Orla in her rings, and the cue card under her. */
.hw-breath { position: absolute; left: 50%; top: 47%; width: 34cqw; height: 34cqw; translate: -50% -50%; display: grid; place-items: center; }
.hw-breath__ring { position: absolute; inset: 9%; border-radius: 48% 52% 50% 49%; border: .5cqw solid rgb(247 245 240 / .9); background: rgb(247 245 240 / .25); box-shadow: 0 0 0 2.8cqw rgb(247 245 240 / .22); scale: 1.06; }
.hw-breath__ring--outer { inset: 0; border-width: .2cqw; background: none; box-shadow: none; scale: 1.08; }
.hw-breath__orla { width: 46%; scale: 1.08; translate: 0 -2%; filter: drop-shadow(0 1.6cqw 1.2cqw rgb(40 60 30 / .28)); }
.hw-breath__orla img { width: 100%; height: auto; }
.hw-cuecard { position: absolute; left: 50%; bottom: 4cqw; translate: -50% 0; width: 54cqw; display: grid; justify-items: center; padding: 1.8cqw 3cqw 1.6cqw; border-radius: 2.6cqw; background: #f7f5f0; box-shadow: 0 .6cqw 2cqw rgb(0 0 0 / .14); text-align: center; }
.hw-cuecard__phase { grid-area: 1 / 1; display: grid; gap: .6cqw; }
.hw-cuecard__phase b { font: 750 2.9cqw / 1.1 var(--o-font-ui); color: #195440; }
.hw-cuecard__phase span { font: 500 1.9cqw / 1.3 var(--o-font-body); color: #3d3b36; }
.hw-cuecard__phase--out { opacity: 0; }
.hw-cuecard__bar { grid-area: 2 / 1; width: 100%; height: .8cqw; margin-block-start: 1.4cqw; border-radius: 999px; background: #e3ebe5; overflow: clip; }
.hw-cuecard__bar i { display: block; height: 100%; width: 34%; border-radius: inherit; background: #3e8a68; }
/* Bite complete */
.hw-bite__done { display: grid; place-content: center; justify-items: center; gap: 2cqw; }
.hw-bite__done b { padding: 1.8cqw 4cqw; border-radius: 999px; background: #f7f5f0; font: 750 3.2cqw / 1.1 var(--o-font-ui); color: #195440; box-shadow: 0 .6cqw 2cqw rgb(0 0 0 / .14); }
.hw-bite__done-orla { width: 16cqw; filter: drop-shadow(0 1.4cqw 1cqw rgb(40 60 30 / .25)); translate: 0 calc(sin(clamp(0, (var(--s) - 3.45) / .4, 1) * 180deg) * -4cqw); }
.hw-bite__done-orla img { width: 100%; height: auto; }
.hw-confetti {
  --t: clamp(0, (var(--s) - 3.48) / .45, 1);
  position: absolute; left: 50%; top: 46%; width: 4.4cqw; height: auto;
  translate: calc(-50% + var(--dx) * .1cqw * var(--t)) calc(-50% + var(--dy) * .1cqw * var(--t));
  rotate: calc(var(--r) * var(--t) * 1deg); opacity: clamp(0, min(var(--t) * 5, (1.15 - var(--t)) * 3), 1);
}
/* The class: joining in, watching, passing. */
.hw-trio__one { display: grid; justify-items: center; gap: calc(4 * var(--u)); opacity: clamp(0, (var(--s) + .6) / .3, 1); translate: calc(var(--s) * -6 * var(--u)) 0; }
.hw-glow--board { background: radial-gradient(closest-side, rgb(206 232 176 / .9) 0 58%, rgb(232 230 178 / .42) 78%, rgb(236 230 180 / 0)); opacity: calc(var(--on) * .7); }
.hw-trio__one img { width: 100%; height: auto; }
.hw-trio__one b {
  padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: #fff; box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgb(60 50 40 / .15);
  font: 700 calc(22 * var(--u)) / 1.1 var(--o-font-ui); color: #195440; white-space: nowrap;
  opacity: clamp(0, (var(--s) - 1.55) / .15, 1); translate: 0 calc((1 - clamp(0, (var(--s) - 1.55) / .15, 1)) * -10 * var(--u));
}
.hw-trio__one--watch img { rotate: -4deg; }
.hw-trio__one--pass { --pass: clamp(0, (var(--s) - 1.6) / .25, 1); }
.hw-trio__one--pass img { translate: calc(var(--pass) * 14 * var(--u)) 0; rotate: calc(var(--pass) * 6deg); }
.hw-trio__one--join img { transform-origin: 50% 90%; scale: 1.04; }

/* ============================================================ 5. reflect */
.hw-reflect { --page: clamp(0, (var(--s) - .35) / .32, 1); --page-e: calc(var(--page) * var(--page) * (3 - 2 * var(--page))); }
.hw-board--chalk { padding: 0; background: none; box-shadow: none; }
.hw-board--chalk::after { display: none; }
.hw-board--chalk .hw-board__screen { background: none; overflow: visible; }
.hw-chalk {
  position: absolute; inset: 0; border-radius: 1.8cqw; padding: 2.6cqw;
  background: linear-gradient(180deg, #d79d58, #c4843f 40%, #b8783a); box-shadow: inset 0 0 0 .4cqw rgb(255 220 170 / .35), 0 2cqw 4cqw -1.6cqw rgb(60 40 20 / .5);
}
.hw-chalk::after { content: ""; position: absolute; left: 1.6cqw; right: 1.6cqw; bottom: .8cqw; height: 2.2cqw; border-radius: .8cqw; background: linear-gradient(180deg, #e2aa62, #b9783a); box-shadow: 0 .6cqw 1cqw rgb(60 40 20 / .35); }
.hw-chalk__slate {
  position: relative; display: grid; align-content: start; gap: 1.8cqw; height: 100%; padding: 4cqw 5cqw; border-radius: .8cqw;
  background:
    radial-gradient(40% 30% at 30% 40%, rgb(255 255 255 / .06), transparent 70%),
    radial-gradient(50% 40% at 75% 70%, rgb(255 255 255 / .05), transparent 70%),
    linear-gradient(180deg, #2f5a43, #284e3a);
  box-shadow: inset 0 0 3cqw rgb(0 0 0 / .35);
}
.hw-chalk__q { font: 650 4.2cqw / 1.15 var(--o-font-ui); color: rgb(255 255 255 / .94); letter-spacing: .005em; text-shadow: 0 0 .3cqw rgb(255 255 255 / .35); margin-block-end: 1cqw; }
.hw-chalk__idea { --k: 0; display: flex; align-items: center; gap: 1.8cqw; font: 600 3.2cqw / 1.2 var(--o-font-ui); color: rgb(255 255 255 / .9); opacity: var(--k); translate: calc((1 - var(--k)) * -2cqw) 0; }
.hw-chalk__idea::before { content: ""; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #64d39d; }
.hw-chalk__idea--1 { --k: clamp(0, (var(--s) + .5) / .08, 1); }
.hw-chalk__idea--2 { --k: clamp(0, (var(--s) + .3) / .08, 1); }
.hw-chalk__idea--3 { --k: clamp(0, (var(--s) + .1) / .08, 1); }
.hw-chalk__sticks { position: absolute; right: 8cqw; bottom: -1.2cqw; display: flex; gap: 1.4cqw; z-index: 1; }
.hw-chalk__sticks i { width: 5cqw; height: 1.2cqw; border-radius: .6cqw; background: #f4f1ea; }
.hw-chalk__sticks i:nth-child(2) { background: #f2b9b0; }
.hw-chalk__sticks i:nth-child(3) { width: 7cqw; height: 2.6cqw; translate: 0 -1.4cqw; background: linear-gradient(180deg, #555 50%, #8a6440 50%); border-radius: .4cqw; }
.hw-console--board { display: block; padding: 4cqw; }
.hw-blackboard { display: grid; gap: 2.2cqw; padding: 3.6cqw; border-radius: 3cqw; background: #fff; box-shadow: inset 0 0 0 .25cqw #e9e4dc; font-size: 2.6cqw; }
.hw-blackboard > b { font: 750 3.4cqw / 1.1 var(--o-font-ui); }
.hw-blackboard > small { color: #6b6862; font-size: 2.4cqw; margin-block-start: -1.4cqw; }
.hw-blackboard__q { font: 700 2.9cqw / 1.25 var(--o-font-ui); color: #123b56; }
.hw-blackboard__input { position: relative; display: grid; align-items: center; justify-items: start; min-height: 9cqw; padding: 2cqw 2.4cqw; border-radius: 2.4cqw; box-shadow: inset 0 0 0 .3cqw #9fd9bb, 0 0 0 1cqw rgb(92 202 153 / .18); font: 500 2.8cqw / 1.2 var(--o-font-body); }
.hw-type { grid-area: 1 / 1; --k: 0; clip-path: inset(0 calc((1 - var(--k)) * 100%) 0 0); }
.hw-type--1 { --k: clamp(0, (var(--s) + .64) / .12, 1); opacity: calc(1 - clamp(0, (var(--s) + .5) / .02, 1)); }
.hw-type--2 { --k: clamp(0, (var(--s) + .46) / .12, 1); opacity: calc(clamp(0, (var(--s) + .47) / .01, 1) * (1 - clamp(0, (var(--s) + .3) / .02, 1))); }
.hw-type--3 { --k: clamp(0, (var(--s) + .26) / .12, 1); opacity: calc(clamp(0, (var(--s) + .27) / .01, 1) * (1 - clamp(0, (var(--s) + .1) / .02, 1))); }
.hw-caret { position: absolute; right: 2.4cqw; top: 50%; translate: 0 -50%; width: .3cqw; height: 4cqw; background: #25252e; }
.hw-blackboard__row { display: flex; align-items: center; justify-content: space-between; color: #6b6862; }
.hw-ui-pill--add { font-size: 2.4cqw; padding: 1.4cqw 2.6cqw; background: #5c7480; color: #fff; box-shadow: none; }
.hw-page {
  rotate: calc(-6deg + (1 - var(--page-e)) * -14deg);
  translate: calc((1 - var(--page-e)) * -120 * var(--u)) calc((1 - var(--page-e)) * 520 * var(--u));
  opacity: clamp(0, var(--page) * 3, 1);
  filter: drop-shadow(0 calc(16 * var(--u)) calc(20 * var(--u)) rgb(60 50 40 / .32));
}
.hw-page img { display: block; width: 100%; height: auto; border-radius: calc(6 * var(--u)); }
.hw-page__doodle { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-pencil { fill: none; stroke: #4a4a52; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - clamp(0, (var(--s) - .6) / .14, 1)); opacity: .82; }
.hw-pencil--2 { stroke-dashoffset: calc(1 - clamp(0, (var(--s) - .72) / .06, 1)); }
.hw-pencil--3 { stroke: #e2a92c; stroke-dashoffset: calc(1 - clamp(0, (var(--s) - .76) / .1, 1)); }
.hw-pencil--4 { stroke-width: 4; opacity: .5; stroke-dashoffset: calc(1 - clamp(0, (var(--s) - .82) / .12, 1)); }

/* ============================================================ 6. leaders */
.hw-lamp { position: absolute; left: calc(-120 * var(--u)); top: calc(-160 * var(--u)); width: calc(700 * var(--u)); height: calc(700 * var(--u)); border-radius: 50%; background: radial-gradient(closest-side, rgb(255 214 150 / .7), rgb(255 214 150 / 0)); mix-blend-mode: soft-light; }
.hw-desk--wood { top: calc(830 * var(--u)); background: linear-gradient(180deg, #dfb990, #d2ab82 40%, #c9a079); box-shadow: inset 0 calc(4 * var(--u)) 0 #ebcaa4; }
.hw-leaders__orli { filter: saturate(.95) sepia(.08); translate: calc(var(--s) * -10 * var(--u)) 0; }
/* Orli Intelligence, redesigned (3 Nov): the Orli Schools look (cream
   ground, white cards, world colours, Schools doodles), three figures,
   the week as bars topped by each session's Orli, and the sessions. */
.hw-intel { position: absolute; inset: 0; padding: 2.8cqw 3.2cqw 3cqw; display: grid; grid-template-rows: auto auto 1fr; gap: 2.2cqw; background: #f8f5ef; font-family: var(--o-font-ui); color: #2b2a27; }
.hw-intel__head { display: flex; align-items: center; gap: 2cqw; }
/* The Orli Intelligence lockup (as in the film's dashboard): the Orli
   logotype, then "Intelligence" in Orli green on the logotype's baseline. */
.hw-intel__brand { display: inline-flex; align-items: baseline; gap: 1.1cqw; margin-inline-end: auto; }
.hw-intel__logo { display: block; width: auto; height: 3.9cqw; max-width: none; }
.hw-intel__brand b { font: 400 3.1cqw / 1 var(--o-font-ui); letter-spacing: -.01em; color: #4fae7c; }
.hw-intel__seg { display: inline-flex; gap: .4cqw; padding: .45cqw; border-radius: 999px; background: #ece6da; font: 650 1.45cqw / 1 var(--o-font-ui); color: #6b6862; }
.hw-intel__seg > span { padding: .9cqw 1.8cqw; border-radius: 999px; }
.hw-intel__seg > .is-on { background: #fff; color: #1f5a3c; box-shadow: 0 .2cqw .6cqw rgb(60 50 40 / .12); }
.hw-intel__school { display: inline-flex; align-items: center; gap: .8cqw; padding: .9cqw 1.6cqw; border-radius: 999px; background: #fff; font: 650 1.45cqw / 1 var(--o-font-ui); box-shadow: 0 .2cqw .6cqw rgb(60 50 40 / .08); }
.hw-ico { display: inline-block; width: 2cqw; height: 2cqw; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.hw-ico--school { --m: url("../../../../design-kit/icons/schools-doodles/nav--school-classic-black-doodle-2.svg"); color: #1f5a3c; }
.hw-ico--play { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--play.svg"); }
.hw-ico--class { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--blob.svg"); }
.hw-ico--clock { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--clock.svg"); }
.hw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; }
.hw-stat { --tint: #e3f5ec; --deep: #1f7a52; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1.6cqw; row-gap: .5cqw; align-items: center; padding: 2cqw 2.2cqw; border-radius: 2.2cqw; background: #fff; box-shadow: 0 .4cqw 1.4cqw rgb(60 50 40 / .08); overflow: clip; }
.hw-stat::after { content: ""; position: absolute; right: -3cqw; top: -3cqw; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--tint); }
.hw-stat--yellow { --tint: #fff2c7; --deep: #9a6a00; }
.hw-stat--pink { --tint: #fde0ee; --deep: #a83d75; }
.hw-stat__ico { grid-row: 1 / 3; display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; border-radius: 1.6cqw; background: var(--tint); color: var(--deep); }
.hw-stat__ico .hw-ico { width: 3cqw; height: 3cqw; }
.hw-stat b { position: relative; z-index: 1; font: 700 4.8cqw / 1 var(--o-font-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hw-stat b i { font: 650 2cqw / 1 var(--o-font-ui); font-style: normal; letter-spacing: 0; color: #6b6862; }
.hw-stat small { position: relative; z-index: 1; font: 600 1.4cqw / 1.2 var(--o-font-ui); color: #5f5b55; }
.hw-intel__main { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.8cqw; min-height: 0; }
.hw-week, .hw-list { display: grid; gap: 1.2cqw; padding: 2cqw 2.2cqw; border-radius: 2.2cqw; background: #fff; box-shadow: 0 .4cqw 1.4cqw rgb(60 50 40 / .08); min-height: 0; }
.hw-week { grid-template-rows: auto 1fr; padding-block-end: 3.6cqw; }
.hw-week > b, .hw-list > b { font: 700 1.8cqw / 1 var(--o-font-ui); }
.hw-week__bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.4cqw; align-items: end; padding-inline: .6cqw; border-block-end: .2cqw dashed #e2dccf; min-height: 0; }
.hw-bar { --g: clamp(0, (var(--s) + .75 - var(--i) * .06) / .45, 1); --c1: #8ee0b8; --c2: #3fb981; position: relative; display: grid; height: 100%; align-items: end; }
.hw-bar--luna { --c1: #f7a8cf; --c2: #d9619d; }
.hw-bar--rory { --c1: #ffab8a; --c2: #e4572e; }
.hw-bar i { position: relative; display: block; height: max(3%, calc(var(--v) * 74%)); border-radius: 1.4cqw 1.4cqw .4cqw .4cqw; background: linear-gradient(180deg, var(--c1), var(--c2)); transform-origin: 50% 100%; scale: 1 var(--g); }
.hw-bar .hw-face { position: absolute; left: 50%; bottom: calc(100% - 1cqw); width: 4.6cqw; height: 4.6cqw; translate: -50% 0; scale: calc(1 / max(var(--g), .01)) var(--g); opacity: var(--g); }
.hw-bar small { position: absolute; left: 50%; bottom: -2.8cqw; translate: -50% 0; font: 600 1.35cqw / 1 var(--o-font-ui); color: #6b6862; }
.hw-list { align-content: start; }
.hw-row { --k: clamp(0, (var(--s) + .6 - var(--i, 0) * .08) / .2, 1); display: grid; grid-template-columns: auto 1fr auto; gap: 1.2cqw; align-items: center; padding: .9cqw 1cqw; border-radius: 1.4cqw; background: #faf7f1; opacity: var(--k); translate: calc((1 - var(--k)) * 2cqw) 0; }
.hw-row .hw-face { width: 3.6cqw; height: 3.6cqw; }
.hw-row > span { display: grid; gap: .3cqw; min-width: 0; }
.hw-row b { font: 700 1.5cqw / 1.15 var(--o-font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-row small { font: 600 1.2cqw / 1 var(--o-font-ui); color: #6b6862; }
.hw-row em { font: 700 1.3cqw / 1 var(--o-font-ui); font-style: normal; color: #1f5a3c; padding: .6cqw 1cqw; border-radius: 999px; background: #e3f5ec; }
.hw-face { display: block; max-width: none; filter: drop-shadow(0 .2cqw .2cqw rgb(47 46 43 / .2)); }

/* =============================================== live-only: time-based */
/* Breathe with Orla: in full motion, while that moment is on the board, a
   real four-in, four-out rhythm (the scene's one ambient animation). The
   class's joining-in Orla breathes with her. */
html[data-hw="live"] .hw-scene--bite[data-at="3"] :is(.hw-breath__orla, .hw-breath__ring, .hw-breath__ring--outer, .hw-cuecard__phase, .hw-cuecard__bar i, .hw-trio__one--join img) { animation-play-state: running; }
html[data-hw="live"] .hw-breath__orla { animation: hw-breathe-orla 8s ease-in-out infinite paused; }
html[data-hw="live"] .hw-breath__ring { animation: hw-breathe-ring 8s ease-in-out infinite paused; }
html[data-hw="live"] .hw-breath__ring--outer { animation: hw-breathe-outer 8s ease-in-out infinite paused; }
html[data-hw="live"] .hw-cuecard__phase--in { animation: hw-phase-in 8s steps(1, end) infinite paused; }
html[data-hw="live"] .hw-cuecard__phase--out { animation: hw-phase-out 8s steps(1, end) infinite paused; }
html[data-hw="live"] .hw-cuecard__bar i { animation: hw-phase-bar 4s linear infinite paused; }
html[data-hw="live"] .hw-trio__one--join img { animation: hw-breathe-join 8s ease-in-out infinite paused; }
/* the board's light on the wall breathes with her (from and back to its resting glow) */
html[data-hw="live"] .hw-scene--bite[data-at="3"] .hw-glow--board { animation: hw-breathe-glow 8s ease-in-out infinite; }
@keyframes hw-breathe-glow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes hw-breathe-orla { 0%, 100% { scale: .86; translate: 0 4%; } 50% { scale: 1.08; translate: 0 -2%; } }
@keyframes hw-breathe-ring { 0%, 100% { scale: .84; } 50% { scale: 1.06; } }
@keyframes hw-breathe-outer { 0%, 100% { scale: .9; opacity: .5; } 50% { scale: 1.08; opacity: 1; } }
@keyframes hw-breathe-join { 0%, 100% { scale: .97; } 50% { scale: 1.05; } }
@keyframes hw-phase-in { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes hw-phase-out { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes hw-phase-bar { from { width: 0; } to { width: 100%; } }
html[data-hw="live"] .hw-caret { animation: hw-blink 1s steps(1, end) infinite paused; }
html[data-hw="live"] .hw-scene--reflect:is([data-at="-1"], [data-at="0"]) .hw-caret { animation-play-state: running; }
@keyframes hw-blink { 50% { opacity: 0; } }

/* ============================================================ five steps */
.hw-five { position: relative; }
.hw-five__head { max-inline-size: 40rem; }
/* Five felt cards in world colours on one stitched thread, an Orli peeking
   over each card's top edge with the step's Schools doodle beside her. */
.hw-five__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--o-space-4); margin: var(--o-space-8) 0 0; padding: 0; list-style: none; }
.hw-five__list::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 64px; height: 3px; z-index: 0;
  background: repeating-linear-gradient(to right, var(--o-star) 0 12px, transparent 12px 20px);
}
.hw-five__step {
  --soft: var(--w-orla-soft); --accent: var(--w-orla-accent); --deep: var(--w-orla-deep);
  position: relative; z-index: 1; display: grid; align-content: start; gap: var(--o-space-2);
  padding: 76px var(--o-space-5) var(--o-space-6); margin-block-start: 30px;
  border-radius: var(--o-r-card); background: var(--soft);
  box-shadow: inset 0 0 0 1px rgb(47 46 43 / .05), 0 10px 24px -14px rgb(60 57 50 / .35);
}
/* sewn on: a running stitch just inside the card's edge */
.hw-five__step::after {
  content: ""; position: absolute; inset: 7px; border-radius: calc(var(--o-r-card) - 5px); pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
}
.hw-five__step:nth-child(odd) { rotate: -.8deg; }
.hw-five__step:nth-child(even) { rotate: .8deg; translate: 0 10px; }
.hw-five__step[data-tone="finn"] { --soft: var(--w-finn-soft); --accent: var(--w-finn-accent); --deep: var(--w-finn-deep); }
.hw-five__step[data-tone="joy"] { --soft: var(--w-joy-soft); --accent: var(--w-joy-accent); --deep: var(--w-joy-deep); }
.hw-five__step[data-tone="nova"] { --soft: var(--w-nova-soft); --accent: var(--w-nova-accent); --deep: var(--w-nova-deep); }
.hw-five__step[data-tone="luna"] { --soft: var(--w-luna-soft); --accent: var(--w-luna-accent); --deep: var(--w-luna-deep); }
.hw-five__top { position: absolute; left: 0; right: 0; top: -38px; height: 104px; pointer-events: none; }
.hw-five__orli { position: absolute; left: 50%; top: 0; width: 120px; height: auto; translate: -50% 0; filter: drop-shadow(0 6px 6px rgb(47 46 43 / .2)); }
.hw-five__ico {
  position: absolute; right: 14px; top: 44px; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgb(47 46 43 / .14);
}
.hw-five__step:nth-child(1) .hw-five__ico { --m: url("../../../../design-kit/icons/schools-doodles/resources--doodle-heart.svg"); }
.hw-five__step:nth-child(2) .hw-five__ico { --m: url("../../../../design-kit/icons/schools-doodles/resources--doodle-guides.svg"); }
.hw-five__step:nth-child(3) .hw-five__ico { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--jump.svg"); }
.hw-five__step:nth-child(4) .hw-five__ico { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--flower.svg"); }
.hw-five__step:nth-child(5) .hw-five__ico { --m: url("../../../../design-kit/icons/schools-doodles/resources--doodle-star.svg"); }
.hw-five__ico::before {
  content: ""; position: absolute; inset: 7px; background: var(--deep);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.hw-five__n {
  position: absolute; left: 14px; top: 44px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .14);
  font: var(--o-weight-title) 1rem / 1 var(--o-font-ui);
}
.hw-five__step[data-tone="joy"] .hw-five__n { color: var(--o-ink); }
.hw-five__h { font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui); letter-spacing: var(--o-track-heading); color: var(--o-ink); }
.hw-five__step p { color: var(--o-ink); text-wrap: pretty; }
@media (max-width: 1099px) and (min-width: 900px) { .hw-five__step { padding-inline: var(--o-space-4); } .hw-five__orli { width: 104px; } }
@media (max-width: 899px) {
  .hw-five__list { grid-template-columns: minmax(0, 1fr); gap: var(--o-space-5); margin-block-start: var(--o-space-6); }
  .hw-five__list::before { left: 59px; right: auto; top: 40px; bottom: 40px; width: 3px; height: auto; background: repeating-linear-gradient(to bottom, var(--o-star) 0 12px, transparent 12px 20px); }
  .hw-five__step { margin: 0; padding: var(--o-space-5) var(--o-space-5) var(--o-space-5) 128px; min-height: 120px; }
  .hw-five__step:nth-child(n) { rotate: none; translate: none; }
  .hw-five__top { left: 8px; right: auto; top: 50%; width: 104px; height: 100px; translate: 0 -50%; }
  .hw-five__orli { left: 0; top: 4px; width: 104px; translate: none; }
  .hw-five__ico { right: auto; left: 72px; top: auto; bottom: -4px; width: 30px; height: 30px; }
  .hw-five__n { left: auto; right: 14px; top: 14px; }
}
@supports (animation-timeline: view()) {
  html[data-hw="live"] .hw-five__list::before { animation: hw-draw-x linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
  @media (max-width: 899px) { html[data-hw="live"] .hw-five__list::before { animation-name: hw-draw-y; } }
  html[data-hw="live"] .hw-five__step { animation: hw-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
}
@keyframes hw-draw-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hw-draw-y { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hw-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

/* ================================================================ start */
.hw-start { position: relative; isolation: isolate; overflow: clip; padding-block: var(--o-space-9) var(--o-space-8); background: #f4d9c0; }
.hw-start__sky { position: absolute; inset: 0; z-index: -1; }
.hw-start__in { display: grid; justify-items: center; gap: var(--o-space-6); }
.hw-start__card {
  display: grid; justify-items: center; gap: var(--o-space-4); width: min(100%, 44rem);
  padding: var(--o-space-7) var(--o-space-6); border-radius: var(--o-r-card); text-align: center;
  background: color-mix(in srgb, var(--o-canvas) 90%, transparent); box-shadow: var(--o-shadow-raised);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hw-start__card .o-title { max-inline-size: 16ch; text-wrap: balance; }
.hw-start__card .o-lead { max-inline-size: 34rem; }
.hw-start__go { justify-content: center; margin-block-start: var(--o-space-2); }
.hw-start__more { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--o-space-2) var(--o-space-6); margin: var(--o-space-2) 0 0; padding: 0; list-style: none; }
.hw-start__more a { display: inline-flex; align-items: center; gap: var(--o-space-2); min-height: var(--o-target); }
.hw-start__size { color: var(--o-ink-2); }
.hw-start__orlis { display: flex; justify-content: center; align-items: end; gap: 0; width: min(100%, 60rem); margin: 0; padding: 0; list-style: none; }
.hw-start__orlis li { --lift: 0; flex: 1 1 0; max-width: 140px; margin-inline: -1.2%; translate: 0 calc(var(--lift) * -1px); }
.hw-start__orlis li:nth-child(1), .hw-start__orlis li:nth-child(8) { --lift: 22; }
.hw-start__orlis li:nth-child(2), .hw-start__orlis li:nth-child(7) { --lift: 14; }
.hw-start__orlis li:nth-child(3), .hw-start__orlis li:nth-child(6) { --lift: 7; }
.hw-start__orlis li:nth-child(4) { max-width: 160px; z-index: 1; }
.hw-start__orlis img { width: 100%; height: auto; }
@media (max-width: 599px) {
  .hw-start__card { padding: var(--o-space-6) var(--o-space-4); }
  .hw-start__orlis li { margin-inline: -2.5%; }
}
@supports (animation-timeline: view()) {
  html[data-hw="live"] .hw-start__orlis li { animation: hw-hop linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 3%) entry calc(40% + var(--i) * 3%); }
}
@keyframes hw-hop { 0% { translate: 0 60px; opacity: 0; } 60% { translate: 0 calc(var(--lift) * -1px - 16px); opacity: 1; } 100% { translate: 0 calc(var(--lift) * -1px); opacity: 1; } }

/* ======================================================== forced colours */
@media (forced-colors: active) {
  .hw-knot, .hw-five__n { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 2px CanvasText; }
  .hw-steps::before, .hw-five__list::before { background: CanvasText; }
  .hw-five__step { border: 1px solid CanvasText; }
  .hw-guide { display: none !important; }
  .hw-start__card { border: 1px solid CanvasText; }
}
@media print {
  .hw-guide, .hw-cue { display: none !important; }
  html[data-hw="live"] .hw-stage { position: relative; height: auto; }
}