:root {
  color-scheme: light dark;
  font-family: Inter, "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Yu Gothic UI", Meiryo,
    "Microsoft YaHei", "Microsoft JhengHei", "Noto Sans CJK SC", "Noto Sans CJK TC",
    "Noto Sans CJK JP", "Noto Sans CJK KR", "DejaVu Sans", system-ui, "Apple Color Emoji",
    "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1.55;
  font-synthesis: none;
  --kr-paper: #f6f8fa;
  --kr-surface: #ffffff;
  --kr-surface-muted: #edf2f6;
  --kr-ink: #17202a;
  --kr-muted: #667085;
  --kr-border: #d7dee8;
  --kr-blue: #1f5d8c;
  --kr-navy: #102033;
  --kr-cyan: #2ea7c9;
  --kr-green: #4e8a5a;
  --kr-red: #b6423c;
  --kr-heading: #102033;
  --kr-primary-bg: #102033;
  --kr-primary-fg: #ffffff;
  --kr-on-dark: #ffffff;
  --kr-focus: #1f5d8c;
  --kr-divider: var(--kr-border);
  --kr-shadow-content: 0 1px 2px rgb(16 32 51 / 0.04);
  --kr-shadow-glass: 0 12px 32px rgb(16 32 51 / 0.12);
  --kr-shadow-overlay: 0 24px 64px rgb(16 32 51 / 0.2);
  --kr-shadow: var(--kr-shadow-content);
  --kr-glass-regular-bg: color-mix(in srgb, var(--kr-surface) 86%, transparent);
  --kr-glass-clear-bg: color-mix(in srgb, var(--kr-surface) 72%, transparent);
  --kr-glass-solid-bg: var(--kr-surface);
  --kr-glass-border: color-mix(in srgb, var(--kr-border) 76%, transparent);
  --kr-glass-filter: blur(18px) saturate(1.08);
  --kr-radius-sm: 4px;
  --kr-radius: 8px;
  --kr-sidebar-width: 14.5rem;
  --kr-content-width: 78rem;
  --kr-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { min-width: 20rem; background: var(--kr-paper); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--kr-ink);
  background-color: var(--kr-paper);
  background-image:
    linear-gradient(rgb(31 93 140 / 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgb(31 93 140 / 0.018) 1px, transparent 1px);
  background-size: 96px 96px;
}

body[data-kr-audience="public"] { --kr-boundary-label: "Öffentlich"; }
body[data-kr-audience="participant"] { --kr-boundary-label: "Teilnehmerbereich"; }
body[data-kr-audience="administration"] { --kr-boundary-label: "Administration"; }

button, input, select, textarea { font: inherit; }

button,
[role="button"],
a,
label[for] { touch-action: manipulation; }

button,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea { min-height: 44px; }

a { color: var(--kr-blue); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.12em; }

h1, h2, h3, h4, p, li, dt, dd, summary, legend {
  overflow-wrap: anywhere;
}

h1, h2, h3, h4 {
  color: var(--kr-heading);
  line-height: 1.15;
  text-wrap: balance;
}

:focus-visible {
  outline: 3px solid var(--kr-focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  inset: 0 auto auto 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 0 0 var(--kr-radius-sm) var(--kr-radius-sm);
  color: var(--kr-on-dark);
  background: color-mix(in srgb, var(--kr-navy) 96%, transparent);
  backdrop-filter: var(--kr-glass-filter);
  font-weight: 750;
  transform: translateY(-120%);
}

.skip-link:focus { transform: translateY(0); }

.kr-shell {
  display: grid;
  grid-template-columns: var(--kr-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.kr-sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 100vh;
  max-height: 100vh;
  flex-direction: column;
  padding: 1.35rem 1rem;
  overflow-y: auto;
  border-inline-end: 1px solid rgb(255 255 255 / 0.12);
  color: var(--kr-on-dark);
  background: var(--kr-navy);
}

.kr-brand {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  min-height: 3.4rem;
  padding: 0.3rem 0.45rem;
  color: var(--kr-on-dark);
  text-decoration: none;
}

.kr-topbar a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
}

.kr-brand-mark {
  display: grid;
  width: 2.6rem;
  height: 2.75rem;
  place-items: center;
  overflow: hidden;
  border-radius: var(--kr-radius-sm);
  background: var(--kr-surface);
}

.kr-brand-mark svg {
  width: 2.8rem;
  height: 2.8rem;
}

.kr-product-name { display: block; font-size: 0.98rem; letter-spacing: 0.01em; }
.kr-product-context { display: block; color: rgb(255 255 255 / 0.68); font-size: 0.72rem; }

.kr-primary-nav {
  display: grid;
  gap: 0.28rem;
  margin-top: 2.2rem;
}

.kr-primary-nav a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  min-width: 44px;
  min-height: 2.8rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--kr-radius-sm);
  color: rgb(255 255 255 / 0.7);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
}

