/* Polar Bear Audio -------------------------------------------------------
   Light, arctic. The palette is still the six brand colours from
   brand/BRAND.md in the drummatch repo, used the other way up: ice is the
   ground, navy is the ink, glacial carries secondary text, frost draws the
   hairlines. Drum Match itself stays dark: the plugin panel, the waveform
   scene and the waitlist card are its world, set into the ice.

   Teal is still the reward. On a light ground it is too pale to be text, so
   here it is only ever a fill (with navy on it) or a signal on navy. */

@font-face{font-family:"Inter";src:url(/assets/font/inter.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;

  --navy:#0B1D2E;
  --glacial:#1E4E6B;
  --ice:#F4F9FC;
  --frost:#8FB3C7;
  --teal:#3DDCB4;
  --amber:#E8A13C;

  /* derivations, all mixed from the six */
  --snow:#fff;                                   /* tiles: the brightest ice */
  --hair:rgba(143,179,199,.32);                  /* frost hairline, on light */
  --hair-dk:rgba(143,179,199,.22);               /* frost hairline, on navy  */
  --surface-dk:rgba(30,78,107,.16);
  --inset:#071827;
  --ink-2:var(--glacial);                        /* secondary text on light  */
  --ink-dim:rgba(11,29,46,.14);                  /* unlit words              */

  --font:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:72rem;
  --gutter:clamp(1rem,5vw,2.5rem);
  --sect:clamp(5rem,12vw,10rem);
  --nav-h:3.5rem;

  /* Apple's curves: a long, soft deceleration for things arriving */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 1rem);
  /* What iOS shows when the page bounces past either end. Ice by default; the
     footer's navy once the reader is in the lower half (.at-end, set by the
     script), so a bounce at the bottom no longer flashes white under the
     dark footer, which made the footer seem to jump. */
  background:var(--ice)}
html.at-end{background:var(--inset)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--ice);color:var(--navy);
  font:400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--glacial);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--glacial);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--navy);color:var(--ice);
  padding:.7rem 1.1rem;font-weight:500}
.skip:focus{left:0}

/* type -------------------------------------------------------------------
   Numbers are load-bearing in this brand and get tabular figures wherever they
   are read as numbers. Not document-wide: Inter's tabular set also widens the
   hyphen, which spaced out words like "pitch-shifting". */
.readout dd,.fig span,.dial-v,.big,.tnum,.joke{font-variant-numeric:tabular-nums}
/* type ------------------------------------------------------------------- */
h1{font-weight:500;font-size:clamp(4rem,1.4rem + 10vw,9.5rem);line-height:.95;letter-spacing:-.045em}
h2{font-weight:500;font-size:clamp(2.2rem,1.2rem + 4vw,4.5rem);line-height:1.04;letter-spacing:-.035em}
h3{font-weight:500;font-size:1.3rem;line-height:1.25;letter-spacing:-.015em}
p{color:var(--ink-2);max-width:60ch}
.lead{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.45;letter-spacing:-.01em;color:var(--ink-2)}
.kicker{font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--glacial);
  margin-bottom:1.1rem}

/* the marks -----------------------------------------------------------------
   The bear and the Drum Match glyph as plain images, in navy for light grounds
   and ice for dark ones, made from the brand files (tools in the README). They
   used to be drawn through CSS masks; iOS's full-page capture and printing drop
   masks and showed a solid rectangle, so plain images it is. */
.bear,.glyph{display:inline-block;background:center/contain no-repeat}
.bear{background-image:url(/assets/img/bear-navy.png);width:2.1rem;aspect-ratio:873/556}
.glyph{background-image:url(/assets/img/glyph-navy.png);width:1.6rem;aspect-ratio:408/208}
/* on navy, the ice versions */
.nav.dark .bear,.night .bear{background-image:url(/assets/img/bear-ice.png)}
.card .glyph{background-image:url(/assets/img/glyph-ice.png)}

/* buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:500 1.0625rem/1 var(--font);letter-spacing:-.005em;
  padding:1em 1.6em;border-radius:999px;border:0;cursor:pointer;
  background:var(--teal);color:var(--navy);text-decoration:none;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),filter .2s ease}
.btn:hover{text-decoration:none;filter:brightness(1.04);
  box-shadow:0 10px 30px -10px rgba(61,220,180,.7)}
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn[disabled]{opacity:.6;cursor:progress}
.more{font-weight:500;font-size:1.0625rem;color:var(--glacial);display:inline-flex;align-items:center;gap:.3em}
.more::after{content:"";width:.45em;height:.45em;border:solid currentColor;border-width:1.5px 1.5px 0 0;
  transform:rotate(45deg);transition:transform .3s var(--ease-out)}
.more:hover::after{transform:translateX(3px) rotate(45deg)}

/* nav: a thin sheet of ice ---------------------------------------------------
   Apple's bars are frosted glass: milky, heavily blurred. Ice is clearer and
   colder, so this blurs less and tints toward glacial blue, then adds what
   glass does not have: a fine crystalline grain, a few hairline fractures,
   and a bright edge where the light catches it. The glint along that edge
   drifts with the scroll position (--g, set by the script). All of it is
   kept faint; the page should read "ice" without anyone stopping to look. */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(222,238,246,.42));
  -webkit-backdrop-filter:blur(9px) saturate(150%) brightness(1.04);
  backdrop-filter:blur(9px) saturate(150%) brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(143,179,199,.0);
  transition:background .4s ease,box-shadow .4s ease}
