:root{color-scheme:dark;--bg:#0e1517;--surface:#172124;--line:#354346;--ink:#e7ece8;--muted:#94a6aa;--gold:#dfb780;--mint:#98d9c7;font:13px/1.5 "Segoe UI","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink)}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select,input{font:inherit}button,select{color:var(--ink);background:#202e32;border:1px solid #405053;border-radius:5px;min-height:30px;padding:4px 10px}button{cursor:pointer}button:hover,select:hover{border-color:var(--gold);color:#fff}button.active,button.primary{border-color:var(--gold);color:var(--gold);background:#3b352c}button:disabled,select:disabled{opacity:.5;cursor:wait}button:focus-visible,select:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:3px}a{color:inherit;text-decoration:none}a:hover{color:var(--gold)}[hidden]{display:none!important}.topbar{height:76px;display:flex;align-items:center;gap:24px;padding:12px 20px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;flex-shrink:0}.brand-mark{height:39px;width:36px;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold);font:22px Georgia,serif}.brand small{display:block;color:var(--gold);font:9px/1.4 "Segoe UI",sans-serif;letter-spacing:1.7px}.brand strong{font-size:19px;font-weight:600;letter-spacing:1px}.brand strong span{font-weight:400;font-size:15px;color:#a7b7b8;margin-left:9px}.shot-picker{display:flex;align-items:center;gap:10px;min-width:0;flex:1;max-width:560px}.shot-picker label{color:var(--muted);font-size:11px;white-space:nowrap}.shot-picker select{width:100%;min-width:0;max-width:470px;height:35px}.mode-switch{display:flex;gap:5px}.sync-status{margin-left:auto;white-space:nowrap;font-size:11px;color:var(--mint)}.sync-status i,.live-dot{display:inline-block;width:6px;height:6px;background:var(--mint);border-radius:50%;margin-right:7px;box-shadow:0 0 10px #85c6b74a}.workspace{height:calc(100dvh - 170px);min-height:540px;display:grid;grid-template-columns:minmax(280px,.96fr) minmax(0,2.04fr);gap:10px;padding:10px 12px}.left-deck{display:grid;grid-template-rows:minmax(0,1.13fr) minmax(0,1fr);gap:10px;min-width:0;min-height:0}.right-deck{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,.9fr) minmax(0,1.25fr);gap:10px;min-width:0;min-height:0}.panel{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:7px;background:var(--surface);overflow:hidden;min-height:0;min-width:0}.panel-head{height:39px;min-height:39px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);background:#192428}.panel-head h2{margin:0;white-space:nowrap;font-size:12px;letter-spacing:.02em;font-weight:600}.panel-head h2>span{color:var(--gold);font-size:10px;margin-right:8px;font-family:monospace;opacity:.85}.panel-tools{display:flex;align-items:center;gap:7px}.panel-tools small{font-size:10px;color:var(--muted);white-space:nowrap}.panel-head button,.panel-head select{min-height:24px;padding:2px 7px;font-size:10px}.badge{border:1px solid #45605a;border-radius:20px;color:#b4cdbf;font-size:9px;padding:2px 7px;white-space:nowrap}.view{position:relative;min-height:0;flex:1;overflow:hidden;background:#0b1113}.view canvas{display:block;width:100%;height:100%;object-fit:contain}.overview-view{background:#5d6e69;cursor:grab;touch-action:none}.overview-view:active{cursor:grabbing}.overview-view canvas{object-fit:fill}.overview-label{position:absolute;top:14px;left:14px;padding:7px 10px;background:#142125db;border:1px solid #5a6b64;border-radius:5px;display:flex;flex-direction:column;font-size:12px;pointer-events:none}.overview-label b{color:var(--gold);font:11px/1.8 monospace}.north{position:absolute;right:18px;top:12px;display:flex;flex-direction:column;align-items:center;pointer-events:none;color:#e9ddc0}.north b{font-size:11px}.north span{font-size:26px;line-height:1}.view-foot{position:absolute;bottom:9px;left:10px;right:10px;font-size:10px;color:#d9e5dc;text-shadow:0 1px 4px #000;pointer-events:none}.mint-dot,.gold-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 5px 0 10px;background:var(--mint)}.gold-dot{background:var(--gold)}.map-view{min-height:130px;background:#131e22;cursor:crosshair}.map-view canvas{object-fit:fill}#map-hint{position:absolute;bottom:6px;right:10px;color:#849b9e;font-size:9px;pointer-events:none}.levels{display:flex;gap:4px;padding:8px 10px 4px;flex-wrap:wrap}.levels button{font:10px monospace;min-height:24px;padding:3px 6px;flex:1;white-space:nowrap}.map-legend{padding:3px 10px 9px;display:flex;gap:8px;color:#a0b4b6;font-size:9px;flex-wrap:wrap}.map-legend i{margin-left:0}.proxy-view:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}.view-corner{position:absolute;left:10px;top:9px;display:flex;gap:9px;font-size:9px;padding:3px 7px;background:#122022c9;border:1px solid #77847666;border-radius:3px;pointer-events:none}.view-corner span:last-child{font-family:monospace;color:var(--gold)}.take-control{position:absolute;bottom:10px;right:10px;min-height:25px;background:#172326e8;font-size:10px;border-color:#7b8a7a}.style-view img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.02)}.style-caption{position:absolute;bottom:0;left:0;right:0;padding:30px 13px 11px;background:linear-gradient(transparent,#0a1013e8);pointer-events:none}.style-caption small{color:#b9c5c2;font-size:9px}.style-caption strong{display:block;font-size:14px;font-weight:500;margin:1px 0 5px}.swatches{display:flex;gap:5px}.swatches i{width:24px;height:4px;border:1px solid #ffffff24}.style-options{min-height:35px;display:flex;align-items:center;gap:9px;padding:5px 10px;border-top:1px solid var(--line)}.style-options label{font-size:10px;color:var(--muted);white-space:nowrap}.style-options select{min-height:24px;padding:1px 6px;font-size:10px;flex:1;min-width:0}.style-options button{font-size:10px;min-height:24px;padding:1px 6px}.text-button{background:transparent;border-color:transparent}.render-panel{grid-column:1 / 3}.render-view{background:#090e10}.render-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#090e10}.render-caption{position:absolute;bottom:14px;left:18px;display:flex;flex-direction:column;padding:9px 12px;background:#0e191da6;border-left:2px solid var(--gold);pointer-events:none;text-shadow:0 1px 5px #000}.render-caption small{color:#ebd5b2;font-size:10px;letter-spacing:2px}.render-caption span{font-size:10px;margin-top:3px;color:#cfdbd7}.render-time{position:absolute;bottom:17px;right:17px;color:#d9e4dd;font:11px monospace;text-shadow:0 1px 4px #000;background:#142125b8;padding:5px 8px;border-radius:3px;pointer-events:none}.transport{height:94px;border-top:1px solid var(--line);padding:11px 18px 7px;background:#141e21}.transport-line{display:flex;align-items:center;gap:13px}.play-controls{display:flex;gap:5px}.play-controls button{min-width:30px;font-size:11px}.play-controls .primary{min-width:108px}.timecode{display:flex;gap:6px;font:11px monospace;white-space:nowrap}.timecode strong{font-weight:400;color:var(--gold)}.timecode span{color:var(--muted)}#timeline{flex:1;min-width:40px;accent-color:var(--gold);cursor:pointer}#speed,#loop{font-size:11px;min-height:28px}.transport-meta{display:flex;justify-content:space-between;gap:20px;margin-top:8px;font-size:10px;color:var(--muted)}#clip-description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.key-guide{white-space:nowrap;font-size:9px}.key-guide kbd{color:#c3d1ce;padding:1px 3px;border:1px solid #4c5b5d;border-radius:3px;font:9px monospace;margin-left:6px}.key-guide kbd.pressed{background:var(--gold);color:#161e1f;border-color:var(--gold)}#engine{position:fixed;left:-4000px;top:0;width:1280px;height:850px;border:0;pointer-events:none;opacity:0}.loading{position:fixed;inset:76px 0 94px;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0e171df2;color:var(--muted)}.loading strong{color:var(--ink);font-size:17px;font-weight:500}.loading>span:last-child{font-size:12px}.loader{width:30px;height:30px;border-radius:50%;border:2px solid #334443;border-top-color:var(--gold);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#notice{position:fixed;z-index:30;left:50%;bottom:104px;transform:translateX(-50%);max-width:min(600px,90vw);background:#253a3c;border:1px solid #7a9b91;color:#e5f0e8;padding:10px 16px;border-radius:6px;box-shadow:0 8px 40px #0008;font-size:12px}.fatal{position:fixed;z-index:40;inset:20%;background:#182427;border:1px solid #c99572;padding:30px;border-radius:10px;white-space:pre-wrap;box-shadow:0 10px 80px #000}.loading[hidden]{display:none}
@media(min-width:1700px){.topbar{height:82px}.workspace{height:calc(100dvh - 178px)}.transport{height:96px}.panel-head{height:43px;min-height:43px}.panel-head h2{font-size:13px}.panel-head button,.panel-head select{font-size:11px}.style-caption strong{font-size:17px}.style-caption small{font-size:10px}.levels button{font-size:11px}.map-legend{font-size:10px}.brand strong{font-size:21px}}
@media(max-width:1150px){.topbar{gap:12px;padding:10px 12px}.brand strong span{display:none}.brand small{font-size:8px}.sync-status{display:none}.workspace{grid-template-columns:minmax(255px,.92fr) minmax(0,2.08fr)}.panel-head{padding:0 8px}.panel-head h2{font-size:11px}.badge{font-size:8px}.panel-tools{gap:3px}.render-panel .panel-tools .badge{display:none}.transport-meta .key-guide{display:none}.shot-picker label{display:none}.mode-switch button{font-size:11px;padding:4px 7px}.style-options{gap:5px}}
@media(max-width:760px){body{overflow:auto}.topbar{height:auto;min-height:100px;flex-wrap:wrap;gap:9px}.brand{flex:1}.brand strong span{display:inline}.shot-picker{order:3;flex-basis:100%;max-width:none}.shot-picker select{max-width:none}.workspace{display:flex;flex-direction:column;height:auto;min-height:0;padding:8px;gap:8px}.left-deck{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:290px;gap:8px}.right-deck{grid-template-rows:235px 310px;gap:8px}.panel-head{height:33px;min-height:33px}.panel-head h2>span{margin-right:4px}.overview-label{left:7px;top:7px;font-size:10px}.overview-label b{font-size:10px}.north{right:8px}.view-foot{font-size:8px}.map-legend{display:none}.levels{padding:4px;gap:3px}.levels button{min-width:27px;min-height:21px;font-size:8px;padding:2px}.panel-tools small{display:none}.map-panel .panel-tools select{width:68px}.overview-panel .panel-tools button{padding:1px 4px;font-size:9px}#map-hint{display:none}.style-panel .panel-head button{font-size:9px;padding:0}.style-options label{display:none}.style-caption{padding:20px 8px 8px}.style-caption strong{font-size:12px}.style-caption small{font-size:8px}.render-caption{bottom:10px;left:9px;padding:6px 8px}.render-caption span{font-size:8px}.render-time{bottom:10px;right:8px;font-size:9px}.take-control{bottom:5px;right:5px;font-size:8px;padding:2px 4px}.view-corner{font-size:8px;padding:2px 4px;left:5px;top:5px}.transport{position:sticky;bottom:0;z-index:5;height:auto;min-height:105px;padding:9px 8px;box-shadow:0 -5px 20px #0004}.transport-line{gap:6px;flex-wrap:wrap}.play-controls .primary{min-width:88px}#timeline{order:5;flex-basis:100%}.timecode{margin-left:auto;font-size:10px}.timecode span{display:none}#speed,#loop{font-size:9px;padding:2px 5px;min-height:28px}.transport-meta{margin-top:3px;font-size:9px}.loading{inset:0}.fatal{inset:15% 8%;font-size:12px}.panel-head .badge{display:none}.render-panel .panel-head .text-button{font-size:9px}}
@media(prefers-reduced-motion:reduce){.loader{animation-duration:2s}}

.character-controls{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}.character-controls label{color:var(--muted);font-size:11px}.character-controls select{max-width:125px;min-height:31px;font-size:11px}.character-controls button{min-height:31px;font-size:11px;padding:3px 8px}
@media(max-width:1150px){.character-controls label{display:none}.character-controls select{max-width:105px}}
@media(max-width:760px){.character-controls{order:2}.character-controls select{max-width:100px}}

/* The reference and video form one art direction, like the project-page cards. */
.style-carousel{display:flex;align-items:center;gap:4px;padding:6px 7px;background:#121e22;border-top:1px solid var(--line)}
.style-cards{position:relative;display:flex;flex:1;min-width:0;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.style-cards::-webkit-scrollbar{display:none}
.style-card{scroll-snap-align:center;flex:1 0 102px;min-width:102px;display:flex;align-items:center;gap:7px;padding:4px;min-height:47px;text-align:left;border-color:#35484b;background:#1c292c}
.style-card img{width:43px;height:36px;object-fit:cover;border-radius:3px;flex-shrink:0}
.style-card span{font-size:10px;white-space:nowrap}.style-card small{display:block;color:#849994;font:9px/1.4 monospace}.style-card.active small{color:var(--gold)}
.style-arrow{flex-shrink:0;padding:0;width:18px;min-height:42px;border:0;background:transparent;color:var(--muted);font-size:23px}
.style-view{min-height:70px}.style-caption strong{font-size:13px}.style-caption{padding-top:40px}
.render-view{display:grid;place-items:center;isolation:isolate}
.compare{position:relative;flex:none;overflow:hidden;aspect-ratio:16/9;background:#090e10;touch-action:pan-y}
.compare canvas,.compare video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.compare-base{z-index:0}.compare-top{position:absolute;z-index:1;inset:0;clip-path:inset(0 calc(100% - var(--position)) 0 0)}
.compare-range{position:absolute;z-index:7;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.compare-line{position:absolute;z-index:5;left:var(--position);top:0;bottom:0;width:1px;background:#fff9;box-shadow:0 0 6px #0006;pointer-events:none}
.compare-line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;display:grid;place-items:center;border:1px solid #ece8debd;border-radius:50%;background:#182222a8;backdrop-filter:blur(8px);font:21px/1 sans-serif;color:#f1e2c9}
.compare:focus-within .compare-line span{outline:2px solid var(--mint);outline-offset:4px}
.compare-label{position:absolute;z-index:4;top:12px;padding:4px 8px;border:1px solid #b7c3b944;border-radius:3px;background:#142022ac;color:#eee4d0;font:9px/1.5 "Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:1px;pointer-events:none}
.compare-label-left{left:12px}.compare-label-right{right:12px;color:#c9d8d5}
.compare[data-position="0"] .compare-label-left,.compare[data-position="100"] .compare-label-right{visibility:hidden}
.compare .render-caption,.compare .render-time{z-index:4}.compare .render-caption{max-width:70%}.compare .render-caption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compare-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:35px;padding:4px 11px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.compare-controls>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compare-controls>div{display:flex;gap:4px}.compare-controls button{padding:1px 8px;min-height:23px;font-size:10px}
.pair-loading{position:absolute;z-index:8;inset:0;display:grid;place-items:center;background:#101c23da;backdrop-filter:blur(3px);color:var(--gold);font-size:12px}
@media(max-width:1150px){.style-card{flex-basis:94px;min-width:94px}.style-card img{width:34px}.style-caption strong{font-size:11px}.compare-controls{font-size:9px}.compare-label{font-size:8px}.render-panel .panel-tools{min-width:0}.render-panel .panel-head h2{font-size:10px}}
@media(max-width:760px){.right-deck{grid-template-rows:285px 340px}.style-carousel{padding:4px}.style-arrow{width:14px}.style-options button{font-size:8px}.style-options select{font-size:9px}.compare-line span{width:32px;height:32px;font-size:18px}.compare-controls{padding:4px 7px}.compare-controls>span{font-size:8px}.render-panel .panel-head{flex-wrap:wrap;height:auto;min-height:38px;padding:4px 8px}.compare .render-caption{bottom:7px;left:7px}.compare .render-time{bottom:8px;right:7px}.compare-label{top:7px}.compare-label-left{left:7px}.compare-label-right{right:7px}}
@media(max-width:520px){.right-deck{display:flex;flex-direction:column}.proxy-panel{height:285px}.style-panel{height:335px}.render-panel{height:315px}.style-card{flex-basis:98px}.style-caption strong{font-size:14px}.compare-controls button{padding:1px 6px}.render-caption small{font-size:8px}.pair-loading{font-size:11px}.compare .render-caption{max-width:66%}}