.kr-primary-nav a::before {
  display: none;
  color: var(--kr-blue);
  font-family: var(--kr-mono);
  font-size: 0.68rem;
  content: attr(data-index);
}

.kr-primary-nav a:hover { color: var(--kr-on-dark); background: rgb(255 255 255 / 0.08); }

.kr-primary-nav a[aria-current="page"] {
  color: var(--kr-on-dark);
  background: rgb(255 255 255 / 0.12);
}

.kr-live-link { align-content: center; }

.kr-live-indicator {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  color: rgb(255 255 255 / 0.72);
  font-family: var(--kr-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.kr-live-indicator::before {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border: 1px solid rgb(255 255 255 / 0.75);
  border-radius: var(--kr-radius-sm);
  background: var(--kr-green);
  content: "";
}

.kr-primary-nav a[aria-current="page"]::after {
  position: absolute;
  inset: 0 auto 0 -1rem;
  width: 3px;
  background: var(--kr-blue);
  content: "";
}

.kr-sidebar-note {
  margin: auto 0.45rem 0;
  padding-top: 1.5rem;
  color: rgb(255 255 255 / 0.58);
  font-family: var(--kr-mono);
  font-size: 0.66rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.kr-boundary-badge {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-sm);
  color: var(--kr-muted);
  font-family: var(--kr-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kr-workspace { min-width: 0; }

.kr-topbar {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem clamp(1.25rem, 3vw, 3rem);
  border-bottom: 1px solid var(--kr-glass-border);
  background: var(--kr-glass-regular-bg);
  backdrop-filter: var(--kr-glass-filter);
}

.kr-topbar-title { margin: 0; color: var(--kr-muted); font-size: 0.82rem; }
.kr-topbar a { color: var(--kr-ink); font-size: 0.82rem; font-weight: 700; }

.kr-page {
  width: min(100%, var(--kr-content-width));
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4.75rem) clamp(1.25rem, 4vw, 4rem) 5rem;
}

.kr-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.kr-page-meta {
  margin: 0 0 0.7rem;
  color: var(--kr-blue);
  font-family: var(--kr-mono);
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kr-page h1 {
  max-width: 18ch;
  margin: 0;
  font-size: 2.85rem;
}

.kr-lead {
  max-width: 46rem;
  margin: 1rem 0 0;
  color: var(--kr-muted);
  font-size: 1.08rem;
}

.kr-section-head {
  display: flex;
  gap: 1rem;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--kr-border);
}

.kr-section-head h2 { margin: 0; font-size: 1.55rem; }

.kr-status {
  min-height: 1.6em;
  margin: 0 0 1rem;
  color: var(--kr-muted);
  font-size: 0.88rem;
}

.kr-card {
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius);
  background: var(--kr-surface);
}

.kr-button,
button.kr-button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border: 1px solid var(--kr-primary-bg);
  border-radius: var(--kr-radius-sm);
  color: var(--kr-primary-fg);
  background: var(--kr-primary-bg);
  font: inherit;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.kr-button-secondary,
button.kr-button-secondary {
  color: var(--kr-blue);
  border-color: var(--kr-border);
  background: transparent;
}

.kr-button:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.kr-button,
button { transition: transform 100ms ease-out; }
.kr-button:active,
button:active { transform: translateY(1px); }
.kr-button:disabled { cursor: wait; opacity: 0.62; }

.kr-progress,
progress {
  width: 100%;
  min-height: 0.65rem;
  accent-color: var(--kr-blue);
}

.kr-mono { font-family: var(--kr-mono); }

@media (max-width: 64rem) {
  .kr-shell { grid-template-columns: 1fr; }
  .kr-sidebar {
    position: relative;
    display: grid;
    min-height: auto;
    max-height: none;
    grid-template-columns: minmax(11rem, auto) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1.25rem;
    overflow: visible;
    border-inline-end: 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
  }
  .kr-brand { max-width: 14rem; }
  .kr-primary-nav {
    display: flex;
    justify-content: flex-start;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }
  .kr-primary-nav a {
    flex: 0 0 auto;
    padding-inline: 0.75rem;
    scroll-snap-align: start;
    text-align: center;
    white-space: nowrap;
  }
  .kr-live-link { grid-template-columns: auto auto; }
  .kr-live-indicator { font-size: 0; }
  .kr-primary-nav a::before, .kr-sidebar-note { display: none; }
  .kr-primary-nav a[aria-current="page"]::after {
    inset: auto 0 -0.75rem;
    width: auto;
    height: 3px;
  }
}

@media (max-width: 40rem) {
  .kr-sidebar { grid-template-columns: 1fr; gap: 0.5rem; padding: 0.65rem 1rem 0.75rem; background: var(--kr-navy); backdrop-filter: none; }
  .kr-brand { grid-template-columns: 2.2rem 1fr; min-height: 44px; padding: 0; }
  .kr-brand-mark { width: 2rem; height: 2.2rem; }
  .kr-brand-mark svg { width: 2.2rem; height: 2.2rem; }
  .kr-primary-nav {
    position: static;
    display: flex;
    gap: 0.25rem;
    padding: 0.35rem 0 0;
    border-top: 1px solid rgb(255 255 255 / 0.12);
    background: transparent;
  }
  .kr-primary-nav a { min-height: 3rem; padding: 0.45rem 0.7rem; font-size: 0.78rem; }
  .kr-primary-nav a[aria-current="page"]::after { inset: auto 0 -0.75rem; width: auto; height: 3px; }
  .kr-topbar { min-height: 3.25rem; padding: 0.6rem 1rem; background: var(--kr-glass-solid-bg); backdrop-filter: none; }
  .kr-topbar-title { max-width: 18ch; }
  .kr-page { padding: 2rem 1rem 3.5rem; }
  .kr-page-header { display: block; margin-bottom: 2.4rem; }
  .kr-page h1 { font-size: 2rem; }
  .kr-page-header > .kr-button { width: 100%; margin-top: 1.25rem; }
  .kr-section-head { display: grid; grid-template-columns: 1fr; align-items: start; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --kr-paper: #111820;
    --kr-surface: #18222d;
    --kr-surface-muted: #202c38;
    --kr-ink: #f3f6f8;
    --kr-muted: #a6b0bd;
    --kr-border: #32404f;
    --kr-blue: #5aa4d9;
    --kr-navy: #0b1622;
    --kr-cyan: #66c8df;
    --kr-green: #77b582;
    --kr-red: #dd746d;
    --kr-heading: #f3f6f8;
    --kr-primary-bg: #f3f6f8;
    --kr-primary-fg: #111820;
    --kr-focus: #66c8df;
    --kr-shadow-content: 0 1px 2px rgb(0 0 0 / 0.16);
    --kr-shadow-glass: 0 12px 32px rgb(0 0 0 / 0.28);
    --kr-shadow-overlay: 0 24px 64px rgb(0 0 0 / 0.42);
    --kr-shadow: var(--kr-shadow-content);
  }
  .kr-brand-mark { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --kr-glass-regular-bg: var(--kr-surface);
    --kr-glass-clear-bg: var(--kr-surface);
    --kr-glass-filter: none;
  }
  .kr-sidebar { background: var(--kr-navy); backdrop-filter: none; }
  .kr-topbar { background: var(--kr-paper); backdrop-filter: none; }
}

@supports not (backdrop-filter: blur(1px)) {
  .kr-sidebar { background: var(--kr-navy); }
  .kr-topbar { background: var(--kr-paper); }
}

@media (forced-colors: active) {
  .kr-sidebar, .kr-topbar, .kr-card, .kr-button { border: 1px solid CanvasText; }
  .kr-primary-nav a[aria-current="page"] { outline: 2px solid Highlight; }
  .kr-brand-mark { filter: none; }
  .kr-sidebar, .kr-topbar { background: Canvas; backdrop-filter: none; }
  :focus-visible { outline-color: Highlight; }
}

.kr-function-hint {
  grid-column: 1 / -1;
  box-sizing: border-box;
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  line-height: 1.5;
}

:root {
  --background: var(--kr-paper);
  --surface: var(--kr-surface);
  --surface-muted: var(--kr-surface-muted);
  --text: var(--kr-ink);
  --muted: var(--kr-muted);
  --accent: var(--kr-blue);
  --accent-contrast: var(--kr-primary-fg);
  --border: var(--kr-border);
  --focus: var(--kr-focus);
  --pending: var(--kr-blue);
  --rejected: var(--kr-red);
}

.dashboard-panel { min-width: 0; }

.status { min-height: 1.6em; color: var(--muted); }
.dashboard-panel[data-dashboard-state="ready"] > .status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.empty-catalog-link,
.next-step a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border: 1px solid var(--kr-primary-bg);
  border-radius: var(--kr-radius-sm);
  color: var(--kr-primary-fg);
  background: var(--kr-primary-bg);
  font-weight: 750;
  text-decoration: none;
}

.next-step {
  max-width: 44rem;
  margin: 1.25rem 0 1.5rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--kr-green) 45%, var(--border));
  border-radius: var(--kr-radius);
  background: color-mix(in srgb, var(--kr-green) 6%, var(--surface));
}

