*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0;padding:0}body{background:#f6efea;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.envelope-container{box-sizing:border-box;cursor:pointer;perspective:1200px;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100vh;padding:80px 24px;display:flex;overflow:visible}.envelope{aspect-ratio:5/3;background:#a07bb0;border-radius:0 0 14px 14px;width:min(900px,90vw);position:relative;overflow:visible;box-shadow:0 18px 40px #00000029}.letter{box-sizing:border-box;z-index:1;pointer-events:none;background:#f3e2d7;border-radius:8px;width:78%;height:68%;transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s;position:absolute;bottom:6%;left:11%;overflow:hidden;transform:translateY(0);box-shadow:0 8px 25px #00000026}.letter-page{box-sizing:border-box;background:#f3e2d7;flex-direction:column;justify-content:flex-start;width:100%;height:100%;padding:clamp(24px,4vw,45px);display:flex}.letter-page h2{text-align:center;color:#555;margin:0 0 20px;font-size:clamp(24px,3vw,38px);font-weight:600;line-height:1.2}.letter-page p{text-align:center;color:#777;margin:0;font-size:clamp(16px,1.5vw,22px);line-height:1.6}.letter-navigation{z-index:10;pointer-events:auto;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;bottom:18px;left:0;right:0}.letter-navigation button{color:#fff;cursor:pointer;background:#a07bb0;border:none;border-radius:8px;padding:7px 14px;font-size:14px;transition:background .2s,transform .2s}.letter-navigation button:hover{background:#8d689e;transform:translateY(-1px)}.letter-navigation button:disabled{opacity:.4;cursor:default;transform:none}.page-number{color:#777;font-size:14px}.pocket{clip-path:polygon(0 0,50% 62%,100% 0,100% 100%,0 100%);z-index:2;pointer-events:none;background:#cba6d6;border-radius:0 0 14px 14px;position:absolute;inset:0}.flap{clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;backface-visibility:hidden;z-index:3;pointer-events:none;background:#a07bb0;width:100%;height:65%;transition:transform .7s cubic-bezier(.22,1,.36,1);position:absolute;top:0;left:0}.flap-badge{color:#8d689e;letter-spacing:.5px;z-index:4;pointer-events:none;background:#f3e2d7;border-radius:999px;padding:10px 22px;font-size:15px;font-weight:600;transition:opacity .3s,transform .3s;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 12px #00000026}.envelope.open .flap{z-index:1;transform:rotateX(180deg)}.envelope.open .letter{z-index:4;transform:translateY(-32%);box-shadow:0 15px 35px #0000002e}.feedback-section{z-index:20;background:#f3e2d7;border-radius:14px;flex-direction:column;align-items:center;gap:14px;width:min(700px,90vw);margin-top:35px;padding:24px;display:flex;position:relative;box-shadow:0 10px 25px #0000001f}.feedback-section h3{color:#555;margin:0;font-size:20px;font-weight:600}.feedback-section textarea{color:#555;resize:vertical;box-sizing:border-box;background:#fff;border:1px solid #ddd;border-radius:10px;width:100%;padding:14px;font-family:inherit;font-size:15px}.feedback-section textarea:focus{border-color:#a07bb0;outline:none;box-shadow:0 0 0 2px #a07bb026}.feedback-section button{color:#fff;cursor:pointer;background:#a07bb0;border:none;border-radius:8px;padding:10px 18px;font-size:14px;transition:background .2s,transform .2s}.feedback-section button:hover:not(:disabled){background:#8d689e;transform:translateY(-1px)}.feedback-section button:disabled{opacity:.5;cursor:default}.feedback-success{color:#6d9275;margin:0;font-size:14px}@media (width<=900px){.envelope-container{padding:70px 20px}.envelope{width:92vw}.letter{width:78%;height:65%;left:11%}.letter-page{padding:28px}}@media (width<=600px){.envelope-container{padding:60px 16px}.envelope{aspect-ratio:1.45;width:94vw}.letter{width:84%;height:70%;left:8%}.letter-page{padding:20px}.letter-page h2{margin-bottom:8px;font-size:18px}.letter-page p{font-size:10px}.letter-navigation{bottom:10px}.letter-navigation button{padding:6px 10px;font-size:8px}}