@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}*,*:after,*:before{box-sizing:border-box;transform-style:preserve-3d;will-change:transform}:root{--bg: #bcccdc;--hover: .05;--default: .01;--limit: .9;--height: 30;--width: 20;--depth: 15;--frame: 1;--handle: #ccc;--hue: 10;--saturation: 0%;--drawer-one: #fafafa;--drawer-two: #e6e6e6;--drawer-three: #f2f2f2;--unit-one: hsl(var(--hue), var(--saturation), 50%);--unit-two: hsl(var(--hue), var(--saturation), 40%);--unit-three: hsl(var(--hue), var(--saturation), 20%);--unit-four: hsl(var(--hue), var(--saturation), 15%);--transition: .2s}body{background:var(--bg);display:grid;place-items:center;min-height:100vh;transform:scale(1.5)}.chest{height:calc(var(--height) * 1vmin);transform:translateZ(50vmin) rotateX(-32deg) rotateY(40deg);width:calc(var(--width) * 1vmin)}.chest__panel{position:absolute}.chest__panel--back{background:var(--unit-two)}.chest__panel--back,.chest__panel--front{height:100%;width:100%;transform:translateZ(calc(var(--depth) * var(--coefficient)))}.chest__panel--front-frame{height:100%;width:100%;border:calc(var(--frame) * 1vmin) solid var(--unit-one);border-bottom-width:calc(var(--frame) * 2vmin);transform:translateZ(0)}.chest__panel--front-frame:after,.chest__panel--front-frame:before{content:"";background:var(--unit-one);height:calc(var(--frame) * 1.5vmin);width:calc(var(--width) * 1vmin);position:absolute;transform:translate(-50%,-50%);left:50%}.chest__panel--front-frame:after{top:calc(100 / 3 * 1.01%)}.chest__panel--front-frame:before{top:calc(100 / 3 * 2.01%)}.chest__panel--front{--coefficient: .5vmin}.chest__panel--back{--coefficient: -.5vmin}.chest__panel--left,.chest__panel--right{height:100%;left:50%;width:calc(var(--depth) * 1vmin);background:var(--unit-three);transform:translate(-50%) rotateY(90deg) translateZ(calc(var(--width) * var(--coefficient)))}.chest__panel--right{width:calc((var(--depth) * 1vmin) + 2px);--coefficient: .5vmin}.chest__panel--left{--coefficient: -.5vmin}.chest__panel--top,.chest__panel--bottom{height:calc(var(--depth) * 1vmin);width:calc(var(--width) * 1vmin);background:var(--unit-two)}.chest__panel--top{top:0;width:calc((var(--width) * 1vmin) + .1vmin);height:calc((var(--depth) * 1vmin) + .1vmin);left:50%;transform:translate(-50%,-50%) rotateX(-90deg)}.chest__panel--bottom{bottom:0;transform:translateY(50%) rotateX(-90deg)}.chest__drawer{--drawer-height: calc((var(--height) - (5 * var(--frame))) / 3);position:absolute;top:var(--top, 0);left:50%;height:calc(var(--drawer-height) * 1vmin);width:calc((var(--width) - (2 * var(--frame))) * 1vmin);transform:translate3d(-50%,0,calc((var(--depth) * .5vmin) + .01vmin))}.chest__drawer[data-position="1"]{--index: 1;--top: calc(var(--frame) * 1vmin)}.chest__drawer[data-position="2"]{--index: 2;--top: calc(((2 * var(--frame)) + var(--drawer-height)) * 1vmin)}.chest__drawer[data-position="3"]{--index: 3;--top: calc(((3 * var(--frame)) + (2 * var(--drawer-height))) * 1vmin)}.drawer__structure{height:100%;width:100%;position:absolute;top:0;left:0}.drawer__panel{position:absolute}.drawer__panel--left,.drawer__panel--right{width:calc(var(--depth) * 1vmin);height:65%;background:var(--drawer-two);bottom:1%}.drawer__panel--left{left:0;transform-origin:0 50%;transform:rotateY(90deg)}.drawer__panel--right{right:calc((var(--frame) * 1vmin) + 1px);right:0;transform-origin:100% 50%;transform:rotateY(-90deg)}.drawer__panel--front{height:calc((var(--drawer-height) + (.6 * var(--frame))) * 1vmin);width:calc((var(--width) - (.6 * var(--frame))) * 1vmin);top:50%;left:50%;transform:translate3d(-50%,-50%,1px);background:var(--unit-four)}.drawer__panel--bottom,.drawer__panel--back{width:calc(100% - (2vmin * var(--frame)));width:100%}.drawer__panel--bottom{height:calc(var(--depth) * 1vmin);background:var(--drawer-three);bottom:5%;left:50%;transform-origin:50% 100%;transform:translate(-50%) rotateX(90deg)}.drawer__panel--back{height:65%;background:var(--drawer-one);bottom:1%;left:50%;transform:translate3d(-50%,0,calc(var(--depth) * -1vmin));text-align:center;line-height:calc(var(--drawer-height) * .65vmin);font-size:3vmin;font-family:sans-serif;font-weight:700}.letter{color:hsl(var(--hue),80%,50%);display:inline-block;animation:wave calc(var(--open) * 1s) calc(var(--delay) * -.1s) infinite ease-in-out}.letter:nth-of-type(1){--hue: 15;--delay: 0}.letter:nth-of-type(2){--hue: 35;--delay: 1}.letter:nth-of-type(3){--hue: 45;--delay: 2}.letter:nth-of-type(4){--hue: 90;--delay: 3}.letter:nth-of-type(5){--hue: 180;--delay: 4}.letter:nth-of-type(6){--hue: 260;--delay: 5}.letter:nth-of-type(7){--hue: 320;--delay: 6}details{position:absolute;height:100%;width:100%;top:0;left:0;cursor:pointer;outline:transparent}details:hover:not([open]),details:hover:not([open])+.drawer__structure{--open: var(--hover)}details,.drawer__structure{transition:transform var(--transition);transform:translateZ(calc((var(--open, var(--default)) * var(--depth)) * 1vmin))}details[open],.drawer__structure[open],details[open]+.drawer__structure,.drawer__structure[open]+.drawer__structure{--open: var(--limit)}summary{outline:transparent;height:100%;width:100%}summary::-webkit-details-marker{display:none}summary:after{content:"";position:absolute;background:linear-gradient(var(--handle),var(--handle)) 50% 15%/40% 8% no-repeat,transparent;height:110%;width:110%;top:50%;left:50%;transform:translate3d(-50%,-50%,.5vmin)}@keyframes wave{0%,to{transform:translate3d(0,10%,1px)}50%{transform:translate3d(0,-10%,1px)}}