body.letters{background:#faf7f2;color:#5e5b55;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;padding-bottom:110px}body.letters.letters-modal-open,body.letters.letters-splash-active{overflow:hidden}.letters-hero-splash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#f7f0e6;display:flex;align-items:center;justify-content:center;padding:0 24px;text-align:center;opacity:1;transition:opacity .6s ease;box-sizing:border-box}.letters-hero-splash.is-hidden{opacity:0;pointer-events:none}.letters-hero-inner{width:min(100%,1100px);margin:0 auto;text-align:center}.letters-hero-title{font-family:Playfair Display,serif;font-size:clamp(2.4rem,4vw,4.2rem);line-height:1.08;letter-spacing:.04em;color:#4a35c8;margin:0 0 14px;text-shadow:0 0 22px rgba(74,53,200,.32),0 0 40px rgba(74,53,200,.22)}.letters-hero-title-text{display:inline-block;white-space:nowrap;border-right:3px solid rgba(74,53,200,.8);padding-right:6px;clip-path:inset(-6px 100% -6px 0);animation:letters-hero-reveal 1.8s steps(45,end) .3s forwards,letters-hero-caret .7s steps(1,end) infinite .3s,letters-hero-glow 3s ease-in-out infinite 1s}.letters-hero-sub{margin:0;font-size:clamp(1rem,1.5vw,1.3rem);color:#4a35c8;opacity:0;animation:letters-sub-fade .9s ease 2.2s forwards}@keyframes letters-sub-fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes letters-hero-reveal{0%{clip-path:inset(-6px 100% -6px 0)}to{clip-path:inset(-6px 0 -6px 0)}}@keyframes letters-hero-caret{0%,49%{border-right-color:#4a35c8cc}50%,to{border-right-color:transparent}}@keyframes letters-hero-glow{0%{text-shadow:0 0 12px rgba(74,53,200,.3),0 0 28px rgba(74,53,200,.15)}50%{text-shadow:0 0 20px rgba(74,53,200,.55),0 0 40px rgba(74,53,200,.25)}to{text-shadow:0 0 12px rgba(74,53,200,.3),0 0 28px rgba(74,53,200,.15)}}.letters-header,.letters-top{display:none}.letters-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e6dfd3;background:#f7f2e8}.letters-header-title{font-size:22px;margin:0;color:#5e5b55;font-weight:600}.letters-back-link{color:#7a7163;text-decoration:none;font-size:.9rem}.letters-back-link:hover{text-decoration:underline}.letters-top{text-align:center;padding:24px 40px 14px}.letters-title{font-size:1.3rem;font-weight:600;margin-bottom:6px;color:#5e5b55}.letters-tagline{font-size:.95rem;color:#8a8171}.letters-primary-btn{display:inline-block;margin:22px auto 8px;background:#fff;border:1px solid #E0DCD5;padding:10px 24px;border-radius:999px;font-size:.95rem;cursor:pointer;color:#5e5b55;transition:box-shadow .2s ease,transform .2s ease,background-color .2s ease}.letters-primary-btn:hover{box-shadow:0 4px 12px #00000014;transform:translateY(-1px);background-color:#fffbf4}.letters-filter-row{margin-top:18px;display:inline-flex;align-items:center;gap:8px}.letters-filter-label{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#a19788}.letters-filter-select{border:1px solid #E0DCD5;border-radius:999px;padding:6px 12px;font-size:.9rem;background:#fff;color:#5e5b55}#letter-grid{column-count:4;column-gap:24px;padding:24px 24px 40px}#letter-grid{transition:opacity .2s ease,transform .2s ease}.letters-grid--fade-out{opacity:0;transform:translateY(4px)}.letters-grid--fade-in{animation:letters-grid-in .26s cubic-bezier(.25,.8,.25,1)}@keyframes letters-grid-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.letters-empty{text-align:center;padding:60px 20px 40px;color:#8a8171}.letters-empty-emoji{font-size:2.2rem;margin-bottom:10px}.letters-empty-title{font-size:1rem;font-weight:600;margin-bottom:4px;color:#5e5b55}.letters-empty-text{font-size:.9rem;max-width:320px;margin:0 auto}.letter-card{position:relative;background:#fffbf4;padding:18px 20px 16px;margin-bottom:24px;border-radius:20px;box-shadow:0 18px 40px #00000014;break-inside:avoid;cursor:pointer;--card-rotate-x: 0deg;--card-rotate-y: 0deg;transform:translateY(0) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y));transform-style:preserve-3d;transition:box-shadow .18s cubic-bezier(.22,.61,.36,1),transform .18s cubic-bezier(.22,.61,.36,1),background-color .18s ease}.letter-card:after{content:"Read full letter";position:absolute;bottom:12px;left:50%;transform:translate(-50%) translateY(6px);background:#0f0a05e6;color:#fdf3e6;padding:6px 10px;border-radius:8px;font-size:.72rem;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;white-space:nowrap}.letter-card:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.letter-card:hover{box-shadow:0 26px 60px #00000029,0 0 0 1px #fff9 inset;background-color:#fff7ec;transform:translateY(-2px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y))}.letter-card:before{content:"";position:absolute;top:0;left:0;width:42px;height:24px;border-top-left-radius:20px;background:radial-gradient(circle at 0 0,rgba(0,0,0,.18),transparent 60%);opacity:0;pointer-events:none;transition:opacity .18s ease}.letter-card:hover:before{opacity:1}.letter-card *{cursor:inherit}.letter-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.letter-meta-date{font-size:.75rem;color:#a09687;letter-spacing:.08em;text-transform:uppercase}.letter-meta{display:flex;flex-direction:column}.letter-meta-date{font-size:.72rem;color:#a19788;letter-spacing:.12em;text-transform:uppercase}.letter-mood-pill{margin-left:auto;font-size:.78rem;padding:4px 11px;border-radius:999px;color:#43372a;font-weight:600;background:#e0dcd5;box-shadow:0 3px 8px #00000014;transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .16s ease,filter .16s ease}.letter-mood-pill[data-mood=Dreamy]{background:#cfe5f1}.letter-mood-pill[data-mood=Happy]{background:#ffd689}.letter-mood-pill[data-mood=Sad]{background:#b5c8c1}.letter-mood-pill[data-mood=Meh]{background:#f3e0b5}.letter-mood-pill[data-mood=Rant]{background:#ff9a7c}.letter-preview{white-space:pre-wrap;line-height:1.7;font-size:.95rem;color:#4d4639;margin-bottom:10px;text-align:left}.letter-card-footer{margin-top:12px;display:flex;justify-content:space-between}.letter-footer-left{display:flex;align-items:center;gap:8px}.letter-avatar{width:28px;height:28px;border-radius:50%;background:#f0ece4;display:flex;align-items:center;justify-content:center;font-weight:600;color:#5e5b55;font-size:.9rem}.letter-meta-name{font-size:.9rem;color:#5e5b55;font-weight:600}.letter-mood-pill{font-size:.78rem;padding:4px 12px;border-radius:999px;color:#fff;font-weight:500}.letter-card:hover .letter-mood-pill{transform:translateY(-1px) scale(1.03);box-shadow:0 6px 14px #0000001f;filter:saturate(1.05)}.letter-card:hover .letter-read-btn{opacity:1;transform:translateY(0)}.letter-delete-btn{position:absolute;top:8px;right:8px;background:#ffffffe6;font-size:1.1rem;color:#874800;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;opacity:.85;border:none;cursor:pointer;transition:opacity .2s}.letter-delete-btn:hover{opacity:1}body:not(.admin-mode) .letter-delete-btn{display:none}.letter-read-btn,.letter-mood-pill,.letter-delete-btn{cursor:pointer}@keyframes letter-card-in{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.letter-card--enter{animation:letter-card-in .26s cubic-bezier(.25,.8,.25,1) both}.letters-modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0c080373;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px;z-index:50}.letters-modal-content{background:#fffbf4;padding:22px 24px 20px;max-width:760px;width:100%;border-radius:18px;box-shadow:0 26px 70px #09060273,0 0 0 1px #ffffffa6 inset;max-height:calc(100vh - 48px);overflow-y:auto;transform-origin:center;animation:letters-modal-in .22s cubic-bezier(.23,.82,.35,1.01)}@keyframes letters-modal-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.letters-modal-close{background:none;border:none;font-size:1rem;cursor:pointer;color:#a19788;float:right;margin-left:8px;transition:transform .12s ease,color .12s ease}.letters-modal-close:hover{transform:scale(1.1);color:#7b6d5b}.letters-modal-title{margin-top:0;margin-bottom:6px;font-size:1.45rem;font-weight:700;color:#3c342b;text-align:center}.letters-modal-desc{margin:0 auto 20px;max-width:600px;font-size:.95rem;line-height:1.55;color:#7f7468;text-align:center}.letters-textarea{width:100%;min-height:220px;border:1px solid #E6E1D8;background:#fffcf8;border-radius:14px;padding:14px 16px;resize:vertical;font-size:1rem;line-height:1.7;color:#3f382c;transition:box-shadow .16s ease,border-color .16s ease}.letters-textarea:focus{outline:none;border-color:#c8baa7;box-shadow:0 0 0 2px #c8baa759}.letters-char-count{text-align:right;font-size:.85rem;color:#a49b8e;margin-top:6px}.letters-editor-row{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}.letters-input{border:1px solid #E6E1D8;background:#fffcf8;border-radius:999px;padding:10px 16px;font-size:.95rem;color:#3f382c;flex:1 1 200px;overflow:visible;transition:border-color .15s ease,box-shadow .15s ease}.letters-input::placeholder{color:#9c9385;padding-left:10px}.letters-select{border:1px solid #E6E1D8;background:#fffcf8;border-radius:999px;padding:10px 34px 10px 16px;font-size:.95rem;color:#3f382c;flex:1 1 200px;appearance:none;-webkit-appearance:none;-moz-appearance:none;transition:border-color .15s ease,box-shadow .15s ease;background-image:url("data:image/svg+xml;utf8,<svg fill='none' stroke='%236B6050' stroke-width='2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:14px}.letters-input::placeholder{padding-left:4px;color:#9c9385}.letters-input:focus,.letters-select:focus{outline:none;border-color:#c8baa7;box-shadow:0 0 0 2px #c8baa740}.letters-submit-btn{margin:24px auto 0;display:block;background:#1f1a13;color:#fff;border:none;border-radius:999px;padding:12px 28px;font-size:.95rem;font-weight:500;cursor:pointer;box-shadow:0 12px 26px #00000040;transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .16s ease,background-color .16s ease}.letters-submit-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px #0000004d}.letters-submit-btn:active{transform:translateY(0) scale(.96)}.letters-modal-header{margin:4px 0 16px;display:flex;align-items:center;justify-content:space-between}.letters-modal-header-left{display:flex;align-items:center;gap:10px}.letters-modal-body{white-space:pre-wrap;line-height:1.8;font-size:1rem;color:#4d4639;text-align:left;max-width:60rem;margin:8px auto 18px}.letters-modal-footer{margin-top:8px}.letters-reactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.letters-react-btn{border:none;background:#f4f0ea;border-radius:999px;padding:5px 11px;font-size:.9rem;cursor:pointer;display:flex;align-items:center;gap:6px;transform:translateY(0) scale(1);box-shadow:0 4px 10px #00000014;transition:background-color .14s ease,box-shadow .14s ease,transform .14s cubic-bezier(.22,.61,.36,1)}.letters-react-btn:hover{background:#ece3d4;transform:translateY(-1px) scale(1.03);box-shadow:0 8px 18px #00000029}.letters-react-btn:active{transform:translateY(0) scale(.96);box-shadow:0 3px 8px #00000024}.letters-react-emoji{display:inline-block;font-size:1.1rem}.letters-react-count{font-size:.78rem;color:#7a7163}@keyframes letters-emoji-pop{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-3px) scale(1.25) rotate(-9deg)}to{transform:translateY(0) scale(1)}}.letters-react-emoji.is-popping{animation:letters-emoji-pop .26s cubic-bezier(.22,.61,.36,1)}.letters-modal-footer{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.letters-report-btn{border:none;background:none;display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:#a0483a;cursor:pointer;padding:4px 0;transition:color .14s ease,transform .14s cubic-bezier(.22,.61,.36,1)}.letters-report-flag{font-size:.9rem}.letters-report-btn:hover{color:#b75140;transform:translateY(-1px)}.letters-report-btn.is-disabled{opacity:.7;cursor:default;transform:none}.letters-dock{position:fixed;bottom:18px;left:0;width:100%;z-index:40;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.letters-dock-center{pointer-events:none;flex:1;display:flex;justify-content:center}.letters-dock-group,.letters-dock-icon,.letters-dock-inner{pointer-events:auto}.letters-dock-group{display:flex;align-items:center;gap:12px}.letters-dock-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 18px;border-radius:999px;background:#fffaf3e6;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(214,201,183,.8);box-shadow:0 24px 60px #0f0a0259,0 0 0 1px #fff6 inset}.letters-dock-left{display:flex;align-items:baseline;gap:4px}.letters-dock-logo{font-family:Lily Script One,serif;font-weight:700;font-size:.9rem;letter-spacing:.09em}.letters-dock-logo a{text-decoration:none;color:inherit;cursor:pointer}.letters-dock-sub{font-size:.8rem;opacity:.7}.letters-dock-moods{display:flex;align-items:center;gap:6px;position:relative;overflow:visible}.letters-dock-mood:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:120%;transform:translate(-50%,4px);padding:5px 10px;font-size:.72rem;border-radius:999px;background:#150f08f2;color:#fdf3e6;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}.letters-dock-mood:before{content:"";position:absolute;left:50%;bottom:110%;transform:translate(-50%);border-width:5px 5px 0 5px;border-style:solid;border-color:rgba(21,15,8,.95) transparent transparent transparent;opacity:0;transition:opacity .16s ease}.letters-dock-mood:hover:after,.letters-dock-mood:hover:before{opacity:1}.letters-dock-mood:hover:after{transform:translate(-50%)}.letters-dock-mood{border:none;border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:500;background:transparent;color:#5b5244;cursor:pointer;opacity:.8;transition:background-color .16s ease,transform .16s cubic-bezier(.22,.61,.36,1),opacity .16s ease,box-shadow .16s ease}.letters-dock-mood span{margin-right:4px}.letters-dock-mood:hover{opacity:1;transform:translateY(-1px);box-shadow:0 6px 16px #00000029}.letters-dock-mood.is-active{background:#1f1a13;color:#f9f2e8;opacity:1}.letters-dock-mood.is-active.is-pulsing{animation:letters-mood-pulse .42s cubic-bezier(.22,.61,.36,1)}@keyframes letters-mood-pulse{0%{box-shadow:0 0 #1f1a1373;transform:translateY(-1px) scale(1)}50%{box-shadow:0 0 0 10px #1f1a1300;transform:translateY(-2px) scale(1.04)}to{box-shadow:0 0 #1f1a1300;transform:translateY(-1px) scale(1)}}.letters-dock-icon{width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:none;background:#f5eee4;color:#221a13;cursor:pointer;font-size:.95rem;box-shadow:0 10px 22px #00000040;transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s ease,background-color .12s ease,opacity .12s ease}.letters-dock-icon:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 16px 30px #0006}.letters-dock-icon:active{transform:translateY(0) scale(.96);box-shadow:0 8px 18px #0000004d}.letters-dock-write{width:54px;height:54px;border-radius:999px;box-shadow:0 18px 40px #00000073,0 0 0 1px #fffc inset;transform-origin:center;animation:letters-write-float 3.4s ease-in-out infinite}@keyframes letters-write-float{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.03)}to{transform:translateY(0) scale(1)}}.letters-dock-write-icon{display:inline-block;font-size:1.2rem;transition:transform .22s cubic-bezier(.22,.61,.36,1)}.letters-dock-write:hover{animation-play-state:paused;transform:translateY(-4px) scale(1.07);box-shadow:0 24px 52px #0009,0 0 0 1px #ffffffe6 inset}.letters-dock-write:hover .letters-dock-write-icon{transform:rotate(-14deg) translateY(-1px)}.letters-dock-write:active{transform:translateY(0) scale(.96);box-shadow:0 12px 26px #00000073}.letters-dock-back{border:1px solid rgba(150,133,112,.4);margin-right:24px}.letters-dock-write:after{content:"Write";position:absolute;right:105%;top:50%;transform:translateY(-50%);background:#0f0a05e6;color:#fdf3e6;font-size:.75rem;padding:5px 10px;border-radius:999px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .16s ease,transform .16s ease}.letters-dock-write:hover:after{opacity:1;transform:translate(-4px,-50%)}.letters-back-icon{font-size:1.1rem;display:inline-block;transition:transform .16s cubic-bezier(.22,.61,.36,1)}.letters-dock-back:hover .letters-back-icon{transform:translate(-2px) rotate(-8deg)}.letters-dock-back{position:relative;overflow:visible}.letters-dock-back:after{content:attr(data-tooltip);position:absolute;bottom:120%;left:50%;transform:translate(-50%) translateY(4px);background:#150f08f2;color:#fdf3e6;padding:5px 10px;font-size:.72rem;border-radius:8px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .15s ease,transform .15s ease}.letters-dock-back:before{content:"";position:absolute;bottom:108%;left:50%;transform:translate(-50%);border-width:5px 5px 0 5px;border-style:solid;border-color:rgba(21,15,8,.95) transparent transparent transparent;opacity:0;transition:opacity .15s ease}.letters-dock-back:hover:after,.letters-dock-back:hover:before{opacity:1}.letters-dock-back:hover:after{transform:translate(-50%) translateY(0)}@media (max-width: 720px){.letters-dock{width:calc(100% - 20px);gap:10px}.letters-dock-inner{padding-inline:12px;gap:12px}.letters-dock-moods{gap:4px;flex-wrap:wrap}.letters-dock-mood{padding-inline:8px;font-size:.72rem}.letters-dock-logo{font-size:.8rem}.letters-dock-icon{width:32px;height:32px}}@media (max-width: 1160px){#letter-grid{column-count:3;padding-inline:24px}.letters-top{padding-inline:24px}}@media (max-width: 1024px){#letter-grid{column-count:2;padding-inline:24px}.letters-top{padding-inline:24px}}@media (max-width: 720px){#letter-grid{column-count:1;padding-inline:18px}.letters-top{padding-inline:18px;padding-top:18px}.letter-card{border-radius:16px}.letters-modal-content{max-width:100%}.letters-dock-inner{padding-inline:12px;gap:10px}.letters-dock-moods{gap:4px}.letters-dock-mood{padding-inline:8px;font-size:.72rem}.letters-dock-logo{font-size:.85rem}}.letters-modal-content .letters-input[type=text],.letters-modal-content .letters-select{width:auto;border:1px solid #E6E1D8;border-radius:100px;background:#fffcf8;outline:none;padding:10px 16px;font-size:.95rem;color:#3f382c}.letters-modal-content .letters-select{padding-right:34px}.letters-modal-content .letters-input::placeholder{color:#9c9385}@media (max-width: 640px){.letters-dock{bottom:12px;justify-content:center}.letters-dock-center{flex:1;justify-content:center}.letters-dock-group{width:calc(100% - 82px);max-width:520px;justify-content:space-between}.letters-dock-inner{flex:1;min-width:0;padding:10px 14px;gap:8px;flex-wrap:wrap;align-items:flex-start}.letters-dock-left{flex:0 0 100%}.letters-dock-moods{flex:0 0 100%;flex-wrap:wrap;justify-content:flex-start;row-gap:4px}.letters-dock-mood{padding-inline:8px;font-size:.72rem}.letters-dock-logo{font-size:.82rem}.letters-dock-icon{width:34px;height:34px;font-size:.9rem}.letters-dock-back{margin-right:10px}}@media (max-width: 480px){.letters-hero-inner{max-width:100%;padding-inline:12px}.letters-hero-title{font-size:2.1rem}.letters-hero-sub{font-size:.9rem}#letter-grid{padding-inline:14px;padding-top:20px}.letters-modal-content{max-width:100%;padding:18px 16px;border-radius:14px;max-height:calc(100vh - 24px)}.letters-dock-inner{max-width:calc(100% - 80px)}.letters-dock-moods{justify-content:flex-start}.letter-card{padding:16px 16px 14px;border-radius:14px}}@media (min-width: 1400px){.letters-hero-splash{padding-left:0;padding-right:0}.letters-hero-inner{width:min(100%,1100px)}}@media (max-width: 900px){.letters-hero-title{font-size:clamp(2.1rem,5vw,3.2rem)}.letters-hero-sub{font-size:.98rem}}@media (max-width: 720px){.letters-hero-splash{align-items:center;justify-content:center;padding:24px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}.letters-hero-inner{width:min(100%,600px)}}@media (max-width: 480px){.letters-hero-splash{padding:20px 12px}.letters-hero-title{font-size:clamp(1.8rem,7vw,2.2rem)}.letters-hero-sub{font-size:.9rem}.letters-hero-title-text{white-space:normal;margin:0 auto}}