:root{--color-primary: #2E7D32;--color-primary-dark: #1B5E20;--color-accent: #4CAF50;--color-accent-light: #81C784;--color-surface: #ffffff;--color-surface-alt: #f8f9fa;--color-surface-dim: #f5f5f5;--color-text: #333333;--color-text-heading: #2c3e50;--color-text-muted: #666666;--color-text-light: #555555;--color-border: #e0e0e0;--color-border-light: #dddddd;--color-code-bg: #1e1e1e;--color-footer-bg: #2c3e50;--gradient-primary: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);--gradient-header: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);--space-xs: .5rem;--space-sm: .75rem;--space-md: 1.25rem;--space-lg: 2rem;--space-xl: 3.25rem;--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-mono: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", monospace;--text-xs: clamp(.75rem, .7rem + .25vw, .875rem);--text-sm: clamp(.875rem, .8rem + .4vw, 1rem);--text-base: clamp(1rem, .95rem + .25vw, 1.125rem);--text-lg: clamp(1.125rem, 1rem + .6vw, 1.5rem);--text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);--leading-body: 1.6;--leading-heading: 1.2;--leading-code: 1.4;--timing-instant: .15s;--timing-standard: .25s;--timing-complex: .35s;--easing-standard: ease;--easing-enter: ease-out;--easing-exit: ease-in}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}a,button,[role=tab],.btn,.project-card,.repo-item{transition:background var(--timing-instant) var(--easing-standard),color var(--timing-instant) var(--easing-standard),transform var(--timing-instant) var(--easing-standard),box-shadow var(--timing-standard) var(--easing-standard),border-color var(--timing-instant) var(--easing-standard)}a:focus-visible,button:focus-visible,[role=tab]:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button:active:not(:disabled),.btn:active{transform:scale(.98)}body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body)}h1,h2,h3,h4,h5,h6{line-height:var(--leading-heading)}code,pre,.code-snippet{font-family:var(--font-mono);line-height:var(--leading-code)}html{scroll-behavior:smooth}.site-nav{width:100%;background:linear-gradient(135deg,#2c3e50,#34495e);padding:var(--space-sm) var(--space-lg);display:flex;justify-content:space-between;align-items:center}.site-nav .nav-brand{color:#fff;font-weight:600;text-decoration:none;font-size:1.125rem}.site-nav .nav-brand:hover{opacity:.9}.site-nav .nav-links{display:flex;gap:var(--space-md);list-style:none;margin:0;padding:0}.site-nav .nav-links a{color:#ffffffe6;text-decoration:none;padding:var(--space-xs) var(--space-sm);border-radius:4px;transition:background var(--timing-instant) var(--easing-standard)}.site-nav .nav-links a:hover{background:#ffffff26}.site-nav .nav-links a:focus-visible{outline:2px solid white;outline-offset:2px}.site-nav .nav-links a.active{background:#fff3;font-weight:600;position:relative}.site-nav .nav-links a.active:after{content:"";position:absolute;bottom:0;left:var(--space-sm);right:var(--space-sm);height:2px;background:#fff}.menu-toggle{display:none;background:none;border:none;cursor:pointer;color:#fff;padding:var(--space-xs);position:relative;width:32px;height:32px;z-index:101}.menu-toggle:hover{opacity:.9}.menu-toggle:focus-visible{outline:2px solid white;outline-offset:2px;border-radius:4px}.hamburger-icon,.hamburger-icon:before,.hamburger-icon:after{display:block;width:24px;height:2px;background:#fff;position:absolute;left:4px;transition:transform .3s ease,opacity .3s ease}.hamburger-icon{top:15px}.hamburger-icon:before{content:"";top:-8px}.hamburger-icon:after{content:"";top:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:768px){.menu-toggle{display:block}.site-nav{position:relative}.site-nav .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#2c3e50;box-shadow:0 4px 12px #0003;padding:var(--space-sm);z-index:100;gap:0}.site-nav .nav-links[hidden]{display:none}.site-nav .nav-links a{padding:var(--space-sm) var(--space-md);display:block;width:100%;border-radius:4px}.site-nav .nav-links a:hover{background:#ffffff1a}}.breadcrumbs{display:flex;align-items:center;gap:var(--space-xs, .5rem);padding:var(--space-sm, .75rem) 0;font-size:.875rem;color:var(--color-text-secondary, #666);flex-wrap:wrap}.breadcrumbs ol{display:flex;align-items:center;gap:var(--space-xs, .5rem);list-style:none;padding:0;margin:0;flex-wrap:wrap}.breadcrumbs li{display:flex;align-items:center;gap:var(--space-xs, .5rem)}.breadcrumbs a{color:var(--color-primary, #2E7D32);text-decoration:none;transition:color var(--timing-instant, .15s) ease}.breadcrumbs a:hover{color:var(--color-primary-dark, #1B5E20);text-decoration:underline}.breadcrumbs a:focus-visible{outline:2px solid var(--color-primary, #2E7D32);outline-offset:2px;border-radius:2px}.breadcrumbs .separator{color:var(--color-text-secondary, #666);-webkit-user-select:none;user-select:none}.breadcrumbs [aria-current=page]{color:var(--color-text-primary, #2c3e50);font-weight:500}@media(max-width:480px){.breadcrumbs{font-size:.8125rem;padding:var(--space-xs, .5rem) 0}}:root{--stage-if-color: #4CAF50;--stage-id-color: #2196F3;--stage-ex-color: #FF9800;--stage-mem-color: #9C27B0;--stage-wb-color: #F44336;--color-highlight-yellow: #FFF9C4}.cpu-visualizer{display:flex;flex-direction:column;gap:24px;padding:24px}.pipeline-section h2,.data-section h2{font-size:var(--text-lg);margin-bottom:var(--space-sm);color:var(--color-text-heading)}.cpu-block-diagram{width:100%;height:auto;max-width:900px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface)}.component rect{fill:var(--color-surface-alt);stroke:var(--color-border);stroke-width:2;transition:fill .3s ease,stroke .3s ease,stroke-width .3s ease}.component text,.component tspan{font-family:var(--font-body);font-size:13px;fill:var(--color-text);pointer-events:none}.component-label{font-weight:500}.component.active rect{stroke-width:3}.instruction-memory.active rect{fill:#e8f5e9;stroke:var(--stage-if-color)}.register-file.active rect,.sign-extend.active rect{fill:#e3f2fd;stroke:var(--stage-id-color)}.alu.active rect{fill:#fff3e0;stroke:var(--stage-ex-color)}.data-memory.active rect{fill:#f3e5f5;stroke:var(--stage-mem-color)}.pc.active rect,.adder.active rect{fill:#e8f5e9;stroke:var(--stage-if-color)}.pipeline-register rect{fill:#ef5350;stroke:#c62828;stroke-width:1}.pipeline-label{font-size:12px;font-weight:700;fill:#c62828}.pipeline-instruction{font-family:var(--font-mono);font-size:11px;fill:var(--color-text)}.multiplexer polygon{fill:#2196f3;stroke:#1976d2;stroke-width:1;opacity:.8;transition:opacity .3s ease,stroke-width .3s ease}.multiplexer.active polygon{opacity:1;stroke-width:2}.data-path{stroke:var(--color-border);stroke-width:1.5;fill:none}.stage-label-text{font-size:11px;fill:var(--color-text-muted);text-anchor:middle;font-weight:700;text-transform:uppercase}@media(prefers-reduced-motion:reduce){.component rect,.multiplexer polygon{transition:none}}.register-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}.register-cell{border:1px solid var(--color-border);border-radius:4px;padding:8px;background:var(--color-surface);transition:background-color .3s ease-out;display:flex;justify-content:space-between;align-items:center}.register-cell.changed{background-color:var(--color-highlight-yellow)}.register-cell[data-register="0"]{opacity:.6}.register-label{font-weight:700;font-size:12px}.register-value{font-family:var(--font-mono);font-size:13px;letter-spacing:.5px}[data-execution-view]{margin-top:24px}[data-execution-view] p{font-size:16px;margin:8px 0}[data-execution-view] span{font-weight:700;font-family:var(--font-mono)}.memory-view{padding:16px}.memory-view h3{font-size:var(--text-md);margin-bottom:12px;color:var(--color-text-heading)}.memory-table-container{max-height:300px;overflow-y:auto;border:1px solid var(--color-border);border-radius:4px}.memory-table{width:100%;border-collapse:collapse;font-size:14px}.memory-table thead{position:sticky;top:0;background:var(--color-surface-alt);z-index:1}.memory-table thead th{padding:8px 12px;text-align:left;font-weight:700;border-bottom:2px solid var(--color-border)}.memory-table tbody tr{border-bottom:1px solid var(--color-border)}.memory-table tbody tr:last-child{border-bottom:none}.memory-table td{padding:6px 12px}.memory-row{transition:background-color .3s ease-out}.memory-row.changed{background-color:var(--color-highlight-yellow)}.memory-address,.memory-value{font-family:var(--font-mono);letter-spacing:.5px}.empty-state{text-align:center;padding:24px;color:var(--color-text-muted);font-style:italic}.instruction-view{padding:16px}.instruction-view h3{font-size:var(--text-md);margin-bottom:12px;color:var(--color-text-heading)}.instruction-display{background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;padding:16px}.instruction-placeholder{color:var(--color-text-muted);font-style:italic;text-align:center;padding:12px}.instruction-mnemonic{margin-bottom:12px;font-size:16px}.instruction-mnemonic .value{font-weight:700;font-family:var(--font-mono);margin-left:8px}.instruction-fields{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.field{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--color-surface-alt);border-radius:4px;font-size:14px}.field-name{font-weight:700;color:var(--color-text-muted)}.field-value{font-family:var(--font-mono);color:var(--color-text)}.instruction-comment{font-style:italic;color:var(--color-text-muted);font-size:14px;margin-top:8px}.instruction-comment .value{margin-left:8px}.instruction-list-container{max-height:400px;overflow-y:auto;padding:16px;border:1px solid var(--color-border);border-radius:4px}.instruction-list-container h3{font-size:var(--text-md);margin-bottom:12px;color:var(--color-text-heading)}.instruction-list{list-style-position:inside;margin:0;padding:0}.instruction-item{padding:10px 12px;border-bottom:1px solid var(--color-border);transition:background-color .2s ease;display:flex;gap:8px;align-items:baseline}.instruction-item:last-child{border-bottom:none}.instruction-item.clickable{cursor:pointer}.instruction-item.clickable:hover{background:var(--color-surface-alt)}.instruction-item.active{background:#e8f5e9;border-left:4px solid var(--stage-if-color);padding-left:8px}.instruction-item:focus-visible{outline:2px solid var(--stage-if-color);outline-offset:-2px}.inst-mnemonic{font-weight:700;font-family:var(--font-mono);min-width:60px}.inst-operands{font-family:var(--font-mono);color:var(--color-text)}.inst-comment{font-style:italic;color:var(--color-text-muted);font-size:13px;margin-left:auto}@media(prefers-reduced-motion:reduce){.memory-row,.instruction-item{transition:none}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#333;background:#f5f5f5}body.cpu-simulator-page,body.graphics-demo-page,body.wasm-demo-page{background:linear-gradient(135deg,#2e7d32,#1b5e20);min-height:100vh;padding:2rem}.container{max-width:1400px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;overflow:hidden}.container header{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:2rem;text-align:center}.container header h1{margin-bottom:.5rem}.container header p{opacity:.9;font-size:1.1rem}.demo-layout{display:grid;grid-template-columns:300px 1fr;gap:2rem;padding:2rem}.sidebar{background:#f8f9fa;padding:1.5rem;border-radius:8px;overflow-y:auto;max-height:calc(100vh - 200px)}.visualization-area{padding:1.5rem;min-width:0}body.home-page{background:#f5f5f5}body.home-page header{background:linear-gradient(135deg,#2e7d32,#1b5e20);color:#fff;padding:4rem 2rem;text-align:center}body.home-page header h1{font-size:clamp(2rem,1.5rem + 2vw,3rem);margin-bottom:.5rem;font-weight:700}body.home-page header p{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);opacity:.95}body.home-page .container{max-width:1200px;margin:0 auto;padding:3rem 2rem;background:transparent;box-shadow:none}body.home-page .section{background:#fff;padding:3rem;margin-bottom:2rem;border-radius:12px;box-shadow:0 4px 6px #0000001a}body.home-page .section h2{color:#2c3e50;margin-bottom:1.5rem;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);border-bottom:3px solid #2E7D32;padding-bottom:.5rem}@media(max-width:1024px){.demo-layout{grid-template-columns:1fr}.sidebar{max-height:none}}@media(max-width:768px){body.cpu-simulator-page,body.graphics-demo-page,body.wasm-demo-page{padding:1rem}body.home-page .section{padding:2rem}}