@view-transition{navigation:auto}
::view-transition-old(root){animation:220ms ease both studio-page-out}
::view-transition-new(root){animation:650ms cubic-bezier(.22,.8,.2,1) both studio-page-in}
@keyframes studio-page-out{to{opacity:0;transform:translateY(-16px)}}
@keyframes studio-page-in{from{opacity:0;transform:translateY(24px);clip-path:inset(5% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
html.motion-off::view-transition-old(root),html.motion-off::view-transition-new(root){animation:none}
.explorer-entry{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px 0;border-bottom:1px solid var(--line);margin-bottom:30px}.explorer-entry p{font-size:15px;color:var(--ink)}.explorer-entry p>span{display:block;font:8px Arial;letter-spacing:.15em;color:var(--muted);margin-bottom:11px}.explorer-entry a{display:flex;align-items:center;justify-content:space-between;gap:40px;font-size:12px;min-height:48px;border:1px solid #92988a;padding:13px 20px}.explorer-entry a:hover{background:var(--ink);color:var(--paper)}
.project-explorer{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;padding:0;margin:0;border:0;background:#191e18;color:#faf8f0;overflow:hidden;overscroll-behavior:contain;font-family:var(--font),sans-serif;box-sizing:border-box}.project-explorer:not([open]){display:none}.project-explorer::backdrop{background:#191e18}.project-explorer[open]{animation:explorer-open .65s cubic-bezier(.16,.8,.2,1) both}.project-explorer.is-closing{animation:explorer-close .35s cubic-bezier(.5,0,.7,.2) both}.project-explorer p{color:inherit}.project-explorer button,.project-explorer a{-webkit-tap-highlight-color:transparent}.project-explorer button{font:inherit;cursor:pointer}.project-explorer :focus-visible{outline:2px solid #fff;outline-offset:5px}.explorer-header{position:absolute;top:0;left:0;right:0;padding:28px 45px;display:flex;align-items:center;justify-content:space-between;gap:25px;z-index:10;background:linear-gradient(#1115,transparent)}.explorer-brand{font:600 28px Arial;letter-spacing:-1.5px}.explorer-label{font:9px Arial;letter-spacing:.13em;color:#e8eadd}.explorer-close{display:flex;align-items:center;justify-content:space-between;gap:23px;min-width:115px;min-height:44px;padding:11px 16px;border:1px solid #fff6;color:#fff;background:#13170e33;font-size:12px!important;backdrop-filter:blur(8px)}.explorer-close span{font:24px/1 Arial}.explorer-stage{position:absolute;inset:0 0 145px;isolation:isolate;touch-action:pan-y}.explorer-scene{position:absolute;inset:0;overflow:hidden;--mx:0;--my:0;z-index:1;background:#263123;clip-path:inset(0);transition:clip-path .85s cubic-bezier(.2,.7,.2,1)}.explorer-scene.entering{clip-path:inset(0 0 0 100%)}.explorer-scene.entering.reverse{clip-path:inset(0 100% 0 0)}.explorer-art{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:var(--image-position,center);transform:translate(calc(var(--mx)*-10px),calc(var(--my)*-8px)) scale(1.01);transition:transform .65s ease;z-index:-2;filter:brightness(.8)}.explorer-scene:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#111d12a1 0%,#111d1210 70%),linear-gradient(0deg,#101b14d9,transparent 70%);pointer-events:none}.explorer-copy{position:absolute;left:5.5%;right:38%;bottom:55px;z-index:3;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .7s}.entering .explorer-copy{transform:translateX(60px);opacity:0}.explorer-category{font-size:12px;letter-spacing:.03em;display:flex;align-items:center;gap:20px;color:#eef2e9!important;margin:0 0 30px}.explorer-category:before{content:'';display:inline-block;width:30px;height:1px;background:#dbe5cf}.explorer-name{font:400 clamp(76px,11.5vw,180px)/.9 Instrument,Georgia,serif;letter-spacing:-.035em;margin:0;color:#fcfbf2}.explorer-name.korean{font:400 clamp(70px,9vw,145px)/1.1 var(--font),sans-serif;letter-spacing:-.07em}.explorer-name.long{font-size:clamp(55px,7vw,110px);max-width:600px}.explorer-desc{font-size:17px;line-height:1.8;font-weight:400;color:#eef1e8!important;margin-top:30px;max-width:390px;word-break:keep-all}.explorer-preview{position:absolute;right:6%;top:23%;width:33%;height:54%;background:#edece5;border:1px solid #ffffff5c;box-shadow:0 30px 80px #0005;transform:perspective(1100px) rotateY(calc(-9deg + var(--mx)*3deg)) rotateX(calc(var(--my)*-3deg)) rotateZ(2deg);transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .8s;overflow:hidden;z-index:2}.entering .explorer-preview{opacity:0;transform:perspective(1100px) translateY(60px) rotateY(-20deg) rotateZ(5deg)}.explorer-preview-bar{height:26px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:#535e4a;font:7px Arial;letter-spacing:.1em}.explorer-preview-bar span:last-child{font-size:13px}.explorer-preview img{display:block;width:100%;height:calc(100% - 26px);object-fit:cover;object-position:top}.explorer-watermark{position:absolute;top:115px;left:5.5%;font:8px Arial;letter-spacing:.15em;color:#e6ead8b0}.explorer-actions{position:absolute;right:6%;bottom:48px;z-index:6;display:flex;align-items:center;gap:10px}.explorer-live,.explorer-quote{display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:12px;min-height:50px;padding:15px 22px;background:#f7f7ed;color:#20271c;transition:background .3s}.explorer-live:hover{background:#e1eaca}.explorer-live span{font-size:21px;line-height:1}.explorer-quote{background:transparent;color:#f4f7ec;border:1px solid #ffffff6b;padding-inline:18px}.explorer-quote:hover{background:#ffffff1a}.explorer-footer{height:145px;position:absolute;inset:auto 0 0;display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center;padding:25px 45px;background:#20261f;border-top:1px solid #ffffff14;z-index:10}.explorer-note{font-size:11px;line-height:1.9;color:#b0bca5!important;max-width:240px}.explorer-note small{display:block;font-size:9px;color:#91a084;margin-top:5px}.explorer-thumbs{display:flex;align-items:center;gap:9px}.explorer-thumb{width:68px;height:62px;border:1px solid transparent;padding:4px;background:transparent;opacity:.55;transition:opacity .3s,border-color .3s,transform .3s;position:relative;color:#fff}.explorer-thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}.explorer-thumb>span{position:absolute;bottom:7px;left:9px;font:8px Arial;color:#fff}.explorer-thumb[aria-current=true]{border-color:#d2ddc6;opacity:1;transform:translateY(-5px)}.explorer-thumb:hover{opacity:1}.explorer-pagination{display:flex;align-items:center;justify-self:end;gap:18px}.explorer-pagination>span{font:12px Arial;letter-spacing:.08em;color:#d3ddc9;min-width:50px;text-align:center}.explorer-arrow{width:48px;height:48px;display:grid;place-items:center;background:transparent;border:1px solid #75806b;color:#edf3e6;font-size:24px!important;transition:background .3s}.explorer-arrow:hover{background:#3e4937}.explorer-arrow:disabled{opacity:.2;cursor:default}.explorer-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.project-stage[data-depth]{--depth-x:0;--depth-y:0}.project-stage[data-depth] .site-window{transform:perspective(1200px) rotateX(calc(var(--depth-y)*-3deg)) rotateY(calc(var(--depth-x)*4deg)) rotate(2deg)}.project-stage[data-depth]:hover .site-window{transform:perspective(1200px) translateY(-10px) rotateX(calc(var(--depth-y)*-3deg)) rotateY(calc(var(--depth-x)*4deg)) rotate(0)}.more-projects>a{position:relative;isolation:isolate}.row-preview{position:absolute;left:44%;top:50%;width:220px;height:140px;object-fit:cover;opacity:0;transform:translate(-30px,-44%) rotate(-5deg) scale(.9);transition:opacity .3s,transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none;box-shadow:0 15px 40px #0006;z-index:4}.more-projects>a:hover .row-preview,.more-projects>a:focus-visible .row-preview{opacity:1;transform:translate(0,-50%) rotate(-3deg) scale(1)}
@keyframes explorer-open{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}@keyframes explorer-close{from{clip-path:inset(0)}to{clip-path:inset(0 0 100%)}}
@media(max-width:1100px){.explorer-header{padding:22px 30px}.explorer-footer{padding:20px 30px;gap:20px}.explorer-note{font-size:10px;max-width:190px}.explorer-note small{font-size:8px}.explorer-thumb{width:55px;height:53px}.explorer-pagination{gap:10px}.explorer-arrow{width:43px;height:43px}.explorer-preview{right:4%;width:36%}.explorer-copy{right:40%;left:5%}.explorer-actions{right:4%;gap:8px}.explorer-live,.explorer-quote{padding:13px 15px;gap:18px;font-size:11px}.explorer-desc{font-size:16px}}
@media(max-width:800px){.explorer-label{display:none}.explorer-header{padding:16px 22px}.explorer-stage{bottom:168px}.explorer-footer{height:168px;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 22px}.explorer-thumbs{grid-column:1/-1;grid-row:1;justify-content:center;gap:11px}.explorer-thumb{width:55px;height:47px}.explorer-pagination{grid-column:2;grid-row:2;gap:10px}.explorer-note{grid-column:1;grid-row:2;font-size:10px;line-height:1.6}.explorer-note small{display:none}.explorer-arrow{width:42px;height:42px}.explorer-copy{left:5%;right:5%;bottom:105px}.explorer-name{font-size:90px}.explorer-name.long{font-size:65px}.explorer-name.korean{font-size:85px}.explorer-desc{font-size:15px;line-height:1.7;max-width:310px;margin-top:20px}.explorer-category{margin-bottom:20px;font-size:11px}.explorer-preview{width:42%;height:40%;top:20%;right:7%}.explorer-actions{left:5%;right:5%;bottom:30px}.explorer-live{flex:1;max-width:280px;min-height:51px;font-size:12px}.explorer-quote{min-height:51px;font-size:12px}.explorer-watermark{top:95px;left:5%}.explorer-scene:after{background:linear-gradient(0deg,#0c180fe6 0%,#0b190f7a 40%,#16231710 80%)}.explorer-copy{text-shadow:0 2px 12px #0004}.row-preview{display:none}.explorer-entry{align-items:flex-start;flex-direction:column}.explorer-entry p{font-size:14px}.site-header nav.open{animation:studio-menu-in .35s cubic-bezier(.2,.7,.2,1) both}@keyframes studio-menu-in{from{clip-path:inset(0 0 100%);transform:translateY(-8px)}to{clip-path:inset(0);transform:none}}}
@media(max-width:600px){.explorer-header{padding:13px 20px}.explorer-brand{font-size:25px}.explorer-close{min-width:94px;gap:14px;font-size:11px!important;padding:10px 12px}.explorer-watermark{top:78px;font-size:7px;left:20px}.explorer-stage{bottom:154px}.explorer-preview{right:10%;top:18%;width:60%;height:36%;transform:perspective(800px) rotateY(-10deg) rotateZ(3deg)}.explorer-copy{left:20px;right:20px;bottom:100px}.explorer-name{font-size:70px;letter-spacing:-.035em}.explorer-name.long{font-size:53px;max-width:300px}.explorer-name.korean{font-size:68px}.explorer-category{font-size:10px;margin-bottom:16px;gap:12px}.explorer-category:before{width:20px}.explorer-desc{font-size:14px;line-height:1.65;margin-top:17px;max-width:280px}.explorer-actions{left:20px;right:20px;bottom:24px;gap:10px}.explorer-live,.explorer-quote{font-size:12px;padding:13px 16px;min-height:49px}.explorer-live{gap:15px}.explorer-quote{gap:0}.explorer-footer{height:154px;padding:15px 20px;gap:10px}.explorer-thumbs{gap:7px;justify-content:space-between}.explorer-thumb{width:48px;height:45px;padding:3px}.explorer-thumb>span{bottom:5px;left:6px;font-size:7px}.explorer-note{font-size:9px;max-width:180px}.explorer-pagination{gap:8px}.explorer-pagination>span{font-size:10px;min-width:39px}.explorer-arrow{width:40px;height:42px;font-size:21px!important}.explorer-scene:after{background:linear-gradient(0deg,#0c180ff2 0%,#102217b0 35%,#16231708 80%)}.explorer-entry a{width:100%;font-size:12px}.explorer-entry{padding-top:0}}
@media(max-width:360px){.explorer-header{padding-inline:16px}.explorer-footer{padding-inline:16px}.explorer-thumbs{gap:5px}.explorer-thumb{width:43px;height:42px}.explorer-name{font-size:61px}.explorer-name.long{font-size:46px}.explorer-name.korean{font-size:60px}.explorer-copy,.explorer-actions{left:16px;right:16px}.explorer-desc{font-size:13px}.explorer-live,.explorer-quote{font-size:11px;padding-inline:13px}.explorer-note{font-size:8px;max-width:135px}.explorer-pagination{gap:5px}.explorer-arrow{width:37px}.explorer-category{font-size:9px}}
@media(max-height:650px) and (min-width:801px){.explorer-stage{bottom:105px}.explorer-footer{height:105px;padding-block:15px}.explorer-copy{bottom:35px}.explorer-category{margin-bottom:18px}.explorer-name{font-size:100px}.explorer-desc{margin-top:18px;font-size:14px}.explorer-actions{bottom:35px}.explorer-preview{top:25%;height:45%}.explorer-watermark{display:none}}
@media(max-height:700px) and (max-width:800px){.explorer-stage{bottom:125px}.explorer-footer{height:125px;padding-block:10px;gap:5px}.explorer-thumb{height:36px}.explorer-preview{top:20%;height:30%;width:48%;right:7%}.explorer-copy{bottom:85px}.explorer-name{font-size:57px}.explorer-name.long{font-size:43px}.explorer-name.korean{font-size:56px}.explorer-category{margin-bottom:12px}.explorer-desc{font-size:12px;margin-top:12px}.explorer-actions{bottom:20px}.explorer-live,.explorer-quote{min-height:44px;padding-block:10px}.explorer-header{padding-block:10px}.explorer-watermark{top:66px}.explorer-note{font-size:8px}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}.project-explorer,.project-explorer *{animation:none!important;transition:none!important}.explorer-scene.entering{clip-path:inset(0)}.explorer-art,.project-stage[data-depth] .site-window{transform:none!important}.row-preview{transition:none}}
html.motion-off .project-explorer,html.motion-off .project-explorer *{animation:none!important;transition:none!important}html.motion-off .explorer-scene.entering{clip-path:inset(0)}html.motion-off .explorer-art{transform:none!important}
/* Preserve each website screenshot in its actual aspect ratio. */
.project-explorer .explorer-preview{height:auto}.project-explorer .explorer-preview img{height:auto;aspect-ratio:1.44;object-fit:contain}
@media(min-width:1101px){.explorer-preview{width:37%;right:5.5%;top:25%}}
@media(max-width:600px){.explorer-preview{width:68%;right:8%;top:18%}}
@media(max-height:700px) and (max-width:800px){.explorer-preview{width:48%;right:7%;top:20%}}
.explorer-arrow{min-width:44px;min-height:44px}.explorer-thumb{min-width:44px;min-height:44px}
.explorer-scenes{position:absolute;inset:0;z-index:1;isolation:isolate;pointer-events:none}
@media(max-width:360px){.explorer-thumbs{gap:4px}}
@media(max-height:500px) and (orientation:landscape){.explorer-preview{display:none}.explorer-header{padding:10px 20px}.explorer-watermark{display:none}.explorer-stage{bottom:70px}.explorer-footer{height:70px;display:flex;justify-content:space-between;padding:10px 20px}.explorer-thumbs{display:none}.explorer-copy{left:25px;right:42%;bottom:25px}.explorer-name,.explorer-name.korean{font-size:62px}.explorer-name.long{font-size:48px}.explorer-category{font-size:10px;margin-bottom:12px}.explorer-desc{font-size:12px;margin-top:12px;line-height:1.6}.explorer-actions{left:auto;right:25px;bottom:25px;display:flex;flex-direction:column;align-items:stretch;gap:8px}.explorer-live,.explorer-quote{min-height:44px;font-size:11px;padding:10px 15px}.explorer-label{display:none}}