:root{color-scheme:dark;--bg:#101012;--surface:#202125;--border:#36373c;--text:#fafafa;--muted:#a6a6af;--lavender:#a5b4fc;--purple:#d8b4fe;--pink:#f472b6;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--lavender);outline-offset:7px}::selection{background:#a5b4fc;color:#101012}.page-width{width:min(1280px,100%);margin-inline:auto;padding-inline:40px}.skip-link{position:fixed;left:24px;top:-100px;z-index:100;background:white;color:black;padding:12px}.skip-link:focus{top:15px}
.header{position:sticky;top:0;z-index:50;background:#101012c9;backdrop-filter:blur(22px);border-bottom:1px solid #ffffff0b}.header-inner{height:96px;max-width:1280px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;letter-spacing:-.6px}.brand-symbol{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#fafafa;color:#101012;font-size:30px;font-weight:800;line-height:1;padding-bottom:4px}.brand-dot{font-size:10px;vertical-align:super;margin-left:3px}.header nav{display:flex;gap:34px;align-items:center;font-size:13px;color:#a6a6af}.header nav a:hover{color:white}.header nav span{font-size:12px;margin-left:3px}.nav-work{color:white;position:relative}.nav-work:after{content:'';width:4px;height:4px;border-radius:50%;background:var(--lavender);position:absolute;bottom:-11px;left:50%}.header-cta{font-size:12px;border:0;padding:12px 0;background:transparent;display:flex;gap:16px;align-items:center;transition:color .2s}.header-cta:hover{color:#d8b4fe}.header-cta span{transition:transform .25s}.header-cta:hover span{transform:translate(2px,-2px)}
.hero{min-height:720px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding-top:65px;padding-bottom:95px;gap:10px}.hero-copy{position:relative;z-index:5;}.intro{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1px;color:#b5b5bf;display:flex;align-items:center;gap:12px;margin-bottom:27px}.intro-line{height:1px;width:24px;background:#d8b4fe}h1{font-size:72px;line-height:1.07;letter-spacing:-4px;font-weight:600;margin:0 0 27px;white-space:nowrap}.gradient{background:linear-gradient(110deg,var(--lavender),var(--purple) 57%,var(--pink));background-clip:text;-webkit-background-clip:text;color:transparent}.hero-description{font-size:16px;line-height:1.9;color:#a9a9b2;max-width:450px;margin:0 0 32px;text-wrap:pretty}.primary-cta{display:inline-flex;align-items:center;gap:35px;background:#fafafa;color:#17171a;border-radius:9px;padding:17px 22px;font-weight:600;font-size:13px;transition:transform .2s,background .2s}.primary-cta:hover{transform:translateY(-3px);background:#e9e5ff}.primary-cta span{font-size:20px;font-weight:400}.hero-footnote{display:flex;gap:9px;align-items:center;font-size:10px;font-family:'JetBrains Mono',monospace;color:#787882;margin-top:33px}.tiny-star{color:#c4b5fd;font-size:16px}
.visual{position:relative;height:500px;isolation:isolate;background:radial-gradient(ellipse at center,#b89af810 0,transparent 66%)}.orbit{position:absolute;left:50%;top:49%;width:440px;height:440px;transform:translate(-50%,-50%);border:1px dashed #ffffff09;border-radius:50%;pointer-events:none}.desk-label{position:absolute;top:7px;left:92px;color:#85858e;font:11px 'JetBrains Mono',monospace;transform:rotate(-6deg)}.desk-label>span{font-size:25px;display:inline-block;transform:rotate(25deg);margin-right:8px}.drag-position{position:absolute;top:50%;left:50%;translate:-50% -50%;width:220px;z-index:2;will-change:transform}.tools-position{margin-left:-151px;margin-top:6px}.workflow-position{margin-left:151px;margin-top:6px}.photo-position{width:268px;z-index:4}.card-enter{}.tools-enter{animation-delay:.18s}.photo-enter{animation-delay:.32s}.workflow-enter{animation-delay:.46s}.note,.polaroid{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 18px 35px #0005;transition:box-shadow .2s}.note:active,.polaroid:active,.is-dragging .note,.is-dragging .polaroid{cursor:grabbing;box-shadow:0 28px 60px #0008}.note{background:linear-gradient(135deg,#25262a,#1d1e22);border:1px solid #3b3c42;border-radius:3px;padding:21px 20px 16px;font-family:'JetBrains Mono',monospace;min-height:266px}.tools-card{transform:rotate(-12deg)}.workflow-card{transform:rotate(16deg)}.note-top{display:flex;align-items:center;justify-content:space-between;color:#91919b}.note-icon{font-size:22px;color:#b9b8c4}.note-number{font-size:8px;color:#80808a}.note h2{font-size:15px;font-weight:500;margin:21px 0 14px;letter-spacing:-.5px}.note-rule{height:1px;background:#ffffff13}.tool-list,.process-list{list-style:none;padding:0;margin:17px 0 22px;display:grid;gap:14px;font-size:10px;color:#c5c5ce}.tool-list li{display:flex;align-items:center;gap:10px}.tool-list li>span{width:15px;text-align:center}.code-icon{color:#b8baf5}.spark-icon{color:#d8b4fe;font-size:17px}.figma-icon{display:grid;grid-template-columns:5px 5px;grid-template-rows:5px 5px 5px;width:10px!important;gap:0;margin-left:2px;margin-right:3px}.figma-icon i{background:#f67260;border-radius:3px 0 0 3px}.figma-icon i:nth-child(2){background:#ff9f95;border-radius:0 3px 3px 0}.figma-icon i:nth-child(3){background:#ae81ff}.figma-icon i:nth-child(4){background:#6ccbf4;border-radius:50%}.figma-icon i:nth-child(5){background:#6ce4ad;border-radius:3px 0 3px 3px}.note-bottom{font-size:7px;color:#868690;display:flex;justify-content:space-between;align-items:center}.note-bottom span{font-size:17px}.process-list{gap:17px}.process-list li{display:flex;gap:11px;white-space:nowrap}.process-list li>span{color:#9292a0;font-size:8px}.polaroid{margin:0;background:#eeeeeb;border:1px solid #fff;border-radius:3px;padding:11px 11px 0;transform:rotate(6deg);color:#33343b}.photo-wrap{position:relative;aspect-ratio:1;overflow:hidden;background:#b8a6a0}.photo-wrap img{width:100%;height:100%;object-fit:cover;filter:saturate(.55);pointer-events:none}.photo-label{position:absolute;bottom:10px;left:10px;background:#17171a78;border:1px solid #ffffff35;color:#fff;padding:6px 7px;font:7px 'JetBrains Mono',monospace;border-radius:3px;backdrop-filter:blur(8px)}.polaroid figcaption{height:55px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;font:12px 'JetBrains Mono',monospace;letter-spacing:-.4px}.drawn-star{font-size:30px;color:#5b5570}.desk-caption{position:absolute;bottom:4px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:9px;color:#777780;font:9px 'JetBrains Mono',monospace}.desk-caption>span{font-size:19px;color:#b7adcf}#reset-cards{border:0;border-left:1px solid #34343c;background:none;color:#b3afc2;font:inherit;padding:4px 0 4px 10px;cursor:pointer}#reset-cards:hover{color:white}
.work{padding-top:67px;padding-bottom:90px;border-top:1px solid #ffffff10;scroll-margin-top:30px}.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px}.section-eyebrow{font:10px 'JetBrains Mono',monospace;color:#92929c;margin:0 0 15px}.section-header h2{font-size:40px;letter-spacing:-1.7px;font-weight:500;margin:0}.lavender{color:var(--lavender)}.work-count{font:10px 'JetBrains Mono',monospace;color:#92929c;padding-bottom:7px}.work-count>span{font-size:22px;margin-left:14px;color:#bbb4d0}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:49px 28px}.project-image{aspect-ratio:16/9;position:relative;border-radius:10px;overflow:hidden;background:#222229;border:1px solid #ffffff0c}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}.project:hover img{transform:scale(1.035)}.project-open{position:absolute;right:20px;bottom:20px;display:grid;place-items:center;background:#fff;color:#101012;width:40px;height:40px;border-radius:50%;font-size:22px;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}.project:hover .project-open,.project:focus-visible .project-open{opacity:1;transform:translateY(0)}.project-caption{display:flex;align-items:center;justify-content:space-between;padding-top:19px}.project-caption h3{font-size:18px;letter-spacing:-.5px;font-weight:500;margin:0 0 8px}.project-caption p{font-size:10px;font-family:'JetBrains Mono',monospace;color:#92929c;margin:0;line-height:1.6}.project-caption>span{font:10px 'JetBrains Mono',monospace;color:#6d6d78}.all-work{display:flex;align-items:center;justify-content:center;gap:18px;width:fit-content;border-bottom:1px solid #585563;padding-bottom:9px;margin:55px auto 0;font-size:13px}.all-work:hover{color:var(--lavender)}footer{border-top:1px solid #ffffff10;min-height:120px;display:flex;align-items:center;justify-content:space-between;font-size:12px}footer p{font:10px 'JetBrains Mono',monospace;color:#85858f}.footer-brand{font-weight:600}
.project-entry{min-width:0}.project-entry>.project{display:block}.project-description{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;line-height:1.9;color:#a6a6af;margin:15px 0 0;max-width:95%;text-wrap:pretty}.project-topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}.project-topics a{display:inline-flex;align-items:center;gap:10px;font-family:Inter,"PingFang SC",sans-serif;font-size:11px;line-height:1.5;padding:7px 11px;border:1px solid #3a3a43;border-radius:6px;color:#bcbcc7;transition:background .2s,color .2s,border-color .2s}.project-topics a:hover{color:white;background:#282630;border-color:#a5b4fc}.project-topics a>span{color:#a5b4fc}.more-work{padding-top:60px}.project-entry h3{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.5}.project-caption{gap:16px;align-items:flex-start}.project-caption>span{flex-shrink:0;padding-top:5px}
@keyframes copy-in{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}@keyframes card-in{from{opacity:0;transform:translateY(65px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1400px){.hero{min-height:770px}}
@media(max-width:1150px){h1{font-size:58px;letter-spacing:-3px}.hero{gap:0;min-height:690px}.visual{transform:scale(.84);transform-origin:center}.hero-description{max-width:380px;font-size:15px}.page-width,.header-inner{padding-inline:32px}}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr);padding-top:65px;padding-bottom:35px;gap:20px}.hero-copy{max-width:600px}.hero-description{max-width:500px}.visual{width:620px;max-width:100%;height:470px;justify-self:center;transform:scale(.94)}.header nav{gap:22px}.work{padding-top:45px}.work-count{display:none}h1{font-size:64px;letter-spacing:-3px}.hero-footnote{margin-top:25px}}
@media(max-width:600px){.page-width,.header-inner{padding-inline:23px}.header-inner{height:76px}.brand{font-size:14px;gap:8px}.brand-symbol{width:30px;height:30px;font-size:25px}.header nav{gap:20px;font-size:12px}.header-cta{display:none}.hero{padding-top:51px;overflow:hidden;gap:0}.intro{font-size:9px;margin-bottom:23px}h1{font-size:clamp(37px,9.1vw,54px);letter-spacing:-2px;line-height:1.12;margin-bottom:22px}.hero-description{font-size:14px;line-height:1.85;margin-bottom:26px}.hero-footnote{font-size:8px}.primary-cta{padding:14px 18px;font-size:12px}.visual{max-width:none;width:560px;transform:scale(.65);height:460px;margin-top:-38px;margin-bottom:-85px;transform-origin:center}.desk-caption{font-size:11px}.desk-label{font-size:12px}.work{padding-top:36px;padding-bottom:55px}.section-header h2{font-size:32px}.section-header{margin-bottom:25px}.work-grid{grid-template-columns:1fr;gap:32px}.project-image{border-radius:7px}.project-caption h3{font-size:17px}.project-open{opacity:1;transform:none;width:34px;height:34px;right:14px;bottom:14px}footer{flex-wrap:wrap;gap:10px;min-height:110px;padding-block:24px}footer p{order:3;width:100%;margin:0;font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.project:hover img{transform:none}}

.hero-copy h1{margin-top:0}.tool-list,.process-list{font-size:12px;gap:14px}.note h2{font-size:16px}.process-list li>span{font-size:10px}.project-description{font-size:14px}.desk-caption{bottom:12px}#reset-cards{font-size:11px;border-left:0}.polaroid figcaption{font-size:15px}
.hero{isolation:isolate}.hero-backdrop{position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 75% 40%,#a5b4fc05,transparent 68%)}.ink-field{display:block;width:100%;height:100%;pointer-events:none}.visual{z-index:1}
.project-image{scale:var(--cover-scale,1);transform-origin:50% 100%}.project-image img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}.project:hover img{transform:scale(1.05)}@media(prefers-reduced-motion:reduce){.project-image{scale:1}.project:hover img{transform:none}}

.is-pointer-focus:focus-visible{outline:none}

.project-image .project-preview-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;pointer-events:none;transition:opacity .05s linear,transform 1.1s cubic-bezier(.2,.7,.2,1)}.project-image .project-preview-frame.is-active{opacity:1}.project-image .project-open{z-index:3}.project-image.is-previewing:after{display:none}@media(prefers-reduced-motion:reduce){.project-preview-frame{display:none}}

/* Leave room for the final glyph's overhang, including inside background-clip:text. */
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero-copy{min-width:0}.hero-title-line{padding-inline-end:.14em;margin-inline-end:-.14em}.hero-title-line>span{padding-inline-end:.10em;margin-inline-end:-.10em}.hero-title-line .gradient{padding-inline-end:.10em}.hero-copy h1{font-size:clamp(48px,5.45vw,72px)}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.hero-copy h1{font-size:clamp(46px,7.5vw,64px)}}
@media(max-width:600px){.hero-copy h1{font-size:clamp(32px,8.7vw,52px);letter-spacing:-.055em}}

.project-image .project-preview-frame{visibility:hidden;opacity:1;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.project-image .project-preview-frame.is-active{visibility:visible;opacity:1}

.project-topics a{border-radius:999px;padding-inline:14px}

.hero-description p{margin:0}.hero-description .hero-experience{margin-top:14px}.hero-description a{color:#dddde5;text-decoration:underline;text-decoration-color:#ffffff36;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}.hero-description a:hover{color:#d8b4fe;text-decoration-color:#d8b4fe}

.hero .title-reel{height:1.14em;line-height:1.14;overflow:hidden;padding-block:0;margin-block:0;padding-inline-end:.16em;margin-inline-end:-.16em}.hero .title-reel>.title-reel-track{display:flex;flex-direction:column;padding:0;margin:0}.hero .title-reel-word{display:block;flex-shrink:0;height:1.14em;line-height:1.14;padding-inline-end:.16em;white-space:nowrap}.hero-description{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;text-wrap:pretty}.hero-description .hero-experience{margin-top:14px}.hero-experience a{margin-inline:.2em}

.hero .title-reel-word{width:max-content}
/* Keep the backdrop inside the page box; viewport units include the scrollbar gutter. */
.hero-backdrop{left:0;width:100%;transform:none}

.hero h1>.hero-title-line:not(.title-reel){line-height:1.14}.hero .title-reel-word{flex-basis:auto}

.typewriter-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.typewriter-char{position:relative;opacity:0}.typewriter-char.is-visible{opacity:1}.typewriter-char.is-current:after{content:'';position:absolute;right:-2px;top:.08em;height:1em;border-right:1px solid #c4b5fd;animation:type-caret .5s steps(1) infinite}@keyframes type-caret{50%{opacity:0}}.visual{perspective:1100px}.card-enter{position:relative;transform-style:preserve-3d;backface-visibility:visible}.card-enter>.note,.card-enter>.polaroid{backface-visibility:hidden}.card-enter:after{content:'j.';position:absolute;inset:0;display:grid;place-items:center;border:1px solid #b9a9dc55;border-radius:4px;background:radial-gradient(ellipse at 30% 20%,#3b334c,#1b1922 75%);color:#d8cff0;font:600 48px/1 Inter,sans-serif;transform:rotateY(180deg);backface-visibility:hidden;pointer-events:none}.photo-enter:after{transform:rotateY(180deg) rotate(-6deg)}.tools-enter:after{transform:rotateY(180deg) rotate(12deg)}.workflow-enter:after{transform:rotateY(180deg) rotate(-16deg)}
@media(prefers-reduced-motion:reduce){.typewriter-char{opacity:1}.typewriter-char:after{display:none}.card-enter:after{display:none}}

.card-enter:after{display:none}.card-enter>.note,.card-enter>.polaroid{backface-visibility:visible}

.hero-description.is-typing a{pointer-events:none;text-decoration-color:transparent}.typewriter-char.is-current:after{animation-duration:.78s}.motion-demo .work,.motion-demo>footer{display:none}.motion-demo .hero{min-height:calc(100svh - 96px)}@media(max-width:600px){.motion-demo .hero{min-height:calc(100svh - 76px)}}

/* Magnetic, ink-filled CTA, informed by Codrops' Magnetic Buttons. */
.primary-cta{position:relative;isolation:isolate;overflow:hidden;min-height:62px;gap:30px;padding:12px 14px 12px 25px;border:1px solid #fafafa;border-radius:999px;background:#fafafa;color:#17171a;transform:translate(var(--button-x,0px),var(--button-y,0px));transition:transform .35s cubic-bezier(.2,.8,.2,1),color .35s,border-color .35s,background .35s}
.primary-cta:before{content:'';position:absolute;right:14px;top:50%;width:36px;height:36px;border-radius:50%;background:#211b2e;transform:translateY(-50%) scale(1);transition:transform .65s cubic-bezier(.2,.75,.25,1);z-index:-1}
.primary-cta .primary-cta__label{position:relative;z-index:1;font:600 13px/1.3 Inter,sans-serif;white-space:nowrap}
.primary-cta .primary-cta__icon{position:relative;z-index:1;display:block;width:36px;height:36px;flex:0 0 auto;overflow:hidden;border-radius:50%;background:#211b2e;color:#fff;transition:background .35s,color .35s}
.primary-cta__icon i{position:absolute;inset:0;display:grid;place-items:center;font:400 23px/1 Inter,sans-serif;transition:transform .5s cubic-bezier(.2,.7,.2,1)}.primary-cta__icon i:nth-child(2){transform:translate(-135%,135%)}
.primary-cta:hover,.primary-cta:focus-visible{background:#fafafa;border-color:#bdb0da;color:#fff;transform:translate(var(--button-x,0px),calc(var(--button-y,0px) - 2px))}
.primary-cta:hover:before,.primary-cta:focus-visible:before{transform:translateY(-50%) scale(14)}
.primary-cta:hover .primary-cta__icon,.primary-cta:focus-visible .primary-cta__icon{background:#e8e0fc;color:#211b2e}
.primary-cta:hover .primary-cta__icon i:first-child,.primary-cta:focus-visible .primary-cta__icon i:first-child{transform:translate(135%,-135%)}.primary-cta:hover .primary-cta__icon i:nth-child(2),.primary-cta:focus-visible .primary-cta__icon i:nth-child(2){transform:translate(0,0)}
.primary-cta:active{transform:translate(var(--button-x,0px),var(--button-y,0px)) scale(.98)}
@media(max-width:600px){.primary-cta{min-height:56px;padding:10px 12px 10px 22px;gap:26px}.primary-cta .primary-cta__label{font-size:12px}}
@media(prefers-reduced-motion:reduce){.primary-cta,.primary-cta:hover,.primary-cta:focus-visible{transform:none}}

.drag-position{cursor:grab;touch-action:none}.drag-position.is-dragging{cursor:grabbing}.card-enter{transform-style:flat}.section-heading-window{display:inline-block;overflow:hidden;vertical-align:bottom;padding-inline-end:.06em;margin-inline-end:-.06em}.section-heading-label,.section-header .lavender{display:inline-block}.section-header .lavender{transform-origin:50% 80%}

/* The text masks its period's first hop; the period lands at the original baseline. */
.section-header h2{isolation:isolate;position:relative}.section-heading-window{position:relative;z-index:1}.section-heading-label{position:relative;background:var(--bg,#101012)}.section-heading-word{display:inline-block;transform-origin:0 100%}.section-header .lavender{position:relative;z-index:0;will-change:auto}

@media(min-width:901px) and (max-width:1100px){.visual{transform:scale(.68)}}

.section-header .lavender{width:.135em;height:.135em;margin-left:.025em;vertical-align:baseline;border-radius:50%;background:#a5b4fc;color:transparent;transform-origin:50% 100%}

/* Decoded stills switch cleanly; no opacity or transform animation between frames. */
.project-image .project-preview-frame{visibility:hidden;opacity:1;z-index:1;transition:none;transform:none!important}
.project-image .project-preview-frame.is-active{visibility:visible;opacity:1;z-index:2}

/* The same desktop desk and icon system, fitted to the available mobile width. */
@media(max-width:600px){
 .header-inner{gap:12px}.brand{white-space:nowrap}.header nav{gap:16px}
 .header-cta{display:flex;font-size:0;gap:0;padding:10px 0}.header-cta>span{font-size:20px}
 .hero{gap:20px;overflow:clip;padding-top:38px;padding-bottom:38px;min-height:0}
 .hero-copy{min-width:0;width:100%}.hero-description{max-width:100%;font-size:14px;line-height:1.85}
 .visual{max-width:none;width:620px;height:500px;transform:scale(var(--mobile-desk-scale,.5));transform-origin:top center;margin:12px 0 calc((var(--mobile-desk-scale,.5) - 1)*500px)}
 .section-header h2{font-size:clamp(30px,8.2vw,40px);white-space:nowrap}
 .project-description{max-width:100%}.project-topics a{font-size:11px;padding:8px 12px;gap:8px}.project-topics .ui-arrow{width:13px;height:13px}
}