/* GENERATED: edit Assets/brand-tokens.json, Assets/hybird-motion.mjs or Support/hybird-components.css.
   Rebuild: node Support/build-design-css.mjs
   Verify: node Support/build-design-css.mjs --check */

@font-face {
  font-family: "Satoshi";
  src: url("Fonts/Satoshi-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("Fonts/Satoshi-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("Fonts/ClashDisplay-Regular-HyBird.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --hb-font: Satoshi, Arial, sans-serif;
  --hb-font-editorial: 'Clash Display', Satoshi, Arial, sans-serif;
  --hb-canvas: #f8faf9;
  --hb-surface: #ffffff;
  --hb-ink: #173e34;
  --hb-secondary: #4d6b60;
  --hb-film-secondary: #648277;
  --hb-mint: #69cbb0;
  --hb-action: #195f4c;
  --hb-action-text: #174e3b;
  --hb-logo-mint: #60bd9d;
  --hb-border: #d5e4dc;
  --hb-control-border: #75998a;
  --hb-focus: #195f4c;
  --hb-warning: #806022;
  --hb-warning-bg: #fff3d8;
  --hb-error: #a12e3a;
  --hb-error-bg: #fff0f1;
  --hb-success: #216146;
  --hb-success-bg: #e0f2e9;
  --hb-human: #b7924d;
  --hb-robot: #9783bd;
  --hb-drone: #50a0c8;
  --hb-glass: linear-gradient(145deg, rgba(255,255,255,.94), rgba(232,248,240,.69));
  --hb-glass-border: rgba(255,255,255,.93);
  --hb-glass-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #8cb6a535, 0 3px 8px #194b3a0a, 0 25px 60px #174c3b26;
  --hb-glass-filter: blur(28px) saturate(1.3);
  --hb-glass-solid: #f0f8f3;
  --hb-button-fill: linear-gradient(160deg, #e4faee 0%, #b9edd6 44%, #94d9bd 100%);
  --hb-button-shadow: inset 0 2px 1px #ffffffd9, inset 0 -1px 1px #529f7d60, 0 5px 13px #22624618;
  --hb-radius-control: 18px;
  --hb-radius-card: 23px;
  --hb-radius-panel: 32px;
  --hb-radius-hero: 44px;
  --hb-radius-pill: 999px;
  --hb-space-1: 4px;
  --hb-space-2: 8px;
  --hb-space-3: 12px;
  --hb-space-4: 16px;
  --hb-space-5: 24px;
  --hb-space-6: 32px;
  --hb-space-7: 48px;
  --hb-space-8: 64px;
  --hb-space-9: 96px;
  --hb-text-caption: 0.8125rem;
  --hb-text-body: 1rem;
  --hb-text-lead: clamp(1.125rem, 2vw, 1.5rem);
  --hb-text-title: clamp(2rem, 4.5vw, 3.625rem);
  --hb-text-display: clamp(2.5rem, 6vw, 5rem);
  --hb-leading-body: 1.5;
  --hb-leading-title: 1.08;
  --hb-tracking-title: -.035em;
  --hb-content-width: 1280px;
  --hb-page-gutter: clamp(24px, 4vw, 64px);
  --hb-reading-width: 64ch;
}

/* Derived from product.feedback in the single motion authority. */
:root {
  --hb-motion-feedback-duration: 180ms;
  --hb-motion-feedback-ease: linear(0, 0.0757214, 0.1467848, 0.2134084, 0.2758036, 0.3341749, 0.3887201, 0.4396306, 0.4870911, 0.5312799, 0.5723692, 0.6105251, 0.6459074, 0.6786702, 0.7089617, 0.7369244, 0.7626953, 0.7864058, 0.808182, 0.8281448, 0.8464098, 0.8630877, 0.8782843, 0.8921005, 0.9046326, 0.9159722, 0.9262065, 0.9354184, 0.9436865, 0.9510852, 0.957685, 0.9635523, 0.96875, 0.973337, 0.9773689, 0.9808975, 0.9839716, 0.9866365, 0.9889346, 0.9909051, 0.9925842, 0.9940057, 0.9952003, 0.9961964, 0.9970198, 0.997694, 0.9982402, 0.9986777, 0.9990234, 0.9992928, 0.9994991, 0.9996542, 0.9997683, 0.99985, 0.9999069, 0.999945, 0.9999695, 0.9999843, 0.9999928, 0.9999971, 0.999999, 0.9999998, 1, 1, 1);
}

/* Derived dark adaptation; not a claim of film validation. */
[data-hb-theme="dark"],
.hb-dark {
  --hb-canvas: #081723;
  --hb-surface: #132a32;
  --hb-ink: #f3f7f6;
  --hb-secondary: #b0c4bf;
  --hb-border: #36514e;
  --hb-control-border: #829b95;
  --hb-focus: #9addcb;
  --hb-action: #9addcb;
  --hb-warning: #f0d695;
  --hb-warning-bg: #3d3421;
  --hb-error: #ffb5bd;
  --hb-error-bg: #42262d;
  --hb-success: #a2dec3;
  --hb-success-bg: #193c31;
  --hb-glass: linear-gradient(145deg, rgba(28,58,58,.94), rgba(11,31,37,.88));
  --hb-glass-border: rgba(167,226,206,.24);
  --hb-glass-shadow: inset 0 1px 1px #b7f4d81c, inset 0 -1px 1px #020c1055, 0 3px 8px #00000018, 0 25px 60px #00000040;
  --hb-glass-solid: #173333;
  --hb-button-shadow: inset 0 1px 1px #ffffff66, inset 0 -1px 1px #1f654a40, 0 5px 16px #00000024;
}

/* Scoped presentation primitives, not product behaviour.
   Dimensions are CSS pixels, not final 4K render pixels.
   Satoshi is the default; Clash is opt-in through .hb-editorial-title.
   Colours, fonts and design scales come only from brand-tokens.json. */

.hb-root {
  box-sizing: border-box;
  color: var(--hb-ink);
  background-color: var(--hb-canvas);
  font: 400 var(--hb-text-body)/var(--hb-leading-body) var(--hb-font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
.hb-root *, .hb-root *::before, .hb-root *::after { box-sizing: inherit; }
.hb-root :where(h1, h2, h3, p) { margin-block-start: 0; }
.hb-root :where(h1, h2, h3) {
  font-family: var(--hb-font); font-weight: 500; color: inherit; text-wrap: balance;
}
.hb-root :where(strong, b) { font-weight: 500; }
.hb-root :where(a:not([class])) { color: var(--hb-action); text-underline-offset: .18em; }
.hb-root :focus-visible,
.hb-button:focus-visible, .hb-input:focus-visible, .hb-table-wrap:focus-visible {
  outline: 3px solid var(--hb-focus); outline-offset: 4px;
}
.hb-shell { width: 100%; max-width: var(--hb-content-width); margin-inline: auto; padding: var(--hb-page-gutter); }
.hb-stack { display: flex; flex-direction: column; gap: var(--hb-gap, var(--hb-space-4)); }
.hb-stack > *, .hb-row > *, .hb-grid > * { min-width: 0; }
.hb-row { display: flex; align-items: center; gap: var(--hb-gap, var(--hb-space-4)); flex-wrap: wrap; }
.hb-grid { display: grid; grid-template-columns: repeat(var(--hb-columns, 2), minmax(0, 1fr)); gap: var(--hb-gap, var(--hb-space-5)); }
.hb-title, .hb-display {
  margin: 0; font-family: var(--hb-font); font-weight: 500;
  letter-spacing: var(--hb-tracking-title); line-height: var(--hb-leading-title);
  color: var(--hb-ink); text-wrap: balance;
}
.hb-title { font-size: var(--hb-text-title); }
.hb-display { font-size: var(--hb-text-display); }
.hb-editorial-title, .hb-root .hb-editorial-title {
  font-family: var(--hb-font-editorial); font-weight: 400; letter-spacing: -.015em; line-height: var(--hb-leading-title);
}
.hb-label { font: 500 var(--hb-text-caption)/1.35 var(--hb-font); letter-spacing: .01em; }
.hb-muted { color: var(--hb-secondary); }
.hb-logo { display: block; width: 200px; max-width: 100%; height: auto; object-fit: contain; }
/* Preserve original colours/aspect ratio. Use the actual reversed artwork on dark surfaces. */
.hb-surface, .hb-card, .hb-glass { color: var(--hb-ink); border: 1px solid var(--hb-border); padding: var(--hb-space-5); }
.hb-surface { background: var(--hb-surface); border-radius: var(--hb-radius-panel); }
.hb-card { background: var(--hb-surface); border-radius: var(--hb-radius-card); }
.hb-glass { background: var(--hb-glass-solid); border-color: var(--hb-glass-border); border-radius: var(--hb-radius-panel); box-shadow: var(--hb-glass-shadow); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hb-glass { background: var(--hb-glass); -webkit-backdrop-filter: var(--hb-glass-filter); backdrop-filter: var(--hb-glass-filter); }
}
.hb-glass--solid { background: var(--hb-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hb-button {
  display: inline-flex; justify-content: center; align-items: center; gap: var(--hb-space-2);
  min-height: 48px; padding: var(--hb-space-3) var(--hb-space-5);
  border: 1px solid var(--hb-control-border); border-radius: var(--hb-radius-control);
  color: var(--hb-action-text); background: var(--hb-button-fill); box-shadow: var(--hb-button-shadow);
  font: 500 var(--hb-text-body)/1.3 var(--hb-font); font-synthesis: none;
  text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition-property: transform, box-shadow, border-color;
  transition-duration: var(--hb-motion-feedback-duration);
  transition-timing-function: var(--hb-motion-feedback-ease);
}
.hb-button--secondary { background: var(--hb-surface); color: var(--hb-ink); box-shadow: none; }
.hb-button:where(:hover:not(:disabled):not([aria-disabled="true"])) { border-color: var(--hb-action); }
.hb-button:where(:active:not(:disabled):not([aria-disabled="true"])) { transform: scale(.98); }
.hb-button:disabled, .hb-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* aria-disabled communicates state only; the host must prevent activation. */
.hb-input { width: 100%; min-height: 48px; padding: var(--hb-space-3) var(--hb-space-4); border: 1px solid var(--hb-control-border); border-radius: var(--hb-radius-control); background: var(--hb-surface); color: var(--hb-ink); font: 400 var(--hb-text-body)/var(--hb-leading-body) var(--hb-font); }
.hb-input::placeholder { color: var(--hb-secondary); opacity: 1; }
.hb-input[aria-invalid="true"] { border-color: var(--hb-error); }
.hb-input:disabled { opacity: .55; cursor: not-allowed; }
.hb-pill { display: inline-flex; align-items: center; gap: var(--hb-space-2); max-width: 100%; padding: var(--hb-space-1) var(--hb-space-3); border-radius: var(--hb-radius-pill); border: 1px solid var(--hb-border); background: var(--hb-glass-solid); color: var(--hb-ink); font: 500 var(--hb-text-caption)/1.35 var(--hb-font); }
.hb-pill--success { color: var(--hb-success); background: var(--hb-success-bg); border-color: currentColor; }
.hb-pill--warning { color: var(--hb-warning); background: var(--hb-warning-bg); border-color: currentColor; }
.hb-pill--error { color: var(--hb-error); background: var(--hb-error-bg); border-color: currentColor; }
[data-hb-agent="human"] { --hb-agent-color: var(--hb-human); }
[data-hb-agent="robot"] { --hb-agent-color: var(--hb-robot); }
[data-hb-agent="drone"] { --hb-agent-color: var(--hb-drone); }
.hb-icon { display: inline-block; width: 1.25em; height: 1.25em; flex: 0 0 auto; color: var(--hb-agent-color, currentColor); vertical-align: -.2em; }
/* Explicit opt-in: filled SVGs keep their own fill/stroke unless this variant is requested. */
.hb-icon--stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hb-dot { display: inline-block; width: var(--hb-space-2); height: var(--hb-space-2); flex: 0 0 auto; border-radius: 50%; background: var(--hb-agent-color, var(--hb-action)); }
.hb-agent { display: inline-flex; align-items: center; gap: var(--hb-space-3); min-width: 0; color: var(--hb-ink); }
.hb-agent > :where(img, video, canvas) { display: block; width: var(--hb-space-7); height: var(--hb-space-7); flex: 0 0 auto; object-fit: contain; }
/* Host-owned spatial placement and workflow state. No synthetic completion ticks or behaviour. */
.hb-spatial-tag, .hb-checkpoint { display: inline-flex; align-items: center; gap: var(--hb-space-2); max-width: min(34ch, 100%); padding: var(--hb-space-2) var(--hb-space-3); border: 1px solid var(--hb-control-border); border-radius: var(--hb-radius-pill); color: var(--hb-ink); font: 500 var(--hb-text-caption)/1.35 var(--hb-font); }
.hb-spatial-tag:not(.hb-glass), .hb-checkpoint:not(.hb-glass) { background: var(--hb-surface); box-shadow: var(--hb-button-shadow); }
.hb-spatial-tag.hb-glass, .hb-checkpoint.hb-glass { border-color: var(--hb-glass-border); border-radius: var(--hb-radius-pill); }
/* Compact CP identifier anchored in space; a workflow list item is .hb-step, not a checkpoint. */
.hb-checkpoint { padding: var(--hb-space-1) var(--hb-space-2); white-space: nowrap; }
.hb-step { display: flex; align-items: flex-start; gap: var(--hb-space-2); color: var(--hb-secondary); font: 400 var(--hb-text-body)/var(--hb-leading-body) var(--hb-font); }
.hb-step[aria-current="step"] { color: var(--hb-ink); font-weight: 500; }
.hb-step > :where(.hb-icon, input) { flex: 0 0 auto; margin-block-start: .1em; }
.hb-table-wrap { overflow-x: auto; max-width: 100%; }
.hb-table, .hb-table-wrap table { width: 100%; border-collapse: collapse; font: 400 var(--hb-text-body)/var(--hb-leading-body) var(--hb-font); color: var(--hb-ink); }
.hb-table :where(th, td), .hb-table-wrap :where(th, td) { padding: var(--hb-space-4) var(--hb-space-3); text-align: start; vertical-align: top; border-bottom: 1px solid var(--hb-border); }
.hb-table th, .hb-table-wrap th { font-weight: 500; }
.hb-table caption, .hb-table-wrap caption { text-align: start; padding-block: 0 var(--hb-space-3); color: var(--hb-secondary); }

@media (max-width: 700px) {
  .hb-grid { grid-template-columns: minmax(0, 1fr); gap: var(--hb-space-5); }
  .hb-glass:not(.hb-spatial-tag):not(.hb-checkpoint), .hb-card, .hb-surface { padding: var(--hb-space-4); }
  .hb-table :where(th, td), .hb-table-wrap :where(th, td) { padding: var(--hb-space-3) var(--hb-space-2); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .hb-glass { background: var(--hb-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-root *, .hb-root *::before, .hb-root *::after,
  .hb-button { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hb-button:active { transform: none; }
}
@media print {
  .hb-root { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hb-glass { background: var(--hb-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .hb-shell { max-width: none; }
  .hb-table-wrap { overflow: visible; }
}