.env{position:relative;width:100%;max-width:340px;aspect-ratio:3/2;cursor:pointer;outline:none;--paper:#f4f0e6;--body:#184c3a;--body-dark:#123626}.env:focus-visible{box-shadow:0 0 0 3px rgba(101,195,185,.6);border-radius:8px}.env__back,.env__flap,.env__front,.env__letter{position:absolute;left:0;right:0}.env__back{inset:0;background:var(--body-dark);border-radius:8px}.env__letter{left:7%;right:7%;bottom:8%;top:12%;background:var(--paper);border-radius:4px;padding:clamp(.75rem,3vw,1.1rem);color:#3f4a45;box-shadow:0 10px 24px -14px rgba(0,0,0,.5);transform:translateY(14%);transition:transform .55s cubic-bezier(.16,1,.3,1);z-index:2;overflow:hidden}.env.is-open .env__letter{transform:translateY(-42%)}.env__from{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#4ca69c}.env__letter ul{margin-top:.5rem;list-style:none;display:flex;flex-direction:column;gap:.35rem}.env__letter li{position:relative;padding-left:.85rem;font-size:.78rem;line-height:1.35}.env__letter li:before{content:"";position:absolute;left:0;top:.5em;width:4px;height:4px;border-radius:50%;background:#65c3b9}.env__front{bottom:0;height:62%;background:linear-gradient(180deg,var(--body),var(--body-dark));border-radius:0 0 8px 8px;z-index:3;clip-path:polygon(0 28%,50% 100%,100% 28%,100% 100%,0 100%)}.env__flap{top:0;height:60%;background:linear-gradient(180deg,#1f5a44,var(--body));border-radius:8px 8px 0 0;transform-origin:top center;transform:rotateX(0deg);transition:transform .5s cubic-bezier(.16,1,.3,1);clip-path:polygon(0 0,100% 0,50% 92%);z-index:4}.env.is-open .env__flap{transform:rotateX(180deg);z-index:1}.env__hint{position:absolute;left:0;right:0;bottom:-1.4rem;text-align:center;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#9aa8a2}@media (prefers-reduced-motion:reduce){.env__flap,.env__letter{transition:none}}