.sour-meter{--meter-color: var(--scroll-s200, #f8e7bd);--meter-ink: var(--brown-b800, #32150a);--meter-track-start: 9%;--meter-track-end: 95%;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;color:var(--meter-ink)}.sour-meter.is-zone-yellow{--meter-color: var(--zone-yellow, #f4d35e)}.sour-meter.is-zone-lime{--meter-color: var(--green-g300, #95ff3f)}.sour-meter.is-zone-orange{--meter-color: var(--orange-o300, #f4a938)}.sour-meter.is-zone-red{--meter-color: var(--zone-red, #e0442b)}.sour-meter.is-zone-purple{--meter-color: var(--purple-p300, #ac38f4)}.sour-meter__label{margin:0 0 2px;font-family:var(--font-secondary--family);font-style:italic;font-size:var(--fs-h5, 16px);opacity:.85}.sour-meter__row{display:flex;align-items:center;justify-content:center;gap:14px;width:100%}.sour-meter__bar{position:relative;flex:1 1 auto;aspect-ratio:831 / 200;container-type:inline-size;min-width:0;touch-action:pan-y}.sour-meter.is-interactive,.sour-meter.is-interactive *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.sour-meter__bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;clip-path:polygon(12% 16%,92% 18%,95% 51%,92% 82%,12% 81%,9% 52%);background:#000}.sour-meter__fill,.sour-meter__frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none;z-index:1}.sour-meter__fill{-webkit-mask-image:var(--sour_level_mask);mask-image:var(--sour_level_mask);-webkit-mask-size:119% 100%;mask-size:119% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:calc((100 - var(--meter-value) + var(--sour-curve, .0006) * max(0,var(--meter-value) - 50) * (var(--meter-value) - 50) * (100 - var(--meter-value)) - var(--sour-curve-low, .0006) * var(--meter-value) * max(0,50 - var(--meter-value)) * (50 - var(--meter-value))) * -1cqw) 0px;mask-position:calc((100 - var(--meter-value) + var(--sour-curve, .0006) * max(0,var(--meter-value) - 50) * (var(--meter-value) - 50) * (100 - var(--meter-value)) - var(--sour-curve-low, .0006) * var(--meter-value) * max(0,50 - var(--meter-value)) * (50 - var(--meter-value))) * -1cqw) 0px}.sour-meter.is-empty .sour-meter__fill{opacity:.25}.sour-meter__dots{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.sour-meter__dot{--dot-size: clamp(9px, calc(8px + (var(--dot-n, 1) - 1) * 3px), 17px);position:absolute;top:50%;left:calc(var(--meter-track-start) + (var(--meter-track-end) - var(--meter-track-start)) * var(--dot-x, 50) / 100);width:var(--dot-size);height:var(--dot-size);margin:calc(var(--dot-size) / -2) 0 0 calc(var(--dot-size) / -2);border-radius:50%;border:2px solid var(--meter-ink);background:var(--scroll-s200, #f8e7bd);box-shadow:0 1px 0 var(--meter-ink),inset 0 0 0 1px #ffffff59;transform:translateY(calc(var(--dot-lane, 0) * 62%)) scale(1);opacity:.95;pointer-events:auto;transition:left .42s var(--spring-easing, cubic-bezier(.34, 1.4, .64, 1)),transform .3s ease,opacity .25s ease,width .2s ease,height .2s ease,margin .2s ease}.sour-meter__dot.is-zone-yellow{background:var(--zone-yellow, #f4d35e)}.sour-meter__dot.is-zone-lime{background:var(--green-g300, #95ff3f)}.sour-meter__dot.is-zone-orange{background:var(--orange-o300, #f4a938)}.sour-meter__dot.is-zone-red{background:var(--zone-red, #e0442b)}.sour-meter__dot.is-zone-purple{background:var(--purple-p300, #ac38f4)}.sour-meter__dot.is-enter,.sour-meter__dot.is-leave{opacity:0;transform:translateY(calc(var(--dot-lane, 0) * 62%)) scale(.2)}.sour-meter__dot.is-ghost{opacity:.7;border-style:dashed;background-color:transparent}.sour-meter.is-empty .sour-meter__dots{display:none}.sour-meter__needle{position:absolute;z-index:3;top:4%;left:calc(var(--meter-track-start) + (var(--meter-track-end) - var(--meter-track-start)) * var(--meter-value) / 100);width:0;height:0;transform:translate(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid var(--meter-color);filter:drop-shadow(0 1px 0 var(--meter-ink));pointer-events:none}.sour-meter.is-empty .sour-meter__needle{opacity:0}.sour-meter__over{position:absolute;z-index:3;top:-.9em;right:0;padding:1px 6px;border-radius:100px;background:var(--purple-p300, #ac38f4);color:#fff;font-family:var(--font-primary--family);font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 0 var(--purple-p400, #7827ab);opacity:0;transform:translateY(4px) scale(.8);transition:opacity .2s ease,transform .3s var(--spring-easing, ease);pointer-events:none}.sour-meter.is-over .sour-meter__over{opacity:1;transform:translateY(0) scale(1)}.sour-meter.is-over .sour-meter__needle{border-top-color:var(--purple-p300, #ac38f4)}.sour-meter__handle{position:absolute;z-index:4;top:50%;left:calc(var(--meter-track-start) + (var(--meter-track-end) - var(--meter-track-start)) * var(--meter-value) / 100);width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:transparent;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}.sour-meter__handle:before{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid var(--meter-ink);background:var(--meter-color);box-shadow:0 2px 0 var(--meter-ink),0 0 0 3px #ffffff59;transition:transform .2s var(--spring-easing, ease),background-color .3s ease}.sour-meter__handle:hover:before,.sour-meter__handle:focus-visible:before{transform:scale(1.15)}.sour-meter__handle:focus-visible{outline:none}.sour-meter__handle:focus-visible:before{box-shadow:0 2px 0 var(--meter-ink),0 0 0 4px var(--scroll-s200, #f8e7bd)}.sour-meter.is-dragging .sour-meter__handle{cursor:grabbing}.sour-meter__handle:after{content:attr(data-hint);position:absolute;left:50%;bottom:calc(100% - 2px);padding:3px 9px;border-radius:100px;border:2px solid var(--meter-ink);background:var(--purple-p300, #ac38f4);color:#fff;font-family:var(--font-primary--family);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 0 var(--purple-p400, #7827ab);box-shadow:0 2px 0 var(--meter-ink);transform:translate(-50%);opacity:1;animation:sour-meter-callout 1.6s ease-in-out infinite;transition:opacity .2s ease,transform .2s ease;pointer-events:none}@keyframes sour-meter-callout{0%,to{margin-bottom:4px}50%{margin-bottom:10px}}.sour-meter.is-near .sour-meter__handle:after,.sour-meter.is-dragging .sour-meter__handle:after,.sour-meter.is-locked .sour-meter__handle:after,.sour-meter.is-empty .sour-meter__handle:after,.sour-meter.is-touched .sour-meter__handle:after,.sour-meter.is-over .sour-meter__handle:after,.sour-meter__handle:hover:after,.sour-meter__handle:focus-visible:after{opacity:0;transform:translate(-50%,6px);animation:none}.sour-meter.is-dragging .sour-meter__handle:before{transform:scale(1.3)}.sour-meter.is-dragging .sour-meter__needle,.sour-meter.is-dragging .sour-meter__dot{transition:none}.sour-meter__handle:disabled,.sour-meter.is-locked .sour-meter__handle{display:none}.sour-meter.is-interactive .sour-meter__bar{cursor:pointer;touch-action:none}.sour-meter--full .sour-meter__value{display:inline-block;min-width:1.9em;text-align:center}.sour-meter.is-interactive.is-locked .sour-meter__bar,.sour-meter.is-interactive.is-empty .sour-meter__bar{cursor:default}.sour-meter__floats{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;overflow:visible}.sour-meter__float{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-primary--family);font-weight:700;font-size:clamp(16px,1.1em,28px);color:var(--meter-color);text-shadow:0 0 2px var(--meter-ink),0 0 8px rgba(0,0,0,.7);animation:sour-meter-float .9s ease-out forwards}.sour-meter__float--down{color:var(--scroll-s200, #f8e7bd)}@keyframes sour-meter-float{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}to{opacity:0;transform:translate(-50%,-150%) scale(1)}}.sour-meter__readout{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1;min-width:3ch}.sour-meter__value{font-family:var(--font-primary--family);font-weight:700;font-size:var(--fs-huge, 48px);color:var(--meter-color);-webkit-text-stroke:1px var(--meter-ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--meter-ink);font-variant-numeric:tabular-nums;transition:color .3s ease}.sour-meter__zone{font-family:var(--font-secondary--family);font-style:italic;font-size:var(--fs-h5, 16px);white-space:nowrap;margin-top:4px}.sour-meter__range{margin:2px 0 0;font-family:var(--font-secondary--family);font-size:var(--fs-h5, 16px);text-align:center;line-height:1.35;max-width:40ch}.sour-meter__range[hidden]{display:none}.sour-meter__line{margin:4px 0 0;font-family:var(--font-secondary--family);font-size:var(--fs-h4, 18px);text-align:center;min-height:1.3em}.sour-meter__note{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;margin:4px 0 0;font-family:var(--font-secondary--family);font-style:italic;font-size:var(--fs-14, 14px);text-align:center}.sour-meter__note[hidden]{display:none}.box-builder__meter .sour-meter__note{min-height:40px}.box-builder__meter .sour-meter__range{min-height:2.7em}.box-builder__meter .sour-meter__note[hidden]{display:flex;visibility:hidden}.sour-meter__undo{min-height:32px;padding:2px 10px;border:1px solid currentColor;border-radius:100px;background:transparent;color:inherit;font:inherit;font-style:normal;cursor:var(--pointer, pointer)}.sour-meter__undo[hidden]{display:none}.sour-meter--ink{--meter-ink: var(--brown-b800, #32150a);color:var(--scroll-s200, #f8e7bd)}.sour-meter--ink .sour-meter__label{opacity:1;font-style:normal;font-family:var(--font-primary--family);font-size:var(--fs-12, 12px);letter-spacing:.14em;text-transform:uppercase}.sour-meter--ink .sour-meter__label,.sour-meter--ink .sour-meter__zone,.sour-meter--ink .sour-meter__range,.sour-meter--ink .sour-meter__line,.sour-meter--ink .sour-meter__note{color:var(--scroll-s200, #f8e7bd);text-shadow:0 2px 0 rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.6)}.sour-meter--ink .sour-meter__value{text-shadow:0 2px 0 var(--meter-ink),0 4px 10px rgba(0,0,0,.5)}.sour-meter--ink .sour-meter__undo{border-color:var(--scroll-s400, #ac9e7a)}.sour-meter--ink .sour-meter__dot,.sour-meter--ink .sour-meter__handle:before{box-shadow:0 1px 0 var(--meter-ink),0 3px 6px #00000073}.sour-meter--full{max-width:560px}.sour-meter--full .sour-meter__bar{max-width:420px}.sour-meter--compact{gap:0;width:auto}.sour-meter--compact .sour-meter__row{gap:8px}.sour-meter--compact .sour-meter__bar{width:96px;flex:0 0 96px}.sour-meter--compact .sour-meter__needle{border-left-width:4px;border-right-width:4px;border-top-width:7px}.sour-meter--compact .sour-meter__dot{--dot-size: clamp(5px, calc(4px + (var(--dot-n, 1) - 1) * 2px), 9px);border-width:1px}.sour-meter--compact .sour-meter__over{font-size:8px;padding:0 4px;top:-.8em}.sour-meter--compact .sour-meter__value{font-size:var(--fs-h2, 26px);text-shadow:0 1px 0 var(--meter-ink)}.sour-meter--compact .sour-meter__zone{font-size:var(--fs-11, 11px);margin-top:2px}.sour-meter--compact .sour-meter__float{font-size:14px}.sour-meter--compact.sour-meter--no-zone .sour-meter__zone{display:none}@media(max-width:749px){.sour-meter--full .sour-meter__value{font-size:clamp(32px,11vw,48px)}.sour-meter--full .sour-meter__row{gap:10px}.sour-meter__range{font-size:var(--fs-14, 14px)}}@media(prefers-reduced-motion:reduce){.sour-meter__float{animation-duration:1ms}.sour-meter__value,.sour-meter__dot,.sour-meter__over,.sour-meter__handle:before{transition:none}.sour-meter__handle:after{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/74/assets/sour-meter.css.map */