:root {
  --black: #000000;
  --black-2: #111111;
  --paper: #ffffff;
  --white: #ffffff;
  --grey: rgba(255,255,255,.48);
  --deep-grey: rgba(255,255,255,.2);
  --purple: #9577ff;
  --lavender: #b69ffe;
  --violet: #7858ff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --mx: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  color: var(--white);
  background: var(--black);
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
}
button, a { font: inherit; color: inherit; }
button { cursor: none; }
img { display: block; max-width: 100%; }
.skip { position: fixed; z-index: 1000; left: 1rem; top: -4rem; background: var(--white); color: var(--black); padding: .8rem 1rem; }
.skip:focus { top: 1rem; }
.grain { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .026; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.nav { position: fixed; z-index: 150; top: 0; left: 0; width: 100%; height: 82px; padding: 30px var(--mx); display: flex; align-items: flex-start; justify-content: space-between; mix-blend-mode: difference; }
.brand img { width: 63px; height: auto; }
.nav nav { display: flex; gap: 30px; }
.nav nav a { text-decoration: none; font-size: 11px; letter-spacing: .11em; opacity: .34; transition: opacity .5s var(--ease); }
.nav nav a span { margin-right: 7px; }
.nav nav a.active, .nav nav a:hover, .nav nav a:focus-visible { opacity: 1; }

.progress { position: fixed; z-index: 150; top: 24vh; bottom: 24vh; right: 16px; width: 1px; background: rgba(255,255,255,.14); mix-blend-mode: difference; }
.progress i { display: block; width: 1px; height: var(--progress, 0%); background: var(--white); transition: height .12s linear; }
.progress b { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--white); left: -2px; opacity: .38; }
.progress b:nth-of-type(1) { top: 24%; }.progress b:nth-of-type(2) { top: 49%; }.progress b:nth-of-type(3) { top: 72%; }

.scene { position: relative; }
.opening { height: 205vh; background: var(--black); }
.opening-sticky { position: sticky; top: 0; height: 100vh; padding: 0 var(--mx); overflow: hidden; }
.chapter { position: absolute; top: 70px; right: var(--mx); margin: 0; font-size: 11px; letter-spacing: .12em; color: var(--grey); }
.opening-letter { position: absolute; left: calc(var(--mx) + 8.2vw); top: 38vh; max-width: 690px; font-size: clamp(20px, 1.75vw, 28px); line-height: 1.68; letter-spacing: -.025em; transition: opacity 1s var(--ease), filter 1s var(--ease), transform 1s var(--ease); }
.opening-letter > p { white-space: pre-line; margin: 0; display: inline; }
.caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 4px; background: var(--white); vertical-align: -.14em; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.stuck-copy { margin-top: 14px; display: grid; gap: 24px; font-size: 12px; letter-spacing: .02em; color: var(--grey); opacity: 0; transform: translateY(8px); transition: 1s var(--ease); }
.opening.ready .stuck-copy { opacity: 1; transform: none; }
.reading { color: var(--lavender); opacity: 0; transition: opacity .8s var(--ease) .8s; }
.opening.ready .reading { opacity: 1; }
.reading i, .active-note i, .expanded-story small i { display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 14px rgba(149,119,255,.65); }
.hero-reveal { position: absolute; inset: 0; padding: 25vh var(--mx) 8vh; background: var(--black); opacity: 0; pointer-events: none; transform: translateY(28px); transition: 1.1s var(--ease); }
.hero-reveal h1 { margin: 0 0 28px 7vw; font-size: clamp(72px, 8vw, 138px); line-height: .92; letter-spacing: -.065em; font-weight: 500; }
.hero-reveal > p { margin: 0 0 0 7.4vw; color: var(--grey); font-size: 13px; letter-spacing: .02em; }
.scroll-cue { position: absolute; bottom: 46px; left: calc(var(--mx) + 7.4vw); font-size: 10px; letter-spacing: .14em; color: var(--grey); }
.scroll-cue i { display: block; width: 1px; height: 44px; margin: 16px 0 0 2px; background: var(--deep-grey); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: translateY(-100%); animation: scroll-line 2s var(--ease) infinite; }
@keyframes scroll-line { 60%,100% { transform: translateY(100%); } }
.opening.hero .opening-letter { opacity: .14; filter: blur(3px); transform: translateY(-26px); }
.opening.hero .hero-reveal { opacity: 1; transform: none; }

