/* src/js/theme.css */
:root {
  --sl-font-sans: Arial, Helvetica, sans-serif;

  /* TrussLab blue accent */
  --tl-accent-rgb: 99, 163, 255;
  --tl-accent-light-rgb: 130, 185, 255;
  --tl-accent-hover-rgb: 148, 190, 255;
  --tl-accent-on-rgb: 223, 236, 252;
  --tl-accent-muted-text-rgb: 199, 223, 247;

  --tl-accent: rgb(var(--tl-accent-rgb));
  --tl-accent-hover: rgb(var(--tl-accent-hover-rgb));
  --tl-accent-light: rgb(var(--tl-accent-light-rgb));
  --tl-accent-on: rgb(var(--tl-accent-on-rgb));
  --tl-accent-muted-text: rgb(var(--tl-accent-muted-text-rgb));

  /* Vivid blue for active toolbar/toggle icons only */
  --fs-active-icon-fg: rgb(51, 153, 255);

  /* Brand — muted at rest, regular white on hover; icon turns blue on hover */
  --tl-brand-muted: rgb(90, 95, 105);
  --tl-brand-active: rgba(255, 255, 255, 0.94);
  --tl-brand-logo-hover: var(--tl-accent-light);
  /* Darker logo on the light editor top bar hover background */
  --tl-brand-logo-on-grid: rgb(52, 108, 166);
  /* Fixed TrussLab mark on the 3D grid (app shell + tx-log drawer). */
  --tl-grid-brand-inset-top: 12px;
  --tl-grid-brand-inset-left: 12px;

  --sl-z-index-tooltip: 2000;
  --fs-tooltip-z-index: 2000;

  /* Inline editor label column (Name, X, Y, Z, etc.) */
  --fs-field-label-width: 8.5rem;
  --fs-field-column-gap: 0.55rem;

  /* Transaction-log drawer slide (frame + attachment editors). */
  --tx-drawer-transition-duration: 0.35s;
  --tx-drawer-transition-easing: ease;

  /* Transaction-log drawer tooltips (hoisted popups use document-level styles). */
  --tx-log-tooltip-bg: rgb(44, 48, 56);
  --tx-log-tooltip-fg: rgba(255, 255, 255, 0.95);
  --tx-log-tooltip-muted: rgba(168, 174, 184, 0.95);
  --tx-log-tooltip-border: rgba(148, 154, 164, 0.45);
  --tx-log-tooltip-shadow: 0 4px 16px rgba(16, 18, 22, 0.28);
}

