/* The Landing — five free tutorial rooms before the Long Gallery.
 *
 * The wrapper mirrors Part I's Foyer shell: a centered maroon card, the
 * original painted keyhole profile as the front-step art, and tactile marks
 * that answer a tap before the five unique Call rooms begin.
 */

body.landing-body {
  --landing-maroon: #8d2337;
  --landing-red: #6f1428;
  --landing-purple: #160716;
  --landing-rose: #d9aeb7;
  --landing-rose-deep: #b27e84;
  --landing-bone: #e6dcc3;
  --landing-line: rgba(141, 35, 55, 0.24);
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(100% 72% at 50% -12%, rgba(111, 20, 40, 0.22), transparent 60%),
    radial-gradient(95% 70% at 50% 112%, rgba(56, 13, 43, 0.22), transparent 64%),
    #04050b;
  color: #ece6da;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.landing-root {
  display: flex;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(1.25rem, 4vw, 3rem) 1.25rem calc(3rem + env(safe-area-inset-bottom));
  padding-top: calc(clamp(1.25rem, 6vw, 3rem) + env(safe-area-inset-top));
}

body.landing-body.easter-in-level .landing-root {
  padding-top: calc(
    env(safe-area-inset-top, 0px) + var(--easter-home-inset, 0.6rem) +
      var(--easter-home-size, 3rem) + var(--easter-home-inset, 0.6rem)
  );
}

body.landing-body.has-easter-toc .landing-root {
  min-height: auto;
  padding-bottom: 0.8rem;
}

body.landing-body.has-easter-toc .easter-progress-toc {
  margin-top: 0;
}

.landing-main {
  width: 100%;
  max-width: 38rem;
  margin: 0;
  padding: clamp(1.25rem, 5vw, 2.25rem);
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  align-self: center;
  background: rgba(16, 12, 24, 0.82);
  border: 1px solid var(--landing-line);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.landing-main--front,
.landing-main--end {
  align-content: center;
  overflow: hidden;
}

.landing-eyebrow {
  margin: 0 0 0.25rem;
  color: var(--landing-rose);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.landing-wordmark {
  margin: 0;
  color: #f4f0ff;
  font-size: clamp(2.1rem, 10vw, 3.4rem);
  text-shadow: 0 0.16rem 0.45rem rgba(0, 0, 0, 0.58), 0 0 1rem rgba(217, 174, 183, 0.16);
}

.landing-title {
  margin: 0;
  color: #f4ecda;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.16;
}

.landing-copy {
  max-width: 29rem;
  margin: 0;
  color: #d6cdbb;
  line-height: 1.58;
}

.landing-studio-mark {
  color: var(--landing-rose);
  font-size: clamp(0.68rem, 2.7vw, 0.9rem);
}

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

body.landing-body .fyr-hero {
  --fyr-hero-bleed: clamp(1.25rem, 5vw, 2.25rem);
  display: block;
  width: calc(100% + var(--fyr-hero-bleed) + var(--fyr-hero-bleed));
  height: auto;
  margin: calc(0px - var(--fyr-hero-bleed)) calc(0px - var(--fyr-hero-bleed)) 1.5rem;
  aspect-ratio: 800 / 360;
  border-radius: 8px 8px 0 0;
}

body.landing-body .fyr-painted-door {
  pointer-events: none;
}

body.landing-body .fyr-painted-door-img {
  opacity: 0.88;
  filter: hue-rotate(318deg) saturate(0.98) contrast(1.1) brightness(0.86);
  transform: scale(1.018);
  transform-origin: 50% 50%;
  transform-box: fill-box;
  transition: filter 180ms ease, opacity 180ms ease;
}

body.landing-body .fyr-painted-door-wash {
  fill: url("#fyrPaintedDoorWash");
  opacity: 0.88;
}

body.landing-body .fyr-painted-door-scratch,
body.landing-body .fyr-painted-door-threshold {
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
}

body.landing-body .fyr-painted-door-scratch {
  stroke: rgba(217, 174, 183, 0.3);
  stroke-width: 1.7;
  filter: blur(0.2px);
}

body.landing-body .fyr-painted-door-threshold {
  stroke: rgba(255, 210, 220, 0.42);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 12px rgba(217, 148, 163, 0.28));
}

body.landing-body .fyr-door-wall {
  fill: rgba(7, 5, 11, 0.9);
}

body.landing-body .fyr-door-floor-shadow {
  fill: rgba(0, 0, 0, 0.72);
}

body.landing-body .fyr-door-floor-glow {
  fill: rgba(217, 148, 163, 0.2);
  filter: blur(7px);
}

body.landing-body .fyr-door-outer-arch,
body.landing-body .fyr-door-inner-arch,
body.landing-body .fyr-door-panel,
body.landing-body .fyr-door-seam {
  vector-effect: non-scaling-stroke;
}

body.landing-body .fyr-door-outer-arch {
  fill: none;
  stroke: rgba(217, 174, 183, 0.68);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 12px rgba(217, 148, 163, 0.2));
}

