:root{--bg: #050510;--surface: #0d0d2a;--surface-2: #141430;--border: #1e2260;--primary: #00d4ff;--primary-dim: rgba(0, 212, 255, .15);--secondary: #7b2dff;--secondary-dim: rgba(123, 45, 255, .15);--accent: #ff8800;--accent-dim: rgba(255, 136, 0, .15);--success: #44ff88;--danger: #ff4466;--text: #dde0ff;--text-dim: #7788aa;--radius: 14px;--radius-sm: 8px;--shadow: 0 8px 32px rgba(0,0,0,.6)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:Space Grotesk,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.hero{position:relative;height:100vh;overflow:hidden;display:flex;flex-direction:column}.hero-canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.hero-nav{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:20px 40px;background:linear-gradient(to bottom,rgba(5,5,16,.9) 0%,transparent 100%)}.hero-logo,.sim-logo{display:flex;align-items:center;gap:10px}.logo-icon{font-size:22px;color:var(--primary);filter:drop-shadow(0 0 8px var(--primary))}.logo-text{font-family:Orbitron,monospace;font-size:18px;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-content{position:relative;z-index:10;margin-top:auto;padding:0 60px 80px;max-width:600px;pointer-events:none}.hero-badge{display:inline-block;padding:4px 14px;border:1px solid var(--primary);border-radius:100px;font-size:12px;color:var(--primary);letter-spacing:1px;text-transform:uppercase;margin-bottom:18px;background:var(--primary-dim)}.hero-title{font-family:Orbitron,monospace;font-size:clamp(32px,5vw,56px);font-weight:800;line-height:1.1;margin-bottom:18px}.gradient-text{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:16px;color:var(--text-dim);max-width:480px;margin-bottom:24px;line-height:1.7}.hero-features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}.feature-chip{padding:6px 14px;background:var(--surface);border:1px solid var(--border);border-radius:100px;font-size:13px;color:var(--text-dim);pointer-events:none}.hero-scroll{position:absolute;bottom:28px;right:50%;transform:translate(50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dim);font-size:11px;letter-spacing:1px;text-transform:uppercase;pointer-events:none}.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--primary),transparent);animation:scrollPulse 2s ease-in-out infinite}@keyframes scrollPulse{0%,to{opacity:.3}50%{opacity:1}}.btn-primary{padding:10px 22px;background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;border-radius:var(--radius-sm);color:#fff;font-family:Space Grotesk,sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s,transform .1s;pointer-events:all}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.btn-hero{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;border-radius:var(--radius-sm);color:#fff;font-family:Space Grotesk,sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px #00d4ff4d;pointer-events:all}.btn-hero:hover{transform:translateY(-2px);box-shadow:0 8px 30px #00d4ff73}.btn-secondary{padding:8px 18px;background:var(--primary-dim);border:1px solid var(--primary);border-radius:var(--radius-sm);color:var(--primary);font-family:Space Grotesk,sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.btn-secondary:hover:not(:disabled){background:#00d4ff40}.btn-secondary:disabled{opacity:.4;cursor:not-allowed}.btn-ghost{background:transparent;border:none;color:var(--text-dim);cursor:pointer;padding:4px;border-radius:6px;display:flex;transition:color .2s}.btn-ghost:hover{color:var(--text)}.btn-danger{width:100%;padding:9px;background:#ff44661f;border:1px solid var(--danger);border-radius:var(--radius-sm);color:var(--danger);font-family:Space Grotesk,sans-serif;font-size:13px;cursor:pointer;transition:all .2s}.btn-danger:hover{background:#ff446638}.btn-danger-sm{padding:7px 14px;background:#ff44661f;border:1px solid var(--danger);border-radius:var(--radius-sm);color:var(--danger);font-family:Space Grotesk,sans-serif;font-size:12px;cursor:pointer;transition:all .2s}.btn-danger-sm:hover{background:#ff446638}.btn-xs{padding:4px 10px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:var(--text);font-family:Space Grotesk,sans-serif;font-size:11px;cursor:pointer}.simulator{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--bg)}.sim-header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}.sim-actions{display:flex;gap:10px;align-items:center}.sim-body{display:flex;flex:1;overflow:hidden}.sim-main{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px}.sim-sidebar{width:240px;flex-shrink:0;border-left:1px solid var(--border);background:var(--surface);overflow-y:auto}.qubits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.qubit-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.qubit-card:hover{border-color:#00d4ff66;box-shadow:0 0 20px #00d4ff1a}.qubit-card.qubit-selected{border-color:var(--primary);box-shadow:0 0 24px #00d4ff40}.qubit-card.qubit-entangled{border-color:#7b2dff80;box-shadow:0 0 20px #7b2dff26}.qubit-card.cnot-control{border-color:#f80;box-shadow:0 0 20px #ff880040}.qubit-card.cnot-target{border-color:var(--primary);box-shadow:0 0 20px #00d4ff40;animation:targetPulse 1s ease-in-out infinite}@keyframes targetPulse{0%,to{box-shadow:0 0 20px #00d4ff40}50%{box-shadow:0 0 35px #00d4ff80}}.qubit-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.qubit-name{font-family:Orbitron,monospace;font-size:16px;font-weight:600;color:var(--primary)}.qubit-badges{display:flex;gap:5px;flex-wrap:wrap}.badge{padding:2px 8px;border-radius:100px;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.badge-entangled{background:var(--secondary-dim);border:1px solid var(--secondary);color:#b8f}.badge-super{background:var(--primary-dim);border:1px solid rgba(0,212,255,.4);color:var(--primary)}.badge-control{background:var(--accent-dim);border:1px solid var(--accent);color:var(--accent)}.badge-target{background:var(--primary-dim);border:1px solid var(--primary);color:var(--primary)}.qubit-sphere-wrap{height:220px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:10px;background:radial-gradient(ellipse at center,#0d1a3a,#050510)}.qubit-state{display:flex;flex-direction:column;gap:6px}.state-vector{font-size:12px;color:var(--text-dim);font-family:Space Grotesk,monospace;text-align:center;padding:4px}.state-alpha{color:var(--success)}.state-beta{color:var(--accent)}.entangled-label{color:#b8f;font-size:11px;font-style:italic}.prob-row{display:flex;align-items:center;gap:6px;font-size:11px}.prob-label{width:24px;color:var(--text-dim);font-family:Space Grotesk,monospace;flex-shrink:0}.prob-bar-bg{flex:1;height:5px;background:#ffffff14;border-radius:3px;overflow:hidden}.prob-bar-fill{height:100%;border-radius:3px;transition:width .4s ease}.prob-value{width:40px;text-align:right;color:var(--text-dim);font-size:11px}.measure-result{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#050510e0;border-radius:var(--radius);font-family:Orbitron,monospace;font-size:20px;font-weight:800;color:var(--success);text-shadow:0 0 20px var(--success);animation:resultFlash 2s ease forwards;pointer-events:none}@keyframes resultFlash{0%{opacity:0}15%{opacity:1}70%{opacity:1}to{opacity:0}}.gates-panel{padding:16px;display:flex;flex-direction:column;gap:16px}.panel-section{display:flex;flex-direction:column;gap:8px}.panel-label{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);padding-bottom:2px;border-bottom:1px solid var(--border)}.gates-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.gate-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;color:var(--text);font-family:Space Grotesk,sans-serif}.gate-btn:hover{border-color:#00d4ff80;background:var(--primary-dim);transform:translateY(-1px)}.gate-btn.gate-active{border-color:var(--primary);background:var(--primary-dim);box-shadow:0 0 12px #00d4ff4d}.gate-btn-wide{flex-direction:row;justify-content:flex-start;padding:10px 12px;gap:8px;width:100%}.gate-symbol{font-family:Orbitron,monospace;font-size:14px;font-weight:700;color:var(--primary)}.gate-name{font-size:10px;color:var(--text-dim)}.gate-hint{font-size:11px;color:var(--text-dim);padding:6px 8px;background:var(--primary-dim);border-radius:var(--radius-sm);border-left:2px solid var(--primary)}.cnot-hint{color:#b8f;background:var(--secondary-dim);border-color:var(--secondary)}.active-gate-banner{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--surface);border:1px solid var(--primary);border-radius:100px;padding:10px 20px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text);box-shadow:0 4px 20px #00d4ff40;z-index:100;white-space:nowrap}.gate-symbol-sm{font-family:Orbitron,monospace;font-size:13px;font-weight:700;color:var(--primary);background:var(--primary-dim);padding:2px 10px;border-radius:6px}.circuit-display{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px}.circuit-scroll{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;max-height:120px;overflow-y:auto}.circuit-op{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:100px;font-size:11px}.circuit-gate{font-family:Orbitron,monospace;font-size:11px;color:var(--primary)}.circuit-on{color:var(--text-dim)}.circuit-result{color:var(--success);font-weight:600}.gate-legend{gap:6px!important}.legend-item{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-dim)}.axis-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#348}@media (max-width: 768px){.hero-content{padding:0 24px 60px}.sim-sidebar{width:200px}.hero-nav{padding:16px 20px}.qubits-grid{grid-template-columns:1fr 1fr}}@media (max-width: 560px){.sim-sidebar{display:none}.qubits-grid{grid-template-columns:1fr}}