/* Fluent 2 design tokens — light & dark acrylic surfaces */
:root {
  --surface: rgba(255, 255, 255, 0.68);
  --line: rgba(24, 39, 58, 0.10);
  --line-2: rgba(24, 39, 58, 0.14);
  --text: #152033;
  --muted: #5d6a7b;
  --blue: #0f6cbd;
  --blue-2: #126fd0;
  --blue-soft: rgba(15, 108, 189, 0.08);
  --green: #107c41;
  --green-soft: rgba(16, 124, 65, 0.08);
  --red: #c42b1c;
  --red-soft: rgba(196, 43, 28, 0.07);
  --warn: #8a5a00;
  --shadow: 0 1.25em 3.75em rgba(38, 62, 91, 0.10);
  --radius: 0.875em;
  --page-grad: linear-gradient(135deg, #edf5ff 0%, #f9fbfe 48%, #edf5ff 100%);
  --page-glow: radial-gradient(circle at 73% 5%, rgba(125, 182, 255, 0.20), transparent 30%);
  --html-bg: linear-gradient(135deg, #eef5ff 0%, #f8fbff 48%, #edf5ff 100%);

  --card-border: rgba(255, 255, 255, 0.84);
  --card-outline: var(--line);
  --sidebar-bg: linear-gradient(180deg, rgba(240, 246, 255, 0.74), rgba(232, 241, 252, 0.56));
  --sidebar-border: rgba(24, 39, 58, 0.08);
  --nav-color: #344258;
  --nav-hover-bg: rgba(255, 255, 255, 0.56);
  --nav-active-bg: rgba(255, 255, 255, 0.66);
  --nav-active-outline: rgba(255, 255, 255, 0.82);
  --nav-active-shadow: 0 0.625em 1.5em rgba(32, 64, 94, 0.08);
  --side-card-bg: rgba(255, 255, 255, 0.52);
  --side-card-border: rgba(255, 255, 255, 0.76);
  --side-card-outline: rgba(24, 39, 58, 0.05);
  --side-card-shadow: 0 0.4375em 1.25em rgba(31, 52, 77, 0.05);
  --utility-bg: rgba(255, 255, 255, 0.64);
  --utility-hover-bg: #fff;
  --utility-color: #405067;
  --utility-shadow: 0 0.125em 0.5em rgba(31, 52, 77, 0.04);
  --utility-hover-shadow: 0 0.375em 0.875em rgba(31, 52, 77, 0.07);
  --subtle: #7b8797;
  --editor-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.73), rgba(248, 251, 255, 0.58));
  --editor-hover-bg: rgba(255, 255, 255, 0.76);
  --editor-focus-bg: rgba(255, 255, 255, 0.84);
  --editor-drag-bg: rgba(255, 255, 255, 0.9);
  --editor-border: rgba(24, 39, 58, 0.12);
  --editor-tools-bg: rgba(255, 255, 255, 0.55);
  --editor-tools-border: rgba(24, 39, 58, 0.06);
  --editor-hint: #768396;
  --editor-browse-bg: rgba(255, 255, 255, 0.72);
  --editor-browse-hover: #fff;
  --editor-browse-color: #334156;
  --placeholder: #8692a1;
  --file-name: #687588;
  --remove-color: #697487;
  --remove-hover-bg: rgba(0, 0, 0, 0.045);
  --btn-bg: rgba(255, 255, 255, 0.76);
  --btn-hover-bg: #fff;
  --btn-shadow: 0 0.125em 0.5em rgba(31, 52, 77, 0.05);
  --btn-hover-shadow: 0 0.4375em 1em rgba(31, 52, 77, 0.08);
  --fill-subtle: rgba(255, 255, 255, 0.34);
  --fill-muted: rgba(255, 255, 255, 0.28);
  --input-bg: rgba(255, 255, 255, 0.82);
  --input-hover-bg: #fff;
  --input-border: rgba(24, 39, 58, 0.10);
  --input-placeholder: #9aa5b5;
  --field-label: #6d7a8a;
  --row-k: #566273;
  --row-v: #263449;
  --mono-bg: rgba(255, 255, 255, 0.72);
  --mono-color: #324155;
  --status-ok-bg: linear-gradient(90deg, rgba(16, 124, 65, 0.065), rgba(255, 255, 255, 0.35));
  --status-bad-bg: linear-gradient(90deg, rgba(196, 43, 28, 0.06), rgba(255, 255, 255, 0.35));
  --advanced-bg: rgba(248, 251, 255, 0.55);
  --advanced-open-bg: rgba(248, 251, 255, 0.9);
  --advanced-info-bg: linear-gradient(180deg, rgba(15, 108, 189, 0.05), rgba(255, 255, 255, 0.42));
  --advanced-info-border: rgba(15, 108, 189, 0.10);
  --advanced-info-color: #506178;
  --advanced-info-strong: #324158;
  --advanced-summary: #5d6a7b;
  --site-note-bg: rgba(248, 251, 255, 0.8);
  --site-note-color: #5f6d7e;
  --diagram-label: #8a95a3;
  --diagram-node-bg: rgba(255, 255, 255, 0.5);
  --diagram-node-border: rgba(24, 39, 58, 0.08);
  --diagram-node-accent-bg: rgba(15, 108, 189, 0.045);
  --diagram-icon-bg: rgba(255, 255, 255, 0.72);
  --diagram-icon-color: #42617e;
  --diagram-small: #7b8797;
  --diagram-line: #8491a2;
  --empty-muted: #8a95a3;
  --footer: #6e7988;
  --skip-bg: #fff;
  --skip-shadow: 0 0.5em 1.25em rgba(31, 52, 77, 0.12);
  --toast-bg: #243246;
}

