:root{--neon-pink: #ff00ff;--neon-cyan: #00ffff;--neon-purple: #9d00ff;--neon-blue: #0066ff;--neon-yellow: #ffff00;--dark-background: #000814;--text-color: #c0c0e0;--text-muted: #707090;--glow-blur-strong: 15px;--glow-blur-medium: 8px;--glow-blur-subtle: 4px;--vhs-bg: rgba(24, 24, 40, .95);--vhs-border: #303048;--vhs-osd-font: "VT323", monospace;--vhs-osd-text: var(--neon-cyan);--vhs-osd-shadow: 1px 1px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000;--grid-line: rgba(0, 255, 255, .1);--card-shadow: 0 0 10px rgba(0, 255, 255, .2);--card-shadow-hover: 0 0 20px rgba(255, 0, 255, .3);--content-width: min(100% - 2rem, 1600px);--card-min-width: min(100%, 250px)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{margin:0;background-color:var(--dark-background);color:var(--text-color);font-family:Rajdhani,sans-serif;font-weight:400;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (min-width: 768px){body{background-image:linear-gradient(0deg,transparent 24%,var(--grid-line) 25%,var(--grid-line) 26%,transparent 27%,transparent 74%,var(--grid-line) 75%,var(--grid-line) 76%,transparent 77%),linear-gradient(90deg,transparent 24%,var(--grid-line) 25%,var(--grid-line) 26%,transparent 27%,transparent 74%,var(--grid-line) 75%,var(--grid-line) 76%,transparent 77%);background-size:50px 50px;background-position:center;perspective:1000px}}.background-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at top right,rgba(0,255,255,.1),transparent 50%),radial-gradient(circle at bottom left,rgba(255,0,255,.1),transparent 50%);z-index:1;pointer-events:none}.container{margin-inline:auto}.video-grid.vhs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min-width),1fr));gap:.4rem;padding:0rem}.video-card.vhs-card{background:var(--vhs-bg);border:2px solid var(--neon-cyan);box-shadow:var(--card-shadow);text-decoration:none;position:relative;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;will-change:transform,box-shadow;overflow:hidden}@media (min-width: 768px){.video-card.vhs-card{animation:vhs-card-float 4s ease-in-out infinite}}.video-card.vhs-card:hover{transform:scale(1.02);border-color:var(--neon-pink);box-shadow:var(--card-shadow-hover)}.card-image-container{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;overflow:hidden}.card-image{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .3s ease,filter .3s ease;will-change:transform,filter}.video-card.vhs-card:hover .card-image{transform:scale(1.05);filter:brightness(1.1) contrast(1.1)}.image-vhs-effects{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;mix-blend-mode:overlay}.scanlines{height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 2px);opacity:.5}.play-indicator,.duration-indicator{position:absolute;bottom:.5rem;padding:.25rem .5rem;font-family:var(--vhs-osd-font);background:#000c;font-size:1rem;border-radius:2px}.play-indicator{left:.5rem;color:var(--neon-yellow);opacity:0;transition:opacity .3s ease}.duration-indicator{right:.5rem;color:var(--neon-cyan)}.video-card.vhs-card:hover .play-indicator{opacity:1}.card-content.vhs-osd{padding:.3rem;background:var(--vhs-bg);border-top:2px solid var(--neon-purple)}.card-title.osd-title{font-family:var(--vhs-osd-font);font-size:1rem;color:var(--neon-cyan);text-shadow:0 0 1px var(--neon-cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-date.osd-date{font-family:var(--vhs-osd-font);font-size:.875rem;color:var(--neon-pink);text-shadow:0 0 5px var(--neon-pink)}.error-message,.no-videos-message{text-align:center;font-size:clamp(1.2rem,5vw,2rem);margin-block:2rem;color:var(--neon-pink);font-family:var(--vhs-osd-font);text-shadow:0 0 10px var(--neon-pink)}@keyframes vhs-card-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes static-flicker{0%,to{opacity:.03}50%{opacity:.04}}@media (min-width: 768px){.video-grid.vhs-grid{gap:.4rem;padding:0rem}.card-title.osd-title{font-size:1.2rem}.play-indicator,.duration-indicator{padding:.5rem .75rem;font-size:1.1rem}}@media (min-width: 1024px){.video-card.vhs-card:hover{transform:scale(1.05)}}@media (prefers-reduced-motion: reduce){.video-card.vhs-card{animation:none}.scanlines{display:none}}
