:root{font-family:Inter,"Microsoft YaHei","PingFang SC",sans-serif;color:#263128;background:#f6f6f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,textarea,select{touch-action:manipulation}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #80a76b;outline-offset:3px}header{height:68px;padding:0 max(24px,calc((100vw - 1210px)/2));display:flex;justify-content:space-between;align-items:center;background:#fbfcf8;border-bottom:1px solid #e0e5d8;gap:16px}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}.brand b{font-size:18px}.brand>span:last-child{color:#596755;font-size:13px}.mark{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#294935;color:white;font-weight:800}.divider{height:18px;border-left:1px solid #dbe1d7}.badge{font-size:12px;color:#3c5d44;background:#ebf0e5;border-radius:50px;padding:8px 13px;white-space:nowrap}.badge i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6c995d;margin-right:4px}main{max-width:1258px;margin:auto;padding:0 24px 48px}.intro{padding:38px 0 28px}.eyebrow{color:#526c4d;font-size:11px;letter-spacing:.18em;font-weight:800}.intro h1{font-size:clamp(30px,4vw,49px);letter-spacing:-.04em;margin:8px 0 10px}.intro h1 span{color:#53704d}.intro p,.section-title p,.note p{color:#626d60;margin:0;line-height:1.6;font-size:13px}.workspace{display:grid;grid-template-columns:minmax(0,1.68fr) minmax(0,1fr);gap:22px;align-items:start}.steps{display:grid;gap:18px}section,aside{background:#fff;border:1px solid #e0e5da;border-radius:19px;padding:21px}aside{position:sticky;top:16px}.section-title{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}.section-title>span{background:#eaf0e4;color:#426047;border-radius:8px;padding:6px 8px;font:700 12px monospace}.section-title h2{font-size:19px;margin:1px 0 3px}.uploads,.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.upload{min-height:108px;display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center;border:1px dashed #b9c9b4;border-radius:12px;background:#f8faf6;position:relative;cursor:pointer;overflow:hidden;text-align:center;padding:10px}.upload:focus-within{outline:2px solid #5c7c57}.upload input{position:absolute;opacity:0;width:100%;height:100%;inset:0;cursor:pointer}.upload img{width:64px;height:48px;object-fit:cover;border-radius:6px}.upload strong,.field,.options label{font-size:13px;font-weight:700}.upload small,.scene small,.field small{color:#63705f;font-size:11px;overflow-wrap:anywhere}.plus{font-size:19px;color:#50724e}.remove{border:0;background:none;text-decoration:underline;color:#466248;margin-top:5px;font-size:12px}.tabs{display:flex;gap:7px;margin-bottom:12px}.tabs button{background:#f5f7f2;color:#4e604c;border:1px solid #e4e9df;border-radius:50px;padding:6px 13px;font-size:12px}.tabs button[aria-pressed=true]{background:#294935;color:#fff;border-color:#294935}.scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.scene{position:relative;background:#fff;border:1px solid #dce4d9;border-radius:12px;padding:0;text-align:left;overflow:hidden;color:inherit}.scene:hover{border-color:#86a283}.scene[aria-pressed=true]{border-color:#426a47;box-shadow:0 0 0 1px #426a47;background:#f3f7ef}.scene img{width:100%;height:91px;object-fit:cover;display:block;background:#e4eadc}.scene-copy{padding:8px 9px;display:grid;gap:3px}.scene strong{font-size:12px}.tick{position:absolute;right:7px;top:7px;background:#294935;color:white;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;font-size:12px}.field{display:block;margin:12px 0}.field textarea,.options select{display:block;width:100%;margin-top:6px;border:1px solid #d9e2d5;border-radius:9px;background:#f9faf7;color:#29372b;padding:9px 10px;font-size:13px;line-height:1.6}.field textarea{resize:vertical}.primary{display:block;width:100%;margin-top:14px;padding:11px;border:0;border-radius:10px;background:#294935;color:white;font-weight:700;text-align:center;text-decoration:none}.primary:disabled{opacity:.54;cursor:default}.preview{position:relative;border-radius:12px;overflow:hidden;background:#e5ebdf}.preview img{display:block;width:100%;max-height:540px;object-fit:contain}.preview-stage+.tabs{margin-top:18px}.note{background:#f2f5ec;border-radius:11px;padding:12px;margin-top:13px;font-size:13px}.note p{margin-top:4px}.check{display:flex;align-items:center;gap:5px;font-size:13px}.error,[role=alert]{color:#9d3a28;font-size:13px}
@media(max-width:850px){.workspace{grid-template-columns:1fr}aside{position:static}.preview img{max-height:520px}}@media(max-width:480px){header{height:55px;padding:0 14px}.brand>span:last-child,.divider,.badge{display:none}main{padding:0 13px 24px}.intro{padding:26px 0 21px}section,aside{padding:15px}.scenes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.privacy{color:#626d60;font-size:12px;margin:13px 0 0}

/* Cool slate surfaces, offset step panels, and a floating preview. */
:root {
  --ink: #0f172a;
  --accent: #4f46e5;
  --edge: #e2e8f0;
  --lift: 0 2px 4px #0f172a0a, 0 12px 30px -18px #33415560;
  color: var(--ink);
  background: #f1f5f9;
}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible {
  outline-color: #818cf8;
}
header {
  position: sticky; top: 0; z-index: 3;
  background: #ffffffe8; border-color: var(--edge); backdrop-filter: blur(16px);
}
.mark { background: linear-gradient(135deg,#2563eb,#7c3aed); box-shadow: 0 5px 11px #4338ca45; }
.brand>span:last-child { color: #475569; }
.divider { border-color: var(--edge); }
.badge { color: #3730a3; background: #e0e7ff; }
.badge i { background: #6366f1; }
.intro {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  gap: 34px; padding: 44px 18px 42px 0;
}
.eyebrow { display: inline-block; color: #4338ca; letter-spacing: .18em; }
.intro h1 { font-size: clamp(32px,4.2vw,55px); line-height: 1.12; color: var(--ink); }
.intro h1 span { color: var(--accent); }
.intro p { color: #475569; }
.intro-stack { position: relative; isolation: isolate; }
.intro-stack::before, .intro-stack::after {
  content: ""; position: absolute; inset: 0; border-radius: 23px; z-index: -2;
  background: linear-gradient(135deg,#6366f1,#9333ea);
  transform: translate(11px,10px) rotate(4deg); opacity: .22;
}
.intro-stack::after { transform: translate(6px,5px) rotate(2deg); opacity: .38; z-index: -1; }
.intro-card {
  position: relative; display: grid; grid-template-columns: 1fr minmax(110px,36%);
  gap: 12px; align-items: center; padding: 19px 22px; color: white;
  background: linear-gradient(135deg,#1d4ed8,#6d28d9);
  border-radius: 22px; box-shadow: 0 16px 32px -13px #312e818c;
}
.intro-tag { font-size: 11px; color: #e0e7ff; }
.intro-card strong { display: block; margin: 6px 0 13px; font-size: clamp(16px,2vw,23px); }
.intro-card a {
  display: inline-block; padding: 7px 11px; border-radius: 8px; background: #fff;
  color: #3730a3; text-decoration: none; font-weight: 700; font-size: 12px;
}
.intro-card a:hover { background: #eef2ff; }
.intro-card img {
  display: block; width: 100%; height: 113px; object-fit: cover;
  border-radius: 12px; border: 1px solid #ffffff90; box-shadow: 0 7px 18px #24146165;
}
.workspace { gap: 28px; }
.steps { gap: 22px; min-width: 0; }
#references { scroll-margin-top: 85px; }
.steps > section {
  background: #fff; border-color: var(--edge);
  box-shadow: 5px 5px 0 var(--layer-color), var(--lift);
}
.steps > section:nth-child(1) { --layer-color:#ec4899; --step-fill:#fce7f3; --step-ink:#9d174d; }
.steps > section:nth-child(2) { --layer-color:#f59e0b; --step-fill:#fef3c7; --step-ink:#92400e; }
.steps > section:nth-child(3) { --layer-color:#14b8a6; --step-fill:#ccfbf1; --step-ink:#115e59; }
.section-title > span { background: var(--step-fill); color: var(--step-ink); }
.section-title p,.privacy,.upload small,.scene small,.field small { color: #475569; }
.upload { background: #f8fafc; border-color: #b9c5db; box-shadow: inset 0 2px 6px #0f172a07; }
.upload:hover { border-color: #6366f1; background: #eef2ff; }
.upload:focus-within { outline-color: #6366f1; }
.plus,.remove { color: #4338ca; }
.scene { transition: transform .18s ease, box-shadow .18s ease; border-color: var(--edge); }
.scene img { height: 104px; }
.scene:hover, .scene[aria-pressed=true] { transform: translateY(-2px); border-color: #6366f1; box-shadow: 2px 4px 0 #a5b4fc; }
.scene[aria-pressed=true] { background: #eef2ff; }
.tick,.tabs button[aria-pressed=true] { background: #4338ca; border-color: #4338ca; }
.tabs button { background: #f1f5f9; color: #334155; border-color: var(--edge); }
.field textarea,.options select { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.primary {
  background: linear-gradient(110deg,#1d4ed8,#6d28d9);
  box-shadow: inset 0 1px #ffffff45, 0 5px 12px #4338ca45;
}
.primary:not(:disabled):hover { background: linear-gradient(110deg,#1e40af,#5b21b6); }
aside {
  isolation: isolate; color: #fff; border-color: #334155;
  background: radial-gradient(ellipse at 95% 20%,#373078 0%,transparent 57%),
    linear-gradient(150deg,#0f172a,#1e293b);
  box-shadow: 0 18px 35px -14px #0f172a8c;
  --step-fill: #e0e7ff; --step-ink: #3730a3;
}
aside .section-title p, aside .note p { color: #cbd5e1; }
aside .note { background: #ffffff14; }
aside .check { color: #f1f5f9; }
.generate { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; }
.generate:disabled:has(.button-spinner) { opacity: 1; }
.button-spinner {
  display: inline-block; width: 15px; height: 15px; border: 2px solid #ffffff50;
  border-top-color: white; border-radius: 50%; animation: studio-spin .8s linear infinite;
}
.preview-stage { position: relative; isolation: isolate; margin: 2px 4px 15px; }
.preview-stage::before, .preview-stage::after {
  position: absolute; content: ""; border-radius: 14px; inset: 5px -4px -5px 5px;
  background: #6366f1; border: 1px solid #818cf8; transform: rotate(1.4deg); z-index: -2;
}
.preview-stage::after { inset: 6px 2px -5px -5px; transform: rotate(-1.2deg); background: #a78bfa; z-index: -1; }
.preview { padding: 6px; border-radius: 14px; background: #f8fafc; box-shadow: 0 6px 15px -9px #263c28aa; }
.preview-image {
  display: block; position: relative; width: 100%; border: 0; border-radius: 9px;
  overflow: hidden; padding: 0; background: #0f172a; cursor: zoom-in;
}
.preview-image:disabled { cursor: wait; }
.preview-image img { display: block; width: 100%; height: auto; max-height: 510px; object-fit: contain; }
.preview-label, .preview-enlarge {
  position: absolute; padding: 6px 10px; border-radius: 8px; font-size: 12px;
  color: #fff; background: #0f172aea; box-shadow: 0 2px 8px #0003;
}
.preview-label { left: 14px; top: 14px; pointer-events: none; }
.preview-enlarge { right: 10px; bottom: 10px; }
.generation-wait {
  position: absolute; inset: 6px; display: grid; place-items: center;
  border-radius: 9px; background: #0f172ad1; z-index: 1; padding: 12px;
}
.wait-card { color: var(--ink);
  display: grid; justify-items: center; gap: 8px; text-align: center; min-width: min(100%, 204px);
  border: 1px solid #ffffff5c; padding: 19px 13px; border-radius: 16px;
  background: #f8fafc; box-shadow: 0 12px 36px #0a1e1780;
}
.wait-card p { margin: 0; color: #475569; font-size: 12px; }
.wait-orbit {
  display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%;
  color: var(--accent); border: 2px solid #e0e7ff; border-top-color: #6366f1;
  animation: studio-spin 1.35s linear infinite;
}
.elapsed { color: #4338ca; font: 600 12px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
@keyframes studio-spin { to { transform: rotate(360deg); } }

.image-viewer {
  padding: 0; border: 1px solid #6366f1; border-radius: 18px;
  width: min(960px, calc(100% - 24px)); max-width: none; max-height: calc(100% - 24px);
  background: #111827; color: #f5f8f1; box-shadow: 0 32px 90px #0e1c15b3;
  overflow: hidden;
}
.image-viewer::backdrop { background: #0f172ade; }
body:has(.image-viewer[open]) { overflow: hidden; }
.viewer-shell { padding: 9px; }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 0 9px 5px; }
.viewer-bar strong { font-size: 13px; }
.viewer-actions { display: flex; gap: 4px; flex-shrink: 0; }
.viewer-actions button {
  border: 1px solid #64748b; background: #1e293b; color: #fff;
  border-radius: 7px; min-width: 35px; height: 34px; padding: 0 5px;
}
.viewer-actions button:disabled { opacity: .45; cursor: default; }
.viewer-viewport { max-height: calc(100dvh - 88px); overflow: auto; border-radius: 9px; background: #0f172a; }
.viewer-viewport img {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: calc(100dvh - 88px); margin: 0 auto; object-fit: contain;
}
@media (max-width: 850px) { .workspace { gap: 22px; } .intro { grid-template-columns: 1fr; gap: 15px; padding: 24px 14px 28px 0; } .intro-stack { width: min(100%,530px); } }
@media (max-width: 480px) {
  .intro { padding-block: 25px 27px; } .intro-card { padding: 12px 15px; } .intro-card img { height: 83px; }
  .scene img { height: 86px; }
  .preview-image img { max-height: 430px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene { transition: none; }
  .wait-orbit, .button-spinner { animation: none; }
}