/* Murmuration: styles */

/* base reset */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: an open sky of thousands of birds to land on, then one tall pinned picture (a dusk sky where everything
   happens on the birds themselves) while the script scrolls past it. The things you press live in the script, right
   where it asks you to press them. The open sky comes back at the end.
   Ink on white, soft rounded shapes. Colour is reserved for the three rules, plus teal for the reader and its guesses.
   Single look on purpose: the white page is the design, so there is no dark variant. */
:root{
  --paper:#fefefe;
  --ink:#0d1117;
  --ink-2:#39414c;
  --ink-3:#8a929c;
  --hair:#d6dbe1;
  --wash:#eef1f4;
  --sky-top:#c9e2f7;
  --sky-low:#fbf1dc;
  --apart:#e23d6d;
  --line:#2a6bf2;
  --close:#eda414;
  --reader:#19a79b;
  --reader-ink:#0e7d75;
  --mark:#cde4f8;
  --press:#b3341b;
  --press-ink:#7c1f0d;
  --press-wash:#fdf2ee;
  --press-shade:#efbcab;
  --display:'Bricolage Grotesque','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --text:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{
  --gutter:clamp(16px,4vw,40px);
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:18px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
p{margin:0}
button{font:inherit;color:inherit}
#margin{position:fixed;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
.hero,.film,.finale,.credits{position:relative;z-index:1}
.wrap{max-width:1380px;margin-inline:auto;padding-inline:var(--gutter)}
.slate{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:.2em .8em;align-items:baseline;
}
.slate b{font-weight:500;color:var(--ink)}
.slate i{font-style:normal;color:var(--ink-3)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@keyframes tilt{0%,78%,100%{rotate:0deg}83%{rotate:-7deg}90%{rotate:5deg}}
@keyframes hop{0%,100%{translate:0 0}40%{translate:0 -10px}}
.percher{position:absolute;fill:var(--ink);overflow:visible;pointer-events:none;transform-origin:50% 100%;animation:tilt 7s ease-in-out infinite}

/* ---------- the open sky (top and bottom of the page) ---------- */
.bigsky{position:relative;overflow:hidden}
.bigsky canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:crosshair}
.hero{height:clamp(440px,70vh,660px)}
.hero-t{position:absolute;left:0;right:0;bottom:0;display:grid;gap:12px;padding-block:28px 34px;pointer-events:none;isolation:isolate}
.hero-t::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(254,254,254,0) 44%,rgba(254,254,254,.93) 60%,var(--paper));z-index:-1}
.hero h1{
  position:relative;justify-self:start;margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(52px,10vw,132px);line-height:.86;letter-spacing:-.04em;
}
.hero h1 .percher{width:.34em;height:.28em;right:.115em;bottom:.705em;animation-delay:-3s}
.hero-q{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.95vw,24px);line-height:1.22;letter-spacing:-.01em;max-width:40ch;text-wrap:pretty}
.fineprint{color:var(--ink-2);font-size:15.5px}
.hero{background:linear-gradient(to bottom,#e7f1fb,rgba(254,254,254,0) 58%)}   /* a breath of afternoon sky behind the top flock; the page itself stays white */
.falcon{
  pointer-events:auto;justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-block:4px 2px;
  font-family:var(--display);font-weight:700;font-size:16.5px;line-height:1;color:var(--paper);background:var(--ink);
  border:1.5px solid var(--ink);border-radius:999px;padding:12px 19px 11px 16px;cursor:pointer;--sh:0 4px 0 var(--ink-3);box-shadow:var(--sh);
  transition:translate .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent;
}
.falcon svg{width:21px;height:15px;fill:#ef6a48;transition:translate .2s}
.falcon:hover svg{translate:4px 0}
.falcon:active{translate:0 3px;box-shadow:0 1px 0 var(--ink-3)}
.falcon:not(.used){animation:askpulse 2.2s ease-out infinite}
.fresh{animation:fresh 2.4s ease-out 1}
@keyframes fresh{0%,30%{background:var(--press-wash);box-shadow:-12px 0 0 var(--press-wash),12px 0 0 var(--press-wash),-15px 0 0 var(--press)}100%{background:rgba(253,242,238,0);box-shadow:-12px 0 0 rgba(253,242,238,0),12px 0 0 rgba(253,242,238,0),-15px 0 0 rgba(179,52,27,0)}}
@keyframes askpulse{0%,45%{box-shadow:var(--sh),0 0 0 0 rgba(179,52,27,.45)}100%{box-shadow:var(--sh),0 0 0 12px rgba(179,52,27,0)}}

/* the one thing in each part that should be heard over the rest: heavier type, and a strip of sky drawn under it as it comes into view */
strong{
  font-family:var(--display);font-weight:700;font-size:.95em;letter-spacing:-.005em;
  background:linear-gradient(var(--mark),var(--mark)) no-repeat 0 76%/100% .5em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-inline:.05em;margin-inline:-.05em;
}
.mk strong{background-size:0% .5em;transition:background-size .8s cubic-bezier(.3,.7,.2,1) .1s}
.mk strong.lit{background-size:100% .5em}

/* a phrase you can press: it does to the picture what the sentence says */
.say{
  font:inherit;font-family:var(--display);font-weight:700;font-size:.9em;line-height:1.3;color:var(--press-ink);background:var(--press-wash);
  border:1.5px solid var(--press);border-radius:999px;padding:0 11px 0 9px;margin:0 1px;cursor:pointer;white-space:nowrap;
  --sh:0 2.5px 0 var(--press-shade);box-shadow:var(--sh);position:relative;top:-1.5px;transition:background .2s,color .2s,translate .1s;-webkit-tap-highlight-color:transparent;
}
.say::before{content:'';display:inline-block;width:0;height:0;border-left:7px solid var(--press);border-block:4.5px solid transparent;margin-right:6px;translate:0 -1px}
.say:hover{background:#fae3da}
.say:active{translate:0 2px}
.say[aria-pressed="true"]{background:var(--press);color:#fff}
.say[aria-pressed="true"]::before{border-left-color:#fff}
.scene.ask .say:not([aria-pressed="true"]){--sh:0 2.5px 0 var(--press-shade);animation:askpulse 2.2s ease-out infinite}
.scene.ask .segc{--sh:0 4px 0 var(--press-shade);animation:askpulse 2.2s ease-out infinite}
.scene.ask .tog .sw{--sh:0 3px 0 var(--ink-3);animation:askpulse 2.4s ease-out infinite}
.scene.ask .tog:nth-child(2) .sw{animation-delay:.3s}
.scene.ask .tog:nth-child(3) .sw{animation-delay:.6s}

/* birds on wires around the page. They sit, they hop, and they leave if the pointer comes too close */
.wire{position:relative;height:56px;z-index:2;pointer-events:none}
.wire-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wire-l path{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.perches{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none}
.wb{position:absolute;pointer-events:auto;cursor:pointer;width:var(--w);height:calc(var(--w) * .825);margin-left:calc(var(--w) / -2);transition:opacity .15s}
.wb svg{display:block;width:100%;height:100%;fill:var(--ink);overflow:visible;transform-origin:50% 96%;animation:tilt 7s ease-in-out infinite}
.wb.flip{scale:-1 1}
.wb.hang{scale:1 -1}
.zz{position:absolute;left:96%;top:14%;width:26px;height:30px;scale:1 -1;pointer-events:none}   /* counter-flipped, so the z's rise the right way up */
.zz i{position:absolute;left:0;bottom:0;font-family:var(--display);font-style:normal;font-weight:700;font-size:11px;line-height:1;color:var(--ink-2);opacity:0;animation:zz 3.6s ease-out infinite}
.zz i:nth-child(2){animation-delay:1.2s;font-size:9.5px}
.zz i:nth-child(3){animation-delay:2.4s;font-size:8px}
@keyframes zz{0%{opacity:0;translate:0 0}20%{opacity:.85}100%{opacity:0;translate:13px -26px}}
.wb.hop svg{animation:hop .45s ease-out 1}
.wb.away{opacity:0;pointer-events:none}
/* hidden jokes. The bird under the blanket sleeps through everything, including the pointer and the falcon. Poke it and it
   has opinions. The reader nods off if nobody does anything for a while. Typing "falcon" sends one */
.wb.hang{cursor:help}
.wb,.zz,.grump,.reader,.rz,.chirp,.hint,.rail,.palm{-webkit-user-select:none;user-select:none}   /* the birds' snores, grumbles and chirps are pictures, not words: nothing to select or comment on */
/* the sleeper: tucked in, nightcap hanging the way gravity says, a bubble that grows and shrinks with its breathing,
   and once in a while pops. It sways on the wire like a hammock */
.wb.hang svg{animation:hammock 5.5s ease-in-out infinite}
@keyframes hammock{0%,100%{rotate:-3.5deg}50%{rotate:3.5deg}}
.sleeper{fill:var(--ink)}
.sl-breath{transform-box:fill-box;transform-origin:50% 50%;animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.045 1.06}}
.sl-cap{transform-box:view-box;transform-origin:33px 8.6px;animation:capsway 5.5s ease-in-out infinite}
@keyframes capsway{0%,100%{rotate:7deg}50%{rotate:-7deg}}
.sl-open{opacity:0}
.sl-bub{transform-box:fill-box;transform-origin:0% 40%;animation:bub 14.4s ease-in-out infinite}
@keyframes bub{0%{scale:.2}12.5%{scale:.9}25%{scale:.25}37.5%{scale:.95}50%{scale:.25}62.5%{scale:1}75%{scale:.3}86%{scale:1.45;opacity:1}87%{scale:1.6;opacity:0}100%{scale:.2;opacity:0}}
.wb.woke .sl-shut,.wb.woke .sl-bub{opacity:0;animation:none}
.wb.woke .sl-open{opacity:1}
.wb.hang.woke svg{animation:jolt .55s ease-out 1}
.wb.hang.woke .zz{opacity:0;transition:opacity .2s}
.wb.hang .zz{transition:opacity 1.2s}
.wb.hang.snore .zz i{font-size:15px !important}
@keyframes jolt{0%{translate:0 0}15%{translate:0 -6px;rotate:-9deg}35%{translate:0 2px;rotate:6deg}55%{rotate:-4deg}75%{rotate:2deg}100%{translate:0 0;rotate:0deg}}
.grump{position:absolute;left:105%;top:30%;scale:1 -1;white-space:nowrap;pointer-events:none;font-family:var(--text);font-style:italic;font-size:14px;line-height:1.2;color:var(--ink);
  background:var(--paper);border:1.3px solid var(--ink);border-radius:10px;padding:3px 9px 4px;opacity:0;translate:-4px 0;transition:opacity .25s,translate .25s}
.grump::before{content:'';position:absolute;left:-6px;top:50%;width:9px;height:9px;margin-top:-5px;background:var(--paper);border-left:1.3px solid var(--ink);border-bottom:1.3px solid var(--ink);rotate:45deg}
.grump.on{opacity:1;translate:0 0}
.grump.left{left:auto;right:105%}
.grump.left::before{left:auto;right:-6px;rotate:225deg}
.reader .rz{position:absolute;left:78%;top:-8px;width:26px;height:30px;pointer-events:none;opacity:0;transition:opacity .6s}
.reader .rz i{position:absolute;left:0;bottom:0;font-family:var(--display);font-style:normal;font-weight:700;font-size:12px;line-height:1;color:#0e7d75;opacity:0;animation:zz 3.6s ease-out infinite}
.reader .rz i:nth-child(2){animation-delay:1.2s;font-size:10px}.reader .rz i:nth-child(3){animation-delay:2.4s;font-size:8.5px}
.reader.dozing .rz{opacity:1}
.reader.dozing svg{animation:nod 4.2s ease-in-out infinite}
@keyframes nod{0%,100%{rotate:0deg}45%,70%{rotate:9deg;translate:0 1.5px}}
.hero .slate,.hero-q{text-shadow:0 0 5px var(--paper),0 0 5px var(--paper),0 0 9px var(--paper)}   /* a halo of paper, for when the flock passes behind the words */

/* ---------- film ---------- */
.film{display:grid;gap:8px;align-items:start;padding-top:20px}
.stage{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:5;
  background:var(--paper);
  margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);
  padding-block:38px 8px;border-bottom:1px solid var(--hair);
  display:grid;gap:10px;min-width:0;
}
.reel{min-width:0}

/* the sky */
.skybox{position:relative;margin:0}
.skywin{
  position:relative;height:clamp(250px,44vh,380px);overflow:hidden;
  border:1.5px solid var(--ink);border-radius:22px;
  background:linear-gradient(to bottom,var(--sky-top),var(--sky-low));
  container-type:inline-size;
}
#sky{display:block;width:100%;height:100%;cursor:pointer;touch-action:pan-y}
body[data-scene="3"] #sky,body[data-scene="9"] #sky{cursor:default}
.pill{
  position:absolute;top:12px;display:flex;align-items:center;gap:8px;
  background:rgba(254,254,254,.9);border-radius:999px;padding:5px 13px 4px;
  font-family:var(--display);font-weight:600;font-size:13.5px;line-height:1.3;white-space:nowrap;pointer-events:none;
}
.gauge{left:12px}
.status{right:12px;background:var(--ink);color:var(--paper);border:1.5px solid var(--paper);padding:3.5px 13px 2.5px;font-variant-numeric:tabular-nums;transform-origin:100% 50%}
.status.pop{animation:chippop 1s cubic-bezier(.3,1.3,.5,1) 1}
@keyframes chippop{0%{scale:1;box-shadow:0 0 0 0 rgba(13,17,23,.5)}20%{scale:1.2}100%{scale:1;box-shadow:0 0 0 14px rgba(13,17,23,0)}}
.gauge-track{width:56px;height:6px;border-radius:3px;background:var(--hair);position:relative;overflow:hidden}
.gauge-track i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--ink);transition:background .3s}
.gauge-track b{position:absolute;top:0;bottom:0;left:96%;width:2px;margin-left:-1px;background:var(--ink-3)}
.gauge{transform-origin:0 50%;transition:background .3s}
.gauge.low{background:#fff;box-shadow:0 0 0 1.5px var(--press)}
.gauge.low .gauge-track i{background:var(--press)}
.gauge.low #polV{color:var(--press);font-weight:700}
.gauge.pop{animation:gaugepop 1s cubic-bezier(.3,1.3,.5,1) 1}
@keyframes gaugepop{0%{scale:1}20%{scale:1.14}100%{scale:1}}
body[data-scene="4"] .gauge,body[data-scene="5"] .gauge{visibility:hidden}   /* parts 3 and 4 don't touch how the flock flies, so the gauge steps aside */
#polV{font-family:var(--mono);font-weight:500;font-size:12.5px;min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.caption{font-size:16px;color:var(--ink);line-height:1.38;min-height:2.76em}

/* what the colours mean, and (once the reader is in) how each rule is doing. It lives inside the picture */
.key{
  position:absolute;right:12px;bottom:12px;display:grid;grid-template-columns:22px auto;column-gap:9px;row-gap:3px;align-items:center;pointer-events:none;
  background:rgba(254,254,254,.95);border:1.5px solid var(--ink);border-radius:12px;padding:8px 12px 7px;transform-origin:100% 100%;
  font-family:var(--display);font-weight:600;font-size:12.5px;line-height:1.25;white-space:nowrap;transition:opacity .35s;
}
.key.flash{animation:keyflash 1.2s cubic-bezier(.3,1.3,.5,1) 1}
@keyframes keyflash{0%{scale:1;box-shadow:0 0 0 0 rgba(13,17,23,.5)}20%{scale:1.1}100%{scale:1;box-shadow:0 0 0 14px rgba(13,17,23,0)}}
.key.under{opacity:.22}
.key.c1,.key.c2{grid-template-columns:22px auto 3em}
.key.c1.c2{grid-template-columns:22px auto 3em 3em}
.key svg{width:22px;height:10px;overflow:visible}
.key [data-rule="apart"]{--c:var(--apart)}.key [data-rule="line"]{--c:var(--line)}.key [data-rule="close"]{--c:var(--close)}
.kv{font-family:var(--mono);font-weight:500;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.kh{font-family:var(--display);font-weight:600;font-size:11.5px;color:var(--ink-2);text-align:right}
.kh.k1{color:var(--reader-ink)}
.key:not(.c1):not(.c2) .kh{display:none}
.key .k1,.key .k2{display:none}
.key.c1 .k1,.key.c2 .k2{display:block}
.key .off{display:none !important}
.kv.gone{color:var(--paper);background:var(--ink);border-radius:999px;padding:0 5px;justify-self:end}
.kv.hit{color:#fff;background:var(--reader-ink);border-radius:999px;padding:0 6px;justify-self:end}
.key.c1.c2.cmp{grid-template-columns:22px auto auto auto;column-gap:12px}

@container (max-width:600px){ .s4to8 .key{bottom:auto;top:52px} }
@container (max-width:420px){
  .s4to8 .key .kn{display:none}
  .split .gauge{display:none}
  .gauge-track,.gauge .hl{display:none}   /* on a small picture "together 0.95" is enough, and the two labels at the top no longer collide */
  .pill{font-size:12.5px;padding:4px 10px 3px}
}

/* our bird's notes, in the corner of the sky */
.pad{
  position:absolute;left:12px;bottom:12px;display:grid;gap:5px;
  background:rgba(254,254,254,.94);border:1.5px solid var(--ink);border-radius:14px 14px 14px 4px;padding:8px 10px 9px;
}
.pad-t{font-family:var(--display);font-weight:700;font-size:12.5px;line-height:1.2;text-align:center}
.pad-pages{display:flex;gap:8px;align-items:stretch}
.page{
  position:relative;display:grid;gap:4px;justify-items:start;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:var(--paper);border:1.5px solid var(--hair);border-radius:8px;padding:5px 6px 6px;transition:border-color .2s,translate .15s;
}
.page:hover{translate:0 -2px;border-color:var(--ink-3)}
.page[aria-pressed="true"]{border-color:var(--reader);box-shadow:0 0 0 1.5px var(--reader)}
.page.writing{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.page-t{font-family:var(--display);font-weight:600;font-size:11.5px;line-height:1.2;white-space:nowrap}
.page-t small{display:none;font-weight:600;font-size:11.5px;margin-left:4px}
.page.deaf .page-t{color:var(--ink-3)}
.page.deaf .page-t span{text-decoration:line-through}
.page.deaf .page-t small{display:inline;color:var(--ink-2)}
.page canvas{display:block;width:76px;height:27.6px}

/* four runs */
.panes{position:absolute;inset:0;pointer-events:none}
.pane-tag{
  position:absolute;display:flex;align-items:center;gap:9px;margin:10px;
  background:rgba(254,254,254,.9);border-radius:999px;padding:4px 12px 3px;
  font-family:var(--display);font-weight:600;font-size:13px;line-height:1.3;white-space:nowrap;
}
.pane-tag span{font-weight:500;font-size:12.5px}
.pane-bars{position:absolute;margin:10px;display:grid;gap:5px;background:rgba(254,254,254,.93);border-radius:12px;padding:8px 10px 7px;pointer-events:none}
.pb{display:grid;grid-template-columns:20px minmax(54px,7vw) 3.1em;gap:7px;align-items:center}
.pb[data-rule="apart"]{--c:var(--apart)}.pb[data-rule="line"]{--c:var(--line)}.pb[data-rule="close"]{--c:#d6900a}
.pb svg{width:20px;height:9px;overflow:visible}
.pb span{height:9px;border-radius:5px;background:rgba(13,17,23,.1);overflow:hidden}
.pb i{display:block;height:100%;width:100%;background:var(--c);border-radius:5px;transition:width 1.1s cubic-bezier(.3,.8,.3,1)}
.pb b{font-family:var(--mono);font-weight:500;font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;transition:color .3s}
.pb.gone b{color:var(--paper);background:var(--ink);border-radius:999px;padding:0 5px;justify-self:end}
@container (min-width:700px){ .pane-bars{margin:12px;padding:9px 12px 8px;gap:6px} .pb{grid-template-columns:24px 92px 3.2em} .pb svg{width:24px;height:11px} .pb span{height:10px} .pb b{font-size:14px} }
@container (max-width:470px){ .pane-bars{margin:6px;padding:4px 7px 3px;gap:1px} .pb{grid-template-columns:14px 2.8em;gap:5px} .pb svg{width:14px;height:7px} .pb span{display:none} .pb b{font-size:11px} }   /* a small pane keeps the numbers and drops the bars, so the flock stays visible */
.pane-tag em{font-family:var(--mono);font-style:normal;font-weight:500;font-size:12.5px;font-variant-numeric:tabular-nums}
@container (max-width:470px){ .pane-tag span{display:none} }

/* the reader: one teal bird you can click. It hops between the sky's frame and the pages of notes */
.reader{
  position:absolute;left:0;top:0;width:46px;height:38px;z-index:6;padding:0;border:0;background:none;cursor:pointer;border-radius:12px;
  transform:translate(var(--rx,0px),var(--ry,0px));transition:transform .6s cubic-bezier(.3,1.25,.5,1);-webkit-tap-highlight-color:transparent;
}
.reader svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 100%;animation:tilt 7s ease-in-out infinite;transition:scale .15s;
  filter:drop-shadow(1.3px 0 0 #fefefe) drop-shadow(-1.3px 0 0 #fefefe) drop-shadow(0 1.3px 0 #fefefe) drop-shadow(0 -1.3px 0 #fefefe)}
.reader:hover svg{scale:1.12}
.reader.hopping svg{animation:hop .5s ease-out 1}

/* what shows in which scene */
body:not(.s4to8) .pad{display:none}
body[data-scene="3"] .key,body[data-scene="4"] .key,body[data-scene="9"] .key,body[data-scene="9"] .pill{display:none}
body:not([data-scene="9"]) .panes{display:none}

/* ---------- the script ---------- */
.scene{min-height:70vh;padding-block:26px 70px;display:grid;gap:16px;align-content:start}
.scene > *{max-width:32rem}
.pin{display:grid;gap:16px}
.scene h2{
  margin:0;font-family:var(--display);font-weight:700;font-size:clamp(27px,3.3vw,40px);line-height:1.03;letter-spacing:-.02em;text-wrap:balance;
}
.rule{
  font-family:var(--display);font-weight:600;font-size:.94em;white-space:nowrap;
  text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:4px;
}
.rule.apart{text-decoration-color:var(--apart)}
.rule.line{text-decoration-color:var(--line)}
.rule.close{text-decoration-color:var(--close)}
.who{font-family:var(--display);font-weight:600;font-size:.94em;white-space:nowrap;text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:4px;text-decoration-color:var(--reader)}
.swap{display:grid;gap:16px}

/* the two places you can play: optional, the story carries on without them */
.try{display:grid;gap:14px;justify-items:start;padding-block:6px 8px}
.try > span{font-family:var(--display);font-weight:700;font-size:16px}
.segc{position:relative;display:inline-flex;flex-wrap:nowrap;max-width:100%;gap:3px;padding:4px;border:1.5px solid var(--press);border-radius:20px;background:var(--press-wash);box-shadow:0 4px 0 var(--press-shade)}
.segc button{
  font-family:var(--display);font-weight:700;font-size:clamp(13px,1.35vw,15px);color:var(--press-ink);background:transparent;border:0;border-radius:15px;
  padding:9px clamp(8px,1vw,13px) 8px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent;
}
.segc button:hover{background:#fae3da}
.segc button[aria-pressed="true"]{background:var(--press);color:#fff}
.segc .percher{width:25px;height:21px;right:24px;bottom:calc(100% - 3px)}
.segc:hover .percher{animation:hop .45s ease-out 1}
/* the three rule switches */
.togs{display:grid;gap:14px;justify-items:start;padding-block:4px 6px}
.tog{
  display:inline-flex;align-items:center;gap:14px;background:none;border:0;padding:2px;cursor:pointer;border-radius:18px;text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.tog span{display:grid;gap:4px}
.tog b{font-family:var(--display);font-weight:700;font-size:19px;line-height:1;white-space:nowrap}
.tog small{font-family:var(--text);font-size:16px;line-height:1.2;color:var(--ink)}
.toyed .auto-note{display:none}
.tog[data-rule="apart"]{--c:var(--apart)}.tog[data-rule="line"]{--c:var(--line)}.tog[data-rule="close"]{--c:var(--close)}
.sw{position:relative;width:58px;height:32px;border-radius:16px;background:var(--c);border:1.5px solid var(--ink);flex:none;transition:background .25s;box-shadow:0 3px 0 var(--ink-3)}
.sw::after{content:'';position:absolute;top:2.5px;left:2.5px;width:24px;height:24px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);translate:26px 0;transition:translate .22s cubic-bezier(.3,1.5,.5,1)}
.tog:hover .sw::after{scale:1.08}
.tog[aria-pressed="false"] .sw{background:var(--wash)}
.tog[aria-pressed="false"] .sw::after{translate:0 0}
.tog[aria-pressed="false"] b{color:var(--ink-2);text-decoration:line-through;text-decoration-thickness:1.5px}
/* practice: scrolling moves a marker along the two real curves */
.prac{display:grid;gap:8px;padding-top:4px}
.prac-legend{display:flex;flex-wrap:wrap;gap:4px 26px;align-items:baseline;font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.3}
.prac-legend span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.prac-legend b{font-family:var(--mono);font-weight:500;font-size:25px;line-height:1;min-width:2.6em;font-variant-numeric:tabular-nums}
.lk{width:18px;height:3px;border-radius:2px;flex:none}
.lk.read{background:var(--reader)}
.lk.use{background:var(--use7,#d6900a)}
.pick7{display:grid;gap:8px;justify-items:start;padding-bottom:4px}
.pick7 > span{font-family:var(--display);font-weight:700;font-size:16px}
.chart{position:relative;height:clamp(150px,calc(100vh - 720px),340px)}
.chart canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:pan-y}   /* a sideways drag reads the chart, an up-and-down one still scrolls */
.chart-tip{position:absolute;bottom:calc(100% - 22px);pointer-events:none;background:var(--ink);color:var(--paper);border-radius:8px;padding:5px 9px 4px;font-family:var(--mono);font-size:12px;line-height:1.35;white-space:nowrap;z-index:2}
.chart-tip b{font-weight:500;font-family:var(--display);font-size:12.5px}
.bar{height:14px;border-radius:7px;background:var(--wash);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:7px}
.bar i.read{background:var(--reader)}
.bar i.use{background:var(--close)}
.prac-m b{font-family:var(--mono);font-weight:500;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- the end: the sky comes back ---------- */
.finale{margin-top:30px}
.finale .bigsky{height:clamp(400px,76vh,780px);background:linear-gradient(to bottom,rgba(254,254,254,0),#efebf8 34%,#fdf0e7 76%,rgba(254,254,254,0))}
.finale .bigsky canvas{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent)}
.finale-t{display:grid;gap:30px;padding-block:6px 96px}
.finale .slate{font-size:14px}
.finale-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 30px}
.finale-head > div{display:grid;gap:10px}
.finale h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(38px,5vw,68px);line-height:.96;letter-spacing:-.04em}
/* the palm at the end: a crowd of starlings settling in for the night and yelling about it, the way they do over
   real palms at dusk. Send the falcon and the tree empties, then they come back and carry on */
.palm{position:absolute;bottom:0;left:max(var(--gutter),calc((100% - 1380px) / 2 + var(--gutter)));width:clamp(180px,23vw,340px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
.palm-art{display:block;width:100%;height:auto;overflow:visible}   /* two palms drawn like the page's own birds: ink outlines, flat colour */
.palm-birds{position:absolute;inset:0}
@media (max-width:899px){.palm{width:138px}.finale-fly .ftr{display:none}}   /* a phone has room for the tree and a shorter button side by side */
.palm-birds .wb svg{animation-duration:2.6s}   /* palm starlings are restless: they fidget far more than the ones on the wires */
.chirp{position:absolute;width:16px;height:12px;pointer-events:none;overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;opacity:0;animation:chirp .9s ease-out 1 forwards}
@keyframes chirp{0%{opacity:0;translate:0 3px;scale:.6}25%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -6px;scale:1.15}}
.finale-fly{position:absolute;left:0;right:0;bottom:clamp(34px,8vh,84px);display:flex;justify-content:flex-end;max-width:1380px;margin-inline:auto;padding-inline:var(--gutter);pointer-events:none}   /* the last falcon is sent from right under the flock it goes after */
.finale-fly .falcon{animation:none;margin:0;pointer-events:auto}
.qa{display:grid;gap:22px}
.qa > div{position:relative;display:grid;gap:12px;align-content:start;min-width:0;border:1.5px solid var(--ink);border-radius:22px;padding:22px 24px 26px;background:var(--paper);box-shadow:0 5px 0 var(--hair)}
.qa .n{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.qa > div:last-child{background:var(--ink);color:var(--paper);box-shadow:0 5px 0 var(--ink-3)}   /* the twist gets the dark card */
.qa > div:last-child .q{color:var(--paper)}
.qa > div:last-child .n{color:#aab2bd}
.finale-more{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:12px 34px}
.finale-more a{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.finale-more a::after{content:' \2193'}
.finale-more .byline{margin-left:auto;align-self:center;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}   /* the credit, at the end of the story */
@media (max-width:899px){.finale-more .byline{margin-left:0;flex-basis:100%}}
.signoff a::after{content:' \2197'}
.finale-more a.ext::after,.code-link a::after{content:'';display:inline-block;width:.62em;height:.62em;margin-left:.32em;vertical-align:.02em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%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 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}   /* the display font has no out-arrow, so it is drawn, as heavy as the text */
.qa .q{color:var(--ink);font-family:var(--display);font-weight:600;font-size:clamp(19px,1.55vw,24px);line-height:1.22;min-height:2.44em;text-wrap:balance}
.qa .a{font-family:var(--display);font-weight:800;font-size:clamp(44px,3.7vw,62px);line-height:.95;letter-spacing:-.035em}
.qa .a + p{font-size:clamp(19px,1.45vw,22px);line-height:1.42;max-width:30ch}

/* ---------- part 8: rules across, runs down ---------- */
.scene > .g8-more{max-width:none}
.g8-more summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:16px;width:max-content;max-width:100%;padding:4px 0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.g8-more[open] summary{margin-bottom:10px}
.grid8{position:relative;display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:16px 18px;align-items:center;padding-block:4px 8px}
.g8-legend{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.3}
.g8-legend b{flex-basis:100%;font-weight:700;font-size:17.5px}
.g8-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.g8-n{font-family:var(--mono);font-style:normal;font-weight:500;font-size:12.5px;line-height:1;width:1em;text-align:center}
.g8-legend .g8-n{width:19px;height:19px;border:1.5px solid var(--ink);border-radius:50%;display:inline-grid;place-items:center}
.g8-head{align-self:end;font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.15;padding-bottom:4px;border-bottom:2.5px solid var(--c)}
.g8-run{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.g8-head[data-rule="apart"],.g8-cell[data-rule="apart"]{--c:var(--apart)}
.g8-head[data-rule="line"],.g8-cell[data-rule="line"]{--c:var(--line)}
.g8-head[data-rule="close"],.g8-cell[data-rule="close"]{--c:#d6900a}
.g8-cell{display:grid;gap:4px;min-width:0;border-radius:4px;outline-offset:4px}
.g8-b{display:grid;grid-template-columns:11px minmax(0,1fr) 41px;gap:6px;align-items:center}
.g8-track{position:relative;height:14px;background:var(--wash);border-radius:0 4px 4px 0;overflow:hidden}
.g8-track i{position:absolute;inset:0 auto 0 0;background:var(--c);border-radius:0 4px 4px 0;transition:opacity .25s}
.g8-b b{font-family:var(--mono);font-weight:500;font-size:14.5px;text-align:right;font-variant-numeric:tabular-nums}
.grid8[data-deaf="1"] .b2 .g8-track i,.grid8[data-deaf="2"] .b1 .g8-track i{opacity:.32}
.g8-tip{grid-column:1 / -1;min-height:2.7em;font-family:var(--text);font-size:15.5px;line-height:1.35;color:var(--ink)}
.g8-tip.idle{color:var(--ink-2)}

/* ---------- real names, said once ---------- */
.term{font-family:var(--mono);font-size:.8em;background:var(--wash);border-radius:5px;padding:2px 4px 1px;white-space:nowrap}
.note{font-size:16px;line-height:1.42;border-left:2px solid var(--ink);padding-left:13px}
.note a{color:inherit;font-family:var(--display);font-weight:600;font-size:.94em;text-underline-offset:3px;white-space:nowrap}

/* ---------- under the hood ---------- */
.hood{position:relative;grid-template-columns:minmax(0,1fr);padding-block:34px 72px;border-top:1.5px solid var(--ink);display:grid;gap:18px}
.hood h2{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(27px,3.3vw,40px);line-height:1.05;letter-spacing:-.02em}
.hood h3{margin:0 0 12px;font-family:var(--display);font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-.01em}
.hood-grid{display:grid;gap:38px 56px;padding-top:10px;font-size:17px;line-height:1.48}
.hood-grid > div{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:13px;align-content:start}
.hood-grid h3{margin-bottom:0}
.hood dl{margin:0;display:grid;gap:13px}
.hood dl > div{min-width:0}
/* the spec strip: five numbers set like the answers in the short version, so the notes start with the whole project at a glance */
.hood .specs{display:flex;flex-wrap:wrap;gap:0;margin:6px 0 4px;border-block:1.5px solid var(--ink)}
.hood .specs > div{flex:1 1 140px;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:16px 18px 14px;border-left:1px solid var(--hair)}
.hood .specs > div:first-child{border-left:0;padding-left:0}
.hood .specs dd{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:.95;letter-spacing:-.035em}
.hood .specs dt{margin:0;color:var(--ink-2)}
.code-link{margin:2px 0 6px;font-size:17px}
.code-link a,.signoff a{color:var(--ink);font-family:var(--display);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.code-link a:hover,.signoff a:hover,.finale-more a:hover{color:var(--press-ink)}
/* the last line on the page */
.signoff{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;padding-block:22px 40px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.signoff a.gh{display:inline-flex;align-items:baseline;gap:10px;padding:11px 18px 10px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-family:var(--mono);font-weight:500;font-size:13.5px;box-shadow:0 3px 0 var(--ink-3);transition:translate .1s,background .2s}
.signoff a.gh span{font-family:var(--display);font-weight:700;font-size:14.5px}
.signoff a.gh:hover{background:#262c35;color:var(--paper)}
.signoff a.gh:active{translate:0 2px;box-shadow:0 1px 0 var(--ink-3)}
.signoff{align-items:center}
.signoff a.gh i{font-style:normal}.signoff a.gh b{font-weight:500}.signoff .ongh{display:none}
@media (max-width:899px){.signoff .url{display:none}.signoff .ongh{display:inline}}   /* a phone gets the short version, so nothing sticks out */
@media (max-width:899px){.hood .specs > div{flex-basis:42%;padding:12px 0 10px;border-left:0}.hood .specs > div:nth-child(n+2){border-top:1px solid var(--hair)}.hood .specs > div:nth-child(2){border-top:0}}
.hood dt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.hood-grid dt{display:inline-block;margin-bottom:7px;padding:4px 9px 3px;border-radius:7px;background:var(--ink);color:var(--paper);font-weight:500;font-size:11.5px;line-height:1.25}   /* the same black tags as the labels in the sky */
.hood dd{margin:0}
.hood ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.hood li{padding-left:16px;border-left:2px solid var(--hair)}
.hood li b{font-family:var(--display);font-weight:700}
.hood li.sum{border-left-color:var(--press);font-family:var(--display);font-weight:600;font-size:16px;line-height:1.4;align-self:start}
.plots figure{margin:8px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.plots img{display:block;width:100%;height:auto;border:1px solid var(--hair);border-radius:10px;background:#fff}
.plots figcaption{font-size:15.5px;line-height:1.4}

/* ---------- where you are: a wire down the edge of the page, one post per part, and a bird that keeps up ---------- */
.rail{display:none}

/* ---------- narrow: one column, the picture pinned at the top ---------- */
@media (max-width:899px){
  /* the opening: the flock gets a band of sky to itself, and the words sit under it instead of on top of it */
  .hero{height:auto;padding-top:clamp(220px,38vh,330px)}
  .hero #murm{inset:0 0 auto 0;height:calc(clamp(220px,38vh,330px) + 50px);-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
  .hero-t{position:relative;padding-block:0 24px}
  .hero > .wire{margin-top:-30px;margin-bottom:6px}
  .hero-t::before{display:none}
  .hero h1{font-size:clamp(50px,15vw,96px)}
  .hero-q{font-size:18.5px}
  /* the pinned picture is shorter, so there is room to read under it */
  .stage{padding-block:30px 6px;gap:6px}
  .skywin{height:clamp(215px,36vh,340px)}
  .caption{font-size:14px;line-height:1.35;min-height:2.7em}
  .hood-grid{grid-template-columns:minmax(0,1fr)}
  /* part 7: the legend and the chart stick under the picture, and the scroll after them is what moves through practice */
  .scrub .pin::after{content:'';display:block;height:110vh}
  .scrub .prac{position:sticky;top:var(--stageH,370px);z-index:3;background:var(--paper);margin-inline:calc(-1 * var(--gutter));padding:10px var(--gutter) 10px;box-shadow:0 1px 0 var(--hair)}
  .scrub .chart{height:clamp(130px,calc(100vh - var(--stageH,370px) - 230px),300px)}
  .pick7 > span{display:none}
  .pick7 .segc button{padding:7px 9px 6px}
  /* part 8: the three buttons stay in reach under the picture, and the grid is packed tight enough to read under them */
  .scene[data-scene="9"] > .try{position:sticky;top:var(--stageH,370px);z-index:3;background:var(--paper);margin-inline:calc(-1 * var(--gutter));padding:8px var(--gutter) 10px;box-shadow:0 1px 0 var(--hair)}
  .scene[data-scene="9"] > .try{gap:8px;padding-block:6px 8px}
  .scene[data-scene="9"] > .try > span{font-size:14px}
  .scene[data-scene="9"] .segc button{padding:7px 10px 6px}
  .grid8{gap:6px 10px}
  .g8-legend{font-size:13px;gap:2px 12px}
  .g8-legend b{font-size:16px}
  .g8-head{font-size:13.5px}
  .g8-run{font-size:11.5px;letter-spacing:.03em}
  .g8-cell{gap:3px}
  .g8-b{grid-template-columns:9px minmax(0,1fr) 33px;gap:4px}
  .g8-n{font-size:10.5px}
  .g8-track{height:10px}
  .g8-b b{font-size:12.5px}
  .g8-tip{font-size:14px}
  .finale .bigsky{height:clamp(290px,50vh,430px)}   /* the closing flock is smaller on a phone, so the band shrinks with it */
}

/* ---------- wide: two columns ---------- */
@media (min-width:900px){
  body{font-size:19px}
  .film{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;padding-top:36px}
  body{--stick:clamp(0px,calc((100vh - 890px) / 2),70px)}   /* on a tall screen the picture sits a little lower, nearer the middle */
  .stage{top:var(--stick);margin-inline:0;padding-inline:0;padding-block:44px 0;border-bottom:0;gap:12px;background:none}
  .skywin{height:clamp(300px,min(calc(100vh - 150px),50vw),760px)}
  .scene{padding-block:44px min(19vh,170px);gap:19px}
  .scene:last-child{padding-bottom:min(40vh,330px)}
  .scene.scrub{display:block;min-height:min(185vh,1560px);padding-top:0}
  /* the top flock gets the whole height of a taller opening and most of its width. It fades out toward the left edge, and the
     white behind the intro (hero-t::before) lets it pass behind the top of the title without muddying the words */
  .hero{height:clamp(520px,88vh,860px)}
  .hero #murm{inset:-9% auto auto 18%;width:88%;height:100%;-webkit-mask-image:linear-gradient(to right,transparent 1%,#000 24%);mask-image:linear-gradient(to right,transparent 1%,#000 24%)}
  .hood-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hood-wide{grid-column:1 / -1}
  .hood-wide dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 44px}
  .hood-wide.fails ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 44px;align-items:start}   /* six short cards in two rows */
  .rail{
    position:fixed;z-index:4;right:max(8px,calc(var(--gutter) / 2 - 11px));top:50%;translate:0 -50%;width:22px;
    display:grid;justify-items:center;gap:22px;padding-block:8px;opacity:0;pointer-events:none;transition:opacity .3s;
  }
  .rail.on{opacity:1;pointer-events:auto}
  .rail::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:var(--ink)}
  .rail button{position:relative;width:22px;height:14px;padding:0;border:0;background:none;cursor:pointer}
  .rail button::before{content:'';position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--ink);transition:width .2s,margin .2s}
  .rail button:hover::before{width:18px;margin-left:-9px}
  .rail button.done::before{height:3px;margin-top:-1.5px}
  /* each mark carries its part's name, shown while the wire is hovered, so it doubles as a list of contents */
  .rail .rl{position:absolute;right:calc(100% + 4px);top:50%;translate:6px -50%;opacity:0;pointer-events:none;white-space:nowrap;
    font-family:var(--mono);font-size:12px;line-height:1;color:var(--ink);background:var(--paper);padding:4px 7px 3px;border-radius:6px;
    box-shadow:0 0 0 1px var(--hair);transition:opacity .25s .3s,translate .25s .3s}
  .rail::after{content:'';position:absolute;z-index:-1;top:-10px;bottom:-10px;right:0;width:22px}
  .rail:hover::after{width:300px}
  .rail .rl i{font-style:normal;color:var(--press);margin-right:7px}
  .rail:hover .rl,.rail:focus-within .rl{opacity:1;translate:0 -50%;pointer-events:auto;transition-delay:0s}
  .rail button:hover .rl{color:var(--press-ink);box-shadow:0 0 0 1.5px var(--press)}
  .rail button.cur .rl{font-weight:500}
  .rail-now{position:absolute;right:calc(100% - 2px);top:0;translate:0 calc(var(--by,0px) - 50%);opacity:0;pointer-events:none;white-space:nowrap;
    font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
    transition:translate .55s cubic-bezier(.3,1.35,.5,1),opacity .25s}
  .rail-bird{position:absolute;left:50%;top:0;width:24px;height:20px;margin:-17px 0 0 -11px;fill:var(--ink);overflow:visible;pointer-events:none;
    translate:0 var(--by,0px);transition:translate .55s cubic-bezier(.3,1.35,.5,1)}
  .scrub .pin{position:sticky;top:var(--stick);padding-top:44px;display:grid;gap:19px}
  .scrub .swap > *{grid-area:1 / 1;transition:opacity .35s,visibility .35s}
  .scrub .swap .payoff,.scrubbed .scrub .swap .intro{visibility:hidden;opacity:0}
  .scrubbed .scrub .swap .payoff{visibility:visible;opacity:1}
  .qa{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1500px){   /* room beside the story: a small tag rides with the bird and says which part you are in */
  .rail-now{opacity:.8}
  .rail:hover .rail-now,.rail:focus-within .rail-now{opacity:0}
}
@media (min-width:1900px){   /* a very big screen: the opening has room, so the flock isn't pushed up into the top edge, and the side wire stays near the story instead of the far edge of the window */
  .hero #murm{top:0}
  .rail{right:calc((100vw - 1380px) / 2 - 64px)}
}
@media (min-width:900px) and (max-height:730px){
  .scene h2{font-size:clamp(25px,2.7vw,32px)}
  .scrub .pin{padding-top:26px;gap:14px}
  .prac{padding-top:0}
  .chart{height:clamp(128px,23vh,170px)}
}
@container (min-width:700px){
  .pill{top:14px;font-size:15.5px;padding:6px 15px 5px;gap:9px}
  .gauge{left:14px}.status{right:14px}
  .gauge-track{width:68px;height:7px}
  #polV{font-size:14.5px}
  .key{right:14px;bottom:14px;font-size:14.5px;row-gap:5px;column-gap:12px;padding:11px 15px 10px;border-radius:14px;grid-template-columns:26px auto}
  .key.c1,.key.c2{grid-template-columns:26px auto 3.2em}
  .key.c1.c2{grid-template-columns:26px auto 3.2em 3.2em}
  .key.c1.c2.cmp{grid-template-columns:26px auto auto auto;column-gap:12px}
  .key svg{width:26px;height:12px}
  .kv{font-size:16px}
  .kh{font-size:13.5px}
  .status{padding:4.5px 15px 3.5px}
  .pad{left:14px;bottom:14px;gap:7px;padding:10px 12px 11px}
  .pad-t{font-size:14.5px}
  .page{gap:6px;padding:6px 8px 8px}
  .page-t,.page-t small{font-size:13px}
  .page canvas{width:100px;height:36.4px}
  .pane-tag{margin:12px;font-size:15px;padding:5px 14px 4px}
  .pane-tag span{font-size:14px}
  .pane-tag em{font-size:14.5px}
}
@container (min-width:421px){
  body[data-scene="8"] .status{font-size:17px}
  body[data-scene="8"] .kv{font-size:19px}
  body[data-scene="8"] .key.c1.c2{grid-template-columns:26px auto 3.6em 3.6em}
}
@container (max-width:420px){   /* after the base rules, so these win: on a small picture the notes and the key shrink to fit it */
  .pad{left:7px;bottom:7px;gap:3px;padding:4px 5px 5px;border-width:1.2px;border-radius:10px 10px 10px 3px}
  .pad-t{font-size:10px}
  .pad-pages{gap:5px}
  .page{gap:2px;padding:3px 4px 4px;border-radius:6px}
  .page-t,.page-t small{font-size:9.5px}
  .page canvas{width:52px;height:18.9px}
  .key{right:7px;bottom:7px;padding:4px 8px 3px;font-size:11px;row-gap:1px;column-gap:6px;border-width:1.2px;border-radius:9px;grid-template-columns:15px auto}
  .s4to8 .key{top:40px;right:7px;padding:4px 7px 3px;row-gap:0;column-gap:6px;border-width:1.2px;border-radius:9px;grid-template-columns:15px}
  .s4to8 .key.c1,.s4to8 .key.c2{grid-template-columns:15px 2.7em}
  .s4to8 .key.c1.c2{grid-template-columns:15px 2.7em 2.7em}
  .s4to8 .key.c1.c2.cmp{grid-template-columns:15px auto auto;column-gap:6px}
  .key svg{width:15px;height:7px}
  .kv{font-size:10.5px}
  .kh{font-size:9.5px}
}
@media (max-width:480px){ .reader{width:32px;height:26.4px} }
[data-beat].now{animation:beatnow 2.4s ease-out 1}
/* the one hint on the page: the first rust phrase gets a little handwritten note, gone after the first press anywhere */
p.hinted{position:relative;transition:padding-top .5s ease}
.hint{position:absolute;top:0;left:var(--hx,90px);max-width:var(--hw,300px);padding-left:25px;font-family:var(--text);font-style:italic;font-size:17px;line-height:1.2;color:var(--press);
  pointer-events:none;opacity:0;translate:0 6px;transition:opacity .5s ease,translate .5s ease}
.hint b{font-weight:600}
.hint svg{position:absolute;left:0;bottom:-15px;width:22px;height:28px;overflow:visible;fill:none;stroke:var(--press);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hint.show{opacity:1;translate:0 0}
.hint.show svg{animation:hintbob 1.6s ease-in-out infinite}
.hint.gone{opacity:0;translate:0 -6px}
@keyframes hintbob{0%,100%{translate:0 0}50%{translate:0 3px}}
/* part 6: a guess before the answer */
.bet[hidden]{display:none}
.bet{display:grid;gap:10px;justify-items:start;margin-block:6px 4px;padding:16px 18px 18px;border:1.5px dashed var(--press);border-radius:16px;background:linear-gradient(var(--press-wash),rgba(253,242,238,.35))}
.bet-k{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--press)}
.bet-q{margin:0;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2}
.bet .segc button{font-size:15px;padding-inline:15px}
.bet .segc button:disabled{cursor:default}
.bet .segc button:disabled:not([aria-pressed="true"]){opacity:.45}
.bet-r{margin:2px 0 0;font-size:17px;line-height:1.4}
.bet-r b{font-family:var(--display);color:var(--press-ink)}
.bet-r.fresh{animation:fresh 2.6s ease-out 1}
.scene.ask .bet .segc{--sh:0 4px 0 var(--press-shade);animation:askpulse 2.2s ease-out infinite}
.scene[data-scene="7"] .after-bet{transition:filter .6s ease,opacity .6s ease}
.scene[data-scene="7"]:not(.bet-done) .after-bet{filter:blur(5px);opacity:.38;pointer-events:none;user-select:none}
.scene[data-scene="7"]:not(.bet-done) .after-bet .segc{animation:none}
@media (prefers-reduced-motion:reduce){.hint.show svg{animation:none}}
@media (max-width:899px){.hint{font-size:15.5px;text-wrap:balance}}
@keyframes beatnow{0%,30%{box-shadow:-15px 0 0 -12px var(--ink)}100%{box-shadow:-15px 0 0 -12px rgba(13,17,23,0)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;transition-delay:0s !important;animation:none !important}
}