.card-beam-animation{position:relative;width:100%;height:100vh;background:#000;overflow:hidden}.card-beam-controls{position:absolute;top:20px;left:20px;display:flex;gap:10px;z-index:100}.card-beam-control-btn{padding:10px 20px;background:hsla(0,0%,100%,.2);border:none;border-radius:25px;color:#fff;font-weight:700;cursor:pointer;backdrop-filter:blur(5px);transition:all .3s ease;font-size:14px}.card-beam-control-btn:hover{background:hsla(0,0%,100%,.3);transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.2)}.card-beam-speed-indicator{position:absolute;top:20px;right:20px;color:#fff;font-size:16px;background:rgba(0,0,0,.3);padding:8px 16px;border-radius:20px;backdrop-filter:blur(5px);z-index:100}.card-beam-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.card-beam-stream{position:absolute;width:100vw;height:180px;display:flex;align-items:center;overflow:visible}.card-beam-line{display:flex;align-items:center;gap:60px;white-space:nowrap;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;will-change:transform}.card-beam-line.dragging,.card-beam-line:active{cursor:grabbing}.card-beam-wrapper{flex-shrink:0}.card-beam-card,.card-beam-wrapper{position:relative;width:400px;height:250px}.card-beam-card{border-radius:15px;overflow:hidden}.card-beam-normal{position:relative;background:transparent;box-shadow:0 15px 40px rgba(0,0,0,.4);overflow:hidden;z-index:2}.card-beam-image,.card-beam-normal{width:100%;height:100%;border-radius:15px}.card-beam-image{-o-object-fit:cover;object-fit:cover;transition:all .3s ease;filter:brightness(1.1) contrast(1.1);box-shadow:inset 0 0 20px rgba(0,0,0,.1)}.card-beam-image:hover{filter:brightness(1.2) contrast(1.2)}.card-beam-ascii{width:400px;height:250px;border-radius:15px;z-index:1;background:transparent}.card-beam-ascii,.card-beam-ascii-content{position:absolute;top:0;left:0;overflow:hidden}.card-beam-ascii-content{width:100%;height:100%;color:rgba(220,210,255,.6);font-family:Courier New,monospace;font-size:11px;line-height:13px;white-space:pre;animation:card-beam-glitch .1s linear infinite alternate-reverse;margin:0;padding:0;text-align:left;vertical-align:top;box-sizing:border-box;-webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.8) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 80%,rgba(0,0,0,.2));mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.8) 30%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 80%,rgba(0,0,0,.2))}@keyframes card-beam-glitch{0%{opacity:1}15%{opacity:.9}16%{opacity:1}49%{opacity:.8}50%{opacity:1}99%{opacity:.9}to{opacity:1}}.card-beam-scanner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4px;height:300px;border-radius:30px;background:linear-gradient(180deg,transparent,rgba(0,255,255,.8),#0ff,rgba(0,255,255,.8),transparent);box-shadow:0 0 20px rgba(0,255,255,.8),0 0 40px rgba(0,255,255,.4);animation:card-beam-scan-pulse 2s ease-in-out infinite alternate;z-index:10}@keyframes card-beam-scan-pulse{0%{opacity:.8;transform:translate(-50%,-50%) scaleY(1)}to{opacity:1;transform:translate(-50%,-50%) scaleY(1.1)}}.card-beam-scan-effect{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,255,.4),transparent);opacity:0;pointer-events:none;z-index:5}.card-beam-wrapper:hover .card-beam-scan-effect{animation:card-beam-scan-effect .6s ease-out}@keyframes card-beam-scan-effect{0%{transform:translateX(-100%);opacity:0}50%{opacity:1}to{transform:translateX(100%);opacity:0}}.card-beam-logo{position:absolute;top:20px;right:20px;font-size:18px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);z-index:3}#particleCanvas{left:0;height:250px;z-index:0}#particleCanvas,#scannerCanvas{position:absolute;top:50%;transform:translateY(-50%);width:100vw;pointer-events:none}#scannerCanvas{left:-3px;height:300px;z-index:15}@media (max-width:768px){.card-beam-ascii,.card-beam-card,.card-beam-normal,.card-beam-wrapper{width:300px;height:187.5px}.card-beam-line{gap:40px}.card-beam-controls{top:10px;left:10px;gap:5px}.card-beam-control-btn{padding:8px 16px;font-size:12px}.card-beam-speed-indicator{top:10px;right:10px;font-size:14px;padding:6px 12px}}.card-beam-animation.compact{height:300px}.card-beam-animation.compact .card-beam-ascii,.card-beam-animation.compact .card-beam-card,.card-beam-animation.compact .card-beam-normal,.card-beam-animation.compact .card-beam-wrapper{width:300px;height:187.5px}.card-beam-animation.compact #particleCanvas{height:187.5px}.card-beam-animation.compact .card-beam-scanner{height:200px}.electric-border-wrapper{display:inline-block;position:relative}.electric-border-svg{position:absolute;width:0;height:0;pointer-events:none}.electric-border-card-container{width:var(--electric-width,350px);height:var(--electric-height,500px);padding:2px;border-radius:24px;position:relative;background:linear-gradient(-30deg,oklch(from var(--electric-border-color) .3 calc(c / 2) h/.4),transparent,oklch(from var(--electric-border-color) .3 calc(c / 2) h/.4)),linear-gradient(to bottom,oklch(.185 0 0),oklch(.185 0 0));isolation:isolate;box-sizing:border-box}.electric-border-inner-container{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0}.electric-border-outer{border:2px solid color-mix(in srgb,var(--electric-border-color) 50%,transparent);border-radius:24px;padding-right:4px;padding-bottom:4px;position:relative;width:100%;height:100%;box-sizing:border-box}.electric-border-main-card{width:calc(100% - 4px);height:calc(100% - 4px);border-radius:22px;border:2px solid var(--electric-border-color);margin-top:-4px;margin-left:-4px;position:relative}.electric-border-glow-layer-1{border:2px solid color-mix(in srgb,var(--electric-border-color) 60%,transparent);border-radius:24px;filter:blur(1px)}.electric-border-glow-layer-1,.electric-border-glow-layer-2{width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.electric-border-glow-layer-2{border:2px solid oklch(from var(--electric-border-color) l c h);border-radius:24px;filter:blur(4px)}.electric-border-overlay-1{opacity:1;z-index:1}.electric-border-overlay-1,.electric-border-overlay-2{position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;border-radius:24px;mix-blend-mode:overlay;transform:scale(1.1);filter:blur(16px);background:linear-gradient(-30deg,#fff,transparent 30%,transparent 70%,#fff);pointer-events:none}.electric-border-overlay-2{opacity:.5;z-index:2}.electric-border-background-glow{position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;border-radius:24px;filter:blur(32px);transform:scale(1.1);opacity:.3;z-index:-1;background:linear-gradient(-30deg,oklch(from var(--electric-border-color) l c h),transparent,var(--electric-border-color));pointer-events:none}.electric-border-content-container{position:absolute;top:2px;left:2px;right:2px;bottom:2px;width:calc(100% - 4px);height:calc(100% - 4px);display:flex;flex-direction:column;border-radius:22px;overflow:hidden;z-index:10;background:transparent}.electric-border-card-content{display:flex;flex-direction:column;padding:48px;height:100%;color:#fff}.electric-border-card-badge{background:radial-gradient(47.2% 50% at 50.39% 88.37%,hsla(0,0%,100%,.12) 0,hsla(0,0%,100%,0) 100%),hsla(0,0%,100%,.04);position:relative;transition:background .3s ease;border-radius:14px;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;padding:8px 16px;text-transform:uppercase;font-weight:700;font-size:14px;color:hsla(0,0%,100%,.8);margin-bottom:16px}.electric-border-card-badge:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;padding:1px;background:linear-gradient(150deg,hsla(0,0%,100%,.48) 16.73%,hsla(0,0%,100%,.08) 30.2%,hsla(0,0%,100%,.08) 68.2%,hsla(0,0%,100%,.6) 81.89%);border-radius:inherit;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;pointer-events:none}.electric-border-card-badge:hover{background:radial-gradient(47.2% 50% at 50.39% 88.37%,hsla(0,0%,100%,.12) 0,hsla(0,0%,100%,0) 100%),hsla(0,0%,100%,.08)}.electric-border-card-title{font-size:36px;font-weight:500;margin-top:auto;margin-bottom:24px}.electric-border-card-body{opacity:.7;font-size:16px;line-height:1.6}@media (max-width:640px){.electric-border-card-content{padding:32px}.electric-border-card-title{font-size:28px}.electric-border-card-badge{font-size:12px;padding:6px 12px}}