.story-selector{margin-bottom:var(--spacing-xl)}.story-selector h2{text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.story-selector .subtitle{text-align:center;color:var(--text-secondary);margin-bottom:var(--spacing-lg);font-size:var(--font-size-base)}.story-selector .empty-state{text-align:center;color:var(--text-secondary);padding:var(--spacing-xl)}.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-md)}.story-card{background:var(--surface);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);text-align:left;cursor:pointer;transition:all .2s ease;position:relative}.story-card:hover{border-color:var(--primary-color);box-shadow:var(--shadow-md);transform:translateY(-2px)}.story-card:focus{outline:2px solid var(--primary-color);outline-offset:2px}.story-card.selected{background:var(--surface);border-color:#ff6b35;border-width:3px}.story-card .story-title{font-size:var(--font-size-lg);font-weight:700;margin-bottom:var(--spacing-xs);color:var(--text-primary)}.story-card .story-description{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.6;margin-bottom:0}@media(max-width:768px){.story-grid{grid-template-columns:1fr}}.story-form-container{margin-bottom:var(--spacing-xl)}.story-form-container h2{text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.story-form-container .form-instructions{text-align:center;color:var(--text-secondary);margin-bottom:var(--spacing-lg);font-size:var(--font-size-base)}.story-form{background:var(--surface);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.form-field{display:flex;flex-direction:column}.form-field .field-label{font-weight:600;color:var(--text-primary);font-size:var(--font-size-base);margin-bottom:var(--spacing-xs);min-height:3.2em;display:flex;align-items:flex-end}.form-field .field-label .label-content{line-height:1.4}.form-field .field-input{padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--border-color);border-radius:var(--radius-md);font-size:var(--font-size-base);font-family:var(--font-family);color:var(--text-primary);background:var(--background);transition:all .2s ease}.form-field .field-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.form-field .field-input.error{border-color:var(--error-color)}.form-field .field-input.error:focus{box-shadow:0 0 0 3px #ef44441a}.form-field .field-input:disabled{background:var(--surface);cursor:not-allowed;opacity:.6}.form-field .field-input::placeholder{color:var(--text-secondary);opacity:.6}.form-field .field-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px;min-height:20px}.form-field .field-meta .field-error{font-size:var(--font-size-sm);color:var(--error-color);font-weight:500}.form-actions{display:flex;justify-content:center;padding-top:var(--spacing-md);border-top:1px solid var(--border-color)}.form-actions .button{min-width:200px;padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-lg)}@media(max-width:768px){.form-grid{grid-template-columns:1fr}.form-actions .button{width:100%}}.completed-story{margin-bottom:var(--spacing-xl)}.story-header{text-align:center;margin-bottom:var(--spacing-lg)}.story-header h2{color:var(--text-primary);margin-bottom:var(--spacing-xs)}.story-header .debug-info{font-size:var(--font-size-sm);color:var(--text-secondary);font-family:monospace;margin:0}.story-content{background:var(--surface);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-lg);line-height:1.8}.story-content .story-paragraph{font-size:var(--font-size-lg);color:var(--text-primary);margin-bottom:var(--spacing-md)}.story-content .story-paragraph:last-child{margin-bottom:0}.story-actions{display:flex;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap}.story-actions .button{min-width:180px}@media(max-width:768px){.story-content{padding:var(--spacing-lg)}.story-content .story-paragraph{font-size:var(--font-size-base)}.story-actions{flex-direction:column}.story-actions .button{width:100%}}.progress-indicator{background:var(--surface);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-lg)}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.progress-header h3{margin:0;color:var(--text-primary);font-size:var(--font-size-lg)}.status-badge{padding:4px 12px;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600}.status-badge.status-running{background:#dbeafe;color:#1e40af}.status-badge.status-completed{background:#d1fae5;color:#065f46}.status-badge.status-failed{background:#fee2e2;color:var(--error-color)}.progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.progress-info .progress-text{font-size:var(--font-size-base);color:var(--text-secondary)}.progress-info .progress-percent{font-size:var(--font-size-lg);font-weight:700;color:var(--primary-color)}.progress-bar-container{width:100%;height:12px;background:var(--border-color);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--spacing-sm)}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));transition:width .5s ease;border-radius:var(--radius-md)}.progress-eta{text-align:center;font-size:var(--font-size-sm);color:var(--text-secondary);font-style:italic}.progress-error{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:#fee2e2;color:var(--error-color);border-radius:var(--radius-sm);border-left:4px solid var(--error-color);font-size:var(--font-size-sm)}.image-gallery{margin-bottom:var(--spacing-xl)}.gallery-header{text-align:center;margin-bottom:var(--spacing-lg)}.gallery-header h3{margin-bottom:var(--spacing-xs);color:var(--text-primary);font-size:var(--font-size-xl)}.gallery-header .gallery-subtitle{color:var(--text-secondary);font-size:var(--font-size-base);margin:0}.character-section{margin-bottom:var(--spacing-xl);text-align:center}.character-section .character-heading{margin-bottom:var(--spacing-md);color:var(--text-primary);font-size:var(--font-size-lg)}.character-section .character-image-container{display:flex;justify-content:center}.character-section .character-image-container .character-image{max-width:400px;width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:3px solid var(--primary-color)}.section-heading{margin-bottom:var(--spacing-md);color:var(--text-primary);font-size:var(--font-size-lg);text-align:center}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.gallery-item{position:relative;background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:all .2s ease}.gallery-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.gallery-item .gallery-image{width:100%;height:250px;object-fit:cover;display:block}.gallery-item .gallery-item-label{padding:var(--spacing-sm);background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;text-align:center;font-weight:600;font-size:var(--font-size-sm)}.gallery-item .gallery-item-skipped{width:100%}.gallery-item .gallery-item-skipped .skipped-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:250px;background:var(--surface-light);border:2px dashed var(--border-color)}.gallery-item .gallery-item-skipped .skipped-placeholder .skipped-icon{font-size:48px;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.gallery-item .gallery-item-skipped .skipped-placeholder .skipped-text{color:var(--text-secondary);font-size:var(--font-size-sm);font-style:italic}.gallery-item .gallery-item-skipped .gallery-item-label{background:var(--surface-dark);color:var(--text-secondary)}.gallery-actions{display:flex;justify-content:center;padding-top:var(--spacing-md);border-top:1px solid var(--border-color)}.gallery-actions .button{min-width:200px}@media(max-width:768px){.gallery-grid{grid-template-columns:1fr}.gallery-item .gallery-image{height:200px}.gallery-actions .button{width:100%}}.completion-section{text-align:center;max-width:600px;margin:0 auto;padding:2rem 1rem}.completion-heading{font-size:2rem;font-weight:700;margin-bottom:1rem;color:var(--color-primary, #1976d2)}.completion-message{font-size:1.125rem;line-height:1.6;margin-bottom:2rem;color:var(--color-text-primary, #333333)}.completion-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem;margin-bottom:1rem}.completion-cancel-link{background:none;border:none;color:var(--color-text-secondary, #666666);font-size:.875rem;text-decoration:underline;cursor:pointer;padding:.5rem;margin-top:.5rem;transition:color .2s ease}.completion-cancel-link:hover{color:var(--color-text-primary, #333333);text-decoration:none}.completion-cancel-link:focus-visible{outline:2px solid var(--color-primary, #1976d2);outline-offset:2px;border-radius:2px}@media(max-width:768px){.completion-heading{font-size:1.5rem}.completion-message{font-size:1rem}.completion-actions{flex-direction:column;align-items:stretch}.completion-actions button{width:100%}}.completion-section:focus-visible{outline:2px solid var(--color-primary, #1976d2);outline-offset:4px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary-color: #FF6B35;--primary-dark: #E55A2B;--secondary-color: #F45B69;--background: #ffffff;--surface: #f9fafb;--text-primary: #111827;--text-secondary: #4a4a4a;--border-color: #e5e7eb;--error-color: #ef4444;--success-color: #10b981;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1)}html{font-size:16px;line-height:1.5}body{font-family:var(--font-family);color:var(--text-primary);background-color:var(--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:var(--spacing-sm)}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}p{margin-bottom:var(--spacing-sm)}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;padding:var(--spacing-lg) var(--spacing-md);text-align:center;box-shadow:var(--shadow-md)}.app-header h1{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-xs)}.app-header .tagline{font-size:var(--font-size-base);opacity:.9;margin:0}.app-main{flex:1;padding:var(--spacing-lg) var(--spacing-md);max-width:1200px;width:100%;margin:0 auto}.app-footer{background-color:var(--surface);padding:var(--spacing-md);text-align:center;border-top:1px solid var(--border-color);color:var(--text-secondary);font-size:var(--font-size-sm)}.app-footer p{margin:0;display:flex;align-items:center;justify-content:center;gap:.25rem}.app-footer .footer-link{color:var(--primary-color)}.app-footer .footer-link:hover{color:var(--primary-dark)}.app-footer .footer-github{color:var(--text-secondary);text-decoration:none;display:inline-flex;align-items:center;vertical-align:middle}.app-footer .footer-github:hover{color:var(--primary-color)}.button{display:inline-block;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm)}.button:hover{background-color:var(--primary-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.button:disabled{opacity:.5;cursor:not-allowed;transform:none}.button.button-secondary{background-color:var(--surface);color:var(--text-primary);border:1px solid var(--border-color)}.button.button-secondary:hover{background-color:var(--border-color)}.card{background-color:var(--surface);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-md)}.error-message{padding:var(--spacing-sm) var(--spacing-md);background-color:#fee2e2;color:var(--error-color);border-left:4px solid var(--error-color);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md)}.loading{text-align:center;padding:var(--spacing-xl);color:var(--text-secondary)}.text-center{text-align:center}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}
