.site-header{padding:2rem 1rem;text-align:center}.title{font-family:Caveat,cursive;font-size:3rem;color:#fffaf0;font-weight:400;margin:0;line-height:1.2}@media (min-width: 640px){.site-header{padding:3rem 2rem}.title{font-size:4rem}}@media (min-width: 1024px){.site-header{padding:4rem 3rem}.title{font-size:5rem}}.wrapper{height:200px;width:300px;background-color:var(--envelope-base);position:relative;display:flex;justify-content:center;z-index:0;cursor:pointer;transition:opacity .5s .7s}.wrapper.open{opacity:0}.lid{position:absolute;height:100%;width:100%;top:0;left:0;border-right:150px solid transparent;border-bottom:100px solid transparent;border-left:150px solid transparent;transform-origin:top;transition:transform .25s linear}.lid.one{border-top:100px solid var(--envelope-light);transform:rotateX(0);z-index:3;transition-delay:.75s}.lid.two{border-top:100px solid var(--envelope-base);transform:rotateX(90deg);z-index:1;transition-delay:.5s}.envelope{position:absolute;height:100%;width:100%;top:0;left:0;border-top:100px solid transparent;border-right:150px solid var(--envelope-accent);border-bottom:100px solid var(--envelope-accent);border-left:150px solid var(--envelope-accent-dark);z-index:3}.letter{position:absolute;top:0;width:80%;height:80%;background-color:#fff;border-radius:15px;z-index:2;transition:.5s}.letter p{text-align:center;font-size:30px;margin-top:30px;color:#3b4049}.letter-number{position:absolute;bottom:-10px;right:-10px;width:24px;height:24px;background-color:#3b4049;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-family:sans-serif;box-shadow:0 2px 4px #0003;z-index:4}.wrapper:hover .lid.one{transform:rotateX(90deg);transition-delay:0s}.wrapper:hover .lid.two{transform:rotateX(180deg);transition-delay:.25s}.wrapper:hover .letter{transform:translateY(-50px);transition-delay:.5s}.full-letter{position:fixed;top:50%;left:50%;width:95vw;max-width:600px;height:90vh;max-height:800px;background-color:#fffaf0;border-radius:10px;padding:1.5rem;box-shadow:0 10px 30px #0003;z-index:100;display:flex;flex-direction:column;overflow:hidden}.letter-date{font-family:Caveat,cursive;font-size:1rem;color:#666;margin-bottom:1.5rem;flex-shrink:0}.close-button{position:absolute;top:.75rem;right:.75rem;background:none;border:none;font-size:2rem;color:#333;cursor:pointer;padding:0;line-height:1;z-index:2}.handwritten-text{font-family:Caveat,cursive;font-size:1.5rem;color:#333;white-space:pre-wrap;line-height:1.4;overflow-y:auto;padding-right:1rem;flex-grow:1}.handwritten-text p{margin-bottom:1rem}.handwritten-text p:last-child{margin-bottom:0}.handwritten-text::-webkit-scrollbar{width:8px}.handwritten-text::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.handwritten-text::-webkit-scrollbar-thumb{background:#00000026;border-radius:4px}.handwritten-text::-webkit-scrollbar-thumb:hover{background:#00000040}@media (min-width: 768px){.full-letter{padding:2.5rem}.letter-date{font-size:1.2rem;margin-bottom:2rem}.handwritten-text{font-size:2rem;line-height:1.5}.close-button{top:1.25rem;right:1.25rem;font-size:2.5rem}}.envelope-grid{display:grid;grid-template-columns:repeat(auto-fit,280px);gap:1.5rem;padding:2rem 1rem;width:100%;max-width:1400px;margin:0 auto;height:calc(100vh - var(--header-height));overflow-y:auto;justify-content:center;align-content:start}.envelope-grid:before{content:"";height:60px;grid-column:1 / -1}.envelope-grid::-webkit-scrollbar{width:8px}.envelope-grid::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}.envelope-grid::-webkit-scrollbar-thumb{background:#00000026;border-radius:4px}.envelope-grid::-webkit-scrollbar-thumb:hover{background:#00000040}@media (min-width: 640px){.envelope-grid{padding:2.5rem 2rem 2rem;gap:2rem;grid-template-columns:repeat(auto-fit,300px)}.envelope-grid:before{height:80px}}@media (min-width: 1024px){.envelope-grid{padding:3rem;gap:2.5rem}.envelope-grid:before{height:100px}}.auth-modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.auth-modal{background:#fffaf0;padding:2rem;border-radius:15px;width:100%;max-width:400px;text-align:center;box-shadow:0 10px 30px #0000004d}.auth-modal h2{font-family:Caveat,cursive;font-size:2rem;color:#3b4049;margin-bottom:1rem;font-weight:400}.auth-modal p{color:#666;margin-bottom:1rem;font-size:.95rem}.auth-modal .hint{color:#3b4049;font-family:Caveat,cursive;font-size:1.5rem;margin:1.5rem 0}.auth-modal .format{font-size:1rem;color:#666;font-family:sans-serif}.auth-modal form{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.auth-modal input{padding:.75rem 1rem;border:2px solid #ddd;border-radius:8px;font-size:1.25rem;text-align:center;transition:border-color .2s;letter-spacing:1px}.auth-modal input:focus{outline:none;border-color:#3760c9}.auth-modal form.error input{border-color:#ff6b6b}.auth-modal button{background:#3760c9;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:background-color .2s}.auth-modal button:hover{background:#2d4ea6}.error-message{color:#ff6b6b;margin-top:1rem;font-size:.9rem}.lockout-message{color:#ff6b6b;margin:1.5rem 0;padding:1rem;background:#ff6b6b1a;border-radius:8px;font-size:.95rem}*{margin:0;padding:0;box-sizing:border-box}:root{--header-height: 120px}@media (min-width: 640px){:root{--header-height: 160px}}@media (min-width: 1024px){:root{--header-height: 200px}}body,html{height:100%;margin:0;font-family:sans-serif;background-color:#3b4049;overflow:hidden}#root{height:100vh;display:flex;flex-direction:column}