/* Saksham's loading screen and the cover's background. Three pictures (markup: tools/saksham-restore.cjs, each drawn once in its FINISHED state): the FRONT of a school that falls
   apart and puts itself back together; a CORRIDOR the camera travels down; and a CLASSROOM of children throwing things about. The loading screen plays all three in turn; the
   classroom, quiet and dim, then stays behind the cover's headline and KEEPS MOVING until it is paused. Driver: next/saksham-loader.js. Colours: Mulberry, Gold, Ink and Paper and straight
   mixes of them (color-mix, so the brand tokens stay the single source). Two palettes: BRIGHT for the loading screen (nothing is written over it), DIM for the cover (the lightest colour in
   it is Paper mixed into Mulberry at about a quarter, shadows are Ink at low opacity, so the headline and the lines under it keep WCAG 2.2 AA; tools/test/saksham-loader.mjs measures this
   pixel by pixel at several moments of the loop).
   Two kinds of motion: .rs-a plays ONCE (only while the root carries .rs--play: the story), .rs-loop plays FOREVER (the classroom; stilled under reduced motion, paused by the cover's
   Pause button, and paused while the cover is not the slide on show). */

/* ---- palettes ---- */
.rs { display: block; width: 100%; height: 100%; overflow: visible; }
.rs--bright {
  --rs-top: color-mix(in srgb, var(--paper) 22%, var(--sak-plum)); --rs-l: color-mix(in srgb, var(--paper) 9%, var(--sak-plum)); --rs-r: color-mix(in srgb, var(--ink) 34%, var(--sak-plum));
  --rs-line: var(--paper); --rs-line-w: 1.3px; --rs-hi: var(--paper);
  --rs-plate-t: color-mix(in srgb, var(--ink) 18%, var(--sak-plum)); --rs-plate-l: color-mix(in srgb, var(--ink) 36%, var(--sak-plum)); --rs-plate-r: color-mix(in srgb, var(--ink) 48%, var(--sak-plum));
  --rs-grid: color-mix(in srgb, var(--paper) 24%, var(--sak-plum));
  --rs-win-on: color-mix(in srgb, var(--sak-gold), var(--ink) 0%); --rs-win-off: color-mix(in srgb, var(--ink) 52%, var(--sak-plum)); --rs-gold: color-mix(in srgb, var(--sak-gold), var(--ink) 0%);
  --rs-ruin-t: color-mix(in srgb, var(--ink) 42%, var(--sak-plum)); --rs-ruin-l: color-mix(in srgb, var(--ink) 54%, var(--sak-plum)); --rs-ruin-r: color-mix(in srgb, var(--ink) 66%, var(--sak-plum));
  --rs-board: var(--paper); --rs-chalk: color-mix(in srgb, var(--sak-plum) 70%, var(--paper));
  --rs-s1: var(--sak-gold); --rs-s2: var(--paper); --rs-s3: color-mix(in srgb, var(--paper) 52%, var(--sak-plum)); --rs-head: var(--paper); --rs-hair: color-mix(in srgb, var(--ink) 62%, var(--sak-plum));
  --rs-canopy: color-mix(in srgb, var(--sak-gold) 38%, var(--sak-plum)); --rs-canopy-2: color-mix(in srgb, var(--sak-gold) 56%, var(--sak-plum));
  --rs-weed: color-mix(in srgb, var(--sak-gold) 70%, var(--sak-plum)); --rs-crack: var(--ink); --rs-hole: var(--ink); --rs-plank: color-mix(in srgb, var(--paper) 70%, var(--sak-plum)); --rs-brick: color-mix(in srgb, var(--ink) 30%, var(--sak-plum)); --rs-puddle: color-mix(in srgb, var(--ink) 45%, var(--sak-plum)); --rs-patch: color-mix(in srgb, var(--ink) 40%, var(--sak-plum));
  --rs-sky1: color-mix(in srgb, var(--ink) 26%, var(--sak-plum)); --rs-sky2: color-mix(in srgb, var(--ink) 12%, var(--sak-plum)); --rs-sky3: color-mix(in srgb, var(--sak-plum), var(--ink) 0%); --rs-sky4: color-mix(in srgb, var(--sak-gold) 9%, var(--sak-plum)); --rs-sky5: color-mix(in srgb, var(--sak-gold) 16%, var(--sak-plum));
  --rs-sky-r1: color-mix(in srgb, var(--ink) 62%, var(--sak-plum)); --rs-sky-r2: color-mix(in srgb, var(--ink) 56%, var(--sak-plum)); --rs-sky-r3: color-mix(in srgb, var(--ink) 50%, var(--sak-plum)); --rs-sky-r4: color-mix(in srgb, var(--ink) 44%, var(--sak-plum)); --rs-sky-r5: color-mix(in srgb, var(--ink) 38%, var(--sak-plum));
  --rs-cloud: color-mix(in srgb, var(--paper) 42%, var(--sak-plum)); --rs-curtain: color-mix(in srgb, var(--sak-gold) 46%, var(--sak-plum)); --rs-beam: var(--sak-gold); --rs-beam-o: .9; --rs-halo-o: .55; --rs-patch-o: .3; --rs-over-o: .22;
  --rs-glass: color-mix(in srgb, var(--sak-gold) 55%, var(--sak-plum));
}
.rs--dim {
  --rs-top: color-mix(in srgb, var(--paper) 11%, var(--sak-plum)); --rs-l: color-mix(in srgb, var(--paper) 6%, var(--sak-plum)); --rs-r: color-mix(in srgb, var(--ink) 22%, var(--sak-plum));
  --rs-line: color-mix(in srgb, var(--paper) 18%, var(--sak-plum)); --rs-line-w: 1.2px; --rs-hi: color-mix(in srgb, var(--paper) 12%, var(--sak-plum));
  --rs-plate-t: color-mix(in srgb, var(--ink) 10%, var(--sak-plum)); --rs-plate-l: color-mix(in srgb, var(--ink) 22%, var(--sak-plum)); --rs-plate-r: color-mix(in srgb, var(--ink) 32%, var(--sak-plum));
  --rs-grid: color-mix(in srgb, var(--paper) 13%, var(--sak-plum));
  --rs-win-on: color-mix(in srgb, var(--sak-gold) 34%, var(--sak-plum)); --rs-win-off: color-mix(in srgb, var(--ink) 40%, var(--sak-plum)); --rs-gold: color-mix(in srgb, var(--sak-gold) 34%, var(--sak-plum));
  --rs-ruin-t: color-mix(in srgb, var(--ink) 30%, var(--sak-plum)); --rs-ruin-l: color-mix(in srgb, var(--ink) 40%, var(--sak-plum)); --rs-ruin-r: color-mix(in srgb, var(--ink) 50%, var(--sak-plum));
  --rs-board: color-mix(in srgb, var(--paper) 13%, var(--sak-plum)); --rs-chalk: color-mix(in srgb, var(--paper) 8%, var(--sak-plum));
  --rs-s1: color-mix(in srgb, var(--sak-gold) 19%, var(--sak-plum)); --rs-s2: color-mix(in srgb, var(--paper) 14%, var(--sak-plum)); --rs-s3: color-mix(in srgb, var(--paper) 10%, var(--sak-plum)); --rs-head: color-mix(in srgb, var(--paper) 16%, var(--sak-plum)); --rs-hair: color-mix(in srgb, var(--ink) 28%, var(--sak-plum));
  --rs-canopy: color-mix(in srgb, var(--sak-gold) 11%, var(--sak-plum)); --rs-canopy-2: color-mix(in srgb, var(--sak-gold) 17%, var(--sak-plum));
  --rs-weed: color-mix(in srgb, var(--sak-gold) 20%, var(--sak-plum)); --rs-crack: var(--ink); --rs-hole: var(--ink); --rs-plank: color-mix(in srgb, var(--paper) 20%, var(--sak-plum)); --rs-brick: color-mix(in srgb, var(--ink) 20%, var(--sak-plum)); --rs-puddle: color-mix(in srgb, var(--ink) 30%, var(--sak-plum)); --rs-patch: color-mix(in srgb, var(--ink) 30%, var(--sak-plum));
  --rs-sky1: color-mix(in srgb, var(--ink) 16%, var(--sak-plum)); --rs-sky2: color-mix(in srgb, var(--ink) 8%, var(--sak-plum)); --rs-sky3: color-mix(in srgb, var(--sak-plum), var(--ink) 0%); --rs-sky4: color-mix(in srgb, var(--sak-gold) 4%, var(--sak-plum)); --rs-sky5: color-mix(in srgb, var(--sak-gold) 8%, var(--sak-plum));
  --rs-sky-r1: color-mix(in srgb, var(--ink) 42%, var(--sak-plum)); --rs-sky-r2: color-mix(in srgb, var(--ink) 38%, var(--sak-plum)); --rs-sky-r3: color-mix(in srgb, var(--ink) 34%, var(--sak-plum)); --rs-sky-r4: color-mix(in srgb, var(--ink) 30%, var(--sak-plum)); --rs-sky-r5: color-mix(in srgb, var(--ink) 26%, var(--sak-plum));
  --rs-cloud: color-mix(in srgb, var(--paper) 18%, var(--sak-plum)); --rs-curtain: color-mix(in srgb, var(--sak-gold) 14%, var(--sak-plum)); --rs-beam: color-mix(in srgb, var(--sak-gold) 46%, var(--sak-plum)); --rs-beam-o: .7; --rs-halo-o: .4; --rs-patch-o: .22; --rs-over-o: .14;
  --rs-glass: color-mix(in srgb, var(--sak-gold) 22%, var(--sak-plum));
}

