@import"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&family=Noto+Sans+SC:wght@400;500;700&display=swap";.App{width:100%;height:100%}.header-branding{position:absolute;top:30px;left:24px;display:flex;align-items:center;gap:8px;font-family:"Noto Serif SC",serif;font-size:16px;color:var(--cream-beige);letter-spacing:1px;z-index:10}.header-branding.dark-text{color:var(--text-dark)}.leaf-icon{color:var(--golden-ochre);font-size:18px}.footer-branding{position:absolute;bottom:30px;left:24px;display:flex;align-items:center;gap:10px;font-family:"Noto Serif SC",serif;font-size:14px;color:var(--cream-beige);opacity:.8;z-index:10}.footer-branding.dark-text{color:var(--text-dark)}.book-icon{font-size:16px;opacity:.9}.number-tag{position:absolute;bottom:30px;right:24px;width:70px;height:70px;background-color:var(--forest-green);border:1px solid var(--golden-ochre);border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:"Noto Serif SC",serif;color:var(--cream-beige);font-size:28px;font-weight:700;z-index:10}.number-tag:after{content:"✦";color:var(--golden-ochre);font-size:12px;margin-top:2px}.home-page{background:linear-gradient(to bottom,var(--forest-green) 60%,var(--cream-beige) 60%);justify-content:center;align-items:center}.title-group{text-align:center;margin-top:-60px;margin-bottom:20px;position:relative;z-index:2}.home-brand-center{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;font-family:"Noto Serif SC",serif;font-size:16px;color:var(--cream-beige);letter-spacing:1px}.main-title{font-size:46px;color:var(--cream-beige);letter-spacing:4px;line-height:1.1;text-shadow:0 4px 12px rgba(0,0,0,.3)}.sub-title{font-size:18px;color:var(--golden-ochre);letter-spacing:6px;margin-top:16px;position:relative;display:inline-block;padding-bottom:10px}.sub-title:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:40px;height:1px;background-color:var(--golden-ochre)}.main-illustration{width:100%;height:380px;display:flex;justify-content:center;align-items:center;z-index:2;position:relative}.illustration-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.15))}.start-btn{position:absolute;bottom:120px;background-color:var(--forest-green);color:var(--cream-beige);font-family:"Noto Serif SC",serif;font-size:20px;padding:16px 40px;border-radius:0;border:1px solid var(--golden-ochre);font-weight:700;letter-spacing:4px;z-index:10;box-shadow:4px 4px 0 var(--golden-ochre)}.start-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--golden-ochre)}.home-copyright{position:absolute;bottom:30px;left:50%;transform:translate(-50%);font-family:"Noto Serif SC",serif;font-size:12px;color:#0f3b2fbf;opacity:1;z-index:10;white-space:nowrap}.quiz-page{background-color:var(--forest-green);padding-top:80px}.quiz-header{margin-bottom:50px}.progress-container{width:100%;height:1px;background:var(--border-light);margin-bottom:16px;position:relative}.progress-bar{height:2px;background-color:var(--golden-ochre);transition:width .4s cubic-bezier(.25,1,.5,1);position:absolute;top:-.5px}.progress-bar:after{content:"✦";position:absolute;right:-5px;top:-7px;color:var(--golden-ochre);font-size:10px}.progress-text{font-family:"Noto Serif SC",serif;font-size:14px;color:var(--golden-ochre);text-transform:uppercase;letter-spacing:2px}.question-content{margin-bottom:50px}.question-text{font-size:26px;line-height:1.5;color:var(--cream-beige);font-weight:400;text-align:justify}.options-container{display:flex;flex-direction:column;gap:16px}.option-btn{background-color:transparent;border:1px solid var(--border-light);padding:20px 24px;border-radius:0;text-align:left;display:flex;align-items:center;gap:20px;color:var(--cream-beige)}.option-label{font-family:"Noto Serif SC",serif;color:var(--golden-ochre);font-size:18px;font-weight:700}.option-text{font-size:16px;flex:1}.option-btn:active{background-color:#d4a84b1a;border-color:var(--golden-ochre)}.loading-page{background-color:var(--cream-beige);color:var(--text-dark);text-align:center;justify-content:center}.loading-main{font-size:24px;color:var(--text-dark);margin-top:30px;letter-spacing:2px}.loading-sub{margin-top:10px;opacity:.7;font-family:"Noto Serif SC",serif;font-style:italic}.result-page{background-color:var(--forest-green);padding:0;height:auto;min-height:100vh;overflow-y:visible;display:block}.poster-wrapper{background:linear-gradient(to bottom,var(--forest-green) 55%,var(--cream-beige) 55%);padding:40px 24px 36px;min-height:auto;position:relative;display:flex;flex-direction:column}.poster-header{font-family:"Noto Serif SC",serif;font-size:14px;letter-spacing:2px;color:var(--cream-beige);text-align:center}.result-illustration-wrapper{width:100%;height:300px;margin:30px 0 20px;display:flex;justify-content:center;align-items:center;position:relative}.result-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 25px rgba(0,0,0,.2))}.result-p-name{font-size:42px;color:var(--cream-beige);margin-bottom:16px;letter-spacing:4px;text-align:center;text-shadow:0 4px 12px rgba(0,0,0,.3)}.result-p-quote{font-family:"Noto Serif SC",serif;font-size:16px;line-height:1.8;margin-bottom:50px;color:var(--golden-ochre);text-align:center;padding:0 20px}.books-container{margin-top:20px;position:relative;z-index:2}.books-header{font-family:"Noto Serif SC",serif;font-size:18px;color:var(--text-dark);margin-bottom:24px;font-weight:700;display:flex;align-items:center;gap:12px}.books-header:before,.books-header:after{content:"";height:1px;flex:1;background:var(--border-dark)}.books-list{display:flex;flex-direction:column;gap:20px}.book-card{text-align:left;padding-left:20px;position:relative}.book-card:before{content:"✦";position:absolute;left:0;top:4px;color:var(--golden-ochre);font-size:12px}.book-title{font-family:"Noto Serif SC",serif;font-size:20px;color:var(--text-dark);margin-bottom:8px;font-weight:700}.book-reason{font-size:14px;color:#0f3b2fcc;line-height:1.6;text-align:justify}.poster-final-footer{margin-top:34px;padding-top:28px;display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid rgba(15,59,47,.15);position:relative;z-index:2}.footer-left-col{display:flex;flex-direction:column;gap:12px}.footer-tagline{font-family:"Noto Serif SC",serif;font-size:16px;color:var(--text-dark);font-weight:700;letter-spacing:1px}.copyright{font-size:11px;color:#0f3b2f80}.qr-code{display:flex;gap:10px;align-items:flex-end}.qr-code-img{width:70px;height:70px;border:2px solid var(--forest-green);padding:2px;background:#fff}.result-actions{display:flex;gap:16px;width:100%;max-width:450px;padding:22px 24px 60px;margin:0 auto;background-color:var(--cream-beige);position:static;z-index:1}.save-btn,.retry-btn{flex:1;padding:18px;font-weight:700;font-size:16px;letter-spacing:2px;border-radius:0;font-family:"Noto Serif SC",serif}.save-btn{background-color:var(--forest-green);color:var(--cream-beige);border:1px solid var(--golden-ochre);box-shadow:4px 4px 0 var(--golden-ochre)}.save-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--golden-ochre)}.retry-btn{background-color:var(--cream-beige);color:var(--forest-green);border:1px solid var(--forest-green);box-shadow:4px 4px 0 var(--forest-green)}.retry-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--forest-green)}:root{--forest-green: #0F3B2F;--cream-beige: #F2E8D9;--golden-ochre: #D4A84B;--off-white: #F7F0E6;--text-dark: #0F3B2F;--border-light: rgba(247, 240, 230, .2);--border-dark: rgba(15, 59, 47, .15)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:Noto Sans SC,sans-serif;background-color:var(--forest-green);color:var(--off-white);line-height:1.6;overflow-x:hidden;width:100vw;height:100vh;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E")}#root{width:100%;height:100%}h1,h2,h3,.serif{font-family:"Noto Serif SC",serif;font-weight:700}button{border:none;outline:none;cursor:pointer;font-family:inherit;transition:all .3s cubic-bezier(.25,1,.5,1)}.page-container{display:flex;flex-direction:column;height:100vh;padding:30px 24px;max-width:500px;margin:0 auto;position:relative}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .8s cubic-bezier(.22,1,.36,1) forwards}.star-sparkle{position:absolute;color:var(--golden-ochre);font-size:10px;opacity:.8;animation:twinkle 4s infinite alternate}@keyframes twinkle{0%{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}