/* Generated by scripts/build-tokens.js. Do not edit directly. */
:root {
  --space-2xs: 0.2rem;
  --space-xs: 0.35rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1.25rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --font-text: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.2rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-border: #d8dde8;
  --color-border-strong: #c3cad7;
  --color-border-muted: #e5e7eb;
  --color-surface: #ffffff;
  --color-surface-muted: #f4f6fb;
  --color-surface-subtle: #eef2f8;
  --color-surface-soft: #edf1f7;
  --color-surface-ghost: #f8fafc;
  --color-surface-hover: #e5e9f4;
  --color-primary: #2563eb;
  --color-primary-soft: #e3edff;
  --color-primary-hover: #1d4fd7;
  --color-primary-strong: #1d4ed8;
  --color-primary-surface-hover: #d9e6ff;
  --color-danger: #dc2626;
  --color-danger-soft: #fde4e2;
  --color-danger-strong: #b42318;
  --color-warning: #f97316;
  --color-warning-soft: #ffe8d6;
  --color-success: #22c55e;
  --color-accent: #0ea5e9;
  --color-external: #94a3b8;
  --color-ink: #111111;
  --color-white: #ffffff;
  --themes-dark-color-text: #e5e7eb;
  --themes-dark-color-muted: #9ca3af;
  --themes-dark-color-border: #374151;
  --themes-dark-color-border-strong: #4b5563;
  --themes-dark-color-border-muted: #4b5563;
  --themes-dark-color-surface: #111827;
  --themes-dark-color-surface-muted: #0f172a;
  --themes-dark-color-surface-subtle: #0b1221;
  --themes-dark-color-surface-soft: #1f2937;
  --themes-dark-color-surface-ghost: #0f172a;
  --themes-dark-color-surface-hover: #1f2937;
  --themes-dark-color-primary: #60a5fa;
  --themes-dark-color-primary-soft: #1d4ed8;
  --themes-dark-color-primary-hover: #3b82f6;
  --themes-dark-color-primary-strong: #93c5fd;
  --themes-dark-color-primary-surface-hover: #1e293b;
  --themes-dark-color-danger: #f87171;
  --themes-dark-color-danger-soft: #7f1d1d;
  --themes-dark-color-danger-strong: #fca5a5;
  --themes-dark-color-warning: #fb923c;
  --themes-dark-color-warning-soft: #7c2d12;
  --themes-dark-color-success: #34d399;
  --themes-dark-color-accent: #22d3ee;
  --themes-dark-color-external: #94a3b8;
  --themes-dark-color-ink: #f9fafb;
  --themes-dark-color-white: #0b1221;
  --themes-dark-shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  --themes-dark-shadow-primary-glow: 0 10px 24px -16px rgba(96, 165, 250, 0.8);
  --shadow-lg: 0 18px 36px -22px rgba(15, 23, 42, 0.45);
  --shadow-primary-glow: 0 8px 18px -14px rgba(37, 99, 235, 0.8);
  --transition: 160ms ease;
  --blockscape-tile: 6.5rem;
  --blockscape-gap: var(--space-md);
  --blockscape-radius: var(--radius-lg);
  --blockscape-foreground: var(--color-text);
  --blockscape-muted: var(--color-muted);
  --blockscape-border: var(--color-border);
  --blockscape-surface: var(--color-surface);
  --blockscape-surface-alt: var(--color-surface-muted);
  --blockscape-dep: var(--color-primary);
  --blockscape-revdep: #ef4444;
  --blockscape-reused: var(--color-warning);
  --blockscape-external: var(--color-external);
  --blockscape-tile-hover-scale: 1.5;
  --blockscape-tile-hover-scale-inverse: calc(1 / var(--blockscape-tile-hover-scale));
  --blockscape-tile-hover-text-portion: 0.25;
  --blockscape-selection-dim-opacity: 0.2;
  --blockscape-selection-dim-applied-opacity: var(--blockscape-selection-dim-opacity);
  --blockscape-title-hover-width-multiplier: 1.3;
  --blockscape-title-white-space: normal;
  --blockscape-title-text-wrap: normal;
  --blockscape-tile-compactness: 1;
  --blockscape-logo-size: 40px;
  --blockscape-tile-padding-top: var(--space-xs);
  --blockscape-tile-padding-bottom: var(--space-sm);
  --blockscape-tile-padding-x: var(--space-md);
  --blockscape-tile-gap-inner: calc(var(--space-2xs) * 0.5);
  --palette-letter-a: #0284c7;
  --palette-letter-b: #3b82f6;
  --palette-letter-c: #06b6d4;
  --palette-letter-d: #a855f7;
  --palette-letter-e: #f59e0b;
  --palette-letter-f: #f97316;
  --palette-letter-g: #22c55e;
  --palette-letter-h: #84cc16;
  --palette-letter-i: #10b981;
  --palette-letter-j: #14b8a6;
  --palette-letter-k: #0ea5e9;
  --palette-letter-l: #60a5fa;
  --palette-letter-m: #8b5cf6;
  --palette-letter-n: #d946ef;
  --palette-letter-o: #e879f9;
  --palette-letter-p: #67e8f9;
  --palette-letter-q: #4ade80;
  --palette-letter-r: #facc15;
  --palette-letter-s: #eab308;
  --palette-letter-t: #a3e635;
  --palette-letter-u: #22d3ee;
  --palette-letter-v: #38bdf8;
  --palette-letter-w: #818cf8;
  --palette-letter-x: #a78bfa;
  --palette-letter-y: #f472b6;
  --palette-letter-z: #fb7185;
  --palette-letter-fallback: #9ca3af;
}
:root[data-theme="dark"] {
  --color-text: #e5e7eb;
  --color-muted: #9ca3af;
  --color-border: #374151;
  --color-border-strong: #4b5563;
  --color-border-muted: #4b5563;
  --color-surface: #111827;
  --color-surface-muted: #0f172a;
  --color-surface-subtle: #0b1221;
  --color-surface-soft: #1f2937;
  --color-surface-ghost: #0f172a;
  --color-surface-hover: #1f2937;
  --color-primary: #60a5fa;
  --color-primary-soft: #1d4ed8;
  --color-primary-hover: #3b82f6;
  --color-primary-strong: #93c5fd;
  --color-primary-surface-hover: #1e293b;
  --color-danger: #f87171;
  --color-danger-soft: #7f1d1d;
  --color-danger-strong: #fca5a5;
  --color-warning: #fb923c;
  --color-warning-soft: #7c2d12;
  --color-success: #34d399;
  --color-accent: #22d3ee;
  --color-external: #94a3b8;
  --color-ink: #f9fafb;
  --color-white: #0b1221;
  --shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  --shadow-primary-glow: 0 10px 24px -16px rgba(96, 165, 250, 0.8);
}
:root {
  color-scheme: light;
  --blockscape-scale: 1;
  --blockscape-tile-base: 6.5rem;
  --blockscape-gap-base: var(--space-md);
  --blockscape-logo-size-base: 40px;
  --blockscape-tile-padding-top-base: var(--space-xs);
  --blockscape-tile-padding-bottom-base: var(--space-sm);
  --blockscape-tile-padding-x-base: var(--space-md);
  --blockscape-tile-gap-inner-base: calc(var(--space-2xs) * 0.5);
  --blockscape-bg-image: none;
  --blockscape-bg-opacity: 0;
  --blockscape-bg-preview-height: 160px;
}
:root {
      --blockscape-sidebar-bg-opacity: 0;
      --blockscape-tile: calc(var(--blockscape-tile-base) * var(--blockscape-scale));
      --blockscape-gap: calc(var(--blockscape-gap-base) * var(--blockscape-scale));
      --blockscape-logo-size: calc(var(--blockscape-logo-size-base) * var(--blockscape-scale));
      --blockscape-tile-padding-top: calc(var(--blockscape-tile-padding-top-base) * var(--blockscape-scale));
      --blockscape-tile-padding-bottom: calc(var(--blockscape-tile-padding-bottom-base) * var(--blockscape-scale));
      --blockscape-tile-padding-x: calc(var(--blockscape-tile-padding-x-base) * var(--blockscape-scale));
  --blockscape-tile-gap-inner: calc(var(--blockscape-tile-gap-inner-base) * var(--blockscape-scale));
}
*,
    *::before,
    *::after {
      box-sizing: border-box;
    }
html,
    body {
      height: 100%;
    }
body {
      margin: 0;
      background: var(--color-surface-subtle);
      color: var(--color-text);
      font-family: var(--font-text);
      -webkit-font-smoothing: antialiased;
    }
