/*
 * snowsleuth.com. Day on the ice in light mode, night in dark mode; the packs shelf is always night.
 * Paper pieces cast hard offset shadows, as the game's papercraft does. A few things move by
 * themselves, the way the game does (Brian, 2026-10-14: livelier, but never busy): penguins breathe
 * and blink and slide on the hero's ice, a night is solved in How to play, the packs go slowly by,
 * the detective tries on looks, and between sections a penguin slides to its flag as the page
 * scrolls. The sliding is the game's own, worked out when the site is built (scenes.ts and
 * motion.ts write it into the landing page's own stylesheet). All CSS (the site runs no scripts);
 * with Reduce Motion nothing moves.
 */

@font-face {
  font-family: 'Fredoka';
  src: url('/assets/fredoka.99d6c78e04.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/figtree.4ba7d3d096.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Day on the ice (the game's light palette). */
  --ice: #dce8f1;
  --frost: #eef3f8;
  --snow: #ffffff;
  --rim: #c9d6e3;
  --ink: #14243a;
  --slate: #4a5b70;
  --shade: #b4c7d9;
  --button: #14243a;
  --on-button: #ffffff;
  --button-shade: #050c17;
  --flag: #e0559a;
  --flag-edge: #b23a76;
  --flag-track: #fadceb;
  --pole: #14243a;
  /* The night shelf, in both modes. */
  --night: #0e1726;
  --night-card: #17233a;
  --night-ink: #e8eff7;
  --night-mist: #9daec2;
  --night-shade: #050a12;
  /* The game's board, for the moving pictures (scenes.ts). */
  --board: #e1ebf3;
  --board-rim: #c6d6e4;
  --cell: #eef4f9;
  --groove: #cbdae7;
  --groove-sh: #9db6ce;
  --groove-hi: rgba(255, 255, 255, 0.75);
  --rock: #8a97a5;
  --rock-low: #75828f;
  --rock-snow: #ffffff;
  --sc-shadow: rgba(20, 36, 58, 0.16);
  --gold: #f2c14e;
  --success: #1f6b45;
  /* The hero's words and the way in below them share a width, so their right edges meet. */
  --lede: 520px;

  --display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 16px;
  --measure: 1160px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ice: #0e1726;
    --frost: #17233a;
    --snow: #17233a;
    --rim: #2a3a55;
    --ink: #e8eff7;
    --slate: #9daec2;
    --shade: #050a12;
    --button: #dce8f1;
    --on-button: #0e1726;
    --button-shade: #6f8aa8;
    --flag-track: #5a2a45;
    --pole: #e8eff7;
    --board: #1b2b4a;
    --board-rim: #34496f;
    --cell: #223558;
    --groove: #15223a;
    --groove-sh: #070d18;
    --groove-hi: rgba(150, 185, 230, 0.35);
    --rock: #6f7d8c;
    --rock-low: #5c6979;
    --rock-snow: #dde8f3;
    --sc-shadow: rgba(0, 0, 0, 0.32);
    --success: #9ed9b5;
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ice);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--flag);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-size: clamp(34px, 5vw, 52px);
}

h3 {
  font-size: 24px;
  line-height: 1.15;
}

p {
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--button);
  color: var(--on-button);
  font-weight: 600;
}
.skip:focus {
  top: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* While the game is still being made (layout.ts's IN_DEVELOPMENT): a strip over every page, in
   the night's colours by day and the ice's by night, so it stands apart in both. */
.dev-note {
  margin: 0;
  padding: 9px var(--gutter);
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
  background: var(--button);
  color: var(--on-button);
}
.dev-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--flag);
  color: #ffffff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  vertical-align: 1px;
}

/* The bar at the top: the game's name on the left, where to go on the right. */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand img {
  width: auto;
  height: 44px;
}
/* The wordmark's "o" is the logo's magnifying glass, sitting on the line as an "o" would. */
.wordmark .o {
  display: inline-block;
  width: 0.52em;
  height: 0.52em;
  margin: 0 0.02em;
  position: relative;
  top: 0.012em;
  overflow: visible;
}
/* By night, a light edge round the logo, so the navy detective doesn't sink into the dark. */
@media (prefers-color-scheme: dark) {
  .brand img {
    filter: drop-shadow(0 0 0.6px #e8eff7) drop-shadow(0 0 0.6px #e8eff7);
  }
}
.links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
}
.links a {
  text-decoration: none;
}
.links a:hover {
  text-decoration: underline;
}
.links .wide {
  display: none;
}

