:root {
  color-scheme: light;
  --bg-app: #c8c8c8;
  --bg-panel: #c8c8c8;
  --bg-subtle: #d3d3d3;
  --bg-workspace: #b8b8b8;
  --ink: #172033;
  --ink-soft: #596277;
  --ink-faint: #697386;
  --line: #dfe3eb;
  --line-strong: #cdd3df;
  --accent: #4f63e9;
  --accent-hover: #3d50d1;
  --accent-soft: #e9ecff;
  --danger: #d44355;
  --shadow-sm: 0 1px 2px rgba(20, 28, 47, .06), 0 1px 6px rgba(20, 28, 47, .04);
  --shadow-md: 0 8px 24px rgba(24, 31, 50, .13), 0 2px 8px rgba(24, 31, 50, .08);
  --radius: 8px;
  --ui-font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-height: 114px;
  font-family: var(--ui-font-family);
  font-synthesis: none;
}

/* Retro 2K: klassisches Systemgrau, 3D-Kanten und dunkelblaue Auswahl. */
:root[data-theme="retro"] {
  color-scheme: light;
  --bg-app: #d4d0c8;
  --bg-panel: #d4d0c8;
  --bg-subtle: #d4d0c8;
  --bg-workspace: #808080;
  --ink: #000000;
  --ink-soft: #202020;
  --ink-faint: #4f4f4f;
  --line: #a0a0a0;
  --line-strong: #808080;
  --accent: #0a246a;
  --accent-hover: #000080;
  --accent-soft: #d6e1f2;
  --danger: #800000;
  --shadow-sm: none;
  --shadow-md: 2px 2px 0 #404040;
  --radius: 0px;
  --ui-font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
  font-family: var(--ui-font-family);
}

/* Die weichere Zwischenstufe: Windows-Grau und -Blau im modernen PYRO-Chrom. */
:root[data-theme="classic-gray"] {
  color-scheme: light;
  --bg-app: #d4d0c8;
  --bg-panel: #d4d0c8;
  --bg-subtle: #d4d0c8;
  --bg-workspace: #808080;
  --ink: #000000;
  --ink-soft: #202020;
  --ink-faint: #4f4f4f;
  --line: #a0a0a0;
  --line-strong: #808080;
  --accent: #0a246a;
  --accent-hover: #000080;
  --accent-soft: #d6e1f2;
  --danger: #800000;
  --shadow-sm: none;
  --shadow-md: 2px 2px 0 #404040;
  --radius: 0px;
  --ui-font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
  font-family: var(--ui-font-family);
}

/* Platinum: klassische Mac-Formensprache, Charcoal/Geneva und Reliefkanten. */
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) {
  color-scheme: light;
  --platinum-chrome: #dddddd;
  --platinum-workspace: #858585;
  --platinum-accent: #315fa9;
  --platinum-accent-dark: #153f83;
  --platinum-accent-soft: #cbdaf3;
  --platinum-hero: #607eb0;
  --bg-app: #cccccc;
  --bg-panel: var(--platinum-chrome);
  --bg-subtle: #e9e9e9;
  --bg-workspace: var(--platinum-workspace);
  --ink: #000000;
  --ink-soft: #242424;
  --ink-faint: #505050;
  --line: #b0b0b0;
  --line-strong: #707070;
  --accent: var(--platinum-accent);
  --accent-hover: #244c8d;
  --accent-soft: var(--platinum-accent-soft);
  --danger: #b21f2d;
  --shadow-sm: none;
  --shadow-md: 2px 3px 0 rgba(0, 0, 0, .38);
  --radius: 3px;
  --ui-font-family: Charcoal, Chicago, Geneva, "Lucida Grande", Arial, sans-serif;
  font-family: var(--ui-font-family);
}

/* Platinum-Aufbau mit der Farbwelt von Modern Grau. */
:root[data-theme="modern-gray"] {
  --platinum-chrome: #d4d0c8;
  --platinum-workspace: #808080;
  --platinum-accent: #0a246a;
  --platinum-accent-dark: #000080;
  --platinum-accent-soft: #d6e1f2;
  --platinum-hero: #0a246a;
  --bg-app: #d4d0c8;
  --bg-panel: #d4d0c8;
  --bg-subtle: #d4d0c8;
  --bg-workspace: #808080;
  --ink: #000000;
  --ink-soft: #202020;
  --ink-faint: #4f4f4f;
  --line: #a0a0a0;
  --line-strong: #808080;
  --accent: #0a246a;
  --accent-hover: #000080;
  --accent-soft: #d6e1f2;
  --danger: #800000;
}

:root[data-theme="classic"] {
  --bg-app: #eef1f6;
  --bg-panel: #ffffff;
  --bg-subtle: #f7f8fb;
  --bg-workspace: #cfd4dc;
  --ink: #172033;
  --ink-soft: #596277;
  --ink-faint: #697386;
  --line: #dfe3eb;
  --line-strong: #cdd3df;
  --accent: #4f63e9;
  --accent-hover: #3d50d1;
  --accent-soft: #e9ecff;
}

:root[data-theme="ocean"] {
  --bg-app: #bfd0dd;
  --bg-panel: #d3e2ed;
  --bg-subtle: #e2edf4;
  --bg-workspace: #a9bfce;
  --ink: #173248;
  --ink-soft: #45677d;
  --ink-faint: #405f72;
  --line: #b4c8d5;
  --line-strong: #91adbe;
  --accent: #2872a9;
  --accent-hover: #1c5e91;
  --accent-soft: #d7ebf8;
}

:root[data-theme="warm"] {
  --bg-app: #d8d0c3;
  --bg-panel: #e3dbcf;
  --bg-subtle: #eee7dc;
  --bg-workspace: #c1b5a3;
  --ink: #3b3228;
  --ink-soft: #6e6255;
  --ink-faint: #65594e;
  --line: #c8bcad;
  --line-strong: #ad9f90;
  --accent: #a15d3e;
  --accent-hover: #82462d;
  --accent-soft: #f4ded3;
}

:root[data-theme="graphite"] {
  color-scheme: dark;
  --bg-app: #2b2d31;
  --bg-panel: #34373c;
  --bg-subtle: #3c4046;
  --bg-workspace: #24272c;
  --ink: #eceef1;
  --ink-soft: #c8ccd2;
  --ink-faint: #aeb4bd;
  --line: #484d55;
  --line-strong: #5a606a;
  --accent: #73a7f5;
  --accent-hover: #94bdff;
  --accent-soft: #263e60;
  --danger: #ff8d9b;
  --graphite-control: #292c31;
  --graphite-control-hover: #31353b;
  --graphite-raised: #3a3e44;
  --graphite-status: #2d3035;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25), 0 1px 6px rgba(0, 0, 0, .14);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .38), 0 2px 8px rgba(0, 0, 0, .25);
}

:root[data-theme="graphite"] select,
:root[data-theme="graphite"] input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
:root[data-theme="graphite"] textarea {
  color: var(--ink);
  background: var(--graphite-control);
}

* {
  box-sizing: border-box;
}

.tabler-icon {
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  min-width: 760px;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg-app);
  font-size: 13px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
select,
input[type="color"],
input[type="range"] {
  cursor: pointer;
}

button {
  border: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:disabled {
  cursor: default;
  opacity: .58;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[hidden] {
  display: none !important;
}

.app-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
}

.app-header {
  position: relative;
  z-index: 20;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.titlebar {
  display: flex;
  align-items: stretch;
  min-height: 65px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  flex: 0 0 174px;
  align-items: center;
  gap: 10px;
  margin-right: 12px;
}

button.brand {
  padding: 0;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.brand:hover .brand-mark {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 7px 15px rgba(79, 99, 233, .34);
}

.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: white;
  border-radius: 10px;
  background: linear-gradient(145deg, #7182ff, #4557dc);
  box-shadow: 0 5px 12px rgba(79, 99, 233, .27);
  transition: transform .14s ease, box-shadow .14s ease;
}

.brand-icon {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 10px;
}

.brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.1;
}

.brand-copy strong {
  font-size: 15px;
  font-weight: 730;
  letter-spacing: -.015em;
  white-space: nowrap;
}

.brand-copy small {
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.command-bar,
.command-group {
  display: flex;
  align-items: center;
}

.command-bar {
  min-width: 0;
  flex: 1;
  justify-content: space-between;
  gap: 22px;
}

.command-group {
  gap: 3px;
}

.command-button,
.icon-command,
.mini-button,
.format-button,
.subtle-button,
.align-grid button,
.zoom-controls button,
.segmented-actions button,
.layer-actions button,
.panel-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  background: transparent;
  border-radius: 6px;
  transition: color .14s ease, background-color .14s ease, border-color .14s ease, transform .08s ease;
}

.command-button:hover,
.icon-command:hover:not(:disabled),
.mini-button:hover,
.format-button:hover,
.align-grid button:hover,
.zoom-controls button:hover,
.segmented-actions button:hover,
.layer-actions button:hover,
.panel-add-button:hover {
  color: var(--ink);
  background: #f0f2f7;
}

.command-button:active,
.icon-command:active:not(:disabled),
.mini-button:active,
.format-button:active,
.align-grid button:active,
.zoom-controls button:active,
.segmented-actions button:active,
.layer-actions button:active {
  transform: translateY(1px);
}

.command-button {
  min-width: 51px;
  min-height: 48px;
  flex-direction: column;
  gap: 4px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 620;
}

.command-button svg {
  width: 19px;
  height: 19px;
}

.command-button--primary {
  color: var(--accent);
}

.command-button--compact {
  min-width: 44px;
  padding-inline: 5px;
  border-left: 1px solid var(--line);
  border-radius: 0 6px 6px 0;
}

.export-actions {
  display: flex;
}

.export-actions .command-button:first-child {
  border-radius: 6px 0 0 6px;
}

.icon-command {
  width: 34px;
  height: 34px;
}

.icon-command svg {
  width: 18px;
  height: 18px;
}

.icon-command--danger:hover:not(:disabled) {
  color: var(--danger);
  background: #fff0f2;
}

.command-divider {
  width: 1px;
  height: 26px;
  margin: 0 6px;
  background: var(--line);
}

.document-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: 16px;
}

.theme-control {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
}

.theme-control select {
  width: 118px;
  min-height: 27px;
  padding: 3px 21px 3px 7px;
  border-color: var(--line-strong);
  background-color: var(--bg-subtle);
  font-size: 11px;
}

.language-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
}

.language-menu-button {
  position: relative;
  display: block;
  width: 104px;
  min-height: 27px;
  padding: 3px 21px 3px 33px;
  overflow: hidden;
  color: var(--ink);
  border-color: var(--line-strong);
  background-color: var(--bg-subtle);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.language-menu-button::after {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  content: "";
  transform: translateY(-1px);
}

.language-menu-button[aria-expanded="true"]::after {
  border-top-color: transparent;
  border-bottom-color: currentColor;
  transform: translateY(-5px);
}

.language-flag {
  position: absolute;
  left: 7px;
  z-index: 1;
  display: block;
  width: 20px;
  height: 15px;
  overflow: hidden;
  pointer-events: none;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}

.language-flag img {
  display: block;
  width: 20px;
  height: 15px;
}

.language-menu {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  z-index: 120;
  width: max-content;
  min-width: 142px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--bg-panel);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
}

.language-menu[hidden] {
  display: none;
}

.language-menu-option {
  display: flex;
  width: 100%;
  min-height: 27px;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 4px 5px;
  color: var(--ink);
  border: 0;
  border-radius: 3px;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.language-menu-option:hover,
.language-menu-option:focus-visible {
  background: var(--bg-subtle);
  outline: none;
}

.language-menu-option[aria-selected="true"] {
  color: var(--ink);
  background: var(--accent-soft);
}

.language-menu-option img {
  display: block;
  width: 20px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}

.info-button {
  display: inline-grid;
  width: 28px;
  height: 27px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-subtle);
}

.info-button:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.info-button svg {
  width: 17px;
  height: 17px;
}

.optionsbar {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 6px 16px;
  scrollbar-width: thin;
}

.options-section {
  display: flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-right: 1px solid var(--line);
}

.options-section:first-child {
  padding-left: 0;
}

.options-section:last-child {
  border-right: 0;
}

.options-label,
.field-label {
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 730;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.color-stack {
  position: relative;
  width: 38px;
  height: 30px;
}

.color-chip {
  position: absolute;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 2px solid white;
  border-radius: 5px;
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm);
}

.color-chip--stroke {
  top: 0;
  left: 0;
  z-index: 2;
}

.color-chip--fill {
  right: 0;
  bottom: 0;
}

.color-chip input,
.inline-color input {
  width: 160%;
  height: 160%;
  margin: -30%;
  padding: 0;
  border: 0;
}

.mini-button,
.format-button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
}

.mini-button svg {
  width: 16px;
  height: 16px;
}

.canvas-aspect-lock.is-active {
  color: var(--accent);
  border-color: #bfc7ff;
  background: var(--accent-soft);
}

.check-control {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 11px;
  white-space: nowrap;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: -2px;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background-color: var(--bg-subtle);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-image:
    linear-gradient(45deg, transparent 35%, currentColor 36% 64%, transparent 65%),
    linear-gradient(-45deg, transparent 35%, currentColor 36% 64%, transparent 65%);
}

input[type="checkbox"]:disabled {
  cursor: default;
  opacity: .58;
}

input[type="range"] {
  height: 4px;
  margin: 0;
  accent-color: var(--accent);
}

.pixel-options {
  gap: 6px;
}

.pixel-options select {
  min-width: 94px;
  min-height: 29px;
  padding: 4px 24px 4px 7px;
  font-size: 11px;
}

.option-caption {
  color: var(--ink-soft);
  font-size: 11px;
  white-space: nowrap;
}

.retouch-source-hint {
  color: var(--ink-faint);
  font-size: 11px;
  white-space: nowrap;
}

