/* murmoon.com: one night, seen through the app's moon window. The page is built from the app's own
   materials: pearl knobs, clay pills, glass, arches. Phones first; wide screens get more room. */

@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display.e0c764a8e9.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  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: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans.153fc85b70.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  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 {
  /* the app's palette (docs/design/DESIGN_BRIEF.md): night plum, clay, rose quartz, pearl */
  --night-0: #140b10;
  --night-1: #1d1218;
  --night-2: #24161f;
  --plum: #43324a;
  --clay: #98505e;
  --rose: #c89aa1;
  --quartz: #e3b8b8;
  --blush: #f4d5c5;
  --pearl: #f8e7dc;
  --ink: var(--pearl);
  --ink-2: rgb(248 231 220 / 0.76);
  --ink-3: rgb(248 231 220 / 0.6);
  --rim: rgb(248 231 220 / 0.2);

  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-small: 0.8125rem;
  --fs-body: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --fs-h2: clamp(1.625rem, 1.32rem + 1.4vw, 2.625rem);
  --fs-h1: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);

  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(76px, 11vh, 160px);
  --wide: 1240px;
  --inline: max(var(--gutter), calc((100% - var(--wide)) / 2));

  --ease: cubic-bezier(0.22, 0.7, 0.18, 1);
  --toolbar: calc(100lvh - 100svh); /* the part of a phone's screen its browser toolbar can cover */
}

:lang(ja) {
  --serif: "Playfair Display", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", "Noto Serif JP", serif;
  --sans: "Plus Jakarta Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Noto Sans JP", "Yu Gothic", sans-serif;
  --fs-h2: clamp(1.4375rem, 1.2rem + 1.1vw, 2.25rem);
  --fs-h1: clamp(1.875rem, 1.45rem + 2vw, 3.25rem);
  word-break: auto-phrase;
  line-break: strict;
}

:lang(ko) {
  --serif: "Playfair Display", "Noto Serif CJK KR", "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", serif;
  --sans: "Plus Jakarta Sans", "Apple SD Gothic Neo", "Noto Sans CJK KR", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --fs-h2: clamp(1.4375rem, 1.2rem + 1.1vw, 2.25rem);
  --fs-h1: clamp(1.875rem, 1.45rem + 2vw, 3.25rem);
  word-break: keep-all;
}

/* ---- base ---- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--night-1);
  /* a thin rose thread on the night instead of the browser's grey bar (overlay bars stay as they are) */
  scrollbar-width: thin;
  scrollbar-color: rgb(200 154 161 / 0.42) transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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

/* the night behind everything: slow clouds of rose and plum light, and stars */
.sky {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 14%, var(--pearl) 50%, transparent 52%),
    radial-gradient(1px 1px at 23% 41%, var(--pearl) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 37% 9%, var(--pearl) 50%, transparent 52%),
    radial-gradient(1px 1px at 52% 27%, var(--pearl) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 64% 58%, var(--pearl) 50%, transparent 52%),
    radial-gradient(1px 1px at 78% 19%, var(--pearl) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 89% 47%, var(--pearl) 50%, transparent 52%),
    radial-gradient(1px 1px at 15% 72%, var(--pearl) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 46% 83%, var(--pearl) 50%, transparent 52%),
    radial-gradient(1px 1px at 71% 89%, var(--pearl) 50%, transparent 52%);
  background-size: 460px 460px;
  animation: twinkle 7s ease-in-out infinite alternate;
}

.sky i {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(152 80 94 / 0.34), transparent 62%);
  animation: drift 28s ease-in-out infinite alternate;
}

.sky i:nth-child(1) {
  top: -10vmax;
  left: -36vmax;
}

.sky i:nth-child(2) {
  top: 30vh;
  right: -40vmax;
  background: radial-gradient(circle, rgb(200 154 161 / 0.2), transparent 62%);
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}

.sky i:nth-child(3) {
  bottom: -40vmax;
  left: 10vw;
  background: radial-gradient(circle, rgb(67 50 74 / 0.6), transparent 62%);
  animation-duration: 40s;
}

@keyframes drift {
  to {
    transform: translate3d(12vmax, 8vmax, 0) scale(1.15);
  }
}

