.landing-story .scroll-track { height: 3100svh; }
.scroll-track:focus { outline: none; }
.landing-story .scene-copy {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.landing-story .canvas-wrap { display: none; }
.landing-cinema { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.landing-world { position: absolute; top: 50%; left: 50%; transform-origin: center; }
.landing-world > div { position: absolute; top: 0; left: 0; transform-origin: top left; }
.landing-story .header, .landing-story .stages, .landing-story .scene-footer {
  color: var(--chrome-ink, #f4f1ea);
}
.landing-story .brand img, .landing-story .brand-fill::before { filter: invert(var(--logo-invert, 1)); }
.landing-story .stages { z-index: 9; }
.landing-story .stages button { width: 44px; height: 44px; }
.landing-story .stages button::before { background: var(--chrome-ink); }
.landing-story .scene-footer { z-index: 9; color:var(--footer-ink,var(--chrome-ink));text-shadow:0 1px 2px rgb(62 13 6 / var(--footer-shadow,0)); }
.landing-story .scroll-hint > span, .landing-story .ending button { color: inherit; }
.landing-story .ending { background: var(--wash); padding-left: 15px; }
.landing-story .ending .other { color: var(--paper); }
.landing-story .progress { background: color-mix(in srgb, var(--chrome-ink) 12%, transparent); }
.landing-story .progress i { background:var(--footer-ink,var(--chrome-ink)); }
.landing-story button:focus-visible { outline-color: var(--chrome-ink); }

.main-sheet { z-index: 3; will-change: transform; }
.sheet-surface {
  position: relative; width: 100%; height: 100%; background: var(--sheet-fill, #30312b);
  border: 1px solid var(--sheet-border, #3d3e37); box-shadow: 0 24px 65px #00000015;
  transform-origin: center; --media-fill: #d9d5cc; --media-disc: #bdb8ad;
  --media-stripe: #eae6df; --button-fill: #292b25; --button-ink: #efebe3;
  --card-fill: #ddd8cd;
}
.sheet-surface > div { position: absolute; left: 0; top: 0; transform-origin: top left; }
.sheet-browser { border-bottom: 1px solid #d9d4ca; display: flex; gap: 6px; align-items: center; padding: 0 16px; }
.sheet-browser > i { width: 4px; height: 4px; border-radius: 50%; background: #b8b2a7; }
.sheet-browser > b { width: 40%; height: 5px; border-radius: 2px; margin: auto; background: #e6e1d8; }
.sheet-nav { display: flex; align-items: center; gap: 12px; }
.sheet-nav > i { width: 11%; height: 8px; background: #292b25; margin-right: auto; }
.sheet-nav > span { width: 7%; height: 3px; background: #bbb6ac; }
.sheet-heading-bars { display: flex; flex-direction: column; gap: 14%; }
.sheet-heading-bars > i { display: block; height: 19%; background: #292b25; }
.sheet-heading-bars > i:nth-child(2) { width: 86%; }
.sheet-heading-bars > i:last-child { width: 61%; }
.sheet-copy-bars { display: flex; flex-direction: column; justify-content: space-between; }
.sheet-copy-bars > i { display: block; height: 3px; background: #c9c3b7; }
.sheet-copy-bars > i:nth-child(2) { width: 87%; }
.sheet-copy-bars > i:last-child { width: 58%; }
.sheet-media { overflow: hidden; background: var(--media-fill); }
.sheet-media > i {
  display: block; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%;
  left: 10%; top: 8%; background: var(--media-disc);
}
.sheet-media > b { position: absolute; width: 140%; height: 45%; left: -20%; bottom: -8%; background: var(--media-stripe); transform: rotate(-32deg); }
.sheet-button { background: var(--button-fill); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; }
.sheet-button > i { width: 42%; height: 3px; background: var(--button-ink); }
.sheet-button > b { width: 7px; height: 7px; border: 1px solid var(--button-ink); border-radius: 50%; }
.sheet-card { border: 1px solid #ded8cd; background: #fcfaf6; }
.sheet-card > i { position: absolute; top: 0; left: 0; width: 100%; height: 57%; background: var(--card-fill); }
.sheet-card > b { position: absolute; top: 70%; left: 10%; width: 67%; height: 5%; background: #33352e; }
.sheet-card > span { position: absolute; top: 84%; left: 10%; width: 44%; height: 2%; background: #c5beb1; }
.sheet-selection { border: 2px solid #ff4b25; background: #ff4b2510; z-index: 5; }
.sheet-selection > i { position: absolute; width: 7px; height: 7px; background: #fcfaf6; border: 2px solid #ff4b25; }
.sheet-selection > i:nth-child(1) { top: -4px; left: -4px; }
.sheet-selection > i:nth-child(2) { top: -4px; right: -4px; }
.sheet-selection > i:nth-child(3) { bottom: -4px; left: -4px; }
.sheet-selection > i:nth-child(4) { bottom: -4px; right: -4px; }

.story-title {
  z-index: 6; text-align: center; font-weight: 600; font-size: 140px;
  line-height: .96; letter-spacing: -.075em; color: var(--title-ink, #f4f1ea);
  will-change: transform, opacity;
}

.story-actions { display: flex; align-items: center; gap: 26px; }
.restart { padding: 12px 0; min-height: 44px; font-size: 12px; }
.restart > span { margin-left: 8px; font-size: 18px; }


@media (max-width: 700px) {
  .landing-story:not(.request-intro-active) .landing-cinema::after {
    content: ''; position: absolute; inset: auto 0 0; height: 150px; z-index: 8;
    background: linear-gradient(to bottom, transparent, var(--landing-cover, var(--wash)) 25%);
    opacity: var(--footer-cover, 0); pointer-events: none;
  }
  .landing-story .stages { background: transparent; }
  .landing-story .ending { padding-left: 0; }
  .story-actions { gap: 15px; }
  .restart { font-size: 11px; }
  .restart > span { margin-left: 5px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .main-sheet, .story-title { will-change: auto; }
}

/* The drawn element and the filled element are the same persistent component. */
.sheet-part {--part-draw:0;--part-fill:0;--part-outline:1}
.sheet-part > :not(.part-wireframe) {opacity:var(--part-fill)}
.sheet-part > .part-wireframe {position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:var(--part-outline);pointer-events:none;fill:none;stroke:#ff4b25;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.part-wireframe path {stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--part-draw))}
.sheet-media {background:color-mix(in srgb,var(--media-fill) calc(var(--part-fill) * 100%),transparent)}
.sheet-button {background:color-mix(in srgb,var(--button-fill) calc(var(--part-fill) * 100%),transparent)}

@media(max-width:700px){.landing-story .stages button::before{background:var(--footer-ink,var(--chrome-ink))}}

/* Chapter titles share the Oswald system of the menu and service stories. */
.story-title.title-2,.story-title.title-3,.story-title.title-4 {font-family:Oswald,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:.98}
.title-line {display:block;overflow:hidden;padding:.06em .08em .12em;margin:-.06em -.08em -.12em}
.title-line > span {display:block;will-change:transform}
@media (prefers-reduced-motion: reduce) {.title-line > span {will-change:auto}}

/* Launch gloss and live indicator. */
.sheet-surface {--shine:0;--shine-on:0}
.sheet-surface::after {content:'';position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgb(255 255 255 / .7) 50%,transparent 60%) no-repeat;background-size:300% 100%;background-position:calc(100% - var(--shine) * 100%) 0;opacity:var(--shine-on)}
.sheet-browser {--live:0}
.sheet-browser::after {content:'';position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#3fae6a;opacity:var(--live);transform:scale(var(--live));box-shadow:0 0 0 0 #3fae6a66;animation:live-pulse 1.8s ease-out infinite}
@keyframes live-pulse {0%{box-shadow:0 0 0 0 #3fae6a77}80%,100%{box-shadow:0 0 0 7px #3fae6a00}}

/* Liquid flood for the orange chapter: a wave edge rises from below and later drains. */
.landing-flood {position:absolute;left:0;right:0;top:0;height:calc(100% + 90px);z-index:0;background:#ff4b25;--flood:0;--flood-x:0px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20Q25 4 50 20T100 20T150 20T200 20V40H0Z'/%3E%3C/svg%3E") var(--flood-x) 0/520px 90px repeat-x,linear-gradient(#000,#000) 0 89px/100% calc(100% - 89px) no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20Q25 4 50 20T100 20T150 20T200 20V40H0Z'/%3E%3C/svg%3E") var(--flood-x) 0/520px 90px repeat-x,linear-gradient(#000,#000) 0 89px/100% calc(100% - 89px) no-repeat;
  transform:translateY(calc((1 - var(--flood)) * 100% - var(--flood) * 90px));visibility:visible}
.landing-world {z-index:1}
@media (max-width:700px){.landing-flood{-webkit-mask-size:300px 90px,100% calc(100% - 89px);mask-size:300px 90px,100% calc(100% - 89px)}}