.weights,.modes{
  grid-row:1;grid-column:1 / -1;justify-self:center;
  min-width:0;max-width:100%;
  display:flex;align-items:center;gap:14px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  font-size:13px;white-space:nowrap;
}
.weights::-webkit-scrollbar,.weights-list::-webkit-scrollbar,.modes::-webkit-scrollbar,.modes-list::-webkit-scrollbar{display:none}
.weights > :not(.weights-list){flex:none}
.weights-list{display:flex;align-items:center;gap:14px;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.weights:empty{display:none}
.weight,.mode,.act{opacity:.34;transition:opacity .12s linear;padding:2px 0}
.weight{font-synthesis:none;line-height:1.2}
.weight:hover,.mode:hover,.act:hover{opacity:.8}
.weight.active,.mode.active,.act.active{opacity:1}
.sep{color:var(--faint);font-size:15px;user-select:none}
.modes-list{display:flex;align-items:baseline;gap:14px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.modes .tail{flex:none;display:flex;align-items:baseline;gap:14px;padding-left:4px}
.fx-history{display:flex;align-items:center;gap:10px;align-self:center}
.fx-history[hidden]{display:none}
.fx-history .sep{margin-left:4px}
.fx-step{display:grid;place-items:center;width:20px;height:20px;padding:0}
.fx-step:disabled{opacity:.12;cursor:default}
.fx-icon{display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;transition:scale .36s cubic-bezier(.34,1.56,.64,1)}
.fx-head{transition:translate .42s cubic-bezier(.22,1,.36,1)}
#btn-undo:not(:disabled):is(:hover, :focus-visible) .fx-head{translate:-1.5px 0}
#btn-redo:not(:disabled):is(:hover, :focus-visible) .fx-head{translate:1.5px 0}
.fx-step:not(:disabled):active .fx-icon{scale:.8;transition-duration:.08s}

#btn-outline{position:relative}
#btn-outline.loading{opacity:1}
#btn-outline.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}
@keyframes run-line{
  0%{scale:0 1;transform-origin:0 50%}
  50%{scale:1 1;transform-origin:0 50%}
  50.01%{scale:1 1;transform-origin:100% 50%}
  100%{scale:0 1;transform-origin:100% 50%}
}
@media (prefers-reduced-motion:reduce){ #btn-outline.loading::after{animation:none} }

@media (min-width:721px){ .weight-btn{display:none} }
@media (max-width:720px){
  .weights{position:relative;overflow:visible}
  .weight-btn[aria-expanded="true"]{opacity:1}
  .weights > .weights-list{
    position:absolute;left:50%;bottom:calc(100% + 10px);z-index:2;width:calc(100vw - 32px);translate:-50% 6px;
    flex-wrap:wrap;justify-content:center;gap:10px 18px;padding:14px 16px;border-radius:14px;overflow:visible;
    background:color-mix(in srgb, var(--bg) 97%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s cubic-bezier(.22,1,.36,1),translate .25s cubic-bezier(.22,1,.36,1),visibility 0s linear .25s;
  }
  .weights.wpop > .weights-list{opacity:1;visibility:visible;pointer-events:auto;translate:-50% 0;transition:opacity .25s cubic-bezier(.22,1,.36,1),translate .25s cubic-bezier(.22,1,.36,1),visibility 0s}
}