/* Two paint layers let text and its surface have independent gradients. */
:root {
  --ui-column-background: #f5faf7;
  --ui-pane-background: #e6f0ed;
  --ui-pane-paint: linear-gradient(#e6f0ed, #e6f0ed);
  --ui-pane-text-start: #183b4c;
  --ui-pane-text-paint: linear-gradient(#183b4c, #183b4c);
  --ui-button-start: #0f8a4e;
  --ui-button-paint: linear-gradient(110deg, #0f8a4e, #007ac1);
  --ui-button-text-start: #fff;
  --ui-button-text-paint: linear-gradient(#fff, #fff);
}
.controller-deck .developer-panel-body { background: var(--ui-column-background); }
.controller-deck { color: var(--ui-pane-text-start); }
.controller-deck :is(.deck-group-body, .deck-stats) { background: var(--ui-pane-background); }
.controller-deck :is(.deck-note, .deck-intro, .deck-eyebrow, .group-description, .deck-parameter p, .deck-mode-status, .deck-status, .deck-stats, h1, h2, h3, .parameter-heading > label, .parameter-value > span, .color-field > label, .color-gradient > span, .deck-export > label) {
  color: var(--ui-pane-text-start); background-image: var(--ui-pane-text-paint);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.controller-deck .deck-stats {
  background-image: var(--ui-pane-text-paint), var(--ui-pane-paint);
  background-clip: text, padding-box; -webkit-background-clip: text, padding-box;
}
.controller-deck .deck-group > summary {
  color: var(--ui-pane-text-start); background-image: var(--ui-pane-text-paint), var(--ui-pane-paint);
  background-clip: text, padding-box; -webkit-background-clip: text, padding-box; -webkit-text-fill-color: transparent;
}
.controller-deck .deck-group > summary :is(span, .group-count), .controller-deck .deck-group > summary::before { color: inherit; }
.controller-deck button, .controller-deck button:hover:not(:disabled), .controller-deck .deck-mode-tabs button[aria-selected],
.controller-deck .deck-folder-tabs button[aria-pressed], .controller-deck .deck-wording-choice button[aria-pressed],
.controller-deck .pane-actions button, #left-copy, #right-copy, #left-copy-all, #right-copy-all,
#left-copy:hover, #right-copy:hover, #left-copy-all:hover, #right-copy-all:hover {
  background: var(--ui-button-start); color: var(--ui-button-text-start); border-color: var(--ui-button-start);
  background-image: var(--ui-button-text-paint), var(--ui-button-paint);
  background-clip: text, padding-box; -webkit-background-clip: text, padding-box; -webkit-text-fill-color: transparent;
}
.controller-deck button:hover:not(:disabled) { filter: brightness(1.08); }
.controller-deck button:is([aria-pressed="true"], [aria-selected="true"]) { box-shadow: inset 0 -3px 0 var(--ui-button-text-start); font-weight: 750; }
.controller-deck button:focus-visible { outline: 3px solid #0b345b; outline-offset: 2px; }
.controller-deck [data-folder-content][hidden], .controller-deck .color-field[hidden], .controller-deck .color-scene-note[hidden] { display: none; }
#left-colors h2 { font-size: calc(19px * var(--app-text-scale, 1)); margin: 14px 0 8px; }
#left-colors h3 { font-size: calc(14px * var(--app-text-scale, 1)); margin: 22px 0 10px; }
.color-preview { width: 34px; height: 20px; flex: none; margin-left: auto; border: 1px solid #71858b; border-radius: 5px; }
.color-category > .deck-group-body { padding-bottom: 12px; }
.color-gradient { display: flex; align-items: center; gap: 9px; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.color-gradient input { width: 22px; height: 22px; flex: none; accent-color: #007ac1; }
.color-fields { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 12px; }
.color-field { display: grid; grid-template-columns: 44px minmax(80px, 1fr); gap: 6px; flex: 1 1 150px; min-width: 0; }
.color-field > label { grid-column: 1 / -1; }
.controller-deck .color-picker { width: 44px; height: 44px; padding: 3px; border: 1px solid #71858b; border-radius: 7px; cursor: pointer; background: white; }
.controller-deck .color-hex { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 6px 8px; border: 1px solid #71858b; border-radius: 7px; background: white; color: #183b4c; font: calc(16px * var(--app-text-scale, 1)) ui-monospace, monospace; }
.color-hex[aria-invalid="true"] { outline: 2px solid #b42318; }
.color-category input:focus-visible { outline: 3px solid #007ac1; outline-offset: 2px; }
.controller-deck .color-reset { min-height: 44px; }
@media (pointer: coarse), (max-width: 759px) {
  .developer-panel[data-side="right"] .developer-panel-tab { top: 8px; }
}
@media (max-height: 500px) and (pointer: coarse), (max-height: 500px) and (max-width: 759px) {
  .controller-deck .developer-panel-tab { writing-mode: horizontal-tb; width: 44px; height: 44px; min-height: 44px; padding: 3px; font-size: calc(10px * var(--app-text-scale, 1)); line-height: 1.2; overflow-wrap: anywhere; }
  .developer-panel[data-side="left"] .developer-panel-tab { font-size: calc(9px * var(--app-text-scale, 1)); white-space: nowrap; }
  .developer-panel[data-side="right"] .developer-panel-tab { top: calc(50% + 48px); }
}
@media (forced-colors: active) {
  .controller-deck * { -webkit-text-fill-color: currentColor !important; }
  .controller-deck button, .controller-deck summary { background-image: none !important; }
}