*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}img{max-width:100%;display:block}.home-page{box-sizing:border-box;background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:column;justify-content:space-between;min-height:100vh;padding:0 20px;display:flex}.home-content{flex:1;justify-content:center;align-items:center;display:flex}.home-main-image{width:70%;max-width:280px}.home-footer{justify-content:center;padding-bottom:60px;display:flex}.home-btn{cursor:pointer;width:60%;max-width:240px;transition:transform .2s}.home-btn:active{transform:scale(.95)}.select-page{box-sizing:border-box;background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:column;min-height:100vh;padding:20px;display:flex}.select-header{padding:10px 0}.back-icon{cursor:pointer;width:24px}.select-title{justify-content:center;align-items:center;padding:20px 0;display:flex}.title-bracket{color:#c4a67c;font-size:24px}.title-image{height:28px;margin:0 10px}.card-carousel{flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.card-container{justify-content:center;align-items:center;width:100%;padding:10px 0 60px;display:flex;position:relative}.card-item{flex-direction:column;align-items:center;padding-bottom:10px;transition:all .3s;display:flex;position:absolute}.card-item.active{z-index:2;opacity:1;transform:scale(1)}.card-item.prev{z-index:1;opacity:.5;transform:translate(-70%)scale(.75)}.card-item.next{z-index:1;opacity:.5;transform:translate(70%)scale(.75)}.card-flip{width:240px;max-width:70vw;transform-style:preserve-3d;transition:transform .6s;position:relative}.card-flip.flipped{transform:rotateY(180deg)}.card-front,.card-back{backface-visibility:hidden}.card-back{position:absolute;top:0;left:0;transform:rotateY(180deg)}.card-image{border-radius:12px;width:100%}.flip-btn{cursor:pointer;text-align:center;margin-top:10px}.flip-btn img{width:80px;height:auto}.select-footer{z-index:5;justify-content:center;padding:20px 0 40px;display:flex;position:relative}.record-btn{cursor:pointer;width:60%;max-width:240px;transition:transform .2s}.record-btn:active{transform:scale(.95)}.record-page{box-sizing:border-box;background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:column;min-height:100vh;padding:20px;display:flex}.record-header{padding:10px 0}.record-header .back-icon{cursor:pointer;width:24px}.record-tip{text-align:center;padding:40px 0 20px}.record-tip img{width:200px}.record-time{text-align:center;height:30px;margin-bottom:20px}.time-text{color:#c4a67c;font-size:16px}.record-wave{opacity:.5;flex:1;justify-content:center;align-items:center;transition:opacity .3s;display:flex}.record-wave.active{opacity:1;animation:1s ease-in-out infinite wave-pulse}.record-wave img{width:80%;max-width:300px}@keyframes wave-pulse{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.1)}}.record-controls{justify-content:center;align-items:center;gap:30px;padding:40px 0;display:flex}.control-btn{cursor:pointer;transition:transform .2s,opacity .2s}.control-btn img{width:50px;height:50px}.control-btn.main img{width:70px;height:70px}.control-btn.disabled{opacity:.4;pointer-events:none}.control-btn.recording{animation:1s ease-in-out infinite recording-pulse}@keyframes recording-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.control-btn:active{transform:scale(.95)}.generate-page{box-sizing:border-box;background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:column;min-height:100vh;padding:20px;display:flex}.generate-header{text-align:center;padding:20px 0}.title-image{width:140px}.postcard-area{perspective:1000px;flex:1;justify-content:center;align-items:center;display:flex}.postcard-flip{width:280px;height:400px;transform-style:preserve-3d;transition:transform .6s;position:relative}.postcard-flip.flipped{transform:rotateY(180deg)}.postcard-front,.postcard-back{backface-visibility:hidden;border-radius:8px;width:100%;height:100%;position:absolute;box-shadow:0 10px 30px #00000026}.postcard-front{background:#fff}.postcard-frame{box-sizing:border-box;width:100%;height:100%;padding:10px}.postcard-illustration{object-fit:cover;border-radius:4px;width:100%;height:100%}.postcard-back{background:#fff;position:relative;transform:rotateY(180deg)}.postcard-back-img{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0}.postcard-content{box-sizing:border-box;flex-direction:column;width:100%;height:100%;padding:20px;display:flex;position:absolute;top:0;left:0}.qrcode-area{align-items:flex-start;gap:10px;margin-top:auto;display:flex}.qrcode-placeholder{color:#999;background:#fff;border:1px dashed #ccc;justify-content:center;align-items:center;width:80px;height:80px;font-size:12px;display:flex}.qrcode-tip{color:#666;margin:0;font-size:10px;line-height:1.4}.message-area{width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.message-input{color:#333;resize:none;box-sizing:border-box;background:#ffffff80;border:none;border-radius:4px;outline:none;width:100%;height:120px;padding:10px;font-size:14px;line-height:1.8}.message-input::placeholder{color:#999}.message-count{text-align:right;color:#666;margin-top:8px;font-size:11px;display:block}.message-text{color:#333;box-sizing:border-box;white-space:pre-wrap;word-break:break-all;background:#ffffff80;border-radius:4px;width:100%;height:120px;padding:10px;font-size:14px;line-height:1.8;overflow:hidden}.generate-controls{justify-content:center;align-items:center;gap:40px;padding:30px 0;display:flex}.generate-controls .control-btn{cursor:pointer;transition:transform .2s}.generate-controls .control-btn img{width:50px;height:50px}.generate-controls .control-btn:active{transform:scale(.95)}.play-page{box-sizing:border-box;background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:column;min-height:100vh;padding:20px;display:flex}.play-header{padding:10px 0}.play-header .back-icon{cursor:pointer;width:24px}.play-title{text-align:center;padding:20px 0}.play-title h1{color:#5a5a5a;margin:0 0 10px;font-size:24px;font-weight:400}.play-title p{color:#888;margin:0;font-size:14px}.play-illustration{flex:1;justify-content:center;align-items:center;display:flex;position:relative}.illustration-glow{background:radial-gradient(circle,#fffc 0%,#fff0 70%);border-radius:50%;width:220px;height:220px;position:absolute}.illustration-circle{z-index:1;border-radius:50%;width:140px;height:140px;position:relative;overflow:hidden;box-shadow:0 5px 20px #0000001a}.illustration-circle img{object-fit:cover;width:100%;height:100%}.play-time{text-align:center;color:#5a5a5a;letter-spacing:2px;padding:20px 0;font-size:28px;font-weight:300}.play-controls{justify-content:center;align-items:center;gap:30px;padding:20px 0;display:flex}.play-controls .control-btn{cursor:pointer;transition:transform .2s}.play-controls .control-btn img{width:50px;height:50px}.play-controls .control-btn.main img{width:65px;height:65px}.play-controls .control-btn:active{transform:scale(.95)}.play-progress{padding:20px 30px 40px}.progress-bar{appearance:none;background:#e0d5c5;border-radius:2px;outline:none;width:100%;height:4px}.progress-bar::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#c4a67c;border-radius:50%;width:14px;height:14px}.progress-bar::-moz-range-thumb{cursor:pointer;background:#c4a67c;border:none;border-radius:50%;width:14px;height:14px}.play-loading,.play-error{color:#666;flex:1;justify-content:center;align-items:center;font-size:16px;display:flex}