/* Shoelace dialogs render in the document; style them globally for every editor surface. */
sl-dialog {
  --sl-border-radius-large: var(--fs-dialog-radius, 0.5rem);
  --sl-border-radius-medium: var(--fs-dialog-radius, 0.5rem);
  --sl-panel-background-color: var(--fs-dialog-bg, var(--fs-bg, #0a111c));
  --sl-color-primary-600: var(--fs-dialog-close-fg, var(--fs-icon, rgba(255, 255, 255, 0.55)));
  --sl-color-primary-700: var(--fs-dialog-close-fg, var(--fs-icon, rgba(255, 255, 255, 0.55)));
  --sl-color-neutral-600: var(--fs-dialog-close-fg, var(--fs-icon, rgba(255, 255, 255, 0.55)));
  --sl-color-neutral-700: var(--fs-dialog-close-fg, var(--fs-icon, rgba(255, 255, 255, 0.55)));
  --header-spacing: var(--fs-dialog-header-spacing, 0.65rem);
  --body-spacing: var(--sl-spacing-medium);
  color-scheme: var(--fs-color-scheme, dark);
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

sl-dialog::part(overlay) {
  background-color: var(--fs-dialog-overlay, hsl(0 0% 0% / 43%));
}

/* Library create dialogs sit inside the side panel; dim chrome above the panel too. */
html.library-modal-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--fs-dialog-overlay, hsl(0 0% 0% / 43%));
  z-index: 1250;
  pointer-events: auto;
}

/* Shoelace light/dark themes set dark tooltip colors on html; override at the root. */
html,
html.sl-theme-light,
html.sl-theme-dark,
:root {
  --sl-z-index-tooltip: var(--fs-tooltip-z-index, 2000);
  --sl-tooltip-background-color: var(--fs-tooltip-bg, rgba(16, 18, 24, 0.96));
  --sl-tooltip-color: var(--fs-tooltip-fg, rgba(255, 255, 255, 0.96));
  --sl-tooltip-padding: var(--fs-tooltip-padding, 0.22rem 0.42rem);
  --sl-tooltip-font-size: var(--fs-tooltip-font-size, 0.68rem);
  --sl-tooltip-line-height: var(--fs-tooltip-line-height, 1.25);
  --sl-tooltip-border-radius: var(--fs-tooltip-radius, 5px);
}

/* Shoelace tooltips render in the document; keep them above dialogs and chrome. */
sl-tooltip {
  --sl-z-index-tooltip: var(--fs-tooltip-z-index, 2000);
  --sl-tooltip-background-color: var(--fs-tooltip-bg, rgba(16, 18, 24, 0.96));
  --sl-tooltip-color: var(--fs-tooltip-fg, rgba(255, 255, 255, 0.96));
}

sl-tooltip::part(base__popup) {
  z-index: var(--sl-z-index-tooltip, 2000);
}

sl-tooltip::part(body) {
  font-size: var(--fs-tooltip-font-size, 0.68rem);
  line-height: var(--fs-tooltip-line-height, 1.25);
  padding: var(--fs-tooltip-padding, 0.22rem 0.42rem);
  border-radius: var(--fs-tooltip-radius, 5px);
  border: 1px solid var(--fs-tooltip-border, rgba(255, 255, 255, 0.15));
  box-shadow: var(--fs-tooltip-shadow, 0 4px 12px rgba(0, 0, 0, 0.22));
  background-color: var(--fs-tooltip-bg, var(--sl-tooltip-background-color));
  color: var(--fs-tooltip-fg, var(--sl-tooltip-color));
}

/* Transaction log tooltips hoist to document; keep a light surface regardless of sidebar theme. */
sl-tooltip.tx-log-surface-tooltip,
sl-tooltip.history-narration-tooltip-host {
  --sl-tooltip-background-color: var(--tx-log-tooltip-bg);
  --sl-tooltip-color: var(--tx-log-tooltip-fg);
}

sl-tooltip.tx-log-surface-tooltip::part(body),
sl-tooltip.history-narration-tooltip-host::part(body) {
  background-color: var(--tx-log-tooltip-bg);
  color: var(--tx-log-tooltip-fg);
  border-color: var(--tx-log-tooltip-border);
  box-shadow: var(--tx-log-tooltip-shadow);
}

.history-narration-tooltip {
  max-width: 240px;
  text-align: left;
  line-height: 1.35;
  font-size: 0.68rem;
  background: var(--tx-log-tooltip-bg);
}

.history-narration-tooltip-text {
  margin-bottom: 3px;
}

.history-narration-tooltip-label,
.history-narration-tooltip-hint,
.history-narration-tooltip-status {
  color: var(--tx-log-tooltip-muted);
}

.history-narration-tooltip-label {
  font-weight: 600;
  margin-right: 0.2rem;
}

.history-narration-tooltip-content {
  color: var(--tx-log-tooltip-fg);
}

.history-narration-tooltip-hint {
  font-size: 0.62rem;
}

sl-dialog::part(panel) {
  border-radius: var(--fs-dialog-radius, 0.5rem);
  background: var(--fs-dialog-bg, var(--fs-bg, rgba(20, 20, 24, 0.96)));
  color: var(--fs-dialog-fg, rgba(255, 255, 255, 0.82));
  border: 1px solid var(--fs-dialog-border, rgb(148, 154, 164));
  box-shadow: var(--fs-shadow, 0 10px 30px rgba(0, 0, 0, 0.35));
  overflow: hidden;
}

sl-dialog::part(header) {
  gap: 0.2rem;
  min-height: var(--fs-dialog-header-height, 3.5rem);
  align-items: center;
  box-sizing: border-box;
  background: var(--fs-dialog-header-bg, rgba(255, 255, 255, 0.06));
}

sl-dialog::part(title) {
  padding: 0 1rem 0 16px;
  font-size: var(--fs-dialog-title-size, 1.04rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--fs-dialog-title-fg, rgba(255, 255, 255, 0.96));
}

sl-dialog::part(header-actions) {
  padding: 0 16px 0 0;
  align-items: center;
}

sl-dialog::part(body) {
  padding-top: 0.55rem;
  color: var(--fs-dialog-fg, rgba(255, 255, 255, 0.82));
  overflow: auto;
}

sl-dialog sl-input,
sl-dialog sl-textarea {
  --sl-input-height-small: var(--fs-dialog-input-height, 1.5rem);
  --sl-input-height-medium: var(--fs-dialog-input-height, 1.5rem);
  --sl-input-height-large: var(--fs-dialog-input-height, 1.5rem);
  --sl-input-spacing-small: 0.28rem;
  --sl-input-spacing-medium: 0.28rem;
  --sl-input-font-size-small: 0.84rem;
  --sl-input-font-size-medium: 0.84rem;
  --sl-input-background-color: var(--fs-dialog-input-bg, rgba(0, 0, 0, 0.22));
  --sl-input-background-color-hover: var(--fs-dialog-input-bg, rgba(0, 0, 0, 0.22));
  --sl-input-background-color-focus: var(--fs-dialog-input-bg, rgba(0, 0, 0, 0.22));
  --sl-input-border-color: var(--fs-dialog-input-border, rgba(255, 255, 255, 0.1));
  --sl-input-border-color-hover: var(--fs-dialog-input-border, rgba(255, 255, 255, 0.1));
  --sl-input-border-color-focus: var(--fs-dialog-focus, rgba(99, 163, 255, 0.42));
  --sl-input-color: var(--fs-dialog-fg, rgba(255, 255, 255, 0.92));
  --sl-input-color-hover: var(--fs-dialog-fg, rgba(255, 255, 255, 0.92));
  --sl-input-color-focus: var(--fs-dialog-fg, rgba(255, 255, 255, 0.92));
  --sl-input-placeholder-color: var(--fs-dialog-fg-faint, rgba(255, 255, 255, 0.52));
  --sl-input-focus-ring-color: var(--fs-dialog-focus, rgba(99, 163, 255, 0.42));
  --sl-focus-ring-color: var(--fs-dialog-focus, rgba(99, 163, 255, 0.42));
  --sl-focus-ring-width: 1px;
  --sl-color-primary-600: var(--fs-dialog-fg, rgba(255, 255, 255, 0.92));
  --sl-color-primary-700: var(--fs-dialog-fg, rgba(255, 255, 255, 0.92));
}

sl-dialog sl-input::part(base),
sl-dialog sl-textarea::part(base) {
  min-height: 0;
  font-size: 0.84rem;
  background-color: var(--fs-dialog-input-bg, var(--fs-control-inset-bg, #060d17));
  border-color: var(--fs-dialog-input-border, rgba(255, 255, 255, 0.1));
}

sl-dialog sl-input::part(input) {
  background-color: transparent;
}

html[data-sidebar-theme="dark"] sl-input::part(base),
html[data-sidebar-theme="dark"] sl-textarea::part(base),
html[data-sidebar-theme="dark"] sl-select::part(combobox) {
  background-color: var(--fs-control-inset-bg, #060d17);
  border-color: var(--fs-control-inset-border, rgba(255, 255, 255, 0.1));
  box-shadow: none;
}

html[data-sidebar-theme="dark"] sl-input::part(input),
html[data-sidebar-theme="dark"] sl-select::part(display-input) {
  background-color: transparent;
  color: var(--fs-editor-input-fg, var(--fs-input-fg, rgba(255, 255, 255, 0.92)));
}

sl-dialog sl-input::part(form-control) {
  min-height: var(--fs-dialog-input-height, 1.5rem);
  height: var(--fs-dialog-input-height, 1.5rem);
  display: flex;
  align-items: center;
}

sl-dialog .type-list {
  background: var(--fs-dialog-surface-bg, rgba(99, 163, 255, 0.05));
  border-color: var(--fs-dialog-surface-border, rgba(99, 163, 255, 0.1));
  color: var(--fs-dialog-fg, rgba(255, 255, 255, 0.92));
}

sl-dialog .empty-note,
sl-dialog .dialog-note {
  color: var(--fs-dialog-fg-faint, rgba(255, 255, 255, 0.62));
}

sl-dialog sl-input::part(input),
sl-dialog sl-textarea::part(textarea) {
  min-height: 0;
  padding: 0 0.35rem;
  line-height: 1.2;
  color: var(--fs-dialog-fg, inherit);
  caret-color: var(--fs-dialog-fg, inherit);
  -webkit-text-fill-color: var(--fs-dialog-fg, inherit);
}

sl-input::part(input)::placeholder,
sl-textarea::part(textarea)::placeholder,
sl-select::part(display-input)::placeholder {
  font-style: italic;
}

sl-dialog::part(close-button) {
  --sl-color-primary-600: var(--fs-dialog-close-fg, var(--fs-icon, rgba(255, 255, 255, 0.55)));
  --sl-color-primary-700: var(--fs-dialog-close-fg, var(--fs-icon, rgba(255, 255, 255, 0.55)));
  --sl-color-neutral-600: var(--fs-dialog-close-fg, var(--fs-icon, rgba(255, 255, 255, 0.55)));
  --sl-color-neutral-700: var(--fs-dialog-close-fg, var(--fs-icon, rgba(255, 255, 255, 0.55)));
  font-size: var(--fs-dialog-close-size, 0.85rem);
}

sl-dialog::part(close-button__base) {
  color: var(--fs-dialog-close-fg, var(--fs-icon, rgba(255, 255, 255, 0.55)));
  border: none;
  background: transparent;
  border-radius: 5px;
  box-shadow: none;
  padding: 0.15rem;
  transition: background 0.14s ease;
}

sl-dialog::part(close-button__base):hover,
sl-dialog::part(close-button__base):focus-visible,
sl-dialog::part(close-button__base):active {
  background: var(--fs-dialog-close-hover-bg, var(--fs-hover, rgba(255, 255, 255, 0.08)));
  color: var(--fs-dialog-close-fg, var(--fs-icon, rgba(255, 255, 255, 0.55)));
  border: none;
  border-color: transparent;
  box-shadow: none;
}

sl-dialog::part(footer) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  background: var(--fs-dialog-bg, var(--fs-bg, rgba(20, 20, 24, 0.96)));
  border-top: none;
}

/* Generic footer slot wrappers (dialogs without .dialog-footer-actions). */
sl-dialog > [slot='footer']:not(sl-button-group) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* Match transaction log Undo/Redo (.history-actions): compact sizing only. */
sl-dialog [slot='footer'] sl-button,
sl-dialog .dialog-footer-actions sl-button {
  color-scheme: var(--fs-color-scheme, dark);
}

sl-dialog .dialog-footer-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

sl-dialog [slot='footer'] sl-button::part(base),
sl-dialog .dialog-footer-actions sl-button::part(base) {
  padding: 0.25rem 0.55rem;
  font-size: 0.85rem;
}

/* Sidebar / modal sl-select menus — match expression autocomplete dropdown. */
sl-select::part(listbox) {
  max-height: min(15rem, var(--auto-size-available-height, 15rem));
  padding: 2px 0;
  overflow-y: auto;
  font-family: inherit;
  font-size: 0.84rem;
  background-color: var(--fs-expr-suggestions-bg, #0a111c);
  border-color: var(--fs-expr-suggestions-border, rgba(99, 163, 255, 0.18));
  border-radius: 0.5rem;
  box-shadow: var(--fs-shadow, 0 16px 36px rgba(0, 0, 0, 0.34));
}

sl-select {
  --sl-panel-background-color: var(--fs-expr-suggestions-bg, #0a111c);
  --sl-panel-border-color: var(--fs-expr-suggestions-border, rgba(99, 163, 255, 0.18));
}

sl-option {
  --sl-color-primary-600: transparent;
}

sl-option::part(base) {
  padding: 0.28rem 0.55rem;
  line-height: 1.15;
  min-height: unset;
  font-family: inherit;
  background-color: transparent;
  color: var(--fs-select-fg, rgba(255, 255, 255, 0.72));
}

sl-option::part(base):hover {
  background-color: var(--fs-expr-suggestions-active-bg, rgba(255, 255, 255, 0.08));
  color: var(--fs-fg, rgba(255, 255, 255, 0.88));
}

sl-option[aria-selected='true']::part(base) {
  background-color: var(--fs-expr-suggestions-active-bg, rgba(255, 255, 255, 0.08));
  color: var(--fs-select-active, rgb(150, 195, 255));
}

sl-option[aria-selected='true']::part(base):hover {
  background-color: var(--fs-expr-suggestions-active-bg, rgba(255, 255, 255, 0.08));
  color: var(--fs-select-active, rgb(150, 195, 255));
}

sl-option[aria-selected='true']::part(checked-icon) {
  color: var(--fs-select-active, rgb(150, 195, 255));
}

/* Expression autocomplete portaled into the open dialog top layer (modals). */
.reactive-expr-suggestions-portal {
  position: fixed;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 15rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  border: 1px solid var(--fs-expr-suggestions-border, var(--fs-border-strong, rgba(255, 255, 255, 0.12)));
  border-radius: 0.5rem;
  background-color: var(--fs-expr-suggestions-bg, var(--fs-surface, #0a111c));
  color: var(--fs-input-fg, inherit);
  box-shadow: var(--fs-shadow, 0 16px 36px rgba(0, 0, 0, 0.34));
  box-sizing: border-box;
  font-size: var(--fs-expr-font-size, 0.82rem);
}

.reactive-expr-suggestions-portal .suggestion {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: calc(2.35rem - 2px);
  padding: calc(0.38rem - 1px) 0.65rem;
  margin: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: none;
  background-color: transparent;
  box-shadow: none;
  outline: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.reactive-expr-suggestions-portal .suggestion:focus,
.reactive-expr-suggestions-portal .suggestion:focus-visible {
  border: none;
  outline: none;
  box-shadow: none;
}

.reactive-expr-suggestions-portal .suggestion + .suggestion {
  border-top: none;
}

.reactive-expr-suggestions-portal .suggestion:hover,
.reactive-expr-suggestions-portal .suggestion.is-active {
  background-color: var(--fs-expr-suggestions-active-bg, var(--fs-hover, rgba(17, 24, 39, 0.06)));
}

.reactive-expr-suggestions-portal .suggestion-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.45rem;
}

.reactive-expr-suggestions-portal .suggestion-label,
.reactive-expr-suggestions-portal .suggestion-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
}

.reactive-expr-suggestions-portal .suggestion-label {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--fs-expr-suggestions-label-fg, rgba(255, 255, 255, 0.96));
  font-weight: 400;
}

.reactive-expr-suggestions-portal .suggestion-detail {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--fs-expr-suggestions-detail-fg, rgba(255, 255, 255, 0.42));
  font-size: 0.78rem;
  font-weight: 400;
}

.reactive-expr-suggestions-portal .suggestion-kind {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 1rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  color: var(--fs-badge-fg, var(--fs-fg, rgba(255, 255, 255, 0.95)));
}

.reactive-expr-suggestions-portal .suggestion-kind.kind-function {
  background-color: var(--fs-prop-badge-computed-bg, rgba(100, 110, 130, 0.12));
}

.reactive-expr-suggestions-portal .suggestion-kind.kind-numeric {
  background-color: var(--fs-prop-badge-numeric-bg, rgba(56, 148, 210, 0.14));
}

.reactive-expr-suggestions-portal .suggestion-kind.kind-metric {
  background-color: var(--fs-prop-badge-runtime-bg, rgba(200, 130, 30, 0.14));
}

.reactive-expr-suggestions-portal .suggestion-kind.kind-property {
  background-color: var(--fs-prop-badge-input-bg, rgba(16, 163, 127, 0.14));
}

.reactive-expr-suggestions-portal .suggestion-kind.kind-literal {
  background-color: var(--fs-prop-badge-boolean-bg, rgba(40, 140, 90, 0.14));
}

.reactive-expr-suggestions-portal .suggestion-kind.kind-cast,
.reactive-expr-suggestions-portal .suggestion-kind.kind-operator {
  background-color: var(--fs-prop-badge-integer-bg, rgba(120, 80, 180, 0.12));
}

.reactive-expr-suggestions-portal .suggestion-kind.kind-default {
  background-color: var(--fs-prop-badge-computed-bg, rgba(100, 110, 130, 0.12));
}

html[data-sidebar-theme="dark"] sl-dialog {
  --sl-panel-background-color: var(--fs-dialog-bg, #0a111c);
  --sl-color-neutral-0: var(--fs-dialog-bg, #0a111c);
  --sl-color-neutral-50: var(--fs-dialog-header-bg, #0f1623);
  --sl-color-neutral-100: var(--fs-surface-muted, rgba(99, 163, 255, 0.06));
}

html[data-sidebar-theme="dark"] sl-dialog::part(panel),
html[data-sidebar-theme="dark"] sl-dialog::part(body),
html[data-sidebar-theme="dark"] sl-dialog::part(footer) {
  background: var(--fs-dialog-bg, #0a111c);
  color: var(--fs-dialog-fg, rgba(255, 255, 255, 0.92));
}

html[data-sidebar-theme="dark"] sl-dialog::part(panel) {
  border: 1px solid var(--fs-dialog-border, rgba(99, 163, 255, 0.18));
}

html[data-sidebar-theme="light"] sl-dialog {
  --sl-panel-background-color: var(--fs-dialog-bg, #e9eef4);
  --sl-color-neutral-0: var(--fs-dialog-bg, #e9eef4);
  --sl-color-neutral-50: var(--fs-dialog-header-bg, #f1f5fa);
  --sl-color-neutral-100: var(--fs-surface-muted, rgba(76, 130, 208, 0.06));
}

html[data-sidebar-theme="light"] sl-dialog::part(panel),
html[data-sidebar-theme="light"] sl-dialog::part(body),
html[data-sidebar-theme="light"] sl-dialog::part(footer) {
  background: var(--fs-dialog-bg, #e9eef4);
  color: var(--fs-dialog-fg, rgba(17, 24, 39, 0.88));
}

html[data-sidebar-theme="light"] sl-dialog::part(panel) {
  border: 1px solid var(--fs-dialog-border, rgba(76, 130, 208, 0.2));
}

/* src/js/siteHome.css */
.trusslab-home-page {
      --mono: Arial, Helvetica, sans-serif;

      --th-bg-glow: radial-gradient(
        ellipse 80% 55% at 18% 6%,
        rgba(var(--tl-accent-rgb, 99, 163, 255), 0.16),
        transparent 62%
      );
      /* Sampled from the hero image so sections flow out of the photo. */
      --th-bg-gradient: linear-gradient(180deg, #0f1623 0%, #0a111c 52%, #060d17 100%);
      --th-section-bg: rgba(255, 255, 255, 0.015);
      --th-heading-fg: rgba(255, 255, 255, 0.97);
      --th-accent-fg: var(--tl-accent-light, rgb(130, 185, 255));
      --th-body-fg: rgba(255, 255, 255, 0.62);
      --th-muted-fg: rgba(255, 255, 255, 0.4);
      --th-eyebrow-fg: rgba(var(--tl-accent-muted-text-rgb, 199, 223, 247), 0.82);
      --th-card-bg: rgba(255, 255, 255, 0.022);
      --th-card-border: rgba(255, 255, 255, 0.08);
      --th-card-hover-border: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.4);
      --th-divider: rgba(255, 255, 255, 0.08);
      --th-chip-border: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.22);
      --th-chip-bg: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.06);
      --th-grid-major: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.05);
      --th-grid-minor: rgba(255, 255, 255, 0.015);
      --th-grid-line: rgba(255, 255, 255, 0.006);

      position: relative;
      display: block;
      box-sizing: border-box;
      height: 100%;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      background:
        var(--th-bg-glow),
        var(--th-bg-gradient);
      color: var(--fs-fg, rgba(255, 255, 255, 0.88));
      font-family: inherit;
      color-scheme: var(--fs-color-scheme, dark);
      scroll-behavior: smooth;
    }

    html[data-sidebar-theme="light"] .trusslab-home-page {
      --th-bg-glow:
        radial-gradient(ellipse 72% 52% at 12% 4%, rgba(var(--tl-accent-rgb, 99, 163, 255), 0.12), transparent 58%);
      --th-bg-gradient: linear-gradient(160deg, #f7f9fc 0%, #eef3f9 48%, #e6ecf3 100%);
      --th-section-bg: rgba(17, 24, 39, 0.015);
      --th-heading-fg: var(--fs-fg-heading, #111827);
      --th-accent-fg: var(--fs-active-fg, rgb(52, 108, 166));
      --th-body-fg: rgba(17, 24, 39, 0.66);
      --th-muted-fg: rgba(17, 24, 39, 0.5);
      --th-eyebrow-fg: var(--fs-active-fg, rgb(52, 108, 166));
      --th-card-bg: rgba(255, 255, 255, 0.6);
      --th-card-border: rgba(17, 24, 39, 0.1);
      --th-card-hover-border: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.5);
      --th-divider: rgba(17, 24, 39, 0.12);
      --th-chip-border: rgba(76, 130, 208, 0.28);
      --th-chip-bg: rgba(76, 130, 208, 0.08);
      --th-grid-major: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.08);
      --th-grid-minor: rgba(17, 24, 39, 0.03);
      --th-grid-line: rgba(17, 24, 39, 0.012);
    }

    .trusslab-home-page[hidden] {
      display: none;
    }

    .trusslab-home-page a {
      color: inherit;
      text-decoration: none;
    }

    /* ===== Top navigation ===== */

    .trusslab-home-page .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding: 1rem clamp(1.25rem, 5vw, 4rem);
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background 0.2s ease, border-color 0.2s ease, backdrop-filter 0.2s ease;
    }

    /* Pull the hero up so it sits behind the transparent sticky bar. */
    .trusslab-home-page .hero {
      margin-top: calc(-1 * var(--th-nav-h, 4rem));
    }

    /* As soon as the user scrolls, the bar gains a solid background. */
    .trusslab-home-page .topbar.scrolled {
      background: #070d15;
    }

    html[data-sidebar-theme="light"] .trusslab-home-page .topbar.scrolled {
      background: #f7f9fc;
    }

    .trusslab-home-page .brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--th-heading-fg);
      font: inherit;
      font-weight: 500;
      cursor: pointer;
    }

    .trusslab-home-page .brand-logo {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgb(var(--tl-accent-rgb, 99, 163, 255));
      flex: none;
      cursor: pointer;
    }

    .trusslab-home-page .brand-canvas {
      display: block;
      width: 32px;
      height: 32px;
      cursor: pointer;
    }

    .trusslab-home-page .brand-text {
      display: inline-flex;
      align-items: center;
      font-size: 1rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.01em;
      white-space: nowrap;
      cursor: pointer;
    }

    .trusslab-home-page .nav-links {
      display: flex;
      align-items: center;
      gap: 1.6rem;
      margin-left: auto;
      font-size: 1rem;
    }

    .trusslab-home-page .nav-links a {
      color: #ffffff;
      cursor: pointer;
      transition: color 0.14s ease;
    }

    .trusslab-home-page .nav-links a:hover {
      color: var(--th-accent-fg);
    }

    .trusslab-home-page .nav-cta {
      margin-left: 0.4rem;
    }

    @media (max-width: 760px) {
      .trusslab-home-page .nav-links .nav-anchor {
        display: none;
      }
    }

    /* ===== Buttons ===== */

    .trusslab-home-page .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.48rem 0.95rem;
      border-radius: 7px;
      font-size: 0.84rem;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid transparent;
      font-family: inherit;
      transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
      white-space: nowrap;
    }

    .trusslab-home-page .btn:active {
      transform: translateY(1px);
    }

    .trusslab-home-page .btn-primary {
      background: #3f6aa6;
      color: rgba(255, 255, 255, 0.96);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    .trusslab-home-page .btn-primary:hover {
      background: #4a78b8;
    }

    .trusslab-home-page .btn-ghost {
      background: rgba(255, 255, 255, 0.06);
      color: var(--th-heading-fg);
      border-color: rgba(255, 255, 255, 0.28);
    }

    .trusslab-home-page .btn-ghost:hover {
      border-color: rgba(255, 255, 255, 0.45);
      background: rgba(255, 255, 255, 0.1);
    }

    .trusslab-home-page .btn-arrow {
      font-family: var(--mono);
      font-size: 0.95em;
    }

    /* ===== Layout shells ===== */

    .trusslab-home-page section {
      position: relative;
      padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 4rem);
    }

    .trusslab-home-page .wrap {
      max-width: 73rem;
      margin: 0 auto;
    }

    .trusslab-home-page .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 1rem;
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--th-eyebrow-fg);
    }

    .trusslab-home-page .eyebrow::before {
      content: '';
      width: 1.6rem;
      height: 1px;
      background: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.6);
    }

    .trusslab-home-page h2 {
      margin: 0 0 1rem;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.025em;
      color: var(--th-heading-fg);
    }

    .trusslab-home-page .section-copy {
      margin: 0;
      max-width: 42rem;
      font-size: 1.02rem;
      line-height: 1.7;
      color: var(--th-body-fg);
    }

    /* ===== Hero ===== */

    .trusslab-home-page .hero {
      position: relative;
      overflow: hidden;
      padding-top: clamp(5rem, 8vw, 7rem);
      padding-bottom: clamp(2.5rem, 5vw, 4rem);
    }

    /* Smooth visual handoff into the next banded section. */
    .trusslab-home-page .hero::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 140px;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent, var(--th-section-bg) 75%, var(--th-section-bg));
      z-index: 0;
    }

    .trusslab-home-page .hero-backdrop {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }

    /* Your hero background image, shown at full width (less cropped). */
    .trusslab-home-page .hero-backdrop::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: #060d17;
      background-image: url('/generated/home/trusslab-hero-bg.png');
      background-size: 100% auto;
      background-position: center bottom;
      background-repeat: no-repeat;
      z-index: 1;
    }

    /* Soft left-side scrim so the headline stays readable over the image. */
    .trusslab-home-page .hero-backdrop::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        100deg,
        rgba(8, 12, 20, 0.82) 0%,
        rgba(8, 12, 20, 0.5) 36%,
        rgba(8, 12, 20, 0.12) 62%,
        transparent 80%
      );
      z-index: 2;
    }

    .trusslab-home-page .floor, .trusslab-home-page .axis, .trusslab-home-page .origin {
      display: none;
    }

    .trusslab-home-page .hero-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(18rem, 1.08fr);
      gap: clamp(1.75rem, 4vw, 4rem);
      align-items: center;
      max-width: 73rem;
    }

    .trusslab-home-page .hero-content {
      position: relative;
      z-index: 2;
      max-width: 44rem;
    }

    .trusslab-home-page .hero h1 {
      margin: 0 0 1.35rem;
      font-size: clamp(2.1rem, 5vw, 3.5rem);
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: -0.035em;
      color: var(--th-heading-fg);
    }

    .trusslab-home-page .hero h1 .accent {
      color: var(--th-accent-fg);
    }

    .trusslab-home-page .hero-lead {
      margin: 0 0 2rem;
      max-width: 36rem;
      font-size: 1.08rem;
      line-height: 1.65;
      color: var(--th-body-fg);
    }

    .trusslab-home-page .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.85rem;
      margin-bottom: 2.25rem;
    }

    .trusslab-home-page .chip {
      display: inline-block;
      padding: 0.55rem 0.85rem;
      border: 1px solid var(--th-chip-border);
      background: var(--th-chip-bg);
      border-radius: 6px;
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.06em;
      color: var(--th-accent-fg);
    }

    .trusslab-home-page .hero-subscribe {
      position: relative;
      overflow: hidden;
      max-width: 36rem;
      margin-top: 1.45rem;
      padding: clamp(1.1rem, 2.4vw, 1.45rem);
      border: 1px solid var(--th-chip-border);
      border-radius: 14px;
      background:
        radial-gradient(
          ellipse 85% 70% at 10% 0%,
          rgba(var(--tl-accent-rgb, 99, 163, 255), 0.16),
          transparent 62%
        ),
        rgba(255, 255, 255, 0.025);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(8px);
    }

    html[data-sidebar-theme="light"] .trusslab-home-page .hero-subscribe {
      background:
        radial-gradient(
          ellipse 85% 70% at 10% 0%,
          rgba(var(--tl-accent-rgb, 99, 163, 255), 0.14),
          transparent 62%
        ),
        rgba(255, 255, 255, 0.62);
      box-shadow: 0 18px 44px rgba(17, 24, 39, 0.08);
    }

    .trusslab-home-page .hero-subscribe::after {
      content: '';
      position: absolute;
      left: 32%;
      right: -28%;
      bottom: -35%;
      height: 62%;
      pointer-events: none;
      background-image:
        linear-gradient(var(--th-grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--th-grid-major) 1px, transparent 1px);
      background-size: 52px 52px;
      opacity: 0.18;
      transform: perspective(420px) rotateX(62deg);
      transform-origin: 50% 100%;
      mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent 82%);
    }

    .trusslab-home-page .hero-subscribe-inner {
      position: relative;
      z-index: 1;
    }

    .trusslab-home-page .hero-subscribe h2 {
      margin: 0 0 0.7rem;
      font-size: clamp(1.15rem, 2vw, 1.45rem);
    }

    .trusslab-home-page .hero-subscribe-copy {
      margin: 0 0 1.35rem;
      color: var(--th-body-fg);
      font-size: 0.94rem;
      line-height: 1.58;
    }

    /* Mailing-list band — same drifting particle network as the Examples section. */
    .trusslab-home-page .subscribe-section {
      position: relative;
      z-index: 1;
      overflow: hidden;
      padding-top: clamp(2rem, 5vw, 3rem);
      padding-bottom: clamp(2rem, 5vw, 3rem);
    }

    /* Mailing-list content sits over the side-masked network canvas. */
    .trusslab-home-page .subscribe-panel {
      position: relative;
      z-index: 1;
      width: 100%;
      margin: 0 auto;
      padding: clamp(1.25rem, 2.6vw, 2rem);
    }

    .trusslab-home-page .subscribe-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: center;
    }

    @media (min-width: 760px) {
      .trusslab-home-page .subscribe-layout {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.8fr);
      }
    }

    .trusslab-home-page .subscribe-logo {
      position: relative;
      min-height: 11rem;
      overflow: hidden;
    }

    .trusslab-home-page .subscribe-logo-canvas {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      cursor: default;
    }

    .trusslab-home-page .subscribe-inner {
      position: relative;
      z-index: 1;
      max-width: 44rem;
    }

    .trusslab-home-page .subscribe-inner h2 {
      margin: 0 0 0.5rem;
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      color: var(--th-heading-fg);
    }

    .trusslab-home-page .subscribe-copy {
      margin: 0 0 1rem;
      color: var(--th-body-fg);
      line-height: 1.65;
      font-size: 1rem;
      max-width: 38rem;
    }

    @media (max-width: 860px) {
      .trusslab-home-page .hero-layout {
        grid-template-columns: 1fr;
        max-width: 48rem;
      }
    }

    /* ===== Thesis band ===== */

    /*
     * No hard separators — sections blend with a soft vertical gradient, over
     * a barely-there grid that fades out toward the section edges.
     */
    .trusslab-home-page .band {
      position: relative;
    }

    .trusslab-home-page .band::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(
        180deg,
        transparent,
        rgba(var(--tl-accent-rgb, 99, 163, 255), 0.05) 50%,
        transparent
      );
    }

    /* A barely-there grid on every other section, fading out at the edges. */
    .trusslab-home-page section:nth-of-type(even)::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(var(--th-grid-line, rgba(255, 255, 255, 0.006)) 1px, transparent 1px),
        linear-gradient(90deg, var(--th-grid-line, rgba(255, 255, 255, 0.006)) 1px, transparent 1px);
      background-size: 46px 46px;
      -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 78%);
      mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 78%);
    }

    /* Our approach + manifest: drifting grid, intersection dots, soft accent glow. */
    .trusslab-home-page #approach, .trusslab-home-page #essay {
      overflow: hidden;
    }

    .trusslab-home-page #approach::before, .trusslab-home-page #essay::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(rgba(var(--tl-accent-rgb, 99, 163, 255), 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--tl-accent-rgb, 99, 163, 255), 0.028) 1px, transparent 1px);
      background-size: 46px 46px;
      -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 78%);
      mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 78%);
      animation: approach-grid-drift 56s linear infinite;
    }

    .trusslab-home-page #approach.band::after, .trusslab-home-page #essay.band::after {
      z-index: 2;
    }

    .trusslab-home-page .approach-grid-fx {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    /* Constellation-style dots at grid crossings, drifting with the field. */
    .trusslab-home-page .approach-grid-fx::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(
        circle,
        rgba(var(--tl-accent-rgb, 99, 163, 255), 0.48) 1px,
        transparent 1.5px
      );
      background-size: 46px 46px;
      opacity: 0.2;
      -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 78%);
      mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 35%, transparent 78%);
      animation: approach-grid-drift 56s linear infinite;
    }

    .trusslab-home-page .approach-grid-fx::before {
      content: '';
      position: absolute;
      width: 55%;
      height: 55%;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(var(--tl-accent-rgb, 99, 163, 255), 0.07),
        transparent 68%
      );
      filter: blur(20px);
      animation: approach-grid-glow 22s ease-in-out infinite alternate;
    }

    @keyframes approach-grid-drift {
      from { background-position: 0 0, 0 0; }
      to { background-position: 46px 46px, 46px 46px; }
    }

    @keyframes approach-grid-glow {
      from { transform: translate(-8%, 12%); opacity: 0.18; }
      to { transform: translate(72%, 38%); opacity: 0.4; }
    }

    @media (prefers-reduced-motion: reduce) {
      .trusslab-home-page #approach::before, .trusslab-home-page #essay::before, .trusslab-home-page .approach-grid-fx::before, .trusslab-home-page .approach-grid-fx::after {
        animation: none;
      }
    }

    .trusslab-home-page section > .wrap {
      position: relative;
      z-index: 3;
    }

    .trusslab-home-page .thesis-title {
      font-size: clamp(1.9rem, 4vw, 2.9rem);
      letter-spacing: -0.03em;
    }

    .trusslab-home-page .approach-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(1.5rem, 4vw, 2.5rem);
      margin-top: 1.5rem;
    }

    .trusslab-home-page .approach-col h2, .trusslab-home-page .approach-col .thesis-title {
      margin: 0 0 0.85rem;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      letter-spacing: -0.025em;
    }

    /* Thin accent line echoing the editor axis. */
    .trusslab-home-page .approach-sep {
      position: relative;
      justify-self: center;
      width: 100%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--tl-accent-rgb, 99, 163, 255), 0.5) 50%,
        transparent
      );
    }

    @media (min-width: 760px) {
      .trusslab-home-page .approach-grid {
        grid-template-columns: 1fr auto 1fr;
        align-items: stretch;
        column-gap: clamp(2rem, 5vw, 4rem);
      }

      .trusslab-home-page .approach-sep {
        width: 1px;
        height: auto;
        align-self: stretch;
        background: linear-gradient(
          180deg,
          transparent,
          rgba(var(--tl-accent-rgb, 99, 163, 255), 0.5) 50%,
          transparent
        );
      }
    }

    /* ===== What Frames Does (intro + tablet) ===== */

    .trusslab-home-page .frames-intro {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(1.75rem, 4vw, 3rem);
      align-items: start;
      margin-top: clamp(1.25rem, 3vw, 2rem);
    }

    @media (min-width: 760px) {
      .trusslab-home-page .frames-intro {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      }
    }

    .trusslab-home-page .tablet {
      width: 100%;
      margin-top: clamp(2rem, 5vw, 3.5rem);
    }

    /* Tablet-style frame around the editor demo video. */
    .trusslab-home-page .tablet {
      position: relative;
      padding: clamp(0.5rem, 1.2vw, 0.85rem);
      border-radius: 22px;
      background: linear-gradient(155deg, #1a2334, #0a0f1a 60%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 60px -18px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 60px -12px rgba(var(--tl-accent-rgb, 99, 163, 255), 0.35);
      animation: tablet-float 7s ease-in-out infinite;
      will-change: transform;
    }

    .trusslab-home-page .tablet-screen {
      position: relative;
      overflow: hidden;
      border-radius: 14px;
      background: #05080e;
      aspect-ratio: 3020 / 1712;
    }

    .trusslab-home-page .tablet-video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Soft moving glare across the glass. */
    .trusslab-home-page .tablet-screen::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(
        120deg,
        transparent 35%,
        rgba(255, 255, 255, 0.08) 48%,
        transparent 62%
      );
      mix-blend-mode: screen;
      opacity: 0.7;
    }

    @keyframes tablet-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .trusslab-home-page .tablet {
        animation: none;
      }
    }

    /* ===== Feature list (What Frames Does) ===== */

    .trusslab-home-page .feature-grid {
      display: grid;
      gap: 0;
      align-content: start;
    }

    .trusslab-home-page .feature-row {
      display: grid;
      grid-template-columns: 1.9rem minmax(0, 1fr);
      gap: 0.65rem;
      align-items: baseline;
      padding: 0.4rem 0;
    }

    .trusslab-home-page .feature-num {
      font-family: var(--mono);
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--th-accent-fg);
      letter-spacing: 0.05em;
    }

    .trusslab-home-page .feature-copy {
      margin: 0;
      font-size: 0.85rem;
      line-height: 1.5;
      color: var(--th-body-fg);
      white-space: nowrap;
    }

    /* ===== Examples ===== */

    /* Full-bleed animated particle network sitting behind the section content. */
    .trusslab-home-page #examples, .trusslab-home-page .subscribe-section {
      overflow: hidden;
    }

    .trusslab-home-page .frames-canvas, .trusslab-home-page .subscribe-network-canvas {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
      width: 100%;
      height: 100%;
      cursor: default;
    }

    .trusslab-home-page .subscribe-network-canvas {
      --network-mask-half: 36.5rem;
      mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(50% - min(var(--network-mask-half), 50%)),
        transparent calc(50% - min(var(--network-mask-half), 50%)),
        transparent calc(50% + min(var(--network-mask-half), 50%)),
        #000 calc(50% + min(var(--network-mask-half), 50%)),
        #000 100%
      );
      -webkit-mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(50% - min(var(--network-mask-half), 50%)),
        transparent calc(50% - min(var(--network-mask-half), 50%)),
        transparent calc(50% + min(var(--network-mask-half), 50%)),
        #000 calc(50% + min(var(--network-mask-half), 50%)),
        #000 100%
      );
    }

    /*
     * Let hover reach the canvas through the content layer, but keep the
     * interactive cards and mailing-list controls clickable on their own.
     */
    .trusslab-home-page #examples > .wrap, .trusslab-home-page .subscribe-section > .wrap {
      pointer-events: none;
    }

    .trusslab-home-page #examples .example-card, .trusslab-home-page .subscribe-section .subscribe-panel {
      pointer-events: auto;
    }

    .trusslab-home-page .examples-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
      gap: 1rem;
      margin-top: 2.5rem;
    }

    .trusslab-home-page .example-card {
      display: flex;
      flex-direction: column;
      padding: 1.25rem;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(28, 39, 58, 0.92);
      backdrop-filter: blur(6px);
      border-radius: 10px;
      box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
      transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
      min-height: 11rem;
    }

    html[data-sidebar-theme="light"] .trusslab-home-page .example-card {
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(17, 24, 39, 0.16);
    }

    .trusslab-home-page .example-card:hover {
      border-color: var(--th-card-hover-border);
      transform: translateY(-2px);
      box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.7);
    }

    /* Inset placeholder thumbnail at the bottom of each card. */
    .trusslab-home-page .example-thumb {
      margin-top: 1.1rem;
      border: 1px solid var(--th-card-border);
      overflow: hidden;
      border-radius: 8px;
      background: #0a0f1a;
    }

    .trusslab-home-page .example-thumb img {
      display: block;
      width: 100%;
      aspect-ratio: 428 / 242;
      object-fit: cover;
    }

    .trusslab-home-page .example-tag {
      font-family: var(--mono);
      font-size: 0.66rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--th-muted-fg);
      margin-bottom: 0.9rem;
    }

    .trusslab-home-page .example-title {
      margin: 0 0 0.5rem;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--th-heading-fg);
    }

    .trusslab-home-page .example-desc {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.55;
      color: var(--th-body-fg);
    }

    .trusslab-home-page .example-open {
      margin-top: auto;
      padding-top: 1rem;
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.04em;
      color: var(--th-accent-fg);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      cursor: pointer;
    }

    /* ===== Manifest preview ===== */

    .trusslab-home-page .manifest {
      min-width: 0;
    }

    .trusslab-home-page .manifest h2 {
      font-size: clamp(1.35rem, 2.5vw, 1.7rem);
      margin: 0 0 0.85rem;
    }

    .trusslab-home-page .manifest-dek {
      margin: 0 0 1.5rem;
      font-size: 0.98rem;
      line-height: 1.65;
      color: var(--th-body-fg);
    }

    .trusslab-home-page .manifest-body {
      position: relative;
      max-height: 28rem;
      overflow: hidden;
      mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    }

    .trusslab-home-page .manifest-body p {
      margin: 0 0 1rem;
      font-size: 0.98rem;
      line-height: 1.7;
      color: var(--th-body-fg);
    }

    .trusslab-home-page .manifest-body h3 {
      margin: 1.75rem 0 0.75rem;
      font-size: clamp(1.05rem, 1.8vw, 1.25rem);
      letter-spacing: -0.02em;
      color: var(--th-heading-fg);
    }

    .trusslab-home-page .manifest-quote {
      margin: 1.5rem 0;
      padding-left: 1.1rem;
      border-left: 2px solid rgba(var(--tl-accent-rgb, 99, 163, 255), 0.45);
      font-family: var(--mono);
      font-size: 0.92rem;
      letter-spacing: 0.02em;
      line-height: 1.55;
      color: var(--th-accent-fg);
    }

    .trusslab-home-page .manifest-cta {
      margin-top: 1.5rem;
    }

    .trusslab-home-page .manifest-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: center;
    }

    @media (min-width: 760px) {
      .trusslab-home-page .manifest-layout {
        grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.55fr);
        align-items: start;
      }
    }

    .trusslab-home-page .manifest-drone {
      position: relative;
      min-height: 14rem;
      overflow: hidden;
    }

    .trusslab-home-page .manifest-drone-canvas {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      cursor: default;
    }

    /* ===== FAQ ===== */

    .trusslab-home-page .faq-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.85rem;
      margin-top: 1.5rem;
    }

    @media (min-width: 760px) {
      .trusslab-home-page .faq-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }

      /* With an odd card count, stretch the trailing contact card into a full-width closer. */
      .trusslab-home-page .faq-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
      }
    }

    .trusslab-home-page .faq-card {
      display: grid;
      grid-template-columns: 1.9rem minmax(0, 1fr);
      gap: 0.35rem 0.65rem;
      align-content: start;
      padding: clamp(1.15rem, 2.5vw, 1.4rem);
      border: 1px solid var(--th-chip-border);
      background: var(--th-chip-bg);
      border-radius: 12px;
    }

    .trusslab-home-page .faq-index {
      grid-row: 1 / span 2;
      align-self: start;
      padding-top: 0.12rem;
      font-family: var(--mono);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--th-accent-fg);
    }

    .trusslab-home-page .faq-question {
      margin: 0;
      font-size: 0.98rem;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: -0.015em;
      color: var(--th-heading-fg);
    }

    .trusslab-home-page .faq-answer {
      margin: 0;
      font-size: 0.88rem;
      line-height: 1.62;
      color: var(--th-body-fg);
    }

    .trusslab-home-page .faq-answer a {
      color: var(--th-heading-fg);
      text-decoration: underline;
      text-underline-offset: 0.18em;
      transition: color 0.14s ease;
    }

    .trusslab-home-page .faq-answer a:hover {
      color: var(--th-accent-fg);
    }

    /* ===== Business reach-out ===== */

    /* Compact band: tighter vertical padding than full content sections so the
       reach-out row and the mailing-list panel below read as one closing block. */
    .trusslab-home-page #business {
      padding-top: clamp(2.5rem, 5vw, 3.5rem);
      padding-bottom: clamp(2rem, 5vw, 3rem);
    }

    /* Mirrors the mailing-list section rhythm below: same column split and gap. */
    .trusslab-home-page .business-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: center;
    }

    @media (min-width: 760px) {
      .trusslab-home-page .business-layout {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.8fr);
      }
    }

    .trusslab-home-page .business-copy h2 {
      margin: 0 0 0.5rem;
      font-size: clamp(1.2rem, 2vw, 1.5rem);
    }

    .trusslab-home-page .business-copy p {
      max-width: 34rem;
      margin: 0 0 0.85rem;
      font-size: 0.94rem;
      line-height: 1.65;
      color: var(--th-body-fg);
    }

    .trusslab-home-page .business-email {
      font-size: 0.88rem;
    }

    .trusslab-home-page .business-email a {
      color: var(--th-heading-fg);
      text-decoration: underline;
      text-underline-offset: 0.18em;
      transition: color 0.14s ease;
    }

    .trusslab-home-page .business-email a:hover {
      color: var(--th-accent-fg);
    }

    .trusslab-home-page .business-qr-card {
      display: grid;
      justify-items: center;
      justify-self: center;
      gap: 0.7rem;
      padding: 1.15rem 1.15rem 1rem;
      border: 1px solid var(--th-chip-border);
      background: var(--th-chip-bg);
      border-radius: 12px;
    }

    .trusslab-home-page .business-qr-image {
      display: block;
      width: 180px;
      height: 180px;
      border-radius: 8px;
      /* QR codes need a light quiet zone to scan reliably on the dark theme. */
      background: #fff;
      padding: 0.5rem;
      box-sizing: content-box;
    }

    .trusslab-home-page .business-qr-caption {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--th-accent-fg);
    }

    /* ===== Mailing list controls ===== */

    .trusslab-home-page .subscribe-form {
      display: grid;
      gap: 0.75rem;
    }

    .trusslab-home-page .subscribe-row {
      display: flex;
      align-items: stretch;
      gap: 0.55rem;
    }

    .trusslab-home-page .subscribe-control {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      padding: 0 0.6rem;
      border: 1px solid var(--th-chip-border);
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    html[data-sidebar-theme="light"] .trusslab-home-page .subscribe-control {
      background: rgba(255, 255, 255, 0.58);
    }

    .trusslab-home-page .subscribe-row .btn {
      flex: none;
      align-self: stretch;
    }

    .trusslab-home-page .subscribe-input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      padding: 0.55rem 0;
      background: transparent;
      color: var(--th-heading-fg);
      font: inherit;
      font-size: 0.92rem;
    }

    .trusslab-home-page .subscribe-input::placeholder {
      color: var(--th-muted-fg);
      font-style: italic;
    }

    .trusslab-home-page .subscribe-note {
      margin: 0;
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      line-height: 1.45;
      color: var(--th-muted-fg);
    }

    .trusslab-home-page .subscribe-note.is-success {
      color: var(--th-accent-fg);
    }

    .trusslab-home-page .subscribe-success {
      animation: subscribe-success-in 0.35s ease;
    }

    .trusslab-home-page .subscribe-success-heading {
      margin: 0 0 0.65rem;
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      color: var(--th-heading-fg);
    }

    .trusslab-home-page .subscribe-success-copy {
      margin: 0;
      max-width: 38rem;
    }

    @keyframes subscribe-success-in {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .trusslab-home-page .subscribe-note.is-error {
      color: rgba(255, 120, 120, 0.92);
    }

    html[data-sidebar-theme="light"] .trusslab-home-page .subscribe-note.is-error {
      color: rgb(176, 52, 52);
    }

    @media (max-width: 560px) {
      .trusslab-home-page .subscribe-row {
        flex-direction: column;
      }

      .trusslab-home-page .subscribe-row .btn {
        justify-content: center;
      }
    }

    /* ===== Footer ===== */

    .trusslab-home-page footer {
      position: relative;
      overflow: hidden;
      margin-top: clamp(1rem, 3vw, 2rem);
      padding: clamp(7.5rem, 14vw, 10rem) clamp(1.25rem, 5vw, 4rem) 2.5rem;
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.06em;
      color: var(--th-muted-fg);
      background: linear-gradient(180deg, transparent, #060d17 42%);
    }

    html[data-sidebar-theme="light"] .trusslab-home-page footer {
      background: linear-gradient(180deg, transparent, #e6ecf3 48%);
    }

    /*
     * Synthwave-style perspective floor grid. A wide plane is tilted back from
     * its bottom edge so verticals converge toward a horizon near the top; the
     * horizontal lines scroll forward for a "moving grid" effect.
     */
    .trusslab-home-page .footer-grid {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: clamp(11rem, 30vw, 17rem);
      pointer-events: none;
      overflow: hidden;
      perspective: 280px;
      perspective-origin: 50% -8%;
    }

    .trusslab-home-page .footer-grid__plane {
      position: absolute;
      left: -75%;
      right: -75%;
      bottom: 0;
      height: 240%;
      background-image:
        linear-gradient(90deg, var(--th-grid-major) 1px, transparent 1px),
        linear-gradient(0deg, var(--th-grid-major) 1px, transparent 1px);
      background-size: 64px 64px, 64px 64px;
      transform: rotateX(80deg);
      transform-origin: 50% 100%;
      mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.5) 44%, transparent 94%);
    }

    .trusslab-home-page .footer-grid::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 38%;
      pointer-events: none;
      background: linear-gradient(
        to top,
        rgba(var(--tl-accent-rgb, 99, 163, 255), 0.12),
        transparent
      );
    }

    @media (prefers-reduced-motion: no-preference) {
      .trusslab-home-page .footer-grid__plane {
        animation: footer-grid-scroll 4s linear infinite;
      }
    }

    @keyframes footer-grid-scroll {
      from { background-position: 0 0, 0 0; }
      to { background-position: 0 0, 0 64px; }
    }

    .trusslab-home-page .footer-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .trusslab-home-page footer .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 1.4rem;
    }

    .trusslab-home-page footer .footer-links a {
      color: var(--th-muted-fg);
      cursor: pointer;
      transition: color 0.14s ease;
    }

    .trusslab-home-page footer .footer-links a:hover {
      color: var(--th-heading-fg);
    }

    .trusslab-home-page footer .footer-links__cta {
      text-decoration: underline;
      text-underline-offset: 0.18em;
    }

    .trusslab-home-page footer .footer-links__cta:hover {
      color: var(--th-heading-fg);
    }

