:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;--bg:#0c0d0d;--panel:#111313;--panel-2:#151717;--surface:#1b1d1d;--border:#343838;--border-strong:#505555;--text:#f0efe9;--muted:#919895;--accent:#28e7d3;--accent-soft:#28e7d31f;--danger:#ff746c;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--bg);min-width:320px;min-height:100vh;color:var(--text);margin:0}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:1px solid var(--accent);outline-offset:2px}label:has(input:focus-visible){outline:1px solid var(--accent);outline-offset:2px}.app-shell{background:var(--bg);grid-template-rows:68px minmax(0,1fr) 48px;width:100%;height:100dvh;min-height:640px;display:grid;overflow:hidden}.topbar{border-bottom:1px solid var(--border);z-index:2;background:#0e1010;grid-template-columns:344px 1fr 344px;align-items:center;padding:0 26px;display:grid}.brand{letter-spacing:.055em;align-items:center;gap:18px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:14px;display:flex}.brand-mark{border:1px solid var(--accent);width:25px;height:25px;position:relative}.brand-mark:after{content:"";background:var(--accent);width:29px;height:1px;position:absolute;top:11px;left:-3px;transform:rotate(-45deg)}.topbar>.segmented{justify-self:center;width:266px}.export-actions{justify-self:end;gap:8px;display:flex}.export-actions .button-quiet{width:auto}.editor{grid-template-columns:344px minmax(0,1fr);min-height:0;display:grid}.sidebar{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;border-right:1px solid var(--border);background:var(--panel);min-height:0;padding:14px 22px 26px;overflow-y:auto}.control-section{padding:11px 0 13px}.control-section h2,.control-section h3,.range-heading label,.color-control>span:first-child{letter-spacing:-.005em;margin:0;font-size:13px;font-weight:520;line-height:1.2}.control-divider{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:2px 0 4px;padding:14px 0}.section-heading,.range-heading,.toggle-row,.number-control{justify-content:space-between;align-items:center;gap:12px;display:flex}.section-heading>span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-family:SFMono-Regular,Consolas,monospace;font-size:10px}.section-stack{gap:14px;margin-top:14px;display:grid}.dropzone{border:1px dashed var(--border-strong);width:100%;height:88px;color:var(--accent);cursor:pointer;background:0 0;border-radius:2px;flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-top:9px;transition:border-color .16s,background .16s;display:flex}.dropzone:hover,.dropzone.is-dragging{border-color:var(--accent);background:var(--accent-soft)}.dropzone>span{color:var(--text);font-size:13px}.dropzone small{width:calc(100% - 28px);color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-family:SFMono-Regular,Consolas,monospace;font-size:10px;display:block;overflow:hidden}.segmented{border:1px solid var(--border);border-radius:3px;grid-auto-columns:1fr;grid-auto-flow:column;display:grid;overflow:hidden}.control-section>.segmented{margin-top:9px}.segmented button{border:0;border-right:1px solid var(--border);min-height:32px;color:var(--muted);cursor:pointer;background:0 0;padding:5px 12px;font-size:12px}.segmented button:last-child{border-right:0}.segmented button:hover{color:var(--text)}.segmented button.is-selected{color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.range-control{min-width:0}.range-heading{margin-bottom:8px}.range-heading output{border:1px solid var(--border);min-width:56px;height:29px;color:var(--text);font-variant-numeric:tabular-nums;border-radius:2px;place-items:center;font-family:SFMono-Regular,Consolas,monospace;font-size:11px;display:grid}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:14px;margin:0;padding:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent) var(--range-progress), var(--border-strong) var(--range-progress));height:2px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--text);border:1px solid #dffffa;border-radius:50%;width:13px;height:13px;margin-top:-5.5px;box-shadow:0 0 0 2px #28e7d31a}input[type=range]::-moz-range-track{background:var(--border-strong);height:2px}input[type=range]::-moz-range-progress{background:var(--accent);height:2px}input[type=range]::-moz-range-thumb{background:var(--text);border:1px solid #dffffa;border-radius:50%;width:13px;height:13px}.color-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.color-control{gap:8px;display:grid}.color-input-wrap{border:1px solid var(--border);background:#121414;border-radius:2px;align-items:center;height:34px;display:flex;overflow:hidden}.color-input-wrap input{border:0;border-right:1px solid var(--border);cursor:pointer;background:0 0;width:42px;height:34px;padding:0}.color-input-wrap input::-webkit-color-swatch-wrapper{padding:0}.color-input-wrap input::-webkit-color-swatch{border:0}.color-input-wrap>span{color:var(--muted);padding:0 8px;font-family:SFMono-Regular,Consolas,monospace;font-size:10px}.text-button{color:var(--accent);cursor:pointer;background:0 0;border:0;padding:0;font-size:11px}.inline-actions{align-items:center;gap:11px;display:flex}.muted-action{color:var(--muted)}.select-control{color:var(--muted);gap:7px;font-size:10px;display:grid}.select-control select{border:1px solid var(--border);appearance:none;background-color:#121414;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);width:100%;height:31px;color:var(--text);background-position:calc(100% - 12px) 12px,calc(100% - 8px) 12px;background-repeat:no-repeat;background-size:4px 4px,4px 4px;border-radius:2px;padding:0 28px 0 9px;font-family:SFMono-Regular,Consolas,monospace;font-size:10px}.tone-preset-select{grid-template-columns:auto 1fr;align-items:center;margin-top:10px}.tone-preset-select select{justify-self:end;width:116px}.tone-strip{grid-template-columns:repeat(7,1fr);gap:4px;margin-top:9px;display:grid}.tone-slot{aspect-ratio:1;border:1px solid var(--border);cursor:pointer;background:#101212;place-items:center;min-width:0;transition:border-color .14s;display:grid;overflow:hidden}.tone-slot:hover,.tone-slot.has-custom{border-color:var(--accent)}.tone-slot>span{width:var(--tone-size);height:var(--tone-size);background:var(--accent);clip-path:polygon(0 15%,64% 15%,100% 50%,64% 85%,0 85%,23% 50%);max-width:88%;max-height:88%}.tone-slot img{object-fit:contain;width:100%;height:100%;padding:3px}.tone-labels{color:var(--muted);justify-content:space-between;margin-top:6px;font-size:10px;display:flex}.toggle-row{cursor:pointer;min-height:24px;font-size:13px;position:relative}.toggle-row input{opacity:0;pointer-events:none;position:absolute}.toggle-track{border:1px solid var(--border-strong);background:#161818;border-radius:10px;width:35px;height:19px;padding:2px;transition:background .15s,border-color .15s}.toggle-track>span{background:var(--text);border-radius:50%;width:13px;height:13px;transition:transform .15s;display:block}.toggle-row input:checked+.toggle-track{border-color:var(--accent);background:var(--accent)}.toggle-row input:checked+.toggle-track>span{background:#071110;transform:translate(16px)}.scale-pair{grid-template-columns:1fr 1fr;gap:18px;margin:10px 0 13px;display:grid}.number-control{color:var(--text);font-size:13px}.number-control>span:last-child{color:var(--muted);align-items:center;gap:7px;font-size:11px;display:flex}.number-control input{border:1px solid var(--border);width:82px;height:31px;color:var(--text);background:#121414;border-radius:2px;padding:0 8px;font-family:SFMono-Regular,Consolas,monospace;font-size:11px}.button{cursor:pointer;border-radius:3px;justify-content:center;align-items:center;gap:9px;min-height:36px;padding:7px 14px;font-size:12px;display:inline-flex}.button:disabled{opacity:.4;cursor:not-allowed}.button-accent{border:1px solid var(--accent);color:var(--accent);background:0 0}.button-accent:hover:not(:disabled){background:var(--accent-soft)}.button-quiet{border:1px solid var(--border);width:100%;color:var(--muted);background:0 0}.button-quiet:hover{border-color:var(--border-strong);color:var(--text)}.motion-section{border-top:1px solid var(--border);margin-top:3px}.motion-toggle{margin:12px 0}.motion-controls{gap:14px;transition:opacity .15s;display:grid}.motion-controls.is-disabled{opacity:.34;pointer-events:none}.direction-control{color:var(--text);grid-template-columns:1fr auto;align-items:center;gap:12px;font-size:13px;display:grid}.direction-pad{border:1px solid var(--border);background:#101212;border-radius:2px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:91px;height:91px;display:grid;overflow:hidden}.direction-pad button{border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);width:30px;height:30px;color:var(--muted);cursor:pointer;background:0 0;place-items:center;padding:0;display:grid}.direction-pad button>span{place-items:center;display:grid}.direction-pad button:nth-of-type(3n){border-right:0}.direction-pad button:nth-of-type(n+6){border-bottom:0}.direction-pad button:hover,.direction-pad button.is-selected{color:var(--accent);background:var(--accent-soft)}.direction-origin{border:1px solid var(--accent);width:7px;height:7px;box-shadow:0 0 0 4px var(--accent-soft);border-radius:50%;grid-area:2/2;place-self:center}.motion-range-pair{margin:0}.gif-panel{border-top:1px solid var(--border);margin-top:17px;padding-top:15px}.gif-settings{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px;display:grid}.gif-export-actions{gap:10px;margin-top:11px;display:grid}.gif-export-button{width:100%;margin-top:0}.export-progress{background:var(--border);height:2px;margin-top:11px;overflow:hidden}.export-progress span{background:var(--accent);height:100%;transition:width 80ms linear;display:block}.sidebar-footer{padding-top:17px}.notice{color:var(--muted);margin:10px 0 0;font-size:11px;line-height:1.4}.workspace{background-color:#090a0a;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:24px 24px;place-items:center;min-width:0;min-height:0;padding:12px;display:grid;overflow:auto}.artboard{max-width:100%;max-height:100%;transform:scale(var(--zoom));transform-origin:50%;place-items:center;transition:transform .16s;display:grid;position:relative}.artboard canvas{border:1px solid var(--border-strong);background:var(--bg);width:auto;max-width:calc(100vw - 392px);height:auto;max-height:calc(100dvh - 142px);display:block;box-shadow:0 20px 60px #00000052}.source-media{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.statusbar{border-top:1px solid var(--border);color:var(--muted);font-variant-numeric:tabular-nums;background:#0f1111;grid-template-columns:344px minmax(0,1fr);font-family:SFMono-Regular,Consolas,monospace;font-size:10px;display:grid}.media-status,.canvas-status,.zoom-control,.video-status{align-items:center;display:flex}.media-status{border-right:1px solid var(--border);gap:17px;padding:0 22px}.statusbar strong{color:var(--text);font-weight:500}.canvas-status{justify-content:space-between;gap:26px;padding:0 22px}.zoom-control{gap:12px;margin-left:auto}.zoom-control button,.video-status button{border:1px solid var(--border);width:30px;height:28px;color:var(--muted);cursor:pointer;background:0 0;border-radius:2px;place-items:center;padding:0;display:grid}.zoom-control button:hover,.video-status button:hover{color:var(--accent);border-color:var(--accent)}.video-status{gap:13px}.frame-label{color:var(--muted)}.visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}@media (width<=900px){.app-shell{grid-template-rows:auto auto auto;height:auto;min-height:100dvh;overflow:visible}.topbar{grid-template-rows:60px 48px;grid-template-columns:1fr auto;padding:0 18px}.topbar,.editor,.sidebar,.workspace,.statusbar{width:100%;min-width:0;max-width:100%}.topbar>.segmented{grid-area:2/1/auto/-1;align-self:start;width:100%}.editor{flex-direction:column;display:flex}.sidebar{border-right:0;border-top:1px solid var(--border);order:2;padding-inline:18px}.workspace{order:1;min-height:58dvh;padding:14px}.artboard{width:100%}.artboard canvas{max-width:100%;max-height:54dvh}.statusbar{grid-template-columns:1fr;min-height:92px}.media-status{border-right:0;border-bottom:1px solid var(--border);min-height:42px}.canvas-status{min-height:48px}}@media (width<=520px){.brand{gap:11px;font-size:12px}.brand-mark{width:21px;height:21px}.brand-mark:after{width:25px;top:9px}.export-button{padding-inline:10px}.export-actions{gap:5px}.export-prefix{display:none}.color-grid,.scale-pair{grid-template-columns:1fr}.motion-range-pair{grid-template-columns:1fr 1fr}.canvas-status{gap:12px;padding:0 12px}.frame-label{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}