*{box-sizing:border-box;margin:0;padding:0}:root{--body-bg:#1a1a2e;--body-text:#e0ddd5;--calc-body:#8b7355;--calc-body-dark:#6b5635;--calc-body-light:#a89070;--calc-shadow:#00000080;--display-bg:#1a1a1a;--display-border:#2a2a2a;--segment-on:#0f8;--segment-off:#0a2a15;--segment-glow:#0f86;--key-digit:#3a3a3a;--key-digit-text:#fff;--key-operator:#d4651a;--key-operator-text:#fff;--key-function:#c33;--key-function-text:#fff;--key-equals:#1a8a4a;--key-equals-text:#fff;--key-shadow:#0006;--panel-bg:#16213e;--panel-border:#2a3a5e;--panel-header:#0f3460;--accent:#e94560;--accent-dim:#943040;--wire-high:#0f8;--wire-low:#444;--wire-glow:#00ff884d;--tab-bg:#0f3460;--tab-active:#e94560;--tab-text:#89a;--tab-active-text:#fff;--mono:"SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;--sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif}html{font-size:16px}body{background:var(--body-bg);color:var(--body-text);font-family:var(--sans);min-height:100vh;line-height:1.5}#root{min-height:100vh}.app{flex-direction:column;max-width:1200px;min-height:100vh;margin:0 auto;padding:1rem;display:flex}.app-header{text-align:center;margin-bottom:1.5rem}.app-header h1{font-family:var(--sans);letter-spacing:-.02em;background:linear-gradient(135deg,#e94560,#ff8a65);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.25rem;font-size:2rem;font-weight:700}.app-subtitle{color:#89a;margin-bottom:1rem;font-size:.9rem}.layer-tabs{background:var(--panel-border);border-radius:8px;justify-content:center;gap:2px;max-width:600px;margin:0 auto;padding:3px;display:flex}.layer-tab{color:var(--tab-text);font-family:var(--sans);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:1;padding:.5rem .75rem;font-size:.8rem;font-weight:500;transition:all .2s}.layer-tab:hover{color:#ddd;background:#e9456026}.layer-tab--active{background:var(--tab-active);color:var(--tab-active-text);font-weight:600}.layer-tab:focus-visible{outline:2px solid var(--tab-active);outline-offset:2px}.layer-panel{flex:1}.app-footer{text-align:center;color:#556;padding:1.5rem 0 .5rem;font-size:.8rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.calculator{justify-content:center;padding:1rem 0;display:flex}.calculator-body{background:linear-gradient(145deg, var(--calc-body-light), var(--calc-body), var(--calc-body-dark));box-shadow:0 8px 32px var(--calc-shadow), 0 2px 8px #0000004d, inset 0 1px 0 #ffffff26;border-radius:16px;width:100%;max-width:340px;padding:24px 20px 28px}.display{background:var(--display-bg);border:2px solid var(--display-border);border-radius:8px;margin-bottom:16px;padding:12px 16px;box-shadow:inset 0 2px 8px #0009}.display-glass{justify-content:flex-end;gap:4px;display:flex;overflow:hidden}.seven-segment-digit{flex-shrink:0;width:18px;height:32px;position:relative}.segment-a,.segment-d,.segment-g{border-radius:1px;height:2px;position:absolute;left:2px;right:2px}.segment-a{top:0}.segment-g{top:50%;transform:translateY(-50%)}.segment-d{bottom:0}.segment-b,.segment-c,.segment-e,.segment-f{border-radius:1px;width:2px;position:absolute}.segment-b{height:calc(50% - 3px);top:2px;right:0}.segment-c{height:calc(50% - 3px);top:calc(50% + 1px);right:0}.segment-e{height:calc(50% - 3px);top:calc(50% + 1px);left:0}.segment-f{height:calc(50% - 3px);top:2px;left:0}.segment--on{background:var(--segment-on);box-shadow:0 0 6px var(--segment-glow), 0 0 12px var(--segment-glow)}.segment--off{background:var(--segment-off)}.keypad{flex-direction:column;gap:6px;display:flex}.keypad-row{gap:6px;display:flex}.key{height:48px;font-family:var(--sans);cursor:pointer;box-shadow:0 3px 0 var(--key-shadow), 0 4px 8px #0003;border:none;border-radius:6px;flex:1;font-size:1.1rem;font-weight:600;transition:all .1s;position:relative}.key:active{box-shadow:0 1px 0 var(--key-shadow), 0 2px 4px #0003;transform:translateY(2px)}.key:focus-visible{outline:2px solid var(--segment-on);outline-offset:2px}.key--digit{background:linear-gradient(180deg, #4a4a4a, var(--key-digit));color:var(--key-digit-text)}.key--operator{background:linear-gradient(180deg, #e8762a, var(--key-operator));color:var(--key-operator-text)}.key--function{background:linear-gradient(180deg, #d44, var(--key-function));color:var(--key-function-text)}.key--equals{background:linear-gradient(180deg, #22aa5a, var(--key-equals));color:var(--key-equals-text)}.key--wide{flex:2.15}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=480px){.app{padding:.5rem}.app-header h1{font-size:1.4rem}.app-subtitle{font-size:.75rem}.layer-tabs{flex-wrap:wrap;max-width:100%}.layer-tab{padding:.4rem .5rem;font-size:.7rem}.calculator-body{max-width:100%;padding:16px 14px 20px}.key{height:40px;font-size:.95rem}}@media (width<=768px){.layer-tabs{max-width:100%}}.cpu-view,.alu-view,.gate-view,.transistor-view,.timing-view{max-width:900px;margin:0 auto;padding:1rem}.cpu-view h2,.alu-view h2,.gate-view h2,.transistor-view h2,.timing-view h2{color:#fff;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:1.3rem;font-weight:700;display:flex}.cpu-view h3,.alu-view h3,.gate-view h3,.transistor-view h3,.timing-view h3{color:#ccd;margin-bottom:.5rem;font-size:.95rem;font-weight:600}.cpu-state-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-bottom:1rem;display:grid}.cpu-field{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;flex-direction:column;gap:2px;padding:10px 14px;display:flex}.cpu-label{text-transform:uppercase;letter-spacing:.08em;color:#89a;font-size:.7rem}.cpu-value{font-family:var(--mono);color:var(--wire-high);font-size:1.1rem;font-weight:600}.cpu-value--carry-set{color:var(--accent)}.cpu-registers{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;margin-bottom:1rem;padding:12px}.register-grid{grid-template-columns:repeat(8,1fr);gap:4px;display:grid}.register-cell{background:#0000004d;border-radius:4px;flex-direction:column;align-items:center;padding:4px;display:flex}.register-name{font-family:var(--mono);color:#89a;font-size:.65rem}.register-value{font-family:var(--mono);color:var(--wire-high);font-size:.85rem;font-weight:600}.register-cell--changed{background:#e9456033;border:1px solid #e9456066}.cpu-trace{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;max-height:200px;margin-bottom:1rem;padding:12px;overflow-y:auto}.trace-entry{font-family:var(--mono);border-bottom:1px solid #ffffff0d;grid-template-columns:60px 80px 1fr;gap:8px;padding:3px 0;font-size:.75rem;display:grid}.trace-entry:last-child{border-bottom:none}.trace-entry--current{background:#e9456026;border-radius:4px;margin:0 -6px;padding:3px 6px}.trace-addr{color:#89a}.trace-hex{color:var(--wire-high)}.trace-mnemonic{color:#dde}.cpu-controls{flex-wrap:wrap;gap:8px;display:flex}.cpu-controls button,.btn{border:1px solid var(--panel-border);background:var(--panel-bg);color:#ccd;font-family:var(--sans);cursor:pointer;border-radius:6px;padding:8px 16px;font-size:.85rem;font-weight:500;transition:all .15s}.cpu-controls button:hover,.btn:hover{background:var(--panel-header);border-color:var(--accent);color:#fff}.cpu-controls button:active,.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn--primary:hover{background:#ff5a78}.cpu-ram{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;margin-bottom:1rem;padding:12px}.ram-register{margin-bottom:8px}.ram-register-label{font-family:var(--mono);color:#89a;margin-bottom:2px;font-size:.7rem}.ram-cells{flex-wrap:wrap;gap:2px;display:flex}.ram-cell{width:24px;height:22px;font-family:var(--mono);color:var(--wire-high);background:#0000004d;border-radius:2px;justify-content:center;align-items:center;font-size:.7rem;display:flex}.ram-cell--nonzero{background:#00ff881a}.alu-view p{color:#89a;margin-bottom:1rem;font-size:.85rem;line-height:1.6}.alu-operation{background:var(--panel-bg);border:1px solid var(--panel-border);font-family:var(--mono);color:var(--accent);border-radius:6px;margin-bottom:1rem;padding:6px 14px;font-size:.9rem;font-weight:600;display:inline-block}.alu-inputs{flex-wrap:wrap;gap:16px;margin-bottom:1.5rem;display:flex}.alu-inputs>div{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:6px;padding:8px 14px}.alu-inputs span{color:#89a;margin-bottom:2px;font-size:.75rem;display:block}.alu-inputs code{font-family:var(--mono);color:var(--wire-high);letter-spacing:.2em;font-size:1.2rem;font-weight:700}.alu-adder-chain{gap:8px;margin-bottom:1rem;display:flex;position:relative}.alu-adder-chain:before{content:""}.full-adder-card{background:var(--panel-bg);border:1px solid var(--panel-border);text-align:center;border-radius:8px;flex:1;padding:12px;position:relative}.full-adder-card h3{text-transform:uppercase;letter-spacing:.08em;color:#89a;margin-bottom:8px;font-size:.7rem}.adder-io{font-family:var(--mono);flex-direction:column;gap:4px;font-size:.8rem;display:flex}.adder-input{justify-content:space-between;padding:2px 0;display:flex}.adder-input-label{color:#89a;font-size:.7rem}.adder-bit{border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:.75rem;font-weight:700;display:inline-flex}.adder-bit--high{color:var(--wire-high);background:#0f83;border:1px solid #0f86}.adder-bit--low{color:#555;background:#ffffff0d;border:1px solid #ffffff1a}.adder-divider{border:none;border-top:1px solid var(--panel-border);margin:6px 0}.adder-output{justify-content:space-between;padding:2px 0;display:flex}.adder-carry-wire{color:#89a;z-index:1;font-size:.9rem;position:absolute;top:50%;right:-12px;transform:translateY(-50%)}.adder-carry-wire--active{color:var(--wire-high);text-shadow:0 0 6px var(--wire-glow)}.alu-result{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;display:flex}.alu-result span{color:#89a;font-size:.8rem}.alu-result code{font-family:var(--mono);color:var(--accent);letter-spacing:.2em;font-size:1.2rem;font-weight:700}.gate-view p{color:#89a;margin-bottom:1rem;font-size:.85rem;line-height:1.6}.gate-info{margin-top:1rem}.gate-info code{font-family:var(--mono);color:var(--wire-high);font-weight:600}.gate-diagram{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;margin-bottom:1rem;padding:16px}.gate-row{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;display:flex}.gate-symbol{flex-direction:column;align-items:center;gap:4px;display:flex}.gate-svg-wrapper{background:#0000004d;border-radius:8px;justify-content:center;align-items:center;padding:8px;display:flex}.gate-label{font-family:var(--mono);color:#89a;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}.wire{border-radius:1px;flex:1;min-width:20px;height:2px}.wire--high{background:var(--wire-high);box-shadow:0 0 4px var(--wire-glow)}.wire--low{background:var(--wire-low)}.wire-label{font-family:var(--mono);border-radius:3px;padding:1px 6px;font-size:.65rem}.wire-label--high{color:var(--wire-high);background:#00ff8826}.wire-label--low{color:#555;background:#ffffff0d}.gate-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;align-items:flex-start;gap:12px;margin-bottom:8px;padding:12px 16px;display:flex}.gate-card-icon{flex-shrink:0;width:48px;height:36px}.gate-card-text{flex:1}.gate-card-title{color:#fff;margin-bottom:2px;font-size:.85rem;font-weight:600}.gate-card-desc{color:#89a;font-size:.75rem;line-height:1.5}.transistor-view p{color:#89a;margin-bottom:1rem;font-size:.85rem;line-height:1.6}.transistor-diagram{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;margin-bottom:1rem;padding:16px}.transistor-pair{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.transistor-card{text-align:center;background:#0000004d;border-radius:8px;min-width:180px;padding:16px}.transistor-card h4{font-family:var(--mono);color:#ccd;margin-bottom:8px;font-size:.8rem}.transistor-svg-wrapper{margin:8px 0}.transistor-status{font-family:var(--mono);border-radius:4px;padding:3px 10px;font-size:.75rem;display:inline-block}.transistor-status--conducting{color:var(--wire-high);background:#00ff8826;border:1px solid #00ff884d}.transistor-status--cutoff{color:#555;background:#ffffff0d;border:1px solid #ffffff1a}.execution-flow{margin-top:1.5rem}.flow-title{color:#fff;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1rem;font-weight:600;display:flex}.flow-pipeline{flex-direction:column;gap:0;display:flex;position:relative}.flow-stage{align-items:stretch;gap:12px;display:flex}.flow-connector{flex-direction:column;flex-shrink:0;align-items:center;width:24px;display:flex}.flow-dot{background:var(--panel-border);border:2px solid var(--panel-border);z-index:1;border-radius:50%;flex-shrink:0;width:10px;height:10px}.flow-dot--active{background:var(--wire-high);border-color:var(--wire-high);box-shadow:0 0 8px var(--wire-glow)}.flow-dot--current{background:var(--accent);border-color:var(--accent);animation:1.5s ease-in-out infinite pulse;box-shadow:0 0 8px #e9456080}@keyframes pulse{0%,to{box-shadow:0 0 8px #e9456080}50%{box-shadow:0 0 16px #e94560cc}}.flow-line{background:var(--panel-border);flex:1;width:2px;min-height:8px}.flow-line--active{background:var(--wire-high);box-shadow:0 0 4px var(--wire-glow)}.flow-content{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;flex:1;margin-bottom:4px;padding:10px 14px}.flow-content--active{border-color:#00ff884d}.flow-content--current{border-color:var(--accent);background:#e9456014}.flow-stage-label{text-transform:uppercase;letter-spacing:.08em;color:#89a;margin-bottom:4px;font-size:.7rem}.flow-stage-value{font-family:var(--mono);color:#dde;font-size:.85rem}.flow-stage-value code{color:var(--wire-high);font-weight:600}.flow-stage-detail{color:#89a;font-size:.75rem;font-family:var(--mono);margin-top:4px}.fa-internals{background:#0003;border-radius:6px;flex-direction:column;gap:6px;margin-top:8px;padding:8px;display:flex}.fa-gate-row{font-family:var(--mono);align-items:center;gap:6px;font-size:.7rem;display:flex}.fa-gate-name{color:#89a;min-width:50px}.fa-gate-io{align-items:center;gap:4px;display:flex}.timing-view p{color:#89a;margin-bottom:1rem;font-size:.85rem;line-height:1.6}.timing-section{margin-bottom:1.5rem}.timing-section-desc{color:#89a;margin-bottom:.5rem;font-size:.8rem}.timing-no-instruction{color:#667;font-style:italic}.clock-waveform{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;width:100%;max-height:130px;padding:8px}.phase-table{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;overflow:hidden}.phase-table-header{background:var(--panel-header);text-transform:uppercase;letter-spacing:.06em;grid-template-columns:70px 80px 1fr;gap:1px;font-size:.75rem;font-weight:600;display:grid}.phase-table-row{border-top:1px solid #ffffff0d;grid-template-columns:70px 80px 1fr;gap:1px;display:grid}.phase-table-cell{font-family:var(--mono);padding:6px 10px;font-size:.8rem}.phase-table-cell--header{color:#89a;padding:8px 10px}.phase-table-cell--phase{color:var(--wire-high);font-weight:600}.phase-table-cell--group{font-size:.75rem;font-weight:500}.phase-table-cell--activity{color:#ccd;font-family:var(--sans);font-size:.8rem}.instruction-timeline{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;padding:12px}.timeline-grid{flex-direction:column;gap:4px;display:flex}.timeline-entry{border-bottom:1px solid #ffffff0d;grid-template-columns:60px 80px 1fr 70px;align-items:center;gap:8px;padding:4px 0;display:grid}.timeline-entry:last-child{border-bottom:none}.timeline-addr{font-family:var(--mono);color:#89a;font-size:.75rem}.timeline-mnemonic{font-family:var(--mono);color:#dde;font-size:.8rem;font-weight:500}.timeline-duration{font-family:var(--mono);color:#89a;text-align:right;font-size:.7rem}.cycle-blocks{border-radius:3px;height:14px;display:flex;overflow:hidden}.cycle-block{height:100%}@media (width<=600px){.register-grid{grid-template-columns:repeat(4,1fr)}.alu-adder-chain{flex-direction:column}.adder-carry-wire{top:auto;bottom:-12px;right:auto;transform:none}.cpu-state-grid{grid-template-columns:1fr}.timeline-entry{grid-template-columns:50px 60px 1fr 50px;gap:4px;font-size:.7rem}.phase-table-header,.phase-table-row{grid-template-columns:60px 60px 1fr}.phase-table-cell{padding:4px 6px;font-size:.7rem}}