:root{--bg:#0a0a0f;--bg2:#10101a;--bg3:#16162a;--panel:#1a1a2e;--border:#7864ff26;--border2:#7864ff4d;--purple:#7c5cfc;--purple2:#a78bfa;--purple3:#c4b5fd;--teal:#2dd4bf;--teal2:#5eead4;--amber:#fbbf24;--coral:#f87171;--green:#4ade80;--text:#e8e6f0;--muted:#8a85a0;--mono:"JetBrains Mono", monospace;--sans:"Inter", sans-serif;--display:"Syne", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.7}main{padding-top:52px}section{border-bottom:.5px solid var(--border);padding:80px 0}.wrap{max-width:1100px;margin:0 auto;padding:0 2rem}.sec-label{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--purple2);margin-bottom:8px;font-size:11px}h2{font-family:var(--display);color:#fff;margin-bottom:16px;font-size:clamp(26px,4vw,44px);font-weight:700;line-height:1.1}h3{font-family:var(--display);color:var(--purple3);margin-bottom:10px;font-size:20px;font-weight:600}.lead{color:var(--muted);max-width:680px;margin-bottom:48px;font-size:17px}.diagram-card{background:var(--panel);border:.5px solid var(--border);border-radius:16px;margin-bottom:32px;padding:32px;overflow:hidden}.diagram-card h3{margin-bottom:6px}.diagram-card .caption{color:var(--muted);margin-bottom:24px;font-size:13px;line-height:1.5}.diag-text{fill:#e8e6f0;font-family:var(--sans)}.diag-label{fill:#8a85a0;font-family:var(--sans);font-size:12px}.diag-mono{fill:var(--purple3);font-family:var(--mono);font-size:11px}.two-col{grid-template-columns:1fr 1fr;gap:24px;display:grid}@media (width<=720px){.two-col{grid-template-columns:1fr}}.control-row{flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px;display:flex}.control-row label{color:var(--muted);white-space:nowrap;font-size:13px}.control-row input[type=range]{min-width:120px;accent-color:var(--purple);flex:1}.val-badge{font-family:var(--mono);color:var(--purple2);white-space:nowrap;background:#7c5cfc1f;border-radius:20px;padding:3px 10px;font-size:12px}.code-box{border:.5px solid var(--border);font-family:var(--mono);color:#c4b5fd;background:#0d0d18;border-radius:10px;margin:16px 0;padding:20px 24px;font-size:13px;line-height:1.8;overflow-x:auto}.code-box .kw{color:var(--teal2)}.code-box .str{color:var(--amber)}.code-box .cmt{color:var(--muted)}.code-box .num{color:var(--coral)}.code-box .fn{color:#f9a8d4}.pill-row{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.pill{font-size:12px;font-family:var(--mono);border:.5px solid;border-radius:20px;padding:4px 12px}.pill-purple{color:var(--purple3);background:#7c5cfc14;border-color:#a78bfa4d}.pill-teal{color:var(--teal2);background:#2dd4bf12;border-color:#2dd4bf4d}.pill-amber{color:var(--amber);background:#fbbf2412;border-color:#fbbf244d}.pill-coral{color:var(--coral);background:#f8717112;border-color:#f871714d}.step-list{flex-direction:column;gap:0;display:flex}.step-item{border-bottom:.5px solid var(--border);gap:20px;padding:20px 0;display:flex}.step-item:last-child{border-bottom:none}.step-num{font-family:var(--mono);color:var(--purple);background:#7c5cfc26;border:.5px solid #7c5cfc4d;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;margin-top:2px;font-size:11px;font-weight:500;display:flex}.step-body h4{color:#fff;margin-bottom:4px;font-size:15px;font-weight:500}.step-body p{color:var(--muted);font-size:14px;line-height:1.6}.approach-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:32px;display:grid}.approach-card{background:var(--panel);border:.5px solid var(--border);border-radius:12px;padding:24px}.approach-card .phase{font-family:var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--purple2);margin-bottom:8px;font-size:10px}.approach-card h4{color:#fff;margin-bottom:10px;font-size:16px;font-weight:500}.approach-card ul{flex-direction:column;gap:6px;list-style:none;display:flex}.approach-card li{color:var(--muted);padding-left:16px;font-size:13px;position:relative}.approach-card li:before{content:"→";color:var(--purple2);position:absolute;left:0}.video-section-header{margin-bottom:24px}.video-section-label{font-family:var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--teal2);background:#2dd4bf14;border:.5px solid #2dd4bf33;border-radius:20px;margin-bottom:10px;padding:3px 12px;font-size:11px;display:inline-block}@keyframes flow-dash{to{stroke-dashoffset:-20px}}.signal-path{stroke-dasharray:6 6;animation:1.2s linear infinite flow-dash}@keyframes cell-pulse{0%,to{opacity:.18;transform:scale(1)}40%{opacity:1;transform:scale(1.08)}}@keyframes gpu-wave{0%,to{opacity:.15}35%,55%{opacity:1}}@keyframes pulse-glow{0%,to{box-shadow:0 0 #7c5cfc80}50%{box-shadow:0 0 0 8px #7c5cfc00}}@keyframes fade-rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.proc-grid{gap:4px;display:grid}.proc-cell{aspect-ratio:1;background:#7c5cfc2e;border:.5px solid #7c5cfc59;border-radius:4px;width:100%;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.proc-cell.cpu{background:#2dd4bf2e;border-color:#2dd4bf66;animation-name:cell-pulse;animation-duration:2.4s}.proc-cell.gpu{animation-name:gpu-wave;animation-duration:1.8s}.matrix-grid{background:#7c5cfc0a;border:.5px solid #7c5cfc40;border-radius:12px;gap:6px;padding:12px;display:inline-grid}.matrix-cell{width:52px;height:52px;font-family:var(--mono);color:var(--text);text-align:center;background:#10101a99;border:.5px solid #7864ff40;border-radius:8px;outline:none;font-size:14px;transition:background .25s,border-color .25s,transform .2s,color .2s}.matrix-cell:focus{border-color:var(--purple);background:#7c5cfc1f}.matrix-cell.hl-a{color:#5eead4;background:#2dd4bf38;border-color:#2dd4bfb3;transform:scale(1.07)}.matrix-cell.hl-b{color:#c4b5fd;background:#a78bfa38;border-color:#a78bfab3;transform:scale(1.07)}.matrix-cell.hl-c{color:#4ade80;background:#4ade8038;border-color:#4ade80b3;animation:1.2s ease-out pulse-glow;transform:scale(1.07)}.matrix-cell.done{color:#4ade80;background:#4ade8014;border-color:#4ade8080}.mp-button{color:#c4b5fd;font-family:var(--mono);cursor:pointer;background:#7c5cfc2e;border:.5px solid #7c5cfc80;border-radius:18px;padding:7px 16px;font-size:12px;transition:background .2s,border-color .2s,color .2s}.mp-button:hover{background:#7c5cfc4d}.mp-button.active{color:#fff;border-color:var(--purple);background:#7c5cfc52}.mp-button.ghost{color:var(--muted);border-color:var(--border);background:0 0}.mp-button.danger{color:var(--coral);background:#f8717126;border-color:#f8717166}.fade-rise{animation:.35s ease-out both fade-rise}