.button{--stone-50:#fafaf9;--stone-800:#292524;--yellow-300:#fde047;--yellow-400:#facc15;--yellow-500:#eab308;--black-25:rgba(0,0,0,.25);position:relative;display:block;width:4rem;height:4rem;cursor:pointer}.button>button{display:inline-block;height:100%;width:100%;appearance:none;border:2px solid var(--stone-800);border-radius:.25rem;background-color:var(--yellow-400);outline:2px solid transparent;outline-offset:2px;cursor:pointer;transition:background-color .2s}.button>button:hover{background-color:var(--yellow-300)}.button>button:checked{background-color:var(--stone-800);border-color:var(--stone-800)}.button>button:checked:hover{background-color:#44403c}.button>button:active{outline-color:var(--stone-800)}.button>button:focus-visible{outline-color:var(--stone-800);outline-style:dashed}.button>span:nth-child(2){position:absolute;inset:3px;pointer-events:none;background-color:var(--yellow-400);border-bottom:2px solid var(--black-25);transition:transform 75ms}.button>span:nth-child(2):before{content:"";position:absolute;inset:0;background-image:radial-gradient(hsla(0,0%,100%,.8) 20%,transparent 0),radial-gradient(#fff 20%,transparent 0);background-position:0 0,4px 4px;background-size:8px 8px;mix-blend-mode:hard-light;opacity:.5;animation:dots .5s linear infinite}.button>span:nth-child(3){position:absolute;pointer-events:none;inset:0}.button>span:nth-child(3):before{content:"";width:.375rem;height:.375rem;position:absolute;top:.25rem;left:.25rem;background-color:var(--stone-800);border-radius:.125rem;box-shadow:3.125em 0 var(--stone-800),0 3.125em var(--stone-800),3.125em 3.125em var(--stone-800)}.button>span:nth-child(4){position:absolute;pointer-events:none;inset:0;filter:drop-shadow(.25em .25em 0 rgba(0,0,0,.2));transition:all 75ms}.button>span:nth-child(4):after{content:"";width:.25rem;height:.25rem;position:absolute;top:.875rem;left:1rem;border-radius:.0625px;background-color:var(--stone-800);box-shadow:.75em 2em var(--stone-800),1em 2em var(--stone-800),.75em 1.75em var(--stone-800),1em 1.75em var(--stone-800),.75em 1.25em var(--stone-800),1em 1.25em var(--stone-800),.75em 1em var(--stone-800),1em 1em var(--stone-800),1em .75em var(--stone-800),1.5em .75em var(--stone-800),1.25em .75em var(--stone-800),1.25em -.25em var(--stone-800),1.5em 0 var(--stone-800),1.25em .5em var(--stone-800),1.5em .5em var(--stone-800),1.25em .25em var(--stone-800),1.5em .25em var(--stone-800),1.25em 0 var(--stone-800),1em -.25em var(--stone-800),.75em -.25em var(--stone-800),.5em -.25em var(--stone-800),.25em -.25em var(--stone-800),.25em 0 var(--stone-800),0 .25em var(--stone-800),0 .5em var(--stone-800),.25em .25em var(--stone-800),.25em .5em var(--stone-800)}.button>span:nth-child(5){position:absolute;background-color:var(--yellow-400);border:2px solid var(--stone-800);border-radius:.75rem;pointer-events:none;z-index:-1;inset:.5rem 1.5rem;box-shadow:7px 0 0 0 var(--stone-800),inset 0 2px 0 0 var(--yellow-300),inset 0 -2px 0 0 var(--yellow-500);transition:all 0ms cubic-bezier(0,.5,.4,1)}.button button:active~span:nth-child(5){transform:translateY(200%);transition-duration:.1s;opacity:0}.button button:hover~span:nth-child(4){filter:drop-shadow(.125em .125em 0 rgba(0,0,0,.2))}@keyframes dots{0%{background-position:0 0,4px 4px}to{background-position:8px 0,12px 4px}}@media(prefers-color-scheme:dark){.button button:active,.button button:focus-visible{outline-color:var(--yellow-400)}}