@font-face{font-family:Saira;src:url('./assets/Saira-variable.ttf') format('truetype');font-weight:100 900;font-stretch:50% 125%;font-style:normal;font-display:swap}
:root{color-scheme:dark;font-family:Saira,'Microsoft YaHei',sans-serif;color:#e7e8e8;background:#111214;font-synthesis:none;--muted:#919498;--line:#2a2c2f;--accent:#d9e1a1}
body,dialog{-webkit-user-select:none;user-select:none}input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button,input,select{outline-offset:4px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent)}button{color:inherit}button:hover{filter:brightness(1.18)}[hidden]{display:none!important}
.app-header{height:92px;padding:0 44px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.identity{display:flex;align-items:center;gap:22px}.wordmark{font-size:28px;font-weight:700;letter-spacing:2px}.wordmark-dot{color:var(--accent)}.header-divider{height:20px;width:1px;background:#414347}h1{font-size:16px;font-weight:400;margin:0;color:#c9cbcd}.build-label{font-size:12px;letter-spacing:1.5px;color:#b6b8bc}.build-label span{margin-left:16px;letter-spacing:0;color:var(--muted)}
.workspace{max-width:1800px;margin:0 auto;padding:36px 44px 24px;display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:36px;align-items:start}.preview{min-width:0}.preview-toolbar{height:34px;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.view-switch{display:flex;padding:3px;background:#202225;border:1px solid #2d2f32;border-radius:7px;gap:2px}.view-switch button{border:0;background:transparent;border-radius:4px;padding:5px 17px;font-size:14px;color:var(--muted)}.view-switch button[aria-pressed=true]{color:#f1f1f1;background:#3b3d40}.preview-actions{display:flex;align-items:center;gap:20px}.resolution{font-size:12px;color:#75797f;letter-spacing:1px}.quiet-button{border:0;background:none;padding:6px 4px;color:#b2b5b8;font-size:14px}.stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid #292b2e;overflow:hidden;border-radius:3px}.stage canvas{display:block;width:100%;height:100%}.stage-loading{position:absolute;inset:0;display:grid;place-items:center;background:#000;color:#9ea0a3;font-size:14px}.stage:fullscreen{border:0;border-radius:0;height:100vh;aspect-ratio:auto;display:grid;place-items:center}.stage:fullscreen canvas{object-fit:contain;max-width:100%;max-height:100vh}.exit-fullscreen{position:absolute;right:24px;top:24px;background:#202225b8;border:1px solid #5d5e60;border-radius:4px;padding:8px 14px;font-size:14px}
.transport{padding:23px 0 0}.transport-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.play-actions{display:flex;align-items:center;gap:18px}.play-button{display:flex;gap:11px;align-items:center;justify-content:center;min-width:102px;border:0;border-radius:5px;background:var(--accent);color:#191c0d;padding:9px 16px;font-size:14px;font-weight:500}.play-icon{font-size:12px;width:12px}.time{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#757a7f}.time #current-time{color:#e6e7e7}.time-divider{padding:0 9px;color:#4d5054}.timeline{appearance:none;display:block;width:100%;height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) 0% 25.97%,#35373b 25.97% 100%);margin:26px 0 14px;cursor:pointer;touch-action:pan-y}.timeline::-webkit-slider-thumb{appearance:none;width:10px;height:16px;background:#e3e7c9;border-radius:2px}.timeline::-moz-range-thumb{width:10px;height:16px;border:0;background:#e3e7c9;border-radius:2px}.timeline-labels{display:flex;justify-content:space-between;gap:16px;color:#777c82;font-size:12px}.timeline-labels #phase{color:#b6bca0}.transport-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:22px;border-top:1px solid #25272a;padding-top:10px}.keyboard-hint{font-size:12px;color:#7a7f85}kbd{font-family:inherit;border:1px solid #3c3e42;border-radius:3px;padding:0 6px;margin-right:6px;font-size:11px}
.editor{border-left:1px solid var(--line);padding-left:30px;margin-top:2px;min-height:525px}.editor-heading{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:11px;letter-spacing:2px;color:#767b80}.editor h2{font-size:23px;font-weight:500;margin:3px 0 0}.count-badge{font-size:12px;color:#a8acb0;padding:2px 8px;background:#232528;border-radius:4px}.editor-intro{font-size:13px;line-height:1.7;color:#8d9297;margin:13px 0 27px}.column-labels{display:grid;grid-template-columns:1fr 88px 24px;gap:10px;padding-left:29px;font-size:12px;color:#91969b;margin-bottom:10px}.option-list{display:grid;gap:12px}.option-row{display:grid;grid-template-columns:19px minmax(0,1fr) 88px 24px;gap:10px;align-items:start}.row-index{padding-top:10px;font-size:11px;color:#676d73}.option-row input{display:block;width:100%;min-width:0;height:42px;border:1px solid #3c3f43;border-radius:5px;background:#1c1e21;color:#e7e9eb;font-size:16px;padding:8px 10px}.option-row input:hover{border-color:#6e7278}.option-row input[aria-invalid=true]{border-color:#d78a7a}.option-row input:read-only{color:#b8bdc2;background:#191b1e;border-color:#292c30}.number-input{font-variant-numeric:tabular-nums}.remove-option{width:24px;height:42px;padding:0;border:0;background:none;color:#747a80;font-size:21px}.remove-option:hover{color:#d78a7a}.field-error{grid-column:2/-1;margin:0;font-size:12px;color:#df9f92;line-height:1.5}.add-button{width:calc(100% - 29px);margin:20px 0 0 29px;background:none;border:1px dashed #44484d;border-radius:5px;padding:10px;color:#b5bcc2;font-size:14px}.single-select,#preset-picker{margin-top:24px}.single-select label,#preset-picker label{display:block;font-size:13px;color:#aeb4ba;margin-bottom:8px}select{width:100%;border:1px solid #3c3f43;background:#1c1e21;border-radius:5px;padding:9px 10px;color:#e4e7e9;font-size:14px}.form-status{min-height:20px;margin:12px 0;color:#a3aa8a;font-size:12px}.editor-footer{border-top:1px solid var(--line);margin-top:22px;padding-top:22px}.font-note{display:block;font-size:14px;color:#b4bac0}.font-note span{display:block;font-size:11px;letter-spacing:.3px;color:#787f86;margin-top:3px}.text-button{border:0;background:none;font-size:12px;color:#959da4;padding:0;margin-top:22px;text-decoration:underline;text-underline-offset:5px}.app-footer{max-width:1800px;margin:0 auto;padding:16px 44px 28px;display:flex;justify-content:space-between;font-size:11px;color:#5e656d;letter-spacing:1px}.app-footer span+span{letter-spacing:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.workspace{padding-top:44px;gap:44px;grid-template-columns:minmax(0,1fr) 320px}.editor{padding-left:32px}}
@media(max-width:1080px){.app-header{padding:0 24px;height:76px}.workspace{padding:24px;gap:24px;grid-template-columns:minmax(0,1fr) 260px}.editor{padding-left:22px}.option-row{grid-template-columns:16px minmax(0,1fr) 64px 20px;gap:7px}.column-labels{grid-template-columns:1fr 64px 20px;gap:7px;padding-left:23px}.add-button{margin-left:23px;width:calc(100% - 23px)}.play-actions{gap:12px}.app-footer{padding:10px 24px 22px}.time{font-size:15px}}
@media(max-width:820px){.workspace{grid-template-columns:1fr;gap:32px}.editor{border-left:0;border-top:1px solid var(--line);padding:26px 0 0;min-height:0}.editor-intro{margin-bottom:20px}.option-row{grid-template-columns:22px minmax(0,1fr) minmax(85px,.45fr) 32px;gap:12px}.column-labels{grid-template-columns:1fr minmax(85px,.45fr) 32px;padding-left:34px;gap:12px}.option-row input{height:46px}.remove-option{height:46px;width:32px}.add-button{margin-left:34px;width:calc(100% - 34px)}.editor-footer{display:flex;align-items:center;justify-content:space-between}.text-button{margin:0}.build-label{font-size:11px}.build-label span{display:none}.editor-heading{max-width:none}.app-footer{margin-top:12px}}
@media(max-width:480px){.app-header{height:70px;padding:0 16px}.identity{gap:13px}.wordmark{font-size:23px}h1{font-size:14px}.build-label{display:none}.workspace{padding:20px 16px}.preview-toolbar{margin-bottom:14px}.resolution{display:none}.play-actions{gap:10px}.play-button{min-width:84px;padding:9px 12px}.quiet-button{font-size:13px}.time{font-size:13px}.time-divider{padding:0 5px}.timeline-labels{font-size:11px;gap:8px}.keyboard-hint{display:none}.transport-bottom{justify-content:flex-end}.transport-top{flex-wrap:wrap}.app-footer{padding:12px 16px 22px;gap:14px;font-size:10px}.app-footer span+span{max-width:180px;text-align:right}.editor-intro{font-size:14px}.column-labels{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.design-field-header select{width:170px;max-width:55%;padding:5px 7px;font-size:12px}
.design-editor{border-top:1px solid var(--line);padding-top:21px;margin-top:19px}.design-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.design-heading h3{font-size:17px;font-weight:500;margin:0}.design-heading .text-button{margin:0;white-space:nowrap;font-size:11px}.design-intro,.design-note{font-size:12px;line-height:1.65;color:var(--muted);margin:9px 0 17px}.design-note{margin:13px 0 0;color:#727b81}.design-group{border-top:1px solid #2b2e32}.design-group summary{cursor:pointer;padding:13px 2px;color:#bcc2c5;font-size:13px;list-style:none;display:flex;justify-content:space-between}.design-group summary:after{content:'+';color:#838a8e}.design-group[open] summary:after{content:'−'}.design-group summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.design-field{margin:0 0 17px}.design-field-header{display:flex;justify-content:space-between;align-items:center;gap:10px}.design-field label{font-size:12px;color:#aeb5bb}.design-value{display:flex;align-items:center;gap:5px}.design-value input{width:70px;height:30px;border:1px solid #3c3f43;background:#1c1e21;color:#e7e9eb;border-radius:4px;padding:3px 7px;font-size:12px;font-variant-numeric:tabular-nums}.design-value input[aria-invalid=true]{border-color:#d78a7a}.design-value span{width:17px;color:#727b81;font-size:11px}.design-field input[type=range]{display:block;width:100%;height:4px;margin:12px 0 0;accent-color:var(--accent);cursor:pointer}.design-error{font-size:11px;color:#df9f92;line-height:1.5;margin:7px 0 0}
@media(min-width:821px){.preview{position:sticky;top:20px}.editor{max-height:calc(100vh - 136px);overflow-y:auto;padding-right:12px;scrollbar-width:thin;scrollbar-color:#454b4f transparent}}
@media(max-width:820px){.design-field{max-width:none}.design-value input{width:90px}.design-group summary{font-size:14px}.design-field label{font-size:14px}.design-value input{height:36px;font-size:14px}.design-field input[type=range]{height:6px;margin-top:16px}}
.preview-toolbar{height:auto;min-height:34px;gap:12px;flex-wrap:wrap}.preview-actions{gap:12px}.aspect-select{width:76px;padding:5px 8px;font-size:13px}.preview-note{font-size:12px;color:var(--muted);margin:8px 0 0}
.scene-window{position:relative;overflow:hidden;width:100%;height:100%}.scene-window canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill}
.stage[data-aspect="4:3"]{aspect-ratio:4/3}.stage[data-aspect="4:3"] canvas{width:133.333333%;left:-16.666667%}
.stage:fullscreen .scene-window{width:min(100vw,177.777778vh);height:min(100vh,56.25vw)}.stage:fullscreen canvas{max-width:none;max-height:none;object-fit:fill}
.stage[data-aspect="4:3"]:fullscreen{aspect-ratio:auto}.stage[data-aspect="4:3"]:fullscreen .scene-window{width:min(100vw,133.333333vh);height:min(100vh,75vw)}
.option-row{grid-template-columns:19px minmax(0,1fr) 88px}.column-labels{grid-template-columns:1fr 88px}.option-actions{grid-column:2/-1;display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:-5px}.move-option{border:1px solid #353a3e;border-radius:4px;padding:1px 10px;background:#1c1e21;color:#aeb6bc;font-size:15px;min-width:32px;height:27px}.option-actions .remove-option{height:27px;width:27px;font-size:19px}.option-actions button:disabled{opacity:.25}
.settings-actions{display:flex;gap:14px;margin-top:15px}.settings-note{font-size:11px;color:var(--muted);line-height:1.7;margin:4px 0 12px}.range-hint{font-size:11px;color:#d1bc85;margin:7px 0 0;line-height:1.6}.design-value input{width:91px}.design-value{flex-shrink:0}
@media(max-width:1080px){.option-row{grid-template-columns:16px minmax(0,1fr) 64px}.column-labels{grid-template-columns:1fr 64px}.preview-actions{gap:8px}.resolution{letter-spacing:0}.design-value input{width:79px}}
@media(max-width:820px){.option-row{grid-template-columns:22px minmax(0,1fr) minmax(85px,.45fr)}.column-labels{grid-template-columns:1fr minmax(85px,.45fr)}.design-value input{width:110px}.option-actions{margin-top:-4px}}
.preview-export-actions{display:flex;align-items:center;gap:12px}.frame-export-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:1px solid #3c3f43;border-radius:9px;background:#17191c;color:#e7e8e8;box-shadow:0 24px 90px #000b}.frame-export-dialog::backdrop{background:#000a;backdrop-filter:blur(3px)}.frame-export-form{padding:23px}.frame-export-form h2{margin:0;font-size:20px;font-weight:500}.frame-export-form .design-intro{margin:10px 0 18px}.frame-export-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.frame-export-grid label{display:grid;gap:7px;color:#adb3b8;font-size:12px}.frame-export-grid input,.frame-export-grid select{width:100%;min-width:0;height:38px;padding:7px 9px;border:1px solid #3c3f43;border-radius:5px;background:#1c1e21;color:#e7e9eb;font-variant-numeric:tabular-nums}.frame-progress{width:100%;height:7px;margin-top:20px;accent-color:var(--accent)}.frame-export-form .form-status{margin:13px 0 5px;line-height:1.6}.frame-export-footer{display:flex;justify-content:flex-end;align-items:center;gap:18px;border-top:1px solid var(--line);padding-top:15px}.frame-export-footer .play-button{min-width:128px}.frame-export-footer .quiet-button{margin:0}
.github-link{color:#c3c7ca;text-decoration:none;font-size:13px}.github-link:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.editor-heading-actions{display:flex;align-items:center;gap:8px}.editor-heading-actions .text-button{margin:0;white-space:nowrap;font-size:11px}.font-note{font-size:12px;color:#788087}
.frame-export-grid [hidden]{display:none}
@media(max-width:480px){.preview-export-actions{gap:8px}.preview-export-actions .quiet-button{font-size:12px}.frame-export-form{padding:18px}.frame-export-grid{gap:12px}}