@font-face{font-family:"PP Right Gothic";src:url("./assets/pp-right-gothic-medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Gart Sans";src:url("./assets/gart-sans-medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Gart Sans";src:url("./assets/gart-sans-bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
:root{--sticker-scale:1;--paper:#fffcf5;--ink:#100d06;--muted:#78756e;--line:#e3e0d9;--content:700px;--body-size:40px;--body-leading:1.05;--section-space:280px;font-family:"Gart Sans",Arial,sans-serif;font-weight:500;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:0;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{margin:0;min-width:320px}
.edge{position:fixed;inset-inline:0;height:120px;z-index:8;pointer-events:none}
.edge--top{top:0;--d:to bottom}
.edge--bottom{bottom:0;--d:to top}
.edge i{position:absolute;inset:0;-webkit-backdrop-filter:blur(var(--b));backdrop-filter:blur(var(--b));--m:linear-gradient(var(--d),transparent calc(var(--s)*1%),#000 calc(var(--s)*1% + 20%),#000 calc(var(--s)*1% + 40%),transparent calc(var(--s)*1% + 60%));-webkit-mask-image:var(--m);mask-image:var(--m)}
.edge i:nth-child(1){--b:4px;--s:-20}
.edge i:nth-child(2){--b:2px;--s:0}
.edge i:nth-child(3){--b:1px;--s:20}
.edge i:nth-child(4){--b:0.75px;--s:40}
.edge i:nth-child(5){--b:0.5px;--s:60}
body.dialog-open{overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a,[tabindex]{touch-action:manipulation}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0;font-weight:500}
.content-width{width:min(var(--content),calc(100% - 32px));margin-inline:auto}
.site-header{position:fixed;inset:0 0 auto;z-index:10;padding:40px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.site-header a{pointer-events:auto}
.site-logo{display:block;width:58px;height:80px}
.site-header nav{pointer-events:auto;display:flex;gap:24px;font:500 16px/1 "Gart Sans",Arial,sans-serif}
.site-header nav a{position:relative;display:block;height:1.15em;overflow:hidden;white-space:nowrap;perspective:400px}
.site-header nav a span,.site-header nav a::after{display:block;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s ease;transform-origin:center center}
.site-header nav a::after{content:attr(data-label);position:absolute;inset:0;opacity:0;transform:translateY(100%) rotateX(-45deg)}
.site-header nav a:is(:hover,:focus-visible) span{opacity:0;transform:translateY(-100%) rotateX(45deg)}
.site-header nav a:is(:hover,:focus-visible)::after{opacity:1;transform:none}
.skip-link{position:fixed;top:12px;left:12px;z-index:50;transform:translateY(-200%);padding:12px;background:var(--paper)}
.skip-link:focus{transform:none}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:24px}
.sticker-text{position:relative;font-size:var(--body-size);line-height:var(--body-leading);letter-spacing:-.04em;word-spacing:.125em}
.hero-title{font-family:"PP Right Gothic",Arial,sans-serif;font-size:135px;line-height:.85;letter-spacing:-.05em}
.hero-description{font-family:"PP Right Gothic",Arial,sans-serif;font-size:44px;line-height:.95;letter-spacing:-.02em}
.reveal-word{display:inline-block}
/* A sticker reserves a text-sized slot via margins. Its larger artwork overhangs that slot,
   centered on the line, without changing line height or moving adjacent words.
   Sizes per sticker live in the list below. */
img.sticker{position:relative;display:inline-block;vertical-align:middle;width:var(--image-w);height:var(--image-h);max-width:none;margin:calc((var(--slot-h) - var(--image-h))/2) calc((var(--slot-w) - var(--image-w))/2);transform:rotate(var(--rotation)) scale(var(--sticker-scale));user-select:none;-webkit-user-drag:none}
.slot{display:inline-block;position:relative;top:-.04em;line-height:0;vertical-align:middle}
.hero .slot{top:-.067em}
/* Hero greeting (hello.js): letters roll on a drum inside padded, masked slots */
.hello{position:relative;display:inline-block;white-space:nowrap}
.hello-word,.hello-bang,.hello-l{display:inline-block;white-space:pre}
.hello-slot{display:inline-block;position:relative;padding:.25em .4em;margin:-.25em -.4em;perspective:3em;-webkit-mask-image:linear-gradient(transparent,#000 .3em,#000 calc(100% - .3em),transparent);mask-image:linear-gradient(transparent,#000 .3em,#000 calc(100% - .3em),transparent)}
.hello-slot>.out{position:absolute;left:.4em;top:.25em}
.hello-slot>*{backface-visibility:hidden}
.glue{white-space:nowrap}
.glue:has(.sticker--love)>.slot+*{position:relative;margin-left:.1em}
a>img.sticker{transition:transform .2s cubic-bezier(.16,1,.3,1)}
a:is(:hover,:focus-visible)>img.sticker{z-index:2;transform:rotate(var(--rotation)) scale(calc(var(--sticker-scale)*1.1))}
img.sticker--diia{z-index:1;border-radius:18px;outline:1px solid #f1eee7;outline-offset:-1px;transition:transform .2s ease-out;transform:rotate(var(--rotation)) perspective(2000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(calc(var(--tilt-scale,1)*var(--sticker-scale)))}
img.sticker--diia:hover{--tilt-scale:1.15}
.sticker--hey{--slot-w:56px;--slot-h:84px;--image-w:135px;--image-h:137px;--rotation:1deg;--mobile-slot-w:24px;--mobile-slot-h:24px;--mobile-image-w:71px;--mobile-image-h:72px}
.sticker--diia{--slot-w:48px;--slot-h:84px;--image-w:104px;--image-h:142px;--rotation:-1.2deg;--mobile-slot-w:24px;--mobile-slot-h:24px;--mobile-image-w:57px;--mobile-image-h:78px}
.sticker--location{--slot-w:221px;--slot-h:22px;--image-w:229px;--image-h:48px;--rotation:1.3deg;--mobile-slot-w:210px;--mobile-slot-h:22px;--mobile-image-w:210px;--mobile-image-h:44px}
.sticker--agov{--slot-w:225px;--slot-h:28px;--image-w:245px;--image-h:40px;--rotation:-1.4deg;--mobile-slot-w:140px;--mobile-slot-h:24px;--mobile-image-w:159px;--mobile-image-h:26px}
.sticker--antler{--slot-w:120px;--slot-h:28px;--image-w:133px;--image-h:44px;--rotation:1.6deg;--mobile-slot-w:88px;--mobile-slot-h:24px;--mobile-image-w:96px;--mobile-image-h:32px}
.sticker--techstars{--slot-w:125px;--slot-h:28px;--image-w:145px;--image-h:38px;--rotation:-1.6deg;--mobile-slot-w:91px;--mobile-slot-h:24px;--mobile-image-w:99px;--mobile-image-h:26px}
.sticker--find{--slot-w:195px;--slot-h:28px;--image-w:217px;--image-h:50px;--rotation:1.3deg;--mobile-slot-w:149px;--mobile-slot-h:24px;--mobile-image-w:165px;--mobile-image-h:38px}
.sticker--like{--slot-w:80px;--slot-h:28px;--image-w:102px;--image-h:50px;--rotation:-1.7deg;--mobile-slot-w:61px;--mobile-slot-h:24px;--mobile-image-w:77px;--mobile-image-h:38px}
.sticker--small-medium{--slot-w:224px;--slot-h:28px;--image-w:234px;--image-h:40px;--rotation:1.4deg;--mobile-slot-w:176px;--mobile-slot-h:24px;--mobile-image-w:176px;--mobile-image-h:30px}
.sticker--love{--slot-w:84px;--slot-h:28px;--image-w:107px;--image-h:50px;--rotation:-1.7deg;--mobile-slot-w:69px;--mobile-slot-h:24px;--mobile-image-w:82px;--mobile-image-h:38px}
.sticker--mom{--slot-w:98px;--slot-h:28px;--image-w:122px;--image-h:54px;--rotation:1.6deg;--mobile-slot-w:66px;--mobile-slot-h:24px;--mobile-image-w:86px;--mobile-image-h:38px}
.sticker--magazines{--slot-w:180px;--slot-h:28px;--image-w:204px;--image-h:50px;--rotation:-1.4deg;--mobile-slot-w:125px;--mobile-slot-h:24px;--mobile-image-w:139px;--mobile-image-h:34px}
.sticker--games{--slot-w:222px;--slot-h:28px;--image-w:242px;--image-h:50px;--rotation:1.3deg;--mobile-slot-w:148px;--mobile-slot-h:24px;--mobile-image-w:165px;--mobile-image-h:34px}
.sticker--fpv{--slot-w:98px;--slot-h:28px;--image-w:113px;--image-h:50px;--rotation:-1.6deg;--mobile-slot-w:66px;--mobile-slot-h:24px;--mobile-image-w:77px;--mobile-image-h:34px}
.sticker--jojo{--slot-w:98px;--slot-h:28px;--image-w:113px;--image-h:50px;--rotation:1.6deg;--mobile-slot-w:66px;--mobile-slot-h:24px;--mobile-image-w:82px;--mobile-image-h:36px}
.sticker--strategy{--slot-w:165px;--slot-h:28px;--image-w:178px;--image-h:50px;--rotation:-1.4deg;--mobile-slot-w:115px;--mobile-slot-h:24px;--mobile-image-w:128px;--mobile-image-h:36px}
.sticker--creatvity{--slot-w:185px;--slot-h:28px;--image-w:195px;--image-h:50px;--rotation:1.4deg;--mobile-slot-w:122px;--mobile-slot-h:24px;--mobile-image-w:140px;--mobile-image-h:36px}
.sticker--startups{--slot-w:128px;--slot-h:28px;--image-w:148px;--image-h:48px;--rotation:-1.5deg;--mobile-slot-w:85px;--mobile-slot-h:24px;--mobile-image-w:99px;--mobile-image-h:32px}
.sticker--corporates{--slot-w:161px;--slot-h:28px;--image-w:185px;--image-h:48px;--rotation:1.4deg;--mobile-slot-w:113px;--mobile-slot-h:24px;--mobile-image-w:123px;--mobile-image-h:32px}
.sticker--brand{--slot-w:134px;--slot-h:28px;--image-w:140px;--image-h:48px;--rotation:-1deg;--mobile-slot-w:95px;--mobile-slot-h:24px;--mobile-image-w:105px;--mobile-image-h:36px}
.sticker--product{--slot-w:158px;--slot-h:28px;--image-w:170px;--image-h:48px;--rotation:1deg;--mobile-slot-w:114px;--mobile-slot-h:24px;--mobile-image-w:128px;--mobile-image-h:36px}
.sticker--research{--slot-w:174px;--slot-h:28px;--image-w:190px;--image-h:48px;--rotation:-1deg;--mobile-slot-w:132px;--mobile-slot-h:24px;--mobile-image-w:143px;--mobile-image-h:36px}
.sticker--ui-ui{--slot-w:130px;--slot-h:28px;--image-w:144px;--image-h:48px;--rotation:1deg;--mobile-slot-w:98px;--mobile-slot-h:24px;--mobile-image-w:108px;--mobile-image-h:36px}
.sticker--motion{--slot-w:156px;--slot-h:28px;--image-w:154px;--image-h:48px;--rotation:-1deg;--mobile-slot-w:107px;--mobile-slot-h:24px;--mobile-image-w:115px;--mobile-image-h:36px}
.sticker--30plus{--slot-w:72px;--slot-h:28px;--image-w:72px;--image-h:40px;--rotation:-1.9deg;--mobile-slot-w:52px;--mobile-slot-h:24px;--mobile-image-w:52px;--mobile-image-h:29px}
.sticker--hospitality{--slot-w:149px;--slot-h:28px;--image-w:163px;--image-h:44px;--rotation:1.5deg;--mobile-slot-w:107px;--mobile-slot-h:24px;--mobile-image-w:117px;--mobile-image-h:32px}
.sticker--web3{--slot-w:81px;--slot-h:28px;--image-w:90px;--image-h:38px;--rotation:-1.8deg;--mobile-slot-w:58px;--mobile-slot-h:24px;--mobile-image-w:65px;--mobile-image-h:27px}
.sticker--edtch{--slot-w:94px;--slot-h:28px;--image-w:109px;--image-h:38px;--rotation:1.8deg;--mobile-slot-w:68px;--mobile-slot-h:24px;--mobile-image-w:78px;--mobile-image-h:27px}
.sticker--ai{--slot-w:20px;--slot-h:28px;--image-w:41px;--image-h:40px;--rotation:-2deg;--mobile-slot-w:14px;--mobile-slot-h:24px;--mobile-image-w:30px;--mobile-image-h:29px}
.sticker--finance{--slot-w:115px;--slot-h:28px;--image-w:125px;--image-h:40px;--rotation:1.7deg;--mobile-slot-w:83px;--mobile-slot-h:24px;--mobile-image-w:90px;--mobile-image-h:29px}
.sticker--brands{--slot-w:97px;--slot-h:28px;--image-w:111px;--image-h:44px;--rotation:-1.7deg;--mobile-slot-w:70px;--mobile-slot-h:24px;--mobile-image-w:80px;--mobile-image-h:32px}
.sticker--products{--slot-w:128px;--slot-h:28px;--image-w:142px;--image-h:44px;--rotation:1.6deg;--mobile-slot-w:92px;--mobile-slot-h:24px;--mobile-image-w:102px;--mobile-image-h:32px}
.sticker--uxui{--slot-w:90px;--slot-h:28px;--image-w:104px;--image-h:44px;--rotation:-1.7deg;--mobile-slot-w:65px;--mobile-slot-h:24px;--mobile-image-w:75px;--mobile-image-h:32px}
.sticker--researches{--slot-w:162px;--slot-h:28px;--image-w:176px;--image-h:44px;--rotation:1.5deg;--mobile-slot-w:117px;--mobile-slot-h:24px;--mobile-image-w:127px;--mobile-image-h:32px}
.sticker--motion-chip{--slot-w:101px;--slot-h:28px;--image-w:115px;--image-h:44px;--rotation:-1.7deg;--mobile-slot-w:72px;--mobile-slot-h:24px;--mobile-image-w:82px;--mobile-image-h:32px}
.sticker--marketing{--slot-w:143px;--slot-h:28px;--image-w:157px;--image-h:44px;--rotation:1.6deg;--mobile-slot-w:103px;--mobile-slot-h:24px;--mobile-image-w:113px;--mobile-image-h:32px}
.sticker--telegram{--slot-w:169px;--slot-h:28px;--image-w:185px;--image-h:50px;--rotation:-1.4deg;--mobile-slot-w:122px;--mobile-slot-h:24px;--mobile-image-w:133px;--mobile-image-h:36px}
.sticker--whatsapp{--slot-w:187px;--slot-h:28px;--image-w:203px;--image-h:50px;--rotation:1.4deg;--mobile-slot-w:135px;--mobile-slot-h:24px;--mobile-image-w:146px;--mobile-image-h:36px}
.sticker--email{--slot-w:112px;--slot-h:28px;--image-w:137px;--image-h:50px;--rotation:-1.6deg;--mobile-slot-w:81px;--mobile-slot-h:24px;--mobile-image-w:99px;--mobile-image-h:36px}
.sticker--behance{--slot-w:172px;--slot-h:28px;--image-w:188px;--image-h:50px;--rotation:1.4deg;--mobile-slot-w:124px;--mobile-slot-h:24px;--mobile-image-w:135px;--mobile-image-h:36px}
.sticker--linkedin{--slot-w:158px;--slot-h:28px;--image-w:182px;--image-h:50px;--rotation:-1.4deg;--mobile-slot-w:114px;--mobile-slot-h:24px;--mobile-image-w:131px;--mobile-image-h:36px}
.sticker--instagram{--slot-w:176px;--slot-h:28px;--image-w:200px;--image-h:50px;--rotation:1.4deg;--mobile-slot-w:127px;--mobile-slot-h:24px;--mobile-image-w:144px;--mobile-image-h:36px}
h2{font-size:32px;line-height:1;color:var(--muted);margin-bottom:32px}
h3{font-size:24px;line-height:1;color:var(--muted);margin-bottom:16px}
.about,.experience,.playground,.footer{scroll-margin-top:160px}
.divider{height:var(--section-space);display:flex;align-items:center;gap:40px}
.wave{position:relative;height:24px;flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.wave::before{content:"";position:absolute;inset:0 -40px 0 0;background:url("./assets/wave.svg") left center/40px 24px repeat-x;animation:wave-travel 1.4s linear infinite;animation-play-state:paused}
.divider>.wave:last-child::before{animation-direction:reverse}
.divider.is-in-view .wave::before{animation-play-state:running}
.page-hidden .wave::before,.page-hidden .project-belt{animation-play-state:paused!important}
@keyframes wave-travel{to{transform:translateX(-40px)}}
.divider-marks{display:flex;align-items:center;gap:16px}
.divider-marks img{width:24px;height:34px;opacity:.1}
.divider-marks img:nth-child(2){transform:rotate(180deg)}
.divider--inner{width:100%;height:200px}
.interests{margin-top:0}
.jojo-frame{position:relative;height:390px;margin-top:40px}
.jojo-photo{width:105%;max-width:none;margin-left:-2.5%;height:auto;margin-top:0}
.motion-ready .jojo-photo{opacity:0;transform:translateY(32px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.motion-ready .jojo-frame.is-visible .jojo-photo{opacity:1;transform:none}
.about>.sticker-text{line-height:calc(var(--body-leading)*1.1)}
.experience-button{text-decoration:none;position:relative;display:inline-block;margin-top:40px;padding:3px;border:0;border-radius:50px;background:linear-gradient(#e3e0d9,#fffcf5);color:#6c6962;font-size:36px;line-height:1;letter-spacing:-.02em;cursor:pointer;box-shadow:0 16px 22px -10px #e3e0d9,0 0 30px #f1eee7;transition:transform .2s ease}
.experience-button:hover,.experience-button:focus-visible{transform:scale(.995);transform-origin:left top}
.xb-face{position:relative;display:flex;align-items:center;gap:8px;padding:20px 32px;border-radius:42.5px;overflow:hidden;background:var(--paper);box-shadow:inset -2px 12px 11px -5px #e3e0d9,inset 1px -3px 11px 0 rgba(0,0,0,.35)}
.xb-face::before,.xb-face::after{content:"";position:absolute;left:10%;right:10%;border-radius:50%;filter:blur(10px);pointer-events:none}
.xb-face::before{top:0;height:55%;background:#fff;opacity:.8}
.xb-face::after{bottom:-6px;height:30%;background:#d5d2cb;filter:blur(12px);opacity:.6}
.xb-shimmer{position:absolute;inset:0;opacity:0;transition:opacity .27s;pointer-events:none;overflow:hidden}
.xb-shimmer::before{content:"";position:absolute;top:-20%;bottom:-20%;width:30%;left:-40%;background:#fff;filter:blur(14px);opacity:.7;transform:skewX(-20deg)}
.experience-button:is(:hover,:focus-visible) .xb-shimmer{opacity:1}
.experience-button:is(:hover,:focus-visible) .xb-shimmer::before{animation:xb-sweep 1.2s ease-in-out infinite}
@keyframes xb-sweep{to{left:120%}}
.xb-label{position:relative;z-index:1;white-space:pre}
.xb-label i{display:inline-block;font-style:normal;animation:xb-char .8s ease both;animation-delay:max(.01s,calc(var(--i)*.02s))}
.experience-button.is-replay .xb-label i{animation:xb-char-replay .4667s ease both;animation-delay:max(.01s,calc(var(--i)*.02s))}
@keyframes xb-char-replay{0%{opacity:0;filter:blur(20px);transform:translateY(.4em)}60%{opacity:1;filter:blur(0);transform:translateY(-.15em)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes xb-char{0%{opacity:0;filter:blur(20px);transform:translateY(.4em)}60%{opacity:1;filter:blur(0);transform:translateY(-.15em)}100%{opacity:1;filter:blur(0);transform:none}}
.xb-arrow{position:relative;z-index:1;flex:none;width:36px;height:28px;transform:scale(.9)}
.xb-arrow i{position:absolute;right:0;top:12px;height:4px;border-radius:2px;background:linear-gradient(90deg,#e3e0d9,#6c6962)}
.xb-arrow i:nth-child(1){left:0}
.xb-arrow i:nth-child(2),.xb-arrow i:nth-child(3){width:18.56px;transform-origin:right center}
.xb-arrow i:nth-child(2){left:auto;transform:rotate(44deg)}
.xb-arrow i:nth-child(3){left:auto;transform:rotate(316deg)}
.experience-button:is(:hover,:focus-visible) .xb-arrow{animation:xb-swing .667s ease-in-out infinite}
@keyframes xb-swing{50%{transform:translateX(5px) scale(.9)}}
.experience-button:active .xb-face{box-shadow:inset 0 2px 10px #d5d2cb}
.playground>.content-width .sticker-text{max-width:371px}
.project-scroll{overflow-x:auto;overflow-y:hidden;padding:18px 0;margin-top:40px;scrollbar-width:none;cursor:grab;user-select:none}
.project-scroll::-webkit-scrollbar{display:none}
.project-scroll.is-dragging{cursor:grabbing}
.project-track{display:flex;gap:40px;width:max-content;list-style:none;padding:0 28px;margin:0}
.project-track li{width:250px;flex:none;transform:rotate(var(--card-rotation))}
.project-belt{display:flex;width:max-content;animation:project-ticker var(--ticker-duration,45s) linear infinite;animation-play-state:paused}
.project-scroll.is-in-view .project-belt{animation-play-state:running}
.project-scroll:is(:hover,:focus-within) .project-belt,.project-scroll.is-interacting .project-belt,.project-scroll.is-dragging .project-belt{animation-play-state:paused}
.project-scroll .project-card img{-webkit-user-drag:none}
@keyframes project-ticker{to{transform:translateX(calc(-1 * var(--ticker-distance,0px)))}}
.project-card{display:flex;flex-direction:column;height:304px;padding:8px;border:1px solid #f1eee7;border-radius:24px;background:linear-gradient(#fff,#f1eee7);box-shadow:4px 4px 8px #f1eee7,2px 2px 0 #e3e0d9,inset -2px -2px 8px #fff,inset 2px 2px 4px #f1eee7}
.project-card{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease}
.project-card:hover,.project-card:focus-visible{transform:translateY(-8px) scale(1.025);box-shadow:4px 12px 18px #e3e0d9,2px 2px 0 #e3e0d9,inset -2px -2px 8px #fff,inset 2px 2px 4px #f1eee7}
.project-card>img{width:100%;height:195px;object-fit:cover;border-radius:16px}
.project-card>span{display:flex;align-items:center;justify-content:center;flex:1;padding:16px 12px;text-align:center;font-size:20px;line-height:1.15}
.footer{padding-bottom:40px}
.contact-columns{display:grid;grid-template-columns:207px 1fr;gap:32px;margin-top:32px;margin-right:-60px}
.contact-columns .sticker-text{line-height:calc(var(--body-leading)*1.25)}
.footer-marks{display:flex;gap:40px;margin-top:80px}
.footer-marks img{width:calc((100% - 80px)/3);height:auto}
/* Native dialog provides focus containment, Escape dismissal and background inertness. */
dialog{position:fixed;inset:0;width:calc(100% - 72px);max-width:1440px;max-height:calc(100svh - 72px);padding:0;border:1px solid #f1eee7;border-radius:32px;background:var(--paper);color:var(--ink);overflow:auto;overscroll-behavior:contain}
dialog::backdrop{background:rgb(16 13 6 / .3)}
dialog[open]{animation:dialog-enter .36s cubic-bezier(.16,1,.3,1) both}
dialog[open].is-closing{animation:dialog-exit .2s ease-in both}
dialog[open]::backdrop{animation:backdrop-enter .3s ease-out both}
dialog[open].is-closing::backdrop{animation:backdrop-exit .2s ease-in both}
@keyframes dialog-enter{from{opacity:0;transform:translateY(24px) scale(.975)}to{opacity:1;transform:none}}
@keyframes dialog-exit{to{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes backdrop-exit{to{opacity:0}}
.dialog-close{position:sticky;display:flex;justify-content:center;align-items:center;top:24px;margin:24px 24px -64px auto;z-index:1;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#f8f5ee;color:#6c6962;font:300 36px/1 Arial,sans-serif;cursor:pointer}
.dialog-body{padding:80px}
.dialog-intro{max-width:700px;font-size:36px;line-height:1.1;letter-spacing:-.035em}
.dialog-intro h2{font-size:inherit;line-height:inherit;color:var(--ink);margin-bottom:40px}
.dialog-body .divider{width:100%;max-width:none;height:160px}
.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:1150px;text-align:left;font-size:18px;line-height:1.1}
th{font-size:16px;color:var(--muted);font-weight:500;padding-bottom:32px}
th,td{vertical-align:top;padding-right:36px}
td{padding-block:16px 28px}
th:first-child{width:300px}th:nth-child(2){width:200px}th:nth-child(3){width:600px}th:nth-child(4){width:140px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;border-radius:30px;padding:6px 12px;background:#fffdf8;box-shadow:2px 2px 6px #e3e0d9;white-space:nowrap}
.dialog-outro{font-size:28px;line-height:1.2;letter-spacing:-.02em}
.dialog-outro>p{max-width:700px;margin-bottom:32px}
.dialog-outro .contact-columns{max-width:760px;margin-right:0}
@keyframes word-reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes block-reveal{from{opacity:0}to{opacity:1}}
@supports (animation-timeline:view()){
 .motion-ready .reveal-word{animation:word-reveal 1s linear both;animation-timeline:view();animation-range:var(--reveal-start,5%) var(--reveal-end,15%)}
 .motion-ready .reveal-block{animation:block-reveal 1s ease-out both;animation-timeline:view();animation-range:5% 15%}
}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .motion-ready .reveal-word,.motion-ready .reveal-block{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
 .motion-ready .jojo-photo{opacity:1;transform:none;transition:none}
 .wave::before,.project-belt,dialog[open],dialog[open]::backdrop{animation:none!important}
 img.sticker,.experience-button,.project-card{transition:none!important}
 .xb-label i,.xb-shimmer::before,.xb-arrow{animation:none!important}
 .site-header nav a span,.site-header nav a::after,.experience-button span{transition:none!important}
 .project-belt .project-track[aria-hidden="true"]{display:none}
}
@media(min-width:1512px){.hero-title{font-size:135px}}
@media(max-width:809px){
 :root{--body-size:28px;--body-leading:1.05;--section-space:160px}
 html{scroll-padding-top:0}
 .site-header{padding:16px;align-items:center;gap:24px;background:var(--paper)}
 .site-logo{flex:none;width:35px;height:48px}
 .site-header nav{gap:20px;overflow-x:auto;scrollbar-width:none;line-height:1.4;padding:8px 3px}
 .site-header nav::-webkit-scrollbar{display:none}
 .site-header nav a{flex:none}
 .hero{gap:24px}
 .hero-title{font-size:clamp(58px,18.46vw,90px);line-height:.85}
 .hero-description{font-size:clamp(28px,9.23vw,40px);line-height:.95}
 img.sticker{width:var(--mobile-image-w);height:var(--mobile-image-h);margin:calc((var(--mobile-slot-h) - var(--mobile-image-h))/2) calc((var(--mobile-slot-w) - var(--mobile-image-w))/2)}
 img.sticker--diia{border-radius:8px}
 h2,h3{font-size:16px;line-height:1.1;margin-bottom:24px}
 .about,.experience,.playground,.footer{scroll-margin-top:100px}
 .divider{gap:20px}.divider-marks{gap:10px}.divider-marks img{width:16px;height:24px}
 .divider--inner{height:120px}.interests{margin-top:0}.jojo-frame{height:auto;margin-top:24px}.jojo-photo{margin-top:0}
 .experience-button{font-size:28px;margin-top:32px}
 .xb-face{padding:18px 24px}
 .project-scroll{margin-top:24px}.project-track{gap:28px;padding-inline:24px}.project-track li{width:230px}
 .project-card>img{height:185px}.project-card>span{font-size:18px}.project-card{min-height:280px}
 .contact-columns{grid-template-columns:1fr;gap:28px;margin-top:32px;margin-right:0}
 
 .footer-marks{gap:24px;margin-top:56px}.footer-marks img{width:calc((100% - 48px)/3)}
 dialog{width:calc(100% - 24px);max-height:calc(100svh - 24px);border-radius:24px}
 .dialog-body{padding:72px 24px 32px}.dialog-close{top:12px;margin:12px 12px -52px auto}
 .dialog-intro{font-size:28px}.dialog-intro h2{margin-bottom:28px}.dialog-outro{font-size:24px}
 .dialog-body .divider{height:100px}
}
@media(max-width:359px){.site-header{gap:16px}.site-header nav{gap:16px}.hero-title{font-size:58px}.hero-description{font-size:28px}.hero-description .sticker--location{--mobile-slot-w:171px;--mobile-image-w:181px;--mobile-image-h:38px}}
.fluid{position:fixed;inset:0;width:100%;height:100vh;z-index:-1;opacity:1;pointer-events:none}
@media(max-width:809.98px){.fluid{display:none}}
/* Code-rendered stickers (stickers.js). Scale is set from the parent's x-height. */
.sticker-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.slot:has(>.inline-host,>a>.inline-host){height:0}
.inline-host{--inline-scale:1;position:relative;display:block;margin:calc(-26px * var(--inline-scale)) -.16em 0;width:calc(var(--native-width) * var(--inline-scale));height:calc(52px * var(--inline-scale));transform:rotate(var(--rotation,0deg)) scale(var(--sticker-scale))}
.inline-host>svg{letter-spacing:0;word-spacing:0;font-synthesis:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:none;overflow:visible}
a>.inline-host{transition:transform .2s cubic-bezier(.16,1,.3,1)}
a:is(:hover,:focus-visible)>.inline-host{z-index:2;transform:rotate(var(--rotation,0deg)) scale(calc(var(--sticker-scale)*1.1))}
@media(prefers-reduced-motion:reduce){a>.inline-host{transition:none}}
.glue>.slot+*{margin-left:.16em}
/* Drift (drift.js): copy split into words/letters that ride the fluid. Letters are inline-blocks so translate/rotate apply;
   the whole word stays in .w-sr for screen readers and copy, letters are aria-hidden. */
.w{display:inline-block;white-space:nowrap;position:relative}
.l{display:inline-block}
.w-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;user-select:none}