/* Buttons: paper pieces that press down. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 20px;
  background: var(--button);
  color: var(--on-button);
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 5px 0 var(--button-shade);
  transition:
    transform 80ms ease-out,
    box-shadow 80ms ease-out;
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 0 var(--button-shade);
}
.button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--button-shade);
}
.button.small {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 17px;
  box-shadow: 0 4px 0 var(--button-shade);
}
.button svg {
  width: 18px;
  height: 18px;
}
/* Until the app is listed, a badge of our own where the App Store's will go: not a link. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 22px 8px 16px;
  border-radius: 16px;
  background: var(--button);
  color: var(--on-button);
  box-shadow: 0 5px 0 var(--button-shade);
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.05;
}
.soon svg {
  flex: none;
  width: 30px;
  height: 30px;
}
.soon small {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  opacity: 0.8;
}
.store img {
  height: 60px;
  width: auto;
}
.button.ghost {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 16px;
  background: var(--snow);
  color: var(--ink);
  font-size: 18px;
  box-shadow:
    inset 0 0 0 2px var(--rim),
    0 4px 0 var(--rim);
}
.button.ghost:hover {
  box-shadow:
    inset 0 0 0 2px var(--rim),
    0 5px 0 var(--rim);
}
.button.ghost:active {
  box-shadow:
    inset 0 0 0 2px var(--rim),
    0 1px 0 var(--rim);
}
.button.ghost svg {
  width: 15px;
  height: 15px;
}

/* The hero: the ice, a real night half replayed, and along its bottom a strip of the board. The
   tiles are laid from the middle of the bottom edge, so the strip's cells sit on them. */