.blockscape-root {
      --blockscape-logo-offset: -25px;
      --blockscape-name-offset: -45px;
      position: relative;
      isolation: isolate;
    }
.blockscape-root::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--blockscape-bg-image);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: var(--blockscape-bg-opacity);
      pointer-events: none;
      z-index: 0;
    }
.blockscape-root > * {
      position: relative;
      z-index: 1;
    }
.blockscape-bg-preview {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: var(--blockscape-bg-preview-height);
      background-image: var(--blockscape-bg-image);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: var(--blockscape-bg-opacity);
      pointer-events: none;
      z-index: 2;
      transition: opacity 120ms ease, filter 120ms ease;
      filter: saturate(1.05);
      display: none;
    }
a {
      color: inherit;
    }
.pf-v5-c-page {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }
.pf-v5-c-page__header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--color-surface);
      box-shadow: 0 1px 0 var(--color-border);
    }
.blockscape-masthead {
      border-bottom: none;
    }
.blockscape-toolbar {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: var(--space-md);
      padding: var(--space-sm) var(--space-lg);
      width: min(1180px, 100%);
      margin: 0 auto;
    }
.blockscape-toolbar__github {
      margin-left: auto;
      border-radius: var(--radius-lg);
      color: var(--color-muted);
    }
.blockscape-toolbar__github:hover {
      background: var(--color-surface-muted);
      color: var(--blockscape-foreground);
    }
.blockscape-brand {
      display: inline-flex;
      align-items: flex-start;
      gap: var(--space-sm);
      font-weight: var(--font-weight-bold);
      font-size: var(--font-size-lg);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-right: var(--space-sm);
    }
.blockscape-brand h1 {
      font: inherit;
      margin: 0;
    }
.blockscape-brand__logo {
      display: block;
      height: 52px;
      width: auto;
      max-width: 320px;
    }
.blockscape-toolbar__controls {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      flex: 1 1 auto;
      min-width: 280px;
    }
.blockscape-toolbar__primary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-sm);
    }
.blockscape-zoom {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-2xs);
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      background: var(--color-surface-muted);
      box-shadow: var(--shadow-xs);
    }
.blockscape-zoom__label {
      font-size: var(--font-size-xs);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-muted);
      margin-right: var(--space-2xs);
    }
.blockscape-zoom__button,
    .blockscape-zoom__reset {
      padding: var(--space-2xs) var(--space-xs);
      min-width: 2.2rem;
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-medium);
      line-height: 1;
    }
.blockscape-zoom__reset {
      font-variant-numeric: tabular-nums;
      min-width: 3.4rem;
    }
.blockscape-toolbar__toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      font-weight: var(--font-weight-medium);
      white-space: nowrap;
      min-width: 0;
      justify-content: center;
      padding: var(--space-2xs) var(--space-sm);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      font-size: var(--font-size-xs);
    }
.blockscape-toolbar__toggle-label {
      letter-spacing: 0.02em;
      text-transform: none;
      font-size: inherit;
    }
.blockscape-toolbar__toggle-icon {
      font-size: 1em;
      line-height: 1;
      display: inline-block;
      transition: transform 0.2s ease;
    }
.blockscape-toolbar__controls[data-expanded="true"] .blockscape-toolbar__toggle-icon {
      transform: rotate(180deg);
    }
.blockscape-toolbar__controls[data-expanded="true"] .blockscape-toolbar__toggle {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-md);
      background: var(--color-surface);
    }
.blockscape-bg-controls {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      flex-wrap: wrap;
      max-width: 520px;
    }
.blockscape-bg-controls input[type="url"] {
      min-width: 220px;
      flex: 1 1 240px;
    }
.blockscape-bg-controls .bg-opacity {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      font-size: var(--font-size-sm);
      color: var(--color-muted);
      white-space: nowrap;
    }
.blockscape-toolbar__extras {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-sm);
      flex: 1 1 100%;
      width: 100%;
      margin-top: var(--space-sm);
      padding-top: var(--space-xs);
      border-top: 1px solid var(--color-border);
      justify-content: flex-start;
    }
.blockscape-toolbar__extras[hidden] {
      display: none;
    }
.blockscape-toolbar__github {
      align-self: flex-start;
    }
.blockscape-search {
      position: relative;
      flex: 1 1 240px;
      min-width: 200px;
    }
.blockscape-search input {
      width: 100%;
    }
.blockscape-url-form {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin: 0;
    }
.url-hint {
      min-height: 1.2rem;
      font-size: var(--font-size-xs);
      color: var(--color-muted);
      margin-left: 0.1rem;
    }
.apicurio-controls {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      min-width: 18rem;
    }
.apicurio-subnote {
      margin-top: -0.25rem;
    }
.apicurio-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
    }
.blockscape-settings-panel .settings-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      color: var(--blockscape-foreground);
      cursor: pointer;
    }
.blockscape-settings-panel .settings-toggle input[type="checkbox"] {
      width: 1.2rem;
      height: 1.2rem;
      accent-color: var(--color-primary);
      margin: 0;
      flex-shrink: 0;
    }
.settings-radio {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      font-size: var(--font-size-sm);
      color: var(--blockscape-foreground);
    }
.settings-radio__label {
      font-weight: var(--font-weight-medium);
    }
.settings-radio__options {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      align-items: center;
    }
.settings-radio__option {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      cursor: pointer;
      font-weight: var(--font-weight-medium);
    }
.settings-radio__hint {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }
.settings-radio input[type="radio"] {
      accent-color: var(--color-primary);
      margin: 0;
    }
.settings-slider {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--space-sm);
      font-size: var(--font-size-sm);
      color: var(--blockscape-foreground);
      width: min(320px, 100%);
    }
.settings-text {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-2xs);
      font-size: var(--font-size-sm);
      color: var(--blockscape-foreground);
      width: min(320px, 100%);
    }
.settings-text__text {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.settings-text__label {
      font-weight: var(--font-weight-medium);
    }
.settings-text__hint {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }
.settings-text__row {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }
.settings-text__row .settings-text__text {
      flex: 1;
    }
.settings-text__row select.settings-text__input {
      max-width: 10rem;
    }
.settings-text__input {
      width: 100%;
      padding: var(--space-xs) var(--space-sm);
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      color: var(--blockscape-foreground);
      font-size: var(--font-size-sm);
    }
.settings-text__input:focus-visible {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }
.settings-note {
      margin: 0;
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }
.settings-note a {
      color: inherit;
      text-decoration: underline;
    }
.settings-slider__text {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      min-width: 0;
    }
.settings-slider__label {
      font-weight: var(--font-weight-medium);
    }
.settings-slider__hint {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }
.settings-slider__value {
      font-variant-numeric: tabular-nums;
      color: var(--color-muted);
      justify-self: end;
    }
.settings-slider__input {
      grid-column: 1 / -1;
      width: 100%;
    }
.settings-slider input[type="range"] {
      accent-color: var(--color-primary);
    }
.settings-toggle__text {
      display: inline-flex;
      align-items: baseline;
      gap: var(--space-xs);
      flex-wrap: wrap;
    }
.settings-toggle__label {
      font-weight: var(--font-weight-medium);
    }
.settings-toggle__hint {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }
.apicurio-artifacts {
      border: 1px dashed var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-sm);
      background: var(--color-surface-muted);
      min-height: 3rem;
      font-size: var(--font-size-sm);
    }
.apicurio-artifact-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.apicurio-artifact {
      width: 100%;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: var(--color-surface);
      padding: var(--space-xs);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: var(--space-2xs);
      cursor: pointer;
      font-size: var(--font-size-sm);
      transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    }
.apicurio-artifact:hover,
    .apicurio-artifact:focus-visible {
      border-color: var(--color-primary);
      background: var(--color-primary-soft);
      outline: none;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
    }
.apicurio-artifact-title {
      font-weight: var(--font-weight-semibold);
    }
.apicurio-artifact-meta {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }
.apicurio-version-list {
      margin-top: var(--space-xs);
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.apicurio-version-button {
      border: 1px dashed var(--color-border);
      border-radius: var(--radius-sm);
      padding: var(--space-2xs) var(--space-xs);
      background: var(--color-surface);
      font-size: var(--font-size-xs);
      cursor: pointer;
      text-align: left;
    }
.apicurio-version-button:hover,
    .apicurio-version-button:focus-visible {
      border-color: var(--color-primary);
      background: var(--color-primary-soft);
      outline: none;
    }
.apicurio-settings {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-2xs) var(--space-sm) var(--space-xs);
      background: var(--color-surface);
      font-size: var(--font-size-xs);
    }
