:root{--bg-color: #050505;--card-bg: rgba(15, 15, 15, .6);--border-color: rgba(255, 255, 255, .08);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .6);--accent-color: #0070ff;--spotify-green: #1DB954;--glass-blur: 24px;--card-radius: 28px;--transition: all .5s cubic-bezier(.23, 1, .32, 1)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-primary);font-family:Outfit,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow-x:hidden}#root{width:100%;display:flex;justify-content:center;padding:2rem}.mesh-gradient{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;background:radial-gradient(circle at 10% 20%,rgba(0,112,255,.15) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(0,210,255,.15) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(0,123,255,.05) 0%,transparent 50%);filter:blur(80px)}.noise{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:.02;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")}.bento-container{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(160px,auto);gap:1.5rem;max-width:1200px;width:100%}.bento-item{background:var(--card-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-color);border-radius:var(--card-radius);padding:2rem;position:relative;overflow:hidden;transition:var(--transition);cursor:default}.bento-item:hover{border-color:#ffffff26;background:#141414b3}.card-header{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}.label{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-secondary);font-weight:600}@keyframes visualize{0%,to{height:20%}50%{height:100%}}.bar{width:4px;background:var(--spotify-green);border-radius:2px;animation:visualize 1s ease-in-out infinite}.tag{background:#ffffff0d;padding:.4rem 1rem;border-radius:100px;font-size:.85rem;color:var(--text-secondary);border:1px solid var(--border-color);transition:var(--transition)}.tag:hover{background:#ffffff1a;border-color:#fff3}.pulse{animation:pulse-ring 2s infinite}@keyframes pulse-ring{0%{transform:scale(1);opacity:.3}50%{transform:scale(1.05);opacity:.1}to{transform:scale(1);opacity:.3}}.social-link:hover{background:var(--accent-color)!important;transform:scale(1.1);border-color:transparent!important}.grid-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background-image:linear-gradient(rgba(0,112,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,112,255,.1) 1px,transparent 1px);background-size:50px 50px;pointer-events:none}.grid-background:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(0,112,255,.4) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(0,112,255,.4) 1.5px,transparent 1.5px);background-size:50px 50px;mask-image:radial-gradient(circle 250px at var(--mouse-x) var(--mouse-y),black,transparent);-webkit-mask-image:radial-gradient(circle 250px at var(--mouse-x) var(--mouse-y),black,transparent)}.grid-background:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle 400px at var(--mouse-x) var(--mouse-y),rgba(0,112,255,.08),transparent)}@media (max-width: 1024px){.bento-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){#root{padding:1rem}.bento-container{grid-template-columns:1fr;gap:1rem}}