body.landing-body .fyr-door-inner-arch {
  fill: rgba(7, 5, 12, 0.96);
  stroke: rgba(255, 210, 220, 0.3);
  stroke-width: 1.5;
}

body.landing-body .fyr-door-panel {
  fill: rgba(13, 9, 18, 0.18);
  stroke: rgba(217, 174, 183, 0.34);
  stroke-width: 1.2;
}

body.landing-body .fyr-door-seam {
  stroke: rgba(255, 210, 220, 0.16);
  stroke-width: 1;
}

body.landing-body .fyr-door-keyhole-base {
  fill: url("#fyrDoorGlow");
  filter: url("#fyrSoftGlow");
  opacity: 0.42;
  transform-box: fill-box;
  transform-origin: 50% 52%;
  animation: fyr-ghost-keyhole-breathe 5.6s ease-in-out infinite;
}

body.landing-body .fyr-painted-door-rim {
  fill: none;
  stroke: rgba(255, 210, 220, 0.32);
  stroke-width: 1.7;
  filter: drop-shadow(0 0 14px rgba(217, 148, 163, 0.24));
}

@keyframes fyr-ghost-keyhole-breathe {
  0%, 100% { opacity: 0.32; transform: scale(0.985); }
  50% { opacity: 0.52; transform: scale(1.015); }
}

