.paper{color:var(--foreground)}:is(button,[role=button],summary,label:has(>input)):not(:disabled){cursor:pointer}.piece-line-top{clip-path:inset(0 0 calc(100% - var(--split)) 0)}.piece-line-bottom{clip-path:inset(var(--split) 0 0 0)}@keyframes piece-line-out{to{opacity:0;filter:blur(6px);transform:translate(-7%)}}.piece-out-top{animation:.46s cubic-bezier(.55,0,.9,.4) both piece-line-out}.piece-out-bottom{animation:.46s cubic-bezier(.55,0,.9,.4) 90ms both piece-line-out}@keyframes piece-write-top{0%{clip-path:inset(0 100% calc(100% - var(--split)) 0)}}@keyframes piece-write-bottom{0%{clip-path:inset(var(--split) 100% 0 0)}}.piece-in-top{animation:.82s cubic-bezier(.65,0,.25,1) .3s both piece-write-top}.piece-in-bottom{animation:.82s cubic-bezier(.65,0,.25,1) .48s both piece-write-bottom}.piece-head{pointer-events:none;position:absolute;inset-inline:0}.piece-head-top{height:var(--split);top:0}.piece-head-bottom{top:var(--split);bottom:0}.piece-head span{background:#f5d46e;border-radius:4px;width:4px;margin-left:-2px;position:absolute;top:10%;bottom:6%;box-shadow:0 0 0 3px #f5d46e4d,0 0 28px 8px #f5d46e8c}@keyframes piece-pen{0%{opacity:0;left:0%}8%{opacity:1}90%{opacity:1}to{opacity:0;left:100%}}.piece-head-top span{animation:.82s cubic-bezier(.65,0,.25,1) .3s both piece-pen}.piece-head-bottom span{animation:.82s cubic-bezier(.65,0,.25,1) .48s both piece-pen}@keyframes piece-label-in{0%{opacity:0;transform:translateY(10px)}}.piece-label{animation:.52s cubic-bezier(.2,.7,.2,1) .28s both piece-label-in}@keyframes piece-fade-in{0%{opacity:0}}.piece-fade-in{animation:.4s both piece-fade-in}@keyframes hero-rise{0%{opacity:0;filter:blur(6px);transform:translateY(28px)}}@keyframes breve-up{0%{transform:translateY(85%)}55%{transform:translateY(-7%)}78%{transform:translateY(2%)}to{transform:translateY(0)}}@keyframes breve-hello{0%,to{transform:rotate(0)}25%{transform:rotate(-6deg)}55%{transform:rotate(4deg)}80%{transform:rotate(-1.5deg)}}@keyframes breve-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3%)}}@keyframes said-pop{0%{opacity:0;transform:translateY(14px)scale(.6)}60%{opacity:1;transform:scale(1.04)}to{transform:scale(1)}}@media (prefers-reduced-motion:no-preference){.hero-rise{animation:hero-rise .9s cubic-bezier(.2, .7, .2, 1) var(--delay,0s) both}.breve-up{animation:1s cubic-bezier(.3,.6,.3,1) .45s both breve-up}.breve-hello{transform-origin:50% 90%;animation:1.1s ease-in-out 1.35s both breve-hello}.breve-bob{animation:3.4s ease-in-out 2.6s infinite breve-bob}.said-pop{transform-origin:85% 100%;animation:.6s cubic-bezier(.3,.7,.3,1) 1.5s both said-pop}}@keyframes improvise-play{0%{left:var(--from);opacity:0}8%{opacity:.6}90%{opacity:.6}to{left:var(--to);opacity:0}}.improvise-playhead{animation:improvise-play var(--duration) linear both}.improvise-paused *{animation-play-state:paused}@keyframes finger-pop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.25)}to{transform:scale(1)}}@keyframes level-grow{0%{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}@keyframes level-breve-pop{0%{opacity:0;transform:translateY(45%)scale(.3)}55%{opacity:1;transform:translateY(-10%)scale(1.08)}78%{transform:translateY(3%)scale(.97)}to{transform:none}}.finger-pop{transform-box:fill-box;transform-origin:50%}[data-reveal=waiting] .finger-pop{opacity:0;transform:scale(0)}[data-reveal=playing] .finger-pop{animation:.52s cubic-bezier(.3,.7,.3,1) both finger-pop}.level-breve{transform-origin:50% 100%}[data-reveal=waiting] :is(.level-step,.level-breve){visibility:hidden}[data-reveal=playing] .level-step{animation:level-grow .7s cubic-bezier(.2, .8, .2, 1) var(--delay) both}[data-reveal=playing] .level-breve{animation:level-breve-pop .7s cubic-bezier(.3, .7, .3, 1) var(--delay) both}@keyframes tour-progress{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.tour-progress{transform-origin:top;animation:tour-progress var(--every) linear both}.tour-progress.tour-full{animation:none}.hook-mark{--mark-y:88%;--mark-h:36%;background:linear-gradient(#f5d46e, #f5d46e) no-repeat 0 var(--mark-y) / 100% var(--mark-h);margin:0 -.06em;padding:0 .06em}@keyframes hook-mark{0%{background-size:0% var(--mark-h)}}@keyframes hook-day{to{fill:#fbe7a6}}[data-reveal=waiting] .hook-mark{background-size:0% var(--mark-h)}[data-reveal=playing] .hook-mark{animation:.8s cubic-bezier(.6,0,.2,1) .25s both hook-mark}[data-reveal=shown] .hook-day{fill:#fbe7a6}[data-reveal=playing] .hook-day{animation:hook-day .4s ease var(--delay) both}.hook-breve{transform-origin:50% 100%}[data-reveal=waiting] .hook-breve{visibility:hidden}[data-reveal=playing] .hook-breve{animation:.7s cubic-bezier(.3,.7,.3,1) 1.1s both level-breve-pop}.hook-pulse{opacity:0}@keyframes hook-pulse{0%{opacity:.55;transform:scale(1)}70%,to{opacity:0;transform:scale(1.25,1.7)}}@keyframes hook-note{0%{opacity:0;transform:translateY(40px)rotate(-10deg)}12%{opacity:.14}50%{transform:translate(16px,-340px)rotate(6deg)}85%{opacity:.14}to{opacity:0;transform:translate(-6px,-720px)rotate(-6deg)}}@media (prefers-reduced-motion:no-preference){.hook-pulse{animation:2.6s ease-out infinite hook-pulse}.hook-note{animation:hook-note var(--seconds) linear var(--delay) infinite}}