/* grain and fractures, under the content */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(/assets/img/ice-cracks.svg) 0 0/1600px 100% repeat-x,
             url(/assets/img/ice-grain.svg) 0 0/180px 180px;
  opacity:.5;mix-blend-mode:soft-light;transition:opacity .4s ease}
/* the lit edge: a cold hairline with a brighter glint sliding along it */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:
    radial-gradient(18% 100% at calc(var(--g,.3) * 100%) 50%,rgba(255,255,255,1),rgba(255,255,255,0)),
    linear-gradient(90deg,rgba(143,179,199,.15),rgba(143,179,199,.55) 30%,rgba(190,225,240,.7) 50%,rgba(143,179,199,.55) 70%,rgba(143,179,199,.15));
  opacity:.55;transition:opacity .4s ease}
.nav.solid{background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(222,238,246,.56))}
.nav.solid::before{opacity:.7}
.nav.solid::after{opacity:1}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:100%}
/* dark ice over Drum Match's sections: navy water frozen clear */
.nav.dark{background:linear-gradient(180deg,rgba(30,78,107,.62),rgba(11,29,46,.7));
  box-shadow:inset 0 1px 0 rgba(143,179,199,.35)}
.nav.dark::before{opacity:.22;mix-blend-mode:overlay}
.nav.dark::after{opacity:.8}
.nav.dark .brand,.nav.dark .links a{color:var(--ice)}
.nav.dark .wm span{color:var(--frost)}
.nav.dark .links .pill{background:var(--ice);color:var(--navy)}
.nav .brand,.nav .links a,.nav .wm span{transition:color .4s ease,background .4s ease,opacity .2s ease}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--navy);text-decoration:none}
.brand:hover{text-decoration:none}
.brand .bear{transition:opacity .5s ease,transform .5s var(--ease-out)}
.nav.no-bear .brand .bear{opacity:0;transform:translateY(-4px)}
.wm{font-weight:500;font-size:1rem;letter-spacing:-.01em;white-space:nowrap}
.wm span{color:var(--glacial)}
.links{display:flex;align-items:center;gap:1.9rem;font-size:.875rem}
.links a{color:var(--navy);opacity:.8;transition:opacity .2s ease}
.links a:hover{opacity:1;text-decoration:none}
.links .pill{opacity:1;background:var(--navy);color:var(--ice);padding:.45rem .95rem;border-radius:999px;
  font-weight:500;transition:transform .3s var(--ease-out),background .2s ease}
.links .pill:hover{background:var(--glacial)}
.links .pill:active{transform:scale(.96)}
@media (max-width:720px){
  .links a:not(.pill){display:none}
  .links{gap:.35rem}
  .links .pill{padding:.4rem .8rem;font-size:.8125rem}
}
@media (max-width:430px){.wm span{display:none}}

/* the phone menu --------------------------------------------------------------
   Two lines that become a cross; under the nav, a frosted sheet with the
   sections in large type over a dimmed page. Only where script runs, and only
   on phones. The nav's backdrop-filter makes it the containing block for its
   fixed children, so the menu's height comes from the viewport, not bottom:0. */
.menu-btn{display:none}
@media (max-width:720px) and (scripting:enabled){
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;position:relative;width:36px;height:36px;
    margin-right:-6px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:8px;color:var(--navy)}
}
.menu-btn span{position:absolute;left:10px;right:10px;height:1.5px;border-radius:2px;background:currentColor;
  transition:transform .35s var(--ease-out),top .35s var(--ease-out)}
.menu-btn span:first-child{top:14px}
.menu-btn span:last-child{top:20px}
.menu-btn[aria-expanded="true"] span:first-child{top:17px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{top:17px;transform:rotate(-45deg)}
.menu-btn:focus-visible{outline:2px solid var(--glacial);outline-offset:2px}
.nav.dark .menu-btn{color:var(--ice)}
.nav.dark .menu-btn:focus-visible{outline-color:var(--teal)}

.menu{position:absolute;left:0;right:0;top:var(--nav-h);height:calc(100svh - var(--nav-h));
  background:rgba(11,29,46,0);transition:background .35s ease}
.menu[hidden]{display:none}
.menu.open{background:rgba(11,29,46,.28)}
.menu-sheet{display:grid;padding:.6rem var(--gutter) 1.4rem;
  background:rgba(244,249,252,.98);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);box-shadow:0 24px 40px -24px rgba(11,29,46,.35);
  transform:translateY(-6px);opacity:0;transition:transform .4s var(--ease-out),opacity .3s ease}
.menu.open .menu-sheet{transform:none;opacity:1}
.menu-sheet a{display:block;padding:.75rem 0;font-size:1.6rem;font-weight:500;letter-spacing:-.02em;color:var(--navy);
  border-bottom:1px solid var(--hair);opacity:0;transform:translateY(-4px);
  transition:opacity .35s ease,transform .45s var(--ease-out);transition-delay:calc(var(--i,0) * 40ms + 60ms)}
.menu-sheet a:last-child{border-bottom:0}
.menu-sheet a:hover{text-decoration:none;color:var(--glacial)}
.menu.open .menu-sheet a{opacity:1;transform:none}
.nav.dark .menu-sheet{background:rgba(11,29,46,.98);border-bottom-color:var(--hair-dk)}
.nav.dark .menu-sheet a{color:var(--ice);border-bottom-color:var(--hair-dk)}
.nav.dark .menu-sheet a:hover{color:var(--frost)}
html.menu-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .menu,.menu-sheet,.menu-sheet a,.menu-btn span{transition:none}
}

/* 1. hero ------------------------------------------------------------------
   Without JavaScript it is a plain stack: copy, then the panel. With it, the
   section grows tall and the stage pins, so scrolling drives --e from 0 to 1. */
