.mips-datapath-wrap{position:relative;background:#020408;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:1.5rem 0}.mips-datapath-img{width:100%;height:auto;display:block}.datapath-hotspots{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto}.datapath-hotspot{position:absolute;border:1.5px solid rgba(34,211,238,.35);border-radius:5px;cursor:pointer;transition:all .18s ease;z-index:10;background:#22d3ee0a;display:flex;align-items:flex-start;justify-content:flex-start;overflow:hidden}.hotspot-label{display:inline-block;font-size:9px;font-family:var(--mono, monospace);font-weight:600;line-height:1.2;color:#22d3eed9;background:#020408b8;border-radius:3px;padding:1px 4px;margin:2px;pointer-events:none;white-space:nowrap;max-width:calc(100% - 4px);overflow:hidden;text-overflow:ellipsis;flex-shrink:0}.datapath-hotspot:hover{border-color:var(--cyan);background:#22d3ee26;box-shadow:0 0 10px #22d3ee4d;z-index:20}.datapath-hotspot:hover .hotspot-label{color:var(--cyan);background:#020408e0}.datapath-hotspot.active{border-color:var(--yellow);background:#fbbf242e;box-shadow:0 0 12px #fbbf2459;z-index:20}.datapath-hotspot.active .hotspot-label{color:var(--yellow)}.datapath-hotspot.beginner-active{border-color:var(--green);background:#4ade8029;box-shadow:0 0 10px #4ade804d;z-index:20}.datapath-hotspot.beginner-active .hotspot-label{color:var(--green)}.datapath-hotspot.trace-active{border-color:var(--purple);background:#a78bfa2e;box-shadow:0 0 10px #a78bfa59;z-index:20}.datapath-hotspot.trace-active .hotspot-label{color:var(--purple)}.datapath-hotspot.trace-pulse{animation:tracePulse .9s ease-in-out infinite alternate}@keyframes tracePulse{0%{box-shadow:0 0 6px #a78bfa40}to{box-shadow:0 0 18px #a78bfa99}}.datapath-info-panel{background:var(--s2);border:1px solid rgba(34,211,238,.3);border-radius:10px;padding:.9rem 1rem;margin-top:.6rem}.datapath-info-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.45rem}.datapath-info-header h4{margin:0;color:var(--cyan);font-size:.95rem}.datapath-info-close{background:none;border:1px solid var(--border);color:var(--muted);border-radius:5px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.7rem;flex-shrink:0;transition:all .15s}.datapath-info-close:hover{border-color:var(--red);color:var(--red)}.datapath-info-panel p{margin:0;font-size:.88rem;line-height:1.6;color:var(--text)}.datapath-info-panel .bangla-note{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--border);font-size:.85rem;color:var(--muted)}.datapath-component-legend{margin-bottom:.5rem}.legend-grid{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}.legend-chip{background:var(--s2);border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:.22rem .65rem;font-size:.76rem;font-family:var(--mono, monospace);cursor:pointer;transition:all .15s;white-space:nowrap}.legend-chip:hover{border-color:var(--cyan);color:var(--cyan);background:#22d3ee14}.legend-chip.active{border-color:var(--yellow);color:var(--yellow);background:#fbbf241a;font-weight:600}.green-card-table{width:100%;border-collapse:collapse;font-size:.82rem;margin:1rem 0}.green-card-table th{background:var(--s3);color:var(--yellow);padding:.5rem .75rem;text-align:left;border:1px solid var(--border)}.green-card-table td{padding:.5rem .75rem;border:1px solid var(--border);color:var(--text)}.green-card-table tr:hover td{background:#22d3ee0d}.format-diagram{background:#020408;border:1px solid var(--border);border-radius:8px;padding:1rem 1.5rem;font-family:var(--mono);font-size:.85rem;overflow-x:auto;margin:1rem 0}.format-diagram .format-row{display:flex;gap:.5rem;margin:.5rem 0;flex-wrap:wrap}.format-diagram .format-field{padding:.25rem .5rem;text-align:center;border-radius:4px}.format-diagram .format-field.opcode{background:#fbbf2433;color:var(--yellow)}.format-diagram .format-field.rs{background:#22d3ee33;color:var(--cyan)}.format-diagram .format-field.rt{background:#4ade8033;color:var(--green)}.format-diagram .format-field.rd{background:#a78bfa33;color:var(--purple)}.format-diagram .format-field.shamt{background:#f8717133;color:var(--red)}.format-diagram .format-field.funct{background:#fb923c33;color:var(--orange)}.format-diagram .format-field.imm{background:#f472b633;color:var(--pink)}.format-diagram .format-field.addr{background:#2dd4bf33;color:#2dd4bf}.stage-badge{display:inline-block;padding:.2rem .6rem;border-radius:6px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.stage-badge.if{background:#22d3ee33;color:var(--cyan)}.stage-badge.id{background:#4ade8033;color:var(--green)}.stage-badge.ex{background:#fbbf2433;color:var(--yellow)}.stage-badge.mem{background:#a78bfa33;color:var(--purple)}.stage-badge.wb{background:#f8717133;color:var(--red)}.control-signal-table{width:100%;border-collapse:collapse;font-size:.88rem}.control-signal-table th,.control-signal-table td{padding:.5rem 1rem;border-bottom:1px solid var(--border);text-align:left}.control-signal-table th{background:var(--s3);color:var(--cyan)}.control-signal-table .signal-value{font-family:var(--mono);color:var(--green)}.datapath-trace-card{border:1px solid rgba(34,211,238,.25);background:linear-gradient(135deg,var(--s1),rgba(34,211,238,.05))}.beginner-tour-card{border:1px solid rgba(74,222,128,.28);background:linear-gradient(135deg,var(--s1),rgba(74,222,128,.06))}.tour-intro{margin-bottom:.75rem;color:var(--muted);font-size:.9rem}.tour-status{border:1px solid var(--border);border-radius:8px;padding:.45rem .6rem;margin-bottom:.6rem;font-size:.84rem}.tour-status.locked{border-color:#fbbf2466;background:#fbbf2414;color:#fde68a}.tour-status.unlocked{border-color:#4ade8066;background:#4ade8014;color:#bbf7d0}.tour-head{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.55rem}.tour-pill{border:1px solid var(--border);background:var(--s2);color:var(--green);border-radius:999px;padding:.26rem .62rem;font-size:.76rem;font-family:var(--mono)}.tour-step-title{color:var(--green);font-weight:700;margin-bottom:.3rem}.tour-step-simple{font-size:.92rem;color:var(--text)}.tour-step-bangla{margin-top:.35rem;font-size:.88rem;color:var(--muted)}.tour-checkpoint-wrap{border:1px solid var(--border);background:var(--s2);border-radius:10px;padding:.65rem .75rem;margin-top:.75rem}.tour-checkpoint-label{font-size:.72rem;font-family:var(--mono);color:var(--yellow);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3rem}.tour-checkpoint-text{font-size:.9rem;color:var(--text);margin-bottom:.55rem}.tour-answer-box{margin-top:.55rem;border:1px solid rgba(34,211,238,.35);background:#22d3ee14;border-radius:8px;padding:.55rem .65rem;font-size:.86rem;line-height:1.55}.tour-mini-task{margin-top:.65rem;display:grid;gap:.45rem}.tour-check-result{font-size:.84rem;min-height:1.1rem}.tour-check-result.ok{color:var(--green)}.tour-check-result.warn{color:#fcd34d}.tour-controls{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.7rem}.trace-intro{margin-bottom:.8rem;color:var(--muted);font-size:.88rem}.trace-lock-note{border:1px solid rgba(251,191,36,.4);background:#fbbf2414;color:#fde68a;border-radius:8px;padding:.48rem .6rem;margin-bottom:.65rem;font-size:.82rem}.trace-speed-select{min-width:120px}.trace-controls{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:.6rem;align-items:center;margin-bottom:.8rem}.trace-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-family:var(--mono)}.trace-select{width:100%;min-height:36px}.trace-summary{font-size:.9rem;margin-bottom:.55rem;color:var(--text)}.trace-stage-chip{display:inline-flex;align-items:center;padding:.22rem .6rem;border-radius:999px;font-size:.74rem;font-family:var(--mono);background:#22d3ee29;color:var(--cyan);margin-bottom:.5rem}.trace-step-title{font-weight:700;color:var(--cyan);margin-bottom:.2rem}.trace-step-detail{font-size:.9rem;color:var(--text)}.trace-progress-wrap{width:100%;height:8px;background:var(--s2);border-radius:999px;overflow:hidden;margin:.8rem 0}.trace-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--purple));transition:width .25s ease}.trace-control-grid{display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:.5rem}.trace-control-item{border:1px solid var(--border);background:var(--s2);border-radius:8px;padding:.45rem .55rem}.trace-control-key{display:block;font-size:.7rem;color:var(--muted);text-transform:uppercase;font-family:var(--mono)}.trace-control-val{display:block;font-family:var(--mono);color:var(--green);font-size:.9rem;margin-top:.12rem}.trace-control-why{display:block;margin-top:.2rem;font-size:.73rem;color:var(--muted);line-height:1.35}.confusion-card{border:1px solid rgba(167,139,250,.32);background:linear-gradient(135deg,var(--s1),rgba(167,139,250,.06))}.confusion-list{margin:0;padding-left:1rem;display:grid;gap:.35rem;font-size:.88rem}.diagram-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.diagram-figure{margin:0;border:1px solid var(--border);border-radius:10px;background:var(--s2);overflow:hidden}.diagram-figure figcaption{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-family:var(--mono);padding:.7rem .8rem .5rem}.diagram-compare-image{width:100%;height:auto;display:block;border-top:1px solid var(--border)}.compare-tip{margin-top:.9rem;color:var(--text);font-size:.9rem}.decoder-controls{display:grid;gap:.55rem}.decoder-btn-row{display:flex;gap:.55rem;flex-wrap:wrap}.decoder-samples{margin-top:.85rem;display:flex;gap:.45rem;flex-wrap:wrap}.decoder-output{margin-top:1rem;border:1px solid var(--border);background:var(--s2);border-radius:10px;padding:.9rem}.decoder-summary{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.8rem}.decoder-grid{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:.55rem}.decoder-item{border:1px solid var(--border);border-radius:8px;background:#0a1220;padding:.52rem .62rem}.decoder-key{font-size:.72rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.decoder-val{margin-top:.15rem;font-size:.89rem;color:var(--text);font-family:var(--mono);word-break:break-word}.decoder-hint,.decoder-note{margin-top:.75rem;border-radius:8px;padding:.6rem .7rem;font-size:.88rem;line-height:1.55}.decoder-hint{background:#4ade8014;border:1px solid rgba(74,222,128,.35)}.decoder-note{background:#22d3ee14;border:1px solid rgba(34,211,238,.35)}.decoder-error{border:1px solid rgba(248,113,113,.45);background:#f8717114;color:#fecaca;border-radius:8px;padding:.65rem .75rem}.challenge-head{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-bottom:.8rem}.challenge-pill{border:1px solid var(--border);border-radius:999px;padding:.28rem .65rem;background:var(--s2);font-family:var(--mono);font-size:.78rem;color:var(--cyan)}.challenge-body{border:1px solid var(--border);background:var(--s2);border-radius:10px;padding:.8rem}.challenge-label{font-size:.78rem;color:var(--muted);margin-bottom:.35rem}.challenge-bits{display:block;font-size:.84rem;color:#fef3c7;background:#111827;border:1px dashed rgba(251,191,36,.45);border-radius:8px;padding:.52rem .6rem;overflow-x:auto}.challenge-options{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:.5rem;margin-top:.75rem}.challenge-option{border:1px solid var(--border);background:#0b1625;color:var(--text);border-radius:8px;font-family:var(--mono);padding:.52rem .6rem;cursor:pointer;transition:border-color .15s,transform .15s}.challenge-option:hover{border-color:var(--cyan);transform:translateY(-1px)}.challenge-feedback{margin-top:.7rem;font-size:.88rem;min-height:1.2rem}.challenge-feedback.ok{color:var(--green)}.challenge-feedback.no{color:#fda4af}@media (max-width: 980px){.trace-controls{grid-template-columns:1fr 1fr}.trace-label,.trace-select{grid-column:1 / -1}.trace-control-grid{grid-template-columns:repeat(2,minmax(90px,1fr))}}@media (max-width: 760px){.datapath-info-panel{left:12px;right:12px;max-width:none;bottom:12px}.diagram-compare-grid,.trace-control-grid,.decoder-grid,.challenge-options{grid-template-columns:1fr}}.hero-tool-banner{display:flex;align-items:center;gap:1.2rem;background:linear-gradient(135deg,#0d1a2e,#0a1f18);border:1px solid var(--cyan);border-left:4px solid var(--cyan);border-radius:12px;padding:1.25rem 1.5rem;text-decoration:none;color:var(--text);margin-top:1.5rem;max-width:680px;transition:all .25s ease;box-shadow:0 0 24px #22d3ee0d}.hero-tool-banner:hover{border-color:var(--green);transform:translate(4px);box-shadow:0 4px 32px #22d3ee22}.tool-banner-icon{font-size:2.2rem;flex-shrink:0;line-height:1;filter:drop-shadow(0 0 8px #22d3ee66)}.tool-banner-body{flex:1;min-width:0}.tool-banner-title{font-size:1rem;font-weight:800;color:var(--cyan);margin-bottom:.3rem;font-family:var(--mono)}.tool-banner-desc{font-size:.82rem;color:var(--muted);line-height:1.55}.tool-banner-cta{font-size:.85rem;font-weight:700;color:var(--cyan);font-family:var(--mono);flex-shrink:0;white-space:nowrap}