html,body{overscroll-behavior:none}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.app{grid-template:"header preview"minmax(0,1fr)"timeline timeline"min-content/200px 1fr;gap:.5rem;height:100dvh;padding:.5rem;display:grid}.app>div{border:1px solid var(--bs-gray-700);border-radius:var(--bs-border-radius-lg);padding:.5rem}.app__controls{grid-area:header;overflow-y:auto}.app__preview{grid-area:preview;min-width:0;min-height:0}.app__timeline{grid-area:timeline}.controls{flex-direction:column;gap:.5rem;display:flex}.controls__item{flex-direction:column;display:flex}.controls__extra{flex-direction:row;justify-content:space-evenly;gap:.5rem;padding-top:1rem;display:flex}.timeline{--slot-height:6rem;width:100%;height:180px;position:relative;overflow-x:scroll}.timeline__dial{background-color:var(--bs-danger);z-index:10;pointer-events:none;border-radius:2px;width:2px;transition:transform .1s linear;position:absolute;top:20px;bottom:0}.timeline__dial>div{position:relative}.timeline__dial>div:before{content:" ";border-style:solid;border-width:1rem .6rem 0;border-color:var(--bs-danger) transparent transparent;position:absolute;top:0;left:calc(1px - .6rem)}.timeline__ruler{background-image:url(/wiggly-compose-gif/timeline-tick.svg);background-size:var(--second-width) 100%;grid-auto-columns:var(--second-width);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;background-position:0 100%;background-repeat:repeat-x;grid-auto-flow:column;width:max-content;height:2rem;display:grid}.timeline__ruler>span{padding:0 .25rem;line-height:1;display:block}.timeline__items{width:max-content;padding-top:.5rem;display:flex}.timeline__item{-webkit-user-select:none;user-select:none;position:relative}.timeline__item-object{background-color:var(--bs-gray-700);border:2px solid var(--bs-body-bg);height:var(--slot-height);border-radius:var(--bs-border-radius-lg);padding:.25rem;transition:all .2s;overflow:hidden}.timeline__item:hover>.timeline__item-object{background-color:var(--bs-yellow);border-color:var(--bs-yellow)}.timeline__item--dragging>.timeline__item-object{background-color:var(--bs-yellow);border-color:var(--bs-yellow);opacity:.7;transform:rotate(-4deg)}.timeline__item-object>img{border-radius:var(--bs-border-radius-sm);width:auto;height:100%}.timeline__item-form{background-color:var(--bs-secondary);border-radius:var(--bs-border-radius-sm);box-shadow:var(--bs-box-shadow-lg);flex-direction:column;gap:.25rem;padding:.5rem;display:flex}.timeline__item-form>.input-group,.timeline__item-form input[type=range]{width:130px}.timeline__item-form+svg{left:.5rem!important}.timeline__item-form-actions{gap:.5rem;padding-top:.5rem;display:flex}.preview{flex-direction:column;align-items:center;gap:.5rem;width:100%;height:100%;display:flex}.preview__controls{flex-direction:row;gap:1rem;display:flex}.preview__video{flex:1;justify-content:center;align-items:center;width:100%;min-width:0;min-height:0;display:flex;overflow:hidden}.preview__video>video{object-fit:contain;width:auto;min-width:0;max-width:100%;height:auto;min-height:0;max-height:100%;display:block}.preview__status{justify-content:flex-end;gap:.25rem;width:100%;display:flex}