.hero {
  position: relative;
  background-color: var(--ice);
  background-image: var(--tiles);
  background-size: 132px 132px;
  background-position: center bottom;
  padding-bottom: 0;
  overflow: hidden;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
  padding-top: 28px;
  padding-bottom: 36px;
  /* Over the ice, only the words and the picture take taps: the detective's head reaches up
     behind the grid's empty space. */
  pointer-events: none;
}
.hero-grid > * {
  pointer-events: auto;
}
.hero h1 {
  font-size: clamp(60px, 15vw, 116px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.lede {
  font-size: 21px;
  line-height: 1.5;
  color: var(--slate);
  max-width: var(--lede);
  margin-bottom: 30px;
  text-wrap: pretty;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
/* The app first, with what's waiting in it beside it, and the browser right under it, the two
   the same width; as wide as the hero's words, so the line beside the badge ends where they do.
   Where there's no room beside the badge (a phone), the words go under the two. The two are as
   wide as the wider needs, up to 260px (Brian, 2026-10-18: a longer label widened both and
   squeezed the words beside them into a thin column, pushing the second down onto the detective):
   past that, a label wraps. */
.get {
  container-type: inline-size;
  width: 100%;
  max-width: var(--lede);
}
.get-in {
  display: grid;
  justify-items: start;
  align-items: center;
  gap: 14px 22px;
}
.get .soon,
.get .store,
.get .button.ghost {
  justify-self: stretch;
  justify-content: center;
}
.get .store {
  display: flex;
}
/* "Watch the trailer": small, under the two (beside the browser's on a wider screen). */
.get .watch {
  grid-row: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.get .watch svg {
  width: 14px;
  height: 14px;
}
.get .watch span {
  font-weight: 500;
  color: var(--slate);
}
.get-more {
  grid-row: 3;
  font-size: 17px;
  line-height: 1.5;
  color: var(--slate);
}
.get-more strong {
  color: var(--ink);
  font-weight: 700;
}
@container (min-width: 440px) {
  .get-in {
    grid-template-columns: fit-content(260px) minmax(0, 1fr);
  }
  .get-more {
    grid-column: 2;
    grid-row: 1;
  }
  .get .button.ghost {
    grid-column: 1;
    grid-row: 2;
  }
  .get .watch {
    grid-column: 2;
    grid-row: 2;
  }
}
.slab {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(100%, 440px);
  transform: rotate(2deg);
}
.slab img {
  width: 100%;
  height: auto;
  border-radius: 26px;
  box-shadow: 10px 12px 0 var(--shade);
}
.slab figcaption {
  margin-top: 22px;
  text-align: center;
  font-size: 15px;
  color: var(--slate);
  transform: rotate(-2deg);
}
/* Two rows of tiles along the bottom of the hero: above, the ice (scenes.ts heroIce, a cell to a
   tile, its rows on the tiles' middles) reaching up behind the words, where penguins slide; below,
   a track with the detective standing on it, sliding in to its flag once on load, then shining as
   the game's tracks do. */
.ground {
  position: relative;
  height: 264px;
}
.hero-ice {
  position: absolute;
  /* 16 cells by 7.4 (from -6.2): its bottom lane (y 0.5) on the upper row's middle, 198px up. */
  left: calc(50% - 1056px);
  bottom: 105.6px;
  width: 2112px;
  height: 976.8px;
  max-width: none;
  overflow: visible;
}
.ground .track {
  position: absolute;
  left: -40px;
  right: calc(max(var(--gutter), 50% - 580px) + 40px);
  bottom: 49px;
  height: 34px;
  border-radius: 17px;
  background: var(--flag-track);
  border: 5px solid var(--flag-edge);
  overflow: hidden;
  transform-origin: left center;
  animation: slide-in 1.15s cubic-bezier(0.16, 0.84, 0.3, 1) 0.25s both;
}
.ground .track::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 253, 242, 0),
    rgba(255, 253, 242, 0.95) 50%,
    rgba(255, 253, 242, 0)
  );
  opacity: 0;
}
.ground .flag {
  position: absolute;
  /* The pole (6px into the picture) stands at the track's end. */
  right: calc(max(var(--gutter), 50% - 580px) - 6px);
  bottom: 55px;
  width: 52px;
  height: 104px;
  transform-origin: 6px 100%;
  animation: plant 0.42s cubic-bezier(0.3, 1.6, 0.5, 1) 1.3s both;
}

/* The detective on the track, who does something when tapped (home.ts sleuth): each tap checks
   the next hidden radio button, and the one checked picks the move and the line it says. */
.sleuth {
  position: absolute;
  left: calc(max(var(--gutter), 50% - 580px) - 4px);
  bottom: 33px;
  /* On a phone the button is far above (the picture between): the size it had. */
  width: 150px;
  -webkit-tap-highlight-color: transparent;
}
.sleuth-body,
.sleuth .detective {
  transform-origin: 50% 94%;
}
/* Hopping up, it goes in front of the buttons above it (Brian, 2026-10-14), but never takes their
   taps: the taps are the labels' below it. */
.sleuth-body {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.sleuth .detective {
  width: 100%;
  height: auto;
}
.sleuth .tap {
  position: absolute;
  inset: 0;
  display: none;
  cursor: pointer;
}
.sleuth .tap-0,
#sleuth-1:checked ~ .tap-1,
#sleuth-2:checked ~ .tap-2,
#sleuth-3:checked ~ .tap-3,
#sleuth-4:checked ~ .tap-4,
#sleuth-5:checked ~ .tap-5 {
  display: block;
}
.sleuth input:checked ~ .tap-0 {
  display: none;
}
/* What it says: a speech bubble up beside its hat, its tail pointing down at it. White paper with
   a navy edge by day and by night (Brian, 2026-10-14: in the ice's colours it was lost on them),
   and over the hero's words' layer, so nothing there covers it. */
.says {
  position: absolute;
  z-index: 2;
  left: 80%;
  bottom: 80%;
  display: none;
  width: max-content;
  max-width: 200px;
  padding: 12px 18px 13px;
  border: 2.5px solid #14243a;
  border-radius: 20px;
  background: #ffffff;
  color: #14243a;
  /* The paper's hard shadow, round the tail too. */
  filter: drop-shadow(5px 6px 0 rgba(20, 36, 58, 0.3));
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  transform-origin: -24px calc(100% - 13px);
  pointer-events: none;
}
/* The tail: out of the bubble's left side, down towards the detective's face (it sits about a
   quarter turn below level from there), joined to the outline. */
.says::after {
  content: '';
  position: absolute;
  left: -30px;
  bottom: 10px;
  width: 32px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M32 3L3 21L32 14Z' fill='%23fff'/%3E%3Cpath d='M29.5 3L3 21L29.5 14' fill='none' stroke='%2314243a' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat;
}
@media (min-width: 960px) {
  .says {
    left: 88%;
    max-width: 270px;
    padding: 14px 22px 15px;
    font-size: 23px;
  }
}
/* Where the line about the app sits under the buttons, just over the hat: a little lower. */
@media (min-width: 960px) and (max-width: 1023px) {
  .says {
    bottom: 64%;
  }
}
#sleuth-1:checked ~ .says-1,
#sleuth-2:checked ~ .says-2,
#sleuth-3:checked ~ .says-3,
#sleuth-4:checked ~ .says-4,
#sleuth-5:checked ~ .says-5 {
  display: block;
}
@keyframes slide-in {
  from {
    transform: scaleX(0.04);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes plant {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ground .track,
  .ground .flag {
    animation: none;
  }
}

/* Sections. */
.section {
  padding-block: 72px;
}
.section-head {
  max-width: 34ch;
  margin-bottom: 36px;
}
.section-head p {
  margin-top: 14px;
  font-size: 20px;
  color: var(--slate);
}

/* The moving pictures' pieces (scenes.ts), in cell units, drawn as the game draws them: the
   board, grooves pressed into the snow, slid tracks in their penguin's colour and their shine as a
   slide lands, nests, flags, rocks, and the penguins' shadows. */
.sc-board {
  fill: var(--board);
  stroke: var(--board-rim);
  stroke-width: 0.06;
}
.sc-cell {
  fill: var(--cell);
}
.sc-shadow {
  fill: var(--sc-shadow);
}
.sc-pole {
  fill: var(--pole);
}
.sc-groove-sh,
.sc-groove,
.sc-groove-hi,
.sc-trail,
.sc-trail-hi,
.sc-shine path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sc-groove-sh {
  stroke: var(--groove-sh);
  stroke-width: 0.36;
  opacity: 0.45;
}
.sc-groove {
  stroke: var(--groove);
  stroke-width: 0.28;
}
.sc-groove-hi {
  stroke: var(--groove-hi);
  stroke-width: 0.04;
}
.sc-trail {
  stroke-width: 0.28;
  stroke-dasharray: 1;
}
.sc-trail-hi {
  stroke: var(--groove-hi);
  stroke-width: 0.04;
  stroke-dasharray: 1;
  opacity: 0.5;
}
/* The shine: a short warm light along the track (a narrow bright stroke over a faint wide one,
   the game's blur without a filter). */
.sc-shine path {
  stroke: #fffdf2;
}
.sc-shine-glow {
  stroke-width: 0.3;
  opacity: 0.4;
}
.sc-shine-core {
  stroke-width: 0.15;
  opacity: 0.85;
}
.sc-nest {
  fill: var(--groove-sh);
  opacity: 0.55;
}
.sc-pebble-lit {
  fill: #ffffff;
  fill-opacity: 0.45;
}
.sc-rock {
  fill: var(--rock);
}
.sc-rock-low {
  fill: var(--rock-low);
}
.sc-snow {
  fill: var(--rock-snow);
}

/* How to play: the words beside a night being solved. Still, it's the solved night. */
.how {
  display: grid;
  gap: 32px;
  align-items: center;
}
.how .section-head {
  margin-bottom: 0;
}
.how-steps {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.how-steps li {
  counter-increment: step;
  display: flex;
  align-items: baseline;
  gap: 12px;
  max-width: 36ch;
}
.how-steps li::before {
  content: counter(step);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--button);
  color: var(--on-button);
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  transform: translateY(-2px);
}
.demo {
  margin: 0;
}
.solving {
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(9px 10px 0 var(--shade));
}
.dm-tap {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.07;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.dm-solved {
  transform-box: fill-box;
  transform-origin: center;
}
.dm-solved rect {
  fill: var(--gold);
}
.dm-solved text {
  fill: #14243a;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.3px;
}

/* A penguin sliding to its flag between two sections as the page scrolls past (scenes.ts
   slideBy): a long track on wide screens, a short one on phones. Still, or where the browser can't
   tie it to the scrolling, she's at her flag. */
.ride {
  max-width: var(--measure);
  margin: 8px auto;
  padding-inline: var(--gutter);
}
.ride svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.ride-narrow {
  max-width: 440px;
  margin-inline: auto;
}
.ride-wide {
  display: none;
}

/* The daily: the words beside a week of solved nights and a shared result. */
.daily {
  display: grid;
  gap: 48px;
  align-items: center;
}
.daily .section-head {
  margin-bottom: 0;
}
.perks {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.perks li {
  position: relative;
  padding-left: 32px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
}
.perks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.4em;
  width: 16px;
  height: 9px;
  border-radius: 5px;
  background: var(--flag-track);
  border: 2px solid var(--flag-edge);
}
/* A week of the streak, a shared result and how everyone did; side by side where there's room,
   the streak and the result on the left, everyone on the right. */
.daily-art {
  display: grid;
  gap: 22px;
  justify-items: start;
  max-width: 470px;
  width: 100%;
  justify-self: center;
}
@media (min-width: 720px) {
  .daily-art {
    max-width: 680px;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-areas:
      'streak everyone'
      'share everyone';
    align-items: center;
    column-gap: 26px;
  }
  .streak-card {
    grid-area: streak;
  }
  .share-bubble {
    grid-area: share;
  }
  .everyone {
    grid-area: everyone;
  }
}
.everyone {
  width: min(100%, 300px);
  padding: 18px 20px 20px;
  border-radius: 24px;
  background: var(--snow);
  box-shadow: 8px 9px 0 var(--shade);
  transform: rotate(1deg);
}
.everyone-head {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}
.everyone-sub {
  font-size: 14px;
  color: var(--slate);
}
.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0 12px;
  text-align: center;
}
.figures div {
  display: flex;
  flex-direction: column-reverse;
}
.figures dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.1;
}
.figures dt {
  font-size: 12px;
  line-height: 1.3;
  color: var(--slate);
}
.attempts {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.attempts li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
}
.attempts i {
  display: block;
  height: 12px;
  width: max(6%, calc(var(--share) * 100%));
  border-radius: 6px;
  background: var(--rim);
}
.attempts .mine i {
  background: var(--success);
}
.streak-card {
  width: min(100%, 420px);
  padding: 22px 24px 24px;
  border-radius: 26px;
  background: var(--snow);
  box-shadow: 9px 10px 0 var(--shade);
  transform: rotate(-1.5deg);
}
.streak {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
}
.streak b {
  font-size: 46px;
  margin-right: 6px;
  color: var(--flag);
}
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.week li {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
}
.week i {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ice);
}
.week .solved i::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 8px;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: var(--pole);
}
.week .solved i::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 8px;
  width: 12px;
  height: 11px;
  background: var(--flag);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.week .gold i::before,
