@font-face {
  font-family: "ChenYuLuoYan";
  src: url("/assets/cache/ChenYuluoyan-2.0-site.e8197b50e76a57a3.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #080807;
  --paper: #eeeae1;
  --silver: #a9a79f;
  --dim: #6f6d67;
  --hairline: rgba(238, 234, 225, 0.24);
  --type-song: "ChenYuLuoYan", serif;
  --small-copy-size: clamp(18px, 1.6667vw, 24px);
  --safe-top: max(22px, env(safe-area-inset-top));
  --safe-bottom: max(22px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--ink);
}

.site-icp {
  position: fixed;
  z-index: 90;
  right: 0;
  bottom: 5px;
  left: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  font-family: sans-serif;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0.36;
}

.site-icp a {
  color: #3d3b36;
  text-decoration: none;
  pointer-events: auto;
}

body:has(.moon-arrival-day.is-active) .site-icp a {
  color: rgba(255, 255, 255, 0.68);
}

body {
  overflow: hidden;
  color: var(--paper);
  font-family: var(--type-song);
  -webkit-font-smoothing: antialiased;
}

button,
input { font: inherit; }

button,
summary,
input { -webkit-tap-highlight-color: transparent; }

@media (max-width: 466px) {
  body,
  body * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  body input,
  body textarea,
  body [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }

  /* The decorative top moons are not long-press image targets on phones. */
  #journey .moon,
  :is(#film-day, #meter-day, #focus-day, #shutter-day,
      #stack-day, #rewind-day, #developer-day) .day-orbit > .day-moon {
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
  }
}

.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.experience {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.025), transparent 35%), var(--ink);
}

.experience::after {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  content: "";
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--safe-top) clamp(22px, 6vw, 72px) var(--safe-bottom);
  visibility: hidden;
  opacity: 0;
  transition: opacity 1.1s ease, visibility 1.1s step-end;
}

.scene.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 1.1s ease, visibility 0s step-start;
}

html.is-booting .experience .scene {
  visibility: hidden;
  opacity: 0;
  transition: none;
}

html.is-booting .interlude-secret-view,
html.is-booting .interlude-secret-record,
html.is-booting .interlude-secret-puzzle {
  transition: none;
}

.experience.is-date-routed .scene {
  transition: none;
}

.masthead {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  letter-spacing: 0.08em;
}

.wordmark {
  position: relative;
  display: inline-grid;
  color: var(--paper);
  font-family: var(--type-song);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}

.wordmark-default,
.wordmark-reveal {
  grid-area: 1 / 1;
  transition: opacity 0.245s ease, transform 0.294s cubic-bezier(0.22, 1, 0.36, 1);
}

.wordmark-reveal {
  opacity: 0;
  transform: translateY(4px);
}

.wordmark:hover .wordmark-default,
.wordmark:focus-visible .wordmark-default {
  opacity: 0;
  transform: translateY(-4px);
}

.wordmark:hover .wordmark-reveal,
.wordmark:focus-visible .wordmark-reveal {
  opacity: 1;
  transform: translateY(0);
}

.chapter-stamp {
  display: grid;
  gap: 5px;
  color: var(--silver);
  font-family: var(--type-song);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-align: right;
}

.gate-stage {
  position: relative;
  min-height: 0;
}

.signal {
  position: absolute;
  top: 42.5%;
  left: 50%;
  z-index: 2;
  width: min(82vw, 440px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transform: translate(-50%, -50%);
  transition: left 1.2s cubic-bezier(0.65, 0, 0.18, 1), width 1.2s cubic-bezier(0.65, 0, 0.18, 1), opacity 1s ease;
}

.signal:focus-visible { box-shadow: 0 0 0 1px var(--silver); }
.signal:disabled { opacity: 1; }

.signal canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: url("#pencil-stroke");
}

.welcome-copy {
  position: absolute;
  top: 42.5%;
  left: 50%;
  z-index: 2;
  width: min(88vw, 560px);
  max-width: none;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 20px));
  transition: opacity 0.9s ease 0.25s, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.welcome-copy h1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  margin: 0;
  font-family: var(--type-song);
  font-size: clamp(32px, 9vw, 66px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.045em;
  filter: url("#pencil-stroke");
}

.welcome-will {
  display: inline-block;
  color: var(--paper);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.26s ease;
}