/* ---- the front of the school, finished (the plain style of every element) ---- */
.rs polygon, .rs path, .rs circle, .rs rect, .rs ellipse { stroke-linejoin: round; stroke-linecap: round; }
.rs-s { stroke: var(--rs-line); stroke-width: var(--rs-line-w); }
.rs-s-w { fill: var(--rs-l); --ruin: var(--rs-ruin-l); } .rs-s-w2 { fill: var(--rs-r); --ruin: var(--rs-ruin-r); } .rs-s-r { fill: var(--rs-top); --ruin: var(--rs-ruin-t); } .rs-s-d { fill: var(--rs-gold); --ruin: var(--rs-ruin-l); }
.rs-s-sky { stroke: none; } .rs-sky1 { fill: var(--rs-sky1); --ruin: var(--rs-sky-r1); } .rs-sky2 { fill: var(--rs-sky2); --ruin: var(--rs-sky-r2); } .rs-sky3 { fill: var(--rs-sky3); --ruin: var(--rs-sky-r3); } .rs-sky4 { fill: var(--rs-sky4); --ruin: var(--rs-sky-r4); } .rs-sky5 { fill: var(--rs-sky5); --ruin: var(--rs-sky-r5); }
.rs-sunhalo { fill: var(--rs-gold); opacity: .09; } .rs-sunhalo2 { opacity: .14; } .rs-sun { fill: var(--rs-gold); } .rs-cloud { fill: var(--rs-cloud); opacity: .55; } .rs-bird { fill: none; stroke: var(--rs-line); stroke-width: 1.6px; }
.rs-ground { fill: var(--rs-plate-t); stroke: none; --ruin: var(--rs-ruin-t); } .rs-groundline { fill: none; stroke: var(--rs-line); stroke-width: var(--rs-line-w); }
.rs-shade { fill: var(--ink); stroke: none; } .rs-hi { fill: var(--rs-hi); stroke: none; } .rs-sill { fill: var(--rs-top); stroke: var(--rs-line); stroke-width: .8px; }
.rs-pipe { fill: none; stroke: var(--rs-gold); stroke-width: 4; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rs-win { fill: var(--rs-win-on); stroke: var(--rs-line); stroke-width: .9px; } .rs-mun { fill: none; stroke: var(--rs-line); stroke-width: 1; opacity: .7; } .rs-curtain { fill: var(--rs-curtain); opacity: .8; stroke: none; }
.rs-trim { fill: var(--rs-gold); stroke: none; } .rs-vent { fill: var(--rs-top); stroke: var(--rs-line); stroke-width: .9px; }
.rs-doorway { fill: var(--rs-win-off); stroke: var(--rs-line); stroke-width: var(--rs-line-w); } .rs-knob { fill: var(--rs-line); }
.rs-plaque { fill: var(--rs-gold); stroke: var(--rs-line); stroke-width: .9px; } .rs-clockface { fill: var(--rs-board); stroke: var(--rs-line); stroke-width: 1px; } .rs-clockhand { fill: none; stroke: var(--rs-line); stroke-width: 1.3px; }
.rs-pole { fill: var(--rs-line); } .rs-flag { fill: var(--rs-gold); stroke: var(--rs-line); stroke-width: 1.2px; } .rs-rail { fill: none; stroke: var(--rs-line); stroke-width: 2px; } .rs-post { fill: var(--rs-line); }
.rs-glowdisc { fill: var(--rs-gold); opacity: .13; } .rs-winglow { fill: var(--rs-gold); opacity: .16; } .rs-lampbulb { fill: var(--rs-gold); stroke: var(--rs-line); stroke-width: .8px; }
.rs-hedge { fill: var(--rs-canopy); stroke: var(--rs-line); stroke-width: 1px; } .rs-flower { fill: var(--rs-s2); }
.rs-trunk { fill: var(--rs-line); stroke: none; } .rs-canopy { fill: var(--rs-canopy); stroke: var(--rs-line); stroke-width: 1.2px; } .rs-canopy-2 { fill: var(--rs-canopy-2); }
/* what belongs to the ruin is not there once the school is finished */
.rs-ruin { opacity: 0; }
.rs-crack { fill: none; stroke: var(--rs-crack); stroke-width: 1.8px; } .rs-hole { fill: var(--rs-hole); opacity: .85; stroke: var(--rs-line); stroke-width: .8px; } .rs-patch { fill: var(--rs-patch); stroke: none; }
.rs-plank { fill: none; stroke: var(--rs-plank); stroke-width: 2.6px; } .rs-weed { fill: none; stroke: var(--rs-weed); stroke-width: 1.8px; }
.rs-brick { fill: var(--rs-brick); stroke: var(--rs-line); stroke-width: .8px; } .rs-puddle { fill: var(--rs-puddle); stroke: none; opacity: .6; }
.rs-sheet { fill: var(--paper); stroke: var(--rs-line); stroke-width: .8px; } .rs-ink { fill: none; stroke: var(--ink); stroke-width: 1.2px; opacity: .5; }
.rs-bld, .rs-colg, .rs-ped, .rs-tree { transform-box: fill-box; transform-origin: 50% 100%; }
.rs-wing-l { transform-origin: 100% 100%; } .rs-wing-r { transform-origin: 0% 100%; } .rs-ped { transform-origin: 50% 50%; }
.rs-doorg, .rs-flagg { transform-box: view-box; }

/* ---- the corridor ---- */
.rs-h-ceil { fill: var(--rs-top); } .rs-h-floor { fill: var(--rs-plate-t); } .rs-h-wall { fill: var(--rs-l); } .rs-h-wall2 { fill: var(--rs-r); }
.rs-h-seam { fill: none; stroke: var(--rs-grid); stroke-width: 1; } .rs-h-rail { fill: none; stroke: var(--rs-line); stroke-width: 1.4; opacity: .8; } .rs-h-skirt { fill: none; stroke: var(--rs-line); stroke-width: 1; opacity: .6; }
.rs-h-end { fill: var(--rs-r); stroke: var(--rs-line); stroke-width: 1; } .rs-h-door { fill: var(--rs-top); stroke: var(--rs-line); stroke-width: 1; } .rs-h-doorglow { fill: var(--rs-gold); } .rs-h-pane { fill: var(--rs-win-on); stroke: var(--rs-line); stroke-width: .6px; }
.rs-h-lamp { fill: var(--rs-gold); } .rs-h-pool { fill: var(--rs-gold); opacity: .1; } .rs-h-stripe { fill: var(--ink); opacity: .22; }
.rs-h-locker { stroke: var(--rs-line); stroke-width: .8px; } .rs-h-locker1 { fill: var(--rs-s3); } .rs-h-locker2 { fill: var(--rs-s1); } .rs-h-handle { fill: var(--rs-line); }
.rs-h-cdoor { fill: var(--rs-r); stroke: var(--rs-line); stroke-width: 1px; } .rs-h-plaque { fill: var(--rs-gold); } .rs-h-board { fill: var(--rs-board); stroke: var(--rs-line); stroke-width: 1px; } .rs-h-note { fill: var(--rs-s1); stroke: var(--rs-line); stroke-width: .5px; }
.rs-h-glass { fill: var(--rs-glass); stroke: var(--rs-line); stroke-width: 1px; } .rs-h-banner { fill: var(--rs-s3); stroke: var(--rs-line); stroke-width: .8px; } .rs-h-bannerstripe { fill: var(--rs-s1); }
.rs-hg { transform-origin: 400px 235px; transform-box: view-box; transform: scale(var(--s8)); opacity: var(--o8); }    /* the finished state of the corridor is the last of the nine samples (everything has passed: nothing shows) */

/* ---- the classroom (the picture that stays behind the cover) ---- */
.rs-room-wall { fill: var(--rs-l); } .rs-room-dado { fill: var(--rs-plate-l); } .rs-room-rail { fill: var(--rs-top); } .rs-room-base { fill: var(--rs-plate-l); } .rs-room-floor { fill: var(--rs-plate-t); } .rs-room-ceil { fill: var(--rs-plate-r); } .rs-room-line { fill: none; stroke: var(--rs-grid); stroke-width: 1; }
.rs-frame { fill: var(--rs-top); stroke: var(--rs-line); stroke-width: var(--rs-line-w); } .rs-pane { fill: url(#rs-g-pane); stroke: var(--rs-line); stroke-width: .9px; } .rs-beam { opacity: var(--rs-beam-o); } .rs-shaft-l { fill: url(#rs-g-shaft-l); } .rs-shaft-r { fill: url(#rs-g-shaft-r); } .rs-shaft { stroke: none; } .rs-patch { fill: var(--rs-beam); opacity: var(--rs-patch-o); stroke: none; } .rs-halo { fill: url(#rs-g-halo); opacity: var(--rs-halo-o); stroke: none; } .rs-over { opacity: var(--rs-over-o); } .rs-motedot { fill: var(--rs-hi); }
.rs-board { fill: var(--rs-board); stroke: var(--rs-line); stroke-width: 1.4px; } .rs-chalk { fill: none; stroke: var(--rs-chalk); stroke-width: 2.4px; } .rs-chalk2 { stroke-width: 2.8px; }
.rs-clock { fill: var(--rs-board); stroke: var(--rs-line); stroke-width: 1.4px; } .rs-hand { fill: none; stroke: var(--rs-chalk); stroke-width: 2px; } .rs-poster { fill: var(--rs-s3); stroke: var(--rs-line); stroke-width: .9px; } .rs-poster2 { fill: var(--rs-s1); }
.rs-string { fill: none; stroke: var(--rs-line); stroke-width: 1.2px; } .rs-flagtri { stroke: var(--rs-line); stroke-width: .8px; } .rs-flagtri0 { fill: var(--rs-s1); } .rs-flagtri1 { fill: var(--rs-s2); } .rs-flagtri2 { fill: var(--rs-s3); } .rs-blade { fill: var(--rs-s3); stroke: var(--rs-line); stroke-width: .8px; opacity: .85; }
.rs-pot { fill: var(--rs-s1); stroke: var(--rs-line); stroke-width: .9px; } .rs-leaf { fill: var(--rs-canopy-2); stroke: var(--rs-line); stroke-width: .8px; }
.rs-shelf { fill: var(--rs-top); stroke: var(--rs-line); stroke-width: .9px; } .rs-bookspine { stroke: var(--rs-line); stroke-width: .7px; } .rs-bookspine0 { fill: var(--rs-s1); } .rs-bookspine1 { fill: var(--rs-s2); } .rs-bookspine2 { fill: var(--rs-s3); }
.rs-globe { fill: var(--rs-s3); stroke: var(--rs-line); stroke-width: 1px; } .rs-apple { fill: var(--rs-s1); stroke: var(--rs-line); stroke-width: .8px; } .rs-bag { stroke: var(--rs-line); stroke-width: 1px; rx: 6px; } .rs-bag1 { fill: var(--rs-s1); } .rs-bag2 { fill: var(--rs-s3); }
.rs-bin { fill: var(--rs-r); stroke: var(--rs-line); stroke-width: 1px; } .rs-binrim { fill: var(--rs-plate-r); stroke: var(--rs-line); stroke-width: .8px; }
.rs-teacher-body { fill: var(--rs-r); stroke: var(--rs-line); stroke-width: var(--rs-line-w); } .rs-teacher-leg { fill: var(--rs-plate-r); stroke: var(--rs-line); stroke-width: var(--rs-line-w); }
.rs-skin { fill: var(--rs-head); stroke: var(--rs-line); stroke-width: 1.1px; } .rs-hair { fill: var(--rs-hair); stroke: none; } .rs-eye { fill: var(--rs-hair); } .rs-mouth { fill: var(--rs-hair); } .rs-smile { fill: none; stroke: var(--rs-hair); stroke-width: 1.6px; }
.rs-kid { stroke: var(--rs-line); stroke-width: var(--rs-line-w); rx: 12px; } .rs-kid.rs-k1 { fill: var(--rs-s1); } .rs-kid.rs-k2 { fill: var(--rs-s2); } .rs-kid.rs-k3 { fill: var(--rs-s3); }
.rs-armline { fill: none; stroke-width: 9px; } .rs-armline.rs-k1 { stroke: var(--rs-s1); } .rs-armline.rs-k2 { stroke: var(--rs-s2); } .rs-armline.rs-k3 { stroke: var(--rs-s3); }
.rs-desk { fill: var(--rs-top); stroke: var(--rs-line); stroke-width: var(--rs-line-w); } .rs-chair { fill: var(--rs-r); stroke: var(--rs-line); stroke-width: var(--rs-line-w); }
.rs-ball { fill: var(--rs-board); stroke: var(--rs-line); stroke-width: 1.1px; } .rs-plane { fill: var(--rs-board); stroke: var(--rs-line); stroke-width: 1.1px; } .rs-plane-2 { fill: var(--rs-s3); }
.rs-book { fill: var(--rs-s1); stroke: var(--rs-line); stroke-width: 1.2px; } .rs-pencil { fill: var(--rs-gold); stroke: var(--rs-line); stroke-width: .8px; } .rs-trail { fill: none; stroke: var(--rs-line); stroke-width: 1.4px; stroke-dasharray: 3 5; opacity: .8; }

/* ---- the loops: forever (the classroom). Defaults: a period (--p) and how far into the cycle each starts (--ph, negative) ---- */
.rs-loop { transform-box: fill-box; transform-origin: 50% 100%; animation-duration: var(--p, 2s); animation-delay: var(--ph, 0s); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.rs-bob { animation-name: rs-bob; } .rs-bob2 { animation-name: rs-bob2; } .rs-armrest { animation-name: rs-armrest; } .rs-armthrow { animation-name: rs-armthrow; } .rs-armwave { animation-name: rs-armwave; }
.rs-chalkarm { animation-name: rs-chalkarm; } .rs-chalkdraw { animation-name: rs-chalkdraw; } .rs-spin { animation-name: rs-spin; animation-timing-function: linear; } .rs-sway { animation-name: rs-sway; }
.rs-mote { animation-name: rs-mote; animation-timing-function: linear; } .rs-bird-cross { animation-name: rs-birdcross; animation-timing-function: linear; }
.rs-arc, .rs-paperfall, .rs-spin { transform-box: view-box; } .rs-arc { transform-origin: 0 0; animation-name: rs-arc; animation-timing-function: linear; } .rs-paperfall { transform-origin: 0 0; animation-name: rs-paperfall; animation-timing-function: linear; }
@keyframes rs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes rs-bob2 { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-7px); } 40% { transform: translateY(0); } 65% { transform: translateY(-3px); } }
@keyframes rs-armrest { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } }
@keyframes rs-armthrow { 0%, 62%, 100% { transform: rotate(0deg); } 22% { transform: rotate(-38deg); } 38% { transform: rotate(16deg); } }
@keyframes rs-armwave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(16deg); } }
@keyframes rs-chalkarm { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-13deg); } }
@keyframes rs-chalkdraw { 0%, 12% { opacity: 0; } 40%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rs-spin { to { transform: rotate(360deg); } }
@keyframes rs-sway { 0%, 100% { transform: skewX(-2.2deg); } 50% { transform: skewX(2.2deg); } }
@keyframes rs-mote { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--mx, 10px), -70px); } }
@keyframes rs-birdcross { 0% { opacity: 0; transform: translate(-30px, 6px); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(150px, -16px); } }
@keyframes rs-arc { 0% { opacity: 0; transform: translate(var(--x0), var(--y0)) rotate(var(--r0)); } 6% { opacity: 1; } 25% { transform: translate(var(--x1), var(--y1)) rotate(var(--r1)); } 50% { transform: translate(var(--x2), var(--y2)) rotate(var(--r2)); } 75% { transform: translate(var(--x3), var(--y3)) rotate(var(--r3)); } 94% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x4), var(--y4)) rotate(var(--r4)); } }
@keyframes rs-paperfall { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 8% { opacity: .9; } 50% { transform: translate(20px, 150px) rotate(170deg); } 92% { opacity: .9; } 100% { opacity: 0; transform: translate(-12px, 310px) rotate(340deg); } }
.sk-art.is-paused .rs-loop, .beat[data-first]:not(.live) .sk-art .rs-loop { animation-play-state: paused; }              /* the Pause button; and a cover that is not on show does not run */
/* the cover's own copy, hidden under the loading screen, holds still while the story plays (nothing is animated twice); at the hand-over it starts, at the same moment of every loop as the screen's copy
   (saksham-loader.js sets them), and the screen's copy never stops: the motion carries on through the hand-over without a break */