@keyframes twinkle {
  to {
    opacity: 0.25;
  }
}

/* a faint grain over everything, so large gradients never band */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

img,
video {
  height: auto;
}

figure {
  margin: 0;
}

h1,
h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

:lang(ja) :is(h1, h2, .title),
:lang(ko) :is(h1, h2, .title) {
  letter-spacing: 0;
  line-height: 1.38;
  font-weight: 500;
}

p {
  margin: 0;
  text-wrap: pretty;
}

:lang(ja) p,
:lang(ko) p {
  line-height: 1.85;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--pearl);
  outline-offset: 4px;
}

::selection {
  background: var(--clay);
  color: var(--pearl);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  z-index: 120;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--pearl);
  color: var(--night-1);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-180%);
}

.skip:focus {
  transform: none;
}

/* ---- type helpers ---- */

.kicker {
  font: 600 0.75rem/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--quartz);
}

:lang(ja) .kicker,
:lang(ko) .kicker {
  letter-spacing: 0.08em;
}

.aside {
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.hour {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 0.8125rem/1 var(--sans);
  letter-spacing: 0.14em;
  color: var(--quartz);
  font-variant-numeric: tabular-nums;
}

.hour svg {
  width: 14px;
  height: 14px;
}

.hour::after {
  content: "";
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, rgb(227 184 184 / 0.7), transparent);
}

.head {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.head > p:last-child {
  color: var(--ink-2);
}

/* ---- the app's materials: pearl knob, clay pill, glass pill ---- */

.knob {
  --size: 56px;
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  color: #74404a;
  background: radial-gradient(circle at 34% 28%, #fffaf6 0 10%, var(--pearl) 36%, #ecccc3 66%, #d4a6aa 100%);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 0.9),
    inset 0 -4px 8px rgb(152 80 94 / 0.32),
    0 10px 22px -8px rgb(12 4 8 / 0.75),
    0 0 0 1px rgb(255 255 255 / 0.18);
}

.knob--sm {
  --size: 40px;
}

.knob > svg {
  width: 44%;
  height: 44%;
}

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 22px 6px 6px;
  border: 0;
  border-radius: 999px;
  font: 600 0.9375rem/1.2 var(--sans);
  color: var(--pearl);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    background-color 0.4s var(--ease);
}

.pill:active {
  transform: scale(0.97);
}

.pill--clay {
  background: linear-gradient(180deg, #ab626e 0%, #8e4d59 50%, #713e48 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 236 226 / 0.35),
    inset 0 -3px 8px rgb(48 14 24 / 0.4),
    0 16px 32px -14px rgb(120 48 66 / 0.8),
    0 2px 6px rgb(20 8 12 / 0.35);
}

.pill--clay:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 236 226 / 0.45),
    inset 0 -3px 8px rgb(48 14 24 / 0.4),
    0 20px 40px -14px rgb(150 64 84 / 0.85),
    0 2px 6px rgb(20 8 12 / 0.35);
}

.pill--glass {
  background: rgb(248 231 220 / 0.1);
  box-shadow:
    inset 0 0 0 1px rgb(248 231 220 / 0.24),
    inset 0 1px 0 rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.pill--glass:hover {
  background: rgb(248 231 220 / 0.16);
}

.pill--sm {
  min-height: 40px;
  gap: 8px;
  padding: 0 14px;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
}

.pill--sm::after {
  /* 48 px to touch, 40 px to see */
  content: "";
  position: absolute;
  inset: -4px;
}

.pill--sm > svg {
  width: 16px;
  height: 16px;
}

/* two-state buttons show one face at a time */
[aria-pressed="true"] .when-off,
[aria-pressed="false"] .when-on,
.is-playing .when-off,
:not(.is-playing) > .ad-play .when-on {
  display: none;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f2c7a8;
  box-shadow: 0 0 0 4px rgb(242 199 168 / 0.16);
}

.chips,
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li,
.tags li {
  padding: 7px 13px;
  border-radius: 999px;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--ink-2);
  background: rgb(248 231 220 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(248 231 220 / 0.14);
}

.chips li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 1px;
  background: radial-gradient(circle at 35% 30%, #fffaf6, var(--quartz));
}

/* ---- the arch: the shape of the app's moon window ---- */

.arch {
  --arch-v: 40%; /* = half the width, in % of the height: 4/5 -> 40 % */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 28px 28px / var(--arch-v) var(--arch-v) 28px 28px;
  background: var(--night-2);
  box-shadow: 0 50px 100px -40px rgb(0 0 0 / 0.75);
}

.arch > img,
.arch > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgb(248 231 220 / 0.22),
    inset 0 -140px 90px -70px rgb(29 18 24 / 0.85);
  pointer-events: none;
}

