@font-face{font-family:Pixel;src:url(assets/pixel.ttf);font-display:swap}*{box-sizing:border-box}html{color-scheme:dark;background:#090d12}body{margin:0;color:#dbe5eb;font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;background:radial-gradient(ellipse at 80% 2%,#14242d66,transparent 45%),#090d12}button,input,select{font:inherit}button,a,label,summary{-webkit-tap-highlight-color:transparent}button,a.secondary,label.secondary{touch-action:manipulation}button,select{cursor:pointer}button:disabled{opacity:.4;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #88c3d6;outline-offset:4px}header{max-width:840px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:24px}.brand{color:#e1ebf0;text-decoration:none;font-weight:650;letter-spacing:.05em;display:flex;gap:9px;align-items:center}.brand i{width:13px;height:13px;background:#8db3c4;box-shadow:4px 4px 0 #294653;display:inline-block}.brand small{color:#748996;font-weight:400;border-left:1px solid #35434e;padding-left:9px}.local{color:#8da5af;font-size:11px;border:1px solid #283b46;border-radius:4px;padding:3px 7px}main{max-width:760px;margin:auto;padding:12px 24px 160px}.intro{padding:18px 0 28px}.eyebrow{font-size:10px;letter-spacing:.2em;color:#89a9b9}.intro h1{font-size:clamp(28px,5vw,42px);line-height:1.35;font-weight:600;letter-spacing:.015em;margin:12px 0}.intro p{color:#8499a8;margin:12px 0 0}.card{background:#10171e;border:1px solid #23313d;border-radius:12px;overflow:hidden;margin-bottom:16px}.screen{position:relative;background:#03080d;aspect-ratio:16/9}canvas{display:block;width:100%;height:100%}#badge{position:absolute;top:10px;right:10px;font-size:9px;letter-spacing:.1em;color:#a6bac6;background:#050a10bb;padding:3px 7px;border-radius:3px;pointer-events:none}#loadCover{position:absolute;inset:0;background:#0b131b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#92a8b5;font-size:12px}.spinner{height:22px;width:22px;border:2px solid #263c49;border-top-color:#b6d8e5;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}.transport{display:flex;align-items:center;padding:9px 12px;gap:12px}#play{background:#1c2c37;border:1px solid #304754;color:#c8dce6;border-radius:7px;width:38px;height:38px;flex-shrink:0}.scrub{flex:1;display:flex}input[type=range]{width:100%;accent-color:#9abecf;min-height:38px}output{font-size:10px;font-variant-numeric:tabular-nums;color:#91a4b1;white-space:nowrap}#notice{font-size:12px;color:#95acbb;min-height:22px;margin:0 2px 20px}#notice.error{color:#efb19f}.setup{padding:22px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-head>div{display:flex;gap:10px;align-items:center}.step{font:10px monospace;color:#7fa4b8;border:1px solid #344752;padding:2px 5px}h2{font-size:16px;font-weight:600;margin:0}.section-head>span{font-size:10px;color:#79919e;white-space:nowrap}.setup>p,.project p{font-size:12px;color:#8399a8;margin:12px 0 17px}.upload{border:1px dashed #45616f;border-radius:8px;padding:22px 12px;display:flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,#20323c77,#111b23);cursor:pointer}.plus{font-size:28px;line-height:1.2;color:#a6d0de}.upload strong{font-size:14px;margin:5px 0}.upload small{font-size:10px;color:#829da9}.footnote,.setup>.footnote{font-size:10px!important;color:#718995!important;margin:8px 0 12px}.options{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:10px}label:has(select){display:flex;flex-direction:column;gap:6px;font-size:11px;color:#94aab8}select{background:#0b131b;border:1px solid #324653;border-radius:6px;color:#cedee6;padding:10px;max-width:100%}.textbutton{border:0;background:none;color:#9ab6c5;font-size:11px;padding:12px 0}.secondary{background:#17242e;border:1px solid #344b5a;border-radius:7px;color:#c0d3df;padding:11px 14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;min-height:44px}.primary{background:#c1d5df;color:#0c1a25;border:1px solid #d1e5ee;border-radius:8px;font-weight:650;padding:14px 17px;cursor:pointer}.primary:hover{background:#d7e7ee}details{border-top:1px solid #263744;margin-top:22px;padding-top:16px}summary{cursor:pointer;font-size:12px;color:#b8cbd5;min-height:32px}summary span{font-size:10px;color:#6e8b9b;float:right}.search input{width:100%;background:#090f16;border:1px solid #2c414f;border-radius:6px;padding:12px;color:#d7e6ee;margin:12px 0}.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.role{padding:0 0 7px;background:#0c141c;border:1px solid #293e4b;border-radius:6px;overflow:hidden;color:#abc0cc;position:relative;min-width:0}.role img{width:100%;height:76px;object-fit:contain;image-rendering:pixelated;padding:7px}.role span{display:block;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}.role.changed:before{content:'已换';position:absolute;right:2px;top:2px;background:#9dc1d1;color:#0d1c26;font-size:8px;padding:0 3px}.settings{display:grid;gap:20px;padding:18px 0}.switchline{display:flex;align-items:center;justify-content:space-between;gap:12px}.switchline strong{font-size:13px;font-weight:500}.switchline small{display:block;font-size:11px;color:#8099a8}.switchline input{width:22px;height:22px;accent-color:#b1d0de;flex-shrink:0}.compat{border-top:1px solid #263744;display:flex;align-items:flex-start;gap:8px;padding-top:12px}.compat p{font-size:11px;color:#829ba9;margin:0}.dot{width:5px;height:5px;border-radius:50%;background:#83b6c4;flex-shrink:0;margin-top:6px}.project{padding:20px 22px}.project p{margin:5px 0 16px}.project-actions,.result-actions{display:flex;gap:8px}.project-actions>*{flex:1}.help{margin:24px 3px 0;border:none;padding:0}.help p{font-size:12px;color:#8da5b3}.result{padding:22px}.result h2{margin:8px 0 16px}.result video{width:100%;background:#03080d;border:1px solid #2b4554;border-radius:5px}.result>p{font-size:12px;color:#96adbb}.result-actions{flex-wrap:wrap}.result-actions>*{flex:1;white-space:nowrap}footer{color:#526e7f;font-size:10px;text-align:center;line-height:1.9;margin-top:28px}.dock{position:fixed;bottom:0;left:0;right:0;background:#0c141bf0;backdrop-filter:blur(16px);border-top:1px solid #2b414f;padding:12px 24px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;align-items:center;z-index:5}.dock>button,.dock>div{width:100%;max-width:712px}.dock .primary{display:flex;justify-content:space-between;align-items:center}.dock .primary span{font-weight:400;font-size:11px;opacity:.65}.dock small{font-size:10px;color:#7c98a9}progress{width:100%;height:4px;accent-color:#b6d9e7;display:block}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:420px){header{padding:18px}.brand{font-size:12px}.brand small{font-size:10px}main{padding:4px 16px 156px}.intro{padding-top:16px}.setup{padding:18px}.section-head>span{font-size:9px}.roles{gap:6px}.role img{height:64px}.dock{padding-left:16px;padding-right:16px}.project{padding:18px}.result{padding:18px}.result-actions>*{font-size:11px;padding:12px}.transport{gap:7px}output{font-size:9px}}