.dc{-webkit-user-select:none;user-select:none}.dc-plot{touch-action:pan-y;-webkit-tap-highlight-color:transparent;border-radius:8px;outline:none;padding-top:34px;position:relative}.dc-plot:focus-visible{box-shadow:0 0 0 6px var(--bg), 0 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent)}.dc-bars{grid-template-columns:repeat(24,minmax(0,1fr));align-items:end;gap:3px;height:112px;display:grid}.dc-bar{height:var(--h);background:color-mix(in srgb, var(--fg) 16%, transparent);transform-origin:bottom;transition:background-color .16s var(--ease);border-radius:6px 6px 2px 2px}.dc-bar.is-empty{background:color-mix(in srgb, var(--fg) 7%, transparent);height:3px}.dc-bar.is-now{background:color-mix(in srgb, var(--fg) 26%, transparent)}.dc-bar.is-on{background:color-mix(in srgb, var(--accent) 65%, transparent)}.dc-bar.is-peak{background:var(--accent)}.dc.is-playing .dc-bar{animation:dc-rise .7s var(--ease) backwards;animation-delay:calc(var(--k) * 18ms)}.dc.is-playing .dc-bar.is-peak{animation:dc-rise .7s var(--ease) backwards, dc-lit .5s var(--ease) backwards;animation-delay:calc(var(--k) * 18ms), .64s}.dc.is-playing .dc-tip{animation:dc-fade .42s var(--ease) .72s backwards}.dc.is-playing .dc-world{animation:dc-fade .42s var(--ease) .82s backwards}.dc.is-waiting.is-playing :is(.dc-bar,.dc-tip,.dc-world){animation-play-state:paused}@keyframes dc-rise{0%{transform:scaleY(0)}}@keyframes dc-lit{0%{background:color-mix(in srgb, var(--fg) 16%, transparent)}}.dc-tip{top:0;left:var(--cx,0px);translate:min(max(-50%, calc(-1 * var(--cx,0px))), calc(var(--pw,0px) - var(--cx,0px) - 100%)) 0;white-space:nowrap;font:500 15px/22px var(--font);font-variant-numeric:tabular-nums;color:var(--muted);pointer-events:none;transition:left .2s var(--ease), translate .2s var(--ease);align-items:baseline;gap:6px;display:flex;position:absolute}.dc-tip b{color:var(--fg);font-weight:600}.dc-tip [hidden]{display:none}@keyframes dc-fade{0%{opacity:0;transform:translateY(6px)}}.dc-axis{height:22px;font:500 14px/22px var(--font);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:10px;position:relative}.dc-tick{position:absolute;top:0}.dc-now{top:0;left:var(--cx,0px);translate:min(max(-50%, calc(-1 * var(--cx,0px))), calc(var(--pw,0px) - var(--cx,0px) - 100%)) 0;color:var(--fg);align-items:center;gap:6px;font-weight:600;display:flex;position:absolute}.dc-dot{background:var(--up);width:7px;height:7px;animation:dc-breathe 2s var(--ease) infinite;border-radius:50%}@keyframes dc-breathe{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent)}70%,to{box-shadow:0 0 0 7px color-mix(in srgb, var(--up) 0%, transparent)}}.dc-world{height:18px;margin-top:8px;position:relative}.dc-zone{height:18px;font:500 13px/18px var(--font);color:var(--muted);transition:color .16s var(--ease);align-items:center;gap:8px;display:flex;position:absolute;top:0}.dc-zone:before,.dc-zone:after{content:"";background:var(--line);min-width:0;height:1.5px;transition:background-color .16s var(--ease);border-radius:1px;flex:1}.dc-zone:empty:after{display:none}.dc-zone b{font-weight:inherit}.dc-zone.is-peak,.dc-zone.is-on{color:var(--fg)}.dc-zone.is-peak:before,.dc-zone.is-peak:after,.dc-zone.is-on:before,.dc-zone.is-on:after{background:color-mix(in srgb, var(--fg) 45%, transparent)}@media (width<=600px){.dc-zone{gap:6px;font-size:12px}}@media (prefers-reduced-motion:reduce){.dc *{transition:none!important;animation:none!important}}