.week .shielded i::before {
  content: '';
  position: absolute;
  inset: 7px;
}
.week .gold i::before {
  background: var(--gold);
  clip-path: polygon(
    50% 0,
    62% 36%,
    100% 37%,
    70% 59%,
    81% 96%,
    50% 74%,
    19% 96%,
    30% 59%,
    0 37%,
    38% 36%
  );
}
.week .shielded i::before {
  background: #8db9ec;
  clip-path: polygon(50% 0, 100% 16%, 92% 60%, 50% 100%, 8% 60%, 0 16%);
}
.week .today i {
  background: transparent;
  border: 2px dashed var(--slate);
}
.share-bubble {
  justify-self: end;
  margin-right: 4px;
  padding: 16px 20px 18px;
  border-radius: 24px 24px 6px 24px;
  background: var(--button);
  color: var(--on-button);
  box-shadow: 8px 9px 0 var(--shade);
  transform: rotate(1.2deg);
}
.share-bubble p {
  font-size: 16px;
  line-height: 1.4;
}
.share-head {
  font-weight: 600;
  margin-bottom: 8px;
}
.share-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.sq {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #4c8ee8;
}
.sq.wrong {
  background: #e5484d;
}
.sq.flagged {
  background: transparent;
}
.sq.flagged::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 19px;
  border-radius: 2px;
  background: currentColor;
}
.sq.flagged::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 1px;
  width: 12px;
  height: 11px;
  background: var(--flag);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.share-foot {
  margin-top: 6px;
  opacity: 0.8;
}

