/* Generated from the current app by scripts/sync-site-demo-styles.mjs. Do not edit. Scoped to the DOM app mocks; marketing copy keeps its own styles. */
.demo {
  --vscode-font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", system-ui, "Ubuntu", "Droid Sans", sans-serif;
  --vscode-font-size: 13px;
  --vscode-editor-font-family: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;

  --vscode-foreground: #cccccc;
  --vscode-descriptionForeground: #9d9d9d;
  --vscode-errorForeground: #f48771;
  --vscode-focusBorder: #007fd4;
  --vscode-panel-border: #3d3d42;

  --vscode-editor-background: #111214;
  --vscode-editorWidget-background: #171a1f;
  --vscode-sideBar-background: #171a1f;
  --vscode-sideBarSectionHeader-background: #00000000;
  --vscode-textCodeBlock-background: #0a0a0a;
  --vscode-textLink-foreground: #3794ff;

  --vscode-input-background: #23262d;
  --vscode-input-foreground: #cccccc;
  --vscode-input-border: #3c3c3c;
  --vscode-input-placeholderForeground: #a6a6a6;
  --vscode-inputValidation-errorBackground: #5a1d1d;
  --vscode-inputValidation-errorBorder: #be1100;

  --vscode-button-background: #0e639c;
  --vscode-button-foreground: #ffffff;
  --vscode-button-hoverBackground: #1177bb;
  --vscode-button-border: #00000000;
  --vscode-button-secondaryBackground: #2a2d33;
  --vscode-button-secondaryForeground: #ffffff;
  --vscode-button-secondaryHoverBackground: #45494e;

  --vscode-badge-background: #353a42;
  --vscode-badge-foreground: #ffffff;

  --vscode-list-activeSelectionBackground: #1d2229;
  --vscode-list-hoverBackground: #2a2d2e;
  --vscode-toolbar-hoverBackground: #2d3138;
  --vscode-scrollbarSlider-background: #79797966;

  --vscode-tab-inactiveBackground: #1d2026;
  --vscode-tab-inactiveForeground: #969696;
  --vscode-tab-activeBorder: #007acc;
  --vscode-tab-activeBorderTop: #007acc;

  --vscode-charts-blue: #75beff;
  --vscode-charts-green: #89d185;
  --vscode-charts-orange: #d18616;
  --vscode-charts-purple: #b180d7;
  --vscode-charts-red: #f14c4c;
  --vscode-charts-yellow: #cca700;

  --vscode-gitDecoration-addedResourceForeground: #81b88b;
  --vscode-gitDecoration-deletedResourceForeground: #c74e39;
  --vscode-diffEditor-insertedTextBackground: #9bb9551a;
  --vscode-diffEditor-insertedTextForeground: #cccccc;
  --vscode-diffEditor-removedTextBackground: #ff00001a;
  --vscode-diffEditor-removedTextForeground: #cccccc;
  --vscode-editorWarning-foreground: #cca700;
  --vscode-testing-iconPassed: #73c991;
}
.demo {
  --ui-radius-xs: 3px;
  --ui-radius-sm: 5px;
  --ui-radius: 8px;
  --ui-radius-lg: 12px;
  --ui-radius-pill: 8px;
  --ui-border-width: 1px;
  --ui-surface-bg: color-mix(in srgb, var(--vscode-sideBar-background) 86%, #000 14%);
  --ui-surface-border: color-mix(in srgb, var(--vscode-panel-border) 55%, transparent);
  --ui-surface-shadow: none;
  --ui-overlay-shadow: 0 10px 36px rgba(0, 0, 0, 0.42);
  --ui-control-shadow: none;
  --ui-surface-blur: 0px;
  --ui-pad: 16px;
  --ui-pad-sm: 11px;
  --ui-gap: 12px;
  --ui-font: var(--vscode-font-family);
  --ui-label-letter-spacing: 0;
  --ui-menu-bg: var(--vscode-editor-background);
  --ui-menu-border: var(--vscode-panel-border);
  --ui-menu-radius: var(--ui-radius-lg);
  --ui-menu-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  --ui-menu-font-size: 12px;
  --ui-menu-hover: var(--vscode-list-hoverBackground);
  --ui-menu-selected-bg: var(--vscode-list-activeSelectionBackground);
  --ui-menu-selected-border: var(--vscode-focusBorder);
  --accent: var(--vscode-focusBorder);
  --accent-soft: color-mix(in srgb, var(--vscode-focusBorder) 16%, transparent);
  --cascade-accent: var(--vscode-focusBorder);
  --text: var(--vscode-foreground);
  --text-dim: var(--vscode-descriptionForeground);
  --text-muted: var(--vscode-descriptionForeground);
  --text-secondary: var(--vscode-descriptionForeground);
  --muted: var(--vscode-descriptionForeground);
  --border: var(--vscode-panel-border);
  --surface: var(--vscode-sideBar-background);
  --surface-2: color-mix(in srgb, var(--vscode-foreground) 8%, transparent);
  --surface-3: color-mix(in srgb, var(--vscode-foreground) 16%, transparent);
  --panel: var(--vscode-sideBar-background);
  --bg: var(--vscode-editor-background);
  --bg-secondary: var(--vscode-sideBar-background);
  --danger: var(--vscode-errorForeground);
}
.demo {
  --ui-radius-xs: 0px;
  --ui-radius-sm: 1px;
  --ui-radius: 2px;
  --ui-radius-lg: 3px;
  --ui-radius-pill: 2px;
  --ui-surface-bg: color-mix(in srgb, var(--vscode-sideBar-background) 91%, #000 9%);
  --ui-surface-border: color-mix(in srgb, var(--vscode-foreground) 24%, var(--vscode-panel-border));
  --ui-surface-shadow: inset 0 1px 0 color-mix(in srgb, var(--vscode-foreground) 6%, transparent);
  --ui-surface-blur: 0px;
  --ui-overlay-shadow: 4px 4px 0 color-mix(in srgb, #000 62%, transparent);
  --ui-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--vscode-foreground) 7%, transparent);
  --ui-pad: 14px;
  --ui-pad-sm: 9px;
  --ui-gap: 10px;
  --ui-font: var(--vscode-editor-font-family, Consolas, monospace);
  --ui-label-letter-spacing: 0.025em;
  --ui-workbench-bg: color-mix(in srgb, var(--vscode-editor-background) 90%, #000 10%);
  --ui-workspace-bg: color-mix(in srgb, var(--vscode-editor-background) 96%, #000 4%);
  --ui-panel-bg: color-mix(in srgb, var(--vscode-sideBar-background) 78%, #000 22%);
  --ui-chrome-bg: color-mix(in srgb, var(--vscode-sideBar-background) 66%, #000 34%);
  --ui-divider: color-mix(in srgb, var(--vscode-foreground) 18%, var(--vscode-panel-border));
  --ui-divider-strong: color-mix(in srgb, var(--vscode-foreground) 27%, var(--vscode-panel-border));
}
.demo {
  --vscode-foreground: #d7e3f4;
  --vscode-descriptionForeground: #8fa3bf;
  --vscode-errorForeground: #f43f5e;
  --vscode-focusBorder: #14b8a6;
  --vscode-panel-border: #24364f;

  --vscode-editor-background: #101214;
  --vscode-editorWidget-background: #171b21;
  --vscode-sideBar-background: #171b21;
  --vscode-sideBarSectionHeader-background: #00000000;
  --vscode-textCodeBlock-background: #09131f;
  --vscode-textLink-foreground: #5eead4;

  --vscode-input-background: #22272f;
  --vscode-input-foreground: #d7e3f4;
  --vscode-input-border: #24364f;
  --vscode-input-placeholderForeground: #8fa3bf;
  --vscode-inputValidation-errorBackground: #4c1d2a;
  --vscode-inputValidation-errorBorder: #f43f5e;

  --vscode-button-background: #14b8a6;
  --vscode-button-foreground: #08211f;
  --vscode-button-hoverBackground: #0d9488;
  --vscode-button-border: #00000000;
  --vscode-button-secondaryBackground: #232a33;
  --vscode-button-secondaryForeground: #d7e3f4;
  --vscode-button-secondaryHoverBackground: #22334d;

  --vscode-badge-background: #353c46;
  --vscode-badge-foreground: #d7e3f4;

  --vscode-list-activeSelectionBackground: #22272f;
  --vscode-list-hoverBackground: #22272f;
  --vscode-toolbar-hoverBackground: #2a313b;
  --vscode-scrollbarSlider-background: #627da366;

  --vscode-tab-inactiveBackground: #1d222a;
  --vscode-tab-inactiveForeground: #8fa3bf;
  --vscode-tab-activeBorder: #14b8a6;
  --vscode-tab-activeBorderTop: #14b8a6;

  --vscode-charts-blue: #38bdf8;
  --vscode-charts-green: #22c55e;
  --vscode-charts-orange: #f59e0b;
  --vscode-charts-purple: #7c93ff;
  --vscode-charts-red: #f43f5e;
  --vscode-charts-yellow: #eab308;

  --vscode-gitDecoration-addedResourceForeground: #4ade80;
  --vscode-gitDecoration-deletedResourceForeground: #f87171;
  --vscode-diffEditor-insertedTextBackground: #22c55e1f;
  --vscode-diffEditor-insertedTextForeground: #d7e3f4;
  --vscode-diffEditor-removedTextBackground: #f43f5e1f;
  --vscode-diffEditor-removedTextForeground: #d7e3f4;
  --vscode-editorWarning-foreground: #eab308;
  --vscode-testing-iconPassed: #22c55e;
}
.demo {
  --vscode-panel-border: #31363e;
  --vscode-input-border: #31363e;
  --vscode-focusBorder: #3ee26a;
  --vscode-textLink-foreground: #6ee797;
  --vscode-button-background: #3ee26a;
  --vscode-button-foreground: #04150a;
  --vscode-button-hoverBackground: #2cc458;
  --vscode-tab-activeBorder: #3ee26a;
  --vscode-tab-activeBorderTop: #3ee26a;
}
.demo .dt-modes {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--ui-radius);
  border: 1px solid color-mix(in srgb, var(--vscode-panel-border) 70%, transparent);
  background: color-mix(in srgb, var(--vscode-sideBar-background) 82%, #000 18%);
  -webkit-app-region: no-drag;
}
.demo .dt-mode {
  height: 24px;
  padding: 0 12px;
  border: none;
  border-radius: var(--ui-radius);
  background: transparent;
  color: var(--vscode-descriptionForeground);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.demo .dt-mode:hover {
  color: var(--vscode-foreground);
  background: var(--vscode-list-hoverBackground);
}
.demo .dt-mode.active {
  background: var(--vscode-button-background);
  color: var(--vscode-button-foreground);
}
.demo .dt-mode-beta {
  display: inline-block;
  margin-left: 5px;
  padding: 0 3px;
  border: 1px solid currentColor;
  border-radius: var(--ui-radius-xs);
  font-family: var(--vscode-editor-font-family, monospace);
  font-size: 8px;
  font-weight: 600;
  line-height: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
  opacity: 0.7;
}
.demo .demo-pop {
  background: var(--ui-menu-bg);
  border: 1px solid var(--ui-menu-border);
  border-radius: var(--ui-menu-radius);
  box-shadow: var(--ui-menu-shadow);
  color: var(--vscode-foreground);
  font-size: var(--ui-menu-font-size);
}
.demo .demo-model-main {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: transparent;
  padding: 2px 0; margin: 0;
  cursor: pointer; min-width: 0; text-align: left;
  line-height: 1;
  transition: color 0.1s ease;
}
.demo .demo-model-name {
  color: var(--vscode-foreground);
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo .account-switch { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.demo .account-switch-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; background: transparent; margin: 0;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12px; font-weight: 700; line-height: 1.3;
  color: var(--vscode-descriptionForeground);
  cursor: pointer; min-width: 0;
  transition: color 0.1s ease, background 0.1s ease;
}
.demo .account-switch-btn:hover,
.demo .account-switch-btn.open {
  color: var(--vscode-foreground);
  background: var(--vscode-toolbar-hoverBackground, rgba(127, 127, 127, 0.1));
}
.demo .account-switch-icon { flex: none; display: block; }
.demo .account-switch-code { white-space: nowrap; letter-spacing: 0.3px; transform: translateY(0.5px); }
.demo .account-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 260px; max-width: calc(100vw - 16px);
  padding: 5px;
}
.demo .account-pop-scope {
  position: relative;
  display: flex;
  margin-bottom: 6px;
}
.demo .account-pop-scope::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--vscode-focusBorder);
  pointer-events: none;
}
.demo .account-pop-scope > button {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--vscode-descriptionForeground);
  font: inherit;
  cursor: pointer;
}
.demo .account-pop-scope > button:hover:not(:disabled) {
  background: var(--ui-menu-hover);
  color: var(--vscode-foreground);
}
.demo .account-pop-scope > button[aria-pressed="true"] {
  z-index: 1;
  border-color: var(--vscode-focusBorder);
  border-bottom-color: transparent;
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
  background: var(--ui-menu-bg);
  color: var(--vscode-foreground);
  font-weight: 600;
}
.demo .account-pop-scope > button:disabled {
  opacity: 0.6;
  cursor: default;
}
.demo .account-pop-row {
  width: 100%; margin: 0;
  border: 1px solid transparent;
  background: transparent; color: var(--vscode-foreground);
  font: inherit; text-align: left; cursor: pointer;
}
.demo .account-pop-row + .account-pop-row { margin-top: 2px; }
.demo .account-pop-row.active,
.demo .account-pop-row.active:hover {
  border-color: var(--ui-menu-selected-border);
  background: var(--ui-menu-selected-bg);
  cursor: default;
}
.demo .account-pop-check { flex: none; color: var(--vscode-focusBorder); }
.demo .account-pop-note { padding: 2px 6px 6px; }
.demo .account-pop-row.disabled { cursor: default; color: var(--vscode-descriptionForeground); }
.demo .account-pop-row.disabled:hover { background: transparent; }
.demo .chat-tool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  padding: 1px 6px;
  border-radius: var(--ui-radius);
}
.demo .chat-tool-row:hover {
  background: var(--vscode-list-hoverBackground);
}
.demo .chat-tool-name {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo .chat-tools-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vscode-descriptionForeground);
  padding: 2px 4px 6px 8px;
}
@media (max-width: 560px) {
  .demo .chat-tool-row {
    gap: 8px;
    min-height: 36px;
  }
}
.demo .t-question {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 2px 7px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--vscode-foreground) 9%, transparent);
  max-height: 44vh;
  overflow-y: auto;
}
.demo .t-q-title {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vscode-foreground);
  padding: 0 2px;
}
.demo .t-q-label { flex: 1; min-width: 0; }
.demo .t-q-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: -2px;
  background: transparent;
  border: none;
  border-radius: var(--ui-radius);
  color: color-mix(in srgb, var(--vscode-foreground) 70%, transparent);
  cursor: pointer;
}
.demo .t-q-cancel {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: -2px;
  background: transparent;
  border: none;
  border-radius: var(--ui-radius);
  color: color-mix(in srgb, var(--vscode-foreground) 55%, transparent);
  cursor: pointer;
}
.demo .t-q-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.demo .t-q-opt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--vscode-foreground);
  font: inherit;
  font-size: 13px;
  padding: 5px 8px 5px 1px;
  cursor: pointer;
  border-radius: 0;
  line-height: 1.4;
  transition: background 0.1s ease-out, border-color 0.1s ease-out;
}
.demo .t-q-opt.chosen {
  background: color-mix(in srgb, var(--vscode-focusBorder, #14b8a6) 12%, transparent);
  border-color: color-mix(in srgb, var(--vscode-focusBorder, #14b8a6) 45%, transparent);
}
.demo .t-q-marker {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1.5px solid color-mix(in srgb, var(--vscode-foreground) 38%, transparent);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vscode-button-foreground, #fff);
}
.demo .t-q-opt.chosen .t-q-marker { border-color: var(--vscode-focusBorder, #14b8a6); }
.demo .demo-composer-float .demo-composer {
  width: 100%;
}
.demo .demo-composer-float .demo-composer {
  position: relative;
  background: color-mix(in srgb, var(--vscode-input-background) 86%, #000 14%);
  border: 1px solid color-mix(in srgb, var(--vscode-input-border, var(--vscode-panel-border)) 72%, transparent);
  border-radius: var(--ui-radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}
.demo .demo-composer-float .demo-composer.has-question {
  border-color: color-mix(in srgb, var(--vscode-focusBorder, #14b8a6) 72%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vscode-focusBorder, #14b8a6) 19%, transparent),
              0 0 10px color-mix(in srgb, var(--vscode-focusBorder, #14b8a6) 9%, transparent) !important;
}
.demo .demo-composer-stack .demo-composer {
  background: var(--vscode-input-background);
  border-color: color-mix(in srgb, var(--vscode-input-border, var(--vscode-panel-border)) 90%, transparent);
  border-radius: var(--ui-radius-lg);
  padding: 10px 14px 10px;
  min-height: var(--composer-base-h, 92px);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}
.demo .demo-sc {
  --ghd-band: color-mix(in srgb, var(--vscode-input-background) 65%, var(--vscode-editor-background));
  --ghd-band-raised: color-mix(in srgb, var(--vscode-foreground) 4%, var(--vscode-input-background));
  --ghd-well: color-mix(in srgb, var(--vscode-input-background) 28%, var(--vscode-editor-background));
  --ghd-edge: color-mix(in srgb, var(--vscode-foreground) 11%, transparent);
}
.demo .sc-strip {
  --ghd-seam: var(--vscode-focusBorder);
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: stretch; gap: 14px;
  margin-bottom: 8px;
  background: var(--vscode-editor-background);
}
.demo .sc-strip::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ghd-seam);
  z-index: 1;
  pointer-events: none;
}
.demo .sc-accountbar-top {
  display: flex; align-items: stretch; gap: 14px;
  flex: 0 1 auto; min-width: 0;
}
.demo .sc-label {
  align-self: center; margin-top: 7px;
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 13px; font-weight: 600; color: var(--vscode-descriptionForeground);
}
.demo .sc-accts {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  padding: 14px 8px 7px;
}
.demo .sc-acct {
  position: relative;
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 40px; padding: 0 8px 0 4px;
  border: 2px solid transparent;
  border-radius: var(--ui-radius);
  background: transparent;
  color: var(--vscode-foreground);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.demo .sc-acct.hover { transform: translateY(-1px); }
.demo .sc-face { position: relative; flex: 0 0 auto; width: 28px; height: 28px; }
.demo .sc-acct-label {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; max-width: 170px;
  line-height: 1.15;
}
.demo .sc-acct-name,
.demo .sc-acct-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo .sc-acct-name { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.demo .sc-acct-handle { font-size: 12px; color: var(--vscode-descriptionForeground); }
.demo .sc-acct.active { z-index: 2; }
.demo .sc-acct.active.hover { transform: none; }
.demo .sc-acct.active::before {
  content: "";
  position: absolute; z-index: -1;
  top: -8px; left: -8px; right: -8px; bottom: -9px;
  box-sizing: border-box;
  border: 2px solid var(--ghd-seam, var(--vscode-focusBorder));
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ghd-seam, var(--vscode-focusBorder)) 18%, var(--vscode-editor-background)),
    color-mix(in srgb, var(--ghd-seam, var(--vscode-focusBorder)) 6%, var(--vscode-editor-background)) 45%,
    var(--vscode-editor-background) 90%
  );
  pointer-events: none;
  animation: ghd-tab-drop .26s cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .demo .sc-acct.active::before { animation: none; }
}
.demo[data-cascade-style="retro"] .sc-acct,
.demo[data-cascade-style="retro"] .sc-ava,
.demo[data-cascade-style="retro"] .sc-badge,
.demo[data-cascade-style="retro"] .sc-div { border-radius: 0; }
.demo[data-cascade-style="retro"] .sc-acct.active::before { border-radius: 0; }
.demo[data-cascade-style="retro"] .sc-ava { font-family: var(--ui-font); font-weight: 700; }
.demo .sc-acct:not(.sc-acct.active):not(.sc-acct-add) { color: var(--vscode-descriptionForeground); }
.demo .sc-acct:not(.sc-acct.active):not(.sc-acct-add) .sc-face { opacity: .55; filter: grayscale(.55); }
.demo[data-cascade-style="retro"] .sc-acct:not(.sc-acct.active):not(.sc-acct-add) .sc-face { filter: grayscale(1); }
.demo .sc-acct:not(.sc-acct.active):not(.sc-acct-add):is(.hover, :focus-visible) { color: var(--vscode-foreground); }
.demo .sc-acct:not(.sc-acct.active):not(.sc-acct-add):is(.hover, :focus-visible) .sc-face { opacity: 1; filter: none; }
.demo .sc-ava { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.demo .sc-ava {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vscode-badge-background); color: var(--vscode-badge-foreground);
}
.demo .sc-badge {
  position: absolute; right: -4px; bottom: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px;
  border: 2px solid var(--vscode-editor-background); border-radius: 50%;
  background: var(--vscode-badge-background); color: var(--vscode-badge-foreground);
}
.demo .sc-acct-add {
  width: 40px; padding: 0;
  justify-content: center;
  border: 2px dashed var(--vscode-panel-border);
  background: var(--vscode-input-background);
  color: var(--vscode-descriptionForeground);
}
.demo .sc-acct-add.hover { border-color: var(--vscode-focusBorder); color: var(--vscode-foreground); }
.demo .sc-div {
  flex-shrink: 0;
  width: 1px; height: 26px;
  background: var(--vscode-panel-border);
  border-radius: 1px;
}
.demo .sc-div.faint { opacity: .5; }
.demo .sc-caption {
  align-self: center; margin-top: 7px;
  flex: 1 1 0; min-width: 0;
  min-height: 18px;
  display: flex; align-items: center; gap: 8px;
  overflow: hidden; white-space: nowrap;
  font-size: 13px; line-height: 1;
}
.demo .sc-caption-lead { color: var(--vscode-descriptionForeground); }
.demo .sc-caption-name { font-weight: 700; font-size: 13px; color: var(--vscode-foreground); }
.demo .sc-caption-provider {
  display: inline-flex; align-items: center;
  padding: 2px 6px; border-radius: var(--ui-radius-xs);
  background: var(--vscode-badge-background); color: var(--vscode-badge-foreground);
  font-size: 11px;
}
.demo .sc-sync {
  display: flex; flex-direction: column; align-items: stretch;
  flex: 0 0 auto; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--ghd-edge); border-radius: var(--ui-radius);
  background: var(--ghd-band-raised);
}
.demo .sc-commit > .sc-sync { border-radius: 0; }
.demo .sc-stage-column > .ghd-context-message { border-top: 0; border-bottom: 1px solid var(--vscode-panel-border); }
.demo .sc-stage,
.demo .sc-commit,
.demo .sc-time {
  box-sizing: border-box;
  min-width: 0; min-height: 0;
  border: 1px solid var(--ghd-edge);
  border-radius: var(--ui-radius);
  background: var(--ghd-band);
}
.demo .sc-commit { background: var(--ghd-band-raised); }
.demo .sc-stage { display: flex; flex-direction: column; overflow: hidden; }
.demo .sc-stage-column {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  min-width: 0; min-height: 0; overflow: hidden;
}
.demo .sc-stage { flex: 1 1 auto; }
.demo .sc-stage-column > .sc-commit { flex: 0 0 auto; max-height: 70%; overflow-y: auto; scrollbar-width: thin; }
.demo .sc-left-column {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
}
.demo .sc-pane-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex: 0 0 auto; padding: 12px 14px 8px;
}
.demo .sc-pane-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--vscode-foreground);
}
.demo .sc-commit-head { align-items: center; padding: 12px 14px 0; }
.demo .sc-commit-target { font-size: 11px; color: var(--vscode-descriptionForeground); white-space: nowrap; }
.demo .ghd-clean-layout .sc-time {
  min-height: 260px; max-height: 100%;
}
.demo .sc-commit {
  display: flex; flex: 0 0 auto; flex-direction: column; overflow: hidden;
}
.demo .sc-field {
  display: flex; flex-direction: column; gap: 6px;
  margin: 13px 14px 0;
}
.demo .sc-l {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; color: var(--vscode-foreground);
}
.demo .sc-subject,
.demo .sc-textarea {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--vscode-input-border, var(--vscode-panel-border)); border-radius: var(--ui-radius-sm);
  background: var(--vscode-editor-background); color: var(--vscode-foreground);
  font-family: inherit; font-size: 12px;
}
.demo .sc-subject { min-height: 34px; }
.demo .sc-textarea {
  height: 64px; min-height: 64px; max-height: 64px;
  resize: none; overflow-y: auto; line-height: 1.45;
}
.demo .sc-subject:focus,
.demo .sc-textarea:focus { outline: none; border-color: var(--vscode-focusBorder); }
.demo .sc-field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.demo .sc-suggest {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--vscode-focusBorder) 45%, var(--vscode-panel-border));
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--vscode-focusBorder) 10%, transparent);
  color: var(--vscode-foreground);
  font-size: 11px; line-height: 1.3; white-space: nowrap; cursor: pointer;
}
.demo .sc-suggest.hover:not(:disabled) {
  border-color: var(--vscode-focusBorder);
  background: color-mix(in srgb, var(--vscode-focusBorder) 20%, transparent);
}
.demo .sc-suggest:disabled { opacity: 0.6; cursor: default; }
.demo .sc-btns {
  display: flex; align-items: stretch; gap: 7px; flex-wrap: wrap;
  margin-top: 4px; padding: 10px 14px 12px;
}
.demo .sc-btns > .ght-btn {
  flex: 1 1 auto;
  min-width: max-content;
  justify-content: center;
  white-space: nowrap;
}
.demo .sc-hint { margin: 10px 14px 0; font-size: 11px; line-height: 1.4; color: var(--vscode-descriptionForeground); }
.demo .sc-time {
  display: flex; flex: 1 1 auto; flex-direction: column;
  min-height: 140px; overflow: hidden;
}
@media (max-width: 760px) {
  .demo .sc-left-column { min-height: 620px; overflow: visible; }
}
@media (max-width: 760px) {
  .demo .sc-left-column:has(.ghd-branch-compare) { overflow: visible; }
}
@media (max-width: 760px) {
  .demo .sc-commit { min-height: 0; overflow: hidden; }
}
@media (max-width: 760px) {
  .demo .sc-time,
.demo .sc-stage-column { min-height: 320px; overflow: hidden; }
}
.demo[data-cascade-style="retro"] :is(
  .ghd-files-column,
  .sc-stage,
  .sc-commit,
  .sc-time,
  .ghd-inline-branches,
  .sc-sync,
  .ghd-more
) {
  box-shadow: var(--ui-surface-shadow);
}
.demo[data-cascade-style="retro"] :is(
  .sc-strip,
  .ghd-compare-diff-head,
  .ghd-connect-nav
) {
  background: var(--ui-chrome-bg);
  border-color: var(--ui-divider-strong);
}
.demo[data-cascade-style="retro"] .sc-div { background: var(--ui-divider-strong); }
.demo[data-cascade-style="retro"] :is(
  .sc-pane-title,
  .ghd-inline-branches-title,
  .ghd-sync-label,
  .sc-l,
  .ghd-presence-head,
  .ght-section-title,
  .rp-toggle,
  .rx-group-title,
  .ghd-more-title
) {
  font-family: var(--ui-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.demo[data-cascade-style="retro"] .sc-commit-head .sc-pane-title { font-size: 13px; }
.demo[data-cascade-style="retro"] :is(
  .ghd-file-path,
  .ghd-folder-name,
  .ghd-stage-file,
  .ghd-file-open,
  .ghd-folder-open,
  .ghd-commit-subject,
  .sc-subject,
  .sc-textarea,
  .ghd-current-branch-copy strong,
  .ghd-branch-row-copy strong
) {
  font-family: var(--ui-font);
}
.demo[data-cascade-style="retro"] :is(.sc-subject, .sc-textarea) {
  background: var(--ui-workbench-bg);
  border-color: var(--ui-divider);
}
.demo[data-cascade-style="retro"] :is(.ght-btn, .sc-suggest, .ghd-auto-stage, .ghd-compare-toggle) {
  border-color: var(--ui-divider);
  box-shadow: var(--ui-control-shadow), 1px 1px 0 color-mix(in srgb, #000 55%, transparent);
}
.demo[data-cascade-style="retro"] :is(.ght-btn, .sc-suggest, .ghd-auto-stage, .ghd-compare-toggle):active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: none;
}
.demo[data-cascade-style="retro"] :is(.ght-btn:disabled, .sc-suggest:disabled, .ghd-compare-toggle:disabled) {
  box-shadow: none;
}
@keyframes ghd-tab-drop {
  from { opacity: 0; }
  to { opacity: 1; }
}