.juliet-dial{--juliet-ink:var(--ink,#141416);--juliet-ink-2:var(--ink-2,#3a3a3e);--juliet-hair:var(--hair,#d9d9d9);--juliet-ease-snap:var(--ease-snap,cubic-bezier(0.2,0.9,0.2,1));--juliet-ease-pop:var(--ease-pop,cubic-bezier(0.34,1.56,0.64,1));--juliet-font:var(
    --font-inter-tight,-apple-system,blinkmacsystemfont,"SF Pro Text",sans-serif
  );width:100%;display:grid;grid-gap:14px;gap:14px;font-family:var(--juliet-font)}.juliet-dial--landing{animation:juliet-rise .9s .22s var(--juliet-ease-snap) both}.juliet-dial--mini{width:100%;max-width:100%;margin:0 auto;justify-self:center;gap:10px}.juliet-dial--mini .juliet-dial-labels span,.juliet-dial--mini .juliet-dial-labels span.is-lit{color:var(--ink-3,#6a6a72);transform:none}.juliet-dial--mini .juliet-score,.juliet-dial--mini .juliet-score.is-extreme{color:var(--ink-3,#6a6a72)}.juliet-track{position:relative;height:32px;display:flex;align-items:center}.juliet-rail{position:relative;width:100%;height:1px;background-color:var(--juliet-hair);background-image:linear-gradient(to right,var(--pink),var(--pink));background-repeat:no-repeat;background-size:0 100%;background-position-x:0;cursor:pointer}.juliet-rail:before{content:"";position:absolute;inset:-16px 0}.juliet-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:transparent;border:0;opacity:0;cursor:-webkit-grab;cursor:grab;z-index:3;-moz-appearance:none;appearance:none;-webkit-appearance:none}.juliet-input:active{cursor:-webkit-grabbing;cursor:grabbing}.juliet-input::-webkit-slider-runnable-track{height:100%;background:transparent;border:0}.juliet-input::-moz-range-track{height:100%;background:transparent;border:0}.juliet-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;background:transparent;border:0}.juliet-input::-moz-range-thumb{width:32px;height:32px;background:transparent;border:0}.juliet-input:focus-visible{outline:none}.juliet-thumb{position:absolute;top:50%;left:50%;width:24px;height:24px;border-radius:999px;background:#fff;border:2px solid var(--pink);box-shadow:0 4px 14px rgba(155,0,255,.3),0 2px 5px rgba(155,0,255,.18);transform:translate(-50%,-50%);pointer-events:none;transition:left .16s var(--juliet-ease-snap),transform .16s var(--juliet-ease-pop),box-shadow .22s var(--juliet-ease-snap),border-color .22s var(--juliet-ease-snap);z-index:2}.juliet-thumb:after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid rgba(255,80,155,.22);opacity:0;animation:juliet-breathe 2.8s ease-in-out infinite}@keyframes juliet-breathe{0%,to{opacity:0;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}.juliet-track:hover .juliet-thumb{box-shadow:0 6px 20px rgba(155,0,255,.42),0 2px 6px rgba(155,0,255,.22)}.juliet-thumb.is-focused{border-color:var(--purple);box-shadow:0 0 0 4px rgba(155,0,255,.35),0 0 0 6px rgba(255,255,255,.9),0 4px 14px rgba(155,0,255,.3)}.juliet-thumb.is-dragging{transform:translate(-50%,-50%) scale(1.18);box-shadow:0 8px 24px rgba(155,0,255,.48),0 2px 6px rgba(155,0,255,.25)}.juliet-thumb.is-dragging:after{animation:none;opacity:0}.juliet-thumb.is-heart-beat{animation:juliet-heart-beat .72s var(--juliet-ease-pop)}@keyframes juliet-heart-beat{0%{transform:translate(-50%,-50%) scale(1.18)}15%{transform:translate(-50%,-50%) scale(1.55)}30%{transform:translate(-50%,-50%) scale(1.15)}45%{transform:translate(-50%,-50%) scale(1.45)}60%{transform:translate(-50%,-50%) scale(1.2)}to{transform:translate(-50%,-50%) scale(1)}}.juliet-rail.is-celebrate{background-image:linear-gradient(90deg,#ff509b,#e515de,#9b00ff);animation:juliet-rail-sweep .9s var(--juliet-ease-snap) forwards}@keyframes juliet-rail-sweep{0%{background-size:0 1px}60%{background-size:100% 1px}to{background-size:100% 1px;opacity:1}}.juliet-rail.is-celebrate.is-fade-out{animation:juliet-rail-fade 1.2s ease .9s forwards}@keyframes juliet-rail-fade{0%{background-size:100% 1px}to{background-size:0 1px}}.juliet-heart{position:absolute;left:50%;top:50%;width:14px;height:14px;pointer-events:none;opacity:0;will-change:transform,opacity;--dx:0px;--dy:-80px;--sway:12px;--rot:0deg;animation:juliet-heart-rise var(--dur,1.5s) var(--delay,0s) cubic-bezier(.2,.7,.3,1) forwards;filter:drop-shadow(0 1px 3px rgba(155,0,255,.18))}.juliet-heart svg{width:100%;height:100%;display:block}@keyframes juliet-heart-rise{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}15%{opacity:1;transform:translate(calc(-50% + (var(--sway) * .3)),calc(-50% - 14px)) scale(1) rotate(calc(var(--rot) * .3))}55%{opacity:1;transform:translate(calc(-50% + (var(--sway) * -.5)),calc(-50% + var(--dy) * .55)) scale(1.05) rotate(calc(var(--rot) * .6))}85%{opacity:1;transform:translate(calc(-50% + var(--sway)),calc(-50% + var(--dy) * .9)) scale(.9) rotate(var(--rot))}to{opacity:0;transform:translate(calc(-50% + var(--sway)),calc(-50% + var(--dy))) scale(.7) rotate(var(--rot))}}.juliet-ripple{position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:999px;border:2px solid var(--pink);transform:translate(-50%,-50%) scale(1);opacity:0;pointer-events:none;animation:juliet-ripple .76s var(--juliet-ease-snap) forwards}@keyframes juliet-ripple{0%{opacity:.8;transform:translate(-50%,-50%) scale(1);border-width:2px}to{opacity:0;transform:translate(-50%,-50%) scale(3.2);border-width:1px}}.juliet-score{position:absolute;bottom:calc(100% + 32px);left:50%;transform:translateX(-50%) translateY(10px) scale(.85);background:#fff;border-radius:999px;padding:10px 16px;min-width:48px;box-sizing:border-box;font-family:var(--juliet-font);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:#141416;box-shadow:0 6px 18px rgba(155,0,255,.22),0 1px 3px rgba(155,0,255,.12);transition:left .16s var(--juliet-ease-snap),transform .32s var(--juliet-ease-pop),opacity .22s var(--juliet-ease-snap),box-shadow .22s var(--juliet-ease-snap),color .22s var(--juliet-ease-snap);pointer-events:none;text-align:center;white-space:nowrap;opacity:0;z-index:4}.juliet-score.is-show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}.juliet-score.is-bump{transform:translateX(-50%) translateY(-3px) scale(1.1)}.juliet-score.is-extreme{color:var(--purple);box-shadow:0 8px 22px rgba(155,0,255,.38),0 2px 5px rgba(255,80,155,.2)}.juliet-score.is-jiggle-high{animation:juliet-jiggle-high .62s var(--juliet-ease-pop)}@keyframes juliet-jiggle-high{0%{transform:translateX(-50%) translateY(0) scale(1)}20%{transform:translateX(-50%) translateY(-8px) scale(1.25) rotate(6deg)}50%{transform:translateX(-50%) translateY(-4px) scale(1.12) rotate(-4deg)}80%{transform:translateX(-50%) translateY(-6px) scale(1.18) rotate(3deg)}to{transform:translateX(-50%) translateY(0) scale(1) rotate(0)}}.juliet-confirm,.juliet-helper{position:absolute;top:calc(100% + 56px);left:50%;font-family:var(--juliet-font);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;pointer-events:none;white-space:nowrap;opacity:0}.juliet-helper{transform:translateX(-50%) translateY(-6px);color:var(--purple);transition:opacity .22s var(--juliet-ease-snap),transform .22s var(--juliet-ease-snap)}.juliet-rail.is-dragging .juliet-helper{opacity:1;transform:translateX(-50%) translateY(0)}.juliet-confirm{transform:translateX(-50%) translateY(0);color:var(--juliet-ink-2)}.juliet-confirm.is-show{animation:juliet-confirm-flash 1.4s var(--juliet-ease-snap) both}@keyframes juliet-confirm-flash{0%{opacity:0;transform:translateX(-50%) translateY(4px)}20%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(-2px)}}.juliet-dial-labels{display:flex;justify-content:space-between;font-weight:600;font-size:11px;letter-spacing:.16em;color:#575757}.juliet-dial-labels span{transition:color .22s var(--juliet-ease-snap),transform .22s var(--juliet-ease-snap)}.juliet-dial-labels span.is-lit{color:var(--juliet-ink);transform:translateY(-1px)}@media (max-width:767px){.juliet-dial{max-width:min(420px,calc(100vw - 40px));justify-self:center}.juliet-dial--mini{max-width:min(100%,calc(100vw - 40px))}.juliet-dial-labels{font-size:10px;letter-spacing:.12em}}@media (prefers-reduced-motion:reduce){.juliet-dial,.juliet-thumb:after{animation:none}.juliet-score,.juliet-thumb{transition:none}}