@font-face {
  font-family: 'Instrument Serif';
  src: url('./fonts/InstrumentSerif-Regular-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('./fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* The ks root scopes the system to an adopting page or component preview. */
.ks, .ks *, .ks *::before, .ks *::after { box-sizing: border-box; }
.ks {
  margin: 0;
  background: var(--ks-canvas);
  color: var(--ks-text);
  font-family: var(--ks-font-sans);
  font-size: var(--ks-body-size);
  line-height: var(--ks-body-line);
  font-weight: var(--ks-weight-regular);
  font-optical-sizing: auto;
  font-feature-settings: 'liga' 1, 'calt' 1;
  color-scheme: light;
}
.ks :where(h1,h2,h3,h4,p,figure) { margin: 0; }
.ks :where(h1,h2,h3,h4) { text-wrap: balance; }
.ks :where(img,svg) { max-width: 100%; }
.ks :where(img) { display: block; height: auto; }
.ks :where(button,input,select,textarea) { font: inherit; color: inherit; }
.ks :where(button,a,input,select,textarea,summary) { -webkit-tap-highlight-color: transparent; }
.ks :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: var(--ks-border-focus) solid var(--ks-focus);
  outline-offset: var(--ks-control-focus-offset);
}
.ks ::selection { color: var(--ks-selection-text); background: var(--ks-selection-bg); }
.ks [hidden] { display: none !important; }
.ks :where(p,li) { overflow-wrap: anywhere; }
.ks :where(button) { cursor: pointer; }
.ks :where(a) { color: var(--ks-link); text-underline-offset: 0.22em; text-decoration-thickness: var(--ks-border-hairline); }
.ks :where(a:hover) { color: var(--ks-link-hover); text-decoration-thickness: var(--ks-stroke-strong); }
.ks :where(a:visited) { color: var(--ks-link-visited); }
.ks :where(a:active) { color: var(--ks-accent-active); }
.ks :where(section[id],main[id],h2[id]) { scroll-margin-top: calc(var(--ks-header-height) + var(--ks-space-6)); }
.ks :where(ul,ol) { margin-block: var(--ks-space-4); padding-inline-start: var(--ks-space-6); }
.ks :where(li + li) { margin-block-start: var(--ks-space-2); }
.ks :where(code,pre) { font-family: var(--ks-font-mono); }
.ks :where(p code,li code,td code) { overflow-wrap: anywhere; font-size: var(--ks-code-size); }
.ks :where(h1), .ks .ks-h1 { font: var(--ks-h1-weight) var(--ks-h1-size)/var(--ks-h1-line) var(--ks-h1-font); letter-spacing: var(--ks-h1-tracking); }
.ks :where(h2), .ks .ks-h2 { font: var(--ks-h2-weight) var(--ks-h2-size)/var(--ks-h2-line) var(--ks-h2-font); letter-spacing: var(--ks-h2-tracking); }
.ks :where(h3), .ks .ks-h3 { font: var(--ks-h3-weight) var(--ks-h3-size)/var(--ks-h3-line) var(--ks-h3-font); letter-spacing: var(--ks-h3-tracking); }
.ks :where(h4), .ks .ks-h4 { font: var(--ks-h4-weight) var(--ks-h4-size)/var(--ks-h4-line) var(--ks-h4-font); letter-spacing: var(--ks-h4-tracking); }
.ks-display { font: var(--ks-display-weight) var(--ks-display-size)/var(--ks-display-line) var(--ks-display-font); letter-spacing: var(--ks-display-tracking); }
.ks-small { font: var(--ks-body-small-weight) var(--ks-body-small-size)/var(--ks-body-small-line) var(--ks-body-small-font); }
.ks-caption { font: var(--ks-caption-weight) var(--ks-caption-size)/var(--ks-caption-line) var(--ks-caption-font); }
.ks-label { font: var(--ks-label-weight) var(--ks-label-size)/var(--ks-label-line) var(--ks-label-font); letter-spacing: var(--ks-label-tracking); text-transform: uppercase; }
.ks-meta { font: var(--ks-meta-weight) var(--ks-meta-size)/var(--ks-meta-line) var(--ks-meta-font); letter-spacing: var(--ks-meta-tracking); font-variant-numeric: tabular-nums; }
.ks-muted { color: var(--ks-text-secondary); }
.ks-stack { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--ks-space-4); }
.ks-stack-lg { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--ks-space-8); }
.ks-stack > *, .ks-stack-lg > * { min-width: 0; }
.ks-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ks-space-3); }
.ks-spread { justify-content: space-between; }
.ks-wrap { width: min(var(--ks-layout-max), calc(100% - var(--ks-gutter) * 2)); margin-inline: auto; }
.ks-reading { max-width: var(--ks-layout-reading); }
.ks-section { padding-block: var(--ks-section-space); border-top: var(--ks-border-hairline) solid var(--ks-border); }
.ks-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--ks-layout-gap); }
.ks-grid > * { min-width: 0; grid-column: span 4; }
.ks-rule { border: 0; border-top: var(--ks-border-hairline) solid var(--ks-border); margin: var(--ks-space-6) 0; }
.ks-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ks-skip { position: fixed; top: var(--ks-space-2); left: var(--ks-space-2); transform: translateY(-200%); padding: var(--ks-space-3) var(--ks-space-4); background: var(--ks-canvas); z-index: var(--ks-layer-toast); }
.ks-skip:focus { transform: translateY(0); }