/* The packs: always night, between two drifts of snow. */
.shelf {
  position: relative;
  background: var(--night);
  color: var(--night-ink);
  --slate: var(--night-mist);
  --shade: var(--night-shade);
  --rim: #2a3a55;
  padding-block: 64px 72px;
  margin-block: 40px;
  /* The fanned covers may reach past the screen's edge; the drifts above and below stay. */
  overflow-x: clip;
}
.shelf::before,
.shelf::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--drift) center / 1440px 48px repeat-x;
}
.shelf::before {
  top: -47px;
}
.shelf::after {
  bottom: -47px;
  transform: scaleY(-1);
}
.shelf .stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #e8eff7 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 9%, #e8eff7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 57% 14%, #e8eff7 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 6%, #e8eff7 50%, transparent 51%),
    radial-gradient(2px 2px at 89% 21%, #e8eff7 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 26%, #9daec2 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 44%, #9daec2 50%, transparent 51%);
  opacity: 0.8;
  pointer-events: none;
}
.shelf .wrap {
  position: relative;
}
.shelf .section-head {
  max-width: none;
}
/* The packs going by (home.ts parade), the covers big, names under them. Without motion, or on a
   touch screen, a row to swipe through; with a mouse, it goes slowly round by itself (below),
   stopping while a pack is pointed at. */
