/* The guides: the list of them, one guide, and the small desks that explain each.

   Loaded after styles.css and built on its tokens: the same ground, the same
   steel, the same hairlines, the same arrival. A visitor who lands on a guide
   from a search should be on the product's site from the first pixel, not on a
   blog that happens to link to it - so nothing here invents a colour or a curve
   the landing page does not already have. What it adds is what a page that
   *teaches* needs and a page that sells does not: a picture of the problem that
   moves, a place to see where you are, and steps that read as steps. */

/* ======================================================================
   THE SCENES

   One desk per guide, drawn in CSS from the markup in `_scenes.html`. Every
   coordinate is in cqw - hundredths of the stage's width - so the drawing is
   the same drawing at 1180 px and at 390.

   The loop is the guide in nine seconds:
     0-12 %   the problem, as Windows leaves it
     12-26 %  the trigger and the move
     26-78 %  the answer, held long enough to be looked at
     78-90 %  and back, because every preset undoes itself when it ends

   Nothing here runs unless the scene has `.on`, which the script gives it
   while it is on screen (a guide's own picture) or under the pointer (a row
   in a list). A list of eighteen moving desks would be eighteen things
   competing for the eye and a laptop fan for nothing. Without `.on` there is
   no animation at all, so every element sits at its own state A - the base
   styles below *are* state A, and that is also what a page without the script
   shows. */

/* The drawing's own box is `.sc-board`, not `.stage`: the landing page's deck
   of films already has a `.stage`, and a 2:1 box with hidden overflow put on
   it reshaped every film in the deck the day these shipped. */
.scene { --T: 9s; position: relative; container-type: inline-size; }
.sc-board {
  position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden;
  /* A desk lamp above the middle. Only light: a drawn floor was tried, and its
     edge read as a box left behind in the picture. */
  background:
    radial-gradient(62% 70% at 50% 14%, rgba(125, 154, 191, .18), transparent 70%),
    radial-gradient(58% 22% at 50% 84%, rgba(128, 156, 192, .07), transparent 72%);
}
/* Zero specificity, so a glyph's or a key's own size wins over the box every
   other element takes from its coordinates. */
:where(.sc-board i) {
  position: absolute; left: 0; top: 0; display: block;
  translate: var(--x) var(--y); width: var(--w); height: var(--h);
}

/* --- the light ----------------------------------------------------------

   One lamp above the middle of the desk and the glow the screens throw
   down onto it. Everything else in a scene is lit as if by these two: the
   bezels catch the lamp on their top edge, the glass on each screen carries
   one diagonal reflection, and a screen that is switched off stops lighting
   the desk under it. That is most of what separates a drawing of a monitor
   from a grey rectangle with a stand. */

/* --- monitors ---------------------------------------------------------- */

