@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}
*{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}.app-footer a{color:inherit;text-decoration:none}.app-footer a:hover{color:#c3c7ca;text-decoration:underline;text-underline-offset:3px}.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="1:1"]{aspect-ratio:1/1;width:min(100%,72vh);margin-inline:auto}.stage[data-aspect="9:16"]{aspect-ratio:9/16;width:min(100%,40.5vh);min-width:260px;margin-inline:auto}
.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,.stage[data-aspect="1:1"]:fullscreen,.stage[data-aspect="9:16"]:fullscreen{width:100%;aspect-ratio:auto}.stage[data-aspect="4:3"]:fullscreen .scene-window{width:min(100vw,133.333333vh);height:min(100vh,75vw)}.stage[data-aspect="1:1"]:fullscreen .scene-window{width:min(100vw,100vh);height:min(100vh,100vw)}.stage[data-aspect="9:16"]:fullscreen .scene-window{width:min(100vw,56.25vh);height:min(100vh,177.777778vw)}
.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);overflow:auto;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 .frame-export-wide{grid-column:1/-1}.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-field-hint{color:#747b81;font-size:10px;line-height:1.35}.frame-export-grid .frame-audio-row{display:flex;align-items:center;gap:10px;min-height:32px;padding:2px 0;color:#c4c9cc;cursor:pointer}.frame-export-grid .frame-audio-row input{width:18px;height:18px;flex:0 0 18px;padding:0;accent-color:var(--accent);cursor:pointer}.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}
@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{grid-template-columns:1fr;gap:12px}.frame-export-grid .frame-export-wide{grid-column:auto}.frame-export-footer{gap:12px}.frame-export-footer .play-button{min-width:116px}}
.studio-mark{font-size:10px;letter-spacing:2.4px;color:#7f8589;border-left:1px solid #3a3d40;padding-left:18px}.studio-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:22px;padding:4px;border:1px solid #2d3033;background:#1a1c1f;border-radius:7px;position:sticky;top:0;z-index:4}.studio-tabs button{border:0;border-radius:4px;background:transparent;color:#878e93;padding:7px 4px;font-size:11px}.studio-tabs button[aria-pressed=true]{background:#3a3d40;color:#f2f3f3}.studio-panel{animation:panel-in .16s ease-out}.studio-panel[hidden]{display:none}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:16px 0}.control-grid label,.full-control{display:grid;gap:6px;color:#aeb5ba;font-size:11px}.control-grid input:not([type=checkbox]):not([type=range]),.full-control input,.full-control select,.control-grid select,textarea{min-width:0;width:100%;height:36px;border:1px solid #3c3f43;border-radius:5px;background:#1c1e21;color:#e7e9eb;padding:6px 8px;font-size:12px}.control-grid input[type=range]{width:100%;accent-color:var(--accent)}.control-grid input[type=file]{font-size:10px;height:auto;padding:7px}.checkbox-control{display:flex!important;align-items:center;gap:8px;min-height:36px}.checkbox-control input{width:16px;height:16px;accent-color:var(--accent)}.studio-group{border-top:1px solid #2b2e32;margin-top:15px;padding-top:1px}.studio-group summary{cursor:pointer;padding:13px 2px;color:#c1c6c9;font-size:13px;list-style:none;display:flex;justify-content:space-between}.studio-group summary:after{content:'+';color:#81888d}.studio-group[open] summary:after{content:'−'}.button-row{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.button-row button,.wide-button{border:1px solid #3d4246;border-radius:4px;background:#202327;color:#c4c9cc;padding:6px 9px;font-size:11px}.wide-button{width:100%}.inline-status,.export-warning{color:#8f979c;font-size:11px;line-height:1.55}.export-warning{color:#d1bc85;border:1px solid #594f31;background:#282416;padding:9px;border-radius:5px}.keyframe-track{position:relative;min-height:54px;margin:10px 0 15px;border:1px solid #35393d;border-radius:5px;background:repeating-linear-gradient(90deg,#191b1e 0,#191b1e calc(10% - 1px),#303338 10%);overflow:auto}.keyframe-marker{position:absolute;top:8px;width:14px;height:34px;transform:translateX(-50%);border:0;border-radius:3px;background:#d9e1a1;color:#171a0c;cursor:grab}.keyframe-marker.is-selected{box-shadow:0 0 0 2px #fff,0 0 18px #d9e1a188}.beat-markers{position:relative;height:22px;margin-top:12px;border-bottom:1px solid #34383c;overflow:hidden}.beat-marker{position:absolute;bottom:0;width:1px;height:11px;background:#72e0ea}.beat-marker.major{height:18px;background:#e3e8bd}.layers-list,.batch-list{display:grid;gap:7px;margin:14px 0}.layer-item,.batch-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #34383c;border-radius:5px;padding:8px 9px;background:#191b1e;color:#b8bec2;font-size:11px}.layer-item.is-selected{border-color:#858c69;background:#22251d}.batch-progress{width:70px;height:5px}.settings-actions{flex-wrap:wrap}textarea#share-link{height:auto;resize:vertical;margin-top:12px}.frame-export-dialog{width:min(600px,calc(100vw - 32px))}.frame-export-grid .frame-audio-row{grid-column:auto}.stage-durations input{font-variant-numeric:tabular-nums}@keyframes panel-in{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:1080px) and (min-width:821px){.studio-tabs{grid-template-columns:repeat(2,1fr)}.control-grid{grid-template-columns:1fr}}
@media(max-width:820px){.studio-tabs{grid-template-columns:repeat(6,1fr);position:static}.studio-tabs button{font-size:12px}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stage[data-aspect="9:16"]{width:min(100%,52vh)}}
@media(max-width:480px){.studio-tabs{grid-template-columns:repeat(3,1fr)}.control-grid{grid-template-columns:1fr}.studio-mark{display:none}.stage[data-aspect="9:16"]{min-width:0;width:min(100%,48vh)}}