@font-face {
  font-family: "EB Garamond";
  src: local("EB Garamond Variable"), local("EB Garamond"),
       url("./fonts/EBGaramond-Variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: local("EB Garamond Variable Italic"), local("EB Garamond Italic"), local("EB Garamond"),
       url("./fonts/EBGaramond-VariableItalic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: local("Source Sans 3 Variable"), local("Source Sans 3"),
       url("./fonts/SourceSans3-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: local("Source Sans 3 Variable Italic"), local("Source Sans 3 Italic"), local("Source Sans 3"),
       url("./fonts/SourceSans3-VariableItalic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-title: "EB Garamond", serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", "Consolas", monospace;
  --ui-font-sans: var(--font-ui);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-0: 0px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --row-sm: 28px;
  --row-md: 32px;
  --row-lg: 36px;
  --input-h-sm: 28px;
  --input-h-md: 32px;

  --ui-popover-min-width: 220px;
  --ui-popover-max-width: 260px;
  --ui-popover-max-height: min(520px, 85vh);
  --ui-popover-offset: var(--space-1);
  --ui-popover-offset-neg: calc(var(--ui-popover-offset) * -1);
  --ui-popover-body-offset: var(--row-md);
  --ui-popover-list-max-height: 320px;
  --ui-popover-padding-inline: var(--space-2);
  --ui-popover-padding-block: var(--space-2);
  --ui-popover-padding-right: var(--space-1);
  --motion-fast: 120ms;

  --ui-border-width: 1px;
  --ui-cursor-button: pointer;
  --ui-cursor-disabled: not-allowed;
  --ui-control-size-1: 28px;
  --ui-control-size-2: 36px;
  --ui-icon-size-1: 16px;
  --ui-icon-size-2: 20px;
  --ui-icon-glyph-size-1: var(--ui-icon-size-1);
  --ui-icon-glyph-size-2: var(--ui-icon-size-2);
  --ui-icon-glyph-weight: 600;
  --ui-icon-glyph-line-height: 1;
  --ui-icon-glyph-tracking: 0.5px;
  --ui-icon-stroke-width: 1.5;
  --ui-disabled-opacity: 0.45;
  --ui-launcher-background-video-opacity: 0.40;
  --ui-launcher-background-image-opacity: 0.46;
  --ui-launcher-background-overlay-opacity: 24%;
  --ui-launcher-background-loop-fade-duration: 420ms;
  --ui-focus-ring-width: 1px;
  --ui-focus-ring-shadow: inset 0 0 0 var(--ui-focus-ring-width) var(--ui-focus-ring);
  --ui-selection-gradient-angle: 90deg;
  --ui-selection-gradient-mid-stop: 34%;
  --ui-selection-gradient-alpha-start: 3%;
  --ui-selection-gradient-alpha-mid: 8%;
  --ui-selection-gradient-alpha-end: 22%;
  --ui-selection-border-alpha: 30%;
  --ui-selection-highlight-bg: linear-gradient(
    var(--ui-selection-gradient-angle),
    color-mix(in srgb, var(--ui-selected-outline) var(--ui-selection-gradient-alpha-start), transparent) 0%,
    color-mix(in srgb, var(--ui-selected-outline) var(--ui-selection-gradient-alpha-mid), transparent) var(--ui-selection-gradient-mid-stop),
    color-mix(in srgb, var(--ui-selected-outline) var(--ui-selection-gradient-alpha-end), transparent) 100%
  );
  --ui-selection-highlight-ring-color: color-mix(in srgb, var(--ui-selected-outline) var(--ui-selection-border-alpha), transparent);
  --ui-token-marker-border-width: 2px;
  --ui-token-ring-width: 6px;
  --ui-token-ring-width-primary: 6px;
  --ui-token-ring-offset: 2px;
  --ui-token-ring-width-hover: 6px;
  --ui-token-ring-offset-hover: 1px;
  --ui-token-ring-width-dragging: 4px;
  --ui-token-ring-color: var(--ui-accent);
  --ui-token-ring-color-primary: var(--ui-token-ring-color);
  --ui-token-ring-color-hover: var(--ui-token-ring-color);
  --ui-token-ring-color-dragging: color-mix(in srgb, var(--ui-token-ring-color) 40%, transparent);
  --ui-token-type-pcs-ring: var(--ui-accent);
  --ui-token-type-pcs-badge-border: var(--ui-accent);
  --ui-token-type-pcs-badge-bg: color-mix(in srgb, var(--ui-accent-soft) 68%, transparent);
  --ui-token-type-pcs-badge-fg: var(--ui-text-primary);
  --ui-token-type-pcs-pulse-bg: color-mix(in srgb, var(--ui-accent-soft) 68%, transparent);

  --ui-token-type-enemies-ring: color-mix(in srgb, #b02020 70%, var(--ui-border));
  --ui-token-type-enemies-badge-border: color-mix(in srgb, #b02020 70%, var(--ui-border));
  --ui-token-type-enemies-badge-bg: color-mix(in srgb, #6b1010 52%, var(--ui-bg-inset));
  --ui-token-type-enemies-badge-fg: #ffd8d8;
  --ui-token-type-enemies-pulse-bg: color-mix(in srgb, #6b1010 52%, var(--ui-bg-inset));

  --ui-token-type-npcs-ring: color-mix(in srgb, #3f6ca8 68%, var(--ui-border));
  --ui-token-type-npcs-badge-border: color-mix(in srgb, #3f6ca8 68%, var(--ui-border));
  --ui-token-type-npcs-badge-bg: color-mix(in srgb, #1f3858 50%, var(--ui-bg-inset));
  --ui-token-type-npcs-badge-fg: #d6e8ff;
  --ui-token-type-npcs-pulse-bg: color-mix(in srgb, #1f3858 50%, var(--ui-bg-inset));

  --ui-token-type-objects-ring: color-mix(in srgb, #8b6f2f 70%, var(--ui-border));
  --ui-token-type-objects-badge-border: color-mix(in srgb, #8b6f2f 70%, var(--ui-border));
  --ui-token-type-objects-badge-bg: color-mix(in srgb, #4c3f22 52%, var(--ui-bg-inset));
  --ui-token-type-objects-badge-fg: #ffefc6;
  --ui-token-type-objects-pulse-bg: color-mix(in srgb, #4c3f22 52%, var(--ui-bg-inset));

  --ui-token-type-terrain-ring: color-mix(in srgb, #2a7c52 70%, var(--ui-border));
  --ui-token-type-terrain-badge-border: color-mix(in srgb, #2a7c52 70%, var(--ui-border));
  --ui-token-type-terrain-badge-bg: color-mix(in srgb, #1a4f36 52%, var(--ui-bg-inset));
  --ui-token-type-terrain-badge-fg: #d3ffe8;
  --ui-token-type-terrain-pulse-bg: color-mix(in srgb, #1a4f36 52%, var(--ui-bg-inset));

  --ui-token-type-generic-ring: color-mix(in srgb, #6a5aa8 70%, var(--ui-border));
  --ui-token-type-generic-badge-border: color-mix(in srgb, #6a5aa8 70%, var(--ui-border));
  --ui-token-type-generic-badge-bg: color-mix(in srgb, #352d58 52%, var(--ui-bg-inset));
  --ui-token-type-generic-badge-fg: #e3dbff;
  --ui-token-type-generic-pulse-bg: color-mix(in srgb, #352d58 52%, var(--ui-bg-inset));
  --ui-token-hp-bar-bg: rgba(20, 26, 34, 0.55);
  --ui-token-hp-bar-fill: #34cc74;
  --ui-token-hp-bar-temp-fill: #2f79d9;
  --ui-combat-temp-link: #4ea1ff;
  --ui-combat-hp-mode-dmg-border: color-mix(in srgb, #b02020 70%, var(--ui-border));
  --ui-combat-hp-mode-dmg-bg: color-mix(in srgb, #6b1010 58%, var(--ui-control-bg));
  --ui-combat-hp-mode-dmg-fg: #ffd8d8;
  --ui-combat-hp-mode-dmg-hover-border: #d33a3a;
  --ui-combat-hp-mode-dmg-hover-bg: color-mix(in srgb, #7f1616 66%, var(--ui-control-bg-hover));
  --ui-combat-hp-mode-heal-border: color-mix(in srgb, #228a52 70%, var(--ui-border));
  --ui-combat-hp-mode-heal-bg: color-mix(in srgb, #145934 60%, var(--ui-control-bg));
  --ui-combat-hp-mode-heal-fg: #d8ffe8;
  --ui-combat-hp-mode-heal-hover-border: #31b46d;
  --ui-combat-hp-mode-heal-hover-bg: color-mix(in srgb, #1a6e40 68%, var(--ui-control-bg-hover));
  --ui-rail-tab-width: 28px;
  --ui-rail-tab-height: 56px;
  --ui-rail-tab-radius: var(--ui-radius-3);

  --ui-pad-0: 0px;
  --ui-pad-1: 4px;
  --ui-pad-2: 6px;
  --ui-pad-3: 8px;
  --ui-pad-4: 10px;
  --ui-pad-5: 12px;
  --ui-pad-6: 16px;
  --ui-pad-7: 20px;
  --ui-pad-8: 24px;
  --ui-pad-9: 32px;

  --ui-gap-1: 4px;
  --ui-gap-2: 6px;
  --ui-gap-3: 8px;
  --ui-gap-4: 10px;
  --ui-gap-5: 12px;
  --ui-gap-6: 16px;
  --ui-gap-7: 20px;
  --ui-gap-8: 24px;
  --ui-toolbar-pad-x: var(--space-2);
  --ui-toolbar-pad-y: var(--space-2);
  --ui-toolbar-radius: 0px;
  --ui-toolbar-wash-strength: 0%;
  --ui-toolbar-wash-color: var(--ui-accent);
  --ui-toolbar-wash-split: 50%;
  --ui-toolbar-wash-alpha-top: 0%;
  --ui-toolbar-wash-alpha-bottom: 25%;
  --ui-toolbar-wash-top: color-mix(in srgb, var(--ui-toolbar-wash-color) var(--ui-toolbar-wash-alpha-top), transparent);
  --ui-toolbar-wash-bottom: color-mix(in srgb, var(--ui-toolbar-wash-color) var(--ui-toolbar-wash-alpha-bottom), transparent);
  --ui-pane-header-pad-y: var(--space-2);
  --ui-pane-header-pad-x: var(--space-3);
  --ui-pane-header-border: var(--ui-border);
  --ui-pane-header-bg: var(--ui-popover-bg);
  --ui-pane-header-font-size: var(--fs-14);
  --ui-pane-header-font-weight: var(--fw-title);

  --ui-radius-1: 6px;
  --ui-radius-2: 8px;
  --ui-radius-3: 10px;
  --ui-radius-4: 12px;
  --ui-radius-5: 16px;
  --ui-radius-pill: 999px;

  --ui-shadow-1: 0 8px 20px rgba(0, 0, 0, 0.35);
  --ui-shadow-2: 0 14px 30px rgba(0, 0, 0, 0.45);
  --ui-tooltip-offset: var(--ui-gap-2);
  --ui-z-pane: 4201;
  --ui-z-floating-toolbar-panel-base: 4800;
  --ui-z-floating-toolbar-panel-max: 5198;
  --ui-z-modal: 6000;
  --ui-z-toast: 6200;

  --ui-options-menu-min-width: calc(var(--row-lg) * 7);
  --ui-options-menu-max-width: min(calc(var(--row-lg) * 20), calc(100vw - (var(--space-4) * 2)));
  --ui-options-menu-wide-max-width: min(calc(var(--row-lg) * 24), calc(100vw - (var(--space-4) * 2)));
  --ui-options-menu-max-height: min(calc(var(--row-lg) * 18), calc(100vh - (var(--space-4) * 2)));
  --ui-options-menu-switch-width: calc(var(--row-lg) + var(--space-2));
  --ui-options-menu-switch-height: calc(var(--row-sm) - var(--space-2));
  --ui-options-menu-switch-thumb-size: calc(var(--row-sm) - var(--space-3));
  --ui-options-menu-switch-thumb-travel: calc(var(--row-md) - var(--space-3));

  --shadow-none: none;
  --shadow-float: 0 10px 10px rgba(0,0,0,0.50);
  --shadow-overlay: 0 18px 30px rgba(0,0,0,0.60);

  --fs-9: 9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-32: 32px;
  --fs-44: 44px;

  --tracking-none: 0;
  --tracking-micro: 0.01em;
  --tracking-tight: 0.02em;
  --tracking-compact: 0.03em;
  --tracking-display: 0.04em;
  --tracking-label: 0.06em;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.16em;
  --tracking-px-tight: 0.2px;
  --tracking-px-compact: 0.3px;
  --tracking-px-wide: 0.4px;
  --tracking-px-label: 0.35px;

  --lh-display: 1.1;
  --lh-dense: 1.35;
  --lh-copy: 1.45;
  --lh-tight: 1.2;
  --lh-normal: 1.5;

  --fw-regular: 400;
  --fw-title: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
}

.theme-dark,
.theme-light {
  --font-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-title: "EB Garamond", serif;
  --ui-font-sans: var(--font-ui);
  --fw-title: 400;
  --ui-pin-badge-size: 40px;
  --ui-pin-badge-offset-x: 0px;
  --ui-pin-badge-offset-y: -1px;
}

.theme-dark {
  --ui-bg-0: #1E1E1E;
  --ui-bg-1: #252525;
  --ui-bg-2: #2E2E2E;
  --ui-bg-inset: #1A1A1A;
  --ui-panel-bg: var(--ui-bg-1);
  --ui-popover-bg: var(--ui-bg-2);

  --ui-text-primary: #F2F2F2;
  --ui-text-secondary: #C9C9C9;
  --ui-text-muted: #9A9A9A;
  --ui-text-disabled: #6F6F6F;
  --ui-text: #F2F2F2;

  --ui-border: rgba(255,255,255,0.12);
  --ui-border-soft: rgba(255,255,255,0.06);
  --ui-divider-shadow: 0 10px 16px -16px rgba(0,0,0,0.72);
  --ui-library-card-bg: #141414;

  --ui-accent: #f1ba2e;
  --ui-accent-secondary-text: #86A3C0;
  --ui-gradient-underline-text-selector: linear-gradient(
    90deg,
    var(--ui-accent-secondary-text) 0%,
    color-mix(in srgb, var(--ui-accent-secondary-text) 55%, transparent) 45%,
    transparent 100%
  );
  --ui-gradient-divider-accent: linear-gradient(
    90deg,
    var(--ui-accent-secondary-text) 0%,
    color-mix(in srgb, var(--ui-accent-secondary-text) 58%, transparent) 42%,
    transparent 100%
  );
  --ui-gradient-divider-accent-shadow: 0 10px 18px -8px color-mix(in srgb, var(--ui-accent-secondary-text) 76%, transparent);
  --ui-accent-soft: rgba(241,186,46,0.16);
  --ui-accent-contrast: #1A1A1A;
  --ui-accent-dm: var(--ui-accent);
  --ui-pin-shell-revealed: #d88a2d;
  --ui-pin-shell-hidden: #54657a;
  --ui-ok: #34c67a;
  --ui-danger: #d64b4b;
  --ui-warning: #d9a441;
  --ui-focus-ring: rgba(241,186,46,0.55);
  --ui-selected-outline: #f1ba2e;
  --ui-scrim: rgba(0,0,0,0.85);

  --ui-control-bg: var(--ui-bg-1);
  --ui-control-bg-hover: var(--ui-hover-bg);
  --ui-control-bg-active: var(--ui-active-bg);
  --ui-control-bg-selected: var(--ui-selected-bg);
  --ui-control-bg-disabled: var(--ui-bg-inset);
  --ui-iconbtn-bg: var(--ui-control-bg);
  --ui-iconbtn-border: var(--ui-border);
  --ui-iconbtn-color: var(--ui-text-secondary);
  --ui-iconbtn-hover-overlay: var(--ui-hover-bg);
  --ui-iconbtn-active-overlay: var(--ui-active-bg);
  --ui-iconbtn-selected-overlay: var(--ui-selected-bg);
  --ui-iconbtn-selected-border: var(--ui-selected-outline);
  --ui-iconbtn-disabled-bg: var(--ui-control-bg-disabled);
  --ui-hover-bg: rgba(255,255,255,0.06);
  --ui-active-bg: rgba(255,255,255,0.10);
  --ui-selected-bg: rgba(255,255,255,0.04);
  --ui-selection-gradient-alpha-start: 3%;
  --ui-selection-gradient-alpha-mid: 8%;
  --ui-selection-gradient-alpha-end: 22%;
  --ui-selection-border-alpha: 30%;
}

.theme-light {
  --ui-bg-0: #ECECEC;
  --ui-bg-1: #FFFFFF;
  --ui-bg-2: #F2F2F2;
  --ui-bg-inset: #E7E7E7;
  --ui-panel-bg: var(--ui-bg-1);
  --ui-popover-bg: var(--ui-bg-2);

  --ui-text-primary: #141414;
  --ui-text-secondary: #2F2F2F;
  --ui-text-muted: #5E5E5E;
  --ui-text-disabled: #9A9A9A;
  --ui-text: #141414;

  --ui-border: rgba(0,0,0,0.16);
  --ui-border-soft: rgba(0,0,0,0.09);
  --ui-divider-shadow: 0 12px 18px -16px rgba(0,0,0,0.32);
  --ui-library-card-bg: #e5e5e5;

  --ui-accent: #f1ba2e;
  --ui-accent-secondary-text: #567391;
  --ui-gradient-underline-text-selector: linear-gradient(
    90deg,
    var(--ui-accent-secondary-text) 0%,
    color-mix(in srgb, var(--ui-accent-secondary-text) 55%, transparent) 45%,
    transparent 100%
  );
  --ui-gradient-divider-accent: linear-gradient(
    90deg,
    var(--ui-accent-secondary-text) 0%,
    color-mix(in srgb, var(--ui-accent-secondary-text) 58%, transparent) 42%,
    transparent 100%
  );
  --ui-gradient-divider-accent-shadow: 0 9px 16px -8px color-mix(in srgb, var(--ui-accent-secondary-text) 70%, transparent);
  --ui-accent-soft: rgba(241,186,46,0.10);
  --ui-accent-contrast: #1A1A1A;
  --ui-accent-dm: var(--ui-accent);
  --ui-pin-shell-revealed: #d88a2d;
  --ui-pin-shell-hidden: #54657a;
  --ui-ok: #1f8f4d;
  --ui-danger: #b63d3d;
  --ui-warning: #8f6a17;
  --ui-focus-ring: rgba(24, 58, 138, 0.42);
  --ui-selected-outline: #183a8a;
  --ui-scrim: rgba(0,0,0,0.35);

  --ui-control-bg: var(--ui-bg-1);
  --ui-control-bg-hover: var(--ui-hover-bg);
  --ui-control-bg-active: var(--ui-active-bg);
  --ui-control-bg-selected: var(--ui-selected-bg);
  --ui-control-bg-disabled: var(--ui-bg-inset);
  --ui-hover-bg: rgba(0,0,0,0.07);
  --ui-active-bg: rgba(0,0,0,0.12);
  --ui-selected-bg: rgba(24, 58, 138, 0.12);
  --ui-selection-gradient-alpha-start: 3%;
  --ui-selection-gradient-alpha-mid: 8%;
  --ui-selection-gradient-alpha-end: 22%;
  --ui-selection-border-alpha: 30%;
}