body:not(.reel) :is(.reel-out,.reel-row,.reel-canvas,.reel-frame,.reel-line,.reel-size){display:none}
.reel :is(.count,.count-label,#btn-local,.sources){display:none}
.reel .stage-scroll,.reel .weights,.reel .morph{visibility:hidden}

.reel-canvas{position:absolute;pointer-events:none}
.reel-frame{position:absolute;pointer-events:none;transition:left .46s cubic-bezier(.22,1,.36,1),top .46s cubic-bezier(.22,1,.36,1),width .46s cubic-bezier(.22,1,.36,1),height .46s cubic-bezier(.22,1,.36,1)}
.reel-frame i{position:absolute;width:14px;height:14px;border:0 solid var(--faint)}
.reel-frame i:nth-child(1){left:-1px;top:-1px;border-left-width:1px;border-top-width:1px}
.reel-frame i:nth-child(2){right:-1px;top:-1px;border-right-width:1px;border-top-width:1px}
.reel-frame i:nth-child(3){left:-1px;bottom:-1px;border-left-width:1px;border-bottom-width:1px}
.reel-frame i:nth-child(4){right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px}

.reel-size{position:absolute;left:50%;bottom:52px;translate:-50% 0;display:flex;align-items:center;gap:14px;font-size:13px;line-height:18px;color:var(--dim);white-space:nowrap}
.reel-res{display:flex;align-items:center;gap:12px}
.reel-res[hidden]{display:none}
.reel-size .sep{font-size:13px}

.reel-row .tail{align-items:center}
@media (max-width:720px){
  .reel-row{flex-wrap:wrap;justify-content:center;row-gap:12px;overflow:visible}
  .reel-row .modes-list{flex:1 0 100%}
  .reel-row .tail{flex:1 0 100%;min-width:0;padding-left:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;justify-content:safe center}
  .reel-row .tail::-webkit-scrollbar{display:none}
  .reel-row .tail > *{flex:none}
  .reel-row .tail > .sep:first-child{display:none}
  body.reel .note{top:12px;bottom:auto;transition:opacity .45s cubic-bezier(.22,1,.36,1),translate .45s cubic-bezier(.22,1,.36,1)}
  body.reel .note:not(.on){translate:-50% -8px}
  .reel-row{position:relative}
  .reel-row .mini .mini-line{display:none}
  .reel-row .mini.open{opacity:1}
  .reel-pop{
    position:absolute;left:0;right:0;bottom:calc(100% + 10px);z-index:2;
    display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;
    background:color-mix(in srgb, var(--bg) 97%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    font-size:13px;opacity:0;translate:0 6px;transition:opacity .25s cubic-bezier(.22,1,.36,1),translate .25s cubic-bezier(.22,1,.36,1);
  }
  .reel-pop.on{opacity:1;translate:0 0}
  .reel-size{transition:opacity .25s cubic-bezier(.22,1,.36,1)}
  body:has(.reel-pop.on) .reel-size{opacity:0;pointer-events:none}
  .reel-pop[hidden]{display:none}
  .reel-pop-line{position:relative;flex:1;height:1px;background:currentColor;touch-action:none}
  .reel-pop-line::before{content:"";position:absolute;inset:-18px -10px}
  .reel-pop .mini-knob{width:13px;height:13px}
  .reel-pop-value{min-width:3em;text-align:right;font-variant-numeric:tabular-nums}
  .reel-pop-reset{flex:none}
  body:is(.reel, .outlined) :is(#btn-grid,#btn-bookmarks){display:none}
}
@media (min-width:721px){ .reel-pop{display:none} }
.mini{display:flex;align-items:center;gap:9px;opacity:.34;transition:opacity .12s linear;font-size:13px;outline-offset:4px}
.mini:hover,.mini:focus-visible,.mini.dragging{opacity:1}
.mini-line{position:relative;width:56px;height:1px;background:currentColor;cursor:ew-resize;touch-action:none}
.mini-line::before{content:"";position:absolute;inset:-11px -7px}
.mini-knob{position:absolute;top:50%;left:calc(var(--t, 0) * 100%);width:7px;height:7px;border-radius:50%;background:currentColor;translate:-50% -50%;pointer-events:none}
.reel-opt{display:flex;gap:10px;font-size:13px}
.reel-opt[hidden]{display:none}
.opt{opacity:.34;transition:opacity .2s linear}
.opt:hover,.opt.active{opacity:1}
.mini-value{min-width:2.6em;font-size:11px;font-variant-numeric:tabular-nums}

.reel-out{display:flex;align-items:center;gap:16px}
.reel-ratios{display:flex;gap:12px}
.ratio,.res{transition:color .2s linear;font-variant-numeric:tabular-nums}
.ratio:hover,.ratio.active,.res:hover,.res.active{color:var(--fg)}
.reel-export.busy{color:var(--fg)}
.reel-export.busy::before{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;scale:var(--p, 0) 1;transform-origin:0 50%;pointer-events:none}
.reel-busy :is(.bar-left,.weights-only,.search,#btn-grid,#btn-bookmarks,#btn-theme,.reel-size,.rail-wrap,.slider){opacity:.3;transition:opacity .3s linear}

#btn-reel{position:relative}
#btn-reel.loading{opacity:1}
#btn-reel.loading::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;animation:run-line 1s cubic-bezier(.65,0,.35,1) infinite}
@media (prefers-reduced-motion:reduce){ #btn-reel.loading::after{animation:none} .reel-frame{transition:none} }