/* lib/common.css — Shared base styles used across pages and component chrome
   Place general resets and small layout helpers here so multiple pages
   can include a single common stylesheet instead of repeating inline CSS. */

/* Restore the browser default root font-size so component rem sizing is consistent
   on pages that also include component styles. */
html {
  font-size: 100%;
}

/* Keep shared pages hidden until the bootstrap scripts finish applying
   branding, theme, and custom-element chrome. This prevents a flash of raw
   HTML before the styled shell is ready. */
html:not([data-app-ready="true"]) body {
  visibility: hidden;
}

/* Site-wide body base reset */
body {
  margin: 0;
}

/* Ensure pages using the header/footer chrome have an article wrapper
   that grows to fill the viewport like other pages. */
body>article {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* Lightweight reusable content container used by many pages */
.main-content {
  padding: 2rem;
  max-width: 90rem;
  margin: 0 auto;
}

/* Enforce the site content width for pages that include the header/footer chrome
   (these pages wrap their content in `body > article`); this ensures any page
   that doesn't explicitly use `.main-content` still gets the same max-width as
   profile pages. The index page intentionally isn't wrapped in `article` and
   will not be affected. */
body>article>main,
body>article [role="main"],
body>article .main-content,
body>article .people-page__content,
body>article .people-page__inner {
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

.card,
.settings-page__card,
.settings-page__hero {
  background: var(--background-color-base);
  border: 1px solid var(--border-color-subtle);
  border-radius: 1rem;
  box-shadow: var(--box-shadow-small);
  box-sizing: border-box;
}

.settings-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.settings-page__hero {
  padding: 1.75rem 1.75rem 1.5rem;
}

.settings-page__hero-title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
}

.settings-page__hero-description {
  margin: 0.85rem 0 0;
  max-width: 55rem;
  color: var(--color-subtle);
}

.settings-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
}

.settings-page__card {
  padding: 1.75rem;
}

.settings-page__section {
  display: grid;
  gap: 1rem;
}

.settings-page__section-heading {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.form-group {
  display: grid;
  gap: 0.65rem;
}

.form-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-base);
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="search"],
.form-group textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-color-subtle);
  border-radius: 0.75rem;
  background: var(--background-color-neutral-subtle);
  padding: 0.95rem 1rem;
  color: var(--color-base);
  font: inherit;
}

.form-group input[type="checkbox"] {
  accent-color: var(--color-progressive);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.settings-page__summary {
  display: grid;
  gap: 1rem;
  padding: 1.75rem;
  background: var(--background-color-neutral-subtle);
  border: 1px solid var(--border-color-subtle);
  border-radius: 1rem;
  box-shadow: var(--box-shadow-small);
}

.settings-page__summary-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.settings-page__summary-note {
  margin: 0;
  color: var(--color-subtle);
  line-height: 1.6;
}

.settings-page__summary ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-base);
}

.settings-page__summary li {
  margin-bottom: 0.85rem;
  line-height: 1.75;
}

@media (max-width: 900px) {
  .settings-page__grid {
    grid-template-columns: 1fr;
  }
}

/* Moved common variables and base rules from index.css so other pages
   can include only this shared file instead of the full index stylesheet. */
