:root {
  --sc-canvas: var(--canvas);
  --sc-surface: var(--ink);
  --sc-ink: var(--white);
  --sc-ink-soft: var(--warm-gray);
  --sc-accent: var(--mist);
  --sc-accent-ink: var(--ink);
  --sc-font-display: var(--font);
  --sc-font-text: var(--font);
  --sc-gutter: var(--pad-x);
}
:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body {
  font-family: var(--font);
  color: var(--white);
  background: var(--sc-canvas);
}
.world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--canvas);
  pointer-events: none;
}
.world__plate {
  position: absolute;
  inset: -3%;
  background-size: cover;
  background-position: center;
  filter: brightness(.5) contrast(1.1) blur(.7px);
  transform: translate3d(0, var(--plate-y, 0px), 0) scale(var(--plate-s, 1.04));
  will-change: transform, opacity;
}
.world__plate--whole {
  background-image: url(/public/plates/d1-whole.jpg);
  opacity: var(--open, 1);
}
.world__plate--bare {
  background-image: url(/public/plates/d1-bare.jpg);
  opacity: calc(var(--bare, 0) * var(--open, 1));
  filter: brightness(.46) contrast(1.12) blur(.7px);
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 165px,
      #000 220px);
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 165px,
      #000 220px);
}
.world__vessel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.world.is-ready .world__vessel {
  opacity: var(--bowl, 1);
  filter: blur(var(--dive-blur, 0px));
}
.world.is-rising .world__vessel,
.world.is-rising .world__poster {
  transition: none;
}
.world__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 600ms var(--ease-out);
  opacity: var(--bowl, 1);
}
.world__poster img {
  position: absolute;
  left: var(--poster-l, 0);
  top: var(--poster-t, 0);
  width: var(--poster-w, 100%);
  height: var(--poster-h, 100%);
  max-width: none;
  object-fit: cover;
  display: block;
}
@media (min-width: 701px) and (min-aspect-ratio: 9/10) {
  .world__poster img {
    --h: 100dvh;
    width: var(--poster-w, calc(var(--h) * 16 / 9));
    height: var(--poster-h, var(--h));
    left: var(--poster-l, calc((100% - var(--h) * 16 / 9) * 0.7));
    top: var(--poster-t, 0px);
  }
}
@media (max-width: 700px) {
  .world__poster img {
    --h: 100dvh;
    width: var(--poster-w, calc(var(--h) * 390 / 844));
    height: var(--poster-h, var(--h));
    left: var(--poster-l, calc((100% - var(--h) * 390 / 844) * 0.492));
    top: var(--poster-t, calc(0.6 * max(0px, 100vw - 0.47 * var(--h))));
  }
}
.world__poster--cracked {
  opacity: calc(var(--cracked, 0) * var(--bowl, 1));
}
.world__poster--gold {
  opacity: calc(var(--gold-poster, 0) * var(--bowl, 1));
}
.world__poster--repaired {
  opacity: calc(var(--repaired, 0) * var(--bowl, 1));
}
.world.is-ready .world__poster {
  opacity: 0;
  transition: opacity 0s linear 900ms;
}
.poster-mode,
.poster-mode body,
.poster-mode .world {
  background: transparent !important;
}
.goldmask-mode body,
.goldmask-mode .world {
  background: #000 !important;
}
.goldmask-mode .bar,
.goldmask-mode main,
.goldmask-mode .foot,
.goldmask-mode .world > :not(.world__vessel) {
  visibility: hidden !important;
}
.goldmask-mode .world__vessel {
  filter: none !important;
}
.poster-mode .bar,
.poster-mode main,
.poster-mode .foot,
.poster-mode .world__plate,
.poster-mode .world__beam,
.poster-mode .world__grain,
.poster-mode .world__poster {
  display: none !important;
}
.world__beam {
  position: absolute;
  width: 34vw;
  height: 170vh;
  left: 0;
  top: -40vh;
  transform: translateX(var(--beam-x, 50vw)) rotate(24deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(247, 243, 234, .05) 30%,
      rgba(247, 243, 234, .085) 50%,
      rgba(247, 243, 234, .045) 70%,
      transparent);
  filter: blur(30px);
  mix-blend-mode: screen;
  opacity: var(--beam, .9);
  will-change: opacity, transform;
}
.world__grain {
  position: absolute;
  inset: -50%;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: var(--grain);
}
.bar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad-x);
  pointer-events: none;
}
.bar > * {
  pointer-events: auto;
}
.bar__logo {
  position: relative;
  display: block;
}
.bar__logo img {
  height: 64px;
  width: auto;
  display: block;
  transition: opacity 200ms ease;
}
.bar__nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.bar__nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  letter-spacing: .005em;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--ease-out), color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .bar__nav a:hover {
    border-color: rgba(247, 243, 234, .5);
  }
}
.bar {
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease,
    opacity 200ms ease,
    visibility 0s linear 0s;
}
.bar--over {
  background: var(--canvas);
  box-shadow: 0 1px 0 rgba(247, 243, 234, .06);
}
main {
  position: relative;
  z-index: 2;
}
.stage {
  pointer-events: none;
}
.scrim {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      closest-side,
      rgba(9, 11, 9, .62),
      rgba(9, 11, 9, 0));
}
.scrim--hero {
  left: -14vw;
  top: 12vh;
  width: 66vw;
  height: 84vh;
}
.scrim--lines {
  left: -10vw;
  top: 44vh;
  width: 56vw;
  height: 60vh;
}
.hero {
  position: absolute;
  z-index: 1;
  left: var(--pad-x);
  top: 26vh;
  width: min(640px, 46vw);
}
.hero__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--warm-gray);
  letter-spacing: .02em;
  margin: 0 0 20px;
}
.hero__title {
  font-weight: 500;
  font-size: clamp(44px, 3.75vw, 64px);
  line-height: 1.04;
  letter-spacing: -.028em;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
  max-width: 11em;
}
.hero__lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--warm-gray);
  margin: 22px 0 0;
  max-width: 30em;
  text-wrap: pretty;
}
.doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 40px;
  width: min(590px, 100%);
}
.door {
  display: block;
  padding: 22px 24px 24px;
  background: rgba(17, 20, 17, .82);
  border: 1px solid rgba(247, 243, 234, .16);
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(247, 243, 234, .06);
  text-decoration: none;
  color: var(--white);
  transition:
    border-color 160ms var(--ease-out),
    transform 160ms var(--ease-out),
    background-color 160ms var(--ease-out);
}
.door:active {
  transform: translateY(1px);
}
@media (hover: hover) and (pointer: fine) {
  .door:hover {
    border-color: rgba(145, 164, 163, .55);
    background: rgba(23, 48, 56, .55);
    transform: translateY(-2px);
  }
}
.door__k {
  font-size: 23px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: -.01em;
}
.door__k svg,
.btn svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--mist);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.door__d {
  display: block;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--warm-gray);
  margin-top: 10px;
}
.door__d:empty {
  display: none;
}
.lines {
  position: absolute;
  z-index: 1;
  left: var(--pad-x);
  top: 58vh;
  width: min(620px, 44vw);
}
.line {
  font-size: clamp(26px, 1.9vw, 32px);
  line-height: 1.3;
  font-weight: 400;
  color: var(--white);
  letter-spacing: -.01em;
  margin: 0;
}
.line + .line {
  margin-top: 10px;
}
.line--soft {
  color: var(--warm-gray);
}
.scrim--ask {
  left: -16vw;
  top: 0;
  width: 64vw;
  height: 100vh;
  background:
    radial-gradient(
      closest-side,
      rgba(9, 11, 9, .7),
      rgba(9, 11, 9, 0));
}
.ask {
  position: absolute;
  z-index: 3;
  left: var(--pad-x);
  top: 15vh;
  width: min(520px, 36vw);
}
.ask__title {
  font-weight: 500;
  font-size: clamp(36px, 3.05vw, 46px);
  line-height: 1.08;
  letter-spacing: -.022em;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
}
.ask__sub {
  font-size: 19px;
  line-height: 1.5;
  color: var(--warm-gray);
  margin: 16px 0 0;
  text-wrap: pretty;
}
.ask__switch {
  font: inherit;
  color: var(--white);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(247, 243, 234, .42);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  transition: text-decoration-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .ask__switch:hover {
    text-decoration-color: var(--white);
  }
}
.no-js .ask__switch {
  display: none;
}
.panel__switch {
  display: none;
}
.act:focus {
  outline: none;
}
.pick {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.pick__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.pick__lines line {
  stroke: rgba(247, 243, 234, .62);
  stroke-width: 1;
}
.pick__lines circle {
  fill: var(--white);
  stroke: rgba(247, 243, 234, .2);
  stroke-width: 8;
  paint-order: stroke;
}
.pick__lines .dim {
  opacity: .34;
}
.pick__lines line.on {
  stroke: rgba(247, 243, 234, .92);
}
.pick__topics {
  position: absolute;
  inset: 0;
}
.topic {
  position: absolute;
  left: 0;
  top: 0;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(247, 243, 234, .22);
  background: rgba(9, 11, 9, .8);
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .35);
  transition:
    transform 160ms var(--ease-out),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}
