:root{--buncss-light: ;--buncss-dark:initial;color-scheme:dark;--ink:#121820;--panel:#1b2530;--panel-raised:#243042;--paper:#f4f0e8;--cream:#f8f4ec;--muted:#a9b7c4;--line:#405266;--teal:#18b7a0;--teal-bright:#43c59e;--orange:#ff8a4c;--yellow:#f5b942;--red:#e15d5d;--blue:#5197e8;font-family:DIN Next,PingFang SC,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box}body{color:var(--cream);background:radial-gradient(circle at 74% -20%,#2e5260 0,transparent 33rem),radial-gradient(circle at 0 100%,#1a3e47 0,transparent 38rem),var(--ink);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}input:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}select:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}.workbench{min-height:100vh;padding:clamp(8px,2.25vw,16px)}.workbench-header{display:flex;backdrop-filter:blur(18px);background:#1b2530bd;border:1px solid #71839738;border-radius:18px;justify-content:space-between;align-items: center;gap:22px;max-width:1640px;margin:0 auto 18px;padding:14px 18px;box-shadow:0 16px 50px #0000002e}.brand{display:flex;align-items: center;gap:12px;min-width:max-content}.brand-mark{display:grid;color:var(--teal-bright);text-decoration:none;background:#fff;border:1px solid #000;border-radius:50%;place-items: center;width:45px;height:45px;font-size:19px;box-shadow:inset 0 0 20px #2ee3ce22}.eyebrow{color:var(--teal-bright);letter-spacing:.15em;margin:0 0 2px;font-size:10px;font-weight:700}h1{letter-spacing:.02em;margin:0;font-size:clamp(20px,2.1vw,28px);font-weight:700}.project-settings{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items: end;gap:10px}.field{display:grid;color:var(--muted);letter-spacing:.08em;gap:5px;font-size:11px;font-weight:600}.field input,.field select,.url-row input{color:var(--cream);background:#10171fba;border:1px solid #6073868a;border-radius:9px;min-width:88px;padding:8px 10px}.field input[type=color]{cursor:pointer;width:48px;min-width:48px;height:36px;padding:3px}.field input:focus,.field select:focus,.url-row input:focus{border-color:var(--teal)}.button,.icon-button,.palette,.frame-button,.layer-toggle,.layer-delete{color:var(--cream);background:#324152;border:1px solid #0000;transition:transform .16s,background .16s,border-color .16s,box-shadow .16s}.button:hover,.icon-button:hover,.palette:hover,.frame-button:hover,.layer-toggle:hover,.layer-delete:hover{background:#435668;border-color:#8aa3b9a8;transform:translateY(-1px)}.button:active,.icon-button:active,.palette:active,.frame-button:active{transform:translateY(0)}.button{border-radius:9px;min-height:36px;padding:8px 13px;font-size:13px;font-weight:650}.button.primary{color:#092420;background:var(--teal);box-shadow:0 6px 18px #18b7a044}.button.primary:hover{background:#53d6c4}.button.export{color:#2a160b;background:var(--orange);box-shadow:0 6px 18px #ff8a4c3b}.button.export:hover{background:#ffad7e}.button.quiet{background:#ffffff0d}.icon-button{display:grid;border-radius:9px;place-items: center;width:34px;height:34px}.editor-grid{display:grid;grid-template-columns:minmax(172px,218px)minmax(360px,1fr)minmax(240px,300px);gap:16px;max-width:1640px;margin:0 auto}.panel{background:linear-gradient(145deg,#22303ddd,#17212add);border:1px solid #61738750;border-radius:18px;box-shadow:0 18px 48px #0002}.panel-heading{display:flex;justify-content:space-between;align-items: center;gap:8px;padding:15px 15px 10px}.panel-heading h2,.tool-section h2{color:var(--cream);letter-spacing:.08em;margin:0;font-size:13px;font-weight:700}.panel-heading p{color:var(--muted);margin:3px 0 0;font-size:11px}.frame-rail{min-height:600px;padding-bottom:12px}.frame-nav{display:flex;flex-direction:column;align-items: center}.export-icon{color:#fffefd;background:0 0;border:none;margin-right:.25rem;padding:4px 8px}.export-icon:hover,.export-menu[open]>.export-icon{color:#ffad7e}.frame-list{display:grid;overflow-y:auto;gap:8px;max-height:min(68vh,640px);padding:12px}.frame-row{position:relative;cursor:grab}.frame-row:active{cursor:grabbing}.frame-row.is-dragging{opacity:.4}.frame-row.drop-before:before,.frame-row.drop-after:after{position:absolute;z-index:3;background:var(--teal-bright);content:"";pointer-events:none;border-radius:2px;height:2px;left:3px;right:3px;box-shadow:0 0 8px #43c59e99}.frame-row.drop-before:before{top:-5px}.frame-row.drop-after:after{bottom:-5px}.frame-button{display:grid;grid-template-columns:42px 1fr;text-align:left;border-radius:11px;align-items: center;gap:10px;width:100%;min-width:0;padding:7px}.frame-button[aria-current=true]{border-color:var(--teal);box-shadow:inset 3px 0 var(--teal);background:#168f8250}.frame-export{position:absolute;color:#ccc;display:none;border:none;place-items: center;width:24px;height:24px;top:50%;right:8px;transform:translateY(-50%);background:0 0!important}.frame-button:hover+.frame-export{display:block}.frame-export:hover{color:var(--orange);display:block}button svg{pointer-events:none;display:block}.frame-thumb{display:grid;aspect-ratio:1;overflow:hidden;background:repeating-conic-gradient(#697b8c 0 8deg,#425361 8deg 16deg);border-radius:50%;place-items: center;width:42px}.frame-thumb canvas{width:100%;height:100%}.frame-meta{display:grid;gap:2px}.frame-index{font-size:12px;font-weight:700}.frame-state{color:var(--muted);font-size:10px}.stage{display:flex;overflow:auto;flex-direction:column;justify-content:center;align-items: center;gap:14px;min-width:0;padding:clamp(12px,2vw,26px)}.canvas-workspace{display:flex;flex-direction:column;place-items: center;width:100%}.stage-toolbar{display:flex;position:relative;background:#0e151db8;border:1px solid #71839755;border-radius:10px;align-items: center;gap:4px;width:min(100%,620px);min-height:38px;margin-bottom:.5rem;padding:4px;box-shadow:0 9px 24px #00000026}.stage-tool{display:grid;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:7px;place-items: center;width:29px;height:29px;transition:background .16s,color .16s,transform .16s}.stage-tool svg{width:16px;height:16px}.stage-tool:hover:not(:disabled){color:var(--cream);background:#ffffff17;transform:translateY(-1px)}.stage-tool.danger:hover:not(:disabled){color:#ffb3b3;background:#e15d5d2c}.stage-tool.is-active{color:#092420;background:var(--teal);box-shadow:0 0 0 1px #75ead9aa,0 5px 14px #18b7a044}.stage-tool:disabled{cursor:not-allowed;opacity:.38}.toolbar-divider{background:#71839755;width:1px;height:18px;margin:0 3px}.eraser-size-control{display:none;color:var(--muted);white-space:nowrap;position:absolute;align-items: center;gap:5px;min-width:130px;padding:0 5px;font-size:10px;top:-20px}#stage-toolbar:has(#eraser-frame.is-active) .eraser-size-control{display:flex}.eraser-size-control input{accent-color:var(--teal);width:65px}.eraser-size-control output{color:var(--teal-bright);font-variant-numeric:tabular-nums;min-width:18px}.clear-menu,.import-menu,.export-menu{position:relative}.clear-menu>summary,.import-menu>summary,.export-menu>summary{list-style:none;cursor:pointer}.clear-menu>summary::-webkit-details-marker{display:none}.import-menu>summary::-webkit-details-marker{display:none}.export-menu>summary::-webkit-details-marker{display:none}.clear-menu[open]>summary{color:#ffb3b3;background:#e15d5d2c}.clear-menu-options,.import-menu-options,.export-menu-options{position:absolute;z-index:12;display:grid;background:#101820f2;border:1px solid #71839799;border-radius:9px;width:max-content;min-width:172px;padding:5px;top:calc(100% + 7px);left:0;box-shadow:0 12px 26px #00000065}.export-menu-options{left:auto;right:0}.import-menu-options button,.clear-menu-options button,.export-menu-options button{color:var(--cream);text-align:left;white-space:nowrap;display:flex;background:0 0;border:0;border-radius:6px;align-items: center;padding:7px 9px;font-size:12px}.clear-menu-options button:hover{color:#fff;background:#e15d5d3a}.clear-menu-options button:focus-visible{color:#fff;background:#e15d5d3a}.import-menu-options button:hover,.export-menu-options button:hover{color:#fff;background:#18b7a03a}.export-menu-options button:focus-visible{color:#fff;background:#18b7a03a}.stage-top{display:grid;grid-template-columns:auto 1fr;align-items: center;gap:8px;margin:0 0 11px}.preview-toggle[aria-pressed=true]{color:#092420;background:var(--teal);box-shadow:0 5px 16px #18b7a049}.stage-topline{display:flex;justify-content:space-between;align-items: center;gap:12px;width:min(100%,730px);margin-bottom:10px}.active-frame{color:var(--cream);font-size:14px;font-weight:700}.guide-copy{color:var(--muted);font-size:11px}.canvas-shell{--sector-ratio:.765;--frame-background:#fff;position:relative;display:grid;width:min(100%,calc(min(66vh,620px)*var(--sector-ratio)));aspect-ratio:var(--sector-ratio);overflow:hidden;background:var(--frame-background);border:1px solid #cbd4dc;border-radius:14px;place-items: center;box-shadow:inset 0 0 0 1px #fff,0 16px 60px #0000004a}.canvas-shell[hidden]{display:none}.canvas-shell.is-file-dragging{border-color:var(--teal);box-shadow:inset 0 0 0 2px var(--teal),0 16px 60px #0000004a;background:#e8fffa}.canvas-shell:before{position:absolute;content:"";pointer-events:none;border:1px solid #ffffff12;border-radius:8px;inset:8px}#drawing-canvas{display:block;touch-action:none;cursor:var(--brush-cursor,crosshair);background:0 0;width:100%;height:100%}#drawing-canvas.is-erasing{cursor:var(--erase-cursor,cell)}#drawing-canvas.is-transforming{cursor:grab}#drawing-canvas.is-transforming.is-transform-dragging{cursor:grabbing}#drawing-canvas.is-picking-color{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 1v9M16 22v9M1 16h9M22 16h9' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M16 1v9M16 22v9M1 16h9M22 16h9' stroke='%23fff' stroke-width='1'/%3E%3Ccircle cx='16' cy='16' r='6' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 16 16,crosshair}.canvas-drop-hint{position:absolute;z-index:2;display:grid;border:2px dashed var(--teal);color:#0b665b;letter-spacing:.04em;opacity:0;pointer-events:none;background:#e8fffae6;border-radius:8px;place-items: center;transition:opacity .16s,transform .16s;font-size:13px;font-weight:700;inset:10px;transform:scale(.96)}.canvas-shell.is-file-dragging .canvas-drop-hint{opacity:1;transform:scale(1)}.image-import-spinner{position:fixed;z-index:1000;display:grid;color:var(--cream);backdrop-filter:blur(5px);letter-spacing:.04em;text-align:center;background:#071017a8;place-content: center;gap:13px;font-size:14px;font-weight:700;inset:0}.image-import-spinner[hidden]{display:none}.image-import-spinner-ring{border:3px solid #f5b9423d;border-top-color:var(--yellow);animation:.72s linear infinite image-import-spin;border-radius:50%;width:38px;height:38px;margin:0 auto}@keyframes image-import-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.image-import-spinner-ring{animation-duration:1.8s}}.stage-footnote{display:flex;color:var(--muted);justify-content:space-between;gap:10px;width:min(100%,730px);margin-top:13px;font-size:11px}.status-dot{display:inline-block;background:var(--teal-bright);box-shadow:0 0 10px var(--teal-bright);border-radius:50%;width:7px;height:7px;margin-right:5px}.tools{display:grid;overflow:hidden;align-content: start;gap:0}.tool-section{border-bottom:1px solid #68809733;padding:15px}.tool-section:last-child{border:0}.tool-section h2{margin-bottom:11px}.palette-grid{display:flex;flex-wrap:wrap;gap:8px}.palette{border-radius:50%;width:27px;height:27px;box-shadow:inset 0 0 0 2px #ffffff20}.palette[aria-pressed=true]{outline:2px solid var(--cream);outline-offset:2px;transform:scale(1.08)}.color-picker{display:flex;color:var(--muted);justify-content:space-between;align-items: center;gap:10px;margin-top:12px;font-size:12px}.color-picker input{background:0 0;border:0;width:37px;height:28px;padding:0}.brush-grid{display:grid;grid-template-columns:1fr 92px;align-items: end;gap:11px}.range-field{display:grid;color:var(--muted);gap:7px;font-size:11px}input[type=range]{accent-color:var(--teal);width:100%}.brush-grid select{color:var(--cream);background:#10171fba;border:1px solid #6073868a;border-radius:8px;width:100%;padding:7px}.value-badge{color:var(--teal-bright);font-variant-numeric:tabular-nums}.reference-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.url-row{display:flex;gap:7px;margin-top:8px}.url-row input{width:100%;min-width:0}.file-label{display:flex;color:var(--muted);cursor:pointer;border:1px dashed #70889b96;border-radius:8px;justify-content:center;align-items: center;min-height:34px;margin-top:8px;transition:border-color .16s,color .16s;font-size:12px}.file-label:hover{border-color:var(--teal);color:var(--cream)}.file-label input{position:absolute;opacity:0;width:1px;height:1px}.layer-list{display:grid;gap:7px;margin-top:11px}.empty-layers{color:var(--muted);margin:0;padding:8px 0;font-size:11px;line-height:1.5}.reference-layer{display:grid;grid-template-columns:auto 1fr auto;background:#10171f6b;border:1px solid #61738752;border-radius:9px;align-items: center;gap:7px;padding:8px}.reference-layer[draggable=true]{cursor:grab}.reference-layer.is-dragging{opacity:.45}.layer-handle{color:#8294a4;cursor:grab;letter-spacing:-2px;font-size:14px}.layer-main{min-width:0}.layer-name{display:block;overflow:hidden;color:var(--cream);text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:650}.layer-opacity{accent-color:var(--orange);width:100%;height:12px;margin-top:5px}.layer-controls{display:flex;gap:4px}.layer-toggle,.layer-delete{display:grid;border-radius:6px;place-items: center;width:24px;height:24px;font-size:12px}.layer-toggle[aria-pressed=false]{color:#8294a4;background:#ffffff09}.layer-delete{color:#ff9d9d;background:#e15d5d1b}.reference-status{color:var(--yellow);min-height:17px;margin:9px 0 0;font-size:11px;line-height:1.35}.reference-status[data-state=error]{color:#ff9d9d}#spin-preview{display:block;width:calc(var(--spin-size) + 4rem);--spin-size:min(260px,75vw);max-width:100%;margin:0}@media (max-width:1060px){.editor-grid{grid-template-columns:178px minmax(0,1fr)}.tools{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.tool-section{border-bottom:0;border-right:1px solid #68809733}.tool-section:last-child{border-right:0}}@media (max-width:720px){.workbench{padding:10px}.workbench-header{flex-direction:column;align-items: flex-start}.project-settings{justify-content:flex-start}.editor-grid{grid-template-columns:1fr;gap:12px}.frame-rail{min-height:unset}.frame-list{display:flex;overflow-x:auto;max-height:none}.frame-row{flex:0 0 170px}.frame-button{min-width:0}.stage{order:-1;padding:13px}.tools{grid-column:auto;grid-template-columns:1fr}.tool-section{border-bottom:1px solid #68809733;border-right:0}.preview-stage{width:100%}.preview-actions{grid-template-columns:1fr 1fr;width:100%}}.stage-ctls{display:flex;align-items: center;margin-left:auto;padding-left:2rem}#current-frame{margin:0 .25rem}#toggle-preview svg{display:none}#toggle-preview svg.preview-on{display:block}#toggle-preview.previewing svg.preview-on{display:none}#toggle-preview.previewing svg.preview-off{display:block}#preview-panel{display:flex;width:min(100%,calc(min(66vh,620px)*var(--sector-ratio)));aspect-ratio:var(--sector-ratio);flex-direction:column;justify-content:center;align-items: center}#preview-panel[hidden]{display:none}.frame-nav .icon-button{background:0 0;border-radius:4px;height:24px}dialog.capture-frame-dialog{color:var(--cream);background:#17212b;border:1px solid #7890a1;border-radius:16px;width:min(92vw,620px);padding:0;box-shadow:0 26px 90px #0000009c}.capture-frame-dialog::backdrop{backdrop-filter:blur(4px);background:#071017ba}.capture-frame-sheet{display:grid;gap:13px;padding:16px}.capture-frame-sheet header,.capture-frame-sheet footer{display:flex;justify-content:space-between;align-items: center;gap:12px}.capture-frame-sheet h2{margin:0;font-size:18px}.capture-frame-sheet .eyebrow{margin-bottom:3px}#capture-frame-video{display:block;object-fit:contain;background:#070b0f;border:1px solid #5c7183;border-radius:10px;width:100%;max-height:min(62vh,480px)}.capture-frame-status{color:var(--muted);min-height:18px;margin:0;font-size:12px}.capture-frame-status[data-state=error]{color:#ffaaa5}.capture-frame-sheet footer{justify-content:flex-end}button.tips{color:#ff9;background:0 0;border:none;margin-left:.5rem;margin-right:.5rem}#mytips{position-area:top;color:#222;background:#ccc;padding:1rem}#reverse-frames{background:0 0;border:none;margin-left:.25rem}#reverse-frames:active{color:orange}.d-flex{display:flex;align-items: center}div[role=menu] button>svg,summary.d-flex svg{margin-right:2px}#mynext{margin-top:.5rem;font-size:9pt}