:root {
  --color-base: #202122;
  --color-base-fixed: #202122;
  --color-base--hover: #404244;
  --color-emphasized: #101418;
  --color-neutral: #404244;
  --color-subtle: #54595d;
  --color-placeholder: #72777d;
  --color-disabled: #a2a9b1;
  --color-disabled-emphasized: #a2a9b1;
  --color-inverted: #fff;
  --color-inverted-fixed: #fff;
  --color-progressive: #36c;
  --color-progressive--hover: #3056a9;
  --color-progressive--active: #233566;
  --color-progressive--focus: #36c;
  --color-destructive: #bf3c2c;
  --color-destructive--hover: #9f3526;
  --color-destructive--active: #612419;
  --color-destructive--focus: #36c;
  --color-visited: #6a60b0;
  --color-visited--hover: #534fa3;
  --color-visited--active: #353262;
  --color-destructive--visited: #9f5555;
  --color-destructive--visited--hover: #854848;
  --color-destructive--visited--active: #512e2e;
  --color-error: #bf3c2c;
  --color-error--hover: #9f3526;
  --color-error--active: #612419;
  --color-warning: #886425;
  --color-success: #177860;
  --color-notice: #404244;
  --color-icon-error: #f54739;
  --color-icon-warning: #ab7f2a;
  --color-icon-success: #099979;
  --color-icon-notice: #72777d;
  --color-content-added: #006400;
  --color-content-removed: #8b0000;
  --opacity-base: 1;
  --opacity-medium: 0.65;
  --opacity-low: 0.3;
  --opacity-transparent: 0;
  --filter-invert-icon: 0;
  --filter-invert-primary-button-icon: 1;
  --background-position-base: center;
  --background-size-search-figure: cover;
  --z-index-bottom: -100;
  --z-index-base: 0;
  --z-index-above-content: 1;
  --z-index-toolbar: 2;
  --z-index-dropdown: 50;
  --z-index-sticky: 100;
  --z-index-fixed: 200;
  --z-index-off-canvas-backdrop: 300;
  --z-index-off-canvas: 350;
  --z-index-overlay-backdrop: 400;
  --z-index-overlay: 450;
  --z-index-popover: 700;
  --z-index-tooltip: 800;
  --z-index-toast-notification: 900;
  --z-index-top: 9999;
  --z-index-stacking-0: 0;
  --z-index-stacking-1: 1;
  --z-index-stacking-2: 2;
  --z-index-stacking-3: 3;
  --box-sizing-base: border-box;
  --size-0: 0;
  --size-6: 0.0625rem;
  --size-12: 0.125rem;
  --size-25: 0.25rem;
  --size-50: 0.5rem;
  --size-75: 0.75rem;
  --size-100: 1rem;
  --size-125: 1.25rem;
  --size-150: 1.5rem;
  --size-200: 2rem;
  --size-250: 2.5rem;
  --size-275: 2.75rem;
  --size-300: 3rem;
  --size-400: 4rem;
  --size-800: 8rem;
  --size-1200: 12rem;
  --size-1600: 16rem;
  --size-2400: 24rem;
  --size-2800: 28rem;
  --size-3200: 32rem;
  --size-4000: 40rem;
  --size-5600: 56rem;
  --size-viewport-width-full: 100vw;
  --size-viewport-height-full: 100vh;
  --size-absolute-1: 1px;
  --size-absolute-9999: 9999px;
  --size-content-min: min-content;
  --size-content-fit: fit-content;
  --size-content-max: max-content;
  --size-third: 33.33%;
  --size-half: 50%;
  --size-full: 100%;
  --size-double: 200%;
  --size-search-figure: 2.5rem;
  --max-width-base: none;
  --max-width-breakpoint-mobile: calc(640px - var(--size-absolute-1));
  --max-width-breakpoint-tablet: calc(1120px - var(--size-absolute-1));
  --max-width-breakpoint-desktop: calc(1680px - var(--size-absolute-1));
  --max-width-button: 28rem;
  --border-style-base: solid;
  --border-style-dashed: dashed;
  --box-shadow-inset-small: inset 0 0 0 1px;
  --box-shadow-inset-medium: inset 0 0 0 2px;
  --box-shadow-inset-medium-vertical: inset 0 -2px 0 0;
  --box-shadow-outset-small: 0 0 0 1px;
  --box-shadow-outset-small-top: 0 -1px 0 0;
  --box-shadow-outset-small-bottom: 0 1px 0 0;
  --box-shadow-outset-small-start: -1px 0 0 0;
  --box-shadow-outset-medium-below: 0 4px 4px 0;
  --box-shadow-outset-medium-around: 0 0 8px 0;
  --box-shadow-outset-large-below: 0 4px 8px 0;
  --box-shadow-outset-large-around: 0 0 16px 0;
  --box-shadow-color-base: #a2a9b1;
  --box-shadow-color-progressive--active: #233566;
  --box-shadow-color-progressive--focus: #36c;
  --box-shadow-color-progressive-selected: #36c;
  --box-shadow-color-progressive-selected--hover: #3056a9;
  --box-shadow-color-progressive-selected--active: #233566;
  --box-shadow-color-destructive--focus: #36c;
  --box-shadow-color-inverted: #fff;
  --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.06);
  --box-shadow-color-transparent: transparent;
  --font-family-base: sans-serif;
  --font-family-system-sans: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Inter", "Helvetica", "Arial", sans-serif;
  --font-family-sans--fallback: sans-serif;
  --font-family-serif: "Linux Libertine", "Georgia", "Times", "Source Serif 4", serif;
  --font-family-serif--fallback: serif;
  --font-family-monospace: "Menlo", "Consolas", "Liberation Mono", "Fira Code", "Courier New", monospace;
  --font-family-monospace--fallback: monospace, monospace;
  --font-family-heading-main: "Linux Libertine", "Georgia", "Times", "Source Serif 4", serif;
  --font-size-x-small: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  --font-size-x-large: 1.25rem;
  --font-size-xx-large: 1.5rem;
  --font-size-xxx-large: 1.75rem;
  --font-weight-hairline: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --line-height-x-small: 1.25rem;
  --line-height-small: 1.375rem;
  --line-height-medium: 1.625rem;
  --line-height-large: 1.75rem;
  --line-height-x-large: 1.875rem;
  --line-height-xx-large: 2.125rem;
  --line-height-xxx-large: 2.375rem;
  --line-height-content: 1.625;
  --text-decoration-none: none;
  --text-decoration-line-through: line-through;
  --text-decoration-underline: underline;
  --text-overflow-clip: clip;
  --text-overflow-ellipsis: ellipsis;
  --tab-size-base: 4;
  --transform-checkbox-tick--checked: rotate(45deg);
  --transform-progress-indicator-spinner-start: rotate(-45deg);
  --transform-progress-indicator-spinner-end: rotate(315deg);
  --transition-duration-base: 100ms;
  --transition-duration-medium: 250ms;
  --transition-property-base: background-color, color, border-color, box-shadow;
  --transition-property-fade: opacity;
  --transition-property-icon: color;
  --transition-property-icon-css-only: background-color;
  --transition-property-toast: opacity, transform;
  --transition-property-toggle-switch-grip: background-color, border-color, transform;
  --transition-timing-function-system: ease;
  --transition-timing-function-user: ease-out;
  --animation-delay-none: 0ms;
  --animation-delay-medium: -160ms;
  --animation-delay-slow: -320ms;
  --animation-duration-fast: 1000ms;
  --animation-duration-medium: 1600ms;
  --animation-duration-slow: 2000ms;
  --animation-timing-function-base: linear;
  --animation-timing-function-bouncing: ease-in-out;
  --animation-iteration-count-base: infinite;
  --cursor-base: default;
  --cursor-base--disabled: default;
  --cursor-base--hover: pointer;
  --cursor-grab: grab;
  --cursor-grabbing: grabbing;
  --cursor-help: help;
  --cursor-move: move;
  --cursor-not-allowed: not-allowed;
  --cursor-resize-nesw: nesw-resize;
  --cursor-resize-nwse: nwse-resize;
  --cursor-text: text;
  --cursor-zoom-in: zoom-in;
  --cursor-zoom-out: zoom-out;
  --mix-blend-mode-base: normal;
  --mix-blend-mode-blend: multiply;
  --background-color-base: #fff;
  --background-color-base-fixed: #fff;
  --background-color-neutral: #eaecf0;
  --background-color-neutral-subtle: #f8f9fa;
  --background-color-interactive: #eaecf0;
  --background-color-interactive--hover: #dadde3;
  --background-color-interactive--active: #c8ccd1;
  --background-color-interactive-subtle: #f8f9fa;
  --background-color-interactive-subtle--hover: #eaecf0;
  --background-color-interactive-subtle--active: #dadde3;
  --background-color-disabled: #dadde3;
  --background-color-disabled-subtle: #eaecf0;
  --background-color-inverted: #101418;
  --background-color-progressive: #36c;
  --background-color-progressive--hover: #3056a9;
  --background-color-progressive--active: #233566;
  --background-color-progressive--focus: #36c;
  --background-color-progressive-subtle: #e8eeff;
  --background-color-progressive-subtle--hover: #d9e2ff;
  --background-color-progressive-subtle--active: #b6d4fb;
  --background-color-destructive: #bf3c2c;
  --background-color-destructive--hover: #9f3526;
  --background-color-destructive--active: #612419;
  --background-color-destructive--focus: #36c;
  --background-color-destructive-subtle: #ffe9e5;
  --background-color-destructive-subtle--hover: #ffdad3;
  --background-color-destructive-subtle--active: #ffc8bd;
  --background-color-error: #f54739;
  --background-color-error--hover: #d74032;
  --background-color-error--active: #bf3c2c;
  --background-color-error-subtle: #ffe9e5;
  --background-color-error-subtle--hover: #ffdad3;
  --background-color-error-subtle--active: #ffc8bd;
  --background-color-warning-subtle: #fdf2d5;
  --background-color-success-subtle: #dff2eb;
  --background-color-notice-subtle: #eaecf0;
  --background-color-content-added: #a3d3ff;
  --background-color-content-removed: #ffe49c;
  --background-color-target-text: #ffead4;
  --background-color-transparent: transparent;
  --background-color-backdrop-light: hsla(0, 0%, 100%, 0.65);
  --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
  --background-color-button-quiet--hover: rgba(0, 24, 73, 0.027);
  --background-color-button-quiet--active: rgba(0, 24, 73, 0.082);
  --background-color-input-binary--checked: #36c;
  --background-color-tab-list-item-framed--hover: hsla(0, 0%, 100%, 0.3);
  --background-color-tab-list-item-framed--active: hsla(0, 0%, 100%, 0.65);
  --opacity-icon-base: 0.87;
  --opacity-icon-base--hover: 0.74;
  --opacity-icon-base--selected: 1;
  --opacity-icon-base--disabled: 0.51;
  --opacity-icon-placeholder: 0.51;
  --opacity-icon-subtle: 0.67;
  --min-size-interactive-pointer: 32px;
  --min-size-interactive-touch: 44px;
  --min-size-search-figure: 40px;
  --min-size-icon-x-small: 10px;
  --min-size-icon-small: 14px;
  --min-size-icon-medium: 18px;
  --min-size-input-binary: 20px;
  --min-size-input-chip-clear-button: 20px;
  --min-size-toggle-switch-grip: 18px;
  --min-width-medium: 256px;
  --min-width-breakpoint-mobile: 320px;
  --min-width-breakpoint-tablet: 640px;
  --min-width-breakpoint-desktop: 1120px;
  --min-width-breakpoint-desktop-wide: 1680px;
  --min-width-toggle-switch: 42px;
  --spacing-0: 0;
  --spacing-6: 1px;
  --spacing-12: 2px;
  --spacing-25: 4px;
  --spacing-30: 5px;
  --spacing-35: 6px;
  --spacing-50: 8px;
  --spacing-65: 10px;
  --spacing-75: 12px;
  --spacing-100: 16px;
  --spacing-125: 20px;
  --spacing-150: 24px;
  --spacing-200: 32px;
  --spacing-250: 40px;
  --spacing-300: 48px;
  --spacing-400: 64px;
  --spacing-half: 50%;
  --spacing-full: 100%;
  --border-width-base: 1px;
  --border-width-thick: 2px;
  --border-width-input-radio--checked: 6px;
  --border-color-base: #a2a9b1;
  --border-color-emphasized: #202122;
  --border-color-subtle: #c8ccd1;
  --border-color-muted: #dadde3;
  --border-color-interactive: #72777d;
  --border-color-interactive--hover: #27292d;
  --border-color-interactive--active: #202122;
  --border-color-disabled: #c8ccd1;
  --border-color-inverted: #fff;
  --border-color-inverted-fixed: #fff;
  --border-color-progressive: #6485d1;
  --border-color-progressive--hover: #3056a9;
  --border-color-progressive--active: #233566;
  --border-color-progressive--focus: #36c;
  --border-color-destructive: #f54739;
  --border-color-destructive--hover: #9f3526;
  --border-color-destructive--active: #612419;
  --border-color-destructive--focus: #36c;
  --border-color-error: #f54739;
  --border-color-error--hover: #9f3526;
  --border-color-error--active: #612419;
  --border-color-warning: #ab7f2a;
  --border-color-warning--hover: #735421;
  --border-color-warning--active: #453217;
  --border-color-success: #099979;
  --border-color-notice: #72777d;
  --border-color-content-added: #a3d3ff;
  --border-color-content-removed: #ffe49c;
  --border-color-transparent: transparent;
  --border-color-divider: #a2a9b1;
  --border-radius-base: 2px;
  --border-radius-sharp: 0;
  --border-radius-pill: 9999px;
  --border-radius-circle: 50%;
  --outline-color-progressive--focus: #36c;
  --min-height-text-area: 64px;
  --min-height-table-header: 40px;
  --min-height-table-footer: 40px;
  --min-height-toggle-switch: 28px;
  --max-height-chip: 1.375rem;
  --color-link: var(--color-progressive);
  --color-link--hover: var(--color-progressive--hover);
  --color-link--active: var(--color-progressive--active);
  --color-link--focus: var(--color-progressive--focus);
  --color-link--visited: var(--color-visited);
  --color-link--visited--hover: var(--color-visited--hover);
  --color-link--visited--active: var(--color-visited--active);
  --color-link-red: var(--color-destructive);
  --color-link-red--hover: var(--color-destructive--hover);
  --color-link-red--active: var(--color-destructive--active);
  --color-link-red--focus: var(--color-destructive--focus);
  --color-link-red--visited: var(--color-destructive--visited);
  --color-link-red--visited--hover: var(--color-destructive--visited--hover);
  --color-link-red--visited--active: var(--color-destructive--visited--active);
  --size-icon-x-small: calc(var(--font-size-medium) - 4px);
  --size-icon-small: var(--font-size-medium);
  --size-icon-medium: calc(var(--font-size-medium) + 4px);
  --size-toggle-switch-grip: calc(var(--font-size-medium)*1.25);
  --box-shadow-small: var(--box-shadow-outset-small) var(--box-shadow-color-base);
  --box-shadow-small-top: var(--box-shadow-outset-small-top) var(--box-shadow-color-base);
  --box-shadow-small-bottom: var(--box-shadow-outset-small-bottom) var(--box-shadow-color-base);
  --box-shadow-medium: var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base);
  --box-shadow-large: var(--box-shadow-outset-large-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-large-around) var(--box-shadow-color-alpha-base);
  --accent-color-base: #36c;
  --position-offset-border-width-base: -var(--border-width-base);
  --spacing-horizontal-button: var(--spacing-75) - var(--border-width-base);
  --spacing-horizontal-button-icon-only: var(--spacing-35) - var(--border-width-base);
  --spacing-horizontal-button-small-icon-only: var(--spacing-12) - var(--border-width-base);
  --spacing-horizontal-button-small: var(--spacing-35) - var(--border-width-base);
  --spacing-horizontal-button-large: var(--spacing-100) - var(--border-width-base);
  --spacing-horizontal-input-text-two-end-icons: calc(var(--spacing-50)*2 + var(--size-icon-small));
  --spacing-start-typeahead-search-figure: var(--spacing-75);
  --spacing-toggle-switch-grip-start: calc(var(--font-size-medium)*0.375);
  --spacing-toggle-switch-grip-end: calc(var(--font-size-medium)*1.25);
  --border-color-input--hover: var(--border-color-interactive);
  --border-color-input-binary: var(--border-color-interactive);
  --border-color-input-binary--hover: var(--border-color-progressive--hover);
  --border-color-input-binary--active: var(--border-color-progressive--active);
  --border-color-input-binary--focus: var(--border-color-progressive--focus);
  --border-color-input-binary--checked: var(--border-color-progressive);
  --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
  --border-subtle: var(--border-width-base) var(--border-style-base) var(--border-color-subtle);
  --border-progressive: var(--border-width-base) var(--border-style-base) var(--border-color-progressive);
  --border-destructive: var(--border-width-base) var(--border-style-base) var(--border-color-destructive);
  --border-transparent: var(--border-width-base) var(--border-style-base) var(--border-color-transparent);
  --outline-base--focus: var(--border-width-base) solid transparent;
  --width-toggle-switch: calc(var(--font-size-medium)*3);
  --height-toggle-switch: calc(var(--font-size-medium)*2);
  --spacing-start-typeahead-search-icon: calc(var(--spacing-start-typeahead-search-figure) + var(--min-size-search-figure)/2 - var(--min-size-icon-medium)/2);
  --spacing-typeahead-search-focus-addition: calc(var(--spacing-start-typeahead-search-figure) + var(--min-size-search-figure) - var(--min-size-icon-medium) - var(--spacing-50));
  --color-base--subtle: #54595d;
  --box-shadow-drop-xx-large: 0 20px 48px 0 rgba(0, 0, 0, 0.2);
  --font-family-sans: "Helvetica Neue", "Helvetica", "Liberation Sans", "Arial", sans-serif;
  --line-height-xxx-small: 1.4285714rem;
  --line-height-xx-small: 1.5714285rem;
  --box-shadow-drop-small: var(--box-shadow-outset-small) var(--box-shadow-color-base);
  --box-shadow-drop-medium: var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base)
}

