:root{--color-bg: #020818;--color-surface: #0a1628;--color-primary: #00e5ff;--color-secondary: #7c4dff;--color-accent: #ff4081;--color-text: #e0e7ff;--color-text-dim: #64748b;--color-grid: rgba(0, 229, 255, .15);--color-grid-active: rgba(0, 229, 255, .6);--color-glow: rgba(0, 229, 255, .3);--font-primary: "Google Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "Google Sans Mono", "Fira Code", monospace}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-primary);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--color-bg);transition:opacity .8s cubic-bezier(.4,0,.2,1),visibility .8s}.loading-screen.fade-out{opacity:0;visibility:hidden;pointer-events:none}.loading-content{display:flex;flex-direction:column;align-items:center;gap:40px;max-width:480px;padding:40px}.loading-logo{text-align:center}.logo-jellyfish{font-size:64px;margin-bottom:16px;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(0,229,255,.4))}@keyframes float{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}.logo-title{font-size:36px;font-weight:700;letter-spacing:-.02em;color:var(--color-text)}.logo-subtitle{font-size:14px;font-weight:400;color:var(--color-text-dim);margin-top:12px;letter-spacing:.02em;line-height:1.5;max-width:340px}.loading-progress{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}.progress-bar{width:100%;height:4px;background:#ffffff0f;border-radius:4px;overflow:hidden}.progress-fill{height:100%;width:0%;background:var(--color-text-dim);border-radius:4px;transition:width .5s cubic-bezier(.4,0,.2,1)}.loading-status{font-size:14px;font-family:var(--font-primary);color:var(--color-text-dim);text-align:center}.mode-selector{opacity:0;transform:translateY(10px);transition:all .5s cubic-bezier(.4,0,.2,1)}.mode-selector.ready{opacity:1;transform:translateY(0)}.mode-label{font-size:14px;font-weight:500;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.1em;text-align:center;margin-bottom:16px}.mode-buttons{display:flex;gap:16px}.mode-button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 32px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#ffffff0a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--color-text);font-family:var(--font-primary);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;min-width:160px}.mode-button:hover{background:#ffffff14;border-color:var(--color-primary);box-shadow:0 4px 24px #00e5ff26;transform:translateY(-3px)}.mode-button:active{transform:translateY(0)}.mode-icon{font-size:32px}.mode-name{font-size:14px;font-weight:600;color:var(--color-text)}.mode-desc{font-size:14px;color:var(--color-text-dim);text-align:center;line-height:1.4}.loading-credit{font-size:14px;color:var(--color-text-dim);letter-spacing:.1em;text-transform:uppercase;opacity:.5}.experience{position:fixed;top:0;right:0;bottom:0;left:0;background:#000}.experience.hidden{display:none}#video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}#overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.hud{position:absolute;top:16px;left:16px;z-index:20;display:flex;flex-direction:column;gap:6px}.hud-item{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);font-size:12px;color:var(--color-text);letter-spacing:.02em}.hud-dot{width:6px;height:6px;border-radius:50%;background:var(--color-text-dim);transition:background .3s}.hud-dot.active{background:#22c55e;box-shadow:0 0 8px #22c55e80}.branding{position:absolute;bottom:16px;right:20px;z-index:20;display:flex;align-items:center;gap:10px;padding:8px 18px;border-radius:20px;background:#0006;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.06);font-size:12px;font-weight:500;letter-spacing:.04em}.brand-title{color:var(--color-primary)}.brand-divider{color:var(--color-text-dim)}.brand-partner{color:var(--color-text);opacity:.7}.genre-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;pointer-events:none}.genre-overlay.hidden{display:none}.genre-quadrant{display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.06);transition:background-color 2s ease}.genre-tl{background:#9370db0d}.genre-tr{background:#00e5ff0d}.genre-bl{background:#ff69b40d}.genre-br{background:#ffa5000d}.genre-label{font-family:var(--font-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:#ffffff4d;background:#0000004d;padding:4px 10px;border-radius:4px;transition:color 1s ease,background 1s ease}.genre-info{display:flex;flex-direction:column;align-items:center;gap:6px}.genre-slider{width:80px;height:3px;background:#ffffff14;border-radius:2px;overflow:hidden}.genre-slider-fill{height:100%;width:25%;border-radius:2px;transition:width .8s ease}.genre-tl .genre-slider-fill{background:#9370dbb3}.genre-tr .genre-slider-fill{background:#00e5ffb3}.genre-bl .genre-slider-fill{background:#ff69b4b3}.genre-br .genre-slider-fill{background:#ffa500b3}.genre-pct{font-family:var(--font-mono);font-size:10px;font-weight:400;color:#ffffff40;transition:color 1s ease}.genre-quadrant.active .genre-label{color:#ffffffb3;background:#00000080}.genre-quadrant.active .genre-pct{color:#ffffff80}.genre-tl.active{background:#9370db26}.genre-tr.active{background:#00e5ff26}.genre-bl.active{background:#ff69b426}.genre-br.active{background:#ffa50026}.mode-tier{display:block;font-family:var(--font-primary);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-primary);margin-bottom:6px}.changeover-indicator{position:absolute;bottom:16px;left:20px;z-index:20;padding:6px 14px;border-radius:20px;background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(124,77,255,.3);font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--color-secondary);letter-spacing:.05em;opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}.changeover-indicator.active{opacity:1;transform:translateY(0)}.bloom-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;pointer-events:none;overflow:hidden}.bloom{position:absolute;width:100px;height:100px;margin-left:-50px;margin-top:-50px;border-radius:50%;animation:bloom-burst 2s ease-out forwards;will-change:transform,opacity}@keyframes bloom-burst{0%{transform:scale(.2);opacity:.9}20%{transform:scale(1);opacity:.7}to{transform:scale(3);opacity:0}}.bloom-ring{position:absolute;width:50px;height:50px;margin-left:-25px;margin-top:-25px;border-radius:50%;border:2px solid currentColor;background:transparent;animation:ring-expand 2s ease-out forwards;will-change:transform,opacity}@keyframes ring-expand{0%{transform:scale(.3);opacity:.8}to{transform:scale(4);opacity:0}}.note-float{position:absolute;font-family:Inter,sans-serif;font-weight:700;font-size:18px;color:#fff;text-shadow:0 0 16px rgba(0,229,255,.8),0 0 40px rgba(0,229,255,.3);animation:note-rise 2s ease-out forwards;will-change:transform,opacity}@keyframes note-rise{0%{transform:translateY(0) scale(1.3);opacity:1}40%{opacity:.8}to{transform:translateY(-80px) scale(.7);opacity:0}}.bloom-particle{position:absolute;width:8px;height:8px;border-radius:50%;box-shadow:0 0 6px currentColor;animation:particle-fly 1.5s ease-out forwards;will-change:transform,opacity}@keyframes particle-fly{0%{transform:translate(0) scale(1);opacity:.9}to{transform:translate(var(--tx, 30px),var(--ty, -30px)) scale(.2);opacity:0}}