.sc-board .m {
  border-radius: .75cqw;
  border: .55cqw solid transparent;
  /* The wallpaper in the padding box, the brushed bezel in the border box. */
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(114, 145, 186, .42), transparent 56%) padding-box,
    radial-gradient(90% 80% at 100% 100%, rgba(75, 109, 153, .34), transparent 62%) padding-box,
    linear-gradient(180deg, #0e151d, #0a0e14) padding-box,
    linear-gradient(180deg, #4a525d 0%, #22272e 22%, #15181d 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 2.6cqw 4.2cqw -1.8cqw rgba(131, 158, 194, .26),
    0 1.6cqw 2.4cqw -1cqw rgba(0, 0, 0, .9);
}
/* The stand: a brushed neck and a foot in one polygon, lit from the front. */
.sc-board .m::after {
  content: ""; position: absolute; left: 50%; top: calc(100% + .55cqw); width: 26%; height: 2.5cqw;
  translate: -50% 0;
  background:
    linear-gradient(180deg, transparent 72%, rgba(255, 255, 255, .14) 72% 76%, transparent 76%),
    linear-gradient(90deg, #15181d, #3a414b 50%, #15181d);
  clip-path: polygon(44% 0, 56% 0, 58% 66%, 100% 76%, 100% 100%, 0 100%, 0 76%, 42% 66%);
}
.sc-board .m.turn::after { display: none; }

/* The glass: one reflection across the screen, over whatever is on it. A
   separate element, because it has to sit above the windows and the
   monitor sits below them. */
.sc-board .gl {
  z-index: 8; pointer-events: none; border-radius: .75cqw;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .025) 34%, transparent 34.4%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 18%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.sc-board .lap {
  border-radius: .6cqw .6cqw 0 0;
  border: .5cqw solid transparent;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(114, 145, 186, .38), transparent 56%) padding-box,
    linear-gradient(180deg, #0e151d, #0a0e14) padding-box,
    linear-gradient(180deg, #4a525d, #1a1e24) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 2cqw 3cqw -1.4cqw rgba(131, 158, 194, .24);
}
.sc-board .lap::after {
  content: ""; position: absolute; left: -14%; right: -14%; top: calc(100% + .5cqw); height: 1.3cqw;
  border-radius: 0 0 .9cqw .9cqw;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px),
    linear-gradient(90deg, #1d2228, #4a525d 50%, #1d2228);
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
}

/* --- windows ------------------------------------------------------------

   Windows 11 windows at the size of a thumbnail: a mica title bar with the
   app's icon on the left and the three controls on the right, rounded
   corners, two shadows (a tight one for the edge, a wide one for the
   height). Every colour in a scene is the brand's steel at some lightness -
   hue 214, never more than a third saturated - and the apps are told apart
   by what is drawn in them and how light it is, not by colour. A first pass
   gave each app a hue of its own (violet chat, amber player, green call,
   a game at sunset), and on the steel page it read as a mixed salad; the
   colours were mapped back onto the steel ramp by lightness, which kept
   every shape and lost the noise. Keep it that way: a new colour here is
   `hsl(214 <=34% L)`. */

.sc-board .w {
  --ac: #abbdd5;
  z-index: 2; overflow: hidden; border-radius: .5cqw;
  background-color: #181f29;
  background-image: linear-gradient(180deg, #1d2530, #161c25);
  border: 1px solid rgba(204, 215, 230, .17);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 .25cqw .5cqw rgba(0, 0, 0, .35),
    0 1.3cqw 2.6cqw -.8cqw rgba(0, 0, 0, .78);
}
.sc-board .w::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1.3cqw; z-index: 1;
  background:
    linear-gradient(var(--ac), var(--ac)) .5cqw 50% / .62cqw .62cqw no-repeat,
    linear-gradient(rgba(239, 241, 244, .26), rgba(239, 241, 244, .26)) 1.5cqw 50% / min(26%, 5cqw) .26cqw no-repeat,
    linear-gradient(rgba(239, 241, 244, .4), rgba(239, 241, 244, .4)) right 2.35cqw center / .42cqw 1px no-repeat,
    linear-gradient(rgba(239, 241, 244, .4), rgba(239, 241, 244, .4)) right 1.45cqw center / .42cqw .42cqw no-repeat,
    radial-gradient(circle, rgba(239, 241, 244, .55) 0 .13cqw, transparent .17cqw) right .45cqw center / .7cqw .7cqw no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035));
  border-bottom: 1px solid rgba(0, 0, 0, .3);
}

.sc-board .w.code  { --ac: #aabdd5; }
.sc-board .w.web   { --ac: #86a1c4; }
.sc-board .w.chat  { --ac: #abbdd5; }
.sc-board .w.music { --ac: #8ca5c6; }
.sc-board .w.mail  { --ac: #7694bb; }
.sc-board .w.doc   { --ac: #c9d4e3; }
.sc-board .w.call  { --ac: #89a3c5; }
.sc-board .w.obs   { --ac: #9fb4cf; }

/* An editor: a gutter with line numbers, a highlighted line, and code in
   four muted colours on a grid of lines, so it reads as code from across
   the room. */
.sc-board .w.code {
  background-image:
    linear-gradient(rgba(170, 189, 213, .09), rgba(170, 189, 213, .09)),
    repeating-linear-gradient(180deg, rgba(239, 241, 244, .18) 0 .26cqw, transparent .26cqw 1.15cqw),
    repeating-linear-gradient(180deg, #aabdd5 0 .3cqw, transparent .3cqw 2.3cqw),
    repeating-linear-gradient(180deg, rgba(239, 241, 244, .42) 0 .3cqw, transparent .3cqw 1.15cqw),
    repeating-linear-gradient(180deg, transparent 0 1.15cqw, #8ca6c7 1.15cqw 1.45cqw, transparent 1.45cqw 3.45cqw),
    repeating-linear-gradient(180deg, transparent 0 2.3cqw, #7694bb 2.3cqw 2.6cqw, transparent 2.6cqw 4.6cqw),
    repeating-linear-gradient(180deg, transparent 0 3.45cqw, rgba(239, 241, 244, .16) 3.45cqw 3.75cqw, transparent 3.75cqw 5.75cqw),
    linear-gradient(90deg, rgba(0, 0, 0, .22) 0 7%, transparent 7%),
    linear-gradient(180deg, #19202a, #141a22);
  background-position: 0 4.2cqw, 2% 2.05cqw, 10% 2.05cqw, 21% 2.05cqw, 40% 2.05cqw, 52% 2.05cqw, 16% 2.05cqw, 0 0, 0 0;
  background-size: 100% 1.15cqw, 3% 100%, 9% 100%, 18% 100%, 15% 100%, 13% 100%, 40% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
/* A browser: the address bar, a hero picture, a heading, lines, a card. */
.sc-board .w.web {
  background-image:
    linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)),
    radial-gradient(circle closest-side, rgba(228, 234, 241, .7), transparent),
    linear-gradient(135deg, #436189 0%, #698ab5 48%, #27384e 100%),
    linear-gradient(rgba(239, 241, 244, .55), rgba(239, 241, 244, .55)),
    repeating-linear-gradient(180deg, rgba(239, 241, 244, .16) 0 .28cqw, transparent .28cqw .95cqw),
    linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)),
    linear-gradient(180deg, #1b222c, #151b23);
  background-position: 50% 1.65cqw, 72% 3.6cqw, 8% 3.1cqw, 8% 58%, 8% 100%, 94% 100%, 0 0;
  background-size: 84% .85cqw, 18% 22%, 84% 34%, 40% 4%, 56% 30%, 22% 30%, 100% 100%;
  background-repeat: no-repeat;
}
/* A chat: the server rail, avatars with names and lines, the box to type in. */
.sc-board .w.chat {
  background-image:
    radial-gradient(circle closest-side, rgba(171, 189, 213, .7) 0 80%, transparent 88%),
    linear-gradient(rgba(0, 0, 0, .26), rgba(0, 0, 0, .26)),
    radial-gradient(circle closest-side, rgba(239, 241, 244, .42) 0 82%, transparent 90%),
    repeating-linear-gradient(180deg, rgba(171, 189, 213, .75) 0 .3cqw, transparent .3cqw 3.1cqw),
    repeating-linear-gradient(180deg, transparent 0 .75cqw, rgba(239, 241, 244, .2) .75cqw 1.05cqw, transparent 1.05cqw 1.4cqw, rgba(239, 241, 244, .13) 1.4cqw 1.7cqw, transparent 1.7cqw 3.1cqw),
    linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)),
    linear-gradient(180deg, #1b222c, #161c25);
  background-position: .3cqw 2cqw, 0 0, 2.7cqw 2cqw, 4.7cqw 2.15cqw, 4.7cqw 2.15cqw, 2.7cqw calc(100% - .6cqw), 0 0;
  background-size: 1.7cqw 2.6cqw, 2.3cqw 100%, 1.6cqw 3.1cqw, 16% calc(100% - 4.4cqw), calc(100% - 6cqw) calc(100% - 4.4cqw), calc(100% - 3.6cqw) 1.2cqw, 100% 100%;
  background-repeat: repeat-y, no-repeat, repeat-y, no-repeat, no-repeat, no-repeat, no-repeat;
}
/* A player: the cover, the title, a progress bar, the play button. */
.sc-board .w.music {
  background-image:
    linear-gradient(140deg, #9cb2ce 0%, #6e8eb8 52%, #304560 100%),
    linear-gradient(rgba(239, 241, 244, .55), rgba(239, 241, 244, .55)),
    linear-gradient(rgba(239, 241, 244, .22), rgba(239, 241, 244, .22)),
    linear-gradient(90deg, #8ca5c6 0 42%, rgba(239, 241, 244, .14) 42%),
    radial-gradient(circle closest-side, rgba(239, 241, 244, .85) 0 70%, transparent 80%),
    linear-gradient(180deg, #1d242d, #15191f);
  background-position: 50% 2.3cqw, 50% calc(100% - 4.6cqw), 50% calc(100% - 3.7cqw), 50% calc(100% - 2.6cqw), 50% calc(100% - .9cqw), 0 0;
  background-size: min(70%, 7cqw) min(52%, 7cqw), 46% .4cqw, 30% .3cqw, 70% .25cqw, 1.3cqw 1.3cqw, 100% 100%;
  background-repeat: no-repeat;
}
/* Mail: a folder pane, a list with unread marks, the open message. */
.sc-board .w.mail {
  background-image:
    linear-gradient(rgba(118, 148, 187, .14), rgba(118, 148, 187, .14)),
    radial-gradient(circle closest-side, #7694bb 0 70%, transparent 80%),
    repeating-linear-gradient(180deg, rgba(239, 241, 244, .38) 0 .28cqw, transparent .28cqw .7cqw, rgba(239, 241, 244, .14) .7cqw .98cqw, transparent .98cqw 2.2cqw),
    repeating-linear-gradient(180deg, rgba(239, 241, 244, .16) 0 .26cqw, transparent .26cqw .9cqw),
    linear-gradient(rgba(0, 0, 0, .24), rgba(0, 0, 0, .24)),
    linear-gradient(180deg, #1b222c, #161c25);
  background-position: 22% 2.9cqw, 22.5% 2.05cqw, 33% 2.05cqw, 100% 2.4cqw, 0 0, 0 0;
  background-size: 34% 2.2cqw, .8cqw 4.4cqw, 22% calc(100% - 2.4cqw), 34% 60%, 18% 100%, 100% 100%;
  background-repeat: no-repeat, repeat-y, no-repeat, no-repeat, no-repeat, no-repeat;
}
/* A document: a sheet of paper in the window, the one light thing on the
   desk, which is exactly why it reads as a page at any size. */
.sc-board .w.doc {
  background-image:
    linear-gradient(#2a3442, #2a3442),
    repeating-linear-gradient(180deg, rgba(42, 52, 66, .5) 0 .26cqw, transparent .26cqw .85cqw),
    linear-gradient(180deg, #dfe6ef, #cbd4df),
    linear-gradient(180deg, #232b36, #1b222b);
  background-position: 50% 3.2cqw, 50% 5cqw, 50% 2.1cqw, 0 0;
  background-size: 44% .55cqw, 56% calc(100% - 6.4cqw), 72% calc(100% - 2.6cqw), 100% 100%;
  background-repeat: no-repeat;
}
/* A call: four people in four tiles, and a hang-up button below them. */
.sc-board .w.call {
  background-image:
    radial-gradient(circle closest-side, #88a2c4 0 80%, transparent 90%),
    radial-gradient(50% 42% at 50% 100%, rgba(239, 241, 244, .5) 0 98%, transparent 100%),
    radial-gradient(circle closest-side, rgba(239, 241, 244, .55) 0 92%, transparent 100%),
    radial-gradient(50% 42% at 50% 100%, rgba(239, 241, 244, .45) 0 98%, transparent 100%),
    radial-gradient(circle closest-side, rgba(239, 241, 244, .5) 0 92%, transparent 100%),
    radial-gradient(50% 42% at 50% 100%, rgba(239, 241, 244, .45) 0 98%, transparent 100%),
    radial-gradient(circle closest-side, rgba(239, 241, 244, .5) 0 92%, transparent 100%),
    radial-gradient(50% 42% at 50% 100%, rgba(239, 241, 244, .5) 0 98%, transparent 100%),
    radial-gradient(circle closest-side, rgba(239, 241, 244, .55) 0 92%, transparent 100%),
    linear-gradient(150deg, #344b69, #1c2838),
    linear-gradient(150deg, #3a4c63, #1f2834),
    linear-gradient(150deg, #2c405a, #182230),
    linear-gradient(150deg, #3a485b, #1c222a),
    linear-gradient(180deg, #11161d, #0d1116);
  background-position:
    50% calc(100% - .45cqw),
    15% 46%, 18% 28%, 85% 46%, 82% 28%, 15% 86%, 18% 68%, 85% 86%, 82% 68%,
    2% 1.7cqw, 98% 1.7cqw, 2% 88%, 98% 88%, 0 0;
  background-size:
    2.6cqw 1.2cqw,
    24% 14%, 14% 14%, 24% 14%, 14% 14%, 24% 14%, 14% 14%, 24% 14%, 14% 14%,
    47.5% 40%, 47.5% 40%, 47.5% 40%, 47.5% 40%, 100% 100%;
  background-repeat: no-repeat;
}
.sc-board .w.video, .sc-board .w.game { border-color: rgba(204, 215, 230, .12); }
.sc-board .w.game::before { display: none; }
/* A game: dusk over three ridges in haze, a warm sun low on the horizon,
   and the two things every game screen has in a corner - a health bar and a
   map, all in steel. */
.sc-board .w.game {
  background-image:
    linear-gradient(90deg, #89a3c5 0 64%, rgba(0, 0, 0, .35) 64%),
    radial-gradient(circle closest-side, #8ca5c6 0 12%, rgba(30, 43, 60, .78) 16% 84%, rgba(239, 241, 244, .38) 86% 92%, transparent 95%),
    radial-gradient(circle closest-side, rgba(211, 221, 234, .95), rgba(178, 195, 217, .35) 45%, transparent 100%),
    linear-gradient(163deg, transparent 62%, #0b0f15 62.3%),
    linear-gradient(196deg, transparent 54%, #1e2b3c 54.3%),
    linear-gradient(172deg, transparent 47%, #344b69 47.3%),
    linear-gradient(180deg, #334a69 0%, #6d87a8 42%, #8fa8c8 62%, #3b4e66 64%);
  background-position: 4% 6%, 97% 7%, 66% 40%, 0 0, 0 0, 0 0, 0 0;
  background-size: 16% 4%, 8% 15%, 30% 46%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
/* A video: a picture, a progress line, and a round play button over it. */
.sc-board .w.video {
  background-image:
    linear-gradient(90deg, #88a2c4 0 36%, rgba(239, 241, 244, .2) 36%),
    radial-gradient(circle closest-side, rgba(211, 221, 234, .7), transparent),
    linear-gradient(170deg, transparent 58%, #0d1219 58.4%),
    linear-gradient(180deg, #3a5374, #6a788a 70%, #222830);
  background-position: 50% calc(100% - .7cqw), 30% 40%, 0 0, 0 0;
  background-size: 88% .3cqw, 36% 50%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
.sc-board .w.video::after {
  content: ""; position: absolute; left: 50%; top: 46%; width: 2.6cqw; height: 2.6cqw; translate: -50% -50%;
  border-radius: 50%; background: rgba(10, 14, 20, .55);
  box-shadow: inset 0 0 0 1px rgba(239, 241, 244, .3);
}
.sc-board .w.video::before {
  content: ""; position: absolute; inset: auto; left: 50%; top: 46%; width: .95cqw; height: 1.1cqw;
  translate: -38% -50%; z-index: 2; border: 0;
  background: rgba(239, 241, 244, .92); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* A broadcaster: the preview, the scenes, two level meters and the red dot. */
.sc-board .w.obs {
  background-image:
    radial-gradient(circle closest-side, #88a2c4 0 70%, transparent 80%),
    linear-gradient(90deg, #89a3c5 0 55%, #8ca5c6 55% 75%, rgba(239, 241, 244, .12) 75%),
    linear-gradient(90deg, #89a3c5 0 40%, rgba(239, 241, 244, .12) 40%),
    repeating-linear-gradient(180deg, rgba(239, 241, 244, .2) 0 .3cqw, transparent .3cqw 1.1cqw),
    linear-gradient(163deg, transparent 60%, #0b0f15 60.3%),
    linear-gradient(180deg, #334a69, #6d87a8 50%, #8fa8c8 70%),
    linear-gradient(180deg, #161c25, #12171e);
  background-position: 6% 2.1cqw, 8% calc(100% - 1.7cqw), 8% calc(100% - .9cqw), 96% 2.4cqw, 8% 2.4cqw, 8% 2.4cqw, 0 0;
  background-size: 1.1cqw 1.1cqw, 56% .32cqw, 56% .32cqw, 22% 70%, 64% 62%, 64% 62%, 100% 100%;
  background-repeat: no-repeat;
}
/* An old game: a pixel floor and a ball, so a stretch shows as an egg. */
.sc-board .w.retro {
  background-image:
    radial-gradient(ellipse closest-side, #f4f6f8 0 64%, #abbdd5 84%, transparent 90%),
    repeating-conic-gradient(#25354a 0 25%, #1a2533 0 50%),
    linear-gradient(180deg, #2d415b, #18202b);
  background-position: 50% 46%, 0 100%, 0 0;
  background-size: 48% 40%, 4cqw 4cqw, 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat;
}
.sc-board .w.retro::before { transition: none; }

/* Where a window is about to go: the zone the program draws, dashed, a beat
   before the window lands in it. This is the product's own idea - a desk
   divided into places - drawn at the size of a thumbnail. */
.sc-board .zone {
  z-index: 1; border-radius: .5cqw; opacity: 0;
  border: 1px dashed rgba(171, 189, 213, .75);
  background: rgba(171, 189, 213, .08);
  box-shadow: inset 0 0 1.4cqw rgba(171, 189, 213, .18);
}

/* The program saying so: a toast in the corner once everything has landed,
   with the mark and a tick. No words - a picture would need twenty-nine
   translations - and none needed: it is the shape of a Windows notice. */
.sc-board .toast {
  z-index: 9; opacity: 0; translate: 77cqw 43.4cqw; width: 19cqw; height: 4.4cqw;
  border-radius: .8cqw; border: 1px solid rgba(204, 215, 230, .22);
  background:
    url(/assets/mark-small.webp) 1cqw 50% / 2.5cqw 2.5cqw no-repeat,
    linear-gradient(rgba(239, 241, 244, .7), rgba(239, 241, 244, .7)) 4.5cqw 1.25cqw / 7.5cqw .45cqw no-repeat,
    linear-gradient(rgba(239, 241, 244, .3), rgba(239, 241, 244, .3)) 4.5cqw 2.5cqw / 5.5cqw .35cqw no-repeat,
    linear-gradient(180deg, rgba(40, 49, 60, .96), rgba(26, 32, 39, .96));
  box-shadow: 0 1.2cqw 2.6cqw -1cqw rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.sc-board .toast::after {
  content: ""; position: absolute; right: 1.1cqw; top: 50%; width: 2cqw; height: 2cqw; translate: 0 -50%;
  border-radius: 50%; background: rgba(137, 163, 197, .18);
  box-shadow: inset 0 0 0 1px rgba(137, 163, 197, .6);
}
.sc-board .toast::before {
  content: ""; position: absolute; right: 1.72cqw; top: 50%; width: .72cqw; height: .38cqw; translate: 0 -70%;
  border-left: .18cqw solid #aabdd5; border-bottom: .18cqw solid #aabdd5; rotate: -45deg;
}

/* --- glyphs, keys, the pointer ----------------------------------------- */

.sc-board .g {
  width: var(--s); height: var(--s); color: var(--ink-3); opacity: .3;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(171, 189, 213, .12), transparent 72%);
}
.sc-board .g svg { width: 100%; height: 100%; overflow: visible; }
.sc-board .g.unlit { opacity: 1; color: var(--steel); }
.sc-board .g .wave { transform-box: fill-box; transform-origin: 0 50%; }
.sc-board .g.rec { color: #a2b6d1; }

/* A keycap: a lit top face, a skirt below it, and the glyph etched in. */
.sc-board .key {
  width: 9cqw; height: 6.4cqw; display: grid !important; place-items: center;
  border-radius: 1cqw; color: #d3dde9;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, .14), transparent 70%),
    linear-gradient(180deg, #353e49, #1d232c);
  border: 1px solid rgba(239, 241, 244, .2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 .6cqw 0 #0b0e12,
    0 .6cqw 0 1px rgba(239, 241, 244, .08),
    0 1.8cqw 2.4cqw -.8cqw rgba(0, 0, 0, .95);
}
.sc-board .key svg { width: 3.4cqw; height: 3.4cqw; filter: drop-shadow(0 0 .4cqw rgba(171, 189, 213, .35)); }

.sc-board .cur { width: 2.3cqw; height: 3.2cqw; z-index: 6; translate: 24cqw 20cqw; }
.sc-board .cur svg { width: 100%; height: 100%; fill: #f5f6f8; stroke: #0b0e12; stroke-width: 1.1; stroke-linejoin: round;
           filter: drop-shadow(0 .3cqw .5cqw rgba(0, 0, 0, .6)); }

.sc-board .edge {
  width: .35cqw; z-index: 5; opacity: 0; border-radius: 1cqw;
  background: var(--steel); box-shadow: 0 0 1.4cqw .3cqw rgba(171, 189, 213, .7);
}
.sc-board .ripple {
  width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; z-index: 5; border-radius: 50%;
  border: .25cqw solid rgba(239, 241, 244, .8); opacity: 0; scale: .2;
}
.sc-board .wire {
  height: .3cqw; border-radius: 1cqw;
  background: linear-gradient(90deg, rgba(171, 189, 213, .5), rgba(171, 189, 213, .08) 50%, rgba(171, 189, 213, .5));
}
.sc-board .wire::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 2.2cqw; height: 2.2cqw; margin: -1.1cqw 0 0 -1.1cqw;
  border-radius: 50%; background: radial-gradient(circle, #f5f6f8 0 28%, rgba(171, 189, 213, .6) 40%, transparent 70%);
}
.sc-board .sc-split {
  width: .3cqw; z-index: 4; scale: 1 0; transform-origin: 50% 0;
  background: linear-gradient(180deg, transparent, var(--steel) 20% 80%, transparent);
  box-shadow: 0 0 1cqw rgba(171, 189, 213, .6);
}

.sc-board .hz {
  display: grid !important; grid-template-columns: auto auto; justify-content: center; align-items: baseline;
  column-gap: 1.2cqw; z-index: 3; color: var(--ink);
  font: 680 9.5cqw/1 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3cqw rgba(171, 189, 213, .25);
}
.sc-board .hz b { grid-area: 1 / 1; font-weight: inherit; text-align: right; }
.sc-board .hz .b { opacity: 0; color: var(--steel); }
.sc-board .hz small { grid-area: 1 / 2; font-size: 3.4cqw; color: var(--ink-3); letter-spacing: 0; }
.sc-board .track {
  height: .3cqw; z-index: 3; border-radius: 1cqw; background: rgba(239, 241, 244, .1);
}
.sc-board .track .ball {
  top: 50%; width: 2.8cqw; height: 2.8cqw; margin-top: -1.4cqw; border-radius: 50%; translate: 0 0;
  background: radial-gradient(circle at 35% 35%, #ffffff, #abbdd5 70%);
}
.sc-board .track .smooth { opacity: 0; box-shadow: -1.6cqw 0 1.4cqw -.6cqw rgba(171, 189, 213, .55); }

/* --- the loop ------------------------------------------------------------

   Each element names up to three animations in custom properties and the
   running scene plays them together, so a window can move, appear and flash
   on landing without a rule for every combination of the three. */

.sc-board .mv { --a1: mv; --a3: land; --a4: lift; }
.sc-board .zone { --a1: zone; }
.sc-board .zone.back { --a1: zone-back; }
.sc-board .toast { --a1: toast; }
.sc-board .toast.late { --a1: toast-late; }
.sc-board .gl.turn { --a1: turn; }
.sc-board .gl.gone { --a1: gone; }
.sc-board .d3 { --a1: mv3; }
.sc-board .pop { --a2: pop; opacity: 0; }
.sc-board .out { --a2: out; }
.sc-board .hide { --a2: hide; }
.sc-board .active { --a2: focus; }
.sc-board .m.off { --a1: off; }
.sc-board .m.gone { --a1: gone; }
.sc-board .m.wake { --a1: wake; filter: brightness(.3); }
.sc-board .m.come, .sc-board .gl.come { --a1: come; opacity: .1; }
.sc-board .g.cue2 { --a1: cue2; }
.sc-board .m.turn { --a1: turn; }
.sc-board .g.lit { --a1: lit; }
.sc-board .g.unlit { --a1: unlit; }
.sc-board .g.cue { --a1: cue; }
.sc-board .key.press { --a1: press; }
.sc-board .key.press2 { --a1: press2; }
.sc-board .key.both { --a1: press-both; }
.sc-board .sc-split { --a1: draw; }
.sc-board .w.ontop { --a1: ontop; z-index: 1; }
.sc-board .w.under { z-index: 2; }

.scene.on .sc-board i {
  /* The move springs - a window overshoots its place by a hair and settles,
     the way a snapped window does - and everything else eases out. */
  animation-name: var(--a1, none), var(--a4, none), var(--a2, none), var(--a3, none);
  animation-duration: var(--T);
  animation-timing-function: cubic-bezier(.34, 1.28, .5, 1), var(--ease), var(--ease), var(--ease);
  animation-delay: calc(var(--d, 0s) + var(--lag));
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.scene.on .d3 { animation-duration: 12s; }

@keyframes mv {
  0%, 12%  { translate: var(--x) var(--y); width: var(--w); height: var(--h); }
  26%, 78% { translate: var(--x2) var(--y2); width: var(--w2); height: var(--h2); }
  90%, 100% { translate: var(--x) var(--y); width: var(--w); height: var(--h); }
}
@keyframes mv3 {
  0%, 22%  { translate: var(--x) var(--y); width: var(--w); height: var(--h); }
  33%, 55% { translate: var(--x2) var(--y2); width: var(--w2); height: var(--h2); }
  66%, 88% { translate: var(--x3) var(--y3); width: var(--w3); height: var(--h3); }
  100%     { translate: var(--x) var(--y); width: var(--w); height: var(--h); }
}
/* A window that arrives where it belongs says so: one ring, gone in a beat.
   It is the program's own "applied" moment, at the size of a drawing. */
@keyframes land {
  0%, 24%  { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 .25cqw .5cqw rgba(0, 0, 0, .35), 0 1.3cqw 2.6cqw -.8cqw rgba(0, 0, 0, .78), 0 0 0 0 rgba(171, 189, 213, 0); }
  30%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 .25cqw .5cqw rgba(0, 0, 0, .35), 0 1.3cqw 2.6cqw -.8cqw rgba(0, 0, 0, .78), 0 0 0 .45cqw rgba(171, 189, 213, .45); }
  42%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 .25cqw .5cqw rgba(0, 0, 0, .35), 0 1.3cqw 2.6cqw -.8cqw rgba(0, 0, 0, .78), 0 0 0 1.2cqw rgba(171, 189, 213, 0); }
}
}
/* Picked up, carried, put down: a window grows a little as it leaves its
   place and settles back to its size as it lands. */
@keyframes lift {
  0%, 12%  { scale: 1; }
  17%      { scale: 1.035; }
  26%, 78% { scale: 1; }
  83%      { scale: 1.035; }
  90%, 100% { scale: 1; }
}
@keyframes zone {
  0%, 5%   { opacity: 0; scale: .97; }
  11%, 22% { opacity: 1; scale: 1; }
  32%, 100% { opacity: 0; scale: 1; }
}
@keyframes zone-back {
  0%, 70%  { opacity: 0; scale: .97; }
  74%, 84% { opacity: 1; scale: 1; }
  94%, 100% { opacity: 0; scale: 1; }
}
@keyframes toast {
  0%, 26%  { opacity: 0; transform: translateY(1.2cqw); }
  32%, 72% { opacity: 1; transform: none; }
  78%, 100% { opacity: 0; transform: translateY(1.2cqw); }
}
@keyframes toast-late {
  0%, 62%  { opacity: 0; transform: translateY(1.2cqw); }
  67%, 86% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(1.2cqw); }
}
@keyframes pop {
  0%, 12%  { opacity: 0; scale: .94; }
  24%, 80% { opacity: 1; scale: 1; }
  88%, 100% { opacity: 0; scale: .94; }
}
@keyframes out {
  0%, 12%  { opacity: 1; }
  22%, 82% { opacity: 0; }
  92%, 100% { opacity: 1; }
}
@keyframes hide {
  0%, 12%  { opacity: 1; scale: 1; }
  24%, 78% { opacity: 0; scale: .9; }
  90%, 100% { opacity: 1; scale: 1; }
}
@keyframes focus {
  0%, 14%  { border-color: rgba(171, 189, 213, .3); }
  26%, 78% { border-color: rgba(171, 189, 213, .75); }
  90%, 100% { border-color: rgba(171, 189, 213, .3); }
}
@keyframes off {
  0%, 14%  { filter: none; }
  24%, 78% { filter: brightness(.3); }
  88%, 100% { filter: none; }
}
@keyframes gone {
  0%, 12%  { opacity: 1; scale: 1; }
  24%, 78% { opacity: .1; scale: .96; }
  90%, 100% { opacity: 1; scale: 1; }
}
@keyframes wake {
  0%, 14%  { filter: brightness(.3); }
  24%, 78% { filter: none; }
  88%, 100% { filter: brightness(.3); }
}
@keyframes come {
  0%, 12%  { opacity: .1; scale: .96; }
  24%, 78% { opacity: 1; scale: 1; }
  90%, 100% { opacity: .1; scale: .96; }
}
@keyframes cue2 {
  0%, 74%  { opacity: .3; color: var(--ink-3); }
  79%, 88% { opacity: 1; color: var(--steel); }
  96%, 100% { opacity: .3; color: var(--ink-3); }
}
@keyframes turn {
  0%, 16%  { rotate: 0deg; }
  32%, 76% { rotate: 90deg; }
  90%, 100% { rotate: 0deg; }
}
@keyframes lit {
  0%, 12%  { opacity: .3; color: var(--ink-3); filter: none; }
  24%, 78% { opacity: 1; color: var(--steel); filter: drop-shadow(0 0 1.2cqw rgba(171, 189, 213, .55)); }
  90%, 100% { opacity: .3; color: var(--ink-3); filter: none; }
}
@keyframes unlit {
  0%, 12%  { opacity: 1; color: var(--steel); }
  24%, 78% { opacity: .3; color: var(--ink-3); }
  90%, 100% { opacity: 1; color: var(--steel); }
}
@keyframes cue {
  0%, 4%   { opacity: .3; color: var(--ink-3); }
  9%, 20%  { opacity: 1; color: var(--steel); }
  30%, 100% { opacity: .3; color: var(--ink-3); }
}
@keyframes press {
  0%, 6%   { translate: var(--x) var(--y); color: var(--steel); }
  9%       { translate: var(--x) calc(var(--y) + .45cqw); color: #fff; box-shadow: 0 .1cqw 0 #0a0d11, 0 0 2.4cqw rgba(171, 189, 213, .6); }
  14%, 100% { translate: var(--x) var(--y); color: var(--steel); }
}
@keyframes press2 {
  0%, 72%  { translate: var(--x) var(--y); color: var(--steel); }
  75%      { translate: var(--x) calc(var(--y) + .45cqw); color: #fff; box-shadow: 0 .1cqw 0 #0a0d11, 0 0 2.4cqw rgba(171, 189, 213, .6); }
  80%, 100% { translate: var(--x) var(--y); color: var(--steel); }
}
@keyframes press-both {
  0%, 6%, 14%, 72%, 80%, 100% { translate: var(--x) var(--y); color: var(--steel); }
  9%, 75%  { translate: var(--x) calc(var(--y) + .45cqw); color: #fff; box-shadow: 0 .1cqw 0 #0a0d11, 0 0 2.4cqw rgba(171, 189, 213, .6); }
}
@keyframes draw {
  0%, 14%  { scale: 1 0; }
  24%, 78% { scale: 1 1; }
  88%, 100% { scale: 1 0; }
}
/* The video goes behind the page you clicked, then is pinned above it, then
   lets the page show through. Two separate answers, so two separate beats. */
@keyframes ontop {
  0%, 12%  { z-index: 1; opacity: 1; }
  13%, 44% { z-index: 3; opacity: 1; }
  54%, 80% { z-index: 3; opacity: .5; }
  88%      { z-index: 3; opacity: 1; }
  89%, 100% { z-index: 1; opacity: 1; }
}

/* The ones with a story of their own. */
.scene.on .sc-board .wire::after { animation: wire var(--T) var(--ease) infinite both;  animation-delay: var(--lag); }
@keyframes wire { 0%, 12% { left: 0; } 26%, 78% { left: 100%; } 90%, 100% { left: 0; } }

.scene.on .sc-board .g .wave { animation: wave 1.4s ease-in-out infinite; }
.scene.on .sc-board .g .w2 { animation-delay: .25s; }
@keyframes wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.scene.on .hz .a { animation: out var(--T) var(--ease) infinite both;  animation-delay: var(--lag); }
.scene.on .hz .b { animation: pop var(--T) var(--ease) infinite both;  animation-delay: var(--lag); }
/* Sixty frames against a hundred and forty-four, at the size of a drawing: the
   same ball crossing the same line, in seven jumps or in none. */
.scene.on .track .choppy { animation: slide 1.5s steps(7, jump-none) infinite alternate, out var(--T) var(--ease) infinite both;  animation-delay: 0s, var(--lag); }
.scene.on .track .smooth { animation: slide 1.5s cubic-bezier(.45, 0, .55, 1) infinite alternate, pop var(--T) var(--ease) infinite both;  animation-delay: 0s, var(--lag); }
@keyframes slide { from { translate: 0 0; } to { translate: calc(40cqw - 2.8cqw) 0; } }

[data-scene="stop-the-mouse-leaving-the-game-screen"] { --T: 11s; }
.scene.on .cur.escape { animation: escape var(--T) var(--ease) infinite both;  animation-delay: var(--lag); }
.scene.on .edge { animation: edge var(--T) ease infinite both;  animation-delay: var(--lag); }
.scene.on .ripple { animation: ripple var(--T) ease-out infinite both;  animation-delay: var(--lag); }
.scene.on .w.drop { animation: drop var(--T) ease infinite both;  animation-delay: var(--lag); }
/* First half: the pointer runs off the game, a click lands on the other
   screen, and the game drops behind. Second half: the same run stops at a
   lit edge and comes back. */
@keyframes escape {
  0%       { translate: 24cqw 20cqw; opacity: 1; }
  20%      { translate: 62cqw 19cqw; scale: 1; }
  23%      { scale: .82; }
  26%, 40% { translate: 62cqw 19cqw; scale: 1; opacity: 1; }
  45%      { opacity: 0; }
  48%      { translate: 24cqw 20cqw; opacity: 0; }
  52%      { opacity: 1; }
  64%      { translate: 45.4cqw 19cqw; }
  67%      { translate: 43.6cqw 19.4cqw; }
  72%      { translate: 45.4cqw 19cqw; }
  84%      { translate: 45.4cqw 25cqw; opacity: 1; }
  94%      { opacity: 0; }
  100%     { translate: 24cqw 20cqw; opacity: 0; }
}
@keyframes edge {
  0%, 60%  { opacity: 0; }
  64%, 86% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes ripple {
  0%, 22%  { opacity: 0; scale: .2; }
  23%      { opacity: 1; scale: .3; }
  34%, 100% { opacity: 0; scale: 1.4; }
}
@keyframes drop {
  0%, 23%  { filter: none; scale: 1; }
  28%, 42% { filter: brightness(.38) saturate(.6); scale: .985; }
  50%, 100% { filter: none; scale: 1; }
}

/* An old game stretched edge to edge with a title bar, then set at its own
   shape with nothing round it. The ball is the tell. */
.sc-board .w.retro { --a2: retro; }
@keyframes retro {
  0%, 12%  { background-size: 48% 40%, 4cqw 4cqw, auto; border-color: rgba(171, 189, 213, .3); }
  26%, 78% { background-size: 30% 40%, 4cqw 4cqw, auto; border-color: transparent; }
  90%, 100% { background-size: 48% 40%, 4cqw 4cqw, auto; border-color: rgba(171, 189, 213, .3); }
}
.sc-board .w.retro { background-size: 48% 40%, 4cqw 4cqw, auto; }
.scene.on .w.retro::before { animation: bar var(--T) var(--ease) infinite both;  animation-delay: var(--lag); }
@keyframes bar { 0%, 12% { opacity: 1; } 22%, 80% { opacity: 0; } 90%, 100% { opacity: 1; } }

/* --- at rest -------------------------------------------------------------

   A scene that is not playing shows its answer: the desk as it looks once
   everything has landed. That is the picture worth looking at in a list of
   eighteen, the one a page without the script gets, and the one somebody
   who asked for no motion gets. When it starts, the loop starts at 70 % -
   the same answer, a moment before it is undone - so going from still to
   moving has no jump: it undoes itself, then does it again, which is the
   whole story of the guide in one pass. */
.scene { --lag: calc(var(--T) * -.7); }
.scene:not(.on) .sc-board .mv { translate: var(--x2) var(--y2); width: var(--w2); height: var(--h2); }
.scene:not(.on) .sc-board .d3 { translate: var(--x3) var(--y3); width: var(--w3); height: var(--h3); }
.scene:not(.on) .sc-board .pop, .scene:not(.on) .sc-board .toast { opacity: 1; }
.scene:not(.on) .sc-board .out, .scene:not(.on) .sc-board .hide { opacity: 0; }
.scene:not(.on) .sc-board .gl.turn, .scene:not(.on) .sc-board .m.turn { rotate: 90deg; }
.scene:not(.on) .sc-board .gl.gone, .scene:not(.on) .sc-board .m.gone { opacity: .1; }
.scene:not(.on) .sc-board .g.lit { opacity: 1; color: var(--steel); filter: drop-shadow(0 0 1.2cqw rgba(171, 189, 213, .55)); }
.scene:not(.on) .sc-board .g.unlit { opacity: .3; color: var(--ink-3); }
.scene:not(.on) .sc-board .m.off { filter: brightness(.3); }
.scene:not(.on) .sc-board .m.wake { filter: none; }
.scene:not(.on) .sc-board .m.come, .scene:not(.on) .sc-board .gl.come { opacity: 1; }
.scene:not(.on) .sc-board .sc-split { scale: 1 1; }
.scene:not(.on) .sc-board .edge { opacity: 1; }
.scene:not(.on) .sc-board .cur.escape { translate: 45.4cqw 19cqw; }
.scene:not(.on) .sc-board .w.ontop { z-index: 3; opacity: .5; }
.scene:not(.on) .sc-board .w.retro { background-size: 30% 40%, 4cqw 4cqw, auto; border-color: transparent; }
.scene:not(.on) .sc-board .w.retro::before { opacity: 0; }
.scene:not(.on) .sc-board .wire::after { left: 100%; }
.scene:not(.on) .sc-board .hz .a, .scene:not(.on) .sc-board .track .choppy { opacity: 0; }
.scene:not(.on) .sc-board .hz .b, .scene:not(.on) .sc-board .track .smooth { opacity: 1; }
.scene:not(.on) .sc-board .track .smooth { translate: calc(40cqw - 2.8cqw) 0; }

/* ======================================================================
   THE LIST OF GUIDES

   Numbered rows rather than a grid of equal cards: the landing page makes its
   argument as a numbered list for the same reason, and a column of identical
   boxes is the shape that reads as generated. Each row carries its desk; the
   pointer on a row is what sets that desk moving. */

.glist { margin-top: 34px; border-top: 1px solid var(--line-2); position: relative; }
.grow {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 56px minmax(0, 1fr) clamp(170px, 22vw, 250px);
  gap: 8px 30px; padding: 24px 12px 24px 8px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2); text-decoration: none;
  transition: background .45s var(--ease), padding-left .45s var(--ease);
}
.grow::before {
  /* The light that follows the pointer along the row. */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px 140px at var(--mx, 50%) 50%, rgba(168, 189, 216, .09), transparent 70%);
  transition: opacity .4s var(--ease);
}
.grow:hover, .grow:focus-visible { background: var(--raise); padding-left: 18px; }
.grow:hover::before, .grow:focus-visible::before { opacity: 1; }
.grow:focus-visible { outline: 2px solid var(--steel); outline-offset: -2px; border-radius: 6px; }
.grow .n {
  align-self: start; padding-top: 3px;
  font: 600 .86rem/1.4 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--ink-3);
  transition: color .3s var(--ease);
}
.grow:hover .n, .grow:focus-visible .n { color: var(--steel); }
.grow .t { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.grow .tag {
  align-self: flex-start; font-size: .74rem; letter-spacing: .04em; color: var(--steel);
  padding: 2px 9px; border: 1px solid rgba(168, 189, 216, .24); border-radius: 99px;
}
.grow b {
  color: var(--ink); font: 640 clamp(1.08rem, 1.7vw, 1.3rem)/1.3 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.012em;
}
.grow b::after {
  /* The arrow that says this row is a link, drawn in from the left on hover. */
  content: ""; display: inline-block; width: .9em; height: .55em; margin-left: .45em; vertical-align: .08em;
  background: currentColor; opacity: 0; translate: -8px 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath d='M0 5.5h16M11.5 1l4.5 4.5L11.5 10' fill='none' stroke='%23000' stroke-width='1.6'/%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 18 11'%3E%3Cpath d='M0 5.5h16M11.5 1l4.5 4.5L11.5 10' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity .3s var(--ease), translate .4s var(--ease);
}
[dir="rtl"] .grow b::after { scale: -1 1; }
.grow:hover b::after, .grow:focus-visible b::after { opacity: 1; translate: 0 0; }
.grow .sum { font-size: .95rem; line-height: 1.55; max-width: 62ch; }
.grow .scene {
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: #0b0e12;
  transition: transform .6s var(--ease), border-color .4s var(--ease), box-shadow .6s var(--ease);
}
.grow:hover .scene, .grow:focus-visible .scene {
  transform: translateY(-2px) scale(1.03); border-color: rgba(168, 189, 216, .3);
  box-shadow: 0 22px 50px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(168, 189, 216, .08);
}
.grow[hidden] { display: none; }

.js .glist > .grow.reveal.in:nth-child(2) { transition-delay: .05s; }
.js .glist > .grow.reveal.in:nth-child(3) { transition-delay: .10s; }
.js .glist > .grow.reveal.in:nth-child(4) { transition-delay: .15s; }
.js .glist > .grow.reveal.in:nth-child(n+5) { transition-delay: .2s; }

/* The landing page's version: two columns of titles, each with its desk. */
.glist.compact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44px; }
.glist.compact .grow { grid-template-columns: 40px minmax(0, 1fr) 132px; gap: 6px 20px; padding: 18px 8px; }
.glist.compact .grow b { font-size: 1.04rem; }

/* The reading meter the landing page's lists have, on this one too. */
.js .glist::before {
  content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--steel), rgba(168, 189, 216, .18));
  transform: scaleY(var(--p, 0)); transform-origin: 50% 0; opacity: .5;
}

/* --- the index page: a desk, a title, and the way through ---------------- */

.ghero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center;
  padding-top: 70px;
}
.ghero h1 { font-size: clamp(2.3rem, 4.8vw, 3.7rem); line-height: 1.05; }
.ghero .lede { font-size: 1.14rem; }
.ghero .plate { margin: 0; }

.finder {
  position: sticky; top: 62px; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 64px -14px 0; padding: 14px;
  background: linear-gradient(to bottom, rgba(10, 12, 15, .92), rgba(10, 12, 15, .78));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 14px; border: 1px solid transparent;
  transition: border-color .35s var(--ease);
}
.finder.stuck { border-color: var(--line-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 560 .88rem/1 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  color: var(--ink-2); background: transparent; cursor: pointer;
  min-height: 38px; padding: 0 15px; border-radius: 99px; border: 1px solid var(--line);
  transition: color .25s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { color: var(--ink); border-color: rgba(255, 255, 255, .24); }
.chip[aria-pressed="true"] {
  color: #0f1319; border-color: rgba(255, 255, 255, .3);
  background: linear-gradient(180deg, #e2e8f1 0%, #c6d1de 48%, #b1bfd1 52%, #d0dae6 100%);
}
.chip:focus-visible, .search input:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }
.search { position: relative; margin-left: auto; flex: 0 1 280px; }
.search svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
[dir="rtl"] .search svg { left: auto; right: 13px; }
.search input {
  width: 100%; min-height: 40px; padding: 0 14px 0 38px; border-radius: 99px;
  font: 400 .93rem/1 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  color: var(--ink); background: rgba(255, 255, 255, .035); border: 1px solid var(--line);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
[dir="rtl"] .search input { padding: 0 38px 0 14px; }
.search input::placeholder { color: var(--ink-3); }
.search input:focus { border-color: rgba(168, 189, 216, .45); background: rgba(255, 255, 255, .05); outline: none; }
.none { display: none; padding: 46px 8px; color: var(--ink-2); }
.none.on { display: block; }
.none a { color: var(--steel); }

/* ======================================================================
   ONE GUIDE

   A reading column the width people read at, a margin on its left that holds
   the guide's number and then the contents, and the desk between the title
   and the text - the picture of the problem before the words about it. */

.gpage {
  display: grid; grid-template-columns: 200px minmax(0, 700px) minmax(0, 1fr);
  column-gap: 56px; padding-top: 58px; padding-bottom: 30px;
}
.gpage > * { grid-column: 2 / 4; }
.gpage > .crumbs { grid-column: 2 / 4; }
.gpage > .gno { grid-column: 1; grid-row: 2 / 4; align-self: start; padding-top: 12px; }
.gpage > .plate { grid-column: 1 / -1; margin: 46px 0 8px; }
.gpage > .toc { grid-column: 1; align-self: start; position: sticky; top: 92px; margin-top: 58px; }
.gpage > .prose { grid-column: 2; }
.gpage h1 { font-size: clamp(2rem, 4vw, 3.05rem); line-height: 1.08; max-width: 24ch; margin-bottom: 22px; }
.gpage .lede { font-size: 1.18rem; max-width: 60ch; }

/* The number in the margin, the way the landing page numbers its sections:
   large, quiet, and the first thing that says somebody set this page. */
.gno { display: flex; flex-direction: column; gap: 10px; }
.gno b {
  font: 600 clamp(3rem, 6vw, 4.6rem)/.9 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #eef3f9 0%, #9eb0c6 52%, #5d6b7c 53%, #a9b9cc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gno span { font-size: .78rem; letter-spacing: .04em; color: var(--steel); opacity: .8; }

/* The desk itself, framed as the landing page frames its films. */
.plate {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: #0a0d11;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95);
}
.plate::after {
  /* A thin blueprint grid under the drawing, fading out to the edges. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 4% 8%,
    linear-gradient(180deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 4% 8%;
  -webkit-mask: radial-gradient(70% 80% at 50% 45%, #000, transparent);
          mask: radial-gradient(70% 80% at 50% 45%, #000, transparent);
}
.plate .scene { z-index: 1; }
.gpage > .plate .scene { max-width: 900px; margin: -1% auto -.5%; }
/* A light that follows the pointer across the drawing. */
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(380px 260px at var(--mx, 50%) var(--my, 30%), rgba(190, 210, 236, .08), transparent 70%);
  transition: opacity .5s var(--ease);
}
.plate:hover::before { opacity: 1; }

/* --- contents ---------------------------------------------------------- */

.toc p { margin: 0 0 12px; font-size: .78rem; letter-spacing: .04em; color: var(--ink-3); }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 14px; position: relative; border-left: 1px solid var(--line); }
[dir="rtl"] .toc ol { padding: 0 14px 0 0; border-left: 0; border-right: 1px solid var(--line); }
.toc li { margin: 0; }
.toc a {
  display: block; padding: 6px 0; font-size: .86rem; line-height: 1.4; color: var(--ink-3); text-decoration: none;
  transition: color .25s var(--ease), translate .35s var(--ease);
}
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); translate: 3px 0; }
/* The marker slides to the section being read rather than blinking from one
   line to the next: it is the one thing in the margin that moves, and it moves
   because the reader did. */
.toc .mark {
  position: absolute; left: -1px; top: 0; width: 2px; height: var(--mh, 0); border-radius: 2px;
  background: var(--steel); box-shadow: 0 0 10px rgba(168, 189, 216, .6);
  translate: 0 var(--my, 0); transition: translate .5s var(--ease), height .5s var(--ease);
}
[dir="rtl"] .toc .mark { left: auto; right: -1px; }

/* --- the text ----------------------------------------------------------- */

.prose { counter-reset: part; }
.prose section.part { padding: 0; margin-top: 64px; scroll-margin-top: 90px; }
.prose section.part::before { display: none; }
.prose h2 {
  counter-increment: part;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.18; margin: 0 0 18px;
}
.prose h2::before {
  content: counter(part, decimal-leading-zero);
  display: block; margin-bottom: 12px;
  font-size: .78rem; letter-spacing: .04em; font-weight: 600; color: var(--steel); opacity: .74;
}
.js .prose h2.lines::before { margin-bottom: 12px; }
.prose p, .prose li { font-size: 1.04rem; line-height: 1.72; }
.prose p a, .prose li a { color: var(--steel); text-underline-offset: 3px; }
.prose h3 { font-size: 1.1rem; margin: 26px 0 8px; color: var(--ink); }

/* The direct answer, first. It is what a person who searched wanted, and what
   an assistant quotes - so it gets the strongest box on the page, with a label
   that says what it is. */
.answer {
  position: relative; margin: 46px 0 0; padding: 26px 28px 24px 30px;
  border-radius: 14px; border: 1px solid rgba(168, 189, 216, .2);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(168, 189, 216, .09), transparent 60%),
    var(--raise);
  overflow: hidden;
}
.answer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, #eef3f9, var(--steel) 50%, rgba(168, 189, 216, .2));
  transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.1s var(--ease) .25s;
}
.answer.in::before, html:not(.js) .answer::before { transform: none; }
.answer::after {
  /* The mark's highlight crossing the box once as it arrives. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(220, 234, 252, .07) 50%, transparent 62%);
  translate: -110% 0;
}
.js .answer.in::after { animation: sheen-wide 1.8s var(--ease) .4s both; }
@keyframes sheen-wide { to { translate: 110% 0; } }
.answer .label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: .76rem; letter-spacing: .05em; font-weight: 600; color: var(--steel);
}
.answer .label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--steel);
  box-shadow: 0 0 10px rgba(168, 189, 216, .8);
}
.answer p { color: var(--ink); font-size: 1.1rem; line-height: 1.62; margin: 0 0 10px; }
.answer p:last-child { margin-bottom: 0; }

/* Steps read as steps: a numbered stone each, on a thread that fills as the
   list is read - the same meter the landing page's long lists have, drawn
   through the numbers instead of beside them. */
.prose ol { list-style: none; counter-reset: step; margin: 22px 0 24px; padding: 0; position: relative; }
.prose ol > li { counter-increment: step; position: relative; padding: 2px 0 0 56px; margin: 0 0 20px; }
.prose ol > li:last-child { margin-bottom: 0; }
.prose ol > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; z-index: 1;
  display: grid; place-items: center; border-radius: 50%;
  font: 640 .9rem/1 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; color: var(--ink);
  background: linear-gradient(180deg, #232a35, #12161c);
  border: 1px solid rgba(168, 189, 216, .35);
  box-shadow: 0 0 0 5px var(--ground);
}
.prose ol::before, .prose ol::after {
  content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 1px;
  background: var(--line);
}
.prose ol::after {
  background: linear-gradient(180deg, var(--steel), rgba(168, 189, 216, .4));
  transform: scaleY(var(--p, 1)); transform-origin: 50% 0;
}
.js .prose ol::after { transform: scaleY(var(--p, 0)); }
[dir="rtl"] .prose ol > li { padding: 2px 56px 0 0; }
[dir="rtl"] .prose ol > li::before { left: auto; right: 0; }
[dir="rtl"] .prose ol::before, [dir="rtl"] .prose ol::after { left: auto; right: 17px; }

.prose ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 12px; }
.prose ul > li { position: relative; padding-left: 26px; margin: 0; color: var(--ink-2); }
.prose ul > li::before {
  content: ""; position: absolute; left: 3px; top: .72em; width: 7px; height: 7px;
  border: 1.5px solid var(--steel); rotate: 45deg; border-radius: 1px;
}
[dir="rtl"] .prose ul > li { padding: 0 26px 0 0; }
[dir="rtl"] .prose ul > li::before { left: auto; right: 3px; }
.prose li strong:first-child { color: var(--ink); }

/* Keys look like keys, and each one is pressed once as its paragraph arrives. */
kbd {
  display: inline-block; min-width: 1.9em; padding: .12em .5em .16em; margin: 0 .08em;
  font: 600 .84em/1.3 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; text-align: center;
  color: var(--ink); border-radius: 6px;
  background: linear-gradient(180deg, #2c333e, #181d25);
  border: 1px solid rgba(237, 241, 246, .18); border-bottom-width: 3px; border-bottom-color: rgba(0, 0, 0, .55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset;
  vertical-align: .06em;
}
.js .reveal.in kbd { animation: key-press .5s var(--ease) .55s both; }
@keyframes key-press {
  0%, 100% { translate: 0 0; border-bottom-width: 3px; }
  40% { translate: 0 2px; border-bottom-width: 1px; color: #fff; box-shadow: 0 0 14px rgba(168, 189, 216, .45); }
}

/* The part of the guide that is the product: set apart, on its own lit
   ground, because it is the answer to "can this happen by itself". */
.prose section.part#how {
  margin-top: 72px; padding: 34px 36px 32px; border-radius: 18px;
  border: 1px solid rgba(168, 189, 216, .18);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(116, 150, 200, .13), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  position: relative;
}
.prose section.part#how::after {
  content: ""; position: absolute; right: 26px; top: 26px; width: 40px; height: 40px;
  background: url(/assets/mark-small.webp) center / contain no-repeat; opacity: .9;
  rotate: calc(var(--scroll, 0) * 140deg);
}
[dir="rtl"] .prose section.part#how::after { right: auto; left: 26px; }
.prose section.part#how h2 { padding-right: 56px; }
.prose section.part#how ol > li::before { box-shadow: 0 0 0 5px #121720; }

/* Questions as questions: each one a hairline and a heading, no accordion -
   an answer behind a click is an answer a crawler and a skimmer both miss. */
.prose section.part#faq h3 {
  margin: 0; padding: 22px 0 8px; border-top: 1px solid var(--line-2);
  font-size: 1.08rem;
}
.prose section.part#faq h3:first-child { border-top: 0; padding-top: 4px; }

/* --- after the guide ----------------------------------------------------- */

.gpitch { position: relative; z-index: 2; padding: 30px 0 0; }
.gpitch .inner {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px;
  align-items: center; padding: 46px 48px; border-radius: 20px;
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(116, 150, 200, .16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
}
/* The rim of light that runs round the box once it is on screen - the
   landing page's figures have the same, so the box reads as one of the
   page's own frames and not as a banner. */
.gpitch .inner::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--rim, 0deg), transparent 0 70%, rgba(214, 228, 246, .7) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rim 7s linear infinite;
}
@property --rim { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rim { to { --rim: 360deg; } }
.gpitch .lockup { margin: 0; }
.gpitch .lockup .mark { width: clamp(84px, 9vw, 118px); }
.gpitch .slogan { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 14px; }
.gpitch p { max-width: 60ch; }
.gpitch .cta { justify-content: flex-start; margin: 22px 0 0; }

.gnext { position: relative; z-index: 2; padding: 76px 0 70px; }
.gnext .head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.gnext .head h2 { margin: 0; }
.gnext .all {
  color: var(--ink-2); text-decoration: none; font-size: .95rem; border-bottom: 1px solid var(--line);
  padding-bottom: 2px; transition: color .25s var(--ease), border-color .25s var(--ease);
}
.gnext .all:hover { color: var(--ink); border-color: var(--steel); }
.feat {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; margin-top: 30px;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink-2);
  background: var(--raise);
  transition: border-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.feat:hover, .feat:focus-visible {
  border-color: rgba(168, 189, 216, .32); transform: translateY(-3px);
  box-shadow: 0 34px 80px -40px rgba(0, 0, 0, .95);
}
.feat:focus-visible { outline: 2px solid var(--steel); outline-offset: 4px; }
.feat .scene { border-right: 1px solid var(--line); background: #0a0d11; }
[dir="rtl"] .feat .scene { border-right: 0; border-left: 1px solid var(--line); }
.feat .t { padding: 34px 34px 30px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.feat .t small { font-size: .78rem; letter-spacing: .05em; color: var(--steel); }
.feat .t b { color: var(--ink); font: 650 clamp(1.3rem, 2.2vw, 1.7rem)/1.22 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; letter-spacing: -.016em; }
.feat .t span { font-size: .98rem; line-height: 1.6; }
.gnext .glist { margin-top: 26px; }

/* ======================================================================
   NARROWER */

@media (max-width: 1080px) {
  .gpage { grid-template-columns: minmax(0, 1fr); column-gap: 0; max-width: 760px; }
  .gpage > *, .gpage > .crumbs, .gpage > .gno, .gpage > .plate, .gpage > .toc, .gpage > .prose { grid-column: 1; grid-row: auto; }
  .gpage > .gno { flex-direction: row; align-items: baseline; gap: 14px; padding: 0; margin-bottom: 14px; }
  .gno b { font-size: 2.2rem; }
  .gpage > .plate { margin: 36px -30px 0; border-radius: 0; border-left: 0; border-right: 0; }
  .gpage > .toc { position: static; margin-top: 38px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--raise); }
  .toc .mark { display: none; }
  .ghero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 44px; }
}
@media (max-width: 900px) {
  .glist.compact { grid-template-columns: minmax(0, 1fr); }
  .finder { top: 56px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 12, 15, .96); }
  .feat { grid-template-columns: minmax(0, 1fr); }
  .feat .scene { border-right: 0; border-bottom: 1px solid var(--line); }
  .gpitch .inner { grid-template-columns: minmax(0, 1fr); padding: 34px 26px; gap: 22px; }
}
@media (max-width: 700px) {
  .gpage { padding-top: 34px; }
  .gpage > .plate { margin-left: -20px; margin-right: -20px; }
  .grow, .glist.compact .grow { grid-template-columns: 34px minmax(0, 1fr) 112px; gap: 6px 14px; padding: 20px 4px; }
  .grow:hover, .grow:focus-visible { padding-left: 4px; }
  .grow .sum { display: none; }
  .grow .scene { border-radius: 8px; }
  .grow b { font-size: 1.02rem; }
  .finder { margin: 40px -20px 0; border-radius: 0; padding: 12px 20px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; width: calc(100% + 40px); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .search { flex: 1 1 100%; margin: 0; }
  .answer { padding: 22px 20px 20px 22px; }
  .prose section.part#how { padding: 26px 20px 24px; margin-left: -6px; margin-right: -6px; }
  .prose section.part#how::after { width: 30px; height: 30px; right: 16px; top: 18px; }
  .prose ol > li { padding-left: 48px; }
  .js .glist::before { left: -11px; }
}
@media (hover: none) {
  .grow:hover { background: none; }
  .grow:hover .scene { transform: none; box-shadow: none; }
}

/* ======================================================================
   STILL

   Somebody who asked their system not to move things still gets every
   picture - at its answer, which is the state worth looking at - and every
   box drawn. Nothing loops, nothing slides, nothing follows the pointer. */
@media (prefers-reduced-motion: reduce) {
  .sc-board i, .sc-board i::before, .sc-board i::after, .sc-board svg * { animation: none !important; }
  .grow, .grow::before, .grow .scene, .grow b::after, .feat, .toc a, .toc .mark, .answer::before { transition: none; }
  .answer::before { transform: none; }
  .js .answer.in::after, .js .reveal.in kbd, .gpitch .inner::before { animation: none; }
  .js .prose ol::after, .js .glist::before { transform: none; }
}

/* Japanese has no spaces, so a heading broke inside a word ("キ / ー").
   `auto-phrase` breaks between phrases instead, where the browser knows how. */
:lang(ja) h1, :lang(ja) h2, :lang(ja) .grow b, :lang(ja) .feat b { word-break: auto-phrase; }