: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}}.selected-indicator{font-size:.85rem;margin-top:.25rem;opacity:.9;font-weight:500}.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}.sounds-list{display:flex;flex-direction:column;gap:1rem}.sound-row{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#f7fafc;border-radius:12px;border:1px solid #e2e8f0}.sound-label{min-width:150px;font-weight:600;color:#2d3748;font-size:.95rem}.position-buttons{display:flex;gap:.5rem;flex:1}.position-button{flex:1;background:linear-gradient(135deg,#42a5f5,#1e88e5);color:#fff;border:none;border-radius:8px;padding:.6rem .8rem;font-size:.85rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 6px #42a5f533;display:flex;flex-direction:column;align-items:center;gap:.25rem}.position-button:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 4px 10px #42a5f54d;background:linear-gradient(135deg,#1e88e5,#1565c0)}.position-button.selected{background:linear-gradient(135deg,#4caf50,#388e3c);transform:translateY(-2px);box-shadow:0 4px 10px #4caf504d}.position-button.disabled{background:#cbd5e0;cursor:not-allowed;opacity:.5}.position-label{font-weight:600;font-size:.85rem}.position-example{font-size:.7rem;opacity:.9;text-align:center}.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)}.sound-row{flex-direction:column;align-items:stretch}.sound-label{min-width:auto;text-align:center}.position-buttons{flex-direction:column}.position-button{width:100%}.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-section-header{text-align:center;margin-bottom:3rem}.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}}.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{color:#4a5568;text-align:center}.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}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@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}.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}.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}}.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}.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-icon{font-size:3rem;margin-bottom:1rem}.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-content p{font-size:1.2rem;margin-bottom:2rem;opacity:.9}.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}.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}.sounds-list{display:flex;flex-wrap:wrap;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}}.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-icon{font-size:3rem;margin-bottom:1rem}.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}}.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}}.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}}