.parade {
  --card: min(66vw, 236px);
  --gap: 24px;
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.parade::-webkit-scrollbar {
  display: none;
}
.parade-row {
  display: flex;
  gap: var(--gap);
  width: max-content;
  margin: 0;
  padding: 8px var(--gutter) 18px;
  list-style: none;
}
.parade-row li {
  flex: none;
  width: var(--card);
  scroll-snap-align: start;
}
.parade .copy {
  display: none;
}
.card {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 22px;
}
.card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 22px;
  box-shadow: 6px 7px 0 var(--shade);
}
.cap {
  display: block;
  margin-top: 12px;
}
.cap strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
}
.cap > span {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--slate);
}
/* What it costs, under the packs: free first, a pack, the collection, then the extras. */
.pricing {
  margin-top: 48px;
}
/* Where the bar's links land: a little room above each, and the shelf's drift showing. */
#how,
#pricing,
#faq {
  scroll-margin-top: 24px;
}
#packs {
  scroll-margin-top: 56px;
}
.pricing h3 {
  font-size: 30px;
  margin-bottom: 18px;
}
.prices {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prices li {
  padding: 20px 22px 22px;
  border-radius: 22px;
  background: var(--night-card);
  box-shadow: 6px 7px 0 var(--night-shade);
}
.price-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--slate);
}
.price {
  margin: 2px 0 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.1;
}
.prices .free .price {
  color: #9ed9b5;
}
.price-what {
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
}
.pricing-note {
  margin-top: 18px;
  max-width: 68ch;
  font-size: 15px;
  color: var(--slate);
}
@media (min-width: 760px) {
  .prices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  background: #1f6b45;
  color: #e3f4ea;
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  vertical-align: 3px;
}

/* The detective: four looks in a row, each trying on two more in turn. */
.looks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 1040px;
}
.looks li {
  display: grid;
  justify-items: center;
}
.look {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 250px;
  opacity: 0;
}
.look:first-child {
  opacity: 1;
}
.look img {
  width: 100%;
  height: auto;
}

/* The FAQ: each answer opens under its question (the support page's look). */
.faq {
  max-width: 820px;
}
.faq-more {
  margin-top: 24px;
  color: var(--slate);
}

/* The closing band. */
.again {
  display: grid;
  gap: 22px;
  justify-items: start;
  padding: 44px 32px;
  border-radius: 32px;
  background: var(--snow);
  box-shadow: 10px 12px 0 var(--shade);
}
.again h2 {
  font-size: clamp(30px, 4.6vw, 46px);
  max-width: 18ch;
}

/* Footer. */
.foot {
  padding-block: 56px 40px;
  font-size: 16px;
  color: var(--slate);
}
.foot-grid {
  display: grid;
  gap: 24px;
}
.foot .brand {
  color: var(--ink);
}
.foot .about {
  margin-top: 10px;
}
.foot .copy {
  margin-top: 28px;
}
.foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Pages of text: support, privacy, terms. */
.page {
  padding-block: 32px 72px;
}
.page h1 {
  font-size: clamp(44px, 8vw, 72px);
  line-height: 0.98;
  margin-bottom: 14px;
}
.page .updated {
  color: var(--slate);
  font-size: 16px;
}
.text {
  max-width: 68ch;
}
.text h2 {
  font-size: 27px;
  line-height: 1.2;
  margin: 40px 0 10px;
}
.text p + p {
  margin-top: 14px;
}
.contents {
  margin: 30px 0 8px;
  padding: 20px 24px;
  border-radius: 22px;
  background: var(--snow);
  box-shadow: 7px 8px 0 var(--shade);
  max-width: 68ch;
}
.contents h2 {
  margin: 0 0 8px;
  font-size: 19px;
}
.contents ol {
  margin: 0;
  padding-left: 22px;
  columns: 2 14em;
  column-gap: 32px;
  font-size: 16px;
}
.contents li {
  break-inside: avoid;
  padding-block: 2px;
}

/* Support. */
.reach {
  display: grid;
  gap: 18px;
  justify-items: start;
  margin-top: 26px;
  padding: 28px;
  border-radius: 26px;
  background: var(--snow);
  box-shadow: 9px 10px 0 var(--shade);
  max-width: 68ch;
}
.reach .address {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 4.5vw, 30px);
  overflow-wrap: anywhere;
}
.questions {
  max-width: 68ch;
  margin-top: 48px;
}
.questions h2 {
  font-size: 32px;
  margin-bottom: 16px;
}
details {
  border-top: 2px solid var(--rim);
}
details:last-of-type {
  border-bottom: 2px solid var(--rim);
}
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 160ms ease-out;
}
details[open] summary::after {
  transform: translateY(3px) rotate(-135deg);
}
details .answer {
  padding: 0 2px 20px;
  color: var(--slate);
}
details .answer p + p {
  margin-top: 10px;
}
@media (prefers-reduced-motion: reduce) {
  summary::after {
    transition: none;
  }
}

.see-also {
  margin-top: 32px;
  max-width: 68ch;
}

