*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#e7e0d3;font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#9a4a38;text-decoration:none}
a:hover{color:#7a3a2c}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
::selection{background:#e4c9b8}
.scroll::-webkit-scrollbar{width:0;height:0}
.scroll{scrollbar-width:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes glowPulse{0%,100%{box-shadow:0 6px 22px -8px rgba(154,74,56,.34)}50%{box-shadow:0 10px 30px -6px rgba(154,74,56,.55)}}
@keyframes bloom{0%{transform:scale(.4);opacity:0}55%{opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) translateX(-50%)}to{opacity:1;transform:translateY(0) translateX(-50%)}}
@keyframes spin360{to{transform:rotate(360deg)}}
@keyframes tabNudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-5px)}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* ---------- письмо-конверт ---------- */
.letter-tab{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:30;display:flex;align-items:center;gap:8px;
  padding:14px 14px 14px 16px;border:none;border-radius:16px 0 0 16px;background:var(--accent);color:#fff;
  box-shadow:-8px 10px 26px -10px rgba(154,74,56,.7);cursor:pointer}
.letter-tab.unseen{animation:tabNudge 2.2s ease-in-out infinite}
.letter-tab .lt-label{font-family:Caveat,cursive;font-size:18px;line-height:1;white-space:nowrap}
.letter-tab .lt-dot{position:absolute;top:8px;left:8px;width:10px;height:10px;border-radius:50%;background:#F6D98B;box-shadow:0 0 0 2px var(--accent)}

.env-stage{width:min(360px,86vw);perspective:1400px}
.env{position:relative;width:100%;height:0;padding-bottom:66%;transform-style:preserve-3d}
.env-back{position:absolute;inset:0;border-radius:14px;background:linear-gradient(150deg,#B76A4E,#9A4A38)}
.env-paper{position:absolute;left:6%;width:88%;top:9%;z-index:2;background:#FFFDF7;border-radius:8px;
  box-shadow:0 6px 20px -10px rgba(46,39,33,.5);padding:16px 16px;overflow:hidden;max-height:60px;
  transition:transform .85s cubic-bezier(.2,.7,.2,1) .25s, max-height .85s cubic-bezier(.2,.7,.2,1) .25s;transform-origin:top center}
.env-pocket{position:absolute;inset:0;z-index:3;border-radius:14px;background:linear-gradient(160deg,#A6685A,#8f4636);
  clip-path:polygon(0 40%, 50% 74%, 100% 40%, 100% 100%, 0 100%)}
.env-flap{position:absolute;top:0;left:0;width:100%;height:56%;z-index:4;transform-origin:top center;
  background:linear-gradient(160deg,#C08D82,#B76A4E);clip-path:polygon(0 0, 100% 0, 50% 100%);
  transition:transform .8s cubic-bezier(.6,.05,.2,1);backface-visibility:hidden}
.env.open .env-flap{transform:rotateX(180deg);z-index:1}
.env.open .env-paper{transform:translateY(-14%);max-height:60vh;overflow-y:auto;z-index:6}
.env-paper::-webkit-scrollbar{width:0}