@font-face{font-family:'LW Title';src:url('./assets/fonts/LWTitle-title.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'STIX Two Math';src:url('./assets/fonts/STIXTwoMath-subset.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Butler Free';src:url('./assets/fonts/Butler-Free-SBd.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{color-scheme:light;--ink:#1d2632;--muted:#707b84;--page:#f5f7f6;--accent:#59baa5;--brand-lambda:#ebb0f2;--environment:#f5f7f6;--header-ink:#1d2632;--header-glass:rgba(255,255,255,.72);--header-line:rgba(29,38,50,.18);--header-hover:rgba(255,255,255,.93);--header-hover-line:rgba(29,38,50,.32);--header-shadow:rgba(16,25,36,.13);--transition-t:0;--font-display:'LW Title',Inter,ui-sans-serif,system-ui,sans-serif;--font-math:'STIX Two Math','Latin Modern Math','Libertinus Math','Noto Serif','DejaVu Serif',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--environment);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-header{position:fixed;z-index:20;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:24px clamp(22px,4vw,72px);pointer-events:none;color:var(--header-ink)}
.site-header a{pointer-events:auto}
.wordmark{position:relative;display:grid;align-items:center;font-size:18px;font-weight:700;white-space:nowrap}
.wordmark>span{grid-area:1/1;transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.brand-site-name{font-family:'Butler Free',Georgia,serif;font-size:20px;font-weight:600;letter-spacing:.045em;line-height:1.15;opacity:0;transform:translateY(4px)}
.brand-project-name{opacity:1;transform:translateY(0)}
.brand-lockup{display:inline-flex;align-items:baseline;gap:0}
.brand-lambda{font-family:var(--font-math);font-style:italic;font-weight:700;font-size:1.3em;line-height:1;letter-spacing:0;margin-right:-.04em;color:var(--brand-lambda)}
.brand-word{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;margin-left:.02em;margin-right:-.06em}
.opening-visible .brand-site-name{opacity:1;transform:translateY(0)}
.opening-visible .brand-project-name{opacity:0;transform:translateY(-4px)}
.mark-dot,.title-period{color:var(--accent)}
.play-now{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:9px 14px 9px 17px;border:1px solid var(--header-line);border-radius:999px;background:var(--header-glass);color:var(--header-ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.095em;white-space:nowrap;box-shadow:0 2px 9px rgba(16,25,36,.035);transition:background .3s ease,border-color .3s ease,box-shadow .35s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.play-now:hover,.play-now:focus-visible{background:var(--header-hover);border-color:var(--header-hover-line);box-shadow:0 8px 24px var(--header-shadow);transform:translateY(-2px)}
.play-now:active{transform:translateY(0);box-shadow:0 3px 10px var(--header-shadow)}
.play-text{display:inline-block;line-height:1.15;min-width:0}
.mir-mark{display:block;width:20px;height:20px;flex:none;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.play-now:hover .mir-mark,.play-now:focus-visible .mir-mark{transform:translateX(2px) scale(1.06)}
.feature{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;padding:124px clamp(24px,5vw,80px) 80px;overflow:hidden;background:radial-gradient(circle at 68% 50%,#ffffff 0,#f5f7f6 55%,#eef5f2 100%)}
.feature-copy{z-index:1;max-width:520px;width:100%}
.chapter{display:block;color:#50897e;font-size:11px;font-weight:770;letter-spacing:.24em}
.chapter span{padding:0 8px;color:#9caeaa}
.feature-copy h2{font-family:var(--font-display);font-size:clamp(60px,7.1vw,132px);line-height:.92;letter-spacing:.025em;font-weight:700;margin:34px 0 34px;text-wrap:balance}
.description{max-width:460px;font-size:clamp(20px,2.1vw,29px);line-height:1.35;letter-spacing:-.035em;margin:0;text-wrap:balance}
.note{max-width:440px;color:var(--muted);font-size:13px;line-height:1.55;letter-spacing:.01em;margin:36px 0 0;text-wrap:pretty}
.feature-media{--dx:0px;--dy:0px;--ix:0px;--iy:0px;--mx:50%;--my:50%;position:relative;aspect-ratio:3/2;width:100%;min-width:0;border-radius:16px;background:transparent;padding:0;box-shadow:0 16px 36px rgba(18,38,43,.08),0 2px 6px rgba(18,38,43,.04);transform:translate3d(var(--dx),var(--dy),0);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;will-change:transform}
.feature-media:hover{box-shadow:0 22px 48px rgba(18,38,43,.12),0 4px 10px rgba(18,38,43,.05)}
.media-inner{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;overflow:hidden;background:#f4f7f8}
video{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus-x,0%) var(--focus-y,50%);transition:opacity .3s ease}
.media-inner>video{transform:translate3d(var(--ix),var(--iy),0) scale(1.02);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.video-cover{display:none!important}
.media-glow{position:absolute;inset:0;background:radial-gradient(circle 280px at var(--mx) var(--my),rgba(255,255,255,.16) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.02) 65%,transparent 100%);mix-blend-mode:screen;mix-blend-mode:plus-lighter;opacity:0;pointer-events:none;transition:opacity .35s ease}
.feature-media:hover .media-glow{opacity:1}
.motion-toggle{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(17,34,43,.18);border-radius:50%;background:rgba(255,255,255,.82);color:#243746;font-size:15px;line-height:1;font-family:system-ui,-apple-system,sans-serif;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 8px rgba(0,0,0,.06);transition:background .25s,transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
.motion-toggle:hover{background:#ffffff;border-color:#59baa5;box-shadow:0 4px 16px rgba(89,186,165,.25);transform:scale(1.08)}

/* Inward-facing instructional copy alignment */
.feature.media-right .feature-copy{justify-self:center;text-align:right}
.feature.media-right .description{margin-left:auto;margin-right:0}
.feature.media-right .note{margin-left:auto;margin-right:0}
.feature.media-left .feature-copy{grid-column:2;justify-self:center;text-align:left}
.feature.media-left .description{margin-left:0;margin-right:auto}
.feature.media-left .note{margin-left:0;margin-right:auto}
.feature.media-left .feature-media{grid-column:1;grid-row:1}

/* Scroll-entry animation for instructional copy */
.feature-copy .chapter,
.feature-copy h2,
.feature-copy .description,
.feature-copy .note{
  opacity:0;
  will-change:transform,opacity;
  transition:opacity .46s cubic-bezier(.22,1,.36,1),transform .46s cubic-bezier(.22,1,.36,1);
}
.feature.media-right .feature-copy:not(.is-revealed) .chapter,
.feature.media-right .feature-copy:not(.is-revealed) h2,
.feature.media-right .feature-copy:not(.is-revealed) .description,
.feature.media-right .feature-copy:not(.is-revealed) .note{
  transform:translate3d(-30px,0,0);
}
.feature.media-left .feature-copy:not(.is-revealed) .chapter,
.feature.media-left .feature-copy:not(.is-revealed) h2,
.feature.media-left .feature-copy:not(.is-revealed) .description,
.feature.media-left .feature-copy:not(.is-revealed) .note{
  transform:translate3d(30px,0,0);
}
.feature-copy.is-revealed .chapter,
.feature-copy.is-revealed h2{
  opacity:1;
  transform:translate3d(0,0,0);
  transition-delay:0ms;
}
.feature-copy.is-revealed h2{transition-delay:45ms}
.feature-copy.is-revealed .description{
  opacity:1;
  transform:translate3d(0,0,0);
  transition-delay:130ms;
}
.feature-copy.is-revealed .note{
  opacity:1;
  transform:translate3d(0,0,0);
  transition-delay:225ms;
}

.feature.dark{color:#eff3f7;background:radial-gradient(circle at 35% 50%,#17202b 0,#0b111b 54%,#070b12 100%)}
.feature.dark .chapter{color:#a995ea}
.feature.dark .chapter span{color:#667182}
.feature.dark .note{color:#929caa}
.feature.dark .feature-media{background:transparent;box-shadow:0 20px 48px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.3)}
.feature.dark .feature-media:hover{box-shadow:0 26px 56px rgba(0,0,0,.42),0 4px 12px rgba(0,0,0,.35)}
.feature.dark .media-inner{background:#080d15}
.feature.dark .video-cover{background-color:#080d15}
.feature.dark .media-glow{mix-blend-mode:screen;mix-blend-mode:plus-lighter;background:radial-gradient(circle 300px at var(--mx) var(--my),rgba(255,255,255,.15) 0%,rgba(255,255,255,.07) 30%,rgba(255,255,255,.018) 65%,transparent 100%)}
.feature.dark .feature-media:hover .media-glow{opacity:1}
.feature.dark .motion-toggle{color:#eef2f7;background:rgba(18,25,37,.78);border-color:rgba(225,236,243,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.feature.dark .motion-toggle:hover{background:rgba(24,34,50,.92);border-color:#9b83e8;box-shadow:0 4px 20px rgba(155,131,232,.3);transform:scale(1.08)}
.feature.dark .title-period{color:#9b83e8}
:focus-visible{outline:2px solid #257f70;outline-offset:4px}
@media(max-width:820px){
  .site-header{padding:18px 22px}
  .feature{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:38px;padding:124px 22px 60px}
  .feature-copy,.feature.media-right .feature-copy,.feature.media-left .feature-copy{padding:0;max-width:none;text-align:left;justify-self:stretch}
  .description,.feature.media-right .description,.feature.media-left .description{margin-left:0;margin-right:0}
  .chapter{font-size:10px}
  .feature-copy h2{font-size:clamp(58px,16vw,100px);margin:24px 0}
  .description{font-size:22px}
  .note{margin-top:20px}
  .feature-media{width:100%;max-width:720px;align-self:center}
  .media-glow{display:none!important}
}
@media(max-width:480px){.feature{justify-content:flex-start;padding-top:145px;gap:34px}.feature-media{border-radius:14px}.media-inner{border-radius:14px}.motion-toggle{right:10px;bottom:10px;width:38px;height:38px}.site-header{padding-inline:14px}.brand-site-name{font-size:16px}.wordmark{font-size:16px}.play-now{gap:6px;padding:9px 10px;font-size:10px;letter-spacing:.055em}.mir-mark{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .feature-media,video,.media-glow,.play-now,.motion-toggle,.video-cover,.wordmark>span,.mir-mark{transition:none!important;transform:none!important}
  .media-glow{display:none!important}
  .feature-copy .chapter,
  .feature-copy h2,
  .feature-copy .description,
  .feature-copy .note,
  .extra-copy .extra-index,
  .extra-copy h2,
  .extra-copy p,
  .extra-copy small{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  .extra-media,.extra-media video{transition:none!important;transform:none!important}
  .extra-media .media-glow{display:none!important}
}

/* Two cinematic acts share only the compositing system; each clip owns its camera values. */
.hero{position:relative;isolation:isolate;min-height:100svh;overflow:hidden}
.hero-media{position:absolute;inset:0;background-position:center;background-size:cover;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--hero-fade,.7s) linear;will-change:transform,opacity}
.hero-video.is-panning{animation:hero-pan linear both}
@keyframes hero-pan{from{transform:translate3d(var(--from-x),var(--from-y),0) scale(var(--hero-scale))}to{transform:translate3d(var(--to-x),var(--to-y),0) scale(var(--hero-scale))}}
.hero-wash{position:absolute;inset:0;z-index:1;pointer-events:none}
.opening{background:#f6f8f8;color:#1d2632}
.opening .hero-wash{background:radial-gradient(ellipse 42vw 36vh at 0% 0%,rgba(18,30,44,.085) 0%,rgba(18,30,44,.03) 55%,transparent 100%),radial-gradient(ellipse 36vw 34vh at 100% 0%,rgba(18,30,44,.075) 0%,rgba(18,30,44,.025) 55%,transparent 100%),linear-gradient(90deg,rgba(247,250,251,.28),transparent 50%),linear-gradient(0deg,rgba(247,250,251,.7),transparent 42%)}
.opening::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle 280px at var(--hero-x,50%) var(--hero-y,50%),rgba(255,255,255,.16) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.02) 65%,transparent 100%);mix-blend-mode:screen;mix-blend-mode:plus-lighter;opacity:0;transition:opacity .35s ease}
.opening.is-hovered::after{opacity:1}
.hero-name{position:absolute;z-index:2;left:clamp(24px,5vw,92px);bottom:clamp(44px,7vh,94px);margin:0;font-family:var(--font-display);line-height:.82;letter-spacing:.035em;font-weight:700;text-shadow:0 2px 25px rgba(255,255,255,.42)}
.opening .hero-name{font-size:clamp(78px,11.5vw,190px)}
.hero-name-link{color:inherit;cursor:pointer;transition:filter .28s ease,transform .28s cubic-bezier(.16,1,.3,1)}
.hero-name-link:hover,.hero-name-link:focus-visible{filter:drop-shadow(0 0 18px rgba(235,176,242,.45));transform:translateY(-2px)}
.modulation{background:#090e16;color:#f0f4f7}
.modulation .hero-media{inset:0;border:0;border-radius:0;box-shadow:none}
.modulation .hero-wash{background:linear-gradient(0deg,rgba(4,8,15,.79),transparent 35%),linear-gradient(90deg,rgba(4,8,15,.28),transparent 38%)}
.modulation .hero-name{font-size:clamp(58px,10vw,150px);letter-spacing:.035em;text-shadow:0 2px 30px rgba(4,8,15,.8)}
.hero-motion{position:absolute;z-index:3;right:clamp(22px,4vw,70px);bottom:clamp(25px,5vh,60px);display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(30,45,57,.2);border-radius:50%;background:rgba(255,255,255,.82);color:#1d2632;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 8px rgba(0,0,0,.06);font-size:15px;line-height:1;font-family:system-ui,-apple-system,sans-serif;cursor:pointer;transition:background .25s,transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
.hero-motion:hover{background:#ffffff;border-color:#59baa5;box-shadow:0 4px 16px rgba(89,186,165,.25);transform:scale(1.08)}
.modulation .hero-motion{color:#f2f5f7;background:rgba(18,25,37,.78);border-color:rgba(225,236,243,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.scroll-cue{position:absolute;z-index:2;bottom:clamp(29px,5vh,64px);left:50%;transform:translateX(-50%);display:grid;place-items:center;color:#344e58;opacity:.68;cursor:pointer;text-decoration:none;transition:opacity .25s ease,transform .25s cubic-bezier(.16,1,.3,1),color .25s ease}
.scroll-cue:hover,.scroll-cue:focus-visible{opacity:1;color:#1d2632;transform:translateX(-50%) translateY(3px)}
.scroll-cue svg{display:block;width:20px;height:16px;fill:currentColor}
.theme-threshold{height:30svh;position:relative;margin-top:-9svh;margin-bottom:-2px;z-index:1;background:linear-gradient(180deg,#f5f7f6 0%,#e8ebec 18%,#bcc3cb 42%,#5a6473 68%,#1f2735 88%,#090e16 100%)}
@media(max-width:820px){.opening .hero-name{font-size:clamp(70px,18vw,150px);bottom:90px}.modulation .hero-name{font-size:clamp(45px,11vw,90px);bottom:95px}.theme-threshold{height:24svh;margin-top:-7svh;margin-bottom:-2px}}
@media(max-width:480px){.opening .hero-media{inset:23vh 8px auto;height:46vh;border-radius:18px;box-shadow:0 25px 60px rgba(44,65,74,.14)}.opening .hero-name{font-size:16vw;left:36px;bottom:110px}.hero-motion{right:20px;bottom:28px}.modulation .hero-name{font-size:11vw;left:20px;bottom:115px}.scroll-cue{bottom:31px}}
@media(prefers-reduced-motion:reduce){.hero-video{transition:none!important}.hero-video.is-panning{animation:none!important;transform:none!important}.hero-motion{display:none}}

/* The pace compresses after the eight-part instructional spine. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.extras{position:relative;overflow:hidden;color:#eef2f7;background:#070b12;padding:13vh 0 0}
.extras::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 18%,rgba(105,74,170,.12),transparent 34%),radial-gradient(circle at 12% 74%,rgba(49,136,124,.08),transparent 29%);pointer-events:none}
.extras-intro{position:relative;display:flex;align-items:center;gap:24px;margin:0 clamp(24px,5vw,80px) 5vh;color:#8e9bb0;font-size:13px;font-weight:500;letter-spacing:.02em}
.extras-intro i{display:block;flex:1;height:1px;background:linear-gradient(90deg,rgba(142,155,177,.35),transparent)}
.extra{position:relative;display:grid;grid-template-columns:minmax(230px,.42fr) minmax(0,1fr);align-items:center;gap:clamp(30px,5vw,90px);min-height:72svh;padding:7vh clamp(22px,5vw,92px)}
.extra-copy{position:relative;z-index:2;max-width:440px}
.extra-index{display:block;color:#9989ce;font-size:10px;font-weight:760;letter-spacing:.23em}
.extra-index b{padding:0 8px;color:#596273;font-weight:400}
.extra-copy h2{margin:26px 0 24px;font:700 clamp(48px,6.4vw,104px)/.9 var(--font-display);letter-spacing:.025em}
.extra-copy h2 span{color:#9b83e8}
.extra[data-extra=notebook] .extra-copy h2{font-size:clamp(48px,5vw,76px)}
.extra-copy p{max-width:400px;margin:0;color:#bdc5d0;font-size:clamp(17px,1.45vw,22px);line-height:1.45;letter-spacing:-.018em;text-wrap:pretty}
.extra-copy small{display:block;max-width:400px;margin-top:25px;color:var(--muted);font-size:13px;font-weight:400;line-height:1.55;letter-spacing:.01em;text-wrap:pretty}
.extra[data-extra=molecules] .extra-copy small{color:#d2b271;font-size:10px;font-weight:780;letter-spacing:.22em;text-transform:uppercase}

.extra-media{--dx:0px;--dy:0px;--ix:0px;--iy:0px;--mx:50%;--my:50%;position:relative;aspect-ratio:var(--extra-aspect);min-width:0;max-height:66svh;overflow:hidden;border:1px solid rgba(180,202,220,.14);border-radius:clamp(18px,2vw,30px);background:#090e16;box-shadow:0 38px 100px rgba(0,0,0,.38);transform:translate3d(var(--dx),var(--dy),0);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;will-change:transform}
.extra-media:hover{box-shadow:0 46px 120px rgba(0,0,0,.48)}
.extra-media video{position:absolute;inset:0;object-fit:cover;object-position:var(--focus-x) var(--focus-y);transform:translate3d(var(--ix),var(--iy),0) scale(1.02);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.extra-media .media-glow{position:absolute;inset:0;background:radial-gradient(circle 300px at var(--mx) var(--my),rgba(255,255,255,.15) 0%,rgba(255,255,255,.07) 30%,rgba(255,255,255,.018) 65%,transparent 100%);mix-blend-mode:screen;mix-blend-mode:plus-lighter;opacity:0;pointer-events:none;transition:opacity .35s ease}
.extra-media:hover .media-glow{opacity:1}
.extra-cover{display:none!important}
.extra-motion{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(225,236,243,.22);border-radius:50%;background:rgba(18,25,37,.78);color:#f0f3f7;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 10px rgba(0,0,0,.25);font-size:15px;line-height:1;font-family:system-ui,-apple-system,sans-serif;cursor:pointer;transition:background .25s,transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
.extra-motion:hover{background:rgba(24,34,50,.92);border-color:#9b83e8;box-shadow:0 4px 20px rgba(155,131,232,.3);transform:scale(1.08)}
.motion-icon{display:block;width:19px;height:19px}
.motion-toggle,.hero-motion,.extra-motion{background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.44);box-shadow:0 4px 18px rgba(3,9,18,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.motion-toggle:hover,.hero-motion:hover,.extra-motion:hover{background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.62);box-shadow:0 6px 20px rgba(3,9,18,.14);transform:scale(1.04)}
.feature.dark .motion-toggle,.modulation .hero-motion,.extra-motion{background:rgba(12,22,36,.25);border-color:rgba(235,243,249,.34);color:#f4f7fa;box-shadow:0 4px 18px rgba(0,0,0,.1)}
.feature.dark .motion-toggle:hover,.modulation .hero-motion:hover,.extra-motion:hover{background:rgba(23,34,51,.42);border-color:rgba(235,243,249,.54);box-shadow:0 6px 20px rgba(0,0,0,.16)}
.extra-left{grid-template-columns:minmax(0,1fr) minmax(230px,.42fr)}
.extra-left .extra-media{grid-column:1;grid-row:1}
.extra-left .extra-copy{grid-column:2}
.extra-overlap,.extra-wide{display:flex;min-height:84svh;flex-direction:column;align-items:stretch;gap:24px;padding:6vh clamp(24px,5vw,80px);position:relative}
.extra-overlap .extra-copy,.extra-wide .extra-copy{width:min(520px,70vw);max-width:none;margin-bottom:-32px;z-index:3}
.extra-overlap .extra-media,.extra-wide .extra-media{width:100%;max-width:1200px;aspect-ratio:16/9;max-height:none;align-self:center}
.extra-overlap .extra-media video,.extra-wide .extra-media video{object-fit:contain;background:#090e16}
.extra-overlap .extra-cover,.extra-wide .extra-cover{background-size:contain}
.extra-future{min-height:82svh;grid-template-columns:minmax(340px,.45fr) minmax(0,1fr);padding-bottom:10vh}
.extra-future .extra-copy h2{font-size:clamp(48px,5vw,76px)}
.extra-future .extra-media{width:100%;max-height:70svh}

/* The live composition fills the viewport throughout its short finale. */
.finale{position:relative;height:160svh;background:#070b12;color:#eef2f7}
.finale-sticky{position:sticky;top:0;height:100svh;overflow:clip}
.finale-frame{position:absolute;inset:0;overflow:hidden;border:0;border-radius:0;background:#080b11;box-shadow:none}
.finale-live,.finale-cinematic{position:absolute;inset:0;outline:none!important;border:none!important}
.finale-live{z-index:1;opacity:0;transition:opacity .8s cubic-bezier(.2,.8,.2,1)}
.finale-live iframe{display:block;width:100%;height:100%;border:0!important;outline:none!important;background:#080b11}
.finale-frame:focus,.finale-frame:focus-visible,.finale-live:focus,.finale-live:focus-visible,.finale-live iframe:focus,.finale-live iframe:focus-visible{outline:none!important}
.finale-cinematic{z-index:2;background:#080b11;transition:opacity .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.finale[data-mini-theme=light] .finale-cinematic{background:#f5f5f8}
.finale-cinematic picture,.finale-cinematic img{display:block;width:100%;height:100%}.finale-cinematic img{object-fit:cover}
.finale-cinematic .finale-poster-light{display:none}
.finale[data-mini-theme=light] .finale-cinematic .finale-poster-dark{display:none}
.finale[data-mini-theme=light] .finale-cinematic .finale-poster-light{display:block}
.finale-touch-scroll,.finale-exit{display:none}
.finale-skip{position:absolute;z-index:8;left:24px;top:-100px;padding:12px 16px;border-radius:999px;background:#f2f5f7;color:#111925;font-size:12px;font-weight:700;letter-spacing:.06em}
.finale-skip:focus{top:24px}
.finale-loader{position:absolute;z-index:10;top:clamp(20px,4vh,44px);left:50%;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.finale.is-loading .finale-loader,.finale.is-ready .finale-loader{opacity:1}
.finale-loader-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:rgba(8,13,22,.82);border:1px solid rgba(235,243,249,.18);color:#f0f4f7;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.095em;white-space:nowrap;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 4px 24px rgba(0,0,0,.38);transition:background .35s ease,border-color .35s ease,color .35s ease}
.finale[data-mini-theme=light] .finale-loader-pill{background:rgba(255,255,255,.86);border-color:rgba(29,38,50,.18);color:#1d2632;box-shadow:0 4px 20px rgba(16,25,36,.12)}
.finale-mir-mark{display:block;width:18px;height:18px;flex:none;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.finale-loader-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#d97ce8;box-shadow:0 0 8px rgba(217,124,232,.7);transition:background .3s ease,box-shadow .3s ease}
.finale.is-ready .finale-loader-dot{background:#5ee7d8;box-shadow:0 0 10px rgba(94,231,216,.8)}
.finale.is-ready .finale-loader.is-faded{opacity:0;transform:translateX(-50%) translateY(-8px);pointer-events:none}
.after-finale{height:1px;background:#070b12;outline:0}

@media(max-width:820px){
  .extras{padding-top:10vh}.extras-intro{margin-bottom:7vh}
  .extra,.extra-left,.extra-future{display:flex;min-height:74svh;flex-direction:column;align-items:stretch;justify-content:center;gap:30px;padding:6vh 22px}
  .extra-left .extra-copy,.extra-left .extra-media{order:initial}
  .extra-copy{max-width:620px}.extra-copy h2{font-size:clamp(48px,13vw,82px);margin:20px 0}.extra-copy p{font-size:18px}
  .extra-media{width:100%;max-height:none;border-radius:20px}
  .extra-overlap,.extra-wide{min-height:76svh;gap:20px}
  .extra-overlap .extra-copy,.extra-wide .extra-copy{width:auto;margin-left:0;margin-bottom:0}
  .extra-overlap .extra-media,.extra-wide .extra-media{width:100%;max-height:none}
  .extra-future{min-height:80svh;padding-bottom:10vh}
  .finale{height:150svh}
}
@media(max-width:480px){
  .extras-intro{margin-inline:22px}.extra{min-height:72svh}.extra-overlap,.extra-wide{min-height:70svh}.extra-future{min-height:76svh}
  .extra-index{font-size:9px}.extra-copy h2{font-size:12.5vw}.extra-copy p{font-size:16px;line-height:1.42}
  .extra-media{border-radius:16px}.extra-motion{right:10px;bottom:10px;width:38px;height:38px}
  .finale{height:140svh}
}
@media(prefers-reduced-motion:reduce){
  .extra-cover,.extra-motion,.finale-live,.finale-cinematic{transition:none!important}.extra-motion{display:grid}.finale{height:140svh}
}

/* Video Lightbox Modal */
.feature-media,.extra-media{cursor:zoom-in}
.feature-media .motion-toggle,.extra-media .extra-motion{cursor:pointer}
.video-lightbox{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .35s ease}
.video-lightbox.is-open{pointer-events:auto;opacity:1}
.video-lightbox-backdrop{position:absolute;inset:0;background:rgba(4,7,13,.84);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);opacity:0;transition:opacity .4s cubic-bezier(.16,1,.3,1)}
.video-lightbox.is-open .video-lightbox-backdrop{opacity:1}
.video-lightbox-dialog{position:fixed;overflow:hidden;background:#080d15;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 35px 100px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);will-change:left,top,width,height,border-radius;transition:left .42s cubic-bezier(.16,1,.3,1),top .42s cubic-bezier(.16,1,.3,1),width .42s cubic-bezier(.16,1,.3,1),height .42s cubic-bezier(.16,1,.3,1),border-radius .42s ease}
.video-lightbox-video{display:block;width:100%;height:100%;object-fit:cover;background:#080d15}
.video-lightbox-close{position:absolute;top:16px;right:16px;z-index:10;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(225,236,243,.25);background:rgba(18,25,37,.82);color:#f0f3f7;font-size:16px;line-height:1;font-family:system-ui,-apple-system,sans-serif;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:scale(.8);transition:all .25s cubic-bezier(.16,1,.3,1)}
.video-lightbox.is-open .video-lightbox-close{opacity:1;transform:scale(1);transition-delay:.12s}
.video-lightbox-close:hover{background:#ffffff;color:#080d15;border-color:white;transform:scale(1.1);box-shadow:0 4px 18px rgba(0,0,0,.4)}
@media(prefers-reduced-motion:reduce){.opening .hero-wash::after{display:none}.hero-name-link,.motion-toggle,.hero-motion,.extra-motion{transition:none!important}}

/* Explicit clip layers keep accelerated video surfaces within their rounded
   bounds on WebKit, including during zoom/pan and lightbox transitions. */
.media-inner,.extra-media,.hero-media,.video-lightbox-dialog{
  isolation:isolate;
  -webkit-mask-image:linear-gradient(#fff,#fff);
}
.media-inner{clip-path:inset(0 round 16px)}
.extra-media{clip-path:inset(0 round clamp(18px,2vw,30px))}
.video-lightbox-dialog{clip-path:inset(0 round 16px)}
.video-lightbox-video{transform:none}
/* Touch devices gain nothing from persistent pointer parallax layers. */
@media(any-pointer:coarse){
  .feature-media,.extra-media{transform:none;will-change:auto}
  .media-inner>video,.extra-media video{transform:none;will-change:auto}
  .video-lightbox-backdrop{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
}
@media(pointer:coarse) and (max-width:900px){
  .finale-touch-scroll{display:block;position:absolute;z-index:5;inset:0 0 94px;touch-action:pan-y pinch-zoom;pointer-events:auto}
  .finale.is-touch-rotating .finale-touch-scroll{pointer-events:none}
}
@media(pointer:coarse) and (max-width:700px){
  .finale-touch-scroll{bottom:80px}
  .finale.is-ready .finale-exit{display:grid;place-items:center;position:absolute;z-index:7;left:max(12px,env(safe-area-inset-left));bottom:max(96px,calc(96px + env(safe-area-inset-bottom)));width:44px;height:44px;padding:0;border:0;border-radius:14px;background:rgba(8,11,17,.9);color:#e3e7f0;cursor:pointer;touch-action:manipulation}
  .finale[data-mini-theme=light] .finale-exit{background:rgba(245,245,248,.94);color:#263043}
  .finale-exit svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}
@media(max-width:820px){.extra-media{clip-path:inset(0 round 20px)}}
@media(max-width:480px){
  .media-inner{clip-path:inset(0 round 14px)}
  .extra-media{clip-path:inset(0 round 16px)}
  .opening .hero-media{clip-path:inset(0 round 18px)}
}

/* Release polish: visible motion, quiet navigation, and the live-field handoff. */
.play-now{min-height:54px;padding:11px 20px 11px 23px;gap:13px;font-size:13px;letter-spacing:.075em}
.play-now .mir-mark{width:25px;height:25px}
.opening .hero-motion,.opening .scroll-cue{z-index:4}
.scroll-cue{opacity:.78}
.scroll-cue svg{animation:scroll-invite 2.8s infinite}
@keyframes scroll-invite{0%,8%,39%,100%{transform:translateY(0)}19%,30%{transform:translateY(7px)}48%,58%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}}
.feature.dark[data-instructional=audio]{background:linear-gradient(180deg,transparent 72%,#070b12 100%),radial-gradient(circle at 35% 50%,#17202b 0,#0b111b 54%,#070b12 100%)}
.extra[data-extra=molecules]{background:linear-gradient(180deg,transparent 68%,#080b11 100%)}
body[data-mini-theme=light] .extra[data-extra=molecules]{background:linear-gradient(180deg,transparent 60%,#f5f5f8 100%)}
body[data-mini-theme=light] .finale,body[data-mini-theme=light] .after-finale{background:#f5f5f8}
body[data-mini-theme=light] .finale-frame,body[data-mini-theme=light] .finale-live iframe{background:#f5f5f8}
.extras-links{position:absolute;top:calc(13vh + 30px);right:clamp(22px,5vw,80px);z-index:3;display:flex;align-items:center;gap:7px}
.extras-links a{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(184,196,213,.18);border-radius:50%;background:rgba(24,31,44,.42);color:#b8c4d5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease}
.extras-links a:hover,.extras-links a:focus-visible{color:#fff;border-color:rgba(184,196,213,.5);background:rgba(53,62,81,.8);transform:translateY(-2px)}
.extras-links a:focus-visible{outline:2px solid #78e1f0;outline-offset:3px}
.extras-links svg{display:block;width:19px;height:19px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.extras-links svg[fill="currentColor"]{stroke:none}
.extras-links .icon-dot,.extras-links .icon-play{fill:currentColor;stroke:none}
@media(max-width:820px){.extras-links{top:calc(10vh + 30px)}}
@media(max-width:480px){.extras-links{right:18px;gap:4px}.extras-links svg{width:18px;height:18px}}
.video-lightbox-pause{position:absolute;bottom:16px;right:16px;z-index:10;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(225,236,243,.25);background:rgba(18,25,37,.82);color:#f0f3f7;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:scale(.8);transition:opacity .25s ease,transform .25s ease,background .25s ease}
.video-lightbox.is-open .video-lightbox-pause{opacity:1;transform:scale(1);transition-delay:.12s}
.video-lightbox-pause:hover,.video-lightbox-pause:focus-visible{background:#fff;color:#080d15;transform:scale(1.08)}
.video-lightbox-pause .motion-icon{width:18px;height:18px}
.finale-loader-pill{padding:12px;min-width:50px;min-height:50px;justify-content:center}
.finale-mir-mark{width:26px;height:26px}
.finale-loader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.finale-loader-dot{display:none}
@media(max-width:700px){
  .opening .hero-media{inset:0;height:100%;border-radius:0;box-shadow:none;clip-path:none}
  .opening .hero-video{object-fit:cover}
  .opening .hero-name{left:clamp(20px,5vw,36px);bottom:110px}
  .play-now{min-height:50px;padding:9px 13px 9px 15px;gap:8px;font-size:11px}
  .play-now .mir-mark{width:22px;height:22px}
  .source-link{top:20px;right:22px}
}
@media(max-width:480px){
  .opening .hero-media{inset:0;height:100%;border-radius:0;box-shadow:none;clip-path:none}
  .play-now{min-height:48px;padding:8px 11px 8px 13px;gap:7px;font-size:10.5px;letter-spacing:.04em}
  .play-now .mir-mark{width:20px;height:20px}
  .source-link span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.source-link svg,.video-lightbox-pause{transition:none!important}}
.feature-media,.extra-media{will-change:auto}
@media(max-width:700px){.finale-loader{top:max(92px,env(safe-area-inset-top) + 82px)}}