.pixel-option-fields {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pixel-action-button {
  min-height: 29px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: white;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 680;
}

.pixel-action-button:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pixel-action-button--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.pixel-action-button--primary:not(:disabled):hover {
  border-color: var(--accent-strong, var(--accent));
  background: var(--accent-strong, var(--accent));
  color: #ffffff;
}

.warp-options {
  max-width: min(1320px, calc(100vw - 150px));
}

.warp-action-fields {
  padding-left: 7px;
  border-left: 1px solid var(--line);
}

.warp-mesh-toggle {
  margin-left: 3px;
  white-space: nowrap;
}

.stretch-amount-range {
  width: 112px;
  min-width: 72px;
}

.vector-path-options {
  max-width: none;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: normal;
  gap: 10px;
}

.vector-path-summary {
  display: flex;
  width: 92px;
  min-width: 92px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding-right: 10px;
  border-right: 1px solid var(--line-strong);
}

.vector-path-summary .retouch-source-hint {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vector-path-workbench {
  display: grid;
  width: max-content;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.vector-path-row,
.vector-path-group,
.vector-path-group-controls {
  display: flex;
  align-items: center;
}

.vector-path-row {
  gap: 7px;
}

.vector-path-group {
  height: 100%;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-subtle);
}

.vector-path-group-title {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: 6px;
  color: var(--ink-faint);
  border-right: 1px solid var(--line);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vector-path-group-controls {
  gap: 4px;
}

.vector-mode-button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.vector-path-options .pixel-action-button {
  white-space: nowrap;
}

.vector-coordinate-controls {
  gap: 7px;
}

.vector-coordinate-pair {
  display: inline-grid;
  grid-template-columns: auto 9px 52px 9px 52px;
  align-items: center;
  gap: 3px;
}

.vector-coordinate-pair > span {
  color: var(--ink-faint);
  font-size: 10px;
  text-align: center;
}

.vector-coordinate-pair input {
  width: 52px;
  min-height: 27px;
  padding: 4px 5px;
  font-size: 11px;
}

.vector-coordinate-pair input:disabled {
  background: var(--bg-subtle);
  color: var(--ink-faint);
}

.unit-input--tiny input {
  width: 42px;
}

.unit-input--tiny span {
  min-width: 10px;
  padding-right: 5px;
  text-align: center;
}

select,
input[type="text"],
input[type="number"],
textarea {
  min-height: 29px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  outline: none;
  background: white;
}

/* PYRO verwendet für Zahlenwerte den eigenen vertikalen Fireworks-Regler. */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

select:hover,
input[type="text"]:hover,
input[type="number"]:hover,
textarea:hover {
  border-color: #afb7c7;
}

select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.font-controls select {
  width: 122px;
}

.font-controls {
  min-width: 0;
  flex: 1 1 auto;
}

.special-characters {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  padding-left: 11px;
  border-left: 1px solid var(--line);
}

.special-characters__label {
  margin: 0;
}

.special-character-list {
  display: grid;
  width: 260px;
  min-width: 260px;
  flex: 0 0 260px;
  grid-template-rows: repeat(3, 22px);
  grid-template-columns: repeat(10, 24px);
  grid-auto-flow: column;
  align-items: stretch;
  gap: 2px;
  overflow: hidden;
  padding: 2px 1px 3px;
}

.special-character-button {
  width: 24px;
  min-width: 24px;
  height: 22px;
  padding: 0;
  font-family: var(--ui-font-family);
  font-size: 13px;
}

.special-character-button:disabled {
  opacity: .42;
}

.special-character-page {
  min-width: 25px;
  color: var(--ink-faint);
  font-size: 10px;
  text-align: center;
}

.special-character-next {
  width: 27px;
  min-width: 27px;
  height: 27px;
  padding: 0;
}

.special-character-next svg {
  width: 14px;
  height: 14px;
}

/* Fontnamen zeigen ihre eigene Schrift; Kategorien bleiben Teil der UI. */
#fontFamily optgroup,
#propFontFamily optgroup {
  font-family: var(--ui-font-family) !important;
  font-style: normal;
  font-weight: 700;
}

.unit-input {
  display: flex;
  height: 29px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: white;
}

.unit-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.unit-input input {
  width: 60px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 4px 2px 4px 7px;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}

.unit-input span {
  padding-right: 7px;
  color: var(--ink-faint);
  font-size: 11px;
  font-style: normal;
}

.unit-input--short input {
  width: 46px;
}

.unit-input--dpi input {
  width: 38px;
}

.unit-input--dpi span {
  padding-right: 5px;
}

.format-button {
  font-family: Georgia, serif;
  font-size: 14px;
}

.format-button svg {
  width: 16px;
  height: 16px;
}

.format-button[aria-pressed="true"],
.format-button.is-active {
  color: var(--accent);
  border-color: #bfc7ff;
  background: var(--accent-soft);
}

.dimension-separator {
  color: var(--ink-faint);
}

.inline-color {
  position: relative;
  display: block;
  width: 27px;
  height: 27px;
  overflow: hidden;
  border: 2px solid white;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.subtle-button {
  height: 31px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-subtle);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.subtle-button:hover {
  color: var(--accent);
  border-color: #bfc7ff;
  background: var(--accent-soft);
}

.subtle-button[aria-pressed="true"],
.subtle-button.is-active {
  color: var(--accent);
  border-color: #9eabff;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(79, 99, 233, .12);
}

.studio-layout {
  --tool-sidebar-width: 174px;
  --minimum-workspace-width: 320px;
  --right-sidebar-width: 306px;
  --right-sidebar-column-width: var(--right-sidebar-width);
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns: var(--tool-sidebar-width) minmax(var(--minimum-workspace-width), 1fr) var(--right-sidebar-column-width);
}

.studio-layout.is-right-sidebar-collapsed {
  --right-sidebar-column-width: 0px;
}

.studio-layout.is-right-sidebar-collapsed .right-sidebar {
  display: none;
}

.tool-sidebar,
.right-sidebar {
  min-height: 0;
  overflow: auto;
  background: var(--bg-panel);
  scrollbar-color: #c2c8d3 transparent;
  scrollbar-width: thin;
}

.tool-sidebar {
  position: relative;
  z-index: 45;
  border-right: 1px solid var(--line-strong);
  box-shadow: 3px 0 12px rgba(23, 32, 51, .035);
}

.tool-section,
.align-section {
  padding: 13px 10px;
}

.tool-section {
  border-bottom: 1px solid var(--line);
}

.tool-sidebar h2 {
  margin: 0 0 9px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.tool-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-group + .tool-group {
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.tool-group h2 {
  margin-bottom: 6px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.eraser-tool-wrap,
.retouch-tool-wrap,
.warp-tool-wrap,
.shape-tool-wrap,
.marquee-tool-wrap,
.line-tool-wrap,
.path-modifier-tool-wrap {
  position: relative;
  min-width: 0;
}

.eraser-tool-wrap > .tool-button,
.retouch-tool-wrap > .tool-button,
.warp-tool-wrap > .tool-button,
.shape-tool-wrap > .tool-button,
.marquee-tool-wrap > .tool-button,
.line-tool-wrap > .tool-button,
.path-modifier-tool-wrap > .tool-button {
  width: 100%;
}

.eraser-tool-chevron,
.retouch-tool-chevron,
.warp-tool-chevron,
.shape-tool-chevron,
.marquee-tool-chevron,
.line-tool-chevron,
.path-modifier-tool-chevron {
  position: absolute;
  right: 4px;
  bottom: 5px;
  width: 0;
  height: 0;
  border-top: 4px solid currentColor;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  opacity: .72;
}

.eraser-menu,
.retouch-menu,
.warp-menu,
.shape-menu,
.marquee-menu,
.line-menu,
.path-modifier-menu {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  display: grid;
  width: 198px;
  padding: 3px;
  border: 1px solid #9fa2a8;
  box-shadow: 2px 3px 7px rgb(23 32 51 / .28);
  background: var(--bg-panel);
}

.shape-menu.is-compact {
  width: 396px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(8, 29px);
  grid-auto-flow: column;
}

.shape-menu.is-compact button {
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}

.shape-menu.is-compact kbd {
  display: none;
}

.shape-menu.is-compact.is-ultra-compact {
  width: min(594px, calc(100vw - 16px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(6, 29px);
}

@media (max-width: 430px) {
  .shape-menu.is-compact {
    width: calc(100vw - 16px);
  }

}

.shape-menu.is-compact button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eraser-menu[hidden],
.retouch-menu[hidden],
.warp-menu[hidden],
.shape-menu[hidden],
.marquee-menu[hidden],
.line-menu[hidden],
.path-modifier-menu[hidden] {
  display: none;
}

.eraser-menu button,
.retouch-menu button,
.warp-menu button,
.shape-menu button,
.marquee-menu button,
.line-menu button,
.path-modifier-menu button {
  display: grid;
  grid-template-columns: 22px 1fr 18px;
  align-items: center;
  min-height: 29px;
  gap: 7px;
  padding: 4px 6px;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  font: inherit;
  font-size: 11px;
  text-align: left;
}

.eraser-menu button:hover,
.eraser-menu button[aria-checked="true"],
.retouch-menu button:hover,
.retouch-menu button[aria-checked="true"],
.warp-menu button:hover,
.warp-menu button[aria-checked="true"],
.shape-menu button:hover,
.shape-menu button[aria-checked="true"],
.marquee-menu button:hover,
.marquee-menu button[aria-checked="true"],
.line-menu button:hover,
.line-menu button[aria-checked="true"],
.path-modifier-menu button:hover,
.path-modifier-menu button[aria-checked="true"] {
  border-color: #cbd1ff;
  background: var(--accent-soft);
}

.eraser-menu svg,
.retouch-menu svg,
.warp-menu svg,
.shape-menu svg,
.marquee-menu svg,
.line-menu svg,
.path-modifier-menu svg {
  width: 19px;
  height: 19px;
}

.eraser-menu kbd,
.retouch-menu kbd,
.warp-menu kbd,
.shape-menu kbd,
.marquee-menu kbd,
.line-menu kbd,
.path-modifier-menu kbd {
  color: var(--ink-soft);
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}

.tool-button {
  position: relative;
  display: flex;
  min-width: 0;
  height: 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 1px;
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  transition: .14s ease;
}

.tool-button svg {
  width: 20px;
  height: 20px;
}

.tool-button .vector-pointer-icon path {
  fill: #ffffff;
  stroke: #172033;
  stroke-width: 1.25;
}

.tool-button:disabled .vector-pointer-icon path {
  fill: #f0f2f6;
  stroke: #9ba4b4;
}

.tool-button span {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  font-weight: 630;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-button > .switching-tool-icon {
  width: 20px;
  height: 20px;
  max-width: none;
  flex: 0 0 20px;
  overflow: visible;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  text-overflow: clip;
}

.switching-tool-icon {
  display: grid;
  place-items: center;
}

.switching-tool-icon > svg {
  width: 20px;
  height: 20px;
}

.tool-button:hover {
  color: var(--ink);
  border-color: var(--line);
  background: var(--bg-subtle);
}

.tool-button.is-active,
.tool-button[aria-pressed="true"] {
  color: var(--accent);
  border-color: #cbd1ff;
  background: var(--accent-soft);
}

.tool-button.is-active::before,
.tool-button[aria-pressed="true"]::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  content: "";
}

.color-picker-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 7px;
}

.pen-options .retouch-source-hint {
  white-space: nowrap;
}

.color-picker-controls .color-stack {
  flex: 0 0 auto;
}

.color-picker-no-fill {
  justify-content: center;
  width: 100%;
  margin-top: 5px;
  padding: 3px 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.color-picker-no-fill input {
  margin: 0;
  accent-color: var(--accent);
}

.align-section select {
  width: 100%;
  margin-top: 5px;
  font-size: 11px;
}

.align-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 8px;
}

.align-grid button {
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.align-grid svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.2;
}

.toggle-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch {
  position: relative;
  width: 28px;
  height: 16px;
  flex: 0 0 28px;
  border-radius: 99px;
  background: #c9ced8;
  pointer-events: none;
  transition: background .16s ease;
}

.switch::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(10, 20, 40, .22);
  content: "";
  transition: transform .16s ease;
}

.toggle-row input:checked + .switch {
  background: var(--accent);
}

.toggle-row input:checked + .switch::after {
  transform: translateX(12px);
}

.toggle-row input:focus-visible + .switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.snap-settings {
  margin-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
}

.snap-settings summary {
  padding: 8px 0 4px;
  cursor: pointer;
  font-weight: 700;
  user-select: none;
}

.snap-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 7px;
  padding: 3px 0 2px;
}

.snap-settings-grid label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 11px;
}

.snap-settings-grid input {
  flex: 0 0 auto;
}

.snap-settings-grid span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.snap-settings-grid input:disabled + span {
  color: var(--ink-faint);
}

.work-column {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 34px minmax(0, 1fr) 188px 39px;
  background: var(--bg-workspace);
  transition: grid-template-rows .16s ease;
}

.work-column.has-canvas-properties,
.work-column.has-compact-properties,
.work-column.has-tool-properties {
  grid-template-rows: 34px minmax(0, 1fr) 112px 39px;
}

.property-dock {
  position: relative;
  z-index: 5;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 142px minmax(0, 1fr);
  overflow: hidden;
  border-top: 1px solid var(--line-strong);
  background: var(--bg-panel);
  box-shadow: 0 -2px 8px rgba(35, 42, 54, .06);
}

.property-dock__heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 13px 13px;
  border-right: 1px solid var(--line-strong);
  background: var(--bg-subtle);
}

.property-dock__heading h2 {
  margin: 3px 0 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-dock__heading h2.is-editable {
  cursor: text;
}

.property-dock__heading h2.is-editable:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.property-dock__heading h2.is-editable:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.property-dock__heading-input {
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  margin: 3px 0 0;
  padding: 3px 6px;
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 5px;
  outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background: var(--bg-panel);
  font-size: 13px;
  font-weight: 720;
}

.property-dock__heading .count-badge {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-dock__heading-footer {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.property-dock__size-button {
  display: inline-flex;
  width: 100%;
  height: 31px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-panel);
  font-size: 11px;
  font-weight: 700;
}

.property-dock__size-button[hidden] {
  display: none;
}

.property-dock__size-button:hover,
.property-dock__size-button:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
  background: var(--accent-soft);
}

.property-dock__size-button svg {
  width: 15px;
  flex: 0 0 auto;
}

.property-dock__size-button .property-dock__size-icon--grow,
.property-dock__size-button.is-compact .property-dock__size-icon--shrink {
  display: none;
}

.property-dock__size-button.is-compact .property-dock__size-icon--grow {
  display: block;
}

.property-dock.is-compact .property-dock__body {
  cursor: default;
}

.property-dock.is-compact .property-dock__tools,
.property-dock.is-compact .property-dock__inspector {
  display: none;
}

.property-dock__body {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.property-dock__tools {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: stretch;
}

.property-dock__tools:empty,
.property-dock__inspector:empty {
  display: none;
}

.property-dock__tools[hidden] {
  display: none;
}

.property-dock__tools .optionsbar {
  min-height: 0;
  height: 100%;
  overflow: visible;
  padding: 10px 0;
  border-right: 1px solid var(--line-strong);
}

.property-dock__tools .options-section {
  min-height: 0;
  height: 100%;
  align-content: center;
  flex-wrap: wrap;
  padding: 8px 14px;
}

.property-dock__tools .options-section:first-child {
  padding-left: 14px;
}

.property-dock__tools .vector-path-options {
  height: 100%;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: normal;
  padding: 0 12px;
}

.property-dock[data-mode="canvas"] .property-dock__tools {
  flex: 1 0 auto;
}

.property-dock[data-mode="canvas"] .property-dock__tools .optionsbar {
  width: 100%;
  border-right: 0;
}

.property-dock[data-mode="canvas"] .canvas-controls {
  width: auto;
  min-width: 0;
  flex: 1 1 690px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.canvas-grid-controls {
  min-width: 250px;
  flex: 1 1 280px;
  white-space: nowrap;
}

.property-dock[data-mode="canvas"] .property-dock__body {
  overflow-x: hidden;
}

.property-dock[data-mode="canvas"] .property-dock__tools {
  width: 100%;
  min-width: 0;
}

.property-dock[data-mode="canvas"] .property-dock__tools .optionsbar {
  align-content: center;
  flex-wrap: wrap;
  overflow: hidden;
  padding: 4px 8px;
}

.property-dock[data-mode="canvas"] .property-dock__tools .options-section {
  height: auto;
  min-height: 42px;
  padding: 4px 8px;
}

.property-dock[data-mode="canvas"] .property-dock__tools .options-section:first-child {
  padding-left: 8px;
}

.canvas-grid-controls .toggle-row--compact {
  margin-right: 2px;
}

.canvas-grid-controls .unit-input--tiny input {
  width: 48px;
}

.property-dock__inspector {
  min-width: 0;
  flex: 0 0 auto;
}

.property-dock__read-only {
  display: flex;
  width: max-content;
  min-width: 100%;
  height: 100%;
  align-items: stretch;
}

.property-dock__read-only[hidden] {
  display: none;
}

.property-readout__group {
  display: flex;
  min-width: 210px;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 7px;
  padding: 10px 14px;
  border-left: 1px solid var(--line-strong);
}

.property-readout__group:first-child {
  border-left: 0;
}

.property-readout__group h3 {
  margin: 0;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.property-readout__items {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 13px;
}

.property-readout__item {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.property-readout__item small {
  color: var(--ink-faint);
  font-size: 10px;
}

.property-readout__item strong {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 680;
  text-overflow: ellipsis;
}

.property-readout__item i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}

.property-readout__group--object-transform {
  min-width: 330px;
}

.property-readout__group--object-transform .property-readout__items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.property-readout__group--appearance {
  min-width: 300px;
}

.property-readout__group--appearance .property-readout__items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.property-readout__group--effects {
  min-width: 300px;
}

.property-readout__group--effects .property-readout__items,
.property-readout__group--context .property-readout__items {
  grid-template-columns: minmax(0, 1fr);
}

.property-readout__group--text {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}

.property-dock .inspector-panel {
  height: 100%;
  padding: 0;
  border: 0;
}

.property-dock .inspector-panel > .panel-heading,
.property-dock .inspector-empty {
  display: none !important;
}

.property-dock .inspector-form {
  display: flex;
  width: max-content;
  min-width: 100%;
  height: 100%;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.property-dock .inspector-form > * {
  flex: 0 0 276px;
  max-height: 100%;
  overflow-y: auto;
  padding: 12px 14px;
  border-left: 1px solid var(--line-strong);
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.property-dock .inspector-form > :first-child {
  border-left: 0;
}

.property-dock .inspector-form > .property-fieldset--object-transform {
  flex-basis: 276px;
}

.property-dock .object-transform-content {
  display: block;
}

.property-dock .inspector-form.is-tool-context {
  display: none !important;
}

.property-dock .property-fieldset {
  margin: 0;
  border-top: 0;
}

.property-dock .inspector-form > .property-fieldset.is-collapsed {
  flex-basis: 230px;
  min-width: 230px;
  overflow: hidden;
  padding-right: 11px;
  padding-left: 11px;
  background: color-mix(in srgb, var(--bg-subtle) 68%, transparent);
}

.property-dock .property-fieldset.is-collapsed legend {
  height: auto;
}

.property-dock .property-fieldset.is-collapsed .property-section-toggle {
  align-items: center;
}

.property-dock .property-fieldset legend {
  padding-right: 0;
}

.property-dock #textProperties {
  flex-basis: 340px;
}

.text-texture-panel {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.text-texture-toolbar {
  display: grid;
  grid-template-columns: minmax(124px, 1fr) auto;
  gap: 6px;
}

.text-texture-toolbar select {
  min-width: 0;
}

.text-texture-toolbar button {
  min-width: 96px;
  white-space: nowrap;
}

.text-texture-toolbar #randomizeTextTextureBtn {
  grid-column: 2;
}

.text-texture-image-toolbar {
  display: grid;
  grid-template-columns: minmax(118px, 1fr) auto auto;
  gap: 6px;
}

.text-texture-image-toolbar select {
  min-width: 0;
}

.text-texture-image-toolbar button {
  min-width: 76px;
  padding-inline: 7px;
  white-space: nowrap;
}

.text-texture-slider {
  grid-template-columns: 72px minmax(90px, 1fr) 52px;
}

.text-texture-slider output {
  white-space: nowrap;
  text-align: right;
}

.text-texture-image-position {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.text-texture-pixel-options {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(92px, auto);
  gap: 8px;
  align-items: center;
}

.text-texture-pixel-options .pixel-complete-toggle {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.text-texture-pixel-options select {
  min-width: 92px;
}

.property-dock #effectsProperties {
  flex-basis: 330px;
}

.property-dock .inspector-form > .property-fieldset.is-collapsed,
.property-dock .inspector-form > #textProperties.is-collapsed,
.property-dock .inspector-form > #effectsProperties.is-collapsed {
  width: 165px;
  min-width: 165px;
  max-width: 165px;
  flex: 0 0 165px;
}

.property-dock .inspector-form > .property-fieldset.is-collapsed > .property-collapsed-summary {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.workspace-topline,
.workspace-status {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  background: #f7f8fa;
}

.workspace-topline {
  min-width: 0;
  gap: 8px;
  overflow: hidden;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid #bbc1cc;
}

.workspace-topline-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.right-sidebar-toggle {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--bg-panel);
}

.right-sidebar-toggle:hover,
.right-sidebar-toggle:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.right-sidebar-toggle svg {
  width: 17px;
  height: 17px;
  transition: transform .14s ease;
}

.document-tabs-strip {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.document-tabs-strip:not(.is-overflowing) .document-tabs-scroll {
  display: none;
}

.document-tabs-scroll {
  display: grid;
  width: 25px;
  height: 27px;
  align-self: end;
  margin-bottom: 0;
  padding: 0;
  place-items: center;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  background: var(--bg-panel);
}

.document-tabs-scroll:first-child {
  border-radius: 5px 0 0 0;
}

.document-tabs-scroll:last-child {
  border-radius: 0 5px 0 0;
}

.document-tabs-scroll:hover:not(:disabled),
.document-tabs-scroll:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
}

.document-tabs-scroll:disabled {
  opacity: .42;
}

.document-tabs-scroll svg {
  width: 15px;
  height: 15px;
}

.document-tabs {
  display: flex;
  min-width: 0;
  align-self: stretch;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.document-tabs::-webkit-scrollbar {
  display: none;
}

.document-tab {
  display: flex;
  min-width: 118px;
  max-width: 265px;
  flex: 0 0 auto;
  height: 27px;
  align-items: center;
  margin-top: 7px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #eceff3;
  font-size: 11px;
  white-space: nowrap;
}

.document-tab:hover:not(.is-active) {
  color: var(--ink);
  background: #e3e7ee;
}

.document-tab.is-active {
  color: var(--ink);
  background: var(--bg-workspace);
}

.document-tab__select {
  display: grid;
  width: 27px;
  height: 100%;
  flex: 0 0 auto;
  margin-left: 3px;
  padding: 0;
  place-items: center;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.document-tab__close {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-right: 3px;
  padding: 0;
  place-items: center;
  color: var(--ink-faint);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.document-tab__close:hover,
.document-tab__close:focus-visible {
  color: var(--ink);
  background: #d4dae4;
}

.document-tab svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.document-tab__title,
.document-tab__title-input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 3px;
  color: inherit;
  background: transparent;
  text-align: left;
}

.document-tab__title {
  overflow: hidden;
  cursor: text;
  text-overflow: ellipsis;
}

.document-tab__title:hover,
.document-tab__title:focus-visible {
  background: rgba(90, 108, 145, .11);
}

.document-tab__title-input {
  height: 20px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  outline: 0;
  background: white;
}

.document-tab__save-state {
  flex: 0 0 auto;
  padding-left: 2px;
  color: var(--ink-faint);
  font-size: 10px;
  font-style: normal;
}

.document-tab__save-state.is-dirty {
  color: #bf6811;
}

.document-tab__save-state.is-saved {
  color: #16885a;
}

.workspace-help {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-faint);
  font-size: 11px;
}

kbd {
  padding: 2px 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: white;
  font: inherit;
  font-size: 10px;
}

.workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background-color: var(--bg-workspace);
  background-image: radial-gradient(circle at 1px 1px, rgba(92, 101, 117, .13) 1px, transparent 0);
  background-size: 20px 20px;
  scrollbar-color: #9ca4b1 #d8dce2;
  scrollbar-width: thin;
}

.workspace::before {
  position: fixed;
  z-index: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 40%);
  content: "";
  pointer-events: none;
}

.workspace-ruler {
  position: sticky;
  z-index: 2;
  opacity: .7;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: auto;
  user-select: none;
}

.workspace-ruler__canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.guide-lock-button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  width: 30px;
  height: 24px;
  padding: 0;
  place-items: center;
  color: #5e6673;
  border: 0;
  border-right: 1px solid rgba(98,106,120,.24);
  border-bottom: 1px solid rgba(98,106,120,.2);
  border-radius: 0;
  outline: 0;
  background: rgba(230,233,238,.98);
  box-shadow: none;
  cursor: pointer;
}

.guide-lock-button:hover,
.guide-lock-button:focus-visible,
.guide-lock-button.is-locked {
  color: var(--accent);
  background: rgba(219,230,255,.98);
}

.guide-lock-button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.guide-lock-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-lock-button__closed,
.guide-lock-button.is-locked .guide-lock-button__open {
  display: none;
}

.guide-lock-button.is-locked .guide-lock-button__closed {
  display: inline;
}

.workspace-ruler--horizontal {
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background: rgba(239,241,244,.9);
  border-bottom: 1px solid rgba(98,106,120,.2);
  cursor: row-resize;
}

.workspace-ruler--vertical {
  position: absolute;
  top: 24px;
  left: 0;
  width: 30px;
  height: calc(100% - 24px);
  background: rgba(239,241,244,.9);
  border-right: 1px solid rgba(98,106,120,.2);
  cursor: col-resize;
  transform-origin: top left;
}

.workspace-ruler:hover,
.workspace-ruler:active {
  opacity: 1;
  background-color: rgba(219, 230, 255, .9);
}

.canvas-shell {
  position: relative;
  width: fit-content;
  min-width: 160px;
  min-height: 120px;
  margin: 56px auto;
  transform-origin: top left;
}

#artboard {
  position: relative;
  z-index: 1;
  display: block;
  overflow: visible;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: white;
  box-shadow: 0 0 0 1px rgba(82, 89, 102, .38);
  shape-rendering: geometricPrecision;
  font-synthesis: weight style;
  stroke: none;
  stroke-width: 0;
}

#artboard.is-pixelated {
  image-rendering: pixelated;
}

#artboard.is-transparent-canvas {
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #e1e5eb 25%, transparent 25%), linear-gradient(-45deg, #e1e5eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e1e5eb 75%), linear-gradient(-45deg, transparent 75%, #e1e5eb 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.inline-text-editor {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  min-width: 52px;
  min-height: 28px;
  padding: 2px 5px;
  overflow: hidden;
  resize: none;
  border: 1px dashed #3158db;
  outline: 1px solid rgba(79, 99, 233, .18);
  outline-offset: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 7px rgba(30, 41, 59, .16);
  line-height: 1.2;
  font-synthesis: weight style;
  white-space: pre;
}

.empty-hint {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  width: 314px;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 18px;
  color: var(--ink-faint);
  border: 1px solid rgba(205, 211, 223, .8);
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  backdrop-filter: blur(4px);
}

.empty-hint-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
}

.empty-hint-icon svg {
  width: 17px;
}

.empty-hint strong {
  color: var(--ink);
  font-size: 13px;
}

.empty-hint-copy {
  font-size: 11px;
}

.empty-hint-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 5px;
}

.empty-hint-actions button {
  display: inline-flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-panel);
  font-size: 11px;
  font-weight: 680;
}

