main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;margin:0;font-family:Arial,sans-serif}:root{--color-bg: #333;--color-white: #fff;--color-black: #000;--color-paper: white;--color-envelope-flap-left: #ededed;--color-envelope-flap-right: #d3d3d3;--color-envelope-back: #123b6d;--color-envelope-back: #3a3a3a;--color-envelope-triangle-closed: #fbfbfb;--color-envelope-triangle-opened: #3a3a3a;--color-square-blue: #0078d4;--color-square-light-blue: #28a8ea;--color-square-cyan: #50d9ff;--color-square-dark-blue: #0364b8;--color-square-navy: #14447d;--color-btn-primary: #28a8ea;--color-btn-primary-hover: #1490df;--color-btn-active: #28a745;--color-btn-active-hover: #218838;--color-btn-disabled: #ccc;--color-btn-text: white;--color-btn-danger: #dc3545;--color-btn-danger-hover: #c82333;--color-btn-secondary: #6c757d;--color-btn-secondary-hover: #5a6268;--color-shadow: rgba(0, 0, 0, .25);--envelope-width-base: 330px;--envelope-width: var(--envelope-width-base);--envelope-height: calc(var(--envelope-width-base) * .5462);--container-size: calc(var(--envelope-width-base) * 1.3846);--letter-width: calc(var(--envelope-width-base) * .9077);--square-width: calc(var(--letter-width) / 3);--square-height: calc(var(--envelope-width-base) * .2846);--letter-header-height: calc(var(--envelope-width-base) * .1538);--letter-height: calc(var(--square-height) * 3 + var(--letter-header-height));--flap-size: calc(var(--envelope-width-base) * .7385);--flap-height: calc(var(--envelope-height) * .55);--front-flap-width: calc(var(--envelope-width-base) * 2.2077);--logo-container-height: calc(var(--envelope-width-base) * 1.3769);--logo-container-margin-top: calc(var(--envelope-width-base) * -.4538);--logo-container-margin-left: calc(var(--envelope-width-base) * .1923);--shadow-container-top: calc(var(--envelope-width-base) * .9231);--shadow-container-left: calc(var(--envelope-width-base) * .1923);--flap-wrapper-margin-top: calc(var(--envelope-width-base) * 1.3769);--envelope-front-margin-top: calc(var(--envelope-width-base) * -.3154);--envelope-back-height: calc(var(--envelope-height) * .5634);--envelope-back-margin-top: calc(var(--envelope-height) * -.9859);--letter-margin-top: calc(var(--envelope-width-base) * -2.3538);--opened-flap-height: calc(var(--envelope-width-base) * .8231);--opened-flap-translate-y: calc(var(--envelope-width-base) * -.5231);--left-flap-translate-x: calc(var(--envelope-width-base) * -1.1769);--left-flap-translate-y: calc(var(--envelope-height) * -.9859);--right-flap-translate-x: calc(var(--envelope-width-base) * -.9231);--right-flap-translate-y: calc(var(--envelope-height) * .8873);--letter-y: calc(var(--letter-height) + var(--envelope-width-base) * .1538);--letter-y-extended: calc(var(--letter-height) - var(--envelope-width-base) * .6154);--letter-y-over-extended: calc(var(--letter-height) - var(--envelope-width-base) * .7077);--flap-duration: .5s;--flap-delay-close: .05s;--flap-delay-open: .25s;--flap-delay-close-sequence: .5s;--letter-duration: .6s;--letter-delay: .6s;--easing: cubic-bezier(.32, 0, .67, 0);--letter-easing: cubic-bezier(0, .5, 0, 1)}#animationContainer{width:var(--container-size);height:var(--container-size);position:relative}#logoContainer{height:var(--logo-container-height);width:var(--envelope-width);overflow:hidden;margin-top:var(--logo-container-margin-top);margin-left:var(--logo-container-margin-left)}#shadowContainer{position:relative;top:var(--shadow-container-top);left:var(--shadow-container-left);width:var(--envelope-width);height:var(--envelope-height);border-radius:0 0 7px 7px;box-shadow:var(--color-shadow) 0 4px 5px;opacity:0;transition:opacity .3s ease}#flapWrapper{width:var(--envelope-width);margin-top:var(--flap-wrapper-margin-top)}#envelopeFront{width:var(--envelope-width);height:var(--envelope-height);border-radius:0 0 7px 7px;overflow:hidden;margin-top:var(--envelope-front-margin-top)}#envelopeFront .leftFlap{width:var(--front-flap-width);height:var(--envelope-height);background:var(--color-envelope-flap-left);transform:translate(var(--left-flap-translate-x),var(--left-flap-translate-y)) rotate(28deg)}#envelopeFront .rightFlap{width:var(--front-flap-width);height:var(--envelope-height);background:var(--color-envelope-flap-right);transform:translate(var(--right-flap-translate-x),var(--right-flap-translate-y)) rotate(-28deg)}#envelopeBack{width:var(--envelope-width);height:var(--envelope-back-height);background:var(--color-envelope-back);margin-top:var(--envelope-back-margin-top)}#letter{display:flex;flex-wrap:wrap;width:var(--letter-width);height:var(--letter-height);border-radius:7px;overflow:hidden;margin:0 auto;margin-top:var(--letter-margin-top);transform:translateY(var(--letter-y)) scaleY(1);transition:transform var(--letter-duration) var(--letter-easing)}.squareBlue{background:var(--color-square-blue)}.squareLightBlue{background:var(--color-square-light-blue)}.squareCyan{background:var(--color-square-cyan)}.squareDarkBlue{background:var(--color-square-dark-blue)}.squareNavy{background:var(--color-square-navy)}#openedFlap{width:var(--envelope-width);height:var(--opened-flap-height);transform-origin:top;transform:translateY(var(--opened-flap-translate-y)) rotateX(-90deg);transition:transform var(--flap-duration) var(--easing) var(--flap-delay-open)}#closedFlap{width:var(--envelope-width);transform-origin:top;transform:translateY(calc(-1 * var(--envelope-height))) rotateX(0);transition:transform var(--flap-duration) var(--easing) var(--flap-delay-close)}#flapMask{width:var(--envelope-width);height:var(--opened-flap-height);overflow:hidden}.flapTriangle{width:var(--flap-size);height:var(--flap-size);background:var(--color-envelope-triangle-closed);margin:calc(var(--flap-size) * -.5) auto 0 auto;border-radius:7px;transform:scaleY(.6) rotate(45deg)}#openedFlap .flapTriangle{background:var(--color-envelope-triangle-opened)}#closedFlap .flapTriangle{background:var(--color-envelope-triangle-closed)}.step-1 #closedFlap{transform:translateY(calc(-1 * var(--envelope-height))) rotateX(90deg)}.step-1 #openedFlap{transform:translateY(var(--opened-flap-translate-y)) rotateX(-180deg)}.closing #closedFlap{transition:transform var(--flap-duration) var(--easing) var(--flap-delay-close-sequence)}.closing #openedFlap{transition:transform var(--flap-duration) var(--easing) 0s}.step-2 #letter{transform:translateY(var(--letter-y-extended)) scaleY(1)}.controls{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.control-button{padding:10px 20px;background:var(--color-btn-primary);color:var(--color-btn-text);border:none;border-radius:5px;cursor:pointer;font-size:14px;transition:background-color .3s}.control-button:hover{background:var(--color-btn-primary-hover)}.control-button:disabled{background:var(--color-btn-disabled);cursor:not-allowed}.reset-button{background:var(--color-btn-danger)}.reset-button:hover{background:var(--color-btn-danger-hover)}.close-button{background:var(--color-btn-secondary)}.close-button:hover{background:var(--color-btn-secondary-hover)}.control-button.active{background:var(--color-btn-active)}.control-button.active:hover{background:var(--color-btn-active-hover)}