html {
  font-size: 100%;
  color-scheme: light;
  scroll-behavior: smooth;
  background: var(--html-bg);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --surface: rgba(38, 44, 56, 0.62);
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.12);
    --text: #f0f4fa;
    --muted: #9aa6b6;
    --blue: #60cdff;
    --blue-2: #82d8ff;
    --blue-soft: rgba(96, 205, 255, 0.14);
    --green: #6ccb5f;
    --green-soft: rgba(108, 203, 95, 0.14);
    --red: #ff99a4;
    --red-soft: rgba(255, 153, 164, 0.14);
    --warn: #e8c547;
    --shadow: 0 1.125em 3.25em rgba(0, 0, 0, 0.42);
    --page-grad: linear-gradient(155deg, #10141c 0%, #171d2a 46%, #121720 100%);
    --page-glow: radial-gradient(circle at 76% 3%, rgba(96, 205, 255, 0.11), transparent 34%);
    --html-bg: linear-gradient(155deg, #0e1218 0%, #151b28 48%, #10141c 100%);

    --card-border: rgba(255, 255, 255, 0.10);
    --card-outline: rgba(255, 255, 255, 0.06);
    --sidebar-bg: linear-gradient(180deg, rgba(34, 40, 52, 0.88), rgba(24, 30, 42, 0.72));
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --nav-color: #c5ceda;
    --nav-hover-bg: rgba(255, 255, 255, 0.06);
    --nav-active-bg: rgba(96, 205, 255, 0.12);
    --nav-active-outline: rgba(96, 205, 255, 0.22);
    --nav-active-shadow: 0 0.5em 1.25em rgba(0, 0, 0, 0.22);
    --side-card-bg: rgba(255, 255, 255, 0.05);
    --side-card-border: rgba(255, 255, 255, 0.08);
    --side-card-outline: rgba(255, 255, 255, 0.04);
    --side-card-shadow: 0 0.5em 1.25em rgba(0, 0, 0, 0.18);
    --utility-bg: rgba(255, 255, 255, 0.06);
    --utility-hover-bg: rgba(255, 255, 255, 0.10);
    --utility-color: #c5ceda;
    --utility-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.16);
    --utility-hover-shadow: 0 0.375em 0.875em rgba(0, 0, 0, 0.22);
    --subtle: #8f9bab;
    --editor-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    --editor-hover-bg: rgba(255, 255, 255, 0.08);
    --editor-focus-bg: rgba(255, 255, 255, 0.07);
    --editor-drag-bg: rgba(255, 255, 255, 0.09);
    --editor-border: rgba(255, 255, 255, 0.10);
    --editor-tools-bg: rgba(0, 0, 0, 0.18);
    --editor-tools-border: rgba(255, 255, 255, 0.06);
    --editor-hint: #8f9bab;
    --editor-browse-bg: rgba(255, 255, 255, 0.08);
    --editor-browse-hover: rgba(255, 255, 255, 0.12);
    --editor-browse-color: #dce4ef;
    --placeholder: #6f7d90;
    --file-name: #8f9bab;
    --remove-color: #8f9bab;
    --remove-hover-bg: rgba(255, 255, 255, 0.06);
    --btn-bg: rgba(255, 255, 255, 0.07);
    --btn-hover-bg: rgba(255, 255, 255, 0.11);
    --btn-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.18);
    --btn-hover-shadow: 0 0.4375em 1em rgba(0, 0, 0, 0.24);
    --fill-subtle: rgba(255, 255, 255, 0.04);
    --fill-muted: rgba(255, 255, 255, 0.03);
    --input-bg: rgba(255, 255, 255, 0.06);
    --input-hover-bg: rgba(255, 255, 255, 0.08);
    --input-border: rgba(255, 255, 255, 0.10);
    --input-placeholder: #6f7d90;
    --field-label: #9aa6b6;
    --row-k: #9aa6b6;
    --row-v: #e2e8f0;
    --mono-bg: rgba(0, 0, 0, 0.22);
    --mono-color: #c8d2de;
    --status-ok-bg: linear-gradient(90deg, rgba(108, 203, 95, 0.12), rgba(255, 255, 255, 0.03));
    --status-bad-bg: linear-gradient(90deg, rgba(255, 153, 164, 0.12), rgba(255, 255, 255, 0.03));
    --advanced-bg: rgba(255, 255, 255, 0.03);
    --advanced-open-bg: rgba(255, 255, 255, 0.05);
    --advanced-info-bg: linear-gradient(180deg, rgba(96, 205, 255, 0.08), rgba(255, 255, 255, 0.03));
    --advanced-info-border: rgba(96, 205, 255, 0.16);
    --advanced-info-color: #a8b4c4;
    --advanced-info-strong: #dce4ef;
    --advanced-summary: #9aa6b6;
    --site-note-bg: rgba(255, 255, 255, 0.04);
    --site-note-color: #9aa6b6;
    --diagram-label: #8f9bab;
    --diagram-node-bg: rgba(255, 255, 255, 0.04);
    --diagram-node-border: rgba(255, 255, 255, 0.08);
    --diagram-node-accent-bg: rgba(96, 205, 255, 0.08);
    --diagram-icon-bg: rgba(255, 255, 255, 0.06);
    --diagram-icon-color: #b8c4d4;
    --diagram-small: #8f9bab;
    --diagram-line: #7a8798;
    --empty-muted: #8f9bab;
    --footer: #7a8798;
    --skip-bg: #252c3a;
    --skip-shadow: 0 0.5em 1.25em rgba(0, 0, 0, 0.32);
    --toast-bg: #2a3342;
  }
}