.next-step h4, .next-step p { margin-block: 0 0.5rem; }

.course-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.course-card {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--kr-radius);
  background: var(--surface);
  box-shadow: none;
}

.course-card::before {
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 0;
  border-radius: var(--kr-radius-sm) 0 0 var(--kr-radius-sm);
  background: var(--accent);
  content: "";
}

.course-card h3 {
  max-width: 34rem;
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
}

.course-card:first-child {
  border-color: var(--border);
}

.own-review {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.course-disclosure {
  max-width: 58rem;
  margin-top: .75rem;
  border-top: 1px solid var(--border);
}
.course-disclosure > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  padding: .9rem .2rem;
  color: var(--accent);
  font-weight: 750;
  cursor: pointer;
}
.course-disclosure[open] > summary { margin-bottom: .35rem; color: var(--text); }
.course-disclosure-content { padding: .15rem .2rem 1.25rem; }

.course-handout {
  max-width: 44rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.course-handout h4 { margin-block: 0 0.4rem; }
.course-handout > p { color: var(--muted); }
.handout-confirmation {
  display: flex;
  gap: 0.65rem;
  align-items: start;
  margin-block: 1rem;
}
.handout-confirmation input {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: 0.1rem;
  accent-color: var(--accent);
}
.handout-confirmation label { font-weight: 700; }
.handout-status { min-height: 1.6em; margin-bottom: 0; }

.own-review h4 { margin-block: 0 0.4rem; }
.review-status { color: var(--muted); }
.review-form, .form-field { display: grid; gap: 0.45rem; }
.review-form { max-width: 44rem; gap: 0.85rem; }
.review-form label { font-weight: 700; }
.review-form select,
.review-form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--kr-radius-sm);
  color: var(--text);
  background: var(--surface);
  font: inherit;
}
.review-form select { min-height: 44px; }
.review-form textarea { min-height: 7rem; resize: vertical; }
.review-save {
  justify-self: start;
  color: var(--kr-primary-fg);
  border: 1px solid var(--kr-primary-bg);
  background: var(--kr-primary-bg);
}

