.boot{--boot-bg: #111729;--boot-ink: #f4f4f5;--boot-muted: #a9b0c4;--boot-track: #252d47;--boot-pill: #f4f4f5;--boot-pill-ink: #0d0d0f;--boot-arc: #4da3ff;--boot-offset: #f4f4f5;--boot-ghost: rgba(255, 255, 255, .045);--boot-tape: #f4f4f5;--boot-tape-ink: #0d0d0f;--boot-tag: #f4f4f5;--boot-tag-ink: #0d0d0f;position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;background:var(--boot-offset);color:var(--boot-ink);font-family:Archivo,Helvetica Neue,Helvetica,Arial,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px}.boot--light{--boot-bg: #ececee;--boot-ink: #0d0d0f;--boot-muted: #4a4a50;--boot-track: #d7d7dc;--boot-pill: #0d0d0f;--boot-pill-ink: #ffffff;--boot-arc: #1873d3;--boot-offset: #0d0d0f;--boot-ghost: #e0e0e4;--boot-tape: #0d0d0f;--boot-tape-ink: #ffffff;--boot-tag: #0d0d0f;--boot-tag-ink: #ffffff}.boot__half{position:absolute;top:-24px;right:-24px;bottom:-24px;left:-24px;overflow:hidden;background:var(--boot-bg)}.boot__half--a{clip-path:polygon(0 0,100% 0,100% 37%,57% 49%,51% 44%,0 63%)}.boot__half--b{clip-path:polygon(0 63%,51% 44%,57% 49%,100% 37%,100% 100%,0 100%);transform:translate(9px,9px);animation:boot-crack .5s cubic-bezier(.2,1.35,.4,1) backwards;animation-delay:calc(.15s + var(--boot-delay, 0s))}.boot__ghost{position:absolute;font-size:clamp(96px,17vw,300px);font-style:italic;font-weight:900;line-height:.8;letter-spacing:-.04em;text-transform:uppercase;color:var(--boot-ghost);white-space:nowrap;rotate:-9deg}.boot__half--a .boot__ghost{left:3%;top:6%}.boot__half--b .boot__ghost{right:3%;bottom:6%}.boot__tape{position:absolute;left:-10%;right:-10%;overflow:hidden;padding:10px 0;background:var(--boot-tape);color:var(--boot-tape-ink);rotate:-9deg;font-size:22px;font-style:italic;font-weight:900;line-height:1;text-transform:uppercase;white-space:nowrap}.boot__half--a .boot__tape{top:22%}.boot__half--b .boot__tape{bottom:20%;background:#1873d3;color:#fff}.boot__track{display:inline-flex;animation:boot-tape 40s linear infinite;animation-delay:var(--boot-delay, 0s)}.boot__half--b .boot__track{animation-direction:reverse}.boot__track i{display:inline-block;width:11px;height:11px;margin:0 18px;background:var(--boot-arc);transform:skew(-20deg)}.boot__half--b .boot__track i{background:#fff}.boot__edge{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible}.boot__edge polyline{fill:none;stroke:var(--boot-arc);stroke-width:6;vector-effect:non-scaling-stroke}@keyframes boot-crack{0%{transform:translate(0)}}@keyframes boot-tape{to{transform:translate(-50%)}}.boot__tag,.boot__bars,.boot__label{position:relative}.boot__tag{display:flex;align-items:flex-start}.boot__main{transform:rotate(-5deg);filter:drop-shadow(4px 4px 0 var(--boot-arc));animation:boot-slam .5s cubic-bezier(.2,1.35,.4,1) backwards;animation-delay:calc(.15s + var(--boot-delay, 0s))}.boot__main>span{display:block;padding:11px 26px 11px 20px;background:var(--boot-tag);color:var(--boot-tag-ink);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);font-size:19px;font-weight:800}.boot__pill{margin:12px 0 0 -6px;transform:rotate(4deg);filter:drop-shadow(3px 3px 0 var(--boot-offset))}.boot__pill>span{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 14px;background:#1873d3;color:#fff;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);font:700 12px/1.3 JetBrains Mono,ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase}.boot__dot{width:7px;height:7px;border-radius:50%;background:#fff}.boot__b{translate:9px 9px;animation:boot-knock .5s cubic-bezier(.2,1.35,.4,1) backwards;animation-delay:calc(.15s + var(--boot-delay, 0s))}@keyframes boot-slam{0%{scale:1.14}}@keyframes boot-knock{0%{translate:0 0}}.boot__bars{display:flex;gap:6px}.boot__bars i{width:44px;height:8px;background:var(--boot-track);transform:skew(-24deg);overflow:hidden}.boot__bars i:after{content:"";display:block;height:100%;background:var(--boot-arc);transform-origin:left;transform:scaleX(0);animation:boot-fill 1.5s cubic-bezier(.16,1,.3,1) infinite}.boot__bars i:nth-child(2):after{animation-delay:.18s}.boot__bars i:nth-child(3):after{animation-delay:.36s}@keyframes boot-fill{0%{transform:scaleX(0);opacity:1}40%,80%{transform:scaleX(1);opacity:1}to{transform:scaleX(1);opacity:0}}.boot__label{margin:0;font:700 12px/1.3 JetBrains Mono,ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--boot-muted)}.boot--exit{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:transparent;pointer-events:none}.boot--exit:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--boot-offset);animation:boot-void .18s linear .08s forwards}@keyframes boot-void{to{opacity:0}}.boot--exit .boot__half--a,.boot--exit .boot__main{animation:boot-split-a .6s cubic-bezier(.7,0,.2,1) .08s forwards}.boot--exit .boot__half--b,.boot--exit .boot__b{animation:boot-split-b .6s cubic-bezier(.7,0,.2,1) .08s forwards}@keyframes boot-split-a{to{translate:-14vw -84vh}}@keyframes boot-split-b{to{translate:calc(14vw + 9px) calc(84vh + 9px)}}@media (prefers-reduced-motion: reduce){.boot__bars i:after{animation-duration:4s}.boot__track,.boot__half--b,.boot__main,.boot__b{animation:none}}.boot__extra{color:#4da3ff;font-size:14px;font-weight:700}.boot--light .boot__extra{color:#1468c0}