.empty-hint-actions button:last-child {
  grid-column: 1 / -1;
}

.empty-hint-actions button:hover,
.empty-hint-actions button:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.empty-hint-actions .tabler-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.workspace-status {
  min-width: 0;
  padding: 0 10px;
  border-top: 1px solid #bfc5cf;
  box-shadow: 0 -1px 5px rgba(35, 42, 54, .04);
}

.status-section {
  display: flex;
  height: 100%;
  align-items: center;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.position-status {
  width: 115px;
}

.position-status svg {
  width: 14px;
  margin-right: 7px;
}

.selection-count {
  flex: 1;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.autosave-status,
.tab-session-status {
  flex: 0 0 auto;
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.autosave-status .toggle-row--compact,
.tab-session-status .toggle-row--compact {
  margin-right: 0;
}

.toggle-row input:disabled + .switch {
  cursor: not-allowed;
  opacity: .58;
}

.toggle-row input:disabled ~ span:last-child {
  color: var(--ink-faint);
}

.toggle-row--compact {
  margin: 0 8px 0 0;
  white-space: nowrap;
}

.toggle-row--compact .switch {
  width: 24px;
  height: 14px;
  flex-basis: 24px;
}

.toggle-row--compact .switch::after {
  width: 10px;
  height: 10px;
}

.toggle-row--compact input:checked + .switch::after {
  transform: translateX(10px);
}

.status-divider {
  width: 1px;
  height: 19px;
  margin: 0 4px;
  background: var(--line);
}

.zoom-controls button {
  width: 28px;
  height: 28px;
}

.zoom-controls button svg {
  width: 14px;
}

#zoomRange {
  width: 105px;
}

.zoom-preset {
  width: 68px;
  height: 28px;
  padding: 0 4px 0 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-soft);
  background: white;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.zoom-preset:hover,
.zoom-preset:focus-visible {
  color: var(--ink);
  border-color: var(--accent);
  outline: none;
}

#zoomLabel {
  min-width: 50px;
  color: var(--ink-soft);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.zoom-controls .fit-button {
  width: auto;
  margin-left: 4px;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: white;
  font-size: 11px;
}

.right-sidebar {
  position: relative;
  z-index: 4;
  min-width: 0;
  border-left: 1px solid var(--line-strong);
  box-shadow: -3px 0 12px rgba(23, 32, 51, .035);
}

.modifier-panel__content {
  display: grid;
  gap: 12px;
}

.modifier-panel .align-section {
  padding: 0;
}

.modifier-panel .align-section > h2 {
  display: none;
}

.modifier-panel .transform-controls {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) repeat(4, 31px);
  align-items: center;
  gap: 5px;
  padding: 11px 0 0;
  border-top: 1px solid var(--line);
  border-right: 0;
}

.modifier-panel .transform-controls .command-divider {
  display: none;
}

.modifier-panel .transform-controls .mini-button {
  width: 31px;
  height: 31px;
}

.modifier-panel .free-transform-controls {
  display: grid;
  gap: 8px;
  padding: 11px 0 0;
  border-top: 1px solid var(--line);
  border-right: 0;
}

.free-transform-mode-buttons,
.free-transform-actions,
.free-transform-shear-fields {
  display: grid;
  gap: 6px;
}

.free-transform-mode-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.modifier-panel .free-transform-mode-button {
  width: auto;
  min-width: 0;
  padding: 0 5px;
  font-size: 11px;
}

.free-transform-mode-button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong, var(--accent));
}

.free-transform-shear-fields,
.free-transform-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.free-transform-shear-fields .number-field {
  min-width: 0;
}

.free-transform-actions .subtle-button {
  min-width: 0;
  padding-inline: 6px;
  font-size: 11px;
}

.free-transform-controls .property-hint {
  margin: 0;
}

.modifier-panel #pathOperations {
  padding-top: 12px;
}

.sidebar-resizer {
  position: absolute;
  z-index: 12;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
}

.sidebar-resizer::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  content: '';
  background: transparent;
  transition: background-color .14s ease, box-shadow .14s ease;
}

.sidebar-resizer:hover::after,
.sidebar-resizer:focus-visible::after,
.sidebar-resizer.is-resizing::after {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

body.is-resizing-sidebar,
body.is-resizing-sidebar * {
  cursor: col-resize !important;
  user-select: none;
}

.panel {
  padding: 15px 14px;
  border-bottom: 1px solid var(--line-strong);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 14px;
}

.sidebar-panel-toggle,
.sidebar-subsection__toggle {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.sidebar-panel-toggle {
  position: relative;
  left: -2px;
  display: grid;
  width: 18px;
  min-width: 18px;
  height: 22px;
  flex: 0 0 18px;
  margin-left: auto;
  padding: 0;
  align-content: center;
  justify-content: center;
  gap: 0;
  place-items: center;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg-subtle);
  box-shadow: var(--shadow-sm);
}

.sidebar-panel-toggle:hover,
.sidebar-subsection__toggle:hover {
  color: var(--accent);
}

.sidebar-panel-toggle:hover {
  background: var(--accent-soft);
}

.sidebar-panel-toggle:focus-visible,
.sidebar-subsection__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sidebar-panel-toggle svg,
.sidebar-subsection__toggle svg {
  width: 15px;
  flex: 0 0 15px;
  transition: transform .15s ease;
}

.sidebar-panel-toggle svg {
  width: 12px;
  height: 12px;
  margin: auto;
  align-self: center;
  justify-self: center;
}

.sidebar-panel-toggle[aria-expanded="false"] svg,
.sidebar-subsection__toggle[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

.sidebar-panel-content[hidden],
.sidebar-subsection__body[hidden] {
  display: none !important;
}

.panel.is-collapsed {
  padding-bottom: 12px;
}

.panel.is-collapsed > .panel-heading {
  margin-bottom: 0;
}

.layers-panel.is-collapsed {
  min-height: 0;
}

.sidebar-subsection {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.sidebar-subsection__toggle {
  width: 100%;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.sidebar-subsection__body {
  min-width: 0;
}

.modifier-panel .sidebar-subsection__body > :is(.transform-controls, .free-transform-controls, .arrange-actions, .group-actions),
.reusable-assets-panel .sidebar-subsection__body > :is(.library-resource-group, .library-transfer-actions) {
  padding-top: 0;
  border-top: 0;
}

.modifier-panel .sidebar-subsection__body > #pathOperations {
  padding-top: 0;
  border-top: 0;
}

.modifier-panel .sidebar-subsection__body > #pathOperations > legend {
  display: none;
}

.modifier-panel .sidebar-subsection__body > :is(.arrange-actions, .group-actions) > .field-label,
.reusable-assets-panel .sidebar-subsection__body > .library-resource-group > label {
  display: none;
}

.panel-heading h2 {
  margin: 1px 0 0;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -.01em;
}

.eyebrow,
.dialog-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.count-badge {
  padding: 4px 7px;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--bg-subtle);
  font-size: 10px;
}

.document-overview {
  display: grid;
  gap: 7px;
  margin: 0;
}

.document-overview > div {
  display: grid;
  min-width: 0;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}

.document-overview dt {
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 730;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.document-overview dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector-empty {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 20px 22px;
  text-align: center;
}

.inspector-empty > span {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  place-items: center;
  color: #8490b4;
  border-radius: 13px;
  background: #f0f2fa;
}

.inspector-empty svg {
  width: 23px;
}

.inspector-empty strong {
  font-size: 12px;
}

.inspector-empty p {
  max-width: 230px;
  margin: 6px 0 0;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.5;
}

.inspector-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field-group label,
.dialog-body > label,
.property-fieldset > label {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 650;
}

.property-fieldset {
  min-width: 0;
  margin: 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.property-fieldset legend {
  width: 100%;
  padding: 0 8px 0 0;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.property-section-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}

.property-section-toggle:hover {
  color: var(--accent);
}

.property-section-toggle svg {
  width: 14px;
  transition: transform .15s ease;
}

.property-section-toggle[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

.property-fieldset.is-collapsed {
  padding-bottom: 2px;
}

.property-fieldset.is-collapsed > :not(legend) {
  display: none;
}

.property-collapsed-summary {
  display: none;
}

.property-fieldset.is-collapsed > .property-collapsed-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-top: 10px;
}

.property-collapsed-summary__item {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.property-collapsed-summary__item small {
  color: var(--ink-faint);
  font-size: 10px;
}

.property-collapsed-summary__item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 680;
  text-overflow: ellipsis;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.auto-shape-property-grid > .field-label,
.auto-shape-property-grid > .toggle-row {
  min-width: 0;
}

.auto-shape-property-grid > .toggle-row {
  min-height: 31px;
  padding: 4px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel-raised, white);
}

.auto-shape-property-grid > .toggle-row:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.number-field {
  display: grid;
  height: 31px;
  grid-template-columns: auto minmax(0, 1fr) auto 19px;
  align-items: center;
  overflow: hidden;
  color: var(--ink-faint);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: white;
  font-size: 11px;
}

.number-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.number-field span {
  min-width: 24px;
  padding-left: 7px;
  color: var(--ink-soft);
  font-weight: 700;
}

.number-field--long-label span {
  min-width: 53px;
}

.number-field input {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  font-size: 11px;
}

.number-field em {
  padding-right: 4px;
  font-style: normal;
}

.number-scrubber-button {
  width: 19px;
  height: 100%;
  padding: 0;
  color: var(--ink-soft);
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg-subtle);
  font-size: 10px;
  line-height: 1;
  cursor: ns-resize;
  touch-action: none;
}

.unit-input .number-scrubber-button {
  flex: 0 0 19px;
  align-self: stretch;
}

.number-scrubber-button:hover,
.number-scrubber-button[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}

.number-scrubber {
  position: fixed;
  z-index: 10050;
  width: 48px;
  height: 196px;
  padding: 7px 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-panel);
  box-shadow: 0 12px 28px rgba(20, 24, 35, .28);
  user-select: none;
  touch-action: none;
}

.number-scrubber output {
  display: block;
  width: 100%;
  height: 21px;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 21px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.number-scrubber__track {
  position: relative;
  width: 100%;
  height: 158px;
  cursor: ns-resize;
}

.number-scrubber__track::before {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 50%;
  width: 2px;
  content: "";
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--line-strong);
}

.number-scrubber__thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 32px;
  height: 11px;
  transform: translateY(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg-subtle);
  box-shadow: 0 1px 2px rgba(20, 24, 35, .2);
  pointer-events: none;
}

.field-grid--wide {
  grid-column: 1 / -1;
}

.field-grid--wide span {
  min-width: 60px;
}

.style-property-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 39px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.style-property-row label {
  color: var(--ink-soft);
  font-size: 11px;
}

.style-property-row output {
  color: var(--ink-soft);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.appearance-primary-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin-bottom: 9px;
}

.appearance-blend-mode {
  width: 100%;
  max-width: none;
  margin: 0;
}

.appearance-blend-mode select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.appearance-stroke-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}

.appearance-stroke-row:has(#strokeTypeRow[hidden]) {
  grid-template-columns: 108px;
  justify-content: end;
}

.appearance-stroke-width {
  height: 29px;
}

.appearance-color-row {
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.opacity-picker {
  display: grid;
  width: 72px;
  height: 29px;
  grid-template-columns: 20px minmax(0, 1fr) 19px;
  flex: 0 0 auto;
}

.opacity-picker .opacity-picker__checker {
  box-sizing: border-box;
  width: 13px;
  height: 15px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 1px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #9da3ac 25%, transparent 25%),
    linear-gradient(-45deg, #9da3ac 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #9da3ac 75%),
    linear-gradient(-45deg, transparent 75%, #9da3ac 75%);
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-size: 8px 8px;
}

.opacity-picker input {
  width: 100%;
  padding-right: 1px;
  padding-left: 3px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.opacity-picker .number-scrubber-button {
  grid-column: 3;
}

.stroke-type-row {
  position: relative;
  display: grid;
  height: 29px;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) 19px;
  align-items: center;
  overflow: hidden;
  margin: 0;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: white;
  font-size: 11px;
}

.stroke-type-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.stroke-type-row > span {
  z-index: 1;
  padding-left: 8px;
  color: var(--ink-soft);
  font-weight: 700;
  white-space: nowrap;
}

.stroke-type-row select {
  z-index: 1;
  height: 100%;
  width: 100%;
  min-width: 0;
  min-height: 0;
  grid-column: 2 / 4;
  grid-row: 1;
  padding: 4px 22px 4px 5px;
  border: 0;
  border-radius: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  box-shadow: none !important;
  color: var(--ink-soft);
  font-size: 11px;
}

.stroke-type-row::after {
  z-index: 2;
  display: grid;
  width: 19px;
  height: 100%;
  box-sizing: border-box;
  grid-column: 3;
  grid-row: 1;
  place-items: center;
  content: "▾";
  color: var(--ink-soft);
  border-left: 1px solid var(--line);
  background: var(--bg-subtle);
  font-size: 10px;
  pointer-events: none;
}

.style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.property-dock #appearanceProperties {
  flex-basis: 342px;
}

.fill-paint-panel {
  display: grid;
  gap: 8px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.fill-paint-panel[hidden],
.fill-gradient-controls[hidden],
.fill-image-controls[hidden],
#propFillField[hidden] {
  display: none !important;
}

.fill-paint-type {
  display: grid;
  width: 252px;
  max-width: 100%;
  height: 31px;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel-raised, white);
  font-size: 11px;
}

.fill-paint-type:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fill-paint-type span {
  padding-left: 8px;
  font-weight: 700;
}

.fill-paint-type select {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 3px 25px 3px 8px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background-color: transparent;
  box-shadow: none !important;
}

.fill-gradient-controls,
.fill-image-controls {
  display: grid;
  gap: 7px;
}

.fill-stop-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
}

.fill-stop-list {
  position: relative;
  height: 31px;
  overflow: visible;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #d8dbe1 25%, transparent 25%),
    linear-gradient(-45deg, #d8dbe1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d8dbe1 75%),
    linear-gradient(-45deg, transparent 75%, #d8dbe1 75%);
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  background-size: 10px 10px;
}

.fill-stop-list::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fill-stop-gradient, transparent);
  content: "";
}

.fill-stop-list::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent calc(25% - .5px), rgba(15, 23, 42, .36) 25%, transparent calc(25% + .5px),
    transparent calc(50% - .5px), rgba(15, 23, 42, .44) 50%, transparent calc(50% + .5px),
    transparent calc(75% - .5px), rgba(15, 23, 42, .36) 75%, transparent calc(75% + .5px));
  pointer-events: none;
  content: "";
}