.hero{position:relative}
.hero .stage{position:relative;overflow:clip;padding:calc(var(--nav-h) + clamp(3rem,9vh,6rem)) 0 clamp(3rem,8vw,6rem)}
.hero-copy{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.product{display:flex;align-items:center;gap:.6rem;font-weight:500;font-size:clamp(1.05rem,.9rem + .6vw,1.4rem);
  letter-spacing:-.01em;color:var(--navy);margin-bottom:.6rem}
.product .glyph{width:2.1rem}
.hero h1{background:linear-gradient(180deg,var(--navy) 30%,var(--glacial));
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.hero .lead{margin-top:1.4rem;max-width:34ch}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2rem;margin-top:2rem}

/* The aurora: the only gradient decoration on the site, and only here. Soft,
   slow and well under a tenth of the screen in teal. */
.aurora{position:absolute;inset:-10% -10% auto;height:85%;z-index:0;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px)}
.aurora i:nth-child(1){width:46vw;height:30vw;left:6%;top:4%;background:var(--teal);opacity:.16}
.aurora i:nth-child(2){width:52vw;height:34vw;right:2%;top:-6%;background:var(--frost);opacity:.45}
.aurora i:nth-child(3){width:36vw;height:22vw;left:38%;top:30%;background:var(--glacial);opacity:.10}

.device{position:relative;z-index:1;margin:clamp(3rem,7vw,5rem) auto 0;
  width:min(1160px,92vw);perspective:2200px}
.screen{border-radius:clamp(8px,1.2vw,16px);overflow:hidden;background:var(--navy);
  box-shadow:0 0 0 1px rgba(11,29,46,.08),0 2px 6px rgba(11,29,46,.08),
             0 50px 100px -30px rgba(11,29,46,.45),0 30px 60px -40px rgba(30,78,107,.5);
  transform-origin:50% 100%}
.screen img{width:100%}
/* the panel stands on the ice: a faint reflection, then the shelf it sits on */
.reflect{position:absolute;left:0;right:0;top:calc(100% + 2px);aspect-ratio:1160/150;overflow:hidden;opacity:.09;transform-origin:50% 0;
  border-radius:16px 16px 0 0;
  filter:blur(1.5px);
  -webkit-mask:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 80%);mask:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 80%)}
.reflect img{position:absolute;left:0;top:0;width:100%;transform:scaleY(-1)}
.shelf{position:absolute;left:-14%;right:-14%;top:70%;height:60%;z-index:-1;
  background:radial-gradient(60% 50% at 50% 40%,var(--snow),rgba(255,255,255,0) 70%)}
/* faded copy steps out of the way of the panel */
.hero.copy-gone .hero-copy{pointer-events:none}
/* Faded but still there for screen readers (it holds the page's h1). If a
   keyboard user tabs into its links, it comes back into view, so focus is
   never on something invisible. */
.hero.copy-gone .hero-copy:focus-within{opacity:1;filter:none;transform:none;pointer-events:auto}

/* the panel's tabs work: invisible buttons laid exactly over the four tabs
   in the image (positions measured from screenshots of the plugin, v0.1.0), a caption
   under the panel, and a prompt that appears once the panel is flat */
.screen{position:relative;aspect-ratio:1160/760}
.screen .pg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s var(--ease)}
.screen .pg.on{opacity:1}
.tabs-hit{position:absolute;left:28.36%;top:4.8%;width:33.19%;height:3.75%;display:flex;z-index:2}
.tab-hit{position:relative;flex:1;min-width:0;margin:0;padding:0;border:0;border-radius:3px;background:transparent;cursor:pointer;
  /* the label is for screen readers only: at size 0 it still names the tab
     but cannot widen it (on phones it did, so the targets drifted right) */
  font-size:0;overflow:hidden;color:transparent;transition:background .25s ease}
.tab-hit::after{content:"";position:absolute;inset:-14px 0}          /* a finger-sized target */
.tab-hit:hover{background:rgba(244,249,252,.08)}
.tab-hit:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
/* while prompting, a faint ring travels across the four tabs */
.tab-hit::before{content:"";position:absolute;inset:0;border-radius:3px;box-shadow:0 0 0 1.5px var(--teal);opacity:0;pointer-events:none}
.hero.hint .tab-hit::before{animation:tabpulse 2.4s var(--ease) infinite;animation-delay:calc(var(--i) * .18s + .6s)}
@keyframes tabpulse{0%,100%{opacity:0}18%{opacity:.85}45%{opacity:0}}

