:root, [data-brand="hemidemi"] {
  --color-primary: #4A5568;
  --color-primary-dark: #2D3748;
  --color-primary-light: #718096;
  --color-accent: #B8860B;
  --color-accent-dark: #8B6914;
  --color-accent-light: #D4AF37;
  --color-accent-hover: #8B6914;
  --color-secondary: #B8860B;
  --color-success: #48874A;
  --color-success-light: #D4EDDA;
  --color-success-dark: #2D5A2E;
  --color-warning: #C9850A;
  --color-warning-light: #FFF3CD;
  --color-warning-dark: #856404;
  --color-error: #C53030;
  --color-error-light: #FED7D7;
  --color-error-dark: #9B2C2C;
  --color-info: #4A6FA5;
  --color-info-light: #D6E4F0;
  --color-info-dark: #2C5282;
  --color-background: #FDFCFA;
  --color-background-secondary: #F8F6F1;
  --color-background-alt: #F8F6F1;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F8F6F1;
  --color-text: #292524;
  --color-text-secondary: #726B65;
  --color-text-inverse: #FFFFFF;
  --color-focus: var(--color-accent);
  --color-link: var(--color-accent-dark);
  --color-border: #E7E5E4;
  --color-border-light: #F0EFEC;
  --color-shadow: rgba(41, 37, 36, 0.08);
  --color-shadow-light: rgba(41, 37, 36, 0.04);
  --color-wash-sienna: rgba(210, 149, 100, 0.20);
  --color-wash-umber: rgba(139, 121, 94, 0.15);
  --color-wash-blue: rgba(29, 61, 94, 0.10);
  --color-brand-indigo: #1A237E;
  --font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Jost", "Futura", "Century Gothic", var(--font-sans);
  --font-serif: var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --letter-spacing-tight: -.01em;
  --letter-spacing-normal: normal;
  --letter-spacing-wide: .06em;
  --letter-spacing-wider: .12em;
  --letter-spacing-widest: .16em;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --density-cell-y: 9px;
  --density-cell-x: 10px;
  --density-field-y: 11px;
  --density-block-y: 1rem;
  --density-block-x: 1rem;
  --density-gap: 1rem;
  --border-width-hairline: 1px;
  --border-width-rule: 1.5px;
  --border-width-focus: 2px;
  --focus-ring: var(--border-width-focus) solid var(--color-focus);
  --focus-ring-offset: 2px;
  --border-width-thick: 3px;
  --opacity-muted: .5;
  --opacity-dim: .55;
  --opacity-disabled: .58;
  --easing-standard: ease;
  --container-sm: 36rem;
  --container-md: 760px;
  --container-lg: 980px;
  --container-xl: 1100px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-round: 50%;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px var(--color-shadow-light);
  --shadow-md: 0 2px 8px var(--color-shadow);
  --shadow-lg: 0 4px 12px var(--color-shadow);
  --shadow-xl: 0 12px 40px var(--color-shadow);
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --z-index-base: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-modal-backdrop: 1000;
  --z-index-modal: 1001;
  --z-index-popover: 1100;
  --z-index-tooltip: 1200;
  --z-index-notification: 9999;
}

[data-brand="kreisleriana"] {
  --color-background: #FAFAF7;
  --color-background-secondary: #F4F3EF;
  --color-surface: #EEEEE8;
  --color-surface-hover: #E5E4DE;
  --color-text: #2D2D2D;
  --color-text-secondary: #6B6B6B;
  --color-border: #E0DFD8;
  --color-border-light: #EAEAE4;
  --color-accent: #3B7C8A;
  --color-accent-dark: #2D6470;
  --color-accent-light: #4A9BAC;
  --color-accent-hover: #2D6470;
  --color-secondary: #3B7C8A;
}

[data-theme="dark"] {
  --color-primary: #A0AEC0;
  --color-primary-dark: #718096;
  --color-primary-light: #CBD5E0;
  --color-accent: #D4AF37;
  --color-accent-dark: #B7953C;
  --color-accent-light: #E8C547;
  --color-accent-hover: #E8C547;
  --color-link: var(--color-accent);
  --color-secondary: #D4AF37;
  --color-success: #68D391;
  --color-success-light: #276749;
  --color-success-dark: #9AE6B4;
  --color-warning: #ECC94B;
  --color-warning-light: #744210;
  --color-warning-dark: #F6E05E;
  --color-error: #FC8181;
  --color-error-light: #742A2A;
  --color-error-dark: #FEB2B2;
  --color-info: #63B3ED;
  --color-info-light: #2A4365;
  --color-info-dark: #90CDF4;
  --color-background: #1C1917;
  --color-background-secondary: #292524;
  --color-background-alt: #292524;
  --color-surface: #44403C;
  --color-surface-hover: #57534E;
  --color-text: #F5F5F4;
  --color-text-secondary: #A8A29E;
  --color-text-inverse: #1C1917;
  --color-border: #57534E;
  --color-border-light: #44403C;
  --color-shadow: rgba(0, 0, 0, 0.40);
  --color-shadow-light: rgba(0, 0, 0, 0.25);
  --color-wash-sienna: rgba(210, 149, 100, 0.08);
  --color-wash-umber: rgba(139, 121, 94, 0.06);
  --color-wash-blue: rgba(29, 61, 94, 0.05);
}

:root, [data-brand="kreisleriana"] {
  --kb-ink: #1C1917;
  --kb-paper: #FDFCFA;
  --kb-tint: #F8F2E3;
  --kb-tint-2: #F0E5CC;
  --kb-red: #C53030;
  --kb-blue: #2563EB;
  --kb-yellow: #FACC21;
  --kb-mark-blue: #2563EB;
  --kb-rule: 1.5px solid var(--kb-ink);
  --kb-radius: 0;
  --kb-offset: 3px;
  --kb-ease: 120ms ease;
  --kb-tail-line: 22px;
}

[data-theme="dark"] {
  --kb-ink: #F5F5F4;
  --kb-paper: #1C1917;
  --kb-tint: #292524;
  --kb-tint-2: #44403C;
  --kb-red: #FC8181;
  --kb-blue: #63B3ED;
  --kb-yellow: #ECC94B;
}

[data-density="compact"] {
  --density-cell-y: 5px;
  --density-cell-x: 8px;
  --density-field-y: 6px;
  --density-block-y: 0.5rem;
  --density-block-x: 0.5rem;
  --density-gap: 0.5rem;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jost-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jost-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jost-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jost-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/jost-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/jost-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jost-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jost-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

body, .body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.1;
  color: var(--color-text);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--color-text);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h4, .h4 {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text);
}

h5, .h5, h6, .h6 {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  color: var(--color-text);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-link);
}

.small, small {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.caption {
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
}

code, .code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-background-secondary);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

a, .link {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover, .link:hover {
  color: var(--color-accent-dark);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.kb-press {
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-offset) var(--kb-offset) 0 0 var(--kb-red);
  transition: transform var(--kb-ease), box-shadow var(--kb-ease);
}

.kb-press:hover {
  transform: translate(var(--kb-offset), var(--kb-offset));
  box-shadow: 0 0 0 0 var(--kb-red);
}

.kb-btn {
  display: inline-block;
  box-sizing: border-box;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--kb-paper);
  background: var(--kb-ink);
  border: var(--kb-rule);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-offset) var(--kb-offset) 0 0 var(--kb-red);
  transition: transform var(--kb-ease), box-shadow var(--kb-ease);
}

.kb-btn:hover {
  transform: translate(var(--kb-offset), var(--kb-offset));
  box-shadow: 0 0 0 0 var(--kb-red);
}

.kb-btn--block {
  width: 100%;
  text-align: center;
}

.kb-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 5px;
}

.kb-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: var(--density-field-y) 12px;
  color: var(--kb-ink);
  background: var(--kb-paper);
  border: var(--kb-rule);
  border-radius: var(--kb-radius);
  transition: background var(--kb-ease);
}

.kb-input:focus {
  background: var(--kb-tint-2);
}

.kb-input:hover:not(:focus) {
  background: var(--kb-tint);
}

