/* Homepage count control only. Canvas count controls keep their own UI. */
html body #composer-shell #output-count-menu.nano-count-slider-menu {
  --count-rail:rgba(255,239,220,.16);--count-fill:#ffd478;--count-fill-end:#ffa347;
  --count-thumb:#fff7ef;--count-tip-ink:#3a1d08;--count-focus:rgba(255,212,120,.6);
  box-sizing:border-box!important;position:absolute!important;
  width:300px!important;min-width:0!important;max-width:calc(100vw - 24px)!important;
  height:62px!important;min-height:0!important;max-height:none!important;
  padding:12px 16px!important;left:50%!important;right:auto!important;
  top:auto!important;bottom:calc(100% + 10px)!important;transform:translateX(-50%)!important;
  border:1px solid rgba(255,232,207,.14)!important;border-radius:18px!important;
  background:linear-gradient(rgba(44,25,16,.98),rgba(17,13,12,.98))!important;
  box-shadow:0 24px 60px #0005!important;overflow:visible!important;
  gap:0!important;grid-template-columns:none!important;flex-direction:column!important;
}
html body #composer-shell #output-count-menu.nano-count-slider-menu:not(.open){display:none!important}
html body #composer-shell #output-count-menu.nano-count-slider-menu.open{display:block!important}
#output-count-menu .nano-count-slider{position:relative;display:block;width:100%;height:36px;touch-action:none;cursor:pointer;outline:none;border-radius:10px;user-select:none}
#output-count-menu .nano-count-slider:focus-visible{box-shadow:0 0 0 2px var(--count-focus)}
#output-count-menu .nano-count-slider[aria-disabled=true]{cursor:default;opacity:.65}
#output-count-menu .nano-count-track{position:absolute;left:8px;right:8px;top:16px;height:4px;border-radius:4px;background:var(--count-rail)}
#output-count-menu .nano-count-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--count-fill-end),var(--count-fill))}
#output-count-menu .nano-count-thumb,#output-count-menu .nano-count-tip{left:calc(8px + (100% - 16px)*var(--count-ratio,0));pointer-events:none}
#output-count-menu .nano-count-thumb{position:absolute;box-sizing:border-box;top:10px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--count-thumb);border:3px solid var(--count-fill);box-shadow:0 1px 4px #0003}
#output-count-menu .nano-count-tip{position:absolute;top:-25px;transform:translateX(-50%);padding:3px 8px;border-radius:8px;background:var(--count-fill);color:var(--count-tip-ink);font:700 12px/18px "Segoe UI","Microsoft YaHei",sans-serif;white-space:nowrap;opacity:0;transition:opacity .12s;box-shadow:0 2px 8px #0002}
#output-count-menu .nano-count-slider:not([aria-disabled=true]):is(:hover,.is-dragging) .nano-count-tip{opacity:1}
html body.x-cg-skin #composer-shell #output-count-menu.nano-count-slider-menu{
  --count-rail:#dedfe1;--count-fill:#50545b;--count-fill-end:#50545b;--count-thumb:#fff;--count-tip-ink:#fff;--count-focus:var(--xt-focus,#4d57b8);
  background:#fff!important;border-color:#dedfe1!important;box-shadow:0 20px 46px #11121424!important;
}
html[data-xcg-theme=night] body.x-cg-skin #composer-shell #output-count-menu.nano-count-slider-menu,
html body.x-cg-skin.xcg-night #composer-shell #output-count-menu.nano-count-slider-menu{
  --count-rail:#454c55;--count-fill:#e7ebf0;--count-fill-end:#e7ebf0;--count-thumb:#1b1f24;--count-tip-ink:#17191d;--count-focus:var(--xt-focus,#a6b3ff);
  background:#1b1f24!important;border-color:#3b424b!important;box-shadow:0 22px 50px #0006!important;
}
