:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Comic Sans MS,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);background-attachment:fixed}#root{min-height:100vh}html{scroll-behavior:smooth}.emoji{font-family:"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #4f46e5;outline-offset:2px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Comic Sans MS,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column;padding-top:80px}.story-builder-header{background:linear-gradient(135deg,#a8edea,#fed6e3);padding:3rem 1rem;text-align:center;position:relative;overflow:hidden}.story-builder-header .container{max-width:1200px;margin:0 auto}.header-content-wrapper{position:relative;z-index:1}.header-features{display:flex;justify-content:center;gap:1.5rem;margin:2rem 0;flex-wrap:wrap}.feature-badge{background:#ffffffe6;border-radius:25px;padding:.75rem 1.5rem;display:flex;align-items:center;gap:.5rem;box-shadow:0 4px 15px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:all .3s ease}.feature-badge:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.feature-icon{font-size:1.2rem}.feature-badge span:last-child{font-weight:600;color:#5a67d8;font-size:1.05rem}.pricing-note{margin-top:1.5rem}.cost-badge{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;padding:.5rem 1.5rem;border-radius:20px;font-weight:600;font-size:1rem;box-shadow:0 4px 15px #ff6b6b4d;display:inline-block}.header{background:linear-gradient(135deg,#a8edea,#fed6e3);padding:2rem 1rem;text-align:center;position:relative;overflow:hidden}.story-builder-header:before,.header:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1px);background-size:30px 30px;animation:float 20s linear infinite}@keyframes float{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.home-button{background:#fff3;color:#5a67d8;border:1px solid rgba(90,103,216,.3);border-radius:20px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;gap:.5rem;font-family:inherit}.home-button:hover{background:#ffffff4d;transform:translateY(-1px);box-shadow:0 4px 12px #5a67d833}.header-spacer{width:120px;display:flex;align-items:center;justify-content:flex-end}.user-info{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.user-greeting{font-size:14px;color:#666;font-weight:500}.token-balance{font-size:16px;font-weight:700;color:#ff6b6b;background:#ffffffe6;padding:4px 8px;border-radius:12px;border:2px solid #ff6b6b;box-shadow:0 2px 8px #ff6b6b33}.page-title,.title{font-size:3.5rem;font-weight:700;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.1);position:relative;z-index:1}.sparkle{animation:sparkle 2s ease-in-out infinite alternate;display:inline-block}@keyframes sparkle{0%{transform:rotate(0) scale(1)}to{transform:rotate(180deg) scale(1.2)}}.page-subtitle,.subtitle{font-size:1.4rem;color:#5a67d8;font-weight:600;text-shadow:1px 1px 2px rgba(0,0,0,.1);position:relative;z-index:1}.main-content{flex:1;padding:2rem 1rem;max-width:1200px;margin:0 auto;width:100%}.story-builder{background:#fffffff2;border-radius:25px;padding:2rem;box-shadow:0 20px 40px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section-title{font-size:2.5rem;color:#5a67d8;text-align:center;margin-bottom:2rem;display:flex;align-items:center;justify-content:center;gap:1rem}.magic-wand{animation:wave 2s ease-in-out infinite}@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}.selection-group{margin-bottom:3rem}.selection-group h3{font-size:1.8rem;color:#4a5568;margin-bottom:1rem;text-align:center;font-weight:600}.button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;max-width:800px;margin:0 auto;align-items:stretch}.selection-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:20px;padding:1rem 1.5rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 15px #0003;font-family:inherit;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}.selection-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.selection-button:hover:before{left:100%}.selection-button:hover:not(:disabled){transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #0000004d}.selection-button:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.selection-button.selected{background:linear-gradient(135deg,#ff6b6b,#ee5a24);transform:scale(1.05);box-shadow:0 8px 25px #ff6b6b66;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 8px 25px #ff6b6b66}50%{box-shadow:0 8px 35px #ff6b6b99}}.make-story-section{text-align:center;margin-top:3rem;padding:2rem;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border-radius:25px;border:1px solid rgba(255,255,255,.2)}.requirements-checklist{background:#fffffff2;border-radius:20px;padding:2rem;margin-bottom:2rem;box-shadow:0 8px 25px #0000001a;border:1px solid rgba(90,103,216,.1)}.requirements-checklist h4{color:#5a67d8;font-size:1.3rem;margin-bottom:1.5rem;font-weight:600}.checklist-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;max-width:800px;margin:0 auto}.checklist-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:15px;transition:all .3s ease;font-weight:500}.checklist-item.completed{background:linear-gradient(135deg,#00b894,#00cec9);color:#fff;transform:scale(1.02);box-shadow:0 4px 15px #00b8944d}.checklist-item.pending{background:#ffffffb3;color:#666;border:2px dashed #ddd}.check-icon{font-size:1.2rem;min-width:24px}.cost-info{margin-top:1rem}.insufficient-tokens{color:#ff6b6b;font-weight:600;margin-top:.5rem;background:#ff6b6b1a;padding:.75rem 1rem;border-radius:10px;border:1px solid rgba(255,107,107,.2)}.insufficient-tokens a{color:#ff6b6b;text-decoration:underline;font-weight:700}.helper-text a{color:#5a67d8;text-decoration:underline;font-weight:600}.make-story-button{background:linear-gradient(135deg,#ff6b6b,#ee5a24,#feca57);color:#fff;border:none;border-radius:25px;padding:1.5rem 3rem;font-size:1.5rem;font-weight:700;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 10px 30px #ff6b6b66;font-family:inherit;display:flex;align-items:center;gap:1rem;margin:0 auto}.make-story-button.ready{animation:rainbow 3s ease-in-out infinite}@keyframes rainbow{0%,to{background:linear-gradient(135deg,#ff6b6b,#ee5a24,#feca57)}25%{background:linear-gradient(135deg,#4ecdc4,#44a08d,#096a2e)}50%{background:linear-gradient(135deg,#667eea,#764ba2,#f093fb)}75%{background:linear-gradient(135deg,#ffecd2,#fcb69f,#ff8a80)}}.make-story-button.disabled{background:#a0aec0;cursor:not-allowed;box-shadow:0 4px 15px #0000001a;animation:none}.make-story-button:hover:not(.disabled){transform:translateY(-5px) scale(1.05);box-shadow:0 15px 40px #ff6b6b99}.magic-sparkles{animation:twinkle 1s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}.button-text{font-size:1.3rem}.helper-text{margin-top:1rem;color:#718096;font-size:1.1rem;font-style:italic}.loading-spinner-small{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top:3px solid white;border-radius:50%;animation:spin 1s linear infinite}.footer{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center;padding:1.5rem;font-size:1.1rem;font-weight:500}.cta-guarantee{margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem;color:#e0e0e0;font-size:.9rem}.cta-guarantee .guarantee-icon{font-size:1.5rem;color:#fcc419}@media (max-width: 768px){.title{font-size:2.5rem}.subtitle{font-size:1.2rem}.section-title{font-size:2rem}.button-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem}.selection-button{padding:.8rem 1rem;font-size:1rem}.make-story-button{padding:1.2rem 2rem;font-size:1.2rem;flex-direction:column;gap:.5rem}.button-text{font-size:1.1rem}.story-builder{padding:1.5rem;margin:0 .5rem}.story-builder-header{padding:2rem 1rem}.header-features{gap:1rem;margin:1.5rem 0}.feature-badge{padding:.6rem 1.2rem;font-size:.9rem}.feature-badge span:last-child{font-size:.85rem}.requirements-checklist{padding:1.5rem}.checklist-items{grid-template-columns:1fr;gap:.75rem}.requirements-checklist h4{font-size:1.2rem}}@media (max-width: 480px){.title{font-size:2rem}.button-grid{grid-template-columns:1fr 1fr}.selection-button{font-size:.9rem;padding:.7rem .8rem}.story-builder-header{padding:1.5rem .5rem}.header-features{flex-direction:column;align-items:center;gap:.75rem}.feature-badge{padding:.5rem 1rem}.requirements-checklist{padding:1rem}.requirements-checklist h4{font-size:1.1rem;margin-bottom:1rem}.checklist-item{padding:.6rem .8rem;font-size:.9rem}}.custom-character-container{position:relative;display:flex;width:100%}.custom-character{background:linear-gradient(135deg,#667eea,#764ba2)!important;border:4px solid #fe4dc6!important;box-shadow:0 4px 15px #667eea4d,0 0 0 1px #ffd7004d,inset 0 0 0 2px #18ff0866!important;position:relative;overflow:hidden}.custom-character:before{content:"✨";position:absolute;top:4px;right:8px;font-size:.8rem;opacity:.9;z-index:1;animation:sparkleGlow 2s ease-in-out infinite alternate}@keyframes sparkleGlow{0%{opacity:.7;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.custom-character.selected{background:linear-gradient(135deg,#ff6b6b,#ee5a24)!important;border:4px solid #fff!important;box-shadow:0 6px 20px #ff6b6b66,inset 0 0 0 2px #fff9!important;transform:scale(1.05);animation:pulse 2s ease-in-out infinite}.custom-character.selected:before{content:"⭐";animation:selectedStarPulse 1.5s ease-in-out infinite}@keyframes selectedStarPulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.unselect-custom-button{position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;border:none;border-radius:50%;width:26px;height:26px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .3s ease;box-shadow:0 3px 8px #ff98004d;font-weight:700}.unselect-custom-button:hover{background:linear-gradient(135deg,#f57c00,#e65100);transform:scale(1.1);box-shadow:0 4px 12px #ff980080}.selection-button-container{position:relative;display:inline-block}.unselect-button{position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg,#ff4757,#ff3742);color:#fff;border:2px solid white;border-radius:50%;width:24px;height:24px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #ff47574d;transition:all .2s ease;z-index:10;font-family:inherit}.unselect-button:hover{transform:scale(1.1);box-shadow:0 4px 12px #ff475766}.delete-custom-button{position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg,#ff5252,#f44336);color:#fff;border:none;border-radius:50%;width:26px;height:26px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .3s ease;box-shadow:0 3px 8px #ff52524d;font-weight:700}.delete-custom-button:hover{background:linear-gradient(135deg,#f44336,#d32f2f);transform:scale(1.1);box-shadow:0 4px 12px #ff525280}.add-custom-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:2px dashed rgba(255,255,255,.6);border-radius:20px;padding:.8rem 1.2rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 15px #667eea4d;font-family:inherit;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.4rem;min-height:60px;width:100%;height:100%;box-sizing:border-box}.add-custom-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.add-custom-button:hover:not(:disabled):before{left:100%}.add-custom-button:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:0 8px 25px #667eea66;border-color:#ffffffe6;background:linear-gradient(135deg,#5a67d8,#667eea)}.add-custom-button:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.plus-icon{font-size:1.2rem;font-weight:700;line-height:1}.add-text{font-size:1rem;font-weight:600;text-align:center;line-height:1}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.custom-modal{background:#fff;border-radius:25px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px #0000004d;animation:modalAppear .3s ease-out}@keyframes modalAppear{0%{opacity:0;transform:scale(.8) translateY(-50px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem 2rem;border-radius:25px 25px 0 0;display:flex;justify-content:space-between;align-items:center}.modal-header h2{margin:0;font-size:1.5rem;font-weight:600}.close-button{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:50%;transition:background .2s ease}.close-button:hover{background:#fff3}.modal-body{padding:2rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-weight:600;color:#4a5568;margin-bottom:.5rem;font-size:1.1rem}.text-input{width:100%;padding:.75rem 1rem;border:2px solid #e2e8f0;border-radius:15px;font-size:1rem;font-family:inherit;transition:border-color .2s ease}.text-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.text-area{width:100%;min-height:80px;padding:.75rem 1rem;border:2px solid #e2e8f0;border-radius:15px;font-size:1rem;font-family:inherit;resize:vertical;transition:border-color .2s ease}.text-area:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.button-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem}.option-button{background:#f7fafc;border:2px solid #e2e8f0;border-radius:12px;padding:.5rem .75rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:inherit;text-align:center}.option-button:hover{background:#edf2f7;border-color:#cbd5e0}.option-button.selected{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;transform:scale(1.05)}.modal-footer{padding:1.5rem 2rem;border-top:1px solid #e2e8f0;display:flex;gap:1rem;justify-content:flex-end}.cancel-button{background:#f7fafc;color:#4a5568;border:2px solid #e2e8f0;border-radius:15px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}.cancel-button:hover{background:#edf2f7;border-color:#cbd5e0}.save-button{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:none;border-radius:15px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit;box-shadow:0 4px 15px #48bb784d}.save-button:hover:not(:disabled){background:linear-gradient(135deg,#38a169,#2f855a);transform:translateY(-2px);box-shadow:0 6px 20px #48bb7866}.save-button:disabled{background:#cbd5e0;cursor:not-allowed;transform:none;box-shadow:none}@media (max-width: 768px){.custom-modal{margin:1rem;max-width:calc(100vw - 2rem)}.modal-header{padding:1rem 1.5rem}.modal-body{padding:1.5rem}.button-options{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.add-custom-button{padding:.8rem 1rem;font-size:1rem;min-height:70px}.add-text{font-size:.85rem}.plus-icon{font-size:1.6rem}.custom-character:before{font-size:.7rem;top:3px;left:6px}.unselect-custom-button{width:24px;height:24px;font-size:11px;top:-6px;right:-6px}}@media (max-width: 480px){.button-options{grid-template-columns:1fr 1fr}.option-button{font-size:.8rem;padding:.4rem .6rem}.add-custom-button{padding:.7rem .8rem;font-size:.9rem;min-height:65px}.plus-icon{font-size:1.4rem}.add-text{font-size:.8rem}.custom-character:before{font-size:.6rem;top:2px;left:4px}.unselect-custom-button{width:22px;height:22px;font-size:10px;top:-5px;right:-5px}.unselect-button{width:20px;height:20px;font-size:10px;top:-6px;right:-6px}}.speech-sounds-section{background:linear-gradient(135deg,#e3f2fd,#f3e5f5,#fff3e0);border-radius:20px;padding:2rem;border:2px solid #bbdefb;box-shadow:0 4px 15px #0000000d}.speech-sounds-section h3{color:#1565c0;font-weight:600}.section-description{text-align:center;color:#5e35b1;font-size:1rem;margin-bottom:1.5rem;font-style:italic;font-weight:500}.common-sounds h4{color:#1565c0;font-size:1.3rem;margin-bottom:1rem;text-align:center;font-weight:600}.sound-button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin-bottom:1.5rem}.sound-button{background:linear-gradient(135deg,#42a5f5,#1e88e5);color:#fff;border:none;border-radius:15px;padding:.8rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #42a5f54d}.sound-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #42a5f566;background:linear-gradient(135deg,#1e88e5,#1565c0)}.sound-button.selected{background:linear-gradient(135deg,#4caf50,#388e3c);transform:translateY(-2px);box-shadow:0 4px 15px #4caf5066}.view-all-sounds-button{background:linear-gradient(135deg,#ab47bc,#8e24aa);color:#fff;border:none;border-radius:20px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:block;margin:0 auto;box-shadow:0 4px 15px #ab47bc4d}.view-all-sounds-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ab47bc66;background:linear-gradient(135deg,#8e24aa,#7b1fa2)}.comprehension-section{background:linear-gradient(135deg,#ffeaa7,#fab1a0);border-radius:20px;padding:2rem;margin:2rem 0;box-shadow:0 8px 25px #0000001a}.comprehension-section h3{color:#2d3436;margin-bottom:.5rem}.comprehension-section .section-description{color:#636e72}.toggle-buttons{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem;flex-wrap:wrap}.toggle-button{background:#ffffffe6;border:2px solid #ddd;border-radius:15px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit;color:#2d3436}.toggle-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.toggle-button.selected{background:linear-gradient(135deg,#00b894,#00a085);color:#fff;border-color:#00b894;box-shadow:0 6px 20px #00b8944d}.story-length-section{background:linear-gradient(135deg,#a29bfe,#6c5ce7);border-radius:20px;padding:2rem;margin:2rem 0;box-shadow:0 8px 25px #0000001a}.story-length-section h3{color:#fff;margin-bottom:.5rem;text-align:center}.story-length-section .section-description{color:#ffffffe6;text-align:center}.story-length-buttons{display:flex;gap:1.5rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}.length-button{background:#fffffff2;border:3px solid transparent;border-radius:20px;padding:1.5rem;cursor:pointer;transition:all .3s ease;font-family:inherit;color:#2d3436;text-align:center;min-width:140px;position:relative;overflow:hidden}.length-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}.length-button:hover:before{left:100%}.length-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0003}.length-button.selected{background:linear-gradient(135deg,#fd79a8,#e84393);color:#fff;border-color:#e84393;box-shadow:0 8px 25px #e8439366;transform:translateY(-2px)}.length-icon{font-size:2rem;margin-bottom:.5rem;display:block}.length-title{font-size:1.2rem;font-weight:700;margin-bottom:.3rem}.length-description{font-size:.95rem;margin-bottom:.5rem;opacity:.8}.length-cost{font-size:.9rem;font-weight:600;padding:.3rem .8rem;background:#0000001a;border-radius:12px;display:inline-block}.length-button.selected .length-cost{background:#fff3}.sounds-modal{max-width:800px;max-height:80vh;overflow-y:auto}.sounds-description{color:#6b46c1;font-size:1rem;margin-bottom:2rem;text-align:center;line-height:1.5}.sound-category{margin-bottom:2rem}.sound-category h4{color:#5a67d8;font-size:1.2rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #e2e8f0}.sounds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem}.sound-option-button{background:linear-gradient(135deg,#42a5f5,#1e88e5);color:#fff;border:none;border-radius:12px;padding:.8rem 1rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;text-align:left;box-shadow:0 2px 8px #42a5f533}.sound-option-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #42a5f54d;background:linear-gradient(135deg,#1e88e5,#1565c0)}.sound-option-button.selected{background:linear-gradient(135deg,#4caf50,#388e3c);transform:translateY(-1px);box-shadow:0 4px 12px #4caf504d}.modal-content{background:#fff;border-radius:25px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px #0000004d;animation:modalAppear .3s ease-out}.modal-header h3{margin:0;font-size:1.5rem;font-weight:600}.selected-count{color:#5a67d8;font-weight:600;font-size:1rem}.done-button{background:linear-gradient(135deg,#00b894,#00a085);color:#fff;border:none;border-radius:12px;padding:.8rem 2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.done-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00b8944d}@media (max-width: 768px){.sound-button-grid{grid-template-columns:repeat(2,1fr)}.toggle-buttons{flex-direction:column}.sounds-grid{grid-template-columns:repeat(2,1fr)}.speech-sounds-section,.comprehension-section{padding:1.5rem}.story-length-buttons{flex-direction:column;align-items:center;gap:1rem}.length-button{min-width:200px}}.speech-sounds-section,.comprehension-section{margin-bottom:2rem}.story-generation-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem}.story-generation-modal{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:25px;padding:2rem;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px #0000004d;animation:modalSlideIn .5s ease-out;color:#fff}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.story-generation-modal .modal-header{text-align:center;margin-bottom:2rem;border-bottom:2px solid rgba(255,255,255,.2);padding-bottom:1rem}.story-generation-modal .modal-header h2{font-size:2.5rem;margin-bottom:.5rem;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.story-generation-modal .modal-header p{font-size:1.2rem;opacity:.9;color:#ffffffe6}.story-generation-modal .modal-body{display:flex;flex-direction:column;gap:2rem}.progress-timeline{background:#ffffff1a;border-radius:15px;padding:1.5rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.timeline-header{display:flex;justify-content:center;align-items:center;margin-bottom:1.5rem}.timeline-header h3{font-size:1.5rem;color:#fff;margin:0}.timeline-bar{background:#fff3;border-radius:10px;height:20px;overflow:hidden;position:relative}.timeline-progress{background:linear-gradient(90deg,gold,#ff6b6b,#4ecdc4);height:100%;border-radius:10px;transition:width .3s ease;position:relative;animation:progressGlow 2s ease-in-out infinite alternate}.timeline-progress[style*="100%"]{animation:progressGlow 2s ease-in-out infinite alternate,progressPulse 1.5s ease-in-out infinite}@keyframes progressGlow{0%{box-shadow:0 0 10px #ffd70080}to{box-shadow:0 0 20px #ffd700cc}}@keyframes progressPulse{0%,to{background:linear-gradient(90deg,gold,#ff6b6b,#4ecdc4)}50%{background:linear-gradient(90deg,#ff6b6b,#4ecdc4,gold)}}.timeline-header .cute-message{font-size:1.4rem;color:#fff;font-weight:600;text-align:center;animation:cuteMessageFloat 3s ease-in-out infinite;background:#ffffff1a;padding:1.5rem;border-radius:15px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.2);width:100%;max-width:600px}@keyframes cuteMessageFloat{0%,to{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(-5px) scale(1.02);opacity:.9}}.steps-progress{background:#ffffff1a;border-radius:15px;padding:1.5rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.steps-progress h3{font-size:1.5rem;color:#fff;margin-bottom:1rem}.steps-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.step-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:10px;transition:all .3s ease}.step-item.completed{background:#4caf5033;border:1px solid rgba(76,175,80,.4)}.step-item.active{background:#ffd70033;border:1px solid rgba(255,215,0,.4);animation:activeStepPulse 2s ease-in-out infinite}.step-item.pending{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);opacity:.7}@keyframes activeStepPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.step-icon{font-size:1.2rem;width:1.8rem;text-align:center}.step-label{flex:1;font-size:.9rem;font-weight:500;color:#fff;line-height:1.3}.step-spinner{width:18px;height:18px}.loading-spinner-tiny{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top:2px solid #ffd700;border-radius:50%;animation:spin 1s linear infinite}.debug-section{background:#0003;border-radius:15px;padding:1.5rem;border:1px solid rgba(255,255,255,.1)}.debug-section h3{font-size:1.3rem;color:gold;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.debug-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.5rem}.debug-item{font-family:Courier New,monospace;font-size:.9rem;color:#ffffffe6;padding:.5rem;background:#ffffff0d;border-radius:5px;word-break:break-all}.debug-item strong{color:gold}.modal-body .debug-section{background:#0000000d;color:#333;border:1px solid rgba(0,0,0,.1)}.modal-body .debug-section h4{color:#5a67d8}.modal-body .debug-item{color:#333;background:#00000005;border:1px solid rgba(0,0,0,.1)}.modal-body .debug-item strong{color:#2d3748}.loading-messages{text-align:center;padding:1rem}.loading-message{font-size:1.3rem;color:#fff;font-weight:500;animation:messageFloat 3s ease-in-out infinite}@keyframes messageFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.story-generation-modal .modal-footer{text-align:center;margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.2)}.modal-note{font-size:1rem;color:#fffc;font-style:italic}@media (max-width: 768px){.story-generation-modal{margin:1rem;padding:1.5rem;max-height:95vh}.story-generation-modal .modal-header h2{font-size:2rem}.timeline-header{flex-direction:column;gap:.5rem;align-items:center}.debug-info{grid-template-columns:1fr}.step-item{padding:.75rem}.step-label{font-size:1rem}.timeline-header .cute-message{font-size:1.2rem;padding:1.2rem}}@media (max-width: 480px){.story-generation-modal{margin:.5rem;padding:1rem}.story-generation-modal .modal-header h2{font-size:1.8rem}.loading-message{font-size:1.1rem}.timeline-header .cute-message{font-size:1.1rem;padding:1rem}}.view-more-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:20px;padding:1rem 1.5rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 4px 15px #667eea4d;font-family:inherit;text-align:center;flex-direction:column;width:100%;height:100%;box-sizing:border-box}.view-more-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.view-more-button.selected{background:linear-gradient(135deg,#ff6b6b,#ee5a24);transform:scale(1.05);box-shadow:0 8px 25px #ff6b6b66;animation:pulse 2s ease-in-out infinite}.view-more-button:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.view-more-button .selected-text{font-size:.9rem;opacity:.9;margin-top:.2rem}@media (max-width: 768px){.view-more-button{padding:.8rem 1.5rem;font-size:1rem}}@media (max-width: 480px){.view-more-button{padding:.7rem 1rem;font-size:.9rem}}.custom-characters-section{display:flex;flex-direction:column;gap:2rem}.character-category{background:#ffffff80;border-radius:12px;padding:1.5rem;border:2px solid rgba(90,103,216,.1)}.character-category h4{margin:0 0 1rem;color:#5a67d8;font-size:1.1rem;font-weight:600}.characters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.character-card{background:#fff;border-radius:8px;padding:1rem;border:1px solid rgba(0,0,0,.1);transition:all .3s ease;position:relative}.character-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.character-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.character-header h5{margin:0;color:#2d3748;font-size:1rem;font-weight:600;flex:1}.character-actions{display:flex;gap:.5rem}.edit-character-button,.delete-character-button{background:none;border:none;font-size:1rem;cursor:pointer;padding:.25rem;border-radius:4px;transition:all .2s ease}.edit-character-button:hover{background:#3498db1a}.delete-character-button:hover{background:#e74c3c1a}.character-description{color:#666;font-size:.9rem;margin:.5rem 0;font-style:italic}.character-details{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}.detail-tag{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:500}.character-meta{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(0,0,0,.1)}.character-date{color:#666;font-size:.8rem}.details-display{background:#0000000d;border-radius:8px;padding:1rem;margin:.5rem 0}.detail-item{margin-bottom:.5rem}.detail-item:last-child{margin-bottom:0}.detail-edit-item{margin-bottom:1.5rem}.detail-edit-item:last-child{margin-bottom:0}.detail-edit-item label{display:block;font-weight:600;color:#4a5568;margin-bottom:.5rem;font-size:1rem}.detail-edit-item .button-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;margin-top:.5rem}.detail-edit-item .option-button{background:#f7fafc;border:2px solid #e2e8f0;border-radius:8px;padding:.5rem .75rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:inherit;text-align:center}.detail-edit-item .option-button:hover{background:#edf2f7;border-color:#cbd5e0}.detail-edit-item .option-button.selected{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;transform:scale(1.02)}.note{color:#666;font-size:.85rem;font-style:italic;margin-top:.5rem}@media (max-width: 768px){.characters-grid{grid-template-columns:1fr}.character-category{padding:1rem}.custom-characters-section{gap:1.5rem}.detail-edit-item .button-options{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.4rem}.detail-edit-item .option-button{padding:.4rem .6rem;font-size:.8rem}}@media (max-width: 480px){.detail-edit-item .button-options{grid-template-columns:1fr 1fr;gap:.3rem}.detail-edit-item .option-button{padding:.35rem .5rem;font-size:.75rem}.detail-edit-item{margin-bottom:1rem}.detail-edit-item label{font-size:.9rem;margin-bottom:.4rem}}.game-toggle-section{margin:1.5rem 0;text-align:center}.game-toggle-button{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;border:none;border-radius:25px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ff6b6b4d;font-family:inherit;display:flex;align-items:center;gap:.5rem;margin:0 auto}.game-toggle-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.game-toggle-button.active{background:linear-gradient(135deg,#4ecdc4,#44a08d);box-shadow:0 4px 15px #4ecdc44d}.game-toggle-button.active:hover{box-shadow:0 6px 20px #4ecdc466}.magic-hat-game{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;padding:2rem;margin:1rem 0;text-align:center;color:#fff;box-shadow:0 8px 32px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.game-header{margin-bottom:1.5rem}.game-header h4{font-size:1.5rem;margin-bottom:.5rem;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.game-header p{font-size:1.1rem;margin-bottom:1rem;opacity:.9}.game-score{background:#fff3;border-radius:15px;padding:.5rem 1rem;display:inline-block;font-weight:600;font-size:1.1rem;border:1px solid rgba(255,255,255,.3)}.hats-container{display:flex;justify-content:center;gap:2rem;margin:2rem 0;flex-wrap:wrap}.magic-hat{background:#ffffff1a;border:3px solid rgba(255,255,255,.3);border-radius:20px;padding:1.5rem;cursor:pointer;transition:all .3s ease;position:relative;min-width:100px;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.magic-hat:hover:not(:disabled){transform:translateY(-5px) scale(1.05);border-color:#fff9;background:#fff3;box-shadow:0 10px 25px #0003}.magic-hat:disabled{cursor:not-allowed;opacity:.7}.magic-hat.selected{border-color:gold;background:#ffd70033;box-shadow:0 0 20px #ffd70080}.magic-hat.correct{border-color:#4ecdc4;background:#4ecdc44d;animation:correctHat .6s ease-in-out}.magic-hat.wrong{border-color:#ff6b6b;background:#ff6b6b4d;animation:wrongHat .6s ease-in-out}@keyframes correctHat{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes wrongHat{0%{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}to{transform:translate(0)}}.hat-emoji{font-size:3rem;margin-bottom:.5rem;transition:all .3s ease}.magic-hat:hover:not(:disabled) .hat-emoji{transform:rotate(10deg)}.rabbit-reveal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;animation:rabbitPop .5s ease-out}@keyframes rabbitPop{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}50%{transform:translate(-50%,-50%) scale(1.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.game-result{margin:1.5rem 0;padding:1rem;border-radius:15px;font-weight:600;font-size:1.1rem;animation:resultSlide .5s ease-out}@keyframes resultSlide{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.game-result.won{background:#4ecdc44d;border:2px solid #4ecdc4;color:#4ecdc4}.game-result.lost{background:#ff6b6b4d;border:2px solid #ff6b6b;color:#ff6b6b}.win-message,.lose-message{display:flex;align-items:center;justify-content:center;gap:.5rem}.result-emoji{font-size:1.5rem;animation:bounce .6s ease-in-out infinite alternate}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-5px)}}.game-instructions{margin-top:1.5rem;opacity:.8}.game-instructions p{margin:.5rem 0;font-size:.95rem}@media (max-width: 768px){.magic-hat-game{padding:1.5rem;margin:.5rem 0}.hats-container{gap:1rem}.magic-hat{min-width:80px;min-height:80px;padding:1rem}.hat-emoji{font-size:2.5rem}.game-header h4{font-size:1.3rem}.game-header p,.game-result{font-size:1rem}.game-instructions p{font-size:.9rem}}@media (max-width: 480px){.magic-hat-game{padding:1rem}.hats-container{gap:.5rem}.magic-hat{min-width:70px;min-height:70px;padding:.75rem}.hat-emoji{font-size:2rem}.game-header h4{font-size:1.2rem}.game-toggle-button{padding:.6rem 1.2rem;font-size:.9rem}}.text-input.error,.text-area.error{border-color:#ff6b6b;background-color:#ff6b6b0d}.text-input.error:focus,.text-area.error:focus{border-color:#ff6b6b;box-shadow:0 0 0 3px #ff6b6b1a}.validation-error{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;padding:.75rem 1rem;border-radius:12px;margin-top:.5rem;font-size:.9rem;font-weight:600;box-shadow:0 4px 12px #ff6b6b4d;animation:errorSlideIn .3s ease;display:flex;align-items:center;gap:.5rem}.validation-error:before{content:"⚠️";font-size:1.1rem}@keyframes errorSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.validation-warning{background:linear-gradient(135deg,#feca57,#ff9ff3);color:#2d3748;padding:.6rem .8rem;border-radius:10px;margin-top:.5rem;font-size:.85rem;box-shadow:0 3px 10px #feca574d;animation:warningSlideIn .3s ease;border:1px solid rgba(254,202,87,.5)}@keyframes warningSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.warning-item{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;font-weight:600}.warning-item:last-child{margin-bottom:0}.suggestion-item{display:flex;align-items:center;gap:.5rem;margin-top:.3rem;font-style:italic;color:#4a5568;font-weight:500}.text-input.valid,.text-area.valid{border-color:#48bb78;background-color:#48bb780d}.text-input.valid:focus,.text-area.valid:focus{border-color:#48bb78;box-shadow:0 0 0 3px #48bb781a}.validation-success{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;padding:.5rem .8rem;border-radius:10px;margin-top:.5rem;font-size:.85rem;font-weight:600;box-shadow:0 3px 10px #48bb784d;animation:successSlideIn .3s ease;display:flex;align-items:center;gap:.5rem}.validation-success:before{content:"✅";font-size:1rem}@keyframes successSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.save-button:disabled{background:#cbd5e0;color:#a0aec0;cursor:not-allowed;transform:none;box-shadow:none}.save-button:disabled:hover{background:#cbd5e0;transform:none;box-shadow:none}.character-count{font-size:.75rem;color:#718096;text-align:right;margin-top:.25rem}.character-count.warning{color:#feca57;font-weight:600}.character-count.error{color:#ff6b6b;font-weight:600}@media (max-width: 768px){.validation-error,.validation-warning,.validation-success{padding:.6rem .8rem;font-size:.8rem}.warning-item,.suggestion-item{font-size:.8rem}}@media (max-width: 480px){.validation-error,.validation-warning,.validation-success{padding:.5rem .7rem;font-size:.75rem}.warning-item,.suggestion-item{font-size:.75rem}}.hero-image-showcase{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.story-image-container{width:420px;height:500px;background:#fff;border-radius:4px 12px 12px 4px;box-shadow:0 12px 40px #00000040,inset -8px 0 12px #00000014,8px 0 20px #00000026;overflow:hidden;display:flex;flex-direction:column;position:relative;transform:perspective(1000px) rotateY(-5deg) rotateX(2deg);transition:all .4s ease}.story-image-container:before{content:"";position:absolute;left:0;top:0;bottom:0;width:20px;background:linear-gradient(to right,#5a4fcf,#667eea,#764ba2,#667eea,#5a4fcf);border-radius:4px 0 0 4px;box-shadow:inset -2px 0 4px #0000004d,inset 2px 0 6px #ffffff1a,4px 0 8px #0003;z-index:3}.story-image-container:after{content:"";position:absolute;left:20px;top:0;bottom:0;width:8px;background:linear-gradient(to right,#00000026,#0000000d,#ffffff1a);z-index:2}.story-image-container .page-depth{position:absolute;right:0;top:4px;bottom:4px;width:6px;background:repeating-linear-gradient(to bottom,#f8f9fa,#f8f9fa 2px,#e9ecef 2px,#e9ecef 3px);border-radius:0 8px 8px 0;box-shadow:inset 2px 0 4px #0000001a;z-index:1}.story-image-container:hover{transform:perspective(1000px) rotateY(-1deg) rotateX(1deg);box-shadow:0 16px 50px #0000004d,inset -8px 0 12px #00000014,12px 0 25px #0003}.hero-story-image{width:calc(100% - 28px);height:380px;object-fit:cover;border-radius:0 8px 0 0;margin-left:28px;position:relative;z-index:1}.image-caption{padding:20px 20px 20px 48px;font-size:1.3rem;line-height:1.6;color:#666;font-style:italic;text-align:center;background:#fff;border-radius:0 0 8px;line-height:1.4;position:relative;z-index:1;box-shadow:inset 0 1px 3px #0000000d}@media (max-width: 768px){.story-image-container{width:350px;height:420px;transform:perspective(800px) rotateY(-3deg) rotateX(1deg)}.story-image-container:before{width:16px}.story-image-container:after{left:16px;width:6px}.story-image-container:hover{transform:perspective(800px) rotateY(0) rotateX(0)}.hero-story-image{height:320px;margin-left:22px;width:calc(100% - 22px)}.image-caption{padding:16px 16px 16px 38px;font-size:13px}}@media (max-width: 480px){.story-image-container{width:250px;height:300px;transform:perspective(600px) rotateY(-2deg)}.story-image-container:hover{transform:perspective(600px) rotateY(0)}.story-image-container:before{width:14px}.story-image-container:after{left:14px;width:5px}.hero-story-image{height:200px;margin-left:19px;width:calc(100% - 19px)}.image-caption{padding:12px 12px 12px 31px;font-size:12px}}.full-story-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:4rem 0;margin:2rem 0}.story-reader{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 10px 30px #0000001a;max-width:1200px;margin:0 auto}.story-reader-header{text-align:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #e9ecef}.story-info h3{font-size:2rem;color:#5a67d8;margin-bottom:1rem}.story-details{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.detail-tag{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.5rem 1rem;border-radius:15px;font-size:.9rem;font-weight:600;box-shadow:0 2px 8px #667eea4d}.story-pages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}.story-page-item{background:#fff;border-radius:15px;padding:1rem;box-shadow:0 4px 15px #0000001a;transition:all .3s ease;border:2px solid #f1f3f4}.story-page-item:hover{transform:translateY(-3px);box-shadow:0 8px 25px #00000026;border-color:#667eea}.page-number{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;padding:.3rem .8rem;border-radius:12px;font-size:.8rem;font-weight:600;display:inline-block;margin-bottom:.75rem;box-shadow:0 2px 8px #ff6b6b4d}.story-page-img{width:100%;height:200px;object-fit:cover;border-radius:10px;margin-bottom:.75rem;border:2px solid #f1f3f4;transition:all .3s ease}.story-page-item:hover .story-page-img{border-color:#667eea}.page-text{color:#4a5568;font-size:.95rem;line-height:1.5;font-style:italic;padding:.5rem;background:#667eea0d;border-radius:8px;border-left:3px solid #667eea}.story-analysis{background:linear-gradient(135deg,#e3f2fd,#f3e5f5);border-radius:15px;padding:2rem;margin:2rem 0;border:2px solid #bbdefb}.story-analysis h4{color:#1565c0;font-size:1.5rem;margin-bottom:1.5rem;text-align:center}.analysis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.analysis-item{background:#fff;padding:1rem;border-radius:10px;display:flex;align-items:center;gap:.75rem;box-shadow:0 2px 8px #0000000d;border:1px solid rgba(21,101,192,.1)}.analysis-icon{font-size:1.5rem;background:linear-gradient(135deg,#42a5f5,#1e88e5);color:#fff;width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.analysis-item div{flex:1}.analysis-item strong{color:#1565c0;font-size:1rem;display:block;margin-bottom:.25rem}.analysis-item p{color:#666;font-size:.9rem;margin:0}.story-cta{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;border-radius:15px;text-align:center;margin-top:2rem}.story-cta h4{font-size:1.5rem;margin-bottom:.5rem;color:#fff}.story-cta p{font-size:1.1rem;margin-bottom:1.5rem;opacity:.9}@media (max-width: 768px){.full-story-section{padding:2rem 0}.story-reader{padding:1.5rem;margin:0 1rem}.story-info h3{font-size:1.5rem}.story-pages-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.story-page-img{height:180px}.detail-tag{font-size:.8rem;padding:.4rem .8rem}.analysis-grid{grid-template-columns:1fr;gap:.75rem}.story-analysis,.story-cta{padding:1.5rem}}@media (max-width: 480px){.story-reader{padding:1rem;margin:0 .5rem}.story-pages-grid{grid-template-columns:1fr;gap:1rem}.story-page-img{height:160px}.page-text{font-size:.85rem}.detail-tag{font-size:.75rem;padding:.3rem .6rem}.story-details{gap:.5rem}.analysis-item{padding:.75rem}.analysis-icon{width:2.5rem;height:2.5rem;font-size:1.2rem}.analysis-item strong{font-size:.9rem}.analysis-item p{font-size:.8rem}}.audience-tabs{display:flex;justify-content:center;gap:1.5rem;margin-bottom:3rem;flex-wrap:wrap}.tab{background:#fff;border:3px solid #e2e8f0;border-radius:30px;padding:1.5rem 2.5rem;cursor:pointer;transition:all .3s ease;font-weight:600;font-size:1.2rem;color:#4a5568;box-shadow:0 4px 15px #0000000d}.tab.active{background:linear-gradient(135deg,#667eea,#4299e1);color:#fff;border-color:transparent;transform:translateY(-3px);box-shadow:0 10px 30px #667eea66;font-size:1.3rem}.tab:hover:not(.active){border-color:#667eea;transform:translateY(-2px);box-shadow:0 6px 20px #667eea33}.audience-content{max-width:1000px;margin:0 auto;text-align:left}.audience-text h3{font-size:2.2rem;margin-bottom:2.5rem;color:#2d3748;text-align:center}.benefits-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2.5rem;margin-top:2rem;justify-content:center;max-width:1000px;margin-left:auto;margin-right:auto}.benefit{background:#fffffff2;border-radius:25px;padding:2.5rem;display:flex;gap:2rem;align-items:center;transition:all .3s ease;border:2px solid rgba(102,126,234,.1);box-shadow:0 8px 25px #00000014;text-align:center;flex-direction:column}.benefit:hover{transform:translateY(-8px);box-shadow:0 15px 40px #667eea40;border-color:#667eea66}.benefit-icon{font-size:3.5rem;flex-shrink:0;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;width:80px;height:80px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 25px #667eea66;margin-bottom:1rem}.benefit h4{margin:0 0 1rem;color:#2d3748;font-weight:800;font-size:1.5rem;line-height:1.2}.benefit p{margin:0;color:#4a5568;line-height:1.7;font-size:1.1rem;font-weight:500;max-width:350px}.audience-visual,.professional-dashboard,.family-scene,.classroom-scene{display:none}.phonetics-content{max-width:1200px;margin:0 auto}.phonetics-header h3{font-size:2.2rem;margin-bottom:1rem;color:#2d3748}.phonetics-header p{font-size:1.2rem;color:#5a6670;max-width:800px;margin:0 auto;line-height:1.6}.phonetics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:3rem}.phonetics-category{background:#ffffffe6;border-radius:20px;padding:2rem;border:2px solid rgba(102,126,234,.1);transition:all .3s ease;box-shadow:0 4px 15px #0000000d}.phonetics-category:hover{transform:translateY(-5px);box-shadow:0 8px 30px #667eea33;border-color:#667eea4d}.phonetics-category h4{color:#2d3748;font-size:1.4rem;margin-bottom:1.5rem;font-weight:700;text-align:center;padding-bottom:1rem;border-bottom:3px solid #667eea}.sounds-list{display:flex;flex-wrap:wrap;gap:.8rem}.sound-item{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.6rem 1rem;border-radius:12px;font-size:.9rem;font-weight:600;transition:all .3s ease;cursor:pointer;box-shadow:0 2px 8px #667eea4d}.sound-item:hover{transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}.feature-highlight{background:#ffffffe6;border-radius:15px;padding:1.5rem;display:flex;gap:1rem;align-items:flex-start;transition:all .3s ease;border:2px solid rgba(102,126,234,.1);box-shadow:0 4px 15px #0000000d}.feature-highlight:hover{transform:translateY(-3px);box-shadow:0 6px 20px #667eea33;border-color:#667eea4d}.feature-highlight .feature-icon{font-size:2rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.feature-highlight h4{margin:0 0 .5rem;color:#2d3748;font-weight:700;font-size:1.1rem}.feature-highlight p{margin:0;color:#5a6670;line-height:1.5;font-size:.95rem}@media (max-width: 768px){.audience-tabs{gap:1rem}.tab{padding:1.2rem 2rem;font-size:1.1rem}.tab.active{font-size:1.2rem}.audience-text h3{font-size:1.8rem}.benefits-list{grid-template-columns:1fr;gap:1.5rem}.benefit{padding:1.5rem}.benefit-icon{font-size:2rem;width:50px;height:50px}.phonetics-grid{grid-template-columns:1fr;gap:1.5rem}.phonetics-features{grid-template-columns:1fr;gap:1rem}}@media (max-width: 480px){.tab{padding:1rem 1.5rem;font-size:1rem}.tab.active{font-size:1.1rem}.audience-text h3{font-size:1.6rem}.benefit{padding:1.2rem;flex-direction:column;text-align:center}.benefit-icon{align-self:center}}.story-summary{padding:0}.modal-actions{padding:1.5rem 2rem;border-bottom:1px solid #e2e8f0;display:flex;gap:1rem;justify-content:center;background:#fffffff2}.summary-section{background:#ffffffe6;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;border:1px solid rgba(90,103,216,.1);box-shadow:0 2px 8px #0000000d}.summary-section h4{color:#5a67d8;font-size:1.2rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.summary-item{display:flex;flex-direction:column;gap:.25rem}.summary-item strong{color:#4a5568;font-size:.9rem;font-weight:600}.feature-list{display:flex;flex-direction:column;gap:.75rem}.feature-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#744ba20d;border-radius:8px;border-left:4px solid #764ba2}.feature-icon{font-size:1.2rem;min-width:24px}.cost-section{background:linear-gradient(135deg,#ff6b6b1a,#ee5a241a);border:1px solid rgba(255,107,107,.2)}.cost-breakdown{display:flex;flex-direction:column;gap:.5rem}.cost-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(0,0,0,.05)}.cost-item:last-child{border-bottom:none}.cost-total{padding-top:.75rem;border-top:2px solid rgba(255,107,107,.3);margin-top:.5rem;font-size:1.1rem}.expectation-list{display:flex;flex-direction:column;gap:.75rem}.expectation-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#4cc9c40d;border-radius:8px;border-left:4px solid #4ecdc4}.expectation-icon{font-size:1.2rem;min-width:24px}@media (max-width: 768px){.summary-grid{grid-template-columns:1fr;gap:.75rem}.summary-section{padding:1rem;margin-bottom:1rem}.summary-section h4{font-size:1.1rem}.feature-item,.expectation-item{padding:.5rem;gap:.5rem}.cost-item{font-size:.9rem}.modal-actions{padding:1rem 1.5rem;gap:.75rem}}@media (max-width: 480px){.summary-section{padding:.75rem}.summary-section h4{font-size:1rem}.feature-item,.expectation-item{flex-direction:column;align-items:flex-start;text-align:left}.feature-icon,.expectation-icon{align-self:center}.cost-breakdown{font-size:.85rem}.modal-actions{padding:1rem;flex-direction:column;gap:.75rem}.modal-actions .cancel-button,.modal-actions .save-button{width:100%;text-align:center}}.social-skills-section{background:linear-gradient(135deg,#e3f2fd,#f3e5f5,#fff3e0);border-radius:20px;padding:2rem;border:2px solid #bbdefb;box-shadow:0 4px 15px #0000000d}.social-skills-section h3{color:#1565c0;font-weight:600}.social-skills-section .section-description{text-align:center;color:#5e35b1;font-size:1rem;margin-bottom:1.5rem;font-style:italic;font-weight:500}.social-skills-section .social-skills-grid{margin-top:1rem}.social-skills-section .skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin-bottom:1.5rem}.social-skill-button{background:linear-gradient(135deg,#42a5f5,#1e88e5);color:#fff;border:none;border-radius:15px;padding:.8rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-align:left;line-height:1.4;box-shadow:0 2px 8px #42a5f54d}.social-skill-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #42a5f566;background:linear-gradient(135deg,#1e88e5,#1565c0)}.social-skill-button.selected{background:linear-gradient(135deg,#4caf50,#388e3c);transform:translateY(-2px);box-shadow:0 4px 15px #4caf5066}.social-skill-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.selected-skills-count{text-align:center;padding:.75rem;background:linear-gradient(135deg,#ab47bc,#8e24aa);color:#fff;border-radius:15px;font-weight:600;font-size:.95rem;box-shadow:0 4px 15px #ab47bc4d;border:none;margin:0 auto;display:inline-block}@media (max-width: 768px){.social-skills-section{padding:1.5rem}.social-skills-section .skills-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}.social-skill-button{font-size:.85rem;padding:.65rem .85rem}}.story-builder-landing{max-width:1200px;margin:0 auto;padding:2rem 1rem 4rem}.landing-hero{text-align:center;margin-bottom:4rem}.landing-title{font-size:2.5rem;font-weight:700;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.landing-description{font-size:1.2rem;color:#666;max-width:600px;margin:0 auto;line-height:1.6}.landing-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-bottom:4rem}.feature-card{background:#fffffff2;border-radius:20px;padding:2rem;text-align:center;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px #00000026}.feature-icon-large{font-size:3rem;margin-bottom:1rem;display:block}.feature-card h3{font-size:1.4rem;font-weight:700;color:#333;margin-bottom:.75rem}.feature-card p{color:#666;line-height:1.5;font-size:1rem}.landing-preview{background:#fffffff2;border-radius:20px;padding:2.5rem;margin-bottom:4rem;box-shadow:0 8px 32px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.landing-preview h3{font-size:1.8rem;font-weight:700;color:#333;text-align:center;margin-bottom:2rem}.preview-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.preview-category h4{font-size:1.2rem;font-weight:600;color:#5a67d8;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.preview-items{display:flex;flex-wrap:wrap;gap:.5rem}.preview-items span{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.4rem .8rem;border-radius:15px;font-size:.9rem;font-weight:500;box-shadow:0 2px 8px #667eea33}.landing-cta{background:linear-gradient(135deg,#ff6b6b,#ee5a24);border-radius:20px;padding:3rem 2rem;text-align:center;color:#fff;margin-bottom:3rem;box-shadow:0 12px 40px #ff6b6b4d}.cta-content h3{font-size:2rem;font-weight:700;margin-bottom:.75rem}.cta-content p{font-size:1.1rem;margin-bottom:2rem;opacity:.95}.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}.cta-button{padding:1rem 2rem;border-radius:25px;font-size:1.1rem;font-weight:600;border:none;cursor:pointer;transition:all .3s ease;font-family:inherit;display:flex;align-items:center;gap:.5rem}.cta-button.primary{background:#fff;color:#ff6b6b;box-shadow:0 4px 15px #ffffff4d}.cta-button.primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #fff6}.cta-button.secondary{background:#fff3;color:#fff;border:2px solid white;box-shadow:0 4px 15px #0000001a}.cta-button.secondary:hover{background:#ffffff4d;transform:translateY(-2px)}.cta-note{font-size:.95rem;opacity:.9;margin:0}.landing-testimonial{background:#fffffff2;border-radius:20px;padding:2.5rem;text-align:center;box-shadow:0 8px 32px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.testimonial-content blockquote{font-size:1.3rem;font-style:italic;color:#333;margin-bottom:1rem;line-height:1.6;quotes:'"' '"'}.testimonial-content blockquote:before{content:open-quote;font-size:2rem;color:#5a67d8;vertical-align:-.2em}.testimonial-content blockquote:after{content:close-quote;font-size:2rem;color:#5a67d8;vertical-align:-.2em}.testimonial-content cite{font-size:1rem;color:#666;font-weight:600}@media (max-width: 768px){.story-builder-landing{padding:1.5rem 1rem 3rem}.landing-title{font-size:2rem;flex-direction:column;gap:.25rem}.landing-description{font-size:1.1rem}.landing-features{grid-template-columns:1fr;gap:1.5rem;margin-bottom:3rem}.feature-card{padding:1.5rem}.feature-icon-large{font-size:2.5rem}.landing-preview{padding:2rem 1.5rem;margin-bottom:3rem}.preview-options{grid-template-columns:1fr;gap:1.5rem}.landing-cta{padding:2.5rem 1.5rem;margin-bottom:2rem}.cta-content h3{font-size:1.7rem}.cta-buttons{flex-direction:column;align-items:center}.cta-button{width:100%;max-width:280px;justify-content:center}.landing-testimonial{padding:2rem 1.5rem}.testimonial-content blockquote{font-size:1.2rem}}@media (max-width: 480px){.story-builder-landing{padding:1rem .75rem 2rem}.landing-title{font-size:1.8rem}.landing-description{font-size:1rem}.feature-card{padding:1.25rem}.feature-card h3{font-size:1.2rem}.feature-card p{font-size:.95rem}.landing-preview{padding:1.5rem 1rem}.landing-preview h3{font-size:1.5rem}.preview-items span{font-size:.85rem;padding:.3rem .6rem}.landing-cta{padding:2rem 1rem}.cta-content h3{font-size:1.5rem}.cta-content p{font-size:1rem}.cta-button{padding:.9rem 1.5rem;font-size:1rem}.cta-note{font-size:.9rem}.landing-testimonial{padding:1.5rem 1rem}.testimonial-content blockquote{font-size:1.1rem}.testimonial-content cite{font-size:.9rem}}.storybook-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:1rem;padding-top:calc(80px + 1rem);font-family:Comic Sans MS,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif}.storybook-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#fffffff2;border-radius:20px;margin-bottom:2rem;box-shadow:0 10px 30px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-button{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;border:none;border-radius:15px;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit;display:flex;align-items:center;gap:.5rem}.back-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #ff6b6b66}.story-title{font-size:2rem;color:#5a67d8;text-align:center;margin:0;font-weight:700;flex:1}.header-controls{display:flex;align-items:center;gap:1rem}.book-mode-toggle{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:15px;padding:.8rem 1.2rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit;display:flex;align-items:center;gap:.5rem}.book-mode-toggle:hover{transform:translateY(-2px);box-shadow:0 8px 20px #8b5cf666}.book-icon{font-size:1.1rem}.page-counter{background:linear-gradient(135deg,#4ecdc4,#44a08d);color:#fff;padding:.5rem 1rem;border-radius:20px;font-weight:600;font-size:.9rem}.book-mode-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:radial-gradient(ellipse at center,#3e2a1a,#1a0f08 70%),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23ffffff" opacity="0.02"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.02"/><circle cx="50" cy="10" r="0.5" fill="%23ffffff" opacity="0.03"/><circle cx="10" cy="90" r="0.5" fill="%23ffffff" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');z-index:1000;overflow:hidden;font-family:Comic Sans MS,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif}.book-mode-header{position:absolute;top:0;left:0;right:0;height:60px;background:#000c;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;z-index:1001;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.exit-book-mode{background:#fff3;border:none;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all .3s ease}.exit-book-mode:hover{background:#ffffff4d;transform:scale(1.1)}.book-mode-title{color:#fff;font-size:1.2rem;font-weight:600}.book-mode-counter{color:#fffc;font-size:.9rem}.book-mode-main{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:80px 1rem 100px;perspective:1200px}.book-spread{display:flex;position:relative;width:90vw;max-width:1200px;height:70vh;max-height:600px;transition:all .2s ease;transform-style:preserve-3d;transform:rotateY(-2deg) rotateX(5deg)}.book-spread:before{content:"";position:absolute;top:-8px;left:calc(50% - 15px);width:30px;height:calc(100% + 16px);background:linear-gradient(to right,#8b4513,sienna,peru 30%,#daa520,peru 70%,sienna,#8b4513);border-radius:6px;box-shadow:0 0 20px #0009,inset 0 2px #ffffff4d,inset 0 -2px #0000004d,inset 2px 0 #ffffff1a,inset -2px 0 #0000001a;z-index:20;transform:translateZ(30px)}.book-spread:after{content:"";position:absolute;top:15px;left:calc(50% - 8px);width:16px;height:calc(100% - 30px);background:radial-gradient(circle at 50% 20%,#654321 2px,transparent 2px),radial-gradient(circle at 50% 50%,#654321 2px,transparent 2px),radial-gradient(circle at 50% 80%,#654321 2px,transparent 2px),repeating-linear-gradient(to bottom,rgba(139,69,19,.4) 0px,rgba(139,69,19,.4) 1px,transparent 1px,transparent 4px),linear-gradient(to right,rgba(255,255,255,.1) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.1) 100%);background-size:16px 100%,16px 100%,16px 100%,16px 100%,16px 100%;border-radius:2px;z-index:21;transform:translateZ(31px);box-shadow:inset 0 0 8px #0000004d,0 2px 4px #0003}.book-spread.transitioning{transform:rotateY(-2deg) rotateX(5deg) scale(.99);opacity:.9}.book-page{flex:1;height:100%;position:relative;cursor:pointer;transition:all .2s ease;background:linear-gradient(135deg,#fffef7,#f8f6f1);box-shadow:0 15px 40px #0000004d,inset 0 1px #ffffffe6;transform-style:preserve-3d}.book-page:hover{background:linear-gradient(135deg,#fff,#f9f7f2);transform:translateZ(10px)}.left-page{border-radius:15px 0 0 15px;border-right:1px solid rgba(0,0,0,.1);transform:rotateY(3deg);transform-origin:right center;background:radial-gradient(ellipse at 10% 10%,rgba(210,180,140,.1) 0%,transparent 40%),radial-gradient(ellipse at 90% 90%,rgba(160,140,100,.08) 0%,transparent 30%),linear-gradient(to right,#f5f3ee,#fffef7 80%,#f8f6f1);box-shadow:-5px 0 15px #0003,0 15px 40px #0000004d,inset 0 1px #ffffffe6,inset -20px 0 30px #0000000d,inset -1px 0 #fff9;position:relative}.left-page:before{content:"";position:absolute;top:0;right:0;width:3px;height:100%;background:linear-gradient(to bottom,#0000001a,#0003,#0000001a);z-index:10}.left-page:hover{transform:rotateY(1deg) translateZ(10px)}.right-page{border-radius:0 15px 15px 0;border-left:1px solid rgba(0,0,0,.1);transform:rotateY(-3deg);transform-origin:left center;background:radial-gradient(ellipse at 90% 10%,rgba(210,180,140,.1) 0%,transparent 40%),radial-gradient(ellipse at 10% 90%,rgba(160,140,100,.08) 0%,transparent 30%),linear-gradient(to left,#f5f3ee,#fffef7 80%,#f8f6f1);box-shadow:5px 0 15px #0003,0 15px 40px #0000004d,inset 0 1px #ffffffe6,inset 20px 0 30px #0000000d,inset 1px 0 #fff9;position:relative}.right-page:before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(to bottom,#0000001a,#0003,#0000001a);z-index:10}.right-page:hover{transform:rotateY(-1deg) translateZ(10px)}.page-image-container{width:100%;height:100%;padding:2rem;display:flex;align-items:center;justify-content:center;position:relative}.page-image-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.1) 1px,transparent 1px),radial-gradient(circle at 80% 70%,rgba(0,0,0,.02) 1px,transparent 1px),linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.01) 25%,transparent 25%);background-size:30px 30px,40px 40px,20px 20px,25px 25px;pointer-events:none;border-radius:15px 0 0 15px}.right-page .page-image-container:before{border-radius:0 15px 15px 0}.page-image-container img{max-width:100%;max-height:100%;object-fit:contain;border-radius:15px;box-shadow:0 10px 30px #0000004d,0 5px 15px #0003;position:relative;z-index:2}.page-text-container{width:100%;height:100%;padding:3rem 2rem;display:flex;flex-direction:column;position:relative}.page-text-container:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.08) 1px,transparent 1px),radial-gradient(circle at 75% 75%,rgba(0,0,0,.02) 1px,transparent 1px);background-size:35px 35px,45px 45px;pointer-events:none;border-radius:15px 0 0 15px;z-index:0}.right-page .page-text-container:after{border-radius:0 15px 15px 0}.page-text-content{position:relative;z-index:1}.page-text-container .text-controls{position:absolute;top:1rem;right:1rem;display:flex;gap:.3rem;z-index:10}.page-text-content{flex:1;display:flex;align-items:flex-start;justify-content:center;text-align:center;overflow-y:auto;padding:1rem 0;position:relative;scrollbar-width:thin;scrollbar-color:rgba(102,126,234,.3) transparent}.page-text-content::-webkit-scrollbar{width:6px}.page-text-content::-webkit-scrollbar-track{background:transparent}.page-text-content::-webkit-scrollbar-thumb{background:#667eea4d;border-radius:3px}.page-text-content::-webkit-scrollbar-thumb:hover{background:#667eea80}.page-text-content:after{content:"";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(transparent,#f8f6f1e6);pointer-events:none;opacity:0;transition:opacity .3s ease}.page-text-content.has-overflow:after{opacity:1}.page-text-container:before{content:"⬇️ Scroll for more";position:absolute;bottom:3rem;left:50%;transform:translate(-50%);background:#667eeae6;color:#fff;padding:.3rem .8rem;border-radius:15px;font-size:.7rem;font-weight:600;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:10;animation:bounce-hint 2s ease-in-out infinite}.page-text-container.has-overflow:before{opacity:1}.page-text-container.scrolled-to-bottom:before{opacity:0}.page-text-content:before{display:none}.page-text-content.has-overflow:before{display:none}.page-text-content.scrolled-to-bottom:before{display:none}@keyframes bounce-hint{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-3px)}}.page-text-content p{font-size:1.6rem;line-height:1.5;color:#2d3748;margin:0;text-align:center;font-weight:500;padding:1rem;width:100%;align-self:flex-start}.page-number-left,.page-number-right{position:absolute;bottom:2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;box-shadow:0 4px 12px #667eea66}.page-number-left{left:2rem}.page-number-right{right:2rem}.book-mode-controls{margin-top:2rem;display:flex;align-items:center;gap:2rem}.book-nav-btn{background:#ffffffe6;border:none;border-radius:25px;padding:.8rem 1.5rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit;color:#2d3748}.book-nav-btn:hover:not(.disabled){background:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #0003}.book-nav-btn.disabled{opacity:.5;cursor:not-allowed}.page-dots{display:flex;gap:.5rem;align-items:center}.page-dot{width:8px;height:8px;border-radius:50%;background:#fff6;cursor:pointer;transition:all .3s ease}.page-dot.active{background:#fff;transform:scale(1.3)}.page-dot:hover{background:#ffffffb3}.book-complete-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1002;animation:fadeIn .5s ease}.book-celebration{background:#fff;border-radius:25px;padding:3rem;text-align:center;max-width:400px;animation:celebration .6s ease}.book-celebration h2{color:#5a67d8;margin-bottom:1rem;font-size:2rem;animation:bounce 2s infinite}.book-celebration p{color:#2d3748;margin-bottom:2rem;font-size:1.1rem}.book-celebration-buttons{display:flex;flex-direction:column;gap:1rem}.book-celebration-buttons button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:15px;padding:1rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit}.book-celebration-buttons button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.storybook-main{display:flex;gap:2rem;max-width:1400px;margin:0 auto;align-items:flex-start}.storybook-sidebar{width:280px;background:#fffffff2;border-radius:20px;padding:1.5rem;box-shadow:0 10px 30px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:2rem;max-height:calc(100vh - 4rem);overflow-y:auto}.storybook-sidebar h3{color:#5a67d8;font-size:1.4rem;margin:0 0 1.5rem;text-align:center;border-bottom:2px solid #e2e8f0;padding-bottom:.5rem}.sidebar-section{margin-bottom:2rem}.sidebar-section h4{color:#4a5568;font-size:1.1rem;margin:0 0 1rem;display:flex;align-items:center;gap:.5rem}.sidebar-button{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;padding:.8rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.sidebar-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea4d}.sidebar-button:last-child{margin-bottom:0}.print-button{background:linear-gradient(135deg,#48bb78,#38a169)}.print-button:hover{box-shadow:0 6px 20px #48bb784d}.sidebar-note{font-size:.8rem;color:#718096;text-align:center;padding:.5rem;background:#7180961a;border-radius:8px;font-style:italic}.story-stats{display:flex;flex-direction:column;gap:.5rem}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:#667eea1a;border-radius:8px}.stat-label{font-weight:600;color:#4a5568}.stat-value{font-weight:700;color:#5a67d8;background:#fff;padding:.2rem .5rem;border-radius:6px;min-width:2rem;text-align:center}.quick-nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.quick-nav-btn{background:#667eea1a;color:#5a67d8;border:2px solid transparent;border-radius:8px;padding:.5rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit}.quick-nav-btn:hover{background:#667eea33;transform:translateY(-1px)}.quick-nav-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;transform:scale(1.05)}.book-container{flex:1;display:flex;flex-direction:column;align-items:center;gap:2rem}.book{background:linear-gradient(145deg,#fff,#f8f9fa);border-radius:25px;padding:2rem;box-shadow:0 20px 40px #0000001a,inset 0 1px #fff9;max-width:800px;width:100%;position:relative;overflow:hidden}.book:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}.page{position:relative;z-index:1}.page-content{display:flex;flex-direction:column;gap:1.5rem;min-height:500px}.page-image{flex:1;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#f093fb,#f5576c);border-radius:20px;overflow:hidden;min-height:300px;position:relative}.page-image img{width:100%;height:100%;object-fit:cover;border-radius:20px;transition:transform .3s ease}.page-image:hover img{transform:scale(1.02)}.loading-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;height:100%}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.page-text{background:#fffc;padding:1.5rem;border-radius:15px;box-shadow:0 5px 15px #0000001a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:relative}.text-controls{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.3rem;z-index:10}.font-size-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:50%;width:28px;height:28px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #667eea4d}.font-size-btn:hover:not(:disabled){transform:translateY(-1px) scale(1.05);box-shadow:0 4px 12px #667eea66}.font-size-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.font-size-btn.increase{background:linear-gradient(135deg,#48bb78,#38a169)}.font-size-btn.increase:hover:not(:disabled){box-shadow:0 4px 12px #48bb7866}.font-size-btn.decrease{background:linear-gradient(135deg,#ff6b6b,#ee5a24)}.font-size-btn.decrease:hover:not(:disabled){box-shadow:0 4px 12px #ff6b6b66}.page-text p{font-size:1.8rem;line-height:1.6;color:#2d3748;margin:0 0 1rem;text-align:center;font-weight:500}.page-number{position:absolute;bottom:1rem;right:1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;box-shadow:0 4px 12px #667eea66}.book-controls{display:flex;gap:1rem;justify-content:center;align-items:center}.nav-button{background:linear-gradient(135deg,#4ecdc4,#44a08d);color:#fff;border:none;border-radius:20px;padding:1rem 2rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit;display:flex;align-items:center;gap:.5rem}.nav-button:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 8px 20px #4ecdc466}.nav-button.disabled{opacity:.5;cursor:not-allowed}.button-icon{font-size:1.2rem}.page-thumbnails{background:#fffffff2;border-radius:20px;padding:1.5rem;box-shadow:0 10px 30px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.page-thumbnails h3{color:#5a67d8;margin-bottom:1rem;font-size:1.2rem;text-align:center}.thumbnails-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.8rem}.thumbnail{cursor:pointer;text-align:center;transition:all .3s ease;border-radius:10px;padding:.5rem;background:transparent}.thumbnail:hover{background:#667eea1a;transform:translateY(-2px)}.thumbnail.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:scale(1.05)}.thumbnail-image{width:100%;height:60px;border-radius:8px;overflow:hidden;margin-bottom:.5rem;box-shadow:0 4px 12px #0000001a}.thumbnail-image img{width:100%;height:100%;object-fit:cover}.thumbnail-number{font-size:.8rem;font-weight:600;display:block}.story-complete{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .5s ease}.celebration{background:#fff;border-radius:25px;padding:3rem;text-align:center;max-width:500px;animation:celebration .6s ease}@keyframes celebration{0%{transform:scale(.8) rotate(-5deg);opacity:0}50%{transform:scale(1.05) rotate(2deg)}to{transform:scale(1) rotate(0);opacity:1}}.celebration h2{color:#5a67d8;margin-bottom:1rem;font-size:2.5rem;animation:bounce 2s infinite}.celebration p{color:#2d3748;margin-bottom:2rem;font-size:1.2rem;font-weight:500}.celebration-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.celebration-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:15px;padding:1rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit;flex:1;min-width:140px}.celebration-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}@media (max-width: 1024px){.storybook-main{flex-direction:column}.storybook-sidebar{width:100%;position:static;max-height:none;order:-1}.sidebar-section{margin-bottom:1.5rem}.quick-nav-grid{grid-template-columns:repeat(6,1fr)}.page-thumbnails{margin-top:1rem}.thumbnails-grid{grid-template-columns:repeat(4,1fr)}.book-spread{width:95vw;height:60vh}.page-text-content p{font-size:1.6rem}}@media (max-width: 768px){.storybook-header{flex-direction:column;gap:1rem;text-align:center}.story-title{font-size:1.5rem}.storybook-sidebar{padding:1rem}.storybook-sidebar h3{font-size:1.2rem}.sidebar-section h4{font-size:1rem}.sidebar-button{padding:.7rem .8rem;font-size:.8rem}.quick-nav-grid{grid-template-columns:repeat(8,1fr)}.quick-nav-btn{padding:.4rem;font-size:.8rem}.book{width:95vw;max-width:none}.page-content{flex-direction:column}.page-text p{font-size:1.6rem;line-height:1.5}.book-controls{flex-direction:column;gap:1rem}.nav-button{padding:.8rem 1.5rem;font-size:.9rem}.book-spread{width:95vw;height:50vh}.book-page{padding:1rem}.book-spread:before{display:none}.left-page{border-right:1px solid #ddd}.right-page{border-left:1px solid #ddd}.page-text-container{padding:1rem}.celebration{padding:1.5rem}.celebration h2{font-size:1.8rem}.book-mode-header{padding:0 1rem}.book-mode-main{padding:80px 1rem 100px}}@media (max-width: 480px){.thumbnails-grid{grid-template-columns:repeat(4,1fr)}.celebration-buttons{flex-direction:column}.book-mode-controls{flex-direction:column;gap:1rem}.page-dots{order:-1}}.share-button{background:linear-gradient(135deg,#fd79a8,#e84393);margin-top:1rem}.share-button:hover{box-shadow:0 6px 20px #fd79a84d}.share-modal{max-width:500px;width:90vw}.share-description{text-align:center;color:#4a5568;font-size:1rem;margin-bottom:2rem;line-height:1.5}.share-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-bottom:2rem}.share-option-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;padding:1rem;cursor:pointer;transition:all .3s ease;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:80px;justify-content:center}.share-option-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea4d}.share-icon{font-size:1.5rem}.share-text{font-size:.9rem;font-weight:600}.copy-btn{background:linear-gradient(135deg,#48bb78,#38a169)}.copy-btn:hover{box-shadow:0 6px 20px #48bb784d}.email-btn{background:linear-gradient(135deg,#4299e1,#3182ce)}.email-btn:hover{box-shadow:0 6px 20px #4299e14d}.whatsapp-btn{background:linear-gradient(135deg,#48bb78,#25d366)}.whatsapp-btn:hover{box-shadow:0 6px 20px #25d3664d}.twitter-btn{background:linear-gradient(135deg,#1da1f2,#0d8bd9)}.twitter-btn:hover{box-shadow:0 6px 20px #1da1f24d}.facebook-btn{background:linear-gradient(135deg,#1877f2,#166fe5)}.facebook-btn:hover{box-shadow:0 6px 20px #1877f24d}.share-url-section{border-top:1px solid #e2e8f0;padding-top:1.5rem}.share-url-section label{display:block;font-weight:600;color:#4a5568;margin-bottom:.5rem;font-size:.9rem}.url-display{display:flex;gap:.5rem;align-items:center}.url-input{flex:1;padding:.75rem;border:2px solid #e2e8f0;border-radius:8px;font-size:.8rem;font-family:monospace;background:#f7fafc;color:#4a5568}.url-input:focus{outline:none;border-color:#667eea}.copy-url-btn{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:none;border-radius:8px;padding:.75rem;cursor:pointer;transition:all .3s ease;font-size:1rem;min-width:50px}.copy-url-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #48bb784d}.page-text-container .text-controls{top:1rem;right:1rem}.share-options{grid-template-columns:repeat(2,1fr)}.share-option-btn{min-height:70px;padding:.8rem}.share-icon{font-size:1.3rem}.share-text{font-size:.8rem}.mobile-book-container{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column;overflow:hidden;z-index:1000;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);font-family:Comic Sans MS,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif}.mobile-book-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.2);color:#fff;flex-shrink:0;min-height:60px}.mobile-exit-btn{background:#fff3;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;tap-highlight-color:transparent}.mobile-exit-btn:hover{background:#ffffff4d;transform:scale(1.05)}.mobile-book-title{flex:1;text-align:center;font-size:1rem;font-weight:600;margin:0 .8rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mobile-page-counter{background:#fff3;padding:.4rem .7rem;border-radius:15px;font-size:.8rem;font-weight:600;min-width:50px;text-align:center}.mobile-story-card{flex:1;margin:.8rem;background:#fff;border-radius:16px;box-shadow:0 15px 35px #0003;display:flex;flex-direction:column;overflow:hidden;position:relative;min-height:0}.mobile-story-image{flex-shrink:0;background:#f8f9fa;display:flex;align-items:center;justify-content:center;padding:.6rem;max-height:32vh;min-height:160px}.mobile-story-image img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 6px 16px #0000001a}.mobile-story-text{flex:1;display:flex;flex-direction:column;padding:.8rem 1rem 1rem;position:relative;overflow:hidden;min-height:0}.mobile-text-content{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:.6rem .4rem;overflow-y:auto;min-height:0;max-height:100%;-webkit-overflow-scrolling:touch}.mobile-text-content::-webkit-scrollbar{width:4px}.mobile-text-content::-webkit-scrollbar-track{background:#0000001a;border-radius:2px}.mobile-text-content::-webkit-scrollbar-thumb{background:#0000004d;border-radius:2px}.mobile-text-content::-webkit-scrollbar-thumb:hover{background:#00000080}.mobile-text-content p{margin:0;line-height:1.3;color:#2d3748;font-weight:500;max-width:100%;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;width:100%;text-align:center;padding:.2rem .4rem;box-sizing:border-box;white-space:normal}.mobile-font-controls{display:flex;align-items:center;justify-content:center;gap:1rem}.mobile-font-btn{border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;tap-highlight-color:transparent}.mobile-font-btn.increase{background:linear-gradient(135deg,#48bb78,#38a169);box-shadow:0 3px 10px #48bb784d}.mobile-font-btn.decrease{background:linear-gradient(135deg,#f56565,#e53e3e);box-shadow:0 3px 10px #f565654d}.mobile-font-btn.increase:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 6px 16px #48bb7866}.mobile-font-btn.decrease:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 6px 16px #f5656566}.mobile-font-btn.disabled{background:#cbd5e0;color:#a0aec0;cursor:not-allowed;transform:none;box-shadow:0 2px 6px #0000001a}.mobile-font-btn .font-icon{line-height:1}.mobile-nav-section{flex-shrink:0;padding:.8rem 1rem 1rem;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.2)}.mobile-progress-bar{height:3px;background:#ffffff4d;border-radius:2px;overflow:hidden;margin-bottom:.8rem}.mobile-progress-fill{height:100%;background:linear-gradient(90deg,#48bb78,#38a169);border-radius:2px;transition:width .3s ease}.mobile-nav-single-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.8rem}.mobile-nav-btn{background:#ffffffe6;border:none;border-radius:20px;padding:.6rem 1rem;display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:#2d3748;cursor:pointer;transition:all .3s ease;min-width:80px;justify-content:center;box-shadow:0 3px 10px #0000001a;tap-highlight-color:transparent;flex:0 0 auto}.mobile-nav-btn:hover:not(.disabled){background:#fff;transform:translateY(-1px);box-shadow:0 5px 15px #00000026}.mobile-nav-btn.disabled{background:#fff6;color:#2d374866;cursor:not-allowed;transform:none;box-shadow:0 2px 6px #0000000d}.mobile-prev-btn .nav-icon,.mobile-next-btn .nav-icon{font-size:1rem;font-weight:700}.mobile-page-display{background:#ffffff40;color:#fff;padding:.5rem .8rem;border-radius:15px;font-size:.75rem;font-weight:600;text-align:center;min-width:80px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);flex:0 0 auto;white-space:nowrap}.mobile-page-dots{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap}.mobile-page-dot{width:10px;height:10px;border-radius:50%;border:none;background:#fff6;cursor:pointer;transition:all .3s ease;padding:0;tap-highlight-color:transparent}.mobile-page-dot.active{background:#fff;transform:scale(1.3);box-shadow:0 2px 6px #0003}.mobile-page-dot:hover:not(.active){background:#fff9;transform:scale(1.1)}@media (max-width: 768px){.edit-header{padding:1rem}.edit-header-content{flex-direction:column;gap:1rem;align-items:stretch}.edit-header-left{justify-content:space-between;width:100%}.edit-story-title{font-size:1.25rem}.edit-header-right{justify-content:center;gap:.75rem}.edit-view-story-button,.edit-save-button{flex:1;padding:.875rem 1rem;font-size:.85rem;min-width:auto}.edit-main{padding:0 1rem 1rem}.edit-instructions{margin:1rem}.edit-page-content{grid-template-columns:1fr;gap:1rem}.edit-footer{padding:1rem}.edit-footer-actions{flex-direction:column;gap:.5rem}.cancel-button,.save-button.primary{width:100%;padding:1rem}}.storybook-container.edit-mode{min-height:100vh;background:#f8f9fa}.edit-header{background:#fff;border-bottom:1px solid #e5e7eb;padding:1rem 2rem;box-shadow:0 1px 3px #0000001a;position:sticky;top:0;z-index:100}.edit-header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;gap:2rem}.edit-header-left{display:flex;align-items:center;gap:1rem;flex:1;min-width:0}.edit-cancel-button{background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;font-size:1.2rem}.edit-cancel-button:hover{background:#e5e7eb;color:#374151}.edit-title-section{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.edit-story-title{color:#111827;margin:0;font-size:1.5rem;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edit-mode-badge{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;align-self:flex-start}.edit-header-right{display:flex;align-items:center;gap:1rem;flex-shrink:0}.edit-view-story-button{background:#3b82f6;color:#fff;border:none;padding:.75rem 1.25rem;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;text-decoration:none;border:1px solid transparent}.edit-view-story-button:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f666}.edit-save-button{background:#10b981;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;min-width:140px;justify-content:center}.edit-save-button:hover:not(:disabled){background:#059669;transform:translateY(-1px);box-shadow:0 4px 12px #10b98166}.edit-save-button:disabled{background:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.edit-instructions{background:#e3f2fd;border:1px solid #bbdefb;border-radius:8px;padding:1rem;margin:1rem 2rem;text-align:center}.edit-instructions p{margin:.5rem 0;color:#1976d2;font-weight:500}.edit-main{padding:0 2rem 2rem;max-width:1200px;margin:0 auto}.edit-pages-container{display:flex;flex-direction:column;gap:2rem}.edit-page-row{background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a;overflow:hidden;border:1px solid #e0e0e0}.edit-page-number{background:linear-gradient(135deg,#5a67d8,#667eea);color:#fff;padding:1rem;text-align:center}.edit-page-number h3{margin:0;font-size:1.2rem}.edit-page-content{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:1.5rem;align-items:start}.edit-page-image{text-align:center}.edit-page-image img{max-width:100%;max-height:300px;border-radius:8px;box-shadow:0 2px 8px #0000001a;object-fit:cover}.edit-page-text{display:flex;flex-direction:column}.text-editor-container{display:flex;flex-direction:column;gap:.5rem}.text-editor-container label{font-weight:600;color:#333;font-size:1rem}.text-editor{width:100%;min-height:150px;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;font-family:Comic Sans MS,system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.6;resize:vertical;transition:border-color .3s ease}.text-editor:focus{outline:none;border-color:#5a67d8;box-shadow:0 0 0 3px #5a67d81a}.text-editor.error{border-color:#dc3545}.text-editor.error:focus{border-color:#dc3545;box-shadow:0 0 0 3px #dc35451a}.character-count{text-align:right;color:#6c757d;font-size:.9rem;margin-top:.25rem}.character-warning{background:#fff3cd;color:#856404;padding:.5rem;border-radius:4px;border:1px solid #ffeaa7;font-size:.85rem;margin-top:.25rem;display:flex;align-items:center;gap:.25rem}.character-error{background:#f8d7da;color:#721c24;padding:.5rem;border-radius:4px;border:1px solid #f5c6cb;font-size:.85rem;margin-top:.25rem;display:flex;align-items:center;gap:.25rem;font-weight:500}.validation-error{background:#f8d7da;color:#721c24;padding:.75rem;border-radius:6px;border:1px solid #f5c6cb;font-size:.9rem;margin-top:.5rem}.edit-footer{background:#fff;border-top:1px solid #e0e0e0;padding:1.5rem 2rem;position:sticky;bottom:0;box-shadow:0 -2px 10px #0000001a}.edit-footer-actions{display:flex;justify-content:center;align-items:center;gap:1rem;max-width:1200px;margin:0 auto}.cancel-button{background:#6c757d;color:#fff;border:none;padding:.75rem 2rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s ease}.cancel-button:hover{background:#545b62;transform:translateY(-1px)}.save-button.primary{background:#28a745;color:#fff;border:none;padding:.75rem 2rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s ease;font-weight:600}.save-button.primary:hover:not(:disabled){background:#218838;transform:translateY(-1px)}.save-button.primary:disabled{background:#6c757d;cursor:not-allowed}.sidebar-button.edit-button{background:linear-gradient(135deg,#ff7b7b,#ff6b6b);color:#fff;border:none;padding:.75rem 1rem;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .3s ease;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem}.sidebar-button.edit-button:hover:not(:disabled){background:linear-gradient(135deg,#ff6b6b,#ff5252);transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b4d}.sidebar-button.edit-button:disabled{background:#ccc;cursor:not-allowed}.landing-page{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#2d3748;overflow-x:hidden;min-height:100vh}.profile-main{padding:120px 0 80px;min-height:100vh;background:linear-gradient(135deg,#f8fafc,#edf2f7)}.profile-header{text-align:center;margin-bottom:3rem}.profile-header h1{font-size:2.5rem;font-weight:800;margin-bottom:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.profile-header p{color:#6b7280;font-size:1.1rem}.profile-loading{text-align:center;padding:4rem 0}.profile-loading p{color:#6b7280;margin-top:1rem;font-size:1.1rem}.error-message{background:#fee2e2;border:1px solid #fecaca;color:#dc2626;padding:1rem;border-radius:12px;margin-bottom:2rem;text-align:center}.profile-content{display:flex;flex-direction:column;gap:2rem;max-width:1000px;margin:0 auto}.profile-card{background:#fff;border-radius:20px;box-shadow:0 10px 30px #0000001a;overflow:hidden;border:1px solid rgba(0,0,0,.05)}.card-header{background:linear-gradient(135deg,#f8fafc,#edf2f7);padding:1.5rem 2rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}.card-header h2{color:#2d3748;font-size:1.3rem;font-weight:700;margin:0}.card-content{padding:2rem}.profile-info{display:flex;flex-direction:column;gap:1rem}.info-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid #f3f4f6}.info-item:last-child{border-bottom:none}.info-item label{font-weight:600;color:#374151;font-size:.95rem}.info-item span{color:#6b7280;font-size:.95rem}.subscription-status{background:#e6fffa;color:#065f46;padding:.25rem .75rem;border-radius:15px;font-size:.8rem!important;font-weight:600!important}.token-display{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;margin-bottom:2rem}.token-display-prominent{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.token-count-large{text-align:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:3rem 2rem;border-radius:20px;width:100%;box-shadow:0 10px 30px #667eea4d}.token-count-large .token-number{display:block;font-size:4rem;font-weight:800;line-height:1;margin-bottom:.5rem;color:#fff!important;background:none!important;-webkit-background-clip:initial!important;-webkit-text-fill-color:initial!important;background-clip:initial!important}.token-count-large .token-label{display:block;font-size:1.1rem;opacity:.9;font-weight:500;color:#fff!important}.token-info-compact p{margin:0 0 .5rem;line-height:1.5;font-size:.95rem}.token-count{text-align:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;border-radius:20px;min-width:160px}.token-number{display:block;font-size:3rem;font-weight:800;line-height:1;margin-bottom:.5rem}.token-label{display:block;font-size:.9rem;opacity:.9;font-weight:500}.token-info{color:#4a5568}.token-info p{margin:0 0 .5rem;line-height:1.5}.token-actions{display:flex;gap:1rem}.buy-tokens-button{background:#e5e7eb;color:#9ca3af;border:none;padding:1rem 2rem;border-radius:15px;font-weight:600;cursor:not-allowed;position:relative;display:flex;align-items:center;gap:.5rem}.coming-soon{background:#fbbf24;color:#92400e;padding:.25rem .5rem;border-radius:10px;font-size:.7rem;font-weight:600;margin-left:.5rem}.stories-card .card-header{display:flex;justify-content:space-between;align-items:center}.create-story-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:15px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem}.create-story-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.stories-loading{text-align:center;padding:2rem;color:#6b7280}.no-stories{text-align:center;padding:3rem 2rem}.no-stories-icon{font-size:4rem;margin-bottom:1rem}.no-stories h3{color:#2d3748;margin-bottom:.5rem}.no-stories p{color:#6b7280;margin-bottom:2rem}.create-first-story-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:1rem 2rem;border-radius:20px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem}.create-first-story-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #667eea4d}.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.story-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:15px;padding:1.5rem;transition:all .3s ease;position:relative}.story-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a;border-color:#667eea}.story-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.story-header h4{color:#2d3748;font-size:1.1rem;font-weight:600;margin:0;flex:1;margin-right:1rem}.story-actions{display:flex;gap:.5rem}.view-story-button,.edit-story-button,.delete-story-button{background:#fff;border:1px solid #e5e7eb;color:#6b7280;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;font-size:.9rem}.view-story-button:hover{background:#3b82f6;color:#fff;border-color:#3b82f6}.edit-story-button{background:#fff;border:1px solid #e5e7eb;color:#6b7280}.edit-story-button:hover{background:#f59e0b;color:#fff;border-color:#f59e0b}.delete-story-button:hover{background:#ef4444;color:#fff;border-color:#ef4444}.story-meta{display:flex;justify-content:space-between;align-items:center;color:#6b7280;font-size:.9rem}.favorite-badge{position:absolute;top:10px;right:10px;background:#fbbf24;color:#92400e;padding:.25rem .5rem;border-radius:10px;font-size:.7rem;font-weight:600}.story-preview-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.story-preview-image:hover img{transform:scale(1.05)}.placeholder-image{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center}.placeholder-icon{font-size:3rem;margin-bottom:.5rem}.placeholder-text{font-size:1.1rem;font-weight:600;letter-spacing:.5px}.story-entry{display:flex;gap:1rem;padding:1rem;border-bottom:1px solid #e5e7eb;transition:background-color .3s ease}.story-entry:hover{background-color:#f8fafc}.story-entry:last-child{border-bottom:none}.story-entry-preview{flex-shrink:0;width:60px;height:45px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#a855f7,#c084fc);display:flex;align-items:center;justify-content:center}.story-entry-image{width:100%;height:100%;object-fit:cover}.story-entry-placeholder{color:#fff;font-size:1.2rem}.story-entry-content{flex:1;display:flex;flex-direction:column;gap:.5rem}.story-entry-content h4{margin:0;color:#2d3748;font-size:1rem;font-weight:600}.story-entry-meta{color:#6b7280;font-size:.85rem}.view-story-button-small{background:#667eea;color:#fff;border:none;padding:.4rem .8rem;border-radius:6px;font-size:.8rem;cursor:pointer;transition:background-color .3s ease;align-self:flex-start}.view-story-button-small:hover{background:#5a67d8}.billing-placeholder{text-align:center;padding:2rem}.billing-icon{font-size:4rem;margin-bottom:1rem}.billing-placeholder h3{color:#2d3748;margin-bottom:1rem}.billing-placeholder p{color:#6b7280;margin-bottom:1.5rem}.future-features{text-align:left;max-width:400px;margin:0 auto 2rem;padding:0;list-style:none}.future-features li{padding:.5rem 0;color:#4a5568;font-size:.95rem}.notify-button{background:#e5e7eb;color:#9ca3af;border:none;padding:1rem 2rem;border-radius:15px;font-weight:600;cursor:not-allowed}.quick-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.quick-action-button{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem 1.5rem;border:none;border-radius:20px;cursor:pointer;transition:all .3s ease;text-align:center;background:linear-gradient(135deg,#f8fafc,#edf2f7);border:2px solid rgba(102,126,234,.1);color:#2d3748;text-decoration:none}.quick-action-button:hover{transform:translateY(-4px);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;box-shadow:0 12px 35px #667eea40}.quick-action-button .action-icon{font-size:2.5rem;transition:all .3s ease}.quick-action-button:hover .action-icon{transform:scale(1.1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}.quick-action-button .action-label{font-size:1rem;font-weight:600;margin:0;transition:all .3s ease}.quick-action-button:hover .action-label{font-weight:700}.refresh-button{background:#667eea;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:15px;font-weight:600;cursor:pointer;transition:all .3s ease}.refresh-button:hover{background:#5a67d8;transform:translateY(-2px)}.signout-button{background:#dc2626;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:15px;font-weight:600;cursor:pointer;transition:all .3s ease}.signout-button:hover{background:#b91c1c;transform:translateY(-2px)}.delete-account-button{background:#991b1b;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:15px;font-weight:600;cursor:pointer;transition:all .3s ease;border:2px solid #dc2626}.delete-account-button:hover{background:#7f1d1d;border-color:#991b1b;transform:translateY(-2px)}.confirm-delete-account-button{background:#991b1b;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem}.confirm-delete-account-button:hover:not(:disabled){background:#7f1d1d}.confirm-delete-account-button:disabled{opacity:.7;cursor:not-allowed}.delete-account-warning h4{color:#dc2626;margin:0 0 1rem;font-size:1.1rem;text-align:center}.delete-account-warning ul{margin:1rem 0;padding-left:1.5rem;color:#374151}.delete-account-warning li{margin-bottom:.5rem;line-height:1.4}.delete-account-warning p:last-child{margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e5e7eb;font-weight:600;color:#dc2626;text-align:center}.delete-modal{background:#fff;border-radius:20px;max-width:400px;width:90%;overflow:hidden;box-shadow:0 25px 50px #0000004d}.delete-modal:has(.delete-account-warning){max-width:500px}.delete-modal-header{background:#fee2e2;padding:1.5rem;border-bottom:1px solid #fecaca}.delete-modal-header h3{color:#dc2626;margin:0;font-size:1.2rem}.delete-modal-body{padding:2rem}.delete-modal-body p{color:#4a5568;margin:0;line-height:1.5}.delete-modal-footer{padding:1.5rem;display:flex;gap:1rem;justify-content:flex-end;background:#f9fafb}.cancel-delete-button{background:#e5e7eb;color:#374151;border:none;padding:.75rem 1.5rem;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease}.cancel-delete-button:hover{background:#d1d5db}.confirm-delete-button{background:#dc2626;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease}.confirm-delete-button:hover{background:#b91c1c}.loading-spinner{border:4px solid #f3f4f6;border-top:4px solid #667eea;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto}@media (max-width: 768px){.profile-main{padding:100px 0 60px}.profile-header h1{font-size:2rem}.card-header{padding:1rem;flex-direction:column;gap:1rem;align-items:stretch}.card-content{padding:1.5rem}.token-display{grid-template-columns:1fr;gap:1.5rem}.token-count-large{padding:2rem 1.5rem}.token-count-large .token-number{font-size:3rem;color:#fff!important;background:none!important;-webkit-background-clip:initial!important;-webkit-text-fill-color:initial!important;background-clip:initial!important}.token-count{margin:0 auto}.stories-grid{grid-template-columns:1fr}.account-actions{flex-direction:column}.quick-actions-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem}.quick-action-button{padding:1.5rem 1rem}.quick-action-button .action-icon{font-size:2rem}.quick-action-button .action-label{font-size:.9rem}.info-item{flex-direction:column;align-items:flex-start;gap:.25rem}.delete-modal{margin:1rem}.delete-modal-footer{flex-direction:column}.delete-account-warning ul{padding-left:1rem}.delete-account-warning li{font-size:.9rem}.confirm-delete-account-button{justify-content:center}}.auth-main{padding:120px 0 80px;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center}.auth-container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:1200px;margin:0 auto;align-items:start}.auth-card{background:#fff;border-radius:24px;padding:3rem;box-shadow:0 25px 50px #00000026;border:1px solid rgba(255,255,255,.2)}.auth-header{text-align:center;margin-bottom:2rem}.auth-header h1{font-size:2.5rem;font-weight:800;margin-bottom:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.auth-header p{color:#6b7280;font-size:1.1rem;line-height:1.6}.auth-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;color:#374151;font-size:.9rem}.form-group input{padding:1rem 1.25rem;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#fafafa}.form-group input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.form-group input:disabled{opacity:.6;cursor:not-allowed}.form-group select{padding:1rem 3rem 1rem 1.25rem;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#fafafa;width:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:20px}.form-group select:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.form-group select:disabled{opacity:.6;cursor:not-allowed}.form-group select option{padding:.5rem}.auth-error{background:#fee2e2;border:1px solid #fecaca;color:#dc2626;padding:1rem;border-radius:12px;font-size:.9rem;text-align:center}.auth-message{background:#d1fae5;border:1px solid #a7f3d0;color:#065f46;padding:1rem;border-radius:12px;font-size:.9rem;text-align:center}.auth-submit-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:1.25rem 2rem;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:.5rem}.auth-submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px #667eea4d}.auth-submit-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.auth-loading{display:flex;align-items:center;justify-content:center;gap:.75rem}.tos-checkbox{display:flex;align-items:flex-start;gap:8px;margin:20px 0;padding:15px;background-color:#00000008;border-radius:8px;font-size:14px;line-height:1.4}.tos-checkbox input[type=checkbox]{margin-top:3px;flex-shrink:0}.tos-checkbox label{margin:0;color:#666;cursor:pointer}.tos-checkbox a{color:#667eea;text-decoration:none;font-weight:500}.tos-checkbox a:hover{text-decoration:underline}.forgot-password-link{margin-top:8px;text-align:right}.forgot-password-button{background:none;border:none;color:#667eea;text-decoration:none;font-size:14px;cursor:pointer;padding:4px 0;transition:color .2s ease}.forgot-password-button:hover{color:#5a6fd8;text-decoration:underline}.forgot-password-button:disabled{color:#999;cursor:not-allowed;text-decoration:none}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.modal-content{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 16px;border-bottom:1px solid #eee}.modal-header h3{margin:0;font-size:20px;font-weight:600;color:#333}.close-button{background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.close-button:hover{background-color:#f5f5f5;color:#666}.close-button:disabled{opacity:.5;cursor:not-allowed}.modal-body{padding:24px}.modal-description{margin:0 0 24px;color:#666;font-size:16px;line-height:1.5}.forgot-password-form{display:flex;flex-direction:column;gap:20px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.cancel-button{background:none;border:2px solid #ddd;color:#666;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease}.cancel-button:hover{border-color:#bbb;color:#333}.cancel-button:disabled{opacity:.5;cursor:not-allowed}.auth-loading-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.auth-loading-state p{margin:0;color:#666;font-size:16px}.auth-message{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb;border-radius:8px;padding:12px 16px;margin:16px 0;font-size:14px;line-height:1.4}@media (max-width: 480px){.modal-content{margin:10px;border-radius:8px}.modal-header{padding:20px 20px 12px}.modal-header h3{font-size:18px}.modal-body{padding:20px}.modal-actions{flex-direction:column-reverse}.cancel-button,.auth-submit-button{width:100%;justify-content:center}}.auth-switch{text-align:center;margin-top:2rem;padding-top:2rem;border-top:1px solid #e5e7eb}.auth-switch p{color:#6b7280;margin:0}.auth-switch-button{background:none;border:none;color:#667eea;font-weight:600;cursor:pointer;margin-left:.5rem;text-decoration:underline;font-size:inherit}.auth-switch-button:hover:not(:disabled){color:#5b6ae5}.auth-benefits{background:#fffffff2;border-radius:24px;padding:2.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}.auth-benefits h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;color:#1f2937}.auth-benefits ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}.auth-benefits li{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000d;font-size:.95rem;line-height:1.5}.auth-benefits strong{color:#374151}@media (max-width: 1024px){.auth-container{grid-template-columns:1fr;gap:2rem;max-width:600px}.auth-main{padding:100px 0 60px}.auth-card{padding:2rem}.auth-header h1{font-size:2rem}}@media (max-width: 768px){.auth-card,.auth-benefits{padding:1.5rem;margin:0 1rem}.auth-header h1{font-size:1.75rem}}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.landing-nav{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.1);z-index:1000;transition:all .3s ease}.nav-container{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem}.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.5rem;color:#5a67d8;text-decoration:none;cursor:pointer}.logo:hover{color:#5a67d8}.logo-icon{font-size:2rem}.logo-image{height:2rem;width:auto;object-fit:contain}.nav-links{display:flex;gap:2rem}.nav-links a{text-decoration:none;color:#4a5568;font-weight:500;transition:color .3s ease}.nav-links a:hover,.nav-links a.active{color:#5a67d8}.nav-auth,.auth-buttons{display:flex;align-items:center;gap:1rem}.nav-login{background:transparent;color:#374151;border:2px solid #e5e7eb;padding:.75rem 1.5rem;border-radius:25px;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;font-size:.95rem}.nav-login:hover{border-color:#667eea;color:#667eea;transform:translateY(-1px)}.nav-cta{background:linear-gradient(135deg,#667eea,#4299e1);color:#fff;border:none;border-radius:25px;padding:.8rem 1.5rem;font-weight:600;cursor:pointer;transition:all .3s ease}.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.user-menu{display:flex;align-items:center;gap:1rem}.user-info{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.user-greeting{font-size:.9rem;color:#374151;font-weight:500}.token-balance{font-size:.8rem;color:#667eea;font-weight:600;background:#667eea1a;padding:2px 8px;border-radius:12px}.token-balance-link{text-decoration:none;transition:transform .2s ease}.token-balance-link:hover{transform:scale(1.05)}.token-balance-link:hover .token-balance{background:#667eea33}.nav-link-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:25px;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;font-size:.95rem;display:inline-block}.nav-link-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.nav-profile-button{background:transparent;color:#374151;border:2px solid #e5e7eb;padding:.75rem 1.5rem;border-radius:25px;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;font-size:.95rem;display:inline-block}.nav-profile-button:hover{border-color:#667eea;color:#667eea;transform:translateY(-1px)}.nav-signout{background:transparent;color:#6b7280;border:1px solid #e5e7eb;padding:.5rem 1rem;border-radius:20px;font-weight:500;cursor:pointer;transition:all .3s ease;font-size:.9rem}.nav-signout:hover{border-color:#dc2626;color:#dc2626}.hero{background:linear-gradient(135deg,#667eea,#764ba2,#8e44ad,#9b59b6,#667eea);background-size:400% 400%;animation:gradientShift 8s ease-in-out infinite;color:#fff;padding:140px 0 100px;position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.hero:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="25" height="25" patternUnits="userSpaceOnUse"><circle cx="12.5" cy="12.5" r="1.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23dots)"/></svg>') repeat;opacity:1;pointer-events:none}.hero:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1px);background-size:50px 50px;animation:float 20s linear infinite;pointer-events:none}@keyframes float{0%{transform:translate(0) rotate(0)}to{transform:translate(-50px,-50px) rotate(360deg)}}.hero .blur-orb{position:absolute;border-radius:50%;background:#ffffff1a;filter:blur(40px);pointer-events:none}.hero .blur-orb:nth-child(1){width:300px;height:300px;top:10%;left:10%;animation:floatOrb1 15s ease-in-out infinite}.hero .blur-orb:nth-child(2){width:200px;height:200px;top:60%;right:20%;animation:floatOrb2 12s ease-in-out infinite reverse}.hero .blur-orb:nth-child(3){width:150px;height:150px;bottom:20%;left:30%;animation:floatOrb3 18s ease-in-out infinite}@keyframes floatOrb1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(30px,-20px) scale(1.1)}}@keyframes floatOrb2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-20px,30px) scale(.9)}}@keyframes floatOrb3{0%,to{transform:translate(0) scale(1)}50%{transform:translate(25px,-15px) scale(1.05)}}.hero-container{max-width:1200px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1;width:100%}.hero-badge{background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:25px;padding:.5rem 1rem;display:inline-block;font-size:.9rem;margin-bottom:1.5rem;box-shadow:0 8px 32px #0000001a;font-weight:600}.hero-title{font-size:3.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.3);animation:slideInUp 1s ease-out}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.highlight{background:linear-gradient(135deg,#fff,#f0f8ff,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.2));animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.hero-subtitle{font-size:1.2rem;line-height:1.6;margin-bottom:2rem;color:#fff;opacity:.95;max-width:500px;text-shadow:0 1px 10px rgba(0,0,0,.2);background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:1rem 1.5rem;border-radius:15px;border:1px solid rgba(255,255,255,.2)}.hero-stats{display:flex;gap:2rem;margin-bottom:2.5rem}.stat{text-align:center}.stat-number{font-size:2rem;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3)}.stat-label{font-size:.9rem;color:#fff;opacity:1;text-shadow:0 2px 8px rgba(0,0,0,.4);font-weight:500}.hero-actions{display:flex;gap:1rem;margin-bottom:2rem}.hero-actions .cta-primary{background:#fff;color:#8e44ad;border:2px solid white;box-shadow:0 8px 25px #00000026;font-weight:700;font-size:1.1rem;padding:1.2rem 2.5rem}.hero-actions .cta-primary:hover{background:#f8f9ff;color:#8e44ad;transform:translateY(-4px);box-shadow:0 15px 35px #00000040;border:2px solid white}.cta-primary,.cta-secondary{display:flex;align-items:center;gap:.5rem;padding:1rem 2rem;border-radius:25px;font-weight:600;cursor:pointer;transition:all .3s ease;border:none;font-size:1rem;text-decoration:none}.cta-primary{background:linear-gradient(135deg,#8e44ad,#9b59b6);color:#fff;border:2px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:700}.cta-primary:hover{transform:translateY(-3px);background:linear-gradient(135deg,#9b59b6,#8e44ad);box-shadow:0 12px 30px #0003;color:#fff}.cta-secondary{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cta-secondary:hover{background:#fff3;color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #0000001a}.cta-primary.large,.cta-secondary.large{font-size:1.1rem;padding:1.2rem 2.5rem}.hero-social-proof{opacity:.9;color:#fff}.social-proof-text{font-size:.9rem;margin-bottom:.5rem;color:#fff;opacity:1;text-shadow:0 2px 8px rgba(0,0,0,.5);font-weight:600}.social-proof-logos{display:flex;column-gap:1.5rem;row-gap:.5rem;flex-wrap:wrap;font-size:.85rem;color:#fff;opacity:1;font-weight:500}.social-proof-logos span{text-shadow:0 2px 8px rgba(0,0,0,.4);background:#ffffff1a;padding:.3rem .8rem;border-radius:15px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.2)}.hero-visual{display:flex;justify-content:center;align-items:center}.hero-demo{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 25px 50px #00000026;border:1px solid rgba(0,0,0,.05);max-width:450px;width:100%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.demo-screen{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 20px 40px #0003}.demo-screen:hover{box-shadow:0 25px 50px #00000040}.demo-header{background:#f7fafc;padding:1rem;display:flex;align-items:center;gap:1rem;border-bottom:1px solid #e2e8f0}.demo-dots{display:flex;gap:.3rem}.demo-dots span{width:10px;height:10px;border-radius:50%;background:#cbd5e0}.demo-title{font-size:.9rem;color:#4a5568;font-weight:500}.demo-content{padding:1.5rem}.demo-character{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.character-avatar{font-size:3rem}.character-details h4{color:#2d3748;margin:0;font-size:1.1rem}.character-details p{color:#718096;margin:0;font-size:.9rem}.demo-story-preview{background:#f7fafc;border-radius:10px;padding:1rem}.story-line{color:#4a5568;margin-bottom:.5rem;font-style:italic}.story-line.typing{position:relative;overflow:hidden}.story-line.typing:after{content:"|";animation:blink 1s infinite;color:#667eea}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.audience-section{padding:80px 0;background:#f7fafc}.section-title{font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:1rem;color:#2d3748}.section-subtitle{text-align:center;color:#718096;font-size:1.1rem;margin-bottom:3rem}.audience-tabs{display:flex;justify-content:center;gap:1rem;margin-bottom:3rem}.tab{background:#fff;border:2px solid #e2e8f0;border-radius:25px;padding:1rem 2rem;cursor:pointer;transition:all .3s ease;font-weight:500;color:#4a5568}.tab.active{background:linear-gradient(135deg,#667eea,#4299e1);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.tab:hover:not(.active){border-color:#667eea;transform:translateY(-1px)}.audience-content{display:block;max-width:1200px;margin:0 auto;width:100%}.audience-text h3{font-size:2rem;margin-bottom:2rem;color:#2d3748}.benefits-list{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2rem;max-width:1000px;margin:2rem auto 0;width:100%}.benefit{display:flex;gap:1.5rem;align-items:center;text-align:left;padding:2rem;background:#fffffff2;border-radius:15px;border:1px solid rgba(0,0,0,.08);box-shadow:0 4px 15px #00000014;transition:all .3s ease}.benefit h4{margin:0 0 .5rem;color:#2d3748;font-weight:600}.benefit p{margin:0;color:#718096;line-height:1.5}.audience-visual{display:flex;justify-content:center}.professional-dashboard,.family-scene,.classroom-scene{background:#fff;border-radius:15px;padding:2rem;box-shadow:0 10px 30px #0000001a;max-width:350px;width:100%}.dashboard-header,.family-header,.classroom-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e2e8f0}.dashboard-header h4,.family-header h4,.classroom-header h4{margin:0;color:#2d3748;font-size:1.1rem}.status,.story-count,.student-count{background:#667eea;color:#fff;padding:.3rem .8rem;border-radius:15px;font-size:.8rem;font-weight:500}.dashboard-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.dashboard-stat{text-align:center;padding:1rem;background:#f7fafc;border-radius:10px}.stat-value{font-size:1.8rem;font-weight:700;color:#667eea}.stat-label{font-size:.8rem;color:#718096}.recent-activity,.classroom-activity{display:flex;flex-direction:column;gap:1rem}.activity-item{display:flex;align-items:center;gap:.8rem;padding:.8rem;background:#f7fafc;border-radius:8px;font-size:.9rem;color:#4a5568}.activity-icon{font-size:1.2rem}.features-section{padding:80px 0;background:#fff}.section-header{text-align:center;margin-bottom:4rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.feature-card{background:#fff;border-radius:15px;padding:2rem;text-align:center;border:1px solid #e2e8f0;transition:all .3s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px #0000001a;border-color:#667eea}.feature-title{font-size:1.3rem;font-weight:600;margin-bottom:1rem;color:#2d3748}.feature-description{color:#718096;line-height:1.6}.research-section{padding:100px 0;background:linear-gradient(135deg,#f7fafc,#edf2f7)}.research-content{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;max-width:1400px;margin:0 auto}.research-intro{font-size:1.2rem;color:#4a5568;margin-bottom:3rem;line-height:1.7;font-weight:500}.research-categories{display:flex;flex-direction:column;gap:3rem}.research-category{background:#fff;border-radius:20px;padding:2.5rem;box-shadow:0 8px 25px #00000014;border:1px solid rgba(102,126,234,.1);transition:all .3s ease}.research-category:hover{transform:translateY(-3px);box-shadow:0 15px 35px #0000001f;border-color:#667eea33}.research-category h3{color:#667eea;margin-bottom:1.5rem;font-size:1.3rem;font-weight:700;display:flex;align-items:center;gap:.5rem}.research-category h3:before{content:"";width:4px;height:25px;background:linear-gradient(135deg,#667eea,#4299e1);border-radius:2px}.research-points{display:flex;flex-direction:column;gap:1.5rem}.research-point{padding:1.5rem;background:#f8fafc;border-radius:12px;border-left:4px solid #667eea;transition:all .3s ease}.research-point:hover{background:#edf2f7;transform:translate(5px)}.research-point h4{color:#2d3748;margin-bottom:.8rem;font-weight:600;font-size:1.1rem;display:flex;align-items:center;gap:.5rem}.research-point p{color:#4a5568;line-height:1.6;margin:0;font-size:.95rem}.research-stats{background:#fff;border-radius:25px;padding:3rem;box-shadow:0 15px 40px #0000001a;border:1px solid rgba(102,126,234,.1);position:sticky;top:2rem}.research-stats h3{text-align:center;margin-bottom:2.5rem;color:#2d3748;font-size:1.6rem;font-weight:700;position:relative}.research-stats h3:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(135deg,#667eea,#4299e1);border-radius:2px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2.5rem}.stat-card{text-align:center;padding:2rem 1.5rem;background:linear-gradient(135deg,#f8fafc,#edf2f7);border-radius:18px;border:2px solid transparent;transition:all .4s ease;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(135deg,#667eea,#4299e1);transform:scaleX(0);transition:transform .3s ease}.stat-card:hover{transform:translateY(-8px);background:linear-gradient(135deg,#667eea,#4299e1);color:#fff;border-color:#667eea;box-shadow:0 20px 40px #667eea4d}.stat-card:hover:before{transform:scaleX(1)}.stat-card .stat-number{font-size:3rem;font-weight:900;color:#667eea;margin-bottom:.8rem;line-height:1;letter-spacing:-1px}.stat-card:hover .stat-number{color:#fff}.stat-card .stat-label{font-size:1rem;color:#2d3748;line-height:1.4;margin-bottom:1rem;font-weight:600}.stat-card:hover .stat-label{color:#fffffff2}.stat-card .stat-source{font-size:.8rem;color:#718096;line-height:1.3;margin-bottom:.5rem;font-weight:500}.stat-card:hover .stat-source{color:#ffffffd9}.stat-card .stat-citation{font-size:.75rem;color:#a0aec0;font-style:italic;font-weight:400}.stat-card:hover .stat-citation{color:#ffffffb3}.research-citation{text-align:center;padding:1.5rem;background:#f7fafc;border-radius:15px;border:1px solid #e2e8f0}.research-citation p{font-size:.9rem;color:#718096;margin-bottom:.5rem;line-height:1.5}.research-citation p:last-child{margin-bottom:0}.research-citation strong{color:#4a5568}@media (max-width: 1024px){.research-content{grid-template-columns:1fr;gap:3rem}.research-stats{position:static}.stats-grid{grid-template-columns:1fr;gap:1.5rem}}@media (max-width: 768px){.research-section{padding:60px 0}.research-content{gap:2rem}.research-category,.research-stats{padding:2rem}.research-intro{font-size:1.1rem;margin-bottom:2rem}.stat-card .stat-number{font-size:2.5rem}}.how-it-works{padding:80px 0;background:#fff}.steps-container{display:flex;flex-direction:column;gap:4rem;max-width:800px;margin:0 auto}.step{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center}.step:nth-child(2n){direction:rtl}.step:nth-child(2n) *{direction:ltr}.step-number{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#667eea,#4299e1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;flex-shrink:0}.step-content h3{font-size:1.5rem;color:#2d3748;margin-bottom:1rem}.step-content p{color:#718096;line-height:1.6;margin-bottom:1.5rem}.step-visual{margin-top:1rem}.character-builder,.ai-generation,.reading-interface{background:#f7fafc;border-radius:10px;padding:1rem;display:flex;align-items:center;gap:1rem}.customization-options,.generation-text{display:flex;flex-direction:column;gap:.3rem}.option,.text-line{background:#fff;padding:.3rem .8rem;border-radius:15px;font-size:.8rem;color:#4a5568}.ai-icon{font-size:2rem}.story-page{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}.story-image{font-size:2rem}.story-text{flex:1;font-style:italic;color:#4a5568}.practice-indicators{font-size:.8rem;color:#667eea;font-weight:500}.sound-target{background:#667eea1a;padding:.2rem .5rem;border-radius:10px}.testimonials-section{padding:80px 0;background:#f7fafc}.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem}.testimonial-card{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 10px 30px #0000001a;transition:all .3s ease}.testimonial-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px #00000026}.testimonial-content{position:relative;margin-bottom:2rem}.quote-icon{position:absolute;top:-10px;left:-10px;font-size:4rem;color:#e2e8f0;line-height:1}.testimonial-quote{font-size:1.1rem;line-height:1.6;color:#4a5568;font-style:italic;margin:0;padding-left:2rem}.testimonial-author{display:flex;align-items:center;gap:1rem}.author-avatar{font-size:3rem}.author-name{font-weight:600;color:#2d3748;margin:0}.author-role{color:#667eea;font-size:.9rem;margin:.2rem 0;font-weight:500}.author-location{color:#718096;font-size:.8rem;margin:0}.pricing-section{padding:80px 0;background:#fff}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:2rem}.pricing-card{background:#fff;border:2px solid #e2e8f0;border-radius:20px;padding:2rem;text-align:center;position:relative;transition:all .3s ease}.pricing-card.featured{border-color:#667eea;transform:scale(1.05);box-shadow:0 20px 50px #667eea33}.popular-badge{position:absolute;top:-10px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#667eea,#4299e1);color:#fff;padding:.5rem 1.5rem;border-radius:20px;font-size:.8rem;font-weight:600}.plan-header{margin-bottom:2rem}.plan-header h3{font-size:1.5rem;margin-bottom:.5rem;color:#2d3748}.plan-icon{font-size:3rem}.plan-price{margin-bottom:2rem}.price{font-size:3rem;font-weight:700;color:#667eea}.period{color:#718096;font-size:1rem}.plan-features{text-align:left;margin-bottom:2rem}.plan-features .feature{padding:.5rem 0;color:#4a5568}.plan-cta{width:100%;background:linear-gradient(135deg,#667eea,#4299e1);color:#fff;border:none;border-radius:25px;padding:1rem 2rem;font-weight:600;cursor:pointer;transition:all .3s ease}.plan-cta:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.pricing-footer{text-align:center;color:#718096}.final-cta{padding:80px 0;background:linear-gradient(135deg,#4299e1,#667eea);color:#fff;text-align:center}.cta-content h2{font-size:2.5rem;margin-bottom:1rem}.cta-actions{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem}.cta-guarantee{display:flex;align-items:center;justify-content:center;gap:.5rem;opacity:.8;font-size:.9rem}.guarantee-icon{font-size:1.2rem}.landing-footer{background:#2d3748;color:#fff;padding:4rem 0 2rem}.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2rem}.footer-section h4{margin-bottom:1rem;color:#fff}.footer-section a{display:block;color:#a0aec0;text-decoration:none;margin-bottom:.5rem;transition:color .3s ease}.footer-logo{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.5rem;margin-bottom:1rem}.social-links{display:flex;gap:1rem;margin-top:1rem}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid #4a5568;color:#a0aec0}@media (max-width: 1024px){.hero-container,.audience-content,.research-content{grid-template-columns:1fr;gap:3rem;text-align:center}.hero{padding:120px 0 80px;min-height:90vh}.hero-title{font-size:2.8rem}.nav-links{display:none}.step{grid-template-columns:1fr;text-align:center;padding:2rem 1.5rem}.step:nth-child(2n){direction:ltr}.steps-grid,.benefits-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}}@media (max-width: 768px){.container{padding:0 1rem}.nav-container{padding:1rem}.logo{font-size:1rem}.hero{padding:100px 0 60px;min-height:80vh}.hero-title{font-size:2.2rem;line-height:1.2}.hero-actions{flex-direction:column;align-items:center;gap:1rem}.hero-stats{justify-content:center;flex-wrap:wrap;gap:1.5rem}.hero-demo{max-width:350px;margin:0 auto}.section-title{font-size:2.2rem;line-height:1.2}.audience-tabs{flex-direction:column;align-items:center}.benefits-list{grid-template-columns:1fr;gap:1.5rem}.features-grid,.stats-grid,.pricing-grid{grid-template-columns:1fr}.pricing-card.featured{transform:none}.cta-actions,.cta-buttons{flex-direction:column;align-items:center;gap:1rem}.cta-content h2{font-size:2.2rem}.footer-content{grid-template-columns:1fr;text-align:center}.social-links{justify-content:center}.steps-grid{grid-template-columns:1fr;gap:2rem}.step{padding:2rem 1.5rem}.step-number{width:60px;height:60px;font-size:1.5rem}.benefits-grid{grid-template-columns:1fr;gap:2rem}.benefit-card{padding:2rem 1.5rem}.how-it-works,.benefits-section,.cta-section{padding:4rem 0}}.phonetics-content{max-width:100%}.phonetics-header{text-align:center;margin-bottom:3rem}.phonetics-header h3{font-size:2.2rem;color:#2d3748;margin-bottom:1rem}.phonetics-header p{font-size:1.1rem;color:#718096;max-width:600px;margin:0 auto;line-height:1.6}.phonetics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-bottom:3rem}.phonetics-category{background:#fff;border-radius:15px;padding:1.5rem;box-shadow:0 4px 15px #00000014;border:1px solid #e2e8f0;transition:all .3s ease}.phonetics-category:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f;border-color:#667eea}.phonetics-category h4{color:#2d3748;font-size:1.2rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #f7fafc;display:flex;align-items:center;gap:.5rem}.sound-item{background:linear-gradient(135deg,#f7fafc,#edf2f7);color:#4a5568;padding:.4rem .8rem;border-radius:20px;font-size:.85rem;border:1px solid #e2e8f0;transition:all .2s ease;white-space:nowrap;font-weight:500}.sound-item:hover{background:linear-gradient(135deg,#667eea,#4299e1);color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.phonetics-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.feature-highlight{background:linear-gradient(135deg,#f8fafc,#edf2f7);border-radius:12px;padding:1.5rem;display:flex;align-items:flex-start;gap:1rem;border:1px solid #e2e8f0;transition:all .3s ease}.feature-highlight:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001a;border-color:#667eea}.feature-icon{font-size:2rem;flex-shrink:0}.feature-highlight h4{color:#2d3748;font-size:1.1rem;margin-bottom:.5rem;font-weight:600}.feature-highlight p{color:#718096;font-size:.9rem;line-height:1.4;margin:0}@media (max-width: 1024px){.phonetics-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.phonetics-features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}@media (max-width: 768px){.phonetics-header h3{font-size:1.8rem}.phonetics-grid{grid-template-columns:1fr;gap:1rem}.phonetics-category{padding:1rem}.phonetics-category h4{font-size:1.1rem}.sound-item{font-size:.8rem;padding:.3rem .6rem}.phonetics-features{grid-template-columns:1fr;gap:1rem}.feature-highlight{padding:1rem}}@media (max-width: 480px){.hero-title{font-size:1.8rem}.cta-primary,.cta-secondary{padding:.8rem 1.5rem;font-size:.9rem}.section-title{font-size:1.8rem}.testimonials-grid{grid-template-columns:1fr}.phonetics-header p{font-size:1rem}.sounds-list{gap:.3rem}.sound-item{font-size:.75rem;padding:.25rem .5rem}}.nav-link{background:none;border:none;color:#4a5568;font-weight:500;font-size:1rem;cursor:pointer;transition:color .3s ease;font-family:inherit;text-decoration:none}.nav-link:hover,.nav-link.active{color:#5a67d8}.logo{cursor:pointer}.landing-footer{background:#2d3748;color:#fff;padding:3rem 0 1rem}.footer-container{max-width:1200px;margin:0 auto;padding:0 2rem}.footer-content{display:flex;justify-content:space-between;gap:4rem;margin-bottom:2rem}.footer-left{flex:1;max-width:400px}.footer-right{display:flex;gap:4rem}.footer-section h4{color:#fff;margin-bottom:1rem;font-weight:600}.footer-section ul{list-style:none;padding:0}.footer-section ul li{margin-bottom:.5rem}.footer-section a{color:#a0aec0;text-decoration:none;transition:color .3s ease}.footer-section a:hover{color:#fff}.footer-description{color:#a0aec0;line-height:1.6;margin-top:1rem}.footer-bottom{border-top:1px solid #4a5568;padding-top:1rem;display:flex;justify-content:space-between;align-items:center;color:#a0aec0}.footer-links{display:flex;gap:2rem;align-items:center}.version-info{color:#a0aec0;font-size:.85rem;font-family:Courier New,monospace;opacity:.7;transition:opacity .3s ease}.version-info:hover{opacity:1}.footer-legal-link{color:#fff!important;text-decoration:none;transition:opacity .3s ease}.footer-legal-link:hover{opacity:.8;color:#fff!important}@media (max-width: 768px){.footer-content{flex-direction:column;gap:2rem}.footer-left{max-width:100%;text-align:center}.footer-right{justify-content:space-around;gap:2rem}.footer-bottom{flex-direction:column;gap:1rem;text-align:center}.footer-links{justify-content:center}}@media (max-width: 480px){.footer-right{flex-direction:column;gap:2rem;text-align:center}.footer-section{margin-bottom:1rem}}.legal-hero{padding:120px 0 60px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center}.legal-hero-content h1{font-size:3rem;font-weight:700;margin-bottom:1rem}.legal-hero-content p{font-size:1.2rem;opacity:.9;margin-bottom:.5rem}.legal-content{padding:80px 0;background:#f8fafc}.legal-document{max-width:800px;margin:0 auto;background:#fff;padding:3rem;border-radius:16px;box-shadow:0 10px 30px #0000001a}.legal-section{margin-bottom:3rem}.legal-section:last-child{margin-bottom:0}.legal-section h2{color:#2d3748;font-size:1.8rem;font-weight:600;margin-bottom:1.5rem;padding-bottom:.5rem;border-bottom:2px solid #e2e8f0}.legal-section h3{color:#4a5568;font-size:1.3rem;font-weight:600;margin:2rem 0 1rem}.legal-section p{color:#4a5568;line-height:1.7;margin-bottom:1rem}.legal-section ul{margin:1rem 0;padding-left:1.5rem}.legal-section li{color:#4a5568;line-height:1.6;margin-bottom:.5rem}.contact-info{background:#f7fafc;padding:1.5rem;border-radius:8px;border-left:4px solid #667eea;margin:1rem 0}.contact-info p{margin-bottom:.5rem}.contact-info p:last-child{margin-bottom:0}@media (max-width: 768px){.legal-hero{padding:100px 0 40px}.legal-hero-content h1{font-size:2.2rem}.legal-hero-content p{font-size:1rem}.legal-document{padding:2rem 1.5rem;margin:0 1rem}.legal-section h2{font-size:1.5rem}.legal-section h3{font-size:1.2rem}}.how-it-works{padding:6rem 0;background:linear-gradient(135deg,#f8fafc,#edf2f7);position:relative}.how-it-works:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(0,0,0,0.03)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>') repeat;pointer-events:none}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem;margin-top:3rem;position:relative;z-index:1}.step{text-align:center;position:relative;background:#fff;padding:2.5rem 2rem;border-radius:20px;box-shadow:0 10px 30px #0000001a;border:1px solid rgba(255,255,255,.8)}.step:hover{box-shadow:0 15px 35px #0000001f;border-color:#667eea}.step-number{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;margin:0 auto 1.5rem;box-shadow:0 8px 20px #667eea4d}.step h3{color:#2d3748;margin-bottom:1rem;font-size:1.3rem}.step p{color:#4a5568;line-height:1.6}.benefits-section{padding:6rem 0;background:#fff;position:relative}.benefits-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(102,126,234,.05) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(118,75,162,.05) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(142,68,173,.05) 0%,transparent 50%);pointer-events:none}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;margin-top:3rem;position:relative;z-index:1}.benefit-card{background:#fff;padding:2.5rem;border-radius:20px;text-align:center;box-shadow:0 10px 30px #00000014;border:1px solid rgba(0,0,0,.05);position:relative}.benefit-card:hover{box-shadow:0 15px 35px #0000001f;border-color:#667eea33}.benefit-icon{font-size:4rem!important;flex-shrink:0;width:auto!important;height:auto!important;background:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;margin:0!important;display:inline-block!important}.benefit-card h3{color:#2d3748;margin-bottom:1rem}.benefit-card p{color:#4a5568;line-height:1.6}.cta-section{padding:6rem 0;background:linear-gradient(135deg,#667eea,#764ba2,#8e44ad,#9b59b6,#667eea);background-size:400% 400%;animation:gradientShift 8s ease-in-out infinite;color:#fff;text-align:center;position:relative;overflow:hidden}.cta-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="ctaDots" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="2" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23ctaDots)"/></svg>') repeat;pointer-events:none}.cta-content{position:relative;z-index:1}.cta-content h2{font-size:3rem;margin-bottom:1.5rem;text-shadow:0 2px 20px rgba(0,0,0,.3);animation:slideInUp 1s ease-out}.cta-content p{font-size:1.3rem;margin-bottom:2.5rem;opacity:.95;max-width:600px;margin-left:auto;margin-right:auto;text-shadow:0 1px 10px rgba(0,0,0,.2)}.cta-buttons{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}.demo-storybook{background:#fff;border-radius:10px;padding:1rem;box-shadow:0 4px 15px #0000001a}.demo-page{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.demo-image{font-size:2rem;background:#f7fafc;padding:1rem;border-radius:8px}.demo-text{flex:1;font-style:italic;color:#4a5568}.demo-sounds{display:flex;gap:.5rem}.sound-tag{background:#e2e8f0;color:#4a5568;padding:.25rem .5rem;border-radius:12px;font-size:.8rem}.story-example-section{padding:80px 0;background:linear-gradient(135deg,#f8fafc,#edf2f7)}.story-example-header{text-align:center;margin-bottom:3rem}.story-showcase{display:flex;justify-content:center;max-width:900px;margin:0 auto}.story-preview-card{background:#fff;border-radius:24px;box-shadow:0 20px 60px #0000001a;overflow:hidden;border:1px solid rgba(102,126,234,.1);transition:all .3s ease}.story-preview-card:hover{transform:translateY(-5px);box-shadow:0 30px 80px #00000026}.story-preview-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center}.story-character{display:flex;align-items:center;gap:1rem}.character-avatar{font-size:2.5rem;background:#fff3;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center}.character-info h4{margin:0;font-size:1.3rem;font-weight:700}.character-info p{margin:.25rem 0 0;opacity:.9;font-size:.9rem}.magic-badge{background:#fff3;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600}.story-page-preview{padding:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}.page-container{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px #0000001a}.story-page-image{width:100%;height:auto;display:block}.page-overlay{position:absolute;top:1rem;right:1rem}.page-number{background:#000000b3;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.8rem;font-weight:600}.story-dialogue{display:flex;flex-direction:column;gap:1rem}.dialogue-bubble{background:#f8fafc;border:2px solid #e2e8f0;border-radius:20px;padding:1.5rem;position:relative}.dialogue-bubble:before{content:"";position:absolute;left:-10px;top:20px;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #e2e8f0}.dialogue-bubble:after{content:"";position:absolute;left:-8px;top:20px;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #f8fafc}.dialogue-text{font-size:1.1rem;line-height:1.6;color:#2d3748;margin-bottom:1rem;font-style:italic}.sound-highlights{display:flex;align-items:center;gap:1rem}.sound-highlight{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.5rem 1rem;border-radius:20px;font-weight:700;font-size:1rem}.sound-count{color:#667eea;font-weight:600;font-size:.9rem}.story-features{padding:1.5rem 2rem;background:#f8fafc;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.feature-tag{display:flex;align-items:center;gap:.5rem;background:#fff;padding:.75rem 1rem;border-radius:12px;border:1px solid #e2e8f0;font-size:.9rem;font-weight:600;color:#4a5568}.feature-icon{font-size:1.1rem}.try-it-cta{padding:2rem;text-align:center;background:linear-gradient(135deg,#f8fafc,#edf2f7)}.try-it-cta .cta-primary{font-size:1.1rem;padding:1rem 2rem}@media (max-width: 768px){.story-page-preview{grid-template-columns:1fr;gap:1.5rem}.story-preview-header{flex-direction:column;gap:1rem;text-align:center}.story-features{grid-template-columns:1fr}.dialogue-text{font-size:1rem}}.features-hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:120px 0 80px;text-align:center}.features-hero-content h1{font-size:3rem;margin-bottom:1rem}.features-hero-content p{font-size:1.2rem;margin-bottom:2rem;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.main-features{padding:5rem 0;background:#fff}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:3rem}.feature-card{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 4px 20px #0000001a;transition:transform .3s ease}.feature-card:hover{transform:translateY(-5px)}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-card h3{color:#2d3748;margin-bottom:1rem;font-size:1.3rem}.feature-card p{color:#4a5568;line-height:1.6;margin-bottom:1rem}.feature-details{list-style:none;padding:0}.feature-details li{color:#4a5568;margin-bottom:.5rem;padding-left:1rem;position:relative}.feature-details li:before{content:"✓";color:#48bb78;font-weight:700;position:absolute;left:0}.speech-sounds-feature{padding:5rem 0;background:#f7fafc}.sounds-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}.sound-category-card{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 4px 20px #0000001a}.sound-category-card.green{border-left:4px solid #48bb78}.sound-category-card.blue{border-left:4px solid #4299e1}.sound-category-card.purple{border-left:4px solid #9f7aea}.sound-category-card.orange{border-left:4px solid #ed8936}.sound-category-card h3{color:#2d3748;margin-bottom:1rem}.sounds-list{display:flex;flex-wrap:wrap;gap:.5rem}.sound-tag{background:#e2e8f0;color:#4a5568;padding:.25rem .5rem;border-radius:12px;font-size:.9rem}.creation-process{padding:5rem 0;background:#fff}.process-steps{margin-top:3rem}.process-step{display:grid;grid-template-columns:1fr 2fr;gap:3rem;align-items:center;margin-bottom:4rem}.process-step:nth-child(2n){grid-template-columns:2fr 1fr}.process-step:nth-child(2n) .step-visual{order:2}.step-visual{display:flex;justify-content:center}.step-demo{background:#f7fafc;padding:2rem;border-radius:15px;min-height:200px;display:flex;align-items:center;justify-content:center}.character-demo .demo-character{display:flex;align-items:center;gap:1rem}.character-icon{font-size:3rem}.character-name{font-weight:700;color:#2d3748}.character-traits{color:#4a5568;font-size:.9rem}.sounds-demo .selected-sounds{display:flex;flex-direction:column;gap:.5rem}.sound-chip{background:#667eea;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem}.story-demo .story-preview{position:relative}.story-page{background:#fff;padding:1rem;border-radius:10px;box-shadow:0 2px 10px #0000001a}.page-image{font-size:2rem;text-align:center;margin-bottom:.5rem}.page-text{color:#4a5568;font-style:italic}.ai-badge{position:absolute;top:-10px;right:-10px;background:#48bb78;color:#fff;padding:.25rem .5rem;border-radius:12px;font-size:.8rem}.reading-demo .reader-interface{background:#fff;padding:1rem;border-radius:10px;box-shadow:0 2px 10px #0000001a}.reader-controls{display:flex;gap:.5rem;margin-bottom:1rem}.control-btn{background:#e2e8f0;padding:.5rem;border-radius:8px;font-size:1.2rem}.page-indicator{color:#4a5568;font-size:.9rem}.step-content h3{color:#2d3748;margin-bottom:1rem;font-size:1.5rem}.step-content p{color:#4a5568;line-height:1.6}.evidence-section{padding:5rem 0;background:#f7fafc}.evidence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:3rem}.evidence-card{background:#fff;padding:2rem;border-radius:15px;text-align:center;box-shadow:0 4px 20px #0000001a}.evidence-icon{font-size:3rem;margin-bottom:1rem}.evidence-card h3{color:#2d3748;margin-bottom:1rem}.evidence-card p{color:#4a5568;line-height:1.6}.success-hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:120px 0 80px;text-align:center}.success-hero-content h1{font-size:3rem;margin-bottom:1rem}.success-hero-content p{font-size:1.2rem;margin-bottom:2rem;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.hero-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem;max-width:600px;margin-left:auto;margin-right:auto}.hero-stat{text-align:center}.hero-stat .stat-number{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.hero-stat .stat-label{opacity:.9}.research-section{padding:5rem 0;background:#fff}.research-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:3rem}.research-stat{background:#f7fafc;padding:2rem;border-radius:15px;text-align:center}.research-stat .stat-number{font-size:2.5rem;font-weight:700;color:#667eea;margin-bottom:.5rem}.research-stat .stat-label{color:#2d3748;font-weight:600;margin-bottom:1rem}.research-stat .stat-source{color:#4a5568;font-size:.9rem;font-style:italic}.testimonials-section{padding:5rem 0;background:#f7fafc}.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:3rem}.testimonial-card{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 4px 20px #0000001a}.testimonial-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.testimonial-avatar{font-size:3rem}.testimonial-info h4{color:#2d3748;margin-bottom:.25rem}.testimonial-role{color:#667eea;font-weight:600;margin-bottom:.25rem}.testimonial-workplace{color:#4a5568;font-size:.9rem;margin-bottom:.25rem}.testimonial-location{color:#718096;font-size:.8rem}.testimonial-quote{color:#4a5568;line-height:1.6;font-style:italic;margin-bottom:1rem}.testimonial-results{background:#e6fffa;color:#234e52;padding:.75rem;border-radius:8px;font-size:.9rem}.case-studies-section{padding:5rem 0;background:#fff}.case-studies{margin-top:3rem}.case-study{background:#f7fafc;padding:2rem;border-radius:15px;margin-bottom:2rem}.case-study-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.case-study-header h3{color:#2d3748;font-size:1.3rem}.case-study-meta{display:flex;gap:1rem}.age-tag,.timeline-tag{background:#667eea;color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.8rem}.case-study-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.case-study-section h4{color:#2d3748;margin-bottom:.5rem}.case-study-section p{color:#4a5568;line-height:1.6}.results-list{list-style:none;padding:0}.results-list li{color:#4a5568;margin-bottom:.5rem;padding-left:1rem;position:relative}.results-list li:before{content:"✓";color:#48bb78;font-weight:700;position:absolute;left:0}.expect-hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:120px 0 80px;text-align:center}.expect-hero-content h1{font-size:3rem;margin-bottom:1rem}.expect-hero-content p{font-size:1.2rem;margin-bottom:2rem;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.timeline-preview{display:flex;justify-content:center;gap:2rem;margin-top:2rem}.timeline-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.timeline-number{background:#fff3;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.timeline-text{font-size:.9rem;text-align:center}.therapy-journey{padding:5rem 0;background:#fff}.journey-timeline{margin-top:3rem}.journey-phase{background:#f7fafc;padding:2rem;border-radius:15px;margin-bottom:2rem}.phase-header{margin-bottom:1.5rem}.phase-week{background:#667eea;color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.8rem;display:inline-block;margin-bottom:.5rem}.phase-header h3{color:#2d3748;margin-bottom:.5rem}.phase-header p{color:#4a5568;font-style:italic}.phase-content{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.phase-section h4{color:#2d3748;margin-bottom:.5rem}.phase-section ul{list-style:none;padding:0}.phase-section li{color:#4a5568;margin-bottom:.5rem;padding-left:1rem;position:relative}.phase-section li:before{content:"•";color:#667eea;font-weight:700;position:absolute;left:0}.user-expectations{padding:5rem 0;background:#f7fafc}.user-types{margin-top:3rem}.user-type-section{background:#fff;padding:2rem;border-radius:15px;margin-bottom:2rem}.user-type-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.user-type-icon{font-size:3rem}.user-type-header h3{color:#2d3748;font-size:1.5rem}.expectations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.expectation-category{background:#f7fafc;padding:1.5rem;border-radius:10px}.expectation-category h4{color:#2d3748;margin-bottom:1rem}.expectation-category ul{list-style:none;padding:0}.expectation-category li{color:#4a5568;margin-bottom:.5rem;padding-left:1rem;position:relative}.expectation-category li:before{content:"✓";color:#48bb78;font-weight:700;position:absolute;left:0}.quick-timeline{padding:5rem 0;background:#fff}.timeline-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:3rem}.timeline-milestone{background:#f7fafc;padding:1.5rem;border-radius:10px;text-align:center}.milestone-time{background:#667eea;color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.8rem;display:inline-block;margin-bottom:.5rem}.milestone-event{color:#2d3748;font-weight:600;margin-bottom:.5rem}.milestone-duration{color:#4a5568;font-size:.9rem}.realistic-expectations{padding:5rem 0;background:#f7fafc}.expectations-content{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem}.expectation-card{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 4px 20px #0000001a}.expectation-card.positive{border-left:4px solid #48bb78}.expectation-card.realistic{border-left:4px solid #ed8936}.expectation-card h3{color:#2d3748;margin-bottom:1rem}.expectation-card ul{list-style:none;padding:0}.expectation-card li{color:#4a5568;margin-bottom:.5rem;padding-left:1rem;position:relative}.expectation-card.positive li:before{content:"✓";color:#48bb78;font-weight:700;position:absolute;left:0}.expectation-card.realistic li:before{content:"•";color:#ed8936;font-weight:700;position:absolute;left:0}.getting-started{padding:5rem 0;background:#fff}.start-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:3rem 0}.start-step{text-align:center}.start-step .step-number{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto 1rem}.start-step h3{color:#2d3748;margin-bottom:1rem}.start-step p{color:#4a5568;line-height:1.6}.pricing-hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:120px 0 80px;text-align:center}.pricing-hero-content h1{font-size:3rem;margin-bottom:1rem}.pricing-hero-content p{font-size:1.2rem;margin-bottom:2rem;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.pricing-benefits{display:flex;justify-content:center;gap:2rem;margin-top:2rem;flex-wrap:wrap}.pricing-benefit{display:flex;align-items:center;gap:.5rem;background:#ffffff1a;padding:.5rem 1rem;border-radius:20px}.benefit-icon{font-size:1.2rem}.token-packs{padding:5rem 0;background:#fff}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}.pricing-card{background:#fff;border-radius:15px;box-shadow:0 4px 20px #0000001a;overflow:hidden;position:relative;transition:transform .3s ease}.pricing-card:hover{transform:translateY(-5px)}.pricing-card.popular{border:2px solid #667eea;transform:scale(1.05)}.popular-badge{background:#667eea;color:#fff;padding:.5rem 1rem;text-align:center;font-weight:600;font-size:.9rem}.pricing-header{padding:2rem;text-align:center;background:#f7fafc}.pricing-header h3{color:#2d3748;margin-bottom:.5rem;font-size:1.3rem}.token-count{color:#667eea;font-weight:700;font-size:1.1rem;margin-bottom:1rem}.price{margin-bottom:.5rem}.price-amount{font-size:2.5rem;font-weight:700;color:#2d3748}.price-per-token{color:#4a5568;font-size:.9rem;display:block}.story-estimate{color:#4a5568;font-style:italic}.pricing-content{padding:2rem}.best-for{background:#e6fffa;color:#234e52;padding:1rem;border-radius:8px;margin-bottom:1.5rem;font-size:.9rem}.features-list{list-style:none;padding:0}.features-list li{color:#4a5568;margin-bottom:.5rem;padding-left:1.5rem;position:relative}.feature-check{color:#48bb78;font-weight:700;position:absolute;left:0}.pricing-footer{padding:2rem;text-align:center}.pricing-cta{background:#e2e8f0;color:#4a5568;border:none;border-radius:25px;padding:1rem 2rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%}.pricing-cta.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.pricing-cta:hover{transform:translateY(-2px)}.how-tokens-work{padding:5rem 0;background:#f7fafc}.token-explanation{margin-top:3rem}.token-flow{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:3rem;flex-wrap:wrap}.flow-step{background:#fff;padding:1.5rem;border-radius:10px;text-align:center;box-shadow:0 2px 10px #0000001a;min-width:120px}.step-icon{font-size:2rem;margin-bottom:.5rem}.step-text{color:#2d3748;font-weight:600;margin-bottom:.5rem}.step-cost{color:#667eea;font-weight:700;font-size:.9rem}.flow-arrow{font-size:1.5rem;color:#4a5568}.token-details{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 4px 20px #0000001a}.token-details h3{color:#2d3748;margin-bottom:1rem}.token-details ul{list-style:none;padding:0}.token-details li{color:#4a5568;margin-bottom:.5rem;padding-left:1rem;position:relative}.token-details li:before{content:"✓";color:#48bb78;font-weight:700;position:absolute;left:0}.cost-comparison{padding:5rem 0;background:#fff}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem}.comparison-card{padding:2rem;border-radius:15px;box-shadow:0 4px 20px #0000001a}.comparison-card.traditional{background:#fed7d7;border-left:4px solid #e53e3e}.comparison-card.speechstory{background:#e6fffa;border-left:4px solid #48bb78}.comparison-card h3{color:#2d3748;margin-bottom:1rem}.comparison-cost{font-size:2rem;font-weight:700;color:#2d3748;margin-bottom:1rem}.comparison-features{list-style:none;padding:0}.comparison-features li{margin-bottom:.5rem;padding-left:1.5rem;position:relative}.comparison-features li.negative{color:#e53e3e}.comparison-features li.positive{color:#38a169}.free-trial{padding:5rem 0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center}.trial-content h2{font-size:2.5rem;margin-bottom:1rem}.trial-content p{font-size:1.2rem;margin-bottom:2rem;opacity:.9}.trial-features{display:flex;justify-content:center;gap:2rem;margin:2rem 0;flex-wrap:wrap}.trial-feature{display:flex;align-items:center;gap:.5rem;background:#ffffff1a;padding:.5rem 1rem;border-radius:20px}.trial-icon{font-size:1.2rem}.pricing-faq{padding:5rem 0;background:#f7fafc}.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:3rem}.faq-item{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 4px 20px #0000001a}.faq-question{color:#2d3748;margin-bottom:1rem;font-size:1.1rem}.faq-answer{color:#4a5568;line-height:1.6}.enterprise-section{padding:5rem 0;background:#fff;text-align:center}.enterprise-content h2{color:#2d3748;margin-bottom:1rem;font-size:2.5rem}.enterprise-content p{color:#4a5568;font-size:1.2rem;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}.enterprise-features{display:flex;justify-content:center;gap:2rem;margin:2rem 0;flex-wrap:wrap}.enterprise-feature{display:flex;align-items:center;gap:.5rem;background:#f7fafc;padding:.75rem 1.5rem;border-radius:20px}.enterprise-icon{font-size:1.2rem}@media (max-width: 768px){.hero-container{grid-template-columns:1fr;gap:2rem}.steps-grid,.benefits-grid,.features-grid,.sounds-categories,.evidence-grid,.testimonials-grid,.expectations-grid,.timeline-grid,.pricing-grid,.comparison-grid{grid-template-columns:1fr}.process-step,.process-step:nth-child(2n){grid-template-columns:1fr}.process-step:nth-child(2n) .step-visual{order:0}.phase-content,.expectations-content,.start-steps{grid-template-columns:1fr}.token-flow{flex-direction:column}.flow-arrow{transform:rotate(90deg)}.hero-stats-grid{grid-template-columns:1fr}.timeline-preview,.pricing-benefits,.trial-features,.enterprise-features{flex-direction:column;align-items:center}.footer-content{grid-template-columns:1fr;text-align:center}.footer-bottom{flex-direction:column;gap:1rem}}.story-page{min-height:100vh}.shared-story-banner{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 20px;text-align:center;font-size:14px;box-shadow:0 2px 4px #0000001a}.shared-story-banner a{color:#ffe4e1;text-decoration:underline;font-weight:600}.shared-story-banner a:hover{color:#fff}.story-actions{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.story-actions .back-button,.story-actions .edit-button,.story-actions .share-button,.story-actions .create-new-button,.story-actions .sign-in-button{display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;min-height:48px;box-shadow:0 4px 15px #667eea4d}.story-actions .edit-button{background:linear-gradient(135deg,#f59e0b,#f97316);box-shadow:0 4px 15px #f59e0b4d}.story-actions .share-button{background:linear-gradient(135deg,#11998e,#38ef7d);box-shadow:0 4px 15px #11998e4d}.story-actions .create-new-button{background:linear-gradient(135deg,#f093fb,#f5576c);box-shadow:0 4px 15px #f093fb4d}.story-actions .sign-in-button{background:linear-gradient(135deg,#ffecd2,#fcb69f);color:#333;box-shadow:0 4px 15px #ffecd266}.story-actions .back-button:hover,.story-actions .edit-button:hover,.story-actions .share-button:hover,.story-actions .create-new-button:hover,.story-actions .sign-in-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.story-actions .back-button span,.story-actions .edit-button span,.story-actions .share-button span,.story-actions .create-new-button span,.story-actions .sign-in-button span{font-size:16px}@media (max-width: 768px){.story-actions{justify-content:center;gap:10px}.story-actions .back-button,.story-actions .edit-button,.story-actions .share-button,.story-actions .create-new-button,.story-actions .sign-in-button{padding:10px 16px;font-size:13px;flex:1;justify-content:center;min-width:auto}}.story-page-fullwidth{width:100vw;min-height:100vh;margin:0;padding:0;position:relative;overflow-x:hidden}.shared-story-banner-sticky{position:fixed;bottom:20px;right:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 16px;border-radius:25px;font-size:13px;box-shadow:0 8px 25px #667eea66;z-index:1000;max-width:320px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.shared-story-banner-sticky:hover{transform:translateY(-2px);box-shadow:0 12px 35px #667eea80}.shared-story-banner-sticky p{margin:0;line-height:1.4}.shared-story-banner-sticky a{color:#ffe4e1;text-decoration:underline;font-weight:600;transition:color .3s ease}.shared-story-banner-sticky a:hover{color:#fff}@media (max-width: 768px){.shared-story-banner-sticky{bottom:15px;right:15px;left:15px;max-width:none;font-size:12px;padding:10px 14px;text-align:center}}@media (max-width: 480px){.shared-story-banner-sticky{bottom:10px;right:10px;left:10px;padding:8px 12px}}.pricing-hero-new{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:120px 0 80px;text-align:center;position:relative;overflow:hidden}.pricing-hero-new:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(120,84,232,.2) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,119,48,.2) 0%,transparent 50%);pointer-events:none}.pricing-hero-new .pricing-hero-content{position:relative;z-index:2}.pricing-hero-new h1{font-size:3.5rem;font-weight:800;margin-bottom:1.5rem;background:linear-gradient(45deg,#fff,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.pricing-hero-new p{font-size:1.3rem;margin-bottom:3rem;opacity:.95;max-width:700px;margin-left:auto;margin-right:auto;line-height:1.6}.pricing-highlights{display:flex;justify-content:center;gap:2.5rem;margin-top:3rem;flex-wrap:wrap}.highlight-item{display:flex;align-items:center;gap:.75rem;background:#ffffff26;padding:1rem 1.5rem;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:all .3s ease}.highlight-item:hover{transform:translateY(-2px);background:#fff3}.highlight-icon{font-size:1.4rem}.features-banner{background:linear-gradient(135deg,#f8fafc,#e2e8f0);padding:4rem 0;text-align:center}.features-banner-content h2{color:#2d3748;font-size:2.2rem;font-weight:700;margin-bottom:1rem}.features-banner-content p{color:#4a5568;font-size:1.1rem;margin-bottom:2.5rem;max-width:600px;margin-left:auto;margin-right:auto}.included-features{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;max-width:900px;margin:0 auto}.feature-tag{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.75rem 1.25rem;border-radius:20px;font-size:.9rem;font-weight:600;box-shadow:0 4px 15px #667eea4d;transition:all .3s ease}.feature-tag:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.pricing-grid-new{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2.5rem;margin-top:4rem;max-width:1200px;margin-left:auto;margin-right:auto}.pricing-card-new{background:#fff;border-radius:24px;box-shadow:0 8px 30px #00000014;overflow:hidden;position:relative;transition:all .4s ease;border:2px solid transparent}.pricing-card-new:hover{transform:translateY(-8px);box-shadow:0 20px 50px #00000026}.pricing-card-new.emerald{border-color:#10b981}.pricing-card-new.emerald:hover{box-shadow:0 20px 50px #10b98133}.pricing-card-new.indigo{border-color:#6366f1;transform:scale(1.05)}.pricing-card-new.indigo:hover{box-shadow:0 25px 60px #6366f140;transform:scale(1.05) translateY(-8px)}.pricing-card-new.amber{border-color:#f59e0b}.pricing-card-new.amber:hover{box-shadow:0 20px 50px #f59e0b33}.popular-badge-new{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:.75rem 1.5rem;text-align:center;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.pricing-header-new{padding:2.5rem 2rem 2rem;text-align:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9)}.pricing-header-new h3{color:#1a202c;margin-bottom:1rem;font-size:1.5rem;font-weight:700}.token-display-new{margin-bottom:1.5rem}.token-number{font-size:3.5rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;line-height:1}.token-label{color:#6b7280;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}.price-new{margin-bottom:1rem}.price-amount-new{font-size:2.5rem;font-weight:800;color:#1a202c;display:block;line-height:1}.price-per-token-new{color:#6b7280;font-size:.9rem;font-weight:500}.story-estimate-new{color:#059669;font-weight:700;font-size:1.1rem;background:#ecfdf5;padding:.5rem 1rem;border-radius:15px;display:inline-block}.pricing-content-new{padding:2rem}.best-for-new{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;padding:1.25rem;border-radius:15px;margin-bottom:2rem;font-size:.95rem;font-weight:600;text-align:center}.all-features-included{background:#f8fafc;padding:1.5rem;border-radius:15px;border:2px solid #e2e8f0}.features-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:#1a202c}.features-icon{font-size:1.2rem}.features-list-new{list-style:none;padding:0;margin:0}.features-list-new li{color:#4a5568;margin-bottom:.75rem;padding-left:2rem;position:relative;font-size:.95rem;line-height:1.5}.feature-check-new{position:absolute;left:0;top:0;color:#10b981;font-weight:700;font-size:1.1rem}.and-more{color:#6b7280;font-style:italic}.pricing-footer-new{padding:2rem;text-align:center}.pricing-cta-new{background:linear-gradient(135deg,#e5e7eb,#d1d5db);color:#4b5563;border:none;border-radius:25px;padding:1.25rem 2rem;font-weight:700;cursor:pointer;transition:all .3s ease;width:100%;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem}.pricing-cta-new.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 8px 25px #667eea4d}.pricing-cta-new:hover{transform:translateY(-2px)}.pricing-cta-new.primary:hover{box-shadow:0 12px 35px #667eea66}.one-time-purchase{color:#6b7280;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.how-it-works-new{padding:6rem 0;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.usage-explanation{margin-top:4rem}.usage-flow{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:4rem;flex-wrap:wrap}.flow-step-new{background:#fff;padding:2rem 1.5rem;border-radius:20px;text-align:center;box-shadow:0 8px 25px #00000014;min-width:140px;transition:all .3s ease}.flow-step-new:hover{transform:translateY(-5px);box-shadow:0 15px 35px #0000001f}.step-icon-new{font-size:2.5rem;margin-bottom:1rem}.step-text{color:#1a202c;font-weight:700;margin-bottom:.75rem;font-size:.95rem}.step-cost-new{font-weight:700;font-size:.9rem;padding:.5rem 1rem;border-radius:15px;display:inline-block}.step-cost-new.free{background:#dcfce7;color:#166534}.step-cost-new.tokens{background:#ddd6fe;color:#5b21b6}.flow-arrow-new{font-size:2rem;color:#6b7280;font-weight:700}.token-breakdown{background:#fff;padding:3rem;border-radius:20px;box-shadow:0 10px 30px #00000014}.token-breakdown h3{color:#1a202c;margin-bottom:2rem;font-size:1.5rem;font-weight:700;text-align:center}.breakdown-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.breakdown-item{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:#f8fafc;border-radius:15px;border:1px solid #e2e8f0;transition:all .3s ease}.breakdown-item:hover{background:#f1f5f9;transform:translateY(-2px)}.breakdown-icon{font-size:1.5rem;width:40px;text-align:center}.value-comparison{padding:6rem 0;background:#fff}.comparison-grid-new{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:4rem;max-width:1000px;margin-left:auto;margin-right:auto}.comparison-card-new{padding:3rem 2.5rem;border-radius:20px;box-shadow:0 10px 30px #00000014;position:relative;transition:all .3s ease}.comparison-card-new:hover{transform:translateY(-5px);box-shadow:0 20px 50px #0000001f}.comparison-card-new.traditional{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-left:4px solid #dc2626}.comparison-card-new.speechstory{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-left:4px solid #059669}.comparison-header{margin-bottom:2rem;text-align:center}.comparison-header h3{color:#1a202c;margin-bottom:1rem;font-size:1.4rem;font-weight:700}.comparison-cost{font-size:2.5rem;font-weight:800;color:#1a202c;margin-bottom:.5rem}.cost-type{color:#6b7280;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.comparison-features-new{list-style:none;padding:0;margin:0}.comparison-features-new li{margin-bottom:1rem;padding-left:2rem;position:relative;font-size:.95rem;line-height:1.5}.comparison-features-new li.negative{color:#dc2626}.comparison-features-new li.positive{color:#059669}.free-trial-new{padding:6rem 0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center;position:relative;overflow:hidden}.free-trial-new:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 70%,rgba(139,92,246,.3) 0%,transparent 50%);pointer-events:none}.trial-content-new{position:relative;z-index:2;max-width:600px;margin:0 auto}.trial-icon-large{font-size:4rem;margin-bottom:2rem;display:block}.trial-content-new h2{font-size:3rem;font-weight:800;margin-bottom:1.5rem}.trial-content-new p{font-size:1.2rem;margin-bottom:3rem;opacity:.95;line-height:1.6}.trial-features-new{display:flex;justify-content:center;gap:2rem;margin:3rem 0;flex-wrap:wrap}.trial-feature-new{display:flex;align-items:center;gap:.75rem;background:#ffffff26;padding:1rem 1.5rem;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.trial-icon{font-size:1.3rem}.cta-primary-new{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3);padding:1.25rem 2.5rem;border-radius:25px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cta-primary-new:hover{background:#ffffff40;transform:translateY(-2px);box-shadow:0 10px 30px #0003}.pricing-faq-new{padding:6rem 0;background:#f8fafc}.faq-grid-new{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin-top:4rem}.faq-item-new{background:#fff;padding:2.5rem;border-radius:20px;box-shadow:0 8px 25px #0000000f;transition:all .3s ease}.faq-item-new:hover{transform:translateY(-3px);box-shadow:0 15px 35px #0000001a}.faq-question-new{font-size:1.2rem;font-weight:700;color:#1a202c;margin-bottom:1rem}.faq-answer-new{color:#4a5568;line-height:1.6;font-size:.95rem}.enterprise-section-new{padding:6rem 0;background:linear-gradient(135deg,#1e293b,#334155);color:#fff;text-align:center}.enterprise-content-new h2{font-size:2.5rem;font-weight:800;margin-bottom:1.5rem}.enterprise-content-new p{font-size:1.2rem;margin-bottom:3rem;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.enterprise-features-new{display:flex;justify-content:center;gap:2.5rem;margin:3rem 0;flex-wrap:wrap}.enterprise-feature-new{display:flex;align-items:center;gap:.75rem;background:#ffffff1a;padding:1rem 1.5rem;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.enterprise-icon{font-size:1.3rem}.cta-secondary-new{background:#ffffff26;color:#fff;border:2px solid rgba(255,255,255,.25);padding:1.25rem 2rem;border-radius:25px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cta-secondary-new:hover{background:#fff3;transform:translateY(-2px)}@media (max-width: 1024px){.pricing-grid-new{grid-template-columns:1fr;max-width:500px}.pricing-card-new.indigo{transform:none}.pricing-card-new.indigo:hover{transform:translateY(-8px)}.comparison-grid-new{grid-template-columns:1fr;gap:2rem}.breakdown-grid{grid-template-columns:1fr}}@media (max-width: 768px){.pricing-hero-new h1{font-size:2.5rem}.pricing-hero-new p{font-size:1.1rem}.pricing-highlights{flex-direction:column;align-items:center;gap:1rem}.included-features{gap:.75rem}.feature-tag{font-size:.85rem;padding:.5rem 1rem}.usage-flow{flex-direction:column;gap:1rem}.flow-arrow-new{transform:rotate(90deg)}.trial-features-new,.enterprise-features-new{flex-direction:column;align-items:center;gap:1rem}.faq-grid-new{grid-template-columns:1fr}.enterprise-content-new h2{font-size:2rem}.trial-content-new h2{font-size:2.2rem}.features-grid-showcase{grid-template-columns:1fr;gap:1.5rem}.feature-category{padding:2rem}.guarantee-badge{flex-direction:column;text-align:center;padding:2rem}.guarantee-icon{font-size:3rem}}.token-packs-new{padding:6rem 0;background:#fff}.all-features-section{padding:6rem 0;background:linear-gradient(135deg,#f8fafc,#edf2f7);position:relative}.all-features-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,rgba(102,126,234,.05) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(118,75,162,.05) 0%,transparent 50%);pointer-events:none}.features-section-content{position:relative;z-index:2}.features-showcase{margin-top:4rem}.features-grid-showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.5rem;margin-bottom:3rem}.feature-category{background:#fff;padding:2.5rem;border-radius:20px;box-shadow:0 8px 25px #00000014;border:1px solid rgba(0,0,0,.05);transition:all .3s ease}.feature-category:hover{transform:translateY(-5px);box-shadow:0 15px 35px #0000001f;border-color:#667eea33}.feature-category h3{color:#1a202c;font-size:1.3rem;font-weight:700;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}.feature-list-showcase{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.feature-list-showcase li{color:#4a5568;padding-left:1.5rem;position:relative;font-size:.95rem;line-height:1.5}.feature-list-showcase li:before{content:"✓";position:absolute;left:0;top:0;color:#10b981;font-weight:700;font-size:1rem}.features-guarantee{display:flex;justify-content:center;margin-top:3rem}.guarantee-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem 3rem;border-radius:20px;display:flex;align-items:center;gap:1rem;box-shadow:0 10px 30px #667eea4d;max-width:500px;width:100%}.guarantee-icon{font-size:2rem;flex-shrink:0}.guarantee-text strong{font-size:1.2rem;display:block;margin-bottom:.5rem}.guarantee-text p{margin:0;opacity:.95;font-size:.95rem;line-height:1.4}.success-message-large{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:1rem 1.5rem;border-radius:12px;margin:1rem 0;text-align:center;font-weight:600;box-shadow:0 4px 12px #10b9814d}.error-message-large{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;padding:1rem 1.5rem;border-radius:12px;margin:1rem 0;text-align:center;font-weight:600;box-shadow:0 4px 12px #ef44444d}.auth-required{text-align:center;padding:3rem 1rem;background:#fff;border-radius:16px;box-shadow:0 8px 32px #0000001a;margin:2rem 0}.auth-required h2{color:#1f2937;margin-bottom:1rem}.auth-required p{color:#6b7280;margin-bottom:2rem}.billing-management{padding:4rem 0;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.billing-card{background:#fff;border-radius:16px;padding:2rem;text-align:center;box-shadow:0 8px 32px #0000001a;max-width:600px;margin:0 auto}.billing-card h2{color:#1f2937;margin-bottom:1rem}.billing-card p{color:#6b7280;margin-bottom:2rem}.billing-section{display:flex;flex-direction:column;gap:1.5rem}.billing-info h3{color:#1f2937;margin-bottom:.5rem}.billing-info p{color:#6b7280;margin:0}.billing-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.manage-billing-button,.buy-more-button{padding:.75rem 1.5rem;border-radius:8px;border:none;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.manage-billing-button{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.manage-billing-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #3b82f666}.manage-billing-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.buy-more-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.buy-more-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #10b98166}.buy-tokens-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;width:100%}.security-section{padding:4rem 0;background:linear-gradient(135deg,#1f2937,#111827);color:#fff}.security-content{text-align:center}.security-content h2{margin-bottom:2rem}.security-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;max-width:800px;margin:0 auto}.security-item{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#ffffff1a;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.security-icon{font-size:1.5rem;flex-shrink:0}.loading-spinner-small{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.billing-actions{flex-direction:column}.manage-billing-button,.buy-more-button{width:100%;justify-content:center}.security-features{grid-template-columns:1fr}.security-item{text-align:left}}.pricing-hero-simple{padding:4rem 0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center}.pricing-hero-simple h1{font-size:3rem;font-weight:800;margin-bottom:1rem;color:#fff}.pricing-hero-simple p{font-size:1.25rem;margin-bottom:2rem;opacity:.9;max-width:600px;margin-left:auto;margin-right:auto}.token-packs-simple{padding:4rem 0;background:#f8fafc}.pricing-grid-simple{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;max-width:1200px;margin:0 auto}.pricing-card-simple{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 20px #0000001a;position:relative;border:2px solid transparent}.pricing-card-simple.emerald{border-color:#10b981}.pricing-card-simple.indigo{border-color:#6366f1}.pricing-card-simple.amber{border-color:#f59e0b}.pricing-card-simple.popular{border-color:#6366f1;box-shadow:0 8px 30px #6366f14d}.popular-badge-simple{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:600}.pricing-header-simple{text-align:center;margin-bottom:2rem}.pricing-header-simple h3{font-size:1.5rem;font-weight:700;color:#1f2937;margin-bottom:1rem}.token-display-simple{margin-bottom:1rem}.token-number{font-size:3rem;font-weight:800;color:#1f2937;display:block}.token-label{font-size:1rem;color:#6b7280;font-weight:500}.price-simple{margin-bottom:.5rem}.price-amount-simple{font-size:2rem;font-weight:700;color:#1f2937}.story-estimate-simple{color:#6b7280;font-size:.875rem;margin-bottom:1rem}.pricing-content-simple{margin-bottom:2rem}.best-for-simple{color:#374151;font-size:.875rem;text-align:center;padding:1rem;background:#f3f4f6;border-radius:8px}.pricing-footer-simple{text-align:center}.pricing-cta-simple{width:100%;padding:1rem 2rem;border:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.pricing-cta-simple.primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.pricing-cta-simple.secondary{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.pricing-cta-simple:disabled{opacity:.6;cursor:not-allowed}.one-time-purchase{font-size:.75rem;color:#6b7280;text-align:center}.all-features-section-simple{padding:4rem 0;background:#fff}.features-showcase-simple{max-width:1200px;margin:0 auto}.features-grid-simple{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}.feature-category-simple{background:#f8fafc;padding:2rem;border-radius:12px;border-left:4px solid #6366f1}.feature-category-simple h3{color:#1f2937;margin-bottom:1rem;font-size:1.25rem;font-weight:600}.feature-list-simple{list-style:none;padding:0;margin:0}.feature-list-simple li{color:#374151;position:relative;padding:.5rem 0 .5rem 1.5rem}.feature-list-simple li:before{content:"✓";position:absolute;left:0;color:#10b981;font-weight:700}.features-guarantee-simple{text-align:center;margin-top:3rem}.guarantee-badge-simple{display:inline-flex;align-items:center;gap:1rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:1.5rem 2rem;border-radius:12px;max-width:500px}.guarantee-icon{font-size:2rem}.guarantee-text strong{display:block;font-size:1.125rem;margin-bottom:.5rem}.guarantee-text p{margin:0;opacity:.9}.how-it-works-simple{padding:4rem 0;background:#f8fafc}.usage-explanation-simple{max-width:1000px;margin:0 auto}.usage-visual-simple{margin-bottom:3rem}.usage-flow-simple{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}.flow-step-simple{text-align:center;padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;min-width:150px}.step-icon-simple{font-size:2rem;margin-bottom:.5rem}.step-text{font-weight:600;color:#1f2937;margin-bottom:.5rem}.step-cost-simple{font-size:.875rem;padding:.25rem .75rem;border-radius:20px;font-weight:500}.step-cost-simple.free{background:#dcfce7;color:#166534}.step-cost-simple.tokens{background:#dbeafe;color:#1e40af}.flow-arrow-simple{font-size:1.5rem;color:#6b7280}.token-breakdown-simple{text-align:center}.token-breakdown-simple h3{color:#1f2937;margin-bottom:2rem;font-size:1.5rem}.breakdown-grid-simple{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;max-width:800px;margin:0 auto}.breakdown-item-simple{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a}.breakdown-icon{font-size:1.5rem;flex-shrink:0}.value-comparison-simple{padding:4rem 0;background:#fff}.comparison-grid-simple{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;max-width:1000px;margin:0 auto}.comparison-card-simple{padding:2rem;border-radius:16px;box-shadow:0 4px 20px #0000001a}.comparison-card-simple.traditional{background:#fef2f2;border:2px solid #fecaca}.comparison-card-simple.speechstory{background:#f0fdf4;border:2px solid #bbf7d0}.comparison-header h3{color:#1f2937;margin-bottom:1rem;font-size:1.25rem}.comparison-cost{font-size:2rem;font-weight:700;color:#1f2937}.cost-type{color:#6b7280;font-size:.875rem;margin-bottom:1.5rem}.comparison-features-simple{list-style:none;padding:0;margin:0}.comparison-features-simple li{padding:.5rem 0;font-size:.875rem}.comparison-features-simple li.negative{color:#dc2626}.comparison-features-simple li.positive{color:#059669}.free-trial-simple{padding:4rem 0;background:linear-gradient(135deg,#1f2937,#111827);color:#fff}.trial-content-simple{text-align:center;max-width:600px;margin:0 auto}.trial-icon-large{font-size:4rem;margin-bottom:1rem}.trial-content-simple h2{font-size:2.5rem;margin-bottom:1rem}.trial-content-simple p{font-size:1.25rem;margin-bottom:2rem;opacity:.9}.trial-features-simple{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;flex-wrap:wrap}.trial-feature-simple{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.trial-icon{font-size:1.25rem}.cta-primary-simple{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;padding:1rem 2rem;border-radius:8px;font-weight:600;font-size:1.125rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}.pricing-faq-simple{padding:4rem 0;background:#f8fafc}.faq-grid-simple{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;max-width:1200px;margin:0 auto}.faq-item-simple{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 2px 10px #0000001a}.faq-question-simple{font-weight:600;color:#1f2937;margin-bottom:1rem;font-size:1.125rem}.faq-answer-simple{color:#374151;line-height:1.6}.enterprise-section-simple{padding:4rem 0;background:#fff}.enterprise-content-simple{text-align:center;max-width:800px;margin:0 auto}.enterprise-content-simple h2{color:#1f2937;margin-bottom:1rem;font-size:2rem}.enterprise-content-simple p{color:#6b7280;margin-bottom:2rem;font-size:1.125rem}.enterprise-features-simple{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;flex-wrap:wrap}.enterprise-feature-simple{display:flex;align-items:center;gap:.5rem;color:#374151}.enterprise-icon{font-size:1.25rem}.cta-secondary-simple{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:1rem 2rem;border-radius:8px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}@media (max-width: 768px){.pricing-hero-simple h1{font-size:2rem}.pricing-hero-simple p{font-size:1rem}.pricing-grid-simple{grid-template-columns:1fr;gap:1.5rem}.features-grid-simple{grid-template-columns:1fr}.usage-flow-simple{flex-direction:column}.flow-arrow-simple{transform:rotate(90deg)}.comparison-grid-simple{grid-template-columns:1fr}.trial-features-simple{flex-direction:column;gap:1rem}.faq-grid-simple{grid-template-columns:1fr}.enterprise-features-simple{flex-direction:column;gap:1rem}.breakdown-grid-simple{grid-template-columns:1fr}}.success-loading{padding:120px 0 80px;min-height:100vh;background:linear-gradient(135deg,#f8fafc,#edf2f7);display:flex;align-items:center;justify-content:center}.loading-content{text-align:center}.loading-spinner{font-size:4rem;animation:bounce 1s infinite;margin-bottom:1rem}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}.loading-content h2{color:#2d3748;margin-bottom:.5rem}.loading-content p{color:#6b7280}.success-error{padding:120px 0 80px;min-height:100vh;background:linear-gradient(135deg,#f8fafc,#edf2f7);display:flex;align-items:center;justify-content:center}.error-content{text-align:center;max-width:500px}.error-icon{font-size:4rem;margin-bottom:1rem}.error-content h2{color:#dc2626;margin-bottom:1rem}.error-content p{color:#6b7280;margin-bottom:2rem}.error-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.celebration-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}.celebration-overlay{position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.celebration-content{background:#fff;border-radius:20px;padding:3rem;text-align:center;position:relative;max-width:500px;margin:2rem;box-shadow:0 20px 60px #0000004d;animation:slideInUp .5s ease-out}.celebration-animation{position:relative;margin-bottom:2rem;height:100px}.confetti{position:absolute;font-size:2rem;animation:confettiFall 3s infinite}.confetti:nth-child(1){left:10%;animation-delay:0s}.confetti:nth-child(2){left:30%;animation-delay:.5s}.confetti:nth-child(3){left:50%;animation-delay:1s}.confetti:nth-child(4){left:70%;animation-delay:1.5s}.confetti:nth-child(5){left:90%;animation-delay:2s}@keyframes confettiFall{0%{transform:translateY(-100px) rotate(0);opacity:1}to{transform:translateY(100px) rotate(360deg);opacity:0}}@keyframes slideInUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.celebration-text h2{color:#2d3748;margin-bottom:1rem;font-size:2rem}.celebration-text p{color:#6b7280;margin-bottom:2rem}.close-celebration{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease}.close-celebration:hover{transform:translateY(-2px);box-shadow:0 10px 30px #667eea66}.payment-success-hero{padding:120px 0 80px;background:linear-gradient(135deg,#f8fafc,#edf2f7);text-align:center}.success-content{max-width:800px;margin:0 auto}.success-icon-large{font-size:5rem;margin-bottom:1rem;animation:bounce 2s infinite}.success-content h1{font-size:3rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.success-subtitle{font-size:1.2rem;color:#6b7280;margin-bottom:3rem}.payment-summary{margin-bottom:2rem}.summary-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 10px 30px #0000001a;max-width:400px;margin:0 auto}.summary-card h3{color:#2d3748;margin-bottom:1.5rem;font-size:1.3rem}.summary-details{display:flex;flex-direction:column;gap:1rem}.summary-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid #f3f4f6}.summary-item:last-child{border-bottom:none}.summary-label{color:#6b7280;font-weight:500}.summary-value{color:#2d3748;font-weight:700;font-size:1.1rem}.auth-notice{margin-top:1rem;padding:1rem;background:#fef3c7;border-radius:8px;border-left:4px solid #f59e0b}.auth-notice p{margin:0;color:#92400e;font-size:.9rem;font-weight:500}.token-dashboard{padding:80px 0;background:#fff}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1000px;margin:0 auto}.dashboard-card{background:#fff;border-radius:20px;box-shadow:0 10px 30px #0000001a;overflow:hidden;border:1px solid rgba(0,0,0,.05)}.dashboard-card .card-header{background:linear-gradient(135deg,#f8fafc,#edf2f7);padding:1.5rem 2rem;border-bottom:1px solid #e5e7eb}.dashboard-card .card-header h3{color:#2d3748;font-size:1.3rem;font-weight:700;margin:0}.dashboard-card .card-content{padding:2rem}.balance-display{text-align:center;margin-bottom:1.5rem}.balance-number{font-size:4rem;font-weight:800;color:#667eea;line-height:1;margin-bottom:.5rem}.balance-label{color:#6b7280;font-size:1.1rem;font-weight:500}.balance-estimate{display:flex;align-items:center;justify-content:center;gap:.5rem;color:#4a5568;background:#f7fafc;padding:1rem;border-radius:12px}.estimate-icon{font-size:1.2rem}.action-buttons{display:flex;flex-direction:column;gap:1rem}.action-button{display:flex;align-items:center;gap:1rem;padding:1.5rem;border:none;border-radius:16px;cursor:pointer;transition:all .3s ease;text-align:left;width:100%}.action-button.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.action-button.secondary{background:#f7fafc;color:#2d3748;border:2px solid #e2e8f0}.action-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #00000026}.action-icon{font-size:1.5rem;flex-shrink:0}.action-text{flex:1}.action-title{font-weight:700;font-size:1.1rem;margin-bottom:.25rem}.action-subtitle{font-size:.9rem;opacity:.8}.token-usage-guide{padding:80px 0;background:linear-gradient(135deg,#f8fafc,#edf2f7)}.usage-steps{display:flex;align-items:center;justify-content:center;gap:1rem;max-width:1200px;margin:0 auto;flex-wrap:wrap}.usage-step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-width:150px}.usage-step .step-number{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;margin-bottom:1rem}.usage-step .step-content{flex:1}.usage-step .step-content h3{color:#2d3748;margin-bottom:.5rem;font-size:1.1rem}.usage-step .step-content p{color:#6b7280;font-size:.9rem;margin-bottom:1rem}.step-cost{padding:.5rem 1rem;border-radius:20px;font-size:.8rem;font-weight:600}.step-cost.free{background:#d1fae5;color:#065f46}.step-cost.tokens{background:#ddd6fe;color:#5b21b6}.step-arrow{font-size:1.5rem;color:#9ca3af;margin:0 1rem}.features-reminder{padding:80px 0;background:#fff}.features-grid-simple{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;max-width:1000px;margin:0 auto}.feature-item-simple{display:flex;align-items:center;gap:1rem;padding:1rem;background:#f7fafc;border-radius:12px;transition:all .3s ease}.feature-item-simple:hover{background:#edf2f7;transform:translateY(-2px)}.feature-icon{font-size:1.5rem;flex-shrink:0}.get-started-cta{padding:80px 0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center}.cta-content h2{font-size:2.5rem;font-weight:800;margin-bottom:1rem}.cta-content p{font-size:1.2rem;margin-bottom:2rem;opacity:.9}.cta-primary-large{background:#fff;color:#667eea;border:none;padding:1.5rem 3rem;border-radius:16px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.75rem}.cta-primary-large:hover{transform:translateY(-3px);box-shadow:0 15px 40px #0003}.cta-icon{font-size:1.3rem}@media (max-width: 1024px){.dashboard-grid{grid-template-columns:1fr;gap:1.5rem}.usage-steps{flex-direction:column;gap:2rem}.step-arrow{transform:rotate(90deg);margin:1rem 0}}@media (max-width: 768px){.success-content h1{font-size:2rem}.success-subtitle{font-size:1rem}.balance-number{font-size:3rem}.celebration-content{margin:1rem;padding:2rem}.celebration-text h2{font-size:1.5rem}.features-grid-simple{grid-template-columns:1fr;gap:1rem}.cta-content h2{font-size:2rem}.cta-primary-large{padding:1.25rem 2rem;font-size:1.1rem}.error-actions{flex-direction:column;align-items:center}.usage-step{min-width:100%}.action-button{padding:1.25rem}}.token-loading{display:flex;flex-direction:column;align-items:center;gap:.5rem}.token-loading .loading-spinner-small{margin-bottom:.25rem}.token-loading .token-label{font-size:1.1rem;opacity:.9;font-weight:500}.token-info-compact{color:#4a5568;text-align:center}.buy-tokens-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #10b98166}.buy-tokens-button-large{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:1.25rem 2.5rem;border-radius:12px;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .2s ease;width:100%;max-width:300px;margin:0 auto;display:block;text-align:center}.buy-tokens-button-large:hover{transform:translateY(-2px);box-shadow:0 12px 30px #10b98180;background:linear-gradient(135deg,#059669,#047857)}.token-actions{display:flex;justify-content:center;align-items:center;margin-top:1.5rem}.buy-tokens-button .coming-soon{display:block;font-size:.75rem;opacity:.8;margin-top:.25rem}.benefit:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0000001f;border-color:#667eea33}.research-stat .stat-source{color:#4a5568;font-size:.9rem;font-style:italic;margin-bottom:.5rem}.research-stat .stat-citation{color:#718096;font-size:.75rem;font-style:italic;font-weight:400}.research-section-modern{padding:120px 0;background:linear-gradient(135deg,#f8faff,#fff,#f1f5f9);position:relative;overflow:hidden}.research-section-modern:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>') repeat;opacity:.3;pointer-events:none}.research-header-modern{text-align:center;margin-bottom:80px;position:relative;z-index:2}.section-title-modern{font-size:3.5rem;font-weight:800;background:linear-gradient(135deg,#1e293b,#475569);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;letter-spacing:-.02em;line-height:1.1}.section-subtitle-modern{font-size:1.25rem;color:#64748b;font-weight:500;max-width:600px;margin:0 auto;line-height:1.6}.research-stats-modern{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-bottom:80px;position:relative;z-index:2}.stat-card-modern{background:#ffffffe6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:32px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 24px #0000000f;position:relative;overflow:hidden}.stat-card-modern:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#667eea,#4299e1,#06b6d4);transform:scaleX(0);transition:transform .4s ease}.stat-card-modern:hover{transform:translateY(-8px);box-shadow:0 20px 60px #0000001f;border-color:#667eea33}.stat-card-modern:hover:before{transform:scaleX(1)}.stat-visual{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.stat-number-modern{font-size:3.5rem;font-weight:900;background:linear-gradient(135deg,#667eea,#4299e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;letter-spacing:-.02em}.stat-badge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.stat-content{width:100%}.stat-label-modern{font-size:1.125rem;font-weight:600;color:#1e293b;margin-bottom:8px;line-height:1.4}.stat-source-modern{font-size:.875rem;color:#64748b;margin:0;line-height:1.5;font-weight:500}.research-foundations{margin-bottom:60px;position:relative;z-index:2}.foundation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.foundation-card{background:#fffc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:32px 24px;text-align:center;transition:all .3s ease;position:relative;overflow:hidden}.foundation-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea08,#4299e108);opacity:0;transition:opacity .3s ease}.foundation-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px #00000014;border-color:#667eea33}.foundation-card:hover:before{opacity:1}.foundation-icon{font-size:2.5rem;margin-bottom:16px;filter:grayscale(.2)}.foundation-card h3{font-size:1.25rem;font-weight:700;color:#1e293b;margin-bottom:12px;letter-spacing:-.01em}.foundation-card p{font-size:.9rem;color:#64748b;line-height:1.6;margin:0;font-weight:500}.research-credentials{text-align:center;position:relative;z-index:2}.credentials-content{background:#fff9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:32px;display:inline-block;min-width:400px}.credentials-content h4{font-size:1.125rem;font-weight:700;color:#374151;margin-bottom:16px;letter-spacing:-.01em}.institutions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.institution{background:linear-gradient(135deg,#f8fafc,#e2e8f0);color:#475569;padding:8px 16px;border-radius:20px;font-size:.875rem;font-weight:500;border:1px solid rgba(148,163,184,.2);transition:all .2s ease}.institution:hover{background:linear-gradient(135deg,#667eea,#4299e1);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}@media (max-width: 1024px){.section-title-modern{font-size:2.25rem}.research-stats-modern{grid-template-columns:1fr;gap:24px}.foundation-grid{grid-template-columns:repeat(2,1fr);gap:20px}}@media (max-width: 768px){.research-section-modern{padding:60px 0 40px}.research-header-modern{margin-bottom:40px}.section-title-modern{font-size:2rem}.section-subtitle-modern{font-size:1rem}.research-stats-modern{grid-template-columns:1fr;gap:20px}.stat-card-modern{padding:24px}.stat-number-modern{font-size:3rem}.foundation-grid{grid-template-columns:1fr}.foundation-card{padding:24px 20px}.credentials-content{min-width:auto;width:100%;padding:24px}.institutions{gap:8px}.institution{padding:6px 12px;font-size:.8rem}}.user-dropdown{position:relative;display:flex;align-items:center}.user-dropdown-trigger{background:transparent;border:2px solid #e5e7eb;border-radius:25px;padding:.75rem 1rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.75rem;min-width:180px}.user-dropdown-trigger:hover{border-color:#667eea;transform:translateY(-1px);box-shadow:0 4px 12px #667eea26}.user-dropdown-info{display:flex;flex-direction:column;align-items:flex-start;flex:1}.user-name{font-size:.9rem;color:#374151;font-weight:600;margin:0}.user-tokens{font-size:.8rem;color:#667eea;font-weight:600;background:#667eea1a;padding:2px 8px;border-radius:12px;margin:2px 0 0}.dropdown-arrow{color:#9ca3af;font-size:.8rem;transition:transform .2s ease}.user-dropdown-trigger:hover .dropdown-arrow{color:#667eea}.user-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 25px #0000001a;z-index:1001;min-width:180px;overflow:hidden;animation:dropdownFadeIn .2s ease}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:block;width:100%;padding:.75rem 1rem;background:transparent;border:none;text-align:left;text-decoration:none;color:#374151;font-weight:500;transition:all .2s ease;cursor:pointer;font-size:.9rem}.dropdown-item:hover{background:#f9fafb;color:#667eea;text-decoration:none}.dropdown-signout{border-top:1px solid #e5e7eb}.dropdown-signout:hover{background:#fef2f2;color:#dc2626}@media (max-width: 768px){.user-dropdown-trigger{min-width:140px;padding:.6rem .8rem}.user-name{font-size:.8rem}.user-tokens{font-size:.7rem;padding:1px 6px}.user-dropdown-menu{min-width:140px}.dropdown-item{padding:.6rem .8rem;font-size:.8rem}}@media (max-width: 480px){.logo{font-size:.9rem}.nav-container{padding:.8rem 1rem}}@media (max-width: 768px){.footer-content{grid-template-columns:1fr 1fr;text-align:left;gap:2rem 1rem}.footer-section{margin-bottom:1rem}.footer-section:first-child{grid-column:1 / -1;text-align:center;margin-bottom:1.5rem}.footer-section h4{font-size:.9rem;margin-bottom:.5rem}.footer-section ul{margin:0}.footer-section ul li{margin-bottom:.3rem}.footer-section a{font-size:.85rem}.footer-description{font-size:.85rem;margin-bottom:1rem}.footer-bottom{flex-direction:column;gap:1rem;margin-top:1.5rem;padding-top:1.5rem}.footer-bottom p{font-size:.8rem;text-align:center}.footer-links{justify-content:center;gap:1.5rem}.footer-legal-link{font-size:.8rem}}.stories-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.story-preview-image{height:200px;width:100%;object-fit:cover;border-radius:12px;margin-bottom:1rem}.story-entry{flex-direction:column;gap:.8rem}.story-entry-preview{width:80px;height:60px;align-self:center}.account-actions{display:flex;gap:1rem;justify-content:center}.view-all-card,.show-less-card{background:linear-gradient(135deg,#f8fafc,#edf2f7);border:2px dashed #d1d5db;display:flex;align-items:center;justify-content:center;min-height:280px;transition:all .3s ease}.view-all-card:hover,.show-less-card:hover{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;transform:translateY(-2px)}.view-all-card:hover .view-all-content,.show-less-card:hover .view-all-content{color:#fff}.view-all-content{text-align:center;color:#6b7280;transition:color .3s ease}.view-all-icon{font-size:3rem;margin-bottom:1rem;opacity:.8}.view-all-content h4{font-size:1.2rem;font-weight:600;margin:0 0 .5rem}.view-all-content p{font-size:.9rem;margin:0 0 1.5rem;opacity:.8}.view-all-button{background:#667eea;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem}.view-all-button:hover{background:#5a67d8;transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.view-all-card:hover .view-all-button,.show-less-card:hover .view-all-button{background:#fff3;color:#fff}.view-all-card:hover .view-all-button:hover,.show-less-card:hover .view-all-button:hover{background:#ffffff4d}.not-found-main{min-height:80vh;display:flex;align-items:center;padding:100px 0 80px;background:linear-gradient(135deg,#667eea,#764ba2);position:relative;overflow:hidden}.not-found-main:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="notFoundDots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23notFoundDots)"/></svg>') repeat;pointer-events:none}.not-found-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1;color:#fff}.not-found-visual{text-align:center;position:relative}.magical-404{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}.magical-404 .four{font-size:8rem;font-weight:900;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.5);animation:glow 2s ease-in-out infinite alternate}.magical-zero{position:relative;display:flex;align-items:center;justify-content:center}.magical-zero .zero{font-size:8rem;font-weight:900;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.5);animation:glow 2s ease-in-out infinite alternate}.magical-zero .sparkle{position:absolute;font-size:2rem;animation:sparkle 1.5s ease-in-out infinite}.magical-zero .sparkle:first-child{top:-1rem;left:-1rem;animation-delay:0s}.magical-zero .sparkle:last-child{bottom:-1rem;right:-1rem;animation-delay:.75s}.floating-elements{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.floating-elements span{position:absolute;font-size:2rem;animation:floatAround 4s ease-in-out infinite}.float-1{top:10%;left:10%;animation-delay:0s}.float-2{top:20%;right:15%;animation-delay:.8s}.float-3{bottom:30%;left:5%;animation-delay:1.6s}.float-4{bottom:15%;right:10%;animation-delay:2.4s}.float-5{top:50%;left:20%;animation-delay:3.2s}.not-found-text h1{font-size:3rem;margin-bottom:1rem;font-weight:700;text-shadow:0 2px 20px rgba(0,0,0,.3)}.magical-phrase{font-size:1.3rem;font-style:italic;margin-bottom:1.5rem;opacity:.9;font-weight:500}.description{font-size:1.1rem;line-height:1.6;margin-bottom:2rem;opacity:.85}.not-found-actions{display:flex;gap:1rem;flex-wrap:wrap}.helpful-links{background:#fff;border-radius:20px;padding:3rem;margin-top:4rem;box-shadow:0 20px 40px #0000001a}.helpful-links h3{color:#2d3748;margin-bottom:2rem;font-size:1.5rem;text-align:center}.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.helpful-link{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:#f7fafc;border-radius:15px;text-decoration:none;transition:all .3s ease;border:2px solid transparent}.helpful-link:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea26;border-color:#667eea;background:#fff}.link-icon{font-size:2rem;flex-shrink:0}.helpful-link h4{color:#2d3748;margin:0 0 .25rem;font-size:1.1rem;font-weight:600}.helpful-link p{color:#4a5568;margin:0;font-size:.9rem}@keyframes glow{0%{text-shadow:0 0 30px rgba(255,255,255,.5)}to{text-shadow:0 0 40px rgba(255,255,255,.8),0 0 60px rgba(255,255,255,.4)}}@keyframes sparkle{0%,to{opacity:.4;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(180deg)}}@keyframes floatAround{0%,to{transform:translateY(0) rotate(0);opacity:.6}25%{transform:translateY(-20px) rotate(90deg);opacity:1}50%{transform:translateY(0) rotate(180deg);opacity:.8}75%{transform:translateY(-10px) rotate(270deg);opacity:.9}}@media (max-width: 1024px){.not-found-content{grid-template-columns:1fr;gap:2rem;text-align:center}.magical-404 .four,.magical-zero .zero{font-size:6rem}.not-found-text h1{font-size:2.5rem}}@media (max-width: 768px){.not-found-main{padding:80px 0 60px}.magical-404 .four,.magical-zero .zero{font-size:4rem}.not-found-text h1{font-size:2rem}.magical-phrase{font-size:1.1rem}.description{font-size:1rem}.not-found-actions{flex-direction:column;align-items:center}.not-found-actions .cta-primary,.not-found-actions .cta-secondary{width:100%;max-width:300px;justify-content:center}.helpful-links{padding:2rem;margin-top:2rem}.link-grid{grid-template-columns:1fr;gap:1rem}.helpful-link{padding:1rem}.link-icon{font-size:1.5rem}.helpful-link h4{font-size:1rem}.helpful-link p{font-size:.8rem}}.demo-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;z-index:2000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.demo-book-container{display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:1500px;position:relative}.demo-close-btn{position:absolute;top:-40px;right:-40px;background:#fff3;border:none;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.5rem;transition:all .2s;z-index:100}.demo-close-btn:hover{background:#ffffff4d;transform:scale(1.1)}.demo-book-spread{display:flex;position:relative;width:90vw;max-width:1100px;height:70vh;max-height:600px;transition:all .2s ease;transform-style:preserve-3d;transform:rotateY(-2deg) rotateX(5deg) scale(.9)}.demo-book-spread:before{content:"";position:absolute;top:-8px;left:calc(50% - 15px);width:30px;height:calc(100% + 16px);background:linear-gradient(to right,#8b4513,sienna,peru 30%,#daa520,peru 70%,sienna,#8b4513);border-radius:6px;box-shadow:0 0 20px #0009,inset 0 2px #ffffff4d,inset 0 -2px #0000004d,inset 2px 0 #ffffff1a,inset -2px 0 #0000001a;z-index:20;transform:translateZ(30px)}.demo-book-spread:after{content:"";position:absolute;top:15px;left:calc(50% - 8px);width:16px;height:calc(100% - 30px);background:radial-gradient(circle at 50% 20%,#654321 2px,transparent 2px),radial-gradient(circle at 50% 50%,#654321 2px,transparent 2px),radial-gradient(circle at 50% 80%,#654321 2px,transparent 2px),repeating-linear-gradient(to bottom,rgba(139,69,19,.4) 0px,rgba(139,69,19,.4) 1px,transparent 1px,transparent 4px),linear-gradient(to right,rgba(255,255,255,.1) 0%,transparent 20%,transparent 80%,rgba(0,0,0,.1) 100%);background-size:16px 100%,16px 100%,16px 100%,16px 100%,16px 100%;border-radius:2px;z-index:21;transform:translateZ(31px);box-shadow:inset 0 0 8px #0000004d,0 2px 4px #0003}.demo-book-page{flex:1;height:100%;position:relative;cursor:pointer;transition:all .2s ease;background:linear-gradient(135deg,#fffef7,#f8f6f1);box-shadow:0 15px 40px #0000004d,inset 0 1px #ffffffe6;transform-style:preserve-3d}.demo-book-page:hover{transform:translateZ(10px)}.demo-left-page{border-radius:15px 0 0 15px;border-right:1px solid rgba(0,0,0,.1);transform:rotateY(3deg);transform-origin:right center;background:radial-gradient(ellipse at 10% 10%,rgba(210,180,140,.1) 0%,transparent 40%),radial-gradient(ellipse at 90% 90%,rgba(160,140,100,.08) 0%,transparent 30%),linear-gradient(to right,#f5f3ee,#fffef7 80%,#f8f6f1);box-shadow:-5px 0 15px #0003,0 15px 40px #0000004d,inset 0 1px #ffffffe6,inset -20px 0 30px #0000000d,inset -1px 0 #fff9}.demo-right-page{border-radius:0 15px 15px 0;border-left:1px solid rgba(0,0,0,.1);transform:rotateY(-3deg);transform-origin:left center;background:radial-gradient(ellipse at 90% 10%,rgba(210,180,140,.1) 0%,transparent 40%),radial-gradient(ellipse at 10% 90%,rgba(160,140,100,.08) 0%,transparent 30%),linear-gradient(to left,#f5f3ee,#fffef7 80%,#f8f6f1);box-shadow:5px 0 15px #0003,0 15px 40px #0000004d,inset 0 1px #ffffffe6,inset 20px 0 30px #0000000d,inset 1px 0 #fff9}.demo-page-content{display:flex;flex-direction:column;gap:1rem;padding:2rem;height:100%;box-sizing:border-box;position:relative}.demo-page-content.blank{background-image:radial-gradient(circle at 25% 25%,rgba(0,0,0,.01) 1px,transparent 1px);background-size:20px 20px}.demo-page-image{flex-grow:1;display:flex;justify-content:center;align-items:center;border-radius:10px;overflow:hidden;min-height:0}.demo-page-image img{width:100%;height:100%;object-fit:cover;border-radius:10px;box-shadow:0 5px 20px #0003}.demo-page-text{flex-shrink:0;height:40%;padding:1rem;background:#ffffff80;border-radius:10px;box-shadow:0 2px 10px #0000001a;overflow-y:auto}.demo-page-text p{font-size:1.1rem;line-height:1.5;color:#383028;margin:0;font-family:Comic Sans MS,Arial,Helvetica,sans-serif;text-align:center}.demo-page-number{position:absolute;bottom:1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;box-shadow:0 4px 12px #667eea66}.demo-page-number.left{left:1.5rem}.demo-page-number.right{right:1.5rem}.demo-book-controls{margin-top:2rem;display:flex;align-items:center;gap:1rem}.demo-nav-btn{background:#ffffffe6;border:none;border-radius:25px;padding:.8rem 1.5rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit;color:#2d3748}.demo-nav-btn:hover:not(:disabled){background:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #0003}.demo-nav-btn:disabled{opacity:.5;cursor:not-allowed}.demo-create-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:1rem 2rem;border-radius:25px;cursor:pointer;font-weight:600;font-size:1rem;transition:all .2s;box-shadow:0 5px 20px #667eea66}.demo-create-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 25px #667eea80}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.demo-close-btn{top:10px;right:10px;background:#00000080;color:#fff}.demo-book-spread{flex-direction:column;width:90vw;height:auto;transform:none;max-height:75vh;overflow-y:auto;padding-bottom:1rem}.demo-book-spread::-webkit-scrollbar{width:4px}.demo-book-spread::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:2px}.demo-book-spread:before,.demo-book-spread:after{display:none}.demo-book-page{transform:none!important;border-radius:15px!important;margin-bottom:1rem;min-height:auto;box-shadow:0 4px 12px #0000001a!important}.demo-left-page,.demo-right-page{border:1px solid #ddd!important}.demo-left-page{margin-bottom:1rem}.demo-right-page{margin-bottom:0}.demo-page-content{padding:1rem;gap:.5rem}.demo-page-image{min-height:150px}.demo-page-text{max-height:150px}.demo-page-text p{font-size:.9rem;line-height:1.4}.demo-page-number{width:24px;height:24px;font-size:.7rem;bottom:.5rem}.demo-page-number.left{left:.5rem}.demo-page-number.right{right:.5rem}.demo-book-controls{flex-direction:column;gap:.75rem;margin-top:1rem}.demo-create-btn{order:-1;padding:.8rem 1.5rem;font-size:.9rem}}.features-page{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#2d3748;overflow-x:hidden;min-height:100vh}.features-hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:120px 0 80px;position:relative;overflow:hidden}.features-hero:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');opacity:.3}.features-hero-content{position:relative;z-index:2;text-align:center;max-width:800px;margin:0 auto}.features-hero h1{font-size:3.5rem;font-weight:800;margin-bottom:1rem;line-height:1.1}.features-hero p{font-size:1.2rem;opacity:.9;margin-bottom:2rem;line-height:1.6}.features-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem;margin-top:3rem;max-width:600px;margin-left:auto;margin-right:auto}.features-stats .stat{text-align:center;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:2rem 1rem;transition:all .3s ease}.features-stats .stat:hover{background:#ffffff40;transform:translateY(-2px);box-shadow:0 10px 30px #0003}.features-stats .stat-number{display:block;font-size:3rem;font-weight:800;color:#fff;margin-bottom:.5rem;text-shadow:0 2px 4px rgba(0,0,0,.3)}.features-stats .stat-label{font-size:.85rem;opacity:.95;text-transform:uppercase;letter-spacing:.5px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.core-features-section{padding:80px 0;background:#f8fafc}.features-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:3rem 0;max-width:1200px;margin-left:auto;margin-right:auto}.feature-tab{background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:1.5rem;text-align:center;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem}.feature-tab:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 10px 25px #667eea26}.feature-tab.active{border-color:#667eea;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translateY(-2px);box-shadow:0 10px 25px #667eea4d}.feature-tab .tab-icon{font-size:2rem;margin-bottom:.5rem}.feature-tab .tab-title{font-weight:600;font-size:.9rem}.feature-detail-content{margin-top:3rem}.feature-detail{background:#fff;border-radius:20px;padding:3rem;box-shadow:0 10px 30px #0000001a;border:1px solid #e2e8f0}.feature-detail-header{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid #e2e8f0}.feature-icon-large{font-size:4rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.feature-header-text h3{font-size:2rem;font-weight:700;margin-bottom:.5rem;color:#2d3748}.feature-subtitle{font-size:1.1rem;color:#667eea;font-weight:600;margin-bottom:1rem}.feature-description{color:#4a5568;font-size:1rem;line-height:1.6}.feature-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.feature-capabilities h4,.feature-specs h4{font-size:1.2rem;font-weight:700;margin-bottom:1.5rem;color:#2d3748}.capabilities-list{list-style:none;padding:0}.capabilities-list li{border-bottom:1px solid #f1f5f9;position:relative;padding:.75rem 0 .75rem 2rem}.capabilities-list li:before{content:"✨";position:absolute;left:0;top:.75rem}.capabilities-list li:last-child{border-bottom:none}.specs-grid{display:grid;gap:1rem}.spec-item{display:grid;grid-template-columns:1fr 1fr;padding:1rem;background:#f8fafc;border-radius:8px}.spec-label{font-weight:600;color:#4a5568}.spec-value{color:#667eea;font-weight:500}.sounds-library-section{padding:80px 0;background:#fff}.sounds-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:3rem 0}.sound-tab{background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;padding:1.5rem;text-align:center;cursor:pointer;transition:all .3s ease}.sound-tab:hover{border-color:#10b981;transform:translateY(-2px)}.sound-tab.active{border-color:#10b981;background:linear-gradient(135deg,#10b981,#059669);color:#fff}.sound-tab .tab-title{font-weight:600;margin-bottom:.25rem;display:block}.sound-tab .tab-subtitle{font-size:.85rem;opacity:.8}.sounds-content{margin-top:3rem}.sounds-category{background:#fff;border-radius:16px;padding:2rem;border:1px solid #e2e8f0}.category-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #e2e8f0}.category-header h3{font-size:1.5rem;font-weight:700;color:#2d3748}.age-badge{background:#10b981;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600}.sounds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.sound-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:1.5rem;transition:all .3s ease}.sound-card:hover{border-color:#10b981;transform:translateY(-2px);box-shadow:0 5px 15px #10b98126}.sound-symbol{font-size:1.5rem;font-weight:700;color:#10b981;margin-bottom:.75rem;font-family:Courier New,monospace}.sound-examples{font-weight:600;color:#2d3748;margin-bottom:.5rem}.sound-position{font-size:.85rem;color:#6b7280;font-style:italic}.language-structures-section{padding:80px 0;background:#f8fafc}.structures-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:3rem}.structure-card{background:#fff;border-radius:12px;padding:2rem;border:1px solid #e2e8f0;transition:all .3s ease}.structure-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0000001a}.structure-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.structure-header h4{font-size:1.1rem;font-weight:600;color:#2d3748}.difficulty-badge{padding:.25rem .75rem;border-radius:15px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.difficulty-badge.beginner{background:#dcfce7;color:#166534}.difficulty-badge.intermediate{background:#fef3c7;color:#92400e}.difficulty-badge.advanced{background:#fee2e2;color:#991b1b}.structure-examples{color:#4a5568;line-height:1.5}.analytics-section{padding:80px 0;background:#fff}.analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}.analytics-card{background:linear-gradient(135deg,#f8fafc,#edf2f7);border-radius:16px;padding:2rem;border:1px solid #e2e8f0;transition:all .3s ease}.analytics-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0000001a}.analytics-header h3{font-size:1.3rem;font-weight:700;color:#2d3748;margin-bottom:.5rem}.analytics-header p{color:#6b7280;margin-bottom:1.5rem}.analytics-details ul{list-style:none;padding:0}.analytics-details li{border-bottom:1px solid #e2e8f0;position:relative;padding:.5rem 0 .5rem 1.5rem}.analytics-details li:before{content:"📊";position:absolute;left:0}.analytics-details li:last-child{border-bottom:none}.technology-section{padding:80px 0;background:#f8fafc}.tech-stack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}.tech-category{background:#fff;border-radius:16px;padding:2rem;border:1px solid #e2e8f0;transition:all .3s ease}.tech-category:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0000001a}.tech-category h3{font-size:1.3rem;font-weight:700;margin-bottom:1.5rem;color:#2d3748}.tech-items{display:flex;flex-direction:column;gap:1rem}.tech-item{padding:1rem;background:#f8fafc;border-radius:8px;border-left:4px solid #667eea}.tech-item strong{display:block;font-weight:600;color:#2d3748;margin-bottom:.25rem}.tech-item span{color:#6b7280;font-size:.9rem}.comparison-section{padding:80px 0;background:#fff}.comparison-table{margin-top:3rem;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #e2e8f0;box-shadow:0 10px 25px #0000001a}.comparison-header{display:grid;grid-template-columns:1fr 1fr 1fr;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;text-align:center}.comparison-header>div{padding:1.5rem}.comparison-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid #e2e8f0;transition:all .3s ease}.comparison-row:hover{background:#f8fafc}.comparison-row:last-child{border-bottom:none}.comparison-row>div{padding:1.5rem;text-align:center;display:flex;align-items:center;justify-content:center}.comparison-category{font-weight:600;color:#2d3748;background:#f8fafc}.comparison-traditional{color:#dc2626}.comparison-magic{color:#059669;font-weight:600}.features-cta{padding:80px 0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center}.features-cta .cta-content{max-width:600px;margin:0 auto}.features-cta h2{font-size:2.5rem;font-weight:700;margin-bottom:1rem}.features-cta p{font-size:1.1rem;opacity:.9;margin-bottom:2rem}.features-cta .cta-primary{background:#fff;color:#667eea;border:none;padding:1rem 2rem;border-radius:50px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 4px 15px #0003}.features-cta .cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000004d;background:#f8fafc}.features-cta .cta-icon{font-size:1.2rem}.cta-note{font-size:.9rem;opacity:.8;margin-top:1rem}@media (max-width: 1024px){.features-tabs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.feature-detail-grid{grid-template-columns:1fr;gap:2rem}.feature-detail-header{grid-template-columns:1fr;text-align:center;gap:1rem}.sounds-tabs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.tech-stack-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media (max-width: 768px){.features-hero{padding:100px 0 60px}.features-hero h1{font-size:2.5rem}.features-hero p{font-size:1.1rem}.features-stats{grid-template-columns:repeat(2,1fr);gap:1rem}.features-tabs{grid-template-columns:1fr}.feature-detail{padding:2rem}.sounds-tabs,.sounds-grid,.structures-grid,.analytics-grid,.tech-stack-grid{grid-template-columns:1fr}.comparison-table{font-size:.9rem}.comparison-header>div,.comparison-row>div{padding:1rem}.features-cta h2{font-size:2rem}}@media (max-width: 480px){.features-hero h1{font-size:2rem}.features-stats{grid-template-columns:1fr}.features-stats .stat-number{font-size:2rem}.feature-detail{padding:1.5rem}.sound-card{padding:1rem}.structure-card,.analytics-card,.tech-category{padding:1.5rem}.comparison-table{font-size:.8rem}.comparison-header>div,.comparison-row>div{padding:.75rem}}.fade-in{opacity:0;animation:fadeIn .6s ease forwards}.slide-up{transform:translateY(20px);opacity:0;animation:slideUp .6s ease forwards}@keyframes fadeIn{to{opacity:1}}@keyframes slideUp{to{transform:translateY(0);opacity:1}}.full-story-section{padding:80px 0;background:#fff}.story-section-header{text-align:center;margin-bottom:3rem}.story-reader{max-width:1200px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:0 10px 30px #0000001a;overflow:hidden;border:1px solid #e2e8f0}.story-reader-header{background:linear-gradient(135deg,#f8fafc,#edf2f7);padding:2rem;border-bottom:1px solid #e2e8f0}.story-info h3{font-size:1.5rem;font-weight:700;color:#2d3748;margin-bottom:1rem}.story-details{display:flex;flex-wrap:wrap;gap:1rem}.detail-tag{background:#fff;color:#667eea;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;border:1px solid #e2e8f0}.story-pages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;padding:2rem}.story-page-item{background:#f8fafc;border-radius:12px;overflow:hidden;transition:all .3s ease}.story-page-item:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0000001a}.story-page-img{width:100%;height:200px;object-fit:cover}.page-text{padding:1.5rem;font-size:1rem;line-height:1.6;color:#4a5568;font-style:italic}.story-analysis{background:#f8fafc;padding:2rem;border-top:1px solid #e2e8f0}.story-analysis h4{font-size:1.2rem;font-weight:700;color:#2d3748;margin-bottom:1.5rem}.analysis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.analysis-item{display:flex;align-items:flex-start;gap:1rem}.analysis-icon{font-size:1.5rem;margin-top:.25rem}.analysis-item strong{display:block;font-weight:600;color:#2d3748;margin-bottom:.25rem}.analysis-item p{color:#6b7280;font-size:.9rem;margin:0}.story-cta{background:#fff;padding:2rem;text-align:center;border-top:1px solid #e2e8f0}.story-cta h4{font-size:1.3rem;font-weight:700;color:#2d3748;margin-bottom:.5rem}.story-cta p{color:#6b7280;margin-bottom:1.5rem}.onboarding-page{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:2rem 0}.onboarding-header{text-align:center;margin-bottom:4rem;padding:2rem 0}.welcome-badge{display:inline-block;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:50px;padding:.75rem 1.5rem;color:#fff;font-weight:600;font-size:1.1rem;margin-bottom:1.5rem;box-shadow:0 8px 32px #0000001a}.sparkle{color:gold;animation:sparkle 3s ease-in-out infinite}@keyframes sparkle{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}}.onboarding-title{font-size:3.5rem;font-weight:800;color:#fff;margin-bottom:1rem;text-shadow:0 4px 8px rgba(0,0,0,.3)}.onboarding-subtitle{font-size:1.4rem;color:#ffffffe6;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}.token-balance-display{background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:15px;padding:1rem 2rem;display:inline-flex;align-items:center;gap:.75rem;color:#fff;font-size:1.2rem;box-shadow:0 8px 32px #0000001a}.token-icon{font-size:1.5rem}.header-cta{margin-top:2rem}.header-cta-button{background:linear-gradient(135deg,gold,#ffb347);color:#2d3748;border:none;border-radius:15px;padding:1.5rem 3rem;font-size:1.4rem;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 10px 25px #ffd70066;display:inline-flex;align-items:center;gap:.75rem;will-change:transform;border:2px solid rgba(255,255,255,.3)}.header-cta-button:hover{transform:translateY(-2px);box-shadow:0 15px 35px #ffd70080}.header-cta-button:active{transform:translateY(0);box-shadow:0 8px 20px #ffd70066}.onboarding-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:4rem}.step-card{background:#fff;border-radius:20px;padding:2.5rem;text-align:center;box-shadow:0 20px 40px #0000001a;position:relative;transition:transform .2s ease,box-shadow .2s ease;will-change:transform}.step-card:hover{transform:translateY(-3px);box-shadow:0 25px 50px #0000001f}.step-number{position:absolute;top:-15px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;box-shadow:0 4px 12px #0003}.step-icon{font-size:3rem;margin-bottom:1rem}.step-title{font-size:1.8rem;font-weight:700;color:#2d3748;margin-bottom:1rem}.step-description{font-size:1.1rem;color:#4a5568;line-height:1.6;margin-bottom:2rem}.step-visual{margin-bottom:2rem}.builder-preview{background:#f7fafc;border-radius:12px;padding:1.5rem;border:1px solid #e2e8f0}.preview-section{margin-bottom:1rem}.preview-section:last-child{margin-bottom:0}.preview-label{font-weight:600;color:#2d3748;margin-bottom:.5rem;text-align:left}.preview-options{display:flex;gap:.5rem;flex-wrap:wrap}.preview-option{background:#fff;border:2px solid #e2e8f0;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;color:#4a5568;transition:all .2s ease}.preview-option:first-child{border-color:#667eea;background:#667eea1a;color:#667eea}.story-preview{background:#f7fafc;border-radius:12px;padding:1.5rem;border:1px solid #e2e8f0}.story-page-preview{background:#fff;border-radius:8px;padding:1rem;border:1px solid #e2e8f0}.story-image-placeholder{background:linear-gradient(135deg,#ffeaa7,#fab1a0);border-radius:8px;padding:2rem 1rem;margin-bottom:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#2d3748}.image-icon{font-size:2rem}.image-text{font-weight:600;font-size:.9rem}.story-text-preview{display:flex;flex-direction:column;gap:.5rem}.story-line{height:8px;background:#e2e8f0;border-radius:4px;width:100%}.story-line.short{width:70%}.pricing-preview{background:#f7fafc;border-radius:12px;padding:1.5rem;border:1px solid #e2e8f0}.price-option{background:#fff;border-radius:12px;padding:1.5rem;border:2px solid #667eea;position:relative;text-align:center}.price-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:#667eea;color:#fff;padding:.25rem 1rem;border-radius:20px;font-size:.8rem;font-weight:600}.price-amount{font-size:2rem;font-weight:700;color:#2d3748;margin-bottom:.5rem}.price-tokens{font-size:1.2rem;font-weight:600;color:#667eea;margin-bottom:.25rem}.price-per{font-size:.9rem;color:#4a5568}.step-action-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 12px #667eea4d;will-change:transform}.step-action-button:hover{transform:translateY(-1px);box-shadow:0 6px 16px #667eea66}.step-action-button.secondary{background:linear-gradient(135deg,#48bb78,#38a169);box-shadow:0 4px 12px #48bb784d}.step-action-button.secondary:hover{box-shadow:0 6px 16px #48bb7866}.step-note{margin-top:1rem}.cost-badge{background:#667eea1a;color:#667eea;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600;border:1px solid rgba(102,126,234,.2)}.onboarding-tips{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:2.5rem;margin-bottom:4rem;box-shadow:0 20px 40px #0000001a}.tips-title{color:#fff;font-size:1.8rem;font-weight:700;text-align:center;margin-bottom:2rem}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.tip-item{display:flex;align-items:center;gap:1rem;background:#ffffff1a;border-radius:12px;padding:1.25rem;color:#fff}.tip-icon{font-size:1.5rem;flex-shrink:0}.tip-text{font-size:1rem;line-height:1.5}.onboarding-cta{text-align:center;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:3rem 2rem;box-shadow:0 20px 40px #0000001a}.cta-title{color:#fff;font-size:2.2rem;font-weight:700;margin-bottom:1rem}.cta-description{color:#ffffffe6;font-size:1.2rem;margin-bottom:2rem}.cta-button{background:linear-gradient(135deg,gold,#ffb347);color:#2d3748;border:none;border-radius:15px;padding:1.25rem 3rem;font-size:1.3rem;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 8px 20px #ffd7004d;display:inline-flex;align-items:center;gap:.75rem;will-change:transform}.cta-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #ffd70066}@media (max-width: 768px){.onboarding-title{font-size:2.5rem}.onboarding-subtitle{font-size:1.2rem}.onboarding-steps{grid-template-columns:1fr}.step-card{padding:2rem}.tips-grid{grid-template-columns:1fr}.cta-title{font-size:1.8rem}.cta-button{padding:1rem 2rem;font-size:1.1rem}.header-cta-button{padding:1.2rem 2.5rem;font-size:1.2rem}}@media (max-width: 480px){.onboarding-page{padding:1rem 0}.onboarding-header,.onboarding-tips,.onboarding-cta{padding:2rem 1rem}.step-card{padding:1.5rem}.token-balance-display{padding:.75rem 1.5rem;font-size:1rem}.header-cta-button{padding:1rem 2rem;font-size:1.1rem}}