.app{--ink: #0B0B0E;--ink-2: #131319;--ink-3: #1A1A22;--line: #232229;--line-2: #33323c;--text: #F4F1EA;--text-2: #C8C5BD;--muted: #86848C;--amber: #E7B776;--amber-soft: rgba(231,183,118,.13);--danger: #ff5d6c;--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;--sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;--display: "Hanken Grotesk", system-ui, sans-serif;--r: 12px;--r-sm: 9px;height:100dvh;display:grid;grid-template-rows:auto 1fr auto auto;grid-template-columns:minmax(0,1fr);background:radial-gradient(1100px 480px at 82% -12%,rgba(231,183,118,.05),transparent 60%),radial-gradient(820px 440px at -5% 112%,rgba(231,183,118,.04),transparent 55%),var(--ink);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}.app :focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:5px}.app.dragging .dropzone{border-color:var(--amber);background:var(--ink-3);box-shadow:0 0 0 4px var(--amber-soft),inset 0 0 60px -20px #e7b7764d}.topbar{display:flex;align-items:center;gap:16px;padding:10px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#14171dd1,#0c0e12a8);backdrop-filter:blur(12px);font-size:12px}.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--text);text-decoration:none;flex:0 0 auto}.brand span{color:var(--muted)}.brand-logo{height:30px;width:auto;display:block}.ed-status{display:inline-flex;align-items:center;gap:9px;color:var(--muted);letter-spacing:.02em;padding-left:16px;border-left:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ed-status i{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 9px var(--amber);flex:0 0 auto;animation:safelight 3s ease-in-out infinite}@keyframes safelight{50%{opacity:.4}}.spacer{flex:1}.badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--amber);letter-spacing:.02em;background:var(--amber-soft);border:1px solid rgba(231,183,118,.3);padding:4px 11px;border-radius:999px;white-space:nowrap}.badge:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);animation:pulse 1.1s ease-in-out infinite}.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12px;color:var(--text);background:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 14px;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s,transform .06s}.btn:hover:not(:disabled){background:#20242d}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--text);color:var(--ink);border-color:transparent;font-weight:600}.btn.primary:hover:not(:disabled){background:#fff}.btn.ghost{background:transparent}.btn.ghost:hover:not(:disabled){background:#ffffff0a}.btn.sm{padding:7px 12px;font-size:11px}.btn svg{width:15px;height:15px;flex:0 0 auto}.stage{display:flex;align-items:center;justify-content:center;padding:26px;overflow:hidden;min-height:0}.dropzone{width:100%;max-width:540px;aspect-ratio:4 / 3;border:1.5px dashed var(--line-2);border-radius:18px;display:flex;align-items:center;justify-content:center;background:radial-gradient(440px 260px at 50% 38%,rgba(231,183,118,.05),transparent 70%),var(--ink-2);transition:border-color .2s,box-shadow .2s,background .2s}.dropzone:hover{border-color:#e7b77680}.dz-inner{text-align:center;padding:30px}.dz-icon{width:66px;height:66px;margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;color:var(--amber);background:var(--amber-soft);box-shadow:inset 0 0 0 1px #e7b77640,0 0 44px -8px #e7b77666}.dz-icon svg{width:30px;height:30px;animation:iris 16s linear infinite}@keyframes iris{to{transform:rotate(360deg)}}.dz-title{font-family:var(--serif);color:var(--text);font-size:26px;font-weight:600;letter-spacing:-.005em;line-height:1.25;margin:0;max-width:22ch}.dz-actions{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}.canvas{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}.canvas-toolbar{display:flex;align-items:center;gap:12px;width:100%;max-width:1120px}.cap{color:var(--muted);font-size:12px;margin-left:auto;max-width:64%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12px;color:var(--muted);background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px 12px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}.chip svg{width:14px;height:14px}.chip:hover{color:var(--text)}.chip.on{color:var(--amber);border-color:#e7b77680;background:var(--amber-soft)}.img-wrap{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;border-radius:16px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -42px #000000e6}.main-img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .25s;display:block}.gate{position:absolute;inset:12px;pointer-events:none;z-index:2}.gate i{position:absolute;width:15px;height:15px;border:1.5px solid rgba(243,242,238,.26)}.gate i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.gate i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}.gate i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.gate i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}.overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(120% 120% at 50% 50%,#08090c75,#08090cb8);backdrop-filter:blur(1.5px)}.overlay.developing{background:radial-gradient(130% 130% at 50% 50%,#2a1f0f66,#08090cbd)}.overlay.error{background:radial-gradient(130% 130% at 50% 0%,#3c12188c,#0a090ccc)}.ov-text{font-family:var(--sans);color:var(--text);font-size:12.5px;max-width:80%;text-align:center;line-height:1.6;letter-spacing:.02em}.ov-text.dev{display:inline-flex;align-items:center;gap:9px;color:var(--amber)}.dev-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);animation:pulse 1.1s ease-in-out infinite}.ov-icon{color:var(--danger)}.ov-icon svg{width:30px;height:30px}.develop-sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none}.develop-sweep:before{content:"";position:absolute;left:0;right:0;height:38%;background:linear-gradient(180deg,transparent,rgba(231,183,118,.16) 46%,rgba(231,183,118,.24) 50%,rgba(231,183,118,.16) 54%,transparent);filter:blur(2px);animation:develop 2s ease-in-out infinite}@keyframes develop{0%{transform:translateY(-130%)}to{transform:translateY(330%)}}.compare{position:relative;width:100%;height:100%}.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.after-clip{position:absolute;inset:0;overflow:hidden;width:var(--split)}.after-clip img{width:100vw;max-width:none}.compare .handle{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);transform:translate(-1px);pointer-events:none;box-shadow:0 0 12px #e7b776b3}.compare .handle:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:var(--amber);box-shadow:0 0 16px #e7b7768c}.compare .handle:after{content:"‹›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;color:var(--ink);font-family:var(--sans)}.compare .slider{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.compare .tag{position:absolute;bottom:12px;font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#0000008c;backdrop-filter:blur(4px);padding:3px 9px;border-radius:6px}.compare .tag.left{left:12px}.compare .tag.right{right:12px}.timeline{display:flex;align-items:flex-start;gap:0;padding:16px 22px;overflow-x:auto;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--ink-2),var(--ink));scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}.timeline::-webkit-scrollbar{height:8px}.timeline::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}.tl-link{width:22px;height:2px;flex:0 0 auto;margin-top:35px;border-radius:2px;opacity:.85}.tl-item{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;width:92px;padding:0;background:transparent;border:none;cursor:pointer;color:var(--muted)}.tl-thumb{position:relative;width:92px;height:69px;border-radius:10px;overflow:hidden;border:1.5px solid var(--line-2);background:var(--ink-3);transition:border-color .2s,box-shadow .2s,transform .12s}.tl-item:hover .tl-thumb{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 55%,var(--line-2))}.tl-item.active .tl-thumb{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 24%,transparent),0 8px 22px -8px color-mix(in srgb,var(--c) 55%,transparent)}.tl-item.error .tl-thumb{border-color:var(--danger)}.tl-thumb img{width:100%;height:100%;object-fit:cover;display:block}.tl-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted)}.tl-ph.err{color:var(--danger)}.tl-ph svg{width:17px;height:17px}.tl-dots{display:inline-flex;gap:3px}.tl-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:pulse 1s ease-in-out infinite}.tl-dots i:nth-child(2){animation-delay:.15s}.tl-dots i:nth-child(3){animation-delay:.3s}.tl-num{position:absolute;top:5px;left:5px;font-family:var(--sans);font-size:10px;font-weight:700;color:#0b0b0f;background:var(--c);border-radius:5px;padding:1px 6px;box-shadow:0 1px 4px #00000073}.tl-label{font-family:var(--sans);font-size:10.5px;line-height:1.4;max-width:92px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tl-item.active .tl-label{color:var(--text)}@keyframes pulse{50%{opacity:.35}}.composer{display:flex;align-items:flex-end;gap:12px;padding:16px 22px;border-top:1px solid var(--line);background:var(--ink-2)}.prompt-field{flex:1;display:flex;align-items:flex-start;gap:10px;background:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);padding:0 14px;transition:border-color .2s,box-shadow .2s}.prompt-chevron{color:var(--amber);font-family:var(--sans);font-size:15px;line-height:1;flex:0 0 auto;padding-top:14px}.prompt{flex:1;resize:none;min-height:46px;max-height:140px;background:transparent;border:none;color:var(--text);padding:13px 0;font-family:var(--sans);font-size:13px;line-height:1.5;outline:none}.prompt::placeholder{color:var(--muted)}.prompt:disabled{opacity:.55}.prompt:focus,.prompt:focus-visible{outline:none}.ref-slot{flex:0 0 auto}.ref-add{width:46px;height:46px;display:grid;place-items:center;background:var(--ink);border:1px dashed var(--line-2);border-radius:var(--r);color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s,background .2s}.ref-add:hover{color:var(--amber);border-color:#e7b77699;background:var(--amber-soft)}.ref-add svg{width:18px;height:18px}.ref-thumb{position:relative;width:46px;height:46px;border-radius:var(--r);overflow:hidden;border:1px solid rgba(231,183,118,.5)}.ref-thumb img{width:100%;height:100%;object-fit:cover;display:block}.ref-x{position:absolute;top:2px;right:2px;width:17px;height:17px;display:grid;place-items:center;padding:0;cursor:pointer;background:#0a0b0db8;border:none;border-radius:50%;color:#fff}.ref-x:hover{background:#0a0b0de6}.ref-x svg{width:11px;height:11px}@media(max-width:640px){.topbar{padding:9px 14px;gap:10px}.brand-logo{height:26px}.ed-status{display:none}.stage{padding:14px}.canvas{gap:10px}.composer{padding:11px 13px;gap:8px}.composer .btn.primary{white-space:nowrap}.prompt{font-size:16px;min-height:62px;padding:10px 0}.prompt-chevron{padding-top:11px}.timeline{padding:13px 14px}.tl-item,.tl-thumb,.tl-label{width:84px}.tl-thumb{height:63px}.tl-link{margin-top:32px}.dz-actions{flex-wrap:wrap}.gate{inset:9px}}@media(prefers-reduced-motion:reduce){.ed-status i,.badge:before,.dz-icon svg,.dev-dot,.tl-dots i{animation:none}.develop-sweep:before{display:none}.tl-item:hover .tl-thumb{transform:none}.btn:active:not(:disabled){transform:none}}