*{margin:0;padding:0;box-sizing:border-box}body{background:#000;color:#fff;font-family:Space Mono,monospace;overflow-x:hidden;cursor:none}canvas#webgl{position:fixed;top:0;left:0;z-index:-1}#webgl-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}#webgl-container canvas{width:100%;height:100%}#ui{position:relative;z-index:1}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.7) 100%);pointer-events:none;z-index:996}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.015) 2px,rgba(0,0,0,.015) 4px);pointer-events:none;z-index:997}.card,.instructions{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.section{min-height:100vh;display:flex;align-items:center;padding:60px 8%;pointer-events:none;position:relative}.card{padding:35px 40px;min-width:320px;max-width:480px;width:auto;position:relative;overflow:visible;transition:all .8s cubic-bezier(.23,1,.32,1);pointer-events:auto}.card:hover{transform:translateY(-5px) scale(1.02)}.section[data-universe=genesis] .card{background:linear-gradient(135deg,#00ffc81f,#0064ff14);border:1px solid rgba(0,255,200,.4);box-shadow:0 0 60px #00ffc840,inset 0 0 30px #00ffc814;border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section[data-universe=nebula] .card{background:radial-gradient(ellipse at top left,#8a2be22e,#4b00821f);border:1px solid rgba(138,43,226,.5);box-shadow:0 0 100px #8a2be266,0 0 200px #4b008233;border-radius:20px 4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section[data-universe=plasma] .card{background:linear-gradient(135deg,#ff008026,#ff64001a);border:1px solid rgba(255,0,128,.5);box-shadow:0 0 80px #ff008059,inset 0 0 40px #ff64001a;border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section[data-universe=stellar] .card{background:radial-gradient(circle at center,#ffd7002e,#ff8c0014);border:2px solid rgba(255,215,0,.6);box-shadow:0 0 120px #ffd70080,0 0 250px #ff8c004d;border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section[data-universe=fractal] .card{background:#ffc8001a;border:2px solid rgba(255,200,0,.6);box-shadow:0 0 100px #ffc80059;border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section[data-universe=asteroid] .card{background:linear-gradient(45deg,#8b776533,#69696926);border:2px solid rgba(139,119,101,.5);box-shadow:0 0 60px #8b776559;border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section[data-universe=ocean] .card{background:radial-gradient(ellipse at center,#00c8ff2e,#0064c81a);border:1px solid rgba(0,200,255,.5);box-shadow:0 0 120px #00c8ff66;border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:float-card 4s ease-in-out infinite}@keyframes float-card{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.section[data-universe=aurora] .card{background:linear-gradient(180deg,#00ff7f26,#00bfff1a,#8a2be214);border:1px solid rgba(0,255,127,.5);box-shadow:0 0 150px #00ff7f59,0 0 300px #8a2be233;border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:aurora-glow 3s ease-in-out infinite alternate}@keyframes aurora-glow{0%{box-shadow:0 0 150px #00ff7f59,0 0 300px #8a2be233}to{box-shadow:0 0 150px #8a2be259,0 0 300px #00ff7f33}}.section[data-universe=wormhole] .card{background:conic-gradient(from 0deg,#ff00ff26,#00ffff1f,#ffff001f,#ff00ff26);border:2px solid rgba(255,0,255,.6);box-shadow:0 0 100px #ff00ff73;border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section[data-universe=glitch] .card{background:linear-gradient(45deg,#ff323226,#32ff321a,#3232ff26);border:2px solid rgba(255,255,255,.4);animation:glitch-border .5s infinite;border-radius:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes glitch-border{0%,to{border-color:#f009;transform:translate(0)}25%{border-color:#0f09;transform:translate(-2px,2px)}50%{border-color:#00f9;transform:translate(2px,-2px)}75%{border-color:#ff09;transform:translate(-1px,-1px)}}.section[data-universe=singularity] .card{background:radial-gradient(circle at center,#000000f2,#ffffff1a);border:2px solid rgba(255,255,255,.9);box-shadow:0 0 200px #fff9,0 0 400px #ffffff4d,inset 0 0 100px #000000e6;border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}h1,h2{font-family:Orbitron,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:3px;margin-bottom:18px;line-height:1.3;word-wrap:break-word}h1{font-size:clamp(1.8rem,4vw,2.5rem);background:linear-gradient(90deg,#00ffc8,#00a8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}h2{font-size:clamp(1.4rem,3vw,1.8rem)}.section[data-universe=nebula] h2{background:linear-gradient(90deg,#8a2be2,indigo,#9400d3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Cinzel,serif}.section[data-universe=plasma] h2{background:linear-gradient(90deg,#ff0080,#ff6400);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section[data-universe=stellar] h2{color:gold;text-shadow:0 0 30px rgba(255,215,0,1),0 0 60px rgba(255,140,0,.8)}.section[data-universe=fractal] h2{color:#ffc800;text-shadow:0 0 30px rgba(255,200,0,.8)}.section[data-universe=asteroid] h2{color:tan;text-shadow:2px 2px 4px rgba(0,0,0,.8);font-family:Cinzel,serif;letter-spacing:4px}.section[data-universe=ocean] h2{background:linear-gradient(90deg,#00c8ff,#0f8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section[data-universe=aurora] h2{background:linear-gradient(90deg,#00ff7f,#00bfff,#8a2be2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section[data-universe=wormhole] h2{background:conic-gradient(from 0deg,#f0f,#0ff,#ff0,#f0f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:spin-gradient 3s linear infinite}@keyframes spin-gradient{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}.section[data-universe=glitch] h2{animation:text-glitch .3s infinite;color:#fff}@keyframes text-glitch{0%,to{text-shadow:3px 0 #ff0000,-3px 0 #00ff00}25%{text-shadow:-3px 0 #ff0000,3px 0 #0000ff}50%{text-shadow:3px 0 #00ff00,-3px 0 #ff0000}75%{text-shadow:-3px 0 #0000ff,3px 0 #ff00ff}}.section[data-universe=singularity] h2{color:#fff;text-shadow:0 0 50px #fff,0 0 100px #fff,0 0 150px #fff;animation:pulse-bright 2s ease-in-out infinite}@keyframes pulse-bright{0%,to{opacity:1}50%{opacity:.7}}p{font-size:clamp(.85rem,1.5vw,.95rem);line-height:1.9;opacity:.9;letter-spacing:.3px}.cosmic-symbol{font-size:2.5rem;margin-bottom:12px;display:block;filter:drop-shadow(0 0 10px currentColor)}.instructions{position:fixed;bottom:20px;left:50%;transform:translate(-50%);color:#666;letter-spacing:2px;font-size:.6rem;text-transform:uppercase;z-index:100;text-align:center;max-width:90%}.progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#00ffc8,#8a2be2,#ff0080,gold,#ffc800,#8b7765,#00c8ff,#00ff7f,#f0f,red,#fff);background-size:1100% 100%;z-index:1000;width:0%;box-shadow:0 0 20px var(--universe-color, #00ffc8)}.section-indicator{position:fixed;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:100}.indicator-dot{width:10px;height:10px;border:1px solid rgba(255,255,255,.4);border-radius:50%;transition:all .4s cubic-bezier(.23,1,.32,1);cursor:pointer;pointer-events:all;position:relative}.indicator-dot:after{content:attr(data-name);position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:.55rem;letter-spacing:1px;opacity:0;transition:opacity .3s;white-space:nowrap;text-transform:uppercase;background:#000c;padding:4px 8px;border-radius:3px}.indicator-dot:hover:after{opacity:1}.indicator-dot.active{background:#fff;box-shadow:0 0 15px currentColor;transform:scale(1.3)}.universe-name{position:fixed;left:20px;top:50%;transform:translateY(-50%) rotate(-90deg);font-family:Orbitron,sans-serif;font-size:.55rem;letter-spacing:5px;opacity:.4;text-transform:uppercase;transform-origin:left center;z-index:100}.chapter-number{position:fixed;left:20px;bottom:20px;font-family:Orbitron,sans-serif;font-size:3rem;font-weight:900;opacity:.08;z-index:100;line-height:1}.object-counter{position:fixed;top:20px;left:20px;font-family:Orbitron,sans-serif;font-size:.7rem;letter-spacing:2px;opacity:.6;z-index:100}.object-counter span{color:var(--universe-color, #00ffc8);font-size:1.2rem;font-weight:700}.control-panel{position:fixed;top:20px;right:70px;display:flex;flex-direction:column;gap:8px;z-index:100}.control-btn{width:36px;height:36px;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:1rem;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;pointer-events:all;position:relative}.control-btn:hover{background:#ffffff26;border-color:var(--universe-color, #00ffc8);box-shadow:0 0 20px var(--universe-color, #00ffc8)}.control-btn.active{background:var(--universe-color, #00ffc8);color:#000}.control-btn[data-tooltip]:after{content:attr(data-tooltip);position:absolute;right:45px;top:50%;transform:translateY(-50%);font-size:.5rem;letter-spacing:1px;opacity:0;white-space:nowrap;text-transform:uppercase;background:#000000e6;padding:4px 8px;border-radius:3px;transition:opacity .3s;pointer-events:none;color:#fff}.control-btn:hover[data-tooltip]:after{opacity:1}.mode-indicator{position:fixed;top:70px;left:50%;transform:translate(-50%);font-family:Orbitron,sans-serif;font-size:.6rem;letter-spacing:3px;text-transform:uppercase;opacity:0;transition:opacity .3s;z-index:100;background:#000c;padding:8px 15px;border-radius:20px;border:1px solid var(--universe-color, #00ffc8)}.mode-indicator.visible{opacity:1}.radar-container{position:fixed;bottom:20px;right:20px;width:150px;height:150px;z-index:100;display:none}.radar-container.visible{display:block}.radar-frame{position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid var(--universe-color, #00ffc8);border-radius:50%;box-shadow:0 0 20px var(--universe-color, #00ffc8),inset 0 0 30px #00ffc81a;background:radial-gradient(circle,#001414e6,#000a0af2)}.radar-canvas{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.radar-label{position:absolute;bottom:-25px;left:50%;transform:translate(-50%);font-family:Orbitron,sans-serif;font-size:.5rem;letter-spacing:2px;color:var(--universe-color, #00ffc8);text-transform:uppercase}.radar-stats{position:absolute;top:-25px;left:50%;transform:translate(-50%);font-family:Space Mono,monospace;font-size:.5rem;color:var(--universe-color, #00ffc8);white-space:nowrap}.audio-controls-container{position:fixed;bottom:60px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transition:opacity .3s;z-index:99;pointer-events:none}.audio-controls-container.visible{opacity:1;pointer-events:auto}.volume-control{display:flex;align-items:center;gap:10px;background:#000c;padding:8px 15px;border-radius:20px;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.volume-control.visible{opacity:1}.volume-control label{font-size:.6rem;letter-spacing:1px;text-transform:uppercase}.volume-slider{width:100px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff3;border-radius:2px;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:var(--universe-color, #00ffc8);border-radius:50%;cursor:pointer}.audio-visualizer{display:flex;gap:2px;height:30px;align-items:flex-end;opacity:0;transition:opacity .3s;padding:0 10px}.audio-visualizer.playing{opacity:.8}.audio-bar{width:3px;background:var(--universe-color, #00ffc8);border-radius:2px;transition:height .05s}.graphics-settings-button{position:fixed;top:80px;left:20px;width:50px;height:50px;background:#000000b3;border:2px solid var(--universe-color, #00ffc8);border-radius:50%;color:var(--universe-color, #00ffc8);font-size:1.5rem;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 20px #00ffc84d}.graphics-settings-button:hover{transform:scale(1.1) rotate(90deg);background:var(--universe-color, #00ffc8);color:#0a0a1e;box-shadow:0 0 30px var(--universe-color, #00ffc8)}.graphics-settings-button:active{transform:scale(.95) rotate(90deg)}@media(max-width:768px){.graphics-settings-button{top:20px;left:auto;right:20px;width:45px;height:45px}}.custom-cursor{position:fixed;width:40px;height:40px;border:2px solid rgba(255,255,255,.5);border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:transform .1s ease,border-color .3s,width .2s,height .2s;mix-blend-mode:difference}.custom-cursor:before{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}.custom-cursor.clicking{transform:translate(-50%,-50%) scale(.8);border-color:var(--universe-color, #00ffc8)}.cursor-trail{position:fixed;width:8px;height:8px;background:var(--universe-color, #00ffc8);border-radius:50%;pointer-events:none;z-index:9999;opacity:.6;transform:translate(-50%,-50%);transition:opacity .5s}.click-ripple{position:fixed;border-radius:50%;border:2px solid var(--universe-color, #00ffc8);pointer-events:none;z-index:9998;animation:ripple-expand .8s ease-out forwards}@keyframes ripple-expand{0%{width:0;height:0;opacity:1}to{width:200px;height:200px;opacity:0}}.debug-panel{position:fixed;top:10px;right:10px;width:400px;max-height:90vh;background:#000000f2;border:2px solid var(--universe-color, #00ffc8);border-radius:8px;color:#fff;font-family:Space Mono,monospace;font-size:12px;overflow:hidden;z-index:10000;box-shadow:0 0 30px #00ffc84d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.debug-panel.collapsed{width:auto;max-height:none}.debug-header{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background:#00ffc81a;border-bottom:1px solid var(--universe-color, #00ffc8);cursor:move}.debug-header h3{margin:0;font-size:14px;font-weight:700;color:var(--universe-color, #00ffc8);text-transform:uppercase;letter-spacing:2px}.debug-header-actions{display:flex;gap:5px}.debug-header-actions button{background:#00ffc833;border:1px solid var(--universe-color, #00ffc8);color:var(--universe-color, #00ffc8);padding:4px 10px;border-radius:4px;cursor:pointer;font-family:Space Mono,monospace;font-size:11px;transition:all .2s}.debug-header-actions button:hover{background:#00ffc866;transform:scale(1.05)}.debug-tabs{display:flex;background:#00000080;border-bottom:1px solid rgba(0,255,200,.3);overflow-x:auto}.debug-tabs button{flex:1;background:transparent;border:none;color:#fff9;padding:10px 8px;cursor:pointer;font-family:Space Mono,monospace;font-size:11px;transition:all .2s;border-bottom:2px solid transparent;white-space:nowrap}.debug-tabs button:hover{background:#00ffc81a;color:#ffffffe6}.debug-tabs button.active{color:var(--universe-color, #00ffc8);border-bottom-color:var(--universe-color, #00ffc8);background:#00ffc826}.debug-content{max-height:calc(90vh - 120px);overflow-y:auto;padding:15px}.debug-content::-webkit-scrollbar{width:8px}.debug-content::-webkit-scrollbar-track{background:#0000004d}.debug-content::-webkit-scrollbar-thumb{background:var(--universe-color, #00ffc8);border-radius:4px}.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}.metric-card{background:#00ffc80d;border:1px solid rgba(0,255,200,.2);border-radius:6px;padding:12px}.metric-label{font-size:10px;color:#fff9;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}.metric-value{font-size:24px;font-weight:700;color:var(--universe-color, #00ffc8);line-height:1}.metric-value.small{font-size:16px}.metric-sub{font-size:10px;color:#ffffff80;margin-top:2px}.metric-bar{height:4px;background:#00000080;border-radius:2px;margin-top:8px;overflow:hidden}.metric-bar-fill{height:100%;transition:width .3s,background-color .3s;border-radius:2px}.system-status{background:#00ffc80d;border:1px solid rgba(0,255,200,.2);border-radius:6px;padding:12px}.system-status h4{margin:0 0 10px;font-size:12px;color:var(--universe-color, #00ffc8);text-transform:uppercase}.status-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1)}.status-item:last-child{border-bottom:none}.status-loaded{color:#0f8;font-weight:700}.status-pending{color:#fff6}.component-card{background:#00ffc80d;border:1px solid rgba(0,255,200,.2);border-radius:6px;padding:12px;margin-bottom:10px}.component-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(0,255,200,.2)}.component-header strong{color:var(--universe-color, #00ffc8)}.component-time{font-size:10px;color:#ffffff80}.component-data{font-size:11px}.data-row{display:flex;padding:3px 0}.data-key{color:#fff9;margin-right:8px;min-width:80px}.data-value{color:var(--universe-color, #00ffc8);word-break:break-all}.logs-section,.timeline-section{font-size:11px}.log-entry,.timeline-event{padding:8px;margin-bottom:6px;background:#00ffc808;border-left:3px solid rgba(0,255,200,.3);border-radius:4px}.log-time,.timeline-time{color:#fff6;margin-right:8px;font-size:10px}.log-category,.timeline-category{display:inline-block;padding:2px 6px;border-radius:3px;margin-right:8px;font-size:10px;font-weight:700;text-transform:uppercase}.category-component{background:#8a2be24d;color:#8a2be2}.category-lazyload{background:#ffa5004d;color:orange}.category-performance{background:#00ff884d;color:#0f8}.category-init{background:#00bfff4d;color:#00bfff}.category-physics{background:#ff00804d;color:#ff0080}.log-message,.timeline-message{color:#ffffffe6}.log-data{margin-top:5px;padding:5px;background:#0000004d;border-radius:3px;color:#fff9;font-size:10px;overflow-x:auto}.errors-section{font-size:11px}.no-errors{text-align:center;padding:30px;color:#0f8;font-size:14px}.error-entry{background:#ff44441a;border:1px solid rgba(255,68,68,.3);border-left:4px solid #ff4444;border-radius:6px;padding:12px;margin-bottom:10px}.error-header{display:flex;gap:10px;margin-bottom:8px}.error-time{color:#fff6;font-size:10px}.error-category{background:#ff44444d;color:#f44;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:700;text-transform:uppercase}.error-message{color:#f88;font-weight:700;margin-bottom:6px}.error-detail{color:#fffc;margin-bottom:8px}.error-stack{background:#00000080;border:1px solid rgba(255,68,68,.2);border-radius:4px;padding:8px;font-size:10px;color:#fff9;overflow-x:auto;max-height:200px;overflow-y:auto}.event-error{border-left-color:#f44;background:#ff44440d}.event-log{border-left-color:var(--universe-color, #00ffc8)}@media(max-width:768px){.debug-panel{width:calc(100vw - 20px);right:10px;left:10px}.metric-grid{grid-template-columns:1fr}}