.topic:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .topic:hover {
    border-color: rgba(145, 164, 163, .75);
  }
}
.topic.is-on {
  background: var(--mineral);
  border-color: rgba(145, 164, 163, .7);
}
.topic.is-dim {
  color: #ADA99F;
  background: rgba(9, 11, 9, .95);
  border-color: rgba(247, 243, 234, .12);
}
.panel {
  position: absolute;
  z-index: 3;
  left: var(--pad-x);
  top: calc(15vh + 196px);
  width: min(470px, 34vw);
}
.panel:not([hidden]) {
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
@starting-style {
  .panel:not([hidden]) {
    opacity: 0;
    transform: translateY(8px);
  }
}
.scrim--panel {
  left: -12vw;
  top: 30vh;
  width: 58vw;
  height: 80vh;
  opacity: 0;
  transition: opacity 300ms ease;
}
.act--question .stage:has(.pick.is-open) .scrim--panel {
  opacity: 1;
}
.opts__q {
  font-size: 15px;
  font-weight: 500;
  color: var(--warm-gray);
  letter-spacing: .02em;
  margin: 0 0 12px;
  outline: none;
}
.opts__list {
  display: grid;
  gap: 8px;
}
.opt {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(247, 243, 234, .18);
  background: rgba(9, 11, 9, .82);
  cursor: pointer;
  transition:
    transform 160ms var(--ease-out),
    background-color 180ms ease,
    border-color 180ms ease;
}
.opt:active {
  transform: scale(0.985);
}
@media (hover: hover) and (pointer: fine) {
  .opt:hover {
    border-color: rgba(145, 164, 163, .7);
  }
}
.btn--mineral {
  padding: 16px 24px;
  color: var(--white);
  background: var(--mineral);
  border: 1px solid rgba(145, 164, 163, .38);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .35);
}
.btn--mineral:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .btn--mineral:hover {
    border-color: rgba(145, 164, 163, .8);
    background: #1B3A44;
  }
}
.skip {
  position: absolute;
  z-index: 2;
  left: var(--pad-x);
  bottom: 7vh;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  font-size: 15px;
  color: var(--warm-gray);
}
.skip__links {
  display: inline-flex;
  gap: 18px;
  white-space: nowrap;
}
.skip a {
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 243, 234, .4);
  padding: 2px 0;
}
@media (hover: hover) and (pointer: fine) {
  .skip a:hover {
    border-color: rgba(247, 243, 234, .85);
  }
}
.crack-list {
  display: none;
}
.no-js .pick {
  display: none;
}
.no-js .crack-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px 40px;
  position: relative;
  z-index: 1;
  padding: calc(15vh + 150px) var(--pad-x) 14vh;
}
.crack-list h3 {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--white);
}
.crack-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.crack-list p {
  margin: 0;
  color: var(--warm-gray);
  font-size: 16px;
  line-height: 1.45;
}
.crack-list .crack-list__opt {
  color: var(--white);
  font-weight: 500;
}
.crack-list__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 4px !important;
}
.crack-list a {
  color: var(--white);
}
.no-js .crack-list--team {
  padding-top: 0;
}
.crack-list__title {
  grid-column: 1 / -1;
  font-weight: 500;
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
}
.scene {
  position: relative;
  z-index: 1;
  color: var(--white);
}
.scene--proof {
  padding: 34vh 0 36vh;
  background:
    linear-gradient(
      to bottom,
      rgba(9, 11, 9, 0) 0,
      var(--canvas) 26vh,
      var(--canvas) calc(100% - 26vh),
      rgba(9, 11, 9, 0) 100%);
}
.scene--proof::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: var(--grain);
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      #000 26vh,
      #000 calc(100% - 26vh),
      transparent 100%);
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      #000 26vh,
      #000 calc(100% - 26vh),
      transparent 100%);
}
.scene__body {
  position: relative;
  z-index: 1;
  padding: 0 var(--pad-x);
}
.scene :focus-visible {
  outline-color: var(--mist);
}
.proof {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "afilm about" "quotes qfilm" "trusted trusted";
  gap: 14vh 6vw;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.about {
  grid-area: about;
}
.about__bowl {
  margin: 0 0 18px;
  max-width: 460px;
}
.about__bowl img {
  display: block;
  width: 100%;
  height: auto;
}
.about__eyebrow {
  font-size: 15px;
  font-weight: 500;
  color: var(--mist);
  letter-spacing: .02em;
  margin: 0;
}
.about__title {
  font-size: clamp(30px, 2.4vw, 38px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--white);
  margin: 10px 0 0;
}
.about__line {
  font-size: 17px;
  line-height: 1.5;
  color: var(--warm-gray);
  margin: 14px 0 0;
  max-width: 28em;
  text-wrap: pretty;
}
.about__more {
  margin: 18px 0 0;
}
.about__link {
  font-size: 18px;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 243, 234, .4);
  padding-bottom: 3px;
  transition: border-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .about__link:hover {
    border-color: var(--white);
  }
}
.film {
  margin: 0;
  min-width: 0;
}
.film--about {
  grid-area: afilm;
}
.film--quote {
  grid-area: qfilm;
}
.film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(247, 243, 234, .08);
}
.film__frame {
  position: relative;
}
.film__play {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  border: 1px solid rgba(247, 243, 234, .18);
  color: var(--white);
  font: 500 15px/1 var(--font);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.film__play[hidden] {
  display: none;
}
.film__play svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .film__play:hover {
    border-color: rgba(247, 243, 234, .5);
  }
}
.film__play:focus-visible {
  outline: 2px solid var(--mist);
  outline-offset: 3px;
}
.film figcaption {
  margin-top: 14px;
  font-size: 16px;
  color: var(--warm-gray);
  text-wrap: balance;
}
.film figcaption b {
  font-weight: 500;
  color: var(--white);
}
.quotes {
  grid-area: quotes;
  display: grid;
  gap: 44px;
}
.scene .quote p {
  color: var(--white);
}
.scene .quote figcaption {
  color: var(--warm-gray);
}
.scene .quote figcaption b {
  color: var(--white);
}
.quote--lead p {
  font-size: clamp(25px, 2.05vw, 31px);
  line-height: 1.34;
  letter-spacing: -.012em;
}
.trusted {
  grid-area: trusted;
  min-width: 0;
}
.proof .logos {
  margin-top: 0;
  border-top-color: rgba(247, 243, 234, .12);
}
.proof .logos__h {
  color: var(--warm-gray);
}
.proof .logos__pause {
  color: var(--warm-gray);
  border-color: rgba(247, 243, 234, .4);
}
@media (hover: hover) and (pointer: fine) {
  .proof .logos__pause:hover {
    color: var(--white);
    border-color: rgba(247, 243, 234, .8);
  }
}
.proof .logos__img {
  filter: brightness(0) invert(1);
  opacity: .74;
}
.proof .logos__img[data-mode=contrast] {
  filter: grayscale(1) contrast(6) invert(1);
  opacity: .8;
}
.proof .logos__img[data-mode=gray] {
  filter: grayscale(1) brightness(.62) contrast(1.35) invert(1);
  opacity: 1;
}
.proof .logos__name {
  color: var(--warm-gray);
}
.scrim--close {
  left: 18vw;
  top: 56vh;
  width: 64vw;
  height: 46vh;
}
.close {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 71vh;
  text-align: center;
  padding: 0 var(--pad-x);
}
.close__line {
  font-size: 16px;
  line-height: 1.5;
  color: var(--warm-gray);
  margin: 18px auto 0;
  max-width: 30em;
  text-wrap: balance;
}
.foot {
  position: relative;
  z-index: 2;
}
@media (max-width: 700px) {
  .bar {
    padding: 14px 18px;
  }
  .bar__logo img {
    height: 48px;
  }
  .bar__nav {
    gap: 18px;
  }
  .bar__nav a[data-door] {
    display: none;
  }
  .bar__nav a {
    font-size: 15px;
  }
}
@media (max-width: 700px), (max-aspect-ratio: 9/10) {
  .world__plate--whole {
    background-image: url(/public/plates/d2-whole.jpg);
  }
  .world__plate--bare {
    background-image: url(/public/plates/d2-bare.jpg);
  }
  .scrim--hero {
    left: -30vw;
    top: 4vh;
    width: 160vw;
    height: 58vh;
  }
  .hero {
    left: var(--pad-x);
    right: var(--pad-x);
    top: 13vh;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: auto;
    display: flex;
    flex-direction: column;
  }
  .hero__name {
    margin-bottom: 12px;
  }
  .hero__title {
    font-size: clamp(31px, 8.6vw, 36px);
    line-height: 1.08;
  }
  .hero__lede {
    font-size: 16.5px;
    margin-top: 14px;
  }
  .doors {
    width: auto;
    margin: auto 0 0;
    gap: 10px;
  }
  .door {
    padding: 15px 14px 17px;
    border-radius: 12px;
    min-height: 44px;
  }
  .door__k {
    font-size: 17px;
    white-space: nowrap;
    gap: 6px;
  }
  .door__d {
    font-size: 13.5px;
  }
  .scrim--lines {
    left: -30vw;
    top: 58vh;
    width: 160vw;
    height: 60vh;
  }
  .lines {
    left: var(--pad-x);
    right: var(--pad-x);
    top: auto;
    bottom: 9vh;
    width: auto;
  }
  .line {
    font-size: 23px;
  }
  .scrim--ask {
    left: -30vw;
    top: -4vh;
    width: 160vw;
    height: 40vh;
  }
  .ask {
    left: var(--pad-x);
    right: var(--pad-x);
    top: 11.5vh;
    width: auto;
    transition: opacity 240ms ease;
  }
  .ask__title {
    font-size: clamp(28px, 7.6vw, 34px);
  }
  .ask__sub {
    font-size: 16.5px;
    margin-top: 10px;
  }
  .act--question .stage:has(.pick.is-open) .ask {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .scrim--ask {
    transition: opacity 240ms ease;
  }
  .act--question .stage:has(.pick.is-open) .scrim--ask {
    opacity: 0;
  }
  .pick__topics {
    inset: auto 0 auto 0;
    top: 64vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
  }
  .pick.is-compact .topic {
    position: static;
  }
  .topic {
    font-size: 16px;
    padding: 11px 15px;
  }
  .panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-height: 64vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px var(--pad-x) max(20px, env(safe-area-inset-bottom));
    background: rgba(11, 13, 11, .96);
    border-top: 1px solid rgba(247, 243, 234, .12);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, .45);
  }
  .panel:not([hidden]) {
    transition: transform 320ms var(--ease-drawer), opacity 200ms ease;
  }
  @starting-style {
    .panel:not([hidden]) {
      transform: translateY(100%);
      opacity: 1;
    }
  }
  .scrim--panel {
    display: none;
  }
  .panel__switch {
    display: block;
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--warm-gray);
  }
  .opt {
    font-size: 16px;
    padding: 12px 14px;
  }
  .skip {
    bottom: max(20px, 3vh);
    right: var(--pad-x);
    gap: 4px 16px;
  }
  .skip__links {
    gap: 16px;
  }
  .act--question .stage:has(.pick.is-open) .skip {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .scene--proof {
    padding: 30vh 0 32vh;
  }
  .proof {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "about" "afilm" "quotes" "qfilm" "trusted";
    gap: 0;
  }
  .film--about {
    margin-top: 32px;
  }
  .quotes {
    margin-top: 9vh;
    gap: 32px;
  }
  .film--quote {
    margin-top: 36px;
  }
  .trusted {
    margin-top: 9vh;
  }
  .about__bowl {
    max-width: 320px;
  }
  .quote p {
    font-size: 19px;
  }
  .quote--lead p {
    font-size: 22px;
  }
  .scrim--close {
    left: -20vw;
    top: 60vh;
    width: 140vw;
    height: 44vh;
  }
  .close {
    top: auto;
    bottom: max(28px, 5vh);
  }
  .btn--gold {
    width: 100%;
    justify-content: center;
    font-size: 17px;
    padding: 18px 24px;
  }
  .close__line {
    font-size: 14.5px;
    margin-top: 16px;
  }
}
@media (min-width: 701px) and (max-aspect-ratio: 9/10) {
  .hero__name {
    font-size: 17px;
    margin-bottom: 16px;
  }
  .hero__title {
    font-size: 52px;
  }
  .hero__lede {
    font-size: 20px;
    margin-top: 18px;
  }
  .doors {
    gap: 14px;
  }
  .door {
    padding: 22px 24px 24px;
    border-radius: 14px;
  }
  .door__k {
    font-size: 22px;
  }
  .door__d {
    font-size: 15.5px;
  }
  .line {
    font-size: 28px;
  }
  .ask__title {
    font-size: 42px;
  }
  .ask__sub {
    font-size: 19px;
  }
  .topic {
    font-size: 17px;
    padding: 12px 18px;
  }
  .panel {
    left: 50%;
    right: auto;
    width: min(620px, 92vw);
    transform: translateX(-50%);
    border-radius: 18px 18px 0 0;
  }
  @starting-style {
    .panel:not([hidden]) {
      transform: translate(-50%, 100%);
    }
  }
  .btn--gold {
    width: auto;
  }
}
@media (max-width: 389px) {
  .door {
    padding-left: 12px;
    padding-right: 12px;
  }
  .door__k {
    font-size: 16px;
    gap: 4px;
  }
  .door__k svg {
    width: 16px;
    height: 16px;
  }
  .topic {
    font-size: 15px;
    padding: 10px 13px;
  }
}
@media (max-width: 380px) {
  .hero__title {
    font-size: 29px;
  }
  .door__d {
    font-size: 13px;
  }
}
@media (max-width: 350px) {
  .door__k {
    white-space: normal;
  }
  .door {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.no-js [data-sc-cue],
.no-js [data-sc-in],
.no-js [data-sc-stagger] > * {
  opacity: 1;
  transform: none;
}
.no-js .act {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
}
.no-js .stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  pointer-events: auto;
}
.no-js .act--question .stage {
  height: auto;
  min-height: 100vh;
  overflow-x: clip;
  overflow-y: visible;
}
.no-js .act--question .ask,
.no-js .act--question .skip {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  padding: 15vh var(--pad-x) 0;
  margin: 0;
}
.no-js .act--question .crack-list {
  padding-top: 40px;
}
.no-js .act--question .skip {
  padding: 0 var(--pad-x) 10vh;
}
.no-js .act--silence {
  display: none;
}
.no-js .scene--proof {
  background: var(--canvas);
}
.no-js .act--repair .stage {
  background: transparent;
}
.no-js .bar {
  background: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .world__vessel {
    transition: opacity 300ms linear;
  }
  .world.is-ready .world__poster {
    transition-delay: 300ms;
  }
  .door,
  .bar__nav a,
  .topic,
  .opt,
  .btn {
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease;
  }
  .topic:active,
  .opt:active,
  .btn:active,
  .door:active {
    transform: none;
  }
  .panel:not([hidden]) {
    transition: opacity 200ms ease;
  }
  @starting-style {
    .panel:not([hidden]) {
      opacity: 0;
      transform: none;
    }
  }
  .btn--gold:hover {
    transform: none;
  }
}