.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:64px;padding:9px 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:18px;position:relative}@media (min-width:640px){.ctrack-rail{height:76px;padding-block:11px}}.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-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}@media (prefers-reduced-motion:reduce){.ctrack-lock,.ctrack-open,.ctrack-gate,.ctrack-glow,.ctrack-head,.ctrack-head:before,.ctrack-bubble,.ctrack-mark{transition:none}}