.magic-slider{position:relative;width:min(100%,650px);height:34px;margin:0 auto clamp(30px,8svh,72px)}
.magic-slider svg{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--blue);stroke-linecap:round;pointer-events:none;opacity:.78;transition:opacity .25s ease;-webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.magic-slider .magic-line-main{fill:none;stroke-width:1.25;vector-effect:non-scaling-stroke}
.magic-slider .magic-line-echo{fill:none;stroke-width:.55;stroke-dasharray:5 12;opacity:.38;vector-effect:non-scaling-stroke;animation:daily-line-drift 9s linear infinite}
.daily-magic-orb{position:absolute;z-index:2;left:50%;top:50%;width:11px;height:11px;border:1.5px solid var(--blue);border-radius:50%;background:var(--paper);transform:translate(-50%,-50%);pointer-events:none;transition:width .2s ease,height .2s ease,background .3s ease}
.magic-slider:hover .daily-magic-orb,.magic-slider:focus-within .daily-magic-orb{width:17px;height:17px}
.magic-slider.is-dragging .daily-magic-orb{width:21px;height:21px;background:color-mix(in srgb,var(--paper) 88%,var(--blue))}
.magic-slider:hover .magic-line-main,.magic-slider:focus-within .magic-line-main,.magic-slider.is-dragging .magic-line-main{stroke-width:1.7}
.magic-slider.is-dragging .magic-line-echo{opacity:.7;animation-duration:3s}
.magic-trail{position:absolute;z-index:1;width:3px;height:3px;border:1px solid var(--blue);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:magic-trail-fade .65s ease-out forwards}
.range-limit{position:absolute;top:33px;color:var(--muted);font:400 11px "Space Mono",monospace;letter-spacing:.1em;pointer-events:none}
.range-limit::before{content:"";position:absolute;top:-17px;width:1px;height:10px;background:rgba(65,105,232,.62)}
.range-min{left:0}.range-min::before{left:0}
.range-max{right:0}.range-max::before{right:0}
.page-shell .guess-control .magic-slider .guess-slider{position:absolute;z-index:3;inset:0;width:100%;height:34px;margin:0;opacity:.001;cursor:grab}
.page-shell .guess-control .magic-slider .guess-slider:active{cursor:grabbing}
.page-shell .guess-control .magic-slider .guess-slider::-webkit-slider-runnable-track{height:1px;background:transparent}
.page-shell .guess-control .magic-slider .guess-slider::-moz-range-track{height:1px;background:transparent}
@keyframes daily-line-drift{to{stroke-dashoffset:-68}}
@keyframes magic-trail-fade{to{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
@media(prefers-reduced-motion:reduce){.magic-line-echo{animation:none}}