@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=IM+Fell+English:ital@0;1&family=Special+Elite&display=swap");:root{--bg-dark:#121110;--bg-panel:#1a1817;--parchment:#f4ebd0;--parchment-shadow:rgba(0,0,0,.4);--ink:#2b2520;--ink-light:#4e433a;--gold:#c5a880;--gold-hover:#e2c9a9;--wax-red:#8b1e1e;--font-typewriter:"Special Elite","Courier New",Courier,monospace;--font-cursive:"IM Fell English",Georgia,serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:#e5dada;font-family:Courier Prime,monospace;overflow-x:hidden;min-height:100vh}body:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;background-image:radial-gradient(circle,transparent 20%,var(--bg-dark) 80%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");pointer-events:none;z-index:-1}h1,h2,h3{font-family:var(--font-cursive);letter-spacing:.05em;-moz-user-select:none;user-select:none;-webkit-user-select:none}a,h1,h2,h3{color:var(--gold)}a{text-decoration:none;transition:color .2s ease}a:hover{color:var(--gold-hover)}.container{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}.header{text-align:center;margin-bottom:3rem}.header h1{font-size:3rem;margin-bottom:.5rem}.header p{color:#a09590;font-style:italic;font-size:1.1rem}.letter-wrapper{perspective:1500px;margin:2rem auto;max-width:700px;width:100%}.parchment-sheet{background-color:var(--parchment);color:var(--ink);padding:3rem;box-shadow:0 15px 35px var(--parchment-shadow);border-radius:4px;position:relative;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");border:1px solid rgba(0,0,0,.08);min-height:500px;display:flex;flex-direction:column;transform-origin:top center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.parchment-sheet:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:inset 0 0 40px rgba(139,101,62,.25);pointer-events:none;border-radius:4px}.letter-header{border-bottom:1px dashed rgba(43,37,32,.2);padding-bottom:1rem;margin-bottom:2rem;font-size:.9rem;color:var(--ink-light);line-height:1.6}.letter-header,.letter-textarea{font-family:var(--font-typewriter)}.letter-textarea{width:100%;flex-grow:1;background:transparent;border:none;resize:none;font-size:1.15rem;color:var(--ink);line-height:1.8;outline:none;min-height:300px}.letter-textarea::placeholder{color:rgba(43,37,32,.4)}.letter-footer{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;border-top:1px dashed rgba(43,37,32,.2);padding-top:1.5rem}.letter-footer input{background:transparent;border:none;border-bottom:1px solid rgba(43,37,32,.3);color:var(--ink);outline:none;padding:.2rem .5rem;width:250px}.btn-send,.letter-footer input{font-family:var(--font-typewriter);font-size:1.1rem}.btn-send{background-color:var(--ink);color:var(--parchment);border:none;padding:.8rem 2rem;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.25);transition:all .3s ease;border-radius:2px}.btn-send:hover{background-color:var(--ink-light);transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,.35)}.envelope-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:450px;height:300px;background-color:#dcc79d;box-shadow:0 20px 40px rgba(0,0,0,.6);z-index:50;border-radius:4px;border:1px solid rgba(0,0,0,.1);overflow:hidden;display:flex;align-items:center;justify-content:center}.envelope-back{position:absolute;width:100%;height:100%;background:#cbb489;z-index:1}.envelope-flap{top:0;border-left:225px solid transparent;border-right:225px solid transparent;border-top:150px solid #d4be95;transform-origin:top center;z-index:10}.envelope-flap,.envelope-pocket{position:absolute;left:0;width:0;height:0}.envelope-pocket{bottom:0;border-left:225px solid #e1ceab;border-right:225px solid #e1ceab;border-bottom:150px solid #d9c49d;z-index:5}.postmark{top:30px;right:40px;width:90px;height:90px;border:2px dashed rgba(43,37,32,.4);font-size:.6rem;color:rgba(43,37,32,.5);font-family:var(--font-typewriter);text-align:center;transform:rotate(-12deg);z-index:20}.postmark,.wax-seal{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center}.wax-seal{bottom:30px;left:calc(50% - 25px);width:50px;height:50px;background-color:var(--wax-red);box-shadow:0 4px 8px rgba(0,0,0,.4);z-index:25;border:1px solid rgba(0,0,0,.15);cursor:pointer}.wax-seal:after{content:"★";color:hsla(0,0%,100%,.5);font-size:1.2rem}.receipt-card{max-width:500px;margin:3rem auto;background:var(--bg-panel);border:1px solid #332d29;border-radius:4px;padding:2.5rem;box-shadow:0 10px 25px rgba(0,0,0,.5);text-align:center}.receipt-no{font-family:var(--font-typewriter);font-size:1.6rem;color:var(--gold);letter-spacing:.05em;border:1px dashed hsla(35,37%,64%,.3);padding:.8rem;background:rgba(0,0,0,.2)}.qr-box,.receipt-no{margin:1.5rem 0;display:inline-block}.qr-box{background:#fff;padding:1rem;border-radius:4px}.archive-section{margin-top:5rem;border-top:1px solid #2e2825;padding-top:4rem}.archive-section h2{font-size:2.2rem;text-align:center;margin-bottom:2.5rem}.grid-archive{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:2rem;gap:2rem;margin-top:1.5rem}.envelope-card{background-color:#dfd3b9;color:var(--ink);border:1px solid #cbb893;border-radius:2px;padding:1.5rem;transition:all .4s cubic-bezier(.165,.84,.44,1);cursor:pointer;position:relative;overflow:hidden;box-shadow:0 8px 16px rgba(0,0,0,.3),inset 0 0 30px rgba(139,101,62,.12);font-family:var(--font-typewriter);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.12'/%3E%3C/svg%3E")}.envelope-card:hover{transform:translateY(-6px) rotate(.5deg);border-color:#8b6e4b;box-shadow:0 16px 32px rgba(0,0,0,.45),inset 0 0 40px rgba(139,101,62,.22)}.envelope-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:repeating-linear-gradient(45deg,#8b1e1e,#8b1e1e 10px,#f4ebd0 0,#f4ebd0 20px,#2a52be 0,#2a52be 30px,#f4ebd0 0,#f4ebd0 40px)}.card-postmark{position:absolute;top:15px;right:15px;width:65px;height:65px;border:1px dashed rgba(43,37,32,.25);border-radius:50%;align-items:center;justify-content:center;font-size:.45rem;color:rgba(43,37,32,.35);transform:rotate(15deg);pointer-events:none;line-height:1.3}.card-header,.card-postmark{display:flex;flex-direction:column;font-family:var(--font-typewriter)}.card-header{gap:.2rem;font-size:.75rem;color:var(--ink-light);margin-bottom:1.2rem;border-bottom:1px dashed rgba(43,37,32,.15);padding-bottom:.5rem}.card-snippet{font-style:italic;font-family:var(--font-cursive);color:var(--ink);font-size:1.15rem;line-height:1.6;margin-bottom:1.5rem;height:5rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.card-status{display:flex;align-items:center;font-size:.8rem;font-family:var(--font-typewriter)}.status-delivered-stamp{border:2px solid #2a6041;color:#2a6041;border-radius:4px;transform:rotate(-5deg)}.status-delivered-stamp,.status-locked-stamp{padding:.15rem .5rem;font-weight:700;font-size:.7rem;text-transform:uppercase;display:inline-flex;align-items:center;gap:.3rem;box-shadow:0 2px 5px rgba(0,0,0,.05);letter-spacing:.05em;opacity:.85}.status-locked-stamp{border:2px solid #8b6e4b;color:#8b6e4b;border-radius:4px;transform:rotate(3deg)}.status-pending-stamp{border:2px solid #8b1e1e;color:#8b1e1e;padding:.15rem .5rem;border-radius:4px;font-weight:700;font-size:.7rem;text-transform:uppercase;transform:rotate(-2deg);display:inline-flex;align-items:center;gap:.3rem;box-shadow:0 2px 5px rgba(0,0,0,.05);letter-spacing:.05em;opacity:.85}.unfold-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh}.revealed-reply{font-family:var(--font-cursive);font-size:1.4rem;line-height:1.8;color:var(--ink);white-space:pre-line}.parchment-sheet.trifold-paper{padding:0!important;background:none!important;border:none!important;box-shadow:none!important;min-height:auto!important;perspective:1500px;transform-style:preserve-3d}.trifold-paper .paper-fold{background-color:var(--parchment);color:var(--ink);padding:2.2rem 3rem;position:relative;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");border-left:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);box-shadow:0 5px 15px rgba(0,0,0,.12);transform-style:preserve-3d;-webkit-backface-visibility:visible;backface-visibility:visible}.trifold-paper .fold-top{border-top:1px solid rgba(0,0,0,.08);border-radius:4px 4px 0 0;transform-origin:bottom center;padding-top:3rem}.trifold-paper .fold-middle{z-index:10}.trifold-paper .fold-bottom{border-bottom:1px solid rgba(0,0,0,.08);border-radius:0 0 4px 4px;transform-origin:top center;padding-bottom:3rem}.paper-crease{height:1px;background:rgba(0,0,0,.05);border-top:1px dashed rgba(43,37,32,.08);position:relative;z-index:20}.fold-shadow{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0;pointer-events:none;z-index:50;mix-blend-mode:multiply}@media (max-width:768px){.header h1{font-size:2.2rem}.parchment-sheet{padding:1.5rem;min-height:400px}.letter-footer{flex-direction:column;gap:1.5rem;align-items:flex-start}.btn-send,.letter-footer input{width:100%}.envelope-wrapper{width:90%;height:auto;aspect-ratio:3/2}}