.kb-input--code {
  font-family: var(--font-mono);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.kb-input-reveal {
  position: relative;
}

.kb-input-reveal .kb-input {
  padding-right: 44px;
}

.kb-input-reveal-toggle {
  align-items: center;
  background: none;
  border: 0;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 42px;
}

.kb-input-reveal-toggle[aria-pressed=true] {
  color: var(--kb-ink);
}

.kb-field {
  margin-bottom: 14px;
}

.kb-field--inline {
  display: inline-block;
  margin-bottom: 0;
}

.kb-textarea {
  min-height: 96px;
  resize: vertical;
}

.kb-file-input::file-selector-button {
  margin-right: 10px;
  padding: 5px 9px;
  border: var(--border-width-hairline) solid var(--kb-ink);
  background: var(--kb-paper);
  color: var(--kb-ink);
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
}

.kb-input:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.kb-field--invalid .kb-input {
  border-color: var(--kb-red);
}

.kb-field-help {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.kb-field-error {
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--kb-red);
}

.kb-select {
  background-color: var(--kb-paper);
}

.kb-choice-group {
  padding: 0;
  border: 0;
}

.kb-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
}

.kb-choice-input {
  accent-color: var(--kb-blue);
}

.kb-choice-input:disabled + .kb-choice-label {
  opacity: var(--opacity-disabled);
}

.kb-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.kb-switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kb-switch-track {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  border: var(--kb-rule);
  border-radius: 9px;
  background: var(--kb-tint-2);
  transition: background var(--kb-ease);
}

.kb-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kb-ink);
  transition: transform var(--kb-ease);
}

.kb-switch-input:checked + .kb-switch-track {
  background: var(--kb-blue);
}

.kb-switch-input:disabled + .kb-switch-track {
  opacity: var(--opacity-disabled);
}

.kb-switch-input:checked + .kb-switch-track .kb-switch-thumb {
  transform: translateX(16px);
  background: var(--kb-paper);
}

.kb-switch-input:focus-visible + .kb-switch-track {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.kb-fieldset {
  margin: 0 0 18px;
  padding: 14px;
  border: var(--kb-rule);
}

.kb-fieldset-legend {
  padding: 0 6px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.kb-fieldset-body {
  display: grid;
  gap: 12px;
}

.kb-fieldset-body > .kb-field {
  margin-bottom: 0;
}

.kb-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.kb-form-row > .kb-field {
  margin-bottom: 0;
}

.kb-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: var(--kb-rule);
}

.kb-form-errors {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: var(--border-width-hairline) solid var(--kb-red);
  background: color-mix(in srgb, var(--kb-red) 8%, var(--kb-paper));
  font-family: var(--font-sans);
  font-size: 13px;
}

.kb-form-errors-title {
  font-weight: 700;
}

.kb-form-errors-list {
  margin: 7px 0 0;
  padding-left: 20px;
}

.kb-form-errors a {
  color: var(--kb-red);
  text-decoration: underline;
}

.kb-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.kb-input-group > .kb-field {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.kb-input-group > .kb-field .kb-input {
  height: 100%;
}

.kb-input-group-addon {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: var(--border-width-hairline) solid var(--kb-ink);
  background: var(--kb-tint);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.kb-input-group-addon:first-child {
  border-right: 0;
}

.kb-input-group-addon:last-child {
  border-left: 0;
}

.kb-input-group > .kb-btn:first-child {
  border-right: 0;
}

.kb-input-group > .kb-btn:not(:first-child) {
  border-left: 0;
}

.kb-combobox {
  position: relative;
}

.kb-combobox-listbox {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  box-sizing: border-box;
  border: var(--kb-rule);
  border-top: 0;
  background: var(--kb-paper);
  box-shadow: var(--kb-offset) var(--kb-offset) 0 0 var(--kb-ink);
}

.kb-combobox-listbox[hidden] {
  display: none;
}

.kb-combobox-group-label {
  padding: 7px 10px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.kb-combobox-option {
  padding: 9px 11px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  border-top: var(--border-width-hairline) solid var(--color-border);
}

.kb-combobox-option:not([aria-disabled='true']):hover, .kb-combobox-option.is-active {
  background: var(--kb-tint-2);
}

.kb-combobox-option[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.kb-combobox-option-label {
  display: block;
  font-weight: 600;
}

.kb-combobox-option-detail {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-secondary);
}

.kb-tag-input-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 40px;
  padding: 5px 7px;
  border: var(--kb-rule);
  background: var(--kb-paper);
  box-sizing: border-box;
}

.kb-tag-input-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.kb-tag-input-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: var(--border-width-hairline) solid var(--kb-ink);
  background: var(--kb-tint-2);
  font-family: var(--font-mono);
  font-size: 10px;
}

.kb-tag-input-remove {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  line-height: var(--line-height-none);
  cursor: pointer;
}

.kb-tag-input-remove:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-muted);
}

.kb-tag-input-input {
  flex: 1 1 10rem;
  min-width: 8rem;
  padding: 4px;
  border: 0;
  box-shadow: none;
}

.kb-tag-input-control:focus-within {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.kb-tag-input-input:focus {
  outline: none;
  box-shadow: none;
}

.kb-btn:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.kb-link {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--kb-ink);
  text-decoration: none;
  line-height: 1.1;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
  transition: color var(--kb-ease), border-color var(--kb-ease);
}

.kb-link:hover {
  color: var(--kb-red);
  border-bottom-color: var(--kb-red);
}

.kb-link--quiet {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.kb-link--quiet:hover {
  color: var(--kb-ink);
  border-bottom-color: var(--kb-ink);
}

.kb-lockup {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.kb-rule {
  height: 1.5px;
  background: var(--kb-ink);
  border: 0;
  margin: 18px 0 4px;
}

.kb-glyph {
  flex: 0 0 auto;
  display: inline-block;
  width: 22px;
  height: 22px;
  position: relative;
}

.kb-glyph--circle {
  border-radius: 50%;
  background: var(--kb-blue);
}

.kb-glyph--square {
  background: var(--kb-red);
}

.kb-glyph--triangle {
  width: 0;
  height: 0;
  background: none;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 19px solid var(--kb-yellow);
}

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

.kb-glyph--slash {
  background: none;
}

.kb-glyph--slash:before {
  content: "";
  position: absolute;
  left: 9px;
  top: -1px;
  width: 4px;
  height: 24px;
  background: var(--kb-ink);
  transform: rotate(12deg);
  transform-origin: center;
}

.kb-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 6px;
}

.kb-head h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
  line-height: var(--line-height-none);
  color: var(--kb-ink);
}

.kb-head .kb-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
  line-height: var(--line-height-none);
  color: var(--kb-ink);
}

.kb-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--kb-blue);
  border: var(--kb-rule);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  transition: transform var(--kb-ease), box-shadow var(--kb-ease);
}

.kb-avatar:hover {
  box-shadow: 2px 2px 0 0 var(--kb-red);
}

.kb-avatar [aria-expanded="true"] {
  box-shadow: 2px 2px 0 0 var(--kb-red);
}

.kb-avatar.kb-avatar--display {
  cursor: default;
}

.kb-avatar.kb-avatar--display:hover {
  box-shadow: none;
}

.kb-avatar--lg {
  width: 54px;
  height: 54px;
  font-size: 21px;
}

.kb-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 10;
  min-width: 150px;
  display: none;
  background: var(--color-surface,#fff);
  border: var(--kb-rule);
  box-shadow: 4px 4px 0 0 var(--kb-red);
}

.kb-menu button {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  color: var(--kb-ink);
  background: none;
  border: 0;
  transition: background var(--kb-ease), color var(--kb-ease);
}

.kb-menu button:hover {
  background: var(--kb-ink);
  color: var(--kb-paper);
}

.kb-menu.is-open {
  display: block;
}

.kb-menu--context {
  position: fixed;
  right: auto;
}

.kb-login {
  display: block;
  border-top: var(--kb-rule);
  text-decoration: none;
}

.kb-login-in {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
}

.kb-login-av {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--kb-blue);
  border: var(--kb-rule);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
}

.kb-login-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: 0;
  color: var(--kb-mark-blue);
  text-decoration: none;
  cursor: pointer;
}

.kb-login-home:hover {
  color: var(--kb-mark-blue);
  opacity: 0.8;
}

.kb-login-menu {
  display: inline-flex;
  align-items: center;
}

.kb-login-panel {
  width: 230px;
}

