.wgpu-demo{--webgpu: var(--accent-amber);--typegpu: var(--accent-emerald);position:relative;color:var(--text-primary);font-size:15px;line-height:1.6}.wgpu-demo,.wgpu-demo *{box-sizing:border-box}.wgpu-demo .wgpu-notice{background:var(--glass-medium);border:1px solid rgba(34,211,238,.25);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);font-size:.85rem;color:var(--text-secondary);margin-bottom:var(--space-lg)}.wgpu-demo .wgpu-notice strong{color:var(--accent-cyan)}.wgpu-demo .wgpu-unsupported{background:#f43f5e1a;border:1px solid rgba(244,63,94,.3);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);font-size:.85rem;color:var(--accent-rose);margin-bottom:var(--space-lg)}.wgpu-demo .wgpu-controls{background:var(--glass-medium);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-lg);margin-bottom:var(--space-lg)}.wgpu-demo .wgpu-control-row{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-sm);flex-wrap:wrap}.wgpu-demo .wgpu-control-row:last-child{margin-bottom:0}.wgpu-demo .wgpu-control-label{font-size:.85rem;color:var(--text-secondary);min-width:70px}.wgpu-demo .pg-range{flex:1;min-width:150px}.wgpu-demo .wgpu-range-value{font-family:var(--font-mono);font-size:.85rem;color:var(--accent-cyan);min-width:60px;text-align:right}.wgpu-demo button{background:var(--glass-medium);border:1px solid var(--glass-border-hover);color:var(--text-primary);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;line-height:1.4;transition:all var(--duration-normal) var(--ease-out-expo)}.wgpu-demo button:hover{background:var(--glass-hover);border-color:var(--glass-border-focus);box-shadow:var(--shadow-glass);transform:translateY(-1px)}.wgpu-demo button.active{background:var(--accent-cyan);border-color:var(--accent-cyan);color:var(--text-inverse);font-weight:600;box-shadow:var(--shadow-glow-cyan)}.wgpu-demo button.danger{border-color:var(--accent-rose);color:var(--accent-rose)}.wgpu-demo button.danger:hover{background:#f43f5e1f}.wgpu-demo .wgpu-section{margin-bottom:var(--space-2xl)}.wgpu-demo .wgpu-section:last-child{margin-bottom:0}.wgpu-demo .wgpu-section-title{font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--text-primary);margin-bottom:var(--space-xl);padding-bottom:var(--space-md);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.wgpu-demo .wgpu-section-desc{font-size:.9rem;color:var(--text-secondary);margin-bottom:var(--space-lg)}.wgpu-demo .wgpu-badge{font-size:.7rem;padding:.15rem .5rem;border-radius:var(--radius-pill);font-weight:500}.wgpu-demo .wgpu-badge-live{background:#10b9811f;color:var(--accent-emerald);border:1px solid rgba(16,185,129,.3)}.wgpu-demo .wgpu-badge-sim{background:#22d3ee1f;color:var(--accent-cyan);border:1px solid rgba(34,211,238,.3)}.wgpu-demo .wgpu-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}@media(max-width:900px){.wgpu-demo .wgpu-compare-grid{grid-template-columns:1fr}}.wgpu-demo .wgpu-panel{background:var(--glass-medium);border:1px solid var(--glass-border);border-radius:var(--radius-md);overflow:hidden;min-width:0;transition:all var(--duration-normal) var(--ease-out-expo)}.wgpu-demo .wgpu-panel:hover{border-color:var(--glass-border-hover);box-shadow:var(--shadow-glass)}.wgpu-demo .wgpu-panel-header{padding:var(--space-sm) var(--space-md);font-weight:600;font-size:.9rem;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);border-bottom:1px solid var(--glass-border);flex-wrap:wrap}.wgpu-demo .wgpu-panel-header.webgpu-side{border-left:4px solid var(--webgpu)}.wgpu-demo .wgpu-panel-header.typegpu-side{border-left:4px solid var(--typegpu)}.wgpu-demo .wgpu-panel-sub{font-size:.75rem;color:var(--text-tertiary);font-weight:400}.wgpu-demo .wgpu-panel-body{padding:var(--space-md)}.wgpu-demo .wgpu-render-canvas{width:100%;height:300px;border-radius:var(--radius-sm);background:var(--bg-deep);display:block}.wgpu-demo .wgpu-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm);margin-top:var(--space-sm)}@media(max-width:700px){.wgpu-demo .wgpu-metrics{grid-template-columns:repeat(2,1fr)}}.wgpu-demo .wgpu-metric-card{background:var(--glass-light);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:var(--space-md);text-align:center}.wgpu-demo .wgpu-metric-value{font-size:1.75rem;font-weight:700;font-family:var(--font-mono)}.wgpu-demo .wgpu-metric-label{font-size:.75rem;color:var(--text-tertiary);margin-top:.25rem;text-transform:uppercase;letter-spacing:.05em}.wgpu-demo .wgpu-metric-sub{font-size:.7rem;color:var(--text-tertiary);margin-top:.25rem}.wgpu-demo .wgpu-memory-visualizer{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}@media(max-width:900px){.wgpu-demo .wgpu-memory-visualizer{grid-template-columns:1fr}}.wgpu-demo .wgpu-memory-block{background:var(--glass-medium);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-lg);min-width:0}.wgpu-demo .wgpu-memory-title{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.25;font-size:.95rem;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--glass-border)}.wgpu-demo .wgpu-byte-row{display:flex;font-family:var(--font-mono);font-size:.75rem;margin-bottom:2px}.wgpu-demo .wgpu-byte-addr{width:44px;color:var(--text-tertiary);text-align:right;padding-right:8px;border-right:1px solid var(--glass-border);flex-shrink:0}.wgpu-demo .wgpu-byte-cells{display:flex;flex:1;padding-left:8px;flex-wrap:wrap}.wgpu-demo .wgpu-byte-cell{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);margin-right:2px;margin-bottom:2px;font-size:.65rem;transition:all var(--duration-slow) var(--ease-out-expo);cursor:default}.wgpu-demo .wgpu-cell-pos{background:#3b82f62e;border:1px solid rgba(59,130,246,.4);color:var(--accent-blue)}.wgpu-demo .wgpu-cell-col{background:#10b9812e;border:1px solid rgba(16,185,129,.4);color:var(--accent-emerald)}.wgpu-demo .wgpu-cell-vel{background:#a855f72e;border:1px solid rgba(168,85,247,.4);color:var(--accent-purple)}.wgpu-demo .wgpu-cell-pad{background:#f43f5e1f;border:1px solid rgba(244,63,94,.28);color:var(--accent-rose);font-size:.6rem}.wgpu-demo .wgpu-field-legend{display:flex;gap:var(--space-md);margin-top:var(--space-md);font-size:.8rem;flex-wrap:wrap}.wgpu-demo .wgpu-legend-item{display:flex;align-items:center;gap:.35rem;color:var(--text-secondary)}.wgpu-demo .wgpu-legend-dot{width:12px;height:12px;border-radius:var(--radius-xs)}.wgpu-demo .wgpu-error-box{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:#f43f5e1a;border:1px solid rgba(244,63,94,.3);border-radius:var(--radius-sm);font-size:.8rem;color:var(--accent-rose)}.wgpu-demo .wgpu-ok-box{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:#10b9811a;border:1px solid rgba(16,185,129,.3);border-radius:var(--radius-sm);font-size:.8rem;color:var(--accent-emerald)}.wgpu-demo .wgpu-memory-block code{background:var(--glass-light);padding:.1rem .3rem;border-radius:var(--radius-xs);font-family:var(--font-mono)}.wgpu-demo .wgpu-code-tabs{display:flex;gap:var(--space-sm);margin-bottom:var(--space-sm);flex-wrap:wrap}.wgpu-demo .wgpu-code-panel{background:var(--bg-elevated);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:var(--space-md);font-family:var(--font-mono);font-size:.8rem;line-height:1.7;overflow-x:auto;max-height:400px;overflow-y:auto}.wgpu-demo .wgpu-code-panel .comment{color:var(--text-tertiary)}.wgpu-demo .wgpu-code-panel .keyword{color:var(--accent-purple)}.wgpu-demo .wgpu-code-panel .string{color:var(--accent-cyan)}.wgpu-demo .wgpu-code-panel .number{color:var(--accent-amber)}.wgpu-demo .wgpu-code-panel .type{color:var(--accent-blue)}.wgpu-demo .wgpu-code-panel .func{color:var(--accent-indigo)}.wgpu-demo .wgpu-code-panel .tag{color:var(--accent-emerald)}.wgpu-demo .wgpu-code-panel .error-line{background:#f43f5e26;display:block;border-radius:var(--radius-xs);padding:0 4px;margin:0 -4px}.wgpu-demo .wgpu-code-panel .warn-line{background:#f59e0b26;display:block;border-radius:var(--radius-xs);padding:0 4px;margin:0 -4px}.wgpu-demo .wgpu-code-panel .good-line{background:#10b9811f;display:block;border-radius:var(--radius-xs);padding:0 4px;margin:0 -4px}.wgpu-demo .wgpu-chart-container{background:var(--glass-medium);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-lg);height:300px;position:relative}.wgpu-demo .wgpu-chart-canvas{width:100%;height:100%}.wgpu-demo .wgpu-conclusion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}@media(max-width:900px){.wgpu-demo .wgpu-conclusion-grid{grid-template-columns:1fr}}.wgpu-demo .wgpu-conclusion-card{background:var(--glass-medium);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-lg);transition:all var(--duration-normal) var(--ease-out-expo)}.wgpu-demo .wgpu-conclusion-card:hover{border-color:var(--glass-border-hover);box-shadow:var(--shadow-glass);transform:translateY(-2px)}.wgpu-demo .wgpu-conclusion-card h3{font-size:1rem;margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm);color:var(--text-primary)}.wgpu-demo .wgpu-conclusion-card p{font-size:.85rem;color:var(--text-secondary);line-height:1.7;margin:0}.wgpu-demo .wgpu-icon{font-size:1.25rem}.wgpu-demo .wgpu-tooltip{position:absolute;background:var(--bg-overlay);border:1px solid var(--glass-border-focus);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-size:.75rem;color:var(--text-primary);pointer-events:none;z-index:var(--z-tooltip);box-shadow:var(--shadow-elevated);display:none;max-width:220px}.article-toc{padding:var(--space-lg)}.glass-toc{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-sm)}.glass-toc a{display:block;padding:6px 10px;border-radius:var(--radius-sm);border:1px solid transparent;color:var(--text-secondary);font-size:.85rem;transition:all var(--duration-normal) var(--ease-out-expo)}.glass-toc a:hover{color:var(--accent-cyan);border-color:var(--glass-border);background:var(--glass-light)}