:root{--bg:#141414;--text:#ece8df;--text-70:#ece8dfb3;--line:#ece8df1f;--surface:#ece8df0f;--surface-hover:#ece8df1f;--selected:#ece8df33;--raised:#1c1c1c;--accent:#ff8a1f;--on-accent:#141414;--font:"Funnel Sans", system-ui, sans-serif;--size-head:16px;--size-text:14px;--size-label:12px;--s-2:2px;--s-4:4px;--s-8:8px;--s-12:12px;--s-16:16px;--s-24:24px;--s-32:32px;--s-40:40px;--s-48:48px;--s-64:64px;--r-s:6px;--r-m:8px;--control:32px;--header:48px;--left:256px;--right:304px;--ease:cubic-bezier(.16, 1, .3, 1);--fast:.16s;--slow:.32s;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (width<=1279.98px){:root{--left:224px;--right:288px}}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--size-text);letter-spacing:-.01em;text-transform:lowercase;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;line-height:1.2;overflow:hidden}button,input,select{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.label{font-size:var(--size-label);letter-spacing:0;color:var(--text-70)}.btn{height:var(--control);padding:0 var(--s-12);border-radius:var(--r-s);background:var(--surface);transition:background var(--fast) var(--ease), transform var(--fast) var(--ease);border:0}.btn:hover{background:var(--surface-hover)}.btn:active{transform:scale(.97)}.btn--primary{background:var(--accent);color:var(--on-accent);font-weight:500}.btn--primary:hover{background:var(--accent);filter:brightness(1.08)}.btn--ghost{background:0 0}.btn:disabled{opacity:.4;cursor:default}.field{height:var(--control);width:100%;padding:0 var(--s-8);border-radius:var(--r-s);background:var(--surface);border:0}select.field{appearance:none;padding-right:var(--s-24);background-image:linear-gradient(45deg, transparent 50%, var(--text-70) 50%), linear-gradient(135deg, var(--text-70) 50%, transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 10px) 14px;background-repeat:no-repeat;background-size:4px 4px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:0s!important;animation-duration:0s!important}}.control{gap:var(--s-8);flex-direction:column;min-width:0;display:flex}.seg{grid-template-columns:repeat(var(--n), 1fr);height:var(--control);padding:var(--s-2);border-radius:var(--r-s);background:var(--surface);display:grid;position:relative}.seg__thumb{top:var(--s-2);bottom:var(--s-2);left:var(--s-2);width:calc((100% - var(--s-4)) / var(--n));background:var(--selected);transform:translateX(calc(var(--i) * 100%));transition:transform var(--slow) var(--ease);border-radius:4px;position:absolute}.seg__opt{z-index:1;font-size:var(--size-label);letter-spacing:0;color:var(--text-70);transition:color var(--fast) var(--ease);background:0 0;border:0;position:relative}.seg__opt:hover,.seg__opt.is-on{color:var(--text)}.swatches{align-items:center;gap:var(--s-8);display:flex}.swatch{border:1px solid var(--line);width:24px;height:24px;transition:transform var(--fast) var(--ease);border-radius:50%;padding:0;position:relative}.swatch:hover{transform:scale(1.1)}.swatch.is-on{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.swatch--custom{cursor:pointer;background:conic-gradient(#b4532a,#d9cbb3,#8c9a86,#2e3236,#b4532a);overflow:hidden}.swatch--custom input{opacity:0;cursor:pointer;position:absolute;inset:0}.swatch--custom span{pointer-events:none;border-radius:50%;position:absolute;inset:6px}.swatches__hex{font-size:var(--size-label);letter-spacing:0;color:var(--text-70);margin-left:auto}.group{border-bottom:1px solid var(--line);animation:group-in var(--slow) var(--ease) both;animation-delay:calc(var(--i) * 40ms + 80ms)}@keyframes group-in{0%{opacity:0;transform:translateY(var(--s-8))}}.group__head{align-items:center;gap:var(--s-8);height:var(--s-40);padding:0 var(--s-8) 0 var(--s-16);display:flex}.group__toggle{text-align:left;background:0 0;border:0;flex:1;height:100%;padding:0}.group__head:hover .group__toggle .label{color:var(--text)}.group__actions{align-items:center;display:flex}.group__chevbtn{width:var(--s-24);height:var(--s-24);background:0 0;border:0;border-radius:4px;place-items:center;padding:0;display:grid}.group__chevbtn:hover{background:var(--surface)}.group__chev{border-right:1px solid var(--text-70);border-bottom:1px solid var(--text-70);width:6px;height:6px;transition:transform var(--slow) var(--ease);transform:rotate(-135deg)}.group:not(.is-open) .group__chev{transform:rotate(45deg)}.group__body{transition:grid-template-rows var(--slow) var(--ease);grid-template-rows:1fr;display:grid}.group:not(.is-open) .group__body{grid-template-rows:0fr}.group__inner{gap:var(--s-16);padding:0 var(--s-16) var(--s-24);flex-direction:column;display:flex;overflow:hidden}.group:not(.is-open) .group__inner{padding-bottom:0}.knobs{gap:var(--s-16) var(--s-8);grid-template-columns:repeat(3,1fr);display:grid}.header{grid-area:head;grid-template-columns:var(--left) 1fr auto;height:var(--header);padding-right:var(--s-8);border-bottom:1px solid var(--line);align-items:center;display:grid;position:relative}.header__mark{padding-left:var(--s-16);font-size:var(--size-head);letter-spacing:-.04em;font-weight:700}.header__status{padding-left:var(--s-24)}.header__actions{gap:var(--s-4);display:flex}.xpanel{z-index:10;top:calc(var(--header) + var(--s-8));right:var(--s-8);gap:var(--s-16);width:calc(var(--right) - var(--s-16));padding:var(--s-16);border:1px solid var(--line);border-radius:var(--r-m);background:var(--raised);animation:panel-in var(--slow) var(--ease) both;flex-direction:column;display:flex;position:absolute}@keyframes panel-in{0%{opacity:0;transform:translateY(calc(-1 * var(--s-8))) scale(.98)}}.xpanel__info{margin:0}.xpanel__go{width:100%}.xpanel__progress{align-items:center;gap:var(--s-8);grid-template-columns:1fr auto;display:grid}.bar{background:var(--surface);border-radius:2px;height:4px;overflow:hidden}.bar span{background:var(--accent);transform-origin:0;height:100%;transition:transform var(--fast) var(--ease);display:block}.xpanel__done{justify-content:space-between;align-items:center;display:flex}.xpanel__again{height:auto;color:var(--text-70);padding:0;text-decoration:underline}.xpanel__error{color:var(--text);margin:0}.xpanel__close{top:var(--s-8);right:var(--s-8);width:24px;height:24px;color:var(--text-70);background:0 0;border:0;border-radius:4px;padding:0;position:absolute}.xpanel__close:hover{background:var(--surface);color:var(--text)}.library{border-right:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--line) transparent;flex-direction:column;grid-area:left;min-height:0;display:flex;overflow-y:auto}.tgrid{gap:var(--s-12) var(--s-8);grid-template-columns:1fr 1fr;display:grid}.tcard{gap:var(--s-4);text-align:left;animation:card-in var(--slow) var(--ease) both;animation-delay:calc(var(--i) * 40ms);background:0 0;border:0;flex-direction:column;padding:0;display:flex}@keyframes card-in{0%{opacity:0;transform:translateY(var(--s-8)) scale(.98)}}.tcard__frame{aspect-ratio:1;padding:var(--s-4);border-radius:var(--r-m);background:var(--surface);transition:box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);place-items:center;display:grid;box-shadow:inset 0 0 0 1px #0000}.tcard__frame canvas{max-width:100%;max-height:100%;transition:transform var(--slow) var(--ease);border-radius:4px;display:block}.tcard:hover .tcard__frame{background:var(--surface-hover)}.tcard:hover canvas{transform:scale(1.03)}.tcard.is-on .tcard__frame{box-shadow:inset 0 0 0 2px var(--accent)}.tcard__name{font-size:var(--size-label);letter-spacing:0;color:var(--text-70)}.tcard.is-on .tcard__name{color:var(--text)}.shots{gap:var(--s-12);flex-direction:column;display:flex}.stepper{align-items:center;gap:var(--s-4);display:flex}.stepper__btn{width:var(--control);height:var(--control);border-radius:var(--r-s);font-size:var(--size-head);transition:background var(--fast) var(--ease), transform var(--fast) var(--ease);background:0 0;border:0;padding:0;line-height:1}.stepper__btn:hover:not(:disabled){background:var(--surface)}.stepper__btn:active:not(:disabled){transform:scale(.92)}.stepper__btn:disabled{opacity:.3;cursor:default}.stepper__value{width:var(--s-40);height:var(--control);border-radius:var(--r-s);background:var(--surface);text-align:center;border:0;padding:0}.stepper__value:focus{color:var(--accent);outline:none}.shots__list{margin:0 calc(-1 * var(--s-8));flex-direction:column;padding:0;list-style:none;display:flex}.shot{border-radius:var(--r-s);animation:card-in var(--slow) var(--ease) both;animation-delay:calc(var(--i) * 30ms);transition:background var(--fast) var(--ease);align-items:center;display:flex;position:relative}.shot:hover{background:var(--surface)}.shots__list.is-settled .shot{animation:none}.shots__bar{align-items:center;gap:var(--s-4);height:var(--s-24);margin:0 calc(-1 * var(--s-8));display:flex}.shots__count{padding:0 var(--s-8);white-space:nowrap;font-size:var(--size-label);color:var(--text)}.textbtn{height:var(--s-24);white-space:nowrap;padding:0 var(--s-8);font-size:var(--size-label);letter-spacing:0;color:var(--text-70);transition:background var(--fast) var(--ease), color var(--fast) var(--ease);background:0 0;border:0;border-radius:4px}.textbtn:hover:not(:disabled){background:var(--surface);color:var(--text)}.textbtn:disabled{opacity:.3;cursor:default}.textbtn--push{margin-left:auto}.textbtn--strong,.textbtn--strong:hover:not(:disabled){color:var(--accent)}.shot.is-marked{background:var(--surface)}.shot.is-drag{opacity:.4}.shot.is-target{box-shadow:inset 0 0 0 1px var(--accent)}.shot.drop-before:before,.shot.drop-after:after{right:var(--s-8);left:var(--s-8);background:var(--accent);content:"";pointer-events:none;border-radius:1px;height:2px;position:absolute}.shot.drop-before:before{top:-1px}.shot.drop-after:after{bottom:-1px}.shot__mark{width:var(--s-32);height:var(--s-40);background:0 0;border:0;flex:none;place-items:center;padding:0;display:grid}.shot__mark>*{grid-area:1/1}.shot__box{width:var(--s-16);height:var(--s-16);border:1px solid var(--text-70);opacity:0;transition:opacity var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease);border-radius:4px;place-items:center;display:grid}.shot__mark:hover .shot__box{border-color:var(--text)}.shot:hover .shot__box,.shot__mark:focus-visible .shot__box,.is-selecting .shot__box{opacity:1}.shot:hover .shot__n,.shot__mark:focus-visible .shot__n,.is-selecting .shot__n{opacity:0}.shot.is-marked .shot__box{border-color:var(--accent);background:var(--accent)}.shot.is-marked .shot__box:after{border:solid var(--on-accent);content:"";border-width:0 2px 2px 0;width:4px;height:8px;margin-top:-2px;transform:rotate(45deg)}.shots__dragtag{padding:var(--s-4) var(--s-8);background:var(--accent);color:var(--on-accent);font-family:var(--font);font-size:var(--size-label);border-radius:4px;position:fixed;top:-100px;left:-100px}.shot__main{align-items:center;gap:var(--s-12);min-width:0;height:var(--s-40);padding:0 var(--s-32) 0 0;border-radius:var(--r-s);text-align:left;background:0 0;border:0;flex:1;display:flex}.shot__n{font-size:var(--size-label);letter-spacing:0;color:var(--text-70);transition:opacity var(--fast) var(--ease)}.shot__thumb{width:var(--s-24);height:var(--s-24);object-fit:cover;border-radius:4px;flex:none}.shot__thumb--empty{border:1px dashed var(--text-70);position:relative;overflow:hidden}.shot__thumb--empty img{object-fit:cover;opacity:.25;width:100%;height:100%}.shot__name{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:var(--size-label);letter-spacing:0;flex:1;overflow:hidden}.shot.is-empty .shot__name{color:var(--text-70)}.shot__remove{right:var(--s-4);width:var(--s-24);height:var(--s-24);color:var(--text-70);opacity:0;transition:opacity var(--fast) var(--ease);background:0 0;border:0;border-radius:4px;padding:0;position:absolute}.shot:hover .shot__remove,.shot__remove:focus-visible{opacity:1}.shot__remove:hover{background:var(--surface-hover);color:var(--text)}.preview{place-items:center;min-height:0;display:grid;position:relative;overflow:hidden}.preview__canvas{border-radius:var(--r-m);box-shadow:0 0 0 1px var(--line);display:block}.preview__drop{inset:var(--s-16);border:1px dashed var(--accent);border-radius:var(--r-m);opacity:0;pointer-events:none;transition:opacity var(--fast) var(--ease), transform var(--slow) var(--ease);background:#141414b3;place-items:center;display:grid;position:absolute;transform:scale(.98)}.preview.is-drop .preview__drop{opacity:1;transform:none}.xover{z-index:5;animation:xover-in var(--slow) var(--ease) both;background:#141414d1;place-items:center;display:grid;position:absolute;inset:0}@keyframes xover-in{0%{opacity:0}}.xover__box{align-items:center;gap:var(--s-12);flex-direction:column;width:240px;display:flex}.xover__mark{gap:var(--s-4);height:var(--s-24);align-items:flex-end;display:flex}.xover__mark span{width:var(--s-12);height:var(--s-16);background:var(--text);border-radius:2px;animation:1.2s cubic-bezier(.76,0,.24,1) infinite xover-step}.xover__mark span:nth-child(2){animation-delay:.12s}.xover__mark span:nth-child(3){animation-delay:.24s}@keyframes xover-step{0%,60%,to{background:var(--text);transform:translateY(0)}30%{transform:translateY(calc(-1 * var(--s-8)));background:var(--accent)}}.xover__title{margin:var(--s-4) 0 0;font-size:var(--size-head);font-weight:500}.xover__bar{background:var(--surface-hover);border-radius:2px;width:100%;height:4px;overflow:hidden}.xover__bar span{background:var(--accent);transform-origin:0;height:100%;transition:transform var(--fast) var(--ease);display:block}.xover__pct{margin:0}.xover__cancel{color:var(--text-70)}@media (prefers-reduced-motion:reduce){.xover__mark span{animation:none}}.bez{gap:var(--s-8);flex-direction:column;display:flex}.bez__svg{border-radius:var(--r-s);background:var(--surface);touch-action:none;width:100%;height:auto}.bez__base{stroke:var(--line);stroke-width:1px}.bez__arm{stroke:var(--text-70);stroke-width:1px}.bez__curve{fill:none;stroke:var(--text);stroke-width:2px}.bez__handle{fill:var(--text);cursor:grab;transition:r var(--fast) var(--ease), fill var(--fast) var(--ease)}.bez__handle:hover,.bez__handle:active{r:8px;fill:var(--accent)}.bez__nums{gap:var(--s-8);grid-template-columns:repeat(4,1fr);display:grid}.bez__nums label{gap:var(--s-4);flex-direction:column;display:flex}.bez__nums .field{font-size:var(--size-label);letter-spacing:0}.knob{align-items:center;gap:var(--s-8);flex-direction:column;min-width:0;display:flex}.knob__dial{background:var(--surface);cursor:ns-resize;touch-action:none;width:48px;height:48px;transition:background var(--fast) var(--ease), transform var(--fast) var(--ease);border:0;border-radius:50%;padding:0;position:relative}.knob__dial:hover{background:var(--surface-hover)}.knob__dial:active{transform:scale(.94)}.knob__dot{pointer-events:none;transition:transform .12s var(--ease);position:absolute;inset:0}.knob__dot:after{content:"";background:var(--text);border-radius:50%;width:4px;height:4px;margin-left:-2px;position:absolute;top:8px;left:50%}.knob__value{text-align:center;width:100%;height:16px;font-size:var(--size-label);letter-spacing:0;background:0 0;border:0;padding:0}.knob__value:focus{color:var(--accent);outline:none}.settings{border-left:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--line) transparent;grid-area:right;overflow:hidden auto}.transport{grid-template-columns:var(--control) 96px 1fr;align-items:center;gap:var(--s-16);height:var(--s-64);padding:0 var(--s-24);border-top:1px solid var(--line);display:grid}.transport__play{width:var(--control);height:var(--control);border-radius:var(--r-s);background:var(--surface);transition:background var(--fast) var(--ease), transform var(--fast) var(--ease);border:0;place-items:center;padding:0;display:grid}.transport__play:active{transform:scale(.92)}.transport__play.is-on{background:var(--accent);color:var(--on-accent)}.icon-play{border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:9px solid;width:0;height:0;margin-left:2px}.icon-pause{border-left:3px solid;border-right:3px solid;width:9px;height:11px}.transport__time{white-space:nowrap}.ruler{height:var(--control);border-radius:var(--r-s);background:var(--surface);cursor:ew-resize;touch-action:none;position:relative}.ruler__move{background:var(--line);pointer-events:none;border-radius:2px;position:absolute;top:12px;bottom:12px}.ruler__head{background:var(--accent);pointer-events:none;border-radius:1px;width:2px;margin-left:-1px;position:absolute;top:4px;bottom:4px}.app{grid-template:"head head head" var(--header) "left center right" 1fr / var(--left) 1fr var(--right);min-width:1024px;height:100%;display:grid}.center{grid-area:center;grid-template-rows:1fr auto;min-width:0;min-height:0;display:grid}