.fill-stop-marker {
  position: absolute;
  z-index: 2;
  bottom: -4px;
  width: 12px;
  height: 17px;
  padding: 0;
  border: 2px solid var(--bg-panel);
  border-radius: 3px 3px 6px 6px;
  outline: 1px solid var(--line-strong);
  background: var(--stop-color, #000);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
  cursor: grab;
  transform: translate(-50%, var(--stop-drag-y, 0px));
  touch-action: none;
}

.fill-stop-marker:active { cursor: grabbing; }

.fill-stop-marker.is-removing {
  opacity: .35;
  outline-color: var(--danger, #dc2626);
}

.fill-stop-marker[aria-selected="true"] {
  z-index: 3;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.fill-stop-marker::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 43%, rgba(255,255,255,.85) 45%, rgba(255,255,255,.85) 55%, transparent 57%);
  opacity: var(--stop-alpha, 0);
  content: "";
}

.fill-stop-actions {
  display: grid;
  grid-template-columns: repeat(2, 28px);
  gap: 4px;
}

.fill-stop-actions .subtle-button {
  min-width: 0;
  padding: 0;
  font-size: 16px;
}

.fill-stop-fields .number-field,
.fill-image-fields .number-field {
  grid-template-columns: auto minmax(36px, 1fr) auto 19px;
}

.fill-stop-fields .number-field span,
.fill-image-fields .number-field span {
  min-width: 0;
  font-size: 10px;
}

.fill-image-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.fill-image-toolbar .subtle-button {
  min-width: 0;
  white-space: nowrap;
}

.fill-paint-panel .property-hint {
  margin: 0;
}

.property-dock #strokeProperties {
  flex-basis: 340px;
}

.stroke-properties {
  min-width: 0;
}

.stroke-stack-toolbar {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) minmax(76px, 1fr) 28px 28px 28px;
  gap: 4px;
  margin-bottom: 7px;
}

.stroke-stack-toolbar .subtle-button {
  min-width: 0;
  padding-inline: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stroke-stack-list {
  display: grid;
  gap: 4px;
  max-height: 112px;
  margin-bottom: 9px;
  overflow-y: auto;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.stroke-stack-item {
  display: grid;
  min-width: 0;
  grid-template-columns: 15px 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-subtle);
  text-align: left;
}

.stroke-stack-item:hover,
.stroke-stack-item[aria-selected="true"] {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.stroke-stack-item.is-disabled {
  opacity: .55;
}

.stroke-stack-item__visibility {
  width: 14px;
  font-size: 12px;
  text-align: center;
}

.stroke-stack-item__swatch {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(15, 23, 42, .35);
  border-radius: 50%;
  background: var(--stroke-color, #172033);
}

.stroke-stack-item__name {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stroke-stack-item__summary {
  color: var(--ink-faint);
  font-size: 10px;
  white-space: nowrap;
}

.stroke-editor {
  display: grid;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.stroke-editor > .field-label,
.stroke-option-grid .field-label,
.stroke-marker-grid .field-label {
  display: grid;
  gap: 4px;
}

.stroke-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.stroke-dash-array input {
  width: 100%;
  min-width: 0;
}

.stroke-marker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: 7px;
}

.stroke-marker-grid .number-field {
  grid-template-columns: auto minmax(32px, 1fr) auto 19px;
}

.stroke-marker-grid .number-field span {
  font-size: 10px;
}

.stroke-to-path-button {
  width: 100%;
}

.bitmap-mode-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  padding: 10px 11px;
  border: 1px solid var(--line, #d6d9e0);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel, #ffffff) 86%, var(--accent, #3158db) 14%);
}

.bitmap-mode-card > strong { font-size: 12px; }
.bitmap-mode-card > span { color: var(--accent, #3158db); font-size: 11px; font-weight: 700; }
.bitmap-mode-card > p { grid-column: 1 / -1; margin: 0; color: var(--muted, #697386); font-size: 11px; line-height: 1.35; }
.bitmap-rasterize-button { width: 100%; }

.bitmap-choice-list { display: grid; gap: 9px; }
.bitmap-choice {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line, #d6d9e0);
  border-radius: 9px;
  background: var(--panel, #ffffff);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.bitmap-choice:hover, .bitmap-choice:focus-visible { border-color: var(--accent, #3158db); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #3158db) 18%, transparent); }
.bitmap-choice span { color: var(--muted, #697386); font-size: 12px; line-height: 1.4; }

.property-hint {
  margin: 0 0 9px;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.35;
}

.effect-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.effect-add-row select {
  width: 100%;
  min-width: 0;
}

.effect-add-row .subtle-button {
  min-width: 76px;
  padding-inline: 8px;
}

.effect-stack-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.effect-stack-toolbar .subtle-button {
  min-width: 0;
  padding: 6px 4px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.effect-stack-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.effect-stack-empty {
  margin: 2px 0 0;
  padding: 10px 8px;
  color: var(--ink-faint);
  border: 1px dashed var(--line-strong);
  border-radius: 7px;
  background: var(--bg-subtle);
  font-size: 11px;
  text-align: center;
}

.effect-card {
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg-subtle) 72%, white);
}

.effect-card.is-editing {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line-strong));
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.effect-card.is-disabled .effect-card__enabled {
  opacity: .68;
}

.effect-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.effect-card__enabled {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
}

.effect-card__enabled span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.effect-card__enabled input {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.effect-card__actions {
  display: flex;
  gap: 2px;
}

.effect-card__actions button {
  display: grid;
  width: 23px;
  height: 23px;
  padding: 0;
  place-items: center;
  color: var(--ink-faint);
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  font-size: 13px;
  line-height: 1;
}

.effect-card__actions [data-effect-action="edit"] {
  font-size: 12px;
}

.effect-card__actions button:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--line-strong);
  background: var(--accent-soft);
}

.effect-card__actions button:disabled {
  opacity: .58;
}

.effect-card__controls {
  position: fixed;
  z-index: 10040;
  display: none;
  width: min(330px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  gap: 6px;
  margin: 0;
  padding: 10px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg-panel);
  box-shadow: 0 14px 34px rgba(20, 24, 35, .3);
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
  animation: effect-editor-in .12s ease-out;
}

.effect-card.is-editing .effect-card__controls {
  display: grid;
}

.effect-editor__header {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -3px -3px 2px;
  padding: 0 1px 6px;
  border-bottom: 1px solid var(--line);
}

.effect-editor__header strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.effect-editor__close {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  color: var(--ink-faint);
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  font-size: 15px;
}

.effect-editor__close:hover {
  color: var(--accent);
  border-color: var(--line-strong);
  background: var(--accent-soft);
}

@keyframes effect-editor-in {
  from { opacity: 0; transform: translateY(4px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.effect-card__note {
  margin: 0;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.35;
}

.effect-control-row {
  display: grid;
  grid-template-columns: 58px minmax(35px, 1fr) 72px;
  align-items: center;
  gap: 6px;
}

.effect-control-row > label {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.effect-control-value {
  display: grid;
  height: 27px;
  grid-template-columns: minmax(0, 1fr) auto 19px;
  align-items: center;
  overflow: hidden;
  color: var(--ink-faint);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: white;
  font-size: 11px;
}

.effect-control-value:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.effect-control-value input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 3px 2px 3px 5px;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  font-size: 11px;
}

.effect-control-value em {
  padding-right: 3px;
  font-style: normal;
}

.effect-color-control {
  display: grid;
  height: 29px;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 11px;
}

.effect-color-control input[type="color"] {
  width: 100%;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: white;
}

.color-field {
  position: relative;
  display: flex;
  height: 31px;
  align-items: center;
  justify-content: space-between;
  padding-left: 8px;
  color: var(--ink-soft);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 11px;
}

.color-field input {
  width: 39px;
  height: 38px;
  margin-right: -4px;
  padding: 0;
  border: 0;
  background: none;
}

.color-field.is-transparent::after,
.inline-color.is-transparent::after,
.dialog-color-field.is-transparent::after {
  position: absolute;
  z-index: 2;
  right: 2px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(15,23,42,.2);
  border-radius: 4px;
  background-color: rgba(255,255,255,.86);
  background-image: linear-gradient(135deg, transparent 45%, #e5243b 46%, #e5243b 54%, transparent 55%), linear-gradient(45deg, #d8dbe1 25%, transparent 25%), linear-gradient(-45deg, #d8dbe1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d8dbe1 75%), linear-gradient(-45deg, transparent 75%, #d8dbe1 75%);
  background-position: 0 0, 0 0, 0 5px, 5px -5px, -5px 0;
  background-size: auto, 10px 10px, 10px 10px, 10px 10px, 10px 10px;
  content: "";
  pointer-events: none;
}

.inline-color.is-transparent::after {
  top: -1px;
  right: -1px;
  width: 25px;
  height: 25px;
}

.dialog-color-field.is-transparent::after {
  right: 8px;
  width: 30px;
  height: 25px;
}

.number-field--standalone {
  grid-column: 1 / -1;
}

#propText {
  width: 100%;
  margin: 5px 0 7px;
  resize: vertical;
}

.text-property-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 7px;
}

.text-property-actions .subtle-button {
  height: 27px;
  min-width: 0;
  justify-content: flex-start;
  gap: 3px;
  padding: 0 3px;
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
}

.text-property-actions .subtle-button svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.text-property-actions .subtle-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-font-dialog {
  width: min(500px, calc(100vw - 32px));
}

.google-font-url-field {
  display: grid;
  gap: 6px;
}

.google-font-url-field input {
  width: 100%;
}

.google-font-status {
  min-height: 18px;
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.google-font-status[data-tone="error"] {
  color: var(--danger);
}

.google-font-status[data-tone="success"] {
  color: #16885a;
}

.text-property-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.text-property-row--primary {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) 86px;
  margin: 5px 0 9px;
}

.text-property-row--primary #propFontFamily {
  grid-column: auto;
}

.text-property-row--primary #propFontStyle {
  grid-column: auto;
}

.text-property-row.text-property-row--primary > .unit-input {
  grid-column: auto;
}

.text-primary-format-buttons {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
}

.text-primary-format-buttons .format-button {
  min-width: 0;
  width: 100%;
}

.text-property-row select {
  min-width: 0;
  width: 100%;
  grid-column: span 2;
}

.text-property-row .unit-input {
  grid-column: span 2;
  width: 100%;
}

.text-property-row .format-button {
  min-width: 0;
  width: 100%;
}

.text-format-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.text-format-grid .field-label,
.text-rendering-row .field-label {
  display: grid;
  gap: 3px;
  margin: 0;
  font-size: 10px;
}

.text-format-grid select,
.text-format-grid input,
.text-rendering-row select {
  min-width: 0;
  width: 100%;
}

.text-format-grid .number-field {
  min-width: 0;
}

.text-format-grid .number-field input {
  min-width: 0;
}

.text-rendering-row {
  display: flex;
  min-width: 0;
  align-items: end;
  gap: 5px;
  margin-top: 8px;
}

#propAlignLeft { text-align: left; }
#propAlignCenter { text-align: center; }
#propAlignRight { text-align: right; }

.text-rendering-row .field-label {
  min-width: 0;
  flex: 1 1 auto;
}

.text-rendering-row .toggle-row {
  flex: 0 0 auto;
  margin: 0 0 2px;
}

.property-note {
  margin: 2px 0 8px;
  color: var(--ink-faint);
  font-size: 11px;
}

.text-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.text-path-grid .field-label {
  display: grid;
  gap: 3px;
  margin: 0;
  font-size: 10px;
}

.text-path-grid select {
  width: 100%;
  min-width: 0;
}

.text-path-grid .number-field {
  min-width: 0;
}

.text-path-grid__wide {
  grid-column: 1 / -1;
}

.text-path-grid .toggle-row {
  margin: 2px 0 0;
}

.text-path-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.text-path-actions .subtle-button {
  min-width: 0;
  padding: 6px 5px;
  font-size: 11px;
}

.group-actions {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.path-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 7px;
}

.path-action-grid--masks {
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.path-action-grid--clips {
  padding-top: 7px;
  border-top: 1px dashed var(--line);
}

.path-action-grid button {
  min-width: 0;
  min-height: 31px;
  padding: 5px 4px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-subtle);
  font-size: 11px;
  font-weight: 680;
}

.path-action-grid button:hover:not(:disabled) {
  color: var(--accent);
  border-color: #bfc7ff;
  background: var(--accent-soft);
}

.path-action-grid button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.path-action-grid__wide {
  grid-column: 1 / -1;
}

.group-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 6px;
}

.group-action-grid button {
  display: inline-flex;
  min-width: 0;
  height: 31px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-subtle);
  font-size: 11px;
  font-weight: 680;
}

.group-action-grid button:hover:not(:disabled) {
  color: var(--accent);
  border-color: #bfc7ff;
  background: var(--accent-soft);
}

.group-action-grid button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.group-action-grid :is(svg, img) {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}

.group-action-grid__wide,
.group-action-grid__flatten {
  grid-column: 1 / -1;
}

.arrange-actions {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.segmented-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}

.segmented-actions button {
  height: 31px;
  border-right: 1px solid var(--line);
  border-radius: 0;
}

.segmented-actions button:last-child {
  border-right: 0;
}

.segmented-actions svg {
  width: 16px;
}

.wide-button {
  display: flex;
  width: 100%;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-subtle);
  font-size: 11px;
  font-weight: 650;
}

.wide-button:hover {
  color: var(--accent);
  border-color: #bfc7ff;
  background: var(--accent-soft);
}

.wide-button svg {
  width: 15px;
}

.reusable-assets-panel {
  display: grid;
  gap: 10px;
}

.reusable-assets-panel .sidebar-panel-content {
  display: grid;
  gap: 10px;
}

.reusable-assets-panel .panel-heading {
  margin-bottom: 0;
}

.library-hint {
  margin: 0;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.4;
}

.library-resource-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.library-resource-group > label {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 720;
}

.library-resource-group select {
  width: 100%;
  min-width: 0;
  height: 28px;
}

.library-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.library-action-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.library-action-grid .subtle-button,
.library-transfer-actions .subtle-button {
  min-width: 0;
  height: 31px;
  padding: 0 5px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-delete-button {
  color: #a23a3a;
}

.library-transfer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.layers-panel {
  min-height: 190px;
}

.panel-heading--compact {
  margin-bottom: 10px;
}

.panel-add-button {
  width: 29px;
  height: 29px;
  color: white;
  background: var(--accent);
  box-shadow: 0 3px 8px rgba(79, 99, 233, .22);
}

.panel-add-button:hover {
  color: white;
  background: var(--accent-hover);
}

.panel-add-button svg {
  width: 16px;
}

.layer-list {
  min-height: 80px;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-subtle);
}

.layer-drag-hint {
  margin: -2px 1px 7px;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.35;
}

.layer-list:empty::after {
  display: flex;
  min-height: 80px;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  content: "Noch keine Ebenen";
  font-size: 11px;
}

.layer-row {
  position: relative;
  display: grid;
  min-height: 42px;
  grid-template-columns: 25px 25px 25px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 3px;
  padding: 4px 5px;
  border-bottom: 1px solid var(--line);
  background: white;
}

.layer-entry:last-child .layer-row {
  border-bottom: 0;
}

.layer-entry:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.layer-row.is-active,
.layer-row[aria-selected="true"] {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 var(--accent);
}

.layer-row button {
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  color: var(--ink-faint);
  border-radius: 5px;
  background: transparent;
}

.layer-expand svg {
  width: 14px;
  transition: transform .14s ease;
}

.layer-expand[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

.layer-row button:hover {
  color: var(--ink);
  background: rgba(255,255,255,.8);
}

.layer-row input,
.layer-row .layer-name {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-object-list {
  position: relative;
  padding: 3px 4px 5px 17px;
  border-top: 1px solid var(--line);
  background: #f7f8fb;
}

.layer-object-list[hidden] {
  display: none;
}

.layer-object-list:empty::after {
  display: block;
  padding: 5px 7px;
  color: var(--ink-faint);
  content: "Keine Objekte auf dieser Ebene";
  font-size: 11px;
}

.layer-object-row {
  position: relative;
  display: grid;
  min-height: 34px;
  grid-template-columns: 17px 24px 24px 32px minmax(0, 1fr);
  align-items: center;
  gap: 2px;
  padding: 2px 3px;
  border-radius: 5px;
  color: var(--ink-soft);
  cursor: grab;
}

.layer-object-row:active { cursor: grabbing; }

.layer-object-drag-handle {
  display: grid;
  width: 17px;
  height: 30px;
  place-items: center;
  color: var(--ink-faint);
  cursor: grab;
}

.layer-object-row .layer-object-drag-handle svg { width: 12px; }

.layer-object-row[draggable="false"] .layer-object-drag-handle {
  opacity: .35;
  cursor: not-allowed;
}

.layer-list.is-object-dragging .layer-object-row.is-dragging {
  opacity: .38;
}

.layer-object-row.is-object-drop-before::after,
.layer-object-row.is-object-drop-after::after {
  position: absolute;
  z-index: 3;
  right: 2px;
  left: 2px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 1px white, 0 1px 5px color-mix(in srgb, var(--accent) 42%, transparent);
  content: "";
  pointer-events: none;
}

.layer-object-row.is-object-drop-before::after { top: -3px; }
.layer-object-row.is-object-drop-after::after { bottom: -3px; }

.layer-row.is-object-drop-target,
.layer-object-list.is-object-drop-target,
.layer-entry.is-object-drop-target {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
}

.layer-row.is-object-drop-blocked,
.layer-object-list.is-object-drop-blocked,
.layer-object-row.is-object-drop-blocked,
.layer-entry.is-object-drop-blocked {
  outline: 2px solid #d14343;
  outline-offset: -2px;
  cursor: not-allowed;
}

.layer-object-row:hover {
  background: #eef1f7;
}

.layer-object-row.is-selected {
  color: var(--ink);
  background: #e6eaff;
  box-shadow: inset 2px 0 var(--accent);
}

.layer-object-row.is-hidden,
.layer-object-row.is-locked {
  color: var(--ink-faint);
}

.layer-object-row.is-hidden .layer-object-name {
  text-decoration: line-through;
}

.layer-object-row.is-hidden .layer-object-thumbnail {
  opacity: .45;
  filter: grayscale(.55);
}

.layer-object-row button {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  color: var(--ink-faint);
  border-radius: 4px;
  background: transparent;
}

.layer-object-row button:hover {
  color: var(--ink);
  background: rgba(255,255,255,.9);
}

.layer-object-row svg {
  width: 14px;
}

.layer-object-thumbnail {
  display: grid;
  width: 30px;
  height: 26px;
  overflow: hidden;
  place-items: center;
  color: var(--accent);
  border: 1px solid #c8cedb;
  border-radius: 3px;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #e9ecf2 25%, transparent 25%),
    linear-gradient(-45deg, #e9ecf2 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9ecf2 75%),
    linear-gradient(-45deg, transparent 75%, #e9ecf2 75%);
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
  background-size: 6px 6px;
  font-size: 10px;
  font-weight: 750;
  pointer-events: none;
  transition: border-color 120ms ease, opacity 120ms ease;
}

.layer-object-thumbnail > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.layer-object-row.is-selected .layer-object-thumbnail {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

.layer-object-name {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-actions {
  display: flex;
  margin-top: 7px;
  gap: 3px;
}

.layer-blend-mode {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: 11px;
}

.layer-blend-mode select {
  min-width: 0;
  height: 28px;
}

.layer-actions button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
}

.layer-actions svg {
  width: 15px;
}

.layer-action-spacer {
  flex: 1;
}

.app-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid rgba(205, 211, 223, .75);
  border-radius: 14px;
  background: white;
  box-shadow: 0 24px 75px rgba(13, 20, 36, .28), 0 5px 18px rgba(13, 20, 36, .16);
}

.app-dialog::backdrop {
  background: rgba(27, 34, 49, .52);
  backdrop-filter: blur(3px);
}

.splash-dialog {
  position: relative;
  width: min(1000px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 211, 223, .9);
  border-radius: 14px;
  background: #d8d8d8;
  box-shadow: 0 24px 75px rgba(13, 20, 36, .34), 0 5px 18px rgba(13, 20, 36, .2);
}

.splash-dialog::backdrop {
  background: rgba(27, 34, 49, .62);
  backdrop-filter: blur(4px);
}

.splash-dialog[open] {
  animation: dialog-in .18s ease-out;
}

.splash-dialog img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 40px);
  object-fit: contain;
}

.splash-dialog__close {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: #172033;
  border: 1px solid rgba(23, 32, 51, .18);
  border-radius: 7px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 2px 7px rgba(23, 32, 51, .14);
  font-size: 21px;
  line-height: 1;
}

.splash-dialog__close:hover {
  background: white;
}

.app-dialog[open] {
  animation: dialog-in .18s ease-out;
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.welcome-dialog {
  display: none;
  width: min(720px, calc(100vw - 32px));
  grid-template-columns: 245px minmax(0, 1fr);
}

.welcome-dialog[open] {
  display: grid;
}

.dialog-hero {
  display: grid;
  min-height: 355px;
  place-items: center;
  overflow: hidden;
  background-color: #5367e9;
  background-image: radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), transparent 28%), linear-gradient(145deg, transparent 25%, rgba(28,42,150,.3));
}

.dialog-hero::before,
.dialog-hero::after {
  position: absolute;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 32px;
  content: "";
  transform: rotate(28deg) translate(-72px, -95px);
}

.dialog-hero::after {
  width: 100px;
  height: 100px;
  transform: rotate(28deg) translate(105px, 115px);
}

.dialog-hero > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100px;
  height: 100px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 30px;
  background: rgba(255,255,255,.14);
  box-shadow: 0 18px 45px rgba(25, 36, 130, .3);
  backdrop-filter: blur(5px);
}

.dialog-hero svg {
  width: 58px;
  color: white;
  stroke-width: 1.8;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px;
}

.dialog-content h2 {
  max-width: 340px;
  margin: 6px 0 12px;
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.dialog-content > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.65;
}

.welcome-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0 24px;
}

.welcome-features span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  font-size: 11px;
}

.welcome-features i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 21px 22px 16px;
  border-bottom: 1px solid var(--line);
}

.dialog-header h2 {
  margin: 3px 0 0;
  font-size: 18px;
  letter-spacing: -.02em;
}

.dialog-close {
  width: 30px;
  height: 30px;
  color: var(--ink-faint);
  border-radius: 6px;
  background: var(--bg-subtle);
  font-size: 20px;
  line-height: 1;
}

.dialog-close:hover {
  color: var(--ink);
  background: #eceff5;
}

.dialog-body {
  padding: 20px 22px;
}

.dialog-body textarea {
  width: 100%;
  margin-top: 6px;
  resize: vertical;
}

.dialog-note,
.dialog-warning {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.5;
}

.dialog-warning {
  padding: 9px 11px;
  color: #896725;
  border: 1px solid #ead9b1;
  border-radius: 6px;
  background: #fff9ea;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 13px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg-subtle);
}

.dialog-content .dialog-actions {
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
}

.dialog-button {
  min-height: 34px;
  padding: 0 15px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: white;
  font-size: 11px;
  font-weight: 680;
}

.dialog-button:hover {
  border-color: #afb7c7;
  background: #fafbfc;
}

.dialog-button--primary {
  color: white;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 4px 10px rgba(79, 99, 233, .22);
}

.dialog-button--primary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

.svg-import-report-dialog {
  width: min(680px, calc(100vw - 32px));
}

.about-dialog {
  width: min(520px, calc(100vw - 32px));
}

.about-dialog__body {
  max-height: min(620px, calc(100vh - 180px));
  overflow: auto;
}

.about-dialog__version {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 18px;
  color: var(--ink-soft);
}

.about-dialog__version strong {
  color: var(--ink);
  font-size: 14px;
}

.about-dialog__body section + section {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.about-dialog__body h3 {
  margin: 0 0 5px;
  font-size: 12px;
}

.about-dialog__body section p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.55;
}

.about-dialog__body a {
  color: var(--accent);
}

.svg-import-report-dialog .dialog-body {
  max-height: min(620px, calc(100vh - 180px));
  overflow: auto;
}

.svg-import-report__file {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.svg-import-report__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 14px;
}

.svg-import-report__summary > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-subtle);
  font-size: 10px;
}

.svg-import-report__summary strong {
  color: var(--ink);
  font-size: 17px;
}

.svg-import-report__summary [data-status="approximated"] strong { color: #a06d00; }
.svg-import-report__summary [data-status="ignored"] strong { color: #8c5b22; }
.svg-import-report__summary [data-status="blocked"] strong,
.svg-import-report__summary [data-status="missing"] strong { color: var(--danger); }

.svg-import-report__details {
  display: grid;
  gap: 7px;
}

.svg-import-report__details details {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-subtle);
}

.svg-import-report__details summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 760;
}

.svg-import-report__details summary strong {
  min-width: 24px;
  color: var(--ink);
  text-align: right;
}

.svg-import-report__details ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 11px 11px;
  list-style: none;
}

