:root{--bg: #0d0f14;--card-bg: rgba(16, 18, 25, .78);--card-border: rgba(255, 255, 255, .07);--card-highlight: rgba(255, 255, 255, .04);--divider: rgba(255, 255, 255, .06);--control-bg: rgba(255, 255, 255, .045);--control-hover: rgba(255, 255, 255, .08);--text: #e8eaf0;--text-2: #a3a9b8;--text-3: #6c7385;--accent: #7c86ff;--accent-soft: rgba(124, 134, 255, .16);--track: rgba(255, 255, 255, .1);--axis-x: #ff6b6b;--axis-y: #69db7c;--axis-z: #4dabf7;--space-local: #63e6be;--space-world: #ced4da;--space-view: #ffc857;--space-clip: #e599f7;--space-ndc: #a5b4fc;--pass: #69db7c;--fail: #ff6b6b;--radius: 12px;--radius-sm: 7px;--gap: 12px;--side-width: clamp(260px, 22vw, 336px);--mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:13px;line-height:1.4;background-color:var(--bg);color:var(--text);overflow:hidden;width:100vw;height:100vh;-webkit-font-smoothing:antialiased}button,input,output{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}#canvas-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}#ui-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;display:grid;grid-template-columns:var(--side-width) minmax(0,1fr) var(--side-width);grid-template-rows:minmax(0,1fr) auto;gap:var(--gap);padding:var(--gap)}.column{display:flex;flex-direction:column;gap:var(--gap);min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.column-left{grid-column:1;grid-row:1}.column-right{grid-column:3;grid-row:1}.card{pointer-events:auto;flex-shrink:0;background:var(--card-bg);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:inset 0 1px 0 var(--card-highlight),0 10px 30px #00000059;padding:14px;display:flex;flex-direction:column;gap:10px}.card[hidden]{display:none}.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}.card h2{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}.card-head.with-divider{padding-top:12px;border-top:1px solid var(--divider)}.intro{display:flex;flex-direction:column;gap:3px}.intro .eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}.intro h1{font-size:16px;font-weight:650;letter-spacing:-.01em}.intro p{font-size:12px;color:var(--text-2)}sup{font-size:.7em;line-height:0;vertical-align:.5em}.caption{font-size:11.5px;line-height:1.45;color:var(--text-3)}.ghost-button{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--card-border);border-radius:var(--radius-sm);background:var(--control-bg);color:var(--text-2);font-size:12px;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease}.ghost-button:hover{background:var(--control-hover);color:var(--text)}.ghost-button svg{width:13px;height:13px}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border-radius:9px;background:#00000040;border:1px solid var(--card-border)}.segmented button{height:28px;border:none;border-radius:6px;background:transparent;color:var(--text-2);font-size:12px;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease}.segmented button:hover{color:var(--text)}.segmented button[aria-pressed=true]{background:#ffffff1a;color:#fff;box-shadow:0 1px 2px #0000004d}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer;--fill: 0%;--fill-color: rgba(255, 255, 255, .35)}input[type=range]:disabled{cursor:not-allowed}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--fill-color) var(--fill),var(--track) var(--fill))}input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--track)}input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--fill-color)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#fff;border:none;box-shadow:0 0 0 3px #00000040,0 1px 3px #00000080;transition:transform .12s ease}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;box-shadow:0 0 0 3px #00000040,0 1px 3px #00000080;transition:transform .12s ease}input[type=range]:not(:disabled):hover::-webkit-slider-thumb,input[type=range]:not(:disabled):active::-webkit-slider-thumb{transform:scale(1.15)}input[type=range]:not(:disabled):hover::-moz-range-thumb,input[type=range]:not(:disabled):active::-moz-range-thumb{transform:scale(1.15)}.pose{display:grid;gap:2px}.pose-group-label{margin-top:6px;font-size:11px;font-weight:600;color:var(--text-2)}.pose-group-label:first-child{margin-top:0}.pose-row{display:grid;grid-template-columns:14px minmax(0,1fr) 40px;align-items:center;gap:10px;height:22px;transition:opacity .15s ease}.pose.wide-labels .pose-row{grid-template-columns:24px minmax(0,1fr) 40px}.pose-row:has(input:disabled){opacity:.35}.axis-label{font-family:var(--mono);font-size:12px;font-weight:600;text-align:center;color:var(--text-2)}.pose-row output{font-family:var(--mono);font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}.axis-x{color:var(--axis-x)}.axis-y{color:var(--axis-y)}.axis-z{color:var(--axis-z)}.pose-row input.axis-fill-x{--fill-color: color-mix(in srgb, var(--axis-x) 70%, transparent)}.pose-row input.axis-fill-y{--fill-color: color-mix(in srgb, var(--axis-y) 70%, transparent)}.pose-row input.axis-fill-z{--fill-color: color-mix(in srgb, var(--axis-z) 70%, transparent)}.check-details summary{list-style:none;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2);cursor:pointer}.check-details summary::-webkit-details-marker{display:none}.check-details summary:before{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}.check-details[open] summary:before{transform:rotate(45deg)}.check-details summary:hover{color:var(--text)}.check-results{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:8px}.check-results li{display:grid;grid-template-columns:14px 1fr;gap:8px;font-size:11.5px;line-height:1.4;color:var(--text-2)}.check-results li:before{font-weight:700}.check-results li.pass:before{content:"✓";color:var(--pass)}.check-results li.fail:before{content:"✕";color:var(--fail)}.check-results .detail{color:var(--text-3)}.check-results li.group{display:block;margin-top:4px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}.check-results li.group:first-child{margin-top:0}#checks-summary.pass{color:var(--pass)}#checks-summary.fail{color:var(--fail)}.pip-viewport{position:relative;width:100%;aspect-ratio:4 / 3;border-radius:8px;overflow:hidden;background:#11131a;box-shadow:inset 0 0 0 1px #ffffff14}.pip-viewport canvas{display:block;width:100%;height:100%}.chips{display:flex;gap:6px}.chip{flex:1;position:relative}.chip input{position:absolute;opacity:0;pointer-events:none}.chip label{display:flex;align-items:center;justify-content:center;gap:6px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--card-border);background:var(--control-bg);color:var(--text-2);font-size:12px;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.chip label:hover{background:var(--control-hover);color:var(--text)}.chip input:checked+label{border-color:#ffffff38;background:#ffffff1a;color:#fff}.chip input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}.chip .swatch{width:8px;height:8px;border-radius:50%}.coords{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.coords th,.coords td{padding:5px 0;border-bottom:1px solid var(--divider)}.coords tbody tr:last-child th,.coords tbody tr:last-child td{border-bottom:none}.coords thead th{font-family:var(--mono);font-size:11px;font-weight:600;text-align:right;padding-top:0}.coords tbody th{text-align:left;font-weight:500;color:var(--text-2);white-space:nowrap}.coords .math{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--text-3)}.coords td{padding-left:6px;font-family:var(--mono);font-size:11.5px;text-align:right}.coords tr{transition:opacity .15s ease}.coords tr.dim{opacity:.38}.coords tr.current td{color:#fff;font-weight:600}.coords tr#coord-local{--space-color: var(--space-local)}.coords tr#coord-world{--space-color: var(--space-world)}.coords tr#coord-view{--space-color: var(--space-view)}.coords tr#coord-clip{--space-color: var(--space-clip)}.coords tr#coord-ndc{--space-color: var(--space-ndc)}.coords tr.here,.coords tr.between{opacity:1}.coords tr.here th,.coords tr.between th{color:var(--space-color);box-shadow:inset 3px 0 0 var(--space-color);padding-left:8px}.coords tr.here{background:color-mix(in srgb,var(--space-color) 10%,transparent)}.coords tr.between th{box-shadow:inset 3px 0 color-mix(in srgb,var(--space-color) 50%,transparent)}.pipeline{grid-column:2;grid-row:1;align-self:start;justify-self:center;width:min(100%,600px);max-width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;padding:8px 12px}.pipeline-eq{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13px}.pipe-term{color:var(--text-2)}.pipe-op{color:var(--text-3)}.pipe-note{margin-left:6px;font-size:11.5px;color:var(--text-3)}.pipe-stage{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:64px;padding:4px 8px;border:1px solid var(--card-border);border-radius:var(--radius-sm);background:var(--control-bg);color:var(--text-2);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.pipe-stage:hover{background:var(--control-hover);color:var(--text)}.pipe-stage[aria-pressed=true]{border-color:#7c86ff99;background:var(--accent-soft);color:#fff}.pipe-symbol{font-family:var(--mono);font-size:15px;font-weight:700;line-height:1.2}.pipe-name{font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:10.5px;color:var(--text-3)}.pipe-stage[aria-pressed=true] .pipe-name{color:var(--text-2)}.space-track{--inset: 26px;order:2;position:relative;flex-basis:100%;height:26px;margin:2px 4px 0}.space-rail{position:absolute;left:var(--inset);right:var(--inset);top:50%;height:2px;transform:translateY(-50%);background:var(--track);border-radius:1px}.space-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to left,var(--space-local),var(--space-world) 25%,var(--space-view) 50%,var(--space-clip) 75%,var(--space-ndc));clip-path:inset(0 0 0 calc(100% * var(--along, 1)));border-radius:1px}.space-here{position:absolute;top:50%;left:calc(100% * var(--along, 1));width:10px;height:10px;border-radius:50%;background:var(--space-color, #fff);box-shadow:0 0 0 3px #0d0f14e6,0 0 10px var(--space-color, #fff);transform:translate(-50%,-50%);z-index:2}.space-node,.space-edge{position:absolute;top:50%;left:calc(var(--inset) + (100% - 2 * var(--inset)) * var(--at));transform:translate(-50%,-50%);z-index:1}.space-node{padding:2px 8px;border:1px solid var(--card-border);border-radius:999px;background:#151821;color:var(--text-3);font:600 11px system-ui,-apple-system,Segoe UI,sans-serif;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.space-node[data-space=local]{--space-color: var(--space-local)}.space-node[data-space=world]{--space-color: var(--space-world)}.space-node[data-space=view]{--space-color: var(--space-view)}.space-node[data-space=clip]{--space-color: var(--space-clip)}.space-node[data-space=ndc]{--space-color: var(--space-ndc)}.space-node:hover{color:var(--text);border-color:var(--space-color)}.space-node.passed{color:var(--space-color)}.space-node.here{color:#11131a;background:var(--space-color);border-color:var(--space-color);box-shadow:0 0 12px color-mix(in srgb,var(--space-color) 55%,transparent)}.space-track:has(.space-node.here) .space-here{opacity:0}.space-edge{padding:0 4px;background:#151821;color:var(--text-3);font-family:var(--mono);font-size:10.5px;border-radius:4px}.space-edge.active{color:var(--text);box-shadow:inset 0 0 0 1px #7c86ff80}.space-status{order:3;flex-basis:100%;text-align:center;font-size:11.5px;color:var(--text-2)}.toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);cursor:pointer;position:relative}.toggle input{position:absolute;opacity:0;width:1px;height:1px}.toggle-track{position:relative;flex:none;width:28px;height:16px;border-radius:999px;background:var(--track);transition:background .15s ease}.toggle-track:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--text-2);transition:transform .15s ease,background .15s ease}.toggle input:checked+.toggle-track{background:var(--accent)}.toggle input:checked+.toggle-track:after{transform:translate(12px);background:#fff}.toggle input:focus-visible+.toggle-track{outline:2px solid var(--accent);outline-offset:2px}#btn-play-all[aria-pressed=true]{border-color:#7c86ff99;color:#fff}.dock{grid-column:1 / -1;grid-row:2;justify-self:center;width:min(100%,1320px);flex-direction:row;align-items:stretch;gap:18px;padding:12px 14px}.timeline-block{flex:1 1 300px;min-width:260px;display:flex;flex-direction:column;justify-content:center;gap:8px}.timeline-head{display:flex;align-items:center;gap:12px}.play-button{flex-shrink:0;display:grid;place-items:center;width:34px;height:34px;border:none;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 4px 14px #7c86ff59;transition:transform .12s ease,filter .15s ease}.play-button:hover{filter:brightness(1.12)}.play-button:active{transform:scale(.95)}.play-button svg{width:14px;height:14px}.play-button .icon-pause,.play-button.playing .icon-play{display:none}.play-button.playing .icon-pause{display:block}.stage-text{flex:1;min-width:0}.stage-title{font-size:14px;font-weight:600}.stage-detail{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:1600px){.stage-detail{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.35;min-height:2.7em}}.t-value{font-family:var(--mono);font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}.timeline{position:relative}.timeline-marks{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.timeline-mark{position:absolute;top:50%;width:2px;height:12px;transform:translate(-50%,-50%);border-radius:1px;background:#ffffff59}.timeline input[type=range]{--fill-color: var(--accent);height:22px}.timeline input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px}.timeline input[type=range]::-moz-range-track,.timeline input[type=range]::-moz-range-progress{height:6px;border-radius:3px}.timeline input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6px;box-shadow:0 0 0 4px #7c86ff4d,0 2px 6px #00000080}.timeline input[type=range]::-moz-range-thumb{width:18px;height:18px;box-shadow:0 0 0 4px #7c86ff4d,0 2px 6px #00000080}.timeline-labels{position:relative;height:16px;font-size:11px;color:var(--text-3)}.timeline-labels span{position:absolute;top:0;white-space:nowrap;transition:color .15s ease}.timeline-labels span.active{color:var(--text);font-weight:600}.matrix-strip{flex:0 1 auto;display:grid;grid-template-columns:repeat(var(--cards, 3),minmax(160px,1fr));gap:10px}.matrix-card{display:flex;flex-direction:column;gap:5px;padding:8px 10px;border-radius:9px;background:#00000038;border:1px solid var(--card-border)}.matrix-card.current{border-color:#7c86ff73;background:var(--accent-soft)}.matrix-head{display:flex;align-items:baseline;gap:8px}.matrix-symbol{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--text)}.matrix-desc{font-size:11px;color:var(--text-3)}.badge{margin-left:auto;padding:1px 7px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:700;white-space:nowrap}.matrix{position:relative;align-self:center;width:fit-content;display:grid;grid-template-columns:repeat(4,auto);gap:1px 14px;padding:3px 10px;font-family:var(--mono);font-size:11.5px;line-height:1.4;text-align:right;font-variant-numeric:tabular-nums}.matrix:before,.matrix:after{content:"";position:absolute;top:0;bottom:0;width:5px;border:1.5px solid var(--text-3)}.matrix:before{left:0;border-right:none;border-radius:3px 0 0 3px}.matrix:after{right:0;border-left:none;border-radius:0 3px 3px 0}.matrix-foot{font-size:10.5px;color:var(--text-3)}.cell.axis-x{color:var(--axis-x)}.cell.axis-y{color:var(--axis-y)}.cell.axis-z{color:var(--axis-z)}.cell.translation{color:#fff;font-weight:600}.cell.muted{color:var(--text-3)}@media(max-width:1180px){.dock{flex-wrap:wrap;gap:12px}.timeline-block{flex-basis:100%}.matrix-strip{flex:1 1 100%;grid-template-columns:repeat(var(--cards, 3),minmax(0,1fr))}.matrix{font-size:11px;gap:1px 11px}}@media(max-width:760px){#ui-container{pointer-events:auto;overflow-y:auto;display:flex;flex-direction:column}.column,.dock{flex-shrink:0;overflow:visible}.dock{width:100%}.pip-viewport{max-width:420px;align-self:center}.space-edge{display:none}.column-left{margin-top:46vh}.matrix-strip{grid-template-columns:minmax(0,1fr)}.pipeline-eq{flex-wrap:wrap;justify-content:center}}@media(max-height:900px)and (min-width:761px){.column .caption:not(#checks-summary),.intro p:not(.eyebrow){display:none}.card{padding:11px 12px;gap:8px}.pose-row{height:19px}.pose-group-label{margin-top:2px}.coords th,.coords td{padding:3px 0}.coords td{padding-left:6px}.pip-viewport{aspect-ratio:16 / 10}}.stage-in{animation:stage-in .3s ease-out both}@keyframes stage-in{0%{opacity:.2}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}