/* Creators uses the existing site, native window tiles, font and game art. */
.layer-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 0; }
.layer-bar .small-command { font-size:18px; padding:4px 8px; min-height:30px; }
#active-layer-label { color:var(--accent); font-size:20px; overflow-wrap:anywhere; max-width:220px; }
#selection-label { font-size:18px; color:var(--muted); }
#layer-list { display:grid; gap:6px; max-height:280px; overflow:auto; margin:12px 0; }
.layer-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; }
.layer-row button:first-child { overflow-wrap:anywhere; }
.layer-row button[aria-pressed=true] { background:var(--selection); border-color:var(--accent); }
.layer-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin:14px 0; }
.layer-actions label { display:flex; flex-direction:column; font-size:22px; max-width:100%; }
#layer-name { min-width:0; width:210px; max-width:100%; }
.extra-controls { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding-top:8px; }
.extra-controls .small-command { font-size:18px; min-height:30px; padding:4px 8px; }
.extra-controls span { color:var(--muted); font-size:18px; line-height:1.2; flex:1 1 240px; }
.extra-controls label { font-size:20px; }
#extra-duration { width:80px; font-size:20px; }
#animation-dialog { width:min(850px,calc(100vw - 20px)); }
#animation-dialog .animation-settings { margin-bottom:12px; }
#animation-dialog .cycle-label { display:flex; flex-direction:row; align-items:center; }
#animation-dialog input[type=checkbox] { width:18px; height:18px; }
#animation-dialog select { max-width:100%; }
.animation-stage,#all-directions { background-position:center; background-size:cover; image-rendering:pixelated; }
.animation-stage[hidden],#all-directions[hidden] { display:none; }
.animation-stage figure { padding:12px; }
.animation-stage figcaption,#all-directions figcaption { background:var(--panel); padding:3px 8px; }
#all-directions { display:grid; grid-template-columns:repeat(4,1fr); align-items:end; gap:12px; padding:20px 12px; min-height:220px; margin:12px 0; }
#all-directions figure { text-align:center; min-width:0; }
#all-directions canvas { max-width:100%; object-fit:contain; }
[data-background=dark] { background-color:#181c30; }
[data-background=grass] { background-color:#407840; }
#export-preview-sheet { margin-left:8px; }
@media(max-width:760px) {
  .layer-bar { gap:4px; }
  #active-layer-label { font-size:18px; max-width:140px; }
  .layer-row { grid-template-columns:minmax(0,1fr) auto auto; }
  .layer-row .small-command { font-size:18px; padding:5px; }
  #all-directions { grid-template-columns:repeat(2,1fr); }
  #animation-dialog .animation-settings label { font-size:20px; min-width:0; }
  #animation-dialog select { width:100%; }
  .extra-controls span { flex-basis:100%; }
  .extra-controls .small-command { font-size:17px; }
}
:root { color-scheme:dark; --panel:#202c38; --text:#f0eedc; --muted:#b5c7ce; --line:#526976; --hover:#304453; --accent:#b0d8d8; --selection:#375363; --stage:#192630; }
:root[data-theme="light"] { color-scheme:light; --panel:#fff; --text:#404848; --muted:#606878; --line:#b0c8d0; --hover:#e8f0f0; --accent:#386088; --selection:#b0d8d8; --stage:#e8eeee; }
body { min-height:100svh; overflow-x:hidden; }
.creator-world { position:fixed; inset:0; z-index:-1; }
.creator-world picture,.creator-world img { display:block; width:100%; height:100%; object-fit:cover; }
:root[data-theme="dark"] .creator-world::after { content:""; position:absolute; inset:0; background:#08142260; }
body:has(.editor-screen:not([hidden]),.subpage-screen:not([hidden])) .creator-world::after { content:""; position:absolute; inset:0; background:#081422a0; }
.native-window { position:relative; isolation:isolate; background:var(--panel); color:var(--text); }
.native-frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; image-rendering:pixelated; }
.window-content { position:relative; padding:30px 32px 26px; }
h1,h2,h3,p { font-weight:400; }
h1 { font-size:40px; line-height:1.15; margin:0 0 14px; }
h2 { font-size:28px; line-height:1.2; margin:0 0 12px; }
h3 { font-size:24px; line-height:1.25; margin:0 0 8px; }
p { font-size:24px; line-height:1.3; margin:0 0 18px; }
figure { margin:0; }
button { cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,#sprite-canvas:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
h1[tabindex="-1"]:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
canvas:not(.native-frame):not(.menu-frame),img { image-rendering:pixelated; }
.site-header { display:flex; }
.menu-open,#theme-toggle { background:var(--panel); color:var(--text); border:2px solid var(--line); box-shadow:inset 0 0 0 2px var(--selection); min-height:40px; font:22px/1 var(--pixel); padding:4px 14px; }
.game-menu { background:var(--panel); color:var(--text); }
.game-menu a,.game-menu button { color:var(--text); }
.small-command,.drawing-toolbar button,.reference-toolbar button,.filmstrip-header button,.body-choices button,.frame-commands button,summary { border:2px solid var(--line); background:var(--panel); box-shadow:inset 0 0 0 1px var(--selection); color:var(--text); padding:7px 12px; min-height:38px; font:22px/1 var(--pixel); }
button:hover:not(:disabled),summary:hover { background:var(--hover); }
button[aria-pressed="true"] { background:var(--selection); border-color:var(--accent); }
select { font:22px/1 var(--pixel); color:var(--text); background:var(--panel); padding:5px 7px; border:2px solid var(--line); min-height:36px; }
.text-back { padding:8px 4px 8px 22px; position:relative; border:0; background:transparent; color:var(--accent); font:24px/1 var(--pixel); cursor:pointer; }
.text-back::before { content:""; position:absolute; left:0; top:50%; width:15px; height:18px; transform:translateY(-50%) rotate(180deg); background:url('/assets/journey/menu-arrow.png') center / contain no-repeat; image-rendering:pixelated; }

/* Entry and the existing website's scenery. */
.creator-entry { width:440px; margin-left:6%; padding-top:5vh; padding-bottom:68px; }
.site-wordmark { display:block; width:400px; max-width:100%; margin:0 0 26px; }
.site-wordmark img { display:block; width:100%; height:auto; }
.window-kicker { font-size:24px; margin:0 0 8px; color:var(--muted); }
.entry-description { margin-bottom:12px; }
.native-reference-strip { display:flex; align-items:center; gap:8px; padding:6px 0 18px; border-bottom:2px solid var(--line); margin-bottom:12px; }
.native-reference-strip img { flex:0 0 64px; }
.native-reference-strip p { margin:0 0 0 8px; font-size:22px; }
.native-rows { display:grid; gap:0; }
.native-rows button,.unavailable-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:50px; border:0; background:transparent; padding:7px 4px 7px 30px; color:var(--text); font:28px/1.1 var(--pixel); text-align:left; }
.native-rows button::before { content:""; position:absolute; left:2px; top:50%; width:20px; height:24px; transform:translateY(-50%); background:url('/assets/journey/menu-arrow.png') center / contain no-repeat; image-rendering:pixelated; visibility:hidden; }
.native-rows button:is(:hover,:focus-visible,.preferred,[aria-pressed="true"])::before { visibility:visible; }
.native-rows:has(button:hover) .preferred:not(:hover)::before,.native-rows:has(button:focus-visible) .preferred:not(:focus-visible)::before { visibility:hidden; }
.native-rows button:is(:hover,[aria-pressed="true"]) { background:var(--hover); }
.entry-rows button { justify-content:flex-start; gap:12px; }
.entry-rows img { flex:0 0 32px; }
.entry-foot { border-top:2px solid var(--line); padding-top:14px; margin:14px 0 0; font-size:20px; line-height:1.3; }
.back-to-site { display:inline-block; margin:20px 0 0 4px; color:white; font-size:24px; text-shadow:2px 2px #193844; }
.creator-location { position:fixed; left:28px; right:28px; bottom:18px; z-index:5; display:flex; justify-content:space-between; gap:20px; font-size:20px; color:white; text-shadow:2px 2px #193844; pointer-events:none; }
.trainer-display { position:absolute; left:calc(7% + 530px); top:24vh; width:580px; padding:32px; color:var(--text); }
.trainer-display-title { font-size:22px; margin:0 0 18px 18px; letter-spacing:1px; }
.trainer-portraits { display:flex; gap:20px; align-items:end; justify-content:center; padding:0 0 20px; border-bottom:2px solid var(--line); }
.pose-display { display:flex; align-items:center; gap:12px; margin-top:16px; padding:8px 0; }
.pose-display span { font-size:22px; line-height:1.25; }

/* One drawing workspace: tools on the left, canvas in the middle, frames below. */
.editor-screen { padding:64px 20px 16px; height:100dvh; min-height:660px; }
.editor-breadcrumb { position:absolute; top:17px; left:28px; display:flex; align-items:center; gap:12px; color:#fff; text-shadow:2px 2px #193844; height:36px; }
.editor-breadcrumb button { font:22px var(--pixel); padding:0; border:0; color:inherit; background:none; }
.editor-breadcrumb h1 { font-size:26px; margin:0; }
.editor-breadcrumb span { opacity:.6; }
body:has(.editor-screen:not([hidden])) .creator-location { display:none; }
.workbench { max-width:1800px; height:100%; min-height:0; margin:0 auto; padding:28px; display:flex; flex-direction:column; }
.workbench-header { display:flex; align-items:center; gap:20px; padding:0 0 12px; border-bottom:2px solid var(--line); flex-shrink:0; }
.project-name-label { flex:1; min-width:100px; }
#project-name { font:28px/1.1 var(--pixel); color:var(--text); background:transparent; border:0; border-bottom:2px solid var(--line); width:100%; max-width:320px; padding:6px 2px; }
#project-name:hover,#project-name:focus { border-bottom-color:var(--line); }
.save-controls { display:flex; align-items:center; gap:10px; }
#save-status { max-width:290px; font-size:20px; line-height:1.15; }
#save-status[data-state="saved"]::before { content:""; display:inline-block; width:7px; height:7px; background:#84be90; margin-right:7px; }
#save-status[data-state="error"] { color:#ffc4ad; }
:root[data-theme="light"] #save-status[data-state="error"] { color:#8d3224; }
.workbench-body { display:grid; grid-template-columns:212px minmax(0,1fr); min-height:0; flex:1; }
.toolbox { border-right:2px solid var(--line); padding:18px 16px 12px 0; min-width:0; min-height:0; overflow-y:auto; scrollbar-width:thin; }
.toolbox-heading { font-size:24px; margin:0 0 8px; }
.paint-tools { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.paint-tools button { text-align:left; padding:7px 8px; font-size:20px; }
.paint-tools kbd { float:right; font:16px var(--pixel); color:var(--muted); padding-left:8px; }
.paint-tools #picker kbd { display:none; }
.paint-tools #pan { grid-column:1/-1; }
.undo-tools { display:flex; gap:6px; grid-column:1/-1; padding:8px 0 0; }
.undo-tools button { flex:1; text-align:center; }
.paint-colors { margin-top:20px; border-top:2px solid var(--line); padding-top:16px; }
.active-color { display:grid; grid-template-columns:48px 1fr; column-gap:10px; align-items:center; }
.active-color label { grid-column:2; font-size:24px; cursor:pointer; }
#paint-color { grid-row:1/3; grid-column:1; width:48px; height:48px; padding:3px; background:var(--panel); border:2px solid var(--accent); cursor:pointer; }
#color-label { font-size:18px; color:var(--muted); }
#palette-name { display:block; font-size:20px; color:var(--muted); margin:16px 0 8px; }
.palette { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:3px; }
.swatch { width:100%; aspect-ratio:1; min-width:0; border:2px solid var(--line); padding:0; box-shadow:inset 0 0 0 1px #ffffff55; }
.swatch[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:2px; }
.swatch.transparent { background:repeating-conic-gradient(var(--panel) 0% 25%,#c8d0d0 0% 50%) 50% / 12px 12px; }
.toolbox-preview { border-top:2px solid var(--line); margin-top:18px; padding-top:14px; }
.native-size-preview { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; min-height:40px; }
.native-size-preview h3 { font-size:22px; margin:0; }
#native-preview { outline:1px solid var(--line); background:repeating-conic-gradient(var(--stage) 0% 25%,var(--selection) 0% 50%) 50% / 8px 8px; }
.toolbox-preview .small-command { display:block; width:100%; font-size:20px; margin-top:6px; padding:7px; }
.drawing-main { display:flex; flex-direction:column; min-width:0; min-height:0; padding:12px 0 10px 18px; }
.canvas-heading { display:flex; align-items:center; gap:10px; flex:none; min-width:0; padding-bottom:8px; }
.canvas-heading label { display:flex; align-items:center; gap:8px; font-size:22px; }
.canvas-heading #frame-number { margin-left:auto; font-size:22px; color:var(--muted); white-space:nowrap; }
.canvas-heading .small-command { font-size:20px; }
.reference-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; flex-shrink:0; padding:0 0 10px; }
.reference-toolbar > div { display:flex; gap:4px; }
.reference-toolbar button { font-size:20px; padding:6px 10px; min-height:34px; }
.reference-toolbar select { font-size:22px; min-height:34px; }
#opacity-control { display:flex; align-items:center; gap:6px; font-size:20px; }
#reference-opacity { width:90px; accent-color:var(--accent); }
.canvas-stage { position:relative; display:block; flex:1; min-height:160px; min-width:0; overflow:auto; overscroll-behavior:contain; touch-action:none; background:var(--stage); border:2px solid var(--line); scrollbar-color:var(--line) var(--stage); scrollbar-width:thin; }
.canvas-pair { display:flex; align-items:center; justify-content:center; gap:48px; width:max-content; min-width:100%; min-height:100%; padding:22px; box-sizing:border-box; }
.canvas-pair figure { flex-shrink:0; min-width:112px; }
.canvas-pair figcaption { font-size:20px; line-height:1.2; color:var(--muted); text-align:center; height:24px; margin-bottom:10px; white-space:nowrap; }
#native-size { margin-left:8px; opacity:.8; font-size:18px; }
#sprite-canvas,#canvas-reference { display:block; image-rendering:pixelated; flex-shrink:0; margin-inline:auto; }
#sprite-canvas { cursor:crosshair; touch-action:none; outline-offset:4px; }
#canvas-reference { cursor:help; background:var(--stage); }
.view-tools { display:flex; align-items:center; gap:6px; flex:none; margin:8px 0; }
.view-tools button { padding:5px 10px; font-size:20px; min-height:32px; }
.zoom-controls { display:flex; align-items:stretch; }
.zoom-controls button { min-width:32px; }
.zoom-controls select { font-size:20px; min-height:32px; max-width:68px; border-left:0; border-right:0; padding:2px; }
.canvas-help { margin-left:auto; color:var(--muted); font-size:18px; }
.timeline { flex:none; min-width:0; border-top:2px solid var(--line); padding-top:8px; }
.filmstrip-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; min-height:32px; }
.filmstrip-header button { padding:4px 10px; font-size:20px; min-height:32px; }
#toggle-frames { border:0; box-shadow:none; padding-left:0; font-size:24px; }
#toggle-frames span { color:var(--muted); margin-left:6px; }
#drawn-count { font-size:20px; color:var(--muted); }
.frame-navigation { display:flex; gap:4px; }
.frame-navigation button { font-size:26px; width:36px; }
.frame-menu { margin-left:auto; position:relative; }
.frame-menu summary { padding:4px 8px; min-height:32px; font-size:20px; cursor:pointer; }
.frame-commands { position:absolute; z-index:10; right:0; bottom:calc(100% + 6px); display:grid; min-width:150px; padding:6px; gap:4px; background:var(--panel); border:2px solid var(--line); box-shadow:0 6px 20px #0006; }
.frame-commands button { font-size:22px; white-space:nowrap; text-align:left; }
.filmstrip { display:flex; gap:6px; overflow-x:auto; padding:3px 3px 6px; scrollbar-color:var(--line) var(--stage); scrollbar-width:thin; }
.frame-cell { flex:0 0 58px; border:2px solid var(--line); background:var(--panel); padding:4px; color:var(--text); font:18px var(--pixel); display:flex; flex-direction:column; align-items:center; gap:2px; }
.frame-cell canvas { background:var(--stage); }
.frame-cell[aria-pressed="true"] { border-color:var(--accent); background:var(--hover); }
.frame-cell::after { content:""; width:6px; height:3px; background:var(--line); }
.frame-cell.has-art::after { background:#84be90; }
.workbench-status { flex:none; border-top:2px solid var(--line); padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:18px; line-height:1.15; color:var(--muted); min-height:28px; }
#tool-message { min-width:0; }
.preview-status { white-space:nowrap; }
.move-view #sprite-canvas,.space-pan #sprite-canvas,.move-view #canvas-reference,.space-pan #canvas-reference,.move-view,.space-pan { cursor:grab; }
.panning,.panning #sprite-canvas,.panning #canvas-reference { cursor:grabbing; }

/* Secondary information opens over the workspace, never pushes the canvas away. */
.workspace-dialog,.controls-dialog { width:560px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; border:0; padding:34px; }
.controls-dialog { width:620px; }
.workspace-dialog::backdrop,.controls-dialog::backdrop { background:#081422aa; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.dialog-heading h2 { margin:0; }
.coverage { font-size:24px; border-bottom:2px solid var(--line); padding-bottom:16px; margin-bottom:12px; }
.coverage strong { font-size:32px; font-weight:400; }
.compact button,.compact .unavailable-row { font-size:24px; min-height:44px; }
.compact small { font-size:22px; color:var(--muted); }
.unavailable-row { color:var(--muted); }
.preview-limit,.storage-note,.reference-note { color:var(--muted); font-size:20px; line-height:1.3; }
.preview-limit { margin:16px 0; }
.reference-note { margin:18px 0 0; }
.compare-pair { display:flex; gap:32px; justify-content:center; align-items:end; padding:20px 0; }
.compare-pair figure { text-align:center; }
.compare-pair canvas,.compare-pair img { display:block; margin:0 auto 8px; background:var(--stage); }
.compare-pair figcaption,.compare-scale { font-size:24px; text-align:center; }
.controls-dialog dl { display:grid; grid-template-columns:150px 1fr; gap:10px 16px; font-size:22px; margin:22px 0; }
.controls-dialog dt { color:var(--accent); }
.controls-dialog dd { margin:0; }
.controls-dialog p { font-size:20px; }
.import-dialog { width:700px; }
#import-dialog[open] { display:flex; flex-direction:column; overflow:hidden; }
.import-dialog .dialog-heading,.import-footer { flex-shrink:0; }
.import-content { min-height:0; overflow:auto; scrollbar-width:thin; padding-right:4px; }
.import-dialog p { font-size:22px; line-height:1.3; }
.import-group { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:24px; margin:16px 0; }
.import-group select,.import-group input { color:var(--text); background:var(--stage); border:2px solid var(--line); padding:8px; font:inherit; max-width:100%; }
.import-group input { width:76px; }
.import-file-label { display:block; padding:16px; border:2px dashed var(--line); background:var(--stage); font-size:26px; }
.import-file-label input { display:block; width:100%; margin-top:10px; font:inherit; font-size:20px; }
.import-file-label input::file-selector-button { font:inherit; padding:8px; margin-right:12px; cursor:pointer; }
#import-status { overflow-wrap:anywhere; margin:12px 0; color:var(--accent); }
#import-status:empty { display:none; }
#import-order-details { margin:18px 0; font-size:22px; }
#import-order-details summary { cursor:pointer; padding:8px 0; }
.import-order { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; margin:16px 0; }
.import-order figure,.import-preview figure { text-align:center; margin:0; font-size:18px; }
.import-order img { display:block; margin:auto; max-width:100%; height:auto; }
.import-preview { display:flex; flex-wrap:wrap; gap:12px; max-height:230px; overflow:auto; margin-top:20px; }
.import-preview canvas { display:block; background:repeating-conic-gradient(var(--stage) 0% 25%,var(--line) 0% 50%) 50% / 16px 16px; margin:0 auto 6px; }
.import-footer { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding-top:12px; border-top:2px solid var(--line); }
.import-footer .reference-note { margin:0; flex:1; min-width:160px; }

/* Saved projects, sheets, and honest placeholders for future routes. */
.subpage-screen { min-height:100svh; padding:100px 32px 80px; }
.subpage-window { max-width:780px; margin:0 auto; }
.subpage-window .text-back { margin-bottom:22px; }
.subpage-window .window-content { padding:32px 38px 38px; }
.quiet-empty { border-top:2px solid var(--line); border-bottom:2px solid var(--line); padding:40px 0; margin:26px 0; }
.quiet-empty p { margin-bottom:0; }
.body-choices { display:flex; gap:8px; }
.body-choices button { flex:1; }
.sheet-window { max-width:1080px; }
.sheet-body-choices { width:360px; max-width:100%; margin-bottom:28px; }
.sheet-layout { display:grid; grid-template-columns:260px 1fr; gap:30px; align-items:center; }
.battle-figure { text-align:center; }
.battle-figure img { display:block; margin:0 auto 16px; }
.sheet-frames { display:grid; grid-template-columns:repeat(8,64px); gap:4px; }
.sheet-frames.throw-frames { grid-template-columns:repeat(auto-fit,112px); }
.sheet-frames.throw-frames img, .sheet-frames.throw-frames button { width:112px; height:96px; }
.animation-stage { flex-wrap:wrap; gap:16px; }
.animation-stage figure { margin:8px; text-align:center; }
.animation-stage figcaption { margin-top:8px; }
#animation-dialog:has(#animation-reference-panel:not([hidden])) { width:680px; }
.sheet-frames img { width:64px; height:64px; background:var(--stage); }
.sheet-layout p { font-size:20px; margin-top:18px; }
.sheet-note { border-top:2px solid var(--line); padding-top:22px; margin-top:28px; font-size:22px; }
.projects-window { max-width:920px; }
.project-actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.file-button { position:relative; cursor:pointer; display:inline-flex; align-items:center; }
.file-button input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.file-button:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.project-list { display:grid; gap:12px; min-height:120px; margin:24px 0; font-size:24px; }
.project-card { display:flex; align-items:center; gap:20px; border:2px solid var(--line); background:var(--stage); color:var(--text); padding:16px; text-align:left; font:24px var(--pixel); }
.project-card > span { flex:1; }
.project-card .project-open { flex:0 0 auto; }
.project-card strong { display:block; font-weight:400; font-size:28px; overflow-wrap:anywhere; }
.project-card span span { display:block; font-size:20px; color:var(--muted); margin-top:6px; }
.storage-note { padding-top:22px; border-top:2px solid var(--line); }

@media (min-width:1700px) {
  .creator-entry { margin-left:7%; padding-top:8vh; width:472px; }
  .site-wordmark { width:440px; margin-bottom:28px; }
  .window-content { padding:34px 36px 30px; }
  .trainer-display { left:calc(7% + 650px); top:25vh; width:728px; }
  .trainer-portraits img { width:320px; height:320px; }
  .trainer-portraits { gap:12px; }
  .pose-display { justify-content:center; }
}
@media (max-height:900px) {
  .creator-location { position:relative; left:auto; right:auto; bottom:auto; padding:0 28px 18px; }
}
@media (max-width:1250px) {
  .trainer-display { left:calc(6% + 480px); width:410px; }
  .trainer-portraits img { width:160px; height:160px; }
  .trainer-portraits { gap:16px; }
  .pose-display { flex-wrap:wrap; gap:8px; }
  .trainer-display-title { font-size:20px; margin-left:0; }
  .sheet-frames { grid-template-columns:repeat(4,64px); }
  .canvas-help { display:none; }
}
@media (max-width:1000px) {
  .trainer-display { display:none; }
  .workbench-body { grid-template-columns:180px minmax(0,1fr); }
  .paint-tools kbd { display:none; }
  #native-size { display:none; }
  .workbench-header { gap:10px; }
  .save-controls { gap:6px; }
  #save-status { font-size:18px; max-width:140px; }
  .save-controls .small-command { font-size:20px; padding:6px 9px; }
  .toolbox { padding-right:12px; }
}
@media (max-width:760px) {
  .editor-screen { padding:64px 10px 10px; height:auto; min-height:100dvh; }
  .workbench { padding:26px; height:auto; min-height:calc(100dvh - 74px); }
  .workbench-header { gap:12px; padding-bottom:10px; flex-wrap:wrap; }
  .save-controls { margin-left:auto; }
  .save-controls .small-command { font-size:20px; padding:6px 9px; min-height:34px; }
  #save-status { font-size:18px; max-width:200px; }
  .workbench-body { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; }
  .toolbox { border-right:0; border-bottom:2px solid var(--line); padding:8px 0; overflow:visible; }
  .toolbox-heading { display:none; }
  .paint-tools { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:2px 2px 4px; }
  .paint-tools button { flex:none; white-space:nowrap; min-height:34px; }
  .paint-tools kbd { display:none; }
  .undo-tools { padding:0; margin-left:auto; flex:none; }
  .paint-colors { display:flex; align-items:center; gap:16px; padding:4px 0 0; border:0; margin:0; min-width:0; line-height:1.1; }
  .active-color { flex:0 0 auto; grid-template-columns:40px auto; gap:0 8px; }
  .active-color label { font-size:22px; }
  #paint-color { width:40px; height:40px; }
  #color-label { font-size:18px; }
  .palette-area { min-width:0; flex:1; }
  #palette-name { font-size:18px; margin:0 0 4px; }
  #palette-name::after { content:' →'; }
  .palette { display:flex; gap:6px; overflow-x:auto; padding:3px; scrollbar-width:thin; }
  .swatch { width:28px; height:28px; flex:0 0 28px; }
  .toolbox-preview { display:none; }
  .drawing-main { padding:10px 0 8px; }
  .canvas-stage { flex:none; height:clamp(176px,calc(100dvh - 620px),300px); }
  .workbench:has(#filmstrip[hidden]) .canvas-stage { height:clamp(266px,calc(100dvh - 530px),390px); }
  .canvas-pair { gap:32px; padding:16px; }
  .reference-toolbar { gap:8px; padding-bottom:8px; }
  .preview-status { display:none; }
}
@media (max-width:600px) {
  .import-dialog { padding:28px; }
  .import-dialog .dialog-heading { gap:8px; margin-bottom:12px; }
  .import-dialog .dialog-heading h2 { font-size:28px; }
  .import-content:has(.import-preview:not(:empty)) > p:first-child { display:none; }
  .import-file-label { padding:12px; }
  .site-header { inset:12px 12px auto auto; gap:6px; }
  .menu-open,#theme-toggle { font-size:20px; padding:6px 10px; min-height:36px; }
  .creator-entry { width:auto; margin:0; padding:76px 20px 64px; }
  .site-wordmark { width:300px; max-width:80%; margin:0 0 28px; }
  .entry-window { max-width:440px; }
  .window-content,.subpage-window .window-content { padding:32px; }
  h1 { font-size:34px; }
  p { font-size:22px; }
  .native-reference-strip { flex-wrap:wrap; gap:4px; }
  .native-reference-strip p { font-size:21px; margin-left:4px; flex:1; min-width:130px; }
  .entry-rows button { font-size:22px; gap:8px; padding-left:23px; }
  .entry-foot { font-size:20px; }
  .creator-location { position:relative; left:auto; right:auto; bottom:auto; padding:0 20px 20px; font-size:18px; }
  .creator-location span:last-child { text-align:right; }
  .editor-breadcrumb { left:16px; top:15px; }
  .editor-breadcrumb button,.editor-breadcrumb span { display:none; }
  .editor-breadcrumb h1 { font-size:23px; }
  .editor-screen { padding:56px 4px 4px; }
  .workbench { padding:19px; }
  .workbench-header { gap:6px 10px; }
  .workbench-header .text-back { font-size:20px; white-space:nowrap; }
  #project-name { font-size:24px; min-height:32px; }
  .save-controls { width:100%; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  #save-status { margin-right:auto; flex:1; font-size:18px; max-width:none; min-width:100px; }
  .save-controls .small-command { font-size:18px; padding:5px 7px; min-height:32px; }
  .paint-tools { gap:4px; }
  .paint-tools button { font-size:20px; min-height:40px; }
  .undo-tools { gap:4px; }
  .paint-colors { gap:10px; }
  .active-color { grid-template-columns:36px auto; gap:0 6px; }
  #paint-color { width:36px; height:40px; }
  .active-color label { font-size:20px; }
  #color-label,#palette-name { font-size:16px; }
  .swatch { width:30px; height:30px; flex-basis:30px; }
  .canvas-heading { gap:6px; padding-bottom:6px; }
  .canvas-heading label { gap:4px; font-size:20px; }
  .canvas-heading select { width:134px; font-size:20px; min-height:36px; padding:4px; }
  .canvas-heading .small-command { padding:5px 7px; font-size:18px; min-height:36px; }
  .canvas-heading #frame-number { font-size:18px; }
  .reference-toolbar { gap:5px; }
  .reference-toolbar select { width:78px; padding:4px; font-size:20px; min-height:36px; }
  .reference-toolbar > div { gap:3px; flex:1; }
  .reference-toolbar button { font-size:18px; padding:5px 6px; min-height:36px; }
  #opacity-control { width:100%; justify-content:flex-end; font-size:18px; }
  #reference-opacity { flex:1; }
  .canvas-pair { gap:16px; padding:12px; }
  .canvas-pair figcaption { font-size:18px; height:22px; margin-bottom:6px; }
  #native-size { display:none; }
  .view-tools button { min-height:36px; }
  .zoom-controls select { min-height:36px; }
  .filmstrip-header { gap:6px; }
  #toggle-frames { font-size:22px; }
  #toggle-frames span { margin-left:0; }
  #drawn-count { display:none; }
  .frame-menu summary { font-size:18px; padding:5px 6px; }
  .frame-navigation button { width:30px; min-height:34px; padding:3px; }
  .frame-cell { flex-basis:48px; }
  .workbench-status { font-size:16px; min-height:28px; }
  .subpage-screen { padding:84px 12px 30px; }
  .sheet-layout { grid-template-columns:1fr; gap:28px; }
  .sheet-frames { grid-template-columns:repeat(4,64px); justify-content:space-between; }
  .quiet-empty { padding:28px 0; }
  .project-card { gap:12px; padding:12px; flex-wrap:wrap; }
  .project-card strong { font-size:26px; }
  .project-actions .small-command { font-size:22px; }
  .controls-dialog dl { grid-template-columns:1fr; gap:4px; }
  .controls-dialog dd { margin-bottom:12px; }
  .compare-pair { gap:14px; flex-wrap:wrap; }
}
#poses-dialog nav { max-height:min(52vh,520px); overflow-y:auto; overscroll-behavior:contain; }
.native-size-preview { flex-wrap:wrap; }
.native-size-preview h3 { white-space:nowrap; }
.native-preview-scroll { max-width:100%; overflow:auto; padding:1px; }
#native-preview { display:block; max-width:none; flex-shrink:0; }
#poses-dialog nav button span { min-width:0; overflow-wrap:anywhere; }
.sheet-frames.large-frames { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.sheet-frames.large-frames button { width:auto; height:auto; min-height:80px; }
.sheet-frames.large-frames img { width:auto; height:auto; max-width:100%; object-fit:contain; }
.compare-pair img { max-width:100%; height:auto; object-fit:contain; }
@media (max-width:370px) {
  .editor-breadcrumb h1 { font-size:20px; }
  .menu-open,#theme-toggle { font-size:18px; padding:6px 7px; }
  .canvas-heading label { font-size:0; }
  .canvas-heading select { width:130px; }
  .reference-toolbar button { font-size:17px; padding:5px 4px; }
  .sheet-frames { grid-template-columns:repeat(4,32px); }
  .sheet-frames img { width:32px; height:32px; }
  .battle-figure img { width:160px; height:160px; }
}

/* Creator recovery and frequently used frame actions. Keep the canvas central. */
#continue-project { gap:12px; }
#continue-project canvas { flex:none; width:32px; height:32px; image-rendering:pixelated; }
#continue-name { display:block; max-width:280px; font-size:20px; color:var(--muted); overflow-wrap:anywhere; }
.workbench-header { flex-wrap:wrap; gap:8px 14px; }
.save-controls { flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.save-controls .small-command { font-size:20px; padding:6px 9px; }
.save-recovery { flex:none; padding:10px 0; border-bottom:2px solid var(--line); }
.save-recovery p { font-size:20px; margin:0 0 6px; max-width:900px; }
.save-recovery > div,.dialog-actions,.export-choices { display:flex; flex-wrap:wrap; gap:8px; }
.template-export { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.template-export h3 { margin:0 0 12px; font-size:26px; }
.template-export select { min-width:0; max-width:100%; }
.save-recovery .small-command { font-size:20px; }
#recent-colors-area { margin-top:10px; font-size:18px; color:var(--muted); }
#recent-colors { margin-top:4px; grid-template-columns:repeat(4,1fr); }
.canvas-controls { display:flex; flex-wrap:wrap; align-items:center; flex:none; gap:6px 12px; margin:4px 0; }
.canvas-controls .view-tools { margin:0; padding:0; }
.preview-controls { display:flex; flex-wrap:wrap; align-items:center; flex:1 1 auto; gap:6px; }
.preview-controls button { font-size:20px; padding:4px 8px; min-height:32px; }
.filmstrip-header { flex-wrap:wrap; }
.filmstrip-header #next-empty,.filmstrip-header #copy-next { white-space:nowrap; }
.sheet-frames button { padding:0; border:0; width:64px; height:64px; background:var(--stage); }
.sheet-frames button:hover { outline:2px solid var(--accent); }
.sheet-window h2 { margin-top:24px; }
#sheet-back { float:right; }
#sheet-front[role=button] { cursor:pointer; }
.animation-settings { display:flex; gap:12px; flex-wrap:wrap; }
.animation-settings label { display:flex; flex-direction:column; gap:5px; font-size:22px; }
.animation-settings input { max-width:90px; }
.animation-stage { display:flex; align-items:center; justify-content:center; min-height:208px; margin:12px 0; background:var(--stage); }
#animation-canvas { image-rendering:pixelated; }
#import-cells { display:grid; grid-template-columns:repeat(var(--sheet-columns,8),minmax(var(--sheet-cell-width,44px),1fr)); gap:6px; max-height:240px; overflow:auto; padding:4px; }
#import-cells button { min-height:44px; padding:4px; display:flex; align-items:center; justify-content:center; background:var(--stage); }
#import-cells canvas { image-rendering:pixelated; }
#import-picker p { font-size:20px; }
@media (min-width:761px) and (max-height:850px) {
  .editor-screen { padding-top:52px; height:auto; min-height:100dvh; }
  .workbench { padding:23px; height:auto; min-height:calc(100dvh - 68px); }
  .canvas-stage { flex:none; height:clamp(240px,calc(100dvh - 440px),400px); }
  .workbench-header { padding-bottom:6px; }
  .drawing-main { padding-top:6px; padding-bottom:4px; }
  .canvas-heading,.reference-toolbar { padding-bottom:4px; }
  .view-tools { padding:4px 0; }
  .timeline { padding-top:4px; }
  .filmstrip-header { margin-bottom:4px; }
  .frame-cell { min-height:56px; }
  .workbench-status { min-height:22px; padding-top:4px; }
}
@media (min-width:761px) and (max-width:1000px) and (max-height:500px) {
  .drawing-toolbar button,.canvas-heading select,.canvas-heading button,.reference-toolbar button,.reference-toolbar select,.canvas-controls button,.canvas-controls select,.preview-controls button,.layer-bar button,.extra-controls button,.save-controls button,.frame-menu summary,.filmstrip-header button { min-height:44px; }
}
@media (max-width:1150px) and (min-width:761px) {
  .save-controls { flex:1 1 100%; justify-content:flex-end; }
  #save-status { margin-right:auto; max-width:none; }
}
@media (max-width:1600px) {
  .canvas-controls .canvas-help { display:none; }
}
@media (max-width:1000px) {
  #drawn-count { display:none; }
  #copy-next span { display:none; }
  .filmstrip-header { gap:6px; }
}
@media (max-width:760px) {
  .save-controls { flex:1 1 100%; justify-content:flex-start; }
  .save-controls .small-command { font-size:18px; padding:5px 7px; }
  #save-status { width:100%; max-width:none; }
  .paint-colors { flex-wrap:wrap; }
  #recent-colors-area { width:100%; margin:0; display:flex; align-items:center; gap:8px; }
  #recent-colors-area[hidden] { display:none; }
  #recent-colors { flex:1; min-width:0; margin:0; }
  .canvas-heading { flex-wrap:wrap; }
  .canvas-heading #frame-number { margin-left:auto; }
  .preview-controls button { font-size:18px; min-height:36px; }
  .filmstrip-header #next-empty,.filmstrip-header #copy-next { font-size:18px; min-height:36px; order:3; }
  .filmstrip-header #next-empty { margin-right:auto; }
  .filmstrip-header .frame-navigation { order:2; }
  .filmstrip-header .frame-menu { order:1; }
  .canvas-stage { height:clamp(176px,calc(100dvh - 490px),256px); }
  .workbench:has(#filmstrip[hidden]) .canvas-stage { height:clamp(266px,calc(100dvh - 400px),346px); }
  .sheet-frames { grid-template-columns:repeat(auto-fit,64px); gap:6px; justify-content:start; }
  #sheet-back { float:none; margin-left:8px; }
}
@media (max-width:370px) {
  .reference-toolbar button span { display:none; }
  .sheet-frames { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sheet-frames button { width:40px; height:40px; }
}

/* Phone workspace: tools and files expand only when needed. */
.mobile-only { display:none; }
#layer-name,#extra-duration,#preview-first,#preview-last { background:var(--stage);color:var(--text);border:2px solid var(--line);font:22px var(--pixel);padding:5px;min-height:36px; }
@media (max-width:760px) {
  .mobile-only { display:inline-block; }
  .workbench-header { gap:6px; }
  .project-name-label { flex:1; min-width:80px; }
  #project-name { width:100%; min-width:0; }
  #mobile-files { margin-left:auto; }
  .workbench-header:not(.mobile-files-open) .save-controls button { display:none; }
  .save-controls { margin:0; }
  #save-status { font-size:18px; min-height:24px; }
  .paint-tools { display:flex; flex-wrap:wrap; gap:4px; padding:0 0 4px; }
  .paint-tools .undo-tools { display:contents; }
  .paint-tools button { flex:1 0 44px; text-align:center; padding:4px; min-height:44px; font-size:18px; }
  .toolbox:not(.mobile-expanded) #fill,.toolbox:not(.mobile-expanded) #picker,.toolbox:not(.mobile-expanded) #pan,.toolbox:not(.mobile-expanded) .paint-colors { display:none; }
  #select { order:1; }#undo { order:2; }#redo { order:3; }
  .toolbox { position:relative; }
  #mobile-tools { width:100%; min-height:44px; font-size:20px; }
  .paint-colors { margin-top:8px; }
  .palette-area { flex-basis:100%; }
  .swatch { width:44px;height:44px;flex-basis:44px; }
  #paint-color { width:44px;height:44px; }
  .canvas-heading select { width:145px; }
  .canvas-heading #frame-number { font-size:18px; }
  .reference-toolbar button,.reference-toolbar select,.canvas-heading select,.canvas-heading button,.layer-bar button,.preview-controls button,.canvas-controls button,.canvas-controls select,.filmstrip-header button,.extra-controls button,.workspace-dialog button,.workspace-dialog input:not([type=checkbox]),.workspace-dialog select,.save-controls button,#mobile-files { min-height:44px; }
  .layer-bar { padding:4px 0; min-height:52px; }
  .layer-bar .small-command,.extra-controls .small-command { min-height:44px; }
  .layer-bar[data-selection=false] button:not(#show-layers),.layer-bar[data-selection=false] #selection-label { display:none; }
  #active-layer-label { max-width:180px; }
  .canvas-stage { height:clamp(220px,calc(100dvh - 460px),400px); }
  .workbench:has(#filmstrip[hidden]) .canvas-stage { height:clamp(260px,calc(100dvh - 400px),440px); }
  .canvas-controls .canvas-help { display:block; flex-basis:100%; margin:4px 0; font-size:18px; }
  .canvas-controls .view-tools { flex-wrap:wrap; flex:1 1 100%; min-width:0; max-width:100%; }
  .workspace-dialog { max-height:calc(100dvh - 16px); overflow-y:auto; overscroll-behavior:contain; }
  .workspace-dialog .dialog-heading { position:sticky; top:0; background:var(--panel); z-index:2; padding-bottom:8px; }
  #layer-list { max-height:240px; }
  .layer-row { gap:5px; }
  #layer-name { width:100%; }
  #layers-dialog .layer-actions label { width:100%; }
  .extra-controls span { font-size:18px; }
}
.workshop-scroll-dialog { position:fixed; inset:0; margin:auto; box-sizing:border-box; overflow:hidden; }
.workshop-scroll-dialog[open] { display:flex; flex-direction:column; }
.workshop-scroll-dialog > .dialog-heading { flex-shrink:0; }
.dialog-scroll { min-height:0; overflow:auto; overscroll-behavior:contain; }
.workspace-dialog,.controls-dialog { position:fixed; inset:0; margin:auto; box-sizing:border-box; }
body:has(dialog[open]) { overflow:hidden; }
.dialog-heading:focus { outline:none; }
select,input,button { border-radius:0; }
button,a,summary,label { -webkit-tap-highlight-color:transparent; }
.preview-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:12px 0; }
.preview-actions label { display:flex; align-items:center; gap:8px; font-size:22px; }
.preview-actions select { font:inherit; color:var(--text); background:var(--stage); border:2px solid var(--line); padding:5px; }
#preview-options { margin-top:16px; }
#preview-options summary { min-height:44px; cursor:pointer; font-size:22px; padding:8px 0; }
#preview-options > label { margin:10px 0; font-size:22px; }
#animation-dialog .cycle-label { min-height:44px; gap:8px; }
#export-preview-sheet { margin-left:0; }
#poses-dialog nav { max-height:none; overflow:visible; }
.touch-help { display:none; }
.game-menu[open] { display:flex; flex-direction:column; overflow:hidden; }
.game-menu nav { min-height:0; overflow:auto; }
.game-menu > [data-menu-close] { flex-shrink:0; }
@media(max-width:760px) {
  .canvas-heading label { flex:1 1 100%; font-size:20px; }
  .canvas-heading select { flex:1; min-width:0; width:100%; }
  .project-card { display:grid; grid-template-columns:48px minmax(0,1fr); gap:10px; align-items:start; }
  .project-card > canvas { width:48px!important; height:auto!important; }
  .project-card > span { min-width:0; }
  .project-card .project-open { grid-column:2; font-size:20px; color:var(--accent); }
  .workshop-scroll-dialog { padding:32px; max-height:calc(100dvh - 16px); overflow:hidden; }
  .dialog-scroll { padding:2px; }
  .animation-stage canvas { max-width:100%; height:auto; }
  .workspace-dialog,.controls-dialog { padding:32px; max-height:calc(100dvh - 16px); }
  .dialog-heading { gap:8px; margin-bottom:12px; }
  .dialog-heading h2 { font-size:26px; }
  .dialog-heading button { flex-shrink:0; }
  .touch-help { display:block; }
  #controls-dialog dl { margin-top:16px; }
  #animation-dialog .dialog-scroll > p:first-child { display:none; }
  #animation-dialog .animation-settings { gap:8px; margin-bottom:8px; }
  #animation-dialog .animation-settings label { flex:1 1 160px; }
  .preview-actions button,.preview-actions select,.controls-dialog button,.frame-menu summary,.frame-navigation button,#theme-toggle,.menu-open { min-height:44px; }
  .frame-navigation button { min-width:44px; }
  .preview-actions #export-preview-sheet { flex-basis:100%; }
  #all-directions { gap:8px; padding:8px; min-height:0; }
  #all-directions canvas { width:64px; height:64px; }
  #all-directions figcaption { font-size:20px; }
  .import-file-label { padding:8px; font-size:22px; }
  .import-footer { gap:8px; flex-direction:column; align-items:stretch; }
  .import-footer .reference-note { font-size:18px; min-width:0; }
  #import-mode { font-size:20px; }
}

/* Familiar layer stack; project data and compositing order stay unchanged. */
#layers-dialog { width:560px; }
#layers-dialog .layers-help { margin:0 0 12px; font-size:20px; line-height:1.35; }
.layer-stack-heading { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:18px; }
#layers-dialog #layer-list { gap:2px; max-height:300px; margin:6px 0 10px; padding:3px; border:2px solid var(--line); background:var(--stage); }
#layers-dialog .layer-row { grid-template-columns:44px minmax(0,1fr) 44px; gap:4px; padding:4px; border:2px solid transparent; align-items:center; }
#layers-dialog .layer-row[data-active=true] { border-color:var(--accent); background:var(--selection); }
#layers-dialog .layer-row[data-drop=above] { border-top-color:var(--accent); }
#layers-dialog .layer-row[data-drop=below] { border-bottom-color:var(--accent); }
#layers-dialog .layer-choose { display:flex; gap:10px; align-items:center; min-width:0; min-height:56px; width:100%; text-align:left; padding:4px; border:0; background:transparent; color:var(--text); font:22px var(--pixel); cursor:pointer; }
#layers-dialog .layer-title { min-width:0; overflow-wrap:anywhere; line-height:1.15; }
#layers-dialog .layer-thumbnail { width:48px!important; height:48px!important; object-fit:contain; flex:none; image-rendering:pixelated; border:1px solid var(--line); background:repeating-conic-gradient(#88939b 0% 25%,#bec7cd 0% 50%) 0 / 12px 12px; }
#layers-dialog .layer-toggle { display:grid; place-items:center; width:44px; min-height:44px; padding:4px; border:2px solid var(--line); color:var(--text); background:var(--panel); font:22px var(--pixel); cursor:pointer; }
#layers-dialog .layer-toggle svg { width:20px; height:20px; }
#layers-dialog .layer-toggle[aria-pressed=true] { border-color:var(--accent); }
#layers-dialog .layer-lock[aria-pressed=false] { color:var(--muted); }
#layers-dialog button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#layers-dialog .layer-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin:10px 0 16px; }
#layers-dialog .layer-actions button { padding:6px 3px; min-height:44px; font-size:20px; }
.layer-properties { border-top:1px solid var(--line); padding-top:12px; margin-bottom:12px; }
.layer-properties>label { display:block; font-size:20px; margin-bottom:6px; }
.layer-rename { display:flex; gap:8px; }
#layers-dialog #layer-name { flex:1; width:100%; min-width:0; }
#layers-dialog #layer-state { margin:8px 0 0; overflow-wrap:anywhere; min-height:24px; }
#layers-dialog .layer-more { margin-top:10px; font-size:18px; }
#layers-dialog .layer-more summary { cursor:pointer; padding:8px 0; min-height:44px; }
#layers-dialog .layer-more p { margin-top:8px; }
@media(max-width:480px) {
 #layers-dialog { padding:24px; }
 #layers-dialog .dialog-heading { gap:8px; margin-bottom:12px; }
 #layers-dialog .layer-choose { flex-direction:column; align-items:flex-start; gap:5px; font-size:20px; }
 #layers-dialog .layer-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
 #layers-dialog .layer-actions #delete-layer { grid-column:2/4; }
 #layers-dialog #layer-list { max-height:240px; }
}