.memory { height: 300vh; background: var(--black); }
.memory-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.memory-sentence { position: absolute; z-index: 4; left: calc(var(--mx) + 4vw); top: 29vh; transition: .8s var(--ease); }
.memory-sentence p { margin: 0; font-size: clamp(48px, 5.1vw, 84px); line-height: 1.08; letter-spacing: -.055em; font-weight: 500; }
.memory-sentence em { font-style: normal; transition: color .7s; }
.memory.active .memory-sentence em { color: var(--lavender); }
.active-note { display: block; margin-top: 24px; font: 11px/1 "Pretendard", sans-serif; letter-spacing: .09em; color: var(--lavender); opacity: 0; transition: opacity .7s; }
.memory.active .active-note { opacity: 1; }
.memory-photo { position: absolute; z-index: 3; top: 15vh; left: 94vw; width: min(52vw, 760px); margin: 0; transform: scale(1.035); filter: blur(20px); opacity: .2; transition: filter 1.2s var(--ease), opacity 1.2s var(--ease); }
.memory-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 15px; }
.memory-photo figcaption { display: flex; justify-content: space-between; margin-top: 15px; color: var(--grey); font-size: 11px; line-height: 1.45; letter-spacing: .05em; }
.feature-label { position: absolute; z-index: 5; }
.feature-label > span { display: block; margin-bottom: 18px; font: 11px "Pretendard", sans-serif; color: var(--lavender); letter-spacing: .12em; }
.feature-label h2 { margin: 0 0 20px; font-size: clamp(42px, 4.5vw, 74px); line-height: .94; letter-spacing: -.055em; font-weight: 500; }
.feature-label p { margin: 0; color: var(--grey); font-size: 15px; line-height: 1.6; }
.memory-label { left: var(--mx); bottom: 9vh; opacity: 0; transform: translateY(18px); transition: .9s var(--ease); }
.memory.feature .memory-label { opacity: 1; transform: none; }
.memory-letter { position: absolute; z-index: 6; top: 10vh; left: 17vw; width: min(58vw, 810px); min-height: 80vh; opacity: 0; transform: translateY(80px) scale(.97); transition: 1s var(--ease); }
.letter-surface { background: var(--paper); color: #000000; padding: clamp(34px, 5vw, 76px); border-radius: 14px; }
.memory-letter p { margin: 0 0 29px; font-size: clamp(18px, 1.55vw, 24px); line-height: 1.65; }
.memory-copy mark { color: var(--violet); background: none; }
.quiet-action { border: 0; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.24); background: transparent; color: rgba(0,0,0,.58); font-size: 12px; letter-spacing: .04em; }
.quiet-action span { margin-left: 12px; color: var(--violet); }
.embedded-memory { display: none; margin: 26px 0 34px; }
.embedded-memory img { width: 48%; aspect-ratio: 4/3; object-fit: cover; border-radius: 13px; }
.embedded-memory span { display: block; margin-top: 8px; color: rgba(0,0,0,.42); font-size: 10px; }
.saved-state { display: block; color: var(--violet); margin-top: 14px; opacity: 0; transition: opacity .5s; }
.memory.letter-mode .memory-sentence, .memory.letter-mode .memory-label { opacity: 0; transform: translateY(-25px); }
.memory.letter-mode .memory-photo { top: 57vh !important; left: calc(17vw + clamp(34px, 5vw, 76px)) !important; width: min(26vw, 360px) !important; transform: none !important; border-radius: 13px; }
.memory.letter-mode .memory-photo figcaption { opacity: 0; }
.memory.letter-mode .memory-letter { opacity: 1; transform: none; }
.memory.accepted .memory-photo { opacity: 0 !important; }
.memory.accepted .embedded-memory { display: block; animation: place-image .9s var(--ease) both; }
.memory.accepted .quiet-action { display: none; }
.memory.accepted .saved-state { animation: status 2.2s var(--ease) both; }
@keyframes place-image { from { opacity: 0; transform: scale(1.35) translate(22vw, -16vh); } to { opacity: 1; transform: none; } }
@keyframes status { 0%,100%{opacity:0} 20%,72%{opacity:1} }

