/* === 3D STAGE === */ .stage { position: relative; overflow: hidden; background: radial-gradient(ellipse at 30% 20%, rgba(0, 120, 212, 0.04) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(0, 120, 212, 0.03) 0%, transparent 60%), #f9fafb; } .stage::before { content: ''; position: absolute; inset: 0; opacity: 0.5; background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } #glCanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; z-index: 1; touch-action: none; } #glCanvas:active { cursor: grabbing; } .stage-top, .stage-bottom { position: absolute; left: 12px; right: 12px; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; } .stage-top { top: 10px; } .stage-bottom { bottom: 10px; } .model-tag { padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); color: var(--accent); font-size: 13px; } .metric { display: flex; align-items: baseline; gap: 3px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); color: var(--text-3); font-size: 12px; } .metric strong { color: var(--text); font-family: "Cascadia Code", monospace; font-size: 14px; } .view-help { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); color: var(--text-3); font-size: 12px; } .view-actions { display: flex; gap: 4px; pointer-events: auto; } .view-actions button { min-width: 30px; height: 28px; border: 1px solid var(--border); border-radius: 4px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); color: var(--text-2); font-size: 14px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .view-actions button:hover { border-color: var(--accent); color: var(--accent); } /* === BUSY === */ .busy { position: absolute; inset: 0; z-index: 8; display: none; place-items: center; background: rgba(243, 244, 246, 0.7); backdrop-filter: blur(4px); color: var(--accent); font-size: 14px; } .busy.show { display: grid; } .busy::before { content: ''; display: block; width: 32px; height: 32px; margin-bottom: 8px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }