@font-face{font-family:Archivo;src:url(assets/archivo.ttf);font-display:swap}@font-face{font-family:Archivo;src:url(assets/archivo-italic.ttf);font-style:italic;font-display:swap}:root{color-scheme:dark;--paper:#e9eadf;--volt:#ceff00;--gold:#c7b67f}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#090a08;color:var(--paper);font:16px/1.65 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Hiragino Sans',sans-serif}a{color:inherit;text-decoration:none}button,select{font:inherit}a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--volt);outline-offset:6px}header{position:absolute;z-index:20;top:0;left:0;right:0;height:95px;padding:0 4%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff13}.logo{font:22px Archivo,sans-serif;letter-spacing:-.6px}.logo span{font:11px sans-serif;vertical-align:top;margin-left:4px}.header-right{display:flex;align-items:center;gap:30px}select{background:transparent;color:var(--paper);border:0;font-size:13px;padding:9px;cursor:pointer}option{background:#090a08}.get-app{border:1px solid #ffffff45;padding:9px 20px;font-size:13px;border-radius:2px;transition:.2s}.get-app:hover{background:var(--paper);color:#090a08}.experience{height:570svh;position:relative}.stage{position:sticky;top:0;height:100svh;min-height:580px;overflow:hidden;isolation:isolate;background:#090a08}.stage canvas{position:absolute;inset:0;z-index:2;pointer-events:none}.halo{position:absolute;left:50%;top:49%;width:95vw;height:75vh;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#b5c94717,transparent 62%);pointer-events:none;z-index:0}.stage-grain{position:absolute;inset:0;opacity:.055;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h200v200H0z'/%3E%3C/svg%3E");z-index:12}.opening{position:absolute;inset:20% 0 auto;z-index:1;text-align:center;will-change:transform,opacity}.overline{font-size:12px;font-weight:600;letter-spacing:3px;margin:0 0 26px;color:var(--volt)}h1{font:clamp(70px,12vw,188px)/.9 Archivo;margin:0;letter-spacing:-.08em}h1 span{display:block}.outline{-webkit-text-stroke:1px #dddcc58c;color:transparent}.opening-caption{margin:36px 0 0;font-size:18px;color:#c5c5bb}.hero-object{position:absolute;width:380px;height:480px;left:50%;top:50%;margin:-240px 0 0 -190px;z-index:5;will-change:transform;transform-style:preserve-3d}#hero-shoe{position:absolute;width:155%;left:-27.5%;top:32%;filter:drop-shadow(0 38px 26px #000b);will-change:transform;transform:translateY(0) rotate(-18deg);animation:arrival 1.8s cubic-bezier(.16,1,.3,1) both}.memorial-card{position:absolute;inset:0;border:1px solid #ccbb7666;background:radial-gradient(ellipse at 50% 30%,#8f79451d,transparent 65%),linear-gradient(135deg,#202019,#10110d);opacity:0;box-shadow:0 40px 80px #0009,inset 0 0 0 7px #0b0b08,inset 0 0 0 8px #ccbb762a;color:var(--gold)}.card-head{padding:27px 26px;display:flex;justify-content:space-between;font:10px Archivo;letter-spacing:1px}.card-lines{position:absolute;left:14%;right:14%;top:24%;height:34%;border:1px solid #b5a26828;border-radius:50%;transform:rotate(-28deg)}.card-bottom{position:absolute;bottom:26px;left:26px;right:26px}.card-bottom p{font-size:16px;color:var(--paper);margin:0 0 9px}.card-bottom strong{font:italic 53px/1.2 Archivo;letter-spacing:-3px}.card-bottom strong span{font-size:16px;letter-spacing:0}.card-bottom>div{display:flex;justify-content:space-between;font:8px Archivo;letter-spacing:.2px;border-top:1px solid #ccbb7633;padding-top:20px;margin-top:20px}.distance{position:absolute;left:0;right:0;top:19%;text-align:center;font:italic clamp(130px,26vw,395px)/1 Archivo;letter-spacing:-.08em;color:var(--volt);opacity:0;z-index:1;white-space:nowrap;will-change:transform,opacity}.distance small{font-size:.13em;letter-spacing:-.05em;margin-left:.5em}.chapter-copy{position:absolute;z-index:8;bottom:11%;left:7%;right:7%;text-align:center;opacity:0;pointer-events:none}.chapter-copy .overline{margin-bottom:12px;font-size:11px}h2{font-size:clamp(28px,3.3vw,50px);line-height:1.3;letter-spacing:-.045em;word-break:keep-all;margin:0}.chapter-copy>p:last-child{font-size:16px;color:#b4b5a8;margin:16px 0 0}.final-copy{position:absolute;left:5%;right:5%;top:13%;text-align:center;z-index:9;opacity:0;pointer-events:none}.final-copy .overline{color:var(--gold);font-size:11px;margin-bottom:18px}.final-copy h2{font-size:clamp(30px,3.4vw,54px)}.final-copy>p:last-child{color:#b4b5a8;font-size:15px}.stage-foot{position:absolute;bottom:31px;left:4%;right:4%;z-index:14;display:flex;justify-content:space-between;align-items:center}.scroll-hint{font-size:12px;color:#adaf9f;display:flex;align-items:center;gap:12px}.scroll-hint i{display:block;width:30px;height:1px;background:var(--volt);animation:breathe 2.4s ease-in-out infinite}.stage-counter{display:flex;gap:10px;font-size:12px}.stage-counter b{font-weight:400;color:var(--volt)}.stage-counter>span{color:#6e7065}.progress-track{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff0b;z-index:14}.progress-track i{display:block;width:0;height:100%;background:var(--volt)}.chapters{position:absolute;right:24px;top:50%;display:flex;flex-direction:column;z-index:18}.chapters button{width:34px;height:32px;padding:12px;border:0;background:transparent;cursor:pointer}.chapters button:after{content:'';display:block;width:5px;height:5px;border-radius:50%;background:#6b6c60}.chapters button.active:after{background:var(--volt);box-shadow:0 0 12px #ceff0088}.exhibit-world{position:absolute;inset:0;perspective:1200px;z-index:3;opacity:0;pointer-events:none}.exhibit-grid{position:absolute;left:50%;top:57%;width:1450px;height:1000px;margin:-500px 0 0 -725px;display:grid;grid-template-columns:repeat(5,1fr);gap:36px;transform-style:preserve-3d;will-change:transform}.exhibit{position:relative;border:1px solid #a8995a44;background:radial-gradient(ellipse at 50% 28%,#77602d22,transparent 60%),#14150f;height:365px;color:var(--gold);box-shadow:0 40px 60px #0008,inset 0 0 0 5px #0a0a07,inset 0 0 0 6px #a8995a20}.exhibit:nth-child(even){transform:translateY(75px)}.exhibit small{display:flex;justify-content:space-between;font:8px Archivo;letter-spacing:1px;padding:20px}.exhibit img{position:absolute;width:90%;left:5%;top:26%;transform:rotate(-16deg);filter:drop-shadow(0 18px 14px #000b)}.exhibit>div{position:absolute;bottom:25px;left:22px;right:22px}.exhibit strong{font:italic 32px Archivo;letter-spacing:-1px}.exhibit em{font:10px sans-serif;margin-left:5px}.exhibit p{font:8px Archivo;letter-spacing:1px;border-top:1px solid #a8995a30;padding-top:15px;margin-bottom:0}.exhibit:nth-child(3){visibility:visible}.about{display:grid;grid-template-columns:1.1fr 1fr;gap:9%;padding:120px 8%;border-top:1px solid #ffffff18;position:relative;background:#0d0e0b}.about h2{font-size:clamp(30px,4vw,56px)}.about-content>p:first-child{font-size:18px;line-height:1.9;margin-top:0;color:#c5c5bc}.features{display:flex;flex-direction:column;gap:0;margin:28px 0}.features span{padding:12px 0;border-bottom:1px solid #ffffff18;font-size:15px}.features span:before{content:'+';color:var(--volt);margin-right:16px}.note{color:#85887b;font-size:12px;line-height:1.8;max-width:470px}.download{padding:115px 7%;background:var(--volt);color:#10110c;text-align:center}.download .overline{color:#495318}.download h2{font-size:clamp(42px,6vw,88px);letter-spacing:-.06em}.store-links{display:flex;justify-content:center;gap:12px;margin:38px 0 25px}.store-links a{display:flex;gap:30px;align-items:center;justify-content:space-between;min-width:218px;padding:16px 23px;border:1px solid #13150c;background:#13150c;color:var(--paper);font-size:18px;border-radius:2px;transition:transform .2s}.store-links a:hover{transform:translateY(-4px)}.store-links span{font-size:11px;color:#9b9f8d}footer{padding:45px 4%;display:flex;justify-content:space-between;align-items:center;gap:25px}footer .logo{font-size:18px}footer p{font-size:11px;color:#7e8175}footer>div{display:flex;gap:20px;font-size:12px;color:#a5a99a}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip{position:fixed;left:10px;top:-80px;padding:10px;background:var(--volt);color:black;z-index:100}.skip:focus{top:10px}@keyframes arrival{from{opacity:0;translate:70px 45px}to{opacity:1;translate:0 0}}@keyframes breathe{50%{transform:scaleX(.5);transform-origin:left}}@media(max-width:760px){header{height:74px;padding:0 6%}.logo{font-size:18px}.header-right{gap:10px}.get-app{padding:7px 10px;font-size:11px}.experience{height:520svh}.stage{min-height:530px}.opening{top:25%}.opening .overline{font-size:9px;letter-spacing:2px;margin-bottom:23px}h1{font-size:14.8vw;letter-spacing:-.065em;line-height:.95}.opening-caption{font-size:15px;margin-top:22px}.hero-object{width:280px;height:375px;margin:-187.5px 0 0 -140px;top:52%}#hero-shoe{width:135%;left:-17.5%;top:36%}.card-head{padding:23px 21px;font-size:8px}.card-bottom{left:21px;right:21px;bottom:23px}.card-bottom p{font-size:14px}.card-bottom strong{font-size:43px}.card-bottom>div{font-size:6px;margin-top:14px;padding-top:14px}.distance{top:25%;font-size:28vw}.chapter-copy{bottom:13%;left:9%;right:9%}.chapter-copy h2{font-size:28px}.chapter-copy>p:last-child{font-size:14px}.final-copy{top:13%}.final-copy h2{font-size:29px}.final-copy>p:last-child{font-size:13px}.final-copy .overline{font-size:9px}.chapters{right:3px}.stage-foot{left:6%;right:6%;bottom:25px}.scroll-hint{font-size:10px;gap:8px;max-width:80%}.scroll-hint i{width:20px;flex-shrink:0}.stage-counter{font-size:10px}.about{grid-template-columns:1fr;gap:32px;padding:75px 7%}.about .overline{font-size:10px}.about h2{font-size:36px}.about-content>p:first-child{font-size:16px}.download{padding:85px 7%}.download h2{font-size:40px}.store-links{gap:10px}.store-links a{min-width:0;width:50%;gap:10px;font-size:16px;padding:16px}.store-links span{display:none}footer{padding:35px 7%;flex-wrap:wrap;gap:16px}footer p{width:100%;order:3;margin:0}footer>div{font-size:11px;gap:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before{animation:none!important;transition:none!important}.experience{height:100svh}.opening{top:18%}.hero-object{top:58%}.scroll-hint i{animation:none}}
/* Keep the opening caption below the floating shoe. */
.opening-caption{position:absolute;top:60svh;left:5%;right:5%;margin:0}

.exhibit-world{mask-image:linear-gradient(to bottom,transparent 19%,#000 37%,#000 90%,transparent 100%)}
@media(min-width:761px){.opening-caption{top:64svh}}

/* An extra chapter: the pair becomes a trusted running mate. */
.bond-label{position:absolute;z-index:1;left:0;right:0;top:24%;text-align:center;font:clamp(24px,4.5vw,70px)/1.1 Archivo;letter-spacing:-.05em;color:var(--volt);opacity:0;pointer-events:none}.bond-label span{display:block;font:11px/1.5 Archivo;letter-spacing:3px;margin-top:18px;color:#bfc2ad}
.experience{height:650svh}.chapter-copy h2{font-size:clamp(27px,3.3vw,50px)}
@media(max-width:760px){.experience{height:600svh}.bond-label{top:26%;font-size:8vw}.bond-label span{font-size:9px;letter-spacing:2px}.chapter-copy h2{font-size:26px}.chapter-copy>p:last-child{font-size:13px}.download h2{font-size:36px}#hero-shoe{width:125%;left:-12.5%}}
@media(prefers-reduced-motion:reduce){.experience{height:100svh}}

.cta-description{font-size:18px;line-height:1.7;margin:25px auto 0;max-width:650px;color:#35400b;word-break:keep-all}@media(max-width:760px){.cta-description{font-size:16px;max-width:300px}.download h2{font-size:clamp(28px,7.7vw,36px)}}
/* Product cutouts are taller than the original illustration. */
#hero-shoe{top:26%}@media(max-width:760px){#hero-shoe{top:28%}}

/* Keep a separate dark reading area below the floating product. */
.hero-object{top:43%}
.chapter-copy{text-shadow:0 2px 14px #000;isolation:isolate}
.chapter-copy:before{content:'';position:absolute;inset:-24px -12vw -28px;z-index:-1;background:linear-gradient(transparent,#090a08d9 30%,#090a08ed 80%,transparent);pointer-events:none}
.chapter-copy>p:last-child{color:#c5c7bc}
.exhibit img{animation:exhibit-float 6s ease-in-out infinite}
.exhibit:nth-child(3n+1) img{animation-delay:-2s}.exhibit:nth-child(3n+2) img{animation-delay:-4s}
@keyframes exhibit-float{0%,100%{transform:translateY(-4px) rotate(-14deg)}50%{transform:translateY(5px) rotate(-18deg)}}
@media(prefers-reduced-motion:reduce){.exhibit img{animation:none}}

/* The only mascot lives on the floor of the download section. */
.download{position:relative;display:block;text-align:center;padding:90px 8% 122px;overflow:hidden;--mate-trip:20s}
.download-copy{padding:0}.download .cta-description{margin-left:auto}.download .store-links{justify-content:center}
.mate-track{position:absolute;left:24px;right:84px;bottom:0;height:80px;pointer-events:none}
.download-runner{position:absolute;left:0;bottom:0;width:60px;height:80px;animation:mate-shuttle var(--mate-trip) linear infinite}
.mate-facing{height:100%;animation:mate-facing var(--mate-trip) steps(1) infinite}
/* Independent clocks: original six leg frames, arms 1-2-3-2. */
.mate-sprite{position:relative;width:66.6667%;height:100%;margin:auto}
.mate-sprite::before,.mate-sprite::after{content:'';position:absolute;inset:0;background:url('assets/mate-run-two-arms.png') 0 50% / 600% 100% no-repeat}
.mate-sprite::before{clip-path:polygon(0 0,100% 0,100% 48%,55% 48%,55% 54%,0 54%);animation:mate-arm-cycle .65s steps(1) infinite}
.mate-sprite::after{clip-path:polygon(5% 54%,55% 54%,55% 48%,100% 48%,100% 100%,5% 100%);animation:mate-leg-cycle .65s steps(6) infinite}
@keyframes mate-arm-cycle{0%,100%{background-position:0% 50%}25%,75%{background-position:20% 50%}50%{background-position:40% 50%}}
@keyframes mate-leg-cycle{to{background-position:120% 50%}}
@keyframes mate-shuttle{50%{left:100%}}
@keyframes mate-facing{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
.download:not(.mate-running) .download-runner,.download:not(.mate-running) .mate-facing,.download:not(.mate-running) .mate-sprite::before,.download:not(.mate-running) .mate-sprite::after{animation-play-state:paused}
.exhibit:nth-child(4n+1){rotate:-3deg}.exhibit:nth-child(4n+2){rotate:2deg}.exhibit:nth-child(4n+3){rotate:-1deg}.exhibit:nth-child(4n) img{animation-duration:7.4s}
#mate-toggle{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0}#mate-toggle:focus-visible{outline:2px solid var(--volt);outline-offset:5px}
@media(max-width:760px){.download{padding:70px 7% 100px}.mate-track{left:16px;right:64px;height:64px}.download-runner{width:48px;height:64px}}
@media(prefers-reduced-motion:reduce){.download-runner,.mate-facing,.mate-sprite::before,.mate-sprite::after{animation:none}}

.mate-hit{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;transform-origin:50% 100%;border-radius:12px}
.mate-hit:focus-visible{outline:2px solid #151a08;outline-offset:1px}.mate-facing,.mate-sprite{display:block}
.mate-response{position:absolute;bottom:94px;left:clamp(110px,var(--mate-x,50%),calc(100% - 110px));transform:translate(-50%,5px);padding:7px 12px;border-radius:12px;background:#172006;color:#eaffaa;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.mate-response.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.mate-response{bottom:70px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.mate-response{transition:none}}

.about-heading{display:flex;align-items:flex-start;gap:18px}.about-heading h2{margin:0;min-width:0}.about-mate{display:block;height:56px;width:auto;flex-shrink:0;margin-top:6px}
@media(max-width:760px){.about-heading{flex-direction:column;gap:16px}.about-mate{height:44px;margin-top:0}}

.social-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap}.social-links a{font-size:13px;color:var(--paper);text-decoration:none}.social-links a:hover{color:var(--volt)}