:root {
  --theme-transition: 180ms ease;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c100c;
  --bg-2: #111711;
  --panel: #151c15;
  --panel-2: #1a231a;
  --panel-3: #202b20;
  --line: #334033;
  --line-soft: #283328;
  --text: #f2f5ef;
  --muted: #aeb9aa;
  --muted-2: #7f8d7c;
  --accent: #84d26a;
  --accent-2: #b8ef7d;
  --danger: #ff8278;
  --warning: #f6ce6b;
  --info: #82c9ff;
  --theme-page:
    radial-gradient(circle at 10% 2%, rgba(132, 210, 106, 0.12), transparent 28rem),
    radial-gradient(circle at 86% 13%, rgba(94, 145, 85, 0.09), transparent 31rem),
    linear-gradient(180deg, #0c100c, #0a0e0a 42%, #0c110c);
  --theme-grid-line: rgba(255, 255, 255, 0.055);
  --theme-header-bg: rgba(12, 16, 12, 0.86);
  --theme-header-border: rgba(80, 99, 78, 0.5);
  --theme-panel-gradient: linear-gradient(180deg, rgba(25, 34, 24, 0.98), rgba(18, 25, 18, 0.98));
  --theme-card-gradient: linear-gradient(180deg, #151c15, #121912);
  --theme-panel-border: #3b4a39;
  --theme-subtle-bg: #121a12;
  --theme-subtle-bg-2: #101710;
  --theme-subtle-bg-3: #131a13;
  --theme-input-bg: #0f150f;
  --theme-input-border: #435140;
  --theme-input-hover: #596957;
  --theme-placeholder: #6f7b6d;
  --theme-text-soft: #c8d1c4;
  --theme-text-bright: #edf2e9;
  --theme-on-accent: #0b1109;
  --theme-accent-hover: #9ae17e;
  --theme-secondary-bg: #253323;
  --theme-secondary-hover: #2b3b28;
  --theme-secondary-text: #e5eddf;
  --theme-control-border: #435440;
  --theme-control-hover-border: #6a8064;
  --theme-copy-bg: #1d281c;
  --theme-copy-hover: #273526;
  --theme-copy-text: #dfe8da;
  --theme-chip-bg: #141c14;
  --theme-chip-text: #bfc9ba;
  --theme-result-bg: #111811;
  --theme-preview-bg: linear-gradient(180deg, #101610, #0d130d);
  --theme-preview-frame: #080c08;
  --theme-metric-bg: #151d15;
  --theme-metric-primary: #182118;
  --theme-avatar-bg: #0c120c;
  --theme-code-bg: #0c120c;
  --theme-code-text: #d9f5c3;
  --theme-formula-bg: #0e140e;
  --theme-formula-text: #d9efcc;
  --theme-callout-bg: #1b1910;
  --theme-callout-border: #4a4532;
  --theme-callout-text: #d8cda2;
  --theme-danger-bg: #1b1715;
  --theme-danger-border: #433d39;
  --theme-danger-text: #d9aaa5;
  --theme-danger-hover-bg: #271b19;
  --theme-danger-hover-border: #825a55;
  --theme-success-text: #b9ef9f;
  --theme-wrong-text: #f2aaa3;
  --theme-link-hover: #d7ffaf;
  --theme-focus: rgba(184, 239, 125, 0.72);
  --theme-toast-bg: #182018;
  --theme-toast-border: #53634f;
  --theme-toast-text: #eef5e9;
  --theme-switch-bg: rgba(17, 24, 17, 0.88);
  --theme-switch-active: #2a3827;
}

html[data-theme="warm"] {
  color-scheme: light;
  --bg: #f6f0e5;
  --bg-2: #eee4d6;
  --panel: #fffaf2;
  --panel-2: #f7eddf;
  --panel-3: #ede0cf;
  --line: #cbbca7;
  --line-soft: #ded2c0;
  --text: #29251f;
  --muted: #625b51;
  --muted-2: #817668;
  --accent: #4d8146;
  --accent-2: #376d38;
  --danger: #b8473e;
  --warning: #9a6709;
  --info: #176ea6;
  --theme-page:
    radial-gradient(circle at 10% 2%, rgba(89, 134, 71, 0.14), transparent 28rem),
    radial-gradient(circle at 86% 13%, rgba(202, 154, 75, 0.11), transparent 31rem),
    linear-gradient(180deg, #f8f3e9, #f2eadf 46%, #f6f0e5);
  --theme-grid-line: rgba(77, 63, 45, 0.07);
  --theme-header-bg: rgba(250, 246, 238, 0.9);
  --theme-header-border: rgba(143, 128, 107, 0.42);
  --theme-panel-gradient: linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(245, 236, 222, 0.98));
  --theme-card-gradient: linear-gradient(180deg, #fffaf2, #f5ecdf);
  --theme-panel-border: #bcae9a;
  --theme-subtle-bg: #f0e6d8;
  --theme-subtle-bg-2: #f7eee2;
  --theme-subtle-bg-3: #f5ecdf;
  --theme-input-bg: #fffdf8;
  --theme-input-border: #b9aa96;
  --theme-input-hover: #8f806d;
  --theme-placeholder: #938879;
  --theme-text-soft: #4f493f;
  --theme-text-bright: #302c25;
  --theme-on-accent: #ffffff;
  --theme-accent-hover: #5f9357;
  --theme-secondary-bg: #e9dece;
  --theme-secondary-hover: #dfd1be;
  --theme-secondary-text: #302c26;
  --theme-control-border: #b8a993;
  --theme-control-hover-border: #8e7f6b;
  --theme-copy-bg: #eee4d5;
  --theme-copy-hover: #e1d3c0;
  --theme-copy-text: #353128;
  --theme-chip-bg: #f4ebdf;
  --theme-chip-text: #4e473d;
  --theme-result-bg: #f8f0e5;
  --theme-preview-bg: linear-gradient(180deg, #17301b, #0c1a10);
  --theme-preview-frame: #071008;
  --theme-metric-bg: #fffaf2;
  --theme-metric-primary: #edf3e7;
  --theme-avatar-bg: #e6dccd;
  --theme-code-bg: #f2e8da;
  --theme-code-text: #315f32;
  --theme-formula-bg: #f0e9db;
  --theme-formula-text: #315733;
  --theme-callout-bg: #fff5d9;
  --theme-callout-border: #d0b976;
  --theme-callout-text: #66521a;
  --theme-danger-bg: #f8e9e5;
  --theme-danger-border: #d6aaa2;
  --theme-danger-text: #9f3f38;
  --theme-danger-hover-bg: #f2dcd7;
  --theme-danger-hover-border: #b8756d;
  --theme-success-text: #376d38;
  --theme-wrong-text: #a8423a;
  --theme-link-hover: #235e2d;
  --theme-focus: rgba(55, 109, 56, 0.58);
  --theme-toast-bg: #2d3028;
  --theme-toast-border: #545a4a;
  --theme-toast-text: #fffaf0;
  --theme-switch-bg: rgba(241, 232, 219, 0.9);
  --theme-switch-active: #fffaf2;
}

html[data-theme="azure"] {
  color-scheme: dark;
  --bg: #061a2d;
  --bg-2: #09243d;
  --panel: #0c2944;
  --panel-2: #103651;
  --panel-3: #154261;
  --line: #285777;
  --line-soft: #1d4664;
  --text: #eef8ff;
  --muted: #b4ccdc;
  --muted-2: #7fa7c1;
  --accent: #42b9ff;
  --accent-2: #8bd9ff;
  --danger: #ff857f;
  --warning: #ffd36b;
  --info: #72d3ff;
  --theme-page:
    radial-gradient(circle at 10% 2%, rgba(54, 177, 255, 0.22), transparent 30rem),
    radial-gradient(circle at 86% 13%, rgba(32, 117, 190, 0.2), transparent 34rem),
    linear-gradient(180deg, #061a2d, #072038 45%, #061a2d);
  --theme-grid-line: rgba(133, 213, 255, 0.075);
  --theme-header-bg: rgba(5, 24, 42, 0.88);
  --theme-header-border: rgba(59, 134, 183, 0.52);
  --theme-panel-gradient: linear-gradient(180deg, rgba(13, 45, 73, 0.98), rgba(8, 31, 53, 0.98));
  --theme-card-gradient: linear-gradient(180deg, #0c2944, #09233b);
  --theme-panel-border: #2d6487;
  --theme-subtle-bg: #0b2944;
  --theme-subtle-bg-2: #09243d;
  --theme-subtle-bg-3: #0b2944;
  --theme-input-bg: #061b2e;
  --theme-input-border: #326787;
  --theme-input-hover: #4b88ac;
  --theme-placeholder: #6f9ab7;
  --theme-text-soft: #d0e4f1;
  --theme-text-bright: #f4fbff;
  --theme-on-accent: #041726;
  --theme-accent-hover: #68c8ff;
  --theme-secondary-bg: #123d5e;
  --theme-secondary-hover: #174a70;
  --theme-secondary-text: #e5f6ff;
  --theme-control-border: #3b7396;
  --theme-control-hover-border: #63a3c9;
  --theme-copy-bg: #103653;
  --theme-copy-hover: #174765;
  --theme-copy-text: #e2f4ff;
  --theme-chip-bg: #0a2944;
  --theme-chip-text: #c2dceb;
  --theme-result-bg: #08233a;
  --theme-preview-bg: linear-gradient(180deg, #082238, #051725);
  --theme-preview-frame: #03111c;
  --theme-metric-bg: #0c2b47;
  --theme-metric-primary: #0e3554;
  --theme-avatar-bg: #061b2e;
  --theme-code-bg: #061b2e;
  --theme-code-text: #a7e4ff;
  --theme-formula-bg: #071f34;
  --theme-formula-text: #b9e8ff;
  --theme-callout-bg: #302c14;
  --theme-callout-border: #6e6530;
  --theme-callout-text: #f2dfa2;
  --theme-danger-bg: #281d21;
  --theme-danger-border: #60404b;
  --theme-danger-text: #f1b0b3;
  --theme-danger-hover-bg: #382229;
  --theme-danger-hover-border: #96616d;
  --theme-success-text: #9ee5ff;
  --theme-wrong-text: #ffaaa5;
  --theme-link-hover: #c8efff;
  --theme-focus: rgba(66, 185, 255, 0.72);
  --theme-toast-bg: #0e2c46;
  --theme-toast-border: #4e83a4;
  --theme-toast-text: #eef9ff;
  --theme-switch-bg: rgba(6, 30, 51, 0.9);
  --theme-switch-active: #154c70;
}

html[data-theme] {
  background: var(--bg);
  accent-color: var(--accent);
}

html[data-theme] body {
  color: var(--text);
  background: var(--theme-page);
}

html[data-theme] body::before {
  opacity: 1;
  background-image:
    linear-gradient(90deg, var(--theme-grid-line) 1px, transparent 1px),
    linear-gradient(var(--theme-grid-line) 1px, transparent 1px);
}

html[data-theme] a:hover {
  color: var(--theme-link-hover);
}

html[data-theme] :focus-visible {
  outline-color: var(--theme-focus);
}

html[data-theme] .site-header,
html[data-theme] .privacy-page header {
  border-color: var(--theme-header-border);
  background: var(--theme-header-bg);
}

.header-tools,
.privacy-header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--theme-switch-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.theme-option {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  transition:
    transform var(--theme-transition),
    border-color var(--theme-transition),
    background var(--theme-transition);
}

.theme-option::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.15);
}

.theme-option[data-theme-option="dark"]::before {
  background: #10150f;
}

.theme-option[data-theme-option="warm"]::before {
  border-color: #c7b79e;
  background: #f6f0e5;
}

.theme-option[data-theme-option="azure"]::before {
  border-color: #6dc8ff;
  background: #0877be;
}

.theme-option:hover {
  transform: translateY(-1px);
  border-color: var(--line);
}

.theme-option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--theme-switch-active);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.theme-option[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 4px;
  height: 4px;
  background: var(--accent);
}

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

html[data-theme] .brand-mark {
  box-shadow: 0 0 0 1px var(--line);
}

html[data-theme] .header-pill,
html[data-theme] .eyebrow,
html[data-theme] .intent-note {
  border-color: var(--line);
  background: var(--theme-subtle-bg);
}

html[data-theme] .hero-lede {
  color: var(--theme-text-soft);
}

html[data-theme] .tool-card {
  border-color: var(--theme-panel-border);
  background: var(--theme-panel-gradient);
}

html[data-theme] .tool-card::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 45%, transparent);
}

html[data-theme] .edition-badge,
html[data-theme] .step-num {
  border-color: var(--line);
  background: var(--panel-3);
  color: var(--accent-2);
}

html[data-theme] .field-label {
  color: var(--theme-text-bright);
}

html[data-theme] .text-input,
html[data-theme] .select-input,
html[data-theme] .hex-input,
html[data-theme] input[type="color"] {
  border-color: var(--theme-input-border);
  background: var(--theme-input-bg);
  color: var(--text);
}

html[data-theme] .text-input::placeholder,
html[data-theme] .hex-input::placeholder {
  color: var(--theme-placeholder);
}

html[data-theme] .text-input:hover,
html[data-theme] .select-input:hover,
html[data-theme] .hex-input:hover {
  border-color: var(--theme-input-hover);
}

html[data-theme] .primary-btn {
  background: var(--accent);
  color: var(--theme-on-accent);
}

html[data-theme] .primary-btn:hover {
  background: var(--theme-accent-hover);
}

html[data-theme] .secondary-btn {
  border-color: var(--theme-control-border);
  background: var(--theme-secondary-bg);
  color: var(--theme-secondary-text);
}

html[data-theme] .secondary-btn:hover {
  border-color: var(--theme-control-hover-border);
  background: var(--theme-secondary-hover);
}

html[data-theme] .ghost-btn {
  border-color: var(--line);
}

html[data-theme] .ghost-btn:hover {
  border-color: var(--theme-control-hover-border);
}

html[data-theme] .copy-btn {
  border-color: var(--line);
  background: var(--theme-copy-bg);
  color: var(--theme-copy-text);
}

html[data-theme] .copy-btn:hover {
  border-color: var(--theme-control-hover-border);
  background: var(--theme-copy-hover);
}

html[data-theme] .chip-btn,
html[data-theme] .suggestion {
  border-color: var(--line);
  background: var(--theme-chip-bg);
  color: var(--theme-chip-text);
}

html[data-theme] .chip-btn:hover {
  border-color: var(--theme-control-hover-border);
  color: var(--text);
}

html[data-theme] .result-shell {
  background: var(--theme-result-bg);
}

html[data-theme] .empty-result h3,
html[data-theme] .metric-value,
html[data-theme] .footer-domain {
  color: var(--theme-text-bright);
}

html[data-theme] .avatar-wrap {
  border-color: var(--line);
  background: var(--theme-avatar-bg);
  box-shadow: 0 0 0 4px var(--theme-subtle-bg-2);
}

html[data-theme] .result-preview {
  background: var(--theme-preview-bg);
}

html[data-theme] .preview-frame {
  border-color: var(--line);
  background: var(--theme-preview-frame);
}

html[data-theme] .metric {
  background: var(--theme-metric-bg);
}

html[data-theme] .metric.primary-metric {
  background: var(--theme-metric-primary);
}

html[data-theme] .section + .section,
html[data-theme] footer {
  border-color: var(--line-soft);
}

html[data-theme] .card {
  border-color: var(--line);
  background: var(--theme-card-gradient);
}

html[data-theme] .compare-hint,
html[data-theme] .compare-empty {
  border-color: var(--line);
}

html[data-theme] .compare-summary,
html[data-theme] .compare-item,
html[data-theme] details {
  border-color: var(--line);
  background: var(--theme-subtle-bg-2);
}

html[data-theme] .distance-badge {
  border-color: var(--line);
}

html[data-theme] .remove-btn {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger-bg);
  color: var(--theme-danger-text);
}

html[data-theme] .remove-btn:hover {
  border-color: var(--theme-danger-hover-border);
  background: var(--theme-danger-hover-bg);
}

html[data-theme] .command-box {
  border-color: var(--line);
  background: var(--theme-code-bg);
}

html[data-theme] .command-box-head {
  border-color: var(--line-soft);
}

html[data-theme] .command-code {
  color: var(--theme-code-text);
}

html[data-theme] .callout {
  border-color: var(--theme-callout-border);
  background: var(--theme-callout-bg);
  color: var(--theme-callout-text);
}

html[data-theme] .step,
html[data-theme] .trouble {
  background: var(--theme-subtle-bg-3);
}

html[data-theme] .formula {
  border-color: var(--line);
  background: var(--theme-formula-bg);
  color: var(--theme-formula-text);
}

html[data-theme] .correct {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
}

html[data-theme] .wrong {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}

html[data-theme] .correct h3 {
  color: var(--theme-success-text);
}

html[data-theme] .wrong h3 {
  color: var(--theme-wrong-text);
}

html[data-theme] .toast {
  border-color: var(--theme-toast-border);
  background: var(--theme-toast-bg);
  color: var(--theme-toast-text);
}

html[data-theme] .privacy-page article {
  border-color: var(--line);
  background: var(--theme-panel-gradient);
}

html[data-theme] .privacy-page .notice {
  border-color: var(--line);
  border-left-color: var(--accent);
  background: var(--theme-subtle-bg);
}

.privacy-page .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.privacy-page .brand span {
  color: var(--accent);
}

@media (max-width: 1100px) {
  .header-tools {
    gap: 8px;
  }
}

@media (max-width: 660px) {
  .theme-switcher {
    gap: 2px;
  }

  .theme-option {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  .privacy-page .back {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme-ready="true"] body,
  html[data-theme-ready="true"] .site-header,
  html[data-theme-ready="true"] .card,
  html[data-theme-ready="true"] .tool-card,
  html[data-theme-ready="true"] .text-input,
  html[data-theme-ready="true"] .select-input,
  html[data-theme-ready="true"] .hex-input,
  html[data-theme-ready="true"] .theme-switcher {
    transition:
      color var(--theme-transition),
      border-color var(--theme-transition),
      background var(--theme-transition);
  }
}