.wgpu-demo{--webgpu: var(--h-amber);--typegpu: var(--h-emerald);position:relative;display:flex;flex-direction:column;gap:var(--s-6);min-width:0;color:var(--text);font-size:var(--t-base);line-height:1.6}.wgpu-demo,.wgpu-demo *{box-sizing:border-box}.strata .wgpu-demo .webgpu-side{--hue: var(--h-amber)}.strata .wgpu-demo .typegpu-side{--hue: var(--h-emerald)}.wgpu-demo .wgpu-notice{background:var(--surface-1);border:1px solid var(--line);border-left:2px solid var(--h-cyan);border-radius:var(--radius-lg);padding:var(--s-4) var(--s-5);font-size:var(--t-sm);color:var(--text-mut)}.wgpu-demo .wgpu-notice strong{color:var(--h-cyan);font-weight:600}.wgpu-demo .wgpu-unsupported{background:var(--surface-1);border:1px solid var(--line);border-left:2px solid var(--err);border-radius:var(--radius-lg);padding:var(--s-4) var(--s-5);font-size:var(--t-sm);color:var(--err)}.wgpu-demo .wgpu-controls{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}.wgpu-demo .wgpu-control-row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin:0}.wgpu-demo .wgpu-control-label{min-width:70px;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}.wgpu-demo .pg-range{flex:1;min-width:150px}.strata .wgpu-demo .pg-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--hue, var(--accent)) var(--fill, 0%),var(--surface-3) var(--fill, 0%))}.strata .wgpu-demo .pg-range::-moz-range-track{background:linear-gradient(90deg,var(--hue, var(--accent)) var(--fill, 0%),var(--surface-3) var(--fill, 0%))}.wgpu-demo .wgpu-range-value{min-width:60px;text-align:right;font-family:var(--font-mono);font-size:var(--t-sm);font-variant-numeric:tabular-nums;color:var(--hue, var(--accent))}.wgpu-demo button{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 var(--s-4);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);font-size:var(--t-sm);line-height:1.4;cursor:pointer;transition:transform var(--duration-fast) var(--ease)}.wgpu-demo button:hover{background:var(--surface-3);border-color:var(--line-strong);transform:translateY(-1px)}.wgpu-demo button.active{background:var(--hue, var(--accent));border-color:var(--hue, var(--accent));color:var(--accent-ink);font-weight:600}.wgpu-demo button.danger{border-color:color-mix(in srgb,var(--err) 46%,transparent);color:var(--err)}.wgpu-demo button.danger:hover{background:var(--err-soft)}.wgpu-demo .wgpu-section-desc{max-width:74ch;font-size:var(--t-base);color:var(--text-mut)}.wgpu-demo .wgpu-section-desc strong{color:var(--text-hi);font-weight:600}.strata .wgpu-demo .matrix>.wgpu-panel{padding:0;gap:0}.wgpu-demo .wgpu-panel-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--line);border-left:3px solid var(--hue, var(--accent));font-size:var(--t-sm);font-weight:600;color:var(--text-hi)}.wgpu-demo .wgpu-panel-sub{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:400;color:var(--text-faint)}.wgpu-demo .wgpu-panel-body{min-width:0;padding:var(--s-5)}.wgpu-demo .wgpu-render-canvas{display:block;width:100%;height:300px;background:var(--inset);border:1px solid var(--line);border-radius:var(--radius-md)}.strata .wgpu-demo .spec-strip.wgpu-metrics{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s-5)}.strata .wgpu-demo .spec-strip.wgpu-metrics>div{padding:var(--s-4);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.strata .wgpu-demo .spec-strip.wgpu-metrics>div:nth-child(2n){border-right:0}.strata .wgpu-demo .spec-strip.wgpu-metrics>div:nth-child(n+3){border-bottom:0}.strata .wgpu-demo .spec-strip.wgpu-metrics .l{font-size:var(--t-micro)}.wgpu-demo .wgpu-memory-title{padding-bottom:var(--s-3);border-bottom:1px solid var(--line);font-size:var(--t-sm);font-weight:600;letter-spacing:-.01em;color:var(--text-hi)}.wgpu-demo .wgpu-byte-row{display:flex;margin-bottom:2px;font-family:var(--font-mono);font-size:var(--t-micro)}.wgpu-demo .wgpu-byte-addr{width:44px;flex-shrink:0;padding-right:8px;text-align:right;color:var(--text-faint);border-right:1px solid var(--line)}.wgpu-demo .wgpu-byte-cells{display:flex;flex:1;flex-wrap:wrap;padding-left:8px}.wgpu-demo .wgpu-byte-cell{width:28px;height:28px;margin:0 2px 2px 0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);font-size:.65rem;cursor:default;transition:transform var(--duration-slow) var(--ease)}.wgpu-demo .wgpu-byte-cell:hover{transform:translateY(-2px)}.wgpu-demo .wgpu-cell-pos{background:color-mix(in srgb,var(--h-blue) 18%,transparent);border:1px solid color-mix(in srgb,var(--h-blue) 44%,transparent);color:var(--h-blue)}.wgpu-demo .wgpu-cell-col{background:color-mix(in srgb,var(--h-emerald) 18%,transparent);border:1px solid color-mix(in srgb,var(--h-emerald) 44%,transparent);color:var(--h-emerald)}.wgpu-demo .wgpu-cell-vel{background:color-mix(in srgb,var(--h-purple) 18%,transparent);border:1px solid color-mix(in srgb,var(--h-purple) 44%,transparent);color:var(--h-purple)}.wgpu-demo .wgpu-cell-pad{background:color-mix(in srgb,var(--h-rose) 12%,transparent);border:1px solid color-mix(in srgb,var(--h-rose) 30%,transparent);color:var(--h-rose);font-size:.6rem}.wgpu-demo .wgpu-field-legend{display:flex;flex-wrap:wrap;gap:var(--s-4);font-size:var(--t-xs)}.wgpu-demo .wgpu-legend-item{display:flex;align-items:center;gap:6px;color:var(--text-mut)}.wgpu-demo .wgpu-legend-dot{width:12px;height:12px;border-radius:var(--radius-xs)}.wgpu-demo .wgpu-error-box{padding:var(--s-3) var(--s-4);background:color-mix(in srgb,var(--err) 10%,transparent);border:1px solid color-mix(in srgb,var(--err) 30%,transparent);border-radius:var(--radius-md);font-size:var(--t-xs);color:var(--err)}.wgpu-demo .wgpu-ok-box{padding:var(--s-3) var(--s-4);background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);border-radius:var(--radius-md);font-size:var(--t-xs);color:var(--ok)}.wgpu-demo .wgpu-memory-block code{padding:.1rem .3rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:.86em;color:var(--accent-hi)}.strata .wgpu-demo .tabs.wgpu-code-tabs{gap:2px;margin-bottom:var(--s-4)}.strata .wgpu-demo .tabs.wgpu-code-tabs .tab-btn{min-height:0;padding:9px 13px;background:none;border:0;border-radius:0;color:var(--text-mut);transform:none}.strata .wgpu-demo .tabs.wgpu-code-tabs .tab-btn:hover{background:none;border:0;color:var(--text-hi);transform:none}.strata .wgpu-demo .tabs.wgpu-code-tabs .tab-btn.active{background:none;border:0;color:var(--text-hi);font-weight:500;transform:none}.wgpu-demo .wgpu-code-panel{max-height:420px;padding:var(--s-4);background:var(--inset);border:1px solid var(--line);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--t-xs);line-height:1.75;white-space:pre-wrap;word-break:break-word;overflow:auto}.wgpu-demo .wgpu-code-panel .comment{color:var(--text-faint);font-style:italic}.wgpu-demo .wgpu-code-panel .keyword{color:var(--h-purple)}.wgpu-demo .wgpu-code-panel .string{color:var(--ok)}.wgpu-demo .wgpu-code-panel .number,.wgpu-demo .wgpu-code-panel .type{color:var(--h-amber)}.wgpu-demo .wgpu-code-panel .func{color:var(--h-cyan)}.strata .wgpu-demo .wgpu-code-panel .tag{display:inline;height:auto;padding:0;background:none;border:0;border-radius:0;color:var(--h-emerald);font-family:var(--font-mono);font-size:inherit;white-space:normal}.strata .wgpu-demo .wgpu-code-panel .error-line{display:block;margin:0 -4px;padding:0 4px;background:color-mix(in srgb,var(--err) 15%,transparent);border-radius:var(--radius-xs)}.strata .wgpu-demo .wgpu-code-panel .warn-line{display:block;margin:0 -4px;padding:0 4px;background:color-mix(in srgb,var(--warn) 15%,transparent);border-radius:var(--radius-xs)}.strata .wgpu-demo .wgpu-code-panel .good-line{display:block;margin:0 -4px;padding:0 4px;background:color-mix(in srgb,var(--ok) 12%,transparent);border-radius:var(--radius-xs)}.wgpu-demo .wgpu-chart-container{position:relative;height:320px;padding:var(--s-5);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-lg)}.wgpu-demo .wgpu-chart-canvas{width:100%;height:100%}.wgpu-demo .conclusion-cell h3{display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-md);font-weight:600;color:var(--text-hi)}.wgpu-demo .conclusion-cell p{font-size:var(--t-sm);line-height:1.8;color:var(--text-mut)}.wgpu-demo .conclusion-cell p strong{color:var(--text-hi);font-weight:600}.wgpu-demo .wgpu-icon{width:8px;height:8px;flex:0 0 auto;border-radius:var(--radius-pill);background:var(--hue, var(--accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--hue, var(--accent)) 18%,transparent)}.wgpu-demo .wgpu-tooltip{position:absolute;display:none;z-index:var(--z-tooltip);max-width:220px;padding:var(--s-2) var(--s-3);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);font-family:var(--font-mono);font-size:var(--t-micro);color:var(--text-hi);pointer-events:none}.wgpu-demo button:focus-visible,.wgpu-demo input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.related-link{display:block;color:inherit;text-decoration:none}.related-link:hover{color:inherit}.related-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-lg)}.related-link .card{height:100%}.related-hint{font-size:var(--t-sm);color:var(--text-mut)}