.kb-login-account {
  display: block;
  padding: 10px 12px;
}

.kb-login-account-name {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--kb-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-login-account-email, .kb-login-account-provider {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-login-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kb-paper);
  border: var(--kb-rule);
}

.kb-login-who {
  flex: 1;
  min-width: 0;
}

.kb-login-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--kb-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-login-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-login-out {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--kb-red);
  text-decoration: none;
  flex: 0 0 auto;
}

.kb-login-out:hover {
  text-decoration: underline;
}

.kb-login-muted .kb-login-name {
  color: var(--color-text-secondary);
}

a.kb-login-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  text-decoration: none;
  transition: background var(--kb-ease);
}

a.kb-login-btn:hover {
  background: #F8F2E3;
}

.kb-appstatus {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.kb-appstatus .kb-login {
  border-top: 0;
  min-width: 190px;
}

.kb-appstatus .kb-login-in {
  padding: 6px 8px;
}

.kb-login--bar {
  border-top: 0;
}

.kb-login--bar .kb-login-in {
  padding: 6px 8px;
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
}

.kb-login--bar .kb-login-av {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.kb-login--bar .kb-login-mark {
  width: 24px;
  height: 24px;
}

.kb-login--bar .kb-login-name {
  font-size: 12px;
}

.kb-login--bar .kb-login-out {
  font-size: 9px;
}

.kb-panelmenu {
  position: relative;
  flex: 0 0 auto;
}

.kb-panelmenu summary {
  list-style: none;
}

.kb-panelmenu summary::-webkit-details-marker {
  display: none;
}

.kb-appswitch-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--kb-ink);
  background: none;
  border: 0;
  padding: 8px 10px;
}

.kb-appswitch-word {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  color: var(--kb-ink);
}

.kb-appswitch-apps {
  color: var(--color-text-secondary);
}

.kb-appswitch-btn:hover .kb-appswitch-apps {
  color: var(--kb-red);
}

.kb-appswitch-split {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.kb-appswitch-split > .kb-panelmenu {
  position: static;
}

.kb-appswitch-home {
  padding: 0;
  text-decoration: none;
}

.kb-panelmenu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  z-index: 41;
  width: 260px;
  background: var(--color-surface);
  border: var(--kb-rule);
  box-shadow: 4px 4px 0 0 var(--kb-red);
  padding: 8px 0;
}

.kb-appswitch-menu {
  left: 0;
  right: auto;
  width: 320px;
  top: 100%;
  padding: 0;
  box-shadow: 5px 5px 0 0 var(--kb-red);
  height: 360px;
  overflow-y: auto;
}

.kb-appswitch-split .kb-appswitch-menu {
  max-width: calc(100vw - 32px);
}

.kb-panelmenu-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 12px 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.kb-panelmenu-note {
  color: var(--kb-ink);
}

.kb-appswitch-menu .kb-panelmenu-head {
  padding: 11px 15px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface);
}

.kb-appswitch-menu .kb-panelmenu-foot {
  position: sticky;
  bottom: 0;
  background: var(--color-surface);
  border-top: var(--border-width-hairline) solid var(--color-border);
}

.kb-appswitch-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 15px;
  text-decoration: none;
  color: var(--kb-ink);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.kb-appswitch-item:last-child {
  border-bottom: 0;
}

.kb-appswitch-item:hover {
  background: var(--kb-tint);
  text-decoration: none;
}

.kb-appswitch-item.is-active {
  background: var(--color-background-secondary);
}

.kb-appswitch-item.is-off {
  opacity: .55;
}

.kb-appswitch-item .kb-appswitch-glyph {
  margin-top: 3px;
}

.kb-appswitch-glyph {
  width: 13px;
  height: 13px;
}

.kb-appswitch-glyph.kb-glyph--triangle {
  width: 0;
  height: 0;
  border-left: 7.5px solid transparent;
  border-right: 7.5px solid transparent;
  border-bottom: 12px solid var(--kb-yellow);
}

.kb-appswitch-glyph.kb-glyph--slash:before {
  left: 5px;
  top: -1px;
  width: 4px;
  height: 16px;
}

.kb-appswitch-glyph--lg {
  width: 18px;
  height: 18px;
}

.kb-appswitch-glyph--lg.kb-glyph--triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 17px solid var(--kb-yellow);
}

.kb-appswitch-glyph--lg.kb-glyph--slash:before {
  left: 7px;
  top: -1px;
  width: 4px;
  height: 20px;
}

.kb-appswitch-text {
  display: block;
  min-width: 0;
}

.kb-appswitch-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kb-appswitch-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.kb-appswitch-current {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kb-paper);
  background: var(--kb-ink);
  padding: 2px 5px;
}

.kb-appswitch-off {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-left: auto;
}

.kb-appswitch-note {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 2px;
  color: var(--color-text-secondary);
}

.kb-panelmenu-foot {
  display: block;
  padding: 10px 12px 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kb-red);
  border-top: var(--border-width-hairline) solid var(--color-border);
}

.kb-panelmenu-foot:hover {
  background: var(--kb-tint);
}

.kb-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 18px;
}

.kb-foot {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: 18px;
}

.kb-btn--ghost {
  color: var(--kb-ink);
  background: var(--kb-paper);
  box-shadow: var(--kb-offset) var(--kb-offset) 0 0 var(--kb-ink);
}

.kb-btn--ghost:hover {
  box-shadow: 0 0 0 0 var(--kb-ink);
}

.kb-btn--danger {
  background: var(--color-error);
  border-color: var(--color-error);
}

.kb-btn--sm {
  padding: 7px 11px;
  font-size: 13px;
}

.kb-modal {
  width: min(32rem, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  color: var(--kb-ink);
  background: transparent;
  border: 0;
  overflow: visible;
}

.kb-modal::backdrop {
  background: rgba(17, 17, 17, .62);
}

.kb-modal-panel {
  background: var(--kb-paper);
  border: var(--kb-rule);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-offset) var(--kb-offset) 0 0 var(--kb-red);
}

.kb-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: var(--kb-rule);
}

.kb-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: var(--line-height-tight);
}

.kb-modal-close {
  padding: 2px 4px;
  color: var(--kb-ink);
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.kb-modal-body {
  padding: 20px;
  font-family: var(--font-sans);
}

.kb-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: var(--kb-rule);
}

dialog.kb-drawer {
  width: min(420px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  inset: 0;
  margin: 0;
}

dialog.kb-drawer .kb-modal-panel {
  min-height: 100%;
  border-radius: 0;
}

aside.kb-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 40;
  width: min(420px, 100vw);
  margin: 0;
}

aside.kb-drawer .kb-modal-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
}

dialog.kb-drawer--left {
  margin-right: auto;
}

dialog.kb-drawer--right {
  margin-left: auto;
}

aside.kb-drawer--left {
  left: 0;
}

aside.kb-drawer--right {
  right: 0;
}

.kb-confirm .kb-modal-body {
  padding: 0;
}

.kb-confirm-form {
  display: block;
}

.kb-confirm-message {
  padding: 22px;
}

.kb-toast-region {
  position: fixed;
  z-index: 100;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.kb-toast-region--top-left {
  top: 16px;
  left: 16px;
}

.kb-toast-region--top-right {
  top: 16px;
  right: 16px;
}

.kb-toast-region--bottom-left {
  bottom: 16px;
  left: 16px;
}

.kb-toast-region--bottom-right {
  bottom: 16px;
  right: 16px;
}

.kb-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  padding: 13px 14px;
  border: var(--kb-rule);
  border-left-width: 4px;
  background: var(--kb-paper);
  color: var(--kb-ink);
  box-shadow: 4px 4px 0 0 var(--kb-red);
  pointer-events: auto;
}

.kb-toast:not(.is-open) {
  display: none;
}

.kb-toast-message {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
}

.kb-toast-dismiss {
  min-height: 24px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--kb-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
}

.kb-toast--info {
  border-left-color: var(--color-focus);
}

.kb-toast--ok {
  border-left-color: var(--color-success);
}

.kb-toast--warn {
  border-left-color: var(--color-warning);
}

.kb-toast--danger {
  border-left-color: var(--color-error);
}

.kb-toast--neutral {
  border-left-color: var(--color-border);
}

