.app{width:100vw;height:100vh;background:#000;position:relative;overflow:hidden;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(12px,3vw,32px);height:clamp(54px,9vh,64px);background:#000000d9;border-bottom:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:500;flex-shrink:0}.header-left{display:flex;align-items:center;gap:clamp(8px,2vw,14px)}.header-title{color:#fff;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(14px,3vw,20px);letter-spacing:.1em;font-weight:400;margin:0}.header-nav{display:flex;gap:4px}.nav-btn{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff9;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(14px,2.5vw,16px);letter-spacing:.08em;padding:8px clamp(16px,3vw,24px);cursor:pointer;transition:all .25s ease}.nav-btn:first-child{border-radius:4px 0 0 4px}.nav-btn:last-child{border-radius:0 4px 4px 0}.nav-btn:hover{color:#fff;border-color:#ffffff80}.nav-btn.active{background:#fff;color:#000;border-color:#fff}.nav-btn:focus-visible{outline:2px solid white;outline-offset:2px}.app-body{flex:1;position:relative;overflow:hidden}.hint-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:100;animation:hint-fade-in .8s ease-out .3s both}@keyframes hint-fade-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.hint-text span{display:block;color:#fff;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(15px,3vw,20px);letter-spacing:.08em;font-style:italic;background:#000000d9;padding:clamp(14px,3vw,20px) clamp(20px,5vw,36px);border-radius:10px;border:2px solid rgba(255,255,255,.4);box-shadow:0 8px 32px #00000080;max-width:85vw;line-height:1.5;animation:hint-text-rotate .6s ease-out}@keyframes hint-text-rotate{0%{opacity:0}to{opacity:1}}.envelope-wrapper{position:absolute;left:0;top:0;cursor:pointer;backface-visibility:hidden;-webkit-backface-visibility:hidden;contain:layout style}.envelope-wrapper:hover{filter:drop-shadow(0 0 12px rgba(255,255,255,.6));z-index:100}.envelope-wrapper svg{display:block;pointer-events:none}.envelope-overlay{position:fixed;top:clamp(54px,9vh,64px);left:0;width:100vw;height:calc(100vh - clamp(54px,9vh,64px));background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000}.envelope-overlay .write-mode{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.modal-content{position:relative;width:100%;height:100%}.scene{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(200px,50vw)}.envelope-base{position:relative;width:100%;aspect-ratio:240 / 160;perspective:800px}.env-body{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.env-body svg{width:100%;height:100%}.env-flap{position:absolute;top:0;left:0;width:100%;aspect-ratio:240 / 80;transform-origin:top center;transform-style:preserve-3d;z-index:4;will-change:transform}.env-flap svg{width:100%;height:100%}.corner-ornament{position:absolute;width:clamp(24px,5vw,44px);height:clamp(24px,5vw,44px);z-index:2}.corner-ornament.top-left{top:6px;left:6px}.corner-ornament.top-right{top:6px;right:6px}.corner-ornament.bottom-left{bottom:6px;left:6px}.corner-ornament.bottom-right{bottom:6px;right:6px}.seal-svg{width:100%;height:100%}.seal-logo{object-fit:contain;border-radius:50%;clip-path:circle(50%)}.divider{display:flex;align-items:center;gap:clamp(6px,1.5vw,12px);width:60%;max-width:240px;margin:clamp(4px,1vh,10px) 0;flex-shrink:0}.divider-line{flex:1;height:1px;background:#fff;opacity:.6}.divider-diamond{width:6px;height:6px;border:1px solid white;transform:rotate(45deg);flex-shrink:0;opacity:.8}.letter-title{color:#fff;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(18px,3.5vw,27px);font-weight:400;letter-spacing:.15em;text-transform:uppercase;text-align:center;margin:0;flex-shrink:0}.letter-body{text-align:center;padding:clamp(4px,1.5vh,16px) 0;flex-shrink:0}.letter-paragraph{color:#fff;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(16px,2.5vw,18px);line-height:1.8;margin:0 0 clamp(10px,2vh,22px) 0;letter-spacing:.03em;opacity:.9}.letter-paragraph:last-child{margin-bottom:0}.bottom-flourish{margin-top:auto;padding-top:clamp(4px,1vh,10px)}.write-mode{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;z-index:400;padding-top:clamp(20px,5vh,60px);padding-bottom:clamp(20px,5vh,60px);padding-left:clamp(20px,5vw,60px);padding-right:clamp(20px,5vw,60px);gap:clamp(12px,2vh,20px);box-sizing:border-box;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.write-envelope{width:100%;max-width:500px;flex:1;min-height:0;max-height:70vh}@media (min-width: 768px){.write-envelope{max-width:550px;max-height:75vh}}@media (min-width: 1024px){.write-envelope{max-width:600px;max-height:80vh}}.write-card-border-outer{background:#fff;padding:4px;border-radius:6px;box-shadow:0 10px 40px #00000080;width:100%;height:100%;box-sizing:border-box}.sending-envelope-container{display:flex;align-items:center;justify-content:center;width:100%;flex:1}.sending-envelope-scene{position:relative;width:min(200px,50vw);aspect-ratio:240 / 160;perspective:800px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}.sending-env-body{position:absolute;top:0;left:0;width:100%;height:100%}.sending-env-body svg{width:100%;height:100%}.sending-env-flap{position:absolute;top:0;left:0;width:100%;aspect-ratio:240 / 80;transform-origin:top center;transform-style:preserve-3d;z-index:4;will-change:transform}.sending-env-flap svg{width:100%;height:100%}.sent-success-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,3vh,28px);width:100%;flex:1;text-align:center;padding:20px}.sent-success-icon{width:80px;height:80px;border-radius:50%;border:3px solid white;display:flex;align-items:center;justify-content:center}.sent-success-title{color:#fff;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(28px,5vw,40px);font-weight:500;letter-spacing:.1em;margin:0}.sent-success-text{color:#ffffffb3;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(14px,2.5vw,18px);font-style:italic;margin:0;max-width:300px}.write-card-border-inner{background:#000;padding:4px;border-radius:4px;width:100%;height:100%;box-sizing:border-box}.write-card-content{background:#000;border:3px solid white;border-radius:3px;width:100%;height:100%;box-sizing:border-box;position:relative;overflow:hidden}.write-inner-frame{position:absolute;top:clamp(20px,4vw,40px);left:clamp(20px,4vw,40px);right:clamp(20px,4vw,40px);bottom:clamp(20px,4vw,40px);display:flex;flex-direction:column;align-items:center;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.write-inner-frame::-webkit-scrollbar{width:4px}.write-inner-frame::-webkit-scrollbar-track{background:transparent}.write-inner-frame::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:2px}.write-title-input{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.3);color:#fff;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(17px,3vw,22px);letter-spacing:.1em;text-align:center;width:80%;max-width:360px;padding:8px 4px;outline:none;transition:border-color .3s}.write-title-input::placeholder{color:#ffffff4d;font-style:italic}.write-title-input:focus{border-bottom-color:#ffffffb3}.write-content-input{background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:4px;color:#fff;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(16px,2.5vw,17px);line-height:1.8;letter-spacing:.02em;width:100%;flex:1;padding:clamp(8px,2vw,16px);outline:none;resize:none;box-sizing:border-box;transition:border-color .3s;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.write-content-input::placeholder{color:#ffffff4d;font-style:italic}.write-content-input:focus{border-color:#fff6}.write-content-input::-webkit-scrollbar{width:4px}.write-content-input::-webkit-scrollbar-track{background:transparent}.write-content-input::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:2px}.char-counter{color:#ffffff80;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(12px,1.5vw,14px);text-align:right;width:100%;margin-top:4px;transition:color .3s ease}.char-counter.warning{color:#f0a500}.char-counter.danger{color:#e74c3c;font-weight:600}.send-btn{background:transparent;border:2px solid white;color:#fff;padding:0;cursor:pointer;border-radius:6px;overflow:hidden;transition:all .3s ease;flex-shrink:0}.send-btn:hover:not(.disabled){background:#fff;color:#000;box-shadow:0 0 20px #ffffff4d}.send-btn.disabled{opacity:.3;cursor:not-allowed}.send-btn.sent{background:#fff;color:#000;border-color:#fff;animation:pulse-success .4s ease-out}@keyframes pulse-success{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.send-btn.error{border-color:#ff6b6b;color:#ff6b6b}.send-btn:focus-visible{outline:2px solid white;outline-offset:2px}.status-message{color:#fff;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(13px,2vw,16px);text-align:center;padding:12px 20px;border-radius:8px;margin-bottom:8px;animation:fade-in .3s ease-out}.status-message.success{background:#ffffff1a;border:1px solid rgba(255,255,255,.3)}.status-message.error{background:#ff6b6b26;border:1px solid rgba(255,107,107,.4);color:#ff6b6b}@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.letter-loading,.letter-error,.letter-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:#fff;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(14px,2.5vw,18px);text-align:center;font-style:italic;opacity:.8}.letter-loading span{animation:pulse 1.5s ease-in-out infinite}.empty-icon{margin-bottom:16px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.empty-title{font-size:1.1em!important;opacity:.7!important;margin-bottom:8px}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.letter-error{color:#ff6b6b}.send-btn-inner{display:flex;align-items:center;gap:clamp(8px,2vw,14px);padding:clamp(10px,2vw,14px) clamp(20px,4vw,36px)}.send-icon{flex-shrink:0}.send-text{font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(14px,2.5vw,18px);letter-spacing:.15em;text-transform:uppercase}@media (min-width: 481px) and (max-width: 767px){.scene,.sending-envelope-scene{width:min(240px,55vw)}}@media (min-width: 768px){.scene,.sending-envelope-scene{width:min(320px,40vw)}}@media (min-width: 1024px){.scene,.sending-envelope-scene{width:min(400px,35vw)}}@media (max-width: 480px){.envelope-overlay{padding:10px}.scene,.sending-envelope-scene{width:min(200px,60vw)}.corner-ornament{width:20px;height:20px}.corner-ornament.top-left{top:4px;left:4px}.corner-ornament.top-right{top:4px;right:4px}.corner-ornament.bottom-left{bottom:4px;left:4px}.corner-ornament.bottom-right{bottom:4px;right:4px}.divider{width:50%}.write-mode{padding:16px 12px}.write-envelope{max-width:100%;max-height:65vh}.write-inner-frame{top:14px;left:14px;right:14px;bottom:14px}.write-card-content{border-width:2px}.write-card-border-outer,.write-card-border-inner{padding:3px}.write-title-input{width:90%;font-size:18px;font-weight:500}.write-content-input{font-size:17px;font-weight:500}.send-btn-inner{padding:10px 20px}.send-text{font-size:16px;font-weight:500}.sent-success-icon{width:60px;height:60px}.sent-success-icon svg{width:36px;height:36px}.hint-text span{font-size:16px;font-weight:500;padding:12px 18px}.nav-btn{font-weight:500}.sent-success-title{font-weight:600}.sent-success-text,.char-counter,.status-message,.write-another-btn{font-weight:500}.letter-title{font-size:22px;font-weight:500;letter-spacing:.1em;margin-bottom:6px}.letter-paragraph{font-size:18px;font-weight:500;line-height:1.6;margin:0 0 10px}.letter-body{padding:6px 0}.header-title{font-size:19px;font-weight:500;letter-spacing:.05em}.header-left{gap:10px}.header-left .seal-logo{width:26px!important;height:26px!important}.nav-btn{padding:10px 18px;font-size:16px}.app-header{height:58px}}@media (max-width: 360px){.header-title{font-size:17px;font-weight:600;letter-spacing:.02em}.header-left .seal-logo{width:24px!important;height:24px!important}.nav-btn{padding:8px 14px;font-size:15px;font-weight:600}.hint-text span{font-size:15px;font-weight:600;padding:10px 14px}.write-title-input{font-size:17px;font-weight:500}.write-content-input{font-size:16px;font-weight:500}.send-text{font-size:15px;font-weight:600}.sent-success-title{font-weight:600}.sent-success-text{font-weight:500}.char-counter{font-size:12px;font-weight:500}.status-message{font-weight:500}.write-another-btn{font-weight:600}.letter-title{font-size:19px;font-weight:600;letter-spacing:.08em;margin-bottom:4px}.letter-paragraph{font-size:17px;font-weight:500;line-height:1.5;margin:0 0 8px}.letter-body{padding:4px 0}.app-header{height:54px;padding:0 10px}.write-mode{padding:8px;gap:8px}.write-envelope{max-height:60vh}.write-inner-frame{top:10px;left:10px;right:10px;bottom:10px}.divider{margin:6px 0}}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%}html,body,#root{width:100%;height:100%;overflow:hidden}body{background:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input,textarea,button{font-size:16px}