.try{position:absolute;left:45%;bottom:calc(100% + .9rem);z-index:3;pointer-events:none;
  transform:translate(-50%,8px);opacity:0;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.hero.hint .try{opacity:1;transform:translate(-50%,0);transition-delay:.35s}
.try span{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-size:.875rem;font-weight:500;color:var(--navy);padding:.5rem .95rem;border-radius:999px;
  background:linear-gradient(180deg,#fff,rgba(222,238,246,.92));border:1px solid rgba(143,179,199,.45);
  box-shadow:inset 0 1px 0 #fff,0 10px 26px -10px rgba(30,78,107,.45)}
.try span::after{content:"";width:.4em;height:.4em;border:solid var(--glacial);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
@media (prefers-reduced-motion:no-preference){.hero.hint .try span{animation:bob 2.2s ease-in-out infinite}}
@keyframes bob{50%{transform:translateY(-4px)}}

.tab-cap{position:absolute;left:50%;top:calc(100% + 1.1rem);transform:translateX(-50%);width:max-content;
  max-width:min(92vw,46rem);text-align:center;font-size:.9375rem;line-height:1.45;color:var(--navy);
  /* navy, not glacial: on phones the caption sits over the panel's reflection */
  transition:opacity .3s ease}
.tab-cap b{font-weight:500;color:var(--navy)}
.tab-cap.swap{opacity:0}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .tab-cap{opacity:clamp(0,calc((var(--e,0) - .85) * 6.67),1)}
  .tab-cap.swap{opacity:0}
}
/* on phones the reflection is too small to read as one, and the caption sits
   over it, so it goes */
@media (max-width:720px){.tab-cap{font-size:.875rem}.reflect{display:none}
  /* phones: too small to invite tab-clicking, so no prompt and no ring */
  .try{display:none}.hero.hint .tab-hit::before{animation:none}}
.under{text-align:center;font-size:.9375rem;color:var(--ink-2);margin-top:clamp(1rem,3vw,2rem)}

/* pinned version. Gated on a media query rather than a class the script
   adds, so the first paint is already the pinned layout. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.hero{height:240svh}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.hero .stage{position:sticky;top:0;height:100svh;padding:0;display:grid;place-items:start center}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.hero-copy{padding-top:calc(var(--nav-h) + clamp(2.5rem,10svh,7rem));
  opacity:calc(1 - var(--e,0) * 1.8);
  transform:translateY(calc(var(--e,0) * -9svh)) scale(calc(1 - var(--e,0) * .05));
  filter:blur(calc(var(--e,0) * 10px))}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.aurora{opacity:calc(1 - var(--e,0) * .7);transform:translateY(calc(var(--e,0) * -10svh))}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.device{position:absolute;left:50%;top:calc(50% + var(--nav-h) / 2);margin:0;
  /* flat, it fits the screen; tilted, it starts lower and further back */
  width:min(1160px,92vw,calc((100svh - var(--nav-h) - 8rem) * 1.5263));
  transform:translate(-50%,-50%) translateY(calc((1 - var(--e,0)) * var(--drop,38svh)))
            scale(calc(.8 + var(--e,0) * .2))}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.screen{transform:rotateX(calc((1 - var(--e,0)) * 34deg))}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.reflect{transform:rotateX(calc((1 - var(--e,0)) * -34deg));
  opacity:calc(.03 + var(--e,0) * .07)}}
/* On phones the panel fits the page's own margins. */
@media (max-width:720px){
  .device{width:calc(100vw - 2 * var(--gutter))}
  @media (scripting:enabled) and (prefers-reduced-motion:no-preference){
    .hero{height:200svh}
    .device{--drop:22svh;width:calc(100vw - 2 * var(--gutter));margin:0}
  }
}

/* 2. the statement ----------------------------------------------------------- */
.why{padding:var(--sect) 0 calc(var(--sect) * .8)}
.statement{font-weight:500;font-size:clamp(1.75rem,.9rem + 3.4vw,3.6rem);line-height:1.12;letter-spacing:-.03em;
  color:var(--navy);max-width:24ch}
.statement .w{transition:color .25s linear}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.statement .w{color:var(--ink-dim)}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.statement .w.lit{color:var(--navy)}}

/* 3. the swing: dark, pinned ------------------------------------------------- */
.swing{background:var(--navy);color:var(--ice);position:relative}
.swing .stage{padding:var(--sect) 0}
.swing-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.swing h2{color:var(--ice);margin-bottom:clamp(1.5rem,4vh,2.5rem)}
.swing .kicker{color:var(--teal)}
.swing p{color:var(--frost)}
.steps{display:grid;gap:1.4rem;counter-reset:s}
.steps li{position:relative;padding-left:1.4rem;transition:opacity .5s var(--ease)}
.steps li::before{content:"";position:absolute;left:0;top:.35rem;bottom:.2rem;width:2px;border-radius:2px;
  background:var(--hair-dk)}
.steps li::after{content:"";position:absolute;left:0;top:.35rem;width:2px;border-radius:2px;
  height:calc((100% - .55rem) * var(--fill,1));background:var(--teal)}
.steps h3{color:var(--ice);margin-bottom:.35rem}
.steps p{font-size:1rem}
/* Steps not yet reached are dimmed, but only as far as their text still reads
   at 4.5:1 (frost on navy at 75% opacity is 4.9:1); the current one also
   brightens, so the difference stays clear. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.steps li{opacity:.75}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.steps li.on p{color:rgba(244,249,252,.86)}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.steps li.on{opacity:1}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.steps li:not(.on)::after{opacity:0}}

.scope{background:var(--inset);border:1px solid var(--hair-dk);border-radius:22px;padding:clamp(1rem,2.4vw,1.6rem)}
.scope-head{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-bottom:.8rem}
.legend{display:inline-flex;align-items:center;gap:.45rem;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--frost)}
.legend i{width:14px;height:2px;border-radius:2px}
.k-live{background:var(--frost)}
.k-smp{background:var(--teal)}
.k-sum{background:var(--ice)}
#wave{width:100%;height:auto;aspect-ratio:720/420;display:block}
/* your turn: the curve with a slider laid over it */
.tune{margin-top:.6rem}
.tune-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.4rem}
.tune-head label{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--frost)}
.flip{white-space:nowrap;flex:none;font:500 .75rem/1 var(--font);letter-spacing:.06em;color:var(--frost);background:transparent;cursor:pointer;
  border:1px solid var(--hair-dk);border-radius:999px;padding:.45rem .8rem;transition:color .2s ease,border-color .2s ease,background .2s ease}