.kb-tooltip-wrap, .kb-popover-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.kb-positioned-overlay {
  position: absolute;
  z-index: 100;
}

.kb-overlay--top {
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
}

.kb-overlay--right {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

.kb-overlay--bottom {
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
}

.kb-overlay--left {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

.kb-tooltip {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  width: max-content;
  max-width: 260px;
  padding: 6px 8px;
  background: var(--kb-ink);
  color: var(--kb-paper);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: var(--line-height-snug);
  box-shadow: var(--shadow-sm);
}

.kb-tooltip-wrap:hover .kb-tooltip, .kb-tooltip-wrap:focus-within .kb-tooltip, .kb-tooltip-wrap.is-open .kb-tooltip {
  visibility: visible;
  opacity: 1;
}

.kb-tooltip-wrap.is-dismissed .kb-tooltip {
  visibility: hidden;
  opacity: 0;
}

.kb-popover {
  display: none;
  width: min(320px, calc(100vw - 32px));
  padding: var(--spacing-md);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--kb-rule);
  box-shadow: 4px 4px 0 0 var(--kb-red);
}

.kb-popover.is-open {
  display: block;
}

.kb-alert {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: var(--line-height-normal);
  padding: 10px 12px;
  margin: 0 0 14px;
  border: var(--kb-rule);
  border-left-width: 4px;
  border-radius: var(--kb-radius);
  color: var(--kb-ink);
  background: var(--kb-paper);
}

.kb-alert--err {
  border-color: var(--color-error);
  background: var(--color-error-light);
}

.kb-alert--ok {
  border-color: var(--color-success);
  background: var(--color-success-light);
}

.kb-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 13.5px;
}

.kb-table caption {
  caption-side: bottom;
  padding: 9px 10px;
  font-size: 12px;
  color: var(--color-text-secondary);
  text-align: start;
}

.kb-table th {
  text-align: left;
  padding: var(--density-cell-y) var(--density-cell-x);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom: var(--kb-rule);
}

.kb-table td {
  text-align: left;
  padding: var(--density-cell-y) var(--density-cell-x);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.kb-table tr:last-child td {
  border-bottom: 0;
}

.kb-table-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.kb-table-sort:hover {
  text-decoration: underline;
}

.kb-table th[aria-sort="ascending"] .kb-table-sort::after {
  content: " asc";
  font-size: 8px;
  letter-spacing: .04em;
}

.kb-table th[aria-sort="descending"] .kb-table-sort::after {
  content: " desc";
  font-size: 8px;
  letter-spacing: .04em;
}

.kb-table-selection {
  width: 36px;
  text-align: center;
}

.kb-table-selection-control {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
}

.kb-table-row--disabled {
  opacity: var(--opacity-dim);
}

.kb-table-cell--start {
  text-align: start;
}

.kb-table-cell--center {
  text-align: center;
}

.kb-table-cell--end {
  text-align: end;
}

.kb-table-window {
  overflow-y: auto;
  overflow-x: hidden;
  border: var(--kb-rule);
  background: var(--kb-paper);
}

.kb-table-window thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--kb-paper);
}

.kb-table-spacer {
  padding: 0;
  border: 0;
}

.kb-table-spacer td {
  padding: 0;
  border: 0;
}

.kb-tail {
  overflow-y: auto;
  overflow-x: hidden;
  border: var(--kb-rule);
  background: var(--kb-paper);
  font-family: var(--font-mono);
  font-size: 12px;
}

.kb-tail-line {
  height: var(--kb-tail-line);
  line-height: var(--kb-tail-line);
  padding: 0 10px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--kb-ink);
}

.kb-tail-line--warn {
  color: var(--color-warning);
}

.kb-tail-line--error {
  color: var(--color-error);
}

.kb-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-md);
}