.apicurio-settings summary {
      cursor: pointer;
      font-weight: var(--font-weight-semibold);
      list-style: none;
      display: flex;
      align-items: center;
      gap: var(--space-2xs);
    }
.apicurio-settings summary::marker,
    .apicurio-settings summary::-webkit-details-marker {
      display: none;
    }
.apicurio-fields {
      display: grid;
      gap: var(--space-xs);
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
      margin-top: var(--space-xs);
    }
.apicurio-fields label {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.apicurio-fields input {
      font-size: var(--font-size-xs);
      padding: var(--space-2xs) var(--space-xs);
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      color: inherit;
    }
.apicurio-hint {
      margin: var(--space-xs) 0 0;
      color: var(--color-muted);
      font-size: var(--font-size-xs);
    }
.apicurio-status {
      font-size: var(--font-size-xs);
      min-height: 1rem;
      color: var(--color-muted);
    }
.apicurio-status.is-error {
      color: var(--color-danger);
    }
.apicurio-status.is-success {
      color: var(--color-accent);
    }
.blockscape-toolbar__controls .pf-v5-c-form-control {
      min-width: 11rem;
    }
.blockscape-toolbar__controls .pf-v5-c-form-control.is-url {
      min-width: 14rem;
    }
.blockscape-file {
      position: relative;
    }
.blockscape-file input[type="file"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }
.pf-v5-c-button {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      border-radius: 999px;
      border: 1px solid transparent;
      padding: 0.4rem 0.95rem;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      line-height: 1;
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
      background: transparent;
      color: var(--blockscape-foreground);
    }
.pf-v5-c-button:hover {
      box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.4);
    }
.pf-v5-c-button:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    }
.pf-v5-c-button.pf-m-primary {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-white);
    }
.pf-v5-c-button.pf-m-primary:hover {
      background: var(--color-primary-hover);
      border-color: var(--color-primary-hover);
    }
.pf-v5-c-button.pf-m-secondary {
      background: var(--color-surface-muted);
      border-color: var(--color-border-strong);
      color: var(--blockscape-foreground);
    }
.pf-v5-c-button.pf-m-secondary:hover {
      background: var(--color-surface-hover);
    }
.pf-v5-c-button.pf-m-tertiary {
      background: transparent;
      border-color: var(--color-border);
      color: var(--color-muted);
    }
.pf-v5-c-button.pf-m-tertiary:hover {
      color: var(--blockscape-foreground);
      border-color: var(--color-border-strong);
      background: var(--color-surface-muted);
    }
.pf-v5-c-button.pf-m-plain {
      border: none;
      padding: 0.35rem;
      color: var(--color-muted);
      border-radius: 50%;
    }
.pf-v5-c-button.pf-m-plain:hover {
      background: var(--color-surface-muted);
      color: var(--blockscape-foreground);
      box-shadow: none;
    }
.pf-v5-c-form-control {
      height: 2.5rem;
      padding: 0 0.85rem;
      border-radius: 999px;
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      font-family: inherit;
      font-size: var(--font-size-sm);
      color: inherit;
      transition: border-color var(--transition), box-shadow var(--transition);
    }
.pf-v5-c-form-control::placeholder {
      color: var(--color-muted);
      opacity: 0.75;
    }
.pf-v5-c-form-control:focus-visible {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    }
.search-results {
      position: absolute;
      top: calc(100% + 0.35rem);
      left: 0;
      right: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      max-height: 22rem;
      overflow-y: auto;
      z-index: 25;
    }
.search-results[hidden] {
      display: none;
    }
.search-result {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2xs);
      padding: var(--space-sm) var(--space-md);
      background: transparent;
      border: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      border-bottom: 1px solid var(--color-border);
      transition: background var(--transition), border-color var(--transition);
      font: inherit;
      color: inherit;
    }
.search-result:last-child {
      border-bottom: none;
    }
.search-result:hover,
    .search-result:focus-visible {
      background: var(--color-surface-muted);
      outline: none;
    }
.search-result.is-active {
      background: var(--color-primary-soft);
      border-color: var(--color-border-strong);
    }
.search-result__primary {
      font-weight: var(--font-weight-semibold);
      display: inline-flex;
      gap: var(--space-xs);
      align-items: center;
    }
.search-result__badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: 0 var(--space-xs);
      border-radius: 999px;
      border: 1px solid var(--color-border);
      background: var(--color-surface-subtle);
      color: var(--color-muted);
      font-size: var(--font-size-xs);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
.search-result__meta {
      display: flex;
      gap: var(--space-xs);
      flex-wrap: wrap;
      align-items: center;
      color: var(--color-muted);
      font-size: var(--font-size-sm);
    }
.search-result__meta strong {
      color: var(--blockscape-foreground);
      font-weight: var(--font-weight-semibold);
    }
.search-results__empty {
      padding: var(--space-sm) var(--space-md);
      color: var(--color-muted);
      font-size: var(--font-size-sm);
    }
.blockscape-legend {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      font-size: var(--font-size-xs);
      color: var(--blockscape-muted);
      font-weight: var(--font-weight-medium);
      flex-wrap: wrap;
    }
.blockscape-map-legend {
      display: flex;
      justify-content: flex-end;
      margin-bottom: var(--space-sm);
    }
.blockscape-map-legend .blockscape-legend {
      padding: var(--space-xs) var(--space-sm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-surface-muted);
      box-shadow: var(--shadow-sm);
    }
.legend-entry {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      white-space: nowrap;
    }
.legend-dot {
      width: 0.65rem;
      height: 0.65rem;
      border-radius: 50%;
      border: 1px solid var(--blockscape-border);
    }
.legend-dot--dep {
      background: var(--color-primary-soft);
      border-color: var(--blockscape-dep);
    }
.legend-dot--revdep {
      background: var(--color-danger-soft);
      border-color: var(--blockscape-revdep);
    }
.legend-dot--reused {
      background: var(--color-warning-soft);
      border-color: var(--blockscape-reused);
    }
.legend-dot--external {
      background: var(--color-surface-soft);
      border-color: var(--blockscape-external);
    }
.pf-v5-c-page__main {
      flex: 1 1 auto;
    }
.blockscape-footer {
      background: var(--color-surface);
      border-top: 1px solid var(--color-border);
      padding: var(--space-md) 0 var(--space-lg);
    }
.blockscape-footer__inner {
      width: min(1180px, calc(100% - 2 * var(--space-lg)));
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: var(--font-size-sm);
      color: var(--color-muted);
      gap: var(--space-sm);
    }
.blockscape-footer a {
      color: var(--color-primary);
      text-decoration: none;
      font-weight: var(--font-weight-medium);
    }
.blockscape-footer a:hover,
    .blockscape-footer a:focus-visible {
      text-decoration: underline;
    }
.blockscape-content {
      display: flex;
      gap: var(--space-lg);
      width: min(1180px, calc(100% - 2 * var(--space-lg)));
      margin: 0 auto;
      padding: var(--space-lg) 0 var(--space-xl);
      align-items: flex-start;
    }
.blockscape-sidebar {
      flex: 0 0 240px;
      background: var(--blockscape-surface);
      border: 1px solid var(--blockscape-border);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      box-shadow: var(--shadow-lg);
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      max-height: calc(100vh - 2 * var(--space-lg));
      overflow: hidden;
      position: relative;
      isolation: isolate;
    }
.blockscape-sidebar::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--blockscape-bg-image);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: var(--blockscape-sidebar-bg-opacity);
      pointer-events: none;
      z-index: 0;
      border-radius: inherit;
    }
.blockscape-sidebar > * {
      position: relative;
      z-index: 1;
    }
@media (min-width: 1025px) {
      .blockscape-server-mode.blockscape-server-sidebar-wide
        .blockscape-content {
        width: min(1800px, calc(100% - 2 * var(--space-lg)));
      }

      .blockscape-server-mode.blockscape-server-sidebar-wide
        .blockscape-sidebar {
        flex: 0 0 720px;
      }
    }
.sidebar-heading {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-semibold);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--blockscape-muted);
    }
.model-nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding-right: var(--space-2xs);
    }
.model-nav-list li {
      margin: 0;
      padding: 0;
    }
.model-nav-button {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: var(--space-2xs);
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--color-text);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      padding: var(--space-sm);
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition), color var(--transition);
    }
.model-nav-button:hover,
    .model-nav-button:focus-visible {
      outline: none;
      border-color: var(--color-border);
      background: var(--color-surface-muted);
    }
.model-nav-button.is-active {
      border-color: var(--color-primary);
      background: var(--color-primary-soft);
      color: var(--color-primary);
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1);
    }
