@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Space+Grotesk:wght@400;600&display=swap";:root{--primary-gold: #f6d365;--primary-amber: #fda085;--accent-cyan: #38bdf8;--bg-dark: #070c18;--card-glass: rgba(15, 23, 42, .72);--card-border: rgba(246, 211, 101, .22);--text-main: #f8fafc;--text-muted: #94a3b8}*{margin:0;padding:0;box-sizing:border-box;user-select:none}body,html{width:100%;height:100%;overflow:hidden;background-color:var(--bg-dark);font-family:Space Grotesk,-apple-system,sans-serif;color:var(--text-main)}#app-container{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;flex-direction:column}#webgl-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}#scene-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;transition:transform .05s ease-out}.film-grain{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;opacity:.16;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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");mix-blend-mode:overlay}.cinematic-vignette{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:4;background:radial-gradient(circle at center,transparent 40%,rgba(3,7,18,.85) 100%)}#flash-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:6;background:radial-gradient(circle,rgba(255,230,180,.75) 0%,rgba(255,120,40,.3) 60%,transparent 100%);opacity:0;transition:opacity .06s ease-out}.top-hud{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1.25rem 2rem;background:linear-gradient(180deg,#070c18d9,#070c1800);backdrop-filter:blur(8px)}.brand-section{display:flex;align-items:baseline;gap:1rem}.brand-title{font-family:Cinzel,serif;font-size:1.5rem;font-weight:900;letter-spacing:.18em;background:linear-gradient(135deg,#fff 20%,var(--primary-gold) 70%,var(--primary-amber) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 20px rgba(246,211,101,.3)}.brand-subtitle{font-size:.8rem;font-weight:500;letter-spacing:.12em;color:var(--text-muted);text-transform:uppercase}.hud-center{display:flex;align-items:center;gap:.75rem}.verse-pill{font-family:Cinzel,serif;font-size:.82rem;font-weight:700;letter-spacing:.08em;color:var(--primary-gold);background:#f6d3651a;border:1px solid rgba(246,211,101,.25);padding:.45rem 1.25rem;border-radius:9999px;box-shadow:0 0 15px #f6d36526;transition:all .3s ease;white-space:nowrap;display:inline-flex;align-items:center}.hud-controls{display:flex;align-items:center;gap:.75rem}.glass-select,.glass-btn{background:var(--card-glass);border:1px solid var(--card-border);color:var(--text-main);padding:.45rem .9rem;border-radius:8px;font-family:inherit;font-size:.82rem;font-weight:600;letter-spacing:.05em;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(12px);outline:none}.glass-select:hover,.glass-btn:hover{border-color:var(--primary-gold);box-shadow:0 0 12px #f6d36540;transform:translateY(-1px)}.glass-select:focus,.glass-btn:active{transform:translateY(0)}.glass-btn.active{background:#f6d36538;border-color:var(--primary-gold);color:var(--primary-gold);box-shadow:0 0 16px #f6d3654d}.bottom-hud{position:absolute;bottom:0;left:0;width:100%;z-index:10;padding:1.25rem 2rem 1.75rem;background:linear-gradient(0deg,#070c18eb,#070c1800);display:flex;flex-direction:column;gap:.9rem;backdrop-filter:blur(10px)}.timeline-container{width:100%;display:flex;align-items:center;gap:1.25rem}.time-display{font-family:Space Grotesk,monospace;font-size:.85rem;color:var(--primary-gold);font-weight:600;min-width:90px;letter-spacing:.05em}.scrubber-track-wrapper{position:relative;flex:1;height:24px;display:flex;align-items:center;cursor:pointer}.scrubber-track{width:100%;height:6px;background:#ffffff1f;border-radius:9999px;position:relative;overflow:visible}.scrubber-progress{position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg,var(--accent-cyan),var(--primary-gold));border-radius:9999px;box-shadow:0 0 12px var(--primary-gold)}.scrubber-handle{position:absolute;top:50%;left:0%;width:14px;height:14px;background:#fff;border:2px solid var(--primary-gold);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #f6d365cc;transition:transform .1s ease}.scrubber-track-wrapper:hover .scrubber-handle{transform:translate(-50%,-50%) scale(1.35)}.verse-marker{position:absolute;top:-2px;width:2px;height:10px;background:#fff6;transform:translate(-50%);pointer-events:none;border-radius:1px}.controls-row{display:flex;justify-content:space-between;align-items:center}.playback-controls{display:flex;align-items:center;gap:1rem}.play-pause-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary-gold),var(--primary-amber));border:none;color:#0b0f19;font-size:1.2rem;cursor:pointer;box-shadow:0 0 20px #f6d36566;transition:all .25s ease}.play-pause-btn:hover{transform:scale(1.08);box-shadow:0 0 28px #f6d365a6}.verse-tabs{display:flex;gap:.35rem}.verse-tab-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:var(--text-muted);font-family:Cinzel,serif;font-size:.76rem;font-weight:700;min-width:52px;height:32px;padding:0 .6rem;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.verse-tab-btn:hover{border-color:var(--primary-gold);color:var(--primary-gold);transform:translateY(-2px)}.verse-tab-btn.active{background:#f6d36533;border-color:var(--primary-gold);color:var(--primary-gold);box-shadow:0 0 10px #f6d3654d}.aux-controls{display:flex;align-items:center;gap:.6rem}.orbit-hint{position:absolute;top:5rem;left:50%;transform:translate(-50%);z-index:12;background:#0f172ad9;border:1px solid var(--accent-cyan);color:var(--accent-cyan);padding:.5rem 1.25rem;border-radius:9999px;font-size:.82rem;font-weight:600;letter-spacing:.05em;box-shadow:0 0 20px #38bdf84d;backdrop-filter:blur(10px);pointer-events:none;opacity:0;transition:opacity .3s ease}.orbit-hint.visible{opacity:1}@media (max-width: 900px){.brand-subtitle,.verse-tabs{display:none}.top-hud,.bottom-hud{padding:.8rem 1rem}}