/* Presentation deltas loaded only by the design refresh bundle.
 * Keep original component bundles intact so flag OFF restores the baseline. */
/* Refresh-only delta from app/assets/stylesheets/_base_overrides.css. Baseline rules remain in the normal bundle. */
a:hover {
  color: var(--fg, var(--text-primary, #202124))
}
/* Refresh-only delta from app/assets/stylesheets/design_system/_tokens.css. Baseline rules remain in the normal bundle. */
:root[data-theme="dark"],
[data-theme="dark"] {
  --step-browser:     var(--fg-2)
}
:root[data-theme="light"],
[data-theme="light"] {
  --step-browser:     var(--fg-2)
}
/* Refresh-only delta from app/assets/stylesheets/design_system/components/_auth.css. Baseline rules remain in the normal bundle. */
[data-theme] .auth-card .bg-red-100,
[data-theme] .auth-card [class*="bg-red"] {
  background: var(--danger-bg) !important;
  border-color: color-mix(in srgb, var(--danger-fg) 30%, transparent) !important
}
[data-theme] .auth-card .text-red-900,
[data-theme] .auth-card .text-red-600,
[data-theme] .auth-card [class*="text-red"] { color: var(--danger-fg) !important
}
/* Refresh-only delta from app/assets/stylesheets/design_system/components/_credit_balance_widget.css. Baseline rules remain in the normal bundle. */
[data-theme] .credits-pop {
  visibility: hidden
}
[data-theme] .credits-widget.show .credits-pop {
  visibility: visible
}
/* Refresh-only delta from app/assets/stylesheets/design_system/components/_editor_chat.css. Baseline rules remain in the normal bundle. */
[data-theme] #queue_container.editor-message-queue {
  max-height: clamp(152px, 22dvh, 216px);
  padding-bottom: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 8px
}
[data-theme] .editor-message-queue:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -2px;
  border-radius: var(--radius-sm)
}
[data-theme] .queued-chip {
  min-width: 0
}
[data-theme] .queued-chip__text {
  margin: 0
}
[data-theme] .queued-chip__meta {
  line-height: 1.4;
  flex-wrap: wrap
}
@media (hover: none) {
  [data-theme] .queued-chip__action { opacity: 1
  }
}
/* Refresh-only delta from app/assets/stylesheets/design_system/components/_help_drawer.css. Baseline rules remain in the normal bundle. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .help-drawer {
  background:var(--rx-overlay); border-color:var(--rx-overlay-border);
  box-shadow:var(--rx-floating-shadow)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .help-drawer :is(.hd-close,.hd-tickets-link):hover { background:var(--rx-overlay-hover); color:var(--fg)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .help-drawer :is(.hd-close,.hd-send,.hd-submit,.hd-tickets-link):focus-visible {
  outline:2px solid var(--ref-keyboard-focus); outline-offset:2px
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .hd-send { background:var(--ref-composer-send); color:var(--ref-composer-send-ink)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .hd-send:hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) { background:var(--ref-composer-send-hover)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .hd-submit { background:var(--rx-primary); color:var(--rx-primary-ink); font-weight:500
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .hd-submit:hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) { background:var(--rx-primary-hover)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .hd-submit:active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) { background:var(--rx-primary-active)
}
/* Refresh-only delta from app/assets/stylesheets/design_system/components/_launcher_mode.css. Baseline rules remain in the normal bundle. */
@media (prefers-reduced-motion: no-preference) {
  [data-theme] .launcher-mode__indicator[data-mode="creative"] {
    background: color-mix(in srgb, var(--fg-3) 14%, var(--card-bg))
  }
}
@media (prefers-reduced-motion: no-preference) {
  [data-theme] .launcher-mode__indicator[data-mode="creative"]::after {
    background:
      conic-gradient(
        from var(--launcher-beam-angle),
        transparent 0%, transparent 40%,
        rgba(255, 255, 255, 0.2) 56%,
        rgba(255, 255, 255, 0.85) 67%,
        rgba(255, 255, 255, 0.2) 73%,
        transparent 80%, transparent 100%
      ),
      var(--fg-3)
  }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="light"] .launcher-mode__indicator[data-mode="creative"]::after {
    background:
      conic-gradient(
        from var(--launcher-beam-angle),
        transparent 0%, transparent 40%,
        rgba(0, 0, 0, 0.12) 56%,
        rgba(0, 0, 0, 0.4) 67%,
        rgba(0, 0, 0, 0.12) 73%,
        transparent 80%, transparent 100%
      ),
      var(--fg-3)
  }
}
/* Refresh-only delta from app/assets/stylesheets/design_system/components/_mobile_chat_controls.css. Baseline rules remain in the normal bundle. */
[data-theme] .chat-actions-sheet {
  visibility: hidden;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 280ms
}
[data-theme] .chat-actions-sheet.is-open {
  visibility: visible;
  transition-delay: 0s
}
@media (max-width: 1023px) {
  [data-theme] .editor-mobile-control,
  [data-theme] .editor-mobile-composer :is(.chat-actions-fab, .editor-send-btn) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    padding: 10px
  }
}
@media (max-width: 1023px) {
  [data-theme] .editor-mobile-header button { min-height: 44px
  }
}
@media (max-width: 1023px) {
  [data-theme] .editor-mobile-composer textarea { min-width: 0
  }
}
@media (max-width: 1023px) {
  [data-theme] .editor-mobile-control svg { color: currentColor
  }
}
@media (max-width: 1023px) {
  [data-theme] .editor-mobile-navigation {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 4px;
    padding-inline: 8px
  }
}
@media (max-width: 1023px) {
  [data-theme] .editor-mobile-navigation > [data-mobile-navigation-target="leftAction"] { grid-column: 1
  }
}
@media (max-width: 1023px) {
  [data-theme] .editor-mobile-navigation > [data-mobile-navigation-target="rightAction"] { grid-column: 3
  }
}
@media (max-width: 1023px) {
  [data-theme] .editor-mobile-mode-switch {
    position: static;
    transform: none;
    grid-column: 2;
    justify-self: center;
    min-width: 0
  }
}
@media (max-width: 1023px) {
  [data-theme] .editor-mobile-mode-switch button { padding-inline: 12px; min-height: 44px
  }
}
@media (max-width: 1023px) {
  [data-theme] :is(.editor-mobile-header button, .editor-mobile-control, .editor-mobile-mode-switch button, .editor-mobile-composer .editor-send-btn):focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px
  }
}
/* Refresh-only delta from app/assets/stylesheets/design_system/components/_notifications_popover.css. Baseline rules remain in the normal bundle. */
[data-theme] .notif-pop {
  visibility: hidden
}
[data-theme] .notif-wrap.show .notif-pop {
  visibility: visible
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notif-pop {
  background:var(--rx-overlay); border-color:var(--rx-overlay-border);
  box-shadow:var(--rx-floating-shadow)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notif-pop :is(.notif-row:not(.invite),.notif-mark,.notif-act:not(.primary)):hover {
  background:var(--rx-overlay-hover); color:var(--fg)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notif-pop .notif-act.primary {
  background:var(--rx-primary); color:var(--rx-primary-ink); border-color:transparent
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notif-pop .notif-act.primary:hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) {
  background:var(--rx-primary-hover); color:var(--rx-primary-ink)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notif-pop .notif-act.primary:active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) {
  background:var(--rx-primary-active)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notif-pop :is(.notif-mark,.notif-act):focus-visible {
  outline:2px solid var(--ref-keyboard-focus); outline-offset:2px
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notif-pop :is(.notif-mark,.notif-act):is(:disabled,[aria-disabled="true"]) { opacity:.5; cursor:default
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notification-widget .notification-popover {
  background:var(--rx-overlay); color:var(--fg);
  border:1px solid var(--rx-overlay-border); border-radius:12px;
  box-shadow:var(--rx-floating-shadow)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notification-widget :is(.notification-popover__head,.notification-popover__footer) {
  background:transparent; border-color:var(--line)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notification-widget .notification-item { background:transparent; border-color:var(--line)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notification-widget .notification-item.unread { background:var(--rx-overlay-selected)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notification-widget .notification-item:hover { background:var(--rx-overlay-hover)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .notification-widget .notification-popover :is(button,a):focus-visible {
  outline:2px solid var(--ref-keyboard-focus); outline-offset:2px
}
/* Refresh-only delta from app/assets/stylesheets/design_system/components/_prose.css. Baseline rules remain in the normal bundle. */
[data-theme] .help-article.help-article-reader { gap: 24px
}
[data-theme] .help-article-reader > .help-article-intro { min-width: 0
}
[data-theme] .help-article-reader > .help-article-intro .ds-prose > :last-child { margin-bottom: 0
}
[data-theme] .help-article-reader > .help-toc { align-self: start
}
@media (min-width: 1024px) {
  [data-theme] .help-article.help-article-reader { column-gap: 64px
  }
}
@media (min-width: 1024px) {
  [data-theme] .help-article-reader > .help-article-intro { grid-column: 1; grid-row: 1
  }
}
@media (min-width: 1024px) {
  [data-theme] .help-article-reader > .help-article-body { grid-column: 1; grid-row: 2
  }
}
@media (min-width: 1024px) {
  [data-theme] .help-article-reader > .help-toc { grid-column: 2; grid-row: 1 / span 2
  }
}
@media (max-width: 1023px) {
  [data-theme] .help-article-reader > .help-toc { position: static; max-height: none; overflow: visible; padding-block: 16px; border-block: 1px solid var(--line)
  }
}
@media (max-width: 1023px) {
  [data-theme] .help-article-reader > .help-toc a { display: flex; align-items: center; min-height: 44px; padding-block: 8px
  }
}
@media (max-width: 767px) {
  [data-theme] .support-feature-filters .chip { height: auto; min-height: 44px; padding-block: 8px
  }
}
[data-theme] .integration-guide-article > .help-toc {
  position: static;
  max-height: none;
  align-self: start
}
[data-theme] .integration-guide-article .cf-guide-table {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin: 24px 0
}
[data-theme] .integration-guide-article .cf-guide-table > table {
  display: table;
  min-width: 640px;
  margin: 0;
  border: 0;
  overflow: visible
}
[data-theme] .integration-guide-article .cf-guide-table:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 4px
}
[data-theme] .integration-guide-article .cf-guide-scroll-hint {
  display: none;
  color: var(--fg-2);
  font: 400 13px/1.5 var(--font-body)
}
@media (max-width: 767px) {
  [data-theme] .integration-guide-article .cf-guide-scroll-hint { display: block; margin: 20px 0 8px
  }
}
@media (max-width: 767px) {
  [data-theme] .integration-guide-article .cf-guide-scroll-hint + .cf-guide-table { margin-top: 0
  }
}
@media (min-width: 1024px) {
  [data-theme] .integration-guide-article > .help-article-body { grid-column: 1; grid-row: 1
  }
}
@media (min-width: 1024px) {
  [data-theme] .integration-guide-article > .help-toc {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 96px;
    max-height: calc(100dvh - 128px)
  }
}
[data-theme] .ti-evaluation-table { min-width: 680px
}
[data-theme] .ti-evaluation-scroll:focus-visible,
[data-theme] .ti-show-table-wrap:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 4px
}
[data-theme] .ti-table-caption { color: var(--fg-2); font: 500 14px/1.5 var(--font-body)
}
[data-theme] .ti-table-scroll-hint {
  display: none;
  color: var(--fg-2);
  font: 400 13px/1.5 var(--font-body)
}
@media (max-width: 1023px) {
  [data-theme] .ti-table-scroll-hint { display: block; margin: 12px 0 8px
  }
}
/* Refresh-only delta from app/assets/stylesheets/design_system/components/_publish_modal.css. Baseline rules remain in the normal bundle. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm .status-pill.live {
  color:var(--success-fg); background:var(--success-bg);
  border-color:color-mix(in srgb,var(--success-fg) 30%,var(--line))
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm .status-pill.live .dot {
  background:var(--success-fg); box-shadow:none
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm .status-pill.pending {
  color:var(--warning-fg); background:color-mix(in srgb,var(--warning-fg) 8%,var(--bg-2));
  border-color:color-mix(in srgb,var(--warning-fg) 28%,var(--line))
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm .status-pill.pending .dot { background:var(--warning-fg)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm :is(.deploy-cta,.feature-btn.security,.feature-btn.perf,.feature-btn.seo) {
  background:var(--rx-primary); color:var(--rx-primary-ink); box-shadow:none
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm :is(.deploy-cta,.feature-btn.security,.feature-btn.perf,.feature-btn.seo):hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) {
  background:var(--rx-primary-hover); transform:none
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm :is(.deploy-cta,.feature-btn.security,.feature-btn.perf,.feature-btn.seo):active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) {
  background:var(--rx-primary-active)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm .feature-btn.github {
  background:var(--rx-secondary); color:var(--fg-2); border-color:var(--line-2)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm .feature-btn.github:hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) {
  background:var(--rx-secondary-hover); color:var(--fg)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm :is(.deploy-cta,.feature-btn):focus-visible {
  outline:2px solid var(--ref-keyboard-focus); outline-offset:3px
}
/* Refresh-only delta from app/assets/stylesheets/design_system/components/_templates_integrations.css. Baseline rules remain in the normal bundle. */
[data-theme] .integration-detail { --integration-logo-bg: var(--bg-2)
}
[data-theme="dark"] .integration-detail { --integration-logo-bg: var(--fg)
}
[data-theme] .integration-detail :is(.ti-show-logo, .ti-show-related-logo):has(img) { background: var(--integration-logo-bg)
}
[data-theme] .integration-detail .ti-breadcrumb { padding-block: 28px 12px
}
[data-theme] .integration-detail .ti-show-hero {
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 56px;
  padding: 32px 0 56px
}
[data-theme] .integration-identity { display: flex; align-items: center; gap: 20px; margin-bottom: 24px
}
[data-theme] .integration-identity > div:last-child { min-width: 0
}
[data-theme] .integration-detail .ti-show-logo { width: 64px; height: 64px; flex-shrink: 0; padding: 12px; margin: 0; border-radius: var(--radius-md)
}
[data-theme] .integration-detail .ti-show-eyebrow-row { margin-bottom: 8px
}
[data-theme] .integration-detail .ti-show-title { font-size: clamp(30px, 3vw, 44px); margin: 0
}
[data-theme] .integration-detail .ti-show-lede { font-size: 17px; line-height: 1.7; max-width: 66ch; margin-bottom: 20px
}
[data-theme] .integration-detail .ti-show-meta { margin: 0; font-size: 12px; line-height: 1.7
}
[data-theme] .integration-detail .ti-show-actions { gap: 12px; margin-top: 28px
}
[data-theme] .integration-detail :is(.ti-show-primary-cta, .ti-show-secondary-cta) {
  min-height: 44px;
  justify-content: center;
  font-size: 14px;
  line-height: 1.4;
  padding: 12px 18px;
  text-decoration: none;
  transition: background-color var(--t-base), color var(--t-base), box-shadow var(--t-base)
}
[data-theme] .integration-detail .ti-show-primary-cta:hover { transform: none
}
[data-theme] .integration-detail .ti-show-primary-cta svg { flex-shrink: 0
}
[data-theme] .integration-summary { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2)
}
[data-theme] .integration-summary h2 { margin: 0 0 8px; font: 600 16px/1.4 var(--font-body)
}
[data-theme] .integration-summary .ti-show-facts { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0
}
[data-theme] .integration-summary .ti-show-fact { padding: 16px 0; border: 0; border-radius: 0; background: transparent
}
[data-theme] .integration-summary .ti-show-fact + .ti-show-fact { border-top: 1px solid var(--line)
}
[data-theme] .integration-summary .ti-show-fact:last-child { padding-bottom: 0
}
[data-theme] .integration-summary .ti-show-fact-label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 400; margin-bottom: 5px
}
[data-theme] .integration-summary .ti-show-fact-value { font-size: 14px; line-height: 1.6; font-weight: 500
}
[data-theme] .integration-summary a { text-decoration: underline; text-underline-offset: 3px
}
[data-theme] .integration-body { display: grid; grid-template-columns: 192px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 40px; border-top: 1px solid var(--line)
}
[data-theme] .integration-toc { position: sticky; top: 104px; display: grid; gap: 4px
}
[data-theme] .integration-toc p { color: var(--fg-3); margin: 0 0 12px
}
[data-theme] .integration-toc a { display: block; padding: 10px 12px; margin-left: -12px; border-radius: var(--radius-sm); font: 500 13px/1.5 var(--font-body); color: var(--fg-2); text-decoration: none
}
[data-theme] .integration-toc a:hover { color: var(--fg); background: var(--hover-bg)
}
[data-theme] .integration-content { min-width: 0
}
[data-theme] .integration-detail :is(.ti-show-section, .ti-show-hero) { scroll-margin-top: 112px
}
html.os-reference-marketing[data-theme] .integration-detail :is(.ti-show-section, .ti-show-hero) { scroll-margin-top: 0
}
[data-theme] .integration-detail .ti-show-section { padding: 40px 0
}
[data-theme] .integration-detail .ti-show-section:first-child { border-top: 0; padding-top: 0
}
[data-theme] .integration-detail .ti-show-section h2 { font-size: clamp(24px, 2.2vw, 28px); line-height: 1.25; margin-bottom: 20px
}
[data-theme] .integration-detail .ti-show-section-inner { max-width: none
}
[data-theme] .integration-detail .ti-show-prose { font-size: 15px; line-height: 1.75
}
[data-theme] .integration-detail .ti-show-prose > :last-child { margin-bottom: 0
}
[data-theme] .integration-detail .integration-section-lead { color: var(--fg-2); margin: 0 0 24px; font-size: 15px; max-width: 65ch
}
[data-theme] .integration-detail .integration-checklist { list-style: none; padding: 0; margin: 24px 0 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); overflow: hidden
}
[data-theme] .integration-detail .integration-checklist li { display: flex; gap: 14px; align-items: baseline; margin: 0; padding: 18px 22px
}
[data-theme] .integration-detail .integration-checklist li + li { border-top: 1px solid var(--line)
}
[data-theme] .integration-detail .integration-checklist li::before { content: ""; flex: 0 0 6px; height: 6px; border-radius: var(--radius-pill); background: var(--accent-text)
}
[data-theme] .integration-detail .ti-show-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px
}
[data-theme] .integration-detail .ti-show-step { display: block; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2)
}
[data-theme] .integration-detail .ti-show-step-num { margin-bottom: 20px; border-radius: var(--radius-sm); background: var(--bg-3); color: var(--fg-2); font: 500 13px/1 var(--font-mono); forced-color-adjust: auto
}
[data-theme] .integration-detail .ti-show-step h3 { font-size: 16px; margin-bottom: 10px
}
[data-theme] .integration-detail .ti-show-step p { font-size: 14px; line-height: 1.7
}
[data-theme] .integration-detail .ti-show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px
}
[data-theme] .integration-detail .ti-show-table { font-size: 14px; min-width: 640px
}
[data-theme] .integration-detail .ti-show-table :is(th, td) { padding: 16px 20px; line-height: 1.65
}
[data-theme] .integration-detail .ti-show-table thead { background: var(--bg-1)
}
[data-theme] .integration-detail .ti-show-table th { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--fg)
}
[data-theme] .integration-detail .ti-show-table tbody th { width: 22%; font-weight: 500
}
[data-theme] .integration-detail .ti-show-table tr:last-child th { border-bottom: 0
}
[data-theme] .integration-detail .integration-table-note { margin: 20px 0 0; font-size: 13px; line-height: 1.7
}
[data-theme] .integration-detail .ti-show-faq { gap: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden
}
[data-theme] .integration-detail .ti-show-faq-item { border: 0; border-radius: 0; background: transparent
}
[data-theme] .integration-detail .ti-show-faq-item + .ti-show-faq-item { border-top: 1px solid var(--line)
}
[data-theme] .integration-detail .ti-show-faq-item summary { padding: 20px 24px; font-size: 15px; font-weight: 500
}
[data-theme] .integration-detail .ti-show-faq-item summary:hover { background: var(--hover-bg)
}
[data-theme] .integration-detail .ti-show-faq-answer { font-size: 15px; line-height: 1.7; padding: 0 24px 22px
}
[data-theme] .integration-detail .ti-show-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px
}
[data-theme] .integration-detail .ti-show-related-card { align-items: start; gap: 16px; padding: 22px; border-radius: var(--radius-lg); transition: background-color var(--t-base), border-color var(--t-base)
}
[data-theme] .integration-detail .ti-show-related-card:hover { background: var(--bg-3); transform: none
}
[data-theme] .integration-detail .ti-show-related-card > div:last-child { min-width: 0
}
[data-theme] .integration-detail .ti-show-related-logo { width: 40px; height: 40px; padding: 6px
}
[data-theme] .integration-detail .ti-show-related-name { margin-bottom: 6px; font-size: 15px
}
[data-theme] .integration-detail .ti-show-related-desc { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere
}
[data-theme] .integration-detail .ti-show-section .integration-pairs-title { margin-top: 40px
}
[data-theme] .integration-detail .ti-show-cta { margin: 0 0 64px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); text-align: left
}
[data-theme] .integration-detail .ti-show-cta h2 { font-size: clamp(24px, 2.2vw, 28px); line-height: 1.25
}
[data-theme] .integration-detail .ti-show-cta p { margin: 12px 0 24px; max-width: 58ch; font-size: 15px; line-height: 1.7
}
[data-theme] .integration-detail :is(a, button, summary, [tabindex="0"]):focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 3px
}
[data-theme] .integration-detail .ti-show-faq-item summary:focus-visible { outline-offset: -3px; border-radius: var(--radius-sm)
}
@media (max-width: 1100px) {
  [data-theme] .integration-detail .ti-show-hero { gap: 32px; grid-template-columns: minmax(0, 1fr) 272px
  }
}
@media (max-width: 1100px) {
  [data-theme] .integration-body { grid-template-columns: 168px minmax(0, 1fr); gap: 32px
  }
}
@media (max-width: 1100px) {
  [data-theme] .integration-detail .ti-show-steps { grid-template-columns: minmax(0, 1fr)
  }
}
@media (max-width: 1100px) {
  [data-theme] .integration-detail .ti-show-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px
  }
}
@media (max-width: 1100px) {
  [data-theme] .integration-detail .ti-show-step-num { margin: 0
  }
}
@media (max-width: 800px) {
  [data-theme] .integration-detail .ti-show-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px 0 32px
  }
}
@media (max-width: 800px) {
  [data-theme] .integration-summary .ti-show-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px
  }
}
@media (max-width: 800px) {
  [data-theme] .integration-summary .ti-show-fact:nth-child(2) { border-top: 0
  }
}
@media (max-width: 800px) {
  [data-theme] .integration-body { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 24px
  }
}
@media (max-width: 800px) {
  [data-theme] .integration-toc { position: static; display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px
  }
}
@media (max-width: 800px) {
  [data-theme] .integration-toc p { display: none
  }
}
@media (max-width: 800px) {
  [data-theme] .integration-toc a { flex-shrink: 0; min-height: 44px; margin: 0; padding: 11px 14px; border: 1px solid var(--line); background: var(--bg-2)
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-identity { align-items: start; gap: 16px
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail .ti-show-logo { width: 48px; height: 48px; padding: 8px
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail .ti-show-title { font-size: 28px
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail .ti-show-lede { font-size: 16px
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-summary { padding: 20px
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-summary .ti-show-facts { grid-template-columns: minmax(0, 1fr)
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-summary .ti-show-fact:nth-child(2) { border-top: 1px solid var(--line)
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail .ti-show-actions { align-items: stretch
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail .ti-show-actions > * { width: 100%
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail .ti-show-actions form button { width: 100%
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail :is(.ti-show-grid, .ti-show-related-grid) { grid-template-columns: minmax(0, 1fr)
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail .ti-show-section { padding-block: 32px
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail .ti-show-section:first-child { padding-top: 0
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail :is(.ti-show-step, .ti-show-related-card) { padding: 20px
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail .ti-show-faq-item summary { padding: 18px 20px
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail .ti-show-faq-answer { padding: 0 20px 20px
  }
}
@media (max-width: 540px) {
  [data-theme] .integration-detail .ti-show-cta { padding: 24px
  }
}
/* Refresh-only delta from app/assets/stylesheets/design_system/surfaces/_admin.css. Baseline rules remain in the normal bundle. */
.admin-shell {
  --admin-gen-accent: var(--fg-2)
}
/* Refresh-only delta from app/assets/stylesheets/design_system/surfaces/_computer.css. Baseline rules remain in the normal bundle. */
[data-theme] .computer-nav__meta {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-family: var(--font-body)
}
[data-theme] .computer-nav__team {
  min-width: 0; overflow: hidden; text-overflow: ellipsis
}
[data-theme] .computer-nav__balance {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  font-variant-numeric: tabular-nums
}
[data-theme] .computer-nav__balance svg,
[data-theme] .computer-nav__meta > .computer-nav__credits-out { flex: 0 0 auto
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.csched__form-submit,.cinbox__form-submit,.ctpl__cta--use) {
  background:var(--rx-primary); color:var(--rx-primary-ink); border-color:transparent;
  font-weight:500
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.csched__form-submit,.cinbox__form-submit,.ctpl__cta--use):hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) {
  background:var(--rx-primary-hover); color:var(--rx-primary-ink)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.csched__form-submit,.cinbox__form-submit,.ctpl__cta--use):active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) { background:var(--rx-primary-active)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.csched__form-submit,.cinbox__form-submit,.ctpl__cta--use):focus-visible {
  outline:2px solid var(--ref-keyboard-focus); outline-offset:3px
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.csched__form-submit,.cinbox__form-submit,.ctpl__cta--use):is(:disabled,[aria-disabled="true"]) { opacity:.5; cursor:default
}
/* Refresh-only delta from app/assets/stylesheets/design_system/surfaces/_computer_creative_templates.css. Baseline rules remain in the normal bundle. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.crtpl__zero-cta,.crtpl-show__use,.crtpl-save__submit) {
  background:var(--rx-primary); color:var(--rx-primary-ink); border-color:transparent;
  font-weight:500
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.crtpl__zero-cta,.crtpl-show__use,.crtpl-save__submit):hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) {
  background:var(--rx-primary-hover); color:var(--rx-primary-ink)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.crtpl__zero-cta,.crtpl-show__use,.crtpl-save__submit):active:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) { background:var(--rx-primary-active)
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.crtpl__zero-cta,.crtpl-show__use,.crtpl-save__submit):focus-visible {
  outline:2px solid var(--ref-keyboard-focus); outline-offset:3px
}
@media (hover:hover) and (pointer:fine) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .crtpl__reveal-cta { background:var(--rx-primary); color:var(--rx-primary-ink); border-color:transparent
  }
}
@media (hover:hover) and (pointer:fine) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .crtpl__reveal-cta:hover { background:var(--rx-primary-hover); color:var(--rx-primary-ink)
  }
}
/* Refresh-only delta from app/assets/stylesheets/design_system/surfaces/_deploys.css. Baseline rules remain in the normal bundle. */
[data-theme] .dp-page {
  --dp-gen: var(--fg-2)
}
/* Refresh-only delta from app/assets/stylesheets/design_system/surfaces/_os_rail.css. Baseline rules remain in the normal bundle. */
[data-theme] .computer-nav__kid-st {
  justify-content: center;
  width: 12px
}
/* Refresh-only delta from app/assets/stylesheets/surfaces/compare.css. Baseline rules remain in the normal bundle. */
html[data-theme] .cmp-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin
}
html[data-theme] .cmp-table-scroll > table.cmp-readable-table {
  min-width: 720px;
  table-layout: fixed
}
html[data-theme] .cmp-hub-scroll > table.cmp-readable-table { min-width: 800px
}
html[data-theme] .cmp-table-scroll > table.cmp-readable-table :is(th,td) {
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.6
}
html[data-theme] .cmp-table-scroll > table.cmp-readable-table tbody th {
  font: 600 14px/1.6 var(--font-body);
  letter-spacing: normal;
  text-transform: none
}
html[data-theme] .cmp-table-scroll:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 4px
}
html[data-theme] .cmp-table-scroll-hint { display: none; margin: 0 0 12px; color: var(--fg-2); font: 400 13px/1.5 var(--font-body)
}
@media (max-width: 900px) {
  html.os-reference-marketing[data-theme] .cmp-table-scroll-hint { display: block
  }
}
@media (max-width: 900px) {
  html[data-theme] .cmp-table-scroll-hint { display: block
  }
}
html.os-reference-marketing[data-theme] .cmp-table-scroll > table.cmp-readable-table { min-width: 720px
}
html.os-reference-marketing[data-theme] .cmp-hub-scroll > table.cmp-readable-table { min-width: 800px
}
[data-theme] .cmp-hero-actions, [data-theme] .cmp-page-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px
}
[data-theme] .cmp-page-links { gap: 8px 20px; margin-top: 20px; font: 400 14px/1.5 var(--font-body)
}
[data-theme] .cmp-page-links a { text-decoration: underline; text-underline-offset: 3px
}
[data-theme] .cmp-review-note { max-width: 80ch; margin: 28px auto 0; color: var(--fg-2); font: 400 14px/1.65 var(--font-body)
}
[data-theme] .cmp-review-note p { margin: 0
}
html.os-reference-marketing[data-theme] .cmp-hero--detail { padding-block: 40px 32px
}
html.os-reference-marketing[data-theme] .cmp-hero--detail + .cmp-section { padding-top: 32px
}
html.os-reference-marketing[data-theme] .cmp-hero__title { font-family: "Grifter", var(--font-body)
}
html.os-reference-marketing[data-theme] .cmp-chooser { scroll-margin-top: 100px
}
html.os-reference-marketing[data-theme] .cmp-chooser .cmp-win { text-decoration: none; transition: border-color 120ms ease
}
html.os-reference-marketing[data-theme] .cmp-chooser .cmp-win:hover { border-color: var(--line-2)
}
html.os-reference-marketing[data-theme] .cmp-chooser .cmp-win:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 4px
}
[data-theme] #comparison { scroll-margin-top: 100px
}
@media (max-width: 639px) {
  html.os-reference-marketing[data-theme] .cmp-hero--detail { padding-block: 32px 24px
  }
}
@media (max-width: 639px) {
  [data-theme] .cmp-review-note { text-align: left; margin-top: 24px
  }
}
/* Refresh-only delta from app/assets/stylesheets/surfaces/compare_v4.css. Baseline rules remain in the normal bundle. */
html.os-reference-marketing[data-theme] .os-marketing .cmp-hero--detail { padding-block: 48px 32px
}
html.os-reference-marketing[data-theme] .os-marketing .cmp-method { padding-top: 16px
}
html.os-reference-marketing[data-theme] .os-marketing .cmp-method .panel { padding-block: 28px
}
/* Refresh-only delta from app/assets/stylesheets/surfaces/marketing_v4.css. Baseline rules remain in the normal bundle. */
.os-marketing .tw-card:nth-child(6n) {--tint:var(--fg-3)
}
/* Refresh-only delta from app/views/public/authors/_styles.html.erb. Baseline rules remain in the normal bundle. */
html[data-reference-system="true"][data-theme] .author-avatar { position: relative; overflow: hidden; isolation: isolate
}
html[data-reference-system="true"][data-theme] .author-avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none
}
html[data-reference-system="true"][data-theme] .author-avatar__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top
}
/* Refresh-only delta from app/views/public/bossbabe/_styles.html.erb. Baseline rules remain in the normal bundle. */
html[data-reference-system="true"] .bossbabe-page {
    --bb-card-neutral: var(--bb-cream-alt)
}
html[data-reference-system="true"] .bb-card-shot--lavender { background: var(--bb-card-neutral)
}
html[data-reference-system="true"] .bb-capture :is(input, button):disabled { cursor: not-allowed; opacity: .55
}
html[data-reference-system="true"] .bb-product-preview { margin: 0
}
html[data-reference-system="true"] .bb-product-preview .bb-card-img { height: auto
}
html[data-reference-system="true"] .bb-about-grid.bb-about-grid--text { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto
}
/* Refresh-only delta from app/views/public/jv/_styles.html.erb. Baseline rules remain in the normal bundle. */
html[data-reference-system="true"] .jv-page .jv-tier-marker--elite {background:var(--jv-fg-2)
}
/* Refresh-only delta from app/views/public/learning/_styles.html.erb. Baseline rules remain in the normal bundle. */
html[data-reference-system="true"][data-theme] .learn-guide { grid-template-columns: 48px minmax(0, 1fr)
}
html[data-reference-system="true"][data-theme] .learn-guide:has(.learn-guide-image) { grid-template-columns: 248px minmax(0, 1fr)
}
html[data-reference-system="true"][data-theme] .learn-table-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 24px; border-radius: 8px
}
html[data-reference-system="true"][data-theme] .learn-table-scroll:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 4px
}
html[data-reference-system="true"][data-theme] .learn-table-scroll table { display: table; overflow: visible; min-width: 560px; width: 100%; max-width: none; margin: 0
}
html[data-reference-system="true"][data-theme] .learn-article .learn-table-hint { color: var(--fg-2); font-size: 14px; margin: 20px 0 8px
}
html[data-reference-system="true"][data-theme] .learn-article .btn { text-decoration: none
}
@media (min-width: 1100px) {
  html[data-reference-system="true"][data-theme] .learn-article .learn-table-hint { display: none
  }
}

/* The baseline single-line rail label becomes a wrapping metadata row. */
[data-theme] .computer-nav__meta { overflow: visible; text-overflow: clip; }
/* Author media is now an image inside a clipped wrapper. */
html[data-reference-system="true"][data-theme] .author-avatar { border: 0; }
/* Neutral equivalents for platform-owned legacy secondary utilities. The
   global Tailwind palette remains unchanged for the OFF lane and customer UI. */
html[data-reference-system="true"] .bg-secondary-100 { background-color: #e6e8ea; }
html[data-reference-system="true"] .bg-secondary-500 { background-color: #5f666f; }
html[data-reference-system="true"] .border-secondary-300 { border-color: #aab0b8; }
html[data-reference-system="true"] .border-secondary-500 { border-color: #5f666f; }
html[data-reference-system="true"] .hover\:border-secondary-400:hover { border-color: #868d96; }
html[data-reference-system="true"] .text-secondary-700 { color: #3a3f47; }
html[data-reference-system="true"][data-theme="dark"] .dark\:bg-secondary-900\/30 { background-color: rgb(28 31 36 / .3); }
html[data-reference-system="true"][data-theme="dark"] .dark\:border-secondary-600 { border-color: #4b515a; }
html[data-reference-system="true"][data-theme="dark"] .dark\:text-secondary-300 { color: #aab0b8; }
/* App navigation: a disclosure of native links/buttons, not an ARIA menu.
   Dashboard destinations form one group; all rows share the same visual weight. */
[data-theme] .app-nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: 256px;
  max-width: calc(100vw - 24px);
  max-height: min(640px, calc(100dvh - 88px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--rx-overlay, var(--bg-1));
  color: var(--fg);
  box-shadow: var(--rx-floating-shadow, 0 12px 28px var(--line));
}
[data-theme] .app-nav-group + .app-nav-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
[data-theme] .app-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-2);
  font: 500 13px/18px var(--font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
[data-theme] .app-nav-item:visited { color: var(--fg-2); }
[data-theme] .app-nav-item > svg { flex: 0 0 auto; color: var(--fg-3); }
[data-theme] .app-nav-item:is(:hover, :focus-visible) {
  background: var(--rx-overlay-selected, var(--hover-bg));
  color: var(--fg);
}
[data-theme] .app-nav-item:focus-visible {
  outline: 2px solid var(--fg-3);
  outline-offset: -2px;
}
[data-theme] .app-nav-item[aria-current] {
  background: var(--rx-overlay-selected, var(--bg-2));
  color: var(--fg);
}
[data-theme] .app-nav-item:is(:hover, :focus-visible, [aria-current]) > svg { color: currentColor; }
[data-theme] .app-nav-current { margin-left: auto; visibility: hidden; }
[data-theme] .app-nav-item[aria-current] > .app-nav-current { visibility: visible; }
[data-theme] .app-nav-count {
  margin-left: auto;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
[data-theme] .app-nav-dialog {
  position: fixed;
  inset: auto 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 32px);
  padding: 0 6px max(6px, env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line-2);
  border-radius: 16px 16px 0 0;
  background: var(--rx-overlay, var(--bg-1));
  color: var(--fg);
  box-shadow: var(--rx-floating-shadow);
}
[data-theme] .app-nav-dialog::backdrop { background: var(--scrim); }
[data-theme] .app-nav-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
[data-theme] .app-nav-dialog-header h2 { font: 600 16px/24px var(--font-body); margin: 0; }
[data-theme] .app-nav-dialog-close { width: auto; }
[data-theme] .app-nav-mobile-content { padding-bottom: 4px; }
@media (max-width: 1023px) {
  [data-theme] .app-nav-menu {
    position: fixed;
    inset: auto 12px 12px;
    width: auto;
    max-height: calc(100dvh - 80px);
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  [data-theme] .app-nav-item { min-height: 44px; }
}
@media (pointer: coarse) {
  [data-theme] .app-nav-item { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme] .app-nav-item { transition: none; }
}
/* Overskill Reference Lab snapshot, 2026-09-25. Source: _palette_styles.html.erb.
 * CSS only; source application controllers and behavior remain authoritative. */
/* Codex 26.903.61454 default appearance. Source and web role mapping: REFERENCE-PALETTE.md. */
/* Paint the page canvas without painting a channel behind the scrollbar thumb. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] {
 background-color:var(--bg); scrollbar-color:var(--fg-4) transparent;
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme]::-webkit-scrollbar-track { background:transparent; }
:where(html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] *) { scrollbar-color:var(--fg-4) transparent; }

html[data-reference-system="true"][data-theme] {
 --brand:#45E760; --ref-brand-alt:#75D785; --ref-gradient-green:var(--brand); --ref-gradient-mint:#2ADF8E; --ref-gradient-lime:#B4FB85; --brand-green-hue:130; --brand-green-saturation:77.142857%; --accent:var(--rx-primary); --accent-fg:var(--rx-primary-ink);
 --accent-hover:var(--rx-primary-hover); --primary-hover:var(--rx-primary-hover);
 --accent-text:var(--fg); --accent-text-hover:var(--fg); --accent-2:var(--rx-primary-hover);
 --rx-primary:var(--fg); --rx-primary-hover:color-mix(in srgb,var(--fg) 80%,var(--bg-2));
 --rx-primary-active:color-mix(in srgb,var(--fg) 70%,var(--bg-2));
 --rx-secondary-ink:var(--fg); --ref-lemon:var(--rx-surface-selected); --ref-aura:transparent;
 --rx-hover-muted:var(--fg-2); --rx-overlay-muted:var(--fg-2); --rx-overlay-focus:var(--fg);
 --rx-overlay-danger:var(--danger-fg); --rx-control:var(--rx-field);
}
html[data-reference-system="true"][data-theme="light"] {
 --ref-segment-selected:var(--rx-raised); --ref-suggestion-bg:#F7F7F7; --ref-suggestion-hover:#F2F2F2;
 --bg:#FCFCFC; --bg-1:#F3F3F3; --bg-2:#FAFAFA; --bg-3:#F5F5F6;
 --fg:#1A1C1F; --fg-2:rgba(26,28,31,.695); --fg-3:var(--fg-2); --fg-4:rgba(26,28,31,.495);
 --line:rgba(26,28,31,.078); --line-2:rgba(26,28,31,.117); --rx-divider:rgba(26,28,31,.049);
 --rx-surface-hover:rgba(26,28,31,.0535); --rx-surface-selected:rgba(26,28,31,.049);
 --rx-hover:rgba(26,28,31,.055); --rx-active:rgba(26,28,31,.085);
 --rx-primary-ink:#FFFFFF; --rx-send:#000000; --rx-send-ink:#FFFFFF;
 --rx-secondary:rgba(26,28,31,.05); --rx-secondary-hover:rgba(26,28,31,.075); --rx-secondary-active:rgba(26,28,31,.10);
 --rx-panel-shadow:0 1px 2px #00000003; --rx-edge-light:#FFFFFF;
 --rx-field:#FCFCFC; --rx-field-hover:#F8F8F9; --rx-field-border:var(--line-2); --rx-readonly:#F6F6F6;
 --rx-raised:#FCFCFC; --rx-composer:#FAFAFA; --rx-overlay:#FDFDFD; --rx-overlay-border:var(--line-2);
 --rx-overlay-hover:#EBEBEB; --rx-overlay-selected:#F0F0F0;
 --rx-overlay-selected-hover:#EBEBEB; --rx-overlay-active:#DDDDDD;
 --ref-brand-detail:var(--ref-brand-soft); --success-fg:hsl(var(--brand-green-hue) var(--brand-green-saturation) 28%); --success-bg:hsl(var(--brand-green-hue) var(--brand-green-saturation) 97%); --warning-fg:#B9480D; --danger-fg:#BA2623; --info-fg:#0169CC; --rx-overlay-danger:#911E1B;
 --rx-floating-shadow:0 2px 6px #0000000A,0 12px 32px #00000014;
}
html[data-reference-system="true"][data-theme="dark"] {
 --ref-segment-selected:#141414; --ref-suggestion-bg:#1D1D1D; --ref-suggestion-hover:#222222;
 --bg:#141414; --bg-1:#171717; --bg-2:#1B1B1B; --bg-3:#1E1E1E;
 --fg:#DFDFDF; --fg-2:rgba(255,255,255,.71); --fg-3:var(--fg-2); --fg-4:rgba(255,255,255,.498);
 --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --rx-divider:rgba(255,255,255,.04);
 --rx-surface-hover:rgba(255,255,255,.025); --rx-surface-selected:rgba(255,255,255,.045);
 --rx-hover:rgba(255,255,255,.03); --rx-active:rgba(255,255,255,.05);
 --rx-primary-ink:#2D2D2D; --rx-send:#FFFFFF; --rx-send-ink:#000000;
 --rx-secondary:rgba(223,223,223,.05); --rx-secondary-hover:rgba(223,223,223,.075); --rx-secondary-active:rgba(223,223,223,.10);
 --rx-panel-shadow:0 1px 2px #00000012; --rx-edge-light:#FFFFFF08;
 --rx-field:#191919; --rx-field-hover:#1D1D1D; --rx-field-border:var(--line-2); --rx-readonly:var(--bg-1);
 --rx-raised:#202020; --rx-composer:#202020; --rx-overlay:#202020; --rx-overlay-border:var(--line-2);
 --rx-overlay-hover:#252525; --rx-overlay-selected:#2A2A2A;
 --rx-overlay-selected-hover:#252525; --rx-overlay-active:#242424;
 --ref-brand-detail:var(--ref-brand-soft); --success-fg:hsl(var(--brand-green-hue) var(--brand-green-saturation) 65%); --success-bg:hsl(var(--brand-green-hue) var(--brand-green-saturation) 9%); --warning-fg:#FF8549; --danger-fg:#FF6764; --info-fg:#99CEFF; --rx-overlay-danger:#FFD9D9;
 --rx-floating-shadow:0 0 0 1px #00000020,0 6px 16px #00000038,0 20px 48px #00000055;
}
/* General control focus stays neutral. Editable fields use brand focus below. */
html[data-reference-system="true"][data-theme="light"] {
 --ref-field-focus-visible:var(--ref-keyboard-focus); --ref-hover-border:#BDBDBD; --ref-focus:#929292; --ref-keyboard-focus:#777777; --ref-focus-halo:rgb(0 0 0 / 4%);
}
html[data-reference-system="true"][data-theme="dark"] {
 --ref-field-focus-visible:#626262; --ref-hover-border:#3D3D3D; --ref-focus:#505050; --ref-keyboard-focus:#909090; --ref-focus-halo:rgb(255 255 255 / 2%);
}
html[data-reference-system="true"][data-theme] {
 --focus-ring-color:var(--ref-focus);
 --field-border-focus:var(--ref-focus);
 --field-ring-color:var(--ref-focus-halo);
 --field-ring:0 0 0 2px var(--ref-focus-halo);
}
/* Editable fields: softened brand edge + matching outer halo, with no size change.
   Deepen the same green on light surfaces so the edge remains legible.
   The ClickFunnels fork owns its separate primary-blue field treatment. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme="light"] {
 --ref-field-focus:var(--ref-brand-soft);
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme="dark"] {
 --ref-field-focus:var(--ref-brand-soft);
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] {
 --ref-field-focus-visible:var(--ref-field-focus);
 --field-border-focus:var(--ref-field-focus);
 --field-ring-color:color-mix(in srgb,var(--ref-brand-soft) 12%,transparent);
 --field-ring:0 0 0 3px var(--field-ring-color);
}
/* Live status is semantic success, independent of the neutral action accent. */
html[data-reference-system="true"][data-theme] .status-pill--live .status-dot {
 background:var(--success-fg);
}
/* Shared soft brand green for credit actions, task progress, active fields and switchers. */
html[data-reference-system="true"][data-theme] {
 --credit-action-bg:color-mix(in srgb,var(--credit-action) 9%,transparent);
 --credit-action-hover:color-mix(in srgb,var(--credit-action) 16%,transparent);
 --credit-link-hover:color-mix(in srgb,var(--credit-action) 10%,transparent);
}
html[data-reference-system="true"][data-theme="light"] { --ref-brand-soft:hsl(var(--brand-green-hue) 55% 28%); --credit-action:var(--ref-brand-soft); }
html[data-reference-system="true"][data-theme="dark"] { --ref-brand-soft:hsl(var(--brand-green-hue) 55% 65%); --credit-action:var(--ref-brand-soft); }
html[data-reference-system="true"][data-theme="light"] { --ref-toggle-edge:var(--ref-brand-soft); --ref-toggle-knob:#FFFFFF; --ref-progress-start:color-mix(in srgb,var(--ref-gradient-mint) 48%,#000); --ref-progress-middle:color-mix(in srgb,var(--ref-gradient-green) 48%,#000); --ref-progress-end:color-mix(in srgb,var(--ref-gradient-lime) 48%,#000); }
html[data-reference-system="true"][data-theme="dark"] { --ref-toggle-edge:var(--ref-brand-soft); --ref-toggle-knob:var(--success-bg); --ref-progress-start:var(--ref-gradient-mint); --ref-progress-middle:var(--ref-gradient-green); --ref-progress-end:var(--ref-gradient-lime); }
html[data-reference-system="true"][data-theme] { --ref-progress-gradient:linear-gradient(100deg,var(--ref-progress-start),var(--ref-progress-middle) 55%,var(--ref-progress-end)); }
/* Shared primary hover: lighter in dark mode, darker in light mode. */
html[data-reference-system="true"][data-theme="light"] { --rx-primary-hover:#111315; }
html[data-reference-system="true"][data-theme="dark"] { --rx-primary:#DEDEDE; --rx-primary-hover:#F7F7F7; }
/* Overskill Reference Lab snapshot, 2026-09-25. Source: _editor_styles.html.erb.
 * CSS only; source application controllers and behavior remain authoritative. */
/* Visual overrides only. Shared across the local development platform layouts; no duplicate markup or replacement controllers. */
html[data-reference-system="true"][data-theme] {
 --font-body:"Geist",system-ui,sans-serif; --font-display:var(--font-body);
 --font-mono:"JetBrains Mono",monospace;
 --hover-bg:var(--rx-surface-hover); --hover-bg-strong:var(--rx-hover);
 --card-bg:var(--bg-2); --code-bg:var(--bg-1); --rail-bg:var(--bg-1);
 --shadow-sm:var(--rx-panel-shadow); --shadow:var(--rx-floating-shadow);
 --shadow-md:var(--rx-floating-shadow); --shadow-lg:var(--rx-floating-shadow);
 --composer-shadow:0 2px 8px #00000008;
 --composer-focus-shadow:var(--field-ring);
 --radius-sm:8px; --radius-md:12px; --radius-lg:20px;
 /* No --ed-* here: this selector IS the root element, where theme.css already
    declares --ed-canvas: var(--bg), --ed-text-primary: var(--fg),
    --ed-text-secondary: var(--fg-2) and --ed-border: var(--line) — with the
    literal fallbacks this copy dropped. --ed-surface has no readers. */
}
html[data-reference-system="true"] body { font-family:var(--font-body); }
html[data-reference-system="true"] :is(h1,h2,h3,h4,h5,h6) { font-family:var(--font-body); letter-spacing:-.02em; }
/* Component links own their hover ink; a global anchor override breaks filled buttons. */
html[data-reference-system="true"] a:not([class]):hover { color:var(--fg); }
/* Auth navigation links need a non-color hover cue on the neutral palette. */
html[data-reference-system="true"][data-theme] :is(.auth-swap,.auth-alt-link,.auth-foot) a {
 text-decoration:underline; text-decoration-color:transparent;
 text-decoration-thickness:1px; text-underline-offset:4px;
 transition:color 140ms ease,text-decoration-color 140ms ease;
}
html[data-reference-system="true"][data-theme] :is(.auth-swap,.auth-alt-link,.auth-foot) a:hover {
 color:var(--fg); text-decoration-line:underline; text-decoration-color:currentColor;
}
html[data-reference-system="true"][data-theme] :is(.auth-swap,.auth-alt-link,.auth-foot) a:focus-visible {
 outline:2px solid var(--ref-focus); outline-offset:4px; border-radius:2px;
 text-decoration-color:currentColor;
}
@media (prefers-reduced-motion:reduce) {
 html[data-reference-system="true"][data-theme] :is(.auth-swap,.auth-alt-link,.auth-foot) a { transition:none; }
}

/* Keep the auth checkbox and label centered even when its check glyph is hidden.
   The generic form label rule otherwise changes this row to a block baseline. */
html[data-reference-system="true"][data-theme] .auth-card .form label.auth-check-label { display:flex; align-items:center; gap:9px; }

/* Single-message auth notices inherit a heading bottom margin from the form.
   Let the alert's symmetric padding provide all of its vertical spacing. */
html[data-reference-system="true"][data-theme] .auth-card :is([class*="bg-red"],[class*="bg-green"]) > h3:only-child { margin-block:0; }
html[data-reference-system="true"][data-theme] .auth-card .form > :is([class*="bg-red"],[class*="bg-green"]) { padding:10px 14px; }
/* The source form has a -20px top margin; retain it for field rhythm while
   giving a leading notice a full 24px gap below the header. */
html[data-reference-system="true"][data-theme] .auth-card:has(.form > :is([class*="bg-red"],[class*="bg-green"])) .auth-head { margin-bottom:44px; }


html[data-reference-system="true"] .composer { background:var(--rx-composer,var(--bg-2)); border-color:var(--line-2); border-radius:20px; }
html[data-reference-system="true"] .composer:has(textarea:focus) { border-color:var(--field-border-focus); box-shadow:var(--composer-focus-shadow); }
html[data-reference-system="true"] .composer textarea { background:transparent!important; border:0!important; outline:0!important; box-shadow:none!important; font-weight:400; }
html[data-reference-system="true"] :is(.composer-tool,.tb-iconbtn) { border-radius:8px; }
html[data-reference-system="true"] .composer-tool-pill { padding-inline:10px; gap:8px; }
html[data-reference-system="true"] .composer-tool-chevron { margin-left:4px; flex-shrink:0; }
/* Carry the Reference Lab selected pill treatment into real app switchers. */
html[data-reference-system="true"][data-theme] .seg { padding:4px; }
html[data-reference-system="true"][data-theme] .seg-thumb { top:4px; bottom:4px; background:var(--ref-segment-selected); box-shadow:0 0 0 1px var(--line); }
html[data-reference-system="true"][data-theme] .seg-btn:is([aria-selected="true"],[aria-checked="true"]) { color:var(--success-fg); }
/* History/Bookmarks uses its own controller but the shared selected surface. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .vh-tabs .pm-seg-opt:is(.active,[aria-selected="true"]) {
 background:var(--ref-segment-selected); color:var(--ref-selection-ink); box-shadow:0 0 0 1px var(--line);
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .vh-tabs .pm-seg-opt:focus-visible {
 outline:2px solid var(--focus-ring-color); outline-offset:2px;
}

html[data-reference-system="true"] .send { background:var(--rx-send); color:var(--rx-send-ink); box-shadow:none; }
html[data-reference-system="true"] .send svg { color:var(--rx-send-ink); }
html[data-reference-system="true"] .send:hover { background:var(--rx-primary-hover); transform:none; }
html[data-reference-system="true"] :is(.composer-popover,.ed-flyout) { background:var(--rx-overlay); border:1px solid var(--rx-overlay-border); border-radius:14px; box-shadow:var(--rx-floating-shadow); padding:6px; }
/* Autocomplete follows its parent composer; inset surfaces subtract the
   popover's 6px padding and 1px border. Mobile keeps its inline chip strip. */
@media (min-width:769px) {
 html:is([data-reference-system="true"],.reference-root,.reference-editor)[data-theme] .composer > .composer-autocomplete { border-radius:inherit; }
 html:is([data-reference-system="true"],.reference-root,.reference-editor)[data-theme] .composer-autocomplete > :is(div:first-child,button) { border-radius:calc(var(--radius-lg) - 7px); }
 html:is([data-reference-system="true"],.reference-root,.reference-editor)[data-theme] .composer-autocomplete > button { border-bottom-color:transparent!important; }
}
html[data-reference-system="true"] .composer-menu-head { background:transparent; border-bottom:0; font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:12px; color:var(--fg-2); padding:8px 10px; }
html[data-reference-system="true"] .composer-menu-item { border-radius:8px; }
html[data-reference-system="true"] .composer-menu-item:hover { background:var(--rx-overlay-hover); }
html[data-reference-system="true"] .editor-topbar :is(.proj-switch,.tb-btn,.tb-tab) { border-radius:8px; }
/* Keep app context visible at rest; the open menu retains the quiet hover fill. */
html[data-reference-system="true"][data-theme] .editor-topbar .proj-switch[data-app-navigation-target="trigger"] {
 background:var(--rx-panel); border-color:var(--line);
}
html[data-reference-system="true"][data-theme] .editor-topbar .proj-switch[data-app-navigation-target="trigger"]:is(:hover,[aria-expanded="true"]) {
 background:color-mix(in srgb,var(--rx-panel) 96%,var(--fg)); border-color:var(--line-2);
}
/* Match the 36px credit trigger and view switcher. Minimum dimensions also
   cover the Invite control's legacy inline 28px size without changing its behavior. */
html[data-reference-system="true"][data-theme] .editor-topbar-right :is(.tb-iconbtn,.theme-switcher-trigger) {
 width:36px; height:36px; min-width:36px; min-height:36px; flex-shrink:0; border-radius:8px;
}
html[data-reference-system="true"][data-theme] .editor-topbar-right .tb-btn {
 height:36px; min-height:36px; padding-block:0; border-radius:8px;
}
html[data-reference-system="true"][data-theme] .editor-topbar-right .tb-group:has([data-preview-device-target]) {
 height:36px; box-sizing:border-box; padding:3px; gap:2px; border-radius:8px;
}
html[data-reference-system="true"][data-theme] .editor-topbar-right .tb-icon[data-preview-device-target] {
 width:28px; height:28px; border-radius:4px;
}
/* Keep the primary fill over its 1px edge on hover. The generic toolbar
   hover border otherwise makes Publish look smaller without changing its box. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .editor-topbar .tb-btn.is-primary {
 border-color:transparent; background-clip:border-box;
}
/* Match the gapless chat/preview row. Width changes are immediate in the
   reference editor, so the header must not animate behind the resize handle. */
html[data-reference-system="true"][data-theme] [data-editor-layout-chat-open="true"] .editor-topbar { display:flex; flex-wrap:wrap; column-gap:0; row-gap:8px; height:auto; min-height:60px; }
html[data-reference-system="true"][data-theme] [data-editor-layout-chat-open="true"] .editor-topbar-left { flex-shrink:0; }
html[data-reference-system="true"][data-theme] [data-editor-layout-chat-open="true"] .editor-topbar-center { flex:1 0 max-content; }
/* A wide chat plus expanded Apps rail can leave too little room for actions.
   Let that cluster use a second row instead of moving/overlapping the tabs. */
html[data-reference-system="true"][data-theme] [data-editor-layout-chat-open="true"] .editor-topbar-right { flex:0 0 auto; margin-left:auto; padding-left:10px; }
html[data-reference-system="true"][data-theme] .editor-topbar-left-content { flex-shrink:0; transition:opacity 220ms ease-out; }
html[data-reference-system="true"] :is(.ed-flyout-item,.composer-tool):focus-visible { outline:2px solid var(--fg-4); outline-offset:2px; }
html[data-reference-system="true"] .composer-menu-foot { background:transparent; border-top:1px solid var(--line); }
/* Actual editor components, including its legacy-named composer controls. */
html[data-reference-system="true"][data-theme] .chat-composer-card { --editor-composer-radius:20px; background:var(--rx-composer,var(--bg-2)); border:1px solid var(--line-2); border-radius:var(--editor-composer-radius); box-shadow:var(--composer-shadow); }
html[data-reference-system="true"][data-theme] .chat-composer-card:has(textarea:focus) { border-color:var(--field-border-focus); box-shadow:var(--composer-focus-shadow); }
html[data-reference-system="true"][data-theme] .chat-composer-card textarea { background:transparent!important; color:var(--fg); border:0!important; outline:0!important; box-shadow:none!important; padding:16px 16px 8px; font:400 15px/1.6 var(--font-body); }
/* Target the trigger only: the menu radiogroup has the same accessible name. */
html[data-reference-system="true"][data-theme] .chat-composer-card [data-thinking-effort-target="button"] { background:transparent; border-color:transparent; color:var(--fg-2); padding:6px 10px; font-weight:500; }
html[data-reference-system="true"][data-theme] .chat-composer-card [data-thinking-effort-target="button"]:hover { background:var(--hover-bg); color:var(--fg); }
/* Proportional corner: 60% of the composer radius (20px → 12px).
   Softer than a strict inset subtraction; the 13px edge spacing stays even.
   Disabled controls keep the same rounded-square shape with a neutral fill. */
html[data-reference-system="true"][data-theme] .editor-send-btn { border-radius:calc(var(--editor-composer-radius,20px) * .6); }
html[data-reference-system="true"][data-theme] .editor-send-btn:not(:disabled) { background:var(--brand); color:#102016; }
html[data-reference-system="true"][data-theme] .editor-send-btn:not(:disabled) .editor-send-btn--glyph { color:inherit; }
html[data-reference-system="true"][data-theme] .editor-send-btn:hover:not(:disabled) { background:var(--ref-brand-alt); }
html[data-reference-system="true"][data-theme] .think-menu[data-thinking-effort-target] { background:var(--rx-overlay); border-color:var(--rx-overlay-border); border-radius:14px; padding:6px; box-shadow:var(--rx-floating-shadow); }
html[data-reference-system="true"][data-theme] .think-menu .think-menu__head { background:transparent; border-bottom:0; padding:8px 10px; }
html[data-reference-system="true"][data-theme] .think-menu .think-menu__opt { padding:10px; border-radius:8px; }
html[data-reference-system="true"][data-theme] .think-menu .think-menu__opt:hover { background:var(--rx-overlay-hover); }
html[data-reference-system="true"][data-theme] .message-content .rounded-br-none { background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
html[data-reference-system="true"][data-theme] [data-testid="chat-message-user"] [data-expandable-text-target="content"] > :first-child { margin-top:0; }
html[data-reference-system="true"][data-theme] [data-testid="chat-message-user"] [data-expandable-text-target="content"] > :last-child { margin-bottom:0; }
html[data-reference-system="true"][data-theme] .dash-card { background:var(--bg-2); border-color:var(--line); border-radius:14px; }
@media(max-width:1023px) { html[data-reference-system="true"][data-theme] .chat-composer-card textarea { font-size:16px; } }
/* Retain the native options and selection semantics; let descriptions wrap. */
html[data-reference-system="true"][data-theme] .think-menu { width:288px; max-width:calc(100vw - 32px); }
html[data-reference-system="true"][data-theme] .think-menu .think-menu__head { text-transform:none; letter-spacing:0; font:500 12px/1.4 var(--font-body); color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .think-menu .think-menu__head span { font:inherit; letter-spacing:0; text-transform:none; }
html[data-reference-system="true"][data-theme] .think-menu .think-menu__opt p,
html[data-reference-system="true"][data-theme] .composer-menu-desc { display:block; -webkit-line-clamp:unset; white-space:normal; overflow:visible; line-height:1.5; }
html[data-reference-system="true"][data-theme] .think-menu .think-menu__opt[aria-checked="true"] { background:var(--rx-overlay-selected); box-shadow:none; }
html[data-reference-system="true"][data-theme] .think-menu .think-menu__opt[aria-checked="true"]:hover { background:var(--rx-overlay-selected-hover); }
html[data-reference-system="true"][data-theme] .editor-topbar .tab-btn.is-active svg { color:var(--ref-brand-detail); }
html[data-reference-system="true"][data-theme] .composer-menu-check { background:var(--ref-brand-detail); color:var(--bg); }
@keyframes reference-menu-enter { from { opacity:0; translate:0 3px; } to { opacity:1; translate:0 0; } }
@media(prefers-reduced-motion:no-preference) {
 html[data-reference-system="true"][data-theme] :is(.think-menu,.composer-popover):not(.hidden):not([hidden]),
 html[data-reference-system="true"][data-theme] .nav-user-menu:not(.hidden),
 html[data-reference-system="true"][data-theme] .ed-flyout-host:hover .ed-flyout,
 html[data-reference-system="true"][data-theme] .ed-flyout-host:focus-within .ed-flyout,
 html[data-reference-system="true"][data-theme] [popover]:popover-open {
   animation:reference-menu-enter 160ms cubic-bezier(.2,.8,.2,1);
 }
 html[data-reference-system="true"][data-theme] :is(.think-menu__opt,.composer-menu-item,.tab-btn,.tb-iconbtn,.dash-btn,.composer-tool) { transition:background-color 140ms ease,color 140ms ease,box-shadow 160ms ease; }
}
@media(prefers-reduced-motion:reduce) {
 html[data-reference-system="true"][data-theme] :is(.think-menu,.composer-popover,.ed-flyout,.nav-user-menu,[popover],.think-menu__opt,.composer-menu-item,.tab-btn,.tb-iconbtn,.dash-btn,.composer-tool) { animation:none!important; transition:none!important; }
}
/* Progressive enhancement of the actual native select, not a replacement widget. */
@supports(appearance:base-select) {
 html[data-reference-system="true"][data-theme] select:not([multiple]):not([size]),
 html[data-reference-system="true"][data-theme] select:not([multiple]):not([size])::picker(select) { appearance:base-select; }
 html[data-reference-system="true"][data-theme] select:not([multiple]):not([size]) { display:flex; align-items:center; justify-content:space-between; background:var(--rx-field); background-image:none; color:var(--fg); border:1px solid var(--rx-field-border); border-radius:10px; padding:10px 12px; }
 html[data-reference-system="true"][data-theme] select:not([multiple]):not([size])::picker(select) { padding:6px; border:1px solid var(--rx-overlay-border); border-radius:12px; background:var(--rx-overlay); color:var(--fg); box-shadow:var(--rx-floating-shadow); max-height:320px; overflow:auto; }
 html[data-reference-system="true"][data-theme] select:not([multiple]):not([size])::picker-icon { margin-left:auto; padding-left:12px; color:var(--fg-2); }
 html[data-reference-system="true"][data-theme] select:not([multiple]):not([size]) option { padding:9px 12px; border-radius:7px; background:transparent; color:var(--fg); }
 html[data-reference-system="true"][data-theme] select:not([multiple]):not([size]) option:is(:hover,:focus) { background:var(--rx-overlay-hover); }
 html[data-reference-system="true"][data-theme] select:not([multiple]):not([size]) option:checked { background:var(--rx-overlay-selected); }
 html[data-reference-system="true"][data-theme] select:not([multiple]):not([size]) option::checkmark { color:var(--ref-brand-detail); }
 @media(prefers-reduced-motion:no-preference) {
  html[data-reference-system="true"][data-theme] select::picker(select) { animation:reference-menu-enter 160ms cubic-bezier(.2,.8,.2,1); }
 }
 @media(prefers-reduced-motion:reduce) {
  html[data-reference-system="true"][data-theme] select::picker(select) { animation:none!important; }
 }
}
html[data-reference-system="true"][data-theme] .dash-search:has(.dash-search-input:focus) { border-color:var(--field-border-focus); box-shadow:var(--field-ring); }
/* Brand focus on source fields and both reference search controls.
   Keep error and read-only states distinct; the composer owns its outer ring. */
html[data-reference-system="true"][data-theme] :where(.input,.textarea,.select,.search-input,.combo,.ds-bt-input,.pf-field input,.auth-card input:is([type="text"],[type="email"],[type="password"]),.auth-code-input,#reference-search,[data-rc-source-query]):focus {
 outline:none;
}
html[data-reference-system="true"][data-theme] :where(.input,.textarea,.select,.search-input,.combo,.ds-bt-input,.pf-field input,.auth-card input:is([type="text"],[type="email"],[type="password"]),.auth-code-input,#reference-search,[data-rc-source-query]):focus:not([aria-invalid="true"]):not([readonly]):not(:disabled) {
 border-color:var(--field-border-focus)!important;
 box-shadow:var(--field-ring)!important;
 outline:none!important;
}
html[data-reference-system="true"][data-theme] :is(.input,.textarea,.select,.search-input):focus:not([aria-invalid="true"]):not([readonly]):not(:disabled) {
 background-color:var(--rx-field)!important;
}
html[data-reference-system="true"][data-theme] :is(.input,.textarea)[readonly]:focus {
 --field-border-focus:var(--fg-4);
 --field-ring:0 0 0 3px color-mix(in srgb,var(--fg) 12%,transparent);
}
html[data-reference-system="true"][data-theme] :is(.ed-flyout-item,.composer-tool,.tb-iconbtn):focus-visible {
 outline:2px solid var(--ref-focus); outline-offset:2px;
}
@media(prefers-reduced-motion:no-preference) {
 html[data-reference-system="true"][data-theme] :where(.input,.textarea,.select,.search-input,.combo,.ds-bt-input,.pf-field input,.auth-card input:is([type="text"],[type="email"],[type="password"]),.auth-code-input,#reference-search,[data-rc-source-query],.composer,.chat-composer-card) {
  transition:border-color 150ms ease,box-shadow 150ms ease,background-color 150ms ease;
 }
}
@media(prefers-reduced-motion:reduce) {
 html[data-reference-system="true"][data-theme] :where(.input,.textarea,.select,.search-input,.combo,.ds-bt-input,.pf-field input,.auth-card input:is([type="text"],[type="email"],[type="password"]),.auth-code-input,#reference-search,[data-rc-source-query],.composer,.chat-composer-card) { transition:none!important; }
}
/* Shared loading/progress treatment. Width and timing remain controller-owned. */
html[data-reference-system="true"][data-theme] :is(.turbo-progress-bar,.ds-progress-fill,.pf-sync-fill,.pb-progress-fill):not(.is-done):not(.is-error) {
 background-image:var(--ref-progress-gradient); background-color:var(--success-fg);
}
html[data-reference-system="true"][data-theme] :is(.ds-progress-fill,.pf-sync-fill,.pb-progress-fill):is(.is-done,.is-error) { background-image:none; }
html[data-reference-system="true"][data-theme] progress { accent-color:var(--success-fg); }
html[data-reference-system="true"][data-theme] progress::-webkit-progress-bar { background:var(--bg-3); }
html[data-reference-system="true"][data-theme] progress::-webkit-progress-value { background:var(--ref-progress-gradient); }
html[data-reference-system="true"][data-theme] progress::-moz-progress-bar { background:var(--ref-progress-gradient); }
/* Everyday labels use Geist; monospace is reserved for technical content. */
html[data-reference-system="true"][data-theme] :is(.chip,.link-chip,.prompt-chip,.status-pill,.text-eyebrow,.eyebrow) {
 font-family:var(--font-body); letter-spacing:normal;
}
/* Quiet callouts: unboxed inline notes with small semantic icons. */
html[data-reference-system="true"][data-theme] .ds-callout {
 --callout-accent:var(--fg-2); display:flex; align-items:flex-start; gap:10px;
 padding:6px 0; margin:6px 0; border:0; border-radius:0;
 background:transparent; font-family:var(--font-body); box-shadow:none;
}
html[data-reference-system="true"][data-theme] .ds-callout-warning { --callout-accent:var(--warning-fg); background:transparent; }
html[data-reference-system="true"][data-theme] .ds-callout-danger { --callout-accent:var(--danger-fg); background:transparent; }
html[data-reference-system="true"][data-theme] .ds-callout-icon {
 display:flex; align-items:center; justify-content:center; flex:0 0 16px; height:20px; margin:0;
 color:var(--callout-accent); background:none;
}
html[data-reference-system="true"][data-theme] .ds-callout-icon svg { width:16px; height:16px; }
html[data-reference-system="true"][data-theme] .ds-callout-body { min-width:0; padding-top:0; color:var(--fg-2); font:400 13px/1.5 var(--font-body); }
html[data-reference-system="true"][data-theme] .ds-callout-body p { margin:0 0 3px; font:inherit; color:inherit; }
html[data-reference-system="true"][data-theme] .ds-callout-body p:last-child { margin-bottom:0; }
html[data-reference-system="true"][data-theme] .ds-callout-body strong { color:var(--fg); font-weight:600; }
html[data-reference-system="true"][data-theme] .ds-callout-body a { color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
/* Short title + paragraph reads as a single inline note; rich bodies keep blocks. */
html[data-reference-system="true"][data-theme] .ds-callout-body:has(> p:first-child > strong:only-child):has(> p:nth-child(2):last-child) > p { display:inline; margin:0; }
html[data-reference-system="true"][data-theme] .ds-callout-body:has(> p:nth-child(2):last-child) > p:first-child > strong:only-child { margin-right:.4em; }
/* Modal hierarchy through spacing on one continuous surface. */
html[data-reference-system="true"][data-theme] dialog.modal { background:var(--rx-raised); border-color:var(--line); border-radius:16px; box-shadow:var(--rx-floating-shadow); }
html[data-reference-system="true"][data-theme] .modal-head { padding:20px 20px 0; gap:16px; align-items:center; border-bottom:0; }
html[data-reference-system="true"][data-theme] .modal-title { margin:0; font:600 17px/1.4 var(--font-body); letter-spacing:-.015em; }
html[data-reference-system="true"][data-theme] .modal-head .icon-btn { flex:0 0 28px; width:28px; height:28px; border-radius:8px; color:var(--fg-3); }
html[data-reference-system="true"][data-theme] .modal-head .icon-btn svg { width:16px; height:16px; }
html[data-reference-system="true"][data-theme] .modal-head .icon-btn:focus-visible { outline:2px solid var(--ref-focus); outline-offset:2px; }
html[data-reference-system="true"][data-theme] .modal-body { padding:12px 20px 20px; color:var(--fg-2); font:400 14px/1.55 var(--font-body); }
html[data-reference-system="true"][data-theme] .modal-body p { margin:0 0 12px; font:inherit; color:inherit; }
html[data-reference-system="true"][data-theme] .modal-body > :last-child { margin-bottom:0; }
html[data-reference-system="true"][data-theme] .modal-body strong { color:var(--fg); font-weight:600; }
html[data-reference-system="true"][data-theme] .modal-body ul { list-style:disc; padding-left:20px; }
html[data-reference-system="true"][data-theme] .modal-body li + li { margin-top:6px; }
html[data-reference-system="true"][data-theme] .modal-body li::marker { color:var(--fg-4); }
html[data-reference-system="true"][data-theme] .modal-foot { margin:0; padding:0 20px 20px; gap:8px; border-top:0; background:transparent; }
html[data-reference-system="true"][data-theme] .modal-foot .btn { min-height:36px; padding:8px 14px; font-size:13px; }
@media(max-width:480px) { html[data-reference-system="true"][data-theme] .modal-foot { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { html[data-reference-system="true"][data-theme] dialog.modal,html[data-reference-system="true"][data-theme] dialog.modal::backdrop { animation:none; } }
/* Transient notes float above the UI; severity stays in the small icon. */
html[data-reference-system="true"][data-theme] .toast {
 background:var(--rx-raised); border:1px solid var(--line); border-radius:12px;
 padding:12px; gap:10px; color:var(--fg); box-sizing:border-box;
 box-shadow:0 2px 4px #00000006,0 8px 24px #0000000d;
}
html[data-reference-system="true"][data-theme="dark"] .toast { box-shadow:0 2px 4px #00000026,0 8px 24px #00000033; }
html[data-reference-system="true"][data-theme] .toast--info { --toast-accent:var(--fg-2); }
html[data-reference-system="true"][data-theme] .toast-icon { width:16px; height:16px; margin-top:2px; }
html[data-reference-system="true"][data-theme] .toast-icon svg { width:16px; height:16px; }
html[data-reference-system="true"][data-theme] .toast-title { margin:0; font:500 13px/1.5 var(--font-body); color:var(--fg); }
html[data-reference-system="true"][data-theme] .toast-msg { margin:3px 0 0; font:400 13px/1.5 var(--font-body); color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .toast-action { margin-top:6px; color:var(--fg); font-size:13px; font-weight:500; }
html[data-reference-system="true"][data-theme] .toast-close { margin:-2px -2px 0 0; color:var(--fg-2); border-radius:6px; }
html[data-reference-system="true"][data-theme] .toast-close:hover { color:var(--fg); background:var(--hover-bg); }
html[data-reference-system="true"][data-theme] .toast-close:focus-visible { outline:2px solid var(--ref-focus); outline-offset:2px; }
/* Credit actions: one restrained brand accent, distinct from utility links. */
html[data-reference-system="true"][data-theme] .credits-pop { background:var(--rx-raised); box-shadow:var(--rx-floating-shadow); }
html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link) {
 min-height:32px; padding:6px 8px; box-sizing:border-box; border-radius:7px;
 gap:6px; text-decoration:none; font:500 13px/1.4 var(--font-body);
 transition:background-color 140ms ease,color 140ms ease;
}
html[data-reference-system="true"][data-theme] .credits-pop .cp-plan-upgrade {
 color:var(--credit-action); background:var(--credit-action-bg);
}
html[data-reference-system="true"][data-theme] .credits-pop .cp-plan-upgrade:hover {
 color:var(--credit-action); background:var(--credit-action-hover);
}
html[data-reference-system="true"][data-theme] .credits-pop .cp-link { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .credits-pop .cp-link-topup { color:var(--credit-action); }
html[data-reference-system="true"][data-theme] .credits-pop .cp-link:hover { color:var(--fg); background:var(--hover-bg); }
html[data-reference-system="true"][data-theme] .credits-pop .cp-link-topup:hover { color:var(--credit-action); background:var(--credit-link-hover); }
html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link):focus-visible { outline:2px solid var(--ref-focus); outline-offset:2px; }
html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link):active { background:var(--rx-hover); }
html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link) svg { transition:transform 140ms ease; }
html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link):is(:hover,:focus-visible) svg { transform:translateX(2px); }
html[data-reference-system="true"][data-theme] .credits-pop .cp-tip { border-radius:4px; }
html[data-reference-system="true"][data-theme] .credits-pop .cp-tip:hover { color:var(--fg); background:var(--hover-bg); }
html[data-reference-system="true"][data-theme] .credits-pop .cp-tip:focus-visible { outline:2px solid var(--ref-focus); outline-offset:3px; }
@media(prefers-reduced-motion:reduce) {
 html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link),
 html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link) svg { transition:none; }
 html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link):is(:hover,:focus-visible) svg { transform:none; }
}
/* Reuse the featured-action chevron-to-arrow gesture on credit links. */
html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link) svg {
 color:inherit; stroke:currentColor; transform:none; width:14px; height:14px;
}
html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link):is(:hover,:focus-visible) svg { color:inherit; transform:none; }
html[data-reference-system="true"][data-theme] .credits-pop .cp-arrow-stem {
 display:block; transform-box:view-box; transform-origin:17px 12px;
 transform:scaleX(0); opacity:0; transition:transform 200ms cubic-bezier(.2,.8,.2,1),opacity 150ms ease;
}
html[data-reference-system="true"][data-theme] .credits-pop .cp-arrow-head { transition:transform 200ms cubic-bezier(.2,.8,.2,1); }
html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link):is(:hover,:focus-visible) .cp-arrow-head { transform:translateX(2px); }
html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-plan-upgrade,.cp-link):is(:hover,:focus-visible) .cp-arrow-stem { transform:scaleX(1); opacity:1; }
@media(prefers-reduced-motion:reduce) {
 html[data-reference-system="true"][data-theme] .credits-pop :is(.cp-arrow-stem,.cp-arrow-head) { transition:none; }
}
/* Busy primary buttons retain the idle palette; legacy disabled CSS uses green. */
html[data-reference-system="true"][data-theme] .btn.btn-primary:is(:disabled,[aria-disabled="true"],.is-loading,[aria-busy="true"]) {
 background:var(--rx-primary)!important; border-color:transparent!important; color:var(--rx-primary-ink)!important;
}
html[data-reference-system="true"][data-theme] .btn:is(.is-loading,[aria-busy="true"]) { opacity:1; cursor:progress; }
html[data-reference-system="true"][data-theme] .btn:is(.is-loading,[aria-busy="true"]) :is(.btn-label,.btn-spinner) { color:inherit!important; }
/* Shared source composer: align the existing submit in the bottom action row. */
html[data-reference-system="true"][data-theme] form.composer:has(> .composer-rail) { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:16px; gap:12px; }
html[data-reference-system="true"][data-theme] form.composer:has(> .composer-rail) > .composer-input-wrap { display:contents; }
html[data-reference-system="true"][data-theme] form.composer:has(> .composer-rail) .composer-input { grid-column:1 / -1; grid-row:1; padding:0; }
html[data-reference-system="true"][data-theme] form.composer:has(> .composer-rail) .composer-submit { position:static; grid-column:2; grid-row:2; background:var(--rx-send); color:var(--rx-send-ink); }
html[data-reference-system="true"][data-theme] form.composer:has(> .composer-rail) .composer-submit svg { color:inherit; }
html[data-reference-system="true"][data-theme] form.composer:has(> .composer-rail) > .composer-rail { grid-column:1; grid-row:2; padding:0; min-width:0; gap:8px; flex-wrap:wrap; }
html[data-reference-system="true"][data-theme] form.composer:has(> .composer-rail) .composer-rail-meta { font:400 11px/1.4 var(--font-body); letter-spacing:normal; }
@media(max-width:480px) { html[data-reference-system="true"][data-theme] form.composer:has(> .composer-rail) { padding:12px; } }
html[data-reference-system="true"][data-theme] .composer .composer-submit { background:var(--rx-send); color:var(--rx-send-ink); }
html[data-reference-system="true"][data-theme] .composer .composer-submit svg { color:inherit; }
html[data-reference-system="true"][data-theme] .composer .composer-submit:disabled { opacity:.4; }
/* Hover never raises controls or cards. Keep feedback in paint, not position. */
html[data-reference-system="true"][data-theme] :is(
 .interactive-hover,.inspiration-card,.card-base-hover,.authentication-card,
 .authentication-submit,.authentication-oauth-button,.auth-btn-primary,
 .auth-card input[type="submit"],.auth-card button[type="submit"],.auth-card .button.full,
 .card-hoverable,.send,.dash-app-card,.dash-new-app-card,.nav-avatar,.tmpl-card,
 .ti-show-primary-cta,.ti-show-related-card,.tier.featured .tier-cta,.ent-cta,
 .help-category-card,.deploy-cta,.fnl-card,.psp-why-card,.integ-card
):hover { transform:none!important; translate:none!important; }

/* Device preview uses a neutral selected surface and gray active icon.
   Hover changes ink only, never its surface. */
html[data-reference-system="true"][data-theme] .editor-topbar .tb-group:has([data-preview-device-target]) {
 background:var(--bg-2);
}
html[data-reference-system="true"][data-theme] .editor-topbar .tb-icon[data-preview-device-target] {
 background:transparent!important; color:var(--fg-3)!important;
 box-shadow:none; transition:color 140ms ease;
}
html[data-reference-system="true"][data-theme] .editor-topbar .tb-icon[data-preview-device-target]:hover {
 color:var(--fg)!important;
}
html[data-reference-system="true"][data-theme] .editor-topbar .tb-icon[data-preview-device-target].is-active {
 background:var(--ref-segment-selected)!important; color:var(--fg-2)!important;
 box-shadow:0 0 0 1px var(--line);
}
html[data-reference-system="true"][data-theme] .editor-topbar .tb-icon[data-preview-device-target]:focus-visible {
 outline:2px solid var(--ref-brand-detail); outline-offset:2px;
}
@media(prefers-reduced-motion:reduce) {
 html[data-reference-system="true"][data-theme] .editor-topbar .tb-icon[data-preview-device-target] { transition:none; }
}

/* Connection notices reserve a row between the transcript and composer stack.
   They must never overlap typing, queued prompts or task controls. */
html:is([data-reference-system="true"],.reference-editor)[data-theme] [data-controller~="chat-sync"] > :is([data-chat-sync-target="reconnecting"],[data-chat-sync-target="slowRequest"]) {
 position:static; flex:0 0 auto; align-self:stretch; transform:none; width:auto;
 margin:0 12px 8px; padding:8px 2px; gap:8px; align-items:flex-start;
 border:0!important; border-radius:0; background:transparent!important; box-shadow:none;
 color:var(--fg-2)!important; font-size:13px; font-weight:400; line-height:20px;
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] [data-controller~="chat-sync"] > :is([data-chat-sync-target="reconnecting"],[data-chat-sync-target="slowRequest"]) > span[aria-hidden="true"] {
 flex:0 0 6px; width:6px; height:6px; margin-top:7px; background:var(--warning-fg)!important;
}
/* The waiting notice is a quiet card in the same flow as task and queue cards. */
html:is([data-reference-system="true"],.reference-editor)[data-theme] [data-controller~="chat-sync"] > [data-chat-sync-target="slowRequest"] {
 padding:12px; gap:10px; border:1px solid var(--line)!important; border-radius:16px;
 background:var(--bg-2)!important; box-shadow:var(--rx-panel-shadow);
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] .generation-waiting-title { display:block; color:var(--fg); font-weight:500; }
html:is([data-reference-system="true"],.reference-editor)[data-theme] .generation-waiting-meta { justify-content:space-between; gap:8px 12px; margin-top:8px; }
html:is([data-reference-system="true"],.reference-editor)[data-theme] [data-chat-sync-target="lastProgress"] { color:var(--fg-3); opacity:1; font-variant-numeric:tabular-nums; }
html:is([data-reference-system="true"],.reference-editor)[data-theme] [data-chat-sync-target="statusResult"] {
 margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
 color:var(--fg-3); opacity:1; line-height:18px;
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] [data-chat-sync-target="statusResult"]:empty { display:none; }
html:is([data-reference-system="true"],.reference-editor)[data-theme] .generation-status-check {
 display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
 min-height:36px; padding:6px 10px; border:1px solid var(--line); border-radius:8px;
 background:var(--bg-3); color:var(--fg-2); text-decoration:none;
 cursor:pointer; font:500 12px/18px var(--font-body); text-align:center;
 transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease;
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] .generation-status-check:hover:not([aria-disabled="true"]) {
 background:color-mix(in srgb,var(--bg-3) 96%,var(--fg)); border-color:var(--line-2); color:var(--fg);
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] .generation-status-check:focus-visible { outline:2px solid var(--ref-brand-detail); outline-offset:2px; }
html:is([data-reference-system="true"],.reference-editor)[data-theme] .generation-status-check[aria-disabled="true"] { opacity:.55; cursor:wait; }
@media (max-width:1023px) {
 html:is([data-reference-system="true"],.reference-editor)[data-theme] .generation-status-check { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
 html:is([data-reference-system="true"],.reference-editor)[data-theme] .generation-status-check { transition:none; }
}
@media (forced-colors:active) {
 html:is([data-reference-system="true"],.reference-editor)[data-theme] [data-controller~="chat-sync"] > [data-chat-sync-target="slowRequest"] { border-color:CanvasText!important; background:Canvas!important; box-shadow:none; }
 html:is([data-reference-system="true"],.reference-editor)[data-theme] .generation-status-check { border-color:ButtonText; }
}
/* The local UI simulation can hold either notice for visual review. */
html:is([data-reference-system="true"],.reference-editor)[data-theme] [data-reference-connection-preview="slow"] > [data-chat-sync-target="slowRequest"],
html:is([data-reference-system="true"],.reference-editor)[data-theme] [data-reference-connection-preview="reconnecting"] > [data-chat-sync-target="reconnecting"] { display:flex!important; }
html:is([data-reference-system="true"],.reference-editor)[data-theme] [data-reference-connection-preview="slow"] > [data-chat-sync-target="reconnecting"],
html:is([data-reference-system="true"],.reference-editor)[data-theme] [data-reference-connection-preview="reconnecting"] > [data-chat-sync-target="slowRequest"] { display:none!important; }

/* Mobile navigation already reserves the measured fixed bottom-bar height.
   The task-progress controller's legacy padding would reserve it twice and
   push a wrapped notice out of short chat viewports. Keep the usual 48px
   transcript breathing room for its edge fade and scroll-to-bottom control. */
@media (max-width:1023px) {
 html:is([data-reference-system="true"],.reference-editor)[data-theme] #chat_panel [data-controller~="chat-sync"] > #chat_container { min-height:0; padding-bottom:48px!important; }
}

/* At laptop height the notice takes space from the scrollable transcript,
   keeping the task/queue/composer controls inside the viewport. */
@media (min-width:1024px) and (max-height:1000px) {
 html:is([data-reference-system="true"],.reference-editor)[data-theme] #chat_panel:has(#task_progress_container:not(.hidden)) [data-controller~="chat-sync"]:is(:has(> [data-chat-sync-target="slowRequest"]:not(.hidden)),:has(> [data-chat-sync-target="reconnecting"]:not(.hidden)),[data-reference-connection-preview="slow"],[data-reference-connection-preview="reconnecting"]) > #chat_container { min-height:0; }
}

/* ── Page navigator popover — menu-hover + menu-row rhythm ──────────────────
   Sanzone, 2026-09-29, dark editor: the row hover in the "PREVIEW AS · page
   list" dropdown goes DARKER than the popover, and the rows are cramped.

   (a) HOVER, measured. The popover paints --bg-2 (#1E1F21 dark) and a hovered
   row measured #18191A — --bg-1/--rx-chrome, one step DOWN. The row's own
   Tailwind `dark:hover:bg-[var(--hover-bg)]` (#2C2E31, correct) never applies:
   _legacy_bridge.css translates the legacy `.hover\:bg-gray-100` to
   var(--bg-1) at (0,4,2), out-specifying Tailwind's (0,3,0) dark variant. That
   blanket translation is right on the CANVAS, where --bg-1 IS a lift, and
   inverted inside a popover, whose own surface is already --bg-2.

   The Lab names the answer rather than leaving it to a hex: its semantic
   surfaces table annotates --hover-bg "Opaque neutral hover fill. Use the
   separate menu-hover token within popovers." That token is --rx-overlay-hover
   (#292B2E dark / #F4F4F4 light) — lighter than the popover on dark, darker on
   light, in one declaration — and it is already the shipped recipe for a
   refresh popover row (.composer-menu-item:hover, above). No !important: these
   selectors are (0,5,1) against the bridge's (0,4,2).

   (b) RHYTHM. Rows were 36px at 8px/12px with an 8px icon margin. The refresh's
   own menu rows are roomier (the model menu is min-height 44px, padding 10px,
   gap 12px; the account menu 36px/8px 12px/gap 10px). These take the middle:
   a 40px row at 10px/--space-3 with a real flex `gap`, which also replaces the
   icon's Tailwind mr-2 so icon↔label spacing is declared once. The PREVIEW AS
   header takes the same horizontal inset so the segmented control lines up
   with the rows underneath it instead of sitting 4px proud. */
html[data-reference-system="true"][data-theme] [data-page-selector-target="dropdown"] [data-page-selector-target="pageOption"] {
 min-height: 40px;
 padding: 10px var(--space-3);
 gap: 10px;
 border-radius: 8px;
}
html[data-reference-system="true"][data-theme] [data-page-selector-target="dropdown"] [data-page-selector-target="pageOption"]:hover {
 background-color: var(--rx-overlay-hover);
}
/* The gap owns icon↔label spacing now; the partial's Tailwind mr-2 would add a
   second, different one. Both icon variants are zeroed — v1 is display:none
   under [data-theme], but it must not reappear as a stray margin if that ever
   changes. */
html[data-reference-system="true"][data-theme] [data-page-selector-target="dropdown"] [data-page-selector-target="pageOption"] :is(.page-selector-icon-v1,.page-selector-icon-v2 svg) {
 margin-right: 0;
}
html[data-reference-system="true"][data-theme] [data-page-selector-target="dropdown"] .ps-preview-as {
 padding: 10px var(--space-3) 6px;
}
/* The header's wider inset costs the fill track 8px, and the track was ALREADY
   2px short: measured before any change here, "Logged out" clipped at
   scrollWidth 66 in a 64px box — the exact stub _editor_topbar.css's
   `overflow:visible` rule was added to prevent (Sanzone, 2026-07-24). The
   popover's min-w was sized for the three tabs when "End user" landed and has
   been a hair under since. Give it the room instead of tightening the control
   back up: 384px leaves the widest label whole with headroom, and this is the
   one place the popover's own width can move without touching the partial
   (flag-OFF keeps the 360px it ships today). */
html[data-reference-system="true"][data-theme] [data-page-selector-target="dropdown"]:has(.ps-preview-as) {
 min-width: 384px;
}

/* ── Editor chat suggestions — the card needs the RAISED surface here ───────
   Sanzone, 2026-09-29, prod dark editor: the suggestion cards "still render on
   the near-black BASE surface with a hairline border", not the Lab's card.

   DIAGNOSED FIRST, and it is neither of the two obvious answers. The selector
   does NOT miss and the token is NOT undefined: measured live, .suggest-card
   computes #1D1D1D / 1px #292B2F / 10px / 14px 16px — byte-for-byte the Lab
   specimen in _september_refinements.css. #7012 item 6 landed correctly.

   THE GROUND IS WHAT DIFFERS. The Lab's own semantic-surfaces table defines
   --ref-suggestion-bg as "Low-contrast card fill CLOSE TO ITS SURROUNDING
   SURFACE" and --ref-suggestion-hover as "a small tonal change with NO LIFT",
   and the Lab renders every swatch against --bg-2 (#1E1F21 dark), where
   #1D1D1D is exactly that deliberate, barely-there inset. The editor is the
   one host where the block does not sit on --bg-2: its chat column paints
   --rx-editor-canvas #151617. So a token tuned to be invisible against
   #1E1F21 lands 8 points above near-black with a hairline — which reads as
   the base surface, precisely as reported. The role is right; the ground it
   was tuned against is not the one it got.

   Note the token that LOOKS like the fix and is not: the Lab's "Card surface"
   role is --rx-panel, #1E1F21 dark — ONE point off the #1D1D1D already
   shipping. Adopting it would change nothing visible. The refresh's genuinely
   raised surface is --rx-raised (#242528 dark / #FFFFFF light), the same one
   dialog.modal and .credits-pop use.

   RE-POINT, don't restate: the two roles are rebound on the editor body so
   coverage.css's existing `background: var(--ref-suggestion-bg)` and its
   :hover twin resolve to the new values. No specificity fight, no !important,
   and every other host (the Lab specimen, /styleguide) keeps the low-contrast
   role it documents. Both replacements are theme-aware, so one declaration
   covers light and dark — and the hover had to move with the fill or it would
   invert: --ref-suggestion-hover #222222 is DARKER than a #242528 card.
   --hover-bg is the Lab's ordinary surface-hover role (the card is not a
   popover, so the menu-hover token is not the one here) and it lifts on dark
   (#2C2E31) while recessing on light (#F0F0F0).

   No shadow: --rx-floating-shadow belongs to panels that float over content
   (modal, credits popover). These are rows in a list. */
html[data-reference-system="true"][data-theme] [data-reference-editor="true"] {
 --ref-suggestion-bg: var(--rx-raised);
 --ref-suggestion-hover: var(--hover-bg);
}
/* Shared with the Reference Lab thinking slider. Controller lifecycle owns behavior. */
/* Specificity matches the editor layer; source choices remain controller targets only. */
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-slider[data-thinking-effort-target="menu"] {
 width:296px; max-width:calc(100vw - 32px); padding:14px 16px;
 border:1px solid var(--rx-overlay-border); border-radius:12px;
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-slider [role="radiogroup"] { display:none; }
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-slider :is(.think-menu__head,.composer-menu-head) { display:block; margin:0 0 8px; padding:0; border:0; background:transparent; color:var(--fg); font:600 13px/1.4 var(--font-body); text-transform:none; letter-spacing:0; }
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-slider .think-menu__head p { margin:0; color:inherit; font:inherit; text-transform:none; letter-spacing:0; }
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-current {
 display:block; min-height:0; margin:8px 0 0; text-align:left; color:var(--fg-2);
 font:400 12px/1.4 var(--font-body); letter-spacing:0;
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] input.ref-thinking-range {
 -webkit-appearance:none; appearance:none; display:block; box-sizing:border-box;
 width:100%; height:28px!important; min-height:0!important; margin:0; padding:0!important; border:0!important;
 border-radius:99px; box-shadow:none; outline:none; cursor:pointer;
 background:transparent!important;
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-range::-webkit-slider-runnable-track {
 height:5px; border-radius:99px;
 background:var(--thinking-gradient,var(--ref-progress-gradient)) left center / var(--thinking-fill) 100% no-repeat,var(--line-2);
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-range::-moz-range-track {
 height:5px; border-radius:99px;
 background:var(--thinking-gradient,var(--ref-progress-gradient)) left center / var(--thinking-fill) 100% no-repeat,var(--line-2);
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-range::-webkit-slider-thumb {
 -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-6.5px;
 border-radius:50%; background:#fff; border:1px solid #0001; box-shadow:0 1px 3px #0003;
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-range::-moz-range-thumb {
 width:18px; height:18px; border-radius:50%; background:#fff; border:1px solid #0001; box-shadow:0 1px 3px #0003;
}
html:is([data-reference-system="true"],.reference-editor)[data-theme] input.ref-thinking-range:focus-visible { outline:2px solid var(--ref-focus); outline-offset:5px; }
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-steps { display:flex; justify-content:space-between; gap:8px; margin-top:6px; pointer-events:none; }
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-steps span { color:var(--fg-3); font:400 12px/1.4 var(--font-body); }
html:is([data-reference-system="true"],.reference-editor)[data-theme] .ref-thinking-steps span[data-selected="true"] { color:var(--fg); font-weight:600; }
@media(max-width:640px) {
 html:is([data-reference-system="true"],.reference-editor)[data-theme] .composer-popover.ref-thinking-slider[data-thinking-effort-target="menu"] { width:auto; max-width:none; left:8px; right:8px; bottom:8px; padding:28px 18px 16px; }
}
/* Overskill Reference Lab snapshot, 2026-09-25. Source: _system_refinements.html.erb.
 * CSS only; source application controllers and behavior remain authoritative. */
/* Source-component refinement layer: source markup and controllers stay authoritative. */
html[data-reference-system="true"][data-theme] {
 --control-border:var(--line-2); --field-border:var(--line-2); --field-border-hover:var(--ref-hover-border);
 --opt-hover-bg:var(--rx-overlay-hover); --opt-selected-bg:var(--rx-overlay-selected); --opt-selected-hover-bg:var(--rx-overlay-selected-hover);
 --switch-track-off:var(--bg-3); --switch-knob:var(--fg-2);
 --hover-border:var(--ref-hover-border); --focus-ring:0 0 0 2px var(--ref-focus-halo);
 --ref-motion-fast:140ms; --ref-motion-menu:160ms;
}
html[data-reference-system="true"][data-theme] :is(.ddmenu,.composer-menu,.think-menu,.dropdown-menu) { background:var(--rx-overlay); border-color:var(--rx-overlay-border); box-shadow:var(--rx-floating-shadow); padding:6px; border-radius:12px; }
html[data-reference-system="true"][data-theme] :is(.ddopt,.composer-menu-item) { border-radius:7px; padding:9px 10px; }
html[data-reference-system="true"][data-theme] .ddopt[aria-selected="true"] .tick { color:var(--ref-selection-ink); }
html[data-reference-system="true"][data-theme] .ddgroup { font:500 11px/1.4 var(--font-body); letter-spacing:normal; text-transform:none; color:var(--fg-2); padding:8px 10px; }
html[data-reference-system="true"][data-theme] .combo { padding-right:12px; gap:12px; }
html[data-reference-system="true"][data-theme] .combo .chev { flex-shrink:0; margin-left:auto; }
html[data-reference-system="true"][data-theme] :is(.btn,.icon-btn,.seg-btn,.ds-tab,.card-hoverable,.prompt-chip,.chip,.link-chip,.cp-link,.rx-text-button):focus-visible { outline:2px solid var(--ref-focus); outline-offset:3px; }
html[data-reference-system="true"][data-theme] .card-hoverable:hover { transform:none; background:var(--rx-raised); border-color:var(--line-2); box-shadow:var(--rx-panel-shadow); }
html[data-reference-system="true"][data-theme] :is(.matrix-tile-tag,.feature-card-tag,.ddgroup,.status-pill,.cp-plan,.help-toc-title) { font-family:var(--font-body); letter-spacing:normal; }
html[data-reference-system="true"][data-theme] .status-pill:is(.status-pill--ok,.status-pill--warn,.status-pill--down) { background:var(--bg-2); border-color:var(--line); color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .status-pill--live .status-dot { animation:none; }
html[data-reference-system="true"][data-theme] .ds-tabs { gap:16px; overflow-x:auto; }
html[data-reference-system="true"][data-theme] .ds-tab { padding:10px 4px; white-space:nowrap; }
html[data-reference-system="true"][data-theme] .ds-tab:hover { background:var(--hover-bg); border-radius:6px 6px 0 0; }
html[data-reference-system="true"][data-theme] .ds-tab-count { background:var(--bg-3); color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .opt-card { padding:12px; gap:10px; border-radius:10px; background:var(--bg-2); border-color:var(--line); }
html[data-reference-system="true"][data-theme] .opt-card:has(input:checked) { background:var(--rx-raised); border-color:var(--ref-focus); box-shadow:var(--rx-panel-shadow); }
html[data-reference-system="true"][data-theme] .opt-card:has(input:focus-visible) { outline:2px solid var(--ref-focus); outline-offset:3px; }
html[data-reference-system="true"][data-theme] .opt-card:has(input:disabled) { opacity:.5; cursor:not-allowed; }
html[data-reference-system="true"][data-theme] .opt-card__title { font:500 14px/1.4 var(--font-body); color:var(--fg); }
html[data-reference-system="true"][data-theme] .opt-card__desc { margin-top:4px; font:400 13px/1.5 var(--font-body); color:var(--fg-2); }
/* A static gradient signals an enabled switch. The thumb position remains the
   primary state cue; checkbox/radio marks stay solid for small-size clarity. */
html[data-reference-system="true"][data-theme] .switch input:checked ~ .track,
html[data-reference-system="true"][data-theme] .toggle:checked { background:var(--ref-progress-gradient); border-color:var(--ref-toggle-edge); }
html[data-reference-system="true"][data-theme] .switch input:checked ~ .knob,
html[data-reference-system="true"][data-theme] .toggle:checked::after { background:var(--ref-toggle-knob); box-shadow:0 1px 2px #0003; }
html[data-reference-system="true"][data-theme] :is(.checkbox,.radio) { accent-color:var(--fg); }
html[data-reference-system="true"][data-theme] :is(.checkbox,.radio):checked { background-color:var(--fg); border-color:var(--fg); }
html[data-reference-system="true"][data-theme] .ds-progress-track { overflow:hidden; border-radius:99px; }
html[data-reference-system="true"][data-theme] .ds-progress-fill { border-radius:inherit; }
html[data-reference-system="true"][data-theme] .ds-progress-fill.is-error { background:var(--danger-fg); }
html[data-reference-system="true"][data-theme] .cl-empty { padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); }
html[data-reference-system="true"][data-theme] .cl-empty strong { font:600 18px/1.4 var(--font-body); color:var(--fg); }
html[data-reference-system="true"][data-theme] .cl-empty span { font:400 13px/1.5 var(--font-body); color:var(--fg-2); }
.reference-layout .ref-source-fixture { margin:16px 0; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); }
.reference-layout .ref-option-fixture { display:grid; gap:8px; border:0; padding:0; margin:0; max-width:540px; }
.reference-layout .ref-option-fixture legend { margin-bottom:12px; font-weight:500; }
.reference-layout [data-ref-tab-demo] { margin-top:20px; }
.reference-layout [data-ref-tab-demo] [role=tabpanel] { padding:16px 4px; }
@media(prefers-reduced-motion:no-preference) {
 html[data-reference-system="true"][data-theme] .dd.open .ddmenu { animation:ref-menu-arrive var(--ref-motion-menu) ease-out; }
 html[data-reference-system="true"][data-theme] :is(.btn,.icon-btn,.card-hoverable,.ddopt,.chip,.prompt-chip,.link-chip) { transition:background-color var(--ref-motion-fast) ease,border-color var(--ref-motion-fast) ease,color var(--ref-motion-fast) ease,box-shadow var(--ref-motion-fast) ease; }
}
@keyframes ref-menu-arrive { from { opacity:0; translate:0 3px; } to { opacity:1; translate:0 0; } }
@media(prefers-reduced-motion:reduce) {
 html[data-reference-system="true"][data-theme] :is(.ddmenu,.composer-menu,.think-menu,.status-dot,.ds-progress-fill,.pf-sync-fill,.pb-progress-fill,.switch .track,.switch .knob,.toggle,.toggle::after) { animation:none!important; transition:none!important; }
}
@media(pointer:coarse) { html[data-reference-system="true"][data-theme] :is(.check-row,.ddopt,.ds-tab,.seg-btn) { min-height:44px; } }
@media(max-width:600px) { .reference-layout .ref-source-fixture { padding:14px; } .reference-layout .sg-src-row { display:block; } .reference-layout .sg-src-key { width:auto; } }
@media(forced-colors:active) {
 html[data-reference-system="true"][data-theme] .switch input:checked ~ .track,html[data-reference-system="true"][data-theme] .toggle:checked { background:Highlight; border-color:Highlight; }
 html[data-reference-system="true"][data-theme] .switch input:checked ~ .knob,html[data-reference-system="true"][data-theme] .toggle:checked::after { background:HighlightText; }
}
html[data-reference-system="true"][data-theme] [data-testid="integration-already-connected"] { padding:12px 14px; border:1px solid var(--line); background:var(--bg-2); color:var(--fg); font:500 14px/1.5 var(--font-body); }
html[data-reference-system="true"][data-theme] [data-testid="integration-already-connected"] svg { color:var(--success-fg); width:18px; height:18px; }
html[data-reference-system="true"][data-theme] [data-testid="integration-already-connected"] .text-sm { color:var(--fg-2); font-size:13px; }
html[data-reference-system="true"][data-theme] .wint-status--connected { background:var(--success-bg); color:var(--success-fg); border-color:transparent; }
.reference-layout .ref-password-fixture { max-width:400px; display:grid; gap:8px; }
.reference-layout .ref-password-fixture label:not(:first-child) { margin-top:8px; }
.reference-layout .ref-password-fixture .input { width:100%; padding-right:44px; }
html[data-reference-system="true"][data-theme] [data-controller="password-visibility"] button { width:40px; justify-content:center; padding:0; border-radius:8px; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] [data-controller="password-visibility"] button:hover { background:var(--hover-bg); color:var(--fg); }
html[data-reference-system="true"][data-theme] [data-controller="password-visibility"] button:focus-visible { outline:2px solid var(--ref-focus); outline-offset:2px; }
html[data-reference-system="true"][data-theme] #knowledge_panel_error:empty { display:none; }
html[data-reference-system="true"][data-theme] #knowledge_panel_error { background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
html[data-reference-system="true"][data-theme] #knowledge_panel_error h3 { color:var(--fg); font:500 14px/1.4 var(--font-body); }
html[data-reference-system="true"][data-theme] #knowledge_panel_error p { color:var(--fg-2); font:400 13px/1.5 var(--font-body); }
html[data-reference-system="true"][data-theme] #knowledge_panel_error :is(.fa-exclamation-circle,.ref-error-symbol) { color:var(--danger-fg); }
html[data-reference-system="true"][data-theme] #knowledge_panel_error button { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] #knowledge_panel_error button:hover { color:var(--fg); background:var(--hover-bg); }
html[data-reference-system="true"][data-theme] #knowledge_panel_error button:focus-visible { outline:2px solid var(--ref-focus); outline-offset:2px; }
/* Overskill Reference Lab snapshot, 2026-09-25. Source: _motion_refinements.html.erb.
 * CSS only; source application controllers and behavior remain authoritative. */
html[data-reference-system="true"][data-theme] {
 --ref-motion-enter:180ms; --ref-motion-exit:110ms;
 --ref-motion-ease:cubic-bezier(.22,1,.36,1);
}
/* Controllers continue to own open/hidden state. Discrete display transitions
   let an exit finish without JS timers delaying semantic closure. */
@supports (transition-behavior:allow-discrete) {
 @media(prefers-reduced-motion:no-preference) {
  html[data-reference-system="true"][data-theme] :is(.ddmenu,.think-menu,.composer-popover,dialog.modal) {
   animation:none; opacity:0; translate:0 -2px; scale:.98; transform-origin:top center;
   transition:opacity var(--ref-motion-exit) ease,translate var(--ref-motion-exit) ease,scale var(--ref-motion-exit) ease,display var(--ref-motion-exit) allow-discrete,overlay var(--ref-motion-exit) allow-discrete;
  }
  html[data-reference-system="true"][data-theme] :is(.think-menu,.composer-popover):not(dialog) { translate:0 2px; transform-origin:bottom center; }
  html[data-reference-system="true"][data-theme] .dd.open .ddmenu,
  html[data-reference-system="true"][data-theme] :is(.think-menu,.composer-popover):not(.hidden):not([hidden]),
  html[data-reference-system="true"][data-theme] dialog.modal[open] {
   animation:none; opacity:1; translate:0 0; scale:1;
   transition-duration:var(--ref-motion-enter); transition-timing-function:var(--ref-motion-ease);
  }
  html[data-reference-system="true"][data-theme] .dd:not(.open) .ddmenu,
  html[data-reference-system="true"][data-theme] :is(.think-menu,.composer-popover):is(.hidden,[hidden]),
  html[data-reference-system="true"][data-theme] dialog.modal:not([open]) { pointer-events:none; }
  @starting-style {
   html[data-reference-system="true"][data-theme] .dd.open .ddmenu,
   html[data-reference-system="true"][data-theme] dialog.modal[open] { opacity:0; translate:0 -2px; scale:.98; transform-origin:top center; }
   html[data-reference-system="true"][data-theme] :is(.think-menu,.composer-popover):not(.hidden):not([hidden]) { opacity:0; translate:0 2px; scale:.98; }
  }
  html[data-reference-system="true"][data-theme] dialog.modal::backdrop {
   opacity:0; transition:opacity var(--ref-motion-exit) ease,display var(--ref-motion-exit) allow-discrete,overlay var(--ref-motion-exit) allow-discrete;
  }
  html[data-reference-system="true"][data-theme] dialog.modal[open]::backdrop { opacity:1; }
  @starting-style { html[data-reference-system="true"][data-theme] dialog.modal[open]::backdrop { opacity:0; } }
 }
}
@media(prefers-reduced-motion:no-preference) {
 html[data-reference-system="true"][data-theme] :is(.switch .knob,.toggle::after) { transition:transform var(--ref-motion-enter) var(--ref-motion-ease),background-color var(--ref-motion-enter) ease; }
 html[data-reference-system="true"][data-theme] :is(.ds-progress-fill,.pf-sync-fill,.pb-progress-fill) { transition:width 220ms ease; }
 html[data-reference-system="true"][data-theme] :is(.seg-btn,.ds-tab,.icon-btn,.composer-tool) { transition:background-color var(--ref-motion-fast) ease,color var(--ref-motion-fast) ease; }
}
@media(prefers-reduced-motion:reduce) {
 html[data-reference-system="true"][data-theme] :is(.ddmenu,.think-menu,.composer-popover,dialog.modal,.os-tooltip--compact,[role="tooltip"],.switch .knob,.toggle::after,.ds-progress-fill,.pf-sync-fill,.pb-progress-fill,.seg-btn,.ds-tab,.icon-btn,.composer-tool),
 html[data-reference-system="true"][data-theme] dialog.modal::backdrop { animation:none!important; transition:none!important; translate:none; scale:none; }
}

/* Adapted motion direction from transitions.dev; existing controllers own state.
   Independent scale preserves centering transforms. No hover displacement. */
@keyframes ref-pop-scale-up { from { scale:.98; transform-origin:bottom center; } to { transform-origin:bottom center; } }
@keyframes ref-pop-scale-down { from { scale:.98; transform-origin:top center; } to { transform-origin:top center; } }
@media(prefers-reduced-motion:no-preference) {
 html[data-reference-system="true"][data-theme] {
  --ds-pop-in-up:ds-pop-fade 140ms ease,ds-pop-rise-up 180ms var(--ref-motion-ease),ref-pop-scale-up 180ms var(--ref-motion-ease);
  --ds-pop-in-down:ds-pop-fade 140ms ease,ds-pop-rise-down 180ms var(--ref-motion-ease),ref-pop-scale-down 180ms var(--ref-motion-ease);
 }
 html[data-reference-system="true"][data-theme] dialog.modal { translate:none; transform-origin:center; }
 html[data-reference-system="true"][data-theme] .composer-popover.flip { translate:0 -2px; transform-origin:top center; }
 @supports (transition-behavior:allow-discrete) {
  html[data-reference-system="true"][data-theme] [data-credit-topup-modal-target="modal"] {
   opacity:0;
   transition:opacity var(--ref-motion-exit) ease,display var(--ref-motion-exit) allow-discrete;
  }
  html[data-reference-system="true"][data-theme] [data-credit-topup-modal-target="modal"]:not(.hidden) {
   opacity:1; transition-duration:var(--ref-motion-enter);
  }
  html[data-reference-system="true"][data-theme] .topup-modal-panel {
   scale:.985; transition:scale var(--ref-motion-exit) var(--ref-motion-ease);
  }
  html[data-reference-system="true"][data-theme] [data-credit-topup-modal-target="modal"]:not(.hidden) .topup-modal-panel {
   scale:1; transition-duration:var(--ref-motion-enter);
  }
  html[data-reference-system="true"][data-theme] [data-credit-topup-modal-target="modal"].hidden { pointer-events:none; }
  @starting-style {
   html[data-reference-system="true"][data-theme] [data-credit-topup-modal-target="modal"]:not(.hidden) { opacity:0; }
   html[data-reference-system="true"][data-theme] [data-credit-topup-modal-target="modal"]:not(.hidden) .topup-modal-panel { scale:.985; }
   html[data-reference-system="true"][data-theme] dialog.modal[open] { translate:none; scale:.985; transform-origin:center; }
  }
 }
 /* Progressive enhancement: native disclosures stay immediate in older engines. */
 @supports (interpolate-size:allow-keywords) and selector(details::details-content) {
  html[data-reference-system="true"][data-theme] details:is(.appimport-help,.wint-disclosure,.skill-row-more,.skill-pack-skipped,.ti-show-faq-item)::details-content {
   interpolate-size:allow-keywords; block-size:0; overflow:clip; opacity:0;
   transition:block-size var(--ref-motion-enter) var(--ref-motion-ease),opacity var(--ref-motion-exit) ease,content-visibility var(--ref-motion-enter) allow-discrete;
  }
  html[data-reference-system="true"][data-theme] details:is(.appimport-help,.wint-disclosure,.skill-row-more,.skill-pack-skipped,.ti-show-faq-item)[open]::details-content { block-size:auto; opacity:1; }
 }
}
@media(prefers-reduced-motion:reduce) {
 html[data-reference-system="true"][data-theme] { --ds-pop-in-up:none; --ds-pop-in-down:none; }
 html[data-reference-system="true"][data-theme] :is([data-credit-topup-modal-target="modal"],.topup-modal-panel) { transition:none!important; scale:none; }
}

/* Upward-only bounce made centered deployment dots look top-heavy. Keep their
   geometry fixed and signal activity through opacity (including all phases). */
@keyframes reference-deployment-dot-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
html[data-reference-system="true"][data-theme] .deployment-progress-dots > div {
  transform: none;
  animation: reference-deployment-dot-pulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  html[data-reference-system="true"][data-theme] .deployment-progress-dots > div { animation: none; opacity: 1; }
}
/* Overskill Reference Lab snapshot, 2026-09-25. Source: _model_refinements.html.erb.
 * CSS only; source application controllers and behavior remain authoritative. */
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"].composer-menu { width:300px; max-width:calc(100vw - 24px); padding:6px; border-radius:14px; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-head { padding:8px 10px; color:var(--fg-2); font:500 12px/1.4 var(--font-body); text-transform:none; letter-spacing:normal; border:0; background:none; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-list { padding:0; max-height:min(360px,55dvh); overflow-y:auto; overscroll-behavior:contain; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"].composer-menu-item { display:grid; grid-template-columns:minmax(0,1fr) 16px; gap:12px; align-items:center; flex:none; height:auto; width:100%; min-height:44px; padding:10px; border:0; border-radius:8px; background:transparent; box-shadow:none; text-align:left; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"].is-locked { opacity:1; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"].is-selected { background:var(--rx-overlay-selected); box-shadow:none; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"]:hover { background:var(--rx-overlay-hover); }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"]:focus-visible { outline:2px solid var(--ref-focus); outline-offset:-2px; background:var(--rx-overlay-hover); }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"] .composer-menu-icon { display:none; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"] .composer-menu-body { min-width:0; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"] .composer-menu-title-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"] .composer-menu-title { color:var(--fg); font:500 14px/1.4 var(--font-body); overflow-wrap:anywhere; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"] .composer-menu-desc { margin:3px 0 0; font:400 12px/1.45 var(--font-body); color:var(--fg-2); display:block; white-space:normal; overflow:visible; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"] .composer-menu-tag-recommended { font:400 10px/1.4 var(--font-body); text-transform:none; letter-spacing:normal; color:var(--fg-2); background:var(--bg-3); border:0; padding:2px 5px; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"] :is(.composer-menu-check,.composer-menu-lock) { width:16px; height:16px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--fg); }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"] .composer-menu-lock { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"].is-selected .composer-menu-check { color:var(--success-fg); }
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"] :is(.composer-menu-check,.composer-menu-lock) svg { width:16px; height:16px; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-foot { padding:10px; border-color:var(--line); }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-foot-text { font:400 12px/1.5 var(--font-body); color:var(--fg-2); }
html[data-reference-system="true"][data-theme] [data-model-selector-target="button"].composer-tool { box-shadow:none; border:1px solid var(--line-2); outline:none; border-radius:8px; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="button"].composer-tool:hover { background:var(--rx-overlay-hover); }
html[data-reference-system="true"][data-theme] [data-model-selector-target="button"].composer-tool:focus:not(:focus-visible) { box-shadow:none; outline:none; border-color:var(--line-2); }
html[data-reference-system="true"][data-theme] [data-model-selector-target="button"].composer-tool:focus-visible { box-shadow:none; outline:2px solid var(--ref-focus); outline-offset:2px; }
@media(max-width:640px) { html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"].composer-popover { width:auto; max-width:none; left:8px; right:8px; bottom:8px; } }
html[data-reference-system="true"][data-theme] [data-chat-actions-sheet-target="modelOption"] { min-height:48px; padding:10px 12px; border:0; border-radius:8px; }
html[data-reference-system="true"][data-theme] [data-chat-actions-sheet-target="modelOption"] .chat-actions-row-title { font:500 14px/1.4 var(--font-body); }
html[data-reference-system="true"][data-theme] [data-chat-actions-sheet-target="modelOption"] .chat-actions-row-sub { font:400 12px/1.45 var(--font-body); color:var(--fg-2); }
html[data-reference-system="true"][data-theme] [data-chat-actions-sheet-target="modelOption"][disabled] { opacity:.65; cursor:not-allowed; }
html[data-reference-system="true"][data-theme] [data-chat-actions-sheet-target="modelOption"] .chat-actions-model-check { color:var(--success-fg); background:none; padding:0; }

/* Keep real pricing and capability information; the lab's fixture condensed it. */
html[data-reference-system="true"][data-theme] [data-model-selector-target="option"] :is(.composer-menu-tag-cost,.composer-menu-tag-intel) { font-size:10px; color:var(--fg-2); background:var(--bg-3); border:0; }
/* Overskill Reference Lab snapshot, 2026-09-25. Source: _platform_qa_styles.html.erb.
 * CSS only; source application controllers and behavior remain authoritative. */
/* Local QA: bridge legacy scaffold controls to the same semantic palette. */
/* Co-branded campaign keeps its own identity while retaining navigation on scroll. */
html[data-reference-system="true"] .bb-header { position: sticky; top: 0; z-index: 90; }
html[data-reference-system="true"][data-theme] .reference-scaffold-alert { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; margin:12px 0; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); color:var(--fg-2); font:400 14px/1.5 var(--font-body); }
html[data-reference-system="true"][data-theme] .reference-scaffold-alert__icon { flex:none; margin-top:2px; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .reference-scaffold-alert__icon.is-danger { color:var(--danger-fg); }
html[data-reference-system="true"][data-theme] .reference-scaffold-alert__body { min-width:0; overflow-wrap:anywhere; }
html[data-reference-system="true"][data-theme] .reference-scaffold-alert__body > :first-child { margin-top:0; }
html[data-reference-system="true"][data-theme] .reference-scaffold-alert__body > :last-child { margin-bottom:0; }
html[data-reference-system="true"][data-theme] :is(.ds-bt-box-desc,.ds-bt-input) { font-family:var(--font-body); font-weight:400; }

html[data-reference-system="true"][data-theme] .form :is(input[type=submit].button,button.button) { background:var(--rx-primary)!important; color:var(--rx-primary-ink)!important; border:1px solid transparent; border-radius:8px; padding:10px 16px; font:500 14px/1.4 var(--font-body); box-shadow:none; }
html[data-reference-system="true"][data-theme] .form :is(input[type=submit].button,button.button):hover { background:var(--rx-primary-hover)!important; color:var(--rx-primary-ink)!important; transform:none; }
html[data-reference-system="true"][data-theme] .form .buttons a[data-turbo-method="delete"] { color:var(--danger-fg); border-radius:6px; }
html[data-reference-system="true"][data-theme] .form .buttons a[data-turbo-method="delete"]:hover { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:480px) {
 html[data-reference-system="true"][data-theme] .form .buttons { display:flex; flex-wrap:wrap; gap:8px; }
 html[data-reference-system="true"][data-theme] .form .buttons > :is(input[type=submit],button[type=submit]) { flex-basis:100%; margin:0; }
 html[data-reference-system="true"][data-theme] .form .buttons > a { flex:1; margin:0; padding:10px 12px; text-align:center; }
}
html[data-reference-system="true"][data-theme] .form .button-secondary { color:var(--fg-2); border-radius:6px; }
html[data-reference-system="true"][data-theme] .form .button-secondary:hover { color:var(--fg); text-decoration:underline; text-underline-offset:4px; }
html[data-reference-system="true"][data-theme] .ds-bt-input:focus:not([aria-invalid="true"]):not([readonly]):not(:disabled) { border-color:var(--field-border-focus); outline:0; box-shadow:var(--field-ring); }
html[data-reference-system="true"][data-theme] .cint__note { padding:12px 16px; line-height:1.5; }
html[data-reference-system="true"][data-theme] :is(.dash-hero-eyebrow,.dash-apps-count,.dash-card-status,.dash-card-meta,.dash-foot-bottom,.dash-foot-heading,.auth-check-text) { font-family:var(--font-body); letter-spacing:.02em; }
/* Use the actual Select2 controller instead of the inaccessible native fallback. */
html[data-reference-system="true"][data-theme] .select2-container { display:inline-block!important; position:relative; vertical-align:middle; width:100%; max-width:100%; }
html[data-reference-system="true"][data-theme] select.select2-hidden-accessible { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important; border:0!important; }
html[data-reference-system="true"][data-theme] .select2-selection--single { display:flex; align-items:center; min-height:44px; padding:10px 40px 10px 12px; border:1px solid var(--line-2); border-radius:8px; background:var(--rx-field); color:var(--fg); cursor:pointer; }
html[data-reference-system="true"][data-theme] .select2-selection__rendered { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-reference-system="true"][data-theme] .select2-selection__arrow { position:absolute; right:16px; top:50%; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-70%) rotate(45deg); }
html[data-reference-system="true"][data-theme] .select2-selection__arrow b { display:none; }
html[data-reference-system="true"][data-theme] .select2-selection:focus-visible { outline:none!important; border-color:var(--field-border-focus)!important; box-shadow:var(--field-ring)!important; }
html[data-reference-system="true"][data-theme] .select2-dropdown { display:block; background:var(--rx-overlay); color:var(--fg); padding:6px; border:1px solid var(--rx-overlay-border); border-radius:10px; box-shadow:var(--rx-floating-shadow); overflow:hidden; }
html[data-reference-system="true"][data-theme] body > .select2-container { position:absolute; z-index:1100; }
html[data-reference-system="true"][data-theme] .select2-search--dropdown { display:block; padding:4px; }
html[data-reference-system="true"][data-theme] .select2-search__field { width:100%; border:1px solid var(--line-2); border-radius:6px; background:var(--rx-field)!important; color:var(--fg)!important; padding:8px 10px; }
html[data-reference-system="true"][data-theme] .select2-results__options { list-style:none; margin:0; padding:0; max-height:260px; overflow-y:auto; }
html[data-reference-system="true"][data-theme] .select2-results__option { padding:9px 10px; border-radius:6px; color:var(--fg)!important; cursor:pointer; }
html[data-reference-system="true"][data-theme] .select2-results__option--highlighted { background:var(--rx-overlay-hover); color:var(--fg); }
html[data-reference-system="true"][data-theme] .select2-results__option[aria-selected=true] { background:var(--rx-overlay-selected); font-weight:600; }
html[data-reference-system="true"][data-theme] .select2-results__option[aria-disabled=true] { color:var(--fg-4)!important; cursor:default; }
html[data-reference-system="true"][data-theme] .select2-container--default .select2-selection--single { border:1px solid var(--line-2)!important; background:var(--rx-field)!important; color:var(--fg)!important; box-shadow:none!important; }
html[data-reference-system="true"][data-theme] .select2-container--open .select2-selection--single { border-color:var(--field-border-focus)!important; box-shadow:var(--field-ring)!important; }
html[data-reference-system="true"][data-theme] .select2-container--default .select2-selection__arrow { height:7px!important; min-height:0!important; padding:0!important; top:50%!important; bottom:auto!important; right:16px!important; }
html[data-reference-system="true"][data-theme] .select2-container--default .select2-dropdown { border:1px solid var(--rx-overlay-border)!important; }
html[data-reference-system="true"][data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected] { background:var(--rx-overlay-hover)!important; color:var(--fg)!important; }
html[data-reference-system="true"][data-theme] .select2-container .select2-search__field:focus { outline:0!important; border-color:var(--field-border-focus)!important; box-shadow:var(--field-ring)!important; }
html[data-reference-system="true"][data-theme] .select2-container--default .select2-selection__rendered { color:var(--fg)!important; padding:0; line-height:1.5; }
html[data-reference-system="true"][data-theme] .auth-card label.ds-bt-field-label { font-family:var(--font-body); font-size:12px; letter-spacing:.02em; text-transform:none; }
html[data-reference-system="true"][data-theme] .auth-card .form > input.auth-btn-primary { margin-top:16px; }
/* Profile forms retain their real fields and shared searchable select. */
html[data-reference-system="true"][data-theme] .profile-page :is(.pf-field label,.photo-upload .choose,.id-meta .since) { font-family:var(--font-body); text-transform:none; letter-spacing:0; }
html[data-reference-system="true"][data-theme] .profile-page .pf-field label { font-size:13px; line-height:1.5; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .profile-page .panel:has(.select2-container--open) { overflow:visible; }
html[data-reference-system="true"][data-theme] .profile-page .select-wrap > .select2-container--open { z-index:1100; }
html[data-reference-system="true"][data-theme] .profile-page .warn-banner { background:var(--bg-2); color:var(--fg-2); border-color:var(--line); box-shadow:none; }
html[data-reference-system="true"][data-theme] .profile-page .warn-banner > svg { color:var(--warning-fg); }
/* Align prices and actions even when a pack has no bonus line. */
html[data-reference-system="true"][data-theme] .topup-pack-credits { flex:1; }
html[data-reference-system="true"][data-theme] :is(.topup-pack-badge,.topup-pack-discount,.topup-modal-eyebrow,.topup-pack-bonus,.topup-modal-secure) { font-family:var(--font-body); letter-spacing:.02em; }
html[data-reference-system="true"][data-theme] .select2-container:has(> .select2-dropdown) { width:auto; z-index:1100; }
html[data-reference-system="true"][data-theme] .members-card:has(.select2-container--open) { overflow:visible; }
html[data-reference-system="true"][data-theme] .members-field:has(select.members-select) { min-width:120px; }
html[data-reference-system="true"][data-theme] .members-invite > .members-btn { min-height:44px; }
html[data-reference-system="true"][data-theme] .select2-search--hide { display:none; }
html[data-reference-system="true"][data-theme] :is(.members-card-head,.support-card-head) { border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; }
html[data-reference-system="true"][data-theme] .support-card:has(.select2-container--open) { overflow:visible; }
html[data-reference-system="true"][data-theme] .support-priority-card:has(input:focus-visible) { outline:2px solid var(--ref-focus); outline-offset:3px; }
@media (max-width:639px) {
  html[data-reference-system="true"][data-theme] .notification-type-info { grid-column:1 / -1; }
  html[data-reference-system="true"][data-theme] :is(.notification-channel-labels,.notification-channel-controls) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); text-align:center; }
}
/* Payment settings share the local theme and UI typography. */
html[data-reference-system="true"][data-theme] :is(.payments-card-eyebrow,.payments-identity-label,.payments-table-head,.payments-footer-attribution,.payments-mode-pill) { font-family:var(--font-body); letter-spacing:.02em; text-transform:none; }
html[data-reference-system="true"][data-theme] .payments-card-title { font-size:16px; line-height:1.5; }
html[data-reference-system="true"][data-theme] .payments-orchestration-form [role=switch] { align-items:center; background:var(--bg-3)!important; }
html[data-reference-system="true"][data-theme] .payments-orchestration-form [role=switch][aria-checked=true] { background:var(--rx-primary)!important; }
html[data-reference-system="true"][data-theme] .payments-orchestration-form [role=switch][aria-checked=true] > span { background:var(--rx-primary-ink)!important; }
html[data-reference-system="true"][data-theme] a.text-primary-600 { color:var(--fg-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
html[data-reference-system="true"][data-theme] a.text-primary-600:hover { color:var(--fg); text-decoration-color:currentColor; }
html[data-reference-system="true"][data-theme] :is(.payments-card-eyebrow,.payments-identity-label,.payments-footer-attribution) { font-size:12px; }
@media (max-width:639px) {
  html[data-reference-system="true"][data-theme] .payments-card > div:has(> .payments-orchestration-form) { flex-direction:column-reverse; gap:12px!important; }
}
html[data-reference-system="true"][data-theme] .computer-library__filters > .select2-container:not(:has(> .select2-dropdown)) { width:150px!important; flex:0 0 150px; }
html[data-reference-system="true"][data-theme] .composer-scope__check { color:var(--fg)!important; background:transparent!important; }
@media (max-width:639px) {
  html[data-reference-system="true"][data-theme] .computer-library__filters { flex-wrap:wrap; }
  html[data-reference-system="true"][data-theme] .computer-library__filters > .select2-container:not(:has(> .select2-dropdown)) { flex:1 1 130px; }
}
html[data-reference-system="true"][data-theme] .computer-library__search { height:44px; }
html[data-reference-system="true"][data-theme] .computer-library__search:focus-within { border-color:var(--field-border-focus); box-shadow:var(--field-ring); }
html[data-reference-system="true"][data-theme] .reference-rail-lockup { display:block; width:120.4px; overflow:hidden; flex:none; color:var(--fg); }
html[data-reference-system="true"][data-theme] .reference-rail-lockup > svg { width:120.4px!important; max-width:none!important; }
html[data-reference-system="true"][data-theme] .computer-nav--collapsed .reference-rail-lockup { width:28px; }
@media (max-width:639px) {
  html[data-reference-system="true"][data-theme] .computer-library__filters > .select2-container:not(:has(> .select2-dropdown)),
  html[data-reference-system="true"][data-theme] .computer-library__search { flex:1 1 100%; width:100%!important; }
}
/* Preserve the supplied lockup proportions; compact utility headers show its mark. */
html[data-reference-system="true"][data-theme] .os-rail-mobilebar__brand { flex:0 0 103.2px; width:103.2px; }
html[data-reference-system="true"][data-theme] .os-rail-mobilebar__brand > .brand-full-lockup { width:103.2px!important; max-width:none!important; }
@media (max-width:559px) {
  html[data-reference-system="true"][data-theme] .os-rail-shell--page:has(.os-rail-utilbar) .os-rail-mobilebar__brand { flex-basis:24px; width:24px; overflow:hidden; }
}
html[data-reference-system="true"][data-theme] .computer-skill-card__state { font-family:var(--font-body); letter-spacing:0; font-size:11px; text-transform:lowercase; }
html[data-reference-system="true"][data-theme] .computer-skill-card__when > span { font-size:12px; letter-spacing:0; text-transform:none; }
@media (max-width:639px) {
  html[data-reference-system="true"][data-theme] .computer-skills__head { margin-bottom:20px; gap:12px; }
  html[data-reference-system="true"][data-theme] .computer-skills__head p { margin-bottom:0; }
  html[data-reference-system="true"][data-theme] .computer-skill-card__head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; }
  html[data-reference-system="true"][data-theme] .computer-skill-card__slug { grid-row:2; grid-column:1 / -1; overflow-wrap:anywhere; }
  html[data-reference-system="true"][data-theme] .computer-skill-card__state { grid-row:1; grid-column:2; }
  html[data-reference-system="true"][data-theme] .computer-skill-card__toggle { min-height:40px; }
}
html[data-reference-system="true"][data-theme] .ds-bt-input { border:1px solid var(--line-2); box-shadow:none; border-radius:8px; }
html[data-reference-system="true"][data-theme] .ds-bt-input:hover { border-color:var(--hover-border); }
html[data-reference-system="true"][data-theme] .ds-bt-input:focus:not([aria-invalid="true"]):not([readonly]):not(:disabled) { border-color:var(--field-border-focus); box-shadow:var(--field-ring); }
html[data-reference-system="true"][data-theme] a.button:not(.button-secondary):not(.button-danger) { display:inline-flex; align-items:center; justify-content:center; background:var(--rx-primary); color:var(--rx-primary-ink); border:1px solid transparent; border-radius:8px; padding:10px 16px; font:500 14px/1.4 var(--font-body); box-shadow:none; }
html[data-reference-system="true"][data-theme] a.button:not(.button-secondary):not(.button-danger):hover { background:var(--rx-primary-hover); transform:none; }
html[data-reference-system="true"][data-theme] a.button:focus-visible { outline:2px solid var(--ref-focus); outline-offset:3px; }
html[data-reference-system="true"][data-theme] main p a:not(.button):not([class*="btn"]) { text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
html[data-reference-system="true"][data-theme] main p a:not(.button):not([class*="btn"]):hover { text-decoration-color:currentColor; }
html[data-reference-system="true"][data-theme] footer :is(h5,.foot-bottom) { font-family:var(--font-body); letter-spacing:.02em; }
html[data-reference-system="true"][data-theme] :is(.mem-filter-empty,.mem-eyebrow,.mem-account-sub,.mem-empty,.mem-badge) { font-family:var(--font-body); letter-spacing:0; text-transform:none; }
html[data-reference-system="true"][data-theme] .mem-filter-empty { font-size:14px; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] :is(.mem-eyebrow,.mem-account-sub) { font-size:12px; }
html[data-reference-system="true"][data-theme] .apikeys-page .text-center { padding-inline:20px; }
html[data-reference-system="true"][data-theme] :is(.mdisc-shelf-sub,.mdisc-cta-eyebrow,.mcreate-eyebrow) { font-family:var(--font-body); letter-spacing:.02em; }
@media (max-width:639px) {
  html[data-reference-system="true"][data-theme] .apikeys-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-reference-system="true"][data-theme] .apikeys-form > .field { width:auto; min-width:0; }
  html[data-reference-system="true"][data-theme] .apikeys-form > .field:has(#api_key_name),
  html[data-reference-system="true"][data-theme] .apikeys-form > button { grid-column:1 / -1; width:100%; }
}
html[data-reference-system="true"][data-theme] .cm-editor { background:var(--bg-2)!important; color:var(--fg); }
html[data-reference-system="true"][data-theme] .cm-gutters { background:var(--bg-2)!important; border-right:1px solid var(--line)!important; color:var(--fg-3)!important; }
html[data-reference-system="true"][data-theme] :is(.cm-activeLine,.cm-activeLineGutter) { background:var(--bg-3)!important; }
html[data-reference-system="true"][data-theme] .cm-scroller { font-family:var(--font-mono)!important; }
html[data-reference-system="true"][data-theme] [data-database-manager-target="createTableModal"] > div > div { background:var(--rx-overlay)!important; border:1px solid var(--rx-overlay-border); border-radius:16px; box-shadow:var(--rx-floating-shadow); }
html[data-reference-system="true"][data-theme] [aria-label="Close create table"] { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
html[data-reference-system="true"][data-theme] [aria-label="Close create table"]:hover { background:var(--rx-overlay-hover); }
html[data-reference-system="true"][data-theme] [data-database-manager-target="createTableModal"] :is(button):focus-visible { outline:2px solid var(--ref-focus)!important; outline-offset:2px; box-shadow:none!important; }
/* Adapt to the canvas width after the app rail and resizable chat take space. */
html[data-reference-system="true"][data-theme] #dashboard_panel { container-type:inline-size; container-name:editor-dashboard; }
@container editor-dashboard (max-width:650px) {
  html[data-reference-system="true"][data-theme] .dash { grid-template-columns:48px minmax(0,1fr); }
  html[data-reference-system="true"][data-theme] .dash-nav { padding:8px 4px; }
  html[data-reference-system="true"][data-theme] .dash-nav-item { justify-content:center; padding:0; width:40px; height:40px; }
  html[data-reference-system="true"][data-theme] .dash-nav-item > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
html[data-reference-system="true"][data-theme] .ds-info-card { background:transparent!important; border:0!important; padding:12px 0; box-shadow:none; }
html[data-reference-system="true"][data-theme] .ds-info-card__title { font:600 14px/1.5 var(--font-body); color:var(--fg)!important; }
html[data-reference-system="true"][data-theme] .ds-info-card__icon { color:var(--fg-3)!important; font-size:14px; }
html[data-reference-system="true"][data-theme] .ds-info-card__body { font:400 13px/1.55 var(--font-body); color:var(--fg-2)!important; }
html[data-reference-system="true"][data-theme] .ds-info-card__body li::marker { color:var(--fg-4); }
html[data-reference-system="true"][data-theme] .user-directory-filter { display:block; position:relative; min-width:110px; }
@container editor-dashboard (max-width:650px) {
  html[data-reference-system="true"][data-theme] .user-directory-stats { grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
  html[data-reference-system="true"][data-theme] .user-directory-desktop-head { display:block!important; padding:16px; }
  html[data-reference-system="true"][data-theme] .user-directory-mobile-head { display:none!important; }
  html[data-reference-system="true"][data-theme] .user-directory-desktop-head > div { flex-direction:column; align-items:stretch; gap:16px; }
  html[data-reference-system="true"][data-theme] .user-directory-desktop-head > div > div:last-child { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  html[data-reference-system="true"][data-theme] .user-directory-desktop-head > div > div:last-child > * { margin:0; min-width:0; }
  html[data-reference-system="true"][data-theme] .user-directory-desktop-head .relative:has(input) { grid-column:1 / -1; }
  html[data-reference-system="true"][data-theme] .user-directory-desktop-head input { width:100%; min-width:0; }
}
html[data-reference-system="true"][data-theme] :focus-visible { outline-color:var(--ref-focus)!important; }
@container editor-dashboard (max-width:650px) {
  html[data-reference-system="true"][data-theme] .grid:is([class~="lg:grid-cols-4"],[class~="grid-cols-4"]) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-reference-system="true"][data-theme] .grid[class~="lg:grid-cols-2"] { grid-template-columns:minmax(0,1fr); }
}
@container editor-dashboard (max-width:400px) {
  html[data-reference-system="true"][data-theme] .grid[class~="md:grid-cols-2"] { grid-template-columns:minmax(0,1fr); }
}
html[data-reference-system="true"][data-theme] #dashboard_panel :is(button,a)[class~="bg-primary-500"] { background:var(--rx-primary)!important; color:var(--rx-primary-ink)!important; border-color:transparent!important; box-shadow:none; }
html[data-reference-system="true"][data-theme] #dashboard_panel :is(button,a)[class~="bg-primary-500"]:hover { background:var(--rx-primary-hover)!important; }
@container editor-dashboard (max-width:750px) {
  html[data-reference-system="true"][data-theme] .apiex { flex-direction:column; }
  html[data-reference-system="true"][data-theme] .apiex__mtabs { display:flex; flex-shrink:0; padding:12px 16px; }
  html[data-reference-system="true"][data-theme] :is(.apiex__list,.apiex__detail) { flex:1; min-height:0; min-width:0; width:100%; border-right:0; }
  html[data-reference-system="true"][data-theme] .apiex[data-api-view="request"] .apiex__list,
  html[data-reference-system="true"][data-theme] .apiex[data-api-view="endpoints"] .apiex__detail { display:none; }
  html[data-reference-system="true"][data-theme] [data-api-explorer-target="urlInput"] { min-width:0; width:100%; }
  html[data-reference-system="true"][data-theme] [data-api-explorer-target="requestPanel"] { padding:16px; }
}
html[data-reference-system="true"][data-theme] .api-method-filter { position:relative; width:100px; flex-shrink:0; }
html[data-reference-system="true"][data-theme] #dashboard_panel :is(button,a)[class~="bg-blue-600"] { background:var(--rx-primary)!important; color:var(--rx-primary-ink)!important; border-color:transparent!important; }
html[data-reference-system="true"][data-theme] #dashboard_panel :is(button,a)[class~="bg-blue-600"]:hover { background:var(--rx-primary-hover)!important; }
html[data-reference-system="true"][data-theme] .apiex [class~="border-blue-500"] { border-color:var(--fg-3)!important; }
html[data-reference-system="true"][data-theme] [data-env-var-modal-target="modal"] > .bg-gray-500 { background:rgba(0,0,0,.55)!important; backdrop-filter:blur(4px); }
html[data-reference-system="true"][data-theme] [data-env-var-modal-target="modal"] .relative.transform { background:var(--rx-overlay)!important; border:1px solid var(--rx-overlay-border); border-radius:16px; box-shadow:var(--rx-floating-shadow); }
html[data-reference-system="true"][data-theme] [data-env-var-modal-target="title"] { font-weight:600; font-size:18px; margin-bottom:20px; }
html[data-reference-system="true"][data-theme] .task-history-filter { position:relative; display:block; min-width:120px; }
html[data-reference-system="true"][data-theme] #settings_panel :is(h3,label) > i { color:var(--fg-3)!important; }
html[data-reference-system="true"][data-theme] #settings_panel textarea[name*="custom_instructions"] { font-family:var(--font-body)!important; }
@container editor-dashboard (max-width:650px) {
  html[data-reference-system="true"][data-theme] .settings-env-shortcut { flex-direction:column; align-items:flex-start; gap:16px; }
}
html[data-reference-system="true"][data-theme] [data-env-var-modal-target="modal"] > .fixed { z-index:1200; }
html[data-reference-system="true"][data-theme] .api-field-filter { display:block; position:relative; min-width:0; }
html[data-reference-system="true"][data-theme] .apiex nav button[class~="border-blue-500"] { color:var(--fg)!important; }
@container editor-dashboard (max-width:400px) {
  html[data-reference-system="true"][data-theme] [data-api-explorer-target="requestPanel"] .flex:has(> .api-method-filter) { display:grid; grid-template-columns:90px minmax(0,1fr); gap:8px; }
  html[data-reference-system="true"][data-theme] [data-api-explorer-target="requestPanel"] .flex:has(> .api-method-filter) > * { margin:0; }
  html[data-reference-system="true"][data-theme] .api-method-filter { width:90px; }
  html[data-reference-system="true"][data-theme] [data-api-explorer-target="requestPanel"] .flex:has(> .api-method-filter) > button { grid-column:1 / -1; }
}
html[data-reference-system="true"][data-theme] [data-env-var-modal-target="modal"] :is(button):focus-visible { outline:2px solid var(--ref-focus)!important; outline-offset:2px; box-shadow:none!important; }
html[data-reference-system="true"][data-theme] #dashboard_panel:has([data-env-var-modal-target="modal"]:not(.hidden)),
html[data-reference-system="true"][data-theme] .dash-main:has([data-env-var-modal-target="modal"]:not(.hidden)) { z-index:1300; }
@media (min-width:1024px) {
  html[data-reference-system="true"][data-theme] #dashboard_panel:has([data-env-var-modal-target="modal"]:not(.hidden)) { position:relative; }
}
html[data-reference-system="true"][data-theme] .os-btn-green { background:var(--rx-primary); color:var(--rx-primary-ink); }
html[data-reference-system="true"][data-theme] .os-btn-green:hover { background:var(--rx-primary-hover); }
html[data-reference-system="true"][data-theme] :is(.nav-pop,.nav-sheet) { background:var(--rx-overlay); border-color:var(--rx-overlay-border); }
html[data-reference-system="true"][data-theme] :is(.ns-h,.plan-k,.plan-incl-h) { font-family:var(--font-body); letter-spacing:0; }
html[data-reference-system="true"][data-theme] .ns-grp a:hover { color:var(--fg); background:var(--rx-overlay-hover); }
html[data-reference-system="true"][data-theme] main h1 + .learn-lead { margin-top:20px; }
html[data-reference-system="true"][data-theme] .nav-avatar { background:var(--bg-3); color:var(--fg); }
html[data-reference-system="true"][data-theme] .nav-avatar:hover { background:var(--hover-bg); }
html[data-reference-system="true"][data-theme] .help-category-card-meta { font-family:var(--font-body); letter-spacing:0; text-transform:none; }
/* Rails inserts hidden form fields before the first visible field. */
html[data-reference-system="true"][data-theme] form[class*="space-y-"] > :nth-child(1 of :not(input[type="hidden"])) { margin-top:0; }
html[data-reference-system="true"][data-theme] .api-docs-main :is(.text-gray-400,.text-gray-500,.text-gray-600) { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .api-docs-hero-title { flex-wrap:wrap; gap:12px; }
html[data-reference-system="true"][data-theme] .api-docs-hero-title > span { margin-left:0; }
html[data-reference-system="true"][data-theme] .trust-info-surface.border { background:var(--bg-2); border-color:var(--line); border-radius:12px; padding:16px; }
html[data-reference-system="true"][data-theme] .trust-info-surface.border :is(h2,h3) { color:var(--fg)!important; font-size:16px; }
html[data-reference-system="true"][data-theme] .trust-info-surface.border p { color:var(--fg-2)!important; font-size:14px; line-height:1.6; }
html[data-reference-system="true"][data-theme] { --status-live:var(--success-fg); --status-warn:var(--warning-fg); --status-down:var(--danger-fg); }
html[data-reference-system="true"][data-theme] .trust-status-badge { background:var(--bg-2)!important; border-color:var(--line)!important; }
html[data-reference-system="true"][data-theme] .trust-uptime-value { color:var(--fg)!important; }
html[data-reference-system="true"][data-theme] .trust-status-summary { background:var(--bg-2)!important; border-color:var(--line)!important; padding:24px; }
html[data-reference-system="true"][data-theme] .trust-status-summary > svg { width:28px; height:28px; margin-bottom:12px; }
html[data-reference-system="true"][data-theme] .trust-subscribe-action { background:var(--rx-primary)!important; color:var(--rx-primary-ink)!important; }
html[data-reference-system="true"][data-theme] .trust-subscribe-action:hover { background:var(--rx-primary-hover)!important; }
html[data-reference-system="true"][data-theme] .trust-main :is(.text-primary-500,.text-primary-600) { color:var(--fg-2)!important; }
html[data-reference-system="true"][data-theme] .trust-main [class~="bg-primary-500/10"] { background:var(--bg-3)!important; }
html[data-reference-system="true"][data-theme] .trust-main a[class~="bg-primary-500"] { background:var(--rx-primary)!important; color:var(--rx-primary-ink)!important; }
html[data-reference-system="true"][data-theme] .trust-main a[class~="bg-primary-500"]:hover { background:var(--rx-primary-hover)!important; }
html[data-reference-system="true"][data-theme] .ti-show-primary-cta { background:var(--rx-primary); color:var(--rx-primary-ink); border-color:transparent; }
html[data-reference-system="true"][data-theme] .ti-show-primary-cta:hover { background:var(--rx-primary-hover); color:var(--rx-primary-ink); }
html[data-reference-system="true"][data-theme] .cmp-hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
html[data-reference-system="true"][data-theme] .cmp-hero__pill { font-family:var(--font-body); letter-spacing:.04em; }
html[data-reference-system="true"][data-theme] .cmp-table-scroll-hint { display:none; }
html[data-reference-system="true"][data-theme] .cmp-table th { font-family:var(--font-body); letter-spacing:0; text-transform:none; }
@media (max-width:680px) {
  html[data-reference-system="true"][data-theme] .cmp-table-scroll .cmp-table { min-width:640px; }
  html[data-reference-system="true"][data-theme] .cmp-table-scroll-hint { display:block; font:400 13px/1.5 var(--font-body); color:var(--fg-2); margin:0 0 12px; }
}
html[data-reference-system="true"][data-theme] dialog.oscmdk { background:var(--rx-overlay); border-color:var(--rx-overlay-border); box-shadow:var(--rx-floating-shadow); }
html[data-reference-system="true"][data-theme] .oscmdk__heading { font:500 12px/1.5 var(--font-body); letter-spacing:0; text-transform:none; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .oscmdk__empty > svg { display:block; margin:0 auto 12px; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .oscmdk__empty-hint { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] #share_modal { z-index:1400; }
html[data-reference-system="true"][data-theme] #share_modal [data-unified-share-modal-target="content"] { background:var(--rx-overlay); border:1px solid var(--rx-overlay-border); border-radius:16px; box-shadow:var(--rx-floating-shadow); }
html[data-reference-system="true"][data-theme] #share_modal nav button[aria-selected="true"] { color:var(--fg)!important; border-color:var(--fg-3)!important; }
html[data-reference-system="true"][data-theme] #share_modal .share-access-note { background:var(--bg-3)!important; border:1px solid var(--line)!important; padding:12px; }
html[data-reference-system="true"][data-theme] #share_modal .share-access-note p { color:var(--fg-2)!important; margin:0; line-height:1.5; }
html[data-reference-system="true"][data-theme] #share_modal :is(button,a):focus-visible { outline:2px solid var(--ref-focus)!important; outline-offset:2px; box-shadow:none!important; }
@media (max-width:1023px) { html[data-reference-system="true"][data-theme] #share_modal [data-unified-share-modal-target="content"] { border-bottom-left-radius:0; border-bottom-right-radius:0; } }
html[data-reference-system="true"][data-theme] .pm { background:var(--rx-overlay); border-color:var(--rx-overlay-border); box-shadow:var(--rx-floating-shadow); }
html[data-reference-system="true"][data-theme] .pm :is(.pm-head,.pm-foot) { background:var(--rx-overlay); }
html[data-reference-system="true"][data-theme] .pm .deploy-cta { box-shadow:none; }
html[data-reference-system="true"][data-theme] .pm :is(.pm-eyebrow,.pm-foot h4) { font-family:var(--font-body); letter-spacing:0; text-transform:none; }
html[data-reference-system="true"][data-theme] .pm .customize-callout { background:var(--bg-3); border-color:var(--line); }
html[data-reference-system="true"][data-theme] .pm .customize-callout-title { color:var(--fg); }
html[data-reference-system="true"][data-theme] .pm .status-pill:is(.ready,.notyet) { color:var(--fg-2); background:var(--bg-3); border-color:var(--line); }
html[data-reference-system="true"][data-theme] :is(.billing-header-eyebrow,.billing-summary-card-label,.billing-stat-label,.chat-actions-section-label) { font-family:var(--font-body); letter-spacing:.02em; }
html[data-reference-system="true"][data-theme] .mcp-host-card__kind { font-family:var(--font-body); font-size:11px; line-height:1.5; letter-spacing:.01em; text-transform:none; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .mcp-host-card__code { white-space:pre-wrap; overflow-wrap:anywhere; }
html[data-reference-system="true"][data-theme] :is(.agents-hero__pill,.agents-eyebrow,.agents-code__label,.agents-code__head,.agents-code__copy) { font-family:var(--font-body); letter-spacing:.02em; }
html[data-reference-system="true"][data-theme] .agents-code__block--prompt :is(pre,code) { font-family:var(--font-body); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
html[data-reference-system="true"][data-theme] .agents-cta .agents-cta__fine { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 16px; margin:24px auto 0; font-size:13px; line-height:1.5; }
html[data-reference-system="true"][data-theme] .agents-standard__icon--shipped { color:var(--success-fg); }
html[data-reference-system="true"][data-theme] .agents-standard__icon--planned { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .agents-standard__desc strong { color:var(--fg); }
html[data-reference-system="true"][data-theme] .agents-lead { max-width:75ch; }
/* Comparison copy is informational, not a semantic warning or success state. */
html[data-reference-system="true"][data-theme] .cmp-win__badge { background:var(--bg-3); color:var(--fg-2); font:500 11px/1.5 var(--font-body); letter-spacing:.02em; text-transform:none; }
html[data-reference-system="true"][data-theme] :is(.alt-prompts__eyebrow,.alt-prompt__cta,.cmp-sources__reviewed) { font-family:var(--font-body); letter-spacing:.02em; text-transform:none; }
html[data-reference-system="true"][data-theme] .alt-prompt__cta { font-size:13px; }
html[data-reference-system="true"][data-theme] .alt-prompts__grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); padding:0; }
html[data-reference-system="true"][data-theme] .alt-prompt { transition:background 160ms ease,border-color 160ms ease; }
html[data-reference-system="true"][data-theme] .alt-prompt:hover { transform:none; background:var(--hover-bg); border-color:var(--fg-3); }
html[data-reference-system="true"][data-theme] .alt-prompt:focus-visible { outline:2px solid var(--ref-focus); outline-offset:3px; }
html[data-reference-system="true"][data-theme] .alt-review-note { padding-top:24px; padding-bottom:40px; }
html[data-reference-system="true"][data-theme] .alt-review-note .ds-container { max-width:920px; }
html[data-reference-system="true"][data-theme] .alt-review-links { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; margin:0; }
html[data-reference-system="true"][data-theme] .cmp-hero:has(+ .alt-review-note) { padding-bottom:32px; }
@media (min-width:1024px) {
  html[data-reference-system="true"][data-theme] .cmp-wins:has(> :nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
html[data-reference-system="true"][data-theme] .pf-back { display:flex; width:fit-content; margin-bottom:28px; font:500 13px/1.5 var(--font-body); letter-spacing:0; text-transform:none; }
html[data-reference-system="true"][data-theme] .pf-eyebrow { display:block; font:500 12px/1.5 var(--font-body); letter-spacing:.03em; }
html[data-reference-system="true"][data-theme] .pf-meta { font-family:var(--font-body); line-height:1.6; color:var(--fg-2); max-width:75ch; }
html[data-reference-system="true"][data-theme] .pf-table th { font:500 12px/1.5 var(--font-body); letter-spacing:0; text-transform:none; }
html[data-reference-system="true"][data-theme] .pf-fee-type { white-space:normal; }
html[data-reference-system="true"][data-theme] .pf-back:hover { text-decoration:underline; text-underline-offset:3px; color:var(--fg); }
@media (max-width:720px) {
  html[data-reference-system="true"][data-theme] .pf-page { padding-top:28px; }
  html[data-reference-system="true"][data-theme] .pf-footer { padding:20px; }
}
@media (max-width:720px) {
  html[data-reference-system="true"][data-theme] .pf-table tr:hover td { background:transparent; }
}
html[data-reference-system="true"][data-theme] .os-marketing :is(.tl-date,.pillx) { font-family:var(--font-body); letter-spacing:.02em; text-transform:none; }
html[data-reference-system="true"][data-theme] .os-marketing .tl-what ul { list-style:disc; }
html[data-reference-system="true"][data-theme] .os-marketing .integ-note { display:block; font-weight:400; line-height:1.6; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .os-marketing :is(.lead,.integ-note) a { text-decoration:underline; text-decoration-color:var(--fg-3); text-underline-offset:3px; }
html[data-reference-system="true"][data-theme] .os-marketing :is(.lead,.integ-note) a:hover { color:var(--fg); text-decoration-color:currentColor; }
/* Account integration filters must not inherit the centered Computer page container. */
html[data-reference-system="true"][data-theme] .wint-shell .cint__search { margin:0; max-width:420px; min-height:44px; }
html[data-reference-system="true"][data-theme] .wint-shell .cint__search input { font-size:14px; }
html[data-reference-system="true"][data-theme] .wint-shell .cint__sort { margin-left:auto; }
html[data-reference-system="true"][data-theme] .wint-shell .cint__tile { border-radius:12px; padding:12px 16px; gap:4px; }
html[data-reference-system="true"][data-theme] .wint-shell .cint__tile-num { font-size:20px; line-height:1.2; font-weight:600; }
html[data-reference-system="true"][data-theme] .wint-shell .cint__tile-label { line-height:1.4; }
html[data-reference-system="true"][data-theme] .wint-eyebrow { font-family:var(--font-body); letter-spacing:.02em; text-transform:none; }
html[data-reference-system="true"][data-theme] .nah .nah-chip { min-height:36px; padding:8px 16px; flex-shrink:0; line-height:1.4; }
@media (min-width:640px) {
  html[data-reference-system="true"][data-theme] .nah .nah-chips { display:flex; flex-wrap:wrap; }
  html[data-reference-system="true"][data-theme] .nah .nah-more { flex:0 0 auto; }
}
@media (max-width:640px) {
  html[data-reference-system="true"][data-theme] .wint-shell .cint__search { max-width:none; flex-basis:100%; }
  html[data-reference-system="true"][data-theme] .wint-shell .cint__sort { margin-left:0; }
}
html[data-reference-system="true"][data-theme] :is(a,button).bg-editor-accent-green { background:var(--rx-primary)!important; color:var(--rx-primary-ink)!important; }
html[data-reference-system="true"][data-theme] :is(a,button).bg-editor-accent-green:hover { background:var(--rx-primary-hover)!important; color:var(--rx-primary-ink)!important; opacity:1; }
@supports(appearance:base-select) {
 html[data-reference-system="true"][data-theme] .cint__sort-select:not([multiple]):not([size])::picker-icon { content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; padding:0; margin-left:16px; margin-right:3px; transform:translateY(-2px) rotate(45deg); }
}
/* Reset the legacy Select2 top-only padding and 35px text line box together. */
html[data-reference-system="true"][data-theme] .select2-container--default .select2-selection--single { height:44px!important; padding:0 40px 0 12px!important; align-items:center; }
html[data-reference-system="true"][data-theme] .select2-container--default .select2-selection--single .select2-selection__rendered { padding:0!important; height:auto!important; min-height:0!important; line-height:20px!important; }
@media (min-width:1024px) {
 html[data-reference-system="true"][data-theme] .os-rail-shell--page { height:100dvh; min-height:0; overflow:hidden; }
 html[data-reference-system="true"][data-theme] .os-rail-shell--page > .os-rail-shell__main { height:100%; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; }
 html[data-reference-system="true"][data-theme] .os-rail-shell--page > .computer-nav { flex-shrink:0; height:100dvh; }
}
html[data-reference-system="true"][data-theme] .mem-page.mcl-page { max-width:760px; }
html[data-reference-system="true"][data-theme] .payments-banner { border:1px solid var(--line); }
html[data-reference-system="true"][data-theme] .rca-evidence section { border:1px solid var(--line); border-radius:10px; }
html[data-reference-system="true"][data-theme] .users-manage-members { white-space:nowrap; flex-shrink:0; }
@media(max-width:640px) {
 html[data-reference-system="true"][data-theme] .users-manage-members,
 html[data-reference-system="true"][data-theme] #users_panel :is(.btn,.ds-tab) { min-height:44px; }
 html[data-reference-system="true"][data-theme] [data-user-management-target="roleModal"] button[aria-label] { width:44px; height:44px; flex-shrink:0; }
 html[data-reference-system="true"][data-theme] [data-user-management-target="roleModal"] label:has(input[type=checkbox]) { min-height:44px; margin-top:0; }
 html[data-reference-system="true"][data-theme] [data-user-management-target="roleModal"] input[type=checkbox] { width:16px; height:16px; flex-shrink:0; accent-color:var(--fg-2); }
}
@media(max-width:640px) {
 html[data-reference-system="true"][data-theme] .topup-modal-header { position:relative; padding-right:64px; }
 html[data-reference-system="true"][data-theme] .topup-modal-header-actions { flex-basis:auto; }
 html[data-reference-system="true"][data-theme] .topup-modal-close { position:absolute; top:20px; right:20px; }
}
/* Content hierarchy: sections stay open; rows align; controls retain boundaries. */
html[data-reference-system="true"][data-theme] .members-shell { max-width:960px; }
html[data-reference-system="true"][data-theme] .members-header { margin-bottom:32px; }
html[data-reference-system="true"][data-theme] .members-header-eyebrow { font-family:var(--font-body); letter-spacing:.02em; text-transform:none; }
html[data-reference-system="true"][data-theme] .members-header-subtitle { max-width:65ch; }
html[data-reference-system="true"][data-theme] .members-stack { gap:36px; }
html[data-reference-system="true"][data-theme] .members-card { background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }
html[data-reference-system="true"][data-theme] .members-card-head { background:transparent; padding:0 0 16px; border:0; }
html[data-reference-system="true"][data-theme] .members-card-title { font-size:16px; font-weight:600; }
html[data-reference-system="true"][data-theme] .members-card-count { font-family:var(--font-body); font-size:13px; color:var(--fg-2); margin-left:8px; }
html[data-reference-system="true"][data-theme] .members-card-body { padding:0; }
html[data-reference-system="true"][data-theme] .members-invite-help { max-width:80ch; font-size:12px; line-height:1.6; margin-top:12px; }
html[data-reference-system="true"][data-theme] .members-list { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
html[data-reference-system="true"][data-theme] .members-row { min-height:68px; padding:12px 0; gap:12px; }
html[data-reference-system="true"][data-theme] .members-avatar { width:32px; height:32px; font-family:var(--font-body); font-size:12px; background:var(--rx-secondary); color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .members-status-badge { border:0; border-radius:0; background:transparent; padding:0; font:400 13px/1.4 var(--font-body); text-transform:none; letter-spacing:0; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .members-row-actions:empty { display:none; }
html[data-reference-system="true"][data-theme] .members-name .members-status-badge--you { margin-left:8px; font-size:12px; }
html[data-reference-system="true"][data-theme] .select2-container--default .select2-results__option[aria-selected="true"] { background:var(--rx-overlay-selected)!important; color:var(--fg)!important; }
html[data-reference-system="true"][data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected] { background:var(--rx-overlay-hover)!important; color:var(--fg)!important; }
html[data-reference-system="true"][data-theme] .wint-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 24px; }
html[data-reference-system="true"][data-theme] .wint-header .wint-callout-text { grid-column:1 / -1; grid-row:2; max-width:75ch; font-size:14px; }
html[data-reference-system="true"][data-theme] .wint-header .cint__head-actions { grid-column:2; grid-row:1; align-self:center; margin:0; }
html[data-reference-system="true"][data-theme] .wint-header .cint__browse { background:transparent; border-color:transparent; padding:6px 0; font-size:13px; }
html[data-reference-system="true"][data-theme] .wint-header .cint__browse:hover { text-decoration:underline; text-underline-offset:4px; }
html[data-reference-system="true"][data-theme] .wint-shell .cint__note { display:flex; align-items:flex-start; gap:8px; background:transparent; border:0; border-radius:0; padding:0; font-size:12px; line-height:1.6; color:var(--fg-2); margin:0 0 24px; }
html[data-reference-system="true"][data-theme] .wint-shell .cint__tiles { display:flex; flex-wrap:wrap; gap:20px 40px; margin-bottom:28px; }
html[data-reference-system="true"][data-theme] .wint-shell .cint__tile { background:transparent; border:0; border-radius:0; padding:0; min-width:100px; box-shadow:none; }
html[data-reference-system="true"][data-theme] .wint-shell .cint__tile-label { font-size:12px; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .wint-shell .cint__toolbar { padding:0 0 20px; border-bottom:1px solid var(--line); }
html[data-reference-system="true"][data-theme] .wint-shell .cint__sort-select { background:transparent; border-color:transparent; box-shadow:none; }
html[data-reference-system="true"][data-theme] .wint-shell .cint__sort-select:hover { background:var(--rx-hover); }
html[data-reference-system="true"][data-theme] .wint-empty { display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:12px; row-gap:4px; padding:12px 0; border:0; border-radius:0; background:transparent; text-align:left; }
html[data-reference-system="true"][data-theme] .wint-empty-icon { grid-column:1; grid-row:1 / 3; width:24px; height:24px; margin:0; background:transparent; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .wint-empty-title { grid-column:2; font-size:14px; margin:0; }
html[data-reference-system="true"][data-theme] .wint-empty-text { grid-column:2; max-width:68ch; margin:0; font-size:13px; line-height:1.6; }
html[data-reference-system="true"][data-theme] .wint-shell :is(.cint__heading,.wint-eyebrow) { font:600 14px/1.4 var(--font-body); letter-spacing:0; text-transform:none; }
html[data-reference-system="true"][data-theme] .wint-shell :is(.cint__card,.wint-card) { border-radius:12px; padding:16px; background:var(--bg-2); box-shadow:none; }
html[data-reference-system="true"][data-theme] .wint-shell .cint__grid { gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:560px) {
 html[data-reference-system="true"][data-theme] .members-row-meta { flex-basis:auto; padding-left:0; margin-left:auto; }
 html[data-reference-system="true"][data-theme] .members-row-actions { padding-left:44px; }
 html[data-reference-system="true"][data-theme] .wint-header { grid-template-columns:1fr; }
 html[data-reference-system="true"][data-theme] .wint-shell .cint__grid { grid-template-columns:1fr; }
 html[data-reference-system="true"][data-theme] .wint-header .cint__head-actions { grid-column:1; grid-row:3; justify-self:start; }
 html[data-reference-system="true"][data-theme] .wint-shell .cint__tiles { gap:16px 24px; }
 html[data-reference-system="true"][data-theme] .wint-shell .cint__tile { flex:1 1 35%; }
}
html[data-reference-system="true"][data-theme] .wint-shell .cint__note > svg { flex-shrink:0; margin-top:3px; }
html[data-reference-system="true"][data-theme] .wint-empty-icon { align-self:start; }

/* Scaffold tables must scroll within their own region, never clip actions. */
html[data-reference-system="true"][data-theme] .box-table { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
html[data-reference-system="true"][data-theme] .box-table:focus-visible { outline:2px solid var(--ref-focus); outline-offset:-2px; }
html[data-reference-system="true"][data-theme] .box-table .table { width:100%; min-width:760px; border-collapse:collapse; }
html[data-reference-system="true"][data-theme] .box-table .table :is(th,td) { padding:14px 16px; vertical-align:middle; }
html[data-reference-system="true"][data-theme] .box-table .table th { font:500 12px/1.4 var(--font-body); letter-spacing:0; text-transform:none; color:var(--fg-2); white-space:nowrap; }
html[data-reference-system="true"][data-theme] .box-table .table td { font-size:14px; line-height:1.5; border-color:var(--line); }
html[data-reference-system="true"][data-theme] .box-table .table td.buttons { white-space:nowrap; min-width:96px; }
html[data-reference-system="true"][data-theme] .box-table .table td:not(.buttons) { max-width:300px; overflow-wrap:anywhere; min-width:80px; }
html[data-reference-system="true"][data-theme] .ds-bt-box:has(.box-table) { background:transparent; border:0; box-shadow:none; border-radius:0; }
html[data-reference-system="true"][data-theme] .ds-bt-box:has(.box-table) > div:first-child { padding-inline:16px; }

html[data-reference-system="true"][data-theme] .box-table .app-env-vars-table { min-width:1120px; }
html[data-reference-system="true"][data-theme] .box-table .table td.buttons :is(a,button) { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:6px 10px; color:var(--fg-2); background:transparent; border:1px solid transparent; border-radius:7px; font:500 13px/1.4 var(--font-body); text-decoration:none; }
html[data-reference-system="true"][data-theme] .box-table .table td.buttons :is(a,button):hover { color:var(--fg); background:var(--rx-overlay-hover); }
html[data-reference-system="true"][data-theme] .box-table .table td.buttons form:has(input[name="_method"][value="delete"]) button { color:var(--danger-fg); }
html[data-reference-system="true"][data-theme] .box-table .table td.buttons :is(a,button):focus-visible { outline:2px solid var(--ref-focus); outline-offset:2px; }

html[data-reference-system="true"][data-theme] .box-table .table :is(thead,tbody,tr) { border-color:var(--line)!important; }
html[data-reference-system="true"][data-theme] .ds-bt-box .button-secondary { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .ds-bt-box .button-secondary:hover { color:var(--fg); text-decoration:underline; text-underline-offset:4px; }
html[data-reference-system="true"][data-theme] .form input[type=radio] { accent-color:var(--fg-2); color:var(--fg-2); background-color:var(--rx-field)!important; border-color:var(--line-2)!important; }
html[data-reference-system="true"][data-theme] .form input[type=radio]:focus-visible { outline:2px solid var(--ref-focus); outline-offset:3px; box-shadow:none!important; }

html[data-reference-system="true"][data-theme] .workflow-list-page { max-width:1120px; margin-inline:auto; padding:32px 24px; }
html[data-reference-system="true"][data-theme] .workflow-list-page > .flex { gap:24px; }
html[data-reference-system="true"][data-theme] .workflow-list-page h1 { font:600 30px/1.2 var(--font-body); letter-spacing:-.035em; }
html[data-reference-system="true"][data-theme] .workflow-list-page a[href$="/workflows/new"] { background:var(--rx-primary); color:var(--rx-primary-ink); border:1px solid transparent; border-radius:8px; font:500 14px/1.4 var(--font-body); min-height:40px; white-space:nowrap; }
html[data-reference-system="true"][data-theme] .workflow-list-page a[href$="/workflows/new"]:hover { background:var(--rx-primary-hover); color:var(--rx-primary-ink); }
html[data-reference-system="true"][data-theme] .workflow-list-empty { background:transparent; border:1px solid var(--line); border-radius:12px; padding:48px 24px; }
html[data-reference-system="true"][data-theme] .workflow-list-empty > div:first-child { width:40px; height:40px; background:var(--bg-2); color:var(--fg-2); border-radius:10px; }
html[data-reference-system="true"][data-theme] .workflow-list-empty > div:first-child svg { width:20px; height:20px; color:inherit; }
@media(max-width:600px) {
 html[data-reference-system="true"][data-theme] .workflow-list-page { padding:24px 16px; }
 html[data-reference-system="true"][data-theme] .workflow-list-page > .flex { align-items:flex-start; flex-direction:column; gap:16px; }
 html[data-reference-system="true"][data-theme] .workflow-list-page h1 { font-size:26px; }
}

html[data-reference-system="true"][data-theme] .database-settings-page { max-width:1040px; }
html[data-reference-system="true"][data-theme] .database-settings-page [class~="shadow"] { background:transparent; box-shadow:none; border:1px solid var(--line); border-radius:12px; }
html[data-reference-system="true"][data-theme] .database-settings-page [class~="bg-gradient-to-r"] { background:transparent; border:0; padding:16px 0; }
html[data-reference-system="true"][data-theme] .database-settings-page [class~="bg-gradient-to-r"] svg { color:var(--fg-3); flex-shrink:0; }
html[data-reference-system="true"][data-theme] .database-settings-page a[class~="shadow"] { transition:background-color 140ms ease; }
html[data-reference-system="true"][data-theme] .database-settings-page a[class~="shadow"]:hover { background:var(--bg-2); box-shadow:none; }
html[data-reference-system="true"][data-theme] .database-settings-page a[class~="shadow"] svg { width:22px; height:22px; flex-shrink:0; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .database-settings-page .database-mode-option { border:1px solid var(--line-2)!important; background:transparent!important; gap:12px; }
html[data-reference-system="true"][data-theme] .database-settings-page .database-mode-option:has(input:checked) { border-color:var(--fg-3)!important; background:var(--bg-2)!important; }
html[data-reference-system="true"][data-theme] .database-settings-page .database-mode-option:hover { background:var(--bg-2)!important; }
html[data-reference-system="true"][data-theme] .database-settings-page input[type=radio] { accent-color:var(--fg-2); margin-right:0; flex-shrink:0; }
html[data-reference-system="true"][data-theme] .database-settings-page .database-mode-option span { color:var(--fg-2); background:var(--bg-3); }
html[data-reference-system="true"][data-theme] .database-settings-page [class~="text-blue-600"] { color:var(--fg-2); }
@media(max-width:600px) {
 html[data-reference-system="true"][data-theme] .database-settings-page .p-6 > .flex.items-center.justify-between { flex-wrap:wrap; gap:16px; }
 html[data-reference-system="true"][data-theme] .database-settings-page h1 { font-size:26px; line-height:1.2; }
 html[data-reference-system="true"][data-theme] .database-settings-page .w-32 { width:80px; flex-shrink:0; }
}

html[data-reference-system="true"][data-theme] .database-settings-page :is([class~="bg-blue-50"],[class~="bg-yellow-50"]) { background:transparent; border:1px solid var(--line); }
html[data-reference-system="true"][data-theme] .database-settings-page :is([class~="bg-blue-50"],[class~="bg-yellow-50"]) :is(h2,h3,h4) { color:var(--fg); }
html[data-reference-system="true"][data-theme] .database-settings-page :is([class~="bg-blue-50"],[class~="bg-yellow-50"]) :is(p,ul,svg) { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .database-settings-page [class~="bg-blue-50"] > svg { width:32px; height:32px; }
@media(max-width:600px) {
 html[data-reference-system="true"][data-theme] .database-settings-page #app-selector .p-4 > .flex { flex-direction:column; align-items:flex-start; gap:16px; }
}

/* Separate summaries from editable cards in the real editor dashboard. */
html[data-reference-system="true"][data-theme] :is(.dash-overview,.user-directory-stats) :is(.stat-tile,.credit-cell) { background:transparent; border:0; box-shadow:none; border-radius:0; }
html[data-reference-system="true"][data-theme] .dash-overview .stats-grid { gap:16px; padding-block:8px; }
html[data-reference-system="true"][data-theme] .dash-overview .credit-empty { border:0; background:transparent; }
html[data-reference-system="true"][data-theme] .dash-overview .credit-head .ico { background:transparent; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] #settings_panel [class~="shadow"] { box-shadow:none; border-radius:12px; }
html[data-reference-system="true"][data-theme] #settings_panel button.text-editor-accent-blue { color:var(--fg-2); text-underline-offset:3px; }
html[data-reference-system="true"][data-theme] #settings_panel button.text-editor-accent-blue:hover { color:var(--fg); }

@media(max-width:600px) {
 html[data-reference-system="true"][data-theme] #tasks_panel .p-12 { padding:28px 16px; }
 html[data-reference-system="true"][data-theme] #tasks_panel .p-12 > p { font-size:14px; line-height:1.6; }
}

/* Mobile dashboard is a stacking context below the bottom toolbar. Promote it
   only while its real modal is open so the scrim covers navigation as well. */
html[data-reference-system="true"][data-theme] #dashboard_panel:has(:is([data-database-manager-target="createTableModal"],[data-env-var-modal-target="modal"],[data-user-management-target="roleModal"],[data-user-management-target="userRoleModal"]):not(.hidden):not([hidden])) { z-index:80!important; }

html[data-reference-system="true"][data-theme] #analytics_panel [data-analytics-dashboard-target="noDataNotice"] { background:transparent; border:0; padding:12px 0; }
html[data-reference-system="true"][data-theme] #analytics_panel [data-analytics-dashboard-target="noDataNotice"] :is(p,i) { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] #analytics_panel table th { font-family:var(--font-body); letter-spacing:0; text-transform:none; }
/* Empty/error messages should fit the panel rather than an empty five-column table. */
html[data-reference-system="true"][data-theme] #analytics_panel table:has(td[colspan="5"]:only-child) thead { display:none; }
html[data-reference-system="true"][data-theme] #analytics_panel [role="region"]:focus-visible { outline:2px solid var(--ref-focus); outline-offset:-2px; }

html[data-reference-system="true"][data-theme] .apiex input.flex-1 { min-width:0; }
@media(max-width:600px) {
 html[data-reference-system="true"][data-theme] [data-api-explorer-target="headersList"] > div { display:grid; grid-template-columns:minmax(0,1fr) 32px; gap:8px; }
 html[data-reference-system="true"][data-theme] [data-api-explorer-target="headersList"] > div > input { grid-column:1; width:100%; margin:0; }
 html[data-reference-system="true"][data-theme] [data-api-explorer-target="headersList"] > div > button { grid-column:2; grid-row:1 / span 2; margin:0; min-height:32px; }
}
  html[data-reference-system="true"][data-theme] .user-directory-stats .icobox { background: transparent !important; color: var(--fg-3) !important; }
  html[data-reference-system="true"][data-theme] [data-user-management-target="roleModal"] > div > div { max-height:calc(100dvh - 32px); overflow-y:auto; }
  html[data-reference-system="true"][data-theme] #settings_panel .bg-yellow-50 { background:var(--bg-2)!important; border-color:var(--line)!important; }
  html[data-reference-system="true"][data-theme] #settings_panel .bg-yellow-50 :is(p,i,a) { color:var(--fg-2)!important; }
  html[data-reference-system="true"][data-theme] #settings_panel .bg-yellow-50 a:hover { color:var(--fg)!important; }
  html[data-reference-system="true"][data-theme] :is([data-user-management-target="roleModal"],[data-user-management-target="userRoleModal"]) > div > div { background:var(--rx-overlay)!important; border:1px solid var(--rx-overlay-border); box-shadow:var(--rx-floating-shadow); }
  html[data-reference-system="true"][data-theme] [data-user-management-target="roleModal"] .text-gray-500 { color:var(--fg-3)!important; }
  @media (max-width:600px) {
    html[data-reference-system="true"][data-theme] .subdomain-edit-form .pm-subdomain-edit-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    html[data-reference-system="true"][data-theme] .subdomain-edit-form .pm-subdomain-edit-row > div { grid-column:1 / -1; min-width:0; }
    html[data-reference-system="true"][data-theme] .subdomain-edit-form .pm-subdomain-edit-row > button { margin-left:0; }
    html[data-reference-system="true"][data-theme] .subdomain-edit-form input { min-width:0; }
  }
  html[data-reference-system="true"][data-theme] .mobile-modal { top:0!important; max-height:100dvh; transform:none!important; z-index:1500!important; }
  html[data-reference-system="true"][data-theme] .mobile-modal.active > .fixed.bottom-0 { transform:translateY(0); }
  html[data-reference-system="true"][data-theme] .mobile-modal > .fixed.bottom-0 { background:var(--rx-overlay)!important; border:1px solid var(--rx-overlay-border); box-shadow:var(--rx-floating-shadow); transition-duration:180ms; }
  html[data-reference-system="true"][data-theme] .mobile-modal :is(h3,span,button,a) { color:var(--fg-2); }
  html[data-reference-system="true"][data-theme] .mobile-modal h3 { color:var(--fg); margin:0; }
  html[data-reference-system="true"][data-theme] .mobile-modal :is(button,a):hover { background:var(--bg-2); color:var(--fg); }
  @media (prefers-reduced-motion:reduce) { html[data-reference-system="true"][data-theme] .mobile-modal > .fixed.bottom-0 { transition:none!important; } }
  html[data-reference-system="true"][data-theme] .deployment-center { max-width:1120px; }
  html[data-reference-system="true"][data-theme] .deployment-center .shadow-sm { background:transparent!important; border:1px solid var(--line)!important; border-radius:12px; box-shadow:none; }
  html[data-reference-system="true"][data-theme] .deployment-center .border-b { border-color:var(--line)!important; }
  html[data-reference-system="true"][data-theme] .deployment-center :is(.text-gray-500,.text-gray-600) { color:var(--fg-3)!important; }
  html[data-reference-system="true"][data-theme] .deployment-center th { font-family:var(--font-body); text-transform:none; letter-spacing:0; }
  html[data-reference-system="true"][data-theme] .deployment-center h3 { margin-bottom:0; }
  @media(max-width:600px) {
    html[data-reference-system="true"][data-theme] .deployment-center > .mb-8 > .flex,
    html[data-reference-system="true"][data-theme] .deployment-center .p-6.border-b > .flex { flex-direction:column; align-items:flex-start; gap:16px; }
    html[data-reference-system="true"][data-theme] .deployment-center .p-6 { padding:20px; }
    html[data-reference-system="true"][data-theme] .deployment-center h1 { font-size:26px; }
  }
  html[data-reference-system="true"][data-theme] [data-controller~="audit-dashboard"] .shadow { box-shadow:none; border:1px solid var(--line); border-radius:12px; background:transparent!important; }
  html[data-reference-system="true"][data-theme] [data-controller~="audit-dashboard"] :is(.border-b,.border-t) { border-color:var(--line)!important; }
  html[data-reference-system="true"][data-theme] [data-controller~="audit-dashboard"] label:has(input[type="radio"]) { background:transparent!important; }
  html[data-reference-system="true"][data-theme] [data-controller~="audit-dashboard"] label:has(input:checked) { background:var(--bg-2)!important; }
  html[data-reference-system="true"][data-theme] [data-controller~="audit-dashboard"] input[type="radio"] { accent-color:var(--fg-2); color:var(--fg-2); }
  html[data-reference-system="true"][data-theme] [data-controller~="audit-dashboard"] .grid:has(input[type="date"]) { grid-template-columns:1fr; }
  html[data-reference-system="true"][data-theme] [data-controller~="audit-dashboard"] input[type="date"] { min-width:0; width:100%; }
  html[data-reference-system="true"][data-theme] [data-controller~="audit-dashboard"] :is(.text-gray-500,.text-gray-600) { color:var(--fg-3)!important; }
  html[data-reference-system="true"][data-theme] [data-controller~="audit-dashboard"] #audit_logs_content { flex:1; min-width:0; }
  @media(max-width:600px) {
    html[data-reference-system="true"][data-theme] [data-controller~="audit-filters"] .space-y-1 { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
    html[data-reference-system="true"][data-theme] [data-controller~="audit-filters"] .space-y-1 > label { margin:0; padding:8px 4px; }
  }
  html[data-reference-system="true"][data-theme] .audit-filter-panel summary { cursor:pointer; }
  html[data-reference-system="true"][data-theme] .audit-filter-panel[open] summary { margin-bottom:20px; }
  html[data-reference-system="true"][data-theme] .audit-filter-panel summary:focus-visible { outline:2px solid var(--ref-focus); outline-offset:4px; }
  html[data-reference-system="true"][data-theme] [data-controller~="audit-dashboard"] :is(input[type="text"],input[type="date"]) { background:var(--rx-field)!important; color:var(--fg); border:1px solid var(--rx-field-border); border-radius:7px; padding:10px 12px; }
  html[data-reference-system="true"][data-theme] .app-file-source { max-height:28rem; overflow:auto; padding:16px; border:1px solid var(--line); border-radius:7px; background:var(--bg-2); margin-block:16px; }
  html[data-reference-system="true"][data-theme] .app-file-source pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--font-mono); font-size:13px; line-height:1.65; }
  html[data-reference-system="true"][data-theme] .app-file-source:focus-visible { outline:2px solid var(--ref-focus); outline-offset:2px; }
  html[data-reference-system="true"][data-theme] .app-file-form textarea { min-height:20rem; font-family:var(--font-mono); font-size:13px; line-height:1.65; }
  html[data-reference-system="true"][data-theme] .app-file-source-label { font-size:12px; font-weight:600; margin-bottom:12px; }
  html[data-reference-system="true"][data-theme] .wint-header:has(.wint-header-eyebrow) { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
  html[data-reference-system="true"][data-theme] .wint-header-eyebrow { font-family:var(--font-body); letter-spacing:.02em; text-transform:none; margin:0; }
  html[data-reference-system="true"][data-theme] .wint-pill { font-family:var(--font-body); letter-spacing:0; text-transform:none; font-size:12px; padding:7px 12px; }
  @media(max-width:600px) { html[data-reference-system="true"][data-theme] .wint-btn { min-height:44px; } }
  html[data-reference-system="true"][data-theme] .ti-show-fact { background:transparent; border:0; border-radius:0; padding:12px 0; }
  html[data-reference-system="true"][data-theme] .ti-show-step-num { background:var(--bg-2); color:var(--fg-2); forced-color-adjust:auto; }
  html[data-reference-system="true"][data-theme] .ti-show-table-wrap { margin-bottom:16px; }
  html[data-reference-system="true"][data-theme] .ti-show-table-wrap:focus-visible { outline:2px solid var(--ref-focus); outline-offset:2px; }
  html[data-reference-system="true"][data-theme] .ti-show-table { min-width:680px; }
  @media(max-width:600px) { html[data-reference-system="true"][data-theme] .ti-section + .ti-section--cta { margin-top:0; padding:28px 20px; } }
  html[data-reference-system="true"][data-theme] .os-marketing .cmp-wrap:focus-visible { outline:2px solid var(--ref-focus); outline-offset:4px; }
  html[data-reference-system="true"][data-theme] .os-marketing .cmp :is(thead th,.cmp-grp th) { font-family:var(--font-body); font-size:12px; letter-spacing:0; text-transform:none; color:var(--fg-3); }
  html[data-reference-system="true"][data-theme] .os-marketing .cmp thead th:first-child { color:var(--fg-3); }
  html[data-reference-system="true"][data-theme] .os-marketing .cmp-hint { line-height:1.5; }
  @media(max-width:720px) { html[data-reference-system="true"][data-theme] .os-marketing .cmp-hint { display:block; } }
  html[data-reference-system="true"][data-theme] .os-marketing .faq details[open] summary i { transform:none; border-color:var(--line-2); color:var(--fg); }
  html[data-reference-system="true"][data-theme] .os-marketing .faq summary i svg { transition:transform 180ms cubic-bezier(.22,1,.36,1); }
  html[data-reference-system="true"][data-theme] .os-marketing .faq details[open] summary i svg { transform:rotate(45deg); }
  @media(prefers-reduced-motion:reduce) { html[data-reference-system="true"][data-theme] .os-marketing .faq summary i svg { transition:none; } }
  html[data-reference-system="true"][data-theme] .os-marketing #enterprise .one-up > .up { background:transparent; border:0; padding:0; box-shadow:none; }
  html[data-reference-system="true"][data-theme] .legal-document .prose { color:var(--fg-2); --tw-prose-body:var(--fg-2); --tw-prose-headings:var(--fg); --tw-prose-bold:var(--fg); --tw-prose-links:var(--fg); --tw-prose-bullets:var(--fg-3); }
  html[data-reference-system="true"][data-theme] .legal-document .prose :is(p,li,ul,ol) { color:var(--fg-2); }
  html[data-reference-system="true"][data-theme] .legal-document .prose :is(h2,h3,h4,strong) { color:var(--fg); }
  html[data-reference-system="true"][data-theme] .legal-document .prose a { color:var(--fg); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--fg-3); }
  html[data-reference-system="true"][data-theme] .legal-document .prose a:hover { text-decoration-color:currentColor; }
  html[data-reference-system="true"][data-theme] .legal-document header > p { font-family:var(--font-body)!important; }
  @media(max-width:600px) { html[data-reference-system="true"][data-theme] .legal-document > div { padding:24px 20px; } html[data-reference-system="true"][data-theme] .legal-document { padding-block:24px; } }
  html[data-reference-system="true"][data-theme] .legal-document .prose :is(ul,ol) { list-style-position:outside; padding-left:1.4em; }
  html[data-reference-system="true"][data-theme] .os-marketing :is(.ic-cat,.cat-chips .filter b) { font-family:var(--font-body); font-size:12px; letter-spacing:0; text-transform:none; }
  html[data-reference-system="true"][data-theme="dark"] .os-marketing :is(.ic-logo,#groups) img:is([src="https://cdn.simpleicons.org/notion"],[src="https://cdn.simpleicons.org/typeform"]) { filter:invert(1); }
  html[data-reference-system="true"][data-theme] .learn-article blockquote { border:0; border-radius:10px; background:var(--bg-2); padding:16px 20px; color:var(--fg-2); }
  html[data-reference-system="true"][data-theme] .knowledge-search-controls .input { min-height:46px; }
  html[data-reference-system="true"][data-theme] :is(.mcl-eyebrow,.mcl-viewall) { font-family:var(--font-body); font-size:12px; letter-spacing:0; text-transform:none; color:var(--fg-3); }
  html[data-reference-system="true"][data-theme] .mcl-viewall:hover { color:var(--fg); text-decoration:underline; text-underline-offset:3px; }

html[data-reference-system="true"][data-theme] .cmp-table-scroll a { color:var(--fg); text-decoration:underline; text-decoration-color:var(--fg-3); text-underline-offset:3px; transition:text-decoration-color 120ms ease; }
html[data-reference-system="true"][data-theme] .cmp-table-scroll a:hover { text-decoration-color:currentColor; }
html[data-reference-system="true"][data-theme] .cmp-hub-scroll :is(.cmp-table,.cmp-hub) { min-width:760px; }

html[data-reference-system="true"][data-theme] .cmp-faq { background:transparent; border:0; border-radius:0; box-shadow:none; padding:20px 0; }
html[data-reference-system="true"][data-theme] .cmp-faqs { gap:0; }

html[data-reference-system="true"][data-theme] :is(.xp-hero__pill,.xp-hero__pill .tag,.xp-math__eyebrow,.xp-stat__label,.xp-section__eyebrow,.xp-shape__cta,.xp-final__eyebrow) { font-family:var(--font-body); letter-spacing:0; text-transform:none; }
html[data-reference-system="true"][data-theme] .xp-shape__cta { font-size:13px; }

html[data-reference-system="true"][data-theme] .xp-shape:hover { transform:none; background:var(--hover-bg); border-color:var(--fg-3); }

html[data-reference-system="true"][data-theme] [data-testid="notification-dropdown"] :is([data-testid="mark-all-read-button"],a[href$="notification_preferences"]) { color:var(--fg-2)!important; }
html[data-reference-system="true"][data-theme] [data-testid="notification-dropdown"] :is([data-testid="mark-all-read-button"],a[href$="notification_preferences"]):hover { color:var(--fg)!important; text-decoration:underline; text-underline-offset:3px; }

html[data-reference-system="true"][data-theme] .dash-app-card-url--empty { font-family:var(--font-body); letter-spacing:0; }

html[data-reference-system="true"][data-theme] .dash-search-empty { margin:0 0 24px; color:var(--fg-2); font:400 14px/1.5 var(--font-body); }

html[data-reference-system="true"][data-theme] .profile-page .panel-tag { font-family:var(--font-body); letter-spacing:0; text-transform:none; }

html[data-reference-system="true"][data-theme] .live-wrap { color:var(--fg); }
html[data-reference-system="true"][data-theme] :is(.live-sub,.live-label,.live-foot,.live-totals) { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .live-totals b { color:var(--fg); }
html[data-reference-system="true"][data-theme] .live-card { background:transparent; border-color:transparent; }
html[data-reference-system="true"][data-theme] .live-card--hero { background:var(--bg-2); border-color:var(--line); }
html[data-reference-system="true"][data-theme] :is(.live-pill,.live-foot) { font-family:var(--font-body); letter-spacing:0; text-transform:none; }
html[data-reference-system="true"][data-theme] .live-cta:hover { transform:none; filter:none; background:var(--rx-primary-hover); color:var(--rx-primary-ink); }
@media (prefers-reduced-motion:reduce) { html[data-reference-system="true"][data-theme] :is(.live-dot,.live-bump) { animation:none; } }

html[data-reference-system="true"][data-theme] :is(.bb-pill,.bb-card):hover { transform:none; }

html[data-reference-system="true"][data-theme] .psp-vs-cell--os { background:var(--bg-2); border-color:var(--line-2); }
html[data-reference-system="true"][data-theme] :is(.psp-vs-brand,.psp-vs-legend,.psp-vs-legend-item,.psp-demo-label,.psp-demo-foot,.psp-beat-num) { font-family:var(--font-body); letter-spacing:0; text-transform:none; }
html[data-reference-system="true"][data-theme] .psp-vs-cell a { text-decoration:underline; text-decoration-color:var(--fg-3); text-underline-offset:3px; }
html[data-reference-system="true"][data-theme] .psp-vs-cell a:hover { color:var(--fg); text-decoration-color:currentColor; }

html[data-reference-system="true"][data-theme] .psp-why-icon { background:var(--bg-3); color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .psp-why-card:hover { transform:none; }
@media (min-width:1000px) { html[data-reference-system="true"][data-theme] .psp-why-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
html[data-reference-system="true"][data-theme] .cl-empty a { color:var(--fg); text-decoration:underline; text-decoration-color:var(--fg-3); text-underline-offset:3px; }
html[data-reference-system="true"][data-theme] .cl-empty a:hover { text-decoration-color:currentColor; }

html[data-reference-system="true"][data-theme] .arcade-page { background:var(--bg); color:var(--fg); }
html[data-reference-system="true"][data-theme] .arcade-hero { background:var(--bg); padding-block:56px 32px; }
html[data-reference-system="true"][data-theme] .arcade-page :is(h1,h2,.text-gray-900,.dark\:text-white) { color:var(--fg); }
html[data-reference-system="true"][data-theme] .arcade-page :is(p,.text-gray-300,.text-gray-400,.text-gray-500) { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .arcade-hero .inline-flex { background:var(--bg-2); border-color:var(--line); }
html[data-reference-system="true"][data-theme] .arcade-hero .inline-flex :is(span,svg) { color:var(--fg-2)!important; }
html[data-reference-system="true"][data-theme] .arcade-page [data-testid^="arcade-board-"]:not([data-testid^="arcade-board-empty"]) { background:transparent; border:0; border-radius:0; box-shadow:none; }
html[data-reference-system="true"][data-theme] .arcade-page [data-testid^="arcade-board-"] > .border-b { border:0; padding:0 0 16px; }
html[data-reference-system="true"][data-theme] .arcade-page :is([data-testid^="arcade-you-row"],[data-testid="arcade-entry-you"]) { background:var(--bg-2); box-shadow:0 0 0 1px var(--line); }
html[data-reference-system="true"][data-theme] .arcade-page .font-mono { font-family:var(--font-body); color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .arcade-page :is([data-testid="arcade-profile-card"],[data-testid="arcade-signin-cta"]) { background:transparent; border:0; padding:16px 0; }
html[data-reference-system="true"][data-theme] .arcade-page a { color:var(--fg); text-decoration:underline; text-decoration-color:var(--fg-3); text-underline-offset:3px; }
html[data-reference-system="true"][data-theme] .arcade-page a:hover { text-decoration-color:currentColor; }
html[data-reference-system="true"][data-theme] .arcade-page > section + section { padding-block:32px; }
html[data-reference-system="true"][data-theme] .arcade-page [data-testid^="arcade-board-empty"] { padding-block:24px; }
html[data-reference-system="true"][data-theme] .arcade-page [data-testid^="arcade-board-"] > .px-3 { padding:0; }
html[data-reference-system="true"][data-theme] .arcade-page p.text-xs { font-size:13px; line-height:1.5; }
html[data-reference-system="true"][data-theme] [data-testid="nav-create"] > div { margin-top:0; width:36px; height:36px; background:var(--rx-primary); color:var(--rx-primary-ink); box-shadow:none; }
html[data-reference-system="true"][data-theme] [data-testid="nav-create"] svg { color:inherit; }
html[data-reference-system="true"][data-theme] [data-testid="nav-create"] > span { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] [data-testid="nav-create"]:hover > div { background:var(--rx-primary-hover); }
html[data-reference-system="true"][data-theme] .alt-pilot-checks .cmp-win { background:transparent; border:0; border-radius:0; padding:16px 0; box-shadow:none; }
html[data-reference-system="true"][data-theme] .alt-pilot-checks .cmp-win__badge { background:transparent; padding:0; }
html[data-reference-system="true"][data-theme] .cmp-sources__updated { font-family:var(--font-body); letter-spacing:0; }
html[data-reference-system="true"][data-theme] .cmp-verdict { background:var(--bg-2); border-color:var(--line); }
@media (max-width:640px) {
 html[data-reference-system="true"][data-theme] .cmp-verdict { padding:24px; text-align:left; }
 html[data-reference-system="true"][data-theme] .cmp-verdict__body { text-align:left; font-size:15px; line-height:1.6; }
 html[data-reference-system="true"][data-theme] .cmp-verdict__actions { justify-content:flex-start; }
 html[data-reference-system="true"][data-theme] .cmp-verdict__actions .btn { min-height:44px; }
}
html[data-reference-system="true"][data-theme] .ds-bt-box:has(.app-plan-form) { max-width:760px; border-radius:12px; }
html[data-reference-system="true"][data-theme] .app-plan-form :is(input,textarea) { font-family:var(--font-body); }
html[data-reference-system="true"][data-theme] .app-plan-form input[type=checkbox] { appearance:auto; width:16px; height:16px; flex:none; margin:0; accent-color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .app-plan-form label:has(input[type=checkbox]) { min-height:44px; margin-top:0; }
html[data-reference-system="true"][data-theme] .app-plan-form .btn-secondary-semantic { background:transparent; border-color:var(--line-2); color:var(--fg-2); box-shadow:none; }
html[data-reference-system="true"][data-theme] .app-plan-form .btn-secondary-semantic:hover { background:var(--hover-bg); color:var(--fg); transform:none; }
html[data-reference-system="true"][data-theme] .audit-event-detail .ds-bt-box { max-width:760px; border-radius:12px; }
html[data-reference-system="true"][data-theme] .audit-event-detail label { color:var(--fg-2); text-transform:none; letter-spacing:0; font:500 12px/1.5 var(--font-body); padding-block:4px; }
html[data-reference-system="true"][data-theme] .audit-event-detail label + div { color:var(--fg); font:400 14px/1.5 var(--font-body); overflow-wrap:anywhere; }
html[data-reference-system="true"][data-theme] .audit-event-detail .button-secondary { padding-inline:0; text-decoration:underline; text-underline-offset:4px; }
html[data-reference-system="true"][data-theme] .audit-action-type { background:var(--bg-3)!important; color:var(--fg-2)!important; font-family:var(--font-body); }
html[data-reference-system="true"][data-theme] .cf-guide-table { overflow-x:auto; max-width:100%; margin-block:24px; border:1px solid var(--line); border-radius:10px; }
html[data-reference-system="true"][data-theme] .cf-guide-table:focus-visible { outline:2px solid var(--ref-focus); outline-offset:3px; }
html[data-reference-system="true"][data-theme] .cf-guide-table table { display:table; min-width:640px; width:100%; margin:0; border:0; border-radius:0; }
@media(max-width:640px) {
 html[data-reference-system="true"][data-theme] .cf-guide-scroll-hint { display:block!important; font:400 12px/1.5 var(--font-body); color:var(--fg-3); margin-bottom:8px; }
 html[data-reference-system="true"][data-theme] .cf-guide-table { margin-top:8px; }
}
html[data-reference-system="true"][data-theme] .anonymous-build-entry { min-height:0; background:var(--bg); padding:64px 24px; align-items:flex-start; color:var(--fg); }
html[data-reference-system="true"][data-theme] .anonymous-build-entry > div { max-width:680px; }
html[data-reference-system="true"][data-theme] .anonymous-build-entry h1 { color:var(--fg); font:600 clamp(30px,4vw,42px)/1.15 var(--font-body); letter-spacing:-.03em; }
html[data-reference-system="true"][data-theme] .anonymous-build-entry h1 span { color:inherit; }
html[data-reference-system="true"][data-theme] .anonymous-build-entry p { color:var(--fg-2); line-height:1.6; }
html[data-reference-system="true"][data-theme] .anonymous-build-entry [data-testid="anon-build-signed-in-banner"] { background:var(--bg-2); border-color:var(--line); color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .anonymous-build-entry [data-testid="anon-build-signed-in-banner"] svg { width:18px; height:18px; color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .anonymous-build-entry form > div { background:var(--bg-2); border:1px solid var(--line-2); border-radius:16px; box-shadow:none; backdrop-filter:none; }
html[data-reference-system="true"][data-theme] .anonymous-build-entry form > div:focus-within { border-color:var(--field-border-focus); box-shadow:var(--field-ring); }
html[data-reference-system="true"][data-theme] .anonymous-build-entry textarea { min-height:160px; color:var(--fg)!important; font:400 16px/1.6 var(--font-body); padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; }
html[data-reference-system="true"][data-theme] .anonymous-build-entry textarea::placeholder { color:var(--fg-3); }
html[data-reference-system="true"][data-theme] .anonymous-build-entry input[type=submit] { background:var(--rx-primary); color:var(--rx-primary-ink); min-height:44px; font:500 14px/1.5 var(--font-body); box-shadow:none; }
html[data-reference-system="true"][data-theme] .anonymous-build-entry input[type=submit]:hover { background:var(--rx-primary-hover); color:var(--rx-primary-ink); transform:none; }
html[data-reference-system="true"][data-theme] .anonymous-build-entry form .border-t { border:0; padding-top:0; }
@media(max-width:640px) { html[data-reference-system="true"][data-theme] .anonymous-build-entry { padding:40px 20px; } }
html[data-reference-system="true"][data-theme] .reference-public-header [data-dropdown-target="button"] .bg-primary-100 { background:var(--bg-3); color:var(--fg); }
html[data-reference-system="true"][data-theme] .reference-public-header [data-dropdown-target="button"] .text-primary-700 { color:var(--fg); }
html[data-reference-system="true"][data-theme] .legacy-app-entry :is(.ds-bt-box,.legacy-app-entry__intro) { max-width:760px; border-radius:12px; }
html[data-reference-system="true"][data-theme] .legacy-app-entry__intro { background:transparent; border:0; padding:0; }
html[data-reference-system="true"][data-theme] .legacy-app-entry__intro :is(h3,p,div) { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .legacy-app-entry__intro span { background:var(--bg-2); color:var(--fg-2); margin-bottom:4px; }
html[data-reference-system="true"][data-theme] .legacy-app-examples button { padding:12px; border-color:var(--line); border-radius:8px; color:var(--fg); background:var(--bg-2); }
html[data-reference-system="true"][data-theme] .legacy-app-examples button :is(svg,.text-xs) { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .legacy-app-examples button:hover { background:var(--hover-bg); border-color:var(--line-2); transform:none; }
html[data-reference-system="true"][data-theme] .legacy-app-examples button:focus-visible { outline:2px solid var(--ref-focus); outline-offset:2px; }
html[data-reference-system="true"][data-theme] .legacy-app-entry .max-w-lg:has(> label input[type=radio]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; max-width:none; }
html[data-reference-system="true"][data-theme] .legacy-app-entry .max-w-lg > label:has(input[type=radio]) { min-height:40px; align-items:center; margin:0; }
html[data-reference-system="true"][data-theme] .legacy-app-entry .form label { color:var(--fg-2); }
@media(max-width:480px) { html[data-reference-system="true"][data-theme] .legacy-app-examples { grid-template-columns:1fr; } }
html[data-reference-system="true"][data-theme] .legacy-app-entry .form :is(.text-gray-500,.text-gray-600) { color:var(--fg-3); }
/* Live leaderboard: open summary, compact panels, readable mobile headings. */
html[data-reference-system="true"][data-theme] .glb-hero { border:0; padding-bottom:8px; }
html[data-reference-system="true"][data-theme] .glb-meta { background:transparent; border:0; border-radius:0; gap:20px; }
html[data-reference-system="true"][data-theme] .glb-meta__cell { border:0; padding:0; }
html[data-reference-system="true"][data-theme] :is(.glb-hero__eyebrow,.glb-meta__label,.glb-meta__unit,.glb-panel__eyebrow,.glb-panel__scope) { font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:12px; color:var(--fg-3); }
html[data-reference-system="true"][data-theme] .glb-hero__eyebrow { font-size:13px; }
html[data-reference-system="true"][data-theme] .glb-panel { background:var(--bg-2); border-radius:12px; }
html[data-reference-system="true"][data-theme] .glb-panel__head { padding:20px; }
html[data-reference-system="true"][data-theme] .glb-panel__scope { white-space:normal; max-width:100%; }
html[data-reference-system="true"][data-theme] .glb-cta__btn:hover { background:var(--rx-primary-hover); color:var(--rx-primary-ink); filter:none; transform:none; }
@media(max-width:640px) {
 html[data-reference-system="true"][data-theme] .glb-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
 html[data-reference-system="true"][data-theme] .glb-meta__cell:last-child { grid-column:1/-1; }
 html[data-reference-system="true"][data-theme] .glb-panel__head { flex-direction:column; gap:12px; }
 html[data-reference-system="true"][data-theme] .glb-panel__desc { max-width:none; }
}
html[data-reference-system="true"][data-theme] [data-testid="build-card-gate"] > div { border-color:var(--line); background:var(--bg-2); border-radius:12px; box-shadow:none; padding:28px; }
html[data-reference-system="true"][data-theme] [data-testid="build-card-gate"] .btn { min-height:44px; padding:10px 16px; }
@media(max-width:640px) { html[data-reference-system="true"][data-theme] [data-testid="build-card-gate"] { padding-top:32px; padding-bottom:40px; } html[data-reference-system="true"][data-theme] [data-testid="build-card-gate"] > div { padding:24px; } }
html[data-reference-system="true"][data-theme] .learn-table-scroll { max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin:24px 0; }
html[data-reference-system="true"][data-theme] .learn-table-scroll:focus-visible { outline:2px solid var(--ref-focus); outline-offset:3px; }
html[data-reference-system="true"][data-theme] .learn-table-scroll table { display:table; min-width:600px; width:100%; margin:0; border:0; border-radius:0; }
@media(max-width:640px) {
 html[data-reference-system="true"][data-theme] .learn-table-hint { display:block!important; margin:20px 0 8px; font:400 12px/1.5 var(--font-body); color:var(--fg-3); }
 html[data-reference-system="true"][data-theme] .learn-table-scroll { margin-top:8px; }
}
html[data-reference-system="true"][data-theme] .learn-comparison :is(.comparison-stage,.comparison-export) { border:0; margin-top:8px; padding:8px 0; }
html[data-reference-system="true"][data-theme] .learn-comparison summary { min-height:44px; align-content:center; }
html[data-reference-system="true"][data-theme] .learn-comparison :is(input:not([type=checkbox]),select) { min-height:44px; }
html[data-reference-system="true"][data-theme] .learn-comparison .comparison-essential { align-items:center; min-height:44px; }
html[data-reference-system="true"][data-theme] .learn-comparison .comparison-essential input { width:16px; height:16px; margin:0; accent-color:var(--fg-2); }
@media(max-width:640px) { html[data-reference-system="true"][data-theme] .cint__connect { min-height:44px; padding:10px 16px; } }
html[data-reference-system="true"][data-theme] :is(.composer-tool,.send)[data-tooltip]::after, html[data-reference-system="true"][data-theme] .composer-tip { font-family:var(--font-body); font-size:12px; letter-spacing:0; }
html[data-reference-system="true"][data-theme] .composer-tool[aria-expanded="true"][data-tooltip]::after { display:none!important; }
@media(max-width:640px) { html[data-reference-system="true"][data-theme] .nah .nah-chip { min-height:44px; } html[data-reference-system="true"][data-theme] .composer-menu-upgrade { min-height:44px; } html[data-reference-system="true"][data-theme] .composer-popover .sheet-close { width:44px; height:44px; } }
/* Credit-pack comparison, 2026-09-26. Shared with the Reference Lab.
 * Presentation only: preserve offer copy, source order, forms and promo logic. */
html[data-reference-system="true"][data-theme] [data-credit-topup-modal-target="modal"] > .relative { padding:16px; }
html[data-reference-system="true"][data-theme] .topup-modal-panel {
  max-width:min(1120px,calc(100vw - 32px));
  max-height:min(900px,calc(100vh - 32px));
  max-height:min(900px,calc(100dvh - 32px));
  background:var(--rx-overlay); border-color:var(--rx-overlay-border); border-radius:20px;
}
html[data-reference-system="true"][data-theme] .topup-modal-header { background:transparent; border:0; padding:22px 28px 18px; align-items:flex-start; }
html[data-reference-system="true"][data-theme] .topup-modal-title { font:650 26px/1.2 var(--font-body); letter-spacing:-.035em; }
html[data-reference-system="true"][data-theme] .topup-modal-eyebrow { color:var(--fg-3); font:500 11px/1.4 var(--font-body); letter-spacing:0; text-transform:none; margin-bottom:4px; }
html[data-reference-system="true"][data-theme] .topup-modal-subtitle { margin-top:6px; font:400 13px/1.5 var(--font-body); }
html[data-reference-system="true"][data-theme] .topup-modal-balance { margin:0 28px 8px; padding:12px 16px; border:1px solid var(--line); border-radius:10px; background:var(--rx-panel); }
html[data-reference-system="true"][data-theme] .topup-modal-balance-row { gap:8px 16px; }
html[data-reference-system="true"][data-theme] .topup-modal-balance-amount { font:600 20px/1.2 var(--font-body); letter-spacing:-.025em; }
html[data-reference-system="true"][data-theme] .topup-modal-balance-usage { font:400 12px/1.5 var(--font-body); }
html[data-reference-system="true"][data-theme] .topup-modal-progress { height:3px; margin-top:10px; border:0; }
html[data-reference-system="true"][data-theme] .topup-modal-body { padding:14px 28px 0; background:transparent; overscroll-behavior:contain; }
html[data-reference-system="true"][data-theme] .topup-modal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
html[data-reference-system="true"][data-theme] .topup-pack {
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); grid-template-rows:auto auto 1fr auto auto;
  align-items:start; gap:0 12px; min-height:0; padding:18px; margin:0;
  border:1px solid var(--line); border-radius:12px; background:var(--rx-panel); box-shadow:none;
}
/* Cards never lift on hover; the featured card carries a persistent Agent beam. */
html[data-reference-system="true"][data-theme] .topup-pack:hover { background:var(--rx-panel); border-color:var(--line); transform:none; box-shadow:none; }
/* Reuse the Agent launcher's persistent 1px beam ring over a quiet solid fill.
   --launcher-beam-angle and launcher-beam-spin come from _launcher_mode.css. */
html[data-reference-system="true"][data-theme] .topup-pack--popular,
html[data-reference-system="true"][data-theme] .topup-pack--popular:hover {
  position:relative; isolation:isolate; border-color:transparent;
  --topup-beam-edge:rgba(255,255,255,.2); --topup-beam-highlight:rgba(255,255,255,.8);
  background:color-mix(in srgb,var(--brand) 3%,var(--rx-panel));
  box-shadow:inset 0 0 8px rgba(140,220,60,.08);
}
html[data-reference-system="true"][data-theme="light"] .topup-pack--popular {
  --topup-beam-edge:rgba(0,0,0,.12); --topup-beam-highlight:rgba(0,0,0,.4);
}
html[data-reference-system="true"][data-theme] .topup-pack--popular::after {
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--launcher-beam-angle),transparent 0% 40%,var(--topup-beam-edge) 56%,var(--topup-beam-highlight) 67%,var(--topup-beam-edge) 73%,transparent 80% 100%),conic-gradient(from var(--launcher-beam-angle),rgb(34,197,94),rgb(120,210,50) 25%,rgb(180,228,45) 50%,rgb(120,210,50) 75%,rgb(34,197,94) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  filter:saturate(1.15); pointer-events:none;
}
html[data-reference-system="true"][data-theme] .topup-pack--popular .topup-pack-badge { z-index:1; }
@media(prefers-reduced-motion:no-preference) {
  html[data-reference-system="true"][data-theme] .topup-pack--popular { animation:launcher-beam-spin 6s linear infinite; }
}
@media(forced-colors:active) {
  html[data-reference-system="true"][data-theme] .topup-pack--popular,
  html[data-reference-system="true"][data-theme] .topup-pack--popular:hover { animation:none; background:Canvas; box-shadow:none; border-color:Highlight; }
  html[data-reference-system="true"][data-theme] .topup-pack--popular::after { display:none; }
}
html[data-reference-system="true"][data-theme] .topup-pack-head { grid-column:1 / -1; grid-row:1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 8px; margin:0; }
html[data-reference-system="true"][data-theme] .topup-pack-name { font:600 15px/1.4 var(--font-body); letter-spacing:-.015em; }
html[data-reference-system="true"][data-theme] .topup-pack-discount { font:500 11px/1.4 var(--font-body); letter-spacing:0; text-transform:none; color:var(--success-fg); padding:3px 7px; border:0; border-radius:5px; background:color-mix(in srgb,var(--success-fg) 8%,transparent); }
html[data-reference-system="true"][data-theme] .topup-pack-tagline { grid-column:1 / -1; grid-row:2; margin:5px 0 0; min-height:0; font:400 12px/1.5 var(--font-body); }
html[data-reference-system="true"][data-theme] .topup-pack-badge { position:absolute; top:-9px; left:16px; transform:none; padding:2px 7px; margin:0; background:var(--brand); color:#102016; border:0; border-radius:4px; box-shadow:none; font:650 9px/1.5 var(--font-body); letter-spacing:.035em; }
html[data-reference-system="true"][data-theme] .topup-pack-credits { grid-column:1; grid-row:3; align-self:start; min-height:51px; margin:17px 0; padding:0; gap:2px 5px; }
html[data-reference-system="true"][data-theme] .topup-pack-credits-total { font:600 28px/1.2 var(--font-body); letter-spacing:-.035em; }
html[data-reference-system="true"][data-theme] .topup-pack-credits-unit { font:400 11px/1.4 var(--font-body); letter-spacing:0; }
html[data-reference-system="true"][data-theme] .topup-pack-bonus { display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; margin-top:6px; font:400 11px/1.4 var(--font-body); letter-spacing:0; color:var(--fg-3); }
html[data-reference-system="true"][data-theme] .topup-pack-bonus-highlight { display:inline-flex; flex-shrink:0; padding:2px 6px; border-radius:5px; background:color-mix(in srgb,var(--success-fg) 10%,transparent); color:var(--success-fg); font:600 12px/16px var(--font-body); white-space:nowrap; }
html[data-reference-system="true"][data-theme] .topup-pack-price { grid-column:2; grid-row:3; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; gap:5px; margin:20px 0 17px; }
html[data-reference-system="true"][data-theme] .topup-pack-price-amount { font:600 21px/1.25 var(--font-body); letter-spacing:-.025em; }
html[data-reference-system="true"][data-theme] .topup-pack-price-strike { font:400 12px/1.4 var(--font-body); color:var(--fg-3); }
html[data-reference-system="true"][data-theme] .topup-pack-price-meta { display:block; grid-column:1 / -1; grid-row:4; margin:0 0 12px; color:var(--fg-3); font:400 11px/1.5 var(--font-body); }
html[data-reference-system="true"][data-theme] .topup-modal-panel .topup-pack-buy { grid-column:1 / -1; grid-row:5; align-self:end; margin:0; width:100%; min-height:40px; padding:9px 12px; }
html[data-reference-system="true"][data-theme] .topup-modal-panel .topup-pack-buy:not(.btn-primary) { font:550 14px/20px var(--font-body); border-radius:8px; border:1px solid var(--line-2); background:var(--rx-secondary); color:var(--fg); box-shadow:none; }
html[data-reference-system="true"][data-theme] .topup-modal-panel .topup-pack-buy:not(.btn-primary):hover:not(:disabled) { background:var(--rx-secondary-hover); border-color:var(--line-2); color:var(--fg); box-shadow:none; }
/* The featured purchase uses the shared primary button finish and states. */
html[data-reference-system="true"][data-theme] .topup-modal-panel .topup-pack-buy.btn-primary { background:var(--rx-primary); border-color:var(--rx-primary); color:var(--rx-primary-ink); }
html[data-reference-system="true"][data-theme] .topup-modal-panel .topup-pack-buy:not(.btn-primary):focus-visible { outline:2px solid var(--fg-2); outline-offset:3px; }
html[data-reference-system="true"][data-theme] .topup-modal-panel .topup-pack-buy:disabled { opacity:.5; cursor:not-allowed; }
html[data-reference-system="true"][data-theme] .topup-modal-subnote { margin:0; padding:16px 0; border:0; gap:8px; justify-content:center; flex-wrap:wrap; }
html[data-reference-system="true"][data-theme] :is(.topup-modal-subnote-text,.topup-modal-subnote-link) { font:400 12px/1.5 var(--font-body); }
html[data-reference-system="true"][data-theme] .topup-modal-footer { background:transparent; padding:12px 28px; border-top:1px solid var(--line); }
html[data-reference-system="true"][data-theme] .topup-modal-secure { font:400 11px/1.5 var(--font-body); letter-spacing:0; }
/* Light mode: separate cards with surfaces instead of repeated outlines.
   Retain every offer, the bonus emphasis and the featured card's quiet beam. */
@media(forced-colors:none) {
  html[data-reference-system="true"][data-theme="light"] .topup-modal-panel { background:color-mix(in srgb,var(--rx-panel) 40%,var(--bg-1)); }
  html[data-reference-system="true"][data-theme="light"] .topup-modal-balance { background:transparent; border-color:transparent; }
  html[data-reference-system="true"][data-theme="light"] .topup-modal-progress { background:var(--line); }
  html[data-reference-system="true"][data-theme="light"] .topup-pack,
  html[data-reference-system="true"][data-theme="light"] .topup-pack:hover { background:var(--rx-panel); border-color:transparent; }
  html[data-reference-system="true"][data-theme="light"] .topup-pack--popular,
  html[data-reference-system="true"][data-theme="light"] .topup-pack--popular:hover { background:color-mix(in srgb,var(--brand) 2%,var(--rx-panel)); }
  html[data-reference-system="true"][data-theme="light"] .topup-pack--popular::after { opacity:.6; filter:saturate(.7); }
  html[data-reference-system="true"][data-theme="light"] .topup-pack-discount { background:transparent; color:var(--fg-2); }
  html[data-reference-system="true"][data-theme="light"] .topup-pack-bonus-highlight { background:color-mix(in srgb,var(--ref-brand-soft) 8%,transparent); color:var(--ref-brand-soft); }
  html[data-reference-system="true"][data-theme="light"] .topup-pack-badge { background:color-mix(in srgb,var(--brand) 35%,var(--rx-panel)); }
  html[data-reference-system="true"][data-theme="light"] .topup-modal-panel .topup-pack-buy:not(.topup-pack-buy--primary) { border-color:transparent; }
  html[data-reference-system="true"][data-theme="light"] .topup-modal-panel .topup-pack-buy:not(.topup-pack-buy--primary):hover:not(:disabled) { border-color:transparent; }
  html[data-reference-system="true"][data-theme="light"] .topup-modal-close { border-color:transparent; }
  html[data-reference-system="true"][data-theme="light"] .topup-modal-close:hover { background:var(--rx-secondary-hover); border-color:transparent; }
  html[data-reference-system="true"][data-theme="light"] .topup-modal-footer { border-color:var(--rx-divider); }
}
/* Keep both rows available on laptop-height viewports; overflow stays in the body. */
@media(min-width:1001px) and (max-height:800px) {
  html[data-reference-system="true"][data-theme] .topup-modal-header { padding:16px 28px 12px; }
  html[data-reference-system="true"][data-theme] .topup-modal-balance { padding:10px 14px; }
  html[data-reference-system="true"][data-theme] .topup-modal-body { padding-top:12px; }
  html[data-reference-system="true"][data-theme] .topup-modal-grid { gap:14px; }
  html[data-reference-system="true"][data-theme] .topup-pack { padding:16px; }
  html[data-reference-system="true"][data-theme] .topup-pack-credits { margin:12px 0; }
  html[data-reference-system="true"][data-theme] .topup-pack-price { margin:15px 0 12px; }
  html[data-reference-system="true"][data-theme] .topup-modal-subnote { padding:10px 0; }
}
@media(max-width:1000px) {
  html[data-reference-system="true"][data-theme] .topup-modal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  html[data-reference-system="true"][data-theme] [data-credit-topup-modal-target="modal"] > .relative { padding:12px; }
  html[data-reference-system="true"][data-theme] .topup-modal-panel { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); border-radius:16px; }
  html[data-reference-system="true"][data-theme] .topup-modal-header { padding:20px 60px 16px 16px; }
  html[data-reference-system="true"][data-theme] .topup-modal-title { font-size:24px; }
  html[data-reference-system="true"][data-theme] .topup-modal-header-actions { flex-shrink:1; }
  html[data-reference-system="true"][data-theme] .topup-modal-close { width:44px; height:44px; top:12px; right:12px; }
  html[data-reference-system="true"][data-theme] .topup-modal-balance { margin:0 16px 8px; padding:12px; }
  html[data-reference-system="true"][data-theme] .topup-modal-balance-usage { font-size:11px; }
  html[data-reference-system="true"][data-theme] .topup-modal-body { padding:12px 16px 0; }
  html[data-reference-system="true"][data-theme] .topup-modal-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  html[data-reference-system="true"][data-theme] .topup-pack { padding:16px; }
  html[data-reference-system="true"][data-theme] .topup-modal-panel .topup-pack-buy { min-height:44px; }
  html[data-reference-system="true"][data-theme] .topup-modal-subnote { justify-content:flex-start; gap:4px; }
  html[data-reference-system="true"][data-theme] .topup-modal-footer { padding:8px 16px; gap:8px; }
  html[data-reference-system="true"][data-theme] .topup-modal-cancel { min-height:44px; padding:10px 8px; font-size:13px; }
}
@media(forced-colors:active) {
  html[data-reference-system="true"][data-theme] .topup-pack-badge { forced-color-adjust:auto; border:1px solid CanvasText; }
  html[data-reference-system="true"][data-theme] .topup-pack--popular { border-color:Highlight; }
}
/* Overskill Reference Lab snapshot, 2026-09-25. Source: _september_refinements.html.erb.
 * CSS only; source application controllers and behavior remain authoritative. */
html[data-reference-system="true"] .ref-composer-fixture .nah-add-pop { top:calc(100% + 8px)!important; bottom:auto!important; }
html[data-reference-system="true"] .ref-composer-fixture .aref-pop.is-anchored { top:12px!important; bottom:auto!important; max-height:calc(100vh - 24px); overflow-y:auto; }
html[data-reference-system="true"] .ref-agent-tools { display:flex; align-items:center; gap:8px; min-width:0; }
html[data-reference-system="true"] .composer--agent .composer-toolbar { flex-wrap:wrap; gap:8px; }
/* Reference Lab refinements: component roles remain distinct and source behavior stays intact. */
html[data-reference-system="true"][data-theme="dark"] { --ref-selection-ink:var(--ref-gradient-green); }
html[data-reference-system="true"][data-theme="light"] { --rx-primary:#17191C; --rx-primary-hover:#000000; --ref-selection-ink:var(--success-fg); }
html[data-reference-system="true"][data-theme] { --ref-selection-gradient:linear-gradient(110deg,var(--ref-gradient-lime),var(--ref-gradient-green) 55%,var(--ref-gradient-mint)); --ref-selection-glyph:#102016; }
.reference-layout #brand > .sg-grid { align-items:stretch; }
.reference-layout #brand > .sg-grid > .sg-card { padding:24px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.reference-layout #brand > .sg-grid h3 { margin:0; min-height:40px; font:500 13px/20px var(--font-body); }
.reference-layout #brand > .sg-grid :is(.sg-stack,.sg-row) { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:24px; min-height:64px; margin:0; }
.reference-layout #brand .brand-mark { margin:0; }
.reference-layout #brand > .sg-grid .sg-stack > * { margin:0; }
.reference-layout .rx-prism .rx-prism-button { border:0; box-shadow:none; }
.reference-layout .rx-prism-shell::before { display:none; }
.reference-layout .rx-prism .rx-prism-button:is(:hover,:focus-visible):not(:disabled) { border:0; box-shadow:none; }
.reference-layout .seg-btn:is([aria-selected="true"],[aria-checked="true"]) { color:var(--ref-selection-ink)!important; }
.reference-layout .seg { padding:4px; }
.reference-layout #segmented .seg.fill { width:100%; }
.reference-layout .seg-thumb { top:4px; bottom:4px; background:var(--ref-segment-selected); box-shadow:0 0 0 1px var(--line); }
.reference-layout :is(input.checkbox,input.radio):checked { background:var(--ref-selection-gradient)!important; border-color:var(--ref-selection-ink)!important; }
.reference-layout input.checkbox:checked::after { border-color:var(--ref-selection-glyph); }
.reference-layout input.radio:checked::after { background:var(--ref-selection-glyph); }
.reference-layout .suggest-cards { gap:10px; }
.reference-layout .suggest-card { padding:14px 16px; background:var(--ref-suggestion-bg)!important; border:1px solid var(--line)!important; border-radius:10px; transition:background-color 150ms ease,border-color 150ms ease; }
.reference-layout .suggest-card:hover { background:var(--ref-suggestion-hover)!important; border-color:var(--line-2)!important; transform:none; }
.reference-layout .suggest-card .suggest-card-title { font:500 13px/1.45 var(--font-body); }
.reference-layout .suggest-card .suggest-card-desc { font:400 12px/1.55 var(--font-body); }
.reference-layout :is(.suggest-toggle,.suggest-count) { font-family:var(--font-body); letter-spacing:normal; text-transform:none; }
.reference-layout .suggest-nav { width:30px; height:30px; }
.reference-layout .nav-actions { gap:12px; }
.reference-layout .nav-actions .ds-appearance { padding:0; gap:0; width:auto; }
.reference-layout .nav-actions .ds-appearance__label { display:none; }
.reference-layout .nav-actions .btn-link { padding:10px 16px; min-height:40px; border-radius:8px; text-decoration:none; background:transparent; }
.reference-layout .nav-actions .btn-link:hover { background:var(--rx-secondary-hover); }
.reference-layout #computer-messages .sg-card { padding:24px; }
.reference-layout #computer-messages .sg-card + .sg-subhead { margin-top:32px; }
.reference-layout #computer-messages .computer-msg + .computer-msg { margin-top:28px; }
.reference-layout #computer-messages .computer-msg__bubble { padding:12px 16px; line-height:1.6; }
.reference-layout #computer-messages .computer-msg__bubble p { margin:0; }
.reference-layout #computer-messages .computer-msg__attachments { margin-top:12px; gap:10px; }
html[data-reference-system="true"][data-theme] .ref-thinking-slider[data-thinking-effort-target="menu"] { width:296px; padding:14px 16px; border-radius:12px; }
html[data-reference-system="true"][data-theme] .ref-thinking-slider :is(.think-menu__head,.composer-menu-head) { margin-bottom:8px; font-size:13px; }
html[data-reference-system="true"][data-theme] .ref-thinking-current { margin-top:8px; min-height:0; font-size:12px; white-space:nowrap; }
html[data-reference-system="true"][data-theme] input.ref-thinking-range { --thinking-gradient:var(--ref-selection-gradient); }
html[data-reference-system="true"][data-theme] .ref-thinking-range::-webkit-slider-thumb { width:18px; height:18px; }
html[data-reference-system="true"][data-theme] .ref-thinking-range::-moz-range-thumb { width:18px; height:18px; }
@media(max-width:640px) {
 .reference-layout .suggest-nav { width:44px; height:44px; }
 .reference-layout .suggest-cards { grid-template-columns:1fr; }
 .reference-layout .suggest-card .suggest-card-title { white-space:normal; overflow:visible; -webkit-line-clamp:unset; }
 .reference-layout .suggest-card .suggest-card-desc { -webkit-line-clamp:unset; }
 .reference-layout #brand > .sg-grid > .sg-card { gap:12px; padding:20px; }
 .reference-layout #brand > .sg-grid h3 { min-height:0; }
 html[data-reference-system="true"][data-theme] .composer-popover.ref-thinking-slider[data-thinking-effort-target="menu"] { width:auto; padding:28px 18px 16px; }
}


html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] { width:320px; padding:6px; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-head { padding:8px 12px; margin:0; font-size:12px; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-list { max-height:300px; overflow-y:auto; padding:0; scrollbar-gutter:stable; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-item { padding:10px 12px; gap:12px; align-items:center; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-title { font-size:13px; line-height:18px; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-desc { margin:3px 0 0; font-size:12px; line-height:17px; display:block; white-space:normal; overflow:visible; text-overflow:clip; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-check { flex:0 0 16px; width:16px; height:16px; margin:0; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-check.hidden { display:block!important; visibility:hidden; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-item:hover { background:var(--rx-overlay-hover)!important; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-item.is-selected { background:var(--rx-overlay-selected)!important; }
html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-item.is-selected .composer-menu-check { color:var(--ref-selection-ink)!important; background:transparent!important; }
@media(max-width:640px) { html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] { width:auto; padding:28px 8px 12px; } }

html[data-reference-system="true"][data-theme] [data-model-selector-target="menu"] .composer-menu-item.is-selected:hover { background:var(--rx-overlay-selected-hover)!important; }

/* Distinct interaction roles: hover is quiet; keyboard focus keeps a clear edge. */
html[data-reference-system="true"][data-theme] :where(.input,.textarea,.select,.search-input,.combo,#reference-search,[data-rc-source-query]):focus-visible:not([aria-invalid="true"]):not([readonly]):not(:disabled) { border-color:var(--ref-field-focus-visible)!important; }
html[data-reference-system="true"][data-theme] :is(.btn,.icon-btn,.seg-btn,.composer-tool,.rx-button,.rx-icon,.suggest-card):focus-visible { outline:2px solid var(--ref-keyboard-focus); outline-offset:2px; }


/* Prompt chips keep an opaque fill on hover so the parent cannot show through. */
html[data-reference-system="true"][data-theme] .starter-chip { --ref-prompt-rest:var(--bg-1); background:var(--ref-prompt-rest); }
html[data-reference-system="true"][data-theme] .starter-tile { --ref-prompt-rest:var(--bg-2); background:var(--ref-prompt-rest); }
html[data-reference-system="true"][data-theme] :is(.starter-chip,.starter-tile):hover { background:color-mix(in srgb,var(--ref-prompt-rest) 97%,var(--fg)); border-color:var(--line); color:var(--fg-2); transform:none; }
html[data-reference-system="true"][data-theme] .starter-tile:hover .starter-tile-icon { color:inherit; }
html[data-reference-system="true"][data-theme] :is(.starter-chip,.starter-tile):active { background:color-mix(in srgb,var(--ref-prompt-rest) 95%,var(--fg)); transform:none; }
html[data-reference-system="true"][data-theme] :is(.starter-chip,.starter-tile):focus-visible { outline:2px solid var(--ref-keyboard-focus); outline-offset:2px; }
/* Overskill Reference Lab snapshot, 2026-09-25. Source: _button_depth_styles.html.erb.
 * CSS only; source application controllers and behavior remain authoritative. */
/* Local reference finish: primary shading, flat secondary fills and quiet
   color-only hover. Prism keeps its own background and shape. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] {
 --ref-button-light-depth:0 1px 2px rgb(0 0 0 / 8%);
 --ref-button-light-depth-hover:0 1px 2px rgb(0 0 0 / 10%);
 --ref-button-secondary-depth:none;
 --ref-button-secondary-depth-hover:none;
 --ref-button-radius:10px; --ref-button-radius-small:9px;
 --ref-button-primary-gradient:linear-gradient(180deg,rgb(255 255 255 / 7%),rgb(0 0 0 / 10%));
 --ref-button-primary-gradient-hover:linear-gradient(180deg,rgb(255 255 255 / 9%),rgb(0 0 0 / 12%));
 --ref-button-secondary-gradient:none;
 --ref-button-secondary-gradient-hover:none;
 --ref-button-primary-hover:color-mix(in srgb,var(--rx-primary) 86%,var(--rx-primary-ink));
 --ref-button-secondary-hover:color-mix(in srgb,var(--fg) 8%,var(--bg-2));
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme="dark"] {
 --ref-button-secondary-depth:none;
 --ref-button-secondary-depth-hover:none;
 /* Keep a visible neutral ramp even when hover raises the base to white.
    Current dark primary: about #EFEFEF → #C8C8C8; hover #FFFFFF → #DEDEDE. */
 --ref-button-primary-gradient:linear-gradient(180deg,rgb(255 255 255 / 50%),rgb(0 0 0 / 10%));
 --ref-button-primary-gradient-hover:linear-gradient(180deg,rgb(255 255 255 / 60%),rgb(0 0 0 / 13%));
 --ref-button-secondary-gradient:none;
 --ref-button-secondary-gradient-hover:none;
 --ref-button-primary-hover:var(--rx-send);
 --ref-button-secondary-hover:color-mix(in srgb,var(--fg) 10%,var(--bg-2));
}
/* Radius is stable across all states and never reaches icon or Prism controls. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn:is(.btn-primary,.btn-light,.btn-secondary):not(.rx-prism-action,.icon-btn,.btn-icon) { border-radius:var(--ref-button-radius); }
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn.btn-sm:is(.btn-primary,.btn-light,.btn-secondary):not(.rx-prism-action,.icon-btn,.btn-icon) { border-radius:var(--ref-button-radius-small); }
/* Override only the image channel; existing tokens still own the base color. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn.btn-primary:not(.rx-prism-action,.icon-btn,.btn-icon):not(:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading,:active,[aria-pressed="true"],:focus-visible) { background-image:var(--ref-button-primary-gradient)!important; }
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn:is(.btn-light,.btn-secondary):not(.rx-prism-action,.icon-btn,.btn-icon):not(:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading,:active,[aria-pressed="true"],:focus-visible) { background-image:var(--ref-button-secondary-gradient)!important; }
/* Secondary borders stay fixed; padding-box prevents the changing fill from
   tinting their translucent edge. Focus rings and pressed fills remain owned
   by the existing state rules. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn:is(.btn-light,.btn-secondary):not(.rx-prism-action,.icon-btn,.btn-icon) {
 background-image:none!important; background-clip:padding-box;
 transition:background-color 160ms ease,color 160ms ease;
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn:is(.btn-light,.btn-secondary):not(.rx-prism-action,.icon-btn,.btn-icon,:focus-visible,:active,[aria-pressed="true"]) {
 border-color:var(--line-2)!important;
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn:is(.btn-light,.btn-secondary):not(.rx-prism-action,.icon-btn,.btn-icon,:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading,:active,[aria-pressed="true"],:focus-visible) {
 background-color:var(--rx-secondary)!important;
}
@media(prefers-reduced-motion:reduce) {
 html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn:is(.btn-light,.btn-secondary):not(.rx-prism-action,.icon-btn,.btn-icon) { transition:none; }
}
/* Standard primary and Publish fills are light only in dark mode. Excluding
   active/focus/disabled states preserves their existing feedback and rings. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme="dark"] :is(.btn.btn-primary,.rx-prism-action):not(.icon-btn,.btn-icon,:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading,:active,[aria-pressed="true"],:focus-visible),
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .rx-prism-light .rx-prism-button:not(:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading,:active,[aria-pressed="true"],:focus-visible) {
 box-shadow:var(--ref-button-light-depth);
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn:is(.btn-secondary,.btn-light):not(.icon-btn,.btn-icon,:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading,:active,[aria-pressed="true"],:focus-visible) {
 box-shadow:var(--ref-button-secondary-depth);
}
/* The inert specimen marker uses the same finish as real pointer hover.
   !important only bridges shipped primary hover rules and specimen inline fills. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn.btn-primary:not(.rx-prism-action):is(:hover,.ref-hover-preview):not(.icon-btn,.btn-icon,:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading,:active,[aria-pressed="true"],:focus-visible) {
 background:var(--ref-button-primary-gradient-hover) var(--ref-button-primary-hover)!important; border-color:var(--ref-button-primary-hover)!important;
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn:is(.btn-secondary,.btn-light):is(:hover,.ref-hover-preview):not(.icon-btn,.btn-icon,:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading,:active,[aria-pressed="true"],:focus-visible) {
 background-color:var(--ref-button-secondary-hover)!important; background-image:none!important; border-color:var(--line-2)!important;
 box-shadow:var(--ref-button-secondary-depth-hover);
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme="dark"] :is(.btn.btn-primary,.rx-prism-action):is(:hover,.ref-hover-preview):not(.icon-btn,.btn-icon,:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading,:active,[aria-pressed="true"],:focus-visible),
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .rx-prism-light .rx-prism-button:is(:hover,.ref-hover-preview):not(.icon-btn,.btn-icon,:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading,:active,[aria-pressed="true"],:focus-visible) {
 box-shadow:var(--ref-button-light-depth-hover);
}
/* System focus/contrast colors stay authoritative; no new motion is introduced. */
@media(forced-colors:active) {
 html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] {
  --ref-button-light-depth:none; --ref-button-light-depth-hover:none;
  --ref-button-secondary-depth:none; --ref-button-secondary-depth-hover:none;
  --ref-button-primary-gradient:none; --ref-button-primary-gradient-hover:none;
  --ref-button-secondary-gradient:none; --ref-button-secondary-gradient-hover:none;
  --ref-button-primary-hover:Highlight; --ref-button-secondary-hover:Highlight;
 }
 html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .btn:is(.btn-primary,.btn-light,.btn-secondary):not(.rx-prism-action):is(:hover,.ref-hover-preview):not(.icon-btn,.btn-icon,:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading,:active,[aria-pressed="true"],:focus-visible) {
  forced-color-adjust:auto; color:HighlightText!important; border-color:Highlight!important;
 }
}
/* Legacy platform utilities: bridge neutral paint to the Reference Lab while
 * preserving semantic status colors, customer artwork, spacing and behavior.
 * Only explicitly opted-in platform chrome participates; customer auth does not. */
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-white { background-color:var(--bg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-gray-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-slate-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-zinc-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-neutral-50 { background-color:var(--bg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-gray-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-slate-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-zinc-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-neutral-100 { background-color:var(--bg-1); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-gray-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-slate-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-zinc-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-neutral-200 { background-color:var(--bg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-gray-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-slate-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-zinc-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-neutral-300 { background-color:var(--bg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-gray-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-slate-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-zinc-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-neutral-400 { background-color:var(--fg-4); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-gray-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-slate-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-zinc-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .bg-neutral-500 { background-color:var(--fg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-gray-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-gray-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-slate-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-slate-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-zinc-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-zinc-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-neutral-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-neutral-600 { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-gray-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-gray-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-slate-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-slate-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-zinc-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-zinc-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-neutral-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-neutral-700 { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-gray-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-gray-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-slate-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-slate-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-zinc-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-zinc-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-neutral-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-neutral-800 { background-color:var(--bg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-gray-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-gray-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-slate-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-slate-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-zinc-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-zinc-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-neutral-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-neutral-900 { background-color:var(--bg-1); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-gray-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-gray-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-slate-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-slate-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-zinc-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-zinc-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .bg-neutral-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .bg-neutral-950 { background-color:var(--bg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-gray-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-gray-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-slate-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-slate-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-zinc-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-zinc-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-neutral-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-neutral-50 { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-gray-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-gray-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-slate-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-slate-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-zinc-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-zinc-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-neutral-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-neutral-100 { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-gray-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-gray-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-slate-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-slate-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-zinc-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-zinc-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-neutral-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-neutral-200 { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-gray-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-gray-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-slate-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-slate-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-zinc-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-zinc-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-neutral-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-neutral-300 { color:var(--fg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-gray-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-gray-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-slate-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-slate-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-zinc-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-zinc-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .text-neutral-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .text-neutral-400 { color:var(--fg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-gray-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-slate-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-zinc-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-neutral-500 { color:var(--fg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-gray-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-slate-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-zinc-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-neutral-600 { color:var(--fg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-gray-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-slate-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-zinc-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-neutral-700 { color:var(--fg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-gray-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-slate-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-zinc-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-neutral-800 { color:var(--fg); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-gray-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-slate-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-zinc-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-neutral-900 { color:var(--fg); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-gray-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-slate-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-zinc-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .text-neutral-950 { color:var(--fg); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-gray-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-slate-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-zinc-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-neutral-50 { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-gray-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-slate-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-zinc-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-neutral-100 { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-gray-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-slate-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-zinc-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-neutral-200 { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-gray-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-slate-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-zinc-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-neutral-300 { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-gray-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-slate-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-zinc-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-neutral-400 { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-gray-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-slate-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-zinc-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-neutral-500 { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-gray-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-slate-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-zinc-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-neutral-600 { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-gray-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-slate-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-zinc-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-neutral-700 { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-gray-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-slate-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-zinc-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-neutral-800 { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-gray-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-slate-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-zinc-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .border-neutral-900 { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-white:hover { background-color:var(--bg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-gray-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-slate-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-zinc-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-neutral-50:hover { background-color:var(--bg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-gray-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-slate-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-zinc-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-neutral-100:hover { background-color:var(--bg-1); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-gray-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-slate-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-zinc-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-neutral-200:hover { background-color:var(--bg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-gray-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-slate-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-zinc-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-neutral-300:hover { background-color:var(--bg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-gray-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-slate-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-zinc-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-neutral-400:hover { background-color:var(--fg-4); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-gray-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-slate-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-zinc-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:bg-neutral-500:hover { background-color:var(--fg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-gray-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-gray-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-slate-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-slate-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-zinc-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-zinc-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-neutral-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-neutral-600:hover { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-gray-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-gray-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-slate-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-slate-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-zinc-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-zinc-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-neutral-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-neutral-700:hover { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-gray-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-gray-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-slate-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-slate-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-zinc-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-zinc-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-neutral-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-neutral-800:hover { background-color:var(--bg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-gray-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-gray-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-slate-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-slate-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-zinc-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-zinc-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-neutral-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-neutral-900:hover { background-color:var(--bg-1); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-gray-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-gray-950:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-slate-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-slate-950:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-zinc-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-zinc-950:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:bg-neutral-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:bg-neutral-950:hover { background-color:var(--bg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-gray-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-gray-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-slate-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-slate-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-zinc-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-zinc-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-neutral-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-neutral-50:hover { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-gray-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-gray-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-slate-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-slate-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-zinc-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-zinc-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-neutral-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-neutral-100:hover { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-gray-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-gray-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-slate-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-slate-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-zinc-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-zinc-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-neutral-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-neutral-200:hover { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-gray-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-gray-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-slate-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-slate-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-zinc-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-zinc-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-neutral-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-neutral-300:hover { color:var(--fg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-gray-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-gray-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-slate-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-slate-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-zinc-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-zinc-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .hover\:text-neutral-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .hover\:text-neutral-400:hover { color:var(--fg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-gray-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-slate-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-zinc-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-neutral-500:hover { color:var(--fg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-gray-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-slate-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-zinc-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-neutral-600:hover { color:var(--fg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-gray-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-slate-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-zinc-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-neutral-700:hover { color:var(--fg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-gray-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-slate-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-zinc-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-neutral-800:hover { color:var(--fg); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-gray-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-slate-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-zinc-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-neutral-900:hover { color:var(--fg); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-gray-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-slate-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-zinc-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:text-neutral-950:hover { color:var(--fg); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-gray-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-slate-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-zinc-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-neutral-50:hover { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-gray-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-slate-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-zinc-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-neutral-100:hover { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-gray-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-slate-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-zinc-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-neutral-200:hover { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-gray-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-slate-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-zinc-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-neutral-300:hover { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-gray-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-slate-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-zinc-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-neutral-400:hover { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-gray-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-slate-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-zinc-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-neutral-500:hover { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-gray-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-slate-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-zinc-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-neutral-600:hover { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-gray-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-slate-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-zinc-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-neutral-700:hover { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-gray-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-slate-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-zinc-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-neutral-800:hover { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-gray-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-slate-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-zinc-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .hover\:border-neutral-900:hover { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-white:focus-visible { background-color:var(--bg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-gray-50:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-slate-50:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-zinc-50:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-neutral-50:focus-visible { background-color:var(--bg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-gray-100:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-slate-100:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-zinc-100:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-neutral-100:focus-visible { background-color:var(--bg-1); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-gray-200:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-slate-200:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-zinc-200:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-neutral-200:focus-visible { background-color:var(--bg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-gray-300:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-slate-300:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-zinc-300:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-neutral-300:focus-visible { background-color:var(--bg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-gray-400:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-slate-400:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-zinc-400:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-neutral-400:focus-visible { background-color:var(--fg-4); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-gray-500:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-slate-500:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-zinc-500:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:bg-neutral-500:focus-visible { background-color:var(--fg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-gray-600:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-gray-600:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-slate-600:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-slate-600:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-zinc-600:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-zinc-600:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-neutral-600:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-neutral-600:focus-visible { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-gray-700:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-gray-700:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-slate-700:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-slate-700:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-zinc-700:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-zinc-700:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-neutral-700:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-neutral-700:focus-visible { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-gray-800:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-gray-800:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-slate-800:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-slate-800:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-zinc-800:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-zinc-800:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-neutral-800:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-neutral-800:focus-visible { background-color:var(--bg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-gray-900:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-gray-900:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-slate-900:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-slate-900:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-zinc-900:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-zinc-900:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-neutral-900:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-neutral-900:focus-visible { background-color:var(--bg-1); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-gray-950:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-gray-950:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-slate-950:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-slate-950:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-zinc-950:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-zinc-950:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:bg-neutral-950:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:bg-neutral-950:focus-visible { background-color:var(--bg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-gray-50:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-gray-50:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-slate-50:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-slate-50:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-zinc-50:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-zinc-50:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-neutral-50:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-neutral-50:focus-visible { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-gray-100:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-gray-100:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-slate-100:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-slate-100:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-zinc-100:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-zinc-100:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-neutral-100:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-neutral-100:focus-visible { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-gray-200:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-gray-200:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-slate-200:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-slate-200:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-zinc-200:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-zinc-200:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-neutral-200:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-neutral-200:focus-visible { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-gray-300:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-gray-300:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-slate-300:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-slate-300:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-zinc-300:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-zinc-300:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-neutral-300:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-neutral-300:focus-visible { color:var(--fg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-gray-400:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-gray-400:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-slate-400:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-slate-400:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-zinc-400:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-zinc-400:focus-visible,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .focus-visible\:text-neutral-400:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .focus-visible\:text-neutral-400:focus-visible { color:var(--fg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-gray-500:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-slate-500:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-zinc-500:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-neutral-500:focus-visible { color:var(--fg-3); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-gray-600:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-slate-600:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-zinc-600:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-neutral-600:focus-visible { color:var(--fg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-gray-700:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-slate-700:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-zinc-700:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-neutral-700:focus-visible { color:var(--fg-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-gray-800:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-slate-800:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-zinc-800:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-neutral-800:focus-visible { color:var(--fg); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-gray-900:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-slate-900:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-zinc-900:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-neutral-900:focus-visible { color:var(--fg); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-gray-950:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-slate-950:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-zinc-950:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:text-neutral-950:focus-visible { color:var(--fg); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-gray-50:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-slate-50:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-zinc-50:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-neutral-50:focus-visible { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-gray-100:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-slate-100:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-zinc-100:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-neutral-100:focus-visible { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-gray-200:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-slate-200:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-zinc-200:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-neutral-200:focus-visible { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-gray-300:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-slate-300:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-zinc-300:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-neutral-300:focus-visible { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-gray-400:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-slate-400:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-zinc-400:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-neutral-400:focus-visible { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-gray-500:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-slate-500:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-zinc-500:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-neutral-500:focus-visible { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-gray-600:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-slate-600:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-zinc-600:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-neutral-600:focus-visible { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-gray-700:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-slate-700:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-zinc-700:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-neutral-700:focus-visible { border-color:var(--line-2); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-gray-800:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-slate-800:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-zinc-800:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-neutral-800:focus-visible { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-gray-900:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-slate-900:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-zinc-900:focus-visible,
html[data-reference-system="true"] body[data-reference-legacy="true"] .focus-visible\:border-neutral-900:focus-visible { border-color:var(--line); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-white,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-white { background-color:var(--bg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-gray-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-gray-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-slate-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-slate-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-zinc-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-zinc-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-neutral-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-neutral-50 { background-color:var(--bg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-gray-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-gray-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-slate-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-slate-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-zinc-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-zinc-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-neutral-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-neutral-100 { background-color:var(--bg-1); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-gray-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-gray-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-slate-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-slate-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-zinc-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-zinc-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-neutral-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-neutral-200 { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-gray-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-gray-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-slate-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-slate-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-zinc-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-zinc-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-neutral-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-neutral-300 { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-gray-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-gray-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-slate-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-slate-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-zinc-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-zinc-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-neutral-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-neutral-400 { background-color:var(--fg-4); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-gray-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-gray-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-slate-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-slate-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-zinc-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-zinc-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-neutral-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-neutral-500 { background-color:var(--fg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-gray-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-gray-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-slate-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-slate-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-zinc-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-zinc-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-neutral-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-neutral-600 { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-gray-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-gray-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-slate-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-slate-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-zinc-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-zinc-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-neutral-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-neutral-700 { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-gray-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-gray-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-slate-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-slate-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-zinc-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-zinc-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-neutral-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-neutral-800 { background-color:var(--bg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-gray-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-gray-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-slate-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-slate-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-zinc-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-zinc-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-neutral-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-neutral-900 { background-color:var(--bg-1); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-gray-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-gray-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-slate-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-slate-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-zinc-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-zinc-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:bg-neutral-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:bg-neutral-950 { background-color:var(--bg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-gray-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-gray-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-slate-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-slate-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-zinc-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-zinc-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-neutral-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-neutral-50 { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-gray-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-gray-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-slate-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-slate-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-zinc-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-zinc-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-neutral-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-neutral-100 { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-gray-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-gray-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-slate-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-slate-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-zinc-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-zinc-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-neutral-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-neutral-200 { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-gray-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-gray-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-slate-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-slate-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-zinc-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-zinc-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-neutral-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-neutral-300 { color:var(--fg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-gray-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-gray-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-slate-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-slate-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-zinc-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-zinc-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-neutral-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-neutral-400 { color:var(--fg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-gray-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-gray-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-slate-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-slate-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-zinc-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-zinc-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-neutral-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-neutral-500 { color:var(--fg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-gray-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-gray-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-slate-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-slate-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-zinc-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-zinc-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-neutral-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-neutral-600 { color:var(--fg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-gray-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-gray-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-slate-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-slate-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-zinc-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-zinc-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-neutral-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-neutral-700 { color:var(--fg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-gray-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-gray-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-slate-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-slate-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-zinc-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-zinc-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-neutral-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-neutral-800 { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-gray-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-gray-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-slate-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-slate-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-zinc-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-zinc-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-neutral-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-neutral-900 { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-gray-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-gray-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-slate-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-slate-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-zinc-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-zinc-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:text-neutral-950,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-neutral-950 { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-gray-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-gray-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-slate-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-slate-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-zinc-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-zinc-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-neutral-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-neutral-50 { border-color:var(--line); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-gray-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-gray-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-slate-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-slate-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-zinc-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-zinc-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-neutral-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-neutral-100 { border-color:var(--line); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-gray-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-gray-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-slate-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-slate-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-zinc-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-zinc-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-neutral-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-neutral-200 { border-color:var(--line); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-gray-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-gray-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-slate-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-slate-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-zinc-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-zinc-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-neutral-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-neutral-300 { border-color:var(--line-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-gray-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-gray-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-slate-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-slate-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-zinc-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-zinc-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-neutral-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-neutral-400 { border-color:var(--line-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-gray-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-gray-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-slate-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-slate-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-zinc-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-zinc-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-neutral-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-neutral-500 { border-color:var(--line-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-gray-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-gray-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-slate-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-slate-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-zinc-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-zinc-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-neutral-600,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-neutral-600 { border-color:var(--line-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-gray-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-gray-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-slate-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-slate-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-zinc-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-zinc-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-neutral-700,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-neutral-700 { border-color:var(--line-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-gray-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-gray-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-slate-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-slate-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-zinc-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-zinc-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-neutral-800,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-neutral-800 { border-color:var(--line); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-gray-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-gray-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-slate-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-slate-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-zinc-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-zinc-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:border-neutral-900,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:border-neutral-900 { border-color:var(--line); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-white:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-white:hover { background-color:var(--bg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-gray-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-gray-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-slate-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-slate-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-zinc-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-zinc-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-neutral-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-neutral-50:hover { background-color:var(--bg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-gray-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-gray-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-slate-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-slate-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-zinc-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-zinc-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-neutral-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-neutral-100:hover { background-color:var(--bg-1); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-gray-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-gray-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-slate-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-slate-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-zinc-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-zinc-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-neutral-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-neutral-200:hover { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-gray-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-gray-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-slate-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-slate-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-zinc-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-zinc-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-neutral-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-neutral-300:hover { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-gray-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-gray-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-slate-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-slate-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-zinc-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-zinc-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-neutral-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-neutral-400:hover { background-color:var(--fg-4); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-gray-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-gray-500:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-slate-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-slate-500:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-zinc-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-zinc-500:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-neutral-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-neutral-500:hover { background-color:var(--fg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-gray-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-gray-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-slate-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-slate-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-zinc-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-zinc-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-neutral-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-neutral-600:hover { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-gray-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-gray-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-slate-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-slate-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-zinc-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-zinc-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-neutral-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-neutral-700:hover { background-color:var(--bg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-gray-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-gray-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-slate-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-slate-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-zinc-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-zinc-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-neutral-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-neutral-800:hover { background-color:var(--bg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-gray-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-gray-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-slate-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-slate-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-zinc-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-zinc-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-neutral-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-neutral-900:hover { background-color:var(--bg-1); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-gray-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-gray-950:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-slate-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-slate-950:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-zinc-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-zinc-950:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:bg-neutral-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:bg-neutral-950:hover { background-color:var(--bg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-gray-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-gray-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-slate-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-slate-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-zinc-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-zinc-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-neutral-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-neutral-50:hover { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-gray-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-gray-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-slate-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-slate-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-zinc-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-zinc-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-neutral-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-neutral-100:hover { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-gray-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-gray-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-slate-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-slate-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-zinc-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-zinc-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-neutral-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-neutral-200:hover { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-gray-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-gray-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-slate-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-slate-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-zinc-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-zinc-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-neutral-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-neutral-300:hover { color:var(--fg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-gray-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-gray-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-slate-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-slate-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-zinc-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-zinc-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-neutral-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-neutral-400:hover { color:var(--fg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-gray-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-gray-500:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-slate-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-slate-500:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-zinc-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-zinc-500:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-neutral-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-neutral-500:hover { color:var(--fg-3); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-gray-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-gray-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-slate-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-slate-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-zinc-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-zinc-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-neutral-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-neutral-600:hover { color:var(--fg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-gray-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-gray-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-slate-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-slate-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-zinc-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-zinc-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-neutral-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-neutral-700:hover { color:var(--fg-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-gray-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-gray-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-slate-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-slate-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-zinc-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-zinc-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-neutral-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-neutral-800:hover { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-gray-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-gray-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-slate-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-slate-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-zinc-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-zinc-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-neutral-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-neutral-900:hover { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-gray-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-gray-950:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-slate-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-slate-950:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-zinc-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-zinc-950:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:text-neutral-950:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:text-neutral-950:hover { color:var(--fg); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-gray-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-gray-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-slate-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-slate-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-zinc-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-zinc-50:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-neutral-50:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-neutral-50:hover { border-color:var(--line); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-gray-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-gray-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-slate-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-slate-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-zinc-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-zinc-100:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-neutral-100:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-neutral-100:hover { border-color:var(--line); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-gray-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-gray-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-slate-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-slate-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-zinc-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-zinc-200:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-neutral-200:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-neutral-200:hover { border-color:var(--line); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-gray-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-gray-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-slate-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-slate-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-zinc-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-zinc-300:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-neutral-300:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-neutral-300:hover { border-color:var(--line-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-gray-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-gray-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-slate-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-slate-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-zinc-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-zinc-400:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-neutral-400:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-neutral-400:hover { border-color:var(--line-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-gray-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-gray-500:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-slate-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-slate-500:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-zinc-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-zinc-500:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-neutral-500:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-neutral-500:hover { border-color:var(--line-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-gray-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-gray-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-slate-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-slate-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-zinc-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-zinc-600:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-neutral-600:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-neutral-600:hover { border-color:var(--line-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-gray-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-gray-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-slate-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-slate-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-zinc-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-zinc-700:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-neutral-700:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-neutral-700:hover { border-color:var(--line-2); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-gray-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-gray-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-slate-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-slate-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-zinc-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-zinc-800:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-neutral-800:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-neutral-800:hover { border-color:var(--line); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-gray-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-gray-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-slate-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-slate-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-zinc-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-zinc-900:hover,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:hover\:border-neutral-900:hover,
html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:hover\:border-neutral-900:hover { border-color:var(--line); }
html[data-reference-system="true"][data-theme=dark] body[data-reference-legacy="true"] .dark\:text-white, html[data-reference-system="true"] body[data-reference-legacy="true"] .admin-shell .dark\:text-white { color:var(--fg); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-gray-600 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-slate-300 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-slate-600 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-slate-700 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-zinc-100 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-zinc-200 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-zinc-300 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-zinc-600 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-zinc-700 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-zinc-800 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-neutral-100 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-neutral-300 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-neutral-600 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-neutral-700 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .divide-neutral-800 > :not([hidden]) ~ :not([hidden]) { border-color:var(--line); }
html[data-reference-system="true"] body[data-reference-legacy="true"] :is(.shadow,.shadow-sm,.shadow-md):not([role="dialog"],.dropdown-menu) { box-shadow:var(--rx-panel-shadow); }

/* Neutral gradient utilities need the same surface mapping as solid fills.
 * Brand/semantic gradients and inverse light-mode panels retain their colors. */
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-gray-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-slate-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-zinc-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-neutral-50 { --tw-gradient-from:var(--bg-2) var(--tw-gradient-from-position); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-gray-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-slate-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-zinc-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-neutral-100 { --tw-gradient-from:var(--bg-1) var(--tw-gradient-from-position); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-gray-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-slate-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-zinc-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-neutral-200 { --tw-gradient-from:var(--bg-3) var(--tw-gradient-from-position); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-gray-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-slate-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-zinc-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-neutral-300 { --tw-gradient-from:var(--bg-3) var(--tw-gradient-from-position); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-gray-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-slate-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-zinc-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-neutral-400 { --tw-gradient-from:var(--fg-4) var(--tw-gradient-from-position); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-gray-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-slate-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-zinc-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .from-neutral-500 { --tw-gradient-from:var(--fg-3) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-gray-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-slate-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-zinc-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-neutral-600 { --tw-gradient-from:var(--bg-3) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-gray-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-slate-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-zinc-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-neutral-700 { --tw-gradient-from:var(--bg-3) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-gray-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-slate-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-zinc-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-neutral-800 { --tw-gradient-from:var(--bg-2) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-gray-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-slate-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-zinc-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-neutral-900 { --tw-gradient-from:var(--bg-1) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-gray-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-slate-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-zinc-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .from-neutral-950 { --tw-gradient-from:var(--bg) var(--tw-gradient-from-position); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-gray-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-slate-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-zinc-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-neutral-50 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-2) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-gray-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-slate-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-zinc-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-neutral-100 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-1) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-gray-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-slate-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-zinc-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-neutral-200 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-3) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-gray-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-slate-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-zinc-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-neutral-300 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-3) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-gray-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-slate-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-zinc-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-neutral-400 { --tw-gradient-stops:var(--tw-gradient-from),var(--fg-4) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-gray-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-slate-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-zinc-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .via-neutral-500 { --tw-gradient-stops:var(--tw-gradient-from),var(--fg-3) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-gray-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-slate-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-zinc-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-neutral-600 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-3) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-gray-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-slate-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-zinc-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-neutral-700 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-3) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-gray-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-slate-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-zinc-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-neutral-800 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-2) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-gray-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-slate-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-zinc-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-neutral-900 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-1) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-gray-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-slate-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-zinc-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .via-neutral-950 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-gray-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-slate-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-zinc-50,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-neutral-50 { --tw-gradient-to:var(--bg-2) var(--tw-gradient-to-position); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-gray-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-slate-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-zinc-100,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-neutral-100 { --tw-gradient-to:var(--bg-1) var(--tw-gradient-to-position); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-gray-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-slate-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-zinc-200,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-neutral-200 { --tw-gradient-to:var(--bg-3) var(--tw-gradient-to-position); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-gray-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-slate-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-zinc-300,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-neutral-300 { --tw-gradient-to:var(--bg-3) var(--tw-gradient-to-position); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-gray-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-slate-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-zinc-400,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-neutral-400 { --tw-gradient-to:var(--fg-4) var(--tw-gradient-to-position); }
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-gray-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-slate-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-zinc-500,
html[data-reference-system="true"] body[data-reference-legacy="true"] .to-neutral-500 { --tw-gradient-to:var(--fg-3) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-gray-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-slate-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-zinc-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-neutral-600 { --tw-gradient-to:var(--bg-3) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-gray-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-slate-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-zinc-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-neutral-700 { --tw-gradient-to:var(--bg-3) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-gray-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-slate-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-zinc-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-neutral-800 { --tw-gradient-to:var(--bg-2) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-gray-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-slate-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-zinc-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-neutral-900 { --tw-gradient-to:var(--bg-1) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-gray-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-slate-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-zinc-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .to-neutral-950 { --tw-gradient-to:var(--bg) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-gray-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-slate-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-zinc-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-neutral-50 { --tw-gradient-from:var(--bg-2) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-gray-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-slate-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-zinc-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-neutral-100 { --tw-gradient-from:var(--bg-1) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-gray-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-slate-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-zinc-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-neutral-200 { --tw-gradient-from:var(--bg-3) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-gray-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-slate-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-zinc-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-neutral-300 { --tw-gradient-from:var(--bg-3) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-gray-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-slate-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-zinc-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-neutral-400 { --tw-gradient-from:var(--fg-4) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-gray-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-slate-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-zinc-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-neutral-500 { --tw-gradient-from:var(--fg-3) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-gray-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-slate-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-zinc-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-neutral-600 { --tw-gradient-from:var(--bg-3) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-gray-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-slate-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-zinc-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-neutral-700 { --tw-gradient-from:var(--bg-3) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-gray-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-slate-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-zinc-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-neutral-800 { --tw-gradient-from:var(--bg-2) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-gray-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-slate-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-zinc-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-neutral-900 { --tw-gradient-from:var(--bg-1) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-gray-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-slate-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-zinc-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:from-neutral-950 { --tw-gradient-from:var(--bg) var(--tw-gradient-from-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-gray-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-slate-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-zinc-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-neutral-50 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-2) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-gray-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-slate-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-zinc-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-neutral-100 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-1) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-gray-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-slate-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-zinc-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-neutral-200 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-3) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-gray-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-slate-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-zinc-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-neutral-300 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-3) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-gray-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-slate-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-zinc-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-neutral-400 { --tw-gradient-stops:var(--tw-gradient-from),var(--fg-4) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-gray-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-slate-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-zinc-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-neutral-500 { --tw-gradient-stops:var(--tw-gradient-from),var(--fg-3) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-gray-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-slate-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-zinc-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-neutral-600 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-3) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-gray-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-slate-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-zinc-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-neutral-700 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-3) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-gray-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-slate-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-zinc-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-neutral-800 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-2) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-gray-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-slate-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-zinc-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-neutral-900 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg-1) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-gray-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-slate-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-zinc-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:via-neutral-950 { --tw-gradient-stops:var(--tw-gradient-from),var(--bg) var(--tw-gradient-via-position),var(--tw-gradient-to); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-gray-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-slate-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-zinc-50,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-neutral-50 { --tw-gradient-to:var(--bg-2) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-gray-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-slate-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-zinc-100,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-neutral-100 { --tw-gradient-to:var(--bg-1) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-gray-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-slate-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-zinc-200,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-neutral-200 { --tw-gradient-to:var(--bg-3) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-gray-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-slate-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-zinc-300,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-neutral-300 { --tw-gradient-to:var(--bg-3) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-gray-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-slate-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-zinc-400,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-neutral-400 { --tw-gradient-to:var(--fg-4) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-gray-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-slate-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-zinc-500,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-neutral-500 { --tw-gradient-to:var(--fg-3) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-gray-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-slate-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-zinc-600,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-neutral-600 { --tw-gradient-to:var(--bg-3) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-gray-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-slate-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-zinc-700,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-neutral-700 { --tw-gradient-to:var(--bg-3) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-gray-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-slate-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-zinc-800,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-neutral-800 { --tw-gradient-to:var(--bg-2) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-gray-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-slate-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-zinc-900,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-neutral-900 { --tw-gradient-to:var(--bg-1) var(--tw-gradient-to-position); }
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-gray-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-slate-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-zinc-950,
html[data-reference-system="true"][data-theme="dark"] body[data-reference-legacy="true"] .dark\:to-neutral-950 { --tw-gradient-to:var(--bg) var(--tw-gradient-to-position); }
/* Nested platform theme roots (top nav, help panel, loading overlay, admin)
 * must resolve the same palette as the page. Keep their explicit light/dark
 * choice and exclude customer-branded OAuth islands. CSS variables only. */
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme] {
 --brand:#45E760; --ref-gradient-green:var(--brand); --ref-gradient-mint:#2ADF8E; --ref-gradient-lime:#B4FB85; --brand-green-hue:130; --brand-green-saturation:77.142857%; --accent:var(--rx-primary); --accent-fg:var(--rx-primary-ink);
 --accent-hover:var(--rx-primary-hover); --primary-hover:var(--rx-primary-hover);
 --accent-text:var(--fg); --accent-text-hover:var(--fg); --accent-2:var(--rx-primary-hover);
 --rx-primary:var(--fg); --rx-primary-hover:color-mix(in srgb,var(--fg) 80%,var(--bg-2));
 --rx-primary-active:color-mix(in srgb,var(--fg) 70%,var(--bg-2));
 --rx-secondary-ink:var(--fg); --ref-lemon:var(--rx-surface-selected); --ref-aura:transparent;
 --rx-hover-muted:var(--fg-2); --rx-overlay-muted:var(--fg-2); --rx-overlay-focus:var(--fg);
 --rx-overlay-danger:var(--danger-fg); --rx-control:var(--rx-field);
}
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="light"] {
 --ref-segment-selected:var(--rx-raised); --ref-suggestion-bg:#F7F7F7; --ref-suggestion-hover:#F2F2F2;
 --bg:#FCFCFC; --bg-1:#F3F3F3; --bg-2:#FAFAFA; --bg-3:#F5F5F6;
 --fg:#1A1C1F; --fg-2:rgba(26,28,31,.695); --fg-3:var(--fg-2); --fg-4:rgba(26,28,31,.495);
 --line:rgba(26,28,31,.078); --line-2:rgba(26,28,31,.117); --rx-divider:rgba(26,28,31,.049);
 --rx-surface-hover:rgba(26,28,31,.0535); --rx-surface-selected:rgba(26,28,31,.049);
 --rx-hover:rgba(26,28,31,.055); --rx-active:rgba(26,28,31,.085);
 --rx-primary-ink:#FFFFFF; --rx-send:#000000; --rx-send-ink:#FFFFFF;
 --rx-secondary:rgba(26,28,31,.05); --rx-secondary-hover:rgba(26,28,31,.075); --rx-secondary-active:rgba(26,28,31,.10);
 --rx-panel-shadow:0 1px 2px #00000003; --rx-edge-light:#FFFFFF;
 --rx-field:#FCFCFC; --rx-field-hover:#F8F8F9; --rx-field-border:var(--line-2); --rx-readonly:#F6F6F6;
 --rx-raised:#FCFCFC; --rx-composer:#FAFAFA; --rx-overlay:#FDFDFD; --rx-overlay-border:var(--line-2);
 --rx-overlay-hover:#EBEBEB; --rx-overlay-selected:#F0F0F0;
 --rx-overlay-selected-hover:#EBEBEB; --rx-overlay-active:#DDDDDD;
 --ref-brand-detail:var(--ref-brand-soft); --success-fg:hsl(var(--brand-green-hue) var(--brand-green-saturation) 28%); --success-bg:hsl(var(--brand-green-hue) var(--brand-green-saturation) 97%); --warning-fg:#B9480D; --danger-fg:#BA2623; --info-fg:#0169CC; --rx-overlay-danger:#911E1B;
 --rx-floating-shadow:0 2px 6px #0000000A,0 12px 32px #00000014;
}
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="dark"] {
 --ref-segment-selected:#141414; --ref-suggestion-bg:#1D1D1D; --ref-suggestion-hover:#222222;
 --bg:#141414; --bg-1:#171717; --bg-2:#1B1B1B; --bg-3:#1E1E1E;
 --fg:#DFDFDF; --fg-2:rgba(255,255,255,.71); --fg-3:var(--fg-2); --fg-4:rgba(255,255,255,.498);
 --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --rx-divider:rgba(255,255,255,.04);
 --rx-surface-hover:rgba(255,255,255,.025); --rx-surface-selected:rgba(255,255,255,.045);
 --rx-hover:rgba(255,255,255,.03); --rx-active:rgba(255,255,255,.05);
 --rx-primary-ink:#2D2D2D; --rx-send:#FFFFFF; --rx-send-ink:#000000;
 --rx-secondary:rgba(223,223,223,.05); --rx-secondary-hover:rgba(223,223,223,.075); --rx-secondary-active:rgba(223,223,223,.10);
 --rx-panel-shadow:0 1px 2px #00000012; --rx-edge-light:#FFFFFF08;
 --rx-field:#191919; --rx-field-hover:#1D1D1D; --rx-field-border:var(--line-2); --rx-readonly:var(--bg-1);
 --rx-raised:#202020; --rx-composer:#202020; --rx-overlay:#202020; --rx-overlay-border:var(--line-2);
 --rx-overlay-hover:#252525; --rx-overlay-selected:#2A2A2A;
 --rx-overlay-selected-hover:#252525; --rx-overlay-active:#242424;
 --ref-brand-detail:var(--ref-brand-soft); --success-fg:hsl(var(--brand-green-hue) var(--brand-green-saturation) 65%); --success-bg:hsl(var(--brand-green-hue) var(--brand-green-saturation) 9%); --warning-fg:#FF8549; --danger-fg:#FF6764; --info-fg:#99CEFF; --rx-overlay-danger:#FFD9D9;
 --rx-floating-shadow:0 0 0 1px #00000020,0 6px 16px #00000038,0 20px 48px #00000055;
}
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="light"] {
 --ref-field-focus-visible:var(--ref-keyboard-focus); --ref-hover-border:#BDBDBD; --ref-focus:#929292; --ref-keyboard-focus:#777777; --ref-focus-halo:rgb(0 0 0 / 4%);
}
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="dark"] {
 --ref-field-focus-visible:#626262; --ref-hover-border:#3D3D3D; --ref-focus:#505050; --ref-keyboard-focus:#909090; --ref-focus-halo:rgb(255 255 255 / 2%);
}
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme] {
 --focus-ring-color:var(--ref-focus);
 --field-border-focus:var(--ref-focus);
 --field-ring-color:var(--ref-focus-halo);
 --field-ring:0 0 0 2px var(--ref-focus-halo);
}
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme] {
 --credit-action-bg:color-mix(in srgb,var(--credit-action) 9%,transparent);
 --credit-action-hover:color-mix(in srgb,var(--credit-action) 16%,transparent);
 --credit-link-hover:color-mix(in srgb,var(--credit-action) 10%,transparent);
}
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="light"] { --ref-brand-soft:hsl(var(--brand-green-hue) 55% 28%); --credit-action:var(--ref-brand-soft); }
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="dark"] { --ref-brand-soft:hsl(var(--brand-green-hue) 55% 65%); --credit-action:var(--ref-brand-soft); }
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="light"] { --ref-toggle-edge:var(--ref-brand-soft); --ref-toggle-knob:#FFFFFF; --ref-progress-start:color-mix(in srgb,var(--ref-gradient-mint) 48%,#000); --ref-progress-middle:color-mix(in srgb,var(--ref-gradient-green) 48%,#000); --ref-progress-end:color-mix(in srgb,var(--ref-gradient-lime) 48%,#000); }
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="dark"] { --ref-toggle-edge:var(--ref-brand-soft); --ref-toggle-knob:var(--success-bg); --ref-progress-start:var(--ref-gradient-mint); --ref-progress-middle:var(--ref-gradient-green); --ref-progress-end:var(--ref-gradient-lime); }
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme] { --ref-progress-gradient:linear-gradient(100deg,var(--ref-progress-start),var(--ref-progress-middle) 55%,var(--ref-progress-end)); }
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="light"] { --rx-primary-hover:#111315; }
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="dark"] { --rx-primary:#DEDEDE; --rx-primary-hover:#F7F7F7; }
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme] {
 --font-body:"Geist",system-ui,sans-serif; --font-display:var(--font-body);
 --font-mono:"JetBrains Mono",monospace;
 --hover-bg:var(--rx-surface-hover); --hover-bg-strong:var(--rx-hover);
 --card-bg:var(--bg-2); --code-bg:var(--bg-1); --rail-bg:var(--bg-1);
 --shadow-sm:var(--rx-panel-shadow); --shadow:var(--rx-floating-shadow);
 --shadow-md:var(--rx-floating-shadow); --shadow-lg:var(--rx-floating-shadow);
 --composer-shadow:0 2px 8px #00000008;
 --composer-focus-shadow:var(--field-ring);
 --radius-sm:8px; --radius-md:12px; --radius-lg:20px;
 /* The --ed-* re-derivation for this selector lives in theme.css, the one
    declaration site the token spec allows. --ed-surface was dropped: nothing
    reads it (the editor family is --ed-surface-1/-2/-3/-hover). */
}
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="dark"] { --ref-selection-ink:var(--ref-brand-soft); --ref-control-fill:var(--ref-brand-soft); --ref-control-ink:#102016; }
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="light"] { --rx-primary:#17191C; --rx-primary-hover:#000000; --ref-selection-ink:var(--ref-brand-soft); --ref-control-fill:var(--ref-brand-soft); --ref-control-ink:#FFFFFF; }
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme] { --ref-selection-gradient:linear-gradient(110deg,var(--ref-gradient-lime),var(--ref-gradient-green) 55%,var(--ref-gradient-mint)); --ref-selection-glyph:#102016; }
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"]):not(.clickfunnels-reference)[data-theme] {
 --ref-button-light-depth:0 1px 2px rgb(0 0 0 / 8%);
 --ref-button-light-depth-hover:0 1px 2px rgb(0 0 0 / 10%);
 --ref-button-secondary-depth:none;
 --ref-button-secondary-depth-hover:none;
 --ref-button-radius:10px; --ref-button-radius-small:9px;
 --ref-button-primary-gradient:linear-gradient(180deg,rgb(255 255 255 / 7%),rgb(0 0 0 / 10%));
 --ref-button-primary-gradient-hover:linear-gradient(180deg,rgb(255 255 255 / 9%),rgb(0 0 0 / 12%));
 --ref-button-secondary-gradient:none;
 --ref-button-secondary-gradient-hover:none;
 --ref-button-primary-hover:color-mix(in srgb,var(--rx-primary) 86%,var(--rx-primary-ink));
 --ref-button-secondary-hover:color-mix(in srgb,var(--fg) 8%,var(--bg-2));
}
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"]):not(.clickfunnels-reference)[data-theme="dark"] {
 --ref-button-secondary-depth:none;
 --ref-button-secondary-depth-hover:none;
 /* Keep a visible neutral ramp even when hover raises the base to white.
    Current dark primary: about #EFEFEF → #C8C8C8; hover #FFFFFF → #DEDEDE. */
 --ref-button-primary-gradient:linear-gradient(180deg,rgb(255 255 255 / 50%),rgb(0 0 0 / 10%));
 --ref-button-primary-gradient-hover:linear-gradient(180deg,rgb(255 255 255 / 60%),rgb(0 0 0 / 13%));
 --ref-button-secondary-gradient:none;
 --ref-button-secondary-gradient-hover:none;
 --ref-button-primary-hover:var(--rx-send);
 --ref-button-secondary-hover:color-mix(in srgb,var(--fg) 10%,var(--bg-2));
}
@media(forced-colors:active) {
 html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"]):not(.clickfunnels-reference)[data-theme] {
  --ref-button-light-depth:none; --ref-button-light-depth-hover:none;
  --ref-button-secondary-depth:none; --ref-button-secondary-depth-hover:none;
  --ref-button-primary-gradient:none; --ref-button-primary-gradient-hover:none;
  --ref-button-secondary-gradient:none; --ref-button-secondary-gradient-hover:none;
  --ref-button-primary-hover:Highlight; --ref-button-secondary-hover:Highlight;
 }
}

/* Editable fields: softened brand edge + matching outer halo, with no size change.
   Deepen the same green on light surfaces so the edge remains legible.
   The ClickFunnels fork owns its separate primary-blue field treatment. */
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="light"] {
 --ref-field-focus:var(--ref-brand-soft);
}
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme="dark"] {
 --ref-field-focus:var(--ref-brand-soft);
}
html[data-reference-system="true"] [data-theme]:not([data-oauth-app-themed="true"])[data-theme] {
 --ref-field-focus-visible:var(--ref-field-focus);
 --field-border-focus:var(--ref-field-focus);
 --field-ring-color:color-mix(in srgb,var(--ref-brand-soft) 12%,transparent);
 --field-ring:0 0 0 3px var(--field-ring-color);
}
/* Source-backed adoption gaps. Keep styling scoped to the local platform;
 * generated app previews and third-party payment frames own their contents. */
html[data-reference-system="true"][data-theme] {
  --surf-chat: var(--bg-2);
  --surf-dashnav: var(--bg-1);
  --surf-content: var(--bg-2);
  --surface-base: var(--bg);
  --surface-raised: var(--rx-raised);
  --surface-sunken: var(--bg-1);
  --text-primary: var(--fg);
  --text-secondary: var(--fg-2);
  --border-default: var(--line);
  --ref-selection-ink: var(--success-fg);
  --ref-selection-gradient: linear-gradient(110deg, var(--ref-gradient-lime), var(--ref-gradient-green) 55%, var(--ref-gradient-mint));
  --ref-selection-glyph: #102016;
}
html[data-reference-system="true"][data-theme] body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
}
/* theme.css still paints native fields with !important legacy aliases.
   Resolve those aliases to field surfaces, including nested theme islands,
   instead of letting native controls inherit a card background. */
html[data-reference-system="true"][data-theme],
html[data-reference-system="true"] [data-theme] {
  --input-bg: var(--rx-field);
  --input-bg-hover: var(--rx-field-hover);
  --input-bg-focus: var(--rx-field);
  --input-bg-disabled: var(--rx-readonly);
}
html[data-reference-system="true"][data-theme] :is(.input,.textarea,.select,.ds-bt-input,.support-input,.support-textarea,.support-select):not(:disabled,[readonly]) {
  background-color: var(--rx-field);
  color: var(--fg);
  border-color: var(--rx-field-border);
}
html[data-reference-system="true"][data-theme] :is(.input,.textarea,.ds-bt-input)::placeholder { color: var(--fg-3); opacity: 1; }
html[data-reference-system="true"][data-theme] :is(input.checkbox,input.radio):checked {
  background: var(--ref-selection-gradient);
  border-color: var(--ref-selection-ink);
}
html[data-reference-system="true"][data-theme] input.checkbox:checked::after { border-color: var(--ref-selection-glyph); }
html[data-reference-system="true"][data-theme] input.radio:checked::after { background: var(--ref-selection-glyph); }
html[data-reference-system="true"][data-theme] .suggest-card {
  padding: 14px 16px;
  background: var(--ref-suggestion-bg);
  border: 1px solid var(--line);
  border-radius: var(--ref-button-radius);
}
html[data-reference-system="true"][data-theme] .suggest-card:hover { background: var(--ref-suggestion-hover); border-color: var(--line-2); transform: none; }
html[data-reference-system="true"][data-theme] :is(.btn,.icon-btn):hover { transform: none; }
/* Preserve readable error states when neutral field tokens are applied. */
html[data-reference-system="true"][data-theme] :is(.input,.textarea,.select,.ds-bt-input,.support-input,.support-textarea,.support-select)[aria-invalid="true"] { border-color: var(--danger-fg); }
@media (forced-colors: active) {
  html[data-reference-system="true"][data-theme] :is(input.checkbox,input.radio):checked { background: Highlight; border-color: Highlight; }
  html[data-reference-system="true"][data-theme] input.checkbox:checked::after { border-color: HighlightText; }
  html[data-reference-system="true"][data-theme] input.radio:checked::after { background: HighlightText; }
}

/* Scaffold headings: consistent rhythm and responsive action placement. */
html[data-reference-system="true"][data-theme] .ds-bt-page-heading { gap: 16px 24px; flex-wrap: wrap; align-items: center; }
html[data-reference-system="true"][data-theme] .ds-bt-page-title { color: var(--fg); font: 600 clamp(24px,2.4vw,32px)/1.2 var(--font-body); letter-spacing: -.025em; text-wrap: balance; }
html[data-reference-system="true"][data-theme] .ds-bt-page-actions { flex: 0 1 auto; margin-left: auto; }
html[data-reference-system="true"][data-theme] .ds-bt-page-divider { background: var(--line); }
html[data-reference-system="true"][data-theme] :is(.input,.textarea,.select,.ds-bt-input,.support-input,.support-textarea,.support-select):is(:disabled,[readonly]) { background: var(--rx-readonly); color: var(--fg-3); border-color: var(--line); }
/* Auth buttons are functional form controls, not .btn specimens. */
html[data-reference-system="true"][data-theme] .auth-card :is(.auth-btn-primary,input[type="submit"],button[type="submit"]:not(.auth-oauth-btn),.button.full) {
  background: var(--ref-button-primary-gradient) var(--rx-primary)!important; color: var(--rx-primary-ink);
  border-radius: var(--ref-button-radius); transition: background-color 160ms ease, color 160ms ease;
}
html[data-reference-system="true"][data-theme] .auth-card :is(.auth-btn-primary,input[type="submit"],button[type="submit"]:not(.auth-oauth-btn),.button.full):hover:not(:disabled,[aria-disabled="true"]) { background: var(--ref-button-primary-gradient-hover) var(--ref-button-primary-hover)!important; }
html[data-reference-system="true"][data-theme] .auth-oauth-btn { border-color: var(--line-2); background: var(--rx-secondary); background-clip: padding-box; box-shadow: none; transition: background-color 160ms ease; }
html[data-reference-system="true"][data-theme] .auth-oauth-btn:hover { border-color: var(--line-2); background: var(--ref-button-secondary-hover); }
@media (max-width: 639px) {
  html[data-reference-system="true"][data-theme] .ds-bt-page-actions { margin-left: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-reference-system="true"][data-theme] .auth-card :is(.auth-btn-primary,input[type="submit"],button[type="submit"],.button.full,.auth-oauth-btn) { transition: none; }
}

/* Live status is green; the platform's neutral primary is an action color. */
html[data-reference-system="true"][data-theme] .reference-live-status { background:var(--success-bg)!important; border-color:color-mix(in srgb,var(--success-fg) 30%,transparent)!important; }
html[data-reference-system="true"][data-theme] .reference-live-status span { color:var(--success-fg)!important; }
html[data-reference-system="true"][data-theme] .reference-live-status .animate-pulse { background:var(--success-fg)!important; }

/* Local demo chrome owns these elements; the captured customer page is an iframe. */
html[data-reference-system="true"][data-theme] .reference-demo-shell header { border-color:var(--line); }
html[data-reference-system="true"][data-theme] .reference-demo-shell header p { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .reference-demo-shell button { background:var(--rx-secondary); border-color:var(--line-2); border-radius:var(--ref-button-radius); color:var(--fg); }
html[data-reference-system="true"][data-theme] .reference-demo-shell button:hover { background:var(--ref-button-secondary-hover); }

/* The provider callback remains functional; only the result window is styled. */
html[data-reference-system="true"][data-theme] .reference-oauth-result { background:var(--bg); }
html[data-reference-system="true"][data-theme] .reference-oauth-result .card { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-xl,16px); box-shadow:none; padding:32px; }
html[data-reference-system="true"][data-theme] .reference-oauth-result :is(h1,.email strong) { color:var(--fg); }
html[data-reference-system="true"][data-theme] .reference-oauth-result :is(.email,.message,.closing-text) { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .reference-oauth-result .icon.success { background:var(--success-bg); }
html[data-reference-system="true"][data-theme] .reference-oauth-result .icon.success svg { color:var(--success-fg); }
html[data-reference-system="true"][data-theme] .reference-oauth-result :is(.icon.error,.error-message) { background:var(--danger-bg); color:var(--danger-fg); border-color:color-mix(in srgb,var(--danger-fg) 25%,transparent); }
html[data-reference-system="true"][data-theme] .reference-oauth-result .icon.error svg { color:var(--danger-fg); }
html[data-reference-system="true"][data-theme] .reference-oauth-result .spinner { border-color:var(--line-2); border-top-color:var(--fg-2); }
@media(prefers-reduced-motion:reduce) {
  html[data-reference-system="true"][data-theme] .reference-oauth-result .spinner { animation:none; }
}

/* Workflow canvas chrome is platform UI, not a generated app's preview. */
html[data-reference-system="true"][data-theme] #workflow-editor-root :is(.react-flow,.react-flow__background) { background:var(--bg)!important; }
html[data-reference-system="true"][data-theme] #workflow-editor-root :is(.react-flow__minimap,.react-flow__controls,.react-flow__controls-button) { background:var(--bg-2)!important; border-color:var(--line-2)!important; color:var(--fg-2); fill:var(--fg-2)!important; }
html[data-reference-system="true"][data-theme] #workflow-editor-root .react-flow__controls-button:hover { background:var(--ref-button-secondary-hover)!important; fill:var(--fg)!important; }

/* Anonymous build preview: neutral outer frame and activity feed only. */
html[data-reference-system="true"][data-theme] :is(.ab-stage,.ab-stage__bar) { background:var(--bg-2); border-color:var(--line); }
html[data-reference-system="true"][data-theme] .ab-stage__dot { background:var(--line-2); }
html[data-reference-system="true"][data-theme] :is(.ab-stage__url,.ab-feed__status,.ab-feed__count,.ab-files li.ab-files__empty) { color:var(--fg-3); }
html[data-reference-system="true"][data-theme] :is(.ab-feed__status strong,.ab-files li,.ab-note) { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .ab-feed__headline { font-family:var(--font-body); }
html[data-reference-system="true"][data-theme="light"] .reference-arcade-board .text-primary-600 { color:var(--success-fg); }
html[data-reference-system="true"][data-theme] :is(.ab-note strong,.ab-eyebrow strong) { color:var(--fg); }
html[data-reference-system="true"][data-theme] .ab-files { background:var(--bg-1); border-color:var(--line); }

/* Both live composer variants use the same compact thinking menu. A fixed
   check column prevents the selected description from wrapping unexpectedly. */
html[data-reference-system="true"][data-theme] [data-thinking-effort-target="menu"] { width:320px; max-width:calc(100vw - 24px); padding:6px; border-radius:14px; }
html[data-reference-system="true"][data-theme] [data-thinking-effort-target="option"]:not([hidden]) { display:grid; grid-template-columns:minmax(0,1fr) 16px; gap:10px; align-items:center; padding:10px; border:0; border-radius:8px; background:transparent; }
html[data-reference-system="true"][data-theme] [data-thinking-effort-target="option"][data-selected="true"] { background:var(--rx-overlay-selected); }
html[data-reference-system="true"][data-theme] [data-thinking-effort-target="option"]:hover { background:var(--rx-overlay-hover); }
html[data-reference-system="true"][data-theme] [data-thinking-effort-target="option"] p { font:400 12px/1.45 var(--font-body); color:var(--fg-2); margin:3px 0 0; white-space:normal; display:block; overflow:visible; }
html[data-reference-system="true"][data-theme] [data-thinking-effort-target="option"] [data-check] { width:16px; height:16px; padding:0; background:none; border:0; border-radius:0; color:var(--success-fg); box-shadow:none; }
html[data-reference-system="true"][data-theme] [data-thinking-effort-target="option"] [data-check] svg { width:16px; height:16px; }
html[data-reference-system="true"][data-theme] [data-thinking-effort-target="button"].composer-tool-pill { border:1px solid var(--line-2); border-radius:8px; box-shadow:none; }
html[data-reference-system="true"][data-theme] [data-thinking-effort-target="button"].composer-tool-pill:hover { background:var(--rx-overlay-hover); }
html[data-reference-system="true"][data-theme] .cmp-table th.cmp-table__overskill-col { background:var(--bg-3); }

/* The twelve use-case pages share one legacy generator template. Keep the
   existing prompt, models, attachments and routes; modernize its structure. */
html[data-reference-system="true"][data-theme] .reference-use-case > section { background:var(--bg)!important; padding-block:clamp(48px,7vw,88px); }
html[data-reference-system="true"][data-theme] .reference-use-case > section:nth-of-type(even) { background:var(--bg-1)!important; }
html[data-reference-system="true"][data-theme] .reference-use-case .container { width:min(100%,1248px); padding-inline:clamp(20px,4vw,48px); }
html[data-reference-system="true"][data-theme] .reference-generator-hero { overflow:visible; }
html[data-reference-system="true"][data-theme] .reference-generator-hero > .absolute { display:none; }
html[data-reference-system="true"][data-theme] .reference-generator-hero h1 { max-width:1040px; margin-inline:auto; padding:0; color:var(--fg); font-family:"Grifter",var(--font-body); font-size:clamp(32px,4.8vw,64px); line-height:1.08; letter-spacing:-.035em; text-wrap:balance; }
html[data-reference-system="true"][data-theme] .reference-use-case-examples { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; list-style:none; padding:0; margin:24px auto; max-width:860px; }
html[data-reference-system="true"][data-theme] .reference-use-case-examples li { border:1px solid var(--line); background:var(--bg-2); color:var(--fg-2); border-radius:999px; padding:7px 12px; font:500 13px/1.4 var(--font-body); }
html[data-reference-system="true"][data-theme] .reference-generator-form > div { background:var(--rx-composer,var(--bg-3)); border:1px solid var(--line-2); padding:18px; border-radius:20px; }
html[data-reference-system="true"][data-theme] .reference-generator-form textarea { display:block; min-height:120px; padding:12px; background:transparent!important; border:0!important; box-shadow:none; color:var(--fg); font:400 18px/1.55 var(--font-body); }
html[data-reference-system="true"][data-theme] .reference-generator-form textarea::placeholder { color:var(--fg-3); }
html[data-reference-system="true"][data-theme] .reference-generator-form textarea:focus { outline:none; box-shadow:none; }
html[data-reference-system="true"][data-theme] .reference-generator-form > div:focus-within { border-color:var(--field-border-focus); box-shadow:var(--field-ring); }
html[data-reference-system="true"][data-theme] .reference-generator-toolbar { background:transparent!important; border:0!important; border-top:1px solid var(--line)!important; padding:14px 0 0; }
html[data-reference-system="true"][data-theme] .reference-generator-toolbar button:not([data-model-selector-target="option"]) { min-height:40px; border-radius:var(--ref-button-radius); }
html[data-reference-system="true"][data-theme] .reference-generator-toolbar > div > button { color:var(--fg); background:var(--rx-secondary)!important; border:1px solid var(--line-2)!important; box-shadow:none; transition:background-color 160ms ease; }
html[data-reference-system="true"][data-theme] .reference-generator-toolbar > div > button:hover { background:var(--ref-button-secondary-hover)!important; }
html[data-reference-system="true"][data-theme] .reference-use-case button[type="submit"] { background:var(--ref-button-primary-gradient) var(--rx-primary)!important; color:var(--rx-primary-ink)!important; border:1px solid transparent; box-shadow:none; }
html[data-reference-system="true"][data-theme] .reference-use-case button[type="submit"]:hover { background:var(--ref-button-primary-gradient-hover) var(--ref-button-primary-hover)!important; transform:none; }
html[data-reference-system="true"][data-theme] .reference-use-case button[data-prompt] { background:var(--bg-3)!important; color:var(--fg-2)!important; border:1px solid var(--line); }
html[data-reference-system="true"][data-theme] .reference-use-case button[data-prompt]:hover { background:var(--ref-button-secondary-hover)!important; }
/* These are descriptive badges and step numbers, not primary actions. */
html[data-reference-system="true"][data-theme] .reference-use-case :is(.bg-primary-100,.bg-primary-300) { background:var(--bg-3); color:var(--fg); }
html[data-reference-system="true"][data-theme] .reference-use-case .text-primary-600:not(button) { color:var(--success-fg); }
html[data-reference-system="true"][data-theme] .reference-use-case .group:hover .group-hover\:scale-110 { transform:none; }
html[data-reference-system="true"][data-theme] .reference-public-footer .text-emerald-400 { color:var(--success-fg); }
html[data-reference-system="true"][data-theme] :is(.ds-breadcrumb-sep,.ti-breadcrumb-sep,.ti-show-meta-dot) { color:var(--fg-3); }
/* Older public documents and footer authored for dark-only layouts must
   resolve ink and surface together when previewed in either theme. */
html[data-reference-system="true"][data-theme] .reference-public-footer { background:var(--bg-1)!important; border-color:var(--line); color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .reference-public-footer :is(.text-white,.text-gray-100,.text-gray-200,h2,h3,h4) { color:var(--fg); }
html[data-reference-system="true"][data-theme] .reference-public-footer :is(.text-gray-300,.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-700) { color:var(--fg-3); }
html[data-reference-system="true"][data-theme] .reference-public-footer .bg-gray-800\/50 { background:var(--bg-2); border-color:var(--line); }
html[data-reference-system="true"][data-theme] .reference-public-footer a:hover { background-color:var(--bg-3); color:var(--fg); }
html[data-reference-system="true"][data-theme] .reference-legal :is(p,ul,ol,li) { color:var(--fg-2); }
html[data-reference-system="true"][data-theme] .reference-legal :is(h1,h2,h3,h4,strong) { color:var(--fg); }
html[data-reference-system="true"][data-theme] .reference-legal a { color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
html[data-reference-system="true"][data-theme] .reference-legal a:hover { text-decoration-thickness:2px; }
@media(max-width:639px) {
  html[data-reference-system="true"][data-theme] .reference-use-case-examples { gap:6px; }
  html[data-reference-system="true"][data-theme] .reference-use-case-examples li { font-size:12px; padding:6px 10px; }
  html[data-reference-system="true"][data-theme] .reference-generator-form > div { padding:12px; }
  html[data-reference-system="true"][data-theme] .reference-generator-form textarea { font-size:16px; padding:8px; }
}

/* Documentation tables scroll inside their cards on narrow screens. */
html[data-reference-system="true"][data-theme] .reference-docs-table-scroll { max-width:100%; overflow-x:auto; border-radius:8px; }
html[data-reference-system="true"][data-theme] .reference-docs-table-scroll table { min-width:560px; }
html[data-reference-system="true"][data-theme] .reference-docs-table-scroll :is(th,td) { padding:12px; vertical-align:top; }
html[data-reference-system="true"][data-theme] .reference-docs-table-scroll :is(th,td):first-child { padding-left:0; }
html[data-reference-system="true"][data-theme] .reference-docs-table-scroll:focus-visible { outline:2px solid var(--ref-field-focus-visible); outline-offset:4px; }

/* Supplied full lockup: preserve its paths and proportions instead of setting
   the wordmark in a font. Only the wordmark fill changes for light surfaces. */
html[data-reference-system="true"] .auth-lockup .auth-logo-svg { display:block; width:172px; max-width:100%; height:auto; flex:0 0 auto; }
html[data-reference-system="true"] .auth-lockup .auth-logo-svg--light { display:none; }
html[data-reference-system="true"][data-theme="light"] .auth-lockup .auth-logo-svg--dark { display:none; }
html[data-reference-system="true"][data-theme="light"] .auth-lockup .auth-logo-svg--light { display:block; }
/* Local waitlist review: the Reference Lab's card, inset, status, segmented
   control, and form recipes. View classes also exist on the baseline, but this
   stylesheet is loaded only inside the local Reference System opt-in. */
html[data-reference-system="true"] .reference-waitlist {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
}
html[data-reference-system="true"] .reference-waitlist .wl-page {
  padding: 32px 0 64px !important;
  min-height: calc(100vh - 200px);
}
.reference-waitlist :is(.wl-dash-shell, .wl-inv-shell) { max-width: 960px; }
.reference-waitlist :is(.wl-pending-shell, .wl-invsu-shell) { max-width: 560px; }
.reference-waitlist .wl-card {
  padding: 24px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--card-bg) !important;
  box-shadow: none;
}
.reference-waitlist .wl-card[style*="margin-bottom"] { margin-bottom: 24px !important; }
.reference-waitlist .wl-caption { color: var(--fg-3) !important; }
.reference-waitlist :is(h1, h2) { text-wrap: balance; }
.reference-waitlist h2 { font-family: var(--font-body) !important; line-height: 1.4; }
.reference-waitlist .input[readonly] { border-style: solid; }
.reference-waitlist :is(h2 svg, .wl-dash-referral svg) { color: var(--fg-3); stroke: currentColor; }
.reference-waitlist .wl-icon-tile,
.reference-waitlist .wl-tier-icon {
  border-radius: var(--radius-sm) !important;
  color: var(--fg-2) !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--line) !important;
}
.reference-waitlist :is(.wl-tier-badge, .wl-current-badge) {
  background: var(--bg-3) !important;
  color: var(--fg-2) !important;
  border: 1px solid var(--line) !important;
}
.reference-waitlist .wl-success,
.reference-waitlist .wl-current-badge {
  background: var(--success-bg) !important;
  color: var(--success-fg) !important;
}
.reference-waitlist .wl-hero-number {
  font-size: clamp(48px, 8vw, 64px) !important;
  letter-spacing: -0.035em;
}
.reference-waitlist :is(.wl-dash-stats, .wl-invite-stats) {
  gap: 0 !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  overflow: hidden;
  margin-bottom: 24px !important;
}
.reference-waitlist :is(.wl-dash-stats, .wl-invite-stats) > .wl-card {
  border: 0 !important;
  border-radius: 0 !important;
  min-width: 0;
  padding: 20px 16px !important;
}
.reference-waitlist :is(.wl-dash-stats, .wl-invite-stats) > .wl-card + .wl-card {
  border-left: 1px solid var(--line) !important;
}
.reference-waitlist .wl-access-recovery { max-width: none !important; }
.reference-waitlist .wl-dash-shell .wl-access-recovery {
  padding: 20px 0 0 !important;
  background: transparent !important;
  border-width: 1px 0 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
.reference-waitlist .wl-access-recovery > div > div { min-width: 0; }
.reference-waitlist .wl-tabs {
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: var(--radius-md);
}
.reference-waitlist .wl-tab {
  min-height: 40px;
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  transition: color 150ms ease, background-color 150ms ease;
}
.reference-waitlist .wl-tab:hover { background: var(--bg-hover); color: var(--fg); }
.reference-waitlist .wl-tab[aria-selected="true"] {
  background: var(--ref-segment-selected, var(--bg));
  border-color: var(--line-2);
  color: var(--ref-selection-ink, var(--fg));
}
.reference-waitlist .wl-tier-row {
  opacity: 1 !important;
  background: transparent !important;
  border-color: var(--line) !important;
  border-radius: var(--radius-md);
}
.reference-waitlist .wl-tier-row.is-current { background: var(--bg-3) !important; border-color: var(--line-2) !important; }
.reference-waitlist .wl-tier-benefit { max-width: 44%; }
.reference-waitlist .wl-tier-benefit > div { text-wrap: pretty; }
.reference-waitlist .wl-progress-fill { background: var(--ref-progress-gradient, var(--success-fg)) !important; }
.reference-waitlist .wl-pending-icon {
  animation: none;
  width: 64px !important;
  height: 64px !important;
}
.reference-waitlist .wl-pending-icon svg { width: 30px; height: 30px; }
.reference-waitlist .wl-invsu-shell h1 { max-width: none !important; font-size: clamp(30px, 5vw, 40px) !important; line-height: 1.15 !important; }
.reference-waitlist .wl-field-label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0 0 8px;
  clip: auto;
  overflow: visible;
  white-space: normal;
  display: block;
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
}
.reference-waitlist .input { font-size: 16px !important; min-height: 44px; }
.reference-waitlist :is(.btn, .icon-btn) { min-height: 44px; }
.reference-waitlist .icon-btn { min-width: 44px; border-radius: var(--radius-sm); }
.reference-waitlist :is(a, button, input):focus-visible { outline: 2px solid var(--fg-2); outline-offset: 3px; }
.reference-waitlist main a:not(.btn, .os-btn) {
  color: var(--fg-2) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.reference-waitlist main a:not(.btn, .os-btn):hover { color: var(--fg) !important; }
.reference-waitlist .wl-code-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important; }
.reference-waitlist .wl-code-row { align-items: flex-start !important; }
.reference-waitlist .wl-footer { padding: 24px 0 !important; }
.reference-waitlist .wl-footer .ds-container > div { line-height: 1.7; }
.reference-waitlist.wl-verification main { padding-top: clamp(40px, 9vh, 80px) !important; }
.reference-waitlist.wl-verification h1 { font-size: clamp(28px, 5vw, 32px) !important; }
.reference-waitlist.wl-verification section { padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 768px) {
  html[data-reference-system="true"] .reference-waitlist .wl-page { padding: 24px 0 40px !important; }
  .reference-waitlist .wl-page > .ds-container { padding-inline: 16px; }
  .reference-waitlist .wl-card { padding: 20px !important; }
  .reference-waitlist :is(.wl-dash-stats, .wl-invite-stats) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .reference-waitlist :is(.wl-dash-stats, .wl-invite-stats) > .wl-card { padding: 16px 8px !important; }
  .reference-waitlist :is(.wl-dash-stats, .wl-invite-stats) .wl-icon-tile { width: 32px !important; height: 32px !important; margin-bottom: 12px !important; }
  .reference-waitlist .wl-dash-banner { align-items: flex-start !important; text-align: left !important; }
  .reference-waitlist .wl-dash-banner > div { text-align: left !important; }
  .reference-waitlist .wl-dash-banner > div:last-child { padding: 0 !important; }
  .reference-waitlist .wl-tier-row { display: grid !important; grid-template-columns: 38px minmax(0, 1fr); gap: 6px 12px !important; }
  .reference-waitlist .wl-tier-icon { grid-row: 1 / 3; align-self: start; }
  .reference-waitlist .wl-tier-benefit { grid-column: 2; max-width: none; text-align: left !important; }
  .reference-waitlist .wl-person-row { flex-wrap: wrap; }
  .reference-waitlist .wl-person-row > div:last-child { margin-left: 44px; flex-wrap: wrap; }
  .reference-waitlist .wl-send-form .input { min-width: 0 !important; flex-basis: 100% !important; }
  .reference-waitlist .wl-send-form .btn { width: 100%; }
  .reference-waitlist .wl-code-row { flex-wrap: wrap; gap: 12px !important; }
  .reference-waitlist .wl-code-row > div:first-child { flex: 1 1 100%; }
  .reference-waitlist .wl-inv-shell > div:first-child { flex-wrap: wrap; }
  .reference-waitlist .wl-access-recovery .btn,
  .reference-waitlist.wl-verification .btn { height: auto; white-space: normal; padding-block: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-waitlist .wl-tab, .reference-waitlist .wl-progress-fill { transition: none; }
}
/* Tertiary actions have a clear hover surface, with no resting bevel or ring. */
html[data-reference-system="true"] .reference-waitlist .btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--fg-2);
}
html[data-reference-system="true"] .reference-waitlist .btn-ghost:hover {
  background: var(--bg-hover);
  border-color: transparent;
  box-shadow: none;
  color: var(--fg);
}

.reference-waitlist .wl-invite-ticket { background: var(--bg-3) !important; border-color: var(--line-2) !important; }
/* Account/editor review: readable supporting text and the same Reference Lab
   controls as the public surfaces. Loaded only by the local adoption layer. */
/* The shared launcher hero is a large display headline. Opt it into Grifter
   explicitly because --font-display defaults to Geist for interface titles. */
html[data-reference-system="true"][data-theme] .dash-hero-title {
  font-family: "Grifter", var(--font-body);
  font-weight: 700;
}

html[data-reference-system="true"][data-theme] :is(
  .cp-row-of, .foot h5, .dash-foot-heading, .dash-tab-count,
  .mem-eyebrow, .mem-empty, .mem-account-sub, .mdisc-shelf-sub,
  .billing-empty-meta, .cint__empty, .credit-empty .s, .profile-page .id-info .id-meta .since, .profile-page .hint,
  .suggest-count, .suggest-count-of, .suggest-toggle, .reference-editor-hint,
  .editor-keyboard-hint, .editor-keyboard-hint span, .editor-keyboard-hint kbd
) {
  color: var(--fg-3);
  opacity: 1;
}

/* Placeholder copy still has to be readable. Legacy fields used the faint
   decorative token, or compounded it with the browser's placeholder opacity. */
html[data-reference-system="true"][data-theme] :is(input, textarea):not(:disabled)::placeholder,
html[data-reference-system="true"][data-theme] #custom-prompt::placeholder {
  color: var(--fg-3) !important;
  opacity: 1;
}

/* Legacy anchor utilities otherwise override the primary button's ink. */
html[data-reference-system="true"][data-theme] a.button:not(.button-secondary):not(.button-danger) {
  background: var(--ref-button-primary-gradient) var(--rx-primary) !important;
  color: var(--rx-primary-ink) !important;
}
html[data-reference-system="true"][data-theme] a.button:not(.button-secondary):not(.button-danger):hover {
  background: var(--rx-primary-hover) !important;
  color: var(--rx-primary-ink) !important;
}

html[data-reference-system="true"][data-theme] :is(#api_panel, #knowledge_panel) .text-green-800,
html[data-reference-system="true"][data-theme] #email_panel .text-green-500 {
  color: var(--success-fg) !important;
}
html[data-reference-system="true"][data-theme] :is(#email_panel .text-red-500, #settings_panel .text-red-600) {
  color: var(--danger-fg) !important;
}
html[data-reference-system="true"][data-theme] :is(#knowledge_panel, #ai_overview_panel) a.text-blue-500 {
  color: var(--fg-2) !important;
  text-decoration: underline;
  text-underline-offset: .2em;
}
html[data-reference-system="true"][data-theme] :is(#knowledge_panel, #ai_overview_panel) a.text-blue-500:hover {
  color: var(--fg) !important;
}
html[data-reference-system="true"][data-theme="light"] #api_panel [class~="bg-[var(--warning-bg)]"] {
  background: color-mix(in srgb, var(--warning-fg) 5%, var(--bg-2));
}

/* The editor sidebar/chat can leave a narrow panel even on a wide viewport.
   Reuse the existing Endpoints/Request controls at the actual panel width. */
html[data-reference-system="true"][data-theme] #api_panel {
  display: block;
  height: 100%;
  container: reference-api / inline-size;
}
html[data-reference-system="true"][data-theme] #api_panel :is(.apiex__detail, input) { min-width: 0; }
@container reference-api (max-width: 760px) {
  html[data-reference-system="true"][data-theme] .apiex { flex-direction: column; }
  html[data-reference-system="true"][data-theme] .apiex__mtabs { display: flex; flex-shrink: 0; }
  html[data-reference-system="true"][data-theme] :is(.apiex__list, .apiex__detail) {
    flex: 1;
    width: 100%;
    min-height: 0;
    border-right: 0;
  }
  html[data-reference-system="true"][data-theme] .apiex[data-api-view="request"] .apiex__list,
  html[data-reference-system="true"][data-theme] .apiex[data-api-view="endpoints"] .apiex__detail { display: none; }
}

/* Bullet Train workflow cards share the auth lockup and surface hierarchy. */
html[data-reference-system="true"][data-theme] .reference-workflow-card {
  padding: clamp(24px, 5vw, 40px);
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
}
html[data-reference-system="true"][data-theme] .reference-workflow-card h1 { color: var(--fg); }
html[data-reference-system="true"][data-theme] .reference-workflow-card .auth-lockup { margin: 0; }
html[data-reference-system="true"][data-theme] .reference-workflow-badge {
  background: var(--bg-3);
  color: var(--fg-2);
  border-color: var(--line);
  border-radius: 8px;
}
html[data-reference-system="true"][data-theme] .reference-workflow-badge .animate-ping { display: none; }
html[data-reference-system="true"][data-theme] .reference-workflow-badge .bg-primary-500 { background: var(--success-fg); }

/* Navigation metadata and skill instructions are readable content, not the
   decorative/disabled fg-4 treatment used by older Computer screens. */
html[data-reference-system="true"][data-theme] :is(
  .computer-nav__heading, .computer-nav__empty, .computer-nav__meta,
  .computer-nav__time, .computer-skill-card__slug, .computer-skill-card__when > span,
  .chat-history__empty, .chat-history__row-time, .computer-chat__earlier,
  .computer-agentpc__loading, .composer-scope-picker__note, .ccon__muted,
  .cinbox__empty, .csched__empty
) { color: var(--fg-3); }

/* Match the shared settings heading rather than inheriting a card-label size.
   These hooks also keep API-key responsive rules attached to the real page. */
html[data-reference-system="true"][data-theme] .reference-account-heading {
  margin-bottom: 32px;
}
html[data-reference-system="true"][data-theme] .reference-account-heading h1 {
  margin: 0;
  color: var(--fg);
  font: 600 clamp(24px, 2.4vw, 32px)/1.2 var(--font-body);
  letter-spacing: -.025em;
}
html[data-reference-system="true"][data-theme] .reference-account-heading p {
  margin-top: 12px;
  color: var(--fg-2);
  font: 400 14px/1.6 var(--font-body);
}
html[data-reference-system="true"][data-theme] .reference-support-form .support-card,
html[data-reference-system="true"][data-theme] .apikeys-page > .rounded-lg {
  border-radius: 12px;
}
html[data-reference-system="true"][data-theme] .reference-support-form .support-card-body {
  padding: 24px;
}
@media (max-width: 639px) {
  html[data-reference-system="true"][data-theme] .reference-support-form .support-card-body {
    padding: 20px;
  }
}
/* App initials use Geist in the reference system. The legacy Grifter cap-height
   offset pushes them below center; do not move the tile or an uploaded logo. */
html[data-reference-system="true"][data-theme] :is(.proj-mark, .computer-nav__appletter, .dash-card .ico--applogo) {
  font-family: var(--font-body);
  line-height: 1;
  letter-spacing: 0;
}
html[data-reference-system="true"][data-theme] .editor-topbar .proj-switch .proj-mark .proj-mark-letter,
html[data-reference-system="true"][data-theme] .dash-card .ico .ico-letter {
  line-height: 1;
  transform: none;
}

/* The editor uses the same canvas and composer roles as the rest of the app.
   Do not alias its working canvas to the control/inset gray. */
html[data-reference-system="true"][data-theme="light"] body[data-reference-editor="true"] .editor-mobile-header {
  background-color: var(--bg);
}

/* Override the legacy bg-white bridge on the composer card itself. */
html[data-reference-system="true"][data-theme="light"] body[data-reference-editor="true"] .chat-composer-card {
  background-color: var(--rx-composer);
}

/* The 36px progress fill sits behind the phase only. Optional deployment
   steps occupy their own neutral row below it. */
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed {
  cursor: default;
}
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--rx-canvas);
  border-color: var(--line);
  box-shadow: none;
}
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed [data-deployment-progress-target="thinBar"] {
  grid-area: 1 / 1;
  height: 100%;
  min-height: 35px;
  border-radius: 0;
  background: var(--rx-canvas);
}
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed [data-deployment-progress-target="bar"].bg-editor-accent-green {
  background: color-mix(in srgb, var(--fg) 9%, var(--rx-canvas));
}
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed [data-deployment-progress-target="details"]:not(.hidden) {
  display: contents;
}
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed [data-deployment-progress-target="details"] > :first-child {
  grid-area: 1 / 1;
  position: relative;
  min-height: 35px;
  padding: 0 16px;
}
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed [data-steps] {
  grid-area: 2 / 1;
}
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed [data-deployment-progress-target="details"] .bg-editor-accent-green {
  background-color: var(--fg-4);
}
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed [data-steps]:not(:has(> *)) {
  display: none;
}
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed :is([data-deployment-progress-target="phase"], [data-deployment-progress-target="percentage"]) {
  font-size: 12px;
  font-weight: 600;
}

/* Collapse remains owned by deployment-progress. A hidden details target
   must not be revived by the grid presentation. The controller adds hover:h-2
   to the thin bar only while collapsed; keep that existing state contract. */
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed [data-deployment-progress-target="details"].hidden { display:none; }
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed [data-deployment-progress-target="thinBar"][class~="hover:h-2"] { height:4px; min-height:4px; }
html[data-reference-system="true"][data-theme] #deployment_progress_bar.deployment-progress--fixed [data-deployment-progress-target="thinBar"][class~="hover:h-2"]:hover { height:8px; min-height:8px; }
html[data-reference-system="true"][data-theme] [data-controller~="deployment-progress"]:not([data-deployment-progress-collapsible-value="false"]) #deployment_progress_bar.deployment-progress--fixed { cursor:pointer; }
html[data-reference-system="true"][data-theme] [data-deployment-progress-collapsible-value="false"] #deployment_progress_bar.deployment-progress--fixed [data-deployment-progress-target="chevron"] { display:none; }

/* Composer organization: one queue surface, then a deliberately separate input.
   Keep visibility controller-owned; the empty panel must occupy no space.
   The plain wrapper is inert outside this local Reference Lab adoption. */
html[data-reference-system="true"][data-theme] .editor-queue-panel:has([data-message-queue-target="queueBanner"]:not(.hidden), .editor-message-queue:not(.hidden), .js-steer-panel:not(.hidden)) {
  --ref-queue-panel-radius: 16px;
  --ref-queue-panel-border: 1px;
  --ref-queue-panel-inset: 8px;
  margin: 8px 12px 0;
  /* The header owns its vertical inset; outer top padding unbalances it. */
  padding: 0 calc(var(--ref-queue-panel-inset) - var(--ref-queue-panel-border)) calc(var(--ref-queue-panel-inset) - var(--ref-queue-panel-border));
  background: var(--bg-2);
  border: var(--ref-queue-panel-border) solid var(--line);
  border-radius: var(--ref-queue-panel-radius);
}
html[data-reference-system="true"][data-theme] .editor-queue-panel:not(:has(.editor-message-queue:not(.hidden), .js-steer-panel:not(.hidden))),
html[data-reference-system="true"][data-theme] .editor-queue-panel[data-queue-disclosure-collapsed="true"]:has(> [data-message-queue-target="queueBanner"]:not(.hidden)) {
  /* The short status strip keeps its compact, non-pill shape. */
  --ref-queue-panel-radius: var(--radius-md);
  padding-bottom: 0;
}
/* Recent steers can outlive the working banner. Keep them visible whenever
   the banner (and therefore the disclosure control) is unavailable. */
html[data-reference-system="true"][data-theme] .editor-queue-panel[data-queue-disclosure-collapsed="true"]:has(> [data-message-queue-target="queueBanner"]:not(.hidden)) > [data-queue-disclosure-target="content"] {
  display: none;
}
html[data-reference-system="true"][data-theme] .editor-queue-toggle {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 6px;
  border: 0;
  border-radius: max(0px, calc(var(--ref-queue-panel-radius) - var(--ref-queue-panel-inset)));
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
}
html[data-reference-system="true"][data-theme] .editor-queue-toggle:not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[data-reference-system="true"][data-theme] .editor-queue-toggle:hover {
  background: var(--hover-bg);
  color: var(--fg);
}
html[data-reference-system="true"][data-theme] .editor-queue-toggle:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
html[data-reference-system="true"][data-theme] .editor-queue-toggle[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}
html[data-reference-system="true"][data-theme] .editor-queue-panel > [data-message-queue-target="queueBanner"] {
  padding: 0;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel .editor-queue-banner {
  min-height: 40px;
  /* The panel supplies the side inset. Match it vertically, counting the
     panel border once, so the edge controls sit evenly inside its corners. */
  padding: calc(var(--ref-queue-panel-inset) - var(--ref-queue-panel-border)) 0;
  gap: 8px 12px;
  align-items: center;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
}
html[data-reference-system="true"][data-theme] .editor-queue-banner__summary {
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
html[data-reference-system="true"][data-theme] .editor-queue-banner__summary [data-queue-status] {
  font-size: 12px;
  line-height: 16px;
  align-items: center;
  white-space: nowrap;
  gap: 8px;
}
html[data-reference-system="true"][data-theme] .editor-queue-banner__count {
  background: transparent;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--fg-3);
  font: 400 12px/16px var(--font-body);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
html[data-reference-system="true"][data-theme] .editor-queue-banner__actions {
  margin-left: auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel :is(.editor-queue-stop, .editor-queue-action) {
  min-height: 28px;
  padding: 4px 8px;
  align-items: center;
  justify-content: center;
  border-radius: max(0px, calc(var(--ref-queue-panel-radius) - var(--ref-queue-panel-inset)));
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel :is(.editor-queue-stop, .editor-queue-action):not(.hidden) {
  display: inline-flex;
}
html[data-reference-system="true"][data-theme] .editor-queue-action:hover {
  background: var(--hover-bg);
}
html[data-reference-system="true"][data-theme] .editor-queue-panel #queue_container.editor-message-queue {
  padding: 4px 0 0;
  border-top: 1px solid var(--line);
  scrollbar-gutter: auto;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel .js-steer-panel {
  padding: 4px 0 0;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel .js-steer-panel:not(.hidden):has(~ .editor-message-queue:not(.hidden)) {
  padding-bottom: 4px;
}
/* Both Turbo and optimistic rows share the panel's single outer inset.
   Trailing wrapper margins must not add a second bottom gap. */
html[data-reference-system="true"][data-theme] .editor-queue-panel .editor-message-queue__group {
  margin-block: 0;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel :is(#queue_container, #queued-messages-list, .steer-messages-list) {
  display: grid;
  gap: 4px;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel :is(#queue_container, #queued-messages-list, .steer-messages-list).hidden {
  display: none;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel :is(#queue_container, #queued-messages-list, .steer-messages-list) > * {
  margin-block: 0;
}
/* Concentric panel → row → action supplies the geometric baseline:
   16px → 8px → 4px, with 8px outer and 4px inner gaps. Queue actions use the
   reviewed 6px optical minimum below, without squeezing either gap. See the
   design guide's Nested corners section for this component exception. */
html[data-reference-system="true"][data-theme] .editor-queue-panel .queued-chip {
  --ref-queue-radius: max(0px, calc(var(--ref-queue-panel-radius) - var(--ref-queue-panel-inset)));
  --ref-queue-inset: 4px;
  --ref-queue-border: 0px;
  --ref-queue-action-size: 32px;
  min-height: calc(var(--ref-queue-action-size) + 2 * var(--ref-queue-inset));
  gap: var(--ref-queue-inset);
  margin-block: 0;
  padding: calc(var(--ref-queue-inset) - var(--ref-queue-border));
  border-radius: var(--ref-queue-radius);
}
html[data-reference-system="true"][data-theme] .editor-queue-panel .queued-chip--steer {
  --ref-queue-border: 1px;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel .queued-chip:not(.queued-chip--steer) {
  background: transparent;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel .queued-chip__content {
  align-self: center;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel .queued-chip__text {
  color: var(--fg);
  line-height: 20px;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel .queued-chip:not(.queued-chip--steer):hover {
  background: var(--hover-bg);
}
html[data-reference-system="true"][data-theme] .editor-queue-panel .queued-chip:not(.queued-chip--steer) .queued-chip__num {
  background: transparent;
  border-color: transparent;
  color: var(--fg-3);
  font-weight: 400;
}
html[data-reference-system="true"][data-theme] .editor-queue-panel .queued-chip__action {
  width: var(--ref-queue-action-size);
  min-height: var(--ref-queue-action-size);
  height: auto;
  align-self: stretch;
  /* Slightly softer than the 4px baseline; shared by neutral and red hovers. */
  border-radius: max(6px, calc(var(--ref-queue-radius) - var(--ref-queue-inset)));
}
html[data-reference-system="true"][data-theme] .editor-composer-wrap {
  padding: 12px 12px 4px;
}
html[data-reference-system="true"][data-theme] .chat-composer-card textarea {
  padding: 18px 20px 10px;
}
html[data-reference-system="true"][data-theme] .editor-composer-toolbar {
  align-items: flex-end;
  gap: 12px;
  padding: 4px 12px 12px;
}
html[data-reference-system="true"][data-theme] .editor-composer-footer {
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 0 8px;
}
html[data-reference-system="true"][data-theme] .editor-composer-footer > :last-child:empty {
  display: none;
}
/* Match production: hints lead, optional actions trail. The bell's right-
   anchored tooltip then opens inward over the composer instead of the rail. */
html[data-reference-system="true"][data-theme] .editor-keyboard-hint {
  min-width: 0;
}
html[data-reference-system="true"][data-theme] .editor-composer-footer > :last-child {
  flex-shrink: 0;
  margin-left: auto;
}
html[data-reference-system="true"][data-theme] .editor-keyboard-hint kbd {
  border: 0;
  padding: 0 2px;
}
/* Respect the server's hidden state: the shared display:flex rule otherwise
   resurrects an empty Suggestions heading and its surrounding whitespace. */
html[data-reference-system="true"][data-theme] [data-reference-editor="true"] .suggest-block.hidden {
  display: none;
}
@media (pointer: coarse) {
  html[data-reference-system="true"][data-theme] .editor-queue-toggle {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
  html[data-reference-system="true"][data-theme] .editor-queue-panel :is(.editor-queue-stop, .editor-queue-action) {
    min-height: 44px;
  }
  html[data-reference-system="true"][data-theme] .editor-queue-panel .queued-chip {
    --ref-queue-action-size: 32px;
  }
  html[data-reference-system="true"][data-theme] .editor-queue-panel .queued-chip__action {
    opacity: 1;
  }
}
/* Apps rail: keep the Reference Lab's compact desktop hierarchy, with real
   touch targets and discoverable actions when it becomes a mobile drawer. */
html[data-reference-system="true"][data-theme] .reference-rail-close { display: none; }
/* Use the supplied vector lockup. The 258×60 artwork keeps its native ratio;
   the collapsed rail exposes only its first 60×60 mark without rescaling. */
html[data-reference-system="true"][data-theme] .computer-nav__lockup {
  display: block;
  flex: 0 0 auto;
  width: calc(var(--rail-brand-size, 28px) * 4.3);
  height: var(--rail-brand-size, 28px);
  overflow: hidden;
}
html[data-reference-system="true"][data-theme] .computer-nav__lockup-image {
  display: block;
  width: calc(var(--rail-brand-size, 28px) * 4.3);
  max-width: none;
  height: var(--rail-brand-size, 28px);
}
html[data-reference-system="true"][data-theme] .computer-nav__lockup-image--light,
html[data-reference-system="true"][data-theme="light"] .computer-nav__lockup-image--dark {
  display: none;
}
html[data-reference-system="true"][data-theme="light"] .computer-nav__lockup-image--light {
  display: block;
}
@media (min-width: 1024px) {
  html[data-reference-system="true"][data-theme] .computer-nav--collapsed .computer-nav__lockup {
    width: var(--rail-brand-size, 28px);
  }
}

html[data-reference-system="true"][data-theme] :is(.computer-nav__proj-count, .computer-nav__pinned, .computer-nav__proj-act) {
  color: var(--fg-3);
}

@media (max-width: 1023px) {
  html[data-reference-system="true"][data-theme] .computer-nav:has(.reference-rail-close) .computer-nav__head-acts {
    width: 90px;
    overflow: visible;
  }
  html[data-reference-system="true"][data-theme] .computer-nav:has(.reference-rail-close) .computer-nav__logo-expand { display: none; }
  html[data-reference-system="true"][data-theme] .reference-rail-close { display: inline-flex; }
  html[data-reference-system="true"][data-theme] :is(
    .computer-nav__headbtn, .computer-nav__newfolder-btn, .computer-nav__seeall,
    .computer-nav__proj-icbtn, .computer-nav__proj-act
  ) {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
  html[data-reference-system="true"][data-theme] .computer-nav:has(.reference-rail-close) .computer-nav__expander { display: none; }
  html[data-reference-system="true"][data-theme] :is(
    .computer-nav__item, .computer-nav__newchat, .computer-nav__proj,
    .computer-nav__kid, .computer-nav__heading--toggle, .computer-nav__proj-name,
    .computer-menu__item, .computer-npm__btn, .computer-npm__x
  ) {
    min-height: 44px;
    height: auto;
  }
  html[data-reference-system="true"][data-theme] .computer-nav__proj-name {
    line-height: 44px;
  }
  html[data-reference-system="true"][data-theme] .computer-nav__proj-acts {
    max-width: none;
    margin-left: 0;
    opacity: 1;
    pointer-events: auto;
  }
  html[data-reference-system="true"][data-theme] .computer-nav__proj-count { display: none; }
  html[data-reference-system="true"][data-theme] .computer-nav__kid {
    padding-left: 12px;
    padding-right: 50px;
    gap: 18px;
  }
  html[data-reference-system="true"][data-theme] .computer-nav__kid-icbtn {
    display: block;
    left: 0;
    top: 0;
    width: 44px;
    height: 44px;
  }
  html[data-reference-system="true"][data-theme] .computer-nav__kid-more {
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    opacity: 1;
    pointer-events: auto;
  }
  /* The status has its own slot before the always-visible action. */
  html[data-reference-system="true"][data-theme] .computer-nav__kid-wrap :is(.computer-nav__kid-st) {
    opacity: 1;
  }
  html[data-reference-system="true"][data-theme] .computer-npm__input { font-size: 16px; }
}

/* Product-switcher trigger uses the same supplied lockup as the plain rail. */
html[data-reference-system="true"][data-theme] .platform-switcher__lockup { display:block; overflow:hidden; flex:none; }
html[data-reference-system="true"][data-theme] .computer-nav--collapsed .platform-switcher--rail .platform-switcher__lockup { width:28px; }
html[data-reference-system="true"][data-theme] :is(.platform-switcher__lockup,.computer-nav__lockup) .brand-full-lockup { max-width:none!important; }
/* The admin shell deliberately stays dark. Resolve controls and status ink
   against that local theme, including when the surrounding page is light. */
html[data-reference-system="true"] .admin-shell :is(.text-blue-600, .text-indigo-600, .text-purple-600, .text-pink-600) {
  color: var(--info-fg);
}
html[data-reference-system="true"] .admin-shell .text-green-600 { color: var(--success-fg); }
html[data-reference-system="true"] .admin-shell .text-red-600 { color: var(--danger-fg); }
html[data-reference-system="true"] .admin-shell .text-orange-600 { color: var(--warning-fg); }
html[data-reference-system="true"] .admin-shell a.text-blue-600 {
  color: var(--fg-2);
  text-decoration: underline;
  text-underline-offset: .2em;
}
html[data-reference-system="true"] .admin-shell a.text-blue-600:hover { color: var(--fg); }

/* Legacy action fills become the Reference Lab primary control. Preserve
   separate destructive red controls and semantic status badges. */
html[data-reference-system="true"] .admin-shell :is(a, button, input[type="submit"]):not(.w-14):is(
  .bg-blue-500, .bg-blue-600, .bg-green-600, .bg-emerald-600, .bg-amber-500, .bg-amber-600
) {
  background: var(--ref-button-primary-gradient) var(--rx-primary);
  color: var(--rx-primary-ink);
  border-color: var(--rx-primary);
  border-radius: 10px;
  box-shadow: none;
  transition: background-color 140ms ease, color 140ms ease;
}
html[data-reference-system="true"] .admin-shell :is(a, button, input[type="submit"]):not(.w-14):is(
  .bg-blue-500, .bg-blue-600, .bg-green-600, .bg-emerald-600, .bg-amber-500, .bg-amber-600
):hover {
  background: var(--rx-primary-hover);
  color: var(--rx-primary-ink);
}

html[data-reference-system="true"] .admin-shell code { overflow-wrap: anywhere; }
html[data-reference-system="true"] .admin-shell .reference-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
html[data-reference-system="true"] .admin-shell .reference-toolbar > * { min-width: 0; margin-left: 0; }
html[data-reference-system="true"] .admin-shell .reference-tabs {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
html[data-reference-system="true"] .admin-shell .reference-tabs > a { flex-shrink: 0; white-space: nowrap; }
html[data-reference-system="true"] .admin-shell .reference-chart-scroll { overflow-x: auto; }
html[data-reference-system="true"] .admin-shell .reference-chart-scroll > div { min-width: 420px; }
html[data-reference-system="true"] .admin-shell .reference-table-scroll { max-width: 100%; overflow-x: auto; }

/* Feature descriptions and identifiers must yield space to the toggle. */
html[data-reference-system="true"] .reference-feature-flags .flex-1 { min-width: 0; overflow-wrap: anywhere; }
html[data-reference-system="true"] .reference-feature-flags .space-x-3 { flex-wrap: wrap; gap: 8px; }
/* Generated account forms need the component contract, not only neutral paint.
   Shared hooks also cover forms supplied by Bullet Train gems. Table/resource
   pages keep their wider container. All rules remain local-review opt-in. */
html[data-reference-system="true"][data-theme] .ds-bt-page:has(.ds-bt-box .form):not(:has(.box-table)) {
  max-width: 896px;
}
html[data-reference-system="true"][data-theme] .ds-bt-page:has(.ds-bt-box .form) .ds-bt-page-divider {
  display: none;
}
html[data-reference-system="true"][data-theme] .ds-bt-box:has(.form):not(:has(.box-table)) {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
html[data-reference-system="true"][data-theme] .ds-bt-box:has(.form) > .ds-bt-box-heading,
html[data-reference-system="true"][data-theme] .ds-bt-box:has(.form) > div > .ds-bt-box-body {
  padding: 24px;
}
html[data-reference-system="true"][data-theme] .ds-bt-box:has(.form) .ds-bt-box-title {
  font: 600 18px/1.4 var(--font-body);
  letter-spacing: -.015em;
}
html[data-reference-system="true"][data-theme] .ds-bt-box:has(.form) .ds-bt-box-desc {
  font: 400 14px/1.6 var(--font-body);
  color: var(--fg-2);
  margin-top: 8px;
}
html[data-reference-system="true"][data-theme] .ds-bt-box .form > div + div {
  margin-top: 24px;
}
html[data-reference-system="true"][data-theme] .ds-bt-field-label {
  color: var(--fg-2);
  font: 600 13px/1.5 var(--font-body);
}
html[data-reference-system="true"][data-theme] .ds-bt-input:not([type="checkbox"],[type="radio"],[type="file"],.select2-hidden-accessible) {
  min-height: 40px;
  padding: 9px 14px;
  font: 500 14px/20px var(--font-body);
  border-radius: 8px;
  /* Beat the legacy dark:bg-slate-* utility bridge, which otherwise paints
     fields as cards. State borders/rings remain in field_focus_styles. */
  background-color: var(--rx-field) !important;
}
html[data-reference-system="true"][data-theme] .ds-bt-input:is(:disabled,[readonly]) {
  background-color: var(--rx-readonly) !important;
}
html[data-reference-system="true"][data-theme] .ds-bt-input[aria-invalid="true"] {
  background-color: color-mix(in srgb, var(--danger-fg) 10%, var(--rx-field)) !important;
}
html[data-reference-system="true"][data-theme] .ds-bt-box .select2-container--default .select2-selection--single {
  height: 40px !important;
  min-height: 40px;
  padding-inline: 14px 40px !important;
  font: 500 14px/20px var(--font-body);
}
html[data-reference-system="true"][data-theme] .select2-dropdown {
  font: 500 14px/1.5 var(--font-body);
}
html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--ref-button-radius);
  font: 500 14px/20px var(--font-body);
  text-decoration: none;
}
html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons .button-secondary {
  background: transparent;
  color: var(--fg-2);
  box-shadow: none;
}
html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons > :is(input, button) {
  padding: 9px 14px !important;
  font: 500 14px/20px var(--font-body) !important;
  border-radius: var(--ref-button-radius) !important;
}
html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons > .button:not(.button-secondary,.button-danger) {
  background: var(--ref-button-primary-gradient) var(--rx-primary) !important;
  color: var(--rx-primary-ink) !important;
}
html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons > .button:not(.button-secondary,.button-danger):hover:not(:disabled,[aria-disabled="true"]) {
  background: var(--ref-button-primary-gradient-hover) var(--ref-button-primary-hover) !important;
}
html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons .button-secondary:hover {
  background: var(--rx-hover);
  color: var(--fg);
  text-decoration: none;
}
html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons .reference-form-destroy {
  margin-inline-start: auto;
  color: var(--danger-fg);
  background: transparent;
}
html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons .reference-form-destroy:hover {
  background: color-mix(in srgb, var(--danger-fg) 10%, transparent);
}
html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons > :focus-visible {
  outline: 2px solid var(--ref-keyboard-focus);
  outline-offset: 3px;
}
@media (max-width: 639px) {
  html[data-reference-system="true"][data-theme] .ds-bt-box:has(.form) > .ds-bt-box-heading,
  html[data-reference-system="true"][data-theme] .ds-bt-box:has(.form) > div > .ds-bt-box-body {
    padding: 20px;
  }
  html[data-reference-system="true"][data-theme] .ds-bt-input:not([type="checkbox"],[type="radio"],[type="file"],.select2-hidden-accessible) {
    min-height: 44px;
    font-size: 16px;
  }
  html[data-reference-system="true"][data-theme] .ds-bt-box .select2-container--default .select2-selection--single {
    height: 44px !important;
    font-size: 16px;
  }
  html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons > * {
    min-height: 44px;
  }
  html[data-reference-system="true"][data-theme] .ds-bt-box .form .buttons .reference-form-destroy {
    flex-basis: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
  }
}
/* Component composition over reference_foundations.css. */
/* Chat cards sit closer to the canvas than general content panels. Scope the
   legacy surface aliases so message/tool cards, tasks and queue share the
   quieter fill, while composer and floating menus retain explicit roles. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(#chat_panel,.chat-state-lab) {
 --bg-2:var(--rx-chat-panel);
 --rx-surface-selected:var(--rx-chat-selected);
}
/* Thinking and model selectors are siblings, so both use the same compact
   control radius. Include the Lab's interactive composer explorations. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is([data-thinking-effort-target="button"],[data-model-selector-target="button"],.rx-intelligence-trigger,.rx-model-trigger) {
 border-radius:8px;
}
/* Reference Lab's isolated rail uses the same role as the real apps rail,
   including the logo's hover replacement. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.rx-apps-rail,.rxa-logo-expand) {
 background-color:var(--rx-rail);
}
/* Keep the recessed dark rail separated by a quiet divider. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme="dark"] :is(.computer-nav,.rx-apps-rail) {
 border-right-color:var(--line);
}
/* The editor recesses chat, header and surrounding gutters together. Keep this
   darker canvas local to the editor, leaving dashboard/marketing surfaces alone. */
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme="dark"] [data-controller~="editor-layout"] {
 /* --ed-canvas follows this --bg from theme.css, the one --ed-* site. */
 --bg:var(--rx-editor-canvas);
}
/* Preview sits above chat and shell in both appearances:
   white over soft gray, or panel over the darker editor canvas. The app iframe owns its theme. */
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] :is(#preview_frame,.pf-shell,.preview-state-overlay) {
 background-color:var(--rx-preview);
}
/* Floating composer menus must outrank the legacy dark utility bridge, which
   otherwise paints the thinking menu as a regular content panel. The hero
   Add/More menus share this surface instead of the older bg-2 and deep shadow. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.think-menu[data-thinking-effort-target="menu"],.composer-popover,.ed-flyout,.nah .nah-pop) {
 background-color:var(--rx-overlay); border-color:var(--rx-overlay-border); box-shadow:var(--rx-floating-shadow);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .nah :is(.nah-add-item,.nah-idea):hover { background:var(--rx-overlay-hover); }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .think-menu .think-menu__head {
 background:transparent;
}
/* Flat fills in every state, including loading and keyboard focus. Preserve
   focus rings, error colors, dimensions and the featured brand/Prism action. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .btn:is(.btn-primary,.btn-secondary,.btn-light,.btn-ghost):not(.rx-prism-action,.icon-btn,.btn-icon) {
 background-image:none!important;
 font-weight:500;
 transition:background-color 160ms ease,color 160ms ease;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .btn:is(.btn-primary,.btn-secondary,.btn-light,.btn-ghost):not(.rx-prism-action,.icon-btn,.btn-icon,:focus-visible) {
 box-shadow:none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .btn:is(.btn-secondary,.btn-light) {
 color:var(--fg-2);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .btn:is(.btn-secondary,.btn-light):is(:hover,.ref-hover-preview):not(:disabled,[aria-disabled="true"]) {
 color:var(--fg);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .btn.btn-ghost:not(.rx-prism-action) {
 background-color:transparent; border-color:transparent; color:var(--fg-2);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .btn.btn-ghost:is(:hover,.ref-hover-preview):not(:disabled,[aria-disabled="true"]) {
 background-color:var(--rx-secondary); border-color:transparent; color:var(--fg);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] body { font-weight:400; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.text-body-lg,.text-body-md,.text-body,.text-body-sm,.sg-section-lede) { font-weight:400; }
/* Grifter ends at the Large Heading role; Medium Heading and smaller use Geist.
   Keep the UI display token intact so small component titles stay in Geist. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.text-heading-md,.text-heading-sm) { font-family:var(--font-body); font-weight:600; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.text-display-xl,.text-display-lg,.text-display-md,.text-heading-lg) { font-family:"Grifter","Geist",system-ui,sans-serif; font-weight:700; }
/* Headings establish hierarchy through weight and ink, descriptions through
   line length and body ink. The existing large-headline Grifter rules remain. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.text-heading-lg,.text-heading-md,.text-heading-sm,.auth-title,.pf-title,.preview-state-heading,.sg-section > h2) {
 color:var(--fg);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.sg-section-lede,.auth-subtitle) {
 color:var(--fg-2); line-height:1.65;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.sg-card > h3,.ref-nav-group-title,.ref-semantic-heading) {
 color:var(--fg-3); font-weight:500;
}
/* Reference specimen: the three text roles shown together in real context. */
.ref-hierarchy-example { padding:28px; margin:28px 0; border:1px solid var(--line); border-radius:16px; background:var(--bg-2); }
.ref-hierarchy-example__meta { margin:0 0 12px; color:var(--fg-3); font:500 12px/1.5 var(--font-body); }
.ref-hierarchy-example__title { margin:0 0 12px; color:var(--fg); font:600 28px/1.2 var(--font-body); letter-spacing:-.03em; }
.ref-hierarchy-example__body { margin:0; max-width:60ch; color:var(--fg-2); font:400 15px/1.7 var(--font-body); }
.ref-hierarchy-example__roles { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font:400 13px/1.5 var(--font-body); }
@media(prefers-reduced-motion:reduce) {
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .btn:is(.btn-primary,.btn-secondary,.btn-light,.btn-ghost) { transition:none; }
}
@media(forced-colors:active) {
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .btn { forced-color-adjust:auto; }
}

/* Resting controls have a quiet edge, modestly clearer than decorative lines.
   Keep native/error/readonly/disabled states and composite inputs authoritative. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.composer,.chat-composer-card):not(:where([data-oauth-app-themed="true"] *)) {
 background-color:var(--rx-composer)!important;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] {
 --field-border:var(--rx-field-border); --field-bg:var(--rx-field);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(input:not([type]),input:is([type="text"],[type="email"],[type="password"],[type="search"],[type="url"],[type="tel"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"]),textarea,select,button[role="combobox"],.combo,.rx-select-trigger,.select2-selection,[contenteditable="true"][role="textbox"]):not(:disabled,[readonly],[aria-readonly="true"],[aria-disabled="true"],[aria-invalid="true"],[aria-expanded="true"],.error,.is-invalid,:focus,:focus-within,:open):not(:where([data-oauth-app-themed="true"] *,[data-reference-field-focus="native"],.cm-editor *,.monaco-editor *,.CodeMirror *,.field_with_errors *,.select2-container--disabled *,.select2-container--open *,.composer *,.chat-composer-card *,.dash-composer *,[data-reference-field-shell] *,.cint__search *,.ctpl__search *,.ti-search *,.mem-search *,.computer-picker__search *,.url-field *,.pm-subdomain-input-wrap *,.dash-search *,.aref-search *,.hd-search *,.computer-library__search *,.ccon__search *,.wsid-handle *,.cd-input-wrap *,.hero2-composer *,.editor-chat-input *,.ref-compose *,.reference-generator-form > div *,.anonymous-build-entry form > div *,.oscmdk__input,.admin-cmdk__input)) {
 border-color:var(--rx-field-border)!important;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.composer,.chat-composer-card,.dash-composer,[data-reference-field-shell],.cint__search,.ctpl__search,.ti-search,.mem-search,.computer-picker__search,.url-field,.pm-subdomain-input-wrap,.dash-search,.aref-search,.hd-search,.computer-library__search,.ccon__search,.wsid-handle,.cd-input-wrap,.hero2-composer,.editor-chat-input,.ref-compose,.reference-generator-form > div,.anonymous-build-entry form > div):not(:has(:is(input,textarea):focus,[aria-invalid="true"],.error,.is-invalid)):not(.is-invalid):not(:where([data-oauth-app-themed="true"] *)) {
 border-color:var(--rx-field-border)!important;
}
/* Selected controls retain their original neutral fill and existing icon or
   checkmark. Reserve the green double ring for actual keyboard/field focus. */

/* Selection is a persistent neutral fill + checkmark. The native base-select
   picker must not borrow the generic grey focus token as selection chrome.
   Keyboard focus uses an explicit inset brand outline, separate from selection. */
@supports(appearance:base-select) {
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] select:not([multiple]):not([size]):not(:where([data-oauth-app-themed="true"] *,[data-reference-field-focus="native"])) option {
  outline:none; box-shadow:none;
 }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] select:not([multiple]):not([size]):not(:where([data-oauth-app-themed="true"] *,[data-reference-field-focus="native"])) option:checked {
  background:var(--rx-overlay-selected);
 }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] select:not([multiple]):not([size]):not(:where([data-oauth-app-themed="true"] *,[data-reference-field-focus="native"])) option:checked:hover {
  background:var(--rx-overlay-selected-hover);
 }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] select:not([multiple]):not([size]):not(:where([data-oauth-app-themed="true"] *,[data-reference-field-focus="native"])) option:focus-visible {
  outline:2px solid var(--ref-brand-detail); outline-color:var(--ref-brand-detail)!important; outline-offset:-2px;
 }
}

/* Clean transcript boundaries and a thin neutral resize indicator. Keep an
   12px transparent hit area so the 1px visual line remains easy to grab. The
   legacy controller's inline blue drag fill is intentionally suppressed. */
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #chat_panel {
 --ref-resize-indicator:#A8A8A8;
}
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #chat_panel [data-chat-edge-fade] { display:none; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #chat_container { padding-bottom:12px; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #chat_panel > [data-resizable-panel-target="handle"] {
 width:12px; right:-4px; background:transparent!important; opacity:1!important; box-shadow:none; z-index:51;
}
/* The hit area reaches 8px into chat and 4px into preview. Allow just that
   overlap while open; collapsed chat keeps its normal clipping. */
@media (min-width:1024px) {
 html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] [data-editor-layout-chat-open="true"] #chat_panel { overflow:clip; overflow-clip-margin:4px; }
 html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #chat_panel > [data-resizable-panel-target="handle"]::after {
  content:""; position:absolute; right:3px; top:clamp(var(--resize-indicator-top,8px),calc(var(--resize-pointer-y,50%) - 100px),calc(100% - 208px)); width:1px; height:min(200px,calc(100% - var(--resize-indicator-top,8px) - 8px)); border-radius:999px; background:var(--ref-resize-indicator); opacity:0; pointer-events:none; transition:opacity 120ms ease;
 }
 html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] [data-editor-layout-chat-open="true"] #chat_panel > [data-resizable-panel-target="handle"]:is(:hover,:active)::after { opacity:1; }
}
/* Flat selection controls, 2026-09-26. Shared verbatim with the Reference Lab.
 * Keep native inputs, label hit areas and state semantics; CFAI stays separate. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme="light"] {
 --ref-control-fill:var(--ref-brand-soft); --ref-control-ink:#FFFFFF;
 --ref-control-off:var(--rx-secondary-active); --ref-control-thumb:#FFFFFF;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme="dark"] {
 --ref-control-fill:var(--ref-brand-soft); --ref-control-ink:#102016;
 --ref-control-off:var(--rx-secondary-active); --ref-control-thumb:var(--fg);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] {
 --ref-selection-ink:var(--ref-control-fill); --ref-selection-glyph:var(--ref-control-ink);
 --ref-toggle-edge:var(--ref-control-fill); --ref-toggle-knob:var(--ref-control-ink);
 --ref-control-edge:color-mix(in srgb,var(--fg-3) 78%,var(--bg-2));
 --switch-track-off:var(--ref-control-off);
}
/* Both switch DOM forms have exactly the same geometry. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.switch,.toggle) {
 --ref-switch-width:60px; --ref-switch-height:28px; --ref-switch-thumb-width:34px;
 --ref-switch-thumb-height:22px; --ref-switch-travel:20px;
 width:var(--ref-switch-width); height:var(--ref-switch-height);
 flex-shrink:0;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.switch.sm,.toggle.sm) {
 --ref-switch-width:48px; --ref-switch-height:24px; --ref-switch-thumb-width:26px;
 --ref-switch-thumb-height:18px; --ref-switch-travel:16px;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.switch .track,.toggle) {
 background:var(--ref-control-off); border:1px solid var(--ref-control-edge);
 border-radius:999px; box-shadow:none;
 transition:background-color 160ms ease,border-color 160ms ease;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .switch .knob,
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .toggle::after {
 width:var(--ref-switch-thumb-width); height:var(--ref-switch-thumb-height);
 background:var(--ref-control-thumb); border-radius:999px;
 box-shadow:0 1px 2px color-mix(in srgb,var(--fg) 14%,transparent);
 transform:translateX(0);
 transition:transform 180ms ease,background-color 160ms ease;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .switch .knob { top:3px; left:3px; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .toggle::after { top:2px; left:2px; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .switch input:checked ~ .track,
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .toggle:checked {
 background:var(--ref-control-fill)!important; border-color:var(--ref-control-fill)!important;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .switch input:checked ~ .knob,
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .toggle:checked::after {
 transform:translateX(var(--ref-switch-travel)); background:var(--ref-control-ink);
 box-shadow:none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(input.checkbox,input.radio) {
 background:var(--rx-field,var(--field-bg)); border-color:var(--ref-control-edge);
 box-shadow:none; accent-color:var(--ref-control-fill);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] input.radio:checked {
 background:var(--ref-control-fill)!important; border-color:var(--ref-control-fill)!important;
}
/* Native and auth-proxy checkboxes share a flat fill and black mark. A visible
   neutral outline preserves the control boundary on light backgrounds. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] input.checkbox:is(:checked,:indeterminate):not([data-oauth-app-themed="true"] *),
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .auth-check-input:checked + .auth-check-box:not([data-oauth-app-themed="true"] *) {
 background:var(--ref-checkbox-fill)!important;
 border-color:var(--ref-control-edge)!important;
 color:var(--ref-checkbox-ink);
 box-shadow:none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] input.checkbox:checked:not([data-oauth-app-themed="true"] *)::after { border-color:var(--ref-checkbox-ink); }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] input.radio:checked::after { background:var(--ref-control-ink); }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] input.checkbox:indeterminate:not([data-oauth-app-themed="true"] *)::after {
 content:""; width:8px; height:2px; border:0; border-radius:1px;
 background:var(--ref-checkbox-ink); transform:none;
}
/* Focus is independent of pointer hover and does not change the control size.
   The ring reads --focus-ring-color, the named role (which resolves to this
   same --ref-keyboard-focus value), never --accent: a hard brand-green outline
   is banned app-wide and spec/javascript/focus_ring_soft_spec.rb enforces it.
   Naming the role matters now that the CHECKED fill is brand green — the ring
   must not follow the fill. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.checkbox,.radio,.toggle):focus-visible,
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .switch input:focus-visible ~ .track {
 outline:2px solid var(--focus-ring-color); outline-offset:3px; box-shadow:none;
}
@media(prefers-reduced-motion:reduce) {
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.switch .track,.switch .knob,.toggle,.checkbox,.radio),
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .toggle::after { transition:none!important; }
}
@media(forced-colors:active) {
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(input.checkbox,.auth-check-box):not([data-oauth-app-themed="true"] *) {
  --ref-checkbox-fill:Highlight; --ref-checkbox-ink:HighlightText;
  --ref-control-edge:ButtonText; forced-color-adjust:none;
 }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .auth-check-input:not(:checked) + .auth-check-box:not([data-oauth-app-themed="true"] *) {
  background:Canvas; border-color:ButtonText;
 }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .auth-check-input:focus-visible + .auth-check-box:not([data-oauth-app-themed="true"] *) { outline-color:Highlight; }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] {
  --ref-control-fill:Highlight; --ref-control-ink:HighlightText;
  --ref-control-off:Canvas; --ref-control-thumb:CanvasText; --ref-control-edge:ButtonText;
 }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.switch .track,.switch .knob,.toggle,.checkbox,.radio),
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .toggle::after { forced-color-adjust:none; }
}
/* Grouped account menu: one recipe for header, classic rail and editor rail.
   Above-trigger placement stays owned by positionAboveTrigger. Only the body
   scrolls; identity, appearance and sign-out remain visible on laptop screens. */
/* A sticky rail creates its own stacking context even with z-index:auto.
   Raise that context above page content and sticky headers, below dialogs;
   the credit dialog uses layer 70, independently of the shared modal token.
   Raising only the
   nested account menu cannot lift it above app cards in the adjacent column.
   Touch drawers retain their existing backdrop/header layer ordering. */
@media (min-width:1024px) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .os-rail-shell > .computer-nav { z-index:calc(var(--z-sticky) + 1); }
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu {
  width: 296px;
  min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: min(680px, var(--os-account-panel-max-h, calc(100dvh - 88px)));
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--rx-overlay-border);
  border-radius: 16px;
  background: var(--rx-overlay);
  overflow: hidden;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu:not(.hidden) { display: flex; flex-direction: column; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-head {
  flex: 0 0 auto; padding: 10px 12px 12px; margin: 0 0 4px; border-bottom: 1px solid var(--line);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-name { font-size: 14px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-team { margin-top: 3px; font: 400 12px/18px var(--font-body); color: var(--fg-3); letter-spacing: 0; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu__scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu__group { padding: 3px 0 7px; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu__group + .reference-account-menu__group { border-top: 1px solid var(--line); padding-top: 7px; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-section-label { padding: 4px 12px 5px; font: 500 11px/16px var(--font-body); color: var(--fg-3); text-transform: none; letter-spacing: 0; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-item { display: flex; align-items: center; width: 100%; min-height: 36px; height: auto; padding: 8px 12px; gap: 10px; border: 0; border-radius: 8px; font: 400 13px/20px var(--font-body); text-align: left; color: var(--fg-2); background: transparent; box-shadow: none; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-item svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--fg-3); }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-item:hover { color: var(--fg); background: var(--rx-overlay-hover); }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-item--active { background: var(--rx-overlay-selected); color: var(--fg); }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-check { color: var(--ref-brand-detail); margin-left: auto; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-item:focus-visible { outline: 2px solid var(--ref-brand-detail)!important; outline-offset: -2px!important; box-shadow: none!important; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu__footer { flex: 0 0 auto; border-top: 1px solid var(--line); padding-top: 6px; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .ds-appearance { margin: 0; padding: 4px 12px 10px; gap: 12px; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .ds-appearance__label { padding-left: 0; text-align: left; font-size: 13px; font-weight: 400; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-item--danger { color: var(--danger-fg); }
/* Match the rail's danger tint and outrank the generic menu hover. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-item--danger:is(:hover,:focus-visible) { color: var(--danger-fg); background: color-mix(in srgb, var(--danger-fg) 12%, transparent); }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-item--danger svg { color: inherit; }
@media (pointer: coarse) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu .nav-user-menu-item { min-height: 44px; }
}

/* The Appearance track needs its own surface against an overlay menu;
   bg-3 nearly matches that parent in dark mode. Preserve the shared thumb. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .ds-appearance .seg {
  background: var(--rx-overlay-selected);
  border-color: var(--line-2);
}

/* Pointer opening must not inherit a ring from an earlier keyboard opening. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-account-menu[data-focus-origin="pointer"] .nav-user-menu-item:focus-visible { outline: none!important; box-shadow: none!important; }

/* Existing menus keep their original actions and scroll as one body. */
html[data-reference-system="true"][data-theme] .reference-account-menu:not(:has(.reference-account-menu__scroll)) {
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-reference-system="true"][data-theme] .reference-account-menu:not(.hidden):not(:has(.reference-account-menu__scroll)) {
  display: block;
}
/* Conditional editor states must use the same surfaces as the always-visible
   composer. Attribute hooks survive Turbo and client-rendered task updates. */
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] [data-reference-legacy-activity] { display:none!important; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-completed-thought { display:block; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-reply-activity {
 display:grid; grid-template-columns:20px minmax(0,1fr) 24px; align-items:center; gap:8px;
 width:100%; max-width:100%; min-width:0; min-height:24px; margin-top:8px; color:var(--fg-3); font:400 12px/20px var(--font-body);
}
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-reply-activity__label {
 display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] .reference-reply-activity__cancel {
 display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
 padding:0; border:0; border-radius:4px; background:transparent; color:var(--fg-3); opacity:.6;
 text-decoration:none; transition:color 140ms ease,background-color 140ms ease,opacity 140ms ease;
}
.reference-reply-activity-preview { min-width:0; max-width:100%; padding:12px; margin:12px 0; border:1px solid var(--line); border-radius:12px; color:var(--fg-2); background:var(--rx-panel); font:400 12px/1.5 var(--font-body); }
.reference-reply-activity-preview__heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.reference-reply-activity-preview__heading h3 { margin:0; font:600 13px/20px var(--font-body); color:var(--fg); }
.reference-reply-activity-preview__heading > span { flex-shrink:0; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.reference-reply-activity-preview > p { margin:8px 0; color:var(--fg-3); }
.reference-reply-activity-preview__controls { display:flex; align-items:flex-end; flex-wrap:wrap; gap:8px; margin:12px 0; }
.reference-reply-activity-preview__controls label { display:grid; gap:4px; flex:1 1 200px; min-width:0; }
.reference-reply-activity-preview__controls :is(select,button) { min-height:32px; max-width:100%; padding:6px 8px; color:var(--fg-2); background:var(--bg-3); border:1px solid var(--line); border-radius:var(--radius-sm); font:500 12px/18px var(--font-body); }
.reference-reply-activity-preview__controls select { width:100%; min-width:0; }
.reference-reply-activity-preview__controls button { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; white-space:nowrap; }
.reference-reply-activity-preview__controls button:hover:not(:disabled) { background:var(--hover-bg); color:var(--fg); }
.reference-reply-activity-preview__controls button:disabled { opacity:.45; cursor:default; }
.reference-reply-activity-preview__controls :is(select,button):focus-visible { outline:2px solid var(--focus-ring-color); outline-offset:2px; }
.reference-reply-activity-preview__navigation { display:flex; align-items:center; gap:6px; }
.reference-reply-activity-preview__stage { min-width:0; min-height:50px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--rx-canvas); }
html[data-reference-system="true"][data-theme] .reference-reply-activity-preview__stage .reference-reply-activity { margin-top:0; }
.reference-reply-activity-preview__empty { min-height:24px; display:flex; align-items:center; color:var(--fg-3); }
.reference-reply-activity-preview__note { min-height:36px; overflow-wrap:anywhere; }
@media(pointer:coarse) { .reference-reply-activity-preview__controls :is(select,button) { min-height:44px; } }
/* Keep cancellation neutral at rest; pointer and keyboard intent share danger ink. */
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] [data-reference-chat-cancel]:is(:hover,:focus-visible) {
 color:var(--danger-fg); background:var(--rx-surface-hover); opacity:1;
}
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] [data-reference-chat-cancel]:focus-visible {
 outline:2px solid var(--focus-ring-color); outline-offset:2px;
}
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card {
 background:var(--bg-2); color:var(--fg-2); border:1px solid var(--line); border-radius:16px; box-shadow:none; font:400 13px/1.5 var(--font-body);
}
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="header"] {
 padding:10px 12px; background:transparent; border-color:var(--line); outline-offset:-3px;
}
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="header"]:hover:not(:has(button:hover)) { background:color-mix(in srgb,var(--rx-surface-hover) 35%,var(--bg-2)); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="header"]:focus-visible { outline:2px solid var(--ref-focus); border-radius:12px; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="header"] > .flex { gap:8px; flex-wrap:nowrap; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="header"] .font-medium { color:var(--fg); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card :is(.text-xs,[data-task-progress-target="percentage"]) { color:var(--fg-3); font-size:12px; font-variant-numeric:tabular-nums; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="header"] > .h-1\.5 { height:3px; background:var(--line); margin-top:6px; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="progressBar"] { background:var(--ref-brand-soft); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="taskList"] { max-height:none; overflow:visible; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card ul { display:grid; gap:4px; padding:6px; margin:0; list-style:none; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card li[data-task-id] { display:flex; gap:8px; align-items:center; padding:6px 12px; margin:0; border:0; border-radius:10px; min-height:32px; background:transparent; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card li[data-task-id] > * { margin:0; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card li[data-task-id] .text-sm { font-size:13px; line-height:20px; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card li:is([data-status="in_progress"],[data-status="blocked"]) { background:var(--rx-surface-selected); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card li[data-status="in_progress"] .text-sm { color:var(--fg); font-weight:500; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card li[data-status="completed"] .text-sm { color:var(--fg-3); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card svg[data-task-lucide] { width:16px; height:16px; display:inline-block; flex-shrink:0; vertical-align:-3px; color:var(--fg-3); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card svg:is(.fa-check,.fa-check-circle,.fa-circle-notch) { color:var(--ref-brand-soft); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card svg:is(.fa-clock,.fa-hand-paper,.fa-pause-circle,.fa-exclamation-triangle) { color:var(--warning-fg); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card :is(svg.fa-circle-exclamation,svg.fa-times-circle,[data-status="failed"] .text-sm,[data-status="failed"] .mt-0\.5) { color:var(--danger-fg); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card[data-task-paused="true"] .fa-spin,html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card[data-task-stale="true"] .fa-spin { animation:none; color:var(--warning-fg); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card :is(button,[data-task-progress-target="pauseControls"] > span) { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:5px 8px; min-height:28px; border:1px solid var(--line); border-radius:8px; background:var(--bg-3); color:var(--fg-2); font:500 12px/1.4 var(--font-body); transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card button:hover { background:var(--rx-overlay-selected-hover); border-color:var(--line-2); color:var(--fg); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card button svg[data-task-lucide] { margin:0; width:11px; height:11px; color:inherit; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="estimatedTime"] { padding:9px 12px; background:transparent; border-color:var(--line); color:var(--fg-3); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="estimatedTime"] span { color:inherit; }
@media(prefers-reduced-motion:reduce) {
 html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card :is(.fa-spin,.animate-pulse) { animation:none; }
 html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target] { transition:none; }
}
/* Compact, single-line rows. The full list expands naturally; no nested
   scrollbar or 400px collapse cap may hide tasks. Header still controls collapse. */
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card:has([data-task-progress-target="header"][aria-expanded="true"]) [data-task-progress-target="collapsibleContent"] { max-height:none!important; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="header"] .fa-tasks { display:none; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card button svg.fa-pause { fill:currentColor; stroke:none; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card button:active { background:var(--rx-overlay-active); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card button:focus-visible { outline:2px solid var(--ref-focus); outline-offset:2px; }
/* Omit routine completion/ETA chatter, preserving actionable recovery states. */
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card[data-task-paused="false"][data-task-stale="false"]:not(:has([data-status="blocked"],[data-status="failed"])) [data-task-progress-target="estimatedTime"] { display:none; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card [data-task-progress-target="estimatedTime"] > div { gap:8px; flex-wrap:wrap; }
/* Match the 12px queue-to-composer gap, including the real editor fixture. */
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] [data-chat-form-wrapper]:has(#task_progress_container:not(.hidden)) .editor-queue-panel:has([data-message-queue-target="queueBanner"]:not(.hidden), .editor-message-queue:not(.hidden), .js-steer-panel:not(.hidden)) { margin-top:12px; }
@media(pointer:coarse) {
 html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #task_progress_card button { min-height:36px; }
}
/* A very long plan uses the chat column's normal overflow instead of a
   scrollbar inside the task card. Do not clip the task list or composer. */
@media(min-width:1024px) {
 html[data-reference-system="true"][data-theme] #chat_panel:has(#task_progress_container:not(.hidden)) > [data-controller~="chat-scroller"] { overflow-y:auto; }
 html[data-reference-system="true"][data-theme] #chat_panel:has(#task_progress_container:not(.hidden)) #chat_container { min-height:100px; }
 html[data-reference-system="true"][data-theme] .editor-chat-input-wrapper:has(#task_progress_container:not(.hidden)) { flex-shrink:0; }
}
@media(min-width:1024px) and (max-height:1000px) and (pointer:fine) {
 html[data-reference-system="true"][data-theme] [data-chat-form-wrapper]:has(#task_progress_container:not(.hidden)) .queued-chip:not(.queued-chip--steer) { --ref-queue-action-size:28px; }
}
@media(min-width:1024px) and (max-height:1000px) {
 html[data-reference-system="true"][data-theme] [data-chat-form-wrapper]:has(#task_progress_container:not(.hidden)) .chat-composer-card textarea:placeholder-shown { min-height:80px; height:80px!important; }
}
/* The local fixture uses a native disclosure so laptop reviews keep the
   task/composer visible. Expanding it stays within the preview-side width. */
.reference-chat-preview-controls { position:fixed; top:120px; right:28px; z-index:90; max-width:min(630px,calc(100vw - 56px)); background:var(--rx-overlay); border:1px solid var(--line); border-radius:12px; box-shadow:var(--rx-floating-shadow); color:var(--fg-2); font:12px/1.4 var(--font-body); }
.reference-chat-preview-controls > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:10px 12px; cursor:pointer; list-style:none; }
.reference-chat-preview-controls > summary::-webkit-details-marker { display:none; }
.reference-chat-preview-controls > summary svg { transition:transform 140ms ease; }
.reference-chat-preview-controls[open] > summary svg { transform:rotate(180deg); }
.reference-chat-preview-controls strong { color:var(--fg); font-weight:600; }
.reference-chat-preview-controls__body { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:0 12px 12px; }
.reference-chat-preview-controls__body > [role="status"] { width:100%; color:var(--fg-3); }
.reference-chat-preview-controls :is(select,button,a) { font:inherit; color:var(--fg-2); padding:7px 9px; min-height:32px; max-width:100%; background:var(--bg-3); border:1px solid var(--line); border-radius:7px; }
.reference-chat-preview-controls :is(summary,select,button,a):focus-visible { outline:2px solid var(--focus-ring-color); outline-offset:2px; }
.reference-chat-preview-controls button:disabled { opacity:.5; }
.reference-chat-preview-controls a { text-decoration:underline; }
@media(max-width:1279px) { .reference-chat-preview-controls { max-width:min(360px,calc(100vw - 56px)); } }
@media(max-width:1023px) { .reference-chat-preview-controls { top:60px; right:12px; max-width:calc(100vw - 24px); } }
/* Keep the review controls clear of the deployment checklist being inspected. */
.reference-chat-preview-controls[data-preview-progress="true"] { top:auto; bottom:24px; max-width:min(360px,calc(100vw - 56px)); }
@media(max-width:1023px) { .reference-chat-preview-controls[data-preview-progress="true"] { bottom:76px; max-width:calc(100vw - 24px); } }
@media(prefers-reduced-motion:reduce) { .reference-chat-preview-controls > summary svg { transition:none; } }

/* Deployment steps sit below the progress fill on their own quiet surface. */
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #deployment_progress_bar [data-steps]:has(> *) { padding:10px 16px; background:var(--rx-canvas); border-top:1px solid var(--line); flex-wrap:wrap; gap:8px 20px; overflow:visible; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme="dark"] #deployment_progress_bar [data-steps]:has(> *) { background:var(--rx-chrome); }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #deployment_progress_bar [data-steps] > div { margin:0; min-width:0; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #deployment_progress_bar [data-steps] > div > span:last-child { min-width:0; overflow-wrap:anywhere; }
html:is([data-reference-system="true"],.reference-editor):not(.clickfunnels-reference)[data-theme] #deployment_progress_bar [data-deployment-step-status="current"] { color:var(--ref-brand-soft)!important; animation:none; }
/* Select the page's icon before Stimulus hydrates sessionless chat broadcasts.
   The static orb has no activity marker or controller on legacy/partner pages.
   Its default uses .hidden, not [hidden], because the theme treats the latter
   as an unconditional display:none !important. */
:root[data-reference-system="true"]:not(.clickfunnels-reference)
  [data-controller~="chat-thinking-icon"] > [data-chat-thinking-icon-target~="legacy"] {
  display: none;
}

:root[data-reference-system="true"]:not(.clickfunnels-reference)
  [data-controller~="chat-thinking-icon"] > [data-chat-thinking-icon-target~="fallback"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Mirrored from the Overskill Reference Lab: _field_focus_styles.html.erb. */
/* One focus contract for Overskill fields, including unclassed legacy inputs.
 * Geometry and behavior remain owned by the source component. Keep this after
 * page/component overrides. CF AI, customer OAuth and code editors own focus.
 * Composite search/composer controls paint the ring on their shell only. */
/* Nested theme islands resolve the same focus tokens as their own surface. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] [data-theme="light"]:not(:where([data-oauth-app-themed="true"],[data-oauth-app-themed="true"] *)) { --ref-field-focus:var(--ref-brand-soft); }
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] [data-theme="dark"]:not(:where([data-oauth-app-themed="true"],[data-oauth-app-themed="true"] *)) { --ref-field-focus:var(--ref-brand-soft); }
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] [data-theme]:not(:where([data-oauth-app-themed="true"],[data-oauth-app-themed="true"] *)) {
  --ref-field-focus-visible:var(--ref-field-focus);
  --field-border-focus:var(--ref-field-focus);
  --field-ring-color:color-mix(in srgb,var(--ref-brand-soft) 12%,transparent);
  --field-ring:0 0 0 3px var(--field-ring-color);
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(input:not([type]),input:is([type="text"],[type="email"],[type="password"],[type="search"],[type="url"],[type="tel"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"]),textarea,select,button[role="combobox"],.combo,.rx-select-trigger,.select2-selection,[contenteditable="true"][role="textbox"]):not(:where([data-oauth-app-themed="true"] *,[data-reference-field-focus="native"],.cm-editor *,.monaco-editor *,.CodeMirror *)):focus:not(:disabled,[readonly],[aria-readonly="true"],[aria-disabled="true"],[aria-invalid="true"],.error,.is-invalid):not(:where(.field_with_errors *, .select2-container--disabled *)) {
  border-color:var(--field-border-focus)!important;
  box-shadow:var(--field-ring)!important;
  outline:none!important;
}
/* Open custom selects remain active while focus is in their options. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] select:open:not(:disabled,[readonly],[aria-readonly="true"],[aria-disabled="true"],[aria-invalid="true"],.error,.is-invalid):not(:where(.field_with_errors *, .select2-container--disabled *)),
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(.combo,.rx-select-trigger)[aria-expanded="true"]:not(:disabled,[readonly],[aria-readonly="true"],[aria-disabled="true"],[aria-invalid="true"],.error,.is-invalid):not(:where(.field_with_errors *, .select2-container--disabled *)),
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .select2-container--open:not(.select2-container--disabled) .select2-selection {
  border-color:var(--field-border-focus)!important;
  box-shadow:var(--field-ring)!important;
  outline:none!important;
}
/* State-specific focus always wins over the brand treatment. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(input:not([type]),input:is([type="text"],[type="email"],[type="password"],[type="search"],[type="url"],[type="tel"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"]),textarea,select,button[role="combobox"],.combo,.rx-select-trigger,.select2-selection,[contenteditable="true"][role="textbox"]):not(:where([data-oauth-app-themed="true"] *,[data-reference-field-focus="native"],.cm-editor *,.monaco-editor *,.CodeMirror *)):focus:is([aria-invalid="true"],.error,.is-invalid),
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .field_with_errors :is(input:not([type]),input:is([type="text"],[type="email"],[type="password"],[type="search"],[type="url"],[type="tel"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"]),textarea,select,button[role="combobox"],.combo,.rx-select-trigger,.select2-selection,[contenteditable="true"][role="textbox"]):focus {
  border-color:var(--danger-fg)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--danger-fg) 25%,transparent)!important;
  outline:none!important;
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(input:not([type]),input:is([type="text"],[type="email"],[type="password"],[type="search"],[type="url"],[type="tel"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"]),textarea,select,button[role="combobox"],.combo,.rx-select-trigger,.select2-selection,[contenteditable="true"][role="textbox"]):not(:where([data-oauth-app-themed="true"] *,[data-reference-field-focus="native"],.cm-editor *,.monaco-editor *,.CodeMirror *)):focus:is([readonly],[aria-readonly="true"]) {
  border-color:var(--fg-4)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--fg) 12%,transparent)!important;
  outline:none!important;
}
/* Composite fields have exactly one visual edge. Legacy theme.css sets a
 * 1px !important border on raw inputs; clearing only border-color is not enough.
 * New wrapped fields can opt into this contract with data-reference-field-shell.
 * Do not use that hook on wrappers whose input owns the field chrome. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(.select2-selection,[data-reference-field-shell],.cint__search,.ctpl__search,.ti-search,.mem-search,.computer-picker__search,.url-field,.pm-subdomain-input-wrap,.dash-search,.aref-search,.hd-search,.computer-library__search,.ccon__search,.wsid-handle,.cd-input-wrap,.composer,.dash-composer,.chat-composer-card,.hero2-composer,.editor-chat-input,.ref-compose,.reference-generator-form > div,.anonymous-build-entry form > div) :is(input:not([type]),input:is([type="text"],[type="search"],[type="email"],[type="url"],[type="tel"],[type="password"],[type="number"]),textarea):not(:where([data-oauth-app-themed="true"] *,[data-reference-field-focus="native"],.cm-editor *,.monaco-editor *,.CodeMirror *)) {
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(.select2-selection,[data-reference-field-shell],.cint__search,.ctpl__search,.ti-search,.mem-search,.computer-picker__search,.url-field,.pm-subdomain-input-wrap,.dash-search,.aref-search,.hd-search,.computer-library__search,.ccon__search,.wsid-handle,.cd-input-wrap,.composer,.dash-composer,.chat-composer-card,.hero2-composer,.editor-chat-input,.ref-compose,.reference-generator-form > div,.anonymous-build-entry form > div):has(:is(input,textarea):focus:not(:disabled,[readonly],[aria-readonly="true"],[aria-disabled="true"],[aria-invalid="true"],.error,.is-invalid):not(:where(.field_with_errors *, .select2-container--disabled *))) {
  border-color:var(--field-border-focus)!important;
  box-shadow:var(--field-ring)!important;
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(.select2-selection,[data-reference-field-shell],.cint__search,.ctpl__search,.ti-search,.mem-search,.computer-picker__search,.url-field,.pm-subdomain-input-wrap,.dash-search,.aref-search,.hd-search,.computer-library__search,.ccon__search,.wsid-handle,.cd-input-wrap,.composer,.dash-composer,.chat-composer-card,.hero2-composer,.editor-chat-input,.ref-compose,.reference-generator-form > div,.anonymous-build-entry form > div):has(:is(input,textarea):focus[aria-invalid="true"]),
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] .cd-input-wrap.is-invalid:focus-within {
  border-color:var(--danger-fg)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--danger-fg) 25%,transparent)!important;
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(.select2-selection,[data-reference-field-shell],.cint__search,.ctpl__search,.ti-search,.mem-search,.computer-picker__search,.url-field,.pm-subdomain-input-wrap,.dash-search,.aref-search,.hd-search,.computer-library__search,.ccon__search,.wsid-handle,.cd-input-wrap,.composer,.dash-composer,.chat-composer-card,.hero2-composer,.editor-chat-input,.ref-compose,.reference-generator-form > div,.anonymous-build-entry form > div) :is(input,textarea):focus:not(:disabled,[aria-disabled="true"]):not([type="hidden"]) {
  /* The surrounding shell is the visual field, including its icons/tools. */
  border-color:transparent!important;
  box-shadow:none!important;
  outline:none!important;
}
/* The command palette owns a borderless search row; outline the dialog. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(.oscmdk:has(.oscmdk__input:focus),.admin-cmdk__panel:has(.admin-cmdk__input:focus)) {
  border-color:var(--field-border-focus)!important;
  box-shadow:var(--field-ring),var(--rx-floating-shadow)!important;
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] input:is(.oscmdk__input,.admin-cmdk__input):focus:not(:disabled):not([readonly]) { box-shadow:none!important; outline:none!important; }
@media (forced-colors:active) {
  html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(input:not([type]),input:is([type="text"],[type="email"],[type="password"],[type="search"],[type="url"],[type="tel"],[type="number"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"]),textarea,select,button[role="combobox"],.combo,.rx-select-trigger,.select2-selection,[contenteditable="true"][role="textbox"]):not(:where([data-oauth-app-themed="true"] *,[data-reference-field-focus="native"],.cm-editor *,.monaco-editor *,.CodeMirror *)):focus:not(:disabled),
  html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(.select2-selection,[data-reference-field-shell],.cint__search,.ctpl__search,.ti-search,.mem-search,.computer-picker__search,.url-field,.pm-subdomain-input-wrap,.dash-search,.aref-search,.hd-search,.computer-library__search,.ccon__search,.wsid-handle,.cd-input-wrap,.composer,.dash-composer,.chat-composer-card,.hero2-composer,.editor-chat-input,.ref-compose,.reference-generator-form > div,.anonymous-build-entry form > div):has(:is(input,textarea):focus:not(:disabled)),
  html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(.oscmdk:has(.oscmdk__input:focus),.admin-cmdk__panel:has(.admin-cmdk__input:focus)) {
    outline:2px solid Highlight!important; outline-offset:2px;
    box-shadow:none!important;
  }
  html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(.select2-selection,[data-reference-field-shell],.cint__search,.ctpl__search,.ti-search,.mem-search,.computer-picker__search,.url-field,.pm-subdomain-input-wrap,.dash-search,.aref-search,.hd-search,.computer-library__search,.ccon__search,.wsid-handle,.cd-input-wrap,.composer,.dash-composer,.chat-composer-card,.hero2-composer,.editor-chat-input,.ref-compose,.reference-generator-form > div,.anonymous-build-entry form > div) :is(input,textarea):focus:not(:disabled,[aria-disabled="true"]):not([type="hidden"]),
  html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] input:is(.oscmdk__input,.admin-cmdk__input):focus:not(:disabled):not([readonly]) { outline:none!important; }
}

html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] input:is(.oscmdk__input,.admin-cmdk__input) {
 border:0!important; background:transparent!important;
}
/* One label treatment for portalled, CSS-only and rich tooltips. Position,
   visibility, wrapping and interactive content remain owned by each component.
   Monospace belongs to explicit code/technical children, not the tooltip shell. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] {
  --os-tooltip-bg: var(--rx-overlay);
  --os-tooltip-fg: var(--fg);
  --os-tooltip-border: var(--rx-overlay-border);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.os-tooltip,.os-tooltip--compact,.composer-tip,.desk-tooltip,.rxa-tooltip,[role="tooltip"],#visitor-chart-tooltip),
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.ds-tip,.cp-tip,.composer-tool[data-tooltip],.send[data-tooltip])::after {
  background: var(--os-tooltip-bg);
  color: var(--os-tooltip-fg);
  border: 1px solid var(--os-tooltip-border);
  border-radius: 6px;
  padding: 4px 8px;
  font: 400 12px/16px var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--rx-floating-shadow);
}
/* Dashboard launcher: a grey Prism canvas, solid composer and a full-width
   idea row, with the apps section peeking below. Shared with Reference Lab. */
/* Monochrome Prism keeps the 102deg sweep, asymmetric bloom and beam.
   Paint the hero itself so the treatment follows compact layouts and longer
   drafts. Its top meets the utility bar; its bottom fades to the app canvas. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .os-rail-shell__main:has(.dash-hero-section:not(.mem-hero)) {
  --dash-hero-bg:var(--rx-canvas);
  --dash-prism-soft:color-mix(in srgb,var(--fg) 2.5%,var(--dash-hero-bg));
  --dash-prism-mid:color-mix(in srgb,var(--fg) 6%,var(--dash-hero-bg));
  --dash-prism-bloom:color-mix(in srgb,var(--fg) 3%,transparent);
  --dash-prism-beam:color-mix(in srgb,var(--fg) 2%,transparent);
  --dash-gray-prism:
    linear-gradient(180deg,var(--dash-hero-bg),transparent 28% 68%,var(--rx-canvas) 100%),
    radial-gradient(ellipse 72% 60% at 2% 66%,var(--dash-prism-bloom),transparent 76%),
    radial-gradient(ellipse 50% 72% at 100% 48%,var(--dash-prism-beam),transparent 78%),
    linear-gradient(102deg,var(--dash-hero-bg) 0%,var(--dash-prism-soft) 34%,var(--dash-prism-mid) 62%,var(--dash-prism-soft) 86%,var(--dash-hero-bg) 100%);
  background:var(--rx-canvas);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme="dark"] .os-rail-shell__main:has(.dash-hero-section:not(.mem-hero)) {
  --dash-hero-bg:var(--rx-rail);
  --dash-prism-soft:color-mix(in srgb,var(--fg) 3%,var(--dash-hero-bg));
  --dash-prism-mid:color-mix(in srgb,var(--fg) 7%,var(--dash-hero-bg));
  --dash-prism-bloom:color-mix(in srgb,var(--fg) 4%,transparent);
  --dash-prism-beam:color-mix(in srgb,var(--fg) 3%,transparent);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer {
  --dash-composer-surface:color-mix(in srgb,var(--rx-composer) 97%,var(--fg));
  --dash-idea-fill:var(--rx-panel);
  --dash-idea-hover:color-mix(in srgb,var(--fg) 4%,var(--dash-idea-fill));
  --dash-composer-border:color-mix(in srgb,var(--fg) 16%,transparent);
  --dash-composer-shadow:0 12px 30px -16px rgb(0 0 0 / .13),0 2px 6px -2px rgb(0 0 0 / .05);
}
/* Match the editor composer in dark mode; pills use a softer panel charcoal. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme="dark"] .dash-hero-composer {
  --dash-composer-surface:var(--rx-composer);
  --dash-composer-border:color-mix(in srgb,var(--fg) 20%,transparent);
  --dash-composer-shadow:0 14px 32px -16px rgb(0 0 0 / .55),0 2px 8px -4px rgb(0 0 0 / .28);
  --dash-idea-fill:var(--rx-panel);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .os-rail-shell--page:has(.dash-hero-section:not(.mem-hero)) :is(.os-rail-utilbar,.os-rail-mobilebar,.dash-topnav) {
  background:var(--dash-hero-bg,var(--rx-canvas)); border-bottom-color:transparent; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
/* FULL-BLEED THE UTILITY BAR'S PAINT (Sanzone 2026-09-28, dark theme, collapsed
   rail). The rule above repaints the three top bars with --dash-hero-bg so each
   meets the hero seamlessly. Two of them are full-bleed wrappers around an inner
   .ds-container (.dash-topnav wraps .dash-topnav-inner; .os-rail-mobilebar is
   fixed and full width), but .os-rail-utilbar IS the .ds-container — max-width
   1240px with auto margins. So its paint stopped at the content column while the
   hero directly below stayed edge to edge, and every main column wider than
   --container-max (a collapsed rail at >=1290px, or any wide window) showed the
   column's own --rx-canvas through two EMPTY 106x52 gutters flanking the bar.
   In dark that canvas (--rx-canvas) is lighter than the bar (--rx-rail): the
   reported faint empty rectangle at the top-left AND top-right of the content
   pane. Light mode binds --dash-hero-bg to --rx-canvas, so it never showed there.

   Let the bar span the column and re-inset its CONTENT with the padding the
   container's auto margins used to supply, so one rule kills both rectangles and
   nothing moves: the max() collapses to --container-pad below --container-max,
   which is the geometry this bar already had. Desktop only — below 1024px the bar
   is position:fixed/width:auto (surfaces/_os_rail.css @media (max-width:1023px))
   and has no gutters to close. */
@media (min-width: 1024px) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .os-rail-shell--page:has(.dash-hero-section:not(.mem-hero)) .os-rail-utilbar {
    max-width:none;
    padding-inline:max(var(--container-pad),calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  }
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section:not(.mem-hero) {
  /* Reserve the 52px utility bar and a 76px glimpse of Your apps.
     Keep the composer centered in the remaining viewport space. */
  min-height:calc(100svh - 128px);
  display:flex; align-items:center;
  padding:44px 0 44px;
  border-bottom:0;
  background-color:var(--dash-hero-bg,var(--rx-canvas));
  background-image:var(--dash-gray-prism,none);
  background-size:100% 100%; background-repeat:no-repeat;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section:not(.mem-hero) > .ds-container { width:100%; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-inner {
  max-width:680px; margin-bottom:26px;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-eyebrow {
  margin-bottom:16px; color:var(--fg-2); font:500 11px/1.4 var(--font-body); letter-spacing:.04em;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-live-dot {
  background:var(--brand); box-shadow:none;
}
/* A quieter headline leaves the writing surface as the focal point. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-title {
  max-width:660px; margin:0 auto 16px; font-family:"Grifter",var(--font-body);
  font-size:clamp(38px,4.5vw,54px); line-height:1.06; letter-spacing:-.035em; color:var(--fg);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-sub { max-width:57ch; font-size:15px; line-height:1.55; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer { max-width:760px; }

/* Center the input itself; balanced tracks keep the headline and ideas from
   shifting it below the midpoint. Intrinsic sizing lets taller content grow. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered:not(.mem-hero) {
  display:block; padding-block:0;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered > .ds-container {
  display:grid; grid-template-rows:1fr auto 1fr;
  min-height:inherit; padding-block:24px;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered .dash-hero-before {
  grid-row:1; align-self:end; min-width:0; padding-bottom:26px;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered .dash-hero-inner { margin-bottom:0; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered .dash-hero-title {
  font-size:clamp(38px,min(4.5vw,6.2svh),54px);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered .dash-hero-composer { display:contents; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered .dash-hero-composer > form {
  grid-row:2; justify-self:center; width:min(100%,760px); min-width:0; margin:0;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered .dash-hero-after {
  grid-row:3; align-self:start; justify-self:center; width:min(100%,760px); min-width:0;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered .computer-credit-gate {
  max-width:760px; margin:16px auto 0;
}
/* Use normal flow when viewport height cannot comfortably hold the heading,
   input and ideas. This also leaves room for the mobile keyboard and drafts. */
@media(max-width:639px),(max-height:620px) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered:not(.mem-hero) { min-height:0; padding:28px 0; }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered > .ds-container { display:block; padding-block:0; }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered .dash-hero-before { padding-bottom:22px; }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section--composer-centered .dash-hero-composer { display:block; }
}

/* A solid composer surface. Keep overflow visible for pickers and tooltips;
   its width and centered layout remain shared with the suggestion row. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer #composer-card {
  width:100%; max-width:100%; margin-inline:0; box-sizing:border-box;
  border-radius:24px;
  background:var(--dash-composer-surface,var(--rx-composer))!important;
  --rx-field-border:var(--dash-composer-border);
  border-color:var(--rx-field-border);
  box-shadow:var(--dash-composer-shadow);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer #composer-card::before { content:none; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer #composer-card:has(textarea:focus) {
  border-color:var(--field-border-focus); box-shadow:var(--field-ring),var(--dash-composer-shadow);
}
@media(prefers-contrast:more) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer #composer-card { --rx-field-border:var(--fg-3); border-color:var(--rx-field-border); }
}
@media(prefers-reduced-motion:reduce) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer #composer-card { transition:none; }
}
@media(forced-colors:active) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer #composer-card {
    background:Canvas!important; border-color:CanvasText!important; box-shadow:none!important;
  }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer #composer-card:has(textarea:focus) { outline:2px solid Highlight; outline-offset:3px; }
}
/* A little more writing room gives the desktop composer more presence.
   Use a minimum so draft auto-resizing and compact layouts keep working. */
@media(min-width:640px) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer #custom-prompt:not(:where(.mem-hero *)) { min-height:88px; }
}
/* Starter pills sit beneath the composer. The hidden legacy builder chip
   still counts in nth-of-type; Prompt ideas now lives beside Add. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .nah .nah-chips[data-testid="hero-idea-chips"] {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(76px,.7fr); gap:8px;
  width:100%; max-width:100%; box-sizing:border-box; margin:12px 0 0; padding:0; overflow:visible; scroll-snap-type:none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] > .nah-chip {
  display:inline-flex; min-width:0; min-height:38px; padding:8px 12px;
  gap:7px; color:var(--fg-2); border-color:var(--line); background:var(--dash-idea-fill,var(--rx-panel));
  font:500 12px/1.4 var(--font-body);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] > .nah-chip:nth-of-type(n+5) { display:none; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] .nah-chip > svg { display:block; color:var(--fg-3); width:14px; height:14px; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] > .nah-chip--builder { display:none; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] .nah-more { display:flex; min-width:0; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] .nah-chip-more {
  min-height:38px; padding:8px 12px; color:var(--fg-2); border-color:var(--line); background:var(--dash-idea-fill,var(--rx-panel)); font:500 12px/1.4 var(--font-body);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] .nah-chip:hover {
  background:var(--dash-idea-hover,color-mix(in srgb,var(--fg) 4%,var(--rx-panel))); border-color:var(--line-2); color:var(--fg);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] .nah-chip:hover > svg { color:var(--fg); }

html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-apps-section {
  padding:28px 0 48px; border-top:1px solid var(--line);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-apps-head { margin-bottom:22px; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-apps-title { font-size:26px; letter-spacing:-.03em; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-apps-count { font:400 12px/1.5 var(--font-body); letter-spacing:0; text-transform:none; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-apps-grid { gap:16px; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-card-thumb { aspect-ratio:16 / 9; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-new-app-card-icon { color:var(--success-fg); background:color-mix(in srgb,var(--brand) 8%,var(--rx-panel)); border-color:var(--line); }

/* Only offer Booking system in More when the compact row hides its chip. */
@media(min-width:801px) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] .nah-idea--compact-only { display:none; }
}
@media(min-width:640px) and (max-width:800px) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .nah .nah-chips[data-testid="hero-idea-chips"] { grid-template-columns:repeat(2,minmax(0,1fr)) minmax(76px,.7fr); }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] > .nah-chip:nth-of-type(n+4) { display:none; }
}
@media(max-width:639px) {
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-section:not(.mem-hero) { min-height:0; padding:36px 0 28px; }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-inner { margin-bottom:24px; }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.dash-hero-section,.dash-hero-section--composer-centered) .dash-hero-title { font-size:clamp(34px,8.5vw,44px); }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .nah .nah-chips[data-testid="hero-idea-chips"] { grid-template-columns:repeat(2,minmax(0,1fr)) minmax(64px,.65fr); gap:8px; }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] > .nah-chip { min-height:44px; padding:8px; font-size:12px; white-space:normal; }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] > .nah-chip:nth-of-type(n+4) { display:none; }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] [data-testid="hero-idea-chips"] .nah-chip-more { min-height:44px; }
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-apps-section { padding-top:24px; }
}
@media(max-width:480px) {
  /* The compact utility controls need 112px, not the legacy desktop 320px
     reservation that makes the Apps header wider than a narrow phone. */
  html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .os-rail-shell--page:has(.dash-hero-section):has(.os-rail-utilbar) .os-rail-mobilebar { padding-right:112px; }
}

html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme="dark"] .dash-hero-composer #composer-card .composer-tool-pill {
  background:var(--dash-idea-fill); border-color:color-mix(in srgb,var(--fg) 10%,transparent); box-shadow:inset 0 1px 0 var(--rx-edge-light);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer #composer-card .composer-tool-pill:is(:hover,[aria-expanded="true"]) {
  background:var(--dash-idea-hover); border-color:var(--line-2); color:var(--fg);
}
/* A keyboard-accessible Prompt ideas tool immediately follows Add. Its
   explanation uses the existing tooltip surface and stays inside phone edges.
   Hide the slot (not .composer-tool) in other skins so display:flex cannot
   override the utility hiding the new affordance. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer .nah-prompt-ideas-slot { display:contents; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer .nah-prompt-ideas-trigger {
  display:inline-flex; position:relative; flex:0 0 auto; color:var(--fg-3);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer .nah-prompt-ideas-trigger:is(:hover,:focus-visible) {
  color:var(--ref-brand-soft); background:var(--dash-idea-hover,color-mix(in srgb,var(--ref-brand-soft) 5%,var(--rx-panel)));
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer .nah-prompt-ideas-trigger:focus-visible {
  outline:2px solid var(--field-border-focus); outline-offset:2px;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer .nah-prompt-ideas-tooltip {
  display:block; visibility:hidden; opacity:0; left:0; top:auto; bottom:calc(100% + 10px); transform:none;
  width:236px; max-width:calc(100vw - 96px); padding:10px 12px; border-radius:var(--radius-md);
  background:var(--rx-overlay); color:var(--fg-2); border-color:var(--line-2);
  font:400 12px/1.5 var(--font-body); letter-spacing:0; text-align:left; white-space:normal;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer .nah-prompt-ideas-tooltip strong { display:block; margin-bottom:3px; color:var(--fg); font-weight:500; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .dash-hero-composer .nah-prompt-ideas-trigger[data-tooltip-open] .nah-prompt-ideas-tooltip { visibility:visible; opacity:1; }
/* /brand: current Reference Lab controls and typography, isolated from the
 * original view. The preview fields and color swatches show literal artwork
 * colors; every interface surface resolves through the shared theme tokens. */
[data-reference-system="true"] .brand-reference {
  color: var(--fg);
  font-family: var(--font-body);
}
.brand-reference-lockup { display: inline-flex; height: 25px; width: auto; }
.brand-reference-lockup img { height: 100%; width: auto; max-width: none; }
[data-theme="dark"] .brand-reference-lockup__light,
[data-theme="light"] .brand-reference-lockup__dark { display: none; }
.foot .brand-reference-lockup { height: 28px; }
.brand-reference .ds-container { max-width: 1200px; }
.brand-reference__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: var(--space-16) var(--space-10);
}
.brand-reference__hero > div { max-width: 740px; }
.brand-reference__hero > .btn { flex: 0 0 auto; }
.brand-reference__eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--fg-3);
  font: 500 12px/1.4 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.brand-reference__title {
  margin: 0 0 var(--space-5);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.brand-reference__intro {
  margin: 0;
  max-width: 58ch;
  color: var(--fg-2);
  font-size: 16px;
  line-height: 1.65;
}
.brand-reference__sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-block: 1px solid var(--line);
}
.brand-reference__sections a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.brand-reference__sections a:hover {
  background: var(--hover-bg);
  color: var(--fg);
}
.brand-reference a:not(.btn):focus-visible {
  outline: 2px solid var(--ref-keyboard-focus);
  outline-offset: 3px;
}
.brand-reference__section {
  padding-block: var(--space-10) var(--space-12);
  scroll-margin-top: 112px;
}
.brand-reference__section + .brand-reference__section { border-top: 1px solid var(--line); }
.brand-reference h2 {
  margin: 0 0 var(--space-6);
  color: var(--fg);
  font: 600 24px/1.3 var(--font-body);
  letter-spacing: -.02em;
}
.brand-reference h3 {
  margin: 0 0 var(--space-2);
  color: var(--fg);
  font: 600 17px/1.4 var(--font-body);
  letter-spacing: -.01em;
}
.brand-reference__assets,
.brand-reference__grid { display: grid; gap: var(--space-5); }
.brand-reference__assets { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.brand-reference__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-reference__asset,
.brand-reference__color,
.brand-reference__font {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
}
.brand-reference__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 212px;
  padding: var(--space-8);
  border-bottom: 1px solid var(--line);
}
.brand-reference__stage--light { background: #fff; }
.brand-reference__stage--dark { background: #0f0f0f; }
.brand-reference__stage--plain { background: var(--bg-1); }
.brand-reference__stage--checker {
  background: repeating-conic-gradient(var(--bg-3) 0% 25%, var(--bg-1) 0% 50%) 0 0 / 20px 20px;
}
.brand-reference__art {
  display: block;
  width: min(320px, 100%);
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.brand-reference__stage--checker .brand-reference__art { width: 96px; }
.brand-reference__stage--plain .brand-reference__art { width: auto; border-radius: var(--radius-sm); }
.brand-reference__asset-body,
.brand-reference__color-body,
.brand-reference__font { padding: var(--space-6); }
.brand-reference__note {
  margin: 0;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.6;
}
.brand-reference__files {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.brand-reference__file { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.brand-reference__file-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.brand-reference__file-info { display: grid; gap: 3px; }
.brand-reference__format { font: 500 12px/1.4 var(--font-mono); color: var(--fg); }
.brand-reference__file-note { font: 400 12px/1.4 var(--font-body); color: var(--fg-3); }
.brand-reference__file-actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.brand-reference .brand-reference__download { width: 32px; padding: 0; }
.brand-reference__copy { min-width: 108px; }
.brand-reference__copy[data-copied] { color: var(--success-fg) !important; }
.brand-reference__url {
  display: block;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  color: var(--fg-2);
  font: 400 11px/1.6 var(--font-mono);
  overflow-wrap: anywhere;
  user-select: all;
}
.brand-reference__swatch {
  display: flex;
  align-items: flex-end;
  min-height: 144px;
  padding: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.brand-reference__swatch code { font: 500 13px/1.5 var(--font-mono); color: inherit; }
.brand-reference__color { display: flex; flex-direction: column; }
.brand-reference__color-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.brand-reference__color-body .brand-reference__note { flex: 1; margin-bottom: var(--space-5); }
.brand-reference__font .brand-reference__eyebrow { margin-bottom: var(--space-2); }
.brand-reference__specimen { margin-bottom: var(--space-6); font-size: 64px; line-height: 1.25; }
.brand-reference__specimen--display { font-family: 'Grifter', 'Geist', sans-serif; font-weight: 700; }
.brand-reference__specimen--body { font-family: var(--font-body); font-weight: 400; }
.brand-reference__specimen--technical { font-family: var(--font-mono); font-weight: 400; }
.brand-reference__rules { padding: 0; margin: 0; list-style: none; }
.brand-reference__rules li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.6;
}
.brand-reference__rules svg { flex-shrink: 0; align-self: flex-start; margin-top: 4px; color: var(--fg-3); }
.brand-reference__outro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.brand-reference__outro p { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.6; }
.brand-reference__outro a:not(.btn) { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.brand-reference__outro .btn { flex-shrink: 0; }
.brand-reference__shape {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-8);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.brand-reference__shape h2 { margin-bottom: var(--space-4); }
.brand-reference__shape p:not(.brand-reference__eyebrow) { margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.65; }
.brand-reference__shape code { font: 400 .88em var(--font-mono); }
.brand-reference__shape p.brand-reference__shape-scope { margin-top: var(--space-4); font-size: 13px; color: var(--fg-3); }
.brand-reference__shape-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.brand-reference__shape-examples figure { margin: 0; text-align: center; }
.brand-reference__shape-art { display: grid; place-items: center; height: 160px; margin-bottom: var(--space-3); }
.brand-reference__shape-art img { width: 112px; height: 112px; }
/* Deliberately incorrect illustrative silhouette, never exported as artwork. */
.brand-reference__incorrect-square { display: block; width: 112px; height: 112px; border-radius: 24px; background: var(--fg-3); }
.brand-reference__shape-examples figcaption { display: flex; justify-content: center; align-items: baseline; gap: 6px; font: 500 12px/1.5 var(--font-body); color: var(--fg-2); }
.brand-reference__shape-examples figcaption svg { flex-shrink: 0; align-self: center; }
@media (max-width: 900px) {
  .brand-reference__hero { align-items: flex-start; flex-direction: column; gap: var(--space-6); }
  .brand-reference__assets { grid-template-columns: minmax(0, 1fr); }
  .brand-reference__shape { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media (max-width: 600px) {
  .brand-reference__hero { padding-block: var(--space-10) var(--space-8); }
  .brand-reference__title { font-size: 36px; }
  .brand-reference__grid { grid-template-columns: minmax(0, 1fr); }
  .brand-reference__sections { gap: 0; }
  .brand-reference__sections a { padding-inline: 10px; min-height: 44px; }
  .brand-reference__section { padding-block: var(--space-8); }
  .brand-reference__stage { height: 180px; padding: var(--space-6); }
  .brand-reference__asset-body { padding: var(--space-5); }
  .brand-reference__file-head { flex-wrap: wrap; }
  .brand-reference .btn { min-height: 44px; }
  .brand-reference .brand-reference__download { width: 44px; }
  .brand-reference__outro { flex-direction: column; align-items: flex-start; }
  .brand-reference__shape { padding: var(--space-5); }
  .brand-reference__shape-art img, .brand-reference__incorrect-square { width: 88px; height: 88px; }
  .brand-reference__shape-art { height: 120px; }
}
/* Brand-green states — Jason Sanzone, 2026-09-28.
 *
 * Presentation only, and flag-ON only: this file ships exclusively through
 * reference_system.css, which the layout links only when
 * `design_refresh_enabled?` is true. With design_refresh_2026_09 off, nothing
 * here is downloaded and the baseline output is byte-identical.
 *
 * WHY THESE RULES EXIST AT ALL. The refresh rebinds --accent to --rx-primary
 * (neutral ink) in reference_foundations.css. Every component below already
 * asked for brand green through --accent / --accent-text / --accent-fg, so the
 * REBINDING — not a component edit — is what flattened them. Each rule here
 * re-expresses the component's original intent against the tokens the refresh
 * still keeps brand-coloured. Nothing new is invented.
 *
 * TOKENS USED (all pre-existing; this release adds none)
 *   --brand             #45E760, theme-invariant brand green. FILLS only.
 *   --brand-fg          #0a0e0a, the DS on-accent ink — 11.9:1 on --brand in
 *                       both themes. White is 1.63:1 there and is NOT the
 *                       on-accent ink the DS defines, so it is never used.
 *   --ref-brand-alt     #75D785, the alt brand green. Brand-fill HOVER, per
 *                       "Color has a job" in docs/design/OVERSKILL-DESIGN-SYSTEM.md.
 *   --ref-brand-detail  the THEME-AWARE alt green: --ref-brand-alt in dark,
 *                       hsl(130 55% 28%) in light. Every green INK and green
 *                       GLYPH resolves here, never --brand: #45E760 on a light
 *                       canvas is 1.63:1 and misses the 3:1 non-text floor.
 *   --credit-action     the same role, scoped to credit surfaces.
 *   --info-fg           the DS in-progress/information ink.
 *   --focus-ring-color  the soft keyboard ring. Never --accent (#6979 review).
 *
 * Required LAST from reference_system.css so it settles after
 * _component_refresh.css, coverage.css and _selection_controls.css, which are
 * the files that neutralised these components.
 */

/* ── 1. "NEW" chips ────────────────────────────────────────────────────────
   Every one of these classes is used for a NEW chip and nothing else (audited
   2026-09-28 across app/views). One shared rule rather than six per-instance
   overrides. Two of them were an --accent TINT with --accent-text ink and four
   were a solid --accent fill; under the refresh both read neutral, so they are
   reconciled onto the single solid treatment Sanzone asked for. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(
 .import-banner-tag,.mem-badge,.mem-feedcard-pill,
 .launcher-mode__badge,.computer-nav__item-badge,.gc-switcher__tag
) {
 background: var(--brand); border-color: var(--brand); color: var(--brand-fg);
}

/* ── 2. Build Arcade launcher ──────────────────────────────────────────────
   Restores the pre-refresh tint. _arcade.css was NOT touched by #6979
   (git log confirms) — its own comment describes the intended treatment as an
   "accent-TINTED surface rather than a solid brand slab ... Accent ink is
   --accent-text (never white-on-green)", which the --accent rebinding erased.
   The mix percentages are the original file's, re-pointed at --brand; the ink
   is --ref-brand-detail, which is what --accent-text used to resolve to. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .os-arcade-launcher {
 border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
 background: color-mix(in srgb, var(--brand) 7%, var(--bg));
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .os-arcade-launcher-play svg {
 color: var(--ref-brand-detail);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .os-arcade-launcher-lb {
 border-left-color: color-mix(in srgb, var(--brand) 24%, var(--line));
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.os-arcade-launcher-play,.os-arcade-launcher-lb):hover {
 background: color-mix(in srgb, var(--brand) 16%, transparent);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .os-arcade-launcher-lb:hover {
 color: var(--ref-brand-detail);
}

/* ── 3. Credit pill coins glyph ────────────────────────────────────────────
   `.spark` is the wrapper class the coins glyph reuses (see the partial's
   note). --credit-action is the credit surfaces' alt-green role and is already
   what the refresh paints the popover's credit links with, so the pill glyph
   now agrees with them. :not(.is-exhausted) is load-bearing: this rule is more
   specific than the base warning-state rule, so without it a negative balance
   would lose its --warning-fg glyph. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .credits-trigger:not(.is-exhausted) .spark {
 color: var(--credit-action);
}

/* ── 4. Publish modal primary action ───────────────────────────────────────
   [data-publish-modal-target="deployButton"] is the one hook all three modal
   bodies share (v1 Tailwind, v2 .deploy-cta, v3 .btn-primary.pm-bridge-cta),
   and it exists nowhere else — so this is the modal's primary action only, not
   every "Publish" string. #publish_modal is the wrapper all three render
   inside; it carries the id so this beats _component_refresh.css's neutral
   `.pm .deploy-cta` outright rather than on source order.

   Re-pointing --accent* ON THE BUTTON is what makes this work without adding
   an !important: _button.css paints `.btn-primary { color: var(--accent-fg)
   !important }`, and re-binding the custom property makes that existing
   declaration resolve to the brand ink. Left alone it would paint WHITE on
   brand green in light mode — 1.63:1, a hard AA failure.

   FLAT FILL, not a gradient (Sanzone 2026-09-29: "shouldn't, should just be
   brand green"). The `background` shorthand above already clears the image
   channel, but _button_depth_styles.css re-declares it with !important:

     .btn.btn-primary:not(…) { background-image:var(--ref-button-primary-gradient)!important }
     .btn.btn-primary:hover  { background:var(--ref-button-primary-gradient-hover)
                                          var(--ref-button-primary-hover)!important }

   so the shipped button MEASURED `linear-gradient(rgba(255,255,255,.5),
   rgba(0,0,0,.1))` over the brand fill, and on HOVER it went to
   `rgb(255,255,255)` — pure white, not the alt green, because
   --ref-button-primary-hover is --rx-send in dark and a neutral mix in light.
   Both halves were invisible in source: §4's own hover rule carries no
   !important and simply lost.

   THE THREE TOKENS BELOW are the fix, and they add no !important of their
   own — same "re-point the property, don't restate the paint" move as
   --accent* above. Those existing !important declarations then resolve to
   `none` / the alt green, so rest AND hover follow, in both themes, and the
   hover rule below becomes a second agreeing path rather than a losing one.

   NOT flattened for every primary under the flag. That gradient is the
   Reference Lab's deliberate depth ramp for the NEUTRAL primary (its own
   comment: "Current dark primary: about #EFEFEF → #C8C8C8"), approved
   2026-09-25; it only misreads over a SATURATED fill, where a 50%-white top
   stop washes #45E760 to pale mint. So the opt-out lives at the seam where a
   primary is repainted brand — here — and a future brand-green primary gets
   it by joining this selector. Audited 2026-09-29 across the flag-ON account
   surfaces: this button is the only brand-filled BUTTON carrying a gradient
   (`.pb-progress-fill`'s multi-stop brand ramp is decoration on a progress
   bar, deliberately untouched).

   The focus ring is already correct and is left alone: :focus-visible is
   excluded from the gradient rule, and the outline measured
   var(--focus-ring-color) as the refresh binds it (soft, never --accent —
   the #6979 review decision that spec/javascript/focus_ring_soft_spec.rb
   pins). */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] #publish_modal [data-publish-modal-target="deployButton"] {
 --accent: var(--brand);
 --accent-fg: var(--brand-fg);
 --accent-hover: var(--ref-brand-alt);
 --primary-hover: var(--ref-brand-alt);
 --ref-button-primary-gradient: none;
 --ref-button-primary-gradient-hover: none;
 --ref-button-primary-hover: var(--ref-brand-alt);
 background: var(--brand); border-color: var(--brand); color: var(--brand-fg);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] #publish_modal [data-publish-modal-target="deployButton"]:hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"]) {
 background: var(--ref-brand-alt); border-color: var(--ref-brand-alt); color: var(--brand-fg);
}

/* ── 5. Selection controls, CHECKED/ON only ────────────────────────────────
   _selection_controls.css already paints the checked state from
   --ref-control-fill / --ref-control-ink, so re-pointing those properties on
   the checked element moves the paint without restating it — and because the
   existing declarations are the ones painting, their !important carries the new
   value and this file adds none of its own. Unchecked is untouched.

   --ref-control-ink DOES TWO JOBS and only one of them wants the on-accent
   ink. It is the GLYPH inside the fill (the tick's border, the radio dot, the
   indeterminate bar) AND it is the switch/toggle THUMB. Rebinding it for both
   turned the light-mode thumb black on the green track while the OFF thumb
   stayed white — Sanzone, 2026-09-28. So the ink is rebound ONLY on the
   glyph-bearing controls; the thumb is left to fall through to the theme root,
   which is white in light (the same value the off thumb already uses) and the
   Lab sample's dark thumb in dark. That is why there is no new token and no
   per-theme block here: the correct thumb values were always in the file.

   The tick and dot genuinely do need the dark on-accent ink — they sit ON
   #45E760, where white measures 1.63:1.

   The track/knob are SIBLINGS of the input, not descendants, so the track has
   to be named here: a custom property set on the input cannot inherit
   sideways. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .switch input:checked ~ .track,
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .toggle:checked,
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(input.checkbox,input.radio):checked,
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] input.checkbox:indeterminate {
 --ref-control-fill: var(--brand);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(input.checkbox,input.radio):checked,
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] input.checkbox:indeterminate {
 --ref-control-ink: var(--brand-fg);
}
/* The two component-local ON/OFF switches that are NOT the shared class but
   are the same control to a customer: the publish modal's badge/remix toggles
   (which would otherwise sit neutral beside the now-green Publish CTA inside
   one dialog) and the billing auto-top-up switch. Both already paint their
   checked track from --accent, so the same re-pointing works and again adds no
   !important.

   Same thumb rule as above: only --accent (the track) is rebound.
   .pm-toggle-track::before reads --accent-fg for ITS thumb, so rebinding that
   too is what made the publish modal's thumbs black in light mode; left alone
   it resolves to --rx-primary-ink, which is white in light and near-black in
   dark. .billing-auto-toggle's thumb is a hardcoded #fff and never moved.

   /pricing's `.billing-toggle-track.is-on` is deliberately NOT here: it is a
   marketing period selector driven by a class rather than a checked input, and
   the refresh keeps marketing controls neutral on purpose. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm-toggle input:checked + .pm-toggle-track,
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .billing-auto-toggle input:checked + .billing-auto-toggle-track {
 --accent: var(--brand);
}

/* High contrast keeps the system colors. Without this the element-level
   binding above would outrank the root-level forced-colors override in
   _selection_controls.css and repaint Highlight back to brand green. */
@media (forced-colors: active) {
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .switch input:checked ~ .track,
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .toggle:checked,
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(input.checkbox,input.radio):checked,
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] input.checkbox:indeterminate {
  --ref-control-fill: Highlight;
 }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(input.checkbox,input.radio):checked,
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] input.checkbox:indeterminate {
  --ref-control-ink: HighlightText;
 }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm-toggle input:checked + .pm-toggle-track,
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .billing-auto-toggle input:checked + .billing-auto-toggle-track {
  --accent: Highlight;
 }
}

/* Profile section selection: alt brand green in dark, accessible darker green
   in light. Keep the existing selected surface and keyboard focus treatment. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .profile-page .ptab.active,
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .profile-page .ptab.active svg {
 color: var(--ref-brand-detail);
}

/* ── 6. Editor chat suggestions → the Reference Lab card ───────────────────
   The Lab specimen is `.reference-layout .suggest-*` in
   _september_refinements.css. Production already picked up the Lab's card
   SURFACE (--ref-suggestion-bg fill, --line border, --ref-button-radius) from
   coverage.css; what it never picked up was the Lab's rhythm, type and pager.
   These are that specimen's remaining declarations, re-scoped from the Lab
   root to the product root. No new tokens: the Lab card was not missing one.

   The pager is deliberately the Lab's own box — the Lab sizes .suggest-nav to
   30px and takes its fill/border/ink from the shared recipe, so matching it
   means adopting that, not minting a third pager. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .suggest-cards { gap: 10px; }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .suggest-card {
 gap: 4px;
 transition: background-color 150ms ease, border-color 150ms ease;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .suggest-card .suggest-card-title {
 margin: 0; font: 500 13px/1.45 var(--font-body);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .suggest-card .suggest-card-desc {
 margin: 0; font: 400 12px/1.55 var(--font-body);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.suggest-toggle,.suggest-count) {
 font-family: var(--font-body); letter-spacing: normal; text-transform: none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .suggest-nav { width: 30px; height: 30px; }
@media (max-width: 640px) {
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .suggest-nav { width: 44px; height: 44px; }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .suggest-cards { grid-template-columns: 1fr; }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .suggest-card .suggest-card-title { white-space: normal; overflow: visible; -webkit-line-clamp: unset; }
 html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .suggest-card .suggest-card-desc { -webkit-line-clamp: unset; }
}

/* ── 7. "Done" state indicators ────────────────────────────────────────────
   a. The completed turn's dot and its label. The dot shipped a raw #45e760 in
      theme.css, which is 1.63:1 on the light canvas — below the 3:1 non-text
      floor — so the theme-aware role fixes contrast as well as consistency.
      The label is addressed through the dot rather than a new class so no
      flag-off markup moves; only the completed state is selected, and
      planning / executing / failed / cancelled keep their own dots. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .editor-status-dot-completed {
 background-color: var(--ref-brand-detail);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .editor-status-dot-completed + span {
 color: var(--ref-brand-detail);
}
/* b. The published check tile in the publish modal's up-to-date card. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .pm .pm-bridge-icon--check {
 background: color-mix(in srgb, var(--ref-brand-detail) 16%, var(--bg-2));
 border-color: color-mix(in srgb, var(--ref-brand-detail) 40%, var(--line));
 color: var(--ref-brand-detail);
}
/* a-bis. The SHIPPED completed eyebrow. The editor's live chat renders the
      deliverable card, not the _chat_message status line, and measured in the
      browser its dot was rgb(232,234,237) — the white dot in the report. The
      dot is rendered ONLY for the completed state (the partial omits it for
      "Partial work saved"), so keying the label off `dot + label` colours the
      completed state and nothing else without touching markup. That also
      leaves the skill-pack card's dot-less "Skill pack" pending label alone
      while its "Installed" state, which does carry the dot, agrees. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .deliverable-eyebrow-dot {
 background: var(--ref-brand-detail);
 box-shadow: 0 0 8px color-mix(in srgb, var(--ref-brand-detail) 60%, transparent);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .deliverable-eyebrow-dot + .deliverable-eyebrow-label {
 color: var(--ref-brand-detail);
}
/* c. Bookmarked. The DS already had ONE pressed/selected state for icon
      buttons and the three bookmark affordances were deliberately unified onto
      it (see _version_restore.css), so the alt-green variant belongs there and
      not on any single bookmark button. .deliverable-save-version is the one
      the live editor actually renders — measured pressed and neutral in the
      browser — and it is named in that same unification note. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.icon-btn,.pm-feature-btn,.deliverable-save-version,.vh-mark)[aria-pressed="true"],
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(.vc-marked,.vc-act.vc-marked) {
 color: var(--ref-brand-detail);
}
/* Only .deliverable-save-version gets the tint back: its base rule already
   carries a border and fill in the pressed state. .vh-mark's pressed state is
   ink-only, so it stays ink-only — this restores colour, it does not add a
   box that was never there. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .deliverable-save-version[aria-pressed="true"] {
 border-color: color-mix(in srgb, var(--ref-brand-detail) 40%, var(--line));
 background: color-mix(in srgb, var(--ref-brand-detail) 12%, transparent);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .deliverable-save-version[aria-pressed="true"]:hover {
 background: color-mix(in srgb, var(--ref-brand-detail) 20%, transparent);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .vhp-diff-actions .pm-feature-btn[aria-pressed="true"] {
 border-color: color-mix(in srgb, var(--ref-brand-detail) 40%, var(--line));
 background: color-mix(in srgb, var(--ref-brand-detail) 12%, transparent);
}

/* ── 8. Tool-group status tones ────────────────────────────────────────────
   _tool_group_details.html.erb carried raw Tailwind palette classes and one
   raw hex. These three classes replace them under the flag; the partial emits
   the original strings verbatim when it is off. Green "done" resolves to the
   same role as items 3 and 7 so every completed state in the editor agrees. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .tool-tone--complete { color: var(--ref-brand-detail); }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .tool-tone--running { color: var(--info-fg); }
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] .tool-tone--muted { color: var(--fg-3); }
/* Shared foundations for Overskill's app, public pages and Reference Lab.
 * Keep theme values here. Component recipes consume these roles; layouts own
 * density and composition. Legacy opt-out, CF AI and customer OAuth are excluded.
 * Canonical guide: docs/design/OVERSKILL-DESIGN-SYSTEM.md. */
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme="light"],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme="light"]:not([data-oauth-app-themed="true"]) {
 --fg:#202124; --fg-2:#51555C; --fg-3:#626870; --fg-4:var(--fg-3);
 /* Surfaces have roles; state fills and borders keep their independent scale. */
 --rx-rail:#E7E7E7; --rx-canvas:#F5F5F5; --rx-chrome:#EEEEEE; --rx-panel:#FFFFFF; --rx-preview:#FFFFFF;
 --rx-chat-panel:#FAFAFA; --rx-chat-selected:#F0F0F0;
 --bg:var(--rx-canvas); --bg-1:var(--rx-chrome); --bg-2:var(--rx-panel); --bg-3:#F1F1F1;
 --line:#E4E4E4; --line-2:#D9D9D9; --rx-divider:var(--line);
 --rx-field:#FFFFFF; --rx-field-hover:#FAFAFA; --rx-field-border:#D2D2D2;
 --rx-raised:#FFFFFF; --rx-composer:#FFFFFF; --rx-readonly:var(--bg-1);
 --rx-overlay:#FCFCFC; --rx-overlay-border:color-mix(in srgb,var(--line-2) 70%,var(--rx-overlay));
 --rx-surface-hover:#F0F0F0; --rx-hover:#EBEBEB; --rx-active:#E5E5E5;
 --rx-surface-selected:#F1F1F1; --rx-overlay-selected:#F0F0F0;
 --rx-overlay-hover:#F4F4F4; --rx-overlay-selected-hover:#E9E9E9; --rx-overlay-active:#E8E8E8;
 --ref-segment-selected:var(--rx-raised);
 --ref-hover-border:var(--line-2);
 --rx-primary:#202124; --rx-primary-ink:#FFFFFF;
 --rx-primary-hover:#3C4045; --rx-primary-active:#484D54;
 --rx-secondary:#F0F0F0; --rx-secondary-hover:#E5E5E5; --rx-secondary-active:#DCDCDC;
 --rx-floating-shadow:0 2px 4px rgb(0 0 0 / 2%),0 12px 28px rgb(0 0 0 / 7%);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme="dark"],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme="dark"]:not([data-oauth-app-themed="true"]) {
 --fg:#F2F3F5; --fg-2:#B7BAC0; --fg-3:#989DA5; --fg-4:var(--fg-3);
 --rx-rail:#0E0F10; --rx-canvas:#121314; --rx-chrome:#18191A; --rx-panel:#1E1F21; --rx-preview:var(--rx-panel);
 --rx-editor-canvas:#151617;
 --rx-chat-panel:#1B1C1E; --rx-chat-selected:#25272A;
 --bg:var(--rx-canvas); --bg-1:var(--rx-chrome); --bg-2:var(--rx-panel); --bg-3:#242528;
 --line:#292B2F; --line-2:#35383E; --rx-divider:var(--line);
 --rx-field:#1B1C1E; --rx-field-hover:#202124; --rx-field-border:#3A3E45;
 /* Suggestions share the cool card palette, with a quiet tonal hover below menus. */
 --ref-suggestion-bg:var(--rx-panel); --ref-suggestion-hover:var(--rx-field-hover);
 --rx-raised:#242528; --rx-composer:var(--rx-raised); --rx-readonly:var(--bg-1);
 --rx-overlay:#222426; --rx-overlay-border:color-mix(in srgb,var(--line-2) 70%,var(--rx-overlay));
 --rx-surface-hover:#2C2E31; --rx-hover:#2C2E31; --rx-active:#303236;
 --rx-surface-selected:#2A2C2F; --rx-overlay-selected:#2F3134;
 --rx-overlay-hover:#292B2E; --rx-overlay-selected-hover:#36383C; --rx-overlay-active:#2D2F32;
 --ref-segment-selected:#141414;
 --ref-hover-border:var(--line-2);
 --rx-primary:#E8EAED; --rx-primary-ink:#202124;
 --rx-primary-hover:#FFFFFF; --rx-primary-active:#CDD0D5;
 --rx-secondary:#252628; --rx-secondary-hover:#333538; --rx-secondary-active:#3C3F43;
 --rx-floating-shadow:0 2px 4px rgb(0 0 0 / 9%),0 12px 28px rgb(0 0 0 / 24%);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme]:not([data-oauth-app-themed="true"]) {
 /* fg-4 is retained for legacy icon/label consumers; readable text has three
    roles. Disabled controls own their opacity rather than a faint text token. */
 /* The rail is recessed below the canvas in both appearances. Keep this
    independent of chrome/panels so menus retain their own elevation. */
 --rail-bg:var(--rx-rail);
 --rx-panel-shadow:none; --composer-shadow:none;
 --ref-button-light-depth:none; --ref-button-light-depth-hover:none;
 --ref-button-secondary-depth:none; --ref-button-secondary-depth-hover:none;
 --ref-button-primary-gradient:none; --ref-button-primary-gradient-hover:none;
 --ref-button-secondary-gradient:none; --ref-button-secondary-gradient-hover:none;
 --ref-button-primary-hover:var(--rx-primary-hover);
 --ref-button-secondary-hover:var(--rx-secondary-hover);
 --rx-secondary-ink:var(--fg-2);
 /* Marketing uses the same semantic roles, including its explicit islands. */
 --marketing-bg:var(--bg); --marketing-panel:var(--bg-1);
 --marketing-surface:var(--bg-2); --marketing-inset:var(--bg-3);
 --marketing-fg:var(--fg); --marketing-muted:var(--fg-2);
 --marketing-quiet:var(--fg-3); --marketing-placeholder:var(--fg-3);
 --marketing-line:var(--line); --marketing-line-strong:var(--line-2);
 --marketing-primary:var(--rx-primary); --marketing-primary-ink:var(--rx-primary-ink);
 --marketing-primary-hover:var(--rx-primary-hover);
 --marketing-primary-gradient:none; --marketing-primary-gradient-hover:none;
 --marketing-secondary:var(--rx-secondary); --marketing-secondary-hover:var(--rx-secondary-hover);
 --marketing-button-shadow:none; --marketing-button-shadow-hover:none;
 --marketing-overlay-shadow:var(--rx-floating-shadow);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme="light"],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme="light"]:not([data-oauth-app-themed="true"]) {
 --ref-brand-soft:hsl(130 55% 28%);
 --ref-checkbox-fill:var(--brand);
 --success-fg:var(--ref-brand-soft); --warning-fg:#B9480D; --danger-fg:#BA2623; --info-fg:#0169CC;
 --ref-focus:#929292; --ref-keyboard-focus:#777777; --ref-focus-halo:rgb(0 0 0 / 4%);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme="dark"],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme="dark"]:not([data-oauth-app-themed="true"]) {
 --ref-brand-soft:var(--ref-brand-alt);
 --ref-checkbox-fill:var(--brand);
 --success-fg:var(--ref-brand-alt); --warning-fg:#FF8549; --danger-fg:#FF6764; --info-fg:#99CEFF;
 --ref-focus:#505050; --ref-keyboard-focus:#909090; --ref-focus-halo:rgb(255 255 255 / 2%);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme],
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) [data-theme]:not([data-oauth-app-themed="true"]) {
 --brand:#45E760; --brand-fg:#0a0e0a; --ref-brand-alt:#75D785;
 --ref-checkbox-ink:#000000;
 --font-body:"Geist",system-ui,-apple-system,sans-serif;
 --font-heading-large:"Grifter","Geist",system-ui,sans-serif;
 --font-display:var(--font-body); --font-mono:"JetBrains Mono",ui-monospace,monospace;
 --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-xl:24px; --radius-pill:999px;
 --ref-button-radius:10px; --ref-button-radius-small:9px;
 --accent:var(--rx-primary); --accent-fg:var(--rx-primary-ink); --accent-hover:var(--rx-primary-hover); --primary-hover:var(--rx-primary-hover);
 --accent-text:var(--fg); --accent-text-hover:var(--fg);
 --hover-bg:var(--rx-surface-hover); --hover-border:var(--line-2);
 --card-bg:var(--rx-panel); --rail-bg:var(--rx-rail);
 --field-bg:var(--rx-field); --field-fg:var(--fg); --field-border:var(--rx-field-border);
 --field-border-hover:var(--line-2); --field-placeholder:var(--fg-3);
 --ref-field-focus:var(--ref-brand-soft); --ref-field-focus-visible:var(--ref-brand-soft);
 --field-border-focus:var(--ref-field-focus);
 --field-ring-color:color-mix(in srgb,var(--ref-field-focus) 12%,transparent);
 --field-ring:0 0 0 3px var(--field-ring-color);
 --focus-ring-color:var(--ref-keyboard-focus); --focus-ring:0 0 0 2px var(--ref-keyboard-focus);
 --credit-action:var(--ref-brand-soft); --ref-brand-detail:var(--ref-brand-soft);
 /* Promotional emphasis, distinct from success and interactive selection. */
 --ref-highlight-ink:var(--ref-brand-detail);
 --ref-highlight-bg:color-mix(in srgb,var(--ref-highlight-ink) 10%,var(--rx-panel));
 --ref-highlight-border:var(--line-2);
 --success-bg:color-mix(in srgb,var(--success-fg) 10%,var(--rx-panel));
 --warning-bg:color-mix(in srgb,var(--warning-fg) 10%,var(--rx-panel));
 --danger-bg:color-mix(in srgb,var(--danger-fg) 10%,var(--rx-panel));
 --info-bg:color-mix(in srgb,var(--info-fg) 10%,var(--rx-panel));
 --marketing-bg:var(--rx-canvas); --marketing-panel:var(--rx-chrome);
 --marketing-surface:var(--rx-panel); --marketing-inset:var(--bg-3);
 --marketing-fg:var(--fg); --marketing-muted:var(--fg-2); --marketing-quiet:var(--fg-3);
 --marketing-placeholder:var(--fg-3); --marketing-line:var(--line); --marketing-line-strong:var(--line-2);
 --marketing-divider:var(--rx-divider); --marketing-hover:var(--rx-hover); --marketing-hover-border:var(--line-2);
 --marketing-field:var(--rx-field); --marketing-raised:var(--rx-overlay);
 --marketing-menu-hover:var(--rx-overlay-hover); --marketing-menu-selected:var(--rx-overlay-selected);
 --marketing-selection:var(--rx-surface-selected); --marketing-focus:var(--ref-field-focus);
 --marketing-keyboard:var(--ref-keyboard-focus); --marketing-halo:var(--field-ring-color);
 --marketing-green-ink:var(--ref-brand-soft);
 --marketing-primary:var(--rx-primary); --marketing-primary-ink:var(--rx-primary-ink);
 --marketing-primary-hover:var(--rx-primary-hover); --marketing-primary-active:var(--rx-primary-active);
 --marketing-secondary:var(--rx-secondary); --marketing-secondary-hover:var(--rx-secondary-hover);
 --marketing-primary-gradient:none; --marketing-primary-gradient-hover:none;
 --marketing-button-shadow:none; --marketing-button-shadow-hover:none;
 --marketing-overlay-shadow:var(--rx-floating-shadow);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.text-display-xl,.text-display-lg,.text-display-md,.text-heading-lg) {
 font-family:var(--font-heading-large); font-weight:700;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.text-heading-md,.text-heading-sm,.text-title-lg,.text-title-md,.text-title-sm) {
 font-family:var(--font-body); font-weight:600;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.text-body-lg,.text-body-md,.text-body-sm) { font-weight:400; }

/* Composer send actions share the editor's brand green once input is ready.
   Keep the legacy --rx-send alias neutral: other primary controls consume it. */
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] {
 --ref-composer-send:var(--brand); --ref-composer-send-ink:var(--brand-fg);
 --ref-composer-send-hover:var(--ref-brand-alt);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.composer[data-composer-ready="true"] .send,.composer.has-content .send,.composer .composer-submit,.ref-compose-send,.editor-send-btn):not(:disabled,[aria-disabled="true"]) {
 background:var(--ref-composer-send); color:var(--ref-composer-send-ink); box-shadow:none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.composer[data-composer-ready="true"] .send,.composer.has-content .send,.composer .composer-submit,.ref-compose-send,.editor-send-btn):hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading) {
 background:var(--ref-composer-send-hover); color:var(--ref-composer-send-ink); transform:none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.composer:not(.has-content):not([data-composer-ready="true"]) .send,.composer .send:disabled,.composer .composer-submit:disabled,.ref-compose-send:disabled) {
 background:var(--bg-3); color:var(--fg-3); box-shadow:none; transform:none;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference)[data-theme] :is(.composer .send,.composer .composer-submit,.ref-compose-send,.editor-send-btn) svg { color:inherit; }

html.os-reference-marketing[data-theme] #mkt .hero2-send:not(:disabled,[aria-disabled="true"]) {
 background:var(--brand); color:var(--brand-fg); box-shadow:none; background-image:none;
}
html.os-reference-marketing[data-theme] #mkt .hero2-send:hover:not(:disabled,[aria-disabled="true"],[aria-busy="true"],.is-loading) {
 background:var(--ref-brand-alt); color:var(--brand-fg); transform:none;
}
/* Shared promotional emphasis. Pricing and Reference Lab render the same partial. */
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) .ds-highlight-panel {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ref-highlight-border);
  border-radius: var(--radius-md);
  background: var(--ref-highlight-bg);
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) .ds-highlight-panel > .ds-highlight-panel__title {
  margin: 0;
  font: 600 18px/1.35 var(--font-body);
  color: var(--ref-highlight-ink);
}
html:is([data-reference-system="true"],.reference-root,.reference-editor,.os-reference-marketing):not(.clickfunnels-reference) .ds-highlight-panel > .ds-highlight-panel__body {
  margin: 0;
  font: 400 13px/1.5 var(--font-body);
  color: var(--fg-2);
}
/* Local surface study, September 29. Dashboard content only; the global
 * palette, editor chrome, chat, controls and generated previews keep their roles.
 * Reference Lab uses this same recipe through .ref-dashboard-surfaces. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(#dashboard_panel .dash,.ref-dashboard-surfaces) {
  --ref-dashboard-card:var(--rx-chat-panel);
  --ref-dashboard-inset:var(--ref-dashboard-canvas);
  --ref-dashboard-border:var(--line);
  --ref-dashboard-card-radius:var(--radius-md);
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme="light"] :is(#dashboard_panel .dash,.ref-dashboard-surfaces) {
  --ref-dashboard-canvas:var(--rx-canvas);
  --ref-dashboard-nav:var(--rx-chrome);
  --ref-dashboard-nav-selected:var(--rx-raised);
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme="dark"] :is(#dashboard_panel .dash,.ref-dashboard-surfaces) {
  --ref-dashboard-canvas:var(--rx-editor-canvas,var(--rx-canvas));
  /* Persistent navigation and static cards share a quiet surface. */
  --ref-dashboard-nav:var(--ref-dashboard-card);
  --ref-dashboard-nav-selected:var(--rx-surface-selected);
}
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(#dashboard_panel .dash-main,.ref-dashboard-surfaces,.ref-dashboard-content) { background:var(--ref-dashboard-canvas); }
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(#dashboard_panel .dash-nav,.ref-dashboard-surfaces .ref-dashboard-nav) { background:var(--ref-dashboard-nav); }
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(#dashboard_panel .dash-nav-item.is-active,.ref-dashboard-surfaces .ref-dashboard-nav [aria-current="page"]) { background:var(--ref-dashboard-nav-selected); }

/* Match content cards, not the code/file rails or table headers that share
 * legacy editor background utilities. Static cards do not acquire a hover. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(#dashboard_panel .dash-main,.ref-dashboard-surfaces) :is(
  .dash-card,
  .credit-card,
  .stat-tile,
  .bg-editor-surface-1.border.border-editor-border.rounded-xl,
  .bg-editor-surface-1.border.border-editor-border.rounded-lg,
  .bg-editor-surface-2.border.border-editor-border.rounded-xl,
  [data-controller~="env-var-item"].border.border-editor-border
):not(:where([data-oauth-app-themed="true"] *,[role="dialog"],[role="dialog"] *,[aria-modal="true"],[aria-modal="true"] *)) {
  background:var(--ref-dashboard-card)!important;
  border:1px solid var(--ref-dashboard-border);
  border-radius:var(--ref-dashboard-card-radius);
  box-shadow:none;
}

/* Read-only content sits inside its parent card. Interactive controls retain
 * their existing focus, hover and disabled treatments. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] :is(#dashboard_panel .dash-main,.ref-dashboard-surfaces) .ref-dashboard-inset,
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] #dashboard_panel .dash-card .visibility-state:not(:hover,:focus-visible) {
  background:var(--ref-dashboard-inset);
  border-color:var(--ref-dashboard-border);
}

/* Compact tiles were previously flattened by the overview adapter. */
html[data-reference-system="true"]:not(.clickfunnels-reference)[data-theme] #dashboard_panel :is(.dash-overview,.user-directory-stats) .stat-tile {
  padding:12px 14px;
}
/* Headings stand on their own. Remove reviewed decorative overlines while
 * keeping section labels, reporting windows, statuses and payment conditions.
 * Generic eyebrow classes also carry those meanings; never hide them globally. */
html:is([data-reference-system="true"],.reference-root,.reference-editor):not(.clickfunnels-reference)[data-theme] :is(
  [data-reference-decorative-overline],
  .profile-page .panel-tag,
  .billing-shell:not([data-testid="product-subscriptions"]) .billing-header .billing-header-eyebrow,
  .members-header-eyebrow,
  .support-header-eyebrow,
  .affiliate-header-eyebrow,
  .wint-header-eyebrow,
  .mdisc-cta-eyebrow,
  .mcl-top > .mcl-eyebrow,
  .upgrade-plan > .text-eyebrow,
  .experiments-heading > div > .text-eyebrow,
  .experiment-ai-header > div > .text-eyebrow,
  .builder-follow-up__header > .eyebrow,
  .builder-goal-entry__copy > .eyebrow,
  .builder-follow-up__example-copy > .eyebrow,
  .computer-images__heading > .computer-images__eyebrow,
  .computer-page-head__main > .computer-campaign__eyebrow,
  .vibe-panel__head .vibe-panel__tag
) {
  display:none;
}
/*
 * Overskill presentation refresh. Loaded only by the presentation gate.


































 */