html.is-loading:not(.sk-xfade) .sk-art .rs-loop { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .rs-loop { animation: none !important; } }

/* ---- the story: only while the root carries .rs--play (the loading screen's copies) ---- */
.rs--facade { --ts: .8; }                                              /* the front of the school is put right 20 % faster than its delays say */
.rs--play .rs-a { animation-duration: .8s; animation-timing-function: var(--ease, cubic-bezier(.2, .7, .2, 1)); animation-delay: calc(var(--d, 0s) * var(--ts, 1)); animation-fill-mode: backwards; animation-play-state: paused; }
.rs--play.rs--go .rs-a { animation-play-state: running; }
.rs--play .rs-bld, .rs--play .rs-colg, .rs--play .rs-ped, .rs--play .rs-flagg, .rs--play .rs-doorg { animation-name: rs-stand; animation-duration: .95s; }
.rs--play .rs-paint { animation-name: rs-paint; animation-duration: 1s; animation-timing-function: ease; }
.rs--play .rs-lit { animation-name: rs-lit; animation-duration: .4s; animation-timing-function: ease; }
.rs--play .rs-appear, .rs--play .rs-tree { animation-name: rs-appear; animation-duration: .55s; }
.rs--play .rs-gone { animation-name: rs-gone; animation-duration: .7s; animation-timing-function: ease; }
.rs--play .rs-draw { animation-name: rs-draw; animation-duration: .7s; animation-timing-function: ease; }
.rs--play .rs-drift { animation-name: rs-drift; animation-duration: 1.1s; animation-timing-function: ease-out; }
.rs--play .rs-fall { animation-name: rs-fall; animation-duration: .5s; animation-timing-function: cubic-bezier(.5, 0, 1, .6); animation-iteration-count: 2; }
.rs--play .rs-fly { animation-name: rs-fly; animation-duration: 1.4s; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
.rs--play .rs-sunrise { animation-name: rs-appear; animation-duration: 1.2s; }
.rs--play .rs-cloudmove { animation: rs-cloudmove 6s linear both paused; } .rs--play.rs--go .rs-cloudmove { animation-play-state: running; }
@keyframes rs-stand { from { transform: var(--from, none); } }
@keyframes rs-paint { from { fill: var(--ruin); } }
@keyframes rs-lit { from { fill: var(--rs-win-off); } }
@keyframes rs-appear { from { opacity: 0; transform: var(--from, none); } }
@keyframes rs-gone { from { opacity: 1; } to { opacity: 0; } }
@keyframes rs-draw { from { stroke-dashoffset: 1; } }
@keyframes rs-fall { from { opacity: 0; transform: translateY(-46px); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes rs-drift { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -30px)); } }
@keyframes rs-fly { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r, 0deg)); } 18% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes rs-cloudmove { from { transform: translateX(0); } to { transform: translateX(40px); } }
/* the camera: the corridor's pieces move out from the vanishing point by nine samples of a smooth start and stop (the numbers are in each piece's style) */
.rs--play .rs-hg { animation: rs-hall 1.95s linear 2.85s both paused; } .rs--play.rs--go .rs-hg { animation-play-state: running; }
@keyframes rs-hall {
  0% { transform: scale(var(--s0)); opacity: var(--o0); } 12.5% { transform: scale(var(--s1)); opacity: var(--o1); } 25% { transform: scale(var(--s2)); opacity: var(--o2); } 37.5% { transform: scale(var(--s3)); opacity: var(--o3); }
  50% { transform: scale(var(--s4)); opacity: var(--o4); } 62.5% { transform: scale(var(--s5)); opacity: var(--o5); } 75% { transform: scale(var(--s6)); opacity: var(--o6); } 87.5% { transform: scale(var(--s7)); opacity: var(--o7); } 100% { transform: scale(var(--s8)); opacity: var(--o8); }
}
/* the three pictures on the loading screen, in turn: the front of the school; the push in through its doors; the corridor; the push in to the classroom door; the classroom */
.rs--play.rs--facade { transform-origin: 50% 72%; animation: rs-push .55s cubic-bezier(.6, 0, .9, .4) 2.5s both paused; }
.rs--play.rs--hall { animation: rs-hallin .45s ease 2.55s backwards paused, rs-hallout .5s ease 4.7s forwards paused; }
.rs--play.rs--room { animation: rs-enter .75s var(--ease, ease) 4.55s backwards paused; }
.rs--play.rs--go.rs--facade, .rs--play.rs--go.rs--room { animation-play-state: running; } .rs--play.rs--go.rs--hall { animation-play-state: running, running; }
@keyframes rs-push { 0% { transform: none; opacity: 1; } 60% { opacity: 1; } 100% { transform: scale(4); opacity: 0; } }
@keyframes rs-hallin { from { opacity: 0; } } @keyframes rs-hallout { to { opacity: 0; } }
@keyframes rs-enter { from { opacity: 0; transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) { .rs .rs-a, .rs.rs--play, .rs--play .rs-hg { animation: none !important; } }
/* the hand-over: the cover's copy of the picture (dim) is put in place under the screen's (bright), which fades away to show it: one opacity change on one layer, not a colour transition on every element,
   and not two layers fading against each other (which took about a third off the frame rate where there is no GPU) */

/* ---- the cover's copy: the classroom fills the whole background of the cover, behind the headline ----
   Absolutely placed in the cover's frame (a fixed layer at the viewport's origin), edge to edge, behind its content, never in the way of a click. The picture is scaled to COVER the
   screen (preserveAspectRatio "xMaxYMid slice": cropped, never stretched, and anchored to the right so that the children stay in view and the shelf and the left window are what is
   cropped on a narrow screen); the room's wall and floor run far past its picture, so there is no edge. A scrim of the cover's own Mulberry fades the picture out under the text on the left
   (and all over on a phone), which is what keeps every line of text at WCAG 2.2 AA over a picture that moves. The loading screen measures this box (offsetLeft / Top / Width / Height, which a
   transform on a parent does not touch) and docks its own copy onto it. The school's front and the corridor are in the markup too (for the loading screen to clone) but are not shown here. */
:root { --rs-w: min(86vw, calc(88vh * 1.6), 1120px); }                 /* the width of every picture in the story and of the cover's copy: the same, so that the hand-over does not move the picture */
.sk-art { position: absolute; inset: 0; max-width: none; width: auto; margin: 0; z-index: -1;   /* the frame caps its children at 1440px, centred: the picture is the screen's, not the frame's */
  pointer-events: none; overflow: hidden; opacity: var(--art-o, 1); transition: opacity .6s ease; }
.sk-art > .rs--room { position: absolute; inset: 0; margin: auto; width: var(--rs-w); height: calc(var(--rs-w) / 1.6); }
.sk-art .rs--facade, .sk-art .rs--hall { display: none; }
.sk-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 40%, transparent 50%, color-mix(in srgb, var(--ink) 34%, transparent) 100%); }
                                                                        /* a vignette, drawn once: the picture is warm and calm, with nothing glowing over it */