@media only screen and (prefers-color-scheme:dark) {
  :root {
    --color-base: #eaecf0;
    --color-base--hover: #f8f9fa;
    --color-emphasized: #f8f9fa;
    --color-neutral: #c8ccd1;
    --color-subtle: #a2a9b1;
    --color-disabled: #54595d;
    --color-disabled-emphasized: #72777d;
    --color-inverted: #101418;
    --color-progressive: #88a3e8;
    --color-progressive--hover: #a6bbf5;
    --color-progressive--active: #b6d4fb;
    --color-destructive: #fd7865;
    --color-destructive--hover: #fea898;
    --color-destructive--active: #ffc8bd;
    --color-visited: #a799cd;
    --color-visited--hover: #c5b9dd;
    --color-visited--active: #d9d0e9;
    --color-destructive--visited: #c99391;
    --color-destructive--visited--hover: #dcb5b3;
    --color-destructive--visited--active: #e8cecd;
    --color-error: #fd7865;
    --color-error--hover: #fea898;
    --color-error--active: #ffc8bd;
    --color-warning: #ca982e;
    --color-success: #2cb491;
    --color-notice: #a2a9b1;
    --color-content-added: #80cdb3;
    --color-content-removed: #fd7865;
    --color-base--subtle: #a2a9b1;
    --box-shadow-color-base: #72777d;
    --box-shadow-color-progressive--focus: #6485d1;
    --box-shadow-color-progressive-selected: #88a3e8;
    --box-shadow-color-progressive-selected--hover: #a6bbf5;
    --box-shadow-color-progressive-selected--active: #b6d4fb;
    --box-shadow-color-destructive--focus: #6485d1;
    --box-shadow-color-inverted: #000;
    --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.87);
    --mix-blend-mode-blend: screen;
    --background-color-base: #101418;
    --background-color-neutral: #27292d;
    --background-color-neutral-subtle: #202122;
    --background-color-interactive: #27292d;
    --background-color-interactive--hover: #404244;
    --background-color-interactive--active: #54595d;
    --background-color-interactive-subtle: #202122;
    --background-color-interactive-subtle--hover: #27292d;
    --background-color-interactive-subtle--active: #404244;
    --background-color-disabled: #404244;
    --background-color-disabled-subtle: #27292d;
    --background-color-inverted: #f8f9fa;
    --background-color-progressive--focus: #6485d1;
    --background-color-progressive-subtle: #1b223d;
    --background-color-progressive-subtle--hover: #233566;
    --background-color-progressive-subtle--active: #3056a9;
    --background-color-destructive--focus: #6485d1;
    --background-color-destructive-subtle: #3c1a13;
    --background-color-destructive-subtle--hover: #612419;
    --background-color-destructive-subtle--active: #9f3526;
    --background-color-error-subtle: #3c1a13;
    --background-color-error-subtle--hover: #612419;
    --background-color-error-subtle--active: #9f3526;
    --background-color-warning-subtle: #2d2212;
    --background-color-success-subtle: #132821;
    --background-color-notice-subtle: #27292d;
    --background-color-content-added: #233566;
    --background-color-content-removed: #453217;
    --background-color-target-text: #572c19;
    --background-color-backdrop-light: rgba(0, 0, 0, 0.65);
    --background-color-backdrop-dark: hsla(0, 0%, 100%, 0.65);
    --border-color-base: #72777d;
    --border-color-emphasized: #eaecf0;
    --border-color-subtle: #54595d;
    --border-color-muted: #404244;
    --border-color-interactive--hover: #a2a9b1;
    --border-color-interactive--active: #c8ccd1;
    --border-color-disabled: #54595d;
    --border-color-inverted: #101418;
    --border-color-progressive--hover: #88a3e8;
    --border-color-progressive--active: #a6bbf5;
    --border-color-progressive--focus: #6485d1;
    --border-color-destructive--hover: #fd7865;
    --border-color-destructive--active: #fea898;
    --border-color-destructive--focus: #6485d1;
    --border-color-error--hover: #fd7865;
    --border-color-error--active: #fea898;
    --border-color-warning--hover: #ca982e;
    --border-color-warning--active: #edb537;
    --border-color-content-added: #233566;
    --border-color-content-removed: #987027
  }
}

