:root{--bg-body: #ffffff;--bg-card: #f8fafc;--bg-input: #ffffff;--accent-navy: #0f172a;--accent-blue: #2E40A6;--accent-purple: #7c3aed;--accent-gradient: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--border-color: #e2e8f0;--success: #10b981;--error: #ef4444;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .05);--shadow-md: 0 10px 25px -5px rgba(15, 23, 42, .08)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:var(--bg-body);color:var(--text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 10% 10%,rgba(46,64,166,.03) 0%,transparent 30%),radial-gradient(circle at 90% 90%,rgba(124,58,237,.03) 0%,transparent 30%);pointer-events:none;z-index:-1}.container{max-width:1100px;margin:0 auto;padding:2rem}header{text-align:center;padding:4rem 0 3rem;display:flex;flex-direction:column;align-items:center}.brand-container{display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}.svg-gradient{background:var(--accent-gradient);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;display:block}.brand-logo-text{width:380px;height:84px;-webkit-mask-image:url(/img/logo_text.svg);mask-image:url(/img/logo_text.svg)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tagline{color:var(--text-secondary);font-family:Inter,sans-serif;font-size:1.05rem;letter-spacing:-.01em;font-weight:400;max-width:500px}.results-header,.story-page-header{padding:1.5rem 0 2rem}.nav-buttons{display:flex;align-items:center;gap:1rem}.nav-button{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;padding:.5rem 1rem;border-radius:10px;transition:all .2s ease;border:none;background:transparent;cursor:pointer;font-family:Inter,sans-serif;font-size:.9rem;font-weight:500;color:var(--text-primary)}.nav-button.home-button{padding:0}.nav-button:hover{transform:scale(1.05);opacity:.8}.nav-button.back-button{background:var(--bg-card);border:1px solid var(--border-color)}.nav-button.back-button:hover{background:#f1f5f9;border-color:var(--accent-blue);color:var(--accent-blue)}.nav-button.back-button svg{width:18px;height:18px}.brand-logo-small{width:200px;height:44px;-webkit-mask-image:url(/img/logo_text.svg);mask-image:url(/img/logo_text.svg)}.form-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:24px;padding:2.5rem;margin-bottom:2.5rem;box-shadow:var(--shadow-sm)}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:2rem}.form-group-grid-size{grid-column:1 / -1}.form-group{display:flex;flex-direction:column;gap:.4rem}label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}input,select{font-family:Inter,sans-serif;font-size:.95rem;font-weight:500;padding:.8rem 1rem;background:var(--bg-input);border:1.5px solid var(--border-color);border-radius:12px;color:var(--text-primary);transition:all .2s cubic-bezier(.4,0,.2,1)}input:focus,select:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 4px #2e40a614}input::placeholder{color:var(--text-muted)}select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.1rem;padding-right:2.5rem}.grid-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.grid-preset-btn{padding:.5rem .875rem;font-family:JetBrains Mono,monospace;font-size:.8rem;font-weight:500;color:var(--text-secondary);background:#fff;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .15s ease}.grid-preset-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.grid-preset-btn.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}.grid-controls{display:flex;gap:1rem;margin-top:.5rem}.grid-controls .form-group{flex:1}.btn-generate{width:100%;padding:1.1rem 2rem;font-family:Plus Jakarta Sans,sans-serif;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--accent-navy);border:none;border-radius:16px;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 12px #0f172a1a}.btn-generate:hover:not(:disabled){transform:translateY(-2px);background:var(--accent-gradient);box-shadow:0 12px 24px #7c3aed40}.btn-generate:active:not(:disabled){transform:translateY(0)}.btn-generate:disabled{opacity:.5;cursor:not-allowed}.btn-generate .spinner{display:none;width:18px;height:18px;border:2px solid transparent;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;margin-right:.75rem;vertical-align:middle}.btn-generate.loading .spinner{display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.status{text-align:center;padding:1.25rem;border-radius:12px;margin-bottom:2rem;font-family:JetBrains Mono,monospace;font-size:.85rem;display:none;border:1px solid transparent}.status.visible{display:block}.status.loading{background:#f8fafc;border-color:var(--border-color);color:var(--accent-blue)}.status.error{background:#fef2f2;border-color:#fee2e2;color:var(--error)}.results{display:none;animation:fadeIn .6s cubic-bezier(.16,1,.3,1)}.results.visible{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:0 .5rem}.result-title{font-family:Plus Jakarta Sans,sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--accent-navy)}.result-meta{font-family:JetBrains Mono,monospace;font-size:.8rem;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border-color);padding:.5rem 1rem;border-radius:30px}.story-banner{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:var(--accent-gradient);border-radius:16px;margin-bottom:1.5rem;cursor:pointer;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 15px #7c3aed33}.story-banner:hover{transform:translateY(-2px);box-shadow:0 8px 25px #7c3aed59}.story-banner:active{transform:translateY(0)}.story-banner-content{display:flex;align-items:center;gap:1rem;color:#fff}.story-banner-content svg{flex-shrink:0}.story-banner-text{display:flex;flex-direction:column;gap:.15rem}.story-banner-title{font-family:Plus Jakarta Sans,sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.01em}.story-banner-subtitle{font-size:.8rem;opacity:.85}.story-banner-arrow{color:#fff;opacity:.8;transition:transform .2s ease}.story-banner:hover .story-banner-arrow{transform:translate(4px)}.collage-container{background:var(--bg-card);border:1px solid var(--border-color);border-radius:24px;padding:1.5rem;margin-bottom:2.5rem;box-shadow:var(--shadow-md)}.collage-image{width:100%;border-radius:12px;display:block}.collage-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}.download-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.5rem;font-family:Plus Jakarta Sans,sans-serif;font-size:.9rem;font-weight:600;color:var(--text-primary);background:#fff;border:1px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s ease;text-decoration:none}.download-btn:hover{border-color:var(--accent-blue);background:var(--bg-card);transform:translateY(-1px)}.missing-images-banner{display:flex;align-items:center;padding:1rem 1.5rem;background:linear-gradient(135deg,#dc2626,#b91c1c);border-radius:16px;margin-bottom:1.5rem;box-shadow:0 4px 15px #dc262633}.missing-images-banner-content{display:flex;align-items:center;gap:1rem;color:#fff}.missing-images-banner-content svg{flex-shrink:0}.missing-images-banner-text{display:flex;flex-direction:column;gap:.15rem}.missing-images-banner-title{font-family:Plus Jakarta Sans,sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.01em}.missing-images-banner-subtitle{font-size:.8rem;opacity:.9}.album-hint{font-size:.95rem;color:var(--text-secondary);text-align:center;margin-bottom:1.5rem}.album-list{background:var(--bg-card);border:1px solid var(--border-color);border-radius:24px;padding:2rem}.album-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.album-list h3{font-size:1.25rem;font-weight:700;color:var(--accent-navy);letter-spacing:-.02em;margin:0}.album-count-info{font-family:JetBrains Mono,monospace;font-size:.75rem;color:var(--text-secondary);background:#f1f5f9;padding:.4rem .8rem;border-radius:20px}.album-grid{display:grid;gap:.75rem;max-height:500px;overflow-y:auto;padding-right:.5rem}.album-item{display:grid;grid-template-columns:40px 1fr auto auto;gap:1rem;align-items:center;padding:1rem;background:var(--bg-input);border:1px solid var(--border-color);border-radius:12px;transition:all .2s ease;position:relative}.album-item:hover{border-color:var(--accent-blue)}.album-item.skipped{opacity:.5;background:#f8fafc}.album-item.skipped .album-name,.album-item.skipped .album-artist{text-decoration:line-through}.album-item.missing-image:not(.skipped){border-color:#fbbf24;background:#fffbeb}.album-rank{font-family:JetBrains Mono,monospace;font-weight:700;color:var(--accent-blue);font-size:.9rem}.album-info{overflow:hidden}.album-name{font-weight:600;font-size:.95rem;color:var(--text-primary);line-height:1.2}.album-artist{color:var(--text-secondary);font-size:.85rem;margin-top:.1rem}.album-count{font-family:JetBrains Mono,monospace;font-size:.75rem;color:var(--text-secondary);background:#f1f5f9;padding:.3rem .6rem;border-radius:6px}.custom-image-badge,.missing-image-badge{display:inline-block;font-size:.65rem;font-weight:600;padding:.15rem .4rem;border-radius:4px;margin-top:.25rem;text-transform:uppercase;letter-spacing:.03em}.custom-image-badge{background:#dcfce7;color:#166534}.missing-image-badge{background:#fef3c7;color:#92400e}.album-actions{display:flex;gap:.5rem;opacity:0;transition:opacity .2s ease}.album-item:hover .album-actions{opacity:1}.album-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border-color);border-radius:6px;background:#fff;cursor:pointer;transition:all .15s ease;color:var(--text-secondary)}.album-action-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue);background:#f8fafc}.album-action-btn.skip-btn:hover{border-color:var(--error);color:var(--error);background:#fef2f2}.album-action-btn.restore-btn:hover{border-color:var(--success);color:var(--success);background:#f0fdf4}.album-action-btn.upload-btn:hover{border-color:var(--accent-purple);color:var(--accent-purple);background:#faf5ff}@media (hover: none){.album-actions{opacity:1}}footer{text-align:center;padding:4rem 0;color:var(--text-muted);font-size:.85rem;font-weight:500}footer a{color:var(--accent-blue);text-decoration:none;font-weight:600}footer a:hover{text-decoration:underline}.buy-coffee-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.625rem 1.25rem;background:#fff;color:var(--accent-navy);font-weight:600;font-size:.9rem;border-radius:12px;border:2px solid var(--accent-navy);text-decoration:none;transition:all .2s ease;box-shadow:0 2px 8px #0000001a}.buy-coffee-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;text-decoration:none;background:#f8fafc}.buy-coffee-btn svg{stroke:var(--accent-navy)}.album-grid::-webkit-scrollbar{width:4px}.album-grid::-webkit-scrollbar-track{background:transparent}.album-grid::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}.story-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(4px);backdrop-filter:blur(4px)}.story-page-main .story-modal-overlay{position:static;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;display:block}.story-modal{background:#fff;border-radius:24px;max-width:600px;width:100%;max-height:90vh;overflow:hidden;box-shadow:0 25px 50px -12px #00000040;display:flex;flex-direction:column}.story-page-main .story-modal{max-width:none;max-height:none;box-shadow:none;background:transparent;border-radius:0}.story-modal-wide{max-width:900px}.story-page-main .story-modal-wide{max-width:none}.story-modal-body{overflow-y:auto;flex:1}.story-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid var(--border-color)}.story-page-main .story-modal-header{display:none}.story-modal-header h3{font-family:Plus Jakarta Sans,sans-serif;font-size:1.25rem;font-weight:700;color:var(--accent-navy);margin:0}.story-close-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:var(--bg-card);border-radius:10px;cursor:pointer;color:var(--text-secondary);transition:all .2s ease}.story-close-btn:hover{background:#f1f5f9;color:var(--text-primary)}.story-content{padding:1.5rem 2rem}.story-page-main .story-content{padding:0}.story-content-horizontal{display:flex;gap:2rem;align-items:flex-start}.story-preview-container{flex-shrink:0;display:flex;flex-direction:column;gap:1rem}.story-preview-container .story-download-btn{width:100%}.story-preview{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;aspect-ratio:9/16;width:225px;display:flex;align-items:center;justify-content:center;overflow:hidden}.story-preview img{width:100%;height:100%;object-fit:contain}.story-loading{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-secondary)}.story-loading .spinner{width:32px;height:32px;border:3px solid var(--border-color);border-top-color:var(--accent-blue);border-radius:50%;animation:spin .8s linear infinite}.story-controls{flex:1;display:flex;flex-direction:column;gap:1rem;min-width:0}.story-control-group{display:flex;flex-direction:column;gap:.5rem}.story-control-group label{font-size:.85rem;font-weight:500;color:var(--text-secondary);text-transform:none;letter-spacing:normal}.story-control-group input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--border-color);border-radius:3px;outline:none;border:none;padding:0}.story-control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--accent-blue);border-radius:50%;cursor:pointer;transition:transform .1s ease}.story-control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.control-value{font-family:JetBrains Mono,monospace;font-size:.75rem;color:var(--text-secondary);text-align:right}.story-slider-control{display:flex;flex-direction:column;gap:.5rem}.slider-header{display:flex;justify-content:space-between;align-items:center}.slider-header label{font-size:.85rem;font-weight:500;color:var(--text-secondary)}.slider-value{font-family:JetBrains Mono,monospace;font-size:.75rem;color:var(--text-secondary);min-width:50px;text-align:right}.slider-row{display:flex;align-items:center;gap:.5rem}.slider-row input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:6px;background:var(--border-color);border-radius:3px;outline:none;border:none;padding:0}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent-blue);border-radius:50%;cursor:pointer;transition:transform .1s ease}.slider-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.slider-btn,.slider-reset-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border-color);background:#fff;border-radius:6px;cursor:pointer;color:var(--text-secondary);transition:all .15s ease;flex-shrink:0}.slider-btn:hover:not(:disabled),.slider-reset-btn:hover:not(:disabled){background:var(--bg-card);border-color:var(--accent-blue);color:var(--accent-blue)}.slider-btn:disabled,.slider-reset-btn:disabled{opacity:.4;cursor:not-allowed}.slider-reset-btn{margin-left:.25rem}.story-background-info{font-size:.8rem;color:var(--text-muted);padding-top:.5rem;border-top:1px solid var(--border-color);margin-top:.5rem}.background-type-toggle{display:flex;gap:0;border:1px solid var(--border-color);border-radius:8px;overflow:hidden}.toggle-btn{flex:1;padding:.5rem 1rem;font-size:.85rem;font-weight:500;background:#fff;border:none;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.toggle-btn:not(:last-child){border-right:1px solid var(--border-color)}.toggle-btn:hover:not(:disabled){background:var(--bg-card)}.toggle-btn.active{background:var(--accent-blue);color:#fff}.toggle-btn:disabled{opacity:.5;cursor:not-allowed}.album-select{width:100%;padding:.6rem 2rem .6rem .75rem;font-size:.85rem;border-radius:8px}.color-picker-row{display:flex;align-items:center;gap:.75rem}.color-picker{width:48px;height:36px;padding:2px;border:1px solid var(--border-color);border-radius:8px;cursor:pointer}.color-picker::-webkit-color-swatch-wrapper{padding:2px}.color-picker::-webkit-color-swatch{border:none;border-radius:4px}.color-value{font-family:JetBrains Mono,monospace;font-size:.8rem;color:var(--text-secondary)}.story-error{padding:2rem;text-align:center;color:var(--text-secondary)}.story-error p{margin:.5rem 0}.story-download-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:1rem;font-family:Plus Jakarta Sans,sans-serif;font-size:.95rem;font-weight:600;color:#fff;background:var(--accent-gradient);border:none;border-radius:12px;cursor:pointer;text-decoration:none;transition:all .3s ease}.story-download-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed4d}@media (max-width: 900px) and (min-width: 651px){.form-grid{grid-template-columns:repeat(2,1fr)}.form-group-grid-size{grid-column:1 / -1}}@media (max-width: 650px){.container{padding:1.25rem}.brand-logo-text{width:280px;height:62px}.form-card{padding:1.5rem}.form-grid{grid-template-columns:1fr}.form-group-grid-size{grid-column:1}.form-group[style*="visibility: hidden"]{display:none}.results-header,.story-page-header{padding:1rem 0 1.5rem}.nav-buttons{flex-direction:column;align-items:flex-start;gap:.75rem}.brand-logo-small{width:160px;height:35px}.nav-button.back-button{font-size:.85rem;padding:.4rem .875rem}.nav-button.back-button svg{width:16px;height:16px}.result-header{flex-direction:column;align-items:flex-start;gap:.75rem}.album-list{padding:1.25rem;border-radius:16px}.album-list-header{flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:1rem}.album-list h3{font-size:1.1rem}.album-count-info{font-size:.7rem}.album-grid{max-height:400px}.album-item{grid-template-columns:32px 1fr;grid-template-rows:auto auto;gap:.5rem .75rem;padding:.75rem}.album-rank{font-size:.8rem;grid-row:1 / 3;align-self:center}.album-info{grid-column:2;grid-row:1;min-width:0}.album-item .album-name{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album-item .album-artist{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album-count{font-size:.7rem;padding:.2rem .4rem}.album-item .album-count{grid-column:2;grid-row:2;justify-self:start}.album-item .album-actions{grid-column:2;grid-row:2;justify-self:end}.album-actions{opacity:1}.album-action-btn{width:28px;height:28px}.story-banner{padding:.875rem 1.25rem}.story-banner-content svg{width:20px;height:20px}.story-banner-title{font-size:.9rem}.story-banner-subtitle{font-size:.75rem}.missing-images-banner{padding:.875rem 1.25rem}.missing-images-banner-content svg{width:20px;height:20px}.missing-images-banner-title{font-size:.9rem}.missing-images-banner-subtitle{font-size:.75rem}.story-modal{max-height:95vh;border-radius:16px}.story-modal-wide{max-width:100%}.story-modal-header,.story-content,.story-actions{padding:1rem 1.25rem}.story-content-horizontal{flex-direction:column;gap:1.5rem}.story-preview-container{width:100%;align-items:center}.story-preview{width:180px}.story-control-group{gap:.5rem}.control-value{text-align:left}.slider-btn,.slider-reset-btn{width:32px;height:32px}}