/* App-level styling that cannot live in an inline style attribute: keyframes,
   placeholder colour, and the range track/thumb. Lifted from the design source. */

@keyframes dysuBeat { 0%,100%{transform:scale(1)} 11%{transform:scale(1.055)} 22%{transform:scale(1)} 33%{transform:scale(1.03)} 46%{transform:scale(1)} }
@keyframes dysuFloat { 0%,100%{transform:translateY(-6px) rotate(var(--rot,0deg))} 50%{transform:translateY(6px) rotate(var(--rot,0deg))} }
@keyframes dysuRise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }
@keyframes dysuFade { from{opacity:0} to{opacity:1} }
@keyframes dysuHalo { 0%,100%{opacity:.4} 50%{opacity:.78} }
@keyframes dysuSpinSlow { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes dysuTrack { from{background-position:0 0} to{background-position:38px 0} }

::placeholder { color:var(--text-faint); opacity:1; }

input[type=range]{ -webkit-appearance:none; appearance:none; background:transparent; }
input[type=range]::-webkit-slider-runnable-track{ height:2px; background:var(--border-strong); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; margin-top:-12px; border-radius:999px; background:var(--cyan-400); border:0; box-shadow:var(--glow-accent-md); cursor:grab; }
input[type=range]::-moz-range-track{ height:2px; background:var(--border-strong); }
input[type=range]::-moz-range-thumb{ width:26px; height:26px; border-radius:999px; background:var(--cyan-400); border:0; }