/* a loop fades in over its still once it really plays */
video[data-src]:not([data-ad]) {
  opacity: 0;
  transition: opacity 1.2s ease;
}

video.is-playing {
  opacity: 1;
}

/* ---- the floating app screen: no device, only the lit screen ---- */

.slab {
  --ry: -12deg;
  --rx: 8deg;
  --sheen: -70%;
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  box-shadow:
    0 0 0 1px rgb(248 231 220 / 0.26),
    0 40px 80px -24px rgb(8 3 6 / 0.85),
    0 0 90px -10px rgb(200 154 161 / 0.35);
  transform: perspective(1400px) rotateY(var(--ry)) rotateX(var(--rx));
}

.slab img {
  width: 100%;
}

.slab::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 32%, rgb(255 255 255 / 0.2) 46%, transparent 60%);
  transform: translateX(var(--sheen));
  pointer-events: none;
}

/* ---- top bar ---- */

.bar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 12px) var(--gutter) 12px;
  transition:
    background-color 0.5s ease,
    box-shadow 0.5s ease;
}

.bar.is-scrolled {
  background: rgb(22 13 18 / 0.5);
  box-shadow: inset 0 -1px 0 rgb(248 231 220 / 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font: 500 1.25rem/1 var(--serif);
  letter-spacing: 0.01em;
  color: var(--pearl);
  text-decoration: none;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.6);
}

.langs {
  position: relative;
}

.langs summary {
  list-style: none;
}

.langs summary::-webkit-details-marker {
  display: none;
}

.langs-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 22px;
  background: rgb(36 22 31 / 0.9);
  box-shadow:
    inset 0 0 0 1px rgb(248 231 220 / 0.16),
    0 24px 48px -16px rgb(0 0 0 / 0.7);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.langs-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.langs-menu a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  color: var(--ink-2);
  text-decoration: none;
}

.langs-menu a:hover,
.langs-menu a[aria-current] {
  color: var(--pearl);
  background: rgb(248 231 220 / 0.08);
}

.langs-menu a[aria-current]::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--quartz);
}

/* ---- scenes that the scroll drives (sticky stage, main.js draws the frames) ---- */

.scene {
  position: relative;
}

.stage {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
  isolation: isolate;
}

.stage-still,
.stage-still img,
.stage-frames {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage-frames {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.is-live .stage-frames {
  opacity: 1;
}

.stage-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 1. intro */

.intro {
  height: 100lvh;
}

.scrub .intro {
  height: 330lvh;
}

.intro .stage {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 14vh), transparent);
  mask-image: linear-gradient(#000 calc(100% - 14vh), transparent);
}

.intro .stage-veil {
  background: linear-gradient(180deg, rgb(20 11 16 / 0.6) 0%, rgb(20 11 16 / 0) 20%, rgb(20 11 16 / 0) 40%, rgb(29 18 24 / 0.8) 76%, rgb(29 18 24 / 0.6) 100%);
}

.intro .stage::after {
  /* main.js darkens the night over the last part of the move */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--night-1);
  opacity: var(--dusk, 0);
  pointer-events: none;
}

.intro-copy {
  position: absolute;
  z-index: 2;
  inset: auto var(--gutter) calc(max(28px, env(safe-area-inset-bottom)) + var(--toolbar));
  display: grid;
  gap: 18px;
  max-width: 35rem;
}

.intro h1 {
  display: grid;
  gap: 14px;
}

.intro .title {
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.016em;
}

