:root{color:#f5efff;background:#090014;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:#f5efff;background:radial-gradient(circle at top,#42136359,#0000 35%),radial-gradient(circle at 0 100%,#174c372e,#0000 30%),linear-gradient(#0a0015 0%,#120022 45%,#140024 100%);min-height:100vh}button,input{font:inherit}button{cursor:pointer}.reflect-page,.story-page{justify-content:center;align-items:center;min-height:100vh;padding:32px 20px;display:flex}.reflect-shell{flex-direction:column;align-items:center;gap:22px;width:100%;max-width:760px;display:flex}.camera-intro-copy{text-align:center;margin-bottom:4px}.camera-intro-title{letter-spacing:-.04em;margin:0 0 10px;font-size:clamp(2rem,4vw,3rem);line-height:1.05}.camera-intro-text{color:#f5efffb8;margin:0;font-size:1rem}.story-mood-toggle{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.mood-option{color:#f5efff;background:#171026d1;border:1px solid #ffffff1a;border-radius:16px;min-width:170px;padding:14px 18px;font-weight:700;transition:transform .18s,box-shadow .2s,border-color .2s}.mood-option:hover{transform:translateY(-1px)}.mood-option.active.gentle{background:linear-gradient(#5e3cff 0%,#6f39ff 100%);box-shadow:0 12px 32px #6f39ff47}.mood-option.active.ominous{background:linear-gradient(#5a0d1f 0%,#8f1830 100%);box-shadow:0 12px 32px #8f183057}.story-mood-description,.selected-mood-label,.stage-label{color:#f5efffb8;text-align:center;margin:0}.camera-stage{flex-direction:column;align-items:center;gap:18px;display:flex}.camera-ring{border:10px solid #f0d85d;border-radius:50%;justify-content:center;align-items:center;width:310px;height:310px;display:flex;overflow:hidden;box-shadow:0 0 55px #f0d85d3d,0 0 80px #f0d85d1f}.camera-circle{background:0 0;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.camera-video{object-fit:cover;border-radius:50%;width:100%;height:100%;display:block;transform:scaleX(-1)scale(1.08)}.camera-status{color:#f5efffd1;text-align:center;margin:0;padding:18px;font-size:.95rem}.camera-error{color:#ffb2b2}.capture-button{color:#1b1605;letter-spacing:.02em;background:linear-gradient(#f0d85d 0%,#e7be45 100%);border:none;border-radius:18px;width:100%;max-width:420px;padding:16px 18px;font-weight:800;box-shadow:0 14px 34px #f0d85d38}.capture-button:disabled{opacity:.6;cursor:not-allowed}.face-wrapper{justify-content:center;align-items:center;display:flex}.face-ring{background:radial-gradient(circle,#2d0a12f2 0%,#10040afa 70%);border:10px solid #57ff41;border-radius:50%;justify-content:center;align-items:center;width:310px;height:310px;display:flex;box-shadow:0 0 55px #57ff4138}.face-video{object-fit:cover;border-radius:50%;width:220px;height:220px}.ai-message-box,.user-reply-box{background:#171026d1;border:1px solid #ffffff14;border-radius:28px;width:100%;max-width:700px;padding:24px 26px;box-shadow:0 20px 60px #00000059,inset 0 1px #ffffff0a}.ai-message-text{text-align:center;letter-spacing:-.03em;margin:0;font-size:clamp(1.4rem,3vw,2.4rem);font-weight:700;line-height:1.15}.reply-label{color:#f5efffd1;margin-bottom:10px;font-size:.95rem;display:block}.reply-input{color:#fff;background:#0a0714e0;border:1px solid #ffffff14;border-radius:18px;outline:none;width:100%;padding:16px 18px}.reply-button{color:#081105;background:linear-gradient(#64ff50 0%,#46d936 100%);border:none;border-radius:18px;width:100%;margin-top:16px;padding:15px 18px;font-weight:700}.reply-button:disabled{opacity:.6;cursor:not-allowed}.story-button{color:#fff;letter-spacing:.04em;background:linear-gradient(135deg,#b37bff 0%,#6f39ff 55%,#57ff41 100%);border:none;border-radius:24px;width:100%;max-width:760px;margin-top:10px;padding:22px 24px;font-size:1.25rem;font-weight:900;transition:transform .18s,box-shadow .25s,filter .2s;animation:2.8s ease-in-out infinite storyButtonPulse,.5s forwards storyButtonEnter;box-shadow:0 20px 60px #965aff73,0 0 25px #57ff4133}.story-button:hover{filter:brightness(1.08);transform:translateY(-3px)scale(1.04);box-shadow:0 28px 70px #965aff99,0 0 40px #57ff4166}.story-button:active{transform:scale(.98)}.story-button:disabled{opacity:.6;cursor:not-allowed;animation:none}.ominous-story-button{background:linear-gradient(135deg,#7a1128 0%,#2b0813 55%,#9b0d34 100%);box-shadow:0 20px 60px #7a112873,0 0 25px #9b0d3438}.story-shell{flex-direction:column;align-items:center;gap:24px;width:100%;max-width:980px;display:flex}.pdf-export-area{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.story-title{text-align:center;color:#f5efff;margin:0;font-size:clamp(2rem,4vw,3.4rem);line-height:1.05}.story-meta-line,.story-empty-text{color:#f5efffbd;text-align:center;margin:0}.story-actions{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.story-action-button{letter-spacing:.02em;border:none;border-radius:18px;justify-content:center;align-items:center;min-width:220px;padding:14px 22px;font-weight:800;text-decoration:none;transition:transform .18s,box-shadow .22s,filter .2s;display:inline-flex}.story-action-button:hover{filter:brightness(1.04);transform:translateY(-2px)}.story-action-button.primary{color:#1b1605;background:linear-gradient(#f0d85d 0%,#e7be45 100%);box-shadow:0 14px 34px #f0d85d38}.story-action-button.secondary{color:#f5efff;background:#171026e6;border:1px solid #ffffff14;box-shadow:0 14px 34px #00000038}.storybook-container{flex-direction:column;gap:18px;width:100%;max-width:860px;display:flex}.storybook-page{color:#3a2b1f;min-height:760px;transform-style:preserve-3d;perspective:1200px;background:linear-gradient(#fff8eb,#f6ecdc);border-radius:28px;flex-direction:column;padding:28px;display:flex;box-shadow:0 20px 60px #00000047,inset 0 0 0 1px #5a3c1e14,inset -8px 0 18px #785a3c0f}.storybook-page-number{color:#3a2b1f99;margin:0 0 18px;font-size:.95rem}.storybook-image-wrap{border-radius:20px;justify-content:center;width:100%;margin-bottom:24px;display:flex;overflow:hidden}.storybook-image{object-fit:cover;object-position:center;border-radius:20px;width:100%;max-width:700px;height:420px;display:block;box-shadow:0 12px 28px #0000001f}.storybook-image-fallback{color:#3a2b1f99;justify-content:center;align-items:center;display:flex}.storybook-page-text{flex:1;justify-content:center;align-items:flex-start;display:flex}.storybook-page-text p{text-align:center;max-width:720px;margin:0;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.8}.storybook-controls{justify-content:center;gap:14px;display:flex}.storybook-nav-button{color:#f5efff;background:#171026e6;border:none;border-radius:16px;min-width:130px;padding:14px 18px;font-weight:700}.storybook-nav-button:disabled{opacity:.6;cursor:not-allowed}.story-loading-overlay{z-index:999;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:radial-gradient(circle at top,#42136340,#0000 35%),radial-gradient(circle at 100% 100%,#57ff411f,#0000 30%),#070014e0;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.story-loading-card{text-align:center;background:#171026eb;border:1px solid #ffffff14;border-radius:28px;width:100%;max-width:520px;padding:36px 28px;box-shadow:0 20px 60px #00000073,inset 0 1px #ffffff0a}.story-loading-orb-wrap{justify-content:center;align-items:center;width:110px;height:110px;margin:0 auto 24px;display:flex;position:relative}.story-loading-orb{background:radial-gradient(circle at 30% 30%,#b37bff,#6f39ff 65%,#3f1a9d);border-radius:50%;width:54px;height:54px;animation:2.2s ease-in-out infinite orbPulse;box-shadow:0 0 30px #b37bff73,0 0 60px #57ff411f}.story-loading-ring{border:3px solid #57ff41b3;border-top-color:#57ff412e;border-radius:50%;width:100px;height:100px;animation:1.7s linear infinite ringSpin;position:absolute}.story-loading-title{color:#f5efff;letter-spacing:-.03em;margin:0 0 12px;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1}.story-loading-message{color:#f5efffbd;min-height:24px;margin:0;font-size:1rem}.typing-cursor{color:#f5efffcc;margin-top:8px;animation:.9s step-end infinite blinkCursor;display:inline-block}@keyframes blinkCursor{0%,50%{opacity:1}51%,to{opacity:0}}@keyframes storyButtonPulse{0%,to{box-shadow:0 20px 60px #965aff73,0 0 25px #57ff4126}50%{box-shadow:0 26px 70px #965aff99,0 0 40px #57ff4159}}@keyframes storyButtonEnter{0%{opacity:0;transform:translateY(10px)scale(.96)}to{opacity:1;transform:translateY(0)}}@keyframes ringSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes orbPulse{0%,to{filter:brightness();transform:scale(1)}50%{filter:brightness(1.08);transform:scale(1.08)}}