/* FrameGlitch 共通スライダー：紫からシアンへ光る進行部分、目盛り入りのトラック、発光するつまみ。
   進行位置は range-sliders.js が --range-progress に入れる（Firefox は ::-moz-range-progress を使う）。
   :root:not(#_) で各画面の個別スタイルより優先する。 */
:root:not(#_) input[type=range]{
  --range-fill:linear-gradient(90deg,#7656d9 0%,#5b7fe6 55%,#3fc6e8 100%);
  appearance:none!important;-webkit-appearance:none!important;
  height:22px;min-height:22px;margin:0;padding:0!important;border:0;background:transparent;box-shadow:none;
  cursor:pointer;outline:none;accent-color:auto;touch-action:pan-y
}
/* WebKit/Blink：進行部分と未進行部分を1本のトラックで描く */
:root:not(#_) input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:99px;border:0;
  background:
    linear-gradient(90deg,#7656d9 0%,#5b7fe6 calc(var(--range-progress,50%) * .6),#3fc6e8 var(--range-progress,50%),transparent var(--range-progress,50%)),
    repeating-linear-gradient(90deg,#ffffff1c 0 1px,transparent 1px 12px),
    #15213a;
  box-shadow:inset 0 1px 2px #0009,0 0 0 1px #7fa2d82e
}
:root:not(#_) input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffffff 0 22%,#e4ebff 40%,#a796ff 78%,#7a63e0 100%);
  border:2px solid #0a1322;
  box-shadow:0 0 0 2px #9d8cff99,0 0 12px #63b8ffaa,0 2px 6px #000a;
  transition:transform .15s ease,box-shadow .15s ease
}
:root:not(#_) input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 3px #a796ffcc,0 0 18px #63c6ffcc,0 2px 6px #000a}
:root:not(#_) input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);box-shadow:0 0 0 6px #8f7bff40,0 0 22px #6fd0ffee,0 2px 6px #000a}
:root:not(#_) input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #0a1322,0 0 0 5px #8dcdff,0 0 18px #63c6ffcc}
/* Firefox */
:root:not(#_) input[type=range]::-moz-range-track{height:6px;border-radius:99px;border:0;background:repeating-linear-gradient(90deg,#ffffff1c 0 1px,transparent 1px 12px),#15213a;box-shadow:inset 0 1px 2px #0009,0 0 0 1px #7fa2d82e}
:root:not(#_) input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--range-fill)}
:root:not(#_) input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff 0 22%,#e4ebff 40%,#a796ff 78%,#7a63e0 100%);border:2px solid #0a1322;box-shadow:0 0 0 2px #9d8cff99,0 0 12px #63b8ffaa}
:root:not(#_) input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #0a1322,0 0 0 5px #8dcdff}
/* 無効時 */
:root:not(#_) input[type=range]:disabled{cursor:not-allowed;opacity:.5}
:root:not(#_) input[type=range]:disabled::-webkit-slider-thumb{background:#7d8aa3;box-shadow:none}
/* スライダーの横の数値は少し強調する */
:root:not(#_) label:has(>input[type=range])>output,:root:not(#_) .storyboard-size output{font-variant-numeric:tabular-nums;color:#c9dbff}
/* 進行部分は少し遅れてつまみを追いかける（登録したカスタムプロパティを補間） */
@property --range-progress{syntax:'<percentage>';inherits:true;initial-value:50%}
:root:not(#_) input[type=range]{transition:--range-progress .32s cubic-bezier(.34,1.56,.64,1)}
@media(prefers-reduced-motion:reduce){:root:not(#_) input[type=range]{transition:none}}