.kb-pagination--top {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

.kb-pagination-context {
  min-width: 0;
  flex: 1 1 12rem;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
}

.kb-pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  margin-left: auto;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.kb-pagination-position {
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.kb-pagination-input {
  --kb-page-digits: 3;
  width: calc(var(--kb-page-digits) * 1ch + 12px);
  min-width: 48px;
  height: 44px;
  padding: 4px;
  box-sizing: border-box;
  text-align: center;
  font: inherit;
  font-size: 16px;
  appearance: textfield;
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.kb-pagination-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.kb-pagination-input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.kb-pagination-total {
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.kb-pagination .kb-pagination-link {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

.kb-pagination--sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
  background: var(--color-surface);
  padding: var(--spacing-sm) 0;
}

.kb-sc-app:has(.kb-sc-body .kb-pagination--sticky) > .kb-sc-header {
  position: static;
}

.kb-data-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  padding: var(--spacing-md);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
}

.kb-data-toolbar-filters {
  display: flex;
  align-items: end;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.kb-data-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-left: auto;
}

.kb-data-toolbar .kb-btn--block {
  width: auto;
}

.kb-data-toolbar-bulk {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1 0 100%;
  padding-top: var(--spacing-sm);
  border-top: var(--border-width-hairline) solid var(--color-border);
}

.kb-data-toolbar-selection-count {
  margin-right: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-secondary);
}

.kb-data-state {
  padding: var(--spacing-xxl);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
}

.kb-data-state-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
}

.kb-data-state-body {
  margin: var(--spacing-sm) 0 0;
  color: var(--color-text-secondary);
}

.kb-data-state-action {
  margin-top: var(--spacing-lg);
}

.kb-data-state--loading {
  border-style: dashed;
}

.kb-data-state--error {
  border-color: var(--color-error);
}

.kb-progress-control {
  accent-color: var(--color-accent);
  height: var(--spacing-sm);
  width: 100%;
}

.kb-spinner {
  align-items: center;
  display: inline-flex;
  gap: var(--spacing-sm);
}

.kb-spinner-mark {
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  display: inline-block;
  height: var(--spacing-lg);
  width: var(--spacing-lg);
}

.kb-skeleton {
  display: grid;
  gap: var(--spacing-sm);
}

.kb-skeleton-line {
  background: var(--color-background-secondary);
  border-radius: var(--radius-sm);
  display: block;
  height: var(--spacing-md);
  width: 100%;
}

.kb-chip {
  align-items: center;
  background: var(--color-background-secondary);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-full);
  display: inline-flex;
  font-size: var(--font-size-sm);
  gap: var(--spacing-xs);
  line-height: var(--line-height-none);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.kb-chip--removable {
  padding-right: var(--spacing-xs);
}

.kb-chip--removable button {
  background: transparent;
  border: 0;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  padding: var(--spacing-xs);
}

.kb-breadcrumb {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

.kb-breadcrumb__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-breadcrumb__item {
  align-items: center;
  display: inline-flex;
  gap: var(--spacing-xs);
}

.kb-breadcrumb__item + .kb-breadcrumb__item::before {
  color: var(--color-text-secondary);
  content: '/';
}

.kb-breadcrumb__link {
  color: var(--color-text-secondary);
}

.kb-breadcrumb__link:hover {
  color: var(--color-link);
}

.kb-breadcrumb__current {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.kb-accordion {
  display: grid;
  gap: var(--spacing-sm);
}

.kb-accordion__item {
  background: var(--color-background);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.kb-accordion__summary {
  --focus-ring-offset: -2px;
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  gap: var(--spacing-md);
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
}

.kb-accordion__summary::-webkit-details-marker {
  display: none;
}

.kb-accordion__summary::after {
  color: var(--color-accent);
  content: '+';
  font-size: var(--font-size-lg);
}

.kb-accordion__item[open] > .kb-accordion__summary::after {
  content: '-';
}

.kb-accordion__content {
  border-top: var(--border-width-hairline) solid var(--color-border);
  padding: var(--spacing-md) var(--spacing-lg);
}

.kb-theme-toggle {
  background: var(--color-background);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xs) var(--spacing-md);
}

.kb-theme-toggle:hover {
  background: var(--color-background-secondary);
}

.kb-theme-toggle[aria-pressed=true] {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-background);
}

.kb-command-palette__dialog .kb-modal-panel {
  max-width: var(--container-sm);
  width: 100%;
}

.kb-command-palette__combobox .kb-combobox-listbox {
  max-height: 20rem;
  overflow-y: auto;
  position: static;
}

.kb-hotkeys__list {
  display: grid;
  gap: var(--spacing-sm) var(--spacing-lg);
  grid-template-columns: auto 1fr;
  margin: 0;
}

.kb-hotkeys__term {
  margin: 0;
}

.kb-hotkeys__keys {
  background: var(--color-background-secondary);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  white-space: nowrap;
}

.kb-hotkeys__description {
  color: var(--color-text-secondary);
  margin: 0;
}

.kb-tree__list {
  display: grid;
  gap: calc(var(--density-gap) / 4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-tree__branch > .kb-tree__list {
  border-left: var(--border-width-hairline) solid var(--color-border);
  margin-left: var(--spacing-sm);
  padding-left: var(--spacing-md);
}

.kb-tree__summary {
  --focus-ring-offset: -2px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.kb-tree__link, .kb-tree__leaf {
  --focus-ring-offset: -2px;
  color: var(--color-text);
  display: block;
  padding: var(--spacing-xs) var(--spacing-sm);
  text-decoration: none;
}

.kb-tree__leaf {
  color: var(--color-text-secondary);
}

.kb-tree__link:hover {
  background: var(--color-background-secondary);
}

.kb-tree__link[aria-current=page] {
  background: var(--color-text);
  color: var(--color-background);
}

.kb-stepper__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-stepper__step {
  align-items: flex-start;
  display: flex;
  flex: 1 1 12rem;
  gap: var(--spacing-md);
}

.kb-stepper__marker {
  align-items: center;
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-secondary);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  height: var(--spacing-xl);
  justify-content: center;
  width: var(--spacing-xl);
}

.kb-stepper__step[data-state=complete] .kb-stepper__marker {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-background);
}

.kb-stepper__step[data-state=current] .kb-stepper__marker {
  border-color: var(--color-accent);
  border-width: 2px;
  color: var(--color-accent);
}

.kb-stepper__body {
  display: grid;
  gap: var(--spacing-xs);
}

.kb-stepper__label {
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
}

a.kb-stepper__label {
  text-decoration: underline;
}

.kb-stepper__step[data-state=current] .kb-stepper__label {
  color: var(--color-text);
}

.kb-stepper__step[data-state=complete] .kb-stepper__label {
  color: var(--color-text);
}

.kb-stepper__description {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.kb-segmented {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.kb-segmented__item {
  align-items: center;
  background: var(--color-background);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  display: inline-flex;
  gap: var(--spacing-sm);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
}

.kb-segmented__item:hover {
  background: var(--color-background-secondary);
}

.kb-segmented__item[aria-current=page] {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-background);
}

.kb-segmented__count {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.kb-segmented__item[aria-current=page] .kb-segmented__count {
  color: var(--color-background);
}

.kb-segmented--attached {
  gap: 0;
}

.kb-segmented--attached .kb-segmented__item {
  border-radius: 0;
  border-width: 0 1px 0 0;
}

.kb-segmented--attached .kb-segmented__item:last-child {
  border-right-width: 0;
}

.kb-tabs {
  display: grid;
  gap: var(--spacing-lg);
}

.kb-tabs__list {
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  display: flex;
  gap: var(--spacing-lg);
  overflow-x: auto;
}

.kb-tabs__tab {
  border-bottom: var(--border-width-thick) solid transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  margin-bottom: -1px;
  padding: var(--spacing-sm) var(--spacing-xs);
  text-decoration: none;
  white-space: nowrap;
}

.kb-tabs__tab[aria-current=page] {
  border-bottom-color: var(--color-accent);
  color: var(--color-text);
}

.kb-tabs__panel {
  min-width: 0;
}

.kb-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.kb-button-group {
  align-items: stretch;
  display: inline-flex;
  gap: var(--spacing-xs);
}

.kb-icon-button {
  align-items: center;
  background: var(--color-background);
  flex-shrink: 0;
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  height: var(--spacing-xxl);
  justify-content: center;
  padding: 0;
  text-decoration: none;
  width: var(--spacing-xxl);
}

.kb-icon-button:hover {
  background: var(--color-background-secondary);
}

.kb-icon-button:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-dim);
}

.kb-icon-button.kb-icon-button--selected, details[open] > summary.kb-icon-button {
  background: var(--kb-tint);
  box-shadow: inset 0 -3px var(--kb-red);
}

summary.kb-icon-button {
  list-style: none;
}

summary.kb-icon-button::-webkit-details-marker {
  display: none;
}

.kb-diff-view {
  display: grid;
  gap: var(--spacing-xl);
}

.kb-diff-file {
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0;
  overflow: hidden;
}

.kb-diff-file-caption {
  background: var(--color-background-secondary);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  display: flex;
  align-items: baseline;
  gap: var(--spacing-lg);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-md) var(--spacing-lg);
}

.kb-diff-file-path {
  overflow-wrap: anywhere;
}

.kb-diff-file-stat {
  display: inline-flex;
  flex: none;
  gap: var(--spacing-md);
  font-weight: var(--font-weight-normal);
}

.kb-diff-file-stat--added {
  color: var(--color-success);
}

.kb-diff-file-stat--removed {
  color: var(--color-error);
}

.kb-diff-file-content {
  overflow-x: auto;
}

.kb-diff-file-collapsed-body {
  padding: var(--spacing-md) var(--spacing-lg);
}

.kb-diff-file-more {
  display: flex;
  gap: var(--spacing-md);
  margin: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm);
}

.kb-diff-file-collapsed-body > .kb-diff-file-more {
  padding: 0;
}

.kb-diff-file-omitted {
  color: var(--color-text-secondary);
}

.kb-diff-line {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
  min-width: max-content;
  padding: 0 var(--spacing-lg);
  white-space: pre;
}

.kb-diff-line--hunk {
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
}

.kb-diff-line--addition {
  background: var(--color-success-light);
}

.kb-diff-line--deletion {
  background: var(--color-error-light);
}

.kb-description-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border-top: var(--border-width-hairline) solid var(--color-border);
}

@media (min-width: 640px) {
  .kb-description-list--columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-description-list--columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

.kb-description-list-item {
  padding: var(--density-block-y) var(--density-block-x);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.kb-description-list-term {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.kb-description-list-value {
  margin: var(--spacing-xs) 0 0;
}

.kb-stat-grid {
  display: grid;
  gap: var(--spacing-md);
}

@media (min-width: 640px) {
  .kb-stat-grid--columns-2, .kb-stat-grid--columns-3, .kb-stat-grid--columns-4, .kb-stat-grid--columns-5, .kb-stat-grid--columns-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 1024px) {
  .kb-stat-grid--columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kb-stat-grid--columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kb-stat-grid--columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .kb-stat-grid--columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

}

.kb-stat-card {
  padding: var(--spacing-lg);
  border: var(--border-width-hairline) solid var(--color-border);
  margin: 0;
  background: var(--color-surface);
}

.kb-stat-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.kb-stat-card-value {
  margin: var(--spacing-sm) 0 0;
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-none);
}

.kb-stat-card-detail {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.kb-chart-frame {
  margin: 0;
}

.kb-chart-frame-caption {
  display: grid;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.kb-chart-frame-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
}

.kb-chart-frame-description {
  color: var(--color-text-secondary);
  margin: 0;
}

.kb-chart-frame-plot {
  max-width: 100%;
  overflow-x: auto;
}

.kb-chart-frame-plot svg {
  display: block;
  height: auto;
  max-width: 100%;
}

.kb-chart-frame-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.kb-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.kb-list li {
  padding: 11px 0;
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.kb-list li:last-child {
  border-bottom: 0;
}

.kb-list .kb-list-name {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--kb-ink);
}

.kb-list .kb-list-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

.kb-codes {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: var(--line-height-relaxed);
  word-break: break-all;
  color: var(--kb-ink);
  background: var(--kb-tint);
  border: var(--kb-rule);
  border-radius: var(--kb-radius);
  padding: 12px 14px;
}

.kb-codes ol {
  margin: 0;
  padding-left: 1.4em;
}

.kb-qr {
  display: block;
  margin: 6px auto 12px;
  max-width: 200px;
}

.kb-account-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 20px;
}

.kb-sc-sq {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}

.kb-sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: var(--kb-rule);
  padding: 4px 10px;
}

.kb-sc-badge-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--kb-ink);
}