/* Inverse is a section treatment. It uses the same fixed token palette. */
.ks-inverse {
  --ks-canvas: var(--ks-inverse);
  --ks-surface: var(--ks-inverse-surface);
  --ks-surface-raised: var(--ks-inverse-surface);
  --ks-text: var(--ks-text-inverse);
  --ks-text-secondary: var(--ks-text-inverse-secondary);
  --ks-text-muted: var(--ks-text-inverse-secondary);
  --ks-border: var(--ks-border-inverse);
  --ks-border-control: var(--ks-border-inverse);
  --ks-border-strong: var(--ks-text-inverse-secondary);
  --ks-link: var(--ks-accent-inverse);
  --ks-link-hover: var(--ks-text-inverse);
  --ks-link-visited: var(--ks-text-inverse-secondary);
  --ks-focus: var(--ks-focus-inverse);
  background: var(--ks-canvas);
  color: var(--ks-text);
  color-scheme: dark;
}

/* Navigation stays rectangular. Content determines its height. */
.ks-header { position: sticky; top: 0; z-index: var(--ks-layer-sticky); background: var(--ks-canvas); border-bottom: var(--ks-border-hairline) solid var(--ks-border); }
.ks-header-inner { min-height: var(--ks-header-height); display: flex; gap: var(--ks-space-6); align-items: center; flex-wrap: wrap; padding-block: var(--ks-space-2); }
.ks-brand { display: flex; align-items: center; gap: var(--ks-space-2); min-height: var(--ks-control-minimum); color: var(--ks-text); text-decoration: none; }
.ks-brand:visited { color: var(--ks-text); }
.ks-brand-symbol { width: var(--ks-space-16); }
.ks-brand-wordmark { width: 10rem; }
.ks-nav { display: flex; flex-wrap: wrap; gap: var(--ks-space-4); margin-inline-start: auto; }
.ks-nav a { display: inline-flex; align-items: center; min-height: var(--ks-control-minimum); color: var(--ks-text-secondary); text-decoration: none; border-bottom: var(--ks-stroke-strong) solid transparent; font: var(--ks-nav-weight) var(--ks-nav-size)/var(--ks-nav-line) var(--ks-nav-font); }
.ks-nav a:hover, .ks-nav a[aria-current] { color: var(--ks-text); border-bottom-color: var(--ks-text); }
.ks-mobile-toggle { display: none !important; margin-inline-start: auto; }