/* a light tint over the whole picture (the cover's Mulberry, 12%), and soft pools of the same Mulberry only where the text is: the headline, the lede and the chips on the left, the buttons on the right.
   Away from the text the classroom shows as it is drawn. A pool is what keeps the text at WCAG 2.2 AA over a picture that moves (tools/test/saksham-loader.mjs checks every line, pixel by pixel). */
.sk-art::after { content: ""; position: absolute; inset: 0; background:
    radial-gradient(42% 47% at 34% 52%, color-mix(in srgb, var(--sak-plum) 88%, transparent) 0%, color-mix(in srgb, var(--sak-plum) 79%, transparent) 50%, color-mix(in srgb, var(--sak-plum) 36%, transparent) 76%, transparent 100%),
    radial-gradient(16% 10% at 78% 72%, color-mix(in srgb, var(--sak-plum) 60%, transparent) 0%, transparent 100%),
    color-mix(in srgb, var(--sak-plum) 12%, transparent); }
html.is-loading .sk-art { opacity: 0; transition: none; }
html.sk-docked .sk-art { transition: none; }
@media (max-width: 900px) { .sk-art::after { background: color-mix(in srgb, var(--sak-plum) 74%, transparent); } }   /* a phone: the text runs the whole width, so the picture is fainter all over */
@media (prefers-reduced-motion: reduce) { .sk-art { transition: none; } }
@media print { .sk-art { display: none; } }

