.gpu-viewport{z-index:1;touch-action:pan-y;position:absolute;inset:0}.gpu-viewport canvas{cursor:grab;outline:none;width:100%;height:100%;display:block;touch-action:none!important}.gpu-viewport canvas:active{cursor:grabbing}.gpu-viewport canvas:focus-visible{outline:2px solid var(--hp4-accent);outline-offset:-2px;border-radius:inherit}.gpu-viewport[data-status=loading] .gpu-render-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.gpu-loader{display:none}.gpu-viewport[data-status=unavailable]{pointer-events:none}.gpu-viewport[data-status=unavailable] canvas,.gpu-viewport[data-status=unavailable] .gpu-hotspot{display:none}.gpu-viewport[data-status=unavailable] .gpu-render-status{border:1px solid var(--hp4-line);background:var(--hp4-surface);max-width:calc(100% - 32px);box-shadow:var(--hp4-shadow);color:var(--hp4-ink-2);white-space:nowrap;pointer-events:auto;border-radius:999px;align-items:center;gap:10px;padding:6px 6px 6px 16px;font-size:13px;font-weight:500;display:flex;position:absolute;top:20px;left:50%;transform:translate(-50%)}.gpu-render-fallback strong{color:var(--hp4-ink);font-weight:600}.gpu-render-fallback p{color:var(--hp4-ink-2);text-wrap:nowrap;margin:0}.gpu-fallback-chip{display:none}@media (width<=760px){.gpu-viewport[data-status=unavailable] .gpu-render-status{white-space:normal;text-align:center;border-radius:20px;flex-wrap:wrap;justify-content:center;padding:10px 12px 10px 16px}.gpu-render-fallback p{text-wrap:pretty}}.gpu-render-status button{background:var(--hp4-ink);min-height:32px;font:inherit;color:var(--hp4-bg);cursor:pointer;border:0;border-radius:999px;padding:0 14px;font-weight:600}.gpu-hotspot{z-index:4;min-width:44px;min-height:44px;font:inherit;cursor:pointer;will-change:transform;visibility:hidden;opacity:0;background:0 0;border:0;justify-content:center;align-items:center;padding:8px;transition:opacity .2s,visibility 0s linear .2s;display:flex;position:absolute;top:0;left:0}.gpu-hotspot[data-shown]{visibility:visible;opacity:1;transition:opacity .36s var(--hp4-ease)}.gpu-hotspot>span:first-child{background:color-mix(in srgb, var(--hp4-surface) 88%, transparent);width:28px;height:28px;box-shadow:0 0 0 1px var(--hp4-line-strong), 0 2px 8px #1111141a;-webkit-backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;color:var(--hp4-ink);transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .3s var(--hp4-ease);border-radius:50%;place-items:center;font-size:11px;font-weight:600;display:grid}.gpu-hotspot:hover>span:first-child{transform:scale(1.08)}.gpu-hotspot.is-selected>span:first-child{background:var(--hp4-accent);color:var(--hp4-accent-ink);box-shadow:0 0 0 5px color-mix(in srgb, var(--hp4-accent) 22%, transparent), 0 2px 8px #1111141f}.gpu-hotspot-label{background:var(--hp4-surface);box-shadow:0 0 0 1px var(--hp4-line), var(--hp4-shadow);letter-spacing:-.005em;color:var(--hp4-ink);white-space:nowrap;opacity:0;transition:opacity .2s ease, transform .3s var(--hp4-ease);pointer-events:none;border-radius:999px;padding:5px 10px;font-size:12.5px;font-weight:600;position:absolute;top:50%;left:44px;transform:translate(-4px,-50%)}.gpu-hotspot:focus-visible .gpu-hotspot-label,.gpu-hotspot:hover .gpu-hotspot-label,.gpu-hotspot.is-selected .gpu-hotspot-label{opacity:1;transform:translateY(-50%)}.gpu-hotspot[data-side=left] .gpu-hotspot-label{left:auto;right:44px;transform:translate(4px,-50%)}.gpu-hotspot[data-side=left]:is(:focus-visible,:hover,.is-selected) .gpu-hotspot-label{transform:translateY(-50%)}.gpu-hotspot[data-side=below] .gpu-hotspot-label{top:100%;left:50%;transform:translate(-50%,-8px)}.gpu-hotspot[data-side=below]:is(:focus-visible,:hover,.is-selected) .gpu-hotspot-label{transform:translate(-50%,-4px)}.gpu-hotspot[data-side=above] .gpu-hotspot-label{top:auto;bottom:100%;left:50%;transform:translate(-50%,8px)}.gpu-hotspot[data-side=above]:is(:focus-visible,:hover,.is-selected) .gpu-hotspot-label{transform:translate(-50%,4px)}.gpu-viewport[data-moving] .gpu-hotspot.is-selected:not(:hover,:focus-visible) .gpu-hotspot-label{opacity:0;transition:none}.gpu-hotspot:focus-visible{outline:none}.gpu-hotspot:focus-visible>span:first-child{box-shadow:0 0 0 2px var(--hp4-bg), 0 0 0 4px var(--hp4-accent)}.hp4[data-theme=dark] .gpu-hotspot>span:first-child{box-shadow:0 0 0 1px var(--hp4-line-strong), 0 2px 10px #00000080}@media (hover:none){.gpu-hotspot-label{display:none}.gpu-hotspot.is-selected .gpu-hotspot-label{display:block}}@media (prefers-reduced-motion:reduce){.gpu-hotspot,.gpu-hotspot[data-shown],.gpu-hotspot>span:first-child,.gpu-hotspot-label{transition:none}}html[data-hp4]:not([data-hp4-classic],[data-hp4-app]) .gpu-hotspot.is-selected>span:first-child{background:var(--hp4-btn-fill);color:var(--hp4-btn-ink);box-shadow:0 0 0 2px var(--hp4-surface), 0 0 0 6px color-mix(in srgb, var(--hp4-ink) 12%, transparent), 0 2px 8px #1111141f}html[data-hp4]:not([data-hp4-classic],[data-hp4-app]) .gpu-hotspot:focus-visible>span:first-child{box-shadow:0 0 0 2px var(--hp4-bg), 0 0 0 4px var(--hp4-accent)}html[data-hp4]:not([data-hp4-classic],[data-hp4-app]) .gpu-hotspot-label{box-shadow:var(--hp4-shadow);border-radius:6px}html[data-hp4][data-theme=dark]:not([data-hp4-classic],[data-hp4-app]) .gpu-hotspot-label{box-shadow:0 0 0 1px var(--hp4-line), var(--hp4-shadow)}html[data-hp4]:not([data-hp4-classic],[data-hp4-app]) .gpu-viewport[data-status=unavailable] .gpu-render-status{border:0;border-radius:8px}html[data-hp4]:not([data-hp4-classic],[data-hp4-app]) .gpu-render-status button{border-radius:var(--hp4-btn-radius,5px);background:var(--hp4-btn-fill);color:var(--hp4-btn-ink)}