@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}body{background:#e7efef;min-height:100vh;display:grid;place-items:center;perspective:100vmin;overflow:hidden}:root{--packaged: 0;--steps: 23;--delay: .2;--speed: .2;--face-1: #be8e64;--face-2: #dba776;--face-3: #e7b37e;--face-4: #f3bf86;--face-5: #eab37b;--face-6: #7d3712;--tape: #b07c54}.close,.open{position:fixed;height:100vh;width:100vw;z-index:2;transform:scale(1) translateZ(50vmin);transition:transform 0s calc(((var(--steps) + 2) * var(--delay)) * 1s)}.open{transform:scale(0) translateZ(50vmin);transition:transform 0s 0s}#package:checked~.close{transition:transform 0s 0s;transform:scale(0) translateZ(50vmin)}#package:checked~.open{transition:transform 0s calc(((var(--steps) + 2) * var(--delay)) * 1s);transform:scale(1) translateZ(50vmin)}input{position:fixed;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}[for=one],[for=two],[for=three],[for=four]{position:fixed;top:var(--top);right:1rem;z-index:3}[for=one]{--top: 1rem}[for=two]{--top: calc(1rem + 49px) }[for=three]{--top: calc(1rem + 98px) }[for=four]{--top: calc(1rem + 147px) }#one:checked~.one,#two:checked~.two,#three:checked~.three,#four:checked~.four{border-color:#e63b19}.size-label{font-family:sans-serif;font-weight:700;color:#262626;height:44px;width:44px;display:grid;place-items:center;background:#fcfcfc;border-radius:50%;cursor:pointer;border:4px solid #8bb1b1;transform:translateY(calc(var(--y, 0) * 1%)) scale(var(--scale, 1));transition:transform .1s}.size-label:hover{--y: -5}.size-label:active{--y: 2;--scale: .9}#one:checked~.scene .package__wrapper{--height: 10;--width: 20;--depth: 20}#two:checked~.scene .package__wrapper{--height: 20;--width: 20;--depth: 20}#three:checked~.scene .package__wrapper{--height: 20;--width: 30;--depth: 20}#four:checked~.scene .package__wrapper{--height: 30;--width: 20;--depth: 30}#package:checked~.scene .package__side--main>.package__flap--top:before{--bg-step: 9}#package:checked~.scene{--packaged: 1}#package:checked~.scene .package__side--extra{--step: 0}#package:checked~.scene .package__side--tabbed{--step: 1}#package:checked~.scene .package__side--tabbed:after{--step: 2}#package:checked~.scene .package__side--flipped{--step: 2}#package:checked~.scene .package__side--extra>.package__flap--bottom{--step: 3}#package:checked~.scene .package__side--tabbed>.package__flap--bottom{--step: 4}#package:checked~.scene .package__side--main>.package__flap--bottom{--step: 5}#package:checked~.scene .package__side--flipped>.package__flap--bottom{--step: 6}#package:checked~.scene .package__tape--bottom{--step: 7}#package:checked~.scene .package__wrapper{--step: 8}#package:checked~.scene .package,#package:checked~.scene .package__shadow{--step: 9}#package:checked~.scene .package__icon--html{--step: 10}#package:checked~.scene .package__icon--css{--step: 11}#package:checked~.scene .package__icon--js{--step: 12}#package:checked~.scene .package__side--extra>.package__flap--top{--step: 16}#package:checked~.scene .package__side--tabbed>.package__flap--top{--step: 17}#package:checked~.scene .package__side--main>.package__flap--top{--step: 18}#package:checked~.scene .package__side--flipped>.package__flap--top{--step: 19}#package:checked~.scene .package__tape--top{--step: 20}#package:checked~.scene .package__branding,#package:checked~.scene .package__label,#package:checked~.scene .package__branding--shadow,#package:checked~.scene .package__label--shadow{--step: 21}#package:checked~.scene .package__label:after{--step: 22}#package:checked~.scene .package__label:before{--step: 23}.scene{transform:rotateX(-24deg) rotateY(-32deg) rotateX(90deg)}.package,.package__wrapper,.package__flap,.package__flap--top,.package__flap--bottom,.package__side,.package__side:after,.package__icon,.package__tape--top,.package__tape--bottom,.package__branding,.package__label,.package__label:after,.package__label:before,.package__shadow,.package__label--shadow,.package__branding--shadow{--delay: .2;--speed: .2;transition:transform calc(var(--speed, .2) * 1s) calc((var(--step, 1) * var(--delay, 1)) * 1s),opacity .1s calc(((var(--step, 1) * var(--delay, 1)) + ((var(--speed) - .1) * (1 - var(--packaged)))) * 1s),height calc(var(--speed, .2) * 1s),width calc(var(--speed, .2) * 1s);transition-timing-function:ease-in-out}#one:focus~.scene .package,#two:focus~.scene .package,#three:focus~.scene .package,#four:focus~.scene .package,#one:focus~.scene .package__wrapper,#two:focus~.scene .package__wrapper,#three:focus~.scene .package__wrapper,#four:focus~.scene .package__wrapper,#one:focus~.scene .package__flap,#two:focus~.scene .package__flap,#three:focus~.scene .package__flap,#four:focus~.scene .package__flap,#one:focus~.scene .package__flap--top,#two:focus~.scene .package__flap--top,#three:focus~.scene .package__flap--top,#four:focus~.scene .package__flap--top,#one:focus~.scene .package__flap--bottom,#two:focus~.scene .package__flap--bottom,#three:focus~.scene .package__flap--bottom,#four:focus~.scene .package__flap--bottom,#one:focus~.scene .package__side,#two:focus~.scene .package__side,#three:focus~.scene .package__side,#four:focus~.scene .package__side,#one:focus~.scene .package__side:after,#two:focus~.scene .package__side:after,#three:focus~.scene .package__side:after,#four:focus~.scene .package__side:after,#one:focus~.scene .package__icon,#two:focus~.scene .package__icon,#three:focus~.scene .package__icon,#four:focus~.scene .package__icon,#one:focus~.scene .package__tape--top,#two:focus~.scene .package__tape--top,#three:focus~.scene .package__tape--top,#four:focus~.scene .package__tape--top,#one:focus~.scene .package__tape--bottom,#two:focus~.scene .package__tape--bottom,#three:focus~.scene .package__tape--bottom,#four:focus~.scene .package__tape--bottom,#one:focus~.scene .package__branding,#two:focus~.scene .package__branding,#three:focus~.scene .package__branding,#four:focus~.scene .package__branding,#one:focus~.scene .package__label,#two:focus~.scene .package__label,#three:focus~.scene .package__label,#four:focus~.scene .package__label,#one:focus~.scene .package__label:after,#two:focus~.scene .package__label:after,#three:focus~.scene .package__label:after,#four:focus~.scene .package__label:after,#one:focus~.scene .package__label:before,#two:focus~.scene .package__label:before,#three:focus~.scene .package__label:before,#four:focus~.scene .package__label:before,#one:focus~.scene .package__shadow,#two:focus~.scene .package__shadow,#three:focus~.scene .package__shadow,#four:focus~.scene .package__shadow,#one:focus~.scene .package__label--shadow,#two:focus~.scene .package__label--shadow,#three:focus~.scene .package__label--shadow,#four:focus~.scene .package__label--shadow,#one:focus~.scene .package__branding--shadow,#two:focus~.scene .package__branding--shadow,#three:focus~.scene .package__branding--shadow,#four:focus~.scene .package__branding--shadow{transition:none;transition-timing-function:ease-in-out}.package__side--extra{--step: 23}.package__side--tabbed{--step: 22}.package__side--tabbed:after{--step: 21}.package__side--flipped{--step: 20}.package__side--extra>.package__flap--bottom{--step: 19}.package__side--tabbed>.package__flap--bottom{--step: 18}.package__side--main>.package__flap--bottom{--step: 17}.package__side--flipped>.package__flap--bottom{--step: 16}.package__tape--bottom{--step: 15}.package__wrapper{--step: 14}.package,.package__shadow{--step: 13}.package__icon--html{--step: 8}.package__icon--css{--step: 7}.package__icon--js{--step: 6}.package__side--extra>.package__flap--top{--step: 5}.package__side--tabbed>.package__flap--top{--step: 4}.package__side--main>.package__flap--top{--step: 3}.package__side--flipped>.package__flap--top{--step: 2}.package__tape--top{--step: 1}.package__branding,.package__label,.package__label--shadow,.package__branding--shadow{--step: 0}.package__label:after{--step: 5}.package__label:before{--step: 5}.package{height:calc(var(--depth) * 1vmin);width:calc(var(--width) * 1vmin);transform-origin:50% 0;transform:rotateX(calc((1 - var(--packaged, 0)) * 90deg))}.package__shadow{background:#595959;opacity:.75;position:absolute;height:99%;width:99%;top:0;left:50%;transform-origin:50% 0;transform:translate(-50%) scaleY(var(--packaged))}.package__tape{background:var(--tape);height:4vmin;width:94%;left:50%;position:absolute;transform-origin:0 50%;transform:translate3d(-50%,var(--offset-y),2px) scaleX(var(--packaged, 0))}.package__tape--bottom{--offset-y: 50%;bottom:100%}.package__tape--top{--offset-y: -50%;top:100%}.package__direction{display:inline-flex;align-items:center;font-family:sans-serif;font-weight:700;font-size:1.75vmin;transform:rotate(180deg) translateZ(1px);position:absolute;top:0;right:0;padding:5%;justify-content:flex-end;color:#1a1a1a;backface-visibility:hidden;-webkit-backface-visibility:hidden}.package__direction svg{fill:currentColor;width:8%;min-width:2vmin}.package__wrapper{transform:translate3d(0,calc(((1 - var(--packaged, 0)) * var(--height)) * 1vmin),calc(var(--height) * -.5vmin))}.package__label{height:20%;width:30%;background:#fafafa;position:absolute;right:10%;bottom:20%;border-radius:5%;opacity:var(--packaged);backface-visibility:hidden;transform:rotate(180deg) translateZ(calc((1 - (var(--packaged, 0))) * 5vmin))}.package__label--shadow{transform:rotate(180deg) translateZ(0) scale(var(--packaged));background:#1a1a1a}.package__label:after,.package__label:before{content:"";position:absolute;height:20%;width:var(--line-length, 70%);top:var(--line, 20%);left:10%;background:#1a1a1a;transform-origin:0 50%;transform:scaleX(var(--packaged, 0))}.package__label:before{--line: 50%;--line-length: 40%}.package__branding{height:30%;position:absolute;bottom:10%;left:10%;transform:rotate(-160deg) translateZ(calc((1 - (var(--packaged, 0))) * 5vmin));opacity:var(--packaged);backface-visibility:hidden}.package__branding--shadow{transform:rotate(-160deg) translateZ(0) scale(var(--packaged));filter:brightness(0);opacity:var(--packaged)}.package__icon{--speed: 1;position:absolute;top:50%;left:50%;width:40%;transform:translate(-50%,-50%) translate3d(calc(var(--x, 0) * 1%),calc((((1 - var(--packaged, 0)) * (var(--y, 0) * (max(var(--height),var(--depth),var(--width)))))) * -1vmin),calc(var(--z, 0) * 1vmin));opacity:var(--packaged)}.package__icon--js{--x: 60;--y: 1.4;--z: 0;fill:#f7df1e}.package__icon--html{--x: 0;--y: 1.6;--z: -3;fill:#e34f26}.package__icon--css{--x: -50;--y: 1.2;--z: 3;fill:#1572b6}.package__content{width:calc(min(var(--height),var(--width))*1vmin);height:calc(var(--height) * 1vmin);position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;transform:translate(-50%) rotateX(-90deg) rotateY(45deg)}.package__flap{width:99.5%;height:49.5%;background:var(--face-4);position:absolute;left:50%}.package__flap--bottom{transform-origin:50% 100%;bottom:100%;transform:translate(-50%) rotateX(calc(var(--packaged, 0) * 90deg))}.package__flap--top{top:100%;transform-origin:50% 0%;transform:translate(-50%) rotateX(calc(var(--packaged, 0) * -90deg))}.package__side{background:hsla(var(--hue, 0),30%,30%,.3);height:calc(var(--height) * 1vmin);position:absolute;top:50%}.package__side--main>.package__flap--top:before{--bg-step: 13;content:"";height:100%;width:100%;position:absolute;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--face-2);opacity:var(--packaged);transition:opacity calc(var(--speed, .2) * 1s) calc((var(--bg-step, 1) * var(--delay, 1)) * 1s);transition-timing-function:ease-in-out}.package__side--extra>.package__flap--top,.package__side--tabbed>.package__flap--top{top:99%}.package__side--extra>.package__flap--bottom,.package__side--tabbed>.package__flap--bottom{bottom:99%}.package__side--extra>.package__flap.package__flap--top{background:#edb678}.package__side--extra>.package__flap.package__flap--bottom{background:#efc08a}.package__side--tabbed>.package__flap.package__flap--bottom{background:#ebbb84}.package__side--flipped>.package__flap.package__flap--bottom{background:#f2c592}.package__side--main>.package__flap.package__flap--top{background:#efbb80}.package__side--main{--hue: 2;background:var(--face-5);left:50%;transform:translate(-50%,-50%) rotateX(90deg) rotateY(0) translateZ(calc(var(--depth) * .5vmin)) translateY(50%);width:calc(var(--width) * 1vmin)}.package__side--main>.package__flap{height:calc(var(--depth) * .495vmin)}.package__side--tabbed{--hue: 90;top:0;left:100%;background:var(--face-2);width:calc(var(--depth) * 1vmin);transform-origin:0% 50%;transform:rotateY(calc(var(--packaged, 0) * 90deg))}.package__side--tabbed>.package__flap{height:calc(var(--width) * .495vmin);background:var(--face-3)}.package__side--tabbed:after{content:"";position:absolute;left:99.5%;top:0;height:100%;width:10%;background:var(--face-3);clip-path:polygon(0 0%,100% 20%,100% 80%,0 100%);-webkit-clip-path:polygon(0 0%,100% 20%,100% 80%,0 100%);transform-origin:0% 50%;transform:rotateY(calc(var(--packaged, 0) * 91deg))}.package__side--extra{--hue: 120;right:100%;top:0;background:var(--face-2);width:calc(var(--depth) * 1vmin);transform-origin:100% 50%;transform:rotateY(calc(var(--packaged, 0) * -90deg))}.package__side--extra>.package__flap{height:calc(var(--width) * .495vmin);background:var(--face-3)}.package__side--flipped{--hue: 320;background:var(--face-3);top:0;right:100%;width:calc(var(--width) * 1vmin);transform-origin:100% 50%;transform:rotateY(calc(var(--packaged, 0) * -90deg))}.package__side--flipped>.package__flap{height:calc(var(--depth) * .495vmin);background:var(--face-4)}