/* Theme override
  The base palette supports `prefers-color-scheme`, but the site also allows an explicit
   user-selected theme via `body.theme-dark` (stored in localStorage).
   Re-apply the palette on `body` so the user's choice always wins over OS preference. */
body:not(.theme-dark) {
  color-scheme: light;

  /* Core palette variables (light) mirrored from the default `:root` values. */
  --color-base: #202122;
  --color-base--hover: #404244;
  --color-emphasized: #101418;
  --color-neutral: #404244;
  --color-subtle: #54595d;
  --color-disabled: #a2a9b1;
  --color-disabled-emphasized: #a2a9b1;
  --color-inverted: #fff;
  --color-progressive: #36c;
  --color-progressive--hover: #3056a9;
  --color-progressive--active: #233566;
  --color-progressive--focus: #36c;
  --color-destructive: #bf3c2c;
  --color-destructive--hover: #9f3526;
  --color-destructive--active: #612419;
  --color-destructive--focus: #36c;
  --color-visited: #6a60b0;
  --color-visited--hover: #534fa3;
  --color-visited--active: #353262;
  --color-destructive--visited: #9f5555;
  --color-destructive--visited--hover: #854848;
  --color-destructive--visited--active: #512e2e;
  --color-error: #bf3c2c;
  --color-error--hover: #9f3526;
  --color-error--active: #612419;
  --color-warning: #886425;
  --color-success: #177860;
  --color-notice: #404244;
  --color-content-added: #006400;
  --color-content-removed: #8b0000;
  --color-base--subtle: #54595d;

  --box-shadow-color-base: #a2a9b1;
  --box-shadow-color-progressive--focus: #36c;
  --box-shadow-color-progressive-selected: #36c;
  --box-shadow-color-progressive-selected--hover: #3056a9;
  --box-shadow-color-progressive-selected--active: #233566;
  --box-shadow-color-destructive--focus: #36c;
  --box-shadow-color-inverted: #fff;
  --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.06);
  --mix-blend-mode-blend: multiply;

  --background-color-base: #fff;
  --background-color-neutral: #eaecf0;
  --background-color-neutral-subtle: #f8f9fa;
  --background-color-interactive: #eaecf0;
  --background-color-interactive--hover: #dadde3;
  --background-color-interactive--active: #c8ccd1;
  --background-color-interactive-subtle: #f8f9fa;
  --background-color-interactive-subtle--hover: #eaecf0;
  --background-color-interactive-subtle--active: #dadde3;
  --background-color-disabled: #dadde3;
  --background-color-disabled-subtle: #eaecf0;
  --background-color-inverted: #101418;
  --background-color-progressive--focus: #36c;
  --background-color-progressive-subtle: #e8eeff;
  --background-color-progressive-subtle--hover: #d9e2ff;
  --background-color-progressive-subtle--active: #b6d4fb;
  --background-color-destructive--focus: #36c;
  --background-color-destructive-subtle: #ffe9e5;
  --background-color-destructive-subtle--hover: #ffdad3;
  --background-color-destructive-subtle--active: #ffc8bd;
  --background-color-error-subtle: #ffe9e5;
  --background-color-error-subtle--hover: #ffdad3;
  --background-color-error-subtle--active: #ffc8bd;
  --background-color-warning-subtle: #fdf2d5;
  --background-color-success-subtle: #dff2eb;
  --background-color-notice-subtle: #eaecf0;
  --background-color-content-added: #a3d3ff;
  --background-color-content-removed: #ffe49c;
  --background-color-target-text: #ffead4;
  --background-color-backdrop-light: hsla(0, 0%, 100%, 0.65);
  --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);

  --border-color-base: #a2a9b1;
  --border-color-emphasized: #202122;
  --border-color-subtle: #c8ccd1;
  --border-color-muted: #dadde3;
  --border-color-interactive: #72777d;
  --border-color-interactive--hover: #27292d;
  --border-color-interactive--active: #202122;
  --border-color-disabled: #c8ccd1;
  --border-color-inverted: #fff;
  --border-color-progressive--hover: #3056a9;
  --border-color-progressive--active: #233566;
  --border-color-progressive--focus: #36c;
  --border-color-destructive--hover: #9f3526;
  --border-color-destructive--active: #612419;
  --border-color-destructive--focus: #36c;
  --border-color-error--hover: #9f3526;
  --border-color-error--active: #612419;
  --border-color-warning--hover: #735421;
  --border-color-warning--active: #453217;
  --border-color-content-added: #a3d3ff;
  --border-color-content-removed: #ffe49c;
}

