:root{color-scheme:dark;--black:#000000;--white:#edf5f5;--cyan:#78eee9;--muted:#83a3ac}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--black)}
body{color:var(--white);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
::selection{background:var(--cyan);color:var(--black)}
.cinema{position:relative;isolation:isolate;overflow:hidden;width:100%;height:100svh;min-height:480px;background:var(--black)}
.generative-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.brand{position:absolute;left:clamp(24px,4.4vw,72px);top:clamp(26px,5.7vh,54px);z-index:3}
.wordmark{display:inline-flex;align-items:baseline;font-size:31px;font-weight:700;letter-spacing:-1.6px}
.wordmark span{color:var(--cyan)}.wordmark i{display:inline-block;width:5px;height:5px;background:var(--cyan);margin-left:4px}
.screen{position:absolute;inset:125px 6vw 135px;display:grid;place-items:center;pointer-events:none}
.scene{position:absolute;inset:0;display:grid;place-items:center;text-align:center;opacity:0;transform:translateY(9px);filter:blur(3px);transition:opacity 380ms ease,transform 650ms cubic-bezier(.16,.7,.25,1),filter 450ms ease;will-change:opacity,transform,filter;visibility:hidden}
.scene.is-current{visibility:visible}.scene.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}
.title{font-size:clamp(54px,7.8vw,120px);font-weight:400;letter-spacing:-.065em;line-height:1.08;margin:0;max-width:1200px;text-wrap:balance;text-shadow:0 4px 45px rgba(0,9,15,.24)}
.title span{color:var(--cyan)}
.idea-title{font-size:clamp(52px,6.8vw,100px);line-height:1.12}
.last-title{margin:0;font-weight:400;letter-spacing:-.035em;line-height:1.5;max-width:1000px;text-wrap:balance}
.last-title>span{display:block}
.familiar-line{font-size:clamp(24px,3vw,44px);color:#dce8e9}
.imagine-line{font-size:clamp(24px,3vw,44px);color:#bdd3d6}
.last-title .transform-word{font-size:clamp(70px,9.3vw,144px);line-height:1.2;letter-spacing:-.065em;color:var(--cyan);margin-top:8px}
.playback{position:absolute;left:clamp(24px,4.4vw,72px);right:clamp(24px,4.4vw,72px);bottom:max(30px,5.3vh);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.playback[hidden]{display:none}
.scene-counter{font:11px/1.5 monospace;letter-spacing:1.8px;color:#76939e;user-select:none}
#scene-number{color:#cfdfdf}.counter-divider{margin:0 12px;color:#496570}
.chapters{display:flex;gap:9px;align-items:center}
.chapter{display:grid;place-items:center;border:0;padding:0;width:45px;height:44px;background:transparent;cursor:pointer;border-radius:3px}
.chapter progress{appearance:none;-webkit-appearance:none;width:45px;height:2px;border:0;background:#29414b;border-radius:0;pointer-events:none}
.chapter progress::-webkit-progress-bar{background:#29414b}.chapter progress::-webkit-progress-value{background:#718e94}.chapter progress::-moz-progress-bar{background:#718e94}
.chapter.is-active progress::-webkit-progress-value{background:var(--cyan)}.chapter.is-active progress::-moz-progress-bar{background:var(--cyan)}
.chapter:hover progress,.chapter:hover progress::-webkit-progress-bar{background:#5a7d86}
.motion-toggle{justify-self:end;display:flex;gap:9px;align-items:center;justify-content:center;min-width:82px;min-height:44px;padding:10px 0 10px 10px;border:0;background:transparent;color:#b7ced2;font-size:11px;cursor:pointer;letter-spacing:.15px}
.motion-toggle:hover{color:#fff}.motion-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.2}.motion-toggle .play-icon{display:none}.motion-toggle.is-paused .pause-icon{display:none}.motion-toggle.is-paused .play-icon{display:block}
.screen-reader-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1800px){.title{font-size:132px}.idea-title{font-size:112px}}
@media(max-width:700px){.cinema{min-height:460px}.brand{top:30px;left:25px}.wordmark{font-size:28px}.screen{inset:112px 25px 138px}.title{font-size:clamp(45px,11.8vw,75px);letter-spacing:-.065em;line-height:1.14}.idea-title{font-size:clamp(40px,10.5vw,68px)}.familiar-line,.imagine-line{font-size:clamp(19px,5.3vw,31px);line-height:1.65;letter-spacing:-.045em}.last-title .transform-word{font-size:clamp(65px,16vw,98px);margin-top:14px}.playback{left:25px;right:25px;bottom:max(24px,env(safe-area-inset-bottom));gap:14px;grid-template-columns:1fr auto}.chapters{position:absolute;left:50%;bottom:65px;transform:translateX(-50%);gap:10px}.chapter,.chapter progress{width:38px}.scene-counter{font-size:10px}.motion-toggle{font-size:10px}.counter-divider{margin:0 10px}}
@media(max-height:550px) and (min-width:701px){.cinema{min-height:350px}.brand{top:22px}.screen{inset:85px 8vw 90px}.title{font-size:64px}.idea-title{font-size:52px}.familiar-line,.imagine-line{font-size:24px}.last-title .transform-word{font-size:74px}.playback{bottom:15px}}
@media(prefers-reduced-motion:reduce){.scene{transition:none;transform:none;filter:none}*{scroll-behavior:auto!important}}