.svg-import-report__details li {
  padding: 8px 9px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-panel);
  font-size: 11px;
  line-height: 1.45;
}

.svg-import-report__details li strong,
.svg-import-report__details li span {
  display: block;
}

.svg-import-report__details li span {
  margin-top: 3px;
  color: var(--ink-faint);
  font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}

.debug-console {
  position: fixed;
  z-index: 2000;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(920px, calc(100vw - 36px));
  height: min(390px, calc(100vh - 36px));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: 0 20px 60px rgba(10, 15, 27, .3), var(--shadow-md);
}

.debug-console[hidden] { display: none; }

.debug-console__header,
.debug-console__toolbar,
.debug-console__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
}

.debug-console__header {
  justify-content: space-between;
}

.debug-console__header h2 {
  margin: 2px 0 0;
  font-size: 15px;
}

.debug-console__close {
  width: 28px;
  height: 28px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-panel);
  font-size: 19px;
}

.debug-console__toolbar {
  flex-wrap: wrap;
  padding-block: 7px;
}

.debug-console__toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 700;
}

.debug-console__toolbar select,
.debug-console__toolbar input,
.debug-console__toolbar button {
  height: 29px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) - 1px);
  background: var(--bg-panel);
  font-size: 11px;
}

.debug-console__toolbar select { min-width: 110px; }
.debug-console__toolbar input { width: min(300px, 35vw); padding-inline: 8px; }
.debug-console__toolbar button { padding-inline: 10px; }
.debug-console__search { flex: 1; }

.debug-console__entries {
  min-height: 0;
  margin: 0;
  padding: 8px;
  overflow: auto;
  background: color-mix(in srgb, var(--bg-panel) 92%, #000 8%);
  list-style: none;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.debug-console__entry,
.debug-console__empty {
  margin-bottom: 5px;
  padding: 7px 9px;
  color: var(--ink-soft);
  border-left: 3px solid var(--line-strong);
  background: var(--bg-panel);
  font-size: 11px;
  line-height: 1.45;
}

.debug-console__entry[data-level="warning"] { border-left-color: #c68a18; }
.debug-console__entry[data-level="error"] { border-left-color: var(--danger); }
.debug-console__entry[data-level="info"] { border-left-color: var(--accent); }

.debug-console__entry-head {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin-bottom: 3px;
  color: var(--ink-faint);
  font-size: 10px;
}

.debug-console__entry-head code {
  color: var(--accent);
  font: inherit;
  font-weight: 760;
}

.debug-console__entry details { margin-top: 5px; }
.debug-console__entry summary { cursor: pointer; color: var(--ink-faint); }
.debug-console__entry pre {
  max-height: 150px;
  margin: 5px 0 0;
  padding: 7px;
  overflow: auto;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--bg-subtle);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.debug-console__footer {
  justify-content: space-between;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  border-bottom: 0;
  font-size: 10px;
}

.debug-console__footer output { color: var(--ink-soft); font-weight: 700; }

@media (max-width: 720px) {
  .svg-import-report__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debug-console { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: min(480px, calc(100vh - 16px)); }
  .debug-console__toolbar input { width: 100%; }
  .debug-console__search { flex-basis: 100%; }
}

.new-canvas-preview {
  display: grid;
  height: 88px;
  margin-bottom: 16px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #e7eaf0;
  background-image: radial-gradient(circle at 1px 1px, rgba(92,101,117,.15) 1px, transparent 0);
  background-size: 12px 12px;
}

.new-canvas-preview span {
  width: var(--preview-width, 110px);
  height: var(--preview-height, 66px);
  border: 1px solid #c5cad4;
  background: var(--preview-color, white);
  box-shadow: 0 4px 10px rgba(30, 38, 52, .13);
  transition: width .12s ease, height .12s ease, background-color .12s ease;
}

.new-canvas-preview.is-transparent span {
  background-color: white;
  background-image: linear-gradient(45deg, #d8dbe1 25%, transparent 25%), linear-gradient(-45deg, #d8dbe1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d8dbe1 75%), linear-gradient(-45deg, transparent 75%, #d8dbe1 75%);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
}

.dialog-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(76px, .55fr);
  gap: 10px;
}

.dialog-field-grid > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 650;
}

.dialog-field-grid .unit-input,
.dialog-field-grid .unit-input input {
  width: 100%;
}

.dialog-color-field {
  position: relative;
  display: grid;
  height: 36px;
  grid-template-columns: 1fr 38px 58px;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}

.new-background-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 30px;
  gap: 6px;
  align-items: stretch;
  margin-top: 10px;
}

.new-background-row .dialog-color-field {
  grid-template-columns: minmax(0, 1fr) 34px;
  min-width: 0;
  margin-top: 0;
}

/* Die Schnellschalter brauchen auf schmalen Dialogen den Platz der HEX-Anzeige.
   Der gewählte Farbton bleibt über das Farbfeld eindeutig sichtbar. */
.new-background-row .dialog-color-field em {
  display: none;
}

.new-background-quick {
  min-width: 0;
  height: 36px;
  padding: 0 4px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: white;
  font-size: 10px;
  font-weight: 700;
}

.new-background-quick:hover,
.new-background-quick:focus-visible {
  position: relative;
  z-index: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.new-background-quick--transparent {
  background-color: #ffffff;
  background-image: linear-gradient(135deg, transparent 45%, #e5243b 46%, #e5243b 54%, transparent 55%), linear-gradient(45deg, #d8dbe1 25%, transparent 25%), linear-gradient(-45deg, #d8dbe1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d8dbe1 75%), linear-gradient(-45deg, transparent 75%, #d8dbe1 75%);
  background-position: 0 0, 0 0, 0 5px, 5px -5px, -5px 0;
  background-size: auto, 10px 10px, 10px 10px, 10px 10px, 10px 10px;
}

.dialog-color-field input {
  width: 34px;
  height: 27px;
  padding: 0;
  border: 0;
  background: none;
}

.dialog-color-field em {
  color: var(--ink-faint);
  font-size: 11px;
  font-style: normal;
}

.pixel-dialog {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
}

.pixel-dialog[hidden] {
  display: none;
}

.pixel-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 34, 49, .57);
  backdrop-filter: blur(3px);
}

.pixel-dialog__surface {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(1000px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  min-height: min(660px, calc(100vh - 40px));
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid rgba(205, 211, 223, .8);
  border-radius: 14px;
  background: white;
  box-shadow: 0 24px 75px rgba(13, 20, 36, .30), 0 5px 18px rgba(13, 20, 36, .16);
  animation: dialog-in .18s ease-out;
}

.pixel-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 17px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.pixel-dialog__header h2 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 17px;
  letter-spacing: -.015em;
}

.pixel-dialog__close {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: var(--ink-faint);
  border-radius: 6px;
  background: transparent;
  font-size: 23px;
  line-height: 1;
}

.pixel-dialog__close:hover {
  color: var(--ink);
  background: var(--bg-subtle);
}

.pixel-dialog__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
}

.pixel-dialog__tools > button {
  height: 29px;
  padding: 0 10px;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: white;
  font-size: 11px;
  font-weight: 650;
}

.pixel-dialog__tools > button:hover,
.pixel-dialog__tools > button[aria-pressed="true"] {
  color: var(--accent);
  border-color: #bfc7ff;
  background: var(--accent-soft);
}

.pixel-dialog__separator {
  width: 1px;
  height: 25px;
  margin: 0 2px;
  background: var(--line-strong);
}

.pixel-dialog__color,
.pixel-dialog__zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 650;
}

.pixel-dialog__color input {
  width: 31px;
  height: 29px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: white;
}

.pixel-dialog__zoom input {
  width: 82px;
}

.pixel-dialog__zoom output,
.pixel-dialog__status {
  color: var(--ink-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.pixel-dialog__grid {
  margin: 0 0 0 2px;
  white-space: nowrap;
}

.pixel-dialog__status {
  min-width: 100px;
  margin-left: auto;
  text-align: right;
}

.pixel-dialog__viewport {
  position: relative;
  min-height: 230px;
  flex: 1;
  overflow: auto;
  padding: 28px;
  background-color: #d7dce4;
  background-image: linear-gradient(45deg, rgba(255,255,255,.36) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.36) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.36) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.36) 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.pixel-dialog__stage {
  position: relative;
  width: 1px;
  height: 1px;
  margin: auto;
  box-shadow: 0 0 0 1px rgba(29,38,55,.32), 0 6px 20px rgba(30,38,52,.2);
}

.pixel-dialog__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.pixel-dialog__grid-overlay {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(30,41,59,.34) 1px, transparent 1px), linear-gradient(to bottom, rgba(30,41,59,.34) 1px, transparent 1px);
  background-size: var(--pixel-cell, 12px) var(--pixel-cell, 12px);
}

.pixel-dialog__grid-overlay.is-visible {
  display: block;
}

.pixel-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: white;
}

.pixel-dialog__actions > span {
  color: var(--ink-faint);
  font-size: 11px;
}

.pixel-dialog__actions > div {
  display: flex;
  gap: 7px;
}

.crop-dialog {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
}

.crop-dialog[hidden] {
  display: none;
}

.crop-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 34, 49, .57);
  backdrop-filter: blur(3px);
}

.crop-dialog__surface {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(930px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  min-height: min(620px, calc(100vh - 40px));
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid rgba(205, 211, 223, .8);
  border-radius: 14px;
  background: white;
  box-shadow: 0 24px 75px rgba(13, 20, 36, .30), 0 5px 18px rgba(13, 20, 36, .16);
  animation: dialog-in .18s ease-out;
}

.crop-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 17px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.crop-dialog__header h2 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 17px;
  letter-spacing: -.015em;
}

.crop-dialog__close {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: var(--ink-faint);
  border-radius: 6px;
  background: transparent;
  font-size: 23px;
  line-height: 1;
}

.crop-dialog__close:hover {
  color: var(--ink);
  background: var(--bg-subtle);
}

.crop-dialog__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
}

.crop-dialog__zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 650;
}

.crop-dialog__zoom input {
  width: 105px;
}

.crop-dialog__zoom output,
.crop-dialog__status {
  color: var(--ink-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.crop-dialog__status {
  margin-left: auto;
}

.crop-dialog__viewport {
  min-height: 230px;
  flex: 1;
  overflow: auto;
  padding: 28px;
  background-color: #d7dce4;
  background-image: linear-gradient(45deg, rgba(255,255,255,.36) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.36) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.36) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.36) 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.crop-dialog__stage {
  position: relative;
  width: 1px;
  height: 1px;
  margin: auto;
  overflow: hidden;
  touch-action: none;
  box-shadow: 0 0 0 1px rgba(29,38,55,.32), 0 6px 20px rgba(30,38,52,.2);
}

.crop-dialog__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  image-rendering: pixelated;
}

.crop-selection {
  position: absolute;
  z-index: 2;
  min-width: 1px;
  min-height: 1px;
  border: 1px solid #ffffff;
  box-shadow: 0 0 0 9999px rgba(12, 19, 31, .54), 0 0 0 1px rgba(23,32,51,.72);
  cursor: move;
}

.crop-selection [data-crop-handle] {
  position: absolute;
  z-index: 3;
  width: 9px;
  height: 9px;
  padding: 0;
  appearance: none;
  border: 1px solid #3157e8;
  border-radius: 1px;
  background: white;
}

