@import"https://fonts.googleapis.com/css2?family=Zen+Kurenaido&family=Noto+Sans+JP:wght@400;700&display=swap";:root{--brand-red: #c21c38;--brand-red-light: #ff2d55;--brand-yellow: #fff100;--brand-yellow-warm: #ffc800;--bg-primary: #0a0a1a;--bg-secondary: #141428;--bg-card: rgba(255, 255, 255, .06);--bg-card-hover: rgba(255, 255, 255, .1);--bg-card-border: rgba(255, 255, 255, .1);--text-primary: #f0f0f5;--text-secondary: #a0a0b5;--text-muted: #666680;--glow-red: rgba(194, 28, 56, .4);--glow-yellow: rgba(255, 241, 0, .3);--font-body: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;--font-gothic: "BIZ UDゴシック", "BIZ UDGothic", sans-serif;--font-mincho: "BIZ UD明朝", serif;--font-handwriting: "Zen Kurenaido", cursive;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;min-height:100vh;touch-action:manipulation}#three-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}#app{position:relative;z-index:1;min-height:100vh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}::selection{background:#c21c3866;color:#fff}.glass-card{background:#ffffff0f;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a}.glass-card-hover:hover{background:#ffffff1a;border-color:#ffffff26;box-shadow:0 12px 40px #0006,inset 0 1px #ffffff26}.glass-glow-red{box-shadow:0 0 20px var(--glow-red),0 8px 32px #0000004d,inset 0 1px #ffffff1a;border-color:#c21c3866}.glass-glow-yellow{box-shadow:0 0 20px var(--glow-yellow),0 8px 32px #0000004d,inset 0 1px #ffffff1a;border-color:#fff10066}@supports not (backdrop-filter: blur(20px)){.glass-card{background:#141428e6}}.landing-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center}.landing-title{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;opacity:0}.landing-subtitle{font-size:1.1rem;color:var(--text-secondary);margin-bottom:2rem;opacity:0}.landing-btn{padding:1rem 3rem;background:linear-gradient(135deg,var(--brand-red) 0%,var(--brand-red-light) 100%);border:none;border-radius:var(--radius-md);color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px var(--glow-red);opacity:0}.landing-btn:hover{transform:translateY(-3px);box-shadow:0 8px 30px var(--glow-red)}.form-section{display:none;max-width:900px;margin:0 auto;padding:2rem 1rem}.form-section.active{display:block}.form-header{text-align:center;margin-bottom:2rem;padding:1.5rem;background:linear-gradient(135deg,#c21c38cc,#ffc800cc);border-radius:var(--radius-md);border:2px solid rgba(255,241,0,.5)}.form-header h1{font-size:1.8rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}.form-header p{color:#ffffffe6;font-size:.95rem}.form-card{padding:2rem;transition:all .3s ease}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--brand-red-light);font-weight:700;font-size:.95rem}.form-group .required{color:var(--brand-red);margin-left:.2rem}.form-group input[type=text],.form-group select{width:100%;padding:.75rem;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);color:var(--text-primary);font-size:1rem;font-family:var(--font-body);transition:all .3s ease}.form-group input[type=text]:focus,.form-group select:focus{outline:none;border-color:var(--brand-red);box-shadow:0 0 15px var(--glow-red)}.form-group input[type=text]::placeholder{color:var(--text-muted)}.note-accordion{background:#fff10014;border:1px solid rgba(255,241,0,.2);margin-bottom:1.5rem;border-radius:var(--radius-sm);overflow:hidden}.note-header{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;cursor:pointer;font-weight:700;color:var(--brand-yellow);transition:background .3s;-webkit-user-select:none;user-select:none}.note-header:hover{background:#fff1000d}.note-content{padding:0 1rem;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;font-size:.85rem;color:var(--text-secondary);line-height:1.7}.note-accordion.open .note-content{max-height:300px;padding:.5rem 1rem 1rem}.note-toggle-icon{transition:transform .3s ease}.note-accordion.open .note-toggle-icon{transform:rotate(180deg)}.checkbox-group,.radio-group{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.checkbox-item,.radio-item{display:flex;align-items:center;gap:.5rem}.checkbox-item input,.radio-item input{width:18px;height:18px;cursor:pointer;accent-color:var(--brand-red)}.checkbox-item label,.radio-item label{margin:0;cursor:pointer;color:var(--text-secondary);font-weight:400}.category-toggle{cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:.6rem 0}.category-checkboxes{display:none;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin-top:.5rem}.category-checkboxes.open{display:grid}.category-label{display:flex;align-items:center;padding:.5rem .75rem;background:#fff1000d;border:1px solid rgba(255,241,0,.15);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;gap:.4rem}.category-label:hover{background:#fff1001a;border-color:#fff1004d}.category-label input:checked+span{color:var(--brand-yellow);font-weight:700}.category-label span{color:var(--text-secondary);font-size:.9rem}.font-options{display:flex;gap:.5rem;flex-wrap:wrap}.font-option{padding:.5rem 1rem;border:1px solid rgba(255,255,255,.15);background:#ffffff0d;border-radius:var(--radius-sm);cursor:pointer;transition:all .3s ease;font-size:.9rem;color:var(--text-secondary)}.font-option:hover{border-color:var(--brand-red);color:var(--text-primary)}.font-option.active{border-color:var(--brand-red);background:#c21c3826;color:var(--text-primary);font-weight:700}.letter-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;margin-top:.75rem}.letter-type-card{background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:.75rem;cursor:pointer;transition:all .3s ease;text-align:center}.letter-type-card:hover{transform:translateY(-3px);border-color:#fff3;box-shadow:0 8px 20px #0000004d}.letter-type-card.active{border-color:var(--brand-red);box-shadow:0 0 20px var(--glow-red)}.letter-type-preview{width:100%;height:90px;border-radius:6px;margin-bottom:.5rem;background-size:cover;background-position:center}.letter-type-icon{font-size:1.2rem}.letter-type-name{font-weight:700;font-size:.85rem;color:var(--brand-red-light)}.letter-type-desc{font-size:.7rem;color:var(--text-muted)}.wysiwyg-container{position:relative;width:100%;max-width:600px;margin:1.5rem auto 0}.wysiwyg-letterhead{position:relative;width:100%;aspect-ratio:1414 / 2000;background-size:100% 100%;background-position:center;background-repeat:no-repeat;border-radius:var(--radius-md);box-shadow:0 20px 60px #00000080;overflow:hidden}.wysiwyg-inner{position:absolute;top:10%;left:8%;right:8%;bottom:12%;display:flex;flex-direction:column}.wysiwyg-to{font-weight:700;margin-bottom:1rem;font-size:1.1rem;padding:.3rem;border:none;background:transparent;outline:none;width:100%;text-align:center}.wysiwyg-editor{flex:1;outline:none;line-height:1.7;font-size:.9rem;white-space:pre-wrap;word-wrap:break-word;overflow-y:auto;padding:.5rem;border-radius:4px;transition:box-shadow .3s;cursor:text}.wysiwyg-editor::-webkit-scrollbar{width:4px}.wysiwyg-editor::-webkit-scrollbar-thumb{background:#00000026;border-radius:2px}.wysiwyg-editor:focus{box-shadow:inset 0 0 0 1px #c21c3833}.wysiwyg-editor:empty:before{content:attr(data-placeholder);color:#00000040;pointer-events:none}.wysiwyg-from{text-align:right;font-weight:700;margin-top:auto;padding-top:1rem}.wysiwyg-date{font-size:.8rem;opacity:.6;margin-top:.2rem}.wysiwyg-char-counter{text-align:right;font-size:.85rem;color:var(--text-muted);margin-top:.5rem}.wysiwyg-char-counter.warning{color:var(--brand-red)}.page-indicator{text-align:center;font-size:.85rem;color:var(--text-muted);margin-top:.25rem;opacity:0;transition:opacity .3s}.page-indicator.visible{opacity:1}.page-indicator .page-count{color:var(--brand-red);font-weight:700}.multi-image-upload{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.75rem}.image-upload-wrapper{display:flex;flex-direction:column;gap:.4rem}.image-upload-slot{width:140px;height:140px;border:2px dashed rgba(194,28,56,.4);border-radius:var(--radius-sm);display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:all .3s;background:#ffffff08;position:relative}.image-upload-slot:hover{border-color:var(--brand-red);background:#ffffff0f}.image-upload-slot.has-image{border-style:solid;padding:4px}.image-upload-slot img{max-width:100%;max-height:100%;object-fit:cover;border-radius:6px}.image-upload-slot .remove-img{position:absolute;top:4px;right:4px;background:var(--brand-red);color:#fff;border:none;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:.75rem;display:none;line-height:22px;text-align:center}.image-upload-slot.has-image .remove-img{display:block}.upload-icon{font-size:1.8rem}.upload-text{font-size:.7rem;color:var(--text-muted);text-align:center;margin-top:.3rem}.image-caption{width:140px;padding:.4rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);font-size:.8rem;color:var(--text-primary);transition:border-color .3s}.image-caption:focus{outline:none;border-color:var(--brand-red)}.btn-primary{width:100%;padding:1rem;background:linear-gradient(135deg,var(--brand-red) 0%,var(--brand-red-light) 100%);border:none;border-radius:var(--radius-sm);color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px var(--glow-red);margin-bottom:.75rem}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--glow-red)}.btn-secondary{padding:.7rem 1.5rem;background:linear-gradient(135deg,var(--brand-yellow) 0%,var(--brand-yellow-warm) 100%);border:none;border-radius:var(--radius-sm);color:#000;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .3s}.btn-secondary:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--glow-yellow)}.btn-ghost{padding:.7rem 1.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:all .3s}.btn-ghost:hover{background:#ffffff1a;color:var(--text-primary)}.btn-row{display:flex;gap:.5rem}.btn-row>*{flex:1}.auto-save-note{text-align:center;font-size:.75rem;color:var(--text-muted);margin-top:.5rem}#previewSection{padding-top:.5rem}.preview-buttons{display:flex;gap:1rem;margin-top:2rem;max-width:600px;margin-left:auto;margin-right:auto}.preview-buttons>button{flex:1}.success-screen{display:none;text-align:center;padding:3rem 2rem;min-height:60vh;flex-direction:column;align-items:center;justify-content:center}.success-screen.active{display:flex}.success-screen h2{font-size:2rem;color:#2ecc71;margin-bottom:1rem}.success-screen p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:2rem}.countdown-wrapper{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:320px}.countdown-text{font-size:.9rem;color:var(--text-muted)}.countdown-bar-track{width:100%;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.countdown-bar-fill{width:100%;height:100%;background:linear-gradient(90deg,var(--brand-red),var(--brand-yellow));border-radius:2px;transition:width .1s linear}.countdown-btn{font-size:.85rem;padding:.5rem 1.5rem;margin-top:.5rem}.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;z-index:10000;align-items:center;justify-content:center;padding:20px}.modal-overlay.show{display:flex}.modal-content{background:var(--bg-secondary);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);width:95%;max-width:800px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.modal-header h3{color:var(--brand-red-light);font-size:1.1rem}.modal-close{background:var(--brand-red);color:#fff;border:none;border-radius:50%;width:32px;height:32px;font-size:1.2rem;cursor:pointer;transition:all .3s}.modal-close:hover{background:var(--brand-red-light);transform:rotate(90deg)}.modal-body textarea{flex:1;padding:1.5rem;background:transparent;border:none;resize:none;font-size:1.1rem;line-height:1.7;color:var(--text-primary);outline:none;min-height:300px}.modal-footer{padding:1rem 1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}@media(max-width:768px){.landing-title{font-size:1.8rem}.form-card{padding:1.2rem}.preview-buttons{flex-direction:column}.multi-image-upload{justify-content:center}.image-upload-slot{width:110px;height:110px}.image-caption{width:110px}.wysiwyg-editor{font-size:.75rem;line-height:1.5}.wysiwyg-to{font-size:.95rem}.letter-type-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.letter-type-preview{height:60px}.btn-row{flex-direction:column}.form-header h1{font-size:1.4rem}.wysiwyg-inner{top:8%;left:6%;right:6%;bottom:10%}.wysiwyg-from{font-size:.8rem}.wysiwyg-date{font-size:.65rem}.btn-primary,.btn-secondary,.btn-ghost{min-height:44px}.category-label{min-height:44px;padding:.6rem .75rem}.font-option{min-height:44px;padding:.6rem 1rem}}@media(max-width:375px){.form-card{padding:.8rem}.wysiwyg-editor{font-size:.65rem;line-height:1.4}.letter-type-grid{grid-template-columns:repeat(2,1fr)}.image-upload-slot{width:90px;height:90px}.image-caption{width:90px}.landing-title{font-size:1.5rem}}@supports (-webkit-touch-callout: none){.glass-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-section{padding-bottom:env(safe-area-inset-bottom,1rem)}.success-screen{padding-bottom:env(safe-area-inset-bottom,2rem)}.wysiwyg-editor:focus,.wysiwyg-to:focus,.image-caption:focus,.form-group input[type=text]:focus,.form-group select:focus{font-size:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.landing-title,.landing-subtitle,.landing-btn{opacity:1!important;transform:none!important}}.envelope-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9000;pointer-events:none;display:none}.envelope-overlay.active{display:block;pointer-events:all}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}.confetti{position:absolute;width:10px;height:10px;opacity:0}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(100vh) rotate(720deg)}}.sparkle{position:fixed;pointer-events:none;z-index:9998}.sparkle:before{content:"✨";position:absolute;font-size:24px;animation:sparkle-anim 1s ease-out forwards}@keyframes sparkle-anim{0%{opacity:1;transform:translateY(0) scale(0)}50%{opacity:1;transform:translateY(-30px) scale(1.5)}to{opacity:0;transform:translateY(-60px) scale(1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.step-enter{animation:fadeIn .5s ease-out forwards}.step-exit{animation:fadeOut .3s ease-in forwards}.progress-bar-container{width:100%;height:4px;background:#ffffff14;border-radius:2px;margin-bottom:1.5rem;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--brand-red) 0%,var(--brand-yellow) 100%);border-radius:2px;transition:width .5s ease;width:0%}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px var(--glow-red)}50%{box-shadow:0 0 25px var(--glow-red),0 0 50px #c21c3833}}.pulse-glow{animation:pulse-glow 2s ease-in-out infinite}.postman-letter{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:120px;height:80px;background:linear-gradient(145deg,#fffef7,#faf8f0);border:2px solid rgba(194,28,56,.3);border-radius:4px;box-shadow:0 4px 20px #0000004d;z-index:10}.postman-letter:before{content:"";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-left:58px solid transparent;border-right:58px solid transparent;border-top:35px solid var(--brand-red)}.postman-letter:after{content:"";position:absolute;top:30px;left:50%;transform:translate(-50%);width:20px;height:20px;background:radial-gradient(circle,var(--brand-yellow),var(--brand-yellow-warm));border-radius:50%;box-shadow:0 2px 6px #0000004d}.postman-mailbox{position:absolute;bottom:10%;left:50%;transform:translate(-50%) translateY(110vh);z-index:5}.postman-body{position:relative;width:140px;height:160px;margin:0 auto;background:linear-gradient(180deg,#e8302a,#c21c38 40%,#a01530);border-radius:30px 30px 20px 20px;box-shadow:0 8px 30px #0006,inset 0 -5px 15px #0003,inset 0 5px 10px #ff646433;transform-origin:center bottom}.postman-cap{position:absolute;top:-25px;left:50%;transform:translate(-50%);width:160px;height:50px;background:linear-gradient(180deg,#ff4545,#e8302a);border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -3px 10px #ff64644d,inset 0 3px 8px #ff96964d}.postman-face{position:absolute;top:15px;left:50%;transform:translate(-50%);width:100px;height:40px}.postman-eye{position:absolute;top:5px;width:18px;height:20px;background:#1a1a2e;border-radius:50%;transition:all .15s ease}.postman-eye:after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;background:#fff;border-radius:50%}.postman-eye-left{left:15px}.postman-eye-right{right:15px}.postman-face.happy .postman-eye{height:4px;border-radius:4px 4px 0 0;top:12px}.postman-face.happy .postman-eye:after{display:none}.postman-cheek{position:absolute;top:22px;width:16px;height:10px;background:#ff96b480;border-radius:50%;opacity:0;transition:opacity .3s ease}.postman-cheek-left{left:5px}.postman-cheek-right{right:5px}.postman-face.happy .postman-cheek{opacity:1}.postman-mouth{position:absolute;top:65px;left:50%;transform:translate(-50%);width:80px;height:12px;background:#0a0a1a;border-radius:6px;box-shadow:inset 0 3px 8px #000c,0 1px #ff646433;overflow:hidden;transform-origin:center center}.postman-mouth-inner{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:50px;height:0;background:radial-gradient(circle,#ff6b8a,#c21c38);border-radius:0 0 25px 25px;transform-origin:center top}.postman-belly-mark{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background:var(--brand-yellow);color:#1a1a2e;padding:4px 16px;border-radius:4px;font-size:.75rem;font-weight:800;letter-spacing:2px;box-shadow:0 2px 6px #0000004d}.postman-feet{position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:100px;display:flex;justify-content:space-between}.postman-foot{width:30px;height:14px;background:#a01530;border-radius:0 0 15px 15px;box-shadow:0 3px 6px #0000004d}.postman-suction-lines{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;pointer-events:none;opacity:0;z-index:8}.postman-suction-line{position:absolute;top:50%;left:50%;width:60px;height:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);border-radius:2px;transform-origin:right center;transform:rotate(calc(var(--line-index) * 60deg)) translate(80px);animation:suction-pulse .4s ease-in-out infinite alternate;animation-delay:calc(var(--line-index) * .08s)}@keyframes suction-pulse{0%{width:40px;opacity:.3}to{width:70px;opacity:.8}}.postman-particles{position:absolute;pointer-events:none;z-index:12}.postman-particle{position:absolute;font-size:1.4rem;pointer-events:none}.postman-speech{position:absolute;top:15%;left:50%;transform:translate(-50%,-50%) scale(0);background:#fff;color:#1a1a2e;padding:8px 20px;border-radius:20px;font-size:1.1rem;font-weight:700;white-space:nowrap;box-shadow:0 4px 15px #0000004d;z-index:15;opacity:0}.postman-speech:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #fff}@media(max-width:768px){.postman-mailbox{transform:translate(-50%) translateY(110vh) scale(.75);transform-origin:bottom center}.postman-letter{width:90px;height:60px}.postman-letter:before{border-left:43px solid transparent;border-right:43px solid transparent;border-top:26px solid var(--brand-red)}.postman-letter:after{top:22px;width:16px;height:16px}}