/* Isolated motion styles. Does not alter navigation, forms, task actions, or results. */
#splash.wb-intro{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:#10161c;animation:none;transition:none;opacity:1;visibility:visible;overflow:hidden}
.wb-intro-frame{width:min(100vw,1280px)}
.wb-intro-skip{position:absolute;right:28px;top:28px;border:1px solid #b7f8d144;border-radius:8px;padding:10px 18px;color:#c7e2d6;background:#162327;cursor:pointer;font-size:13px}
.wb-intro-skip:focus-visible{outline:2px solid #b7f8d1;outline-offset:4px}
.wb-motion{border-radius:12px;overflow:hidden;background:#111a21;pointer-events:none;flex-shrink:0;isolation:isolate}
.wb-motion-card{width:min(100%,240px);margin:4px auto 16px}
.wb-motion-small{width:112px;max-width:100%;margin:8px auto 12px}
.qh-batch-row>.wb-motion-small{float:right;margin:0 0 10px 14px;width:92px}
.qh-batch-row::after{content:'';display:block;clear:both}
.status-area.wb-has-motion>.spinner,.img-batch-slot.wb-has-motion>.spinner{display:none}
.wb-has-motion .task-progress.wb-indeterminate i{width:0!important}
.wb-has-motion .task-progress.wb-indeterminate span{font-size:12px}
@media(max-width:600px){.wb-motion-card{width:180px}.wb-motion-small{width:84px}.wb-intro-skip{top:16px;right:16px}.qh-batch-row>.wb-motion-small{width:72px}}



/* Compact status surface: task polling, cancellation and results remain owned by app.js. */
#splash.wb-intro{background:#0c0d12!important;animation:none!important;transition:none!important}
#splash.wb-intro-pending{pointer-events:none;animation:wb-boot-release .01s 6s forwards!important}
.wb-boot-note{font:13px "Microsoft YaHei",sans-serif;color:#a59b86;letter-spacing:2px}
@keyframes wb-boot-release{to{visibility:hidden;opacity:0}}
.wb-intro-skip{color:#e8c97a;background:#1d1a14;border-color:#e8c97a33}
.wb-intro-skip:focus-visible{outline-color:#e8c97a}
.wb-motion{background:#111218}
.result-box:has(>.status-area.wb-has-motion){min-height:0!important;height:auto!important;align-self:start;padding:24px!important;background:linear-gradient(120deg,#1b1914,#111218 70%)!important;border:1px solid #e8c97a25!important;border-radius:16px!important;justify-content:flex-start!important}
.result-box>.status-area.wb-has-motion{display:grid!important;grid-template-columns:92px minmax(0,1fr) auto;gap:12px 18px!important;align-items:center!important;text-align:left!important;color:#c6bfae!important}
.result-box>.status-area.wb-has-motion>.wb-motion{grid-column:1;grid-row:1 / span 2;width:92px;margin:0!important;border:1px solid #e8c97a16;border-radius:12px}
.result-box>.status-area.wb-has-motion>.status-text,.result-box>.status-area.wb-has-motion>.status-error{grid-column:2;grid-row:1;margin:0!important;text-align:left!important;font-size:14px!important;line-height:1.7;overflow-wrap:anywhere;color:#e4dece!important}
.result-box>.status-area.wb-has-motion>.run-local-stop{grid-column:3;grid-row:1 / span 2;margin:0!important;min-height:34px;padding:6px 12px!important;font-size:12px!important;font-weight:500!important;background:transparent!important;border:1px solid #e5a19138!important;box-shadow:none!important;color:#d8afa1!important;white-space:nowrap;border-radius:8px!important;transform:none!important}
.result-box>.status-area.wb-has-motion>.run-local-stop:hover{background:#e5a19112!important;border-color:#e5a19188!important}
.result-box>.status-area.wb-has-motion>.task-progress{grid-column:2;grid-row:2;width:100%;max-width:none;gap:10px;min-width:0;margin:0!important}
.result-box>.status-area.wb-has-motion>.task-progress i{width:auto!important;flex:1;height:4px;background:#e8c97a17!important;box-shadow:none!important}
.result-box>.status-area.wb-has-motion>.task-progress i::after{width:var(--wb-progress,0%)!important;background:#e8c97a!important;box-shadow:none!important}
.result-box>.status-area.wb-has-motion>.task-progress span{font-size:11px!important;font-weight:400!important;color:#a89e89!important;min-width:0;text-align:left}
.result-box>.status-area.wb-has-motion>.task-progress.wb-indeterminate i{display:none}
/* Error/success status without a running action retains full readable text. */
.result-box>.status-area.wb-has-motion:not(:has(>.run-local-stop))>.status-text,.result-box>.status-area.wb-has-motion:not(:has(>.run-local-stop))>.status-error{grid-column:2 / -1}
@media(max-width:760px){.result-box:has(>.status-area.wb-has-motion){padding:18px!important}.result-box>.status-area.wb-has-motion{grid-template-columns:64px minmax(0,1fr);gap:10px 12px!important}.result-box>.status-area.wb-has-motion>.wb-motion{width:64px}.result-box>.status-area.wb-has-motion>.run-local-stop{grid-column:2;grid-row:3;justify-self:start}.result-box>.status-area.wb-has-motion>.status-text{font-size:13px!important}}
@media(prefers-reduced-motion:reduce){.task-progress i::after{transition:none!important}}
/* The result column can be narrow even on a wide desktop. Respond to its width, not only the window. */
.result-box:has(>.status-area.wb-has-motion){container-type:inline-size;container-name:wb-task}
@container wb-task (max-width:540px){
.result-box>.status-area.wb-has-motion{grid-template-columns:64px minmax(0,1fr);gap:8px 12px!important}
.result-box>.status-area.wb-has-motion>.wb-motion{width:64px}
.result-box>.status-area.wb-has-motion>.run-local-stop{grid-column:2;grid-row:3;justify-self:start;margin-top:4px!important}
}
.result-box:has(>.status-area.wb-has-motion){width:100%!important;max-width:100%;box-sizing:border-box}

/* Remotion brand opening · 2026-09-24 */
#splash.wb-intro{background:#08080A!important}
.wb-intro-frame{width:100vw!important;height:100vh!important;max-width:none!important;position:relative;overflow:hidden}
.wb-intro-video{width:100%;height:100%;display:block;object-fit:cover;background:#08080A}
.wb-intro-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 52%,rgba(0,0,0,.3) 100%)}
.wb-intro-skip{z-index:3!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(prefers-reduced-motion:reduce){.wb-intro-video{display:none}}
/* 2026-09-28 · restrained black/gold generation states. Animation is never a timer. */
.wb-gold-motion.wb-motion{width:86px;max-width:100%;height:86px;margin:0 auto 12px;border:1px solid rgba(215,182,109,.2);border-radius:18px;background:radial-gradient(ellipse at 50% 30%,#383021 0%,#181713 62%,#11110f 100%);box-shadow:inset 0 1px 0 #fff1;display:grid;place-items:center;position:relative}
.wb-gold-motion.wb-motion-small{width:60px;height:60px;border-radius:14px}
.wb-gold-emblem{width:54px;height:54px;position:relative}.wb-motion-small .wb-gold-emblem{width:40px;height:40px}
.wb-gold-emblem svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.4;overflow:visible}
.wb-gold-outline{stroke:#bfa369;stroke-dasharray:6 3;opacity:.72}.wb-gold-core{fill:#e0c489;stroke:#f1d89d}.wb-gold-check,.wb-gold-cross{display:none;stroke:#e7ce94;stroke-width:3}
.wb-gold-rail{position:absolute;bottom:8px;left:20%;right:20%;height:2px;overflow:hidden;background:#bfa36922;border-radius:4px}
.wb-gold-rail i{display:block;width:35%;height:100%;background:linear-gradient(90deg,transparent,#e8cf97,transparent);transform:translateX(-100%)}
.wb-gold-motion[data-motion-phase="running"] .wb-gold-rail i,.wb-gold-motion[data-motion-phase="uploading"] .wb-gold-rail i{animation:wb-gold-pass 2.8s ease-in-out infinite}
.wb-gold-motion[data-motion-phase="running"] .wb-gold-core{animation:wb-gold-breathe 3s ease-in-out infinite}
.wb-gold-motion[data-motion-phase="queued"] .wb-gold-core{opacity:.5}
.wb-gold-motion[data-motion-phase="unknown"]{opacity:.6}.wb-gold-motion[data-motion-phase="unknown"] .wb-gold-outline{stroke-dasharray:2 5}
.wb-gold-motion[data-motion-phase="success"] .wb-gold-core,.wb-gold-motion[data-motion-phase="failed"] .wb-gold-core{display:none}
.wb-gold-motion[data-motion-phase="success"] .wb-gold-check,.wb-gold-motion[data-motion-phase="failed"] .wb-gold-cross{display:block}
.wb-gold-motion[data-motion-phase="failed"] .wb-gold-cross{stroke:#dfad9d}.wb-gold-motion[data-motion-phase="success"] .wb-gold-outline{stroke-dasharray:none}
.wb-gold-motion[data-paused="true"] *{animation:none!important}
@keyframes wb-gold-pass{0%{transform:translateX(-110%);opacity:.3}50%{opacity:1}100%{transform:translateX(400%);opacity:.3}}
@keyframes wb-gold-breathe{0%,100%{opacity:.65}50%{opacity:1}}
.result-box>.status-area.wb-has-motion{grid-template-columns:72px minmax(0,1fr)!important;gap:10px 16px!important;align-items:start!important;padding:22px!important;text-align:left!important}
.result-box>.status-area.wb-has-motion>.wb-motion{grid-column:1;grid-row:1/5;width:68px;height:68px;margin:0!important}
.result-box>.status-area.wb-has-motion>.status-text{grid-column:2;grid-row:1;margin:0!important;font-size:15px!important;line-height:1.6!important;color:#ead3a4!important;overflow-wrap:anywhere}
.result-box>.status-area.wb-has-motion>.task-progress{grid-column:2;grid-row:2;width:100%;margin:0!important}
.result-box>.status-area.wb-has-motion>.generation-wait{grid-column:2;grid-row:3;min-width:0}
.result-box>.status-area.wb-has-motion>.run-local-stop{grid-column:2!important;grid-row:4!important;justify-self:start;margin:6px 0 0!important}
.generation-wait{color:#b8af9e;font-size:12px;line-height:1.75;text-align:left;min-width:0}
.gw-steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;padding:0;margin:8px 0 12px;counter-reset:gwsteps;font-size:11px;letter-spacing:.2px}
.gw-steps li{display:flex;align-items:center;gap:6px;color:#9d988b;counter-increment:gwsteps}
.gw-steps li::before{content:counter(gwsteps);width:18px;height:18px;display:grid;place-items:center;border:1px solid #98835b55;border-radius:50%;font-size:10px}
.gw-steps li.current{color:#e1c68b}.gw-steps li.current::before{background:#ddbd7320;border-color:#d3b37088}.gw-steps li.done::before{content:'✓';color:#c8b783}
.gw-note{font-size:12px;line-height:1.8;padding:10px 12px!important;margin:0 0 8px!important;border:1px solid #ceb1722b;border-radius:10px;color:#d4c39e!important;background:#d9bc7810;font-weight:400!important}
.gw-meta{display:flex;flex-wrap:wrap;gap:4px 16px;color:#afa898;font-size:11px;font-variant-numeric:tabular-nums}
.generation-wait[data-state="reconnecting"] .gw-note{border-style:dashed;background:transparent}
/* The i element is the track; only its pseudo-element is the measured fill. */
.result-box>.status-area.wb-has-motion>.task-progress.gw-progress{display:grid!important;grid-template-columns:minmax(36px,1fr) auto;gap:12px;padding:0!important;overflow:visible}
.result-box>.status-area.wb-has-motion>.task-progress.gw-progress>i{display:block!important;width:100%!important;height:4px;animation:none!important;transform:none!important;background:#e8c97a17!important}
.result-box>.status-area.wb-has-motion>.task-progress.gw-progress>i::after{display:block!important;width:var(--gw-progress,0%)!important;background:linear-gradient(90deg,#a98d52,#ead4a0)!important;box-shadow:none!important;animation:none;transition:width .4s ease}
.result-box>.status-area.wb-has-motion>.task-progress.gw-progress.gw-indeterminate>i::after{width:28%!important;animation:wb-gold-pass 3.6s ease-in-out infinite;background:linear-gradient(90deg,#b9985122,#dcc38a,#b9985122)!important}
.result-box>.status-area.wb-has-motion>.task-progress.gw-progress.gw-paused>i::after{width:0!important;animation:none!important}
.result-box>.status-area.wb-has-motion>.task-progress.gw-progress>span{min-width:0!important;max-width:130px;font-size:11px!important;white-space:normal!important}
.qh-progress-card>.wb-gold-motion{float:right;width:68px;height:68px;margin:0 0 12px 16px}.qh-progress-card::after{content:'';display:block;clear:both}
.qh-batch-row>.wb-gold-motion{width:50px;height:50px;margin:0 0 10px 12px}
@container wb-task (max-width:380px){.result-box>.status-area.wb-has-motion{grid-template-columns:48px minmax(0,1fr)!important;gap:8px 10px!important;padding:14px!important}.result-box>.status-area.wb-has-motion>.wb-motion{width:46px;height:46px}.result-box>.status-area.wb-has-motion>.generation-wait{grid-column:1/-1}.result-box>.status-area.wb-has-motion>.run-local-stop{grid-column:1/-1!important}.wb-gold-emblem{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.wb-gold-motion *,.result-box>.status-area.wb-has-motion>.task-progress.gw-progress>i::after{animation:none!important;transition:none!important}.wb-gold-rail i{transform:none;opacity:.6}.result-box>.status-area.wb-has-motion>.task-progress.gw-progress.gw-indeterminate>i::after{width:24%!important;transform:none}}