/* Three action levels. Chamfer is reserved for noninteractive containers. */
.ks-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ks-space-2);
  min-height: var(--ks-control-height); min-width: var(--ks-control-minimum);
  padding: var(--ks-space-3) var(--ks-space-6);
  border: var(--ks-border-hairline) solid var(--ks-text);
  border-radius: var(--ks-radius-control);
  background: var(--ks-text); color: var(--ks-canvas);
  font: var(--ks-button-weight) var(--ks-button-size)/var(--ks-button-line) var(--ks-button-font);
  letter-spacing: var(--ks-button-tracking); text-decoration: none; text-align: center;
  transition: background-color var(--ks-motion-fast) var(--ks-motion-ease), border-color var(--ks-motion-fast) var(--ks-motion-ease);
}
.ks-button:visited { color: var(--ks-canvas); }
.ks-button:hover { color: var(--ks-canvas); background: var(--ks-primary-hover); border-color: var(--ks-primary-hover); text-decoration: none; }
.ks-button:active { background: var(--ks-primary-active); border-color: var(--ks-primary-active); }
.ks-button--secondary { color: var(--ks-text); background: transparent; border-color: var(--ks-border-control); }
.ks-button--secondary:visited { color: var(--ks-text); }
.ks-button--secondary:hover { color: var(--ks-text); background: var(--ks-surface); border-color: var(--ks-text); }
.ks-button--secondary:active { color: var(--ks-text); background: var(--ks-accent-soft); }
.ks-button--ghost { color: var(--ks-text); border-color: transparent; background: transparent; padding-inline: var(--ks-space-3); }
.ks-button--ghost:visited { color: var(--ks-text); }
.ks-button--ghost:hover { color: var(--ks-text); background: var(--ks-surface); border-color: transparent; }
.ks-button--ghost:active { background: var(--ks-accent-soft); }
.ks-button--icon { padding: var(--ks-space-3); width: var(--ks-control-height); }
.ks-button:disabled { color: var(--ks-disabled-text); background: var(--ks-disabled-surface); border-color: var(--ks-border-control); cursor: not-allowed; }
.ks-button[aria-busy=true] { cursor: progress; }
.ks-inverse .ks-button:hover { color: var(--ks-inverse); background: var(--ks-accent-inverse); border-color: var(--ks-accent-inverse); }
.ks-inverse .ks-button:active { background: var(--ks-text-inverse-secondary); }
.ks-inverse :is(.ks-button--secondary,.ks-button--ghost):hover { background: var(--ks-inverse-surface); color: var(--ks-text-inverse); border-color: var(--ks-border-inverse); }
.ks-inverse :is(.ks-button--secondary,.ks-button--ghost):active { background: var(--ks-text-inverse-secondary); color: var(--ks-inverse); }
.ks-inverse .ks-button:disabled { color: var(--ks-disabled-text); background: var(--ks-disabled-surface); border-color: var(--ks-border-control); cursor: not-allowed; }
.ks-arrow { display: inline-block; font-size: var(--ks-h4-size); line-height: 1; font-weight: var(--ks-weight-regular); }
.ks-icon { width: var(--ks-control-icon); height: var(--ks-control-icon); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.ks-icon-sprite { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ks-utility-link { display: inline-flex; align-items: center; gap: var(--ks-space-2); }

.ks-card { padding: var(--ks-space-6); border: var(--ks-border-hairline) solid var(--ks-border); background: var(--ks-surface-raised); border-radius: var(--ks-radius-none); }
.ks-card > * + * { margin-top: var(--ks-space-4); }
.ks-card--interactive { transition: border-color var(--ks-motion-fast) var(--ks-motion-ease); }
.ks-card--interactive:hover, .ks-card--interactive:focus-within { border-color: var(--ks-border-strong); }
.ks-cut { position: relative; background: var(--ks-text); padding: var(--ks-space-8); isolation: isolate; }
/* Only the decorative background is clipped, so links retain complete focus rings. */
.ks-cut::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ks-canvas); clip-path: polygon(0 0,calc(100% - var(--ks-cut-large)) 0,100% var(--ks-cut-large),100% 100%,0 100%); }
.ks-cut { background: transparent; }
.ks-cut--border::after { content: ''; position: absolute; inset: var(--ks-space-1); pointer-events: none; border: var(--ks-border-hairline) solid var(--ks-border-control); z-index: -1; }
.ks-feature { padding: var(--ks-space-8); border-top: var(--ks-stroke-strong) solid var(--ks-text); background: var(--ks-surface); }
.ks-feature > * + * { margin-top: var(--ks-space-4); }
.ks-marker { display: inline-flex; gap: var(--ks-space-3); align-items: center; font: var(--ks-label-weight) var(--ks-label-size)/var(--ks-label-line) var(--ks-label-font); letter-spacing: var(--ks-label-tracking); text-transform: uppercase; }
.ks-marker::before { content: ''; display: inline-block; width: var(--ks-space-2); height: var(--ks-space-2); background: currentColor; }
.ks-badge { display: inline-flex; align-items: center; gap: var(--ks-space-2); padding: var(--ks-space-1) var(--ks-space-2); border: var(--ks-border-hairline) solid var(--ks-border-control); font: var(--ks-meta-weight) var(--ks-meta-size)/var(--ks-meta-line) var(--ks-meta-font); background: var(--ks-canvas); color: var(--ks-text); }
.ks-badge--pill { border-radius: var(--ks-radius-pill); padding-inline: var(--ks-space-3); }
.ks-tag-button { min-height: var(--ks-control-minimum); padding-inline: var(--ks-space-4); cursor: pointer; }
.ks-tag-button[aria-pressed=true] { background: var(--ks-text); color: var(--ks-canvas); border-color: var(--ks-text); }
.ks-tag-button:hover { border-color: var(--ks-text); }

.ks-tabs { display: flex; flex-wrap: wrap; border-bottom: var(--ks-border-hairline) solid var(--ks-border); gap: var(--ks-space-4); }
.ks-tab { border: 0; border-bottom: var(--ks-stroke-strong) solid transparent; background: transparent; padding: var(--ks-space-3) var(--ks-space-2); min-height: var(--ks-control-height); color: var(--ks-text-secondary); font: var(--ks-nav-weight) var(--ks-nav-size)/var(--ks-nav-line) var(--ks-nav-font); }
.ks-tab:hover { color: var(--ks-text); background: var(--ks-surface); }
.ks-tab[aria-selected=true] { color: var(--ks-text); border-bottom-color: var(--ks-text); font-weight: var(--ks-weight-semibold); }
.ks-tabpanel { padding-block: var(--ks-space-6); }
.ks-table-region { overflow: auto; max-width: 100%; }
.ks-table { width: 100%; border-collapse: collapse; text-align: left; font: var(--ks-body-small-weight) var(--ks-body-small-size)/var(--ks-body-small-line) var(--ks-body-small-font); }
.ks-table caption { text-align: left; color: var(--ks-text-secondary); padding-bottom: var(--ks-space-4); }
.ks-table th { background: var(--ks-surface); color: var(--ks-text); font-weight: var(--ks-weight-semibold); }
.ks-table :is(th,td) { padding: var(--ks-space-4); border-bottom: var(--ks-border-hairline) solid var(--ks-border); vertical-align: top; }
.ks-table tbody tr:hover { background: var(--ks-surface); }
.ks-table [data-numeric] { text-align: right; font-variant-numeric: tabular-nums; }
.ks-table .ks-sort { padding: 0; min-height: var(--ks-control-minimum); border: 0; background: transparent; font-weight: inherit; text-align: inherit; }

