.heart-container{--heart-color:#7b8496;width:40px;height:40px;transition:all .3s;position:relative}.heart-container .checkbox{opacity:0;z-index:20;cursor:pointer;width:100%;height:100%;position:absolute}.heart-container .svg-container{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.heart-container .svg-outline,.heart-container .svg-filled{width:24px;height:24px;fill:var(--heart-color);position:absolute}.svg-filled{display:none}.svg-celebrate{stroke:#e76a72;fill:#e76a72;stroke-width:2px;display:none;position:absolute}.heart-container .checkbox:checked~.svg-container .svg-filled{fill:#e76a72;display:block}.heart-container .checkbox:checked~.svg-container .svg-outline{display:none}.heart-container.animate .svg-filled{animation:.4s keyframes-svg-filled}.heart-container.animate .svg-celebrate{animation:.5s forwards keyframes-svg-celebrate;display:block}@keyframes keyframes-svg-filled{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes keyframes-svg-celebrate{0%{transform:scale(0)}50%{opacity:1}to{opacity:0;transform:scale(1.4)}}
.echo-btn{cursor:pointer;color:#7b8496;background:0 0;border:none;justify-content:center;align-items:center;gap:6px;width:40px;height:40px;transition:transform .15s,color .2s;display:flex}.echo-btn svg{width:24px;height:24px;transition:stroke-width .2s,transform .2s}.echo-btn:hover{color:#a0a8b9}.echo-btn:active{transform:scale(1.1)}.echo-btn.echoed{color:#76a58a}.echo-btn.echoed svg{stroke-width:2.5px}.echo-btn.animate{transform:scale(1.15)}.wave{transform-origin:50%;opacity:.7}.echo-btn.animate .wave1{animation:.4s ease-out ripple}.echo-btn.animate .wave2{animation:.5s ease-out ripple}@keyframes ripple{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}.label{font-size:14px;font-weight:500}
@property --p{syntax:"<number>";inherits:false;initial-value:0}@property --fill{syntax:"<number>";inherits:false;initial-value:0}@property --glow{syntax:"<number>";inherits:false;initial-value:0}.cbx{--saffron:#7d8dff;--orange:#6074f0;--ink:#dbe2f2;--size:40px;--bw:2.5px;--radius:12px;--stroke:3px;display:inline-block}.cbx__input{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.cbx__label{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;grid-auto-flow:column;align-items:center;gap:.85rem;display:inline-grid}.cbx__text{letter-spacing:.02em;background:linear-gradient(90deg, color-mix(in oklab, var(--saffron), white 6%), var(--orange));color:#0000;opacity:.9;-webkit-background-clip:text;background-clip:text;padding:10px 1px;font:700 1.2rem/1 system-ui,Segoe UI,Roboto,sans-serif;transition:opacity .25s,transform .2s}.cbx__box{width:var(--size);height:var(--size);border-radius:var(--radius);border:var(--bw) solid color-mix(in oklab, var(--saffron), transparent 62%);box-shadow:inset 0 1px 2px #ffffff1a, inset 0 -1px 2px #00000040, 0 0 calc(10px * var(--glow)) calc(2px * var(--glow)) color-mix(in oklab, var(--saffron), transparent 82%);--p:0;--fill:0;--glow:0;background:linear-gradient(#ffffff0f,#0000000f) padding-box padding-box;transition:border-color .25s,box-shadow .25s;position:relative;overflow:hidden}.cbx__box:before{content:"";inset:calc(var(--bw) * -1);padding:var(--bw);border-radius:inherit;background:conic-gradient(from -90deg, color-mix(in oklab, var(--saffron), white 8%) 0 calc(var(--p) * 1turn), transparent 0 1turn);-webkit-mask-composite:xor;opacity:.28;pointer-events:none;position:absolute;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.cbx__box:after{content:"";border-radius:inherit;background:linear-gradient(90deg, var(--orange), var(--saffron));transform-origin:0;transform:scaleX(var(--fill));opacity:.18;pointer-events:none;position:absolute;inset:0}.cbx__svg{width:100%;height:100%;position:absolute;inset:0}.cbx__path{fill:none;stroke:#fff;stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40px;filter:drop-shadow(0 0 .2rem color-mix(in oklab, var(--saffron), white 20%));transition:stroke-dashoffset .28s cubic-bezier(.2,.8,.3,1) 60ms,filter .2s}.cbx__input:focus-visible+.cbx__label .cbx__box{border-color:color-mix(in oklab, var(--saffron), white 16%);box-shadow:0 0 0 .18rem color-mix(in oklab, var(--saffron), transparent 80%), 0 0 0 .38rem color-mix(in oklab, var(--orange), transparent 90%)}.cbx__input:checked+.cbx__label .cbx__box{--p:1;--fill:1;--glow:1}.cbx__input:checked+.cbx__label .cbx__path{stroke-dashoffset:0}.cbx__input:checked+.cbx__label .cbx__text{opacity:1;transform:translateY(-1px)}
.cbx--disagree{--saffron:#d78c9a;--orange:#b76a7b}
.slider{--slider-width:80%;--slider-height:6px;--slider-bg:#525252;--slider-border-radius:999px;--level-color:#fff;--level-transition-duration:.1s;--icon-margin:15px;--icon-color:var(--slider-bg);--icon-size:25px;cursor:pointer;flex-direction:column;align-items:center;display:inline-flex;position:relative}.slider .level{appearance:none;width:var(--slider-width);height:var(--slider-height);background:var(--slider-bg);border-radius:var(--slider-border-radius);transition:height var(--level-transition-duration), opacity .2s;cursor:inherit;visibility:hidden;opacity:0;overflow:hidden;transform:rotate(270deg)}.slider .level::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;box-shadow:-200px 0 0 200px var(--level-color)}.slider:hover .level{visibility:visible;opacity:1;height:calc(var(--slider-height) * 2)}.slider .volume{margin-top:calc(var(--icon-margin) * 4);color:var(--icon-color);width:var(--icon-size);text-align:center;height:auto}.right-4{right:-46px}.bottom-16{bottom:2rem}