@layer wsk;

@layer wsk {
  /* Tokens and themes — indigo instrument palette.
     Every themed token is defined once as light-dark(<light>, <dark>); there
     is no dark override block. `color-scheme` on :root is the only switch:
     the system decides unless [data-theme] forces a mode.
     Contrast pairs are WCAG-checked; keep text/surface pairs ≥ 4.5:1
     (AA) and non-text indicators ≥ 3:1 when adjusting. */
  :root {
    color-scheme: light dark;
    --canvas: light-dark(#f7f8fb, #0a0f1d);
    --surface: light-dark(#ffffff, #121827);
    --surface-raised: light-dark(#ffffff, #151d2f);
    --surface-soft: light-dark(#f1f3f7, #1b2335);
    --surface-strong: light-dark(#e9edf3, #222d42);
    --border: light-dark(#e0e4eb, rgb(148 163 184 / 16%));
    --border-strong: light-dark(#98a2b1, rgb(148 163 184 / 50%));
    --field-border: light-dark(#7e8899, rgb(148 163 184 / 70%));
    --text: light-dark(#151b2b, #f1f5f9);
    --muted: light-dark(#57637a, #b4bfce);
    --muted-soft: light-dark(#5f6a7c, #8b96a9);
    --accent: light-dark(#4f46e5, #818cf8);
    --accent-hover: light-dark(#4338ca, #a5b4fc);
    --accent-soft: light-dark(#eef2ff, rgb(129 140 248 / 15%));
    --on-accent: light-dark(#ffffff, #0b1020);
    --brand: light-dark(#4f46e5, #4f51dd);
    --on-brand: #ffffff;
    --success: light-dark(#047857, #6ee7b7);
    --success-soft: light-dark(#ecfdf5, rgb(110 231 183 / 14%));
    --warning: light-dark(#a16207, #fcd34d);
    --warning-soft: light-dark(#fffbeb, rgb(252 211 77 / 14%));
    --danger: light-dark(#b91c1c, #fca5a5);
    --danger-soft: light-dark(#fef2f2, rgb(252 165 165 / 14%));
    --on-danger: light-dark(#ffffff, #24090d);
    --info: light-dark(#0369a1, #7dd3fc);
    --info-soft: light-dark(#f0f9ff, rgb(125 211 252 / 14%));
    /* Links are a role of their own. Binding them to --accent makes every
       heading on a content site read as the page's main call to action. */
    --link: light-dark(#1d4ed8, #93c5fd);
    --link-hover: light-dark(#1e40af, #bfdbfe);
    /* Status colours need two variants. The values above are text colours:
       in dark mode --danger is deliberately light, which is right for text
       and far too bright for a solid destructive button. These are the fills. */
    --success-fill: #047857;
    --on-success-fill: #ffffff;
    --warning-fill: light-dark(#a16207, #f59e0b);
    --on-warning-fill: light-dark(#ffffff, #1a1205);
    --danger-fill: #b91c1c;
    --on-danger-fill: #ffffff;
    --info-fill: #0369a1;
    --on-info-fill: #ffffff;
    --selection: light-dark(#dbe3ff, rgb(129 140 248 / 35%));
    --inverse: light-dark(#151b2b, #e8ebf0);
    --on-inverse: light-dark(#f7f8fb, #151b2b);
    --disabled-bg: light-dark(#e8ebf0, #252d3d);
    --disabled-text: light-dark(#929baa, #737f92);
    --focus: light-dark(#2563eb, #93c5fd);
    --overlay: light-dark(rgb(15 23 42 / 48%), rgb(2 6 23 / 68%));
    --radius-xs: 5px;
    --radius-sm: 7px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    /* Type scale. Named --type-* rather than --text-* so it cannot be
       confused with --text, which is the body colour. */
    --type-2xs: 0.6875rem;
    --type-xs: 0.75rem;
    --type-sm: 0.8125rem;
    --type-base: 0.875rem;
    --type-md: 0.9375rem;
    --type-lg: 1rem;
    --type-xl: 1.0625rem;
    --type-2xl: 1.375rem;
    --type-3xl: 1.5rem;
    --type-display-sm: clamp(1.75rem, 2.2vw, 2.25rem);
    --type-display: clamp(2rem, 3vw, 2.375rem);
    /* Spacing. The kit steps in 2px, not 4px, so the tokens are named
       after the pixel size they carry and hold the rem value. */
    --space-2: 0.125rem;
    --space-4: 0.25rem;
    --space-6: 0.375rem;
    --space-8: 0.5rem;
    --space-10: 0.625rem;
    --space-12: 0.75rem;
    --space-14: 0.875rem;
    --space-16: 1rem;
    --space-18: 1.125rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-48: 3rem;
    --shadow-sm:
      0 1px 2px light-dark(rgb(15 23 42 / 5%), rgb(0 0 0 / 30%)),
      0 2px 8px -2px light-dark(rgb(15 23 42 / 5%), rgb(0 0 0 / 26%));
    /* Light paints 3 layers, dark 2. The union carries both sets and blanks
       the layers the other mode does not use, so neither mode changes. */
    --shadow-hover:
      0 2px 4px light-dark(rgb(15 23 42 / 4%), rgb(0 0 0 / 30%)),
      0 10px 24px -8px light-dark(rgb(15 23 42 / 10%), transparent),
      0 12px 28px -10px light-dark(transparent, rgb(0 0 0 / 45%)),
      0 24px 48px -20px light-dark(rgb(15 23 42 / 8%), transparent);
    --shadow:
      0 4px 10px light-dark(rgb(15 23 42 / 7%), transparent),
      0 6px 16px light-dark(transparent, rgb(0 0 0 / 45%)),
      0 16px 40px -12px light-dark(rgb(15 23 42 / 14%), transparent),
      0 20px 48px -16px light-dark(transparent, rgb(0 0 0 / 55%)),
      0 32px 72px -24px light-dark(rgb(15 23 42 / 16%), transparent);
    /* Dark leads with a 1px accent ring that light does not draw. */
    --shadow-accent:
      0 0 0 1px light-dark(transparent, color-mix(in srgb, var(--accent) 28%, transparent)),
      0 1px 2px light-dark(rgb(15 23 42 / 10%), transparent),
      0 2px 14px light-dark(transparent, color-mix(in srgb, var(--accent) 26%, transparent)),
      0 6px 16px -6px light-dark(color-mix(in srgb, var(--accent) 35%, transparent), transparent);
    --card-highlight: inset 0 1px 0
      light-dark(rgb(255 255 255 / 75%), rgb(255 255 255 / 6%));
    /* The 38% stop is where dark fades out; light's value there (0.76%) sits
       exactly on its original 0% → 2% ramp, so the light gradient is
       unchanged while both modes now share one stop list. */
    --card-sheen: linear-gradient(
      180deg,
      light-dark(rgb(255 255 255 / 0%), rgb(255 255 255 / 3%)) 0%,
      light-dark(rgb(15 23 42 / 0.76%), rgb(255 255 255 / 0%)) 38%,
      light-dark(rgb(15 23 42 / 2%), rgb(255 255 255 / 0%)) 100%
    );
    --overlay-ring: 0 0 0 1px
      light-dark(rgb(15 23 42 / 4%), rgb(255 255 255 / 7%));
    --grid-dot: light-dark(rgb(21 27 43 / 5%), rgb(226 232 240 / 4%));
    --canvas-glow-1: light-dark(
      color-mix(in srgb, var(--accent) 6%, transparent),
      rgb(129 140 248 / 9%)
    );
    --canvas-glow-2: light-dark(rgb(14 165 233 / 4%), rgb(34 211 238 / 5%));
    --hero-glow: light-dark(
      color-mix(in srgb, var(--accent) 7%, transparent),
      color-mix(in srgb, var(--accent) 12%, transparent)
    );
    --metric-wash: light-dark(
      color-mix(in srgb, var(--accent) 6%, transparent),
      color-mix(in srgb, var(--accent) 10%, transparent)
    );
    --metric-glow: light-dark(
      color-mix(in srgb, var(--accent) 28%, transparent),
      color-mix(in srgb, var(--accent) 35%, transparent)
    );
    --input-bg: light-dark(#ffffff, #0f1524);
    --input-inset: light-dark(rgb(15 23 42 / 5%), rgb(0 0 0 / 32%));
    --skeleton-base: light-dark(#eceff5, #1b2335);
    --skeleton-hi: light-dark(#f8fafc, #2a3550);
    --brand-glow: light-dark(
      color-mix(in srgb, var(--brand) 40%, transparent),
      color-mix(in srgb, var(--brand) 55%, transparent)
    );
    --topbar-glint: light-dark(rgb(255 255 255 / 65%), rgb(255 255 255 / 6%));
    --topbar-tint-top: light-dark(
      color-mix(in srgb, var(--surface) 96%, transparent),
      color-mix(in srgb, var(--canvas) 88%, transparent)
    );
    --topbar-tint-bottom: light-dark(
      color-mix(in srgb, var(--surface) 84%, transparent),
      color-mix(in srgb, var(--canvas) 72%, transparent)
    );
    --topbar-depth: light-dark(rgb(15 23 42 / 30%), rgb(0 0 0 / 60%));
    --switch-track-inset: light-dark(rgb(15 23 42 / 12%), rgb(0 0 0 / 35%));
    --switch-knob-top: light-dark(#ffffff, #f1f5f9);
    --switch-knob-bottom: light-dark(#eef1f6, #cbd5e1);
    --switch-knob-shadow: light-dark(rgb(15 23 42 / 28%), rgb(0 0 0 / 45%));
    --switch-knob-ring: light-dark(rgb(15 23 42 / 6%), transparent);
    --auth-halo: light-dark(
      color-mix(in srgb, var(--accent) 5%, transparent),
      color-mix(in srgb, var(--accent) 9%, transparent)
    );
    --auth-depth: light-dark(rgb(15 23 42 / 22%), rgb(0 0 0 / 55%));
    /* The code panel is a deliberate dark accent in both themes, so its
       tokens are its own and its syntax colours are fixed. */
    --code-panel-bg: light-dark(#111827, #0d1322);
    --code-panel-bg-deep: light-dark(#0d1322, #0a0f1a);
    --code-panel-border: light-dark(#334155, rgb(148 163 184 / 18%));
    --code-panel-text: light-dark(#e5e7eb, #e2e8f0);
    --code-panel-glow: light-dark(rgb(99 102 241 / 10%), rgb(129 140 248 / 14%));
    --code-panel-keyword: #93c5fd;
    --code-panel-string: #fbbf24;
    /* Prose code follows the theme instead: a dark block in the middle of a
       light article is an accent, not a reading surface. Inline code and block
       code want different backgrounds, so they are separate roles. */
    --code-block-bg: light-dark(#f4f6fa, #0f1524);
    --code-block-border: light-dark(#e0e4eb, rgb(148 163 184 / 18%));
    --code-block-text: light-dark(#1f2937, #e2e8f0);
    --code-inline-bg: light-dark(#eef1f6, rgb(148 163 184 / 18%));
    --code-inline-text: light-dark(#9d2463, #f5a0b8);
    --syntax-keyword: light-dark(#7c3aed, #c4b5fd);
    --syntax-string: light-dark(#047857, #6ee7b7);
    --syntax-number: light-dark(#b45309, #fcd34d);
    --syntax-name: light-dark(#1d4ed8, #93c5fd);
    --syntax-comment: light-dark(#5f6a7c, #8b96a9);
    /* Categorical colours. Semantic colours cannot label a set of unrelated
       categories — two of them end up meaning "danger". Each pair is checked
       as text on its own background. */
    --cat-1-bg: light-dark(#e5f5eb, #1a3025);
    --cat-1-text: light-dark(#236b45, #91d5aa);
    --cat-2-bg: light-dark(#ffe8ee, #361d2b);
    --cat-2-text: light-dark(#ae3154, #f5a0b8);
    --cat-3-bg: light-dark(#f0eaff, #2b2340);
    --cat-3-text: light-dark(#7041b5, #c9adf3);
    --cat-4-bg: light-dark(#e1f3f8, #172f3b);
    --cat-4-text: light-dark(#196b83, #89cfdf);
    --font-sans:
      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
      "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei UI",
      "Microsoft YaHei", sans-serif;
    --font-mono:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  /* The only theme switches in the file: forcing a color-scheme flips every
     light-dark() token above. Absent [data-theme], the system decides — so
     dark works with JavaScript disabled. */
  :root[data-theme="light"] {
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  /* Base elements */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    background: var(--canvas);
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  p,
  ul {
    margin: 0;
  }

  body {
    /* Two soft radial washes give the first screen a light source; the
       opaque base color lives on <html> so the fixed dot grid below can
       sit between the two layers. */
    background:
      radial-gradient(
        52rem 30rem at 12% -6%,
        var(--canvas-glow-1),
        transparent 68%
      ),
      radial-gradient(
        40rem 24rem at 100% 0%,
        var(--canvas-glow-2),
        transparent 70%
      );
    color: var(--text);
    font-family: var(--font-sans);
    font-synthesis: none;
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    text-rendering: optimizeLegibility;
  }

  /* Fixed micro dot grid — the "graph paper" texture of the kit. It fades
     out toward the lower viewport so long content stays quiet. */
  body::before {
    background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.2px);
    background-size: 24px 24px;
    content: "";
    inset: 0;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      rgb(0 0 0 / 35%) 45%,
      transparent 78%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      rgb(0 0 0 / 35%) 45%,
      transparent 78%
    );
    pointer-events: none;
    position: fixed;
    z-index: -1;
  }

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

  button,
  select {
    cursor: pointer;
  }

  button:disabled {
    cursor: not-allowed;
  }

  /* Links inherit the surrounding text colour by default; only prose links
     take --link. Every link container in this sheet already sets its own
     colour, so this changes nothing here — it changes what a content site
     inherits. */
  a {
    color: inherit;
  }

  ::selection {
    background: var(--selection);
    color: var(--text);
  }

  h1,
  h2,
  h3 {
    /* CJK glyphs fill the em box; negative tracking is reserved for
       numeric displays only. */
    letter-spacing: 0;
    line-height: 1.25;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--type-display);
    font-weight: 750;
  }

  h2 {
    font-size: var(--type-2xl);
    font-weight: 700;
  }

  h3 {
    font-size: var(--type-xl);
    font-weight: 600;
  }

  h1[tabindex="-1"] {
    width: fit-content;
  }

  h1[tabindex="-1"]:focus-visible {
    border-radius: var(--radius-sm);
    outline-width: 2px;
  }

  svg {
    display: block;
  }

  table {
    border-collapse: collapse;
  }

  [hidden] {
    display: none !important;
  }

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

  /* Progressive enhancement. The <head> sets [data-js] before first paint, so
     neither layout flashes. Without JavaScript, controls that cannot do
     anything are hidden, and content that only JavaScript would ever reveal is
     shown instead of being stranded — the tab panels and the reference view
     are both marked [hidden] in the markup because JavaScript manages them.
     [hidden] is display: none !important below, so undoing it needs the same
     weight. */
  :root:not([data-js]) [data-js-only] {
    display: none !important;
  }

  :root[data-js] [data-no-js] {
    display: none !important;
  }

  :root:not([data-js]) :is([role="tabpanel"], [data-view])[hidden] {
    display: block !important;
  }

  /* Accessibility helpers */
  .wsk-skip-link {
    background: var(--text);
    color: var(--surface);
    left: max(1rem, env(safe-area-inset-left));
    padding: var(--space-10) var(--space-14);
    position: fixed;
    text-decoration: none;
    top: max(1rem, env(safe-area-inset-top));
    transform: translateY(calc(-100% - 2rem));
    z-index: 100;
  }

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

  /* The skip link's target carries tabindex="-1" so activating it actually
     moves focus, not just the scroll position. It is not reachable by Tab,
     and a focus ring around the whole page would be noise, so suppress it. */
  main[tabindex="-1"]:focus {
    outline: none;
  }

  .wsk-sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .wsk-icon-sprite {
    height: 0;
    position: absolute;
    width: 0;
  }

  .wsk-icon {
    fill: none;
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 1rem;
  }

  /* Standard components */
  .wsk-topbar {
    align-items: center;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    background: linear-gradient(
      180deg,
      var(--topbar-tint-top) 0%,
      var(--topbar-tint-bottom) 100%
    );
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    box-shadow:
      inset 0 1px 0 var(--topbar-glint),
      0 12px 32px -24px var(--topbar-depth);
    display: grid;
    gap: var(--space-16);
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 3.5rem;
    padding:
      0 max(1.5rem, env(safe-area-inset-right)) 0
      max(1.5rem, env(safe-area-inset-left));
    position: sticky;
    top: 0;
    z-index: 20;
  }

  [data-active-view="reference"] .wsk-topbar {
    position: sticky;
  }

  .wsk-brand {
    align-items: center;
    display: flex;
    gap: var(--space-12);
    min-width: 0;
  }

  .wsk-brand-mark {
    align-items: center;
    background:
      radial-gradient(
        130% 100% at 25% 0%,
        rgb(255 255 255 / 30%),
        transparent 42%
      ),
      linear-gradient(
        145deg,
        color-mix(in srgb, var(--brand) 78%, #fff) 0%,
        var(--brand) 52%,
        color-mix(in srgb, var(--brand) 80%, #000) 100%
      );
    border-radius: var(--radius);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 35%),
      inset 0 -1px 1px rgb(0 0 0 / 20%),
      0 6px 16px -6px var(--brand-glow);
    color: var(--on-brand);
    display: flex;
    font-size: var(--type-xs);
    font-weight: 800;
    height: 2rem;
    justify-content: center;
    letter-spacing: 0.04em;
    width: 2rem;
  }

  .wsk-brand-copy,
  .wsk-brand-copy strong {
    display: block;
  }

  .wsk-brand-copy strong {
    font-size: var(--type-base);
    letter-spacing: -0.01em;
  }

  .wsk-view-switch,
  .wsk-segmented {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-sm) + 1px);
    display: inline-flex;
    padding: 2px;
  }

  .wsk-view-switch button,
  .wsk-segmented span {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-xs);
    color: var(--muted);
    display: inline-flex;
    font-size: var(--type-xs);
    font-weight: 600;
    min-height: 1.875rem;
    padding: 0 var(--space-12);
    transition:
      background-color 140ms ease,
      color 140ms ease,
      box-shadow 140ms ease;
  }

  .wsk-view-switch button.wsk-is-active,
  .wsk-segmented input:checked + span {
    background: var(--surface-raised);
    box-shadow: var(--card-highlight), var(--shadow-sm);
    color: var(--text);
  }

  .wsk-segmented label {
    position: relative;
  }

  .wsk-segmented input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
  }

  .wsk-segmented input:focus-visible + span {
    outline: 3px solid var(--focus);
  }

  .wsk-icon-button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--muted);
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    padding: 0;
    width: 2.5rem;
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      color 140ms ease,
      transform 100ms ease;
  }

  .wsk-icon-button:hover:not(:disabled) {
    background: var(--surface-soft);
    border-color: var(--border);
    color: var(--text);
  }

  .wsk-icon-button:disabled {
    background: transparent;
    border-color: transparent;
    color: var(--disabled-text);
  }

  /* The toggle is tri-state. "Follow the system" is the absence of
     [data-theme], so the icon is chosen from the explicit choice alone —
     never from the system preference, which the stylesheet cannot read
     for a non-color property. */
  .wsk-theme-sun,
  .wsk-theme-moon {
    display: none;
  }

  :root[data-theme] .wsk-theme-system {
    display: none;
  }

  :root[data-theme="light"] .wsk-theme-sun,
  :root[data-theme="dark"] .wsk-theme-moon {
    display: block;
  }

  .wsk-page {
    margin: 0 auto;
    max-width: 78rem;
    padding: var(--space-48) var(--space-32) 5rem;
  }

  .wsk-page-head {
    align-items: center;
    display: flex;
    gap: var(--space-24);
    justify-content: space-between;
    position: relative;
  }

  /* Ambient glow anchored to the page title — "light comes from the
     brand". Sits behind the content, clipped by nothing. */
  .wsk-page-head::before {
    background: radial-gradient(
      58% 100% at 10% 0%,
      var(--hero-glow),
      transparent 72%
    );
    content: "";
    height: 10rem;
    inset: -2.5rem -2rem auto;
    pointer-events: none;
    position: absolute;
    z-index: -1;
  }

  .wsk-page-head p {
    color: var(--muted);
    font-size: var(--type-lg);
    margin-top: var(--space-10);
    max-width: 44rem;
    text-wrap: pretty;
  }

  .wsk-section {
    border-top: 0;
    margin-top: 3.5rem;
    padding-top: 0;
    scroll-margin-top: 8.25rem;
  }

  .wsk-section h2[id] {
    scroll-margin-top: 8.25rem;
  }

  .wsk-section-head {
    align-items: center;
    display: flex;
    gap: var(--space-16);
    justify-content: space-between;
    margin-bottom: var(--space-18);
  }

  .wsk-section-head h2 {
    align-items: center;
    display: flex;
    gap: var(--space-10);
  }

  /* Accent tick — the scanning anchor for every section title. */
  .wsk-section-head h2::before {
    background: linear-gradient(
      180deg,
      var(--accent) 0%,
      color-mix(in srgb, var(--accent) 45%, transparent) 100%
    );
    border-radius: var(--radius-pill);
    content: "";
    flex: 0 0 auto;
    height: 1.05em;
    width: 0.25rem;
  }

  .wsk-badge {
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--muted);
    display: inline-flex;
    font-size: var(--type-xs);
    font-weight: 600;
    gap: var(--space-6);
    min-height: 1.625rem;
    padding: 0 var(--space-10);
    white-space: nowrap;
  }

  .wsk-section-head > .wsk-badge {
    font-size: var(--type-2xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .wsk-badge.wsk-accent {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    color: var(--accent);
  }

  .wsk-badge.wsk-success {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    color: var(--success);
  }

  .wsk-badge.wsk-warning {
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
    color: var(--warning);
  }

  .wsk-badge.wsk-danger {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    color: var(--danger);
  }

  .wsk-dot {
    background: currentColor;
    border-radius: 50%;
    height: 0.375rem;
    position: relative;
    width: 0.375rem;
  }

  /* Live-status heartbeat: a ring that expands from the dot. Inherits the
     badge's semantic color via currentColor. */
  .wsk-dot::after {
    animation: wsk-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
    background: currentColor;
    border-radius: 50%;
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
  }

  .wsk-demo-grid,
  .wsk-form-grid,
  .wsk-metric-grid {
    align-items: start;
    display: grid;
    gap: var(--space-24);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  /* Cards carry a faint top-lit sheen (--card-sheen): in dark mode it
     reads as the card's lit edge, in light mode as a soft vertical
     gradient. It rides in the background shorthand because later
     `background:` declarations would reset a separate background-image. */
  .wsk-panel,
  .wsk-metric {
    background: var(--card-sheen) var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-highlight), var(--shadow-sm);
    padding: 1.375rem;
  }

  .wsk-panel-title {
    color: var(--muted-soft);
    font-size: var(--type-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-16);
    text-transform: uppercase;
  }

  .wsk-kit-index {
    align-items: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--card-highlight), var(--shadow-sm);
    display: flex;
    gap: var(--space-20);
    margin-top: var(--space-32);
    padding: var(--space-10) var(--space-12) var(--space-10) var(--space-16);
    position: sticky;
    top: 4.25rem;
    z-index: 10;
  }

  .wsk-kit-index > strong {
    color: var(--muted-soft);
    flex: 0 0 auto;
    font-size: var(--type-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .wsk-kit-index-links {
    display: flex;
    gap: var(--space-4);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .wsk-kit-index-links::-webkit-scrollbar {
    display: none;
  }

  .wsk-kit-index a {
    border-radius: var(--radius-sm);
    color: var(--muted);
    flex: 0 0 auto;
    font-size: var(--type-sm);
    font-weight: 600;
    padding: var(--space-6) var(--space-10);
    text-decoration: none;
    transition:
      background-color 140ms ease,
      color 140ms ease;
  }

  .wsk-kit-index a:hover {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .wsk-button-row,
  .wsk-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
  }

  .wsk-mt-2 {
    margin-top: var(--space-8);
  }
  .wsk-mt-5 {
    margin-top: var(--space-20);
  }
  .wsk-mb-3 {
    margin-bottom: var(--space-12);
  }

  .wsk-toolbar {
    justify-content: space-between;
  }

  .wsk-button {
    align-items: center;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 88%, #fff) 0%,
      var(--accent) 100%
    );
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 22%),
      var(--shadow-accent);
    color: var(--on-accent);
    display: inline-flex;
    font-size: var(--type-base);
    font-weight: 600;
    gap: var(--space-8);
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 var(--space-16);
    text-decoration: none;
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease,
      color 140ms ease,
      transform 100ms ease;
  }

  .wsk-button:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .wsk-button:not(.wsk-secondary, .wsk-quiet, .wsk-danger):hover:not(
      :disabled
    ) {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent-hover) 88%, #fff) 0%,
      var(--accent-hover) 100%
    );
    border-color: var(--accent-hover);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 22%),
      0 6px 20px -6px color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--on-accent);
  }

  .wsk-button:not(.wsk-secondary, .wsk-quiet, .wsk-danger):active:not(
      :disabled
    ) {
    box-shadow: inset 0 2px 4px rgb(15 23 42 / 18%);
  }

  .wsk-button.wsk-secondary {
    background: var(--surface-raised);
    border-color: var(--border-strong);
    box-shadow: var(--card-highlight), var(--shadow-sm);
    color: var(--text);
  }

  .wsk-button.wsk-secondary:hover,
  .wsk-button.wsk-quiet:hover {
    background: var(--surface-soft);
    color: var(--text);
  }

  .wsk-button.wsk-quiet {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--muted);
  }

  .wsk-button.wsk-danger {
    background: transparent;
    border-color: var(--danger);
    box-shadow: none;
    color: var(--danger);
  }

  .wsk-button.wsk-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--on-danger);
  }

  .wsk-button:disabled {
    background: var(--disabled-bg);
    border-color: var(--disabled-bg);
    box-shadow: none;
    color: var(--disabled-text);
    opacity: 1;
  }

  .wsk-button.wsk-loading:disabled {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
    color: var(--accent);
  }

  .wsk-button:active:not(:disabled),
  .wsk-icon-button:active:not(:disabled) {
    transform: scale(0.98);
  }

  .wsk-spinner {
    animation: spin 0.8s linear infinite;
    border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 50%;
    border-top-color: currentColor;
    height: 1rem;
    width: 1rem;
  }

  .wsk-menu-wrap {
    position: relative;
  }

  .wsk-menu {
    animation: wsk-pop 160ms cubic-bezier(0.2, 0.9, 0.3, 1);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--overlay-ring), var(--shadow);
    display: grid;
    min-width: 11rem;
    padding: var(--space-6);
    position: absolute;
    right: 0;
    top: calc(100% + 0.375rem);
    transform-origin: top right;
    z-index: 30;
  }

  .wsk-menu button {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--type-base);
    min-height: 2.25rem;
    padding: 0 var(--space-12);
    text-align: left;
  }

  .wsk-menu button:hover,
  .wsk-menu button:focus-visible {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .wsk-menu .wsk-menu-danger {
    color: var(--danger);
  }

  .wsk-menu .wsk-menu-danger:hover,
  .wsk-menu .wsk-menu-danger:focus-visible {
    background: var(--danger-soft);
    color: var(--danger);
  }

  .wsk-field {
    align-content: start;
    display: grid;
    gap: var(--space-8);
  }

  .wsk-field.wsk-wide {
    grid-column: 1 / -1;
  }

  .wsk-label,
  legend {
    font-size: var(--type-base);
    font-weight: 600;
    transition: color 140ms ease;
  }

  .wsk-field:focus-within > .wsk-label,
  .wsk-choice-group:focus-within > legend {
    color: var(--accent);
  }

  .wsk-required,
  .wsk-error {
    color: var(--danger);
  }

  .wsk-control,
  .wsk-select,
  .wsk-textarea {
    appearance: none;
    background: var(--input-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 2px var(--input-inset);
    color: var(--text);
    font-size: var(--type-base);
    min-height: 2.5rem;
    outline: 0;
    padding: 0 var(--space-12);
    transition:
      border-color 140ms ease,
      box-shadow 140ms ease;
    width: 100%;
  }

  .wsk-control:focus,
  .wsk-select:focus,
  .wsk-textarea:focus {
    border-color: var(--accent);
    box-shadow:
      inset 0 1px 2px transparent,
      0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
    outline: 1px solid var(--accent);
    outline-offset: 0;
  }

  /* State rules cover all three control types. :is() keeps the same
     specificity as the single-class selectors they replace, so the
     source order below still decides disabled-vs-readonly. */
  :is(.wsk-control, .wsk-select, .wsk-textarea)[aria-invalid="true"] {
    border-color: var(--danger);
  }

  :is(.wsk-control, .wsk-select, .wsk-textarea)[aria-invalid="true"]:focus {
    box-shadow:
      inset 0 1px 2px transparent,
      0 0 0 4px color-mix(in srgb, var(--danger) 15%, transparent);
    outline-color: var(--danger);
  }

  :is(.wsk-control, .wsk-select, .wsk-textarea)[data-state="success"] {
    border-color: var(--success);
  }

  :is(.wsk-control, .wsk-select, .wsk-textarea)[data-state="success"]:focus {
    box-shadow:
      inset 0 1px 2px transparent,
      0 0 0 4px color-mix(in srgb, var(--success) 15%, transparent);
    outline-color: var(--success);
  }

  :is(.wsk-control, .wsk-select, .wsk-textarea):disabled {
    background: var(--disabled-bg);
    box-shadow: none;
    color: var(--disabled-text);
    cursor: not-allowed;
  }

  :is(.wsk-control, .wsk-select, .wsk-textarea)[readonly] {
    background: var(--surface-soft);
    box-shadow: none;
  }

  .wsk-textarea {
    min-height: 6rem;
    padding-block: 0.75rem;
    resize: vertical;
  }

  .wsk-help,
  .wsk-error,
  .wsk-success-text {
    font-size: var(--type-xs);
  }

  .wsk-help {
    color: var(--muted-soft);
    line-height: 1.6;
  }

  .wsk-success-text {
    color: var(--success);
  }

  .wsk-input-wrap,
  .wsk-select-wrap {
    position: relative;
  }

  .wsk-input-wrap .wsk-control {
    padding-right: var(--space-48);
  }

  /* Centered with auto margins, not translateY: the button's :active
     scale transform (and the reduced-motion transform reset) must not be
     able to knock it out of position. */
  .wsk-input-wrap .wsk-icon-button {
    bottom: 0;
    margin-block: auto;
    position: absolute;
    right: 0.25rem;
    top: 0;
  }

  .wsk-select-wrap .wsk-icon {
    pointer-events: none;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .wsk-select-wrap:has(.wsk-select:disabled) .wsk-icon {
    color: var(--disabled-text);
  }

  .wsk-select {
    padding-right: 2.5rem;
  }

  .wsk-input-group {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wsk-input-group > span {
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    color: var(--muted);
    display: flex;
    font-size: var(--type-base);
    padding: 0 var(--space-12);
  }

  .wsk-input-group .wsk-control {
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    min-width: 0;
  }

  .wsk-file-control {
    padding: var(--space-4);
  }

  .wsk-file-control::file-selector-button {
    background: var(--surface-soft);
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
    color: var(--text);
    font-weight: 600;
    height: 2rem;
    margin-right: var(--space-12);
    padding: 0 var(--space-12);
  }

  .wsk-switch {
    align-items: center;
    display: inline-flex;
    gap: var(--space-12);
    position: relative;
    width: fit-content;
  }

  .wsk-switch input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
  }

  .wsk-switch-track {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 1px 3px var(--switch-track-inset);
    display: inline-flex;
    flex: 0 0 auto;
    height: 1.5rem;
    padding: 0.1875rem;
    transition:
      background 120ms ease,
      box-shadow 180ms ease;
    width: 2.75rem;
  }

  .wsk-switch-track::after {
    background: linear-gradient(
      180deg,
      var(--switch-knob-top) 0%,
      var(--switch-knob-bottom) 100%
    );
    border-radius: 50%;
    box-shadow:
      0 1px 2px var(--switch-knob-shadow),
      0 0 0 0.5px var(--switch-knob-ring);
    content: "";
    height: 1rem;
    transition: transform 220ms cubic-bezier(0.22, 1.1, 0.35, 1);
    width: 1rem;
  }

  .wsk-switch input:checked + .wsk-switch-track {
    background: var(--accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
  }

  .wsk-switch input:checked + .wsk-switch-track::after {
    transform: translateX(1.25rem);
  }

  .wsk-switch input:focus-visible + .wsk-switch-track {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  .wsk-switch:has(input:disabled) {
    cursor: not-allowed;
  }

  .wsk-switch input:disabled + .wsk-switch-track {
    background: var(--disabled-bg);
    box-shadow: none;
  }

  .wsk-switch input:disabled + .wsk-switch-track::after {
    background: var(--disabled-text);
    box-shadow: none;
  }

  .wsk-switch:has(input:disabled) strong,
  .wsk-switch:has(input:disabled) small {
    color: var(--disabled-text);
  }

  .wsk-switch strong,
  .wsk-switch small {
    display: block;
  }

  .wsk-switch strong {
    font-size: var(--type-base);
  }

  .wsk-switch small {
    color: var(--muted-soft);
    font-size: var(--type-xs);
    font-weight: 400;
    margin-top: var(--space-2);
  }

  .wsk-choice-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
  }

  .wsk-choice-group {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .wsk-choice {
    align-items: center;
    display: inline-flex;
    font-size: var(--type-base);
    gap: var(--space-8);
  }

  .wsk-choice input {
    accent-color: var(--accent);
    height: 1rem;
    width: 1rem;
  }

  .wsk-alert-list {
    display: grid;
    gap: var(--space-12);
  }

  .wsk-alert {
    align-items: flex-start;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    display: flex;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
  }

  .wsk-alert > .wsk-icon {
    color: var(--accent);
    margin-top: 0.1875rem;
  }

  .wsk-alert.wsk-info {
    background: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 35%, var(--border));
    border-left-color: var(--info);
  }

  .wsk-alert.wsk-info > .wsk-icon {
    color: var(--info);
  }

  .wsk-alert.wsk-success {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    border-left-color: var(--success);
  }

  .wsk-alert.wsk-success > .wsk-icon {
    color: var(--success);
  }

  .wsk-alert.wsk-warning {
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
    border-left-color: var(--warning);
  }

  .wsk-alert.wsk-warning > .wsk-icon {
    color: var(--warning);
  }

  .wsk-alert.wsk-danger {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    border-left-color: var(--danger);
  }

  .wsk-alert.wsk-danger > .wsk-icon {
    color: var(--danger);
  }

  .wsk-alert p {
    color: var(--muted);
    font-size: var(--type-base);
    line-height: 1.6;
    margin-top: var(--space-2);
    text-wrap: pretty;
  }

  .wsk-breadcrumb ol {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    list-style: none;
    padding: 0;
  }

  .wsk-breadcrumb li {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: var(--type-base);
    gap: var(--space-8);
  }

  .wsk-breadcrumb li:not(:last-child)::after {
    color: var(--border-strong);
    content: "/";
  }

  .wsk-breadcrumb a {
    color: var(--muted);
  }

  .wsk-breadcrumb [aria-current="page"] {
    color: var(--text);
    font-weight: 600;
  }

  .wsk-tab-list {
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: var(--space-20);
    overflow-x: auto;
  }

  .wsk-tab-list button {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: var(--type-base);
    font-weight: 600;
    min-height: 2.5rem;
    padding: 0;
    position: relative;
    transition: color 140ms ease;
  }

  /* The underline grows from the center instead of snapping in. */
  .wsk-tab-list button::after {
    background: var(--accent);
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
    bottom: -2px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .wsk-tab-list button:hover:not([aria-selected="true"]) {
    color: var(--text);
  }

  .wsk-tab-list button[aria-selected="true"] {
    color: var(--accent);
  }

  .wsk-tab-list button[aria-selected="true"]::after {
    transform: scaleX(1);
  }

  .wsk-tab-panel {
    color: var(--muted);
    font-size: var(--type-base);
    line-height: 1.6;
    padding-top: var(--space-16);
  }

  .wsk-pagination,
  .wsk-pagination > span {
    align-items: center;
    display: flex;
    gap: var(--space-4);
  }

  .wsk-pagination button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--muted);
    display: inline-flex;
    font-size: var(--type-base);
    font-variant-numeric: tabular-nums;
    height: 2rem;
    justify-content: center;
    min-width: 2rem;
    padding: 0 var(--space-8);
    transition:
      background-color 140ms ease,
      box-shadow 140ms ease,
      color 140ms ease;
  }

  .wsk-pagination button:hover:not(:disabled):not(.wsk-current) {
    background: var(--surface-soft);
    color: var(--text);
  }

  .wsk-pagination button.wsk-current {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 88%, #fff),
      var(--accent)
    );
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 20%),
      var(--shadow-accent);
    color: var(--on-accent);
    font-weight: 700;
  }

  .wsk-pagination button:disabled {
    opacity: 0.4;
  }

  .wsk-state-grid .wsk-wide-panel {
    grid-column: 1 / -1;
  }

  .wsk-progress-list {
    display: grid;
    gap: var(--space-16);
  }

  .wsk-progress-list > div {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .wsk-progress-list span,
  .wsk-progress-list strong {
    font-size: var(--type-base);
  }

  .wsk-progress-list strong {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  /* Custom-drawn progress: soft inset track, brand gradient fill. */
  .wsk-progress-list progress {
    -webkit-appearance: none;
    appearance: none;
    background: var(--surface-strong);
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 1px 2px var(--input-inset);
    grid-column: 1 / -1;
    height: 0.5rem;
    overflow: hidden;
    width: 100%;
  }

  .wsk-progress-list progress::-webkit-progress-bar {
    background: transparent;
  }

  .wsk-progress-list progress::-webkit-progress-value {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 62%, var(--accent-soft)),
      var(--accent)
    );
    border-radius: var(--radius-pill);
    transition: width 300ms ease;
  }

  .wsk-progress-list progress::-moz-progress-bar {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 62%, var(--accent-soft)),
      var(--accent)
    );
    border-radius: var(--radius-pill);
  }

  .wsk-skeleton-list {
    display: grid;
    gap: var(--space-12);
  }

  .wsk-skeleton {
    animation: wsk-shimmer 1.6s linear infinite;
    background: linear-gradient(
      100deg,
      var(--skeleton-base) 36%,
      var(--skeleton-hi) 50%,
      var(--skeleton-base) 64%
    );
    background-size: 320% 100%;
    border-radius: var(--radius-sm);
    height: 0.75rem;
    width: 92%;
  }

  .wsk-skeleton.wsk-title {
    height: 1.25rem;
    width: 45%;
  }

  .wsk-skeleton.wsk-short {
    width: 68%;
  }

  .wsk-empty-state {
    align-items: center;
    background:
      radial-gradient(
        30rem 15rem at 50% -4rem,
        color-mix(in srgb, var(--accent) 6%, transparent),
        transparent 70%
      ),
      radial-gradient(var(--grid-dot) 1px, transparent 1.2px) 0 0 / 14px 14px;
    border: 1px dashed color-mix(in srgb, var(--border-strong) 70%, transparent);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 13rem;
    padding: var(--space-24);
    text-align: center;
  }

  .wsk-empty-icon {
    align-items: center;
    background: var(--accent-soft);
    border-radius: 50%;
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-soft) 45%, transparent);
    color: var(--accent);
    display: flex;
    height: 3rem;
    justify-content: center;
    width: 3rem;
  }

  .wsk-empty-icon .wsk-icon {
    height: 1.25rem;
    width: 1.25rem;
  }

  .wsk-empty-state h3 {
    margin-top: var(--space-18);
  }

  .wsk-empty-state p {
    color: var(--muted);
    font-size: var(--type-base);
    margin: var(--space-8) 0 var(--space-20);
  }

  .wsk-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-highlight), var(--shadow-sm);
    overflow-x: auto;
  }

  .wsk-table {
    font-size: var(--type-base);
    font-variant-numeric: tabular-nums;
    min-width: 44rem;
    width: 100%;
  }

  .wsk-table th,
  .wsk-table td {
    border-bottom: 1px solid var(--border);
    padding: var(--space-12) var(--space-16);
    text-align: left;
    transition: background-color 140ms ease;
  }

  .wsk-table th[scope="col"] {
    background: var(--surface-soft);
    border-bottom: 1px solid
      color-mix(in srgb, var(--border-strong) 55%, var(--border));
    color: var(--muted);
    font-size: var(--type-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .wsk-table th[scope="row"] {
    background: var(--surface);
    font-weight: 600;
  }

  .wsk-select-cell {
    text-align: center !important;
    width: 2.75rem;
  }

  .wsk-select-cell input {
    accent-color: var(--accent);
    height: 1rem;
    width: 1rem;
  }

  .wsk-sort-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: inline-flex;
    font-size: inherit;
    font-weight: inherit;
    gap: var(--space-6);
    letter-spacing: inherit;
    padding: 0;
    transition: color 140ms ease;
  }

  .wsk-sort-button .wsk-icon {
    height: 0.875rem;
    opacity: 0.45;
    transition: opacity 140ms ease;
    width: 0.875rem;
  }

  .wsk-sort-button:hover {
    color: var(--text);
  }

  .wsk-sort-button:hover .wsk-icon,
  th[aria-sort="ascending"] .wsk-sort-button .wsk-icon,
  th[aria-sort="descending"] .wsk-sort-button .wsk-icon {
    opacity: 1;
  }

  th[aria-sort="ascending"] .wsk-sort-button,
  th[aria-sort="descending"] .wsk-sort-button {
    color: var(--accent);
  }

  .wsk-table tbody tr:has(.wsk-row-select:checked) :is(td, th[scope="row"]) {
    background: var(--accent-soft);
  }

  /* Selected rows carry a brand tick on the leading edge. */
  .wsk-table tbody tr:has(.wsk-row-select:checked) .wsk-select-cell {
    box-shadow: inset 2px 0 0 var(--accent);
  }

  .wsk-table-empty {
    color: var(--muted) !important;
    padding: 2rem !important;
    text-align: center !important;
  }

  .wsk-table td {
    background: var(--surface);
  }

  .wsk-table tbody tr:last-child :is(td, th[scope="row"]) {
    border-bottom: 0;
  }

  .wsk-table[data-density="compact"] th,
  .wsk-table[data-density="compact"] td {
    padding-block: 0.5rem;
  }

  .wsk-filter {
    max-width: 18rem;
    width: 100%;
  }

  .wsk-filter-meta {
    color: var(--muted-soft);
    font-size: var(--type-xs);
    font-variant-numeric: tabular-nums;
  }

  .wsk-table-pagination {
    justify-content: flex-end;
    margin-top: var(--space-12);
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes wsk-shimmer {
    0% {
      background-position: 100% 0;
    }
    100% {
      background-position: 0% 0;
    }
  }

  @keyframes wsk-ping {
    0% {
      opacity: 0.7;
      transform: scale(1);
    }
    70%,
    100% {
      opacity: 0;
      transform: scale(2.6);
    }
  }

  @keyframes wsk-pop {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.97);
    }
  }

  @keyframes wsk-rise {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.97);
    }
  }

  @keyframes wsk-fade {
    from {
      opacity: 0;
    }
  }

  @keyframes wsk-toast-in {
    from {
      opacity: 0;
      transform: translateY(0.5rem) scale(0.97);
    }
  }

  /* Prose — the running-text layer. The rest of this sheet styles components;
     this styles whatever an editor or a Markdown renderer produces. Scope it
     by putting .wsk-prose on the container. */
  .wsk-prose {
    color: var(--text);
    font-size: var(--type-lg);
    line-height: 1.75;
    max-width: 68ch;
    overflow-wrap: break-word;
  }

  .wsk-prose > * + * {
    margin-top: var(--space-16);
  }

  .wsk-prose :is(h2, h3, h4, h5, h6) {
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-wrap: balance;
  }

  /* Headings bind to the text that follows them, so the space above a heading
     is larger than the space below it. */
  .wsk-prose > :is(h2, h3, h4, h5, h6) + * {
    margin-top: var(--space-8);
  }

  .wsk-prose > * + :is(h2, h3, h4, h5, h6) {
    margin-top: var(--space-32);
  }

  .wsk-prose h2 {
    font-size: var(--type-2xl);
  }

  .wsk-prose h3 {
    font-size: var(--type-xl);
  }

  .wsk-prose :is(h4, h5, h6) {
    font-size: var(--type-lg);
  }

  .wsk-prose :is(h5, h6) {
    color: var(--muted);
  }

  .wsk-prose h6 {
    font-size: var(--type-base);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .wsk-prose a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .wsk-prose a:hover {
    color: var(--link-hover);
  }

  .wsk-prose :is(ul, ol) {
    padding-left: var(--space-24);
  }

  .wsk-prose li + li {
    margin-top: var(--space-6);
  }

  .wsk-prose :is(ul, ol) :is(ul, ol) {
    margin-top: var(--space-6);
  }

  .wsk-prose li::marker {
    color: var(--muted-soft);
  }

  .wsk-prose ol > li::marker {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  .wsk-prose dt {
    font-weight: 600;
  }

  .wsk-prose dd {
    color: var(--muted);
    margin-left: var(--space-24);
  }

  .wsk-prose blockquote {
    border-left: 3px solid var(--accent);
    color: var(--muted);
    margin-left: 0;
    margin-right: 0;
    padding: var(--space-4) 0 var(--space-4) var(--space-20);
  }

  .wsk-prose blockquote > * + * {
    margin-top: var(--space-12);
  }

  .wsk-prose hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin-block: var(--space-32);
  }

  .wsk-prose :is(img, video) {
    border-radius: var(--radius);
    display: block;
    height: auto;
    max-width: 100%;
  }

  .wsk-prose figure {
    margin-inline: 0;
  }

  .wsk-prose figcaption {
    color: var(--muted);
    font-size: var(--type-base);
    margin-top: var(--space-8);
    text-align: center;
  }

  .wsk-prose :is(strong, b) {
    font-weight: 700;
  }

  .wsk-prose mark {
    background: var(--warning-soft);
    border-radius: var(--radius-xs);
    color: var(--text);
    padding: 0 var(--space-4);
  }

  .wsk-prose small {
    color: var(--muted);
    font-size: var(--type-base);
  }

  .wsk-prose kbd {
    background: var(--surface-soft);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--type-xs);
    padding: var(--space-2) var(--space-6);
  }

  /* Inline code and code blocks want different backgrounds, so they are
     separate roles rather than one --code-bg doing both jobs. */
  .wsk-prose :not(pre) > code {
    background: var(--code-inline-bg);
    overflow-wrap: anywhere;
    border-radius: var(--radius-xs);
    color: var(--code-inline-text);
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: var(--space-2) var(--space-6);
  }

  .wsk-prose pre {
    background: var(--code-block-bg);
    border: 1px solid var(--code-block-border);
    border-radius: var(--radius);
    color: var(--code-block-text);
    font-size: var(--type-base);
    line-height: 1.7;
    overflow-x: auto;
    padding: var(--space-16) var(--space-20);
  }

  .wsk-prose pre code {
    font-family: var(--font-mono);
  }

  .wsk-tok-keyword {
    color: var(--syntax-keyword);
  }

  .wsk-tok-string {
    color: var(--syntax-string);
  }

  .wsk-tok-number {
    color: var(--syntax-number);
  }

  .wsk-tok-name {
    color: var(--syntax-name);
  }

  .wsk-tok-comment {
    color: var(--syntax-comment);
    font-style: italic;
  }

  .wsk-prose table {
    font-size: var(--type-base);
    width: 100%;
  }

  .wsk-prose :is(th, td) {
    border-bottom: 1px solid var(--border);
    padding: var(--space-10) var(--space-12);
    text-align: left;
  }

  .wsk-prose th {
    color: var(--muted);
    font-size: var(--type-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .wsk-prose tbody tr:nth-child(even) {
    background: var(--surface-soft);
  }

  /* Categorical labels. Semantic colours cannot carry a set of unrelated
     categories: pick four of them and two end up meaning "danger". */
  .wsk-cat {
    border-radius: var(--radius-pill);
    display: inline-flex;
    font-size: var(--type-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: var(--space-2) var(--space-10);
  }

  .wsk-cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
  }

  .wsk-cat-1 {
    background: var(--cat-1-bg);
    color: var(--cat-1-text);
  }

  .wsk-cat-2 {
    background: var(--cat-2-bg);
    color: var(--cat-2-text);
  }

  .wsk-cat-3 {
    background: var(--cat-3-bg);
    color: var(--cat-3-text);
  }

  .wsk-cat-4 {
    background: var(--cat-4-bg);
    color: var(--cat-4-text);
  }

  /* Community — the primitives a forum needs that a data console does not.
     All of them are built from existing tokens; none adds a colour. */

  /* Avatars are pure CSS: initials on a categorical tint. The kit ships no
     image assets and a forum reference should not be the first to. */
  .wsk-avatar {
    align-items: center;
    background: var(--cat-1-bg);
    border-radius: var(--radius-pill);
    color: var(--cat-1-text);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--type-xs);
    font-weight: 700;
    height: 2.25rem;
    justify-content: center;
    letter-spacing: 0.02em;
    line-height: 1;
    user-select: none;
    width: 2.25rem;
  }

  .wsk-avatar-2 {
    background: var(--cat-2-bg);
    color: var(--cat-2-text);
  }

  .wsk-avatar-3 {
    background: var(--cat-3-bg);
    color: var(--cat-3-text);
  }

  .wsk-avatar-4 {
    background: var(--cat-4-bg);
    color: var(--cat-4-text);
  }

  .wsk-avatar-sm {
    font-size: var(--type-2xs);
    height: 1.75rem;
    width: 1.75rem;
  }

  .wsk-avatar-lg {
    font-size: var(--type-xl);
    height: 3.25rem;
    width: 3.25rem;
  }

  /* Overlapping row for "who is in this thread". The ring reads as a gap
     against the card behind it. */
  .wsk-avatar-stack {
    display: inline-flex;
    padding-left: var(--space-6);
  }

  .wsk-avatar-stack .wsk-avatar {
    box-shadow: 0 0 0 2px var(--surface-raised);
    margin-left: calc(var(--space-6) * -1);
  }

  .wsk-user-row {
    align-items: center;
    display: flex;
    gap: var(--space-10);
    min-width: 0;
  }

  .wsk-user-row > div {
    min-width: 0;
  }

  .wsk-user-row strong {
    display: block;
    font-size: var(--type-base);
  }

  .wsk-user-row small {
    color: var(--muted-soft);
    display: block;
    font-size: var(--type-xs);
  }

  /* Sort controls for a card list. A table hangs sorting off its column
     headers; a list has none, so the controls are toggle buttons and the
     pressed one carries the state. */
  .wsk-sort-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .wsk-sort-group button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--muted);
    display: inline-flex;
    font-size: var(--type-xs);
    font-weight: 600;
    gap: var(--space-4);
    min-height: 1.875rem;
    padding: 0 var(--space-8);
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      color 140ms ease;
  }

  .wsk-sort-group button[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    color: var(--accent);
  }

  .wsk-sort-group button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
  }

  .wsk-sort-group .wsk-icon {
    height: 0.875rem;
    width: 0.875rem;
  }

  /* Thread rows. Modelled on .wsk-status-list > div, and like the data table
     they change background only on hover — a lift would shift the text out
     from under the pointer. */
  .wsk-thread-list {
    display: grid;
  }

  .wsk-thread {
    align-items: start;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: var(--space-14);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--space-16) var(--space-8);
    transition: background-color 140ms ease;
  }

  .wsk-thread:last-child {
    border-bottom: 0;
  }

  .wsk-thread-main {
    min-width: 0;
  }

  .wsk-thread-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
  }

  .wsk-thread-title {
    color: var(--link);
    font-size: var(--type-lg);
    font-weight: 600;
    text-decoration: none;
  }

  .wsk-thread-title:hover {
    color: var(--link-hover);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .wsk-thread-excerpt {
    -webkit-box-orient: vertical;
    color: var(--muted);
    display: -webkit-box;
    font-size: var(--type-base);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin: var(--space-6) 0 0;
    overflow: hidden;
  }

  .wsk-thread-byline {
    align-items: center;
    color: var(--muted-soft);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--type-xs);
    gap: var(--space-4) var(--space-12);
    margin-top: var(--space-8);
  }

  .wsk-thread-byline > span {
    align-items: center;
    display: inline-flex;
    gap: var(--space-4);
  }

  .wsk-thread-stats {
    display: grid;
    gap: var(--space-2);
    justify-items: end;
    min-width: 3.5rem;
  }

  .wsk-thread-stats > div {
    text-align: right;
  }

  .wsk-thread-stats strong {
    color: var(--text);
    display: block;
    font-size: var(--type-base);
    font-variant-numeric: tabular-nums;
  }

  .wsk-thread-stats small {
    color: var(--muted-soft);
    font-size: var(--type-2xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Replies are reading surfaces, not affordances: no hover lift. */
  .wsk-reply-list {
    display: grid;
    gap: var(--space-20);
  }

  .wsk-reply {
    display: grid;
    gap: var(--space-12);
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wsk-reply-body {
    min-width: 0;
  }

  .wsk-reply-head {
    align-items: center;
    color: var(--muted-soft);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--type-xs);
    gap: var(--space-4) var(--space-10);
  }

  .wsk-reply-head strong {
    color: var(--text);
    font-size: var(--type-base);
  }

  .wsk-reply-floor {
    font-variant-numeric: tabular-nums;
    margin-left: auto;
  }

  .wsk-reply-text {
    color: var(--text);
    font-size: var(--type-base);
    line-height: 1.7;
    margin: var(--space-8) 0 0;
  }

  .wsk-reply-quote {
    background: var(--surface-soft);
    border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--muted);
    font-size: var(--type-base);
    margin: var(--space-10) 0 0;
    padding: var(--space-10) var(--space-14);
  }

  .wsk-reply-quote cite {
    color: var(--muted-soft);
    display: block;
    font-size: var(--type-xs);
    font-style: normal;
    margin-bottom: var(--space-4);
  }

  .wsk-reply-quote p {
    margin: 0;
  }

  .wsk-reply-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-10);
  }

  /* A vote control is a group of buttons, so its focus ring is a real outline
     rather than a box-shadow — forced-colors mode does not paint shadows. */
  .wsk-vote {
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    display: inline-flex;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .wsk-vote button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--muted);
    display: inline-flex;
    justify-content: center;
    min-height: 1.75rem;
    min-width: 1.75rem;
    padding: 0;
    transition:
      background-color 140ms ease,
      color 140ms ease;
  }

  .wsk-vote button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
  }

  .wsk-vote-count {
    color: var(--text);
    font-size: var(--type-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 1.75rem;
    text-align: center;
  }

  .wsk-vote.wsk-is-voted {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  }

  .wsk-vote.wsk-is-voted .wsk-vote-count,
  .wsk-vote button[aria-pressed="true"] {
    color: var(--accent);
  }

  /* A tag is free-form, so it stays neutral. .wsk-cat is for boards: a fixed
     set with fixed colours. Mixing the two makes every label look categorical. */
  .wsk-tag {
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--muted);
    display: inline-flex;
    font-size: var(--type-xs);
    font-weight: 600;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-10);
    text-decoration: none;
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      color 140ms ease;
  }

  .wsk-tag-count {
    color: var(--muted-soft);
    font-variant-numeric: tabular-nums;
  }

  /* Reference application */
  .wsk-reference-shell {
    display: grid;
    gap: var(--space-32);
    grid-template-columns: 13.5rem minmax(0, 1fr);
  }

  .wsk-reference-nav {
    border-right: 1px solid var(--border);
    padding: 0 var(--space-20) var(--space-16) 0;
    position: sticky;
    top: 5rem;
  }

  .wsk-reference-brand {
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-12);
    padding: var(--space-4) var(--space-12) var(--space-18);
  }

  .wsk-reference-brand strong,
  .wsk-reference-brand span {
    display: block;
  }

  .wsk-reference-brand span {
    color: var(--muted-soft);
    font-size: var(--type-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-top: var(--space-4);
    text-transform: uppercase;
  }

  .wsk-reference-links {
    display: grid;
    gap: 0.1875rem;
  }

  .wsk-reference-links a {
    border-radius: var(--radius);
    color: var(--muted);
    display: block;
    font-size: var(--type-base);
    font-weight: 600;
    padding: var(--space-8) var(--space-12);
    text-decoration: none;
    transition:
      background-color 140ms ease,
      color 140ms ease;
  }

  .wsk-reference-links a:hover,
  .wsk-reference-links a.wsk-active {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .wsk-reference-content {
    min-width: 0;
  }

  .wsk-reference-content section,
  .wsk-reference-content .wsk-page-head,
  .wsk-forum-main section,
  [data-view^="forum"] > .wsk-page-head {
    scroll-margin-top: 5.75rem;
  }

  .wsk-section-head.wsk-compact {
    margin-bottom: var(--space-16);
  }

  .wsk-reference-split {
    align-items: stretch;
    display: grid;
    gap: var(--space-20);
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  }

  /* Page-level main + aside, modelled on .wsk-reference-split but with a page
     gutter's worth of gap. */
  .wsk-forum-shell {
    display: grid;
    gap: var(--space-32);
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
  }

  .wsk-forum-main {
    min-width: 0;
  }

  /* The aside stretches to the row's height (the grid default) so a sticky
     card inside it has somewhere to travel; align-content keeps its own cards
     packed at the top. */
  .wsk-forum-aside {
    align-content: start;
    display: grid;
    gap: var(--space-16);
    min-width: 0;
  }

  .wsk-forum-aside > * {
    min-width: 0;
  }

  .wsk-forum-aside > .wsk-is-sticky {
    position: sticky;
    top: 5rem;
  }

  /* The reference app hangs this nav on the left of its shell; here it is a
     card in the right column, so the divider and the outer padding go. */
  .wsk-forum-aside .wsk-reference-nav {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    position: static;
  }

  /* Post header and action bar. */
  /* The stat tiles are sized for the reference app's wide content column, where
     each one gets ~196px of content. Three across a 320px sidebar leaves 59px,
     which a five-digit number with separators already overflows — shrinking the
     type cannot fix that without dropping below body size. One tile per row with
     the value trailing the label fits any magnitude and keeps the display size. */
  .wsk-forum-aside .wsk-mini-metric-grid {
    gap: var(--space-8);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* An odd last tile spans the row instead of leaving a hole beside it. */
  .wsk-forum-aside .wsk-mini-metric-grid > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .wsk-forum-aside .wsk-mini-metric-grid > div {
    padding: var(--space-12) var(--space-14);
  }

  .wsk-forum-aside .wsk-mini-metric-grid strong {
    font-size: var(--type-2xl);
  }

  .wsk-post-head {
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-16);
  }

  .wsk-post-head h1 {
    margin-top: var(--space-8);
  }

  .wsk-post-meta {
    align-items: center;
    color: var(--muted-soft);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--type-xs);
    gap: var(--space-8) var(--space-16);
    margin-top: var(--space-12);
  }

  .wsk-post-meta > span {
    align-items: center;
    display: inline-flex;
    gap: var(--space-4);
  }

  .wsk-post-actions {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-24);
    padding-top: var(--space-16);
  }

  .wsk-post-actions .wsk-spacer {
    flex: 1;
  }

  .wsk-mini-metric-grid,
  .wsk-reference-card-grid,
  .wsk-process-grid,
  .wsk-service-grid,
  .wsk-auth-grid {
    align-items: stretch;
    display: grid;
    gap: var(--space-16);
  }

  .wsk-mini-metric-grid,
  .wsk-reference-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Zero specificity so the shared :where() hover / pressed rules can
     recolor these blocks like they do the process steps. */
  :where(.wsk-mini-metric-grid > div:not(.wsk-metric)) {
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: var(--space-16);
  }

  .wsk-mini-metric-grid span,
  .wsk-mini-metric-grid strong,
  .wsk-mini-metric-grid small {
    display: block;
  }

  .wsk-mini-metric-grid > div > span {
    color: var(--muted);
    font-size: var(--type-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .wsk-mini-metric-grid small {
    color: var(--muted-soft);
    font-size: var(--type-xs);
    font-weight: 400;
  }

  .wsk-mini-metric-grid strong {
    font-size: var(--type-3xl);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: var(--space-6) 0 var(--space-2);
  }

  .wsk-status-list,
  .wsk-user-list {
    display: grid;
  }

  .wsk-status-list > div,
  .wsk-user-list > div {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: var(--space-16);
    justify-content: space-between;
    padding: var(--space-12) 0;
  }

  .wsk-status-list > div:last-child,
  .wsk-user-list > div:last-child {
    border-bottom: 0;
  }

  .wsk-status-list span,
  .wsk-status-list small {
    display: block;
  }

  .wsk-status-list span {
    font-size: var(--type-base);
    font-weight: 600;
  }

  .wsk-status-list small {
    color: var(--muted-soft);
    font-size: var(--type-xs);
    font-weight: 400;
    margin-top: var(--space-2);
  }

  .wsk-status-list strong,
  .wsk-card-foot,
  .wsk-service-card > strong {
    color: var(--accent);
    font-size: var(--type-base);
  }

  .wsk-status-list strong {
    font-size: var(--type-lg);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    letter-spacing: -0.01em;
  }

  .wsk-card-foot {
    display: block;
    margin-top: var(--space-16);
  }

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

  .wsk-process-step {
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: var(--space-16);
  }

  /* "01 ——" numbering stamp: tabular digits plus an accent hairline. */
  .wsk-process-step > span,
  .wsk-service-card > span {
    align-items: center;
    color: var(--accent);
    display: inline-flex;
    font-size: var(--type-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    gap: var(--space-8);
    letter-spacing: 0.08em;
  }

  .wsk-process-step > span::after,
  .wsk-service-card > span::after {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    content: "";
    height: 1px;
    width: 1.75rem;
  }

  .wsk-process-step h3,
  .wsk-service-card h3 {
    margin-top: var(--space-12);
  }

  .wsk-process-step p,
  .wsk-service-card p {
    color: var(--muted);
    font-size: var(--type-base);
    line-height: 1.6;
    margin-top: var(--space-8);
    text-wrap: pretty;
  }

  .wsk-service-grid,
  .wsk-auth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wsk-service-card,
  .wsk-auth-card {
    background: var(--card-sheen) var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-highlight), var(--shadow-sm);
    padding: 1.375rem;
  }

  .wsk-service-card > strong {
    display: block;
    margin-top: var(--space-16);
  }

  .wsk-capability-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
  }

  .wsk-capability-list span {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: var(--type-xs);
    padding: var(--space-8) var(--space-12);
  }

  .wsk-code-panel {
    background:
      radial-gradient(120% 90% at 85% -20%, var(--code-panel-glow), transparent 55%),
      linear-gradient(180deg, var(--code-panel-bg) 0%, var(--code-panel-bg-deep) 100%);
    border: 1px solid var(--code-panel-border);
    border-radius: var(--radius-lg);
    border-top: 2px solid color-mix(in srgb, var(--accent) 45%, var(--code-panel-border));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 7%),
      var(--shadow-sm);
    color: var(--code-panel-text);
    font-family: var(--font-mono);
    font-size: var(--type-base);
    line-height: 1.8;
    margin: 0;
    overflow-x: auto;
    padding: var(--space-20);
  }

  .wsk-code-kw {
    color: var(--code-panel-keyword);
    font-weight: 650;
  }

  .wsk-code-str {
    color: var(--code-panel-string);
  }

  .wsk-auth-card {
    align-content: start;
    display: grid;
  }

  /* The login card is the reference app's conversion point: it gets a
     halo, a brand-tinted border, and the deepest resting shadow. */
  form.wsk-auth-card {
    background:
      radial-gradient(90% 55% at 50% 0%, var(--auth-halo), transparent 65%),
      var(--surface-raised);
    border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
    box-shadow:
      var(--card-highlight),
      var(--shadow-sm),
      0 24px 48px -24px var(--auth-depth);
  }

  form.wsk-auth-card:focus-within {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    box-shadow:
      var(--card-highlight),
      0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent),
      var(--shadow-hover),
      0 24px 48px -24px var(--auth-depth);
  }

  .wsk-auth-submit {
    margin-top: var(--space-20);
    width: 100%;
  }

  .wsk-register-card {
    background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface));
    box-shadow: none;
  }

  .wsk-metric span,
  .wsk-metric strong,
  .wsk-metric small {
    display: block;
  }

  .wsk-metric > span {
    color: var(--muted);
    font-size: var(--type-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .wsk-metric small {
    color: var(--muted-soft);
    font-size: var(--type-xs);
    font-weight: 400;
  }

  .wsk-metric strong {
    font-size: var(--type-display-sm);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: var(--space-10) 0 var(--space-4);
  }

  /* Metric signature: an accent bar fading rightward, a brand wash from
     the top, and a faint brand-tinted drop shadow. The bar paints from
     the border-box edge with a transparent border-top (and without the
     card highlight), so the top edge reads as a single accent line
     instead of border + bar stacked. */
  .wsk-metric {
    background:
      linear-gradient(
          90deg,
          var(--accent) 0%,
          color-mix(in srgb, var(--accent) 55%, transparent) 55%,
          transparent 92%
        )
        left top / 100% 2px no-repeat,
      radial-gradient(140% 80% at 20% 0%, var(--metric-wash), transparent 55%),
      var(--surface-raised);
    background-origin: border-box;
    border-top-color: transparent;
    box-shadow:
      var(--shadow-sm),
      0 10px 24px -16px var(--metric-glow);
  }

  :where(
    .wsk-panel,
    .wsk-metric,
    .wsk-service-card,
    .wsk-auth-card,
    .wsk-table-wrap,
    .wsk-empty-state,
    .wsk-process-step,
    .wsk-mini-metric-grid > div:not(.wsk-metric)
  ) {
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease,
      transform 160ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    :where(
      .wsk-panel,
      .wsk-metric,
      .wsk-service-card,
      .wsk-auth-card,
      .wsk-table-wrap,
      .wsk-empty-state,
      .wsk-process-step,
      .wsk-mini-metric-grid > div:not(.wsk-metric)
    ):hover {
      border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
      box-shadow: var(--card-highlight), var(--shadow-hover);
      transform: translateY(-1px);
    }

    :where(.wsk-metric):hover {
      border-top-color: transparent;
      box-shadow:
        var(--shadow-hover),
        0 12px 28px -14px var(--metric-glow);
    }

    /* The elevated login card outranks the :where() list above, so its
       hover feedback is restated at matching specificity. */
    form.wsk-auth-card:hover {
      border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
      box-shadow:
        var(--card-highlight),
        var(--shadow-hover),
        0 24px 48px -24px var(--auth-depth);
    }

    :where(
      .wsk-process-step,
      .wsk-mini-metric-grid > div:not(.wsk-metric)
    ):hover {
      background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface-soft));
    }

    .wsk-table tbody tr:not(:has(.wsk-row-select:checked)):hover
      :is(td, th[scope="row"]) {
      background: var(--surface-soft);
    }

    .wsk-thread:hover {
      background: var(--surface-soft);
    }

    .wsk-vote button:hover:not(:disabled) {
      background: var(--surface-strong);
      color: var(--text);
    }

    .wsk-sort-group button:hover:not([aria-pressed="true"]) {
      background: var(--surface-soft);
      color: var(--text);
    }

    a.wsk-tag:hover {
      background: var(--accent-soft);
      border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
      color: var(--accent);
    }
  }

  :where(form.wsk-panel):focus-within {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    box-shadow:
      var(--card-highlight),
      0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent),
      var(--shadow-hover);
  }

  @media (hover: none) {
    :where(
      .wsk-metric,
      .wsk-panel:not(form),
      .wsk-service-card,
      .wsk-auth-card:not(form),
      .wsk-empty-state,
      .wsk-process-step,
      .wsk-mini-metric-grid > div:not(.wsk-metric),
      .wsk-table-wrap
    ).wsk-is-pressed {
      background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface-raised));
      border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
      box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 10%, transparent);
      transform: scale(0.992);
    }

    .wsk-metric.wsk-is-pressed {
      border-top-color: transparent;
    }
  }

  .wsk-dialog {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow:
      var(--overlay-ring),
      var(--card-highlight),
      var(--shadow),
      0 40px 96px -24px var(--auth-depth);
    color: var(--text);
    max-width: min(30rem, calc(100vw - 2rem));
    padding: 0;
    width: 100%;
  }

  .wsk-dialog[open] {
    animation: wsk-rise 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
  }

  .wsk-dialog::backdrop {
    -webkit-backdrop-filter: blur(3px) saturate(80%);
    backdrop-filter: blur(3px) saturate(80%);
    background: var(--overlay);
  }

  .wsk-dialog[open]::backdrop {
    animation: wsk-fade 220ms ease;
  }

  .wsk-dialog-head,
  .wsk-dialog-foot {
    align-items: center;
    display: flex;
    gap: var(--space-12);
    justify-content: space-between;
    padding: var(--space-16) var(--space-20);
  }

  .wsk-dialog-head {
    border-bottom: 1px solid var(--border);
  }

  .wsk-dialog-body {
    color: var(--muted);
    line-height: 1.6;
    padding: var(--space-20);
  }

  .wsk-dialog-foot {
    border-top: 1px solid var(--border);
    justify-content: flex-end;
  }

  /* Page footer — shared by both views, so it lives outside <main> and
     repeats the page container's max-width and horizontal padding. */
  .wsk-footer {
    border-top: 1px solid var(--border);
  }

  /* Three tracks so the legal line stays centered on the footer itself,
     not on the space left over beside the project link. */
  .wsk-footer-inner {
    align-items: center;
    display: grid;
    gap: var(--space-8) var(--space-16);
    grid-template-columns: 1fr auto 1fr;
    margin: 0 auto;
    max-width: 78rem;
    padding: var(--space-14) var(--space-32);
  }

  .wsk-footer-legal {
    align-items: center;
    color: var(--muted-soft);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--type-sm);
    gap: var(--space-12);
    grid-column: 2;
    justify-content: center;
    text-align: center;
  }

  /* Wrap between the copyright and the filing number, never inside either. */
  .wsk-footer-legal > * {
    white-space: nowrap;
  }

  .wsk-footer a {
    color: var(--muted);
    text-decoration: none;
    transition: color 140ms ease;
  }

  .wsk-footer a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .wsk-footer-link {
    align-items: center;
    display: inline-flex;
    font-size: var(--type-sm);
    font-weight: 600;
    gap: var(--space-6);
    grid-column: 3;
    justify-self: end;
  }

  .wsk-footer-link .wsk-icon {
    height: 0.875rem;
    width: 0.875rem;
  }

  .wsk-toast-region {
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    display: grid;
    gap: var(--space-8);
    max-width: min(22rem, calc(100vw - 2rem));
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    width: 100%;
    z-index: 50;
  }

  .wsk-toast {
    align-items: flex-start;
    animation: wsk-toast-in 240ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    border-radius: var(--radius);
    box-shadow: var(--overlay-ring), var(--shadow);
    display: flex;
    font-size: var(--type-base);
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
  }

  .wsk-toast .wsk-icon {
    color: var(--success);
    margin-top: var(--space-2);
  }

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

  .wsk-toast.wsk-info .wsk-icon {
    color: var(--info);
  }

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

  .wsk-toast.wsk-warning .wsk-icon {
    color: var(--warning);
  }

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

  .wsk-toast.wsk-danger .wsk-icon {
    color: var(--danger);
  }

  /* Responsive behavior */
  @media (max-width: 900px) {
    .wsk-metric-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wsk-reference-shell {
      display: block;
    }

    .wsk-reference-nav {
      background: var(--surface-raised);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--card-highlight), var(--shadow-sm);
      overflow: hidden;
      padding: var(--space-10);
      position: static;
    }

    .wsk-reference-content {
      margin-top: var(--space-24);
    }

    .wsk-reference-split,
    .wsk-forum-shell {
      grid-template-columns: minmax(0, 1fr);
    }

    .wsk-process-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wsk-reference-brand {
      align-items: center;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      margin: 0 0 var(--space-8);
      padding: var(--space-8) var(--space-12) var(--space-12);
    }

    .wsk-reference-brand span {
      margin-top: 0;
    }

    .wsk-reference-links {
      display: flex;
      gap: var(--space-4);
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline proximity;
      scrollbar-width: none;
    }

    .wsk-reference-links::-webkit-scrollbar {
      display: none;
    }

    .wsk-reference-links a {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
  }

  @media (max-width: 680px) {
    .wsk-topbar {
      grid-template-columns: minmax(0, 1fr) auto;
      min-height: 0;
      padding: var(--space-10) var(--space-16) var(--space-8);
      row-gap: var(--space-8);
    }

    .wsk-view-switch {
      grid-column: 1 / -1;
      grid-row: 2;
      margin-bottom: 0;
      width: 100%;
    }

    .wsk-view-switch button {
      flex: 1;
    }

    .wsk-brand-copy {
      display: none;
    }

    .wsk-page {
      padding: 2.25rem var(--space-16) 3.5rem;
    }

    .wsk-page-head,
    .wsk-toolbar {
      align-items: stretch;
      flex-direction: column;
    }

    .wsk-page-head > .wsk-badge {
      align-self: flex-start;
    }

    .wsk-page-head p {
      font-size: var(--type-md);
    }

    .wsk-kit-index {
      align-items: stretch;
      display: block;
      margin-top: var(--space-24);
      padding: var(--space-12);
      position: static;
    }

    .wsk-kit-index-links {
      margin-top: var(--space-8);
    }

    .wsk-section {
      margin-top: var(--space-48);
    }

    /* No sticky component index at this breakpoint, so anchors only have to
       clear the topbar. These selectors mirror the base rules' specificity —
       a bare .wsk-section here would lose to .wsk-section h2[id] above. */
    .wsk-section,
    .wsk-section h2[id],
    .wsk-reference-content section,
    .wsk-reference-content .wsk-page-head,
    .wsk-forum-main section,
    [data-view^="forum"] > .wsk-page-head {
      scroll-margin-top: 7.25rem;
    }

    .wsk-demo-grid,
    .wsk-form-grid,
    .wsk-mini-metric-grid,
    .wsk-reference-card-grid,
    .wsk-process-grid,
    .wsk-service-grid,
    .wsk-auth-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .wsk-thread {
      grid-template-columns: auto minmax(0, 1fr);
      padding-left: 0;
      padding-right: 0;
    }

    .wsk-thread-stats {
      display: flex;
      gap: var(--space-16);
      grid-column: 2;
      justify-items: start;
      margin-top: var(--space-8);
    }

    .wsk-thread-stats > div {
      text-align: left;
    }

    .wsk-field.wsk-wide {
      grid-column: auto;
    }

    .wsk-filter {
      max-width: none;
    }

    .wsk-toast-region {
      bottom: 0.75rem;
      left: 0.75rem;
      right: 0.75rem;
      width: auto;
    }

    .wsk-footer-inner {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      padding: var(--space-14) var(--space-16);
    }

    .wsk-footer-legal,
    .wsk-footer-link {
      grid-column: 1;
      justify-self: center;
    }
  }

  @media (max-width: 420px) {
    .wsk-metric-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media print {
    body::before {
      display: none;
    }
  }

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

    .wsk-skeleton {
      animation: none;
      background: var(--skeleton-base);
    }

    :where(
      .wsk-panel,
      .wsk-metric,
      .wsk-service-card,
      .wsk-auth-card,
      .wsk-table-wrap,
      .wsk-empty-state,
      .wsk-process-step,
      .wsk-mini-metric-grid > div:not(.wsk-metric)
    ):hover,
    .wsk-is-pressed,
    .wsk-button:hover:not(:disabled),
    .wsk-button:active:not(:disabled),
    .wsk-icon-button:active {
      transform: none !important;
    }
  }

  /* Forced-colors mode (Windows high contrast) replaces the palette and does
     not paint box-shadow at all. Every state the kit draws as a ring, a tick,
     an underline or a tinted fill needs an outline, a border or a system
     colour to survive here. This block is last in the layer so an
     equal-specificity rule above cannot out-order it. */
  @media (forced-colors: active) {
    :is(.wsk-control, .wsk-select, .wsk-textarea):focus {
      outline: 2px solid Highlight;
      outline-offset: 1px;
    }

    /* The validation colour is forced away; carry the state by weight. */
    :is(.wsk-control, .wsk-select, .wsk-textarea)[aria-invalid="true"],
    :is(.wsk-control, .wsk-select, .wsk-textarea)[data-state="success"] {
      border-width: 2px;
    }

    /* Selection drawn as a tinted fill plus a shadow. */
    .wsk-view-switch button.wsk-is-active,
    .wsk-segmented input:checked + span,
    .wsk-pagination button.wsk-current {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }

    .wsk-tab-list button[aria-selected="true"]::after {
      background: Highlight;
    }

    .wsk-table tbody tr:has(.wsk-row-select:checked) .wsk-select-cell {
      border-left: 3px solid Highlight;
    }

    /* Decoration that carries no meaning in a forced palette. */
    body::before {
      display: none;
    }

    .wsk-empty-icon {
      box-shadow: none;
    }
  }
}