.ks-field { display: grid; gap: var(--ks-space-2); min-width: 0; }
.ks-field > label, .ks-field-label { font: var(--ks-body-small-weight) var(--ks-body-small-size)/var(--ks-body-small-line) var(--ks-body-small-font); font-weight: var(--ks-weight-semibold); }
.ks-input { width: 100%; min-width: 0; min-height: var(--ks-control-height); padding: var(--ks-space-3) var(--ks-space-4); border: var(--ks-border-hairline) solid var(--ks-border-control); border-radius: var(--ks-radius-control); background: var(--ks-surface-raised); font: var(--ks-input-weight) var(--ks-input-size)/var(--ks-input-line) var(--ks-input-font); }
.ks-input:hover { border-color: var(--ks-text); }
.ks-input::placeholder { color: var(--ks-text-muted); opacity: 1; }
.ks-input:focus { border-color: var(--ks-focus); }
.ks-input[aria-invalid=true] { border: var(--ks-stroke-strong) solid var(--ks-error-border); }
.ks-input:disabled { color: var(--ks-disabled-text); background: var(--ks-disabled-surface); cursor: not-allowed; }
.ks-input[readonly] { background: var(--ks-surface); }
.ks textarea.ks-input { min-height: var(--ks-control-textarea); resize: vertical; }
.ks-field-error { border-inline-start: var(--ks-stroke-strong) solid var(--ks-error-border); padding-inline-start: var(--ks-space-2); font: var(--ks-body-small-weight) var(--ks-body-small-size)/var(--ks-body-small-line) var(--ks-body-small-font); }
.ks-check { display: flex; align-items: center; gap: var(--ks-space-3); min-height: var(--ks-control-height); cursor: pointer; }
.ks-check input { width: var(--ks-control-icon); height: var(--ks-control-icon); accent-color: var(--ks-text); flex: none; }
.ks-form-result { padding: var(--ks-space-4); border: var(--ks-stroke-strong) solid var(--ks-text); background: var(--ks-surface); }

