:root{--bg:#0b1120;--panel:#111a30;--panel-2:#0f172a;--border:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--accent:#38bdf8;--accent-2:#818cf8;--green:#22c55e;--red:#ef4444;--blue:#3b82f6;--radius:14px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:radial-gradient(1200px 800px at 50% 0%, #152347 0%, var(--bg) 60%);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;font-family:Segoe UI,system-ui,-apple-system,Roboto,sans-serif;overflow:hidden}.app{flex-direction:column;gap:0;width:100dvw;height:100dvh;display:flex}.header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172abf;flex:none;justify-content:space-between;align-items:center;padding:14px 28px;display:flex}.header-title{align-items:center;gap:16px;display:flex}.title-icon{filter:drop-shadow(0 0 12px #38bdf899);font-size:42px;line-height:1}.header-title h1{letter-spacing:.5px;background:linear-gradient(90deg, var(--accent), var(--accent-2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(22px,3.4vh,34px);font-weight:700}.header-title p{color:var(--muted);margin-top:2px;font-size:clamp(12px,1.8vh,16px)}.quiz-toggle{border:1px solid var(--accent);color:var(--accent);cursor:pointer;background:#38bdf81f;border-radius:999px;padding:12px 24px;font-size:clamp(14px,2vh,18px);font-weight:600;transition:all .2s}.quiz-toggle:hover,.quiz-toggle.active{background:var(--accent);color:#03111f}.main{flex:auto;grid-template-columns:300px 1fr;gap:0;min-height:0;display:grid}.left{border-right:1px solid var(--border);background:#0f172a80;flex-direction:column;gap:12px;padding:16px;display:flex;overflow-y:auto}.menu-panel,.info-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.menu-title{color:var(--accent);margin-bottom:12px;font-size:clamp(14px,2vh,18px);font-weight:700}.menu-group{margin-bottom:14px}.menu-group-label{color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:clamp(12px,1.7vh,15px);font-weight:600}.menu-group-buttons{flex-wrap:wrap;gap:8px;display:flex}.orbital-btn{border:1.5px solid var(--border);background:var(--panel-2);min-width:64px;min-height:52px;color:var(--text);cursor:pointer;touch-action:manipulation;border-radius:10px;padding:8px 16px;font-size:clamp(13px,1.9vh,16px);font-weight:600;transition:all .18s}.orbital-btn:hover{border-color:var(--accent);color:var(--accent)}.orbital-btn.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f;border-color:#0000;box-shadow:0 0 18px #38bdf866}.info-title{color:var(--text);margin-bottom:12px;font-size:clamp(16px,2.4vh,22px);font-weight:700}.quantum-grid{grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;display:grid}.q-item{background:var(--panel-2);border:1px solid var(--border);text-align:center;border-radius:8px;padding:8px 4px}.q-label{color:var(--muted);font-size:clamp(10px,1.4vh,12px);display:block}.q-value{color:var(--accent);font-size:clamp(16px,2.2vh,20px);font-weight:700;display:block}.legend{color:var(--muted);flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;font-size:clamp(11px,1.5vh,13px);display:flex}.legend-dot{border-radius:50%;width:14px;height:14px;display:inline-block}.legend-dot.plus{background:var(--green);box-shadow:0 0 8px var(--green)}.legend-dot.minus{background:var(--red);box-shadow:0 0 8px var(--red)}.info-desc{color:var(--text);font-size:clamp(12px,1.7vh,15px);line-height:1.5}.info-keyword{color:#a5b4fc;background:#818cf826;border:1px solid #818cf866;border-radius:999px;margin-top:10px;padding:6px 12px;font-size:clamp(11px,1.5vh,13px);font-weight:600;display:inline-block}.stage{flex-direction:column;min-height:0;display:flex;position:relative}.stage-header{flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;display:flex}.orbital-label{color:var(--text);text-shadow:0 0 24px #38bdf873;letter-spacing:1px;font-size:clamp(26px,5vh,48px);font-weight:800}.sub{vertical-align:sub;letter-spacing:.4px;font-size:.62em;line-height:0}.orbital-label .sub{font-size:.58em}.orbital-btn .sub,.info-title .sub,.quiz-opt .sub{font-size:.68em}.view-toggle{background:var(--panel);border:1px solid var(--border);border-radius:999px;gap:8px;padding:5px;display:flex}.view-btn{color:var(--muted);cursor:pointer;touch-action:manipulation;background:0 0;border:none;border-radius:999px;padding:10px 20px;font-size:clamp(13px,1.9vh,16px);font-weight:600;transition:all .18s}.view-btn:hover{color:var(--text)}.view-btn.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f}.nodal-toggle{border:1.5px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;white-space:nowrap;border-radius:999px;padding:8px 14px;font-size:clamp(11px,1.7vh,13px);font-weight:700;transition:all .18s}.nodal-toggle.active{color:#a5b4fc;background:#a5b4fc1f;border-color:#a5b4fc}.stage-hint{color:var(--muted);white-space:nowrap;font-size:clamp(11px,1.6vh,14px)}.orbital-canvas{touch-action:none;cursor:grab;flex:auto;min-height:0}.orbital-canvas:active{cursor:grabbing}.quiz-card{border:1px solid var(--accent);border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#0f172af2;width:min(420px,38vw);padding:20px;animation:.25s ease-out slideIn;position:absolute;top:72px;right:24px;box-shadow:0 16px 48px #00000080}@keyframes slideIn{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}.quiz-badge{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f;border-radius:999px;margin-bottom:12px;padding:4px 12px;font-size:clamp(11px,1.5vh,13px);font-weight:700;display:inline-block}.quiz-q{margin-bottom:14px;font-size:clamp(14px,2vh,18px);font-weight:600;line-height:1.4}.quiz-options{flex-direction:column;gap:8px;display:flex}.quiz-opt{border:1.5px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;text-align:left;touch-action:manipulation;border-radius:10px;padding:12px 16px;font-size:clamp(13px,1.9vh,16px);font-weight:600;transition:all .15s}.quiz-opt:hover:not(:disabled){border-color:var(--accent)}.quiz-opt.correct{border-color:var(--green);color:var(--green);background:#22c55e2e}.quiz-opt.wrong{border-color:var(--red);color:var(--red);background:#ef44442e}.quiz-opt:disabled{cursor:default}.quiz-feedback{color:var(--text);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:clamp(13px,1.9vh,16px);font-weight:600;display:flex}.quiz-next{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f;cursor:pointer;border:none;border-radius:999px;padding:8px 16px;font-size:clamp(12px,1.7vh,14px);font-weight:700}.quiz-next:disabled{opacity:.5;cursor:not-allowed}.quiz-secondary{border:1.5px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;padding:8px 16px;font-size:clamp(12px,1.7vh,14px);font-weight:600}.quiz-tabs{background:var(--panel-2);border-radius:999px;gap:8px;margin-bottom:16px;padding:4px;display:flex;position:relative}.quiz-tab{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:999px;flex:1;padding:8px 12px;font-size:clamp(12px,1.7vh,14px);font-weight:700;transition:all .18s}.quiz-tab.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#03111f}.quiz-close{border:1px solid var(--border);background:var(--panel-2);width:32px;height:32px;color:var(--muted);cursor:pointer;border-radius:50%;flex:0 0 32px}.quiz-progress{color:var(--muted);justify-content:space-between;margin-bottom:6px;font-size:clamp(11px,1.6vh,13px);display:flex}.quiz-score-mini{color:var(--accent);font-weight:700}.quiz-progress-bar{background:var(--panel-2);border:1px solid var(--border);border-radius:999px;height:6px;margin-bottom:14px;overflow:hidden}.quiz-progress-fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;transition:width .3s}.quiz-progress-fill.comp{background:linear-gradient(90deg,#22c55e,#38bdf8)}.quiz-result{text-align:center;padding:12px 0}.quiz-score-big{color:var(--text);margin:12px 0 8px;font-size:clamp(28px,5vh,42px);font-weight:800}.quiz-score-detail{color:var(--muted);margin-bottom:16px;font-size:clamp(13px,1.9vh,16px)}.quiz-result-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.quiz-comp-header{justify-content:space-between;margin-bottom:8px;font-weight:700;display:flex}.quiz-timer{color:#f59e0b;font-size:clamp(14px,2vh,18px)}.quiz-comp-hint{color:var(--muted);text-align:center;margin-top:10px;font-size:clamp(11px,1.6vh,13px)}.quiz-input{border:1.5px solid var(--border);background:var(--panel-2);width:100%;color:var(--text);border-radius:10px;outline:none;padding:12px 16px;font-size:clamp(13px,1.9vh,16px)}.quiz-input:focus{border-color:var(--accent)}.quiz-comp-form{gap:10px;margin:14px 0;display:flex}.leaderboard{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;margin:12px 0;padding:12px}.leaderboard-title{color:var(--accent);margin-bottom:8px;font-size:clamp(13px,1.9vh,15px);font-weight:700}.leaderboard-empty{color:var(--muted);text-align:center;padding:8px;font-size:clamp(12px,1.7vh,14px)}.leaderboard-list{flex-direction:column;gap:6px;list-style:none;display:flex}.leaderboard-item{background:var(--panel);border-radius:8px;align-items:center;gap:10px;padding:8px 10px;font-size:clamp(13px,1.9vh,15px);display:flex}.lb-rank{color:var(--accent);min-width:28px;font-weight:800}.lb-name{flex:1;font-weight:600}.lb-score{color:var(--green);font-weight:800}.footer{text-align:center;color:var(--muted);border-top:1px solid var(--border);background:#0f172abf;flex:none;padding:10px 20px;font-size:clamp(11px,1.6vh,14px)}.left::-webkit-scrollbar{width:8px}.left::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}@media (width<=900px){.main{grid-template-columns:1fr}.left{flex-direction:row;overflow-x:auto}.menu-panel,.info-panel{min-width:320px}.stage-header{flex-wrap:wrap}}