.rv-bars i{background:color-mix(in srgb, var(--sky-ink) 24%, transparent);border-radius:2px;flex:1;height:3px;overflow:hidden}.rv-bars b{background:var(--sky-ink);width:0;height:100%;display:block}.rv-bars i[data-state=done] b{width:100%}.rv-bars i[data-state=now] b{animation:rv-fill var(--d) linear forwards}.rv-bars[data-paused=true] i[data-state=now] b{animation-play-state:paused}.rv:not([data-keys]) :focus-visible{outline-color:#0000}@media (prefers-reduced-motion:no-preference){.rv-photo{animation:1.1s both rv-photo-in}.rv-photo img{animation:5s ease-out both rv-push}}@keyframes rv-photo-in{0%{opacity:0}to{opacity:1}}@keyframes rv-push{0%{transform:scale(1)}to{transform:scale(1.05)}}@keyframes rv-fill{to{width:100%}}@media (prefers-reduced-motion:no-preference){.rv-beat>*{animation:.9s cubic-bezier(.2,.7,.2,1) both rv-rise}.rv-beat>:nth-child(2){animation-delay:.12s}.rv-beat>:nth-child(3){animation-delay:.24s}.rv-beat>:nth-child(4){animation-delay:.36s}.rv-beat>:nth-child(5){animation-delay:.48s}}@keyframes rv-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@layer components{.eq{align-items:flex-end;gap:7px;height:84px;display:flex}.eq i{background:var(--sky-ink);transform-origin:bottom;border-radius:6px;width:10px;height:100%;transform:scaleY(.35)}@media (prefers-reduced-motion:no-preference){.eq i{animation:1.1s ease-in-out infinite alternate eq}.eq i:nth-child(2){animation-duration:.8s}.eq i:nth-child(3){animation-duration:1.3s}.eq i:nth-child(4){animation-duration:.95s}.eq i:nth-child(5){animation-duration:1.2s}.eq[data-paused=true] i,[data-paused=true] .eq i{animation-play-state:paused}.eq[data-still] i{animation:none}}@keyframes eq{0%{transform:scaleY(.2)}to{transform:scaleY(1)}}}@keyframes ring-seg{0%{opacity:.12}to{opacity:1}}@media (orientation:landscape) and (max-height:480px){.rv-beat{--art:calc(100svh - 104px);justify-content:center;row-gap:6px;padding:52px 24px 48px}.rv-beat:has(>:is(canvas,.eq,.aspect-square,.rv-art)){grid-template-rows:1fr auto auto auto auto 1fr;grid-template-columns:auto minmax(0,24rem);column-gap:40px}.rv-beat:has(>:is(canvas,.eq,.aspect-square,.rv-art)):before{content:"";grid-area:1/2}.rv-beat:has(>:is(canvas,.eq,.aspect-square,.rv-art))>*{grid-column:2}.rv-beat:has(>:is(canvas,.eq,.aspect-square,.rv-art))>:is(canvas,.eq,.aspect-square,.rv-art){max-width:40vw;max-height:var(--art);grid-area:1/1/-1/2;align-self:center;margin:0}.rv-beat:has(>:is(canvas,.eq,.aspect-square,.rv-art))>.aspect-square{width:min(40vw, var(--art))}.rv-beat:has(>:is(canvas,.eq,.aspect-square,.rv-art))>.rv-art[data-print=one]{width:calc(var(--art) * .73)}.rv-beat:has(>:is(canvas,.eq,.aspect-square,.rv-art))>.rv-art[data-print=three]{width:min(42vw, calc(var(--art) * 1.33));max-width:42vw}.rv-beat:not(:has(>:is(canvas,.eq,.aspect-square,.rv-art))){grid-template-columns:minmax(0,34rem)}.rv-beat .rv-note{max-width:min(46rem,100%);font-size:clamp(1rem,4.6svh,1.375rem);line-height:1.35}.rv-beat:has(>.rv-note){grid-template-columns:minmax(0,46rem);padding-block:48px 40px}.rv-beat .text-clock{font-size:3.5rem}.rv-beat .text-figure{font-size:3.25rem}}
