@layer theme,base;@layer components{.demo-spot{width:var(--w,0px);height:var(--h,0px);transform:translate(var(--x,50vw), var(--y,50vh));border-radius:var(--radius-box);box-shadow:0 0 0 200vmax var(--page);position:fixed;top:0;left:0}@supports (color:color-mix(in lab, red, red)){.demo-spot{box-shadow:0 0 0 200vmax color-mix(in oklab, var(--page) 62%, transparent)}}.demo-spot{pointer-events:none;z-index:var(--z-overlay);transition:transform var(--dur-4) var(--ease-in-out), width var(--dur-4) var(--ease-in-out), height var(--dur-4) var(--ease-in-out), box-shadow var(--dur-4) var(--ease-out)}.demo-spot:before{content:"";border-radius:inherit;background:linear-gradient(90deg, var(--primary), var(--accent), var(--accent-2), var(--primary));-webkit-mask:linear-gradient(var(--ink), var(--ink)) content-box, linear-gradient(var(--ink), var(--ink));-webkit-mask:linear-gradient(var(--ink), var(--ink)) content-box, linear-gradient(var(--ink), var(--ink));-webkit-mask:linear-gradient(var(--ink), var(--ink)) content-box, linear-gradient(var(--ink), var(--ink));mask:linear-gradient(var(--ink), var(--ink)) content-box, linear-gradient(var(--ink), var(--ink));animation:var(--motion-none,demo-flow 5s linear infinite);-webkit-mask-composite:xor;-webkit-mask-composite:xor;background-size:300% 100%;padding:2px;position:absolute;inset:-4px;-webkit-mask-composite:xor;mask-composite:exclude}.demo-spot:after{content:"";border-radius:inherit;box-shadow:0 0 28px 4px var(--primary);position:absolute;inset:-10px}@supports (color:color-mix(in lab, red, red)){.demo-spot:after{box-shadow:0 0 28px 4px color-mix(in oklab, var(--primary) 40%, transparent)}}.demo-spot:after{animation:var(--motion-none,demo-breathe 2.6s var(--ease-in-out) infinite)}.demo-spot-empty:before,.demo-spot-empty:after{display:none}.demo-spot-click:after{box-shadow:0 0 0 0 var(--accent)}@supports (color:color-mix(in lab, red, red)){.demo-spot-click:after{box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent)}}.demo-spot-click:after{animation:var(--motion-none,demo-ping 1.6s var(--ease-out) infinite)}@keyframes demo-flow{to{background-position:300% 0}}@keyframes demo-breathe{0%,to{opacity:.55}50%{opacity:1}}@keyframes demo-ping{0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent)}to{box-shadow:0 0 0 18px #0000}}.demo-coach{width:min(26rem,100vw - 2rem);transform:translate(var(--cx,calc(50vw - 13rem)), var(--cy,30vh));z-index:calc(var(--z-overlay) + 1);transition:transform var(--dur-4) var(--ease-in-out);animation:var(--motion-none,demo-pop var(--dur-4) var(--ease-out) backwards);position:fixed;top:0;left:0}.demo-coach-center{width:min(30rem,100vw - 2rem);top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:639px){.demo-coach,.demo-coach-center{width:auto;max-height:calc(100dvh - 6rem);inset:auto .75rem 4.75rem;overflow-y:auto;transform:none}}@keyframes demo-pop{0%{opacity:0;scale:.96}}.demo-orb{background:var(--grad);width:2.75rem;height:2.75rem;color:var(--on-primary);box-shadow:0 6px 20px -6px var(--primary);border-radius:50%;flex:none;place-items:center;display:grid;position:relative}@supports (color:color-mix(in lab, red, red)){.demo-orb{box-shadow:0 6px 20px -6px color-mix(in oklab, var(--primary) 70%, transparent)}}.demo-orb-button{cursor:pointer;transition:scale var(--dur-2) var(--ease-out);border:0;padding:0}.demo-orb-button:hover{scale:1.07}.demo-orb-button:active{scale:.94}.demo-orb:before{content:"";border:2px solid var(--accent);border-radius:50%;position:absolute;inset:-5px}@supports (color:color-mix(in lab, red, red)){.demo-orb:before{border:2px solid color-mix(in oklab, var(--accent) 50%, transparent)}}.demo-orb:before{opacity:calc(.2 + var(--lv,0) * .8);scale:calc(1 + var(--lv,0) * .28);transition:scale var(--dur-1) linear, opacity var(--dur-1) linear}.demo-eq{align-items:center;gap:2px;height:1rem;display:flex}.demo-eq-bar{width:3px;height:calc(3px + var(--b,0) * 13px);transition:height var(--dur-1) linear;background:currentColor;border-radius:2px}.demo-eq-idle .demo-eq-bar{animation:var(--motion-none,demo-wave 1.4s var(--ease-in-out) infinite);animation-delay:calc(var(--i,0) * var(--stagger-step) * 4)}@keyframes demo-wave{0%,to{height:4px}50%{height:9px}}.demo-progress{grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;display:grid}.demo-progress-part{background:var(--tint-3);border-radius:999px;height:4px;position:relative;overflow:hidden}.demo-progress-fill{background:var(--grad);transform-origin:0;transform:scaleX(var(--p,0));transition:transform var(--dur-4) var(--ease-out);position:absolute;inset:0}.demo-word{transition:color var(--dur-2) var(--ease-out)}.demo-words-karaoke .demo-word{color:var(--ink-3)}.demo-words-karaoke .demo-word-said{color:var(--ink)}.demo-words-karaoke .demo-word-now{color:var(--ink);background-image:var(--grad);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.demo-words-type .demo-word{animation:var(--motion-none,demo-word var(--dur-3) var(--ease-out) backwards);animation-delay:calc(var(--i,0) * var(--stagger-step))}@keyframes demo-word{0%{opacity:0;filter:blur(3px)}}.demo-wait{background:var(--on-primary);transform-origin:0;height:2px;animation:var(--motion-none,demo-fill var(--wait) linear forwards);border-radius:2px;position:absolute;bottom:3px;left:.75rem;right:.75rem}@keyframes demo-fill{0%{transform:scaleX(0)}}.demo-dock{z-index:var(--z-toast);max-width:calc(100vw - 2rem);animation:var(--motion-none,demo-rise var(--dur-4) var(--ease-out) backwards);position:fixed;bottom:1rem;left:50%;transform:translate(-50%)}@keyframes demo-rise{0%{opacity:0;translate:0 1rem}}.demo-dock-space{height:5.5rem}.demo-dot{background:var(--good);border-radius:50%;flex:none;width:.5rem;height:.5rem;position:relative}.demo-dot:after{content:"";background:var(--good);animation:var(--motion-none,demo-live 1.8s var(--ease-out) infinite);border-radius:50%;position:absolute;inset:0}@keyframes demo-live{to{opacity:0;scale:2.6}}.demo-toast{z-index:var(--z-toast);width:min(28rem,100vw - 2rem);animation:var(--motion-none,demo-rise var(--dur-3) var(--ease-out) backwards);position:fixed;bottom:5.25rem;left:50%;transform:translate(-50%)}.demo-confetti{pointer-events:none;z-index:calc(var(--z-overlay) + 2);position:fixed;inset:0;overflow:hidden}.demo-confetti-bit{background:var(--c,var(--primary));opacity:0;width:.5rem;height:.75rem;animation:var(--motion-none,demo-confetti 2.4s var(--ease-out) forwards);animation-delay:var(--d);border-radius:2px;position:absolute;top:42%;left:50%}.demo-confetti-1{--c:var(--primary)}.demo-confetti-2{--c:var(--accent)}.demo-confetti-3{--c:var(--accent-2)}.demo-confetti-4{--c:var(--good)}.demo-confetti-5{--c:var(--warn)}@keyframes demo-confetti{0%{opacity:1;transform:translate(0)rotate(0)}80%{opacity:1}to{opacity:0;transform:translate(var(--dx,0px), var(--dy,0px)) rotate(var(--r,0deg))}}.demo-mock{min-height:19rem;position:relative;overflow:hidden}.demo-mock-ring{border-radius:var(--radius-box);position:relative}.demo-mock-ring:before{content:"";border-radius:inherit;background:linear-gradient(90deg, var(--primary), var(--accent), var(--accent-2), var(--primary));-webkit-mask:linear-gradient(var(--ink), var(--ink)) content-box, linear-gradient(var(--ink), var(--ink));-webkit-mask:linear-gradient(var(--ink), var(--ink)) content-box, linear-gradient(var(--ink), var(--ink));-webkit-mask:linear-gradient(var(--ink), var(--ink)) content-box, linear-gradient(var(--ink), var(--ink));mask:linear-gradient(var(--ink), var(--ink)) content-box, linear-gradient(var(--ink), var(--ink));animation:var(--motion-none,demo-flow 5s linear infinite);-webkit-mask-composite:xor;-webkit-mask-composite:xor;background-size:300% 100%;padding:2px;position:absolute;inset:-4px;-webkit-mask-composite:xor;mask-composite:exclude}.demo-mock-dim{opacity:.35}.demo-mock-card{width:min(19rem,100% - 2.5rem);animation:var(--motion-none,demo-float 6s var(--ease-in-out) infinite);position:absolute;bottom:1.25rem;right:1.25rem}@keyframes demo-float{0%,to{translate:0}50%{translate:0 -6px}}}@layer utilities;