:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#eff6ff;background-color:#0f172a;font-synthetic:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bp-blue: #1d4ed8;--bp-light-blue: #3b82f6;--bp-white: #ffffff;--bp-grid: rgba(255, 255, 255, .1);--bp-panel-bg: rgba(15, 23, 42, .85);--bp-panel-border: rgba(255, 255, 255, .2)}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;overflow:hidden;background-color:#0f172a}#root{width:100vw;height:100vh;display:flex}.glass-panel{background:var(--bp-panel-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--bp-panel-border);box-shadow:0 8px 32px #0000005e;color:var(--bp-white)}.sidebar{width:280px;height:100%;display:flex;flex-direction:column;padding:1rem;z-index:10;transition:width .3s ease;overflow-y:auto;overflow-x:hidden}.sidebar.collapsed{width:72px}.sidebar.collapsed .component-item{justify-content:center;padding:.75rem 0}.sidebar.collapsed .component-item span{display:none}.collapse-btn{background:transparent;border:none;color:var(--bp-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.25rem;border-radius:.25rem;transition:background .2s}.collapse-btn:hover{background:#ffffff1a}.tray-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem;border-bottom:1px solid var(--bp-panel-border);padding-bottom:.5rem}.section-header{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:none;border-bottom:1px solid var(--bp-panel-border);color:var(--bp-white);cursor:pointer;padding:0 0 .5rem;margin-bottom:1rem;transition:opacity .2s ease}.section-header:hover{opacity:.75}.section-header .tray-title{margin-bottom:0}.component-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;border-radius:.5rem;cursor:grab;transition:background .2s ease;border:1px solid transparent}.component-item:hover{background:#ffffff1a;border-color:#ffffff4d}.component-icon{width:32px;height:32px;border-radius:50%;border:2px solid var(--bp-white);display:flex;justify-content:center;align-items:center;font-size:.75rem;font-weight:700}.canvas-container{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;overflow:hidden}.canvas-viewport{flex:1;min-height:0;position:relative;overflow:auto}canvas{display:block;flex-shrink:0}.toolbar{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.5rem 1rem;border-radius:0;border-left:none;border-right:none;border-top:none;z-index:30}.btn{background:#ffffff1a;border:1px solid var(--bp-panel-border);color:var(--bp-white);padding:.5rem 1rem;border-radius:.25rem;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:.5rem;transition:all .2s}.btn:hover{background:#fff3;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn.primary{background:var(--bp-light-blue);border-color:var(--bp-light-blue)}.btn.primary:hover{background:#2563eb}.btn.danger{background:#ef444433;border-color:#ef444480;color:#fca5a5}.btn.danger:hover{background:#ef44444d}.btn.success{background:#22c55e33;border-color:#22c55e80;color:#86efac}.btn.success:hover{background:#22c55e4d}.properties-panel{position:fixed;top:1.5rem;right:1.5rem;width:300px;padding:1rem;border-radius:.75rem;z-index:10}.sidebar-properties .properties-panel{position:static;top:auto;right:auto;width:100%;padding:0;border:none;border-radius:0;box-shadow:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}.prop-group{margin-bottom:.75rem}.prop-label{display:block;font-size:.875rem;margin-bottom:.25rem;color:#fffc}.color-picker{display:flex;gap:.5rem}.color-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.25)}.color-swatch.active{border-color:var(--bp-white);box-shadow:0 0 0 2px #fff3}.prop-checkbox{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem}.timeline-bar{position:fixed;left:0;right:0;bottom:0;height:96px;display:flex;align-items:center;gap:1rem;padding:0 1rem;z-index:20;border-top:1px solid var(--bp-panel-border)}.timeline-transport{display:flex;align-items:center;gap:.35rem;flex-shrink:0}.timeline-transport .btn{padding:.4rem}.timeline-time{font-size:.8rem;color:#ffffffb3;font-variant-numeric:tabular-nums;margin-left:.5rem;white-space:nowrap}.timeline-track{flex:1;min-width:0}.timeline-ruler{position:relative;height:44px;background:#00000059;border:1px solid var(--bp-panel-border);border-radius:.375rem;cursor:pointer;touch-action:none}.timeline-playhead{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--bp-light-blue);transform:translate(-1px);pointer-events:none}.timeline-playhead:before{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:8px;background:var(--bp-light-blue);clip-path:polygon(0 0,100% 0,50% 100%)}.timeline-marker{position:absolute;top:50%;width:9px;height:9px;background:#eab308;transform:translate(-50%,-50%) rotate(45deg);border-radius:1px;cursor:pointer}.timeline-marker.run-on{background:#22c55e}.timeline-marker.run-off{background:#ef4444}.timeline-controls{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.timeline-duration{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:#ffffffb3}.timeline-duration input{width:60px;padding:.35rem;background:#00000080;color:#fff;border:1px solid var(--bp-panel-border);border-radius:.25rem}.keyframes-panel{position:fixed;left:0;right:0;bottom:96px;max-height:40vh;display:flex;flex-direction:column;z-index:20;border-top:1px solid var(--bp-panel-border)}.keyframes-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;font-weight:600;border-bottom:1px solid var(--bp-panel-border)}.keyframes-body{overflow-y:auto;padding:.5rem 1rem 1rem}.keyframes-empty{padding:1rem;color:#fff9;font-size:.875rem}.keyframes-group{padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.08)}.keyframes-group.selected .keyframes-group-name{color:var(--bp-light-blue)}.keyframes-group-name{font-size:.85rem;font-weight:600;margin-bottom:.25rem}.keyframes-row{display:flex;align-items:center;gap:.75rem;height:26px}.keyframes-row-label{width:80px;flex-shrink:0;font-size:.75rem;color:#ffffffb3}.keyframes-track{position:relative;flex:1;height:20px;background:#0000004d;border-radius:.25rem;touch-action:none}.keyframes-playhead{position:absolute;top:0;bottom:0;width:1px;background:#3b82f6b3;pointer-events:none}.keyframes-diamond{position:absolute;top:50%;width:10px;height:10px;background:#eab308;transform:translate(-50%,-50%) rotate(45deg);border-radius:1px;cursor:ew-resize;z-index:2}.keyframes-diamond.run-on{background:#22c55e}.keyframes-diamond.run-off{background:#ef4444}.keyframes-segment{position:absolute;top:0;bottom:0;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1}.keyframes-segment-line{position:absolute;left:3px;right:3px;top:50%;height:2px;transform:translateY(-50%);background:#ffffff26;border-radius:1px}.keyframes-segment.eased .keyframes-segment-line{background:#3b82f699}.keyframes-segment:hover .keyframes-segment-line{background:#ffffff59}.keyframes-segment.eased:hover .keyframes-segment-line{background:#3b82f6e6}.keyframes-segment-glyph{position:relative;color:var(--bp-light-blue);background:var(--bp-panel-bg);padding:1px 2px;border-radius:2px;line-height:0;pointer-events:none}.keyframes-menu-backdrop{position:fixed;inset:0;z-index:40}.keyframes-menu{position:fixed;z-index:41;padding:.25rem;border-radius:.5rem;display:flex;flex-direction:column;gap:2px;min-width:150px}.keyframes-menu-item{display:flex;align-items:center;gap:.6rem;padding:.4rem .6rem;background:transparent;border:none;color:var(--bp-white);cursor:pointer;border-radius:.3rem;font-size:.8rem;text-align:left}.keyframes-menu-item:hover{background:#ffffff1a}.keyframes-menu-item.active{background:#3b82f666}.keyframes-menu-item svg{color:var(--bp-light-blue);flex-shrink:0}