.shift-tile{background:color-mix(in srgb, var(--shift-text,#f2ead9) 4%, transparent);border:1px solid var(--shift-hair,#f2ead91f);border-radius:6px;transition:transform .14s ease-out,border-color .14s ease-out,box-shadow .14s ease-out}@media (hover:hover){.shift-tile:hover{animation:.42s cubic-bezier(.05,.7,.35,.99) forwards shift-tile-lift}}@keyframes shift-tile-lift{to{border-color:color-mix(in srgb, var(--shift-accent1,#ff6c2f) 55%, transparent);box-shadow:4px 4px 0 0 color-mix(in srgb, var(--shift-accent4,#0078bf) 35%, transparent);transform:translateY(-3px)}}.shift-float{animation:7s ease-in-out infinite shift-float}.shift-float-b{animation-duration:11s;animation-delay:-3s}.shift-float-c{animation-duration:13s;animation-delay:-5s}@keyframes shift-float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-5px)rotate(-2deg)}}.shift-bar{transform-box:fill-box;transform-origin:bottom;animation:3s cubic-bezier(.05,.7,.35,.99) infinite alternate shift-bar}.shift-bar:nth-of-type(2){animation-duration:5s}.shift-bar:nth-of-type(3){animation-duration:7s}.shift-bar:nth-of-type(4){animation-duration:11s}@keyframes shift-bar{0%{transform:scaleY(.55)}to{transform:scaleY(1)}}.shift-blink{animation:1.1s steps(2,jump-none) infinite shift-blink}@keyframes shift-blink{50%{opacity:0}}.shift-orbit{transform-box:view-box;transform-origin:50%;animation:37s linear infinite shift-orbit}.shift-orbit-rev{animation-duration:53s;animation-direction:reverse}@keyframes shift-orbit{to{transform:rotate(360deg)}}.shift-pulse{animation:2.3s cubic-bezier(.05,.7,.35,.99) infinite shift-pulse}@keyframes shift-pulse{0%{opacity:.9;filter:blur();clip-path:circle(35%)}to{opacity:0;filter:blur(2px);clip-path:circle(50%)}}@supports (animation-timeline:view()){.shift-reveal{animation:linear both shift-reveal;animation-timeline:view();animation-range:entry entry 70%}.shift-reveal-2{animation-range:entry 10% entry 80%}.shift-reveal-3{animation-range:entry 20% entry 90%}.shift-draw-x,.shift-draw-y{animation:linear both shift-draw-x;animation-timeline:view();animation-range:entry 30% cover 50%}.shift-draw-y{animation-name:shift-draw-y}}@keyframes shift-reveal{0%{opacity:0;filter:blur(6px);transform:translateY(28px)}to{opacity:1;filter:none;transform:none}}@keyframes shift-draw-x{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes shift-draw-y{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.shift-tile,.shift-tile:hover,.shift-float,.shift-bar,.shift-blink,.shift-orbit,.shift-pulse,.shift-reveal,.shift-draw-x,.shift-draw-y{transition:none;animation:none!important}}svg .shift-float{transform-box:fill-box;transform-origin:50%}[data-shift-kind=pixel] .shift-tile{background:color-mix(in srgb, var(--shift-text,#f8f5ec) 7%, transparent);clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));border:none;border-radius:0}@keyframes shift-tile-lift-pixel{to{background:color-mix(in srgb, var(--shift-text,#f8f5ec) 11%, transparent);transform:translate(-2px,-2px)}}@media (hover:hover){[data-shift-kind=pixel] .shift-tile:hover{animation-name:shift-tile-lift-pixel;animation-duration:.16s;animation-timing-function:steps(2,end)}}[data-shift-kind=pixel] .shift-badge{box-shadow:3px 3px 0 0 var(--shift-accent4,#428690);border-radius:0}[data-shift-kind=pixel] .font-mono{font-family:var(--font-tiny5), ui-monospace, monospace;letter-spacing:.08em}[data-shift-kind=pixel] .shift-float{animation-name:shift-float-pixel;animation-timing-function:step-end}@keyframes shift-float-pixel{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}[data-shift-kind=pixel] .shift-bar{animation-timing-function:steps(4,end)}@media (prefers-reduced-motion:reduce){[data-shift-kind=pixel] .shift-tile:hover,[data-shift-kind=pixel] .shift-float,[data-shift-kind=pixel] .shift-bar{animation:none!important}}
