/* The mirror rail occupies one thin row outside the drawing viewport. */
body.creation-editor[data-page="draw"] .draw-viewport { grid-area: stage; display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 4px; }
body.creation-editor[data-page="draw"] .draw-viewport > .draw-board { flex: 1; grid-area: auto; }
body.creation-editor[data-page="draw"] .draw-meta { pointer-events: none; }
.draw-mirror-rail { grid-column: 1 / -1; flex: 0 0 auto; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; align-items: center; gap: 3px; min-width: 0; min-height: 68px; padding: 3px; border: 1px solid #ffd35a30; border-radius: 10px; background: #1d2b38; color: #ffd35a; font: 700 11px/1 ui-monospace, monospace; }
.draw-mirror-rail__label { grid-column: 1 / -1; white-space: nowrap; color: #eee6c5; }
.draw-mirror-rail label { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; }
.draw-mirror-rail label span { min-width: 30px; font-variant-numeric: tabular-nums; }
.draw-mirror-rail input { box-sizing: border-box; min-width: 0; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0; accent-color: #ffd35a; cursor: ew-resize; touch-action: none; }
.draw-mirror-rail button { box-sizing: border-box; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 8px; padding: 0; background: #ffd35a15; color: #ffd35a; font-size: 22px; cursor: pointer; }
.draw-mirror-rail :is(input, button):focus-visible { outline: 3px solid #8ecdf0; outline-offset: 1px; }
.draw-mirror-rail.is-disabled { border-color: #ffffff18; color: #89969d; }
.draw-mirror-rail.is-disabled :is(label, .draw-mirror-rail__label, button) { opacity: .45; }
.draw-mirror-rail input:disabled, .draw-mirror-rail button:disabled { cursor: default; }
body.creation-editor[data-page="draw"] .draw-control-dock { grid-area: controls; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; max-height: 100%; }
body.creation-editor[data-page="draw"] .draw-control-dock > .draw-controls { flex: 1 1 auto; max-height: none; min-height: 0; }
body[data-page="draw"] #draw-canvas { position: relative; z-index: 1; background: transparent !important; }
.draw-pixel-background, .draw-pixel-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.draw-pixel-background { z-index: 0; }
.draw-pixel-lines { z-index: 2; }
body[data-page="draw"] .draw-grid { background: none; box-shadow: none; }
body[data-page="draw"] .draw-grid.is-fine { background: none; }
.draw-grid { z-index: 3; }
.draw-symmetry-axis { left: calc(var(--mirror-x, 50%) - var(--symmetry-length) / 2); top: calc(var(--mirror-y, 50%) - 1px); }
.draw-playback-position { position: absolute; top: 8px; left: 8px; z-index: 5; padding: 6px 9px; border: 1px solid #8ecdf04d; border-radius: 8px; color: #8ecdf0; background: #15202be8; font: 700 11px/1 ui-monospace, monospace; pointer-events: none; }
body[data-page="draw"] .animation-controls__workspace-panel .is-playing { box-shadow: inset 0 0 0 2px #8ecdf0; background-color: #8ecdf025; }
#draw-animation-play .draw-stop-icon, #draw-animation-play[aria-pressed="true"] .draw-play-icon { display: none; }
#draw-animation-play[aria-pressed="true"] .draw-stop-icon { display: block; }
body[data-page="draw"] .app-tabs #draw-animation-play svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="draw"] .app-tabs #draw-animation-play[aria-pressed="true"] { background: #26333d; }
body[data-page="draw"] .draw-toggles button:disabled { opacity: .35; cursor: default; }
.draw-virtual-controls { flex: 0 0 48px; box-sizing: border-box; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; min-width: 0; padding: 3px; border: 1px solid #8ecdf035; border-radius: 15px; background: #15202b; }
body.creation-editor[data-page="draw"] .draw-controls > :is(.draw-control-row, .draw-virtual-controls, .draw-toolbar, .draw-actions) { flex-shrink: 0; }
.draw-virtual-controls button { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 0; border: 1px solid #8ecdf035; border-radius: 11px; background: #192a39; color: #b7e1f7; padding: 4px 8px; font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1.2; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.draw-virtual-controls [data-virtual-left] { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.draw-virtual-controls [data-virtual-right] { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.draw-virtual-controls .draw-button-tool-icon { display: grid; flex: 0 0 20px; place-items: center; width: 20px; height: 20px; color: currentColor; }
.draw-virtual-controls .draw-button-tool-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.draw-virtual-controls .draw-button-swatch { flex: 0 0 13px; width: 13px; height: 13px; border: 1px solid #ffffff80; border-radius: 4px; background: var(--draw-button-swatch-color, #f4f0e4); box-shadow: 0 0 0 1px #0005; }
.draw-virtual-controls button[aria-pressed="true"] { background: #8ecdf0; color: #15202b; border-color: #d6f0ff; box-shadow: inset 0 0 0 2px #ffffff50; }
.draw-virtual-controls.is-disabled { border-color: #ffffff18; }
.draw-virtual-controls button:disabled { color: #8d9ca7; opacity: .45; cursor: default; }
.draw-virtual-marker { position: absolute; z-index: 7; pointer-events: none; width: 20px; height: 20px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 1px #101820); }
.draw-virtual-marker svg { display: none !important; }
.draw-virtual-marker::before,
.draw-virtual-marker::after { content: ""; position: absolute; left: 50%; top: 50%; box-sizing: border-box; border: 1px solid #101820; border-radius: 1px; background: #fff; transform: translate(-50%, -50%); }
.draw-virtual-marker::before { width: 3px; height: 19px; }
.draw-virtual-marker::after { width: 19px; height: 3px; }
.draw-virtual-marker.is-pressed::before,
.draw-virtual-marker.is-pressed::after { background: #ffd35a; }
.has-virtual-cursor, .has-virtual-cursor #draw-canvas { cursor: none !important; }
@media (max-width: 380px) { .draw-mirror-rail { gap: 2px; padding: 3px; } .draw-mirror-rail__label { font-size: 10px; } .draw-mirror-rail label { gap: 2px; } .draw-mirror-rail label span { min-width: 30px; font-size: 10px; } }
@media (max-width: 600px) and (orientation: portrait) {
  body.creation-editor[data-page="draw"] .draw-page { grid-template-rows: minmax(194px, 1fr) minmax(0, auto); }
  body.creation-editor[data-page="draw"] .draw-control-dock { max-height: min(220px, calc(100dvh - var(--creation-editor-header) - var(--creation-editor-bottom) - 220px)); }
}
@media (orientation: landscape) and (max-width: 900px) {
  body[data-page="draw"] .draw-controls :is(.draw-toolbar, .draw-tools, .draw-toggles) { gap: 4px !important; flex-wrap: nowrap !important; }
}

body[data-page="draw"] .draw-input-settings button:focus-visible { outline: 3px solid #8ecdf0; outline-offset: 2px; }

/* This group lives in the existing fixed settings sheet and stays compact. */
body[data-page="draw"] .draw-input-settings { grid-column: 1 / -1; grid-row: span 6; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 6px 8px; min-width: 0; padding: 9px; border: 1px solid #ffffff25; border-radius: 12px; background: #18232b; }
body[data-page="draw"] .draw-input-settings h2 { grid-column: 1 / -1; margin: 0; color: #f5f2e8; font-size: 12px; line-height: 1.2; }
body[data-page="draw"] .draw-input-settings__choices { display: flex; gap: 4px; }
body[data-page="draw"] .draw-input-settings__choices > button { box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid #ffffff35; border-radius: 10px; background: #2b3742; color: #edf2f3; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; }
body[data-page="draw"] .draw-input-settings__choices > button[aria-pressed="true"] { border-color: #ffd35a; background: #ffd35a; color: #17232d; box-shadow: 0 2px 0 #b88f1d; }
body[data-page="draw"] .draw-input-settings p { grid-column: 1 / -1; margin: 0; color: #c2cbd0; font-size: 11px; line-height: 1.35; }
body[data-page="draw"] .draw-input-settings .draw-input-help { color: #edf2f3; }
body[data-page="draw"] .draw-input-settings > #draw-shortcuts-open { width: 100%; min-width: 0; min-height: 44px; padding: 6px 8px; border: 1px solid #ffffff35; border-radius: 9px; background: #26333d; color: #edf2f3; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.3; }
body[data-page="draw"] .draw-input-settings > #draw-input-reset { grid-column: 1 / -1; width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid #ffffff35; border-radius: 9px; background: #26333d; color: #edf2f3; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.3; }

/* The palette now starts at the row edge; keep the existing swatch sizes. */
body.creation-editor[data-page="draw"] .draw-control-row { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }

/* Mirror the stage and fixed control column only at the shared desktop and
   landscape breakpoint. Portrait keeps its established stage-first layout. */
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) {
  body[data-page="draw"][data-draw-controls-side="left"] .draw-page { grid-template-areas: "controls stage"; grid-template-columns: clamp(250px, 30vw, 370px) minmax(0, 1fr); }
}

.draw-virtual-controls [data-button-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draw-virtual-controls .draw-button-swatch.is-clear { background: repeating-conic-gradient(#ffffffbb 0% 25%, #7f8d96 0% 50%) 0 0 / 6px 6px; }

@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) {
  body.creation-editor[data-page="draw"] #main { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
}

body.creation-editor[data-page="draw"] .draw-input-settings #draw-input-reset { width: 100% !important; min-width: 0 !important; height: 44px !important; }
body.creation-editor[data-page="draw"] .draw-input-settings #draw-shortcuts-open { width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; }

/* Selection controls live in viewport coordinates, outside the pixel surface. */
body[data-page="draw"] .draw-board > :is(.draw-selection__corner, .draw-selection__pivot) { position: absolute; z-index: 5; box-sizing: border-box; pointer-events: none; }
body[data-page="draw"] .draw-board > .draw-selection-mask { position: absolute; z-index: 4; display: block; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
body[data-page="draw"] .draw-board > .draw-selection-mask[hidden] { display: none !important; }
body[data-page="draw"] .draw-board > :is(.draw-selection__corner, .draw-selection__pivot) { transform: translate(-50%, -50%); border: 2px solid #17232d; background: #ffd35a; box-shadow: 0 0 0 1px #fffbe9, 0 1px 5px #000b; }
body[data-page="draw"] .draw-selection__corner { width: 12px; height: 12px; border-radius: 3px; }
body[data-page="draw"] .draw-selection__pivot { width: 20px; height: 20px; border-radius: 50%; background: transparent !important; box-shadow: inset 0 0 0 2px #ffd35a, 0 0 0 2px #fffbe9, 0 1px 5px #000b !important; }
.draw-selection__pivot::before { content: ""; position: absolute; inset: 5px; border: 1px solid #fffbe9; border-radius: 50%; background: transparent; }
.draw-selection__pivot::after { content: ""; position: absolute; width: 3px; height: 3px; background: #ffd35a; box-shadow: 0 0 0 1px #17232d; border-radius: 50%; left: 6.5px; top: 6.5px; }
body[data-page="draw"] .draw-board > [data-selection-control]:is([data-hover="true"], [data-active="true"]) { background-color: #fff6d5; box-shadow: 0 0 0 2px #17232d, 0 0 0 4px #ffd35a; }
body[data-page="draw"] .draw-selection__pivot:is([data-hover="true"], [data-active="true"]) { box-shadow: inset 0 0 0 2px #fff6d5, 0 0 0 2px #17232d, 0 0 0 4px #ffd35a !important; }
body[data-page="draw"] .draw-board > :is(.draw-selection__corner, .draw-selection__pivot)[hidden] { display: none !important; }
body[data-page="draw"] .draw-board[data-selection-hover="pivot"] canvas { cursor: move; }
body[data-page="draw"] .draw-board[data-selection-hover="nw"] canvas, body[data-page="draw"] .draw-board[data-selection-hover="se"] canvas { cursor: grab; }
body[data-page="draw"] .draw-board[data-selection-hover="ne"] canvas, body[data-page="draw"] .draw-board[data-selection-hover="sw"] canvas { cursor: grab; }

/* Fixed contextual row; changing actions never changes stage or dock geometry. */
.draw-selection-controls { flex: 0 0 66px; box-sizing: border-box; min-width: 0; padding: 3px; border: 1px solid #ffd35a30; border-radius: 10px; background: #1d2b38; color: #edf2f3; }
.draw-selection-controls__row { display: grid; grid-template-columns: minmax(62px, .7fr) repeat(2, minmax(0, 1fr)); gap: 4px; height: 44px; }
body[data-page="draw"] .draw-selection-controls :is(button, select) { box-sizing: border-box; min-width: 0; width: 100%; height: 44px; min-height: 44px; padding: 4px; border: 1px solid #ffffff35; border-radius: 8px; background: #26333d !important; color: #edf2f3; font: 600 12px/1.2 system-ui; }
.draw-selection-controls button:disabled { opacity: .4; }
.draw-selection-controls p { margin: 3px 2px 0; height: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10px/13px system-ui; }
body[data-page="draw"] .draw-selection-controls [data-selection-action="confirm"] { background: #ffd35a !important; color: #17232d; }
.draw-selection-numbers { min-width: 0; border-top: 1px solid #ffffff25; padding-top: 4px; }
.draw-selection-numbers summary { min-height: 44px; display: flex; align-items: center; font-size: 12px; cursor: pointer; }
.draw-selection-numbers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.draw-selection-numbers label { min-width: 0; font-size: 12px; }
body[data-page="draw"] .draw-selection-numbers input[type="number"] { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; background: #151e25 !important; color: #edf2f3; padding: 4px; }
.draw-selection-panel__ratio { display: flex; align-items: center; gap: 4px; min-height: 36px; }
body[data-page="draw"] .draw-board > :is(.draw-selection__flip-x, .draw-selection__flip-y) { position: absolute; z-index: 6; box-sizing: border-box; pointer-events: none; width: 26px; height: 26px; border: 2px solid #17232d; border-radius: 6px; background: #ffd35a; color: #17232d; box-shadow: 0 0 0 1px #fffbe9, 0 1px 5px #000b; transform: translate(-50%, -50%); font: 700 22px/20px system-ui; text-align: center; }
body[data-page="draw"] .draw-board > :is(.draw-selection__flip-x, .draw-selection__flip-y)[hidden] { display: none !important; }

/* Native, contained command help and shortcut editor. */
.draw-shortcuts-dialog[open] {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(620px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: 85dvh;
  margin: auto;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #52606a;
  border-radius: 12px;
  background: #202a33;
  color: #f4f0e4;
  box-shadow: 0 14px 40px #0009;
}
.draw-shortcuts-dialog::backdrop { background: #080d12bd; }
.draw-shortcuts-dialog__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-rows: auto auto; align-items: center; gap: 8px; min-width: 0; }
.draw-shortcuts-dialog__header h2 { grid-row: 1; grid-column: 1; min-width: 0; margin: 0; color: #f4f0e4; font-size: 1rem; line-height: 1.3; }
.draw-shortcuts-dialog__header label { grid-row: 2; grid-column: 1; min-width: 0; color: #d6e0e4; font-size: 12px; line-height: 1.3; }
.draw-shortcuts-dialog__header button { box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid #ffffff35; border-radius: 10px; background: #26333d; color: #edf2f3; }
.draw-shortcuts-dialog__header button { grid-row: 1; grid-column: 2; }
.draw-shortcuts-dialog__header select { box-sizing: border-box; grid-row: 2; grid-column: 2; width: min(200px, 100%); min-width: 0; min-height: 44px; padding: 6px 8px; border: 1px solid #71808a; border-radius: 9px; background: #151e25; color: #f4f0e4; font: inherit; }
.draw-shortcuts-dialog input[type="search"] { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid #71808a; border-radius: 9px; background: #151e25; color: #f4f0e4; font: inherit; }
.draw-shortcuts-list { flex: 1 1 auto; min-width: 0; min-height: 0; max-height: 60dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #ffffff25; border-radius: 10px; background: #18232b; scrollbar-width: thin; }
.draw-shortcuts-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content 44px 44px 44px; grid-template-areas: "label keys run edit unset"; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px; border-bottom: 1px solid #ffffff1c; }
.draw-shortcuts-row:last-child { border-bottom: 0; }
.draw-shortcuts-row > :is(label, .draw-shortcuts-row__label) { grid-area: label; min-width: 0; color: #edf2f3; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.draw-shortcuts-row kbd,
.draw-shortcuts-row .draw-shortcuts-row__keys { grid-area: keys; box-sizing: border-box; min-width: 0; max-width: 100%; padding: 4px 6px; border: 1px solid #ffffff35; border-radius: 6px; background: #10181e; color: #ffd35a; font: 600 11px/1.35 ui-monospace, monospace; white-space: normal; overflow-wrap: anywhere; }
.draw-shortcuts-row > button,
.draw-shortcuts-row .draw-shortcuts-row__run,
.draw-shortcuts-row .draw-shortcuts-row__change { box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 5px; border: 1px solid #ffffff35; border-radius: 9px; background: #26333d; color: #edf2f3; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.draw-shortcuts-row > button:nth-of-type(1), .draw-shortcuts-row .draw-shortcuts-row__run { grid-area: run; }
.draw-shortcuts-row > button:nth-of-type(2), .draw-shortcuts-row .draw-shortcuts-row__change { grid-area: edit; }
.draw-shortcuts-row > button:nth-of-type(3) { grid-area: unset; }
.draw-shortcuts-row > span:not(.draw-shortcuts-row__label) { grid-area: edit; justify-self: end; color: #d6e0e4; font-size: 11px; }
.draw-shortcuts-dialog__profiles { display: flex; align-items: center; gap: 8px; min-width: 0; color: #d6e0e4; font-size: 12px; }
.draw-shortcuts-dialog__profiles select { box-sizing: border-box; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px; padding: 6px 8px; border: 1px solid #71808a; border-radius: 9px; background: #151e25; color: #f4f0e4; font: inherit; }
.draw-shortcuts-dialog > [data-capture-status] { margin: 0; color: #d6e0e4; font-size: 12px; line-height: 1.35; }
.draw-shortcuts-dialog > button { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 6px 10px; border: 1px solid #ffffff35; border-radius: 9px; background: #26333d; color: #edf2f3; font: inherit; }
.draw-shortcuts-dialog :is(button, input, select):focus-visible { outline: 3px solid #8ecdf0; outline-offset: 2px; }

@media (max-width: 420px) {
  .draw-shortcuts-dialog[open] { gap: 10px; padding: 12px; }
  .draw-shortcuts-dialog__header { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 6px; }
  .draw-shortcuts-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "label keys keys" "run edit unset"; gap: 6px; }
  .draw-shortcuts-row > :is(kbd, .draw-shortcuts-row__keys) { justify-self: end; }
}

/* The shared design-system fields use important light surfaces; this dark dialog
   needs its own surface so the current OS and typed search remain readable. */
body[data-page="draw"] .draw-shortcuts-dialog :is(input[type="search"], select) { border: 1px solid #71808a !important; background: #151e25 !important; color: #f4f0e4; color-scheme: dark; }
body[data-page="draw"] .draw-shortcuts-dialog input[type="search"]::placeholder { color: #b8c5ce; opacity: 1; }
.draw-shortcuts-row > button:disabled { opacity: .4; cursor: default; }

/* Persistent dismissal chrome, scoped to this editor's sheets. */
body[data-page="draw"] .draw-panel-header {
  position: sticky; top: 0; z-index: 4; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
  grid-column: 1 / -1; gap: 8px; min-height: 44px; margin: 0; padding: 0;
  background: #202a33; color: #f5f2e8;
}
body[data-page="draw"] .draw-panel-header :is(h2, strong) { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; line-height: 1.3; }
body[data-page="draw"] .draw-panel-header .draw-panel-close {
  display: grid !important; place-items: center; box-sizing: border-box;
  flex: 0 0 44px; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
  margin: 0 !important; padding: 0 !important; border: 1px solid #ffffff35 !important;
  border-radius: 10px !important; background: #2b3742 !important; color: #edf2f3 !important;
  font: 24px/1 system-ui !important; cursor: pointer; touch-action: manipulation;
}
body[data-page="draw"] .draw-panel-close:focus-visible { outline: 3px solid #8ecdf0; outline-offset: 2px; }
body[data-page="draw"] .draw-canvas-panel > .draw-panel-header { flex-wrap: wrap; }
body[data-page="draw"] .draw-canvas-panel > .draw-panel-header h2 { flex: 1; }
body[data-page="draw"] .draw-canvas-panel > .draw-panel-header p { order: 1; width: 100%; }
body[data-page="draw"] .draw-project-subpanel { padding: 4px 0; }
body[data-page="draw"] .draw-project-subpanel .draw-panel-header { top: 90px; }
body[data-page="draw"] .dce-header.draw-panel-header { background: #14202b; }
body[data-page="draw"] .animation-controls__frame-menu { max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
body[data-page="draw"] .animation-controls__frame-menu .draw-panel-header { flex-basis: 100%; grid-column: 1 / -1; }
body[data-page="draw"] #draw-controls-side-toggle svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; }
body[data-page="draw"] #draw-controls-side-toggle [data-controls-side-highlight] { fill: currentColor; stroke: none; }
/* File's former floating summary × is replaced by the sheet header close. */
body.project-workspace-ready.creation-editor[data-page="draw"] .creation-output[open] > summary { position: static; z-index: auto; top: auto; right: auto; }
body.creation-editor[data-page="draw"] .creation-output[open] > summary svg { display: block; }
body.creation-editor[data-page="draw"] .creation-output[open] > summary::after { display: none; }
body[data-page="draw"] .draw-canvas-panel .draw-canvas-resize-help { margin: 0; color: #cbd5dc; font-size: 12px; line-height: 1.5; }

/* One reserved row serves independent held inputs and contextual click actions. */
.draw-input-action-strip { flex: 0 0 48px; display: flex; gap: 5px; min-width: 0; container-type: inline-size; }
.draw-input-action-strip .draw-virtual-controls { flex: 1 1 0; min-width: 0; }
.draw-input-action-strip .draw-selection-controls { flex: 0 0 53%; min-width: 140px; height: 48px; padding: 1px; }
.draw-input-action-strip .draw-selection-controls__row { grid-template-columns: 44px repeat(2, minmax(0, 1fr)); gap: 2px; }
.draw-input-action-strip .draw-selection-controls p { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
body[data-page="draw"] .draw-input-action-strip .draw-selection-controls :is(button, select) { padding: 1px; font-size: 11px; }
.draw-input-action-strip .draw-virtual-controls button { gap: 3px; padding: 2px; font-size: 11px; }
.draw-input-action-strip .draw-button-tool-icon, .draw-input-action-strip .draw-button-tool-icon svg { width: 16px; height: 16px; flex-basis: 16px; }
.draw-input-action-strip .draw-button-swatch { width: 9px; height: 9px; flex-basis: 9px; }
@container (max-width: 300px) { .draw-input-action-strip .draw-button-tool-icon { display: none; } }

.draw-input-action-strip { flex-basis: 52px; }
.draw-input-action-strip .draw-selection-controls { height: 52px; padding: 3px 1px; }