html.transition-boot{background:#81D8D0}
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:0s}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.transition-boot:before,html.transition-boot:after{position:fixed;z-index:2147483647;color:#090a0b;pointer-events:none;visibility:visible}
html.transition-boot:before{content:attr(data-transition-label);left:clamp(28px,5vw,88px);top:50%;max-width:82vw;transform:translateY(-50%);font:600 clamp(56px,10vw,164px)/.86 Inter,"Noto Sans KR",sans-serif;letter-spacing:-.04em;text-transform:uppercase}
html.transition-boot:after{content:"LOADING NEXT VIEW";right:clamp(28px,5vw,88px);top:50%;padding-left:38px;transform:translateY(-50%);background:linear-gradient(#090a0b,#090a0b) left center/28px 1px no-repeat;font:500 11px "DM Mono",monospace;letter-spacing:.12em;white-space:nowrap}
.nav-loader{position:fixed;z-index:1199;inset:0;display:grid;place-items:center;background:#090a0b;opacity:0;pointer-events:none;transition:opacity .16s ease;will-change:opacity}
.nav-loader:before{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 40 40'%3E%3Cg fill='%23090a0c'%3E%3Crect x='18.36' y='6.7' width='5.28' height='14.52' rx='2.64'/%3E%3Crect x='18.36' y='22.98' width='5.28' height='12.32' rx='2.64'/%3E%3Crect x='11.32' y='13.08' width='5.28' height='14.52' rx='2.64'/%3E%3Crect x='25.4' y='13.08' width='5.28' height='14.52' rx='2.64'/%3E%3Ccircle cx='6.92' cy='20.34' r='2.64'/%3E%3Ccircle cx='35.08' cy='20.34' r='2.64'/%3E%3C/g%3E%3C/svg%3E");background-size:100% 100%;position:relative;z-index:2;display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background-color:#81D8D0;color:#090a0b;font:800 21px Inter,"Noto Sans KR",sans-serif;box-shadow:0 12px 34px rgba(0,0,0,.32);transform:scale(.82);transition:transform .34s cubic-bezier(.16,1,.3,1)}
.nav-loader:after{content:"BONGCHAN  ·  LOADING";position:absolute;left:50%;top:calc(50% + 70px);transform:translateX(-50%);color:#f3f1ea;font:500 10px "DM Mono",monospace;letter-spacing:.16em;white-space:nowrap;opacity:.62}
.nav-loader i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#81D8D0;opacity:.35;transform-origin:3px 50px}
.nav-loader i:nth-child(1){transform:translateY(-50px)}.nav-loader i:nth-child(2){transform:rotate(45deg) translateY(-50px);opacity:.62}.nav-loader i:nth-child(3){transform:rotate(90deg) translateY(-50px);opacity:1}
body.nav-pending{overflow:hidden}body.nav-pending .nav-loader{opacity:1}body.nav-pending .nav-loader:before{transform:scale(1)}body.nav-pending .nav-loader i{animation:loaderOrbit .82s linear infinite}
html body .page-wipe{position:fixed;z-index:1200;inset:0;display:block;background:#81D8D0;color:#090a0b;pointer-events:none;overflow:hidden;transform:translate3d(100%,0,0);animation:none;will-change:transform}
.page-wipe .transition-copy{position:absolute;left:clamp(28px,5vw,88px);right:clamp(28px,5vw,88px);top:50%;display:flex;align-items:center;justify-content:space-between;gap:30px;transform:translateY(-50%);opacity:0}
.transition-copy strong{max-width:82vw;font:600 clamp(56px,10vw,164px)/.86 Inter,"Noto Sans KR",sans-serif;letter-spacing:-.04em;text-transform:uppercase}
.transition-copy small{display:flex;align-items:center;gap:9px;font:500 11px "DM Mono",monospace;letter-spacing:.12em;white-space:nowrap}.transition-copy small:before{content:"";width:28px;height:1px;background:currentColor}
.transition-progress{position:absolute;right:clamp(28px,5vw,88px);bottom:clamp(28px,5vw,64px);display:flex;gap:10px}.transition-progress i{width:9px;height:9px;border:1px solid #090a0b;border-radius:50%;opacity:.3}.transition-progress i:first-child{background:#090a0b;opacity:1}.transition-progress i:nth-child(2){animation:dotFill .7s .18s both}.transition-progress i:nth-child(3){animation:dotFill .7s .48s both}
body.transition-covering .page-wipe{transition:transform .48s cubic-bezier(.76,0,.24,1);transform:translate3d(0,0,0)}body.transition-covered .page-wipe{transform:translate3d(0,0,0)}body.transition-covered .transition-copy{opacity:1;transition:opacity .2s ease}
body.transition-arrival .page-wipe{transform:translate3d(0,0,0)}body.transition-arrival .transition-copy{opacity:1}body.transition-reveal .page-wipe{transition:transform .56s cubic-bezier(.76,0,.24,1);transform:translate3d(-100%,0,0)}
@keyframes loaderOrbit{to{rotate:360deg}}@keyframes dotFill{to{background:#090a0b;opacity:1}}
@media(max-width:700px){html.transition-boot:before{top:48%;font-size:clamp(52px,17vw,92px)}html.transition-boot:after{left:28px;right:auto;top:31%;transform:none}.page-wipe .transition-copy{align-items:flex-start;flex-direction:column}.transition-copy strong{font-size:clamp(52px,17vw,92px)}.transition-copy small{order:-1}}
@media(prefers-reduced-motion:reduce){.nav-loader i{animation:none!important}html body .page-wipe{transition:none!important;animation:none!important}.page-wipe .transition-copy{transition:opacity .12s ease!important}body.transition-covering .page-wipe,body.transition-arrival .page-wipe{transform:none}body.transition-reveal .page-wipe{transform:none;opacity:0;transition:opacity .16s ease!important}}