*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:#0a0f0d;background-image:radial-gradient(circle at 20% 50%,rgba(0,66,37,.3) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(26,93,58,.2) 0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(0,66,37,.2) 0%,transparent 50%);min-height:100vh;color:#f0f4f2;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:Playfair Display,serif;font-weight:400;letter-spacing:-.02em}code,pre{font-family:JetBrains Mono,Courier New,monospace}.app-container{display:flex;min-height:100vh}.navigation{position:fixed;left:0;top:0;width:260px;height:100vh;background:#0f191499;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid rgba(26,93,58,.2);padding:2rem 1.5rem;overflow-y:auto;display:flex;flex-direction:column}.nav-header{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(26,93,58,.2)}.nav-header h2{font-family:Playfair Display,serif;font-size:1.5rem;margin-bottom:.5rem;color:#f0f4f2}.nav-subtitle{color:#8fa99b;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}.nav-section{margin-bottom:2rem}.nav-section h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#8fa99b;margin-bottom:.75rem;font-family:Inter,sans-serif;font-weight:600}.nav-link{display:block;padding:.75rem 1rem;color:#a8bdb2;text-decoration:none;transition:all .3s ease;margin-bottom:.25rem;position:relative}.nav-link:hover{background:#1a5d3a1a;color:#f0f4f2}.nav-link.active{background:#1a5d3a33;color:#4ade80;border-left:2px solid #4ade80}.nav-footer{margin-top:auto;padding-top:2rem;border-top:1px solid rgba(26,93,58,.2)}.back-link{color:#8fa99b;font-size:.85rem;text-decoration:none;transition:color .3s ease}.back-link:hover{color:#f0f4f2}.main-content{flex:1;margin-left:260px;padding:2rem;min-height:100vh;background:transparent}.demo-container{max-width:1200px;margin:0 auto}.demo-header{margin-bottom:2rem}.demo-header h2{font-family:Playfair Display,serif;font-size:2rem;margin-bottom:.5rem;color:#4ade80}.demo-description{color:#94a3b8;line-height:1.6}.controls-section{background:#1e1e1e99;padding:1.5rem;border:1px solid rgba(26,93,58,.2);margin-bottom:2rem}.control-group{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.control-group:last-child{margin-bottom:0}.control-label{min-width:150px;color:#94a3b8;font-size:.9rem}.control-input{flex:1;padding:.5rem;background:#0a0a0a99;border:1px solid rgba(26,93,58,.3);color:#f0f4f2;font-family:inherit}.control-input:focus{outline:none;border-color:#4ade80}.btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,#1a5d3a,#4ade80);color:#fff;border:none;cursor:pointer;font-weight:500;transition:all .3s ease;font-family:inherit}.btn:hover{transform:translateY(-2px);box-shadow:0 5px 20px #1a5d3a4d}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:transparent;border:1px solid #4ade80;color:#4ade80}.btn-secondary:hover{background:#1a5d3a1a}.results-section{background:#1e1e1e99;padding:1.5rem;border:1px solid rgba(26,93,58,.2)}.benchmark-results{display:grid;gap:1rem}.benchmark-item{display:grid;grid-template-columns:200px 1fr auto;align-items:center;gap:1rem;padding:1rem;background:#0a0a0a66;border:1px solid rgba(26,93,58,.1)}.benchmark-label{color:#4ade80;font-weight:500}.benchmark-bar{height:30px;background:#1a5d3a33;position:relative;overflow:hidden}.benchmark-fill{height:100%;background:linear-gradient(90deg,#4ade80,#dc2626);transition:width .5s ease}.benchmark-value{color:#94a3b8;font-family:Monaco,Menlo,monospace;font-size:.9rem}.code-block{background:#0a0a0acc;border:1px solid rgba(26,93,58,.2);padding:1rem;margin:1rem 0;overflow-x:auto}.code-block pre{margin:0;color:#94a3b8;font-family:Monaco,Menlo,monospace;font-size:.9rem;line-height:1.5}.wasm-status{position:fixed;bottom:2rem;right:2rem;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#0f1914e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(26,93,58,.3);font-size:.85rem;color:#94a3b8;z-index:10}.status-indicator{width:8px;height:8px;border-radius:50%;background:#dc2626;animation:pulse 2s infinite}.status-indicator.ready{background:#10b981;animation:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.tab-group{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:1px solid rgba(26,93,58,.2)}.tab{padding:.75rem 1.5rem;background:transparent;border:none;color:#94a3b8;cursor:pointer;font-family:inherit;font-size:.9rem;transition:all .3s ease;position:relative}.tab:hover,.tab.active{color:#4ade80}.tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#4ade80}.grid{display:grid;gap:1.5rem}.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.card{background:#1e1e1e99;border:1px solid rgba(26,93,58,.2);padding:1.5rem;transition:all .3s ease}.card:hover{border-color:#1a5d3a80;transform:translateY(-2px)}.card h3{color:#4ade80;margin-bottom:1rem;font-size:1.1rem}.card p{color:#94a3b8;line-height:1.6;font-size:.9rem}.canvas-container{width:100%;aspect-ratio:16/9;background:#0a0a0acc;border:1px solid rgba(26,93,58,.3);display:flex;align-items:center;justify-content:center;position:relative}.canvas-container canvas{max-width:100%;height:auto}.loading-spinner{width:40px;height:40px;border:3px solid rgba(26,93,58,.2);border-top-color:#4ade80;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-message{background:#dc26261a;border:1px solid #dc2626;color:#fca5a5;padding:1rem;margin:1rem 0}.success-message{background:#10b9811a;border:1px solid #10b981;color:#86efac;padding:1rem;margin:1rem 0}.wasm-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:2rem 0}.feature-card{background:#1e1e1e99;border:1px solid rgba(26,93,58,.2);padding:1.5rem;transition:all .3s ease}.feature-card:hover{border-color:#4ade80;transform:translateY(-2px);box-shadow:0 5px 20px #4ade801a}.feature-icon{color:#4ade80;margin-bottom:1rem}.feature-card h3{color:#f0f4f2;margin-bottom:.5rem;font-size:1.1rem}.feature-card p{color:#94a3b8;font-size:.9rem;line-height:1.5}.btn-primary{display:inline-flex;align-items:center;gap:.5rem}.wasm-loading{color:#fbbf24;font-size:.85rem;margin-left:1rem}.progress-bar{width:100%;height:4px;background:#1a5d3a33;margin:1rem 0;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#4ade80,#10b981);transition:width .3s ease}.benchmark-card{background:#1e1e1e99;border:1px solid rgba(26,93,58,.2);padding:1.5rem;margin-bottom:1.5rem}.benchmark-card h4{color:#4ade80;margin-bottom:.5rem}.benchmark-iterations{color:#94a3b8;font-size:.85rem;margin-bottom:1rem}.benchmark-comparison{margin:1rem 0}.js-fill{background:linear-gradient(90deg,#fbbf24,#f59e0b)}.wasm-fill{background:linear-gradient(90deg,#4ade80,#10b981)}.speedup-indicator{text-align:center;font-size:1.2rem;font-weight:700;margin-top:1rem}.code-examples{margin-top:3rem}.code-examples h3{color:#4ade80;margin-bottom:1.5rem}.code-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1.5rem}.code-tab h4{color:#f0f4f2;margin-bottom:1rem}.memory-viewer{background:#0a0a0acc;border:1px solid rgba(26,93,58,.2);padding:1rem;margin:1rem 0;font-family:Monaco,Menlo,monospace}.memory-grid{display:grid;grid-template-columns:repeat(16,1fr);gap:.25rem;margin-top:1rem}.memory-cell{padding:.25rem;background:#1a5d3a1a;text-align:center;font-size:.75rem;color:#94a3b8;transition:all .2s ease}.memory-cell.active{background:#4ade804d;color:#4ade80}.simd-visualization{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}.simd-lane{background:#1e1e1e99;border:1px solid rgba(26,93,58,.2);padding:1rem;text-align:center}.simd-lane.active{border-color:#4ade80;background:#4ade801a}.thread-monitor{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0}.thread-status{background:#1e1e1e99;border:1px solid rgba(26,93,58,.2);padding:1rem}.thread-status.running{border-color:#4ade80}.thread-status h4{color:#4ade80;margin-bottom:.5rem;font-size:.9rem}.thread-metrics{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:#94a3b8}@media (max-width: 768px){.app{flex-direction:column}.navigation{position:static;width:100%;height:auto;border-right:none;border-bottom:1px solid rgba(26,93,58,.2)}.main-content{margin-left:0;padding:1rem}.control-group{flex-direction:column;align-items:stretch}.control-label{min-width:auto}.benchmark-item{grid-template-columns:1fr;gap:.5rem}.wasm-status{bottom:1rem;right:1rem;left:1rem;justify-content:center}.nav-footer{padding-top:1rem;margin-top:1rem}}