.model-nav-label {
      font-weight: var(--font-weight-semibold);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2xs);
    }
.model-nav-title {
      font-size: var(--font-size-sm);
    }
.model-nav-id {
      font-size: var(--font-size-xs);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--blockscape-muted);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      padding: 0 var(--space-2xs);
      background: var(--color-surface-muted);
    }
.model-nav-meta {
      font-size: var(--font-size-xs);
      color: var(--blockscape-muted);
    }
.model-nav-empty {
      font-size: var(--font-size-xs);
      color: var(--blockscape-muted);
    }
.model-actions {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }
.model-actions .pf-v5-c-button {
      width: 100%;
    }
.local-backend {
      margin-top: var(--space-lg);
      padding: var(--space-sm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface-muted);
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }
.local-backend[hidden] {
      display: none !important;
    }
.local-backend__status {
      margin: 0;
      font-size: var(--font-size-xs);
    }
.local-backend__list {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }
.local-backend__list select[multiple] {
      height: auto;
      min-height: 14rem;
      max-height: 20rem;
      overflow: auto;
      width: 100%;
      padding: var(--space-2xs) var(--space-xs);
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      color: var(--blockscape-foreground);
      font-size: var(--font-size-sm);
      font-family: inherit;
      line-height: 1.3;
      appearance: auto;
      -webkit-appearance: auto;
      -moz-appearance: auto;
      box-shadow: none;
    }
.local-backend__dir {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.local-backend__dir label {
      font-size: var(--font-size-xs);
      color: var(--blockscape-muted);
    }
.local-backend__dir select {
      width: 100%;
      font-size: var(--font-size-sm);
    }
.local-backend__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }
.local-backend__actions .pf-v5-c-button {
      flex: 1 1 120px;
    }
.local-backend__save-actions {
      display: flex;
      gap: var(--space-xs);
    }
.local-backend__save-actions .pf-v5-c-button {
      flex: 1 1 50%;
    }
.local-backend__save {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.local-backend__save label {
      font-size: var(--font-size-xs);
      color: var(--blockscape-muted);
    }
.local-backend__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-xs);
    }
.local-backend__header .pf-v5-c-button {
      white-space: nowrap;
    }
.blockscape-main {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
      position: relative;
      isolation: isolate;
      background: transparent;
    }
.blockscape-main > * {
      position: relative;
      z-index: 1;
    }
.blockscape-json-panel,
    .blockscape-main-section {
      width: 100%;
      margin: 0;
    }
.blockscape-json-panel {
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }
.blockscape-settings-panel {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      padding: var(--space-sm);
      margin-top: var(--space-xs);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface-muted);
    }
.settings-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-xs);
    }
.blockscape-settings-panel__title {
      margin: 0;
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-size-sm);
    }
.color-presets {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      margin-top: var(--space-xs);
    }
.color-presets__list {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.color-presets__row,
    .color-presets__add {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: var(--space-xs);
      align-items: center;
    }
.settings-color-rows {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      margin-top: var(--space-2xs);
    }
.settings-color-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
    }
.settings-color-row__label {
      display: flex;
      flex-direction: column;
      font-size: var(--font-size-sm);
    }
.settings-color-row__hint {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }
.settings-color-input {
      width: 3rem;
      height: 2.25rem;
      padding: 0;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: var(--color-surface);
    }
.blockscape-json-panel__title {
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-size-sm);
      margin: 0;
    }
.blockscape-json-panel .muted {
      font-size: var(--font-size-xs);
      margin: 0;
      line-height: 1.4;
    }
.blockscape-json-controls {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-md);
      align-items: flex-start;
    }
.blockscape-json-controls textarea {
      flex: 1 1 22rem;
      min-height: 12rem;
      font-family: var(--font-mono);
      font-size: var(--font-size-sm);
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      padding: var(--space-sm) var(--space-md);
      background: var(--color-surface-muted);
      color: var(--blockscape-foreground);
      resize: vertical;
      transition: border-color var(--transition), box-shadow var(--transition);
    }
.blockscape-json-controls textarea:focus-visible {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
      background: var(--color-surface);
    }
.blockscape-json-actions {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      min-width: 12rem;
    }
.blockscape-main-section {
      padding: 0 var(--space-lg) var(--space-xl);
      position: relative;
      isolation: isolate;
    }
.blockscape-main-section > * {
      position: relative;
      z-index: 1;
    }
.blockscape-model-meta {
      margin-bottom: var(--space-md);
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.blockscape-model-meta__details {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      align-items: center;
    }
.version-nav {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "title controls"
        "status controls"
        "thumbs thumbs";
      align-items: center;
      gap: var(--space-2xs) var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      margin-bottom: var(--space-md);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
    }
.version-nav__title {
      grid-area: title;
      font-weight: var(--font-weight-semibold);
      color: var(--color-text);
    }
.version-nav__status {
      grid-area: status;
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }
.version-nav__controls {
      grid-area: controls;
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      justify-self: end;
      flex-shrink: 0;
      white-space: nowrap;
    }
.version-nav__button {
      border: 1px solid var(--color-border);
      background: var(--color-surface-muted);
      color: var(--color-text);
      font-size: var(--font-size-xs);
      padding: var(--space-2xs) var(--space-sm);
      border-radius: var(--radius-sm);
      cursor: pointer;
    }
.version-nav__button:hover,
    .version-nav__button:focus-visible {
      background: var(--color-primary-soft);
      border-color: var(--color-primary);
      outline: none;
    }
.version-nav__button--add {
      font-weight: var(--font-weight-bold);
      min-width: 2.5rem;
    }
.version-nav__thumbs {
      grid-area: thumbs;
      display: flex;
      gap: var(--space-2xs);
      overflow-x: auto;
      padding: var(--space-2xs) 0;
      width: 100%;
      scrollbar-gutter: stable;
    }
.version-nav__thumb {
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      border-radius: var(--radius-sm);
      padding: 0.35rem 0.4rem 0.45rem;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2xs);
      cursor: pointer;
      min-width: 104px;
      transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
      position: relative;
    }
.version-nav__thumb img {
      width: 54px;
      height: 92px;
      object-fit: cover;
      border-radius: var(--radius-xs, 4px);
      background: var(--color-surface-muted);
      border: 1px solid var(--color-border);
      transform: rotate(90deg);
      transform-origin: center center;
    }
.version-nav__thumb-label {
      font-size: var(--font-size-2xs, 0.75rem);
      color: var(--color-muted);
      width: 100%;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
    }
.version-nav__thumb-label-text {
      display: inline-block;
      min-width: 100%;
      padding-right: var(--space-lg);
      transform: translateX(0);
    }
.version-nav:hover .version-nav__thumb-label--scroll .version-nav__thumb-label-text,
    .version-nav:focus-within .version-nav__thumb-label--scroll .version-nav__thumb-label-text {
      animation: version-thumb-marquee var(--marquee-duration, 6s) linear infinite;
    }
@keyframes version-thumb-marquee {
      0%, 10% {
        transform: translateX(0);
      }
      90%, 100% {
        transform: translateX(calc(-1 * var(--marquee-distance, 0px)));
      }
    }
.version-nav__thumb.is-active {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
      transform: translateY(-1px);
    }
.version-nav__thumb-remove {
      position: absolute;
      top: 4px;
      left: 4px;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: rgba(15, 23, 42, 0.08);
      color: var(--color-muted);
      font-size: 0.8rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      z-index: 1;
      transition: opacity var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
    }
.version-nav__thumb:hover .version-nav__thumb-remove,
    .version-nav__thumb:focus-within .version-nav__thumb-remove {
      opacity: 1;
      pointer-events: auto;
    }
.version-nav__thumb-remove:hover,
    .version-nav__thumb-remove:focus-visible {
      background: var(--color-surface);
      border-color: var(--color-border);
      color: var(--color-text);
      outline: none;
    }
@media (max-width: 720px) {
      .version-nav {
        grid-template-columns: 1fr;
        grid-template-areas:
          "title"
          "status"
          "controls"
          "thumbs";
        align-items: flex-start;
      }

      .version-nav__controls {
        justify-self: start;
      }
    }
.version-nav__thumb:focus-visible,
    .version-nav__thumb:hover {
      border-color: var(--color-primary);
      outline: none;
    }
.version-nav__thumb--category {
      border-style: dashed;
      background: rgba(59, 130, 246, 0.06);
    }
.version-nav__thumb--category .version-nav__thumb-label-text {
      font-style: italic;
    }