/* The press kit: the pitch, the facts as rows, the pictures as cards to download. */
.press-pitch {
  max-width: 60ch;
  margin-top: 22px;
  font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.45;
}
.press h2 {
  font-size: 27px;
  line-height: 1.2;
  margin: 44px 0 14px;
}
.press-facts {
  margin: 0;
  max-width: 68ch;
  border-top: 2px solid var(--rim);
}
.press-facts div {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr);
  gap: 4px 18px;
  padding: 12px 2px;
  border-bottom: 2px solid var(--rim);
}
.press-facts dt {
  font-family: var(--display);
  font-weight: 600;
}
.press-facts dd {
  margin: 0;
  color: var(--slate);
  overflow-wrap: anywhere;
}
@media (max-width: 520px) {
  .press-facts div {
    grid-template-columns: minmax(0, 1fr);
  }
}
.press-list,
.press-downloads {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
  list-style: disc;
}
.press-note {
  max-width: 68ch;
  color: var(--slate);
}
.press-video {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  border-radius: 18px;
  background: #0e1726;
  box-shadow: 7px 8px 0 var(--shade);
}
.press-video + .press-note {
  margin-top: 16px;
}
.press-pictures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
  align-items: start;
  margin-top: 18px;
}
.press-pictures figure {
  margin: 0;
}
.press-pictures img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  background: var(--snow);
  box-shadow: 7px 8px 0 var(--shade);
}
.press-pictures figcaption {
  margin-top: 12px;
  font-size: 15px;
  color: var(--slate);
}

/* How to play: the rules, the demo beside the goal, then every piece beside its pack's cover. */
.how .more {
  margin-top: 16px;
  font-weight: 600;
}
.guide-goal {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 860px) {
  .guide-goal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 48px;
  }
}
.rules {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 22px;
}
.pieces {
  display: grid;
  gap: 22px;
  margin-top: 8px;
}
.piece-group {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  max-width: 760px;
  padding: 20px;
  border-radius: 22px;
  background: var(--snow);
  box-shadow: 7px 8px 0 var(--shade);
}
.piece-group picture,
.piece-group .cover {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 20px;
}
.piece-list {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.piece-list h3 {
  font-size: 16px;
  font-weight: 600;
  font-family: var(--body);
  color: var(--slate);
}
.piece {
  display: grid;
  gap: 2px;
}
.piece .kicker {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate);
}
.piece-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
}
.guide-end {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin-top: 48px;
}
.guide-end h2 {
  font-size: 32px;
}
.guide-end .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
@media (max-width: 520px) {
  .piece-group {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }
  .piece-group .cover {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }
}

/* Not found. */
.lost {
  display: grid;
  gap: 24px;
  justify-items: start;
  padding-block: 40px 96px;
}
.lost img {
  width: 180px;
  height: auto;
}
.lost .actions {
  gap: 22px;
}
.plain {
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
}

/* Wider screens. */
@media (min-width: 640px) {
  :root {
    --gutter: 32px;
  }
  .links .wide {
    display: list-item;
  }
  .looks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .again {
    padding: 56px;
  }
  .foot-grid {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

@media (min-width: 960px) {
  /* The words take what the picture leaves (Brian, 2026-10-14: there was a wide gap between). */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    align-items: center;
    gap: 56px;
    padding-top: 40px;
  }
  /* Big, its hat a little under "Play in your browser" (Brian, 2026-10-14). Up to 1023px the
     line about the app goes under that button, so a little smaller there. */
  .sleuth {
    width: 260px;
  }
  .ride-wide {
    display: block;
  }
  .ride-narrow {
    display: none;
  }
  .how {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
  }
  .daily {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 48px;
  }
  .daily-art {
    justify-self: end;
  }
  .section {
    padding-block: 104px;
  }
}
@media (min-width: 1024px) {
  .sleuth {
    width: 320px;
  }
  /* That big, its hat reaches 27px up into the grid: the words keep their buttons clear of it, the
     hat a little under them (Brian, 2026-10-18: it had come over "Play today’s puzzle"). */
  .hero-words {
    padding-bottom: 44px;
  }
}

/* What moves by itself: only for readers who haven't asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  /* The bar's links to this page's sections glide there rather than jump (Brian, 2026-10-14). */
  html {
    scroll-behavior: smooth;
  }
  .sc-breathe {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: breathe 3.4s ease-in-out calc(var(--blink, 0s) * -1) infinite;
  }
  .sc-breathe .pg-eyes {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: blink 5.2s linear var(--blink, 0s) infinite;
  }
  .sleuth .detective {
    animation: breathe 3.8s ease-in-out infinite;
    transition: rotate 200ms ease-out;
  }
  .sleuth:hover .detective {
    rotate: -4deg;
  }
  .ground .track::after {
    animation: shine 0.75s ease-in-out 1.42s both;
  }

  /* The detective's moves and lines, one a tap. */
  #sleuth-1:checked ~ .sleuth-body {
    animation: sleuth-hop 0.75s ease-out;
  }
  #sleuth-2:checked ~ .sleuth-body {
    animation: sleuth-bow 1.1s ease-in-out;
  }
  #sleuth-3:checked ~ .sleuth-body {
    animation: sleuth-twirl 0.9s ease-in-out;
  }
  #sleuth-4:checked ~ .sleuth-body {
    animation: sleuth-dance 1.3s ease-in-out;
  }
  #sleuth-5:checked ~ .sleuth-body {
    animation: sleuth-peer 1.8s ease-in-out;
  }
  .says {
    animation: says 2.8s ease-out both;
  }

  /* The packs go slowly round with a mouse, stopping while one is pointed at. */
  @media (hover: hover) {
    .parade {
      overflow: hidden;
      scroll-snap-type: none;
      mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    }
    .parade .copy {
      display: block;
    }
    .parade-row {
      animation: parade calc(var(--count) * 8s) linear infinite;
    }
    .parade:hover .parade-row,
    .parade:focus-within .parade-row {
      animation-play-state: paused;
    }
    .parade .card img {
      transition: translate 160ms ease-out;
    }
    .parade .card:hover img,
    .parade .card:focus-visible img {
      translate: 0 -6px;
    }
  }
  .shelf .stars {
    animation: twinkle 5s ease-in-out infinite alternate;
  }

  /* The detective's looks: each slot shows one for 3 s, the slots a little apart (9 s round). */
  .look {
    animation: look 9s linear calc(var(--k) * 3s - var(--slot) * 0.75s) infinite;
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.012, 1.028);
  }
}
@keyframes blink {
  0%,
  94%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.1);
  }
}
@keyframes twinkle {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 0.9;
  }
}