.kb-sc-meta {
  display: grid;
  border: var(--kb-rule);
  background: var(--kb-paper);
  margin-bottom: 30px;
  box-shadow: var(--kb-offset) var(--kb-offset) 0 0 var(--color-border);
}

.kb-sc-meta-cell {
  padding: 16px 18px;
  border-right: var(--border-width-hairline) solid var(--color-border);
  border-top: var(--border-width-hairline) solid var(--color-border);
}

.kb-sc-meta-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.kb-sc-meta-v {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--kb-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.kb-sc-sec {
  margin: 0;
}

.kb-sc-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 14px;
}

.kb-sc-sec-t {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--kb-ink);
  white-space: nowrap;
}

.kb-sc-sec-bar {
  height: 1.5px;
  background: var(--kb-ink);
  flex: 1;
}

.kb-sc-prose {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

.kb-sc-content {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

.kb-sc-content pre {
  background: var(--kb-tint);
  padding: .8rem;
  overflow: auto;
}

.kb-sc-content code {
  font-family: var(--font-mono);
  font-size: .9em;
}

.kb-sc-content table {
  border-collapse: collapse;
}

.kb-sc-content th {
  border: var(--border-width-hairline) solid var(--color-border);
  padding: .3rem .6rem;
}

.kb-sc-content td {
  border: var(--border-width-hairline) solid var(--color-border);
  padding: .3rem .6rem;
}

.kb-sc-xref {
  border-top: var(--kb-rule);
  margin-bottom: 8px;
}

.kb-sc-xref-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 4px;
  border-bottom: var(--border-width-hairline) solid var(--color-border-light);
  cursor: pointer;
  text-decoration: none;
}

.kb-sc-xref-row:hover {
  background: var(--kb-tint);
}

.kb-sc-xref-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-link);
  flex: 0 0 auto;
  width: 96px;
}

.kb-sc-xref-t {
  flex: 1;
  font-size: 14px;
  color: var(--kb-ink);
  line-height: var(--line-height-snug);
}

.kb-sc-xref-s {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  flex: 0 0 auto;
}

.kb-sc-detail {
  max-width: var(--container-md);
}

.kb-sc-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 8px 6px 0;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.kb-sc-back:hover {
  color: var(--kb-ink);
}

.kb-sc-detail-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.kb-sc-detail-id {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-link);
}

.kb-sc-detail-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.12;
  margin: 0 0 24px;
  color: var(--kb-ink);
}

.kb-sc-list-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0 0 6px;
  color: var(--kb-ink);
}

.kb-sc-list-lead {
  font-size: 15px;
  color: var(--color-text-secondary);
  margin: 0 0 24px;
}

.kb-sc-list-rows {
  border-top: var(--kb-rule);
}

.kb-sc-list-empty {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-style: italic;
  padding: 18px 2px;
}

.kb-sc-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 4px;
  border-bottom: var(--border-width-hairline) solid var(--color-border-light);
  text-decoration: none;
  cursor: pointer;
}

.kb-sc-row:hover {
  background: var(--kb-tint);
}

.kb-sc-row-main {
  flex: 1;
  min-width: 0;
}

.kb-sc-row-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--kb-ink);
  line-height: 1.3;
}

.kb-sc-row-sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.kb-sc-row-trail {
  flex: 0 0 auto;
}

.kb-sc-card {
  border: var(--kb-rule);
  background: var(--kb-paper);
  box-shadow: var(--kb-offset) var(--kb-offset) 0 0 var(--kb-red);
  padding: 18px 20px;
}

.kb-sc-card.is-flat {
  box-shadow: none;
}

.kb-sc-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.kb-sc-card-t {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--kb-ink);
}

.kb-sc-card-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: var(--border-width-hairline) solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
}

.kb-sc-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--color-background);
}

.kb-sc-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
  border-bottom: var(--kb-rule);
  background: var(--color-background);
  padding: 13px 32px 13px 20px;
}

.kb-sc-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  text-decoration: none;
}

.kb-sc-logo:hover {
  text-decoration: none;
}

.kb-sc-logo-mark {
  width: 25px;
  height: 25px;
  display: block;
  flex: 0 0 auto;
}

.kb-sc-logo-word {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--line-height-none);
  color: var(--kb-ink);
  margin-left: 3px;
}

.kb-sc-grow {
  flex: 1;
}

.kb-sc-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.kb-sc-side {
  width: 198px;
  flex: 0 0 198px;
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kb-sc-region {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kb-sc-scroll {
  flex: 1;
  overflow-y: auto;
}

.kb-sc-main {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 36px 32px 80px;
}

.kb-sc-main--wide {
  max-width: none;
  padding: 20px 24px 60px;
}

.kb-sc-app--page-scroll {
  overflow-y: auto;
}

.kb-sc-app--page-scroll > .kb-sc-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

.kb-sc-app--page-scroll > .kb-sc-body {
  flex: 1 0 auto;
  overflow: visible;
}

.kb-sc-app--page-scroll .kb-sc-region, .kb-sc-app--page-scroll .kb-sc-scroll {
  overflow: visible;
}

.kb-sc-header--measured {
  padding: 13px 0;
  gap: 0;
}

.kb-sc-header-measure {
  --kb-sc-header-gutter: 32px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  min-width: 0;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--kb-sc-header-gutter);
}

.kb-sc-header-measure--wide {
  max-width: none;
  --kb-sc-header-gutter: 24px;
}

.kb-sc-compact-nav {
  display: none;
}

@media (max-width: 768px) {
  .kb-sc-header-measure {
    --kb-sc-header-gutter: 16px;
    gap: var(--spacing-sm);
  }

  .kb-sc-app--compact-nav .kb-sc-body > .kb-sc-side {
    display: none;
  }

  .kb-sc-app--compact-nav .kb-sc-main {
    padding: 20px 16px 48px;
  }

  .kb-sc-compact-nav {
    display: block;
    margin-bottom: 24px;
    border-bottom: var(--kb-rule);
  }

  .kb-sc-compact-nav > summary {
    cursor: pointer;
    padding: 12px 0;
    font-family: var(--font-display);
    font-weight: 600;
  }

  .kb-sc-compact-nav > .kb-sc-side {
    width: 100%;
    overflow: visible;
    padding-bottom: 16px;
  }

}

.kb-sc-header-trail {
  margin-right: max(0px, calc((100vw - 198px - var(--container-lg)) / 2));
}

.kb-table-frame {
  display: flex;
  flex-direction: column;
}

.kb-table-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 12px;
}

.kb-table-title {
  margin: 0;
  flex: 0 0 auto;
}

.kb-table-bar-spacer {
  flex: 1 1 auto;
}

.kb-table-actions {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.kb-sc-nav-group {
  padding: 0 16px;
  margin: 14px 0 5px;
}

.kb-sc-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  padding: 8px 16px 8px 13px;
  border-left: var(--border-width-thick) solid transparent;
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
}

.kb-sc-nav-item:hover {
  background: var(--kb-tint);
  text-decoration: none;
}

.kb-sc-nav-item.is-active {
  background: var(--kb-ink);
  color: var(--color-background);
  font-weight: 600;
  border-left-color: var(--color-accent);
}

.kb-sc-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-sc-nav-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  padding: 3px 6px;
  background: transparent;
  color: var(--color-text-secondary);
  border: var(--border-width-hairline) solid var(--color-border);
}

.kb-sc-nav-badge.is-alert {
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
}

.mirror-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  min-width: 0;
  max-width: 100%;
}

.mirror-work > * {
  min-width: 0;
}

.mirror-work h1, .mirror-work h2 {
  margin: 0 0 12px;
}

.mirror-work p {
  max-width: 85ch;
}

.mirror-actions, .mirror-job-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.mirror-work .mirror-search-entry, .mirror-work .mirror-search-entry-field {
  min-width: 0;
  max-width: 100%;
}

.mirror-work .mirror-search-entry-field {
  flex: 1;
}

.mirror-work pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 90ch;
  padding: 12px;
  background: var(--color-background-secondary);
}

.mirror-work details {
  margin: 8px 0;
}

.mirror-work summary {
  cursor: pointer;
}

.mirror-muted {
  color: var(--color-text-secondary);
}