.story { height: 310vh; background: var(--paper); color: #000000; transition: background 1s; }
.story-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.dark-label > span { color: var(--violet); }.dark-label p { color: rgba(0,0,0,.58); }
.story-label { left: var(--mx); top: 10vh; opacity: 0; transform: translateY(18px); transition: .9s var(--ease); }
.story.feature .story-label { opacity: 1; transform: none; }
.story-source { position: absolute; left: 16vw; top: 42vh; width: 70vw; transition: .9s var(--ease); }
.story-source p { display: inline; margin: 0; font-size: clamp(58px, 6vw, 88px); line-height: 1.02; letter-spacing: -.065em; font-weight: 500; }
.story-source i { display: inline-block; width: 7px; height: 7px; margin-left: 18px; border-radius: 50%; background: var(--purple); vertical-align: top; box-shadow: 0 0 18px rgba(149,119,255,.3); }
.questions span { position: absolute; color: rgba(0,0,0,.42); font-size: 12px; letter-spacing: -.01em; opacity: 0; transform: translateY(10px); transition: .8s var(--ease); }
.questions span:nth-child(1){ left: 9vw; top: 31vh; }.questions span:nth-child(2){ right: 8vw; top: 38vh; }.questions span:nth-child(3){ right: 24vw; bottom: 22vh; }
.story.prompt .questions span { opacity: .8; transform: none; }.story.prompt .questions span:nth-child(2){transition-delay:.14s}.story.prompt .questions span:nth-child(3){transition-delay:.28s}
.traces { position: absolute; left: 54vw; top: 31vh; display: grid; width: 38vw; opacity: 0; transform: translateY(18px); transition: .9s var(--ease); }
.traces > p { font: 10px "Pretendard", sans-serif; letter-spacing: .13em; color: rgba(0,0,0,.42); margin: 0 0 24px; }
.traces button { border: 0; border-top: 1px solid rgba(0,0,0,.14); padding: 19px 0; text-align: left; background: transparent; color: rgba(0,0,0,.42); font-size: 15px; transition: .5s; }
.traces button i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin-right: 14px; background: rgba(0,0,0,.28); vertical-align: middle; }
.traces button.selected { color: #000000; }.traces button.selected i { background: var(--purple); box-shadow: 0 0 10px rgba(149,119,255,.6); }
.story.trace .story-source { left: 8vw; top: 39vh; width: 40vw; }.story.trace .story-source p { font-size: clamp(45px, 4.6vw, 70px); }.story.trace .questions { opacity: 0; }.story.trace .traces { opacity: 1; transform: none; }
.expanded-story { position: absolute; left: 19vw; top: 25vh; width: 66vw; opacity: 0; }
.expanded-story p { margin: 0; font-size: clamp(40px, 4.4vw, 70px); line-height: 1.15; letter-spacing: -.055em; font-weight: 500; }
.expanded-story .before { margin-bottom: 26px; }
.expanded-story .after { color: #111111; opacity: 0; filter: blur(8px); transform: translateY(-18px); transition: 1.25s var(--ease) .2s; }
.expanded-story small { display: block; margin-top: 30px; color: var(--violet); font: 11px "Pretendard", sans-serif; letter-spacing: .05em; opacity: 0; transition: .7s .9s; }
.story.expanded .story-source, .story.expanded .traces { opacity: 0; transform: translateY(-20px); }
.story.expanded .expanded-story { opacity: 1; }.story.expanded .after { opacity: 1; filter: none; transform: none; }.story.expanded .expanded-story small { opacity: 1; }

.bridge { height: 165vh; background: var(--paper); color: #000000; padding-top: 30vh; transition: background 1s, color 1s; }
.bridge > div { position: sticky; top: 30vh; margin-left: 18vw; }
.bridge p { margin: 0 0 13px; font-size: clamp(44px, 5vw, 78px); line-height: 1.13; letter-spacing: -.06em; font-weight: 500; transition: opacity .8s; }
.bridge .future-line { color: #000000; }.bridge .future-line i { display: inline-block; width: 7px; height: 7px; margin-left: 14px; border-radius: 50%; background: var(--purple); vertical-align: top; }
.bridge .future-line small { display: block; margin-top: 15px; color: var(--purple); font: 11px "Pretendard", sans-serif; letter-spacing: .07em; }
.bridge.dark { background: var(--black); color: rgba(255,255,255,.3); }.bridge.dark .future-line { color: var(--white); }

.future { background: var(--black); }
.future-intro { position: relative; min-height: 125vh; padding: 18vh var(--mx); }
.future-intro .feature-label { position: relative; }
.future-copy { position: absolute; left: 43vw; top: 18vh; }
.future-copy h3 { margin: 0 0 18px; font-size: clamp(48px, 5vw, 82px); line-height: 1; letter-spacing: -.06em; font-weight: 500; }
.future-copy p { margin: 0; color: var(--grey); font-size: 22px; }
.future-selector { position: absolute; left: 43vw; top: 50vh; width: 48vw; }
.future-selector > p { margin: 0 0 32px; font-size: 15px; color: rgba(255,255,255,.58); }
.future-selector fieldset { display: grid; grid-template-columns: 110px repeat(4, minmax(72px, 1fr)); border: 0; border-top: 1px solid rgba(255,255,255,.16); margin: 0; padding: 17px 0; }
.future-selector legend { float: left; width: 110px; padding: 3px 0 0; font: 10px "Pretendard", sans-serif; color: var(--grey); letter-spacing: .13em; }
.future-selector button { position: relative; width: fit-content; border: 0; padding: 2px 0 7px; background: transparent; color: rgba(255,255,255,.36); font: 12px "Pretendard", sans-serif; letter-spacing: .08em; }
.future-selector button.active { color: var(--lavender); }.future-selector fieldset button.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--purple); }
.future-selector .imagine { margin-top: 34px; color: var(--white); font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.3); }
.future-selector .imagine span { margin-left: 12px; color: var(--lavender); }
.word-transform { height: 260vh; }
.word-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.mask-word { margin: 0; text-align: center; font: 600 clamp(130px, 23vw, 360px)/.76 "Pretendard", sans-serif; letter-spacing: -.085em; color: var(--white); transform: scale(var(--word-scale,1)); transform-origin: center; background-image: url('./images/future/osaka-spring-triptych.png'); background-size: 110% auto; background-position: center; -webkit-background-clip: text; background-clip: text; transition: color .8s, transform .1s linear; }
.word-transform.active .mask-word { color: transparent; -webkit-text-fill-color: transparent; }
.word-sticky > span { align-self: center; margin-top: 40px; color: var(--lavender); font: 11px "Pretendard", sans-serif; letter-spacing: .25em; opacity: 0; transition: opacity .6s .2s; }
.word-transform.active .word-sticky > span { opacity: 1; }
.future-gallery { height: 340vh; }
.future-gallery-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--black); }
.future-image { position: absolute; inset: 0; background-image: url('./images/future/osaka-spring-triptych.png'); background-repeat: no-repeat; background-size: 300% 100%; background-position: var(--scene-position, 0% center); transform: scale(1.02); transition: background-position 1.2s var(--ease), transform 1.3s var(--ease), filter 1.3s; }
.future-image::after { content:""; position:absolute; inset:0; background: rgba(17,17,19,.12); }
.future-statement { position: absolute; left: var(--mx); bottom: 10vh; }
.future-statement p { margin: 0; font-size: clamp(50px, 6vw, 92px); line-height: .98; letter-spacing: -.06em; font-weight: 500; text-shadow: 0 2px 28px rgba(0,0,0,.25); opacity: 0; transform: translateY(18px); transition: .9s var(--ease); }
.future-gallery.breathe .future-statement p { opacity: 1; transform: none; }
.scene-progress { position: absolute; right: var(--mx); bottom: 6vh; display: flex; align-items: center; gap: 10px; font: 10px "Pretendard",sans-serif; letter-spacing: .08em; }
.scene-progress i { width: 54px; height: 1px; background: rgba(255,255,255,.35); position: relative; }.scene-progress i::after{content:"";position:absolute;left:0;top:0;width:var(--scene-progress,33%);height:1px;background:white;transition:.7s var(--ease)}
.keep-scene { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.5); border-radius: 50%; width: 128px; height: 128px; background: rgba(0,0,0,.25); backdrop-filter: blur(3px); font: 10px "Pretendard",sans-serif; letter-spacing: .1em; opacity: 0; transition: opacity .6s; }
.future-gallery:hover .keep-scene, .keep-scene:focus-visible { opacity: 1; }
.future-saved { position: absolute; top: 50%; left: 50%; transform: translate(-50%,90px); color: var(--lavender); font: 11px "Pretendard",sans-serif; opacity: 0; }
.future-gallery.saved .future-saved { animation: status 2s var(--ease) both; }

