/* Scroll scenes extend the original visual system. Sticky elements must not sit in a scroll container. */
main { overflow: clip; position: relative; z-index: 1; }
.site-footer { position: relative; z-index: 1; }
.ambient-background { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#memory-sky { width: 100%; height: 100%; opacity: .45; }
.aurora { position: absolute; width: 85vw; height: 80vh; border-radius: 50%; filter: blur(90px); will-change: transform; }
.aurora-a { left: 26%; top: -20%; background: radial-gradient(ellipse, #7c509724, #514b8110 48%, transparent 70%); animation: aurora-drift 31s ease-in-out infinite alternate; }
.aurora-b { left: -35%; bottom: -40%; background: radial-gradient(ellipse, #6d448f20, #39264808 50%, transparent 70%); animation: aurora-drift 37s ease-in-out -11s infinite alternate-reverse; }
.ambient-orbit { position: absolute; top: 25%; left: 45%; width: 90vw; height: 66vw; border: 1px solid #c2a6fa06; border-radius: 50%; transform: translateY(var(--sky-shift, 0px)) rotate(-28deg); transition: transform .5s ease-out; }
@keyframes aurora-drift { from { transform: translate3d(-4%, -2%, 0) rotate(-12deg) scale(.94); } to { transform: translate3d(8%, 12%, 0) rotate(16deg) scale(1.13); } }
.motion-toggle { position: fixed; bottom: 21px; right: 21px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #c2a6fa1e; border-radius: 50%; background: #191220a6; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #a898bc; font-size: 10px; z-index: 99; }
.motion-toggle:hover { color: var(--accent); border-color: #c2a6fa55; }
.motion-paused .aurora, .motion-paused .spark, .motion-paused .floating-note, .motion-paused .logo-memory { animation-play-state: paused; }

.hero { min-height: 900px; }
.logo-prologue { display: flex; align-items: center; gap: 16px; margin-bottom: 23px; }
.logo-replay { position: relative; width: 77px; height: 77px; padding: 0; flex: none; isolation: isolate; }
.memory-box-mark { width: 100%; height: 100%; filter: drop-shadow(0 0 8px #b69be83a); }
.logo-caption { text-align: left; }
.logo-caption>span { font-family: monospace; letter-spacing: .11em; font-size: 7px; color: #b6a1cb; }
.logo-caption p { margin-top: 6px; color: #81728f; font-size: 10px; letter-spacing: .04em; }
.logo-memory { position: absolute; z-index: -1; width: 18px; height: 25px; padding: 2px; border: 1px solid #ccbae330; border-radius: 2px; background: #2a2038; top: 24px; left: 29px; opacity: 0; }
.logo-memory img { width: 100%; height: 100%; object-fit: cover; }
.memory-box-story { border-top: 1px solid var(--line); margin-top: 38px; padding-top: 26px; display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 27px; align-items: start; }
.box-monogram { font-size: 18px; letter-spacing: .23em; color: #b399d1; font-family: monospace; padding-top: 2px; white-space: nowrap; }
.memory-box-story p { font-size: 11px; color: #94869f; line-height: 2; }
.memory-box-story a { display: inline-block; font-size: 8px; color: #b89bd1; margin-top: 12px; border-bottom: 1px solid #b89bd129; }
.logo-replay.playing .photo-a { animation: memory-gather-a 2.4s var(--ease) both; }
.logo-replay.playing .photo-b { animation: memory-gather-b 2.4s .14s var(--ease) both; }
@keyframes memory-gather-a { 0% { opacity: 0; transform: translate(-47px, -19px) rotate(-17deg); } 20% { opacity: .7; } 60% { opacity: .65; transform: translate(-7px, 1px) rotate(-4deg); } 100% { opacity: 0; transform: translate(2px, 12px) scale(.4); } }
@keyframes memory-gather-b { 0% { opacity: 0; transform: translate(45px, -24px) rotate(17deg); } 20% { opacity: .6; } 60% { opacity: .6; transform: translate(8px, -1px) rotate(3deg); } 100% { opacity: 0; transform: translate(1px, 13px) scale(.4); } }

/* A continuous native-scroll demonstration. The phone remains in view as the text chapters pass. */
.experience { padding-bottom: 110px; }
.experience-story { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 100px; position: relative; align-items: start; }
.experience-stage { position: sticky; top: 110px; height: 650px; display: flex; flex-direction: column; align-items: center; justify-content: start; isolation: isolate; }
.experience-orbit { position: absolute; width: 470px; height: 470px; top: 28px; left: 50%; transform: translateX(-50%) rotate(-32deg); border: 1px solid #c2a6fa12; border-radius: 50%; z-index: -1; box-shadow: 0 0 100px #7650940a; }
.experience-phone-wrap { width: 267px; height: 557px; position: relative; }
.demo-phone { transform: rotate(-3deg); transition: transform .5s var(--ease); }
.demo-phone[data-phase="1"] { transform: rotate(0deg); }
.demo-phone[data-phase="2"] { transform: rotate(3deg); }
.demo-phone .app-top { padding-bottom: 14px; }
.scroll-demo-gallery { position: absolute; top: 119px; left: 3px; right: 3px; bottom: 56px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); }
.scroll-demo-photo { position: absolute; width: 244px; height: 346px; top: 0; left: 0; transform-origin: left top; border-radius: 3px; overflow: hidden; will-change: transform, opacity; }
.scroll-demo-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.scroll-demo-photo>span { position: absolute; left: 10px; bottom: 10px; font-family: monospace; font-size: 8px; color: #fff7; }
.demo-focus-date { position: absolute; bottom: 68px; left: 0; right: 0; text-align: center; font-family: monospace; font-size: 8px; color: #bfaad3; opacity: 0; transition: opacity .4s; }
.demo-phone[data-phase="1"] .demo-focus-date, .demo-phone[data-phase="2"] .demo-focus-date { opacity: 1; }
.demo-app-navigation { position: absolute; bottom: 26px; left: 20px; right: 20px; display: flex; justify-content: space-around; background: #251c31ba; border: 1px solid #e2d0fa25; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 26px; padding: 12px 8px; font-size: 9px; color: #94849f; }
.demo-app-navigation .selected { color: #d4b9fc; }
.demo-decision { position: absolute; top: 245px; left: 50%; transform: translateX(-50%); background: #2c2139bb; border: 1px solid #d7b8fa22; box-shadow: 0 15px 35px #0005; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 17px; padding: 20px 25px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10px; color: #cbb4e6; opacity: 0; pointer-events: none; }
.decision-star { font-size: 33px; color: #c2a6fa; }
.recover-mark { display: none; white-space: nowrap; }
.demo-decision.recovering>span:nth-child(2) { display: none; }
.demo-decision.recovering .recover-mark { display: block; }
.demo-gesture { position: absolute; bottom: 131px; left: 50%; height: 42px; width: 1px; background: linear-gradient(transparent,#ead5ff66); opacity: 0; transform: translateX(-50%); }
.demo-phone[data-phase="1"] .demo-gesture { opacity: .5; }
.demo-gesture span { width: 8px; height: 8px; border: 1px solid #ead5ff; border-radius: 50%; position: absolute; bottom: -4px; left: -3.5px; }
.demo-phase-indicator { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; font-size: 10px; color: #766581; }
.demo-phase-indicator>span { transition: color .4s; }
.demo-phase-indicator>span.active { color: #c2a6fa; }
.demo-phase-indicator i { width: 21px; height: 1px; background: #c2a6fa24; }
.demo-note { font-size: 8px; color: #6e5c7b; margin-top: 12px; letter-spacing: .02em; text-align: center; }
.feature-chapter { min-height: 65vh; display: flex; flex-direction: column; justify-content: center; padding: 90px 0; max-width: 355px; opacity: .55; transition: opacity .45s; }
.feature-chapter.current { opacity: 1; }
.chapter-index { font-family: monospace; color: #8d739f; font-size: 10px; letter-spacing: .12em; margin-bottom: 23px; }
.feature-chapter h3 { font-size: 29px; line-height: 1.4; letter-spacing: -.025em; }
.feature-chapter p { color: var(--muted); font-size: 13px; line-height: 2; margin-top: 18px; }
.feature-chapter .feature-tag { margin-top: 25px; font-size: 8px; }

/* The card collection is a small three-dimensional archive, not a row of unlock conditions. */
.fragments { overflow: clip; padding-bottom: 55px; }
.fragment-heading { margin-top: 75px; }
.fragment-heading>p:last-child { font-size: 13px; line-height: 2.1; }
.fragment-journey { height: 235vh; min-height: 1750px; position: relative; }
.fragment-sticky { position: sticky; top: 92px; height: 640px; padding-top: 20px; }
.fragment-viewport { height: 405px; width: 100%; position: relative; perspective: 1100px; overflow: visible; touch-action: pan-y; cursor: grab; outline-offset: -5px; }
.fragment-viewport.dragging { cursor: grabbing; }
.fragment-tile { position: absolute; width: 230px; height: 322px; left: 50%; top: 24px; transform-origin: center center; transform-style: preserve-3d; will-change: transform; transition: transform .42s var(--ease), opacity .42s, filter .4s; user-select: none; }
.fragment-viewport.dragging .fragment-tile { transition: none; }
.fragment-tile img { width: 100%; height: auto; pointer-events: none; }
.fragment-tile figcaption { display: none; }
.fragment-story { position: relative; width: min(440px,calc(100% - 50px)); margin: 0 auto; text-align: center; min-height: 112px; }
.fragment-story-index { font-family: monospace; font-size: 8px; letter-spacing: .2em; color: #9c80b4; }
.fragment-story h3 { font-size: 22px; margin-top: 9px; letter-spacing: .035em; }
.fragment-story p { font-family: "Songti SC","Yu Mincho",Georgia,serif; font-size: 14px; line-height: 1.85; color: #b3a4c5; margin-top: 12px; min-height: 52px; text-wrap: balance; }
.hero-buttons .button>span { white-space: nowrap; }
.fragment-navigation { display: flex; justify-content: center; align-items: center; gap: 23px; margin-top: 17px; }
.fragment-navigation button { font-size: 17px; border: 1px solid #c2a6fa20; background: #c2a6fa04; width: 38px; height: 38px; border-radius: 50%; color: #d0b3ed; transition: opacity .3s,background .3s; }
.fragment-navigation button:hover { background: #c2a6fa12; }
.fragment-navigation button:disabled { opacity: .25; cursor: default; }
.fragment-nav-dots { display: flex; gap: 9px; }
.fragment-nav-dots i { height: 3px; width: 3px; border-radius: 50%; background: #6d567e; transition: background .3s,box-shadow .3s; }
.fragment-nav-dots i.active { background: #ccb2f5; box-shadow: 0 0 7px #ccb2f599; }
.fragment-hint { font-size: 9px; letter-spacing: .07em; color: #7c638e; text-align: center; margin-top: 15px; }
.collection-outro { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid #c2a6fa0d; padding-top: 23px; }
.collection-outro>span { font-family: monospace; font-size: 8px; letter-spacing: .12em; color: #796489; }
.collection-outro p { font-size: 10px; color: #a48bb9; }

/* UI structure, colors, icon paths and baseline overlap from the SwiftUI app. */
.atlas { padding-top: 85px; }
.atlas-layout { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 85px; align-items: center; }
.atlas-component-note { color: #7e6a8b!important; font-size: 8px!important; margin-top: 27px; line-height: 1.8!important; }
.app-profile-preview { min-width: 0; width: 100%; max-width: 560px; margin-left: auto; padding: 30px 28px; border: 1px solid #c2a6fa12; border-radius: 30px; background: radial-gradient(ellipse at 90% 10%,#52436b20,transparent 50%),linear-gradient(145deg,#191128da,#100c1be6); box-shadow: 0 28px 70px #0002; }
.production-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 0 0 24px; }
.production-stat { position: relative; text-align: center; padding-top: 7px; }
.stat-art { width: 92px; height: 77px; margin: auto; }
.stat-art svg { width: 100%; height: 100%; }
.stat-readout { display: flex; justify-content: center; align-items: baseline; gap: 3px; height: 43px; margin-top: -36px; position: relative; font-size: 35px; font-weight: 600; letter-spacing: -1.2px; line-height: 1.2; font-variant-numeric: tabular-nums; background: linear-gradient(135deg,white,#c2a6fa); background-clip: text; -webkit-background-clip: text; color: transparent; }
.stat-readout small { font-size: 10px; letter-spacing: 0; }
.stat-name { display: block; font-size: 12px; font-weight: 600; color: #d8c9ec; margin-top: 3px; min-height: 27px; line-height: 1.5; }
.production-stat>i { display: block; position: relative; width: 35px; height: .5px; background: linear-gradient(90deg,#c2a6fa33 40%,transparent 40%,transparent 60%,#c2a6fa33 60%); margin: 13px auto 0; }
.production-stat>i::after { content: ''; position: absolute; left: 16px; top: -1px; height: 2px; width: 2px; border-radius: 50%; background: #c2a6fa99; }
.cleaning-days { display: flex; justify-content: space-between; color: #998aaa; font-size: 11px; border-top: 1px solid #c2a6fa22; padding: 16px 0 23px; }
.cleaning-days>span:first-child>span:first-child { font-size: 14px; margin-right: 6px; }
.production-atlas { padding: 20px; background: #291f3b8a; border: 1px solid #c2a6fa1f; border-radius: 26px; }
.production-atlas-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 13px; }
.production-atlas-heading h3 { font-size: 23px; font-family: "Songti SC","Yu Mincho",Georgia,serif; letter-spacing: 0; font-weight: 500; }
.production-atlas-heading>div { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.production-atlas-heading strong { font-size: 21px; letter-spacing: -.035em; font-weight: 500; font-variant-numeric: tabular-nums; }
.production-atlas-heading>div>span { font-size: 8px; color: #a396b2; }
.production-atlas-subtitle { font-size: 9px; color: #a496b3; margin-top: 10px; }
.atlas-summary { border-radius: 15px; background: #c2a6fa0e; padding: 13px; margin-top: 17px; color: #a899bb; font-size: 9px; }
.media-counts { display: flex; gap: 17px; }
.resource-readout { display: flex; justify-content: space-between; align-items: baseline; margin: 13px 0; font-size: 9px; }
.resource-readout strong { font-size: 15px; color: #c2a6fa; font-weight: 550; font-variant-numeric: tabular-nums; }
.life-in-memories { display: flex; align-items: center; gap: 9px; color: #c2a6fa; font-size: 9px; }
.life-in-memories>span:last-child { margin-left: auto; }
.atlas-range { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding: 9px 13px; background: #c2a6fa0e; border-radius: 15px; color: #a392b5; }
.atlas-range>div { text-align: center; }
.atlas-range>div>span { display: block; font-size: 10px; color: #c2a6fa; }
.atlas-range small { display: block; font-size: 8px; margin-top: 2px; font-family: monospace; }
.atlas-period { display: flex; gap: 3px; margin-top: 15px; padding: 3px; background: #c2a6fa12; border-radius: 50px; border: 1px solid #c2a6fa19; }
.atlas-period button { flex: 1; font-size: 10px; padding: 8px 5px; border-radius: 50px; color: #a699b7; }
.atlas-period button.active { color: #e5d3fa; background: #c2a6fa32; }
.production-chart-controls { display: flex; gap: 6px; margin: 13px 0 16px; }
.production-chart-controls button { flex: 1; display: flex; gap: 5px; align-items: center; justify-content: center; font-size: 9px; border-radius: 50px; padding: 9px 4px; color: #a899b8; }
.production-chart-controls button.active { color: #e1d0f5; background: #c2a6fa29; }
.production-chart-controls button>span:first-child { font-size: 13px; line-height: 1; }
.atlas-extrema { display: flex; gap: 26px; margin: 18px 0 7px; }
.atlas-extrema span { display: block; color: #9b8aab; font-size: 8px; }
.atlas-extrema strong { display: block; font-size: 10px; color: #c2a6fa; font-weight: 450; margin-top: 3px; font-variant-numeric: tabular-nums; }
.production-chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; overflow: visible; }
.production-chart .chart-guide { stroke: #d8c2f312; stroke-width: .8; }
.production-chart .axis-label { fill: #92809f; stroke: none; font-size: 13px; font-family: -apple-system,BlinkMacSystemFont,sans-serif; }
.production-chart .point-label { fill: #dac3f8; stroke: none; font-size: 14px; }
.production-chart .trend-line { stroke: #c2a6fa; stroke-width: 1.5; }
.production-chart .bar { fill: #c2a6fa; stroke: none; opacity: .8; }
.production-chart .pie-total { font-size: 24px; font-weight: 500; fill: #c2a6fa; stroke: none; letter-spacing: -.8px; }
.pie-segment { transition: opacity .3s; }
.pie-segment:hover { opacity: .65; }
.chart-legend { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 13px; row-gap: 7px; }
.chart-legend>span { display: flex; align-items: center; gap: 5px; color: #ac98bc; font-size: 7px; white-space: nowrap; }
.chart-legend i { width: 3px; height: 3px; border-radius: 50%; flex: none; }
.chart-legend b { font-weight: 400; color: #c2a6fa; margin-left: auto; }
.atlas-chart-hint { margin-top: 10px; color: #9e87b1; font-size: 8px; min-height: 15px; }
.production-atlas .panel-disclaimer { font-size: 7px; line-height: 1.8; text-align: left; color: #776385; margin-top: 12px; }

@media(max-width:1150px) {
  .experience-story { gap: 60px; }
  .experience-stage { top: 92px; }
  .feature-chapter { min-height: 67vh; }
  .feature-chapter h3 { font-size: 26px; }
  .atlas-layout { gap: 50px; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); }
  .app-profile-preview { padding: 25px 20px; }
  .production-atlas { padding: 17px; }
}
@media(max-width:850px) {
  .logo-prologue { justify-content: center; margin-bottom: 19px; }
  .logo-replay { width: 67px; height: 67px; }
  .logo-caption>span { font-size: 6px; }
  .hero { min-height: 1160px; }
  .experience-story { gap: 35px; }
  .experience-phone-wrap { height: 470px; width: 230px; }
  .demo-phone { transform-origin: top left; transform: scale(.84) rotate(-3deg); }
  .demo-phone[data-phase="1"] { transform: scale(.84); }
  .demo-phone[data-phase="2"] { transform: scale(.84) rotate(3deg); }
  .experience-stage { height: 550px; top: 110px; }
  .experience-orbit { width: 330px; height: 390px; }
  .feature-chapter { min-height: 65vh; padding: 80px 0; }
  .feature-chapter h3 { font-size: 22px; }
  .feature-chapter p { font-size: 12px; }
  .demo-phase-indicator { margin-top: 23px; font-size: 9px; }
  .fragment-sticky { top: 90px; }
  .fragment-tile { width: 210px; height: 294px; }
  .fragment-viewport { height: 360px; }
  .fragment-sticky { height: 600px; }
  .atlas-layout { gap: 28px; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); }
  .app-profile-preview { padding: 20px 14px; }
  .stat-art { width: 75px; height: 63px; }
  .stat-readout { font-size: 27px; margin-top: -28px; height: 33px; }
  .stat-name { font-size: 9px; }
  .production-atlas { padding: 15px; }
  .production-atlas-heading h3 { font-size: 20px; }
  .production-atlas-heading strong { font-size: 17px; }
  .production-atlas-heading>div>span { font-size: 7px; }
  .production-atlas-subtitle { font-size: 8px; }
  .life-in-memories { font-size: 8px; gap: 6px; flex-wrap: wrap; }
  .life-in-memories>span:last-child { margin-left: 0; }
  .chart-legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  html[lang="en"] .hero { min-height: 1070px; }
  .memory-box-story { grid-template-columns: 1fr; gap: 12px; margin-top: 29px; padding-top: 22px; }
  .box-monogram { font-size: 16px; }
  .memory-box-story p { font-size: 11px; }
  .hero { min-height: 1070px; }
  .logo-prologue { gap: 13px; margin-bottom: 18px; }
  .logo-replay { width: 57px; height: 57px; }
  .logo-caption p { font-size: 8px; margin-top: 4px; }
  .logo-caption>span { font-size: 6px; }
  .logo-memory { width: 13px; height: 18px; top: 18px; left: 23px; }
  .hero-copy .eyebrow { font-size: 8px; }
  .motion-toggle { bottom: 16px; right: 13px; width: 29px; height: 29px; font-size: 9px; }
  .aurora { filter: blur(60px); }
  .experience { padding-bottom: 65px; }
  .experience .section-heading { padding-bottom: 15px; }
  .experience-story { display: block; }
  .experience-stage { top: 83px; height: 430px; width: 100%; padding-top: 12px; z-index: 2; }
  .experience-phone-wrap { height: 351px; width: 168px; }
  .demo-phone { transform: scale(.63) rotate(-3deg); }
  .demo-phone[data-phase="1"] { transform: scale(.63); }
  .demo-phone[data-phase="2"] { transform: scale(.63) rotate(3deg); }
  .experience-orbit { height: 355px; width: 310px; top: 0; }
  .demo-phase-indicator { font-size: 8px; margin-top: 19px; gap: 9px; }
  .demo-note { font-size: 7px; margin-top: 10px; }
  .feature-sequence { margin-top: -430px; }
  .feature-chapter { min-height: 780px; max-width: none; justify-content: end; padding: 470px 8px 110px; }
  .feature-chapter h3 { font-size: 25px; }
  .feature-chapter p { font-size: 12px; line-height: 1.95; margin-top: 13px; }
  .chapter-index { margin-bottom: 13px; font-size: 9px; }
  .feature-chapter .feature-tag { font-size: 7px; margin-top: 17px; }
  .fragment-heading { margin-top: 48px; }
  .fragment-heading>p:last-child { font-size: 12px; }
  .fragment-journey { min-height: 1650px; height: 230vh; }
  .fragment-sticky { top: 84px; height: 565px; padding-top: 8px; }
  .fragment-viewport { height: 325px; perspective: 800px; }
  .fragment-tile { top: 25px; width: 190px; height: 266px; }
  .fragment-story { width: calc(100% - 60px); min-height: 135px; }
  .fragment-story h3 { font-size: 21px; margin-top: 10px; }
  .fragment-story p { font-size: 13px; min-height: 62px; line-height: 1.9; }
  .fragment-story-index { font-size: 7px; }
  .fragment-navigation { gap: 20px; margin-top: 9px; }
  .fragment-navigation button { width: 35px; height: 35px; font-size: 15px; }
  .fragment-hint { font-size: 8px; letter-spacing: .01em; margin-top: 14px; }
  .collection-outro { flex-direction: column; align-items: start; gap: 12px; padding-top: 20px; }
  .collection-outro>span { font-size: 7px; }
  .collection-outro p { font-size: 10px; line-height: 1.9; }
  .atlas { padding-top: 55px; }
  .atlas-layout { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .atlas-component-note { font-size: 8px!important; margin-top: 16px; }
  .app-profile-preview { padding: 23px 15px; border-radius: 26px; }
  .stat-art { width: 78px; height: 65px; }
  .stat-readout { font-size: 29px; height: 35px; margin-top: -30px; }
  .stat-readout small { font-size: 8px; }
  .stat-name { font-size: 10px; min-height: 25px; }
  .production-stat>i { margin-top: 11px; }
  .cleaning-days { font-size: 10px; padding: 13px 0 20px; }
  .production-atlas { border-radius: 22px; padding: 15px; }
  .production-atlas-heading h3 { font-size: 21px; }
  .production-atlas-heading strong { font-size: 18px; }
  .production-atlas-heading>div>span { font-size: 7px; }
  .production-atlas-subtitle { font-size: 8px; }
  .atlas-summary { padding: 11px; font-size: 8px; }
  .resource-readout { font-size: 8px; }
  .resource-readout strong { font-size: 14px; }
  .life-in-memories { font-size: 8px; }
  .chart-legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[lang="en"] .production-atlas-heading h3 { font-size: 20px; }
  html[lang="en"] .production-atlas-heading { gap: 6px; }
}
@media(max-width:365px) {
  html[lang="en"] .hero { min-height: 1010px; }
  .hero { min-height: 1010px; }
  .fragment-tile { width: 173px; height: 243px; }
  .fragment-viewport { height: 299px; }
  .fragment-story { width: calc(100% - 44px); }
  .production-atlas { padding: 12px; }
  .app-profile-preview { padding: 22px 11px; }
  .stat-art { width: 68px; height: 57px; }
  .stat-readout { font-size: 25px; margin-top: -27px; }
  .stat-name { font-size: 9px; }
  html[lang="en"] .production-atlas-heading h3 { font-size: 18px; }
  .production-atlas-heading strong { font-size: 16px; }
  .production-atlas-heading>div>span { font-size: 6px; }
}
@media(prefers-reduced-motion:reduce) {
  .aurora, .logo-memory { animation: none!important; }
  .experience-stage { position: relative; top: auto; }
  .feature-chapter { min-height: auto; padding: 35px 0; opacity: 1; }
  .fragment-journey { height: auto; min-height: 0; margin: 45px 0; }
  .fragment-sticky { height: auto; position: relative; top: auto; padding: 0; }
  .fragment-viewport { width: min(1100px,calc(100% - 60px)); margin: auto; height: auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 35px; perspective: none; cursor: auto; }
  .fragment-tile { position: relative; width: auto; height: auto; left: auto; top: auto; opacity: 1!important; transform: none!important; filter: none!important; will-change: auto; }
  .fragment-tile figcaption { display: block; text-align: center; margin-top: 15px; }
  .tile-title { font-size: 13px; color: #e1d0f4; }
  .tile-story { font-size: 11px; color: #a995b9; line-height: 1.8; margin-top: 7px; }
  .fragment-story, .fragment-navigation, .fragment-hint { display: none; }
}
@media(prefers-reduced-motion:reduce) and (max-width:600px) {
  .feature-sequence { margin-top: 0; }
  .feature-chapter { min-height: auto; padding: 30px 0; }
  .fragment-viewport { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 23px; width: calc(100% - 50px); }
  .tile-title { font-size: 12px; }
  .tile-story { font-size: 10px; }
}
@media(prefers-reduced-transparency:reduce) {
  .demo-decision, .demo-app-navigation, .motion-toggle { background: #281c37; backdrop-filter: none; -webkit-backdrop-filter: none; }
}