.left-panel{background-color:#1a1a2e;color:#e0e0e0;padding:20px;border-radius:10px;overflow-y:auto;height:100%}.circuit-card{display:flex;flex-direction:column;height:100%;flex:1;min-width:0}.circuit-header{margin-bottom:12px;flex-shrink:0}.circuit-chip{padding:6px 14px;border-radius:999px;background:#6a1b9a;color:#e0e0e0;font-size:12px;font-weight:700;letter-spacing:.08em}.circuit-wrapper{position:relative;flex:1;min-height:350px;background:#282844;border-radius:16px;padding:44px 40px;box-shadow:0 0 15px #7c3aed33;--grid-col-width: 76px;--qubit-label-width: 46px;--step-line-column: 2;--cnot-col: 3;display:grid;grid-template-columns:var(--qubit-label-width) repeat(auto-fill,var(--grid-col-width));align-items:center}.step-line{position:absolute;top:32px;bottom:32px;left:calc(var(--step-line-column) * var(--grid-col-width) + var(--qubit-label-width));width:4px;background:linear-gradient(to bottom,#38bdf8,#6366f1);border-radius:4px;opacity:.75;z-index:1;pointer-events:none}.circuit-area{grid-column:1 / -1;height:100%;display:flex;flex-direction:column;justify-content:space-evenly;gap:96px;position:relative;z-index:2}.wire{display:flex;align-items:center;position:relative}.qubit-label{width:var(--qubit-label-width);flex-shrink:0;font-weight:700;font-size:15px;font-style:italic;color:#b0b0d0}.wire-track{position:relative;flex:1;height:32px;display:grid;grid-template-columns:subgrid;grid-column:2 / -1;align-items:center}.wire-line{position:absolute;inset:50% 0 auto;height:4px;transform:translateY(-50%);background:linear-gradient(to right,#38bdf8,#6366f1);border-radius:6px;z-index:1}.gate{position:relative;width:var(--grid-col-width);height:44px;display:flex;align-items:center;justify-content:center;background:#1a1a2e;border:2px solid #6366f1;border-radius:14px;font-weight:700;font-size:15px;color:#e0e0e0;box-shadow:0 12px 26px #6366f140;z-index:3}.gate.highlight{box-shadow:0 0 0 5px #fde68a,0 12px 26px #6366f140}.gate.h{background:#282844;border-color:#0369a1;color:#e0e0e0}.gate.measurement-gate{background:#282844;border-color:#16a34a;color:#e0e0e0}.control-dot{width:16px;height:16px;background:#6366f1;border-radius:50%;box-shadow:0 0 0 7px #6366f12e;z-index:3}.target-plus{width:32px;height:32px;border:2px solid #6366f1;border-radius:50%;background:#1a1a2e;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:#e0e0e0;line-height:1;box-shadow:0 8px 18px #6366f140;z-index:3}.cnot-connector{position:absolute;left:calc(var(--cnot-col) * var(--grid-col-width) + var(--qubit-label-width) + (var(--grid-col-width) / 2));top:0;height:100%;width:3px;background:#6366f1;z-index:1;pointer-events:none}.circuit-explanation-display{position:absolute;bottom:20px;left:20px;right:20px;background:#282844e6;border-radius:8px;padding:10px 15px;color:#e0e0e0;font-size:.9em;text-align:center;box-shadow:0 4px 10px #0006;z-index:10}.circuit-explanation-display-text{margin:0;line-height:1.4}.circuit-legend{position:absolute;top:60px;right:10px;z-index:10;padding:5px;background-color:#223c;border-radius:8px;box-shadow:0 2px 5px #0000004d;width:auto;max-width:180px}.legend-title{display:none}.legend-items{display:flex;flex-direction:column;gap:5px;align-items:flex-start;padding:0}.legend-item{display:flex;flex-direction:row;align-items:center;gap:8px;color:#fff;font-size:.8em;border:none;border-radius:0;padding:3px 5px;background-color:transparent;width:auto}.legend-symbol{font-weight:700;color:#6fffe9;min-width:20px;text-align:center}.probability-card{display:flex;flex-direction:column;height:100%}.prob-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.prob-chip{padding:6px 12px;border-radius:999px;background:#6a1b9a;color:#e0e0e0;font-size:12px;font-weight:700;letter-spacing:.08em}.prob-note{font-size:12px;color:#b0b0d0}.prob-container{background:#282844;border-radius:14px;padding:20px;display:flex;flex-direction:column;justify-content:space-around;gap:16px;box-shadow:0 0 15px #1976d233;flex-grow:1}.prob-item{display:flex;align-items:center;gap:12px}.prob-bar{flex:1;height:12px;background:#3a3a60;border-radius:999px;position:relative;overflow:hidden}.prob-bar-fill{position:absolute;top:0;left:0;height:100%;width:0;background:#cbd5f5;border-radius:999px;transition:width .4s ease}.prob-bar-fill.active{background:linear-gradient(to right,#38bdf8,#6366f1)}.prob-label{width:40px;font-size:13px;font-weight:600;color:#e0e0e0}.prob-value{width:40px;font-size:12px;color:#b0b0d0;font-weight:500;text-align:right}.probability-explanation-display{background:#282844e6;border-radius:8px;padding:10px 15px;color:#e0e0e0;font-size:.9em;text-align:center;box-shadow:0 4px 10px #0006;margin-top:15px}.probability-explanation-display-text{margin:0;line-height:1.4}.interactive-prob-panel{padding:15px}.prob-slider-item{display:flex;align-items:center;margin-bottom:10px}.prob-slider-label{width:80px;color:#6fffe9}.prob-slider{-webkit-appearance:none;width:100%;height:8px;border-radius:5px;background:#1a3a5f;outline:none;opacity:.7;-webkit-transition:.2s;transition:opacity .2s}.prob-slider:hover{opacity:1}.prob-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#6fffe9;cursor:pointer}.prob-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#6fffe9;cursor:pointer}.prob-slider-value{margin-left:15px;color:#6fffe9;font-weight:700}.right-panel{display:flex;flex-direction:column;gap:20px;background-color:#223;padding:20px;border-radius:10px;height:100%}.right-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px;position:relative}.right-top-controls{display:flex;flex-direction:column;gap:15px;align-items:flex-end}.circuit-selection-buttons{display:flex;gap:10px}.circuit-explanation-container{background:#282844;border-radius:12px;padding:15px 20px;box-shadow:0 0 10px #7c3aed33;border:1px solid #3a3a60;text-align:center}.circuit-explanation-text{color:#e0e0e0;font-size:1em;margin:0}.circuit-explanation-note{color:#b0b0d0;font-size:.8em;margin-top:5px}.right-bottom-conclusion{margin-top:20px;padding:15px;background-color:#282844;border-radius:10px;border:1px solid #6fffe9;color:#fff}.right-bottom-conclusion h3{color:#6fffe9;margin-top:0;margin-bottom:10px}.right-bottom-conclusion p{color:#e0e0e0;line-height:1.5;margin-bottom:0}.state-expression-card{background:#282844;border-radius:12px;padding:15px 20px;box-shadow:0 0 15px #7c3aed4d;border:1px solid #3a3a60;color:#e0e0e0;font-family:Fira Code,monospace;font-size:1.1em;text-align:center;margin-left:20px}.interactive-vector{display:flex;flex-direction:column;align-items:center;margin:20px}.vector-box{border:1px solid #6fffe9;border-radius:4px;padding:10px;display:flex;flex-direction:column;align-items:center}.vector-element{cursor:pointer;padding:10px;margin:5px;border:1px solid transparent;border-radius:4px;transition:background-color .3s,border-color .3s;color:#6fffe9;font-family:Courier New,Courier,monospace;font-size:1.2em}.vector-element:hover{background-color:#6fffe91a;border-color:#6fffe9}.vector-element.active{background-color:#6fffe9;color:#0d1a2f;font-weight:700}.step-container{height:100%;display:flex;flex-direction:column;gap:18px}.step-header{background:#282844;border-radius:14px;padding:20px;box-shadow:0 0 15px #7c3aed4d;border:1px solid #3a3a60}.step-badge{display:inline-block;font-size:12px;padding:4px 10px;border-radius:20px;background:#6a1b9a;color:#e0e0e0;font-weight:600;margin-bottom:8px}.step-header h2{margin:6px 0;color:#e0e0e0}.step-subtext{color:#b0b0d0;font-size:14px}.instruction-card{background:#282844;border-left:4px solid #7c3aed;border-radius:12px;padding:16px 18px;box-shadow:0 0 10px #7c3aed33}.instruction-card.success{border-left-color:#4caf50}.instruction-card.error{border-left-color:#f44336}.instruction-card.success .instruction-title{color:#4caf50}.instruction-card.error .instruction-title{color:#f44336}.instruction-card p{color:#e0e0e0}.instruction-title{color:#7c3aed;font-size:12px;font-weight:700;margin-bottom:6px}.matrix-box{font-family:Fira Code,monospace;text-align:center;font-size:15px;color:#e0e0e0;background:#1a1a2e;padding:12px;border-radius:10px;border:1px solid #4a4a70;box-shadow:inset 0 0 8px #0006}.step-footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center}.primary-btn{background:#1e88e5;color:#fff;border:none;padding:10px 22px;border-radius:25px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 0 10px #1e88e580}.primary-btn:hover{background:#2196f3;box-shadow:0 0 15px #1e88e5b3;transform:translateY(-2px)}.primary-btn:disabled{background:#4a4a70;color:#88a;cursor:not-allowed;box-shadow:none;transform:none}.ghost-btn{background:none;border:none;color:#b0b0d0;cursor:pointer;padding:8px 18px;border-radius:25px;transition:all .3s ease}.ghost-btn:hover{color:#e0e0e0;background:#b0b0d01a}.ghost-btn:disabled{color:#6a6a80;cursor:not-allowed;background:none}.matrix-builder{display:flex;flex-direction:column;align-items:center;gap:20px}.value-bank{display:flex;gap:10px;padding:10px;background-color:#0d1a2f;border-radius:8px}.value-item{padding:10px 15px;background-color:#1a3a5f;border-radius:4px;cursor:grab;color:#6fffe9;font-weight:700}.matrix-grid{display:grid;grid-template-columns:repeat(2,50px);grid-template-rows:repeat(2,50px);gap:5px;border:2px solid #6fffe9;padding:10px;border-radius:8px}.matrix-cell{width:50px;height:50px;background-color:#1a3a5f;border:1px dashed #6fffe9;display:flex;justify-content:center;align-items:center;color:#6fffe9;font-size:1.2em}.matrix-builder-message{margin-top:15px;color:#6fffe9;font-weight:700}.matrix-builder-hint{margin-top:15px;padding:10px;background-color:#1a3a5f;border:1px solid #6fffe9;border-radius:4px;color:#6fffe9}body,#root{margin:0;padding:0;height:100%;width:100%}.app-container{display:flex;height:100vh;width:100vw}.app-root{height:100vh;display:flex;flex-direction:column;background-color:#1a1a2e}.app-body{flex:1;display:flex}.left-panel{flex:1;padding:24px}.right-panel{flex:2;padding:24px}.matrix-card{background:#282844;border-radius:14px;padding:18px;box-shadow:0 0 15px #1976d24d;border:1px solid #3a3a60}.matrix-top{display:flex;justify-content:space-between;font-size:13px;color:#80cbc4;font-weight:600}.matrix-map{color:#e0e0e0}.matrix-label{margin:12px 0 8px;text-align:center;font-size:12px;color:#b0b0d0}.matrix-box{font-family:Fira Code,monospace;text-align:center;font-size:15px;color:#e0e0e0;background:#1a1a2e;padding:12px;border-radius:10px;white-space:pre;border:1px solid #4a4a70;box-shadow:inset 0 0 8px #0006}.state-selector{display:flex;flex-direction:column;align-items:center;gap:20px}.state-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.state-item{padding:15px 20px;background-color:#1a3a5f;border:1px solid #6fffe9;border-radius:8px;cursor:pointer;color:#6fffe9;font-weight:700;text-align:center;transition:background-color .3s}.state-item.selected{background-color:#6fffe9;color:#0d1a2f}.statistical-sampler{display:flex;flex-direction:column;align-items:center;gap:20px;position:relative;width:100%;margin-top:20px}.buckets{display:flex;gap:20px;width:100%;z-index:1;justify-content:center}.bucket{flex:1;border:2px solid #6fffe9;border-radius:8px;padding:10px;min-height:100px;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}.bucket-label{color:#6fffe9;font-weight:700;font-size:1.2em;margin-bottom:10px}.bucket-count{margin-top:10px;color:#6fffe9;font-size:1.5em;font-weight:700;z-index:2;opacity:1;animation:none}.step-footer{display:flex;gap:1rem;margin-top:1rem}.loading-indicator{color:#fff;font-size:1.2em;margin:20px;animation:pulse 1.5s infinite ease-in-out}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}