.nightshade-viewport {
position: absolute;
inset: 0;
}
.nightshade-viewport-canvas {
display: block;
width: 100%;
height: 100%;
touch-action: none;
cursor: grab;
}
.nightshade-viewport-canvas.grabbing {
cursor: grabbing;
}
.nightshade-loader-overlay {
position: absolute;
inset: 0;
z-index: 180;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--nightshade-bg) 70%, transparent);
backdrop-filter: blur(4px);
pointer-events: none;
}
.nightshade-loader-card {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
border: 1px solid var(--nightshade-panel-border);
border-radius: 12px;
background: var(--nightshade-panel);
box-shadow: var(--nightshade-shadow);
}
.nightshade-webgpu-gate {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
text-align: center;
color: var(--nightshade-text-dim);
}
.nightshade-webgpu-gate-card {
max-width: 440px;
}
.nightshade-webgpu-gate-card h1 {
margin: 0 0 8px;
font-size: 16px;
color: var(--nightshade-text);
}
.nightshade-selected-card {
display: flex;
flex-direction: column;
gap: 4px;
}
.nightshade-selected-row {
display: flex;
justify-content: space-between;
gap: 16px;
}
.nightshade-selected-row .key {
color: var(--nightshade-text-dim);
}
.nightshade-viewport-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
}
.nightshade-hud {
position: absolute;
pointer-events: auto;
}
.nightshade-nav-gizmo {
display: block;
cursor: pointer;
}
.nightshade-gizmo-line {
stroke: var(--nightshade-text-dim);
stroke-width: 1.5;
}
.nightshade-gizmo-axis.x {
fill: #f87171;
}
.nightshade-gizmo-axis.y {
fill: #4ade80;
}
.nightshade-gizmo-axis.z {
fill: #60a5fa;
}
.nightshade-gizmo-axis.neg {
fill: var(--nightshade-panel);
stroke: var(--nightshade-text-dim);
stroke-width: 1.5;
}
.nightshade-gizmo-label {
fill: var(--nightshade-bg);
font-size: 9px;
font-weight: 700;
font-family: var(--nightshade-font);
}