.gpu-visual{margin-top:10px;overflow:hidden}.gpu-visual svg{display:block;width:100%;height:auto;aspect-ratio:260/120;image-rendering:pixelated}.gpu-video-visual{position:relative;aspect-ratio:1664/1024;overflow:hidden;background:#f7f6f8;line-height:0}.gpu-video-visual video{display:block;width:100%;height:auto;background:#f7f6f8}.gpu-frame{fill:var(--rule)}.gpu-board{fill:#101312}.gpu-board-dot{fill:#1b201c}.gpu-edge{fill:#343a34}.gpu-fan-ring{fill:none;stroke:#2c322c;stroke-width:4;stroke-dasharray:4 3}.gpu-fan-blade{fill:#666d62;transform-box:fill-box;transform-origin:center;animation:fan-spin var(--speed,1.1s) steps(18) infinite}.gpu-fan-hub{fill:#161a17;stroke:#4b5248;stroke-width:2}.gpu-die-bg{fill:#171b17}.gpu-die-cell{fill:rgba(204,255,0,.075);transition:opacity .6s,fill .8s}.gpu-die-cell.active{fill:var(--accent);animation:die-breathe 2.4s ease-in-out infinite alternate}.gpu-scan{fill:var(--accent2);opacity:.2;animation:die-scan 2.4s steps(12) infinite}.gpu-memory{fill:#8b9285}.gpu-spark{fill:var(--accent);animation:spark 1.7s steps(2) infinite}.util-row{display:flex;justify-content:space-between;margin-top:8px;color:var(--faint);font:10px var(--mono)}.util-row b{color:var(--ink);font-weight:400}.util-track{height:1px;margin-top:5px;background:var(--paper3)}.util-track i{display:block;width:0;height:100%;background:var(--accent);box-shadow:0 0 8px rgba(204,255,0,.5);animation:util-fill 1s .2s ease-out forwards}.gpu-card dl{margin-top:8px!important;padding:8px 0 5px!important;border-top:0!important}.gpu-task{overflow:hidden;margin:2px 0 7px;color:var(--muted);font:9px var(--mono);white-space:nowrap;text-overflow:ellipsis}.gpu-card .card-foot{height:22px;padding-top:6px;border-top:1px solid var(--rule);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:8px}.gpu-card .card-foot b{color:var(--accent);font-weight:400}
@keyframes fan-spin{to{transform:rotate(360deg)}}@keyframes die-scan{from{transform:translateX(0)}to{transform:translateX(60px)}}@keyframes die-breathe{from{opacity:.54}to{opacity:.98}}@keyframes util-fill{to{width:var(--util)}}@keyframes spark{50%{opacity:.18}}
@media(prefers-reduced-motion:reduce){.gpu-fan-blade,.gpu-die-cell.active,.gpu-scan,.gpu-spark,.util-track i{animation:none!important}.util-track i{width:var(--util)}}

.gpu-visual{position:relative;isolation:isolate;cursor:crosshair}.gpu-visual>svg,.gpu-visual>video,.gpu-visual>img{position:relative;z-index:1}.gpu-particle-layer{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}.gpu-visual::after{content:"MOVE TO SCAN";position:absolute;z-index:4;right:7px;bottom:6px;padding:3px 5px;background:#111b;color:#ccff00;font:6px var(--mono);letter-spacing:.1em;opacity:0;transform:translateY(4px);transition:.2s}.gpu-visual:hover::after{opacity:.8;transform:none}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.gpu-visual{cursor:default}.gpu-particle-layer{display:none}.gpu-visual::after{display:none}}

.gpu-showcase{margin-bottom:12px;overflow:hidden}.gpu-showcase-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:16px 17px;border-bottom:1px solid var(--rule)}.gpu-showcase-head strong{display:block;margin-top:4px;font-size:13px}.render-tabs{display:flex;gap:4px;padding:3px;border:1px solid var(--rule);border-radius:8px;background:#080a09}.render-tabs button{border:0;border-radius:5px;padding:7px 10px;background:transparent;color:var(--faint);font:8px var(--mono);cursor:pointer;transition:.2s}.render-tabs button:hover{color:var(--ink)}.render-tabs button.active{background:#20251f;color:var(--accent);box-shadow:inset 0 0 0 1px #343b32}.gpu-stage{position:relative;aspect-ratio:16/8.2;min-height:270px;overflow:hidden;background:#050706}.gpu-stage::before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.3),transparent 22%,transparent 78%,rgba(0,0,0,.3)),linear-gradient(0deg,rgba(0,0,0,.26),transparent 26%)}.gpu-stage::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background-image:linear-gradient(rgba(204,255,0,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(204,255,0,.028) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(transparent,#000 45%,transparent)}.gpu-cinematic,.gpu-realtime{position:absolute;inset:0}.gpu-cinematic video,.gpu-realtime canvas{display:block;width:100%;height:100%;object-fit:cover}.gpu-cinematic video{filter:saturate(.92) contrast(1.05)}.gpu-realtime{background:radial-gradient(circle at 54% 44%,#1b211c 0,#090c0a 45%,#030403 77%);cursor:grab;touch-action:none}.gpu-realtime:active{cursor:grabbing}.gpu-realtime canvas{position:relative;z-index:1}.stage-tag{position:absolute;z-index:4;left:15px;bottom:13px;padding:5px 7px;border:1px solid #343a34;background:#080a09cc;color:var(--muted);font:7px var(--mono);letter-spacing:.08em}.stage-hud{position:absolute;z-index:4;left:15px;right:15px;top:13px;display:flex;justify-content:space-between;color:#9fa59a;font:8px var(--mono);letter-spacing:.08em}.stage-hud b{color:var(--accent);font-weight:500;text-shadow:0 0 9px #ccff0099}.load-meter{position:absolute;z-index:4;right:15px;bottom:13px;display:grid;grid-template-columns:auto 80px auto;align-items:center;gap:8px;color:var(--muted);font:7px var(--mono)}.load-meter i{height:3px;background:#293028}.load-meter b{display:block;width:62%;height:100%;background:var(--accent);box-shadow:0 0 9px #ccff00}.load-meter em{font-style:normal;color:var(--accent)}.gpu-showcase-notes{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:11px 17px;border-top:1px solid var(--rule);font:8px/1.5 var(--mono);color:var(--muted)}.gpu-showcase-notes p{margin:0}.gpu-showcase-notes p b{margin-right:7px;color:var(--accent)}.gpu-showcase-notes>span{white-space:nowrap;color:var(--faint)}
@media(max-width:640px){.gpu-showcase-head{align-items:stretch;flex-direction:column}.render-tabs{align-self:stretch}.render-tabs button{flex:1}.gpu-stage{aspect-ratio:4/3;min-height:250px}.gpu-showcase-notes>span{display:none}.load-meter{grid-template-columns:auto 55px auto}}