.complete { min-height: 230vh; background: var(--paper); color: #000000; padding: 28vh 10vw 30vh; display: flex; align-items: flex-start; gap: 7vw; }
.complete-letter { width: min(62vw, 820px); padding: clamp(42px, 6vw, 82px); transform-origin: top center; }
.complete-letter header { display: flex; justify-content: space-between; margin-bottom: 55px; color: rgba(0,0,0,.48); font: 10px "Pretendard",sans-serif; letter-spacing: .1em; }
.complete-letter p { margin: 0 0 28px; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.72; }
.complete-letter img { width: 48%; aspect-ratio: 4/3; object-fit: cover; border-radius: 13px; margin: 34px 0; }
.complete-future { width: 100%; aspect-ratio: 16/7; margin: 34px 0; border-radius: 10px; background-image: url('./images/future/osaka-spring-triptych.png'); background-size: 300% 100%; background-position: 50% center; }
.complete-letter .sign { text-align: right; margin-top: 45px; }
.complete-caption { position: sticky; top: 31vh; width: 23vw; }
.complete-caption small { color: var(--violet); font-size: 12px; }
.complete-caption p { margin-top: 34px; font-size: clamp(23px, 2.4vw, 38px); line-height: 1.32; letter-spacing: -.04em; }

.outro { position: relative; height: 180vh; background: var(--black); color: var(--white); overflow: hidden; }
.three-words { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; gap: 5vw; font: 500 clamp(34px, 4vw, 68px)/1 "Pretendard",sans-serif; letter-spacing: -.05em; }
.three-words span:nth-child(2) { color: var(--lavender); }
.outro-brand { position: absolute; inset: 80vh 0 auto; height: 82vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--black); }
.outro-brand img { width: clamp(120px, 13vw, 210px); margin-bottom: 42px; }
.outro-brand p { margin: 0 0 13px; font-size: clamp(24px, 2.3vw, 38px); letter-spacing: -.035em; }
.outro-brand small { color: var(--grey); letter-spacing: .03em; }
.outro footer { position: absolute; left: var(--mx); right: var(--mx); bottom: 30px; display: none; justify-content: space-between; align-items: flex-end; color: rgba(255,255,255,.42); font: 9px/1.5 "Pretendard",sans-serif; letter-spacing: .08em; }
.outro footer p:last-child { text-align: right; }

