/* A continuous night, with room to explore between the scenes. */
:root{--demo-line:#c7bde226;--mood-pink:.18;--mood-blue:.1}
body{background:#0e0e1c}.demo-wrap{width:calc(100% - 112px);max-width:1500px;margin-inline:auto}.kicker{font:500 11px/1.6 'DM Sans',sans-serif;letter-spacing:.2em;color:#9aefda;margin:0 0 24px;display:flex;justify-content:space-between;gap:20px}.chapter-copy>p:not(.kicker){max-width:320px;color:#b1a8c3;font-size:16px;line-height:1.8;margin:26px 0 36px}.chapter-copy h2,.chapter-heading h2,.train-copy h2{font-size:clamp(54px,5.6vw,88px);line-height:.98;letter-spacing:-.055em;font-weight:500}.chapter-copy h2 em,.chapter-heading h2 em,.train-copy h2 em{color:#efa1d0}.scene-tone{position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(115deg,rgba(244,43,161,var(--mood-pink)),transparent 75%),linear-gradient(300deg,rgba(22,100,249,var(--mood-blue)),transparent 80%)}
.layers-chapter{height:190vh;position:relative;background:radial-gradient(ellipse at 78% 50%,#28203f66,transparent 65%)}.layers-sticky{position:sticky;top:0;min-height:760px;height:100vh;display:grid;grid-template-columns:330px 1fr;gap:60px;align-items:center}.layer-stage{height:620px;position:relative;perspective:1800px;display:flex;align-items:center;justify-content:center}.layer-stack{position:relative;width:min(100%,600px);aspect-ratio:1672/941;transform-style:preserve-3d;transform:translateY(100px) rotateX(52deg) rotateZ(-21deg);--spread:0}.depth-plane{position:absolute;inset:0;transform:translateZ(calc(var(--i) * var(--spread) * 46px));border:1px solid rgb(145 226 216 / calc(var(--spread) * .4));background:rgb(17 16 34 / calc(var(--spread) * .5));transform-style:preserve-3d;transition:border-color .2s}.depth-plane img,.depth-plane canvas{position:absolute;width:100%;height:100%;object-fit:fill;inset:0}.depth-plane>span{position:absolute;top:12px;left:15px;font:10px/1 monospace;letter-spacing:.12em;color:#a4ffe6;opacity:var(--spread);text-shadow:0 1px 3px #000}.rail-plane img{top:74%;height:auto;transform:rotate(-2.46deg);transform-origin:top left}.stage-caption{position:absolute;bottom:22px;right:0;font-size:10px;letter-spacing:.2em;color:#796f8d}.layer-key{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:12px;color:#a49ab7;margin-top:26px}.layer-key span{font:10px monospace;color:#f29bd0;margin-right:12px}.range-label{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-bottom:16px}.range-label output{color:#9debd7;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:#99f2dc;cursor:pointer;height:18px;margin:0;touch-action:pan-y}.quiet-button{appearance:none;border:0;background:none;color:#a99ab8;cursor:pointer;font:inherit;font-size:12px;padding:12px 0;text-decoration:underline;text-underline-offset:5px}.quiet-button:hover,.quiet-link:hover{color:#a4ffe5}.chapter-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:60px}.chapter-heading>p{color:#b4a9c3;font-size:16px;line-height:1.8;margin:0 0 7px}.weather-chapter{padding-block:115px 145px}.weather-workspace{display:grid;grid-template-columns:1fr 330px;border:1px solid var(--demo-line);border-radius:8px;overflow:hidden;background:#141323}.weather-scene{position:relative;min-height:560px;isolation:isolate;overflow:hidden;background:#171328;--scene-x:0px;--scene-y:0px;--scroll-depth:0px}.weather-sky,.weather-clouds,.weather-buildings,.weather-balcony,.weather-plants,.weather-cabinet{position:absolute;inset:-16px;background:center/cover no-repeat;pointer-events:none}.weather-sky{background-image:url('assets/tokyo-skyline.webp');z-index:-8}.weather-clouds{background-image:url('assets/tokyo-clouds.webp');z-index:-7;animation:weather-clouds 55s ease-in-out infinite alternate}.weather-buildings{background-image:url('assets/tokyo-buildings.webp');z-index:-6;transform:translate3d(calc(var(--scene-x) * -.08),calc(var(--scene-y) * -.08),0)}.weather-balcony{background-image:url('assets/tokyo-balcony.webp');z-index:-2}.weather-plants{background-image:url('assets/tokyo-plants.webp');z-index:-2}.weather-cabinet{background-image:url('assets/tokyo-balcony.webp');z-index:-2;clip-path:inset(53% 0 10% 90%)}.weather-scene .hero-rain-back{z-index:-3}.weather-scene .hero-rain-front{z-index:-1}.viewfinder-top,.viewfinder-bottom{position:absolute;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:15px;font:10px/1.6 monospace;letter-spacing:.08em;z-index:2}.viewfinder-top{top:23px}.viewfinder-bottom{bottom:22px}.viewfinder-top i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#90ffe0;margin-right:8px}.viewfinder-bottom span:first-child{font-size:22px;letter-spacing:-.03em}.viewfinder-bottom span:last-child{font:11px 'DM Sans',sans-serif;color:#d8c6dc}.weather-console{padding:26px 26px 18px;border-left:1px solid var(--demo-line);background:linear-gradient(150deg,#232032,#151522);display:flex;flex-direction:column;gap:24px}.console-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;font:10px/1.5 monospace;letter-spacing:.09em;color:#a99dbd}.power-dot{width:6px;height:6px;background:#9cf4d9;border-radius:50%;box-shadow:0 0 10px #9cf4d933}.range-ends{display:flex;justify-content:space-between;color:#80758f;font-size:10px;margin-top:7px}.presets{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px}.presets legend{font-size:11px;color:#a99dbd;margin-bottom:13px}.presets button{border:1px solid #76638366;border-radius:4px;background:transparent;color:#c4b5d0;padding:9px 10px;font-size:10px;cursor:pointer}.presets button[aria-pressed=true]{background:#93ebd6;color:#121524;border-color:#93ebd6}.sound-row{border-top:1px solid var(--demo-line);padding-top:20px;display:grid;gap:7px}.sound-row button{border:0;background:none;color:#eeb6d8;padding:0;text-align:left;font-size:14px;cursor:pointer}.sound-row span{font-size:11px;color:#847a94}.weather-footnote{display:flex;justify-content:space-between;gap:20px;margin-top:19px;font-size:10px;letter-spacing:.1em;color:#8d819d}.weather-footnote span:last-child{letter-spacing:0}
@keyframes weather-clouds{to{transform:translate3d(-60px,0,0)}}
.train-chapter{height:155vh;background:#121324;position:relative}.train-sticky{position:sticky;top:0;height:100vh;min-height:650px;overflow:hidden;isolation:isolate}.train-city{position:absolute;inset:-30px;background:linear-gradient(90deg,#101021aa,#10102155),url('assets/tokyo-skyline.webp') center/cover;z-index:-1}.train-copy{position:absolute;left:max(56px,calc((100vw - 1500px)/2));top:15%;z-index:2}.train-copy>p:last-child{line-height:1.8;color:#c4b3cb;font-size:16px}.journey-train{position:absolute;width:135%;max-width:none;height:auto;left:0;bottom:13%;transform:translateX(var(--train-progress,80%));filter:brightness(.8);pointer-events:none}.train-track-label{position:absolute;bottom:7%;left:56px;right:56px;display:flex;align-items:center;gap:30px;color:#ccb8d3;font:10px monospace;letter-spacing:.15em}.train-track-label>div{height:1px;background:#e3adcd33;flex:1;position:relative}.train-track-label i{position:absolute;top:-3px;left:var(--track-progress,0%);height:7px;width:7px;border-radius:50%;background:#88ffe0}.lab-chapter{padding-block:150px 110px}.lab-grid{border-block:1px solid var(--demo-line);display:grid;grid-template-columns:1fr 1fr}.lab-monitor{padding:35px 50px 35px 0}.fps-reading{display:flex;align-items:center;gap:25px;margin-top:25px}.fps-reading>output{font-size:92px;line-height:1;letter-spacing:-.08em;font-variant-numeric:tabular-nums;color:#9cf3db}.fps-reading>span{font:12px/1.7 monospace;letter-spacing:.1em}.fps-reading small{color:#90849e;letter-spacing:0;font:11px 'DM Sans',sans-serif}.lab-monitor canvas{width:100%;height:110px;margin-top:20px}.graph-key{display:flex;justify-content:space-between;font:10px monospace;color:#82758e}.lab-monitor>p{font-size:12px;line-height:1.7;color:#9a8da7;max-width:430px;margin:25px 0 0}.lab-controls{padding:40px;border-left:1px solid var(--demo-line)}.switch-row{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--demo-line);padding:22px 0;font-size:17px}.switch-row span span{display:block;font-size:12px;line-height:1.7;color:#9a8da7;margin-top:7px}.switch-row input{width:20px;height:20px;accent-color:#99f2dc;cursor:pointer}.outline-button{display:inline-flex;justify-content:center;padding:14px 20px;border:1px solid #81718f;background:transparent;border-radius:30px;color:#e9d5e7;font-size:13px;cursor:pointer}.outline-button:hover{border-color:#a5f7de;color:#a5f7de}.lab-controls .outline-button{margin-block:12px 20px}.quiet-link{display:block;color:#b5a4bd;text-decoration:underline;text-underline-offset:5px;font-size:12px}.tech-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:55px}.tech-notes article>span{font:10px monospace;color:#e5a0c9;letter-spacing:.1em}.tech-notes h3{font-size:21px;font-weight:500;letter-spacing:-.02em;margin:17px 0 12px}.tech-notes p{font-size:14px;line-height:1.8;color:#a89ab3;margin:0}.lab-links{display:flex;align-items:center;gap:30px;margin-top:45px}.night-outro{padding:140px 24px 160px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#44243d99,transparent 65%)}.night-outro .kicker{justify-content:center}.night-outro h2{font-size:clamp(80px,10vw,155px);line-height:.9;letter-spacing:-.065em;font-weight:450}.night-outro h2 em{color:#efa1d0}.night-outro .button{margin-top:40px}.outro-japanese{display:block;font-family:serif;font-size:30px;letter-spacing:1em;margin-top:70px;color:#9b6a8a}.demo-footer{display:flex;gap:30px;align-items:center;justify-content:space-between;border-top:1px solid var(--demo-line);padding-block:30px}.demo-footer>span{color:#9789a4;font:9px monospace;letter-spacing:.1em}.demo-footer .brand{font-size:23px}dialog{max-width:570px;width:calc(100% - 40px);padding:38px;border:1px solid #70556e;background:#181524;color:#eddfef;border-radius:10px}dialog::backdrop{background:#080812dc}dialog>button{float:right;border:0;background:transparent;color:#9dedda;cursor:pointer;padding:0 0 20px}dialog .kicker{clear:both}dialog h2{font-size:58px}dialog p:not(.kicker){font-size:15px;color:#b6a8c4;line-height:1.8}
.scene-suspended *{animation-play-state:paused!important}.motion-paused .journey-train{transform:translateX(-10%)!important}.motion-paused .weather-clouds{animation-play-state:paused}.motion-paused .layer-stack{transition:none}
@media(max-width:1100px){.layers-sticky{grid-template-columns:280px 1fr;gap:25px}.layer-stack{width:430px}.weather-workspace{grid-template-columns:1fr 300px}.viewfinder-top span:last-child{display:none}.viewfinder-bottom{display:block}.viewfinder-bottom span{display:block;margin-top:8px}.chapter-heading>p{max-width:250px}.lab-controls{padding:30px}.weather-console{padding:23px}}
@media(max-width:760px){.demo-wrap{width:calc(100% - 40px)}.layers-chapter{height:auto;padding:85px 0 30px}.layers-sticky{position:relative;top:auto;height:auto;min-height:0;display:flex;flex-direction:column;gap:0;align-items:stretch}.chapter-copy h2,.chapter-heading h2,.train-copy h2{font-size:58px}.chapter-copy>p:not(.kicker){max-width:100%;margin-bottom:25px}.layer-key{grid-template-columns:repeat(2,1fr)}.layer-stage{height:460px;overflow:hidden;margin-inline:-20px;perspective:1300px}.layer-stack{width:72%;transform:translateY(70px) rotateX(52deg) rotateZ(-21deg)}.depth-plane{transform:translateZ(calc(var(--i) * var(--spread) * 32px))}.depth-plane>span{font-size:7px}.stage-caption{font-size:8px;right:20px}.chapter-heading{display:block;margin-bottom:35px}.chapter-heading>p{max-width:none;font-size:14px;margin:25px 0 0}.weather-chapter{padding-block:70px 85px}.weather-workspace{grid-template-columns:1fr}.weather-scene{min-height:370px}.weather-console{border-left:0;border-top:1px solid var(--demo-line);padding:25px;gap:28px}.viewfinder-top,.viewfinder-bottom{left:18px;right:18px}.weather-footnote{display:block;font-size:9px;line-height:1.8}.weather-footnote>span{display:block}.presets button{font-size:12px}.train-copy{left:22px;top:12%}.train-sticky{min-height:600px;height:90svh}.train-chapter{height:130vh}.journey-train{width:260%;bottom:21%}.train-track-label{left:22px;right:22px;gap:12px;font-size:8px}.lab-chapter{padding-block:80px}.lab-grid{grid-template-columns:1fr}.lab-monitor{padding:30px 0}.lab-controls{border-left:0;border-top:1px solid var(--demo-line);padding:35px 0}.tech-notes{grid-template-columns:1fr;gap:35px;margin-top:40px}.lab-links{gap:20px;flex-wrap:wrap}.night-outro{padding-block:80px}.demo-footer{flex-wrap:wrap;gap:20px}.demo-footer>span:last-child{display:none}.hero-description br{display:none}.hero-description{max-width:330px}.hero-actions .text-link{font-size:12px;max-width:120px}.kicker{font-size:10px}}
@media(prefers-reduced-motion:reduce){.weather-clouds{animation:none}.journey-train{transform:translateX(-10%)!important}.layers-chapter,.train-chapter{height:auto}.layers-sticky,.train-sticky{position:relative}.train-sticky{height:800px}}

/* Keep the opening almost wordless. */
.hero-content{padding-top:clamp(140px,22vh,280px)}.hero-actions{margin-top:42px}.tokyo-headline{font-size:clamp(100px,11vw,174px)}.layers-sticky{min-height:680px}.layer-stage{max-height:calc(100vh - 70px)}.layer-key button{font:inherit;text-align:left;color:inherit;cursor:pointer;border:0;background:none;padding:4px 0}.layer-key button[aria-pressed=false]{opacity:.4;text-decoration:line-through}.layer-key button:hover{color:#9aefda}
@media(max-width:760px){.hero-content{padding-top:135px}.tokyo-headline{font-size:clamp(77px,18vw,110px)}.hero-actions{margin-top:35px}.layers-sticky{min-height:0}.layer-stage{max-height:none}}

.depth-plane{overflow:hidden}

/* Wheels and foreground rail share one baseline at every viewport size. */
.train-sticky{--rail-y:78%;--rail-overlap:clamp(14px,1.3vw,25px)}
.journey-train{bottom:calc(100% - var(--rail-y));z-index:0}
.journey-bridge{position:absolute;left:50%;top:calc(var(--rail-y) - var(--rail-overlap));width:100%;min-width:1000px;max-width:none;height:auto;transform:translateX(-50%);z-index:1;pointer-events:none}
.train-track-label{z-index:3;background:#101021a8;padding:15px 18px;border:1px solid #f8c8e218}
@media(max-width:760px){.train-sticky{--rail-y:78%;--rail-overlap:14px}.train-track-label{bottom:5%;padding:12px}}
.creator-logo{display:inline-flex;align-items:center;flex-shrink:0;line-height:0}.creator-logo img{width:180px;height:auto;display:block}.creator-signature{display:flex;gap:18px;align-items:center}.creator-signature>span{font:9px/1.5 monospace;letter-spacing:.13em;color:#9d8ca8}.creator-signature .creator-logo img{width:145px}.credits-creator{padding:22px 0;border-bottom:1px solid #70556e55;margin-bottom:24px}.credits-creator .creator-logo img{width:220px}.credits-creator p{margin:0 0 12px!important;font-size:12px!important}.lab-links{flex-wrap:wrap}.demo-footer .creator-signature{flex-direction:column;align-items:flex-start;gap:10px}
@media(max-width:760px){.header .creator-logo img{width:150px}.lab-links .creator-signature{flex-direction:column;align-items:flex-start;gap:10px}.demo-footer{align-items:end}.demo-footer .creator-logo img{width:145px}}

.demo-legal{display:flex;gap:18px}.demo-legal a:hover{color:#ff91d0}