:root{--space-8: 8px;--space-16: 16px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-64: 64px;--bg-primary: #050505;--accent-primary: #6366f1;--accent-secondary: #ec4899;--text-pure: #ffffff;--card-bg: rgba(255, 255, 255, .03);--card-border: rgba(255, 255, 255, .05)}.light-mode{--bg-primary: #F5F7FA;--text-pure: #1a202c;--card-bg: rgba(255, 255, 255, .7);--card-border: rgba(0, 0, 0, .05)}body{background-color:var(--bg-primary);color:var(--text-pure);font-family:Inter,sans-serif;transition:background-color .3s ease,color .3s ease}#bg-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}.light-mode #bg-canvas{opacity:.15}.bento-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-16)}.bento-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;transition:all .4s cubic-bezier(.165,.84,.44,1);will-change:transform}.light-mode .bento-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 8px 32px #0000000d}.bento-card:hover{background:#ffffff0f;transform:translateY(-8px)}.light-mode .bento-card:hover{background:#ffffffe6}