:root{color-scheme:dark;--bg:#171b23;--panel:#20252f;--panel-alt:#242a35;--border:#343b49;--muted:#8d98ac;--text:#e4e9f2;--accent:#c4ed7b;--ink:#212c21}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:12px}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--border);background:var(--panel-alt);color:var(--text);border-radius:6px;padding:8px 11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;transition:background .15s,border-color .15s}button:hover{background:#343d4b;border-color:#647084}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}svg{width:16px;height:16px;flex-shrink:0}input,select{border:1px solid var(--border);background:#191e27;border-radius:5px;color:var(--text);padding:8px;min-width:0}input[type=range]{padding:0;accent-color:var(--accent);width:100%;height:5px;cursor:pointer}input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}h2{font-size:12px;font-weight:600;margin:0;letter-spacing:.04em}kbd{font:10px ui-monospace,SFMono-Regular,monospace;background:#2a313e;color:#a9b5c9;border:1px solid #3b4452;border-radius:3px;padding:2px 4px}a{color:inherit;text-decoration:none}.primary{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:650}.primary:hover{background:#d5f6a0;border-color:#d5f6a0}.app-header{height:78px;display:flex;align-items:center;padding:0 25px;gap:30px;border-bottom:1px solid var(--border);background:#1c2029}.brand{display:flex;align-items:center;gap:11px;font-size:24px;font-weight:780;letter-spacing:-1px;line-height:1}.brand-light{font-weight:350;color:var(--accent)}.brand small{display:block;font-size:8px;letter-spacing:3px;font-weight:500;color:var(--muted);margin-top:7px}.project-title{padding-left:27px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:5px}.project-title input{background:transparent;border:0;padding:0;font-weight:600;width:190px;font-size:14px}.save-status{font-size:10px;color:var(--muted)}.header-actions{display:flex;gap:8px;margin-left:auto}.studio{height:calc(100dvh - 114px);min-height:630px;display:grid;grid-template-columns:58px 182px minmax(320px,1fr) 236px;grid-template-rows:minmax(410px,1fr) 220px;margin:0}.tool-rail{grid-column:1;grid-row:1 / 3;border-right:1px solid var(--border);background:#1c212a;padding:17px 8px 12px;display:flex;align-items:center;flex-direction:column;gap:9px}.tool{border-color:transparent;background:transparent;width:39px;height:39px;padding:9px;border-radius:7px;color:#a9b4c6}.tool svg{width:19px;height:19px}.tool.active{background:var(--accent);color:var(--ink);border-color:var(--accent);box-shadow:0 0 18px #c4ed7b12}.rail-divider{width:24px;height:1px;background:var(--border);margin:8px 0}.rail-spacer{flex:1}.palette-panel{grid-column:2;grid-row:1 / 3;padding:23px 17px 15px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:18px}.label-small{font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.08em;color:var(--muted)}.palette-panel .panel-heading{align-items:start;flex-direction:column;gap:8px}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:23px}.swatch{padding:0;height:29px;border:2px solid transparent;border-radius:4px}.swatch:hover{border-color:#ffffffb0}.swatch.selected{border-color:var(--accent);outline:2px solid var(--panel);outline-offset:-4px}.color-editor{display:flex;gap:11px;align-items:center}.color-preview{width:40px;height:40px;border-radius:5px;overflow:hidden;border:1px solid #ffffff25;display:block;flex-shrink:0;background:var(--accent)}.color-editor .label-small{display:block;margin-bottom:4px}.color-editor #hexInput{padding:0;border:none;width:95px;background:transparent;font:12px ui-monospace,monospace}.divider{height:1px;background:var(--border);margin:23px 0}.subheading{margin-bottom:15px}.switch-row{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:9px 0;font-size:11px}.switch-row kbd{margin-left:4px;font-size:8px}.panel-note{color:var(--muted);font-size:10px;line-height:1.9;margin-top:12px}.palette-footer{color:var(--muted);font-size:10px;margin-top:auto;padding-top:30px}.tiny-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:1px;margin-right:6px}.editor{grid-column:3;grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0}.editor-toolbar{height:49px;min-height:49px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 15px;background:#20252f;gap:8px}.file-tab{display:flex;align-items:center;gap:7px;min-width:0;font-size:11px}.file-tab #tabName{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-tab .label-small{margin-left:9px}.toolbar-actions{display:flex;align-items:center;gap:5px}.icon-button{padding:6px;width:29px;height:29px;background:transparent;border-color:transparent;border-radius:4px}.vertical-divider{height:17px;width:1px;background:var(--border);margin:0 7px}#zoomLabel{font:10px ui-monospace,monospace;color:var(--muted);min-width:39px;text-align:center}.canvas-stage{flex:1;min-height:0;min-width:0;overflow:auto;display:grid;place-items:center;position:relative;padding:30px;background-color:#171b23;background-image:radial-gradient(#424b5d77 .7px,transparent .7px);background-size:16px 16px}.stage-watermark{position:absolute;top:13px;left:17px;font:8px ui-monospace,monospace;letter-spacing:2px;color:#68758a80;pointer-events:none}#canvas{display:block;image-rendering:pixelated;box-shadow:0 14px 48px #00000045,0 0 0 1px #626c7d;flex-shrink:0;touch-action:none;cursor:crosshair}.canvas-status{height:29px;min-height:29px;display:flex;align-items:center;justify-content:space-between;background:#1b2029;border-top:1px solid #343b4966;padding:0 13px;font:9px ui-monospace,"Noto Sans JP",monospace;color:var(--muted)}.status-separator{margin:0 9px;color:#555f73}.inspector{grid-column:4;grid-row:1 / 3;background:var(--panel);border-left:1px solid var(--border);min-height:0;overflow:auto}.preview-panel{padding:21px 19px 20px;border-bottom:1px solid var(--border)}.live-label{font:8px ui-monospace,monospace;letter-spacing:.12em;color:var(--accent)}.preview-stage{background:#191e26;border:1px solid #313947;border-radius:7px;display:grid;place-items:center;aspect-ratio:1;overflow:hidden}.preview-stage canvas{width:100%;height:100%;image-rendering:pixelated;object-fit:contain}.preview-controls{display:flex;align-items:center;gap:7px;margin-top:11px;font:10px ui-monospace,monospace;color:var(--muted)}.fps-control{margin-left:auto;white-space:nowrap}.fps-control input{width:42px;padding:4px;font-size:11px;text-align:center}.preview-panel .divider{margin:15px 0}.meta-row{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);margin:9px 0}.meta-row span:last-child{color:#c3cede;font-family:ui-monospace,monospace}.layers-panel{padding:17px 12px}.layers-panel .panel-heading{margin:0 5px 12px}.layer-row{display:flex;align-items:center;gap:9px;border:1px solid transparent;border-radius:5px;padding:8px 4px;margin-bottom:4px}.layer-row.selected{border-color:#6f865350;background:#c4ed7b10}.layer-row .layer-name{flex:1;text-align:left;justify-content:flex-start;padding:2px 0;overflow:hidden;min-width:0;border:0;background:transparent;font-size:11px}.layer-row .layer-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-thumb{width:28px;height:28px;image-rendering:pixelated;flex-shrink:0;background-color:#323947;background-image:linear-gradient(45deg,#444e5c 25%,transparent 25%),linear-gradient(-45deg,#444e5c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#444e5c 75%),linear-gradient(-45deg,transparent 75%,#444e5c 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;border:1px solid #ffffff20}.layer-index{font:9px ui-monospace,monospace;color:#6a768b;margin-right:5px}.layer-actions{display:flex;gap:5px;border-top:1px solid var(--border);padding-top:8px}.layer-actions button:last-child{margin-left:auto}.danger{color:#c99399}.opacity-control{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:9px;color:var(--muted);margin:18px 5px}.opacity-control input{width:100%;min-width:20px}.timeline{grid-column:3;grid-row:2;min-width:0;background:#20252f;border-top:1px solid var(--border);display:flex;flex-direction:column}.timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px 10px;flex-wrap:wrap}.timeline-title{display:flex;align-items:center;gap:11px}.transport{display:flex;align-items:center;gap:3px}.play-button{background:#c4ed7b15;color:var(--accent);border-color:#c4ed7b33;padding:5px 12px;font-size:10px;min-width:70px}.play-button svg{width:12px}.duration-control{font-size:10px;color:var(--muted);white-space:nowrap}.duration-control input{width:53px;padding:4px 5px;font-size:10px}.timeline-actions{display:flex;gap:5px}.timeline-actions button{font-size:10px;padding:5px 8px}.timeline-actions svg{width:13px;height:13px}.frame-strip{display:flex;gap:10px;overflow-x:auto;padding:5px 16px 9px;min-height:132px;flex:1;align-items:start}.frame-card{position:relative;flex-shrink:0;display:flex;flex-direction:column;gap:0;border:1px solid #3c4554;background:#252c37;border-radius:5px;padding:0;min-width:68px;overflow:hidden}.frame-card:hover{background:#303b49;border-color:#819078}.frame-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px #c4ed7b20}.frame-card .frame-number{width:100%;display:flex;justify-content:space-between;padding:3px 7px;font:9px ui-monospace,monospace;color:#a9b5c8;background:#1c222c}.frame-card.selected .frame-number{color:var(--accent);background:#c4ed7b12}.frame-card canvas{width:96px;height:96px;image-rendering:pixelated;align-self:center;margin:1px 6px}.frame-duration{font:8px ui-monospace,monospace;color:#8c98ad;padding:0 0 4px}.frame-card.selected:after{content:'';position:absolute;right:5px;top:6px;width:4px;height:4px;border-radius:1px;background:var(--accent)}.timeline-footer{display:flex;justify-content:space-between;align-items:center;padding:5px 16px 9px;color:#8490a4;font-size:9px;gap:8px}.timeline-footer>span:last-child{white-space:nowrap}.timeline-footer kbd{font-size:8px}.text-button{border:0;padding:3px 5px;background:transparent;color:var(--muted);font-size:10px}.app-footer{height:36px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding:0 20px;color:#8f9cb0;font-size:8px;letter-spacing:.1em}.muted{color:#667388;letter-spacing:0;margin-left:8px}.timeline-footer .text-button{font-size:8px;margin-left:4px}dialog{border:1px solid #4b5667;border-radius:13px;box-shadow:0 20px 100px #0008;background:#232a35;color:var(--text);padding:30px;width:440px;max-width:calc(100vw - 30px);max-height:90dvh;overflow:auto}dialog::backdrop{background:#10151bcc;backdrop-filter:blur(3px)}dialog h2{font-size:22px;letter-spacing:-.03em;margin:10px 0 12px}dialog p{color:var(--muted);font-size:12px;line-height:1.8}dialog label{display:flex;flex-direction:column;gap:8px;margin:20px 0 0;color:#aab7cc;font-size:11px}dialog label input{width:100%;padding:11px}.dialog-kicker{font:9px ui-monospace,monospace;letter-spacing:3px;color:var(--accent)}.form-row{display:flex;gap:14px}.form-row label{flex:1}.size-presets{display:flex;gap:6px;margin-top:13px}.size-presets button{flex:1;font-size:10px;padding:7px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:25px}.dialog-note{font-size:10px!important;line-height:1.8!important;margin-top:17px}.export-scale{flex-direction:row!important;justify-content:space-between;align-items:center;margin-bottom:18px}.export-scale select{width:165px}.export-option{width:100%;padding:16px 12px;justify-content:flex-start;margin:9px 0;text-align:left;white-space:normal;gap:13px}.export-option span:nth-child(2){flex:1}.export-option strong{display:block;font-size:12px;font-weight:600}.export-option small{display:block;color:var(--muted);font-size:9px;margin-top:6px;line-height:1.5}.export-format{font:10px ui-monospace,monospace;color:var(--accent);background:#c4ed7b12;padding:9px 6px;border-radius:4px}.help-steps{padding-left:21px}.help-steps li{padding:8px 0 8px 7px;color:var(--accent)}.help-steps strong{display:block;color:var(--text);font-size:12px}.help-steps span{display:block;color:var(--muted);line-height:1.8;font-size:11px;margin-top:5px}.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;color:var(--muted);font-size:10px;margin-top:22px}.shortcut-grid kbd{margin-right:4px}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{background:#485266;border-radius:4px}::-webkit-scrollbar-track{background:#20252c}
@media(min-width:1450px){.studio{grid-template-columns:64px 196px minmax(500px,1fr) 266px}.palette{gap:8px}.swatch{height:31px}.preview-panel{padding:24px}.timeline-toolbar{padding-top:15px}.frame-card{min-width:78px}.frame-card canvas{width:60px;height:60px}.frame-strip{gap:12px}.timeline{height:194px}}
@media(max-width:1150px){.studio{grid-template-columns:51px 158px minmax(300px,1fr) 210px;grid-template-rows:minmax(410px,1fr) 230px}.palette-panel{padding:20px 12px}.app-header{padding:0 17px;gap:22px}.header-actions{gap:5px}.header-actions button{padding:7px 9px;font-size:11px}.project-title{padding-left:20px}.project-title input{width:155px}.timeline-title .label-small{display:none}.timeline-toolbar{gap:6px;padding:10px}.timeline-footer{flex-direction:column;align-items:start;gap:5px;padding-bottom:10px}.preview-panel{padding:20px 13px}.file-tab .label-small{display:none}}
@media(max-width:850px){.app-header{height:auto;min-height:96px;flex-wrap:wrap;padding:13px 16px;gap:13px}.brand{font-size:21px}.project-title{border:0;padding-left:0;margin-left:auto}.header-actions{width:100%;margin:0}.header-actions button{flex:1;font-size:10px}.studio{height:auto;min-height:0;grid-template-columns:49px minmax(0,1fr) 192px;grid-template-rows:480px auto auto}.palette-panel{grid-column:2 / 4;grid-row:3;display:grid;grid-template-columns:140px 1fr 130px;gap:12px;border-top:1px solid var(--border);padding:15px}.palette-panel .panel-heading{grid-column:1;grid-row:1;margin:0}.palette{grid-column:2;grid-row:1 / 3;grid-template-columns:repeat(12,1fr);align-self:center;margin:0;gap:5px}.swatch{height:26px}.color-editor{grid-column:1;grid-row:2}.palette-panel>.divider,.palette-footer,.panel-note{display:none}.subheading{grid-column:3;grid-row:1;margin-bottom:0}.switch-row{grid-column:3;margin:0;font-size:9px}.palette-panel .switch-row:nth-of-type(1){grid-row:2}.palette-panel .switch-row:nth-of-type(2){grid-row:3}.tool-rail{grid-row:1 / 4}.editor{grid-column:2}.inspector{grid-column:3;grid-row:1 / 3}.timeline{grid-column:2;grid-row:2;min-height:225px}.timeline-toolbar{justify-content:flex-start;gap:10px}.timeline-title{width:100%}.timeline-actions{margin-left:auto}.canvas-stage{padding:20px}.app-footer{font-size:7px}.timeline-footer>span:last-child{white-space:normal;line-height:2}.editor-toolbar{padding:0 8px}.toolbar-actions{gap:0}.toolbar-actions .vertical-divider{margin:0 3px}}
@media(max-width:580px){.studio{grid-template-columns:45px minmax(0,1fr);grid-template-rows:415px auto auto auto}.inspector{grid-column:2;grid-row:3;display:grid;grid-template-columns:1fr 1fr;overflow:visible;border-top:1px solid var(--border);border-left:0}.preview-panel{border:0;border-right:1px solid var(--border);padding:15px 12px}.preview-stage{max-width:150px;margin:auto}.layers-panel{padding:14px 8px}.palette-panel{grid-column:2;grid-row:4;grid-template-columns:105px 1fr;padding:12px;gap:10px}.palette{grid-template-columns:repeat(6,1fr);grid-row:1 / 4}.palette-panel .subheading,.palette-panel .switch-row{grid-column:1}.palette-panel .subheading{grid-row:3}.palette-panel .switch-row:nth-of-type(1){grid-row:4}.palette-panel .switch-row:nth-of-type(2){grid-row:5}.tool-rail{grid-row:1 / 5;padding:12px 4px}.tool{width:35px;height:35px}.editor{grid-column:2}.timeline{grid-column:2}.toolbar-actions .vertical-divider{display:none}.file-tab{max-width:85px;gap:3px}.file-tab #tabName{font-size:10px}.editor-toolbar{padding:0 7px}.timeline-toolbar{padding:10px;gap:8px}.transport{width:100%;justify-content:flex-start}.timeline-actions{margin-left:0}.timeline-title{width:auto}.timeline-footer{font-size:8px;padding-left:10px}.app-footer .muted{display:none}.header-actions button svg{width:13px}.header-actions button{padding:8px 4px;font-size:9px}.save-status{font-size:8px}.project-title input{width:135px}.preview-controls{gap:2px;font-size:9px}.fps-control input{width:35px}.panel-heading{margin-bottom:12px}.panel-heading h2{font-size:11px}.preview-panel .panel-heading{gap:5px}.live-label{font-size:7px}.opacity-control{grid-template-columns:1fr auto;gap:7px}.opacity-control input{grid-row:2;grid-column:1 / 3}.layer-row{gap:4px}.layer-thumb{width:22px;height:22px}.layer-name span{font-size:10px}.color-editor #hexInput{width:68px;font-size:10px}.color-preview{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){button,}
.selection-toolbar{height:37px;min-height:37px;display:flex;align-items:center;gap:5px;padding:4px 12px;border-bottom:1px solid var(--border);background:#1d232d;overflow-x:auto;white-space:nowrap}.selection-toolbar>span:first-child{font:9px ui-monospace,monospace;color:var(--muted);min-width:68px}.selection-toolbar button{padding:4px 6px;font-size:9px;min-width:27px;flex-shrink:0;height:25px;background:transparent;border-color:transparent}.selection-toolbar button:hover{background:#354051;border-color:#647084}.selection-toolbar .vertical-divider{flex-shrink:0;margin:0 4px}.selection-toolbar svg{width:14px;height:14px}.layer-lock{width:23px;height:25px;padding:4px;color:#65758b;flex-shrink:0}.layer-lock.locked{color:var(--accent)}.direction-control{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:10px;margin-top:14px}.direction-control select{padding:4px;font-size:10px;max-width:125px}.layer-row .layer-name{gap:6px}.layer-row{gap:5px}
@media(max-width:580px){.selection-toolbar{padding:4px 7px;gap:2px}.selection-toolbar>span:first-child{min-width:58px;font-size:8px}.direction-control{font-size:8px;gap:3px}.direction-control select{font-size:8px;max-width:102px}.layer-row .icon-button{width:21px;padding:3px}.layer-row .icon-button svg{width:13px}.layer-row .layer-name{gap:4px}.layer-thumb{width:18px;height:18px}.layers-panel{padding:14px 6px}.layer-row .layer-name span{font-size:9px}}

/* Canvas content has positive scroll bounds at every zoom level. */
.canvas-stage{display:block;place-items:normal;padding:0;touch-action:none;overscroll-behavior:contain;overflow-anchor:none;user-select:none;-webkit-user-select:none}.canvas-space{position:relative;min-width:100%;min-height:100%}#canvas{position:absolute}.stage-watermark{z-index:1}

#coord:not(:empty){margin-left:9px}.transport{flex-wrap:wrap;row-gap:7px;min-width:0}.duration-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.duration-apply{font-size:10px;padding:5px 8px}

.footer-actions{display:flex;align-items:center;gap:9px}.footer-actions [hidden]{display:none}@media(max-width:580px){.footer-actions{gap:4px}.footer-actions .text-button{font-size:9px}}

.touch-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 12px;min-height:37px;border-bottom:1px solid var(--border);background:#1d232d;color:var(--muted);font-size:10px}.touch-toolbar button{padding:5px 10px;font-size:10px;min-height:28px}.touch-toolbar button[aria-pressed="true"]{color:var(--accent);border-color:#c4ed7b66;background:#c4ed7b15}@media(max-width:580px){.touch-toolbar{padding:4px 7px;font-size:9px}.touch-toolbar button{font-size:9px}}

#canvasRender{position:absolute;pointer-events:none;image-rendering:pixelated;display:block}.touch-controls{display:flex;align-items:center;gap:5px}.canvas-focus{overflow:hidden}.canvas-focus>.app-header,.canvas-focus>.app-footer{display:none}.canvas-focus .studio{position:fixed;inset:0;z-index:10;width:100%;height:100dvh;min-height:0;display:grid;grid-template-columns:49px minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:var(--bg)}.canvas-focus .tool-rail{grid-column:1;grid-row:1;overflow-y:auto}.canvas-focus .editor{grid-column:2;grid-row:1}.canvas-focus .palette-panel,.canvas-focus .inspector,.canvas-focus .timeline{display:none}.canvas-focus .size-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.size-presets button{padding:7px 2px;font-size:9px}.preset-heading{margin:18px 0 8px;font-size:11px!important}.landscape-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.landscape-presets button{padding:8px 2px;font-size:10px}@media(max-width:580px){.touch-toolbar{gap:4px}.touch-toolbar button{padding:5px 6px;gap:3px}.touch-toolbar svg{width:12px;height:12px}.touch-controls{gap:4px}.canvas-focus .studio{grid-template-columns:45px minmax(0,1fr)}}

.touch-toolbar{flex-wrap:wrap}.touch-controls{margin-left:auto}.touch-toolbar .touch-mode-switch{border:0;background:transparent;padding:0;min-height:36px;gap:7px;flex-shrink:0}.touch-mode-switch>span:first-child,.touch-mode-switch>span:last-child{color:#778296;font-weight:400;transition:color .15s}.touch-mode-switch[data-mode="draw"] .touch-draw-label,.touch-mode-switch[data-mode="pan"] .touch-pan-label{color:var(--accent);font-weight:600}.touch-switch-track{position:relative;width:34px;height:20px;flex-shrink:0;border:1px solid #6d8654;border-radius:12px;background:#c4ed7b19}.touch-switch-thumb{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 1px 3px #0005;transition:transform .15s}.touch-mode-switch[data-mode="pan"] .touch-switch-thumb{transform:translateX(14px)}@media(max-width:580px){.touch-toolbar .touch-mode-switch{gap:5px;font-size:9px}}@media(prefers-reduced-motion:reduce){.touch-switch-thumb,.touch-mode-switch>span{transition:none}}

.rail-color{position:relative;display:block;width:30px;height:30px;flex-shrink:0;margin:0 0 3px;border:1px solid #ffffff50;border-radius:5px;background:#a1e7a2;box-shadow:0 0 0 3px #11182766;cursor:pointer}.rail-color:focus-within{outline:2px solid var(--accent);outline-offset:3px}.export-sheet-group{border:1px solid var(--border);border-radius:6px;background:var(--panel-alt);margin:9px 0}.export-sheet-group #exportSheet{margin:0;border:0;background:transparent}.export-sheet-group .export-scale{margin:0;padding:0 12px 14px;gap:8px;flex-wrap:wrap}.export-sheet-group .export-scale select{max-width:100%}

.rail-color,.color-preview{padding:0}.palette-controls{display:flex;gap:5px;margin-bottom:12px}.palette-controls select{width:0;flex:1;font-size:10px;padding:6px 3px}.palette-controls button{padding:6px;font-size:9px}.palette-dialog{width:460px}.palette-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 16px}.palette-dialog-heading select{min-width:0;flex:1;padding:9px;font-size:12px}.palette-dialog-heading>span{color:var(--muted);font-size:10px;white-space:nowrap}.palette-dialog-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.palette-dialog-grid .swatch{width:100%;height:36px}.palette-selection{display:flex;gap:9px;align-items:center;margin-top:17px}.palette-selection>span{width:28px;height:28px;border:1px solid #ffffff40;border-radius:4px}.palette-selection code{font-size:12px;color:var(--muted)}.palette-selection button{margin-left:auto;font-size:11px}.palette-editor{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.palette-editor[hidden]{display:none}.palette-editor-heading{display:flex;justify-content:space-between;gap:8px;font-size:11px}.palette-editor-heading>span{color:var(--muted);font-size:10px}.palette-draft{display:flex;gap:13px;align-items:center;margin:15px 0}.palette-draft>span{width:55px;height:55px;border:1px solid #ffffff40;border-radius:7px;flex-shrink:0}.palette-dialog .palette-draft label{margin:0;gap:5px;flex:1}.palette-draft input{font:14px ui-monospace,monospace}.hsv-control{display:grid;grid-template-columns:28px minmax(0,1fr) 59px 11px;align-items:center;gap:9px;margin:17px 0}.palette-dialog .hsv-control label{margin:0;display:block;font-size:11px}.hsv-control input[type=number]{padding:5px 3px;width:100%;font-size:11px}.hsv-control>span{font-size:10px;color:var(--muted)}.hsv-control .hsv-range{appearance:none;height:12px;min-width:0;border:0;border-radius:6px;padding:0}.hsv-control .hue-range{background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}.hsv-range::-webkit-slider-thumb{appearance:none;width:19px;height:19px;border:2px solid #fff;border-radius:50%;background:#303848;box-shadow:0 1px 5px #0005;cursor:pointer}.hsv-range::-moz-range-thumb{width:15px;height:15px;border:2px solid #fff;border-radius:50%;background:#303848;cursor:pointer}.palette-error{color:#ffa1ab!important;font-size:11px!important;margin:5px 0 10px;min-height:0}.palette-error:empty{display:none}#paletteSaveColor{width:100%;font-size:11px}.palette-dialog .palette-name-label{margin:18px 0 0;gap:6px}.palette-name-label input{padding:8px;font-size:11px}.palette-backup-actions{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}.palette-backup-actions button{font-size:10px;flex:1}.palette-storage-note{font-size:10px!important;line-height:1.6!important;margin-bottom:0}.palette-dialog .dialog-actions{margin-top:16px;align-items:center;justify-content:space-between;gap:8px}.palette-dialog .dialog-actions .text-button{font-size:9px;white-space:normal;text-align:left}.swatch{flex-shrink:0}
@media(max-width:850px){.palette-controls{grid-column:2 / 4;grid-row:1;margin:0}.palette-panel .palette{grid-column:2 / 4;grid-row:2 / 5;grid-template-columns:repeat(12,minmax(0,1fr))}.palette-panel .subheading{grid-column:1;grid-row:3}.palette-panel .switch-row{grid-column:1}.palette-panel .switch-row:nth-of-type(1){grid-row:4}.palette-panel .switch-row:nth-of-type(2){grid-row:5}}
@media(max-width:580px){.palette-panel .panel-heading{grid-column:1 / 3;grid-row:1}.palette-controls{grid-column:1 / 3;grid-row:2}.palette-panel .color-editor{grid-column:1;grid-row:3}.palette-panel .palette{grid-column:2;grid-row:3 / 7;grid-template-columns:repeat(6,minmax(0,1fr))}.palette-panel .subheading{grid-column:1;grid-row:4}.palette-panel .switch-row:nth-of-type(1){grid-row:5}.palette-panel .switch-row:nth-of-type(2){grid-row:6}.palette-dialog{padding:23px 20px}.palette-dialog-heading{gap:6px}.palette-dialog-heading select{font-size:10px;padding:8px 4px}.palette-dialog-heading>span{font-size:9px}.palette-dialog-grid{gap:7px}.palette-dialog-grid .swatch{height:32px}.hsv-control{gap:6px;grid-template-columns:27px minmax(0,1fr) 51px 9px}}
.palette-storage-note.palette-save-failed{color:#ffa1ab}

/* Tool settings remain available from the rail, including the wide canvas view. */
.tool{position:relative}.tool-setting-indicator{position:absolute;bottom:2px;left:0;right:0;text-align:center;font:7px ui-monospace,"Noto Sans JP",monospace;line-height:1;color:inherit;pointer-events:none}.tool[aria-haspopup="dialog"] svg{transform:translateY(-3px)}
.tool-settings-dialog{width:410px}.tool-settings-dialog h2{font-size:20px}.brush-size-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:20px}.brush-size-option{display:flex;flex-direction:column;gap:8px;padding:12px 4px;font:11px ui-monospace,monospace;min-height:76px}.brush-size-option[aria-pressed="true"],.fill-mode-options button[aria-checked="true"]{border-color:var(--accent);background:#c4ed7b18;color:var(--accent)}.brush-size-preview{height:26px;width:100%;display:grid;place-items:center}.brush-size-preview>span{display:block;background:currentColor;image-rendering:pixelated}
.fill-mode-options{display:flex;flex-direction:column;gap:9px;margin-top:18px}.fill-mode-options button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;white-space:normal;padding:13px;gap:6px}.fill-mode-options strong{font-size:12px}.fill-mode-options small{font-size:10px;line-height:1.7;color:var(--muted)}.replace-scope{margin-top:18px;border-top:1px solid var(--border);padding-top:2px}.replace-scope label{margin-top:14px}.replace-scope select{width:100%;padding:9px}.replace-scope p{font-size:10px;margin-bottom:0}
[hidden].brush-size-choices,[hidden].replace-scope,[hidden]#fillSettings{display:none}.background-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.background-presets button{padding:10px 4px;font:11px ui-monospace,monospace}.background-presets button[aria-pressed="true"],.size-presets button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:#c4ed7b18}.template-hint{font-size:10px!important;line-height:1.7!important}.background-templates{margin-top:18px;border-top:1px solid var(--border);padding-top:1px}#newForm .form-row{gap:9px}#newForm .form-row label{min-width:0}#newForm .form-row input{padding:9px 5px;text-align:center}
@media(max-width:580px){.tool-settings-dialog{padding:23px 18px}.brush-size-choices{gap:6px}.brush-size-option{font-size:10px;padding:10px 2px}.tool-settings-dialog h2{font-size:19px}#newDialog{padding:23px 18px}.tool-setting-indicator{font-size:6px}.background-presets button{font-size:10px}}

.background-presets button{flex-direction:column;gap:5px;white-space:normal}.background-presets small{font:9px ui-monospace,"Noto Sans JP",monospace;color:var(--muted);line-height:1.5}#newSizeNote{white-space:pre-line}.export-size-note{font-size:11px!important;color:var(--text);margin-top:0}.export-scale:has(#exportScale){flex-wrap:wrap;gap:8px}.export-scale #exportScale{width:235px;max-width:100%}

.browser-saves-dialog{width:650px}.browser-save-warning{padding:12px;border:1px solid #c4ed7b44;border-radius:6px;font-size:11px;line-height:1.8}.new-browser-save{display:flex;align-items:flex-end;gap:10px;margin-top:18px}.new-browser-save label{margin:0;flex:1;min-width:0}.new-browser-save input{padding:10px}.new-browser-save button{min-height:37px}.browser-save-hint{font-size:10px!important;line-height:1.7!important}.browser-save-list-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:14px;margin-top:18px;color:var(--muted);font-size:11px}.browser-save-list{display:flex;flex-direction:column;gap:10px}.browser-save-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:12px;border:1px solid var(--border);border-radius:7px;background:#1c222c}.browser-save-preview{width:64px;height:64px;display:grid;place-items:center;background-color:#252c36;background-image:conic-gradient(#343c48 25%,transparent 0 50%,#343c48 0 75%,transparent 0);background-size:12px 12px;border-radius:4px;overflow:hidden}.browser-save-preview img{max-width:100%;max-height:100%;image-rendering:pixelated}.browser-save-info{min-width:0;display:flex;flex-direction:column;gap:7px}.browser-save-info strong{font-size:13px;overflow-wrap:anywhere;white-space:pre-wrap}.browser-save-info span{font-size:10px;color:var(--muted)}.browser-save-actions{grid-column:2;display:flex;gap:7px;flex-wrap:wrap}.browser-save-actions button{font-size:11px;padding:7px 12px}.browser-save-actions .text-button{margin-left:auto}.browser-save-empty{padding:22px 12px;text-align:center;border:1px dashed var(--border);border-radius:7px;font-size:11px}.browser-save-confirm{border:1px solid var(--accent);border-radius:6px;padding:12px;margin-top:15px}.browser-save-confirm[hidden]{display:none}.browser-save-confirm p{margin:0 0 12px;color:var(--text);overflow-wrap:anywhere}.browser-save-confirm>div{display:flex;justify-content:flex-end;gap:8px}#browserSaveStatus{font-size:11px;margin:12px 0}#browserSaveStatus:empty{display:none}#browserSaveStatus.save-error{color:#ffa1ab}.browser-saves-dialog .dialog-actions{position:sticky;bottom:-30px;background:#232a35;padding-top:12px;padding-bottom:4px}.header-actions button{min-width:0}@media(min-width:851px) and (max-width:1050px){.app-header{height:112px;flex-wrap:wrap;gap:8px;padding:10px 17px}.app-header .project-title{margin-left:auto}.header-actions{width:100%;margin:0}.header-actions button{flex:1}.studio{height:calc(100dvh - 148px)}}@media(max-width:580px){.header-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.header-actions #browserSavesBtn{grid-column:1 / 3}.browser-saves-dialog{padding:23px 18px}.new-browser-save{flex-direction:column;align-items:stretch;gap:9px}.new-browser-save button{align-self:flex-end}.browser-save-row{padding:10px;gap:9px;grid-template-columns:48px minmax(0,1fr)}.browser-save-preview{width:48px;height:48px}.browser-save-info strong{font-size:12px}.browser-save-info span{font-size:9px}.browser-save-actions{grid-column:1 / 3}.browser-save-confirm>div{flex-wrap:wrap}.browser-saves-dialog .dialog-actions{bottom:-23px}}

#browserSavesBtn{border-color:#c4ed7b66;color:var(--accent)}#saveBtn{border-color:#91bfff66;color:#91bfff}.local-saves-dialog{--accent:#91bfff}.local-save-intro,.local-folder-panel{border:1px solid #91bfff44;padding:12px;border-radius:6px;background:#91bfff08;font-size:11px!important;line-height:1.8!important}.local-folder-panel p{margin:0 0 10px;font-size:11px;overflow-wrap:anywhere}.local-folder-panel>div{display:flex;flex-wrap:wrap;gap:8px}.local-folder-panel button{font-size:11px}.local-folder-panel button[hidden],#downloadLocalSave[hidden]{display:none}#downloadLocalSave{margin-top:10px;color:#91bfff}.local-filename{overflow-wrap:anywhere}#localSaveStatus{font-size:11px;margin:12px 0}#localSaveStatus:empty{display:none}#localSaveStatus.save-error{color:#ffa1ab}.local-saves-dialog .dialog-kicker{color:#91bfff}@media(max-width:580px){.header-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.header-actions #browserSavesBtn{grid-column:auto}.header-actions button{font-size:9px}}
.local-saves-dialog .primary:hover{background:#b9d6ff;border-color:#b9d6ff}

/* Cloud saves share the local-library layout, with a separate destination color. */
#driveSavesBtn{color:#c4b2ff;border-color:#c4b2ff55}
.drive-saves-dialog{--accent:#c4b2ff}.drive-saves-dialog .dialog-kicker{color:#c4b2ff}
.drive-saves-dialog .primary:hover{background:#dfd5ff;border-color:#dfd5ff}
.drive-save-intro,.drive-account-panel,.drive-folder-panel{border:1px solid #c4b2ff44;padding:12px;border-radius:6px;background:#c4b2ff08;font-size:11px!important;line-height:1.8!important}
.drive-account-panel,.drive-folder-panel{margin-top:12px}.drive-account-panel p,.drive-folder-panel p{margin:0 0 10px;font-size:11px;overflow-wrap:anywhere}
.drive-account-panel>div{display:flex;gap:8px;flex-wrap:wrap}.drive-account-panel button,.drive-folder-panel button{font-size:11px}
.drive-folder-actions{display:flex;gap:8px;flex-wrap:wrap}.drive-folder-actions button{max-width:100%;min-height:38px}.drive-new-folder{margin-top:14px;padding-top:14px;border-top:1px solid #c4b2ff44}.drive-new-folder label{font-size:11px}.drive-new-folder input{margin:5px 0 12px;padding:10px}.drive-new-folder .browser-save-hint{margin-top:10px}.drive-folder-confirm{justify-content:flex-end}
.drive-account-panel .drive-setup-note{margin:10px 0 0;color:var(--muted)}
.drive-saves-dialog [hidden]{display:none!important}.drive-saves-dialog button{white-space:normal;line-height:1.6}
#driveSaveStatus{font-size:11px;line-height:1.8;margin:12px 0;overflow-wrap:anywhere}#driveSaveStatus:empty{display:none}#driveSaveStatus.save-error{color:#ffa1ab}
.drive-preview-note{font-size:9px;color:var(--muted);padding:3px;text-align:center}
.drive-import-actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.drive-import-actions button{color:#c4b2ff;border-color:#c4b2ff66;font-size:11px;max-width:100%;min-height:40px}
@media(min-width:851px) and (max-width:1280px){.app-header{height:auto;min-height:112px;flex-wrap:wrap;gap:10px 20px}.header-actions{max-width:100%;flex-wrap:wrap}.project-title{margin-left:auto}}
@media(max-width:580px){.header-actions #exportBtn{grid-column:1 / -1}.drive-import-actions{flex-direction:column}.drive-import-actions button{width:100%;font-size:10px}.drive-saves-dialog .new-browser-save{flex-wrap:wrap}.drive-saves-dialog .new-browser-save label,.drive-saves-dialog .new-browser-save>button{width:100%;flex-basis:100%}}

/* Palette labels are UI only; exports and preview use the original pixels. */
.swatch-number{font:600 11px ui-monospace,monospace;pointer-events:none}.swatch-number[hidden]{display:none}
.layer-actions{border-top:0;border-bottom:1px solid var(--border);padding:0 2px 9px;margin-bottom:7px;gap:8px}.layer-drag-note{font-size:9px;line-height:1.6;color:var(--muted);margin:0 3px 8px}
#layerList{max-height:420px;overflow:auto;overscroll-behavior:contain}.layer-row{gap:3px;padding:5px 2px;touch-action:none;user-select:none}.layer-row .icon-button{width:24px;flex-shrink:0;padding:4px}.layer-handle{padding:0;border:0;background:transparent;color:var(--muted);font-size:17px;flex-shrink:0;width:15px;cursor:grab}.layer-select{background:transparent;padding:0;border:0;flex-shrink:0}.layer-row .layer-name{white-space:nowrap;text-overflow:ellipsis;display:block;padding:6px 3px;cursor:text}.layer-name-input{width:0;flex:1;font-size:11px;padding:6px 3px}.frame-card{touch-action:none;user-select:none}.frame-card canvas{pointer-events:none}.sorting,.sorting *{cursor:grabbing!important}.sort-origin{opacity:.45}.sort-target{outline:2px solid var(--accent);outline-offset:-2px;background:#c4ed7b25!important}
.focus-dock[hidden],.focus-panel-host[hidden]{display:none}.focus-dock{position:fixed;right:10px;top:144px;z-index:25;max-width:calc(100vw - 68px);filter:drop-shadow(0 6px 15px #0006)}.focus-tabs{display:flex;gap:4px;justify-content:flex-end;background:#20252ff0;border:1px solid var(--border);padding:5px;border-radius:8px}.focus-tabs button{font-size:10px;padding:9px 7px}.focus-tabs button[aria-expanded=true]{border-color:var(--accent);color:var(--accent);background:#c4ed7b15}.focus-panel-host{margin-top:5px;background:var(--panel);border:1px solid var(--border);border-radius:8px;width:320px;max-width:100%;max-height:calc(100dvh - 205px);overflow:auto;overscroll-behavior:contain}.canvas-focus .focus-panel-host .timeline{display:flex;height:auto;min-height:260px;width:auto}.focus-panel-host .focus-mounted{grid-column:auto;grid-row:auto;border:0}.focus-panel-host .timeline-toolbar{padding:12px;gap:10px}.focus-panel-host .timeline-title{width:100%}.focus-panel-host .timeline-footer{flex-direction:column;align-items:start;line-height:1.7}.focus-panel-host .preview-stage{width:192px;max-width:100%;margin:auto}.focus-panel-host #layerList{max-height:calc(100dvh - 335px)}
@media(max-width:850px){.palette-panel .switch-row:nth-of-type(3){grid-column:1;grid-row:6}.palette-panel .palette{grid-row:2 / 7}}
@media(max-width:580px){.palette-panel .switch-row:nth-of-type(3){grid-row:7}.palette-panel .palette{grid-row:3 / 8}.canvas-focus .editor{padding-bottom:45px}.focus-dock{top:auto;bottom:0;left:45px;right:0;max-width:none;display:flex;flex-direction:column-reverse;filter:drop-shadow(0 -5px 12px #0006)}.focus-tabs{border-radius:0;padding:4px;justify-content:space-around;gap:3px}.focus-tabs button{flex:1;padding:8px 3px;font-size:10px}.focus-panel-host{margin:0;width:100%;max-height:min(55dvh,380px);border-radius:8px 8px 0 0}.focus-panel-host #layerList{max-height:180px}.focus-panel-host .timeline-footer{font-size:8px;padding:5px 10px}.focus-panel-host .preview-panel{padding:14px}.focus-panel-host .preview-stage{width:144px}.focus-panel-host .layers-panel{padding:12px}.palette-backup-actions button{flex-basis:45%;white-space:normal;line-height:1.6}}

.local-import-actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}.local-import-actions button{color:#91bfff;border-color:#91bfff66;font-size:11px;white-space:normal;text-align:center;line-height:1.7;max-width:100%;min-height:40px}@media(max-width:580px){.local-import-actions button{width:100%;font-size:10px}}

/* This mascot GIF is exported from the same editable sample project. */
.brand{flex-shrink:0}.brand-mascot{width:64px;height:64px;display:grid;place-items:center;flex-shrink:0}.brand-mascot img{display:block;width:64px;height:64px;image-rendering:pixelated;pointer-events:none}.brand-wordmark{white-space:nowrap}.brand-light{font-weight:780}
.samples-dialog{width:490px}.sample-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.sample-choice{flex-direction:column;gap:10px;padding:16px 12px;white-space:normal;text-align:left;align-items:stretch;border:1px solid var(--border)}.sample-choice[aria-pressed="true"]{border-color:var(--accent);background:#c4ed7b10}.sample-choice canvas{width:128px;height:128px;align-self:center;image-rendering:pixelated;background-color:#191e26;background-image:linear-gradient(45deg,#323947 25%,transparent 25%),linear-gradient(-45deg,#323947 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#323947 75%),linear-gradient(-45deg,transparent 75%,#323947 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.sample-choice strong{font-size:12px;color:var(--text)}.sample-detail{font-size:9px;color:var(--accent);line-height:1.8}.sample-description{font-size:10px;color:var(--muted);line-height:1.8}.samples-dialog .dialog-actions{flex-wrap:wrap}.samples-dialog .dialog-actions button{white-space:normal;line-height:1.6}
@media(max-width:580px){.samples-dialog{padding:23px 18px}.sample-choices{gap:8px}.sample-choice{padding:12px 8px}.sample-choice canvas{width:128px;height:128px}.sample-choice strong{font-size:11px}.sample-detail{font-size:8px}.sample-description{font-size:9px}}

@media(max-width:580px){.sample-choices{grid-template-columns:1fr}.sample-choice{display:grid;grid-template-columns:128px minmax(0,1fr);column-gap:12px;row-gap:7px;align-items:center}.sample-choice canvas{grid-column:1;grid-row:1 / 4}.sample-choice strong,.sample-detail,.sample-description{grid-column:2}.sample-choice strong{font-size:12px}.sample-description{font-size:10px}.project-title input{width:110px}.brand{gap:6px}}

button{touch-action:manipulation}.frame-card,.layer-row button{touch-action:none}

.layer-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(29px,1fr));gap:5px;justify-items:center}.layer-actions button:last-child{margin-left:0}

/* Finger sorting feedback and explicit layer operations. */
.sort-ghost{position:fixed!important;z-index:80;pointer-events:none!important;margin:0!important;opacity:.9!important;background:#283340!important;border:2px solid var(--accent)!important;box-shadow:0 8px 22px #0008;transform:scale(1.03)}.sort-ghost *{pointer-events:none!important}.sort-hold{outline:1px dashed #c4ed7b88;outline-offset:-1px}.sort-hold .layer-handle{color:var(--accent)}.layer-row,.frame-card{-webkit-touch-callout:none;-webkit-user-select:none}.layer-row .layer-name{cursor:default}#layerRenameField[hidden]{display:none}#layerActionError{color:#ffa1ab;margin-bottom:0}#layerActionError:empty{display:none}#layerActionConfirm.danger{background:#f0a0a6;border-color:#f0a0a6;color:#361c23}@media(max-width:580px){#layerActionDialog{padding:23px 18px}#layerActionDialog h2{font-size:20px}}
/* Shape choices and a nonmodal transform preview keep the drawing area usable. */
.drawing-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.drawing-options button{min-height:65px;white-space:normal;font-size:12px;gap:12px}.drawing-options [aria-checked=true]{border-color:var(--accent);color:var(--accent);background:#c4ed7b14}.drawing-options svg{width:24px;height:24px;flex-shrink:0}
.transform-bar{flex-shrink:0;background:#283326;border-block:1px solid #c4ed7b55;padding:9px 12px;position:relative;z-index:2}.transform-bar[hidden],.transform-overlay[hidden]{display:none}.transform-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.transform-controls strong{color:var(--accent);font-size:11px}.transform-controls select{font-size:10px;padding:5px}.transform-controls label{display:flex;align-items:center;gap:4px;font-size:10px;white-space:nowrap}.transform-controls input{width:64px;min-width:0;font-size:11px;padding:5px 3px}.transform-actions{display:flex;align-items:center;gap:7px;margin-top:8px}.transform-actions span{margin-right:auto;line-height:1.5;color:#c6d7c3;font-size:10px}.transform-actions button{font-size:10px;padding:6px 8px;white-space:nowrap}.transform-overlay{position:absolute;z-index:3;pointer-events:none;overflow:visible}.transform-overlay svg{position:absolute;width:100%;height:100%;overflow:visible;pointer-events:none}.transform-overlay polygon{fill:none;stroke:#e2ffc1;stroke-width:1.5;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}.transform-overlay line{stroke:#e2ffc1;stroke-width:1.5}.transform-handle{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;min-width:22px;padding:0;border:1px solid #17221a;border-radius:4px;background:#d8f5b7;color:#14211a;pointer-events:auto;touch-action:none;box-shadow:0 0 0 1px #d8f5b7;cursor:nwse-resize}.transform-handle:hover{background:#efffe1}.rotation-handle,.translation-handle{width:30px;height:30px;border-radius:50%;font-size:19px;cursor:grab}.transform-handle:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(pointer:coarse){.transform-handle{width:28px;height:28px}.rotation-handle,.translation-handle{width:36px;height:36px}}
@media(max-width:850px){.palette-panel .switch-row:nth-of-type(1){grid-row:2}.palette-panel .switch-row:nth-of-type(2){grid-row:3}.palette-panel .switch-row:nth-of-type(3){grid-row:4}.palette-panel .switch-row:nth-of-type(4){grid-row:5}}
@media(max-width:580px){.transform-bar{padding:7px}.transform-controls{gap:7px;max-height:94px;overflow:auto}.transform-controls input{width:53px}.transform-actions{flex-wrap:wrap;gap:6px}.transform-actions span{width:100%;font-size:9px}.transform-actions button:first-of-type{margin-right:auto}.drawing-options button{font-size:11px;padding:10px 7px;gap:8px}}
.transform-numbers{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.transform-numbers[hidden]{display:none}#transformNumbersToggle{display:none;font-size:9px;padding:5px}.transform-controls{max-height:none;overflow:visible}
@media(max-width:580px){#transformNumbersToggle{display:inline-flex;margin-left:auto}.transform-controls{gap:6px}.transform-controls select{max-width:126px;padding:5px 2px}.transform-numbers{width:100%;gap:8px}.transform-actions{margin-top:6px}.transform-actions button{padding:5px 6px;font-size:9px}.transform-actions span{font-size:8px}.palette-panel .switch-row:nth-of-type(1){grid-row:5}.palette-panel .switch-row:nth-of-type(2){grid-row:6}.palette-panel .switch-row:nth-of-type(3){grid-row:7}.palette-panel .switch-row:nth-of-type(4){grid-row:8}.palette-panel .palette{grid-row:3 / 9}}
.transform-handle[hidden]{display:none}.transform-handle{background:transparent;border:0;box-shadow:none}.transform-handle::before{content:'';position:absolute;width:11px;height:11px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #17221a;box-shadow:0 0 0 1px #d8f5b7;background:#d8f5b7;border-radius:2px;pointer-events:none}.transform-handle:hover{background:transparent}.transform-handle:hover::before{background:#fff}.rotation-handle,.translation-handle{background:#d8f5b7e8;border:1px solid #17221a;box-shadow:0 0 0 1px #d8f5b7}.rotation-handle:hover,.translation-handle:hover{background:#efffe1}.rotation-handle::before,.translation-handle::before{display:none}
@media(max-width:580px){.transform-numbers{flex-wrap:nowrap;overflow-x:auto;max-width:100%;min-width:0;padding-bottom:3px;touch-action:pan-x}.transform-numbers label{flex:0 0 auto}}
/* Compact transform controls, with actions on the left and numbers on demand. */
.transform-bar{padding:7px 10px}.transform-main{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.transform-actions{margin:0;gap:6px;flex-shrink:0}.transform-controls{gap:8px;max-height:none;overflow:visible}.transform-controls strong{white-space:nowrap}#transformNumbersToggle{display:inline-flex;margin:0;font-size:10px;padding:6px}.transform-numbers{gap:10px;margin-top:8px}.transform-numbers label{display:flex;align-items:center;gap:4px;font-size:10px;white-space:nowrap}.transform-numbers input{width:64px;font-size:11px;padding:5px 3px}.transform-numbers[hidden],#transformNotice[hidden]{display:none}#transformNotice{display:block;margin-top:5px;font-size:10px;line-height:1.5;color:#c6d7c3}.loop-timing{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-variant-numeric:tabular-nums}.loop-timing #loopBpm{color:var(--accent);font-size:10px}.panel-collapse{display:none}.focus-panel-host .panel-collapse{display:none}
@media(min-width:581px){.panel-collapse{display:inline-flex;width:28px;height:28px;padding:5px;flex-shrink:0}.palette-panel .palette-heading{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px}.palette-heading h2{flex:1;white-space:nowrap}.palette-heading>.label-small{width:100%}#paletteCollapse svg{transform:rotate(-90deg)}#paletteCollapse[aria-expanded=false] svg{transform:rotate(-90deg)}.studio.palette-collapsed>.palette-panel>:not(.palette-tools-panel),.studio.palette-collapsed .palette-tools-panel>:not(.palette-heading):not(#palette){display:none}.studio.palette-collapsed>.palette-panel .palette-heading{margin:0}.studio.palette-collapsed>.palette-panel .palette-heading h2,.studio.palette-collapsed>.palette-panel .palette-heading>.label-small{display:none}.studio.timeline-collapsed>.editor-column>.timeline{min-height:0;height:auto}.studio.timeline-collapsed>.editor-column>.timeline>.frame-strip,.studio.timeline-collapsed>.editor-column>.timeline>.timeline-footer,.studio.timeline-collapsed>.editor-column>.timeline .transport,.studio.timeline-collapsed>.editor-column>.timeline .timeline-actions{display:none}.studio.timeline-collapsed>.editor-column>.timeline>.timeline-toolbar{padding:6px 10px;min-height:40px}}
@media(min-width:851px){body:not(.canvas-focus) .studio.palette-collapsed{grid-template-columns:58px 36px minmax(320px,1fr) 236px}.studio.palette-collapsed>.palette-panel{padding:18px 4px}.studio.timeline-collapsed{grid-template-rows:minmax(410px,1fr) 40px}.canvas-focus .studio.timeline-collapsed{grid-template-rows:minmax(0,1fr)}}
@media(min-width:851px) and (max-width:1150px){body:not(.canvas-focus) .studio.palette-collapsed{grid-template-columns:51px 36px minmax(300px,1fr) 210px}}
@media(min-width:1450px){body:not(.canvas-focus) .studio.palette-collapsed{grid-template-columns:64px 36px minmax(500px,1fr) 266px}}
@media(min-width:581px) and (max-width:850px){.palette-panel .palette-heading{grid-column:1 / -1;position:relative}.palette-heading>.label-small{width:auto;margin-right:40px}#paletteCollapse{position:absolute;right:0}.palette-controls{grid-row:2}.palette-panel .palette{grid-row:3 / 8}.palette-panel .color-editor{grid-row:2}.palette-panel .subheading{grid-row:3}.palette-panel .switch-row:nth-of-type(1){grid-row:4}.palette-panel .switch-row:nth-of-type(2){grid-row:5}.palette-panel .switch-row:nth-of-type(3){grid-row:6}.palette-panel .switch-row:nth-of-type(4){grid-row:7}}
@media(max-width:580px){.transform-main{gap:6px}.transform-bar{padding:7px}.transform-actions{width:100%;justify-content:flex-start}.transform-actions button:first-of-type{margin-right:0}.transform-controls{width:100%;justify-content:flex-start;gap:6px}.transform-controls strong{font-size:10px}#transformNumbersToggle{margin-left:auto;padding:5px;font-size:9px}.transform-numbers input{width:53px}#transformNotice{font-size:9px}}
/* A shared, compact place for tool hints and selection options. */
.tool-hint{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:var(--muted)}.touch-controls{flex-shrink:0}.selection-options{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.selection-options[hidden],#selectionExpandControl[hidden]{display:none}.selection-options label{display:inline-flex;align-items:center;gap:3px;color:var(--muted);font-size:9px}.selection-options input{width:44px;height:24px;padding:3px 2px;font-size:10px}.animation-timing{display:flex;flex-direction:column;gap:8px;margin-top:12px}.timing-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-size:10px;color:var(--muted)}.timing-field{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0;font-variant-numeric:tabular-nums}.timing-field input{width:72px;height:28px;text-align:right;padding:4px;color:var(--muted);font-size:11px}.preview-controls{justify-content:space-between}.timing-field #loopBpm{color:var(--muted)}
/* Every second-click settings dialog uses the same heading, cards and selection. */
.tool-options-dialog{width:410px}.tool-options-dialog h2{font-size:20px}.tool-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}.tool-option-grid .tool-option{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:78px;padding:12px 8px;white-space:normal;font:inherit}.tool-option strong{font-size:11px;font-weight:600}.tool-option small{font-size:10px;color:var(--muted);line-height:1.5}.tool-option-grid .tool-option svg{width:24px;height:24px}.tool-option-grid [aria-checked=true],.tool-option-grid [aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#c4ed7b18}.tool-option-grid.fill-mode-options{grid-template-columns:1fr}.tool-option-grid.fill-mode-options .tool-option{align-items:flex-start;text-align:left;min-height:70px}.tool-options-dialog .dialog-actions{margin-top:20px}
@media(max-width:580px){.tool-hint{order:3;flex-basis:100%;font-size:8px;line-height:12px}.touch-toolbar{row-gap:0}.timing-row{font-size:9px;gap:4px}.timing-field{gap:3px}.timing-field input{width:63px;font-size:10px}.tool-options-dialog{padding:23px 18px}.tool-options-dialog h2{font-size:19px}.tool-option-grid .tool-option{padding:10px 6px}.tool-option strong{font-size:10px}.animation-timing{gap:6px}}
/* Drag feedback occupies no permanent toolbar space. */
.canvas-stage.image-drop-target{box-shadow:inset 0 0 0 3px var(--accent);background-color:#c4ed7b12}
/* Clipping feedback must not move the canvas beneath an active pointer. */
#transformNotice{position:absolute;top:100%;left:10px;right:10px;margin:5px 0 0;padding:5px 8px;border:1px solid #c4ed7b55;border-radius:5px;background:#283326f5;pointer-events:none}
/* Short desktop windows scroll panel contents inside their own bounds. */
@media(min-width:851px){
  body:not(.canvas-focus){height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  body:not(.canvas-focus) .app-header,body:not(.canvas-focus) .app-footer{flex-shrink:0}
  body:not(.canvas-focus) .studio{flex:1;height:auto;min-height:0;grid-template-rows:minmax(0,1fr) max(var(--timeline-min-height,0px),min(220px,32dvh))}
  body:not(.canvas-focus) .studio.timeline-collapsed{grid-template-rows:minmax(0,1fr) 40px}
  body:not(.canvas-focus) .palette-panel,body:not(.canvas-focus) .tool-rail{min-height:0;overflow-y:auto;overscroll-behavior:contain}
  body:not(.canvas-focus) .tool-rail>*{flex-shrink:0}
  body:not(.canvas-focus) .timeline{height:auto;min-height:0;overflow:hidden}
  body:not(.canvas-focus) .frame-strip{min-height:0}
}
@media(min-width:851px) and (max-width:1150px){body:not(.canvas-focus) .studio:not(.timeline-collapsed){grid-template-rows:minmax(0,1fr) min(230px,32dvh)}}
@media(min-width:851px) and (max-width:1050px){body:not(.canvas-focus) .app-header{height:auto;min-height:112px}}

/* Edge snapping belongs only to the transform controls. */
.transform-controls .transform-snap{display:inline-flex;align-items:center;gap:4px;font-size:10px;white-space:nowrap;cursor:pointer}
.transform-controls .transform-snap input{width:14px;height:14px;min-width:14px;padding:0;margin:0;accent-color:var(--accent)}
@media(max-width:580px){.transform-controls .transform-snap{font-size:9px;gap:3px}}

/* Selection controls scroll horizontally inside the existing compact toolbar. */
.selection-modes,.magic-options{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.magic-options[hidden],#selectionSubtract[hidden]{display:none}
.selection-toolbar [data-selection-mode][aria-pressed=true]{color:var(--accent);background:#c4ed7b18;border-color:#c4ed7b55}
#magicContiguous{color:var(--accent);border-color:#c4ed7b55;padding-inline:6px}
.editor-toolbar .file-tab{flex:1;overflow:hidden}.file-tab #tabName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.toolbar-actions{flex-shrink:0}
#historyBtn{height:28px;padding:4px 6px;font-size:10px;flex-shrink:0}
.history-dialog{width:480px}.history-dialog .history-help{font-size:11px;line-height:1.7;margin-bottom:15px}
.history-list-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin:12px 0;color:var(--muted);font-size:9px}
.history-list{display:flex;flex-direction:column;gap:5px;max-height:50dvh;overflow:auto;overscroll-behavior:contain}
.history-entry{width:100%;justify-content:flex-start;text-align:left;padding:10px;gap:10px;flex-shrink:0;white-space:normal}
.history-number{font:10px ui-monospace,monospace;color:var(--muted);min-width:20px}
.history-entry>span:nth-child(2){display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}.history-entry strong{font-size:11px;font-weight:500}.history-entry small{font-size:9px;color:var(--muted)}
.history-entry[aria-current]{opacity:1;border-color:var(--accent);background:#c4ed7b15;cursor:default}.history-current{color:var(--accent);font-size:10px}.history-future{color:var(--muted)}
@media(max-width:580px){#historyBtn{font-size:9px;padding:4px}.history-dialog{padding:22px 16px}.history-entry{padding:9px 7px}.editor-toolbar .file-tab{gap:4px}.editor-toolbar{gap:4px}}
@media(max-width:580px){.inspector{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}.inspector .preview-panel,.inspector .layers-panel{min-width:0}}

/* Keyboard instructions stay out of the phone layout. */
@media(max-width:580px){.keyboard-shortcut,.shortcut-grid{display:none}}

/* Brush previews use the same discrete pixels as the drawing footprint. */
.brush-shape-preview{display:block;width:28px;height:28px}.tool-option-grid .brush-shape-preview>svg,.tool-option-grid .brush-size-preview>span>svg,#brushDot>svg{display:block;width:100%;height:100%}.brush-size-preview>span,#brushDot{background:transparent}
.pen-aa-toggle{flex-direction:row;align-items:center;gap:9px;margin-top:16px;cursor:pointer}.pen-aa-toggle input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--accent)}.pen-aa-note{font-size:10px;line-height:1.7;margin:9px 0 0}.tool-option-grid.brush-size-choices{grid-template-columns:repeat(4,minmax(0,1fr))}

.canvas-background-control{display:grid;grid-template-columns:auto 20px minmax(0,1fr);align-items:center;gap:5px;margin:2px 0 10px;font-size:11px}.canvas-background-control select{width:100%;padding:6px 3px;font-size:11px}.canvas-background-preview{width:20px;height:20px;border:1px solid #ffffff45;border-radius:4px;background:var(--background-base)}.canvas-background-preview.checker{background-image:repeating-conic-gradient(var(--background-base) 0% 25%,var(--background-check) 0% 50%);background-size:12px 12px}
@media(min-width:581px) and (max-width:850px){.palette-panel .canvas-background-control{grid-column:1;grid-row:6}.palette-panel .switch-row:nth-of-type(3){grid-row:7}.palette-panel .switch-row:nth-of-type(4){grid-row:8}.palette-panel .palette{grid-row:3 / 9}}
@media(max-width:580px){.palette-panel .canvas-background-control{grid-column:1;grid-row:7;grid-template-columns:1fr 20px;margin:0}.canvas-background-control select{grid-column:1 / -1}.palette-panel .switch-row:nth-of-type(3){grid-row:8}.palette-panel .switch-row:nth-of-type(4){grid-row:9}.palette-panel .palette{grid-row:3 / 10}}

/* Share the original canvas controls without changing their normal grid placement. */
.canvas-settings-panel{display:contents}.focus-panel-host .canvas-settings-panel{display:block;padding:18px}.focus-panel-host .canvas-settings-panel .subheading{margin-bottom:14px}.focus-panel-host .canvas-background-control{grid-template-columns:auto 20px minmax(0,1fr);margin:2px 0 10px}.focus-panel-host .canvas-background-control select{grid-column:auto}.focus-panel-host .canvas-settings-panel .panel-note{margin-bottom:0}
@media(max-width:1150px){.canvas-focus .editor{padding-bottom:45px}.focus-dock{top:auto;bottom:0;left:49px;right:0;width:auto;max-width:none;display:flex;flex-direction:column-reverse;filter:drop-shadow(0 -5px 12px #0006)}.focus-tabs{border-radius:0;padding:4px;gap:3px;justify-content:space-around;min-height:45px}.focus-tabs button{flex:1;min-width:0;padding:8px 7px;font-size:10px;min-height:34px}.focus-panel-host{position:static;align-self:flex-end;margin:0;width:320px;max-width:100%;border-radius:8px 8px 0 0}.focus-panel-host #layerList{max-height:180px}}
@media(max-width:580px){.focus-dock{left:45px}.focus-tabs{justify-content:space-around}.focus-tabs button{flex:1;min-width:0;padding:8px 3px;font-size:9px}.focus-panel-host{width:100%}}

/* Only the visible dock controls intercept canvas input. */
.focus-dock{pointer-events:none}.focus-tabs,.focus-panel-host{pointer-events:auto}
.transparent-ink{background-image:repeating-conic-gradient(#e5e7eb 0% 25%,#687386 0% 50%);background-size:10px 10px}
.app-footer{height:auto;min-height:36px;gap:4px 12px;padding-top:3px;padding-bottom:3px;flex-wrap:wrap;letter-spacing:0}
.footer-actions{flex-wrap:wrap;justify-content:flex-end}
.footer-legal-links{display:flex;align-items:center;gap:10px;padding-left:10px;border-left:1px solid var(--border)}
.footer-legal-links a{display:inline-flex;align-items:center;gap:3px;min-height:28px;font-size:10px;color:var(--muted);white-space:nowrap}
.footer-legal-links a:hover{color:var(--accent)}
.footer-legal-links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.legal-new-tab{font-size:10px;color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:580px){.app-footer{padding:6px 10px;flex-direction:column;align-items:stretch}.footer-actions{justify-content:flex-start;gap:4px}.footer-legal-links{border-left:0;padding-left:0;margin-left:auto;gap:8px}.footer-legal-links a{font-size:9px;min-height:30px}}
.save-project-title{overflow-wrap:anywhere}
.save-rename-form{grid-column:1 / -1;padding-top:10px;border-top:1px solid var(--border)}
.save-rename-form[hidden]{display:none}
.save-rename-form label{margin:0;font-size:11px}
.save-rename-form input{width:100%;margin-top:6px}
.save-rename-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:10px}
.save-rename-actions button{font-size:11px}
#timelineCollapse{display:inline-flex;width:28px;height:28px;padding:5px;flex-shrink:0}
.focus-panel-host #timelineCollapse{display:none}
.studio.timeline-collapsed>.editor-column>.timeline{height:40px;min-height:0;overflow:hidden}
.studio.timeline-collapsed>.editor-column>.timeline>.frame-strip,.studio.timeline-collapsed>.editor-column>.timeline>.timeline-footer,.studio.timeline-collapsed>.editor-column>.timeline .transport,.studio.timeline-collapsed>.editor-column>.timeline .timeline-actions{display:none}
.studio.timeline-collapsed>.editor-column>.timeline>.timeline-toolbar{padding:5px 10px;min-height:39px;margin:0}
@media(max-width:1150px){.app-footer .muted{display:none}}
@media(min-width:581px) and (max-width:850px){body:not(.canvas-focus) .studio.timeline-collapsed{grid-template-rows:calc(480px + var(--timeline-expanded-height,225px) - 40px) 40px auto}}
@media(max-width:580px){body:not(.canvas-focus) .studio.timeline-collapsed{grid-template-rows:calc(415px + var(--timeline-expanded-height,225px) - 40px) 40px auto auto}.browser-save-actions button{padding:7px 8px}}

.editor-home-link{display:inline-flex;align-items:center;min-height:30px;padding:0 5px;color:var(--muted);font-size:10px;white-space:nowrap}.editor-home-link:hover{color:var(--accent)}.editor-home-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.drive-account-panel>.drive-connecting[hidden]{display:none}.drive-account-panel>.drive-connecting{display:flex;align-items:center;gap:12px;padding:8px 12px;margin:0 0 12px;border:1px solid #c4b2ff55;border-radius:6px;background:#c4b2ff10;flex-wrap:nowrap}.drive-connecting picture,.drive-connecting img{display:block;width:64px;height:64px;flex-shrink:0}.drive-connecting img{image-rendering:pixelated}.drive-connecting>span{color:#d8ccff;font-size:13px;font-weight:600}

/* Branding at left; file actions align right. Canvas controls stay by the title. */
.app-header,body:not(.canvas-focus) .app-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;height:auto;min-height:0;padding:7px 16px;flex-shrink:0}
.header-identity{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;width:165px}
.header-identity .editor-brand-group,.header-identity .brand{height:46px}
.header-identity .brand{font-size:24px;gap:8px}
.header-identity .brand-mascot,.header-identity .brand-mascot img{width:46px;height:46px}
.header-identity .header-save-status{font-size:8px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;flex:none}
.header-workspace{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:5px 14px;min-width:0}
.header-workspace .header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;width:auto;margin:0;gap:5px;min-width:0}
.header-workspace .header-actions button{flex:0 0 auto;font-size:11px;padding:8px 8px}
.header-home-link{display:inline-flex;align-items:center;justify-self:end;min-height:32px;padding:5px 0 5px 12px;border:0;border-left:1px solid var(--border);border-radius:0;background:transparent;color:var(--muted);font-size:10px;white-space:nowrap}
.header-home-link:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.header-home-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1150px){.header-workspace .header-actions button{font-size:10px;padding:7px 7px}.header-identity{width:150px}.header-identity .brand{font-size:22px}}
@media(max-width:850px){.app-header,body:not(.canvas-focus) .app-header{padding:6px 12px;gap:9px}.header-identity{width:140px}.header-identity .brand{font-size:21px}.header-workspace{gap:3px 8px}.header-workspace .header-actions button{font-size:9px;padding:7px 6px}.header-home-link{font-size:9px;padding-left:8px}}
@media(max-width:580px){.app-header,body:not(.canvas-focus) .app-header{grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:6px 12px}.header-identity{grid-column:1;grid-row:1;width:auto}.header-home-link{grid-column:2;grid-row:1}.header-workspace{grid-column:1/-1;grid-row:2}.header-workspace .header-actions{width:100%;gap:5px}.header-workspace .header-actions button{font-size:9px;padding:7px 6px}.header-identity .brand,.header-identity .editor-brand-group{height:40px}.header-identity .brand-mascot,.header-identity .brand-mascot img{width:40px;height:40px}}

.palette-pick-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}.palette-pick-actions button{font-size:11px}.palette-pick-actions>span{font-size:10px;color:var(--muted)}
.palette-pick-hint[hidden]{display:none}.palette-pick-hint{color:var(--accent);font-size:11px!important;margin:12px 0}.palette-dialog.is-palette-picking #paletteDialogGrid{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}.palette-dialog.is-palette-picking .swatch{cursor:crosshair}#palettePickColor[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:#c4ed7b15}

.header-save-status{display:block;min-width:0;max-width:160px;line-height:1.5}.file-tab{flex:1;min-width:0;max-width:none}.file-tab .tiny-dot{flex-shrink:0}.file-tab .canvas-project-name{width:180px;max-width:100%;min-width:0;flex:0 1 180px;background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 5px;font-size:11px;font-weight:500;text-overflow:ellipsis;cursor:text}.file-tab .canvas-project-name:hover{border-color:#64708480;background:#ffffff04}.file-tab .canvas-project-name:focus{border-color:var(--accent);background:#191e27;outline:0;text-overflow:clip}.file-tab #dimensions{flex-shrink:0}@media(max-width:1000px){.header-save-status{font-size:8px}}@media(max-width:580px){.file-tab .canvas-project-name{font-size:10px;padding:4px 3px;width:140px;flex-basis:140px}.header-save-status{flex:1;max-width:150px}}

/* Inert modal backgrounds can still receive native scroll chaining.
   Derive the lock from all active modals so stacked dialogs cannot unlock it early. */
html:has(dialog:modal),html:has(dialog:modal) body{overflow:hidden;overscroll-behavior:none}
dialog:modal{overscroll-behavior:contain}
/* Keep the existing page scrollbar space while a modal is open. */
html:has(body.page-scroll-layout):has(dialog:modal){scrollbar-gutter:stable}
/* Keep the editor controls anchored to the right of the artwork title. */
.editor-toolbar .toolbar-actions{margin-left:auto;justify-content:flex-end}
@media(max-width:580px){
 .app-header,body:not(.canvas-focus) .app-header{padding:4px 8px;gap:3px 8px}
 .header-identity{gap:0}
 .header-identity .brand,.header-identity .editor-brand-group{height:32px}
 .header-identity .brand-mascot,.header-identity .brand-mascot img{width:32px;height:32px}
 .header-identity .brand{font-size:20px;gap:6px}
 .header-workspace .header-actions{gap:4px;justify-content:flex-end}
 .header-workspace .header-actions button{padding:5px 6px;min-height:28px}
 .header-home-link{min-height:28px}
}

/* Phone reminder: drawing with one finger still allows two-finger panning. */
.touch-pan-hint{display:none}
@media(max-width:580px){
 .canvas-status[data-touch-mode="draw"]:not([data-tool="hand"]) .touch-pan-hint{display:inline;font-size:8px;line-height:1.4;white-space:nowrap;color:var(--muted);margin-right:3px}
}

/* Pen/eraser keyboard hints take no space in tablet and phone layouts. */
@media(max-width:1150px){.tool-hint[data-tool="pencil"],.tool-hint[data-tool="eraser"]{display:none}}

.gif-drop-dialog{width:480px}.gif-drop-choices{display:flex;flex-direction:column;gap:10px;margin-top:16px}.gif-drop-choices button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:14px;white-space:normal}.gif-drop-choices strong{font-size:12px}.gif-drop-choices span{font-size:11px;line-height:1.7;color:var(--muted)}#gifDropInfo{overflow-wrap:anywhere}.gif-drop-choices button:focus-visible{border-color:var(--accent)}

/* Align file actions in compact rows instead of ragged wrapping on touch screens. */
.header-action-label-short{display:none}
@media(max-width:850px){
 .header-action-label-full{display:none}.header-action-label-short{display:inline}
 .app-header,body:not(.canvas-focus) .app-header{grid-template-columns:minmax(0,1fr) auto}
 .header-identity{grid-column:1;grid-row:1}.header-home-link{grid-column:2;grid-row:1}
 .header-workspace{grid-column:1/-1;grid-row:2;width:100%}
 .header-workspace .header-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;gap:5px}
 .header-workspace .header-actions button{min-width:0;min-height:32px;padding:6px 4px;gap:4px;font-size:10px}
 .header-workspace .header-actions button svg{width:14px;height:14px}
 .header-workspace .header-actions #exportBtn{grid-column:auto}
}
@media(max-width:580px){
 .header-workspace .header-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .header-workspace .header-actions button{font-size:10px;min-height:32px}
}
/* Short windows need page scrolling; do not stack a sidebar scrollbar inside it. */
@media(min-width:851px) and (max-height:540px){
 body:not(.canvas-focus){display:block;height:auto;min-height:100dvh;overflow:auto;}
 body:not(.canvas-focus) .studio{height:auto;min-height:0;grid-template-rows:360px auto;}
}

@media(min-width:581px) and (max-width:650px){.header-workspace .header-actions button{font-size:9px;gap:3px}.header-workspace .header-actions button svg{width:12px;height:12px}}

.checker-size-control{margin:0 0 12px;min-width:0}.checker-size-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;line-height:1.5}.checker-size-heading output{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:9px}.checker-size-control input[type=range]{display:block;margin-top:8px}.checker-size-control.is-disabled{opacity:.45}
@media(min-width:581px) and (max-width:850px){.palette-panel .checker-size-control{grid-column:1;grid-row:6;margin:0}.palette-panel .canvas-background-control{grid-row:7}.palette-panel .switch-row:nth-of-type(3){grid-row:8}.palette-panel .switch-row:nth-of-type(4){grid-row:9}.palette-panel .palette{grid-row:3 / 10}}
@media(max-width:580px){.palette-panel .checker-size-control{grid-column:1;grid-row:7;margin:0}.palette-panel .canvas-background-control{grid-row:8}.palette-panel .switch-row:nth-of-type(3){grid-row:9}.palette-panel .switch-row:nth-of-type(4){grid-row:10}.palette-panel .palette{grid-row:3 / 11}.checker-size-heading{font-size:9px}.checker-size-heading output{font-size:8px}}

.canvas-settings-heading{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.canvas-settings-heading #canvasDimensions{font-size:9px;font-weight:400;color:var(--muted);letter-spacing:0;white-space:nowrap}.timeline-minimize{display:none;margin-left:auto;font-size:10px;padding:5px 7px}
@media(max-width:580px){.canvas-settings-heading{gap:5px}.canvas-settings-heading #canvasDimensions{font-size:8px}.canvas-focus .focus-mounted .timeline-minimize:not([hidden]){display:inline-flex}}
@media(max-width:1150px) and (max-height:580px){html.touch-device .canvas-focus .focus-mounted .timeline-minimize:not([hidden]){display:inline-flex}}
.focus-dock.has-minimal-timeline .focus-panel-host{width:100%;max-width:100%;overflow:hidden;border-radius:6px 6px 0 0}
.canvas-focus .focus-panel-host .timeline.timeline-minimal{display:flex;flex-direction:row;align-items:center;gap:6px;min-height:0;height:42px;padding:6px;width:100%}
.timeline-minimal .timeline-toolbar,.timeline-minimal .transport{display:contents}
.timeline-minimal .timeline-title,.timeline-minimal .timeline-actions,.timeline-minimal .timeline-footer,.timeline-minimal .transport>:not(#playBtn){display:none}
.timeline-minimal #playBtn{flex:none;width:30px;height:30px;min-width:30px;padding:6px;gap:0;font-size:0}.timeline-minimal #playBtn svg{width:14px;height:14px}
.timeline-minimal .frame-strip{display:flex;align-items:center;flex:1;min-width:0;min-height:0;height:30px;gap:5px;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}.timeline-minimal .frame-strip::-webkit-scrollbar{display:none}
.timeline-minimal .frame-card{flex:0 0 34px;min-width:34px;width:34px;height:30px;padding:0;touch-action:pan-x}.timeline-minimal .frame-card canvas,.timeline-minimal .frame-duration{display:none}.timeline-minimal .frame-number{display:block;width:100%;padding:0;text-align:center;line-height:28px;font-size:11px;background:transparent}.timeline-minimal .frame-number::after{display:none}

.layers-minimize{display:none;margin-left:auto;font-size:10px;padding:5px 7px}
@media(max-width:580px){.canvas-focus .focus-mounted .layers-minimize:not([hidden]){display:inline-flex}}
@media(max-width:1150px) and (max-height:580px){html.touch-device .canvas-focus .focus-mounted .layers-minimize:not([hidden]){display:inline-flex}}
.focus-dock.has-minimal-layers .focus-panel-host{align-self:flex-start;width:166px;max-width:100%;overflow:hidden;border-radius:6px 6px 0 0}
.focus-panel-host .layers-panel.layers-minimal{padding:6px;min-height:0}.layers-minimal>:not(#layerList){display:none}
.focus-panel-host .layers-minimal #layerList{display:flex;flex-direction:column;gap:2px;min-height:0;max-height:min(134px,calc(var(--minimal-layer-height,148px) - 14px));overflow-anchor:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:none;touch-action:pan-y}.layers-minimal #layerList::-webkit-scrollbar{display:none}
.layers-minimal .layer-row{height:32px;min-height:32px;flex:0 0 32px;gap:4px;margin:0;padding:2px;touch-action:pan-y}.layers-minimal .layer-row button{touch-action:pan-y}.layers-minimal .layer-handle,.layers-minimal .layer-lock{display:none}
.layers-minimal .layer-eye{width:24px;height:26px;flex:0 0 24px;padding:3px}.layers-minimal .layer-eye svg{width:14px;height:14px}.layers-minimal .layer-thumb{width:22px;height:22px}.layers-minimal .layer-row .layer-name{font-size:10px;padding:4px 0;line-height:1.4}

/* The timing tool keeps its own violet accent within the export menu. */
#sendToTune{color:#c4b5fd;border-color:#c4b5fd66;background:#c4b5fd0c}
#sendToTune:hover{background:#c4b5fd1c;border-color:#c4b5fd}
#sendToTune .export-format{color:#c4b5fd;background:#c4b5fd18}
.tune-confirm-dialog{--accent:#c4b5fd}
.tune-confirm-dialog .primary:hover{background:#dfd5ff;border-color:#dfd5ff}
.background-presets button{justify-content:flex-start}

/* Dialog titles and their upper-right close button stay visible during scrolling. */
.dialog-dismiss-bar{position:sticky;top:calc(-1 * var(--dialog-padding-top));z-index:10;display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center;gap:12px;margin:calc(-1 * var(--dialog-padding-top)) calc(-1 * var(--dialog-padding-right)) 18px calc(-1 * var(--dialog-padding-left));padding:16px var(--dialog-padding-right) 12px var(--dialog-padding-left);background:#232a35;border-bottom:1px solid var(--border)}
.dialog-heading-text{min-width:0}
.dialog-heading-text h2{margin:0;font-size:20px;line-height:1.4;letter-spacing:-.03em}
.dialog-heading-text .dialog-kicker{margin-bottom:6px}
dialog .dialog-dismiss-button{width:36px;height:36px;min-width:36px;padding:8px;margin:0;background:#232a35;border-color:var(--border);touch-action:manipulation}
dialog .dialog-dismiss-button:hover{background:#343d4b;border-color:#647084}
dialog .dialog-dismiss-button svg{width:18px;height:18px}

/* Compact file header: explicit destinations live in one menu. */
.app-header,body:not(.canvas-focus) .app-header{grid-template-columns:minmax(0,1fr) auto auto;padding:5px 16px;gap:12px;height:auto;min-height:0}
.header-identity{grid-column:1;grid-row:1;flex-direction:row;align-items:center;width:auto;gap:12px}
.header-identity .editor-brand-group,.header-identity .brand{height:42px;flex-shrink:0}
.header-identity .brand-mascot,.header-identity .brand-mascot img{width:42px;height:42px}
.header-identity .header-save-status{flex:0 1 160px;max-width:160px;white-space:normal;font-size:8px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.header-workspace{grid-column:2;grid-row:1;width:auto;flex-wrap:nowrap}
.header-workspace .header-actions{display:flex;width:auto;flex-wrap:nowrap;gap:6px}
.header-workspace .header-actions>button{flex:0 0 auto;min-height:34px;min-width:70px;padding:7px 11px;font-size:11px;gap:6px;grid-column:auto}
.header-home-link{grid-column:3;grid-row:1}
.file-menu-trigger[aria-expanded=true]{border-color:#7e8da5;background:#303947}
.file-menu-caret{font-size:8px;color:var(--muted)}
.file-menu-backdrop{position:fixed;inset:0;z-index:55;touch-action:none}
.file-menu{position:fixed;z-index:60;padding:6px;background:#232a35;border:1px solid #505c70;border-radius:8px;box-shadow:0 14px 40px #0007;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.file-menu[hidden],.file-menu-backdrop[hidden]{display:none}
.file-menu button{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:44px;padding:10px 12px;margin:0;gap:10px;text-align:left;font-size:12px;border:1px solid transparent;border-radius:5px;background:transparent;white-space:normal;line-height:1.5}
.file-menu button svg{width:17px;height:17px}
.file-menu button:hover,.file-menu button:focus-visible{background:#ffffff08;border-color:currentColor;outline:none}
.file-menu #openBtn{color:var(--text)}
.file-menu #saveBtn{color:#91bfff;border-color:transparent;background:#91bfff07}
.file-menu #browserSavesBtn{color:var(--accent);border-color:transparent;background:#c4ed7b07}
.file-menu #driveSavesBtn{color:#c4b2ff;border-color:transparent;background:#c4b2ff07}
.file-menu #saveBtn:hover,.file-menu #saveBtn:focus-visible,.file-menu #browserSavesBtn:hover,.file-menu #browserSavesBtn:focus-visible,.file-menu #driveSavesBtn:hover,.file-menu #driveSavesBtn:focus-visible{border-color:currentColor;background:#ffffff0b}
.file-menu-divider{height:1px;background:var(--border);margin:5px 6px}
@media(max-width:1150px){.header-identity .brand{font-size:22px}.header-workspace .header-actions>button{min-width:66px;padding:7px 9px;font-size:10px}}
@media(max-width:700px){
 .app-header,body:not(.canvas-focus) .app-header{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:5px 10px}
 .header-identity{grid-column:1;grid-row:1;gap:8px}
 .header-identity .brand,.header-identity .editor-brand-group{height:36px}
 .header-identity .brand-mascot,.header-identity .brand-mascot img{width:36px;height:36px}
 .header-identity .brand{font-size:21px;gap:6px}
 .header-identity .header-save-status{flex:1;max-width:160px;font-size:8px}
 .header-home-link{grid-column:2;grid-row:1;font-size:9px;padding-left:8px;min-height:28px}
 .header-workspace{grid-column:1/-1;grid-row:2;width:100%}
 .header-workspace .header-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .header-workspace .header-actions>button{min-width:0;min-height:32px;font-size:10px;padding:6px 8px;justify-content:center}
}

#imageDropInfo{overflow-wrap:anywhere}

/* The compact editing panels are available on every wide-view layout. */
.canvas-focus .focus-mounted .timeline-minimize:not([hidden]),.canvas-focus .focus-mounted .layers-minimize:not([hidden]){display:inline-flex}
.focus-dock.minimal-desktop{left:auto;right:10px;bottom:auto;display:block;width:320px;max-width:calc(100vw - 68px);filter:drop-shadow(0 6px 15px #0006)}
.focus-dock.minimal-desktop .focus-tabs{border-radius:8px;padding:5px;gap:4px;justify-content:flex-end;min-height:0}
.focus-dock.minimal-desktop .focus-tabs button{flex:0 1 auto;min-width:0;font-size:10px;padding:8px 5px;min-height:32px}
.focus-dock.minimal-desktop .focus-panel-host{position:static;margin:5px 0 0 auto;border-radius:6px;align-self:auto}
.focus-dock.minimal-bottom{top:auto;bottom:0;left:49px;right:0;width:auto;max-width:none;display:flex;flex-direction:column-reverse;filter:drop-shadow(0 -5px 12px #0006)}
.focus-dock.minimal-bottom .focus-tabs{border-radius:0;padding:4px;gap:3px;justify-content:space-around;min-height:45px}
.focus-dock.minimal-bottom .focus-tabs button{flex:1;min-width:0;padding:8px 7px;font-size:10px;min-height:34px}
.focus-dock.minimal-bottom .focus-panel-host{position:static;align-self:flex-start;margin:0;border-radius:6px 6px 0 0}
.canvas-focus:has(.focus-dock.minimal-desktop) .editor{padding-bottom:0}
.canvas-focus:has(.focus-dock.minimal-bottom) .editor{padding-bottom:45px}
@media(max-width:580px){.focus-dock.minimal-bottom{left:45px}.focus-dock.minimal-bottom .focus-tabs button{padding:8px 3px;font-size:9px}.focus-dock.minimal-desktop .focus-tabs{padding:4px;gap:3px}.focus-dock.minimal-desktop .focus-tabs button{font-size:8px;padding:8px 3px}}

/* A folded palette stays useful as a single column of the current 24 colors. */
@media(min-width:851px){
 body:not(.canvas-focus) .studio.palette-collapsed>.palette-panel{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;height:100%;max-height:var(--palette-folded-height,100dvh);align-self:start;overflow:hidden;padding:8px 3px;}
 body:not(.canvas-focus) .studio.palette-collapsed>.palette-panel .palette-heading{flex:none;min-height:28px;justify-content:center;}
 body:not(.canvas-focus) .studio.palette-collapsed>.palette-panel .palette-heading h2,body:not(.canvas-focus) .studio.palette-collapsed>.palette-panel .palette-heading>.label-small{display:none;}
 body:not(.canvas-focus) .studio.palette-collapsed #paletteCollapse{position:static;}
 body:not(.canvas-focus) .studio.palette-collapsed #palette{display:grid;align-self:stretch;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(24,minmax(14px,1fr));gap:3px;flex:1;min-height:0;margin:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;}
 body:not(.canvas-focus) .studio.palette-collapsed #palette .swatch{height:auto;min-height:14px;width:100%;border-radius:3px;}
 body:not(.canvas-focus) .studio.palette-collapsed #palette .swatch-number{font-size:9px;}
}
/* Fold the whole right inspector to give the canvas more room. */
.animation-heading{gap:6px;}.animation-heading h2{flex:1;min-width:0;white-space:nowrap;}.animation-heading #animationCollapse{width:22px;height:28px;padding:3px;flex:none;}
#animationCollapse svg{transform:rotate(90deg);}.focus-panel-host #animationCollapse{display:none;}
@media(min-width:581px){
 body:not(.canvas-focus) .studio.animation-collapsed>.inspector>.preview-panel{width:36px;padding:8px 4px;}
 body:not(.canvas-focus) .studio.animation-collapsed>.inspector>.layers-panel{display:none;}
 body:not(.canvas-focus) .studio.animation-collapsed>.inspector>.preview-panel>:not(.animation-heading){display:none;}
 body:not(.canvas-focus) .studio.animation-collapsed .animation-heading{flex-direction:column;margin:0;gap:8px;}
 body:not(.canvas-focus) .studio.animation-collapsed .animation-heading h2{writing-mode:vertical-rl;margin:0;}
 body:not(.canvas-focus) .studio.animation-collapsed .animation-heading .live-label{display:none;}
}
@media(max-width:580px){#animationCollapse{display:none;}}

@media(min-width:851px){
 body:not(.canvas-focus) .studio{--studio-rail:58px;--studio-palette:182px;--studio-inspector:236px;--studio-editor-min:320px;grid-template-columns:var(--studio-rail) var(--studio-palette) minmax(var(--studio-editor-min),1fr) var(--studio-inspector);}
 body:not(.canvas-focus) .studio.palette-collapsed{--studio-palette:36px;grid-template-columns:var(--studio-rail) var(--studio-palette) minmax(var(--studio-editor-min),1fr) var(--studio-inspector);}
 body:not(.canvas-focus) .studio.animation-collapsed{--studio-inspector:36px;}
}
@media(min-width:851px) and (max-width:1150px){body:not(.canvas-focus) .studio{--studio-rail:51px;--studio-palette:158px;--studio-inspector:210px;--studio-editor-min:300px;}body:not(.canvas-focus) .studio.animation-collapsed{--studio-inspector:36px;}}
@media(min-width:1450px){body:not(.canvas-focus) .studio{--studio-rail:64px;--studio-palette:196px;--studio-inspector:266px;--studio-editor-min:500px;}body:not(.canvas-focus) .studio.animation-collapsed{--studio-inspector:36px;}}
/* Tablet settings stay below the editor; only the right inspector folds. */
@media(min-width:581px) and (max-width:850px){
 body:not(.canvas-focus) .studio{--studio-inspector:192px;}
 body:not(.canvas-focus) .studio.animation-collapsed{grid-template-columns:49px minmax(0,1fr) var(--studio-inspector);}
}

.animation-folded-name{display:none;}
@media(min-width:581px){
 body:not(.canvas-focus) .studio.animation-collapsed{--studio-inspector:72px;}
 body:not(.canvas-focus) .studio.animation-collapsed>.inspector{display:flex;flex-direction:column;min-height:0;height:100%;max-height:var(--palette-folded-height,100dvh);align-self:start;overflow:hidden;}
 body:not(.canvas-focus) .studio.animation-collapsed>.inspector>.preview-panel{width:72px;flex:none;}
 body:not(.canvas-focus) .studio.animation-collapsed .animation-expanded-name{display:none;}
 body:not(.canvas-focus) .studio.animation-collapsed .animation-folded-name{display:inline;}
 body:not(.canvas-focus) .studio.animation-collapsed>.inspector>.layers-panel{display:flex;flex-direction:column;flex:1;min-height:0;padding:6px 4px;}
 body:not(.canvas-focus) .studio.animation-collapsed>.inspector>.layers-panel>:not(#layerList){display:none;}
 body:not(.canvas-focus) .studio.animation-collapsed #layerList{max-height:none;min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;overflow-anchor:none;scrollbar-width:thin;touch-action:pan-y;}
 body:not(.canvas-focus) .studio.animation-collapsed .layer-row{justify-content:center;gap:2px;padding:2px;height:34px;min-height:34px;margin:0 0 2px;touch-action:pan-y;}
 body:not(.canvas-focus) .studio.animation-collapsed .layer-row>:not(.layer-eye):not(.layer-select){display:none;}
 body:not(.canvas-focus) .studio.animation-collapsed .layer-row button{touch-action:pan-y;}
 body:not(.canvas-focus) .studio.animation-collapsed .layer-eye{width:20px;height:28px;flex:0 0 20px;padding:2px;}
 body:not(.canvas-focus) .studio.animation-collapsed .layer-eye svg{width:14px;height:14px;}
 body:not(.canvas-focus) .studio.animation-collapsed .layer-thumb{width:28px;height:28px;}
}
/* Keep frame selection available in the regular collapsed timeline. */
body:not(.canvas-focus) .studio.timeline-collapsed>.editor-column>.timeline{flex-direction:row;align-items:center;gap:8px;padding:4px 10px;}
body:not(.canvas-focus) .studio.timeline-collapsed>.editor-column>.timeline>.timeline-toolbar{flex:none;width:auto;min-height:0;padding:0;gap:0;flex-wrap:nowrap;}
body:not(.canvas-focus) .studio.timeline-collapsed .timeline-title{flex:none;width:auto;gap:8px;}
body:not(.canvas-focus) .studio.timeline-collapsed #frameTotal{display:none;}
body:not(.canvas-focus) .studio.timeline-collapsed>.editor-column>.timeline>.frame-strip{display:flex;flex:1;min-width:0;min-height:0;height:30px;align-items:center;gap:5px;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain;}
body:not(.canvas-focus) .studio.timeline-collapsed .frame-strip::-webkit-scrollbar{display:none;}
body:not(.canvas-focus) .studio.timeline-collapsed .frame-card{flex:0 0 34px;min-width:34px;width:34px;height:30px;padding:0;touch-action:pan-x;}
body:not(.canvas-focus) .studio.timeline-collapsed .frame-card canvas,body:not(.canvas-focus) .studio.timeline-collapsed .frame-duration{display:none;}
body:not(.canvas-focus) .studio.timeline-collapsed .frame-number{display:block;width:100%;padding:0;line-height:28px;font-size:11px;text-align:center;background:transparent;}
body:not(.canvas-focus) .studio.timeline-collapsed .frame-card::after{display:none;}

/* Keep canvas settings and color tools together within their own columns. */
.palette-tools-panel{display:contents;}
#paletteCollapse[hidden]{display:none;}
@media(max-width:850px){
 body:not(.canvas-focus) .palette-panel{grid-template-columns:180px minmax(0,1fr);grid-template-rows:auto;align-items:start;gap:16px;}
 body:not(.canvas-focus) .palette-panel>.canvas-settings-panel{display:block;grid-column:1;grid-row:1;min-width:0;border-right:1px solid var(--border);padding:0 16px 0 0;}
 body:not(.canvas-focus) .palette-panel>.palette-tools-panel{display:flex;flex-direction:column;gap:12px;grid-column:2;grid-row:1;min-width:0;}
 body:not(.canvas-focus) .palette-tools-panel>.palette-heading{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0;min-width:0;}
 body:not(.canvas-focus) .palette-tools-panel>.palette-heading h2{flex:1;min-width:0;white-space:nowrap;}
 body:not(.canvas-focus) .palette-tools-panel>.palette-heading>.label-small{width:auto;margin:0;font-size:8px;}
 body:not(.canvas-focus) .palette-tools-panel>.palette-controls{display:flex;flex-wrap:wrap;gap:5px;margin:0;min-width:0;}
 body:not(.canvas-focus) .palette-tools-panel>.palette-controls select{min-width:0;flex:1;width:0;}
 body:not(.canvas-focus) .palette-tools-panel>.palette{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;align-self:stretch;margin:0;min-width:0;}
 body:not(.canvas-focus) .palette-tools-panel>.palette .swatch{height:30px;min-width:0;}
 body:not(.canvas-focus) .palette-tools-panel>.color-editor{min-width:0;gap:8px;}
 body:not(.canvas-focus) .palette-tools-panel>.color-editor #hexInput{width:82px;max-width:100%;}
 body:not(.canvas-focus) .palette-panel>.canvas-settings-panel>.subheading{margin:0 0 14px;}
 body:not(.canvas-focus) .palette-panel>.canvas-settings-panel>.switch-row{display:flex;margin:12px 0;gap:4px;line-height:1.5;font-size:10px;}
 body:not(.canvas-focus) .palette-panel>.canvas-settings-panel>.checker-size-control{margin:12px 0;}
 body:not(.canvas-focus) .palette-panel>.canvas-settings-panel>.canvas-background-control{margin:12px 0;}
}
@media(min-width:701px) and (max-width:850px){
 body:not(.canvas-focus) .palette-tools-panel>.palette{grid-template-columns:repeat(12,minmax(0,1fr));}
}
@media(max-width:580px){
 body:not(.canvas-focus) .palette-panel{grid-template-columns:minmax(100px,.82fr) minmax(0,1fr);gap:12px;}
 body:not(.canvas-focus) .palette-panel>.canvas-settings-panel{padding-right:10px;}
 body:not(.canvas-focus) .palette-tools-panel>.palette{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}
 body:not(.canvas-focus) .palette-tools-panel>.palette-heading h2{font-size:10px;}
 body:not(.canvas-focus) .palette-tools-panel>.color-editor #hexInput{font-size:10px;width:68px;}
 body:not(.canvas-focus) .palette-panel>.canvas-settings-panel>.subheading{gap:4px;font-size:10px;}
 body:not(.canvas-focus) .palette-panel>.canvas-settings-panel>.switch-row{font-size:9px;}
 body:not(.canvas-focus) .palette-panel .checker-size-heading{flex-wrap:wrap;gap:4px;}
}

/* One scroll owner for the full right sidebar; compact lists own their scroll. */
@media(min-width:581px){
 body:not(.canvas-focus) .studio:not(.animation-collapsed)>.inspector{contain:size;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior:contain;}
 body:not(.canvas-focus) .studio:not(.animation-collapsed)>.inspector #layerList{max-height:none;overflow:visible;}
 body:not(.canvas-focus) .studio:not(.animation-collapsed) .animation-heading{position:sticky;top:0;z-index:3;min-height:28px;background:var(--panel);}
 body:not(.canvas-focus) .studio:not(.animation-collapsed) .layers-panel>.panel-heading{position:sticky;top:0;z-index:3;min-height:28px;margin:0;background:var(--panel);}
 body:not(.canvas-focus) .studio:not(.animation-collapsed) .layers-panel>.layer-actions{position:sticky;top:28px;z-index:3;background:var(--panel);}
}
/* The wide layer panel also uses its host rather than a second inner scrollbar. */
.canvas-focus .focus-panel-host:has(.layers-panel:not(.layers-minimal)){scrollbar-gutter:stable;}
.canvas-focus .focus-panel-host .layers-panel:not(.layers-minimal) #layerList{max-height:none;overflow:visible;}
.canvas-focus .focus-panel-host .layers-panel:not(.layers-minimal)>.panel-heading{position:sticky;top:0;z-index:3;min-height:28px;margin:0;background:var(--panel);}
.canvas-focus .focus-panel-host .layers-panel:not(.layers-minimal)>.layer-actions{position:sticky;top:28px;z-index:3;background:var(--panel);}

/* All five layer actions fit beside the reserved scrollbar at narrow widths. */
body:not(.canvas-focus) .studio:not(.animation-collapsed)>.inspector .layer-actions{gap:3px;padding-inline:0;flex-wrap:nowrap;}
.canvas-focus .focus-panel-host .layers-panel:not(.layers-minimal)>.layer-actions{gap:3px;padding-inline:0;flex-wrap:nowrap;}
/* Slider margins and the HEX field must fit the scrollable palette width. */
.palette-panel input[type=range]{margin-inline:0;}
.palette-panel .color-editor>div{min-width:0;flex:1;}
.palette-panel .color-editor #hexInput{max-width:100%;}

/* Bars remain available as a quiet fallback; wheel/touch are the primary input. */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:#71809670;border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:#95a6bea8;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-button{display:none;}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:#71809670 transparent;}}
@supports selector(::-webkit-scrollbar){#palette,#layerList{scrollbar-width:auto;}}
/* Horizontal controls never acquire an incidental vertical scrolling axis. */
.selection-toolbar{height:40px;min-height:40px;overflow-y:hidden;overscroll-behavior:auto;}
.selection-toolbar button:focus-visible,.selection-toolbar input:focus-visible{outline-offset:-2px;}
.frame-strip{overflow-y:hidden;overscroll-behavior:auto;}
.frame-card:focus-visible{outline-offset:-2px;}
body:not(.canvas-focus) .studio:not(.timeline-collapsed) .frame-card canvas{width:var(--frame-thumb-size,96px);height:var(--frame-thumb-size,96px);}
@media(min-width:1450px){body:not(.canvas-focus) .studio:not(.timeline-collapsed) .frame-card canvas{width:var(--frame-thumb-size,60px);height:var(--frame-thumb-size,60px);}}
body:not(.canvas-focus) .studio:not(.timeline-collapsed)>.editor-column>.timeline.timeline-two-rows>.timeline-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px;}
body:not(.canvas-focus) .studio:not(.timeline-collapsed)>.editor-column>.timeline.timeline-two-rows .timeline-title{grid-column:1;grid-row:1;width:auto;}
body:not(.canvas-focus) .studio:not(.timeline-collapsed)>.editor-column>.timeline.timeline-two-rows .timeline-actions{grid-column:2;grid-row:1;margin:0;}
body:not(.canvas-focus) .studio:not(.timeline-collapsed)>.editor-column>.timeline.timeline-two-rows .transport{grid-column:1 / -1;grid-row:2;width:auto;}
@media(min-width:851px) and (max-width:1150px){body:not(.canvas-focus) .studio:not(.timeline-collapsed){grid-template-rows:minmax(0,1fr) max(var(--timeline-min-height,0px),min(230px,40dvh));}}
/* Flowing layouts have one vertical scroll owner: the page itself. */
body.page-scroll-layout:not(.canvas-focus) .studio>.inspector{contain:none;align-self:start;height:auto;max-height:none;overflow:visible;scrollbar-gutter:auto;overscroll-behavior:auto;}
body.page-scroll-layout:not(.canvas-focus) .studio>.inspector #layerList{max-height:none;overflow:visible;overscroll-behavior:auto;}
body.page-scroll-layout:not(.canvas-focus) .studio:not(.palette-collapsed)>.palette-panel{align-self:start;height:auto;max-height:none;overflow:visible;overscroll-behavior:auto;}
body.page-scroll-layout:not(.canvas-focus) .studio.palette-collapsed>.palette-panel{height:auto;max-height:none;overflow:visible;}
body.page-scroll-layout:not(.canvas-focus) .studio.palette-collapsed #palette{overflow:visible;}
body.page-scroll-layout:not(.canvas-focus) .studio>.tool-rail{overflow:visible;}
body.page-scroll-layout:not(.canvas-focus) .timeline{align-self:start;height:auto;min-height:0;overflow:visible;}
body.page-scroll-layout:not(.canvas-focus) .studio:not(.timeline-collapsed)>.editor-column>.timeline>.frame-strip,.canvas-focus .focus-panel-host .timeline:not(.timeline-minimal)>.frame-strip{flex:0 0 auto;min-height:0;}
body.page-scroll-layout:not(.canvas-focus) .layer-row,body.page-scroll-layout:not(.canvas-focus) .layer-row button{touch-action:pan-y;}
body.page-scroll-layout:not(.canvas-focus) .studio.timeline-collapsed .frame-strip,body.page-scroll-layout:not(.canvas-focus) .studio.timeline-collapsed .frame-card{touch-action:pan-x pan-y;}
@media(min-width:851px){
 body.page-scroll-layout:not(.canvas-focus) .studio,body.page-scroll-layout:not(.canvas-focus) .studio:not(.timeline-collapsed){height:auto;min-height:0;grid-template-rows:360px auto;}
 body.page-scroll-layout:not(.canvas-focus) .studio.timeline-collapsed{grid-template-rows:calc(360px + var(--timeline-expanded-height,250px) - 40px) minmax(40px,auto);}
}
@media(min-width:581px) and (max-width:850px){body.page-scroll-layout:not(.canvas-focus) .studio.timeline-collapsed{grid-template-rows:calc(480px + var(--timeline-expanded-height,225px) - 40px) minmax(40px,auto) auto;}}

/* Keep the center column independent from a long layer list in flowing pages. */
.editor-column{display:contents;}
body.page-scroll-layout:not(.canvas-focus) .studio,body.page-scroll-layout:not(.canvas-focus) .studio:not(.timeline-collapsed),body.page-scroll-layout:not(.canvas-focus) .studio.timeline-collapsed{grid-template-rows:auto;}
body.page-scroll-layout:not(.canvas-focus) .studio>.tool-rail{grid-row:1;}
body.page-scroll-layout:not(.canvas-focus) .studio>.editor-column{display:flex;flex-direction:column;grid-row:1;grid-column:3;align-self:start;min-width:0;min-height:0;}
body.page-scroll-layout:not(.canvas-focus) .studio>.palette-panel{grid-row:1;}
body.page-scroll-layout:not(.canvas-focus) .studio>.inspector{grid-row:1;}
body.page-scroll-layout:not(.canvas-focus) .editor-column>.editor{height:360px;flex:0 0 360px;}
body.page-scroll-layout:not(.canvas-focus) .studio.timeline-collapsed>.editor-column>.editor{height:calc(360px + var(--timeline-expanded-height,250px) - 40px);flex-basis:calc(360px + var(--timeline-expanded-height,250px) - 40px);}
body.page-scroll-layout:not(.canvas-focus) .editor-column>.timeline{width:100%;flex:none;}
body.page-scroll-layout:not(.canvas-focus) .editor-column>.palette-panel{width:100%;flex:none;}
body.page-scroll-layout:not(.canvas-focus) .studio .inspector #layerList{max-height:none;overflow:visible;}
@media(max-width:850px){
 body.page-scroll-layout:not(.canvas-focus) .studio>.editor-column{grid-column:2;}
 body.page-scroll-layout:not(.canvas-focus) .editor-column>.editor{height:480px;flex-basis:480px;}
 body.page-scroll-layout:not(.canvas-focus) .studio.timeline-collapsed>.editor-column>.editor{height:calc(480px + var(--timeline-expanded-height,225px) - 40px);flex-basis:calc(480px + var(--timeline-expanded-height,225px) - 40px);}
}
@media(min-width:581px) and (max-width:850px){
 body.page-scroll-layout:not(.canvas-focus) .editor-column>.palette-panel{grid-template-columns:150px minmax(0,1fr);}
 body.page-scroll-layout:not(.canvas-focus) .editor-column .palette-tools-panel>.palette{grid-template-columns:repeat(6,minmax(0,1fr));}
}
@media(max-width:580px){
 body.page-scroll-layout:not(.canvas-focus) .editor-column>.editor{height:415px;flex-basis:415px;}
 body.page-scroll-layout:not(.canvas-focus) .studio.timeline-collapsed>.editor-column>.editor{height:calc(415px + var(--timeline-expanded-height,225px) - 40px);flex-basis:calc(415px + var(--timeline-expanded-height,225px) - 40px);}
 body.page-scroll-layout:not(.canvas-focus) .editor-column>.inspector{width:100%;flex:none;}
}

/* Tool widths include padding and the quiet vertical scrollbar, with no sideways axis. */
.tool-rail{padding-inline:3px;overflow-x:hidden;}
.tool-rail>.tool,.tool-rail>.rail-color{max-width:100%;}
.timeline-toolbar{flex-shrink:0;}
.timeline-actions #moveFrameLeft,.timeline-actions #moveFrameRight{width:23px;padding:3px;font-size:13px;}

/* Compact layer names sit beside the eye, outside the scrolling column. */
.layer-name-popover{position:fixed;z-index:80;pointer-events:none;max-width:min(280px,calc(100vw - 24px));padding:8px 11px;border:1px solid #c4ed7b66;border-radius:6px;background:#29312a;color:#e8f3dc;box-shadow:0 4px 16px #0005;font-size:11px;line-height:1.5;overflow-wrap:anywhere;}
.layer-name-popover[hidden]{display:none;}
.layer-name-popover::after{content:'';position:absolute;right:-5px;top:50%;width:8px;height:8px;background:#29312a;border-top:1px solid #c4ed7b66;border-right:1px solid #c4ed7b66;transform:translateY(-50%) rotate(45deg);}
.canvas-focus .timeline-minimize,.canvas-focus .layers-minimize{color:var(--accent);background:#c4ed7b15;border-color:#c4ed7b66;}
.canvas-focus .timeline-minimize:hover,.canvas-focus .layers-minimize:hover{background:#c4ed7b28;border-color:var(--accent);}
@media(min-width:1151px){
 .focus-dock,.focus-dock.minimal-desktop{top:auto;bottom:10px;right:10px;left:auto;display:flex;flex-direction:column-reverse;width:auto;max-width:calc(100vw - 68px);filter:drop-shadow(0 -5px 12px #0006);}
 .focus-panel-host,.focus-dock.minimal-desktop .focus-panel-host{align-self:flex-end;margin:0 0 5px auto;}
 .focus-dock.has-minimal-layers .focus-panel-host{width:166px;align-self:flex-end;}
 .focus-dock.has-minimal-timeline .focus-panel-host{width:320px;}
}

.onion-mode-control{width:100%;min-width:0;margin:0 0 12px;}
.onion-mode-control[hidden]{display:none;}
.onion-mode-control select{display:block;width:100%;max-width:100%;font-size:10px;padding:5px 12px 5px 3px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%2396a3b6' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 3px center;background-size:8px 5px;}
@media(max-width:580px){.onion-mode-control select{font-size:9px;}}
.layers-heading{gap:6px;}
.layers-heading h2{flex:1;min-width:0;}
.layers-heading #layersCollapse{width:22px;height:28px;padding:3px;flex:none;}
#layersCollapse svg{transform:rotate(90deg);}
#layersCollapse[hidden],.focus-panel-host #layersCollapse{display:none;}

.canvas-status{justify-content:flex-start;gap:12px;min-width:0;overflow:hidden;}
.canvas-status #coord{flex:none;margin-left:0;white-space:nowrap;}
.canvas-help{display:flex;align-items:center;gap:10px;flex:1;min-width:0;overflow:hidden;}
.canvas-help .tool-hint{color:#c8d1df;order:0;flex:0 1 auto;font-size:9px;line-height:1.4;}
.canvas-help .touch-pan-hint{color:#c8d1df!important;flex:none;margin:0;}
.canvas-status #activeCel{margin-left:auto;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;}
.canvas-stage.is-panning,.canvas-stage.is-panning #canvas{cursor:grabbing!important;}
#focusBtn[aria-pressed="false"]{color:#fff;border-color:var(--accent);}
.touch-mode-group{display:flex;align-items:center;gap:8px;min-width:0;}
.selection-cancel{color:#ffb7a8;background:#ffb7a814;border-color:#ffb7a866;white-space:nowrap;}
.selection-cancel:hover{background:#ffb7a829;border-color:#ffb7a899;}
#deselect[hidden]{display:none;}
@media(max-width:360px){
  .touch-toolbar:has(#deselect:not([hidden])) .touch-mode-group{gap:5px;}
  .touch-toolbar:has(#deselect:not([hidden])) .touch-mode-switch{font-size:8px;gap:4px;}
  .touch-toolbar:has(#deselect:not([hidden])) #deselect,.touch-toolbar:has(#deselect:not([hidden])) #focusBtn{font-size:8px;padding-inline:4px;}
  .touch-toolbar:has(#deselect:not([hidden])) #focusBtn svg{display:none;}
}
#canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
#canvas[data-pointer-focus]:focus{outline:none;}
@media(max-width:580px){.canvas-status{gap:8px;padding-inline:7px;}.canvas-help{gap:6px;}.canvas-help .tool-hint{font-size:8px;}}

/* Selection actions overlay the stage while selecting or editing a selection. */
.editor{position:relative;}
.selection-toolbar{position:absolute;left:8px;top:8px;z-index:6;width:max-content;max-width:calc(100% - 16px);height:40px;min-height:40px;padding:4px 6px;gap:4px;border:1px solid #c4ed7b55;border-radius:7px;background:#202731f5;box-shadow:0 4px 16px #0005;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;}
.selection-toolbar[hidden]{display:none;}
.selection-toolbar #selectionInfo{min-width:0;margin:0 4px;font-size:9px;}
.selection-toolbar .vertical-divider{margin:0 2px;}
.selection-toolbar #freeTransform{color:var(--accent);}
.selection-settings{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;}
.selection-settings[hidden]{display:none;}
.selection-settings .magic-options{display:flex;flex-wrap:wrap;gap:10px;}
.selection-settings .magic-options[hidden]{display:none;}
.selection-settings label{white-space:nowrap;}
.selection-settings input{width:60px;}
.transform-flips{display:flex;align-items:center;gap:3px;}
.transform-flips button{width:28px;height:28px;padding:5px;background:#c4ed7b0c;color:var(--accent);border-color:#c4ed7b44;}
.transform-flips svg{width:15px;height:15px;}
@media(max-width:580px){.selection-toolbar #selectionInfo{display:none;}.selection-toolbar{left:6px;max-width:calc(100% - 12px);gap:3px;}.selection-toolbar button{padding:4px;}.selection-toolbar #freeTransform{padding:4px 5px;font-size:9px;}.selection-settings{gap:10px;}.selection-settings label{font-size:10px;}}

/* Drawing mode has one compact header; exit controls overlay the canvas. */
.canvas-focus .editor-toolbar{padding-inline:8px;gap:8px;flex-wrap:nowrap;}
.canvas-focus .editor-toolbar .file-tab{display:none;}
.canvas-focus .editor-toolbar .touch-mode-group{flex:none;}
.canvas-focus .editor-toolbar .touch-mode-switch{border:0;background:transparent;padding:0;min-height:36px;gap:7px;flex-shrink:0;font-size:10px;}
.canvas-focus .editor-toolbar .selection-cancel{font-size:10px;padding:5px 10px;min-height:28px;}
.canvas-focus .editor-toolbar .toolbar-actions{flex:none;gap:3px;}
.canvas-focus .touch-toolbar{display:contents;}
.canvas-focus .touch-controls{position:absolute;top:var(--drawing-exit-top,57px);right:12px;z-index:9;margin-left:0;}
.canvas-focus .drawing-hide-zoom #zoomOut,.canvas-focus .drawing-hide-zoom #zoomIn,.canvas-focus .drawing-hide-percent #zoomLabel,.canvas-focus .drawing-hide-fit #fitBtn{display:none;}
.canvas-focus .drawing-hide-fit .toolbar-actions>.vertical-divider{display:none;}
.canvas-focus .drawing-cancel-floating #deselect{position:absolute;top:calc(var(--drawing-header-height,49px) + 8px);left:8px;z-index:9;}
.canvas-focus .selection-toolbar{max-width:calc(100% - var(--drawing-return-width,80px) - 32px);}
.canvas-focus .editor:has(.drawing-cancel-floating) .selection-toolbar{max-width:calc(100% - 16px);}
@media(max-width:580px){
  .canvas-focus .editor-toolbar .touch-mode-switch{font-size:9px;gap:5px;}
  .canvas-focus .editor-toolbar .selection-cancel{font-size:9px;padding-inline:6px;}
  .canvas-focus .touch-controls{right:7px;}
  .canvas-focus .selection-toolbar{max-width:calc(100% - var(--drawing-return-width,80px) - 24px);}
  .canvas-focus .editor:has(.drawing-cancel-floating) .selection-toolbar{max-width:calc(100% - 12px);}
}
.canvas-focus .editor-toolbar.drawing-compact{padding-inline:4px;gap:4px;}
.canvas-focus .drawing-compact .touch-mode-switch{font-size:8px;gap:3px;}
.canvas-focus .drawing-compact .touch-switch-track{width:28px;}
.canvas-focus .drawing-compact .touch-mode-switch[data-mode="pan"] .touch-switch-thumb{transform:translateX(8px);}

/* Keep touch slider endpoints away from system edge gestures. HSV ranges already
   have a numeric field on their right; retain that space and their track length. */
html.touch-device .opacity-control input[type=range],
html.touch-device .checker-size-control input[type=range]{width:70%;justify-self:start;}


/* Post-drawing cleanup uses its own compact controls above the selected area. */
.outline-toolbar{position:absolute;left:8px;z-index:7;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:max-content;max-width:calc(100% - 16px);padding:6px 8px;border:1px solid #c4ed7b55;border-radius:7px;background:#202731f5;box-shadow:0 4px 16px #0005;}
.outline-toolbar[hidden]{display:none;}
.outline-toolbar label{display:flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap;}
.outline-toolbar input{width:47px;padding:5px 3px;font-variant-numeric:tabular-nums;}
.outline-toolbar select{width:60px;padding:5px 2px;}
.outline-toolbar output{font-size:9px;color:var(--accent);white-space:nowrap;}
.outline-toolbar output:empty{display:none;}
.outline-scopes{display:flex;flex-wrap:wrap;gap:3px;max-width:100%;}
.outline-scopes button{font-size:10px;padding:5px 7px;}
.outline-scopes button[aria-pressed=true]{color:var(--accent);border-color:#c4ed7b88;background:#c4ed7b12;}
.canvas-focus .outline-toolbar{max-width:calc(100% - var(--drawing-return-width,80px) - 32px);}
.canvas-focus .editor:has(.drawing-cancel-floating) .outline-toolbar{max-width:calc(100% - 16px);}
@media(max-width:580px){.outline-toolbar{left:6px;max-width:calc(100% - 12px);gap:6px;}.canvas-focus .outline-toolbar{max-width:calc(100% - var(--drawing-return-width,80px) - 24px);}.canvas-focus .editor:has(.drawing-cancel-floating) .outline-toolbar{max-width:calc(100% - 12px);}}

/* Transform quality toggle: visible state without increasing the control height. */
.transform-auto-correct{font-size:10px;padding:5px 7px;white-space:nowrap}.transform-auto-correct[aria-pressed="true"]{color:var(--accent);border-color:#c4ed7b99;background:#c4ed7b18}.transform-auto-correct[aria-pressed="false"]{color:var(--muted);background:transparent}

/* A small canvas-only resize panel; artwork is not resampled. */
.canvas-resize-button{font-size:10px;padding:7px 9px;margin:0 0 8px;color:var(--accent);border-color:#c4ed7b55;align-self:flex-start}
#canvasResizeDialog{position:fixed;inset:auto 10px var(--resize-bottom,10px) auto;margin:0;width:264px;max-width:calc(100vw - 20px);max-height:var(--resize-max-height,calc(100dvh - 20px));padding:14px;border:1px solid #c4ed7b66;border-radius:8px;background:#232a35;box-shadow:0 12px 38px #0007;overflow:auto;color:var(--text)}
#canvasResizeDialog::backdrop{background:#10151b16;backdrop-filter:none;-webkit-backdrop-filter:none}#canvasResizeDialog [hidden]{display:none!important}
.canvas-resize-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:12px}.canvas-resize-heading h2{font-size:13px;letter-spacing:0;white-space:nowrap}.canvas-resize-heading button{font-size:20px;line-height:1;width:26px;height:26px;padding:0;background:transparent;border-color:transparent}
.canvas-resize-body{display:grid;grid-template-columns:102px minmax(0,1fr);gap:12px;align-items:center}.canvas-resize-label{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.canvas-resize-anchors{display:grid;grid-template-columns:repeat(3,32px);gap:3px}.canvas-resize-anchors button{width:32px;height:30px;min-width:0;padding:0;font-size:18px;line-height:1;gap:0}.canvas-resize-anchors button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.canvas-resize-fields{display:grid;gap:12px}.canvas-resize-fields label{display:block;margin:0!important;font-size:10px;color:var(--muted)}.canvas-resize-fields label>span{display:flex;align-items:center;gap:5px;margin-top:4px}.canvas-resize-fields input{width:100%;min-width:0;padding:6px;font:13px ui-monospace,monospace;height:32px}
.canvas-resize-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:14px}.canvas-resize-actions button{font-size:10px;padding:7px 9px}.canvas-resize-confirm p{font-size:11px!important;line-height:1.6!important;color:#ffb4be;margin:12px 0 0!important}.canvas-resize-confirm .canvas-resize-actions{margin-top:9px}
.canvas-resize-preview{position:fixed;z-index:40;pointer-events:none;background-color:#171b23;background-image:radial-gradient(#424b5d77 .7px,transparent .7px);background-size:16px 16px;image-rendering:pixelated}.canvas-resize-preview[hidden]{display:none}
.preview-stage{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;}
.preview-stage #preview{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;}
.preview-stage.preview-pannable{cursor:grab;}
.preview-stage.preview-pannable.preview-dragging{cursor:grabbing;}
.preview-panel .preview-controls{justify-content:flex-start;gap:3px;}
.preview-panel .preview-controls .icon-button{flex:0 0 25px;width:25px;height:27px;padding:4px;}
.preview-controls #previewCount{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;}
.preview-zoom-controls{display:flex;align-items:center;justify-content:center;gap:3px;margin-top:3px;color:var(--muted);}
.preview-zoom-controls .icon-button{flex:0 0 25px;width:25px;height:25px;padding:4px;}
#previewZoomLabel{min-width:38px;text-align:center;font:9px ui-monospace,monospace;}
#previewFit[aria-pressed=true]{color:var(--accent);}

/* The drawing-mode preview can retain its exact viewport as a small right-hand panel. */
.focus-dock.has-minimal-preview .focus-panel-host{align-self:flex-end;width:calc(var(--minimal-preview-width) + 8px);max-width:100%;margin-left:auto;overflow:hidden;border-radius:6px;}
.focus-panel-host .preview-panel.preview-minimal{padding:3px;min-width:0;}
.focus-panel-host .preview-panel.preview-minimal>:not(.preview-stage){display:none;}
.focus-panel-host .preview-minimal .preview-stage{width:var(--minimal-preview-width);max-width:100%;margin:0;}

.canvas-focus .focus-mounted .animation-heading{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
.focus-mounted .animation-heading h2{justify-self:start;}
.focus-mounted .animation-heading #previewState{justify-self:center;white-space:nowrap;}
.focus-mounted .animation-heading #previewMinimize{justify-self:end;margin-left:0;}
/* Reference help: short, scannable notes rather than a walkthrough. */
#helpDialog{width:640px;}
#helpDialog .help-section+ .help-section{border-top:1px solid var(--border);margin-top:20px;padding-top:18px;}
#helpDialog h3{font-size:13px;color:var(--accent);margin:0 0 10px;}
#helpDialog p,#helpDialog dd,#helpDialog li{font-size:12px;line-height:1.7;color:#b4bfd0;}
#helpDialog p{margin:5px 0;}
#helpDialog dl{margin:0;}
#helpDialog dt{font-size:12px;line-height:1.7;color:var(--text);font-weight:600;}
#helpDialog dd{margin:0;}
#helpDialog .help-operations>div{display:grid;grid-template-columns:116px minmax(0,1fr);gap:10px;margin-top:8px;}
#helpDialog .help-keymap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin-top:16px;padding:12px;background:#191e2780;border-radius:6px;}
#helpDialog .help-keymap dt{font-weight:400;}
#helpDialog .help-keymap kbd{white-space:nowrap;font-size:9px;}
#helpDialog .help-notes{padding-left:17px;margin:10px 0 0;}
#helpDialog .help-notes li+li{margin-top:4px;}
#helpDialog .help-definitions>div+div{margin-top:10px;}
#helpDialog .help-limits>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;margin-top:5px;}
@media(max-width:580px){#helpDialog{padding:20px;}#helpDialog .help-operations>div{grid-template-columns:1fr;gap:2px;}#helpDialog .help-keymap{gap:10px;padding:10px;}#helpDialog .help-limits>div{grid-template-columns:90px minmax(0,1fr);gap:8px;}}
@media(max-width:360px){#helpDialog .help-keymap{grid-template-columns:1fr;}}

#helpDialog .help-keymap dd{font-size:11px;}
#helpDialog .help-essential{margin-bottom:14px;}
#helpDialog .help-essential p{color:#e0e6ef;font-weight:500;}

/* Keep drawing-mode controls readable over bright artwork and easier to tap. */
.canvas-focus #focusBtn{color:#fff;background:#20252f;border:1px solid var(--accent);box-shadow:0 2px 8px #0006,0 0 0 1px #10151bcc;}
.canvas-focus #focusBtn:hover{color:#fff;background:#303947;border-color:#dbf6b0;}
.canvas-focus .editor-toolbar :is(#undoBtn,#redoBtn){width:44px;min-width:44px;flex:0 0 44px;background:#ffffff06;border-color:#ffffff18;border-radius:5px;}
.canvas-focus .editor-toolbar :is(#undoBtn,#redoBtn):not(:disabled):hover{background:#343d4b;border-color:#647084;}
.canvas-focus .editor-toolbar #historyBtn{margin-left:6px;}

/* Color wheel and the existing HSV inputs share the same draft color. */
.palette-color-controls{display:grid;grid-template-columns:168px minmax(0,1fr);align-items:center;gap:16px;margin:16px 0;}
.palette-color-wheel{position:relative;width:168px;aspect-ratio:1;justify-self:center;flex-shrink:0;}
.color-hue-ring{position:absolute;inset:0;border-radius:50%;touch-action:none;user-select:none;cursor:crosshair;}
.color-hue-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);-webkit-mask:radial-gradient(circle closest-side,transparent 71%,#000 72%);mask:radial-gradient(circle closest-side,transparent 71%,#000 72%);}
.color-sv-square{position:absolute;inset:25%;border:1px solid #ffffff45;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);touch-action:none;user-select:none;cursor:crosshair;}
.color-wheel-marker{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #10151b,0 1px 4px #0008;transform:translate(-50%,-50%);pointer-events:none;}
.palette-hsv-controls{min-width:0;}
.palette-color-controls .hsv-control{column-gap:6px;grid-template-columns:27px minmax(0,1fr) 51px 9px;}
.color-hue-ring:focus-visible,.color-sv-square:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
@media(max-width:580px){.palette-color-controls{grid-template-columns:1fr;gap:0;}.palette-color-wheel{width:184px;}.palette-hsv-controls{width:100%;}}

#exportDialog .export-error{color:#ffd3d8;background:#422a32;border:1px solid #c87584;border-radius:6px;padding:10px 12px;font-size:11px;line-height:1.7;overflow-wrap:anywhere;}
#exportDialog .export-error[hidden]{display:none;}

.project-capacity{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;margin-top:16px;color:var(--muted);font-size:9px;line-height:1.6;min-width:0;}
.project-capacity output{font:9px ui-monospace,monospace;white-space:nowrap;}
.project-capacity[data-level="warning"]{color:#e8c66b;}
.project-capacity[data-level="danger"]{color:#ff929e;}

#imageResizeNoticeDialog{width:340px;padding:20px;}
#imageResizeNoticeDialog .dialog-heading-text h2{font-size:16px;}
#imageResizeNoticeDialog .image-resize-notice-size{color:var(--text);font-size:13px;line-height:1.7;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
#imageResizeNoticeDialog .dialog-actions{margin-top:16px;}

.drive-conflict-dialog{width:430px;max-width:calc(100vw - 28px);padding:22px;}
.drive-conflict-dialog h2{font-size:17px;color:#ffb1b1;}
.drive-conflict-dialog p{color:#dce2ed;line-height:1.9;overflow-wrap:anywhere;}
.drive-conflict-dialog .dialog-actions{flex-wrap:wrap;gap:10px;}
.drive-conflict-dialog .dialog-actions button{white-space:normal;}

/* A shared compact view; the original layer and timeline panels remain independent. */
.matrix-launch{display:none;width:28px;height:30px;min-width:28px;padding:5px;flex:none;color:var(--accent);border-color:#c4ed7b55;background:#c4ed7b12;}
.matrix-launch svg{width:15px;height:15px;}
.timeline-layers-panel[hidden]{display:none;}
.timeline-layers-panel{height:min(var(--matrix-content-height,146px),max(0px,calc(var(--minimal-layer-height,148px) - 2px)));padding:3px;display:flex;min-height:0;min-width:0;}
.focus-dock.has-timeline-layers .focus-panel-host{width:640px;max-width:100%;overflow:hidden;}
.focus-dock.has-timeline-layers{width:min(640px,calc(100vw - 68px));}
.timeline-layers-viewport{flex:1;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#566354 #20252f;overflow-anchor:none;}
.timeline-layers-viewport::-webkit-scrollbar{width:4px;height:4px;}
.timeline-layers-content{position:relative;min-width:100%;}
.timeline-layers-header{position:sticky;top:0;height:33px;background:#20252f;z-index:4;}
.timeline-layers-corner{position:sticky;left:0;display:flex;align-items:center;gap:5px;width:112px;height:33px;padding:0 3px;background:#20252f;z-index:2;}
.matrix-play{display:inline-flex;min-width:26px;width:26px;height:33px;padding:2px 5px;flex:none;}
.matrix-play{color:var(--accent);border:0;background:transparent;}
.matrix-play svg{width:13px;height:13px;}
.timeline-layers-frame{position:absolute;top:0;width:38px;height:33px;padding:0;border:0;border-radius:2px;font:10px ui-monospace,monospace;color:#b8c2d1;background:#20252f;}
.timeline-layers-frame.selected{color:var(--accent);background:#34412c;}
.timeline-layers-row{position:absolute;left:0;width:100%;height:28px;}
.timeline-layers-label{position:sticky;left:0;width:112px;height:28px;z-index:3;display:flex;align-items:center;gap:3px;padding:1px 3px;background:#252c36;border-right:1px solid #455040;border-bottom:1px solid #ffffff06;}
.timeline-layers-label.selected{background:#34412c;}
.matrix-eye{width:24px;height:26px;flex:none;padding:4px;border:0;background:transparent;}
.matrix-eye svg{width:14px;height:14px;}
.matrix-layer-name{display:block;flex:1;min-width:0;height:26px;padding:2px 0;text-align:left;font-size:10px;overflow:hidden;text-overflow:ellipsis;border:0;background:transparent;}
.timeline-layers-cell{position:absolute;top:0;width:38px;height:28px;padding:1px;display:flex;justify-content:center;align-items:center;border:1px solid #ffffff0b;border-radius:2px;background:#1c222b;}
.timeline-layers-cell canvas{width:24px;height:24px;image-rendering:pixelated;pointer-events:none;}
.timeline-layers-cell.current-frame{background:#2c352b;}
.timeline-layers-cell.selected{border:2px solid var(--accent);padding:0;background:#3a4930;}
.timeline-layers-cell:focus-visible{outline-offset:-3px;}
@media(max-width:1150px){.focus-dock.has-timeline-layers{width:auto;}.focus-dock.has-timeline-layers .focus-panel-host{align-self:flex-start;width:100%;}}
.canvas-focus .focus-panel-host .layers-panel:not(.layers-minimal)>.layer-actions{display:flex;justify-content:flex-start;gap:5px;padding-right:38px;}

@supports selector(::-webkit-scrollbar){.timeline-layers-viewport{scrollbar-width:auto;scrollbar-color:auto;}.timeline-layers-viewport::-webkit-scrollbar-thumb{background:#566354;border-radius:3px;}.timeline-layers-viewport::-webkit-scrollbar-track{background:transparent;}}

.panel-view-actions{display:none;align-items:center;gap:5px;flex:none;}
.canvas-focus .focus-mounted .panel-view-actions{display:inline-flex;}
.panel-view-actions .matrix-launch{display:inline-flex;width:28px;height:27px;min-width:28px;padding:4px;}
.panel-view-actions :is(.timeline-minimize,.layers-minimize){margin-left:0;}
.focus-panel-host .timeline-title{min-width:0;gap:7px;}
.focus-panel-host .timeline-title .panel-view-actions{margin-left:auto;}
.focus-panel-host #frameTotal{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.touch-controls>.matrix-launch{display:inline-flex;width:28px;height:28px;min-width:28px;min-height:28px;padding:4px;}
.canvas-focus .touch-controls>.matrix-launch{background:#20252f;border-color:var(--accent);box-shadow:0 2px 8px #0006,0 0 0 1px #10151bcc;}
.touch-controls>.matrix-launch[aria-pressed="true"]{background:#34412c;}

.autosave-conflict-dialog{width:450px;overscroll-behavior:contain;}
.autosave-conflict-dialog h2{font-size:18px;line-height:1.5;}
.autosave-conflict-dialog .dialog-actions{flex-wrap:wrap;}
.autosave-conflict-dialog .dialog-actions button{white-space:normal;}
#autosaveConflictError{color:#ffb1b1;}
#saveStatus.autosave-paused{color:#e8c66b;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}

#autosaveConflictNotice{width:28px;min-width:28px;height:28px;padding:3px;color:#ffe39a;background:#3b3322;border-color:#e8c66b;font-size:14px;font-weight:700;}
#autosaveConflictNotice[hidden]{display:none;}

/* Editor feedback never overlays the lower drawing panels. */
.editor-notice-dialog{width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overscroll-behavior:contain}
.editor-notice-dialog h2{font-size:18px}
#editorNoticeMessages{line-height:1.65;overflow-wrap:anywhere}
.editor-field-error{position:fixed;inset:auto;margin:0;padding:8px 11px;background:#242b35;color:#ffd0ce;border:1px solid #dc8e88;border-radius:7px;box-shadow:0 4px 16px #0007;font-size:12px;line-height:1.5;overflow-wrap:anywhere;z-index:1000;pointer-events:none}
.editor-field-error[hidden],#exportProgress:empty{display:none}
#exportProgress{color:var(--muted);margin:8px 0}

/* Layer opacity stays with the layer actions, above every full list. */
.layers-panel>.layer-actions{margin-bottom:0;padding-bottom:12px;}
.layers-panel>.opacity-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;margin:0 0 9px;padding:5px 2px 7px;background:var(--panel);}
.layers-panel>.opacity-control>label{grid-column:1 / -1;margin:0;font-size:10px;color:var(--muted);}
.layers-panel>.opacity-control>input[type=range]{grid-column:1;grid-row:2;width:100%;min-width:0;margin:0;padding:0;}
.opacity-number{grid-column:2;grid-row:2;display:inline-flex;align-items:center;gap:4px;justify-self:start;white-space:nowrap;font-variant-numeric:tabular-nums;}
.layers-panel .opacity-number #opacityValue{width:48px;min-width:0;padding:4px 5px;text-align:right;font-size:11px;appearance:textfield;}
.opacity-number input::-webkit-inner-spin-button,.opacity-number input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
html.touch-device .layers-panel>.opacity-control{grid-template-columns:minmax(0,7fr) minmax(70px,3fr);}
html.touch-device .layers-panel>.opacity-control>input[type=range]{width:100%;}
body:not(.canvas-focus) .studio:not(.animation-collapsed) .layers-panel>.panel-heading{position:sticky;top:0;z-index:3;min-height:28px;margin:0;background:var(--panel);}
body:not(.canvas-focus) .studio:not(.animation-collapsed) .layers-panel>.layer-actions,
.canvas-focus .focus-panel-host .layers-panel:not(.layers-minimal)>.layer-actions{position:sticky;top:var(--layer-heading-height,28px);z-index:3;background:var(--panel);}
body:not(.canvas-focus) .studio:not(.animation-collapsed) .layers-panel>.opacity-control,
.canvas-focus .focus-panel-host .layers-panel:not(.layers-minimal)>.opacity-control{position:sticky;top:var(--layer-controls-height,76px);z-index:3;}

/* Quiet touch scrollbars; PC keeps a wider hit area around a fine gray thumb. */
.canvas-focus .focus-panel-host .timeline .frame-strip{scrollbar-width:thin;scrollbar-color:#71809670 transparent;overflow-y:hidden;}
.canvas-focus .focus-panel-host .timeline .frame-strip::-webkit-scrollbar{height:4px;}
.canvas-focus .focus-panel-host .timeline .frame-strip::-webkit-scrollbar-thumb{background:#71809670;border-radius:10px;}
.canvas-focus .focus-panel-host .timeline .frame-strip::-webkit-scrollbar-thumb:hover{background:#95a6bea8;}
.canvas-focus .focus-panel-host .timeline .frame-strip::-webkit-scrollbar-track{background:transparent;}
@supports selector(::-webkit-scrollbar){.canvas-focus .focus-panel-host .timeline .frame-strip{scrollbar-width:auto;scrollbar-color:auto;}}
.canvas-focus .focus-panel-host .timeline.timeline-minimal{height:42px;min-height:42px;}
.canvas-focus .focus-panel-host .timeline-minimal .frame-strip{height:30px;min-height:30px;align-items:flex-start;scrollbar-width:none;}
.canvas-focus .focus-panel-host .timeline-minimal .frame-strip::-webkit-scrollbar{display:none;}
.focus-tabs-handle{display:none;}
@media(min-width:1151px){
 .canvas-focus .focus-panel-host:has(>.timeline:not(.timeline-minimal)){width:754px;}
 .canvas-focus .focus-panel-host .timeline:not(.timeline-minimal) .timeline-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px;}
 .canvas-focus .focus-panel-host .timeline:not(.timeline-minimal) .timeline-title{grid-column:1 / -1;}
 .canvas-focus .focus-panel-host .timeline:not(.timeline-minimal) .transport{width:auto;min-width:0;flex-wrap:nowrap;gap:8px;}
 .canvas-focus .focus-panel-host .timeline:not(.timeline-minimal) .frame-card{width:110px;min-width:110px;flex:0 0 110px;}
 .canvas-focus .focus-panel-host .timeline:not(.timeline-minimal) .frame-card canvas{width:96px;height:96px;}
 .focus-dock.has-minimal-timeline{left:64px;right:10px;width:auto;max-width:none;}
 .focus-dock.has-minimal-timeline .focus-panel-host{width:100%;}
 #focusDock .focus-tabs{align-self:flex-end;flex:none;width:max-content;max-width:100%;justify-content:flex-end;min-height:0;padding:5px;gap:4px;border-radius:8px;}
 #focusDock .focus-tabs button[data-focus-panel]{flex:0 0 auto;min-width:0;min-height:32px;font-size:10px;padding:7px;}
 #focusDock .focus-tabs .focus-tabs-handle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;min-width:22px;height:32px;padding:2px;border-color:transparent;color:var(--muted);background:transparent;cursor:grab;touch-action:none;user-select:none;}
 #focusDock .focus-tabs-handle svg{width:14px;height:20px;pointer-events:none;}
 #focusDock .focus-tabs-handle:hover{color:var(--accent);background:#c4ed7b0c;}
 #focusDock .focus-tabs-handle.is-dragging{cursor:grabbing;color:var(--accent);}

 #focusDock.tabs-detached{filter:none;}
 #focusDock.tabs-detached .focus-panel-host{margin-bottom:0;}
 .canvas-focus .focus-panel-host .timeline .frame-strip::-webkit-scrollbar{display:block;height:8px;}
 .canvas-focus .focus-panel-host .timeline .frame-strip::-webkit-scrollbar-thumb{border:2px solid transparent;background-clip:padding-box;}
 .canvas-focus .focus-panel-host .timeline.timeline-minimal{height:50px;min-height:50px;}
 .canvas-focus .focus-panel-host .timeline-minimal #playBtn{align-self:flex-start;}
 .canvas-focus .focus-panel-host .timeline-minimal .frame-strip{height:38px;min-height:38px;scrollbar-width:thin;}
 @supports selector(::-webkit-scrollbar){.canvas-focus .focus-panel-host .timeline-minimal .frame-strip{scrollbar-width:auto;}}
 #focusDock.tabs-detached .focus-tabs{position:fixed;z-index:2;margin:0;max-width:calc(100vw - 16px);box-shadow:0 4px 18px #0007;}
 #focusDock.tabs-detached .focus-panel-host{box-shadow:0 4px 18px #0005;}
}

/* Preview visibility is independent from artwork layer visibility. */
.preview-panel .preview-layers{display:block;width:100%;min-width:0;margin-top:8px;padding:5px 8px;font-size:11px;}

/* Canvas essentials share the real controls; closing clears the minimal view. */
.focus-dock.has-minimal-canvas .focus-panel-host{width:224px;max-width:100%;align-self:flex-start;border-radius:6px;}
.focus-panel-host .canvas-settings-panel.canvas-minimal{padding:8px;}
.canvas-minimal>:not(.canvas-minimal-control):not(#canvasBackgroundControl):not(#onionModeControl){display:none;}
.focus-panel-host .canvas-minimal .switch-row{margin:4px 0;min-height:24px;}
.focus-panel-host .canvas-minimal .canvas-background-control{margin:6px 0;}
.focus-panel-host .canvas-minimal .onion-mode-control{margin:4px 0 0;}
.canvas-minimal kbd{display:none;}
@media(min-width:1151px){
 .focus-dock.has-minimal-canvas .focus-panel-host{align-self:flex-end;}
 .focus-dock.has-minimal-preview .focus-panel-host{width:calc(var(--minimal-preview-width) + 16px);}
 .focus-panel-host .preview-panel.preview-minimal{padding:7px;}
}

/* Independent PC minimal windows keep one live set of artwork controls. */
.focus-layout-reset{display:none;}
@media(min-width:1151px){
 .floating-minimal.focus-dock{display:block;right:auto;bottom:auto;max-width:none;filter:none;pointer-events:none;}
 .floating-minimal.focus-dock .focus-panel-host{width:100%;max-width:100%;margin:0;box-shadow:0 4px 18px #0005;}
 .floating-minimal.is-pinned .focus-panel-host{border-color:#c4ed7b55;}
 .floating-mini-tools{display:flex;justify-content:flex-end;align-items:center;gap:2px;height:26px;padding:2px;background:var(--panel);border-bottom:1px solid #ffffff0c;pointer-events:auto;}
 .floating-mini-tools button{width:22px;min-width:22px;height:20px;padding:2px;border-color:transparent;background:transparent;color:var(--muted);}
 .floating-mini-tools button svg{width:14px;height:14px;}
 .floating-mini-tools button:hover{background:#ffffff0c;color:var(--text);}
 .floating-mini-tools .floating-mini-pin[aria-pressed=true]{color:var(--accent);background:#c4ed7b18;}
 .floating-mini-tools .floating-mini-handle{cursor:grab;touch-action:none;user-select:none;}
 .floating-mini-tools .floating-mini-handle.is-dragging{cursor:grabbing;color:var(--accent);}
 #focusDock .focus-tabs .focus-layout-reset:not([hidden]){display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;min-width:24px;height:32px;padding:3px;background:transparent;border-color:transparent;color:var(--muted);}
 #focusDock .focus-tabs .focus-layout-reset:hover{color:var(--text);background:#ffffff0c;}
 #focusDock .focus-tabs .focus-layout-reset svg{width:15px;height:15px;}
}
@media(max-width:1150px){
 .focus-dock.has-minimal-canvas .focus-panel-host{width:152px;}
}

/* Touch-only one-pixel selection control, below the existing upper-left actions. */
.selection-nudge{display:none;}
@media(max-width:1150px){
 .selection-nudge:not([hidden]){position:absolute;left:8px;z-index:7;display:flex;flex-direction:column;align-items:center;gap:4px;width:116px;padding:4px;border:1px solid #c4ed7b26;border-radius:7px;background:#20273166;box-shadow:0 2px 8px #0002;touch-action:none;user-select:none;}
 .nudge-modes{display:flex;gap:3px;width:100%;}
 .nudge-modes button{flex:1;min-width:0;padding:5px 4px;font-size:10px;}
 .nudge-modes button[aria-pressed=false]{color:var(--muted);border-color:#ffffff18;background:#20273166;}
 .nudge-modes button[aria-pressed=true]{color:var(--accent);border-color:#c4ed7b77;background:#c4ed7b18;}
 .nudge-cross{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:34px 0 34px;gap:2px;align-items:center;justify-items:center;}
 .nudge-cross button{width:34px;height:34px;min-width:34px;padding:0;font-size:20px;line-height:1;touch-action:none;}
 .nudge-cross button.is-held{background:#c4ed7b30;border-color:var(--accent);color:var(--accent);}
 [data-nudge-direction=up]{grid-area:1/2;}[data-nudge-direction=left]{grid-area:2/1;}[data-nudge-direction=right]{grid-area:2/3;}[data-nudge-direction=down]{grid-area:3/2;}
}
@media(max-width:580px){.selection-nudge:not([hidden]){left:6px;}}

@media(min-width:1151px){
 .focus-panel-host .layers-minimal #layerList{max-height:min(270px,calc(var(--minimal-layer-height,284px) - 14px));}
}
/* The grid has its own PC tab, compact natural width and an unobstructed resize footer. */
#focusDock .focus-tabs .pc-grid-tab{display:none;}
.timeline-layers-viewport{scrollbar-gutter:stable;}
@media(min-width:581px){
 .focus-dock.has-timeline-layers .focus-panel-host{width:var(--matrix-preferred-width,504px);max-width:100%;}
}
@media(min-width:1151px){
 #focusDock .focus-tabs .pc-grid-tab{display:inline-flex;}
 .floating-minimal.has-timeline-layers .timeline-layers-panel{height:var(--matrix-window-body-height,146px);}
 .floating-mini-tools{justify-content:space-between;cursor:grab;touch-action:none;}
 .floating-mini-tools.is-dragging{cursor:grabbing;}
 .floating-mini-tools .floating-mini-pin{margin-left:auto;cursor:pointer;}
 .floating-resize-footer{height:18px;display:flex;justify-content:flex-end;align-items:center;border-top:1px solid #ffffff08;}
 .floating-resize-handle{width:18px;min-width:18px;height:18px;padding:1px;border:0;border-radius:0;background:transparent;color:#b4bfd0;cursor:nwse-resize;touch-action:none;}
 .floating-resize-handle svg{width:15px;height:15px;}
}

/* Context menus share the compact canvas-setting type size. */
.editor-context-menu{position:fixed;inset:auto;margin:0;padding:4px;border:1px solid #596477;border-radius:7px;background:#202630;color:#edf2f7;box-shadow:0 8px 24px #0007;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;scrollbar-width:thin}
.editor-context-menu button{display:flex;width:100%;min-height:28px;padding:6px 10px;border:0;background:transparent;color:inherit;font:inherit;font-size:10px;text-align:left;justify-content:flex-start;white-space:nowrap;border-radius:4px}
.editor-context-menu button:hover:not(:disabled),.editor-context-menu button:focus-visible{background:#c4ed7b1c;color:#c4ed7b;outline:1px solid #c4ed7b66}
.editor-context-menu button.menu-danger{color:#efa2ab}.editor-context-menu hr{border:0;border-top:1px solid #ffffff18;margin:4px}
@media(pointer:coarse){.editor-context-menu button{min-height:36px}}
.timeline-layers-frame{width:44px}.timeline-layers-row,.timeline-layers-label,.timeline-layers-cell{height:34px}.timeline-layers-cell{width:44px}.timeline-layers-cell canvas{width:28px;height:28px}
.matrix-actions{width:26px;height:33px;padding:0;border:0;background:transparent;color:var(--accent);font-size:20px;line-height:1}
.timeline-layers-cell.link-related:not(.selected){border-color:#c4ed7b77;background:#34412c}
.matrix-link-mark{position:absolute;right:0;bottom:0;width:12px;height:12px;background:#1c222be6;border-radius:3px;color:var(--accent);pointer-events:none}.matrix-link-mark svg{display:block;width:12px;height:12px}

.file-menu button{font-size:10px}

#canvasStage[aria-busy="true"] #canvasSpace{visibility:hidden}

.matrix-layer-name{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.timeline-layers-cell.is-placeholder{background:#161c24;border:1px dashed #7782903d}.timeline-layers-cell.is-placeholder canvas{visibility:hidden}
.timeline-layers-cell.is-placeholder::after{content:'+';position:absolute;color:#9aa6b5;font-size:14px;opacity:.35}
.timeline-layers-cell.is-placeholder.selected{border:2px solid var(--accent);background:#34412c}
.timeline-layers-frame.is-placeholder,.timeline-layers-label.is-placeholder .matrix-layer-name{color:#9aa6b5}

.panel-view-actions .matrix-launch-labeled{width:max-content;min-width:max-content;flex:0 0 auto;padding:4px 6px;gap:4px;font-size:10px}
.panel-view-actions .matrix-launch-labeled svg{width:13px;height:13px}

/* PC floating windows share the same drag/pin bar in both sizes. */
@media(min-width:1151px){
 .floating-minimal .floating-mini-tools{position:sticky;top:0;z-index:12;flex-shrink:0;}
 .floating-normal .focus-panel-host{display:block;overflow:auto;}
 .floating-normal[data-floating-panel=canvas]{width:320px;}
 .floating-normal .focus-mounted{min-width:0;}
 .floating-normal .timeline:not(.timeline-minimal){min-height:0;}
}

@media(min-width:1151px){
 .canvas-focus .floating-normal .layers-panel:not(.layers-minimal)>.panel-heading{top:26px;}
 .canvas-focus .floating-normal .layers-panel:not(.layers-minimal)>.layer-actions{top:calc(26px + var(--layer-heading-height,28px));}
 .canvas-focus .floating-normal .layers-panel:not(.layers-minimal)>.opacity-control{top:calc(26px + var(--layer-controls-height,76px));}
}

@media(min-width:1151px){
 /* On short screens, let layer controls scroll away rather than cover the list. */
 .canvas-focus .floating-normal.floating-compact .layers-panel:not(.layers-minimal)>:is(.panel-heading,.layer-actions,.opacity-control){position:static;}
}

/* Switch the standard PC timeline in place, without another floating window. */
.standard-timeline-switch{display:none;}
@media(min-width:1151px){
 body:not(.canvas-focus) .standard-timeline-switch{display:inline-flex;flex:0 0 24px;width:24px;height:26px;padding:4px;border-color:#c4ed7b44;background:#c4ed7b0b;color:var(--accent);margin-left:-5px;}
 .standard-timeline-switch svg{width:14px;height:14px;}
 body:not(.canvas-focus) .standard-timeline-switch[aria-pressed=true]{border-color:#c4ed7b88;background:#c4ed7b1c;}
 body:not(.canvas-focus) .studio:not(.timeline-collapsed) .timeline.timeline-grid>.timeline-toolbar{display:flex;flex-wrap:nowrap;flex:none;padding:8px 12px;min-height:42px;}
 body:not(.canvas-focus) .studio:not(.timeline-collapsed) .timeline-grid>.timeline-toolbar>:not(.timeline-title),
 body:not(.canvas-focus) .studio:not(.timeline-collapsed) .timeline-grid>.frame-strip{display:none;}
 body:not(.canvas-focus) .timeline-grid>#timelineLayersPanel{flex:1;min-height:0;height:auto;width:100%;}
 body:not(.canvas-focus) .studio.timeline-collapsed .timeline-grid>#timelineLayersPanel{display:none;}
 body.page-scroll-layout:not(.canvas-focus) .timeline-grid>#timelineLayersPanel{flex:none;height:var(--matrix-content-height,146px);}
}

/* Center the append control within the actual layer-name button hit area. */
.timeline-layers-label.is-placeholder .matrix-layer-name{text-align:center;}

/* Folded timeline playback is available at every viewport size. */
body:not(.canvas-focus) .studio.timeline-collapsed>.editor-column>.timeline>.timeline-toolbar>.transport{display:contents;}
body:not(.canvas-focus) .studio.timeline-collapsed .transport>:not(#playBtn){display:none;}
body:not(.canvas-focus) .studio.timeline-collapsed #playBtn{width:30px;min-width:30px;height:30px;padding:6px;font-size:0;gap:0;}
body:not(.canvas-focus) .studio.timeline-collapsed #playBtn svg{width:14px;height:14px;}

/* Keep selection borders green, with a distinct warm fill for the selected link group. */
.timeline-layers-cell.linked{border-color:#c4ed7b70;}
.timeline-layers-cell.link-related:not(.selected){background:#9b505a;border-color:#c4ed7b;}
.timeline-layers-cell.linked.selected{background:#a45b64;}
.timeline-layers-cell.is-empty canvas{visibility:hidden;}
.timeline-layers-cell.is-empty::before{content:'';position:absolute;width:9px;height:9px;border:1px solid #a1aabd99;border-radius:50%;pointer-events:none;}
.matrix-layer-name.is-empty-layer{position:relative;padding-right:12px;}
.matrix-layer-name.is-empty-layer::after{content:'';position:absolute;right:3px;top:10px;width:5px;height:5px;border:1px solid #9ca9ba99;border-radius:50%;}
.matrix-link-lines{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:hidden;}
.matrix-link-lines path{fill:none;stroke:#c4ed7b;stroke-width:1.3;stroke-linecap:round;filter:drop-shadow(0 1px 1px #172015);}
.canvas-stage.grid-selection-mode{background-color:#090c11;background-image:radial-gradient(#202b3a66 .7px,transparent .7px);}
.matrix-selection-actions{position:fixed;display:flex;justify-content:flex-end;align-items:center;height:32px;padding:2px 3px;background:var(--panel);border:1px solid #56614c;border-bottom:0;border-radius:6px 6px 0 0;box-shadow:0 -3px 10px #0003;}
.matrix-selection-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ff929e;font-size:10px;font-weight:600;white-space:nowrap;}
.matrix-selection-actions[hidden]{display:none;}
.matrix-clear-selection{min-height:26px;padding:3px 5px;font-size:10px;color:#e3efcb;background:#3b4931;border-color:#95ac6c;}
.timeline-layers-viewport button{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;}
.matrix-name-input{min-width:0;width:0;flex:1;height:26px;font-size:10px;padding:2px 3px;border-color:var(--accent);}

.timeline-layers-cell.matrix-drop-target{outline:2px solid #f5df8b;outline-offset:-2px;background:#594f2b;z-index:2;}
.timeline-layers-cell.matrix-drag-source{opacity:.5;}
.matrix-right-dragging,.matrix-right-dragging button{cursor:grabbing;}