.flip:hover{color:var(--ice);border-color:rgba(143,179,199,.45)}
.flip[aria-pressed="true"]{color:var(--teal);border-color:rgba(61,220,180,.55)}
.flip:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.tune-track{position:relative;height:clamp(46px,6vw,64px);border:1px solid var(--hair-dk);border-radius:10px;background:var(--inset)}
.tune-curve{position:absolute;inset:0;width:100%;height:100%;display:block}
.tune-track input{position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;cursor:ew-resize;
  -webkit-appearance:none;appearance:none}
.tune-track input::-webkit-slider-runnable-track{height:100%;background:transparent}
.tune-track input::-moz-range-track{height:100%;background:transparent}
/* the thumb is a tall, almost invisible handle: the marker itself is drawn
   on the curve, where the plugin draws it */
.tune-track input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:100%;background:transparent;border:0}
.tune-track input::-moz-range-thumb{width:22px;height:100%;background:transparent;border:0}
.tune-track input:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:10px}
.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1rem;background:var(--hair-dk);
  border:1px solid var(--hair-dk);border-radius:12px;overflow:hidden}
.readout div{background:var(--inset);padding:.75rem .9rem;min-width:0}
@media (max-width:420px){.readout div{padding:.6rem .65rem}.readout dt{letter-spacing:.1em}}
.readout dt{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--frost)}
.readout dd{white-space:nowrap;font-size:clamp(.95rem,.75rem + .8vw,1.5rem);font-weight:500;color:var(--ice);letter-spacing:-.01em;margin-top:.15rem}
.readout dd.good{color:var(--teal)}
.scope figcaption{font-size:.8125rem;line-height:1.5;color:var(--frost);margin-top:.9rem}

@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.swing{height:340svh}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.swing .stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 1rem) 0 1rem}}

@media (max-width:900px){
  .swing-grid{grid-template-columns:1fr;gap:1.25rem}
  .swing h2{font-size:clamp(1.8rem,1.2rem + 3vw,2.6rem);margin-bottom:1rem}
  .swing .kicker{margin-bottom:.5rem}
  .swing-copy{order:2}
  /* on a phone the steps take turns in one place instead of listing */
  @media (scripting:enabled) and (prefers-reduced-motion:no-preference){.steps{display:grid}}
  @media (scripting:enabled) and (prefers-reduced-motion:no-preference){.steps li{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease-out)}}
  @media (scripting:enabled) and (prefers-reduced-motion:no-preference){.steps li.on{opacity:1;transform:none}}
  @media (scripting:enabled) and (prefers-reduced-motion:no-preference){.swing h2{display:none}}
  .scope figcaption{display:none}
  .readout{margin-top:.6rem}
}
/* short phone screens: the pinned scene has to fit in one, under the nav */
@media (max-width:900px) and (max-height:700px){
  .steps p{font-size:.9375rem}
  #wave{aspect-ratio:720/250}
  .scope{padding:.8rem}
  .scope-head{margin-bottom:.4rem}
  .tune-track{height:40px}
  .readout dd{font-size:.9rem}
  .readout div{padding:.45rem .6rem}
}

/* 3b. listen: still Drum Match's dark world ------------------------------------ */
.listen{background:var(--navy);color:var(--ice);padding:calc(var(--sect) * .5) 0 var(--sect)}
.listen h2{color:var(--ice)}
.listen .kicker{color:var(--teal)}
.listen .lead{color:var(--frost);margin-top:1rem;max-width:40ch}
.player{margin-top:clamp(2rem,5vw,3.5rem);background:var(--inset);border:1px solid var(--hair-dk);
  border-radius:28px;padding:clamp(1.1rem,3vw,2rem)}
.pl-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}

/* the play button is this screen's one teal fill */
.play{display:inline-flex;align-items:center;gap:.75rem;border:0;cursor:pointer;
  background:var(--teal);color:var(--navy);font:500 1.0625rem/1 var(--font);
  padding:.55rem 1.4rem .55rem .55rem;border-radius:999px;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.play:hover{box-shadow:0 10px 30px -10px rgba(61,220,180,.7)}
.play:active{transform:scale(.96);transition-duration:.1s}
.play-ico{position:relative;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--navy)}
.play-ico::before{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:.5rem 0 .5rem .8rem;border-color:transparent transparent transparent var(--teal)}
.play[aria-pressed="true"] .play-ico::before{left:50%;width:.75rem;height:.75rem;border:0;background:var(--teal);border-radius:2px}
.play.loading .play-ico::before{left:50%;width:1.1rem;height:1.1rem;border:2px solid rgba(61,220,180,.3);
  border-top-color:var(--teal);border-radius:50%;background:none;animation:spin .8s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* segmented control: two radios with a sliding thumb */
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:0;padding:4px;border:1px solid var(--hair-dk);
  border-radius:999px;background:var(--surface-dk);min-width:min(100%,19rem)}
.seg label{position:relative;z-index:1;cursor:pointer;text-align:center}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;padding:.6rem 1rem;font-size:.9375rem;font-weight:500;color:var(--frost);
  border-radius:999px;transition:color .3s ease}
.seg input:checked+span{color:var(--navy)}
.seg input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--ice);
  transition:transform .45s var(--ease-out)}
.seg:has(input[value="b"]:checked) .seg-thumb{transform:translateX(100%)}

.pl-wave{display:block;width:100%;height:auto;aspect-ratio:960/200;margin-top:1.4rem}
.pl-read{margin-top:1rem}
.pl-foot{display:flex;align-items:flex-start;gap:1.2rem;margin-top:1.2rem;flex-wrap:wrap}
.pl-note{font-size:.875rem;line-height:1.5;color:var(--frost);flex:1;min-width:15rem;max-width:62ch}
.pl-src{font-size:.8125rem;line-height:1.5;color:rgba(143,179,199,.8);margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hair-dk);max-width:none}

