@import"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=ZCOOL+XiaoWei&family=Ma+Shan+Zheng&family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@400;700;900&display=swap";html,body{margin:0;padding:0;height:100vh;height:100svh;width:100vw;overflow:hidden}body{font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;background:#f0f4fa;color:#222}#root{width:100%;height:100%;margin:0;padding:0}button:active{opacity:.8}.fixed-navbar{position:fixed;top:0;left:0;width:100%;height:60px;z-index:1000;display:flex;justify-content:center;align-items:center;background:transparent!important;pointer-events:none}@media (max-width: 768px){.fixed-navbar{height:auto;top:auto;bottom:20px}}.navbar-container{display:flex;gap:40px;pointer-events:none}@media (max-width: 768px){.navbar-container{gap:15px;background:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 20px;border-radius:30px;border:1px solid rgba(255,255,255,.1);pointer-events:auto}}.nav-tab{pointer-events:auto;background:transparent;border:none;color:#ffffffb3;font-size:16px;font-weight:500;padding:8px 16px;cursor:pointer;position:relative;transition:all .3s ease;font-family:PingFang SC,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.5)}.nav-tab:hover{color:#fff}.nav-tab.active{color:#fff;font-weight:700}.fixed-navbar.dark-mode .nav-tab{color:#3e2723b3;text-shadow:none}.fixed-navbar.dark-mode .nav-tab:hover,.fixed-navbar.dark-mode .nav-tab.active{color:#3e2723}.fixed-navbar.dark-mode .nav-tab.active:after{background-color:#3e2723;box-shadow:0 0 8px #3e27234d}.nav-tab.active:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:20px;height:2px;background-color:#fff;border-radius:2px;box-shadow:0 0 8px #fffc}.page-content{width:100vw;height:100%;position:relative;overflow:hidden}.tab-view{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;z-index:1}.tab-view.active{opacity:1;visibility:visible;z-index:10}.custom-date-picker{color-scheme:dark;accent-color:#ff69b4}.custom-date-picker::-webkit-calendar-picker-indicator{filter:invert(53%) sepia(33%) saturate(3048%) hue-rotate(300deg) brightness(102%) contrast(97%);cursor:pointer}.letters-icon-wrapper{position:fixed;top:15px;right:30px;z-index:1001;width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#ffffffb3;transition:all .3s ease;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;border:1px solid rgba(255,255,255,.2)}.letters-icon-wrapper:hover{color:#fff;background:#fff3;border-color:#ffffff80}.letters-icon-wrapper.active{color:#fff;background:#f6bec84d;border-color:#f6bec880;box-shadow:0 0 15px #f6bec866}.letters-icon-wrapper.dark-mode{color:#3e2723b3;background:#3e27230d;border-color:#3e27231a}.letters-icon-wrapper.dark-mode:hover,.letters-icon-wrapper.dark-mode.active{color:#3e2723;background:#3e27231a;border-color:#3e27234d}.envelope-svg{width:20px;height:20px}.active-dot{position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:12px;height:2px;background-color:currentColor;border-radius:1px}.firsts-container{width:100vw;height:100vh;background:linear-gradient(135deg,#0a0f1a,#0d1525 40%,#111d35);color:#e0e6ed;font-family:PingFang SC,Hiragino Sans GB,sans-serif;display:flex;flex-direction:column;overflow:hidden;position:relative}.firsts-container:before{content:"";position:absolute;top:-20%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(246,190,200,.06) 0%,transparent 70%);pointer-events:none;z-index:0}.firsts-container:after{content:"";position:absolute;bottom:-15%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(78,205,196,.04) 0%,transparent 70%);pointer-events:none;z-index:0}.firsts-header{padding:100px 40px 24px;text-align:center;position:relative;z-index:1;flex-shrink:0}.firsts-header h1{margin:0;font-size:2rem;font-weight:700;letter-spacing:4px;color:#fff;text-shadow:0 0 30px rgba(246,190,200,.3)}.firsts-header h1 span{font-size:.5em;opacity:.5;font-weight:400;margin-left:8px;letter-spacing:2px}.firsts-subtitle{margin-top:8px;font-size:.85rem;color:#fff6;letter-spacing:2px}.firsts-scroll{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;padding:0 20px 120px;position:relative;z-index:1}.firsts-scroll::-webkit-scrollbar{width:4px}.firsts-scroll::-webkit-scrollbar-track{background:#ffffff08}.firsts-scroll::-webkit-scrollbar-thumb{background:#f6bec84d;border-radius:2px}.firsts-scroll::-webkit-scrollbar-thumb:hover{background:#f6bec880}.timeline-wrapper{max-width:700px;margin:0 auto;position:relative;padding-left:40px}.timeline-wrapper:before{content:"";position:absolute;left:14px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent 0%,rgba(246,190,200,.3) 5%,rgba(246,190,200,.15) 90%,transparent 100%)}.timeline-date-group{margin-bottom:8px}.timeline-date{position:relative;padding:16px 0 8px;font-size:.85rem;font-weight:600;color:#f6bec8e6;letter-spacing:1px}.timeline-date:before{content:"";position:absolute;left:-32px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:#f6bec8;box-shadow:0 0 10px #f6bec880,0 0 20px #f6bec833;z-index:1}.timeline-event{position:relative;margin:6px 0;padding:14px 18px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .3s ease;cursor:default}.timeline-event:hover{background:#ffffff14;border-color:#f6bec833;transform:translate(4px);box-shadow:0 4px 20px #0003,-4px 0 15px #f6bec80d}.timeline-event:before{content:"";position:absolute;left:-28px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#ffffff4d;z-index:1}.timeline-event-text{font-size:.95rem;color:#ffffffd9;line-height:1.6}.timeline-event-emoji{margin-right:8px;font-size:1.1rem}.firsts-add-btn{position:fixed;bottom:30px;right:30px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#f6bec8,#e8a0ac);border:none;color:#fff;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #f6bec866,0 0 40px #f6bec826;z-index:100;transition:all .3s ease}.firsts-add-btn:hover{transform:scale(1.1) rotate(90deg);box-shadow:0 6px 30px #f6bec899}.firsts-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:200}.firsts-modal{background:linear-gradient(145deg,#1a2235,#151d2e);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px;width:90%;max-width:420px;box-shadow:0 20px 60px #00000080}.firsts-modal h2{margin:0 0 24px;font-size:1.3rem;color:#fff;text-align:center;letter-spacing:2px}.firsts-modal-field{margin-bottom:18px}.firsts-modal-field label{display:block;font-size:.8rem;color:#ffffff80;margin-bottom:8px;letter-spacing:1px;text-transform:uppercase}.firsts-modal-field input,.firsts-modal-field textarea{width:100%;max-width:100%;padding:12px 16px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;font-size:.95rem;font-family:inherit;outline:none;transition:border-color .3s ease;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-date-picker{position:relative;background:#ffffff0a!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:12px!important;padding:12px 16px!important;color:#fff!important;font-family:inherit;width:100%;outline:none;transition:all .3s ease}.custom-date-picker:focus{border-color:#f6bec880!important;background:#ffffff14!important;box-shadow:0 0 15px #f6bec81a}.custom-date-picker::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(100%) saturate(1000%) hue-rotate(300deg) brightness(100%);cursor:pointer}.firsts-modal-actions{display:flex;gap:12px;margin-top:24px}.firsts-modal-actions button{flex:1;height:44px;padding:0 12px;border-radius:10px;border:none;font-size:.95rem;font-family:inherit;cursor:pointer;font-weight:600;letter-spacing:1px;transition:all .3s ease;display:flex;justify-content:center;align-items:center}.firsts-modal-actions .btn-cancel{background:#ffffff14;color:#fff9;border:1px solid rgba(255,255,255,.1)}.firsts-modal-actions .btn-cancel:hover{background:#ffffff1f;color:#fffc}.firsts-modal-actions .btn-submit{background:linear-gradient(135deg,#f6bec8,#e8a0ac);color:#fff}.firsts-modal-actions .btn-submit:hover{box-shadow:0 4px 20px #f6bec866;transform:translateY(-1px)}.firsts-modal-actions .btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.firsts-count{display:inline-block;margin-top:12px;padding:4px 16px;background:#f6bec81a;border:1px solid rgba(246,190,200,.2);border-radius:20px;font-size:.75rem;color:#f6bec8cc;letter-spacing:1px}@media (max-width: 600px){.firsts-header{padding:75px 20px 16px}.firsts-header h1{font-size:1.5rem}.timeline-wrapper{padding-left:30px}.timeline-date:before{left:-22px;width:8px;height:8px}.timeline-event:before{left:-19px;width:5px;height:5px}.timeline-wrapper:before{left:10px}.firsts-add-btn{bottom:20px;right:20px;width:48px;height:48px;font-size:24px}}.extra-text-container{display:flex;background:#ffffff05;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;transition:border-color .3s ease}.extra-text-container:focus-within{border-color:#f6bec880;box-shadow:0 0 15px #f6bec81a}.extra-text-line{width:4px;background:#f6bec899}.extra-text-textarea{flex:1;border:none!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;padding:12px 16px;color:#fff;font-size:.95rem;font-family:inherit;outline:none;resize:vertical;min-height:80px}.firsts-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;position:relative}.btn-header-camera{background:transparent;border:none;color:#fff9;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;transition:all .3s ease}.btn-header-camera:hover{color:#f6bec8;background:#f6bec81a}.camera-dropdown-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#191e2df2;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:4px;min-width:140px;box-shadow:0 10px 30px #00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10}.camera-dropdown-menu .dropdown-item{background:transparent;border:none;color:#fffc;padding:10px 16px;text-align:left;font-size:.9rem;border-radius:8px;cursor:pointer;transition:all .2s ease;display:block;width:100%;box-sizing:border-box}.camera-dropdown-menu .dropdown-item:hover{background:#ffffff1a;color:#fff}.image-preview-container{width:100%}.preview-box{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid rgba(246,190,200,.5);box-shadow:0 4px 20px #0000004d}.preview-box img{width:100%;height:100%;object-fit:cover}.remove-img-btn{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:#0009;color:#fff;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .2s ease}.remove-img-btn:hover{background:#ff4d4f;border-color:#ff4d4f}.camera-capture-container{position:relative;width:100%;height:350px;background:#000;border-radius:12px;overflow:hidden;margin-bottom:20px}.camera-view{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.camera-view video{width:100%;height:100%;object-fit:cover}.camera-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;align-items:center;justify-content:center}.camera-frame{width:80%;height:60%;border:1px solid rgba(255,255,255,.3);border-radius:8px;box-shadow:0 0 0 2000px #0000004d}.camera-controls{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:30px;padding:0 20px}.btn-capture{width:64px;height:64px;border-radius:50%;background:#fff3;border:3px solid #fff;padding:4px;cursor:pointer;transition:transform .2s ease}.btn-capture:active{transform:scale(.9)}.shutter-inner{width:100%;height:100%;border-radius:50%;background:#fff}.btn-cancel-camera{width:44px;height:44px;border-radius:50%;background:#00000080;border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.btn-cancel-camera:hover{background:#fff3}.camera-error{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;color:#ff4d4f}@media (max-width: 600px){.firsts-modal{padding:24px;max-height:90vh;overflow-y:auto}.mobile-fullscreen.camera-capture-container{height:100dvh;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;border-radius:0;margin-bottom:0}.mobile-fullscreen .camera-view video{height:100%;width:100%;object-fit:cover}.mobile-fullscreen .camera-controls{bottom:60px;background:#0000004d;padding:20px;border-radius:40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.btn-switch-camera{width:44px;height:44px;border-radius:50%;background:#00000080;border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.btn-switch-camera:hover{background:#fff3}.camera-btn-wrapper{position:relative}.layout-3-cols{display:flex;flex:1;overflow:hidden;padding:0 40px 100px 20px;gap:30px;max-width:1400px;margin:0 auto;width:100%;box-sizing:border-box}.firsts-sidebar{flex:0 0 180px;display:flex;flex-direction:column;padding-top:40px;padding-right:30px;border-right:1px solid rgba(255,255,255,.1)}.sidebar-section h3{font-size:1.1rem;color:#ffffffe6;letter-spacing:2px;margin-bottom:20px;position:relative;padding-left:12px}.sidebar-section h3:before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;background:#f6bec8;border-radius:2px}.filter-list{display:flex;flex-direction:column;gap:10px}.filter-btn{background:transparent;border:1px solid rgba(255,255,255,.1);color:#fff9;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:.9rem;text-align:left;transition:all .3s ease}.filter-btn:hover{background:#ffffff0d;color:#fff}.filter-btn.active{background:#f6bec826;border-color:#f6bec866;color:#f6bec8;font-weight:600}.firsts-scroll{flex:1;min-width:400px;padding-top:20px}.timeline-event-content{flex:1}.timeline-event-extra{margin:10px 0 0;padding:8px 12px;border-left:3px solid rgba(246,190,200,.4);background:#ffffff05;font-size:.85rem;color:#fff9;line-height:1.5;border-radius:0 8px 8px 0}.timeline-event-images-mini{margin-top:8px;font-size:.75rem;color:#64c8c8cc;display:inline-block;padding:2px 8px;background:#64c8c81a;border-radius:12px}.timeline-event{display:flex;justify-content:space-between;align-items:flex-start;cursor:pointer}.timeline-event:hover .timeline-event-edit-icon,.timeline-event:hover .timeline-event-delete-icon{opacity:.6}.timeline-event-delete-icon:hover{opacity:1!important;color:#ff4d4f;transform:scale(1.1)}.timeline-event-delete-icon{opacity:0;font-size:.9rem;transition:all .3s ease;padding:8px;cursor:pointer;color:#fff6;display:flex;align-items:center;justify-content:center;border-radius:6px}.timeline-event-delete-icon svg{display:block}.firsts-gallery{flex:0 0 350px;padding-top:40px;overflow-y:auto;padding-left:10px;padding-right:10px}.firsts-gallery::-webkit-scrollbar{width:4px}.firsts-gallery::-webkit-scrollbar-thumb{background:#f6bec84d;border-radius:2px}.gallery-title{font-size:1.1rem;color:#ffffffe6;letter-spacing:2px;margin-bottom:20px;text-align:center}.gallery-empty{text-align:center;color:#ffffff4d;font-size:.9rem;padding:40px 0}.gallery-masonry{display:flex;gap:15px;align-items:flex-start}.gallery-column{flex:1;display:flex;flex-direction:column;gap:15px}.gallery-item{break-inside:avoid;margin-bottom:15px;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 4px 15px #0003;transition:transform .3s ease;cursor:pointer}.gallery-item:hover{transform:translateY(-4px);box-shadow:0 8px 25px #0000004d}.gallery-item img{width:100%;display:block;object-fit:cover}@media (max-width: 1024px){.layout-3-cols{flex-direction:column;overflow-y:auto;padding:0 20px 80px}.firsts-sidebar{flex:none;padding-top:0;margin-bottom:20px;border-right:none}.filter-list{flex-direction:row;flex-wrap:wrap}.firsts-scroll{flex:none;min-width:auto;overflow:visible;padding-top:0}.firsts-gallery{flex:none;padding-top:40px;overflow:visible;padding-left:0}}.bounceCardsContainer{display:flex;justify-content:center;align-items:center;perspective:1000px;pointer-events:auto;touch-action:pan-y}.bounceCardsContainer .card{position:absolute;width:400px;height:280px;transform-style:preserve-3d;will-change:transform;cursor:pointer;pointer-events:auto;z-index:10}@font-face{font-family:STXingkai;src:local("STXingkai"),local("华文行楷"),local("STXingkai-SC-Light")}.letters-module-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;height:100vh;background-color:#f7f3e8;font-family:Courier New,Courier,monospace;overflow:hidden;position:relative;z-index:999}.letters-header{position:absolute;top:50px;text-align:center;z-index:50;display:flex;flex-direction:column;gap:10px;pointer-events:none}.letters-title{font-size:2rem;color:#6d4c41;margin:0;text-shadow:1px 1px 2px rgba(0,0,0,.1);letter-spacing:2px}.write-btn{padding:8px 16px;background:#a1887f;color:#fff;border:2px dashed #8d6e63;border-radius:20px;cursor:pointer;font-size:1rem;transition:all .2s;pointer-events:auto}.write-btn:hover{background:#8d6e63;transform:scale(1.05)}.letters-main-area{width:100vw;flex-grow:1;display:flex;align-items:center;justify-content:center;pointer-events:none}.stack-wrapper{position:relative;width:600px;height:400px;display:flex;justify-content:center;align-items:center;pointer-events:auto;z-index:10}.envelope-container{width:100%;height:100%;background-color:transparent;position:relative;display:flex;align-items:center;justify-content:center;perspective:2500px;transition:transform .5s cubic-bezier(.175,.885,.32,1.275);pointer-events:auto;z-index:100;touch-action:none}.envelope-container:after{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;background-color:transparent;pointer-events:auto;z-index:-1}.envelope-back{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#fdfaf3,#eeeadf);border:2px solid #e0d8c3;border-radius:8px;box-shadow:0 8px 30px #0000001f,0 4px 10px #00000014,inset 0 1px 1px #fffc;z-index:10}.envelope-back:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border:1px solid rgba(0,0,0,.05);border-radius:9px;pointer-events:none;z-index:15}.envelope-back-body{position:absolute;bottom:-1px;left:-1px;right:-1px;height:72%;background:linear-gradient(to top,#fdfaf3,#f7f3e8);border:1px solid #d7ccc8;border-top:none;border-radius:0 0 8px 8px;z-index:25;clip-path:polygon(0 100%,100% 100%,100% 0,50% 35%,0 0);box-shadow:inset 0 20px 20px -10px #00000026,0 -2px 10px #0000000d;pointer-events:none}.envelope-flap{position:absolute;top:-1px;left:0;width:100%;height:60%;z-index:30;transform-origin:top;transform-style:preserve-3d}.flap-triangle{width:100%;height:100%;background-color:#fdfaf3;border:1px solid #d7ccc8;border-top:none;clip-path:polygon(0 0,100% 0,50% 100%);box-shadow:0 4px 10px #0000001a;pointer-events:none}.flap-shadow{position:absolute;bottom:-5px;left:10%;width:80%;height:10px;background:#0000001a;filter:blur(5px);clip-path:polygon(0 0,100% 0,50% 100%);z-index:-1}.envelope-pop-letter{position:absolute;top:5%;left:5%;width:90%;height:90%;background-color:#f4ebce;border:1px solid #d7ccc8;background-image:url(https://www.transparenttextures.com/patterns/old-wall.png);z-index:20;border-radius:2px;display:flex;align-items:center;justify-content:center}.tiny-paper{width:80%;height:80%;border:1px dashed rgba(109,76,65,.3)}.envelope-front{position:absolute;top:0;right:0;bottom:0;left:0;z-index:35;pointer-events:none}.stack-wrapper{position:relative;width:600px;height:400px;margin:0 auto;pointer-events:auto;z-index:10}.stamp-area{position:absolute;top:20px;right:20px;width:44px;height:50px;background:#fff;border:1px solid #d7ccc8;padding:2px;box-shadow:0 2px 5px #0000001a;display:flex;align-items:center;justify-content:center}.stamp{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(0,0,0,.2)}.stamp-v1{background-color:#ffccbc}.stamp-v1:before{content:"✿";color:#bf360c;font-size:1.4rem}.stamp-v2{background-color:#c8e6c9}.stamp-v2:before{content:"🍃";color:#2e7d32;font-size:1.4rem}.stamp-v3{background-color:#bbdefb}.stamp-v3:before{content:"🌊";color:#1565c0;font-size:1.4rem}.stamp-v4{background-color:#fff9c4}.stamp-v4:before{content:"☀️";color:#f9a825;font-size:1.4rem}.stamp-v5{background-color:#f8bbd0}.stamp-v5:before{content:"💝";color:#c2185b;font-size:1.4rem}.stamp-v6{background-color:#e1bee7}.stamp-v6:before{content:"✨";color:#7b1fa2;font-size:1.4rem}.stamp-area:after{content:"";position:absolute;width:60px;height:60px;border:1px solid rgba(0,0,0,.1);border-radius:50%;top:-10px;right:-10px;pointer-events:none;background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(0,0,0,.05) 5px,rgba(0,0,0,.05) 6px)}.sender-info{position:absolute;bottom:30px;left:30px;color:#5d4037}.sender-name{font-family:STXingkai,cursive;font-weight:400;font-size:1.8rem;margin:0 0 5px}.sender-date{font-family:STXingkai,cursive;font-size:1.1rem;margin:0;color:#795548}.decorative-lines{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:5px}.line{height:2px;background-color:#d7ccc8;width:100px}.line-2{width:80px;margin:0 auto}.letter-paper-wrapper,.write-letter-container{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:2000;pointer-events:auto;background:#ffffff4d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.parchment{width:70vw;height:80vh;max-width:800px;max-height:900px;background-color:#f4ebce;background-image:url(https://www.transparenttextures.com/patterns/old-wall.png);border-radius:8px;box-shadow:0 20px 50px #0000004d;padding:60px 40px 40px;box-sizing:border-box;position:relative;color:#3e2723;display:flex;flex-direction:column}.close-letter-btn{position:absolute;top:15px;right:20px;background:transparent;border:none;font-size:30px;color:#8d6e63;cursor:pointer}.letter-header{margin-bottom:30px;border-bottom:1px dashed #d7ccc8;padding-bottom:10px}.letter-recipient{font-family:STXingkai,cursive;font-size:1.6rem;color:#5d4037;text-align:left}.letter-date{text-align:right;font-size:.9rem;color:#795548}.letter-sender{font-weight:700;font-size:1.1rem}.letter-body{flex:1;overflow-y:auto;margin-bottom:20px;padding-right:15px}.letter-body::-webkit-scrollbar{width:6px}.letter-body::-webkit-scrollbar-track{background:transparent}.letter-body::-webkit-scrollbar-thumb{background:#8d6e634d;border-radius:10px}.letter-body::-webkit-scrollbar-thumb:hover{background:#8d6e6380}.letter-footer{display:flex;flex-direction:column;align-items:flex-end;margin-top:auto;border-top:1px dashed #d7ccc8;padding-top:15px;gap:5px}.letter-sender{font-family:STXingkai,cursive;font-size:1.6rem;color:#3e2723}.letter-date{font-family:STXingkai,cursive;font-size:1.1rem;color:#8d6e63}.handwriting-text{font-family:STXingkai,cursive;white-space:pre-wrap;line-height:1.4;font-size:1.7rem;margin:0;letter-spacing:.5px}.writing-mode{padding:20px}.letter-form{display:flex;flex-direction:column;height:100%}.form-header{display:flex;margin-bottom:20px}.sender-input{background:transparent;border:none;border-bottom:2px dashed #bcaaa4;outline:none;font-family:STXingkai,cursive;font-size:1.6rem;color:#3e2723;padding:5px}.input-group{display:flex;align-items:center;gap:8px;width:100%}.input-prefix{font-family:STXingkai,cursive;font-size:1.6rem;color:#5d4037;white-space:nowrap}.date-input{width:250px;margin-left:10px}.textarea-wrapper{position:relative;flex:1}.letter-textarea{width:100%;height:100%;background:transparent;border:1px solid rgba(188,170,164,.3);outline:none;resize:none;font-family:STXingkai,cursive;font-size:1.7rem;color:#3e2723;line-height:1.4;padding:10px;box-sizing:border-box}.letter-textarea::placeholder,.sender-input::placeholder{font-family:STXingkai,cursive;opacity:.6}.writing-pen{position:absolute;top:0;left:0;font-size:24px;pointer-events:none;z-index:10;transform-origin:bottom left}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.btn-cancel,.btn-send{padding:8px 16px;border:none;border-radius:20px;cursor:pointer;font-family:STXingkai,cursive;font-size:1.1rem;transition:all .2s}.btn-cancel{background:#d7ccc8;color:#5d4037}.btn-send{background:#8d6e63;color:#fff}.btn-cancel:hover{background:#bcaaa4}.btn-send:hover{background:#6d4c41}.corner-pen-illustration{position:absolute;bottom:30px;right:30px;width:100px;height:100px;z-index:90;pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;border:2px solid #8d6e63;box-shadow:0 8px 32px #8b6e6333;transition:all .4s cubic-bezier(.34,1.56,.64,1);animation:pen-float 4s ease-in-out infinite}.corner-pen-illustration svg{width:55%;height:55%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}.pen-label{font-size:.75rem;color:#8d6e63;font-weight:700;margin-top:-5px;opacity:.8}.corner-pen-illustration:hover{transform:scale(1.15) rotate(-5deg) translateY(-5px);background:#fff9;box-shadow:0 15px 45px #8b6e634d}.corner-pen-illustration:active{transform:scale(.95)}@keyframes pen-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(5deg)}}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#f7f3e8cc;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:500;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.loader{width:48px;height:48px;border:3px solid #8d6e63;border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite}.loader:after{content:"";box-sizing:border-box;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;border:3px solid transparent;border-bottom-color:#ff3d00}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drafts-tray{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:15px;z-index:1000;transition:all .5s ease}.letters-module-container:has(.writing-mode) .drafts-tray{opacity:0;pointer-events:none;transform:translate(-50%,50px)}.draft-item{width:80px;height:110px;background-color:#f4ebce;background-image:url(https://www.transparenttextures.com/patterns/old-wall.png);border:1px solid #e0d8c0;box-shadow:0 4px 8px #00000026;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:15px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);overflow:hidden}.draft-item:hover{transform:translateY(-8px) rotate(-3deg) scale(1.05);box-shadow:0 12px 20px #0003}.draft-item:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(transparent,#8d6e6314);pointer-events:none}.draft-item:before{display:none}.draft-sender-preview{font-family:STXingkai,cursive;font-size:.85rem;color:#5d4037;text-align:center;opacity:.7;padding:0 5px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.delete-draft-btn{position:absolute;top:5px;right:5px;border:none;background:#8d6e631a;color:#8d6e63;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;opacity:0;transition:all .2s ease;z-index:10}.draft-item:hover .delete-draft-btn{opacity:1}.delete-draft-btn:hover{background:#e53935;color:#fff}.draft-lines-preview{position:absolute;bottom:12px;width:80%;height:40px;background-image:repeating-linear-gradient(transparent,transparent 10px,rgba(141,110,99,.2) 10px,rgba(141,110,99,.2) 11px);opacity:.6;pointer-events:none}.writing-mode .form-header{justify-content:flex-start}.writing-mode .form-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px}.date-input-container{display:flex;flex-direction:column}.btn-draft{background:#a1887f;color:#fff;border:none;padding:10px 20px;border-radius:20px;cursor:pointer;font-family:STXingkai,cursive;font-size:1.1rem;transition:all .2s}.btn-draft:hover{background:#8d6e63;transform:scale(1.05)}.date-input-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.date-input-container .sender-input{width:200px;border-bottom:1px solid #d7ccc8;font-size:1.4rem}.music-player-particles{position:fixed;bottom:30px;left:30px;z-index:99999;width:120px;height:120px;cursor:pointer;background:transparent;display:flex;align-items:center;justify-content:center;transition:transform .4s ease}@media (max-width: 768px){.music-player-particles{width:80px;height:80px;bottom:20px;left:20px}}.music-player-particles:hover{transform:scale(1.05)}.music-player-particles:active{transform:scale(.95)}.music-player-particles canvas{width:100%;height:100%;pointer-events:none}.music-tuner-panel{position:fixed;bottom:160px;left:30px;z-index:100000;background:#0f0f14d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:15px 20px;width:320px;max-height:70vh;overflow-y:auto;color:#fff;font-family:Inter,system-ui,sans-serif;box-shadow:0 10px 40px #00000080}.music-tuner-panel h3{margin:0 0 15px;font-size:1.1rem;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:8px}.music-tuner-panel h4{margin:15px 0 10px;font-size:.9rem;color:#aaa}.music-tuner-panel .close-btn{position:absolute;top:15px;right:15px;background:transparent;border:none;color:#fff;cursor:pointer;font-size:1.2rem;opacity:.6}.music-tuner-panel .close-btn:hover{opacity:1}.tuner-row{display:flex;flex-direction:column;margin-bottom:10px}.tuner-row label{font-size:.8rem;margin-bottom:4px;display:flex;justify-content:space-between}.tuner-row input[type=range]{width:100%;accent-color:#ff9a9e}.music-tuner-panel code{background:#00000080;padding:8px;display:block;border-radius:4px;margin-top:5px;word-break:break-all}