:root{--ui-size-scale: .8;--panel-line: rgba(255, 255, 255, .35);--panel-bg: rgba(8, 18, 32, .55);--panel-blur: blur(calc(14px * var(--ui-size-scale)));--text: #e7f0ff;--accent: #e5f1ff;--shadow: rgba(3, 10, 20, .55);--border: rgba(255, 255, 255, .35);--ui-blue-a: #2f6bff;--ui-blue-b: #38cfff;--ui-blue-c: #7ee9ff;color-scheme:dark;font-family:Segoe UI,Helvetica Neue,Arial,sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{background:#000}#app-canvas{position:fixed;inset:0;display:block;width:100%;height:100%}#ui-panel{position:absolute;top:calc(18px * var(--ui-size-scale));left:calc(18px * var(--ui-size-scale));width:calc(280px * var(--ui-size-scale));min-width:calc(280px * var(--ui-size-scale));max-width:calc(280px * var(--ui-size-scale));color:var(--text);background:var(--panel-bg);border-radius:calc(12px * var(--ui-size-scale));backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur);box-shadow:0 calc(10px * var(--ui-size-scale)) calc(30px * var(--ui-size-scale)) var(--shadow);overflow:hidden;-webkit-user-select:none;user-select:none;z-index:10;display:flex;flex-direction:column}#ui-handle,#ui-handle-bottom{padding:calc(12px * var(--ui-size-scale)) calc(14px * var(--ui-size-scale));min-height:calc(18px * var(--ui-size-scale));background:linear-gradient(135deg,#ffffff1f,#ffffff0f);cursor:grab}#ui-handle{display:flex;align-items:center;justify-content:flex-end;gap:calc(8px * var(--ui-size-scale));border-radius:calc(12px * var(--ui-size-scale)) calc(12px * var(--ui-size-scale)) 0 0}#ui-handle-bottom{border-radius:0 0 calc(12px * var(--ui-size-scale)) calc(12px * var(--ui-size-scale))}.collapse-button{background:linear-gradient(135deg,#2f6bff59,#38cfff38);color:var(--text);width:calc(26px * var(--ui-size-scale));height:calc(22px * var(--ui-size-scale));border-radius:calc(8px * var(--ui-size-scale));font-weight:600;cursor:pointer;box-shadow:none;transition:transform .12s ease,background .16s ease;display:grid;place-items:center;border:none}.collapse-button:hover{transform:translateY(calc(-1px * var(--ui-size-scale)))}.collapse-button:active{transform:translateY(calc(1px * var(--ui-size-scale)))}.collapse-icon{display:block;transform:rotate(180deg);transition:transform .16s ease}#ui-panel.is-collapsed .collapse-icon{transform:rotate(0)}#ui-panel.is-collapsed .ui-body,#ui-panel.is-collapsed #ui-handle-bottom{display:none}.ui-body{padding:calc(12px * var(--ui-size-scale)) calc(14px * var(--ui-size-scale)) calc(8px * var(--ui-size-scale));position:relative;overflow-y:auto;flex:1 1 auto;scrollbar-color:rgba(255,255,255,.25) rgba(8,18,32,.75);scrollbar-width:thin}.ui-body::-webkit-scrollbar{width:calc(8px * var(--ui-size-scale))}.ui-body::-webkit-scrollbar-track{background:#081220bf;border-radius:999px}.ui-body::-webkit-scrollbar-thumb{background:#ffffff40;border-radius:999px}.ui-body::-webkit-scrollbar-thumb:hover{background:#fff6}.panel-section{padding-bottom:calc(6px * var(--ui-size-scale));margin-bottom:calc(12px * var(--ui-size-scale));border-bottom:1px solid rgba(255,255,255,.08)}.panel-section:last-child{border-bottom:none;margin-bottom:0}.panel-heading{width:100%;display:flex;align-items:center;justify-content:space-between;gap:calc(12px * var(--ui-size-scale));font-size:calc(12px * var(--ui-size-scale));letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:calc(4px * var(--ui-size-scale)) 0 calc(10px * var(--ui-size-scale));background:#ffffff14;border:none;padding:calc(6px * var(--ui-size-scale)) calc(10px * var(--ui-size-scale));cursor:pointer;text-align:left;border-radius:calc(8px * var(--ui-size-scale))}.panel-heading:focus-visible{outline:1px solid rgba(255,255,255,.4);outline-offset:calc(4px * var(--ui-size-scale));border-radius:calc(6px * var(--ui-size-scale))}.panel-chevron{font-size:calc(12px * var(--ui-size-scale));transform:rotate(180deg);transition:transform .16s ease}.panel-section.is-collapsed .panel-content{display:none}.panel-section.is-collapsed .panel-chevron{transform:rotate(0)}.panel-section.is-collapsed .panel-heading{margin-bottom:0}.control{display:block;width:100%;margin-bottom:calc(12px * var(--ui-size-scale));position:relative}.control:last-child{margin-bottom:calc(8px * var(--ui-size-scale))}.control-row{display:flex;align-items:center;justify-content:space-between;font-size:calc(14px * var(--ui-size-scale));margin-bottom:calc(6px * var(--ui-size-scale));gap:calc(12px * var(--ui-size-scale))}.switch{position:relative;display:inline-block;width:calc(36px * var(--ui-size-scale));height:calc(18px * var(--ui-size-scale))}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;background:#ffffff1f;border-radius:999px;transition:background .16s ease}.slider:before{position:absolute;content:"";height:calc(14px * var(--ui-size-scale));width:calc(14px * var(--ui-size-scale));left:calc(2px * var(--ui-size-scale));top:calc(2px * var(--ui-size-scale));background:#f2f4f8;border-radius:50%;transition:transform .16s ease}.switch input:checked+.slider{background:linear-gradient(135deg,var(--ui-blue-a),var(--ui-blue-c))}.switch input:checked+.slider:before{transform:translate(calc(18px * var(--ui-size-scale)))}input[type=range]{width:100%;appearance:none;-webkit-appearance:none;cursor:pointer;height:calc(12px * var(--ui-size-scale));border-radius:999px;background:linear-gradient(90deg,var(--ui-blue-a) 0px,var(--ui-blue-b) var(--range-progress, calc(50px * var(--ui-size-scale))),rgba(255,255,255,.12) var(--range-progress, calc(50px * var(--ui-size-scale))),rgba(255,255,255,.12) 100%);box-shadow:none;filter:none;border:none;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:calc(16px * var(--ui-size-scale));height:calc(16px * var(--ui-size-scale));border-radius:50%;background:linear-gradient(135deg,#fff,#e6eef5);box-shadow:none;margin-top:calc(-1px * var(--ui-size-scale))}input[type=range]::-moz-range-thumb{width:calc(16px * var(--ui-size-scale));height:calc(16px * var(--ui-size-scale));border-radius:50%;background:linear-gradient(135deg,#fff,#e6eef5);box-shadow:none;margin-top:calc(-1px * var(--ui-size-scale))}input[type=range]::-moz-range-track{background:transparent}input[type=color].color-input{width:100%;height:calc(30px * var(--ui-size-scale));padding:calc(2px * var(--ui-size-scale));border-radius:calc(8px * var(--ui-size-scale));border:1px solid rgba(255,255,255,.2);background:#060c1699;cursor:pointer}input[type=color].color-input::-webkit-color-swatch-wrapper{padding:0}input[type=color].color-input::-webkit-color-swatch{border:none;border-radius:calc(6px * var(--ui-size-scale))}input[type=color].color-input::-moz-color-swatch{border:none;border-radius:calc(6px * var(--ui-size-scale))}.select-input{width:100%;height:calc(32px * var(--ui-size-scale));border-radius:calc(10px * var(--ui-size-scale));border:1px solid rgba(255,255,255,.18);background:#060c1699;color:var(--text);padding:0 calc(10px * var(--ui-size-scale));font-size:calc(13px * var(--ui-size-scale));outline:none;min-width:0;appearance:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-image:linear-gradient(45deg,transparent 50%,#e7f0ff 50%),linear-gradient(135deg,#e7f0ff 50%,transparent 50%);background-position:calc(100% - 16px * var(--ui-size-scale)) calc(50% - 4px * var(--ui-size-scale)),calc(100% - 11px * var(--ui-size-scale)) calc(50% - 4px * var(--ui-size-scale));background-size:calc(6px * var(--ui-size-scale)) calc(6px * var(--ui-size-scale));background-repeat:no-repeat;padding-right:calc(28px * var(--ui-size-scale))}.pill-button{width:100%;height:calc(34px * var(--ui-size-scale));border-radius:calc(10px * var(--ui-size-scale));background:linear-gradient(135deg,#2f6bff42,#38cfff24);color:var(--text);font-weight:500;letter-spacing:.02em;cursor:pointer;box-shadow:none;border:none;outline:none;appearance:none;transition:transform .12s ease,background .16s ease,opacity .12s ease}.pill-button:hover:not(:disabled){background:linear-gradient(135deg,var(--ui-blue-a),var(--ui-blue-c));color:#071320;transform:translateY(calc(-1px * var(--ui-size-scale)))}.pill-button:active:not(:disabled){transform:translateY(calc(1px * var(--ui-size-scale)))}@media(max-width:640px){#ui-panel{left:calc(10px * var(--ui-size-scale));right:calc(10px * var(--ui-size-scale));min-width:unset}}