/* switch */
.sw{display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;font-size:.9375rem;font-weight:500;color:var(--ice);
  white-space:nowrap;position:relative}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw-track{position:relative;width:2.75rem;height:1.6rem;border-radius:999px;background:var(--glacial);transition:background .3s ease}
.sw-track::after{content:"";position:absolute;top:3px;left:3px;width:calc(1.6rem - 6px);height:calc(1.6rem - 6px);border-radius:50%;
  background:var(--ice);transition:transform .35s var(--ease-out)}
.sw input:checked+.sw-track{background:var(--frost)}
.sw input:checked+.sw-track::after{transform:translateX(1.15rem)}
.sw input:focus-visible+.sw-track{outline:2px solid var(--teal);outline-offset:3px}
@media (max-width:560px){.pl-top{flex-direction:column;align-items:stretch}.play{justify-content:center}}

/* 4. bento ------------------------------------------------------------------- */
.changes{padding:var(--sect) 0}
.changes h2 span{color:var(--glacial)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.75rem,1.6vw,1.25rem);margin-top:clamp(2.5rem,6vw,4.5rem)}
.tile{position:relative;background:var(--snow);border:1px solid var(--hair);border-radius:28px;
  padding:clamp(1.5rem,3vw,2.4rem);overflow:hidden;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(30,78,107,.35)}
.tile h3{font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);margin-bottom:.6rem}
.tile p{font-size:1rem}
.tnum{font-size:.75rem;font-weight:500;letter-spacing:.16em;color:var(--glacial);margin-bottom:1.4rem}
.tnum::before{content:"0"}
.t-speed{grid-column:span 4;display:grid;grid-template-columns:1fr auto;gap:0 2.5rem;align-items:end}
.t-speed>*:not(.dial){grid-column:1}
.t-speed .dial{grid-column:2;grid-row:1/span 3}
.t-pol{grid-column:span 2}
.t-low,.t-never,.t-no,.t-kit{grid-column:span 3}
.fig{margin-top:1.4rem;color:var(--glacial);font-size:.9375rem}
.fig span{display:block;font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);font-weight:500;letter-spacing:-.04em;
  line-height:1;color:var(--navy);margin-bottom:.4rem}

.dial{display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:12rem}
.dial-v{font-size:clamp(4rem,2rem + 6vw,7.5rem);font-weight:500;letter-spacing:-.06em;line-height:.9;color:var(--navy)}
.dial-u{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--glacial);margin-top:.5rem}
.dial-r{position:relative;margin-top:1.6rem;width:100%;min-width:12rem;padding-top:1.1rem;font-size:.75rem;color:var(--glacial)}
/* a ruler of the search range with the answer marked on it */
.dial-r::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;
  background:repeating-linear-gradient(90deg,var(--frost) 0 1px,transparent 1px 8.33%);
  -webkit-mask:linear-gradient(90deg,transparent,#000 15% 85%,transparent);mask:linear-gradient(90deg,transparent,#000 15% 85%,transparent)}
.dial-r::after{content:"";position:absolute;left:calc(50% - 1.5px);top:-5px;width:3px;height:19px;border-radius:2px;background:var(--teal);
  box-shadow:0 0 0 3px var(--snow)}

.nomatch{display:inline-flex;align-items:center;gap:.4em;font-weight:500;color:var(--navy);white-space:nowrap}
.nomatch::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--amber)}
.kit{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1.1rem}
.kit li{font-size:.875rem;font-weight:500;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--hair);background:var(--ice)}

@media (max-width:1000px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .t-speed{grid-column:span 2}
  .t-pol,.t-low,.t-never,.t-no,.t-kit{grid-column:span 1}
  .t-kit{grid-column:span 2}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .t-speed,.t-pol,.t-low,.t-never,.t-no,.t-kit{grid-column:auto}
  .t-speed{display:block}
  .dial{align-items:flex-start;text-align:left;margin-top:1.8rem}
}

/* 5. proof ------------------------------------------------------------------- */
.proof{padding:calc(var(--sect) * .6) 0 var(--sect);text-align:center}
.proof .wrap{display:flex;flex-direction:column;align-items:center}
.proof .big{font-size:clamp(4.5rem,1.5rem + 12vw,11rem);line-height:.9;letter-spacing:-.06em;
  background:linear-gradient(180deg,var(--navy) 35%,var(--glacial));
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.proof .lead{margin-top:1.5rem;max-width:36ch}

/* 5b. the story: a short letter, signed ------------------------------------- */
.story{padding:0 0 var(--sect)}
.story .wrap{max-width:46rem}
.story h2{margin-bottom:clamp(1.4rem,3vw,2rem)}
.letter p{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.55;letter-spacing:-.01em;color:var(--navy);max-width:none}
.letter p+p{margin-top:1.1rem}
.letter .sign{display:flex;flex-direction:column;gap:.15rem;margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--hair);
  font-size:1rem;line-height:1.35}
.sign .who{font-weight:500;color:var(--navy)}
.sign .org{color:var(--ink-2);font-size:.9375rem}

/* 6. waitlist ---------------------------------------------------------------- */
.waitlist{padding:0 0 var(--sect)}
.card{background:var(--navy);color:var(--ice);border-radius:clamp(24px,3vw,36px);text-align:center;
  padding:clamp(3rem,8vw,6rem) clamp(1.25rem,5vw,4rem);display:flex;flex-direction:column;align-items:center}
