:root{--bg-deep:#06060a;--bg-panel:#0c0d1280;--border-glow:#00ffff26;--border-hover:#00ffff59;--accent-cyan:#0ff;--accent-cyan-dim:#1fadad;--accent-cyan-rgb:0, 255, 255;--accent-orange:#f60;--accent-orange-rgb:255, 102, 0;--text-primary:#e2e4e9;--text-secondary:#9da3af;--text-muted:#676f7e;--font-display:"Orbitron", sans-serif;--font-sans:"Outfit", sans-serif;--font-mono:"Share Tech Mono", monospace;--glow-shadow:0 0 20px #00ffff26;--glow-shadow-orange:0 0 25px #f603;--transition-fast:.2s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-deep);color:var(--text-primary);font-family:var(--font-sans);-webkit-user-select:none;user-select:none;width:100vw;height:100vh;font-size:16px;overflow:hidden}#canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.hud-layer{z-index:10;pointer-events:none;position:absolute}#hud-header{top:30px;left:40px}#hud-header h1{font-family:var(--font-display);letter-spacing:.3rem;color:var(--text-primary);text-shadow:0 0 15px #ffffff26;background:linear-gradient(135deg, #fff 30%, var(--text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2.2rem;font-weight:800}#hud-header .subtitle{font-family:var(--font-mono);color:var(--accent-cyan);letter-spacing:.15rem;opacity:.8;text-shadow:0 0 8px #0ff6;margin-top:4px;font-size:.85rem}#hud-vitals{gap:30px;display:flex;top:30px;right:40px}.hud-item{font-family:var(--font-mono);letter-spacing:.05rem;flex-direction:column;align-items:flex-end;font-size:.9rem;display:flex}.hud-label{color:var(--text-muted);margin-bottom:2px;font-size:.75rem}.hud-val{color:var(--text-primary);font-weight:600}.text-glow{color:var(--accent-cyan);text-shadow:0 0 8px #00ffff80}.ui-container{pointer-events:none;z-index:10;justify-content:space-between;display:flex;position:absolute;inset:110px 40px 30px}.glass-panel{background:var(--bg-panel);-webkit-backdrop-filter:blur(14px)saturate(180%);border:1px solid var(--border-glow);box-shadow:var(--glow-shadow), inset 0 0 15px #ffffff05;transition:border-color var(--transition-normal), box-shadow var(--transition-normal);pointer-events:auto;border-radius:12px;flex-direction:column;display:flex;overflow:hidden}.glass-panel:hover{border-color:var(--border-hover);box-shadow:0 0 30px #00ffff38}.ui-panel{zoom:.75;width:380px;max-height:100%}#control-panel{align-self:flex-start;height:100%}#educational-panel{zoom:.75;align-self:flex-start;width:400px;max-height:80%}.panel-header{padding:20px 24px 15px;position:relative}.panel-header h2{font-family:var(--font-display);letter-spacing:.15rem;color:var(--text-primary);font-size:1.05rem;font-weight:600}.panel-accent{background:linear-gradient(90deg, var(--accent-cyan) 0%, transparent 100%);height:1px;box-shadow:0 0 4px var(--accent-cyan);position:absolute;bottom:0;left:24px;right:24px}.panel-body{flex:1;padding:20px 24px;overflow-y:auto}.panel-body::-webkit-scrollbar{width:4px}.panel-body::-webkit-scrollbar-track{background:0 0}.panel-body::-webkit-scrollbar-thumb{background:var(--border-glow);border-radius:2px}.panel-body::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan-dim)}.control-section{margin-bottom:24px}.section-title{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.1rem;text-transform:uppercase;border-left:2px solid var(--accent-cyan-dim);margin-bottom:15px;padding-left:8px;font-size:.75rem}.control-group{margin-bottom:18px}.control-group label{color:var(--text-secondary);justify-content:space-between;margin-bottom:8px;font-size:.85rem;display:flex}.value-display{font-family:var(--font-mono);color:var(--accent-cyan);font-weight:600}input[type=range]{-webkit-appearance:none;width:100%;height:6px;transition:background var(--transition-fast);background:#1f212e;border-radius:3px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-cyan);width:16px;height:16px;box-shadow:0 0 10px var(--accent-cyan);cursor:pointer;transition:transform var(--transition-fast), background-color var(--transition-fast);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{background:#fff;transform:scale(1.2)}.slider-labels{color:var(--text-muted);font-size:.7rem;font-family:var(--font-mono);justify-content:space-between;margin-top:4px;display:flex}.toggle-container{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;font-size:.85rem;display:flex;position:relative}.toggle-container span{flex:0 auto}.toggle-container input{opacity:0;cursor:pointer;width:0;height:0;position:absolute}.checkmark{width:36px;height:20px;transition:background-color var(--transition-fast);background-color:#1f212e;border-radius:10px;display:inline-block;position:relative}.checkmark:after{content:"";background-color:var(--text-secondary);width:14px;height:14px;transition:transform var(--transition-fast), background-color var(--transition-fast);border-radius:50%;position:absolute;top:3px;left:3px}.toggle-container input:checked~.checkmark{background-color:var(--accent-cyan-dim)}.toggle-container input:checked~.checkmark:after{background-color:var(--accent-cyan);transform:translate(16px)}.toggle-desc{color:var(--text-muted);margin-top:4px;font-size:.75rem;line-height:1.3;display:block}.preset-selector,.camera-presets{gap:8px;display:flex}.preset-btn,.btn{border:1px solid var(--border-glow);color:var(--text-secondary);font-family:var(--font-mono);cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);background:#14161f;border-radius:6px;flex:1;padding:8px 12px;font-size:.78rem}.preset-btn:hover,.btn:hover{border-color:var(--accent-cyan-dim);color:var(--text-primary);background:#1d1f2b}.preset-btn.active{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#00ffff1a;box-shadow:inset 0 0 8px #00ffff26}.btn-primary{background:linear-gradient(135deg, var(--accent-cyan-dim), #089191);border:1px solid var(--accent-cyan);color:#fff;width:100%;font-weight:600;font-family:var(--font-display);letter-spacing:.1rem;margin-top:10px;padding:12px;font-size:.85rem}.btn-primary:hover{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dim));transform:translateY(-1px);box-shadow:0 0 15px #0ff6}.tab-selectors{border-bottom:1px solid var(--border-glow);margin-bottom:16px;display:flex}.tab-btn{color:var(--text-secondary);font-family:var(--font-display);letter-spacing:.05rem;cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;padding:8px 14px;font-size:.8rem;position:relative}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{color:var(--accent-cyan)}.tab-btn.active:after{content:"";background:var(--accent-cyan);height:2px;box-shadow:0 0 8px var(--accent-cyan);position:absolute;bottom:-1px;left:0;right:0}.tab-content{color:var(--text-secondary);font-size:.88rem;line-height:1.5;display:none}.tab-content.active{display:block}.tab-title{font-family:var(--font-display);color:var(--text-primary);margin-bottom:10px;font-size:.95rem}.tab-content p{margin-bottom:10px}.equation{font-family:var(--font-mono);border:1px solid var(--border-glow);text-align:center;color:var(--accent-cyan);background:#00000040;border-radius:6px;margin:12px 0;padding:8px 12px;font-size:.95rem}.interactive-diagram{border-top:1px solid var(--border-glow);margin-top:20px;padding-top:15px}.diagram-label{font-family:var(--font-mono);color:var(--text-muted);text-align:center;margin-bottom:8px;font-size:.75rem}.diagram-box{color:var(--text-secondary);background:#0003;border-radius:6px;justify-content:space-around;padding:10px;font-size:.75rem;display:flex}.legend-dot{border-radius:50%;width:8px;height:8px;margin-right:4px;display:inline-block}.legend-dot.event-horizon{background:#000;border:1px solid #fff}.legend-dot.photon-sphere{background:var(--accent-cyan);box-shadow:0 0 5px var(--accent-cyan)}.legend-dot.disk-glow{background:var(--accent-orange);box-shadow:0 0 5px var(--accent-orange)}#loader{background-color:var(--bg-deep);z-index:100;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .8s;display:flex;position:absolute;top:0;left:0}.loader-content{text-align:center}.spinner{border:2px solid #00ffff1a;border-top-color:var(--accent-cyan);border-radius:50%;width:50px;height:50px;margin:0 auto 20px;animation:1s linear infinite spin;box-shadow:0 0 15px #00ffff26}.loader-title{font-family:var(--font-display);letter-spacing:.2rem;color:var(--text-primary);margin-bottom:8px;font-size:1.1rem}.loader-status{font-family:var(--font-mono);color:var(--accent-cyan);letter-spacing:.1rem;opacity:.7;font-size:.8rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=900px){body{overflow-y:auto}.ui-container{pointer-events:none;flex-direction:column;gap:20px;height:auto;position:relative;inset:140px 20px auto}.ui-panel{width:100%;max-height:none}#hud-vitals{display:none}}.story-panel{border-left:4px solid var(--accent-cyan);zoom:.75;opacity:0;z-index:100;pointer-events:none;width:360px;padding:24px;transition:all .7s cubic-bezier(.19,1,.22,1);position:absolute;bottom:40px;right:40px;transform:translate(120%)}.story-panel.visible{opacity:1;transform:translate(0)}.story-stage{color:var(--accent-cyan);letter-spacing:1.5px;margin-bottom:12px;font-family:Share Tech Mono,monospace;font-size:.95rem;transition:opacity .4s}.story-text{color:var(--text-light);font-size:1.05rem;line-height:1.6;transition:opacity .4s}.help-icon{color:#0fc;cursor:help;background:#0fc3;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;margin-left:8px;font-size:11px;font-weight:700;display:inline-flex;position:relative}.global-tooltip{color:#a0d0d0;z-index:999999;pointer-events:none;opacity:0;background:#000a0ff2;border:1px solid #0fc;border-radius:4px;width:240px;padding:10px;font-size:12px;font-weight:400;line-height:1.4;transition:opacity .2s;position:fixed;transform:translate(-50%);box-shadow:0 4px 12px #000c}.facts-modal{z-index:99999;-webkit-backdrop-filter:blur(20px);border:1px solid #0fc6;flex-direction:column;width:50%;max-width:720px;height:auto;padding:20px;display:flex;position:fixed;top:15%;bottom:5%;left:50%;transform:translate(-50%);box-shadow:0 0 40px #000c,inset 0 0 20px #00ffcc1a}.facts-modal-header{border-bottom:1px solid #00ffcc4d;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;display:flex}.facts-modal-title{color:var(--accent-cyan);text-transform:uppercase;letter-spacing:2px;margin:0;font-size:20px}.btn-close{color:var(--text-light);cursor:pointer;background:0 0;border:none;font-size:28px;line-height:1;transition:color .3s}.btn-close:hover{color:var(--accent-cyan)}.facts-modal-body{color:#ddd;flex:1;padding-right:15px;font-size:14px;line-height:1.6;overflow-y:auto}.facts-modal-body h1{color:var(--accent-cyan);margin-top:0;margin-bottom:20px;font-size:22px}.facts-modal-body p.p2{color:#fff;margin-top:25px;margin-bottom:10px;font-size:16px;font-weight:700}.facts-modal-body p.p3{text-align:justify;margin-bottom:15px}.facts-modal-body::-webkit-scrollbar{width:6px}.facts-modal-body::-webkit-scrollbar-track{background:#0000004d}.facts-modal-body::-webkit-scrollbar-thumb{background:#00ffcc4d;border-radius:3px}body.ui-hidden #control-panel,body.ui-hidden #educational-panel,body.ui-hidden #hud-header,body.ui-hidden #labels-container,body.ui-hidden .story-panel:not(.force-visible){transition:opacity .5s;opacity:0!important;pointer-events:none!important}#control-panel,#educational-panel,#hud-header,#labels-container{transition:opacity .5s}.top-bar-controls{z-index:100;gap:10px;display:flex;position:absolute;top:20px;right:20px}.floating-label{color:#fff;pointer-events:none;opacity:0;white-space:normal;text-align:center;text-shadow:0 1px 3px #000;z-index:10;background:#00ffcc1a;border:1px solid #00ffcc4d;border-radius:4px;width:max-content;max-width:220px;padding:4px 8px;font-family:JetBrains Mono,monospace;font-size:11px;transition:opacity .3s;position:absolute;transform:translate(-50%,calc(-100% - 8px))}.floating-label.visible{opacity:1}.floating-label:before{content:"";border:8px solid #0000;border-top-color:#0fc6;position:absolute;top:100%;left:50%;transform:translate(-50%)}.settings-wrapper{max-height:2000px;transition:max-height .4s;overflow:hidden}.settings-wrapper.collapsed{opacity:0;pointer-events:none;max-height:0;margin-bottom:0}.btn-group{background:#ffffff0d;border-radius:4px;margin-bottom:15px;padding:2px;display:flex}.btn-group .btn{color:#88a;background:0 0;border:none;flex:1;margin:0}.btn-group .btn.active{color:#0fc;background:#00ffcc26}.explain-checkbox-wrapper{cursor:pointer;background:#00ffcc0d;border:1px solid #0fc3;border-radius:4px;align-items:center;gap:10px;margin-top:15px;padding:10px;display:flex}.explain-checkbox-wrapper:hover{background:#00ffcc1a}.explain-checkbox-wrapper input{cursor:pointer;accent-color:#0fc;width:18px;height:18px}