.state {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  margin: 0;
  padding: 0.25rem 0;
  color: var(--text);
  font-family: var(--kr-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.state::before {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
}

.state-active::before { color: var(--kr-green); background: var(--kr-green); }
.state-pending::before { color: var(--pending); }
.state-rejected::before { color: var(--rejected); }

progress {
  display: block;
  width: 100%;
  max-width: 44rem;
  min-height: 0.72rem;
  accent-color: var(--accent);
}

.learning-summary,
summary,
.lesson-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
}

.learning-summary {
  max-width: 44rem;
  margin-block: 0.5rem 1.25rem;
  font-size: 0.86rem;
}
.points, .revision, .lesson-state { color: var(--muted); }

.learning-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-block: 0.4rem 1.35rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--kr-primary-bg);
  border-radius: var(--kr-radius-sm);
  color: var(--kr-primary-fg);
  background: var(--kr-primary-bg);
  font-weight: 750;
  text-decoration: none;
}

.module-list,
.lesson-list { margin: 0; padding: 0; list-style: none; }

.module-list {
  max-width: 58rem;
  border-top: 1px solid var(--border);
}

.module-list > li { border-bottom: 1px solid var(--border); }

details { background: transparent; }

summary {
  min-height: 48px;
  padding: 0.8rem 0.25rem;
  cursor: pointer;
  font-weight: 700;
}