.card .glyph{width:3rem;margin-bottom:1.6rem}
.card h2{color:var(--ice)}
.card p{color:var(--frost);margin-top:.8rem}
#sub[hidden]{display:none}
#sub .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#sub .cf-turnstile{width:100%;display:flex;justify-content:center}
#sub .cf-turnstile:empty{display:none}
#sub{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem;width:100%;max-width:30rem}
#sub input{flex:1;min-width:0;font:400 1.0625rem/1 var(--font);color:var(--ice);
  background:var(--surface-dk);border:1px solid var(--hair-dk);border-radius:999px;padding:1em 1.3em;
  transition:border-color .2s ease,box-shadow .2s ease}
#sub input::placeholder{color:rgba(143,179,199,.7)}
#sub input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(61,220,180,.18)}
#sub input[aria-invalid="true"]{border-color:var(--amber)}
.card .promise{font-size:.875rem;max-width:42ch;margin-top:1.1rem}
.card .fine{font-size:.8125rem;margin-top:.5rem}
.card .fine a{color:var(--frost);text-decoration:underline;text-underline-offset:.18em;text-decoration-color:rgba(143,179,199,.45)}
.card .fine a:hover{color:var(--ice)}
.card .promise.bad{color:var(--amber)}
.card .promise.good{color:var(--teal)}
.card :focus-visible{outline-color:var(--teal)}
/* stacked on phones; no wrapping here, or the field keeps its natural width */
@media (max-width:520px){#sub{flex-direction:column;flex-wrap:nowrap}#sub .btn{width:100%}}

/* the two optional questions, shown only once someone is on the list */
.more-q{width:100%;max-width:34rem;margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--hair-dk);text-align:left}
.more-q[hidden]{display:none}
.more-h{color:var(--ice);font-size:.9375rem;margin:0 auto 1.1rem;text-align:center;max-width:none}
.chips{border:0;margin:0 0 1.1rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.chips legend{padding:0;margin-bottom:.55rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--frost)}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:block;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--hair-dk);background:var(--surface-dk);
  font-size:.875rem;color:var(--frost);transition:background .2s ease,color .2s ease,border-color .2s ease}
.chips label:hover span{color:var(--ice);border-color:rgba(143,179,199,.45)}
.chips input:checked+span{background:var(--ice);border-color:var(--ice);color:var(--navy)}
.chips input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}
.name-q{display:block;margin:0 0 1.1rem}
.name-q span{display:block;margin-bottom:.55rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--frost)}
.name-q input{width:100%;max-width:18rem;font:400 1rem/1 var(--font);color:var(--ice);background:var(--surface-dk);
  border:1px solid var(--hair-dk);border-radius:999px;padding:.75em 1.1em;transition:border-color .2s ease,box-shadow .2s ease}
.name-q input::placeholder{color:rgba(143,179,199,.7)}
.name-q input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(61,220,180,.18)}
.tester{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.9375rem;color:var(--ice);margin:.2rem 0 1.3rem}
.tester input{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--teal)}
.more-go{display:flex;align-items:center;gap:1.2rem;max-width:none}
.more-go .btn{padding:.8em 1.6em}
.skip-q{background:none;border:0;padding:.4rem;font:500 .9375rem var(--font);color:var(--frost);cursor:pointer}
.skip-q:hover{color:var(--ice)}

/* 7. faq --------------------------------------------------------------------- */
.faq{padding:0 0 var(--sect)}
.qs{margin-top:clamp(2rem,5vw,3.5rem);border-top:1px solid var(--hair);max-width:52rem}
.qs details{border-bottom:1px solid var(--hair)}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.4rem 0;font-weight:500;font-size:clamp(1.1rem,1rem + .4vw,1.3rem);letter-spacing:-.015em}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";flex:none;width:.75rem;height:.75rem;
  background:linear-gradient(var(--glacial),var(--glacial)) center/100% 1.5px no-repeat,
             linear-gradient(var(--glacial),var(--glacial)) center/1.5px 100% no-repeat;
  transition:transform .4s var(--ease-out)}
.qs details[open] summary::after{transform:rotate(135deg)}
.qs details p{padding:0 0 1.5rem;font-size:1.0625rem}
/* open and close smoothly where the browser can animate to auto height */
@supports (interpolate-size:allow-keywords){
  .qs{interpolate-size:allow-keywords}
  .qs details::details-content{height:0;overflow:clip;opacity:0;
    transition:height .45s var(--ease-out),opacity .35s ease,content-visibility .45s allow-discrete}
  .qs details[open]::details-content{height:auto;opacity:1}
}

/* privacy and other reading pages -------------------------------------------------- */
.doc{padding:calc(var(--nav-h) + clamp(3rem,8vw,5.5rem)) 0 var(--sect)}
.doc .wrap{max-width:46rem}
.doc h1{font-size:clamp(2.6rem,1.6rem + 4vw,4.2rem);line-height:1.02;letter-spacing:-.035em}
.doc .lead{margin-top:1.2rem}
.doc .updated{margin-top:1.4rem;font-size:.875rem;color:var(--ink-2)}
.doc h2{font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);letter-spacing:-.02em;margin:3rem 0 .8rem;
  padding-top:1.6rem;border-top:1px solid var(--hair)}
.doc p,.doc li{color:var(--ink-2);max-width:none}
.doc p+p{margin-top:.9rem}
.doc ul{list-style:none;padding:0;margin:.9rem 0;display:grid;gap:.6rem}
.doc li{position:relative;padding-left:1.3rem}
.doc li::before{content:"";position:absolute;left:0;top:.72em;width:.45rem;height:1.5px;background:var(--frost)}
.doc strong{font-weight:500;color:var(--navy)}
.doc a{text-decoration:underline;text-underline-offset:.18em;text-decoration-color:rgba(30,78,107,.35)}
.doc a:hover{text-decoration-color:currentColor}