.mirror-alert {
  padding: 16px;
  border-left: 4px solid var(--kb-red);
  background: var(--color-background-secondary);
}

.mirror-table {
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
}

.asset-grid-thumbnails {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 16px;
}

.asset-grid-thumbnails .asset-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.asset-grid-thumbnails .asset-thumb-link {
  display: block;
  line-height: 0;
}

.asset-grid-thumbnails .asset-thumb-link img {
  width: 100%;
  height: auto;
  min-height: 160px;
  object-fit: contain;
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
}

.asset-grid-thumbnails .asset-cell-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}

.asset-grid-thumbnails .asset-cell-meta .index {
  color: var(--color-text-secondary);
}

.asset-grid-thumbnails .asset-original-link {
  text-decoration: none;
}

.mirror-reader-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .25rem .75rem;
  border: var(--border-width-hairline) solid currentColor;
  text-decoration: none;
  touch-action: manipulation;
}

.mirror-source-header {
  margin: 0 0 1rem;
}

.mirror-trail {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  font-size: .85rem;
}

.mirror-trail-sep {
  opacity: var(--opacity-muted);
}

.mirror-back {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-inline-start: auto;
  min-height: 44px;
  padding: 0 .5rem;
  text-decoration: none;
}

.mirror-back-context {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.mirror-source-title {
  margin: .35rem 0 .3rem;
  overflow-wrap: anywhere;
}

.mirror-header-facts, .mirror-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
}

.mirror-fact {
  display: inline-flex;
  align-items: flex-start;
  gap: .35rem;
  min-width: 0;
}

.mirror-fact-value {
  overflow-wrap: anywhere;
}

.mirror-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: .35rem 0;
}

.mirror-act-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  padding-inline-end: .5rem;
  border-inline-end: var(--border-width-hairline) solid var(--color-border);
}

.mirror-act-group:last-child {
  border-inline-end: 0;
}

.mirror-act-group form {
  display: contents;
}

.mirror-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .6rem;
  background: none;
  border: var(--border-width-hairline) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  list-style: none;
}

.mirror-act:hover, .mirror-act:focus-visible {
  border-color: currentColor;
}

.mirror-act[disabled], .mirror-act[aria-disabled=true] {
  opacity: var(--opacity-dim);
  cursor: not-allowed;
}

.mirror-act--primary {
  border-color: currentColor;
  font-weight: var(--font-weight-semibold);
}

.mirror-act-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.mirror-advanced summary::-webkit-details-marker {
  display: none;
}

.mirror-advanced-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem 0;
}

.mirror-note[open] {
  display: block;
  width: 100%;
}

.mirror-note textarea {
  width: 100%;
  min-height: 4rem;
}

.mirror-disclosure summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  cursor: pointer;
}

.mirror-disclosure-label {
  font-weight: var(--font-weight-semibold);
}

.mirror-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.mirror-scroll table {
  min-width: 100%;
}

.mirror-state {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

@media (hover: none) {
  .mirror-act-name {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }

}

@media (max-width: 640px) {
  .mirror-back {
    margin-inline-start: 0;
  }

  .mirror-act-group {
    border-inline-end: 0;
    border-bottom: var(--border-width-hairline) solid var(--color-border);
    width: 100%;
    padding-bottom: .35rem;
  }

}

.facsimile-prep {
  max-width: 1400px;
  margin: auto;
}

.facsimile-prep h1 {
  font-size: 2rem;
}

.facsimile-prep h2 {
  font-size: 1.35rem;
}

.facsimile-prep.is-editing > h1 {
  font-size: 1.5rem;
  margin: .5rem 0;
}

.facsimile-prep.is-editing > p {
  margin: .5rem 0;
}

.facsimile-prep label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .9rem;
}

.facsimile-prep input, .facsimile-prep select, .facsimile-prep textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  padding: .5rem;
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}

.facsimile-prep .prep-tools form {
  display: grid;
  gap: .6rem;
  align-content: start;
}

.facsimile-prep details {
  margin: 1.25rem 0;
  padding: 1rem 0;
  border-top: var(--border-width-hairline) solid var(--color-border);
  scroll-margin-top: 5rem;
}

.facsimile-prep summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.35rem;
  min-height: 44px;
}

.facsimile-prep fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  border: var(--border-width-hairline) solid var(--color-border);
  padding: 1rem;
}

.prep-steps {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.mirror-prep-rail ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
}

.mirror-prep-rail li {
  border: var(--border-width-hairline) solid var(--color-border);
  padding: .5rem;
  min-width: 0;
}

.mirror-prep-rail li.excluded {
  opacity: var(--opacity-muted);
}

.mirror-prep-rail img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: var(--color-surface);
}

.mirror-prep-rail a {
  display: block;
}

.mirror-prep-rail form {
  margin: .4rem 0;
}

.prep-page-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.prep-editor-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1.5rem;
}

.prep-operations ol {
  padding-left: 1.5rem;
}

.prep-operations li {
  padding: .5rem;
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.prep-operations li.selected {
  background: var(--color-surface);
  border-left: var(--border-width-thick) solid var(--color-accent);
}

.prep-operations .prep-page-actions {
  justify-content: flex-start;
}

.prep-page-editor .mirror-prep-current-page > form {
  padding: 1rem;
  border: var(--border-width-hairline) solid var(--color-border);
  margin-bottom: 1rem;
}

.prep-page-editor .mirror-prep-crop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  align-items: end;
}

.mirror-prep-crop > h2, .mirror-prep-crop > p {
  grid-column: 1 / -1;
  margin: 0;
}

.mirror-prep-crop > button {
  grid-column: 1 / -1;
  justify-self: start;
}

.mirror-prep-crop input {
  width: 100%;
}

.mirror-prep-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.mirror-prep-comparison figure {
  margin: 0;
  min-width: 0;
}

.mirror-prep-comparison img {
  width: 100%;
  height: auto;
  display: block;
}

.mirror-prep-comparison figcaption {
  line-height: 1.5;
  margin-bottom: .5rem;
}

