html[data-theme="dark"][data-accent-glow-state="on"] {
  --glow-line-shadow:
    0 0 6px rgb(var(--accent-rgb) / 72%),
    0 0 16px rgb(var(--accent-rgb) / 34%);
  --glow-selection-shadow: 0 0 8px rgb(var(--accent-rgb) / 72%);
  --glow-cursor-filter:
    drop-shadow(0 0 3px rgb(var(--accent-rgb) / 58%))
    drop-shadow(0 0 10px rgb(var(--accent-rgb) / 22%));
  --glow-cursor-filter-soft:
    drop-shadow(0 0 5px rgb(var(--accent-rgb) / 38%))
    drop-shadow(0 0 18px rgb(var(--accent-rgb) / 10%));
}

html[data-theme="dark"][data-accent-glow-state="on"] [data-accent-glow] {
  --glow-level: max(
    var(--interaction-progress, 0),
    var(--glow-static, 0)
  );
  transition: none;
}

html[data-theme="dark"][data-accent-glow-state="on"] [data-accent-glow]:is(
  [aria-pressed="true"],
  [aria-current="page"],
  [aria-current="location"]
) {
  --glow-static: 0.72;
}

html[data-theme="dark"][data-accent-glow-state="on"] [data-accent-glow~="text"] {
  text-shadow:
    0 0 calc((3px + var(--glow-level, 0) * 9px) * var(--glow-scale, 1))
      rgb(
        var(--accent-rgb) /
        calc((0.24 + var(--glow-level, 0) * 0.66) * var(--glow-scale, 1))
      ),
    0 0 calc((11px + var(--glow-level, 0) * 24px) * var(--glow-scale, 1))
      rgb(
        var(--accent-rgb) /
        calc((0.1 + var(--glow-level, 0) * 0.3) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] [data-accent-glow~="paint"][data-glow-edge="surface"] {
  border-color: var(--accent);
  box-shadow:
    0 0 calc((5px + var(--glow-level, 0) * 11px) * var(--glow-scale, 1))
      rgb(
        var(--accent-rgb) /
        calc((0.16 + var(--glow-level, 0) * 0.42) * var(--glow-scale, 1))
      ),
    0 0 calc((16px + var(--glow-level, 0) * 24px) * var(--glow-scale, 1))
      rgb(
        var(--accent-rgb) /
        calc((0.05 + var(--glow-level, 0) * 0.2) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] [data-accent-glow~="paint"][data-glow-edge="line"] {
  border-color: var(--accent);
  box-shadow: none;
}

html[data-theme="dark"][data-accent-glow-state="on"] [data-accent-glow~="paint"]:not([data-glow-edge]) {
  box-shadow:
    inset 0 0 calc((4px + var(--glow-level, 0) * 8px) * var(--glow-scale, 1))
      rgb(
        var(--accent-rgb) /
        calc((0.14 + var(--glow-level, 0) * 0.3) * var(--glow-scale, 1))
      ),
    inset 0 0 calc((12px + var(--glow-level, 0) * 20px) * var(--glow-scale, 1))
      rgb(
        var(--accent-rgb) /
        calc((0.05 + var(--glow-level, 0) * 0.14) * var(--glow-scale, 1))
      ),
    0 0 calc((4px + var(--glow-level, 0) * 10px) * var(--glow-scale, 1))
      rgb(
        var(--accent-rgb) /
        calc((0.1 + var(--glow-level, 0) * 0.3) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] :is(
  button:not(.accent-preset):not(.ds-choice),
  input,
  textarea,
  select,
  summary,
  [role="button"],
  [contenteditable="true"],
  .ds-link,
  .ds-route-link,
  .settings-trigger,
  .directory-utilities a,
  .lab-index a
) {
  --control-glow-level: var(--interaction-progress, 0);
}

html[data-theme="dark"][data-accent-glow-state="on"] :is(
  .ds-media,
  .portrait,
  .color-token,
  .cursor-target,
  .spec-card,
  [data-hover-surface]
) {
  --control-glow-level: var(--interaction-progress, 0);
}

html[data-theme="dark"][data-accent-glow-state="on"] :is(
  button:not(.accent-preset):not(.ds-choice),
  input,
  textarea,
  select,
  summary,
  [role="button"],
  [contenteditable="true"],
  .ds-link,
  .ds-route-link,
  .settings-trigger,
  .directory-utilities a,
  .lab-index a
):not([data-accent-glow]) {
  text-shadow:
    0 0 calc(8px * var(--control-glow-level, 0) * var(--glow-scale, 1))
      rgb(
        var(--accent-rgb) /
        calc(0.72 * var(--control-glow-level, 0) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] :is(
  button:not(.accent-preset):not(.ds-choice),
  input,
  textarea,
  select,
  summary,
  [role="button"],
  [contenteditable="true"],
  .ds-media,
  .portrait,
  .color-token,
  .cursor-target,
  .spec-card,
  [data-hover-surface]
):not([data-accent-glow])[data-glow-edge="surface"] {
  box-shadow:
    0 0 calc(5px + var(--control-glow-level, 0) * 13px)
      rgb(
        var(--accent-rgb) /
        calc(0.66 * var(--control-glow-level, 0) * var(--glow-scale, 1))
      ),
    0 0 calc(15px + var(--control-glow-level, 0) * 25px)
      rgb(
        var(--accent-rgb) /
        calc(0.28 * var(--control-glow-level, 0) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] :is(
  button:not(.accent-preset):not(.ds-choice),
  [role="button"],
  .ds-button--quiet,
  .cursor-target
):not([data-accent-glow]):not([data-glow-edge]) {
  box-shadow:
    inset 0 0 calc(5px + var(--control-glow-level, 0) * 8px)
      rgb(
        var(--accent-rgb) /
        calc(0.36 * var(--control-glow-level, 0) * var(--glow-scale, 1))
      ),
    0 0 calc(6px + var(--control-glow-level, 0) * 12px)
      rgb(
        var(--accent-rgb) /
        calc(0.6 * var(--control-glow-level, 0) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] .directory-entry:is(
  .ds-route-link--directory
) .directory-copy strong {
  text-shadow:
    0 0 calc(8px + var(--interaction-progress, 0) * 14px)
      rgb(
        var(--accent-rgb) /
        calc(0.7 * var(--interaction-progress, 0) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] :is(
  .ds-hint,
  .spec-note,
  figcaption,
  small,
  .directory-number,
  .directory-meta,
  .glow-component-note,
  .usage-note,
  .notice
) {
  text-shadow: none;
}

html[data-theme="dark"][data-accent-glow-state="on"] .ds-promote-text {
  text-shadow:
    0 0 calc(8px * var(--interaction-progress, 0) * var(--glow-scale, 1))
      rgb(
        var(--accent-rgb) /
        calc(0.72 * var(--interaction-progress, 0) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] .ds-input::placeholder,
html[data-theme="dark"][data-accent-glow-state="on"] .ds-textarea::placeholder {
  text-shadow:
    0 0 calc(8px * var(--interaction-progress, 0) * var(--glow-scale, 1))
      rgb(
        var(--accent-rgb) /
        calc(0.72 * var(--interaction-progress, 0) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] :is(
  .ds-link,
  .ds-route-link
)::after {
  box-shadow: var(--glow-line-shadow);
}

html[data-theme="dark"][data-accent-glow-state="on"] .ds-input,
html[data-theme="dark"][data-accent-glow-state="on"] .ds-textarea {
  box-shadow:
    inset calc(var(--focus-progress, 0) * 3px) 0 var(--accent),
    0 0 calc(var(--focus-progress, 0) * 18px)
      rgb(
        var(--accent-rgb) /
        calc(0.5 * var(--focus-progress, 0) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] .ds-range-wrap {
  --range-glow-level: max(
    var(--hover-progress, 0),
    var(--focus-progress, 0)
  );
}

html[data-theme="dark"][data-accent-glow-state="on"] .ds-range-glow {
  background: var(--accent);
  box-shadow:
    0 0 calc(4px + var(--range-glow-level, 0) * 16px)
      rgb(
        var(--accent-rgb) /
        calc((0.32 + var(--range-glow-level, 0) * 0.68) * var(--glow-scale, 1))
      ),
    0 0 calc(12px + var(--range-glow-level, 0) * 28px)
      rgb(
        var(--accent-rgb) /
        calc((0.1 + var(--range-glow-level, 0) * 0.5) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] .ds-range:not(:disabled)::-webkit-slider-thumb {
  box-shadow:
    inset 0 0 0 4px var(--bg),
    0 0 calc(6px + var(--interaction-progress, 0) * 18px)
      rgb(
        var(--accent-rgb) /
        calc((0.62 + var(--interaction-progress, 0) * 0.38) * var(--glow-scale, 1))
      ),
    0 0 calc(16px + var(--interaction-progress, 0) * 30px)
      rgb(
        var(--accent-rgb) /
        calc((0.24 + var(--interaction-progress, 0) * 0.5) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] .ds-range:not(:disabled)::-moz-range-thumb {
  box-shadow:
    inset 0 0 0 4px var(--bg),
    0 0 calc(6px + var(--interaction-progress, 0) * 18px)
      rgb(
        var(--accent-rgb) /
        calc((0.62 + var(--interaction-progress, 0) * 0.38) * var(--glow-scale, 1))
      ),
    0 0 calc(16px + var(--interaction-progress, 0) * 30px)
      rgb(
        var(--accent-rgb) /
        calc((0.24 + var(--interaction-progress, 0) * 0.5) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] .ds-range:disabled::-webkit-slider-thumb,
html[data-theme="dark"][data-accent-glow-state="on"] .ds-range:disabled::-moz-range-thumb {
  border-color: var(--line-strong);
  background: var(--bg);
  box-shadow: none;
}

html[data-theme="dark"][data-accent-glow-state="on"] .ds-choice[data-selected="true"] {
  box-shadow:
    inset 0 -2px var(--accent),
    0 0 calc(8px + var(--interaction-progress, 0) * 14px)
      rgb(
        var(--accent-rgb) /
        calc((0.22 + var(--interaction-progress, 0) * 0.48) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] .accent-preset {
  box-shadow: none;
}

html[data-theme="dark"][data-accent-glow-state="on"] .accent-preset span {
  box-shadow:
    0 0 calc(4px + var(--preset-glow-level) * 10px)
      color-mix(
        in srgb,
        var(--preset-visible, var(--preset)) calc(
          var(--preset-glow-level) * 82%
        ),
        transparent
      ),
    0 0 calc(12px + var(--preset-glow-level) * 20px)
      color-mix(
        in srgb,
        var(--preset-visible, var(--preset)) calc(
          var(--preset-glow-level) * 42%
        ),
        transparent
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] .portrait {
  --portrait-glow-level: var(--hover-progress, 0);
}

html[data-theme="dark"][data-accent-glow-state="on"] .portrait {
  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--accent) calc(var(--portrait-glow-level, 0) * 38%),
        transparent
      ),
    0 0 calc(var(--portrait-glow-level, 0) * 18px)
      rgb(
        var(--accent-rgb) /
        calc(0.36 * var(--portrait-glow-level, 0) * var(--glow-scale, 1))
      );
}

html[data-theme="dark"][data-accent-glow-state="on"] .aim-cursor[data-kind="interactive"] .cursor-frame {
  filter: var(--glow-cursor-filter);
}

html[data-theme="dark"][data-accent-glow-state="on"] .aim-cursor[data-kind="interactive"][data-target-edge="none"] .cursor-frame {
  filter: var(--glow-cursor-filter-soft);
}

html[data-theme="dark"][data-accent-glow-state="on"] .aim-cursor[data-kind="interactive"][data-target-type="range"] .cursor-frame {
  filter: var(--glow-cursor-filter);
}

html[data-theme="dark"][data-accent-glow-state="on"] ::selection {
  text-shadow: var(--glow-selection-shadow);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] [data-accent-glow] {
    transition: none;
  }
}