/* the closing scene ----------------------------------------------------------
   Apple ends its product pages on one calm line and a text link, then a
   small footer; Logic Pro, its audio app, ends dark. This ends in an arctic
   night: the line and link at the top, the aurora (.northern, drawn by
   assets/aurora.js in brand
   colours only) lighting the sky, and the bear standing on the horizon at
   its foot, centred. Behind the canvas is a still render of the same shader,
   which is what shows without WebGL, without script, or before it starts. */
.night{position:relative;isolation:isolate;background:var(--navy);color:var(--ice);text-align:center;
  --ground:clamp(36px,3.5vw,56px);--bearw:clamp(104px,8vw + 40px,160px)}
.night .northern{position:absolute;left:0;right:0;top:0;bottom:var(--ground);overflow:hidden;
  background:var(--navy) url(/assets/img/aurora-still.webp) center bottom/cover no-repeat}
.night canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.6s var(--ease)}
.night .northern.live canvas{opacity:1}
/* The scene and the footer are one block exactly a screen tall, so the line,
   the link, the bear on the horizon and the footer's links are all in view
   at once. The footer keeps its own height; the sky takes what is left. */
.ending{display:flex;flex-direction:column;min-height:100svh}
.night{flex:1;display:flex;flex-direction:column}
.night-copy{position:relative;z-index:1;flex:1;padding-top:calc(var(--nav-h) + clamp(1rem,4svh,3.5rem));
  padding-bottom:clamp(110px,20svh,300px)}
/* very short screens: the headline and link carry it alone */
@media (max-height:640px){.night .lead{display:none}.night .more{margin-top:.6rem}}
.night h2{font-size:clamp(2rem,1.2rem + 3vw,3.6rem)}
.night h2{color:var(--ice)}
.night-copy p{margin-left:auto;margin-right:auto}
.night .lead{color:var(--frost);margin-top:1rem;max-width:32ch}
.night .more{color:var(--teal);margin-top:1.4rem}
.night :focus-visible{outline-color:var(--teal)}
/* the ice: a horizon line the bear stands on, and a faint field below it */
.ground{position:relative;z-index:1;height:var(--ground);
  /* lit just under the horizon, settling into the footer's colour, so the
     horizon is the only line between the scene and the footer */
  background:linear-gradient(to bottom,rgba(143,179,199,.10),var(--inset))}
.ground::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(143,179,199,0),rgba(244,249,252,.55) 30%,rgba(244,249,252,.75) 50%,rgba(244,249,252,.55) 70%,rgba(143,179,199,0));
  box-shadow:0 0 16px 1px rgba(61,220,180,.18)}
.night .bear{position:absolute;left:50%;bottom:100%;width:var(--bearw);transform:translateX(-50%)}

/* footer ----------------------------------------------------------------------
   Apple's footer, in brand colours: small type in muted frost on the inset
   navy, link columns under small headings, hairlines, and a bottom row. */
.foot{background:var(--inset);color:var(--frost);padding:clamp(1.4rem,3vw,2.4rem) 0 1.2rem;
  font-size:.75rem;line-height:1.35}
.dir{display:grid;grid-template-columns:repeat(3,minmax(0,13rem));gap:1.6rem 2rem}
.dir h2{font-size:.75rem;line-height:1.35;font-weight:500;letter-spacing:0;color:var(--ice);margin-bottom:.7rem}
.dir ul{display:grid;gap:.5rem}
.dir a{color:rgba(143,179,199,.92)}
.dir a:hover{color:var(--ice);text-decoration:underline;text-underline-offset:.2em}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 2rem;margin-top:1.4rem;padding-top:.9rem;
  border-top:1px solid var(--hair-dk)}
.legal p{font-size:.75rem;color:rgba(143,179,199,.8);max-width:none}
.foot :focus-visible{outline-color:var(--teal)}
@media (max-width:640px){.dir{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}

/* reveal ----------------------------------------------------------------------
   Only once the script has said motion is welcome. Items rise and sharpen,
   staggered by --d. */
.motion [data-rise]{opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out),filter 1s var(--ease-out);
  transition-delay:var(--d,0ms)}
.motion [data-rise].in{opacity:1;transform:none;filter:none}
.motion .tile[data-rise].in:hover{transform:translateY(-4px)}

@keyframes drift1{to{transform:translate(8vw,3vw) scale(1.1)}}
@keyframes drift2{to{transform:translate(-6vw,4vw) scale(.92)}}
@keyframes drift3{to{transform:translate(-4vw,-3vw) scale(1.15)}}
@media (prefers-reduced-motion:no-preference){
  .aurora i:nth-child(1){animation:drift1 22s ease-in-out infinite alternate}
  .aurora i:nth-child(2){animation:drift2 28s ease-in-out infinite alternate}
  .aurora i:nth-child(3){animation:drift3 19s ease-in-out infinite alternate}
}

/* Pinning and scrubbing only happen where script runs and motion is welcome
   (the scripting and prefers-reduced-motion queries above). Otherwise every
   scene is an ordinary section showing its finished state. */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
}

/* 404 ------------------------------------------------------------------------ */
.lost{position:relative;overflow:clip;min-height:100svh;display:grid;place-items:center;text-align:center}
.lost .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.lost h1{background:linear-gradient(180deg,var(--navy) 30%,var(--glacial));
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.lost .lead{margin-top:1.2rem}