:root {
  --ink: #202120;
  --muted: #70736f;
  --paper: #f3f3f0;
  --card: #fafaf8;
  --line: #d5d6d2;
  --green: #4d524f;
  --lime: #d8dcd9;
  --orange: #777d79;
  --soft: #e9eae7;
  --soft-strong: #e1e3e0;
  --panel: #eeeeeb;
  --topbar: rgba(243,243,240,.92);
  --shadow: rgba(20,22,21,.1);
  --category-climate: #21876f;
  --category-economics: #3879b8;
  --category-finance: #297c73;
  --category-earth: #c65f3b;
  --category-oceans: #267aa3;
  --category-research: #7868bd;
  --category-science: #6762ad;
  --category-culture: #b65383;
  --category-nature: #4d8d45;
  --category-health: #c44f55;
  --category-food: #a7672e;
  --category-technology: #2b879c;
  --category-places: #b37a24;
  --category-demographics: #647c96;
  --category-governance: #9a6b36;
  --category-agriculture: #67843c;
  --category-education: #7860a6;
  --category-energy: #a87913;
  --category-language: #a45e82;
  --category-media: #8d567a;
  --category-safety: #ad5151;
  --category-space: #53659a;
  --category-sports: #407f69;
  --category-transportation: #54758c;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}
[data-theme="dark"] {
  --ink: #eceeec;
  --muted: #a3a7a3;
  --paper: #131514;
  --card: #1b1d1c;
  --line: #373a38;
  --green: #b8bdb9;
  --lime: #d5d9d6;
  --orange: #969c98;
  --soft: #272a28;
  --soft-strong: #2e3230;
  --panel: #171918;
  --topbar: rgba(19,21,20,.92);
  --shadow: rgba(0,0,0,.32);
  --category-climate: #55b99d;
  --category-economics: #6aa3d8;
  --category-finance: #58b1a6;
  --category-earth: #df805e;
  --category-oceans: #61a9cc;
  --category-research: #9b8ed6;
  --category-science: #9892da;
  --category-culture: #d979a7;
  --category-nature: #77ad6c;
  --category-health: #df777c;
  --category-food: #cb915d;
  --category-technology: #59a7b7;
  --category-places: #d09a4c;
  --category-demographics: #849bb3;
  --category-governance: #b58a5b;
  --category-agriculture: #93ad63;
  --category-education: #a28acc;
  --category-energy: #d0a847;
  --category-language: #ca82a4;
  --category-media: #b87da1;
  --category-safety: #d57777;
  --category-space: #8294ca;
  --category-sports: #70a993;
  --category-transportation: #7fa0b6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 58px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 18px var(--sans); }
button, input { font: inherit; }
a { color: inherit; }

.topbar {
  height: 58px; padding: 0 clamp(14px, 3vw, 38px); display: grid; grid-template-columns: auto minmax(240px, 720px) auto; align-items: center;
  gap: clamp(16px, 3vw, 44px); background: var(--topbar);
  backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: 7px; font-size: 24px; font-weight: 700; text-decoration: none; letter-spacing: -.04em; }
.brand-mark { width: 42px; height: 31px; display: block; overflow: visible; color: var(--ink); fill: currentColor; }
.brand-mark .rex-eye { fill: var(--paper); }
.brand-dot { color: var(--muted); }
nav { display: flex; gap: 34px; }
nav a { font-size: 18px; font-weight: 600; text-decoration: none; }
.theme-toggle { width: max-content; min-width: 88px; min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; justify-self: end; gap: 6px; border: 1px solid var(--ink); border-radius: 5px; color: var(--ink); background: transparent; font: 600 13px var(--mono); cursor: pointer; }
.theme-toggle:hover { color: var(--paper); background: var(--ink); }
.theme-toggle-icon { color: var(--orange); font-size: 15px; }

.hero { min-height: 650px; padding: 88px clamp(24px, 6vw, 96px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(50px, 8vw, 130px); border-bottom: 1px solid var(--line); overflow: hidden; }
.eyebrow { margin: 0 0 24px; color: var(--green); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.pulse { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--muted); margin-right: 7px; }
h1 { max-width: 700px; margin: 0; font-size: clamp(58px, 7vw, 102px); line-height: .91; letter-spacing: -.075em; font-weight: 600; }
h1 em { color: var(--green); font-family: Georgia, serif; font-weight: 400; }
.hero-intro { max-width: 590px; margin: 36px 0; color: var(--muted); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 34px; min-height: 50px; padding: 0 21px; border: 0; border-radius: 3px; font-size: 18px; font-weight: 700; text-decoration: none; cursor: pointer; }
.button.primary { background: var(--ink); color: var(--paper); }
.button.primary span { color: inherit; opacity: .72; }
.button.secondary { border: 1px solid var(--ink); background: transparent; }
.availability { color: var(--muted); font: 11px var(--mono); }

.request-card { position: relative; min-width: 0; background: #202220; color: #eeeeec; border-radius: 4px; box-shadow: 10px 10px 0 var(--line); }
.request-card::before { content: ""; position: absolute; width: 150px; height: 150px; border: 1px solid var(--line); border-radius: 4px; right: -75px; top: -75px; }
.request-top, .request-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #a8aaa8; font: 10px var(--mono); border-bottom: 1px solid #3d403e; }
.request-top i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 2px; background: #737773; }
.request-top i:first-child { background: var(--orange); }
.icon-button { padding: 5px 8px; color: #a9b5ae; background: transparent; border: 1px solid #46584f; border-radius: 3px; font: 9px var(--mono); cursor: pointer; }
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.request-card pre { min-height: 290px; padding: 28px 26px; font: 12px/1.8 var(--mono); }
.request-status { border: 0; border-top: 1px solid #31433c; }
.request-status span:first-child { color: var(--lime); }
.code-key { color: #d4d6d4; } .code-string { color: #bfc3c0; } .code-dim { color: #858a86; }

.catalog { padding: 7px clamp(14px, 3vw, 42px) 60px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 54px; }
.section-heading .eyebrow { margin-bottom: 16px; }
h2 { margin: 0; font-size: clamp(40px, 5vw, 68px); letter-spacing: -.06em; font-weight: 600; }
.section-heading > p { max-width: 420px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.catalog-toolbar { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); }
.search { min-width: 330px; flex: 1; display: flex; align-items: center; gap: 12px; }
.search input { width: 100%; padding: 8px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 20px; }
.search kbd { padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font: 14px var(--mono); }
.topbar-search { width: 100%; min-width: 0; padding: 0 9px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.topbar-search input { font-size: 17px; }
.filters { display: flex; flex-wrap: wrap; gap: 4px; overflow: visible; }
.metadata-browser { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.socket-browser-summary, .socket-filter-row { display: flex; align-items: flex-start; gap: 8px; }
.socket-browser-summary { margin-bottom: 5px; font: 11px var(--mono); color: var(--muted); }
.socket-browser-summary strong { color: var(--ink); text-transform: uppercase; }
.socket-filter-row + .socket-filter-row { margin-top: 4px; }
.socket-filter-row > span { width: 62px; flex: 0 0 62px; padding-top: 5px; font: 10px var(--mono); color: var(--muted); text-transform: uppercase; }
.socket-filters { display: flex; flex-wrap: wrap; gap: 3px; }
.socket-filter { padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--muted); font: 10px var(--mono); cursor: pointer; }
.socket-filter:hover, .socket-filter.active { border-color: var(--ink); color: var(--paper); background: var(--ink); }
.metadata-more { margin-top: 5px; }
.metadata-more summary { width: max-content; color: var(--muted); font: 10px var(--mono); cursor: pointer; }
.metadata-more[open] summary { margin-bottom: 5px; color: var(--ink); }
.capability-intro, .capability-empty { margin: 0 0 7px; color: var(--muted); font-size: 12px; }
.capability-list { display: grid; gap: 6px; }
.capability-card { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.capability-card > header { display: flex; justify-content: space-between; gap: 8px; padding: 6px 7px; background: var(--soft); }
.capability-card > header code { color: var(--muted); font: 10px var(--mono); }
.capability-sockets { display: grid; }
.capability-socket { display: grid; grid-template-columns: 30px minmax(100px, .8fr) minmax(130px, 1fr) auto; gap: 7px; align-items: center; padding: 5px 7px 5px calc(7px + var(--socket-depth) * 14px); border-top: 1px solid var(--line); font-size: 11px; }
.capability-socket:first-child { border-top: 0; }
.capability-socket code { color: var(--muted); font: 9px var(--mono); }
.semantic-socket-value { display: inline-flex; align-items: center; gap: 5px; }
.semantic-socket-value small { color: var(--muted); font: 7px var(--mono); }
.socket-direction { color: var(--muted); font: 8px var(--mono); }
.capability-socket.input .socket-direction { color: var(--category-places); }
.capability-socket.output .socket-direction { color: var(--category-climate); }
@media (max-width: 600px) {
  .socket-filter-row { display: block; }
  .socket-filter-row > span { display: block; width: auto; padding: 0 0 3px; }
  .capability-card > header { display: grid; }
  .capability-socket { grid-template-columns: 28px minmax(90px, 1fr) auto; }
  .capability-socket > span:not(.socket-direction) { grid-column: 2 / -1; }
}
.filter { --category-color: var(--ink); white-space: nowrap; padding: 6px 9px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid color-mix(in srgb, var(--category-color) 35%, var(--line)); border-radius: 4px; background: color-mix(in srgb, var(--category-color) 4%, transparent); color: var(--category-color); font: 12px var(--mono); cursor: pointer; }
.filter:hover { border-color: var(--category-color); }
.filter.active { color: var(--paper); border-color: var(--category-color); background: var(--category-color); }
.catalog-meta { min-height: 46px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 13px var(--mono); }
.catalog-meta #page-summary:not(:empty)::before { content: "·"; margin: 0 7px; }
.catalog-meta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.text-button { border: 0; background: none; color: var(--green); font: inherit; cursor: pointer; text-decoration: underline; }
.view-mode { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); }
.view-mode-button { min-height: 28px; padding: 0 8px; border: 0; border-radius: 2px; color: var(--muted); background: transparent; font: 11px var(--mono); cursor: pointer; }
.view-mode-button.active { color: var(--paper); background: var(--ink); }
.sort-mode { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; font: 11px var(--mono); white-space: nowrap; }
.sort-mode-label { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sort-mode-button { padding: 2px 0; border: 0; border-bottom: 1px solid transparent; color: var(--muted); background: transparent; font: inherit; cursor: pointer; }
.sort-mode-button:hover { color: var(--ink); }
.sort-mode-button.active { border-bottom-color: currentColor; color: var(--ink); }
.api-grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 5px; }
.api-card { --category-color: var(--ink); width: calc(33.333% - 4px); min-height: 68px; padding: 7px 8px 7px 7px; display: grid; grid-template-columns: 32px minmax(105px, 1fr) minmax(54px, 1fr) minmax(82px, auto); align-items: center; gap: 7px; overflow: hidden; border: 1px solid var(--line); border-left: 3px solid var(--category-color); border-radius: 3px; text-align: left; color: inherit; background: var(--card); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.api-grid:not([data-view="icons"]) .api-card { width: 100%; grid-template-columns: 32px minmax(190px, .8fr) minmax(240px, 2fr) minmax(145px, auto); }
.api-card:hover { position: relative; z-index: 1; border-color: var(--category-color); transform: translateY(-2px); box-shadow: 0 8px 22px var(--shadow); }
.api-card.active { border-color: var(--category-color); background: color-mix(in srgb, var(--category-color) 8%, var(--card)); box-shadow: inset 3px 0 0 var(--category-color); }
[data-category-tone="climate"] { --category-color: var(--category-climate); }
[data-category-tone="economics"] { --category-color: var(--category-economics); }
[data-category-tone="finance"] { --category-color: var(--category-finance); }
[data-category-tone="earth"] { --category-color: var(--category-earth); }
[data-category-tone="oceans"] { --category-color: var(--category-oceans); }
[data-category-tone="research"] { --category-color: var(--category-research); }
[data-category-tone="science"] { --category-color: var(--category-science); }
[data-category-tone="culture"] { --category-color: var(--category-culture); }
[data-category-tone="nature"] { --category-color: var(--category-nature); }
[data-category-tone="health"] { --category-color: var(--category-health); }
[data-category-tone="food"] { --category-color: var(--category-food); }
[data-category-tone="technology"] { --category-color: var(--category-technology); }
[data-category-tone="places"] { --category-color: var(--category-places); }
[data-category-tone="demographics"] { --category-color: var(--category-demographics); }
[data-category-tone="governance"] { --category-color: var(--category-governance); }
[data-category-tone="agriculture"] { --category-color: var(--category-agriculture); }
[data-category-tone="education"] { --category-color: var(--category-education); }
[data-category-tone="energy"] { --category-color: var(--category-energy); }
[data-category-tone="language"] { --category-color: var(--category-language); }
[data-category-tone="media"] { --category-color: var(--category-media); }
[data-category-tone="safety"] { --category-color: var(--category-safety); }
[data-category-tone="space"] { --category-color: var(--category-space); }
[data-category-tone="sports"] { --category-color: var(--category-sports); }
[data-category-tone="transportation"] { --category-color: var(--category-transportation); }
.card-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 3px; color: var(--category-color); background: var(--soft); font: 16px var(--mono); }
.category-icon { width: 14px; height: 14px; display: block; flex: 0 0 auto; }
.card-icon .category-icon { width: 19px; height: 19px; }
.card-title, .card-description, .card-attributes { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-title { font-size: 17px; letter-spacing: -.025em; }
.card-description { color: var(--muted); font-size: 14px; line-height: 1.35; }
.card-attributes { color: var(--category-color); font: 10px var(--mono); text-transform: uppercase; }
.tags { display: flex; gap: 5px; flex-wrap: nowrap; }
.tag { padding: 4px 6px; background: var(--soft); border-radius: 2px; color: var(--muted); font: 7px var(--mono); text-transform: uppercase; white-space: nowrap; }
.api-grid[data-view="icons"] .api-card { width: calc(14.285% - 5px); min-height: 96px; padding: 10px 7px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; border-left-width: 1px; text-align: center; }
.api-grid[data-view="icons"] .card-icon { width: 38px; height: 38px; flex: 0 0 auto; font-size: 18px; }
.api-grid[data-view="icons"] .card-icon .category-icon { width: 23px; height: 23px; }
.api-grid[data-view="icons"] .card-title { width: 100%; overflow: visible; font-size: 14px; line-height: 1.25; text-overflow: clip; white-space: normal; }
.api-grid[data-view="icons"] .card-description,
.api-grid[data-view="icons"] .card-attributes { display: none; }
.empty-state { padding: 80px; text-align: center; color: var(--muted); }
.empty-state p { font-size: 22px; }
.pagination { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; border-bottom: 1px solid var(--line); }
.pagination[hidden] { display: none; }
.pagination span { color: var(--muted); font: 14px var(--mono); }
.pagination .button { min-width: 105px; }

.catalog-workspace { min-width: 0; }
.endpoint-view { width: 100%; min-width: 0; max-width: 100%; color: var(--ink); background: var(--card); }
.endpoint-view:focus { outline: 0; }
.endpoint-view-bar { display: none; }
.endpoint-back { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--card); font: 600 11px var(--mono); cursor: pointer; }
.dialog-shell, #dialog-content { width: 100%; min-width: 0; max-width: 100%; }
.dialog-shell { position: relative; padding: 18px; }
.dialog-heading { padding-right: 0; }
.dialog-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.dialog-heading .eyebrow { margin: 0 0 3px; font-size: 8px; }
.dialog-heading h2 { font-size: clamp(27px, 4vw, 38px); line-height: 1; }
.dialog-description { max-width: 780px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.endpoint-formulation {
  margin-top: 12px; padding: 8px 10px; display: grid;
  grid-template-columns: auto minmax(180px, 360px) minmax(0, 1fr); align-items: center; gap: 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--green); background: var(--soft);
}
.endpoint-formulation label { font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.endpoint-formulation select { min-height: 32px; padding: 5px 28px 5px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--card); font: 10px var(--mono); }
.endpoint-formulation p { margin: 0; overflow: hidden; color: var(--muted); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px) {
  .endpoint-formulation { grid-template-columns: 1fr; }
}
.detail-tags { display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.detail-tags .tag { background: var(--soft); }
.example-picker { margin-top: 12px; }
.example-heading { min-height: 28px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ink); color: var(--muted); font: 8px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.example-heading > span:first-child { flex: 0 0 auto; color: var(--ink); }
.example-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--line); }
.example-option { min-height: 36px; padding: 6px 8px; border: 0; overflow: hidden; color: var(--ink); background: var(--card); text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.example-option:hover { background: var(--soft); }
.example-option.active { color: var(--paper); background: var(--green); }
.example-option strong { display: block; overflow: hidden; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.example-description { min-width: 0; overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.3; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.endpoint-box { min-height: 40px; margin-top: 10px; padding: 5px 6px 5px 9px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; background: #202220; border-radius: 3px; color: white; }
.request-method { color: #9caaa3; font: 8px var(--mono); letter-spacing: .08em; }
.endpoint-url { overflow: hidden; color: var(--lime); font: 10px/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.endpoint-box .icon-button { color: white; }
.params { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 5px; margin: 7px 0; }
.param { min-width: 0; }
.param label { display: block; margin: 0 0 3px; overflow: hidden; color: var(--muted); font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.param input { width: 100%; min-height: 30px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--card); font: 10px var(--mono); }
.param input[aria-invalid="true"] { border-color: #b3412f; }
.field-combobox { position: relative; min-width: 0; }
.field-combobox > input { padding-right: 30px; }
.field-suggestion-toggle {
  position: absolute; z-index: 2; top: 1px; right: 1px; width: 28px; height: calc(100% - 2px);
  padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0 2px 2px 0;
  color: var(--muted); background: var(--card); font: 15px/1 var(--mono); cursor: pointer;
}
.field-suggestion-toggle:hover, .field-suggestion-toggle:focus-visible { color: var(--ink); background: var(--soft); }
.field-suggestion-menu {
  position: absolute; z-index: 30; top: calc(100% + 3px); left: 0; right: 0;
  max-height: 230px; overflow: auto; border: 1px solid var(--line); border-radius: 3px;
  background: var(--card); box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.field-suggestion-menu[hidden] { display: none; }
.field-suggestion-menu button {
  width: 100%; min-height: 34px; padding: 6px 8px; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  border: 0; border-bottom: 1px solid var(--line); color: var(--ink);
  background: var(--card); text-align: left; cursor: pointer;
}
.field-suggestion-menu button:last-child { border-bottom: 0; }
.field-suggestion-menu button:hover, .field-suggestion-menu button:focus-visible { background: var(--soft); }
.field-suggestion-menu strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.field-suggestion-menu code { color: var(--green); font: 8px var(--mono); }
.field-suggestion-menu p { margin: 0; padding: 9px; color: var(--muted); font: 8px/1.4 var(--mono); }
.field-guidance, .field-availability, .field-limits, .field-resolution { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font: 8px/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.field-availability { white-space: normal; }
.field-limits { padding-left: 6px; border-left: 2px solid var(--line); white-space: normal; }
.field-limits strong { margin-right: 4px; color: var(--ink); font-size: inherit; text-transform: uppercase; }
.field-limits a { color: var(--green); }
.field-resolution:empty { display: none; }
.field-resolution[data-state="resolved"] { color: var(--green); }
.field-resolution[data-state="error"] { color: #b3412f; }
.field-resolution[data-state="warning"] { color: #9a6a14; }
.request-diagnostics { margin: 5px 0 8px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 3px; font: 8px/1.4 var(--mono); }
.request-diagnostics[data-state="error"] { border-color: #b3412f; }
.request-diagnostics[data-state="warning"] { border-color: #9a6a14; }
.request-diagnostics p { display: flex; gap: 7px; margin: 0; }
.request-diagnostics p + p { margin-top: 3px; }
.request-diagnostics strong { flex: 0 0 auto; text-transform: uppercase; }
.request-diagnostics span { color: var(--muted); }
.demo-actions { display: flex; align-items: center; gap: 7px; }
.docs-link { font-size: 12px; font-weight: 700; color: var(--green); }
.result-panel { margin-top: 8px; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.view-tabs { display: flex; gap: 2px; margin-top: 9px; padding: 2px; background: var(--soft); border-radius: 3px; }
.view-tab { flex: 1; min-height: 31px; border: 0; border-radius: 2px; background: transparent; color: var(--muted); font: 9px var(--mono); cursor: pointer; }
.view-tab.active { color: var(--ink); background: var(--card); box-shadow: 0 2px 7px rgba(19,38,31,.08); }
.view-pane[hidden] { display: none; }
.visualization-panel { margin-top: 10px; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.map-toolbar { min-height: 48px; padding: 8px 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 15px; border-bottom: 1px solid var(--line); }
.map-toolbar p { margin: 0; color: var(--muted); font: 9px var(--mono); }
.map-legend { display: flex; align-items: center; gap: 7px; font: 9px var(--mono); color: var(--muted); }
.legend-gradient { width: 70px; height: 7px; border-radius: 2px; background: linear-gradient(90deg, #c7ef72, #f06f3c); }
.map-legend-discrete { flex-wrap: wrap; justify-content: flex-end; }
.map-legend-title { color: var(--ink); font-weight: 700; }
.map-legend-key { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.map-legend-swatch { width: 9px; height: 9px; flex: 0 0 9px; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 2px; background: var(--legend-color); }
.map-canvas { height: 430px; background: var(--soft-strong); }
.map-empty { height: 260px; display: grid; place-items: center; padding: 30px; text-align: center; color: var(--muted); font-size: 13px; }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.insight { min-height: 92px; padding: 18px; border-right: 1px solid var(--line); }
.insight:last-child { border-right: 0; }
.insight strong { display: block; margin-bottom: 6px; font-size: 20px; letter-spacing: -.04em; }
.insight span { color: var(--muted); font: 9px/1.5 var(--mono); text-transform: uppercase; }
.interpretation { padding: 20px; border-top: 1px solid var(--line); }
.interpretation h4 { margin: 0 0 8px; font-size: 13px; }
.interpretation p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.quality-notice { margin-top: 12px !important; padding-left: 12px; border-left: 2px solid var(--orange); }
.schema-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); }
.schema-field { padding: 13px; display: flex; justify-content: space-between; background: var(--card); font: 9px var(--mono); }
.schema-field span:last-child { color: var(--green); }
.collection-summary { margin-top: 10px; padding: 14px; display: flex; align-items: end; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: 3px; }
.collection-summary h3 { margin: 0 0 6px; font-size: 23px; }
.collection-summary p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.collection-stat { flex: 0 0 auto; text-align: right; }
.collection-stat strong { display: block; color: var(--green); font-size: 31px; letter-spacing: -.05em; }
.collection-stat span { color: var(--muted); font: 8px var(--mono); text-transform: uppercase; }
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.art-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.art-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(19,38,31,.1); }
.art-image { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; background: var(--panel); }
.art-image img { width: 100%; height: 100%; display: block; object-fit: contain; transition: transform .35s; }
.art-card:hover .art-image img { transform: scale(1.025); }
.art-image-placeholder { padding: 20px; color: var(--muted); text-align: center; font: 9px/1.6 var(--mono); }
.public-domain-badge { position: absolute; top: 7px; left: 7px; padding: 4px 6px; border-radius: 2px; color: var(--ink); background: color-mix(in srgb, var(--soft-strong) 92%, transparent); font: 7px var(--mono); text-transform: uppercase; }
.art-meta { min-height: 130px; padding: 10px; background: var(--card); }
.art-meta h4 { margin: 0 0 7px; font-size: 13px; line-height: 1.35; }
.art-meta > p { margin: 0 0 13px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.art-facts { display: flex; flex-wrap: wrap; gap: 5px; }
.art-facts span { padding: 4px 6px; background: var(--soft); border-radius: 2px; color: var(--muted); font: 7px var(--mono); }
.presentation-loading { margin-top: 18px; min-height: 260px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); font: 11px var(--mono); }
.presentation-facts { display: flex; gap: 8px; margin: 14px 0 0; }
.presentation-facts span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font: 8px var(--mono); text-transform: uppercase; }
.book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.book-card { min-width: 0; min-height: 205px; padding: 15px; display: grid; grid-template-columns: 105px 1fr; gap: 17px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.book-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(19,38,31,.08); }
.book-cover { width: 105px; height: 160px; display: grid; place-items: center; overflow: hidden; background: var(--panel); color: var(--muted); text-align: center; font: 8px var(--mono); }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-card h4 { margin: 7px 0 7px; font-size: 14px; line-height: 1.35; }
.book-card p { margin: 0 0 17px; color: var(--muted); font-size: 10px; }
.record-list { margin-top: 14px; border-top: 1px solid var(--line); }
.record-card { min-height: 125px; padding: 20px 18px; display: flex; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background .2s; }
.record-card:hover { background: var(--panel); }
.record-main { min-width: 0; max-width: 650px; }
.record-main h4 { margin: 0 0 7px; font-size: 14px; line-height: 1.4; }
.record-main p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.record-main .record-subtitle { margin-bottom: 8px; color: var(--green); font: 9px var(--mono); }
.record-side { flex: 0 0 150px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-direction: column; }
.record-side .art-facts { justify-content: flex-end; }
.record-arrow { color: var(--green); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 14px; border: 1px solid var(--line); background: var(--line); }
.metric-card { min-height: 135px; padding: 20px; display: flex; flex-direction: column; background: var(--card); }
.metric-card > span { color: var(--muted); font: 9px var(--mono); text-transform: capitalize; }
.metric-card strong { margin-top: auto; font-size: clamp(25px, 4vw, 39px); font-weight: 500; letter-spacing: -.05em; }
.metric-card small { color: var(--green); font: 9px var(--mono); }
.chart-workspace { display: grid; gap: 12px; margin-top: 10px; }
.data-chart { min-width: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--card); }
.chart-toolbar { min-height: 56px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.chart-unit, .chart-range { margin: 0; }
.chart-unit { font-size: 12px; font-weight: 700; }
.chart-range { margin-top: 2px; color: var(--muted); font: 8px/1.4 var(--mono); }
.chart-download { padding: 5px 7px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); background: transparent; font: 8px var(--mono); cursor: pointer; }
.chart-download:hover, .chart-download:focus-visible { color: var(--ink); border-color: var(--muted); }
.chart-legend { min-height: 42px; padding: 6px 10px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.chart-legend-label { margin-right: 3px; color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.chart-legend button { padding: 5px 7px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 2px; color: var(--ink); background: transparent; font: 8px var(--mono); cursor: pointer; }
.chart-legend button:hover, .chart-legend button:focus-visible { border-color: var(--line); }
.chart-legend button[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; opacity: .58; }
.chart-legend i, .chart-stat > p i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--series-color); }
.chart-canvas { position: relative; padding: 8px; background: var(--panel); }
.line-chart { display: block; width: 100%; height: auto; overflow: visible; outline: none; touch-action: none; }
.line-chart:focus-visible { box-shadow: inset 0 0 0 2px var(--muted); }
.chart-grid line { stroke: var(--line); stroke-width: 1; }
.chart-grid text { fill: var(--muted); font: 9px var(--mono); }
.chart-line-halo { fill: none; stroke: var(--card); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.chart-line { fill: none; stroke: var(--series-color); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-crosshair { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-focus-points circle { stroke: var(--card); stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-pointer-target { fill: transparent; cursor: crosshair; }
.chart-tooltip { position: absolute; top: 14px; z-index: 2; width: min(200px, 46%); padding: 8px; transform: translateX(calc(-50% + 8px)); border: 1px solid var(--line); border-radius: 2px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 5px 18px var(--shadow); pointer-events: none; font: 8px var(--mono); }
.chart-tooltip strong { display: block; margin-bottom: 5px; color: var(--ink); }
.chart-tooltip span { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 5px; margin-top: 3px; color: var(--muted); }
.chart-tooltip i { width: 7px; height: 7px; border-radius: 50%; }
.chart-tooltip b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.chart-tooltip em { color: var(--ink); font-style: normal; }
.chart-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.chart-stat { min-width: 0; padding: 9px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chart-stat:nth-child(even) { border-right: 0; }
.chart-stat > p { margin: 0 0 7px; display: flex; align-items: center; gap: 6px; overflow: hidden; font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.chart-stat dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.chart-stat dl div { min-width: 0; }
.chart-stat dt { color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.chart-stat dd { margin: 2px 0 0; overflow: hidden; font: 10px var(--mono); text-overflow: ellipsis; }
.chart-data-details { font: 8px var(--mono); }
.chart-data-details summary { padding: 8px 10px; color: var(--muted); cursor: pointer; }
.chart-table-wrap { max-height: 260px; overflow: auto; border-top: 1px solid var(--line); }
.chart-table-wrap table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.chart-table-wrap th, .chart-table-wrap td { padding: 6px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: right; }
.chart-table-wrap th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; }
.chart-table-wrap thead th { position: sticky; top: 0; z-index: 2; color: var(--muted); background: var(--card); }
.chart-table-wrap thead th:first-child { z-index: 3; }
.country-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.country-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 4px; color: inherit; background: var(--card); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.country-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(19,38,31,.08); }
.flag-wrap { height: 105px; display: grid; place-items: center; overflow: hidden; background: var(--panel); }
.flag-wrap img { width: 100%; height: 100%; object-fit: contain; }
.country-card h4 { margin: 14px 0 3px; font-size: 14px; }
.country-card > p { min-height: 30px; margin: 0 0 12px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.country-facts { display: flex; gap: 5px; flex-wrap: wrap; }
.country-facts span { padding: 4px 6px; background: var(--soft); color: var(--muted); font: 7px var(--mono); }
.result-head, .code-tabs { min-height: 34px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--muted); font: 8px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.result-panel pre { max-height: 260px; overflow: auto; padding: 12px; background: var(--panel); font: 9px/1.55 var(--mono); }
.result-placeholder { color: var(--muted); }
.implementation { margin-top: 9px; }
.implementation h3 { margin: 0 0 4px; font-size: 15px; }
.implementation > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.code-tabs { justify-content: flex-start; gap: 22px; margin-top: 8px; padding: 0; }
.code-tab { align-self: stretch; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 10px var(--mono); cursor: pointer; }
.code-tab.active { color: var(--green); border-color: var(--green); }
.code-sample { position: relative; background: #202220; color: #e2e4e2; }
.code-sample pre { padding: 14px; font: 10px/1.7 var(--mono); overflow: auto; }
.copy-code { position: absolute; top: 12px; right: 12px; }
.error-text { color: #b3412f; }

footer { min-height: 100px; padding: 20px clamp(14px, 3vw, 42px); display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--line); }
footer p { color: var(--muted); font-size: 16px; }
.footer-links { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.footer-index { padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font: 600 13px var(--mono); text-decoration: none; }
.footer-index:hover { border-color: var(--green); color: var(--green); }
.footer-note { margin: 0; }
[data-theme="dark"] .example-option:hover { background: var(--soft); }
[data-theme="dark"] .detail-tags .tag,
[data-theme="dark"] .art-facts span,
[data-theme="dark"] .country-facts span { background: var(--soft); color: var(--muted); }
[data-theme="dark"] .art-card,
[data-theme="dark"] .art-image { background: var(--panel); }

@media (min-width: 901px) {
  .catalog-workspace.detail-open {
    display: grid;
    grid-template-columns: clamp(300px, 32vw, 430px) minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - 58px);
  }
  .catalog-workspace.detail-open .catalog {
    min-width: 0;
    padding: 7px 8px 60px;
    border-right: 1px solid var(--line);
  }
  .catalog-workspace.detail-open .endpoint-view {
    position: sticky;
    top: 58px;
    height: calc(100vh - 58px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .catalog-workspace.detail-open .catalog-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding: 5px 0;
  }
  .catalog-workspace.detail-open .catalog-meta-actions {
    width: 100%;
    justify-content: space-between;
  }
  .catalog-workspace.detail-open .view-mode { display: none; }
  .catalog-workspace.detail-open .api-grid .api-card {
    width: 100%;
    min-height: 64px;
    padding: 6px 7px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 7px;
    border-left-width: 3px;
    text-align: left;
  }
  .catalog-workspace.detail-open .api-grid .card-icon {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .catalog-workspace.detail-open .api-grid .card-title {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    font-size: 14px;
    text-align: left;
  }
  .catalog-workspace.detail-open .api-grid .card-description {
    display: block;
    grid-column: 2;
    grid-row: 2;
    font-size: 10px;
  }
  .catalog-workspace.detail-open .api-grid .card-attributes { display: none; }
}

@media (max-width: 1240px) {
  .api-grid[data-view="icons"] .api-card { width: calc(20% - 4px); }
}
@media (max-width: 900px) {
  body.detail-open .topbar,
  body.detail-open > footer { display: none; }
  .catalog-workspace.detail-open .catalog { display: none; }
  .catalog-workspace.detail-open .endpoint-view {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
  }
  .catalog-workspace.detail-open .endpoint-view-bar {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex;
    padding: 7px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--topbar);
    backdrop-filter: blur(14px);
  }
  .catalog-workspace.detail-open .dialog-title-row > *,
  .catalog-workspace.detail-open .endpoint-box,
  .catalog-workspace.detail-open .demo-actions { min-width: 0; max-width: 100%; }
  .catalog-workspace.detail-open .dialog-description { overflow-wrap: anywhere; }
  .catalog-workspace.detail-open .demo-actions { flex-wrap: wrap; }
  .catalog-workspace.detail-open .docs-link { overflow-wrap: anywhere; }
  .hero { grid-template-columns: 1fr; padding-top: 60px; }
  .request-card { max-width: 650px; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; }
  .search { min-width: 0; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .api-grid[data-view="icons"] .api-card { width: calc(25% - 4px); }
}
@media (max-width: 620px) {
  .topbar nav { display: none; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 0 10px; }
  .topbar .brand > span { display: none; }
  .topbar .theme-toggle-label { display: none; }
  .topbar .theme-toggle { width: 34px; min-width: 34px; padding: 0; }
  .topbar-search { padding: 0 6px; }
  .topbar-search > span, .topbar-search kbd { display: none; }
  .topbar-search input { font-size: 14px; }
  .hero { min-height: auto; padding: 55px 20px 80px; }
  h1 { font-size: 55px; }
  .request-card { box-shadow: 6px 6px 0 var(--line); }
  .request-card pre { min-height: 0; font-size: 9px; padding: 20px 16px; }
  .catalog { padding: 7px 20px 90px; }
  .catalog-meta { align-items: flex-start; flex-direction: column; gap: 5px; padding: 6px 0; }
  .catalog-meta-actions { width: 100%; justify-content: space-between; }
  .api-grid:not([data-view="icons"]) .api-card { width: 100%; min-height: 88px; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 2px 6px; padding: 7px 9px 7px 7px; }
  .api-grid:not([data-view="icons"]) .card-icon { grid-column: 1; grid-row: 1 / 4; }
  .api-grid:not([data-view="icons"]) .card-title { grid-column: 2; grid-row: 1; }
  .api-grid:not([data-view="icons"]) .card-description { grid-column: 2; grid-row: 2; }
  .api-grid:not([data-view="icons"]) .card-attributes { grid-column: 2; grid-row: 3; }
  .api-grid[data-view="icons"] .api-card { width: calc(50% - 3px); min-height: 88px; }
  .card-title { font-size: 16px; }
  .card-description { font-size: 13px; }
  .card-attributes { font-size: 9px; }
  .theme-toggle { min-width: 80px; padding: 0 11px; }
  .params, .example-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-toolbar { align-items: flex-start; flex-direction: column; }
  .map-legend-discrete { justify-content: flex-start; }
  .map-legend-title { width: 100%; }
  .insight-grid, .schema-list { grid-template-columns: 1fr; }
  .insight { border-right: 0; border-bottom: 1px solid var(--line); }
  .art-grid { grid-template-columns: repeat(2, 1fr); }
  .country-grid { grid-template-columns: repeat(2, 1fr); }
  .dialog-shell { padding: 14px; }
  .dialog-title-row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .detail-tags { justify-content: flex-start; }
  .art-grid { grid-template-columns: 1fr; }
  .book-grid, .country-grid, .metric-grid { grid-template-columns: 1fr; }
  .chart-stat-grid { grid-template-columns: 1fr; }
  .chart-stat { border-right: 0; }
  .book-card { grid-template-columns: 90px 1fr; }
  .book-cover { width: 90px; height: 137px; }
  .record-card { align-items: flex-start; flex-direction: column; }
  .record-side { width: 100%; flex: none; align-items: flex-start; }
  .record-side .art-facts { justify-content: flex-start; }
  .collection-summary { align-items: flex-start; flex-direction: column; }
  .collection-stat { text-align: left; }
  footer { align-items: flex-start; flex-direction: column; gap: 15px; }
  .footer-links { margin-left: 0; align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Multi-document endpoint workspace and dashboard */
.profile-toggle {
  width: max-content; min-width: 42px; min-height: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; justify-self: end; gap: 6px;
  border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); background: transparent;
  font: 600 12px var(--mono); cursor: pointer;
}
.profile-toggle:hover { color: var(--paper); background: var(--ink); }
.profile-toggle-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.topbar-actions { display: flex; align-items: center; justify-self: end; gap: 6px; }
.lab-toggle {
  min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: transparent;
  font: 600 12px var(--mono); text-decoration: none;
}
.lab-toggle:hover, body.lab-open .lab-toggle { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.api-card { position: relative; padding-right: 38px; }
.favorite-star {
  width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: 3px; color: var(--muted); background: var(--card); font-size: 19px; line-height: 1;
  cursor: pointer;
}
.favorite-star:hover, .favorite-star.selected { color: var(--orange); border-color: var(--orange); }
.card-favorite { position: absolute; top: 50%; right: 6px; z-index: 2; transform: translateY(-50%); }
.detail-favorite { flex: 0 0 auto; }
.endpoint-view-bar {
  position: sticky; top: 0; z-index: 12; min-width: 0; padding: 6px 8px;
  display: flex; align-items: stretch; gap: 6px; border-bottom: 1px solid var(--line);
  background: var(--topbar); backdrop-filter: blur(14px);
}
.endpoint-tabs { min-width: 0; flex: 1; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
.endpoint-tab {
  min-width: 76px; max-width: 230px; flex: 1 1 170px; display: grid;
  grid-template-columns: minmax(0, 1fr) 28px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--panel);
}
.endpoint-tab.active { border-color: var(--ink); background: var(--card); }
.endpoint-tab-select, .endpoint-tab-close {
  min-width: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer;
  font: 10px var(--mono);
}
.endpoint-tab-select { padding: 7px 8px; overflow: hidden; text-align: left; }
.endpoint-tab-select span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.endpoint-tab-close { font-size: 16px; }
.endpoint-tab.active .endpoint-tab-select { color: var(--ink); font-weight: 600; }
.endpoint-back { display: none; order: -1; flex: 0 0 auto; }
.endpoint-tab-panel { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.endpoint-tab-panel[hidden] { display: none; }
.detail-section { margin-top: 14px; }
.detail-section > h3, .example-heading > span:first-child {
  margin: 0 0 5px; color: var(--ink); font: 600 10px var(--mono); letter-spacing: .06em;
  text-transform: uppercase;
}
.detail-docs { display: inline-block; margin-top: 8px; }
.cross-reference-provenance { margin: 9px 0; padding: 7px 9px; border-left: 3px solid var(--ink); background: var(--soft); color: var(--muted); font: 10px/1.5 var(--mono); }
.cross-reference-panel { margin-top: 14px; border-top: 1px solid var(--line); }
.cross-reference-heading { padding: 10px 0 7px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.cross-reference-heading h3 { margin: 0; font-size: 16px; }
.cross-reference-heading p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.cross-reference-heading > span { color: var(--muted); font: 9px var(--mono); white-space: nowrap; }
.cross-reference-list { border: 1px solid var(--line); }
.cross-reference-group + .cross-reference-group { border-top: 1px solid var(--line); }
.cross-reference-group > header { padding: 6px 8px; display: flex; justify-content: space-between; gap: 8px; background: var(--soft); }
.cross-reference-group > header strong { font-size: 11px; }
.cross-reference-group > header code { color: var(--muted); font: 8px var(--mono); }
.cross-reference-value { min-width: 0; padding: 6px 8px; display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 8px; border-top: 1px solid var(--line); }
.cross-reference-value > span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cross-reference-group[data-cross-reference-kind="bundle"] .cross-reference-value > span { display: grid; gap: 2px; }
.cross-reference-group[data-cross-reference-kind="bundle"] .cross-reference-value > span small { overflow: hidden; color: var(--muted); font: 8px var(--mono); text-overflow: ellipsis; }
.cross-reference-group[data-cross-reference-kind="bundle"] .cross-reference-value > span strong { font: 11px var(--mono); }
.cross-reference-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.cross-reference-actions button { padding: 4px 6px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); background: var(--card); font: 8px var(--mono); cursor: pointer; }
.cross-reference-actions button:hover, .cross-reference-actions button:focus-visible { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.endpoint-metadata {
  min-height: 0; margin-top: 18px; padding: 14px 0 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 20px;
  border-top: 1px solid var(--line); color: var(--ink);
}
.endpoint-metadata > h3 {
  grid-column: 1 / -1; margin: 0 0 2px; font-size: 18px; line-height: 1.2;
}
.endpoint-metadata > div { min-width: 0; display: grid; gap: 5px; }
.endpoint-metadata > div > span { color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.endpoint-metadata strong { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.endpoint-metadata .detail-tags { justify-content: flex-start; }
.endpoint-metadata .tag { font-size: 10px; }
.endpoint-metadata > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.profile-view { width: min(980px, 100%); min-height: calc(100vh - 58px); margin: 0 auto; padding: 36px clamp(16px, 5vw, 60px) 80px; }
.profile-heading { padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.profile-heading h1 { margin: 5px 0; font-size: clamp(38px, 7vw, 70px); }
.profile-heading > p:last-child { color: var(--muted); font-size: 15px; }
.profile-back { margin-bottom: 28px; border: 0; color: var(--green); background: transparent; font: 600 11px var(--mono); cursor: pointer; }
.profile-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.profile-section h2 { margin: 0 0 12px; font-size: 22px; }
.account-status { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.auth-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.auth-form[hidden], .account-user[hidden] { display: none; }
.auth-form label { display: grid; gap: 4px; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.auth-form input { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--card); font: 13px var(--sans); }
.auth-actions { display: flex; gap: 6px; }
.account-user { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.account-user > div { display: grid; gap: 3px; }
.account-user strong { font-size: 16px; }
.account-user span { color: var(--muted); font-size: 12px; }
.account-actions { display: flex; gap: 7px; }
.auth-view { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 620px) minmax(320px, 1fr); background: var(--card); }
.auth-view[hidden] { display: none; }
body.auth-open > .topbar, body.auth-open > footer { display: none; }
.auth-shell { position: relative; min-height: 100vh; padding: clamp(24px, 6vw, 70px); display: flex; flex-direction: column; justify-content: center; }
.auth-brand { position: absolute; top: 26px; left: clamp(24px, 6vw, 70px); }
.auth-close { position: absolute; top: 25px; right: 25px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: transparent; font-size: 22px; cursor: pointer; }
.auth-intro { margin-bottom: 25px; }
.auth-intro h1 { margin: 5px 0 8px; font-size: clamp(40px, 7vw, 68px); line-height: 1; }
.auth-intro > p:last-child { max-width: 460px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.auth-page-form { display: grid; gap: 12px; }
.auth-page-form[hidden] { display: none; }
.auth-page-form label { display: grid; gap: 5px; color: var(--muted); font: 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.auth-page-form label[hidden] { display: none; }
.auth-page-form input { width: 100%; min-height: 48px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--card); font: 15px var(--sans); }
.auth-page-form input:focus { outline: 2px solid color-mix(in srgb, var(--green) 32%, transparent); border-color: var(--green); }
.auth-submit { min-height: 50px; margin-top: 4px; }
.auth-secondary-actions { margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; }
.auth-secondary-actions[hidden] { display: none; }
.auth-notice { margin-bottom: 14px; padding: 11px 12px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 3px; color: var(--ink); background: var(--panel); font-size: 13px; line-height: 1.45; }
.auth-notice[data-tone="error"] { border-left-color: #b3412f; }
.auth-notice[data-tone="success"] { border-left-color: var(--green); }
.auth-email-sent { padding: 28px 0 0; text-align: center; }
.auth-email-sent[hidden] { display: none; }
.auth-email-sent h2 { margin: 12px 0 7px; font-size: 25px; }
.auth-email-sent p { margin: 0 auto 20px; max-width: 440px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.auth-email-sent .button { margin: 0 auto 12px; }
.auth-email-sent .text-button { display: block; margin: 0 auto; }
.auth-mail-icon { width: 54px; height: 54px; margin: 0 auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--green); font-size: 22px; }
.auth-aside { min-height: 100vh; padding: clamp(35px, 7vw, 90px); display: flex; justify-content: flex-end; flex-direction: column; overflow: hidden; color: var(--paper); background: var(--ink); }
.auth-rex { width: min(420px, 72%); margin: auto; fill: currentColor; opacity: .12; transform: scaleX(-1); }
.auth-aside p { max-width: 540px; margin: 0; font-size: clamp(23px, 3vw, 42px); font-weight: 600; line-height: 1.18; letter-spacing: -.035em; }
.about-view { width: 100%; min-height: calc(100vh - 58px); color: var(--ink); background: var(--card); }
.about-view[hidden] { display: none; }
#about-content { width: min(1180px, 100%); margin: 0 auto; padding: clamp(45px, 8vw, 110px) clamp(18px, 5vw, 64px); }
.about-heading { max-width: 900px; padding-bottom: clamp(42px, 7vw, 82px); }
.about-heading h1 { margin: 8px 0 14px; font-size: clamp(54px, 10vw, 118px); line-height: .9; letter-spacing: -.065em; }
.about-heading > p:last-child { max-width: 760px; margin: 0; color: var(--muted); font-size: clamp(18px, 2.4vw, 30px); line-height: 1.35; }
.about-section { padding: clamp(36px, 6vw, 72px) 0; border-top: 1px solid var(--line); }
.about-section-heading { max-width: 760px; margin-bottom: 27px; }
.about-section-heading h2 { margin: 5px 0 0; font-size: clamp(30px, 5vw, 54px); line-height: 1.05; letter-spacing: -.045em; }
.about-section-intro { max-width: 760px; margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--line); gap: 1px; }
.about-stats > div { min-width: 0; min-height: 150px; padding: 19px; display: flex; justify-content: space-between; flex-direction: column; background: var(--card); }
.about-stats strong { font-size: clamp(32px, 5vw, 58px); font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.about-stats span { color: var(--muted); font: 9px/1.45 var(--mono); text-transform: uppercase; }
.about-breakdown { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.about-breakdown > div { min-height: 47px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.about-breakdown > div:nth-child(odd) { border-right: 1px solid var(--line); }
.about-breakdown span { color: var(--muted); font-size: 13px; }
.about-breakdown strong { font: 500 16px var(--mono); }
.about-footnote { max-width: 790px; margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.about-prose > p { max-width: 900px; margin: 0 0 16px; font-size: clamp(16px, 2vw, 21px); line-height: 1.65; letter-spacing: -.012em; }
.about-measure-groups { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 34px; }
.about-measure-groups > section > header { min-height: 62px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.about-measure-groups h3, .about-distributions h3 { margin: 0; font-size: 18px; }
.about-measure-groups header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.about-measure-groups .about-breakdown, .about-distributions .about-breakdown { margin-top: 0; grid-template-columns: 1fr; }
.about-measure-groups .about-breakdown > div:nth-child(odd), .about-distributions .about-breakdown > div:nth-child(odd) { border-right: 0; }
.about-distributions { margin-top: 38px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.about-distributions > section > header { padding-bottom: 9px; display: flex; align-items: baseline; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.about-distributions header span { color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.about-principles { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--line); gap: 1px; }
.about-principles article { min-height: 135px; padding: 16px; display: grid; align-content: space-between; gap: 24px; background: var(--card); }
.about-principles strong { font-size: 18px; }
.about-principles span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.about-methods { margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; counter-reset: about-method; border: 1px solid var(--line); background: var(--line); gap: 1px; }
.about-methods li { min-height: 155px; padding: 17px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-content: start; gap: 7px 11px; counter-increment: about-method; background: var(--card); }
.about-methods li::before { content: counter(about-method, decimal-leading-zero); grid-row: 1 / span 2; color: var(--muted); font: 9px var(--mono); }
.about-methods strong { font-size: 16px; }
.about-methods span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.about-workflow { margin: 0; padding: 0; list-style: none; counter-reset: about-step; border-top: 1px solid var(--line); }
.about-workflow li { min-height: 93px; padding: 16px 8px; display: grid; grid-template-columns: 42px 180px minmax(0, 1fr); align-items: baseline; gap: 15px; border-bottom: 1px solid var(--line); counter-increment: about-step; }
.about-workflow li::before { content: counter(about-step, decimal-leading-zero); color: var(--muted); font: 10px var(--mono); }
.about-workflow strong { font-size: 17px; }
.about-workflow span { max-width: 750px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.about-technical { margin-top: 34px; padding: 24px; border: 1px solid var(--line); background: var(--panel); }
.about-technical h3 { margin: 0 0 9px; font-size: 19px; }
.about-technical p { max-width: 900px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.about-technical-grid { padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--line); gap: 1px; }
.about-technical-grid > div { min-height: 190px; padding: 22px; background: var(--panel); }
.favorite-list { display: grid; gap: 5px; }
.favorite-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--line); border-radius: 3px; background: var(--card); }
.favorite-open { min-width: 0; padding: 12px; display: grid; gap: 3px; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.favorite-open strong { font-size: 15px; }
.favorite-open span, .setting-row span { color: var(--muted); font-size: 12px; }
.favorite-remove { min-width: 46px; border: 0; border-left: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; }
.favorite-remove.confirm { min-width: 82px; color: white; background: #a53b32; font: 600 10px var(--mono); }
.favorite-empty { padding: 28px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.setting-row > div { display: grid; gap: 3px; }

/* Flow Lab */
.lab-view { width: 100%; min-height: calc(100vh - 58px); background: var(--card); }
.lab-view[hidden] { display: none; }
#lab-content { width: min(1780px, 100%); margin: 0 auto; padding: 18px clamp(10px, 2vw, 28px) 80px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lab-commandbar {
  min-height: 142px; padding: 20px 4px 22px; display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(480px, .8fr); align-items: end;
  gap: clamp(30px, 6vw, 100px); border-bottom: 1px solid var(--line);
}
.lab-commandbar h1 { margin: 3px 0 7px; font-size: clamp(38px, 5vw, 62px); line-height: .95; }
.lab-commandbar > div > p:last-child {
  max-width: 720px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55;
}
.lab-command-stats {
  margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); background: var(--line); gap: 1px;
}
.lab-command-stats div { min-width: 0; padding: 10px; display: grid; gap: 5px; background: var(--card); }
.lab-command-stats dt { color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.lab-command-stats dd { margin: 0; font-size: 22px; font-weight: 500; }
.lab-workspace {
  min-height: 700px; display: grid;
  grid-template-columns: minmax(245px, 285px) minmax(590px, 1fr) minmax(285px, 335px);
  background: var(--line); gap: 1px; border-bottom: 1px solid var(--line);
}
.lab-object-library, .lab-graph-stage, .lab-inspector { min-width: 0; background: var(--card); }
.lab-object-library, .lab-inspector { padding: 15px 12px 22px; }
.lab-region-heading {
  min-height: 52px; display: grid; grid-template-columns: 25px minmax(0, 1fr);
  align-items: start; gap: 7px;
}
.lab-region-index { color: var(--muted); font: 10px var(--mono); }
.lab-region-heading h2, .lab-graph-toolbar h2 { margin: 0; font-size: 15px; }
.lab-region-heading p, .lab-graph-toolbar p {
  margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4;
}
.lab-semantic-search {
  height: 39px; margin: 3px 0 15px; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 3px;
  color: var(--muted); background: var(--panel);
}
.lab-semantic-search > span { padding-left: 9px; }
.lab-semantic-search input {
  width: 100%; height: 37px; padding: 0; border: 0; outline: 0; color: var(--ink);
  background: transparent; font-size: 11px;
}
.lab-semantic-search:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lab-semantic-search kbd { margin-right: 6px; padding: 3px 5px; border: 1px solid var(--line); font: 8px var(--mono); }
.lab-library-section { margin-top: 12px; }
.lab-section-label {
  min-height: 23px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  color: var(--muted); font: 9px var(--mono); text-transform: uppercase;
}
.lab-section-label strong { color: var(--ink); font: 600 9px var(--mono); }
.lab-object-options { display: grid; gap: 3px; }
.lab-object-option {
  width: 100%; min-width: 0; min-height: 47px; padding: 7px; display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 7px;
  border: 1px solid transparent; border-radius: 3px; color: var(--ink);
  background: transparent; text-align: left; cursor: pointer;
}
.lab-object-option:hover { border-color: var(--line); background: var(--soft); }
.lab-object-option.active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.lab-object-glyph {
  width: 27px; height: 27px; display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%; font: 10px var(--mono);
}
.lab-object-option > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.lab-object-option strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lab-object-option small { overflow: hidden; color: var(--muted); font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.lab-object-option.active small { color: inherit; opacity: .7; }
.lab-object-count { color: var(--muted); font: 8px var(--mono); white-space: nowrap; }
.lab-object-option.active .lab-object-count { color: inherit; opacity: .7; }
.lab-library-more {
  width: 100%; min-height: 44px; margin-top: 5px; border: 1px dashed var(--line);
  border-radius: 3px; color: var(--muted); background: transparent;
  font: 8px var(--mono); cursor: pointer;
}
.lab-library-more:hover { color: var(--ink); border-color: var(--ink); }
.lab-recent-section { padding-top: 8px; border-top: 1px solid var(--line); }
.lab-guided-paths { padding-top: 8px; border-top: 1px solid var(--line); }
.lab-guided-paths > button {
  width: 100%; padding: 8px 6px; display: grid; gap: 3px; border: 0;
  border-top: 1px solid var(--line); color: var(--ink); background: transparent;
  text-align: left; cursor: pointer;
}
.lab-guided-paths > button:last-child { border-bottom: 1px solid var(--line); }
.lab-guided-paths > button:hover, .lab-guided-paths > button.active { background: var(--soft); }
.lab-guided-paths strong { font-size: 10px; }
.lab-guided-paths span { overflow: hidden; color: var(--muted); font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.lab-inline-empty, .lab-muted {
  margin: 0; padding: 18px 8px; color: var(--muted); font-size: 10px; line-height: 1.45;
}
.lab-graph-stage { padding: 15px clamp(12px, 2vw, 28px) 28px; overflow: hidden; }
.lab-graph-toolbar {
  min-height: 52px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.lab-graph-toolbar > div:first-child {
  display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 7px;
}
.lab-graph-filter { display: flex; }
.lab-graph-filter button {
  min-height: 28px; padding: 0 8px; border: 1px solid var(--line); border-right: 0;
  color: var(--muted); background: var(--card); font: 8px var(--mono); cursor: pointer;
}
.lab-graph-filter button:first-child { border-radius: 3px 0 0 3px; }
.lab-graph-filter button:last-child { border-right: 1px solid var(--line); border-radius: 0 3px 3px 0; }
.lab-graph-filter button:hover, .lab-graph-filter button.active {
  color: var(--paper); border-color: var(--ink); background: var(--ink);
}
.lab-filterbar {
  margin: 7px 0 0; padding: 7px; display: grid; gap: 7px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--panel);
}
.lab-filterbar-main {
  min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lab-filterbar-main > small { color: var(--muted); font: 8px/1.4 var(--mono); }
.lab-filterbar-main > [data-lab-clear-filters] {
  min-height: 44px; margin-left: auto; padding: 0 9px; border: 0;
  color: var(--muted); background: transparent; font: 8px var(--mono); cursor: pointer;
}
.lab-filterbar-main > [data-lab-clear-filters]:hover { color: var(--ink); }
.lab-filter-toggle {
  min-width: 150px; min-height: 44px; padding: 0 11px; display: inline-flex;
  align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 3px; color: var(--ink);
  background: var(--card); font: 600 9px var(--mono); cursor: pointer;
}
.lab-filter-toggle:hover { border-color: var(--ink); }
.lab-filter-toggle[aria-expanded="true"] {
  color: var(--paper); border-color: var(--ink); background: var(--ink);
}
.lab-filter-status {
  min-width: 0; color: var(--muted); font: 8px/1.45 var(--mono);
  overflow-wrap: anywhere;
}
.lab-active-filters {
  min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.lab-active-filter {
  max-width: 100%; min-height: 44px; padding: 5px 9px; display: inline-flex;
  align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink); background: var(--card); font: 8px/1.3 var(--mono);
  text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
.lab-active-filter:hover { border-color: var(--ink); background: var(--soft); }
.lab-filter-panel {
  grid-column: 1 / -1; min-width: 0; max-height: min(460px, 58vh); padding: 10px;
  overflow: auto; border-top: 1px solid var(--line); background: var(--card);
}
.lab-filter-panel[hidden] { display: none; }
.lab-filter-groups {
  min-width: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 8px;
}
.lab-filter-group { min-width: 0; }
.lab-filter-group fieldset,
fieldset.lab-filter-group {
  min-width: 0; height: 100%; margin: 0; padding: 6px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--panel);
}
.lab-filter-group legend,
fieldset.lab-filter-group > legend {
  max-width: 100%; padding: 0 5px; color: var(--ink);
  font: 600 9px/1.4 var(--mono); text-transform: uppercase;
}
.lab-filter-group label,
fieldset.lab-filter-group > label {
  min-width: 0; min-height: 44px; padding: 6px; display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px;
  border-radius: 2px; color: var(--muted); font: 9px/1.35 var(--mono);
  overflow-wrap: anywhere; cursor: pointer;
}
.lab-filter-group label:hover,
fieldset.lab-filter-group > label:hover { color: var(--ink); background: var(--soft); }
.lab-filter-group input[type="checkbox"],
fieldset.lab-filter-group > label input[type="checkbox"] {
  width: 17px; height: 17px; margin: 0; accent-color: var(--ink); cursor: pointer;
}
.lab-filter-group input[type="checkbox"]:disabled,
fieldset.lab-filter-group > label input[type="checkbox"]:disabled {
  opacity: .45; cursor: not-allowed;
}
.lab-filter-group label:has(input:disabled),
fieldset.lab-filter-group > label:has(input:disabled) {
  opacity: .55; cursor: not-allowed;
}
.lab-filter-group label > small,
fieldset.lab-filter-group > label > small {
  color: var(--muted); font: 8px var(--mono); white-space: nowrap;
}
.lab-filter-group > button,
fieldset.lab-filter-group > button {
  width: 100%; min-height: 44px; padding: 7px; border: 0; border-top: 1px solid var(--line);
  color: var(--muted); background: transparent; font: 8px var(--mono); cursor: pointer;
}
.lab-filter-group > button:hover,
fieldset.lab-filter-group > button:hover { color: var(--ink); background: var(--soft); }
.lab-filter-output-search {
  width: 100%; min-width: 0; margin: 3px 0 6px; padding: 0; display: grid; gap: 4px;
  border: 0; color: var(--muted); background: transparent; font: 8px var(--mono);
}
.lab-filter-output-search input {
  width: 100%; min-width: 0; min-height: 44px; padding: 8px 9px;
  border: 1px solid var(--line); border-radius: 3px; outline: 0;
  color: var(--ink); background: var(--card); font: 10px var(--sans);
}
.lab-filter-output-search input:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lab-filter-toggle:focus-visible,
.lab-active-filter:focus-visible,
.lab-filter-group input[type="checkbox"]:focus-visible,
.lab-filter-output-search:focus-visible,
.lab-view [data-lab-select-value]:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.lab-path {
  min-height: 35px; padding: 6px 0; display: flex; align-items: center; gap: 5px;
  overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--muted); font: 8px var(--mono); scrollbar-width: thin;
}
.lab-path > span:first-child { padding-right: 5px; text-transform: uppercase; }
.lab-path button {
  padding: 3px 5px; border: 0; border-radius: 2px; color: var(--muted);
  background: transparent; font: inherit; white-space: nowrap; cursor: pointer;
}
.lab-path button:hover { color: var(--ink); background: var(--soft); }
.lab-path button[aria-current="page"] { color: var(--ink); font-weight: 600; }
.lab-path-transition {
  min-width: 0; display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); white-space: nowrap;
}
.lab-path-transition::before {
  content: "→"; color: var(--muted); font: 8px var(--mono);
}
.lab-semantic-network {
  min-height: 530px; padding: 30px 0; display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(175px, 215px) minmax(160px, 1fr);
  align-items: center; gap: clamp(13px, 2vw, 28px);
}
.lab-hub-column { grid-column: 2; grid-row: 1; }
.lab-action-rail-producer { grid-column: 1; grid-row: 1; }
.lab-action-rail-consumer { grid-column: 3; grid-row: 1; }
.lab-action-rail.filtered { display: none; }
.lab-action-rail > header {
  min-height: 35px; padding-bottom: 6px; display: flex; align-items: end;
  justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line);
}
.lab-action-rail > header div { display: grid; gap: 1px; }
.lab-action-rail > header span { color: var(--muted); font: 8px var(--mono); text-transform: uppercase; }
.lab-action-rail > header strong { font-size: 12px; }
.lab-action-rail > header b { font-size: 22px; font-weight: 400; }
.lab-action-list { display: grid; gap: 4px; padding-top: 6px; }
.lab-action-card {
  position: relative; width: 100%; min-width: 0; min-height: 67px; padding: 8px;
  display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink); background: var(--panel); text-align: left; cursor: pointer;
}
.lab-action-card:hover, .lab-action-card.active { border-color: var(--ink); background: var(--soft-strong); }
.lab-action-card.active { box-shadow: inset 3px 0 0 var(--ink); }
.lab-action-provider {
  overflow: hidden; color: var(--muted); font: 8px var(--mono);
  text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;
}
.lab-action-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lab-action-card > span:not(.lab-action-provider) {
  overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap;
}
.lab-action-card small { color: var(--muted); font: 8px var(--mono); }
.lab-action-card > .lab-action-compatibility,
.lab-action-compatibility {
  min-width: 0; display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font: 8px/1.35 var(--mono); white-space: normal;
}
.lab-action-compatibility::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 6px;
  border: 1px solid currentColor; border-radius: 50%;
}
.lab-action-compatibility[data-level="exact"] { color: var(--ink); }
.lab-action-compatibility[data-level="exact"]::before { background: currentColor; }
.lab-readiness {
  min-width: 0; padding: 7px 8px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; border: 1px solid var(--line);
  border-radius: 3px; color: var(--muted); background: var(--panel);
  font: 8px/1.4 var(--mono); overflow-wrap: anywhere;
}
.lab-readiness strong { color: var(--ink); font: 600 9px var(--mono); }
.lab-readiness[data-state="ready"] { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.lab-readiness[data-state="ready"] strong { color: inherit; }
.lab-readiness[data-state="blocked"],
.lab-readiness[data-state="needs-input"] { border-style: dashed; }
.lab-readiness-proof {
  margin-top: 8px; padding: 8px; border: 1px solid var(--line);
  border-radius: 3px; background: var(--panel);
}
.lab-readiness-proof ol {
  margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px; list-style: none;
}
.lab-readiness-proof li {
  min-width: 0; padding: 6px 4px; display: grid; justify-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 2px; color: var(--muted);
  background: var(--card); text-align: center;
}
.lab-readiness-proof li > span {
  width: 17px; height: 17px; display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%; font: 8px var(--mono);
}
.lab-readiness-proof li strong { font: 8px var(--mono); }
.lab-readiness-proof li small { overflow: hidden; max-width: 100%; font: 7px var(--mono); text-overflow: ellipsis; }
.lab-readiness-proof [data-state="pass"] { color: var(--ink); border-color: var(--ink); }
.lab-readiness-proof [data-state="pass"] > span { color: var(--paper); background: var(--ink); }
.lab-readiness-proof [data-state="blocked"],
.lab-readiness-proof [data-state="stale"] { color: var(--ink); border-style: dashed; }
.lab-readiness-proof > p { margin: 7px 0 0; color: var(--muted); font: 8px var(--mono); }
.lab-readiness-proof > p strong { color: var(--ink); }
.lab-readiness-proof.compact {
  width: fit-content; margin: 0 0 2px; padding: 0; display: inline-flex; gap: 2px;
  border: 0; background: transparent;
}
.lab-readiness-proof.compact > span {
  width: 7px; height: 7px; overflow: hidden; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: transparent; font-size: 0;
}
.lab-readiness-proof.compact > [data-state="pass"] { border-color: var(--ink); background: var(--ink); }
.lab-readiness-proof.compact > [data-state="blocked"],
.lab-readiness-proof.compact > [data-state="stale"] { border-color: var(--ink); border-style: dashed; }
.lab-draft-workbench > .lab-readiness-proof {
  margin: 0; border-width: 0 0 1px; border-radius: 0; background: var(--soft);
}
.lab-action-rail-producer .lab-action-card::after,
.lab-action-rail-consumer .lab-action-card::before {
  content: ""; position: absolute; top: 50%; width: clamp(13px, 2vw, 28px);
  border-top: 1px solid var(--line);
}
.lab-action-rail-producer .lab-action-card::after { left: 100%; }
.lab-action-rail-consumer .lab-action-card::before { right: 100%; }
.lab-show-more {
  width: 100%; min-height: 29px; margin-top: 5px; border: 1px dashed var(--line);
  color: var(--muted); background: transparent; font: 8px var(--mono); cursor: pointer;
}
.lab-show-more:hover { color: var(--ink); border-color: var(--ink); }
.lab-action-skeleton {
  height: 270px; margin-top: 6px; border: 1px dashed var(--line);
  background: linear-gradient(110deg, transparent 20%, var(--soft) 45%, transparent 70%);
  background-size: 220% 100%; animation: lab-loading 1.4s linear infinite;
}
@keyframes lab-loading { to { background-position: -220% 0; } }
.lab-hub-column { min-width: 0; display: grid; justify-items: center; gap: 10px; }
.lab-connection-label {
  color: var(--muted); font: 8px var(--mono); letter-spacing: .08em;
  text-transform: uppercase; writing-mode: vertical-rl;
}
.lab-semantic-hub {
  position: relative; width: 100%; min-height: 270px; padding: 22px 13px 14px;
  display: flex; align-items: center; flex-direction: column; text-align: center;
  border: 2px solid var(--ink); border-radius: 4px; background: var(--card);
  box-shadow: 7px 7px 0 var(--soft-strong);
}
.lab-hub-kind { color: var(--muted); font: 8px var(--mono); text-transform: uppercase; }
.lab-hub-glyph {
  width: 53px; height: 53px; margin: 15px 0 11px; display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%; font: 19px var(--mono);
}
.lab-semantic-hub h2 { margin: 0; font-size: 18px; line-height: 1.1; }
.lab-semantic-hub code { margin-top: 5px; color: var(--muted); font: 8px var(--mono); }
.lab-semantic-hub p { margin: 12px 0 16px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.lab-hub-stats {
  width: 100%; margin-top: auto; padding-top: 9px; display: grid;
  grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line);
}
.lab-hub-stats span { display: grid; gap: 1px; color: var(--muted); font: 8px var(--mono); }
.lab-hub-stats span:first-child { border-right: 1px solid var(--line); }
.lab-hub-stats strong { color: var(--ink); font: 15px var(--sans); }
.lab-semantic-hub-empty { justify-content: center; }
.lab-semantic-hub-empty > span { font-size: 30px; }
.lab-value-hub {
  position: relative; width: 100%; min-width: 0; min-height: 270px;
  padding: 17px 13px 13px; display: flex; align-items: stretch; flex-direction: column;
  gap: 9px; border: 2px solid var(--ink); border-radius: 4px;
  background: var(--card); box-shadow: 7px 7px 0 var(--soft-strong);
}
.lab-value-hub[data-lab-selected-value],
[data-lab-selected-value].lab-value-hub { scroll-margin-top: 76px; }
.lab-value-display {
  min-width: 0; padding: 12px; display: grid; align-content: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--panel);
  overflow-wrap: anywhere;
}
.lab-value-display strong { min-width: 0; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.lab-value-display code,
.lab-value-display pre {
  min-width: 0; margin: 0; overflow: auto; color: var(--green);
  font: 9px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.lab-value-origin {
  min-width: 0; margin-top: auto; padding-top: 9px; display: flex;
  align-items: flex-start; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--line); color: var(--muted);
  font: 8px/1.45 var(--mono);
}
.lab-value-origin strong { color: var(--ink); font: 600 8px var(--mono); }
.lab-value-origin span,
.lab-value-origin code { min-width: 0; overflow-wrap: anywhere; }
.lab-graph-note {
  max-width: 680px; margin: 0 auto; padding: 9px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 9px; line-height: 1.5; text-align: center;
}
.lab-graph-note strong { color: var(--ink); }
.lab-inspector { overflow: hidden; }
.lab-inspector-content { padding: 11px 5px; }
.lab-inspector-content > .eyebrow { margin-bottom: 5px; }
.lab-inspector-content > h2 { margin: 0 0 5px; font-size: 24px; line-height: 1.05; }
.lab-inspector-content > p:not(.eyebrow):not(.lab-inspector-note) {
  margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5;
}
.lab-inspector-provider { font: 8px var(--mono) !important; text-transform: uppercase; }
.lab-inspector-back {
  margin: 0 0 14px; padding: 0; border: 0; color: var(--muted);
  background: transparent; font: 8px var(--mono); cursor: pointer;
}
.lab-inspector-back:hover { color: var(--ink); }
.lab-socket-layers { margin: 18px 0 0; border-top: 1px solid var(--line); }
.lab-socket-layers div {
  padding: 8px 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; border-bottom: 1px solid var(--line);
}
.lab-socket-layers dt { color: var(--muted); font: 8px var(--mono); text-transform: uppercase; }
.lab-socket-layers dd { margin: 0; overflow-wrap: anywhere; font: 9px var(--mono); }
.lab-inspector-section { margin-top: 19px; padding-top: 8px; border-top: 1px solid var(--line); }
.lab-layer-list { margin: 5px 0 0; padding: 0; list-style: none; }
.lab-layer-list li { padding: 8px 0; display: grid; grid-template-columns: 25px 1fr; gap: 7px; }
.lab-layer-list li > span { color: var(--muted); font: 8px var(--mono); }
.lab-layer-list strong { font-size: 11px; }
.lab-layer-list p { margin: 2px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.lab-compatibility {
  margin-top: 15px; padding: 9px; display: grid; grid-template-columns: 26px 1fr;
  align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--soft);
}
.lab-compatibility-mark {
  width: 25px; height: 25px; display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%; font-size: 10px;
}
.lab-compatibility div { display: grid; gap: 2px; }
.lab-compatibility strong { font-size: 10px; }
.lab-compatibility span { color: var(--muted); font-size: 9px; line-height: 1.4; }
.lab-transfer-contract { margin: 0; }
.lab-transfer-contract > div {
  padding: 6px 0; display: grid; grid-template-columns: minmax(80px, .75fr) minmax(0, 1.25fr);
  gap: 8px; border-bottom: 1px solid var(--line);
}
.lab-transfer-contract dt { color: var(--muted); font: 8px var(--mono); text-transform: uppercase; }
.lab-transfer-contract dd { margin: 0; overflow-wrap: anywhere; font: 9px/1.4 var(--mono); }
.lab-context-tags { margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 3px; }
.lab-context-tags span {
  padding: 4px 5px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--muted); background: var(--panel); font: 8px var(--mono);
}
.lab-chip-list { display: flex; flex-wrap: wrap; gap: 4px; }
.lab-semantic-chip {
  max-width: 100%; padding: 6px 7px; display: flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--line); border-radius: 3px; color: var(--ink);
  background: var(--panel); cursor: pointer;
}
.lab-semantic-chip:hover { border-color: var(--ink); }
.lab-semantic-chip strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.lab-semantic-chip code { color: var(--muted); font: 8px var(--mono); }
.lab-companion-list { margin: 0; padding: 0; list-style: none; }
.lab-companion-list li {
  padding: 6px 0; display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; border-bottom: 1px solid var(--line);
}
.lab-companion-list strong { font-size: 10px; }
.lab-companion-list span { color: var(--muted); font: 8px var(--mono); }
.lab-inspector-note {
  margin: 14px 0 0; padding: 9px; border-left: 2px solid var(--ink);
  color: var(--muted); background: var(--soft); font-size: 9px; line-height: 1.5;
}
.lab-inspector-actions { margin-top: 16px; display: grid; gap: 5px; }
.lab-inspector-actions .button { min-height: 38px; display: grid; place-items: center; font-size: 9px; }
.lab-value-inspector { min-width: 0; display: grid; gap: 12px; }
.lab-value-inspector .lab-value-display { margin-top: 3px; }
.lab-value-provenance {
  margin: 0;
  min-width: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--muted); background: var(--panel);
}
.lab-value-provenance > div {
  padding: 7px 8px; display: grid; grid-template-columns: minmax(74px, .7fr) minmax(0, 1.3fr);
  gap: 7px; border-bottom: 1px solid var(--line);
}
.lab-value-provenance > div:last-child { border-bottom: 0; }
.lab-value-provenance > div dt { font: 8px var(--mono); text-transform: uppercase; }
.lab-value-provenance > div dd {
  min-width: 0; margin: 0; color: var(--ink); font: 8px/1.45 var(--mono);
  overflow-wrap: anywhere;
}
.lab-value-provenance summary {
  min-height: 44px; padding: 8px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; color: var(--ink);
  font: 600 8px var(--mono); text-transform: uppercase; cursor: pointer;
}
.lab-value-provenance dl { margin: 0; padding: 0 8px 8px; }
.lab-value-provenance dl > div {
  padding: 6px 0; display: grid; grid-template-columns: minmax(74px, .7fr) minmax(0, 1.3fr);
  gap: 7px; border-top: 1px solid var(--line);
}
.lab-value-provenance dt { font: 8px var(--mono); text-transform: uppercase; }
.lab-value-provenance dd {
  min-width: 0; margin: 0; color: var(--ink); font: 8px/1.45 var(--mono);
  overflow-wrap: anywhere;
}
.lab-view [data-lab-select-value] {
  max-width: 100%; min-height: 44px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 3px; color: var(--ink);
  background: var(--card); text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
.lab-view [data-lab-select-value]:hover { border-color: var(--ink); background: var(--soft); }
.lab-view [data-lab-select-value][aria-pressed="true"],
.lab-view [data-lab-select-value].active {
  color: var(--paper); border-color: var(--ink); background: var(--ink);
}
.cross-reference-focus {
  scroll-margin-top: 76px; background: var(--soft);
}
.cross-reference-focus:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lab-draft-workbench {
  margin-top: 14px; scroll-margin-top: 74px; border: 1px solid var(--ink);
  border-radius: 3px; background: var(--card);
}
.lab-draft-heading {
  min-height: 88px; padding: 13px; display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto; align-items: start; gap: 8px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.lab-draft-heading h2 { margin: 3px 0 4px; font-size: clamp(22px, 3vw, 34px); }
.lab-draft-heading p:last-child {
  max-width: 780px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5;
}
.lab-draft-status {
  padding: 5px 7px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--muted); background: var(--card); font: 8px var(--mono); text-transform: uppercase;
}
.lab-draft-status[data-state="valid"],
.lab-draft-status[data-state="completed"] { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.lab-draft-status[data-state="invalid"],
.lab-draft-status[data-state="needs-confirmation"],
.lab-draft-status[data-state="needs-input"] { border-color: #9a6a14; color: #9a6a14; }
.lab-draft-topology {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(115px, .35fr) minmax(0, 1fr);
  align-items: stretch; border-bottom: 1px solid var(--line); background: var(--line); gap: 1px;
}
.lab-draft-topology article {
  min-width: 0; min-height: 105px; padding: 13px; display: grid; align-content: center;
  gap: 5px; background: var(--card);
}
.lab-draft-topology article > span, .lab-draft-transfer span {
  color: var(--muted); font: 8px var(--mono); text-transform: uppercase;
}
.lab-draft-topology article strong { overflow-wrap: anywhere; font-size: 17px; }
.lab-draft-topology article small { color: var(--muted); font: 8px/1.45 var(--mono); }
.lab-draft-transfer {
  min-width: 0; padding: 10px; display: grid; place-content: center; justify-items: center;
  gap: 3px; background: var(--soft); text-align: center;
}
.lab-draft-transfer strong { font-size: 25px; font-weight: 400; }
.lab-draft-transfer small { max-width: 150px; overflow-wrap: anywhere; color: var(--green); font: 7px/1.4 var(--mono); }
.lab-draft-form {
  padding: clamp(13px, 2vw, 24px); display: grid; grid-template-columns: minmax(260px, .7fr) minmax(360px, 1.3fr);
  align-items: start; gap: clamp(15px, 3vw, 38px);
}
.lab-draft-form > section { min-width: 0; }
.lab-draft-locked-list, .lab-draft-field-grid { display: grid; gap: 6px; }
.lab-draft-locked-field {
  min-width: 0; min-height: 52px; padding: 8px 9px; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, auto); align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--soft);
}
.lab-draft-locked-field > div { min-width: 0; display: grid; gap: 2px; }
.lab-draft-locked-field span { font-size: 10px; font-weight: 600; }
.lab-draft-locked-field small { overflow: hidden; color: var(--muted); font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.lab-draft-locked-field code {
  max-width: 250px; padding: 5px 6px; overflow: hidden; border: 1px solid var(--line);
  color: var(--green); background: var(--card); font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap;
}
.lab-draft-field { min-width: 0; display: grid; gap: 4px; }
.lab-draft-field > span { font: 600 9px var(--mono); text-transform: uppercase; }
.lab-draft-field input:not([type="hidden"]), .lab-draft-field select {
  width: 100%; min-height: 41px; padding: 8px 9px; border: 1px solid var(--line);
  border-radius: 3px; color: var(--ink); background: var(--card); font: 10px var(--mono);
}
.lab-draft-field .field-combobox > input { padding-right: 42px; }
.lab-draft-field .field-suggestion-toggle { width: 40px; }
.lab-draft-field .field-suggestion-menu { top: calc(100% + 4px); }
.lab-calendar-field { min-width: 0; }
.lab-draft-no-fields {
  margin: 0; padding: 19px; border: 1px dashed var(--line);
  color: var(--muted); font-size: 10px; text-align: center;
}
.lab-draft-confirmation {
  grid-column: 1 / -1; padding: 11px; display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: 9px; border: 1px solid #9a6a14; background: var(--soft); cursor: pointer;
}
.lab-draft-confirmation input { margin-top: 2px; accent-color: var(--ink); }
.lab-draft-confirmation span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.lab-draft-confirmation strong { display: block; margin-bottom: 2px; color: var(--ink); }
.lab-draft-diagnostics { grid-column: 1 / -1; }
.lab-draft-diagnostics .lab-error { margin-top: 0; }
.lab-draft-diagnostics ul { margin: 0; padding: 0; display: grid; gap: 3px; list-style: none; }
.lab-draft-diagnostics li {
  padding: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; gap: 8px; border: 1px solid var(--line); font-size: 9px;
}
.lab-draft-diagnostics li[data-severity="error"] { border-left: 3px solid #a74b40; }
.lab-draft-diagnostics li[data-severity="warning"] { border-left: 3px solid #9a6a14; }
.lab-draft-diagnostics li strong, .lab-draft-diagnostics li code { font: 8px var(--mono); }
.lab-draft-diagnostics li span { color: var(--muted); }
.lab-draft-actions {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(170px, .5fr) minmax(190px, .65fr);
  justify-content: end; gap: 6px; border-top: 1px solid var(--line); padding-top: 13px;
}
.lab-draft-actions .button { min-height: 41px; }
.lab-draft-actions .button:disabled { opacity: .5; cursor: not-allowed; }
.lab-draft-result { padding: clamp(13px, 2.5vw, 30px); border-top: 1px solid var(--line); }
.lab-draft-result > header {
  margin-bottom: 12px; display: flex; align-items: end; justify-content: space-between; gap: 10px;
}
.lab-draft-result > header h3 { margin: 3px 0 0; font-size: 25px; }
.lab-draft-result > header > span { color: var(--muted); font: 8px var(--mono); }
.lab-draft-result .lab-timeline { margin-bottom: 18px; }
.lab-execution-drawer {
  margin-top: 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--card);
}
.lab-execution-toggle {
  width: 100%; min-height: 55px; padding: 8px 12px; display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto 20px; align-items: center; gap: 8px;
  border: 0; color: var(--ink); background: var(--panel); text-align: left; cursor: pointer;
}
.lab-execution-toggle > span:nth-child(2) { display: grid; gap: 2px; }
.lab-execution-toggle strong { font-size: 12px; }
.lab-execution-toggle small { color: var(--muted); font: 8px var(--mono); }
.lab-execution-state {
  padding: 4px 6px; border: 1px solid var(--line); border-radius: 2px;
  color: var(--muted); font: 7px var(--mono); text-transform: uppercase;
}
.lab-execution-state[data-state="completed"] { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.lab-execution-tabs { display: flex; overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lab-execution-tabs button {
  min-width: 150px; min-height: 35px; padding: 0 10px; border: 0; border-right: 1px solid var(--line);
  color: var(--muted); background: var(--card); font: 8px var(--mono); white-space: nowrap; cursor: pointer;
}
.lab-execution-tabs button:hover, .lab-execution-tabs button.active {
  color: var(--paper); background: var(--ink);
}
.lab-execution-body { padding: clamp(14px, 2.5vw, 34px); }
.lab-flow-heading h2 { margin: 5px 0 8px; font-size: clamp(28px, 4vw, 48px); line-height: 1; }
.lab-flow-heading > p:last-child { max-width: 850px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.lab-pipeline { margin: 20px 0; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; }
.lab-pipeline-step {
  min-width: 190px; padding: 11px; display: grid; gap: 5px; border: 1px solid var(--line);
  border-radius: 3px; background: var(--panel);
}
.lab-pipeline-step > span { color: var(--muted); font: 8px var(--mono); }
.lab-pipeline-step strong { font-size: 12px; }
.lab-pipeline-step code, .lab-timeline-step code { color: var(--green); font: 8px var(--mono); }
.lab-pipeline-arrow { align-self: center; color: var(--muted); }
.lab-form {
  padding: 13px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 10px; border: 1px solid var(--line); background: var(--soft);
}
.lab-examples { margin-bottom: 10px; border: 1px solid var(--line); }
.lab-examples > div:first-child {
  padding: 8px 10px; display: flex; align-items: baseline; justify-content: space-between;
  gap: 15px; border-bottom: 1px solid var(--line);
}
.lab-examples > div:first-child strong { font: 600 9px var(--mono); text-transform: uppercase; }
.lab-examples > div:first-child span { color: var(--muted); font-size: 9px; }
.lab-example-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lab-example-options button {
  min-width: 0; padding: 10px; display: grid; gap: 4px; border: 0;
  border-right: 1px solid var(--line); color: var(--ink); background: var(--card);
  text-align: left; cursor: pointer;
}
.lab-example-options button:last-child { border-right: 0; }
.lab-example-options button:hover { background: var(--soft); }
.lab-example-options strong { font-size: 11px; }
.lab-example-options span { min-height: 28px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.lab-example-options code { overflow: hidden; color: var(--green); font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.lab-form label { display: grid; gap: 5px; }
.lab-form label > span { font: 600 9px var(--mono); text-transform: uppercase; }
.lab-form input {
  width: 100%; min-height: 43px; padding: 8px 9px; border: 1px solid var(--line);
  border-radius: 3px; color: var(--ink); background: var(--card);
}
.lab-form .field-combobox > input { padding-right: 42px; }
.lab-form .field-suggestion-toggle { width: 40px; }
.lab-form .field-suggestion-menu { top: calc(100% + 4px); }
.lab-form small { color: var(--muted); font: 8px var(--mono); }
.lab-form .button { min-height: 43px; }
.lab-form .button:disabled { opacity: .55; cursor: wait; }
.lab-error {
  margin-top: 14px; padding: 12px; display: grid; gap: 3px; border: 1px solid #a74b40;
  border-left-width: 4px; color: var(--ink); background: var(--panel);
}
.lab-error strong { font: 600 9px var(--mono); text-transform: uppercase; }
.lab-error span { font-size: 11px; }
.lab-result-section { margin-top: 28px; padding-top: 23px; border-top: 1px solid var(--line); }
.lab-result-section > header h2 { margin-top: 4px; font-size: 27px; }
.lab-candidates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.lab-candidates button {
  min-width: 0; padding: 12px; display: grid; gap: 5px; border: 1px solid var(--line);
  border-radius: 3px; color: var(--ink); background: var(--card); text-align: left; cursor: pointer;
}
.lab-candidates button:hover { border-color: var(--ink); background: var(--soft); }
.lab-candidates span { color: var(--muted); font-size: 10px; }
.lab-candidates code { max-height: 105px; overflow: hidden; color: var(--muted); font: 8px/1.45 var(--mono); white-space: pre-wrap; }
.lab-timeline { border-top: 1px solid var(--line); }
.lab-timeline-step {
  padding: 12px 0; display: grid; grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px; border-bottom: 1px solid var(--line);
}
.lab-timeline-marker {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; font: 8px var(--mono);
}
.lab-timeline-step[data-status="completed"] .lab-timeline-marker { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.lab-timeline-step header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lab-timeline-step header span { color: var(--muted); font: 8px var(--mono); text-transform: uppercase; }
.lab-timeline-step details { margin-top: 9px; }
.lab-timeline-step summary { color: var(--muted); font: 9px var(--mono); cursor: pointer; }
.lab-timeline-step pre { max-height: 420px; padding: 11px; overflow: auto; color: var(--ink); font: 9px/1.55 var(--mono); }
.lab-continuation { margin-top: 15px; border: 1px solid var(--line); }
.lab-continuation > header {
  padding: 10px; display: flex; align-items: end; justify-content: space-between;
  gap: 12px; border-bottom: 1px solid var(--line);
}
.lab-continuation h3 { margin: 3px 0 0; font-size: 18px; }
.lab-continuation > header > span { color: var(--muted); font: 8px var(--mono); }
.lab-continuation-types { padding: 7px; display: flex; gap: 5px; overflow-x: auto; background: var(--soft); }
.lab-continuation-types button {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink); background: var(--card); font: 8px var(--mono); white-space: nowrap; cursor: pointer;
}
.lab-continuation-types button:hover { border-color: var(--ink); }
.lab-continuation > p { margin: 0; padding: 9px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.flow-output-explorer { border: 1px solid var(--line); background: var(--card); }
.flow-output-sockets { padding: 8px; display: flex; align-items: stretch; gap: 5px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--soft); }
.flow-output-sockets-label { padding: 7px 8px; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; white-space: nowrap; }
.flow-output-sockets > div { min-width: max-content; padding: 6px 8px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); }
.flow-output-sockets strong { font-size: 11px; }
.flow-output-sockets code { color: var(--green); font: 9px var(--mono); }
.flow-output-toolbar { min-height: 50px; padding: 7px 8px 7px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.flow-output-toolbar > div:first-child { display: grid; gap: 2px; }
.flow-output-toolbar > div:first-child strong { font: 600 11px var(--mono); text-transform: uppercase; }
.flow-output-toolbar > div:first-child span { color: var(--muted); font-size: 10px; }
.flow-output-views { display: flex; }
.flow-output-views button { padding: 7px 10px; border: 1px solid var(--line); border-right: 0; color: var(--muted); background: var(--card); font: 10px var(--mono); cursor: pointer; }
.flow-output-views button:first-child { border-radius: 3px 0 0 3px; }
.flow-output-views button:last-child { border-right: 1px solid var(--line); border-radius: 0 3px 3px 0; }
.flow-output-views button:hover, .flow-output-views button.active { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.flow-output-panel { min-width: 0; min-height: 240px; }
.flow-output-visual-heading { padding: 10px 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.flow-output-visual-heading strong { font-size: 14px; }
.flow-output-visual-heading span { color: var(--muted); font: 9px var(--mono); }
.flow-output-map .visualization-panel { margin: 0; border: 0; border-radius: 0; }
.flow-output-map .map-canvas { height: min(430px, 52vh); min-height: 300px; }
.flow-output-plot { margin: 0; padding: 12px; }
.flow-output-plot svg { width: 100%; max-height: 360px; display: block; overflow: visible; }
.flow-output-plot circle { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.flow-plot-axis { fill: none; stroke: var(--line); stroke-width: 1; }
.flow-plot-line { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.flow-output-plot figcaption { margin-top: 5px; color: var(--muted); font: 9px var(--mono); text-align: center; }
.flow-output-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.flow-output-metrics article { min-width: 0; min-height: 100px; padding: 12px; display: grid; align-content: space-between; gap: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.flow-output-metrics span, .flow-output-metrics small { color: var(--muted); font: 9px var(--mono); }
.flow-output-metrics strong { overflow: hidden; font-size: 17px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.flow-output-metrics p { padding: 24px; color: var(--muted); }
.flow-output-table-wrap { max-height: 520px; overflow: auto; }
.flow-output-table { width: 100%; border-collapse: collapse; font-size: 11px; text-align: left; }
.flow-output-table caption { padding: 9px 10px; color: var(--muted); font: 9px var(--mono); text-align: left; }
.flow-output-table th { position: sticky; top: 0; z-index: 1; color: var(--ink); background: var(--soft); font: 600 9px var(--mono); text-transform: uppercase; }
.flow-output-table th, .flow-output-table td { max-width: 300px; padding: 8px 10px; overflow: hidden; border-top: 1px solid var(--line); text-overflow: ellipsis; vertical-align: top; white-space: nowrap; }
.flow-output-table code { color: var(--green); font: 9px var(--mono); }
.flow-output-tree { max-height: 520px; padding: 10px; overflow: auto; font: 10px/1.5 var(--mono); }
.flow-tree-node { margin-left: 10px; }
.flow-tree-node summary { padding: 3px; cursor: pointer; }
.flow-tree-node summary span { margin-left: 7px; color: var(--muted); }
.flow-tree-entry { min-width: max-content; padding-left: 16px; display: grid; grid-template-columns: minmax(80px, 190px) minmax(100px, 1fr); gap: 8px; border-left: 1px solid var(--line); }
.flow-tree-entry > code { padding: 3px; color: var(--green); }
.flow-tree-value { padding: 3px; color: var(--ink); }
.flow-tree-value[data-type="string"] { color: var(--muted); }
.flow-output-raw, .flow-output-provenance pre { max-height: 520px; padding: 12px; overflow: auto; color: var(--ink); font: 10px/1.55 var(--mono); }
.flow-output-provenance { border-top: 1px solid var(--line); }
.flow-output-provenance summary { padding: 9px 11px; color: var(--muted); font: 9px var(--mono); cursor: pointer; text-transform: uppercase; }
.flow-output-provenance pre { border-top: 1px solid var(--line); background: var(--panel); }
.lab-empty { padding: 50px 20px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }

@media (max-width: 1180px) {
  .lab-commandbar { grid-template-columns: 1fr; gap: 20px; }
  .lab-command-stats { max-width: 760px; }
  .lab-workspace { grid-template-columns: minmax(230px, 270px) minmax(0, 1fr); }
  .lab-inspector { grid-column: 1 / -1; }
  .lab-inspector-content { max-width: 860px; }
  .lab-socket-layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-socket-layers div:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--line); }
  .lab-inspector-actions { max-width: 420px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-filter-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-draft-form { grid-template-columns: 1fr; }
  .lab-draft-confirmation, .lab-draft-diagnostics, .lab-draft-actions { grid-column: 1; }
}

@media (max-width: 900px) {
  .endpoint-back { display: block; }
  .catalog-workspace.detail-open .endpoint-view-bar { padding: 7px; gap: 5px; }
  .endpoint-tab { min-width: 84px; flex-basis: 140px; }
  .auth-view { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #lab-content { padding-inline: 8px; }
  .lab-commandbar { padding-inline: 7px; }
  .lab-workspace { grid-template-columns: 1fr; }
  .lab-object-library, .lab-inspector { padding-inline: 14px; }
  .lab-object-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-recent-section .lab-object-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-guided-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
  .lab-guided-paths .lab-section-label { grid-column: 1 / -1; }
  .lab-graph-stage { padding-inline: 14px; }
  .lab-filterbar { grid-template-columns: 1fr; }
  .lab-filter-status { text-align: left; }
  .lab-semantic-network { min-height: 0; grid-template-columns: 1fr; align-items: stretch; }
  .lab-hub-column,
  .lab-action-rail-producer,
  .lab-action-rail-consumer { grid-column: 1; grid-row: auto; }
  .lab-semantic-hub, .lab-value-hub { width: min(330px, 100%); min-height: 240px; }
  .lab-connection-label { writing-mode: horizontal-tb; }
  .lab-action-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-action-rail-producer .lab-action-card::after,
  .lab-action-rail-consumer .lab-action-card::before { display: none; }
  .lab-action-rail.filtered { display: none; }
  .lab-inspector { grid-column: auto; }
  .lab-socket-layers { grid-template-columns: 1fr; }
  .lab-socket-layers div:nth-child(odd) { padding-right: 0; border-right: 0; }
  .lab-draft-workbench { margin-inline: 0; }
  .lab-execution-body { padding-inline: 14px; }
}
@media (max-width: 620px) {
  .profile-toggle { width: 34px; min-width: 34px; padding: 0; }
  .profile-toggle-label { display: none; }
  .lab-toggle { padding: 0 7px; }
  .endpoint-metadata { grid-template-columns: 1fr; }
  .endpoint-metadata > h3,
  .endpoint-metadata > p { grid-column: 1; }
  .cross-reference-heading { align-items: flex-start; flex-direction: column; }
  .cross-reference-value { grid-template-columns: 1fr; }
  .cross-reference-actions { justify-content: flex-start; }
  .view-tabs { width: 100%; max-width: 100%; }
  .view-tab { min-width: 0; padding-inline: 3px; }
  .setting-row { align-items: stretch; flex-direction: column; }
  .auth-form { grid-template-columns: 1fr; }
  .auth-actions, .auth-actions .button { width: 100%; }
  .account-user { align-items: stretch; flex-direction: column; }
  .auth-shell { padding: 92px 20px 32px; justify-content: flex-start; }
  .auth-brand { left: 20px; }
  .auth-secondary-actions { align-items: flex-start; flex-direction: column; }
  .about-breakdown { grid-template-columns: 1fr; }
  .about-breakdown > div:nth-child(odd) { border-right: 0; }
  .about-measure-groups, .about-distributions, .about-methods, .about-technical-grid { grid-template-columns: 1fr; }
  .about-principles { grid-template-columns: 1fr; }
  .about-workflow li { grid-template-columns: 30px minmax(0, 1fr); }
  .about-workflow span { grid-column: 2; }
  .lab-commandbar { min-height: 0; padding-block: 20px; }
  .lab-commandbar h1 { font-size: 42px; }
  .lab-command-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-object-options, .lab-recent-section .lab-object-options { grid-template-columns: 1fr; }
  .lab-guided-paths { grid-template-columns: 1fr; }
  .lab-guided-paths .lab-section-label { grid-column: auto; }
  .lab-graph-toolbar { align-items: stretch; flex-direction: column; }
  .lab-graph-filter { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .lab-graph-filter button { border-right: 0; }
  .lab-graph-filter button:last-child { border-right: 1px solid var(--line); }
  .lab-filterbar { width: 100%; grid-template-columns: 1fr; padding: 6px; }
  .lab-filterbar-main { align-items: stretch; flex-direction: column; }
  .lab-filterbar-main > [data-lab-clear-filters] { width: 100%; margin-left: 0; }
  .lab-filter-toggle { width: 100%; min-width: 0; }
  .lab-active-filters { width: 100%; }
  .lab-active-filter { width: 100%; justify-content: space-between; }
  .lab-filter-status { grid-column: auto; width: 100%; text-align: left; }
  .lab-filter-panel {
    grid-column: auto; width: 100%; max-width: 100%; max-height: none; padding: 7px;
    overflow: visible;
  }
  .lab-filter-groups { width: 100%; grid-template-columns: 1fr; }
  .lab-filter-group,
  .lab-filter-group fieldset,
  fieldset.lab-filter-group { width: 100%; max-width: 100%; }
  .lab-filter-group label,
  fieldset.lab-filter-group > label { width: 100%; }
  .lab-filter-output-search { width: 100%; max-width: 100%; }
  .lab-path { margin-top: 8px; }
  .lab-path-transition { flex: 0 0 auto; }
  .lab-semantic-network { padding-top: 20px; gap: 22px; }
  .lab-action-list { grid-template-columns: 1fr; }
  .lab-graph-note { text-align: left; }
  .lab-value-hub { box-shadow: 4px 4px 0 var(--soft-strong); }
  .lab-value-display { width: 100%; }
  .lab-value-origin { align-items: stretch; flex-direction: column; }
  .lab-readiness { min-height: 44px; align-items: flex-start; flex-direction: column; }
  .lab-value-provenance dl > div,
  .lab-value-provenance > div { grid-template-columns: 1fr; }
  .lab-view [data-lab-select-value] { width: 100%; }
  .lab-inspector-actions { grid-template-columns: 1fr; }
  .lab-draft-heading { grid-template-columns: 20px minmax(0, 1fr); }
  .lab-draft-heading .lab-draft-status { grid-column: 2; justify-self: start; }
  .lab-draft-topology { grid-template-columns: 1fr; }
  .lab-draft-topology article { min-height: 88px; }
  .lab-draft-transfer { min-height: 72px; }
  .lab-draft-transfer strong { transform: rotate(90deg); }
  .lab-draft-locked-field { grid-template-columns: 1fr; }
  .lab-draft-locked-field code { max-width: 100%; }
  .lab-draft-actions { grid-template-columns: 1fr; }
  .lab-draft-actions .button { width: 100%; }
  .lab-draft-diagnostics li { grid-template-columns: 1fr; }
  .lab-draft-result > header { align-items: flex-start; flex-direction: column; }
  .lab-execution-toggle { grid-template-columns: 20px minmax(0, 1fr) auto 14px; padding-inline: 8px; }
  .lab-execution-state { display: none; }
  .lab-execution-tabs button { min-width: 135px; }
  .lab-form { grid-template-columns: 1fr; }
  .lab-form .button { width: 100%; }
  .lab-candidates { grid-template-columns: 1fr; }
  .flow-output-toolbar { align-items: stretch; flex-direction: column; }
  .flow-output-views { display: grid; grid-template-columns: repeat(4, 1fr); }
  .flow-output-views button { border-right: 0; }
  .flow-output-views button:last-child { border-right: 1px solid var(--line); }
  .lab-example-options { grid-template-columns: 1fr; }
  .lab-example-options button { border-right: 0; border-bottom: 1px solid var(--line); }
  .lab-example-options button:last-child { border-bottom: 0; }
  .lab-examples > div:first-child { align-items: flex-start; flex-direction: column; }
  .lab-continuation > header { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-action-skeleton { animation: none; }
}

/* Session retained-result workspace */
.retained-toggle {
  min-height: 30px; padding: 0 8px; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--card);
  font: 600 9px var(--mono); cursor: pointer;
}
.retained-toggle:hover, .retained-toggle[aria-expanded="true"] { border-color: var(--green); color: var(--green); }
.retained-toggle strong { min-width: 18px; padding: 2px 4px; border-radius: 10px; color: var(--paper); background: var(--green); text-align: center; }
.retained-backdrop { position: fixed; inset: 54px 0 0; z-index: 70; background: color-mix(in srgb, var(--ink) 28%, transparent); backdrop-filter: blur(2px); }
.retained-drawer {
  position: fixed; top: 54px; right: 0; bottom: 0; z-index: 71; width: min(430px, 100vw);
  display: grid; grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; overflow: hidden;
  border-left: 1px solid var(--line); background: var(--card); box-shadow: -18px 0 50px var(--shadow);
  animation: retained-enter .24s ease-out both;
}
.retained-drawer[hidden], .retained-backdrop[hidden] { display: none; }
@keyframes retained-enter { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
.retained-drawer > header { min-height: 82px; padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.retained-drawer > header span { color: var(--green); font: 8px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.retained-drawer > header h2 { margin: 4px 0 0; font-size: 23px; letter-spacing: -.04em; }
.retained-intro { margin: 0; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font: 9px/1.5 var(--mono); }
.cloud-workspace-shell { padding: 11px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--green) 7%, var(--card)); }
.cloud-workspace-shell[hidden] { display: none; }
.cloud-workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cloud-workspace-heading div { display: grid; gap: 2px; }
.cloud-workspace-heading span, .cloud-collection-heading span { color: var(--green); font: 7px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.cloud-workspace-heading strong { font: 600 11px var(--sans); }
.cloud-workspace-heading output { padding: 3px 6px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.cloud-workspace-heading output[data-state="synced"] { border-color: var(--green); color: var(--green); }
.cloud-workspace-heading output[data-state="failed"], .cloud-workspace-heading output[data-state="conflicted"] { border-color: #b3412f; color: #b3412f; }
.cloud-workspace-shell > p { margin: 7px 0 0; color: var(--muted); font: 8px/1.45 var(--mono); }
.cloud-workspace-shell > p.error { color: #b3412f; }
.cloud-workspace-controls { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cloud-workspace-controls[hidden] { display: none; }
.cloud-workspace-controls label { display: grid; gap: 3px; color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.cloud-workspace-controls input, .cloud-workspace-controls select { min-width: 0; height: 30px; padding: 0 7px; border: 1px solid var(--line); color: var(--ink); background: var(--card); font: 8px var(--mono); }
.cloud-workspace-controls button { min-height: 30px; padding: 0 8px; border: 1px solid var(--line); color: var(--ink); background: var(--card); font: 7px var(--mono); cursor: pointer; }
.cloud-workspace-controls button:hover:not(:disabled) { color: var(--paper); background: var(--ink); }
.cloud-workspace-controls button:disabled { color: var(--muted); cursor: not-allowed; }
.cloud-workspace-actions { grid-column: 1 / -1; display: flex; gap: 6px; }
.cloud-workspace-controls form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.cloud-collection-heading { grid-column: 1 / -1; margin-top: 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cloud-collection-heading small { color: var(--muted); font: 7px var(--mono); }
.cloud-collection-list { grid-column: 1 / -1; display: grid; gap: 4px; }
.cloud-collection-row { display: grid; grid-template-columns: 1fr auto auto; gap: 4px; }
.retained-collection-tools { padding: 10px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border-bottom: 1px solid var(--line); background: var(--soft); }
.retained-collection-tools label { display: grid; gap: 3px; color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.retained-collection-tools input, .retained-collection-tools select, .retained-card-actions select, .retained-card-actions textarea { min-width: 0; border: 1px solid var(--line); color: var(--ink); background: var(--card); font: 9px var(--mono); }
.retained-collection-tools input, .retained-collection-tools select { height: 31px; padding: 0 7px; }
.retained-collection-tools button { min-height: 31px; border: 1px solid var(--line); color: var(--ink); background: var(--card); font: 8px var(--mono); cursor: pointer; }
.retained-collection-tools button:hover:not(:disabled) { color: var(--paper); background: var(--ink); }
.retained-collection-tools button:disabled { color: var(--muted); cursor: not-allowed; }
.retained-import { position: relative; grid-column: 1 / -1; min-height: 34px; display: flex !important; align-items: center; justify-content: center; border: 1px dashed var(--line); cursor: pointer; }
.retained-import input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.retained-import strong { color: var(--ink); font: 8px var(--mono); }
.retained-import:hover { border-color: var(--green); }
.retained-compare-controls { grid-column: 1 / -1; margin: 0; padding: 7px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; border: 1px solid var(--line); }
.retained-compare-controls legend { padding: 0 4px; color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.retained-compare-controls select { min-width: 0; height: 31px; border: 1px solid var(--line); color: var(--ink); background: var(--card); font: 8px var(--mono); }
.retained-comparison { max-height: 42vh; overflow: auto; border-bottom: 1px solid var(--line); background: var(--panel); }
.retained-comparison[hidden] { display: none; }
.retained-comparison > header { padding: 10px 16px; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.retained-comparison > header span { color: var(--green); font: 7px var(--mono); text-transform: uppercase; }
.retained-comparison h3 { margin: 3px 0 0; font-size: 14px; }
.retained-comparison > header button { border: 0; color: var(--muted); background: transparent; font: 8px var(--mono); cursor: pointer; }
.retained-comparison-summary { display: grid; grid-template-columns: repeat(4, 1fr); }
.retained-comparison-summary > div { padding: 9px; display: grid; gap: 3px; border-right: 1px solid var(--line); }
.retained-comparison-summary span { color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.retained-comparison-summary strong { font: 17px var(--mono); }
.retained-comparison-summary [data-status="added"] strong { color: var(--green); }
.retained-comparison-summary [data-status="removed"] strong { color: #b3412f; }
.retained-comparison-summary [data-status="changed"] strong { color: #9a6a14; }
.retained-comparison-changes article { padding: 9px 16px; display: grid; grid-template-columns: auto 1fr; gap: 3px 9px; border-top: 1px solid var(--line); }
.retained-comparison-changes article > span { color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.retained-comparison-changes article > small { grid-column: 2; color: var(--muted); font: 7px var(--mono); }
.retained-comparison-changes > p, .retained-comparison > p, .retained-comparison > footer { margin: 0; padding: 12px 16px; color: var(--muted); font: 8px var(--mono); }
.retained-empty { margin: 18px; padding: 30px 18px; display: grid; gap: 7px; align-self: start; border: 1px dashed var(--line); text-align: center; }
.retained-empty strong { font-size: 13px; }
.retained-empty span { color: var(--muted); font: 9px var(--mono); }
.retained-list { min-height: 0; overflow-y: auto; }
.retained-card { border-bottom: 1px solid var(--line); background: var(--card); }
.retained-select { padding: 7px 16px 0; display: flex; gap: 6px; color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.retained-bulk-tools { min-height: 38px; padding: 6px 16px; display: flex; align-items: center; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--card); }
.retained-bulk-tools span { margin-right: auto; min-width: max-content; color: var(--muted); font: 7px var(--mono); }
.retained-bulk-tools select, .retained-bulk-tools button { min-height: 28px; border: 1px solid var(--line); color: var(--ink); background: var(--panel); font: 7px var(--mono); }
.retained-record-picker { border-top: 1px solid var(--line); }
.retained-record-picker summary { padding: 9px 16px; color: var(--muted); font: 8px var(--mono); cursor: pointer; }
.retained-record-picker > div { max-height: 180px; overflow-y: auto; }
.retained-record-picker button { width: 100%; padding: 8px 16px; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: var(--panel); text-align: left; font: 8px var(--mono); cursor: pointer; }
.retained-open { width: 100%; padding: 15px 16px 12px; display: grid; gap: 5px; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.retained-open:hover { background: var(--panel); }
.retained-open > span { width: max-content; padding: 3px 5px; color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line)); font: 7px var(--mono); text-transform: uppercase; }
.retained-open strong { font-size: 13px; line-height: 1.35; }
.retained-open small, .retained-open em { color: var(--muted); font: 8px var(--mono); font-style: normal; }
.retained-card-actions { padding: 0 16px 13px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; }
.retained-card-actions label { display: grid; gap: 3px; color: var(--muted); font: 7px var(--mono); text-transform: uppercase; }
.retained-card-actions input { min-width: 0; height: 29px; padding: 0 7px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); background: var(--panel); font: 9px var(--mono); }
.retained-card-actions select { height: 29px; padding: 0 7px; }
.retained-card-actions .retained-note { grid-column: 1 / -1; }
.retained-card-actions textarea { min-height: 58px; padding: 7px; resize: vertical; }
.retained-card-actions button { height: 29px; padding: 0 7px; border: 1px solid var(--line); color: var(--muted); background: transparent; font: 8px var(--mono); cursor: pointer; }
.retained-card-actions button:hover { color: #b3412f; border-color: #b3412f; }
.retained-drawer > footer { min-height: 58px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.retain-result.retained { color: var(--paper); border-color: var(--green); background: var(--green); }

@media (max-width: 620px) {
  .retained-toggle { width: 34px; min-width: 34px; justify-content: center; padding: 0; }
  .retained-toggle span { display: none; }
  .retained-drawer { width: 100vw; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .retained-drawer { animation: none; }
}