.ks-dialog { width: min(var(--ks-layout-dialog), calc(100% - var(--ks-space-8))); max-height: calc(100dvh - var(--ks-space-8)); padding: var(--ks-space-8); border: var(--ks-border-hairline) solid var(--ks-border-control); border-radius: var(--ks-radius-none); background: var(--ks-canvas); color: var(--ks-text); box-shadow: var(--ks-shadow-overlay); overflow-y: auto; }
.ks-dialog::backdrop { background: var(--ks-overlay-backdrop); }
.ks-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ks-space-4); margin-bottom: var(--ks-space-6); }
.ks-dialog-actions { display: flex; justify-content: flex-end; gap: var(--ks-space-3); flex-wrap: wrap; margin-top: var(--ks-space-8); }
.ks-tooltip-wrap { position: relative; display: inline-flex; }
.ks-tooltip { position: absolute; bottom: calc(100% + var(--ks-space-2)); left: 0; width: max-content; max-width: min(var(--ks-layout-tooltip),70vw); background: var(--ks-surface-raised); color: var(--ks-text); padding: var(--ks-space-3); border: var(--ks-border-hairline) solid var(--ks-border-control); font: var(--ks-caption-weight) var(--ks-caption-size)/var(--ks-caption-line) var(--ks-caption-font); z-index: var(--ks-layer-popover); }
.ks-tooltip::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: var(--ks-space-3); }
.ks-alert { display: flex; align-items: flex-start; gap: var(--ks-space-3); padding: var(--ks-space-4); border: var(--ks-border-hairline) solid var(--ks-info-border); border-inline-start-width: var(--ks-border-emphasis); background: var(--ks-info-bg); color: var(--ks-info-text); }
.ks-alert strong { display: block; margin-bottom: var(--ks-space-1); font-weight: var(--ks-weight-semibold); }
.ks-alert--success { border-color: var(--ks-success-border); background: var(--ks-success-bg); color: var(--ks-success-text); }
.ks-alert--warning { border-color: var(--ks-warning-border); border-inline-start-style: double; background: var(--ks-warning-bg); color: var(--ks-warning-text); }
.ks-alert--error { border-color: var(--ks-error-border); background: var(--ks-error-bg); color: var(--ks-error-text); }
.ks-accordion { border-top: var(--ks-border-hairline) solid var(--ks-border); }
.ks-accordion details { border-bottom: var(--ks-border-hairline) solid var(--ks-border); }
.ks-accordion summary { display: flex; justify-content: space-between; align-items: center; gap: var(--ks-space-4); padding-block: var(--ks-space-4); min-height: var(--ks-control-height); cursor: pointer; list-style: none; font-weight: var(--ks-weight-medium); }
.ks-accordion summary::-webkit-details-marker { display: none; }
.ks-accordion summary::after { content: '+'; font-size: var(--ks-h3-size); }
.ks-accordion details[open] summary::after { content: '−'; }
.ks-accordion details > div { padding-bottom: var(--ks-space-6); max-width: var(--ks-layout-reading); }
.ks-pagination { display: flex; align-items: center; gap: var(--ks-space-2); flex-wrap: wrap; }
.ks-pagination [aria-current=page] { border-color: var(--ks-text); background: var(--ks-text); color: var(--ks-canvas); }
.ks-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-2); list-style: none; margin: 0; padding: 0; font: var(--ks-caption-weight) var(--ks-caption-size)/var(--ks-caption-line) var(--ks-caption-font); }
.ks-breadcrumbs li { margin: 0; display: flex; align-items: center; gap: var(--ks-space-2); }
.ks-breadcrumbs li + li::before { content: '/'; color: var(--ks-text-muted); }
.ks-breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--ks-control-minimum); }
.ks-code { background: var(--ks-surface-raised); color: var(--ks-text); border: var(--ks-border-hairline) solid var(--ks-border-control); }
.ks-code-head { padding: var(--ks-space-3) var(--ks-space-4); border-bottom: var(--ks-border-hairline) solid var(--ks-border-inverse); display: flex; gap: var(--ks-space-4); align-items: center; justify-content: space-between; }
.ks-code pre { margin: 0; padding: var(--ks-space-6); max-width: 100%; overflow: auto; font: var(--ks-code-weight) var(--ks-code-size)/var(--ks-code-line) var(--ks-code-font); tab-size: 2; }
.ks-progress { width: 100%; height: var(--ks-space-2); border: 0; border-radius: 0; accent-color: var(--ks-accent); background: var(--ks-border); }
.ks-progress::-webkit-progress-bar { background: var(--ks-border); }
.ks-progress::-webkit-progress-value { background: var(--ks-accent); }
.ks-progress::-moz-progress-bar { background: var(--ks-accent); }
.ks-spinner { display: inline-block; width: var(--ks-control-icon-small); height: var(--ks-control-icon-small); border: var(--ks-stroke-strong) solid currentColor; border-right-color: transparent; border-radius: var(--ks-radius-round); animation: ks-spin var(--ks-motion-loading) linear infinite; }
.ks-empty { padding: var(--ks-space-12) var(--ks-space-6); text-align: center; border: var(--ks-border-hairline) dashed var(--ks-border-control); background: var(--ks-surface); }
.ks-empty > * + * { margin-top: var(--ks-space-4); }
.ks-footer { padding-block: var(--ks-space-12); border-top: var(--ks-border-hairline) solid var(--ks-border); }
.ks-footer a { min-height: var(--ks-control-minimum); display: inline-flex; align-items: center; }
@keyframes ks-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   MOTION LAYER
   Precise, fast, mechanical. Compositor properties only: opacity, transform,
   clip-path. Nothing here gates access to content. Every rule that hides
   content is scoped to .ks-motion, a class the page sets on the root element
   only when scripting is available and reduced motion is not requested, and
   which a failsafe timer removes if the motion runtime never starts.
   --------------------------------------------------------------------------- */

:root { interpolate-size: allow-keywords; }

/* Page transitions. A short opacity change with a small directional slide.
   Header and footer are shared elements, so moving between guide routes reads
   as a change of content rather than a whole new document. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-group(*) { animation-duration: var(--ks-motion-standard); animation-timing-function: var(--ks-motion-ease); }
::view-transition-old(root) { animation-name: ks-view-out; }
::view-transition-new(root) { animation-name: ks-view-in; }
@keyframes ks-view-out { to { opacity: 0; } }
@keyframes ks-view-in { from { opacity: 0; transform: translateY(var(--ks-motion-shift)); } }
.ks-header { view-transition-name: ks-chrome-header; }
.ks-footer { view-transition-name: ks-chrome-footer; }

/* Scroll reveal. The runtime adds .is-in the first time an element enters the
   viewport, then removes the hook once it has arrived, so no transition delay
   or clip outlives the entrance. --ks-reveal-index staggers a group: metadata
   labels take a lower index than the content they head. */