.version-nav__thumb--add {
      border: 1px dashed var(--color-border);
      background: var(--color-surface-muted);
      justify-content: center;
      align-items: center;
      display: inline-flex;
      padding: 0.5rem;
      min-width: 100px;
      min-height: 104px;
      color: var(--color-muted);
      font-weight: var(--font-weight-bold);
      font-size: 1.2rem;
      gap: 0;
    }
.version-nav__thumb--add:hover,
    .version-nav__thumb--add:focus-visible {
      background: var(--color-primary-soft);
      color: var(--color-primary);
      border-color: var(--color-primary);
      outline: none;
    }
.version-nav__thumb-add-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      line-height: 1;
    }
.blockscape-model-title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text);
    }
.blockscape-model-id {
      display: inline-flex;
      align-items: baseline;
      gap: var(--space-2xs);
      font-size: var(--font-size-xs);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--blockscape-muted);
    }
.blockscape-model-id__label {
      color: var(--color-text);
      font-weight: var(--font-weight-semibold);
    }
.blockscape-model-id__value {
      color: var(--blockscape-muted);
    }
.blockscape-tabs {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      margin-top: var(--space-md);
    }
.blockscape-tabrow {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      flex-wrap: wrap;
    }
.blockscape-tabactions {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      margin-left: auto;
      padding-bottom: var(--space-2xs);
    }
.blockscape-tab-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-2xs) var(--space-xs);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface);
      color: var(--blockscape-muted);
      font-size: var(--font-size-sm);
      cursor: pointer;
      line-height: 1.2;
      box-shadow: var(--shadow-sm);
    }
.blockscape-tab-toggle__label {
      white-space: nowrap;
    }
.blockscape-tab-toggle input {
      width: 1rem;
      height: 1rem;
      accent-color: var(--color-action-primary, #2563eb);
    }
.blockscape-tablist {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
      border-bottom: 1px solid var(--color-border);
    }
.blockscape-tab {
      appearance: none;
      border: 1px solid transparent;
      border-bottom: none;
      border-radius: var(--radius-md) var(--radius-md) 0 0;
      background: transparent;
      padding: var(--space-sm) var(--space-md);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--blockscape-muted);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      min-width: 6rem;
      transition: color var(--transition), background var(--transition), border-color var(--transition);
    }
.blockscape-tab.is-active {
      color: var(--color-text);
      background: var(--color-surface);
      border-color: var(--color-border);
      box-shadow: var(--shadow-lg);
      position: relative;
      top: 1px;
    }
.blockscape-tab--twinkle {
      animation: blockscape-tab-twinkle 0.7s ease-in-out 2;
      position: relative;
      z-index: 1;
      box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35);
    }
@keyframes blockscape-tab-twinkle {
      0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35);
      }
      50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.08);
        background: rgba(59, 130, 246, 0.08);
        color: var(--color-text);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35);
      }
    }
.blockscape-tabpanels {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-surface);
      box-shadow: var(--shadow-lg);
    }
.blockscape-tabpanel {
      display: none;
      padding: var(--space-lg);
    }
.blockscape-tabpanel.is-active {
      display: block;
    }
.blockscape-registry-panel {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      padding: var(--space-lg);
      background: var(--blockscape-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
    }
.blockscape-registry-header {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.blockscape-registry-header h2 {
      margin: 0;
      font-size: var(--font-size-md);
    }
.blockscape-registry-header p {
      margin: 0;
      font-size: var(--font-size-sm);
      color: var(--color-muted);
    }
.blockscape-source-panel {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }
.blockscape-abstract {
      font-size: var(--font-size-sm);
      color: var(--blockscape-muted);
      line-height: 1.5;
      padding: var(--space-md);
      background: var(--blockscape-surface-alt);
      border-radius: var(--radius-md);
      border-left: 3px solid var(--blockscape-dep);
      margin: 0;
      box-shadow: var(--shadow-lg);
    }
.blockscape-abstract a {
      color: var(--color-primary);
      font-weight: var(--font-weight-semibold);
      text-decoration: underline;
      word-break: break-all;
    }
.blockscape-abstract-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.blockscape-info-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.blockscape-info-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.blockscape-info-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--blockscape-muted-strong);
}
.blockscape-info-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blockscape-info-form .pf-v5-c-form-control {
  width: 100%;
  border-radius: 0;
}
.blockscape-info-actions {
  display: flex;
  gap: var(--space-xs);
}
.blockscape-abstract-placeholder {
      border: 1px dashed var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      background: var(--color-surface-muted);
      color: var(--blockscape-muted);
      font-size: var(--font-size-sm);
    }
.blockscape-abstract a.blockscape-gist-link {
      color: var(--color-primary);
      font-weight: var(--font-weight-semibold);
      text-decoration: underline;
      cursor: pointer;
      word-break: break-all;
    }
.blockscape-abstract a.blockscape-gist-link.is-loading {
      opacity: 0.65;
      pointer-events: none;
    }
.category {
      margin: calc(var(--space-md) / 4) 0;
    }
.blockscape-render {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-lg) / 4);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.blockscape-render::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--blockscape-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: calc(var(--blockscape-bg-opacity) * 0.5);
  pointer-events: none;
  z-index: 0;
  border-radius: var(--radius-lg);
  filter: saturate(1.02);
}
.map-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
      gap: var(--space-sm);
      margin-bottom: var(--space-sm);
      flex-wrap: wrap;
    }
.map-controls__toggle {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      font-size: var(--font-size-sm);
      color: var(--blockscape-muted);
      cursor: pointer;
      user-select: none;
    }
.map-controls__toggle input[type="checkbox"] {
      margin: 0;
      accent-color: var(--color-primary);
    }
.blockscape-tab-tooltip {
      position: absolute;
      max-width: min(420px, calc(100% - 2 * var(--space-md)));
      padding: var(--space-md);
      background: var(--color-surface);
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      font-size: var(--font-size-sm);
      color: var(--blockscape-muted);
      z-index: 1000;
      pointer-events: none;
      transition: opacity var(--transition);
      opacity: 0;
    }
.blockscape-tab-tooltip.is-visible {
      opacity: 1;
    }
.version-nav__tooltip-title {
      font-weight: var(--font-weight-semibold);
      color: var(--color-text);
      margin-bottom: var(--space-2xs);
    }
.version-nav__tooltip-meta {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
      margin-bottom: var(--space-2xs);
    }
.version-nav__tooltip-body {
      font-size: var(--font-size-sm);
      color: var(--color-muted);
      line-height: 1.4;
    }
.cat-head {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      margin-bottom: var(--space-sm);
    }
.cat-stage-indicator {
      display: inline-flex;
      align-items: center;
      padding: 0 var(--space-2xs);
      height: 1.1rem;
      min-width: 2.8rem;
      justify-content: center;
      border-radius: var(--radius-sm);
      background: var(--color-primary-soft);
      color: var(--color-primary-strong);
      font-size: var(--font-size-3xs);
      font-weight: var(--font-weight-semibold);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      line-height: 1;
    }
.cat-stage-clear {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.3rem;
      height: 1.1rem;
      padding: 0;
      border: 1px solid var(--color-border-muted);
      border-radius: var(--radius-sm);
      background: var(--color-surface);
      color: var(--color-muted-strong);
      font-size: var(--font-size-sm);
      line-height: 1;
      cursor: pointer;
      transition: color var(--transition), border-color var(--transition),
        background var(--transition);
    }
.cat-stage-clear:hover,
    .cat-stage-clear:focus-visible {
      background: var(--color-surface-strong);
      border-color: var(--color-primary);
      color: var(--color-primary-strong);
      outline: none;
    }
.cat-head--series-link {
      cursor: pointer;
      padding: var(--space-2xs) var(--space-xs);
      border-radius: var(--radius-sm);
      color: var(--color-primary);
      background: var(--color-primary-soft);
      box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
      transition: background var(--transition), color var(--transition),
        box-shadow var(--transition), transform var(--transition);
    }
.cat-head--series-link:hover,
    .cat-head--series-link:focus {
      background: var(--color-primary-surface-hover);
      color: var(--color-primary-strong);
      box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3),
        var(--shadow-primary-glow);
      transform: translateY(-1px);
      text-decoration: none;
      outline: none;
    }
.cat-head--series-link .cat-title {
      color: currentColor;
      position: relative;
      padding-right: var(--space-sm);
    }
.cat-head--series-link .cat-title::after {
      content: "↗";
      position: absolute;
      right: -0.05rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: var(--font-size-xs);
      opacity: 0.85;
    }
.category {
      position: relative;
      padding: 0 0 calc(var(--space-xl) / 4);
      border-radius: var(--radius-lg);
    }