.welcome-prefix {
  display: inline-block;
  text-align: right;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.72s ease 0.15s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.gate.is-welcoming .welcome-copy {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.gate.is-welcoming .welcome-prefix {
  opacity: 1;
  transform: translateY(0);
}

.gate.is-will-arrived .welcome-will { opacity: 1; }
.welcome-will { text-align: left; }

.will-flight {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
  display: none;
  color: var(--paper);
  font-family: var(--type-song);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 28px;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: left top;
  filter: url("#pencil-stroke");
}

.will-flight.is-active { display: block; }

.gate-controls {
  position: absolute;
  top: 55.5%;
  left: 50%;
  z-index: 3;
  display: block;
  height: 112px;
  width: min(100%, 420px);
  padding: 0 22px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.75s ease;
}

.gate.is-expanded .gate-controls { pointer-events: auto; }

.gate.is-welcoming .gate-controls {
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.gate.is-welcoming .morse-hint {
  pointer-events: none;
  opacity: 0;
}

.instruction {
  position: fixed;
  right: 22px;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 22px;
  min-height: 20px;
  margin: 0;
  color: var(--silver);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-align: center;
  transition: opacity 0.45s ease, transform 0.6s ease;
}

.gate.is-opening .instruction {
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
}

.answer-form {
  position: absolute;
  inset: 0 22px auto;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.85s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.gate.is-expanded .answer-form {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.code-entry {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  width: min(196px, 64vw);
  margin: 0 auto;
}

.code-entry input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: auto;
  padding: 0;
  border: 0;
  outline: 0;
  color: transparent;
  caret-color: transparent;
  background: transparent;
  opacity: 0.01;
  text-transform: uppercase;
  cursor: text;
}

.code-slots {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  gap: 12px;
  justify-content: center;
  opacity: 1;
}

.gate.is-will-travelling .code-slots {
  opacity: 0;
  transition: none;
}

.code-slot {
  display: grid;
  place-items: center;
  height: 42px;
  border-bottom: 1px solid rgba(238, 234, 225, 0.19);
  color: var(--paper);
  font-family: var(--type-song);
  font-size: 22px;
  line-height: 1;
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.code-slot.has-value {
  border-color: rgba(238, 234, 225, 0.5);
  filter: url("#pencil-stroke");
  transform: translateY(-2px);
}

.code-entry:focus-within .code-slot:not(.has-value):first-of-type,
.code-slot.is-next {
  border-color: rgba(238, 234, 225, 0.72);
}

.feedback {
  min-height: 18px;
  margin: 12px 0 0;
  color: var(--silver);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
}

.answer-form.is-shaking { animation: signal-shake 0.42s ease; }

@keyframes signal-shake {
  25% { transform: translateX(-4px); }
  55% { transform: translateX(3px); }
  80% { transform: translateX(-1px); }
}

.morse-hint {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  margin: 0;
  color: var(--dim);
  font-size: 11px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease 0.55s;
}

.hint-trigger {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1.2px solid currentColor;
  border-radius: 50%;
  color: var(--ink);
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
  cursor: default;
  outline: none;
  transition: opacity 0.22s ease, transform 0.28s ease;
}

.hint-tooltip {
  position: absolute;
  right: 0;
  bottom: 50%;
  width: max-content;
  max-width: min(78vw, 280px);
  padding: 0;
  color: var(--ink);
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(50%) translateX(5px);
  transition: opacity 0.25s ease, transform 0.3s ease;
  pointer-events: none;
}

.morse-hint:hover .hint-trigger {
  opacity: 0;
  transform: scale(0.78);
}

.morse-hint:hover .hint-tooltip {
  opacity: 1;
  transform: translateY(50%) translateX(0);
}

.gate.is-expanded .morse-hint {
  opacity: 1;
  pointer-events: auto;
}

.gate.is-expanded.is-welcoming .morse-hint {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}

.morse-hint summary {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  padding: 0 0 1px;
  border: 1px solid rgba(238, 234, 225, 0.22);
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
  color: var(--silver);
  font-family: var(--type-song);
  line-height: 1;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.morse-hint summary:hover,
.morse-hint summary:focus-visible {
  color: var(--paper);
  border-color: rgba(238, 234, 225, 0.52);
  outline: none;
}

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

.hint-sheet {
  position: absolute;
  top: auto;
  right: 0;
  bottom: calc(100% + 10px);
  left: auto;
  width: min(82vw, 330px);
  max-height: min(30svh, 230px);
  padding: 14px 14px 16px;
  overflow: auto;
  border: 1px solid rgba(238, 234, 225, 0.1);
  background: rgba(12, 12, 11, 0.96);
  backdrop-filter: blur(16px);
  text-align: left;
  transform: none;
}

.hint-sheet p {
  margin: 0 0 10px;
  color: var(--silver);
  font-size: 10px;
}

.morse-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 10px;
  color: var(--paper);
  font-family: var(--type-song);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.journey { overflow: hidden; }

#cosmic-bg-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#cosmic-bg-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.meteor-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.meteor {
  opacity: 0;
  filter: url("#meteor-pencil");
  transform-box: fill-box;
  transform-origin: center;
}

.meteor-tail,
.meteor-tail-echo,
.meteor-head {
  fill: none;
  stroke: rgba(47, 44, 40, 0.42);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.earth-horizon {
  position: absolute;
  bottom: -1px;
  left: 50%;
  z-index: 0;
  width: min(124vw, 1780px);
  height: 18svh;
  background: url("/assets/earth-horizon.svg") center bottom / 100% 100% no-repeat;
  opacity: 0;
  filter: url("#pencil-stroke");
  transform: translate(-50%, 8px);
  transition: opacity 1.5s ease 1.6s, transform 2.2s cubic-bezier(0.22, 1, 0.36, 1) 1.35s;
  pointer-events: none;
}

.journey.is-active .earth-horizon {
  opacity: 1;
  transform: translate(-50%, 0);
}

.meteor-tail {
  stroke-width: 0.8;
}

.meteor-tail-echo {
  stroke-width: 0.4;
  opacity: 0.3;
}

.meteor-head {
  fill: #f4f1ea;
  stroke-width: 0.72;
}

.journey .masthead,
.journey-stage,
.journey-footer {
  position: relative;
  z-index: 1;
}

.journey-stage {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 0;
}

.moon {
  position: absolute;
  top: clamp(18px, 5vh, 54px);
  left: 50%;
  width: 140px;
  aspect-ratio: 1;
  object-fit: contain;
  opacity: 0;
  mix-blend-mode: multiply;
  transform: translate(-50%, -10px) scale(0.94);
  transition: opacity 1.6s ease 0.4s, transform 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.journey.is-active .moon {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: journey-moon-float 6.8s ease-in-out 2.4s infinite;
}

@keyframes journey-moon-float {
  0%,
  100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, -8px) scale(1); }
}

.distance-copy {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 17px;
  width: 100%;
  opacity: 0;
  text-align: center;
  filter: none;
  transform: translateY(calc(-50% + 12px));
  transition: opacity 1s ease 1.2s, transform 1.2s ease 1.15s;
}

.distance-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  filter: url("#distance-pencil");
}

.distance-line strong { margin-top: -8px; }

.journey.is-active .distance-copy {
  opacity: 1;
  transform: translateY(-50%);
}

.distance-copy p {
  margin: 0;
  color: var(--silver);
  font-size: clamp(27px, 2.35vw, 36px);
  letter-spacing: 0.08em;
}

.distance-copy strong {
  font-family: var(--type-song);
  font-size: clamp(38px, 3.45vw, 52px);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.tomorrow-copy {
  color: var(--dim);
  font-size: var(--small-copy-size);
  font-weight: 300;
  letter-spacing: 0.12em;
  filter: url("#text-pencil");
}

.tomorrow-copy.is-next,
.film-tomorrow.is-next {
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.tomorrow-copy.is-next:hover,
.film-tomorrow.is-next:hover {
  opacity: 0.7;
}

.tomorrow-copy.is-next:focus-visible,
.film-tomorrow.is-next:focus-visible {
  outline: 1px dashed currentColor;
  outline-offset: 7px;
}

.distance-copy small {
  color: var(--silver);
  font-family: var(--type-song);
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.journey-footer {
  display: grid;
  gap: 8px;
  justify-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s ease 1.85s, transform 1s ease 1.8s;
}

.journey.is-active .journey-footer {
  opacity: 1;
  transform: translateY(0);
}

.journey-footer p,
.journey-footer span {
  margin: 0;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
}

.journey-footer span {
  color: var(--dim);
  font-size: 10px;
}

@media (min-width: 467px) {
  .scene {
    padding: 34px clamp(56px, 5vw, 88px) 38px;
  }

  .wordmark {
    font-size: 16px;
    letter-spacing: 0.055em;
  }

  .chapter-stamp {
    gap: 7px;
    font-size: 10px;
    letter-spacing: 0.2em;
  }

  .gate-stage {
    width: min(100%, 980px);
    margin: 0 auto;
  }

  .signal {
    top: 46%;
    width: clamp(560px, 50vw, 720px);
    clip-path: circle(29% at 50% 50%);
  }

  .welcome-copy {
    top: 46%;
    width: min(68vw, 760px);
  }

  .welcome-copy h1 {
    gap: 26px;
    font-size: clamp(52px, 5vw, 78px);
  }

  .gate-controls {
    top: 60%;
    width: 520px;
  }

  .code-entry { width: 282px; }

  .code-slots {
    grid-template-columns: repeat(4, 48px);
    gap: 22px;
  }

  .code-slot {
    height: 50px;
    font-size: 28px;
  }

  .instruction {
    bottom: 38px;
    font-size: 14px;
  }

  .morse-hint {
    right: 38px;
    bottom: 38px;
  }

  .morse-hint summary {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .hint-sheet {
    width: 390px;
    max-height: 290px;
    padding: 18px 20px 20px;
  }

  .hint-sheet p {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .morse-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 16px;
    font-size: 11px;
  }

  .moon { width: 140px; }

  .distance-copy {
    top: 50%;
    bottom: auto;
  }

  .distance-copy p { font-size: clamp(27px, 2.35vw, 36px); }

  .distance-copy strong { font-size: clamp(38px, 3.45vw, 52px); }

  .journey-footer p { font-size: 14px; }

  .journey-footer span { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}


/* 09.27 — paper edition --------------------------------------------------- */
:root {
  color-scheme: light;
  --ink: #24211e;
  --paper: #f4f1ea;
  --silver: #6f6a63;
  --dim: #8b857d;
  --hairline: rgba(36, 33, 30, 0.24);
}

html,
body {
  background: #f4f1ea;
}

body {
  color: var(--ink);
}

.experience {
  min-height: 640px;
  background-color: #f4f1ea;
  background-image: url("/assets/paper-field.svg");
  background-position: center;
  background-size: cover;
}

.experience::after {
  display: none;
}

.scene {
  padding: 48px clamp(38px, 3.8vw, 58px) 38px;
}

.masthead {
  /* Keep the date anchored to the viewport, even if an interaction widens its grid track. */
  width: calc(100vw - 2 * clamp(38px, 3.8vw, 58px));
}

.wordmark {
  color: var(--ink);
  font-size: clamp(21px, 1.9vw, 28px);
  font-weight: 400;
  letter-spacing: 0.015em;
}

.wordmark-particle-canvas {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
}

.wordmark.is-particle-ready:hover .wordmark-default,
.wordmark.is-particle-ready:focus-visible .wordmark-default {
  opacity: 1;
  transform: none;
}

.wordmark.is-particle-ready:hover .wordmark-reveal,
.wordmark.is-particle-ready:focus-visible .wordmark-reveal {
  opacity: 0;
  transform: translateY(5px);
}

.wordmark.is-particle-ready.is-particle-morphing .wordmark-default {
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.112s ease, transform 0.196s ease;
}

.wordmark.is-particle-ready.is-particle-morphing .wordmark-reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.63s ease 0.244s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.202s;
}

.wordmark.is-particle-morphing .wordmark-particle-canvas { opacity: 1; }

.chapter-stamp {
  gap: 3px;
  color: var(--ink);
  font-size: var(--small-copy-size);
  line-height: 1.04;
  letter-spacing: 0.01em;
}

.chapter-stamp.is-code-ready {
  position: relative;
  display: inline-grid;
  min-width: max-content;
  outline: none;
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ctext x='1' y='23' font-size='23'%3E%F0%9F%94%8D%3C/text%3E%3C/svg%3E") 6 6,
    pointer;
}

.chapter-stamp-default,
.chapter-stamp-reveal {
  grid-area: 1 / 1;
}

.chapter-stamp-default {
  justify-self: stretch;
  transition: opacity 112ms ease, transform 196ms ease;
}

.chapter-stamp-reveal {
  z-index: 2;
  align-self: center;
  justify-self: center;
  opacity: 0;
  transform: translate(var(--chapter-code-shift, 0px), 4px);
  transition: none;
}

.chapter-stamp.is-code-morphing .chapter-stamp-default {
  opacity: 0;
  transform: translateY(-2px);
}

.chapter-stamp.is-code-morphing .chapter-stamp-reveal {
  opacity: 1;
  transform: translate(var(--chapter-code-shift, 0px), 0);
  transition: opacity 630ms ease 244ms, transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 202ms;
}

.chapter-stamp-particle-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: block;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.chapter-stamp.is-code-morphing .chapter-stamp-particle-canvas {
  opacity: 1;
}

.chapter-stamp.is-code-ready:focus-visible {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(36, 33, 30, 0.34);
}

.gate-stage {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.signal {
  top: 42%;
  /* 1440 × 1024 is the desktop design baseline: never enlarge beyond it,
     but shrink uniformly when either viewport dimension becomes tighter. */
  width: min(790px, calc(100vw - 120px), calc(100svh - 170px));
  clip-path: none;
}

.signal:focus-visible {
  box-shadow: none;
  outline: none;
}

.welcome-copy {
  top: 42%;
  color: var(--ink);
}

.welcome-copy h1 {
  font-size: clamp(48px, 5vw, 74px);
}

.welcome-will,
.will-flight {
  color: var(--ink);
}

.gate-controls {
  top: 60.5%;
  width: 520px;
}

.code-entry {
  width: 282px;
}

.code-slots {
  grid-template-columns: repeat(4, 48px);
  gap: 22px;
}

.code-slot {
  height: 50px;
  border-color: rgba(36, 33, 30, 0.24);
  color: var(--ink);
  font-size: 28px;
}

.code-slot.has-value {
  border-color: rgba(36, 33, 30, 0.62);
}

.code-entry:focus-within .code-slot:not(.has-value):first-of-type,
.code-slot.is-next {
  border-color: rgba(36, 33, 30, 0.78);
}

.feedback {
  color: var(--dim);
}

.instruction {
  right: 0;
  bottom: 13vh;
  left: 0;
  color: var(--ink);
  font-size: var(--small-copy-size);
  letter-spacing: 0.12em;
}

.morse-hint {
  right: 52px;
  bottom: clamp(34px, 5.5vh, 58px);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
}

.morse-hint summary {
  width: 34px;
  height: 34px;
  padding-bottom: 2px;
  border: 1.5px solid rgba(36, 33, 30, 0.84);
  color: var(--ink);
  font-size: 20px;
  font-weight: 400;
}

.morse-hint summary:hover,
.morse-hint summary:focus-visible {
  color: #000;
  border-color: #000;
  background: rgba(255, 255, 255, 0.26);
}

.hint-sheet {
  width: min(78vw, 390px);
  max-height: min(38svh, 310px);
  border: 1px solid rgba(36, 33, 30, 0.24);
  background: #f4f1ea;
  box-shadow: 0 12px 35px rgba(75, 66, 55, 0.09);
  backdrop-filter: none;
}

.hint-sheet p,
.morse-grid {
  color: var(--ink);
}

.journey {
  background-color: transparent;
}

#cosmic-bg-container {
  display: none;
}

.moon {
  filter: url("#pencil-stroke");
  mix-blend-mode: multiply;
}

.distance-copy p,
.distance-copy small,
.tomorrow-copy {
  color: var(--dim);
}

@media (max-width: 466px) {
  .welcome-copy h1,
  .will-flight,
  .gate.is-welcoming .signal canvas {
    filter: none !important;
  }

  .scene {
    padding: var(--safe-top) 24px var(--safe-bottom);
  }

  .wordmark {
    font-size: 18px;
  }

  .chapter-stamp {
    font-size: var(--small-copy-size);
  }

  .signal {
    top: 43%;
    width: min(116vw, 540px);
  }

  .moon {
    top: 5vh;
    width: 108px;
  }

  .earth-horizon {
    bottom: -1px;
    width: 158vw;
    height: 14svh;
  }

  .distance-copy {
    top: 50%;
    gap: 14px;
  }

  .distance-copy p {
    font-size: 24px;
  }

  .distance-copy strong {
    font-size: 36px;
  }

  .tomorrow-copy { font-size: var(--small-copy-size); }

  .hint-trigger {
    width: 23px;
    height: 23px;
    font-size: 16px;
    line-height: 23px;
  }

  .gate-controls {
    top: 57.5%;
  }

  .instruction {
    bottom: 17vh;
    font-size: var(--small-copy-size);
  }

  .morse-hint {
    right: 24px;
    bottom: 28px;
  }

  .morse-hint summary {
    width: 32px;
    height: 32px;
    font-size: 19px;
  }
}


/* 09.29 — finding enough light ----------------------------------------- */
.meter-day .masthead,
.meter-day-stage {
  position: relative;
  z-index: 2;
}

.meter-day-stage {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  justify-items: center;
  min-height: 0;
  padding-top: clamp(2px, 0.5vh, 8px);
  padding-bottom: clamp(18px, calc(1.8vh + 4px), 22px);
}

.meter-day .meter-day-title {
  margin: clamp(22px, 3.4vh, 42px) 0 clamp(6px, 0.8vh, 12px);
}

.meter-loader-wrap {
  display: grid;
  grid-template-rows: auto;
  align-items: center;
  justify-items: center;
  width: min(86.5vw, 1104px);
  min-height: 0;
  align-content: center;
  transform: translateY(-32px);
}

.meter-loader {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 330;
  overflow: visible;
  color: var(--ink);
  touch-action: none;
  outline: none;
}

.meter-loader * {
  -webkit-tap-highlight-color: transparent;
}

.meter-drawing {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.meter-cable {
  stroke-width: 1.25;
  stroke-dasharray: 13 13;
  opacity: 0.76;
}

.meter-body,
.meter-display {
  fill: rgba(244, 241, 234, 0.95);
}

.meter-body { stroke-width: 2; }
.meter-display { stroke-width: 1.35; }
.meter-cap { fill: rgba(244, 241, 234, 0.96); stroke-width: 1.9; }
.meter-cap-echo { stroke-width: 0.8; opacity: 0.5; }
.meter-button { fill: rgba(244, 241, 234, 0.86); stroke-width: 1.8; }

.light-meter {
  transform-box: view-box;
  transform-origin: 0 0;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}

.light-meter.is-dragging { cursor: grabbing; }

.light-meter,
.light-meter:focus,
.light-meter:focus-visible,
.meter-dial-control,
.meter-dial-control:focus,
.meter-dial-control:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.meter-day.is-meter-targeting .meter-cap {
  stroke-width: 0.85;
}

.meter-readout,
.aperture-dial text {
  fill: var(--ink);
  stroke: none;
  font-family: var(--type-song);
  font-size: 25px;
  letter-spacing: 0.025em;
  filter: url("#text-pencil");
}

.aperture-dial text { font-size: 23px; }

.aperture-dial > circle {
  fill: rgba(244, 241, 234, 0.28);
}

.aperture-blades {
  transform-box: view-box;
  transform-origin: 1035px 170px;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.aperture-blades path {
  fill: rgba(244, 241, 234, 0.72);
  stroke-width: 1.15;
}

.aperture-opening {
  fill: var(--paper);
  stroke-width: 1.5;
  transition: r 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.dial-marker {
  transform-box: view-box;
  transform-origin: 1035px 170px;
  transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}

.dial-marker path {
  fill: var(--ink);
  stroke-width: 0.8;
}

.meter-dial-control { cursor: grab; }
.meter-dial-control:active { cursor: grabbing; }

.meter-day:not(.is-measured) .meter-dial-control {
  cursor: not-allowed;
  opacity: 0.62;
}

.meter-day.is-metered .meter-dial-control {
  cursor: default;
  opacity: 0.78;
  pointer-events: none;
}

.meter-card.is-resetting-development .card-photo-placeholder,
.meter-card.is-resetting-development .developing-wash,
.meter-card.is-resetting-development .card-back-copy {
  transition: none !important;
}

.meter-dial-control circle {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.meter-instruction {
  min-height: 26px;
  margin: 0;
  color: var(--dim);
  font-size: var(--small-copy-size);
  letter-spacing: 0.055em;
  text-align: center;
  filter: url("#text-pencil");
}

.meter-day .meter-roll-progress {
  padding-top: clamp(22px, 3vh, 34px);
  transform: none;
}

.meter-roll-frame.is-collected svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.meter-roll-frame.is-collected path {
  fill: none;
  stroke: rgba(36, 33, 30, 0.64);
  stroke-width: 1.25;
  stroke-linecap: round;
  filter: url("#pencil-stroke");
}

.focus-roll-frame.is-collected svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.focus-roll-frame.is-collected path {
  fill: none;
  stroke: rgba(36, 33, 30, 0.64);
  stroke-width: 1.25;
  stroke-linecap: round;
  filter: url("#pencil-stroke");
}


/* 09.30 — split-image focusing ----------------------------------------- */
.focus-loader {
  overflow: visible;
}

.focus-drawing {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.focus-prism-frame {
  fill: rgba(244, 241, 234, 0.34);
  stroke-width: 1.5;
}

.focus-prism-echo {
  stroke-width: 0.55;
  opacity: 0.32;
}

.focus-image-half {
  transform-box: view-box;
  transform-origin: 334px 165px;
  will-change: transform;
  opacity: 0.72;
  transition: transform 90ms linear, opacity 160ms ease, filter 160ms ease;
}

.focus-image-half path,
.focus-image-ghost path {
  fill: rgba(36, 33, 30, 0.025);
  stroke-width: 1.55;
}

.focus-cat-use {
  fill: none;
  stroke: rgba(36, 33, 30, 0.8);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.focus-image-half .focus-horizon,
.focus-image-ghost .focus-horizon {
  stroke-width: 0.85;
  opacity: 0.56;
}

.focus-image-ghost {
  transform-box: view-box;
  transform-origin: 334px 165px;
  opacity: 0.42;
  will-change: transform, opacity, filter;
  transition: transform 90ms linear, opacity 160ms ease, filter 160ms ease;
}

.focus-split-line,
.focus-corner {
  stroke-width: 1.05;
}

.focus-corner {
  opacity: 0.8;
}

.focus-grass {
  stroke-width: 0.8;
  opacity: 0.38;
}

.focus-cable {
  stroke-width: 1.1;
  stroke-dasharray: 13 13;
  opacity: 0.68;
}

.focus-ring circle:first-child {
  fill: rgba(244, 241, 234, 0.36);
  stroke-width: 1.65;
}

.focus-ring circle:nth-child(2) {
  fill: rgba(244, 241, 234, 0.22);
  stroke-width: 1.25;
}

.focus-ring path {
  stroke-width: 1.45;
}

.focus-ring-marker {
  transform-box: view-box;
  transform-origin: 936px 165px;
  transition: transform 120ms linear;
}

.focus-ring-marker path {
  fill: var(--ink);
  stroke-width: 0.7;
}

.focus-ring-control {
  cursor: grab;
  touch-action: none;
  outline: none;
}

.focus-ring-control:active { cursor: grabbing; }

.focus-ring-control:focus,
.focus-ring-control:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.focus-ring-control circle {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.focus-day.is-focused .focus-ring-control {
  cursor: default;
  pointer-events: none;
  opacity: 0.76;
}


/* 10.01 — choosing a shutter moment ------------------------------------ */
.shutter-loader {
  overflow: visible;
}

.shutter-loader-wrap {
  width: min(90vw, 1150px);
}

.shutter-drawing {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shutter-viewfinder-frame {
  fill: rgba(244, 241, 234, 0.22);
  stroke-width: 1.45;
  opacity: 0.72;
}

.shutter-viewfinder-echo {
  stroke-width: 0.56;
  opacity: 0.26;
}

.shutter-viewfinder-corners {
  stroke-width: 1.05;
  opacity: 0.64;
}

.shutter-viewfinder-center {
  stroke-width: 0.78;
  opacity: 0.32;
}

.shutter-motion-path {
  fill: none;
  stroke: none;
}

.shutter-live-meteor {
  opacity: 0;
  will-change: transform;
  pointer-events: none;
}

.shutter-live-meteor.is-active { opacity: 1; }

.shutter-live-meteor:focus,
.shutter-live-meteor:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.shutter-live-meteor:focus-visible .shutter-live-head { stroke-width: 1.8; }

.shutter-live-meteor.is-captured .shutter-live-tail { opacity: 0; }

.shutter-star-hit {
  fill: transparent;
  stroke: none;
  pointer-events: none;
}

.shutter-day.is-spark-ready:not(.is-spark-ignited) .shutter-live-meteor.is-captured .shutter-star-hit {
  pointer-events: all;
  cursor: grab;
  touch-action: none;
}

.shutter-day.is-spark-ignited .shutter-star-hit {
  pointer-events: none;
  cursor: default;
}

.shutter-day.is-star-dragging .shutter-live-meteor,
.shutter-day.is-star-returning .shutter-live-meteor,
.shutter-day.is-spark-ignited .shutter-live-meteor { opacity: 0; }

.shutter-dragged-star {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  overflow: visible;
  pointer-events: none;
  color: var(--ink);
  display: none;
}

.shutter-dragged-star.is-dragging { display: block; }
.shutter-dragged-star.is-returning {
  transition: left 330ms cubic-bezier(0.2, 0.72, 0.24, 1), top 330ms cubic-bezier(0.2, 0.72, 0.24, 1);
}
.shutter-dragged-star .shutter-captured-trail {
  opacity: 1;
  transition: none;
}

#shutter-day .day-orbit { position: relative; }
.shutter-transform-moon { overflow: visible; }
.shutter-moon-craters,
.shutter-moon-rays { transition: opacity 130ms ease-out; }
#shutter-day.is-moon-burning .shutter-moon-craters,
#shutter-day.is-moon-burning .shutter-moon-rays { opacity: 0; }
#shutter-day.is-spark-ignited .day-distance {
  opacity: 0;
  visibility: hidden;
}
.shutter-moon-number {
  fill: #2f2c28;
  font-family: var(--type-song);
  font-size: 59px;
  opacity: 0;
  transition: opacity 300ms ease;
}
#shutter-day.is-aluminum-complete .shutter-moon-number { opacity: 1; }

.shutter-moon-rings {
  pointer-events: none;
  opacity: 0.8;
}
.shutter-growth-ring {
  fill: none;
  stroke: #2f2c28;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--ring-length);
  stroke-dashoffset: var(--ring-length);
}
#shutter-day.is-aluminum-revealed .shutter-growth-ring {
  animation: shutter-ring-grow 620ms ease-in-out var(--ring-delay) forwards;
}
@keyframes shutter-ring-grow { to { stroke-dashoffset: 0; } }
.shutter-ring-dot {
  fill: #2f2c28;
  stroke: none;
  opacity: 0;
}
.shutter-ring-dot.is-settled { opacity: 1; }
.shutter-moon-particles { pointer-events: none; }
.shutter-moon-particles circle { fill: #2f2c28; stroke: none; }

.shutter-spark-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  #shutter-day.is-aluminum-revealed .shutter-growth-ring { animation: none; stroke-dashoffset: 0; }
  .shutter-dragged-star.is-returning { transition: none; }
}

.shutter-live-tail {
  fill: none;
  stroke: rgba(36, 33, 30, 0.42);
  stroke-width: 1.05;
  opacity: 0;
}

.shutter-live-head {
  fill: rgba(244, 241, 234, 0.92);
  stroke: rgba(36, 33, 30, 0.74);
  stroke-width: 1.2;
}

.shutter-captured-trail {
  fill: none;
  stroke: rgba(36, 33, 30, 0.7);
  stroke-width: 1.25;
  opacity: 0;
  transition: opacity 0.48s ease;
}

.shutter-day.is-captured .shutter-captured-trail { opacity: 1; }
.shutter-day.is-star-restored .shutter-captured-trail { opacity: 1; transition: none; }

.shutter-day.is-previewing-capture .shutter-captured-trail { opacity: 0.56; }

.shutter-day.is-star-dragging .shutter-captured-trail,
.shutter-day.is-star-returning .shutter-captured-trail,
.shutter-day.is-spark-ignited .shutter-captured-trail {
  opacity: 0;
  transition: none;
}

.shutter-dial > circle:first-child {
  fill: rgba(244, 241, 234, 0.3);
  stroke-width: 1.5;
}

.shutter-dial > circle:nth-child(2) {
  fill: rgba(244, 241, 234, 0.16);
  stroke-width: 1.05;
}

.shutter-dial > path {
  stroke-width: 1.05;
  opacity: 0.72;
}

.shutter-dial text {
  fill: var(--ink);
  stroke: none;
  font-family: var(--type-song);
  font-size: 18px;
  filter: url("#text-pencil");
}

.shutter-dial .shutter-speed-readout {
  font-size: 25px;
  opacity: 0.78;
}

.shutter-dial-marker {
  transform-box: view-box;
  transform-origin: 145px 168px;
  transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

.shutter-dial-marker.is-dragging { transition: none; }

.shutter-dial-marker path {
  fill: var(--ink);
  stroke-width: 0.7;
}

.shutter-dial-control {
  cursor: grab;
  touch-action: none;
  outline: none;
}

.shutter-dial-control:active { cursor: grabbing; }

.shutter-dial-control:focus,
.shutter-dial-control:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.shutter-dial-control circle {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.shutter-release {
  cursor: pointer;
  outline: none;
  transform-box: view-box;
  transform-origin: 1052px 168px;
}

.shutter-release:focus,
.shutter-release:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.shutter-release-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.shutter-release-button {
  transform-box: view-box;
  transform-origin: 1052px 164px;
  transition: transform 120ms ease;
}

.shutter-release-collar {
  fill: rgba(244, 241, 234, 0.46);
  stroke-width: 1.45;
}

.shutter-release-body {
  fill: rgba(244, 241, 234, 0.68);
  stroke-width: 1.25;
}

.shutter-release-inner {
  fill: rgba(244, 241, 234, 0.26);
  stroke-width: 0.9;
}

.shutter-release-socket {
  fill: rgba(36, 33, 30, 0.1);
  stroke-width: 0.85;
}

.shutter-release-thread {
  stroke-width: 0.72;
  opacity: 0.62;
}

.shutter-release-knurl {
  stroke-width: 0.85;
  opacity: 0.62;
}

.shutter-release text {
  fill: var(--dim);
  stroke: none;
  font-family: var(--type-song);
  font-size: var(--small-copy-size);
  letter-spacing: 0.08em;
  filter: url("#text-pencil");
}

#shutter-release-label {
  pointer-events: none;
}

.shutter-release:active:not(.is-disabled) .shutter-release-button {
  transform: translateY(3px) scale(0.96);
}

.shutter-release.is-missed {
  animation: shutter-miss 0.42s ease;
}

@keyframes shutter-miss {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  65% { transform: translateX(4px); }
}

.shutter-day.is-captured .shutter-dial-control {
  cursor: default;
  pointer-events: none;
  opacity: 0.74;
}

.shutter-day.is-captured .shutter-release {
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}

.shutter-roll-frame.is-collected svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.shutter-roll-frame.is-collected path {
  fill: none;
  stroke: rgba(36, 33, 30, 0.64);
  stroke-width: 1.25;
  stroke-linecap: round;
  filter: url("#pencil-stroke");
}


/* 10.02 — stacking two frames ------------------------------------------ */
.stack-loader-wrap {
  width: min(90vw, 1150px);
}

.stack-loader {
  overflow: visible;
}

.stack-drawing {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(-48px);
  transform-origin: 600px 165px;
}

.stack-target-frame {
  transform: rotate(-1.2deg);
  transform-origin: 490px 165px;
  transform-box: view-box;
}

.stack-frame-paper {
  fill: rgba(244, 241, 234, 0.38);
  stroke-width: 1.45;
}

.stack-frame-echo {
  stroke-width: 0.55;
  opacity: 0.28;
}

.stack-register {
  fill: rgba(244, 241, 234, 0.9);
  stroke-width: 0.9;
  opacity: 0.72;
}

.stack-image-line,
.stack-image-arc {
  stroke-width: 1.5;
  opacity: 0.67;
}

.stack-image-dot {
  fill: rgba(244, 241, 234, 0.3);
  stroke-width: 1.35;
  opacity: 0.72;
}

.stack-clue-vector {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  opacity: 0.82;
}

.stack-clue-second {
  opacity: 0.78;
}

.stack-clue-svg {
  stroke-width: 2;
}

.stack-day.is-stacked .stack-clue-vector {
  opacity: 1;
  stroke-width: 1.85;
}

.stack-result-bubble {
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transform-origin: 779px 112px;
  transition: opacity 0.38s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.stack-result-bubble-shape,
.stack-result-bubble-tail {
  fill: rgba(244, 241, 234, 0.9);
  stroke: currentColor;
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stack-result-bubble text {
  fill: currentColor;
  stroke: none;
  font-family: var(--type-song);
  font-size: 27px;
  letter-spacing: 0;
  transition: opacity 0.22s ease;
}

.stack-bubble-hover {
  opacity: 0;
}

.stack-day.is-stacked .stack-result-bubble {
  opacity: 0.9;
  transform: translateY(0) scale(1);
  transition-delay: 0.3s;
}

.stack-day.is-card-stored .stack-result-bubble {
  pointer-events: all;
}

.stack-day.is-card-stored .stack-result-bubble:hover .stack-bubble-default {
  opacity: 0;
}

.stack-day.is-card-stored .stack-result-bubble:hover .stack-bubble-hover {
  opacity: 1;
}

.stack-brushed-lines {
  stroke-width: 0.62;
  opacity: 0.22;
}

.stack-secret-ring,
.stack-secret-88 {
  fill: none;
  stroke-width: 0.72;
  opacity: 0.14;
}

.stack-raised-mark {
  fill: rgba(244, 241, 234, 0.2);
  stroke-width: 1.05;
  opacity: 0.46;
}

.stack-moving-frame {
  cursor: grab;
  touch-action: none;
  outline: none;
  transform: translate(760px, 223px) rotate(8deg);
  transform-origin: 0 0;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
  will-change: transform;
}

.stack-moving-frame.is-dragging {
  cursor: grabbing;
  transition: none;
}

.stack-moving-frame:focus,
.stack-moving-frame:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.stack-moving-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.stack-moving-frame .stack-frame-paper {
  fill: rgba(244, 241, 234, 0.58);
}

.stack-day.is-stacked .stack-moving-frame {
  cursor: default;
  pointer-events: none;
}

.stack-day.is-stacked .stack-moving-frame .stack-frame-paper {
  fill: transparent;
}

.stack-day.is-stacked .stack-target-frame {
  opacity: 1;
}

.stack-roll-frame.is-collected svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stack-roll-frame.is-collected path {
  fill: none;
  stroke: rgba(36, 33, 30, 0.64);
  stroke-width: 1.25;
  stroke-linecap: round;
  filter: url("#pencil-stroke");
}


/* 10.03 — rewinding the exposed roll ----------------------------------- */
@font-face {
  font-family: "Special Elite";
  src: url("/assets/cache/SpecialElite-400.9f59e3a0e1c0008f.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.rewind-loader-wrap {
  width: min(90vw, 1150px);
  transform: translateY(-28px);
}

.rewind-loader {
  width: 100%;
  overflow: visible;
  touch-action: none;
}

.rewind-drawing {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The rewinding strip should not leave an opaque paper-coloured tail. */
.rewind-drawing .film-body {
  fill: none;
}

.rewind-strip-assembly,
.rewind-left-reel,
.rewind-right-reel,
.rewind-crank-visual {
  will-change: transform;
}

.rewind-frame-patterns rect {
  stroke: none;
  opacity: 0.24;
}

.rewind-pattern-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.78;
  opacity: 0.72;
}

.rewind-holes {
  fill: var(--paper);
  stroke: currentColor;
  stroke-width: 0.9;
}

.rewind-reel-guide {
  opacity: 0.46;
  stroke-width: 0.78;
}

.rewind-rough-echo {
  opacity: 0.2;
  stroke-width: 0.72;
  stroke-dasharray: 29 3 17 2;
}

.rewind-left-reel > circle:not(.reel-cover),
.rewind-right-reel > circle:not(.reel-cover) {
  stroke-width: 1.15;
}

.rewind-crank-visual > path:first-child {
  stroke-width: 1.75;
}

.rewind-crank-visual circle {
  fill: rgba(244, 241, 234, 0.96);
  stroke-width: 1.45;
}

.rewind-crank-hatch {
  stroke-width: 0.62;
  opacity: 0.52;
}

.rewind-crank-control {
  outline: none;
  cursor: grab;
  touch-action: none;
}

.rewind-crank-control.is-dragging {
  cursor: grabbing;
}

.rewind-crank-hit-knob {
  fill: transparent;
  stroke: none;
  pointer-events: fill;
}

.rewind-day.is-rewound .rewind-crank-control {
  cursor: default;
  pointer-events: none;
}

/* The film has cleared the reel before FRAME 06 rises into view. Keep it
   hidden throughout the later move to the centre, so it cannot show behind
   the reel when its paper-coloured cover is removed. */
.rewind-day.is-rewound .rewind-strip-assembly {
  opacity: 0;
  transition: none;
  pointer-events: none;
}

.rewind-left-assembly {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rewind-day.is-card-stored .rewind-left-assembly {
  transform: translate(452px, 26px);
}

.rewind-day.is-card-stored .rewind-right-reel {
  opacity: 0;
  transition: opacity 480ms ease;
  pointer-events: none;
}

.rewind-day.is-card-stored .rewind-crank-control {
  cursor: grab;
  pointer-events: all;
}

.rewind-day.is-card-stored .rewind-left-assembly .reel-cover {
  fill: none;
}

.rewind-day.is-card-stored .rewind-crank-visual circle {
  fill: var(--rewind-cover-fill, var(--paper));
}

.rewind-secret-year {
  fill: #f4f1ea;
  stroke: rgba(244, 241, 234, 0.55);
  stroke-width: 0.55;
  stroke-dasharray: 29 1.5 17 0.8;
  font-family: "Special Elite", monospace;
  font-size: 44.8px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.1em;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 466px) {
  /* Only the stored, centred reel grows; the original rewind layout stays put. */
  .rewind-day.is-card-stored .rewind-left-assembly {
    transform: translate(452px, 56px) translate(148px, 211px) scale(2) translate(-148px, -211px);
  }

  /* Scale the drawing, not the pencil stroke; the cover otherwise doubles
     the outer circle's outline when its fill disappears. */
  .rewind-day.is-card-stored .rewind-left-assembly .reel-cover {
    stroke: none;
  }

  .rewind-day.is-card-stored .rewind-left-reel > circle:not(.reel-cover) {
    stroke-width: 1px;
  }

  .rewind-day.is-card-stored .rewind-left-reel .rewind-rough-echo {
    stroke-width: 0.55px;
  }

  .rewind-day.is-card-stored .rewind-left-reel .rewind-reel-guide {
    stroke-width: 0.6px;
  }

  .rewind-day.is-card-stored .rewind-crank-visual > path:first-child {
    stroke-width: 1.3px;
  }

  .rewind-day.is-card-stored .rewind-crank-visual circle {
    stroke-width: 1.05px;
  }

  .rewind-day.is-card-stored .rewind-crank-hatch {
    stroke-width: 0.5px;
  }

  .rewind-secret-year {
    font-size: 84px;
  }
}

.rewind-secret-year.is-visible {
  opacity: 1;
}

.rewind-secret-cursor {
  stroke: #f4f1ea;
  stroke-width: 3;
  opacity: 0;
  pointer-events: none;
}

.rewind-secret-cursor.is-visible {
  opacity: 1;
  animation: rewind-cursor-blink 0.72s steps(1, end) infinite;
}

@keyframes rewind-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.rewind-day::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: url("/assets/paper-field.svg") center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: calc(var(--rewind-secret-darkness, 0) * 0.055);
}

.rewind-day.is-secret-erasing .meteor-field,
.rewind-day.is-secret-erasing .masthead,
.rewind-day.is-secret-erasing .day-orbit,
.rewind-day.is-secret-erasing .day-distance,
.rewind-day.is-secret-erasing .film-day-title,
.rewind-day.is-secret-erasing .film-tomorrow,
.rewind-day.is-secret-erasing .meter-instruction,
.rewind-day.is-secret-erasing .meter-roll-progress {
  pointer-events: none;
  transition: none;
}

.rewind-roll-frame.is-collected svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rewind-roll-frame.is-collected path {
  fill: none;
  stroke: rgba(36, 33, 30, 0.64);
  stroke-width: 1.25;
  stroke-linecap: round;
  filter: url("#pencil-stroke");
}


/* 10.04 — darkroom development ---------------------------------------- */
.developer-loader-wrap {
  width: min(78vw, 920px);
  transform: translateY(-31px);
}

.developer-loader {
  width: 100%;
  overflow: visible;
  touch-action: none;
}

.developer-drawing {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.developer-tray-rim,
.developer-paper-sheet {
  fill: rgba(244, 241, 234, 0.96);
}

.developer-tray-rim {
  stroke-width: 1.05;
}

.developer-tray-well {
  fill: url("#developer-liquid-hatch");
  stroke-width: 1.05;
}

.developer-tray-front {
  fill: none;
  stroke-width: 1.05;
}

.developer-tray-side {
  fill: none;
  stroke-width: 1.05;
}

.developer-hatch-mark {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  opacity: 0.2;
}

.developer-tray-echo {
  opacity: 0.3;
  stroke-width: 1.05;
  stroke-dasharray: none;
}

.developer-liquid {
  opacity: 0.38;
  stroke-width: 1.05;
}

.developer-tray-mark {
  opacity: 0.24;
  stroke-width: 1.05;
}

.developer-paper,
.developer-tray-visual {
  will-change: transform;
}

.developer-paper-sheet {
  stroke-width: 1.55;
}

.developer-negative-base {
  fill: currentColor;
  stroke: none;
  opacity: 0.02;
}

.developer-image-lines {
  opacity: 1;
  stroke: var(--paper);
  stroke-width: 1.65;
}

.developer-photo-art {
  filter: invert(1);
}

.developer-image-lines circle:not(.developer-photo-moon) {
  fill: var(--paper);
  stroke: none;
}

.developer-photo-moon {
  fill: rgba(244, 241, 234, 0.08);
}

.developer-meteor-trail {
  opacity: 0.72;
  stroke-width: 1.1;
}

.developer-meteor-head {
  fill: var(--paper);
  stroke-width: 0.5;
}

.developer-paper-wash {
  fill: rgba(244, 241, 234, 0.94);
  stroke: none;
  opacity: 0.96;
}

.developer-liquid-overlay {
  opacity: 0;
  stroke-width: 0.82;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.developer-day.is-paper-inserted .developer-liquid-overlay {
  opacity: 0.36;
}

.developer-paper-control {
  cursor: none;
  outline: none;
  touch-action: none;
}

.developer-day.is-developed .developer-paper-control {
  pointer-events: none;
  cursor: default;
}

.developer-paper-control.is-dragging {
  cursor: none;
}

.developer-cursor-tongs {
  fill: none;
  opacity: 0;
  stroke: currentColor;
  stroke-width: 1.25;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.developer-cursor-tongs.is-visible {
  opacity: 1;
}

.developer-tongs-half {
  transform-box: view-box;
  transform-origin: 151px -25px;
  transition: transform 0.12s cubic-bezier(0.22, 0.8, 0.28, 1);
  stroke-width: 1.25;
}

.developer-cursor-tongs.is-gripping .developer-tongs-upper {
  transform: rotate(-2.8deg);
}

.developer-cursor-tongs.is-gripping .developer-tongs-lower {
  transform: rotate(2.8deg);
}

.developer-hit-area {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.developer-roll-frame.is-collected svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.developer-roll-frame.is-collected path {
  fill: none;
  stroke: rgba(36, 33, 30, 0.64);
  stroke-width: 1.25;
  stroke-linecap: round;
  filter: url("#pencil-stroke");
}

@media (max-width: 466px) {
  .developer-loader-wrap {
    width: min(94vw, 920px);
  }

  .rewind-loader-wrap {
    width: min(96vw, 1180px);
  }
}

.meter-day.is-metered .meter-day-title {
  animation: meter-title-arrive 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes meter-title-arrive {
  0% { opacity: 0.28; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 466px) {
  .meter-day-stage {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    padding-top: 6px;
  }

  .meter-day .meter-day-title {
    margin: 20px 0 0;
  }

  .meter-instruction {
    max-width: 82vw;
  }
}


/* 09.28 — loading the first frame --------------------------------------- */
.film-day {
  overflow: hidden;
  background: transparent;
}

.film-day .masthead,
.film-day-stage {
  position: relative;
  z-index: 2;
}

.film-day-stage {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  justify-items: center;
  min-height: 0;
  padding-top: clamp(2px, 0.5vh, 8px);
  padding-bottom: clamp(18px, calc(1.8vh + 4px), 22px);
}

.day-orbit {
  width: clamp(76px, min(8vw, calc(56px + 5.8vh)), 116px);
  aspect-ratio: 1;
  margin-top: -11px;
  animation: day-moon-float 6.6s ease-in-out infinite;
}

.day-moon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

@keyframes day-moon-float {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.day-distance {
  margin: -6px 0 0;
  color: var(--ink);
  font-size: var(--small-copy-size);
  font-weight: 400;
  letter-spacing: 0.045em;
  filter: url("#text-pencil");
}

.day-distance strong {
  font-weight: 400;
  letter-spacing: 0.015em;
}

.day-distance small {
  font-size: 1em;
}

.film-day-title {
  margin: clamp(22px, 3.4vh, 42px) 0 clamp(6px, 0.8vh, 12px);
  color: var(--ink);
  font-family: var(--type-song);
  font-size: clamp(30px, 3.1vw, 48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  filter: url("#text-pencil");
}

.film-tomorrow {
  position: absolute;
  z-index: 3;
  grid-row: 4;
  grid-column: 1;
  align-self: start;
  justify-self: center;
  margin: 12px 0 0;
  color: var(--dim);
  font-size: var(--small-copy-size);
  font-weight: 300;
  letter-spacing: 0.12em;
  opacity: 0;
  pointer-events: none;
  filter: url("#text-pencil");
  transform: translateY(-4px);
  transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.12s;
}

.film-tomorrow.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.film-loader-wrap {
  position: relative;
  display: grid;
  grid-template-rows: auto;
  align-items: center;
  justify-items: center;
  width: min(86.5vw, 1104px);
  min-height: 0;
  align-content: center;
  transform: translateY(-32px);
}

.film-loader {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1200 / 390;
  margin-bottom: 0;
  overflow: visible;
  color: var(--ink);
  touch-action: none;
}

.film-drawing {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.film-body {
  fill: rgba(244, 241, 234, 0.98);
  stroke-width: 1.95;
}

.film-seam { stroke-width: 1.05; opacity: 0.68; }

.film-strip-assembly,
.supply-reel {
  will-change: transform;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.film-strip-assembly {
  transform-box: view-box;
  transform-origin: 148px 211px;
  transform: translateX(-110px);
}

.film-web-shortened {
  transform-box: view-box;
  transform-origin: 950px 211px;
}

.film-strip-assembly.is-dragging,
.supply-reel.is-dragging {
  transition: none;
}

.supply-reel {
  transform-box: view-box;
  transform-origin: 148px 211px;
}

.sprocket-holes rect,
.leader-holes rect {
  fill: var(--paper);
  stroke-width: 1.15;
}

.reel-cover {
  fill: var(--paper);
  stroke: none;
}

.takeup-reel,
.takeup-reel-visual,
.turn-arrow-group,
.film-leader {
  outline: none;
}

.takeup-reel,
.takeup-reel-visual,
.turn-arrow-group {
  transform-box: view-box;
  transform-origin: 1050px 211px;
  will-change: transform;
}

.turn-arrow-group { pointer-events: none; }

.takeup-reel { cursor: grab; }
.takeup-reel:active { cursor: grabbing; }

.takeup-hit,
.leader-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.takeup-guide {
  stroke-width: 0.95;
  stroke-dasharray: 38 26;
  opacity: 0.58;
}

.takeup-slot {
  fill: rgba(244, 241, 234, 0.32);
  stroke-width: 1.85;
}

.turn-arrow {
  stroke-width: 1.2;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.film-loader-wrap.is-loaded .turn-arrow { opacity: 0.72; }
.film-loader-wrap.is-complete .turn-arrow { opacity: 0; }

.film-loader-wrap.is-loaded .film-leader {
  pointer-events: none;
}

.film-leader {
  cursor: ew-resize;
}

.leader-dark {
  fill: url("#leader-hatch");
  stroke-width: 1.5;
}

.film-hatch-line {
  stroke: rgba(36, 33, 30, 0.64);
  stroke-width: 0.85;
}

.leader-neck {
  fill: var(--paper);
  stroke-width: 1.45;
}

.leader-tab {
  fill: rgba(36, 33, 30, 0.78);
  stroke-width: 1.4;
}

.frame-counter path {
  fill: rgba(244, 241, 234, 0.9);
  stroke-width: 1.2;
}

.frame-counter text {
  fill: var(--ink);
  stroke: none;
  font-family: var(--type-song);
  font-size: 30px;
  filter: url("#text-pencil");
}

.film-instruction {
  min-height: 26px;
  margin: 0;
  color: var(--dim);
  font-size: var(--small-copy-size);
  letter-spacing: 0.055em;
  text-align: center;
  filter: url("#text-pencil");
}

.roll-progress {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding-top: clamp(22px, 3vh, 34px);
  filter: url("#text-pencil");
  transform: none;
}

.roll-frames {
  display: grid;
  grid-template-columns: repeat(7, clamp(28px, 2.8vw, 40px));
  align-items: center;
  gap: clamp(5px, 0.5vw, 8px);
}

.roll-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1.12;
  padding: 0;
  border: 1.35px solid rgba(36, 33, 30, 0.4);
  border-radius: 2px 1px 3px 1px;
  background: transparent;
  appearance: none;
  filter: url("#pencil-stroke");
  transition: border-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.roll-frame:nth-child(1) { transform: rotate(-1.1deg) scaleY(0.95); }
.roll-frame:nth-child(2) { transform: rotate(0.7deg) scaleY(1.02); }
.roll-frame:nth-child(3) { transform: rotate(-0.45deg) scaleY(0.97); }
.roll-frame:nth-child(4) { transform: rotate(0.9deg) scaleY(1.01); }
.roll-frame:nth-child(5) { transform: rotate(-0.8deg) scaleY(0.96); }
.roll-frame:nth-child(6) { transform: rotate(0.4deg) scaleY(1.03); }
.roll-frame:nth-child(7) { transform: rotate(-0.65deg) scaleY(0.98); }

.roll-frame.is-filled {
  border-color: rgba(36, 33, 30, 0.72);
  cursor: pointer;
}

.roll-frame.is-filled:hover {
  border-color: rgba(36, 33, 30, 0.95);
  transform: rotate(-1.1deg) scale(1.055, 1);
}

.roll-frame.is-filled:focus-visible {
  outline: 1px solid rgba(36, 33, 30, 0.65);
  outline-offset: 4px;
}

.roll-frame.is-filled::after {
  position: absolute;
  inset: 3px 4px 4px 3px;
  content: "";
  opacity: 0.68;
  background: repeating-linear-gradient(154deg, rgba(36, 33, 30, 0.78) 0 1px, transparent 1px 4px);
}

.lunar-card-reveal {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(244, 241, 234, 0.82);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease, visibility 0.8s step-end;
  perspective: 1100px;
}

.lunar-card-reveal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.8s ease, visibility 0s step-start;
}

.card-gesture-hint {
  margin: 0;
  color: var(--dim);
  font-size: 19px;
  letter-spacing: 0.07em;
  text-align: center;
  filter: url("#text-pencil");
  pointer-events: none;
}

.lunar-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --flip-angle: 0deg;
  --drag-angle: 0deg;
  position: relative;
  display: block;
  width: min(72vw, 370px);
  aspect-ratio: 0.72;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: grab;
  opacity: 0;
  transform: translateY(22px) rotate(-1.6deg) scale(0.96);
  transition: opacity 0.65s ease 0.22s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
  touch-action: none;
  outline: none;
}

.lunar-card:active { cursor: grabbing; }

.lunar-card-reveal.is-visible .lunar-card {
  opacity: 1;
  transform: translateY(0) rotate(-1.6deg) scale(1);
}

.card-inner {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(calc(var(--flip-angle) + var(--tilt-y) + var(--drag-angle)));
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.lunar-card.is-pointer-tilting .card-inner {
  transition: transform 70ms linear;
}

.lunar-card.is-tilt-returning .card-inner {
  transition: transform 760ms cubic-bezier(0.18, 1.38, 0.35, 1);
}

.lunar-card.is-dragging .card-inner {
  transition: none;
}

.card-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 24px 26px 28px;
  overflow: hidden;
  border: 1.26px solid transparent;
  border-radius: 2px;
  background: rgba(244, 241, 234, 0.98);
  box-shadow: 4px 5px 0 rgba(36, 33, 30, 0.045);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-face::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  border: 1.26px solid var(--ink);
  border-radius: 2px;
  content: "";
  filter: none;
  pointer-events: none;
}

.card-face > .card-index,
.card-face > .card-moons,
.card-face > .card-back-copy {
  filter: url("#card-pencil");
}

.card-back {
  transform: rotateY(180deg);
}

.card-index {
  justify-self: start;
  font-size: 17px;
  letter-spacing: 0.12em;
}

.card-moons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
}

.card-moon {
  position: relative;
  display: block;
  width: 76px;
  aspect-ratio: 1;
  border: 1.7px solid var(--ink);
  border-radius: 50%;
  overflow: hidden;
}

.card-moon::after {
  position: absolute;
  top: -2px;
  width: 76px;
  height: 76px;
  border: 1.4px solid var(--ink);
  border-radius: 50%;
  content: "";
  background: var(--paper);
}

.card-moon-first { background: var(--ink); }
.card-moon-first::after { left: 22px; }
.card-moon-second { background: rgba(36, 33, 30, 0.12); }
.card-moon-second::after { left: -34px; }

.lunar-card .card-moon.is-decoder-moon {
  border: 0;
  border-radius: 0;
  overflow: visible;
  color: var(--ink);
  background: transparent;
  filter: none;
}

.lunar-card .card-moon.is-decoder-moon::after {
  display: none;
}

.lunar-card .card-moon.is-decoder-moon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: url("#moon-decoder-grain-filter");
}

/* The two decoded moon glyphs on each of the first seven cards. */
.lunar-card .card-front .card-moon.is-decoder-moon svg circle,
.lunar-card .card-front .card-moon.is-decoder-moon svg path[stroke] {
  stroke-width: 0.35px;
}

.card-copy {
  justify-self: center;
  font-size: 19px;
  letter-spacing: 0.08em;
}

.card-photo {
  position: relative;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 88%;
  aspect-ratio: 1.26;
  overflow: hidden;
  border: 1.25px solid transparent;
  background: rgba(36, 33, 30, 0.035);
}

.card-photo::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  border: 1.25px solid rgba(36, 33, 30, 0.62);
  content: "";
  filter: url("#card-pencil");
  pointer-events: none;
}

.card-photo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(1) contrast(0.55) brightness(1.55) blur(7px);
  transform: scale(1.035);
  transition: opacity 3.2s ease 0.2s, filter 4.4s ease, transform 4.8s ease;
}

.card-photo-image:not([hidden]) { display: block; }

.card-photo-placeholder {
  color: rgba(36, 33, 30, 0.36);
  font-size: 16px;
  letter-spacing: 0.12em;
  opacity: 0;
  transition: opacity 1.8s ease 0.6s;
}

.developing-wash {
  position: absolute;
  inset: -12%;
  background: rgba(244, 241, 234, 0.96);
  opacity: 1;
  transform: scale(1.06);
  transition: opacity 4.6s ease, transform 5.2s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.lunar-card.is-developed .card-photo-image:not([hidden]) {
  opacity: 1;
  filter: grayscale(0.78) contrast(0.9) brightness(1.04) blur(0);
  transform: scale(1);
}

.lunar-card.is-developed .card-photo-placeholder { opacity: 1; }

.lunar-card.is-developed .card-photo.has-photo .card-photo-placeholder {
  opacity: 0;
}

.lunar-card.is-developed .developing-wash {
  opacity: 0;
  transform: scale(0.82);
}

.card-back-copy {
  color: var(--dim);
  opacity: 1;
  transition: opacity 0.72s ease 4.1s;
}

.lunar-card.is-developed .card-back-copy { opacity: 0; }

.lunar-card.is-instant-photo .card-photo-image,
.lunar-card.is-instant-photo .card-photo-placeholder,
.lunar-card.is-instant-photo .developing-wash,
.lunar-card.is-instant-photo .card-back-copy {
  transition: none !important;
}

.lunar-card.is-nudging {
  animation: card-nudge 0.52s ease;
}

@keyframes card-nudge {
  0%, 100% { transform: translate(0, 0) rotate(-1.6deg) scale(1); }
  25% { transform: translate(-3px, 0) rotate(-2.3deg) scale(1); }
  50% { transform: translate(3px, 0) rotate(-0.9deg) scale(1); }
  75% { transform: translate(-2px, 0) rotate(-2deg) scale(1); }
}

.lunar-card-reveal.is-storing {
  background: rgba(244, 241, 234, 0.82);
  /* Keep the backdrop intercepting touches until the card is fully stored. */
  pointer-events: auto;
}

.lunar-card-reveal.is-storing .card-gesture-hint { opacity: 0; }

.lunar-card-reveal.is-visible.is-storing .lunar-card {
  opacity: 0;
  transform:
    translate(var(--store-x, 0px), var(--store-y, 0px))
    rotate(-4deg)
    scale(var(--store-scale, 0.12));
  transition:
    opacity 0.28s ease 0.52s,
    transform 0.86s cubic-bezier(0.3, 0.82, 0.25, 1);
}

@media (max-width: 466px) {
  .film-day {
    padding-right: 18px;
    padding-left: 18px;
  }

  .film-day-stage {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    padding-top: 6px;
  }

  /* Oversized interactive SVGs should overflow symmetrically, not widen the
     whole day's grid and shift the moon, copy, and progress to the right. */
  .meter-day-stage {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .day-orbit {
    width: clamp(60px, calc(40px + 4.5vh), 76px);
    margin-top: 0;
  }

  .day-distance {
    margin-top: -2px;
    font-size: var(--small-copy-size);
  }

  .film-day-title {
    margin: 20px 0 0;
    font-size: clamp(25px, 7vw, 32px);
  }

  .film-instruction {
    max-width: 76vw;
    font-size: var(--small-copy-size);
  }

  .roll-frames {
    grid-template-columns: repeat(7, 27px);
    gap: 5px;
  }

}

/* 10.05 — lunar arrival, part one -------------------------------------- */
.moon-arrival-day .masthead,
.moon-arrival-stage {
  position: relative;
  z-index: 2;
}

.moon-arrival-stage {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.moon-arrival-distance {
  margin-top: -6px;
  letter-spacing: 0.08em;
}

.moon-arrival-day .day-orbit,
.moon-arrival-distance {
  transition: opacity 0.48s ease;
}

.moon-arrival-day.is-decoder-entering .day-orbit,
.moon-arrival-day.is-decoder-active .day-orbit,
.moon-arrival-day.is-decoder-entering .moon-arrival-distance,
.moon-arrival-day.is-decoder-active .moon-arrival-distance {
  opacity: 0;
}

.moon-arrival-day.is-decoder-active .masthead {
  z-index: 12;
}

.moon-arrival-day.is-decoder-active .wordmark,
.moon-arrival-day.is-decoder-active .chapter-stamp {
  color: #f5f6fa;
}

.moon-arrival-main {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  place-items: center;
  transition: opacity 0.8s ease;
}

.moon-arrival-trigger {
  position: relative;
  z-index: 3;
  padding: 10px 14px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--type-song);
  font-size: var(--small-copy-size);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.14em;
  cursor: pointer;
  filter: url("#text-pencil");
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 0.35s ease;
}

.moon-arrival-trigger:hover,
.moon-arrival-trigger:focus-visible {
  letter-spacing: 0.19em;
  outline: none;
}

.moon-arrival-day.is-gathering .moon-arrival-trigger {
  opacity: 0;
  transform: translateY(-7px);
  pointer-events: none;
}

.moon-arrival-progress {
  position: relative;
  z-index: 4;
  padding-top: clamp(22px, 3vh, 34px);
  transition: opacity 0.35s ease;
}

.moon-arrival-progress .roll-frame {
  display: block;
  cursor: default;
  will-change: transform, opacity;
  transition:
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease,
    border-color 0.3s ease;
}

.moon-arrival-progress .roll-frame svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.moon-arrival-progress .roll-frame path {
  fill: none;
  stroke: rgba(36, 33, 30, 0.64);
  stroke-width: 1.25;
  stroke-linecap: round;
}

.moon-arrival-day.is-gathering .moon-arrival-progress .moon-arrival-frame {
  border-color: rgba(36, 33, 30, 0.72);
  transform: translate(var(--gather-x, 0px), var(--gather-y, 0px)) rotate(0deg) scale(0.34);
}

.moon-arrival-day.is-gathering .moon-arrival-progress .moon-arrival-frame:nth-child(1) { transition-delay: 0ms; }
.moon-arrival-day.is-gathering .moon-arrival-progress .moon-arrival-frame:nth-child(2) { transition-delay: 45ms; }
.moon-arrival-day.is-gathering .moon-arrival-progress .moon-arrival-frame:nth-child(3) { transition-delay: 90ms; }
.moon-arrival-day.is-gathering .moon-arrival-progress .moon-arrival-frame:nth-child(4) { transition-delay: 135ms; }
.moon-arrival-day.is-gathering .moon-arrival-progress .moon-arrival-frame:nth-child(5) { transition-delay: 180ms; }
.moon-arrival-day.is-gathering .moon-arrival-progress .moon-arrival-frame:nth-child(6) { transition-delay: 225ms; }
.moon-arrival-day.is-gathering .moon-arrival-progress .moon-arrival-frame:nth-child(7) { transition-delay: 270ms; }

.moon-arrival-day.is-unfolding .moon-arrival-progress {
  opacity: 0;
}

.moon-card-row {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  width: min(92vw, 1110px);
  margin: auto;
  gap: clamp(3px, 0.65vw, 10px);
  pointer-events: none;
  transition: opacity 0.3s ease;
  will-change: opacity;
}

.moon-arrival-day.is-moons-rising .moon-arrival-main {
  z-index: 9;
}

.moon-arrival-day.is-moons-rising .moon-card-row {
  opacity: 0;
}

.moon-arrival-day.is-decoder-active .moon-arrival-main {
  opacity: 0;
}

.moon-bridge-layer {
  position: fixed;
  inset: 0;
  z-index: 11;
  overflow: hidden;
  color: var(--ink);
  pointer-events: none;
}

.moon-bridge-glyph {
  position: absolute;
  display: block;
  transform-origin: top left;
  color: var(--ink);
  transition: transform 1.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.moon-bridge-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: url("#moon-decoder-grain-filter");
}

.moon-bridge-glyph svg circle,
.moon-bridge-glyph svg path[stroke] {
  stroke-opacity: 0.8;
}

.moon-arrival-day.is-decoder-active .moon-bridge-layer {
  opacity: 0;
}

.moon-decoder-bridge {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  background: #070709;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.moon-decoder-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #070709;
  opacity: 0;
}

.moon-arrival-day.is-decoder-active .moon-decoder-bridge {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.moon-arrival-day.is-decoder-active .moon-decoder-frame {
  opacity: 1;
}

.moon-landing-card {
  position: relative;
  width: 100%;
  aspect-ratio: 0.72;
  opacity: 0;
  transform: translateY(24px) scale(0.12) rotate(var(--card-rotation, 0deg));
  transform-origin: center;
  transition:
    opacity 0.38s ease,
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

.moon-landing-card:nth-child(1) { --card-rotation: -1.35deg; }
.moon-landing-card:nth-child(2) { --card-rotation: -0.9deg; }
.moon-landing-card:nth-child(3) { --card-rotation: -0.45deg; }
.moon-landing-card:nth-child(4) { --card-rotation: 0deg; }
.moon-landing-card:nth-child(5) { --card-rotation: 0.45deg; }
.moon-landing-card:nth-child(6) { --card-rotation: 0.9deg; }
.moon-landing-card:nth-child(7) { --card-rotation: 1.35deg; }

.moon-arrival-day.is-unfolding .moon-landing-card {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--card-rotation, 0deg));
  transition-delay: calc(var(--i) * 95ms);
}

.moon-landing-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(7px, 0.9vw, 13px);
  border: 0.945px solid transparent;
  border-radius: 2px 1px 3px 1px;
  background: rgba(244, 241, 234, 0.96);
  box-shadow: 3px 4px 0 rgba(36, 33, 30, 0.035);
  transition: border-color 0.9s ease, background 0.9s ease, box-shadow 0.9s ease;
}

.moon-landing-face::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  border: 0.945px solid rgba(36, 33, 30, 0.78);
  border-radius: 2px 1px 3px 1px;
  content: "";
  filter: url("#card-pencil");
  pointer-events: none;
}

.moon-landing-face > .moon-landing-index,
.moon-landing-face > .card-moons {
  filter: url("#card-pencil");
}

.moon-landing-index {
  font-size: clamp(7px, 0.8vw, 11px);
  letter-spacing: 0.08em;
  opacity: 0.72;
  transition: opacity 0.75s ease;
}

.moon-landing-card .card-moons {
  align-self: center;
  gap: clamp(2px, 0.7vw, 10px);
  transform: scale(1);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.moon-landing-card .card-moon {
  width: clamp(14px, 3.25vw, 42px);
  border: 0;
  border-radius: 0;
  overflow: visible;
  color: var(--ink);
  background: transparent;
  filter: none;
}

.moon-landing-card .card-moon::after {
  display: none;
}

.moon-landing-card .card-moon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: url("#moon-decoder-grain-filter");
}

.moon-landing-card .card-moon svg circle,
.moon-landing-card .card-moon svg path[stroke] {
  stroke-opacity: 0.8;
}

.moon-arrival-day.is-moons-only .moon-landing-face {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.moon-arrival-day.is-moons-only .moon-landing-face::after {
  opacity: 0;
}

.moon-arrival-day.is-moons-only .moon-landing-index {
  opacity: 0;
}

.moon-arrival-day.is-moons-only .moon-landing-card .card-moons {
  transform: scale(1.16);
}

.moon-arrival-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 466px) {
  .moon-arrival-stage {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }

  .moon-card-row {
    width: calc(100vw - 24px);
    gap: 2px;
  }

  .moon-landing-face {
    padding: 5px 3px;
  }

  .moon-landing-index {
    font-size: 6px;
    letter-spacing: 0;
  }

  .moon-landing-card .card-moons {
    gap: 1px;
  }
}

/* 10.06–10.09 — Frame 08 interlude ------------------------------------ */
.interlude-day {
  overflow: hidden;
  background: transparent;
}

.interlude-day .masthead,
.interlude-stage {
  position: relative;
  z-index: 2;
}

.interlude-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  min-height: 0;
  padding-top: clamp(2px, 0.5vh, 8px);
  padding-bottom: clamp(16px, 2.2vh, 26px);
}

.interlude-orbit {
  --moon-drag-x: 0px;
  --moon-drag-y: 0px;
  position: relative;
  z-index: 5;
  margin-top: -11px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  animation: none;
  transform: translate3d(var(--moon-drag-x), var(--moon-drag-y), 0);
  transition: transform 720ms cubic-bezier(0.18, 1.32, 0.3, 1), opacity 180ms ease;
  will-change: transform;
}

.interlude-orbit .day-moon {
  pointer-events: none;
  animation: day-moon-float 6.6s ease-in-out infinite;
}

.interlude-orbit.is-dragging {
  cursor: grabbing;
  transition: none;
}

.interlude-orbit:focus-visible {
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(36, 33, 30, 0.46);
}

.interlude-day.is-easter-targeted #interlude-wordmark {
  transform: translateY(1px) scale(0.985);
}

.interlude-day.is-easter-targeted .interlude-orbit {
  filter: url("#pencil-stroke") drop-shadow(0 0 7px rgba(36, 33, 30, 0.15));
}

.interlude-day.is-easter-transitioning .chapter-stamp,
.interlude-day.is-easter-transitioning .interlude-card-field {
  opacity: 0;
  transition: opacity 520ms ease;
}

.interlude-day.is-easter-transitioning #interlude-wordmark,
.interlude-day.is-easter-transitioning .interlude-orbit {
  opacity: 0;
}

.interlude-easter-particles {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.interlude-secret-view {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  background-color: #f4f1ea;
  background-image: url("/assets/paper-field.svg");
  background-position: center;
  background-size: cover;
  transition: opacity 760ms ease, visibility 760ms step-end;
  pointer-events: none;
}

.interlude-day.is-easter-open .interlude-secret-view {
  visibility: visible;
  opacity: 1;
  transition: opacity 760ms ease, visibility 0s step-start;
  pointer-events: auto;
}

.interlude-secret-back {
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  left: max(26px, env(safe-area-inset-left));
  z-index: 14;
  display: grid;
  width: 34px;
  height: 30px;
  place-items: center;
  color: rgba(36, 33, 30, 0.54);
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.interlude-secret-back svg {
  width: 28px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
}

.interlude-secret-back:hover {
  color: rgba(36, 33, 30, 0.88);
  transform: translateX(-2px);
}

.interlude-secret-back:focus-visible {
  outline: 1px dashed rgba(36, 33, 30, 0.52);
  outline-offset: 4px;
}

.interlude-secret-content {
  position: relative;
  display: grid;
  width: min(94vw, 1040px);
  height: min(88vh, 740px);
  place-items: center;
}

.interlude-secret-hint {
  position: fixed;
  right: max(28px, env(safe-area-inset-right));
  bottom: max(30px, env(safe-area-inset-bottom));
  left: auto;
  z-index: 12;
  display: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

html:not(.is-handwriting-ready) .interlude-secret-hint {
  visibility: hidden;
}

.interlude-day[data-easter-entry="photo-moon"] .interlude-secret-hint {
  display: block;
}

.interlude-day.is-easter-open[data-easter-entry="photo-moon"] .interlude-secret-hint {
  opacity: 1;
  pointer-events: auto;
}

.interlude-day.is-easter-open[data-easter-entry="photo-moon"] .interlude-secret-hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.interlude-secret-puzzle {
  position: absolute;
  inset: 0;
  display: none;
  color: #2f2c28;
  opacity: 0;
  transition: opacity 680ms ease 160ms;
}

.interlude-day[data-easter-entry="title-moon"] .interlude-secret-puzzle {
  display: block;
}

.interlude-day.is-easter-open[data-easter-entry="title-moon"] .interlude-secret-puzzle {
  opacity: 1;
}

.interlude-puzzle-source-moon {
  position: absolute;
  top: 1.5%;
  left: 50%;
  display: block;
  width: clamp(58px, 5.2vw, 72px);
  height: auto;
  opacity: 0;
  filter: url("#interlude-puzzle-pencil");
  transform: translateX(-50%);
  transition:
    opacity 520ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.interlude-secret-puzzle.is-ready .interlude-puzzle-source-moon {
  opacity: 0.88;
}

.interlude-secret-puzzle.is-released .interlude-puzzle-source-moon {
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.9);
}

.interlude-puzzle-board {
  position: absolute;
  top: 15%;
  left: 50%;
  width: min(31vw, 300px);
  aspect-ratio: 692 / 577;
  transform: translate(-50%, 33.333%);
}

.interlude-puzzle-guide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5 20;
  pointer-events: none;
  opacity: 0;
  filter: url("#interlude-puzzle-pencil");
  transition: opacity 720ms ease;
}

.interlude-secret-puzzle.is-guide-visible .interlude-puzzle-guide {
  opacity: 1;
}

.interlude-puzzle-target {
  opacity: 0;
  transition: opacity 260ms ease;
}

.interlude-secret-puzzle.is-guide-visible .interlude-puzzle-target.is-corner {
  opacity: 0.1;
}

.interlude-secret-puzzle.is-guide-visible .interlude-puzzle-target.is-hinting {
  animation: interlude-puzzle-target-pulse 1250ms ease both;
}

.interlude-secret-puzzle.is-guide-visible .interlude-puzzle-target.is-near {
  opacity: var(--target-near-opacity, 0.56);
}

.interlude-secret-puzzle.is-guide-visible .interlude-puzzle-target.is-corner.is-hinting,
.interlude-secret-puzzle.is-guide-visible .interlude-puzzle-target.is-corner.is-near {
  opacity: 0.1;
  animation: none;
}

@keyframes interlude-puzzle-target-pulse {
  0%, 100% { opacity: 0; }
  28%, 68% { opacity: 0.46; }
}

.interlude-puzzle-piece {
  position: absolute;
  inset: 0;
  z-index: var(--piece-layer, 1);
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #2f2c28;
  outline: none;
  opacity: 0;
  pointer-events: none;
  transform-origin: var(--piece-origin-x, 50%) var(--piece-origin-y, 50%);
  transition:
    opacity 460ms ease var(--piece-delay, 0ms),
    transform 560ms cubic-bezier(0.18, 1.18, 0.3, 1);
  will-change: transform;
}

.interlude-secret-puzzle.is-dropping .interlude-puzzle-piece {
  opacity: 0.82;
}

.interlude-puzzle-piece.is-falling {
  transition:
    opacity 260ms ease,
    transform var(--piece-fall-duration, 980ms) cubic-bezier(0.2, 0.76, 0.28, 1.04);
}

.interlude-puzzle-piece.is-physics-active {
  transition: none;
}

.interlude-puzzle-piece-shape {
  cursor: grab;
  filter: none;
  pointer-events: visiblePainted;
  stroke-linecap: round;
  stroke-linejoin: round;
  touch-action: none;
}

.interlude-puzzle-piece-shape.is-card-moon-hatch {
  filter: none;
}

.interlude-puzzle-piece > .interlude-puzzle-piece-shape:not(.is-card-moon-hatch) {
  stroke-width: 2.5;
}

.interlude-puzzle-piece-shape.is-card-moon-hatch path {
  filter: none;
  stroke: currentColor;
  stroke-width: min(0.11vw, 1.06px);
  stroke-opacity: 1;
  vector-effect: non-scaling-stroke;
}

.interlude-puzzle-hit-area {
  cursor: grab;
  touch-action: none;
}

.interlude-puzzle-hit-area.is-stroke {
  fill: none;
  stroke: rgba(47, 44, 40, 0.001);
  stroke-width: 50;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
}

.interlude-puzzle-hit-area.is-surface {
  fill: rgba(47, 44, 40, 0.001);
  stroke: rgba(47, 44, 40, 0.001);
  stroke-width: 32;
  pointer-events: all;
}

.interlude-secret-puzzle:not(.is-settled) .interlude-puzzle-piece-shape,
.interlude-secret-puzzle:not(.is-settled) .interlude-puzzle-hit-area {
  pointer-events: none;
}

.interlude-puzzle-piece.is-dragging {
  z-index: 30;
  opacity: 1;
  transition: none;
}

.interlude-puzzle-piece.is-dragging .interlude-puzzle-piece-shape,
.interlude-puzzle-piece.is-dragging .interlude-puzzle-hit-area {
  cursor: grabbing;
}

.interlude-puzzle-piece.is-placed {
  opacity: 1;
}

.interlude-puzzle-piece.is-placed .interlude-puzzle-piece-shape,
.interlude-puzzle-piece.is-placed .interlude-puzzle-hit-area {
  cursor: default;
  pointer-events: none;
}

.interlude-puzzle-piece:focus-visible .interlude-puzzle-piece-shape {
  filter: drop-shadow(0 0 4px rgba(36, 33, 30, 0.24));
}

.interlude-secret-puzzle.is-complete .interlude-puzzle-guide {
  opacity: 0;
}

.interlude-puzzle-hint {
  position: absolute;
  top: 4.6%;
  left: 50%;
  margin: 0;
  color: rgba(47, 44, 40, 0.68);
  font-family: var(--type-song);
  font-size: clamp(24px, 2.15vw, 35px);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.04em;
  opacity: 0;
  filter: url("#text-pencil");
  transform: translate(-50%, 7px);
  transition: opacity 680ms ease, transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.interlude-secret-puzzle.is-hint-visible .interlude-puzzle-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

.interlude-secret-puzzle.is-complete .interlude-puzzle-hint {
  opacity: 0;
}

.interlude-puzzle-success {
  position: absolute;
  top: 69%;
  left: 50%;
  margin: 0;
  color: rgba(47, 44, 40, 0.72);
  font-family: var(--type-song);
  font-size: clamp(22px, 1.95vw, 32px);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.035em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition:
    opacity 620ms ease 420ms,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1) 420ms;
  pointer-events: none;
}

.interlude-secret-puzzle.is-complete .interlude-puzzle-success {
  opacity: 1;
  transform: translate(-50%, 0);
}

.interlude-secret-puzzle.is-complete .interlude-puzzle-board {
  animation: interlude-puzzle-settle 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes interlude-puzzle-settle {
  0% { filter: drop-shadow(0 0 0 rgba(36, 33, 30, 0)); }
  42% { filter: drop-shadow(0 0 9px rgba(36, 33, 30, 0.13)); }
  100% { filter: drop-shadow(0 0 0 rgba(36, 33, 30, 0)); }
}

.interlude-secret-record {
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: rgba(36, 33, 30, 0.72);
  filter: none;
  opacity: 0;
  transform: translate(2%, 6px) scale(0.788);
  transition: opacity 900ms ease 180ms, transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) 160ms;
}

.interlude-day[data-easter-entry="photo-moon"] .interlude-secret-record {
  display: block;
}

.interlude-day.is-easter-open[data-easter-entry="photo-moon"] .interlude-secret-record {
  opacity: 1;
  transform: translateX(2%) scale(0.8);
}

@media (min-width: 467px) {
  /* Center above 669px; below it retain that composition and crop, not drift. */
  .interlude-day[data-easter-entry="photo-moon"] .interlude-secret-view {
    bottom: auto;
    height: max(100svh, 669px);
  }

  .interlude-day[data-easter-entry="photo-moon"] .interlude-secret-content {
    height: min(max(88svh, 588.72px), 740px);
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }

  .interlude-day[data-easter-entry="photo-moon"] .interlude-secret-record {
    min-height: 0;
    min-width: 0;
  }
}

.interlude-secret-record-rotor {
  transform-box: view-box;
  transform-origin: 430px 340px;
  animation: interlude-secret-record-spin 28s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.interlude-secret-record.is-playing .interlude-secret-record-rotor {
  animation-play-state: running;
}

.interlude-secret-outline,
.interlude-secret-grooves,
.interlude-secret-staff,
.interlude-secret-spindle,
.interlude-secret-tonearm {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.interlude-secret-tonearm {
  filter: url("#interlude-secret-score-pencil");
}

.interlude-secret-outline {
  stroke-width: 1.1;
  opacity: 0.38;
  filter: url("#interlude-secret-score-pencil");
}

.interlude-secret-grooves {
  stroke-width: 0.72;
  opacity: 0.12;
}

.interlude-secret-staff {
  stroke-width: 1.02;
  opacity: 0.54;
}

.secret-score-lyric {
  fill: rgba(36, 33, 30, 0.52);
  stroke: none;
  font-family: var(--type-song);
  font-size: 13.5px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.015em;
  text-anchor: middle;
  transform: translateY(12px);
  transition: fill 140ms ease, opacity 140ms ease;
  pointer-events: none;
}

.interlude-secret-notes .secret-score-lyric {
  display: none;
}

.interlude-secret-lyric-ring {
  fill: rgba(36, 33, 30, 0.52);
  stroke: none;
  font-family: var(--type-song);
  font-size: 17px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.005em;
  text-anchor: middle;
  pointer-events: none;
}

.interlude-secret-lyric-ring text {
  transition: fill 140ms ease, opacity 140ms ease;
}

.interlude-secret-lyric-ring .secret-key-letter {
  fill: rgba(25, 23, 20, 0.96);
}

.interlude-secret-clef {
  fill: rgba(36, 33, 30, 0.72);
  font-family: "Times New Roman", serif;
  font-size: 36px;
}

.interlude-secret-notes {
  fill: url("#interlude-note-hatch");
  stroke: rgba(36, 33, 30, 0.58);
  stroke-width: 1.48;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.interlude-secret-notes > g > path:not(.secret-note-head) {
  fill: none;
}

.secret-note-flag,
.secret-score-tie {
  fill: none;
}

.secret-note-dot {
  fill: rgba(36, 33, 30, 0.69);
  stroke: none;
}

.secret-note-head {
  fill: url("#interlude-note-hatch");
  transform-box: fill-box;
  transform-origin: center;
}

.secret-key-note .secret-note-head {
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), fill 150ms ease, filter 150ms ease;
}

.secret-note-head.is-open {
  fill: #f4f1ea;
  stroke-width: 1.35;
}

.secret-key-note.is-collected {
  stroke: rgba(25, 23, 20, 0.94);
}

.secret-key-note.is-collected .secret-note-head {
  fill: rgba(25, 23, 20, 0.94);
  filter: drop-shadow(0 0 4px rgba(36, 33, 30, 0.18));
}

.secret-key-note.is-needle-hit .secret-note-head {
  transform: scale(1.2);
}

.interlude-secret-spindle {
  stroke-width: 1.15;
  opacity: 0.5;
}

.interlude-secret-tonearm {
  stroke-width: 1.35;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 811px 112px;
  transform: rotate(var(--tonearm-angle, -54deg));
  transition: opacity 720ms ease 620ms, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: grab;
  touch-action: none;
  outline: none;
}

.interlude-day.is-easter-open[data-easter-entry="photo-moon"] .interlude-secret-tonearm {
  opacity: 0.68;
}

.interlude-secret-tonearm.is-dragging {
  transition: none;
  cursor: grabbing;
}

.interlude-secret-record.is-playing .interlude-secret-tonearm {
  cursor: default;
  pointer-events: none;
}

.interlude-secret-third-lap-hint {
  fill: rgba(36, 33, 30, 0.74);
  font-family: var(--type-song);
  font-size: 20px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.035em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 520ms ease, visibility 0s linear 520ms;
}

.interlude-secret-third-lap-hint .third-lap-mobile-line {
  display: none;
}

.interlude-secret-record.is-third-lap-hint-visible .interlude-secret-third-lap-hint {
  opacity: 1;
  visibility: visible;
  transition: opacity 520ms ease;
}

.interlude-secret-tonearm:focus-visible {
  filter: url("#interlude-secret-score-pencil") drop-shadow(0 0 4px rgba(36, 33, 30, 0.18));
}

.interlude-secret-tonearm-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 34;
  pointer-events: stroke;
}

#interlude-secret-needle-tip {
  fill: rgba(36, 33, 30, 0.76);
  stroke: none;
}

@keyframes interlude-secret-record-spin {
  from { transform: rotate(64.6deg); }
  to { transform: rotate(-295.4deg); }
}

@media (max-width: 466px) {
  .interlude-secret-content {
    width: 112vw;
    height: min(78vh, 620px);
    transform: translateX(-2vw);
  }

  .interlude-puzzle-board {
    top: 15%;
    width: min(54vw, 270px);
  }

  .interlude-puzzle-source-moon { top: 1%; }
  .interlude-puzzle-hint {
    top: 4.4%;
    max-width: 94vw;
    white-space: nowrap;
    font-size: clamp(18px, 5.2vw, 24px);
  }
  .interlude-puzzle-success { top: 70%; }

  .interlude-puzzle-piece-shape.is-card-moon-hatch path {
    stroke-width: min(0.19vw, 0.96px);
  }

  .interlude-secret-lyrics { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .interlude-secret-record-rotor { animation: none; }
  .secret-note-head { transition: none; }
  .interlude-puzzle-piece,
  .interlude-secret-puzzle { transition: none; }
}

.interlude-card-field {
  display: grid;
  width: 100%;
  min-height: 0;
  place-items: center;
  perspective: 1100px;
  transform: translateY(-10px);
}

.interlude-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --flip-angle: 0deg;
  --drag-angle: 0deg;
  position: relative;
  width: min(66vw, 330px);
  aspect-ratio: 0.72;
  padding: 0;
  border: 0;
  outline: none;
  color: var(--ink);
  background: transparent;
  font-family: var(--type-song);
  cursor: grab;
  opacity: 0;
  transform: translateY(22px) rotate(-1.6deg) scale(0.96);
  transition: opacity 0.65s ease 0.22s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
  touch-action: none;
}

.interlude-day.is-active .interlude-card {
  opacity: 1;
  transform: translateY(0) rotate(-1.6deg) scale(1);
}

.interlude-card:active { cursor: grabbing; }

.interlude-card-inner {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(calc(var(--flip-angle) + var(--tilt-y) + var(--drag-angle)));
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.interlude-card.is-pointer-tilting .interlude-card-inner { transition: transform 70ms linear; }
.interlude-card.is-tilt-returning .interlude-card-inner { transition: transform 760ms cubic-bezier(0.18, 1.38, 0.35, 1); }
.interlude-card.is-dragging .interlude-card-inner { transition: none; }

.interlude-card-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 24px 26px 28px;
  overflow: hidden;
  border: 1.26px solid transparent;
  border-radius: 2px;
  background: rgba(244, 241, 234, 0.98);
  box-shadow: 4px 5px 0 rgba(36, 33, 30, 0.045);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.interlude-card-face::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  border: 1.26px solid var(--ink);
  border-radius: 2px;
  content: "";
  filter: none;
  pointer-events: none;
}

.interlude-card-index,
.interlude-card-message {
  filter: url("#card-pencil");
}

.interlude-card-back {
  grid-template-rows: 1fr;
  place-items: center;
  transform: rotateY(180deg);
  pointer-events: none;
}

.interlude-card.is-flipped .interlude-card-front,
.interlude-card.is-flipped #interlude-photo-moon {
  pointer-events: none;
}

.interlude-card.is-flipped .interlude-card-back {
  pointer-events: auto;
}

.interlude-card-index {
  justify-self: start;
  font-size: 17px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.12em;
}

.interlude-card-photo {
  position: relative;
  align-self: center;
  justify-self: center;
  display: grid;
  width: 88%;
  aspect-ratio: 1.26;
  overflow: hidden;
  border: 1.25px solid transparent;
  background: transparent;
}

.interlude-card-photo::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  border: 1.25px solid rgba(36, 33, 30, 0.62);
  content: "";
  filter: url("#card-pencil");
  pointer-events: none;
}

.interlude-photo-moon {
  --photo-moon-hatch-opacity: 0.56;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 104px;
  height: 104px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: transparent;
  cursor: default;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.interlude-photo-moon.is-trigger-hot {
  cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ctext x='1' y='23' font-size='23'%3E%F0%9F%8E%A7%3C/text%3E%3C/svg%3E") 5 5,
    pointer;
}

.interlude-photo-moon-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.interlude-photo-moon-rings,
.interlude-photo-moon-outline,
.interlude-photo-moon-ring {
  fill: none;
  stroke: rgba(36, 33, 30, 0.78);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.interlude-photo-moon-rings {
  opacity: 0.72;
  filter: url("#card-pencil");
}

.interlude-photo-moon-ring {
  stroke-width: 0.9;
}

.interlude-photo-moon-ring--morph-source {
  opacity: 0;
}

.interlude-photo-moon-outline {
  stroke-width: 0.9;
  filter: url("#card-pencil");
}

.interlude-photo-moon-outline--outer {
  opacity: 0.76;
}

.interlude-photo-moon-outline--inner {
  opacity: 0.32;
}

.interlude-photo-moon:focus-visible {
  box-shadow: 0 0 0 1px rgba(36, 33, 30, 0.38);
}

.interlude-photo-moon.is-developing .interlude-photo-moon-rings {
  stroke: rgba(36, 33, 30, 0.9);
}

.interlude-photo-moon.is-complete .interlude-photo-moon-rings {
  animation: interlude-photo-settle 420ms ease both;
}

@keyframes interlude-photo-settle {
  0% { filter: drop-shadow(0 0 0 rgba(36, 33, 30, 0)); }
  45% { filter: drop-shadow(0 0 7px rgba(36, 33, 30, 0.12)); }
  100% { filter: drop-shadow(0 0 2px rgba(36, 33, 30, 0.035)); }
}

.interlude-day.is-photo-easter-transitioning .masthead,
.interlude-day.is-photo-easter-transitioning .interlude-card-field {
  opacity: 0;
  transition: opacity 520ms ease;
}

.interlude-card-copy {
  justify-self: center;
  color: rgba(36, 33, 30, 0.58);
  font-size: 19px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.08em;
}

.interlude-card-message {
  display: grid;
  gap: 17px;
  font-size: clamp(18px, 1.72vw, 26px);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-align: center;
}

@media (max-width: 466px) {
  .interlude-card { width: min(74vw, 300px); }
  .interlude-card-face { padding: 20px 21px 24px; }
}

@media (max-height: 700px) {
  .interlude-card { width: min(62vw, 292px); }
  .interlude-card-field { transform: translateY(-6px); }
}

/* Keep the first seven daily interactions and their headings slightly more restrained. */
#film-day .film-loader-wrap,
#meter-day .meter-loader-wrap,
#focus-day .focus-loader-wrap,
#shutter-day .shutter-loader-wrap,
#stack-day .stack-loader-wrap,
#rewind-day .rewind-loader-wrap,
#developer-day .developer-loader-wrap {
  transform-origin: center center;
}

@media (min-width: 467px) {
  #film-day .film-loader-wrap { transform: translateY(-32px) scale(0.81); }
  #meter-day .meter-loader-wrap,
  #focus-day .focus-loader-wrap,
  #shutter-day .shutter-loader-wrap,
  #stack-day .stack-loader-wrap { transform: translateY(-32px) scale(0.81); }
  #stack-day .stack-loader-wrap { width: min(90vw, 920px); }
  #rewind-day .rewind-loader-wrap { transform: translateY(-28px) scale(0.81); }
  #developer-day .developer-loader-wrap { transform: translateY(-31px) scale(0.81); }
}

#film-day .film-day-title,
#meter-day .film-day-title,
#focus-day .film-day-title,
#shutter-day .film-day-title,
#stack-day .film-day-title,
#rewind-day .film-day-title,
#developer-day .film-day-title {
  font-size: clamp(27px, 2.79vw, 43.2px);
}

@media (max-width: 466px) {
  #film-day .film-day-title,
  #meter-day .film-day-title,
  #focus-day .film-day-title,
  #shutter-day .film-day-title,
  #stack-day .film-day-title,
  #rewind-day .film-day-title,
  #developer-day .film-day-title {
    font-size: clamp(22.5px, 6.3vw, 28.8px);
  }

  /* Mobile fit pass — preserve the desktop compositions while respecting
     phone safe areas, narrow keyboards, and short landscape viewports. */
  html {
    /* One paper canvas continues behind the safe areas and browser tint. */
    background: #f4f1ea url("/assets/paper-field.svg") center / cover no-repeat;
  }

  body {
    background: transparent;
  }

  html:is(.is-decoder-background, .is-rewind-dark-background) {
    color-scheme: dark;
    background-color: #070709;
    background-image: none;
  }

  .experience {
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    /* The outer canvas owns the texture; do not restart it at the scene edge. */
    background-color: transparent;
    background-image: none;
  }

  .scene {
    padding-right: max(18px, env(safe-area-inset-right));
    padding-left: max(18px, env(safe-area-inset-left));
  }

  .masthead {
    gap: 12px;
    width: calc(100vw - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }

  .chapter-stamp {
    min-width: 3.4em;
  }

  .site-icp {
    bottom: max(5px, env(safe-area-inset-bottom));
  }

  .instruction {
    right: max(18px, env(safe-area-inset-right));
    left: max(18px, env(safe-area-inset-left));
    max-width: none;
    padding-inline: 6px;
    line-height: 1.45;
    text-wrap: balance;
  }

  .morse-hint {
    display: none;
  }

  .morse-hint summary {
    width: 44px;
    height: 44px;
  }

  .hint-trigger {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }

  .meter-day-stage,
  .film-day-stage,
  .interlude-stage {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .meter-loader-wrap,
  .focus-loader-wrap,
  .shutter-loader-wrap,
  .stack-loader-wrap,
  .rewind-loader-wrap,
  .developer-loader-wrap,
  .film-loader-wrap {
    width: min(94vw, 108svh, 920px);
  }

  .meter-instruction,
  .film-instruction {
    width: min(88vw, 540px);
    max-width: 100%;
    padding-inline: 6px;
    line-height: 1.45;
    text-wrap: balance;
  }

  .moon-card-row {
    width: min(calc(100vw - 24px), 100%);
  }

  .interlude-secret-back {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    width: 44px;
    height: 44px;
  }

  .interlude-secret-content {
    width: min(96vw, 680px);
    height: min(82svh, 680px);
    transform: none;
  }

  .interlude-day[data-easter-entry="photo-moon"] .interlude-secret-view {
    /* Share lost viewport height equally between the top and bottom margins.
       Once outer space is scarce, tighten the inner gap symmetrically. */
    --record-layout-center: 50svh;
    --record-spacing-tighten: clamp(0px, calc(350.2px - 50svh), 16px);
  }

  .interlude-secret-hint {
    top: max(14px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    bottom: auto;
    left: max(16px, env(safe-area-inset-left));
    width: auto;
    max-width: calc(100vw - 32px);
    color: rgba(36, 33, 30, 0.68);
    font-family: var(--type-song);
    font-size: clamp(17px, 4.3vw, 21px);
    line-height: 1.35;
    letter-spacing: 0.055em;
    text-align: center;
    pointer-events: none;
  }

  .interlude-secret-hint .hint-trigger {
    display: none;
  }

  .interlude-secret-hint .hint-tooltip {
    position: static;
    display: block;
    width: auto;
    max-width: 100%;
    padding: 0;
    color: inherit;
    font-family: var(--type-song);
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    opacity: 1;
    text-wrap: balance;
    transform: none;
  }

  .interlude-card {
    width: min(76vw, 300px);
  }
}

@media (max-width: 466px) and (max-height: 560px) {
  .scene {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .wordmark { font-size: 16px; }

  .signal {
    width: min(92vw, calc(100dvh - 118px));
  }

  .gate-controls { top: 58%; }

  .instruction {
    bottom: max(12vh, 48px);
    font-size: 16px;
  }

  .meter-day-stage,
  .film-day-stage {
    padding-top: 0;
    padding-bottom: 4px;
  }

  .day-orbit {
    width: min(48px, 11vh);
    margin-top: 0;
  }

  .day-distance {
    margin-top: 0;
    font-size: 14px;
  }

  #film-day .film-day-title,
  #meter-day .film-day-title,
  #focus-day .film-day-title,
  #shutter-day .film-day-title,
  #stack-day .film-day-title,
  #rewind-day .film-day-title,
  #developer-day .film-day-title {
    max-width: 94vw;
    margin: 6px 0 0;
    font-size: clamp(19px, 4vw, 24px);
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
  }

  .meter-loader-wrap,
  .focus-loader-wrap,
  .shutter-loader-wrap,
  .stack-loader-wrap,
  .rewind-loader-wrap,
  .developer-loader-wrap,
  .film-loader-wrap {
    width: min(88vw, 108dvh, 860px);
  }

  #film-day .film-loader-wrap,
  #meter-day .meter-loader-wrap,
  #focus-day .focus-loader-wrap,
  #shutter-day .shutter-loader-wrap,
  #stack-day .stack-loader-wrap,
  #rewind-day .rewind-loader-wrap,
  #developer-day .developer-loader-wrap {
    transform: translateY(-8px) scale(0.76);
  }

  .meter-instruction,
  .film-instruction {
    width: min(88vw, 540px);
    font-size: 14px;
  }

  .interlude-stage { padding-bottom: 4px; }

  .interlude-card {
    width: min(42vw, 240px);
  }

  .interlude-card-field { transform: none; }

  .interlude-secret-content {
    width: min(88vw, 600px);
    height: min(78dvh, 390px);
  }
}

.interlude-card-inner {
  -webkit-transform-style: preserve-3d;
}

@property --interlude-surface-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.interlude-card-back {
  background: #f4f1ea;
}

/* Both layouts use native backface culling, as on 10.04: reveal the back
   as the drag passes 90 degrees, without waiting for release or a timer. */

/* The front/back card borders should stay equally crisp on both faces. */
.card-face::after,
.interlude-card-face::after {
  filter: none;
}

@media (max-width: 466px) {
  .wordmark,
  .chapter-stamp,
  .interlude-secret-back {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .wordmark-particle-canvas.is-phone-morphing {
    opacity: 1;
  }

  .interlude-day.is-easter-targeted #interlude-wordmark {
    transform: translateY(1px);
  }

  .interlude-secret-back:hover {
    color: rgba(36, 33, 30, 0.54);
    transform: none;
  }

  .interlude-secret-back:focus-visible {
    outline: none;
  }

  .chapter-stamp.is-code-ready:focus-visible {
    box-shadow: none;
  }

  .wordmark {
    margin-left: 5px;
    font-size: 19px;
  }

  .chapter-stamp {
    margin-right: 10px;
    font-size: 19px;
  }

  .roll-frame {
    border-width: 0.95px;
  }

  /* These pencil displacement filters blur the tiny phase marks on phones. */
  .roll-progress,
  .roll-frame,
  .roll-frame *,
  .moon,
  .card-face > .card-moons,
  .moon-landing-face > .card-moons,
  .card-moon,
  .card-moon *,
  .card-moons *,
  .moon-landing-card .card-moon,
  .lunar-card .card-moon.is-decoder-moon svg,
  .moon-landing-card .card-moon svg,
  .moon-bridge-glyph svg {
    filter: none !important;
  }

  .meter-loader-wrap.focus-loader-wrap,
  .focus-loader-wrap {
    width: min(94vw, 108svh, 920px);
    transform: translateY(12px);
  }

  #focus-day .focus-loader-wrap {
    /* A little more separation on short phone viewports. */
    transform: translateY(clamp(24px, calc(650px - 100svh), 30px)) scale(1);
  }

  #shutter-day .shutter-loader-wrap {
    width: min(94vw, 108svh, 920px);
  }

  #shutter-loader {
    aspect-ratio: 1200 / 850;
  }

  #stack-day .stack-loader-wrap,
  #developer-day .developer-loader-wrap {
    transform: translateY(-18px) scale(1.44);
  }

  #meter-day .meter-loader-wrap {
    position: relative;
    z-index: 5;
    align-self: center;
    transform: none;
  }

  .interlude-day.is-easter-targeted .interlude-orbit {
    filter: none;
  }

  .interlude-puzzle-source-moon {
    filter: none !important;
  }

  /* Native backface culling follows the actual drag/rotation angle without a timed gap. */
  /* Separate the planes; keep the existing drag angle and native face culling. */
  .interlude-card-front {
    transform: translateZ(1px);
  }

  .interlude-card-back {
    transform: rotateY(180deg) translateZ(1px);
  }

  @supports (opacity: calc(cos(0deg) * 1)) {
    .interlude-card-inner {
      --interlude-surface-angle: calc(var(--flip-angle) + var(--tilt-y) + var(--drag-angle));
      transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), --interlude-surface-angle 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .interlude-card.is-pointer-tilting .interlude-card-inner {
      transition: transform 70ms linear, --interlude-surface-angle 70ms linear;
    }

    .interlude-card.is-tilt-returning .interlude-card-inner {
      transition: transform 760ms cubic-bezier(0.18, 1.38, 0.35, 1), --interlude-surface-angle 760ms cubic-bezier(0.18, 1.38, 0.35, 1);
    }

    .interlude-card.is-dragging .interlude-card-inner { transition: none; }

    /* Cull the entire painted surface, including filtered SVG descendants.
       Use the actual angle, not the committed is-flipped state or a timer. */
    .interlude-card-front {
      opacity: clamp(0, calc(cos(var(--interlude-surface-angle)) * 10000), 1);
    }

    .interlude-card-back {
      opacity: clamp(0, calc(cos(var(--interlude-surface-angle)) * -10000), 1);
    }
  }

  .lunar-card .card-back {
    background: #f4f1ea;
  }

  /* The faint offset shadow reads as a second card outline at phone scale. */
  .lunar-card .card-face {
    box-shadow: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid var(--ink);
  }

  .lunar-card .card-inner {
    -webkit-transform-style: preserve-3d;
  }

  .lunar-card .card-face::after {
    display: none;
  }

  .interlude-day[data-easter-entry="photo-moon"] .interlude-secret-content {
    width: min(112vw, 740px);
    height: min(92svh, 820px);
    transform: none;
  }

  .interlude-day.is-easter-open[data-easter-entry="photo-moon"] .interlude-secret-record {
    transform: translateY(-50%);
  }

  .interlude-day[data-easter-entry="photo-moon"] .interlude-secret-record {
    position: absolute;
    top: calc(50% + var(--record-layout-center) - 50svh + 16px + var(--record-spacing-tighten));
    /* Freeze the artwork's scale at the 393px phone reference width. */
    left: calc(50% - 463.74px);
    width: 715.26px;
    height: auto;
    max-width: none;
    transform: translateY(-50%);
  }

  .interlude-secret-tonearm {
    --tonearm-angle: -24deg;
  }

  /* Avoid re-rasterizing the turbulent outline on every rotation frame. */
  .interlude-secret-outline,
  .secret-key-note.is-collected .secret-note-head {
    filter: none;
  }

  .interlude-secret-third-lap-hint {
    transform: translate(-410px, 660px);
    font-family: var(--type-song);
    font-size: 36px;
    text-anchor: middle;
  }

  .interlude-secret-third-lap-hint .third-lap-desktop-line {
    display: none;
  }

  .interlude-secret-third-lap-hint .third-lap-mobile-line {
    display: inline;
  }

  /* Horizontal phone layouts for the 09.28 and 10.03 film-handling tasks.
     Keep the SVG's original coordinate system so pointer geometry remains exact. */
  .film-web-shortened {
    transform: scaleX(0.9);
  }

  /* Keep the film hidden where it enters the take-up reel. */
  #film-bridge-window rect { width: 770px; }

  #film-day .takeup-reel-visual,
  #film-day .supply-reel {
    transform: scale(1.18);
  }

  #film-day .film-loader-wrap,
  #rewind-day .rewind-loader-wrap {
    position: relative;
    display: grid;
    width: min(82vw, 360px);
    aspect-ratio: 1200 / 390;
    align-self: center;
    transform: none;
  }

  #rewind-day .rewind-loader-wrap {
    z-index: 3;
  }

  #meter-day .meter-loader-wrap {
    width: min(88vw, 108dvh, 860px);
  }

  #meter-loader .meter-body,
  #meter-loader .meter-display,
  #meter-loader .meter-cap,
  #meter-loader .meter-button {
    fill: #f4f1ea !important;
    fill-opacity: 1 !important;
    opacity: 1 !important;
  }

  #developer-loader,
  #developer-paper-control,
  #developer-paper-control .developer-hit-area {
    touch-action: none;
  }

  #developer-paper-control .developer-hit-area {
    pointer-events: all;
  }

  #film-loader,
  #rewind-loader {
    position: relative;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    aspect-ratio: 1200 / 390;
    transform: none;
  }

  #focus-loader {
    aspect-ratio: 1200 / 880;
  }

  #shutter-day .shutter-loader-wrap {
    transform: translateY(26px) scale(1);
  }

  /* Keep phone layouts stable when the shutter instruction changes between
     the two-line prompt and the shorter exposure feedback. */
  #shutter-day #shutter-instruction {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(88vw, 540px);
    min-height: calc(2 * 1.45em);
  }

  #shutter-day #shutter-instruction > span {
    display: block;
    white-space: nowrap;
  }

  #stack-day .stack-drawing {
    filter: url("#stack-pencil-mobile");
  }

  /* The whole meter stays above the moon and copy, not just its SVG paths. */
  #meter-day .meter-loader-wrap {
    z-index: 100;
    isolation: isolate;
  }

  #meter-loader {
    position: relative;
    z-index: 1;
  }

  #meter-loader .meter-drawing {
    filter: none !important;
  }

  #meter-loader .light-meter {
    will-change: auto;
  }

  #meter-loader .meter-readout {
    filter: none;
  }

  #meter-loader .meter-cable,
  #meter-loader .meter-dial-unit {
    filter: url("#meter-pencil");
  }

  #focus-loader .focus-drawing {
    filter: none !important;
  }

  #focus-loader .focus-prism-frame,
  #focus-loader .focus-corner,
  #focus-loader .focus-cable,
  #focus-loader .focus-ring {
    filter: url("#focus-pencil");
  }

  #focus-loader .focus-cable {
    display: none;
  }

  #developer-day .developer-photo-art {
    filter: none !important;
  }

  #interlude-photo-moon {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
  }

  #interlude-photo-moon-growth-mask > rect:first-child,
  #interlude-photo-moon-growth-mask > path:not(.interlude-photo-moon-expand) {
    fill: #fff !important;
    fill-opacity: 0 !important;
  }

  .interlude-secret-hint {
    top: auto;
    right: max(16px, env(safe-area-inset-right));
    /* Match the 393 x 852 reference and keep copy paired with the record. */
    bottom: calc(100svh - var(--record-layout-center) - 316.2px + var(--record-spacing-tighten));
    left: max(16px, env(safe-area-inset-left));
    width: auto;
    max-width: calc(100vw - 32px);
    font-family: var(--type-song);
    font-size: 20.436px;
    text-align: center;
  }

  .interlude-puzzle-hint,
  .interlude-puzzle-success {
    filter: none;
  }

  .interlude-puzzle-success {
    font-size: clamp(18px, 5.2vw, 24px);
  }

  .interlude-secret-hint .hint-tooltip { white-space: nowrap; }

  /* Mobile browsers can retain :hover after a tap; keep the hint anchored. */
  .interlude-secret-hint:hover .hint-tooltip {
    transform: none;
  }

  .interlude-secret-third-lap-hint {
    display: none;
  }

  .interlude-secret-third-lap-hint .third-lap-mobile-line {
    display: none;
  }

  .moon-arrival-trigger {
    filter: none;
  }

  /* Give the winding cue a little breathing room from the larger reel. */
  #film-day .turn-arrow {
    transform: translate(16px, -8px);
  }
}