@font-face{font-family:NB International Pro;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/nbinternationalpro-regular.woff2)format("woff2")}@font-face{font-family:NB International Pro;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/nbinternationalpro-medium.woff2)format("woff2")}@font-face{font-family:NB International Pro Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/nbinternationalpro-mono.woff2)format("woff2")}@property --bg{syntax:"<color>";inherits:true;initial-value:#0a0a0a}@property --panel{syntax:"<color>";inherits:true;initial-value:#171717}@property --text{syntax:"<color>";inherits:true;initial-value:#fafafa}@property --text-2{syntax:"<color>";inherits:true;initial-value:#e6e6e6}@property --muted{syntax:"<color>";inherits:true;initial-value:#9a9a9a}@property --line{syntax:"<color>";inherits:true;initial-value:#fafafa1a}@property --accent{syntax:"<color>";inherits:true;initial-value:#21ffc0}@property --shadow{syntax:"<color>";inherits:true;initial-value:#00000073}@property --floor{syntax:"<color>";inherits:true;initial-value:#fafafa2b}@property --glow{syntax:"<color>";inherits:true;initial-value:#21ffc01a}@property --axis{syntax:"<color>";inherits:true;initial-value:#21ffc06b}:root{color-scheme:dark;--bg:#0a0a0a;--panel:#171717;--text:#fafafa;--text-2:#e6e6e6;--muted:#9a9a9a;--line:#fafafa1a;--mint:#21ffc0;--accent:#21ffc0;--shadow:#00000073;--floor:#fafafa2b;--glow:#21ffc01a;--axis:#21ffc06b;--sans:"NB International Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;--mono:"NB International Pro Mono", ui-monospace, Menlo, Consolas, monospace;--gutter:clamp(16px, 5vw, 76px);--head-h:90px;transition:--bg .7s,--panel .7s,--text .7s,--text-2 .7s,--muted .7s,--line .7s,--accent .7s,--shadow .7s,--floor .7s,--glow .7s,--axis .7s}:root[data-mode=day]{color-scheme:light;--bg:#fafafa;--panel:#ececec;--text:#0a0a0a;--text-2:#171717;--muted:#666;--line:#0a0a0a1a;--accent:#00a37a;--shadow:#00000024;--floor:#0a0a0a26;--glow:#00a37a1f;--axis:#00a37a80}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0}body{font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;overflow-x:hidden}p,h1,h2{margin:0}a{color:inherit}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}::selection{background:var(--mint);color:#0a0a0a}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}.hero{isolation:isolate;min-height:100svh;padding:calc(var(--head-h) + clamp(56px, 9vw, 132px)) var(--gutter) clamp(40px, 6vw, 88px);align-items:center;display:flex;position:relative;overflow:hidden}.scene{z-index:-1;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000 0%,#000 9% 90%,#0000 100%);mask-image:linear-gradient(#0000 0%,#000 9% 90%,#0000 100%)}.xray{z-index:-1;border:1px solid var(--accent);width:0;height:0;box-shadow:0 0 28px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);opacity:0;pointer-events:none;border-radius:50%;position:absolute;top:0;left:0}.head{z-index:2;padding:34px var(--gutter) 0;align-items:center;gap:16px;display:flex;position:absolute;inset:0 0 auto}.mark{--mh:24px;align-items:center;gap:calc(var(--mh) * .11);flex:none;height:56px;display:flex}.mark svg{height:var(--mh);fill:currentColor;display:block;overflow:visible}.mark-t{width:calc(var(--mh) * .92);color:var(--text)}.mark-c{width:calc(var(--mh) * .8716);color:var(--accent)}.who{gap:2px;min-width:0;margin-right:auto;display:grid}.who-name{letter-spacing:-.01em;font-size:18px}.who-role{color:var(--muted);font-size:16px}.clock{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}.modes{gap:6px;display:flex}.music,.modes button{width:40px;height:40px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;padding:0;transition:color .2s,background-color .2s;display:grid}.music:hover,.modes button:hover{color:var(--text)}.music{margin-right:-6px}.music[aria-pressed=true]{color:var(--accent)}.music rect{transform-box:fill-box;transform-origin:50%}.music[aria-pressed=true] rect{animation:.9s ease-in-out infinite alternate eq}.music[aria-pressed=true] rect:nth-child(3n+1){animation-duration:.7s;animation-delay:-.3s}.music[aria-pressed=true] rect:nth-child(3n+2){animation-duration:1.1s;animation-delay:-.6s}.music[aria-pressed=true] rect:nth-child(4n){animation-duration:.8s;animation-delay:-.15s}.music[aria-pressed=true] rect:nth-child(5n){animation-duration:.6s;animation-delay:-.45s}.music[data-state=loading]{animation:1s ease-in-out infinite blink}@keyframes eq{0%{transform:scaleY(.45)}to{transform:scaleY(1.6)}}@keyframes blink{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.music rect,.music{animation:none!important}}.modes button:before{content:"";background:0 0;border-radius:50%;grid-area:1/1;width:24px;height:24px;transition:background-color .2s}.modes button[aria-pressed=true]{color:var(--text)}.modes button[aria-pressed=true]:before{background:var(--panel)}.modes svg{grid-area:1/1;width:20px;height:20px;position:relative}.copy{width:100%;max-width:min(640px,47vw)}h1{letter-spacing:-.02em;text-wrap:balance;margin-bottom:18px;font-size:clamp(24px,2.2vw,31px);font-weight:400;line-height:1.2}.intro #intro-h,.intro .bio>p,.intro .copy .pills>*,.intro .stack{opacity:0;animation:.6s 6s forwards intro-failsafe}@keyframes intro-failsafe{to{opacity:1}}.intro-run .bio>p,.intro-run .copy .pills>*,.intro-run .stack{opacity:0}.untyped{color:#0000}.caret{border-left:.08em solid var(--accent);margin:0 -.04em;animation:1.06s step-end infinite caret}.caret.busy{animation:none}@keyframes caret{0%{opacity:1}50%{opacity:0}}.bio{gap:28px;display:grid}.bio p{max-width:60ch;color:var(--muted);font-size:clamp(17px,1.55vw,22px);line-height:1.65}.pills{flex-wrap:wrap;gap:12px;margin-top:44px;display:flex}.pill{background:var(--panel);color:var(--text-2);font-family:var(--sans);cursor:pointer;border:1px solid #0000;border-radius:999px;align-items:center;gap:10px;padding:11px 17px;font-size:17px;line-height:1.2;text-decoration:none;transition:color .2s,border-color .2s;display:inline-flex;position:relative}.pill:hover{color:var(--text);border-color:var(--line)}.pill svg{opacity:.7;width:16px;height:16px}.tip{border:1px solid var(--line);background:var(--panel);color:var(--text-2);font-family:var(--mono);letter-spacing:0;text-transform:none;white-space:nowrap;opacity:0;pointer-events:none;border-radius:10px;padding:8px 11px;font-size:13px;font-weight:400;line-height:1;text-decoration:none;transition:opacity .18s,transform .18s;position:absolute;bottom:calc(100% + 10px);left:0;transform:translateY(4px)}@media (hover:hover){.pill:hover .tip,.stack-more:hover .tip{opacity:1;transform:none}.stack li:hover>.tip{opacity:1;transform:translate(-50%)}}.pill:focus-visible .tip,.stack-more:focus-visible .tip,.stack-more[aria-expanded=true] .tip{opacity:1;transform:none}@media (hover:none){.pill .tip,.stack li>.tip{display:none}}.cta{flex-wrap:nowrap;align-items:center;gap:22px clamp(20px,2.4vw,36px);width:max-content;margin-top:44px;display:flex}.cta .pills{flex-wrap:nowrap;margin-top:0}.stack{color:var(--muted);align-items:center;gap:clamp(15px,1.5vw,22px);margin:0;padding:0;list-style:none;display:flex}.stack li{display:flex;position:relative}.stack svg{fill:currentColor;transition:color .2s;display:block}.stack li:hover>svg{color:var(--text)}.stack li>.tip{left:50%;transform:translate(-50%,4px)}.stack-more .tip{left:auto;right:0}.stack-more{color:var(--muted);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;text-underline-offset:4px;cursor:pointer;background:0 0;border:0;padding:2px 0;font-size:13px;text-decoration:underline;transition:color .2s;position:relative}.stack-more:hover,.stack-more[aria-expanded=true]{color:var(--text)}@media (width<=979px){.copy{max-width:640px}.cta{flex-wrap:wrap;column-gap:36px;width:auto}.stack{gap:22px}.hero{padding-top:calc(var(--head-h) + clamp(48px, 12vw, 96px));align-items:flex-start;padding-bottom:min(96vw,600px)}}@media (width<=560px){:root{--head-h:82px}.clock{display:none}.mark{--mh:21px;height:48px}.who-name{font-size:16px}.who-role{font-size:14px}}.work{padding:clamp(64px, 8vw, 120px) var(--gutter) 0;gap:clamp(112px,13vw,200px);display:grid}.case{gap:clamp(28px,3.4vw,44px);min-width:0;display:grid}.case-head{justify-content:space-between;align-items:flex-end;gap:16px 48px;display:flex}.case-head .case-meta{white-space:nowrap;flex:none}.case-meta .co{white-space:nowrap}.case-meta .co-mark{vertical-align:-4px;border-radius:4px;width:18px;height:18px;margin:0 8px 0 2px;display:inline-block}.case-intro{gap:12px;min-width:0;max-width:640px;display:grid}.case h2,.foot h2{letter-spacing:-.02em;text-wrap:balance;font-size:clamp(22px,1.9vw,27px);font-weight:400;line-height:1.2}.case-intro p,.foot-cta p{max-width:60ch;color:var(--muted);font-size:clamp(16px,1.3vw,18px);line-height:1.6}.case-meta,.foot-bar{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.gallery,.row{gap:10px;display:grid}.row.c21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.row.c12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.row.c11{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{--pad:clamp(20px, 5.5%, 72px);min-width:0;padding:var(--pad);background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 55%, var(--bg)) 0%, var(--panel) 100%);isolation:isolate;border-radius:16px;justify-content:center;align-items:center;margin:0;display:flex;position:relative;overflow:hidden}.panel>.floor{z-index:-1;fill:none;stroke-width:1px;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000 42%,#000000bf 75%,#000 100%);mask-image:linear-gradient(#0000 42%,#000000bf 75%,#000 100%)}.floor .lines{stroke:var(--floor)}.floor .axis{stroke:var(--axis)}.panel:after{content:"";z-index:-1;background:radial-gradient(60% 42% at 50% 100%, var(--glow), transparent 78%);pointer-events:none;position:absolute;inset:0}.panel img,.panel video{max-width:100%;height:auto;display:block}.panel>img,.panel>video,.panel>.phones{width:var(--w,100%)}.panel.bleed-b{align-items:flex-end;padding-bottom:0}.panel.bleed-r{justify-content:flex-start;padding-right:0}.panel.bleed-r>img,.panel.bleed-r>video{max-width:none;width:var(--w,115%)}.panel.clip{aspect-ratio:var(--ar,16 / 7);align-items:flex-start;padding-bottom:0}.panel.clip.fill{aspect-ratio:auto;contain:size}.ar-1{--ar:1 / 1}.w90{--w:90%}.w80{--w:80%}.w70{--w:70%}.w60{--w:60%}.w50{--w:50%}.w120{--w:120%}.shot{box-shadow:0 24px 60px var(--shadow)}.shot.browser{border-radius:.9%/1.44%}.shot.phone{border-radius:11.3%/5.2%}.clip-toggle{z-index:1;color:#fafafa;backdrop-filter:blur(8px);cursor:pointer;opacity:0;background:#0a0a0a99;border:0;border-radius:50%;place-items:center;width:36px;height:36px;padding:0;transition:opacity .2s;display:grid;position:absolute;bottom:12px;right:12px}.clip-toggle svg{width:16px;height:16px}.panel:hover .clip-toggle,.clip-toggle:focus-visible,.clip-toggle[data-state=paused]{opacity:1}@media (hover:none){.clip-toggle{opacity:1}}.phones{--n:3;--g:clamp(10px, 2.4vw, 32px);justify-content:center;align-items:flex-start;gap:var(--g);flex-wrap:wrap;display:flex}.phones>.shot{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));min-width:0}.phones.n2{--n:2}.phones.n4{--n:4}.phones.n5{--n:5}.phones.stagger>:nth-child(2n){margin-top:12%}@media (width<=760px){.case-head{flex-direction:column;align-items:flex-start}.case-head .case-meta{white-space:normal}.row.c21,.row.c12,.row.c11{grid-template-columns:minmax(0,1fr)}.panel{border-radius:12px}.phones.n4{--n:2}.phones.w50{--w:90%}.phones.n5{--n:3}.phones.n5>:nth-child(n+4){display:none}.panel.clip,.panel.clip.fill{aspect-ratio:4/3;contain:none}}.foot{padding:clamp(120px, 14vw, 200px) var(--gutter) 36px;gap:clamp(80px,10vw,140px);display:grid}.foot-cta{gap:12px;max-width:640px;display:grid}.foot .pills{margin-top:28px}.foot-bar{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:20px;display:flex}.foot-bar p{margin:0}.foot-bar a{text-decoration:none}.foot-bar a:hover{color:var(--text)}.toast{z-index:50;border:1px solid var(--line);background:var(--panel);max-width:calc(100% - 32px);color:var(--text-2);opacity:0;pointer-events:none;border-radius:999px;padding:10px 16px;font-size:14px;transition:opacity .2s,transform .2s;position:fixed;bottom:24px;left:50%;transform:translate(-50%,12px)}.toast.show{opacity:1;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important}}
