.app{grid-template-columns:minmax(min-content, 1fr) minmax(0, var(--viewer-w,74%));column-gap:var(--gap-col);row-gap:var(--gap-stack);height:100dvh;padding:var(--grid-margin);background:var(--c-bg);grid-template-rows:auto minmax(0,1fr) 65px 65px auto;display:grid}.header{grid-area:1/1/auto/-1;grid-template-columns:subgrid;column-gap:var(--gap-col);color:var(--c-fg);margin-bottom:calc(var(--gap-head) - var(--gap-stack));align-items:start;display:grid}.header__brand{grid-column:1}.header__where{gap:var(--gap-nav);display:flex}.header__link{color:var(--c-hover)}.header__link:hover,.header__link.is-current{color:var(--c-fg)}.header__viewer{justify-content:space-between;align-items:baseline;gap:var(--gap-col);grid-column:2;min-width:0;display:flex}.header__nav{justify-content:flex-end;gap:var(--gap-nav);white-space:nowrap;display:flex}.header__nav>*{cursor:pointer}.header__nav>:hover{color:var(--c-hover)}.region-bin{min-height:0;min-width:var(--col-left-min);flex-direction:column;grid-area:2/1;display:flex;overflow:hidden}.region-viewer{background:var(--c-bg);border-radius:var(--radius);transform-origin:100% 0;grid-area:2/2;min-height:0;position:relative;overflow:hidden}.region-bin,.region-viewer{margin-bottom:calc(var(--gap-col) - var(--gap-stack))}.region-viz{grid-area:3/1/5;align-items:stretch;min-height:0;display:flex;position:relative}.levels{width:100%;min-width:0;height:100%;position:relative}.levels canvas{position:absolute;inset:0}.region-timeline{grid-area:3/2;min-width:0}.region-transport{grid-area:4/2;min-width:0}.segbar{gap:var(--gap-ui);height:100%;display:flex}.seg{background:var(--c-fg);min-width:0;height:100%;color:var(--c-bg);border-radius:var(--radius);flex:1 1 0;justify-content:center;align-items:center;transition:background .1s,filter .1s;display:flex}.seg:hover{filter:brightness(1.06)}.seg--active{background:var(--c-hover)}.seg--dl{flex:0 0 65px}.foot{grid-area:5/1/auto/-1;grid-template-columns:subgrid;column-gap:var(--gap-col);color:var(--c-divider);padding-block:var(--sp-xs);margin-top:calc(var(--gap-foot) - var(--gap-stack));align-items:center;display:grid}.foot__left{align-items:center;gap:var(--sp-l);white-space:nowrap;grid-column:1;display:flex}.foot__viewer{justify-content:space-between;align-items:center;gap:var(--gap-col);grid-column:2;min-width:0;display:flex}.foot__mid,.foot__right{align-items:center;gap:var(--sp-l);min-width:0;display:flex}.loops{gap:var(--sp-s);display:flex}.loopbtn{aspect-ratio:1;border:var(--line-w) solid var(--c-hover);border-radius:var(--radius);height:1.7em;color:var(--c-hover);justify-content:center;align-items:center;transition:color .1s,background .1s,border-color .1s;display:inline-flex}.loopbtn:hover{color:var(--c-fg);border-color:var(--c-fg)}.loopbtn--active{background:var(--c-fg);border-color:var(--c-fg);color:var(--c-bg)}.loopbtn--pending{border-color:var(--c-accent);color:var(--c-accent)}.muting-cta{align-items:center;gap:var(--sp-s);color:var(--c-accent);animation:2.4s ease-in-out infinite muting-blink;display:inline-flex}.muting-cta:hover{animation:none}@keyframes muting-blink{0%,to{opacity:1}50%{opacity:.55}}.mute-ctrl{flex:none}.icon-btn{color:var(--c-fg);display:inline-flex}.icon-btn:hover{color:var(--c-hover)}.foot__clear{color:var(--c-fg);text-transform:uppercase;transition:color .1s}.foot__clear:hover:not(:disabled){color:var(--c-accent)}.foot__clear:disabled{color:var(--c-divider);cursor:default}.foot__pos,.foot__beats,.foot__dur{color:var(--c-divider);white-space:nowrap}.foot__hint{color:var(--c-hover);white-space:nowrap;text-overflow:ellipsis;transition:color .15s;overflow:hidden}.foot__hint--flash{color:var(--c-white)}.foot__undo{color:var(--c-hover);text-transform:uppercase;flex:none;transition:color .15s}.foot__undo--hot{color:var(--c-accent)}.foot__undo:hover{color:var(--c-white)}.foot__fs{flex:none}.stage{position:absolute;inset:0}.stage__canvas{object-fit:contain;object-position:right top;z-index:0;width:100%;height:100%;position:absolute;inset:0}.stage__vid{object-fit:contain;object-position:right top;z-index:1;background:0 0;width:100%;height:100%;display:none;position:absolute;inset:0}@media (width<=860px){:root{--fs-min:11px;--intro-cols:24}.app{column-gap:0;row-gap:var(--gap-stack);padding:var(--sp-l);grid-template-rows:auto auto 44px 44px minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}.header{justify-content:space-between;gap:var(--sp-s) var(--sp-l);margin-bottom:calc(var(--sp-l) - var(--gap-stack));flex-wrap:wrap;grid-column:1;display:flex}.region-viewer{margin-bottom:calc(var(--sp-l) - var(--gap-stack))}.region-bin{margin-top:calc(var(--sp-l) - var(--gap-stack));margin-bottom:0}.header__viewer{flex:auto}.header__nav{gap:var(--sp-l)}.region-viewer{aspect-ratio:16/9;grid-area:2/1;min-height:0}.region-timeline{grid-area:3/1}.region-transport{grid-area:4/1}.region-bin{grid-area:5/1}.region-viz{display:none}.stage__vid,.stage__canvas{object-position:center}.foot{margin-top:calc(var(--sp-l) - var(--gap-stack));align-items:baseline;gap:var(--sp-m) var(--sp-l);flex-wrap:wrap;grid-area:6/1;display:flex}.foot__left{flex:100%;justify-content:space-between}.foot__viewer{gap:var(--sp-m) var(--sp-l);flex-wrap:wrap;flex:100%}.foot__right{flex:100%;justify-content:space-between}.foot__hint{min-width:0}.app--fullscreen .region-viewer{grid-area:2/1}}.app--intro .region-viewer,.app--leaving .region-viewer{will-change:transform}.app--intro .region-viewer{transform:translateY(calc(var(--intro-dy,0px) * -1)) scale(var(--intro-scale,1))}.app--intro :is(.header,.region-bin,.region-viz,.region-timeline,.region-transport,.foot){opacity:0;visibility:hidden;pointer-events:none}.app--intro .stage__hit{pointer-events:none}.app--leaving .region-viewer{transition:transform calc(var(--beat) * 2) var(--ease-handover)}.app--leaving :is(.header,.region-viz,.region-timeline,.region-transport,.foot){animation:build-in var(--dur-spring) var(--ease-spring) backwards}.app--leaving .header{animation-delay:var(--beat)}.app--leaving .region-viz,.app--leaving .region-timeline,.app--leaving .region-transport{animation-delay:calc(var(--beat) * 1.5)}.app--leaving .foot{animation-delay:calc(var(--beat) * 1.75)}.app--leaving .bin{--deal-delay:calc(var(--beat) * 1.25)}@keyframes build-in{0%{opacity:0}}.app--fullscreen .region-bin,.app--fullscreen .region-viz,.app--fullscreen .region-transport,.app--fullscreen .region-timeline{display:none}.app--fullscreen .region-viewer{grid-area:2/1/5/-1}.app--fullscreen .foot__left,.app--fullscreen .foot__hint{display:none}.app--fullscreen .stage__vid,.app--fullscreen .stage__canvas{object-position:center}.app--fullscreen .foot__viewer{grid-column:1/-1}.bin{gap:var(--gap-row);scrollbar-width:none;flex-direction:column;flex:auto;align-items:stretch;min-height:0;display:flex;overflow:hidden auto}.bin::-webkit-scrollbar{display:none}.bin--enter .cliprow{animation:row-deal var(--dur-spring) var(--ease-spring) backwards;animation-delay:calc(var(--deal-delay,0s) + var(--i,0) * 22ms)}@keyframes row-deal{0%{opacity:0;transform:translateY(-5px)}}.cliprow{--row-h:1.45em;transition:padding-bottom var(--dur-reveal) var(--ease-slide);flex-direction:column;flex:none;gap:0;display:flex}.cliprow--open{padding-bottom:var(--gap-row)}.cliprow__head{min-height:var(--row-h);align-items:center;gap:var(--sp-m);color:var(--c-fg);cursor:pointer;display:flex}.cliprow__name{flex:auto;min-width:0;transition:color .1s}.pill__label{margin-block:-.15em;padding-block:.15em}.cliprow__head:hover .cliprow__name,.cliprow--paired .cliprow__name,.cliprow--removing .cliprow__name,.cliprow--onair .cliprow__name{color:var(--brand)}.cliprow__x{width:var(--row-h);height:var(--row-h);color:var(--brand);flex:none;display:inline-flex}.cliprow__x svg{width:100%;height:100%}.pill{height:var(--row-h);padding:0 var(--pad-pill-x);border-radius:var(--radius);white-space:nowrap;animation:pill-in var(--dur-pop) var(--ease-spring) backwards;flex:none;justify-content:center;align-items:center;transition:color .1s,background .1s,border-color .1s,filter .1s;display:inline-flex}.pill--add,.pill--remove{animation-delay:calc(var(--dur-pop) / 3)}@keyframes pill-in{0%{opacity:0;transform:translateY(-2px)scale(.96)}}.pill--info{border:var(--line-w) solid var(--c-fg);color:var(--c-fg)}.pill--info:hover{border-color:var(--c-white);color:var(--c-white)}.pill--add{background:var(--brand);color:var(--on-brand)}.pill--add:hover{filter:brightness(1.1)}.pill--remove{border:var(--line-w) solid var(--brand);color:var(--brand)}.pill--remove:hover{filter:brightness(1.15)}.pill--shake{animation:.35s pill-shake}@keyframes pill-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-3px)}40%,80%{transform:translate(3px)}}.cliprow__reveal{transition:grid-template-rows var(--dur-reveal) var(--ease-slide), padding-top var(--dur-reveal) var(--ease-slide);grid-template-rows:0fr;padding-top:0;display:grid;overflow:hidden}.cliprow--open .cliprow__reveal{padding-top:var(--gap-row);grid-template-rows:1fr}.cliprow__inner{min-height:0}.cliprow__controls{gap:var(--gap-nav);padding-top:var(--sp-s);color:var(--c-hover);align-items:center;display:flex}.cliprow__act{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--c-hover);cursor:pointer;background:0 0;border:0;padding:0}.cliprow__act:hover{color:var(--c-fg)}.cliprow__act--remove:hover{color:var(--c-accent)}.cliprow__thumb{aspect-ratio:16/9;border-radius:var(--radius);background:var(--c-charcoal);cursor:grab;width:100%;min-height:0;position:relative;overflow:hidden}.cliprow--used .cliprow__thumb{cursor:default}.cliprow__vid{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.cliprow--land .cliprow__name{animation:.4s row-land}.cliprow--land .pill--action{animation:.4s row-land-dot}@keyframes row-land{0%,35%{color:var(--brand)}}@keyframes row-land-dot{0%,35%{background:var(--brand);border-color:var(--brand)}}.pill--action{min-width:var(--row-h);height:var(--row-h);border-radius:var(--radius);pointer-events:none;background:var(--c-fg);border:var(--line-w) solid var(--c-fg);color:var(--on-brand);transition:grid-template-columns var(--dur-reveal) var(--ease-slide), padding var(--dur-reveal) var(--ease-slide), background .12s, border-color .12s, color .12s;flex:none;grid-template-columns:0fr;align-items:center;padding:0;display:grid}.pill__label{white-space:nowrap;opacity:0;min-width:0;transition:opacity var(--dur-pop);overflow:hidden}.cliprow--used .pill--action{background:0 0}.cliprow__head:hover .pill--action,.cliprow--paired .pill--action{background:var(--brand);border-color:var(--brand)}.cliprow--used .cliprow__head:hover .pill--action,.cliprow--used.cliprow--paired .pill--action{background:0 0}.cliprow--onair .pill--action{border-color:var(--brand);background:0 0}.cliprow--open .pill--action{padding:0 var(--pad-pill-x);pointer-events:auto;grid-template-columns:1fr}.cliprow--open .pill__label{opacity:1;transition-delay:calc(var(--dur-reveal) * .35)}.cliprow--open .pill--add{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}.cliprow--open .pill--remove{border-color:var(--brand);color:var(--brand);background:0 0}.intro{z-index:3;pointer-events:none;color:var(--c-fg);position:fixed;inset:0;overflow:hidden}.intro__stage{top:var(--grid-margin);right:var(--grid-margin);width:var(--intro-thumb-w);aspect-ratio:16/9;pointer-events:auto;cursor:pointer;position:absolute}.intro__row{left:var(--grid-margin);right:var(--grid-margin);top:calc(var(--grid-margin) + var(--intro-thumb-w) * 9 / 16 + var(--gap-row));justify-content:flex-end;gap:var(--gap-col);pointer-events:auto;display:flex;position:absolute}.intro__copy{left:0;right:calc(var(--intro-thumb-w) + var(--gap-col));white-space:pre-line;margin:0;position:absolute;bottom:0}.intro__choices{width:var(--intro-thumb-w);gap:calc(var(--grid-gutter) * 2);flex:none;display:flex}.intro__choice{color:var(--c-fg);white-space:nowrap;transition:color var(--dur-pop)}.intro__choice:hover{color:var(--c-white)}.intro__mark{left:0;right:0;bottom:var(--grid-margin);height:var(--mark-h);color:var(--c-fg);pointer-events:none;user-select:none;position:absolute;overflow:hidden}.intro__mark-slide{height:100%}.intro__mark-run{align-items:center;gap:var(--mark-gap);width:max-content;height:100%;animation:mark-in var(--mark-enter,12s) linear backwards, mark-run var(--mark-cycle) linear var(--mark-enter,12s) infinite;display:flex}.intro__mark-run svg{height:100%;width:var(--mark-w);fill:currentColor;flex:none;display:block}@keyframes mark-in{0%{transform:translate(100vw)}}@keyframes mark-run{to{transform:translateX(calc(-1 * var(--mark-cycle-w)))}}.intro__row{animation:intro-in var(--beat) linear calc(var(--beat) * .75) backwards}@keyframes intro-in{0%{opacity:0}}.app--answered .intro,.app--leaving .intro{pointer-events:none}.app--answered .intro__row,.app--leaving .intro__row{animation:intro-out calc(var(--beat) / 2) ease-in forwards}.app--leaving .intro__mark-slide{animation:mark-out var(--beat) var(--ease-slide) forwards}@keyframes intro-out{to{opacity:0;transform:translateY(-4px)}}@keyframes mark-out{to{transform:translateY(100%)}}@media (width<=860px){.intro__row{left:var(--sp-l);right:var(--sp-l);top:calc(var(--sp-l) + var(--intro-thumb-w) * 9 / 16 + var(--gap-row));justify-content:flex-start;gap:var(--gap-row);flex-direction:column}.intro__copy{position:static;right:auto}.intro__stage{top:var(--sp-l);right:var(--sp-l)}.intro__choices{width:auto}.intro__mark{bottom:var(--sp-l)}}.intro__who{white-space:pre-line;color:var(--c-fg);margin:0}.intro__what{margin:var(--gap-head) 0 0;white-space:pre-line;color:var(--c-fg)}.stage__hit{z-index:2;cursor:pointer;background:0 0;position:absolute;inset:0}.timeline{user-select:none;width:100%;height:100%;position:relative}.timeline__clips{gap:var(--gap-ui);height:100%;display:flex}.brick{border-radius:var(--radius);cursor:grab;min-width:0;height:100%;transition:flex-grow var(--dur-spring) var(--ease-spring);flex:0 1 0;justify-content:center;align-items:center;display:flex;position:relative}.brick--bump{cursor:default;background:var(--c-divider)!important}.brick--bump+.brick--bump{margin-left:calc(-1 * var(--gap-ui));border-top-left-radius:0;border-bottom-left-radius:0}.brick--bump:has(+.brick--bump){border-top-right-radius:0;border-bottom-right-radius:0}.brick--dragging{opacity:.25;cursor:grabbing}.brick--gap{pointer-events:none;border-radius:var(--radius);background:var(--c-bg)!important}.brick:not(.brick--bump):not(.brick--gap):hover{filter:brightness(1.08)}.brick--linked:not(.brick--bump){animation:1.1s ease-in-out infinite brick-link}@keyframes brick-link{0%,to{opacity:1}50%{opacity:.62}}.brick__handle{gap:var(--sp-xxs);pointer-events:none;display:none}.brick:not(.brick--bump):not(.brick--dragging):hover .brick__handle{display:flex}.brick__handle i{background:var(--c-bg);opacity:.6;width:2px;height:14px}.timeline__clips--deal .brick:not(.brick--gap){animation:brick-deal .4s var(--ease-spring) backwards}@keyframes brick-deal{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}.timeline__playhead{background:var(--c-bg);z-index:3;cursor:ew-resize;will-change:left;width:3px;margin-left:-1.5px;position:absolute;top:0;bottom:0;left:0}.timeline__playhead:after{content:"";background:var(--c-accent);width:1px;position:absolute;top:0;bottom:0;left:1px}.timeline__playhead:before{content:"";position:absolute;inset:0 -11px}.timeline:hover .timeline__playhead:before{background:linear-gradient(var(--c-accent), var(--c-accent)) center top / 9px 3px no-repeat, linear-gradient(var(--c-accent), var(--c-accent)) center bottom / 9px 3px no-repeat}.timeline__playhead:hover:after{width:3px;left:0}.dev{z-index:40;background:var(--c-bg);border-left:var(--line-w) solid var(--c-divider);flex-direction:column;width:max(260px,26em);display:flex;position:fixed;top:0;bottom:0;right:0}.dev__head{padding:var(--sp-l) var(--sp-xl);border-bottom:var(--line-w) solid var(--c-divider);color:var(--c-white);justify-content:space-between;align-items:center;display:flex}.dev__close{color:var(--c-fg)}.dev__close:hover{color:var(--c-hover)}.dev__body{padding:var(--sp-l) var(--sp-xl) var(--sp-xl);scrollbar-width:thin;flex:1 1 0;overflow-y:auto}.dev__group{border-bottom:var(--line-w) solid var(--c-divider)}.dev__group[open]{padding-bottom:var(--sp-l)}.dev__section{padding:var(--sp-m) 0;color:var(--c-hover);cursor:pointer;justify-content:space-between;align-items:center;gap:var(--sp-m);list-style:none;display:flex}.dev__section::-webkit-details-marker{display:none}.dev__section:hover,.dev__group[open]>.dev__section{color:var(--c-fg)}.dev__section:after{content:"+";color:var(--c-hover);font-variant-numeric:tabular-nums}.dev__group[open]>.dev__section:after{content:"–"}.dev__hint{margin:0 0 var(--sp-m);color:var(--c-hover);text-transform:none;line-height:1.6}.dev__hint b{color:var(--c-fg);font-weight:500}.dev__row{justify-content:space-between;align-items:center;gap:var(--sp-m);padding:var(--sp-xs) 0;color:var(--c-fg);display:flex}.dev__row span:first-child{white-space:nowrap}.dev__row input[type=range]{min-width:0;accent-color:var(--c-accent);flex:0 110px}.dev__row input[type=color]{border:var(--line-w) solid var(--c-divider);cursor:pointer;background:0 0;width:26px;height:18px;padding:0}.dev__row input[type=checkbox]{accent-color:var(--c-accent)}.dev__field{gap:var(--sp-xs);padding:var(--sp-xs) 0;color:var(--c-fg);flex-direction:column;display:flex}.dev__field input,.dev__field textarea{width:100%;padding:var(--sp-xs) var(--sp-s);background:var(--c-bg);color:var(--c-fg);border:var(--line-w) solid var(--c-divider);border-radius:var(--radius);font:inherit;text-transform:none}.dev__field textarea{resize:vertical;line-height:1.35}.dev__field input:focus,.dev__field textarea:focus{border-color:var(--c-fg);outline:none}.dev__eases{gap:var(--sp-s);display:flex}.dev__ease{color:var(--c-hover);text-transform:uppercase}.dev__ease:hover{color:var(--c-fg)}.dev__ease--on{color:var(--c-accent)}.dev__actions{gap:var(--sp-m);margin-top:var(--sp-xl);display:flex}.dev__actions button{padding:var(--sp-s) 0;border:var(--line-w) solid var(--c-fg);color:var(--c-fg);text-transform:uppercase;flex:1 1 0}.dev__actions button:hover{background:var(--c-fg);color:var(--c-bg)}.dev__note{margin:var(--sp-l) 0 0;color:var(--c-divider);line-height:1.6}.dev-grid{z-index:35;column-gap:var(--grid-gutter);padding:var(--grid-margin);pointer-events:none;grid-template-columns:repeat(24,1fr);display:grid;position:fixed;inset:0}.dev-grid>div{background:color-mix(in srgb, var(--c-accent) 8%, transparent)}