.menu{--s:18px;--c:#c8e993;aspect-ratio:1;border:none;border-inline:calc(var(--s)/2) solid #0000;box-sizing:content-box;height:var(--s);padding:0;--_g1:linear-gradient(var(--c) 20%,#0000 0 80%,var(--c) 0) no-repeat content-box border-box;--_g2:radial-gradient(circle closest-side at 50% 12.5%,var(--c) 95%,#0000) repeat-y content-box border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--_g2) left var(--_p,0) top,var(--_g1) left calc(var(--s)/10 + var(--_p,0px)) top,var(--_g2) right var(--_p,0) top,var(--_g1) right calc(var(--s)/10 + var(--_p,0px)) top;background-size:20% 80%,40% 100%;clip-path:inset(0 25%);cursor:pointer;-webkit-mask:linear-gradient(90deg,#0000,#000 25% 75%,#0000);position:relative;transition:background-position .3s var(--_s,.3s),clip-path 0s var(--_s,.6s);-webkit-tap-highlight-color:transparent}.menu:after,.menu:before{background:var(--c);border-radius:var(--s);content:"";inset:40% 0;position:absolute}.menu:checked{clip-path:inset(0);--_p:calc(var(--s)*-1);--_s:0s}.menu:checked:before{transform:rotate(45deg)}.menu:checked:after{transform:rotate(-45deg)}