*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0}:root{--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;--color-primary: #4338ca;--color-primary-hover: #3730a3;--color-primary-light: #818cf8;--color-accent: #6d28d9;--color-bg: #fbfbfd;--color-surface: #ffffff;--color-surface-solid: #ffffff;--color-border: #e4e4e7;--color-border-subtle: #f0f0f3;--color-text: #09090b;--color-text-secondary: #52525b;--color-text-muted: #a1a1aa;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 1px 3px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.03);--radius: 6px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--transition-fast: .12s ease;--transition-normal: .2s ease;--transition-slow: .35s ease}.app-shell{min-height:100vh;background:var(--color-bg);font-family:var(--font);color:var(--color-text);display:flex;flex-direction:column}.app-container{flex:1;width:100%;max-width:680px;margin:0 auto;padding:40px 16px 32px}@media(min-width:480px){.app-container{padding:48px 24px 40px}}.page-title{font-size:clamp(28px,6vw,40px);font-weight:800;letter-spacing:-.04em;margin:0 0 14px;line-height:1.15}.page-subtitle{color:var(--color-text-secondary);font-size:clamp(14px,3vw,17px);margin:0;line-height:1.7;font-weight:400}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-md);transition:border-color var(--transition-normal);position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(315deg,#bf37be,#1e16a9 65%);border-radius:var(--radius) var(--radius) 0 0}.card:focus-within{border-color:var(--color-primary-light)}@keyframes slide-up-fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:slide-up-fade .3s ease forwards}.animate-in-delay-1{animation-delay:.06s;opacity:0}.animate-in-delay-2{animation-delay:.12s;opacity:0}.animate-in-delay-3{animation-delay:.18s;opacity:0}.animate-in-delay-4{animation-delay:.24s;opacity:0}.stat-value{font-size:32px;font-weight:800;line-height:1;color:var(--color-primary)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.toolbar{padding:12px 16px;border-top:1px solid var(--color-border-subtle);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.toolbar-left{display:flex;gap:4px;flex-wrap:wrap}.btn-generate{white-space:nowrap;min-height:48px;padding:12px 28px;border-radius:6px;border:none;font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:-.01em;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);cursor:pointer}.btn-generate:not(:disabled):hover{transform:translateY(-1px)}.btn-generate:disabled{cursor:pointer}.btn-toggle{display:flex;align-items:center;gap:5px;min-height:36px;padding:6px 12px;border-radius:var(--radius);font-size:12px;cursor:pointer;font-family:var(--font);transition:all var(--transition-fast)}.btn-toggle:not(:disabled):hover{background:#6d28d914!important;border-color:var(--color-primary)!important;color:var(--color-primary)!important;filter:none}.result-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;flex-wrap:wrap}.color-swatches{display:flex;flex-wrap:wrap;gap:8px}.btn-download{width:100%;min-height:52px;padding:14px;border-radius:var(--radius);border:none;cursor:pointer;font-family:var(--font);font-size:15px;font-weight:700;background:var(--color-primary);color:#fff;transition:background var(--transition-fast),transform var(--transition-fast)}.btn-download:hover{background:var(--color-primary-hover);transform:translateY(-1px)}.btn-new-folio{font-size:13px;min-height:44px;padding:8px 16px;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;font-family:var(--font);font-weight:500;white-space:nowrap;transition:all var(--transition-fast)}.btn-new-folio:hover{background:var(--color-bg);border-color:#d1d1d6;color:var(--color-text);transform:translateY(-1px)}.example-chips{padding:0 16px 16px;display:flex;flex-wrap:wrap;gap:6px}.btn-example{font-size:12px;padding:6px 14px;border-radius:99px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;font-family:var(--font);font-weight:500;transition:all var(--transition-fast)}.btn-example:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:translateY(-1px)}.rich-editor{outline:none}.rich-editor:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none}.rich-editor h1,.rich-editor h2,.rich-editor h3,.rich-editor h4,.rich-editor h5,.rich-editor h6{margin:.5em 0 .2em;font-weight:700;line-height:1.3}.rich-editor h1{font-size:1.25em}.rich-editor h2{font-size:1.1em}.rich-editor h3,.rich-editor h4,.rich-editor h5,.rich-editor h6{font-size:1em}.rich-editor p{margin:.35em 0}.rich-editor p:first-child,.rich-editor h1:first-child,.rich-editor h2:first-child,.rich-editor h3:first-child{margin-top:0}.rich-editor p:last-child{margin-bottom:0}.rich-editor ul,.rich-editor ol{margin:.35em 0;padding-left:1.4em}.rich-editor li{margin:.1em 0}.rich-editor a{color:var(--color-primary);text-decoration:underline}.rich-editor strong,.rich-editor b{font-weight:700}.rich-editor em,.rich-editor i{font-style:italic}.rich-editor u{text-decoration:underline}.progress-track{height:5px;background:var(--color-border-subtle);border-radius:99px;overflow:hidden;position:relative}.progress-fill{height:100%;border-radius:99px;background:linear-gradient(315deg,#bf37be,#1e16a9 65%);transition:width var(--transition-slow)}.progress-fill-indeterminate{height:100%;width:100%;border-radius:99px;background:linear-gradient(315deg,#bf37be,#1e16a9 65%);opacity:.2;position:relative}.log-viewer{margin-top:14px;max-height:160px;overflow-y:auto;padding:12px;background:var(--color-bg);border-radius:var(--radius);border:1px solid var(--color-border-subtle)}.log-viewer::-webkit-scrollbar{width:4px}.log-viewer::-webkit-scrollbar-track{background:transparent}.log-viewer::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:99px}.log-viewer::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}@keyframes progress-shimmer{0%{transform:translate(-100%)}to{transform:translate(400%)}}.progress-shimmer{position:absolute;top:0;left:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:progress-shimmer 1.4s ease-in-out infinite}@keyframes dot-pulse{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.dot-pulse span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--color-primary);margin:0 2px;animation:dot-pulse 1.4s ease-in-out infinite}.dot-pulse span:nth-child(2){animation-delay:.2s}.dot-pulse span:nth-child(3){animation-delay:.4s}@keyframes gen-log-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.gen-log-entry{animation:gen-log-fade-in .4s cubic-bezier(.22,1,.36,1)}@keyframes phase-header-in{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}.phase-header-enter{animation:phase-header-in .35s cubic-bezier(.22,1,.36,1)}@keyframes brand-card-in{0%{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.brand-card-enter{animation:brand-card-in .5s cubic-bezier(.22,1,.36,1)}@keyframes timeline-node-pulse{0%,to{box-shadow:0 0 0 4px var(--pulse-color, rgba(124,58,237,.18)),0 0 12px var(--pulse-glow, rgba(124,58,237,.08))}50%{box-shadow:0 0 0 8px var(--pulse-color, rgba(124,58,237,.1)),0 0 20px var(--pulse-glow, rgba(124,58,237,.12))}}.timeline-node-active{animation:timeline-node-pulse 2.4s cubic-bezier(.4,0,.6,1) infinite}@keyframes timeline-node-in{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}.timeline-node-enter{animation:timeline-node-in .45s cubic-bezier(.22,1,.36,1) forwards}@keyframes timeline-check-pop{0%{transform:scale(.4);opacity:0}50%{transform:scale(1.2);opacity:1}70%{transform:scale(.95)}to{transform:scale(1);opacity:1}}.timeline-check-pop{animation:timeline-check-pop .5s cubic-bezier(.22,1,.36,1) forwards}@keyframes timeline-content-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.timeline-content-enter{animation:timeline-content-in .4s cubic-bezier(.22,1,.36,1) forwards}@keyframes timeline-line-grow{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.timeline-line-segment{animation:timeline-line-grow .6s cubic-bezier(.22,1,.36,1) forwards;transform-origin:top}@keyframes timeline-spin{to{transform:rotate(360deg)}}.timeline-spinner{animation:timeline-spin .8s linear infinite}@keyframes gen-log-stagger-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.gen-log-stagger{animation:gen-log-stagger-in .35s cubic-bezier(.22,1,.36,1) both}.prompt-editor:empty:before{content:attr(data-placeholder);color:var(--color-text-muted);pointer-events:none}.prompt-editor h1,.prompt-editor h2,.prompt-editor h3,.prompt-editor h4,.prompt-editor h5,.prompt-editor h6{margin:.4em 0 .2em;font-size:inherit;font-weight:700}.prompt-editor p{margin:.2em 0}.prompt-editor ul,.prompt-editor ol{margin:.2em 0;padding-left:1.4em}.prompt-editor li{margin:.1em 0}@keyframes phase-transition-in{0%{opacity:0;transform:translateY(16px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}.phase-enter{animation:phase-transition-in .45s cubic-bezier(.22,1,.36,1) forwards}@keyframes panel-slide{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.panel-enter{animation:panel-slide .2s ease forwards}:focus-visible{outline:2px solid var(--color-primary-light);outline-offset:2px}