@view-transition{navigation:auto}
::view-transition-old(root){animation:transition-old .18s ease-out both}
::view-transition-new(root){animation:transition-new .28s cubic-bezier(.16,1,.3,1) both}
html[data-transition-stage]::before,html[data-transition-stage]::after{position:fixed;z-index:100;pointer-events:none;content:""}
html[data-transition-stage="out"][data-page-transition="marker-swipe"]::before{inset:0;background:linear-gradient(176deg,transparent 0 39%,#11131c 40% 43%,#fff 44% 100%);clip-path:polygon(-10% 35%,-4% 43%,0 40%,8% 44%,18% 39%,29% 43%,41% 38%,53% 42%,65% 37%,78% 41%,90% 36%,110% 40%,110% 110%,-10% 110%);animation:marker-leave .18s cubic-bezier(.16,1,.3,1) both}
html[data-transition-stage="in"][data-page-transition="marker-swipe"]::before{inset:0;background:linear-gradient(176deg,transparent 0 39%,#11131c 40% 43%,#fff 44% 100%);clip-path:polygon(-10% 35%,-4% 43%,0 40%,8% 44%,18% 39%,29% 43%,41% 38%,53% 42%,65% 37%,78% 41%,90% 36%,110% 40%,110% 110%,-10% 110%);animation:marker-arrive .48s cubic-bezier(.16,1,.3,1) both}
html[data-page-transition="marker-swipe"]::after{top:calc(var(--transition-origin-y,18%) + 22px);left:calc(var(--transition-origin-x,50%) - 15px);width:30px;height:5px;border-radius:100%;background:var(--lime,#c7ff3d);transform:rotate(-10deg);animation:accent-fade .4s ease-out both}
html[data-transition-stage="out"][data-page-transition="doodle-circle"]::before,html[data-transition-stage="in"][data-page-transition="doodle-circle"]::before{top:var(--transition-origin-y,18%);left:var(--transition-origin-x,50%);width:22vmax;height:22vmax;border:4px solid #11131c;border-radius:48% 52% 47% 53%/52% 45% 55% 48%;background:rgba(255,255,255,.9);transform:translate(-50%,-50%) scale(.02);animation:doodle-circle .5s cubic-bezier(.16,1,.3,1) both}
html[data-page-transition="doodle-circle"]::after{top:calc(var(--transition-origin-y,18%) - 4px);left:calc(var(--transition-origin-x,50%) + 12px);width:23px;height:5px;border-radius:100%;background:var(--lime,#c7ff3d);transform:rotate(17deg);animation:accent-fade .35s ease-out both}
html[data-transition-stage="out"][data-page-transition="sketch-reveal"]::before,html[data-transition-stage="in"][data-page-transition="sketch-reveal"]::before{inset:0;background:linear-gradient(12deg,transparent 0 43%,#11131c 43.3% 43.9%,transparent 44.2%),linear-gradient(168deg,transparent 0 56%,#11131c 56.3% 56.8%,transparent 57.1%),linear-gradient(90deg,transparent 0 18%,rgba(199,255,61,.95) 18.2% 18.7%,transparent 18.9%);opacity:0;animation:sketch-reveal .46s cubic-bezier(.16,1,.3,1) both}
@keyframes transition-old{to{opacity:.96}}@keyframes transition-new{from{opacity:.985}to{opacity:1}}@keyframes marker-leave{from{transform:translateX(-105%)}to{transform:translateX(-58%)}}@keyframes marker-arrive{from{transform:translateX(-58%)}to{transform:translateX(110%)}}@keyframes accent-fade{0%{opacity:0;transform:rotate(-10deg) scale(.4)}30%{opacity:1}100%{opacity:0;transform:rotate(-10deg) scale(1.45)}}@keyframes doodle-circle{0%{opacity:0;transform:translate(-50%,-50%) scale(.02)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(8)}}@keyframes sketch-reveal{0%{opacity:0;transform:scale(.94)}25%{opacity:1}100%{opacity:0;transform:scale(1)}}
@media(max-width:680px){::view-transition-old(root){animation-duration:.12s}::view-transition-new(root){animation-duration:.2s}html[data-page-transition]::after{display:none}html[data-transition-stage="in"][data-page-transition="marker-swipe"]::before{animation-duration:.36s}html[data-transition-stage="out"][data-page-transition="marker-swipe"]::before{animation-duration:.14s}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}html[data-transition-stage]::before,html[data-transition-stage]::after{display:none}}