@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--bg:#0c0c0c;--surface:#141414;--surface-2:#1a1a1a;--surface-3:#202020;--border:#252525;--border-hover:#3a3a3a;--text:#ececec;--text-2:#999;--text-3:#666;--text-4:#444;--accent:#4b8bff;--accent-bg:#4b8bff1a;--accent-text:#6ba1ff;--red:#ff4b6e;--green:#4bff8b;--yellow:#e6fda8;--font:"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-mono:"SF Mono", "Fira Code", ui-monospace, monospace;--panel-w:280px;--radius:8px;--radius-sm:6px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;height:100vh;font-size:13px;overflow:hidden}#app{width:100vw;height:100vh;display:flex}.canvas-area{background:var(--bg);flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.stagger-grid-container{z-index:1;position:relative}.stagger-grid{gap:3px;display:grid}.stagger-cell-wrap{cursor:pointer;overflow:hidden}.stagger-cell{will-change:transform;width:100%;height:100%}.stagger-cell-wrap.origin{outline-offset:1px;outline:2px solid #fff}.stagger-cell.shape-circle{border-radius:50%}.stagger-cell-wrap:has(.shape-circle){border-radius:50%}.stagger-cell.shape-square{border-radius:0}.stagger-cell.shape-rounded{border-radius:6px}.stagger-cell-wrap:has(.shape-rounded){border-radius:6px}.stagger-cell.shape-diamond{border-radius:0}.stagger-cell-wrap:has(.shape-diamond){clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);overflow:visible}.stagger-cell.shape-bar{border-radius:0}.panel{width:var(--panel-w);background:var(--surface);border-left:1px solid var(--border);-webkit-user-select:none;user-select:none;flex-direction:column;flex-shrink:0;height:100vh;display:flex}.panel-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;min-height:48px;padding:14px 16px;display:flex}.panel-title{color:var(--text);font-size:13px;font-weight:600}.panel-actions{gap:6px;display:flex}.icon-btn{border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-3);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;font-size:14px;transition:all .12s;display:flex}.icon-btn:hover{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}.panel-body{flex:1;overflow:hidden auto}.panel-body::-webkit-scrollbar{width:0}.section{border-bottom:1px solid var(--border)}.section-header{cursor:pointer;justify-content:space-between;align-items:center;padding:10px 16px;transition:background .1s;display:flex}.section-header:hover{background:var(--surface-2)}.section-title{color:var(--text);letter-spacing:.02em;font-size:11px;font-weight:600}.section-toggle{color:var(--text-3);cursor:pointer;background:0 0;border:none;padding:2px 4px;font-size:10px;transition:color .12s}.section-toggle:hover{color:var(--text-2)}.section-body{padding:0 16px 12px}.section.collapsed .section-body{display:none}.section.collapsed .section-toggle{transform:rotate(-90deg)}.field{align-items:center;gap:8px;min-height:32px;margin-bottom:1px;display:flex}.field-label{color:var(--text-3);flex-shrink:0;min-width:64px;font-size:11px}.field-control{flex:1;align-items:center;gap:6px;display:flex}.num-input{background:var(--surface-2);border-radius:var(--radius-sm);width:52px;height:28px;color:var(--text);font-family:var(--font);text-align:center;-moz-appearance:textfield;border:1px solid #0000;outline:none;flex-shrink:0;font-size:12px;transition:border-color .12s}.num-input::-webkit-inner-spin-button{-webkit-appearance:none}.num-input::-webkit-outer-spin-button{-webkit-appearance:none}.num-input:hover{border-color:var(--border)}.num-input:focus{border-color:var(--accent);background:var(--bg)}.num-unit{color:var(--text-4);flex-shrink:0;width:14px;margin-left:-2px;font-size:10px}input[type=range]{appearance:none;background:var(--border);cursor:pointer;border-radius:1px;outline:none;flex:1;min-width:0;height:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:10px;height:10px;box-shadow:0 1px 3px #0006}input[type=range]:active::-webkit-slider-thumb{background:var(--accent)}.field-select{background:var(--surface-2);border-radius:var(--radius-sm);height:28px;color:var(--text);font-family:var(--font);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;border:1px solid #0000;outline:none;flex:1;padding:0 24px 0 10px;font-size:12px;transition:border-color .12s}.field-select:hover{border-color:var(--border)}.field-select:focus{border-color:var(--accent)}.seg-control{background:var(--surface-2);border-radius:var(--radius-sm);flex:1;gap:2px;padding:2px;display:flex}.seg-btn{height:26px;color:var(--text-3);font-family:var(--font);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:1;font-size:11px;font-weight:500;transition:all .12s}.seg-btn:hover{color:var(--text-2)}.seg-btn.active{background:var(--surface-3);color:var(--accent-text);box-shadow:0 1px 2px #00000026}.ease-curve-wrap{background:var(--surface-2);border-radius:var(--radius);margin-bottom:8px;padding:12px;position:relative}.ease-curve-svg{aspect-ratio:1.2;width:100%;display:block}.ease-grid-line{stroke:var(--border);stroke-width:.5px}.ease-axis{stroke:var(--text-4);stroke-width:1px}.ease-curve{fill:none;stroke:var(--accent);stroke-width:2px;stroke-linecap:round}.ease-guide{stroke:var(--accent);stroke-width:1px;stroke-dasharray:3 3;opacity:.5}.ease-handle{fill:var(--accent);stroke:#fff;stroke-width:2px;cursor:grab;filter:drop-shadow(0 1px 3px #0006)}.ease-handle:active{cursor:grabbing}.ease-endpoint{fill:var(--text-4);stroke:none}.bezier-readout{align-items:center;gap:4px;margin-top:8px;display:flex}.bezier-readout .field-label{min-width:44px}.bezier-value{font-family:var(--font-mono);color:var(--text-2);background:var(--surface-2);border-radius:var(--radius-sm);text-align:center;border:1px solid #0000;flex:1;padding:4px 8px;font-size:11px;transition:border-color .12s}.bezier-value:hover{border-color:var(--border)}.color-field{align-items:center;gap:8px;min-height:32px;margin-bottom:1px;display:flex}.color-dot-wrap{flex-shrink:0;width:22px;height:22px;position:relative}.color-dot{border:2px solid var(--border);border-radius:50%;width:22px;height:22px}.color-dot-wrap input[type=color]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.color-label{color:var(--text-3);flex:1;font-size:11px}.color-hex{font-family:var(--font-mono);color:var(--text-2);font-size:11px}.toggle-field{align-items:center;gap:8px;min-height:32px;margin-bottom:1px;display:flex}.toggle-label{color:var(--text-3);flex:1;font-size:11px}.toggle-wrap{background:var(--surface-2);border-radius:var(--radius-sm);gap:1px;padding:2px;display:flex}.toggle-opt{font-family:var(--font);color:var(--text-3);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:3px 10px;font-size:11px;transition:all .12s}.toggle-opt.active{background:var(--surface-3);color:var(--accent-text)}.preview-track{background:var(--surface-2);border-radius:var(--radius-sm);height:28px;margin-top:8px;position:relative;overflow:hidden}.preview-bar{background:var(--accent);border-radius:var(--radius-sm);opacity:.6;width:0%;position:absolute;top:0;bottom:0;left:0}.preview-dot{background:#fff;border-radius:50%;width:10px;height:10px;position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0000004d}.presets-row{grid-template-columns:1fr 1fr;gap:4px;display:grid}.preset-btn{background:var(--surface-2);border-radius:var(--radius-sm);height:28px;color:var(--text-3);font-family:var(--font);cursor:pointer;text-align:center;border:1px solid #0000;font-size:11px;transition:all .12s}.preset-btn:hover{background:var(--surface-3);color:var(--text-2);border-color:var(--border)}.preset-btn.active{border-color:var(--accent);color:var(--accent-text);background:var(--accent-bg)}.panel-footer{border-top:1px solid var(--border);gap:8px;padding:12px 16px;display:flex}.btn-play{border-radius:var(--radius-sm);background:var(--accent);color:#fff;height:34px;font-family:var(--font);cursor:pointer;border:none;flex:1;font-size:12px;font-weight:500;transition:opacity .12s}.btn-play:hover{opacity:.85}.btn-output{border-radius:var(--radius-sm);border:1px solid var(--border);height:34px;color:var(--text-2);font-family:var(--font);cursor:pointer;background:0 0;padding:0 14px;font-size:12px;transition:all .12s}.btn-output:hover{border-color:var(--border-hover);color:var(--text)}.btn-output.active{border-color:var(--accent);color:var(--accent-text)}.code-overlay{bottom:16px;left:16px;right:calc(var(--panel-w) + 16px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);z-index:100;padding:14px 16px;display:none;position:fixed;box-shadow:0 8px 32px #0006}.code-overlay.visible{display:block}.code-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.code-title{color:var(--text-3);font-size:11px;font-weight:600}.code-actions{gap:6px;display:flex}.copy-btn{font-size:11px;font-family:var(--font);color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);cursor:pointer;border-radius:4px;padding:4px 12px;transition:all .12s}.copy-btn:hover{color:var(--text-2);border-color:var(--border-hover)}.copy-btn.copied{color:var(--accent-text);border-color:var(--accent)}.code-block{font-family:var(--font-mono);color:var(--text-2);white-space:pre;max-height:50vh;font-size:11px;line-height:1.7;overflow:auto}.code-block .fn{color:var(--green)}.code-block .str{color:var(--red)}.code-block .num{color:var(--accent-text)}.code-block .kw{color:#c792ea}.code-block .cm{color:var(--text-4)}