body { margin: 0; background: #0d1413; }
a { color: inherit; }
.site { font-family: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #14201e; background: #fbfbfa; overflow: hidden; overflow: clip; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; box-sizing: border-box; }
.display { font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.03em; }
.kind { margin: 0; font-size: 12px; line-height: 16px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
.pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.btn:focus-visible, .nav a:focus-visible, .work:focus-visible { outline: 2px solid #5cc0a9; outline-offset: 3px; }

/* Header and hero */
.hero { --mw: clamp(230px, 24vw, 340px); --spread: 1; position: relative; overflow: hidden; background: linear-gradient(180deg, #050908 0%, #0c1a17 35%, #1b3a33 72%, #24493f 100%); color: #e8efec; min-height: 820px; display: flex; flex-direction: column; }
.top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: #e8efec; }
.brand svg { width: 30px; height: 30px; fill: currentColor; }
.nav { display: flex; gap: 28px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: #9bada8; font-size: 15px; }
.nav a:hover { color: #e8efec; }
.hero-body { position: relative; z-index: 3; padding-top: 88px; }
.hero h1 { margin: 0; font-size: clamp(44px, 6.2vw, 92px); line-height: 0.95; font-weight: 750; max-width: 12ch; text-wrap: balance; }
.hero p { margin: 24px 0 36px; font-size: 21px; line-height: 32px; color: #a9bab5; max-width: 26ch; }
.actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 650; font-size: 16px; text-decoration: none; transition: transform .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-main { background: #5cc0a9; color: #0d1413; }
.btn-ghost { color: #e8efec; box-shadow: inset 0 0 0 1.5px rgba(232, 239, 236, 0.35); }

/* Night scene: sky, stars and moon; far, mid and near hills; the mill on the mid hill; games rising from it like lanterns */
.sky { position: absolute; inset: 0; z-index: 0; }
.stars { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; }
.stars.s1 { color: rgba(232, 239, 236, 0.85); box-shadow: 40px 60px, 130px 210px, 210px 110px, 300px 340px, 380px 40px, 450px 260px, 520px 150px, 610px 400px, 690px 80px, 760px 300px, 830px 180px, 900px 30px, 980px 240px, 1050px 120px, 1110px 360px, 1180px 70px, 1250px 200px, 1320px 40px, 1390px 300px, 1430px 150px, 60px 420px, 250px 470px, 560px 500px, 870px 440px, 1210px 480px, 1360px 430px; animation: twinkle 4s ease-in-out infinite; }
.stars.s2 { width: 1px; height: 1px; color: rgba(232, 239, 236, 0.6); box-shadow: 90px 140px, 170px 30px, 270px 260px, 340px 120px, 420px 380px, 490px 60px, 580px 230px, 650px 20px, 720px 190px, 800px 90px, 870px 330px, 940px 160px, 1010px 50px, 1080px 280px, 1150px 170px, 1230px 320px, 1290px 110px, 1350px 240px, 1410px 70px, 30px 300px, 200px 380px, 470px 450px, 760px 470px, 1020px 410px, 1300px 500px; animation: twinkle 6s ease-in-out infinite reverse; }
.moon { position: absolute; right: 11%; top: 136px; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset -15px 0 0 0 #e8efec; filter: drop-shadow(0 0 22px rgba(232, 239, 236, 0.35)); }
.hills { position: absolute; left: -40px; bottom: 0; width: calc(100% + 80px); display: block; }
.far { z-index: 1; height: 260px; fill: #142a24; }
.midground { position: absolute; inset: 0; z-index: 1; }
.mid { height: 200px; fill: #0c1916; }
.mill { position: absolute; left: 72%; bottom: 138px; width: var(--mw); aspect-ratio: 440 / 560; margin-left: calc(var(--mw) / -2); overflow: visible; }
.mill .ink { fill: #070d0c; }
.mill .lat { fill: none; stroke: #070d0c; }
.mill .moonlit { fill: none; stroke: #2f5249; stroke-width: 3; stroke-linecap: round; }
.mill .win { fill: #ecd29f; filter: drop-shadow(0 0 7px rgba(236, 210, 159, 0.9)); animation: flicker 6s ease-in-out infinite; }
.mill .win.dim { opacity: 0.55; animation-delay: -2s; }
.sails { transform-origin: 220px 205px; animation: spin 26s linear infinite; }
.sparks { position: absolute; left: 72%; bottom: calc(138px + var(--mw) * 0.807); width: 0; height: 0; }
.spark { position: absolute; left: var(--sx); bottom: var(--sy); width: 5px; height: 5px; border-radius: 50%; background: #f3dcae; box-shadow: 0 0 10px 3px rgba(236, 210, 159, 0.7); opacity: 0.6; transform: translate(calc(var(--fx) * var(--spread) * 0.4), calc(var(--fy) * var(--spread) * 0.4)); animation: spark var(--t) ease-out infinite; animation-delay: var(--d); }
.near { z-index: 2; height: 120px; fill: #050908; }

/* Marquee */
.marquee { background: #5cc0a9; color: #0d1413; overflow: hidden; padding-block: 22px; }
.marquee-track { display: flex; width: max-content; gap: 48px; animation: slide 36s linear infinite; }
.marquee span { font-family: "Bricolage Grotesque", sans-serif; font-weight: 750; font-size: 44px; line-height: 48px; letter-spacing: -0.02em; white-space: nowrap; display: inline-flex; align-items: center; gap: 48px; }
.marquee span::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #0d1413; }

/* Scenes */
.scene { position: relative; overflow: hidden; overflow: clip; }
.scene-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; min-height: 760px; padding-block: 96px; box-sizing: border-box; }
.scene h2 { margin: 12px 0 0; font-size: clamp(44px, 5.4vw, 76px); line-height: 0.98; font-weight: 750; text-wrap: balance; }
.scene .lead { margin: 22px 0 14px; font-size: 23px; line-height: 33px; max-width: 26ch; }

.echo { background: #060a13; color: #e6edf8; }
.echo .kind { color: #ecd29f; }

.petal-scene { background: #e94b7c; color: #2b0a15; }
.petal-scene .scene-grid { grid-template-areas: "visual text"; }
.petal-scene .text { grid-area: text; }
.petals { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.petal { position: absolute; top: -40px; left: var(--x); width: calc(20px * var(--s)); height: calc(28px * var(--s)); border-radius: 0 75% 0 75%; background: #ffffff; opacity: 0.92; animation: fall var(--t) linear infinite; animation-delay: var(--d); }
.petal.soft { background: #ffd0dc; }

.sub-scene { background: #f4654b; color: #2a0d08; }
.sub-scene .scene-grid { pointer-events: none; }
.sub-scene .text { pointer-events: auto; }

/* Small games inside the blocks: tap rings in ECHO, petal bursts in Petalstorm */
.hint { margin: 18px 0 0; font-size: 12px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 650; opacity: 0.8; }
.taps { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.glow-follow { position: absolute; left: 0; top: 0; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; background: radial-gradient(circle, rgba(236, 210, 159, 0.17) 0%, rgba(236, 210, 159, 0.06) 42%, rgba(236, 210, 159, 0) 70%); transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform 0.9s cubic-bezier(.16, .84, .3, 1), opacity 0.7s ease; opacity: 0; }
.echo:hover .glow-follow { opacity: 1; }
.soft-ring { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1px solid rgba(186, 207, 236, 0.55); box-sizing: border-box; animation: soft-ring 2.8s cubic-bezier(.15, .6, .3, 1) forwards; }
.burst { position: absolute; width: 0; height: 0; }
.tp { position: absolute; left: -7px; top: -9px; width: 14px; height: 19px; border-radius: 0 75% 0 75%; background: #ffffff; opacity: 0; animation: trail 2s cubic-bezier(.3, .1, .6, 1) forwards; }
.tp:nth-child(2) { background: #ffd0dc; animation-duration: 2.3s; animation-delay: 0.08s; }
.tp:nth-child(3) { width: 10px; height: 14px; animation-delay: 0.16s; }
@keyframes soft-ring { from { width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 0.8; } to { width: 560px; height: 560px; margin: -280px 0 0 -280px; opacity: 0; } }
@keyframes trail { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.5); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--sway, 0px) + var(--dx)), 180px) rotate(300deg) scale(1); } }
/* The hints and the light answer a mouse; without one, or with reduced motion, there is nothing to point at. */
@media (hover: none) { .hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .hint, .glow-follow { display: none; } }

/* In the works */
.works { background: #fbfbfa; color: #14201e; padding-block: 112px; }
.works h2 { margin: 0; font-size: clamp(40px, 4.6vw, 64px); line-height: 1; font-weight: 750; }
.works .intro { margin: 16px 0 48px; font-size: 20px; line-height: 30px; color: #55635f; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.work { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #ffffff; border: 1px solid #e2e6e4; border-radius: 22px; text-decoration: none; color: #14201e; transition: transform .25s ease, border-color .25s ease; }
.work:hover { transform: translateY(-6px); border-color: #1f6f5c; }
.work:hover img { animation: wiggle .6s ease; }
.work img { width: 76px; height: 76px; border-radius: 22.5%; box-shadow: 0 0 0 1px #e2e6e4; }
.work h3 { margin: 6px 0 0; font-family: "Bricolage Grotesque", sans-serif; font-size: 26px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.work .k { margin: 0; color: #55635f; font-size: 15px; }
.work .s { margin: 0; font-size: 17px; line-height: 26px; flex: 1; }
.dev { background: transparent; color: #55635f; box-shadow: inset 0 0 0 1px #c9d1ce; align-self: flex-start; }

/* Press and about */
.info { background: #fbfbfa; border-top: 1px solid #e2e6e4; padding-block: 88px 104px; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.info h3 { margin: 0 0 14px; font-family: "Bricolage Grotesque", sans-serif; font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; }
.info p { margin: 0 0 18px; font-size: 18px; line-height: 29px; max-width: 42ch; }
.info a { color: #1f6f5c; font-weight: 600; }

.foot { background: #0d1413; color: #9bada8; padding-block: 40px; font-size: 15px; line-height: 22px; }
.foot-row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.foot .brand { font-size: 18px; }
.foot .brand svg { width: 24px; height: 24px; }

/* Motion */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(40px, 420px) rotate(220deg); } 100% { transform: translate(-20px, 860px) rotate(480deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 40% { opacity: 0.86; } 46% { opacity: 1; } 70% { opacity: 0.92; } }
@keyframes spark {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(var(--fx) * var(--spread)), calc(var(--fy) * var(--spread))) scale(1); opacity: 0; }
}
@keyframes sails-scroll { to { transform: rotate(2160deg); } }
@keyframes par-sky { to { transform: translateY(240px); } }
@keyframes par-far { to { transform: translateY(150px); } }
@keyframes par-mid { to { transform: translateY(70px); } }
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}
@supports (animation-timeline: scroll()) {
  .sky { animation: par-sky linear both; animation-timeline: scroll(root); animation-range: 0px 960px; }
  .far { animation: par-far linear both; animation-timeline: scroll(root); animation-range: 0px 960px; }
  .midground { animation: par-mid linear both; animation-timeline: scroll(root); animation-range: 0px 960px; }
  .sails-scroll { transform-origin: 220px 205px; animation: sails-scroll linear both; animation-timeline: scroll(root); }
}
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 560px) {
  .nav { width: 100%; gap: 20px; }
}
@media (max-width: 860px) {
  .hero { min-height: 900px; --mw: 200px; --spread: 0.45; }
  .hero-body { padding-top: 40px; }
  .mill { left: 66%; }
  .sparks { left: 66%; }
  .moon { top: 104px; width: 48px; height: 48px; box-shadow: inset -11px 0 0 0 #e8efec; }
  .scene-grid, .petal-scene .scene-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "visual"; gap: 40px; min-height: 0; padding-block: 72px; }
  .work-grid, .info-grid { grid-template-columns: minmax(0, 1fr); }
  .marquee span { font-size: 32px; line-height: 36px; }
}
/* On a phone the headline takes the whole width, so the moon hangs in the open sky under the buttons, above and right of
   the mill; the sky drifts down on scroll, which takes it behind the mill and away from the text */
@media (max-width: 560px) {
  .moon { top: 465px; right: 8%; }
}

/* Game blocks: the game's own vertical loop stands as a background in the right part of the block, at its own
   scale, its edges melting into the game's colour. Big name, one line of text, lots of air. */
.scene { min-height: 680px; }
.scene .taps, .scene .petals { z-index: 2; }
.scene-grid { z-index: 3; grid-template-columns: minmax(0, 660px); min-height: 680px; padding-block: 96px; }
.petal-scene .scene-grid { grid-template-areas: none; }
.petal-scene .text { grid-area: auto; }
.scene h2 { margin-top: 14px; font-size: clamp(56px, 7.2vw, 104px); line-height: 0.92; letter-spacing: -0.035em; }
.scene .lead { margin: 26px 0 36px; max-width: 28ch; }
.more { font-size: 15px; font-weight: 600; text-underline-offset: 5px; margin-left: 6px; }
.more:hover { text-decoration-thickness: 2px; }
.halo { position: absolute; z-index: 0; right: 4%; top: 50%; width: 680px; height: 680px; margin-top: -340px; border-radius: 50%; pointer-events: none; }
.bgv { position: absolute; z-index: 1; top: 0; right: 9%; width: 440px; height: 100%; object-fit: cover; object-position: center 50%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect; }
.echo { background: #010101; }
.echo .halo { background: radial-gradient(circle, rgba(236, 210, 159, 0.1) 0%, rgba(236, 210, 159, 0) 62%); }
.petal-scene { background: #080927; color: #f3eefc; }
.petal-scene .halo { background: radial-gradient(circle, rgba(233, 75, 124, 0.16) 0%, rgba(233, 75, 124, 0) 65%); }
.petal-scene .kind { color: #ff9ec0; }
.petal-scene .hint { color: #c9c6e6; }
/* Submap: real subscriptions from the app drift past in three lanes behind a crisp app screen */
.sub-scene { background: #f4654b; color: #2a0d08; }
.sub-scene .halo { background: radial-gradient(circle, rgba(255, 244, 232, 0.28) 0%, rgba(255, 244, 232, 0) 64%); }
.sub-scene .kind, .sub-scene .hint { color: #3b1208; }
.subs { position: absolute; z-index: 1; left: 42%; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 26px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%); }
.sub-lane { overflow: visible; }
.track { display: flex; gap: 18px; width: max-content; animation: chips 50s linear infinite; }
.sub-lane:hover .track { animation-play-state: paused; }
.sub-lane.lane-far .track { animation-duration: 74s; }
.sub-lane.lane-near .track { animation-duration: 38s; }
.app-card { position: absolute; z-index: 2; right: 11%; top: 50%; margin-top: -290px; width: 290px; height: 580px; border-radius: 30px; overflow: hidden; background: #f6f6f9; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 44px 80px -26px rgba(90, 22, 6, 0.55); pointer-events: none; }
.app-card video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
@keyframes chips { to { transform: translateX(-50%); } }
@keyframes card-in { 0% { opacity: 0; transform: translateY(90px) scale(0.95); } 38% { opacity: 1; transform: none; } 100% { opacity: 1; transform: translateY(-50px); } }
/* Scroll: the video opens from a slit, rises into place and drifts up as the block leaves; the text arrives line by line */
@keyframes vid-open {
  0% { opacity: 0; clip-path: inset(38% 18% 38% 18% round 40px); transform: translateY(80px) scale(0.94); }
  38% { opacity: 1; clip-path: inset(0 0 0 0 round 0px); transform: translateY(0) scale(1); }
  100% { opacity: 1; clip-path: inset(0 0 0 0 round 0px); transform: translateY(-70px) scale(1); }
}
@keyframes line-in { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .bgv, .halo { animation: vid-open linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .app-card { animation: card-in linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .scene .text.reveal { animation: none; }
  .scene .text > * { animation: line-in linear both; animation-timeline: view(); }
  .scene .text > :nth-child(1) { animation-range: entry 10% cover 22%; }
  .scene .text > :nth-child(2) { animation-range: entry 20% cover 28%; }
  .scene .text > :nth-child(3) { animation-range: entry 30% cover 34%; }
  .scene .text > :nth-child(4) { animation-range: entry 40% cover 38%; }
  .scene .text > :nth-child(5) { animation-range: entry 50% cover 42%; }
}
/* Lower part of the page: the same restraint as the game blocks, big type, cards tinted in each project's colour */
.works { padding-block: 128px 136px; }
.works h2 { font-size: clamp(56px, 7.2vw, 104px); line-height: 0.92; letter-spacing: -0.035em; }
.works .intro { margin: 22px 0 56px; }
.work-grid { gap: 28px; }
.work { border: 0; border-radius: 28px; padding: 32px; gap: 16px; }
.work.t-magnecat { background: #efe8fb; }
.work.t-pizza { background: #fbece4; }
.work.t-doorbell { background: #e6f1ed; }
.work:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -28px rgba(20, 32, 30, 0.35); }
.work img { width: 92px; height: 92px; box-shadow: 0 12px 24px -12px rgba(20, 32, 30, 0.45); }
.work h3 { font-size: 30px; line-height: 32px; }
.dev { box-shadow: inset 0 0 0 1px rgba(20, 32, 30, 0.25); }
.info { background: #0d1413; color: #e8efec; border-top: 0; padding-block: 120px 128px; }
.info h3 { font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 20px; }
.info p { color: #a9bab5; font-size: 19px; line-height: 30px; }
.info a { color: #5cc0a9; }
.foot { border-top: 1px solid rgba(232, 239, 236, 0.08); }
@supports (animation-timeline: view()) {
  .work-grid .work:nth-child(2) { animation-range: entry 15% cover 36%; }
  .work-grid .work:nth-child(3) { animation-range: entry 25% cover 42%; }
  /* The last screen cannot scroll far: these finish as soon as they are fully in view. */
  #press, #about { animation-range: entry 0% entry 100%; }
}
/* Subscriptions drift past as small cards, the way the app shows them: a coloured letter, the name, when it renews, the price */
.subs { gap: 30px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.subs .track { gap: 20px; animation: chips 64s linear infinite; }
.subs .sub-lane:hover .track { animation-play-state: paused; }
.subs .lane-far { opacity: 0.55; filter: blur(0.6px); transform: scale(0.84); transform-origin: left center; }
.subs .lane-far .track { animation-duration: 96s; }
.subs .lane-near .track { animation-duration: 48s; }
.sub-card { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px 0 10px; border-radius: 18px; background: #ffffff; color: #1d1b1a; white-space: nowrap; box-shadow: 0 14px 30px -18px rgba(42, 13, 8, 0.55); transition: transform .2s ease, box-shadow .2s ease; }
.sub-card .logo { flex: none; display: block; width: 38px; height: 38px; border-radius: 11px; }
.sub-card .nm { display: flex; flex-direction: column; font-size: 15px; line-height: 1.15; font-weight: 600; }
.sub-card .nm small { margin-top: 3px; font-size: 12px; font-weight: 500; color: #8a837f; }
.sub-card b { margin-left: 16px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sub-card:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -18px rgba(42, 13, 8, 0.6); }
@media (max-width: 860px) {
  .scene { min-height: 0; }
  .scene-grid, .petal-scene .scene-grid, .sub-scene .scene-grid { min-height: 0; padding-block: 64px 600px; grid-template-columns: minmax(0, 1fr); }
  .bgv { top: auto; bottom: 0; right: 50%; margin-right: -170px; width: 340px; height: 600px; }
  .halo { right: 50%; margin-right: -320px; top: auto; bottom: -40px; margin-top: 0; }
  .scene h2 { font-size: clamp(44px, 12vw, 64px); }
  .echo .scene-grid { padding-bottom: 440px; }
  .echo .bgv { height: 440px; }
  .petal-scene .petal:nth-child(even) { display: none; }
  .subs { left: 0; top: auto; height: 600px; gap: 20px; -webkit-mask-image: none; mask-image: none; }
  .app-card { right: 50%; margin-right: -130px; top: auto; bottom: 44px; margin-top: 0; width: 260px; height: 510px; }
}