@property --cf-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.cf-rail{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.cf-seg{background:var(--color-line-2);border-radius:99px;height:3px;position:relative}.cf-seg>span{border-radius:inherit;transform-origin:0;background:linear-gradient(90deg, var(--accent-lo), var(--accent), var(--accent-hi));box-shadow:0 0 12px color-mix(in oklab, var(--accent) 70%, transparent);transition:transform .9s var(--ease-out);position:absolute;inset:0;transform:scaleX(0)}.cf-seg.is-done>span,.cf-seg.is-on>span{transform:none}.cf-seg.is-on:after{content:"";background:var(--accent-hi);width:9px;height:9px;box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent), 0 0 18px var(--accent);border-radius:99px;animation:1.8s ease-in-out infinite cf-pulse;position:absolute;top:50%;right:-4px;translate:0 -50%}@keyframes cf-pulse{50%{box-shadow:0 0 0 7px color-mix(in oklab, var(--accent) 8%, transparent), 0 0 26px var(--accent)}}.cf-ticket{border-radius:var(--radius-md);background:radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 55%), linear-gradient(180deg, #ffffff0b, #ffffff03);box-shadow:inset 0 0 0 1px var(--color-line);position:relative;overflow:hidden}.cf-ticket:before,.cf-ticket:after{content:"";background:var(--color-bg);width:14px;height:14px;box-shadow:inset 0 0 0 1px var(--color-line);border-radius:99px;position:absolute;top:2.65rem}.cf-ticket:before{left:-7px}.cf-ticket:after{right:-7px}.cf-perf{border-top:1px dashed var(--color-line-2);height:0;margin:0 .9rem}.cf-live i{background:var(--accent);width:6px;height:6px;box-shadow:0 0 10px var(--accent);border-radius:99px;animation:1.6s ease-in-out infinite cf-blink;display:inline-block}@keyframes cf-blink{50%{opacity:.25}}.cf-slot{--flash:0;background:color-mix(in oklab, var(--accent) calc(var(--flash) * 22%), transparent);min-width:0;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) calc(var(--flash) * 70%), transparent);border-radius:10px;padding:.55rem .7rem;position:relative}.cf-slot dd{text-overflow:ellipsis;white-space:nowrap;min-height:1.45em;color:var(--color-ink);font-size:.9rem;overflow:hidden}.cf-slot:not(.is-filled) dd:before{content:"";background:linear-gradient(90deg,#ffffff0d,#ffffff21,#ffffff0d) 0 0/200% 100%;border-radius:4px;width:72%;height:.55em;margin-top:.45em;animation:1.8s linear infinite cf-shimmer;display:block}@keyframes cf-shimmer{to{background-position:-200% 0}}.cf-caret{vertical-align:-.12em;background:var(--accent);width:1px;height:1em;margin-left:2px;animation:1s step-end infinite cf-blink;display:inline-block}.cf-scan{pointer-events:none;opacity:0;background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 28%, transparent), transparent);position:absolute;inset:0;transform:translate(-100%)}.cf-ticket.is-sending .cf-scan{opacity:1;animation:cf-scan 1.1s var(--ease-io) infinite}@keyframes cf-scan{to{transform:translate(100%)}}.cf-stamp{border:2px solid var(--accent);color:var(--accent);font-family:var(--font-mono);letter-spacing:.28em;text-transform:uppercase;box-shadow:inset 0 0 18px -6px var(--accent), 0 0 24px -8px var(--accent);opacity:0;pointer-events:none;border-radius:8px;padding:.3rem .8rem;font-size:.72rem;font-weight:600;position:absolute;top:.6rem;right:1rem;rotate:-10deg}.cf-ghost{z-index:200;background:var(--accent);color:var(--on-accent);white-space:nowrap;box-shadow:0 20px 50px -12px color-mix(in oklab, var(--accent) 85%, transparent);pointer-events:none;border-radius:14px;justify-content:center;align-items:center;padding:0 1rem;font-size:.9rem;font-weight:500;display:flex;position:fixed;overflow:hidden}.cf-tile{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;isolation:isolate;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-line-2);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease-out), box-shadow .4s var(--ease-out), background-color .4s var(--ease-out);background:#ffffff06;position:relative}.cf-tile:hover{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c,var(--accent)) 45%, transparent);background:#ffffff0a}.cf-tile:active{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(.98)}.cf-tile:after{content:"";z-index:-1;border-radius:inherit;opacity:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx) var(--my), color-mix(in oklab, var(--c,var(--accent)) 20%, transparent), transparent 60%);transition:opacity .4s var(--ease-out);position:absolute;inset:0}.cf-tile:hover:after{opacity:1}.cf-tile:has(:checked):after{opacity:1}.cf-tile:before{content:"";border-radius:inherit;opacity:0;pointer-events:none;background:conic-gradient(from var(--cf-angle), transparent 0 55%, var(--c,var(--accent)) 75%, color-mix(in oklab, var(--c,var(--accent)) 35%, #fff) 82%, transparent 92%);-webkit-mask-composite:xor;transition:opacity .4s var(--ease-out);padding:1.5px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.cf-tile:has(:checked){background:color-mix(in oklab, var(--c,var(--accent)) 9%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c,var(--accent)) 35%, transparent), 0 26px 60px -30px color-mix(in oklab, var(--c,var(--accent)) 90%, transparent)}.cf-tile:has(:checked):before{opacity:1;animation:3.2s linear infinite cf-spin}@keyframes cf-spin{to{--cf-angle:360deg}}.cf-tile:has(:focus-visible){outline:2px solid var(--accent);outline-offset:3px}.cf-entering .cf-tile{transition-property:box-shadow,background-color}.cf-tile[data-invalid]{box-shadow:inset 0 0 0 1px var(--color-danger)}.cf-tile .glyph{--amp:.2;color:var(--c,var(--accent));transition:filter .5s var(--ease-out)}.cf-tile:hover .glyph{--amp:1;filter:drop-shadow(0 0 14px color-mix(in oklab, var(--c,var(--accent)) 65%, transparent))}.cf-tile:has(:checked) .glyph{--amp:1;filter:drop-shadow(0 0 14px color-mix(in oklab, var(--c,var(--accent)) 65%, transparent))}.cf-tick{width:1.4rem;height:1.4rem;box-shadow:inset 0 0 0 1px var(--color-line-2);transition:background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);border-radius:99px;flex-shrink:0;place-items:center;display:grid}.cf-tick svg{opacity:0;transition:opacity .35s var(--ease-out), transform .45s var(--ease-out);transform:scale(.3)}.cf-tile:has(:checked) .cf-tick{background:var(--c,var(--accent));box-shadow:0 0 16px -2px var(--c,var(--accent))}.cf-tile:has(:checked) .cf-tick svg{opacity:1;transform:none}.cf-key{min-width:1.35rem;height:1.35rem;font-family:var(--font-mono);color:var(--color-ink-3);box-shadow:inset 0 0 0 1px var(--color-line-2);border-radius:6px;place-items:center;padding:0 .3rem;font-size:.65rem;display:inline-grid}@media (hover:none){.cf-key,.cf-keys{display:none!important}}.cf-bars{align-items:flex-end;gap:4px;height:2.1rem;display:flex}.cf-bars i{background:var(--color-line-2);transform-origin:bottom;width:7px;transition:background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);border-radius:2px}.cf-bars i:first-child{height:32%}.cf-bars i:nth-child(2){height:56%}.cf-bars i:nth-child(3){height:80%}.cf-bars i:nth-child(4){height:100%}.cf-tile:hover .cf-bars i.on{background:color-mix(in oklab, var(--accent) 55%, transparent)}.cf-tile:has(:checked) .cf-bars i.on{background:var(--accent);box-shadow:0 0 12px color-mix(in oklab, var(--accent) 70%, transparent);animation:cf-eq 1.2s var(--ease-io) infinite alternate;animation-delay:calc(var(--i) * -.3s)}.cf-bars.is-open i{box-shadow:inset 0 0 0 1px var(--color-line-2);background:0 0}.cf-tile:has(:checked) .cf-bars.is-open i{box-shadow:inset 0 0 0 1px var(--accent)}@keyframes cf-eq{to{transform:scaleY(.62)}}.cf-track{position:relative}.cf-track-line{background:var(--color-line-2);pointer-events:none;position:absolute}.cf-stop{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.cf-dot{z-index:1;background:var(--color-bg);width:22px;height:22px;box-shadow:inset 0 0 0 1px var(--color-line-2), 0 0 0 5px var(--color-bg);transition:box-shadow .4s var(--ease-out);border-radius:99px;flex-shrink:0;display:block;position:relative}.cf-stop:hover .cf-dot{box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 70%, transparent), 0 0 0 5px var(--color-bg)}.cf-stop:has(:focus-visible) .cf-dot{outline:2px solid var(--accent);outline-offset:4px}.cf-stop:has(:checked) .cf-label{color:var(--color-ink)}.cf-stop:has(:checked) .cf-dot{background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 5px var(--color-bg)}.cf-stop[data-invalid] .cf-dot{box-shadow:inset 0 0 0 1.5px var(--color-danger), 0 0 0 5px var(--color-bg)}.cf-knob{z-index:2;opacity:0;pointer-events:none;background:radial-gradient(circle at 35% 35%, var(--accent-hi), var(--accent) 55%, var(--accent-lo));width:22px;height:22px;box-shadow:0 0 0 5px color-mix(in oklab, var(--accent) 20%, transparent), 0 0 30px var(--accent);border-radius:99px;position:absolute;top:0;left:0}.cf-trail{z-index:1;pointer-events:none;background:linear-gradient(90deg, var(--accent-lo), var(--accent));box-shadow:0 0 12px var(--accent);position:absolute}.cf-meter{background:var(--color-line);border-radius:99px;height:2px;margin-top:.5rem;overflow:hidden}.cf-meter>span{transform-origin:0;background:var(--color-ink-3);height:100%;transition:transform .4s var(--ease-out), background-color .4s var(--ease-out);display:block}.cf-meter.is-ok>span{background:var(--accent);box-shadow:0 0 10px var(--accent)}.cf-spin{border:2px solid;border-right-color:#0000;border-radius:99px;width:1em;height:1em;animation:.7s linear infinite cf-rot}@keyframes cf-rot{to{rotate:360deg}}@media (prefers-reduced-motion:reduce){.cf-tile,.cf-tile:active{transform:none}.cf-tile:has(:checked):before{--cf-angle:120deg;animation:none}.cf-seg.is-on:after,.cf-live i,.cf-slot dd:before,.cf-ticket.is-sending .cf-scan{animation:none}.cf-tile:has(:checked) .cf-bars i.on{animation:none}}.cf-bignum{z-index:-1;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:var(--font-display);letter-spacing:-.06em;color:#0000;-webkit-text-stroke:1px color-mix(in oklab, var(--accent) 30%, transparent);font-size:clamp(7rem,16vw,15rem);font-weight:500;line-height:1;position:absolute;top:-.32em;right:-.04em;-webkit-mask-image:linear-gradient(#000 20%,#0000 85%);mask-image:linear-gradient(#000 20%,#0000 85%)}.cf-cta .glyph{--amp:.55;color:var(--c,var(--accent));filter:drop-shadow(0 0 10px color-mix(in oklab, var(--c,var(--accent)) 45%, transparent))}
