:root{--bg:#16161c;--panel:#22222b;--fg:#eee;--accent:#4da3ff}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body{background:var(--bg);height:100%;color:var(--fg);overscroll-behavior:none;margin:0;font:16px system-ui,sans-serif;overflow:hidden}#app{height:100dvh;padding-top:env(safe-area-inset-top);flex-direction:column;display:flex}#top,#bottom{background:var(--panel);align-items:center;gap:6px;padding:6px 8px;display:flex}#top{flex-wrap:wrap;justify-content:space-between}.brand{letter-spacing:.5px;flex:auto;order:1;align-items:center;gap:8px;min-width:0;font-size:20px;font-weight:700;display:flex}.brand img{width:32px;height:32px;image-rendering:pixelated;flex:none}.brand span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#top .row-file{order:2}#top .row-edit{flex:1 0 100%;order:3;justify-content:flex-start}#bottom{padding-bottom:calc(6px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch}#stage{flex:1;min-height:0;position:relative}#stage canvas{touch-action:none;width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0}button{color:var(--fg);background:#33333f;border:2px solid #0000;border-radius:10px;min-width:44px;min-height:44px;padding:0 10px;font-size:18px}button:disabled{opacity:.35}button svg{pointer-events:none;margin:auto;display:block}button.active{border-color:var(--accent)}.row{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.swatches{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.swatch{border:2px solid #0006;min-width:0;height:36px;padding:0}.swatch.active{outline:2px solid var(--accent);border-color:#fff}#toggle{z-index:2;opacity:.75;background:#22222bcc;min-width:40px;min-height:40px;padding:0;position:absolute;top:8px;left:8px}#app.collapsed #top,#app.collapsed #bottom{display:none}@media (orientation:landscape){#app{padding-top:0;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);flex-direction:row}#top{flex-flow:column;justify-content:flex-start;align-items:flex-start;width:104px;padding:6px;overflow-y:auto}.brand{flex:none;order:0;font-size:17px}#top .row-file,#top .row-edit{flex:none;order:0}#bottom{justify-content:flex-start;width:196px;padding:6px;overflow-y:auto}#top .row,#bottom .row{justify-content:flex-start}button{min-width:40px;min-height:40px;padding:0 8px}.swatches{grid-template-columns:repeat(4,1fr)}.swatch{height:30px}}dialog{background:var(--panel);color:var(--fg);border:1px solid #555;border-radius:12px}dialog label{margin:8px 0;display:block}dialog input[type=number]{width:5em;font-size:18px}[hidden]{display:none!important}.toast{left:50%;bottom:calc(120px + env(safe-area-inset-bottom));color:var(--fg);pointer-events:none;opacity:0;z-index:10;text-align:center;background:#000000d9;border-radius:10px;max-width:90vw;padding:8px 14px;font-size:14px;transition:opacity .15s;position:fixed;transform:translate(-50%)}.toast.show{opacity:1}.brand{cursor:pointer}.brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}#aboutDlg{text-align:center;width:min(92vw,360px);padding:0}#aboutDlg::backdrop{background:#0009}#aboutDlg .about{max-height:calc(100dvh - 40px);padding:16px;overflow-y:auto}#aboutDlg img{width:96px;height:96px;image-rendering:pixelated}#aboutDlg h2{margin:8px 0 2px;font-size:24px}.about-sub{opacity:.8;margin:0 0 10px}.about-text{margin:8px 0;font-size:14px;line-height:1.4}.about-links{flex-direction:column;gap:8px;margin:12px 0 6px;display:flex}.about-link{min-height:44px;color:var(--fg);font:inherit;cursor:pointer;background:#33333f;border:2px solid #0000;border-radius:10px;justify-content:center;align-items:center;padding:0 12px;font-size:16px;text-decoration:none;display:flex}.about-link.primary{border-color:var(--accent)}.about-note{opacity:.85;min-height:1.4em;margin:6px 0 10px;font-size:13px}.about-close{width:100%}.about-version{opacity:.6;margin:10px 0 0;font-size:12px}@media (orientation:landscape){#aboutDlg{width:min(92vw,640px)}#aboutDlg .about{grid-template:"head actions"1fr"version actions"/1fr 1fr;column-gap:16px;padding:12px 16px;display:grid}.about-head{grid-area:head}.about-actions{grid-area:actions;align-self:center}.about-version{grid-area:version;align-self:end;margin:6px 0 0}#aboutDlg img{width:64px;height:64px}#aboutDlg h2{margin:4px 0 0;font-size:20px}.about-sub{margin:0 0 6px}.about-text{margin:6px 0;font-size:13px}.about-links{margin-top:0}}#layers{z-index:5;background:var(--panel);max-height:60dvh;padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-top:1px solid #555;border-radius:12px 12px 0 0;flex-direction:column;gap:6px;display:flex;position:fixed;bottom:0;left:0;right:0}.layers-head{justify-content:space-between;align-items:center;font-weight:600;display:flex}.layers-list{flex-direction:column;flex:1;gap:4px;min-height:0;display:flex;overflow-y:auto}.layer-row{background:#2b2b36;border:2px solid #0000;border-radius:10px;align-items:center;gap:6px;min-height:44px;padding:2px 4px;display:flex}.layer-row.active{border-color:var(--accent);background:#33404f}.layer-row canvas,.frame-tile canvas{width:24px;height:24px;image-rendering:pixelated;flex:none}.layer-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.layers-actions{flex-wrap:nowrap}.layers-opacity{align-items:center;gap:8px;display:flex}.layers-opacity input{flex:1;min-width:0;min-height:40px}.layers-opacity output{text-align:right;min-width:2.2em}@media (orientation:landscape){#layers{width:calc(280px + env(safe-area-inset-right));max-height:none;padding-right:calc(8px + env(safe-area-inset-right));border-top:0;border-left:1px solid #555;border-radius:0;padding-bottom:8px;top:0;left:auto}.layers-actions{gap:4px}.layers-actions button{flex:1 1 0;min-width:40px;padding:0}}#frames{z-index:5;background:var(--panel);max-height:60dvh;padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-top:1px solid #555;border-radius:12px 12px 0 0;flex-direction:column;gap:6px;display:flex;position:fixed;bottom:0;left:0;right:0;overflow-y:auto}.frames-head{justify-content:space-between;align-items:center;font-weight:600;display:flex}.frames-strip{flex:none;gap:6px;padding:2px 0;display:flex;overflow-x:auto}.frame-tile{background:#2b2b36;border:2px solid #0000;border-radius:10px;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:2px;min-width:44px;min-height:52px;padding:2px 4px;font-size:12px;display:flex}.frame-tile.active{border-color:var(--accent);background:#33404f}.frames-actions{flex-wrap:nowrap}.frames-actions button[aria-disabled=true]{opacity:.4}@media (orientation:landscape){#frames{width:calc(280px + env(safe-area-inset-right));max-height:none;padding-right:calc(8px + env(safe-area-inset-right));border-top:0;border-left:1px solid #555;border-radius:0;padding-bottom:8px;top:0;left:auto}.frames-actions{gap:4px}.frames-actions button{flex:1 1 0;min-width:40px;padding:0}}#framesExtras{flex-direction:column;gap:8px;display:flex}.fx-play{align-items:center;gap:10px;display:flex}.fx-preview{object-fit:contain;width:72px;height:72px;image-rendering:pixelated;background:repeating-conic-gradient(#3a3a44 0 25%, #2c2c34 0 50%) 0 0 / 12px 12px;border-radius:6px;flex:none}.fx-controls{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.fx-playbtn{justify-content:center;align-items:center;gap:6px;min-height:40px;display:flex}.fx-fps{align-items:center;gap:8px;display:flex}.fx-fps input{flex:1;min-width:0;min-height:40px}.fx-fps output{text-align:right;min-width:1.6em}.fx-onion{align-items:center;gap:8px;min-height:40px;display:flex}.fx-onion input{width:22px;height:22px}.fx-export{flex-direction:column;gap:6px;display:flex}.fx-title{font-weight:600}.fx-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.fx-row label{align-items:center;gap:6px;display:flex}.fx-row select,.fx-row input{min-height:40px}.fx-cols{width:4.5em}.fx-row button{flex:1 1 0;min-height:40px}@media (orientation:landscape){.fx-preview{width:56px;height:56px}}#selbar{background:var(--panel);flex-wrap:wrap;justify-content:center;align-items:center;gap:3px;padding:4px;display:flex}#selbar [hidden]{display:none!important}.selbar-row,.selbar-group{display:contents}#selbar button{flex:none;min-width:40px;min-height:40px;padding:0 3px;font-size:16px}#selbar .selbar-commit{align-items:center;gap:4px;font-size:14px;display:flex}#selbar .selbar-commit span{white-space:nowrap}#selbar .selbar-wandall{padding:0 2px;font-size:10px;line-height:1.15}@media (orientation:portrait){#selbar .selbar-commit span{display:none}}@media (orientation:portrait) and (width<=359px){#selbar{flex-flow:column;align-items:stretch}.selbar-row{justify-content:center;align-items:center;gap:3px;display:flex}.selbar-actions{justify-content:safe center;gap:3px;display:flex;overflow-x:auto}}@media (orientation:landscape){#top{order:0}#selbar{order:1}#stage{order:2}#bottom{order:3}#selbar{flex-flow:column;justify-content:flex-start;align-items:center;gap:4px;width:52px;padding:6px 4px;overflow-y:auto}.selbar-group{flex-direction:column;gap:4px;display:flex}#selbar button{width:40px;padding:0}#selbar .selbar-commit{flex-direction:column;gap:0;min-height:48px;font-size:10px}}#app.collapsed #selbar{padding-bottom:calc(4px + env(safe-area-inset-bottom))}#consoleDlg{width:min(94vw,440px);padding:0}#consoleDlg::backdrop{background:#0009}#consoleDlg .cx{max-height:calc(100dvh - 40px);padding:14px 16px;overflow-y:auto}#consoleDlg h2{margin:0 0 6px;font-size:20px}#consoleDlg select,#consoleDlg input{min-height:40px;font-size:16px}.cx-preview{width:100%;image-rendering:pixelated;background:#16161c;border-radius:6px;margin:8px 0;display:block}.cx-adjust{color:#ffa300;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0;display:flex}.cx-adjust button,.cx-actions button,.cx-issue-actions button{min-height:44px;padding:0 14px}.cx-orig{touch-action:none;-webkit-user-select:none;user-select:none}.cx-note{opacity:.8;margin:4px 0;font-size:13px}.cx-issue{border:1px solid #ffa300;border-radius:8px;margin:8px 0;padding:8px 10px;font-size:14px}.cx-issue p{margin:0 0 8px}.cx-issue-actions{gap:8px;display:flex}.cx-issue-actions button{flex:1 1 0}.cx-issue-actions button.active{border-color:var(--accent)}.cx-actions{gap:8px;margin-top:10px;display:flex}.cx-actions button{flex:1 1 0}#photoDlg{width:min(94vw,440px);padding:0}#photoDlg::backdrop{background:#0009}#photoDlg .ph{max-height:calc(100dvh - 40px);padding:14px 16px;overflow-y:auto}#photoDlg h2{margin:0 0 6px;font-size:20px}#photoDlg select,#photoDlg input{min-height:40px;font-size:16px}.ph-sizes{flex-direction:column;gap:4px;display:flex}.ph-wh{flex-wrap:wrap;gap:12px;display:flex}.ph-presets{gap:6px;display:flex}.ph-presets button{flex:1 1 0;min-height:40px}.ph-preview{object-fit:contain;width:100%;max-height:50vh;image-rendering:pixelated;background:repeating-conic-gradient(#2a2a33 0% 25%,#1c1c23 0% 50%) 0 0/16px 16px;border-radius:6px;margin:8px 0;display:block}.ph-hint{color:#ffa300;margin:4px 0;font-size:13px}.ph-row{margin:4px 0}.ph-row button,.ph-actions button{min-height:44px;padding:0 14px}.ph-orig{touch-action:none;-webkit-user-select:none;user-select:none}.ph-actions{gap:8px;margin-top:10px;display:flex}.ph-actions button{flex:1 1 0}#shareDlg,#linkDlg{width:min(94vw,420px);padding:0}#shareDlg::backdrop,#linkDlg::backdrop{background:#0009}#shareDlg .sh,#linkDlg .sh{max-height:calc(100dvh - 40px);padding:14px 16px;overflow-y:auto}#shareDlg h2,#linkDlg h2{margin:0 0 6px;font-size:20px}.sh-preview{object-fit:contain;width:100%;max-height:40vh;image-rendering:pixelated;background:repeating-conic-gradient(#2a2a33 0% 25%,#1c1c23 0% 50%) 0 0/16px 16px;border-radius:6px;margin:8px 0;display:block}.sh-info{opacity:.85;margin:2px 0;font-size:14px}.sh-status{margin:4px 0 8px;font-size:14px}.sh-url{box-sizing:border-box;width:100%;min-height:40px;margin-bottom:8px;font-size:14px}.sh-actions{flex-direction:column;gap:8px;margin-top:6px;display:flex}.sh-actions button{min-height:44px;padding:0 14px}