#start-container{padding:35px;border:1px solid rgba(245,158,11,.1);background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:24px;box-shadow:0 4px 15px #0000000d;position:relative;z-index:1;animation:fadeInUp .8s ease-out}#start-container h2{margin-bottom:40px;color:#f59e0b;font-size:var(--header-size-desktop);font-weight:800;font-family:Inter,Bubblegum Sans,sans-serif;letter-spacing:-.5px;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;animation:slideInDown .8s ease-out;text-align:center}@keyframes slideInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}#start-container p{margin-bottom:20px;color:#6b7280;font-size:1.35em;font-weight:500}@media print{#create-container{box-shadow:none;border:1px solid #ccc}}.no-landing-bg #create-container{max-width:1100px!important;width:95%!important;margin:72px auto 0!important}#end-create-container{display:flex;justify-content:center;gap:20px;margin-top:30px;flex-wrap:wrap}#export-story-button,#return-home-button{padding:15px 25px;font-size:1.2em;font-weight:600;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0000001a;text-decoration:none;display:inline-block;text-align:center}#export-story-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff}#export-story-button:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-3px);box-shadow:0 8px 25px #10b9814d}#return-home-button{background:#f59e0b!important;color:#fff!important}#return-home-button:hover{background:#d97706!important;transform:translateY(-3px);box-shadow:0 8px 25px #f59e0b4d}@media (max-width: 768px){#create-container{background:none!important;border-radius:0!important;padding:20px!important;box-shadow:none!important;border:none!important;margin:60px auto 0!important;width:100%!important;max-width:100%!important}#create-container:before,#create-container:after{display:none!important}#start-container{background:none!important;border-radius:0!important;padding:20px 0!important;box-shadow:none!important;border:none!important}#end-create-container{flex-direction:column;align-items:center}#image-container{background:none!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:0!important;margin-bottom:20px!important;width:100%!important;max-width:100%!important}#story-image{width:100%!important;max-width:100%!important;height:auto!important}#story-text{width:100%!important;max-width:100%!important;padding:20px 15px!important;font-size:1.1em;margin-bottom:20px!important}#choices-container{background:none!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:15px!important;margin-bottom:20px!important}#story-text.age-font-large{font-size:1.4em}.choice-button{padding:15px 20px;font-size:1em}.story-navigation{flex-direction:column;align-items:stretch}.nav-buttons,.action-buttons{justify-content:center;width:100%}}@media (max-width: 480px){#image-container{padding:15px;border-radius:12px}#story-text{padding:15px;border-radius:16px}#choices-container{padding:15px;border-radius:12px}.choice-button{padding:12px 15px;font-size:.95em;border-radius:15px}#free-text-input{padding:12px 16px;font-size:1em;border-radius:20px}#submit-input-button,#back-button{padding:10px 20px;font-size:1em;min-width:100px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes gentleFloat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(3deg)}}#create-container{background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:24px;padding:35px;box-shadow:0 4px 15px #00000014;border:1px solid rgba(245,158,11,.1);max-width:1100px;width:95%;margin:72px auto 0;position:relative;display:flex;flex-direction:column;z-index:1;animation:fadeInUp .6s ease-out}#create-container:before{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:linear-gradient(45deg,#f59e0b,#fbbf24);border-radius:50%;opacity:.8;z-index:-1;animation:gentleFloat 4s ease-in-out infinite}#create-container:after{content:"";position:absolute;bottom:-20px;left:-20px;width:80px;height:80px;background:linear-gradient(45deg,#10b981,#34d399);border-radius:50%;opacity:.8;z-index:-1;animation:gentleFloat 4s ease-in-out infinite reverse}#image-container{position:relative;margin:0 auto 25px;width:100%;max-width:1100px;border-radius:18px;overflow:hidden;display:none;justify-content:center;align-items:center;background:linear-gradient(135deg,#ffffffe6,#f8fafce6);padding:20px;box-shadow:0 4px 15px #00000014;transition:all .3s ease}.story-active #image-container{display:flex}#image-container:hover{transform:translateY(-3px);box-shadow:0 12px 35px #0000001f}#story-image{width:100%;max-width:100%;height:auto;max-height:none;border-radius:15px;display:block;transition:all .3s ease}#loading-text{font-size:1.1em;color:#6b7280;font-weight:500;text-align:center;padding:20px}#story-text{font-family:Andika,Georgia,serif;margin-bottom:30px;line-height:1.7;color:#374151;min-height:100px;height:auto;max-height:none;display:none;justify-content:center;align-items:center;background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:24px;padding:35px;box-shadow:0 4px 15px #00000014;transition:all .3s ease;border:1px solid rgba(245,158,11,.1);position:relative;z-index:1}.story-active #story-text{display:flex}#story-text:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000014}#choices-container{margin-bottom:25px;display:none;flex-direction:column;gap:15px;position:relative;z-index:1;min-height:50px;height:auto;max-height:none;overflow-y:visible;background:linear-gradient(135deg,#fffc,#f8fafccc);border-radius:20px;padding:25px;border:1px solid rgba(245,158,11,.1);box-shadow:0 2px 10px #0000000d}.story-active #choices-container{display:flex}.choice-button{padding:18px 25px;font-size:1.1em;font-weight:600;cursor:pointer;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;border-radius:20px;transition:all .3s ease;box-shadow:0 4px 15px #f59e0b4d;position:relative;overflow:hidden;text-align:center;display:block;width:100%}.choice-button:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:translateY(-3px);box-shadow:0 8px 25px #f59e0b66}.choice-button:active{transform:translateY(-1px);box-shadow:0 4px 15px #f59e0b4d}#input-container{margin-bottom:25px;display:none;flex-direction:column;gap:15px;position:relative;z-index:1}.story-active #input-container{display:flex}#free-text-input{width:100%;padding:15px 20px;font-size:1.1em;border:1px solid rgba(245,158,11,.2);border-radius:25px;background:#fff;color:#374151;transition:all .3s ease;box-shadow:0 2px 8px #0000000d;outline:none;font-family:inherit;box-sizing:border-box}#free-text-input:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a,0 4px 15px #0000001a}#free-text-input::placeholder{color:#9ca3af;font-style:italic}#input-buttons-container{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}#submit-input-button,#back-button{padding:12px 25px;font-size:1.1em;font-weight:600;border:none;border-radius:20px;cursor:pointer;transition:all .3s ease;min-width:120px}#submit-input-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 15px #10b9814d;width:100%}#submit-input-button:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}#submit-input-button:not(.highlight):hover{background:linear-gradient(135deg,#d1d5db,#9ca3af);color:#6b7280;box-shadow:0 2px 8px #9ca3af33;transform:none;cursor:default}#submit-input-button.highlight{animation:gentleGlow 1.5s ease-in-out infinite}#submit-input-button:not(.highlight):not(:hover){background:linear-gradient(135deg,#d1d5db,#9ca3af);color:#6b7280;box-shadow:0 2px 8px #9ca3af33;cursor:default;opacity:.6}#back-button{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;box-shadow:0 4px 15px #6b72804d}#back-button:hover{background:linear-gradient(135deg,#4b5563,#374151);transform:translateY(-2px);box-shadow:0 6px 20px #6b728066}.story-navigation{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-top:25px;border-top:1px solid rgba(245,158,11,.2);margin-top:20px}.nav-btn{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease;min-width:100px}#custom-start-input{flex:1;padding:15px 20px;border:1px solid rgba(245,158,11,.2);border-radius:25px;font-size:1.6em;font-weight:700;background:#fff;transition:all .3s ease;box-shadow:0 2px 10px #0000000d;height:68px!important;min-height:68px!important;max-height:none;box-sizing:border-box;line-height:1.4;color:#374151;outline:none;font-family:inherit}#custom-start-input:focus{border-color:#f59e0b;box-shadow:0 0 0 4px #f59e0b1a;transform:translateY(-2px)}#custom-start-input::placeholder{color:#9ca3af;font-style:italic;font-weight:500}#custom-start-button{padding:15px 30px;font-size:1.1em;font-weight:600;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 15px #10b9814d;white-space:nowrap}#download-message{position:fixed;bottom:30px;right:30px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:15px 25px;border-radius:25px;box-shadow:0 4px 15px #10b9814d;z-index:1000;opacity:0;transform:translateY(100%);transition:all .4s ease;font-weight:600}#download-message.show{opacity:1;transform:translateY(0)}#age-selector-container{margin-bottom:30px;padding:25px;background:linear-gradient(135deg,#fffc,#f8fafccc);border-radius:20px;border:1px solid rgba(245,158,11,.1);box-shadow:0 2px 10px #0000000d}#age-slider-container{margin-bottom:45px;transition:opacity .3s ease,visibility .3s ease}#age-slider-container label{display:block;margin-top:25px;margin-bottom:40px;font-weight:800;color:#f59e0b;font-size:2.5em;text-align:center}#age-text{transition:color .3s ease}@media (max-width: 768px){#age-slider-container label .years-old-text{display:none}}#age-slider{width:80%;cursor:pointer;margin:0 auto;display:block;-webkit-appearance:none;height:8px;background:linear-gradient(to right,#e5e7eb,#f59e0b);border-radius:10px;outline:none}#age-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#fbbf24);cursor:pointer;box-shadow:0 4px 12px #f59e0b66;transition:all .3s ease}#age-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 6px 15px #f59e0b80}#age-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#fbbf24);cursor:pointer;box-shadow:0 4px 12px #f59e0b66;transition:all .3s ease;border:none}#age-display{display:none}.switch{position:relative;display:inline-block;width:60px;height:34px;margin:0}@keyframes gentleBounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.toggle-container{display:flex;flex-direction:row;align-items:center;margin-top:40px;justify-content:center;gap:15px;min-height:34px;width:100%;position:relative;box-sizing:border-box}.toggle-label{font-size:1.3em;color:#f59e0b;font-weight:700;margin-right:10px;white-space:nowrap;flex-shrink:0}.switch{position:relative;display:inline-block;width:60px;height:34px;flex-shrink:0;margin:0}.switch input{opacity:0;width:0;height:0;position:absolute;top:0;left:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#e5e7eb;transition:.4s;border-radius:34px;box-shadow:0 2px 8px #0000001a;transform:translateZ(0);will-change:background-color}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%;box-shadow:0 2px 8px #0003;will-change:transform}input:checked+.slider{background:linear-gradient(135deg,#f59e0b,#fbbf24)}input:checked+.slider:before{transform:translate(26px)}.help-button{display:inline-flex;justify-content:center;align-items:center;width:32px;height:32px;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:50%;font-size:16px;color:#fff;border:none;cursor:pointer;transition:all .3s ease;font-weight:700;box-shadow:0 2px 8px #f59e0b4d;flex-shrink:0;margin:0;transform-origin:center}.help-button:hover{background:linear-gradient(135deg,#d97706,#b45309);transform:scale(1.1);box-shadow:0 4px 12px #f59e0b66}.info-panel{display:none;width:92%;max-width:450px;margin:15px auto;padding:20px;background:linear-gradient(135deg,#fffffff2,#f8fafcf2);border:1px solid rgba(99,102,241,.15);border-radius:16px;box-shadow:0 4px 15px #0000001a;font-size:1em;text-align:left;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.info-panel.active{display:block;animation:fadeInScale .4s ease-out}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.info-panel p{margin:12px 0;color:#374151;line-height:1.6}.info-panel ul{margin:12px 0;padding-left:25px}.info-panel li{margin-bottom:8px;color:#4b5563;line-height:1.5}#custom-start-container{margin-bottom:25px;display:flex;gap:15px;align-items:center}#custom-start-input{flex:1;padding:15px 20px;border:1px solid rgba(245,158,11,.2);border-radius:25px;font-size:1.6em;font-weight:700;background:#fff;transition:all .3s ease;box-shadow:0 2px 10px #0000000d;height:68px!important;min-height:68px!important;max-height:none;box-sizing:border-box;line-height:1.4;resize:none;overflow-y:hidden;vertical-align:top;font-family:inherit}#custom-start-input::placeholder{color:#9ca3af;opacity:1;font-weight:400}#custom-start-input:focus{outline:none;border-color:#f59e0b;box-shadow:0 0 0 4px #f59e0b1a;transform:translateY(-2px)}#custom-start-button{padding:0 25px;font-size:1.1em;font-weight:600;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #10b9814d;white-space:nowrap;height:68px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}#custom-start-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #10b98166}#custom-start-button.highlight{animation:gentleGlow 1.5s ease-in-out infinite}@keyframes gentleGlow{0%,to{box-shadow:0 4px 15px #10b9814d}50%{box-shadow:0 4px 20px #10b98180}}#start-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:30px;padding-bottom:25px}.start-button{padding:20px 15px;font-size:1.05em;font-weight:500;cursor:pointer;background:linear-gradient(135deg,#ffffffe6,#f8fafce6);color:#374151;border:1px solid rgba(245,158,11,.3);border-radius:20px;transition:all .3s ease;box-shadow:0 4px 15px #0000000d;position:relative;overflow:hidden;z-index:1;min-height:70px;display:flex;align-items:center;justify-content:center;text-align:center}.start-button:hover{background:#f59e0b0d;transform:translateY(-4px);box-shadow:0 8px 25px #f59e0b33;border-color:#fbbf24}.start-button:active{transform:translateY(-2px);box-shadow:0 4px 15px #f59e0b33}.accordion-content{max-height:0;overflow:hidden;transition:max-height .4s ease}.accordion-container.active .accordion-content{max-height:none;padding:25px;overflow-y:auto;max-height:80vh}.nested-accordion-button{width:100%;padding:15px 20px;border:none;background-color:#f9fafb;text-align:left;cursor:pointer;transition:all .3s ease;display:flex;justify-content:space-between;align-items:center;font-size:1em;font-weight:500}.nested-accordion-button.active{background-color:#e5e7eb}.nested-accordion-button.active h4{color:#1f2937}.nested-accordion-button.active .nested-accordion-icon{transform:rotate(45deg)}#phonics-rule-container{margin-top:10px;padding:10px;background-color:#ffffffb3;border-radius:8px;opacity:0;visibility:hidden;min-height:50px;transition:opacity .3s ease,visibility .3s ease;box-sizing:border-box;width:100%;position:relative}.loading-state{position:relative;pointer-events:none;opacity:.7}.loading-state:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #f59e0b;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.highlight{animation:buttonPulse 1s ease-in-out infinite}@keyframes buttonPulse{0%,to{box-shadow:0 0 #f59e0bb3}50%{box-shadow:0 0 0 10px #f59e0b00}}@media (max-width: 768px){#custom-start-container{flex-direction:column;gap:30px}#custom-start-input{margin-bottom:0}#start-options{grid-template-columns:1fr}}@media (max-width: 480px){#start-container h2{font-size:var(--header-size-mobile);margin-bottom:10px}#age-selector-container{background:none!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin-top:50px!important;margin-bottom:20px!important}.toggle-container{margin-top:50px!important}#start-options{display:none!important}#custom-start-button{width:calc(100% + 50px)!important;margin:30px -25px 0!important;box-sizing:border-box!important}#mobile-dotted-line,#desktop-dotted-line{display:none!important}#custom-start-input{height:120px!important;width:calc(100% + 50px)!important;margin:0 -25px!important;box-sizing:border-box!important;resize:none!important;white-space:normal!important;word-wrap:break-word!important;overflow-wrap:break-word!important;font-size:1.2em!important;line-height:1.4!important;padding:15px!important}#custom-start-input::placeholder{content:"Describe your adventure"!important}#age-selector-container .toggle-container:after{content:"";display:block;border-top:2px dotted #f59e0b;margin:20px 0}#start-container>div[style*=border-bottom]{display:none!important}#start-container h2{font-size:var(--header-size-tablet);margin-bottom:12px}}@media (max-width: 768px){.phonics-selector select,.phase-selector-dropdown,.pattern-selector-dropdown{max-width:100%;font-size:14px}.pattern-selector-wrapper,.phase-selector-wrapper{width:100%!important;max-width:550px!important;margin:0 auto!important}.pattern-selector-dropdown,.phase-selector-dropdown{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}#pattern-selector-container{width:100%!important;max-width:550px!important;margin:15px auto 0!important;box-sizing:border-box!important;padding:0!important}.toggle-container{position:relative!important;margin:20px 0!important}#age-slider-container{min-height:80px!important;box-sizing:border-box!important}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;border-radius:20px;padding:40px;max-width:380px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-close{position:absolute;top:15px;right:15px;background:none;border:none;font-size:24px;cursor:pointer;color:#999;padding:0}.modal-close:hover{color:#333}.modal-body{max-width:328px;margin:0 auto}.modal-body p{font-size:1.1rem;font-weight:400;line-height:1.6;color:#4b5563;margin-bottom:12px}.modal-body .highlight{color:#f59e0b;font-weight:700;animation:none!important;transition:none!important}#phonics-rule-container{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;width:100%;position:relative}#phonics-rule-container.show,#phonics-rule-container[style*="display: block"]{opacity:1;visibility:visible}#phonics-rule-container.fade-out{opacity:0;visibility:hidden}#phonics-rule-container.fade-in{opacity:1;visibility:visible}.phase-selector-wrapper{margin:20px 0;display:flex;flex-direction:column;align-items:center}.phase-selector-dropdown{width:100%;max-width:550px;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;font-weight:700;background-color:#fff;cursor:pointer;transition:all .3s ease;text-align-last:center;margin-bottom:25px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.phase-selector-dropdown:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.pattern-selector-wrapper{margin:20px 0;display:flex;flex-direction:column;align-items:center}.pattern-selector-dropdown{width:100%;max-width:550px;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;font-weight:700;background-color:#fff;cursor:pointer;transition:all .3s ease;text-align-last:center;margin-bottom:20px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pattern-selector-dropdown:focus{outline:none!important;border-color:#e5e7eb!important;box-shadow:none!important}.pattern-selector-dropdown:hover{border-color:#9ca3af}.pattern-selector-dropdown option,.pattern-selector-dropdown optgroup{padding:8px;font-weight:400;text-align:left}.phase-selector-dropdown.has-selection,.pattern-selector-dropdown.has-selection{color:#f59e0b!important}.phase-selector-dropdown:hover{border-color:#9ca3af}.phase-selector-dropdown option{padding:8px;font-weight:400;text-align:left}.highlight-error{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441a!important;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(245,158,11,.5);outline-offset:2px}.phonics-highlight{transition:all .2s ease;border-radius:4px;padding:1px 3px;position:relative}.phonics-highlight:hover{transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.no-break{white-space:nowrap;word-break:keep-all;overflow-wrap:normal}.accordion-container{margin-top:30px;border-radius:16px;background:linear-gradient(135deg,#fffffff2,#f8fafcf2);overflow:hidden;box-shadow:0 4px 15px #00000014;border:1px solid rgba(99,102,241,.1)}.accordion-button{width:100%;padding:25px;background:none;border:none;text-align:left;cursor:pointer;transition:all .3s ease;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(99,102,241,.1)}.accordion-button.active .accordion-icon{transform:rotate(180deg)}.accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#ffffff80}.accordion-container.active .accordion-content{max-height:1000px;padding:25px}.nested-accordion{margin:10px 0;border:1px solid rgba(99,102,241,.1);border-radius:8px;overflow:hidden}.nested-accordion-button{width:100%;padding:15px 20px;background:#ffffffb3;border:none;text-align:left;cursor:pointer;transition:all .3s ease;display:flex;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600;color:#374151}.nested-accordion-button:hover{background:#f59e0b1a}.nested-accordion-icon{font-size:1.2rem;color:#f59e0b;transition:transform .3s ease}.nested-accordion.active .nested-accordion-icon{transform:rotate(180deg)}.nested-accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#ffffffe6;padding:0 20px}.nested-accordion.active .nested-accordion-content{max-height:500px;padding:15px 20px}.story-viewer{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column}.story-nav-header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.2);padding:16px 24px;position:sticky;top:0;z-index:100}.nav-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.story-title-header{text-align:center}.story-title-header h1{margin:0;font-size:1.5rem;color:var(--gray-800);font-weight:600}.story-content-area{flex:1;max-width:800px;margin:0 auto;padding:32px 24px;width:100%}.story-image-container{text-align:center;margin-bottom:24px;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;justify-content:center}.story-image-container #story-image{width:100%;max-width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.story-image{max-width:100%;max-height:400px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}#story-image-container #edit-image-btn.edit-image-icon{position:absolute;bottom:12px;right:12px;background:#ffffffe6;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #00000026;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;padding:0}#story-image-container #edit-image-btn.edit-image-icon:hover{background:#fff;transform:scale(1.1);box-shadow:0 4px 12px #00000040}#story-image-container #edit-image-btn.edit-image-icon img{width:20px;height:20px;opacity:.8}#story-image-container #edit-image-btn.edit-image-icon:hover img{opacity:1}.story-text-container{background:#fffffff2;border-radius:var(--radius-lg);padding:32px;margin-bottom:24px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.story-navigation-controls{display:flex;justify-content:space-between;gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(245,158,11,.2)}.story-nav-btn{display:flex;align-items:center;padding:12px 24px;border:none;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:120px;justify-content:center}.story-nav-btn.primary{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;box-shadow:0 4px 15px #f59e0b4d}.story-nav-btn.primary:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:translateY(-2px);box-shadow:0 6px 20px #f59e0b66}.story-nav-btn.secondary{background:#6b72801a;color:#6b7280;border:1px solid rgba(107,114,128,.2)}.story-nav-btn.secondary:hover:not(:disabled){background:#6b728033;color:#4b5563;transform:translateY(-1px)}.story-nav-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.story-nav-btn:disabled:hover{transform:none;box-shadow:none}.nav-text{font-weight:600}.story-text{font-size:1.1rem;line-height:1.7;color:var(--gray-700)}.story-nav-footer{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.2);padding:20px 24px;position:sticky;bottom:0}.story-viewer-container{margin-top:70px;padding:20px;max-width:1200px;margin-left:auto;margin-right:auto}.story-viewer{background:linear-gradient(135deg,#fff,#f8fafc);border-radius:24px;padding:35px;box-shadow:0 4px 15px #0000000d;border:1px solid rgba(245,158,11,.1);overflow:visible;height:auto}.story-header{text-align:center;margin-bottom:30px}.story-header h1{color:#f59e0b;font-size:2.5em;font-weight:800;margin-bottom:10px;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.story-header h1.centered-orange-title{color:#f59e0b;text-align:center;font-size:2.5em;font-weight:800;margin:0 auto 10px;background:linear-gradient(135deg,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:block}.story-meta{display:flex;justify-content:center;gap:20px;font-size:.9rem;color:#666;margin-bottom:10px}.phonics-controls{margin-bottom:20px;padding:15px;background:#f9f9f9cc;border-radius:12px;text-align:center}.phonics-controls label{font-weight:600;margin-right:10px;color:#374151}.phonics-controls select{padding:8px 12px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;color:#374151}.story-content-wrapper{margin-bottom:30px;overflow:visible;height:auto;min-height:fit-content}.story-image-container img{max-width:100%;height:auto;border-radius:16px;box-shadow:0 8px 25px #0000001a}.variant-controls{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;justify-content:center;align-items:center;gap:8px;width:fit-content;background:#0003;padding:4px 8px;border-radius:4px}.variant-controls>*{display:inline-flex;align-items:center}.variant-btn{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;padding:4px 6px;border-radius:3px;cursor:pointer;font-weight:600;font-size:.7rem}.variant-btn:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:scale(1.05)}#variant-indicator{color:#fff;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.65rem}.image-edit-inline{margin:15px 0;padding:15px;background:#f8fafccc;border-radius:12px;border:2px solid #e5e7eb;width:100%}.image-edit-inline textarea{width:100%;padding:12px;border:2px solid #e5e7eb;border-radius:8px;font-family:inherit;resize:vertical;min-height:60px}.edit-buttons{margin-top:10px;display:flex;gap:16px;justify-content:center}.edit-buttons button{display:flex;align-items:center;padding:12px 24px;border:none;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:120px;justify-content:center}.edit-buttons .secondary-btn{background:#6b72801a;color:#6b7280;border:1px solid rgba(107,114,128,.2)}.edit-buttons .secondary-btn:hover{background:#6b728033;color:#4b5563;transform:translateY(-1px)}.story-text-container{margin-bottom:20px}#story-text{font-family:Andika,Georgia,serif;font-size:1.2rem;line-height:1.8;color:#374151;padding:35px;background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:24px;border:1px solid rgba(245,158,11,.1);box-shadow:0 4px 15px #00000014}#story-text.age-font-large{font-size:1.8em;line-height:1.8}#story-text.age-font-medium{font-size:1.3em;line-height:1.7}#story-text.age-font-small{font-size:1.15em;line-height:1.6}.story-text.editing{border:2px solid #f59e0b;outline:none}.text-edit-controls{margin-top:15px;display:flex;gap:10px;justify-content:flex-end}.edit-btn{background:none;border:1px solid #e5e7eb;color:#666;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:.9rem}.edit-btn:hover{background:#f9f9f9;border-color:#d1d5db}.text-variant-controls{display:flex;justify-content:center;align-items:center;gap:8px;width:fit-content;margin:16px auto 0}.icon-btn{padding:6px 10px;border:1px solid #d1d5db;background:#f9f9f9;border-radius:4px;cursor:pointer;font-size:14px}.text-variant-controls .icon-btn{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:none;padding:4px 6px;border-radius:3px;cursor:pointer;font-weight:600;font-size:.7rem}.text-variant-controls .icon-btn:hover{background:linear-gradient(135deg,#d97706,#f59e0b);transform:scale(1.05)}.text-variant-controls span{color:#374151;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.65rem}.icon-btn:hover{background:#f3f4f6}#edit-text-icon.edit-text{position:absolute;top:8px;right:8px;background:#ffffffe6;border:1px solid #e5e7eb;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}.story-choices{margin:20px 0;padding:20px;background:#f8fafccc;border-radius:16px;border:1px solid rgba(245,158,11,.1)}.publish-container{width:100%;margin:30px 0;text-align:center}.publish-btn{width:100%;padding:16px 24px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #10b9814d;position:relative;z-index:10}.publish-btn:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.publish-btn.unpublish{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 15px #ef44444d}.publish-btn.unpublish:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 6px 20px #ef444466}.story-choices h3{color:#f59e0b;font-size:1.3rem;margin-bottom:15px}.choices-list{display:flex;flex-direction:column;gap:10px}.choice-item{padding:12px 16px;background:#fff;border-radius:8px;border:1px solid #e5e7eb;color:#374151}.phonics-explanations{margin:20px 0;padding:20px;background:#4caf500d;border-radius:16px;border:1px solid rgba(76,175,80,.2)}.phonics-explanation h3{color:#4caf50;margin-bottom:10px}.child-friendly{font-style:italic;color:#666;margin-top:10px}.story-navigation{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-top:25px;border-top:1px solid rgba(245,158,11,.2)}.nav-buttons{display:flex;gap:15px;justify-content:space-between;max-width:800px;margin:0 auto}.nav-btn{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;border:none;padding:12px 20px;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease}.nav-btn:hover:not(:disabled){background:linear-gradient(135deg,#4b5563,#374151);transform:translateY(-2px)}.nav-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.action-buttons{display:flex;gap:15px}.loading-screen,.error-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:400px;text-align:center;position:relative;width:100%}.spinner{width:60px;height:60px;border:6px solid #f3f4f6;border-top:6px solid #f59e0b;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-icon{font-size:3rem;margin-bottom:20px}@media (max-width: 768px){.story-viewer-container{padding:0;margin-top:60px;width:100%;max-width:100%}.story-viewer{background:none!important;border-radius:0!important;padding:15px!important;box-shadow:none!important;border:none!important;width:100%;max-width:100%}.story-content-wrapper{margin-top:60px!important}.story-content-area{max-width:100%!important;padding:15px!important;width:100%!important}.story-image-container{background:none!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:0!important;margin-bottom:20px!important;width:100%!important;max-width:100%!important}.story-image-container #story-image{width:100%!important;max-width:100%!important;height:auto!important;border-radius:12px!important}.story-text-container{background:none!important;border-radius:0!important;box-shadow:none!important;border:none!important;padding:0!important;margin-bottom:20px!important;width:100%!important;max-width:100%!important}.story-text{width:100%!important;padding:15px!important;font-size:1.1rem!important;line-height:1.6!important}.story-header h1{display:none!important}.story-meta{flex-direction:column;gap:5px}.story-navigation{flex-direction:column;align-items:stretch}.nav-buttons,.action-buttons{justify-content:center;width:100%}.text-edit-controls{justify-content:center}#story-image-container #edit-image-btn.edit-image-icon,#image-edit-inline,.text-edit-controls{display:none}.variant-controls{display:none!important}#story-image-container #variant-controls.variant-controls,.nav-buttons{display:none}.phonics-controls{display:none!important}}.accordion-container{border-radius:16px;background:linear-gradient(135deg,#fffffff2,#f8fafcf2);overflow:hidden;box-shadow:0 4px 15px #00000014;border:1px solid rgba(245,158,11,.2)}.accordion-button{width:100%;padding:25px;background:none;border:none;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color .3s ease}.accordion-button:hover{background:#f59e0b0d}.accordion-button h3{font-size:1.4rem;font-weight:700;color:#f59e0b;margin:0}.accordion-icon{font-size:1.8rem;color:#f59e0b;transition:transform .3s ease;font-weight:300}#phonics-notes-accordion .accordion-content{display:none!important;padding:0}#phonics-notes-accordion.active .accordion-content{display:block!important;padding:25px;background:#fff;border-top:1px solid #e5e7eb}.accordion-button.active .accordion-icon{transform:rotate(45deg)}.nested-accordion{margin:15px 0;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.nested-accordion-button{width:100%;padding:15px 20px;border:none;background-color:#f9fafb;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color .3s ease}.nested-accordion-button:hover{background-color:#f3f4f6}.nested-accordion-button h4{margin:0;color:#374151;font-size:1.1em;font-weight:600}.nested-accordion-icon{font-size:1.2em;color:#6b7280;transition:transform .3s ease}.nested-accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease}.nested-accordion.active .nested-accordion-content{max-height:1000px}.nested-accordion-content>div{padding:20px}.phonics-highlight{padding:0 1px;border-radius:3px;position:relative}.phonics-highlight:not(.tricky-word-highlight){background-color:#4caf5033!important;border-bottom:2px dotted #4CAF50!important}.tricky-word-highlight{background-color:#9c27b033!important;border-bottom:2px dotted #9C27B0!important}.disable-phonics-highlights .phonics-highlight:not(.tricky-word-highlight){background-color:transparent!important;color:inherit!important;border:none!important;font-weight:inherit!important}.disable-tricky-words .tricky-word-highlight{background-color:transparent!important;color:inherit!important;border:none!important;font-weight:inherit!important}