@keyframes look {
  0%,
  30% {
    opacity: 1;
    transform: none;
  }
  34%,
  95% {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes shine {
  from {
    opacity: 1;
    translate: -100% 0;
  }
  to {
    opacity: 1;
    translate: 560% 0;
  }
}
@keyframes parade {
  to {
    transform: translateX(calc(-50% - var(--gap) / 2));
  }
}

/* The detective's moves, about its feet. */
@keyframes sleuth-hop {
  0% {
    transform: none;
  }
  18% {
    transform: scale(1.08, 0.88);
  }
  48% {
    transform: translateY(-34%) scale(0.95, 1.07);
  }
  78% {
    transform: scale(1.1, 0.88);
  }
  100% {
    transform: none;
  }
}
@keyframes sleuth-bow {
  0%,
  100% {
    transform: none;
  }
  35%,
  62% {
    transform: rotate(16deg) scale(1, 0.96);
  }
}
@keyframes sleuth-twirl {
  0% {
    transform: perspective(600px) rotateY(0deg);
  }
  50% {
    transform: perspective(600px) translateY(-12%) rotateY(180deg);
  }
  100% {
    transform: perspective(600px) rotateY(360deg);
  }
}
@keyframes sleuth-dance {
  0%,
  100% {
    transform: none;
  }
  15% {
    transform: translateY(-8%) rotate(-9deg);
  }
  32% {
    transform: rotate(8deg);
  }
  49% {
    transform: translateY(-8%) rotate(-9deg);
  }
  66% {
    transform: rotate(8deg);
  }
  83% {
    transform: translateY(-5%) rotate(-4deg);
  }
}
@keyframes sleuth-peer {
  0%,
  100% {
    transform: none;
  }
  25%,
  75% {
    transform: translateY(-3%) rotate(-7deg) scale(1.12);
  }
}
@keyframes says {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  10% {
    opacity: 1;
    transform: scale(1.06);
  }
  16%,
  85% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

:root {
  --tiles: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'132'%20height%3D'132'%3E%3Crect%20x%3D'4'%20y%3D'4'%20width%3D'124'%20height%3D'124'%20rx%3D'16'%20fill%3D'%23F6FAFD'%20fill-opacity%3D'0.62'%2F%3E%3C%2Fsvg%3E");
  --drift: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1440'%20height%3D'48'%20viewBox%3D'0%200%201440%2048'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2048V20C160%202%20300%204%20460%2018S760%2040%20940%2022%201240%200%201440%2020V48Z'%20fill%3D'%231b2840'%2F%3E%3Cpath%20d%3D'M0%2048V30C140%2016%20280%2014%20420%2026S700%2046%20880%2032%201200%2012%201440%2030V48Z'%20fill%3D'%230e1726'%2F%3E%3C%2Fsvg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --tiles: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'132'%20height%3D'132'%3E%3Crect%20x%3D'4'%20y%3D'4'%20width%3D'124'%20height%3D'124'%20rx%3D'16'%20fill%3D'%231B2840'%20fill-opacity%3D'0.7'%2F%3E%3C%2Fsvg%3E");
  }
}