.category--selected {
      border: 1px solid var(--color-primary);
      padding: var(--space-sm) var(--space-sm) calc(var(--space-xl) / 4);
      box-shadow: 0 12px 28px -18px rgba(37, 99, 235, 0.35);
      background: linear-gradient(
        180deg,
        rgba(37, 99, 235, 0.06),
        rgba(37, 99, 235, 0.02)
      );
    }
.category--selected .grid {
      border-color: var(--color-primary);
      background: var(--color-primary-soft);
    }
.category--selected .cat-title {
      color: var(--color-primary);
    }
.cat-title {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-semibold);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--blockscape-muted);
    }
.cat-count {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }
.grid {
      position: relative;
      display: grid;
      grid-auto-rows: var(--blockscape-tile);
      grid-template-columns: repeat(auto-fill, minmax(var(--blockscape-tile), 1fr));
      gap: var(--blockscape-gap);
      padding: var(--blockscape-gap) 0;
      border-top: 1px dashed var(--blockscape-border);
    }
.grid.is-centered {
      justify-content: center;
      grid-template-columns: repeat(
        auto-fit,
        minmax(var(--blockscape-tile), var(--blockscape-tile))
      );
      justify-items: center;
      position: relative;
      z-index: 0;
    }
.grid.is-centered .tile {
      width: var(--blockscape-tile);
      max-width: var(--blockscape-tile);
    }
.is-center-mode .tile-add,
    .grid.is-centered .tile-add {
      display: none;
    }
.stage-guides {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        repeating-linear-gradient(
          to bottom,
          rgba(100, 116, 139, 0.25) 0,
          rgba(100, 116, 139, 0.25) 8px,
          transparent 8px,
          transparent 16px
        ),
        repeating-linear-gradient(
          to bottom,
          rgba(100, 116, 139, 0.25) 0,
          rgba(100, 116, 139, 0.25) 8px,
          transparent 8px,
          transparent 16px
        ),
        repeating-linear-gradient(
          to bottom,
          rgba(100, 116, 139, 0.25) 0,
          rgba(100, 116, 139, 0.25) 8px,
          transparent 8px,
          transparent 16px
        ),
        repeating-linear-gradient(
          to bottom,
          rgba(100, 116, 139, 0.25) 0,
          rgba(100, 116, 139, 0.25) 8px,
          transparent 8px,
          transparent 16px
        );
      background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%;
      background-repeat: no-repeat;
      background-position: 0 0, 25% 0, 50% 0, 75% 0;
      opacity: 1;
      z-index: 0;
    }
.stage-guide-labels {
      position: absolute;
      left: 0;
      right: 0;
      bottom: var(--space-xs);
      display: flex;
      gap: var(--space-sm);
      justify-content: space-between;
      padding: 0 var(--space-md);
      font-size: 10px;
      color: var(--color-muted);
      text-transform: none;
      pointer-events: none;
      mix-blend-mode: multiply;
    }
.stage-guide-labels__item {
      flex: 1 1 0;
      text-align: center;
      white-space: nowrap;
    }
.tile {
      position: relative;
      background: var(--blockscape-surface);
      border: 1px solid var(--blockscape-border);
      border-radius: var(--blockscape-radius);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: calc(var(--blockscape-tile-gap-inner) * var(--blockscape-tile-compactness));
      padding:
        calc(var(--blockscape-tile-padding-top) * var(--blockscape-tile-compactness))
        var(--blockscape-tile-padding-x)
        calc(var(--blockscape-tile-padding-bottom) * var(--blockscape-tile-compactness));
      cursor: grab;
      transition:
        box-shadow var(--transition),
        transform var(--transition),
        border-color var(--transition),
        opacity var(--transition);
      box-shadow: var(--shadow-lg);
      transform: translateY(0) scale(1);
      transform-origin: center;
      will-change: transform;
      z-index: 3;
    }
.tile-stage {
      position: absolute;
      left: var(--space-xs);
      bottom: var(--space-xs);
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: var(--color-surface-strong);
      color: var(--color-muted-strong);
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-bold);
      line-height: 22px;
      display: none;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--color-border-muted);
      pointer-events: none;
    }
.tile:hover .tile-stage,
    .tile:focus-visible .tile-stage,
    .tile:focus-within .tile-stage {
      display: inline-flex;
    }
.tile:hover,
    .tile:focus-visible {
      transform: translateY(-1px) scale(var(--blockscape-tile-hover-scale));
      box-shadow: 0 18px 30px -24px rgba(15, 23, 42, 0.55);
      z-index: 2;
      outline: none;
    }
.tile:active {
      transform: translateY(1px) scale(var(--blockscape-tile-hover-scale));
    }
.blockscape-has-selection .tile:hover,
    .blockscape-has-selection .tile:focus-visible,
    .blockscape-has-selection .tile:active {
      transform: translateY(-1px) scale(1);
    }
.blockscape-has-selection .tile:active {
      transform: translateY(1px) scale(1);
    }
.blockscape-has-item-selection:not(.blockscape-dimming-disabled) .tile {
      opacity: var(--blockscape-selection-dim-applied-opacity);
    }
.blockscape-has-item-selection:not(.blockscape-dimming-disabled)
      .tile.selected,
    .blockscape-has-item-selection:not(.blockscape-dimming-disabled)
      .tile.dep,
    .blockscape-has-item-selection:not(.blockscape-dimming-disabled)
      .tile.revdep,
    .blockscape-has-item-selection:not(.blockscape-dimming-disabled)
      .tile.dep-indirect,
    .blockscape-has-item-selection:not(.blockscape-dimming-disabled)
      .tile.revdep-indirect {
      opacity: 1;
    }
.logo {
      width: calc(var(--blockscape-logo-size) * var(--blockscape-tile-compactness));
      height: calc(var(--blockscape-logo-size) * var(--blockscape-tile-compactness));
      object-fit: contain;
      opacity: .95;
      transform: translateY(var(--blockscape-logo-offset, 0));
    }
.name {
      font-size: var(--font-size-sm);
      text-align: center;
      line-height: 1.1;
      padding: 0 var(--space-2xs) 0;
      width: 100%;
      max-width: 100%;
      margin: var(--blockscape-name-offset, 0) auto 0;
      display: block;
      word-break: keep-all;
      white-space: var(--blockscape-title-white-space);
      text-wrap: var(--blockscape-title-text-wrap);
      transform: scale(1);
      transform-origin: center;
      transition: transform var(--transition);
    }
.tile--series-link .name {
      color: var(--color-danger);
      font-weight: var(--font-weight-semibold);
    }
.tile-id {
      font-size: var(--font-size-xs);
      color: var(--blockscape-muted);
      line-height: 1.05;
      text-align: center;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: scale(1);
      transform-origin: center top;
      transition: transform var(--transition), opacity var(--transition), max-height var(--transition);
    }
.tile:is(:hover, :focus-visible, :active) .name {
      max-width: calc(var(--blockscape-title-hover-width-multiplier) * 100%);
      transform: translateY(-2px)
        scale(
          calc(
            (1 + (var(--blockscape-tile-hover-scale) - 1) * var(--blockscape-tile-hover-text-portion)) *
              var(--blockscape-tile-hover-scale-inverse)
          )
        );
    }
.tile:is(:hover, :focus-visible, :active) .tile-id {
      transform: scale(
        calc(
          (1 + (var(--blockscape-tile-hover-scale) - 1) * var(--blockscape-tile-hover-text-portion)) *
            var(--blockscape-tile-hover-scale-inverse)
        )
      );
    }
.tile:is(:hover, :focus-visible, :active) .tile-id {
      max-height: 2.4em;
      opacity: 1;
    }
.blockscape-has-selection
      .tile:is(:hover, :focus-visible, :active)
      .name,
    .blockscape-has-selection
      .tile:is(:hover, :focus-visible, :active)
      .tile-id {
      transform: scale(1);
    }
