@import"https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&family=Yomogi&display=swap";*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;background-color:#fff9f0}*{box-sizing:border-box;margin:0;padding:0}:root{--font-main: "Zen Maru Gothic", sans-serif;--font-handwriting: "Yomogi", cursive;--color-cream: #FFF8E7;--color-paper: #FFFEF9;--color-brown: #8B7355;--color-brown-light: #C4A77D;--color-pink: #FFB6C1;--color-mint: #98D8C8;--color-yellow: #FFE66D;--color-orange: #FFB347;--color-blue: #87CEEB;--color-text: #5D4E37;--color-text-light: #8B7355;--shadow-soft: 0 4px 15px rgba(139, 115, 85, .15);--shadow-paper: 0 2px 8px rgba(139, 115, 85, .1)}body{font-family:var(--font-main);background:var(--color-cream);color:var(--color-text);min-height:100vh;overflow-x:hidden}.zine-editor{min-height:100vh;padding:16px;position:relative;display:flex;flex-direction:column;gap:16px}.editor-background{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.deco{position:absolute;font-size:32px;opacity:.3;animation:float 6s ease-in-out infinite}.deco-1{top:10%;left:5%;animation-delay:0s}.deco-2{top:20%;right:8%;animation-delay:1s}.deco-3{bottom:15%;left:10%;animation-delay:2s}.deco-4{bottom:25%;right:5%;animation-delay:3s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(5deg)}}.editor-header{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:10}.editor-title{font-family:var(--font-handwriting);font-size:28px;color:var(--color-brown);text-shadow:2px 2px 0 rgba(255,255,255,.8)}.icon-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:8px;border-radius:50%;transition:transform .2s}.icon-btn:hover{transform:scale(1.1)}.guide-character{display:flex;align-items:flex-start;gap:12px;position:relative;z-index:10}.guide-avatar{font-size:48px;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.guide-bubble{background:#fff;border-radius:20px;padding:12px 16px;position:relative;box-shadow:var(--shadow-soft);border:3px solid var(--color-brown-light);max-width:280px}.guide-bubble p{font-family:var(--font-handwriting);font-size:16px;line-height:1.5;color:var(--color-text)}.bubble-tail{position:absolute;left:-12px;top:20px;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:12px solid var(--color-brown-light)}.bubble-tail:after{content:"";position:absolute;left:4px;top:-7px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:9px solid white}.editor-main{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;position:relative;z-index:10}.page-nav{background:#fff;border:3px solid var(--color-brown-light);border-radius:50%;width:44px;height:44px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--color-brown)}.page-nav:hover:not(:disabled){background:var(--color-yellow);transform:scale(1.1)}.page-nav:disabled{opacity:.3;cursor:not-allowed}.zine-book{transition:transform .3s ease}.zine-book.flipping{transform:scale(.95)}.zine-page-container{position:relative}.page-number-badge{position:absolute;top:-8px;right:-8px;background:var(--color-orange);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;z-index:5;box-shadow:var(--shadow-soft)}.zine-paper{width:320px;min-height:420px;background:var(--color-paper);border-radius:4px;box-shadow:var(--shadow-paper),0 0 0 1px #8b73551a,inset 0 0 30px #8b735508;position:relative;overflow:hidden}.zine-paper:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(139,115,85,.06) 28px);pointer-events:none}.page-content{padding:24px 20px;height:100%;display:flex;flex-direction:column;position:relative}.page-heading{font-family:var(--font-handwriting);font-size:20px;color:var(--color-brown);margin-bottom:16px;text-align:center}.page-subtitle{font-size:13px;color:var(--color-text-light);text-align:center;margin-bottom:12px}.tape{position:absolute;width:80px;height:24px;background:var(--color-yellow);opacity:.7}.tape-top{top:-8px;left:50%;transform:translate(-50%) rotate(-2deg)}.tape-bottom{bottom:-8px;right:20px;transform:rotate(3deg);background:var(--color-pink)}.sticker{position:absolute;font-size:32px;animation:wiggle 3s ease-in-out infinite}.sticker-1{bottom:20px;right:15px}.sticker-2{bottom:15px;left:15px}.sticker-3{top:60px;right:10px}.sticker-4{bottom:25px;right:20px}@keyframes wiggle{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.title-input{font-family:var(--font-handwriting);font-size:24px;text-align:center;border:none;background:transparent;width:100%;padding:12px;color:var(--color-text);border-bottom:2px dashed var(--color-brown-light);margin-bottom:16px}.title-input:focus{outline:none;border-bottom-color:var(--color-brown)}.location-input,.date-input,.family-input{font-family:var(--font-handwriting);font-size:16px;text-align:center;border:none;background:transparent;width:100%;padding:8px;color:var(--color-text);border-bottom:2px dashed var(--color-brown-light);margin-bottom:12px}.location-input:focus,.date-input:focus,.family-input:focus{outline:none;border-bottom-color:var(--color-brown)}.handwriting-input{font-family:var(--font-handwriting);font-size:16px;line-height:1.8;border:none;background:transparent;width:100%;padding:8px;color:var(--color-text);resize:none;flex:1;min-height:150px}.handwriting-input.small{min-height:80px;flex:none}.handwriting-input:focus{outline:none}.handwriting-input::placeholder{color:var(--color-brown-light)}.photo-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:3px dashed var(--color-brown-light);border-radius:12px;cursor:pointer;transition:all .2s;background:#ffe66d1a}.photo-placeholder:hover{border-color:var(--color-brown);background:#ffe66d33}.placeholder-icon{font-size:48px}.photo-frame{flex:1;display:flex;flex-direction:column;align-items:center;cursor:pointer;position:relative}.photo-frame img{max-width:100%;max-height:280px;border-radius:8px;box-shadow:var(--shadow-soft);border:4px solid white}.photo-hint{font-size:12px;color:var(--color-text-light);margin-top:8px}.ai-image-area{flex:1;display:flex;align-items:center;justify-content:center;margin-top:12px}.generate-ai-btn{font-family:var(--font-handwriting);font-size:16px;background:linear-gradient(135deg,var(--color-pink),var(--color-orange));color:#fff;border:none;padding:14px 24px;border-radius:30px;cursor:pointer;box-shadow:var(--shadow-soft);transition:transform .2s}.generate-ai-btn:hover{transform:scale(1.05)}.ai-loading{display:flex;flex-direction:column;align-items:center;gap:8px}.loading-icon{font-size:40px;animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.ai-image-frame{display:flex;flex-direction:column;align-items:center;gap:8px}.ai-image-frame img{max-width:100%;max-height:160px;border-radius:8px;box-shadow:var(--shadow-soft)}.regenerate-btn{font-family:var(--font-main);font-size:12px;background:var(--color-mint);border:none;padding:6px 12px;border-radius:15px;cursor:pointer}.message-frame{flex:1;background:#ffb6c11a;border-radius:12px;padding:12px;border:2px solid var(--color-pink)}.parent-message .message-frame{background:#87ceeb1a;border-color:var(--color-blue)}.message-input{font-family:var(--font-handwriting);font-size:16px;line-height:1.8;border:none;background:transparent;width:100%;height:100%;min-height:200px;padding:8px;color:var(--color-text);resize:none}.message-input:focus{outline:none}.back-cover-page{justify-content:center;align-items:center;text-align:center}.made-by-label{font-family:var(--font-handwriting);font-size:14px;color:var(--color-text-light);margin-bottom:8px}.creation-date{font-size:14px;color:var(--color-text-light);margin-top:16px}.completion-stamp{font-size:64px;margin-top:24px;animation:stamp .5s ease-out}@keyframes stamp{0%{transform:scale(2);opacity:0}to{transform:scale(1);opacity:1}}.page-thumbnails{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;position:relative;z-index:10}.thumbnail-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:2px solid var(--color-brown-light);border-radius:10px;padding:8px 10px;cursor:pointer;transition:all .2s;position:relative;min-width:52px}.thumbnail-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}.thumbnail-btn.active{border-color:var(--color-orange);background:var(--color-yellow)}.thumbnail-btn.complete{border-color:var(--color-mint)}.thumbnail-icon{font-size:18px}.thumbnail-label{font-size:10px;color:var(--color-text)}.complete-check{position:absolute;top:-6px;right:-6px;background:var(--color-mint);color:#fff;font-size:10px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}.completion-area{display:flex;justify-content:center;padding:16px;position:relative;z-index:10}.complete-btn{font-family:var(--font-handwriting);font-size:20px;background:linear-gradient(135deg,var(--color-orange),var(--color-pink));color:#fff;border:none;padding:16px 32px;border-radius:30px;cursor:pointer;box-shadow:var(--shadow-soft);transition:transform .2s;animation:pulse 2s ease-in-out infinite}.complete-btn:hover{transform:scale(1.05)}@keyframes pulse{0%,to{box-shadow:0 0 #ffb34766}50%{box-shadow:0 0 0 15px #ffb34700}}.settings-page{max-width:480px;margin:0 auto;padding:16px}.settings-header{display:flex;align-items:center;gap:16px;margin-bottom:32px}.settings-header h1{font-family:var(--font-handwriting);color:var(--color-brown)}.settings-content{background:#fff;padding:24px;border-radius:16px;box-shadow:var(--shadow-soft)}.form-group{margin-bottom:20px}.form-group label{display:block;font-weight:500;margin-bottom:8px}.input{width:100%;padding:12px;border:2px solid var(--color-brown-light);border-radius:10px;font-size:16px}.input:focus{outline:none;border-color:var(--color-brown)}.hint{font-size:13px;color:var(--color-text-light);margin-top:6px}.hint a{color:var(--color-orange)}.settings-actions{display:flex;gap:12px;margin-top:16px}.btn{font-family:var(--font-main);padding:12px 24px;border-radius:20px;font-size:14px;cursor:pointer;border:none;transition:transform .2s}.btn:hover{transform:scale(1.02)}.btn-primary{background:var(--color-orange);color:#fff}.btn-secondary{background:var(--color-cream);color:var(--color-text);border:2px solid var(--color-brown-light)}.success-message{color:var(--color-mint);font-size:14px;margin-top:12px}@media(max-width:400px){.zine-paper{width:290px;min-height:380px}.guide-bubble{max-width:220px}.thumbnail-btn{padding:6px 8px;min-width:44px}.thumbnail-label{display:none}}