.ks-motion .ks-reveal {
  opacity: 0;
  transform: translateY(var(--ks-motion-shift));
  transition: opacity var(--ks-motion-reveal) var(--ks-motion-ease), transform var(--ks-motion-reveal) var(--ks-motion-ease), clip-path var(--ks-motion-reveal) var(--ks-motion-ease);
  transition-delay: calc(var(--ks-reveal-hold, 0ms) + var(--ks-motion-stagger) * var(--ks-reveal-index, 0));
}
.ks-motion .ks-reveal--panel { transform: none; clip-path: inset(0 0 0 100%); }
.ks-motion .ks-reveal--trace { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.ks-motion .ks-reveal--draw { opacity: 1; transform: scaleX(0); transform-origin: left center; }
.ks-motion .ks-reveal.is-in { opacity: 1; transform: none; }
.ks-motion :is(.ks-reveal--panel,.ks-reveal--trace).is-in { clip-path: inset(0 0 0 0); }
.ks-motion .ks-reveal--draw.is-in { transform: scaleX(1); }

/* A statement line rises out of its own mask. Two rules decide the shape of
   this. clip-path travels with the transform it is paired with, so the mask
   has to be a separate element. And the hook has to sit on the mask rather
   than on the line, because a line parked below its own mask has no
   intersection left for the runtime to observe, and would never be asked to
   arrive. The mask's padding clears the descenders; an equal negative margin
   keeps the line box exactly where it was. */
.ks-statement-line { display: block; overflow: hidden; padding-block: 0.12em 0.2em; margin-block: -0.12em -0.2em; }
.ks-motion .ks-reveal--statement { opacity: 1; transform: none; transition-duration: var(--ks-motion-cinematic); }
.ks-motion .ks-reveal--statement > span { display: inline-block; transform: translateY(130%); transition: transform var(--ks-motion-cinematic) var(--ks-motion-ease); transition-delay: inherit; }
.ks-motion .ks-reveal--statement.is-in > span { transform: none; }

/* ---------------------------------------------------------------------------
   TECHNICAL LAYER

   Pitch black ground, white line work. These four utilities carry the
   graphic language of the supplied references: a measured field, cut corner
   ticks, a hatched fill, and a solid label chip. They are opt-in, they add no
   color, and they never sit between a reader and a word: each one either
   lifts its children above itself or is a marker with no content of its own.
   --------------------------------------------------------------------------- */

/* The measured field. A faint construction grid, one cell per four spaces. */
.ks-field { position: relative; isolation: isolate; }
.ks-field > * { position: relative; z-index: 1; }
.ks-field::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(to right, var(--ks-border) 0 1px, transparent 1px var(--ks-space-16)),
    repeating-linear-gradient(to bottom, var(--ks-border) 0 1px, transparent 1px var(--ks-space-16));
}

/* Corner ticks. Two opposite brackets, the way a reference frames a panel
   without drawing a full box around it. */
.ks-bracket { position: relative; }
.ks-bracket::before, .ks-bracket::after {
  content: '';
  position: absolute;
  width: var(--ks-space-4);
  height: var(--ks-space-4);
  border: var(--ks-border-hairline) solid var(--ks-border-strong);
  pointer-events: none;
}
.ks-bracket::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ks-bracket::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Hatched fill. A marker, never a surface for text. */
.ks-hatch { background-image: repeating-linear-gradient(135deg, var(--ks-border-strong) 0 1px, transparent 1px 5px); }

/* Solid label chip: the inverted surface at its smallest, which is the one
   place a black system still shows white as a fill. */
.ks-badge--solid { background: var(--ks-inverse); color: var(--ks-text-inverse); border-color: var(--ks-inverse); text-transform: uppercase; letter-spacing: var(--ks-label-tracking); }

/* Sliding selection indicators. The runtime measures the selected control and
   writes an offset and a scale, so one hairline travels instead of many
   borders switching on. The bar stays rectangular. */
.ks-tabs, .ks-nav { position: relative; }
.ks-tabs::after, .ks-nav::after {
  content: ''; position: absolute; left: 0; bottom: var(--ks-indicator-b, 0);
  width: 1px; height: var(--ks-stroke-strong); background: var(--ks-text); pointer-events: none;
  opacity: var(--ks-indicator-opacity, 0);
  transform: translateX(var(--ks-indicator-x, 0)) scaleX(var(--ks-indicator-scale, 0));
  transform-origin: left center;
  transition: transform var(--ks-motion-standard) var(--ks-motion-ease), opacity var(--ks-motion-fast) var(--ks-motion-ease);
}
.ks-tabs[data-indicator] .ks-tab[aria-selected=true] { border-bottom-color: transparent; }
.ks-rail { position: relative; }
.ks-rail::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: var(--ks-stroke-strong); height: 1px; background: var(--ks-accent); pointer-events: none;
  opacity: var(--ks-indicator-opacity, 0);
  transform: translateY(var(--ks-indicator-y, 0)) scaleY(var(--ks-indicator-scale, 0));
  transform-origin: center top;
  transition: transform var(--ks-motion-standard) var(--ks-motion-ease), opacity var(--ks-motion-fast) var(--ks-motion-ease);
}

