:root {
  color-scheme: light dark;
  --draw2-bg: #10131b;
  --draw2-surface: #191e29;
  --draw2-surface-raised: #222a38;
  --draw2-text: #f7f9fc;
  --draw2-muted: #a9b4c4;
  --draw2-border: #374356;
  --draw2-accent: #8ae3d2;
  --draw2-danger: #ff9e9e;
  --draw2-focus: #f8d477;
  font-family:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* Draw timeline: image layers and Audio references share one time axis. */
.draw2-timeline-audio-row {
  border-top: 1px solid color-mix(in srgb, var(--draw2-accent) 30%, var(--draw2-border-subtle));
  background: color-mix(in srgb, var(--draw2-panel) 88%, #151d2d);
}
.draw2-timeline-audio-label {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 26px;
  gap: 6px;
  align-items: center;
  padding: 3px 5px !important;
}
.draw2-timeline-audio-title {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  color: var(--draw2-text-strong);
  font-size: 11px;
  font-weight: 700;
}
.draw2-timeline-audio-title .draw2-ui-icon {
  width: 14px;
  height: 14px;
  color: var(--draw2-accent);
}
.draw2-timeline-audio-picker {
  min-width: 0 !important;
  width: 100% !important;
  height: 24px !important;
  padding: 0 20px 0 6px !important;
  font-size: 10px !important;
}
.draw2-timeline-audio-add {
  width: 26px !important;
  min-width: 26px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  font-size: 17px !important;
}
.draw2-timeline-audio-clip {
  position: absolute;
  inset-block: 4px;
  z-index: 2;
  min-width: 0;
  overflow: hidden;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--draw2-accent) 62%, white 8%);
  border-radius: 5px;
  background: color-mix(in srgb, var(--draw2-accent) 30%, #172237);
  color: var(--draw2-text-strong);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.draw2-timeline-audio-clip[data-audio-kind="SE"] {
  border-color: color-mix(in srgb, #ffb45f 70%, white 8%);
  background: color-mix(in srgb, #ff9f43 26%, #261d18);
}
.draw2-timeline-audio-clip:hover,
.draw2-timeline-audio-clip:focus-visible {
  filter: brightness(1.14);
  outline: none;
}

/* Late overrides for the deliberately small Asset Builder surface. */

/* The Asset editor is taller than the right dock by design. Keep the dock as
 * the single scroll surface so the lower Frame and Save controls stay
 * reachable without moving the central canvas. */
#draw2WorkspacePanelAssets {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#draw2CreatorAssetSurface {
  min-height: max-content !important;
}

/* Playback position and Audio artwork focus. Audio owns a musical clock; the
 * Draw frame lane is a synchronized visual projection. */
.draw2-audio-panel[data-audio-panel-surface="timeline"] {
  position: relative;
}
.draw2-audio-playhead {
  position: absolute;
  top: 0;
  z-index: 20;
  width: 2px;
  min-width: 2px;
  height: 100%;
  background: #f0c5ff;
  box-shadow: 0 0 0 1px rgb(200 139 255 / 38%), 0 0 8px rgb(200 139 255 / 72%);
  pointer-events: none;
  transition: left 70ms linear;
}
.draw2-workspace-frame .draw2-timeline-playhead {
  width: 2px !important;
  min-width: 2px !important;
  background: #f0c5ff !important;
  box-shadow:
    0 0 0 1px rgb(200 139 255 / 36%),
    0 0 7px rgb(200 139 255 / 68%) !important;
}

@media (min-width: 1120px) {
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-canvas-region {
    overflow: hidden;
    background: var(--draw2-surface-canvas);
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceCanvasSlot {
    position: absolute !important;
    inset: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-mini-preview:not([hidden]) {
    top: var(--draw2-space-2) !important;
    right: var(--draw2-space-2) !important;
    left: auto !important;
    transform: none !important;
  }
}

/* iGAME right rail: the Game preview/build surface is a two-level rail.
   The shared palette row is intentionally hidden for GAME, so leaving the
   legacy three-row palette grid in place made the preview card taller than
   its visible dock and clipped its primary controls at desktop sizes. */
@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceRightDock {
    grid-template-rows: 44px minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceModeSummary {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 44px !important;
    height: 44px !important;
    overflow: hidden !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceRightCustomDock {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspacePanelPreview {
    min-height: 0 !important;
    height: auto !important;
    overflow: auto !important;
  }
}

@media (max-width: 700px) {
  /* Keep the same four high-frequency commands on the compact top rail. */
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"] {
    display: grid !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }
}

/* Unified control icon language. Product icons use the same 24-unit sprite,
   the same currentColor contract, and the 16/20/24/32px rendering contract.
   Labels remain text so icon-only and icon+label controls keep identical semantics. */
.draw2-button-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.draw2-button-icon > .draw2-ui-icon,
.draw2-audio-global-button > .draw2-ui-icon,
.draw2-audio-fx-action > .draw2-ui-icon,
.draw2-audio-fx-add > .draw2-ui-icon,
.draw2-layer-visibility > .draw2-ui-icon,
.draw2-timeline-row-visibility > .draw2-ui-icon,
.draw2-onion-control > .draw2-ui-icon,
.draw2-onion-mode-control > .draw2-ui-icon,
.draw2-canvas-resize-anchor-grid .draw2-ui-icon,
.draw2-audio-browser-icon > .draw2-ui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.draw2-button-icon > .draw2-button-label {
  display: inline-block;
  line-height: 1;
}
.draw2-audio-global-button {
  display: inline-grid;
  place-items: center;
  font-size: 0;
}
.draw2-audio-global-button.is-record > .draw2-ui-icon {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}
.draw2-audio-browser-icon {
  font-size: 0;
}
.draw2-audio-browser-icon > .draw2-ui-icon {
  color: inherit;
}
.draw2-audio-fx-action,
.draw2-audio-fx-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.draw2-layer-visibility,
.draw2-timeline-row-visibility {
  display: inline-grid;
  place-items: center;
  font-size: 0;
}
.draw2-timeline-row-visibility > .draw2-ui-icon,
.draw2-layer-visibility > .draw2-ui-icon {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}
.draw2-onion-control > .draw2-ui-icon,
.draw2-onion-mode-control > .draw2-ui-icon {
  display: inline-block;
}
.draw2-canvas-resize-anchor-grid .draw2-ui-icon {
  display: block;
}
.draw2-right-panel-option-mark > .draw2-ui-icon,
.draw2-right-custom-empty-icon > .draw2-ui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.draw2-workspace-tab-add > .draw2-ui-icon,
.draw2-panel-picker-close > .draw2-ui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.draw2-right-panel-option-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.draw2-right-custom-empty > .draw2-right-custom-empty-icon {
  display: block;
  color: var(--draw2-accent-strong);
}
.draw2-audio-editor-icon > .draw2-ui-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}
.draw2-audio-editor-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.draw2-audio-editor-pin > .draw2-ui-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.draw2-audio-fx-chain li b {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.draw2-audio-fx-chain li b > .draw2-ui-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}
.draw2-asset-builder-step > .draw2-ui-icon,
.draw2-asset-builder-layout-icon > .draw2-ui-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.draw2-asset-builder-matrix-header > .draw2-ui-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
.draw2-asset-builder-matrix-cell strong > .draw2-ui-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.draw2-asset-builder-compass-slot > .draw2-ui-icon {
  grid-row: 1 / -1;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #9fe1bb;
}
.draw2-asset-builder-compass-slot small > .draw2-ui-icon {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  vertical-align: -1px;
}
.draw2-asset-animation-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.draw2-asset-animation-chip > .draw2-ui-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}
.draw2-asset-animation-chip > small {
  color: var(--draw2-text-muted);
}
.draw2-asset-slot-arrow > .draw2-ui-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.draw2-audio-track-icon > .draw2-ui-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
.draw2-audio-track-lane-cell > .draw2-ui-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

@media (max-width: 700px) {
  .draw2-button-icon > .draw2-ui-icon,
  .draw2-audio-global-button > .draw2-ui-icon,
  .draw2-audio-browser-icon > .draw2-ui-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
}

/* -------------------------------------------------------------------------
   Simple Asset Builder path
   The visible workflow is intentionally only:
   Asset card -> Cell -> Canvas rectangle -> Frame.
   Older mapping/layout controls remain in the DOM for PXD compatibility but
   are not part of the normal editing surface.
   ------------------------------------------------------------------------- */
.draw2-asset-builder-asset-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  border-color: color-mix(in srgb, #4db7ff 42%, var(--draw2-border-subtle));
  background: color-mix(in srgb, #4db7ff 5%, var(--draw2-surface-input));
}
.draw2-asset-builder-asset-cards {
  display: contents;
}
.draw2-asset-builder-asset-card,
.draw2-asset-builder-add-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 92px;
  padding: 10px 8px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-muted);
  cursor: pointer;
  text-align: center;
}
.draw2-asset-builder-asset-card:hover,
.draw2-asset-builder-asset-card:focus-visible,
.draw2-asset-builder-asset-card.is-selected {
  border-color: #67d59b;
  background: color-mix(in srgb, #67d59b 15%, var(--draw2-surface-raised));
  color: var(--draw2-text-strong);
}
.draw2-asset-builder-asset-card strong {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-asset-card span {
  color: #9fe1bb;
  font-size: 0.56rem;
  font-weight: 800;
}
.draw2-asset-builder-asset-card small {
  max-width: 100%;
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-add-card {
  min-height: 92px;
  border: 1px dashed
    color-mix(in srgb, #67d59b 78%, var(--draw2-border-subtle));
  background: color-mix(in srgb, #67d59b 5%, var(--draw2-surface-raised));
  color: #9fe1bb;
  font-size: 1.8rem;
  line-height: 1;
}
.draw2-asset-builder-add-card:hover,
.draw2-asset-builder-add-card:focus-visible {
  border-color: #9fe1bb;
  background: color-mix(in srgb, #67d59b 16%, var(--draw2-surface-raised));
}
.draw2-asset-builder-asset-summary {
  grid-column: 1 / -1;
  padding: 2px 2px 0;
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-close {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 28px;
  padding-inline: 9px;
  font-size: 0.56rem;
}

.draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-instruction,
.draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-config,
.draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-columns,
.draw2-asset-builder[data-editor-open="false"]
  .draw2-asset-builder-layout-details,
.draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-actions {
  display: none;
}
.draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-close {
  display: none;
}
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-steps,
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-source,
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-motion-heading:not(
    .draw2-asset-builder-direction-heading
  ),
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-motion-list,
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-compass,
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-compass-actions,
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-layout-details,
.draw2-asset-builder[data-editor-open="true"] + .draw2-asset-detail-editor {
  display: none;
}
.draw2-asset-detail-editor {
  display: none !important;
}
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-config {
  grid-template-columns: minmax(180px, 1.4fr) minmax(130px, 0.8fr);
  padding: 7px;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-config
  > .draw2-asset-builder-field:nth-child(3),
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-config
  > .draw2-asset-builder-field:nth-child(4) {
  display: none;
}
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-columns {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 290px);
  align-items: start;
}
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-matrix-card
  > .draw2-asset-builder-direction-heading {
  order: 2;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-matrix-details {
  order: 3;
  display: block;
  border: 0;
  background: transparent;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-matrix-details
  > summary {
  display: none;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-matrix-details
  > .draw2-asset-builder-matrix {
  margin: 0;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-matrix-footer {
  order: 4;
}
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-new-motion {
  order: 5;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-frame-editor {
  order: 6;
}
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-actions {
  grid-column: 1 / -1;
}
.draw2-asset-builder-matrix {
  grid-template-columns: minmax(66px, 0.72fr) repeat(4, minmax(58px, 1fr));
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.draw2-asset-builder-matrix[data-direction-count="1"] {
  grid-template-columns: minmax(72px, 0.72fr) minmax(90px, 1fr);
}
.draw2-asset-builder-matrix[data-direction-count="2"] {
  grid-template-columns: minmax(72px, 0.72fr) repeat(2, minmax(90px, 1fr));
}
.draw2-asset-builder-matrix[data-direction-count="8"] {
  grid-template-columns: minmax(72px, 0.72fr) repeat(8, minmax(78px, 1fr));
}
.draw2-asset-builder-matrix[data-direction-count="CUSTOM"] {
  grid-template-columns:
    minmax(72px, 0.72fr) repeat(auto-fit, minmax(88px, 1fr));
}
.draw2-asset-builder-matrix-cell {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  min-height: 54px;
  padding: 5px;
  text-align: center;
}
.draw2-asset-builder-matrix-cell canvas,
.draw2-asset-builder-matrix-cell small {
  display: none;
}
.draw2-asset-builder-matrix-cell strong {
  font-size: 1.05rem;
  line-height: 1;
}
.draw2-asset-builder-matrix-cell[data-filled="true"] strong {
  color: #9fe1bb;
}
.draw2-asset-builder-matrix-cell[data-selected="true"] {
  border-color: #f1c77b;
  background: color-mix(in srgb, #f1c77b 18%, var(--draw2-surface-input));
  box-shadow: 0 0 0 1px color-mix(in srgb, #f1c77b 42%, transparent);
}
.draw2-asset-builder-frame-editor {
  gap: 6px;
  padding-top: 7px;
}
.draw2-asset-builder-frame-editor-strip:empty::before {
  content: "このCellのFrames";
}
.draw2-asset-builder-frame-actions {
  gap: 4px;
}
.draw2-asset-builder-frame-actions .draw2-asset-builder-duration,
.draw2-asset-builder-frame-actions .draw2-asset-builder-loop {
  margin-left: 0;
}
.draw2-asset-builder-preview-card {
  position: sticky;
  top: 6px;
}
.draw2-asset-builder-preview-card .draw2-asset-builder-help,
.draw2-asset-builder-preview-card .draw2-asset-builder-card-badge {
  display: none;
}

@media (max-width: 820px) {
  .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .draw2-asset-builder-preview-card {
    position: static;
  }
}

/* Each desktop mode exposes only its own primary output.  PNG is a Draw
 * action; leaving it in the persistent Game/Audio command row was a silent
 * duplicate of the mode-specific controls.  File/Command menus still retain
 * the complete command for deliberate access.
 * Specialized projections remain explicit: [data-creator-mode="GAME"] #draw2WorkspacePaletteStrip,
 * [data-creator-mode="AUDIO"] #draw2WorkspacePaletteStrip,
 * [data-creator-mode="GAME"] #draw2ModeTimelineDeck:not([hidden]),
 * [data-creator-mode="AUDIO"] #draw2ModeTimelineDeck:not([hidden]). */
@media (min-width: 701px) {
  #draw2WorkspaceFrame[data-creator-mode="GAME"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  #draw2WorkspaceFrame[data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"] {
    display: none !important;
  }
}


/* Piano Roll is the Audio central workspace.  The clip timeline remains in
 * the lower deck so notes can be entered while the artwork-aligned lanes stay
 * visible below. */
.draw2-audio-workspace {
  display: none;
}
.draw2-audio-workspace:not([hidden]) {
  display: flex;
}
@media (min-width: 1120px) {
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-audio-workspace {
    position: absolute;
    z-index: 2;
    inset: 10px;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    overflow: hidden;
    border: 1px solid
      color-mix(in srgb, #c88bff 32%, var(--draw2-border-subtle));
    border-radius: var(--draw2-radius-md);
    background: color-mix(in srgb, #111522 94%, transparent);
    box-shadow: 0 10px 28px rgb(0 0 0 / 20%);
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-audio-workspace
    .draw2-audio-panel {
    width: 100%;
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw2-audio-playhead {
    transition: none;
  }
}

/* Compact voice lab: the selected instrument keeps its own identity while
 * the Inspector exposes the few controls that change its audible character. */
.draw2-audio-voice-editor {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgb(200 139 255 / 18%), transparent 42%),
    linear-gradient(145deg, rgb(34 27 56 / 82%), rgb(13 20 32 / 92%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}
.draw2-audio-voice-intro {
  margin: -2px 0 2px;
  color: #b9c7df;
  font-size: 0.59rem;
  line-height: 1.45;
}
.draw2-audio-voice-name,
.draw2-audio-voice-selects label,
.draw2-audio-voice-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #a9b9d2;
  font-size: 0.57rem;
  letter-spacing: 0.02em;
}
.draw2-audio-voice-name input,
.draw2-audio-voice-selects select,
.draw2-audio-voice-grid select {
  width: 100%;
  min-width: 0;
  min-height: 27px;
  border: 1px solid #344765;
  border-radius: 4px;
  background: #0d1727;
  color: #f3f7ff;
  font-size: 0.62rem;
}
.draw2-audio-voice-name input:focus-visible,
.draw2-audio-voice-selects select:focus-visible,
.draw2-audio-voice-grid select:focus-visible,
.draw2-audio-voice-grid input:focus-visible {
  border-color: #c88bff;
  outline: 2px solid rgb(200 139 255 / 22%);
  outline-offset: 1px;
}
.draw2-audio-voice-selects,
.draw2-audio-voice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.draw2-audio-voice-grid input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: #c88bff;
}
.draw2-audio-voice-grid output {
  justify-self: end;
  margin-top: -1.05rem;
  color: #eef2ff;
  font: 600 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-voice-group {
  padding: 5px 6px 6px;
  border: 1px solid rgb(70 87 122 / 62%);
  border-radius: 5px;
  background: rgb(8 15 27 / 45%);
}
.draw2-audio-voice-group summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  padding: 2px 0 5px;
  color: #f1e7ff;
  cursor: pointer;
  font-size: 0.61rem;
  font-weight: 800;
  list-style: none;
}
.draw2-audio-voice-group summary::-webkit-details-marker { display: none; }
.draw2-audio-voice-group summary::before {
  margin-right: 4px;
  color: #c88bff;
  content: "▸";
}
.draw2-audio-voice-group[open] summary::before { content: "▾"; }
.draw2-audio-voice-group summary small {
  margin-left: auto;
  color: #8498b8;
  font-size: 0.52rem;
  font-weight: 500;
}
.draw2-audio-voice-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 6px;
}
.draw2-audio-voice-actions .draw2-button {
  min-height: 29px;
  padding-inline: 7px;
  font-size: 0.59rem;
}
.draw2-audio-voice-status {
  min-height: 1.4em;
  color: #7de3b1;
  font-size: 0.56rem;
  line-height: 1.35;
}
#draw2AudioRightInspector {
  display: flex;
  flex-direction: column;
}
#draw2AudioRightInspector > #draw2AudioVoiceEditor {
  flex: 0 0 auto;
  order: 1;
}
#draw2AudioRightInspector > #draw2AudioRoutingDiagnostics {
  order: 2;
}
#draw2AudioRightInspector > .draw2-audio-right-section:not(
    #draw2AudioVoiceEditor
  ):not(#draw2AudioRoutingDiagnostics) {
  order: 3;
}
@media (max-width: 420px) {
  .draw2-audio-voice-selects,
  .draw2-audio-voice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final Tablet Portrait projection. Double frame specificity intentionally
 * wins over the retained legacy Tablet sheet rules without affecting another
 * presentation profile. */
@media (min-width: 701px) {
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows:
      88px minmax(260px, 1fr) 44px 44px minmax(210px, 25dvh) 24px !important;
    grid-template-areas:
      "top" "canvas" "quick-tools" "deck-tabs" "deck" "status" !important;
    overflow: hidden !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-topbar {
    grid-area: top !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 44px 44px !important;
    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-creator-mode-bar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 44px !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-global-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-brand,
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-project-slot,
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-theme-control,
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-language-control,
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    [data-workspace-command="kill-switch"] {
    display: none !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-menu-bar
    > .draw2-menu:not(:first-child) {
    display: none !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-menu-bar,
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-menu-bar
    > .draw2-menu:first-child,
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-menu-bar
    > .draw2-menu:first-child
    > summary {
    box-sizing: border-box !important;
    flex: 0 0 44px !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    font-size: 0 !important;
    overflow: visible !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-command-bar
    > * {
    display: none !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-command-bar
    > [data-workspace-command="undo"],
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-command-bar
    > [data-workspace-command="redo"],
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-command-bar
    > [data-workspace-command="command-palette"] {
    box-sizing: border-box !important;
    flex: 0 0 44px !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-context-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-left-dock {
    display: contents !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-mobile-drawer-header,
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-mobile-color-rail {
    display: none !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-toolbar {
    grid-area: quick-tools !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-panel-launcher {
    grid-area: deck-tabs !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-right-dock {
    grid-area: deck !important;
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns:
      minmax(0, var(--draw2-tablet-deck-palette-ratio, 42%)) 8px minmax(0, 1fr)
      !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: none !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspacePaletteStrip {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspacePaletteStrip
    .draw2-palette-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)) !important;
    grid-auto-rows: min-content !important;
    width: 100% !important;
    height: max-content !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspacePaletteStrip
    .draw2-color,
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspacePaletteStrip
    .draw2-color-add {
    width: 100% !important;
    min-width: 32px !important;
    height: auto !important;
    min-height: 32px !important;
    aspect-ratio: 1 !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspacePaletteResize {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 8px !important;
    height: 100% !important;
    cursor: ew-resize !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceRightCustomDock {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-timeline-region {
    grid-area: deck !important;
    position: relative !important;
    inset: auto !important;
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"].is-mobile-timeline-open
    .draw2-workspace-right-dock {
    display: none !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"].is-mobile-timeline-open
    .draw2-workspace-timeline-region {
    display: flex !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-statusbar {
    grid-area: status !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }
}

/* PC mode projection.  DRAW owns the animation timeline; GAME and AUDIO use
 * their own right-dock panel families and never carry Draw's palette. */
@media (min-width: 1120px) {
  .draw2-workspace-frame[data-workspace-profile="desktop"] {
    grid-template-rows:
      80px minmax(0, 1fr) clamp(170px, 26dvh, 260px) var(
        --draw2-statusbar-height
      ) !important;
    grid-template-areas:
      "top top top" "left canvas right" "timeline timeline timeline" "status status status"
      !important;
  }

  /* Draw's lower rail is resized by the shared handle. Keep its desktop row
     on the same variable that the pointer handler updates. */
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] {
    grid-template-rows:
      80px minmax(0, 1fr) var(--draw2-timeline-height) var(
        --draw2-statusbar-height
      ) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, auto) !important;
    grid-template-rows: 38px 42px !important;
    align-items: stretch !important;
    gap: 0 !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-global-row {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding-block: 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    [data-creator-mode="ANIMATE"],
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    [data-creator-mode="ASSET"],
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    [data-creator-mode="EXPORT"] {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-context-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 2px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-quick-controls {
    min-width: max-content !important;
    height: 38px !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-timeline-region {
    display: flex !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-top: 0 !important;
  }

  /* GAME/AUDIO keep the same lower lane as DRAW, but replace its content with
     a mode-specific deck.  The canvas remains visible as the visual reference
     for scene and sound work. */
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    .draw2-workspace-left-dock,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-left-dock,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    .draw2-workspace-context-row,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-context-row {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    .draw2-workspace-left-dock,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-left-dock {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    .draw2-workspace-timeline-region,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-timeline-region {
    display: flex !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    grid-template-columns:
      0 minmax(0, 1fr) minmax(260px, var(--draw2-panel-width)) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    grid-template-rows:
      80px minmax(0, 1fr) var(--draw2-timeline-height) var(
        --draw2-statusbar-height
      ) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceTimelineSlot,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceTimelineSlot {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2ModeTimelineDeck:not([hidden]),
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2ModeTimelineDeck:not([hidden]) {
    display: flex !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspacePaletteStrip,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspacePaletteStrip,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspacePaletteResize,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspacePaletteResize,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceColorEditor,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceColorEditor,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    [data-workspace-panel="color"],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    [data-workspace-panel="color"] {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-mode-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--draw2-border-subtle);
    background: color-mix(
      in srgb,
      var(--draw2-surface-raised) 82%,
      transparent
    );
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-mode-summary
    > div {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-mode-summary
    strong,
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-mode-summary
    > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-mode-summary
    > span:last-child {
    color: var(--draw2-text-muted);
    font-size: 0.72rem;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceTabPreview {
    order: -3;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-tabs {
    border-bottom-color: color-mix(
      in srgb,
      #b77bff 35%,
      var(--draw2-border-subtle)
    );
  }
}

/* -------------------------------------------------------------------------
   Canonical Professional Creator Workspace
   The isolated Draw2 shell follows the attached UI/UX brief: Canvas first,
   two-level app bar, icon tool rail, docked panels, bounded timeline, and a
   compact status bar. Domain state and the rendering hot path are untouched.
   ------------------------------------------------------------------------- */
/* Mobile canvas-first contract: grid-template-rows: 80px minmax(0, 1fr) clamp(170px, 26dvh, 260px)
 * and [data-creator-mode="GAME"] remain explicit breakpoint anchors. */
.draw2-mode-timeline-deck {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 5px;
  padding: 6px 8px 7px;
  overflow: hidden;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-md);
  background: color-mix(in srgb, var(--draw2-surface) 94%, #05070b);
}
.draw2-mode-timeline-deck[hidden],
.draw2-mode-deck-surface[hidden] {
  display: none !important;
}
.draw2-mode-timeline-deck-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 25px;
}
.draw2-mode-timeline-deck-heading > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.draw2-mode-timeline-deck-heading strong,
.draw2-mode-timeline-deck-heading > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-mode-timeline-deck-heading strong {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}
.draw2-mode-timeline-deck-heading > span:last-child {
  color: var(--draw2-text-muted);
  font-size: 0.66rem;
}
.draw2-mode-timeline-deck-tabs {
  display: flex;
  flex: 0 0 30px;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.draw2-mode-timeline-deck-tabs::-webkit-scrollbar {
  display: none;
}
.draw2-mode-timeline-deck-tab {
  flex: 0 0 auto;
  min-width: 78px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  background: transparent;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  white-space: nowrap;
}
.draw2-mode-timeline-deck-tab:hover,
.draw2-mode-timeline-deck-tab:focus-visible,
.draw2-mode-timeline-deck-tab.is-active {
  border-color: var(--draw2-accent-strong);
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 14%,
    var(--draw2-surface-raised)
  );
  color: var(--draw2-text-strong);
}
.draw2-mode-deck-surface {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 5px;
}
.draw2-mode-deck-toolbar {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 32px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.draw2-mode-deck-toolbar::-webkit-scrollbar {
  display: none;
}
.draw2-mode-deck-toolbar .draw2-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding-inline: 9px;
  font-size: 0.65rem;
  white-space: nowrap;
}
.draw2-mode-deck-surface[data-mode-deck-surface="audio"]
  .draw2-audio-advanced-toggle {
  border-color: color-mix(in srgb, #c88bff 42%, var(--draw2-border));
  color: #e4c5ff;
}
.draw2-mode-deck-surface[data-mode-deck-surface="audio"]
  .draw2-audio-advanced-control {
  transition: opacity 120ms ease, max-width 120ms ease;
}
.draw2-mode-deck-surface[data-mode-deck-surface="audio"]:not(.is-advanced-open)
  .draw2-audio-advanced-control {
  display: none;
}
.draw2-audio-export-sources {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(240px, 1.8fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(88, 116, 151, 0.42);
  background: linear-gradient(180deg, rgba(25, 38, 58, 0.94), rgba(15, 24, 38, 0.96));
}
.draw2-audio-export-sources-heading {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.draw2-audio-export-sources-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.draw2-audio-export-sources-heading strong {
  overflow: hidden;
  color: #f1f7ff;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-export-sources-heading small,
.draw2-audio-export-sources-heading output {
  color: var(--draw2-text-muted);
  font-size: 0.55rem;
  line-height: 1.35;
}
.draw2-audio-export-sources-status {
  display: grid;
  justify-items: end;
  gap: 2px;
  white-space: nowrap;
}
.draw2-audio-export-sources-heading output {
  color: #c88bff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.draw2-audio-export-source-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}
.draw2-audio-export-source-actions .draw2-button {
  min-height: 27px;
  padding-inline: 8px;
  font-size: 0.58rem;
  white-space: nowrap;
}
.draw2-audio-export-track-options {
  display: flex;
  min-width: 0;
  max-height: 78px;
  gap: 5px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.draw2-audio-export-track {
  display: grid;
  min-width: 112px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid rgba(111, 142, 181, 0.45);
  border-radius: 6px;
  background: rgba(10, 18, 31, 0.72);
  color: #dcecff;
  cursor: pointer;
}
.draw2-audio-export-clip {
  display: grid;
  min-width: 140px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 5px 7px 5px 14px;
  border: 1px dashed rgba(111, 142, 181, 0.4);
  border-radius: 6px;
  background: rgba(14, 23, 38, 0.6);
  color: #dcecff;
  cursor: pointer;
}
.draw2-audio-export-clip:hover,
.draw2-audio-export-clip:focus-within {
  border-color: #c88bff;
  background: rgba(48, 33, 70, 0.78);
}
.draw2-audio-export-clip input {
  accent-color: #61d9ff;
}
.draw2-audio-export-track:hover,
.draw2-audio-export-track:focus-within {
  border-color: #83ddff;
  background: rgba(32, 62, 91, 0.86);
}
.draw2-audio-export-track input {
  accent-color: #c88bff;
}
.draw2-audio-export-track-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.draw2-audio-export-track-copy strong,
.draw2-audio-export-track-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-export-track-copy strong {
  color: #ffffff;
  font-size: 0.59rem;
}
.draw2-audio-export-track-copy small {
  color: var(--draw2-text-muted);
  font-size: 0.5rem;
}
.draw2-audio-export-empty {
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
}
.draw2-mode-deck-surface[data-mode-deck-surface="audio"]:not(.is-advanced-open)
  .draw2-audio-export-sources {
  display: none;
}
@media (max-width: 900px) {
  .draw2-audio-export-sources {
    grid-template-columns: minmax(180px, 1fr) auto;
  }
  .draw2-audio-export-track-options {
    grid-column: 1 / -1;
  }
}

/* Audio keeps the Arranger and Piano Roll as its main surfaces, while the
 * lightweight custom panels remain reachable from the same right dock as
 * Draw/Game. The dock is width-bounded; heavy Audio surfaces mount lazily. */
@media (min-width: 1120px) {
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    grid-template-columns:
      minmax(0, 1fr) minmax(260px, var(--draw2-panel-width)) !important;
    grid-template-rows:
      80px minmax(0, 1fr) clamp(220px, 34dvh, 300px) var(
        --draw2-statusbar-height
      ) !important;
    grid-template-areas:
      "top top"
      "canvas right"
      "timeline timeline"
      "status status" !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceRightDock {
    display: grid !important;
    grid-area: right !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2ModeTimelineDeck
    .draw2-mode-timeline-deck-heading {
    display: none !important;
  }
}
.draw2-mode-deck-select,
.draw2-mode-deck-number,
.draw2-mode-deck-range {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
  white-space: nowrap;
}
.draw2-mode-deck-select select,
.draw2-mode-deck-number input {
  width: 72px;
  min-height: 30px;
  padding-inline: 6px;
}
.draw2-mode-deck-number input {
  width: 58px;
}
.draw2-mode-deck-range input {
  width: 72px;
  accent-color: #c88bff;
}
.draw2-mode-deck-range output {
  min-width: 28px;
  color: var(--draw2-text-strong);
  font-variant-numeric: tabular-nums;
}
.draw2-game-deck-grid,
.draw2-audio-deck-grid,
.draw2-audio-track-strip {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  align-content: start;
  gap: 3px;
  overflow: auto;
  overscroll-behavior: contain;
}
.draw2-audio-track-strip {
  flex: 0 0 auto;
  max-height: 58px;
  overflow-y: auto;
}
.draw2-audio-track-strip .draw2-mode-deck-track {
  min-width: 520px;
  min-height: 24px;
  grid-template-columns: minmax(92px, 150px) minmax(0, 1fr);
}
.draw2-audio-track-strip .draw2-mode-deck-track-label,
.draw2-audio-track-strip .draw2-mode-deck-cells,
.draw2-audio-track-strip .draw2-mode-deck-cell {
  min-height: 24px;
  height: 24px;
}
.draw2-audio-track-strip .draw2-mode-deck-track-label {
  padding-inline: 6px;
  font-size: 0.6rem;
}
.draw2-audio-track-strip .draw2-mode-deck-track-label small {
  font-size: 0.52rem;
}
.draw2-audio-track-strip .draw2-mode-deck-cells {
  grid-auto-columns: 24px;
  gap: 2px;
}
.draw2-audio-track-strip .draw2-mode-deck-cell {
  width: 24px;
  min-width: 24px;
  font-size: 0.52rem;
}
.draw2-audio-track-strip {
  display: flex;
  flex: 0 0 28px;
  align-items: stretch;
  max-height: 28px;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
}
.draw2-audio-track-strip .draw2-mode-deck-track {
  display: flex;
  flex: 0 0 104px;
  min-width: 104px;
  height: 24px;
}
.draw2-audio-track-strip .draw2-mode-deck-track-label {
  width: 104px;
  min-width: 104px;
  cursor: pointer;
}
.draw2-audio-track-strip .draw2-mode-deck-track-label.is-active,
.draw2-audio-track-strip .draw2-mode-deck-track-label:focus-visible {
  border-color: #c88bff;
  background: color-mix(in srgb, #c88bff 22%, var(--draw2-surface-raised));
}
.draw2-audio-track-strip .draw2-mode-deck-cells {
  display: none;
}
.draw2-mode-deck-surface[data-mode-deck-surface="audio"]
  > .draw2-mode-deck-toolbar {
  flex-basis: 30px;
  min-height: 30px;
}
.draw2-mode-deck-surface[data-mode-deck-surface="audio"]
  .draw2-audio-animation-guide {
  flex-basis: 20px;
  min-height: 20px;
}
.draw2-audio-animation-guide {
  display: flex;
  flex: 0 0 24px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-inline: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, #c88bff 10%, var(--draw2-surface-raised));
  color: var(--draw2-text-muted);
  font-size: 0.6rem;
}
.draw2-audio-animation-guide > span {
  flex: 0 0 auto;
  color: var(--draw2-text-strong);
  font-weight: 700;
}
.draw2-audio-animation-guide label {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.draw2-audio-animation-guide input {
  flex: 1 1 auto;
  min-width: 80px;
  accent-color: #c88bff;
}
.draw2-audio-midi-grid {
  display: block;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  align-content: start;
  overflow: auto;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: #111522;
  overscroll-behavior: contain;
}
.draw2-audio-midi-grid.is-midi-dragging {
  touch-action: none;
  user-select: none;
}
.draw2-audio-midi-expression {
  flex: 0 0 auto;
  min-height: 66px;
  padding: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, #61d9ff 7%, var(--draw2-surface-raised));
}
.draw2-audio-midi-expression-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--draw2-text-muted);
  font-size: 0.56rem;
  white-space: nowrap;
}
.draw2-audio-midi-expression-toolbar strong {
  color: var(--draw2-text-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.draw2-audio-midi-expression-toolbar select {
  min-height: 24px;
  max-width: 170px;
  padding: 2px 5px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 4px;
  background: #151d2c;
  color: var(--draw2-text-strong);
  font-size: 0.56rem;
}
.draw2-audio-midi-expression-toolbar .draw2-button {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 0.56rem;
}
.draw2-audio-midi-expression-toolbar > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.draw2-audio-midi-expression-lane {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-height: 28px;
  padding-top: 4px;
  overflow-x: auto;
}
.draw2-audio-midi-expression-point {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 4px;
  border: 1px solid rgba(97, 217, 255, 0.24);
  border-radius: 4px;
  background: rgba(6, 13, 24, 0.72);
  color: var(--draw2-text-muted);
  font-size: 0.52rem;
  white-space: nowrap;
}
.draw2-audio-midi-expression-point input[type="number"] {
  width: 66px;
  min-height: 20px;
  padding: 1px 3px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: #121827;
  color: var(--draw2-text-strong);
  font-size: 0.52rem;
}
.draw2-audio-midi-expression-point input[type="range"] {
  width: 68px;
  accent-color: #61d9ff;
}
.draw2-audio-midi-expression-point output {
  min-width: 32px;
  color: var(--draw2-text-strong);
  text-align: right;
}
.draw2-audio-midi-expression-point button {
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 137, 170, 0.35);
  border-radius: 3px;
  background: transparent;
  color: #ff9bb9;
  cursor: pointer;
}
.draw2-audio-midi-row {
  display: grid;
  grid-template-columns: 44px repeat(16, minmax(28px, 1fr));
  min-width: 510px;
  min-height: 20px;
}
.draw2-audio-midi-key,
.draw2-audio-midi-cell {
  box-sizing: border-box;
  min-width: 0;
  min-height: 20px;
  border-right: 1px solid
    color-mix(in srgb, var(--draw2-border-subtle) 70%, transparent);
  border-bottom: 1px solid
    color-mix(in srgb, var(--draw2-border-subtle) 70%, transparent);
}
.draw2-audio-midi-key {
  display: grid;
  padding-inline: 6px;
  align-items: center;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-muted);
  font: 700 0.55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-midi-key.is-black {
  background: #0d101a;
  color: #8e99ad;
}
.draw2-audio-midi-cell {
  position: relative;
  padding: 0;
  background: color-mix(in srgb, #6b7894 9%, transparent);
  cursor: pointer;
}
.draw2-audio-midi-cell.is-black {
  background: color-mix(in srgb, #05070c 50%, transparent);
}
.draw2-audio-midi-cell::before {
  position: absolute;
  inset: 0;
  border-left: 1px solid transparent;
  content: "";
  pointer-events: none;
}
.draw2-audio-midi-cell.is-beat {
  border-left-color: color-mix(
    in srgb,
    #c88bff 38%,
    var(--draw2-border-subtle)
  );
}
.draw2-audio-midi-cell.is-animation-frame {
  background-color: color-mix(in srgb, #c88bff 20%, #111522);
}
.draw2-audio-midi-cell.is-note::after {
  position: absolute;
  inset: 3px 0;
  border: 1px solid #f0c5ff;
  border-radius: 2px;
  background: linear-gradient(90deg, #a966dd, #d79cff);
  box-shadow: 0 0 0 1px color-mix(in srgb, #f0c5ff 28%, transparent);
  content: "";
}
.draw2-audio-midi-cell:hover,
.draw2-audio-midi-cell:focus-visible {
  outline: 1px solid #f0c5ff;
  outline-offset: -1px;
}

/* AUDIO mode: one bounded timebase for artwork cells, clips and MIDI. */
.draw2-mode-deck-surface[data-mode-deck-surface="audio"] {
  gap: 4px;
}
.draw2-mode-deck-surface[data-mode-deck-surface="audio"] .draw2-audio-timebase {
  flex: 0 0 24px;
  min-height: 24px;
}
.draw2-audio-timebase {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding-inline: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, #c88bff 7%, var(--draw2-surface-raised));
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
  scrollbar-width: none;
}
.draw2-audio-timebase::-webkit-scrollbar {
  display: none;
}
.draw2-audio-timebase > span {
  flex: 0 0 auto;
  color: var(--draw2-text-strong);
  font-weight: 700;
  white-space: nowrap;
}
.draw2-audio-timebase label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.draw2-audio-timebase select {
  min-height: 22px;
  padding-inline: 4px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
  font-size: 0.58rem;
}
.draw2-audio-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 4px;
  overflow: hidden;
}
.draw2-audio-panel[hidden] {
  display: none;
}
.draw2-audio-ruler,
.draw2-audio-animation-cells {
  display: grid;
  flex: 0 0 18px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: #0d101a;
}
.draw2-audio-animation-cells {
  flex-basis: 30px;
  min-height: 30px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.draw2-audio-ruler-cell,
.draw2-audio-animation-cell {
  box-sizing: border-box;
  min-width: 30px;
  border-right: 1px solid
    color-mix(in srgb, var(--draw2-border-subtle) 78%, transparent);
}
.draw2-audio-ruler-cell {
  display: grid;
  align-items: center;
  padding-inline: 3px;
  color: var(--draw2-text-muted);
  font: 600 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.draw2-audio-ruler-cell.is-bar {
  color: #dfb7ff;
  background: color-mix(in srgb, #c88bff 13%, transparent);
}
.draw2-audio-ruler-cell.is-bar.is-selected {
  border-color: #dfb7ff;
  background: color-mix(in srgb, #c88bff 34%, #121827);
  color: #fff3ff;
  box-shadow: inset 0 -2px 0 #dfb7ff;
  cursor: pointer;
  font-weight: 800;
}
button.draw2-audio-ruler-cell {
  appearance: none;
  margin: 0;
  text-align: left;
}
.draw2-audio-animation-cell {
  position: relative;
  display: grid;
  align-content: center;
  gap: 1px;
  min-height: 28px;
  padding: 2px 3px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
  background: color-mix(in srgb, #6b7894 14%, transparent);
  color: var(--draw2-text-muted);
  cursor: pointer;
  font: 700 0.54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
  content-visibility: auto;
  contain-intrinsic-size: 30px 30px;
}
.draw2-audio-animation-cell small {
  color: color-mix(in srgb, var(--draw2-text-muted) 75%, transparent);
  font-size: 0.45rem;
  font-weight: 500;
}
.draw2-audio-animation-cell.is-cel {
  background: color-mix(in srgb, #74d7a3 19%, var(--draw2-surface-raised));
}
.draw2-audio-animation-cell.is-active,
.draw2-audio-animation-cell:focus-visible {
  border-color: #f0c5ff;
  background: color-mix(in srgb, #c88bff 35%, var(--draw2-surface-raised));
  color: var(--draw2-text-strong);
  outline: none;
}
.draw2-audio-track-lanes {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 3px;
  overflow: auto;
  overscroll-behavior: contain;
}
.draw2-audio-track-lane {
  display: grid;
  flex: 0 0 26px;
  grid-template-columns: 92px minmax(max-content, 1fr);
  min-width: max-content;
  min-height: 26px;
  /* Match the ruler's 92px label origin exactly.  A previous 4px gap made
     the lower overview drift away from the playhead after the first cell. */
  gap: 0;
  padding-inline-start: 1px;
  contain: layout paint;
}
.draw2-audio-track-lane-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-inline: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
  font-size: 0.57rem;
  font-weight: 700;
}
.draw2-audio-track-lane-label small {
  margin-left: auto;
  color: var(--draw2-text-muted);
  font-size: 0.47rem;
  font-weight: 500;
}
.draw2-audio-track-lane-cells {
  display: grid;
  min-width: max-content;
  min-height: 26px;
}
.draw2-audio-track-lane-cell {
  display: grid;
  min-width: 30px;
  min-height: 26px;
  place-items: center;
  border: 1px solid
    color-mix(in srgb, var(--draw2-border-subtle) 74%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, #6b7894 8%, transparent);
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.48rem;
  content-visibility: auto;
  contain-intrinsic-size: 30px 26px;
}
.draw2-audio-track-lane-cell.is-filled {
  background: color-mix(in srgb, #c88bff 25%, var(--draw2-surface-raised));
  color: var(--draw2-text-strong);
}
.draw2-audio-track-lane-cell.is-active {
  border-color: #f0c5ff;
}
.draw2-audio-add-sound {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.draw2-audio-add-sound span {
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
  font-weight: 700;
}
.draw2-audio-add-sound select {
  min-width: 72px;
}
.draw2-audio-clip-library,
.draw2-audio-mixer-rows,
.draw2-audio-automation-lane,
.draw2-audio-marker-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 3px;
  overflow: auto;
}
.draw2-audio-clip-row,
.draw2-audio-mixer-row,
.draw2-audio-marker-row {
  display: grid;
  flex: 0 0 30px;
  align-items: center;
  min-width: 420px;
  min-height: 30px;
  grid-template-columns: minmax(110px, 1fr) auto auto minmax(80px, 180px);
  gap: 5px;
  padding-inline: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
}
.draw2-audio-mixer-row {
  grid-template-columns:
    minmax(100px, 1fr) auto auto minmax(70px, 120px) minmax(80px, 180px)
    minmax(96px, 150px);
}
.draw2-audio-clip-row strong,
.draw2-audio-mixer-row strong,
.draw2-audio-marker-row strong {
  color: var(--draw2-text-strong);
}
.draw2-audio-clip-row.is-editable {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  min-width: min(720px, 100%);
  gap: 5px;
  padding: 6px;
}
.draw2-audio-clip-header,
.draw2-audio-clip-controls {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}
.draw2-audio-clip-header {
  justify-content: space-between;
}
.draw2-audio-clip-header span {
  color: var(--draw2-text-muted);
  font-size: 0.52rem;
}
.draw2-audio-clip-waveform {
  display: block;
  width: 100%;
  min-height: 64px;
  border: 1px solid color-mix(in srgb, #c88bff 28%, var(--draw2-border-subtle));
  border-radius: 2px;
  background: #0a0d16;
}
.draw2-audio-clip-controls {
  flex-wrap: wrap;
}
.draw2-audio-clip-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 138px;
  color: var(--draw2-text-muted);
  font-size: 0.52rem;
}
.draw2-audio-clip-control input[type="range"] {
  flex: 1 1 76px;
  min-width: 72px;
  accent-color: #c88bff;
}
.draw2-audio-clip-control output {
  min-width: 38px;
  color: var(--draw2-text-strong);
  text-align: right;
}
.draw2-audio-mixer-row input[type="range"] {
  min-width: 70px;
  accent-color: #c88bff;
}
.draw2-audio-mixer-routing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--draw2-text-muted);
  font: 700 0.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.draw2-audio-mixer-routing select {
  min-width: 78px;
  min-height: 24px;
  padding-inline: 3px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
  font-size: 0.52rem;
}
.draw2-audio-mixer-button,
.draw2-audio-marker-remove {
  min-width: 26px;
  min-height: 24px;
  padding: 0 5px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
  background: transparent;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.52rem;
}
.draw2-audio-mixer-button.is-active {
  border-color: #c88bff;
  background: color-mix(in srgb, #c88bff 20%, transparent);
  color: var(--draw2-text-strong);
}
.draw2-audio-automation-toolbar,
.draw2-audio-marker-toolbar {
  display: flex;
  flex: 0 0 28px;
  align-items: center;
  gap: 5px;
  min-width: max-content;
  overflow-x: auto;
}
.draw2-audio-automation-toolbar label,
.draw2-audio-marker-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
  white-space: nowrap;
}
.draw2-audio-automation-toolbar select,
.draw2-audio-marker-toolbar input,
.draw2-audio-settings-grid select {
  min-height: 26px;
  padding-inline: 5px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
  font-size: 0.58rem;
}
.draw2-audio-marker-toolbar input[type="number"] {
  width: 56px;
}
.draw2-audio-marker-toolbar input[type="text"] {
  width: 140px;
}
.draw2-audio-automation-point {
  display: grid;
  grid-template-columns: 112px 72px minmax(0, 1fr) 46px auto;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding-inline: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
  background: color-mix(in srgb, #c88bff 7%, var(--draw2-surface-raised));
  color: var(--draw2-text-muted);
  font-size: 0.56rem;
}
.draw2-audio-automation-point input {
  min-width: 0;
  accent-color: #c88bff;
}
.draw2-audio-automation-point input[type="number"] {
  min-height: 22px;
  padding-inline: 3px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
  font: 600 0.54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-settings-grid {
  display: grid;
  gap: 6px;
  min-width: 0;
  overflow: auto;
}
.draw2-audio-setting-check {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  color: var(--draw2-text-muted);
  font-size: 0.6rem;
}
.draw2-audio-setting-check input {
  accent-color: #c88bff;
}
.draw2-mode-deck-track {
  display: grid;
  grid-template-columns: minmax(122px, 180px) minmax(0, 1fr);
  align-items: center;
  min-width: 520px;
  min-height: 31px;
  gap: 5px;
}
.draw2-mode-deck-track-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 31px;
  padding: 0 7px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
  font-size: 0.65rem;
  font-weight: 700;
}
.draw2-mode-deck-track-label small {
  margin-left: auto;
  color: var(--draw2-text-muted);
  font-size: 0.56rem;
  font-weight: 500;
}
.draw2-mode-deck-cells {
  display: grid;
  grid-auto-columns: 31px;
  grid-auto-flow: column;
  gap: 2px;
  min-width: max-content;
  min-height: 31px;
}
.draw2-mode-deck-cell {
  display: grid;
  width: 31px;
  min-width: 31px;
  height: 31px;
  min-height: 31px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
  background: color-mix(in srgb, var(--draw2-surface-raised) 72%, transparent);
  color: var(--draw2-text-muted);
  cursor: pointer;
  font: 600 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-mode-deck-cell:hover,
.draw2-mode-deck-cell:focus-visible,
.draw2-mode-deck-cell.is-active {
  border-color: var(--draw2-accent-strong);
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 20%,
    var(--draw2-surface-raised)
  );
  color: var(--draw2-text-strong);
}
.draw2-game-deck-grid .draw2-mode-deck-cell.is-filled {
  background: color-mix(in srgb, #7aa7ff 30%, var(--draw2-surface-raised));
}
.draw2-game-deck-grid .draw2-mode-deck-cell.is-playhead {
  border-color: var(--draw2-accent-strong);
  box-shadow: inset 0 0 0 2px
    color-mix(
      in srgb,
      var(--draw2-accent-strong) 72%,
      transparent
    );
  background: color-mix(in srgb, #5fd8ab 28%, var(--draw2-surface-raised));
}
.draw2-audio-deck-grid .draw2-mode-deck-cell.is-filled {
  background: color-mix(in srgb, #c88bff 28%, var(--draw2-surface-raised));
}
.draw2-mode-deck-status {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.63rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root {
  --draw2-tool-rail-width: 48px;
  --draw2-panel-width: 300px;
  --draw2-timeline-height: clamp(164px, 24dvh, 260px);
  --draw2-statusbar-height: 24px;
  --draw2-control-size: 32px;
  --draw2-icon-size: 18px;
  --draw2-radius-sm: 3px;
  --draw2-radius-md: 4px;
  --draw2-radius-lg: 6px;
}

html:has(#draw2WorkspaceFrame),
body:has(#draw2WorkspaceFrame) {
  overflow: hidden;
}

body:has(#draw2WorkspaceFrame) {
  min-width: 0;
  min-height: 100dvh;
  margin: 0;
}

.draw2-shell:has(#draw2WorkspaceFrame) {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
}

.draw2-shell:has(#draw2WorkspaceFrame) > .draw2-header {
  display: none !important;
}

.draw2-workspace-frame {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  grid-template-columns:
    var(--draw2-tool-rail-width) minmax(0, 1fr) minmax(
      260px,
      var(--draw2-panel-width)
    );
  grid-template-rows:
    auto minmax(0, 1fr) var(--draw2-timeline-height) var(
      --draw2-statusbar-height
    );
  grid-template-areas:
    "top top top" "left canvas right" "timeline timeline timeline" "status status status";
}

.draw2-workspace-topbar {
  display: block;
  min-width: 0;
  padding: 0;
  border-bottom: 1px solid var(--draw2-border-subtle);
}

.draw2-workspace-global-row,
.draw2-workspace-context-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.draw2-workspace-global-row {
  display: grid;
  grid-template-columns:
    minmax(128px, auto) minmax(0, 1fr) minmax(160px, 240px) auto;
  min-height: 38px;
  gap: 6px;
  padding: 3px 6px;
  background: var(--draw2-surface);
}

.draw2-workspace-context-row {
  min-height: 38px;
  padding: 3px 6px;
  border-top: 1px solid
    color-mix(in srgb, var(--draw2-border-subtle) 60%, transparent);
  background: var(--draw2-surface-raised);
}

.draw2-workspace-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.draw2-brand-icon {
  width: 18px;
  height: 18px;
  color: var(--draw2-accent-strong);
}

.draw2-workspace-brand strong {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

.draw2-workspace-brand .draw2-workspace-status {
  display: none;
}

.draw2-workspace-menu-bar {
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.draw2-workspace-menu-bar::-webkit-scrollbar,
.draw2-workspace-command-bar::-webkit-scrollbar,
.draw2-workspace-quick-controls::-webkit-scrollbar {
  display: none;
}

.draw2-workspace-menu-bar .draw2-menu {
  flex: 0 0 auto;
}
.draw2-workspace-menu-bar .draw2-menu summary {
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  font-size: 0.69rem;
  white-space: nowrap;
}
.draw2-workspace-menu-bar .draw2-menu summary:hover,
.draw2-workspace-menu-bar .draw2-menu[open] summary {
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
}
.draw2-workspace-menu-bar .draw2-menu-icon {
  width: 14px;
  height: 14px;
}
.draw2-workspace-menu-bar .draw2-menu-popover {
  z-index: 80;
}
.draw2-workspace-menu-bar hr {
  height: 1px;
  margin: 4px 0;
  border: 0;
  background: var(--draw2-border-subtle);
}

.draw2-workspace-project-slot {
  min-width: 0;
  align-self: center;
}
.draw2-workspace-project-slot .draw2-controls {
  gap: 4px;
}
.draw2-workspace-project-slot .draw2-controls label {
  font-size: 0;
}
.draw2-workspace-project-slot .draw2-controls input,
.draw2-workspace-project-slot .draw2-controls select {
  min-height: 30px;
  padding-inline: 7px;
  font-size: 0.69rem;
}
.draw2-workspace-project-slot #draw2CreateProject {
  min-height: 30px;
  font-size: 0.65rem;
}

.draw2-workspace-command-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}
.draw2-workspace-command-bar .draw2-icon-button {
  width: var(--draw2-control-size);
  min-width: var(--draw2-control-size);
  height: var(--draw2-control-size);
  min-height: var(--draw2-control-size);
  padding: 0;
}
.draw2-workspace-command-bar .draw2-icon-button span {
  display: none;
}
.draw2-theme-control,
.draw2-language-control {
  font-size: 0;
}
.draw2-theme-control select,
.draw2-language-control select {
  width: 32px;
  min-height: 30px;
  padding: 0 2px;
  font-size: 0.65rem;
}

.draw2-workspace-quick-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.draw2-workspace-quick-controls::before {
  content: "";
  width: 2px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--draw2-accent-strong);
}
.draw2-quick-control {
  min-height: 30px;
}
.draw2-quick-control > span {
  font-size: 0.62rem;
}
.draw2-quick-control select,
.draw2-quick-control input {
  min-height: 30px;
}

.draw2-workspace-left-dock {
  width: var(--draw2-tool-rail-width);
  min-width: var(--draw2-tool-rail-width);
  padding: 6px 4px;
  gap: 8px;
  border-right: 1px solid var(--draw2-border-subtle);
  background: var(--draw2-surface);
}
.draw2-workspace-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  overflow: visible;
}
.draw2-workspace-left-dock .draw2-mobile-color-rail,
.draw2-workspace-left-dock .draw2-workspace-panel-launcher {
  display: none;
}
.draw2-tool-group,
.draw2-tool-group-summary,
.draw2-workspace-toolbar > .draw2-tool-button {
  width: var(--draw2-control-size);
  height: var(--draw2-control-size);
  min-width: var(--draw2-control-size);
  min-height: var(--draw2-control-size);
}
.draw2-tool-group-summary,
.draw2-workspace-toolbar > .draw2-tool-button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  background: transparent;
}
.draw2-tool-group-summary:hover,
.draw2-tool-group[open] > .draw2-tool-group-summary,
.draw2-tool-group.is-active > .draw2-tool-group-summary,
.draw2-workspace-toolbar > .draw2-tool-button:hover,
.draw2-workspace-toolbar > .draw2-tool-button.is-active {
  border-color: color-mix(in srgb, var(--draw2-accent-strong) 72%, transparent);
  background: color-mix(in srgb, var(--draw2-accent-strong) 16%, transparent);
  color: var(--draw2-text-strong);
}
.draw2-tool-group-summary .draw2-tool-group-label,
.draw2-workspace-toolbar > .draw2-tool-button span {
  display: none;
}
.draw2-tool-group-summary .draw2-tool-icon,
.draw2-workspace-toolbar > .draw2-tool-button .draw2-tool-icon {
  width: var(--draw2-icon-size);
  height: var(--draw2-icon-size);
}
.draw2-tool-group > .draw2-tool-popover {
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  min-width: 156px;
  padding: 5px;
  border: 1px solid var(--draw2-border-strong);
  border-radius: var(--draw2-radius-md);
  background: var(--draw2-surface);
  box-shadow: var(--draw2-shadow-panel);
}
.draw2-tool-group > .draw2-tool-popover .draw2-tool-button {
  min-height: 32px;
  padding: 3px 5px;
  justify-content: flex-start;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
}
.draw2-tool-group > .draw2-tool-popover .draw2-tool-button span {
  font-size: 0.65rem;
}

.draw2-workspace-canvas-region {
  padding: 6px;
  background: var(--draw2-surface-canvas);
}
#draw2WorkspaceCanvasSlot > .draw2-canvas-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#draw2WorkspaceCanvasSlot .draw2-viewport-wrap {
  margin-top: 0;
  min-height: 0;
}

.draw2-workspace-right-dock {
  min-width: 0;
  border-left: 1px solid var(--draw2-border-subtle);
  background: var(--draw2-surface);
}
.draw2-workspace-right-header {
  min-height: 34px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--draw2-border-subtle);
}
.draw2-workspace-right-header strong {
  font-size: 0.69rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.draw2-panel-close {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border-color: transparent;
  background: transparent;
}
.draw2-panel-close .draw2-ui-icon {
  width: 16px;
  height: 16px;
}
.draw2-workspace-tabs {
  order: 1;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--draw2-border-subtle);
}
.draw2-workspace-tab {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--draw2-radius-sm);
  font-size: 0.67rem;
}
.draw2-workspace-tab.is-active {
  border-bottom: 2px solid var(--draw2-accent-strong);
  background: var(--draw2-surface-raised);
}
.draw2-palette-strip {
  order: 2;
  padding: 6px;
  border-bottom: 1px solid var(--draw2-border-subtle);
}
.draw2-workspace-panel {
  order: 3;
  padding: 7px;
}
.draw2-workspace-panel .draw2-help,
.draw2-workspace-panel > .draw2-card-heading,
.draw2-workspace-panel > .draw2-metrics {
  display: none;
}
.draw2-workspace-panel .draw2-unavailable-state p {
  font-size: 0.68rem;
}
.draw2-workspace-frame.is-right-dock-collapsed {
  grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) 0;
}
.draw2-workspace-frame.is-right-dock-collapsed .draw2-workspace-right-dock {
  min-width: 0;
  width: 0;
  overflow: hidden;
  border-left: 0;
}

.draw2-workspace-timeline-region {
  min-height: 0;
  padding: 4px 6px 5px;
  border-top: 1px solid var(--draw2-border-subtle);
}
#draw2WorkspaceTimelineSlot,
#draw2WorkspaceTimelineSlot > .draw2-timeline-card {
  min-height: 0;
  height: 100%;
}
#draw2WorkspaceTimelineSlot > .draw2-timeline-card {
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.draw2-workspace-timeline-region .draw2-card-heading {
  display: none;
}
.draw2-workspace-timeline-region .draw2-timeline-display-actions {
  min-height: 30px;
  margin: 0 0 3px;
  padding: 0;
  gap: 3px;
  overflow-x: auto;
}
.draw2-workspace-timeline-region .draw2-timeline-display-actions .draw2-button {
  flex: 0 0 var(--draw2-control-size);
  width: var(--draw2-control-size);
  min-width: var(--draw2-control-size);
  min-height: var(--draw2-control-size);
  padding: 0;
}
.draw2-timeline-secondary {
  position: relative;
  margin: 0 0 3px;
  font-size: 0.65rem;
}
.draw2-timeline-secondary > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 5px;
  border-radius: var(--draw2-radius-sm);
  color: var(--draw2-text-muted);
  cursor: pointer;
  list-style: none;
}
.draw2-timeline-secondary > summary::-webkit-details-marker {
  display: none;
}
.draw2-timeline-secondary[open] > summary {
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
}
.draw2-timeline-secondary .draw2-timeline-creator-tools {
  max-height: 112px;
  margin-top: 3px;
  overflow: auto;
}
.draw2-workspace-timeline-region .draw2-timeline-viewport {
  height: calc(100% - 62px);
  max-height: none;
  margin-top: 0;
  border-radius: var(--draw2-radius-sm);
}

.draw2-workspace-statusbar {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  background: var(--draw2-surface);
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
  white-space: nowrap;
}
.draw2-workspace-statusbar > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.draw2-statusbar-spacer {
  flex: 1 1 auto;
}
.draw2-statusbar-save {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.draw2-statusbar-save i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--draw2-accent-strong);
}

.draw2-workspace-frame[data-workspace-preset="animation"] {
  --draw2-timeline-height: clamp(190px, 33dvh, 340px);
}
.draw2-workspace-frame[data-workspace-preset="tileset"] {
  --draw2-timeline-height: clamp(140px, 20dvh, 220px);
}
.draw2-workspace-frame.is-focus-mode {
  grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) 0;
  grid-template-rows: auto minmax(0, 1fr) 0 var(--draw2-statusbar-height);
}
.draw2-workspace-frame.is-focus-mode .draw2-workspace-right-dock,
.draw2-workspace-frame.is-focus-mode .draw2-workspace-timeline-region {
  width: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 1119px) and (min-width: 701px) {
  :root {
    --draw2-panel-width: 260px;
  }
  .draw2-workspace-global-row {
    grid-template-columns: 110px minmax(0, 1fr) 180px auto;
  }
  .draw2-workspace-brand strong {
    font-size: 0.7rem;
  }
  .draw2-workspace-menu-bar .draw2-menu summary {
    padding-inline: 5px;
    font-size: 0.63rem;
  }
  .draw2-workspace-command-bar .draw2-icon-button:nth-child(n+3) {
    display: none;
  }
}

@media (max-width: 700px) {
  html:has(#draw2WorkspaceFrame), body:has(#draw2WorkspaceFrame) {
    overflow: hidden;
  }
  .draw2-workspace-frame {
    height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      82px minmax(240px, 1fr) auto 156px var(--draw2-statusbar-height);
    grid-template-areas: "top" "canvas" "left" "timeline" "status";
    overflow: hidden;
  }
  .draw2-workspace-topbar {
    min-height: 82px;
  }
  .draw2-workspace-global-row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 40px;
    padding: 3px 4px;
  }
  .draw2-workspace-brand,
  .draw2-workspace-project-slot {
    display: none;
  }
  .draw2-workspace-menu-bar {
    grid-column: 1;
  }
  .draw2-workspace-menu-bar .draw2-menu summary {
    width: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 0;
  }
  .draw2-workspace-menu-bar .draw2-menu-icon {
    width: 16px;
    height: 16px;
  }
  .draw2-workspace-command-bar {
    grid-column: 2;
    justify-content: flex-end;
  }
  .draw2-workspace-command-bar .draw2-icon-button:nth-child(n+3),
  .draw2-theme-control,
  .draw2-language-control {
    display: none;
  }
  .draw2-workspace-context-row {
    min-height: 42px;
    padding: 4px;
  }
  .draw2-workspace-quick-controls {
    width: 100%;
  }
  .draw2-quick-control > span {
    display: none;
  }
  .draw2-workspace-left-dock {
    grid-area: left;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 4px;
    overflow-x: auto;
    border-top: 1px solid var(--draw2-border-subtle);
    border-right: 0;
  }
  .draw2-workspace-toolbar {
    flex-direction: row;
    flex: 0 0 auto;
  }
  .draw2-tool-group,
  .draw2-tool-group-summary,
  .draw2-workspace-toolbar > .draw2-tool-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .draw2-workspace-left-dock .draw2-mobile-color-rail {
    display: grid;
    flex: 0 0 auto;
    min-width: 92px;
  }
  .draw2-workspace-left-dock .draw2-workspace-panel-launcher {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 3px;
  }
  .draw2-workspace-panel-launcher .draw2-panel-launcher {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
  }
  .draw2-workspace-panel-launcher .draw2-panel-launcher span {
    display: none;
  }
  .draw2-workspace-canvas-region {
    padding: 4px;
  }
  .draw2-workspace-right-dock {
    position: fixed;
    left: 4px;
    right: 4px;
    bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    z-index: 120;
    height: min(70dvh, 540px);
    border: 1px solid var(--draw2-border-strong);
    border-radius: var(--draw2-radius-md);
    box-shadow: var(--draw2-shadow-panel);
  }
  .draw2-workspace-frame.is-right-dock-collapsed .draw2-workspace-right-dock {
    width: auto;
    min-width: 0;
  }
  .draw2-workspace-timeline-region {
    display: flex;
    padding: 4px;
  }
  .draw2-workspace-timeline-region .draw2-timeline-viewport {
    height: calc(100% - 62px);
  }
  .draw2-workspace-statusbar {
    padding-inline: 5px;
    font-size: 0.58rem;
  }
  .draw2-workspace-statusbar .draw2-statusbar-save {
    display: none;
  }
  .draw2-workspace-frame.is-focus-mode {
    grid-template-rows:
      82px minmax(0, 1fr) auto 0 var(--draw2-statusbar-height);
  }
  .draw2-workspace-frame.is-focus-mode .draw2-workspace-left-dock {
    min-height: 62px;
  }
}

/* Asset Builder hierarchy view -----------------------------------------
   The normal path is Motion -> Direction -> Frames. The matrix remains a
   compact, canonical-data projection under the auxiliary disclosure. */
.draw2-asset-builder-motion-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.draw2-asset-builder-asset-picker {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.5fr) auto;
  align-items: end;
  gap: 7px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, #4db7ff 42%, var(--draw2-border-subtle));
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, #4db7ff 7%, var(--draw2-surface-input));
}
.draw2-asset-builder-asset-picker-select {
  min-width: 0;
}
.draw2-asset-builder-asset-summary {
  min-width: 0;
  padding-bottom: 7px;
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.55rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-asset-picker > .draw2-button {
  min-height: 30px;
  padding-inline: 8px;
  font-size: 0.55rem;
  white-space: nowrap;
}
.draw2-asset-builder-motion-heading strong {
  color: var(--draw2-text-strong);
  font-size: 0.65rem;
}
.draw2-asset-builder-motion-heading small {
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.52rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-motion-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-height: 144px;
  min-height: 38px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.draw2-asset-builder-motion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-muted);
  cursor: pointer;
  text-align: left;
}
.draw2-asset-builder-motion-item:hover,
.draw2-asset-builder-motion-item:focus-visible,
.draw2-asset-builder-motion-item[aria-selected="true"] {
  border-color: #67d59b;
  background: color-mix(in srgb, #67d59b 18%, var(--draw2-surface-input));
  color: var(--draw2-text-strong);
}
.draw2-asset-builder-motion-item strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-motion-item small {
  flex: 0 0 auto;
  color: #9fe1bb;
  font-size: 0.48rem;
  white-space: nowrap;
}
.draw2-asset-builder-motion-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 7px;
  border: 1px dashed var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  color: var(--draw2-text-muted);
  font-size: 0.55rem;
  line-height: 1.4;
  text-align: center;
}
.draw2-asset-builder-new-motion {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, #67d59b 55%, var(--draw2-border-subtle));
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, #67d59b 8%, var(--draw2-surface-input));
}
.draw2-asset-builder-new-motion[hidden] {
  display: none;
}
.draw2-asset-builder-new-motion label {
  display: grid;
  gap: 4px;
  color: var(--draw2-text-muted);
  font-size: 0.55rem;
  font-weight: 700;
}
.draw2-asset-builder-new-motion input {
  box-sizing: border-box;
  width: 100%;
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font-size: 0.62rem;
}
.draw2-asset-builder-new-motion-actions,
.draw2-asset-builder-frame-actions,
.draw2-asset-builder-compass-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.draw2-asset-builder-new-motion-actions .draw2-button,
.draw2-asset-builder-frame-actions .draw2-button,
.draw2-asset-builder-compass-actions .draw2-button {
  min-height: 28px;
  padding-inline: 7px;
  font-size: 0.55rem;
}
.draw2-asset-builder-direction-heading {
  padding-top: 3px;
  border-top: 1px solid var(--draw2-border-subtle);
}
.draw2-asset-builder-direction-title {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.draw2-asset-builder-direction-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--draw2-text-muted);
  font-size: 0.5rem;
  white-space: nowrap;
}
.draw2-asset-builder-direction-mode select {
  min-height: 26px;
  padding: 0 5px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font-size: 0.52rem;
}
.draw2-asset-builder-compass {
  display: grid;
  grid-template: repeat(3, minmax(42px, 1fr)) / repeat(3, minmax(0, 1fr));
  grid-template-areas:
    ". up ."
    "left center right"
    ". down .";
  gap: 4px;
  min-width: 0;
  padding: 2px;
}
.draw2-asset-builder-compass-slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  padding: 4px 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-muted);
  cursor: pointer;
  text-align: left;
}
.draw2-asset-builder-compass-slot[data-direction="UP"] {
  grid-area: up;
}
.draw2-asset-builder-compass-slot[data-direction="LEFT"] {
  grid-area: left;
}
.draw2-asset-builder-compass-slot[data-direction="RIGHT"] {
  grid-area: right;
}
.draw2-asset-builder-compass-slot[data-direction="DOWN"] {
  grid-area: down;
}
.draw2-asset-builder-compass[data-direction-mode="8"] {
  grid-template-areas:
    "up-left up up-right"
    "left center right"
    "down-left down down-right";
}
.draw2-asset-builder-compass-slot[data-direction="UP_LEFT"] {
  grid-area: up-left;
}
.draw2-asset-builder-compass-slot[data-direction="UP_RIGHT"] {
  grid-area: up-right;
}
.draw2-asset-builder-compass-slot[data-direction="DOWN_LEFT"] {
  grid-area: down-left;
}
.draw2-asset-builder-compass-slot[data-direction="DOWN_RIGHT"] {
  grid-area: down-right;
}
.draw2-asset-builder-compass[data-direction-mode="1"] {
  grid-template: auto / minmax(0, 1fr);
  grid-template-areas: none;
}
.draw2-asset-builder-compass[data-direction-mode="2"] {
  grid-template: auto / repeat(2, minmax(0, 1fr));
  grid-template-areas: none;
}
.draw2-asset-builder-compass[data-direction-mode="CUSTOM"] {
  grid-template: auto / repeat(auto-fit, minmax(84px, 1fr));
  grid-template-areas: none;
}
.draw2-asset-builder-compass[data-direction-mode="1"]
  .draw2-asset-builder-compass-slot,
.draw2-asset-builder-compass[data-direction-mode="2"]
  .draw2-asset-builder-compass-slot,
.draw2-asset-builder-compass[data-direction-mode="CUSTOM"]
  .draw2-asset-builder-compass-slot {
  grid-area: auto;
}
.draw2-asset-builder-compass-slot::before {
  grid-area: 1 / 1 / -1 / -1;
  justify-self: center;
  color: color-mix(in srgb, #67d59b 24%, transparent);
  content: "";
  pointer-events: none;
}
.draw2-asset-builder-compass-slot:hover,
.draw2-asset-builder-compass-slot:focus-visible,
.draw2-asset-builder-compass-slot[aria-selected="true"] {
  border-color: #67d59b;
  background: color-mix(in srgb, #67d59b 18%, var(--draw2-surface-input));
  color: var(--draw2-text-strong);
}
.draw2-asset-builder-compass-slot[data-filled="true"] {
  border-color: color-mix(in srgb, #67d59b 68%, var(--draw2-border-subtle));
}
.draw2-asset-builder-compass-slot b {
  grid-row: 1 / -1;
  color: #9fe1bb;
  font-size: 1rem;
  line-height: 1;
}
.draw2-asset-builder-compass-slot span,
.draw2-asset-builder-compass-slot small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-compass-slot span {
  font-size: 0.56rem;
  font-weight: 800;
}
.draw2-asset-builder-compass-slot small {
  color: var(--draw2-text-muted);
  font-size: 0.46rem;
}
.draw2-asset-builder-compass-actions {
  justify-content: space-between;
}
.draw2-asset-builder-compass-actions > span {
  color: var(--draw2-text-muted);
  font-size: 0.48rem;
}
.draw2-asset-builder-custom-direction {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 0;
}
.draw2-asset-builder-custom-direction[hidden] {
  display: none;
}
.draw2-asset-builder-custom-direction input {
  box-sizing: border-box;
  flex: 1 1 120px;
  min-width: 0;
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font-size: 0.55rem;
}
.draw2-asset-builder-custom-direction .draw2-button {
  min-height: 28px;
  padding-inline: 7px;
  font-size: 0.55rem;
  white-space: nowrap;
}
.draw2-asset-builder-frame-editor {
  display: grid;
  gap: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--draw2-border-subtle);
}
.draw2-asset-builder-frame-editor-strip {
  min-height: 32px;
  padding: 2px 0;
}
.draw2-asset-builder-frame-editor-strip:empty::before {
  display: block;
  padding: 7px;
  border: 1px dashed var(--draw2-border-subtle);
  border-radius: 3px;
  color: var(--draw2-text-muted);
  content: "向きを選ぶとフレームが並びます";
  font-size: 0.5rem;
  text-align: center;
}
.draw2-asset-builder-frame-actions {
  align-items: center;
}
.draw2-asset-builder-duration {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  color: var(--draw2-text-muted);
  font-size: 0.5rem;
  white-space: nowrap;
}
.draw2-asset-builder-loop {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--draw2-text-muted);
  font-size: 0.5rem;
  white-space: nowrap;
}
.draw2-asset-builder-duration input {
  box-sizing: border-box;
  width: 52px;
  min-height: 27px;
  padding: 0 4px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font-size: 0.55rem;
}
.draw2-asset-builder-loop select {
  min-height: 27px;
  padding: 0 4px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font-size: 0.55rem;
}
.draw2-asset-builder-matrix-details {
  min-width: 0;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, var(--draw2-surface-input) 58%, transparent);
}
.draw2-asset-builder-matrix-details > summary {
  padding: 6px 7px;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.52rem;
  font-weight: 800;
}
.draw2-asset-builder-matrix-details[open] > summary {
  border-bottom: 1px solid var(--draw2-border-subtle);
  color: var(--draw2-text-strong);
}
.draw2-asset-builder-matrix-details > .draw2-asset-builder-matrix {
  margin: 7px;
}

@media (max-width: 820px) {
  .draw2-asset-builder-columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .draw2-asset-builder-asset-picker {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .draw2-asset-builder-asset-summary {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-bottom: 0;
  }
  .draw2-asset-builder-motion-list {
    max-height: 118px;
  }
}

/* -------------------------------------------------------------------------
   Audio compact DAW shell
   The Audio mode is intentionally a four-surface layout: one global bar,
   one central editor, one context dock and one lower workspace.  This is a
   presentation-only projection; Audio-200, Scheduler and runtime nodes stay
   behind the existing workspace bridge.  The breakpoint keeps the existing
   mobile/tablet sheets unchanged.
   ------------------------------------------------------------------------- */
@media (min-width: 1120px) {
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    --draw2-audio-right-width: clamp(320px, 27vw, 390px);
    grid-template-columns:
      minmax(0, 1fr) var(--draw2-audio-right-width) !important;
    grid-template-rows:
      64px minmax(0, 1fr) clamp(230px, 29dvh, 300px) var(
        --draw2-statusbar-height
      ) !important;
    grid-template-areas:
      "top top" "canvas right" "timeline timeline" "status status" !important;
    background: #0c1018;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-topbar {
    position: relative !important;
    display: block !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 !important;
    overflow: visible !important;
    border-bottom: 1px solid
      color-mix(in srgb, #61d9ff 48%, var(--draw2-border));
    background: linear-gradient(180deg, #171d29, #10151f);
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-global-row {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 8px !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-brand {
    position: relative !important;
    z-index: 4 !important;
    flex: 0 0 138px !important;
    width: 138px !important;
    min-width: 138px !important;
    overflow: hidden !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-brand
    strong {
    display: inline !important;
    overflow: hidden;
    color: var(--draw2-text-strong);
    text-overflow: ellipsis;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-menu-bar,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-project-slot,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-context-row {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-creator-mode-bar {
    position: absolute !important;
    z-index: 3 !important;
    top: 12px !important;
    left: 150px !important;
    display: flex !important;
    width: 228px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    gap: 3px !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, #61d9ff 38%, var(--draw2-border));
    border-radius: 7px;
    background: #0d131d;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-creator-mode-bar
    .draw2-creator-mode {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding-inline: 6px !important;
    border-radius: 4px !important;
    font-size: 0.62rem !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-creator-mode-bar
    .draw2-creator-mode
    svg {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar {
    position: absolute !important;
    z-index: 4 !important;
    top: 12px !important;
    right: 8px !important;
    display: flex !important;
    width: 190px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    gap: 3px !important;
    overflow: hidden !important;
    border: 1px solid var(--draw2-border);
    border-radius: 7px;
    background: #0d131d;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-mode-playback],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="command-palette"],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > .draw2-zoom-readout,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > .draw2-theme-control,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > .draw2-language-control,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="kill-switch"] {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="undo"],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="redo"] {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="undo"]
    span,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="redo"]
    span {
    display: none !important;
  }

  .draw2-audio-global-controls {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 208px;
    left: 390px;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    min-width: 0;
    padding: 3px 5px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #61d9ff 38%, var(--draw2-border));
    border-radius: 7px;
    background: #0d131d;
  }
  #draw2AudioGlobalControls[hidden] {
    display: none !important;
  }
  .draw2-audio-global-button {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--draw2-border);
    border-radius: 4px;
    background: #171f2c;
    color: var(--draw2-text-strong);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
  }
  .draw2-audio-global-button:hover,
  .draw2-audio-global-button:focus-visible,
  .draw2-audio-global-button.is-active {
    border-color: #c88bff;
    background: color-mix(in srgb, #c88bff 22%, #171f2c);
  }
  .draw2-audio-global-button.is-primary {
    border-color: #c88bff;
    color: #efdfff;
  }
  .draw2-audio-global-button.is-record {
    color: #ff9292;
  }
  .draw2-audio-global-field {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    color: var(--draw2-text-muted);
    font-size: 0.58rem;
    white-space: nowrap;
  }
  .draw2-audio-global-field input,
  .draw2-audio-global-field select {
    width: 56px;
    min-width: 56px;
    height: 30px;
    min-height: 30px;
    padding: 0 4px;
    border: 1px solid var(--draw2-border);
    border-radius: 4px;
    background: #141b27;
    color: var(--draw2-text-strong);
    font-size: 0.68rem;
  }
  .draw2-audio-global-readout {
    min-width: 90px;
    margin-left: auto;
    color: var(--draw2-text-muted);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .draw2-audio-global-save {
    flex: 0 0 auto;
    min-width: 82px;
    color: #8fe5b2;
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-left-dock,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-context-row {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-canvas-region {
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #0c1018 !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace {
    position: absolute !important;
    inset: 8px !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, #61d9ff 58%, var(--draw2-border));
    border-radius: 8px;
    background: #111722;
    box-shadow: 0 14px 30px rgb(0 0 0 / 24%);
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace[hidden] {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-mini-preview {
    display: none !important;
  }
  .draw2-audio-editor-header {
    display: flex;
    flex: 0 0 42px;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    border-bottom: 1px solid var(--draw2-border);
    background: #171e2b;
  }
  .draw2-audio-editor-tabs {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .draw2-audio-editor-tabs::-webkit-scrollbar {
    display: none;
  }
  .draw2-audio-editor-tab {
    flex: 0 0 84px;
    min-width: 84px;
    height: 42px;
    border: 0;
    border-right: 1px solid
      color-mix(in srgb, var(--draw2-border) 72%, transparent);
    background: transparent;
    color: var(--draw2-text-muted);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
  }
  .draw2-audio-editor-tab:hover,
  .draw2-audio-editor-tab:focus-visible,
  .draw2-audio-editor-tab.is-active {
    background: color-mix(in srgb, #c88bff 30%, #171e2b);
    color: #f0ddff;
  }
  .draw2-audio-editor-context {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 10px;
    color: var(--draw2-text-muted);
    font-size: 0.62rem;
  }
  .draw2-audio-editor-context output {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .draw2-audio-editor-pin {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid var(--draw2-border);
    border-radius: 4px;
    background: #121a27;
    color: var(--draw2-text-muted);
    cursor: pointer;
    font-size: 0.62rem;
  }
  .draw2-audio-editor-pin.is-active {
    border-color: #c88bff;
    color: #efdfff;
  }
  #draw2AudioWorkspace > .draw2-audio-panel,
  #draw2AudioWorkspace > .draw2-audio-editor-surface {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    margin: 0;
    overflow: hidden;
  }
  #draw2AudioWorkspace > [hidden] {
    display: none !important;
  }
  .draw2-audio-editor-placeholder {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: 10px;
    padding: 16px;
    overflow: auto;
    background: linear-gradient(145deg, #121a27, #0f141e);
  }
  .draw2-audio-wave-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    color: var(--draw2-text-muted);
    font-size: 0.7rem;
  }
  .draw2-audio-wave-toolbar strong {
    color: var(--draw2-text-strong);
    font-size: 0.85rem;
  }
  .draw2-audio-wave-toolbar span {
    margin-right: auto;
  }
  .draw2-audio-waveform-viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 180px;
    overflow: hidden;
    border: 1px solid #34415a;
    border-radius: 5px;
    background:
      repeating-linear-gradient(90deg, #182234 0 1px, transparent 1px 42px),
      linear-gradient(180deg, #121b2a, #0c121d);
    cursor: pointer;
  }
  .draw2-audio-waveform-viewport:hover,
  .draw2-audio-waveform-viewport:focus-visible {
    border-color: #c88bff;
    outline: 2px solid rgb(200 139 255 / 28%);
    outline-offset: 1px;
  }
  .draw2-audio-waveform-line {
    position: relative;
    display: block;
    height: 2px;
    margin: 13% 6% 0;
    background: linear-gradient(
      90deg,
      transparent,
      #75c8ff 15%,
      #c88bff 50%,
      #75c8ff 85%,
      transparent
    );
    box-shadow: 0 0 9px rgb(117 200 255 / 44%);
    transform: skewY(-2deg);
  }
  .draw2-audio-waveform-line:nth-child(2) {
    margin-top: 11%;
    opacity: 0.55;
    transform: skewY(3deg);
  }
  .draw2-audio-waveform-line:nth-child(3) {
    margin-top: 15%;
    opacity: 0.32;
    transform: skewY(-5deg);
  }
  .draw2-audio-editor-status {
    margin: 0;
    color: var(--draw2-text-muted);
    font-size: 0.65rem;
  }
  .draw2-audio-draw-preview-editor {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: 10px;
    padding: 14px;
    overflow: auto;
    background:
      radial-gradient(circle at 82% 8%, rgb(200 139 255 / 16%), transparent 34%),
      linear-gradient(145deg, #121a2a, #0d131e 78%);
  }
  .draw2-audio-draw-preview-toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    color: var(--draw2-text-muted);
    font-size: 0.66rem;
  }
  .draw2-audio-draw-preview-toolbar strong {
    color: #f1e1ff;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
  }
  .draw2-audio-draw-preview-toolbar span {
    min-width: 0;
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .draw2-audio-draw-preview-toolbar button {
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid #4f6080;
    border-radius: 5px;
    background: #18243a;
    color: var(--draw2-text-strong);
    cursor: pointer;
    font: inherit;
  }
  .draw2-audio-draw-preview-toolbar button:hover,
  .draw2-audio-draw-preview-toolbar button:focus-visible,
  .draw2-audio-draw-preview-toolbar button.is-active {
    border-color: #c88bff;
    background: color-mix(in srgb, #c88bff 24%, #18243a);
    color: #ffffff;
    outline: none;
  }
  .draw2-audio-draw-preview-stage {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    min-height: 220px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #3b4b68;
    border-radius: 8px;
    background:
      repeating-linear-gradient(0deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(90deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 24px),
      #090e17;
    box-shadow: inset 0 0 30px rgb(0 0 0 / 34%);
  }
  #draw2AudioDrawPreviewCanvas {
    display: block;
    width: min(68%, 520px);
    height: auto;
    max-width: 82%;
    max-height: 82%;
    border: 1px solid rgb(200 139 255 / 55%);
    border-radius: 4px;
    background: #0b0e14;
    box-shadow: 0 0 22px rgb(97 217 255 / 16%), 0 12px 28px rgb(0 0 0 / 34%);
    image-rendering: pixelated;
  }
  .draw2-audio-draw-preview-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 48px rgb(0 0 0 / 34%);
  }
  .draw2-audio-draw-preview-playhead {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 50%;
    width: 2px;
    border-radius: 99px;
    background: linear-gradient(180deg, transparent, #c88bff, transparent);
    box-shadow: 0 0 12px rgb(200 139 255 / 75%);
    opacity: 0.65;
    pointer-events: none;
  }
  .draw2-audio-draw-preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--draw2-text-muted);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
  }
  .draw2-audio-draw-preview-meta output {
    color: #eedcff;
    font-weight: 800;
  }
  .draw2-audio-draw-preview-meta p {
    margin: 0;
  }
  .draw2-audio-drum-grid {
    display: grid;
    grid-template-columns: 112px repeat(16, minmax(30px, 1fr));
    grid-auto-rows: 28px;
    gap: 3px;
    min-height: 0;
    min-width: max-content;
    padding: 8px;
    overflow: auto;
    border: 1px solid #34415a;
    border-radius: 5px;
    background: #111827;
  }
  .draw2-audio-drum-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
  }
  .draw2-audio-drum-kit-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: var(--draw2-text-muted);
    font-size: 0.62rem;
    white-space: nowrap;
  }
  .draw2-audio-drum-kit-control select {
    min-height: 28px;
    max-width: 150px;
    padding: 3px 24px 3px 7px;
    border: 1px solid #596681;
    border-radius: 5px;
    background: #1b263b;
    color: var(--draw2-text);
    font: inherit;
  }
  .draw2-audio-drum-kit-control select:focus-visible {
    outline: 2px solid rgb(200 139 255 / 55%);
    outline-offset: 1px;
  }
  .draw2-audio-drum-help {
    margin: 0;
    color: var(--draw2-text-muted);
    font-size: 0.6rem;
  }
  .draw2-audio-drum-label {
    display: flex;
    align-items: center;
    padding-inline: 8px;
    border-radius: 3px;
    background: #202c40;
    color: var(--draw2-text-muted);
    font-size: 0.62rem;
  }
  .draw2-audio-drum-step {
    min-width: 30px;
    min-height: 28px;
    padding: 0;
    border: 1px solid #2d3b56;
    border-radius: 4px;
    background: #192338;
    color: transparent;
    cursor: pointer;
    touch-action: none;
    user-select: none;
  }
  .draw2-audio-drum-step:nth-of-type(4n+2),
  .draw2-audio-drum-step:nth-of-type(4n+3),
  .draw2-audio-drum-step:nth-of-type(4n+4),
  .draw2-audio-drum-step:nth-of-type(4n+5) {
    border-left-color: #43516d;
  }
  .draw2-audio-drum-step.is-bar-start,
  .draw2-audio-drum-step-label.is-bar {
    border-left-color: #91a8d2;
    box-shadow: inset 2px 0 0 rgb(145 168 210 / 42%);
  }
  .draw2-audio-drum-step.is-beat,
  .draw2-audio-drum-step-label.is-beat {
    border-left-color: #687caa;
  }
  .draw2-audio-drum-step-label.is-bar,
  .draw2-audio-drum-step-label.is-beat {
    background: linear-gradient(180deg, #273652, #1a263b);
    color: #c6d4f3;
    font-weight: 800;
  }
  .draw2-audio-drum-step:hover,
  .draw2-audio-drum-step:focus-visible {
    border-color: #d5a7ff;
    outline: 2px solid rgb(200 139 255 / 34%);
    outline-offset: 1px;
  }
  .draw2-audio-drum-step.is-active {
    border-color: #ffd08a;
    background: linear-gradient(180deg, #ffbf72, #cc704a);
    box-shadow: 0 0 8px rgb(255 191 114 / 30%);
  }
  .draw2-audio-drum-step-label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--draw2-text-muted);
    font-size: 0.58rem;
    font-variant-numeric: tabular-nums;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceRightDock {
    display: flex !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 8px 8px 8px 0 !important;
    overflow: hidden !important;
    border-left: 0 !important;
    background: transparent !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceRightDock
    > *:not(#draw2AudioRightDock) {
    display: none !important;
  }
  #draw2AudioRightDock {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #61d9ff 58%, var(--draw2-border));
    border-radius: 8px;
    background: #111722;
    box-shadow: 0 14px 30px rgb(0 0 0 / 24%);
  }
  #draw2AudioRightDock[hidden] {
    display: none !important;
  }
  .draw2-audio-right-tabs {
    display: grid;
    flex: 0 0 42px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 42px;
    border-bottom: 1px solid var(--draw2-border);
    background: #171e2b;
  }
  .draw2-audio-right-tab {
    min-width: 0;
    min-height: 42px;
    border: 0;
    border-right: 1px solid
      color-mix(in srgb, var(--draw2-border) 72%, transparent);
    background: transparent;
    color: var(--draw2-text-muted);
    cursor: pointer;
    font-size: 0.64rem;
    font-weight: 800;
  }
  .draw2-audio-right-tab:hover,
  .draw2-audio-right-tab:focus-visible,
  .draw2-audio-right-tab.is-active {
    background: color-mix(in srgb, #c88bff 30%, #171e2b);
    color: #f0ddff;
  }
  .draw2-audio-right-surface {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 12px;
    overflow: auto;
    background: linear-gradient(145deg, #121a27, #0f141e);
  }
  .draw2-audio-right-surface[hidden] {
    display: none !important;
  }
  .draw2-audio-right-heading {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
  }
  .draw2-audio-right-heading strong {
    overflow: hidden;
    color: var(--draw2-text-strong);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .draw2-audio-inspector-controls {
    display: grid;
    gap: 10px;
  }
  .draw2-audio-inspector-controls label,
  .draw2-audio-master-gain {
    display: grid;
    gap: 4px;
    color: var(--draw2-text-muted);
    font-size: 0.62rem;
  }
  .draw2-audio-inspector-controls input,
  .draw2-audio-master-gain input {
    width: 100%;
    accent-color: #c88bff;
  }
  .draw2-audio-right-chip-row {
    display: flex;
    gap: 5px;
    margin-top: 12px;
  }
  .draw2-audio-right-chip {
    width: 32px;
    height: 28px;
    border: 1px solid var(--draw2-border);
    border-radius: 4px;
    background: #182235;
    color: var(--draw2-text-muted);
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 800;
  }
  .draw2-audio-right-chip:hover,
  .draw2-audio-right-chip:focus-visible {
    border-color: #c88bff;
    color: #f0ddff;
  }
  .draw2-audio-right-status {
    margin: 12px 0;
    color: var(--draw2-text-muted);
    font-size: 0.65rem;
    line-height: 1.45;
  }
  .draw2-audio-right-section {
    display: grid;
    gap: 6px;
    color: var(--draw2-text-muted);
    font-size: 0.62rem;
  }
  .draw2-audio-right-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .draw2-audio-right-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid #2a3850;
    border-radius: 4px;
    background: #182235;
    color: var(--draw2-text-strong);
    font-size: 0.65rem;
  }
  .draw2-audio-right-list b {
    color: #7de3b1;
  }
  .draw2-audio-browser-search {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
    color: var(--draw2-text-muted);
    font-size: 0.62rem;
  }
  .draw2-audio-browser-search input {
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--draw2-border);
    border-radius: 4px;
    background: #0d1420;
    color: var(--draw2-text-strong);
  }
  .draw2-audio-browser-tree {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
  }
  .draw2-audio-browser-tree button {
    min-height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--draw2-text-muted);
    text-align: left;
    cursor: pointer;
    font-size: 0.67rem;
  }
  .draw2-audio-browser-tree button:hover,
  .draw2-audio-browser-tree button:focus-visible {
    background: #1d2a40;
    color: var(--draw2-text-strong);
  }
  .draw2-audio-master-meter {
    display: grid;
    grid-template-columns: 14px 14px minmax(0, 1fr);
    align-items: end;
    gap: 5px;
    min-height: 130px;
    padding: 10px;
    border: 1px solid #2a3850;
    border-radius: 5px;
    background: #0c121c;
  }
  .draw2-audio-meter-bar {
    display: flex;
    align-items: end;
    height: 108px;
    overflow: hidden;
    border-radius: 2px;
    background: #1d2a38;
  }
  .draw2-audio-meter-bar i {
    display: block;
    width: 100%;
    height: 72%;
    background: linear-gradient(
      180deg,
      #f07878 0 10%,
      #f2ca6a 10% 35%,
      #66df88 35%
    );
  }
  .draw2-audio-master-meter output {
    align-self: start;
    color: var(--draw2-text-muted);
    font-size: 0.62rem;
  }
  .draw2-audio-master-readouts {
    display: grid;
    gap: 4px;
    margin: 10px 0 14px;
    color: var(--draw2-text-muted);
    font-size: 0.62rem;
  }
  .draw2-audio-master-readouts span {
    display: flex;
    justify-content: space-between;
  }
  .draw2-audio-master-readouts b {
    color: var(--draw2-text-strong);
    font-variant-numeric: tabular-nums;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-mode-timeline-deck-heading {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-mode-timeline-deck-tabs {
    flex: 0 0 34px !important;
    min-height: 34px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-mode-timeline-deck-tab {
    min-width: 92px !important;
    min-height: 34px !important;
    height: 34px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-mode-timeline-deck-tab[data-audio-secondary-tab="true"] {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioDeckPlay,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioRecordArm,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioRecord,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioRecordCancel,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioChipPlay,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioLoopToggle,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioDeckSave {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioDeckAddClip {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2ModeDeckAudio {
    gap: 4px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2ModeDeckAudio
    > .draw2-mode-deck-toolbar {
    flex: 0 0 30px !important;
    min-height: 30px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2ModeDeckAudio
    > .draw2-audio-timebase {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw2-workspace-right-dock,
  .draw2-workspace-frame * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--draw2-bg);
  color: var(--draw2-text);
}
button, input, select {
  font: inherit;
}
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--draw2-focus);
  outline-offset: 3px;
}
.draw2-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 24px
    max(32px, env(safe-area-inset-bottom));
}
.draw2-header, .draw2-card-heading, .draw2-controls, .draw2-workspace {
  display: flex;
  gap: 20px;
}
.draw2-header {
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 0 28px;
}
.draw2-header h1, .draw2-card h2 {
  margin: 0;
  letter-spacing: -0.03em;
}
.draw2-header h1 {
  font-size: clamp(1.8rem, 5vw, 3.4rem);
}
.draw2-card h2 {
  font-size: 1.1rem;
}
.draw2-description, .draw2-help {
  color: var(--draw2-muted);
  line-height: 1.6;
}
.draw2-description {
  max-width: 640px;
  margin-bottom: 0;
}
.draw2-eyebrow {
  color: var(--draw2-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0 0 8px;
}
.draw2-badge {
  border: 1px solid var(--draw2-border);
  color: var(--draw2-muted);
  border-radius: 999px;
  padding: 8px 12px;
  white-space: nowrap;
  font-size: 0.8rem;
}
.draw2-card {
  background: var(--draw2-surface);
  border: 1px solid var(--draw2-border);
  border-radius: 18px;
  padding: 20px;
}
.draw2-selection-card {
  margin-top: 20px;
}
.draw2-advanced-card {
  margin-top: 20px;
}
.draw2-timeline-card {
  margin-top: 20px;
}
.draw2-card-heading {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.draw2-status, .draw2-metrics {
  margin: 0;
  color: var(--draw2-muted);
  font-size: 0.8rem;
  text-align: right;
}
.draw2-status[data-state="error"] {
  color: var(--draw2-danger);
}
.draw2-controls {
  align-items: end;
  flex-wrap: wrap;
  margin-top: 18px;
}
.draw2-controls label {
  display: grid;
  gap: 7px;
  color: var(--draw2-muted);
  font-size: 0.8rem;
}
.draw2-controls input, .draw2-controls select {
  min-height: 42px;
  min-width: 220px;
  padding: 0 12px;
  border: 1px solid var(--draw2-border);
  border-radius: 10px;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text);
}
.draw2-button {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  background: var(--draw2-accent);
  color: #0c2422;
  font-weight: 800;
  cursor: pointer;
}
.draw2-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.draw2-button-secondary {
  border: 1px solid var(--draw2-border);
  background: var(--draw2-surface-raised);
  color: var(--draw2-text);
}
.draw2-transform-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(72px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.draw2-transform-grid label {
  display: grid;
  gap: 6px;
  color: var(--draw2-muted);
  font-size: 0.75rem;
}
.draw2-transform-grid input, .draw2-transform-grid select {
  min-width: 0;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--draw2-border);
  border-radius: 8px;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text);
}
.draw2-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.draw2-action-row .draw2-button {
  min-height: 38px;
  padding: 0 11px;
  font-size: 0.8rem;
}
.draw2-file-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--draw2-border);
  border-radius: 10px;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text);
  font-size: 0.8rem;
  font-weight: 700;
}
.draw2-file-input input {
  max-width: 220px;
  color: var(--draw2-muted);
  font-size: 0.75rem;
}
.draw2-timeline-viewport {
  position: relative;
  width: 100%;
  max-height: 300px;
  margin-top: 18px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--draw2-border);
  border-radius: 12px;
  background: #0b0e14;
  touch-action: pan-x pan-y;
}
.draw2-timeline-spacer {
  position: relative;
  min-width: 220px;
  min-height: 76px;
}
.draw2-timeline-window {
  position: absolute;
  inset: 0;
  min-width: 220px;
  min-height: 76px;
}
.draw2-timeline-row {
  position: absolute;
  left: 0;
  height: 38px;
  min-width: 100%;
}
.draw2-timeline-row-label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 148px;
  height: 38px;
  padding: 0 10px;
  overflow: hidden;
  border-right: 1px solid var(--draw2-border);
  background: var(--draw2-surface-raised);
  color: var(--draw2-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-timeline-cell {
  position: absolute;
  top: 3px;
  width: 44px;
  min-height: 32px;
  padding: 0 4px;
  overflow: hidden;
  border: 1px solid var(--draw2-border);
  border-radius: 7px;
  background: var(--draw2-surface);
  color: var(--draw2-text);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-timeline-cell[aria-selected="true"] {
  border-color: var(--draw2-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--draw2-focus) 45%, transparent);
}
.draw2-timeline-cell[data-empty="true"] {
  color: var(--draw2-muted);
  background: repeating-linear-gradient(
    135deg,
    var(--draw2-surface) 0 5px,
    var(--draw2-surface-raised) 5px 10px
  );
}
.draw2-workspace {
  align-items: stretch;
  margin-top: 20px;
}
.draw2-canvas-card {
  min-width: 0;
  flex: 1 1 680px;
  background: var(--draw2-surface);
  border: 1px solid var(--draw2-border);
  border-radius: 18px;
  padding: 20px;
}
.draw2-palette {
  flex: 0 1 300px;
}
.draw2-viewport-wrap {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 18px;
  padding: 16px;
  background: #0b0e14;
  border: 1px solid var(--draw2-border);
  border-radius: 12px;
}
.draw2-viewport-center-button {
  position: absolute;
  z-index: 10;
  left: 10px;
  bottom: 10px;
  min-height: 32px;
  padding: 5px 9px;
  background: color-mix(
    in srgb,
    var(--draw2-surface-raised) 90%,
    var(--draw2-accent-strong)
  );
  box-shadow: 0 2px 8px rgb(0 0 0 / 32%);
}
.draw2-viewport-center-button:hover,
.draw2-viewport-center-button:focus-visible {
  border-color: var(--draw2-focus);
  outline: 2px solid color-mix(in srgb, var(--draw2-focus) 44%, transparent);
  outline-offset: 1px;
}
@media (max-width: 720px) {
  #draw2WorkspaceCanvasSlot .draw2-viewport-wrap >
    .draw2-viewport-center-button {
    left: 8px;
    bottom: 8px;
    width: auto !important;
    min-width: 44px !important;
    max-width: max-content;
    height: 44px !important;
    min-height: 44px !important;
    padding: 6px;
  }
  .draw2-viewport-center-button .draw2-button-label {
    display: none;
  }
}
.draw2-canvas-stack {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1;
}
#draw2Canvas, #draw2Overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Keep raster pixels nearest-neighbor during fit-to-viewport and CSS zoom. */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  display: block;
}
#draw2Canvas {
  z-index: 0;
  cursor: crosshair;
  touch-action: none;
  /* One checker square is exactly 16 CSS px. The 32px repeat contains two
     alternating squares, matching the Draw2 transparency-grid contract. */
  background-color: var(--draw2-canvas-checker-a);
  background-image: repeating-conic-gradient(
    var(--draw2-canvas-checker-a) 0 25%,
    var(--draw2-canvas-checker-b) 0 50%
  );
  /* Keep checker phase attached to the canvas origin. Centering the pattern
     makes the checker jump whenever the displayed canvas size changes. */
  background-position: 0 0;
  background-size: calc(
    var(
      --draw2-checker-cell-size-display-x,
      var(--draw2-checker-cell-size-display, var(--draw2-checker-cell-size))
    )
      * 2
  )
    calc(
      var(
        --draw2-checker-cell-size-display-y,
        var(--draw2-checker-cell-size-display, var(--draw2-checker-cell-size))
      )
        * 2
    );
}
#draw2Overlay {
  z-index: 3;
  pointer-events: none;
}
#draw2SelectionOverlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  shape-rendering: crispEdges;
}
#draw2SelectionOverlay[hidden] {
  display: none;
}
.draw2-selection-path {
  fill: none;
  stroke-width: 1px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
  animation: draw2-selection-ants 420ms steps(8, end) infinite;
}
.draw2-selection-path--dark {
  stroke: rgba(12, 16, 24, 0.96);
  stroke-width: 1px;
}
.draw2-selection-path--light {
  stroke: rgba(255, 255, 255, 0.96);
  animation-delay: -210ms;
}
.draw2-selection-path--preview.draw2-selection-path--dark {
  stroke: rgba(20, 46, 52, 0.96);
}
.draw2-selection-path--preview.draw2-selection-path--light {
  stroke: rgba(138, 227, 210, 0.96);
}
.draw2-selection-path--draft.draw2-selection-path--dark {
  stroke: rgba(72, 53, 12, 0.96);
}
.draw2-selection-path--draft.draw2-selection-path--light {
  stroke: rgba(248, 212, 119, 0.98);
}
.draw2-selection-path--pending.draw2-selection-path--dark {
  stroke: rgba(42, 24, 54, 0.96);
}
.draw2-selection-path--pending.draw2-selection-path--light {
  stroke: rgba(218, 160, 255, 0.98);
}
@keyframes draw2-selection-ants {
  to {
    stroke-dashoffset: -8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .draw2-selection-path {
    animation: none;
  }
}

.draw2-shortcuts-dialog {
  width: min(620px, calc(100vw - 2rem));
}
.draw2-shortcut-list {
  display: grid;
  gap: 1px;
  max-height: min(60vh, 520px);
  overflow: auto;
  border: 1px solid var(--draw2-border-subtle);
  background: var(--draw2-border-subtle);
}
.draw2-shortcut-category {
  padding: 0.55rem 0.7rem 0.35rem;
  background: var(--draw2-surface-raised);
  color: var(--draw2-accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.draw2-shortcut-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.7rem;
  background: var(--draw2-surface);
}
.draw2-shortcut-row[hidden] {
  display: none;
}
.draw2-shortcut-label {
  min-width: 0;
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-shortcut-keys {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--draw2-text-strong);
  font-size: 0.68rem;
  font-weight: 800;
}
.draw2-shortcut-keys kbd {
  min-width: 1.65rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--draw2-border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--draw2-surface-raised);
  text-align: center;
}

.draw2-pixel-grid-svg {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  pointer-events: none;
  shape-rendering: crispEdges;
}
.draw2-pixel-grid-svg[hidden] {
  display: none;
}
.draw2-pixel-grid-path {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}
.draw2-pixel-grid-path--minor {
  opacity: var(--draw2-grid-opacity, 0.04);
  stroke: var(--draw2-grid-minor);
}
.draw2-pixel-grid-path--major {
  opacity: var(--draw2-grid-major-opacity, 0.12);
  stroke: var(--draw2-grid-major);
}
.draw2-tilemap-grid-svg {
  position: absolute;
  /* Keep tile boundaries readable above the pixel lattice while remaining
     below the cursor, selection, and drawing overlays. */
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  pointer-events: none;
  shape-rendering: crispEdges;
}
.draw2-tilemap-grid-svg[hidden] {
  display: none;
}
.draw2-tilemap-grid-path {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}
.draw2-tilemap-grid-path--minor {
  stroke: var(--draw2-accent-strong, #8ae3d2);
  stroke-width: 1;
  opacity: 0.34;
}
.draw2-tilemap-grid-path--major {
  stroke: var(--draw2-accent-strong, #8ae3d2);
  stroke-width: 1.5;
  opacity: 0.72;
}
.draw2-help {
  margin: 14px 0 0;
  font-size: 0.85rem;
}
.draw2-advanced-boundaries {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding-left: 1.2rem;
  color: var(--draw2-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.draw2-runtime-preview-viewport {
  display: grid;
  place-items: center;
  min-height: 7rem;
  margin-top: 14px;
  padding: 1rem;
  border: 1px solid var(--draw2-border);
  border-radius: 12px;
  background: #0b0e14;
}
.draw2-runtime-preview-viewport canvas {
  width: min(100%, 32rem);
  height: auto;
  image-rendering: pixelated;
  border-radius: 6px;
  box-shadow: 0 0.4rem 1.2rem rgb(0 0 0 / 24%);
}
.draw2-color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.draw2-color {
  width: 44px;
  height: 44px;
  border: 3px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}
.draw2-color[aria-pressed="true"] {
  border-color: var(--draw2-focus);
}
.draw2-color.is-transparent {
  background: repeating-conic-gradient(#d9dce2 0 25%, #aab2bf 0 50%) 50% / 10px
    10px;
}
.draw2-color.is-white {
  background: #fff;
}
.draw2-color.is-red {
  background: #ff4d4d;
}
.draw2-color.is-blue {
  background: #4da6ff;
}
.draw2-contract-list {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}
.draw2-contract-list div {
  border-top: 1px solid var(--draw2-border);
  padding-top: 12px;
}
.draw2-contract-list dt {
  color: var(--draw2-muted);
  font-size: 0.75rem;
}
.draw2-contract-list dd {
  margin: 4px 0 0;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .draw2-shell {
    padding-left: 16px;
    padding-right: 16px;
  }
  .draw2-header, .draw2-workspace {
    flex-direction: column;
  }
  .draw2-badge {
    align-self: flex-start;
  }
  .draw2-status, .draw2-metrics {
    text-align: left;
  }
  .draw2-palette {
    flex-basis: auto;
  }
  .draw2-controls > * {
    flex: 1 1 100%;
  }
  .draw2-controls input, .draw2-controls select, .draw2-button {
    width: 100%;
  }
  .draw2-transform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .draw2-action-row .draw2-button {
    flex: 1 1 calc(50% - 8px);
  }
  .draw2-timeline-viewport {
    max-height: 260px;
  }
  .draw2-timeline-row-label {
    width: 116px;
  }
  .draw2-timeline-cell {
    width: 42px;
  }
}

/* Audio workstation visual controls: the data model remains unchanged, but
   every high-frequency control now communicates its role at a glance. */
.draw2-audio-editor-tab {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 5px;
  padding: 4px 8px;
  text-align: left;
}
.draw2-audio-editor-icon {
  display: grid;
  grid-row: 1 / -1;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid color-mix(in srgb, #c88bff 46%, var(--draw2-border));
  border-radius: 5px;
  background: color-mix(in srgb, #c88bff 16%, #101725);
  color: #f0ddff;
  font-size: 0.9rem;
  line-height: 1;
}
.draw2-audio-editor-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-editor-tab small {
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.44rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-editor-tab.is-active .draw2-audio-editor-icon {
  border-color: #e3b8ff;
  background: color-mix(in srgb, #c88bff 40%, #171e2b);
  box-shadow: 0 0 12px rgb(200 139 255 / 20%);
}

.draw2-audio-track-lane-label {
  position: relative;
  overflow: hidden;
}
.draw2-audio-track-icon {
  display: grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 15%, transparent);
  color: #d6c2ff;
  font-size: 0.72rem;
  line-height: 1;
}
.draw2-audio-track-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-track-lane-label[data-audio-track-kind="MUSIC"],
.draw2-audio-track-lane-label[data-audio-track-kind="BGM"] {
  color: #d8b3ff;
}
.draw2-audio-track-lane-label[data-audio-track-kind="EFFECT"],
.draw2-audio-track-lane-label[data-audio-track-kind="SFX"] {
  color: #ffc07d;
}
.draw2-audio-track-lane-label[data-audio-track-kind="VOICE"] {
  color: #92e6c5;
}
.draw2-audio-track-lane-label[data-audio-track-kind="MIDI"] {
  color: #e5ccff;
}
.draw2-audio-track-lane-cell.is-waveform {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, #9ec8ff 38%, var(--draw2-border-subtle));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #5c92dd 31%, var(--draw2-surface-raised)),
    color-mix(in srgb, #294d82 22%, var(--draw2-surface-raised))
  );
  color: transparent;
}
.draw2-audio-track-lane-cell.is-waveform::before {
  position: absolute;
  inset: 24% 5%;
  content: "";
  border-top: 1px solid rgb(225 239 255 / 54%);
  border-bottom: 1px solid rgb(225 239 255 / 32%);
  background: repeating-linear-gradient(
    90deg,
    rgb(214 235 255 / 68%) 0 1px,
    transparent 1px 4px,
    rgb(214 235 255 / 42%) 4px 6px,
    transparent 6px 9px
  );
  opacity: 0.9;
  transform: skewY(-4deg);
}
.draw2-audio-track-lane-cell.is-waveform:hover::before,
.draw2-audio-track-lane-cell.is-waveform:focus-visible::before {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgb(182 217 255 / 54%));
}
.draw2-audio-instrument-lane
  .draw2-audio-track-lane-cell.is-note-continued::after {
  position: absolute;
  right: -1px;
  left: -1px;
  height: 5px;
  content: "";
  border-top: 2px solid color-mix(in srgb, #d8b3ff 78%, transparent);
  background: color-mix(in srgb, #c88bff 38%, transparent);
}

.draw2-audio-control-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.draw2-audio-control-heading output {
  color: var(--draw2-text-strong);
  font-variant-numeric: tabular-nums;
}
.draw2-audio-knob-field {
  position: relative;
  min-height: 86px;
}
.draw2-audio-knob {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  margin: 1px auto 0;
  border: 1px solid #455775;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, #2b3850 0 38%, transparent 39%),
    conic-gradient(
    from 225deg,
    #c88bff 0 25%,
    #5f7192 25% 75%,
    #27364d 75% 100%
  );
  box-shadow: inset 0 0 0 4px #121a27, 0 5px 12px rgb(0 0 0 / 24%);
  transform: rotate(0deg);
}
.draw2-audio-knob::before {
  position: absolute;
  inset: 8px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  content: "";
}
.draw2-audio-knob i {
  position: absolute;
  top: 7px;
  left: calc(50% - 1px);
  width: 2px;
  height: 19px;
  border-radius: 999px;
  background: #f5eaff;
  box-shadow: 0 0 5px rgb(240 221 255 / 65%);
  transform: rotate(var(--draw2-knob-angle, -135deg));
  transform-origin: 50% 22px;
}
.draw2-audio-knob-input {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100% !important;
  height: 58px;
  margin: 0;
  opacity: 0;
  cursor: grab;
}
.draw2-audio-knob-input:active {
  cursor: grabbing;
}
.draw2-audio-knob-field:focus-within .draw2-audio-knob {
  border-color: #e3b8ff;
  box-shadow: inset 0 0 0 4px #121a27, 0 0 0 2px rgb(200 139 255 / 30%);
}

.draw2-audio-browser-tree button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid transparent;
}
.draw2-audio-browser-tree button:hover,
.draw2-audio-browser-tree button:focus-visible {
  border-color: color-mix(in srgb, #c88bff 40%, var(--draw2-border));
}
.draw2-audio-browser-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 4px;
  background: color-mix(in srgb, #7aa7ff 20%, #111a2a);
  color: #cfe1ff;
  font-size: 0.8rem;
}
.draw2-audio-browser-tree button small {
  color: var(--draw2-text-muted);
  font-size: 0.44rem;
  letter-spacing: 0.06em;
}
.draw2-audio-browser-tree button.is-active {
  border-color: #c88bff;
  background: color-mix(in srgb, #c88bff 18%, #111a2a);
  color: #f0ddff;
}
.draw2-audio-browser-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  padding: 4px 6px;
  border: 1px solid #2a3850;
  border-radius: 5px;
  background: #182235;
  color: var(--draw2-text-strong);
  text-align: left;
  cursor: pointer;
  font-size: 0.62rem;
}
.draw2-audio-browser-item:hover,
.draw2-audio-browser-item:focus-visible {
  border-color: #c88bff;
}
.draw2-audio-browser-item small {
  color: var(--draw2-text-muted);
  font-size: 0.44rem;
}
.draw2-audio-fx-chain li,
.draw2-audio-right-list li[data-audio-fx-item] {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) repeat(4, 24px);
  gap: 4px;
  justify-content: initial;
  padding: 3px 5px;
}
.draw2-audio-fx-chain li.is-bypassed,
.draw2-audio-right-list li.is-bypassed {
  opacity: 0.48;
}
.draw2-audio-fx-action,
.draw2-audio-fx-add {
  min-width: 22px;
  min-height: 22px;
  padding: 0 4px;
  border: 1px solid #34425b;
  border-radius: 4px;
  background: #111a2a;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.58rem;
}
.draw2-audio-fx-action:hover,
.draw2-audio-fx-action:focus-visible,
.draw2-audio-fx-add:hover,
.draw2-audio-fx-add:focus-visible {
  border-color: #c88bff;
  color: #f0ddff;
}
.draw2-audio-fx-action:disabled {
  cursor: default;
  opacity: 0.3;
}
.draw2-audio-fx-params {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 7px;
  padding: 3px 2px 1px;
}
.draw2-audio-eq-editor {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(180px, 1.2fr) minmax(240px, 2fr);
  grid-template-rows: minmax(82px, auto) auto;
  gap: 7px 10px;
  align-items: stretch;
  padding: 6px 2px 2px;
}
.draw2-audio-eq-graph {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 82px;
  overflow: visible;
  border: 1px solid #344661;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgb(97 217 255 / 8%), transparent 52%),
    #0b1422;
}
.draw2-audio-eq-graph line {
  stroke: rgb(149 173 208 / 16%);
  stroke-width: 0.55;
}
.draw2-audio-eq-graph line.is-zero {
  stroke: rgb(200 139 255 / 46%);
  stroke-width: 0.85;
}
.draw2-audio-eq-graph path {
  fill: none;
  stroke: #61d9ff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 3px rgb(97 217 255 / 60%));
}
.draw2-audio-eq-bands {
  display: grid;
  grid-template-columns: repeat(8, minmax(22px, 1fr));
  grid-column: 2;
  grid-row: 1 / span 2;
  gap: 4px;
  min-width: 0;
  min-height: 108px;
  padding: 3px 4px 2px;
  border: 1px solid #2d3d58;
  border-radius: 5px;
  background: rgb(8 15 27 / 58%);
}
.draw2-audio-eq-band {
  display: grid;
  grid-template-rows: auto minmax(52px, 1fr) auto;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  color: var(--draw2-text-muted);
  font-size: 0.44rem;
  font-variant-numeric: tabular-nums;
}
.draw2-audio-eq-band output {
  color: #e6f6ff;
  font: 0.42rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.draw2-audio-eq-band input {
  width: 10px;
  height: 100%;
  min-height: 54px;
  margin: 0;
  accent-color: #61d9ff;
  cursor: ns-resize;
  writing-mode: vertical-lr;
  direction: rtl;
}
.draw2-audio-eq-advanced {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  min-width: 0;
}
.draw2-audio-eq-advanced .draw2-audio-fx-param {
  font-size: 0.5rem;
}
.draw2-audio-right-list .draw2-audio-eq-editor {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
}
.draw2-audio-right-list .draw2-audio-eq-bands {
  grid-column: 1;
  grid-row: 2;
}
.draw2-audio-right-list .draw2-audio-eq-advanced {
  grid-column: 1;
  grid-row: 3;
}
.draw2-audio-fx-param {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 4px;
  color: var(--draw2-text-muted);
  font-size: 0.45rem;
}
.draw2-audio-fx-param output {
  color: var(--draw2-text-strong);
  font: 0.45rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-fx-param input {
  grid-column: 1 / -1;
  width: 100%;
  height: 3px;
  accent-color: #c88bff;
}
.draw2-audio-fx-add {
  display: inline-flex;
  width: auto;
  margin: 3px 3px 0 0;
  align-items: center;
}
.draw2-audio-fx-empty {
  color: var(--draw2-text-muted) !important;
  font-size: 0.58rem !important;
}
#draw2AudioRightMaster {
  padding-bottom: 18px;
}
#draw2AudioRightMaster .draw2-audio-master-readouts {
  margin-block: 6px 8px;
}
#draw2AudioRightMaster .draw2-audio-right-section {
  gap: 4px;
}
#draw2AudioRightMaster .draw2-audio-right-list li {
  min-height: 24px;
}

.draw2-audio-master-meter {
  grid-template-columns:
    minmax(24px, 1fr) minmax(24px, 1fr) 32px minmax(92px, 1fr);
  min-height: 98px;
}
.draw2-audio-meter-channel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: end;
  gap: 3px;
  min-height: 98px;
}
.draw2-audio-meter-channel > b {
  color: var(--draw2-text-muted);
  font-size: 0.46rem;
  text-align: center;
}
.draw2-audio-master-meter .draw2-audio-meter-bar {
  height: 88px;
}
.draw2-audio-meter-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 88px;
  color: var(--draw2-text-muted);
  font: 0.42rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-meter-scale i {
  font-style: normal;
}
.draw2-audio-mixer-row input[type="range"] {
  appearance: none;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c88bff 0 50%, #26364f 50%);
}
.draw2-audio-mixer-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border: 2px solid #f0ddff;
  border-radius: 50%;
  background: #8b5bc0;
}
.draw2-audio-mixer-control {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 32px;
  align-items: center;
  gap: 0 4px;
  min-width: 70px;
  min-height: 42px;
  color: var(--draw2-text-muted);
  font-size: 0.46rem;
  letter-spacing: 0.04em;
}
.draw2-audio-mixer-control > output {
  color: var(--draw2-text-strong);
  font: 0.48rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}
.draw2-audio-mixer-control .draw2-audio-knob {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  box-shadow: inset 0 0 0 3px #121a27, 0 3px 8px rgb(0 0 0 / 24%);
}
.draw2-audio-mixer-control .draw2-audio-knob::before {
  inset: 5px;
}
.draw2-audio-mixer-control .draw2-audio-knob i {
  top: 4px;
  height: 10px;
  transform-origin: 50% 12px;
}
.draw2-audio-mixer-control input[type="range"] {
  position: absolute;
  z-index: 2;
  inset: 17px 0 0;
  width: 100%;
  height: 30px;
  min-width: 0;
  opacity: 0;
  cursor: grab;
}
.draw2-audio-mixer-control input[type="range"]:active {
  cursor: grabbing;
}
.draw2-audio-mixer-control:focus-within .draw2-audio-knob {
  border-color: #e3b8ff;
  box-shadow: inset 0 0 0 3px #121a27, 0 0 0 2px rgb(200 139 255 / 25%);
}

@media (max-width: 700px) {
  .draw2-audio-editor-tab {
    flex-basis: 78px;
    min-width: 78px;
    padding-inline: 6px;
  }
  .draw2-audio-editor-icon {
    width: 19px;
    height: 19px;
  }
  .draw2-audio-knob {
    width: 50px;
    height: 50px;
  }
  .draw2-audio-knob i {
    height: 16px;
    transform-origin: 50% 19px;
  }
  .draw2-audio-knob-input {
    height: 50px;
  }
  .draw2-audio-master-meter {
    grid-template-columns:
      minmax(22px, 1fr) minmax(22px, 1fr) 28px minmax(74px, 1fr);
    padding: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw2-audio-knob,
  .draw2-audio-track-lane-cell.is-waveform::before {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* WP-190 deterministic populated Workspace fixture; local audit surface only. */
.draw2-workspace-frame[data-integration-fixture="populated"]
  .draw2-workspace-status::after {
  content: " · POPULATED FIXTURE";
  color: var(--draw2-accent-strong);
}
.wp190-layer-fixture-list {
  display: grid;
  gap: var(--draw2-space-1);
  margin: var(--draw2-space-3) 0 0;
  padding: 0;
  list-style: none;
}
.wp190-layer-fixture-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--draw2-space-2);
  padding: var(--draw2-space-2);
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
  font-size: 0.72rem;
}
.wp190-layer-fixture-list li span {
  color: var(--draw2-text-muted);
  font-size: 0.64rem;
  text-align: right;
}
.draw2-workspace-frame[data-integration-fixture="populated"]
  #draw2WorkspaceCanvasSlot
  .draw2-canvas-card {
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--draw2-accent-strong) 24%, transparent);
}
.draw2-workspace-frame[data-integration-fixture="populated"]
  #draw2WorkspacePanelLayers
  .draw2-panel-summary
  > p {
  color: var(--draw2-accent-strong);
}

/* WP-180 Professional Workspace: semantic tokens are the authority for the
   new shell. Canonical pixel colors stay in the renderer and are not themed. */
:root {
  --draw2-space-1: 4px;
  --draw2-space-2: 8px;
  --draw2-space-3: 12px;
  --draw2-space-4: 16px;
  --draw2-space-5: 20px;
  --draw2-space-6: 24px;
  --draw2-radius-sm: 6px;
  --draw2-radius-md: 10px;
  --draw2-radius-lg: 14px;
  --draw2-surface-canvas: #0b0e14;
  --draw2-surface-input: #222a38;
  --draw2-text-strong: #f7f9fc;
  --draw2-text-muted: #a9b4c4;
  --draw2-border-subtle: #374356;
  --draw2-border-strong: #53627a;
  --draw2-accent-strong: #8ae3d2;
  --draw2-focus-ring: #f8d477;
  --draw2-selection: #365e8a;
  --draw2-danger-strong: #ff9e9e;
  --draw2-warning-strong: #ffd58b;
  --draw2-shadow-panel: 0 18px 48px rgb(0 0 0 / 35%);
  --draw2-canvas-checker-a: #d9dce2;
  --draw2-canvas-checker-b: #b4bac5;
  --draw2-checker-cell-size: 16px;
  --draw2-grid-pixel-step: 2px;
  --draw2-grid-major-step: 16px;
  --draw2-grid-minor: rgb(27 49 71 / 72%);
  --draw2-grid-major: rgb(13 126 147 / 96%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --draw2-bg: #eef1f5;
  --draw2-surface: #ffffff;
  --draw2-surface-raised: #f7f9fb;
  --draw2-text: #18202b;
  --draw2-muted: #526174;
  --draw2-border: #cbd4df;
  --draw2-surface-input: #ffffff;
  --draw2-text-strong: #18202b;
  --draw2-text-muted: #526174;
  --draw2-border-subtle: #cbd4df;
  --draw2-border-strong: #7a8ba0;
  --draw2-shadow-panel: 0 18px 48px rgb(38 54 72 / 18%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --draw2-bg: #eef1f5;
    --draw2-surface: #ffffff;
    --draw2-surface-raised: #f7f9fb;
    --draw2-text: #18202b;
    --draw2-muted: #526174;
    --draw2-border: #cbd4df;
    --draw2-surface-input: #ffffff;
    --draw2-text-strong: #18202b;
    --draw2-text-muted: #526174;
    --draw2-border-subtle: #cbd4df;
    --draw2-border-strong: #7a8ba0;
    --draw2-shadow-panel: 0 18px 48px rgb(38 54 72 / 18%);
  }
}

html, body {
  overflow-x: hidden;
}
.draw2-shell:has(#draw2WorkspaceFrame) {
  width: min(1600px, 100%);
  padding-inline: var(--draw2-space-4);
}
.draw2-workspace-frame {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(260px, 320px);
  grid-template-rows: auto minmax(430px, 1fr) minmax(180px, auto);
  grid-template-areas:
    "top top top" "left canvas right" "timeline timeline timeline";
  min-height: min(1120px, calc(100dvh - 42px));
  margin: 0 calc(var(--draw2-space-2) * -1) var(--draw2-space-4);
  overflow: hidden;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-lg);
  background: var(--draw2-bg);
  box-shadow: var(--draw2-shadow-panel);
}
.draw2-workspace-frame[hidden], .draw2-workspace-frame [hidden] {
  display: none !important;
}
.draw2-workspace-topbar {
  grid-area: top;
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--draw2-space-3);
  min-width: 0;
  padding: var(--draw2-space-2) var(--draw2-space-3);
  border-bottom: 1px solid var(--draw2-border-subtle);
  background: var(--draw2-surface);
}
.draw2-workspace-brand {
  display: grid;
  gap: var(--draw2-space-1);
  min-width: 0;
}
.draw2-workspace-brand strong {
  font-size: 0.94rem;
  letter-spacing: 0.02em;
}
.draw2-workspace-status {
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draw2-workspace-project-slot {
  min-width: 0;
  overflow: hidden;
}
#draw2WorkspaceProjectSlot > #draw2ProjectCard {
  display: block;
  margin: 0;
  padding: var(--draw2-space-2);
  border: 0;
  border-radius: var(--draw2-radius-sm);
  background: transparent;
}
#draw2WorkspaceProjectSlot #draw2ProjectHeading,
#draw2WorkspaceProjectSlot .draw2-help {
  display: none;
}
#draw2WorkspaceProjectSlot > #draw2ProjectCard > .draw2-card-heading {
  display: none;
}
#draw2WorkspaceProjectSlot > #draw2ProjectCard {
  padding: 0;
}
#draw2WorkspaceProjectSlot .draw2-controls {
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--draw2-space-2);
  margin: 0;
}
#draw2WorkspaceProjectSlot .draw2-controls label {
  min-width: 0;
}
#draw2WorkspaceProjectSlot .draw2-controls input,
#draw2WorkspaceProjectSlot .draw2-controls select {
  min-width: 110px;
  width: 100%;
  min-height: 34px;
  padding: 0 var(--draw2-space-2);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
}
#draw2WorkspaceProjectSlot .draw2-controls label:nth-child(2) {
  display: none;
}
#draw2WorkspaceProjectSlot .draw2-action-row {
  display: none;
}
.draw2-workspace-command-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--draw2-space-1);
  min-width: 0;
}
.draw2-icon-button,
.draw2-tool-button,
.draw2-panel-launcher,
.draw2-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--draw2-space-1);
  min-width: 38px;
  min-height: 36px;
  padding: var(--draw2-space-1) var(--draw2-space-2);
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
  cursor: pointer;
}
.draw2-icon-button span, .draw2-tool-button span, .draw2-panel-launcher span {
  font-size: 0.64rem;
}
.draw2-icon-button:hover,
.draw2-tool-button:hover,
.draw2-panel-launcher:hover,
.draw2-panel-close:hover {
  border-color: var(--draw2-border-strong);
}
.draw2-icon-button-danger {
  color: var(--draw2-danger-strong);
}
.draw2-icon-button:focus-visible,
.draw2-tool-button:focus-visible,
.draw2-panel-launcher:focus-visible,
.draw2-panel-close:focus-visible,
.draw2-workspace-tab:focus-visible,
.draw2-theme-control select:focus-visible,
.draw2-language-control select:focus-visible,
.draw2-command-list button:focus-visible {
  outline: 2px solid var(--draw2-focus-ring);
  outline-offset: 2px;
}
.draw2-theme-control {
  display: grid;
  gap: var(--draw2-space-1);
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
}
.draw2-theme-control select {
  min-height: 30px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
}
.draw2-language-control {
  display: grid;
  gap: var(--draw2-space-1);
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
}
.draw2-language-control select {
  min-height: 30px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
}
.draw2-workspace-left-dock {
  grid-area: left;
  display: flex;
  flex-direction: column;
  gap: var(--draw2-space-3);
  min-width: 0;
  padding: var(--draw2-space-2);
  border-right: 1px solid var(--draw2-border-subtle);
  background: var(--draw2-surface);
}
.draw2-workspace-toolbar, .draw2-workspace-panel-launcher {
  display: grid;
  gap: var(--draw2-space-1);
}
.draw2-tool-button, .draw2-panel-launcher {
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: var(--draw2-space-2) var(--draw2-space-1);
  font-size: 1rem;
}
.draw2-tool-button.is-active, .draw2-panel-launcher.is-active {
  border-color: var(--draw2-accent-strong);
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 16%,
    var(--draw2-surface-raised)
  );
}
.draw2-workspace-canvas-region {
  position: relative;
  grid-area: canvas;
  min-width: 0;
  min-height: 0;
  padding: var(--draw2-space-3);
  background: var(--draw2-surface-canvas);
}
#draw2WorkspaceCanvasSlot, #draw2WorkspaceCanvasSlot > .draw2-canvas-card {
  height: 100%;
  min-height: 0;
}
#draw2WorkspaceCanvasSlot > .draw2-canvas-card {
  display: flex;
  flex-direction: column;
  padding: var(--draw2-space-3);
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-md);
}
#draw2WorkspaceCanvasSlot .draw2-viewport-wrap {
  flex: 1 1 auto;
  min-height: 260px;
  margin-top: var(--draw2-space-3);
}
.draw2-workspace-right-dock {
  grid-area: right;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--draw2-border-subtle);
  background: var(--draw2-surface);
}
.draw2-workspace-right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--draw2-space-2);
  padding: var(--draw2-space-2) var(--draw2-space-3);
  border-bottom: 1px solid var(--draw2-border-subtle);
}
.draw2-panel-close {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  font-size: 1.1rem;
}
.draw2-workspace-tabs {
  display: flex;
  gap: var(--draw2-space-1);
  min-width: 0;
  padding: var(--draw2-space-2);
  overflow-x: auto;
  border-bottom: 1px solid var(--draw2-border-subtle);
  scrollbar-width: thin;
}
.draw2-workspace-tab {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 var(--draw2-space-2);
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  background: transparent;
  color: var(--draw2-text-muted);
  cursor: pointer;
}
.draw2-workspace-tab.is-active {
  border-color: var(--draw2-border-strong);
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
}
.draw2-workspace-panel {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--draw2-space-3);
  touch-action: pan-y;
}
.draw2-workspace-panel > .draw2-card, .draw2-workspace-panel > .draw2-palette {
  margin: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.draw2-panel-summary, .draw2-unavailable-state {
  display: grid;
  gap: var(--draw2-space-2);
  padding: var(--draw2-space-2);
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
}
.draw2-panel-summary strong, .draw2-unavailable-state strong {
  font-size: 0.86rem;
}
.draw2-panel-summary p, .draw2-unavailable-state p {
  margin: 0;
  color: var(--draw2-text-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}
.draw2-workspace-timeline-region {
  grid-area: timeline;
  min-width: 0;
  min-height: 0;
  padding: var(--draw2-space-2) var(--draw2-space-3) var(--draw2-space-3);
  border-top: 1px solid var(--draw2-border-subtle);
  background: var(--draw2-surface);
}
.draw2-workspace-timeline-heading {
  display: flex;
  align-items: center;
  gap: var(--draw2-space-2);
  min-width: 0;
  margin-bottom: var(--draw2-space-2);
}
.draw2-workspace-timeline-heading strong {
  font-size: 0.78rem;
}
.draw2-workspace-local-badge {
  margin-left: auto;
  color: var(--draw2-text-muted);
  font-size: 0.65rem;
}
#draw2WorkspaceTimelineSlot > .draw2-timeline-card {
  max-height: 270px;
  margin: 0;
  padding: var(--draw2-space-2);
  overflow: auto;
  border-radius: var(--draw2-radius-md);
}
#draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
  max-height: 190px;
  margin-top: var(--draw2-space-2);
}
.draw2-workspace-rollback-notice {
  grid-area: canvas;
  align-self: start;
  justify-self: center;
  z-index: 2;
  margin: var(--draw2-space-3);
  padding: var(--draw2-space-2) var(--draw2-space-3);
  border: 1px solid var(--draw2-warning-strong);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
  color: var(--draw2-warning-strong);
  font-size: 0.78rem;
}
@media (min-width: 1120px) {
  #draw2WorkspaceProjectSlot .draw2-controls {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(68px, 84px) auto;
    align-items: end;
  }
  #draw2WorkspaceProjectSlot .draw2-controls label {
    display: grid;
    min-width: 0;
    gap: var(--draw2-space-1);
  }
  #draw2WorkspaceProjectSlot .draw2-controls label:nth-child(2) {
    display: none;
  }
  #draw2WorkspaceProjectSlot .draw2-controls label:nth-child(3) {
    display: none;
  }
  #draw2WorkspaceProjectSlot .draw2-controls input,
  #draw2WorkspaceProjectSlot .draw2-controls select {
    min-width: 0;
    box-sizing: border-box;
  }
  #draw2WorkspaceProjectSlot #draw2CreateProject {
    min-width: 100px;
    padding-inline: var(--draw2-space-1);
    font-size: 0.7rem;
    white-space: nowrap;
  }
}
.draw2-command-palette {
  width: min(480px, calc(100vw - var(--draw2-space-6)));
  padding: 0;
  border: 1px solid var(--draw2-border-strong);
  border-radius: var(--draw2-radius-md);
  background: var(--draw2-surface);
  color: var(--draw2-text);
  box-shadow: var(--draw2-shadow-panel);
}
.draw2-command-palette::backdrop {
  background: rgb(0 0 0 / 55%);
}
.draw2-command-palette form {
  display: grid;
  gap: var(--draw2-space-3);
  padding: var(--draw2-space-4);
}
.draw2-command-palette-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--draw2-space-3);
}
.draw2-command-palette h2 {
  margin: 0;
  font-size: 1.05rem;
}
.draw2-command-search {
  display: grid;
  gap: var(--draw2-space-1);
  color: var(--draw2-text-muted);
  font-size: 0.74rem;
}
.draw2-command-search input {
  min-height: 38px;
  padding: 0 var(--draw2-space-2);
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
}
.draw2-command-list {
  display: grid;
  gap: var(--draw2-space-1);
  max-height: 300px;
  overflow: auto;
}
.draw2-command-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--draw2-space-3);
  min-height: 38px;
  padding: 0 var(--draw2-space-2);
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  background: transparent;
  color: var(--draw2-text-strong);
  text-align: left;
  cursor: pointer;
}
.draw2-command-list button:hover {
  border-color: var(--draw2-border-subtle);
  background: var(--draw2-surface-raised);
}
.draw2-command-list kbd {
  color: var(--draw2-text-muted);
  font-size: 0.7rem;
}
.draw2-zoom-readout {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  min-height: 32px;
  padding-inline: var(--draw2-space-2);
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  color: var(--draw2-text-strong);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.draw2-settings-grid {
  display: grid;
  gap: var(--draw2-space-3);
}
.draw2-settings-grid label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--draw2-space-3);
  color: var(--draw2-text-muted);
  font-size: 0.78rem;
}
.draw2-settings-grid input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--draw2-accent-strong);
}
.draw2-settings-grid input[type="color"] {
  width: 42px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
}
.draw2-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--draw2-space-2);
}

@media (max-width: 1119px) and (min-width: 701px) {
  .draw2-workspace-frame {
    grid-template-columns: 52px minmax(0, 1fr) minmax(244px, 280px);
    grid-template-rows: auto minmax(380px, 1fr) minmax(136px, auto);
  }
  .draw2-workspace-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .draw2-workspace-project-slot {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .draw2-workspace-command-bar {
    grid-column: 2;
    grid-row: 1;
  }
  #draw2WorkspaceProjectSlot .draw2-controls {
    flex-wrap: wrap;
  }
  #draw2WorkspaceProjectSlot .draw2-controls > * {
    flex: 1 1 120px;
  }
  #draw2WorkspaceTimelineSlot > .draw2-timeline-card {
    max-height: 210px;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
    max-height: 140px;
  }
  .draw2-icon-button span, .draw2-theme-control, .draw2-language-control {
    display: none;
  }
}

@media (max-width: 700px) {
  .draw2-shell:has(#draw2WorkspaceFrame) {
    padding-inline: var(--draw2-space-2);
  }
  .draw2-shell:has(#draw2WorkspaceFrame) > .draw2-header {
    display: none;
  }
  .draw2-workspace-frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(320px, 60dvh) auto auto;
    grid-template-areas: "top" "canvas" "left" "timeline";
    min-height: 0;
    margin-inline: 0;
    overflow: visible;
    border-radius: var(--draw2-radius-md);
  }
  .draw2-workspace-topbar {
    grid-template-columns: 1fr auto;
    gap: var(--draw2-space-2);
    padding: var(--draw2-space-2);
  }
  .draw2-workspace-brand {
    grid-column: 1;
  }
  .draw2-workspace-project-slot {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .draw2-workspace-command-bar {
    grid-column: 2;
    grid-row: 1;
  }
  .draw2-icon-button {
    min-width: 34px;
    padding-inline: var(--draw2-space-1);
  }
  .draw2-icon-button span {
    display: none;
  }
  .draw2-theme-control, .draw2-language-control {
    display: none;
  }
  #draw2WorkspaceProjectSlot .draw2-controls {
    flex-wrap: wrap;
  }
  #draw2WorkspaceProjectSlot .draw2-controls > * {
    flex: 1 1 100px;
  }
  #draw2WorkspaceProjectSlot .draw2-controls input,
  #draw2WorkspaceProjectSlot .draw2-controls select {
    min-width: 0;
  }
  .draw2-workspace-left-dock {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: 10;
    flex-direction: row;
    align-items: stretch;
    gap: var(--draw2-space-2);
    padding: var(--draw2-space-2);
    border-top: 1px solid var(--draw2-border-subtle);
    border-right: 0;
    overflow-x: auto;
    box-shadow: 0 -10px 24px rgb(0 0 0 / 18%);
  }
  .draw2-workspace-toolbar, .draw2-workspace-panel-launcher {
    display: flex;
    flex: 1 0 auto;
    flex-direction: row;
    gap: var(--draw2-space-1);
  }
  .draw2-tool-button, .draw2-panel-launcher {
    width: auto;
    min-width: 54px;
    min-height: 44px;
  }
  .draw2-workspace-canvas-region {
    min-height: 0;
    padding: var(--draw2-space-2);
  }
  #draw2WorkspaceCanvasSlot > .draw2-canvas-card {
    padding: var(--draw2-space-2);
  }
  #draw2WorkspaceCanvasSlot .draw2-card-heading {
    display: block;
  }
  #draw2WorkspaceCanvasSlot .draw2-metrics {
    margin-top: var(--draw2-space-1);
    text-align: left;
  }
  #draw2WorkspaceCanvasSlot .draw2-viewport-wrap {
    min-height: 220px;
    margin-top: var(--draw2-space-2);
    padding: var(--draw2-space-2);
  }
  .draw2-workspace-right-dock {
    position: fixed;
    left: var(--draw2-space-2);
    right: var(--draw2-space-2);
    bottom: calc(var(--draw2-space-2) + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    height: min(72dvh, 560px);
    border: 1px solid var(--draw2-border-strong);
    border-radius: var(--draw2-radius-md);
    box-shadow: var(--draw2-shadow-panel);
    transform: translateY(calc(100% + var(--draw2-space-6)));
    transition: transform 160ms ease;
  }
  .draw2-workspace-frame.is-mobile-sheet-open .draw2-workspace-right-dock {
    transform: translateY(0);
  }
  .draw2-workspace-right-dock:not(.is-open) {
    pointer-events: none;
  }
  .draw2-workspace-right-header {
    min-height: 44px;
  }
  .draw2-workspace-tabs {
    flex-wrap: nowrap;
  }
  .draw2-workspace-timeline-region {
    padding: var(--draw2-space-2);
  }
  #draw2WorkspaceTimelineSlot > .draw2-timeline-card {
    max-height: 240px;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
    max-height: 160px;
  }
  .draw2-workspace-local-badge {
    display: none;
  }
  .draw2-workspace-rollback-notice {
    grid-area: top;
    position: absolute;
    top: 100%;
    left: var(--draw2-space-2);
    right: var(--draw2-space-2);
    margin: var(--draw2-space-2) 0;
  }
}

/* Tool groups follow the Aseprite interaction model: the rail shows one
   current-tool button and the related tools open in a compact child menu. */
.draw2-tool-group {
  position: relative;
  flex: 0 0 var(--draw2-control-size);
  width: var(--draw2-control-size);
  height: var(--draw2-control-size);
}
.draw2-tool-group > summary {
  display: grid;
  place-items: center;
  width: var(--draw2-control-size);
  height: var(--draw2-control-size);
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  color: var(--draw2-text-muted);
  cursor: pointer;
  list-style: none;
  outline: 0;
}
.draw2-tool-group > summary::-webkit-details-marker {
  display: none;
}
.draw2-tool-group > summary:hover,
.draw2-tool-group > summary:focus-visible,
.draw2-tool-group[open] > summary,
.draw2-tool-group.is-active > summary {
  border-color: var(--draw2-border-subtle);
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
}
.draw2-tool-group.is-active > summary {
  box-shadow: inset 0 0 0 1px var(--draw2-accent-strong);
}
.draw2-tool-group-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.draw2-tool-popover {
  position: absolute;
  z-index: 40;
  top: 0;
  left: calc(100% + 4px);
  display: none;
  grid-template-columns: repeat(3, var(--draw2-control-size));
  gap: 2px;
  width: max-content;
  padding: 3px;
  border: 1px solid var(--draw2-border-strong);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface);
  box-shadow: var(--draw2-shadow-panel);
}
.draw2-tool-group[open] > .draw2-tool-popover {
  display: grid;
}
#draw2WorkspaceLeftDock .draw2-tool-popover .draw2-tool-button {
  width: var(--draw2-control-size) !important;
  min-width: var(--draw2-control-size) !important;
  height: var(--draw2-control-size) !important;
  min-height: var(--draw2-control-size) !important;
  padding: 0;
}
.draw2-tool-popover .draw2-tool-button span {
  display: none !important;
}

.draw2-mini-preview[hidden] {
  display: none !important;
}
#draw2WorkspaceCanvasSlot .draw2-viewport-wrap {
  touch-action: none;
  overscroll-behavior: contain;
}
#draw2WorkspaceCanvasSlot .draw2-canvas-stack {
  transform-origin: center center;
  /* Do not force a composited transform layer: browser compositing can soften
     a pixel canvas at fractional zoom even with image-rendering: pixelated. */
  will-change: auto;
}
#draw2WorkspaceCanvasSlot #draw2Canvas,
#draw2WorkspaceCanvasSlot #draw2Overlay {
  touch-action: none;
}
#draw2WorkspaceCanvasSlot #draw2Canvas[data-tool="pan"] {
  cursor: grab;
}
#draw2WorkspaceCanvasSlot #draw2Canvas[data-tool="pan"]:active {
  cursor: grabbing;
}

@media (max-width: 700px) {
  .draw2-tool-group {
    flex: 0 0 var(--draw2-control-size);
  }
  .draw2-workspace-toolbar {
    overflow: visible;
  }
  .draw2-tool-popover {
    top: auto;
    bottom: calc(100% + 4px);
    left: 0;
  }
  .draw2-workspace-left-dock {
    overflow: visible;
  }
}
@media (min-width: 701px) {
  /* Desktop tools live on the right rail, so their child menu opens into the
     Canvas-side space instead of beyond the viewport edge. */
  .draw2-workspace-left-dock .draw2-tool-popover {
    left: auto;
    right: calc(100% + 4px);
  }
}

/* Basic tool integration stays compact: options are a panel, not a second
   control rail, and the mini preview is a projection over the canvas region. */
.draw2-tool-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--draw2-space-2);
  padding: var(--draw2-space-2);
  border-bottom: 1px solid var(--draw2-border-subtle);
}
.draw2-tool-options label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--draw2-text-muted);
  font-size: 0.64rem;
}
.draw2-tool-options select,
.draw2-tool-options input {
  min-width: 0;
  width: 100%;
}
.draw2-tool-options output {
  color: var(--draw2-text-strong);
  font: 700 0.65rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.draw2-tool-studio {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--draw2-accent, #74d7ff) 30%, transparent);
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, #18263b 88%, transparent), color-mix(in srgb, #0c1422 94%, transparent));
  box-shadow: 0 14px 32px rgba(0, 0, 0, .22);
}
.draw2-tool-studio-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.draw2-tool-studio-header h3 { margin: 2px 0 0; font-size: 1rem; letter-spacing: .02em; }
.draw2-tool-studio-summary,
.draw2-tool-studio-status { color: color-mix(in srgb, var(--draw2-accent, #74d7ff) 78%, white); font-size: .72rem; line-height: 1.35; }
.draw2-tool-studio-summary { white-space: nowrap; }
.draw2-tool-studio-note { margin: 0; color: color-mix(in srgb, currentColor 72%, transparent); font-size: .75rem; line-height: 1.45; }
.draw2-tool-studio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
.draw2-tool-studio-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px 10px;
  color: inherit;
  text-align: left;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, #111a2a 82%, transparent);
  cursor: pointer;
}
.draw2-tool-studio-card:hover,
.draw2-tool-studio-card:focus-visible,
.draw2-tool-studio-card.is-selected { border-color: color-mix(in srgb, var(--draw2-accent, #74d7ff) 70%, transparent); background: color-mix(in srgb, var(--draw2-accent, #74d7ff) 12%, #111a2a); outline: none; }
.draw2-tool-studio-card strong,
.draw2-tool-studio-card small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draw2-tool-studio-card strong { font-size: .76rem; }
.draw2-tool-studio-card small { margin-top: 2px; color: color-mix(in srgb, currentColor 62%, transparent); font-size: .65rem; }
.draw2-tool-studio-glyph { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--draw2-accent, #74d7ff); background: color-mix(in srgb, var(--draw2-accent, #74d7ff) 13%, transparent); font-size: .7rem; font-weight: 800; }
.draw2-tool-studio-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.draw2-tool-studio-options label { display: grid; gap: 5px; color: color-mix(in srgb, currentColor 72%, transparent); font-size: .7rem; }
.draw2-tool-studio-options select,
.draw2-tool-studio-options input { width: 100%; min-width: 0; }
.draw2-tool-studio-options output { justify-self: end; margin-top: -22px; margin-right: 5px; font-variant-numeric: tabular-nums; }
.draw2-tool-studio-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.draw2-tool-studio-actions .draw2-button { min-height: 36px; }
.draw2-tool-studio-status { margin: 0; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, #000 20%, transparent); }
@media (min-width: 701px) {
  /* Keep the contextual tool surface immediately available in the advanced
   * dock. The heavier legacy advanced card remains below it and can scroll
   * independently without mounting another editor surface. */
  #draw2WorkspacePanelAdvanced:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #draw2WorkspacePanelAdvanced > #draw2ToolStudio { order: 1; }
  #draw2WorkspacePanelAdvanced > #draw2WorkspaceAdvancedSlot { order: 2; }
}
@media (max-width: 700px) {
  .draw2-tool-studio { padding: 10px; border-radius: 12px; }
  .draw2-tool-studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .draw2-tool-studio-card { grid-template-columns: 30px minmax(0, 1fr); padding: 7px; }
  .draw2-tool-studio-glyph { width: 28px; height: 28px; }
  .draw2-tool-studio-header { display: grid; }
  .draw2-tool-studio-summary { white-space: normal; }
}
.draw2-tool-presets,
.draw2-selection-morphology {
  display: flex;
  align-items: center;
  gap: var(--draw2-space-1);
  min-width: 0;
}
.draw2-tool-presets {
  grid-column: 1 / -1;
}
.draw2-tool-presets select,
.draw2-tool-presets input {
  min-width: 0;
  flex: 1 1 auto;
}
.draw2-tool-presets .draw2-button,
.draw2-selection-morphology .draw2-button {
  flex: 0 0 32px;
  min-height: 32px;
  padding: 0;
}
.draw2-selection-morphology {
  grid-column: 1 / -1;
  justify-content: flex-start;
}
.draw2-mini-preview {
  position: absolute;
  z-index: 4;
  top: var(--draw2-space-2);
  right: var(--draw2-space-2);
  width: 104px;
  height: 104px;
  padding: 3px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface);
  box-shadow: var(--draw2-shadow-panel);
  pointer-events: none;
}
.draw2-mini-preview canvas {
  display: block;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
}
.draw2-workspace-toolbar {
  overflow-y: auto;
  scrollbar-width: thin;
}
.draw2-workspace-toolbar .draw2-tool-button {
  flex: 0 0 var(--draw2-control-size);
}
.draw2-layers-toolbar {
  display: flex;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--draw2-border-subtle);
}
.draw2-layers-toolbar .draw2-button {
  width: var(--draw2-control-size);
  min-width: var(--draw2-control-size);
  padding-inline: 0;
}
.draw2-layer-list {
  display: grid;
  gap: 2px;
  min-height: 0;
  padding: 4px;
  overflow: auto;
}
.draw2-layer-row {
  display: grid;
  grid-template-columns: 30px 30px minmax(0, 1fr) 30px 76px;
  align-items: center;
  gap: 3px;
  min-height: 36px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
}
.draw2-layer-row.is-active {
  border-color: var(--draw2-focus-ring);
  background: var(--draw2-surface-raised);
}
.draw2-layer-row > button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  background: transparent;
  color: var(--draw2-text-muted);
}
.draw2-layer-row > button:hover, .draw2-layer-row > button:focus-visible {
  border-color: var(--draw2-border-subtle);
  color: var(--draw2-text-strong);
}
.draw2-layer-select {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.draw2-layer-blend {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0 2px;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface);
  color: var(--draw2-text);
  font-size: 0.7rem;
  text-align: center;
}
.draw2-layer-opacity {
  min-width: 0;
  width: 100%;
}
.draw2-timeline-rate,
.draw2-timeline-loop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--draw2-control-size);
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
}
.draw2-timeline-rate select {
  width: 48px;
  height: var(--draw2-control-size);
  padding-inline: 3px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface);
  color: var(--draw2-text);
}
.draw2-timeline-loop input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--draw2-accent-strong);
}
@media (max-width: 700px) {
  .draw2-tool-options {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }
  .draw2-mini-preview {
    top: 6px;
    right: 6px;
    transform: scale(0.8);
    transform-origin: top right;
  }
  .draw2-workspace-toolbar {
    overflow-y: hidden;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw2-workspace-right-dock {
    transition: none;
  }
}

/* Creator metadata stays a bounded projection beside the virtual timeline.
   These controls do not materialize cels or write canonical raster state. */
.draw2-timeline-creator-tools {
  display: grid;
  grid-template-columns:
    minmax(180px, 1fr) minmax(180px, 1fr) minmax(150px, 0.7fr);
  gap: var(--draw2-space-2);
  margin-top: var(--draw2-space-2);
  padding: var(--draw2-space-2);
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, var(--draw2-surface-raised) 72%, transparent);
}
.draw2-timeline-creator-group {
  min-width: 0;
}
.draw2-timeline-creator-group > strong {
  display: block;
  margin-bottom: var(--draw2-space-1);
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.draw2-timeline-creator-form {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.draw2-timeline-creator-form input,
.draw2-timeline-creator-form select {
  min-width: 0;
  width: 100%;
  height: 28px;
  padding-inline: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text);
  font-size: 0.68rem;
}
.draw2-timeline-creator-form input[type="number"] {
  width: 48px;
  flex: 0 0 48px;
}
.draw2-timeline-creator-form .draw2-button {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
}
.draw2-timeline-creator-check {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--draw2-text-muted);
}
.draw2-timeline-creator-check input {
  width: 14px;
  height: 14px;
}
.draw2-creator-meta-list {
  display: grid;
  gap: 2px;
  min-height: 20px;
  max-height: 48px;
  margin-top: 3px;
  overflow: auto;
}
.draw2-creator-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  min-height: 22px;
  color: var(--draw2-text);
  font-size: 0.64rem;
}
.draw2-creator-meta-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-creator-meta-row .draw2-button {
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
}
.draw2-creator-meta-empty {
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
}
.draw2-timeline-linked-cel .draw2-timeline-creator-form {
  min-height: 28px;
}
.draw2-timeline-linked-cel .draw2-timeline-creator-form .draw2-button {
  width: auto;
  min-width: 76px;
  padding-inline: 6px;
}
.draw2-export-panel {
  display: grid;
  gap: var(--draw2-space-2);
}
.draw2-export-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--draw2-space-1);
}
.draw2-export-grid .draw2-button {
  min-width: 0;
  padding-inline: 4px;
}
.draw2-export-status {
  margin: 0;
  color: var(--draw2-text-strong);
  font-size: 0.68rem;
  overflow-wrap: anywhere;
}
.draw2-export-status[data-state="error"] {
  color: var(--draw2-danger-strong);
}
.draw2-export-note {
  margin: 0;
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
  line-height: 1.4;
}

/* Aseprite-style options rail: high-frequency brush context stays visible
   without adding controls to the Canvas projection. */
.draw2-workspace-quick-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
}
.draw2-workspace-quick-controls::-webkit-scrollbar {
  display: none;
}
.draw2-quick-control {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  min-width: 0;
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
  white-space: nowrap;
}
.draw2-quick-control span {
  opacity: 0.72;
}
.draw2-quick-control select {
  width: 58px;
  min-width: 0;
  min-height: 28px;
  padding: 0 4px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font-size: 0.66rem;
  text-align: center;
  touch-action: none;
}
.draw2-quick-control-size select {
  width: 58px;
}
.draw2-quick-control:nth-child(2) select {
  width: 42px;
  font-size: 0.82rem;
}
.draw2-quick-control:nth-child(3) select {
  width: 68px;
}
.draw2-quick-control:nth-child(4) select {
  width: 46px;
}

@media (min-width: 701px) {
  .draw2-workspace-topbar {
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) auto;
    grid-template-rows: 30px 34px;
  }
  .draw2-workspace-project-slot {
    grid-column: 1;
    grid-row: 2;
  }
  .draw2-workspace-quick-controls {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
  }
  .draw2-workspace-command-bar {
    grid-column: 3;
    grid-row: 2;
  }
}
@media (max-width: 700px) {
  .draw2-workspace-topbar {
    grid-template-rows: 30px 34px 34px 34px;
  }
  .draw2-workspace-quick-controls {
    grid-column: 1;
    grid-row: 4;
    justify-content: flex-start;
    min-height: 32px;
  }
  .draw2-quick-control {
    font-size: 0.56rem;
  }
  .draw2-quick-control select {
    min-height: 30px;
  }
}

@media (max-width: 900px) {
  .draw2-timeline-creator-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .draw2-timeline-linked-cel {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .draw2-timeline-creator-tools {
    grid-template-columns: minmax(0, 1fr);
    max-height: 132px;
    overflow: auto;
  }
  .draw2-timeline-linked-cel {
    grid-column: auto;
  }
}

/* Preview-only viewport lock: keep the Draw2 shell in the viewport and let
   Canvas, panels, and Timeline own their respective overflow. */
html:has(#draw2WorkspaceFrame),
body:has(#draw2WorkspaceFrame) {
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
}

.draw2-shell:has(#draw2WorkspaceFrame) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: max(var(--draw2-space-2), env(safe-area-inset-top))
    var(--draw2-space-2) max(var(--draw2-space-2), env(safe-area-inset-bottom));
  overflow: hidden;
}

.draw2-shell:has(#draw2WorkspaceFrame) > .draw2-header {
  display: none;
}
.draw2-workspace-frame {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) minmax(132px, 30%);
  margin: 0;
}
.draw2-workspace-left-dock,
.draw2-workspace-canvas-region,
.draw2-workspace-right-dock,
.draw2-workspace-timeline-region,
#draw2WorkspaceCanvasSlot,
#draw2WorkspaceCanvasSlot > .draw2-canvas-card,
#draw2WorkspaceTimelineSlot {
  min-height: 0;
}
.draw2-workspace-canvas-region,
.draw2-workspace-right-dock,
.draw2-workspace-timeline-region {
  overflow: hidden;
}
.draw2-workspace-timeline-region {
  display: flex;
  flex-direction: column;
}
.draw2-workspace-timeline-region .draw2-help {
  display: none;
}
.draw2-workspace-timeline-region .draw2-metrics {
  display: none;
}
.draw2-workspace-timeline-region .draw2-action-row {
  flex-wrap: nowrap;
  gap: var(--draw2-space-1);
  margin-top: var(--draw2-space-2);
  overflow-x: auto;
}
.draw2-workspace-timeline-region .draw2-action-row .draw2-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding-inline: var(--draw2-space-2);
  font-size: 0.68rem;
  white-space: nowrap;
}
.draw2-workspace-right-dock {
  min-width: 0;
}
.draw2-workspace-panel {
  flex: 1 1 auto;
}
#draw2WorkspaceCanvasSlot > .draw2-canvas-card {
  overflow: hidden;
}
#draw2WorkspaceCanvasSlot .draw2-help {
  display: none;
}
#draw2WorkspaceCanvasSlot .draw2-card-heading {
  align-items: center;
}
#draw2WorkspaceCanvasSlot .draw2-quick-palette {
  display: flex;
  align-items: center;
  gap: var(--draw2-space-1);
  min-height: 44px;
  margin-top: var(--draw2-space-2);
}
#draw2WorkspaceCanvasSlot .draw2-quick-palette-icon {
  width: 20px;
  color: var(--draw2-text-muted);
  font-size: 0.9rem;
  text-align: center;
}
#draw2WorkspaceCanvasSlot .draw2-quick-palette .draw2-color {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-width: 2px;
  border-radius: var(--draw2-radius-sm);
}
.draw2-workspace-brand .draw2-eyebrow {
  display: none;
}
.draw2-workspace-right-header strong {
  font-size: 0.76rem;
}
#draw2WorkspaceProjectSlot .draw2-status,
#draw2WorkspaceCanvasSlot .draw2-metrics {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
#draw2WorkspaceCanvasSlot .draw2-viewport-wrap {
  min-height: 0;
  overflow: hidden;
  container-type: size;
}
#draw2WorkspaceCanvasSlot .draw2-canvas-stack {
  /* draw2-entry.ts owns the inline integer display dimensions.  Do not clamp
     them here: clipping and pan belong to the viewport, not the raster. */
  width: auto;
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  max-height: none;
  flex: 0 0 auto;
}
#draw2WorkspaceTimelineSlot > .draw2-timeline-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: hidden;
}
#draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
#draw2WorkspaceTimelineSlot {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 700px) {
  .draw2-workspace-frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "canvas" "left";
  }
  .draw2-workspace-timeline-region {
    display: none;
  }
  .draw2-workspace-command-bar {
    flex-wrap: nowrap;
  }
  .draw2-icon-button {
    flex: 0 0 34px;
    min-width: 34px;
    padding-inline: 0;
  }
  .draw2-workspace-left-dock {
    position: static;
    justify-content: space-between;
    overflow: hidden;
  }
  .draw2-workspace-toolbar,
  .draw2-workspace-panel-launcher {
    flex: 0 1 auto;
    min-width: 0;
    gap: var(--draw2-space-1);
  }
  .draw2-tool-button,
  .draw2-panel-launcher {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    padding-inline: 0;
  }
  .draw2-tool-button span,
  .draw2-panel-launcher span {
    display: none;
  }
  .draw2-workspace-canvas-region {
    overflow: hidden;
  }
  .draw2-workspace-right-dock {
    max-height: calc(100dvh - var(--draw2-space-4));
  }
  .draw2-workspace-tabs {
    gap: var(--draw2-space-1);
    overflow: hidden;
  }
  .draw2-workspace-tab {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--draw2-space-1);
    overflow: hidden;
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #draw2WorkspaceCanvasSlot .draw2-quick-palette {
    margin-top: var(--draw2-space-1);
  }
}

@media (min-width: 701px) {
  .draw2-workspace-frame {
    grid-template-rows: auto minmax(0, 1fr) minmax(140px, 26%);
  }
}

/* Draw2 Studio refinement: the Canvas is a projection-only surface. The
   persistent color controls live in the right dock, while the left tool rail
   keeps stable hit targets. Dock tracks are user-adjustable on large screens. */
.draw2-workspace-frame {
  --draw2-color-dock-width: 320px;
  --draw2-tool-dock-width: 76px;
  --draw2-left-rail-width: var(--draw2-tool-dock-width);
  --draw2-right-dock-width: var(--draw2-color-dock-width);
  --draw2-timeline-height: clamp(140px, 26%, 360px);
}

.draw2-workspace-right-dock {
  position: relative;
}
.draw2-dock-resize-handle {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: -5px;
  width: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}
.draw2-dock-resize-handle:hover,
.draw2-dock-resize-handle:focus-visible {
  background: var(--draw2-accent-strong);
  opacity: 0.7;
}
.draw2-timeline-resize-handle {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: row-resize;
  touch-action: none;
}
.draw2-timeline-resize-handle:hover,
.draw2-timeline-resize-handle:focus-visible {
  background: var(--draw2-accent-strong);
  opacity: 0.7;
}
.draw2-workspace-timeline-region {
  position: relative;
}
.draw2-workspace-timeline-heading,
.draw2-workspace-timeline-region .draw2-timeline-card > .draw2-card-heading,
.draw2-workspace-timeline-region .draw2-timeline-card > .draw2-help,
#draw2TimelineCard > .draw2-card-heading,
#draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-card-heading,
#draw2TimelineCard > .draw2-help,
#draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-help {
  display: none !important;
}
#draw2TimelineStatus {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.draw2-workspace-timeline-region .draw2-timeline-card > .draw2-action-row {
  margin-top: 0;
}

/* The left color/panel dock follows creator-tool conventions: the navigation
   stays reachable while the active panel content scrolls independently. */
.draw2-workspace-right-dock {
  overflow: hidden;
}
.draw2-workspace-right-dock > .draw2-workspace-right-header,
.draw2-workspace-right-dock > .draw2-workspace-tabs,
.draw2-workspace-right-dock > .draw2-workspace-panel {
  flex: 0 0 auto;
}
.draw2-workspace-right-dock > .draw2-workspace-panel:not([hidden]) {
  flex: 1 1 auto;
  overflow: auto;
}
.draw2-workspace-right-header {
  min-height: 32px;
  padding: var(--draw2-space-1) var(--draw2-space-2);
}
.draw2-workspace-right-header strong {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.draw2-workspace-tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: var(--draw2-space-1);
  background: var(--draw2-surface);
}
.draw2-workspace-tab {
  min-width: 38px;
  padding-inline: var(--draw2-space-1);
  font-size: 0.64rem;
}
.draw2-workspace-panel {
  padding: var(--draw2-space-2);
}
.draw2-panel-summary {
  gap: var(--draw2-space-1);
  padding: var(--draw2-space-2);
}

/* Timeline layout is a bounded grid. The JS projection reads these values so
   the virtual window and the visible two-pixel cells never drift apart. */
.draw2-timeline-viewport {
  --draw2-timeline-label-width: 148px;
  --draw2-timeline-cell-width: 48px;
  --draw2-timeline-row-height: 38px;
}
.draw2-timeline-row {
  height: var(--draw2-timeline-row-height);
}
.draw2-timeline-row-label {
  width: var(--draw2-timeline-label-width);
  height: var(--draw2-timeline-row-height);
}
.draw2-timeline-cell {
  width: calc(var(--draw2-timeline-cell-width) - 4px);
  min-height: calc(var(--draw2-timeline-row-height) - 6px);
  border-radius: 2px;
}

@media (max-width: 700px) {
  .draw2-workspace-toolbar {
    flex-basis: var(--draw2-control-size);
    height: var(--draw2-control-size);
  }
  .draw2-mobile-color-rail {
    grid-template-rows: auto;
  }
  .draw2-mobile-color-rail .draw2-palette-grid {
    grid-template-rows: repeat(2, var(--draw2-control-size));
    grid-auto-columns: var(--draw2-control-size);
    max-height: calc(var(--draw2-control-size) * 2 + 3px);
  }
  .draw2-mobile-color-rail .draw2-color,
  .draw2-mobile-color-rail .draw2-color-add {
    width: var(--draw2-control-size);
    min-width: var(--draw2-control-size);
    max-width: var(--draw2-control-size);
    height: var(--draw2-control-size);
    min-height: var(--draw2-control-size);
    max-height: var(--draw2-control-size);
  }
}

/* Tablet Portrait Adaptive Deck ------------------------------------------------
 * One shared Workspace tree is projected into two 44px top rails, a maximum
 * Canvas, one quick-tool rail, and one deck surface.  The deck swaps between
 * palette/context and Timeline; it never mounts a duplicate heavy surface. */
@media (min-width: 701px) {
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"] {
    --draw2-tablet-control: 44px;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows:
      88px minmax(260px, 1fr) 44px 44px minmax(210px, 25dvh) 24px !important;
    grid-template-areas:
      "top" "canvas" "quick-tools" "deck-tabs" "deck" "status" !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-topbar {
    grid-area: top !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 44px 44px !important;
    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-creator-mode-bar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 4px !important;
    gap: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-creator-mode-bar::-webkit-scrollbar {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-creator-mode {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 88px !important;
    max-width: 104px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 10px !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-global-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 4px 0 0 !important;
    gap: 2px !important;
    overflow: visible !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-brand,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-project-slot,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-theme-control,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-language-control,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    [data-workspace-command="kill-switch"] {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-menu-bar {
    display: flex !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    overflow: visible !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-menu-bar
    > .draw2-menu:not(:first-child) {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-menu-bar
    > .draw2-menu:first-child,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-menu-bar
    > .draw2-menu:first-child
    > summary {
    box-sizing: border-box !important;
    flex: 0 0 44px !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-command-bar {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 2px !important;
    height: 44px !important;
    overflow: visible !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-command-bar
    > * {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-command-bar
    > [data-workspace-command="undo"],
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-command-bar
    > [data-workspace-command="redo"],
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-command-bar
    > [data-workspace-command="command-palette"] {
    box-sizing: border-box !important;
    flex: 0 0 44px !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-context-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-top: 1px solid var(--draw2-border-subtle) !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-context-row::-webkit-scrollbar {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-quick-controls {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    min-width: max-content !important;
    height: 44px !important;
    gap: 4px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-quick-control {
    flex: 0 0 auto !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-quick-control
    select,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-quick-control
    input,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-quick-control
    output {
    flex-shrink: 0 !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-left-dock {
    display: contents !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-mobile-drawer-header,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-mobile-color-rail {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-toolbar {
    grid-area: quick-tools !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 4px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-panel-launcher {
    grid-area: deck-tabs !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 4px !important;
    gap: 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-panel-launcher::-webkit-scrollbar {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-right-dock {
    grid-area: deck !important;
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns:
      minmax(0, var(--draw2-tablet-deck-palette-ratio, 42%)) 8px minmax(0, 1fr)
      !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid var(--draw2-border-subtle) !important;
    box-shadow: none !important;
    transition: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceRightResize {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspacePaletteStrip {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspacePaletteStrip
    .draw2-palette-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)) !important;
    grid-auto-rows: min-content !important;
    width: 100% !important;
    height: max-content !important;
    min-height: 0 !important;
    max-height: none !important;
    align-content: start !important;
    overflow: visible !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspacePaletteStrip
    .draw2-color,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspacePaletteStrip
    .draw2-color-add {
    width: 100% !important;
    min-width: 32px !important;
    height: auto !important;
    min-height: 32px !important;
    aspect-ratio: 1 !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspacePaletteResize {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 8px !important;
    min-width: 8px !important;
    height: 100% !important;
    min-height: 0 !important;
    cursor: ew-resize !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceRightCustomDock {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-timeline-region {
    grid-area: deck !important;
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid var(--draw2-border-subtle) !important;
    box-shadow: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"].is-mobile-timeline-open
    .draw2-workspace-right-dock {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"].is-mobile-timeline-open
    .draw2-workspace-timeline-region {
    display: flex !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"].is-mobile-timeline-open
    #draw2WorkspacePaletteStrip,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"].is-mobile-timeline-open
    #draw2WorkspaceRightCustomDock {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-statusbar {
    grid-area: status !important;
    box-sizing: border-box !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }
}

/* Final usability pass: menus must escape the rail without being clipped or
   painted under the canvas. Narrow desktop menus become icon-first, while
   their accessible names remain available to screen readers and titles. */
@media (min-width: 701px) {
  .draw2-workspace-topbar {
    overflow: visible !important;
    z-index: 40;
  }
  .draw2-workspace-menu-bar {
    overflow: visible !important;
    position: relative;
    z-index: 100;
  }
  .draw2-menu {
    z-index: 101;
  }
  .draw2-menu-popover {
    z-index: 200;
  }
}
@media (max-width: 1119px) and (min-width: 701px) {
  .draw2-workspace-menu-bar .draw2-menu summary {
    width: 32px;
    min-width: 32px;
    justify-content: center;
    padding-inline: 0;
    font-size: 0;
  }
  .draw2-workspace-menu-bar .draw2-menu-icon {
    width: 16px;
    height: 16px;
  }
  .draw2-workspace-menu-bar .draw2-menu {
    flex: 0 0 32px;
  }
}

/* Keep the wheel, its raster backing and its cursor in one measured box.
   Scaling only the canvas width made the cursor drift when the left color
   rail changed width. ResizeObserver now sees the same box the user sees. */
.draw2-color-picker {
  width: min(100%, 260px) !important;
  max-width: 260px !important;
  margin-inline: auto !important;
}
.draw2-color-picker > .draw2-palette-wheel {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* A single name control keeps visibility, theme identity and selection in
   one compact row. The visibility button is adjacent to the name button, so
   no nested interactive elements are introduced. */
.draw2-layer-row {
  grid-template-columns: minmax(0, 1fr) 30px 30px 76px !important;
}
.draw2-layer-name-group {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  gap: 2px;
}
.draw2-layer-name-group > .draw2-layer-visibility,
.draw2-layer-name-group > .draw2-layer-select {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--px-radius, 2px);
  background: transparent;
  color: var(--draw2-text-muted);
}
.draw2-layer-name-group > .draw2-layer-select {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding-inline: 6px;
  text-align: left;
}
.draw2-layer-name-group > button:hover,
.draw2-layer-name-group > button:focus-visible {
  border-color: var(--draw2-border-subtle);
  color: var(--draw2-text-strong);
}
.draw2-layer-theme-label {
  display: block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--draw2-accent-strong);
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--draw2-accent-strong) 44%, transparent);
}
.draw2-layer-theme-label[data-layer-visible="false"] {
  background: var(--draw2-text-muted);
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--draw2-text-muted) 44%, transparent);
}
.draw2-layer-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Brush size is a continuous, keyboard-friendly control in the frequent
   rail and Inspector. Other discrete modes remain native selects. */
.draw2-quick-control-size {
  grid-template-columns: auto minmax(64px, 96px) auto;
  align-items: center;
}
.draw2-quick-control-size input[type="range"] {
  width: 100%;
  min-width: 56px;
}
.draw2-quick-control-opacity {
  grid-template-columns: auto minmax(64px, 80px) auto;
  align-items: center;
}
.draw2-quick-control-opacity input[type="range"] {
  width: 100%;
  min-width: 56px;
}
.draw2-quick-control-size output,
.draw2-quick-control-opacity output,
#draw2ToolOptions label output {
  min-width: 30px;
  color: var(--draw2-text-muted);
  font: 700 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}
#draw2ToolOptions label:has(> input[type="range"]) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
#draw2ToolOptions label > input[type="range"] {
  width: 100%;
  min-width: 0;
}

/* Frame markers follow Aseprite's timeline convention: the frame header owns
   the marker identity, while a small colored pip remains visible in the
   compact matrix. */
.draw2-timeline-frame-header[data-marker-kind]::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--draw2-accent-strong);
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--draw2-accent-strong) 48%, transparent);
}
.draw2-timeline-frame-header[data-marker-kind="AUDIO"]::after {
  background: #8bd7ff;
}
.draw2-timeline-frame-header[data-marker-kind="GAME_EVENT"]::after {
  background: #f8d477;
}
.draw2-timeline-frame-header[data-marker-kind="HITBOX"]::after {
  background: #ff687c;
}
.draw2-timeline-frame-header[data-marker-kind="NOTE"]::after {
  background: #c6a0ff;
}

/* The guide deliberately overdraws the 32px gutter. It never receives
   pointer events itself; only the viewport gutter handler can move it. */
.draw2-mirror-guide-overlay {
  overflow: visible !important;
}
.draw2-mirror-guide-line {
  vector-effect: non-scaling-stroke;
}

@media (min-width: 701px) {
  .draw2-workspace-brand .draw2-eyebrow,
  .draw2-workspace-brand strong,
  .draw2-workspace-brand .draw2-workspace-status {
    display: none;
  }
  .draw2-workspace-brand {
    min-height: 0;
  }
  .draw2-workspace-command-bar .draw2-icon-button span {
    display: none;
  }
}

/* Final grouped-tool and viewport overrides. */
.draw2-tool-group {
  position: relative;
  flex: 0 0 var(--draw2-control-size);
  width: var(--draw2-control-size);
  height: var(--draw2-control-size);
}
.draw2-tool-group > summary {
  display: grid;
  place-items: center;
  width: var(--draw2-control-size);
  height: var(--draw2-control-size);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  list-style: none;
  cursor: pointer;
}
.draw2-tool-group > summary::-webkit-details-marker {
  display: none;
}
.draw2-tool-group.is-active > summary {
  box-shadow: inset 0 0 0 1px var(--draw2-accent-strong);
}
.draw2-tool-popover {
  position: absolute;
  z-index: 40;
  top: 0;
  left: calc(100% + 4px);
  display: none;
  grid-template-columns: repeat(3, var(--draw2-control-size));
  gap: 2px;
  width: max-content;
  padding: 3px;
  border: 1px solid var(--draw2-border-strong);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface);
  box-shadow: var(--draw2-shadow-panel);
}
.draw2-tool-group[open] > .draw2-tool-popover {
  display: grid;
}
.draw2-tool-popover .draw2-tool-button {
  width: var(--draw2-control-size) !important;
  min-width: var(--draw2-control-size) !important;
  height: var(--draw2-control-size) !important;
  min-height: var(--draw2-control-size) !important;
  padding: 0 !important;
}
.draw2-tool-popover .draw2-tool-button span {
  display: none !important;
}
.draw2-mini-preview[hidden] {
  display: none !important;
}
#draw2WorkspaceCanvasSlot .draw2-viewport-wrap {
  touch-action: none;
  overscroll-behavior: contain;
}
#draw2WorkspaceCanvasSlot .draw2-canvas-stack {
  transform-origin: center center;
  image-rendering: pixelated;
  will-change: auto;
  isolation: isolate;
}
#draw2WorkspaceCanvasSlot #draw2Canvas,
#draw2WorkspaceCanvasSlot #draw2Overlay {
  touch-action: none;
}
#draw2WorkspaceCanvasSlot #draw2Canvas[data-tool="pan"] {
  cursor: grab;
}
#draw2WorkspaceCanvasSlot #draw2Canvas[data-tool="pan"]:active {
  cursor: grabbing;
}
@media (max-width: 700px) {
  .draw2-workspace-toolbar {
    overflow: visible !important;
  }
  .draw2-workspace-left-dock {
    overflow: visible !important;
  }
  .draw2-tool-popover {
    top: auto;
    bottom: calc(100% + 4px);
    left: 0;
  }
}
@media (min-width: 701px) {
  .draw2-workspace-left-dock .draw2-tool-popover {
    left: auto;
    right: calc(100% + 4px);
  }
}

/* Palette is a panel, not a second permanent color rail. */
#draw2WorkspaceColorEditor[hidden] {
  display: none !important;
}
#draw2WorkspaceColorEditor:not([hidden]) + .draw2-workspace-tabs {
  border-top: 1px solid var(--draw2-border-subtle);
}

/* Studio interactions must not start browser selection, image dragging, or a
   long-press callout. Editable fields retain native text editing. */
#draw2WorkspaceFrame,
#draw2WorkspaceFrame * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#draw2WorkspaceFrame input,
#draw2WorkspaceFrame textarea,
#draw2WorkspaceFrame select,
#draw2WorkspaceFrame [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
#draw2WorkspaceFrame img,
#draw2WorkspaceFrame canvas,
#draw2WorkspaceFrame button,
#draw2WorkspaceFrame [draggable="true"] {
  -webkit-user-drag: none;
  user-drag: none;
}

/* The Canvas region intentionally contains no heading, metrics, palette or
   explanatory copy; all of those belong to surrounding Studio chrome. */
#draw2WorkspaceCanvasSlot > .draw2-canvas-card {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#draw2WorkspaceCanvasSlot .draw2-card-heading,
#draw2WorkspaceCanvasSlot .draw2-help,
#draw2WorkspaceCanvasSlot .draw2-quick-palette {
  display: none !important;
}
#draw2WorkspaceCanvasSlot .draw2-viewport-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Aseprite-inspired persistent color editor: map, palette, RGB and HEX stay
   together so color changes never require leaving the Canvas view. */
.draw2-color-editor {
  display: grid;
  flex: 0 0 auto;
  gap: var(--draw2-space-2);
  padding: var(--draw2-space-2) var(--draw2-space-3) var(--draw2-space-3);
  border-bottom: 1px solid var(--draw2-border-subtle);
  background: var(--draw2-surface);
}
.draw2-color-editor-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--draw2-space-2);
}
.draw2-color-editor-heading .draw2-eyebrow {
  margin-bottom: 2px;
}
.draw2-color-editor-heading h2 {
  margin: 0;
  font-size: 0.84rem;
}
.draw2-color-editor-value {
  color: var(--draw2-text-strong);
  font: 700 0.72rem ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-color-map {
  position: relative;
  height: 76px;
  overflow: hidden;
  border: 1px solid var(--draw2-border-strong);
  border-radius: var(--draw2-radius-sm);
  background:
    linear-gradient(to top, rgb(0 0 0 / 82%), transparent),
    linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  cursor: crosshair;
  touch-action: none;
}
.draw2-color-map:focus-visible {
  outline: 2px solid var(--draw2-focus-ring);
  outline-offset: 2px;
}
.draw2-color-map-thumb {
  position: absolute;
  left: calc(var(--draw2-color-map-x, 0%) - 7px);
  top: calc(var(--draw2-color-map-y, 0%) - 7px);
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 75%);
  pointer-events: none;
}
.draw2-color-sliders {
  display: grid;
  gap: 3px;
}
.draw2-color-sliders label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 30px;
  align-items: center;
  gap: var(--draw2-space-1);
  color: var(--draw2-text-muted);
  font-size: 0.66rem;
}
.draw2-color-sliders input {
  width: 100%;
  min-width: 0;
  accent-color: var(--draw2-accent-strong);
}
.draw2-color-sliders output {
  color: var(--draw2-text-muted);
  font: 600 0.62rem ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}
.draw2-color-editor-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--draw2-space-2);
}
.draw2-color-hex {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--draw2-space-1);
  color: var(--draw2-text-muted);
  font-size: 0.64rem;
}
.draw2-color-hex input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 var(--draw2-space-2);
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font: 700 0.72rem ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}
.draw2-color-editor-footer .draw2-button {
  min-height: 32px;
  padding: 0 var(--draw2-space-2);
  font-size: 0.68rem;
}
.draw2-color-editor-status {
  min-height: 1em;
  margin: 0;
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-color-editor-status[data-state="error"] {
  color: var(--draw2-danger-strong);
}
.draw2-mobile-color-rail {
  display: none;
}

@media (min-width: 701px) {
  .draw2-workspace-frame {
    grid-template-columns:
      minmax(244px, var(--draw2-color-dock-width)) minmax(0, 1fr) minmax(
        68px,
        var(--draw2-tool-dock-width)
      );
    grid-template-rows: auto minmax(0, 1fr) var(--draw2-timeline-height);
  }
  /* Aseprite-like default: Color stays left, compact tools stay right. */
  .draw2-workspace-right-dock {
    grid-area: left;
    border-right: 1px solid var(--draw2-border-subtle);
    border-left: 0;
  }
  .draw2-workspace-left-dock {
    grid-area: right;
    border-left: 1px solid var(--draw2-border-subtle);
    border-right: 0;
  }
  .draw2-workspace-left-dock .draw2-workspace-toolbar,
  .draw2-workspace-left-dock .draw2-workspace-panel-launcher {
    align-content: start;
  }
}

@media (max-width: 700px) {
  .draw2-dock-resize-handle,
  .draw2-timeline-resize-handle {
    display: none;
  }
  .draw2-color-editor {
    padding-inline: var(--draw2-space-3);
  }
  .draw2-workspace-right-dock {
    position: fixed;
  }
  .draw2-workspace-menu-bar {
    display: none;
  }
  .draw2-workspace-brand {
    display: none;
  }
  .draw2-workspace-topbar {
    min-height: 0;
    padding: var(--draw2-space-1) var(--draw2-space-2);
  }
  .draw2-workspace-project-slot {
    grid-row: 2;
  }
  .draw2-workspace-command-bar {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: flex-end;
  }
  #draw2WorkspaceProjectSlot > #draw2ProjectCard {
    padding: var(--draw2-space-1) 0;
  }
  #draw2WorkspaceProjectSlot .draw2-controls {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--draw2-space-1);
    margin: 0;
  }
  #draw2WorkspaceProjectSlot .draw2-controls label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0;
  }
  #draw2WorkspaceProjectSlot .draw2-controls label:first-child input {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    font-size: 0.72rem;
  }
  #draw2WorkspaceProjectSlot #draw2CreateProject {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    min-height: 32px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }
  #draw2WorkspaceProjectSlot .draw2-controls label:nth-child(2),
  #draw2WorkspaceProjectSlot .draw2-controls label:nth-child(3) {
    display: none;
  }
  .draw2-workspace-timeline-region .draw2-timeline-card > .draw2-action-row {
    gap: 2px;
  }
}

@media (min-width: 701px) {
  /* Compact desktop top rail: project identity and frequent actions remain,
     while the Canvas receives the available height and width. */
  .draw2-workspace-topbar {
    grid-template-columns: auto minmax(220px, 360px) minmax(0, 1fr) auto;
    min-height: 44px;
    padding: var(--draw2-space-1) var(--draw2-space-2);
    gap: var(--draw2-space-2);
  }
  .draw2-workspace-brand {
    gap: 0;
  }
  .draw2-workspace-brand strong {
    font-size: 0.76rem;
    white-space: nowrap;
  }
  .draw2-workspace-status {
    display: none;
  }
  .draw2-workspace-menu-bar {
    gap: 0;
  }
  .draw2-menu summary {
    min-height: 26px;
    padding-inline: var(--draw2-space-1);
    font-size: 0.62rem;
  }
  #draw2WorkspaceProjectSlot > #draw2ProjectCard {
    padding: 0;
  }
  #draw2WorkspaceProjectSlot .draw2-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--draw2-space-1);
    margin: 0;
  }
  #draw2WorkspaceProjectSlot .draw2-controls label {
    display: block;
    min-width: 0;
    font-size: 0;
  }
  #draw2WorkspaceProjectSlot .draw2-controls label:first-child {
    flex: 1 1 auto;
  }
  #draw2WorkspaceProjectSlot .draw2-controls label:first-child input {
    width: 100%;
    min-width: 120px;
    min-height: 30px;
    font-size: 0.68rem;
  }
  #draw2WorkspaceProjectSlot .draw2-controls label:nth-child(2),
  #draw2WorkspaceProjectSlot .draw2-controls label:nth-child(3) {
    display: none;
  }
  #draw2WorkspaceProjectSlot #draw2CreateProject {
    min-width: 78px;
    min-height: 30px;
    padding-inline: var(--draw2-space-2);
    font-size: 0.66rem;
    white-space: nowrap;
  }
  .draw2-workspace-command-bar {
    gap: 2px;
  }
  .draw2-icon-button {
    min-width: 30px;
    min-height: 30px;
    padding: var(--draw2-space-1);
  }
  .draw2-icon-button span {
    display: none;
  }
  .draw2-theme-control, .draw2-language-control {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0;
  }
  .draw2-theme-control select {
    min-height: 28px;
    width: 28px;
    padding: 0;
    font-size: 0;
  }
  .draw2-language-control select {
    min-height: 28px;
    width: 42px;
    padding: 0;
    font-size: 0.65rem;
  }

  /* Right tool rail is icon-first; names remain available through title and
     accessible labels instead of consuming rail width. */
  .draw2-workspace-left-dock {
    gap: var(--draw2-space-2);
    padding: var(--draw2-space-2) var(--draw2-space-1);
  }
  .draw2-workspace-left-dock .draw2-tool-button,
  .draw2-workspace-left-dock .draw2-panel-launcher {
    min-height: 42px;
    padding-inline: 0;
  }
  .draw2-workspace-left-dock .draw2-tool-button span,
  .draw2-workspace-left-dock .draw2-panel-launcher span {
    display: none;
  }
  .draw2-workspace-left-dock .draw2-workspace-toolbar,
  .draw2-workspace-left-dock .draw2-workspace-panel-launcher {
    gap: var(--draw2-space-1);
  }
}

/* The top rail is the compact application menu rail. Frequent actions remain
   icon buttons; File/Edit/View/Window/Help stay discoverable without taking
   space from the Canvas. */
.draw2-workspace-topbar {
  position: relative;
}
.draw2-workspace-menu-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.draw2-menu {
  position: relative;
}
.draw2-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--draw2-space-2);
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.68rem;
  list-style: none;
}
.draw2-menu summary::-webkit-details-marker {
  display: none;
}
.draw2-menu summary:hover,
.draw2-menu[open] summary {
  border-color: var(--draw2-border-subtle);
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
}
.draw2-menu-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  min-width: 148px;
  gap: 2px;
  padding: var(--draw2-space-1);
  border: 1px solid var(--draw2-border-strong);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface);
  box-shadow: var(--draw2-shadow-panel);
}
.draw2-menu:not([open]) > .draw2-menu-popover {
  display: none;
}
.draw2-menu[open] > .draw2-menu-popover {
  display: grid;
}
.draw2-menu:nth-last-child(-n+2) > .draw2-menu-popover {
  left: auto;
  right: 0;
}
.draw2-menu-popover button {
  min-height: 32px;
  padding: 0 var(--draw2-space-2);
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  background: transparent;
  color: var(--draw2-text-strong);
  font-size: 0.7rem;
  text-align: left;
  cursor: pointer;
}
.draw2-menu-popover button:hover,
.draw2-menu-popover button:focus-visible {
  border-color: var(--draw2-border-subtle);
  background: var(--draw2-surface-raised);
  outline: 0;
}

@media (min-width: 1120px) {
  .draw2-workspace-topbar {
    grid-template-columns: minmax(170px, auto) auto minmax(0, 1fr) auto;
  }
}
@media (max-width: 1119px) and (min-width: 701px) {
  .draw2-workspace-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .draw2-workspace-menu-bar {
    grid-column: 1;
    grid-row: 1;
  }
  .draw2-workspace-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .draw2-workspace-menu-bar {
    position: absolute;
    left: 210px;
  }
  .draw2-workspace-project-slot {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .draw2-workspace-command-bar {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 700px) {
  .draw2-workspace-menu-bar {
    display: none;
  }
  .draw2-workspace-topbar {
    grid-template-rows: 34px 40px;
    align-content: start;
  }
  .draw2-workspace-menu-bar {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid var(--draw2-border-subtle);
    padding-top: var(--draw2-space-1);
  }
  .draw2-menu {
    flex: 1 1 0;
  }
  .draw2-menu summary {
    justify-content: center;
    width: 100%;
    padding-inline: var(--draw2-space-1);
    font-size: 0.62rem;
  }
  .draw2-menu-popover {
    left: 0;
    right: auto;
    min-width: 132px;
  }
  .draw2-menu:nth-last-child(-n+2) > .draw2-menu-popover {
    left: auto;
    right: 0;
  }
  .draw2-workspace-project-slot {
    grid-column: 1;
    grid-row: 2;
  }
  .draw2-workspace-topbar {
    grid-template-rows: auto auto auto;
  }
}

/* Mobile control lanes: Canvas remains the primary surface, while color and
   tools stay reachable in compact horizontal rails. Detailed color editing,
   Layers and other panels remain available through the sheet launcher. */
@media (max-width: 700px) {
  .draw2-workspace-frame {
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "canvas" "left";
  }
  .draw2-workspace-topbar {
    grid-template-rows: 36px 34px;
  }
  .draw2-workspace-left-dock {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--draw2-space-2);
    min-height: 0;
    padding: var(--draw2-space-1) var(--draw2-space-2)
      calc(var(--draw2-space-1) + env(safe-area-inset-bottom, 0px));
    border-top: 0;
    border-right: 0;
    overflow: hidden;
    box-shadow: none;
  }
  .draw2-workspace-toolbar,
  .draw2-workspace-panel-launcher {
    display: flex;
    flex: 0 0 42px;
    align-items: stretch;
    gap: var(--draw2-space-1);
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    touch-action: pan-x;
  }
  .draw2-tool-button,
  .draw2-panel-launcher {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--draw2-space-1);
  }
  .draw2-tool-button span,
  .draw2-panel-launcher span {
    display: none;
  }
  .draw2-workspace-timeline-region {
    display: none;
  }
  .draw2-workspace-left-dock .draw2-workspace-toolbar,
  .draw2-workspace-left-dock .draw2-workspace-panel-launcher {
    flex: 0 0 40px;
  }
  .draw2-workspace-panel-launcher {
    justify-content: flex-start;
  }
  .draw2-workspace-right-dock {
    height: min(78dvh, 600px);
    border: 1px solid var(--draw2-border-subtle);
    border-radius: 3px;
  }
  .draw2-workspace-right-header {
    min-height: 40px;
  }
  .draw2-workspace-tabs {
    order: 0;
    border-bottom: 1px solid var(--draw2-border-subtle);
  }
  .draw2-workspace-panel {
    order: 1;
  }
}

/* One visible panel switcher per device profile: the desktop dock uses its
   own tabs, while the mobile bottom rail uses the compact launchers. */
@media (min-width: 701px) {
  .draw2-workspace-panel-launcher {
    display: none;
  }
  .draw2-mobile-timeline-toggle {
    display: none;
  }
}
@media (max-width: 700px) {
  .draw2-workspace-tabs {
    display: none;
  }
  .draw2-workspace-frame {
    border: 0;
    border-radius: 0;
  }
  .draw2-workspace-right-dock {
    border: 0;
    border-radius: 3px;
    box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
  }
  .draw2-workspace-left-dock {
    border-top: 0;
  }
  .draw2-workspace-timeline-region {
    position: fixed;
    left: var(--draw2-space-2);
    right: var(--draw2-space-2);
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    z-index: 19;
    display: none;
    height: 132px;
    padding: var(--draw2-space-2);
    border: 0;
    background: var(--draw2-surface);
    box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
  }
  .draw2-workspace-frame.is-mobile-timeline-open
    .draw2-workspace-timeline-region {
    display: flex;
  }
  #draw2WorkspaceTimelineSlot > .draw2-timeline-card {
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
    height: 76px;
    max-height: 76px;
    margin-top: var(--draw2-space-1);
    border: 1px solid
      color-mix(in srgb, var(--draw2-border-subtle) 55%, transparent);
    border-radius: 2px;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-cell {
    border-radius: 2px;
  }
}

/* Compact control language: small corner radius, one action height, and
   icon-first controls. Touch rails keep the same square geometry with a
   larger hit target where mobile requires it. */
:root {
  --draw2-radius-sm: 2px;
  --draw2-radius-md: 3px;
  --draw2-radius-lg: 4px;
  --draw2-control-height: 32px;
  --draw2-tool-height: 40px;
}
.draw2-button,
.draw2-icon-button,
.draw2-panel-close,
.draw2-workspace-tab,
.draw2-menu summary,
.draw2-menu-popover button {
  border-radius: var(--draw2-radius-sm);
}
.draw2-button {
  height: var(--draw2-control-height);
  min-height: var(--draw2-control-height);
  padding-block: 0;
}
.draw2-action-row .draw2-button,
.draw2-workspace-timeline-region .draw2-action-row .draw2-button {
  height: var(--draw2-control-height);
  min-height: var(--draw2-control-height);
}
.draw2-workspace-timeline-region .draw2-action-row .draw2-button {
  width: var(--draw2-control-height);
  min-width: var(--draw2-control-height);
  padding-inline: 0;
}
.draw2-icon-button,
.draw2-panel-close {
  width: var(--draw2-control-height);
  min-width: var(--draw2-control-height);
  height: var(--draw2-control-height);
  min-height: var(--draw2-control-height);
  padding: 0;
}
.draw2-workspace-tab {
  min-height: var(--draw2-control-height);
  height: var(--draw2-control-height);
}
.draw2-tool-button,
.draw2-panel-launcher {
  min-height: var(--draw2-tool-height);
  height: var(--draw2-tool-height);
  border-radius: var(--draw2-radius-sm);
}
.draw2-color,
.draw2-color-add {
  border-radius: var(--draw2-radius-sm);
}
.draw2-color-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border: 1px solid var(--draw2-border-strong);
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
  cursor: pointer;
  font-size: 1rem;
}
.draw2-color-add:hover,
.draw2-color-add:focus-visible {
  border-color: var(--draw2-accent-strong);
}
#draw2WorkspaceCanvasSlot .draw2-card-heading,
#draw2WorkspaceTimelineSlot .draw2-timeline-card > .draw2-card-heading,
.draw2-color-editor-heading > div {
  display: none !important;
}
.draw2-color-editor-heading {
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .draw2-timeline-viewport {
    --draw2-timeline-label-width: 58px;
    --draw2-timeline-cell-width: 38px;
    --draw2-timeline-row-height: 30px;
  }
  .draw2-mobile-color-rail .draw2-color,
  .draw2-mobile-color-rail .draw2-color-add,
  .draw2-mobile-color-more {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }
  .draw2-mobile-color-rail .draw2-color-add {
    flex: 0 0 34px;
  }
  .draw2-mobile-color-more {
    flex: 0 0 34px;
    padding: 0;
  }
  .draw2-workspace-timeline-region .draw2-action-row .draw2-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }
}

/* PiXiEED Draw2 icon contract. All icons come from the Draw2-owned sprite:
   one 24-unit grid, one 2px stroke, round joins/caps, and currentColor for
   predictable contrast across light/dark themes and active states. */
.draw2-ui-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  overflow: visible;
  color: currentColor;
  pointer-events: none;
}
.draw2-ui-icon use {
  color: inherit;
}
.draw2-tool-icon {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}
.draw2-menu-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}
.draw2-menu summary {
  gap: 4px;
}

.draw2-menu summary:hover .draw2-ui-icon,
.draw2-menu[open] summary .draw2-ui-icon,
.draw2-icon-button:hover .draw2-ui-icon,
.draw2-icon-button:focus-visible .draw2-ui-icon,
.draw2-tool-button:hover .draw2-ui-icon,
.draw2-tool-button:focus-visible .draw2-ui-icon,
.draw2-panel-launcher:hover .draw2-ui-icon,
.draw2-panel-launcher:focus-visible .draw2-ui-icon,
.draw2-tool-button.is-active .draw2-ui-icon,
.draw2-panel-launcher.is-active .draw2-ui-icon,
.draw2-mobile-timeline-toggle[aria-pressed="true"] .draw2-ui-icon {
  color: var(--draw2-accent-strong);
}
.draw2-icon-button-danger .draw2-ui-icon {
  color: var(--draw2-danger-strong);
}
.draw2-icon-button:disabled .draw2-ui-icon,
.draw2-tool-button:disabled .draw2-ui-icon,
.draw2-panel-launcher:disabled .draw2-ui-icon {
  opacity: 0.42;
}

@media (min-width: 701px) {
  .draw2-workspace-left-dock .draw2-tool-icon,
  .draw2-workspace-left-dock .draw2-panel-launcher .draw2-ui-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
}

@media (max-width: 700px) {
  .draw2-ui-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
  .draw2-tool-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .draw2-menu-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
}

/* Mobile Draw2 follows the current PiXiEEDraw presentation: the Canvas stays
   dominant, while a compact lower rail keeps one tool lane and a two-row
   quick palette permanently reachable. The full Color panel remains a sheet
   opened by the Color tab; it does not duplicate the quick palette. */
@media (max-width: 700px) {
  :root {
    --draw2-mobile-rail-height: 220px;
  }

  #draw2WorkspacePaletteStrip {
    display: none;
  }

  .draw2-workspace-left-dock {
    gap: 4px;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
  }

  .draw2-workspace-toolbar {
    flex: 0 0 40px;
    height: 40px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .draw2-workspace-toolbar::-webkit-scrollbar {
    display: none;
  }

  .draw2-mobile-color-rail {
    display: grid;
    flex: 0 0 auto;
    grid-template-rows: 16px auto;
    gap: 3px;
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }
  .draw2-mobile-color-active {
    display: block;
    min-width: 0;
    color: var(--draw2-text-muted);
    font: 700 0.62rem/16px ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: right;
  }
  .draw2-mobile-color-rail .draw2-palette-grid {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(2, 36px);
    grid-auto-flow: column;
    grid-auto-columns: 40px;
    gap: 3px;
    width: 100%;
    max-height: 114px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .draw2-mobile-color-rail .draw2-color,
  .draw2-mobile-color-rail .draw2-color-add {
    width: 100%;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 2px;
  }
  .draw2-mobile-color-rail .draw2-color[aria-pressed="true"] {
    border-color: var(--draw2-focus-ring);
    box-shadow: inset 0 0 0 2px var(--draw2-focus-ring);
  }

  .draw2-workspace-panel-launcher {
    flex: 0 0 40px;
    height: 40px;
    overflow: hidden;
  }
  .draw2-workspace-panel-launcher .draw2-panel-launcher {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }
  .draw2-workspace-panel-launcher .draw2-mobile-timeline-toggle {
    border-color: var(--draw2-accent-strong);
  }
  .draw2-workspace-panel-launcher
    .draw2-mobile-timeline-toggle[aria-pressed="true"] {
    background: color-mix(
      in srgb,
      var(--draw2-accent-strong) 20%,
      var(--draw2-surface-raised)
    );
    box-shadow: inset 0 0 0 1px var(--draw2-accent-strong);
  }

  .draw2-workspace-timeline-region {
    bottom: calc(
      var(--draw2-mobile-rail-height) + env(safe-area-inset-bottom, 0px)
    );
  }

  /* Keep the Color editor as an actual bottom sheet. A later desktop dock
     positioning rule must not move this mobile sheet below the viewport. */
  .draw2-workspace-right-dock {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    height: min(72dvh, 560px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
    transform: translateY(calc(100% + 24px));
    transition: transform 160ms ease;
  }
  .draw2-workspace-frame.is-mobile-sheet-open .draw2-workspace-right-dock {
    transform: translateY(0);
  }
  .draw2-workspace-right-dock:not(.is-open) {
    pointer-events: none;
  }
}

/* Rail controls use one predictable square geometry. Text actions such as
   Open/Create remain wider, but tool and panel launchers never stretch with
   the dock. */
@media (min-width: 701px) {
  .draw2-workspace-left-dock {
    align-items: center;
  }
  .draw2-workspace-left-dock .draw2-tool-button,
  .draw2-workspace-left-dock .draw2-panel-launcher {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
  }
}

/* Mobile keeps a single 40px touch-control rhythm for frequently used
   buttons and swatches. Timeline cells remain compact visual grid cells. */
@media (max-width: 700px) {
  :root {
    --draw2-touch-control-size: 40px;
  }
  .draw2-icon-button,
  .draw2-panel-close,
  .draw2-mobile-color-rail .draw2-color,
  .draw2-mobile-color-rail .draw2-color-add,
  .draw2-mobile-color-more,
  .draw2-workspace-timeline-region .draw2-action-row .draw2-button {
    width: var(--draw2-touch-control-size);
    min-width: var(--draw2-touch-control-size);
    height: var(--draw2-touch-control-size);
    min-height: var(--draw2-touch-control-size);
  }
  .draw2-icon-button {
    flex: 0 0 var(--draw2-touch-control-size);
    padding: 0;
  }
  .draw2-mobile-color-rail .draw2-color,
  .draw2-mobile-color-rail .draw2-color-add,
  .draw2-mobile-color-more {
    flex: 0 0 var(--draw2-touch-control-size);
  }
  .draw2-workspace-timeline-region .draw2-action-row .draw2-button {
    padding-inline: 0;
  }
}

/* Final panel contract: the palette is a compact, persistent Aseprite-like
   strip. Color editing is the only thing that belongs to the Color tab; the
   swatch grid must remain visible while Layers/Props/Tools are selected. */
.draw2-workspace-right-dock > .draw2-palette-strip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  min-width: 0;
  max-height: 116px;
  padding: 4px 6px;
  overflow: hidden;
  border-bottom: 1px solid var(--draw2-border-subtle);
  background: var(--draw2-surface);
}
.draw2-palette-active-color {
  min-width: 0;
  color: var(--draw2-text-muted);
  font: 700 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  text-align: right;
}
.draw2-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 28px);
  grid-auto-rows: 28px;
  align-content: start;
  justify-content: start;
  gap: 2px;
  min-width: 0;
  max-height: 84px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.draw2-palette-grid .draw2-color,
.draw2-palette-grid .draw2-color-add {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
}
.draw2-palette-grid .draw2-color[aria-pressed="true"] {
  border-color: var(--draw2-focus-ring);
  box-shadow: inset 0 0 0 1px var(--draw2-focus-ring);
}
.draw2-workspace-right-dock > .draw2-workspace-right-header .draw2-panel-close {
  display: none;
}
.draw2-workspace-right-dock > .draw2-workspace-right-header strong {
  font-size: 0;
}
.draw2-workspace-right-dock > .draw2-workspace-tabs {
  flex: 0 0 auto;
  min-width: 0;
  overflow-x: auto;
}
.draw2-workspace-right-dock > .draw2-workspace-panel:not([hidden]) {
  min-height: 0;
}

/* The top rail consumes the available width without growing vertically. The
   project slot is the flexible center so the Canvas keeps its space below. */
@media (min-width: 701px) {
  .draw2-workspace-topbar {
    grid-template-columns:
      minmax(128px, 180px) minmax(180px, 250px) minmax(220px, 1fr) auto;
    min-height: 44px;
    padding: 4px 8px;
    gap: 6px;
  }
  .draw2-workspace-brand,
  .draw2-workspace-menu-bar,
  .draw2-workspace-project-slot,
  .draw2-workspace-command-bar {
    min-width: 0;
  }
  .draw2-workspace-brand {
    overflow: hidden;
  }
  .draw2-workspace-brand strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .draw2-workspace-menu-bar {
    /* Menu popovers intentionally escape the compact rail. Clipping this row
       makes File/Edit/View appear to do nothing even though <details> opens. */
    overflow: visible;
    position: relative;
    z-index: 80;
  }
  .draw2-workspace-project-slot {
    width: 100%;
  }
  .draw2-workspace-command-bar {
    justify-content: flex-end;
  }
}

@media (max-width: 700px) {
  .draw2-workspace-right-dock
    > .draw2-workspace-right-header
    .draw2-panel-close {
    display: inline-flex;
  }
  .draw2-workspace-right-dock > .draw2-palette-strip {
    max-height: 124px;
    padding-inline: 8px;
  }
  .draw2-palette-grid {
    grid-template-columns: repeat(auto-fill, 36px);
    grid-auto-rows: 36px;
    max-height: 108px;
  }
  .draw2-palette-grid .draw2-color,
  .draw2-palette-grid .draw2-color-add {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }
}

/* Only convenience panels stay in the rail by default. The remaining panel
   views are still mounted behind the View/Tools menus and can be opened
   without adding permanent chrome around the Canvas. */
.draw2-workspace-tabs [data-panel-persistent="false"] {
  display: none !important;
}
.draw2-workspace-panel-launcher
  [data-workspace-panel]:not([data-workspace-panel="color"]) {
  display: none;
}

/* Keep the application menus reachable on phone layouts. Core drawing tools
   remain in the fixed rail; View/Tools expose every secondary panel. */
@media (max-width: 700px) {
  .draw2-workspace-topbar {
    grid-template-rows: 34px 34px 30px;
  }
  .draw2-workspace-menu-bar {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 3;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    gap: 2px;
    border-top: 1px solid var(--draw2-border-subtle);
    padding-top: 2px;
  }
  .draw2-menu {
    flex: 1 1 0;
    min-width: 0;
  }
  .draw2-menu summary {
    justify-content: center;
    width: 100%;
    min-height: 26px;
    padding-inline: 2px;
    font-size: 0.6rem;
  }
  .draw2-menu-popover {
    top: calc(100% + 2px);
    min-width: 136px;
  }
  .draw2-menu:nth-last-child(-n+2) > .draw2-menu-popover {
    left: auto;
    right: 0;
  }
  .draw2-workspace-panel-launcher
    [data-workspace-panel]:not([data-workspace-panel="color"]) {
    display: none;
  }
}

/* Final top-rail order: application navigation first, frequent editing
   actions directly below it. Project identity/input stays on the third line
   on phone layouts and on the lower row of the compact desktop rail. */
@media (min-width: 701px) {
  .draw2-workspace-topbar {
    grid-template-columns: minmax(128px, 180px) minmax(0, 1fr) auto;
    grid-template-rows: 30px 34px;
    align-items: center;
    min-height: 70px;
    row-gap: 3px;
  }
  .draw2-workspace-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .draw2-workspace-menu-bar {
    grid-column: 2 / -1;
    grid-row: 1;
    justify-content: flex-start;
  }
  .draw2-workspace-project-slot {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  .draw2-workspace-command-bar {
    grid-column: 3;
    grid-row: 2;
    justify-content: flex-end;
  }
}

@media (max-width: 700px) {
  .draw2-workspace-topbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 30px 34px 34px;
    align-items: center;
    row-gap: 2px;
  }
  .draw2-workspace-menu-bar {
    grid-column: 1;
    grid-row: 1;
    border-top: 0;
    border-bottom: 1px solid var(--draw2-border-subtle);
    padding-top: 0;
  }
  .draw2-workspace-command-bar {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-end;
  }
  .draw2-workspace-project-slot {
    grid-column: 1;
    grid-row: 3;
  }
}

/* The timeline is a real workspace panel rather than an unlabeled grid. */
.draw2-workspace-timeline-region .draw2-timeline-card > .draw2-card-heading {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--draw2-space-2);
  min-height: 26px;
  margin: 0;
  padding: 0 0 var(--draw2-space-1);
  border-bottom: 1px solid var(--draw2-border-subtle);
}

.draw2-timeline-heading-content {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.draw2-timeline-heading-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--draw2-accent-strong);
}

.draw2-workspace-timeline-region
  .draw2-timeline-card
  > .draw2-card-heading
  .draw2-eyebrow {
  display: block;
  margin: 0;
  font-size: 0.56rem;
  line-height: 1;
}

.draw2-workspace-timeline-region .draw2-timeline-card > .draw2-card-heading h2 {
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1;
}

.draw2-workspace-timeline-region
  .draw2-timeline-card
  > .draw2-card-heading
  .draw2-metrics {
  display: block;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.58rem;
  text-align: right;
}

.draw2-workspace-timeline-region .draw2-timeline-card > .draw2-action-row {
  margin-top: var(--draw2-space-1);
  padding-bottom: var(--draw2-space-1);
  border-bottom: 1px solid var(--draw2-border-subtle);
}

@media (max-width: 700px) {
  .draw2-color-picker {
    width: min(100%, 240px);
  }
  .draw2-color-sv {
    inset: 22px;
  }
  .draw2-workspace-timeline-region {
    height: 164px;
  }
  .draw2-workspace-frame.is-mobile-timeline-open
    .draw2-workspace-timeline-region {
    display: flex;
    height: 164px;
  }
  #draw2WorkspaceTimelineSlot > .draw2-timeline-card {
    padding: 0;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
    height: auto;
    max-height: none;
    min-height: 0;
    margin-top: var(--draw2-space-1);
  }
}

/* PiXiEEDraw-compatible palette wheel: one raster surface contains the
   circular Hue ring and the centered square SV map. */
#draw2WorkspaceTimelineSlot .draw2-timeline-card > .draw2-card-heading {
  display: flex !important;
}

.draw2-color-picker {
  position: relative;
  width: min(100%, 260px);
  max-width: 260px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  touch-action: none;
  overscroll-behavior: contain;
}

.draw2-color-picker::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 50%;
  pointer-events: none;
}

.draw2-palette-wheel {
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  cursor: crosshair;
  image-rendering: auto;
  touch-action: none;
}

.draw2-palette-wheel-cursor {
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.draw2-palette-wheel-cursor--hue {
  width: 10px;
  height: 10px;
  border-width: 2px;
  background: rgb(8 12 18 / 20%);
}

.draw2-palette-wheel-cursor--sv {
  width: 5px;
  height: 5px;
  border-width: 1px;
  background: rgb(10 14 20 / 22%);
}

/* No persistent text value is needed beside the visual swatches. Numeric
   editing remains available inside the explicit Color panel. */
.draw2-mobile-color-active,
.draw2-palette-active-color,
.draw2-color-editor-value {
  display: none;
}

/* One size rhythm for frequently tapped controls; labels may vary but the
   interactive tile never changes size between tools, panels, and palettes. */
:root {
  --draw2-control-size: 44px;
  --draw2-timeline-cell-size: 40px;
}

/* Onion Skin stays a renderer projection. The small bounded sliders are
   optional local presentation state; they never enter ProjectState. */
.draw2-onion-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 70px;
  min-height: var(--draw2-control-size);
  color: var(--draw2-text-muted);
  font-size: 0.72rem;
}
.draw2-onion-control input[type="range"] {
  width: 46px;
  accent-color: var(--draw2-accent-strong);
}
.draw2-onion-control output {
  min-width: 24px;
  color: var(--draw2-text-strong);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.draw2-onion-opacity {
  min-width: 86px;
}
.draw2-mirror-guide-line.is-disabled {
  stroke: var(--draw2-text-muted);
  opacity: 0.46;
  stroke-dasharray: 2 4;
}
.draw2-mirror-line-toggle {
  position: absolute;
  z-index: 9;
  display: grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid var(--draw2-border-strong);
  border-radius: 3px;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-muted);
  font-size: 0.8rem;
  line-height: 1;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgb(0 0 0 / 24%);
}
.draw2-mirror-line-toggle[data-enabled="true"] {
  border-color: var(--draw2-accent-strong);
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 18%,
    var(--draw2-surface-raised)
  );
  color: var(--draw2-accent-strong);
}
.draw2-mirror-line-toggle:focus-visible,
.draw2-mirror-line-toggle:hover {
  border-color: var(--draw2-focus);
  outline: 2px solid color-mix(in srgb, var(--draw2-focus) 44%, transparent);
  outline-offset: 1px;
}

.draw2-canvas-resize-preview {
  display: grid;
  gap: var(--draw2-space-2);
  margin-top: var(--draw2-space-2);
  padding: var(--draw2-space-2);
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
}
.draw2-canvas-resize-preview-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--draw2-space-2);
  min-width: 0;
  color: var(--draw2-text-strong);
  font-size: 0.76rem;
}
.draw2-canvas-resize-preview-heading output {
  min-width: 0;
  overflow: hidden;
  color: var(--draw2-accent-strong);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-canvas-resize-preview-viewport {
  display: grid;
  place-items: center;
  min-height: 154px;
  overflow: hidden;
  background:
    linear-gradient(
      45deg,
      rgb(255 255 255 / 7%) 25%,
      transparent 25% 75%,
      rgb(255 255 255 / 7%) 75%
    ),
    linear-gradient(
    45deg,
    rgb(255 255 255 / 7%) 25%,
    transparent 25% 75%,
    rgb(255 255 255 / 7%) 75%
  ),
    var(--draw2-surface-input);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}
.draw2-canvas-resize-preview-frame {
  position: relative;
  max-width: 100%;
  max-height: 140px;
  border: 1px solid var(--draw2-accent-strong);
  background: color-mix(in srgb, var(--draw2-accent-strong) 10%, transparent);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 45%);
}
.draw2-canvas-resize-preview-content {
  position: absolute;
  border: 1px dashed var(--draw2-text-strong);
  background: repeating-linear-gradient(
    45deg,
    rgb(255 255 255 / 11%) 0 4px,
    transparent 4px 8px
  );
  box-sizing: border-box;
}
.draw2-canvas-resize-anchor {
  min-width: 0;
  padding: var(--draw2-space-1);
  border: 0;
}
.draw2-canvas-resize-anchor legend {
  padding: 0;
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
}
.draw2-canvas-resize-anchor-grid {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  justify-content: center;
  gap: 3px;
}
.draw2-canvas-resize-anchor-grid button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: var(--draw2-surface-input);
  color: var(--draw2-text-muted);
  font-size: 0.9rem;
}
.draw2-canvas-resize-anchor-grid button.is-active,
.draw2-canvas-resize-anchor-grid button:hover,
.draw2-canvas-resize-anchor-grid button:focus-visible {
  border-color: var(--draw2-accent-strong);
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 16%,
    var(--draw2-surface-input)
  );
  color: var(--draw2-accent-strong);
}

@media (max-width: 700px) {
  .draw2-onion-control {
    min-width: 58px;
  }
  .draw2-onion-control input[type="range"] {
    width: 38px;
  }
  .draw2-onion-control output {
    display: none;
  }
  .draw2-canvas-resize-preview-heading output {
    font-size: 0.6rem;
  }
  .draw2-canvas-resize-preview-viewport {
    min-height: 132px;
  }
}

.draw2-icon-button,
.draw2-tool-button,
.draw2-panel-launcher {
  box-sizing: border-box;
  width: var(--draw2-control-size);
  min-width: var(--draw2-control-size);
  max-width: var(--draw2-control-size);
  height: var(--draw2-control-size);
  min-height: var(--draw2-control-size);
  max-height: var(--draw2-control-size);
  padding: 0;
}

.draw2-tool-button,
.draw2-panel-launcher {
  aspect-ratio: 1;
}

.draw2-color,
.draw2-color-add {
  box-sizing: border-box;
  width: var(--draw2-control-size);
  min-width: var(--draw2-control-size);
  max-width: var(--draw2-control-size);
  height: var(--draw2-control-size);
  min-height: var(--draw2-control-size);
  max-height: var(--draw2-control-size);
}

.draw2-palette-grid {
  grid-template-columns: repeat(auto-fill, var(--draw2-control-size));
  grid-auto-rows: var(--draw2-control-size);
  max-height: calc(var(--draw2-control-size) * 2 + 2px);
}

.draw2-palette-grid .draw2-color,
.draw2-palette-grid .draw2-color-add {
  width: var(--draw2-control-size);
  min-width: var(--draw2-control-size);
  max-width: var(--draw2-control-size);
  height: var(--draw2-control-size);
  min-height: var(--draw2-control-size);
  max-height: var(--draw2-control-size);
}

.draw2-workspace-panel-launcher {
  flex: 0 0 var(--draw2-control-size);
  height: var(--draw2-control-size);
}

.draw2-workspace-panel-launcher .draw2-panel-launcher {
  flex: 0 0 var(--draw2-control-size);
  width: var(--draw2-control-size);
  min-width: var(--draw2-control-size);
  max-width: var(--draw2-control-size);
  height: var(--draw2-control-size);
  min-height: var(--draw2-control-size);
  max-height: var(--draw2-control-size);
}

.draw2-timeline-cell {
  box-sizing: border-box;
  width: var(--draw2-timeline-cell-size);
  min-width: var(--draw2-timeline-cell-size);
  max-width: var(--draw2-timeline-cell-size);
  height: var(--draw2-timeline-cell-size);
  min-height: var(--draw2-timeline-cell-size);
  max-height: var(--draw2-timeline-cell-size);
  padding: 0;
  border-radius: 2px;
}

/* PiXiEEDraw-compatible matrix: the frame-number row is the only visible
   frame label; body cels stay square, quiet, and aligned under that row. */
.draw2-timeline-viewport {
  --draw2-timeline-label-width: 132px !important;
  --draw2-timeline-cell-width: var(--draw2-timeline-cell-size) !important;
  --draw2-timeline-row-height: var(--draw2-timeline-cell-size) !important;
}
.draw2-timeline-header-row {
  position: sticky;
  top: 0;
  z-index: 4;
  min-width: 100%;
  background: var(--draw2-surface-raised);
}
.draw2-timeline-corner,
.draw2-timeline-frame-header {
  box-sizing: border-box;
  height: var(--draw2-timeline-cell-size);
  min-height: var(--draw2-timeline-cell-size);
  border: 1px solid var(--draw2-border);
  border-radius: 2px;
  background: var(--draw2-surface-raised);
}
.draw2-timeline-corner {
  position: sticky;
  left: 0;
  z-index: 6;
  width: var(--draw2-timeline-label-width);
}
.draw2-timeline-command-cell {
  padding: 0;
  color: var(--draw2-muted);
  cursor: pointer;
}
.draw2-timeline-command-cell:hover,
.draw2-timeline-command-cell:focus-visible {
  border-color: var(--draw2-focus);
  color: var(--draw2-text-strong);
}
.draw2-timeline-frame-header {
  position: absolute;
  top: 0;
  width: var(--draw2-timeline-cell-size);
  min-width: var(--draw2-timeline-cell-size);
  max-width: var(--draw2-timeline-cell-size);
  padding: 0;
  color: var(--draw2-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.draw2-timeline-frame-header[aria-selected="true"] {
  border-color: var(--draw2-focus);
  color: var(--draw2-text-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--draw2-focus) 45%, transparent);
}
.draw2-timeline-row-label {
  position: sticky;
  left: 0;
  z-index: 3;
  width: var(--draw2-timeline-label-width) !important;
  min-width: var(--draw2-timeline-label-width);
  height: var(--draw2-timeline-row-height) !important;
  min-height: var(--draw2-timeline-row-height);
  border-radius: 2px;
}
.draw2-timeline-cell {
  top: 0 !important;
  width: var(--draw2-timeline-cell-size) !important;
  min-width: var(--draw2-timeline-cell-size) !important;
  max-width: var(--draw2-timeline-cell-size) !important;
  height: var(--draw2-timeline-cell-size) !important;
  min-height: var(--draw2-timeline-cell-size) !important;
  max-height: var(--draw2-timeline-cell-size) !important;
  border-radius: 2px !important;
}
.draw2-timeline-cell[data-has-drawing="true"]::before {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--draw2-accent-strong);
  content: "";
}
.draw2-timeline-cell {
  cursor: pointer;
}
.draw2-timeline-cell:hover,
.draw2-timeline-cell:focus-visible {
  border-color: var(--draw2-accent-strong) !important;
  outline: 0;
}
.draw2-timeline-display-actions {
  min-height: var(--draw2-control-size);
}

@media (max-width: 700px) {
  .draw2-timeline-viewport {
    --draw2-timeline-label-width: 88px !important;
    --draw2-timeline-cell-width: var(--draw2-timeline-cell-size) !important;
    --draw2-timeline-row-height: var(--draw2-timeline-cell-size) !important;
  }
}

/* Final density pass: desktop controls are slightly smaller while mobile
   keeps its 40px touch rhythm. Structural separators disappear where the
   surrounding surface already communicates the region boundary. */
@media (min-width: 701px) {
  :root {
    --draw2-control-size: 40px;
  }
  .draw2-workspace-left-dock {
    gap: 2px;
    padding: 4px 3px;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .draw2-workspace-left-dock .draw2-workspace-toolbar,
  .draw2-workspace-left-dock .draw2-workspace-panel-launcher {
    gap: 2px;
  }
  .draw2-workspace-left-dock .draw2-tool-button,
  .draw2-workspace-left-dock .draw2-panel-launcher {
    flex-basis: var(--draw2-control-size) !important;
    width: var(--draw2-control-size) !important;
    min-width: var(--draw2-control-size) !important;
    height: var(--draw2-control-size) !important;
    min-height: var(--draw2-control-size) !important;
  }
  .draw2-workspace-topbar,
  .draw2-workspace-right-dock,
  .draw2-workspace-right-header,
  .draw2-workspace-tabs,
  .draw2-workspace-timeline-region,
  .draw2-color-editor {
    border-bottom: 0 !important;
  }
  .draw2-workspace-right-dock {
    border-right: 0 !important;
  }
  .draw2-icon-button,
  .draw2-tool-button,
  .draw2-panel-launcher,
  .draw2-panel-close {
    border-color: transparent;
  }
  .draw2-icon-button:hover,
  .draw2-tool-button:hover,
  .draw2-panel-launcher:hover,
  .draw2-panel-close:hover,
  .draw2-icon-button:focus-visible,
  .draw2-tool-button:focus-visible,
  .draw2-panel-launcher:focus-visible,
  .draw2-panel-close:focus-visible {
    border-color: var(--draw2-border-subtle);
  }
  .draw2-tool-button.is-active,
  .draw2-panel-launcher.is-active {
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--draw2-accent-strong);
  }
}

/* Mobile Timeline is a wider, taller bottom sheet. The grid owns both axes;
   the page and the Canvas never become the scroll surface for Timeline. */
@media (max-width: 700px) {
  .draw2-workspace-timeline-region {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: calc(
      var(--draw2-mobile-rail-height) + env(safe-area-inset-bottom, 0px)
    );
    z-index: 18;
    display: none !important;
    height: min(260px, 42dvh) !important;
    padding: 6px 8px !important;
    border: 0 !important;
    background: var(--draw2-surface);
    box-shadow: 0 -12px 30px rgb(0 0 0 / 26%);
  }
  .draw2-workspace-frame.is-mobile-timeline-open
    .draw2-workspace-timeline-region {
    display: flex !important;
  }
  #draw2WorkspaceTimelineSlot,
  #draw2WorkspaceTimelineSlot > .draw2-timeline-card {
    width: 100%;
    height: 100% !important;
    max-height: none !important;
    min-height: 0;
  }
  #draw2WorkspaceTimelineSlot > .draw2-timeline-card {
    gap: 2px;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-card > .draw2-card-heading {
    flex: 0 0 24px;
    min-height: 24px;
    padding: 0;
    border: 0 !important;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-heading-content > div {
    display: none;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-heading-icon {
    width: 20px;
    height: 20px;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-card > .draw2-action-row {
    flex: 0 0 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    border: 0 !important;
  }
  #draw2WorkspaceTimelineSlot
    .draw2-timeline-card
    > .draw2-action-row
    .draw2-button {
    width: var(--draw2-touch-control-size, 40px);
    min-width: var(--draw2-touch-control-size, 40px);
    height: var(--draw2-touch-control-size, 40px);
    min-height: var(--draw2-touch-control-size, 40px);
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
    flex: 1 1 auto;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    margin: 0;
    border-radius: 2px;
  }
}

/* Final cascade after all legacy/demo rules. This is intentionally small and
   high-specificity: the full token specification lives above, while these
   declarations protect the geometry that must win in the shipped shell. */
:root {
  --draw2-control-size: 32px;
  --draw2-timeline-cell-size: 30px;
}
.draw2-workspace-frame .draw2-tool-group-summary,
.draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-button {
  border-width: 1px !important;
  border-radius: 4px !important;
}
.draw2-workspace-frame #draw2WorkspaceCanvasSlot > .draw2-canvas-card {
  border: 1px solid var(--draw2-border-strong) !important;
  border-radius: 4px !important;
}
.draw2-workspace-frame .draw2-workspace-right-header {
  height: 32px !important;
  min-height: 32px !important;
  border-bottom: 1px solid var(--draw2-border-subtle) !important;
}
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
  border: 1px solid var(--draw2-border-subtle) !important;
  border-radius: 4px !important;
}
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell,
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-frame-header,
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-corner,
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-row-label {
  border: 1px solid var(--draw2-border-subtle) !important;
  border-radius: 2px !important;
}
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  box-shadow: none !important;
}
.draw2-workspace-frame
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-cell[aria-selected="true"] {
  box-shadow: inset 0 0 0 1px var(--draw2-accent-strong) !important;
}

@media (max-width: 700px) {
  :root {
    --draw2-control-size: 40px;
    --draw2-timeline-cell-size: 32px;
  }
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
  .draw2-workspace-frame
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-frame-header,
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-corner,
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-row-label {
    min-height: 32px !important;
    height: 32px !important;
  }
}

/* Timeline control cleanup: Onion is a single visible toggle. Its detailed
   ranges appear only while enabled, and low-frequency structural actions are
   kept in the cell context menu and the application Timeline menu. */
.draw2-timeline-toolbar > .draw2-timeline-onion-options > summary,
.draw2-timeline-toolbar > .draw2-timeline-more-actions {
  display: none !important;
}
.draw2-timeline-toolbar > .draw2-timeline-onion-options {
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.draw2-timeline-onion-popover.is-timeline-popover-positioned {
  position: fixed !important;
  z-index: 280 !important;
  left: 0;
  top: 0;
  right: auto !important;
  bottom: auto !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  overflow: auto !important;
}

/* The corner is the explicit Layer × Frame intersection action. */
.draw2-timeline-header-row {
  z-index: 12;
}
.draw2-timeline-corner {
  top: 0;
  z-index: 14;
}

/* Keep the three density states real even though the normal matrix stays
   square and compact. */
#draw2WorkspaceTimelineSlot
  .draw2-timeline-card[data-timeline-collapse="compact"]
  .draw2-timeline-viewport {
  --draw2-timeline-cell-size: 26px !important;
  --draw2-timeline-cell-width: 26px !important;
  --draw2-timeline-row-height: 26px !important;
}
#draw2WorkspaceTimelineSlot
  .draw2-timeline-card[data-timeline-collapse="compact"]
  .draw2-timeline-cell,
#draw2WorkspaceTimelineSlot
  .draw2-timeline-card[data-timeline-collapse="compact"]
  .draw2-timeline-frame-header {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
}
#draw2WorkspaceTimelineSlot
  .draw2-timeline-card[data-timeline-collapse="compact"]
  .draw2-timeline-row,
#draw2WorkspaceTimelineSlot
  .draw2-timeline-card[data-timeline-collapse="compact"]
  .draw2-timeline-row-label,
#draw2WorkspaceTimelineSlot
  .draw2-timeline-card[data-timeline-collapse="compact"]
  .draw2-timeline-corner {
  height: 26px !important;
  min-height: 26px !important;
}

/* Top menus leave their scroll rail but promote an open panel to a viewport
   layer, so icon-only menu buttons remain usable at narrow desktop widths. */
.draw2-menu-popover.is-menu-positioned {
  position: fixed !important;
  z-index: 300 !important;
  left: 0;
  top: 0;
  right: auto !important;
  bottom: auto !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  overflow: auto !important;
}

/* At compact desktop widths keep the complete menu discoverable without
   allowing its text to overlap the project slot or command bar. The icon and
   accessible label remain; the full menu labels return at large widths. */
@media (max-width: 1399px) and (min-width: 701px) {
  .draw2-workspace-global-row {
    grid-template-columns: 128px minmax(220px, 1fr) 180px auto !important;
  }
  .draw2-workspace-menu-bar {
    overflow: hidden !important;
  }
  .draw2-workspace-menu-bar .draw2-menu {
    flex: 0 0 32px !important;
  }
  .draw2-workspace-menu-bar .draw2-menu summary {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    justify-content: center;
    font-size: 0 !important;
  }
  .draw2-workspace-menu-bar .draw2-menu-icon {
    width: 16px !important;
    height: 16px !important;
  }
  .draw2-workspace-project-slot {
    max-width: 180px;
  }
}

/* -------------------------------------------------------------------------
   Visual Canonical: Desktop reference image pixel-match pass
   Keep this cascade last so the legacy reference/demo rules cannot widen
   controls or reintroduce dashboard-like cards. Domain and canvas rules are
   intentionally out of scope here.
   ------------------------------------------------------------------------- */
:root {
  --ui-unit: 4px;
  --menu-h: 38px;
  --context-toolbar-h: 40px;
  --tool-rail-w: 48px;
  --control-h: 32px;
  --icon-button-size: 34px;
  --icon-size: 20px;
  --panel-header-h: 32px;
  --radius-control: 4px;
  --radius-panel: 4px;
  --radius-popover: 6px;
  --border-w: 1px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --draw2-tool-rail-width: var(--tool-rail-w);
  --draw2-control-size: var(--control-h);
  --draw2-icon-size: var(--icon-size);
  --draw2-radius-sm: var(--radius-control);
  --draw2-radius-md: var(--radius-panel);
  --draw2-radius-lg: var(--radius-popover);
  --draw2-timeline-cell-size: 30px;
}

.draw2-workspace-frame {
  --draw2-timeline-label-width: 148px;
  --draw2-timeline-cell-width: 30px;
  --draw2-timeline-row-height: 30px;
}

.draw2-workspace-topbar {
  border-bottom: var(--border-w) solid var(--draw2-border-subtle) !important;
}
.draw2-workspace-global-row {
  min-height: var(--menu-h) !important;
  height: var(--menu-h) !important;
  padding: 2px 8px !important;
  gap: var(--space-xs) !important;
}
.draw2-workspace-context-row {
  min-height: var(--context-toolbar-h) !important;
  height: var(--context-toolbar-h) !important;
  padding: 3px 8px !important;
  border-top: var(--border-w) solid
    color-mix(in srgb, var(--draw2-border-subtle) 65%, transparent) !important;
}
.draw2-workspace-menu-bar .draw2-menu summary {
  min-height: 30px !important;
  height: 30px !important;
  padding-inline: 8px !important;
  border-radius: var(--radius-control) !important;
  font-size: 13px !important;
}
.draw2-workspace-brand strong {
  font-size: 12px !important;
}
.draw2-workspace-command-bar {
  gap: var(--space-xs) !important;
}

.draw2-workspace-frame .draw2-icon-button,
.draw2-workspace-frame .draw2-panel-launcher,
.draw2-workspace-frame .draw2-panel-close {
  box-sizing: border-box;
  width: var(--icon-button-size) !important;
  min-width: var(--icon-button-size) !important;
  max-width: var(--icon-button-size) !important;
  height: var(--icon-button-size) !important;
  min-height: var(--icon-button-size) !important;
  max-height: var(--icon-button-size) !important;
  padding: 0 !important;
  border-width: var(--border-w) !important;
  border-radius: var(--radius-control) !important;
}
.draw2-workspace-frame .draw2-icon-button .draw2-ui-icon,
.draw2-workspace-frame .draw2-panel-launcher .draw2-ui-icon,
.draw2-workspace-frame .draw2-panel-close .draw2-ui-icon {
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
}
.draw2-workspace-frame .draw2-button {
  min-height: var(--control-h) !important;
  height: var(--control-h);
  padding-inline: 12px;
  border: var(--border-w) solid var(--draw2-border-subtle);
  border-radius: var(--radius-control) !important;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
  font-size: 12px;
  font-weight: 600;
}
.draw2-workspace-frame .draw2-button:not(.draw2-button-secondary) {
  border-color: color-mix(
    in srgb,
    var(--draw2-accent-strong) 48%,
    var(--draw2-border-subtle)
  );
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 14%,
    var(--draw2-surface-raised)
  );
}
.draw2-workspace-frame .draw2-button:active,
.draw2-workspace-frame .draw2-icon-button:active,
.draw2-workspace-frame .draw2-panel-launcher:active {
  transform: translateY(1px);
}

.draw2-workspace-frame
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(
    [type="color"]
  ),
.draw2-workspace-frame select {
  box-sizing: border-box;
  min-height: 30px !important;
  height: 30px;
  padding-inline: 8px;
  border: var(--border-w) solid var(--draw2-border-subtle);
  border-radius: var(--radius-control) !important;
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font-size: 12px;
}

.draw2-workspace-left-dock {
  width: var(--tool-rail-w) !important;
  min-width: var(--tool-rail-w) !important;
  padding: 8px 6px !important;
  gap: 8px !important;
  border-right: var(--border-w) solid var(--draw2-border-subtle) !important;
}
.draw2-workspace-toolbar {
  gap: 3px !important;
}
.draw2-workspace-left-dock .draw2-tool-group,
.draw2-workspace-left-dock .draw2-tool-group-summary,
.draw2-workspace-left-dock .draw2-workspace-toolbar > .draw2-tool-button {
  box-sizing: border-box;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: var(--radius-control) !important;
}
.draw2-workspace-left-dock .draw2-tool-group-summary,
.draw2-workspace-left-dock .draw2-workspace-toolbar > .draw2-tool-button {
  border: var(--border-w) solid transparent;
}
.draw2-workspace-left-dock .draw2-tool-icon {
  width: 20px !important;
  height: 20px !important;
}
.draw2-tool-popover {
  border-radius: var(--radius-popover) !important;
  padding: var(--space-xs) !important;
}

.draw2-workspace-canvas-region {
  padding: 8px !important;
}
#draw2WorkspaceCanvasSlot > .draw2-canvas-card {
  border: var(--border-w) solid var(--draw2-border-strong) !important;
  border-radius: var(--radius-panel) !important;
  background: var(--draw2-surface-canvas) !important;
}

.draw2-workspace-right-dock {
  border-left: var(--border-w) solid var(--draw2-border-subtle) !important;
  border-radius: var(--radius-panel) 0 0 var(--radius-panel) !important;
  box-shadow: none !important;
}
.draw2-workspace-right-header {
  min-height: var(--panel-header-h) !important;
  height: var(--panel-header-h);
  padding: 0 8px !important;
  border-bottom: var(--border-w) solid var(--draw2-border-subtle) !important;
}
.draw2-workspace-right-header strong {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.draw2-workspace-tabs {
  gap: 0 !important;
  padding: 0 8px !important;
  border-bottom: var(--border-w) solid var(--draw2-border-subtle) !important;
}
.draw2-workspace-tab {
  min-height: 30px !important;
  height: 30px;
  padding-inline: 10px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--draw2-muted);
  font-size: 12px !important;
}
.draw2-workspace-tab.is-active {
  border-bottom-color: var(--draw2-accent-strong) !important;
  color: var(--draw2-text-strong);
}
.draw2-palette-strip {
  padding: 8px !important;
  border-bottom: var(--border-w) solid var(--draw2-border-subtle) !important;
}
.draw2-workspace-panel {
  padding: 8px !important;
}
.draw2-workspace-panel > .draw2-card-heading,
.draw2-workspace-panel > .draw2-help,
.draw2-workspace-panel > .draw2-metrics {
  display: none !important;
}
.draw2-panel-summary,
.draw2-unavailable-state {
  padding: 8px !important;
  border-radius: var(--radius-panel) !important;
}

.draw2-layer-row {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: var(--border-w) solid transparent !important;
  border-radius: var(--radius-control) !important;
}
.draw2-layer-row > button,
.draw2-layer-name-group > .draw2-layer-visibility,
.draw2-layer-name-group > .draw2-layer-select,
.draw2-layer-blend {
  height: 28px !important;
  min-height: 28px !important;
  border-radius: var(--radius-control) !important;
}
.draw2-layer-row.is-active {
  border-color: var(--draw2-accent-strong) !important;
  background: var(--draw2-surface-raised);
}

.draw2-workspace-timeline-region {
  padding: 4px 8px 6px !important;
  border-top: var(--border-w) solid var(--draw2-border-subtle) !important;
}
#draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
  --draw2-timeline-label-width: 148px !important;
  --draw2-timeline-cell-width: 30px !important;
  --draw2-timeline-row-height: 30px !important;
  border: var(--border-w) solid var(--draw2-border-subtle) !important;
  border-radius: var(--radius-panel) !important;
}
.draw2-timeline-corner,
.draw2-timeline-frame-header,
.draw2-timeline-row-label {
  height: 30px !important;
  min-height: 30px !important;
  border: var(--border-w) solid var(--draw2-border-subtle) !important;
  border-radius: 2px !important;
}
.draw2-timeline-frame-header {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  font-size: 12px;
}
.draw2-timeline-row {
  height: 30px !important;
}
.draw2-timeline-row-label {
  width: 148px !important;
  min-width: 148px !important;
  padding-inline: 8px !important;
  font-size: 12px;
}
.draw2-timeline-cell {
  top: 0 !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  border: var(--border-w) solid var(--draw2-border-subtle) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.draw2-timeline-cell[aria-selected="true"] {
  box-shadow: inset 0 0 0 1px var(--draw2-accent-strong) !important;
}
.draw2-timeline-display-actions {
  gap: var(--space-xs) !important;
}
.draw2-workspace-timeline-region .draw2-timeline-display-actions .draw2-button {
  width: var(--icon-button-size) !important;
  min-width: var(--icon-button-size) !important;
  height: var(--icon-button-size) !important;
  min-height: var(--icon-button-size) !important;
  padding: 0 !important;
}

.draw2-mini-preview {
  width: 148px !important;
  height: 148px !important;
  padding: 4px !important;
  border-radius: var(--radius-panel) !important;
  box-shadow: none !important;
}
.draw2-mini-preview canvas {
  width: 140px !important;
  height: 140px !important;
}
.draw2-workspace-statusbar {
  min-height: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
}

@media (max-width: 700px) {
  :root {
    --draw2-control-size: 40px;
    --draw2-timeline-cell-size: 32px;
  }
  .draw2-workspace-left-dock {
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px !important;
  }
  .draw2-workspace-left-dock .draw2-tool-group,
  .draw2-workspace-left-dock .draw2-tool-group-summary,
  .draw2-workspace-left-dock .draw2-workspace-toolbar > .draw2-tool-button,
  .draw2-workspace-left-dock .draw2-panel-launcher {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
    --draw2-timeline-label-width: 88px !important;
    --draw2-timeline-cell-width: 32px !important;
    --draw2-timeline-row-height: 32px !important;
  }
  .draw2-timeline-corner,
  .draw2-timeline-frame-header,
  .draw2-timeline-row-label {
    height: 32px !important;
    min-height: 32px !important;
  }
  .draw2-timeline-frame-header,
  .draw2-timeline-cell {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }
  .draw2-timeline-cell {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
  .draw2-timeline-row {
    height: 32px !important;
  }
  .draw2-timeline-row-label {
    width: 88px !important;
    min-width: 88px !important;
  }
  .draw2-mini-preview {
    width: 104px !important;
    height: 104px !important;
  }
  .draw2-mini-preview canvas {
    width: 96px !important;
    height: 96px !important;
  }
}

/* Final size lock: later legacy refinements cannot shrink a palette swatch or
   panel launcher below the shared Draw2 touch/control rhythm. */
.draw2-palette-grid {
  grid-template-columns:
    repeat(auto-fill, var(--draw2-control-size)) !important;
  grid-auto-rows: var(--draw2-control-size) !important;
  max-height: calc(var(--draw2-control-size) * 2 + 3px) !important;
}

.draw2-palette-grid .draw2-color,
.draw2-palette-grid .draw2-color-add {
  width: var(--draw2-control-size) !important;
  min-width: var(--draw2-control-size) !important;
  max-width: var(--draw2-control-size) !important;
  height: var(--draw2-control-size) !important;
  min-height: var(--draw2-control-size) !important;
  max-height: var(--draw2-control-size) !important;
}

.draw2-workspace-panel-launcher {
  flex-basis: var(--draw2-control-size) !important;
  height: var(--draw2-control-size) !important;
}

.draw2-workspace-panel-launcher .draw2-panel-launcher {
  flex-basis: var(--draw2-control-size) !important;
  width: var(--draw2-control-size) !important;
  min-width: var(--draw2-control-size) !important;
  max-width: var(--draw2-control-size) !important;
  height: var(--draw2-control-size) !important;
  min-height: var(--draw2-control-size) !important;
  max-height: var(--draw2-control-size) !important;
}

#draw2WorkspaceLeftDock .draw2-tool-button,
#draw2WorkspaceLeftDock .draw2-panel-launcher {
  width: var(--draw2-control-size) !important;
  min-width: var(--draw2-control-size) !important;
  max-width: var(--draw2-control-size) !important;
  height: var(--draw2-control-size) !important;
  min-height: var(--draw2-control-size) !important;
  max-height: var(--draw2-control-size) !important;
}

@media (max-width: 700px) {
  .draw2-workspace-toolbar {
    flex-basis: var(--draw2-control-size) !important;
    height: var(--draw2-control-size) !important;
  }
  .draw2-mobile-color-rail {
    grid-template-rows: auto !important;
  }
  .draw2-mobile-color-rail .draw2-palette-grid {
    grid-template-rows: repeat(2, var(--draw2-control-size)) !important;
    grid-auto-columns: var(--draw2-control-size) !important;
    max-height: calc(var(--draw2-control-size) * 2 + 3px) !important;
  }
  .draw2-mobile-color-rail .draw2-color,
  .draw2-mobile-color-rail .draw2-color-add {
    width: var(--draw2-control-size) !important;
    min-width: var(--draw2-control-size) !important;
    max-width: var(--draw2-control-size) !important;
    height: var(--draw2-control-size) !important;
    min-height: var(--draw2-control-size) !important;
    max-height: var(--draw2-control-size) !important;
  }
}

/* PiXiEED Pixel UI contract: the Draw2 representative screen uses a compact
   integer grid and hard-edged surfaces. This is the final authority block. */
:root {
  --px-unit: 2px;
  --px-space-1: 2px;
  --px-space-2: 4px;
  --px-space-3: 6px;
  --px-space-4: 8px;
  --px-space-6: 12px;
  --px-space-8: 16px;
  --px-radius: 2px;
  --px-outline: #090c12;
  --px-border: #53627a;
  --px-inner: #a9b4c4;
  --px-highlight: #f7f9fc;
  --px-shadow: #090c12;
  --draw2-radius-sm: var(--px-radius);
  --draw2-radius-md: var(--px-radius);
  --draw2-radius-lg: var(--px-radius);
  --draw2-shadow-panel: 2px 2px 0 var(--px-shadow);
}

.draw2-ui-icon,
.draw2-ui-icon use {
  shape-rendering: crispEdges;
}

.draw2-badge,
.draw2-card,
.draw2-canvas-card,
.draw2-workspace-frame,
.draw2-viewport-wrap,
.draw2-timeline-viewport,
.draw2-runtime-preview-viewport,
.draw2-command-palette,
.draw2-tool-popover,
.draw2-workspace-right-dock {
  border-radius: var(--px-radius);
  box-shadow: var(--draw2-shadow-panel);
}

.draw2-workspace-frame,
.draw2-workspace-frame > *,
.draw2-workspace-right-dock,
.draw2-workspace-timeline-region {
  border-color: var(--px-border);
}

.draw2-icon-button,
.draw2-tool-button,
.draw2-panel-launcher,
.draw2-panel-close,
.draw2-tool-group > summary {
  border-radius: var(--px-radius);
  box-shadow: none;
}

/* The rail is a normal icon grid. No triangle, badge, pseudo-marker, or
   inner outline is used to advertise that a group has children. */
.draw2-tool-group > summary::before,
.draw2-tool-group > summary::after,
.draw2-tool-group.is-active > summary::before,
.draw2-tool-group.is-active > summary::after {
  display: none !important;
  content: none !important;
}
.draw2-tool-group.is-active > summary,
.draw2-tool-group[open] > summary {
  border: 2px solid var(--draw2-accent-strong);
  background: var(--draw2-surface-raised);
  box-shadow: none;
}

/* A child group is a small window, never a one-line strip. Three columns keep
   6–7 tools readable and leave a bounded edge on narrow viewports. */
.draw2-tool-popover {
  grid-template-columns: repeat(3, 56px) !important;
  grid-auto-rows: 40px;
  gap: var(--px-space-1);
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: var(--px-space-2);
  border: 2px solid var(--px-border);
  box-shadow: 2px 2px 0 var(--px-shadow);
  background: var(--draw2-surface);
}
#draw2WorkspaceLeftDock .draw2-tool-popover .draw2-tool-button {
  display: grid !important;
  grid-template-rows: 22px 14px;
  place-items: center;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: var(--px-space-1) !important;
  border: 1px solid transparent;
  border-radius: var(--px-radius);
}
#draw2WorkspaceLeftDock .draw2-tool-popover .draw2-tool-button span {
  display: block !important;
  max-width: 52px;
  overflow: hidden;
  font-size: 9px;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#draw2WorkspaceLeftDock .draw2-tool-popover .draw2-tool-button .draw2-ui-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}
.draw2-tool-popover .draw2-tool-button:hover,
.draw2-tool-popover .draw2-tool-button:focus-visible,
.draw2-tool-popover .draw2-tool-button.is-active {
  border-color: var(--draw2-accent-strong);
  outline: 0;
  background: var(--draw2-surface-raised);
}

@media (min-width: 701px) {
  :root {
    --draw2-control-size: 40px;
  }
  .draw2-workspace-left-dock {
    position: relative;
    z-index: 60;
    overflow: visible;
  }
  .draw2-workspace-left-dock .draw2-workspace-toolbar,
  .draw2-tool-group[open] {
    position: relative;
    z-index: 61;
    overflow: visible;
  }
  .draw2-workspace-canvas-region {
    z-index: 0;
  }
  .draw2-workspace-left-dock .draw2-tool-popover {
    left: auto;
    right: calc(100% + var(--px-space-2));
  }
}

@media (max-width: 700px) {
  :root {
    --draw2-control-size: 44px;
  }
  .draw2-tool-popover {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(
      var(--draw2-mobile-rail-height) + env(safe-area-inset-bottom, 0px)
        + var(--px-space-2)
    );
    top: auto;
    transform: translateX(-50%);
  }
  #draw2WorkspaceLeftDock .draw2-tool-popover .draw2-tool-button {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}

/* Final compact workspace pass: the application rail follows the clear
   two-level rhythm of desktop pixel editors, while the canvas and timeline
   lose decorative containers that do not add interaction value. */
@media (min-width: 701px) {
  .draw2-workspace-frame {
    --draw2-tool-dock-width: 52px;
    grid-template-columns:
      minmax(244px, var(--draw2-color-dock-width)) minmax(0, 1fr) minmax(
        52px,
        var(--draw2-tool-dock-width)
      );
  }
  .draw2-workspace-left-dock {
    gap: 2px;
    padding: 4px 2px;
  }
  .draw2-workspace-topbar {
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) auto;
    grid-template-rows: 30px 34px;
    gap: 2px 8px;
    padding: 4px 8px;
  }
  .draw2-workspace-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .draw2-workspace-menu-bar {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .draw2-workspace-menu-bar::-webkit-scrollbar {
    display: none;
  }
  .draw2-menu summary {
    min-height: 28px;
    border-bottom: 2px solid transparent;
    border-radius: 2px;
  }
  .draw2-menu[open] summary,
  .draw2-menu summary:focus-visible {
    border-color: transparent;
    border-bottom-color: var(--draw2-accent-strong);
    background: var(--draw2-surface-raised);
  }
  .draw2-workspace-project-slot {
    grid-column: 1;
    grid-row: 2;
  }
  .draw2-workspace-quick-controls {
    grid-column: 2;
    grid-row: 2;
  }
  .draw2-workspace-command-bar {
    grid-column: 3;
    grid-row: 2;
  }
}

/* Timeline surfaces are already identified by their position. Keep the
   matrix and its sticky headers, but remove nested cards, padding, and
   container borders that made the rail look heavier than the canvas. */
.draw2-workspace-timeline-region {
  padding: 0 !important;
  border-top: 0 !important;
}
#draw2WorkspaceTimelineSlot > .draw2-timeline-card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#draw2WorkspaceTimelineSlot .draw2-timeline-display-actions {
  margin: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
}
#draw2WorkspaceTimelineSlot .draw2-timeline-creator-tools {
  margin: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--draw2-surface-canvas);
}
.draw2-timeline-header-row {
  background: var(--draw2-surface-raised);
}
.draw2-timeline-corner,
.draw2-timeline-frame-header,
.draw2-timeline-row-label {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.draw2-timeline-row-label {
  background: var(--draw2-surface-raised);
}
.draw2-timeline-cell {
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: color-mix(
    in srgb,
    var(--draw2-surface) 86%,
    var(--draw2-surface-raised)
  );
  box-shadow: inset -1px -1px 0
    color-mix(in srgb, var(--draw2-border-subtle) 42%, transparent);
}
.draw2-timeline-cell[data-empty="true"] {
  background: repeating-linear-gradient(
    135deg,
    var(--draw2-surface) 0 5px,
    var(--draw2-surface-raised) 5px 10px
  );
}
.draw2-timeline-cell[data-has-drawing="true"]::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--draw2-accent-strong);
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--draw2-accent-strong) 45%, transparent);
  content: "";
}
.draw2-timeline-row[data-layer-visible="false"]
  .draw2-timeline-cell[data-has-drawing="true"]::before {
  background: var(--draw2-text-muted);
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--draw2-text-muted) 45%, transparent);
}
.draw2-timeline-cell[aria-selected="true"] {
  box-shadow: inset 0 0 0 2px var(--draw2-accent-strong) !important;
}
.draw2-timeline-cell:hover,
.draw2-timeline-cell:focus-visible {
  border: 0 !important;
  outline: 2px solid var(--draw2-accent-strong);
  outline-offset: -2px;
}

@media (max-width: 700px) {
  .draw2-workspace-timeline-region {
    padding: 0 !important;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
    border: 0 !important;
    border-radius: 0 !important;
  }
}

/* Final rail calibration: handles retain a small hit area but expose the
   same 2px grip in every adjustable region. The content track grows and
   contracts naturally with the dock width instead of clipping palette/color
   and export panels. */
:root {
  --draw2-resize-hit-size: 12px;
  --draw2-resize-grip-thickness: 1px;
  --draw2-resize-grip-length: 32px;
}
.draw2-dock-resize-handle,
.draw2-timeline-resize-handle {
  appearance: none;
  display: block;
  border: 0 !important;
  background: transparent !important;
  opacity: 1;
  outline: 0;
}
.draw2-dock-resize-handle {
  left: calc(var(--draw2-resize-hit-size) / -2);
  width: var(--draw2-resize-hit-size);
}
.draw2-timeline-resize-handle {
  top: calc(var(--draw2-resize-hit-size) / -2);
  height: var(--draw2-resize-hit-size);
}
.draw2-dock-resize-handle::before,
.draw2-timeline-resize-handle::before {
  content: "";
  position: absolute;
  display: block;
  background: var(--draw2-border-strong);
  border-radius: var(--px-radius, 2px);
  opacity: 0.86;
  transition: background-color 120ms ease, opacity 120ms ease;
}
.draw2-dock-resize-handle::before {
  top: 50%;
  left: 50%;
  width: var(--draw2-resize-grip-thickness);
  height: var(--draw2-resize-grip-length);
  transform: translate(-50%, -50%);
}
.draw2-timeline-resize-handle::before {
  top: 50%;
  left: 50%;
  width: var(--draw2-resize-grip-length);
  height: var(--draw2-resize-grip-thickness);
  transform: translate(-50%, -50%);
}
.draw2-dock-resize-handle:hover::before,
.draw2-dock-resize-handle:focus-visible::before,
.draw2-timeline-resize-handle:hover::before,
.draw2-timeline-resize-handle:focus-visible::before {
  background: var(--draw2-accent-strong);
  opacity: 1;
}
.draw2-dock-resize-handle:focus-visible,
.draw2-timeline-resize-handle:focus-visible {
  outline: 2px solid var(--draw2-focus-ring);
  outline-offset: -1px;
}

/* The top rail has a stable two-row rhythm: menu above, project and frequent
   controls below, with the command cluster occupying the narrow end track.
   This prevents the command cluster from falling into a third implicit row. */
@media (min-width: 701px) {
  .draw2-workspace-topbar {
    grid-template-columns: minmax(164px, 220px) minmax(0, 1fr) auto !important;
    grid-template-rows: 30px 34px !important;
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
    overflow: hidden;
  }
  .draw2-workspace-topbar > .draw2-workspace-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .draw2-workspace-topbar > .draw2-workspace-menu-bar {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .draw2-workspace-topbar > .draw2-workspace-project-slot {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
  }
  .draw2-workspace-topbar > .draw2-workspace-quick-controls {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .draw2-workspace-topbar > .draw2-workspace-command-bar {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-end;
    scrollbar-width: none;
  }
  .draw2-workspace-menu-bar::-webkit-scrollbar,
  .draw2-workspace-quick-controls::-webkit-scrollbar,
  .draw2-workspace-command-bar::-webkit-scrollbar {
    display: none;
  }
  .draw2-workspace-command-bar > *,
  .draw2-workspace-quick-controls > * {
    flex: 0 0 auto;
  }
}
@media (max-width: 1119px) and (min-width: 701px) {
  .draw2-workspace-topbar {
    grid-template-columns: minmax(148px, 190px) minmax(0, 1fr) auto !important;
  }
  .draw2-workspace-command-bar {
    gap: 2px;
  }
  .draw2-workspace-command-bar .draw2-theme-control,
  .draw2-workspace-command-bar .draw2-language-control,
  .draw2-workspace-command-bar .draw2-icon-button span {
    display: none;
  }
}

/* Native select controls share the same compact square language as Draw2
   buttons, including the project, inspector, quick-control and timeline
   selectors. */
.draw2-workspace-frame select {
  appearance: none;
  min-height: var(--draw2-control-height, 32px);
  padding: 0 24px 0 8px;
  border: 1px solid var(--draw2-border-strong);
  border-radius: var(--px-radius, 2px);
  background-color: var(--draw2-surface-input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a8ba0' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: right 7px center;
  background-repeat: no-repeat;
  background-size: 10px 6px;
  color: var(--draw2-text-strong);
  font: inherit;
  line-height: 1;
}
.draw2-workspace-frame select:hover,
.draw2-workspace-frame select:focus-visible {
  border-color: var(--draw2-accent-strong);
}
.draw2-workspace-frame select:focus-visible {
  outline: 2px solid var(--draw2-focus-ring);
  outline-offset: 1px;
}
.draw2-timeline-rate select,
.draw2-layer-blend,
.draw2-workspace-project-slot select {
  background-position: right 5px center;
}
.draw2-workspace-right-dock > * {
  min-width: 0;
}
.draw2-workspace-panel {
  min-width: 0;
}
.draw2-workspace-panel > *,
.draw2-color-editor,
.draw2-color-editor > *,
.draw2-export-panel,
.draw2-export-grid {
  min-width: 0;
  max-width: 100%;
}
.draw2-color-picker {
  min-width: 0;
  max-width: 100%;
}
.draw2-color-picker canvas {
  width: min(220px, 100%);
  height: auto;
  image-rendering: crisp-edges;
}
.draw2-palette-grid {
  min-width: 0;
  max-width: 100%;
}

/* Mirror guides are projection-only SVG lines. Their vector-effect keeps the
   guide crisp and visually stable while the raster viewport zooms or pans. */
.draw2-mirror-guide-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  shape-rendering: crispEdges;
}
.draw2-mirror-guide-overlay[hidden],
.draw2-mirror-guide-line[hidden] {
  display: none;
}
.draw2-mirror-guide-line {
  fill: none;
  stroke: var(--draw2-accent-strong);
  stroke-width: 1.5px;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
  opacity: 0.9;
}
.draw2-mirror-guide-line--horizontal {
  stroke: var(--draw2-warning-strong);
}
.draw2-mirror-guide-line--diagonal-down {
  stroke: #c6a0ff;
}
.draw2-mirror-guide-line--diagonal-up {
  stroke: #8bd7ff;
}

@media (max-width: 700px) {
  .draw2-workspace-frame select {
    min-height: var(--draw2-control-size, 44px);
  }
  .draw2-dock-resize-handle,
  .draw2-timeline-resize-handle {
    display: none;
  }
}

/* Mobile top rail repair: keep application menus reachable as an icon-only
   row instead of allowing the legacy absolute menu rule to move them above
   the viewport. Canvas, project, frequent controls and menus each own one
   explicit row. */
@media (max-width: 700px) {
  .draw2-workspace-topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 44px 40px 44px 32px !important;
    align-content: start;
    gap: 0 4px;
    min-height: 160px;
    overflow: visible;
  }
  .draw2-workspace-topbar > .draw2-workspace-brand {
    display: none;
  }
  .draw2-workspace-topbar > .draw2-workspace-command-bar {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: 44px !important;
    justify-content: flex-start;
    overflow-x: auto;
  }
  .draw2-workspace-topbar > .draw2-workspace-project-slot {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 40px !important;
  }
  .draw2-workspace-topbar > .draw2-workspace-quick-controls {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    height: 44px !important;
    justify-content: flex-start;
    overflow-x: auto;
  }
  .draw2-workspace-topbar > .draw2-workspace-menu-bar {
    display: flex !important;
    position: static !important;
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    height: 32px;
    min-width: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    border: 0;
  }
  .draw2-workspace-menu-bar .draw2-menu {
    flex: 0 0 36px;
  }
  .draw2-workspace-menu-bar .draw2-menu summary {
    display: grid;
    place-items: center;
    width: 36px;
    min-height: 32px;
    padding: 0;
    font-size: 0;
  }
  .draw2-workspace-menu-bar .draw2-menu-icon {
    width: 16px;
    height: 16px;
  }
  .draw2-workspace-menu-bar .draw2-menu-popover {
    top: calc(100% + 2px);
    left: 0;
    right: auto;
    min-width: 148px;
  }
  .draw2-workspace-menu-bar
    .draw2-menu:nth-last-child(-n+2)
    > .draw2-menu-popover {
    left: auto;
    right: 0;
  }
}

/* Final cascade for the canonical shell. Kept at EOF so legacy WP-180
   reference rules cannot reintroduce the old single-row/large-card layout. */
html:has(#draw2WorkspaceFrame),
body:has(#draw2WorkspaceFrame) {
  overflow: hidden;
}
body:has(#draw2WorkspaceFrame) {
  min-height: 100dvh;
  margin: 0;
}
.draw2-shell:has(#draw2WorkspaceFrame) {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
}
.draw2-shell:has(#draw2WorkspaceFrame) > .draw2-header {
  display: none !important;
}
.draw2-workspace-frame {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  grid-template-columns:
    var(--draw2-tool-rail-width) minmax(0, 1fr) minmax(
      260px,
      var(--draw2-panel-width)
    );
  grid-template-rows:
    auto minmax(0, 1fr) var(--draw2-timeline-height) var(
      --draw2-statusbar-height
    );
  grid-template-areas:
    "top top top" "left canvas right" "timeline timeline timeline" "status status status";
}
.draw2-workspace-topbar {
  display: block;
  min-width: 0;
  padding: 0;
}
.draw2-workspace-global-row {
  display: grid;
  grid-template-columns:
    minmax(128px, auto) minmax(0, 1fr) minmax(160px, 240px) auto;
  min-height: 38px;
  gap: 6px;
  padding: 3px 6px;
}
.draw2-workspace-global-row {
  grid-template-rows: 32px;
  grid-auto-rows: 32px;
}
.draw2-workspace-global-row > * {
  grid-column: auto !important;
  grid-row: 1 !important;
}
.draw2-workspace-context-row {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  padding: 3px 6px;
}
.draw2-workspace-context-row > * {
  grid-column: auto !important;
  grid-row: auto !important;
}
.draw2-workspace-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.draw2-workspace-brand .draw2-eyebrow,
.draw2-workspace-brand .draw2-workspace-status {
  display: none;
}
.draw2-brand-icon {
  width: 18px;
  height: 18px;
  color: var(--draw2-accent-strong);
}
.draw2-workspace-brand strong {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.draw2-workspace-menu-bar {
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.draw2-workspace-menu-bar::-webkit-scrollbar,
.draw2-workspace-command-bar::-webkit-scrollbar,
.draw2-workspace-quick-controls::-webkit-scrollbar {
  display: none;
}
.draw2-workspace-menu-bar .draw2-menu {
  flex: 0 0 auto;
}
.draw2-workspace-menu-bar .draw2-menu summary {
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  font-size: 0.69rem;
  white-space: nowrap;
}
.draw2-workspace-menu-bar .draw2-menu summary:hover,
.draw2-workspace-menu-bar .draw2-menu[open] summary {
  background: var(--draw2-surface-raised);
}
.draw2-workspace-menu-bar .draw2-menu-popover {
  z-index: 80;
}
.draw2-workspace-menu-bar hr {
  height: 1px;
  margin: 4px 0;
  border: 0;
  background: var(--draw2-border-subtle);
}
.draw2-workspace-project-slot {
  min-width: 0;
  align-self: center;
}
.draw2-workspace-project-slot .draw2-controls {
  gap: 4px;
}
.draw2-workspace-project-slot .draw2-controls label {
  font-size: 0;
}
.draw2-workspace-project-slot .draw2-controls input,
.draw2-workspace-project-slot .draw2-controls select {
  min-height: 30px;
  padding-inline: 7px;
  font-size: 0.69rem;
}
.draw2-workspace-project-slot #draw2CreateProject {
  min-height: 30px;
  font-size: 0.65rem;
}
.draw2-workspace-command-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}
.draw2-workspace-command-bar .draw2-icon-button {
  width: var(--draw2-control-size);
  min-width: var(--draw2-control-size);
  height: var(--draw2-control-size);
  min-height: var(--draw2-control-size);
  padding: 0;
}
.draw2-workspace-command-bar .draw2-icon-button span {
  display: none;
}
.draw2-theme-control, .draw2-language-control {
  font-size: 0;
}
.draw2-theme-control select, .draw2-language-control select {
  width: 32px;
  min-height: 30px;
  padding: 0 2px;
  font-size: 0.65rem;
}
.draw2-workspace-quick-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.draw2-workspace-quick-controls::before {
  content: "";
  width: 2px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--draw2-accent-strong);
}
.draw2-quick-control {
  min-height: 30px;
}
.draw2-quick-control > span {
  font-size: 0.62rem;
}
.draw2-quick-control select, .draw2-quick-control input {
  min-height: 30px;
}
.draw2-workspace-left-dock {
  grid-area: left;
  width: var(--draw2-tool-rail-width);
  min-width: var(--draw2-tool-rail-width);
  padding: 6px 4px;
  gap: 8px;
  border-right: 1px solid var(--draw2-border-subtle);
}
.draw2-workspace-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  overflow: visible;
}
.draw2-workspace-left-dock .draw2-mobile-color-rail,
.draw2-workspace-left-dock .draw2-workspace-panel-launcher {
  display: none;
}
.draw2-tool-group,
.draw2-tool-group-summary,
.draw2-workspace-toolbar > .draw2-tool-button {
  width: var(--draw2-control-size);
  height: var(--draw2-control-size);
  min-width: var(--draw2-control-size);
  min-height: var(--draw2-control-size);
}
.draw2-tool-group-summary, .draw2-workspace-toolbar > .draw2-tool-button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  background: transparent;
}
.draw2-tool-group-summary:hover,
.draw2-tool-group[open] > .draw2-tool-group-summary,
.draw2-tool-group.is-active > .draw2-tool-group-summary,
.draw2-workspace-toolbar > .draw2-tool-button:hover,
.draw2-workspace-toolbar > .draw2-tool-button.is-active {
  border-color: color-mix(in srgb, var(--draw2-accent-strong) 72%, transparent);
  background: color-mix(in srgb, var(--draw2-accent-strong) 16%, transparent);
}
.draw2-tool-group-summary .draw2-tool-group-label,
.draw2-workspace-toolbar > .draw2-tool-button span {
  display: none;
}
.draw2-tool-group-summary .draw2-tool-icon,
.draw2-workspace-toolbar > .draw2-tool-button .draw2-tool-icon {
  width: var(--draw2-icon-size);
  height: var(--draw2-icon-size);
}
.draw2-tool-group > .draw2-tool-popover {
  z-index: 90;
  display: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  min-width: 156px;
  padding: 5px;
  border: 1px solid var(--draw2-border-strong);
  border-radius: var(--draw2-radius-md);
  background: var(--draw2-surface);
  box-shadow: var(--draw2-shadow-panel);
}
.draw2-tool-group[open] > .draw2-tool-popover {
  display: grid !important;
  visibility: visible;
  pointer-events: auto;
}
.draw2-tool-group:not([open]) > .draw2-tool-popover {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}
.draw2-tool-group > .draw2-tool-popover .draw2-tool-button {
  min-height: 32px;
  padding: 3px 5px;
  justify-content: flex-start;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
}
.draw2-tool-group > .draw2-tool-popover .draw2-tool-button span {
  font-size: 0.65rem;
}
.draw2-workspace-canvas-region {
  padding: 6px;
  background: var(--draw2-surface-canvas);
}
#draw2WorkspaceCanvasSlot > .draw2-canvas-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#draw2WorkspaceCanvasSlot .draw2-viewport-wrap {
  margin-top: 0;
  min-height: 0;
}
.draw2-workspace-right-dock {
  grid-area: right;
  min-width: 0;
  border-left: 1px solid var(--draw2-border-subtle);
}
.draw2-workspace-right-header {
  min-height: 34px;
  padding: 3px 6px;
}
.draw2-workspace-right-header strong {
  font-size: 0.69rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.draw2-panel-close {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border-color: transparent;
  background: transparent;
}
.draw2-panel-close .draw2-ui-icon {
  width: 16px;
  height: 16px;
}
.draw2-workspace-tabs {
  order: 1;
  gap: 2px;
  padding: 4px 6px;
}
.draw2-workspace-tab {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--draw2-radius-sm);
  font-size: 0.67rem;
}
.draw2-workspace-tab.is-active {
  border-bottom: 2px solid var(--draw2-accent-strong);
  background: var(--draw2-surface-raised);
}
.draw2-palette-strip {
  order: 2;
  padding: 6px;
  border-bottom: 1px solid var(--draw2-border-subtle);
}
.draw2-workspace-panel {
  order: 3;
  padding: 7px;
}
.draw2-workspace-panel .draw2-help,
.draw2-workspace-panel > .draw2-card-heading,
.draw2-workspace-panel > .draw2-metrics {
  display: none;
}
.draw2-workspace-frame.is-right-dock-collapsed {
  grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) 0;
}
.draw2-workspace-frame.is-right-dock-collapsed .draw2-workspace-right-dock {
  min-width: 0;
  width: 0;
  overflow: hidden;
  border-left: 0;
}
.draw2-workspace-timeline-region {
  min-height: 0;
  padding: 4px 6px 5px;
}
#draw2WorkspaceTimelineSlot,
#draw2WorkspaceTimelineSlot > .draw2-timeline-card {
  min-height: 0;
  height: 100%;
}
#draw2WorkspaceTimelineSlot > .draw2-timeline-card {
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.draw2-workspace-timeline-region .draw2-card-heading {
  display: none;
}
.draw2-workspace-timeline-region .draw2-timeline-display-actions {
  min-height: 30px;
  margin: 0 0 3px;
  padding: 0;
  gap: 3px;
  overflow-x: auto;
}
.draw2-workspace-timeline-region .draw2-timeline-display-actions .draw2-button {
  flex: 0 0 var(--draw2-control-size);
  width: var(--draw2-control-size);
  min-width: var(--draw2-control-size);
  min-height: var(--draw2-control-size);
  padding: 0;
}
.draw2-timeline-secondary {
  margin: 0 0 3px;
  font-size: 0.65rem;
}
.draw2-timeline-secondary > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 5px;
  border-radius: var(--draw2-radius-sm);
  color: var(--draw2-text-muted);
  cursor: pointer;
  list-style: none;
}
.draw2-timeline-secondary > summary::-webkit-details-marker {
  display: none;
}
.draw2-timeline-secondary[open] > summary {
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
}
.draw2-timeline-secondary .draw2-timeline-creator-tools {
  max-height: 112px;
  margin-top: 3px;
  overflow: auto;
}
.draw2-workspace-timeline-region .draw2-timeline-viewport {
  height: calc(100% - 62px);
  max-height: none;
  margin-top: 0;
  border-radius: var(--draw2-radius-sm);
}
.draw2-workspace-statusbar {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  background: var(--draw2-surface);
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
  white-space: nowrap;
}
.draw2-workspace-statusbar > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.draw2-statusbar-spacer {
  flex: 1 1 auto;
}
.draw2-statusbar-save {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.draw2-statusbar-save i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--draw2-accent-strong);
}
.draw2-workspace-frame[data-workspace-preset="animation"] {
  --draw2-timeline-height: clamp(190px, 33dvh, 340px);
}
.draw2-workspace-frame[data-workspace-preset="tileset"] {
  --draw2-timeline-height: clamp(140px, 20dvh, 220px);
}
.draw2-workspace-frame.is-focus-mode {
  grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) 0;
  grid-template-rows: auto minmax(0, 1fr) 0 var(--draw2-statusbar-height);
}
.draw2-workspace-frame.is-focus-mode .draw2-workspace-right-dock,
.draw2-workspace-frame.is-focus-mode .draw2-workspace-timeline-region {
  width: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (max-width: 1119px) and (min-width: 701px) {
  .draw2-workspace-global-row {
    grid-template-columns: 110px minmax(0, 1fr) 180px auto;
  }
  .draw2-workspace-brand strong {
    font-size: 0.7rem;
  }
  .draw2-workspace-menu-bar .draw2-menu summary {
    padding-inline: 5px;
    font-size: 0.63rem;
  }
  .draw2-workspace-command-bar .draw2-icon-button:nth-child(n+3) {
    display: none;
  }
}

@media (max-width: 700px) {
  .draw2-workspace-frame {
    height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      82px minmax(240px, 1fr) auto 156px var(--draw2-statusbar-height);
    grid-template-areas: "top" "canvas" "left" "timeline" "status";
    overflow: hidden;
  }
  .draw2-workspace-topbar {
    min-height: 82px;
  }
  .draw2-workspace-global-row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 40px;
    padding: 3px 4px;
  }
  .draw2-workspace-brand, .draw2-workspace-project-slot {
    display: none;
  }
  .draw2-workspace-menu-bar {
    grid-column: 1;
  }
  .draw2-workspace-menu-bar .draw2-menu summary {
    width: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 0;
  }
  .draw2-workspace-command-bar {
    grid-column: 2;
  }
  .draw2-workspace-command-bar .draw2-icon-button:nth-child(n+3),
  .draw2-theme-control,
  .draw2-language-control {
    display: none;
  }
  .draw2-workspace-context-row {
    min-height: 42px;
    padding: 4px;
  }
  .draw2-workspace-quick-controls {
    width: 100%;
  }
  .draw2-quick-control > span {
    display: none;
  }
  .draw2-workspace-left-dock {
    grid-area: left;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 4px;
    overflow-x: auto;
    border-top: 1px solid var(--draw2-border-subtle);
    border-right: 0;
  }
  .draw2-workspace-toolbar {
    flex-direction: row;
    flex: 0 0 auto;
  }
  .draw2-tool-group,
  .draw2-tool-group-summary,
  .draw2-workspace-toolbar > .draw2-tool-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .draw2-workspace-left-dock .draw2-mobile-color-rail {
    display: grid;
    flex: 0 0 auto;
    min-width: 92px;
  }
  .draw2-workspace-left-dock .draw2-workspace-panel-launcher {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 3px;
  }
  .draw2-workspace-panel-launcher .draw2-panel-launcher {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
  }
  .draw2-workspace-panel-launcher .draw2-panel-launcher span {
    display: none;
  }
  .draw2-workspace-canvas-region {
    padding: 4px;
  }
  .draw2-workspace-right-dock {
    position: fixed;
    left: 4px;
    right: 4px;
    bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    z-index: 120;
    height: min(70dvh, 540px);
    border: 1px solid var(--draw2-border-strong);
    border-radius: var(--draw2-radius-md);
    box-shadow: var(--draw2-shadow-panel);
  }
  .draw2-workspace-timeline-region {
    display: flex;
    padding: 4px;
  }
  .draw2-workspace-statusbar {
    padding-inline: 5px;
    font-size: 0.58rem;
  }
  .draw2-workspace-statusbar .draw2-statusbar-save {
    display: none;
  }
  .draw2-workspace-frame.is-focus-mode {
    grid-template-rows:
      82px minmax(0, 1fr) auto 0 var(--draw2-statusbar-height);
  }
}

/* Tablet flyouts are an exclusive overlay, never a second permanent Tool
   rail.  This final rule intentionally wins over legacy portrait grid rules. */
@media (min-width: 701px) {
  .draw2-workspace-frame[data-workspace-profile="tablet"]
    .draw2-tool-group:not([open])
    > .draw2-tool-popover,
  .draw2-workspace-frame[data-workspace-profile="split"]
    .draw2-tool-group:not([open])
    > .draw2-tool-popover {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="tablet"]
    .draw2-tool-group[open]
    > .draw2-tool-popover,
  .draw2-workspace-frame[data-workspace-profile="split"]
    .draw2-tool-group[open]
    > .draw2-tool-popover {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw2-workspace-frame *, .draw2-workspace-right-dock {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Restore the single meaningful Dock action after the legacy Color-left
   rules: Desktop collapses the Dock, Mobile closes the Sheet. */
.draw2-workspace-right-dock > .draw2-workspace-right-header .draw2-panel-close {
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}
.draw2-workspace-right-dock > .draw2-workspace-right-header strong {
  font-size: 0.69rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.draw2-workspace-right-dock > .draw2-workspace-right-header strong::before {
  display: none;
  content: none;
}

/* Final mobile workspace rule: Timeline is part of the primary editing
   surface, not a hidden overflow sheet. Keep it in the grid so frame/cel
   visibility remains available without page scrolling; the Timeline matrix
   itself owns its bounded scroll region. */
@media (max-width: 700px) {
  .draw2-workspace-timeline-region {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px !important;
    border: 0 !important;
    background: var(--draw2-surface) !important;
    box-shadow: none !important;
  }
}

/* Last-mile geometry override for the visual canonical reference. */
:root {
  --draw2-control-size: 32px;
  --draw2-timeline-cell-size: 30px;
}
.draw2-workspace-frame .draw2-tool-group-summary,
.draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-button {
  border-width: 1px !important;
  border-radius: 4px !important;
}
.draw2-workspace-frame #draw2WorkspaceCanvasSlot > .draw2-canvas-card {
  border: 1px solid var(--draw2-border-strong) !important;
  border-radius: 4px !important;
}
.draw2-workspace-frame .draw2-workspace-right-header {
  height: 32px !important;
  min-height: 32px !important;
  border-bottom: 1px solid var(--draw2-border-subtle) !important;
}
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
  border: 1px solid var(--draw2-border-subtle) !important;
  border-radius: 4px !important;
}
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell,
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-frame-header,
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-corner,
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-row-label {
  border: 1px solid var(--draw2-border-subtle) !important;
  border-radius: 2px !important;
}
.draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  box-shadow: none !important;
}
.draw2-workspace-frame
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-cell[aria-selected="true"] {
  box-shadow: inset 0 0 0 1px var(--draw2-accent-strong) !important;
}
@media (max-width: 700px) {
  :root {
    --draw2-control-size: 40px;
    --draw2-timeline-cell-size: 32px;
  }
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
  .draw2-workspace-frame
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-frame-header,
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-corner,
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-row-label {
    min-height: 32px !important;
    height: 32px !important;
  }
}

@media (max-width: 1399px) and (min-width: 701px) {
  .draw2-workspace-global-row {
    grid-template-columns: 128px minmax(220px, 1fr) 180px auto !important;
  }
  .draw2-workspace-menu-bar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
  }
  .draw2-workspace-menu-bar .draw2-menu {
    flex: 0 0 32px !important;
  }
  .draw2-workspace-menu-bar .draw2-menu summary {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    justify-content: center;
    font-size: 0 !important;
  }
  .draw2-workspace-menu-bar .draw2-menu-icon {
    width: 16px !important;
    height: 16px !important;
  }
  .draw2-workspace-project-slot {
    max-width: 180px;
  }
}

/* Narrow-width guardrails: every top-row region is independently bounded.
   Controls may scroll inside their own rail, but never overlap a neighbour or
   create page-level horizontal overflow. */
.draw2-workspace-global-row > *,
.draw2-workspace-context-row > * {
  min-width: 0;
}
.draw2-workspace-global-row > .draw2-workspace-menu-bar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
}
.draw2-workspace-menu-bar,
.draw2-workspace-command-bar,
.draw2-workspace-quick-controls {
  scrollbar-width: thin;
}
.draw2-workspace-command-bar {
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
}
.draw2-workspace-project-slot {
  overflow: hidden;
}

/* The tool rail is intentionally narrow; its child palette is a viewport
   surface so it can flip to the other side or scroll internally at the edge. */
.draw2-workspace-left-dock .draw2-workspace-toolbar {
  overflow: visible !important;
}
.draw2-tool-popover.is-flyout-positioned {
  position: fixed !important;
  z-index: 250 !important;
  left: 0;
  top: 0;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

/* Timeline focused surface -------------------------------------------------
   The Timeline is a dense editor rail: tabs and playback stay in the rail,
   the layer header and frame header stay sticky, and only the cel matrix
   owns scroll. Selection is a local projection; canonical Frame/Layer/Cel
   commands remain in draw2-timeline.ts. */
:root {
  --draw2-timeline-tab-height: 30px;
  --draw2-timeline-toolbar-height: 34px;
  --draw2-timeline-row-height: 30px;
  --draw2-timeline-frame-width: 30px;
  --draw2-timeline-layer-width: 180px;
  --draw2-timeline-playhead-width: 1px;
}

.draw2-timeline-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.draw2-timeline-card[data-timeline-collapse="collapsed"]
  > :not(.draw2-timeline-heading):not(.draw2-timeline-collapsed-bar) {
  display: none !important;
}
.draw2-timeline-heading {
  flex: 0 0 auto;
  min-height: 28px;
  margin: 0;
  padding: 0 6px;
}
.draw2-timeline-heading .draw2-metrics {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-timeline-heading > .draw2-button {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
}
.draw2-workspace-timeline-region .draw2-timeline-heading {
  position: absolute;
  z-index: 18;
  top: 0;
  right: 2px;
  display: flex !important;
  width: 32px;
  min-height: 30px;
  padding: 0;
  background: transparent;
  pointer-events: none;
}
.draw2-workspace-timeline-region .draw2-timeline-heading-content,
.draw2-workspace-timeline-region .draw2-timeline-heading .draw2-metrics {
  display: none;
}
.draw2-workspace-timeline-region .draw2-timeline-heading > .draw2-button {
  pointer-events: auto;
}
#draw2WorkspaceTimelineSlot .draw2-timeline-heading {
  display: flex !important;
}
.draw2-timeline-tabs {
  display: flex;
  flex: 0 0 var(--draw2-timeline-tab-height);
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  min-height: var(--draw2-timeline-tab-height);
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--draw2-border-subtle);
  scrollbar-width: thin;
}
.draw2-timeline-tab {
  flex: 0 0 auto;
  height: var(--draw2-timeline-tab-height);
  min-height: var(--draw2-timeline-tab-height);
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}
.draw2-timeline-tab:hover,
.draw2-timeline-tab:focus-visible {
  color: var(--draw2-text-strong);
  outline: 0;
}
.draw2-timeline-tab.is-active {
  border-bottom-color: var(--draw2-accent-strong);
  color: var(--draw2-text-strong);
  background: color-mix(in srgb, var(--draw2-accent-strong) 8%, transparent);
}
.draw2-timeline-toolbar {
  flex: 0 0 var(--draw2-timeline-toolbar-height);
  min-height: var(--draw2-timeline-toolbar-height) !important;
  margin: 0;
  padding: 1px 4px;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.draw2-timeline-toolbar > .draw2-button,
.draw2-timeline-toolbar > .draw2-timeline-onion-options > summary,
.draw2-timeline-toolbar > .draw2-timeline-more-actions > summary {
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 3px;
}
.draw2-timeline-toolbar .draw2-timeline-rate,
.draw2-timeline-toolbar .draw2-timeline-loop {
  flex: 0 0 auto;
}
.draw2-timeline-toolbar select {
  height: 28px;
  min-height: 28px;
  padding-inline: 6px;
}
#draw2PlaybackFpsCustom {
  width: 46px;
  min-width: 46px;
  height: 28px;
  min-height: 28px;
  padding-inline: 4px;
}
.draw2-timeline-toolbar .draw2-timeline-loop {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
}
.draw2-timeline-toolbar .draw2-timeline-loop input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.draw2-timeline-toolbar .draw2-timeline-loop:has(input:checked) {
  color: var(--draw2-accent-strong);
}
.draw2-timeline-onion-options,
.draw2-timeline-more-actions {
  position: relative;
  flex: 0 0 30px;
  min-width: 30px;
}
.draw2-timeline-onion-options > summary,
.draw2-timeline-more-actions > summary {
  display: grid;
  place-items: center;
  list-style: none;
  cursor: pointer;
}
.draw2-timeline-onion-options > summary::-webkit-details-marker,
.draw2-timeline-more-actions > summary::-webkit-details-marker {
  display: none;
}
.draw2-timeline-onion-popover,
.draw2-timeline-more-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  display: grid;
  gap: 5px;
  min-width: 190px;
  padding: 7px;
  border: 1px solid var(--draw2-border-strong);
  border-radius: 4px;
  background: var(--draw2-surface-raised);
  box-shadow: var(--draw2-shadow-panel);
}
.draw2-timeline-more-popover {
  grid-template-columns: repeat(4, 30px);
  min-width: 144px;
}
.draw2-timeline-more-popover .draw2-button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
}
.draw2-timeline-onion-popover .draw2-onion-control {
  display: grid;
  grid-template-columns: 18px 1fr 28px;
  align-items: center;
  gap: 5px;
  min-width: 170px;
  font-size: 0.65rem;
}
.draw2-timeline-onion-popover .draw2-onion-control input {
  min-width: 0;
}
.draw2-timeline-onion-popover .draw2-onion-mode-control {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 170px;
  min-height: var(--draw2-control-size);
  color: var(--draw2-text-muted);
  font-size: 0.65rem;
}
.draw2-timeline-onion-popover .draw2-onion-mode-control select {
  min-width: 0;
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: var(--draw2-surface);
  color: var(--draw2-text-strong);
  font: inherit;
}
.draw2-timeline-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.draw2-timeline-tab-panel[hidden] {
  display: none !important;
}
.draw2-timeline-tab-panel[data-draw2-timeline-tab-panel="timeline"] {
  display: flex;
  flex-direction: column;
}
.draw2-timeline-more-controls {
  flex: 0 0 24px;
  position: relative;
  margin: 0 4px 2px;
}
.draw2-timeline-more-controls > summary {
  display: grid;
  place-items: center;
  width: 26px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  color: var(--draw2-text-muted);
  list-style: none;
  cursor: pointer;
}
.draw2-timeline-more-controls > summary::-webkit-details-marker {
  display: none;
}
.draw2-timeline-inline-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  z-index: 18;
  top: 25px;
  left: 0;
  padding: 5px;
  border: 1px solid var(--draw2-border-strong);
  border-radius: 4px;
  background: var(--draw2-surface-raised);
  box-shadow: var(--draw2-shadow-panel);
  font-size: 0.65rem;
}
.draw2-timeline-inline-controls .draw2-button {
  min-height: 28px;
  padding-inline: 7px;
}
.draw2-timeline-viewport {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 96px;
  max-height: none;
  margin: 0 4px 3px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: var(--draw2-surface-canvas);
  scrollbar-width: thin;
}
.draw2-timeline-viewport {
  --draw2-timeline-label-width: var(--draw2-timeline-layer-width) !important;
  --draw2-timeline-cell-width: var(--draw2-timeline-frame-width) !important;
}
.draw2-timeline-window {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
}
.draw2-timeline-header-row {
  position: sticky;
  top: 0;
  z-index: 8;
  min-width: 100%;
  background: var(--draw2-surface-raised);
}
.draw2-timeline-corner,
.draw2-timeline-frame-header,
.draw2-timeline-row-label,
.draw2-timeline-cell {
  border-color: color-mix(in srgb, var(--draw2-border-subtle) 80%, transparent)
    !important;
  border-radius: 2px !important;
}
.draw2-timeline-corner,
.draw2-timeline-frame-header {
  background: var(--draw2-surface-raised);
}
.draw2-timeline-frame-header[data-selected="true"],
.draw2-timeline-frame-header[aria-selected="true"] {
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 16%,
    var(--draw2-surface-raised)
  );
  color: var(--draw2-text-strong);
}
.draw2-timeline-frame-header[data-tag-count]::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--draw2-accent-strong);
}
.draw2-timeline-frame-header[data-marker-count]::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--draw2-warning, #f5c96a);
}
.draw2-timeline-row-label {
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-muted);
  text-align: left;
}
.draw2-timeline-row-label[data-selected="true"] {
  color: var(--draw2-text-strong);
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 12%,
    var(--draw2-surface-raised)
  );
}
.draw2-timeline-row-label[data-layer-visible="false"]::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--draw2-text-muted);
  opacity: 0.55;
}
.draw2-timeline-row-label[data-layer-visible="true"]::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--draw2-accent-strong);
}
.draw2-timeline-cell {
  background: var(--draw2-surface);
}
.draw2-timeline-cell[data-active-frame="true"] {
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 5%,
    var(--draw2-surface)
  );
}
.draw2-timeline-cell[data-selected="true"],
.draw2-timeline-cell[aria-selected="true"] {
  box-shadow: inset 0 0 0 2px var(--draw2-accent-strong) !important;
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 17%,
    var(--draw2-surface)
  );
}
.draw2-timeline-cell[data-locked="true"] {
  opacity: 0.55;
  /* A locked layer still permits selecting its cel and inspecting its frame.
     Keep the editing lock, but do not present that valid selection action as
     a blocked control. */
  cursor: pointer;
}
.draw2-timeline-linked-icon {
  position: absolute;
  right: 2px;
  bottom: 0;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  color: var(--draw2-accent-strong);
}
.draw2-timeline-playhead {
  position: absolute;
  top: 0;
  z-index: 7;
  width: var(--draw2-timeline-playhead-width);
  background: var(--draw2-accent-strong);
  opacity: 0.9;
  pointer-events: none;
}
.draw2-timeline-context-menu {
  position: fixed;
  z-index: 260;
  display: grid;
  gap: 2px;
  width: 172px;
  padding: 4px;
  border: 1px solid var(--draw2-border-strong);
  border-radius: 4px;
  background: var(--draw2-surface-raised);
  box-shadow: var(--draw2-shadow-panel);
}
.draw2-timeline-context-menu[hidden] {
  display: none !important;
}
.draw2-timeline-context-menu .draw2-button {
  justify-content: flex-start;
  width: 100%;
  min-height: 28px;
  padding-inline: 7px;
  border: 0;
  border-radius: 2px;
  font-size: 0.66rem;
}
.draw2-timeline-context-menu .draw2-button:hover,
.draw2-timeline-context-menu .draw2-button:focus-visible {
  background: color-mix(in srgb, var(--draw2-accent-strong) 14%, transparent);
  outline: 0;
}
.draw2-timeline-collapsed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 30px;
  padding: 0 6px;
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
}
.draw2-timeline-collapsed-bar .draw2-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
}
.draw2-timeline-unavailable {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  margin: 4px;
  padding: 8px 10px;
  border: 1px dashed var(--draw2-border-subtle);
  border-radius: 3px;
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
}
.draw2-timeline-unavailable strong {
  color: var(--draw2-text-strong);
  white-space: nowrap;
}
.draw2-timeline-single-panel {
  display: block;
  max-height: none;
  overflow: auto;
  padding: 8px;
}
.draw2-timeline-single-panel .draw2-timeline-creator-group {
  max-width: 620px;
}
.draw2-workspace-timeline-region[data-timeline-collapse="collapsed"] {
  min-height: 32px !important;
}
.draw2-workspace-timeline-region[data-timeline-collapse="compact"] {
  --draw2-timeline-row-height: 26px;
  --draw2-timeline-frame-width: 26px;
}

@media (max-width: 700px) {
  :root {
    --draw2-timeline-layer-width: 96px;
    --draw2-timeline-frame-width: 32px;
    --draw2-timeline-row-height: 32px;
  }
  .draw2-timeline-tab {
    min-width: 58px;
    padding-inline: 9px;
  }
  .draw2-timeline-toolbar {
    padding-inline: 2px;
  }
  .draw2-timeline-toolbar > .draw2-button,
  .draw2-timeline-toolbar > .draw2-timeline-onion-options > summary,
  .draw2-timeline-toolbar > .draw2-timeline-more-actions > summary {
    flex-basis: 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }
  .draw2-timeline-viewport {
    margin-inline: 2px;
  }
  .draw2-workspace-timeline-region .draw2-timeline-more-controls {
    display: none;
  }
  .draw2-timeline-unavailable {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .draw2-timeline-single-panel {
    padding: 5px;
  }
}

@media (min-width: 701px) {
  .draw2-workspace-frame:has(
    #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"]
  ) {
    grid-template-rows:
      auto minmax(0, 1fr) 32px var(--draw2-statusbar-height) !important;
  }
}
@media (max-width: 700px) {
  .draw2-workspace-frame:has(
    #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"]
  ) {
    grid-template-rows:
      82px minmax(240px, 1fr) auto 32px var(--draw2-statusbar-height)
      !important;
  }
}

/* Right dock v1: persistent palette plus a user-managed custom-panel area.
   This is intentionally the final cascade block so the old single-panel and
   header rules cannot reintroduce a second hierarchy. */
.draw2-workspace-right-dock {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows:
    minmax(120px, var(--draw2-right-palette-ratio, 30%)) 8px minmax(100px, 1fr)
    !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
.draw2-workspace-right-dock > #draw2WorkspaceRightResize {
  position: absolute !important;
  z-index: 40;
  top: 0;
  left: -5px;
  bottom: 0;
  width: 10px;
  grid-row: 1 / -1;
}
.draw2-workspace-right-dock > #draw2WorkspacePaletteStrip {
  grid-column: 1;
  grid-row: 1;
  display: block !important;
  min-width: 0;
  min-height: 0;
  max-height: none;
  padding: 6px;
  overflow: auto;
  border: 0;
  background: var(--draw2-surface);
}
.draw2-workspace-right-dock .draw2-palette-active-color {
  display: none;
}
.draw2-workspace-right-dock > #draw2WorkspacePaletteResize {
  grid-column: 1;
  grid-row: 2;
  z-index: 30;
  width: 100%;
  height: 8px;
  min-height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ns-resize;
  touch-action: none;
}
.draw2-workspace-right-dock > #draw2WorkspacePaletteResize:hover,
.draw2-workspace-right-dock > #draw2WorkspacePaletteResize:focus-visible,
.draw2-workspace-right-dock > #draw2WorkspacePaletteResize.is-resizing,
.draw2-workspace-right-dock.is-palette-resizing > #draw2WorkspacePaletteResize {
  background: var(--draw2-accent-strong);
  outline: 0;
}
.draw2-right-custom-dock {
  position: relative;
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100px;
  overflow: hidden;
  background: var(--draw2-surface);
}
.draw2-right-custom-dock > .draw2-workspace-tabs {
  order: 0;
  display: flex;
  flex: 0 0 32px;
  align-items: stretch;
  gap: 0;
  height: 32px;
  min-height: 32px;
  min-width: 0;
  padding: 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--draw2-border-subtle);
  background: var(--draw2-surface);
  scrollbar-width: thin;
}
.draw2-right-custom-dock > .draw2-workspace-tabs .draw2-workspace-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-height: 32px;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
  white-space: nowrap;
}
.draw2-right-custom-dock
  > .draw2-workspace-tabs
  .draw2-workspace-tab[data-right-tab-visible="true"] {
  display: inline-flex !important;
}
.draw2-right-custom-dock > .draw2-workspace-tabs .draw2-workspace-tab[hidden],
.draw2-right-custom-dock
  > .draw2-workspace-tabs
  .draw2-workspace-tab[data-right-tab-visible="false"] {
  display: none !important;
}
.draw2-right-custom-dock
  > .draw2-workspace-tabs
  .draw2-workspace-tab.is-active {
  border-bottom-color: var(--draw2-accent-strong);
  background: color-mix(in srgb, var(--draw2-accent-strong) 8%, transparent);
  color: var(--draw2-text-strong);
}
.draw2-right-custom-dock > .draw2-workspace-tabs .draw2-workspace-tab-add {
  width: 32px;
  min-width: 32px;
  padding: 0;
  border-bottom-color: transparent;
  font-size: 1rem;
}
.draw2-right-custom-dock > .draw2-workspace-panel {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 8px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  touch-action: pan-y;
}
.draw2-right-custom-dock > .draw2-workspace-panel[hidden] {
  display: none !important;
}
.draw2-workspace-right-dock > #draw2WorkspaceColorEditor {
  display: none !important;
}
.draw2-right-custom-empty {
  display: grid;
  flex: 1 1 auto;
  place-content: center;
  justify-items: center;
  gap: 4px;
  min-height: 100px;
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
}
.draw2-right-custom-empty > span {
  color: var(--draw2-accent-strong);
  font-size: 1.1rem;
}
.draw2-right-panel-picker {
  position: absolute;
  z-index: 300;
  top: 34px;
  right: 6px;
  display: grid;
  gap: 7px;
  width: min(280px, calc(100% - 12px));
  max-height: 420px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--draw2-border-strong);
  border-radius: 4px;
  background: var(--draw2-surface-raised);
  box-shadow: var(--draw2-shadow-panel);
}
.draw2-right-panel-picker[hidden] {
  display: none !important;
}
.draw2-right-panel-picker-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.7rem;
}
.draw2-panel-picker-close {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
}
.draw2-right-panel-picker input {
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
}
#draw2WorkspacePanelOptions {
  display: grid;
  min-height: 0;
  overflow: auto;
}
.draw2-right-panel-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--draw2-text-strong);
  text-align: left;
  font-size: 0.68rem;
}
.draw2-right-panel-option:hover:not(:disabled),
.draw2-right-panel-option:focus-visible {
  background: color-mix(in srgb, var(--draw2-accent-strong) 14%, transparent);
  outline: 0;
}
.draw2-right-panel-option:disabled {
  color: var(--draw2-text-muted);
  cursor: default;
  opacity: 0.7;
}
.draw2-right-panel-option-mark {
  color: var(--draw2-accent-strong);
  text-align: center;
}
.draw2-right-panel-option small {
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
}
.draw2-right-panel-picker-empty {
  margin: 4px;
  color: var(--draw2-text-muted);
  font-size: 0.66rem;
}
.draw2-right-panel-state {
  display: inline-block;
  margin-left: 6px;
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
}

/* Custom panels that project existing local editor state.  Keep every list
 * bounded inside the dock so opening a panel never changes the Canvas/Core
 * hot path or makes the whole page scroll. */
.draw2-panel-shell {
  display: grid;
  gap: var(--draw2-space-2);
  min-width: 0;
}
.draw2-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--draw2-space-2);
  min-width: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--draw2-border-subtle);
}
.draw2-panel-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.draw2-panel-heading strong {
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-panel-heading output {
  color: var(--draw2-accent-strong);
  font: 700 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-panel-badge {
  flex: 0 0 auto;
  color: var(--draw2-accent-strong);
  font: 700 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}
.draw2-panel-note,
.draw2-panel-status,
.draw2-panel-empty {
  margin: 0;
  color: var(--draw2-text-muted);
  font-size: 0.66rem;
  line-height: 1.45;
}
.draw2-panel-status {
  min-height: 1.45em;
}
.draw2-panel-action-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.draw2-panel-action-row .draw2-button {
  min-width: 0;
  flex: 1 1 auto;
}
.draw2-panel-stat-grid,
.draw2-panel-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.draw2-panel-stat-grid > div {
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
}
.draw2-panel-stat-grid small {
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
}
.draw2-panel-stat-grid strong {
  color: var(--draw2-text-strong);
  font: 700 0.9rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-panel-control-grid label,
.draw2-panel-field,
.draw2-panel-range-label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
}
.draw2-panel-control-grid select,
.draw2-panel-field input,
.draw2-panel-field select {
  min-width: 0;
  width: 100%;
  min-height: 30px;
  padding-inline: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font-size: 0.66rem;
}
.draw2-panel-range-label input {
  width: 100%;
  min-width: 0;
}
.draw2-panel-range-label output {
  color: var(--draw2-text-strong);
  font: 700 0.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-panel-field {
  gap: 4px;
}
.draw2-history-list,
.draw2-game-scene-list,
.draw2-game-assets-list,
.draw2-build-check-list,
.draw2-audio-panel-list {
  display: grid;
  gap: 4px;
  min-height: 0;
  max-height: 230px;
  overflow: auto;
  overscroll-behavior: contain;
}
.draw2-history-entry,
.draw2-game-scene-entry,
.draw2-game-asset-entry,
.draw2-build-check,
.draw2-audio-panel-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
  padding: 5px 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
}
.draw2-history-entry small,
.draw2-game-scene-entry small,
.draw2-game-asset-entry small,
.draw2-build-check small,
.draw2-audio-panel-entry small {
  display: block;
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.57rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-history-entry strong,
.draw2-game-scene-entry strong,
.draw2-game-asset-entry strong,
.draw2-build-check strong,
.draw2-audio-panel-entry strong {
  display: block;
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-history-entry[data-direction="REDO"] {
  opacity: 0.72;
}
.draw2-history-entry button,
.draw2-game-scene-entry button,
.draw2-game-asset-entry button,
.draw2-audio-panel-entry button {
  min-width: 28px;
  min-height: 28px;
  padding: 0 5px;
}
.draw2-navigator-preview {
  display: grid;
  place-items: center;
  min-height: 164px;
  padding: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface);
}
.draw2-navigator-preview canvas {
  display: block;
  width: min(160px, 100%);
  height: min(160px, 100%);
  image-rendering: pixelated;
  background: repeating-conic-gradient(#263046 0 25%, #1d2638 0 50%) 50% / 12px
    12px;
}
.draw2-tileset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  max-height: 270px;
  overflow: auto;
  overscroll-behavior: contain;
}
.draw2-tileset-cell {
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 58px;
  padding: 3px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.54rem;
}
.draw2-tileset-cell:hover,
.draw2-tileset-cell.is-active {
  border-color: var(--draw2-accent-strong);
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 14%,
    var(--draw2-surface-raised)
  );
  color: var(--draw2-text-strong);
}
.draw2-tileset-cell canvas {
  display: block;
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
}
.draw2-game-scene-entry,
.draw2-game-asset-entry {
  cursor: pointer;
}
.draw2-game-scene-entry.is-active,
.draw2-game-asset-entry.is-active {
  border-color: var(--draw2-accent-strong);
}
.draw2-game-binding-controls {
  display: grid;
  gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--draw2-border-subtle);
}
.draw2-game-binding-list {
  display: grid;
  gap: 3px;
  max-height: 110px;
  overflow: auto;
}
.draw2-game-binding-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 5px;
  align-items: center;
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
}
.draw2-game-binding-entry strong,
.draw2-game-binding-entry small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-game-binding-entry strong {
  color: var(--draw2-text-strong);
  font-size: 0.6rem;
}
.draw2-game-binding-entry small {
  color: var(--draw2-text-muted);
  font-size: 0.52rem;
}
.draw2-build-check {
  grid-template-columns: 24px minmax(0, 1fr);
}
.draw2-build-check::before {
  display: none;
  content: none;
}
.draw2-build-check-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-self: start;
  margin-top: 1px;
}
.draw2-build-check[data-state="ok"] .draw2-build-check-icon {
  color: var(--draw2-accent-strong);
}
.draw2-build-check[data-state="warn"] .draw2-build-check-icon {
  color: var(--draw2-warning-strong, #f59e0b);
}
.draw2-build-check[data-state="error"] .draw2-build-check-icon {
  color: var(--draw2-danger-strong);
}
.draw2-audio-panel-entry {
  grid-template-columns: minmax(0, 1fr) auto;
}
.draw2-build-manifest-preview {
  max-height: 180px;
  margin: 0;
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface);
  color: var(--draw2-text-muted);
  font: 0.56rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .draw2-panel-action-row {
    flex-wrap: wrap;
  }
  .draw2-panel-action-row .draw2-button {
    flex: 1 1 45%;
  }
  .draw2-tileset-grid {
    grid-template-columns: repeat(4, minmax(44px, 1fr));
  }
}

@media (max-width: 700px) {
  .draw2-workspace-right-dock {
    grid-template-rows:
      minmax(120px, var(--draw2-right-palette-ratio, 30%)) 8px minmax(
        100px,
        1fr
      ) !important;
    border-radius: 4px !important;
  }
  .draw2-right-custom-dock > .draw2-workspace-tabs {
    padding-inline: 4px;
  }
  .draw2-right-custom-dock > .draw2-workspace-tabs .draw2-workspace-tab {
    min-width: 48px;
    padding-inline: 8px;
  }
  .draw2-right-custom-dock > .draw2-workspace-tabs .draw2-workspace-tab-add {
    min-width: 36px;
    width: 36px;
  }
}

/* Timeline command corner and selected-layer properties. The grid remains the
   virtualized projection; this wrapper only adds a local presentation rail. */
.draw2-timeline-main {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 6px var(--draw2-timeline-properties-width, 240px);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.draw2-timeline-tabs-shell {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-width: 0;
}
.draw2-timeline-tabs-shell > .draw2-timeline-tabs {
  flex: 1 1 auto;
  min-width: 0;
}
.draw2-timeline-secondary-controls {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  padding-inline: 4px;
}
.draw2-timeline-secondary-controls .draw2-timeline-rate {
  min-height: 28px;
}
.draw2-timeline-secondary-controls .draw2-timeline-rate select {
  height: 26px;
  min-height: 26px;
}
.draw2-timeline-main > .draw2-timeline-viewport {
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  height: 100% !important;
  max-height: none !important;
  align-self: stretch;
  margin-right: 0;
}
#draw2TimelinePanelTimeline {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
#draw2TimelinePanelTimeline > .draw2-timeline-more-controls {
  display: none !important;
}
.draw2-timeline-properties-resize {
  grid-column: 2;
  width: 6px;
  min-width: 6px;
  height: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
}
.draw2-timeline-properties-resize::after {
  display: block;
  width: 2px;
  height: 100%;
  margin: 0 auto;
  background: var(--draw2-border-subtle);
  content: "";
}
.draw2-timeline-properties-resize:hover::after,
.draw2-timeline-properties-resize:focus-visible::after,
.draw2-timeline-properties-resize.is-resizing::after {
  background: var(--draw2-accent-strong);
}
.draw2-timeline-layer-properties {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--draw2-surface-raised);
}
.draw2-timeline-properties-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 30px;
  min-width: 0;
  padding: 0 5px 0 8px;
  color: var(--draw2-text-strong);
  font-size: 0.68rem;
}
.draw2-timeline-properties-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-timeline-properties-heading .draw2-button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 2px;
}
.draw2-timeline-properties-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  overflow: auto;
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
}
.draw2-timeline-properties-empty {
  color: var(--draw2-text-muted);
}
.draw2-timeline-properties-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-timeline-property-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.draw2-timeline-property-field-heading {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.draw2-timeline-property-field-heading output {
  color: var(--draw2-text-strong);
  font-variant-numeric: tabular-nums;
}
.draw2-timeline-property-select {
  width: 100%;
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: var(--draw2-surface);
  color: var(--draw2-text-strong);
  font-size: 0.68rem;
}
.draw2-timeline-property-input {
  width: 100%;
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: var(--draw2-surface);
  color: var(--draw2-text-strong);
  font: inherit;
  font-size: 0.68rem;
}
.draw2-timeline-property-input:focus-visible,
.draw2-timeline-property-select:focus-visible {
  outline: 2px solid var(--draw2-focus-ring);
  outline-offset: 1px;
}
.draw2-timeline-property-opacity input {
  width: 100%;
  min-width: 0;
}
.draw2-timeline-property-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  color: var(--draw2-text-strong);
}
.draw2-timeline-property-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--draw2-accent-strong);
}
.draw2-timeline-layer-properties.is-collapsed {
  width: 28px;
}
.draw2-timeline-layer-properties.is-collapsed
  .draw2-timeline-properties-heading {
  justify-content: center;
  padding-inline: 0;
}
.draw2-timeline-layer-properties.is-collapsed
  .draw2-timeline-properties-heading
  strong,
.draw2-timeline-layer-properties.is-collapsed .draw2-timeline-properties-body {
  display: none;
}
.draw2-timeline-card[data-properties-collapsed="true"] .draw2-timeline-main {
  grid-template-columns: minmax(0, 1fr) 0 28px;
}
.draw2-timeline-card[data-properties-collapsed="true"]
  .draw2-timeline-properties-resize {
  display: none;
}

/* The corner is the command centre: controls are real existing controls, not
   duplicate proxies, so keyboard and domain behavior stay identical. */
.draw2-timeline-corner {
  display: flex !important;
  align-items: center;
  overflow: hidden;
  padding: 0 !important;
}
.draw2-timeline-corner-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: max-content;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.draw2-timeline-corner-controls::-webkit-scrollbar {
  display: none;
}
.draw2-timeline-corner-button,
.draw2-timeline-corner-controls > .draw2-button,
.draw2-timeline-corner-controls > .draw2-timeline-onion-options > summary {
  flex: 0 0 30px;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  border-radius: 3px;
  font-size: 0.72rem;
}
.draw2-timeline-corner-controls > .draw2-timeline-rate,
.draw2-timeline-corner-controls > .draw2-timeline-loop {
  flex: 0 0 auto;
}
.draw2-timeline-corner-rate select {
  width: 40px;
  min-width: 40px;
  height: 24px;
  min-height: 24px;
  padding-inline: 2px;
  font-size: 0.62rem;
}
.draw2-timeline-corner-loop {
  position: relative;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  justify-content: center;
}
.draw2-timeline-corner-loop input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.draw2-timeline-corner-loop > span[aria-hidden="true"] {
  font-size: 0.85rem;
}
.draw2-timeline-corner-loop:has(input:checked) {
  color: var(--draw2-accent-strong);
}
.draw2-timeline-corner-controls > .draw2-timeline-onion-options {
  position: relative;
  flex: 0 0 30px;
  min-width: 30px;
  max-width: 30px;
}
.draw2-timeline-corner-controls > .draw2-timeline-onion-options > summary {
  display: grid;
  place-items: center;
  list-style: none;
  cursor: pointer;
}
.draw2-timeline-corner-controls
  > .draw2-timeline-onion-options
  > summary::-webkit-details-marker {
  display: none;
}
.draw2-timeline-corner-controls
  > .draw2-timeline-onion-options
  .draw2-timeline-onion-popover {
  top: calc(100% + 3px);
  left: 0;
  right: auto;
}
.draw2-timeline-corner-controls > .draw2-timeline-more-actions {
  position: relative;
  flex: 0 0 30px;
  min-width: 30px;
}
.draw2-timeline-corner-controls > .draw2-timeline-more-actions > summary {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 3px;
  list-style: none;
  cursor: pointer;
}
.draw2-timeline-corner-controls
  > .draw2-timeline-more-actions
  > summary::-webkit-details-marker {
  display: none;
}
.draw2-timeline-corner-controls
  > .draw2-timeline-more-actions
  .draw2-timeline-more-popover {
  top: calc(100% + 3px);
  left: 0;
  right: auto;
}
.draw2-timeline-display-actions {
  display: none !important;
}
.draw2-timeline-row-label {
  gap: 4px;
  padding: 0 4px !important;
  cursor: pointer;
}
.draw2-timeline-row-label::before {
  display: none !important;
  content: none !important;
}
.draw2-timeline-row-visibility {
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.78rem;
}
.draw2-timeline-row-visibility[aria-pressed="true"] {
  color: var(--draw2-accent-strong);
}
.draw2-timeline-row-visibility:hover,
.draw2-timeline-row-visibility:focus-visible {
  background: color-mix(in srgb, var(--draw2-accent-strong) 14%, transparent);
  outline: 0;
}
.draw2-timeline-row-layer-dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--draw2-text-muted);
}
.draw2-timeline-row-layer-dot[data-layer-visible="true"] {
  background: var(--draw2-accent-strong);
}
.draw2-timeline-row-label-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-timeline-row-label:focus-visible {
  outline: 2px solid var(--draw2-focus);
  outline-offset: -2px;
}
.draw2-timeline-layer-add-row {
  pointer-events: none;
}
.draw2-timeline-layer-add-header {
  display: grid !important;
  place-items: center;
  width: var(--draw2-timeline-label-width) !important;
  min-width: var(--draw2-timeline-label-width) !important;
  max-width: var(--draw2-timeline-label-width) !important;
  height: var(--draw2-timeline-row-height) !important;
  min-height: var(--draw2-timeline-row-height) !important;
  max-height: var(--draw2-timeline-row-height) !important;
  padding: 0 !important;
  border: 1px solid var(--draw2-border-subtle) !important;
  border-radius: 2px !important;
  background: var(--draw2-surface-raised);
  color: var(--draw2-accent-strong);
  cursor: pointer;
  font-size: 1rem;
  pointer-events: auto;
}
.draw2-timeline-layer-add-header:hover,
.draw2-timeline-layer-add-header:focus-visible {
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 14%,
    var(--draw2-surface-raised)
  );
  outline: 0;
}

@media (max-width: 700px) {
  .draw2-timeline-main {
    display: block;
  }
  .draw2-timeline-properties-resize,
  .draw2-timeline-layer-properties {
    display: none !important;
  }
  .draw2-timeline-corner-controls {
    gap: 2px;
  }
  .draw2-timeline-corner-button,
  .draw2-timeline-corner-controls > .draw2-button,
  .draw2-timeline-corner-controls > .draw2-timeline-onion-options > summary {
    flex-basis: 32px;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
  .draw2-timeline-corner-loop {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
  .draw2-timeline-corner-controls > .draw2-timeline-onion-options {
    flex-basis: 32px;
    min-width: 32px;
    max-width: 32px;
  }
}

/* Mobile final layout guardrails. The timeline is a grid row, never a fixed
   overlay, so it cannot cover the Canvas or the touch tool rail. */
@media (max-width: 700px) {
  html:has(#draw2WorkspaceFrame),
  body:has(#draw2WorkspaceFrame) {
    width: 100%;
    overflow: hidden !important;
  }
  .draw2-workspace-frame {
    grid-template-rows:
      76px minmax(0, 1fr) auto clamp(132px, 22dvh, 184px) 24px !important;
    grid-template-areas: "top" "canvas" "left" "timeline" "status" !important;
  }
  .draw2-workspace-topbar {
    grid-area: top !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 36px 40px !important;
    height: 76px !important;
    min-height: 76px !important;
    overflow: hidden !important;
  }
  .draw2-workspace-global-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 2px 4px !important;
  }
  .draw2-workspace-command-bar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
    overflow-x: auto;
    justify-content: flex-end;
  }
  .draw2-workspace-context-row {
    height: 40px !important;
    min-height: 40px !important;
    padding: 2px 4px !important;
  }
  .draw2-workspace-quick-controls {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .draw2-workspace-left-dock {
    position: static !important;
    grid-area: left !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .draw2-workspace-left-dock .draw2-workspace-toolbar,
  .draw2-workspace-left-dock .draw2-workspace-panel-launcher {
    flex: 0 0 40px !important;
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .draw2-workspace-timeline-region {
    position: static !important;
    inset: auto !important;
    grid-area: timeline !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #draw2WorkspaceTimelineSlot,
  #draw2WorkspaceTimelineSlot > .draw2-timeline-card,
  #draw2TimelinePanelTimeline {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
  }
  #draw2WorkspaceTimelineSlot > .draw2-timeline-card,
  #draw2TimelinePanelTimeline,
  #draw2WorkspaceTimelineSlot .draw2-timeline-main {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-main {
    height: auto !important;
    overflow: hidden;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-tabs-shell {
    flex: 0 0 32px;
    height: 32px;
    min-height: 32px;
    overflow: hidden;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-main > .draw2-timeline-viewport {
    flex: 1 1 auto;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 2px !important;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
    --draw2-timeline-label-width: 112px !important;
    --draw2-timeline-cell-width: 32px !important;
    --draw2-timeline-row-height: 32px !important;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-row-label,
  #draw2WorkspaceTimelineSlot .draw2-timeline-layer-add-header {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-frame-header,
  #draw2WorkspaceTimelineSlot .draw2-timeline-corner {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-row-visibility {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
  }
  #draw2WorkspaceTimelineSlot .draw2-timeline-secondary-controls {
    max-width: 64px;
    padding-inline: 2px;
    overflow: hidden;
  }
  #draw2WorkspaceTimelineSlot
    .draw2-timeline-secondary-controls
    .draw2-timeline-rate
    select {
    width: 54px;
    min-width: 54px;
    height: 30px;
    min-height: 30px;
  }
}

/* Virtual Timeline rows are replaced in bounded windows. Letting the browser
   apply scroll anchoring to those replacements can emit another scroll event
   while rendering; the viewport owns its explicit scroll position instead. */
.draw2-timeline-viewport {
  overflow-anchor: none;
}

@media (max-width: 700px) and (orientation: landscape) {
  .draw2-workspace-frame {
    grid-template-rows: 64px minmax(0, 1fr) auto 132px 22px !important;
  }
  .draw2-workspace-topbar {
    height: 64px !important;
    min-height: 64px !important;
  }
  .draw2-workspace-global-row {
    height: 32px !important;
    min-height: 32px !important;
    grid-template-rows: 32px !important;
  }
  .draw2-workspace-context-row {
    height: 32px !important;
    min-height: 32px !important;
  }
}

/*
 * Mobile presentation contract
 *
 * The Draw2 entry may be rendered inside a narrow host while the browser
 * viewport is still wide.  wp180-workspace-ui.ts records the measured frame
 * profile on data-workspace-profile, so this contract is independent from
 * the host viewport's media-query state.  Mobile is a Canvas-first product
 * layout: top actions, Canvas, one tool lane, a two-row quick palette, a
 * panel launcher lane, then an always-visible compact Timeline.
 */
.draw2-workspace-frame[data-workspace-profile="mobile"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-inline: 0 !important;
  border-radius: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows:
    76px minmax(0, 1fr) 160px clamp(136px, 22dvh, 190px) 24px !important;
  grid-template-areas: "top" "canvas" "left" "timeline" "status" !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 36px 40px !important;
  height: 76px !important;
  min-height: 76px !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-global-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  min-width: 0 !important;
  padding: 2px 4px !important;
  gap: 4px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"] .draw2-workspace-brand,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-project-slot {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-menu-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 32px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-menu-bar::-webkit-scrollbar,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar::-webkit-scrollbar,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-quick-controls::-webkit-scrollbar,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar::-webkit-scrollbar {
  display: none;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-menu-bar
  .draw2-menu {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-menu-bar
  .draw2-menu
  summary {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  font-size: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-menu-bar
  .draw2-menu-icon {
  width: 17px !important;
  height: 17px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-menu-bar
  .draw2-menu-popover {
  position: fixed !important;
  z-index: 120 !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  overflow: auto !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: auto !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar
  > * {
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar
  > :nth-child(n+3),
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar
  .draw2-theme-control,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar
  .draw2-language-control {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-context-row {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 2px 4px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-quick-controls {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 36px !important;
  min-width: 0 !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"] .draw2-quick-control {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 36px !important;
  height: 34px !important;
  min-height: 34px !important;
  gap: 3px !important;
  padding: 0 4px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-quick-control
  > span {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-quick-control-size {
  width: 124px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-quick-control-size
  input {
  flex: 1 1 auto !important;
  min-width: 64px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-quick-control
  select {
  width: 48px !important;
  min-width: 48px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 2px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-quick-control
  output {
  min-width: 30px !important;
  color: var(--draw2-text-strong) !important;
  font-size: 0.66rem !important;
  text-align: right !important;
}

.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-canvas-region {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceCanvasSlot,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceCanvasSlot
  > .draw2-canvas-card {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceCanvasSlot
  > .draw2-canvas-card {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceCanvasSlot
  .draw2-card-heading,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceCanvasSlot
  .draw2-help,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceCanvasSlot
  .draw2-metrics,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceCanvasSlot
  .draw2-quick-palette,
.draw2-workspace-frame[data-workspace-profile="mobile"] .draw2-mini-preview {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceCanvasSlot
  .draw2-viewport-wrap {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceCanvasSlot
  .draw2-canvas-stack {
  /* The entry module owns the measured fit size and the zoomed size.  Keep a
     safe fallback for the short period before the first layout measurement,
     but never clamp a zoomed canvas back to the wrapper dimensions. */
  width: var(--draw2-canvas-display-width, min(100cqw, 100cqh)) !important;
  height: var(--draw2-canvas-display-height, min(100cqw, 100cqh)) !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  flex: 0 0 auto !important;
}

.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-left-dock {
  position: static !important;
  display: grid !important;
  grid-area: left !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 40px minmax(56px, 1fr) 40px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 4px 8px !important;
  gap: 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--draw2-surface) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar {
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar
  > .draw2-tool-group,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar
  > .draw2-tool-button {
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-tool-group-summary,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar
  > .draw2-tool-button {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"] .draw2-tool-group-label,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar
  > .draw2-tool-button
  span {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-mobile-color-rail {
  grid-row: 2 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-mobile-color-active {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-mobile-color-rail
  .draw2-palette-grid {
  display: grid !important;
  grid-template-rows: repeat(2, 32px) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 32px !important;
  width: 100% !important;
  height: 64px !important;
  max-height: 64px !important;
  gap: 3px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x !important;
  scrollbar-width: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-mobile-color-rail
  .draw2-palette-grid::-webkit-scrollbar {
  display: none;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-mobile-color-rail
  .draw2-color,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-mobile-color-rail
  .draw2-color-add {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 2px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher {
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher {
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher
  span {
  display: none !important;
}

.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-right-dock {
  grid-area: auto !important;
  position: fixed !important;
  left: 4px !important;
  right: 4px !important;
  bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 40 !important;
  display: flex !important;
  width: auto !important;
  height: min(72dvh, 560px) !important;
  min-height: 0 !important;
  border: 1px solid var(--draw2-border-strong) !important;
  border-radius: 6px !important;
  box-shadow: var(--draw2-shadow-panel) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(calc(100% + 12px)) !important;
  transition:
    transform 160ms ease,
    opacity 160ms ease,
    visibility 0s linear 160ms !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-right-dock.is-open,
.draw2-workspace-frame[data-workspace-profile="mobile"].is-mobile-sheet-open
  .draw2-workspace-right-dock {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition-delay: 0s !important;
}

.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-timeline-region {
  position: static !important;
  inset: auto !important;
  grid-area: timeline !important;
  display: flex !important;
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--draw2-surface) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  > .draw2-timeline-card,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2TimelinePanelTimeline {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  > .draw2-timeline-card,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2TimelinePanelTimeline {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-tabs-shell {
  flex: 0 0 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-main {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-viewport {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 2px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-viewport {
  --draw2-timeline-label-width: 104px !important;
  --draw2-timeline-cell-width: 32px !important;
  --draw2-timeline-row-height: 32px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-row-label,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-layer-add-header {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-cell,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-frame-header,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-corner {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-secondary-controls {
  max-width: 64px !important;
  padding-inline: 2px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-statusbar {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  font-size: 0.58rem !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-statusbar
  .draw2-statusbar-save {
  display: none !important;
}

@media (max-width: 700px) {
  .draw2-workspace-frame[data-workspace-profile="mobile"] {
    grid-template-rows:
      76px minmax(0, 1fr) 160px clamp(136px, 22dvh, 190px) 24px !important;
  }
}

/* Mobile implementation profile derived from the reference sheets: header
 * -> tools -> context -> canvas -> palette -> compact panel tabs -> one active
 * detail panel.  The sheets are explanatory material, not a literal runtime
 * page; the right dock is flattened into one bounded presentation tree. */
.draw2-workspace-frame[data-workspace-profile="mobile"] {
  --draw2-mobile-touch-size: 48px;
  --draw2-mobile-swatch-size: 44px;
  --draw2-mobile-tab-size: 44px;
  grid-template-rows:
    48px 48px 40px minmax(156px, 1fr) 52px 44px minmax(176px, 28dvh) 24px
    !important;
  grid-template-areas:
    "top" "mobile-tools" "context" "canvas" "mobile-palette" "mobile-tabs" "mobile-panel" "status"
    !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-topbar {
  display: contents !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-global-row {
  grid-area: top !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 104px auto !important;
  grid-template-rows: 48px !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 4px 6px !important;
  gap: 4px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-menu-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-items: center !important;
  height: 40px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-menu-bar
  .draw2-menu,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-menu-bar
  .draw2-menu
  summary {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-menu-bar
  .draw2-menu
  summary {
  padding: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-project-slot {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 104px !important;
  max-width: 104px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceProjectSlot
  > #draw2ProjectCard {
  width: 104px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceProjectSlot
  .draw2-controls {
  display: block !important;
  width: 104px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceProjectSlot
  .draw2-controls
  label:not(:first-child),
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceProjectSlot
  .draw2-action-row,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceProjectSlot
  .draw2-help,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceProjectSlot
  #draw2CreateProject {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceProjectSlot
  #draw2ProjectId {
  display: block !important;
  width: 104px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 8px !important;
  font-size: 0.68rem !important;
  text-overflow: ellipsis !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: auto !important;
  height: 40px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar
  > * {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar
  > :nth-child(n+3),
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar
  .draw2-theme-control,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar
  .draw2-language-control {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-context-row {
  grid-area: context !important;
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 2px 6px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-quick-controls {
  height: 34px !important;
  min-height: 34px !important;
  gap: 4px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"] .draw2-quick-control {
  height: 32px !important;
  min-height: 32px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-left-dock {
  display: contents !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar {
  grid-area: mobile-tools !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: var(--draw2-mobile-touch-size) !important;
  min-height: var(--draw2-mobile-touch-size) !important;
  padding: 2px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: var(--draw2-surface) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar
  > .draw2-tool-group,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar
  > .draw2-tool-button,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-tool-group-summary {
  flex: 0 0 var(--draw2-mobile-touch-size) !important;
  width: var(--draw2-mobile-touch-size) !important;
  min-width: var(--draw2-mobile-touch-size) !important;
  height: var(--draw2-mobile-touch-size) !important;
  min-height: var(--draw2-mobile-touch-size) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar
  .draw2-tool-group-label,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar
  > .draw2-tool-button
  > span {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-toolbar
  > .draw2-tool-button.is-active,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-tool-group.is-active
  > .draw2-tool-group-summary {
  border-color: var(--draw2-accent-strong) !important;
  background: color-mix(in srgb, var(--draw2-accent-strong) 15%, transparent)
    !important;
  color: var(--draw2-accent-strong) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-tool-popover
  .draw2-tool-button {
  width: var(--draw2-mobile-touch-size) !important;
  min-width: var(--draw2-mobile-touch-size) !important;
  height: var(--draw2-mobile-touch-size) !important;
  min-height: var(--draw2-mobile-touch-size) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-canvas-region {
  grid-area: canvas !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 8px 16px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-right-dock {
  display: contents !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceRightResize,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspacePaletteResize,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-right-panel-picker,
.draw2-workspace-frame[data-workspace-profile="mobile"] .draw2-workspace-tabs {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspacePaletteStrip {
  grid-area: mobile-palette !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--draw2-surface) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspacePaletteStrip
  .draw2-palette-active-color {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspacePaletteStrip
  .draw2-palette-grid {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspacePaletteStrip
  .draw2-palette-grid::-webkit-scrollbar {
  display: none;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspacePaletteStrip
  .draw2-color,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspacePaletteStrip
  .draw2-color-add {
  flex: 0 0 var(--draw2-mobile-swatch-size) !important;
  width: var(--draw2-mobile-swatch-size) !important;
  min-width: var(--draw2-mobile-swatch-size) !important;
  height: var(--draw2-mobile-swatch-size) !important;
  min-height: var(--draw2-mobile-swatch-size) !important;
  padding: 0 !important;
  border-radius: 2px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher {
  grid-area: mobile-tabs !important;
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  height: var(--draw2-mobile-tab-size) !important;
  min-height: var(--draw2-mobile-tab-size) !important;
  padding: 0 8px !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: var(--draw2-surface) !important;
  border-top: 1px solid var(--draw2-border-subtle) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: var(--draw2-mobile-tab-size) !important;
  min-height: var(--draw2-mobile-tab-size) !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--draw2-text-muted) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher[data-workspace-panel="color"] {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher[data-workspace-panel="inspector"] {
  order: 1;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-mobile-timeline-toggle {
  order: 2;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher[data-workspace-panel="layers"] {
  order: 3;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher.is-active {
  color: var(--draw2-text-strong) !important;
  border-bottom-color: var(--draw2-accent-strong) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher
  .draw2-ui-icon {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher
  span {
  display: block !important;
  font-size: 0.72rem !important;
  white-space: nowrap !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher[data-workspace-panel="inspector"]
  span {
  font-size: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher[data-workspace-panel="inspector"]
  span::after {
  content: "Tools";
  font-size: 0.72rem;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-right-custom-dock {
  display: contents !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspacePanelColor {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceColorEditor:not([hidden]),
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel:not([hidden]) {
  grid-area: mobile-panel !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 8px !important;
  overflow: auto !important;
  border: 0 !important;
  border-top: 1px solid var(--draw2-border-subtle) !important;
  border-radius: 0 !important;
  background: var(--draw2-surface) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-timeline-region {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"].is-mobile-timeline-open
  .draw2-workspace-timeline-region {
  grid-area: mobile-panel !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 8px 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--draw2-surface) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"].is-mobile-timeline-open
  #draw2WorkspaceColorEditor:not([hidden]),
.draw2-workspace-frame[data-workspace-profile="mobile"].is-mobile-timeline-open
  .draw2-workspace-panel:not([hidden]) {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-statusbar {
  grid-area: status !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
}

/* The right-dock palette strip is the single Mobile palette source. The
 * legacy left-dock quick palette remains available to Desktop/Tablet rules,
 * but must not create a second palette lane in the Mobile presentation tree. */
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-mobile-color-rail {
  display: none !important;
}

@media (max-width: 700px) and (max-height: 680px) {
  .draw2-workspace-frame[data-workspace-profile="mobile"] {
    --draw2-mobile-touch-size: 44px;
    --draw2-mobile-swatch-size: 40px;
    --draw2-mobile-tab-size: 40px;
    grid-template-rows:
      44px 44px 36px minmax(132px, 1fr) 48px 40px minmax(150px, 25dvh) 22px
      !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-global-row {
    height: 44px !important;
    min-height: 44px !important;
    grid-template-rows: 44px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-context-row {
    height: 36px !important;
    min-height: 36px !important;
  }
}

/* Mobile lower workspace: Palette is the single always-visible color area;
 * the Timeline card below it owns the extensible Timeline/Tags/Markers/Audio
 * tab strip. The older Tools/Timeline/Layers launcher row is intentionally
 * not rendered here, so two different timeline tab systems cannot compete. */
.draw2-workspace-frame[data-workspace-profile="mobile"] {
  grid-template-rows:
    48px 48px 40px minmax(156px, 1fr) 52px minmax(196px, 30dvh) 24px !important;
  grid-template-areas:
    "top" "mobile-tools" "context" "canvas" "mobile-palette" "mobile-timeline" "status"
    !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel-launcher {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-timeline-region {
  grid-area: mobile-timeline !important;
  position: static !important;
  inset: auto !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 8px 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--draw2-surface) !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  > .draw2-timeline-card {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-tabs-shell {
  flex: 0 0 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-tab {
  min-width: 74px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding-inline: 10px !important;
  font-size: 0.72rem !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-tab-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-toolbar {
  flex: 0 0 48px !important;
  min-height: 48px !important;
  height: 48px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-toolbar
  > .draw2-button,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-toolbar
  > .draw2-timeline-onion-options
  > summary,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-toolbar
  > .draw2-timeline-more-actions
  > summary {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceTimelineSlot
  .draw2-timeline-viewport {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}
/* Inspector/Layer/Color detail remains an on-demand sheet from the global
 * menus. It must not become an implicit grid item after the permanent lower
 * Timeline surface replaces the old launcher row. */
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-panel:not([hidden]),
.draw2-workspace-frame[data-workspace-profile="mobile"]
  #draw2WorkspaceColorEditor:not([hidden]) {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"].is-mobile-sheet-open
  .draw2-workspace-panel:not([hidden]),
.draw2-workspace-frame[data-workspace-profile="mobile"].is-mobile-sheet-open
  #draw2WorkspaceColorEditor:not([hidden]) {
  position: fixed !important;
  z-index: 150 !important;
  left: 8px !important;
  right: 8px !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  display: block !important;
  width: auto !important;
  height: min(52dvh, 420px) !important;
  max-height: calc(100dvh - 16px) !important;
  min-height: 0 !important;
  overflow: auto !important;
  border: 1px solid var(--draw2-border-strong) !important;
  border-radius: 4px !important;
  background: var(--draw2-surface) !important;
  box-shadow: var(--draw2-shadow-panel) !important;
}

@media (max-width: 700px) and (max-height: 680px) {
  .draw2-workspace-frame[data-workspace-profile="mobile"] {
    grid-template-rows:
      44px 44px 36px minmax(132px, 1fr) 48px minmax(176px, 27dvh) 22px
      !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-tabs-shell {
    flex-basis: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-tab {
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Tablet Adaptive Workspace
 *
 * Tablet is intentionally not a scaled Desktop or a widened Phone.  Split
 * and landscape profiles keep a compact three-region dock; portrait keeps
 * the Canvas first and moves Color, Tools, Context and panel entry points to
 * deliberate lower lanes.  The same Core remains the authority for every
 * profile; only presentation and panel mounting change here.
 */
.draw2-workspace-frame[data-workspace-profile="tablet"],
.draw2-workspace-frame[data-workspace-profile="split"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  grid-template-rows:
    72px minmax(320px, 1fr) clamp(136px, 20dvh, 220px) 24px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"],
.draw2-workspace-frame[data-workspace-profile="split"] {
  grid-template-columns: 52px minmax(0, 1fr) 244px !important;
  grid-template-areas:
    "top top top" "left canvas right" "timeline timeline timeline" "status status status"
    !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-topbar,
.draw2-workspace-frame[data-workspace-profile="split"] .draw2-workspace-topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 38px 34px !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-global-row,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-global-row {
  grid-template-columns: 112px minmax(0, 1fr) auto !important;
  grid-template-rows: 36px !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 2px 4px !important;
  gap: 4px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-project-slot,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-project-slot {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-menu-bar,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-menu-bar {
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-menu-bar::-webkit-scrollbar,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-menu-bar::-webkit-scrollbar,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-command-bar::-webkit-scrollbar,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-command-bar::-webkit-scrollbar {
  display: none;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-menu-bar
  .draw2-menu,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-menu-bar
  .draw2-menu {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-menu-bar
  .draw2-menu
  summary,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-menu-bar
  .draw2-menu
  summary {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  font-size: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-menu-bar
  .draw2-menu-icon,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-menu-bar
  .draw2-menu-icon {
  width: 17px !important;
  height: 17px !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-command-bar,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-command-bar {
  min-width: 0 !important;
  gap: 2px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-command-bar
  > *,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-command-bar
  > * {
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-command-bar
  > :nth-child(n+6),
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-command-bar
  > :nth-child(n+6),
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-theme-control,
.draw2-workspace-frame[data-workspace-profile="split"] .draw2-theme-control,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-language-control,
.draw2-workspace-frame[data-workspace-profile="split"] .draw2-language-control {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-context-row,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-context-row {
  height: 34px !important;
  min-height: 34px !important;
  padding: 1px 4px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-quick-controls,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-quick-controls {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-quick-control,
.draw2-workspace-frame[data-workspace-profile="split"] .draw2-quick-control {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  height: 30px !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-left-dock,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-left-dock {
  display: flex !important;
  flex-direction: column !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 100% !important;
  padding: 4px !important;
  gap: 4px !important;
  overflow: visible !important;
  border-right: 1px solid var(--draw2-border-subtle) !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-toolbar,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  overflow: visible !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-left-dock
  .draw2-mobile-color-rail,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-left-dock
  .draw2-workspace-panel-launcher,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-left-dock
  .draw2-mobile-color-rail,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-left-dock
  .draw2-workspace-panel-launcher {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-canvas-region,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-canvas-region {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-mini-preview,
.draw2-workspace-frame[data-workspace-profile="split"] .draw2-mini-preview {
  transform: scale(0.82) !important;
  transform-origin: top right !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-right-dock,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-right-dock {
  position: static !important;
  display: flex !important;
  width: 244px !important;
  min-width: 244px !important;
  height: 100% !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border-left: 1px solid var(--draw2-border-subtle) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="landscape"]
  .draw2-workspace-timeline-region,
.draw2-workspace-frame[data-workspace-profile="split"]
  .draw2-workspace-timeline-region {
  display: flex !important;
  min-height: 0 !important;
  padding: 4px 6px !important;
  overflow: hidden !important;
}

/* Portrait tablet: Canvas -> Color -> Tools -> Context. Panels open as a
   side sheet, while Timeline remains an explicit lower overlay rather than
   stealing permanent Canvas height. */
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 40px minmax(260px, 1fr) 168px 40px 24px !important;
  grid-template-areas: "top" "canvas" "left" "context" "status" !important;
  border-radius: 6px !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-topbar {
  display: contents !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-global-row {
  grid-area: top !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 2px 6px !important;
  gap: 4px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-context-row {
  grid-area: context !important;
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 2px 8px !important;
  overflow: hidden !important;
  border-top: 1px solid var(--draw2-border-subtle) !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-brand,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-project-slot {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-menu-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-menu-bar::-webkit-scrollbar {
  display: none;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-menu-bar
  .draw2-menu {
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-menu-bar
  .draw2-menu
  summary {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  font-size: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-command-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  gap: 3px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-command-bar
  > * {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-command-bar
  > :nth-child(n+3),
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-theme-control,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-language-control {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-canvas-region {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  #draw2WorkspaceCanvasSlot
  > .draw2-canvas-card {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  #draw2WorkspaceCanvasSlot
  .draw2-card-heading,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  #draw2WorkspaceCanvasSlot
  .draw2-help,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  #draw2WorkspaceCanvasSlot
  .draw2-metrics,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-mini-preview {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  #draw2WorkspaceCanvasSlot
  .draw2-viewport-wrap {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  #draw2WorkspaceCanvasSlot
  .draw2-canvas-stack {
  width: var(--draw2-canvas-display-width, min(100cqw, 100cqh)) !important;
  height: var(--draw2-canvas-display-height, min(100cqw, 100cqh)) !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  flex: 0 0 auto !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-left-dock {
  grid-area: left !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 64px 44px 44px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 168px !important;
  min-height: 168px !important;
  padding: 4px 8px !important;
  gap: 4px !important;
  overflow: hidden !important;
  border: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-mobile-color-rail {
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 64px !important;
  overflow: hidden !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-mobile-color-active {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-mobile-color-rail
  .draw2-palette-grid {
  display: grid !important;
  grid-template-rows: repeat(2, 32px) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 32px !important;
  width: 100% !important;
  height: 64px !important;
  max-height: 64px !important;
  gap: 3px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-mobile-color-rail
  .draw2-palette-grid::-webkit-scrollbar {
  display: none;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-mobile-color-rail
  .draw2-color,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-mobile-color-rail
  .draw2-color-add {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 2px !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-toolbar {
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-toolbar::-webkit-scrollbar {
  display: none;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-toolbar
  > .draw2-tool-group,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-toolbar
  > .draw2-tool-button {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-tool-group-summary,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-toolbar
  > .draw2-tool-button {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-tool-group-label,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-toolbar
  > .draw2-tool-button
  span {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-panel-launcher {
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-panel-launcher
  .draw2-panel-launcher
  span {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-right-dock {
  position: absolute !important;
  top: 40px !important;
  right: 0 !important;
  bottom: 24px !important;
  z-index: 40 !important;
  display: flex !important;
  width: min(360px, 82%) !important;
  min-width: 0 !important;
  height: auto !important;
  transform: translateX(100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  border-left: 1px solid var(--draw2-border-strong) !important;
  box-shadow: var(--draw2-shadow-panel) !important;
  transition:
    transform 160ms ease,
    opacity 160ms ease,
    visibility 0s linear 160ms !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"].is-mobile-sheet-open
  .draw2-workspace-right-dock {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition-delay: 0s !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-timeline-region {
  display: none !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"].is-mobile-timeline-open
  .draw2-workspace-timeline-region {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 35 !important;
  display: flex !important;
  width: auto !important;
  height: min(48dvh, 420px) !important;
  min-height: 180px !important;
  padding: 4px !important;
  border: 1px solid var(--draw2-border-strong) !important;
  box-shadow: var(--draw2-shadow-panel) !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-statusbar {
  height: 24px !important;
  min-height: 24px !important;
  padding-inline: 8px !important;
  font-size: 0.58rem !important;
}
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-statusbar
  .draw2-statusbar-save {
  display: none !important;
}

/* Canonical responsive workspace contract ---------------------------------
   The frame itself is the only responsive surface.  Controls keep their
   touch/desktop size and scroll inside their own rail instead of shrinking
   or colliding with neighbouring controls. */
@media (min-width: 701px) {
  .draw2-workspace-frame {
    grid-template-columns:
      var(--draw2-tool-rail-width) minmax(0, 1fr) minmax(
        244px,
        var(--draw2-right-dock-width, var(--draw2-panel-width))
      ) !important;
    grid-template-rows:
      auto minmax(0, 1fr) var(--draw2-timeline-height) var(
        --draw2-statusbar-height
      ) !important;
  }

  .draw2-workspace-global-row {
    grid-template-columns:
      minmax(128px, auto) minmax(0, 1fr) minmax(160px, 240px) minmax(160px, 1fr)
      !important;
    min-width: 0 !important;
  }
  .draw2-workspace-menu-bar,
  .draw2-workspace-command-bar {
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
  }
  .draw2-workspace-menu-bar .draw2-menu,
  .draw2-workspace-menu-bar .draw2-menu summary {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    font-size: 0.69rem !important;
  }
  .draw2-workspace-menu-bar .draw2-menu summary {
    min-height: 30px !important;
    padding-inline: 7px !important;
  }
  .draw2-workspace-command-bar > * {
    display: inline-flex !important;
    flex: 0 0 var(--draw2-control-size) !important;
    width: var(--draw2-control-size) !important;
    min-width: var(--draw2-control-size) !important;
    height: var(--draw2-control-size) !important;
    min-height: var(--draw2-control-size) !important;
  }
  .draw2-workspace-command-bar .draw2-theme-control,
  .draw2-workspace-command-bar .draw2-language-control {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
  }

  .draw2-workspace-right-dock {
    width: auto !important;
    min-width: 244px !important;
  }
  .draw2-workspace-right-dock > #draw2WorkspaceRightResize {
    left: -6px !important;
    width: 12px !important;
  }
  .draw2-workspace-timeline-region {
    display: block !important;
    min-height: 140px !important;
  }
  .draw2-timeline-resize-handle {
    display: block !important;
  }
}

/* Every resize affordance is a thin full-edge rule.  The button remains a
   wider invisible hit target for mouse, touch, and stylus. */
:root {
  --draw2-resize-grip-thickness: 1px;
  --draw2-resize-grip-length: 100%;
}
.draw2-dock-resize-handle::before {
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 1px !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
}
.draw2-timeline-resize-handle::before {
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
  border-radius: 0 !important;
}
.draw2-workspace-right-dock > #draw2WorkspacePaletteResize {
  position: relative !important;
  height: 12px !important;
  min-height: 12px !important;
  background: transparent !important;
}
.draw2-workspace-right-dock > #draw2WorkspacePaletteResize::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--draw2-border-strong);
  opacity: 0.9;
  transform: translateY(-50%);
}
.draw2-workspace-right-dock > #draw2WorkspacePaletteResize:hover::before,
.draw2-workspace-right-dock
  > #draw2WorkspacePaletteResize:focus-visible::before,
.draw2-workspace-right-dock > #draw2WorkspacePaletteResize.is-resizing::before,
.draw2-workspace-right-dock.is-palette-resizing
  > #draw2WorkspacePaletteResize::before {
  background: var(--draw2-accent-strong);
}
.draw2-timeline-properties-resize::after {
  width: 1px !important;
}

/* On phones the lower rails stay present; Timeline and other panels are
   sheets opened from the tab lane.  No compact/expand button is needed. */
@media (max-width: 700px) {
  .draw2-workspace-frame[data-workspace-profile="mobile"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 88px minmax(156px, 1fr) 48px 76px 44px 24px !important;
    grid-template-areas:
      "top" "canvas" "mobile-tools" "mobile-palette" "mobile-tabs" "status"
      !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-topbar {
    display: flex !important;
    flex-direction: column !important;
    grid-area: top !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 88px !important;
    min-height: 88px !important;
    overflow: hidden !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-global-row {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 0 0 44px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-context-row {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 0 0 40px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-left-dock {
    grid-column: 1 !important;
    grid-row: 3 / 6 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 168px !important;
    padding: 0 8px env(safe-area-inset-bottom, 0px) !important;
    overflow: hidden !important;
    border: 0 !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-toolbar {
    flex: 0 0 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    align-items: center !important;
    padding: 2px 0 !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-toolbar
    > .draw2-tool-group,
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-toolbar
    > .draw2-tool-button,
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-tool-group-summary {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-mobile-color-rail {
    display: grid !important;
    flex: 0 0 76px !important;
    grid-template-rows: 1fr !important;
    height: 76px !important;
    min-height: 76px !important;
    width: 100% !important;
    padding: 2px 0 !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-mobile-color-active {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-mobile-color-rail
    .draw2-palette-grid {
    grid-template-rows: repeat(2, 34px) !important;
    grid-auto-columns: 40px !important;
    gap: 4px !important;
    max-height: 72px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-mobile-color-rail
    .draw2-color,
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-mobile-color-rail
    .draw2-color-add {
    height: 34px !important;
    min-height: 34px !important;
    width: 40px !important;
    min-width: 40px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel-launcher {
    flex: 0 0 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel-launcher
    .draw2-panel-launcher {
    flex: 0 0 88px !important;
    width: 88px !important;
    min-width: 88px !important;
    height: 44px !important;
    min-height: 44px !important;
    order: 0 !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-right-dock {
    bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 184px - env(safe-area-inset-bottom, 0px))
      !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-timeline-region {
    bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel-launcher {
    grid-area: mobile-tabs !important;
    display: flex !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-toolbar {
    grid-area: mobile-tools !important;
    height: 48px !important;
    min-height: 48px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-timeline-region,
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel:not([hidden]),
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    #draw2WorkspaceColorEditor:not([hidden]) {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 180 !important;
    width: auto !important;
    height: min(48dvh, 380px) !important;
    min-height: 180px !important;
    max-height: calc(100dvh - 148px) !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 1px solid var(--draw2-border-strong) !important;
    border-radius: 4px !important;
    background: var(--draw2-surface) !important;
    box-shadow: var(--draw2-shadow-panel) !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-timeline-region {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"].is-mobile-timeline-open
    .draw2-workspace-timeline-region {
    display: flex !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel:not([hidden]),
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    #draw2WorkspaceColorEditor:not([hidden]) {
    display: block !important;
  }
}

/* Final mobile sheet offset: the always-visible tool, palette, and tab rails
   occupy the lower 168px, so switchable panels must sit above them. */
@media (max-width: 700px) {
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-timeline-region {
    bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"].is-mobile-timeline-open
    .draw2-workspace-timeline-region {
    position: fixed !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: min(48dvh, 380px) !important;
    min-height: 180px !important;
    max-height: calc(100dvh - 184px - env(safe-area-inset-bottom, 0px))
      !important;
    box-sizing: border-box !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-timeline-region,
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel:not([hidden]),
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    #draw2WorkspaceColorEditor:not([hidden]) {
    max-height: calc(100dvh - 184px - env(safe-area-inset-bottom, 0px))
      !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-timeline-tabs-shell {
    flex: 0 0 82px !important;
    height: 82px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"] .draw2-timeline-tabs {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-timeline-secondary-controls {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    justify-content: flex-end !important;
    overflow-x: auto !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-tabs-shell {
    flex: 0 0 82px !important;
    height: 82px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-tabs {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-secondary-controls {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 32px !important;
    justify-content: flex-end !important;
    overflow-x: auto !important;
  }
}

@media (min-width: 701px) {
  #draw2CommandPalette,
  #draw2ShortcutsDialog,
  #draw2SettingsDialog,
  #draw2CanvasSettingsDialog {
    width: min(920px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
  }
  #draw2ShortcutsDialog .draw2-shortcut-list {
    max-height: min(68dvh, 680px) !important;
    columns: 2;
    column-gap: 24px;
  }
  #draw2ShortcutsDialog .draw2-shortcut-category,
  #draw2ShortcutsDialog .draw2-shortcut-row {
    break-inside: avoid;
  }
}

/* Final timeline sizing: keep the label/cell geometry canonical from the
   first projection and give timeline controls the same comfortable scale as
   the surrounding authoring controls. */
@media (min-width: 701px) {
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
    --draw2-timeline-cell-size: 40px !important;
    --draw2-timeline-label-width: 180px !important;
    --draw2-timeline-cell-width: var(--draw2-timeline-cell-size) !important;
    --draw2-timeline-row-height: var(--draw2-timeline-cell-size) !important;
  }
  .draw2-workspace-frame
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-corner-button {
    width: var(--draw2-timeline-cell-size) !important;
    min-width: var(--draw2-timeline-cell-size) !important;
    height: var(--draw2-timeline-cell-size) !important;
    min-height: var(--draw2-timeline-cell-size) !important;
  }
  .draw2-workspace-frame
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-frame-header,
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell {
    width: var(--draw2-timeline-cell-size) !important;
    min-width: var(--draw2-timeline-cell-size) !important;
    max-width: var(--draw2-timeline-cell-size) !important;
    height: var(--draw2-timeline-cell-size) !important;
    min-height: var(--draw2-timeline-cell-size) !important;
    max-height: var(--draw2-timeline-cell-size) !important;
  }
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-row-label,
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-corner {
    width: 180px !important;
    min-width: 180px !important;
    height: var(--draw2-timeline-cell-size) !important;
    min-height: var(--draw2-timeline-cell-size) !important;
  }
}

@media (max-width: 700px) {
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-viewport {
    --draw2-timeline-cell-size: 40px !important;
    --draw2-timeline-label-width: 132px !important;
    --draw2-timeline-cell-width: var(--draw2-timeline-cell-size) !important;
    --draw2-timeline-row-height: var(--draw2-timeline-cell-size) !important;
  }
  .draw2-workspace-frame
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-corner-button {
    width: var(--draw2-timeline-cell-size) !important;
    min-width: var(--draw2-timeline-cell-size) !important;
    height: var(--draw2-timeline-cell-size) !important;
    min-height: var(--draw2-timeline-cell-size) !important;
  }
  .draw2-workspace-frame
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-frame-header,
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell {
    width: var(--draw2-timeline-cell-size) !important;
    min-width: var(--draw2-timeline-cell-size) !important;
    max-width: var(--draw2-timeline-cell-size) !important;
    height: var(--draw2-timeline-cell-size) !important;
    min-height: var(--draw2-timeline-cell-size) !important;
    max-height: var(--draw2-timeline-cell-size) !important;
  }
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-row-label,
  .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-corner {
    width: 132px !important;
    min-width: 132px !important;
    height: var(--draw2-timeline-cell-size) !important;
    min-height: var(--draw2-timeline-cell-size) !important;
  }
}

/* Final mini-preview geometry overrides all legacy fixed-size refinements. */
.draw2-mini-preview {
  box-sizing: border-box !important;
  width: var(--draw2-mini-preview-width, 148px) !important;
  height: var(--draw2-mini-preview-height, 148px) !important;
  min-width: 112px !important;
  min-height: 112px !important;
  max-width: 360px !important;
  max-height: 280px !important;
  overflow: visible !important;
  pointer-events: none;
}
.draw2-mini-preview > canvas {
  box-sizing: border-box !important;
  width: calc(var(--draw2-mini-preview-width, 148px) - 8px) !important;
  height: calc(var(--draw2-mini-preview-height, 148px) - 8px) !important;
  object-fit: contain;
}
.draw2-mini-preview-toolbar {
  position: absolute;
  z-index: 5;
  top: 4px;
  left: 4px;
  display: inline-flex;
  gap: 2px;
  pointer-events: auto;
}
.draw2-mini-preview-control {
  appearance: none;
  display: grid;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 2px;
  background: color-mix(in srgb, var(--draw2-surface) 88%, transparent);
  color: var(--draw2-text-muted);
  cursor: pointer;
  pointer-events: auto;
}
.draw2-mini-preview-control:hover,
.draw2-mini-preview-control:focus-visible,
.draw2-mini-preview-control[aria-pressed="true"] {
  border-color: var(--draw2-focus-ring);
  color: var(--draw2-text-strong);
}
.draw2-mini-preview-control:disabled {
  cursor: default;
  opacity: 0.35;
}
.draw2-mini-preview-action,
.draw2-mini-preview-resize,
.draw2-mini-preview-restore {
  appearance: none;
  border: 1px solid var(--draw2-border-subtle);
  background: color-mix(in srgb, var(--draw2-surface) 88%, transparent);
  color: var(--draw2-text-muted);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}
.draw2-mini-preview-action {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  display: grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  place-items: center;
  border-radius: 2px;
  opacity: 0.65;
}
.draw2-mini-preview-action:hover,
.draw2-mini-preview-action:focus-visible {
  opacity: 1;
  color: var(--draw2-text-strong);
}
.draw2-mini-preview-resize {
  position: absolute;
  z-index: 3;
  display: block;
  padding: 0;
  border-color: transparent;
  background: transparent;
  opacity: 0.28;
}
.draw2-mini-preview-resize:hover,
.draw2-mini-preview-resize:focus-visible {
  opacity: 0.95;
}
.draw2-mini-preview-resize--left {
  top: 10px;
  bottom: 10px;
  left: -5px;
  width: 10px;
  cursor: ew-resize;
}
.draw2-mini-preview-resize::before {
  content: "";
  position: absolute;
  display: block;
  background: var(--draw2-accent-strong);
  opacity: 0.92;
  pointer-events: none;
}
.draw2-mini-preview-resize--left::before {
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
}
.draw2-mini-preview-resize--bottom {
  right: 10px;
  bottom: -5px;
  left: 10px;
  height: 10px;
  cursor: ns-resize;
}
.draw2-mini-preview-resize--bottom::before {
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
}
.draw2-mini-preview-resize--corner {
  bottom: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  cursor: nesw-resize;
}
.draw2-mini-preview-resize--corner::before {
  right: 2px;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--draw2-accent-strong);
  border-bottom: 1px solid var(--draw2-accent-strong);
  background: transparent;
}
.draw2-mini-preview-restore {
  position: absolute;
  z-index: 5;
  top: var(--draw2-space-2);
  right: var(--draw2-space-2);
  display: grid;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  place-items: center;
  border-radius: 2px;
  opacity: 0.28;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.draw2-mini-preview-restore:hover,
.draw2-mini-preview-restore:focus-visible,
.draw2-mini-preview-restore:active {
  opacity: 1;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
}
.draw2-workspace-frame[data-workspace-profile="mobile"] .draw2-mini-preview,
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-mini-preview-restore,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-mini-preview,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-mini-preview-restore {
  display: none !important;
}

/* Final mobile presentation contract.
 * The phone uses one Presentation tree: Canvas first, one quick palette,
 * then the extensible Timeline/Tags/Markers/Audio tab rail.  The desktop
 * right-dock palette is deliberately not projected into this tree. */
@media (max-width: 700px) {
  .draw2-workspace-frame[data-workspace-profile="mobile"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 88px minmax(156px, 1fr) 48px 76px 44px 24px !important;
    grid-template-areas:
      "top" "canvas" "mobile-tools" "mobile-palette" "mobile-tabs" "status"
      !important;
    overflow: hidden !important;
  }

  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-topbar {
    grid-area: top !important;
    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-left-dock {
    display: contents !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-toolbar {
    grid-area: mobile-tools !important;
    display: flex !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 2px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-mobile-color-rail {
    grid-area: mobile-palette !important;
    display: grid !important;
    width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 4px 8px !important;
    overflow: hidden !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-mobile-color-rail
    .draw2-palette-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(2, 34px) !important;
    grid-auto-columns: 40px !important;
    align-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    max-height: 72px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-mobile-color-rail
    .draw2-palette-grid::-webkit-scrollbar {
    display: none;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-mobile-color-rail
    .draw2-color,
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-mobile-color-rail
    .draw2-color-add {
    width: 40px !important;
    min-width: 40px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 2px !important;
  }

  /* The right dock can still mount a sheet from a menu, but its desktop
     palette strip must never become a second mobile palette. */
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-right-dock {
    display: contents !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    #draw2WorkspacePaletteStrip,
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    #draw2WorkspaceRightResize,
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    #draw2WorkspacePaletteResize,
  .draw2-workspace-frame[data-workspace-profile="mobile"] .draw2-workspace-tabs,
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-right-panel-picker {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-right-custom-dock {
    display: contents !important;
  }

  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel-launcher {
    grid-area: mobile-tabs !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: var(--draw2-surface) !important;
    border-top: 1px solid var(--draw2-border-subtle) !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel-launcher
    > .draw2-panel-launcher[data-workspace-panel] {
    display: none !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel-launcher
    > .draw2-mobile-timeline-toggle,
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel-launcher
    > .draw2-mobile-timeline-tab {
    display: flex !important;
    flex: 1 0 88px !important;
    width: auto !important;
    min-width: 88px !important;
    height: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--draw2-text-muted) !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }
  /* Repeat the profile class to outrank the legacy 40px launcher rule that
     remains for the icon-only desktop/mobile fallback. */
  .draw2-workspace-frame[data-workspace-profile="mobile"].draw2-workspace-frame
    .draw2-workspace-panel-launcher
    > .draw2-mobile-timeline-toggle,
  .draw2-workspace-frame[data-workspace-profile="mobile"].draw2-workspace-frame
    .draw2-workspace-panel-launcher
    > .draw2-mobile-timeline-tab {
    flex: 1 0 88px !important;
    order: 0 !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: none !important;
  }
  #draw2WorkspaceLeftDock .draw2-mobile-timeline-toggle,
  #draw2WorkspaceLeftDock .draw2-mobile-timeline-tab {
    flex: 1 0 88px !important;
    order: 0 !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel-launcher
    > .draw2-mobile-timeline-toggle.is-active,
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel-launcher
    > .draw2-mobile-timeline-tab.is-active {
    border-bottom-color: var(--draw2-accent-strong) !important;
    color: var(--draw2-text-strong) !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-panel-launcher
    > .draw2-mobile-timeline-toggle
    .draw2-ui-icon {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
  }

  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-timeline-region {
    display: none !important;
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(192px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 180 !important;
    width: auto !important;
    height: min(48dvh, 400px) !important;
    min-height: 180px !important;
    max-height: calc(100dvh - 200px - env(safe-area-inset-bottom, 0px))
      !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 1px solid var(--draw2-border-strong) !important;
    border-radius: 4px !important;
    background: var(--draw2-surface) !important;
    box-shadow: var(--draw2-shadow-panel) !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"].is-mobile-timeline-open
    .draw2-workspace-timeline-region {
    display: flex !important;
  }
  .draw2-workspace-frame[data-workspace-profile="mobile"]
    .draw2-workspace-statusbar {
    grid-area: status !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
  }
}

/* Final menu/palette reliability contract.
 * Open application menus must remain visible even when the compact top rail
 * itself is horizontally scrollable. The dock palette uses every available
 * column when the right rail is widened instead of leaving a fixed-width
 * strip at the left. */
@media (min-width: 701px) {
  .draw2-workspace-menu-bar:has(.draw2-menu[open]) {
    overflow: visible !important;
  }

  .draw2-menu-popover.is-menu-positioned {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    z-index: 300 !important;
  }

  .draw2-workspace-right-dock
    > #draw2WorkspacePaletteStrip
    .draw2-palette-grid {
    width: 100% !important;
    grid-template-columns:
      repeat(auto-fill, minmax(var(--draw2-control-size), 1fr)) !important;
    grid-auto-columns: unset !important;
    justify-content: stretch !important;
  }

  .draw2-workspace-right-dock
    > #draw2WorkspacePaletteStrip
    .draw2-palette-grid
    .draw2-color,
  .draw2-workspace-right-dock
    > #draw2WorkspacePaletteStrip
    .draw2-palette-grid
    .draw2-color-add {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Shared product chrome: the brand is an image-only mark and the single
 * Details menu travels with it. The old right-side menu rail is intentionally
 * removed so every mode presents the same top-left entry point. */
#draw2WorkspaceFrame .draw2-workspace-menu-bar {
  display: none !important;
}
#draw2WorkspaceFrame .draw2-workspace-brand {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 132px !important;
  height: 100% !important;
  white-space: nowrap;
}
#draw2WorkspaceFrame .draw2-brand-logo {
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}
#draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu {
  display: block !important;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
}
#draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu > summary {
  display: grid !important;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0 !important;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 0 !important;
}
#draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu > summary:hover,
#draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu[open] > summary {
  border-color: var(--draw2-border-subtle);
  background: var(--draw2-surface-raised);
}
#draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-label {
  display: none !important;
}
#draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu .draw2-menu-icon {
  width: 17px;
  height: 17px;
}

@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-brand {
    left: 8px !important;
    width: auto !important;
    min-width: 0 !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar {
    left: 104px !important;
  }
}

@media (max-width: 700px) {
  #draw2WorkspaceFrame .draw2-workspace-brand {
    position: absolute !important;
    top: 0 !important;
    left: 6px !important;
    z-index: 20 !important;
    height: 36px !important;
  }
  #draw2WorkspaceFrame .draw2-workspace-command-bar {
    padding-left: 78px !important;
  }
}

/* The right-dock palette is a height-bounded viewport, not a two-row widget.
 * Its resize rail owns the split: moving the custom dock down increases this
 * viewport and naturally reveals additional palette rows. Keep scrolling at
 * the palette surface only when its available height is genuinely exhausted. */
@media (min-width: 701px) {
  .draw2-workspace-right-dock > #draw2WorkspacePaletteStrip {
    overflow: auto !important;
  }

  .draw2-workspace-right-dock
    > #draw2WorkspacePaletteStrip
    .draw2-palette-grid {
    height: max-content !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    align-content: start !important;
  }
}

/* Creator Workspace workflow rail. This is a presentation switch only: the
 * existing Canvas, Timeline, Panel and Core nodes remain the single source. */
.draw2-creator-mode-bar {
  display: flex;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  padding: 3px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid
    color-mix(in srgb, var(--draw2-border-subtle) 55%, transparent);
  border-bottom: 1px solid
    color-mix(in srgb, var(--draw2-border-subtle) 55%, transparent);
  background: var(--draw2-surface);
  scrollbar-width: thin;
}
.draw2-creator-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 86px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--draw2-radius-sm);
  background: transparent;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.draw2-creator-mode .draw2-ui-icon {
  width: 16px;
  height: 16px;
}
.draw2-creator-mode:hover,
.draw2-creator-mode:focus-visible {
  border-color: var(--draw2-border-strong);
  color: var(--draw2-text-strong);
}
.draw2-creator-mode[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}
.draw2-creator-mode[aria-disabled="true"]:hover,
.draw2-creator-mode[aria-disabled="true"]:focus-visible {
  border-color: transparent;
  color: var(--draw2-text-muted);
}
.draw2-creator-mode.is-active {
  border-color: var(--draw2-accent-strong);
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 18%,
    var(--draw2-surface-raised)
  );
  color: var(--draw2-accent-strong);
}
.draw2-creator-mode[data-creator-mode="ASSET"].is-active {
  border-color: #a78bfa;
  background: color-mix(in srgb, #8b5cf6 22%, var(--draw2-surface-raised));
  color: #c4b5fd;
}
.draw2-workspace-frame[data-creator-mode="ASSET"] .draw2-workspace-right-dock {
  box-shadow: inset 2px 0 0 #8b5cf6;
}
.draw2-creator-asset-surface {
  display: grid;
  gap: var(--draw2-space-3);
  min-width: 0;
}
.draw2-creator-surface-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--draw2-space-2);
}
.draw2-creator-surface-heading strong {
  font-size: 0.86rem;
}
.draw2-creator-local-badge {
  color: var(--draw2-accent-strong);
  font: 700 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-creator-surface-note {
  margin: 0;
  color: var(--draw2-text-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}
.draw2-creator-step-note {
  margin: 0;
  color: var(--draw2-text-muted);
  font-size: 0.7rem;
  line-height: 1.5;
}
.draw2-creator-step-note strong {
  color: var(--draw2-text-strong);
}
.draw2-asset-motion-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 3px;
}
.draw2-asset-motion-tab {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
}
.draw2-asset-motion-tab:hover,
.draw2-asset-motion-tab:focus-visible,
.draw2-asset-motion-tab.is-active {
  border-color: #a78bfa;
  background: color-mix(in srgb, #8b5cf6 22%, var(--draw2-surface-raised));
  color: #c4b5fd;
}
.draw2-asset-direction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(52px, auto));
  grid-template-areas:
    ". up ."
    "left center right"
    ". down .";
  gap: 5px;
  margin-top: 3px;
}
.draw2-asset-slot {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  min-width: 0;
  min-height: 52px;
  padding: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-muted);
  cursor: pointer;
  text-align: left;
}
.draw2-asset-slot[data-draw2-asset-direction="UP"] {
  grid-area: up;
}
.draw2-asset-slot[data-draw2-asset-direction="LEFT"] {
  grid-area: left;
}
.draw2-asset-slot[data-draw2-asset-direction="RIGHT"] {
  grid-area: right;
}
.draw2-asset-slot[data-draw2-asset-direction="DOWN"] {
  grid-area: down;
}
.draw2-asset-slot:hover,
.draw2-asset-slot:focus-visible,
.draw2-asset-slot[data-pending="true"] {
  border-color: #a78bfa;
  background: color-mix(in srgb, #8b5cf6 22%, var(--draw2-surface-raised));
  color: var(--draw2-text-strong);
}
.draw2-asset-slot[data-filled="true"] {
  border-color: color-mix(
    in srgb,
    var(--draw2-accent-strong) 62%,
    var(--draw2-border-subtle)
  );
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 13%,
    var(--draw2-surface-input)
  );
}
.draw2-asset-slot-arrow {
  grid-row: 1 / -1;
  width: 28px;
  color: #c4b5fd;
  font-size: 1.35rem;
  line-height: 1;
  text-align: center;
}
.draw2-asset-slot-label {
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-slot small {
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-slot[data-filled="true"] small {
  color: var(--draw2-accent-strong);
}
.draw2-asset-slot-center {
  display: grid;
  grid-area: center;
  place-items: center;
  min-height: 52px;
  border: 1px dashed
    color-mix(in srgb, #8b5cf6 45%, var(--draw2-border-subtle));
  border-radius: var(--draw2-radius-sm);
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
  line-height: 1.35;
  text-align: center;
}
.draw2-asset-quick-status {
  margin: 0;
  min-height: 2.7em;
  color: #c4b5fd;
  font-size: 0.66rem;
  line-height: 1.45;
}
.draw2-asset-manual-add {
  opacity: 0.9;
}
.draw2-asset-metadata {
  border-top: 1px solid var(--draw2-border-subtle);
  color: var(--draw2-text-muted);
}
.draw2-asset-metadata > summary {
  padding: 7px 0 2px;
  cursor: pointer;
  font-size: 0.64rem;
  font-weight: 700;
}
.draw2-asset-metadata[open] > summary {
  color: var(--draw2-text-strong);
}
.draw2-asset-advanced {
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, var(--draw2-surface) 88%, transparent);
}
.draw2-asset-advanced > summary {
  min-height: 36px;
  padding: 9px 10px;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
}
.draw2-asset-advanced[open] > summary {
  color: var(--draw2-text-strong);
}
.draw2-asset-advanced > .draw2-creator-fieldset {
  margin: 0 6px 6px;
}
.draw2-creator-fieldset {
  display: grid;
  gap: var(--draw2-space-1);
  margin: 0;
  padding: var(--draw2-space-2);
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  color: var(--draw2-text-muted);
  font-size: 0.7rem;
}
.draw2-creator-fieldset legend {
  padding-inline: 4px;
  color: var(--draw2-text-strong);
  font-weight: 700;
}
.draw2-creator-fieldset label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
}
.draw2-creator-asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--draw2-space-2);
}
.draw2-creator-asset-grid label {
  display: grid;
  gap: 3px;
  color: var(--draw2-text-muted);
  font-size: 0.66rem;
}
.draw2-creator-asset-grid input, .draw2-creator-asset-grid select {
  min-width: 0;
  width: 100%;
  min-height: 32px;
  padding-inline: 7px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
}
.draw2-creator-asset-status {
  margin: 0;
  color: var(--draw2-text-muted);
  font-size: 0.66rem;
}
.draw2-creator-asset-status[data-state="success"] {
  color: var(--draw2-accent-strong);
}
.draw2-creator-asset-status[data-state="error"] {
  color: var(--draw2-danger-strong);
}
.draw2-asset-selection-summary {
  margin: 0;
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}
.draw2-asset-definition-list {
  display: grid;
  gap: var(--draw2-space-2);
  max-height: 270px;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.draw2-asset-empty {
  margin: 0;
  padding: var(--draw2-space-2);
  border: 1px dashed var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
  line-height: 1.45;
  text-align: center;
}
.draw2-asset-definition-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, var(--draw2-surface-raised) 84%, #8b5cf6 16%);
}
.draw2-asset-definition-card.is-selected {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 1px color-mix(in srgb, #8b5cf6 36%, transparent);
}
.draw2-asset-definition-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.draw2-asset-definition-select {
  min-width: 0;
  padding: 2px 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--draw2-text-strong);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-definition-select:hover,
.draw2-asset-definition-select:focus-visible {
  color: #c4b5fd;
  text-decoration: underline;
}
.draw2-asset-definition-remove {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: transparent;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.6rem;
}
.draw2-asset-definition-remove:hover,
.draw2-asset-definition-remove:focus-visible {
  border-color: var(--draw2-danger-strong);
  color: var(--draw2-danger-strong);
}
.draw2-asset-definition-card-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}
.draw2-asset-definition-card-fields input,
.draw2-asset-definition-card-fields select {
  min-width: 0;
  width: 100%;
  min-height: 28px;
  padding-inline: 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font-size: 0.65rem;
}
.draw2-asset-definition-source {
  margin: 0;
  color: var(--draw2-text-muted);
  font: 0.6rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-asset-animation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.draw2-asset-animation-chip {
  max-width: 100%;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #8b5cf6 42%, var(--draw2-border-subtle));
  border-radius: 999px;
  background: color-mix(in srgb, #8b5cf6 12%, transparent);
  color: #c4b5fd;
  cursor: pointer;
  font-size: 0.59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-animation-chip:hover,
.draw2-asset-animation-chip:focus-visible {
  background: color-mix(in srgb, #8b5cf6 24%, transparent);
}
.draw2-asset-animation-chip.is-empty {
  border-style: dashed;
  color: var(--draw2-text-muted);
}
@media (max-width: 700px) {
  .draw2-creator-mode-bar {
    padding-inline: 4px;
  }
  .draw2-creator-mode {
    min-width: 76px;
    min-height: 40px;
    padding-inline: 8px;
  }
  .draw2-creator-mode span {
    font-size: 0.62rem;
  }
  .draw2-creator-asset-grid {
    grid-template-columns: 1fr 1fr;
  }
  .draw2-asset-definition-card-fields {
    grid-template-columns: 1fr 1fr;
  }
  .draw2-asset-definition-card-fields input {
    grid-column: 1 / -1;
  }
}

/* Tablet portrait / Split View Tool Rail final override.
 * Parent tools remain one non-shrinking touch row; child flyouts stay
 * exclusive overlays and never become permanent rail contents. */
@media (min-width: 701px) {
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-toolbar,
  .draw2-workspace-frame[data-workspace-profile="split"]
    .draw2-workspace-toolbar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    gap: 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-toolbar::-webkit-scrollbar,
  .draw2-workspace-frame[data-workspace-profile="split"]
    .draw2-workspace-toolbar::-webkit-scrollbar {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-toolbar
    > .draw2-tool-group,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-workspace-toolbar
    > .draw2-tool-button,
  .draw2-workspace-frame[data-workspace-profile="split"]
    .draw2-workspace-toolbar
    > .draw2-tool-group,
  .draw2-workspace-frame[data-workspace-profile="split"]
    .draw2-workspace-toolbar
    > .draw2-tool-button,
  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-tool-group-summary,
  .draw2-workspace-frame[data-workspace-profile="split"]
    .draw2-tool-group-summary {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-tool-group:not([open])
    > .draw2-tool-popover,
  .draw2-workspace-frame[data-workspace-profile="split"]
    .draw2-tool-group:not([open])
    > .draw2-tool-popover {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    .draw2-tool-group[open]
    > .draw2-tool-popover,
  .draw2-workspace-frame[data-workspace-profile="split"]
    .draw2-tool-group[open]
    > .draw2-tool-popover {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow: auto !important;
  }

  .draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-toolbar
    > .draw2-tool-button[data-workspace-tool="pan"],
  .draw2-workspace-frame[data-workspace-profile="split"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-toolbar
    > .draw2-tool-button[data-workspace-tool="pan"] {
    box-sizing: border-box !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
  }
}

/* Tablet Portrait deck controls: final cascade guard.
 * Keep the six reachable deck destinations at one touch size and restore the
 * Timeline toggle hidden by the legacy mobile-only fallback. */
@media (min-width: 701px) {
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-panel-launcher {
    box-sizing: border-box !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 4px !important;
    gap: 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
  }
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-panel-launcher::-webkit-scrollbar {
    display: none !important;
  }

  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-panel-launcher
    > .draw2-panel-launcher[data-workspace-panel="color"],
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-panel-launcher
    > .draw2-panel-launcher[data-workspace-panel="layers"],
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-panel-launcher
    > .draw2-mobile-timeline-toggle,
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-panel-launcher
    > .draw2-mobile-timeline-tab {
    box-sizing: border-box !important;
    flex: 0 0 44px !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
  }

  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-panel-launcher
    > [data-mobile-rail-action],
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-panel-launcher
    > .draw2-panel-launcher[data-workspace-panel="inspector"],
  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-panel-launcher
    > .draw2-panel-launcher[data-mobile-rail-slot="more"] {
    display: none !important;
  }

  .draw2-workspace-frame.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-panel-launcher
    > .draw2-panel-launcher
    span {
    display: none !important;
  }
}

/* Draw timeline v2 -------------------------------------------------------
   The timeline is a time-based animation editor, not a second toolbar. The
   readout, ruler and playhead share one coordinate system with the virtual
   cel matrix, while the existing frame/layer commands remain unchanged. */
.draw2-timeline-readout {
  display: flex;
  flex: 0 0 28px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
  padding: 0 8px;
  overflow: hidden;
  border-bottom: 1px solid var(--draw2-border-subtle);
  background: color-mix(in srgb, var(--draw2-surface-raised) 78%, transparent);
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
  line-height: 1;
  white-space: nowrap;
}
.draw2-timeline-readout-mode {
  flex: 0 0 auto;
  color: var(--draw2-accent-strong);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.draw2-timeline-readout-position,
.draw2-timeline-readout-duration {
  flex: 0 0 auto;
  color: var(--draw2-text-strong);
  font: 700 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.draw2-timeline-readout-separator {
  color: var(--draw2-text-muted);
}
.draw2-timeline-readout-hint {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--draw2-text-muted);
  text-overflow: ellipsis;
}
.draw2-timeline-card > .draw2-timeline-readout {
  position: relative;
  z-index: 20;
}
.draw2-timeline-card > .draw2-timeline-tabs-shell {
  flex: 0 0 30px;
  min-height: 30px;
}
.draw2-timeline-card > .draw2-timeline-display-actions {
  display: none !important;
}

.draw2-timeline-card .draw2-timeline-viewport {
  --draw2-timeline-label-width: 148px !important;
  --draw2-timeline-cell-size: 30px !important;
  --draw2-timeline-cell-width: 30px !important;
  --draw2-timeline-row-height: 30px !important;
  scrollbar-color: color-mix(
    in srgb,
    var(--draw2-accent-strong) 58%,
    var(--draw2-surface-raised)
  ) var(--draw2-surface-canvas);
}
.draw2-timeline-card .draw2-timeline-main {
  grid-template-columns:
    minmax(0, 1fr) 6px var(--draw2-timeline-properties-width, 224px);
}
.draw2-timeline-time-ruler {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 15;
  display: block;
  box-sizing: border-box;
  min-width: 100%;
  overflow: visible;
  border-bottom: 1px solid var(--draw2-border-subtle);
  background: color-mix(
    in srgb,
    var(--draw2-surface-raised) 94%,
    var(--draw2-surface-canvas)
  );
  color: var(--draw2-text-muted);
}
.draw2-timeline-time-ruler-corner {
  position: sticky;
  left: 0;
  z-index: 19;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: var(--draw2-timeline-label-width);
  height: 20px;
  padding: 0 8px;
  border-right: 1px solid var(--draw2-border-subtle);
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-muted);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.draw2-timeline-time-ruler-cell {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  height: 20px;
  border-left: 1px solid
    color-mix(in srgb, var(--draw2-border-subtle) 76%, transparent);
  color: var(--draw2-text-muted);
  font: 600 0.54rem/20px ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.draw2-timeline-time-ruler-cell span {
  position: absolute;
  left: 4px;
  white-space: nowrap;
}
.draw2-timeline-time-ruler-cell[data-active="true"] {
  border-left-color: var(--draw2-accent-strong);
  color: var(--draw2-text-strong);
}
.draw2-timeline-header-row {
  z-index: 12 !important;
  min-width: 100%;
  background: var(--draw2-surface-raised);
}
.draw2-timeline-corner,
.draw2-timeline-frame-header {
  box-sizing: border-box;
  height: var(--draw2-timeline-row-height) !important;
  min-height: var(--draw2-timeline-row-height) !important;
  border: 1px solid var(--draw2-border-subtle) !important;
  background: var(--draw2-surface-raised);
}
.draw2-timeline-corner {
  z-index: 18;
}
.draw2-timeline-frame-header {
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.draw2-timeline-frame-header[data-duration-ms]::after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--draw2-text-muted);
  content: "";
  opacity: 0.7;
}
.draw2-timeline-frame-header[data-selected="true"],
.draw2-timeline-frame-header[aria-selected="true"] {
  border-color: var(--draw2-accent-strong) !important;
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 18%,
    var(--draw2-surface-raised)
  );
  color: var(--draw2-text-strong);
}
.draw2-timeline-row-label {
  width: var(--draw2-timeline-label-width) !important;
  min-width: var(--draw2-timeline-label-width) !important;
  height: var(--draw2-timeline-row-height) !important;
  min-height: var(--draw2-timeline-row-height) !important;
  padding-inline: 8px;
  border-right: 1px solid var(--draw2-border-subtle) !important;
  background: var(--draw2-surface-raised);
}
.draw2-timeline-row {
  height: var(--draw2-timeline-row-height) !important;
  min-height: var(--draw2-timeline-row-height) !important;
}
.draw2-timeline-cell {
  width: var(--draw2-timeline-cell-size) !important;
  min-width: var(--draw2-timeline-cell-size) !important;
  max-width: var(--draw2-timeline-cell-size) !important;
  height: var(--draw2-timeline-cell-size) !important;
  min-height: var(--draw2-timeline-cell-size) !important;
  max-height: var(--draw2-timeline-cell-size) !important;
  border: 1px solid
    color-mix(in srgb, var(--draw2-border-subtle) 86%, transparent) !important;
  border-radius: 2px !important;
  background: color-mix(
    in srgb,
    var(--draw2-surface) 88%,
    var(--draw2-surface-raised)
  );
  box-shadow: none !important;
}
.draw2-timeline-cell[data-empty="true"] {
  background: repeating-linear-gradient(
    135deg,
    var(--draw2-surface) 0 6px,
    var(--draw2-surface-raised) 6px 12px
  );
}
.draw2-timeline-cell[data-has-drawing="true"] {
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 9%,
    var(--draw2-surface)
  );
}
.draw2-timeline-cell[data-has-drawing="true"]::before {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--draw2-accent-strong);
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--draw2-accent-strong) 48%, transparent);
}
.draw2-timeline-cell[data-active-frame="true"] {
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 7%,
    var(--draw2-surface)
  );
}
.draw2-timeline-cell[data-selected="true"],
.draw2-timeline-cell[aria-selected="true"] {
  box-shadow: inset 0 0 0 2px var(--draw2-accent-strong) !important;
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 20%,
    var(--draw2-surface)
  );
}
.draw2-timeline-playhead {
  z-index: 17 !important;
  width: 2px !important;
  background: var(--draw2-accent-strong);
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--draw2-accent-strong) 28%, transparent);
}
.draw2-timeline-playhead-label {
  position: absolute;
  top: 0;
  left: 4px;
  display: block;
  min-width: max-content;
  padding: 3px 5px;
  border-radius: 2px;
  background: var(--draw2-accent-strong);
  color: var(--draw2-surface-canvas);
  font: 800 0.55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 700px) {
  .draw2-timeline-readout {
    flex-basis: 28px;
    min-height: 28px;
    gap: 5px;
    padding-inline: 6px;
  }
  .draw2-timeline-readout-mode {
    display: none;
  }
  .draw2-timeline-readout-hint {
    max-width: 42%;
  }
  .draw2-timeline-card .draw2-timeline-viewport {
    --draw2-timeline-label-width: 112px !important;
    --draw2-timeline-cell-size: 36px !important;
    --draw2-timeline-cell-width: 36px !important;
    --draw2-timeline-row-height: 36px !important;
  }
  .draw2-timeline-corner,
  .draw2-timeline-frame-header {
    height: var(--draw2-timeline-row-height) !important;
    min-height: var(--draw2-timeline-row-height) !important;
  }
  .draw2-timeline-frame-header {
    font-size: 0.62rem;
  }
}

/* Audio-240: the Piano Roll edits the continuous project timeline while the
   lower deck remains a horizontally scrollable composition overview. */
.draw2-audio-midi-grid {
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}
.draw2-audio-midi-grid > .draw2-audio-midi-row:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 8;
  background: var(--draw2-surface-raised);
}
.draw2-audio-midi-grid > .draw2-audio-midi-row.draw2-audio-midi-header {
  min-width: max-content;
}
.draw2-audio-midi-virtual-surface {
  position: relative;
  display: block;
  flex: 0 0 auto;
}
.draw2-audio-midi-virtual-surface > .draw2-audio-midi-row {
  position: absolute;
  left: 0;
  min-width: max-content;
}
.draw2-audio-midi-grid .draw2-audio-midi-row {
  min-width: max-content;
}
.draw2-audio-midi-cell.is-note-start::after {
  border-radius: 4px 0 0 4px;
  opacity: 0.98;
}
.draw2-audio-midi-cell.is-note-continued::after {
  border-left: 0;
  border-radius: 0;
  opacity: 0.98;
}
.draw2-audio-midi-cell.is-note-end::after {
  border-radius: 0 4px 4px 0;
}
.draw2-audio-midi-cell.is-note-start.is-note-end::after {
  border-radius: 4px;
}
.draw2-audio-midi-cell.is-drag-preview {
  background-color: color-mix(in srgb, #c88bff 24%, #111522);
}
.draw2-audio-midi-cell.is-drag-preview::after {
  position: absolute;
  inset: 3px 0;
  border: 1px dashed #f0c5ff;
  border-radius: 2px;
  background: color-mix(in srgb, #a966dd 58%, transparent);
  content: "";
  pointer-events: none;
}
.draw2-audio-midi-cell.is-selected-note {
  outline: 2px solid var(--draw2-text-strong);
  outline-offset: -2px;
  z-index: 2;
}
.draw2-audio-midi-status {
  flex: 0 0 auto;
  min-width: 12rem;
  margin-left: auto;
  color: var(--draw2-text-muted);
  font: 700 0.65rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.draw2-audio-instrument-lane .draw2-audio-track-lane-label {
  color: color-mix(
    in srgb,
    var(--draw2-accent-strong) 70%,
    var(--draw2-text-strong)
  );
}
.draw2-audio-instrument-lane .draw2-audio-track-lane-cell.is-note-start {
  color: var(--draw2-text-strong);
  font-size: 0.75rem;
  font-weight: 800;
}
.draw2-audio-instrument-lane .draw2-audio-track-lane-cell.is-note-continued {
  border-left: 0;
  border-radius: 0;
  background: color-mix(in srgb, #c88bff 25%, var(--draw2-surface-raised));
}
.draw2-audio-instrument-lane .draw2-audio-track-lane-cell.is-note-end {
  border-radius: 0 2px 2px 0;
}
.draw2-audio-instrument-lane
  .draw2-audio-track-lane-cell.is-note-start.is-note-end {
  border-radius: 2px;
}
.draw2-audio-instrument-lane .draw2-audio-track-lane-cell.is-active {
  box-shadow: inset 0 0 0 2px var(--draw2-accent-strong);
}

@media (max-width: 700px) {
  .draw2-audio-midi-status {
    min-width: 0;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Draw timeline alignment -------------------------------------------------
   Older workspace refinements used a larger desktop matrix and won the
   cascade because they were scoped through the workspace IDs. Keep the
   desktop Draw projection on the same compact cell rhythm as the Game deck;
   touch layouts retain their larger hit targets above. */
@media (min-width: 701px) {
  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-viewport {
    --draw2-timeline-label-width: 148px !important;
    --draw2-timeline-cell-size: 30px !important;
    --draw2-timeline-cell-width: 30px !important;
    --draw2-timeline-row-height: 30px !important;
  }
  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-frame-header,
  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-cell,
  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-corner-button {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
  }
  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-row-label,
  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2WorkspaceTimelineSlot
    .draw2-timeline-corner {
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
  }
}

/* Asset Builder visual system -------------------------------------------
   The Builder is a projection over the existing Draw selection/Asset bridge.
   It uses cards and a matrix so the user can see Source -> Mapping -> Preview
   in one glance. No bitmap is kept here as canonical state. */
.draw2-asset-builder {
  --draw2-asset-builder-accent: #9b7dff;
  --draw2-asset-builder-accent-soft: color-mix(
    in srgb,
    var(--draw2-asset-builder-accent) 16%,
    var(--draw2-surface-input)
  );
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--draw2-asset-builder-accent) 48%,
      var(--draw2-border-subtle)
    );
  border-radius: var(--draw2-radius-md);
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--draw2-surface-raised) 93%, #8b5cf6 7%),
    var(--draw2-surface)
  );
  box-shadow: 0 14px 32px rgb(0 0 0 / 12%);
}
.draw2-asset-builder-header,
.draw2-asset-builder-card-heading,
.draw2-asset-builder-actions,
.draw2-asset-builder-matrix-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.draw2-asset-builder-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.draw2-asset-builder-title > div,
.draw2-asset-builder-card-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.draw2-asset-builder-title > div > small {
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.57rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-title strong,
.draw2-asset-builder-card-heading strong {
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--draw2-asset-builder-accent) 60%,
      transparent
    );
  border-radius: 50%;
  background: var(--draw2-asset-builder-accent-soft);
  color: #d9ccff;
  font: 800 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-asset-builder-kicker {
  color: #b7a3ff;
  font: 800 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.13em;
}
.draw2-asset-builder-state,
.draw2-asset-builder-card-badge {
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 999px;
  color: var(--draw2-text-muted);
  font: 700 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.draw2-asset-builder-state[data-state="ready"] {
  border-color: color-mix(in srgb, var(--draw2-accent-strong) 62%, transparent);
  color: var(--draw2-accent-strong);
}
.draw2-asset-builder-state[data-state="pending"] {
  border-color: #f4c16e;
  color: #f4c16e;
}
.draw2-asset-builder-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
  min-width: 0;
}
.draw2-asset-builder-step-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, var(--draw2-surface-input) 74%, transparent);
  color: var(--draw2-text-muted);
  opacity: 0.72;
}
.draw2-asset-builder-step-item > b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-muted);
  font-size: 0.66rem;
}
.draw2-asset-builder-step-item > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.draw2-asset-builder-step-item strong,
.draw2-asset-builder-step-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-step-item strong {
  color: var(--draw2-text-strong);
  font-size: 0.57rem;
}
.draw2-asset-builder-step-item small {
  color: var(--draw2-text-muted);
  font-size: 0.48rem;
}
.draw2-asset-builder-step-item.is-current {
  border-color: color-mix(in srgb, #4db7ff 72%, var(--draw2-border-subtle));
  background: color-mix(in srgb, #4db7ff 14%, var(--draw2-surface-input));
  opacity: 1;
}
.draw2-asset-builder-step-item.is-current > b {
  background: #4db7ff;
  color: #07111d;
}
.draw2-asset-builder-step-item.is-complete {
  border-color: color-mix(in srgb, #67d59b 55%, var(--draw2-border-subtle));
  opacity: 1;
}
.draw2-asset-builder-step-item.is-complete > b {
  background: color-mix(in srgb, #67d59b 32%, var(--draw2-surface-raised));
  color: #9fe1bb;
}
.draw2-asset-builder-step-arrow {
  display: grid;
  place-items: center;
  color: var(--draw2-text-muted);
  font-size: 1.1rem;
  opacity: 0.6;
}
.draw2-asset-builder-instruction {
  margin: 0;
  padding: 7px 9px;
  border-left: 3px solid #4db7ff;
  border-radius: 0 var(--draw2-radius-sm) var(--draw2-radius-sm) 0;
  background: color-mix(in srgb, #4db7ff 9%, var(--draw2-surface-input));
  color: var(--draw2-text-strong);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.45;
}
.draw2-asset-builder-card-badge-accent {
  border-color: color-mix(in srgb, #5fd8ab 54%, transparent);
  color: #7ae5c0;
}
.draw2-asset-builder-config {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.4fr) repeat(2, minmax(130px, 0.9fr)) minmax(76px, 0.55fr);
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, var(--draw2-surface-input) 82%, transparent);
}
.draw2-asset-builder-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
  font-weight: 700;
}
.draw2-asset-builder-field input,
.draw2-asset-builder-field select,
.draw2-asset-builder-preview-selects select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font-size: 0.66rem;
}
.draw2-asset-builder-field input:focus-visible,
.draw2-asset-builder-field select:focus-visible,
.draw2-asset-builder-preview-selects select:focus-visible {
  outline: 2px solid
    color-mix(in srgb, var(--draw2-asset-builder-accent) 70%, transparent);
  outline-offset: 1px;
}
.draw2-asset-builder-columns {
  display: grid;
  grid-template-columns:
    minmax(178px, 0.78fr) minmax(250px, 1.18fr) minmax(178px, 0.82fr);
  gap: 8px;
  min-width: 0;
}
.draw2-asset-builder-card,
.draw2-asset-builder-layout {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, var(--draw2-surface-raised) 90%, transparent);
}
.draw2-asset-builder-source {
  border-color: color-mix(in srgb, #4db7ff 52%, var(--draw2-border-subtle));
}
.draw2-asset-builder-matrix-card {
  border-color: color-mix(in srgb, #67d59b 52%, var(--draw2-border-subtle));
}
.draw2-asset-builder-preview-card {
  border-color: color-mix(in srgb, #d18bff 55%, var(--draw2-border-subtle));
}
.draw2-asset-builder-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.draw2-asset-builder-tab,
.draw2-asset-builder-layout-option {
  min-width: 0;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-muted);
  cursor: pointer;
}
.draw2-asset-builder-tab {
  min-height: 28px;
  font-size: 0.62rem;
  font-weight: 700;
}
.draw2-asset-builder-tab:hover,
.draw2-asset-builder-tab:focus-visible,
.draw2-asset-builder-tab.is-active,
.draw2-asset-builder-layout-option:hover,
.draw2-asset-builder-layout-option:focus-visible,
.draw2-asset-builder-layout-option.is-active {
  border-color: var(--draw2-asset-builder-accent);
  background: var(--draw2-asset-builder-accent-soft);
  color: var(--draw2-text-strong);
}
.draw2-asset-builder-source-preview,
.draw2-asset-builder-preview-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 152px;
  overflow: hidden;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background-color: #151927;
  background-image:
    linear-gradient(45deg, #202536 25%, transparent 25%),
    linear-gradient(-45deg, #202536 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #202536 75%),
    linear-gradient(-45deg, transparent 75%, #202536 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.draw2-asset-builder-source-preview canvas,
.draw2-asset-builder-preview-stage canvas {
  display: block;
  width: min(100%, 192px);
  height: auto;
  max-height: 100%;
  image-rendering: pixelated;
}
.draw2-asset-builder-source-overlay {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 4px 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 999px;
  background: rgb(10 13 23 / 78%);
  color: var(--draw2-text-muted);
  font-size: 0.52rem;
  pointer-events: none;
}
.draw2-asset-builder-source-overlay[data-active="true"] {
  border-color: #65d8a5;
  color: #7ae5c0;
}
.draw2-asset-builder-source-info,
.draw2-asset-builder-help,
.draw2-asset-builder-layout-note,
.draw2-asset-builder-matrix-footer > span,
.draw2-asset-builder-actions > span {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.57rem;
  line-height: 1.4;
  text-overflow: ellipsis;
}
.draw2-asset-builder-frame-strip {
  display: flex;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 2px 1px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.draw2-asset-builder-frame {
  flex: 0 0 34px;
  min-height: 28px;
  padding: 0 3px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: var(--draw2-surface-input);
  color: var(--draw2-text-muted);
  cursor: pointer;
  font: 700 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-asset-builder-frame:hover,
.draw2-asset-builder-frame:focus-visible,
.draw2-asset-builder-frame.is-active {
  border-color: #4db7ff;
  background: color-mix(in srgb, #4db7ff 18%, var(--draw2-surface-input));
  color: var(--draw2-text-strong);
}
.draw2-asset-builder-primary-action,
.draw2-asset-builder-save {
  width: 100%;
  min-height: 32px;
  border-color: #4db7ff;
  background: color-mix(in srgb, #4db7ff 20%, var(--draw2-surface-raised));
}
.draw2-asset-builder-primary-action:hover,
.draw2-asset-builder-primary-action:focus-visible,
.draw2-asset-builder-save:hover,
.draw2-asset-builder-save:focus-visible {
  background: color-mix(in srgb, #4db7ff 32%, var(--draw2-surface-raised));
}
.draw2-asset-builder-help {
  white-space: normal;
}
.draw2-asset-builder-matrix {
  display: grid;
  grid-template-columns: minmax(54px, 0.68fr) repeat(4, minmax(44px, 1fr));
  gap: 3px;
  min-width: 0;
}
.draw2-asset-builder-matrix-corner,
.draw2-asset-builder-matrix-header,
.draw2-asset-builder-matrix-row-label {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 34px;
  padding: 3px;
  border: 1px solid var(--draw2-border-subtle);
  background: color-mix(in srgb, var(--draw2-surface-input) 86%, transparent);
  color: var(--draw2-text-muted);
  font-size: 0.55rem;
  font-weight: 700;
}
.draw2-asset-builder-matrix-corner {
  padding-left: 6px;
  color: #9fe1bb;
}
.draw2-asset-builder-matrix-header {
  justify-items: center;
  gap: 1px;
  text-align: center;
}
.draw2-asset-builder-matrix-header span {
  color: #9fe1bb;
  font-size: 0.92rem;
  line-height: 1;
}
.draw2-asset-builder-matrix-header small {
  overflow: hidden;
  font-size: 0.48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-matrix-row-label {
  align-items: center;
  padding-left: 6px;
  color: var(--draw2-text-strong);
}
.draw2-asset-builder-matrix-cell {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 3px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  background: color-mix(in srgb, var(--draw2-surface-input) 94%, transparent);
  color: var(--draw2-text-muted);
  cursor: pointer;
  text-align: left;
}
.draw2-asset-builder-matrix-cell:hover,
.draw2-asset-builder-matrix-cell:focus-visible {
  border-color: #67d59b;
  background: color-mix(in srgb, #67d59b 17%, var(--draw2-surface-input));
  color: var(--draw2-text-strong);
}
.draw2-asset-builder-matrix-cell[data-filled="true"] {
  border-color: color-mix(in srgb, #67d59b 68%, var(--draw2-border-subtle));
  background: color-mix(in srgb, #67d59b 11%, var(--draw2-surface-input));
}
.draw2-asset-builder-matrix-cell canvas {
  grid-row: 1 / -1;
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.draw2-asset-builder-matrix-cell strong {
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-matrix-cell small {
  overflow: hidden;
  font-size: 0.46rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-matrix-footer {
  align-items: flex-start;
}
.draw2-asset-builder-matrix-footer .draw2-button {
  flex: 0 0 auto;
  min-height: 28px;
  padding-inline: 8px;
  font-size: 0.58rem;
}
.draw2-asset-builder-preview-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.draw2-asset-builder-preview-selects label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--draw2-text-muted);
  font-size: 0.54rem;
  font-weight: 700;
}
.draw2-asset-builder-preview-controls {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 4px;
}
.draw2-asset-builder-preview-controls .draw2-button {
  min-width: 0;
  min-height: 30px;
  padding-inline: 4px;
  font-size: 0.58rem;
}
.draw2-asset-builder-preview-card input[type="range"] {
  width: 100%;
  accent-color: #d18bff;
}
.draw2-asset-builder-preview-readout {
  min-height: 1.2em;
  color: #d9b3ff;
  font: 700 0.58rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}
.draw2-asset-builder-layout {
  gap: 7px;
  border-color: color-mix(in srgb, #f1b967 45%, var(--draw2-border-subtle));
}
.draw2-asset-builder-layout-details {
  min-width: 0;
  border: 1px solid color-mix(in srgb, #f1b967 42%, var(--draw2-border-subtle));
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, var(--draw2-surface-input) 60%, transparent);
}
.draw2-asset-builder-layout-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.58rem;
  font-weight: 800;
  list-style: none;
}
.draw2-asset-builder-layout-details > summary::-webkit-details-marker {
  display: none;
}
.draw2-asset-builder-layout-details > summary > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.draw2-asset-builder-layout-details > summary strong,
.draw2-asset-builder-layout-details > summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-layout-details > summary strong {
  color: var(--draw2-text-strong);
}
.draw2-asset-builder-layout-details > summary small {
  color: #f1c77b;
  font-size: 0.5rem;
  font-weight: 700;
}
.draw2-asset-builder-layout-details[open] > summary {
  border-bottom: 1px solid var(--draw2-border-subtle);
  color: var(--draw2-text-strong);
}
.draw2-asset-builder-layout-details .draw2-asset-builder-layout {
  margin: 7px;
}
.draw2-asset-builder-layout-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}
.draw2-asset-builder-layout-option {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 5px 6px;
  text-align: left;
}
.draw2-asset-builder-layout-option > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.draw2-asset-builder-layout-option strong,
.draw2-asset-builder-layout-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-layout-option strong {
  color: var(--draw2-text-strong);
  font-size: 0.56rem;
}
.draw2-asset-builder-layout-option small {
  color: var(--draw2-text-muted);
  font-size: 0.48rem;
}
.draw2-asset-builder-layout-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 3px;
  color: #f1c77b;
  font-size: 0.82rem;
}
.draw2-asset-builder-actions {
  align-items: center;
  padding-top: 2px;
}
.draw2-asset-builder-actions > span {
  white-space: normal;
}
.draw2-asset-builder-save {
  width: auto;
  min-width: 112px;
  flex: 0 0 auto;
  border-color: #9b7dff;
  background: color-mix(in srgb, #9b7dff 24%, var(--draw2-surface-raised));
}
.draw2-asset-detail-editor {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: color-mix(in srgb, var(--draw2-surface) 88%, transparent);
}
.draw2-asset-detail-editor > summary {
  padding: 9px 10px;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 800;
}
.draw2-asset-detail-editor[open] > summary {
  border-bottom: 1px solid var(--draw2-border-subtle);
  color: var(--draw2-text-strong);
}
.draw2-asset-detail-editor > .draw2-creator-fieldset,
.draw2-asset-detail-editor > .draw2-asset-advanced {
  margin-inline: 7px;
}
.draw2-asset-detail-editor > .draw2-asset-advanced {
  margin-bottom: 7px;
}

/* When the Asset panel is active on a wide desktop, give the visual Builder
   enough room for its three columns. Other Draw/Game/Audio panels retain the
   compact dock width and their existing lazy layout. */
@media (min-width: 1120px) {
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    :has(#draw2WorkspacePanelAssets:not([hidden])) {
    --draw2-panel-width: min(760px, 58vw);
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"]:has(
    #draw2WorkspacePanelAssets:not([hidden])
  ) {
    grid-template-columns:
      var(--draw2-tool-rail-width) minmax(0, 1fr) minmax(
        680px,
        var(--draw2-panel-width)
      ) !important;
  }
  .draw2-workspace-right-dock:has(#draw2WorkspacePanelAssets:not([hidden])) {
    grid-template-rows: minmax(0, 1fr) !important;
  }
  .draw2-workspace-right-dock:has(#draw2WorkspacePanelAssets:not([hidden]))
    > #draw2WorkspacePaletteStrip,
  .draw2-workspace-right-dock:has(#draw2WorkspacePanelAssets:not([hidden]))
    > #draw2WorkspaceModeSummary,
  .draw2-workspace-right-dock:has(#draw2WorkspacePanelAssets:not([hidden]))
    > #draw2WorkspacePaletteResize {
    display: none !important;
  }
  .draw2-workspace-right-dock:has(#draw2WorkspacePanelAssets:not([hidden]))
    > #draw2WorkspaceRightCustomDock {
    grid-row: 1 !important;
    min-height: 0 !important;
  }
}

/* Shared visual language for the custom panels: a quiet heading, a bounded
   content area and readable status cards. */
.draw2-panel-shell {
  min-width: 0;
  border: 1px solid
    color-mix(in srgb, var(--draw2-border-subtle) 86%, transparent);
  border-radius: var(--draw2-radius-md);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--draw2-surface-raised) 94%, #4db7ff 6%),
    var(--draw2-surface)
  );
  box-shadow: 0 8px 20px rgb(0 0 0 / 10%);
}
.draw2-panel-shell > .draw2-panel-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--draw2-border-subtle) 74%, transparent);
}
.draw2-panel-shell > .draw2-panel-note,
.draw2-panel-shell > .draw2-panel-status {
  line-height: 1.5;
}
.draw2-panel-stat-grid > div,
.draw2-game-scene-row,
.draw2-game-assets-row,
.draw2-audio-clip-row,
.draw2-audio-mixer-row {
  border-radius: var(--draw2-radius-sm);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--draw2-border-subtle) 56%, transparent);
}
.draw2-panel-action-row .draw2-button,
.draw2-panel-shell .draw2-button {
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    transform 120ms ease;
}
.draw2-panel-action-row .draw2-button:active,
.draw2-panel-shell .draw2-button:active {
  transform: translateY(1px);
}

@media (max-width: 700px) {
  .draw2-asset-builder {
    padding: 8px;
  }
  .draw2-asset-builder-config {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .draw2-asset-builder-steps {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .draw2-asset-builder-step-arrow {
    display: none;
  }
  .draw2-asset-builder-field-wide {
    grid-column: 1 / -1;
  }
  .draw2-asset-builder-columns {
    grid-template-columns: 1fr;
  }
  .draw2-asset-builder-layout-options {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .draw2-asset-builder-layout-option {
    flex: 0 0 142px;
  }
  .draw2-asset-builder-source-preview,
  .draw2-asset-builder-preview-stage {
    min-height: 184px;
  }
}

/* -------------------------------------------------------------------------
   Shared adjustable rails

   The Audio shell introduced mode-specific grid tracks after the original
   resize projection.  Keep one set of variables authoritative for Draw,
   Game, and Audio so the existing handles always resize the visible rails.
   The phone/sheet layouts intentionally remain fixed and continue to use
   their own touch presentation.
   ------------------------------------------------------------------------- */
@media (min-width: 701px) {
  .draw2-workspace-frame[data-workspace-profile="desktop"] {
    --draw2-left-rail-width: var(--draw2-tool-dock-width, 52px);
    --draw2-right-dock-width: var(--draw2-color-dock-width, 320px);
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]:not(
    [data-creator-mode="AUDIO"]
  ):not([data-creator-mode="GAME"]):not(
    :has(#draw2WorkspacePanelAssets:not([hidden]))
  ) {
    grid-template-columns:
      var(--draw2-left-rail-width, var(--draw2-tool-rail-width))
      minmax(0, 1fr)
      minmax(244px, var(--draw2-right-dock-width, var(--draw2-panel-width)))
      !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]:not(
    [data-creator-mode="AUDIO"]
  ):not([data-creator-mode="GAME"]):not(
    :has(#draw2WorkspacePanelAssets:not([hidden]))
  ) {
    grid-template-rows:
      80px minmax(0, 1fr) var(--draw2-timeline-height)
      var(--draw2-statusbar-height) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] {
    grid-template-columns:
      var(--draw2-left-rail-width, var(--draw2-tool-rail-width))
      minmax(0, 1fr)
      minmax(244px, var(--draw2-right-dock-width, var(--draw2-panel-width)))
      !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] {
    grid-template-columns:
      minmax(196px, 220px) minmax(0, 1fr)
      minmax(244px, var(--draw2-right-dock-width, var(--draw2-panel-width)))
      !important;
    grid-template-rows:
      80px minmax(0, 1fr) var(--draw2-timeline-height)
      var(--draw2-statusbar-height) !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceLeftDock {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-right: 1px solid var(--draw2-border-color, #2d3a4f);
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceLeftDock
    .draw2-workspace-toolbar {
    display: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2GameLeftDock:not([hidden]) {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 12px 10px;
    overflow: auto;
    background: var(--draw2-panel-surface, #151d2b);
  }

  .draw2-game-left-dock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
  }

  .draw2-game-left-dock-header > div {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .draw2-game-left-dock-header strong {
    color: var(--draw2-text-strong, #f4f7fb);
    font-size: 13px;
  }

  .draw2-game-hierarchy-list {
    display: grid;
    gap: 4px;
    min-height: 0;
    overflow: auto;
  }

  .draw2-game-hierarchy-entry {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 6px 8px;
    text-align: left;
  }

  .draw2-game-left-dock .draw2-panel-status {
    margin-top: auto;
    font-size: 11px;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    --draw2-timeline-height: clamp(210px, 29dvh, 300px);
    --draw2-audio-right-width: var(
      --draw2-right-dock-width,
      clamp(320px, 27vw, 390px)
    );
    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, var(--draw2-audio-right-width)) !important;
    grid-template-rows:
      64px minmax(0, 1fr) var(--draw2-timeline-height)
      var(--draw2-statusbar-height) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    #draw2WorkspaceLeftDock {
    position: relative !important;
    width: var(--draw2-left-rail-width, var(--draw2-tool-rail-width))
      !important;
    min-width: var(--draw2-left-rail-width, var(--draw2-tool-rail-width))
      !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    #draw2WorkspaceRightResize,
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    #draw2WorkspaceTimelineResize {
    display: block !important;
  }
  /* Audio keeps the same right-edge hit target even though its internal
     dock is a specialized surface. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceRightDock
    > #draw2WorkspaceRightResize {
    display: block !important;
    top: 8px !important;
    bottom: 8px !important;
    left: -6px !important;
    width: 12px !important;
    z-index: 8 !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioRightDock {
    width: 100% !important;
    min-width: 0 !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    #draw2WorkspaceTimelineRegion {
    min-height: 140px !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    #draw2ModeTimelineDeck {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 700px) {
  #draw2WorkspaceRightResize,
  #draw2WorkspaceTimelineResize {
    display: none !important;
  }
}

/* Audio workstation refinement -----------------------------------------
   The Piano Roll is a single canvas surface.  This keeps the reference DAW
   layout dense and responsive while eliminating the per-cell button matrix
   that previously inflated DOM/layout work during mode switches. */
.draw2-audio-midi-grid {
  position: relative;
  isolation: isolate;
  contain: strict;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  background: #0b0f19;
}
.draw2-audio-midi-canvas-layer {
  position: relative;
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  contain: strict;
}
.draw2-audio-midi-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  max-width: none;
  outline: none;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.draw2-audio-midi-keyboard {
  position: sticky;
  z-index: 3;
  left: 0;
  display: block;
  max-width: none;
  border-right: 1px solid rgb(200 139 255 / 46%);
  box-shadow: 4px 0 9px rgb(3 5 12 / 28%);
  pointer-events: auto;
  cursor: default;
}
.draw2-audio-midi-canvas:focus-visible {
  box-shadow: inset 0 0 0 2px #efd2ff;
}
.draw2-audio-midi-playhead {
  position: absolute;
  z-index: 2;
  border-left: 2px solid #f0c5ff;
  border-right: 1px solid rgba(240, 197, 255, 0.42);
  background: rgba(200, 139, 255, 0.12);
  box-shadow: 0 0 12px rgba(200, 139, 255, 0.24);
  pointer-events: none;
  transition: left 70ms linear, width 70ms linear;
  will-change: left, width;
}
.draw2-audio-midi-playhead[hidden] {
  display: none;
}
@media (min-width: 701px) {
  #draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-workspace-command-bar {
    display: none !important;
  }
}
@media (min-width: 1120px) {
  .draw2-workspace-frame[data-creator-mode="AUDIO"] {
    --draw2-audio-accent: #c88bff;
    --draw2-audio-surface: #111827;
    --draw2-audio-surface-deep: #0b0f19;
  }
  .draw2-workspace-frame[data-creator-mode="AUDIO"] #draw2AudioWorkspace,
  .draw2-workspace-frame[data-creator-mode="AUDIO"] #draw2AudioRightDock,
  .draw2-workspace-frame[data-creator-mode="AUDIO"] #draw2ModeTimelineDeck {
    border-color: color-mix(
      in srgb,
      var(--draw2-audio-accent) 58%,
      var(--draw2-border)
    );
    box-shadow:
      0 0 0 1px rgba(200, 139, 255, 0.08),
      0 14px 36px rgba(3, 5, 12, 0.24);
  }
  .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-editor-header,
  .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-right-tabs,
  .draw2-workspace-frame[data-creator-mode="AUDIO"]
    .draw2-mode-timeline-deck-tabs {
    background: linear-gradient(180deg, #182033, #111827);
  }
  .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-editor-tab,
  .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-right-tab,
  .draw2-workspace-frame[data-creator-mode="AUDIO"]
    .draw2-mode-timeline-deck-tab {
    min-height: 30px;
    letter-spacing: 0.04em;
  }
  .draw2-workspace-frame[data-creator-mode="AUDIO"]
    .draw2-audio-editor-tab.is-active,
  .draw2-workspace-frame[data-creator-mode="AUDIO"]
    .draw2-audio-right-tab.is-active,
  .draw2-workspace-frame[data-creator-mode="AUDIO"]
    .draw2-mode-timeline-deck-tab.is-active {
    border-color: var(--draw2-audio-accent);
    background: color-mix(in srgb, var(--draw2-audio-accent) 26%, #171d2b);
    color: #f8efff;
  }
  .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-panel,
  .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-right-surface,
  .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-mode-deck-surface {
    background: var(--draw2-audio-surface-deep);
  }
}

/* Shared workstation finish ------------------------------------------------
 * Draw and Game use the same compact, dark workstation language as Audio:
 * bounded surfaces, a clear mode accent and one visual hierarchy for the
 * editor, dock and lower rail.  Only presentation tokens are changed; the
 * existing mode-specific controls and adjustable rails remain intact. */
.draw2-workspace-frame[data-creator-mode="DRAW"] {
  --draw2-mode-accent: #74e0cf;
  --draw2-mode-accent-soft: rgba(116, 224, 207, 0.18);
}
.draw2-workspace-frame[data-creator-mode="GAME"] {
  --draw2-mode-accent: #8bd6a6;
  --draw2-mode-accent-soft: rgba(139, 214, 166, 0.18);
}
.draw2-workspace-frame[data-creator-mode="AUDIO"] {
  --draw2-mode-accent: #c88bff;
  --draw2-mode-accent-soft: rgba(200, 139, 255, 0.18);
}

@media (min-width: 701px) {
  .draw2-workspace-frame[data-workspace-profile="desktop"] {
    border: 1px solid
      color-mix(
        in srgb,
        var(--draw2-mode-accent, var(--draw2-accent)) 42%,
        var(--draw2-border)
      );
    border-radius: 9px;
    background: #0c1018;
    box-shadow: 0 12px 32px rgb(0 0 0 / 22%);
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-topbar {
    border-bottom-color: color-mix(
      in srgb,
      var(--draw2-mode-accent, var(--draw2-accent)) 44%,
      var(--draw2-border)
    ) !important;
    background: linear-gradient(180deg, #171d29, #10151f) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-global-row,
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar {
    background: linear-gradient(180deg, #131a26, #0d131d) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar {
    border-color: color-mix(
      in srgb,
      var(--draw2-mode-accent, var(--draw2-accent)) 32%,
      var(--draw2-border)
    );
    border-radius: 6px;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-creator-mode.is-active {
    border-color: var(--draw2-mode-accent, var(--draw2-accent-strong));
    background: var(--draw2-mode-accent-soft, var(--draw2-surface-raised));
    color: var(--draw2-mode-accent, var(--draw2-accent-strong));
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-canvas-region {
    background: #0c1018 !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%);
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-right-dock,
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-timeline-region {
    border-color: color-mix(
      in srgb,
      var(--draw2-mode-accent, var(--draw2-border)) 34%,
      var(--draw2-border-subtle)
    );
    background: #111722;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-tabs,
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-mode-timeline-deck-tabs {
    background: linear-gradient(180deg, #182033, #111827);
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-tab.is-active,
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-mode-timeline-deck-tab.is-active {
    border-color: var(--draw2-mode-accent, var(--draw2-accent-strong));
    background: var(--draw2-mode-accent-soft, var(--draw2-surface-raised));
    color: var(--draw2-text-strong);
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-statusbar {
    border-top-color: color-mix(
      in srgb,
      var(--draw2-mode-accent, var(--draw2-border)) 30%,
      var(--draw2-border-subtle)
    );
    background: #0b0f17;
  }

  /* Keep the adjustable lower rail visible even if a stale custom property
   * or a lost pointer-capture event tried to shrink it below the usable
   * minimum. */
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] {
    grid-template-rows:
      80px minmax(0, 1fr)
      max(140px, var(--draw2-timeline-height, 220px))
      var(--draw2-statusbar-height) !important;
  }
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    grid-template-rows:
      64px minmax(0, 1fr)
      max(140px, var(--draw2-timeline-height, 240px))
      var(--draw2-statusbar-height) !important;
  }
}

/* Late overrides for the deliberately small Asset Builder surface. */
.draw2-asset-builder-asset-picker {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 8px !important;
}
.draw2-asset-builder-asset-cards {
  display: contents !important;
}
.draw2-asset-builder-asset-card,
.draw2-asset-builder-add-card {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 92px !important;
  padding: 10px 8px !important;
  border: 1px solid var(--draw2-border-subtle) !important;
  border-radius: var(--draw2-radius-sm) !important;
  background: var(--draw2-surface-raised) !important;
  text-align: center !important;
}
.draw2-asset-builder-asset-card:hover,
.draw2-asset-builder-asset-card:focus-visible,
.draw2-asset-builder-asset-card.is-selected {
  border-color: #67d59b !important;
  background: color-mix(in srgb, #67d59b 15%, var(--draw2-surface-raised))
    !important;
}
.draw2-asset-builder-asset-card strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-asset-card span {
  color: #9fe1bb;
  font-size: 0.56rem;
  font-weight: 800;
}
.draw2-asset-builder-asset-card small {
  max-width: 100%;
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-asset-builder-add-card {
  border-style: dashed !important;
  border-color: color-mix(in srgb, #67d59b 78%, var(--draw2-border-subtle))
    !important;
  color: #9fe1bb !important;
  font-size: 1.8rem !important;
  line-height: 1 !important;
}
.draw2-asset-builder-asset-summary {
  grid-column: 1 / -1 !important;
  padding: 2px 2px 0 !important;
  overflow: hidden !important;
  font-size: 0.54rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.draw2-asset-builder-close {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  font-size: 0.56rem !important;
}
.draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-instruction,
.draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-config,
.draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-columns,
.draw2-asset-builder[data-editor-open="false"]
  .draw2-asset-builder-layout-details,
.draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-actions,
.draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-close {
  display: none !important;
}
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-steps,
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-source,
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-motion-heading:not(
    .draw2-asset-builder-direction-heading
  ),
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-motion-list,
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-compass,
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-compass-actions,
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-layout-details,
.draw2-asset-detail-editor {
  display: none !important;
}
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-config {
  grid-template-columns: minmax(180px, 1.4fr) minmax(130px, 0.8fr) !important;
  padding: 7px !important;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-config
  > .draw2-asset-builder-field:nth-child(3),
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-config
  > .draw2-asset-builder-field:nth-child(4) {
  display: none !important;
}
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-columns {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 290px) !important;
  align-items: start !important;
}
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-matrix-card
  > .draw2-asset-builder-direction-heading {
  order: 2;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-matrix-details {
  order: 3;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-matrix-details
  > summary {
  display: none !important;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-matrix-details
  > .draw2-asset-builder-matrix {
  margin: 0 !important;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-matrix-footer {
  order: 4;
}
.draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-new-motion {
  order: 5;
}
.draw2-asset-builder[data-editor-open="true"]
  .draw2-asset-builder-frame-editor {
  order: 6;
}
.draw2-asset-builder-matrix {
  grid-template-columns:
    minmax(66px, 0.72fr) repeat(4, minmax(58px, 1fr)) !important;
  gap: 4px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
}
.draw2-asset-builder-matrix[data-direction-count="1"] {
  grid-template-columns: minmax(72px, 0.72fr) minmax(90px, 1fr) !important;
}
.draw2-asset-builder-matrix[data-direction-count="2"] {
  grid-template-columns:
    minmax(72px, 0.72fr) repeat(2, minmax(90px, 1fr)) !important;
}
.draw2-asset-builder-matrix[data-direction-count="8"] {
  grid-template-columns:
    minmax(72px, 0.72fr) repeat(8, minmax(78px, 1fr)) !important;
}
.draw2-asset-builder-matrix[data-direction-count="CUSTOM"] {
  grid-template-columns:
    minmax(72px, 0.72fr) repeat(auto-fit, minmax(88px, 1fr)) !important;
}
.draw2-asset-builder-matrix-cell {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  min-height: 54px !important;
  padding: 5px !important;
  text-align: center !important;
}
.draw2-asset-builder-matrix-cell canvas,
.draw2-asset-builder-matrix-cell small {
  display: none !important;
}
.draw2-asset-builder-matrix-cell strong {
  font-size: 1.05rem !important;
  line-height: 1 !important;
}
.draw2-asset-builder-matrix-cell[data-selected="true"] {
  border-color: #f1c77b !important;
  background: color-mix(in srgb, #f1c77b 18%, var(--draw2-surface-input))
    !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #f1c77b 42%, transparent) !important;
}
.draw2-asset-builder-preview-card {
  position: sticky;
  top: 6px;
}
.draw2-asset-builder-preview-card .draw2-asset-builder-help,
.draw2-asset-builder-preview-card .draw2-asset-builder-card-badge {
  display: none !important;
}
@media (max-width: 820px) {
  .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-columns {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .draw2-asset-builder-preview-card {
    position: static;
  }
}

/* Unified creator shell ----------------------------------------------------
 * The central editor is the workspace.  Inspector-like surfaces stay in the
 * right rail; the mode switch only changes the editor and rail contents.
 * Keep this at EOF so the older mode-specific projections cannot split the
 * same surface into competing workspaces. */
.draw2-workspace-menu-bar .draw2-menu:not(.draw2-details-menu) {
  display: none !important;
}
.draw2-workspace-menu-bar .draw2-details-menu {
  display: block !important;
}

@media (min-width: 1120px) {
  .draw2-workspace-frame[data-workspace-profile="desktop"] {
    --draw2-topbar-height: 64px;
    --draw2-timeline-height: clamp(176px, 25dvh, 260px);
    --draw2-left-rail-width: var(--draw2-tool-dock-width, 52px);
    --draw2-right-dock-width: var(--draw2-color-dock-width, 320px);
    grid-template-rows:
      var(--draw2-topbar-height) minmax(0, 1fr)
      max(140px, var(--draw2-timeline-height))
      var(--draw2-statusbar-height) !important;
    grid-template-areas:
      "top top top" "left canvas right" "timeline timeline timeline"
      "status status status" !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] {
    grid-template-columns:
      var(--draw2-left-rail-width) minmax(0, 1fr)
      minmax(244px, var(--draw2-right-dock-width)) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    grid-template-columns:
      0 minmax(0, 1fr) minmax(244px, var(--draw2-right-dock-width)) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]:has(
    #draw2WorkspacePanelAssets:not([hidden])
  ) {
    grid-template-columns:
      var(--draw2-left-rail-width) minmax(0, 1fr)
      minmax(680px, var(--draw2-panel-width)) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-topbar {
    position: relative !important;
    display: block !important;
    height: var(--draw2-topbar-height) !important;
    min-height: var(--draw2-topbar-height) !important;
    max-height: var(--draw2-topbar-height) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-global-row {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: var(--draw2-topbar-height) !important;
    min-height: var(--draw2-topbar-height) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-brand {
    position: absolute !important;
    top: 0 !important;
    left: 8px !important;
    z-index: 4 !important;
    display: flex !important;
    width: 134px !important;
    min-width: 134px !important;
    height: var(--draw2-topbar-height) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-menu-bar {
    position: absolute !important;
    top: 12px !important;
    left: 148px !important;
    z-index: 5 !important;
    display: flex !important;
    width: 76px !important;
    height: 40px !important;
    min-width: 76px !important;
    padding: 3px !important;
    overflow: visible !important;
    border: 1px solid var(--draw2-border) !important;
    border-radius: 7px;
    background: #0d131d;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-menu-bar
    .draw2-details-menu {
    width: 100% !important;
    min-width: 0 !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-menu-bar
    .draw2-details-menu
    > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 4px !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    color: var(--draw2-text-strong);
    font-size: 0.62rem !important;
    gap: 4px;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-details-label {
    display: inline !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-project-slot {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar {
    position: absolute !important;
    top: 12px !important;
    right: 8px !important;
    z-index: 5 !important;
    display: flex !important;
    width: 196px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    gap: 3px !important;
    overflow: hidden !important;
    border: 1px solid var(--draw2-border) !important;
    border-radius: 7px;
    background: #0d131d;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > * {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="undo"],
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="redo"],
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-mode-playback],
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="command-palette"] {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > .draw2-icon-button
    span {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > .draw2-icon-button
    svg {
    width: var(--draw2-icon-size) !important;
    height: var(--draw2-icon-size) !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar {
    position: absolute !important;
    top: 12px !important;
    left: 232px !important;
    z-index: 4 !important;
    display: flex !important;
    width: 228px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    gap: 3px !important;
    overflow: hidden !important;
    border: 1px solid
      color-mix(in srgb, var(--draw2-mode-accent) 40%, var(--draw2-border));
    border-radius: 7px;
    background: #0d131d;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar
    .draw2-creator-mode {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 5px !important;
    border-radius: 4px !important;
    font-size: 0.62rem !important;
    gap: 4px;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar
    .draw2-creator-mode[data-creator-mode="ANIMATE"],
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar
    .draw2-creator-mode[data-creator-mode="ASSET"],
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar
    .draw2-creator-mode[data-creator-mode="EXPORT"] {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-context-row {
    position: absolute !important;
    top: 12px !important;
    right: 216px !important;
    left: 470px !important;
    z-index: 3 !important;
    display: flex !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px 5px !important;
    overflow: hidden !important;
    border: 1px solid var(--draw2-border) !important;
    border-radius: 7px;
    background: #0d131d;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-context-row
    .draw2-workspace-quick-controls {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    overflow: hidden !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    .draw2-workspace-context-row,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-context-row {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioGlobalControls {
    position: absolute !important;
    top: 12px !important;
    right: 216px !important;
    left: 470px !important;
    z-index: 4 !important;
    display: flex !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px 5px !important;
    overflow: hidden !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioGlobalSaveState {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-canvas-region {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #0c1018 !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
    .draw2-workspace-canvas-region,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    .draw2-workspace-canvas-region {
    padding: 8px !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-canvas-region {
    position: relative !important;
    padding: 0 !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-workspace-right-dock {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 8px 8px 8px 0 !important;
    border-left: 0 !important;
    background: transparent !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
    .draw2-workspace-right-dock,
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    .draw2-workspace-right-dock {
    display: grid !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-right-dock {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Audio's only central editor surface. Inspector, Browser and Master are
     children of the right rail and never occupy the canvas region. */
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace:not([hidden]) {
    position: absolute !important;
    inset: 8px !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace[hidden],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioRightDock[hidden] {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceRightDock
    > *:not(#draw2AudioRightDock) {
    display: none !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioRightDock {
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    #draw2WorkspaceTimelineRegion {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px 8px 0 !important;
    overflow: hidden !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    #draw2ModeTimelineDeck {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-button,
  .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-icon-button,
  .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-tool-button,
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-tool-group-summary {
    min-height: var(--draw2-control-size, 32px);
  }

  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-audio-editor-tab,
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-audio-right-tab,
  .draw2-workspace-frame[data-workspace-profile="desktop"]
    .draw2-mode-timeline-deck-tab {
    min-height: 32px !important;
  }
}

/* Mode-qualified grid guard: the legacy mode rules carry higher specificity
   than the shared frame rule, so keep the three-column shell authoritative. */
@media (min-width: 1120px) {
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"],
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    --draw2-timeline-height: clamp(176px, 25dvh, 260px);
    grid-template-rows:
      64px minmax(0, 1fr) max(140px, var(--draw2-timeline-height))
      var(--draw2-statusbar-height) !important;
    grid-template-areas:
      "top top top" "left canvas right" "timeline timeline timeline"
      "status status status" !important;
  }
}

/* ID-qualified guard for the legacy Draw rail and Audio header rules. */
@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    grid-template-rows:
      64px minmax(0, 1fr) max(140px, var(--draw2-timeline-height))
      var(--draw2-statusbar-height) !important;
    grid-template-areas:
      "top top top" "left canvas right" "timeline timeline timeline"
      "status status status" !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-brand {
    position: absolute !important;
    top: 0 !important;
    left: 8px !important;
    width: 134px !important;
    min-width: 134px !important;
    height: 64px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-menu-bar,
#draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar {
    display: flex !important;
    z-index: 5 !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-menu-bar {
    top: 12px !important;
    left: 148px !important;
    width: 76px !important;
    min-width: 76px !important;
    height: 40px !important;
    padding: 3px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar {
    top: 12px !important;
    right: 8px !important;
    width: 196px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    gap: 3px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > * {
    display: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="undo"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="redo"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-mode-playback],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="command-palette"] {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-creator-mode-bar {
    top: 12px !important;
    left: 232px !important;
    width: 228px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    gap: 3px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]:not(
    :has(#draw2WorkspacePanelAssets:not([hidden]))
  ) {
    grid-template-rows:
      64px minmax(0, 1fr) max(140px, var(--draw2-timeline-height))
      var(--draw2-statusbar-height) !important;
  }
}

/* -------------------------------------------------------------------------
 * Creator mode accents and text-fit contract
 *
 * The shell remains neutral; only the active production mode owns the
 * semantic accent. This keeps Draw, Audio and Game distinguishable without
 * changing pixel colors or Audio's per-track waveform palette.
 * ------------------------------------------------------------------------- */
#draw2WorkspaceFrame[data-creator-mode="DRAW"],
#draw2WorkspaceFrame[data-creator-mode="ANIMATE"],
#draw2WorkspaceFrame[data-creator-mode="EXPORT"] {
  --draw2-accent: #47e6c0;
  --draw2-accent-strong: #47e6c0;
  --draw2-mode-accent: #47e6c0;
}

#draw2WorkspaceFrame[data-creator-mode="AUDIO"] {
  --draw2-accent: #ad73ff;
  --draw2-accent-strong: #ad73ff;
  --draw2-mode-accent: #ad73ff;
}

#draw2WorkspaceFrame[data-creator-mode="GAME"] {
  --draw2-accent: #fabb47;
  --draw2-accent-strong: #fabb47;
  --draw2-mode-accent: #fabb47;
}

#draw2WorkspaceFrame .draw2-creator-mode,
#draw2WorkspaceFrame .draw2-button,
#draw2WorkspaceFrame .draw2-workspace-tab,
#draw2WorkspaceFrame .draw2-mode-timeline-deck-tab,
#draw2WorkspaceFrame .draw2-audio-editor-tab,
#draw2WorkspaceFrame .draw2-audio-right-tab {
  box-sizing: border-box;
  min-width: 0;
  text-align: center;
  line-height: 1.15;
}

#draw2WorkspaceFrame .draw2-button:not(.draw2-button-icon),
#draw2WorkspaceFrame .draw2-creator-mode,
#draw2WorkspaceFrame .draw2-workspace-tab,
#draw2WorkspaceFrame .draw2-mode-timeline-deck-tab,
#draw2WorkspaceFrame .draw2-audio-editor-tab,
#draw2WorkspaceFrame .draw2-audio-right-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#draw2WorkspaceFrame .draw2-audio-inline-mixer-control.draw2-audio-mixer-control {
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  overflow: hidden;
  text-align: center;
}

#draw2WorkspaceFrame .draw2-audio-inline-mixer-heading,
#draw2WorkspaceFrame .draw2-audio-inline-mixer-control > output {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Game has seven compact right-dock destinations at desktop widths. Keep
 * every destination visible in a centered two/three-row tab grid instead of
 * leaving the last English or Japanese labels outside the dock viewport. */
@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-creator-mode="GAME"]
    .draw2-right-custom-dock > .draw2-workspace-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 32px;
    height: auto !important;
    min-height: 64px;
    overflow: visible !important;
    padding-inline: 4px;
  }

  #draw2WorkspaceFrame[data-creator-mode="GAME"]
    .draw2-right-custom-dock > .draw2-workspace-tabs
    > .draw2-workspace-tab {
    width: 100%;
    min-width: 0 !important;
    padding-inline: 4px;
    font-size: 0.58rem;
  }
}

/* Preserve Audio's established top rail. Draw and Game use the same
   coordinates; added Details/common actions occupy only the unused right
   end and do not move the transport controls. */
@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar {
    top: 12px !important;
    left: 150px !important;
    width: 228px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    gap: 3px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-menu-bar {
    top: 12px !important;
    right: 120px !important;
    left: auto !important;
    width: 76px !important;
    min-width: 76px !important;
    height: 40px !important;
    padding: 3px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-context-row {
    top: 12px !important;
    right: 208px !important;
    left: 390px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar {
    top: 12px !important;
    right: 8px !important;
    width: 112px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    gap: 3px !important;
    display: flex !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > * {
    display: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="undo"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="redo"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="command-palette"] {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > .draw2-icon-button
    span {
    display: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioGlobalControls {
    top: 12px !important;
    right: 208px !important;
    left: 390px !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    display: flex !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioGlobalSaveState {
    display: inline !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-creator-mode-bar {
    left: 150px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-menu-bar {
    right: 120px !important;
    left: auto !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar {
    right: 8px !important;
    width: 112px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > * {
    display: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="undo"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="redo"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="command-palette"] {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }
}

/* Keep the consolidated menu trigger visible when its viewport layer is
   taller than the remaining space below the top rail. */
.draw2-details-popover.is-menu-positioned {
  max-height: calc(100dvh - 72px) !important;
  overflow-y: auto !important;
}

@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-brand
    strong {
    display: inline !important;
    overflow: hidden;
    color: var(--draw2-text-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 1120px) {
  /* The top rail owns one shared command cluster in every creator mode.
     Audio-specific transport controls intentionally exclude Play and
     Undo/Redo so the same command has one visual and behavioral entry point. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar {
    display: flex !important;
    right: 8px !important;
    left: auto !important;
    width: 112px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    gap: 3px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > * {
    display: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="undo"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="redo"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-shared-control="playback"] {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="command-palette"] {
    display: none !important;
  }

  /* The legacy Audio projection has stronger mode-qualified selectors for
     these two menu-only actions. Keep them out of the persistent shared bar
     there as well; Details/Help remains their single home. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="command-palette"] {
    display: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > .draw2-icon-button
    span {
    display: none !important;
  }

  /* Audio previously hid the mode icons, which made its otherwise shared
     switch look like a different component. Keep the same icon + label
     composition and dimensions for every visible creator mode. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar
    > .draw2-creator-mode {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 5px !important;
    gap: 4px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar
    > .draw2-creator-mode[hidden] {
    display: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar
    > .draw2-creator-mode:not([hidden]) {
    display: flex !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar
    > .draw2-creator-mode
    .draw2-ui-icon {
    display: block !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
  }
}

/* Common adjustable-rail contract ---------------------------------------
 * Draw, Game, and Audio share the same resize affordances on tablet and
 * desktop. Keep the initial presentation unchanged, but let every rail
 * collapse to a compact usable minimum and expand past the old ceilings.
 * Mobile remains on its half/full sheet contract. */
@media (min-width: 701px) {
  .draw2-workspace-frame:not(.is-focus-mode) {
    --draw2-rail-min-width: 176px;
    --draw2-rail-max-width: 760px;
    --draw2-left-rail-min-width: 40px;
    --draw2-timeline-min-height: 96px;
    --draw2-timeline-max-height: 640px;
    --draw2-left-rail-width: var(--draw2-tool-dock-width, 52px);
    --draw2-right-dock-width: var(--draw2-color-dock-width, 320px);
  }

  .draw2-workspace-frame:not(.is-focus-mode)[data-creator-mode="DRAW"] {
    grid-template-columns:
      minmax(
        var(--draw2-left-rail-min-width),
        max(var(--draw2-left-rail-min-width), var(--draw2-left-rail-width))
      )
      minmax(0, 1fr)
      minmax(
        var(--draw2-rail-min-width),
        max(var(--draw2-rail-min-width), var(--draw2-right-dock-width))
      )
      !important;
  }

  .draw2-workspace-frame:not(.is-focus-mode)[data-creator-mode="GAME"],
  .draw2-workspace-frame:not(.is-focus-mode)[data-creator-mode="AUDIO"] {
    grid-template-columns:
      0 minmax(0, 1fr)
      minmax(
        var(--draw2-rail-min-width),
        max(var(--draw2-rail-min-width), var(--draw2-right-dock-width))
      )
      !important;
  }

  .draw2-workspace-frame:not(.is-focus-mode)[data-creator-mode="DRAW"]:has(
    #draw2WorkspacePanelAssets:not([hidden])
  ) {
    grid-template-columns:
      minmax(
        var(--draw2-left-rail-min-width),
        max(var(--draw2-left-rail-min-width), var(--draw2-left-rail-width))
      )
      minmax(0, 1fr)
      minmax(
        680px,
        max(680px, var(--draw2-right-dock-width))
      ) !important;
  }

  .draw2-workspace-frame:not(.is-focus-mode) {
    grid-template-rows:
      auto minmax(0, 1fr)
      max(
        var(--draw2-timeline-min-height),
        min(var(--draw2-timeline-max-height), var(--draw2-timeline-height))
      )
      var(--draw2-statusbar-height) !important;
  }

  .draw2-workspace-frame:not(.is-focus-mode)
    .draw2-workspace-right-dock {
    min-width: var(--draw2-rail-min-width) !important;
  }

  .draw2-workspace-frame:not(.is-focus-mode)
    #draw2WorkspaceLeftDock {
    width: var(--draw2-left-rail-width) !important;
    min-width: var(--draw2-left-rail-width) !important;
  }

  .draw2-workspace-frame:not(.is-focus-mode)
    #draw2WorkspaceRightResize,
  .draw2-workspace-frame:not(.is-focus-mode)
    #draw2WorkspaceTimelineResize {
    display: block !important;
  }

  .draw2-workspace-frame:not(.is-focus-mode)
    #draw2WorkspaceRightResize {
    left: -6px !important;
    width: 12px !important;
  }

  .draw2-workspace-frame:not(.is-focus-mode)
    #draw2WorkspaceTimelineRegion {
    min-height: var(--draw2-timeline-min-height) !important;
  }
}

/* The Details entry point is shared, but its command surface follows the
   active creator mode.  Two compact columns keep the mode-specific groups
   scannable without turning the central workspace into another panel. */
.draw2-details-popover {
  grid-template-columns: repeat(2, minmax(164px, 1fr));
  min-width: min(432px, calc(100vw - 16px)) !important;
  max-width: min(520px, calc(100vw - 16px));
  max-height: min(560px, calc(100dvh - 72px));
  overflow-y: auto;
}
.draw2-details-popover > .draw2-menu-section-label {
  grid-column: 1 / -1;
  display: block;
  padding: 6px 8px 2px;
  border-top: 1px solid var(--draw2-border-subtle);
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.draw2-details-popover > .draw2-menu-section-label:first-child {
  padding-top: 2px;
  border-top: 0;
}
.draw2-details-popover > [hidden] {
  display: none !important;
}
@media (max-width: 700px) {
  .draw2-details-popover {
    grid-template-columns: minmax(0, 1fr);
    min-width: min(300px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px);
  }
}

/* Compact brush rail ----------------------------------------------------
 * Keep the brush size as the one always-visible numeric control. Shape and
 * pattern share one Aseprite-style trigger so the frequent rail stays short
 * without duplicating the canonical controls in Inspector. */
.draw2-workspace-context-row {
  position: relative;
  overflow: visible !important;
}
.draw2-workspace-quick-controls {
  overflow-x: auto;
  overflow-y: visible;
}
.draw2-quick-control-size {
  grid-template-columns: auto auto;
  gap: 4px;
}
.draw2-quick-size-field {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 30px;
  padding: 0 4px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
}
.draw2-quick-control-size > .draw2-quick-size-field {
  display: inline-flex !important;
}
.draw2-quick-control-size input[type="number"] {
  width: 36px;
  min-width: 36px;
  min-height: 26px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--draw2-text-strong);
  font: 700 0.76rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
  touch-action: none;
}
.draw2-quick-control-size input[type="number"]::-webkit-inner-spin-button,
.draw2-quick-control-size input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  opacity: 0;
}
.draw2-quick-unit {
  color: var(--draw2-text-muted);
  font: 700 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}
.draw2-brush-options-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 86px;
  min-height: 30px;
  padding: 0 6px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  cursor: pointer;
  touch-action: manipulation;
}
.draw2-brush-options-trigger:hover,
.draw2-brush-options-trigger:focus-visible,
.draw2-brush-options-trigger.is-active {
  border-color: var(--draw2-accent-strong);
  color: var(--draw2-text-strong);
}
.draw2-brush-options-trigger > .draw2-ui-icon:first-child {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--draw2-accent-strong);
}
.draw2-brush-options-trigger > span {
  display: inline-block !important;
  max-width: 66px;
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-size: 0.66rem;
  text-overflow: ellipsis;
}
.draw2-brush-options-trigger .draw2-brush-options-chevron {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  color: var(--draw2-text-muted);
}
.draw2-brush-options-flyout {
  position: fixed;
  z-index: 120;
  display: grid;
  gap: var(--draw2-space-2);
  width: min(276px, calc(100vw - 16px));
  padding: var(--draw2-space-2);
  border: 1px solid var(--draw2-border-strong);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface);
  box-shadow: var(--draw2-shadow-panel);
}
.draw2-brush-options-flyout[hidden] {
  display: none !important;
}
.draw2-brush-options-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--draw2-space-2);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--draw2-border-subtle);
  color: var(--draw2-text-strong);
  font-size: 0.7rem;
}
.draw2-brush-options-heading .draw2-button {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
}
.draw2-brush-options-flyout > label {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: var(--draw2-space-2);
  color: var(--draw2-text-muted);
  font-size: 0.66rem;
}
.draw2-brush-options-flyout select {
  width: 100%;
  min-height: 30px;
}
.draw2-brush-options-help {
  margin: 0;
  color: var(--draw2-text-muted);
  font-size: 0.6rem;
  line-height: 1.35;
}
@media (max-width: 700px) {
  .draw2-brush-options-trigger {
    min-width: 82px;
  }
  .draw2-brush-options-flyout {
    width: min(276px, calc(100vw - 16px));
  }
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-quick-control-size {
  width: auto !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-quick-control-size
  input[type="number"] {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-quick-control-size
  > .draw2-quick-size-field {
  display: inline-flex !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-brush-options-trigger
  > span {
  display: inline-block !important;
}

/* Export is one shared panel. Format cards are generated from the Draw2
   Export Registry; preview, output names, and execution use the same state. */
#draw2WorkspacePanelExport {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.draw2-export-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 2px;
}
.draw2-export-heading,
.draw2-export-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.draw2-export-heading h3,
.draw2-export-section-heading h4,
.draw2-export-format-category h5 {
  margin: 0;
  color: var(--draw2-text-strong, var(--draw2-text));
}
.draw2-export-heading h3 {
  font-size: 0.9rem;
}
.draw2-export-section-heading h4,
.draw2-export-format-category h5 {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.draw2-export-scope,
.draw2-export-section-heading > span {
  color: var(--draw2-text-muted, var(--draw2-muted));
  font-size: 0.6rem;
  white-space: nowrap;
}
.draw2-export-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--draw2-text-muted, var(--draw2-muted));
  font-size: 0.64rem;
}
.draw2-export-field input,
.draw2-export-field select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  box-sizing: border-box;
}
.draw2-export-section {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-top: 2px;
}
.draw2-export-format-categories {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.draw2-export-format-category {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.draw2-export-format-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}
.draw2-export-format-card {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  padding: 7px;
  border: 1px solid var(--draw2-border-subtle, var(--draw2-border));
  border-radius: var(--draw2-radius-sm, 4px);
  background: var(--draw2-surface-input, var(--draw2-surface-raised));
  cursor: pointer;
}
.draw2-export-format-card:has(input:checked) {
  border-color: var(--draw2-accent-strong, var(--draw2-accent));
  background: color-mix(in srgb, var(--draw2-accent) 10%, var(--draw2-surface-raised));
}
.draw2-export-format-card:has(input:disabled) {
  cursor: default;
  opacity: 0.48;
}
.draw2-export-format-card input {
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--draw2-accent);
}
.draw2-export-format-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.draw2-export-format-copy strong {
  overflow: hidden;
  color: var(--draw2-text-strong, var(--draw2-text));
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-export-format-copy small,
.draw2-export-format-option span,
.draw2-export-output-list small {
  color: var(--draw2-text-muted, var(--draw2-muted));
  font-size: 0.58rem;
  line-height: 1.35;
}
.draw2-export-format-options {
  display: grid;
  gap: 5px;
}
.draw2-export-format-option {
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border-left: 2px solid var(--draw2-accent);
  background: color-mix(in srgb, var(--draw2-surface-raised) 82%, transparent);
}
.draw2-export-format-option strong {
  color: var(--draw2-text-strong, var(--draw2-text));
  font-size: 0.64rem;
}
.draw2-export-common-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 8px;
  min-width: 0;
}
.draw2-export-package {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 5px 7px 7px;
  border: 1px solid var(--draw2-border-subtle, var(--draw2-border));
  border-radius: var(--draw2-radius-sm, 4px);
  color: var(--draw2-text-muted, var(--draw2-muted));
  font-size: 0.58rem;
}
.draw2-export-package legend {
  padding: 0 3px;
  color: var(--draw2-text-strong, var(--draw2-text));
  font-size: 0.62rem;
}
.draw2-export-package label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.draw2-export-package input {
  margin: 0;
  accent-color: var(--draw2-accent);
}
.draw2-export-preview {
  display: grid;
  place-items: center;
  min-height: 164px;
  padding: 2px;
  border: 1px solid var(--draw2-border-subtle, var(--draw2-border));
  border-radius: var(--draw2-radius-sm, 4px);
  background: var(--draw2-surface);
}
.draw2-export-preview canvas {
  display: block;
  width: min(160px, 100%);
  height: auto;
  image-rendering: pixelated;
}
.draw2-export-output-list {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.draw2-export-output-list li {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 5px 7px;
  overflow-wrap: anywhere;
  border: 1px solid var(--draw2-border-subtle, var(--draw2-border));
  border-radius: var(--draw2-radius-sm, 4px);
  color: var(--draw2-text-strong, var(--draw2-text));
  font-size: 0.62rem;
}
.draw2-export-empty {
  margin: 0;
  color: var(--draw2-text-muted, var(--draw2-muted));
  font-size: 0.62rem;
}
.draw2-export-execute {
  width: 100%;
  min-height: 34px;
  border-color: var(--draw2-accent-strong, var(--draw2-accent));
  background: color-mix(in srgb, var(--draw2-accent) 18%, var(--draw2-surface-raised));
  color: var(--draw2-text-strong, var(--draw2-text));
}
.draw2-export-execute:hover,
.draw2-export-execute:focus-visible {
  background: color-mix(in srgb, var(--draw2-accent) 28%, var(--draw2-surface-raised));
}
@media (max-width: 700px) {
  .draw2-export-common-grid {
    grid-template-columns: 1fr;
  }
  .draw2-export-format-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* The persistent Export command is shared by Draw, Audio, and Game. These
   late selectors intentionally win over older mode-specific rail reductions. */
@media (min-width: 701px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"] {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }
}
@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar {
    width: 140px !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar {
    width: 140px !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"] {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }
}

@media (max-width: 700px) {
  /* Keep Export beside the shared Undo, Redo, and Play commands on mobile. */
  #draw2WorkspaceFrame[data-workspace-profile="mobile"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"] {
    display: grid !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }
}

/* -------------------------------------------------------------------------
   Viewport utility tools and mirror handles

   Centering remains a left-rail viewport utility; the mini preview toggle is
   a shared top-rail command so it is reachable from every creator mode.
   Both stay outside the zoomed canvas surface.
   ------------------------------------------------------------------------- */
.draw2-workspace-left-dock {
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}
.draw2-workspace-toolbar {
  min-height: 0;
  align-items: center;
  scrollbar-width: thin;
}
.draw2-workspace-toolbar > .draw2-viewport-tool {
  box-sizing: border-box;
  position: relative;
  inset: auto;
  flex: 0 0 var(--draw2-control-size, 44px);
  width: var(--draw2-control-size, 44px) !important;
  min-width: var(--draw2-control-size, 44px) !important;
  max-width: var(--draw2-control-size, 44px) !important;
  height: var(--draw2-control-size, 44px) !important;
  min-height: var(--draw2-control-size, 44px) !important;
  max-height: var(--draw2-control-size, 44px) !important;
  padding: 0 !important;
  place-items: center;
}
.draw2-workspace-toolbar > #draw2ViewportCenter {
  margin-top: 6px;
}
.draw2-workspace-toolbar > .draw2-viewport-tool .draw2-tool-icon {
  width: var(--draw2-icon-size, 20px);
  height: var(--draw2-icon-size, 20px);
}
/* The mirror guide is a projection, while its controls stay in the viewport
   gutter. Non-scaling strokes remain crisp when the canvas is zoomed. */
.draw2-mirror-guide-line {
  stroke-width: 2px;
  stroke-dasharray: 8 5;
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 55%));
}
.draw2-mirror-guide-line.is-disabled {
  opacity: 0.28;
}
.draw2-mirror-line-toggle {
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 9px;
  background: color-mix(
    in srgb,
    var(--draw2-surface-raised) 86%,
    var(--draw2-accent-strong)
  );
  color: var(--draw2-text-muted);
  cursor: grab;
  touch-action: none;
  transition: border-color 120ms ease, background-color 120ms ease,
    color 120ms ease, transform 120ms ease;
}
.draw2-mirror-line-toggle::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentcolor;
  opacity: 0.72;
}
.draw2-mirror-line-toggle .draw2-ui-icon {
  width: 18px;
  height: 18px;
}
.draw2-mirror-line-toggle[data-enabled="true"] {
  color: var(--draw2-accent-strong);
  box-shadow: 0 3px 10px rgb(0 0 0 / 35%),
    0 0 0 1px color-mix(in srgb, var(--draw2-accent-strong) 24%, transparent);
}
.draw2-mirror-line-toggle--y[data-enabled="true"] {
  color: var(--draw2-warning, #f5b14c);
}
.draw2-mirror-line-toggle:active {
  cursor: grabbing;
  transform: scale(0.96);
}

@media (max-width: 700px) {
  .draw2-workspace-toolbar > .draw2-viewport-tool {
    flex-basis: 40px;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
  .draw2-workspace-toolbar > #draw2ViewportCenter {
    margin-top: 0;
  }
}

/* Shared mini preview command ------------------------------------------------
 * The preview is a workspace-level surface, so its toggle belongs in the
 * common top rail rather than the Draw-only tool rail.  Keep the command
 * square and icon-led on every profile; the panel itself remains demand
 * mounted by the entry module. */
.draw2-workspace-command-bar > .draw2-global-mini-preview-toggle {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  flex: 0 0 var(--draw2-control-size, 32px) !important;
  width: var(--draw2-control-size, 32px) !important;
  min-width: var(--draw2-control-size, 32px) !important;
  max-width: var(--draw2-control-size, 32px) !important;
  height: var(--draw2-control-size, 32px) !important;
  min-height: var(--draw2-control-size, 32px) !important;
  max-height: var(--draw2-control-size, 32px) !important;
  padding: 0 !important;
  place-items: center;
  opacity: 0.82;
}
.draw2-workspace-command-bar > .draw2-global-mini-preview-toggle > span {
  display: none;
}
.draw2-workspace-command-bar > .draw2-global-mini-preview-toggle[aria-pressed="true"],
.draw2-workspace-command-bar > .draw2-global-mini-preview-toggle:hover,
.draw2-workspace-command-bar > .draw2-global-mini-preview-toggle:focus-visible {
  opacity: 1;
  color: var(--draw2-text-strong);
}
/* Desktop keeps the legacy command bar children collapsed because the
 * quick-control strip owns the other commands. The shared preview is the
 * deliberate exception and must remain reachable from the top rail. */
#draw2WorkspaceFrame
  .draw2-workspace-command-bar
  > .draw2-global-mini-preview-toggle:not([hidden]) {
  display: grid !important;
}

/* Compact profiles previously suppressed the preview surface completely.
 * Keep it lightweight and off by default when collapsed, but make the same
 * shared toggle functional on phones/tablet portrait too. */
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-workspace-command-bar
  > .draw2-global-mini-preview-toggle:not([hidden]),
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-workspace-command-bar
  > .draw2-global-mini-preview-toggle:not([hidden]) {
  display: grid !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-mini-preview:not([hidden]),
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-mini-preview:not([hidden]) {
  position: absolute !important;
  z-index: 30 !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  width: clamp(112px, 38vw, 188px) !important;
  height: clamp(112px, 38vw, 188px) !important;
  min-width: 112px !important;
  min-height: 112px !important;
  max-width: 188px !important;
  max-height: 188px !important;
  display: grid !important;
}
.draw2-workspace-frame[data-workspace-profile="mobile"]
  .draw2-mini-preview:not([hidden]) > canvas,
.draw2-workspace-frame[data-workspace-profile="tablet"][data-workspace-orientation="portrait"]
  .draw2-mini-preview:not([hidden]) > canvas {
  width: calc(clamp(112px, 38vw, 188px) - 8px) !important;
  height: calc(clamp(112px, 38vw, 188px) - 8px) !important;
}
@media (min-width: 1120px) {
  /* Audio hides the full canvas projection on desktop, but the shared mini
     preview is the intentional visual companion and stays mounted. */
  .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-mini-preview:not([hidden]) {
    display: grid !important;
    visibility: visible !important;
  }
}

/* -------------------------------------------------------------------------
   Export Studio surface

   Export is a shared workflow, so its visual language is intentionally
   richer than a plain settings form: a compact hero, purpose-led cards,
   live preview metadata, and a persistent final action all share one rail.
   ------------------------------------------------------------------------- */
#draw2WorkspacePanelExport .draw2-export-panel {
  gap: 12px;
  padding: 2px 2px 12px;
}
#draw2WorkspacePanelExport .draw2-export-hero {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 32%, var(--draw2-border));
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--draw2-accent) 20%, transparent), transparent 48%),
    linear-gradient(135deg, color-mix(in srgb, var(--draw2-accent) 10%, var(--draw2-surface-raised)), var(--draw2-surface-raised));
  box-shadow: 0 10px 24px rgb(0 0 0 / 16%);
}
#draw2WorkspacePanelExport .draw2-export-hero::after {
  position: absolute;
  right: -18px;
  bottom: -30px;
  width: 86px;
  height: 86px;
  border: 1px solid color-mix(in srgb, var(--draw2-accent) 20%, transparent);
  border-radius: 50%;
  content: "";
  opacity: 0.7;
}
#draw2WorkspacePanelExport .draw2-export-hero-mark {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 48%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--draw2-accent) 18%, var(--draw2-surface));
  color: var(--draw2-accent-strong);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
}
#draw2WorkspacePanelExport .draw2-export-hero-mark .draw2-ui-icon {
  width: 20px;
  height: 20px;
}
#draw2WorkspacePanelExport .draw2-export-hero-copy {
  z-index: 1;
  min-width: 0;
}
#draw2WorkspacePanelExport .draw2-export-heading h3 {
  font-size: 1rem;
  letter-spacing: -0.02em;
}
#draw2WorkspacePanelExport .draw2-export-scope {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 25%, var(--draw2-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--draw2-surface) 74%, transparent);
  color: var(--draw2-text-muted);
  font-size: 0.54rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#draw2WorkspacePanelExport .draw2-export-scope i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--draw2-accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw2-accent) 14%, transparent);
}
#draw2WorkspacePanelExport .draw2-export-subtitle {
  max-width: 28em;
  margin: 5px 0 0;
  color: var(--draw2-text-muted);
  font-size: 0.61rem;
  line-height: 1.45;
}
#draw2WorkspacePanelExport .draw2-export-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
#draw2WorkspacePanelExport .draw2-export-field-label > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--draw2-text-strong, var(--draw2-text));
  font-weight: 650;
}
#draw2WorkspacePanelExport .draw2-export-field-label small {
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.52rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#draw2WorkspacePanelExport .draw2-export-input-wrap {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid var(--draw2-border-subtle, var(--draw2-border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--draw2-surface-raised) 86%, #000);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
#draw2WorkspacePanelExport .draw2-export-input-wrap:focus-within {
  border-color: var(--draw2-accent-strong);
  background: color-mix(in srgb, var(--draw2-accent) 6%, var(--draw2-surface-raised));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw2-accent) 12%, transparent);
}
#draw2WorkspacePanelExport .draw2-export-input-wrap > .draw2-ui-icon {
  width: 17px;
  height: 17px;
  color: var(--draw2-text-muted);
}
#draw2WorkspacePanelExport .draw2-export-input-wrap input {
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.72rem;
}
#draw2WorkspacePanelExport .draw2-export-input-wrap input:focus {
  outline: 0;
}
#draw2WorkspacePanelExport .draw2-export-section {
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 82%, transparent);
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--draw2-surface-raised) 72%, transparent), color-mix(in srgb, var(--draw2-surface) 78%, transparent));
}
#draw2WorkspacePanelExport .draw2-export-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#draw2WorkspacePanelExport .draw2-export-section-title > .draw2-ui-icon {
  width: 14px;
  height: 14px;
  color: var(--draw2-accent-strong);
}
#draw2WorkspacePanelExport .draw2-export-section-heading h4 {
  color: var(--draw2-text-strong, var(--draw2-text));
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}
#draw2WorkspacePanelExport .draw2-export-count,
#draw2WorkspacePanelExport .draw2-export-live-tag {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 22%, var(--draw2-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--draw2-accent) 8%, transparent);
  color: var(--draw2-accent-strong);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
}
#draw2WorkspacePanelExport .draw2-export-category-heading {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
  list-style: none;
}
#draw2WorkspacePanelExport .draw2-export-category-heading::-webkit-details-marker,
#draw2WorkspacePanelExport .draw2-export-compact-details > summary::-webkit-details-marker {
  display: none;
}
#draw2WorkspacePanelExport .draw2-export-format-category > summary::after {
  color: var(--draw2-text-muted);
  content: "+";
  font-size: 0.85rem;
}
#draw2WorkspacePanelExport .draw2-export-format-category[open] > summary::after {
  content: "−";
}
#draw2WorkspacePanelExport .draw2-export-compact-details > summary {
  cursor: pointer;
  list-style: none;
}
#draw2WorkspacePanelExport .draw2-export-hero {
  grid-template-columns: 30px minmax(0, 1fr);
  padding: 7px 9px;
}
#draw2WorkspacePanelExport .draw2-export-hero-mark {
  width: 30px;
  height: 30px;
}
#draw2WorkspacePanelExport .draw2-export-category-icon {
  width: 16px;
  height: 16px;
  color: var(--draw2-text-muted);
}
#draw2WorkspacePanelExport .draw2-export-category-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
#draw2WorkspacePanelExport .draw2-export-format-category h5 {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}
#draw2WorkspacePanelExport .draw2-export-category-copy small,
#draw2WorkspacePanelExport .draw2-export-category-count {
  color: var(--draw2-text-muted);
  font-size: 0.52rem;
}
#draw2WorkspacePanelExport .draw2-export-category-count {
  padding: 3px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--draw2-surface) 68%, transparent);
  font-variant-numeric: tabular-nums;
}
#draw2WorkspacePanelExport .draw2-export-format-grid {
  gap: 7px;
}
#draw2WorkspacePanelExport .draw2-export-format-card {
  position: relative;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  min-height: 64px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 90%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--draw2-surface-input, var(--draw2-surface-raised)) 82%, transparent);
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
#draw2WorkspacePanelExport .draw2-export-format-card:hover {
  border-color: color-mix(in srgb, var(--draw2-accent-strong) 42%, var(--draw2-border));
  transform: translateY(-1px);
}
#draw2WorkspacePanelExport .draw2-export-format-card:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--draw2-accent) 58%, transparent);
  outline-offset: 2px;
}
#draw2WorkspacePanelExport .draw2-export-format-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--draw2-accent-strong) 74%, var(--draw2-border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--draw2-accent) 14%, var(--draw2-surface-raised)), color-mix(in srgb, var(--draw2-surface-raised) 88%, transparent));
  box-shadow: 0 5px 14px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 7%);
}
#draw2WorkspacePanelExport .draw2-export-format-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
#draw2WorkspacePanelExport .draw2-export-format-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid color-mix(in srgb, var(--draw2-text-muted) 18%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--draw2-surface) 72%, transparent);
  color: var(--draw2-text-muted);
}
#draw2WorkspacePanelExport .draw2-export-format-icon__svg {
  width: 16px;
  height: 16px;
}
#draw2WorkspacePanelExport .draw2-export-format-icon[data-format="png"] {
  color: #8ae3d2;
}
#draw2WorkspacePanelExport .draw2-export-format-icon[data-format="pxd"] {
  color: #c88bff;
}
#draw2WorkspacePanelExport .draw2-export-format-copy {
  gap: 3px;
}
#draw2WorkspacePanelExport .draw2-export-format-copy strong {
  font-size: 0.7rem;
}
#draw2WorkspacePanelExport .draw2-export-format-copy small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.56rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#draw2WorkspacePanelExport .draw2-export-format-check {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--draw2-border-subtle, var(--draw2-border));
  border-radius: 50%;
  color: transparent;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
#draw2WorkspacePanelExport .draw2-export-format-check .draw2-ui-icon {
  width: 10px;
  height: 10px;
}
#draw2WorkspacePanelExport .draw2-export-format-card:has(input:checked) .draw2-export-format-check {
  border-color: var(--draw2-accent-strong);
  background: var(--draw2-accent-strong);
  color: #10201f;
  transform: scale(1.05);
}
#draw2WorkspacePanelExport .draw2-export-format-options {
  gap: 6px;
}
#draw2WorkspacePanelExport .draw2-export-format-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 80%, transparent);
  border-left: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--draw2-surface-raised) 76%, transparent);
}
#draw2WorkspacePanelExport .draw2-export-option-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--draw2-accent) 12%, var(--draw2-surface));
  color: var(--draw2-accent-strong);
}
#draw2WorkspacePanelExport .draw2-export-option-icon .draw2-ui-icon {
  width: 14px;
  height: 14px;
}
#draw2WorkspacePanelExport .draw2-export-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#draw2WorkspacePanelExport .draw2-export-option-copy strong {
  font-size: 0.62rem;
}
#draw2WorkspacePanelExport .draw2-export-option-copy span {
  overflow: hidden;
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#draw2WorkspacePanelExport .draw2-export-option-badge,
#draw2WorkspacePanelExport .draw2-export-output-badge {
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 24%, var(--draw2-border));
  border-radius: 5px;
  background: color-mix(in srgb, var(--draw2-accent) 8%, transparent);
  color: var(--draw2-accent-strong);
  font-size: 0.49rem;
  font-weight: 750;
  letter-spacing: 0.06em;
}
#draw2WorkspacePanelExport .draw2-export-common-grid {
  gap: 8px;
}
#draw2WorkspacePanelExport .draw2-export-control-card,
#draw2WorkspacePanelExport .draw2-export-package {
  min-height: 70px;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 85%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--draw2-surface-raised) 75%, transparent);
}
#draw2WorkspacePanelExport .draw2-export-control-card select {
  min-height: 34px;
  border-radius: 7px;
}
#draw2WorkspacePanelExport .draw2-export-package legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
  font-weight: 650;
}
#draw2WorkspacePanelExport .draw2-export-package legend .draw2-ui-icon {
  width: 13px;
  height: 13px;
  color: var(--draw2-accent-strong);
}
#draw2WorkspacePanelExport .draw2-export-package label {
  padding: 2px 0;
}
#draw2WorkspacePanelExport .draw2-export-package label:has(input:checked) {
  color: var(--draw2-text-strong, var(--draw2-text));
}
#draw2WorkspacePanelExport .draw2-export-preview {
  gap: 8px;
  min-height: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 90%, transparent);
  border-radius: 10px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--draw2-surface) 92%, #000), var(--draw2-surface-raised));
}
#draw2WorkspacePanelExport .draw2-export-preview-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 170px;
  border: 1px solid color-mix(in srgb, var(--draw2-border) 75%, transparent);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--draw2-accent) 7%, transparent), transparent 58%), #141923;
}
#draw2WorkspacePanelExport .draw2-export-preview-stage::after {
  position: absolute;
  inset: 10px;
  border: 1px dashed color-mix(in srgb, var(--draw2-text-muted) 18%, transparent);
  border-radius: 5px;
  content: "";
  pointer-events: none;
}
#draw2WorkspacePanelExport .draw2-export-preview-badge {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--draw2-accent) 24%, var(--draw2-border));
  border-radius: 5px;
  background: rgb(15 19 27 / 72%);
  color: var(--draw2-text-muted);
  font-size: 0.48rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}
#draw2WorkspacePanelExport .draw2-export-preview-stage canvas {
  z-index: 1;
  width: min(160px, calc(100% - 30px));
  height: auto;
  border-radius: 2px;
  box-shadow: 0 8px 22px rgb(0 0 0 / 34%);
}
#draw2WorkspacePanelExport .draw2-export-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}
#draw2WorkspacePanelExport .draw2-export-preview-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--draw2-text-muted);
  font-size: 0.54rem;
}
#draw2WorkspacePanelExport .draw2-export-preview-meta span .draw2-ui-icon {
  width: 13px;
  height: 13px;
  color: var(--draw2-accent-strong);
}
#draw2WorkspacePanelExport .draw2-export-preview-meta strong {
  color: var(--draw2-text-strong, var(--draw2-text));
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}
#draw2WorkspacePanelExport .draw2-export-output-list {
  gap: 6px;
}
#draw2WorkspacePanelExport .draw2-export-output-list li {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 88%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--draw2-surface-raised) 78%, transparent);
}
#draw2WorkspacePanelExport .draw2-export-output-primary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#draw2WorkspacePanelExport .draw2-export-output-primary > .draw2-ui-icon {
  width: 16px;
  height: 16px;
  color: var(--draw2-accent-strong);
}
#draw2WorkspacePanelExport .draw2-export-output-primary strong {
  overflow: hidden;
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#draw2WorkspacePanelExport .draw2-export-output-list li small {
  display: block;
  overflow: hidden;
  padding-left: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#draw2WorkspacePanelExport .draw2-export-footer {
  position: sticky;
  z-index: 3;
  bottom: -1px;
  display: grid;
  gap: 5px;
  margin: 0 -2px -12px;
  padding: 9px 2px 3px;
  border-top: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 78%, transparent);
  background: color-mix(in srgb, var(--draw2-surface) 98%, transparent);
  backdrop-filter: blur(8px);
}
#draw2WorkspacePanelExport .draw2-export-execute {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding-inline: 10px;
  border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 70%, var(--draw2-border));
  border-radius: 9px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--draw2-accent) 26%, var(--draw2-surface-raised)), color-mix(in srgb, var(--draw2-accent) 10%, var(--draw2-surface-raised)));
  box-shadow: 0 7px 16px rgb(0 0 0 / 22%), inset 0 1px 0 rgb(255 255 255 / 10%);
  text-align: left;
}
#draw2WorkspacePanelExport .draw2-export-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 6px;
}
#draw2WorkspacePanelExport .draw2-export-market {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding-inline: 10px;
  border-color: color-mix(in srgb, var(--draw2-border) 86%, var(--draw2-accent));
  text-align: left;
}
#draw2WorkspacePanelExport .draw2-export-market > .draw2-ui-icon {
  width: 17px;
  height: 17px;
  color: var(--draw2-accent-strong);
}
#draw2WorkspacePanelExport .draw2-export-market > span {
  overflow: hidden;
  font-size: 0.63rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#draw2WorkspacePanelExport .draw2-export-execute > .draw2-ui-icon {
  width: 17px;
  height: 17px;
  color: var(--draw2-accent-strong);
}
#draw2WorkspacePanelExport .draw2-export-execute > span {
  font-weight: 700;
}
#draw2WorkspacePanelExport .draw2-export-execute kbd {
  min-width: 18px;
  padding: 2px 4px;
  border: 1px solid color-mix(in srgb, var(--draw2-text-muted) 26%, transparent);
  border-radius: 4px;
  background: rgb(0 0 0 / 14%);
  color: var(--draw2-text-muted);
  font-family: inherit;
  font-size: 0.54rem;
  text-align: center;
}
#draw2WorkspacePanelExport .draw2-export-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  color: var(--draw2-text-muted);
  font-size: 0.57rem;
}
#draw2WorkspacePanelExport .draw2-export-status::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--draw2-accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw2-accent) 10%, transparent);
  content: "";
}
#draw2WorkspacePanelExport .draw2-export-status[data-state="error"]::before {
  background: var(--draw2-danger-strong, var(--draw2-danger));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw2-danger) 12%, transparent);
}
#draw2WorkspacePanelExport .draw2-export-note {
  display: -webkit-box;
  overflow: hidden;
  padding: 0 2px;
  font-size: 0.54rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (max-width: 700px) {
  #draw2WorkspacePanelExport .draw2-export-panel {
    gap: 10px;
    padding-bottom: 10px;
  }
  #draw2WorkspacePanelExport .draw2-export-hero {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 9px;
  }
  #draw2WorkspacePanelExport .draw2-export-hero-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  #draw2WorkspacePanelExport .draw2-export-hero-mark .draw2-ui-icon {
    width: 18px;
    height: 18px;
  }
  #draw2WorkspacePanelExport .draw2-export-subtitle {
    font-size: 0.58rem;
  }
  #draw2WorkspacePanelExport .draw2-export-section {
    padding: 9px;
  }
  #draw2WorkspacePanelExport .draw2-export-preview-stage {
    min-height: 154px;
  }
  #draw2WorkspacePanelExport .draw2-export-footer {
    margin-bottom: -10px;
  }
  #draw2WorkspacePanelExport .draw2-export-actions {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 701px) {
  /* Export becomes a focused right-rail workspace: give it the space that
     the mode summary normally occupies and keep the palette as a compact
     context strip while the user is making an output decision. */
  #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden])) {
    grid-template-rows: 0 0 minmax(0, 1fr) !important;
  }
  #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden]))
    > #draw2WorkspacePaletteStrip,
  #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden]))
    > #draw2WorkspacePaletteResize {
    display: none !important;
  }
  #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden]))
    > #draw2WorkspaceModeSummary {
    display: none !important;
  }
}

@media (min-width: 701px) {
  /* Audio has a specialized inspector dock. When the shared Export tab is
     active, temporarily project the same custom rail used by Draw/Game so
     Export never becomes a second, displaced panel. */
  #draw2WorkspaceFrame[data-creator-mode="AUDIO"]
    #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden])) {
    display: grid !important;
    grid-template-rows: 0 0 minmax(0, 1fr) !important;
    grid-area: right !important;
  }
  #draw2WorkspaceFrame[data-creator-mode="AUDIO"]
    #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden]))
    > #draw2AudioRightDock {
    display: none !important;
  }
  #draw2WorkspaceFrame[data-creator-mode="AUDIO"]
    #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden]))
    > #draw2WorkspaceRightCustomDock {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

/* Export Studio finishing layer: use tonal surfaces, spacing and active
   shadows for hierarchy. Borders remain only where they communicate focus,
   selection or a compact status chip. */
#draw2WorkspacePanelExport .draw2-export-hero,
#draw2WorkspacePanelExport .draw2-export-section,
#draw2WorkspacePanelExport .draw2-export-format-card,
#draw2WorkspacePanelExport .draw2-export-format-option,
#draw2WorkspacePanelExport .draw2-export-control-card,
#draw2WorkspacePanelExport .draw2-export-package,
#draw2WorkspacePanelExport .draw2-export-preview,
#draw2WorkspacePanelExport .draw2-export-preview-stage,
#draw2WorkspacePanelExport .draw2-export-output-list li {
  border: 0;
}

#draw2WorkspacePanelExport .draw2-export-hero {
  box-shadow: 0 10px 24px rgb(0 0 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 4%);
}

#draw2WorkspacePanelExport .draw2-export-section {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

#draw2WorkspacePanelExport .draw2-export-format-card {
  box-shadow: 0 6px 16px rgb(0 0 0 / 12%);
}

#draw2WorkspacePanelExport .draw2-export-format-card:hover {
  box-shadow: 0 9px 20px rgb(0 0 0 / 19%), inset 0 0 0 1px color-mix(in srgb, var(--draw2-accent) 34%, transparent);
}

#draw2WorkspacePanelExport .draw2-export-format-card:has(input:focus-visible) {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--draw2-accent) 68%, transparent), 0 8px 18px rgb(0 0 0 / 16%);
}

#draw2WorkspacePanelExport .draw2-export-format-card:has(input:checked) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--draw2-accent-strong) 72%, transparent), 0 9px 22px rgb(0 0 0 / 20%);
}

#draw2WorkspacePanelExport .draw2-export-format-option,
#draw2WorkspacePanelExport .draw2-export-output-list li,
#draw2WorkspacePanelExport .draw2-export-preview {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

#draw2WorkspacePanelExport .draw2-export-preview-stage::after {
  display: none;
}

#draw2WorkspacePanelExport .draw2-export-footer {
  border-top: 0;
  box-shadow: 0 -12px 22px color-mix(in srgb, var(--draw2-surface) 76%, transparent);
}

#draw2WorkspacePanelExport .draw2-export-progress {
  display: grid;
  gap: 7px;
  padding: 9px 10px 8px;
  border: 0;
  border-radius: 11px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--draw2-accent) 18%, transparent), transparent 48%),
    linear-gradient(135deg, color-mix(in srgb, var(--draw2-surface-raised) 96%, var(--draw2-accent)), var(--draw2-surface-raised));
  box-shadow: 0 9px 22px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 7%);
}

#draw2WorkspacePanelExport .draw2-export-progress[hidden] {
  display: none !important;
}

#draw2WorkspacePanelExport .draw2-export-progress-head {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#draw2WorkspacePanelExport .draw2-export-progress-mark {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--draw2-accent) 22%, var(--draw2-surface));
  color: var(--draw2-accent-strong);
  animation: draw2-export-pulse 1.6s ease-in-out infinite;
}

#draw2WorkspacePanelExport .draw2-export-progress-mark .draw2-ui-icon {
  width: 15px;
  height: 15px;
}

#draw2WorkspacePanelExport .draw2-export-progress-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#draw2WorkspacePanelExport .draw2-export-progress-copy strong,
#draw2WorkspacePanelExport .draw2-export-progress-copy small,
#draw2WorkspacePanelExport .draw2-export-progress-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#draw2WorkspacePanelExport .draw2-export-progress-copy strong {
  color: var(--draw2-text-strong, var(--draw2-text));
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

#draw2WorkspacePanelExport .draw2-export-progress-copy small {
  color: var(--draw2-text-muted);
  font-size: 0.53rem;
}

#draw2WorkspacePanelExport .draw2-export-progress-percent {
  min-width: 35px;
  color: var(--draw2-accent-strong);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#draw2WorkspacePanelExport .draw2-export-progress-track {
  position: relative;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--draw2-text-muted) 13%, var(--draw2-surface));
}

#draw2WorkspacePanelExport .draw2-export-progress-bar {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--draw2-accent), var(--draw2-accent-strong), #c78cff);
  box-shadow: 0 0 12px color-mix(in srgb, var(--draw2-accent) 52%, transparent);
  transition: width 160ms ease-out;
}

#draw2WorkspacePanelExport .draw2-export-progress[data-state="active"] .draw2-export-progress-bar::after {
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 34%), transparent);
  content: "";
  transform: translateX(-120%);
  animation: draw2-export-sheen 1.15s ease-in-out infinite;
}

#draw2WorkspacePanelExport .draw2-export-progress[data-state="complete"] .draw2-export-progress-bar {
  background: linear-gradient(90deg, var(--draw2-accent-strong), #86e4b5);
}

#draw2WorkspacePanelExport .draw2-export-progress[data-state="error"] .draw2-export-progress-bar {
  background: var(--draw2-danger-strong, var(--draw2-danger));
}

#draw2WorkspacePanelExport .draw2-export-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--draw2-text-muted);
  font-size: 0.5rem;
}

#draw2WorkspacePanelExport .draw2-export-progress-meta strong {
  color: var(--draw2-text);
  font-variant-numeric: tabular-nums;
}

@keyframes draw2-export-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--draw2-accent) 0%, transparent);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--draw2-accent) 12%, transparent);
    transform: scale(1.035);
  }
}

@keyframes draw2-export-sheen {
  0% {
    transform: translateX(-120%);
  }
  55%,
  100% {
    transform: translateX(270%);
  }
}

/* Tool rail interaction contract -----------------------------------------
 * Parent, child, and viewport utility controls share one square tile. A
 * child palette is a viewport-level flyout, never a second row inside the
 * rail; closed groups own no visible or interactive surface. */
:root {
  --draw2-tool-tile-size: var(--draw2-control-size);
}

.draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-group,
.draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-button,
.draw2-workspace-frame .draw2-tool-group > summary,
.draw2-workspace-frame #draw2ViewportCenter {
  box-sizing: border-box !important;
  flex: 0 0 var(--draw2-tool-tile-size) !important;
  width: var(--draw2-tool-tile-size) !important;
  min-width: var(--draw2-tool-tile-size) !important;
  max-width: var(--draw2-tool-tile-size) !important;
  height: var(--draw2-tool-tile-size) !important;
  min-height: var(--draw2-tool-tile-size) !important;
  max-height: var(--draw2-tool-tile-size) !important;
}

.draw2-workspace-frame .draw2-tool-group > summary,
.draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-button,
.draw2-workspace-frame #draw2ViewportCenter {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

.draw2-workspace-frame .draw2-tool-group > .draw2-tool-popover {
  position: fixed !important;
  z-index: 250 !important;
  display: none !important;
  grid-template-columns: repeat(3, var(--draw2-tool-tile-size)) !important;
  grid-auto-rows: var(--draw2-tool-tile-size) !important;
  gap: 4px !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  padding: 4px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  pointer-events: none;
}

.draw2-workspace-frame .draw2-tool-group[open] > .draw2-tool-popover {
  top: calc(var(--draw2-topbar-height, 64px) + 8px);
  left: calc(var(--draw2-tool-dock-width, 52px) + 8px);
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.draw2-workspace-frame .draw2-tool-group:not([open]) > .draw2-tool-popover {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#draw2WorkspaceLeftDock .draw2-tool-popover .draw2-tool-button,
.draw2-workspace-frame .draw2-tool-popover .draw2-tool-button {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 var(--draw2-tool-tile-size) !important;
  width: var(--draw2-tool-tile-size) !important;
  min-width: var(--draw2-tool-tile-size) !important;
  max-width: var(--draw2-tool-tile-size) !important;
  height: var(--draw2-tool-tile-size) !important;
  min-height: var(--draw2-tool-tile-size) !important;
  max-height: var(--draw2-tool-tile-size) !important;
  padding: 0 !important;
}

.draw2-workspace-frame .draw2-tool-popover .draw2-tool-button span,
.draw2-workspace-frame .draw2-tool-group-summary .draw2-tool-group-label {
  display: none !important;
}

.draw2-workspace-frame .draw2-tool-group-summary .draw2-tool-icon,
.draw2-workspace-frame .draw2-tool-popover .draw2-tool-icon,
.draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-button .draw2-tool-icon,
.draw2-workspace-frame #draw2ViewportCenter .draw2-tool-icon {
  width: 18px !important;
  height: 18px !important;
}

/* The shared Details menu moved beside the logo, so its panel must escape
   the compact brand slot just like the tool flyouts escape the rail. */
#draw2WorkspaceFrame .draw2-workspace-brand,
#draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu {
  overflow: visible !important;
}
#draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu {
  position: relative;
  z-index: 400;
}
#draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu[open]
  > .draw2-details-popover {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 401 !important;
}
#draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu:not([open])
  > .draw2-details-popover {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 700px) {
  .draw2-workspace-frame .draw2-tool-group[open] > .draw2-tool-popover {
    top: auto;
    bottom: calc(var(--draw2-mobile-rail-height, 96px) + 8px);
    left: 8px;
  }
}

/* Primary desktop commands use the same deliberate touch-sized tile as the
   mobile rail. Keep the dense timeline cells compact, but never let the
   persistent Undo/Redo/export/play controls collapse into narrow slivers. */
@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"] {
    --draw2-desktop-primary-control: 40px;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar {
    width: 220px !important;
    min-width: 220px !important;
    height: 40px !important;
    min-height: 40px !important;
    gap: 4px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-context-row {
    right: 248px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > .draw2-icon-button {
    box-sizing: border-box !important;
    flex: 0 0 var(--draw2-desktop-primary-control) !important;
    width: var(--draw2-desktop-primary-control) !important;
    min-width: var(--draw2-desktop-primary-control) !important;
    max-width: var(--draw2-desktop-primary-control) !important;
    height: var(--draw2-desktop-primary-control) !important;
    min-height: var(--draw2-desktop-primary-control) !important;
    max-height: var(--draw2-desktop-primary-control) !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-toolbar
    > .draw2-tool-group,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-toolbar
    > .draw2-tool-button,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-toolbar
    > .draw2-tool-group
    > summary {
    flex-basis: var(--draw2-desktop-primary-control) !important;
    width: var(--draw2-desktop-primary-control) !important;
    min-width: var(--draw2-desktop-primary-control) !important;
    max-width: var(--draw2-desktop-primary-control) !important;
    height: var(--draw2-desktop-primary-control) !important;
    min-height: var(--draw2-desktop-primary-control) !important;
    max-height: var(--draw2-desktop-primary-control) !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-creator-mode-bar
    > .draw2-creator-mode {
    height: var(--draw2-desktop-primary-control) !important;
    min-height: var(--draw2-desktop-primary-control) !important;
    max-height: var(--draw2-desktop-primary-control) !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-brush-options-trigger {
    min-height: var(--draw2-desktop-primary-control) !important;
    height: var(--draw2-desktop-primary-control) !important;
  }
}

/* Draw keeps a fixed, parent-only tool rail. Related child tools remain in
   the parent popover, so the Canvas never loses width to a child-tool grid. */
@media (min-width: 1000px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] {
    --draw2-left-rail-min-width: 52px;
    --draw2-left-rail-width: 52px;
    --draw2-tool-rail-width: 52px;
    --draw2-tool-dock-width: 52px;
  }

  /* The legacy Mobile V2 controls stay in the markup for their own profile,
     but must never contribute visible or interactive UI to desktop Draw. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
    #draw2WorkspaceLeftDock
    > [data-mobile-only-left-dock-chrome],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
    #draw2WorkspaceLeftDock
    > .draw2-workspace-toolbar
    > .draw2-tool-button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
    #draw2WorkspaceLeftDock {
    box-sizing: border-box !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
    #draw2WorkspaceLeftDock
    .draw2-tool-group:not([open])
    > .draw2-tool-popover {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* The PC Timeline menu and the visible Timeline surface share one collapse
   authority. Keep that affordance above the matrix in every cascade state. */
@media (min-width: 1000px) {
  #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-heading {
    position: absolute;
    z-index: 30;
    top: 4px;
    right: 4px;
    display: flex !important;
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #draw2WorkspaceTimelineSlot
    > #draw2TimelineCard
    > .draw2-timeline-heading
    > :not(#draw2TimelineCollapse) {
    display: none !important;
  }

  #draw2TimelineCollapse {
    display: grid !important;
    place-items: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
  }

  #draw2WorkspaceFrame:has(
    #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"]
  ) {
    grid-template-rows:
      auto minmax(0, 1fr) 32px var(--draw2-statusbar-height) !important;
  }

  #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"] {
    height: 32px !important;
    min-height: 32px !important;
  }
}

/* -------------------------------------------------------------------------
   Draw2 simplified top tools

   Undo/Redo, viewport zoom, and the future sync state are high-frequency
   workspace actions. They share one compact rail so the right dock remains
   dedicated to authoring surfaces rather than status or navigation chrome.
   ------------------------------------------------------------------------- */
#draw2WorkspaceFrame .draw2-workspace-command-bar {
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  scrollbar-width: thin;
}

#draw2WorkspaceFrame .draw2-workspace-command-bar > [data-draw2-zoom-tools] {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  height: 32px !important;
  min-height: 32px !important;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--draw2-border-subtle, var(--draw2-border));
  border-radius: 6px;
  background: color-mix(
    in srgb,
    var(--draw2-surface-raised, #171d29) 86%,
    var(--draw2-accent, #6ea8fe)
  );
}

#draw2WorkspaceFrame .draw2-zoom-tool {
  box-sizing: border-box;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 26px !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--draw2-text-strong, #f4f7fb);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

#draw2WorkspaceFrame .draw2-zoom-tool-fit {
  flex-basis: 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
}

#draw2WorkspaceFrame .draw2-zoom-tool:hover,
#draw2WorkspaceFrame .draw2-zoom-tool:focus-visible {
  border-color: var(--draw2-border-strong, var(--draw2-border));
  background: color-mix(
    in srgb,
    var(--draw2-accent, #6ea8fe) 16%,
    transparent
  );
}

#draw2WorkspaceFrame .draw2-zoom-readout {
  box-sizing: border-box;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 3px;
  border: 0;
  color: var(--draw2-text-muted, #aeb8c8);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

#draw2WorkspaceFrame .draw2-sync-status {
  position: relative;
  box-sizing: border-box;
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  height: 32px !important;
  min-height: 32px !important;
  z-index: 40;
}

#draw2WorkspaceFrame .draw2-sync-status > summary {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto !important;
  min-width: 54px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 7px !important;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--draw2-text-muted, #aeb8c8);
  cursor: pointer;
  font-size: 0.58rem;
  font-weight: 700;
  list-style: none;
  text-transform: uppercase;
  white-space: nowrap;
}

#draw2WorkspaceFrame .draw2-sync-status > summary::-webkit-details-marker {
  display: none;
}

#draw2WorkspaceFrame .draw2-sync-status > summary:hover,
#draw2WorkspaceFrame .draw2-sync-status > summary:focus-visible,
#draw2WorkspaceFrame .draw2-sync-status[open] > summary {
  border-color: var(--draw2-border-strong, var(--draw2-border));
  background: color-mix(
    in srgb,
    var(--draw2-accent, #6ea8fe) 12%,
    transparent
  );
  color: var(--draw2-text-strong, #f4f7fb);
}

#draw2WorkspaceFrame .draw2-sync-dot {
  display: inline-block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8290a3;
  box-shadow: 0 0 0 2px rgb(130 144 163 / 14%);
}

#draw2WorkspaceFrame[data-draw2-sync-state="connecting"] .draw2-sync-dot {
  background: #e4ad4a;
  box-shadow: 0 0 0 2px rgb(228 173 74 / 15%);
}

#draw2WorkspaceFrame[data-draw2-sync-state="synced"] .draw2-sync-dot {
  background: #54c58a;
  box-shadow: 0 0 0 2px rgb(84 197 138 / 15%);
}

#draw2WorkspaceFrame[data-draw2-sync-state="offline"] .draw2-sync-dot {
  background: #e4ad4a;
  box-shadow: 0 0 0 2px rgb(228 173 74 / 15%);
}

#draw2WorkspaceFrame[data-draw2-sync-state="conflict"] .draw2-sync-dot {
  background: #ec6d73;
  box-shadow: 0 0 0 2px rgb(236 109 115 / 15%);
}

#draw2WorkspaceFrame .draw2-sync-popover {
  position: fixed;
  top: 60px;
  right: 8px;
  display: none;
  width: min(318px, calc(100vw - 16px));
  box-sizing: border-box;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--draw2-border-strong, var(--draw2-border));
  border-radius: 9px;
  background: var(--draw2-surface-raised, #171d29);
  box-shadow: 0 14px 36px rgb(0 0 0 / 34%);
  color: var(--draw2-text, #dce4ef);
  z-index: 600;
}

#draw2WorkspaceFrame .draw2-sync-status[open] > .draw2-sync-popover {
  display: grid !important;
}

#draw2WorkspaceFrame .draw2-sync-heading,
#draw2WorkspaceFrame .draw2-sync-state-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#draw2WorkspaceFrame .draw2-sync-heading > div,
#draw2WorkspaceFrame .draw2-sync-state-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#draw2WorkspaceFrame .draw2-sync-heading strong {
  color: var(--draw2-text-strong, #f4f7fb);
  font-size: 0.8rem;
}

#draw2WorkspaceFrame .draw2-sync-state-badge {
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 1px solid var(--draw2-border-subtle, var(--draw2-border));
  border-radius: 4px;
  color: var(--draw2-text-muted, #aeb8c8);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

#draw2WorkspaceFrame .draw2-sync-state-card {
  justify-content: flex-start;
  padding: 10px;
  border: 1px solid var(--draw2-border-subtle, var(--draw2-border));
  border-radius: 7px;
  background: color-mix(
    in srgb,
    var(--draw2-surface, #10151f) 82%,
    var(--draw2-accent, #6ea8fe)
  );
}

#draw2WorkspaceFrame .draw2-sync-state-card strong {
  color: var(--draw2-text-strong, #f4f7fb);
  font-size: 0.72rem;
}

#draw2WorkspaceFrame .draw2-sync-state-card small,
#draw2WorkspaceFrame .draw2-sync-note {
  color: var(--draw2-text-muted, #aeb8c8);
  font-size: 0.62rem;
  line-height: 1.45;
}

#draw2WorkspaceFrame .draw2-sync-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

#draw2WorkspaceFrame .draw2-sync-metrics > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid var(--draw2-border-subtle, var(--draw2-border));
  border-radius: 5px;
  background: var(--draw2-surface, #10151f);
}

#draw2WorkspaceFrame .draw2-sync-metrics small {
  color: var(--draw2-text-muted, #aeb8c8);
  font-size: 0.52rem;
  text-transform: uppercase;
}

#draw2WorkspaceFrame .draw2-sync-metrics strong {
  overflow: hidden;
  color: var(--draw2-text-strong, #f4f7fb);
  font-size: 0.61rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#draw2WorkspaceFrame .draw2-sync-note {
  margin: 0;
}

#draw2WorkspaceFrame .draw2-statusbar-sync {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  color: var(--draw2-text-muted, #aeb8c8);
  font-size: 0.58rem;
  white-space: nowrap;
}

#draw2WorkspaceFrame .draw2-statusbar-sync .draw2-sync-dot {
  width: 6px;
  height: 6px;
  flex-basis: 6px;
}

#draw2WorkspaceFrame .draw2-right-custom-dock > .draw2-workspace-tabs {
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  scrollbar-width: thin;
}

#draw2WorkspaceFrame .draw2-right-custom-dock > .draw2-workspace-tabs
  > .draw2-workspace-tab {
  flex: 0 0 auto !important;
}

@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar {
    width: 332px !important;
    min-width: 332px !important;
    overflow: visible !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-context-row {
    right: 360px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > * {
    display: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="undo"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="redo"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-mode-playback] {
    display: grid !important;
    place-items: center;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > .draw2-global-mini-preview-toggle {
    display: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > [data-draw2-zoom-tools],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar
    > #draw2SyncStatus {
    display: inline-flex !important;
  }
}

@media (max-width: 1119px) {
  #draw2WorkspaceFrame[data-workspace-profile="mobile"]
    .draw2-workspace-command-bar,
  #draw2WorkspaceFrame[data-workspace-profile="tablet"]
    .draw2-workspace-command-bar,
  #draw2WorkspaceFrame[data-workspace-profile="split"]
    .draw2-workspace-command-bar {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #draw2WorkspaceFrame .draw2-workspace-command-bar {
    overflow-x: auto !important;
    overflow-y: visible !important;
    justify-content: flex-start !important;
    touch-action: pan-x;
  }

  #draw2WorkspaceFrame .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  #draw2WorkspaceFrame .draw2-workspace-command-bar
    > .draw2-global-mini-preview-toggle {
    display: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="mobile"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  #draw2WorkspaceFrame[data-workspace-profile="mobile"]
    .draw2-workspace-command-bar
    > .draw2-global-mini-preview-toggle,
  #draw2WorkspaceFrame[data-workspace-profile="tablet"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  #draw2WorkspaceFrame[data-workspace-profile="tablet"]
    .draw2-workspace-command-bar
    > .draw2-global-mini-preview-toggle,
  #draw2WorkspaceFrame[data-workspace-profile="split"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  #draw2WorkspaceFrame[data-workspace-profile="split"]
    .draw2-workspace-command-bar
    > .draw2-global-mini-preview-toggle {
    display: none !important;
  }

  #draw2WorkspaceFrame .draw2-workspace-command-bar
    > [data-draw2-zoom-tools],
  #draw2WorkspaceFrame .draw2-workspace-command-bar
    > #draw2SyncStatus {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
  }
}

@media (max-width: 700px) {
  #draw2WorkspaceFrame[data-workspace-profile="mobile"]
    .draw2-workspace-command-bar,
  #draw2WorkspaceFrame[data-workspace-profile="tablet"]
    .draw2-workspace-command-bar,
  #draw2WorkspaceFrame[data-workspace-profile="split"]
    .draw2-workspace-command-bar {
    justify-content: flex-start !important;
  }

  #draw2WorkspaceFrame .draw2-workspace-command-bar
    > [data-draw2-zoom-tools] {
    height: 32px !important;
    min-height: 32px !important;
  }

  #draw2WorkspaceFrame .draw2-zoom-tool {
    flex-basis: 24px !important;
    width: 24px !important;
    min-width: 24px !important;
  }

  #draw2WorkspaceFrame .draw2-zoom-tool-fit {
    flex-basis: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
  }

  #draw2WorkspaceFrame .draw2-zoom-readout {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
  }

  #draw2WorkspaceFrame .draw2-sync-status > summary {
    min-width: 50px !important;
    padding-inline: 5px !important;
  }

  #draw2WorkspaceFrame .draw2-sync-popover {
    top: 52px;
  }

  #draw2WorkspaceFrame .draw2-statusbar-sync {
    display: inline-flex !important;
  }
}

/* Project start surface --------------------------------------------------
 * The editor remains a full-viewport workspace after a project is chosen.
 * Before that point, keep the launch decision in a calm, bounded surface so
 * the first screen has the same hierarchy as the Figma app shell. */
.draw2-project-start[hidden] {
  display: none !important;
}

.draw2-shell:has(#draw2ProjectStart:not([hidden])) {
  display: block !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: clamp(24px, 5dvh, 64px) clamp(20px, 5vw, 72px) !important;
  overflow: auto !important;
  background:
    radial-gradient(circle at 78% 18%, rgb(71 230 192 / 8%), transparent 30%),
    var(--draw2-bg);
}

.draw2-shell:has(#draw2ProjectStart:not([hidden])) > .draw2-workspace-frame,
.draw2-shell:has(#draw2ProjectStart:not([hidden])) > .draw2-card {
  display: none !important;
}

.draw2-project-start {
  width: min(1080px, 100%);
  min-height: calc(100dvh - 2 * clamp(24px, 5dvh, 64px));
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 20px;
  background: color-mix(in srgb, var(--draw2-surface) 96%, #05070b);
  box-shadow: var(--draw2-shadow-panel);
}

.draw2-project-start-header,
.draw2-project-start-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.draw2-project-start-brand {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.draw2-project-start-logo {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}

.draw2-project-start h1,
.draw2-project-start h2,
.draw2-project-start p {
  margin-top: 0;
}

.draw2-project-start h1 {
  margin-bottom: 8px;
  color: var(--draw2-text-strong);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.draw2-project-start-header p:not(.draw2-eyebrow) {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--draw2-text-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.draw2-project-start-local,
.draw2-project-start-section-heading > span {
  flex: 0 0 auto;
  color: var(--draw2-text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.draw2-project-start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 12px;
  margin-top: clamp(28px, 5vw, 52px);
}

.draw2-project-start-card,
.draw2-project-start-open {
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 12px;
  background: var(--draw2-surface-raised);
  color: var(--draw2-text-strong);
}

.draw2-project-start-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.draw2-project-start-card:hover,
.draw2-project-start-card:focus-visible {
  border-color: var(--draw2-accent-strong);
  background: color-mix(in srgb, var(--draw2-accent-strong) 10%, var(--draw2-surface-raised));
}

.draw2-project-start-card-primary {
  border-color: color-mix(in srgb, var(--draw2-accent-strong) 46%, var(--draw2-border-subtle));
}

.draw2-project-start-card-icon {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--draw2-accent-strong) 18%, transparent);
  color: var(--draw2-accent-strong);
  font-size: 1.7rem;
  line-height: 1;
}

.draw2-project-start-card span:last-child,
.draw2-project-start-open {
  display: grid;
  gap: 6px;
}

.draw2-project-start-card strong {
  font-size: 0.98rem;
}

.draw2-project-start-card small {
  color: var(--draw2-text-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.draw2-project-start-open {
  align-content: center;
}

.draw2-project-start-open label {
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.draw2-project-start-open > div {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.draw2-project-start-open input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--draw2-border-strong);
  border-radius: 6px;
  background: var(--draw2-surface-input);
  color: var(--draw2-text-strong);
  font-size: 0.72rem;
}

.draw2-project-start-open .draw2-button {
  flex: 0 0 auto;
  width: auto !important;
  min-height: 36px;
  padding-inline: 13px;
}

.draw2-project-start-recent {
  margin-top: clamp(30px, 5vw, 58px);
}

.draw2-project-start-section-heading {
  align-items: end;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--draw2-border-subtle);
}

.draw2-project-start-section-heading .draw2-eyebrow {
  margin-bottom: 4px;
}

.draw2-project-start h2 {
  margin-bottom: 0;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.draw2-project-start-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.draw2-project-recent-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 88px;
  padding: 13px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 10px;
  background: color-mix(in srgb, var(--draw2-surface-raised) 82%, transparent);
  color: var(--draw2-text-strong);
  text-align: left;
  cursor: pointer;
}

.draw2-project-recent-item:hover,
.draw2-project-recent-item:focus-visible {
  border-color: var(--draw2-accent-strong);
}

.draw2-project-recent-item strong,
.draw2-project-recent-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draw2-project-recent-item strong {
  font-size: 0.76rem;
}

.draw2-project-recent-item small {
  color: var(--draw2-text-muted);
  font-size: 0.64rem;
}

.draw2-project-start-status {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
}

@media (max-width: 700px) {
  .draw2-shell:has(#draw2ProjectStart:not([hidden])) {
    padding: 12px !important;
  }

  .draw2-project-start {
    min-height: calc(100dvh - 24px);
    padding: 20px 16px;
    border-radius: 14px;
  }

  .draw2-project-start-header {
    display: block;
  }

  .draw2-project-start-local {
    display: inline-block;
    margin: 18px 0 0 56px;
  }

  .draw2-project-start-grid,
  .draw2-project-start-list {
    grid-template-columns: 1fr;
  }

  .draw2-project-start-grid {
    margin-top: 30px;
  }
}

/* Progressive Details menu ---------------------------------------------
 * The hamburger first exposes a small set of workspace families. Each
 * family then exposes its original section groups, keeping the command
 * surface discoverable without presenting every action at once. */
#draw2WorkspaceFrame .draw2-details-popover {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start;
  gap: 6px !important;
  padding: 6px !important;
}
#draw2WorkspaceFrame .draw2-menu-group,
#draw2WorkspaceFrame .draw2-menu-subgroup {
  min-width: 0;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-raised);
}
#draw2WorkspaceFrame .draw2-menu-group > summary,
#draw2WorkspaceFrame .draw2-menu-subgroup > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--draw2-radius-sm);
  color: var(--draw2-text-strong);
  cursor: pointer;
  list-style: none;
}
#draw2WorkspaceFrame .draw2-menu-group > summary::-webkit-details-marker,
#draw2WorkspaceFrame .draw2-menu-subgroup > summary::-webkit-details-marker {
  display: none;
}
#draw2WorkspaceFrame .draw2-menu-group > summary::after,
#draw2WorkspaceFrame .draw2-menu-subgroup > summary::after {
  content: "›";
  color: var(--draw2-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  transform: translateY(-1px);
}
#draw2WorkspaceFrame .draw2-menu-group[open] > summary,
#draw2WorkspaceFrame .draw2-menu-subgroup[open] > summary,
#draw2WorkspaceFrame .draw2-menu-group > summary:hover,
#draw2WorkspaceFrame .draw2-menu-subgroup > summary:hover,
#draw2WorkspaceFrame .draw2-menu-group > summary:focus-visible,
#draw2WorkspaceFrame .draw2-menu-subgroup > summary:focus-visible {
  background: var(--draw2-surface);
  outline: 0;
}
#draw2WorkspaceFrame .draw2-menu-group[open] > summary::after,
#draw2WorkspaceFrame .draw2-menu-subgroup[open] > summary::after {
  content: "⌄";
}
#draw2WorkspaceFrame .draw2-menu-group-popover,
#draw2WorkspaceFrame .draw2-menu-subgroup-popover {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 4px;
  border-top: 1px solid var(--draw2-border-subtle);
}
#draw2WorkspaceFrame .draw2-menu-group:not([open]) > .draw2-menu-group-popover,
#draw2WorkspaceFrame .draw2-menu-subgroup:not([open])
  > .draw2-menu-subgroup-popover {
  display: none;
}
#draw2WorkspaceFrame .draw2-menu-group-popover > .draw2-menu-section-label,
#draw2WorkspaceFrame .draw2-menu-subgroup-popover > .draw2-menu-section-label {
  display: block;
  padding: 4px 6px 2px;
  color: var(--draw2-text-muted);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}
#draw2WorkspaceFrame .draw2-menu-subgroup {
  background: var(--draw2-surface);
}
#draw2WorkspaceFrame .draw2-menu-subgroup > summary {
  min-height: 32px;
  padding-inline: 8px;
  font-size: 0.7rem;
}
#draw2WorkspaceFrame .draw2-menu-group-popover button,
#draw2WorkspaceFrame .draw2-menu-subgroup-popover button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The mini preview is opened from a quiet, fixed viewport affordance. */
#draw2WorkspaceFrame .draw2-viewport-mini-preview-toggle {
  position: absolute !important;
  z-index: 6 !important;
  top: 8px !important;
  right: 8px !important;
  display: grid !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  place-items: center;
  border-color: var(--draw2-border-strong);
  background: color-mix(in srgb, var(--draw2-surface) 94%, transparent);
  opacity: 0.86;
}
#draw2WorkspaceFrame .draw2-viewport-mini-preview-toggle > span {
  display: none !important;
}
#draw2WorkspaceFrame .draw2-viewport-mini-preview-toggle:hover,
#draw2WorkspaceFrame .draw2-viewport-mini-preview-toggle:focus-visible,
#draw2WorkspaceFrame .draw2-viewport-mini-preview-toggle:active {
  opacity: 1;
}

@media (max-width: 700px) {
  #draw2WorkspaceFrame .draw2-details-popover {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #draw2WorkspaceFrame .draw2-viewport-mini-preview-toggle {
    top: 6px !important;
    right: 6px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

/* Keep the numeric brush-size value inside its own field at every viewport
   width. The unit is part of the field, so the value never drifts into the
   neighbouring brush control. */
#draw2WorkspaceFrame .draw2-quick-size-field {
  box-sizing: border-box;
  flex: 0 0 72px;
  width: 72px;
  min-width: 72px;
  justify-content: center;
  gap: 4px;
  padding-inline: 5px;
  overflow: hidden;
}
#draw2WorkspaceFrame .draw2-quick-control-size input[type="number"] {
  box-sizing: border-box;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  padding-inline: 2px;
  overflow: visible;
  font-variant-numeric: tabular-nums;
}
#draw2WorkspaceFrame .draw2-quick-unit {
  flex: 0 0 auto;
}
#draw2WorkspaceFrame .draw2-export-package-note {
  margin: 0;
  color: var(--draw2-text-muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

/* Diagonal mirror handles use the line glyph itself as the switch. */
#draw2WorkspaceFrame .draw2-mirror-line-toggle--diagonal-down,
#draw2WorkspaceFrame .draw2-mirror-line-toggle--diagonal-up {
  font: 800 1.15rem/1 ui-sans-serif, system-ui, sans-serif;
}
#draw2WorkspaceFrame .draw2-mirror-line-toggle--diagonal-down[data-enabled="true"],
#draw2WorkspaceFrame .draw2-mirror-line-toggle--diagonal-up[data-enabled="true"] {
  color: var(--draw2-warning, #f5b14c);
}

/* Tool flyouts must escape the left-dock stacking context and any shell clip.
   The open class is toggled only while a parent tool is expanded, so the
   normal Canvas-first overflow contract remains unchanged when closed. */
#draw2WorkspaceFrame.is-tool-flyout-open {
  overflow: visible !important;
}
#draw2WorkspaceFrame.is-tool-flyout-open #draw2WorkspaceLeftDock,
#draw2WorkspaceLeftDock.is-tool-flyout-open {
  position: relative !important;
  z-index: 10000 !important;
  overflow: visible !important;
}
#draw2WorkspaceFrame .draw2-tool-popover.is-flyout-positioned {
  z-index: 10001 !important;
  isolation: isolate;
}

/* Child-tool flyout contract --------------------------------------------
 * The rail uses compact icon-only tiles; the child palette is deliberately
 * different. It is a labeled, three-column card with one stable row per
 * child, so labels stay inside their own tile instead of colliding with the
 * next row. The width is capped for desktop and shrinks with the viewport. */
#draw2WorkspaceFrame .draw2-tool-group > .draw2-tool-popover {
  box-sizing: border-box !important;
  --draw2-tool-child-size: 56px;
  --draw2-tool-child-gap: 4px;
  --draw2-tool-child-padding: 6px;
  grid-template-columns: repeat(3, var(--draw2-tool-child-size)) !important;
  grid-auto-rows: var(--draw2-tool-child-size) !important;
  gap: var(--draw2-tool-child-gap) !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  padding: var(--draw2-tool-child-padding) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

#draw2WorkspaceFrame .draw2-tool-group[data-tool-count="1"] > .draw2-tool-popover {
  grid-template-columns: repeat(1, var(--draw2-tool-child-size)) !important;
}

#draw2WorkspaceFrame .draw2-tool-group[data-tool-count="2"] > .draw2-tool-popover {
  grid-template-columns: repeat(2, var(--draw2-tool-child-size)) !important;
}

#draw2WorkspaceFrame .draw2-tool-group[open] > .draw2-tool-popover {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#draw2WorkspaceFrame .draw2-tool-popover .draw2-tool-button {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: 20px minmax(1.1em, auto) !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
  width: var(--draw2-tool-child-size) !important;
  min-width: var(--draw2-tool-child-size) !important;
  max-width: var(--draw2-tool-child-size) !important;
  height: var(--draw2-tool-child-size) !important;
  min-height: var(--draw2-tool-child-size) !important;
  max-height: var(--draw2-tool-child-size) !important;
  padding: 5px 3px !important;
  overflow: hidden !important;
  text-align: center !important;
}

#draw2WorkspaceFrame .draw2-tool-popover .draw2-tool-button .draw2-tool-icon {
  display: block !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
}

#draw2WorkspaceFrame .draw2-tool-popover .draw2-tool-button span {
  display: block !important;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 0.64rem;
  font-weight: 650;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The flyout is viewport-level UI. Keep it above the shell and leave the
 * measured inline position from the workspace controller authoritative. */
#draw2WorkspaceFrame .draw2-tool-popover.is-flyout-positioned {
  z-index: 10001 !important;
  isolation: isolate;
}

@media (max-width: 700px) {
  #draw2WorkspaceFrame .draw2-tool-group > .draw2-tool-popover {
    width: max-content !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: var(--draw2-tool-child-padding) !important;
    gap: var(--draw2-tool-child-gap) !important;
  }

  #draw2WorkspaceFrame .draw2-tool-popover .draw2-tool-button {
    width: var(--draw2-tool-child-size) !important;
    min-width: var(--draw2-tool-child-size) !important;
    max-width: var(--draw2-tool-child-size) !important;
    height: var(--draw2-tool-child-size) !important;
    min-height: var(--draw2-tool-child-size) !important;
    max-height: var(--draw2-tool-child-size) !important;
    padding-inline: 3px !important;
  }
}

/* Contextual options live on the viewport edge. The rail is inert when the
 * active tool has no relevant setting, so the canvas remains the default
 * workspace instead of gaining another permanent panel. */
#draw2WorkspaceFrame .draw2-viewport-context-rail {
  position: absolute;
  z-index: 22;
  top: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 16px);
  pointer-events: none;
}
#draw2WorkspaceFrame .draw2-viewport-context-rail[hidden] {
  display: none !important;
}
#draw2WorkspaceFrame .draw2-viewport-context-control {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 7px;
  background: color-mix(in srgb, var(--draw2-surface-raised) 92%, transparent);
  color: var(--draw2-text-muted);
  font-size: 0.64rem;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
}
#draw2WorkspaceFrame .draw2-viewport-context-control[hidden] {
  display: none !important;
}
#draw2WorkspaceFrame .draw2-viewport-context-control select {
  min-width: 56px;
  min-height: 24px;
  padding-inline: 4px;
  font-size: 0.64rem;
}
#draw2WorkspaceFrame .draw2-viewport-context-control input[type="range"] {
  width: 86px;
  min-width: 60px;
  min-height: 20px;
  accent-color: var(--draw2-accent-strong, var(--draw2-accent));
}
#draw2WorkspaceFrame .draw2-viewport-context-control output {
  min-width: 32px;
  color: var(--draw2-text-strong);
  font: 700 0.64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#draw2WorkspaceFrame .draw2-viewport-context-control--range {
  padding-right: 5px;
}

/* Reserve a real gutter only while mirror guides are active. This prevents
 * the four line switches from sitting on top of a fit-to-width mobile canvas. */
#draw2WorkspaceFrame .draw2-viewport-wrap.is-mirror-enabled {
  padding: 42px !important;
}

@media (max-width: 700px) {
  #draw2WorkspaceFrame .draw2-viewport-context-rail {
    top: 6px;
    left: 6px;
    gap: 4px;
    max-width: calc(100% - 12px);
  }
  #draw2WorkspaceFrame .draw2-viewport-context-control {
    min-height: 32px;
    padding-inline: 6px;
  }
  #draw2WorkspaceFrame .draw2-viewport-context-control input[type="range"] {
    width: 68px;
    min-width: 52px;
  }
  #draw2WorkspaceFrame .draw2-viewport-wrap.is-mirror-enabled {
    padding: 38px !important;
  }
}

/* Mirror is a global drawing mode, so its master switch belongs beside the
 * frequent brush controls. The viewport keeps only the four edge handles that
 * select the active axes. */
#draw2WorkspaceFrame .draw2-mirror-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 4px;
  min-width: 76px;
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: var(--draw2-radius-sm);
  background: var(--draw2-surface-input);
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  touch-action: manipulation;
}
#draw2WorkspaceFrame .draw2-mirror-mode-toggle:hover,
#draw2WorkspaceFrame .draw2-mirror-mode-toggle:focus-visible,
#draw2WorkspaceFrame .draw2-mirror-mode-toggle[aria-pressed="true"] {
  border-color: var(--draw2-accent-strong);
  background: color-mix(
    in srgb,
    var(--draw2-accent-strong) 14%,
    var(--draw2-surface-input)
  );
  color: var(--draw2-text-strong);
}
#draw2WorkspaceFrame .draw2-mirror-mode-toggle > .draw2-ui-icon {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  color: var(--draw2-accent-strong);
}
#draw2WorkspaceFrame .draw2-mirror-mode-toggle > span {
  display: inline-block !important;
  opacity: 0.78;
  font-size: 0.62rem;
}
#draw2WorkspaceFrame .draw2-mirror-mode-toggle > strong {
  color: var(--draw2-text-strong);
  font: 800 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.03em;
}

/* The eraser projection is transparent outside its clipped footprint. Its
 * checker background therefore replaces only the pixels that would disappear
 * while the canonical canvas and undo history remain untouched. */
#draw2WorkspaceFrame #draw2ErasePreview {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background-color: var(--draw2-canvas-checker-a);
  background-image: repeating-conic-gradient(
    var(--draw2-canvas-checker-a) 0 25%,
    var(--draw2-canvas-checker-b) 0 50%
  );
  background-position: 0 0;
  background-size: calc(
    var(
      --draw2-checker-cell-size-display-x,
      var(--draw2-checker-cell-size-display, var(--draw2-checker-cell-size))
    ) * 2
  ) calc(
    var(
      --draw2-checker-cell-size-display-y,
      var(--draw2-checker-cell-size-display, var(--draw2-checker-cell-size))
    ) * 2
  );
}
#draw2WorkspaceFrame #draw2ErasePreview[hidden] {
  display: none !important;
}
#draw2WorkspaceFrame #draw2Overlay {
  z-index: 4;
}

@media (max-width: 700px) {
  #draw2WorkspaceFrame .draw2-mirror-mode-toggle {
    min-width: 72px;
    padding-inline: 6px;
  }
}

/* Audio workstation docking ------------------------------------------------
 * The first Audio paint stays intentionally small: Browser and Tracks are
 * visible, while Mixer/FX/Automation/Inspector can be added from +.  The
 * cards only project existing Audio state; they do not create waveforms or
 * Web Audio nodes. */
.draw2-audio-left-dock-resize-handle {
  display: none !important;
  pointer-events: none !important;
}
.draw2-audio-arranger-overview {
  display: flex;
  flex: 0 0 112px;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-bottom: 1px solid var(--draw2-border);
  background: #0f1520;
}
.draw2-audio-arranger-header {
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 3px 8px;
  border-bottom: 1px solid var(--draw2-border);
  background: #151d2b;
}
.draw2-audio-arranger-header > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.draw2-audio-arranger-header strong {
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-arranger-header output {
  flex: 0 0 auto;
  color: var(--draw2-text-muted);
  font: 600 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.draw2-audio-daw-toolbar {
  display: grid;
  flex: 0 0 42px;
  grid-template-columns: minmax(0, auto) minmax(150px, 1fr) minmax(150px, 1.2fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(88, 116, 151, 0.45);
  background: linear-gradient(180deg, #172337, #121a29);
}
.draw2-audio-daw-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.draw2-audio-track-add-select {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
}
.draw2-audio-track-add-select > .draw2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.draw2-audio-track-add-select select {
  width: 116px;
  min-width: 116px;
  min-height: 27px;
  padding: 0 6px;
  border: 1px solid rgba(97, 217, 255, 0.8);
  border-radius: 4px;
  background: linear-gradient(180deg, #1e7898, #15516f);
  color: #e9fbff;
  color-scheme: dark;
  cursor: pointer;
  font: 700 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.draw2-audio-track-add-select select:hover,
.draw2-audio-track-add-select select:focus-visible {
  border-color: #b8f0ff;
  background: linear-gradient(180deg, #2792b5, #1a6688);
  outline: none;
  box-shadow: 0 0 0 1px rgba(131, 221, 255, 0.35);
}
.draw2-audio-track-add-trigger {
  min-width: 92px;
  border-color: rgba(97, 217, 255, 0.8);
  background: linear-gradient(180deg, #1e7898, #15516f);
  color: #e9fbff;
}
.draw2-audio-track-add-trigger:hover,
.draw2-audio-track-add-trigger:focus-visible {
  border-color: #b8f0ff;
  background: linear-gradient(180deg, #2792b5, #1a6688);
  outline: none;
  box-shadow: 0 0 0 1px rgba(131, 221, 255, 0.35);
}
.draw2-audio-track-add-popover {
  position: fixed;
  z-index: 100;
  width: min(560px, calc(100vw - 24px));
  max-height: min(620px, calc(100dvh - 24px));
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(131, 221, 255, 0.7);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0, rgba(200, 139, 255, 0.16), transparent 38%),
    linear-gradient(145deg, #17263d, #0d1523 76%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(97, 217, 255, 0.12);
}
.draw2-audio-track-add-popover-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(111, 142, 181, 0.34);
}
.draw2-audio-track-add-popover-header > div {
  display: grid;
  gap: 3px;
}
.draw2-audio-track-add-popover-header strong {
  color: #f2f7ff;
  font-size: 0.78rem;
}
.draw2-audio-track-add-popover-close {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid rgba(111, 142, 181, 0.58);
  border-radius: 6px;
  background: #111c2c;
  color: #dcecff;
  cursor: pointer;
}
.draw2-audio-track-add-popover-close:hover,
.draw2-audio-track-add-popover-close:focus-visible {
  border-color: #ff9bb3;
  color: #ffffff;
  outline: none;
}
.draw2-audio-track-add-popover-help {
  margin: 8px 2px 10px;
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
  line-height: 1.45;
}
.draw2-audio-track-add-options {
  display: grid;
  gap: 10px;
}
.draw2-audio-track-add-section {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(111, 142, 181, 0.34);
  border-radius: 8px;
  background: rgba(12, 22, 36, 0.58);
}
.draw2-audio-track-add-section > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.draw2-audio-track-add-section > header strong {
  color: #e9f4ff;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.draw2-audio-track-add-section > header small {
  color: var(--draw2-text-muted);
  font-size: 0.52rem;
  text-align: right;
}
.draw2-audio-track-add-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 5px;
}
.draw2-audio-track-add-template {
  display: grid;
  min-width: 0;
  min-height: 44px;
  gap: 3px;
  justify-items: start;
  padding: 7px 8px;
  border: 1px solid rgba(111, 142, 181, 0.46);
  border-radius: 6px;
  background: linear-gradient(145deg, #192a43, #111c2c);
  color: #e9f4ff;
  cursor: pointer;
  text-align: left;
}
.draw2-audio-track-add-template:hover,
.draw2-audio-track-add-template:focus-visible {
  border-color: #83ddff;
  background: linear-gradient(145deg, #254666, #172b42);
  outline: none;
  box-shadow: 0 0 0 1px rgba(131, 221, 255, 0.28);
}
.draw2-audio-track-add-template[data-audio-track-add-tone="drums"] {
  border-left: 2px solid #ffbf72;
}
.draw2-audio-track-add-template[data-audio-track-add-tone="audio"] {
  border-left: 2px solid #61d9ff;
}
.draw2-audio-track-add-template strong {
  overflow: hidden;
  max-width: 100%;
  color: #ffffff;
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-track-add-template small {
  overflow: hidden;
  max-width: 100%;
  color: var(--draw2-text-muted);
  font-size: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-mode-deck-toolbar .draw2-audio-track-add-select select {
  width: 124px;
  min-width: 124px;
  min-height: 30px;
  padding-inline: 7px;
  border-color: rgba(111, 142, 181, 0.65);
  background: #1b2a40;
}
.draw2-mode-deck-toolbar .draw2-audio-track-add-select select:hover,
.draw2-mode-deck-toolbar .draw2-audio-track-add-select select:focus-visible {
  border-color: #83ddff;
  background: #263b59;
}
.draw2-audio-daw-action {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid rgba(111, 142, 181, 0.65);
  border-radius: 4px;
  background: #1b2a40;
  color: #d6e7fa;
  cursor: pointer;
  font: 700 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.draw2-audio-daw-action:hover,
.draw2-audio-daw-action:focus-visible {
  border-color: #83ddff;
  background: #263b59;
  color: #ffffff;
  outline: none;
  box-shadow: 0 0 0 1px rgba(131, 221, 255, 0.35);
}
.draw2-audio-daw-action.is-primary {
  border-color: rgba(97, 217, 255, 0.8);
  background: linear-gradient(180deg, #1e7898, #15516f);
  color: #e9fbff;
}
.draw2-audio-daw-action.is-danger {
  border-color: rgba(255, 141, 164, 0.52);
  color: #ffdbe2;
}
.draw2-audio-daw-divider {
  flex: 0 0 1px;
  height: 18px;
  margin-inline: 1px;
  background: rgba(142, 168, 201, 0.38);
}
.draw2-audio-daw-range-status {
  min-width: 0;
  overflow: hidden;
  color: #a9c5de;
  font: 600 0.57rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-bar-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.draw2-audio-bar-strip::before {
  flex: 0 0 auto;
  margin-right: 2px;
  color: #7695b3;
  content: "BARS";
  font: 700 0.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
}
.draw2-audio-bar-button {
  flex: 0 0 28px;
  min-height: 26px;
  padding: 0 4px;
  border: 1px solid rgba(111, 142, 181, 0.48);
  border-radius: 3px;
  background: #111b2c;
  color: #9db5ce;
  cursor: pointer;
  font: 800 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-bar-button:hover,
.draw2-audio-bar-button:focus-visible {
  border-color: #8de6ff;
  color: #ffffff;
  outline: none;
}
.draw2-audio-bar-button.is-selected {
  border-color: #c88bff;
  background: linear-gradient(180deg, #734ca1, #452b66);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(245, 224, 255, 0.22);
}
.draw2-audio-bar-strip-more {
  flex: 0 0 auto;
  color: #7797b7;
  font: 700 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-bar-button.is-anchor {
  border-color: #78ddff;
  box-shadow: 0 0 0 1px rgba(120, 221, 255, 0.3);
}
.draw2-audio-arranger-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.draw2-audio-arranger-playhead {
  position: absolute;
  top: 0;
  z-index: 6;
  width: 2px;
  min-width: 2px;
  height: 100%;
  border-left: 2px solid #f0c5ff;
  background: linear-gradient(
    180deg,
    rgb(240 197 255 / 34%),
    rgb(200 139 255 / 10%) 26%,
    rgb(200 139 255 / 0%)
  );
  box-shadow:
    0 0 0 1px rgb(200 139 255 / 30%),
    0 0 11px rgb(200 139 255 / 78%);
  pointer-events: none;
  transition: left 70ms linear;
  will-change: left;
}
.draw2-audio-arranger-playhead::before {
  position: absolute;
  top: 0;
  left: -6px;
  width: 10px;
  height: 7px;
  background: #f0c5ff;
  box-shadow: 0 0 8px rgb(200 139 255 / 78%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
}
.draw2-audio-arranger-playhead[hidden] {
  display: none;
}
.draw2-audio-arranger-ruler,
.draw2-audio-arranger-lane {
  display: grid;
  width: max-content;
  min-width: 100%;
}
.draw2-audio-arranger-ruler {
  min-height: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--draw2-border) 78%, transparent);
  background: #111a29;
}
.draw2-audio-arranger-label,
.draw2-audio-arranger-track-label {
  box-sizing: border-box;
  min-width: 0;
  padding: 3px 7px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--draw2-border) 80%, transparent);
  background: #111827;
  color: var(--draw2-text-muted);
  font: 700 0.54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
  white-space: nowrap;
}
.draw2-audio-arranger-ruler-cell {
  display: grid;
  min-width: 30px;
  min-height: 20px;
  align-items: center;
  padding-inline: 4px;
  border-right: 1px solid color-mix(in srgb, var(--draw2-border) 68%, transparent);
  color: var(--draw2-text-muted);
  font: 600 0.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-arranger-ruler-cell.is-bar {
  background: color-mix(in srgb, #c88bff 16%, #111a29);
  color: #ecd9ff;
}
.draw2-audio-arranger-ruler-cell.is-selected {
  background: color-mix(in srgb, #61d9ff 22%, #111a29);
  color: #e8fbff;
  box-shadow: inset 0 -2px 0 #61d9ff;
}
  .draw2-audio-arranger-lanes {
    min-height: 0;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(86, 119, 156, 0.08) 0 1px,
        transparent 1px 30px
      ),
      linear-gradient(180deg, rgba(18, 29, 45, 0.34), rgba(9, 14, 23, 0.22));
  }
.draw2-audio-arranger-lane {
  min-height: 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--draw2-border) 54%, transparent);
}
.draw2-audio-arranger-track-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--draw2-text-strong);
  font-size: 0.58rem;
  font-weight: 700;
}
.draw2-audio-arranger-track-label:hover,
.draw2-audio-arranger-track-label:focus-visible,
.draw2-audio-arranger-track-label.is-active {
  background: color-mix(in srgb, #c88bff 23%, #111827);
  color: #f5eaff;
  outline: none;
}
.draw2-audio-arranger-track-content {
  display: grid;
  min-height: 21px;
  align-items: center;
  gap: 2px;
  padding: 3px 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 29px,
    color-mix(in srgb, var(--draw2-border) 42%, transparent) 29px 30px
  );
}
.draw2-audio-arranger-clip {
  z-index: 1;
  min-width: 0;
  height: 15px;
  overflow: hidden;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, #c88bff 70%, var(--draw2-border));
  border-radius: 3px;
  background: linear-gradient(90deg, #8b58bd, #c88bff);
  color: #fff7ff;
  cursor: pointer;
  font: 800 0.5rem/13px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-arranger-clip:hover,
.draw2-audio-arranger-clip:focus-visible {
  border-color: #fff1ff;
  box-shadow: 0 0 0 1px #fff1ff;
  outline: none;
}

.draw2-audio-left-dock {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 6px;
  overflow: hidden;
  background: #111722;
}
.draw2-audio-left-dock[hidden],
.draw2-audio-dock-picker[hidden] {
  display: none !important;
}
.draw2-audio-left-dock-header {
  display: flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 3px 5px;
  border: 1px solid var(--draw2-border);
  border-radius: 4px;
  background: #171e2b;
}
.draw2-audio-left-dock-header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.draw2-audio-left-dock-header strong {
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-dock-add {
  display: inline-grid;
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--draw2-border);
  border-radius: 4px;
  background: #121a27;
  color: var(--draw2-text-muted);
  cursor: pointer;
}
.draw2-audio-dock-add:hover,
.draw2-audio-dock-add:focus-visible,
.draw2-audio-dock-add[aria-expanded="true"] {
  border-color: #c88bff;
  background: color-mix(in srgb, #c88bff 24%, #121a27);
  color: #f6eaff;
  outline: none;
}
.draw2-audio-dock-add .draw2-ui-icon {
  width: 16px;
  height: 16px;
}
.draw2-audio-dock-picker {
  position: absolute;
  z-index: 20;
  top: 42px;
  right: 5px;
  left: 5px;
  display: grid;
  gap: 3px;
  padding: 5px;
  border: 1px solid #c88bff;
  border-radius: 5px;
  background: #151d2b;
  box-shadow: 0 10px 22px rgb(0 0 0 / 36%);
}
.draw2-audio-dock-picker-item {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--draw2-text-strong);
  cursor: pointer;
  text-align: left;
}
.draw2-audio-dock-picker-item:hover,
.draw2-audio-dock-picker-item:focus-visible {
  border-color: #c88bff;
  background: color-mix(in srgb, #c88bff 18%, #151d2b);
  outline: none;
}
.draw2-audio-dock-picker-item small,
.draw2-audio-dock-card-title small {
  overflow: hidden;
  color: var(--draw2-text-muted);
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-dock-picker-empty {
  margin: 0;
  padding: 7px;
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
}
.draw2-audio-dock-panels {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: 5px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.draw2-audio-dock-card {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--draw2-border);
  border-radius: 4px;
  background: #151d2b;
}
.draw2-audio-dock-card-header {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 28px;
  padding: 2px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--draw2-border) 78%, transparent);
}
.draw2-audio-dock-card-close {
  display: inline-grid;
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--draw2-text-muted);
  cursor: pointer;
}
.draw2-audio-dock-card-close:hover,
.draw2-audio-dock-card-close:focus-visible {
  border-color: var(--draw2-border);
  background: #121a27;
  color: #f4eaff;
  outline: none;
}
.draw2-audio-dock-card-close .draw2-ui-icon {
  width: 13px;
  height: 13px;
}
.draw2-audio-dock-card-title {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 1px;
}
.draw2-audio-dock-card-body {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 6px;
}
.draw2-audio-dock-card-body input {
  width: 100%;
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid var(--draw2-border);
  border-radius: 3px;
  background: #0f1520;
  color: var(--draw2-text-strong);
  font-size: 0.62rem;
}
.draw2-audio-dock-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}
.draw2-audio-dock-category-grid button,
.draw2-audio-dock-open-button,
.draw2-audio-dock-track {
  min-width: 0;
  min-height: 27px;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--draw2-border) 82%, transparent);
  border-radius: 3px;
  background: #121a27;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font-size: 0.58rem;
  text-align: left;
}
.draw2-audio-dock-category-grid button:hover,
.draw2-audio-dock-category-grid button:focus-visible,
.draw2-audio-dock-open-button:hover,
.draw2-audio-dock-open-button:focus-visible,
.draw2-audio-dock-track:hover,
.draw2-audio-dock-track:focus-visible,
.draw2-audio-dock-track.is-active {
  border-color: #c88bff;
  background: color-mix(in srgb, #c88bff 18%, #121a27);
  color: #f4eaff;
  outline: none;
}
.draw2-audio-dock-track-list {
  display: grid;
  gap: 3px;
}
.draw2-audio-dock-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.draw2-audio-dock-track span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-dock-track small {
  flex: 0 0 auto;
  color: var(--draw2-text-muted);
  font-size: 0.5rem;
}
.draw2-audio-dock-track-midi {
  border-left: 2px solid #c88bff;
}
.draw2-audio-dock-body-text {
  margin: 0;
  color: var(--draw2-text-muted);
  font-size: 0.58rem;
  line-height: 1.35;
}
.draw2-audio-right-tools {
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: 2px 5px;
  border-bottom: 1px solid var(--draw2-border);
  background: #111827;
}
.draw2-audio-dock-add-right {
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  gap: 4px;
  padding-inline: 6px;
  font-size: 0.56rem;
}
.draw2-audio-dock-add-right .draw2-ui-icon {
  width: 13px;
  height: 13px;
}

/* The Master bus stays visible as a compact safety readout while the full
 * Inspector or Library surface is selected. The Master tab replaces this
 * strip with the detailed meter and controls. */
.draw2-audio-compact-master {
  display: grid;
  flex: 0 0 58px;
  grid-template-columns: minmax(56px, 0.8fr) 34px minmax(94px, 1.2fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 58px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--draw2-border);
  background:
    linear-gradient(90deg, rgb(200 139 255 / 8%), transparent 58%),
    #101827;
}
.draw2-audio-compact-master-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.draw2-audio-compact-master-title strong {
  overflow: hidden;
  color: var(--draw2-text-strong);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-compact-meter {
  display: grid;
  grid-template-columns: repeat(2, 12px);
  align-items: end;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
}
.draw2-audio-compact-meter .draw2-audio-meter-channel {
  display: grid;
  grid-template-rows: 10px 28px;
  align-items: end;
  gap: 2px;
  min-height: 40px;
}
.draw2-audio-compact-meter .draw2-audio-meter-channel > b {
  font-size: 0.42rem;
  line-height: 1;
}
.draw2-audio-compact-meter .draw2-audio-meter-bar {
  width: 8px;
  height: 28px;
  margin: 0 auto;
}
.draw2-audio-compact-master-readouts {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--draw2-text-muted);
  font-size: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.draw2-audio-compact-master-readouts span {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.draw2-audio-compact-master-readouts b {
  color: var(--draw2-text-strong);
}
#draw2WorkspaceFrame[data-creator-mode="AUDIO"][data-audio-right-panel="master"]
  .draw2-audio-compact-master {
  display: none;
}

/* Diagnostics and the full FX list are useful, but they should not compete
 * with the selected track controls on every first paint. */
.draw2-audio-inspector-details {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  border: 1px solid #2a3850;
  border-radius: 5px;
  background: rgb(12 18 28 / 56%);
}
.draw2-audio-inspector-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 5px 8px;
  color: var(--draw2-text-strong);
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 800;
  list-style: none;
}
.draw2-audio-inspector-details > summary::-webkit-details-marker {
  display: none;
}
.draw2-audio-inspector-details > summary::after {
  color: var(--draw2-text-muted);
  content: "+";
  font-size: 0.8rem;
  line-height: 1;
}
.draw2-audio-inspector-details[open] > summary::after {
  content: "−";
}
.draw2-audio-inspector-details > summary small {
  margin-left: auto;
  color: var(--draw2-text-muted);
  font-size: 0.5rem;
  font-weight: 500;
}
.draw2-audio-inspector-details > .draw2-audio-right-section {
  margin: 0 6px 6px;
  padding: 7px;
  border: 1px solid var(--draw2-border-subtle);
  border-radius: 4px;
  background: rgb(15 23 36 / 78%);
}

@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    --draw2-audio-left-width: clamp(190px, 17vw, 250px);
    grid-template-columns:
      minmax(190px, var(--draw2-audio-left-width))
      minmax(0, 1fr)
      minmax(280px, var(--draw2-audio-right-width, 360px)) !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceLeftDock:not([hidden]) {
    display: flex !important;
    grid-area: left !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    gap: 8px !important;
    overflow: hidden !important;
    visibility: visible !important;
    pointer-events: auto !important;
    border-right: 1px solid var(--draw2-border-subtle) !important;
    background: #0f1520 !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceLeftDock
    > .draw2-workspace-toolbar,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceLeftDock
    > .draw2-mobile-drawer-header {
    display: none !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioLeftDock:not([hidden]) {
    display: flex !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace {
    inset: 8px !important;
  }
}

@media (max-width: 1119px) {
  .draw2-audio-arranger-overview {
    flex-basis: 92px;
  }
  .draw2-audio-daw-toolbar {
    flex-basis: 74px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 34px 28px;
    gap: 4px;
    padding-block: 4px;
  }
  .draw2-audio-daw-range-status {
    display: none;
  }
  .draw2-audio-bar-strip {
    justify-content: flex-start;
  }
}

/* Audio workstation hierarchy -------------------------------------------
 * The selected Piano/Wave/Drum/Sampler/Draw editor owns the center. The
 * unified musical timeline is mounted in the permanent lower deck, alongside
 * the Draw frame lane, while the existing Arranger projection stays mounted
 * only for its render/event contract. */
@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    grid-template-rows:
      64px minmax(0, 1fr) clamp(230px, 32dvh, 340px)
      var(--draw2-statusbar-height) !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceTimelineRegion {
    display: flex !important;
    min-height: 230px !important;
    padding: 6px 8px 4px !important;
    overflow: hidden !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace {
    display: grid !important;
    grid-template-rows: 42px minmax(0, 1fr) !important;
    align-content: stretch !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-audio-arranger-overview {
    display: none !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-audio-editor-header {
    grid-row: 1 !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace
    > .draw2-audio-panel,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace
    > .draw2-audio-editor-surface {
    grid-row: 2 !important;
    min-height: 0 !important;
  }

  /* Keep the Draw artwork lane visible at the bottom of the central Arranger
   * while the musical track list grows. It remains part of the same
   * scrollable timeline, but does not disappear behind the Piano Roll. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-audio-arranger-draw-lane {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    background: #131b2b !important;
    box-shadow: 0 -5px 12px rgb(5 9 18 / 48%);
  }

  /* Open a detail surface from the + dock without bringing back a second
   * composition timeline on the default Audio view. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is(
      [data-mode-deck-tab="audio-library"],
      [data-mode-deck-tab="audio-mixer"],
      [data-mode-deck-tab="audio-automation"],
      [data-mode-deck-tab="audio-fx"],
      [data-mode-deck-tab="audio-markers"],
      [data-mode-deck-tab="audio-settings"]
    ) {
    grid-template-rows:
      64px minmax(0, 1fr) clamp(190px, 27dvh, 270px)
      var(--draw2-statusbar-height) !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is(
      [data-mode-deck-tab="audio-library"],
      [data-mode-deck-tab="audio-mixer"],
      [data-mode-deck-tab="audio-automation"],
      [data-mode-deck-tab="audio-fx"],
      [data-mode-deck-tab="audio-markers"],
      [data-mode-deck-tab="audio-settings"]
    )
    #draw2WorkspaceTimelineRegion {
    display: flex !important;
  }

  .draw2-audio-arranger-header {
    flex-basis: 36px !important;
    min-height: 36px !important;
    padding-inline: 10px !important;
    border-bottom-color: color-mix(in srgb, #61d9ff 35%, var(--draw2-border)) !important;
    background: linear-gradient(90deg, #182437, #151d2c 58%, #202039) !important;
  }
  .draw2-audio-arranger-header strong {
    font-size: 0.74rem !important;
    letter-spacing: 0.03em;
  }
  .draw2-audio-arranger-header output {
    color: #9edfff !important;
    font-size: 0.6rem !important;
  }
  .draw2-audio-daw-toolbar {
    flex-basis: 42px;
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
    grid-template-rows: 30px;
    gap: 5px;
    padding-inline: 10px;
  }
  .draw2-audio-daw-actions {
    overflow-x: auto;
  }
  .draw2-audio-daw-range-status {
    grid-column: 2;
    grid-row: 1;
  }
  .draw2-audio-arranger-ruler {
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 24px !important;
    background: #101b2c !important;
  }
  .draw2-audio-arranger-ruler-cell {
    min-height: 24px !important;
    align-items: center;
    border-right-color: rgba(91, 137, 184, 0.28) !important;
    font-size: 0.56rem !important;
  }
  .draw2-audio-arranger-lane {
    min-height: 48px !important;
    grid-template-rows: 48px !important;
    border-bottom-color: rgba(89, 110, 143, 0.38) !important;
  }
  .draw2-audio-arranger-track-label {
    padding-inline: 10px !important;
    background: linear-gradient(90deg, #141e2e, #111827) !important;
    font-size: 0.62rem !important;
  }
  .draw2-audio-arranger-track-content {
    min-height: 48px !important;
    align-items: center !important;
    padding: 6px 0 !important;
    background-image: repeating-linear-gradient(
      90deg,
      transparent 0 29px,
      rgba(94, 125, 163, 0.23) 29px 30px
    ) !important;
  }
  .draw2-audio-arranger-clip {
    position: relative;
    display: block;
    height: 36px !important;
    padding: 0 !important;
    border-color: rgba(108, 220, 255, 0.82) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #236b8f, #17415f) !important;
    box-shadow: inset 0 1px 0 rgba(223, 249, 255, 0.22);
    line-height: 1 !important;
  }
  .draw2-audio-arranger-clip:not(.is-audio-clip) {
    border-color: rgba(200, 139, 255, 0.72) !important;
    background: linear-gradient(180deg, #734ca1, #452b66) !important;
  }
  .draw2-audio-arranger-waveform {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.96;
  }
  .draw2-audio-arranger-clip.is-midi-clip {
    border-color: rgba(200, 139, 255, 0.78) !important;
    background: linear-gradient(180deg, #714a9e, #39264f) !important;
  }
  .draw2-audio-arranger-midi-waveform {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.96;
  }
  .draw2-audio-arranger-clip-name {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 100%;
    padding: 4px 7px;
    overflow: hidden;
    color: #e7f8ff;
    font: 800 0.54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: left;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
    white-space: nowrap;
  }
  .draw2-audio-arranger-empty {
    grid-column: 1 / -1;
    align-self: center;
    padding-inline: 8px;
    color: rgba(152, 173, 201, 0.64);
    font: 700 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.08em;
  }
}

/* Draw's first glance is the canvas and its tools. Keep global recovery,
   export, command-palette and appearance controls available from the menu.
   Playback stays in the shared command bar; the duplicate Timeline control
   is hidden with the other mode-local transport controls below. */
#draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
  .draw2-workspace-command-bar
  > [data-workspace-command="panel-export"],
#draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
  .draw2-workspace-command-bar
  > [data-workspace-command="command-palette"],
#draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
  .draw2-workspace-command-bar
  > [data-workspace-command="kill-switch"],
#draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
  .draw2-workspace-command-bar
  > .draw2-theme-control,
#draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
  .draw2-workspace-command-bar
  > .draw2-language-control {
  display: none !important;
}

/* The right-dock plus button creates a second panel surface. Draw keeps
   panel access in the grouped Details menu and exposes only the active
   contextual dock here. */
#draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
  #draw2WorkspaceAddPanel {
  display: none !important;
}

/* Internal readiness text is useful for diagnostics but not for the artist's
   first glance. Action feedback remains available in the bottom statusbar. */
#draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
  #draw2WorkspaceStatus {
  display: none !important;
}

/* The sync indicator already communicates the local/online state. Remove
   the second local-save badge from the Draw status line so it is not read as
   a duplicated system status. */
#draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]
  .draw2-statusbar-save {
  display: none !important;
}

/* Audio owns the composition surface. Its toolbar is a Draw-only control
   rail, so keeping it mounted but hidden avoids pointer and layout cost while
   leaving the Audio transport and timeline as the only editing surfaces. */
#draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-workspace-toolbar,
#draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-mobile-toolbar,
#draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-tool-studio,
#draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-tool-options {
  display: none !important;
}

/* Draw rail finishing ----------------------------------------------------
 * Mode buttons are navigation, not cards. Keep their hit areas and current
 * placement while removing the heavy plate and fixing the old 40px child in
 * a 38px content box that clipped the lower edge. */

/* One transport owner per mode surface. The Global mode button is the only
 * main Play/Pause action; mini preview intentionally keeps its local mirror.
 * Internal controls stay mounted so existing mode engines retain one command
 * target without adding duplicate visible buttons. */
#draw2TogglePlayback,
#draw2AssetBuilderPreviewPlay,
#draw2AudioPanelPlay,
#draw2GameDeckPlay,
#draw2AudioDeckPlay,
#draw2AudioChipPlay {
  display: none !important;
}

@media (min-width: 701px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    #draw2CreatorModeBar {
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 2px !important;
    overflow: visible !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    #draw2CreatorModeBar
    > .draw2-creator-mode,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    #draw2CreatorModeBar
    > .draw2-creator-mode.is-active {
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    overflow: visible !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    #draw2CreatorModeBar
    > .draw2-creator-mode.is-active {
    box-shadow: inset 0 -2px 0
      var(--draw2-mode-accent, var(--draw2-accent-strong)) !important;
  }

  /* FPS and Onion share the 30px tab rail. Their former 32px/42px overrides
     overflowed that rail and covered the readout below it. */
  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2TimelineSecondaryControls {
    display: grid !important;
    grid-template-columns: 78px 28px 28px !important;
    align-items: center !important;
    justify-items: stretch !important;
    flex: 0 0 138px !important;
    width: 138px !important;
    min-width: 138px !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 1px 2px !important;
    gap: 2px !important;
    overflow: visible !important;
  }

  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2TimelineSecondaryControls
    .draw2-timeline-rate,
  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2TimelineSecondaryControls
    #draw2ToggleOnion,
  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2TimelineSecondaryControls
    > .draw2-timeline-onion-options,
  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2TimelineSecondaryControls
    > .draw2-timeline-onion-options
    > summary {
    box-sizing: border-box !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
  }

  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2TimelineSecondaryControls
    .draw2-timeline-rate {
    display: grid !important;
    grid-template-columns: 20px 54px !important;
    align-items: center !important;
    column-gap: 4px !important;
    flex-basis: 78px !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }

  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2TimelineSecondaryControls
    .draw2-timeline-rate
    > .draw2-sr-only {
    position: static !important;
    display: block !important;
    width: 20px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
    line-height: 28px !important;
    text-align: right !important;
  }

  #draw2WorkspaceFrame[data-creator-mode="DRAW"]
    #draw2TimelineSecondaryControls
    .draw2-timeline-rate
    select {
    width: 54px !important;
    min-width: 54px !important;
    height: 28px !important;
    min-height: 28px !important;
  }

  /* Use the empty half of the Animation Range panel as the saved-range list.
     The form and list now remain inside the rail instead of forming one long,
     clipped horizontal row. */
  #draw2TimelinePanelTags {
    min-height: 0 !important;
    overflow: auto !important;
  }

  #draw2TimelinePanelTags .draw2-timeline-single-panel {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: 8px;
    overflow: auto;
  }

  #draw2TimelinePanelTags .draw2-timeline-creator-group {
    display: grid;
    grid-template-columns: minmax(360px, 1.15fr) minmax(260px, 0.85fr);
    grid-template-areas:
      "heading heading"
      "form list";
    gap: 6px 12px;
    align-items: start;
    min-width: 0;
  }

  #draw2TimelinePanelTags .draw2-timeline-creator-group > strong {
    grid-area: heading;
  }

  #draw2TimelinePanelTags .draw2-timeline-creator-form {
    grid-area: form;
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 58px 58px 30px 30px;
    gap: 5px;
    min-width: 0;
  }

  #draw2TimelinePanelTags .draw2-timeline-creator-form > input,
  #draw2TimelinePanelTags .draw2-timeline-creator-form > .draw2-button,
  #draw2TimelinePanelTags .draw2-timeline-creator-check {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 30px;
    min-height: 30px;
  }

  #draw2TimelinePanelTags .draw2-creator-meta-list {
    grid-area: list;
    min-width: 0;
    min-height: 30px;
    max-height: none;
    margin: 0;
    overflow: visible;
  }

  #draw2TimelinePanelTags .draw2-creator-meta-row {
    box-sizing: border-box;
    min-height: 30px;
    padding: 3px 5px;
    border: 1px solid var(--draw2-border-subtle);
    border-radius: var(--draw2-radius-sm);
    background: color-mix(
      in srgb,
      var(--draw2-surface-raised) 76%,
      transparent
    );
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  #draw2TimelinePanelTags .draw2-timeline-creator-group {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "form" "list";
  }
}

.draw2-audio-arranger-draw-frame-content,
.draw2-audio-draw-frame-cells {
  overflow: hidden;
  gap: 1px !important;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 29px,
      rgba(198, 139, 255, 0.18) 29px 30px
    ) !important;
}
.draw2-audio-arranger-draw-frame,
.draw2-audio-draw-frame-cell {
  box-sizing: border-box;
  display: block;
  min-width: 1px;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(200, 139, 255, 0.5);
  border-radius: 2px;
  background:
    linear-gradient(
      180deg,
      rgba(208, 151, 255, 0.86),
      rgba(112, 66, 157, 0.9)
    );
  color: #fff5ff;
  cursor: pointer;
  font: 800 0.46rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}
.draw2-audio-arranger-draw-frame:hover,
.draw2-audio-arranger-draw-frame:focus-visible,
.draw2-audio-draw-frame-cell:hover,
.draw2-audio-draw-frame-cell:focus-visible {
  z-index: 3;
  border-color: #fff2ff;
  box-shadow: 0 0 0 1px #fff2ff, 0 0 10px rgba(200, 139, 255, 0.42);
  outline: none;
}
.draw2-audio-arranger-draw-frame.is-active,
.draw2-audio-draw-frame-cell.is-active {
  border-color: #f6d6ff;
  background:
    linear-gradient(
      180deg,
      #f0c6ff,
      #9c5cc6
    );
  box-shadow: 0 0 0 1px rgba(249, 223, 255, 0.7);
}
.draw2-audio-arranger-draw-frame.is-chopped,
.draw2-audio-draw-frame-cell.is-chopped {
  color: transparent;
}
.draw2-audio-draw-frame-cells {
  min-height: 34px;
  align-self: stretch;
  padding: 4px 0 !important;
}
.draw2-audio-arranger-draw-frame-content {
  min-height: 30px;
  align-self: stretch;
  padding: 4px 0 !important;
}
.draw2-audio-draw-frame-label {
  color: #ead7ff !important;
}

/* The Audio editor is musical first. Draw remains a synchronized visual
 * lane/monitor, while the arranger and Piano Roll read as bars and beats. */
.draw2-audio-daw-sync {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-left: 2px;
}
.draw2-audio-daw-sync-status {
  color: #9fe8ff;
  font: 800 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.draw2-audio-daw-sync-status.is-playing {
  color: #f0c5ff;
  text-shadow: 0 0 8px rgb(200 139 255 / 72%);
}
.draw2-audio-daw-sync-status.is-recovering {
  color: #ffe1a8;
}
.draw2-audio-arranger-playhead.is-beat-pulse,
.draw2-audio-midi-playhead.is-beat-pulse {
  animation: draw2-audio-beat-pulse 260ms ease-out;
}
.draw2-audio-midi-range {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 10rem;
  overflow: hidden;
  color: #bcd6f0;
  font: 700 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes draw2-audio-beat-pulse {
  0% {
    filter: brightness(1.65);
  }
  100% {
    filter: brightness(1);
  }
}
.draw2-audio-daw-sync-button {
  min-height: 25px;
  padding: 0 7px;
  border: 1px solid rgba(120, 221, 255, 0.58);
  border-radius: 4px;
  background: #16283d;
  color: #ccefff;
  cursor: pointer;
  font: 800 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.draw2-audio-daw-sync-button:hover,
.draw2-audio-daw-sync-button:focus-visible,
.draw2-audio-daw-sync-button.is-active {
  border-color: #b4f1ff;
  background: linear-gradient(180deg, #27617d, #18435b);
  color: #ffffff;
  outline: none;
  box-shadow: 0 0 0 1px rgba(180, 241, 255, 0.24);
}
.draw2-audio-musical-position {
  min-width: 42px;
  color: #f2d4ff;
  font: 800 0.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  white-space: nowrap;
}
#draw2WorkspaceFrame[data-creator-mode="AUDIO"][data-audio-draw-monitor="true"]
  .draw2-mini-preview {
  display: block !important;
  z-index: 30;
  top: 16px !important;
  right: 16px !important;
  width: 188px !important;
  height: 188px !important;
  padding: 4px !important;
  border-color: rgba(135, 230, 255, 0.72);
  background: rgba(10, 17, 29, 0.94);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(135, 230, 255, 0.12);
  pointer-events: none;
}
#draw2WorkspaceFrame[data-creator-mode="AUDIO"][data-audio-draw-monitor="true"]
  .draw2-mini-preview canvas {
  width: 180px !important;
  height: 180px !important;
}
@media (max-width: 1119px) {
  .draw2-audio-daw-sync-status {
    display: none;
  }
  .draw2-audio-daw-sync {
    gap: 3px;
  }
  .draw2-audio-midi-range {
    max-width: 8.5rem;
  }
  #draw2WorkspaceFrame[data-creator-mode="AUDIO"][data-audio-draw-monitor="true"]
    .draw2-mini-preview {
    top: 8px !important;
    right: 8px !important;
    width: 132px !important;
    height: 132px !important;
  }
  #draw2WorkspaceFrame[data-creator-mode="AUDIO"][data-audio-draw-monitor="true"]
    .draw2-mini-preview canvas {
    width: 124px !important;
    height: 124px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw2-audio-arranger-playhead,
  .draw2-audio-midi-playhead {
    transition: none;
  }
  .draw2-audio-arranger-playhead.is-beat-pulse,
  .draw2-audio-midi-playhead.is-beat-pulse {
    animation: none;
  }
}

/* Keep the command row and the always-on clock bridge in separate grid cells.
 * The arranger can become narrower than the browser viewport when the right
 * dock is open, so the range readout must never sit on top of Monitor. */
.draw2-audio-daw-toolbar {
  flex-basis: 74px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 30px 28px;
  align-items: center;
}
.draw2-audio-daw-actions {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.draw2-audio-daw-actions .draw2-audio-track-add-trigger {
  position: sticky;
  right: 0;
  z-index: 3;
  flex: 0 0 auto;
  box-shadow: -8px 0 10px rgba(18, 35, 55, 0.92);
}
.draw2-audio-daw-sync {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  max-width: 100%;
}
.draw2-audio-daw-range-status {
  grid-column: 1;
  grid-row: 2;
}
.draw2-audio-bar-strip {
  grid-column: 2;
  grid-row: 2;
  max-width: 100%;
}
@media (max-width: 1119px) {
  .draw2-audio-daw-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 34px 28px;
  }
  .draw2-audio-daw-range-status {
    display: none;
  }
  .draw2-audio-bar-strip {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

/* Piano Roll time-axis zoom: the first paint stays at one measure, while
 * Ctrl/Meta + wheel changes only horizontal musical spacing. */
.draw2-audio-midi-zoom {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding-left: 4px;
  border-left: 1px solid rgba(149, 162, 190, 0.28);
  color: var(--draw2-text-muted);
  font-variant-numeric: tabular-nums;
}
.draw2-audio-midi-velocity {
  display: inline-flex;
  flex: 0 1 132px;
  align-items: center;
  gap: 5px;
  min-width: 96px;
  color: var(--draw2-text-muted);
  font: 700 0.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
}
.draw2-audio-midi-velocity input {
  width: 74px;
  min-width: 0;
  accent-color: #c88bff;
  cursor: grab;
}
.draw2-audio-midi-velocity input:active {
  cursor: grabbing;
}
.draw2-audio-midi-velocity output {
  min-width: 2.2rem;
  color: var(--draw2-text-strong);
  text-align: right;
  letter-spacing: 0;
}
.draw2-audio-midi-actions {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-left: 4px;
  border-left: 1px solid rgba(149, 162, 190, 0.28);
}
.draw2-audio-midi-actions .draw2-button {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 0.55rem;
  white-space: nowrap;
}
.draw2-audio-midi-zoom .draw2-button {
  width: 28px;
  min-width: 28px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  line-height: 1;
}
#draw2AudioMidiZoomValue {
  min-width: 42px;
  color: var(--draw2-text-strong);
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 700px) {
  .draw2-audio-animation-guide {
    gap: 6px;
  }
  .draw2-audio-midi-zoom {
    padding-left: 2px;
  }
  .draw2-audio-midi-zoom .draw2-button {
    width: 26px;
    min-width: 26px;
  }
  .draw2-audio-midi-velocity {
    flex-basis: 104px;
    min-width: 88px;
  }
  .draw2-audio-midi-velocity input {
    width: 52px;
  }
  .draw2-audio-midi-actions {
    max-width: 100%;
    overflow-x: auto;
  }
  .draw2-audio-midi-actions .draw2-button {
    padding-inline: 5px;
  }
  #draw2AudioMidiZoomValue {
    min-width: 36px;
  }
}

/* Keep the Piano Roll command strip readable when the right dock narrows the
 * central editor.  The controls remain in one place, but each group gets a
 * stable grid cell instead of competing for one flex line. */
.draw2-audio-animation-guide {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(145px, 1fr) minmax(120px, 1fr) auto;
  grid-template-rows: 24px 30px 14px;
  align-items: center;
  gap: 4px 8px;
  min-height: 76px;
  padding: 5px 6px;
  overflow: hidden;
}
.draw2-audio-animation-guide > span {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-animation-guide > label:not(.draw2-audio-midi-velocity) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.draw2-audio-animation-guide > label:not(.draw2-audio-midi-velocity) input {
  width: 100%;
}
.draw2-audio-animation-guide .draw2-audio-midi-zoom {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.draw2-audio-animation-guide .draw2-audio-midi-range {
  grid-column: 1;
  grid-row: 2;
  max-width: none;
}
.draw2-audio-animation-guide .draw2-audio-midi-velocity {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: none;
}
.draw2-audio-animation-guide .draw2-audio-midi-velocity input {
  flex: 1 1 auto;
  width: auto;
}
.draw2-audio-animation-guide .draw2-audio-midi-actions {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
.draw2-audio-animation-guide > .draw2-audio-midi-status {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .draw2-audio-animation-guide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 20px 28px 28px 14px;
    min-height: 98px;
  }
  .draw2-audio-animation-guide > span {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .draw2-audio-animation-guide > label:not(.draw2-audio-midi-velocity) {
    grid-column: 1;
    grid-row: 2;
  }
  .draw2-audio-animation-guide .draw2-audio-midi-zoom {
    grid-column: 2;
    grid-row: 2;
  }
  .draw2-audio-animation-guide .draw2-audio-midi-range {
    grid-column: 1;
    grid-row: 3;
  }
  .draw2-audio-animation-guide .draw2-audio-midi-velocity {
    grid-column: 2;
    grid-row: 3;
  }
  .draw2-audio-animation-guide .draw2-audio-midi-actions {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: stretch;
  }
  .draw2-audio-animation-guide > .draw2-audio-midi-status {
    grid-row: 5;
  }
}

/* Audio channel surfaces --------------------------------------------------
 * The Arranger keeps the signal controls next to the musical lane. These
 * controls intentionally reuse the same Mixer state and knob language as the
 * Inspector, so a value never feels like a decorative mock control. */
.draw2-audio-arranger-lane:not(.draw2-audio-arranger-draw-lane) {
  min-height: 58px !important;
  grid-template-rows: 58px !important;
}
.draw2-audio-arranger-track-label {
  display: grid;
  grid-template-rows: 20px minmax(0, 1fr);
  align-items: stretch;
  gap: 2px;
  min-height: 58px !important;
  padding: 4px 6px;
  border-right-color: color-mix(
    in srgb,
    var(--draw2-audio-track-accent, #64738e) 48%,
    var(--draw2-border)
  );
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--draw2-audio-track-accent, #64738e) 12%, #111827),
      #101827 82%
    );
}
.draw2-audio-arranger-track-label:hover,
.draw2-audio-arranger-track-label:focus-within,
.draw2-audio-arranger-track-label.is-active {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--draw2-audio-track-accent, #c88bff) 26%, #182235),
      #111827 86%
    );
  box-shadow: inset 2px 0 0 var(--draw2-audio-track-accent, #c88bff);
}
.draw2-audio-arranger-track-select {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--draw2-text-strong);
  cursor: pointer;
  font: 800 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
}
.draw2-audio-arranger-track-select:hover,
.draw2-audio-arranger-track-select:focus-visible {
  color: #ffffff;
  outline: none;
}
.draw2-audio-track-heading {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.draw2-audio-track-heading .draw2-audio-arranger-track-select {
  flex: 1 1 auto;
  width: 0;
}
.draw2-audio-track-delete {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 1px solid color-mix(in srgb, #ff8b9d 60%, #34425b);
  border-radius: 4px;
  background: color-mix(in srgb, #ff667d 12%, #101827);
  color: #ffb6c1;
  cursor: pointer;
  font: 900 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-track-delete:hover,
.draw2-audio-track-delete:focus-visible {
  border-color: #ff8b9d;
  background: #6d2a43;
  color: #ffffff;
  outline: none;
  box-shadow: 0 0 8px rgb(255 102 125 / 28%);
}
.draw2-audio-inline-track-icon {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid color-mix(
    in srgb,
    var(--draw2-audio-track-accent, #c88bff) 72%,
    #33425b
  );
  border-radius: 4px;
  background: color-mix(
    in srgb,
    var(--draw2-audio-track-accent, #c88bff) 20%,
    #101827
  );
  color: var(--draw2-audio-track-accent, #c88bff);
}
.draw2-audio-inline-track-icon > .draw2-ui-icon {
  width: 11px;
  height: 11px;
}
.draw2-audio-inline-track-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-arranger-track-select small {
  color: var(--draw2-text-muted);
  font: 700 0.42rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-inline-mixer {
  display: flex;
  align-items: end;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}
.draw2-audio-inline-mixer-button {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 20px;
  padding: 0;
  border: 1px solid #34425b;
  border-radius: 3px;
  background: #101827;
  color: var(--draw2-text-muted);
  cursor: pointer;
  font: 800 0.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-inline-mixer-button:hover,
.draw2-audio-inline-mixer-button:focus-visible,
.draw2-audio-inline-mixer-button.is-active {
  border-color: var(--draw2-audio-track-accent, #c88bff);
  background: color-mix(
    in srgb,
    var(--draw2-audio-track-accent, #c88bff) 25%,
    #111827
  );
  color: #ffffff;
  outline: none;
  box-shadow: 0 0 8px color-mix(
    in srgb,
    var(--draw2-audio-track-accent, #c88bff) 28%,
    transparent
  );
}
.draw2-audio-inline-mixer-control.draw2-audio-mixer-control {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  grid-template-rows: 10px 22px;
  flex: 0 0 28px;
  gap: 0;
  min-width: 28px;
  min-height: 32px;
  align-items: center;
}
.draw2-audio-inline-mixer-heading {
  color: var(--draw2-text-muted);
  font: 900 0.45rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-inline-mixer-control > output {
  min-width: 0;
  overflow: hidden;
  color: var(--draw2-text-strong);
  font: 700 0.42rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-inline-mixer-control .draw2-audio-knob {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  border-color: color-mix(
    in srgb,
    var(--draw2-audio-track-accent, #c88bff) 52%,
    #455775
  );
  background:
    radial-gradient(circle at 50% 45%, #2b3850 0 38%, transparent 39%),
    conic-gradient(
      from 225deg,
      var(--draw2-audio-track-accent, #c88bff) 0 25%,
      #5f7192 25% 75%,
      #27364d 75% 100%
    );
  box-shadow: inset 0 0 0 2px #121a27, 0 2px 5px rgb(0 0 0 / 32%);
}
.draw2-audio-inline-mixer-control .draw2-audio-knob::before {
  inset: 4px;
}
.draw2-audio-inline-mixer-control .draw2-audio-knob i {
  top: 3px;
  height: 8px;
  transform-origin: 50% 8px;
}
.draw2-audio-inline-mixer-control input[type="range"] {
  position: absolute;
  z-index: 2;
  inset: 10px 0 0;
  width: 100%;
  height: 22px;
  min-width: 0;
  opacity: 0;
  cursor: grab;
}
.draw2-audio-inline-mixer-control input[type="range"]:active {
  cursor: grabbing;
}
.draw2-audio-inline-mixer-control:focus-within .draw2-audio-knob {
  border-color: #ffffff;
  box-shadow: inset 0 0 0 2px #121a27, 0 0 0 2px color-mix(
    in srgb,
    var(--draw2-audio-track-accent, #c88bff) 32%,
    transparent
  );
}
.draw2-audio-inline-meter {
  position: relative;
  display: block;
  flex: 0 0 4px;
  width: 4px;
  height: 22px;
  overflow: hidden;
  border: 1px solid #33425b;
  border-radius: 999px;
  background: #0a111d;
}
.draw2-audio-inline-meter i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(180deg, #ffca7a, #7de3b1 58%, #4ecbff);
  box-shadow: 0 0 5px rgb(125 227 177 / 68%);
}
[data-audio-transport-state="PLAYING"] .draw2-audio-inline-meter i,
[data-audio-transport-state="PLAYING"] .draw2-audio-mixer-activity i {
  animation: draw2-audio-channel-meter 520ms ease-in-out infinite alternate;
}
@keyframes draw2-audio-channel-meter {
  from { height: 34%; }
  to { height: 88%; }
}

/* The optional Mixer deck reads as a console: channel identity, activity,
 * knobs and routing are grouped into one resilient row. */
.draw2-audio-mixer-rows {
  gap: 7px;
  padding: 3px;
}
.draw2-audio-mixer-row {
  position: relative;
  grid-template-columns:
    minmax(150px, 1fr) 30px 30px minmax(72px, 94px) minmax(82px, 108px)
    minmax(108px, 154px);
  min-height: 76px;
  flex-basis: 76px;
  padding: 7px 8px;
  border-color: color-mix(
    in srgb,
    var(--draw2-audio-track-accent, #536783) 35%,
    var(--draw2-border-subtle)
  );
  border-left: 3px solid var(--draw2-audio-track-accent, #536783);
  border-radius: 6px;
  background:
    radial-gradient(circle at 7% 0%, color-mix(
      in srgb,
      var(--draw2-audio-track-accent, #536783) 16%,
      transparent
    ), transparent 42%),
    linear-gradient(135deg, #1a263a, #101827 72%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 5px 12px rgb(0 0 0 / 16%);
}
.draw2-audio-mixer-track {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
}
.draw2-audio-mixer-track strong {
  min-width: 0;
  overflow: hidden;
  color: #eef6ff;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-mixer-track small {
  grid-column: 2;
  overflow: hidden;
  color: var(--draw2-text-muted);
  font: 700 0.44rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-mixer-activity {
  position: relative;
  display: block;
  grid-row: 1 / -1;
  width: 4px;
  height: 40px;
  overflow: hidden;
  border: 1px solid #33425b;
  border-radius: 999px;
  background: #0b121f;
}
.draw2-audio-mixer-activity i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(180deg, #ffcf83, #7de3b1 52%, #4ecbff);
  box-shadow: 0 0 7px rgb(78 203 255 / 56%);
}
.draw2-audio-mixer-row .draw2-audio-mixer-button {
  min-width: 28px;
  min-height: 28px;
  border-radius: 5px;
  background: #111a2a;
}
.draw2-audio-mixer-row .draw2-audio-mixer-button:hover,
.draw2-audio-mixer-row .draw2-audio-mixer-button:focus-visible,
.draw2-audio-mixer-row .draw2-audio-mixer-button.is-active {
  border-color: var(--draw2-audio-track-accent, #c88bff);
  background: color-mix(
    in srgb,
    var(--draw2-audio-track-accent, #c88bff) 24%,
    #111827
  );
  color: #ffffff;
  outline: none;
}
.draw2-audio-mixer-row .draw2-audio-mixer-control {
  min-width: 70px;
}
.draw2-audio-mixer-row .draw2-audio-knob {
  border-color: color-mix(
    in srgb,
    var(--draw2-audio-track-accent, #c88bff) 48%,
    #455775
  );
}
.draw2-audio-mixer-routing {
  justify-content: space-between;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid #2f405b;
  border-radius: 5px;
  background: rgb(8 14 25 / 42%);
}
.draw2-audio-mixer-routing select {
  flex: 1 1 auto;
  min-width: 72px;
  background: #111a2a;
}

/* FX cards show the signal shape before the parameter sliders. */
.draw2-audio-fx-panel {
  padding: 8px;
  border: 1px solid #2b3b58;
  border-radius: 8px;
  background:
    radial-gradient(circle at 90% 0%, rgb(200 139 255 / 12%), transparent 38%),
    linear-gradient(145deg, #17243a, #0e1522 78%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 8px 18px rgb(0 0 0 / 18%);
}
.draw2-audio-fx-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--draw2-text-muted);
  font-size: 0.54rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.draw2-audio-fx-heading strong {
  display: block;
  margin-top: 3px;
  color: #f3e7ff;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
}
.draw2-audio-fx-chain,
.draw2-audio-right-list {
  position: relative;
}
.draw2-audio-fx-chain::before {
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 13px;
  width: 1px;
  background: linear-gradient(180deg, #61d9ff, #c88bff, #7de3b1);
  box-shadow: 0 0 7px rgb(200 139 255 / 52%);
  content: "";
  pointer-events: none;
}
.draw2-audio-fx-chain li,
.draw2-audio-right-list li[data-audio-fx-item] {
  position: relative;
  min-height: 62px;
  padding: 7px 6px;
  border: 1px solid #30415e;
  border-left: 2px solid color-mix(
    in srgb,
    var(--draw2-audio-fx-accent, #c88bff) 72%,
    #30415e
  );
  border-radius: 6px;
  background: linear-gradient(135deg, #1b2940, #111a2a 72%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}
.draw2-audio-fx-chain li[data-audio-fx-kind="EQ"],
.draw2-audio-right-list li[data-audio-fx-kind="EQ"] {
  --draw2-audio-fx-accent: #61d9ff;
}
.draw2-audio-fx-chain li[data-audio-fx-kind="COMPRESSOR"],
.draw2-audio-right-list li[data-audio-fx-kind="COMPRESSOR"] {
  --draw2-audio-fx-accent: #c88bff;
}
.draw2-audio-fx-chain li[data-audio-fx-kind="REVERB"],
.draw2-audio-right-list li[data-audio-fx-kind="REVERB"] {
  --draw2-audio-fx-accent: #7de3b1;
}
.draw2-audio-fx-order {
  z-index: 1;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--draw2-audio-fx-accent, #c88bff);
  border-radius: 50%;
  background: #101827;
  color: #eef6ff;
  font: 800 0.48rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.draw2-audio-fx-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}
.draw2-audio-fx-name {
  min-width: 0;
  overflow: hidden;
  color: #f1f6ff;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw2-audio-fx-visual {
  display: inline-flex;
  flex: 0 0 52px;
  align-items: end;
  justify-content: space-between;
  height: 25px;
  padding: 3px 4px;
  border: 1px solid color-mix(
    in srgb,
    var(--draw2-audio-fx-accent, #c88bff) 36%,
    #30415e
  );
  border-radius: 4px;
  background:
    linear-gradient(180deg, transparent 49%, rgb(255 255 255 / 10%) 50%, transparent 51%),
    #0c1422;
}
.draw2-audio-fx-visual i {
  display: block;
  width: 3px;
  height: var(--draw2-fx-bar-height, 50%);
  border-radius: 999px 999px 1px 1px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--draw2-audio-fx-accent, #c88bff) 90%, #ffffff),
    var(--draw2-audio-fx-accent, #c88bff)
  );
  box-shadow: 0 0 5px color-mix(
    in srgb,
    var(--draw2-audio-fx-accent, #c88bff) 48%,
    transparent
  );
}
[data-audio-transport-state="PLAYING"] .draw2-audio-fx-visual i {
  animation: draw2-audio-fx-bars 460ms ease-in-out infinite alternate;
}
@keyframes draw2-audio-fx-bars {
  from { transform: scaleY(0.72); opacity: 0.72; }
  to { transform: scaleY(1.1); opacity: 1; }
}
.draw2-audio-fx-chain li.is-bypassed .draw2-audio-fx-visual {
  filter: grayscale(0.8);
}
.draw2-audio-right-dock {
  box-shadow: 0 0 0 1px rgb(200 139 255 / 8%), 0 14px 30px rgb(0 0 0 / 24%);
}
.draw2-audio-right-tab.is-active {
  position: relative;
  background: linear-gradient(180deg, #3b2c57, #211d35);
  box-shadow: inset 0 -2px 0 #c88bff;
}
.draw2-audio-right-surface {
  background:
    radial-gradient(circle at 100% 0%, rgb(97 217 255 / 8%), transparent 34%),
    linear-gradient(145deg, #121d2d, #0e141f);
}
.draw2-audio-right-section {
  padding: 8px;
  border: 1px solid #263753;
  border-radius: 6px;
  background: rgb(16 25 40 / 66%);
}

/* Detail decks need enough vertical room for their actual controls. The
 * default view keeps the Arranger and Piano Roll dominant; opening Mixer or
 * FX intentionally promotes the lower surface without changing the musical
 * timebase. The deck is outside #draw2AudioWorkspace in the desktop shell,
 * so the frame row—not the central editor grid—is the sizing authority. */
@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is(
      [data-mode-deck-tab="audio-mixer"],
      [data-mode-deck-tab="audio-fx"]
    ) {
    grid-template-rows:
      64px minmax(0, 1fr) clamp(260px, 38dvh, 360px)
      var(--draw2-statusbar-height) !important;
  }
}

@media (max-width: 760px) {
  .draw2-audio-mixer-row {
    min-width: 560px;
  }
  .draw2-audio-fx-visual {
    flex-basis: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw2-audio-inline-meter i,
  .draw2-audio-mixer-activity i,
  .draw2-audio-fx-visual i {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   Audio five-rail workstation

   The Audio shell owns five clear regions on desktop:
   top = project/mode/transport, left = Browser and Tracks, center = the
   selected Piano/Wave/Drum/Sampler/Draw editor, right = Inspector/Browser/
   Master, and bottom = the always-visible musical timeline. The timeline is
   mounted in the same lower rail as Draw's frame timeline so both modes keep
   the same visual reading order without duplicating a composition view.
   Keep this contract at EOF so the older compact projection cannot move the
   timeline back into the central editor or make the top controls overlap.
   ------------------------------------------------------------------------- */
@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    --draw2-audio-left-width: clamp(220px, 18vw, 292px);
    --draw2-audio-right-width: clamp(300px, 24vw, 380px);
    --draw2-timeline-height: clamp(230px, 32dvh, 340px);
    grid-template-columns:
      minmax(220px, var(--draw2-audio-left-width))
      minmax(0, 1fr)
      minmax(300px, var(--draw2-audio-right-width)) !important;
    grid-template-rows:
      64px minmax(0, 1fr) var(--draw2-timeline-height)
      var(--draw2-statusbar-height) !important;
    grid-template-areas:
      "top top top"
      "left canvas right"
      "timeline timeline timeline"
      "status status status" !important;
  }

  /* The left rail is a real column, not a floating panel. Its Audio dock
     fills that column so the + button and project controls never sit over the
     central editor. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceLeftDock {
    grid-area: left !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
    z-index: 2 !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioLeftDock:not([hidden]) {
    align-self: stretch !important;
    flex: 1 1 100% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* The top rail has one slot for each responsibility. The shared command
     cluster stays on the far right, leaving the Audio transport a flexible
     middle slot with no overlap. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar {
    right: 8px !important;
    left: auto !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    z-index: 7 !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-menu-bar {
    right: 120px !important;
    left: auto !important;
    width: 76px !important;
    min-width: 76px !important;
    z-index: 7 !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioGlobalControls {
    right: 208px !important;
    left: 390px !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    z-index: 6 !important;
  }

  /* At the compact desktop width the right side keeps only the three
     high-frequency commands. Piano Roll owns its own zoom, so the canvas
     zoom and sync summary do not need to compete for the same 112px slot. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > #draw2SyncStatus,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > .draw2-zoom-tools {
    display: none !important;
  }

  /* The central surface is the selected editor only. The Arranger overview
     is kept mounted for its existing render/event contract, but is removed
     from the first-paint layout so the lower rail owns the timeline. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace {
    display: grid !important;
    grid-template-rows: 42px minmax(0, 1fr) !important;
    align-content: stretch !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace
    > .draw2-audio-arranger-overview {
    display: none !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace
    > .draw2-audio-editor-header {
    grid-row: 1 !important;
    min-height: 0 !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace
    > .draw2-audio-panel,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace
    > .draw2-audio-editor-surface {
    grid-row: 2 !important;
    min-height: 0 !important;
  }

  /* The lower rail is a permanent Audio surface. Only its selected tab
     changes; the Timeline tab is the default and remains a real panel rather
     than a second copy of the central editor. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceTimelineRegion {
    display: flex !important;
    grid-area: timeline !important;
    min-width: 0 !important;
    min-height: 230px !important;
    padding: 6px 8px 4px !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2ModeTimelineDeck,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2ModeDeckAudio:not([hidden]) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  /* Mixer, Automation and FX can promote the same lower rail without
     changing the central editor or the musical timebase. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is(
      [data-mode-deck-tab="audio-library"],
      [data-mode-deck-tab="audio-mixer"],
      [data-mode-deck-tab="audio-automation"],
      [data-mode-deck-tab="audio-fx"],
      [data-mode-deck-tab="audio-markers"],
      [data-mode-deck-tab="audio-settings"]
    ) {
    grid-template-rows:
      64px minmax(0, 1fr) clamp(190px, 27dvh, 270px)
      var(--draw2-statusbar-height) !important;
    grid-template-areas:
      "top top top"
      "left canvas right"
      "timeline timeline timeline"
      "status status status" !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is(
      [data-mode-deck-tab="audio-library"],
      [data-mode-deck-tab="audio-mixer"],
      [data-mode-deck-tab="audio-automation"],
      [data-mode-deck-tab="audio-fx"],
      [data-mode-deck-tab="audio-markers"],
      [data-mode-deck-tab="audio-settings"]
    )
    #draw2WorkspaceTimelineRegion {
    display: flex !important;
    min-height: 190px !important;
    padding: 6px 8px 4px !important;
    z-index: 1 !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is(
      [data-mode-deck-tab="audio-library"],
      [data-mode-deck-tab="audio-mixer"],
      [data-mode-deck-tab="audio-automation"],
      [data-mode-deck-tab="audio-fx"],
      [data-mode-deck-tab="audio-markers"],
      [data-mode-deck-tab="audio-settings"]
    )
    #draw2ModeTimelineDeck,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is(
      [data-mode-deck-tab="audio-library"],
      [data-mode-deck-tab="audio-mixer"],
      [data-mode-deck-tab="audio-automation"],
      [data-mode-deck-tab="audio-fx"],
      [data-mode-deck-tab="audio-markers"],
      [data-mode-deck-tab="audio-settings"]
    )
    #draw2ModeDeckAudio:not([hidden]) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }
}

@media (min-width: 1400px) {
  /* Wider desktop keeps the full command cluster visible while reserving a
     separate gap for the Details menu. */
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-command-bar {
    right: 8px !important;
    width: 332px !important;
    min-width: 332px !important;
    max-width: 332px !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"]
    .draw2-workspace-menu-bar {
    right: 340px !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioGlobalControls {
    right: 428px !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > [data-workspace-command="panel-export"],
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > #draw2SyncStatus,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    .draw2-workspace-command-bar
    > .draw2-zoom-tools {
    display: flex !important;
  }
}

/* Audio has a dedicated lower-deck artwork preview. The legacy floating
 * surface remains a Draw-only affordance and must stay out of the Audio
 * composition view even when older profile attributes are absent. */
.draw2-mini-preview[hidden],
#draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-mini-preview,
#draw2WorkspaceFrame[data-creator-mode="AUDIO"][data-audio-draw-monitor="true"]
  .draw2-mini-preview {
  display: none !important;
  visibility: hidden !important;
}

/* Audio central Arranger authority --------------------------------------
 * The central Arranger is the composition timeline. The lower deck is a
 * detail rail for Clips/Mixer/Automation/FX only; its old Timeline view is
 * intentionally not another editing surface. Rail widths come from the
 * shared persisted layout contract so changing a tab never resets them. */
@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] {
    --draw2-audio-left-width: var(
      --draw2-audio-left-user-width,
      clamp(220px, 18vw, 292px)
    );
    --draw2-audio-right-width: var(
      --draw2-audio-right-user-width,
      var(--draw2-right-dock-width, clamp(300px, 24vw, 380px))
    );
    grid-template-columns:
      minmax(176px, max(176px, var(--draw2-audio-left-width)))
      minmax(0, 1fr)
      minmax(280px, max(280px, var(--draw2-audio-right-width))) !important;
    grid-template-rows:
      64px minmax(0, 1fr) 0 var(--draw2-statusbar-height) !important;
    grid-template-areas:
      "top top top"
      "left canvas right"
      "timeline timeline timeline"
      "status status status" !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceLeftDock:not([hidden]) {
    width: var(--draw2-audio-left-width) !important;
    min-width: var(--draw2-audio-left-width) !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceRightDock {
    width: var(--draw2-audio-right-width) !important;
    min-width: 280px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace {
    display: flex !important;
    flex-direction: column !important;
    align-content: stretch !important;
    gap: 0 !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace
    > .draw2-audio-arranger-overview {
    display: flex !important;
    flex: 0 0 clamp(240px, 42%, 420px) !important;
    min-height: 220px !important;
    height: auto !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace
    > .draw2-audio-editor-header {
    flex: 0 0 42px !important;
    min-height: 42px !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace
    > .draw2-audio-panel:not([hidden]),
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioWorkspace
    > .draw2-audio-editor-surface:not([hidden]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2WorkspaceTimelineRegion {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is(
      [data-mode-deck-tab="audio-library"],
      [data-mode-deck-tab="audio-mixer"],
      [data-mode-deck-tab="audio-automation"],
      [data-mode-deck-tab="audio-fx"],
      [data-mode-deck-tab="audio-markers"],
      [data-mode-deck-tab="audio-settings"]
    ) {
    grid-template-rows:
      64px minmax(0, 1fr) clamp(96px, var(--draw2-timeline-height), 640px)
      var(--draw2-statusbar-height) !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is(
      [data-mode-deck-tab="audio-library"],
      [data-mode-deck-tab="audio-mixer"],
      [data-mode-deck-tab="audio-automation"],
      [data-mode-deck-tab="audio-fx"],
      [data-mode-deck-tab="audio-markers"],
      [data-mode-deck-tab="audio-settings"]
    )
    #draw2WorkspaceTimelineRegion {
    display: flex !important;
    min-height: 96px !important;
    height: auto !important;
    padding: 6px 8px 4px !important;
    overflow: hidden !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2ModeTimelineDeck,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2ModeDeckAudio:not([hidden]) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioArrangerLanes
    .draw2-audio-inline-mixer-button,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioArrangerLanes
    .draw2-audio-track-delete {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioLeftResize {
    position: absolute !important;
    z-index: 40 !important;
    top: 0 !important;
    right: -6px !important;
    bottom: 0 !important;
    left: auto !important;
    display: block !important;
    width: 12px !important;
    min-width: 12px !important;
    height: auto !important;
    cursor: ew-resize !important;
    pointer-events: auto !important;
  }
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioLeftResize.is-resizing,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]
    #draw2AudioLeftResize:hover {
    background: color-mix(in srgb, var(--draw2-mode-accent, #61d9ff) 34%, transparent) !important;
  }
}

/* Family-specific roll cues stay canvas-lightweight: one data attribute and
 * a border/texture hint make the selected editor recognizable without
 * allocating one DOM node per Tick cell. */
.draw2-audio-midi-grid[data-audio-roll-visual="strings"] {
  border-color: color-mix(in srgb, #f2a6d6 62%, var(--draw2-border-subtle)) !important;
}
.draw2-audio-midi-grid[data-audio-roll-visual="mallet"] {
  border-color: color-mix(in srgb, #ffaf78 62%, var(--draw2-border-subtle)) !important;
}
.draw2-audio-midi-grid[data-audio-roll-visual="air"] {
  border-color: color-mix(in srgb, #9be4ff 62%, var(--draw2-border-subtle)) !important;
}
.draw2-audio-midi-grid[data-audio-roll-visual="organ"] {
  border-color: color-mix(in srgb, #7ca8ff 62%, var(--draw2-border-subtle)) !important;
}
.draw2-audio-midi-grid[data-audio-roll-visual="synth"] {
  border-color: color-mix(in srgb, #6fe3d1 62%, var(--draw2-border-subtle)) !important;
}
.draw2-audio-midi-grid[data-audio-roll-visual="chip"] {
  border-color: color-mix(in srgb, #ff9fda 70%, var(--draw2-border-subtle)) !important;
}
.draw2-audio-midi-grid[data-audio-roll-visual="chip"]
  .draw2-audio-midi-canvas {
  image-rendering: pixelated;
}

.draw2-audio-drum-grid[data-audio-roll-editor="drum"] {
  border-color: color-mix(in srgb, #ffbf72 70%, var(--draw2-border-subtle));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ffbf72 8%, #111522),
    #111522
  );
}

/* iGAME owns a real hierarchy rail on desktop. This final guard intentionally
   follows the legacy Audio zero-rail rules so the five-rail editor never
   collapses its left hierarchy into the viewport. */
@media (min-width: 1120px) {
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] {
    grid-template-columns:
      minmax(196px, 220px) minmax(0, 1fr)
      minmax(244px, var(--draw2-right-dock-width, 320px)) !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceLeftDock,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2GameLeftDock {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceLeftDock
    > .draw2-mobile-drawer-header,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceLeftDock
    > .draw2-mobile-toolbar,
  #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"]
    #draw2WorkspaceLeftDock
    > .draw2-workspace-panel-launcher {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}