*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#fff;color:#131313;font-family:Geist,Arial,sans-serif;font-size:14px;font-weight:500;line-height:1.22}img{display:block;max-width:100%}p,h1,h2,ul{margin:0}a{color:#0256fc;text-underline-offset:2px}a:hover{color:#003caf}a:focus-visible,.gallery:focus-visible{outline:2px solid #0256fc;outline-offset:5px}.portfolio{--card-size:542px;display:grid;grid-template-columns:318px minmax(0,1fr);gap:20px;padding:40px 0 64px;margin-left:clamp(32px,10.2vw,200px)}.resume{align-self:start}.portrait{width:165.948px;height:137.847px;object-fit:cover;margin:0 auto 41px}.resume-text{display:flex;flex-direction:column;gap:36px}.resume h1,.resume h2{font-size:12px;line-height:1.25;font-weight:500;color:rgb(19 19 19 / 60%);margin-bottom:16px}.resume ul{padding-left:21px}.contacts a{display:block;width:fit-content}.projects{min-width:0;display:flex;flex-direction:column;gap:40px}.project{min-width:0}.gallery{display:flex;gap:40px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:none;scrollbar-width:thin;scrollbar-color:#d6d6d6 transparent;cursor:default;padding-bottom:4px;touch-action:pan-x pan-y}.card{flex:0 0 var(--card-size);width:var(--card-size);height:var(--card-size);object-fit:cover;scroll-snap-align:start;position:relative;overflow:hidden;-webkit-user-drag:none;container-type:inline-size}.gallery img{user-select:none;-webkit-user-drag:none}.caption{font-size:14px;line-height:1.3;font-weight:500;margin:12px 20px 0 0}.dark-card{background:linear-gradient(145.24deg,#1c1c1c 48.382%,#322b2b 146.98%);color:#fff}.dark-card img{position:absolute;object-fit:contain}.character-cover .bear{width:29.52%;height:28.78%;left:14%;top:29.6%;transform:rotate(-16deg)}.character-cover .painter{width:37.52%;height:37.52%;left:40%;top:23.62%}.universe-title{position:absolute;top:64.91%;width:100%;text-align:center}.universe-title h2{font-family:Inter,Arial,sans-serif;font-size:7.38cqw;line-height:1;font-weight:800;letter-spacing:-.025em}.universe-title p{margin-top:8px;color:#ffffff99;font-size:2.21cqw}.card-label{position:absolute;top:90.22%;width:100%;text-align:center;color:#ffffff99;font-size:2.21cqw}.montik-character .flat-character{width:16.24%;height:16.24%;left:23.43%;top:47.97%}.montik-character .volume-character{width:29.52%;height:28.78%;left:47.79%;top:35.61%}.presenton-character .flat-character{width:16.24%;height:16.24%;left:21.22%;top:44.83%}.presenton-character .volume-character{width:37.52%;height:37.52%;left:44.83%;top:23.62%}.loader-card>img{width:29.52%;height:29.52%;left:35.24%;top:35.24%;border-radius:50%}
@media(min-width:1961px){.portfolio{margin-right:40px}.projects{max-width:1600px}}
@media(max-width:1500px){.portfolio{margin-left:clamp(24px,4.17vw,64px);grid-template-columns:278px minmax(0,1fr);gap:28px;--card-size:480px}.resume{font-size:14px}.desktop-break{display:none}}
@media(max-width:1000px){.portfolio{margin-left:28px;grid-template-columns:250px minmax(0,1fr);gap:24px;--card-size:420px}.gallery{gap:24px}}
@media(max-width:700px){body{font-size:16px;line-height:1.4}.portfolio{display:block;padding:28px 0 40px;margin-left:0;--card-size:min(86vw,480px)}.resume{padding:0 24px;font-size:16px;max-width:520px;margin:0 auto 40px}.portrait{margin-bottom:32px}.resume-text{gap:28px}.resume h1,.resume h2{font-size:13px;margin-bottom:12px}.contacts a{min-height:28px}.projects{gap:32px}.gallery{gap:16px;padding-left:24px;padding-right:24px;scroll-padding-left:24px}.caption{font-size:14px;margin:12px 24px 0;line-height:1.4}.card-label,.universe-title p{font-size:max(10px,2.21cqw)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}



.spayer-intro{padding:0}
.spayer-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spayer-intro h2{position:absolute;left:6.46%;top:11.25%;width:23.62%;font-family:Inter,Arial,sans-serif;font-size:7.38cqw;line-height:1;font-weight:800}
.spayer-intro>p{position:absolute;left:6.46%;top:26.01%;width:23.62%;font-family:Inter,Arial,sans-serif;font-size:2.214cqw;line-height:1.25;font-weight:500;text-align:right;color:#ffffff99}
.spayer-intro .radar-description{left:70.11%;top:48.71%;width:23.62%;text-align:left}
.oracle{width:100%;min-width:0}.oracle iframe{display:block;width:100%;border:0;background:#101010}
:root{--page-bg:#f7f5ef;--page-text:#111;--page-muted:#69645b;--page-line:#d7d0c1;--page-link:#0256fc;color-scheme:light}
:root[data-theme="dark"]{--page-bg:#101010;--page-text:#fff;--page-muted:#b5b5b5;--page-line:#444;--page-link:#fff;color-scheme:dark}
body{background:var(--page-bg);color:var(--page-text);transition:background-color .25s,color .25s}
.resume h1,.resume h2{color:var(--page-muted)}
a,a:hover{color:var(--page-link)}
.oracle iframe{background:var(--page-bg)}
.theme-toggle{position:absolute;top:16px;left:16px;z-index:10;min-height:44px;padding:0 16px;border:1px solid var(--page-line);border-radius:999px;background:var(--page-bg);color:var(--page-text);font:inherit;cursor:pointer}
.theme-toggle:focus-visible{outline:2px solid var(--page-link);outline-offset:3px}
:root[data-theme="dark"] .card{outline:1px solid rgba(255,255,255,.7);outline-offset:-1px}
.gallery{scrollbar-color:var(--page-line) transparent}
@media(max-width:1500px){.portfolio{padding-top:80px}}
.theme-toggle{width:44px;height:44px;padding:0;display:grid;place-items:center;font-size:22px;line-height:1}
.projects{gap:80px;padding-right:32px}
.case-heading{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.case-cover{width:min(100%,var(--card-size));min-width:0}
.case-cover>.card,.case-details>.card{width:100%;height:auto;aspect-ratio:1;min-width:0;flex:none}
.case-toggle{border:1px solid var(--page-line);border-radius:999px;background:transparent;color:var(--page-text);font:inherit;padding:14px 22px;min-height:48px;cursor:pointer;animation:case-float 3.5s ease-in-out infinite}
.case-toggle:hover{border-color:var(--page-text)}
.case-toggle:focus-visible{outline:2px solid var(--page-link);outline-offset:4px}
.is-expanded .case-toggle{animation:none}
.case-reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s ease,opacity .4s ease}
.case-reveal-clip{min-height:0;overflow:hidden}
.is-expanded .case-reveal{grid-template-rows:1fr;opacity:1}
.case-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--card-size)),var(--card-size)));gap:40px;padding-top:32px}
@keyframes case-float{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
@media(max-width:700px){.projects{gap:64px;padding:0 24px}.case-heading{gap:20px}.case-cover{width:100%}.case-cover .caption{margin:12px 0 0}.case-details{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:24px}.case-toggle{font-size:14px}}
@media(prefers-reduced-motion:reduce){.case-toggle{animation:none}.case-reveal{transition:none}}
.gallery{align-items:center}
.gallery>.card[hidden]{display:none}
.gallery>.case-toggle{flex:0 0 auto;margin-right:24px}
.project>.case-toggle{margin-top:20px}
.is-expanded .gallery>.card:not(:first-child){animation:case-reveal-right .5s ease both}
@keyframes case-reveal-right{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:700px){.projects{padding-right:0;padding-left:0}.project>.case-toggle{margin-left:24px}}
@media(prefers-reduced-motion:reduce){.is-expanded .gallery>.card{animation:none}}
.project>.case-toggle{display:block;width:max-content;max-width:100%;margin-top:16px;margin-left:max(0px,calc(var(--card-size) - 100%));animation:none}
.project{position:relative}
.project>.case-toggle{margin-left:0;transform:translateX(0)}
.case-toggle-row{width:min(100%,var(--card-size));display:flex;justify-content:flex-end;margin-top:16px}
.case-toggle-row>.case-toggle{animation:none}
@media(max-width:700px){.case-toggle-row{width:var(--card-size);margin-left:24px}}
/* Center the resume and first case card as a single composition. */
@media(min-width:701px){
  .portfolio{width:calc(318px + 20px + var(--card-size));max-width:calc(100% - 64px);margin-left:auto;margin-right:auto;grid-template-columns:318px minmax(0,1fr)}
  .projects{padding-right:0;max-width:none}
}
@media(min-width:701px) and (max-width:1500px){
  .portfolio{width:calc(278px + 28px + var(--card-size));grid-template-columns:278px minmax(0,1fr)}
}
@media(min-width:701px) and (max-width:1000px){
  .portfolio{width:calc(250px + 24px + var(--card-size));max-width:calc(100% - 48px);grid-template-columns:250px minmax(0,1fr)}
}
@media(min-width:701px){
  .project.is-expanded .gallery{width:calc(100% + (100vw - 100% - 318px - 20px)/2 - 24px);max-width:none}
}
@media(min-width:701px) and (max-width:1500px){
  .project.is-expanded .gallery{width:calc(100% + (100vw - 100% - 278px - 28px)/2 - 24px)}
}
@media(min-width:701px) and (max-width:1000px){
  .project.is-expanded .gallery{width:calc(100% + (100vw - 100% - 250px - 24px)/2 - 24px)}
}
.projects{gap:40px}
.oracle{width:88%;margin-left:auto;margin-right:auto}
@media(max-width:700px){.projects{gap:32px}}


.gallery{scrollbar-width:none;padding-bottom:0}
.gallery::-webkit-scrollbar{display:none;width:0;height:0}
.resume-download{margin-top:16px;padding:12px 18px;border:1px solid var(--page-line);border-radius:999px;text-decoration:none;color:var(--page-text)}
.resume-download:hover{border-color:var(--page-text);color:var(--page-text)}
button,a{-webkit-tap-highlight-color:transparent}
@media(max-width:700px){
  .portfolio{width:100%;max-width:100%;margin-inline:0;--card-size:min(calc(100vw - 48px),480px)}
  .projects,.project{width:100%;max-width:100%;min-width:0;padding-inline:0}
  .project.is-expanded .gallery{width:100%;max-width:100%;min-width:0;padding-inline:24px;overflow-x:auto;overflow-y:hidden}
  .caption{overflow-wrap:anywhere}
}
.gallery>img.card{cursor:zoom-in}
.gallery>img.card:focus-visible{outline:2px solid var(--page-link);outline-offset:-3px}
.image-viewer{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:64px 20px 20px;border:0;background:rgba(10,10,10,.96);color:white;overflow:hidden}
.image-viewer[open]{display:flex;align-items:center;justify-content:center}
.image-viewer::backdrop{background:rgba(0,0,0,.85)}
.viewer-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.viewer-close{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px;border:1px solid #ffffff80;border-radius:50%;background:#202020;color:white;font:32px/1 Arial,sans-serif;cursor:pointer}
.viewer-close:focus-visible{outline:2px solid white;outline-offset:3px}
@media(max-width:700px){.image-viewer{padding:64px 8px max(16px,env(safe-area-inset-bottom))}}
.gallery>.card{cursor:zoom-in}
.viewer-image{width:min(calc(100vw - 40px),calc(100dvh - 84px));height:min(calc(100vw - 40px),calc(100dvh - 84px));max-width:none;max-height:none}
.viewer-image>.viewer-card{display:block!important;width:100%;height:100%;max-width:none;object-fit:contain;aspect-ratio:1;cursor:default;animation:none!important;outline:none}
@media(max-width:700px){.viewer-image{width:min(calc(100vw - 16px),calc(100dvh - 84px));height:min(calc(100vw - 16px),calc(100dvh - 84px))}}
.gallery>.card,.gallery>.card *,.image-viewer,.image-viewer *{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.gallery img,.image-viewer img,.image-viewer video{-webkit-user-drag:none}
.gallery>.card:focus:not(:focus-visible),.viewer-close:focus:not(:focus-visible){outline:none}