:root {
  --bg: #080b11;
  --surface: #111620;
  --surface-pressed: #171d29;
  --text: #f3f5f9;
  --muted: #a9b0bd;
  --faint: #737b89;
  --line: rgba(255,255,255,.085);
  --focus: #82dff6;
  --ease-arrive: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, select, a { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

a { color: inherit; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.shell {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-bottom) + 22px);
  overflow-x: clip;
}

.language-wrap {
  position: absolute;
  z-index: 10;
  inset-block-start: calc(env(safe-area-inset-top) + 12px);
  inset-inline-end: max(14px, env(safe-area-inset-right));
}

.language-select {
  min-height: 36px;
  max-width: 132px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 999px;
  background: rgba(17,22,32,.74);
  color: #bac1cd;
  font-size: 12px;
  letter-spacing: .01em;
  outline: none;
}

.language-select:focus-visible {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(130,223,246,.22);
}

.identity {
  width: min(100% - 40px, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block-start: 25px;
}

.logo-touch {
  display: grid;
  place-items: center;
  width: clamp(78px, 22vw, 98px);
  aspect-ratio: 1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 180ms var(--ease-arrive), filter 180ms ease;
}

.logo-touch.is-touched {
  transform: translateY(-1px) scale(1.012);
  filter: saturate(1.07) brightness(1.04);
}

.logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

h1 {
  transition: letter-spacing 170ms ease, opacity 170ms ease;
  margin: 13px 0 0;
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 430;
  line-height: 1.2;
  letter-spacing: .235em;
  padding-inline-start: .235em;
  color: #f4f5f8;
}

h1.is-touched {
  letter-spacing: .248em;
  opacity: .94;
}

.tagline {
  margin: 11px 0 0;
  max-width: 31rem;
  color: var(--muted);
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.45;
  letter-spacing: .015em;
  transition: opacity 160ms ease, letter-spacing 160ms ease;
}

.tagline.is-touched {
  opacity: .88;
  letter-spacing: .024em;
}

.experience {
  width: min(100vw, 720px);
  margin-block: clamp(18px, 3.2svh, 28px) 12px;
}

.world-stage {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(224px, 35svh, 318px);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  touch-action: manipulation;
}

.world-stage:focus-visible {
  outline: 2px solid rgba(130,223,246,.78);
  outline-offset: -4px;
}

.world-frame,
.world-image,
.world-light-image,
.world-veil,
.world-edge-fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.world-frame { overflow: hidden; }

.world-image,
.world-light-image {
  display: block;
  object-fit: cover;
  object-position: 50% 49%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.world-light-image {
  opacity: 0;
  filter: brightness(1.17) saturate(1.04) contrast(1.025);
  -webkit-mask-image: radial-gradient(circle 92px at var(--spot-x,50%) var(--spot-y,50%), #000 0%, rgba(0,0,0,.95) 32%, rgba(0,0,0,.28) 62%, transparent 78%);
  mask-image: radial-gradient(circle 92px at var(--spot-x,50%) var(--spot-y,50%), #000 0%, rgba(0,0,0,.95) 32%, rgba(0,0,0,.28) 62%, transparent 78%);
  transition: opacity 620ms ease-out;
}

.world-light-image.is-lit {
  opacity: .78;
  transition-duration: 90ms;
}

.world-veil {
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 122px 74px at 42% 45%,
      rgba(8,11,17,0) 0%,
      rgba(8,11,17,.03) 34%,
      rgba(8,11,17,.27) 50%,
      rgba(8,11,17,.82) 72%,
      rgba(8,11,17,.985) 91%,
      var(--bg) 100%
    );
  opacity: 1;
  transition: opacity 340ms var(--ease-arrive);
  will-change: opacity;
}

.world-stage.is-open .world-veil { opacity: 0; }

.world-edge-fade {
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(8,11,17,.56) 5%, transparent 17%),
    linear-gradient(to top, var(--bg) 0%, rgba(8,11,17,.56) 5%, transparent 17%);
  opacity: .9;
}

.signature-touch {
  width: clamp(112px, 34vw, 150px);
  min-height: 42px;
  display: grid;
  place-items: center;
  margin-block: 1px 11px;
  opacity: .42;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: opacity 180ms ease, transform 180ms var(--ease-arrive);
}

.signature-touch.is-touched {
  opacity: .68;
  transform: translateY(-1px);
}

.signature {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.doors {
  width: min(calc(100% - 40px), 430px);
  display: grid;
  gap: 11px;
}

.door {
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  padding-inline: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: #e7eaf0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 470;
  letter-spacing: .065em;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.door:active {
  background: var(--surface-pressed);
  transform: translateY(1px);
}

.door:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.social-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: grid;
  place-items: center;
  color: #c9ced7;
}

.facebook-icon {
  font: 700 20px/1 Arial, sans-serif;
  transform: translateY(1px);
}

.instagram-icon {
  position: relative;
  border: 1.8px solid currentColor;
  border-radius: 6px;
}

.instagram-icon::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1.7px solid currentColor;
  border-radius: 50%;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
}

.instagram-icon::after {
  content: "";
  position: absolute;
  width: 2.8px;
  height: 2.8px;
  border-radius: 50%;
  background: currentColor;
  inset-block-start: 4px;
  inset-inline-end: 4px;
}

.tiktok-icon {
  font: 500 22px/1 Georgia, serif;
  transform: translateY(-1px);
}

.prototype-note {
  margin: 17px 0 0;
  color: #505865;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .19em;
}

@media (min-width: 700px) {
  .shell { padding-block-start: calc(env(safe-area-inset-top) + 24px); }
  .experience { margin-block-start: 30px; }
  .world-stage { border-radius: 0; }
}

@media (max-height: 680px) {
  .identity { padding-block-start: 15px; }
  .logo-touch { width: 72px; }
  h1 { margin-top: 8px; }
  .tagline { margin-top: 7px; }
  .experience { margin-block-start: 13px; }
  .world-stage { height: 218px; }
  .signature-touch { margin-bottom: 7px; }
  .door { min-height: 47px; }
  .prototype-note { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .world-light-image { display: none; }
  .logo-touch.is-touched,
  .signature-touch.is-touched,
  .door:active { transform: none; }
}


/* Production Build 01 additions — original 01B control remains untouched in its own ZIP. */
.reset-button { border: 0; padding: 0; background: none; color: inherit; font: inherit; }
.logo-touch.reset-button { cursor: pointer; }
.prototype-note { display: none !important; }

.signature-zone { position: relative; width: min(100% - 40px, 430px); display: grid; place-items: center; min-height: 48px; }
.signature-touch { position: relative; z-index: 2; cursor: grab; }
.signature-touch:active { cursor: grabbing; }
.secret-light { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, rgba(238,248,255,.72) 0 18%, rgba(130,223,246,.20) 35%, transparent 72%); opacity: .8; cursor: pointer; }

.atlas-entry { display: block; margin: 11px auto 0; color: var(--muted); font-size: 13px; letter-spacing: .02em; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.atlas-entry[hidden] { display: none; }
.atlas-entry:hover, .atlas-entry:focus-visible { color: var(--text); }

.mailbox-entry-wrap { width: min(calc(100% - 40px),430px); display: grid; place-items: center; margin: 2px 0 17px; }
.mailbox-slot { position: relative; width: min(248px, 72vw); height: 48px; border: 0; background: transparent; cursor: pointer; color: inherit; }
.mailbox-slot-line { position: absolute; left: 8%; right: 8%; top: 17px; height: 5px; border-radius: 5px; background: #03050a; box-shadow: inset 0 1px 1px rgba(255,255,255,.035), 0 1px 0 rgba(255,255,255,.025); }
.envelope-edge { position: absolute; left: 24%; right: 24%; top: 13px; height: 15px; border-radius: 2px 2px 5px 5px; background: linear-gradient(to bottom,#e8e5dc,#cfcac0); box-shadow: 0 1px 4px rgba(0,0,0,.28); transform: translateY(6px); transition: transform 170ms var(--ease-arrive); }
.mailbox-slot:hover .envelope-edge, .mailbox-slot:focus-visible .envelope-edge, .mailbox-slot.is-touched .envelope-edge { transform: translateY(2px); }
.mailbox-slot:focus-visible { outline: 2px solid rgba(130,223,246,.8); outline-offset: 4px; border-radius: 7px; }
.mailbox-whisper { margin-top: -3px; color: var(--faint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.ue-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); }
.ue-dialog::backdrop { background: rgba(2,4,8,.82); backdrop-filter: blur(5px); }
.dialog-card { position: relative; width: min(100% - 24px, 680px); max-height: calc(100svh - 24px); overflow: auto; margin: 12px auto; padding: clamp(24px,5vw,38px); border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: #0d121a; box-shadow: 0 22px 80px rgba(0,0,0,.48); }
.dialog-close { position: sticky; float: right; top: 0; z-index: 5; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.055); color: #dfe4eb; font-size: 25px; line-height: 1; cursor: pointer; }
.dialog-close:focus-visible, .primary-action:focus-visible, .secondary-action:focus-visible, .text-action:focus-visible, .stamp-source:focus-visible, .stamp-target:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.dialog-heading { padding-right: 50px; }
.dialog-heading h2 { margin: 7px 0 8px; font-size: clamp(25px,6vw,38px); line-height: 1.08; font-weight: 480; letter-spacing: -.02em; }
.dialog-heading p:not(.eyebrow) { color: var(--muted); line-height: 1.55; margin: 0; max-width: 56ch; }
.eyebrow { margin: 0; color: #a8e9e1; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }

.letter-sheet { margin-top: 24px; padding: clamp(20px,4.5vw,34px); border-radius: 4px; background: #f3efe5; color: #1b1a18; box-shadow: 0 12px 38px rgba(0,0,0,.32); }
.letter-prompt { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(20px,5vw,27px); line-height: 1.35; margin-bottom: 14px; }
.letter-sheet textarea { width: 100%; min-height: 210px; resize: vertical; padding: 13px 0; border: 0; border-block: 1px solid rgba(32,28,21,.13); border-radius: 0; background: transparent; color: #1f1d19; font: 17px/1.62 Georgia,'Times New Roman',serif; outline: 0; }
.letter-sheet textarea:focus { border-block-color: rgba(32,28,21,.35); }
.counter-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: #6e675d; font-size: 11px; line-height: 1.4; }
.optional-fields { display: grid; gap: 13px; margin-top: 24px; }
.optional-fields label:not(.reply-check) { display: grid; gap: 6px; color: #5b554c; font-size: 12px; letter-spacing: .02em; }
.optional-fields input[type=text], .optional-fields input[type=email] { min-height: 44px; padding: 9px 11px; border: 1px solid rgba(32,28,21,.16); border-radius: 7px; background: rgba(255,255,255,.32); color: #1f1d19; font-size: 16px; }
.reply-check { display: flex; align-items: center; gap: 10px; color: #403b34; font-size: 14px; line-height: 1.4; }
.reply-check input { width: 20px; height: 20px; accent-color: #16776c; }
.email-field[hidden] { display:none !important; }

.stamp-step { margin-top: 27px; padding-top: 22px; border-top: 1px solid rgba(32,28,21,.13); }
.stamp-step-title { margin: 0; font: 600 14px/1.4 system-ui,sans-serif; }
.stamp-step-note { margin: 4px 0 0; color: #71695e; font-size: 12px; line-height: 1.45; }
.stamp-workbench { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-top: 17px; min-height: 104px; }
.stamp-source { flex: 0 0 auto; width: 64px; height: 80px; cursor: grab; filter: drop-shadow(0 4px 4px rgba(0,0,0,.16)); transition: transform 160ms ease, opacity 160ms ease; }
.stamp-source img { display:block; width:64px; height:80px; }
.stamp-source.is-placed { opacity: .24; transform: scale(.94); }
.stamp-target { width: 90px; height: 104px; border: 1px dashed rgba(32,28,21,.27); border-radius: 4px; display: grid; place-items: center; color: #81796e; font-size: 11px; text-align:center; padding: 7px; cursor:pointer; position:relative; }
.stamp-target.is-placed { border-color: transparent; }
.stamp-target.is-placed::before { content:''; position:absolute; width:64px; height:80px; background:url('/stamp-issue-01.png') center/contain no-repeat; filter: drop-shadow(0 3px 3px rgba(0,0,0,.15)); }
.stamp-target.is-placed .stamp-target-label { opacity:0; }
.turnstile-container { min-height: 1px; margin-top: 14px; }
.hp-field { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; opacity:0 !important; }
.privacy-mini { margin: 20px 0 0; color:#70685c; font-size:11px; line-height:1.5; }
.letter-actions, .sent-actions, .atlas-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.primary-action, .secondary-action, .text-action { min-height:46px; border-radius:999px; padding:10px 18px; font: 600 13px/1 system-ui,sans-serif; cursor:pointer; }
.primary-action { border:0; background:#163f3b; color:#fff; }
.primary-action:disabled { opacity:.38; cursor:not-allowed; }
.secondary-action { border:1px solid rgba(32,28,21,.18); background:transparent; color:#352f29; }
.text-action { border:0; background:transparent; color:#5f584e; text-decoration:underline; text-underline-offset:4px; }
.form-message { font-size:13px; line-height:1.5; margin:14px 0 0; }
.error-message { color:#9f2e2e; }

.sent-state { text-align:center; padding-block:10px; }
.sent-state[hidden] { display:none; }
.sent-letter-visual { position:relative; width:210px; height:128px; margin:0 auto 20px; }
.sent-stamp { position:absolute; right:13px; top:4px; width:64px; height:80px; filter:drop-shadow(0 4px 5px rgba(0,0,0,.14)); }
.postmark { position:absolute; right:43px; top:44px; width:112px; height:112px; border:2px solid rgba(29,27,24,.62); border-radius:50%; transform:rotate(-12deg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:rgba(29,27,24,.66); font:600 9px/1.1 system-ui,sans-serif; letter-spacing:.06em; }
.postmark::after { content:''; position:absolute; left:10px; right:-38px; top:55px; height:2px; background:rgba(29,27,24,.47); box-shadow:0 6px 0 rgba(29,27,24,.4),0 12px 0 rgba(29,27,24,.34); }
.postmark b { font-size:10px; }
.sent-state h3 { font:500 clamp(23px,5vw,31px)/1.15 Georgia,'Times New Roman',serif; margin:0 0 9px; }
.sent-state > p { color:#554f46; line-height:1.55; }
.reference-line code { font-size:12px; }

.atlas-card, .book-card, .secret-card { min-height:min(650px,calc(100svh - 24px)); }
.atlas-story { margin-top:26px; border:1px solid rgba(255,255,255,.09); border-radius:16px; overflow:hidden; background:#111721; }
.atlas-story img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.atlas-story div { padding:20px; }
.atlas-story h3 { margin:7px 0 8px; font-size:22px; font-weight:500; }
.atlas-story p:not(.eyebrow) { color:var(--muted); line-height:1.55; }
.atlas-card .secondary-action, .book-card .secondary-action { color:#dfe4eb; border-color:rgba(255,255,255,.13); }
.book-page { margin:30px 0; padding:clamp(22px,5vw,36px); background:#f3efe5; color:#201e1a; border-radius:4px; }
.book-kicker { color:#6f685d; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.book-page blockquote { margin:18px 0; font:500 clamp(26px,7vw,44px)/1.15 Georgia,'Times New Roman',serif; }
.book-page p:last-child { line-height:1.65; color:#514b43; }
.secret-card { display:grid; align-content:center; text-align:center; }
.secret-card p { color:var(--muted); line-height:1.6; }

@media (max-width: 480px) {
  .dialog-card { width:100%; min-height:100svh; max-height:100svh; margin:0; border-radius:0; border-inline:0; padding:22px 18px calc(24px + env(safe-area-inset-bottom)); }
  .letter-sheet { padding:20px 15px; }
  .counter-row { flex-direction:column; }
  .doors { gap:9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .world-light-image { display:none; }
  .envelope-edge { transform:none !important; }
}