.prep-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.mirror-prep-edition, .mirror-prep-cover {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.mirror-prep-edition h2, .mirror-prep-edition details, .mirror-prep-cover h2, .mirror-prep-cover > p, .mirror-prep-cover fieldset {
  grid-column: 1 / -1;
}

.mirror-prep-cover-preview svg {
  display: block;
  width: min(100%, 520px);
  height: auto;
}

.prep-build {
  border-top: var(--border-width-focus) solid var(--color-text);
  margin: 1.5rem 0;
  padding-top: 1rem;
  scroll-margin-top: 5rem;
}

.prep-build pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prep-build form {
  display: inline-block;
  margin: .5rem 1rem .5rem 0;
}

.prep-error {
  border-left: 4px solid var(--color-error);
  padding: 1rem;
  background: var(--color-surface);
}

@media (max-width: 640px) {
  .prep-editor-layout {
    grid-template-columns: 1fr;
  }

  .mirror-prep-comparison {
    grid-template-columns: 1fr;
  }

  .prep-tools {
    grid-template-columns: 1fr;
  }

  .mirror-prep-rail ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mirror-prep-rail img {
    height: 100px;
  }

}

.mirror-page-viewer {
  min-width: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mirror-page-viewer .page-viewer-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.mirror-page-viewer .page-viewer-image {
  position: relative;
  margin: 0;
  line-height: 0;
}

.mirror-page-viewer > .page-viewer-image {
  --page-ratio: .707;
  margin-inline: auto;
  max-width: 70rem;
  width: min(100%, calc((100svh - 12rem) * var(--page-ratio)));
}

.mirror-page-viewer .reader-original {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: .5rem;
  touch-action: manipulation;
}

@media (max-width: 768px) {
  .mirror-page-viewer .page-viewer-comparison {
    grid-template-columns: minmax(0, 1fr);
  }

}

.mirror-page-viewer .page-viewer-image img {
  width: 100%;
  height: auto;
  display: block;
}

.mirror-page-viewer .page-viewer-image figcaption {
  line-height: 1.4;
  margin-top: .5rem;
}

.mirror-page-viewer .confidence-heatmap, .mirror-page-viewer .ocr-text-layer {
  position: absolute;
  inset: 0;
}

.mirror-page-viewer .source-region {
  position: absolute;
  box-sizing: border-box;
  border: var(--border-width-hairline) solid var(--color-success);
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: var(--color-text);
  font-size: 10px;
  line-height: 1;
  overflow: hidden;
}

.mirror-page-viewer .source-region.low-confidence {
  border-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 28%, transparent);
}

.mirror-page-viewer .page-recognition svg {
  width: 100%;
  height: auto;
}

.mirror-page-viewer .recognition-summary {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.mirror-page-viewer .ocr-word {
  position: absolute;
  box-sizing: border-box;
  border: var(--border-width-hairline) solid color-mix(in srgb, var(--color-info) 55%, transparent);
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  color: var(--color-text);
  font-size: 9px;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
}

.mirror-page-viewer .ocr-word.low-confidence {
  border-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 20%, transparent);
}

.mirror-page-viewer .page-text pre {
  white-space: pre-wrap;
  font-size: 12px;
  max-height: 24em;
  overflow-y: auto;
  margin: 0;
}

.correction-workbench .comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.correction-workbench .scan {
  position: relative;
  line-height: 0;
}

.correction-workbench .scan img {
  width: 100%;
  height: auto;
  display: block;
}

.correction-workbench .confidence-heatmap {
  position: absolute;
  inset: 0;
}

.correction-workbench .midi-region-selection {
  position: absolute;
  z-index: 2;
  border: var(--border-width-focus) dashed var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  pointer-events: none;
}

.correction-workbench .source-region {
  position: absolute;
  box-sizing: border-box;
  border: var(--border-width-focus) solid var(--color-error);
  background: var(--color-warning);
  color: var(--color-text);
  font-size: 10px;
  line-height: 1;
  overflow: hidden;
}

.correction-workbench [data-selected] {
  outline: var(--border-width-thick) solid var(--color-accent);
  outline-offset: 2px;
}

.correction-workbench .bar-residual-strip {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .75rem 0;
}

.correction-workbench .bar-residual {
  display: grid;
  gap: .2rem;
  min-width: 8rem;
  text-align: left;
}

.correction-workbench .bar-mse {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.correction-workbench .engraving svg {
  width: 100%;
  height: auto;
}

.cr-muted {
  color: var(--color-text-secondary);
}

.cr-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cr-toolbar > .cr-count {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cr-drawer {
  position: relative;
}

.cr-drawer-body {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  width: min(640px, 80vw);
  max-height: 70vh;
  overflow: auto;
  padding: 16px;
  border: var(--kb-rule);
  background: var(--kb-paper);
  box-shadow: 4px 4px 0 var(--kb-ink);
}

.cr-filters {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
  margin: 0;
}

.cr-filter {
  min-width: 160px;
}

.cr-filters button {
  margin-bottom: 0;
}

.cr-queue {
  max-height: 64vh;
  overflow: auto;
}

.cr-queue h2, .cr-queue h3 {
  font-size: var(--font-size-sm);
  margin: 16px 0 8px;
}

.cr-queue-file {
  overflow-wrap: anywhere;
}

.cr-queue ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cr-queue a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  color: var(--kb-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.cr-queue a:hover, .cr-queue a[aria-current=page] {
  background: var(--kb-tint);
}

.cr-count {
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.cr-file {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-right: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.cr-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46vw;
}

.cr-source {
  border-top: var(--kb-rule);
  border-bottom: var(--kb-rule);
  margin: 8px 0;
  max-height: calc(100vh - 300px);
  min-height: 180px;
  overflow: auto;
  padding: 8px 0;
  background: var(--kb-paper);
}

.cr-source pre {
  margin: 0;
  white-space: pre;
  tab-size: 2;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
}

.cr-source table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
}

.cr-source td {
  border: 0;
  padding: 1px 8px;
  vertical-align: top;
  line-height: 1.7;
}

.cr-source tr {
  scroll-margin-top: 100px;
  scroll-margin-bottom: 180px;
}

.cr-source td:last-child {
  width: 100%;
}

.cr-source code {
  white-space: pre;
  background: none;
  padding: 0;
  font-size: 12px;
}

.cr-source .cr-line-number {
  color: var(--color-text-secondary);
  text-align: right;
  user-select: none;
}

.cr-source .cr-line-number a {
  color: inherit;
  text-decoration: none;
}

.cr-source .cr-review-line {
  background: var(--kb-tint);
  box-shadow: inset 3px 0 var(--kb-red);
}

.cr-source .cr-blame {
  min-width: 210px;
  max-width: 260px;
  color: var(--color-text-secondary);
  font-size: 10px;
}

.cr-blame span {
  display: block;
  overflow-wrap: anywhere;
}

.cr-source-tools {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0;
}

.cr-related {
  margin: 0;
}

.cr-related .cr-drawer-body {
  left: auto;
  right: 0;
}

.cr-related ul {
  padding-left: 20px;
}

.cr-related li {
  margin: 6px 0;
  overflow-wrap: anywhere;
}

.cr-related small {
  display: block;
  color: var(--color-text-secondary);
}

.cr-source-search {
  display: flex;
  gap: 8px;
  align-items: end;
  margin: 12px 0;
  flex-wrap: wrap;
}

.cr-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.cr-note {
  max-width: 620px;
  margin: 12px 0;
}

.cr-qualifying .cr-source {
  max-height: calc(100vh - 440px);
}

.cr-qualified-icon {
  display: inline-flex;
  position: relative;
  padding: 3px;
}

.cr-qualified-mark {
  display: inline-flex;
  position: absolute;
  right: -6px;
  bottom: -5px;
  background: var(--kb-paper);
}

.cr-history {
  margin-top: 8px;
}

.cr-history ol {
  padding-left: 20px;
}

.cr-history li {
  margin: 12px 0;
}

.cr-history p {
  white-space: pre-wrap;
}

.cr-message {
  padding: 12px;
  border-left: 3px solid var(--kb-red);
  background: var(--kb-tint);
  margin: 16px 0;
}

.cr-empty {
  padding: 36px 16px;
  border-top: var(--kb-rule);
}

.cr-status {
  display: flex;
  align-items: center;
  margin-right: auto;
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .cr-source-tools {
    gap: 2px;
  }

  .cr-file {
    flex-basis: 100%;
    margin-bottom: 4px;
  }

  .cr-file span {
    max-width: 80vw;
  }

}

body.op-page, html:has(body.op-page) {
  margin: 0;
  padding: 0;
  height: 100%;
}

body.op-page * {
  box-sizing: border-box;
}

.op-appstatus {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

div.op-login {
  min-width: 190px;
}

@media (max-width: 768px) {
  .op-appstatus--measured {
    min-width: 0;
  }

  .op-appstatus--measured > div {
    min-width: 0;
    max-width: 100%;
  }

  .op-appstatus--measured .op-login {
    min-width: 0;
  }

}

.op-app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--kb-paper);
  color: var(--kb-ink);
  font-family: var(--font-sans);
}

.op-sidebar {
  width: 264px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-background-secondary);
}

.op-appswitch-seat {
  flex: 0 0 auto;
}

.op-appbtn {
  height: 62px;
  width: 100%;
  padding: 0 20px;
  border-bottom: var(--kb-rule);
}

.op-appbtn-word {
  font-size: 22px;
}

.op-appbtn-apps {
  margin-left: auto;
}

.op-nav {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 18px 0 8px;
  display: flex;
  flex-direction: column;
  border-right: var(--kb-rule);
}

.op-nav-group {
  padding: 20px 16px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.op-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--kb-ink);
  text-decoration: none;
}

.op-nav-item:hover {
  background: var(--kb-tint);
  color: var(--kb-ink);
  text-decoration: none;
}

.op-nav-item.is-active, .op-nav-item.is-active:hover {
  background: var(--kb-ink);
  color: var(--kb-paper);
  font-weight: 600;
  border-left: var(--border-width-thick) solid var(--kb-red);
  padding-left: 13px;
}

.op-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-nav-badge {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  background: var(--kb-red);
  color: var(--kb-paper);
}

.op-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.op-masthead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 62px;
  padding: 0 24px;
  border-bottom: var(--kb-rule);
  background: var(--kb-paper);
}

.op-masthead-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1080px;
}

.op-grow {
  flex: 1;
}

.op-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0 24px 40px;
}

.op-inner {
  max-width: 1080px;
}