@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--bg-dark: #0a0a0a;--bg-panel: rgba(18, 18, 18, .94);--bg-panel-hover: rgba(28, 28, 28, .96);--border-muted: rgba(255, 255, 255, .12);--border-active: #0099ff;--border-accent: rgba(0, 153, 255, .5);--text-main: #f5f5f5;--text-muted: #888888;--cerulean-accent: #0099ff;--cerulean-glow: rgba(0, 153, 255, .4);--silver-glow: rgba(255, 255, 255, .2);--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{margin:0;padding:0;box-sizing:border-box;user-select:none;border-radius:0!important}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-sans);overflow:hidden;height:100vh;width:100vw}#app-container{display:grid;grid-template-rows:56px 1fr auto;grid-template-columns:330px 1fr 330px;grid-template-areas:"header header header" "left-panel canvas-view right-panel" "bottom-dock bottom-dock bottom-dock";height:100vh;width:100vw;position:relative}header{grid-area:header;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;background:#111;border-bottom:1px solid var(--border-muted);z-index:50}.brand{display:flex;align-items:center;gap:.75rem}.brand-icon{font-size:1.4rem;color:var(--cerulean-accent);filter:drop-shadow(0 0 8px var(--cerulean-glow))}.brand-text h1{font-size:1.05rem;font-weight:700;letter-spacing:.08em;color:#fff}.brand-text span{font-size:.68rem;color:var(--cerulean-accent);font-family:var(--font-mono);letter-spacing:.1em}.view-tabs{display:flex;gap:.25rem;background:#161616;padding:.2rem;border:1px solid var(--border-muted)}.tab-btn{background:transparent;border:1px solid transparent;color:var(--text-muted);padding:.4rem .85rem;font-size:.8rem;font-family:var(--font-mono);font-weight:500;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;gap:.4rem}.tab-btn:hover{color:#fff;background:#222}.tab-btn.active{color:#fff;background:#07c;border-color:var(--cerulean-accent);font-weight:700;box-shadow:0 0 12px var(--cerulean-glow)}.header-actions{display:flex;align-items:center;gap:.5rem}.btn-pill{background:#1c1c1c;border:1px solid var(--border-muted);color:var(--text-main);padding:.4rem .75rem;font-size:.78rem;font-family:var(--font-mono);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:.4rem}.btn-pill:hover{background:#282828;border-color:var(--cerulean-accent);color:var(--cerulean-accent)}.btn-pill.btn-tour{background:#181818;border:1px solid var(--cerulean-accent);color:var(--cerulean-accent)}.btn-pill.btn-tour:hover{background:var(--cerulean-accent);color:#fff;box-shadow:0 0 14px var(--cerulean-glow)}#viewport-container{grid-area:canvas-view;position:relative;width:100%;height:100%;overflow:hidden;background:#080808}#viewport-container canvas{display:block;width:100%!important;height:100%!important}.glass-panel{background:var(--bg-panel);border:1px solid var(--border-muted);padding:1.1rem;overflow-y:auto;box-shadow:0 8px 24px #000c;margin:.75rem;z-index:30;display:flex;flex-direction:column;gap:1rem}#left-control-panel{grid-area:left-panel}#right-hud-panel{grid-area:right-panel}.panel-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-muted);padding-bottom:.5rem}.panel-header h2{font-size:.88rem;font-family:var(--font-mono);font-weight:700;letter-spacing:.05em;color:var(--cerulean-accent);display:flex;align-items:center;gap:.4rem}.section-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-family:var(--font-mono);margin-bottom:.45rem}.gate-palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.gate-btn{background:#181818;border:1px solid var(--border-muted);color:#fff;padding:.55rem .2rem;font-family:var(--font-mono);font-weight:700;font-size:.9rem;cursor:pointer;transition:all .12s ease;text-align:center}.gate-btn:after{content:attr(data-desc);display:block;font-size:.6rem;font-weight:400;color:var(--text-muted);margin-top:.15rem;font-family:var(--font-sans)}.gate-btn:hover{background:#242424;border-color:var(--cerulean-accent);color:var(--cerulean-accent)}.gate-btn:active{background:var(--cerulean-accent);color:#fff}.gate-btn.selected-gate{background:#222;border-color:var(--cerulean-accent);color:var(--cerulean-accent);box-shadow:0 0 10px var(--cerulean-glow)}.gate-btn.btn-hadamard{border-color:#ffffff4d}.gate-btn.btn-pauli{border-color:#fff3}.gate-btn.btn-phase{border-color:#09f6;color:var(--cerulean-accent)}.gate-btn.btn-entangle{border-color:var(--cerulean-accent);color:var(--cerulean-accent)}.action-btn-group{display:flex;flex-direction:column;gap:.45rem}.btn-glow-cyan{background:#181818;border:1px solid var(--cerulean-accent);color:var(--cerulean-accent);padding:.65rem .9rem;font-family:var(--font-mono);font-weight:600;font-size:.82rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:.4rem}.btn-glow-cyan:hover{background:var(--cerulean-accent);color:#fff;box-shadow:0 0 14px var(--cerulean-glow)}.btn-glow-pink{background:#181818;border:1px solid var(--border-muted);color:#ccc;padding:.65rem .9rem;font-family:var(--font-mono);font-weight:600;font-size:.82rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:.4rem}.btn-glow-pink:hover{background:#282828;border-color:#fff;color:#fff}.math-card{background:#121212;border:1px solid var(--border-muted);padding:.75rem;text-align:center}.dirac-formula{font-family:var(--font-mono);font-size:1rem;font-weight:700;color:var(--cerulean-accent);letter-spacing:.04em;word-break:break-word;text-shadow:0 0 10px var(--cerulean-glow)}.formula-sub{font-size:.68rem;color:var(--text-muted);margin-top:.3rem;font-family:var(--font-mono)}.telemetry-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.telemetry-item{background:#141414;border:1px solid var(--border-muted);padding:.45rem;display:flex;flex-direction:column}.telemetry-label{font-size:.62rem;font-family:var(--font-mono);color:var(--text-muted);text-transform:uppercase}.telemetry-val{font-family:var(--font-mono);font-size:.88rem;font-weight:600;color:#fff}.prob-bars-container{display:flex;flex-direction:column;gap:.45rem}.prob-row{display:flex;flex-direction:column;gap:.2rem}.prob-meta{display:flex;justify-content:space-between;font-size:.72rem;font-family:var(--font-mono)}.prob-track{width:100%;height:6px;background:#202020;border:1px solid #303030;overflow:hidden}.prob-fill{height:100%;transition:width .25s ease}.fill-cyan{background:var(--cerulean-accent);box-shadow:0 0 8px var(--cerulean-glow)}.fill-pink{background:#a3a3a3}.fill-purple{background:#525252}.fill-gold{background:#737373}.slider-group{display:flex;flex-direction:column;gap:.35rem}.slider-header{display:flex;justify-content:space-between;font-size:.72rem;font-family:var(--font-mono);color:var(--text-muted)}input[type=range]{accent-color:var(--cerulean-accent);height:4px;background:#222;border:1px solid var(--border-muted);cursor:pointer}#bottom-dock{grid-area:bottom-dock;background:#111;border-top:1px solid var(--border-muted);padding:.65rem 1.25rem;z-index:40;display:flex;flex-direction:column;gap:.65rem}.circuit-toolbar{display:flex;align-items:center;justify-content:space-between}.circuit-controls,.circuit-select-presets{display:flex;align-items:center;gap:.4rem}.select-styled{background:#1c1c1c;border:1px solid var(--border-muted);color:var(--text-main);padding:.35rem .65rem;font-size:.78rem;font-family:var(--font-mono);cursor:pointer}.circuit-board{display:flex;flex-direction:column;background:#141414;border:1px solid var(--border-muted);padding:.5rem;overflow-x:auto}.circuit-timeline-header{display:flex;padding-left:65px;margin-bottom:.3rem}.timeline-step-marker{flex:1;min-width:44px;text-align:center;font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);cursor:pointer;padding:.2rem 0;border:1px solid transparent;transition:all .12s}.timeline-step-marker:hover{background:#202020;color:#fff}.timeline-step-marker.active{background:#1c1c1c;color:var(--cerulean-accent);border:1px solid var(--cerulean-accent);font-weight:700;box-shadow:0 0 8px var(--cerulean-glow)}.qubit-wire-row{display:flex;align-items:center;height:44px;position:relative}.qubit-wire-header{width:65px;display:flex;flex-direction:column;justify-content:center;font-family:var(--font-mono)}.qubit-name{font-size:.82rem;font-weight:700;color:#fff}.qubit-sub{font-size:.62rem;color:var(--cerulean-accent)}.wire-slots-track{display:flex;flex:1;position:relative;align-items:center}.wire-line{position:absolute;left:0;right:0;height:1px;background:#383838;z-index:1}.circuit-slot{flex:1;min-width:44px;height:38px;display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer;border:1px solid transparent;transition:background .12s}.circuit-slot:hover{background:#202020}.circuit-slot.step-active{background:#181818;border:1px dashed var(--cerulean-accent)}.gate-node{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:.82rem;border:1px solid #ffffff;background:#1c1c1c;color:#fff}.gate-node.gate-h{background:#262626;border-color:var(--cerulean-accent);color:var(--cerulean-accent)}.gate-node.gate-x{background:#333;border-color:#fff;color:#fff}.gate-node.gate-y{background:#2b2b2b;border-color:#d4d4d4;color:#d4d4d4}.gate-node.gate-z{background:#202020;border-color:var(--cerulean-accent);color:var(--cerulean-accent)}.gate-node.gate-s{background:#1a1a1a;border-color:var(--cerulean-accent);color:var(--cerulean-accent)}.gate-node.gate-t{background:#1a1a1a;border-color:#888;color:#fff}.gate-node.gate-m{background:var(--cerulean-accent);border-color:var(--cerulean-accent);color:#fff;font-size:.72rem}.gate-node.gate-cnot-control,.gate-node.gate-cz-control{background:var(--cerulean-accent);color:#000;width:16px;height:16px;border:1px solid var(--cerulean-accent)}.gate-node.gate-cnot-target{background:#1c1c1c;color:var(--cerulean-accent);border:1px solid var(--cerulean-accent);font-size:1rem}.gate-node.gate-pending{background:var(--cerulean-accent);color:#000;width:16px;height:16px;border:1px solid var(--cerulean-accent);animation:pulse-ring .6s infinite alternate}@keyframes pulse-ring{0%{transform:scale(.85)}to{transform:scale(1.15)}}.tour-overlay-card{position:absolute;bottom:1.25rem;right:1.25rem;width:380px;max-width:calc(100% - 2.5rem);background:#121212;border:1px solid var(--cerulean-accent);padding:1.2rem;box-shadow:0 10px 30px #000000e6,0 0 20px var(--cerulean-glow);z-index:45;display:flex;flex-direction:column;gap:.8rem;max-height:calc(100% - 2.5rem);overflow-y:auto;animation:slide-up-fade .2s ease-out}@keyframes slide-up-fade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.tour-header{display:flex;align-items:center;justify-content:space-between}.tour-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-family:var(--font-mono);font-weight:700;color:var(--cerulean-accent);background:#1c1c1c;padding:.2rem .55rem;border:1px solid var(--cerulean-accent)}.tour-overlay-card h3{font-size:.98rem;font-family:var(--font-mono);color:#fff;font-weight:700;line-height:1.35}.tour-body{font-size:.82rem;line-height:1.45;color:#d4d4d4}.tour-progress{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted)}.math-callout{background:#181818;border-left:2px solid var(--cerulean-accent);padding:.45rem .7rem;margin:.45rem 0;font-family:var(--font-mono);color:var(--cerulean-accent);font-size:.88rem}.tour-nav{display:flex;justify-content:space-between;align-items:center;margin-top:.25rem}.hotspot-drawer{position:absolute;bottom:1.25rem;left:1.25rem;width:360px;max-width:calc(100% - 2.5rem);background:#121212;border:1px solid var(--cerulean-accent);padding:1.15rem;box-shadow:0 10px 30px #000000e6,0 0 20px var(--cerulean-glow);z-index:45;animation:slide-up-fade .2s ease-out}.hotspot-drawer.hidden{display:none}.hotspot-tag{display:inline-block;font-size:.65rem;font-family:var(--font-mono);font-weight:700;background:#1c1c1c;color:var(--cerulean-accent);border:1px solid var(--cerulean-accent);padding:.15rem .45rem;margin-bottom:.35rem}.hotspot-drawer h4{font-size:.98rem;font-family:var(--font-mono);color:#fff;margin-bottom:.35rem}.hotspot-drawer p{font-size:.8rem;line-height:1.45;color:#a3a3a3}.close-btn{background:transparent;border:none;color:var(--text-muted);font-size:1rem;cursor:pointer}.close-btn:hover{color:var(--cerulean-accent)}.hidden{display:none!important}@media(max-width:1024px){#app-container{grid-template-columns:280px 1fr;grid-template-areas:"header header" "left-panel canvas-view" "bottom-dock bottom-dock"}#right-hud-panel{display:none}}