.lesson-list {
  padding: 0 0.25rem 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
}
.lesson-list li { padding-top: 0.65rem; }
.lesson-title { flex: 1 1 12rem; }

.revision { margin: 1.25rem 0 0; font-family: var(--kr-mono); font-size: 0.7rem; }

button {
  min-width: 44px;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--kr-primary-bg);
  border-radius: var(--kr-radius-sm);
  color: var(--kr-primary-fg);
  background: var(--kr-primary-bg);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

button.secondary { color: var(--accent); border-color: var(--border); background: transparent; }
button:hover, .learning-link:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.legal-footer {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem;
  color: var(--kr-muted);
}

@media (max-width: 40rem) {
  .section-heading { align-items: start; }
  .section-heading button { width: 100%; }
  .course-list { display: block; }
  .course-card { padding: 1.25rem 1rem; }
  .course-card + .course-card { margin-top: 1rem; }
  .learning-link, .review-save, .handout-download, .empty-catalog-link, .next-step a { width: 100%; }
  .learning-summary, summary, .lesson-list li { display: block; }
  .points, .lesson-state { display: block; margin-top: 0.2rem; }
}

@media (forced-colors: active) {
  .course-card, .state, button, select, textarea, .handout-confirmation input { border: 1px solid CanvasText; }
}

