/* A little mischief, without moving the content you're reading. */
.hero h1>span{isolation:isolate}
.hero h1>span:before{content:'';position:absolute;inset:7px -9px -2px;background:#DEFF7A;z-index:-1;border-radius:48% 42% 38% 40%;transform:rotate(-3deg);animation:highlight-swipe .75s .15s both cubic-bezier(.16,1,.3,1)}
.hero h1 svg{animation:underline-draw .7s .45s both}
.hero-note>span{animation:star-hello 1.3s .25s both cubic-bezier(.34,1.56,.64,1)}
.hero-note b{display:block;animation:arrow-nudge .75s 1.1s 2}
.wordmark span{transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s}
.wordmark:hover span{transform:rotate(10deg) translateY(-3px);background:#DEFF7A}
.wordmark:hover i{animation:star-hello .7s both}
.search-wrap{transition:box-shadow .25s,transform .25s,border-color .25s}
.search-wrap:focus-within{box-shadow:5px 5px 0 #e7deff;transform:translateY(-2px)}
.search-wrap:focus-within>svg{animation:search-wiggle .45s}
.button{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s}
.button:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:3px 4px 0 #19192320}
.button:active{transform:translateY(1px) scale(.96);box-shadow:none}
.drop:hover>svg{transform:rotate(90deg)}
.drop>svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.categories button{transition:background .2s,transform .25s,border-color .2s}
.categories button:hover{transform:translateY(-3px) rotate(-3deg)}
.categories button.selected{animation:pill-pop .35s both}
.tabs button.selected:after{animation:highlight-swipe .3s both;transform-origin:left}
.card{animation:none;transition:box-shadow .25s,border-color .25s}
.card.awaiting-reveal{opacity:0}
.card.pop-in{animation:card-splash .85s var(--reveal-delay,0ms) both;transform-origin:50% 15%}
.card:hover{box-shadow:5px 7px 0 #e9e2ff;border-color:#c9bbed}
.card:hover .card-visual .visual{transform:none}
.card-visual .visual:after{content:'take a closer look ↗';position:absolute;bottom:13px;right:12px;padding:8px 11px;border:1px solid #191923;background:#DEFF7A;color:#191923;border-radius:7px;font-size:10px;font-weight:700;box-shadow:2px 2px 0 #191923;opacity:0;transform:translateY(20px) rotate(7deg);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;pointer-events:none}
.card:focus-within .visual:after{opacity:1;transform:translateY(0) rotate(-3deg)}
.card-actions>a svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.card-actions>a:hover svg{transform:translateX(5px)}
.save:hover{color:#7055FF}
.save-pop svg{animation:bookmark-pop .55s both}
.save-burst{position:fixed;pointer-events:none;z-index:100;contain:layout style}
.save-burst i{position:absolute;width:7px;height:10px;border-radius:2px;animation:confetti-fly .85s both cubic-bezier(.12,.7,.3,1)}
.save-burst i:nth-child(3n){border-radius:50%;width:8px;height:8px}
#toast{border:1px solid #191923;background:#DEFF7A;color:#191923;font-weight:600;box-shadow:4px 4px 0 #191923;transition:opacity .2s,transform .4s cubic-bezier(.34,1.56,.64,1)}
#toast.visible{transform:translate(-50%,0) rotate(-1deg)}
.drop-dialog[open]{animation:modal-pop .45s both cubic-bezier(.34,1.56,.64,1)}
.drop-dialog[open]::backdrop{animation:backdrop-in .3s both}
.drop-dialog .modal-star{animation:star-hello .8s both}
.empty>span{animation:star-hello .8s both}
@media(hover:hover) and (pointer:fine){
.card:hover .visual:after{opacity:1;transform:translateY(0) rotate(-3deg)}
.card:hover .diagram{animation:paper-shuffle .65s both}
.card:hover .branches span{animation:node-hop .55s both}
.card:hover .branches span:nth-child(2){animation-delay:.09s}
.card:hover .branches span:nth-child(3){animation-delay:.18s}
.card:hover .quote-sheet,.card:hover .receipt,.card:hover .document,.card:hover .task-sheet{animation:paper-shuffle .65s both}
.card:hover .task-sheet i{animation:bookmark-pop .5s both}
.card:hover .task-sheet p:nth-child(3) i{animation-delay:.15s}
.card:hover .type-art .art-star{animation:star-hello .8s both}
.card:hover .type-art .art-arrow{animation:arrow-nudge .5s 2}
.card:hover .trip-path>span,.card:hover .flow>span{animation:node-hop .5s both}
.card:hover .trip-path>span:nth-of-type(2),.card:hover .flow>span:last-child{animation-delay:.15s}
.card:hover .bar-demo i{transform-origin:left;animation:bar-grow .65s both}
.card:hover .bar-demo p:nth-of-type(2) i{animation-delay:.08s}
.card:hover .bar-demo p:nth-of-type(3) i{animation-delay:.16s}
.card:hover .chart-demo svg path:not(:first-child){stroke-dasharray:350;animation:chart-draw 1.1s both}
.card:hover .terminal{animation:terminal-tilt .55s both}
.card:hover .cursor{animation:cursor-blink .5s 3}
.card:hover .diff p{animation:node-hop .5s both}
.card:hover .diff p+p{animation-delay:.15s}
.card:hover .brief-sheet,.card:hover .matrix{animation:paper-shuffle .65s both}
}
@keyframes card-splash{0%{opacity:0;transform:translateY(-42px) rotate(var(--entry-tilt,-3deg)) scale(.92,.96)}45%{opacity:1;transform:translateY(9px) rotate(1deg) scale(1.015,.975)}65%{transform:translateY(-5px) rotate(-.5deg) scale(.995,1.01)}82%{transform:translateY(2px) rotate(0) scale(1)}100%{opacity:1;transform:none}}
@keyframes highlight-swipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes underline-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes star-hello{0%{transform:rotate(-100deg) scale(.4)}65%{transform:rotate(20deg) scale(1.15)}100%{transform:rotate(0) scale(1)}}
@keyframes arrow-nudge{0%,100%{translate:0 0}50%{translate:-5px 6px}}
@keyframes search-wiggle{0%,100%{rotate:0deg}30%{rotate:-15deg}70%{rotate:12deg}}
@keyframes pill-pop{0%{scale:.9}60%{scale:1.06}100%{scale:1}}
@keyframes bookmark-pop{0%,100%{transform:scale(1)}40%{transform:scale(1.45) rotate(-15deg)}70%{transform:scale(.92) rotate(8deg)}}
@keyframes confetti-fly{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.4)}65%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.7)}}
@keyframes modal-pop{from{opacity:0;transform:translateY(30px) rotate(-3deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes paper-shuffle{0%,100%{translate:0 0;rotate:0deg}35%{translate:0 -8px;rotate:4deg}70%{translate:0 -2px;rotate:-2deg}}
@keyframes node-hop{0%,100%{translate:0 0}45%{translate:0 -9px}75%{translate:0 2px}}
@keyframes bar-grow{from{scale:.2 1}70%{scale:1.04 1}to{scale:1 1}}
@keyframes chart-draw{from{stroke-dashoffset:350}to{stroke-dashoffset:0}}
@keyframes terminal-tilt{0%,100%{rotate:0deg}40%{rotate:3deg;translate:0 -4px}70%{rotate:-1deg}}
@keyframes cursor-blink{50%{opacity:0}}
@media(max-width:700px){.hero h1>span:before{inset:5px -5px 0}.card.pop-in{animation-duration:.65s}.card-visual .visual:after{font-size:10px}.hero h1>span{margin-top:3px}}
@media(prefers-reduced-motion:reduce){.card.awaiting-reveal{opacity:1}.save-burst{display:none}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.button:hover,.button:active,.categories button:hover,.search-wrap:focus-within{transform:none}}