/* ---- the Pause button for the moving background (WCAG 2.2.2): on the cover only (it lives in the cover's frame), not shown with reduced motion, when there is nothing moving ---- */
.sk-pause { position: absolute; right: var(--gut, 5vw); bottom: clamp(60px, 8vh, 96px); z-index: 3; width: 40px; height: 40px; padding: 0; background: transparent; color: var(--fg); border: 1.5px solid var(--fg); cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.sk-pause::before, .sk-pause::after { content: ""; position: absolute; top: 11px; width: 4px; height: 16px; background: currentColor; } .sk-pause::before { left: 12px; } .sk-pause::after { left: 22px; }
.sk-pause[aria-pressed="true"]::before { left: 14px; top: 11px; width: 0; height: 0; background: none; border: solid transparent; border-width: 8px 0 8px 14px; border-left-color: currentColor; } .sk-pause[aria-pressed="true"]::after { display: none; }
.sk-pause:hover, .sk-pause:focus-visible { background: var(--fg); color: var(--ground); } .sk-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html.is-loading .sk-pause { visibility: hidden; }
@media (max-width: 900px) { .sk-pause { right: 12px; bottom: 124px; width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .sk-pause { display: none; } }
@media print { .sk-pause { display: none; } }

/* ---- the loading screen, story mode: Mulberry ground (the cover's), the pictures stacked in the middle, the lockup at the top ---- */
html.is-loading.sk-story { background-color: var(--sak-plum); animation: loader-unlock 0s linear 16s forwards; }
html.is-loading.sk-story .loader { background-color: var(--sak-plum); animation: loader-failsafe 0s linear 16s forwards; }
html.is-loading.sk-story .sk-load.is-docking { background-color: transparent; }
.sk-load__stage { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sk-load__stage .rs { grid-area: 1 / 1; width: var(--rs-w); height: auto; aspect-ratio: 800 / 500; transform-origin: 50% 50%; }
.sk-story .sk-load__mark { --w: clamp(150px, 15vw, 230px); left: var(--gut, 5vw); top: clamp(26px, 5vh, 54px); transform: none; z-index: 2; }
.sk-load.is-docking .sk-load__mark { animation: none; opacity: 0; transition: opacity .25s ease; }   /* animation: none, or its held end state would keep it up over the page's own nav */
/* the last moments of the hand-over: the loading screen's picture gives way to the cover's own (the same drawing, at the same place), so the headline and the buttons come forward under it, not with a jump */
html.is-loading.sk-warm .sk-art, html.is-loading.sk-xfade .sk-art { opacity: var(--art-o, 1); transition: none; }                 /* the cover's picture is in place at once, under the screen's (which covers the whole screen), so only one thing fades */
.sk-load.is-xfade .sk-load__stage { opacity: 0; transition: opacity .6s ease; will-change: opacity; }
/* colour layered over the pictures, timed to the story: the ruin's dark cool tone fades and the colour comes back as the school is put right (fx-fade). Nothing glows or flashes: the light is
   in the classroom's own drawing (halos, shafts and patches at the windows). Only opacity moves; the layer is in the loading screen only. */
.sk-load__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.sk-load__fx i { position: absolute; inset: 0; opacity: 0; animation-play-state: paused; animation-fill-mode: both; }
.sk-load.sk-go .sk-load__fx i { animation-play-state: running; }
.fx-fade { background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 64%, transparent), color-mix(in srgb, var(--sak-plum) 36%, transparent)); animation: fx-fade 2.3s ease .3s; }
@keyframes fx-fade { from { opacity: .95; } to { opacity: 0; } }
.sk-load.is-docking .sk-load__fx { opacity: 0; transition: opacity .35s ease; }
.sk-short .sk-load__fx, .sk-still .sk-load__fx { display: none; }
@media (prefers-reduced-motion: reduce) { .sk-load__fx { display: none; } }
/* the short screen (the tests' opt-out, or no picture to clone) is the plain lockup; with reduced motion the finished classroom stands still for a moment */
.sk-short .sk-load__stage { display: none; }
@media (max-width: 600px) { .sk-story .sk-load__mark { --w: 140px; } :root { --rs-w: 100vw; } }

/* the cover's small text is one tone brighter than elsewhere (the lede in Paper, the kicker and the chips one step up), because it sits over a picture that moves: with the scrim and the dim palette,
   that keeps every line at WCAG 2.2 AA at every moment of the loop (tools/test/saksham-loader.mjs). */
.sk-cover .lede, .sk-cover .sk-kicker { color: var(--fg); } .sk-cover .sk-chips { color: var(--fg-2); } .sk-cover .sk-chips li { color: var(--fg); }