:root { --bg: #F8F3EA; --surface: #FFFDF8; --ink: #2B2620; --muted: #7A6F60; --accent: #B8923A; --line: #D9C9A3; color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.5 Georgia, 'Times New Roman', serif; }
main { max-width: 480px; margin: 0 auto; padding: 16px; }
.envelope { min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
.env { position: relative; width: 300px; height: 200px; perspective: 800px; }
.env-back, .env-front, .env-flap { position: absolute; left: 0; width: 100%; }
.env-back { top: 0; height: 100%; background: #E9DFC9; border-radius: 6px; }
.env-card { position: absolute; left: 6%; top: 8%; width: 88%; height: 84%; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 18px; text-align: center; will-change: transform; }
.env-front { bottom: 0; height: 100%; background: #F1E7D2; clip-path: polygon(0 35%, 50% 70%, 100% 35%, 100% 100%, 0 100%); border-radius: 6px; }
.env-flap { top: 0; height: 60%; background: #E4D6B8; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; will-change: transform; }
.env-seal { position: absolute; left: 50%; top: 52%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.env-open { display: inline-block; min-height: 48px; padding: 12px 28px; border-radius: 24px; background: var(--ink); color: #fff; text-decoration: none; font-size: 18px; }
.eyebrow { letter-spacing: .2em; color: var(--accent); font-size: 12px; margin: 0 0 8px; }
.names { font-size: 28px; margin: 0; font-weight: normal; }
.invite { min-height: 60vh; text-align: center; padding: 48px 0; }
.date, .place { margin: 8px 0; }
.diag { font-size: 13px; background: #fff; border: 1px solid var(--line); padding: 12px; }
.diag pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; }
.mute { position: fixed; right: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 20px; }
.mute[aria-pressed="true"] { opacity: .5; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }