.vi-component-surface{isolation:isolate;border:var(--vi-surface-border-width) solid var(--vi-border);border-radius:var(--vi-radius);background:var(--vi-standby);min-width:0;color:var(--vi-standby-text);transition:border-color var(--vi-motion-duration-fast,.12s) var(--vi-motion-ease-out,ease-out), background-color var(--vi-motion-duration-standard,.22s) var(--vi-motion-ease-out,ease-out), box-shadow var(--vi-motion-duration-fast,.12s) var(--vi-motion-ease-out,ease-out);position:relative;overflow:visible}.vi-component-surface:focus-visible{outline:var(--vi-focus-width,2px) solid var(--vi-focus-ring-color,var(--vi-active));outline-offset:var(--vi-focus-offset,3px)}.vi-component-surface.pong-game{border-color:var(--vi-border);border-radius:var(--vi-radius);background:var(--vi-standby)}.vi-component-surface__shine,.vi-component-surface__hover-glow{z-index:2;pointer-events:none;border-radius:inherit;opacity:0;border:1px solid #0000;position:absolute;inset:-1px;overflow:hidden}.vi-component-surface__shine{background:linear-gradient(112deg, transparent 12%, transparent 33%, var(--vi-shine-b) 44%, var(--vi-shine-a) 50%, var(--vi-shine-b) 56%, transparent 67%, transparent 88%) border-box;-webkit-mask-composite:xor;background-position:145%;background-size:260% 100%;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:padding-box,border-box;mask-origin:padding-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.vi-component-surface[data-shiny=true] .vi-component-surface__shine{opacity:.92;animation:vi-component-shine var(--vi-surface-shine-duration) var(--vi-surface-shine-ease) infinite}.vi-component-surface__hover-glow{z-index:0;transition:opacity .26s var(--vi-motion-ease-out,ease-out);background:0 0;border:0;inset:0}.vi-component-surface__hover-glow:before,.vi-component-surface__hover-glow:after{pointer-events:none;border-radius:inherit;content:"";position:absolute;inset:0}.vi-component-surface__hover-glow:before{z-index:2;background:radial-gradient(circle at var(--vi-glow-x) var(--vi-glow-y), var(--vi-active) 0, color-mix(in srgb, var(--vi-active) 72%, transparent) 7%, color-mix(in srgb, var(--vi-active) 20%, transparent) 18%, transparent 42%) border-box;-webkit-mask-composite:xor;border:1px solid #0000;inset:-1px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:padding-box,border-box;mask-origin:padding-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.vi-component-surface__hover-glow:after{z-index:1;background:radial-gradient(circle at var(--vi-glow-x) var(--vi-glow-y), color-mix(in srgb, var(--vi-active) 10%, transparent), transparent 48%)}.vi-component-surface[data-hover-glow=true]:hover .vi-component-surface__hover-glow,.vi-component-surface[data-hover-glow=true]:focus-within .vi-component-surface__hover-glow{opacity:.72}.vi-component-surface[data-hover-glow-strength=soft] .vi-component-surface__hover-glow{opacity:0;filter:saturate(.75)}.vi-component-surface[data-hover-glow=true][data-hover-glow-strength=soft]:hover .vi-component-surface__hover-glow,.vi-component-surface[data-hover-glow=true][data-hover-glow-strength=soft]:focus-within .vi-component-surface__hover-glow{opacity:.42}.vi-component-surface[data-hover-glow=true][data-hover-glow-strength=strong]:hover .vi-component-surface__hover-glow,.vi-component-surface[data-hover-glow=true][data-hover-glow-strength=strong]:focus-within .vi-component-surface__hover-glow{opacity:1}.vi-component-surface[data-glass=true]{border-color:var(--vi-border);background:linear-gradient(145deg, #ffffff16, #ffffff06), var(--vi-standby);box-shadow:inset 0 1px 0 #ffffff1f, inset 0 -1px 0 #ffffff09, var(--vi-surface-glass-shadow);-webkit-backdrop-filter:blur(var(--vi-surface-glass-blur)) saturate(125%);backdrop-filter:blur(var(--vi-surface-glass-blur)) saturate(125%)}.vi-component-surface__content{z-index:1;min-width:0;display:block;position:relative}@keyframes vi-component-shine{0%,18%{background-position:145%}72%,to{background-position:-45%}}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.vi-component-surface[data-glass=true]{background:#161b16}}@media (prefers-reduced-motion:reduce){.vi-component-surface[data-shiny=true] .vi-component-surface__shine{background-position:50%;animation:none}}