.intro .lede {
  max-width: 31rem;
  color: var(--ink-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 4px;
}

.intro-statement {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 0 var(--gutter);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-statement-big {
  max-width: 17em;
  margin-inline: auto;
  font: 400 clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem) / 1.25 var(--serif);
  text-shadow: 0 2px 30px rgb(10 4 8 / 0.7);
  text-wrap: balance;
}

.intro-statement-small {
  font-size: var(--fs-body);
  color: var(--ink-2);
  text-shadow: 0 2px 20px rgb(10 4 8 / 0.8);
}

.scroll-cue {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: calc(max(28px, env(safe-area-inset-bottom)) + var(--toolbar));
  display: none;
  align-items: center;
  gap: 10px;
  writing-mode: vertical-rl;
  font: 600 0.6875rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.scrub .scroll-cue {
  display: flex;
}

.scroll-cue i {
  position: relative;
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: rgb(248 231 220 / 0.2);
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pearl);
  transform: translateY(-100%);
  animation: cue 2.6s var(--ease) infinite;
}

@keyframes cue {
  60%,
  100% {
    transform: translateY(100%);
  }
}

/* the first words of the page rise on their own, before any script runs */
@media (prefers-reduced-motion: no-preference) {
  .intro .kicker,
  .intro .title,
  .intro .lede,
  .intro .actions {
    animation: rise 1.4s var(--ease) both;
  }

  .intro .title {
    animation-delay: 0.15s;
  }

  .intro .lede {
    animation-delay: 0.35s;
  }

  .intro .actions {
    animation-delay: 0.5s;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
  }
}

/* 2. film */

.film {
  display: grid;
  justify-items: center;
  gap: clamp(32px, 5vw, 56px);
  padding: var(--section) var(--gutter);
}

.film-frame {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 9 / 16;
}

.film-glow {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  max-width: none;
  border-radius: 40%;
  filter: blur(48px) saturate(150%);
  opacity: 0.6;
  pointer-events: none;
}

.film-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50% 50% 30px 30px / 28.125% 28.125% 30px 30px;
  background: var(--night-0);
  box-shadow:
    0 0 0 1px rgb(248 231 220 / 0.2),
    0 50px 100px -40px rgb(0 0 0 / 0.85);
}

.film-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-sound {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 18px;
  transform: translateX(50%);
  white-space: nowrap;
}

.film-sound:active {
  transform: translateX(50%) scale(0.97);
}

.film-sound .ring {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  transform: rotate(-90deg);
  pointer-events: none;
}

.film-sound .ring circle {
  fill: none;
  stroke: var(--pearl);
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: var(--played, 100);
  opacity: 0.9;
}

@media (min-width: 760px) and (min-aspect-ratio: 1 / 1) {
  .film-frame {
    width: min(100%, 1120px);
    aspect-ratio: 16 / 9;
  }

  .film-screen {
    border-radius: 220px 220px 32px 32px;
  }

  .film-sound {
    right: 24px;
    bottom: 24px;
    transform: none;
  }

  .film-sound:active {
    transform: scale(0.97);
  }
}

/* ---- chapters: one feature, one hour of the night ---- */

.chapter {
  position: relative;
  display: grid;
  gap: clamp(36px, 6vw, 80px);
  padding: var(--section) var(--inline);
}

.chapter-copy {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 16px;
  max-width: 31rem;
}

.chapter-copy > p:not(.hour, .aside) {
  color: var(--ink-2);
}

.chapter-copy .chips {
  margin-top: 6px;
}

/* 3. routine */

.chapter-visual {
  position: relative;
  display: grid;
}

.routine .arch {
  width: 84%;
}

.slab--right {
  justify-self: end;
  width: 50%;
  max-width: 280px;
  margin-top: -58%;
}

/* 4. sounds */

.sounds {
  isolation: isolate;
  overflow: hidden;
}

.sounds-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}

.sounds-bg img,
.sounds-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sounds-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(29 18 24 / 0.6);
}

.orbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orb {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.orb img,
.room-orb img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%);
  mask-image: radial-gradient(circle, #000 58%, transparent 71%);
}

.orb img {
  max-width: 128px;
  transition:
    transform 0.6s var(--ease),
    filter 0.6s var(--ease);
}

