:root{--bg-base:#1e1e1e;--bg-panel:rgba(40, 40, 40, 0.92);--bg-section:#333333;--bg-input:#1a1a1a;--border-dark:#111111;--border-light:#444444;--text-main:#cccccc;--text-bright:#ffffff;--text-muted:#888888;--accent-blue:#4772b3;--accent-blue-hover:#5a8bd4;--accent-warning:#cc6633;--ui-radius:4px;--space-sm:4px;--space-md:8px;--space-lg:16px;--panel-width:clamp(340px, 25vw, 420px);--font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}body,html{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background-color:var(--bg-base);font-family:var(--font-ui);color:var(--text-main);font-size:13px;user-select:none}#app-wrapper{position:relative;width:100%;height:100%;overflow:hidden}#viewport{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;z-index:1}#glcanvas{display:block;width:100%;height:100%;cursor:grab}#glcanvas:active{cursor:grabbing}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;display:flex;justify-content:flex-end}#gimbal-hud,#panel,#toggle-panel{pointer-events:auto}#panel{width:var(--panel-width);height:100%;flex-shrink:0;background:var(--bg-panel);border-left:1px solid var(--border-dark);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4, 0, .2, 1);backdrop-filter:blur(8px)}.panel-hidden #panel{transform:translateX(100%)}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-lg);background:var(--bg-section);border-bottom:1px solid var(--border-dark)}.panel-header h2{margin:0;font-size:14px;font-weight:600;color:var(--text-bright)}.panel-content{overflow-y:auto;overflow-x:hidden;flex-grow:1}.panel-content::-webkit-scrollbar{width:var(--space-md)}.panel-content::-webkit-scrollbar-track{background:var(--bg-panel)}.panel-content::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:var(--ui-radius)}.inspector-section{border-bottom:1px solid var(--border-dark)}.inspector-section summary{padding:var(--space-md) var(--space-lg);background:var(--bg-section);font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;font-size:12px;color:var(--text-bright)}.inspector-section summary::before{content:"▶";font-size:10px;margin-right:var(--space-md);color:var(--text-muted);transition:transform .2s ease}.inspector-section[open] summary::before{transform:rotate(90deg)}.section-body{padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}.prop-row{display:flex;align-items:center;justify-content:space-between;min-height:28px;gap:var(--space-md)}.prop-row label{flex:1 1 auto;color:var(--text-main);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.prop-control{flex:0 1 65%;display:flex;align-items:center;gap:var(--space-md)}.val-display{width:38px;text-align:center;font-family:monospace;color:var(--text-bright);background:var(--bg-input);padding:var(--space-sm);border:1px solid var(--border-dark);border-radius:var(--ui-radius);font-size:11px}input[type=range]{-webkit-appearance:none;flex-grow:1;height:4px;background:var(--bg-input);border:1px solid var(--border-dark);border-radius:2px;outline:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--text-muted);border-radius:50%;cursor:ew-resize;transition:background .1s}input[type=range]::-webkit-slider-thumb:hover{background:var(--text-bright)}input[type=color]{-webkit-appearance:none;border:1px solid var(--border-dark);width:100%;height:24px;padding:0;border-radius:var(--ui-radius);cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.btn-tool{background:var(--bg-section);color:var(--text-bright);border:1px solid var(--border-light);padding:var(--space-sm) var(--space-lg);border-radius:var(--ui-radius);cursor:pointer;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .2s ease}.btn-tool:hover{background:var(--accent-blue-hover);border-color:var(--accent-blue-hover)}.btn-tool.paused{background:var(--accent-warning);border-color:var(--accent-warning)}#toggle-panel{position:absolute;top:var(--space-lg);right:calc(var(--panel-width) + var(--space-lg));width:32px;height:32px;background:var(--bg-panel);border:1px solid var(--border-light);border-radius:var(--ui-radius);color:var(--text-main);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:right .3s cubic-bezier(.4, 0, .2, 1)}#toggle-panel:hover{background:var(--bg-section);color:var(--text-bright)}.panel-hidden #toggle-panel{right:var(--space-lg)}#perf-stats{position:absolute;top:var(--space-lg);left:var(--space-lg);background:rgba(26,26,26,.85);color:#a3e635;padding:var(--space-sm) var(--space-md);font-family:monospace;font-size:12px;border:1px solid var(--border-dark);border-radius:var(--ui-radius)}#help-text{position:absolute;top:48px;left:var(--space-lg);color:rgba(255,255,255,.6);font-size:11px;text-shadow:1px 1px 2px rgba(0,0,0,.8)}#watermark{position:absolute;bottom:var(--space-lg);left:var(--space-lg);color:rgba(255,255,255,.4);font-size:16px;font-weight:400;text-shadow:0 2px 4px rgba(0,0,0,.8);pointer-events:none}#gimbal-hud{position:absolute;bottom:var(--space-lg);right:calc(var(--panel-width) + var(--space-lg));background:rgba(40,40,40,.85);border:1px solid var(--border-light);border-radius:var(--ui-radius);padding:var(--space-md) var(--space-lg);display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 12px rgba(0,0,0,.4);backdrop-filter:blur(4px);transition:right .3s cubic-bezier(.4, 0, .2, 1)}.panel-hidden #gimbal-hud{right:var(--space-lg)}.gimbal-label{font-size:10px;color:var(--text-muted);margin-bottom:var(--space-md);text-transform:uppercase;letter-spacing:.5px}#gimbal-circle{position:relative;width:90px;height:90px;background:var(--bg-input);border:2px solid var(--border-light);border-radius:50%;cursor:crosshair;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:100% 50%,50% 100%;background-repeat:no-repeat;background-position:center}#gimbal-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background-color:#fbbf24;border-radius:50%;box-shadow:0 0 8px #fbbf24;pointer-events:none}@media (max-width:768px){#panel{position:absolute;right:0;top:0;width:100%;height:100%}#toggle-panel{position:absolute;right:var(--space-lg);top:var(--space-lg);z-index:100}.panel-hidden #toggle-panel{right:var(--space-lg)}#gimbal-hud{bottom:var(--space-lg);right:var(--space-lg);transform:scale(.85);transform-origin:bottom right}.panel-hidden #gimbal-hud{right:var(--space-lg)}#watermark{display:none}}