html[data-theme="dark"] {
  --surface: rgba(38, 44, 56, 0.62);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.12);
  --text: #f0f4fa;
  --muted: #9aa6b6;
  --blue: #60cdff;
  --blue-2: #82d8ff;
  --blue-soft: rgba(96, 205, 255, 0.14);
  --green: #6ccb5f;
  --green-soft: rgba(108, 203, 95, 0.14);
  --red: #ff99a4;
  --red-soft: rgba(255, 153, 164, 0.14);
  --warn: #e8c547;
  --shadow: 0 1.125em 3.25em rgba(0, 0, 0, 0.42);
  --page-grad: linear-gradient(155deg, #10141c 0%, #171d2a 46%, #121720 100%);
  --page-glow: radial-gradient(circle at 76% 3%, rgba(96, 205, 255, 0.11), transparent 34%);
  --html-bg: linear-gradient(155deg, #0e1218 0%, #151b28 48%, #10141c 100%);

  --card-border: rgba(255, 255, 255, 0.10);
  --card-outline: rgba(255, 255, 255, 0.06);
  --sidebar-bg: linear-gradient(180deg, rgba(34, 40, 52, 0.88), rgba(24, 30, 42, 0.72));
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --nav-color: #c5ceda;
  --nav-hover-bg: rgba(255, 255, 255, 0.06);
  --nav-active-bg: rgba(96, 205, 255, 0.12);
  --nav-active-outline: rgba(96, 205, 255, 0.22);
  --nav-active-shadow: 0 0.5em 1.25em rgba(0, 0, 0, 0.22);
  --side-card-bg: rgba(255, 255, 255, 0.05);
  --side-card-border: rgba(255, 255, 255, 0.08);
  --side-card-outline: rgba(255, 255, 255, 0.04);
  --side-card-shadow: 0 0.5em 1.25em rgba(0, 0, 0, 0.18);
  --utility-bg: rgba(255, 255, 255, 0.06);
  --utility-hover-bg: rgba(255, 255, 255, 0.10);
  --utility-color: #c5ceda;
  --utility-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.16);
  --utility-hover-shadow: 0 0.375em 0.875em rgba(0, 0, 0, 0.22);
  --subtle: #8f9bab;
  --editor-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  --editor-hover-bg: rgba(255, 255, 255, 0.08);
  --editor-focus-bg: rgba(255, 255, 255, 0.07);
  --editor-drag-bg: rgba(255, 255, 255, 0.09);
  --editor-border: rgba(255, 255, 255, 0.10);
  --editor-tools-bg: rgba(0, 0, 0, 0.18);
  --editor-tools-border: rgba(255, 255, 255, 0.06);
  --editor-hint: #8f9bab;
  --editor-browse-bg: rgba(255, 255, 255, 0.08);
  --editor-browse-hover: rgba(255, 255, 255, 0.12);
  --editor-browse-color: #dce4ef;
  --placeholder: #6f7d90;
  --file-name: #8f9bab;
  --remove-color: #8f9bab;
  --remove-hover-bg: rgba(255, 255, 255, 0.06);
  --btn-bg: rgba(255, 255, 255, 0.07);
  --btn-hover-bg: rgba(255, 255, 255, 0.11);
  --btn-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.18);
  --btn-hover-shadow: 0 0.4375em 1em rgba(0, 0, 0, 0.24);
  --fill-subtle: rgba(255, 255, 255, 0.04);
  --fill-muted: rgba(255, 255, 255, 0.03);
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-hover-bg: rgba(255, 255, 255, 0.08);
  --input-border: rgba(255, 255, 255, 0.10);
  --input-placeholder: #6f7d90;
  --field-label: #9aa6b6;
  --row-k: #9aa6b6;
  --row-v: #e2e8f0;
  --mono-bg: rgba(0, 0, 0, 0.22);
  --mono-color: #c8d2de;
  --status-ok-bg: linear-gradient(90deg, rgba(108, 203, 95, 0.12), rgba(255, 255, 255, 0.03));
  --status-bad-bg: linear-gradient(90deg, rgba(255, 153, 164, 0.12), rgba(255, 255, 255, 0.03));
  --advanced-bg: rgba(255, 255, 255, 0.03);
  --advanced-open-bg: rgba(255, 255, 255, 0.05);
  --advanced-info-bg: linear-gradient(180deg, rgba(96, 205, 255, 0.08), rgba(255, 255, 255, 0.03));
  --advanced-info-border: rgba(96, 205, 255, 0.16);
  --advanced-info-color: #a8b4c4;
  --advanced-info-strong: #dce4ef;
  --advanced-summary: #9aa6b6;
  --site-note-bg: rgba(255, 255, 255, 0.04);
  --site-note-color: #9aa6b6;
  --diagram-label: #8f9bab;
  --diagram-node-bg: rgba(255, 255, 255, 0.04);
  --diagram-node-border: rgba(255, 255, 255, 0.08);
  --diagram-node-accent-bg: rgba(96, 205, 255, 0.08);
  --diagram-icon-bg: rgba(255, 255, 255, 0.06);
  --diagram-icon-color: #b8c4d4;
  --diagram-small: #8f9bab;
  --diagram-line: #7a8798;
  --empty-muted: #8f9bab;
  --footer: #7a8798;
  --skip-bg: #252c3a;
  --skip-shadow: 0 0.5em 1.25em rgba(0, 0, 0, 0.32);
  --toast-bg: #2a3342;
  background: var(--html-bg);
}