.ctrack{--pad:12px;-webkit-user-select:none;user-select:none;position:relative}.ctrack-hit{touch-action:pan-y;border-radius:20px;padding-block:6px;position:relative}.ctrack-seekable{cursor:pointer}.ctrack-hit:focus-visible{outline-offset:2px;border-radius:22px}.ctrack-rail{height:4rem;padding:.5625rem var(--pad);background:radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--color-accent) 10%, transparent), transparent 60%), linear-gradient(180deg, var(--color-surface), color-mix(in oklab, var(--color-surface) 55%, var(--color-ink)));box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-line) 85%, transparent), inset 0 1px 0 #ffffff0a, 0 18px 40px -28px #000000e6;border-radius:1.125rem;position:relative}@media (min-width:640px){.ctrack-rail{height:4.75rem;padding-block:.6875rem}}.ctrack-area{height:100%;position:relative}.ctrack-layer{-webkit-mask:var(--bars) center / 100% 100% no-repeat;-webkit-mask:var(--bars) center / 100% 100% no-repeat;mask:var(--bars) center / 100% 100% no-repeat;position:absolute;inset:0}.ctrack-base{background:color-mix(in oklab, var(--color-line) 80%, var(--color-muted) 20%);opacity:.55}.ctrack-lock{clip-path:inset(0 0 0 calc(var(--avail) * 100%));transition:clip-path .9s var(--ease-out-expo);background:repeating-linear-gradient(-55deg,#ffffff0d 0 1.5px,#0000 1.5px 7px);border-radius:10px;position:absolute;inset:-3px 0}.ctrack-open{background:linear-gradient(90deg, color-mix(in oklab, var(--color-accent) 75%, var(--color-ink)), var(--color-accent) 45%, color-mix(in oklab, var(--color-accent-soft) 80%, var(--color-accent))) 0 0 / calc(var(--open) * 100%) 100% no-repeat;clip-path:inset(0 calc((1 - var(--open)) * 100%) 0 0);transition:clip-path .9s var(--ease-out-expo), background-size .9s var(--ease-out-expo)}.ctrack[data-won] .ctrack-open{background-image:linear-gradient(90deg, color-mix(in oklab, var(--color-accent) 70%, var(--color-ink)), var(--color-accent-soft) 55%, var(--color-hit))}.ctrack-spare{background:var(--color-accent-soft);opacity:.22;clip-path:inset(0 calc((1 - var(--avail)) * 100%) 0 calc(var(--open) * 100%))}.ctrack-chargefill,.ctrack-chargeedge{top:-3px;bottom:-3px;left:calc(var(--open) * 100%);width:calc((var(--next) - var(--open)) * 100%);pointer-events:none;position:absolute}.ctrack-chargefill{background:linear-gradient(90deg, color-mix(in oklab, var(--color-accent) 10%, transparent), color-mix(in oklab, var(--color-accent-soft) 32%, transparent));clip-path:inset(0 calc((1 - var(--charge,0)) * 100%) 0 0);border-radius:8px}.ctrack-chargeedge{transform:translateX(calc(var(--charge,0) * 100%))}.ctrack-chargeedge:before{content:"";background:var(--color-accent-soft);width:2px;box-shadow:0 0 10px 1px color-mix(in oklab, var(--color-accent-soft) 70%, transparent);border-radius:2px;position:absolute;top:0;bottom:0;left:-1px}.ctrack-charge{--cpos:calc(var(--open) + (var(--next) - var(--open)) * var(--charge,0));background:linear-gradient(90deg, color-mix(in oklab, var(--color-accent) 35%, transparent), color-mix(in oklab, var(--color-accent-soft) 75%, transparent));clip-path:inset(0 calc((1 - var(--cpos)) * 100%) 0 calc(var(--open) * 100%))}.ctrack-glow{filter:drop-shadow(0 0 5px color-mix(in oklab, var(--color-accent-soft) 75%, transparent));opacity:0;transition:opacity .25s;position:absolute;inset:0}.ctrack[data-live] .ctrack-glow{opacity:1}.ctrack[data-live] .ctrack-glow,.ctrack[data-live] .ctrack-head{transition:none}.ctrack-heard{clip-path:inset(0 calc((1 - var(--head,0)) * 100%) 0 0);background:linear-gradient(90deg,#e4dcff,#fff)}.ctrack-gate{top:-4px;bottom:-4px;left:calc(var(--avail) * 100%);background:linear-gradient(180deg, transparent, var(--color-accent-soft) 25%, var(--color-accent-soft) 75%, transparent);width:2px;box-shadow:0 0 14px 1px color-mix(in oklab, var(--color-accent) 80%, transparent);transition:left .9s var(--ease-out-expo);border-radius:2px;margin-left:-1px;position:absolute}.ctrack-hitmark{background:var(--color-hit);width:2px;box-shadow:0 0 16px 2px color-mix(in oklab, var(--color-hit) 70%, transparent);border-radius:2px;margin-left:-1px;position:absolute;top:-4px;bottom:-4px}.ctrack-hitmark:before{content:"";background:var(--color-hit);width:10px;height:10px;box-shadow:0 0 0 3px color-mix(in oklab, var(--color-hit) 25%, transparent);border-radius:999px;margin-left:-5px;position:absolute;top:-5px;left:50%}.ctrack-headwrap{pointer-events:none;transform:translateX(calc(var(--head,0) * 100%));position:absolute;inset:0}.ctrack[data-scrub] .ctrack-headwrap{transform:translateX(calc(var(--scrub,0) * 100%))}.ctrack-head{width:2px;box-shadow:0 0 0 .5px #fff9, 0 0 12px 2px color-mix(in oklab, var(--color-accent-soft) 85%, transparent);opacity:0;background:#fff;border-radius:2px;transition:opacity .25s;position:absolute;top:-9px;bottom:-9px;left:-1px}.ctrack-head:before{content:"";width:12px;height:12px;box-shadow:0 0 0 3px color-mix(in oklab, var(--color-accent) 45%, transparent), 0 0 16px 2px color-mix(in oklab, var(--color-accent-soft) 80%, transparent);transition:transform .25s var(--ease-spring);background:#fff;border-radius:999px;margin-left:-6px;position:absolute;top:-5px;left:50%}.ctrack[data-live] .ctrack-head,.ctrack[data-scrub] .ctrack-head,.ctrack-hit:focus-visible .ctrack-head{opacity:1}.ctrack[data-scrub] .ctrack-head:before{transform:scale(1.35)}.ctrack-bubble{color:var(--color-ink);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;transition:opacity .15s ease, scale .2s var(--ease-spring);background:#fff;border-radius:8px;padding:3px 8px;font-size:.75rem;font-weight:700;position:absolute;bottom:calc(100% + 12px);left:50%;translate:-50%;scale:.9}.ctrack[data-scrub] .ctrack-bubble{opacity:1;scale:1}.ctrack-scale{height:1.75rem;margin-inline:var(--pad);font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:.6875rem;font-weight:600;position:relative}@media (min-width:640px){.ctrack-scale{font-size:.75rem}}.ctrack-mark{white-space:nowrap;color:var(--color-faint);padding-top:9px;transition:color .5s;position:absolute;top:0;translate:-50%}.ctrack-mark:before{content:"";opacity:.7;background:currentColor;width:1px;height:5px;position:absolute;top:1px;left:50%}.ctrack-mark[data-edge=end]{translate:-100%}.ctrack-mark[data-edge=end]:before{left:auto;right:0}.ctrack-mark[data-state=open]{color:color-mix(in oklab, var(--color-fg) 62%, transparent)}.ctrack-mark[data-state=current]{color:var(--color-fg)}.ctrack-mark[data-state=current]:before{background:var(--color-accent-soft);opacity:1;height:7px}.ctrack-mark[data-state=hit]{color:var(--color-hit)}.ctrack-mark[data-state=hit]:before{opacity:1;height:7px}.ctrack[data-callout]{padding-top:2.5rem}.ctrack-callout{top:0;left:calc(var(--pad) + (100% - 2 * var(--pad)) * var(--at));z-index:2;pointer-events:none;position:absolute;translate:-50%}.ctrack-callout[data-side=start]{translate:-1.25rem}.ctrack-callout[data-side=end]{translate:calc(1.25rem - 100%)}.ctrack-callout-pill{white-space:nowrap;height:1.875rem;color:var(--color-fg);background:color-mix(in oklab, var(--color-surface) 88%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-accent-soft) 35%, var(--color-line));border-radius:999px;align-items:center;gap:.4rem;padding:0 .75rem 0 .4rem;font-size:.875rem;font-weight:600;display:inline-flex;position:relative}@media (min-width:640px){.ctrack-callout-pill{font-size:.9375rem}}.ctrack-callout-pill:after{content:"";background:color-mix(in oklab, var(--color-accent-soft) 70%, transparent);width:1px;height:.875rem;position:absolute;top:100%;left:50%}.ctrack-callout[data-side=start] .ctrack-callout-pill:after{left:1.25rem}.ctrack-callout[data-side=end] .ctrack-callout-pill:after{left:auto;right:1.25rem}.ctrack-callout[data-late] .ctrack-callout-pill{color:var(--color-warm);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-warm) 50%, transparent)}.ctrack-ring{width:1.25rem;height:1.25rem;color:var(--color-muted);flex-shrink:0}.ctrack-ring:has(.ctrack-ring-fill){rotate:-90deg}.ctrack-callout[data-late] .ctrack-ring{color:var(--color-warm)}.ctrack-ring-bg{stroke:color-mix(in oklab, var(--color-line) 90%, transparent)}.ctrack-ring-fill{stroke:var(--color-accent-soft)}