:root{--bg: #3b3b52;--panel: #1f1f29;--panel-2: #272733;--border: #34343f;--text: #e7e7ee;--muted: #9a9aae;--accent: #ff2f6e;--accent-2: #2f9bff;--ok: #36c98b;--picker-size: 150px;--sidebar-pad: 10px;--panel-pad: 10px;--sidebar-toggle-line-height: 1px;--sidebar-toggle-line-gap: 2px;--sidebar-toggle-line-inset: 40px;--sidebar-toggle-bar-height: calc( var(--sidebar-toggle-line-height) * 3 + var(--sidebar-toggle-line-gap) * 2 );--sidebar-toggle-margin: 4px;--sidebar-toggle-margin-bottom: 4px;--sidebar-toggle-collapsed-margin: 2px;--sidebar-width: calc(var(--picker-size) + var(--panel-pad) * 2 + var(--sidebar-pad) * 2)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none}#app{position:relative;height:100vh;width:100vw}#sidebar{position:absolute;top:0;left:0;bottom:0;z-index:10;width:var(--sidebar-width);min-width:var(--sidebar-width);background:transparent;border-right:1px solid rgba(52,52,63,.45);display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:var(--sidebar-pad);overflow:hidden;pointer-events:none}#sidebar>*{pointer-events:auto}#sidebar>.panel,#sidebar-tools>.panel{flex-shrink:0}#sidebar>.panel--loop-preview{flex-shrink:0}.sidebar-toggle{position:absolute;z-index:2;top:var(--sidebar-toggle-margin);left:50%;transform:translate(-50%);display:flex;flex-direction:column;justify-content:center;gap:var(--sidebar-toggle-line-gap);width:var(--picker-size);height:var(--sidebar-toggle-bar-height);padding:0 var(--sidebar-toggle-line-inset);box-sizing:border-box;border:none;border-radius:0;background:transparent;color:#888;cursor:pointer}.sidebar-toggle:hover{background:transparent;color:var(--text)}.sidebar-toggle:focus,.sidebar-toggle:focus-visible{outline:none;box-shadow:none}.sidebar-toggle__line{display:block;width:100%;height:var(--sidebar-toggle-line-height);background:#5e5e72;border-radius:1px}.sidebar-tools{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow:hidden}#sidebar.collapsed{bottom:auto;height:fit-content}#sidebar.collapsed>.sidebar-tools{flex:0 0 auto;min-height:0;pointer-events:none}#sidebar.collapsed .sidebar-tools>.panel:not(.panel--color),#sidebar.collapsed .panel--frames{display:none}#sidebar.collapsed .panel--color #color-picker,#sidebar.collapsed .panel--color #swatches{display:none}#sidebar.collapsed .panel--color{height:calc(var(--sidebar-toggle-bar-height) + var(--sidebar-toggle-collapsed-margin) * 2);min-height:calc(var(--sidebar-toggle-bar-height) + var(--sidebar-toggle-collapsed-margin) * 2);max-height:calc(var(--sidebar-toggle-bar-height) + var(--sidebar-toggle-collapsed-margin) * 2);padding:0;gap:0;overflow:hidden;flex-shrink:0;border:none;pointer-events:auto}#sidebar.collapsed .panel--color .sidebar-toggle{top:var(--sidebar-toggle-collapsed-margin)}.panel{background:#272733b8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(52,52,63,.65);border-radius:6px;padding:var(--panel-pad);display:flex;flex-direction:column;gap:8px}.panel-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.panel-title--sm{font-size:8.8px}.panel--color{position:relative;padding-top:calc(var(--sidebar-toggle-margin) + var(--sidebar-toggle-bar-height) + var(--sidebar-toggle-margin-bottom))}#color-picker{display:flex;flex-direction:column;align-items:center;gap:8px}#hsb-square{cursor:crosshair;display:block;touch-action:none;width:var(--picker-size);height:var(--picker-size);border-radius:6px}#brightness-strip{cursor:pointer;display:block;touch-action:none;width:var(--picker-size);height:19px;border-radius:4px}#swatches{display:flex;gap:4px;flex-wrap:wrap;width:var(--picker-size);margin:0 auto}.swatch{width:15px;height:15px;border-radius:50%;border:1px solid var(--border);cursor:pointer}#tools{display:flex;gap:6px}button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:6px 8px;cursor:pointer;transition:background .12s,border-color .12s}button:hover{background:#30303d}.tool{flex:1;display:flex;align-items:center;justify-content:center;padding:6px;min-width:0;background:#ffffff24}button.tool:hover{background:#ffffff38}.tool img{width:20px;height:20px;display:block;object-fit:contain}.tool svg{width:20px;height:20px;display:block}.tool.active{border-color:#fff;background:#fffc;color:#fff}button.danger{border-color:#5a2330;color:#ff9bb3}button.danger:hover{background:#3a1a22}.panel--loop-preview{padding:0;overflow:hidden;flex-shrink:0;cursor:pointer;touch-action:manipulation}#loop-preview-canvas{display:block;width:100%;aspect-ratio:16 / 9}#sidebar>.panel--loop-preview{pointer-events:auto}.panel--loop-preview.hidden{display:none}.panel--frames{display:block;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;background:transparent;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;cursor:pointer;touch-action:pan-y}.panel--frames::-webkit-scrollbar{display:none}#frame-strip-spacer{display:block;width:100%;pointer-events:none}#sidebar-tools>.panel--frames{pointer-events:auto;flex:1;min-height:0}.panel--frames.hidden{display:none}.row{display:flex;align-items:center;gap:8px;justify-content:space-between}.row span{font-size:12px;color:var(--muted)}.clear-wrap{display:grid}.clear-wrap>#clear-btn,.clear-wrap>.clear-confirm{grid-area:1 / 1}#clear-btn,.clear-confirm button{transition:opacity .18s ease,transform .18s ease}.clear-wrap.confirming>#clear-btn{opacity:0;transform:scale(.85);pointer-events:none}.clear-wrap:not(.confirming)>.clear-confirm{pointer-events:none}.clear-wrap:not(.confirming) .clear-confirm button{opacity:0;transform:scale(.85)}.clear-wrap.confirming .clear-no{transition-delay:.1s}#clear-btn{font-size:10px;color:#fff;background-color:#db2e42;width:100%;font-weight:400}.clear-confirm{display:flex;gap:6px}.clear-confirm button{flex:1;font-size:12px;font-weight:600;color:#fff}.clear-yes{background-color:#d62b3f;border-color:#d62b3f}.clear-yes:hover{background-color:#e8394e}.clear-no{background-color:#1f9d4d;border-color:#1f9d4d}.clear-no:hover{background-color:#25b85a}.gallery-btn{width:100%;font-size:10px;font-weight:400;letter-spacing:.5px;color:#fff;border:none;border-radius:6px;padding:8px;background:linear-gradient(135deg,#1f5fbf,#2f9bff);box-shadow:0 1px 2px #00000059}.gallery-btn:hover{background:linear-gradient(135deg,#2670d6,#45a8ff)}.gallery-btn:active{background:linear-gradient(135deg,#194f9f,#2486e0)}.gallery-btn:disabled{opacity:.6;cursor:progress}.gallery-btn.sent{background:linear-gradient(135deg,#1f8f57,#36c98b)}.gallery-btn.failed{background:linear-gradient(135deg,#a32433,#db2e42)}.gallery-btn.hidden{display:none}.gallery-link{font-size:11px;color:var(--muted);text-align:center;text-decoration:none}.gallery-link:hover{color:var(--text);text-decoration:underline}input[type=number],input[type=text]{background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 8px;width:100%;font:inherit;font-size:13px}input[type=number],#frames-input{width:52px}.frames-stepper{display:flex;align-items:stretch;gap:0}.frames-stepper__buttons{display:flex;flex-direction:row;gap:4px;align-self:stretch}.frames-step-btn{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:100%;min-height:0;padding:0;touch-action:manipulation}.frames-step-btn svg{width:14px;height:14px;display:block}.frames-step-btn:disabled{opacity:.35;cursor:default}input[type=range]{width:100%;accent-color:#fff}#stroke-panel{cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}#stroke-slider{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}#stroke-slider:focus,#stroke-slider:focus-visible{outline:none}#stroke-slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#ffffff38}#stroke-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:none;border-radius:50%;background:#fff}#stroke-slider::-moz-range-track{height:4px;border:none;border-radius:2px;background:#ffffff38}#stroke-slider::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#fff}#ws-connect{flex-shrink:0;font-size:12px;padding:6px}.hint{font-size:11px;color:var(--muted);line-height:1.4}.status{font-size:12px;padding:6px 8px;border-radius:6px;text-align:center}.status.offline{background:#2a2a36;color:var(--muted)}.status.connecting{background:#3a3320;color:#e8cf7a}.status.online{background:#18382c;color:var(--ok)}.status.error{background:#3a1c22;color:#ff9bb3}.icon-btn{display:flex;align-items:center;justify-content:center;padding:10px;min-width:40px;min-height:40px}.icon-btn svg{width:18px;height:18px;display:block}.bottom-actions{position:absolute;right:var(--sidebar-pad);bottom:var(--sidebar-pad);z-index:20;display:flex;gap:8px}.help-btn,.settings-btn{background:#272733b8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(52,52,63,.65)}.help-btn[aria-expanded=true],.settings-btn[aria-expanded=true]{border-color:#fff;background:#3a3a48;color:#fff}.settings-overlay{position:absolute;inset:0;z-index:25;pointer-events:none}.settings-overlay.hidden{display:none}.settings-overlay:not(.hidden){pointer-events:auto}.settings-backdrop{position:absolute;inset:0;background:#0a0a0e73}.settings-panel{position:absolute;right:var(--sidebar-pad);bottom:calc(var(--sidebar-pad) + 48px);width:var(--sidebar-width);max-height:calc(100vh - 80px);overflow-y:auto;display:flex;flex-direction:column;gap:10px;pointer-events:auto}.shortcuts-panel .shortcut-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.shortcut-label{font-size:12px;color:var(--muted)}.shortcut-keys{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.key{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;border-radius:6px;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);font-family:inherit;font-size:11px;font-weight:500;color:#fff;line-height:1}.key-sep,.shortcut-hint{font-size:11px;color:var(--muted)}#stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}#gpu-canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}#frame-label-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#stage.panning #gpu-canvas{cursor:grab}#stage.drop-target #gpu-canvas{outline:2px dashed rgba(255,255,255,.45);outline-offset:-4px}body.projector #sidebar,body.projector .bottom-actions,body.projector #help-overlay,body.projector #settings-overlay,body.projector #frame-label-canvas,body.projector #loop-preview{display:none}body.projector #gpu-canvas{cursor:pointer}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0eeb;text-align:center;padding:32px}.overlay.hidden{display:none}.overlay h2{margin-top:0}.overlay code{background:#2a2a36;padding:1px 5px;border-radius:6px}