:root{--bg-color:#0b0c10;--bg-gradient-start:#1a1e29;--bg-gradient-end:#0b0c10;--text-primary:#e0e6ed;--text-secondary:#8c9baf;--accent-color:#66b2ff;--accent-glow:#66b2ff66;--card-bg:#ffffff08;--card-border:#ffffff1a;--card-hover-bg:#ffffff14;--particle-color:#ffffff1a}[data-theme=light]{--bg-color:#f0f2f5;--bg-gradient-start:#fff;--bg-gradient-end:#e2e8f0;--text-primary:#1a1e29;--text-secondary:#4a5568;--accent-color:#3182ce;--accent-glow:#3182ce66;--card-bg:#00000008;--card-border:#0000001a;--card-hover-bg:#00000014;--particle-color:#0000000d}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);background:radial-gradient(circle at center, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);justify-content:center;align-items:center;min-height:100vh;font-family:Outfit,sans-serif;transition:background .5s,color .5s;display:flex;overflow:hidden}#app{text-align:center;z-index:1;width:100%;max-width:800px;padding:2rem;animation:1.5s ease-out fadeIn;position:relative}body:before{content:"";z-index:0;opacity:.5;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj48Y2lyY2xlIGN4PSIyMDAiIGN5PSIyMDAiIHI9IjEiIGZpbGw9InJnYmEoMTI4LDEyOCwxMjgsMC41KSIvPjwvc3ZnPg==);width:100%;height:100%;position:absolute;top:0;left:0}.top-controls{z-index:100;gap:10px;animation:1s ease-out fadeIn;display:flex;position:fixed;top:20px;right:20px}.top-controls button,.top-controls select{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-primary);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;outline:none;padding:8px 12px;font-family:Outfit,sans-serif;font-size:1rem;font-weight:700;transition:all .3s}.top-controls button:hover,.top-controls select:hover{background:var(--card-hover-bg);border-color:var(--accent-color);transform:translateY(-2px)}.top-controls select option{background-color:var(--bg-color);color:var(--text-primary)}.logo-container{margin-bottom:2rem;display:inline-block;position:relative}.logo-container:after{content:"";background:radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);z-index:-1;opacity:.6;width:120%;height:120%;animation:4s infinite alternate pulseGlow;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.logo{filter:drop-shadow(0 0 20px #000c);width:100%;max-width:500px;height:auto;transition:transform .4s}[data-theme=light] .logo{filter:drop-shadow(0 0 20px #0000004d)}.logo:hover{transform:scale(1.05)}h1{letter-spacing:2px;text-transform:uppercase;background:linear-gradient(135deg,#fff,#8c9baf);-webkit-text-fill-color:transparent;color:#0000;filter:drop-shadow(0 2px 4px #00000080);-webkit-background-clip:text;background-clip:text;margin-bottom:1rem;font-size:3rem;font-weight:900}[data-theme=light] h1{background:linear-gradient(135deg,#1a1e29,#4a5568);-webkit-text-fill-color:transparent;color:#0000;filter:drop-shadow(0 2px 4px #0000001a);-webkit-background-clip:text;background-clip:text}p.subtitle{color:var(--text-secondary);letter-spacing:1px;margin-bottom:3rem;font-size:1.2rem;font-weight:400}.links{flex-wrap:wrap;justify-content:center;gap:1.5rem;display:flex}.link-card{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:1rem 2rem;font-size:1.1rem;font-weight:700;text-decoration:none;transition:all .3s;position:relative;overflow:hidden}.link-card:before{content:"";background:linear-gradient(90deg,#0000,#ffffff0d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}[data-theme=light] .link-card:before{background:linear-gradient(90deg,#0000,#0000000d,#0000)}.link-card:hover:before{left:100%}.link-card:hover{background:var(--card-hover-bg);border-color:var(--accent-color);box-shadow:0 10px 20px #0000004d, 0 0 15px var(--accent-glow);transform:translateY(-3px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseGlow{0%{opacity:.4;transform:translate(-50%,-50%)scale(1)}to{opacity:.8;transform:translate(-50%,-50%)scale(1.1)}}@media (width<=600px){h1{font-size:2rem}.logo{max-width:250px}.links{flex-direction:column;gap:1rem}}