body.landing-body .fyr-facade-window,
body.landing-body .fyr-facade-knocker,
body.landing-body .fyr-facade-lamp,
body.landing-body .fyr-facade-moon {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.landing-body .fyr-window-pane,
body.landing-body .fyr-window-glow,
body.landing-body .fyr-window-silhouette {
  transition: opacity 180ms ease, fill 180ms ease, stroke 180ms ease;
}

body.landing-body .fyr-window-glow,
body.landing-body .fyr-window-silhouette {
  opacity: 0;
}

body.landing-body .fyr-door-mark.is-lit .fyr-window-glow {
  opacity: 0.68;
}

body.landing-body .fyr-door-mark.is-lit .fyr-window-silhouette {
  opacity: 0.72;
}

body.landing-body .fyr-facade-window:focus-visible .fyr-window-glow,
body.landing-body .fyr-facade-knocker:focus-visible .fyr-knocker-ring,
body.landing-body .fyr-facade-lamp:focus-visible .fyr-lamp-flame {
  opacity: 0.5;
}

body.landing-body .fyr-facade.is-knocking .fyr-painted-door-img,
body.landing-body .fyr-facade.has-lit-lamp .fyr-painted-door-img,
body.landing-body .fyr-facade.has-lit-window .fyr-painted-door-img {
  opacity: 0.98;
  filter: hue-rotate(318deg) saturate(1.1) contrast(1.12) brightness(0.98);
}

body.landing-body .fyr-facade.is-knocking .fyr-door-keyhole-base,
body.landing-body .fyr-facade.has-lit-lamp .fyr-door-keyhole-base,
body.landing-body .fyr-facade.has-lit-window .fyr-door-keyhole-base {
  opacity: 1;
}

body.landing-body .fyr-facade.is-knocking .fyr-painted-door-rim,
body.landing-body .fyr-facade.has-lit-lamp .fyr-painted-door-rim,
body.landing-body .fyr-facade.has-lit-window .fyr-painted-door-rim {
  stroke: rgba(255, 210, 220, 0.52);
  filter: drop-shadow(0 0 22px rgba(217, 148, 163, 0.5));
}

body.landing-body .fyr-facade.is-knocking .fyr-painted-door-threshold,
body.landing-body .fyr-facade.has-lit-lamp .fyr-painted-door-threshold,
body.landing-body .fyr-facade.has-lit-window .fyr-painted-door-threshold {
  stroke: rgba(255, 210, 220, 0.64);
}

body.landing-body .fyr-knocker-ring {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  opacity: 0;
  transition: opacity 180ms ease;
}

body.landing-body .fyr-facade.is-knocking .fyr-knocker-ring {
  animation: fyr-knock 360ms ease;
  opacity: 0.28;
}

body.landing-body .fyr-facade-doorlight {
  opacity: 0;
  transition: opacity 200ms ease;
}

body.landing-body .fyr-facade.is-knocking .fyr-facade-doorlight {
  animation: fyr-doorglow 820ms ease;
}

@keyframes fyr-knock {
  0% { transform: rotate(0); }
  25% { transform: rotate(-11deg); }
  55% { transform: rotate(8deg); }
  80% { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}

@keyframes fyr-doorglow {
  0% { opacity: 0.12; }
  45% { opacity: 0.55; }
  100% { opacity: 0.12; }
}

body.landing-body .fyr-lamp-flame,
body.landing-body .fyr-lamp-glow,
body.landing-body .fyr-lamp-pool {
  transition: opacity 240ms ease;
}

body.landing-body .fyr-lamp-flame,
body.landing-body .fyr-lamp-glow {
  opacity: 0;
}

body.landing-body .fyr-facade.has-lit-lamp .fyr-lamp-flame {
  opacity: 0.92;
  animation: fyr-lamp-flicker 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

body.landing-body .fyr-facade.has-lit-lamp .fyr-lamp-glow {
  opacity: 0.26;
}

body.landing-body .fyr-facade.has-lit-lamp .fyr-lamp-pool {
  opacity: 0.16;
}

@keyframes fyr-lamp-flicker {
  0%, 100% { opacity: 0.92; transform: scaleY(1); }
  40% { opacity: 0.74; transform: scaleY(0.94); }
  70% { opacity: 0.86; transform: scaleY(1.03); }
}

body.landing-body .fyr-star {
  opacity: var(--star-op, 0.45);
  transform-box: fill-box;
  transform-origin: center;
  animation: fyr-twinkle 5s ease-in-out infinite;
}

@keyframes fyr-twinkle {
  0%, 100% { opacity: calc(var(--star-op, 0.45) * 0.3); transform: scale(0.8); }
  50% { opacity: var(--star-op, 0.45); transform: scale(1.05); }
}

body.landing-body .fyr-facade-halo {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

body.landing-body .fyr-moon-face {
  opacity: 0.26;
}

body.landing-body .fyr-facade-moon:focus-visible .fyr-facade-halo {
  opacity: 0.2;
}

body.landing-body .fyr-moon-wash {
  mix-blend-mode: screen;
}

body.landing-body .fyr-facade.is-moonlit .fyr-moon-wash {
  animation: fyr-moonwash 1500ms ease;
}

body.landing-body .fyr-facade.is-moonlit .fyr-facade-halo {
  animation: fyr-halo-flare 1500ms ease;
}

@keyframes fyr-moonwash {
  0% { opacity: 0; }
  30% { opacity: 0.16; }
  100% { opacity: 0; }
}

@keyframes fyr-halo-flare {
  0%, 100% { opacity: 0.06; transform: scale(1); }
  28% { opacity: 0.3; transform: scale(1.18); }
}

.landing-front-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.landing-room-head {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

.landing-stage {
  width: min(100%, 28rem);
  min-height: 18rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.9rem;
  padding: 1.15rem;
  border: 1px solid var(--landing-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.lnd-art {
  width: min(100%, 18rem);
  min-height: 11.5rem;
  display: grid;
  place-items: center;
}

.landing-stage-status,
.landing-feedback {
  min-height: 1.35rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.landing-form {
  width: min(100%, 28rem);
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  justify-content: center;
  max-width: 24rem;
  margin: 0.35rem auto 0;
}

.landing-form.is-latched .landing-input,
.landing-form.is-latched .landing-key {
  opacity: 0.4;
}

.landing-form.is-latched + .landing-feedback {
  opacity: 1;
}

.landing-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(199, 180, 255, 0.26);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.45);
  color: #f4ecda;
  letter-spacing: 0.02em;
  text-align: center;
}

.landing-input:focus-visible {
  border-color: var(--landing-maroon);
  outline: none;
  box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(141, 35, 55, 0.22);
}

.landing-key {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--landing-maroon);
  line-height: 0;
  cursor: pointer;
}

.landing-key:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.landing-key-svg {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  color: inherit;
  transform-origin: 31% 50%;
  transition: color 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-key:hover .landing-key-svg {
  filter: brightness(1.2);
}

.landing-key-unlocked .landing-key-svg {
  color: var(--moss);
  transform: rotate(-90deg);
}

@keyframes landing-key-jiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-7deg); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-4deg); }
}

.landing-key-jiggle .landing-key-svg {
  animation: landing-key-jiggle 0.4s ease;
}

.lnd-phone {
  position: relative;
  width: 13rem;
  height: 8rem;
  border: 0;
  background: transparent;
  color: #d8c49a;
  cursor: pointer;
}

.lnd-phone-cradle,
.lnd-phone-receiver,
.lnd-phone-cord {
  position: absolute;
  display: block;
}

.lnd-phone-cradle {
  left: 2.2rem;
  right: 2.2rem;
  bottom: 0.8rem;
  height: 4.3rem;
  border: 2px solid currentColor;
  border-radius: 45% 45% 24% 24%;
  background: rgba(5, 4, 10, 0.68);
}

.lnd-phone-receiver {
  left: 1.1rem;
  right: 1.1rem;
  top: 0.55rem;
  padding: 0.7rem 0;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: #0b0912;
  color: transparent;
  font-weight: 800;
  letter-spacing: 0.32em;
  transform: rotate(-4deg);
  transition: transform 220ms ease, color 180ms ease, box-shadow 180ms ease;
}

.lnd-phone.is-lifted .lnd-phone-receiver {
  color: #f5edf1;
  transform: translateY(-1.4rem) rotate(3deg);
  box-shadow: 0 0 1.4rem rgba(178, 126, 132, 0.28);
}

.lnd-phone-cord {
  left: 50%;
  top: 3.8rem;
  width: 5rem;
  height: 4rem;
  border-bottom: 2px solid rgba(216, 196, 154, 0.38);
  border-left: 2px solid rgba(216, 196, 154, 0.38);
  border-radius: 0 0 0 4rem;
}

.lnd-runner-art {
  position: relative;
  min-height: 14rem;
}

.lnd-runner {
  position: relative;
  width: 10.5rem;
  height: 12rem;
  padding: 0.8rem;
  border-radius: 4rem 4rem 1rem 1rem;
  background: linear-gradient(180deg, rgba(178, 126, 132, 0.42), rgba(64, 38, 50, 0.58));
  box-shadow: inset 0 0 0 1px rgba(216, 196, 154, 0.18);
  overflow: visible;
}

.lnd-runner-stitches {
  position: absolute;
  inset: 1rem 0.9rem 1.4rem;
  display: grid;
  align-content: space-around;
}

.lnd-runner-stitches span {
  border-top: 1px dashed rgba(245, 237, 241, 0.22);
}

.lnd-runner-thread {
  position: absolute;
  inset: 0.75rem 4.65rem 1.5rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.32rem;
  pointer-events: none;
}

.lnd-runner-thread span {
  flex: 1;
  border-radius: 999px;
  background: #e87f92;
  box-shadow: 0 0 0.6rem rgba(232, 127, 146, 0.45);
  opacity: 0.08;
  transform: scaleY(0.25);
  transition: opacity 160ms ease, transform 160ms ease;
}

.lnd-runner[data-climb-step="1"] .lnd-runner-thread span:nth-child(1),
.lnd-runner[data-climb-step="2"] .lnd-runner-thread span:nth-child(-n + 2),
.lnd-runner[data-climb-step="3"] .lnd-runner-thread span:nth-child(-n + 3) {
  opacity: 0.92;
  transform: scaleY(1);
}

.lnd-runner.is-complete .lnd-runner-thread span {
  opacity: 0.92;
  transform: scaleY(1);
}

.lnd-ribbon-loops {
  position: absolute;
  right: 0.65rem;
  bottom: -1.55rem;
  left: 0.65rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.lnd-ribbon {
  min-width: 2.65rem;
  min-height: 3.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.lnd-ribbon span {
  display: block;
  width: 2.45rem;
  height: 2.85rem;
  margin: 0 auto;
  border: 0.35rem solid #8d2337;
  border-top-width: 0.5rem;
  border-radius: 0.9rem 0.9rem 1.4rem 1.4rem;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 222, 0.18), 0 0.45rem 0.8rem rgba(0, 0, 0, 0.28);
  transform-origin: 50% 0;
  transition: transform 180ms ease, border-color 180ms ease;
}

.lnd-ribbon:focus-visible {
  outline: 2px solid var(--landing-rose-light);
  outline-offset: 0.2rem;
  border-radius: 0.65rem;
}

.lnd-ribbon.is-holding {
  cursor: grabbing;
}

.lnd-ribbon.is-holding span,
.lnd-ribbon.is-pulled span {
  border-color: #e87f92;
  transform: translateY(0.75rem) scaleY(1.18);
}

.lnd-runner.is-crossing .lnd-ribbon[data-loop="1"] span {
  transform: translateX(-0.65rem) rotate(10deg);
}

.lnd-runner.is-returning .lnd-ribbon[data-loop="3"] span {
  transform: translateY(0.55rem) rotate(-8deg);
}

.lnd-bell {
  width: 7.4rem;
  height: 5.2rem;
  border: 0;
  border-radius: 5rem 5rem 1rem 1rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 246, 210, 0.74), transparent 18%),
    linear-gradient(180deg, #d8c49a, #8a7050);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.lnd-bell-art {
  align-content: center;
  gap: 0.8rem;
  min-height: 16rem;
}

.lnd-bell span {
  display: block;
  width: 1.8rem;
  height: 0.5rem;
  margin: -0.45rem auto 0;
  border-radius: 999px;
  background: #e8d7a8;
}

.lnd-bell.is-ringing {
  animation: landing-bell 160ms ease;
}

.lnd-bell-readout {
  width: min(100%, 16rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.lnd-bell-label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.lnd-bell-sequence {
  height: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 0.28rem;
  padding: 0.3rem;
  border: 1px solid rgba(216, 196, 154, 0.18);
  border-radius: 0.5rem;
  background: rgba(4, 4, 12, 0.32);
}

.lnd-bell-note {
  width: 100%;
  height: 0.5rem;
  border-radius: 999px;
  background: #d8c49a;
  box-shadow: 0 0 0.6rem rgba(216, 196, 154, 0.35);
  transition: background 160ms ease, transform 160ms ease;
}

.lnd-bell-note--low { align-self: end; }
.lnd-bell-note--middle { align-self: center; }
.lnd-bell-note--high { align-self: start; }

.lnd-bell-sequence.is-judged .lnd-bell-note.is-changed {
  background: #8d2337;
  transform: scaleX(0.68);
}

.lnd-bell-shafts {
  display: grid;
  grid-template-columns: repeat(3, 3rem);
  gap: 0.6rem;
}

.lnd-bell-shaft {
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(216, 196, 154, 0.38);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 196, 154, 0.18), rgba(25, 17, 24, 0.82) 62%);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.lnd-bell-shaft[aria-pressed="true"] {
  border-color: #e8d7a8;
  color: #fff4d2;
  box-shadow: 0 0 1rem rgba(216, 196, 154, 0.3);
}

.lnd-bell-keep {
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(216, 196, 154, 0.38);
  border-radius: 999px;
  background: rgba(216, 196, 154, 0.1);
  color: var(--fg);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.lnd-bell-shaft:disabled,
.lnd-bell-keep:disabled {
  cursor: default;
  opacity: 0.34;
}

.lnd-bell-art.is-complete .lnd-bell-sequence {
  border-color: rgba(232, 215, 168, 0.58);
  box-shadow: 0 0 1.2rem rgba(216, 196, 154, 0.18);
}

.lnd-window-art {
  position: relative;
  width: 12rem;
  min-height: 13rem;
  grid-template-columns: repeat(2, 5rem);
  grid-template-rows: repeat(2, 5.7rem);
  gap: 0.22rem;
  padding: 0.7rem;
  border: 1px solid rgba(216, 196, 154, 0.22);
  border-radius: 5.8rem 5.8rem 0.4rem 0.4rem;
  background: linear-gradient(180deg, rgba(178, 126, 132, 0.1), rgba(6, 5, 13, 0.42));
}

.lnd-pane {
  position: relative;
  width: 5rem;
  height: 5.7rem;
  padding: 0;
  border: 1px solid rgba(216, 196, 154, 0.28);
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
  overflow: hidden;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.lnd-pane-mark {
  position: absolute;
  inset: 0;
  transform-origin: center;
  transition: transform 180ms ease;
}

.lnd-pane-mark::before,
.lnd-pane-mark::after {
  position: absolute;
  content: "";
  background: rgba(216, 196, 154, 0.32);
  transition: background 160ms ease, box-shadow 160ms ease;
}

.lnd-pane-mark::before {
  top: 0;
  left: calc(50% - 0.08rem);
  width: 0.16rem;
  height: calc(50% + 0.08rem);
}

.lnd-pane-mark::after {
  top: calc(50% - 0.08rem);
  right: 0;
  width: calc(50% + 0.08rem);
  height: 0.16rem;
}

.lnd-pane[data-turn="1"] .lnd-pane-mark { transform: rotate(90deg); }
.lnd-pane[data-turn="2"] .lnd-pane-mark { transform: rotate(180deg); }
.lnd-pane[data-turn="3"] .lnd-pane-mark { transform: rotate(270deg); }

.lnd-pane.is-lit {
  background: rgba(216, 160, 170, 0.14);
  box-shadow: inset 0 0 1.4rem rgba(216, 160, 170, 0.22);
}

.lnd-pane.is-lit .lnd-pane-mark::before,
.lnd-pane.is-lit .lnd-pane-mark::after {
  background: #f2a8b7;
  box-shadow: 0 0 0.7rem rgba(242, 168, 183, 0.72);
}

.lnd-pane.is-blocked {
  box-shadow: inset 0 0 0 1px rgba(141, 35, 55, 0.78), inset 0 0 1.2rem rgba(141, 35, 55, 0.2);
}

.lnd-window-entry,
.lnd-window-exit {
  position: absolute;
  z-index: 2;
  left: 3.12rem;
  width: 0.18rem;
  height: 0.85rem;
  border-radius: 999px;
  background: #f2a8b7;
  box-shadow: 0 0 0.8rem rgba(242, 168, 183, 0.72);
}

.lnd-window-entry { bottom: -0.55rem; }
.lnd-window-exit { top: -0.55rem; opacity: 0.18; }

.lnd-window-art.is-complete .lnd-window-exit {
  opacity: 1;
  box-shadow: 0 0 1.2rem rgba(242, 168, 183, 0.92);
}

.lnd-memory-art {
  width: min(100%, 23rem);
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.lnd-memory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.lnd-memory-dial {
  min-height: 5.6rem;
  display: grid;
  place-items: center;
  gap: 0.12rem;
  padding: 0.58rem 0.42rem;
  border: 1px solid rgba(216, 196, 154, 0.3);
  border-radius: 0.5rem;
  background:
    radial-gradient(circle at 50% 58%, rgba(216, 196, 154, 0.1), transparent 46%),
    rgba(255, 255, 255, 0.025);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.lnd-memory-word {
  color: #f0b4c0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.lnd-memory-object,
.lnd-memory-state {
  text-transform: uppercase;
}

.lnd-memory-object {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  opacity: 0.7;
}

.lnd-memory-state {
  min-width: 5.6rem;
  margin-top: 0.18rem;
  padding: 0.24rem 0.42rem;
  border: 1px solid rgba(216, 196, 154, 0.2);
  border-radius: 999px;
  color: #f5edf1;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.lnd-memory-dial.is-aligned {
  border-color: rgba(242, 168, 183, 0.72);
  background: rgba(178, 126, 132, 0.14);
  box-shadow: inset 0 0 1.1rem rgba(242, 168, 183, 0.14);
}

.lnd-memory-dial.is-misaligned {
  border-color: rgba(141, 35, 55, 0.72);
}

.lnd-memory-door {
  position: relative;
  width: 9.4rem;
  height: 6.6rem;
  margin: 0.15rem auto 0;
  perspective: 18rem;
}

.lnd-memory-door-glow {
  position: absolute;
  inset: 0.52rem 2.35rem 0.2rem;
  border-radius: 2rem 2rem 0.2rem 0.2rem;
  background: radial-gradient(ellipse at 50% 68%, rgba(244, 227, 182, 0.68), rgba(178, 126, 132, 0.12) 56%, transparent 72%);
  opacity: 0;
  transition: opacity 240ms ease;
}

.lnd-memory-door-frame {
  position: absolute;
  inset: 0.34rem 2.45rem 0;
  display: block;
  border: 1px solid rgba(216, 196, 154, 0.45);
  border-bottom: 0;
  border-radius: 2rem 2rem 0.14rem 0.14rem;
  box-shadow: 0 0 0 0.24rem rgba(11, 9, 17, 0.9);
}

.lnd-memory-door-leaf {
  position: absolute;
  inset: 0.22rem;
  display: block;
  border: 1px solid rgba(216, 196, 154, 0.2);
  border-radius: 1.72rem 1.72rem 0.08rem 0.08rem;
  background:
    radial-gradient(circle at 75% 56%, #d8c49a 0 0.1rem, transparent 0.12rem),
    linear-gradient(150deg, rgba(29, 23, 35, 0.98), rgba(7, 6, 12, 0.98));
  transform-origin: left center;
  transition: transform 360ms ease, filter 240ms ease;
}

.lnd-memory-contacts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lnd-memory-contacts i {
  position: absolute;
  width: 0.46rem;
  height: 0.46rem;
  border: 1px solid rgba(216, 196, 154, 0.45);
  border-radius: 50%;
  background: #090711;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.lnd-memory-contacts i:nth-child(1) { left: 0.75rem; top: 1.45rem; }
.lnd-memory-contacts i:nth-child(2) { right: 0.75rem; top: 1.45rem; }
.lnd-memory-contacts i:nth-child(3) { left: 0.75rem; bottom: 1.05rem; }
.lnd-memory-contacts i:nth-child(4) { right: 0.75rem; bottom: 1.05rem; }

.lnd-memory-contacts i.is-lit {
  border-color: #f2a8b7;
  background: #f2a8b7;
  box-shadow: 0 0 0.8rem rgba(242, 168, 183, 0.84);
}

.lnd-memory-door.is-open .lnd-memory-door-glow { opacity: 1; }

.lnd-memory-door.is-open .lnd-memory-door-leaf {
  filter: brightness(1.15);
  transform: rotateY(-68deg);
}

.lnd-memory-test {
  justify-self: center;
  min-height: 2.5rem;
  padding: 0.52rem 0.9rem;
  border: 1px solid rgba(216, 196, 154, 0.38);
  border-radius: 999px;
  background: rgba(178, 126, 132, 0.14);
  color: #f5edf1;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing-noscript {
  max-width: 26rem;
  margin: 4rem auto;
  padding: 0 1rem;
  color: var(--fg-secondary);
  text-align: center;
}

@keyframes landing-bell {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-4deg); }
  70% { transform: rotate(4deg); }
}

@media (max-width: 370px) {
  .landing-stage {
    padding: 0.8rem;
  }

  .lnd-pane {
    width: 3.1rem;
  }

  .lnd-memory-grid {
    gap: 0.4rem;
  }

  .lnd-memory-dial {
    min-height: 5rem;
    padding-inline: 0.28rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lnd-phone-receiver,
  .lnd-ribbon,
  .lnd-ribbon span,
  .lnd-runner-thread span,
  .lnd-bell-note,
  .lnd-pane-mark,
  .lnd-pane-mark::before,
  .lnd-pane-mark::after,
  .lnd-window-exit,
  .lnd-pane,
  .lnd-memory-dial,
  .lnd-memory-door-glow,
  .lnd-memory-door-leaf,
  .lnd-memory-contacts i {
    transition: none !important;
  }

  .lnd-bell.is-ringing,
  .landing-key-jiggle .landing-key-svg,
  body.landing-body .fyr-door-keyhole-base,
  body.landing-body .fyr-facade.is-knocking .fyr-knocker-ring,
  body.landing-body .fyr-facade.is-knocking .fyr-facade-doorlight,
  body.landing-body .fyr-facade.has-lit-lamp .fyr-lamp-flame,
  body.landing-body .fyr-star,
  body.landing-body .fyr-facade.is-moonlit .fyr-moon-wash,
  body.landing-body .fyr-facade.is-moonlit .fyr-facade-halo {
    animation: none !important;
  }

  .landing-key-svg {
    transition: color 0.8s ease;
  }

  .landing-key-unlocked .landing-key-svg {
    transform: none;
  }

  body.landing-body .fyr-star {
    opacity: var(--star-op, 0.45);
    transform: none;
  }
}