.badge {
      position: absolute;
      top: var(--space-sm);
      right: var(--space-sm);
      font-size: var(--font-size-xs);
      background: var(--color-warning-soft);
      color: var(--blockscape-reused);
      border: 1px solid var(--color-warning);
      border-radius: 999px;
      padding: 0.1rem 0.45rem;
      display: none;
      font-weight: var(--font-weight-medium);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
.tile.reused .badge {
      display: inline-block;
    }
.tile.external {
      border-style: dashed;
      border-color: var(--color-external);
      color: var(--blockscape-muted);
      background: var(--color-surface-ghost);
    }
.tile .external-link,
    .tile .obsidian-link {
      position: absolute;
      right: var(--space-sm);
      left: auto;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: rgba(148, 163, 184, 0.16);
      color: inherit;
      font-size: 0.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: background var(--transition), color var(--transition), border var(--transition);
    }
.tile .external-link {
      top: var(--space-sm);
    }
.tile .obsidian-link {
      top: auto;
      bottom: var(--space-sm);
      right: var(--space-sm);
      width: 22px;
      height: 22px;
      font-size: 0.65rem;
      display: none;
    }
.tile:hover .obsidian-link,
    .tile:focus-visible .obsidian-link,
    .tile:focus-within .obsidian-link {
      display: inline-flex;
    }
.tile .tile-delete {
      position: absolute;
      top: calc(var(--space-sm) - 2px);
      left: calc(var(--space-sm) - 2px);
      right: auto;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: 1px solid var(--color-border);
      background: var(--color-danger-soft);
      color: var(--color-danger);
      font-weight: var(--font-weight-bold);
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      transition: background var(--transition), color var(--transition), border var(--transition), box-shadow var(--transition);
    }
.tile:hover .tile-delete,
    .tile:focus-visible .tile-delete,
    .tile:focus-within .tile-delete {
      display: inline-flex;
    }
.tile .tile-delete:hover,
    .tile .tile-delete:focus-visible {
      background: var(--color-danger);
      color: var(--color-white);
      border-color: var(--color-danger);
      outline: none;
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
    }
.tile .external-link:hover,
    .tile .external-link:focus-visible,
    .tile .obsidian-link:hover,
    .tile .obsidian-link:focus-visible {
      background: rgba(148, 163, 184, 0.28);
      border-color: rgba(148, 163, 184, 0.45);
      color: var(--color-text);
    }
.series-nav-notice {
      position: fixed;
      right: var(--space-lg);
      bottom: var(--space-lg);
      display: none;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      background: var(--color-surface);
      color: var(--color-text);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      font-size: var(--font-size-sm);
      z-index: 240;
    }
.series-nav-notice.is-visible {
      display: inline-flex;
      animation: fade-in 120ms ease;
    }
.series-nav-notice__dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: var(--color-primary);
      box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15);
      flex-shrink: 0;
    }
.series-nav-notice__text strong {
      color: var(--color-primary);
    }
.series-nav-notice a {
      color: var(--color-primary);
      font-weight: var(--font-weight-semibold);
      text-decoration: underline;
    }
.series-nav-notice a:hover,
    .series-nav-notice a:focus-visible {
      text-decoration-thickness: 2px;
    }
.tile.dep {
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
      border-color: var(--blockscape-dep);
    }
.tile.revdep {
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
      border-color: var(--blockscape-revdep);
    }
.tile.dep-indirect {
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
      border-color: rgba(37, 99, 235, 0.55);
    }
.tile.revdep-indirect {
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12);
      border-color: rgba(239, 68, 68, 0.55);
    }
.tile.selected {
      outline: none;
      border-color: var(--color-primary);
      box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.22),
        0 0 0 7px rgba(37, 99, 235, 0.12),
        0 18px 32px -18px rgba(37, 99, 235, 0.35);
      background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.02));
    }
.tile-add {
      border: 1px dashed var(--color-border);
      border-radius: var(--blockscape-radius);
      background: transparent;
      color: var(--blockscape-muted);
      width: 100%;
      height: 100%;
      min-height: calc(var(--blockscape-tile) - 4px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      padding: var(--space-md);
      cursor: pointer;
      transition: color var(--transition), border-color var(--transition), background var(--transition);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
    }
.tile-add__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 50%;
      border: 1px dashed var(--color-border);
      font-size: 1.2rem;
      line-height: 1;
      background: var(--color-surface-muted);
    }
.tile-add:hover,
    .tile-add:focus-visible {
      color: var(--blockscape-foreground);
      border-color: var(--color-border-strong);
      background: var(--color-surface-muted);
      outline: none;
    }
.category-add {
      border: 1px dashed var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-surface);
      color: var(--blockscape-foreground);
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-sm) var(--space-md);
      cursor: pointer;
      font-weight: var(--font-weight-semibold);
      transition: border-color var(--transition), box-shadow var(--transition),
        transform var(--transition);
      box-shadow: 0 12px 24px -18px rgba(15, 23, 42, 0.3);
      margin: var(--space-md) 0 var(--space-lg);
    }
.category-add__icon {
      width: 1.75rem;
      height: 1.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid var(--color-border);
      background: var(--color-surface-subtle);
      font-weight: var(--font-weight-bold);
    }
.category-add__hint {
      color: var(--color-muted);
      font-size: var(--font-size-xs);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
.category-add:hover,
    .category-add:focus-visible {
      border-color: var(--color-primary);
      box-shadow: 0 12px 32px -16px rgba(37, 99, 235, 0.35);
      transform: translateY(-1px);
      outline: none;
    }
.is-center-mode .category-add {
      display: none !important;
    }
.muted {
      color: var(--blockscape-muted);
    }
.svg-layer {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
.sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
.item-preview {
      --item-preview-width: min(420px, calc(100vw - 2 * var(--space-md)));
      --item-preview-height: min(70vh, calc(100vh - 2 * var(--space-md)));
      position: fixed;
      display: flex;
      flex-direction: column;
      width: var(--item-preview-width);
      max-height: var(--item-preview-height);
      background: var(--blockscape-surface);
      border: 1px solid var(--blockscape-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      opacity: 0;
      transform: translateY(4px);
      pointer-events: none;
      transition: opacity var(--transition), transform var(--transition);
      z-index: 999;
    }
.item-preview--expanded {
      --item-preview-width: min(630px, calc(100vw - 2 * var(--space-md)));
      --item-preview-height: min(calc(100vh - 2 * var(--space-md)), 1200px);
    }
.item-preview.is-visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
.item-preview__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-xs);
      padding: var(--space-xs) var(--space-sm);
      border-bottom: 1px solid var(--color-border);
      background: var(--color-surface-muted);
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-semibold);
    }
.item-preview__title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1 1 auto;
    }
.item-preview__actions {
      display: flex;
      gap: var(--space-2xs);
      align-items: center;
      flex: 0 0 auto;
    }
.item-preview__action {
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      color: var(--blockscape-foreground);
      font-size: var(--font-size-xs);
      padding: var(--space-2xs) var(--space-sm);
      border-radius: var(--radius-sm);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
    }
.item-preview__action:hover,
    .item-preview__action:focus-visible {
      background: var(--color-surface-muted);
      border-color: var(--color-border-strong);
    }
.item-preview__close {
      border: none;
      background: transparent;
      color: var(--color-muted);
      cursor: pointer;
      font-size: 1.25rem;
      line-height: 1;
      border-radius: var(--radius-sm);
      padding: 0 var(--space-2xs);
    }
.item-preview__close:hover,
    .item-preview__close:focus-visible {
      color: var(--blockscape-foreground);
      background: var(--color-surface-muted);
      outline: none;
    }
.item-preview__body {
      flex: 1 1 auto;
      overflow: auto;
      padding: var(--space-sm);
      background: var(--blockscape-surface);
      font-size: var(--font-size-xs);
      line-height: 1.4;
    }
.item-preview__frame {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }
.item-preview--has-frame .item-preview__body {
      padding: 0;
    }
.item-preview__status {
      color: var(--color-muted);
    }
.tile-context-menu {
      position: fixed;
      min-width: 190px;
      background: var(--blockscape-surface);
      border: 1px solid var(--blockscape-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      padding: var(--space-2xs);
      opacity: 0;
      transform: translateY(4px);
      pointer-events: none;
      transition: opacity var(--transition), transform var(--transition);
      z-index: 1001;
    }
.tile-context-menu.is-open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
.tile-context-menu__list {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.tile-context-menu__item {
      width: 100%;
      text-align: left;
      border: 1px solid transparent;
      background: transparent;
      padding: var(--space-2xs) var(--space-sm);
      border-radius: var(--radius-sm);
      color: var(--blockscape-foreground);
      cursor: pointer;
      font-size: var(--font-size-xs);
    }
.tile-context-menu__item:hover,
    .tile-context-menu__item:focus-visible {
      background: var(--color-surface-muted);
      border-color: var(--color-border);
      outline: none;
    }
.shortcut-help {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1150;
    }
.shortcut-help[hidden] {
      display: none;
    }
.shortcut-help__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(2px);
    }
.shortcut-help__panel {
      position: relative;
      width: min(720px, calc(100vw - 2 * var(--space-lg)));
      max-height: calc(100vh - 2 * var(--space-lg));
      overflow: auto;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: 0 24px 60px -32px rgba(15, 23, 42, 0.6);
      padding: var(--space-lg);
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      z-index: 1;
    }
.shortcut-help__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-md);
    }
