@font-face{
  font-family:"Nekst";
  src:url("../fonts/Nekst-Regular.woff2") format("woff2"),url("../fonts/Nekst-Regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
/* Manrope, served locally (fallback when Nekst is missing; no network needed) */
@font-face{font-family:"Manrope";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/manrope-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/manrope-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/manrope-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{
  --black:#000;
  --white:#fff;
  --gold:#d9ba84;
  --grey:#afafaf;
  --grey-dark:#4b4b4b;
  --line:rgba(255,255,255,.1);
  --fill:rgba(255,255,255,.05);
  --ease:cubic-bezier(.215,.61,.355,1);
  --font:"Nekst","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--black);color:var(--white);overflow:hidden}
body{font-family:var(--font);font-weight:400;-webkit-font-smoothing:antialiased;letter-spacing:-.02em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* ---------- stage: fixed 1920x1080, scaled to fit ---------- */
#viewport{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:50% 50%;overflow:hidden;background:var(--black)}
#gl{position:absolute;inset:0;width:1920px;height:1080px;opacity:0;transition:opacity .8s linear;pointer-events:none;z-index:1}
#gl.on{opacity:1}

/* ---------- chrome ---------- */
.chrome{position:absolute;z-index:20;font-size:20px;color:var(--grey);pointer-events:none}
.chrome-tl{top:48px;left:140px;color:var(--white)}
.chrome-tr{top:48px;right:140px}
.chrome-bl{bottom:44px;left:140px}
.chrome-br{bottom:44px;right:140px;font-variant-numeric:tabular-nums}
.chrome-br .count{color:var(--gold)}
#progress{position:absolute;left:0;bottom:0;height:1px;background:var(--gold);width:0;z-index:20;transition:width .6s var(--ease),opacity .5s linear}
#offline-flag{position:absolute;top:48px;left:50%;transform:translateX(-50%);z-index:20;font-size:18px;color:var(--gold);opacity:0;transition:opacity .3s linear}
#offline-flag.on{opacity:1}

/* ---------- slides ---------- */
.slide{position:absolute;inset:0;padding:150px 140px 130px;z-index:5;opacity:0;visibility:hidden;transition:opacity .5s linear,visibility 0s linear .5s}
.slide.active{opacity:1;visibility:visible;transition:opacity .5s linear .15s,visibility 0s}
.notes{display:none}

/* type scale */
.display{font-size:184px;line-height:100%;letter-spacing:-.045em}
.h1{font-size:120px;line-height:100%;letter-spacing:-.04em}
.h2{font-size:80px;line-height:105%;letter-spacing:-.035em}
.h3{font-size:40px;line-height:110%;letter-spacing:-.02em}
.lead{font-size:40px;line-height:125%;letter-spacing:-.02em;max-width:1080px}
.body{font-size:28px;line-height:140%;color:var(--grey);max-width:760px}
.small{font-size:24px;line-height:140%;color:var(--grey)}
.gold{color:var(--gold)}
.muted{color:var(--grey-dark)}
.todo{border-bottom:1px dashed var(--gold);color:var(--gold)}

/* heading line reveal */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block;transform:translateY(105%);transition:transform .9s var(--ease)}
.slide.active .ln>span{transform:none;transition-delay:calc(var(--i,0) * 90ms + 200ms)}
.fade{opacity:0;transition:opacity .6s linear}
.slide.active .fade{opacity:1;transition-delay:.55s}

/* steps */
[data-step]{transition:opacity .5s linear,color .5s linear}
[data-step]:not(.on){opacity:0}

/* chapter slides */
.chapter{display:flex;flex-direction:column;justify-content:flex-end}
.chapter .num{font-size:24px;color:var(--gold);margin-bottom:28px;font-variant-numeric:tabular-nums}
.chapter .rule{height:1px;background:var(--gold);width:640px;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.slide.active.chapter .rule{transform:scaleX(1);transition-delay:.2s}
.chapter .h1{margin-top:44px}
.chapter .sub{margin-top:28px;font-size:36px;color:var(--grey);letter-spacing:-.02em}

/* generic helpers */
.kicker{font-size:20px;color:var(--grey);margin-bottom:40px}
.kicker .count{color:var(--gold);margin-right:24px}
.row{display:flex;gap:64px}
.col{flex:1;min-width:0}
.bottom{position:absolute;left:140px;right:140px;bottom:130px}
.hair{border-top:1px solid var(--line);padding-top:28px}
.item-title{font-size:32px;line-height:115%;margin-bottom:14px;letter-spacing:-.02em}
.item-text{font-size:24px;line-height:140%;color:var(--grey)}

/* hero */
.hero .display{font-size:156px}
.hero .display .ln:nth-child(2) span{color:var(--gold)}
.hero .lead{margin-top:56px;max-width:860px;color:var(--grey)}
.hero .meta{position:absolute;left:140px;bottom:130px}

/* agenda */
.agenda{display:grid;grid-template-columns:1fr 1fr;column-gap:120px;row-gap:0;margin-top:64px;list-style:none;counter-reset:ch}
.agenda li{display:flex;gap:32px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line);font-size:36px;letter-spacing:-.02em}
.agenda li .n{color:var(--gold);font-size:22px;min-width:36px;font-variant-numeric:tabular-nums}
.agenda li .d{display:block;font-size:24px;color:var(--grey);margin-top:6px}

/* clients */
.clients{display:flex;flex-wrap:wrap;column-gap:72px;row-gap:8px;font-size:96px;letter-spacing:-.04em;line-height:110%;margin-top:28px}
.clients span:nth-child(even){color:var(--grey-dark)}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:120px;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.timeline .dot{width:19px;height:19px;border-radius:50%;border:1px solid var(--gold);background:var(--black);position:relative;margin-bottom:36px}
.timeline .now .dot{background:var(--gold)}
.timeline .when{font-size:22px;color:var(--gold);margin-bottom:14px}

/* 16.7 ms */
.budget{font-size:320px;letter-spacing:-.06em;line-height:90%;color:var(--gold);font-variant-numeric:tabular-nums}

/* easing demo */
.ease-demo{margin-top:48px;display:grid;grid-template-columns:360px 1fr;row-gap:30px;column-gap:48px;align-items:center;max-width:1640px}
.ease-demo .name{font-size:32px}
.ease-demo .feel{display:block;font-size:24px;color:var(--grey);margin-top:6px}
.track{position:relative;height:1px;background:var(--line)}
.track .dot{position:absolute;left:0;top:-14px;width:28px;height:28px;border-radius:50%;background:var(--gold)}
.replay{margin-top:36px;font-size:22px;padding:14px 28px;border:1px solid var(--line);border-radius:40px;transition:border-color .3s linear,color .3s linear}
.replay:hover{border-color:var(--gold);color:var(--gold)}

/* 3D fundamentals list */
.steps-list{list-style:none;margin-top:56px;max-width:720px}
.steps-list li{padding:24px 0;border-top:1px solid var(--line);color:var(--grey-dark);transition:color .5s linear}
.steps-list li .t{display:flex;gap:28px;align-items:baseline;font-size:40px;letter-spacing:-.02em}
.steps-list li .t .n{font-size:22px;color:inherit;min-width:32px}
.steps-list li .x{font-size:24px;line-height:140%;margin-top:10px;padding-left:60px;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .4s linear}
.steps-list li.on{color:var(--white)}
.steps-list li.on .t .n{color:var(--gold)}
.steps-list li.cur .x{max-height:120px;opacity:1;color:var(--grey)}
.canvas-caption{position:absolute;right:140px;bottom:130px;text-align:right}

/* pipeline */
.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;margin-top:110px;list-style:none}
.pipeline li{border-top:1px solid var(--gold);padding-top:32px}
.pipeline .n{font-size:22px;color:var(--gold);margin-bottom:22px;display:block}

/* project slides */
.project{display:grid;grid-template-columns:470px 1fr;gap:72px;align-items:start;padding-top:150px}
.project .h2{font-size:68px}
.project .body{margin-top:32px;font-size:26px}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.tags span{font-size:24px;padding:8px 16px;border:1px solid var(--line);border-radius:40px;color:var(--grey)}
.project .foot{margin-top:40px}

/* embeds */
.embed{position:relative;width:100%;height:760px;display:flex;flex-direction:column}
.embed-view{position:relative;flex:1;background:var(--fill);border:1px solid var(--line);overflow:hidden}
.embed-view iframe,.embed-view video{position:absolute;inset:0;width:100%;height:100%;border:0;display:none;background:var(--black)}
.embed-view video{object-fit:cover}
.embed[data-mode="live"] iframe{display:block}
.embed[data-mode="video"] video.ready{display:block}
.embed-view iframe{pointer-events:none}
.embed.interact .embed-view iframe{pointer-events:auto}
.embed.interact .embed-view{border-color:var(--gold)}
.embed-bar{display:flex;align-items:center;gap:24px;height:64px;font-size:18px;color:var(--grey)}
.embed-bar .host{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.embed-bar button,.embed-bar a{padding:8px 16px;border:1px solid var(--line);border-radius:40px;text-decoration:none;transition:border-color .3s linear,color .3s linear}
.embed-bar button:hover,.embed-bar a:hover{border-color:var(--gold);color:var(--gold)}
.embed-bar button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.embed-bar button[hidden]{display:none}

/* placeholders */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 32px;background:
  linear-gradient(135deg,transparent 49.9%,var(--line) 50%,transparent 50.1%),
  linear-gradient(45deg,transparent 49.9%,var(--line) 50%,transparent 50.1%),var(--fill)}
.ph .l{font-size:22px;color:var(--white)}
.ph .p{font-size:16px;color:var(--grey);margin-top:6px}
.ph .p a{color:var(--gold)}
.ph[hidden]{display:none}
.media{position:relative;background:var(--fill);border:1px solid var(--line);overflow:hidden}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* duality */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:80px;height:500px;margin-top:40px}
.duo .left{position:relative}
.duo .cap{position:absolute;left:0;bottom:0}
.duo .cap .h3,.duo .right .h3{margin-bottom:10px}
.duo .right{display:flex;flex-direction:column;gap:28px}
.duo .right .media{flex:1}

/* resolution bars */
.bars{margin-top:56px;display:flex;flex-direction:column;gap:32px}
.bar .lab{display:flex;justify-content:space-between;font-size:26px;margin-bottom:16px;font-variant-numeric:tabular-nums}
.bar .lab span:last-child{color:var(--grey)}
.bar .b{height:48px;background:var(--gold);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease)}
.bar.on .b{transform:scaleX(1)}
.bar[data-step]:not(.on){opacity:1}
.bar[data-step]:not(.on) .lab{opacity:0}

/* omega grid */
.gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:20px;height:760px}

/* full bleed */
.bleed{padding:0}
.bleed .media{position:absolute;inset:0;border:0}
.bleed .over{position:absolute;left:140px;right:140px;bottom:130px;z-index:2}
.bleed .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.85));z-index:1;pointer-events:none}
/* full-screen presentation video: hide the deck chrome */
.chrome{transition:opacity .5s linear}
#stage.film .chrome,#stage.film #progress{opacity:0}
.film .media{background:var(--black)}
.film .media video{object-fit:contain}

/* notes overlay */
#notes{position:absolute;left:140px;right:140px;bottom:96px;z-index:30;background:rgba(0,0,0,.9);border:1px solid var(--gold);padding:28px 32px;font-size:24px;line-height:140%;color:var(--white);display:none}
#notes.on{display:block}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;transition-delay:0s!important}
}