.crop-selection [data-crop-handle]:focus-visible { outline: 2px solid var(--focus-ring, #2457d6); outline-offset: 3px; }
.crop-selection [data-crop-handle="nw"] { top: -5px; left: -5px; cursor: nwse-resize; }
.crop-selection [data-crop-handle="n"] { top: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.crop-selection [data-crop-handle="ne"] { top: -5px; right: -5px; cursor: nesw-resize; }
.crop-selection [data-crop-handle="e"] { top: calc(50% - 5px); right: -5px; cursor: ew-resize; }
.crop-selection [data-crop-handle="se"] { right: -5px; bottom: -5px; cursor: nwse-resize; }
.crop-selection [data-crop-handle="s"] { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.crop-selection [data-crop-handle="sw"] { bottom: -5px; left: -5px; cursor: nesw-resize; }
.crop-selection [data-crop-handle="w"] { top: calc(50% - 5px); left: -5px; cursor: ew-resize; }

.crop-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: white;
}

.crop-dialog__actions > span {
  color: var(--ink-faint);
  font-size: 11px;
}

.crop-dialog__actions > div {
  display: flex;
  gap: 7px;
}

.color-palette {
  position: fixed;
  z-index: 140;
  inset: auto;
  width: 344px;
  margin: 0;
  padding: 9px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 42px rgba(24, 31, 50, .22), 0 3px 10px rgba(24, 31, 50, .13);
  transform-origin: top right;
  animation: color-palette-in .12s ease-out;
}

.color-palette[hidden] {
  display: none;
}

.color-palette::backdrop {
  background: transparent;
}

.color-palette.is-sampling,
.color-palette.is-sampling::backdrop {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='m14 4 2-2 6 6-2 2M7 19l10-10-2-2L5 17l-1 4 3-2Z' fill='white' stroke='%23172033' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 21, crosshair;
}

@keyframes color-palette-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.color-palette__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 7px;
  color: var(--ink-soft);
  cursor: grab;
  font-size: 11px;
  touch-action: none;
  user-select: none;
}

.color-palette.is-dragging .color-palette__header {
  cursor: grabbing;
}

.color-palette__header strong {
  font-weight: 720;
}

.color-palette__header button {
  display: grid;
  width: 23px;
  height: 23px;
  padding: 0;
  place-items: center;
  color: var(--ink-faint);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}

.color-palette__header button:hover {
  color: var(--ink);
  background: var(--bg-subtle);
}

.color-palette__grid,
.color-palette__gray,
.color-palette__quick {
  display: grid;
  gap: 1px;
  padding: 1px;
  border: 1px solid #111827;
  background: #111827;
}

.color-palette__grid {
  grid-template-columns: repeat(21, minmax(0, 1fr));
}

.color-palette__gray {
  grid-template-columns: repeat(20, minmax(0, 1fr));
  margin-top: 6px;
}

.color-palette__quick {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin-top: 0;
}

.color-palette__quick-row {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.color-palette__transparent {
  position: relative;
  min-height: 29px;
  padding: 0;
  border: 1px solid #111827;
  background-color: #ffffff;
  background-image: linear-gradient(135deg, transparent 45%, #e5243b 46%, #e5243b 54%, transparent 55%), linear-gradient(45deg, #d8dbe1 25%, transparent 25%), linear-gradient(-45deg, #d8dbe1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d8dbe1 75%), linear-gradient(-45deg, transparent 75%, #d8dbe1 75%);
  background-position: 0 0, 0 0, 0 5px, 5px -5px, -5px 0;
  background-size: auto, 10px 10px, 10px 10px, 10px 10px, 10px 10px;
}

.color-palette__transparent:hover,
.color-palette__transparent:focus-visible {
  z-index: 1;
  outline: 2px solid #ffffff;
  outline-offset: -2px;
  box-shadow: 0 0 0 2px #172033;
}

.color-palette__grid button,
.color-palette__gray button,
.color-palette__quick button {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / .82;
  min-height: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--swatch);
}

.color-palette__grid button:hover,
.color-palette__grid button:focus-visible,
.color-palette__gray button:hover,
.color-palette__gray button:focus-visible,
.color-palette__quick button:hover,
.color-palette__quick button:focus-visible {
  z-index: 1;
  outline: 2px solid #ffffff;
  outline-offset: -2px;
  box-shadow: 0 0 0 2px #172033;
}

.color-palette__values {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: 23px 23px;
  align-items: center;
  gap: 4px 8px;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 650;
}

.color-palette__preview {
  width: 42px;
  height: 42px;
  grid-row: 1 / -1;
  border: 1px solid rgba(15,23,42,.34);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}

.color-palette__hex {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.color-palette__hex input,
.color-palette__rgb input {
  width: 100%;
  height: 29px;
  padding: 0 7px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: white;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
}

.color-palette__hex input {
  height: 23px;
}

.color-palette__hex input[data-invalid="true"] {
  color: var(--danger);
  border-color: #f3a5ae;
  background: #fff7f8;
}

.color-palette__rgb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.color-palette__rgb label {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
}

.color-palette__rgb input {
  height: 23px;
  padding: 0 4px;
  font-size: 11px;
  text-transform: none;
}

.color-palette__apply {
  width: 100%;
  height: 31px;
  margin-top: 10px;
  color: white;
  border-radius: 6px;
  background: var(--accent);
  font-size: 11px;
  font-weight: 680;
}

.color-palette__apply:hover {
  background: var(--accent-hover);
}

.toast-region {
  position: fixed;
  z-index: 100;
  right: 22px;
  bottom: 54px;
  display: flex;
  max-width: 340px;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast,
.toast-region:not(:empty) {
  padding: 10px 13px;
  color: white;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: #253047;
  box-shadow: var(--shadow-md);
  font-size: 11px;
}

/* Graphit folgt einer echten Desktop-Darkmode-Hierarchie: Arbeitsfläche,
   Panels und Eingaben bleiben unterscheidbar, ohne helle Inseln zu bilden. */
:root[data-theme="graphite"] .app-header,
:root[data-theme="graphite"] .tool-sidebar,
:root[data-theme="graphite"] .right-sidebar,
:root[data-theme="graphite"] .property-dock {
  box-shadow: none;
}

:root[data-theme="graphite"] .command-button:hover,
:root[data-theme="graphite"] .icon-command:hover:not(:disabled),
:root[data-theme="graphite"] .mini-button:hover,
:root[data-theme="graphite"] .format-button:hover,
:root[data-theme="graphite"] .align-grid button:hover,
:root[data-theme="graphite"] .zoom-controls button:hover,
:root[data-theme="graphite"] .segmented-actions button:hover,
:root[data-theme="graphite"] .layer-actions button:hover,
:root[data-theme="graphite"] .panel-add-button:hover,
:root[data-theme="graphite"] .dialog-close:hover {
  color: var(--ink);
  background: var(--graphite-control-hover);
}

:root[data-theme="graphite"] .icon-command--danger:hover:not(:disabled) {
  color: var(--danger);
  background: #542f37;
}

:root[data-theme="graphite"] select,
:root[data-theme="graphite"] input[type="text"],
:root[data-theme="graphite"] input[type="number"],
:root[data-theme="graphite"] textarea,
:root[data-theme="graphite"] .unit-input,
:root[data-theme="graphite"] .number-field,
:root[data-theme="graphite"] .stroke-type-row,
:root[data-theme="graphite"] .effect-control-value,
:root[data-theme="graphite"] .color-field,
:root[data-theme="graphite"] .zoom-preset,
:root[data-theme="graphite"] .zoom-controls .fit-button,
:root[data-theme="graphite"] .pixel-action-button,
:root[data-theme="graphite"] .property-dock__heading-input,
:root[data-theme="graphite"] .property-dock__size-button {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--graphite-control);
}

:root[data-theme="graphite"] select:hover,
:root[data-theme="graphite"] input[type="text"]:hover,
:root[data-theme="graphite"] input[type="number"]:hover,
:root[data-theme="graphite"] textarea:hover {
  border-color: #747b86;
}

:root[data-theme="graphite"] .workspace-topline,
:root[data-theme="graphite"] .workspace-status {
  background: var(--graphite-status);
  border-color: var(--line-strong);
  box-shadow: none;
}

:root[data-theme="graphite"] .document-tab {
  color: var(--ink-soft);
  border-color: var(--line-strong);
  background: #363a40;
}

:root[data-theme="graphite"] .document-tab:hover:not(.is-active) {
  color: var(--ink);
  background: #41464d;
}

:root[data-theme="graphite"] .document-tab.is-active {
  color: var(--ink);
  border-color: #666d77;
  background: var(--bg-workspace);
}

:root[data-theme="graphite"] .document-tab__title-input,
:root[data-theme="graphite"] kbd {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--graphite-control);
}

:root[data-theme="graphite"] .document-tab__close:hover,
:root[data-theme="graphite"] .document-tab__close:focus-visible {
  color: var(--ink);
  background: var(--graphite-control-hover);
}

:root[data-theme="graphite"] .document-tab__save-state.is-dirty {
  color: #f1a85c;
}

:root[data-theme="graphite"] .document-tab__save-state.is-saved {
  color: #64c895;
}

:root[data-theme="graphite"] .workspace {
  scrollbar-color: #606670 #26292e;
}

:root[data-theme="graphite"] .workspace-ruler--horizontal,
:root[data-theme="graphite"] .workspace-ruler--vertical {
  border-color: #4c5159;
  background: rgba(45, 48, 53, .96);
}

:root[data-theme="graphite"] .guide-lock-button {
  color: #c8ccd2;
  border-color: #4c5159;
  background: #2d3035;
}

:root[data-theme="graphite"] .guide-lock-button:hover,
:root[data-theme="graphite"] .guide-lock-button:focus-visible,
:root[data-theme="graphite"] .guide-lock-button.is-locked {
  color: #9bc1ff;
  background: #383e47;
}

:root[data-theme="graphite"] .workspace-ruler:hover,
:root[data-theme="graphite"] .workspace-ruler:active {
  background-color: #383e47;
}

:root[data-theme="graphite"] .tool-sidebar,
:root[data-theme="graphite"] .right-sidebar,
:root[data-theme="graphite"] .property-dock__body,
:root[data-theme="graphite"] .property-dock .inspector-form > * {
  scrollbar-color: #626872 transparent;
}

:root[data-theme="graphite"] .property-dock__heading,
:root[data-theme="graphite"] .property-dock .property-fieldset.is-collapsed {
  background: #303338;
}

:root[data-theme="graphite"] .effect-card {
  border-color: var(--line-strong);
  background: #383c42;
}

:root[data-theme="graphite"] .effect-color-control input[type="color"],
:root[data-theme="graphite"] .pixel-dialog__color input {
  border-color: var(--line-strong);
  background: var(--graphite-control);
}

:root[data-theme="graphite"] .layer-list {
  border-color: var(--line-strong);
  background: #2b2e33;
}

:root[data-theme="graphite"] .layer-row {
  border-color: var(--line);
  background: #32353a;
}

:root[data-theme="graphite"] .layer-row.is-active,
:root[data-theme="graphite"] .layer-row[aria-selected="true"],
:root[data-theme="graphite"] .layer-object-row.is-selected {
  color: var(--ink);
  background: var(--accent-soft);
}

:root[data-theme="graphite"] .layer-object-list {
  border-color: var(--line);
  background: #2b2e33;
}

:root[data-theme="graphite"] .layer-object-row:hover,
:root[data-theme="graphite"] .layer-object-row button:hover {
  color: var(--ink);
  background: var(--graphite-control-hover);
}

:root[data-theme="graphite"] .layer-object-thumbnail {
  color: #a9c7ff;
  border-color: #555a63;
  background-color: #34383e;
  background-image:
    linear-gradient(45deg, #454a52 25%, transparent 25%),
    linear-gradient(-45deg, #454a52 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #454a52 75%),
    linear-gradient(-45deg, transparent 75%, #454a52 75%);
}

:root[data-theme="graphite"] .inspector-empty > span,
:root[data-theme="graphite"] .empty-hint {
  color: var(--ink-faint);
  border-color: var(--line-strong);
  background: rgba(52, 55, 60, .94);
}

:root[data-theme="graphite"] .app-dialog,
:root[data-theme="graphite"] .pixel-dialog__surface,
:root[data-theme="graphite"] .crop-dialog__surface {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--bg-panel);
}

:root[data-theme="graphite"] .dialog-button,
:root[data-theme="graphite"] .new-background-quick,
:root[data-theme="graphite"] .pixel-dialog__tools > button {
  color: var(--ink-soft);
  border-color: var(--line-strong);
  background: var(--graphite-control);
}

:root[data-theme="graphite"] .dialog-button:hover,
:root[data-theme="graphite"] .new-background-quick:hover,
:root[data-theme="graphite"] .pixel-dialog__tools > button:hover {
  color: var(--ink);
  border-color: #747b86;
  background: var(--graphite-control-hover);
}

:root[data-theme="graphite"] .dialog-button--primary,
:root[data-theme="graphite"] .dialog-button--primary:hover {
  color: #10151d;
  border-color: var(--accent);
  background: var(--accent);
}

:root[data-theme="graphite"] .dialog-warning {
  color: #e6c98f;
  border-color: #6f5b36;
  background: #403723;
}

:root[data-theme="graphite"] .pixel-dialog__actions,
:root[data-theme="graphite"] .crop-dialog__actions {
  border-color: var(--line);
  background: #303338;
}

:root[data-theme="graphite"] .pixel-dialog__viewport,
:root[data-theme="graphite"] .crop-dialog__viewport {
  background-color: #24272b;
  background-image: linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.035) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.035) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.035) 75%);
}

:root[data-theme="graphite"] .color-palette {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(52, 55, 60, .985);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .42), 0 3px 10px rgba(0, 0, 0, .28);
}

:root[data-theme="graphite"] .color-palette__hex input,
:root[data-theme="graphite"] .color-palette__rgb input {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--graphite-control);
}

:root[data-theme="graphite"] .color-palette__hex input[data-invalid="true"] {
  color: #ff9da8;
  border-color: #99505a;
  background: #4b2c32;
}

/* Retro-2K-Oberfläche -----------------------------------------------------
   Das Retro-Schema übernimmt bewusst die alte 3D-Semantik: helle Kanten
   liegen oben/links, dunkle unten/rechts; Eingaben kehren diese Kanten um. */
:root[data-theme="retro"] body {
  -webkit-font-smoothing: auto;
}

:root[data-theme="retro"] .app-header,
:root[data-theme="retro"] .tool-sidebar,
:root[data-theme="retro"] .right-sidebar,
:root[data-theme="retro"] .property-dock {
  box-shadow: none;
}

:root[data-theme="retro"] .app-header {
  border-bottom: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
}

:root[data-theme="retro"] .titlebar {
  border-bottom-color: #808080;
  background: #d4d0c8;
  box-shadow: inset 0 -1px #ffffff;
}

:root[data-theme="retro"] .brand-mark,
:root[data-theme="retro"] .brand-icon {
  border-radius: 0;
}

:root[data-theme="retro"] .brand-mark {
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  background: #d4d0c8;
  box-shadow: none;
  transition: none;
}

:root[data-theme="retro"] .brand:hover .brand-mark {
  transform: none;
  box-shadow: none;
}

:root[data-theme="retro"] .brand:focus-visible {
  border-radius: 0;
  outline: 1px dotted #000000;
  outline-offset: 2px;
}

:root[data-theme="retro"] .command-divider,
:root[data-theme="retro"] .status-divider {
  background: #808080;
  box-shadow: 1px 0 #ffffff;
}

:root[data-theme="retro"] :is(
  .subtle-button,
  .pixel-action-button,
  .mini-button,
  .format-button,
  .align-grid button,
  .zoom-controls button,
  .layer-actions button,
  .panel-add-button,
  .group-action-grid button,
  .path-action-grid button,
  .wide-button,
  .dialog-button,
  .new-background-quick,
  .property-dock__size-button,
  .effect-card__actions button,
  .effect-editor__close,
  .pixel-dialog__tools > button,
  .color-palette__apply
) {
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-radius: 0;
  outline: 0;
  background: #d4d0c8;
  box-shadow: inset 1px 1px #ece9d8, inset -1px -1px #808080;
  transition: none;
}

:root[data-theme="retro"] :is(
  .subtle-button,
  .pixel-action-button,
  .mini-button,
  .format-button,
  .align-grid button,
  .zoom-controls button,
  .layer-actions button,
  .panel-add-button,
  .group-action-grid button,
  .path-action-grid button,
  .wide-button,
  .dialog-button,
  .new-background-quick,
  .property-dock__size-button,
  .effect-card__actions button,
  .effect-editor__close,
  .pixel-dialog__tools > button,
  .color-palette__apply
):not(:disabled):hover {
  color: #000000;
  border-color: #ffffff #404040 #404040 #ffffff;
  background: #d4d0c8;
}

:root[data-theme="retro"] :is(
  .subtle-button,
  .pixel-action-button,
  .mini-button,
  .format-button,
  .align-grid button,
  .zoom-controls button,
  .layer-actions button,
  .panel-add-button,
  .group-action-grid button,
  .path-action-grid button,
  .wide-button,
  .dialog-button,
  .new-background-quick,
  .property-dock__size-button,
  .effect-card__actions button,
  .effect-editor__close,
  .pixel-dialog__tools > button,
  .color-palette__apply
):not(:disabled):active,
:root[data-theme="retro"] :is(.subtle-button, .mini-button, .format-button, .pixel-dialog__tools > button)[aria-pressed="true"],
:root[data-theme="retro"] :is(.subtle-button, .mini-button, .format-button).is-active {
  color: #000080;
  border-color: #404040 #ffffff #ffffff #404040;
  background: #c8c4bc;
  box-shadow: inset 1px 1px #808080;
  transform: none;
}

:root[data-theme="retro"] :is(.command-button, .icon-command) {
  color: #202020;
  border: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  transition: none;
}

:root[data-theme="retro"] :is(.command-button, .icon-command):hover:not(:disabled) {
  color: #000000;
  border-color: #ffffff #404040 #404040 #ffffff;
  background: #d4d0c8;
  box-shadow: inset 1px 1px #ece9d8, inset -1px -1px #808080;
}

:root[data-theme="retro"] :is(.command-button, .icon-command):active:not(:disabled) {
  color: #000000;
  border-color: #404040 #ffffff #ffffff #404040;
  background: #c8c4bc;
  box-shadow: inset 1px 1px #808080;
  transform: none;
}

:root[data-theme="retro"] .command-button--primary {
  color: #000080;
}

:root[data-theme="retro"] .command-button--compact,
:root[data-theme="retro"] .export-actions .command-button:first-child {
  border-radius: 0;
}

:root[data-theme="retro"] :is(
  select,
  input[type="text"],
  input[type="number"],
  textarea,
  .unit-input,
  .number-field,
  .stroke-type-row,
  .effect-control-value,
  .color-field,
  .zoom-preset,
  .property-dock__heading-input
) {
  color: #000000;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
  background: #ffffff;
  box-shadow: inset 1px 1px #404040;
}

:root[data-theme="retro"] :is(
  select,
  input[type="text"],
  input[type="number"],
  textarea,
  .unit-input,
  .number-field,
  .stroke-type-row,
  .effect-control-value,
  .color-field,
  .zoom-preset,
  .property-dock__heading-input
):focus,
:root[data-theme="retro"] :is(.unit-input, .number-field, .stroke-type-row, .effect-control-value):focus-within {
  border-color: #808080 #ffffff #ffffff #808080;
  outline: 1px dotted #000000;
  outline-offset: -4px;
  box-shadow: inset 1px 1px #404040;
}

:root[data-theme="retro"] :is(.unit-input, .number-field, .effect-control-value) input,
:root[data-theme="retro"] .stroke-type-row select {
  border: 0;
  outline: 0;
  background: #ffffff;
  box-shadow: none;
}

:root[data-theme="retro"] .number-scrubber-button,
:root[data-theme="retro"] .stroke-type-row::after {
  color: #000000;
  border-left-color: #808080;
  border-radius: 0;
  background: #d4d0c8;
}

:root[data-theme="retro"] .number-scrubber-button:hover,
:root[data-theme="retro"] .number-scrubber-button[aria-expanded="true"] {
  color: #000080;
  background: #c8c4bc;
}

:root[data-theme="retro"] :is(.color-chip, .inline-color) {
  border-color: #ffffff;
  border-radius: 0;
  box-shadow: 1px 1px #404040, -1px -1px #808080;
}

:root[data-theme="retro"] .switch,
:root[data-theme="retro"] .toggle-row--compact .switch {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
  background: #ffffff;
  box-shadow: inset 1px 1px #404040;
  transition: none;
}