.orb span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font: 600 var(--fs-small) / 1.2 var(--sans);
  color: var(--ink-2);
}

.orb[aria-pressed="true"] img {
  transform: scale(1.08);
  filter: brightness(1.15) drop-shadow(0 0 24px rgb(248 231 220 / 0.5));
}

.orb[aria-pressed="true"] span {
  color: var(--pearl);
}

.orb[aria-pressed="true"] span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--quartz);
  animation: blink 1.2s ease-in-out infinite;
}

.orb.is-loading img {
  filter: brightness(0.8);
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}

.sounds-more {
  display: grid;
  gap: 14px;
  max-width: 44rem;
}

.label {
  font: 600 0.75rem/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* 5. the 3D mixer */

.room-wrap {
  display: grid;
  justify-items: center;
  gap: 22px;
}

.room {
  position: relative;
  width: min(100%, 380px, 46svh);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(248 231 220 / 0.08) 0, rgb(248 231 220 / 0.03) 46%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgb(248 231 220 / 0.14);
  touch-action: none;
  user-select: none;
}

.room-ring {
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(248 231 220 / 0.1);
}

.room-ring--2 {
  inset: 37%;
}

.is-playing .room-ring {
  animation: ripple 3.2s ease-out infinite;
}

.is-playing .room-ring--2 {
  animation-delay: 1.6s;
}

@keyframes ripple {
  from {
    box-shadow: inset 0 0 0 1px rgb(248 231 220 / 0.3);
  }
}

.room-axis {
  position: absolute;
  font: 600 0.625rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.room-axis--front {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.room-axis--back {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.room-axis--left {
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.room-axis--right {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.room-head {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 36% 30%, #fff6ef 0, var(--blush) 32%, #dcb0aa 70%, #a97b80 100%);
  box-shadow:
    inset 0 -6px 12px rgb(120 60 70 / 0.35),
    0 18px 30px -10px rgb(0 0 0 / 0.65);
}

.room-head i {
  /* the nose shows where "front" is */
  position: absolute;
  top: -9%;
  left: 50%;
  width: 22%;
  height: 22%;
  border-radius: 50% 50% 40% 40%;
  transform: translateX(-50%);
  background: #e7c2b9;
}

.room-orb {
  --x: 0;
  --y: 0;
  position: absolute;
  top: calc(50% + var(--y) * 40%);
  left: calc(50% + var(--x) * 40%);
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 25%;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  transform: translate(-50%, -38%);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.room-orb[data-place="rain"] {
  --x: -0.66;
  --y: -0.36;
}

.room-orb[data-place="fire"] {
  --x: 0.5;
  --y: 0.6;
}

.room-orb[data-place="whisper"] {
  --x: 0.52;
  --y: -0.56;
}

.room-orb span {
  font: 600 0.6875rem/1.2 var(--sans);
  color: var(--ink-2);
  white-space: nowrap;
}

.room-orb.is-dragging {
  cursor: grabbing;
  z-index: 2;
}

.room-orb.is-dragging img {
  transform: scale(1.12);
}

.room-orb img {
  transition: transform 0.4s var(--ease);
}

.is-playing .room-orb img {
  animation: breathe 3s ease-in-out infinite;
}

.is-playing .room-orb:nth-of-type(2) img {
  animation-delay: -1s;
}

.is-playing .room-orb:nth-of-type(3) img {
  animation-delay: -2s;
}

@keyframes breathe {
  50% {
    filter: brightness(1.2) drop-shadow(0 0 16px rgb(248 231 220 / 0.45));
  }
}

.room-controls {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.room-help {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 24rem;
  font-size: var(--fs-small);
  color: var(--ink-3);
  text-align: start;
}

.room-help svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--quartz);
}

.slab--mixer {
  --ry: 10deg;
  width: min(86%, 380px);
  justify-self: center;
}

/* 6. the sleep timer */

.dial-wrap {
  display: grid;
  justify-items: center;
  gap: 24px;
}

.dial {
  position: relative;
  width: min(78vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  container-type: size;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  background: radial-gradient(circle, rgb(248 231 220 / 0.07) 0, transparent 68%);
}

.dial:focus-visible {
  outline-offset: 8px;
  border-radius: 50%;
}

.dial-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.dial-ticks {
  fill: none;
  stroke: rgb(248 231 220 / 0.22);
  stroke-width: 6;
  stroke-dasharray: 1.4 34.9; /* 18 marks, one every 5 minutes */
}

.dial-track {
  fill: none;
  stroke: rgb(248 231 220 / 0.1);
  stroke-width: 14;
}

.dial-fill {
  fill: none;
  stroke: url("#dial-grad");
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 667; /* 30 of 90 minutes until main.js runs */
}

.dial-knob {
  --size: 44px;
  --angle: 120deg;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-38.33cqw) rotate(calc(var(--angle) * -1));
  pointer-events: none;
}

.dial-read {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}

.dial-value {
  font: 400 clamp(3rem, 2.4rem + 2vw, 4rem) / 1 var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
}

.dial-unit {
  margin-top: 4px;
  font: 600 0.75rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dial-end {
  max-width: 11rem;
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--quartz);
}

.dial.is-fading .dial-fill {
  stroke: var(--quartz);
}

/* 7. offline */

.offline {
  height: 100lvh;
}

.scrub .offline {
  height: 260lvh;
}

.offline-window {
  position: absolute;
  inset: 0;
}

@media (max-width: 959px) {
  .offline .stage {
    -webkit-mask-image: linear-gradient(transparent, #000 12vh, #000 calc(100% - 12vh), transparent);
    mask-image: linear-gradient(transparent, #000 12vh, #000 calc(100% - 12vh), transparent);
  }
}

.offline .stage-veil {
  background: linear-gradient(180deg, rgb(29 18 24 / 0.5) 0%, rgb(29 18 24 / 0) 24%, rgb(29 18 24 / 0) 44%, rgb(29 18 24 / 0.84) 76%, rgb(29 18 24 / 0.7) 100%);
}

.slab--player {
  position: absolute;
  z-index: 2;
  top: calc(env(safe-area-inset-top) + 84px);
  left: 50%;
  width: min(46%, 230px);
  margin-left: calc(min(46%, 230px) / -2);
  --ry: -8deg;
}

.offline-copy {
  position: absolute;
  z-index: 2;
  inset: auto var(--gutter) calc(max(32px, env(safe-area-inset-bottom)) + var(--toolbar));
}

/* 8. voices */

.voices {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  padding: var(--section) var(--gutter);
}

.voice-list {
  display: grid;
  gap: 12px;
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.voice {
  border-radius: 28px;
  background: linear-gradient(180deg, rgb(248 231 220 / 0.075), rgb(248 231 220 / 0.035));
  box-shadow: inset 0 0 0 1px rgb(248 231 220 / 0.12);
  transition:
    background-color 0.5s ease,
    box-shadow 0.5s ease;
}

.voice.is-playing {
  background-color: rgb(200 154 161 / 0.12);
  box-shadow:
    inset 0 0 0 1px rgb(248 231 220 / 0.24),
    0 24px 60px -30px rgb(200 154 161 / 0.5);
}

.voice-play {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 12px 18px 12px 12px;
  border: 0;
  border-radius: 28px;
  background: none;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.voice-play .knob {
  grid-row: span 2;
}

.voice-play[aria-pressed="true"] .knob svg:first-child,
.voice-play[aria-pressed="false"] .knob svg:last-child {
  display: none;
}

.voice-name {
  font: 400 1.25rem/1.25 var(--serif);
}

.voice-meta {
  grid-column: 2;
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.voice-wave {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
}

.voice-wave i {
  width: 3px;
  height: 30%;
  border-radius: 2px;
  background: var(--ink-3);
  transform-origin: center;
}

.voice.is-playing .voice-wave i {
  background: var(--quartz);
  animation: wave 1.1s ease-in-out infinite;
}

.voice-wave i:nth-child(2) {
  animation-delay: -0.2s;
}

.voice-wave i:nth-child(3) {
  animation-delay: -0.5s;
}

.voice-wave i:nth-child(4) {
  animation-delay: -0.8s;
}

.voice-wave i:nth-child(5) {
  animation-delay: -0.35s;
}

@keyframes wave {
  50% {
    height: 100%;
  }
}

.voice-caption {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 22px;
  font: 400 1.0625rem/1.55 var(--serif);
  color: rgb(248 231 220 / 0.4);
  transition:
    grid-template-rows 0.6s var(--ease),
    padding 0.6s var(--ease);
}

.voice-caption > span {
  overflow: hidden;
}

.voice.is-playing .voice-caption {
  grid-template-rows: 1fr;
  padding: 0 22px 20px;
}

.voice-caption .w {
  transition: color 0.25s ease;
}

.voice-caption .w.is-past {
  color: var(--ink-2);
}

.voice-caption .w.is-now {
  color: var(--pearl);
  text-shadow: 0 0 18px rgb(248 231 220 / 0.55);
}

/* 9. short films */

.ads {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  padding: var(--section) 0;
}

.ads .head {
  padding-inline: var(--gutter);
}

.ad-list {
  display: grid;
  grid-auto-columns: min(70vw, 300px);
  grid-auto-flow: column;
  gap: 16px;
  margin: 0;
  padding: 8px var(--gutter) 24px;
  overflow-x: auto;
  list-style: none;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.ad-list::-webkit-scrollbar {
  display: none;
}

.ad {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 50% 50% 26px 26px / 28.125% 28.125% 26px 26px;
  background: var(--night-0);
  box-shadow:
    0 0 0 1px rgb(248 231 220 / 0.18),
    0 40px 70px -40px rgb(0 0 0 / 0.85);
  scroll-snap-align: start;
}

.ad video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgb(20 11 16 / 0.82));
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.ad.is-playing::after {
  opacity: 0;
}

.ad-play {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ad-play .knob {
  --size: 64px;
  transition:
    opacity 0.4s ease,
    transform 0.4s var(--ease);
}

.ad.is-playing .ad-play .knob {
  opacity: 0;
  transform: scale(0.9);
}

.ad.is-playing .ad-play:focus-visible .knob,
.ad.is-playing:hover .ad-play .knob {
  opacity: 1;
  transform: none;
}

.ad.is-loading .ad-play .knob {
  opacity: 1;
  animation: wait 1.1s ease-in-out infinite;
}

@keyframes wait {
  50% {
    opacity: 0.55;
    transform: scale(0.92);
  }
}

.ad figcaption {
  position: absolute;
  z-index: 1;
  inset: auto 18px 18px;
  font: 400 1.0625rem/1.3 var(--serif);
  text-shadow: 0 2px 16px rgb(0 0 0 / 0.6);
  transition: opacity 0.5s ease;
}

.ad.is-playing figcaption {
  opacity: 0;
}

/* 10. dawn */

.dawn {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 100lvh;
  padding: 0 var(--gutter) var(--section);
}

.dawn-window {
  position: absolute;
  inset: 0 0 0;
  z-index: -1;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / min(50vw, 56lvh) min(50vw, 56lvh) 0 0;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}

.dawn-window img,
.dawn-window video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dawn-window::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(29 18 24 / 0) 30%, rgb(29 18 24 / 0.6) 66%);
  box-shadow: inset 0 1px 0 rgb(248 231 220 / 0.3);
}

.dawn-copy {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

.dawn-copy > p:not(.status) {
  color: var(--ink-2);
}

.dawn-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.2),
    0 18px 40px -12px rgb(0 0 0 / 0.7),
    0 0 60px rgb(244 213 197 / 0.35);
}

/* ---- footer ---- */

.foot {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 40px var(--gutter) calc(36px + env(safe-area-inset-bottom));
  font-size: var(--fs-small);
  text-align: center;
  color: var(--ink-3);
  box-shadow: inset 0 1px 0 rgb(248 231 220 / 0.08);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
}

.foot-links a:hover {
  color: var(--pearl);
}

.foot-legal {
  max-width: 40rem;
}

/* ---- the 404 page ---- */

.lost {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  min-height: 100svh;
  padding: var(--gutter);
  text-align: center;
}

.lost h1 {
  font-size: var(--fs-h1);
}

.lost-langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lost-langs .pill {
  padding: 6px 22px;
  background: rgb(248 231 220 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(248 231 220 / 0.24);
}

/* ---- the privacy policy and the terms: a dawn arch, then numbered sections ---- */

.legal {
  width: min(100% - 2 * var(--gutter), 44rem);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 112px) 0 var(--section);
}

.legal-head {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-bottom: clamp(36px, 6vw, 64px);
  text-align: center;
}

.legal-arch {
  width: clamp(104px, 20vw, 144px);
  aspect-ratio: 3 / 4;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 999px 999px 20px 20px;
  box-shadow:
    0 0 0 1px var(--rim),
    0 0 90px -10px rgb(200 154 161 / 0.32),
    0 34px 60px -30px rgb(0 0 0 / 0.9);
}

.legal-arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legal h1 {
  margin: 0;
  font: 400 var(--fs-h1)/1.08 var(--serif);
  text-wrap: balance;
}

.legal-updated {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.legal-intro {
  max-width: 34rem;
  margin: 8px 0 14px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.legal-section {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 12px;
  padding: clamp(26px, 4vw, 36px) 0;
  box-shadow: inset 0 1px 0 rgb(248 231 220 / 0.08);
}

.legal-section > * {
  grid-column: 2;
}

.legal-num {
  grid-column: 1;
  grid-row: 1;
  font: italic 400 1.125rem/1.6 var(--serif);
  color: var(--quartz);
}

.legal-section h2 {
  margin: 0 0 12px;
  font: 400 clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem)/1.3 var(--serif);
}

.legal-section p {
  margin: 0 0 12px;
  color: var(--ink-2);
}

.legal-section ul {
  display: grid;
  gap: 14px;
  margin: 4px 0 16px;
  padding: 0;
  list-style: none;
}

.legal-section li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--ink-2);
}

.legal-section li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  inset-inline-start: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--quartz);
  box-shadow: 0 0 10px rgb(227 184 184 / 0.7);
}

.legal-section strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--pearl);
}

@media (max-width: 559px) {
  .legal-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-section > *,
  .legal-num {
    grid-column: 1;
  }

  .legal-num {
    grid-row: auto;
    font-size: 1rem;
  }
}

/* ---- wide screens ---- */

@media (min-width: 960px) {
  .chapter {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }

  .chapter-copy {
    grid-column: 1 / span 5;
  }

  .chapter-visual,
  .room-wrap,
  .dial-wrap {
    grid-column: 7 / -1;
  }

  .routine .arch {
    width: 78%;
  }

  .slab--right {
    width: 44%;
    margin-top: -62%;
  }

  .sounds .chapter-copy {
    grid-column: 1 / span 5;
  }

  .orbs {
    grid-column: 6 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sounds-more {
    grid-column: 1 / span 5;
  }

  .mixer .chapter-copy {
    grid-column: 1 / span 4;
  }

  .mixer .room-wrap {
    grid-column: 5 / span 5;
  }

  .room {
    width: min(100%, 460px, 60svh);
  }

  .slab--mixer {
    grid-column: 10 / -1;
    width: 100%;
  }

  .timer .dial-wrap {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .timer .chapter-copy {
    grid-column: 7 / -1;
  }

  .dial {
    width: 340px;
  }

  .offline .stage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    padding: 0 var(--inline);
  }

  .offline-window {
    position: relative;
    inset: auto;
    grid-column: 1 / span 5;
    grid-row: 1;
    height: min(78lvh, 760px);
    overflow: hidden;
    border-radius: 50% 50% 28px 28px / 28% 28% 28px 28px;
    box-shadow:
      0 0 0 1px rgb(248 231 220 / 0.22),
      0 50px 100px -40px rgb(0 0 0 / 0.8);
  }

  .offline .stage-veil {
    display: none;
  }

  .slab--player {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 4 / span 3;
    grid-row: 1;
    width: 100%;
    margin: 18% 0 0;
  }

  .offline-copy {
    position: relative;
    inset: auto;
    grid-column: 8 / -1;
    grid-row: 1;
  }

  .voice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    width: min(100%, 980px);
  }

  .ad-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 300px));
    justify-content: center;
    overflow: visible;
  }
}

/* ---- calm mode ---- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .slab {
    transform: none;
  }
}