@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap";:root{--bg:#fff;--card-bg:#fff;--text-dark:#000;--text-light:#6b7280;--accent:#2563eb;--border:#e5e7eb}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg);color:var(--text-dark);font-family:Space Grotesk,system-ui,sans-serif;font-weight:400;overflow:hidden}.app{background:#fff;flex-direction:column;width:100vw;height:100vh;display:flex;position:relative}.app:before{content:"";pointer-events:none;z-index:1;background-image:linear-gradient(#0000,#0000 23%,#00000005 24% 25%,#0000 26% 73%,#00000005 74% 75%,#0000 76%),linear-gradient(90deg,#0000 24%,#00000005 25% 26%,#0000 27% 74%,#00000005 75% 76%,#0000 77%,#0000);background-size:50px 50px;position:absolute;inset:0}.header{z-index:5;border-bottom:1px solid var(--border);background:0 0;padding:32px 32px 16px;position:relative}.header-content{max-width:100%}.header h1{color:var(--accent);letter-spacing:-.3px;font-size:28px;font-weight:700}.tagline{color:var(--text-light);letter-spacing:.3px;margin-top:4px;font-size:12px;font-weight:400}.canvas{perspective:1000px;z-index:5;flex:1;padding:16px 16px 80px;position:relative;overflow:hidden auto}.timestamp{color:#9ca3af;letter-spacing:.3px;z-index:10;font-size:12px;font-weight:400;position:absolute;top:24px;left:32px}.scatter-container{width:100%;min-height:100%;position:relative}.entry-card.scattered{background:var(--card-bg);cursor:grab;will-change:transform;z-index:10;border:none;flex-direction:column;justify-content:space-between;width:280px;height:140px;padding:16px 12px 12px;transition:box-shadow .3s;display:flex;position:absolute;overflow:visible;box-shadow:0 2px 4px #0000000d,0 6px 12px #0000001f,0 12px 24px #00000026}.entry-card.scattered:active{cursor:grabbing}.entry-card.scattered:after{content:"";border-left:140px solid #0000;border-right:140px solid #0000;border-bottom:30px solid var(--card-bg);pointer-events:none;width:100%;height:0;position:absolute;bottom:0;left:0}.card-inner{z-index:2;flex-direction:column;justify-content:space-between;gap:8px;height:100%;display:flex;position:relative}.card-date{text-transform:uppercase;letter-spacing:.4px;color:var(--text-light);font-size:10px;font-weight:700}.card-preview{color:var(--text-dark);-webkit-line-clamp:3;-webkit-box-orient:vertical;flex:1;font-size:12px;line-height:1.3;display:-webkit-box;overflow:hidden}.card-preview p{margin:0;font-weight:400}.washi-tape{z-index:25;background-color:#14b8a6;background-image:linear-gradient(#0000 74%,#ffffff40 75% 77%,#0000 78%),linear-gradient(90deg,#0000 22%,#ffffff40 23% 25%,#0000 26%);background-size:8px 8px;width:115%;height:28px;position:absolute;top:-14px;left:50%;transform:translate(-50%)rotate(-2deg);box-shadow:0 2px 8px #0000001f}.polaroid{cursor:grab;z-index:10;background:#fff;border:1px solid #f0f0f0;flex-direction:column;width:180px;height:220px;padding:12px;transition:box-shadow .3s;display:flex;position:absolute;box-shadow:0 4px 12px #0000001a,0 10px 30px #00000026}.polaroid:active{cursor:grabbing}.polaroid img{object-fit:cover;pointer-events:none;width:100%;height:140px;margin-bottom:12px;display:block}.polaroid-content{flex-direction:column;flex:1;justify-content:space-between;display:flex}.polaroid-caption{color:#9ca3af;word-wrap:break-word;flex:1;margin-bottom:8px;font-family:Space Grotesk,inherit;font-size:12px;font-weight:400;line-height:1.3}.polaroid-date{color:#9ca3af;letter-spacing:.3px;font-family:Space Grotesk,inherit;font-size:10px;font-weight:400}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.floating{animation:3s ease-in-out infinite float}.plus-button{color:#fff;cursor:pointer;z-index:100;background:#14b8a6;border:none;justify-content:center;align-items:center;width:50px;height:50px;font-size:28px;font-weight:300;transition:all .3s;display:flex;position:fixed;bottom:50px;right:50px;box-shadow:0 2px 4px #14b8a626,0 8px 16px #14b8a633,0 12px 24px #14b8a640}.plus-button:hover{transform:scale(1.08);box-shadow:0 4px 8px #14b8a633,0 12px 24px #14b8a640,0 16px 32px #14b8a64d}.plus-button:active{transform:scale(.96)}.camera-button{background:var(--card-bg);width:50px;height:50px;color:var(--text-dark);border:2px solid var(--border);cursor:pointer;z-index:100;justify-content:center;align-items:center;transition:all .3s;display:flex;position:fixed;bottom:120px;right:50px;box-shadow:0 2px 4px #00000014,0 8px 16px #0000001f}.camera-button:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.08);box-shadow:0 4px 8px #0000001a,0 12px 24px #00000026}.letter-overlay{z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000059;justify-content:center;align-items:center;animation:.3s overlayFadeIn;display:flex;position:fixed;inset:0}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.letter{background:var(--card-bg);border:none;flex-direction:column;width:90%;max-width:520px;max-height:85vh;animation:.5s cubic-bezier(.34,1.56,.64,1) letterOpen;display:flex;position:relative;overflow:visible;box-shadow:0 8px 16px #0000001f,0 16px 32px #00000029,0 24px 48px #0003}@keyframes letterOpen{0%{opacity:0;transform:scale(.85)perspective(1000px)rotateX(25deg)}50%{opacity:.9}to{opacity:1;transform:scale(1)perspective(1000px)rotateX(0)}}.letter-flap{border-left:260px solid #0000;border-right:260px solid #0000;border-bottom:40px solid var(--card-bg);pointer-events:none;width:100%;height:0;position:absolute;bottom:-1px;left:0}.letter-header{border-bottom:1px solid var(--border);background:var(--card-bg);justify-content:space-between;align-items:center;padding:32px;display:flex}.letter-header h2{color:var(--text-dark);font-size:24px;font-weight:700}.close-btn{color:var(--text-light);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:30px;height:30px;padding:0;font-size:20px;font-weight:400;transition:color .2s;display:flex}.close-btn:hover{color:var(--text-dark)}.letter-content{background:var(--card-bg);flex-direction:column;flex:1;gap:24px;padding:32px;display:flex;overflow-y:auto}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:var(--text-dark);align-items:center;gap:8px;font-size:16px;font-weight:700;display:flex}.star-icon{flex-shrink:0;width:20px;height:20px}.form-group textarea,.form-group input[type=date]{border:1px solid var(--border);resize:vertical;background:#fafafa;min-height:100px;padding:12px;font-family:Space Grotesk,inherit;font-size:14px;font-weight:400;transition:border-color .2s}.form-group input[type=date]{min-height:auto}.form-group textarea:focus,.form-group input[type=date]:focus{border-color:var(--accent);background:#fff;outline:none}.image-upload{border:2px dashed var(--border);text-align:center;cursor:pointer;background:#fafafa;padding:32px;transition:all .3s}.image-upload.active{border-color:var(--accent);background:#2563eb0d}.upload-label{color:var(--text-light);cursor:pointer;font-size:14px;font-weight:700;transition:color .2s;display:block}.upload-label:hover{color:var(--accent)}.image-preview{max-width:100%;display:inline-block;position:relative}.image-preview img{max-width:100%;max-height:300px;display:block}.remove-image{border:1px solid var(--border);cursor:pointer;background:#f3f4f6;width:100%;margin-top:12px;padding:8px 16px;font-family:Space Grotesk,inherit;font-size:14px;font-weight:700;transition:all .2s}.remove-image:hover{background:var(--border)}.btn-save{background:var(--accent);color:#fff;cursor:pointer;border:none;align-self:flex-start;margin-top:8px;padding:16px 24px;font-family:Space Grotesk,inherit;font-size:16px;font-weight:700;transition:all .3s}.btn-save:hover{background:#1d4ed8;transform:translateY(-2px);box-shadow:0 4px 12px #2563eb4d}.letter.detail{max-width:600px}.detail-section{border-bottom:1px solid var(--border);padding-bottom:20px}.detail-section:last-child{border-bottom:none;padding-bottom:0}.detail-section h3{color:var(--text-dark);align-items:center;gap:8px;margin-bottom:12px;font-size:16px;font-weight:700;display:flex}.detail-section h3 .star-icon{width:18px;height:18px}.detail-section p{color:var(--text-dark);font-size:14px;font-weight:400;line-height:1.7}.entry-image{margin-bottom:16px}.entry-image img{max-width:100%;max-height:300px;display:block}.letter-content::-webkit-scrollbar{width:5px}.letter-content::-webkit-scrollbar-track{background:0 0}.letter-content::-webkit-scrollbar-thumb{background:#d0d0d0}.letter-content::-webkit-scrollbar-thumb:hover{background:#b0b0b0}@media (width<=768px){.header h1{font-size:20px}.letter{width:95%;max-height:90vh}.letter-flap{border-left:190px solid #0000;border-right:190px solid #0000}.entry-card.scattered{width:240px;height:120px}.entry-card.scattered:after{border-left:120px solid #0000;border-right:120px solid #0000;border-bottom:25px solid var(--card-bg)}.letter-content,.letter-header{padding:24px}}.caption-overlay{z-index:250;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000059;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.caption-modal{background:var(--card-bg);width:90%;max-width:400px;padding:32px;animation:.4s cubic-bezier(.34,1.56,.64,1) letterOpen;box-shadow:0 8px 16px #0000001f,0 16px 32px #00000029,0 24px 48px #0003}.caption-modal h2{color:var(--text-dark);margin-bottom:16px;font-size:24px;font-weight:700}.caption-preview{object-fit:cover;width:100%;height:200px;margin-bottom:16px;display:block}.caption-modal input{border:1px solid var(--border);background:#fafafa;width:100%;margin-bottom:20px;padding:12px;font-family:Space Grotesk,inherit;font-size:14px;font-weight:400}.caption-modal input:focus{border-color:var(--accent);background:#fff;outline:none}.caption-actions{gap:12px;display:flex}.btn-caption-save{background:var(--accent);color:#fff;cursor:pointer;border:none;flex:1;padding:12px 16px;font-family:Space Grotesk,inherit;font-size:14px;font-weight:700;transition:background .2s}.btn-caption-save:hover{background:#1d4ed8}.btn-caption-cancel{color:var(--text-dark);border:1px solid var(--border);cursor:pointer;background:#f3f4f6;flex:1;padding:12px 16px;font-family:Space Grotesk,inherit;font-size:14px;font-weight:700;transition:background .2s}.btn-caption-cancel:hover{background:var(--border)}