:root{color-scheme:dark;--bg: #1a1a2e;--surface: #16213e;--surface-alt: #0f1528;--text: #e8e8e8;--muted: #9aa4bf;--primary: #4a90d9;--border: rgba(255, 255, 255, .08);--shadow: 0 12px 30px rgba(0, 0, 0, .35);--app: #4a90d9;--geom: #22c55e;--rast: #f59e0b;--pixel: #a855f7;--output: #ef4444}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:radial-gradient(circle at top left,#222c4d,var(--bg));color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#app{height:100vh;display:flex;flex-direction:column;gap:12px;padding:16px;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:12px 16px;border-radius:12px;background:linear-gradient(120deg,#4a90d933,#16213ee6);border:1px solid var(--border);box-shadow:var(--shadow)}.header-title h1{margin:0 0 2px;font-size:20px;letter-spacing:.5px}.header-title p{margin:0;color:var(--muted);font-size:14px}.header-actions{display:flex;gap:12px;align-items:center}.toggle-button{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:8px 16px;cursor:pointer;transition:transform .2s ease,border-color .2s ease}.toggle-button:hover{transform:translateY(-1px);border-color:#ffffff4d}.app-grid{display:grid;grid-template-columns:2.2fr 1fr;grid-template-rows:minmax(0,.8fr) minmax(0,.7fr) minmax(0,1fr);gap:12px;flex:1;min-height:0;overflow:hidden}#scene-container{grid-column:1 / 2;grid-row:1 / 2}#controls-container{grid-column:2 / 3;grid-row:1 / 2}#pipeline-container{grid-column:1 / 3;grid-row:2 / 3}#detail-container{grid-column:1 / 3;grid-row:3 / 4;overflow-y:auto}.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);overflow:hidden;min-height:0}.panel-header{font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:12px;color:var(--muted)}#scene-canvas{flex:1;border-radius:12px;background:var(--surface-alt);position:relative;overflow:hidden;min-height:0}#scene-canvas canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important}.webgl-fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:16px;color:var(--muted);font-size:12px}.webgl-fallback strong{color:var(--text);font-size:14px}.badge{padding:4px 8px;border-radius:999px;font-size:12px;background:#ffffff14}.matrix-grid{font-family:JetBrains Mono,Fira Code,monospace;font-size:12px;line-height:1.4;display:flex;flex-direction:column;gap:8px}.matrix-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.matrix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 8px}.matrix-cell{padding:2px 6px;border-radius:6px;background:#ffffff0a;text-align:right}.matrix-diff{color:#ef4444;background:#ef44441f}@media(max-width:1100px){#app{height:auto;min-height:100vh;overflow:auto}.app-grid{grid-template-columns:1fr;grid-template-rows:400px 200px auto auto;flex:none}#scene-container,#controls-container,#pipeline-container,#detail-container{grid-column:1 / 2}#scene-container{grid-row:1 / 2}#controls-container{grid-row:2 / 3}#pipeline-container{grid-row:3 / 4}#detail-container{grid-row:4 / 5}}.pipeline-wrapper{position:relative;display:flex;flex-direction:column;gap:8px;overflow:auto;padding-bottom:4px;min-height:0;flex:1}.pipeline-flow{display:grid;grid-template-columns:repeat(9,minmax(100px,1fr));gap:8px;align-items:start;position:relative;min-height:0}.pipeline-stage{background:#0f1528b3;border:1px solid var(--border);border-radius:10px;padding:0;display:flex;flex-direction:column;gap:0;position:relative;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.pipeline-stage:hover{transform:translateY(-2px)}.stage-title{font-weight:600;font-size:14px;margin:0}.stage-header{padding:6px 8px;border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:10px;letter-spacing:.3px;color:#0b1120;gap:4px;overflow:hidden}.stage-header span:first-child{white-space:nowrap;flex-shrink:0}.stage-header span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.stage-body{padding:6px 8px 8px;display:flex;flex-direction:column;gap:2px}.stage-title{font-weight:600;font-size:12px}.stage-title{font-weight:600;font-size:12px;margin:0}.stage-desc{color:var(--muted);font-size:11px;line-height:1.3}.stage-active{box-shadow:0 0 0 2px #4a90d999,0 0 18px #4a90d966;animation:stagePulse 1.6s ease-in-out infinite}.stage-application{border-left:4px solid var(--app)}.stage-geometry{border-left:4px solid var(--geom)}.stage-rasterization{border-left:4px solid var(--rast)}.stage-pixel{border-left:4px solid var(--pixel)}.stage-output{border-left:4px solid var(--output)}.stage-application .stage-header{background:var(--app)}.stage-geometry .stage-header{background:var(--geom)}.stage-rasterization .stage-header{background:var(--rast)}.stage-pixel .stage-header{background:var(--pixel)}.stage-output .stage-header{background:var(--output)}.pipeline-connector{height:2px;background:#fff3;position:relative}.pipeline-connector:after{content:"";position:absolute;right:-6px;top:50%;width:0;height:0;transform:translateY(-50%);border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid rgba(255,255,255,.4)}.data-flow,.pipeline-arrows{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.pipeline-arrow{position:absolute;height:2px;background:#fff3}.data-token{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--primary);animation:flow 6s linear infinite;animation-delay:var(--delay, 0s);top:50%;transform:translate(-10px,-50%)}@keyframes flow{0%{transform:translate(-10px,-50%);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translate(calc(100% - 10px),-50%);opacity:0}}@keyframes stagePulse{0%{box-shadow:0 0 0 2px #4a90d966,0 0 12px #4a90d933}50%{box-shadow:0 0 0 2px #4a90d9e6,0 0 22px #4a90d999}to{box-shadow:0 0 0 2px #4a90d966,0 0 12px #4a90d933}}.pipeline-detail{margin-top:12px;padding:12px;border-radius:12px;background:#080c1680;border:1px solid var(--border);overflow:auto;min-height:0;flex:1}.stage-panel{display:flex;flex-direction:column;gap:12px;overflow:auto;min-height:0}.stage-fallback{border:1px dashed var(--border);border-radius:12px;padding:16px;background:#080c1666;color:var(--muted);text-align:center;font-size:12px;line-height:1.5}.stage-fallback strong{display:block;color:var(--text);margin-bottom:6px}.scene-tree{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;color:var(--muted);font-size:12px}.object-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:8px}.object-card{background:#ffffff0a;border:1px solid var(--border);border-radius:10px;padding:8px;font-size:12px;color:var(--muted)}.object-name{font-weight:600;color:var(--text);margin-bottom:4px}.coordinate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.coordinate-card{background:#ffffff0a;border:1px solid var(--border);border-radius:10px;padding:8px}.coordinate-title{text-transform:uppercase;letter-spacing:.6px;font-size:11px;color:var(--muted)}.coordinate-value{font-family:JetBrains Mono,Fira Code,monospace;font-size:12px;margin-top:4px}.matrix-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.matrix-card{background:#ffffff08;border:1px solid var(--border);border-radius:12px;padding:8px}.matrix-title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:6px}.pipeline-split{display:grid;gap:12px}.pipeline-eye-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.buffer-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.buffer-wrap{display:flex;flex-direction:column;gap:6px}.buffer-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}.buffer-canvas{width:100%;height:auto;border-radius:8px;border:1px solid var(--border)}.output-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}.stage-section-title{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:8px}.pixel-journey{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pixel-step{background:#ffffff0a;border:1px solid var(--border);border-radius:10px;padding:8px 10px;flex:1;min-width:120px}.pixel-step-header{font-size:11px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.pixel-step-body{display:flex;align-items:center;gap:8px}.pixel-swatch{display:inline-block;width:20px;height:20px;border-radius:4px;flex-shrink:0}.pixel-value{font-family:JetBrains Mono,Fira Code,monospace;font-size:11px;color:var(--text)}.pixel-arrow{color:var(--muted);font-size:18px;flex-shrink:0}.shader-substages{display:grid;gap:8px;margin-top:10px}.shader-stage{display:flex;align-items:center;gap:10px}.shader-badge{padding:4px 10px;border-radius:999px;border:1px solid;font-size:11px;font-weight:600;white-space:nowrap}.shader-desc{font-size:12px;color:var(--muted)}.code-block{background:#080c16b3;border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:10px;font-family:JetBrains Mono,Fira Code,monospace;font-size:12px;line-height:1.6;overflow-x:auto;white-space:pre}.code-keyword{color:#c678dd}.code-func{color:#61afef}.code-number{color:#d19a66}.code-comment{color:#5c6370;font-style:italic}.pixel-info{background:#ffffff0a;border-radius:10px;padding:10px 12px;font-size:12px;color:var(--muted);margin-top:8px}.pixel-info strong{color:var(--text)}.pipeline-vr-wrapper{display:flex;flex-direction:column;gap:16px}.pipeline-eye-row{display:flex;flex-direction:column;gap:4px}.pipeline-eye-header{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;font-weight:600}.eye-dot{width:10px;height:10px;border-radius:50%}.eye-dot-left{background:var(--app)}.eye-dot-right{background:var(--output)}.stereo-views{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stereo-view-wrap{display:flex;flex-direction:column;gap:6px}.stereo-view-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}.stereo-canvas{width:100%;height:auto;border-radius:8px;border:1px solid var(--border)}.eye-matrices{display:grid;grid-template-columns:1fr 1fr;gap:16px}.eye-matrix-block{display:flex;flex-direction:column;gap:8px}.eye-matrix-label{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}.matrix-annotation{font-size:11px;color:var(--muted);padding:6px 10px;background:#ffffff0a;border-radius:8px;margin-top:6px}.optimization-card{background:#ffffff0a;border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:8px}.optimization-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.optimization-title{font-weight:600;font-size:14px}.optimization-desc{font-size:12px;color:var(--muted);line-height:1.5}.optimization-gain{font-size:12px;color:#3ad29f;font-weight:600;margin-top:6px}.foveated-diagram{display:flex;justify-content:center;margin:10px 0}.foveated-canvas{border-radius:8px;border:1px solid var(--border)}.info-button{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:#ffffff1a;color:#fff;font-size:11px;font-weight:700;font-style:italic;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background .2s}.info-button:hover{background:#ffffff40}.info-tooltip{position:absolute;top:100%;left:0;right:0;z-index:20;background:#080c16f2;border:1px solid var(--border);border-radius:12px;padding:12px;margin-top:4px}.info-panel-title{font-weight:600;font-size:13px;margin-bottom:6px}.info-panel-desc{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:8px}.info-panel-links{display:flex;flex-wrap:wrap;gap:8px}.info-link{font-size:11px;color:var(--primary);text-decoration:none;padding:3px 8px;border:1px solid var(--primary);border-radius:6px;transition:background .2s}.info-link:hover{background:#4a90d926}.info-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:2px 6px}.stereo-comparison-panel{display:flex;flex-direction:column;gap:12px}.stereo-mode-row{display:flex;gap:6px;flex-wrap:wrap}.stereo-mode-btn{font-size:11px;padding:4px 10px}.stereo-mode-btn.active{background:var(--primary);color:#fff}.stereo-composite{width:100%}.per-eye-matrix-panel{display:flex;flex-direction:column;gap:16px}.matrix-section-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;color:var(--text)}.matrix-highlight{background:#4a90d933!important;border:1px solid rgba(74,144,217,.5)}.matrix-diff{color:#f0a24b!important;font-weight:700}.matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.matrix-cell{font-family:JetBrains Mono,Fira Code,monospace;font-size:11px;text-align:center;padding:4px 2px;border-radius:4px;background:#ffffff08;color:var(--muted)}.matrix-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.matrix-grid{display:flex;flex-direction:column;gap:8px}.webxr-snippet{margin-top:8px}.webxr-snippet code{background:#ffffff0f;padding:1px 4px;border-radius:3px;font-size:11px}.multiview-diagram{margin:10px 0;overflow-x:auto}.multiview-flow{display:flex;align-items:center;gap:6px;font-size:11px}.multiview-block{padding:6px 10px;border-radius:8px;border:1px solid var(--border);white-space:nowrap}.multiview-block.shared{background:#4a90d926}.multiview-block.split{display:flex;flex-direction:column;gap:3px;background:#ffffff0a}.multiview-eye{padding:2px 6px;border-radius:4px;font-size:10px}.multiview-eye.left{background:#4a90d933}.multiview-eye.right{background:#e05a5a33}.multiview-arrow{color:var(--muted);font-size:16px}.toggle-label{font-size:12px;display:flex;align-items:center;gap:6px;cursor:pointer}.optimizations-wrapper{display:flex;flex-direction:column;gap:8px}.vr-controls{border-top:1px solid var(--border);padding-top:10px;margin-top:4px}.controls-grid{display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1;min-height:0}.control-group{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:10px;background:#080c1680;border:1px solid var(--border)}.control-title{font-weight:600;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}.control-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.control-row label{font-size:13px}.control-row input[type=range]{flex:1}.button-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.control-button{background:#ffffff14;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px;cursor:pointer}.control-button.active{background:var(--primary)}.toggle-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.value-pill{padding:2px 8px;border-radius:999px;background:#ffffff1a;font-size:12px}.performance-panel{display:flex;flex-direction:column;gap:6px}.performance-bar{height:8px;border-radius:999px;background:#ffffff1f;overflow:hidden}.performance-bar span{display:block;height:100%}