body.theme-dark {
  color-scheme: dark;

  /* Core palette variables (dark) mirrored from the `prefers-color-scheme: dark` values. */
  --color-base: #eaecf0;
  --color-base--hover: #f8f9fa;
  --color-emphasized: #f8f9fa;
  --color-neutral: #c8ccd1;
  --color-subtle: #a2a9b1;
  --color-disabled: #54595d;
  --color-disabled-emphasized: #72777d;
  --color-inverted: #101418;
  --color-progressive: #88a3e8;
  --color-progressive--hover: #a6bbf5;
  --color-progressive--active: #b6d4fb;
  --color-destructive: #fd7865;
  --color-destructive--hover: #fea898;
  --color-destructive--active: #ffc8bd;
  --color-visited: #a799cd;
  --color-visited--hover: #c5b9dd;
  --color-visited--active: #d9d0e9;
  --color-destructive--visited: #c99391;
  --color-destructive--visited--hover: #dcb5b3;
  --color-destructive--visited--active: #e8cecd;
  --color-error: #fd7865;
  --color-error--hover: #fea898;
  --color-error--active: #ffc8bd;
  --color-warning: #ca982e;
  --color-success: #2cb491;
  --color-notice: #a2a9b1;
  --color-content-added: #80cdb3;
  --color-content-removed: #fd7865;
  --color-base--subtle: #a2a9b1;

  --box-shadow-color-base: #72777d;
  --box-shadow-color-progressive--focus: #6485d1;
  --box-shadow-color-progressive-selected: #88a3e8;
  --box-shadow-color-progressive-selected--hover: #a6bbf5;
  --box-shadow-color-progressive-selected--active: #b6d4fb;
  --box-shadow-color-destructive--focus: #6485d1;
  --box-shadow-color-inverted: #000;
  --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.87);
  --mix-blend-mode-blend: screen;

  --background-color-base: #101418;
  --background-color-neutral: #27292d;
  --background-color-neutral-subtle: #202122;
  --background-color-interactive: #27292d;
  --background-color-interactive--hover: #404244;
  --background-color-interactive--active: #54595d;
  --background-color-interactive-subtle: #202122;
  --background-color-interactive-subtle--hover: #27292d;
  --background-color-interactive-subtle--active: #404244;
  --background-color-disabled: #404244;
  --background-color-disabled-subtle: #27292d;
  --background-color-inverted: #f8f9fa;
  --background-color-progressive--focus: #6485d1;
  --background-color-progressive-subtle: #1b223d;
  --background-color-progressive-subtle--hover: #233566;
  --background-color-progressive-subtle--active: #3056a9;
  --background-color-destructive--focus: #6485d1;
  --background-color-destructive-subtle: #3c1a13;
  --background-color-destructive-subtle--hover: #612419;
  --background-color-destructive-subtle--active: #9f3526;
  --background-color-error-subtle: #3c1a13;
  --background-color-error-subtle--hover: #612419;
  --background-color-error-subtle--active: #9f3526;
  --background-color-warning-subtle: #2d2212;
  --background-color-success-subtle: #132821;
  --background-color-notice-subtle: #27292d;
  --background-color-content-added: #233566;
  --background-color-content-removed: #453217;
  --background-color-target-text: #572c19;
  --background-color-backdrop-light: rgba(0, 0, 0, 0.65);
  --background-color-backdrop-dark: hsla(0, 0%, 100%, 0.65);

  --border-color-base: #72777d;
  --border-color-emphasized: #eaecf0;
  --border-color-subtle: #54595d;
  --border-color-muted: #404244;
  --border-color-interactive--hover: #a2a9b1;
  --border-color-interactive--active: #c8ccd1;
  --border-color-disabled: #54595d;
  --border-color-inverted: #101418;
  --border-color-progressive--hover: #88a3e8;
  --border-color-progressive--active: #a6bbf5;
  --border-color-progressive--focus: #6485d1;
  --border-color-destructive--hover: #fd7865;
  --border-color-destructive--active: #fea898;
  --border-color-destructive--focus: #6485d1;
  --border-color-error--hover: #fd7865;
  --border-color-error--active: #fea898;
  --border-color-warning--hover: #ca982e;
  --border-color-warning--active: #edb537;
  --border-color-content-added: #233566;
  --border-color-content-removed: #987027;
}