/* Underline sweep. Navigation keeps its reserved border box, so nothing moves;
   the sweep draws inside it from the leading edge. */
.ks-nav a { position: relative; }
.ks-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(var(--ks-stroke-strong) * -1);
  height: var(--ks-stroke-strong); background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--ks-motion-standard) var(--ks-motion-ease);
}
.ks-nav a:where(:hover,:focus-visible)::after { transform: scaleX(1); }
.ks-nav[data-indicator] a { border-bottom-color: transparent; }
.ks-nav[data-indicator] a[aria-current]::after { transform: scaleX(0); }

/* Actions. A press settles by one pixel, a hover fill wipes in from the
   leading edge, and a directional glyph moves the way it points. */
.ks-button { transition: background-color var(--ks-motion-fast) var(--ks-motion-ease), border-color var(--ks-motion-fast) var(--ks-motion-ease), color var(--ks-motion-fast) var(--ks-motion-ease), transform var(--ks-motion-fast) var(--ks-motion-ease); }
.ks-button:active { transform: translateY(1px); }
.ks-button:disabled:active { transform: none; }
.ks-button--secondary { position: relative; isolation: isolate; overflow: hidden; background: transparent; }
.ks-button--secondary::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ks-surface);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--ks-motion-standard) var(--ks-motion-ease);
}
.ks-button--secondary:where(:hover,:focus-visible)::before { transform: scaleX(1); }
.ks-button--secondary:hover, .ks-inverse .ks-button--secondary:hover { background: transparent; }
.ks-glyph { transition: transform var(--ks-motion-fast) var(--ks-motion-ease); }
.ks-glyph { display: inline-block; }
.ks-direction-track {
  display: inline-flex; align-items: center; justify-content: flex-start; flex: none;
  width: calc(var(--ks-control-icon) + var(--ks-space-2)); overflow: hidden;
}
.ks-direction-track > :is(.ks-icon,.icon) { transition: transform var(--ks-motion-standard) var(--ks-motion-ease); }
.ks-directional:where(:hover,:focus-visible,:focus-within) .ks-direction-track > :is(.ks-icon,.icon) { transform: translateX(var(--ks-space-2)); }
.ks-direction-track--back { justify-content: flex-end; }
.ks-directional:where(:hover,:focus-visible,:focus-within) .ks-direction-track--back > :is(.ks-icon,.icon) { transform: translateX(calc(var(--ks-space-2) * -1)); }
.ks-direction-track--up { width: var(--ks-control-icon); overflow: visible; }
.ks-directional:where(:hover,:focus-visible,:focus-within) .ks-direction-track--up > :is(.ks-icon,.icon) { transform: translateY(calc(var(--ks-space-1) * -1)); }
:is(a,button,summary):where(:hover,:focus-visible) .ks-glyph--right { transform: translateX(0.125rem); }
:is(a,button,summary):where(:hover,:focus-visible) .ks-glyph--back { transform: translateX(-0.125rem); }
:is(a,button,summary):where(:hover,:focus-visible) .ks-glyph--out { transform: translate(0.125rem, -0.125rem); }
:is(a,button,summary):where(:hover,:focus-visible) .ks-glyph--down { transform: translateY(0.125rem); }

/* Cards. A hairline traces the leading edge of an interactive card. */
.ks-card--interactive { position: relative; transition: background-color var(--ks-motion-fast) var(--ks-motion-ease), border-color var(--ks-motion-fast) var(--ks-motion-ease), color var(--ks-motion-fast) var(--ks-motion-ease); }
.ks-card--interactive:where(:hover,:focus-within) { background: var(--ks-accent-soft); border-color: var(--ks-accent); }
.ks-card--interactive::after {
  content: ''; position: absolute; inset: 0 0 auto; height: var(--ks-stroke-strong);
  background: var(--ks-accent); pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--ks-motion-standard) var(--ks-motion-ease);
}
.ks-card--interactive:where(:hover,:focus-within)::after { transform: scaleX(1); }

/* Disclosures, dialogs, tooltips. Opening reveals the body from one edge. No
   height is animated, so nothing below a disclosure moves twice. */
