@font-face{font-family:"Inter";src:url(assets/fonts/Inter-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/Inter-Medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/Inter-SemiBold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/Inter-Bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"InterD";src:url(assets/fonts/InterDisplay-Medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"InterD";src:url(assets/fonts/InterDisplay-SemiBold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"InterD";src:url(assets/fonts/InterDisplay-Bold.woff) format("woff");font-weight:700;font-display:swap}
:root{--ink:#1d1d1f;--mute:#6e6e73;--mute2:#86868b;--tile:#f5f5f7;--line:#d2d2d7;
  --grad:linear-gradient(90deg,#2f6bff 0%,#8a4dff 50%,#ff4f9a 100%);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff;color:var(--ink);font-family:"Inter",-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone}
.nw{white-space:nowrap}
.D{font-family:"InterD","Inter";font-weight:700;letter-spacing:-.04em}

/* scale */
html.stage{--hero:150px;--h2:112px;--h3:40px;--sub:34px;--body:24px;--small:19px;--px:136px;--py:96px;--r:32px;--gap:22px}
html.feed{--hero:52px;--h2:40px;--h3:22px;--sub:18px;--body:16px;--small:13px;--px:20px;--py:72px;--r:22px;--gap:10px}
@media (min-width:600px){html.feed{--hero:84px;--h2:64px;--h3:28px;--sub:23px;--body:18px;--small:15px;--px:48px;--py:96px;--r:28px;--gap:14px}}
h1,h2,h3{font-family:"InterD","Inter";font-weight:700;color:var(--ink)}
h2{font-size:var(--h2);line-height:1.02;letter-spacing:-.042em}
h3{font-size:var(--h3);line-height:1.1;letter-spacing:-.025em;font-weight:600}
.sub{font-size:var(--sub);line-height:1.3;color:var(--mute);font-weight:500;letter-spacing:-.015em}
.eb{font-size:calc(var(--sub)*.72);font-weight:600;color:var(--mute);letter-spacing:-.01em}
.p{font-size:var(--body);line-height:1.45;color:var(--mute);letter-spacing:-.01em}

/* deck */
html.stage,html.stage body{height:100%;overflow:hidden}
html.stage #deck{position:fixed;inset:0;overflow:hidden;background:#fff}
.slide{position:relative;background:#fff}
html.stage .slide{position:absolute;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;transform:scale(var(--s,1));
  opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s .9s}
html.stage .slide.active{opacity:1;visibility:visible;transition:opacity .9s var(--ease),visibility 0s}
html.feed .slide{overflow:hidden}
.inner{position:relative;z-index:2;height:100%;padding:var(--py) var(--px);display:flex;flex-direction:column}
html.feed .inner{height:auto}
.hd{display:flex;flex-direction:column;gap:18px}
.hd.c{align-items:center;text-align:center}
html.feed .hd{gap:10px}

/* reveal */
[data-a]{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease);transition-delay:calc(var(--d,0)*1ms)}
[data-a="z"]{transform:scale(.9)}
.in [data-a]{opacity:1;transform:none}
html.feed [data-zoom]{transition:none}

/* glow behind products */
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(0);opacity:.9}
.glow.v{background:radial-gradient(closest-side,rgba(138,77,255,.28),rgba(138,77,255,0))}
.glow.b{background:radial-gradient(closest-side,rgba(47,107,255,.24),rgba(47,107,255,0))}
.glow.p{background:radial-gradient(closest-side,rgba(255,79,154,.22),rgba(255,79,154,0))}

/* product render with reflection */
.prod{position:relative}
.prod img.m{position:relative;z-index:2;width:100%;filter:drop-shadow(0 50px 40px rgba(30,20,60,.20))}
.prod img.r{position:absolute;z-index:1;left:0;width:100%;top:100%;margin-top:-6%;transform:scaleY(-1);opacity:.16;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 38%);mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 38%)}
.float{animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* glass (only over colour) */
.glass{background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(36px) saturate(180%);backdrop-filter:blur(36px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 20px 50px rgba(30,20,60,.12)}

/* bento */
.tile{background:var(--tile);border-radius:var(--r);position:relative;overflow:hidden}
.tile .tt{position:absolute;left:36px;top:32px;right:36px;z-index:3}
.tile .tt h3{font-size:34px}
.tile .tt .p{font-size:20px;margin-top:6px}
html.feed .tile .tt{left:18px;top:16px;right:18px}
html.feed .tile .tt h3{font-size:var(--h3)}
html.feed .tile .tt .p{font-size:var(--small);margin-top:3px}

/* chrome */
#ui{position:fixed;z-index:50;pointer-events:none;inset:0}
#count{position:absolute;right:26px;bottom:22px;font-size:13px;font-weight:600;color:var(--mute2);font-variant-numeric:tabular-nums;letter-spacing:.04em}
#count b{color:var(--ink)}
#bar{position:absolute;left:0;top:0;height:2px;background:var(--ink);width:0;transition:width .9s var(--ease)}
#nav{position:absolute;left:24px;bottom:16px;display:flex;gap:6px;pointer-events:auto}
#nav button{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:rgba(232,232,237,.75);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:background .3s}
#nav button:hover{background:rgba(210,210,215,.9)}
html.feed #nav,html.feed #bar{display:none}
html.feed #count{right:12px;bottom:12px;font-size:11px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
html.shot #ui{display:none}

/* brand */
.brand{display:flex;align-items:center;gap:12px;font-family:"InterD";font-weight:700;font-size:28px;letter-spacing:-.03em}
.brand i{width:34px;height:34px;border-radius:10px;background:#1d1d1f;position:relative}
.brand i::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--grad)}
.brand span{color:var(--mute);font-weight:600}
html.feed .brand{font-size:19px;gap:9px}
html.feed .brand i{width:24px;height:24px;border-radius:7px}
html.feed .brand i::after{inset:6px}