:root[data-theme="retro"] .switch::after,
:root[data-theme="retro"] .toggle-row--compact .switch::after {
  top: 1px;
  left: 1px;
  width: 8px;
  height: 8px;
  color: #000000;
  border-radius: 0;
  opacity: 0;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 32%, currentColor 33% 67%, transparent 68%),
    linear-gradient(-45deg, transparent 32%, currentColor 33% 67%, transparent 68%);
  box-shadow: none;
  content: "";
  transform: none;
  transition: none;
}

:root[data-theme="retro"] .toggle-row input:checked + .switch {
  background: #ffffff;
}

:root[data-theme="retro"] .toggle-row input:checked + .switch::after {
  opacity: 1;
  transform: none;
}

:root[data-theme="retro"] .tool-sidebar,
:root[data-theme="retro"] .right-sidebar {
  scrollbar-color: #808080 #d4d0c8;
}

:root[data-theme="retro"] .tool-sidebar {
  border-right: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
}

:root[data-theme="retro"] .right-sidebar {
  border-left: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
}

:root[data-theme="retro"] .tool-section,
:root[data-theme="retro"] .tool-group + .tool-group {
  border-color: #808080;
  box-shadow: none;
}

:root[data-theme="retro"] .panel {
  border-color: #808080;
  box-shadow: inset 0 -1px #ffffff;
}

:root[data-theme="retro"] .tool-sidebar h2,
:root[data-theme="retro"] :is(.options-label, .field-label) {
  color: #404040;
  letter-spacing: .08em;
}

:root[data-theme="retro"] .tool-button {
  color: #202020;
  border: 2px solid transparent;
  border-radius: 0;
  background: #d4d0c8;
  transition: none;
}

:root[data-theme="retro"] .tool-button:hover:not(:disabled) {
  color: #000000;
  border-color: #ffffff #404040 #404040 #ffffff;
  background: #d4d0c8;
  box-shadow: inset 1px 1px #ece9d8, inset -1px -1px #808080;
}

:root[data-theme="retro"] .tool-button.is-active,
:root[data-theme="retro"] .tool-button[aria-pressed="true"] {
  color: #000080;
  border-color: #404040 #ffffff #ffffff #404040;
  background-color: #c8c4bc;
  background-image: radial-gradient(#808080 24%, transparent 26%);
  background-size: 2px 2px;
  box-shadow: inset 1px 1px #808080;
}

:root[data-theme="retro"] .tool-button.is-active::before,
:root[data-theme="retro"] .tool-button[aria-pressed="true"]::before {
  display: none;
}

:root[data-theme="retro"] :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) {
  padding: 2px;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-radius: 0;
  background: #d4d0c8;
  box-shadow: 2px 2px 0 #000000;
}

:root[data-theme="retro"] :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) button {
  color: #000000;
  border-radius: 0;
}

:root[data-theme="retro"] :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) button:hover,
:root[data-theme="retro"] :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) button[aria-checked="true"] {
  color: #ffffff;
  border-color: #0a246a;
  background: #0a246a;
}

:root[data-theme="retro"] :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) button:hover kbd {
  color: #ffffff;
}

:root[data-theme="retro"] :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) button[aria-checked="true"] kbd {
  color: #000000;
}

:root[data-theme="retro"] .work-column {
  background: #808080;
}

:root[data-theme="retro"] .workspace {
  background-color: #808080;
  background-image: none;
  scrollbar-color: #808080 #d4d0c8;
}

:root[data-theme="retro"] .workspace::before {
  display: none;
}

:root[data-theme="retro"] .workspace-topline,
:root[data-theme="retro"] .workspace-status {
  border-color: #808080;
  background: #d4d0c8;
  box-shadow: inset 0 1px #ffffff;
}

:root[data-theme="retro"] .document-tabs {
  gap: 1px;
}

:root[data-theme="retro"] .document-tab {
  height: 29px;
  margin-top: 5px;
  color: #202020;
  border: 2px solid;
  border-color: #ffffff #404040 #d4d0c8 #ffffff;
  border-radius: 0;
  background: #c0bcb4;
}

:root[data-theme="retro"] .document-tab:hover:not(.is-active) {
  color: #000000;
  background: #d4d0c8;
}

:root[data-theme="retro"] .document-tab.is-active {
  color: #000000;
  border-color: #ffffff #404040 #d4d0c8 #ffffff;
  background: #d4d0c8;
  font-weight: 700;
}

:root[data-theme="retro"] .document-tab__close {
  border-radius: 0;
}

:root[data-theme="retro"] .document-tab__close:hover,
:root[data-theme="retro"] .document-tab__close:focus-visible {
  color: #ffffff;
  background: #0a246a;
}

:root[data-theme="retro"] kbd {
  border: 1px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-radius: 0;
  background: #d4d0c8;
}

:root[data-theme="retro"] .workspace-ruler--horizontal,
:root[data-theme="retro"] .workspace-ruler--vertical {
  opacity: 1;
  border-color: #808080;
  background: #d4d0c8;
}

:root[data-theme="retro"] .workspace-ruler:hover,
:root[data-theme="retro"] .workspace-ruler:active {
  background-color: #c8d5e8;
}

:root[data-theme="retro"] .guide-lock-button {
  color: #000000;
  border-color: #ffffff #404040 #404040 #ffffff;
  background: #d4d0c8;
}

:root[data-theme="retro"] .guide-lock-button:hover,
:root[data-theme="retro"] .guide-lock-button:focus-visible,
:root[data-theme="retro"] .guide-lock-button.is-locked {
  color: #ffffff;
  background: #0a246a;
}

:root[data-theme="retro"] .canvas-shell {
  box-shadow: 2px 2px 0 #404040;
}

:root[data-theme="retro"] .workspace-status {
  gap: 3px;
  padding: 3px;
}

:root[data-theme="retro"] .status-section {
  min-height: 25px;
  padding-right: 7px;
  padding-left: 7px;
  border: 1px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  color: #202020;
  background: #d4d0c8;
  box-shadow: inset 1px 1px #c0c0c0;
}

:root[data-theme="retro"] .selection-count,
:root[data-theme="retro"] :is(.autosave-status, .tab-session-status) {
  margin-left: 0;
  border-left-color: #808080;
}

:root[data-theme="retro"] .property-dock {
  border-top: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  background: #d4d0c8;
}

:root[data-theme="retro"] .property-dock__heading {
  border-right: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  background: #d4d0c8;
}

:root[data-theme="retro"] .property-dock__heading h2 {
  color: #000080;
  letter-spacing: 0;
}

:root[data-theme="retro"] .property-dock__body,
:root[data-theme="retro"] .property-dock .inspector-form > * {
  scrollbar-color: #808080 #d4d0c8;
}

:root[data-theme="retro"] .property-dock .inspector-form > *,
:root[data-theme="retro"] .property-readout__group {
  border-color: #808080;
  box-shadow: inset 1px 0 #ffffff;
}

:root[data-theme="retro"] .property-dock .property-fieldset.is-collapsed {
  background: #c8c4bc;
}

:root[data-theme="retro"] .property-fieldset,
:root[data-theme="retro"] :is(.group-actions, .arrange-actions) {
  border-color: #808080;
  box-shadow: inset 0 1px #ffffff;
}

:root[data-theme="retro"] .property-fieldset legend,
:root[data-theme="retro"] .property-readout__group h3 {
  color: #404040;
}

:root[data-theme="retro"] .property-section-toggle:hover {
  color: #000080;
}

:root[data-theme="retro"] .panel {
  padding: 12px 10px;
}