.cursor { position: fixed; z-index: 999; left: 0; top: 0; pointer-events: none; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; width: 7px; height: 7px; border-radius: 50%; background: var(--white); mix-blend-mode: difference; transition: width .35s var(--ease), height .35s var(--ease), background .35s; }
.cursor i { display:none; }.cursor span { font: 9px "Pretendard",sans-serif; color: var(--white); opacity: 0; transition: opacity .2s; }
.cursor.mode { width: 46px; height: 46px; background: var(--purple); mix-blend-mode: normal; }.cursor.mode span { opacity: 1; }
.idle-note { position: fixed; z-index: 180; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(15px); color: var(--lavender); font: 9px "Pretendard",sans-serif; letter-spacing: .15em; opacity: 0; transition: .5s; pointer-events: none; }.idle-note.show { opacity: 1; transform: translateX(-50%); }

@media (max-width: 900px) {
  :root { --mx: 24px; }
  body, button { cursor: auto; }.cursor { display:none; }
  .nav { height: 64px; padding-top: 22px; }.nav nav { gap: 12px; }.nav nav a { font-size: 9px; }.nav nav a span { display:none; }.brand img{width:52px}
  .progress { right: 7px; }
  .opening { height: 175vh; }.opening-letter { left: var(--mx); top: 31vh; max-width: 88vw; font-size: 20px; }.hero-reveal { padding-top: 30vh; }.hero-reveal h1 { margin-left:0;font-size:clamp(55px,15vw,90px); }.hero-reveal>p,.scroll-cue{margin-left:0;left:var(--mx)}
  .memory { height: 260vh; }.memory-sentence { left:var(--mx);top:25vh; }.memory-photo { width:82vw; top:31vh; }.memory-label{left:var(--mx)}.memory-letter{left:5vw;width:90vw}.memory.letter-mode .memory-photo{display:none}.letter-surface{padding:32px}.embedded-memory img{width:70%}
  .story{height:260vh}.story-label{left:var(--mx)}.story-source{left:var(--mx);top:39vh;width:90vw}.story-source p{font-size:12vw}.questions span:nth-child(1){left:var(--mx)}.questions span:nth-child(2){right:var(--mx)}.questions span:nth-child(3){right:var(--mx)}.story.trace .story-source{left:var(--mx);top:28vh;width:90vw}.traces{left:var(--mx);top:50vh;width:calc(100vw - 48px)}.expanded-story{left:var(--mx);top:25vh;width:calc(100vw - 48px)}.expanded-story p{font-size:9vw}
  .bridge>div{margin-left:var(--mx)}
  .future-intro{padding-top:14vh;min-height:150vh}.future-copy{position:relative;left:0;top:auto;margin-top:30vh}.future-selector{left:var(--mx);top:81vh;width:calc(100vw - 48px)}.future-selector fieldset{grid-template-columns:78px repeat(4,minmax(45px,1fr))}.future-selector legend{width:78px}.future-selector button{font-size:10px}.mask-word{font-size:29vw}
  .future-gallery{height:280vh}.future-statement{bottom:12vh}.future-image{background-size:auto 100%;}.keep-scene{opacity:1;width:104px;height:104px}
  .complete{padding:20vh 5vw;display:block;min-height:210vh}.complete-letter{width:90vw}.complete-caption{position:relative;top:auto;width:90vw;margin-top:60px}.complete-letter img{width:72%}
  .three-words{flex-direction:column;gap:16px}.outro footer{font-size:8px}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .25s !important; }
  .memory-photo { filter: none; }.mask-word { transform: none !important; }
}