/* Derived variables (borders/shadows) must also be redefined on `body`.
   Otherwise they can inherit resolved values from the OS `prefers-color-scheme` palette. */
body:not(.theme-dark),
body.theme-dark {
  --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
  --border-subtle: var(--border-width-base) var(--border-style-base) var(--border-color-subtle);
  --border-progressive: var(--border-width-base) var(--border-style-base) var(--border-color-progressive);
  --border-destructive: var(--border-width-base) var(--border-style-base) var(--border-color-destructive);
  --border-transparent: var(--border-width-base) var(--border-style-base) var(--border-color-transparent);
  --outline-base--focus: var(--border-width-base) solid transparent;

  --box-shadow-small: var(--box-shadow-outset-small) var(--box-shadow-color-base);
  --box-shadow-small-top: var(--box-shadow-outset-small-top) var(--box-shadow-color-base);
  --box-shadow-small-bottom: var(--box-shadow-outset-small-bottom) var(--box-shadow-color-base);
  --box-shadow-medium: var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base);
  --box-shadow-large: var(--box-shadow-outset-large-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-large-around) var(--box-shadow-color-alpha-base);
  --box-shadow-drop-small: var(--box-shadow-outset-small) var(--box-shadow-color-base);
  --box-shadow-drop-medium: var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base);
}