/* Unified role workspace */
:root{color-scheme:light;--kr-paper:#f6f8fa;--kr-surface:#fff;--kr-surface-muted:#edf2f6;--kr-ink:#17202a;--kr-muted:#667085;--kr-border:#d7dee8;--kr-heading:#102033;--kr-blue:#1f5d8c;--kr-green:#4e8a5a;--kr-red:#b6423c;--kr-success-text:#356840;--kr-navy:#102033;--kr-primary-bg:#102033;--kr-primary-fg:#fff;--kr-sidebar-width:232px;--kr-radius:8px}
body[data-kr-audience]{background:var(--kr-surface);color:var(--kr-ink)}
.kr-shell{display:grid;grid-template-columns:var(--kr-sidebar-width) minmax(0,1fr);min-height:100dvh;width:100%;max-width:none;margin:0;gap:0}
.kr-shell .kr-sidebar{position:sticky;top:0;display:flex;flex-direction:column;gap:0;height:100dvh;min-height:100dvh;max-height:100dvh;padding:20px 16px;background:var(--kr-paper);color:var(--kr-ink);border:0;border-right:1px solid var(--kr-border);overflow-y:auto;overflow-x:hidden;box-shadow:none;backdrop-filter:none}
.kr-sidebar .kr-brand{display:flex;align-items:center;gap:12px;min-height:80px;margin:0 0 24px;padding:0;color:var(--kr-navy);background:none;text-decoration:none;white-space:normal}
.kr-sidebar .kr-brand-mark{display:grid;place-items:center;width:62px;height:62px;min-width:62px;padding:14px;overflow:visible;background:transparent;border:0;border-radius:0}
.kr-sidebar .kr-brand-mark svg{width:34px;height:34px;max-width:none;fill:initial}
.kr-product-name{display:block;font-size:20px;font-weight:700;letter-spacing:0;line-height:1.25;color:var(--kr-navy)}
.kr-product-context{display:block;margin-top:4px;font-size:12px;line-height:1.55;color:var(--kr-muted)}
.kr-primary-nav{display:flex;flex-direction:column;gap:4px;min-width:0;border:0;padding:0;margin:0;list-style:none;background:none}
.kr-primary-nav a,.kr-primary-nav button{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:14px;min-width:44px;min-height:48px;width:100%;margin:0;padding:10px 12px;border:0;border-radius:6px;background:transparent;color:var(--kr-muted);font-size:14px;font-weight:500;line-height:1.5;text-decoration:none;text-align:left;white-space:normal}
.kr-primary-nav a::before,.kr-primary-nav button::before{content:none}
.kr-primary-nav a:hover,.kr-primary-nav button:hover{background:var(--kr-surface);color:var(--kr-blue)}
.kr-primary-nav a[aria-current=page]{background:var(--kr-surface);color:var(--kr-blue);box-shadow:inset 3px 0 var(--kr-blue);font-weight:650}
.kr-primary-nav a[aria-current=page]::after{content:none}
.kr-sidebar .kr-live-indicator{color:var(--kr-muted)}
.kr-nav-icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kr-sidebar-note{margin-top:auto;padding-top:24px;font-size:11px;color:var(--kr-muted)}
#kr-sidebar-toggle{display:flex;align-items:center;justify-content:center;align-self:flex-end;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0 0 12px;border:0;background:transparent;color:var(--kr-muted);box-shadow:none}
#kr-sidebar-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.nav-collapsed{--kr-sidebar-width:84px}
body.nav-collapsed .kr-sidebar{padding-inline:10px}
body.nav-collapsed .kr-sidebar .kr-brand{justify-content:center;gap:0}
body.nav-collapsed .kr-sidebar .kr-brand>span:last-child{display:none}
body.nav-collapsed #kr-sidebar-toggle{align-self:center}
body.nav-collapsed #kr-sidebar-toggle svg{transform:rotate(180deg)}
body.nav-collapsed .kr-sidebar .kr-nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.nav-collapsed .kr-primary-nav a,body.nav-collapsed .kr-primary-nav button{justify-content:center;padding:10px}
body.nav-collapsed .kr-sidebar .kr-primary-nav a:hover .kr-nav-label,body.nav-collapsed .kr-sidebar .kr-primary-nav a:focus-visible .kr-nav-label{position:fixed;left:78px;width:auto;height:auto;overflow:visible;clip-path:none;background:var(--kr-navy);color:#fff;padding:10px 14px;border-radius:4px;z-index:80}
body.nav-collapsed .kr-sidebar-note{font-size:0}
.kr-workspace{min-width:0;background:var(--kr-surface)}
.kr-workspace>.kr-topbar{position:sticky;top:0;z-index:25;display:flex;align-items:center;justify-content:space-between;flex-direction:row;flex-wrap:nowrap;gap:16px;min-height:72px;margin:0;padding:12px 28px;background:var(--kr-surface);color:var(--kr-ink);border:0;border-bottom:1px solid var(--kr-border);box-shadow:none;backdrop-filter:none}
.kr-topbar-title{margin:0;min-width:0;font-size:13px;font-weight:500;color:var(--kr-muted);line-height:1.5}
.kr-top-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:8px;flex:none;min-width:0}
.kr-top-action{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;width:44px;height:44px;margin:0;padding:10px;background:var(--kr-surface);color:var(--kr-navy);border:1px solid var(--kr-border);border-radius:6px;cursor:pointer}
.kr-top-action svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kr-account-action{border-radius:50%;width:44px;height:44px;background:var(--kr-paper);font-size:12px;font-weight:650}
.kr-mobile-navigation-open{display:none}
.kr-page,main.kr-page{width:100%;max-width:1120px;min-width:0;margin:0 auto;padding:32px 36px 56px;background:var(--kr-surface);border:0;border-radius:0;box-shadow:none}
.kr-page h1{font-size:32px;line-height:1.2;letter-spacing:0;margin:0 0 14px}
.kr-page h2{font-size:22px;line-height:1.3;letter-spacing:0}
.kr-page h3{font-size:17px;line-height:1.4;letter-spacing:0}
.kr-page-header,.page-heading{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 28px;padding:0;background:none;border:0;border-radius:0}
.kr-page-meta,.kr-page .eyebrow{font-size:11px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--kr-muted)}
.kr-lead,.kr-page .lead{max-width:68ch;margin:8px 0 0;font-size:15px;line-height:1.65;color:var(--kr-muted)}
.kr-page .panel,.kr-page .card{border:1px solid var(--kr-border);border-radius:8px;background:var(--kr-surface);box-shadow:none;padding:22px;margin-block:20px}
.kr-page .panel>h2:first-child,.kr-page .card>h2:first-child{margin-top:0}
.kr-page button,.kr-page .kr-button{border-radius:6px;min-height:44px;font-size:14px;line-height:1.4;letter-spacing:0}
.kr-page input,.kr-page select,.kr-page textarea{max-width:100%;border:1px solid var(--kr-border);border-radius:6px;background:var(--kr-surface);color:var(--kr-ink);font-size:14px}
.kr-page textarea{line-height:1.6}
.kr-page table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.kr-page th,.kr-page td{padding:14px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--kr-border)}
.kr-page details>summary{min-height:44px;padding-block:12px;cursor:pointer;color:var(--kr-blue)}
.kr-page [role=tablist]{display:flex;flex-wrap:wrap;gap:12px;border-bottom:1px solid var(--kr-border)}
.kr-page [role=tab]{border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--kr-muted);padding:12px 8px}
.kr-page [role=tab][aria-selected=true]{color:var(--kr-blue);border-bottom-color:var(--kr-blue)}
.kr-common-dialog{width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;overflow:auto;border:1px solid var(--kr-border);border-radius:8px;color:var(--kr-ink);background:var(--kr-surface);box-shadow:0 24px 64px rgb(16 32 51 / .18)}
.kr-common-dialog::backdrop{background:rgb(16 32 51 / .35)}
.kr-common-dialog header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--kr-border);background:var(--kr-surface)}
.kr-common-dialog h2{font-size:20px;margin:0;color:var(--kr-navy)}
.kr-common-dialog button,.kr-common-dialog a{min-height:44px;min-width:44px;border-radius:6px;font-size:14px}
.kr-common-dialog header button{padding:8px 12px;border:1px solid var(--kr-border);background:var(--kr-surface);color:var(--kr-ink)}
.kr-common-dialog-content{padding:22px}
.kr-common-dialog-content p{line-height:1.65;overflow-wrap:anywhere}
.kr-account-links{display:grid;gap:8px;margin:20px 0}
.kr-account-links a{display:flex;align-items:center;padding:10px 12px;border:1px solid var(--kr-border);text-decoration:none}
.kr-common-status{font-size:13px;color:var(--kr-muted)}
.kr-common-dialog .kr-primary{padding:12px 16px;background:var(--kr-navy);color:white;border:1px solid var(--kr-navy)}
.kr-help-log{display:grid;gap:18px;max-height:40dvh;overflow:auto;padding-block:12px;overscroll-behavior:contain}
.kr-help-message{padding-left:12px;border-left:2px solid var(--kr-cyan);font-size:14px}
.kr-help-message-own{border-color:var(--kr-border)}
.kr-help-message small{color:var(--kr-muted);font-size:11px}
.kr-help-message p{margin:4px 0 8px}
.kr-help-suggestions{display:flex;flex-wrap:wrap;gap:8px;padding-block:12px}
.kr-help-suggestions button{padding:10px 12px;background:var(--kr-surface);border:1px solid var(--kr-border);color:var(--kr-blue)}
.kr-help-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:16px}
.kr-help-form label{grid-column:1/-1;font-size:13px}
.kr-help-form textarea{width:100%;min-width:0;min-height:70px;padding:10px;border:1px solid var(--kr-border);border-radius:6px;resize:vertical}
#kr-common-navigation .kr-primary-nav{padding:16px}
.kr-motion-reduced *, .kr-motion-reduced *::before,.kr-motion-reduced *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
@media(max-width:768px){.kr-shell,body.nav-collapsed .kr-shell{display:block}.kr-shell>.kr-sidebar{display:none}.kr-workspace>.kr-topbar{min-height:64px;gap:8px;padding:10px 16px}.kr-mobile-navigation-open{display:inline-flex}.kr-topbar-title{font-size:12px;flex:1}.kr-top-actions{gap:6px}.kr-page,main.kr-page{padding:24px 16px 40px}.kr-page h1{font-size:27px}.kr-page h2{font-size:20px}.kr-page .panel,.kr-page .card{padding:16px;margin-block:16px}.kr-common-dialog-content{padding:16px}.kr-common-dialog header{padding:14px 16px}.kr-help-form{grid-template-columns:minmax(0,1fr)}.kr-help-form button{justify-self:end}.kr-brand .kr-product-name{font-size:18px}.kr-topbar>.kr-boundary-badge{display:none}}
@media(prefers-reduced-motion:reduce){.kr-shell *,.kr-common-dialog *{scroll-behavior:auto;transition:none;animation:none}}
@media(prefers-reduced-transparency:reduce){.kr-topbar,.kr-sidebar,.kr-common-dialog{backdrop-filter:none;background:var(--kr-surface)}}
@media(forced-colors:active){.kr-primary-nav [aria-current=page]{outline:1px solid Highlight}.kr-top-action,.kr-common-dialog{border:1px solid CanvasText}}

.kr-topbar-title{flex:1;min-width:0}.kr-topbar-back{font-size:12px;flex:none}.kr-help-message details a{display:flex;align-items:center;min-height:44px}.kr-common-dialog summary{min-height:44px;padding-block:12px;cursor:pointer;color:var(--kr-blue)}
@media(max-width:768px){.kr-topbar>.kr-topbar-back{display:none}}

#kr-sidebar-toggle .kr-nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.kr-common-dialog-content>label{display:flex;align-items:center;gap:10px;min-height:44px}

.kr-workspace .global-status[data-kind="success"],.kr-workspace .status[data-kind="success"]{color:var(--kr-success-text)}