/* From Uiverse.io by 00Kubi; adapted to interactive application cards. */
.cyber-card,#edit-draft.cyber-card{position:relative;isolation:isolate;background:linear-gradient(135deg,rgba(23,24,31,.70),rgba(32,33,42,.70));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid #ffffff18;border-radius:20px;box-shadow:0 8px 24px #0003,inset 0 0 24px #0002;transform:perspective(1100px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .35s ease,border-color .3s ease,box-shadow .3s ease}
.cyber-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(circle 90px at var(--card-x,50%) var(--card-y,50%),#00ffaa19,transparent 100%),radial-gradient(ellipse at 90% 10%,#5c67ff16,transparent 60%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.cyber-card:hover,.cyber-card:focus-within{border-color:#6e83d150;box-shadow:0 12px 36px #0004,0 0 24px #00ffaa09,inset 0 0 24px #0002}
.cyber-card:hover::before,.cyber-card:focus-within::before{opacity:1}
.cyber-decoration{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;user-select:none}
.cyber-glare{position:absolute;inset:0;background:linear-gradient(125deg,transparent 20%,#ffffff04 45%,#ffffff09 50%,#ffffff04 55%,transparent 80%);opacity:0;transition:opacity .3s ease}
.cyber-card:hover .cyber-glare{opacity:1}
.cyber-glow{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#00ffaa22,transparent 70%);filter:blur(16px);opacity:0;transition:opacity .3s ease}
.cyber-glow:nth-child(1){top:-30px;left:-30px}.cyber-glow:nth-child(2){top:40%;right:-35px;background:radial-gradient(circle,#00a2ff22,transparent 70%)}.cyber-glow:nth-child(3){bottom:-40px;left:30%}
.cyber-card:hover .cyber-glow,.cyber-card:focus-within .cyber-glow{opacity:1}
.cyber-corner{position:absolute;width:12px;height:12px;border:1px solid #7a87e64d;transition:border-color .3s,filter .3s}
.cyber-corner:nth-child(1){top:10px;left:10px;border-right:0;border-bottom:0}.cyber-corner:nth-child(2){top:10px;right:10px;border-left:0;border-bottom:0}.cyber-corner:nth-child(3){bottom:10px;left:10px;border-right:0;border-top:0}.cyber-corner:nth-child(4){bottom:10px;right:10px;border-left:0;border-top:0}
.cyber-card:hover .cyber-corner,.cyber-card:focus-within .cyber-corner{border-color:#8c9aff;filter:drop-shadow(0 0 3px #5c67ff80)}
.cyber-line{position:absolute;width:100%;height:1px;background:linear-gradient(90deg,transparent,#5c67ff24,transparent);animation:cyber-line-grow 5s linear infinite;transform-origin:left}
.cyber-line:nth-child(1){top:20%}.cyber-line:nth-child(2){top:40%;animation-delay:1s;transform-origin:right}.cyber-line:nth-child(3){top:60%;animation-delay:2s}.cyber-line:nth-child(4){top:80%;animation-delay:3s;transform-origin:right}
.cyber-scan{position:absolute;inset:0;background:linear-gradient(transparent 42%,#5c67ff0d 50%,transparent 58%);animation:cyber-scan-move 5s linear infinite}
.cyber-particle{position:absolute;width:3px;height:3px;background:#00ffaa;border-radius:50%;opacity:0;left:var(--particle-left);top:var(--particle-top);pointer-events:none}
.cyber-card:hover .cyber-particle{animation:cyber-particle-float 2.5s infinite;animation-delay:var(--particle-delay)}
@keyframes cyber-line-grow{0%,100%{transform:scaleX(0);opacity:0}50%{transform:scaleX(1);opacity:1}}
@keyframes cyber-scan-move{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
@keyframes cyber-particle-float{0%{transform:translate(0,0);opacity:0}50%{opacity:.65}100%{transform:translate(var(--particle-x),var(--particle-y));opacity:0}}
@media(hover:none){.cyber-card{transform:none}.cyber-particle,.cyber-glare{display:none}}
@media(prefers-reduced-motion:reduce){.cyber-card{transform:none;transition:none}.cyber-line,.cyber-scan,.cyber-particle{animation:none}.cyber-line,.cyber-scan{display:none}}
.cyber-card[open]{transform:none}
.cyber-card>summary{position:relative;isolation:isolate}