@media (prefers-reduced-motion: no-preference) {
  .ks-accordion details[open] > :not(summary),
  .ks details.ks-disclose[open] > :not(summary) { animation: ks-disclose var(--ks-motion-deliberate) var(--ks-motion-ease) both; }
  .ks-dialog[open] { animation: ks-panel-in var(--ks-motion-deliberate) var(--ks-motion-ease); }
  .ks-dialog[open]::backdrop { animation: ks-fade-in var(--ks-motion-standard) var(--ks-motion-ease); }
  .ks-tooltip { animation: ks-tip-in var(--ks-motion-fast) var(--ks-motion-ease); }
}
@keyframes ks-disclose { from { opacity: 0; transform: translateY(calc(var(--ks-motion-shift) * -0.5)); } }
@keyframes ks-panel-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } }
@keyframes ks-fade-in { from { opacity: 0; } }
@keyframes ks-tip-in { from { opacity: 0; transform: translateY(calc(var(--ks-motion-shift) * 0.5)); } }
.ks summary { transition: background-color var(--ks-motion-fast) var(--ks-motion-ease); }

/* Reading progress. Driven by the scroll timeline where the browser supports
   it, so the bar runs off the main thread and needs no scroll handler. The
   runtime writes --ks-scroll-progress everywhere else. */
.ks-scroll-progress {
  position: fixed; inset: 0 0 auto; height: var(--ks-stroke-strong);
  background: var(--ks-accent); z-index: calc(var(--ks-layer-sticky) + 1);
  transform: scaleX(var(--ks-scroll-progress, 0)); transform-origin: left center;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ks-scroll-progress { animation: ks-progress-run linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes ks-progress-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Surfaces that respond. Inputs, rows, tabs, and the header hold their
   geometry and change only boundary, fill, or crop. */
.ks-input { transition: border-color var(--ks-motion-fast) var(--ks-motion-ease), background-color var(--ks-motion-fast) var(--ks-motion-ease); }
.ks-table tbody tr { transition: background-color var(--ks-motion-fast) var(--ks-motion-ease); }
.ks-tab { transition: color var(--ks-motion-fast) var(--ks-motion-ease), background-color var(--ks-motion-fast) var(--ks-motion-ease), border-color var(--ks-motion-fast) var(--ks-motion-ease); }
.ks-tag-button { transition: background-color var(--ks-motion-fast) var(--ks-motion-ease), border-color var(--ks-motion-fast) var(--ks-motion-ease), color var(--ks-motion-fast) var(--ks-motion-ease), transform var(--ks-motion-fast) var(--ks-motion-ease); }
.ks-tag-button:active { transform: translateY(1px); }
.ks-header { transition: border-color var(--ks-motion-fast) var(--ks-motion-ease), background-color var(--ks-motion-fast) var(--ks-motion-ease); }
.ks-header.is-scrolled { border-bottom-color: var(--ks-border-strong); background: var(--ks-surface-raised); }

@media (min-width: 48rem) { .ks-grid { grid-template-columns: repeat(8,minmax(0,1fr)); } .ks-grid > * { grid-column: span 8; } .ks-grid > .ks-half { grid-column: span 4; } }
@media (min-width: 64rem) { .ks-grid { grid-template-columns: repeat(12,minmax(0,1fr)); } .ks-grid > * { grid-column: span 12; } .ks-grid > .ks-half { grid-column: span 6; } .ks-grid > .ks-third { grid-column: span 4; } .ks-grid > .ks-two-thirds { grid-column: span 8; } }
@media (max-width: 47.999rem) {
  .ks-header-inner { gap: var(--ks-space-2); }
  .ks-nav { flex-basis: 100%; margin: 0; }
  .ks-js .ks-mobile-toggle { display: inline-flex !important; }
  .ks-js .ks-nav { display: none; }
  .ks-js .ks-nav.is-open { display: flex; flex-direction: column; gap: 0; }
  .ks-js .ks-nav a { padding: var(--ks-space-3); }
  .ks-cut, .ks-feature { padding: var(--ks-space-6); }
  .ks-dialog { padding: var(--ks-space-6); }
  .ks-dialog-actions > * { flex: 1; }
  .ks-table :is(td,th) { padding: var(--ks-space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .ks *, .ks *::before, .ks *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* State still changes, it just arrives immediately, and nothing stays hidden. */
  .ks :is(.ks-reveal,.ks-rule--draw) { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ks-nav[data-indicator] a[aria-current] { border-bottom-color: currentColor; }
}
@media (max-width: 23.999rem) { .ks-brand-wordmark { display: none; } }
@media (forced-colors: active) {
  .ks-button,.ks-badge,.ks-card,.ks-input { border: var(--ks-border-hairline) solid ButtonText; }
  .ks-field::before { display: none; }
  .ks-hatch { background-image: none; }
  .ks-badge--solid { background: ButtonFace; color: ButtonText; }
  .ks :focus-visible { outline-color: Highlight; }
  .ks-tab[aria-selected=true],.ks-pagination [aria-current=page] { outline: var(--ks-stroke-strong) solid Highlight; }
  .ks-cut::before { clip-path: none; border: var(--ks-border-hairline) solid CanvasText; background: Canvas; }
  .ks-progress { forced-color-adjust: auto; }
}