:root {
  --color-print--visited: #520;
  --ss-pos-top: 1rem;
  --ss-pos-right: 1.2rem;
  --ss-pos-bottom: 1.2rem;
  --ss-width: 9.5rem;
  --ss-height: 2.4rem;
  --ss-select-width: 11rem;
  --ss-select-z-index: 1;
  --ss-button-z-index: 2
}

html {
  font-family: sans-serif;
  text-size-adjust: 100%;
}

details,
summary {
  display: block
}

audio,
canvas,
progress,
video {
  vertical-align: baseline
}

audio:not([controls]) {
  display: none;
  height: 0
}

a:active,
a:hover {
  outline: 0
}

abbr[title] {
  border-bottom: 1px dotted
}

b,
strong {
  font-weight: 700
}

dfn {
  font-style: italic
}

h1 {
  font-size: 3.2rem;
  margin: 1.2rem 0
}

small {
  font-size: 1.3rem
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sup {
  top: -.5em
}

sub {
  bottom: -.25em
}

figure {
  margin: 1.6rem 4rem
}

hr {
  box-sizing: content-box
}

pre {
  overflow: auto
}

code,
kbd,
pre,
samp {
  font-family: var(--font-family-monospace--fallback);
  font-size: 1.4rem
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0
}

button,
select {
  text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  appearance: button;
  cursor: pointer
}

button[disabled],
html input[disabled] {
  cursor: default
}

button::focus-inner,
input::focus-inner {
  border: 0;
  padding: 0
}

input {
  line-height: normal
}

input[type=number]::inner-spin-button,
input[type=number]::outer-spin-button {
  height: auto
}

input[type=search] {
  appearance: none;
  box-sizing: content-box
}

input[type=search]::search-cancel-button,
input[type=search]::search-decoration {
  appearance: none
}

input[type=search]:focus {
  outline-offset: -2px
}

fieldset {
  border: var(--border-base);
  margin: 0 .2rem;
  padding: .6rem 1rem 1.2rem
}

legend {
  padding: 0
}

optgroup {
  font-weight: 700
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

td,
th {
  padding: 0
}

.hidden {
  display: none !important
}

.screen-reader-text {
  display: block;
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden
}

body {
  background-color: var(--background-color-base);
  color: var(--color-base);
  font-family: var(--font-family-system-sans);
  font-size: 1rem;
  line-height: 1.5;
  margin: .4rem 0 1.6rem;

  a {
    touch-action: manipulation
  }

  a,
  a:active,
  a:focus {
    unicode-bidi: embed;
    outline: 0;
    color: var(--color-progressive);
    text-decoration: none
  }

  a:focus {
    outline: 1px solid var(--outline-color-progressive--focus)
  }

  a:hover {
    text-decoration: underline
  }

  img {
    vertical-align: middle
  }

  hr,
  img {
    border: 0
  }

  hr {
    clear: both;
    height: 0;
    border-bottom: var(--border-subtle);
    margin: .26rem 0
  }

  .pure-button {
    display: inline-block;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    background-color: var(--background-color-interactive-subtle);
    color: var(--color-base);
    position: relative;
    min-height: 1.92rem;
    min-width: 1.6rem;
    margin: .16rem 0;
    border: var(--border-base);
    border-radius: var(--border-radius-base);
    padding: .8rem 1.6rem;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    text-decoration: none;
    vertical-align: top;
    transition: background .1s ease, color .1s ease, border-color .1s ease, box-shadow .1s ease
  }

  .pure-button::focus-inner {
    padding: 0;
    border: 0
  }

  .pure-button-hover,
  .pure-button:hover {
    background-color: var(--background-color-base);
    border-color: var(--border-color-base);
    color: var(--color-base--hover)
  }

  .pure-button-active,
  .pure-button:active {
    background-color: var(--background-color-interactive);
    border-color: var(--border-color-interactive);
    color: var(--color-emphasized)
  }

  .pure-button:focus {
    outline: var(--outline-base--focus);
    border-color: var(--border-color-progressive--focus);
    box-shadow: var(--box-shadow-inset-small) var(--box-shadow-color-progressive--focus)
  }

  .pure-button-primary-progressive {
    background-color: var(--background-color-progressive);
    border-color: var(--border-color-progressive);
    color: var(--color-inverted)
  }

  .pure-button-primary-progressive:hover {
    background: var(--background-color-progressive--hover);
    border-color: var(--border-color-progressive--hover)
  }

  .pure-button-primary-progressive:active {
    background-color: var(--background-color-progressive--active);
    border-color: var(--border-color-progressive--active);
    box-shadow: none;
    color: var(--color-inverted)
  }

  .pure-button-primary-progressive:focus {
    box-shadow: var(--box-shadow-inset-small) var(--box-shadow-color-progressive--focus), var(--box-shadow-inset-medium) var(--box-shadow-color-inverted);
    border-color: var(--border-color-progressive--focus)
  }

  .pure-form input[type=search] {
    background-color: var(--background-color-base);
    display: inline-block;
    box-sizing: border-box;
    border: var(--border-base);
    border-radius: var(--border-radius-base);
    padding: .8rem;
    box-shadow: var(--box-shadow-inset-small) var(--box-shadow-color-inverted);
    vertical-align: middle
  }

  .pure-form input:focus:invalid {
    color: var(--color-error);
    border-color: var(--border-color-error)
  }

  .pure-form fieldset {
    margin: 0;
    padding: .56rem 0 1.2rem;
    border: 0
  }

  @media only screen and (max-width:480px) {
    .pure-form input[type=search] {
      display: block
    }
  }