*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,sans-serif;background:#0a0a0f;color:#fff;min-height:100vh;overflow:hidden}.app-container{display:flex;height:100vh}.canvas-container{flex:1 1;position:relative;background:#000}#orbit-canvas{width:100%;height:100%;display:block}.controls{width:280px;background:linear-gradient(180deg,#12121a,#0d0d14);padding:24px;gap:20px;border-left:1px solid #222;overflow-y:auto}.control-group,.controls{display:flex;flex-direction:column}.control-group{gap:8px}.control-group label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#888}.control-group input[type=range]{width:100%;height:6px;-webkit-appearance:none;background:#2a2a3a;border-radius:3px;outline:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#6366f1;border-radius:50%;cursor:pointer;-webkit-transition:transform .2s;transition:transform .2s}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.control-group input[type=color]{width:100%;height:40px;border:none;border-radius:8px;cursor:pointer;background:transparent}.control-group select{padding:10px 12px;background:#1a1a24;border:1px solid #2a2a3a;border-radius:8px;color:#fff;font-size:14px;cursor:pointer;outline:none}.control-group select:focus{border-color:#6366f1}.btn{padding:12px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(99,102,241,.3)}.btn-secondary{background:#1a1a24;color:#888;border:1px solid #2a2a3a}.btn-secondary:hover{color:#fff;border-color:#444}.btn-group{display:flex;gap:10px}.btn-group .btn{flex:1 1}.header{text-align:center;padding-bottom:16px;border-bottom:1px solid #222}.header h1{font-size:20px;font-weight:700;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{font-size:11px;color:#666;margin-top:4px}.value-display{font-size:12px;color:#6366f1;text-align:right}.preset-btn{padding:8px 12px;background:#1a1a24;border:1px solid #2a2a3a;border-radius:6px;color:#888;font-size:11px;cursor:pointer;transition:all .2s}.preset-btn:hover{background:#2a2a3a;color:#fff}.presets-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px}