:root[data-theme="retro"] .panel-heading {
  min-height: 31px;
  margin: -8px -6px 11px;
  padding: 3px 5px;
  color: #ffffff;
  background: linear-gradient(90deg, #0a246a 0%, #0a246a 52%, #a6caf0 100%);
}

:root[data-theme="retro"] .panel-heading > .sidebar-panel-toggle {
  margin-right: -5px;
}

:root[data-theme="retro"] .panel-heading h2 {
  font-size: 12px;
  letter-spacing: 0;
}

:root[data-theme="retro"] .panel-heading .eyebrow {
  color: #ffffff;
}

:root[data-theme="retro"] .panel-heading .count-badge {
  color: #000000;
  border: 1px solid #ffffff;
  border-radius: 0;
  background: #d4d0c8;
}

:root[data-theme="retro"] .panel-heading .panel-add-button {
  color: #000000;
  background: #d4d0c8;
}

:root[data-theme="retro"] .segmented-actions {
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
}

:root[data-theme="retro"] .segmented-actions button {
  color: #000000;
  border: 0;
  border-right: 1px solid #808080;
  border-radius: 0;
  background: #d4d0c8;
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #404040;
}

:root[data-theme="retro"] .segmented-actions button:active {
  box-shadow: inset 1px 1px #404040;
  transform: none;
}

:root[data-theme="retro"] :is(.layer-list, .layer-object-list) {
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
  background: #ffffff;
  box-shadow: inset 1px 1px #404040;
}

:root[data-theme="retro"] .layer-row {
  color: #000000;
  border-color: #a0a0a0;
  background: #d4d0c8;
}

:root[data-theme="retro"] .layer-row.is-active,
:root[data-theme="retro"] .layer-row[aria-selected="true"],
:root[data-theme="retro"] .layer-object-row.is-selected {
  color: #ffffff;
  background: #0a246a;
  box-shadow: none;
}

:root[data-theme="retro"] .layer-row.is-active button,
:root[data-theme="retro"] .layer-row[aria-selected="true"] button,
:root[data-theme="retro"] .layer-object-row.is-selected button {
  color: #ffffff;
}

:root[data-theme="retro"] .layer-object-list {
  padding-top: 3px;
  border-width: 1px 0 0;
  box-shadow: none;
}

:root[data-theme="retro"] .layer-object-row {
  border-radius: 0;
  color: #202020;
}

:root[data-theme="retro"] .layer-object-row:hover {
  color: #ffffff;
  background: #0a246a;
}

:root[data-theme="retro"] .layer-object-thumbnail {
  color: #000080;
  border-color: #808080;
  border-radius: 0;
  background-color: #ffffff;
  box-shadow: inset 1px 1px #ffffff;
}

:root[data-theme="retro"] :is(.effect-card, .effect-stack-empty) {
  border-radius: 0;
  border-color: #808080;
  background: #d4d0c8;
  box-shadow: inset 1px 1px #ffffff;
}

:root[data-theme="retro"] .effect-card.is-editing {
  border-color: #0a246a;
  box-shadow: inset 1px 1px #ffffff, 0 0 0 1px #0a246a;
}

:root[data-theme="retro"] :is(.effect-card__controls, .number-scrubber) {
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-radius: 0;
  background: #d4d0c8;
  box-shadow: 2px 2px 0 #000000;
}

:root[data-theme="retro"] .number-scrubber__thumb {
  border-radius: 0;
  border-color: #ffffff #404040 #404040 #ffffff;
  background: #d4d0c8;
  box-shadow: none;
}

:root[data-theme="retro"] .app-dialog,
:root[data-theme="retro"] .pixel-dialog__surface,
:root[data-theme="retro"] .crop-dialog__surface,
:root[data-theme="retro"] .color-palette {
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-radius: 0;
  background: #d4d0c8;
  box-shadow: 2px 2px 0 #000000;
  animation: none;
}

:root[data-theme="retro"] :is(.app-dialog, .pixel-dialog__surface, .crop-dialog__surface)::backdrop,
:root[data-theme="retro"] :is(.pixel-dialog__backdrop, .crop-dialog__backdrop) {
  background: rgba(0, 0, 0, .38);
  backdrop-filter: none;
}

:root[data-theme="retro"] :is(.dialog-header, .pixel-dialog__header, .crop-dialog__header, .color-palette__header) {
  color: #ffffff;
  border-color: #0a246a;
  background: linear-gradient(90deg, #0a246a 0%, #0a246a 52%, #a6caf0 100%);
}

:root[data-theme="retro"] :is(.dialog-header, .pixel-dialog__header, .crop-dialog__header) {
  align-items: center;
  margin: 3px;
  padding: 4px 5px;
}

:root[data-theme="retro"] :is(.dialog-header h2, .pixel-dialog__header h2, .crop-dialog__header h2),
:root[data-theme="retro"] .dialog-header .dialog-kicker {
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0;
}

:root[data-theme="retro"] :is(.dialog-close, .pixel-dialog__close, .crop-dialog__close, .color-palette__header button) {
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-radius: 0;
  background: #d4d0c8;
  box-shadow: inset 1px 1px #ece9d8, inset -1px -1px #808080;
}

:root[data-theme="retro"] :is(.dialog-close, .pixel-dialog__close, .crop-dialog__close, .color-palette__header button):hover {
  color: #000000;
  background: #d4d0c8;
}

:root[data-theme="retro"] .dialog-body,
:root[data-theme="retro"] .dialog-actions,
:root[data-theme="retro"] :is(.pixel-dialog__tools, .crop-dialog__tools),
:root[data-theme="retro"] .dialog-content {
  background: #d4d0c8;
}

:root[data-theme="retro"] .dialog-actions {
  border-color: #808080;
  box-shadow: inset 0 1px #ffffff;
}

:root[data-theme="retro"] .dialog-button--primary {
  color: #000000;
  border-color: #ffffff #404040 #404040 #ffffff;
  background: #d4d0c8;
  box-shadow: inset 1px 1px #ece9d8, inset -1px -1px #808080, 0 0 0 1px #000000;
}

:root[data-theme="retro"] .dialog-button--primary:hover {
  color: #000000;
  background: #d4d0c8;
}

:root[data-theme="retro"] .color-palette {
  padding: 3px;
}

:root[data-theme="retro"] .color-palette__header {
  margin: 0 0 5px;
  padding: 2px 3px;
}

:root[data-theme="retro"] .color-palette__header strong {
  color: #ffffff;
}

:root[data-theme="retro"] :is(.color-palette__hex input, .color-palette__rgb input) {
  color: #000000;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080;
  border-radius: 0;
  background: #ffffff;
  box-shadow: inset 1px 1px #404040;
}

:root[data-theme="retro"] .count-badge,
:root[data-theme="retro"] .empty-hint,
:root[data-theme="retro"] .inspector-empty > span {
  border-radius: 0;
}

:root[data-theme="retro"] :is(button, input, select, textarea, .document-tab, .tool-button, .switch) {
  transition: none;
}

/* Platinum ---------------------------------------------------------------
   Helle/dunkle Kanten bilden die klassische Platinum-Reliefsemantik. Die
   waagerechten Streifen kennzeichnen aktive Paletten- und Dialogtitel. */
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) body {
  font-size: 12px;
  -webkit-font-smoothing: auto;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(button, input, select, textarea, .document-tab, .tool-button, .switch) {
  transition: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 1px dotted #000000;
  outline-offset: 2px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .app-header,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-sidebar,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .right-sidebar,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-dock {
  box-shadow: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .app-header {
  border-bottom: 1px solid #333333;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .titlebar {
  border-bottom-color: #777777;
  background: var(--platinum-chrome);
  box-shadow: inset 0 1px #ffffff, inset 0 -1px #aaaaaa;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .optionsbar {
  background: var(--platinum-chrome);
  box-shadow: inset 0 1px #f7f7f7;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .brand-mark,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .brand-icon {
  border-radius: 3px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .brand-mark {
  border: 1px solid #333333;
  background: linear-gradient(#f7f7f7, #c5c5c5);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #777777;
  transition: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .brand:hover .brand-mark {
  transform: none;
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #777777;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .brand:focus-visible {
  border-radius: 2px;
  outline: 1px dotted #000000;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .brand-copy strong {
  font-weight: 700;
  letter-spacing: 0;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .brand-copy small {
  color: #555555;
  letter-spacing: .08em;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .command-divider,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .status-divider {
  background: #888888;
  box-shadow: 1px 0 #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.command-button, .icon-command) {
  color: #202020;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.command-button, .icon-command):hover:not(:disabled) {
  color: #000000;
  border-color: #555555;
  background: linear-gradient(#fafafa, #c9c9c9);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #888888;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.command-button, .icon-command):active:not(:disabled) {
  color: #000000;
  border-color: #333333;
  background: #b5b5b5;
  box-shadow: inset 1px 1px #666666, inset -1px -1px #eeeeee;
  transform: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .command-button--primary {
  color: var(--platinum-accent-dark);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(
  .subtle-button,
  .right-sidebar-toggle,
  .pixel-action-button,
  .mini-button,
  .format-button,
  .align-grid button,
  .zoom-controls button,
  .layer-actions button,
  .panel-add-button,
  .group-action-grid button,
  .path-action-grid button,
  .wide-button,
  .dialog-button,
  .new-background-quick,
  .property-dock__size-button,
  .effect-card__actions button,
  .effect-editor__close,
  .pixel-dialog__tools > button,
  .color-palette__apply
) {
  color: #000000;
  border: 1px solid #333333;
  border-radius: 4px;
  background: linear-gradient(#fafafa 0%, #e2e2e2 48%, #c6c6c6 100%);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #7d7d7d;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(
  .subtle-button,
  .right-sidebar-toggle,
  .pixel-action-button,
  .mini-button,
  .format-button,
  .align-grid button,
  .zoom-controls button,
  .layer-actions button,
  .panel-add-button,
  .group-action-grid button,
  .path-action-grid button,
  .wide-button,
  .dialog-button,
  .new-background-quick,
  .property-dock__size-button,
  .effect-card__actions button,
  .effect-editor__close,
  .pixel-dialog__tools > button,
  .color-palette__apply
):not(:disabled):hover {
  color: #000000;
  border-color: #111111;
  background: linear-gradient(#ffffff, #d4d4d4);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(
  .subtle-button,
  .right-sidebar-toggle,
  .pixel-action-button,
  .mini-button,
  .format-button,
  .align-grid button,
  .zoom-controls button,
  .layer-actions button,
  .panel-add-button,
  .group-action-grid button,
  .path-action-grid button,
  .wide-button,
  .dialog-button,
  .new-background-quick,
  .property-dock__size-button,
  .effect-card__actions button,
  .effect-editor__close,
  .pixel-dialog__tools > button,
  .color-palette__apply
):not(:disabled):active,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.subtle-button, .mini-button, .format-button, .pixel-dialog__tools > button)[aria-pressed="true"],
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.subtle-button, .mini-button, .format-button).is-active {
  color: #000000;
  background: #b0b0b0;
  box-shadow: inset 1px 1px #666666, inset -1px -1px #eeeeee;
  transform: none;
}

:root[data-theme="classic-gray"] .right-sidebar-toggle {
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  border-radius: 2px;
  background: #d4d0c8;
  box-shadow: inset 1px 1px #ece9d8, inset -1px -1px #808080;
}

:root[data-theme="classic-gray"] .right-sidebar-toggle:hover {
  color: #000080;
  background: #e1ddd5;
}

:root[data-theme="classic-gray"] .right-sidebar-toggle:active {
  border-color: #404040 #ffffff #ffffff #404040;
  background: #c4c0b8;
  box-shadow: inset 1px 1px #808080;
  transform: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(
  select,
  input[type="text"],
  input[type="number"],
  textarea,
  .unit-input,
  .number-field,
  .stroke-type-row,
  .effect-control-value,
  .color-field,
  .zoom-preset,
  .property-dock__heading-input
) {
  color: #000000;
  border: 1px solid #444444;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: inset 1px 1px #8a8a8a, inset -1px -1px #eeeeee;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(
  select,
  input[type="text"],
  input[type="number"],
  textarea,
  .unit-input,
  .number-field,
  .stroke-type-row,
  .effect-control-value,
  .color-field,
  .zoom-preset,
  .property-dock__heading-input
):focus,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.unit-input, .number-field, .stroke-type-row, .effect-control-value):focus-within {
  border-color: #111111;
  outline: 1px dotted #000000;
  outline-offset: -4px;
  box-shadow: inset 1px 1px #777777, inset -1px -1px #eeeeee;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.unit-input, .number-field, .effect-control-value) input,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .stroke-type-row select {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .number-scrubber-button,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .stroke-type-row::after {
  color: #000000;
  border-left-color: #777777;
  border-radius: 0;
  background: linear-gradient(#f6f6f6, #c8c8c8);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .number-scrubber-button:hover,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .number-scrubber-button[aria-expanded="true"] {
  color: #ffffff;
  background: var(--platinum-accent);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.color-chip, .inline-color) {
  border-color: #333333;
  border-radius: 1px;
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #777777;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .switch,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .toggle-row--compact .switch {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
  border: 1px solid #222222;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: inset 1px 1px #888888, inset -1px -1px #eeeeee;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .switch::after,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .toggle-row--compact .switch::after {
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  color: #000000;
  border-radius: 0;
  opacity: 0;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 32%, currentColor 33% 67%, transparent 68%),
    linear-gradient(-45deg, transparent 32%, currentColor 33% 67%, transparent 68%);
  box-shadow: none;
  content: "";
  transform: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .toggle-row input:checked + .switch {
  background: #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .toggle-row input:checked + .switch::after {
  opacity: 1;
  transform: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-sidebar,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .right-sidebar,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-dock__body {
  scrollbar-color: #777777 var(--platinum-chrome);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-sidebar {
  border-right: 1px solid #333333;
  box-shadow: inset -1px 0 #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .right-sidebar {
  border-left: 1px solid #333333;
  box-shadow: inset 1px 0 #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-section,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-group + .tool-group {
  border-color: #999999;
  box-shadow: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .panel {
  border-color: #999999;
  box-shadow: inset 0 -1px #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-sidebar h2,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.options-label, .field-label) {
  color: #444444;
  letter-spacing: .04em;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-button {
  color: #202020;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--platinum-chrome);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-button:hover:not(:disabled) {
  color: #000000;
  border-color: #555555;
  background: linear-gradient(#f8f8f8, #c8c8c8);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #888888;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-button.is-active,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-button[aria-pressed="true"] {
  color: #ffffff;
  border-color: #17345f;
  background: var(--platinum-accent);
  box-shadow: inset 1px 1px #1d3d70, inset -1px -1px #7fa0d3;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-button.is-active::before,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .tool-button[aria-pressed="true"]::before {
  display: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) {
  padding: 3px;
  border: 1px solid #222222;
  border-radius: 2px;
  background: #eeeeee;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .42);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) button {
  color: #000000;
  border-radius: 1px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) button:hover,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) button[aria-checked="true"] {
  color: #ffffff;
  border-color: var(--platinum-accent);
  background: var(--platinum-accent);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) button:hover kbd {
  color: #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.eraser-menu, .retouch-menu, .warp-menu, .shape-menu, .marquee-menu, .line-menu, .path-modifier-menu) button[aria-checked="true"] kbd {
  color: #000000;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .work-column {
  background: var(--platinum-workspace);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .workspace {
  background-color: var(--platinum-workspace);
  background-image:
    linear-gradient(45deg, #777777 25%, transparent 25%),
    linear-gradient(-45deg, #777777 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #777777 75%),
    linear-gradient(-45deg, transparent 75%, #777777 75%);
  background-position: 0 0, 0 2px, 2px -2px, -2px 0;
  background-size: 4px 4px;
  scrollbar-color: #777777 var(--platinum-chrome);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .workspace::before {
  display: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .workspace-topline,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .workspace-status {
  border-color: #777777;
  background: var(--platinum-chrome);
  box-shadow: inset 0 1px #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .document-tabs {
  gap: 2px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .document-tab {
  height: 28px;
  margin-top: 6px;
  color: #333333;
  border: 1px solid #444444;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#eeeeee, #bdbdbd);
  box-shadow: inset 1px 1px #ffffff, inset -1px 0 #888888;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .document-tab:hover:not(.is-active) {
  color: #000000;
  background: linear-gradient(#ffffff, #cdcdcd);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .document-tab.is-active {
  color: #000000;
  background: #eeeeee;
  box-shadow: inset 1px 1px #ffffff;
  font-weight: 700;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .document-tab__close {
  border-radius: 2px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .document-tab__close:hover,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .document-tab__close:focus-visible {
  color: #ffffff;
  background: var(--platinum-accent);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) kbd {
  color: #000000;
  border: 1px solid #444444;
  border-radius: 3px;
  background: linear-gradient(#ffffff, #c8c8c8);
  box-shadow: inset 1px 1px #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .workspace-ruler--horizontal,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .workspace-ruler--vertical {
  opacity: 1;
  border-color: #777777;
  background: var(--platinum-chrome);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .workspace-ruler:hover,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .workspace-ruler:active {
  background-color: var(--platinum-accent-soft);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .guide-lock-button {
  color: #000000;
  border-color: #777777;
  background: linear-gradient(#f6f6f6, #c7c7c7);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .guide-lock-button:hover,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .guide-lock-button:focus-visible,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .guide-lock-button.is-locked {
  color: #ffffff;
  background: var(--platinum-accent);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .canvas-shell {
  box-shadow: 2px 2px 0 #444444;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .workspace-status {
  gap: 3px;
  padding: 3px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .status-section {
  min-height: 25px;
  padding-right: 7px;
  padding-left: 7px;
  color: #222222;
  border: 1px solid #777777;
  background: #eeeeee;
  box-shadow: inset 1px 1px #aaaaaa, inset -1px -1px #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .selection-count,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.autosave-status, .tab-session-status) {
  margin-left: 0;
  border-left-color: #888888;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-dock {
  border-top: 1px solid #333333;
  background: var(--platinum-chrome);
  box-shadow: inset 0 1px #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-dock__heading {
  border-right: 1px solid #555555;
  background: #d5d5d5;
  box-shadow: inset -1px 0 #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-dock__heading h2 {
  color: #000000;
  letter-spacing: 0;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-dock .inspector-form > *,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-readout__group {
  border-color: #999999;
  box-shadow: inset 1px 0 #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-dock .property-fieldset.is-collapsed {
  background: #d0d0d0;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-fieldset,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.group-actions, .arrange-actions) {
  border-color: #999999;
  box-shadow: inset 0 1px #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-fieldset legend,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-readout__group h3 {
  color: #333333;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .property-section-toggle:hover {
  color: var(--platinum-accent-dark);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .panel-heading,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.dialog-header, .pixel-dialog__header, .crop-dialog__header, .color-palette__header) {
  color: #000000;
  border: 1px solid #777777;
  background: repeating-linear-gradient(to bottom, var(--platinum-chrome) 0, var(--platinum-chrome) 2px, #999999 2px, #999999 3px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .panel-heading {
  min-height: 29px;
  margin: -8px -7px 11px;
  padding: 3px 5px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .panel-heading > .sidebar-panel-toggle {
  margin-right: -5px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .panel-heading > div,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.dialog-header, .pixel-dialog__header, .crop-dialog__header) > div,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .color-palette__header strong {
  padding-right: 5px;
  padding-left: 5px;
  background: var(--platinum-chrome);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .panel-heading h2 {
  font-size: 12px;
  letter-spacing: 0;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .panel-heading .eyebrow,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-kicker {
  color: #333333;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .panel-heading .count-badge {
  color: #000000;
  border: 1px solid #555555;
  border-radius: 3px;
  background: var(--platinum-chrome);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.layer-list, .layer-object-list) {
  border: 1px solid #444444;
  border-radius: 1px;
  background: #ffffff;
  box-shadow: inset 1px 1px #888888, inset -1px -1px #eeeeee;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .layer-row {
  color: #000000;
  border-color: #b0b0b0;
  background: #eeeeee;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .layer-row.is-active,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .layer-row[aria-selected="true"],
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .layer-object-row.is-selected {
  color: #ffffff;
  background: var(--platinum-accent);
  box-shadow: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .layer-row.is-active button,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .layer-row[aria-selected="true"] button,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .layer-object-row.is-selected button {
  color: #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .layer-object-list {
  padding-top: 3px;
  border-width: 1px 0 0;
  background: #f5f5f5;
  box-shadow: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .layer-object-row {
  border-radius: 1px;
  color: #222222;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .layer-object-row:hover {
  color: #ffffff;
  background: var(--platinum-accent);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .layer-object-thumbnail {
  color: var(--platinum-accent-dark);
  border-color: #555555;
  border-radius: 1px;
  background-color: #ffffff;
  box-shadow: inset 1px 1px #eeeeee;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.effect-card, .effect-stack-empty) {
  border-radius: 2px;
  border-color: #777777;
  background: #e3e3e3;
  box-shadow: inset 1px 1px #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .effect-card.is-editing {
  border-color: var(--platinum-accent);
  box-shadow: inset 1px 1px #ffffff, 0 0 0 1px var(--platinum-accent);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.effect-card__controls, .number-scrubber) {
  color: #000000;
  border: 1px solid #222222;
  border-radius: 2px;
  background: var(--platinum-chrome);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .42);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .number-scrubber__thumb {
  border-color: #333333;
  border-radius: 2px;
  background: linear-gradient(#f5f5f5, #bdbdbd);
  box-shadow: inset 1px 1px #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .app-dialog,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .pixel-dialog__surface,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .crop-dialog__surface,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .color-palette {
  color: #000000;
  border: 1px solid #111111;
  border-radius: 4px;
  background: var(--platinum-chrome);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .42);
  animation: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.app-dialog, .pixel-dialog__surface, .crop-dialog__surface)::backdrop,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.pixel-dialog__backdrop, .crop-dialog__backdrop) {
  background: rgba(0, 0, 0, .32);
  backdrop-filter: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.dialog-header, .pixel-dialog__header, .crop-dialog__header) {
  align-items: center;
  margin: 3px;
  padding: 4px 5px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.dialog-header h2, .pixel-dialog__header h2, .crop-dialog__header h2),
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-header .dialog-kicker,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .color-palette__header strong {
  color: #000000;
  font-size: 12px;
  letter-spacing: 0;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.dialog-close, .pixel-dialog__close, .crop-dialog__close, .color-palette__header button) {
  color: #000000;
  border: 1px solid #222222;
  border-radius: 2px;
  background: linear-gradient(#fafafa, #c5c5c5);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #777777;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.dialog-close, .pixel-dialog__close, .crop-dialog__close, .color-palette__header button):hover {
  color: #ffffff;
  background: var(--platinum-accent);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-body,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-actions,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.pixel-dialog__tools, .crop-dialog__tools),
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-content {
  background: var(--platinum-chrome);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-actions {
  border-color: #888888;
  box-shadow: inset 0 1px #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-button--primary {
  color: #000000;
  border-color: #111111;
  background: linear-gradient(#ffffff, #c7c7c7);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #777777, 0 0 0 2px #111111;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-button--primary:hover {
  color: #000000;
  background: linear-gradient(#ffffff, #d3d3d3);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-hero {
  background-color: var(--platinum-hero);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.12) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,.12) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.12) 75%);
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
  background-size: 6px 6px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-hero::before,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-hero::after {
  display: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-hero > span {
  color: #000000;
  border: 1px solid #222222;
  border-radius: 7px;
  background: var(--platinum-chrome);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #777777, 2px 3px rgba(0,0,0,.35);
  backdrop-filter: none;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .dialog-hero svg {
  color: var(--platinum-accent-dark);
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .color-palette {
  padding: 3px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) .color-palette__header {
  margin: 0 0 5px;
  padding: 2px 3px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.color-palette__hex input, .color-palette__rgb input) {
  color: #000000;
  border: 1px solid #444444;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: inset 1px 1px #888888;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) :is(.count-badge, .empty-hint, .inspector-empty > span) {
  border-radius: 3px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) ::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) ::-webkit-scrollbar-track,
:root:is([data-theme="macos9"], [data-theme="modern-gray"]) ::-webkit-scrollbar-corner {
  background: var(--platinum-chrome);
  box-shadow: inset 1px 1px #888888, inset -1px -1px #ffffff;
}

:root:is([data-theme="macos9"], [data-theme="modern-gray"]) ::-webkit-scrollbar-thumb {
  border: 1px solid #333333;
  border-radius: 2px;
  background: linear-gradient(90deg, #f4f4f4, #bcbcbc);
  box-shadow: inset 1px 1px #ffffff, inset -1px -1px #777777;
}

.studio-layout.is-tool-sidebar-icon-only {
  --tool-sidebar-width: 86px;
}

.studio-layout.is-tool-sidebar-icon-only .tool-section {
  padding: 10px 7px;
}

.studio-layout.is-tool-sidebar-icon-only .tool-sidebar h2 {
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: .08em;
}

.studio-layout.is-tool-sidebar-icon-only .tool-rail {
  gap: 7px;
}

.studio-layout.is-tool-sidebar-icon-only .tool-group + .tool-group {
  padding-top: 7px;
}

.studio-layout.is-tool-sidebar-icon-only .tool-button {
  height: 40px;
  gap: 0;
}

.studio-layout.is-tool-sidebar-icon-only .tool-button > span:not(.switching-tool-icon) {
  display: none;
}

.studio-layout.is-tool-sidebar-icon-only .tool-button.is-active::before,
.studio-layout.is-tool-sidebar-icon-only .tool-button[aria-pressed="true"]::before {
  top: 7px;
  bottom: 7px;
  left: -4px;
}

.studio-layout.is-tool-sidebar-icon-only .color-picker-controls {
  gap: 3px;
}

.studio-layout.is-tool-sidebar-icon-only .color-picker-no-fill {
  min-height: 22px;
  margin-top: 2px;
}

.studio-layout.is-tool-sidebar-icon-only .color-picker-no-fill span {
  display: none;
}

@media (max-width: 1400px) {
  .studio-layout {
    --tool-sidebar-width: 86px;
  }

  .tool-section {
    padding: 10px 7px;
  }

  .tool-sidebar h2 {
    margin-bottom: 5px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  .tool-rail {
    gap: 7px;
  }

  .tool-group + .tool-group {
    padding-top: 7px;
  }

  .tool-button {
    height: 40px;
    gap: 0;
  }

  .tool-button > span:not(.switching-tool-icon) {
    display: none;
  }

  .tool-button.is-active::before,
  .tool-button[aria-pressed="true"]::before {
    top: 7px;
    bottom: 7px;
    left: -4px;
  }

  .color-picker-controls {
    gap: 3px;
  }

  .color-picker-no-fill {
    min-height: 22px;
    margin-top: 2px;
  }

  .color-picker-no-fill span {
    display: none;
  }

  .studio-layout.is-tool-sidebar-with-text {
    --tool-sidebar-width: 174px;
  }

  .studio-layout.is-tool-sidebar-with-text .tool-section {
    padding: 13px 10px;
  }

  .studio-layout.is-tool-sidebar-with-text .tool-sidebar h2 {
    margin-bottom: 9px;
    font-size: 10px;
    letter-spacing: .11em;
  }

  .studio-layout.is-tool-sidebar-with-text .tool-rail {
    gap: 10px;
  }

  .studio-layout.is-tool-sidebar-with-text .tool-group + .tool-group {
    padding-top: 9px;
  }

  .studio-layout.is-tool-sidebar-with-text .tool-button {
    height: 52px;
    gap: 3px;
  }

  .studio-layout.is-tool-sidebar-with-text .tool-button > span:not(.switching-tool-icon) {
    display: inline;
  }

  .studio-layout.is-tool-sidebar-with-text .tool-button.is-active::before,
  .studio-layout.is-tool-sidebar-with-text .tool-button[aria-pressed="true"]::before {
    top: 10px;
    bottom: 10px;
    left: -6px;
  }

  .studio-layout.is-tool-sidebar-with-text .color-picker-controls {
    gap: 9px;
  }

  .studio-layout.is-tool-sidebar-with-text .color-picker-no-fill {
    min-height: 0;
    margin-top: 5px;
  }

  .studio-layout.is-tool-sidebar-with-text .color-picker-no-fill span {
    display: inline;
  }
}

@media (max-width: 1180px) {
  .studio-layout {
    --right-sidebar-width: 284px;
    --minimum-workspace-width: 300px;
  }

  .brand {
    flex-basis: 156px;
  }

  .brand-copy small,
  .document-meta {
    display: none;
  }

  .command-bar {
    gap: 8px;
  }

  .canvas-controls .options-label,
  .color-controls .check-control span,
  .workspace-help {
    display: none;
  }

  .work-column.has-canvas-properties {
    grid-template-rows: 34px minmax(0, 1fr) 148px 39px;
  }

  .toggle-row--compact span:last-child,
  .selection-count {
    display: none;
  }
}

@media (max-width: 960px) {
  .titlebar {
    padding-left: 10px;
  }

  .brand {
    flex-basis: 46px;
    margin-right: 6px;
  }

  .brand-copy {
    display: none;
  }

  .command-button {
    min-width: 43px;
    padding-inline: 5px;
  }

  .studio-layout {
    --right-sidebar-width: 262px;
    --minimum-workspace-width: 280px;
  }

  .property-dock {
    grid-template-columns: 126px minmax(0, 1fr);
  }

  .property-dock__heading {
    padding-inline: 11px;
  }

  .font-controls {
    display: none;
  }

  .panel {
    padding-inline: 11px;
  }

}

@media (max-height: 720px) {
  .work-column {
    grid-template-rows: 34px minmax(0, 1fr) 154px 39px;
  }

  .work-column.has-canvas-properties {
    grid-template-rows: 34px minmax(0, 1fr) 132px 39px;
  }

  .work-column.has-compact-properties,
  .work-column.has-tool-properties {
    grid-template-rows: 34px minmax(0, 1fr) 100px 39px;
  }

  .property-dock__heading {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .property-dock__heading-footer {
    gap: 3px;
  }

  .property-dock__size-button {
    height: 24px;
  }

  .property-dock .inspector-form > * {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .tool-button {
    height: 42px;
  }

  .tool-button > span:not(.switching-tool-icon) {
    display: none;
  }

  .tool-section,
  .align-section {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .align-section .field-label,
  .align-section select {
    display: none;
  }

  .inspector-empty {
    min-height: 100px;
  }
}

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