/* src/js/siteEssay.css */
.trusslab-essay-page {
      --mono: Arial, Helvetica, sans-serif;
      --th-bg-glow: radial-gradient(
        ellipse 80% 55% at 18% 6%,
        rgba(var(--tl-accent-rgb, 99, 163, 255), 0.16),
        transparent 62%
      );
      --th-bg-gradient: linear-gradient(180deg, #0f1623 0%, #0a111c 52%, #060d17 100%);
      --th-heading-fg: rgba(255, 255, 255, 0.97);
      --th-accent-fg: var(--tl-accent-light, rgb(130, 185, 255));
      --th-body-fg: rgba(255, 255, 255, 0.62);
      --th-muted-fg: rgba(255, 255, 255, 0.4);
      --th-eyebrow-fg: rgba(var(--tl-accent-muted-text-rgb, 199, 223, 247), 0.82);
      --th-divider: rgba(255, 255, 255, 0.08);
      --th-chip-border: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.22);
      --th-chip-bg: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.06);
      --th-grid-major: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.05);
      --th-card-bg: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.06);
      --th-card-border: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.22);

      display: block;
      box-sizing: border-box;
      height: 100%;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      background:
        var(--th-bg-glow),
        var(--th-bg-gradient);
      color: var(--fs-fg, rgba(255, 255, 255, 0.88));
      font-family: inherit;
      color-scheme: var(--fs-color-scheme, dark);
      scroll-behavior: smooth;
    }

    html[data-sidebar-theme="light"] .trusslab-essay-page {
      --th-bg-glow:
        radial-gradient(ellipse 72% 52% at 12% 4%, rgba(var(--tl-accent-rgb, 99, 163, 255), 0.12), transparent 58%);
      --th-bg-gradient: linear-gradient(160deg, #f7f9fc 0%, #eef3f9 48%, #e6ecf3 100%);
      --th-heading-fg: var(--fs-fg-heading, #111827);
      --th-accent-fg: var(--fs-active-fg, rgb(52, 108, 166));
      --th-body-fg: rgba(17, 24, 39, 0.66);
      --th-muted-fg: rgba(17, 24, 39, 0.5);
      --th-eyebrow-fg: var(--fs-active-fg, rgb(52, 108, 166));
      --th-divider: rgba(17, 24, 39, 0.12);
      --th-chip-border: rgba(76, 130, 208, 0.28);
      --th-chip-bg: rgba(76, 130, 208, 0.08);
      --th-grid-major: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.08);
      --th-card-bg: rgba(76, 130, 208, 0.08);
      --th-card-border: rgba(76, 130, 208, 0.28);
    }

    .trusslab-essay-page a, .trusslab-essay-page button {
      font: inherit;
    }

    .trusslab-essay-page .wrap {
      max-width: 73rem;
      margin: 0 auto;
    }

    .trusslab-essay-page .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding: 1rem clamp(1.25rem, 5vw, 4rem);
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .trusslab-essay-page .topbar.scrolled {
      background: #070d15;
      border-bottom-color: var(--th-divider);
    }

    html[data-sidebar-theme="light"] .trusslab-essay-page .topbar.scrolled {
      background: #f7f9fc;
    }

    .trusslab-essay-page .brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--th-heading-fg);
      cursor: pointer;
      font-weight: 500;
    }

    .trusslab-essay-page .brand-logo {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      cursor: pointer;
    }

    .trusslab-essay-page .brand-canvas {
      display: block;
      width: 32px;
      height: 32px;
      cursor: pointer;
    }

    .trusslab-essay-page .brand-text {
      font-size: 1rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.01em;
      white-space: nowrap;
      cursor: pointer;
    }

    .trusslab-essay-page .nav-links {
      display: flex;
      align-items: center;
      gap: 1.6rem;
      margin-left: auto;
      font-size: 1rem;
    }

    .trusslab-essay-page .nav-links a {
      color: #ffffff;
      cursor: pointer;
      transition: color 0.14s ease;
    }

    .trusslab-essay-page .nav-links a:hover {
      color: var(--th-accent-fg);
    }

    @media (max-width: 760px) {
      .trusslab-essay-page .nav-links .nav-anchor {
        display: none;
      }
    }

    .trusslab-essay-page .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.48rem 0.95rem;
      border-radius: 7px;
      font-size: 0.84rem;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid transparent;
      transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
      white-space: nowrap;
    }

    .trusslab-essay-page .btn:active {
      transform: translateY(1px);
    }

    .trusslab-essay-page .btn-primary {
      background: #3f6aa6;
      color: rgba(255, 255, 255, 0.96);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    .trusslab-essay-page .btn-primary:hover {
      background: #4a78b8;
    }

    .trusslab-essay-page .btn-ghost {
      background: rgba(255, 255, 255, 0.06);
      color: var(--th-heading-fg);
      border-color: rgba(255, 255, 255, 0.28);
    }

    .trusslab-essay-page .btn-ghost:hover {
      border-color: rgba(255, 255, 255, 0.45);
      background: rgba(255, 255, 255, 0.1);
    }

    .trusslab-essay-page .btn-arrow {
      font-family: var(--mono);
      font-size: 0.95em;
    }

    .trusslab-essay-page .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 1rem;
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--th-eyebrow-fg);
    }

    .trusslab-essay-page .eyebrow::before {
      content: '';
      width: 1.6rem;
      height: 1px;
      background: rgba(var(--tl-accent-rgb, 99, 163, 255), 0.6);
    }

    .trusslab-essay-page .essay-section, .trusslab-essay-page .subscribe-section {
      position: relative;
      z-index: 1;
      overflow: hidden;
    }

    .trusslab-essay-page .essay-section {
      padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4rem)
        clamp(2rem, 5vw, 3rem);
    }

    .trusslab-essay-page .subscribe-section {
      padding-bottom: clamp(2rem, 5vw, 3rem);
    }

    .trusslab-essay-page .network-canvas {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: block;
      width: 100%;
      height: 100%;
      cursor: default;
    }

    .trusslab-essay-page .essay-network-canvas, .trusslab-essay-page .subscribe-network-canvas {
      --network-mask-half: 23rem;
      mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(50% - min(var(--network-mask-half), 50%)),
        transparent calc(50% - min(var(--network-mask-half), 50%)),
        transparent calc(50% + min(var(--network-mask-half), 50%)),
        #000 calc(50% + min(var(--network-mask-half), 50%)),
        #000 100%
      );
      -webkit-mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(50% - min(var(--network-mask-half), 50%)),
        transparent calc(50% - min(var(--network-mask-half), 50%)),
        transparent calc(50% + min(var(--network-mask-half), 50%)),
        #000 calc(50% + min(var(--network-mask-half), 50%)),
        #000 100%
      );
    }

    .trusslab-essay-page .subscribe-network-canvas {
      --network-mask-half: 36.5rem;
    }

    .trusslab-essay-page .essay-section > .wrap, .trusslab-essay-page .subscribe-section > .wrap {
      position: relative;
      z-index: 1;
      pointer-events: none;
    }

    .trusslab-essay-page .essay-section article {
      position: relative;
      z-index: 1;
      max-width: 46rem;
      margin: 0 auto;
      padding: 0;
      pointer-events: auto;
    }

    .trusslab-essay-page .subscribe-section .subscribe-panel {
      position: relative;
      z-index: 1;
      width: 100%;
      margin: 0 auto;
      padding: clamp(1.25rem, 2.6vw, 2rem);
      pointer-events: auto;
    }

    .trusslab-essay-page h1 {
      margin: 0 0 1rem;
      color: var(--th-heading-fg);
      font-size: clamp(2.1rem, 5vw, 3.4rem);
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: -0.035em;
    }

    .trusslab-essay-page .dek {
      margin: 0 0 0.9rem;
      color: var(--th-body-fg);
      font-size: 1.08rem;
      line-height: 1.65;
      font-style: italic;
    }

    .trusslab-essay-page .byline {
      margin: 0 0 2.5rem;
      color: var(--th-muted-fg);
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .trusslab-essay-page .essay-block {
      padding-top: 0.5rem;
    }

    .trusslab-essay-page .essay-block h2 {
      margin: 3rem 0 1rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--th-divider);
      color: var(--th-heading-fg);
      font-size: clamp(1.35rem, 2.6vw, 1.8rem);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .trusslab-essay-page .essay-block p {
      margin: 1.15rem 0 0;
      color: var(--th-body-fg);
      font-size: 1.02rem;
      line-height: 1.78;
    }

    .trusslab-essay-page .essay-block p a {
      color: var(--th-accent-fg);
      text-decoration: underline;
      text-underline-offset: 0.16em;
      text-decoration-thickness: 1px;
    }

    .trusslab-essay-page .essay-block p a:hover {
      color: var(--th-heading-fg);
    }

    .trusslab-essay-page .pull-quote {
      margin: 2.4rem 0;
      padding: 1.2rem 1.35rem;
      border: 1px solid var(--th-card-border);
      border-radius: 12px;
      background: var(--th-card-bg);
      color: var(--th-accent-fg);
      font-family: var(--mono);
      font-size: 0.82rem;
      line-height: 1.55;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .trusslab-essay-page .subscribe-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: center;
    }

    @media (min-width: 760px) {
      .trusslab-essay-page .subscribe-layout {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.8fr);
      }
    }

    .trusslab-essay-page .subscribe-inner h2 {
      margin: 0 0 0.5rem;
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      color: var(--th-heading-fg);
    }

    .trusslab-essay-page .subscribe-copy {
      margin: 0 0 1rem;
      color: var(--th-body-fg);
      line-height: 1.65;
      font-size: 1rem;
      max-width: 38rem;
    }

    .trusslab-essay-page .subscribe-form {
      display: grid;
      gap: 0.75rem;
    }

    .trusslab-essay-page .subscribe-row {
      display: flex;
      align-items: stretch;
      gap: 0.55rem;
    }

    .trusslab-essay-page .subscribe-control {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      padding: 0 0.6rem;
      border: 1px solid var(--th-chip-border);
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    html[data-sidebar-theme="light"] .trusslab-essay-page .subscribe-control {
      background: rgba(255, 255, 255, 0.58);
    }

    .trusslab-essay-page .subscribe-input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      padding: 0.55rem 0;
      background: transparent;
      color: var(--th-heading-fg);
      font: inherit;
      font-size: 0.92rem;
    }

    .trusslab-essay-page .subscribe-input::placeholder {
      color: var(--th-muted-fg);
      font-style: italic;
    }

    .trusslab-essay-page .subscribe-note {
      margin: 0;
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      line-height: 1.45;
      color: var(--th-muted-fg);
    }

    .trusslab-essay-page .subscribe-note.is-success {
      color: var(--th-accent-fg);
    }

    .trusslab-essay-page .subscribe-success {
      animation: subscribe-success-in 0.35s ease;
    }

    .trusslab-essay-page .subscribe-success-heading {
      margin: 0 0 0.65rem;
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      color: var(--th-heading-fg);
    }

    .trusslab-essay-page .subscribe-success-copy {
      margin: 0;
      max-width: 38rem;
    }

    @keyframes subscribe-success-in {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .trusslab-essay-page .subscribe-note.is-error {
      color: rgba(255, 120, 120, 0.92);
    }

    html[data-sidebar-theme="light"] .trusslab-essay-page .subscribe-note.is-error {
      color: rgb(176, 52, 52);
    }

    .trusslab-essay-page .subscribe-logo {
      position: relative;
      min-height: 11rem;
      overflow: hidden;
    }

    .trusslab-essay-page .subscribe-logo-canvas {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
    }

    @media (max-width: 560px) {
      .trusslab-essay-page .subscribe-row {
        flex-direction: column;
      }

      .trusslab-essay-page .subscribe-row .btn {
        justify-content: center;
      }
    }

    .trusslab-essay-page footer {
      position: relative;
      overflow: hidden;
      margin-top: clamp(1rem, 3vw, 2rem);
      padding: clamp(7.5rem, 14vw, 10rem) clamp(1.25rem, 5vw, 4rem) 2.5rem;
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.06em;
      color: var(--th-muted-fg);
      background: linear-gradient(180deg, transparent, #060d17 42%);
    }

    html[data-sidebar-theme="light"] .trusslab-essay-page footer {
      background: linear-gradient(180deg, transparent, #e6ecf3 48%);
    }

    .trusslab-essay-page .footer-grid {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: clamp(11rem, 30vw, 17rem);
      pointer-events: none;
      overflow: hidden;
      perspective: 280px;
      perspective-origin: 50% -8%;
    }

    .trusslab-essay-page .footer-grid__plane {
      position: absolute;
      left: -75%;
      right: -75%;
      bottom: 0;
      height: 240%;
      background-image:
        linear-gradient(90deg, var(--th-grid-major) 1px, transparent 1px),
        linear-gradient(0deg, var(--th-grid-major) 1px, transparent 1px);
      background-size: 64px 64px, 64px 64px;
      transform: rotateX(80deg);
      transform-origin: 50% 100%;
      mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.5) 44%, transparent 94%);
    }

    .trusslab-essay-page .footer-grid::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 38%;
      pointer-events: none;
      background: linear-gradient(
        to top,
        rgba(var(--tl-accent-rgb, 99, 163, 255), 0.12),
        transparent
      );
    }

    @media (prefers-reduced-motion: no-preference) {
      .trusslab-essay-page .footer-grid__plane {
        animation: footer-grid-scroll 4s linear infinite;
      }
    }

    @keyframes footer-grid-scroll {
      from { background-position: 0 0, 0 0; }
      to { background-position: 0 0, 0 64px; }
    }

    .trusslab-essay-page .footer-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .trusslab-essay-page footer .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 1.4rem;
    }

    .trusslab-essay-page footer .footer-links a {
      color: var(--th-muted-fg);
      cursor: pointer;
      transition: color 0.14s ease;
    }

    .trusslab-essay-page footer .footer-links a:hover {
      color: var(--th-heading-fg);
    }

    .trusslab-essay-page footer .footer-links__cta {
      text-decoration: underline;
      text-underline-offset: 0.18em;
    }

    .trusslab-essay-page footer .footer-links__cta:hover {
      color: var(--th-heading-fg);
    }