.shortcut-help__title {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.shortcut-help__title h2 {
      margin: 0;
      font-size: var(--font-size-lg);
    }
.shortcut-help__subtitle {
      margin: 0;
      color: var(--color-muted);
      font-size: var(--font-size-sm);
    }
.shortcut-help__section {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      border-top: 1px solid var(--color-border);
      padding-top: var(--space-sm);
    }
.shortcut-help__section:first-of-type {
      border-top: 0;
      padding-top: 0;
    }
.shortcut-help__section-title {
      margin: 0;
      font-size: var(--font-size-md);
    }
.shortcut-help__tips {
      margin: 0;
      padding-left: 1.2rem;
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      color: var(--blockscape-foreground);
      font-size: var(--font-size-sm);
      line-height: 1.5;
    }
.shortcut-help__tips a {
      color: var(--color-primary);
    }
.shortcut-help__tips a:hover,
    .shortcut-help__tips a:focus-visible {
      text-decoration: underline;
      outline: none;
    }
.shortcut-help__close {
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      color: var(--color-muted);
      border-radius: var(--radius-sm);
      width: 34px;
      height: 34px;
      font-size: 1.1rem;
      cursor: pointer;
      flex-shrink: 0;
    }
.shortcut-help__close:hover,
    .shortcut-help__close:focus-visible {
      color: var(--blockscape-foreground);
      border-color: var(--color-border-strong);
      outline: none;
    }
.shortcut-help__list {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }
.new-panel__form {
      gap: var(--space-md);
    }
.new-panel__field {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.new-panel__hint {
      margin: 0;
      color: var(--color-muted);
      font-size: var(--font-size-sm);
    }
.new-panel__toggle {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      cursor: pointer;
      user-select: none;
    }
.new-panel__toggle input[type='checkbox'] {
      width: 1.1rem;
      height: 1.1rem;
    }
.new-panel__option {
      display: flex;
      gap: var(--space-sm);
      align-items: flex-start;
      padding: var(--space-sm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface-muted);
      cursor: pointer;
    }
.new-panel__option input[type='radio'] {
      margin-top: 0.2rem;
    }
.new-panel__option-title {
      font-weight: 600;
    }
.new-panel__actions {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      flex-wrap: wrap;
    }
.new-panel__status {
      min-height: 1.5rem;
      color: var(--color-muted);
    }
.new-panel__prompt {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.new-panel__prompt-label {
      font-weight: 600;
    }
.new-panel__textarea {
      min-height: 8rem;
      height: auto;
      padding: 0.85rem;
      border-radius: var(--radius-md);
      resize: vertical;
    }
.new-panel__link {
      display: inline-flex;
      flex-direction: column;
      gap: var(--space-2xs);
      padding: var(--space-sm) var(--space-md);
      border: 1px dashed var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface-muted);
      width: fit-content;
    }
.new-panel__link a {
      font-weight: 600;
      color: var(--color-primary);
      text-decoration: none;
    }
.new-panel__link a:hover,
    .new-panel__link a:focus-visible {
      text-decoration: underline;
      outline: none;
    }
.new-panel__links {
      display: flex;
      gap: var(--space-sm);
      flex-wrap: wrap;
    }
.new-panel__link--disabled {
      opacity: 0.65;
      cursor: not-allowed;
    }
.shortcut-help__row {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--space-sm);
      align-items: center;
      padding: var(--space-sm);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface-muted);
    }
.shortcut-help__keys {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
      min-width: 10rem;
    }
.shortcut-help__combo {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
    }
.shortcut-help__key {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.35rem 0.55rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.05);
      font-family: var(--font-mono);
      font-size: var(--font-size-xs);
      min-width: 2.5rem;
    }
.shortcut-help__sep {
      color: var(--color-muted);
      font-size: var(--font-size-xs);
    }
.shortcut-help__or {
      margin: 0 var(--space-2xs);
      color: var(--color-muted);
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-medium);
    }
.shortcut-help__desc {
      color: var(--blockscape-foreground);
      font-size: var(--font-size-sm);
      line-height: 1.5;
    }
.shortcut-help-open {
      overflow: hidden;
    }
.item-editor-open {
      overflow: hidden;
    }
.item-editor-modal {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1200;
    }
.item-editor-modal[hidden] {
      display: none;
    }
.item-editor-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.4);
      backdrop-filter: blur(2px);
    }
.item-editor {
      position: relative;
      width: min(520px, calc(100vw - 2 * var(--space-lg)));
      max-height: calc(100vh - 2 * var(--space-lg));
      overflow: auto;
      background: var(--blockscape-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: 0 20px 60px -32px rgba(15, 23, 42, 0.55);
      padding: var(--space-lg);
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      z-index: 1;
    }
.item-editor__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
    }
.item-editor__title {
      margin: 0;
      font-size: var(--font-size-lg);
    }
.item-editor__close {
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      color: var(--color-muted);
      border-radius: var(--radius-sm);
      width: 34px;
      height: 34px;
      font-size: 1.1rem;
      cursor: pointer;
    }
.item-editor__close:hover,
    .item-editor__close:focus-visible {
      color: var(--blockscape-foreground);
      border-color: var(--color-border-strong);
      outline: none;
    }
.item-editor__form {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }
.item-editor__meta {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--space-xs);
      font-size: var(--font-size-sm);
      color: var(--color-muted);
    }
.item-editor__meta-label {
      font-weight: var(--font-weight-semibold);
      color: var(--blockscape-foreground);
    }
.item-editor__field {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
.item-editor__label {
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-size-sm);
    }
.item-editor__control {
      width: 100%;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      padding: var(--space-sm);
      font-size: var(--font-size-sm);
      background: var(--color-surface);
    }
.item-editor__control:focus-visible {
      outline: 2px solid rgba(37, 99, 235, 0.3);
      border-color: var(--color-primary);
    }
.item-editor__hint {
      font-size: var(--font-size-xs);
      color: var(--color-muted);
    }
.item-editor__checkbox {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2xs);
      font-size: var(--font-size-sm);
    }
.item-editor__checkbox-row {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
    }
.item-editor__checkbox input {
      width: 1.1rem;
      height: 1.1rem;
    }
.item-editor__error {
      background: var(--color-danger-soft);
      color: var(--color-danger);
      border: 1px solid rgba(220, 38, 38, 0.45);
      border-radius: var(--radius-sm);
      padding: var(--space-sm);
      font-size: var(--font-size-sm);
    }
.item-editor__actions {
      display: flex;
      justify-content: flex-end;
      gap: var(--space-sm);
      margin-top: var(--space-xs);
    }
@media (max-width: 1024px) {
      .pf-v5-c-page__main {
        order: 0;
      }

      .pf-v5-c-page__header {
        order: 1;
      }

      .pf-v5-c-page__footer {
        order: 2;
      }

      .blockscape-toolbar {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
      }

      .blockscape-content {
        flex-direction: column;
        gap: var(--space-md);
        width: calc(100% - 2 * var(--space-md));
        padding: var(--space-md) 0 var(--space-lg);
      }

      .blockscape-main {
        order: 0;
      }

      .blockscape-sidebar {
        order: 1;
        width: 100%;
        max-height: none;
        overflow: visible;
      }

      .model-nav-list {
        max-height: none;
        overflow: visible;
      }
    }
@media (max-width: 720px) {
      .blockscape-toolbar {
        flex-direction: column;
        align-items: stretch;
      }

      .blockscape-content {
        width: calc(100% - 2 * var(--space-sm));
        gap: var(--space-sm);
      }

      .blockscape-brand {
        justify-content: space-between;
        width: 100%;
      }

      .blockscape-brand__logo {
        height: 44px;
      }

      .blockscape-toolbar__controls {
        width: 100%;
      }

      .blockscape-toolbar__primary {
        width: 100%;
      }

      .blockscape-toolbar__controls .pf-v5-c-form-control,
      .blockscape-toolbar__controls .pf-v5-c-button {
        flex: 1 1 auto;
      }

      .blockscape-toolbar__toggle {
        align-self: flex-start;
      }

      .blockscape-toolbar__extras {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        margin-top: var(--space-sm);
        padding-top: var(--space-xs);
      }

      .blockscape-search {
        width: 100%;
      }

      .apicurio-controls {
        min-width: auto;
      }

      .blockscape-legend {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
      }

      .blockscape-json-actions {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
      }
    }
@keyframes fade-in {
      from {
        opacity: 0;
        transform: translateY(4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }