:root {
  --hie-space-hair: 2px;
  --hie-space-xs: 4px;
  --hie-space-sm: 6px;
  --hie-space-md: 8px;
  --hie-space-lg: 12px;
  --hie-space-xl: 16px;
  --hie-space-xxl: 24px;
  --hie-space-huge: 32px;
  --hie-radius-sm: 6px;
  --hie-radius-md: 10px;
  --hie-radius-lg: 14px;
  --hie-radius-xl: 18px;
  --hie-radius-pill: 999px;
  --hie-control-height-xs: 26px;
  --hie-control-height-sm: 32px;
  --hie-control-height-md: 40px;
  --hie-control-padding-xs: 6px;
  --hie-control-padding-sm: 12px;
  --hie-control-padding-md: 16px;
  --hie-type-micro-size: 10px;
  --hie-type-micro-weight: 600;
  --hie-type-micro-leading: 1.2;
  --hie-type-micro-tracking: 0.08em;
  --hie-type-small-size: 11px;
  --hie-type-small-weight: 500;
  --hie-type-small-leading: 1.35;
  --hie-type-small-tracking: 0;
  --hie-type-label-size: 13px;
  --hie-type-label-weight: 650;
  --hie-type-label-leading: 1.2;
  --hie-type-label-tracking: 0;
  --hie-type-body-size: 13px;
  --hie-type-body-weight: 450;
  --hie-type-body-leading: 1.55;
  --hie-type-body-tracking: 0;
  --hie-type-title-size: 15px;
  --hie-type-title-weight: 680;
  --hie-type-title-leading: 1.3;
  --hie-type-title-tracking: -0.01em;
  --hie-type-display-size: 26px;
  --hie-type-display-weight: 700;
  --hie-type-display-leading: 1;
  --hie-type-display-tracking: -0.02em;
  --hie-color-surface: rgba(14,18,27,0.74);
  --hie-color-surface-raised: rgba(255,255,255,0.03);
  --hie-color-surface-hover: rgba(255,255,255,0.08);
  --hie-color-surface-solid: #0f1118;
  --hie-color-surface-solid-raised: #40485e;
  --hie-color-hub-solid: #0a0c12;
  --hie-color-border: rgba(255,255,255,0.09);
  --hie-color-border-strong: rgba(255,255,255,0.16);
  --hie-color-ink: #e6ebf5;
  --hie-color-ink-soft: rgba(232,234,240,0.68);
  --hie-color-ink-dim: #8b95a7;
  --hie-color-accent: #7cf3ff;
  --hie-color-accent-ink: #08131a;
  --hie-color-selection: #9b8cff;
  --hie-color-selection-ink: #111326;
  --hie-color-authoring: #6957e8;
  --hie-color-measure: #ff6f9f;
  --hie-color-danger: #ff8a9c;
  --hie-color-positive: #8affc1;
  --hie-color-warning: #ffd166;
  --hie-color-info: #7aa5ff;
  --hie-color-chrome-background: #0b0e14;
  --hie-color-chrome-background-soft: #10141d;
  --hie-color-chrome-panel: #131824;
  --hie-color-chrome-panel-raised: #1a2130;
  --hie-color-chrome-input: #0d1119;
  --hie-color-chrome-border: #232c3f;
  --hie-color-chrome-workbench: #0c1018;
  --hie-color-chrome-splitter: #0b0f16;
  --hie-color-chrome-placeholder: #5a6478;
  --hie-color-canvas-workspace: #e7e7e7;
  --hie-color-canvas-artboard: #ffffff;
  --hie-color-canvas-artboard-border: #aeb3bb;
  --hie-color-canvas-artboard-label: #454a52;
  --hie-color-canvas-layout-accent: #1687e8;
  --hie-color-canvas-header: #171a20;
  --hie-color-canvas-panel: #181b21;
  --hie-color-canvas-border: #292d35;
  --hie-color-canvas-divider: #ffffff12;
  --hie-color-canvas-ink: #f4f4f2;
  --hie-color-canvas-ink-muted: #a2a7b0;
  --hie-elevation-island-background: rgba(14,18,27,0.74);
  --hie-elevation-island-border: 1px solid rgba(255,255,255,0.09);
  --hie-elevation-island-backdrop-filter: blur(20px) saturate(1.35);
  --hie-elevation-island-webkit-backdrop-filter: blur(20px) saturate(1.35);
  --hie-elevation-island-box-shadow: 0 16px 46px -14px rgba(0,0,0,0.75), inset 0 0 0 0.5px rgba(255,255,255,0.04);
  --hie-elevation-raised-box-shadow: 0 12px 30px -8px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.45);
  --hie-motion-ease: cubic-bezier(.2,.8,.2,1);
  --hie-motion-fast: .12s;
  --hie-motion-base: .18s;
  --hie-motion-slow: .28s;
  --hie-font-sans: HieBoard, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hie-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --hie-focus-ring: 2px solid #7cf3ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hie-color-surface: rgba(14,18,27,0.74);
    --hie-color-surface-raised: rgba(255,255,255,0.03);
    --hie-color-surface-hover: rgba(255,255,255,0.08);
    --hie-color-surface-solid: #0f1118;
    --hie-color-surface-solid-raised: #40485e;
    --hie-color-hub-solid: #0a0c12;
    --hie-color-border: rgba(255,255,255,0.09);
    --hie-color-border-strong: rgba(255,255,255,0.16);
    --hie-color-ink: #e6ebf5;
    --hie-color-ink-soft: rgba(232,234,240,0.68);
    --hie-color-ink-dim: #8b95a7;
    --hie-color-accent: #9b8cff;
    --hie-color-accent-ink: #111326;
    --hie-color-selection: #9b8cff;
    --hie-color-selection-ink: #111326;
    --hie-color-measure: #ff6f9f;
    --hie-color-danger: #ff8a9c;
    --hie-color-positive: #8affc1;
    --hie-color-warning: #ffd166;
    --hie-color-info: #7aa5ff;
    --hie-color-chrome-background: #0b0e14;
    --hie-color-chrome-background-soft: #10141d;
    --hie-color-chrome-panel: #131824;
    --hie-color-chrome-panel-raised: #1a2130;
    --hie-color-chrome-input: #0d1119;
    --hie-color-chrome-border: #232c3f;
    --hie-color-chrome-workbench: #0c1018;
    --hie-color-chrome-splitter: #0b0f16;
    --hie-color-chrome-placeholder: #5a6478;
    --hie-color-canvas-workspace: #181a1f;
    --hie-color-canvas-artboard-border: #444951;
    --hie-color-canvas-artboard-label: #c9cdd4;
    --hie-color-canvas-layout-accent: #7cf3ff;
  }
}
:root[data-theme="dark"] {
  --hie-color-surface: rgba(14,18,27,0.74);
  --hie-color-surface-raised: rgba(255,255,255,0.03);
  --hie-color-surface-hover: rgba(255,255,255,0.08);
  --hie-color-surface-solid: #0f1118;
  --hie-color-surface-solid-raised: #40485e;
  --hie-color-hub-solid: #0a0c12;
  --hie-color-border: rgba(255,255,255,0.09);
  --hie-color-border-strong: rgba(255,255,255,0.16);
  --hie-color-ink: #e6ebf5;
  --hie-color-ink-soft: rgba(232,234,240,0.68);
  --hie-color-ink-dim: #8b95a7;
  --hie-color-accent: #9b8cff;
  --hie-color-accent-ink: #111326;
  --hie-color-selection: #9b8cff;
  --hie-color-selection-ink: #111326;
  --hie-color-measure: #ff6f9f;
  --hie-color-danger: #ff8a9c;
  --hie-color-positive: #8affc1;
  --hie-color-warning: #ffd166;
  --hie-color-info: #7aa5ff;
  --hie-color-chrome-background: #0b0e14;
  --hie-color-chrome-background-soft: #10141d;
  --hie-color-chrome-panel: #131824;
  --hie-color-chrome-panel-raised: #1a2130;
  --hie-color-chrome-input: #0d1119;
  --hie-color-chrome-border: #232c3f;
  --hie-color-chrome-workbench: #0c1018;
  --hie-color-chrome-splitter: #0b0f16;
  --hie-color-chrome-placeholder: #5a6478;
  --hie-color-canvas-workspace: #181a1f;
  --hie-color-canvas-artboard-border: #444951;
  --hie-color-canvas-artboard-label: #c9cdd4;
  --hie-color-canvas-layout-accent: #7cf3ff;
}
@media (prefers-color-scheme: light) {
  :root {
    --hie-color-surface: rgba(255,255,255,0.84);
    --hie-color-surface-raised: rgba(15,23,42,0.045);
    --hie-color-surface-hover: rgba(15,23,42,0.09);
    --hie-color-surface-solid: #ffffff;
    --hie-color-surface-solid-raised: #eef1f5;
    --hie-color-hub-solid: #f7f8fa;
    --hie-color-border: rgba(15,23,42,0.12);
    --hie-color-border-strong: rgba(15,23,42,0.2);
    --hie-color-ink: #171a20;
    --hie-color-ink-soft: rgba(23,26,32,0.7);
    --hie-color-ink-dim: #667085;
    --hie-color-accent: #5546d8;
    --hie-color-accent-ink: #ffffff;
    --hie-color-selection: #5546d8;
    --hie-color-selection-ink: #ffffff;
    --hie-color-measure: #c92f68;
    --hie-color-danger: #b42318;
    --hie-color-positive: #067647;
    --hie-color-warning: #8a4b08;
    --hie-color-info: #175cd3;
    --hie-color-chrome-background: #f5f6f8;
    --hie-color-chrome-background-soft: #eceff3;
    --hie-color-chrome-panel: #ffffff;
    --hie-color-chrome-panel-raised: #f2f4f7;
    --hie-color-chrome-input: #ffffff;
    --hie-color-chrome-border: #d8dce3;
    --hie-color-chrome-workbench: #ffffff;
    --hie-color-chrome-splitter: #e5e7eb;
    --hie-color-chrome-placeholder: #98a2b3;
    --hie-color-canvas-workspace: #e7e7e7;
    --hie-color-canvas-artboard-border: #aeb3bb;
    --hie-color-canvas-artboard-label: #454a52;
    --hie-color-canvas-layout-accent: #1687e8;
  }
}
:root[data-theme="light"] {
  --hie-color-surface: rgba(255,255,255,0.84);
  --hie-color-surface-raised: rgba(15,23,42,0.045);
  --hie-color-surface-hover: rgba(15,23,42,0.09);
  --hie-color-surface-solid: #ffffff;
  --hie-color-surface-solid-raised: #eef1f5;
  --hie-color-hub-solid: #f7f8fa;
  --hie-color-border: rgba(15,23,42,0.12);
  --hie-color-border-strong: rgba(15,23,42,0.2);
  --hie-color-ink: #171a20;
  --hie-color-ink-soft: rgba(23,26,32,0.7);
  --hie-color-ink-dim: #667085;
  --hie-color-accent: #5546d8;
  --hie-color-accent-ink: #ffffff;
  --hie-color-selection: #5546d8;
  --hie-color-selection-ink: #ffffff;
  --hie-color-measure: #c92f68;
  --hie-color-danger: #b42318;
  --hie-color-positive: #067647;
  --hie-color-warning: #8a4b08;
  --hie-color-info: #175cd3;
  --hie-color-chrome-background: #f5f6f8;
  --hie-color-chrome-background-soft: #eceff3;
  --hie-color-chrome-panel: #ffffff;
  --hie-color-chrome-panel-raised: #f2f4f7;
  --hie-color-chrome-input: #ffffff;
  --hie-color-chrome-border: #d8dce3;
  --hie-color-chrome-workbench: #ffffff;
  --hie-color-chrome-splitter: #e5e7eb;
  --hie-color-chrome-placeholder: #98a2b3;
  --hie-color-canvas-workspace: #e7e7e7;
  --hie-color-canvas-artboard-border: #aeb3bb;
  --hie-color-canvas-artboard-label: #454a52;
  --hie-color-canvas-layout-accent: #1687e8;
}
:root[data-theme="contrast"] {
  --hie-color-surface: #ffffff;
  --hie-color-surface-raised: #ffffff;
  --hie-color-surface-hover: #e6e6e6;
  --hie-color-surface-solid: #ffffff;
  --hie-color-surface-solid-raised: #ffffff;
  --hie-color-hub-solid: #ffffff;
  --hie-color-border: #000000;
  --hie-color-border-strong: #000000;
  --hie-color-ink: #000000;
  --hie-color-ink-soft: #000000;
  --hie-color-ink-dim: #000000;
  --hie-color-accent: #0000ee;
  --hie-color-accent-ink: #ffffff;
  --hie-color-selection: #0000ee;
  --hie-color-selection-ink: #ffffff;
  --hie-color-measure: #b00040;
  --hie-color-danger: #b00020;
  --hie-color-positive: #006400;
  --hie-color-warning: #7a3e00;
  --hie-color-info: #0000ee;
  --hie-color-chrome-background: #ffffff;
  --hie-color-chrome-background-soft: #ffffff;
  --hie-color-chrome-panel: #ffffff;
  --hie-color-chrome-panel-raised: #ffffff;
  --hie-color-chrome-input: #ffffff;
  --hie-color-chrome-border: #000000;
  --hie-color-chrome-workbench: #ffffff;
  --hie-color-chrome-splitter: #000000;
  --hie-color-chrome-placeholder: #000000;
  --hie-color-canvas-workspace: #ffffff;
  --hie-color-canvas-artboard: #ffffff;
  --hie-color-canvas-artboard-border: #000000;
  --hie-color-canvas-artboard-label: #000000;
  --hie-color-canvas-layout-accent: #0000ee;
}
@font-face {
  font-family: 'HieBoard';
  src: url('/_immutable/assets/ae7b7855e115a5966d8b1b3f80f254ccc117ec86f9965e202ee2940453837280.ttf') format('truetype');
  font-style: normal;
  /* The bundled face is DejaVu Sans Book, not a variable font. Advertising a
     fake weight range suppresses the browser's synthetic bold while the GPU
     SDF correctly emboldens it, making edit/view weight visibly disagree. */
  font-weight: 400;
  font-display: block;
}
/* The product-semantic alias layer over the --hie-* tokens above. A name binds
   to its token so no application-chrome color is frozen to one mode. */
:root {
  color-scheme: light dark;
  /* Mode-aware product aliases shared by DOM and retained surfaces. */
  --bg: var(--hie-color-chrome-background);
  --bg-soft: var(--hie-color-chrome-background-soft);
  --panel: var(--hie-color-chrome-panel);
  --panel-2: var(--hie-color-chrome-panel-raised);
  --border: var(--hie-color-chrome-border);
  /* THE accent, from the one token — the two-accent divergence is resolved. */
  --accent: var(--hie-color-accent);
  --accent-ink: var(--hie-color-accent-ink);
  --selection: var(--hie-color-selection);
  --selection-ink: var(--hie-color-selection-ink);
  --measure: var(--hie-color-measure);
  --surface: var(--hie-color-surface);
  --surface-raised: var(--hie-color-surface-raised);
  --surface-hover: var(--hie-color-surface-hover);
  --surface-border: var(--hie-color-border);
  --surface-border-strong: var(--hie-color-border-strong);
  --accent-2: var(--hie-color-info);
  --warn: var(--hie-color-warning);
  --danger: var(--hie-color-danger);
  --ok: var(--hie-color-positive);
  --text: var(--hie-color-ink);
  --muted: var(--hie-color-ink-dim);
  --node: var(--hie-color-canvas-panel);
  --node-header: var(--hie-color-canvas-header);
  /* The accent at the alphas the chrome washes with, derived from --accent so
     one token move retints every glow. */
  --accent-wash: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-wash-soft: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-wash-strong: color-mix(in srgb, var(--accent) 18%, transparent);
}
:root[data-theme='light'],:root[data-theme='contrast'] { color-scheme:light; }
:root[data-theme='dark'] { color-scheme:dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none;
  background: var(--bg); color: var(--text);
  font-family: var(--hie-font-sans); }
a { color: var(--accent-2); text-decoration: none; }
button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); padding: 7px 14px; font-size: 13px; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
button.primary:hover { filter: brightness(1.07); }
button.ghost { background: transparent; }
button.toggle.on { border-color: var(--accent); color: var(--accent); }
input, textarea { font: inherit; background: var(--hie-color-chrome-input); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 7px 10px; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
input::placeholder { color: var(--hie-color-chrome-placeholder); }
code, pre, .mono { font-family: var(--hie-font-mono); }

/* The parser-painted and live application headers share these exact rules.
   Keeping them in the document stylesheet prevents the primary chrome from
   arriving one effect after the rest of the application. */

#hie-notch-root,#hie-instant-notch { position:absolute; inset:0; z-index:42; pointer-events:none; }
.hie-workspace-notch { --notch-bg:color-mix(in srgb,var(--hie-color-chrome-background) 88%,transparent); --notch-line:var(--hie-color-border);
  position:absolute; top:calc(7px + env(safe-area-inset-top,0px)); left:50%; width:min(820px,calc(100% - 20px));
  min-height:42px; box-sizing:border-box; display:flex; align-items:center; gap:6px; padding:4px 5px; transform:translateX(-50%);
  border:1px solid var(--notch-line); border-radius:12px; color:var(--hie-color-ink); background:var(--notch-bg);
  box-shadow:0 10px 34px -24px rgba(0,0,0,.55),inset 0 1px color-mix(in srgb,var(--hie-color-ink) 3%,transparent);
  backdrop-filter:blur(18px) saturate(1.12); -webkit-backdrop-filter:blur(18px) saturate(1.12);
  pointer-events:auto; font-family:var(--hie-font-sans); }
#hie-instant-notch .hie-workspace-notch { pointer-events:none; }
.hie-workspace-notch * { box-sizing:border-box; }
.hie-notch-location { min-width:0; flex:1 1 220px; display:flex; align-items:center; gap:3px; overflow:hidden; }
.hie-notch-main { min-width:0; flex:0 1 250px; display:flex; align-items:center; justify-content:center; gap:4px; }
.hie-notch-side { min-width:0; flex:1 1 220px; display:flex; align-items:center; justify-content:flex-end; gap:2px; }
.hie-notch-brand { height:32px; display:inline-flex; flex:none; align-items:center; gap:7px; padding:0 8px 0 5px; border:0;
  border-radius:8px; color:var(--hie-color-ink); background:transparent; cursor:pointer; font:700 10.5px/1 var(--hie-font-sans); }
.hie-notch-brand:hover { background:var(--hie-color-surface-hover); }
.hie-notch-brand:focus-visible { outline:var(--hie-focus-ring); outline-offset:1px; }
.hie-notch-mark { width:21px; height:21px; display:block; flex:none; }
.hie-breadcrumb { min-width:0; height:32px; display:flex; flex:1 1 auto; align-items:center; gap:2px; overflow:hidden;
  user-select:none; font:500 11px/1.5 var(--hie-font-sans); }
.hie-breadcrumb-back { height:28px; display:inline-flex; flex:none; align-items:center; justify-content:center; gap:5px; padding:0 8px;
  border:1px solid transparent; border-radius:8px; color:var(--hie-color-ink); background:transparent; cursor:pointer;
  font:650 10.5px/1 var(--hie-font-sans); }
.hie-breadcrumb-back:hover,.hie-breadcrumb-crumb:hover { color:var(--hie-color-ink)!important; background:var(--hie-color-surface-hover)!important; }
.hie-breadcrumb-back:focus-visible,.hie-breadcrumb-crumb:focus-visible { outline:var(--hie-focus-ring); outline-offset:-1px; }
.hie-breadcrumb-path { min-width:0; display:flex; align-items:center; overflow:hidden; }
.hie-breadcrumb-step { height:28px; align-items:center; }
.hie-breadcrumb-current { min-width:0; }
.hie-notch-control { height:32px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 8px;
  border:0; border-radius:8px; color:var(--hie-color-ink-dim); background:transparent; white-space:nowrap; cursor:pointer;
  font:625 10.5px/1 var(--hie-font-sans); }
.hie-notch-control > svg { display:block; flex:none; }
.hie-notch-control:hover,.hie-notch-control[aria-expanded='true'] { color:var(--hie-color-ink); background:var(--hie-color-surface-hover); }
.hie-notch-control:focus-visible { outline:var(--hie-focus-ring); outline-offset:1px; }
.hie-notch-control.mode { color:var(--hie-color-accent); background:color-mix(in srgb,var(--hie-color-accent) 13%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hie-color-accent) 20%,transparent); }
.hie-notch-control.mode:hover { color:var(--hie-color-ink); background:color-mix(in srgb,var(--hie-color-accent) 20%,transparent); }
.hie-notch-control.commands { min-width:172px; flex:1; justify-content:flex-start; color:var(--hie-color-ink-dim); background:var(--hie-color-surface-raised);
  box-shadow:inset 0 0 0 1px var(--hie-color-border); }
.hie-notch-control.commands:hover { color:var(--hie-color-ink); background:var(--hie-color-surface-hover); }
.hie-notch-control.commands kbd { margin-left:auto; }
.hie-notch-more { position:relative; display:inline-flex; width:32px; padding:0; }
.hie-notch-menu-attention { position:absolute; right:5px; top:5px; width:5px; height:5px; border-radius:50%;
  background:var(--hie-color-positive); box-shadow:0 0 0 2px var(--notch-bg); }
.hie-notch-control kbd { min-width:24px; padding:2px 5px; border:1px solid var(--hie-color-border); border-radius:5px;
  color:var(--hie-color-ink-dim); background:var(--hie-color-surface-raised); font:600 8px/1.2 var(--hie-font-mono); }
.hie-notch-dot { width:7px; height:7px; border-radius:50%; background:var(--hie-color-ink-dim); }
.hie-notch-dot.live { background:var(--hie-color-positive); box-shadow:0 0 0 3px color-mix(in srgb,var(--hie-color-positive) 10%,transparent); }
.hie-notch-count { min-width:16px; height:16px; display:grid; place-items:center; padding:0 4px; border-radius:999px;
  color:var(--hie-color-accent-ink); background:var(--hie-color-accent); font-size:8px; font-weight:850; }
.hie-instant-team { position:relative; width:15px; height:15px; flex:none; }
.hie-instant-share-icon { position:relative; width:18px; height:18px; display:grid; place-items:center; flex:none; }
.hie-instant-share-icon > .hie-notch-dot { position:absolute; right:-1px; bottom:-1px; width:5px; height:5px;
  box-shadow:0 0 0 2px var(--notch-bg); }
.hie-instant-team::before,.hie-instant-team::after { content:''; position:absolute; border:1.4px solid currentColor; border-radius:50%; }
.hie-instant-team::before { left:1px; top:1px; width:5px; height:5px; box-shadow:7px 2px 0 -1px var(--notch-bg),7px 2px 0 0 currentColor; }
.hie-instant-team::after { left:0; bottom:0; width:9px; height:5px; border-bottom:0; border-radius:7px 7px 0 0; box-shadow:6px 0 0 -1.4px var(--notch-bg),7px 0 0 0 currentColor; }
.hie-notch-popover { position:absolute; top:calc(100% + 8px); right:6px; width:min(340px,calc(100vw - 20px)); pointer-events:auto; }
.hie-notch-popover .hie-activity { position:relative; inset:auto; width:100%; max-height:min(520px,calc(100dvh - 82px)); }
.hie-notch-popover.privacy { width:auto; }
.hie-license-card,.hie-notch-more-menu,.hie-appearance-card,.hie-companion-card { padding:12px; overflow:hidden; border:1px solid var(--hie-color-border); border-radius:14px;
  color:var(--hie-color-ink); background:color-mix(in srgb,var(--hie-color-surface-solid) 96%,transparent); box-shadow:0 22px 60px -28px rgba(0,0,0,.72);
  backdrop-filter:blur(22px) saturate(1.2); -webkit-backdrop-filter:blur(22px) saturate(1.2); }
.hie-license-card { width:min(310px,calc(100vw - 20px)); }
.hie-companion-card { position:absolute; top:calc(100% + 8px); right:6px; width:min(390px,calc(100vw - 20px)); pointer-events:auto; }
.hie-companion-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hie-companion-heading > div > span { display:block; color:var(--hie-color-ink-dim); font-size:9px; font-weight:720; letter-spacing:.04em; text-transform:uppercase; }
.hie-companion-heading strong { display:block; margin-top:3px; font-size:14px; }
.hie-companion-status { padding:4px 7px; border:1px solid var(--hie-color-border); border-radius:999px; color:var(--hie-color-ink-dim); background:var(--hie-color-surface-raised); font-size:8.5px; font-weight:700; text-transform:capitalize; }
.hie-companion-status.ready { color:var(--hie-color-positive); border-color:color-mix(in srgb,var(--hie-color-positive) 25%,transparent); }
.hie-companion-card p { margin:11px 0; color:var(--hie-color-ink-soft); font-size:10px; line-height:1.45; }
.hie-companion-card p code,.hie-companion-card li code { color:var(--hie-color-ink); font:600 9px/1.3 var(--hie-font-mono); }
.hie-companion-card textarea { width:100%; min-height:76px; resize:vertical; padding:8px; border:1px solid var(--hie-color-border); border-radius:9px; color:var(--hie-color-ink); background:var(--hie-color-surface-raised); font:500 9px/1.4 var(--hie-font-mono); }
.hie-companion-card > button,.hie-companion-actions button { min-height:30px; margin-top:8px; padding:0 10px; border:1px solid color-mix(in srgb,var(--hie-color-accent) 55%,var(--hie-color-border)); border-radius:8px; color:var(--hie-color-accent-ink); background:var(--hie-color-accent); cursor:pointer; font:700 9.5px/1 var(--hie-font-sans); }
.hie-companion-card button.secondary { color:var(--hie-color-ink-soft); border-color:var(--hie-color-border); background:var(--hie-color-surface-raised); }
.hie-companion-card button:disabled { opacity:.55; cursor:wait; }
.hie-companion-card > small { display:block; margin-top:7px; color:var(--hie-color-ink-dim); font-size:8.5px; line-height:1.4; }
.hie-companion-card > small[role='alert'] { color:var(--hie-color-danger); }
.hie-companion-sas { display:block; padding:13px; border:1px solid var(--hie-color-border); border-radius:10px; color:var(--hie-color-ink); background:var(--hie-color-surface-raised); text-align:center; font:750 24px/1 var(--hie-font-mono); letter-spacing:.12em; }
.hie-companion-actions { display:flex; gap:6px; }
.hie-companion-card ul { max-height:150px; margin:10px 0; padding:7px 7px 7px 25px; overflow:auto; border:1px solid var(--hie-color-border); border-radius:9px; color:var(--hie-color-ink-soft); background:var(--hie-color-surface-raised); font-size:9px; line-height:1.7; }
.hie-license-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hie-license-card-heading > div > span { display:block; color:var(--hie-color-ink-dim); font-size:10px; font-weight:720; letter-spacing:.04em; text-transform:uppercase; }
.hie-license-card-heading strong { display:block; margin-top:3px; color:var(--hie-color-ink); font-size:22px; line-height:1; letter-spacing:-.04em; }
.hie-license-card-heading small { color:var(--hie-color-ink-dim); font-size:10px; font-weight:620; letter-spacing:0; }
.hie-license-status { padding:4px 7px; border:1px solid var(--hie-color-border); border-radius:999px; color:var(--hie-color-ink-dim);
  background:var(--hie-color-surface-raised); font-size:8.5px; font-weight:700; }
.hie-license-status.active { color:var(--hie-color-positive); border-color:color-mix(in srgb,var(--hie-color-positive) 24%,transparent); background:color-mix(in srgb,var(--hie-color-positive) 8%,transparent); }
.hie-license-card p { margin:11px 0; color:var(--hie-color-ink-soft); font-size:10px; line-height:1.45; }
.hie-license-purchase { width:100%; height:34px; border:0; border-radius:9px; color:var(--hie-color-accent-ink); background:var(--hie-color-accent); cursor:pointer;
  font:760 10.5px/1 var(--hie-font-sans); }
.hie-license-purchase:hover { background:color-mix(in srgb,var(--hie-color-accent) 84%,var(--hie-color-ink)); }
.hie-license-purchase:focus-visible { outline:var(--hie-focus-ring); outline-offset:2px; }
.hie-license-ready { padding:9px; border:1px solid color-mix(in srgb,var(--hie-color-positive) 18%,transparent); border-radius:9px; color:var(--hie-color-positive);
  background:color-mix(in srgb,var(--hie-color-positive) 6%,transparent); font-size:9.5px; line-height:1.4; }
.hie-license-activation { display:grid; gap:8px; }
.hie-license-activation > label { color:var(--hie-color-ink-soft); font-size:9.5px; font-weight:700; }
.hie-license-activation > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
.hie-license-activation input { min-width:0; height:34px; padding:0 9px; border:1px solid var(--hie-color-border); border-radius:9px; color:var(--hie-color-ink); background:var(--hie-color-surface-raised); font:10px/1 var(--hie-font-mono); }
.hie-license-activation button { min-width:76px; border:0; border-radius:9px; color:var(--hie-color-accent-ink); background:var(--hie-color-accent); cursor:pointer; font:730 10px/1 var(--hie-font-sans); }
.hie-license-activation button:disabled { opacity:.52; cursor:default; }
.hie-license-activation > small { color:var(--hie-color-danger); font-size:9px; line-height:1.35; }
.hie-license-activation > a { color:var(--hie-color-ink-soft); font-size:9px; text-decoration:none; }
.hie-license-activation > a:hover { color:var(--hie-color-ink); }
.hie-license-activation input:focus-visible,.hie-license-activation button:focus-visible,.hie-license-activation > a:focus-visible { outline:var(--hie-focus-ring); outline-offset:2px; }
.hie-notch-more-menu { width:230px; padding:5px; }
.hie-notch-more-menu > button { width:100%; min-height:38px; display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:8px;
  padding:0 9px; border:0; border-radius:9px; color:var(--hie-color-ink-soft); background:transparent; cursor:pointer; text-align:left;
  font:640 10.5px/1.2 var(--hie-font-sans); }
.hie-notch-more-menu > button:hover { color:var(--hie-color-ink); background:var(--hie-color-surface-hover); }
.hie-notch-more-menu > button:focus-visible { outline:var(--hie-focus-ring); outline-offset:-1px; }
.hie-notch-more-menu > button > svg,.hie-notch-more-menu > button > .hie-notch-dot { justify-self:center; }
.hie-notch-more-menu small { color:var(--hie-color-ink-dim); font-size:8.5px; }
.hie-appearance-card { position:absolute; top:calc(100% + 8px); right:6px; width:min(360px,calc(100vw - 20px)); pointer-events:auto; }
.hie-appearance-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:13px; }
.hie-appearance-heading strong { font-size:13px; }
.hie-appearance-heading small,.hie-appearance-card fieldset > legend,.hie-appearance-toggle small,.hie-appearance-cursor-options small { color:var(--hie-color-ink-dim); font-size:9px; line-height:1.4; }
.hie-appearance-card fieldset { min-width:0; margin:0 0 13px; padding:0; border:0; }
.hie-appearance-card fieldset > legend { margin-bottom:6px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.hie-appearance-segments { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; padding:3px; border:1px solid var(--hie-color-border); border-radius:10px; background:var(--hie-color-surface-raised); }
.hie-appearance-segments button { min-width:0; height:30px; padding:0 6px; border:0; border-radius:7px; color:var(--hie-color-ink-dim); background:transparent; font-size:9.5px; }
.hie-appearance-segments button[aria-pressed='true'] { color:var(--hie-color-accent-ink); background:var(--hie-color-accent); box-shadow:0 1px 5px rgba(0,0,0,.18); }
.hie-appearance-cursor-options { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.hie-appearance-cursor-options button { min-width:0; min-height:68px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:9px; border:1px solid var(--hie-color-border); border-radius:10px; color:var(--hie-color-ink); background:var(--hie-color-surface-raised); text-align:left; }
.hie-appearance-cursor-options button[aria-pressed='true'] { border-color:var(--hie-color-accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hie-color-accent) 45%,transparent); }
.hie-appearance-cursor-options button > span { font-size:10.5px; font-weight:700; }
.hie-appearance-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:11px; border-top:1px solid var(--hie-color-border); cursor:pointer; }
.hie-appearance-toggle > span { display:flex; min-width:0; flex-direction:column; gap:3px; }
.hie-appearance-toggle strong { font-size:10.5px; }
.hie-appearance-toggle input { width:34px; height:20px; flex:none; margin:0; accent-color:var(--hie-color-accent); }
.hie-appearance-card button:focus-visible,.hie-appearance-toggle input:focus-visible { outline:var(--hie-focus-ring); outline-offset:2px; }
.hie-notch-project-status { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); pointer-events:auto; }
.hie-notch-project-status .hie-project-load { position:relative; inset:auto; width:min(460px,calc(100vw - 28px)); }

/* The collaboration and attention components keep their rich panels but their
   triggers now belong to this header instead of creating independent HUDs. */
.hie-workspace-notch .hie-coworker,.hie-workspace-notch .hie-work-dock {
  position:relative; inset:auto; z-index:auto; width:auto; max-width:none; pointer-events:auto; color:inherit; }
.hie-workspace-notch .hie-coworker-bar,.hie-workspace-notch .hie-work-toggle {
  min-height:32px; height:32px; margin:0; padding:0; border:0; border-radius:8px; background:transparent;
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.hie-workspace-notch .hie-coworker-toggle { min-height:32px; height:32px; padding:0 7px; gap:5px; font-size:10.5px; line-height:1; }
.hie-workspace-notch .hie-coworker-toggle-icon { width:18px; height:18px; }
.hie-workspace-notch .hie-coworker-toggle-icon > svg { width:15px!important; height:15px!important; display:block; }
.hie-workspace-notch .hie-coworker-toggle-icon > .hie-coworker-connection { right:-1px; bottom:-1px; width:5px; height:5px; box-shadow:0 0 0 2px var(--notch-bg); }
.hie-workspace-notch .hie-coworker-share { font-size:10.5px!important; line-height:1!important; font-weight:650; letter-spacing:0; }
.hie-workspace-notch .hie-coworker-panel,.hie-workspace-notch .hie-work-panel {
  position:absolute; top:calc(100% + 8px); right:0; width:min(360px,calc(100vw - 28px)); margin-top:0; }
.hie-workspace-notch .hie-work-toggle { width:32px; }

@media (max-width:760px) {
  .hie-workspace-notch { top:calc(5px + env(safe-area-inset-top,0px)); width:calc(100% - 12px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
    min-height:42px; gap:3px; padding:4px; }
  .hie-notch-location { flex:1 1 auto; }
  .hie-notch-location [data-breadcrumb] { min-width:0; display:flex!important; flex:1 1 auto; }
  .hie-breadcrumb-back { width:28px; padding:0 6px!important; justify-content:center; }
  .hie-breadcrumb-back .label { display:none; }
  .hie-breadcrumb-path > .hie-breadcrumb-step:not([data-breadcrumb-current='true']) { display:none!important; }
  .hie-breadcrumb-path > [data-breadcrumb-current='true'] .hie-breadcrumb-separator { display:none; }
  .hie-breadcrumb-current { max-width:min(120px,30vw)!important; padding-inline:5px!important; }
  .hie-notch-brand { width:32px; padding:0 5px; }
  .hie-notch-brand .label,.hie-notch-control .label,.hie-notch-control kbd,
  .hie-workspace-notch .hie-coworker-share,.hie-workspace-notch .hie-coworker-stack { display:none; }
  .hie-notch-main { flex:0 0 auto; }
  .hie-notch-control,.hie-notch-control.commands { min-width:32px; width:32px; padding:0; box-shadow:none; }
  .hie-notch-side { flex:0 0 auto; gap:1px; }
  .hie-workspace-notch .hie-coworker-toggle { width:32px; padding:0; }
  .hie-workspace-notch .hie-coworker-panel,.hie-workspace-notch .hie-work-panel { position:fixed; top:54px; right:6px; }
  .hie-notch-popover { position:fixed; top:54px; right:6px; }
  .hie-appearance-card { position:fixed; top:54px; right:6px; }
  .hie-companion-card { position:fixed; top:54px; right:6px; }
}
#hie-app.welcome-open .hie-workspace-notch { width:min(900px,calc(100% - 28px)); border-color:transparent;
  background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
#hie-app.welcome-open .hie-notch-main { display:none; }
#hie-app.welcome-open .hie-notch-location { flex:none; }
#hie-app.welcome-open .hie-notch-side { display:flex; flex:1; }
#hie-app.welcome-open .hie-notch-side > :not(.hie-notch-more) { display:none; }
#hie-app.canvas-collapsed .hie-workspace-notch { width:46px; padding:5px; }
#hie-app.canvas-collapsed .hie-notch-location,#hie-app.canvas-collapsed .hie-notch-side,
#hie-app.canvas-collapsed .hie-notch-main { display:none; }


/* GPU fabric: the app-sized WebGPU canvas is mounted directly under #hie-app
   so flex chrome cannot invalidate it. The prepared first frame is replaced
   atomically when that canvas is ready; neither is an interactive node layer. */
.canvas-gpu { position: absolute; inset: 0; pointer-events: none; }
.hie-prepared-frame { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; }
.hover-tip { position: absolute; z-index: 7; display: none; max-width: 340px; pointer-events: none;
  background: color-mix(in srgb,var(--hie-color-surface-solid) 96%,transparent); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 11.5px; line-height: 1.5; color: var(--text); white-space: pre-line; }
.hover-tip.open { display: block; }

/* Usable semantic fallback when WebGPU is unavailable or policy-disabled. */
/* Base color in its own longhand: this is the surface that renders when WebGPU
   is absent, so it is the one place that may face a browser predating
   color-mix. As a shorthand, an unsupported wash would invalidate the whole
   declaration and take the base color with it; split, the color always lands. */
.hie-compat-canvas { position: absolute; inset: 0; overflow: auto; padding: 28px;
  background-color: var(--hie-color-canvas-workspace); }
.hie-compat-heading { max-width: 680px; margin-bottom: 21px; }
.hie-compat-heading > span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.hie-compat-heading > strong { display: block; margin-top: 5px; color: var(--text); font-size: 20px; }
.hie-compat-heading > p { max-width: 620px; margin: 7px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.hie-compat-node-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 8px; }
.hie-compat-node { min-width: 0; min-height: 82px; display: flex; align-items: flex-start; flex-direction: column; gap: 5px;
  padding: 11px; border-color: var(--surface-border); background: var(--surface-raised); text-align: left; }
.hie-compat-node:hover, .hie-compat-node:focus-visible { border-color: var(--accent); background: var(--surface-hover); }
.hie-compat-node > span { padding: 2px 5px; border-radius: 4px; color: var(--accent); background: var(--accent-wash);
  font-size: 8px; font-weight: 750; text-transform: uppercase; }
.hie-compat-node > strong, .hie-compat-node > small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hie-compat-node > strong { color: var(--text); font-size: 11px; }.hie-compat-node > small { color: var(--muted); font: 9px/1.35 var(--hie-font-mono); }

/* ── canvas workspace ──────────────────────────────────────────────── */
#hie-app { position: fixed; inset: 0; display: flex; overflow: hidden; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: var(--hie-color-canvas-workspace); }
#hie-app[data-entry-mode='launch'] { position: absolute; }
#hie-app > .canvas-gpu { z-index: 0; }
/* Once a complete application projection has presented, GPU pixels become the
   visual authority. The genuine React/DOM tree stays exactly where layout put
   it for events, forms, focus, selection and assistive technology. Opacity is
   intentional here: unlike filter, it does NOT establish a containing block
   for fixed descendants. A filtered zero-width portal root made dialogs size
   against that root instead of the viewport and pulled header SVGs toward the
   origin. Application.projectStyle restores opacity only in the retained
   copy, so browser paint remains transparent without changing layout. The
   selector deliberately excludes the shared GPU surface itself. */
html[data-hie-gpu-application='true'] #hie-app > :not(.canvas-gpu),
html[data-hie-gpu-application='true'] body > [data-hie-radial-menu] {
  opacity: 0 !important;
}
#hie-canvas-shell { position: relative; z-index: 1; flex: 1 1 auto; min-width: 240px; height: 100%; overflow: hidden;
  container-type: inline-size; background: transparent; overscroll-behavior: none; }
#hie-stage { position: absolute; inset: 0; overflow: hidden; overscroll-behavior: none; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Undo and history jumps resolve authored boundaries exactly. Presentation
   transitions belong to direct manipulation, never to time travel. */
#hie-stage.hie-history-applying, #hie-stage.hie-history-applying * {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
.hie-compat-canvas, input, textarea, [contenteditable='true'] {
  user-select: text; -webkit-user-select: text; -webkit-touch-callout: default;
}
.hie-boot-status { position: absolute; left: 50%; top: 50%; z-index: 30; display: flex; align-items: center; gap: 11px;
  max-width: min(420px, calc(100% - 32px)); padding: 11px 13px; border: 1px solid var(--surface-border-strong); border-radius: 13px;
  background: color-mix(in srgb,var(--hie-color-surface-solid) 92%,transparent); box-shadow: 0 18px 54px rgba(0,0,0,.3); transform: translate(-50%,-50%);
  color: var(--text); pointer-events: none; backdrop-filter: blur(14px); }
.hie-boot-status[hidden] { display: none; }
.hie-boot-status-mark { display: block; width: 29px; height: 29px; flex: none; }
.hie-boot-status-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.hie-boot-status-copy strong { font-size: 12px; font-weight: 720; }
.hie-boot-status-copy small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.hie-boot-status.failed { border-color: color-mix(in srgb,var(--danger) 62%,var(--surface-border)); pointer-events: auto; }
.hie-boot-status.failed .hie-boot-status-mark { display:grid; place-items:center; border-radius:9px; color:var(--hie-color-surface-solid); background:var(--danger); font:800 17px/1 var(--hie-font-mono); }
.hie-boot-status.failed .hie-boot-status-copy small { color: var(--danger); white-space: normal; }
/* Adaptive is a genuine post-composite GPU cursor. The bare stage inherits
   cursor:none, while semantic DOM controls keep their own authored pointer/text/
   resize cursors until their pixels join the GPU chrome plane. Do not blanket
   the shell descendants: that makes the pointer disappear above DOM chrome
   which necessarily composites after the canvas. The radial menu is portalled
   outside the shell and explicitly participates in the GPU material, so every
   one of its descendants can suppress the native cursor together. */
html[data-hie-fluid-cursor='true'] #hie-canvas-shell,
html[data-hie-fluid-cursor='true'] [data-hie-radial-menu],
html[data-hie-fluid-cursor='true'] [data-hie-radial-menu] * { cursor: none !important; }
html[data-hie-gpu-application='true'] #hie-app,
html[data-hie-gpu-application='true'] #hie-app *,
html[data-hie-gpu-application='true'] [data-hie-radial-menu],
html[data-hie-gpu-application='true'] [data-hie-radial-menu] * { cursor: none !important; }
#hie-app.welcome-open #hie-canvas-hud-root,
#hie-app.welcome-open #hie-layer-path-root,
#hie-app.welcome-open #hie-mobile-gesture-controls-root { display: none; }
/* Desktop keeps the colocated inspector and map independent. Touch screens
   replace these fixed corners with one safe-area owner below. */
#hie-canvas-hud-root, .hie-canvas-hud-utilities { display: contents; }
#hie-minimap-root { position: absolute; right: 14px; bottom: 14px; z-index: 19; pointer-events: none; }
#hie-minimap-root:has(.hie-history-timeline[data-expanded='true']) { z-index: 34; }
#hie-selection-toolbar-root:empty { display: none; }
.hie-canvas-hud-map-toggle { display: none; }

/* A node taken fullscreen. It covers the whole shell — canvas AND dock — so the
   node is genuinely the only thing you are looking at. Above the selection
   toolbar (30) and minimap (19); below the media-privacy banner (46) and the
   radial ring (1000), both of which are app-level and must stay reachable. */
#hie-app .hie-node-fullscreen { position: absolute; inset: 0; z-index: 45; display: grid;
  grid-template-columns: 1fr; gap: 1px; background: var(--hie-color-chrome-splitter); }
#hie-app .hie-node-fullscreen[data-slots="2"] { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) {
  /* Two panes side by side on a phone is two unusable panes. */
  #hie-app .hie-node-fullscreen[data-slots="2"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}
.hie-node-fullscreen-slot { display: flex; flex-direction: column; min-width: 0; min-height: 0;
  position: relative; overflow: hidden; background: var(--hie-color-chrome-workbench); }
.hie-node-fullscreen-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 9px; flex: 0 0 auto; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.hie-node-fullscreen-kind { color: var(--muted); font: 8px/1.3 var(--hie-font-mono);
  letter-spacing: .1em; text-transform: uppercase; }
.hie-node-fullscreen-bar button { min-width: 28px; min-height: 28px; padding: 0 8px; border: 0;
  border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.hie-node-fullscreen-bar button:hover { color: var(--text); background: var(--surface-hover); }
.hie-node-fullscreen-body { flex: 1 1 auto; min-height: 0; display: flex; }

/* Code opens beside its node first. This is intentionally non-modal: the
   surrounding graph stays visible, pan/selection remain available outside the
   editor, and Expand promotes the same mounted editor into fullscreen. */
#hie-inline-node-view-root { position:absolute; inset:0; z-index:35; pointer-events:none; }
.hie-node-inline { position:absolute; display:flex; flex-direction:column; min-width:0; min-height:0;
  overflow:hidden; pointer-events:auto; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border));
  border-radius:12px; background:var(--hie-color-chrome-workbench); box-shadow:0 28px 90px -30px rgba(0,0,0,.72),0 0 0 1px color-mix(in srgb,var(--surface-border) 28%,transparent); }
.hie-node-inline-bar { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:12px;
  min-height:46px; padding:7px 8px 7px 11px; border-bottom:1px solid var(--border); background:var(--surface-raised); }
.hie-node-inline-bar > div:first-child { min-width:0; display:grid; gap:2px; }
.hie-node-inline-bar span { color:var(--accent); font:750 7.5px/1.2 var(--hie-font-mono); letter-spacing:.09em; text-transform:uppercase; }
.hie-node-inline-bar strong { overflow:hidden; color:var(--text); font:650 10.5px/1.25 var(--hie-font-mono); text-overflow:ellipsis; white-space:nowrap; }
.hie-node-inline-bar > div:last-child { display:flex; gap:5px; }
.hie-node-inline-bar button { min-height:28px; padding:0 9px; border:1px solid var(--surface-border-strong); border-radius:6px;
  color:var(--hie-color-ink-soft); background:var(--surface-raised); font:650 9px/1 var(--hie-font-sans); cursor:pointer; }
.hie-node-inline-bar button:hover { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 48%,var(--border)); background:var(--accent-wash); }
.hie-node-inline-bar button:last-child { min-width:28px; padding:0; font-size:15px; }
.hie-node-inline-body { display:flex; flex:1 1 auto; min-height:0; }
.hie-node-inline .hie-node-view { width:100%; height:100%; }
@media (max-width:620px) {
  .hie-node-inline { left:12px !important; right:12px; width:auto !important; max-height:calc(100% - 92px); }
}

.hie-source-file-document { display:flex; flex:1 1 auto; min-width:0; min-height:0; flex-direction:column; gap:8px;
  padding:9px; color:var(--text); background:var(--bg); }
.hie-source-file-toolbar { display:flex; flex:0 0 auto; align-items:center; gap:10px; min-width:0; }
.hie-source-file-toolbar > div { display:grid; min-width:0; gap:2px; }
.hie-source-file-toolbar strong,.hie-source-file-toolbar code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hie-source-file-toolbar strong { font-size:11px; }.hie-source-file-toolbar code { color:var(--muted); font:8.5px/1.2 var(--hie-font-mono); }
.hie-source-file-toolbar > span { margin-left:auto; color:var(--muted); font-size:8.5px; white-space:nowrap; }
.hie-source-file-toolbar > span[data-dirty="true"] { color:var(--warn); }
.hie-source-file-toolbar > button { min-height:28px; padding:0 10px; border:1px solid var(--surface-border-strong); border-radius:6px;
  color:var(--text); background:var(--surface-raised); font-size:9px; cursor:pointer; }
.hie-source-file-toolbar > button:disabled { opacity:.42; cursor:default; }
.hie-source-file-boundary { display:grid; flex:0 0 auto; grid-template-columns:1fr 1fr; gap:8px; }
.hie-source-file-ports { display:flex; min-width:0; align-items:center; gap:4px; overflow:hidden; }
.hie-source-file-ports[data-direction="exports"] { justify-content:flex-end; }
.hie-source-file-ports > span { color:var(--muted); font:700 7.5px/1 var(--hie-font-mono); letter-spacing:.08em; text-transform:uppercase; }
.hie-source-file-ports code { overflow:hidden; padding:3px 6px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius:999px;
  color:var(--accent); background:var(--accent-wash); font:8px/1 var(--hie-font-mono); text-overflow:ellipsis; white-space:nowrap; }
.hie-source-file-ports[data-direction="exports"] code { color:var(--accent-2); border-color:color-mix(in srgb,var(--accent-2) 30%,var(--border)); background:color-mix(in srgb,var(--accent-2) 9%,transparent); }
.hie-source-file-ports em { color:var(--muted); font:8px/1 var(--hie-font-mono); }
/* Video editors provide their own application bar. Keep the universal close
   affordance, but float it over that bar instead of charging the NLE a second
   row of chrome. The stable editor container still moves exactly as before. */
.hie-node-fullscreen-slot[data-node-kind="video"] > .hie-node-fullscreen-bar { position: absolute; top: 0; right: 0; z-index: 80; width: 42px; height: 48px;
  box-sizing: border-box; padding: 9px 8px 9px 4px; border: 0; background: linear-gradient(90deg, transparent, var(--hie-color-surface-solid) 30%); pointer-events: none; }
.hie-node-fullscreen-slot[data-node-kind="video"] > .hie-node-fullscreen-bar .hie-node-fullscreen-kind { display: none; }
.hie-node-fullscreen-slot[data-node-kind="video"] > .hie-node-fullscreen-bar button { pointer-events: auto; background: var(--hie-color-surface-solid-raised); }
.hie-node-fullscreen-slot[data-node-kind="video"] > .hie-node-fullscreen-body { flex-basis: 100%; }

/* One editor surface for JavaScript, TypeScript and TSX. The textarea remains
   the real input/accessibility control; the retained layer underneath is the
   output of @renoun/code's grammar engine, never regex-colored source. */
.hie-code-editor { position: relative; flex: 1 1 auto; min-width: 0; min-height: 220px;
  overflow: hidden; border: 1px solid var(--border, var(--surface-border)); border-radius: 9px;
  background: var(--bg-soft, var(--hie-color-hub-solid)); isolation: isolate; }
.hie-code-editor-highlight, .hie-code-editor-diagnostics, .hie-code-editor > textarea { box-sizing: border-box; position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0; border: 0; border-radius: inherit;
  font: 12.5px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-ligatures: none; tab-size: 2; white-space: pre; }
.hie-code-editor-highlight, .hie-code-editor-diagnostics { overflow: auto; padding: 14px 14px 14px 0;
  color: var(--text, var(--text)); background: transparent; pointer-events: none;
  scrollbar-width: none; }
.hie-code-editor-highlight { z-index: 0; }
.hie-code-editor-diagnostics { z-index: 1; color: transparent; }
.hie-code-editor-highlight::-webkit-scrollbar, .hie-code-editor-diagnostics::-webkit-scrollbar { display: none; }
.hie-code-editor-highlight code, .hie-code-editor-diagnostics code { display: block; min-width: max-content; font: inherit; }
.hie-code-editor-line { display: block; min-height: 1.62em; }
.hie-code-editor-line.source-linked { background: color-mix(in srgb, var(--selection) 14%, transparent);
  box-shadow: inset 2px 0 var(--selection); }
.hie-code-editor-line-number { display: inline-block; width: 44px; padding-right: 12px;
  box-sizing: border-box; color: var(--muted, var(--muted)); text-align: right; user-select: none; }
.hie-code-editor-squiggle { text-decoration-line: underline; text-decoration-style: wavy;
  text-decoration-thickness: 1.2px; text-underline-offset: 3px; }
.hie-code-editor-squiggle[data-severity="error"] { text-decoration-color: var(--danger); }
.hie-code-editor-squiggle[data-severity="warning"] { text-decoration-color: var(--warn); }
.hie-code-editor-squiggle[data-severity="info"] { text-decoration-color: var(--hie-color-info); }
.hie-code-editor-squiggle[data-severity="hint"] { text-decoration-color: var(--muted); }
.hie-code-editor > textarea { z-index: 2; resize: none; overflow: auto; outline: 0;
  padding: 14px 14px 14px 44px; color: transparent; background: transparent;
  caret-color: var(--accent, var(--accent)); -webkit-text-fill-color: transparent;
  -webkit-font-smoothing: antialiased; }
.hie-code-editor > textarea::selection { color: transparent; background: color-mix(in srgb, var(--accent, var(--accent)) 32%, transparent); }
.hie-code-editor:focus-within { border-color: color-mix(in srgb, var(--accent, var(--accent)) 70%, var(--border, var(--surface-border)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--accent)) 25%, transparent); }
.hie-code-editor-intelligence-bar { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px;
  top: 7px; right: 8px; padding: 3px; border: 1px solid color-mix(in srgb, var(--border, var(--surface-border)) 82%, transparent);
  border-radius: 8px; background: color-mix(in srgb, var(--panel, var(--surface-raised)) 90%, transparent);
  box-shadow: 0 8px 24px -18px #000; backdrop-filter: blur(12px); }
.hie-code-editor-intelligence-button { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 7px;
  border: 0; border-radius: 5px; color: var(--muted, var(--muted)); background: transparent;
  font: 9px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.hie-code-editor-intelligence-button:hover, .hie-code-editor-intelligence-button[data-active="true"] {
  color: var(--text, var(--text)); background: color-mix(in srgb, var(--accent, var(--accent)) 13%, transparent); }
.hie-code-editor-intelligence-button > span { min-width: 14px; padding: 2px 4px; border-radius: 999px;
  color: var(--text, var(--text)); background: color-mix(in srgb, var(--border, var(--surface-border)) 72%, transparent); text-align: center; }
.hie-code-editor-language { position: static; padding: 3px 5px;
  border: 1px solid var(--border, var(--surface-border)); border-radius: 999px; color: var(--muted, var(--muted));
  background: color-mix(in srgb, var(--panel, var(--surface-raised)) 88%, transparent);
  font: 8px/1.2 ui-monospace, monospace; letter-spacing: .08em; pointer-events: none; }
.hie-code-editor-language[data-busy="true"] { color: var(--accent, var(--accent)); }
.hie-code-editor-hover { position: absolute; z-index: 8; max-width: min(460px, calc(100% - 24px)); padding: 8px 10px;
  border: 1px solid var(--border, var(--surface-border)); border-radius: 7px; color: var(--text, var(--text));
  background: color-mix(in srgb, var(--panel, var(--surface-raised)) 96%, transparent); box-shadow: 0 18px 45px -22px #000;
  pointer-events: none; font: 10px/1.45 ui-sans-serif, system-ui, sans-serif; }
.hie-code-editor-hover code { color: var(--accent, var(--accent)); font: 10px/1.45 ui-monospace, monospace; white-space: pre-wrap; }
.hie-code-editor-hover p { margin: 5px 0 0; color: var(--muted, var(--muted)); white-space: pre-wrap; }
.hie-code-editor-intelligence-panel { position: absolute; z-index: 7; top: 43px; right: 8px;
  display: flex; flex-direction: column; width: min(440px, calc(100% - 16px)); max-height: min(420px, calc(100% - 54px));
  overflow: hidden; border: 1px solid var(--border, var(--surface-border)); border-radius: 10px;
  color: var(--text, var(--text)); background: color-mix(in srgb, var(--panel, var(--surface-raised)) 97%, transparent);
  box-shadow: 0 24px 70px -30px #000; backdrop-filter: blur(18px); }
.hie-code-editor-intelligence-panel-head { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 9px 0 12px;
  border-bottom: 1px solid var(--border, var(--surface-border)); font: 10px/1 ui-sans-serif, system-ui, sans-serif; }
.hie-code-editor-intelligence-panel-head > strong { flex: 1; }.hie-code-editor-intelligence-panel-head > span { color: var(--accent, var(--accent)); }
.hie-code-editor-intelligence-panel-head > button { width: 26px; height: 26px; border: 0; border-radius: 6px;
  color: var(--muted, var(--muted)); background: transparent; font-size: 16px; cursor: pointer; }
.hie-code-editor-intelligence-list { overflow: auto; padding: 5px; }
.hie-code-editor-intelligence-list > button { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 5px 7px; border: 0; border-radius: 6px;
  color: inherit; background: transparent; text-align: left; cursor: pointer; }
.hie-code-editor-intelligence-list > button:hover, .hie-code-editor-intelligence-list > button:focus-visible {
  outline: 0; background: color-mix(in srgb, var(--accent, var(--accent)) 11%, transparent); }
.hie-code-editor-intelligence-list > button > span { overflow: hidden; color: var(--accent, var(--accent));
  font: 8px/1.2 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.hie-code-editor-intelligence-list > button > strong { overflow: hidden; font: 10px/1.25 ui-monospace, monospace;
  text-overflow: ellipsis; white-space: nowrap; }
.hie-code-editor-intelligence-list > button > small { color: var(--muted, var(--muted)); font: 8px/1 ui-monospace, monospace; }
.hie-code-editor-intelligence-list > p { margin: 14px; color: var(--muted, var(--muted)); font: 10px/1.45 system-ui, sans-serif; }
.hie-code-editor-intelligence-list > section { padding: 9px; border-bottom: 1px solid color-mix(in srgb, var(--border, var(--surface-border)) 60%, transparent); }
.hie-code-editor-intelligence-list > section:last-child { border-bottom: 0; }
.hie-code-editor-intelligence-list > section > div { display: flex; justify-content: space-between; gap: 8px; font: 10px/1.3 system-ui, sans-serif; }
.hie-code-editor-intelligence-list > section > div span { color: var(--accent, var(--accent)); text-transform: uppercase; font-size: 8px; letter-spacing: .08em; }
.hie-code-editor-intelligence-list > section[data-state="failed"] > div span,
.hie-code-editor-intelligence-list > section[data-state="unsupported"] > div span { color: var(--danger); }
.hie-code-editor-intelligence-list > section > small { color: var(--muted, var(--muted)); font: 8px/1.3 ui-monospace, monospace; }
.hie-code-editor-intelligence-list > section > p { margin: 5px 0 0; color: var(--muted, var(--muted)); font: 9px/1.4 system-ui, sans-serif; }
@media (max-width: 640px) {
  .hie-code-editor-intelligence-bar { top: auto; right: 7px; bottom: 7px; max-width: calc(100% - 14px); }
  .hie-code-editor-intelligence-button { min-width: 34px; padding-inline: 6px; }
  .hie-code-editor-intelligence-button { font-size: 0; }.hie-code-editor-intelligence-button > span { font-size: 9px; }
  .hie-code-editor-intelligence-panel { top: auto; right: 7px; bottom: 40px; width: calc(100% - 14px); max-height: 55%; }
}
/* The SAME collapse, keyed to the editor's own box rather than the viewport.
   Both are needed and neither replaces the other: the @media rule above is the
   phone case, while this one is a 360px editor hosted in a node on a 1440px
   screen — where the viewport query never fires and the overlays used to cover
   the code they were annotating. Only fires where an ancestor is a query
   container; .hie-node-view is (container-type: inline-size), the dock is not,
   which is exactly the split intended. */
@container (max-width: 640px) {
  .hie-code-editor-intelligence-bar { top: auto; right: 7px; bottom: 7px; max-width: calc(100% - 14px); }
  .hie-code-editor-intelligence-button { min-width: 34px; padding-inline: 6px; font-size: 0; }
  .hie-code-editor-intelligence-button > span { font-size: 9px; }
  .hie-code-editor-intelligence-panel { top: auto; right: 7px; bottom: 40px; width: calc(100% - 14px); max-height: 55%; }
  .hie-code-editor-semantic-control { max-width: calc(100% - 16px); }
}
.hie-code-editor-semantic-control { position: absolute; z-index: 6; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 220px); min-height: 30px; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent, var(--accent)) 35%, var(--border, var(--surface-border))); border-radius: 8px; background: color-mix(in srgb, var(--panel, var(--surface-raised)) 92%, transparent); box-shadow: 0 4px 18px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.hie-code-editor-semantic-control > label { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted, var(--muted)); font: 9px/1.2 ui-monospace, monospace; }
.hie-code-editor-semantic-control > label > span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hie-code-editor-semantic-control input[type="color"] { width: 24px; height: 22px; padding: 1px; border: 1px solid var(--border, var(--surface-border)); border-radius: 5px; background: transparent; cursor: pointer; }
.hie-code-editor-semantic-control input[type="number"], .hie-code-editor-semantic-control input[type="text"], .hie-code-editor-semantic-control select { width: 78px; min-height: 22px; padding: 2px 5px; border: 1px solid var(--border, var(--surface-border)); border-radius: 5px; color: var(--text); background: var(--surface-raised, var(--surface)); font: 9px/1.2 ui-monospace, monospace; }
.hie-code-editor-semantic-control input[type="checkbox"] { accent-color: var(--accent); }
.hie-code-editor-color-tokens { display: flex; align-items: center; gap: 3px; overflow-x: auto; }
.hie-code-editor-color-tokens > button { flex: 0 0 auto; width: 18px; height: 18px; padding: 0; border: 1px solid color-mix(in srgb, var(--text) 35%, transparent); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); cursor: pointer; }
.hie-code-editor-color-tokens > button[data-active="true"] { outline: 2px solid var(--accent, var(--accent)); outline-offset: 1px; }
@media (max-width: 640px) { .hie-code-editor-semantic-control { right: 8px; max-width: none; overflow-x: auto; } }

/* The node's OWN view container — the element that MOVES between hosts, which
   is why the panel keeps its caret and draft across a promotion. It is a query
   container, so the container rules these panels already carry (written for the
   720px dock) fire against the node's box instead. contain:content keeps a
   panel's layout from escaping into the board. */
/* overflow is AUTO, not hidden. Only five of the colocated panels actually
   carry @container rules (container-trace, compute, signal, grade, typeface);
   the rest are either intrinsically fluid or set a min-height FLOOR — the
   render and png-sequence documents both floor at 520px. Against hidden, a
   floored panel silently loses its bottom edge in a smaller node, which reads
   as a broken editor rather than a small one. Scrolling is the honest answer,
   and it costs the @container panels nothing: they collapse before they
   overflow. */
.hie-node-view { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto;
  container-type: inline-size; contain: content; }
.hie-node-view-loading { flex: 1 1 auto; }
.hie-program-evidence-view { display: grid; gap: 14px; min-height: 100%; padding: 14px; overflow: auto; }
.hie-program-evidence-view > .html-preview { min-height: 220px; border: 1px solid var(--surface-border); border-radius: 12px; overflow: hidden; }
.hie-program-evidence-view .hie-analysis-section { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--surface-border); border-radius: 10px; }
.hie-program-evidence-view .hie-analysis-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hie-program-evidence-view .hie-analysis-section h3 { margin: 0; font-size: 12px; }
.hie-program-evidence-view .hie-analysis-section header span { color: var(--muted); font-size: 10px; }
.hie-program-evidence-view .hie-analysis-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.hie-program-evidence-view .hie-analysis-facts code { padding: 4px 7px; border-radius: 6px; background: var(--surface-hover); font-size: 10px; }
.hie-program-evidence-view .hie-projected-node-source { padding: 10px 12px; border: 1px solid var(--surface-border); border-radius: 10px; }
.hie-program-evidence-view .hie-projected-node-source pre { max-height: 360px; overflow: auto; white-space: pre; font-size: 10px; }
#hie-media-privacy-root { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px));
  z-index: 46; width: min(680px, calc(100vw - 28px)); transform: translateX(-50%); pointer-events: none; }
.hie-media-privacy { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px;
  border: 1px solid color-mix(in srgb,var(--accent) 28%,var(--surface-border)); border-radius: 12px; color: var(--text); background: color-mix(in srgb,var(--hie-color-surface-solid) 93%,transparent);
  box-shadow: 0 18px 48px -24px rgba(0,0,0,.45); backdrop-filter: blur(18px); pointer-events: auto; }
.hie-media-privacy > div { min-width: 0; flex: 1; }.hie-media-privacy strong { display: block; font-size: 10.5px; }
.hie-media-privacy p { margin: 2px 0 0; color: var(--muted); font-size: 8.5px; line-height: 1.45; }
.hie-media-privacy-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--ok) 10%,transparent); }.hie-media-privacy-dot.requested { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb,var(--warn) 10%,transparent); }
.hie-media-privacy-dot.recording { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb,var(--danger) 12%,transparent); animation: hie-coworker-pulse 1.1s ease-in-out infinite; }
.hie-media-privacy.recording { border-color: color-mix(in srgb,var(--danger) 42%,var(--surface-border)); }.hie-media-consent { border-color: color-mix(in srgb,var(--warn) 42%,var(--surface-border)); }
.hie-media-privacy button { flex: none; min-height: 29px; padding: 5px 8px; border-radius: 7px; font-size: 8.5px; }
.hie-media-privacy button.allow { color: var(--accent-ink); border-color: transparent; background: var(--accent); font-weight: 750; }
@media (max-width: 620px) { #hie-media-privacy-root { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .hie-media-privacy { align-items: stretch; flex-wrap: wrap; }.hie-media-privacy > div { flex-basis: calc(100% - 24px); }
  .hie-media-privacy button { flex: 1; min-height: 40px; } }
.hie-canvas-minimap { width: 196px; padding: 7px; border: 1px solid var(--surface-border-strong); border-radius: 10px;
  color: var(--text); background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.2); backdrop-filter: blur(14px); pointer-events: auto; }
.hie-canvas-minimap-heading { height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 2px 5px;
  color: var(--muted); font: 700 8px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.hie-canvas-minimap-heading button { padding: 2px 5px; border: 0; border-radius: 4px; color: var(--muted); background: transparent;
  font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.hie-canvas-minimap-heading button:hover, .hie-canvas-minimap-heading button:focus-visible { color: var(--accent); background: var(--accent-wash); }
.hie-canvas-minimap svg { display: block; width: 100%; height: 118px; cursor: grab; touch-action: none; }
.hie-canvas-minimap svg[data-dragging='true'] { cursor: grabbing; }
.hie-canvas-minimap svg:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 7px; }
.hie-canvas-minimap-field { fill: var(--hie-color-canvas-workspace); stroke: var(--hie-color-canvas-artboard-border); }
.hie-canvas-minimap-item { fill: color-mix(in srgb, var(--selection) 22%, var(--hie-color-canvas-artboard)); stroke: color-mix(in srgb, var(--selection) 58%, var(--hie-color-canvas-artboard-border)); vector-effect: non-scaling-stroke; }
.hie-canvas-minimap-viewport { fill: color-mix(in srgb, var(--selection) 10%, transparent); stroke: var(--selection); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hie-canvas-minimap-embedded { width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: inherit;
  background: transparent; box-shadow: none; backdrop-filter: none; }
.hie-canvas-minimap-embedded svg { width: 100%; height: 100%; }
/* Procreate-style coarse-pointer rail: gestures stay accelerators, while the
   same history and framing actions remain reachable with one thumb. Hidden on
   precision-pointer desktops so it does not duplicate the keyboard surface. */
#hie-mobile-gesture-controls-root { display: none; position: absolute; inset: 0; z-index: 33; pointer-events: none; }
@media (pointer: coarse) {
  #hie-mobile-gesture-controls-root { display: block; }
}
.hie-mobile-gesture-controls { position: absolute; left: max(8px, env(safe-area-inset-left, 0px)); top: 50%;
  transform: translateY(-50%); pointer-events: auto; color: var(--muted); }
.hie-mobile-gesture-rail { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px;
  border: 1px solid var(--surface-border-strong); border-radius: 13px; background: var(--surface);
  box-shadow: 0 15px 38px -20px rgba(0,0,0,.55), inset 0 1px color-mix(in srgb, var(--text) 4%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); touch-action: none; }
.hie-mobile-gesture-button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0;
  border-radius: 9px; color: var(--muted); background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hie-mobile-gesture-button:active, .hie-mobile-gesture-button[aria-expanded='true'] { color: var(--selection); background: color-mix(in srgb, var(--selection) 14%, transparent); transform: scale(.94); }
.hie-mobile-gesture-button:focus-visible { outline: 1.5px solid var(--accent); outline-offset: -2px; }
.hie-mobile-gesture-button:disabled { color: var(--muted); opacity: .42; }
.hie-mobile-gesture-separator { width: 24px; height: 1px; margin: 2px 0; background: var(--surface-border); }
.hie-mobile-gesture-guide { position: absolute; left: 52px; top: 50%; width: min(286px, calc(100vw - 78px)); overflow: hidden;
  border: 1px solid var(--surface-border-strong); border-radius: 14px; color: var(--text); background: var(--hie-color-surface-solid);
  box-shadow: 0 22px 55px -24px rgba(0,0,0,.55); transform: translateY(-50%); touch-action: pan-y;
  animation: hie-touch-guide-in 160ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes hie-touch-guide-in { from { opacity: 0; transform: translate(-5px,-50%) scale(.985); } }
.hie-mobile-gesture-guide header { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 8px 7px 11px; border-bottom: 1px solid var(--surface-border); }
.hie-mobile-gesture-guide header > div { min-width: 0; }
.hie-mobile-gesture-guide header span { display: block; color: var(--accent); font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hie-mobile-gesture-guide header strong { display: block; margin-top: 2px; font-size: 11px; }
.hie-mobile-gesture-guide header button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0;
  border-radius: 8px; color: var(--muted); background: transparent; }
.hie-mobile-gesture-guide header button:active { color: var(--text); background: var(--surface-hover); }
.hie-mobile-gesture-guide dl { margin: 0; padding: 4px 11px; }
.hie-mobile-gesture-guide dl > div { min-height: 32px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  align-items: center; gap: 10px; border-bottom: 1px solid var(--surface-border); }
.hie-mobile-gesture-guide dl > div:last-child { border-bottom: 0; }
.hie-mobile-gesture-guide dt { color: var(--text); font-size: 9.5px; font-weight: 680; }
.hie-mobile-gesture-guide dd { margin: 0; color: var(--muted); font-size: 8.5px; line-height: 1.3; }
.hie-mobile-gesture-guide p { margin: 0; padding: 8px 11px 10px; border-top: 1px solid var(--surface-border);
  color: var(--muted); font-size: 8px; line-height: 1.45; }
@media (max-width: 620px) and (pointer: coarse) {
  @keyframes hie-touch-guide-in { from { opacity: 0; transform: translateY(5px) scale(.985); } }
}

/* One bottom activity island on touch hardware. Nothing else owns this edge:
   history/fit are the resting utilities, selection adds its contextual row,
   and Map expands as a centered mode above both. */
@media (pointer: coarse) and (max-width: 1024px), (max-width: 760px) {
  #hie-canvas-hud-root {
    --hie-mobile-island-height: 58px;
    position: absolute; left: 50%; bottom: max(8px, env(safe-area-inset-bottom, 0px)); z-index: 33;
    display: flex; width: min(680px, calc(100% - 16px)); flex-direction: column; align-items: stretch; gap: 4px;
    box-sizing: border-box; padding: 4px; border: 1px solid var(--surface-border-strong); border-radius: 18px;
    color: var(--muted); background: var(--surface); box-shadow: 0 18px 48px -22px rgba(0,0,0,.55), inset 0 1px color-mix(in srgb, var(--text) 4%, transparent);
    transform: translateX(-50%); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    pointer-events: auto; isolation: isolate;
  }
  #hie-minimap-root { position: relative; right: auto; bottom: auto; z-index: auto; display: none;
    align-items: center; justify-content: center; width: 100%; padding: 4px 0 2px; transform: none; pointer-events: none; }
  #hie-canvas-hud-root[data-map-open='true'] #hie-minimap-root { display: flex; }
  #hie-canvas-hud-root:has(.hie-history-timeline[data-expanded='true']) #hie-minimap-root { display: flex; }
  #hie-canvas-hud-root[data-map-open='true'] #hie-selection-toolbar-root > [data-selection-toolbar] { display: none !important; }
  #hie-canvas-hud-root:has(.hie-history-timeline[data-expanded='true']) #hie-selection-toolbar-root > [data-selection-toolbar] { display: none !important; }
  #hie-canvas-hud-root .hie-history-timeline { width: min(236px, calc(100% - 12px)); }
  #hie-canvas-hud-root .hie-history-timeline[data-expanded='true'] { width: calc(100% - 8px); }
  #hie-canvas-hud-root .hie-canvas-minimap-embedded { width: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; }
  #hie-canvas-hud-root .hie-canvas-minimap-embedded svg { height: 100%; }
  #hie-selection-toolbar-root { position: relative; z-index: 2; width: 100%; pointer-events: none; }
  #hie-selection-toolbar-root > [data-selection-toolbar] { width: 100% !important; }
  #hie-selection-toolbar-root [data-selection-inspector-content] { width: 100% !important; box-sizing: border-box; }
  #hie-selection-toolbar-root [data-selection-inspector-tabs] { width: 100% !important;
    border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
  .hie-canvas-hud-utilities { position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 48px; gap: 2px; padding: 0 2px; border-top: 1px solid var(--surface-border); }
  #hie-selection-toolbar-root:empty + .hie-canvas-hud-utilities { border-top-color: transparent; }
  #hie-mobile-gesture-controls-root { position: relative; inset: auto; z-index: auto; display: block; pointer-events: auto; }
  .hie-mobile-gesture-controls { position: relative; left: auto; top: auto; transform: none; }
  .hie-mobile-gesture-rail { flex-direction: row; gap: 2px; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; backdrop-filter: none; }
  .hie-mobile-gesture-separator { width: 1px; height: 24px; margin: 0 2px; }
  .hie-mobile-gesture-button { width: 42px; height: 42px; }
  .hie-mobile-gesture-guide { left: 50%; top: auto; bottom: calc(100% + 12px); width: min(340px, calc(100vw - 24px));
    transform: translateX(-50%); }
  .hie-canvas-hud-map-toggle { display: flex; width: 48px; height: 42px; align-items: center; justify-content: center;
    flex-direction: column; gap: 1px; padding: 0; border: 0; border-radius: 10px; color: var(--muted); background: transparent;
    font: 650 7px/1 var(--hie-font-sans); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .hie-canvas-hud-map-toggle[aria-expanded='true'] { color: var(--selection); background: color-mix(in srgb, var(--selection) 14%, transparent); }
  #hie-canvas-hud-root:has(.hie-history-timeline[data-expanded='true']) .hie-canvas-hud-map-toggle { display: none; }
  #hie-canvas-hud-root:not(:has(#hie-minimap-root > *)) .hie-canvas-hud-map-toggle { display: none; }
  .hie-canvas-hud-map-toggle:focus-visible { outline: 1.5px solid var(--accent); outline-offset: -2px; }
  .hie-canvas-hud-map-toggle span { line-height: 1; }
  #hie-media-privacy-root { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 420px) {
  #hie-canvas-hud-root { width: calc(100% - 12px); bottom: max(6px, env(safe-area-inset-bottom, 0px)); border-radius: 16px; }
  .hie-mobile-gesture-button { width: 40px; height: 40px; }
  .hie-canvas-hud-map-toggle { width: 44px; height: 40px; }
  #hie-selection-toolbar-root [data-selection-inspector-tabs] button { min-height: 42px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hie-mobile-gesture-guide { animation: none; }
  .hie-mobile-gesture-button:active { transform: none; }
}

.hie-history-timeline { position: relative; width: 212px; overflow: hidden; border: 1px solid var(--surface-border-strong); border-radius: 13px;
  color: var(--text); background: color-mix(in srgb,var(--hie-color-surface-solid) 96%,transparent);
  box-shadow: 0 20px 55px -24px rgba(0,0,0,.55), 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent) inset;
  contain: layout paint; isolation: isolate; transform-origin: right bottom; backface-visibility: hidden; pointer-events: auto;
  transition: width 280ms cubic-bezier(.2,.8,.2,1), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.hie-history-timeline[data-expanded='true'] { width: min(660px, calc(100vw - 28px));
  border-color: color-mix(in srgb,var(--selection) 20%,var(--surface-border-strong));
  background: color-mix(in srgb,var(--hie-color-surface-solid) 98%,transparent); }
.hie-history-timeline-heading { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  box-sizing: border-box; padding: 6px 7px 6px 10px; border-bottom: 1px solid var(--surface-border); }
.hie-history-timeline-title { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.hie-history-timeline-title > span { flex: none; color: var(--muted); font-size: 8px; font-weight: 750;
  letter-spacing: .11em; text-transform: uppercase; }
.hie-history-timeline-title strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 10.5px; font-weight: 650;
  opacity: 1; text-overflow: ellipsis; white-space: nowrap; transition: opacity 140ms ease 80ms; }
.hie-history-timeline[data-expanded='false'] .hie-history-timeline-title strong { width: 0; opacity: 0; transition-delay: 0ms; }
.hie-history-timeline-position { display: flex; align-items: center; gap: 7px; flex: none; color: var(--muted);
  font: 600 8.5px/1 var(--hie-font-mono); }
.hie-history-timeline-elapsed, .hie-history-timeline-count { opacity: 1; transition: opacity 140ms ease 80ms; }
.hie-history-timeline[data-expanded='false'] .hie-history-timeline-elapsed,
.hie-history-timeline[data-expanded='false'] .hie-history-timeline-count { position: absolute; opacity: 0; pointer-events: none; }
.hie-history-timeline-position button { height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px;
  color: var(--muted); background: transparent; }
.hie-history-timeline-position button:hover, .hie-history-timeline-position button:focus-visible { color: var(--text); background: var(--surface-hover); outline: none; }
.hie-history-fit { min-width: 28px; padding-inline: 5px !important; font: 700 8px/1 var(--hie-font-sans); letter-spacing: .06em; text-transform: uppercase; }
.hie-history-close { width: 22px; font: 500 16px/1 var(--hie-font-sans); opacity: 1; transition: width 180ms ease, opacity 120ms ease; }
.hie-history-timeline[data-expanded='false'] .hie-history-close { width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.hie-history-timeline-body { display: grid; grid-template-columns: minmax(0,1fr) 196px; align-items: stretch; justify-content: end; gap: 12px;
  box-sizing: border-box; padding: 7px; transition: grid-template-columns 280ms cubic-bezier(.2,.8,.2,1), gap 280ms cubic-bezier(.2,.8,.2,1); }
.hie-history-timeline[data-expanded='false'] .hie-history-timeline-body { grid-template-columns: 0fr 196px; gap: 0; }
.hie-history-preview { width: 196px; height: 118px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--surface-border-strong); border-radius: 8px; color: var(--muted); background: var(--hie-color-canvas-workspace);
  font-size: 8px; text-align: center; }
.hie-history-detail { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 5px 3px 4px 5px;
  overflow: hidden; opacity: 1; visibility: visible; transition: opacity 160ms ease 90ms, visibility 0s linear; }
.hie-history-timeline[data-expanded='false'] .hie-history-detail { padding-inline: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 90ms ease, visibility 0s linear 280ms; }
.hie-history-difference { display: flex; min-width: 0; align-items: center; gap: 8px; }
.hie-history-difference > span { flex: none; padding: 4px 6px; border: 1px solid color-mix(in srgb,var(--selection) 30%,var(--surface-border));
  border-radius: 6px; color: var(--selection); background: color-mix(in srgb,var(--selection) 9%,transparent);
  font: 750 7.5px/1 var(--hie-font-sans); letter-spacing: .08em; text-transform: uppercase; }
.hie-history-difference > strong { min-width: 0; overflow: hidden; color: var(--muted); font: 600 8.5px/1.2 var(--hie-font-sans);
  text-overflow: ellipsis; white-space: nowrap; }
.hie-history-rail { min-width: 0; position: relative; padding: 0 2px; }
.hie-history-events { position: absolute; z-index: 1; left: 7px; right: 7px; top: 0; height: 24px; pointer-events: none; }
.hie-history-events span { position: absolute; top: 50%; width: 6px; height: 6px; padding: 0; border: 1px solid var(--surface-border-strong);
  border-radius: 50%; background: var(--surface-raised); transform: translate3d(-50%,-50%,0); }
.hie-history-events span.applied { border-color: var(--selection); background: var(--selection); }
.hie-history-events span.future { border-color: var(--surface-border-strong); background: var(--hie-color-surface-solid-raised); }
.hie-history-events span.previewing { width: 9px; height: 9px; border: 2px solid var(--selection-ink); background: var(--selection);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--selection) 13%,transparent); }
.hie-history-rail input[type='range'] { position: relative; z-index: 2; display: block; width: 100%; height: 24px; margin: 0;
  padding: 0; border: 0; border-radius: 0; appearance: none; background: transparent; cursor: ew-resize; touch-action: none; }
.hie-history-rail input[type='range']::-webkit-slider-runnable-track { height: 2px; border-radius: 999px; background: color-mix(in srgb,var(--selection) 64%,var(--surface-border)); }
.hie-history-rail input[type='range']::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -5.5px; appearance: none;
  border: 2px solid var(--selection-ink); border-radius: 50%; background: var(--selection); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.hie-history-rail input[type='range']::-moz-range-track { height: 2px; border: 0; border-radius: 999px; background: color-mix(in srgb,var(--selection) 64%,var(--surface-border)); }
.hie-history-rail input[type='range']::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid var(--selection-ink); border-radius: 50%; background: var(--selection); }
.hie-history-rail input[type='range']:focus-visible { outline: 1px solid var(--selection); outline-offset: 4px; }
.hie-history-rail input[type='range']:disabled { opacity: .58; cursor: wait; }
.hie-history-rail-labels { display: flex; justify-content: space-between; padding: 1px 5px 0; color: var(--muted);
  font: 650 7.5px/1 var(--hie-font-sans); letter-spacing: .04em; }
@media (max-width: 620px) {
  .hie-history-timeline[data-expanded='true'] .hie-history-timeline-body { grid-template-columns: minmax(0,1fr) 96px; gap: 8px; }
  .hie-history-timeline[data-expanded='true'] .hie-history-preview { width: 96px; height: 72px; align-self: center; }
  .hie-history-timeline[data-expanded='true'] .hie-history-detail { gap: 7px; padding-left: 2px; }
  .hie-history-timeline[data-expanded='true'] .hie-history-difference > strong { font-size: 7.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hie-history-timeline, .hie-history-timeline-body, .hie-history-detail,
  .hie-history-timeline-title strong, .hie-history-close { transition-duration: 0.01ms; transition-delay: 0ms; }
}

.hie-workbench { display: flex; height: 100%; min-width: 0; flex-direction: column; background: var(--hie-color-chrome-workbench); color: var(--text); }
.hie-workbench-toolbar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 12px 0 14px; border-bottom: 1px solid var(--border); background: var(--panel); }
.hie-workbench-title, .hie-workbench-actions { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hie-workbench-title { font-size: 12px; font-weight: 650; overflow: hidden; white-space: nowrap; }
.hie-workbench-title > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.hie-mark { display:block; width:24px; height:24px; flex:none; }
.hie-framework-chip { padding: 3px 7px; border: 1px solid var(--surface-border-strong); border-radius: 999px; color: var(--hie-color-ink-soft);
  font-size: 10px; font-weight: 600; }
.hie-btn { min-height: 30px; padding: 5px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.hie-btn-solid { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.hie-btn-ghost { background: var(--surface-hover); }
.hie-btn-quiet { padding-inline: 8px; color: var(--hie-color-ink-soft); background: transparent; border-color: transparent; }
.hie-btn-quiet:hover { background: var(--surface-hover); border-color: var(--surface-border-strong); }
.hie-btn:disabled { cursor: default; opacity: .45; }

.hie-document-strip { min-height: 37px; display: flex; align-items: end; gap: 2px; overflow-x: auto; overflow-y: hidden;
  padding: 5px 7px 0; border-bottom: 1px solid var(--border); background: var(--hie-color-chrome-background-soft); scrollbar-width: thin; }
.hie-document-tab { min-width: 92px; max-width: 220px; height: 31px; display: flex; align-items: center; justify-content: space-between;
  gap: 9px; padding: 0 9px; border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0;
  color: var(--muted); background: transparent; font-size: 11px; white-space: nowrap; }
.hie-document-tab { cursor: pointer; }
.hie-document-activate { min-width: 0; height: 100%; flex: 1; display: flex; align-items: center; padding: 0; overflow: hidden;
  border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.hie-document-activate > span { overflow: hidden; text-overflow: ellipsis; }
.hie-document-activate:focus-visible, .hie-tab-close:focus-visible { outline: var(--hie-focus-ring); outline-offset: 1px; }
.hie-document-tab.active { color: var(--text); background: var(--hie-color-chrome-panel-raised); border-color: var(--border); }
.hie-tab-close { display: grid; place-items: center; width: 17px; height: 17px; flex: none; padding: 0; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 14px; }
.hie-tab-close:hover { color: var(--text); background: var(--surface-hover); }
.hie-document-row { flex: 1; min-height: 0; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scrollbar-color: var(--border) var(--hie-color-chrome-background-soft); }
.hie-document { min-width: min(560px, 92vw); flex: 1 0 min(760px, 78vw); height: 100%; overflow: auto;
  scroll-snap-align: start; border-right: 1px solid var(--border); background: var(--hie-color-chrome-workbench); }
.hie-document:last-child { border-right: 0; }
.hie-icon-button { display: grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0;
  border-color: transparent; color: var(--muted); background: transparent; font-size: 18px; line-height: 1; }
.hie-icon-button:hover { color: var(--text); background: var(--surface-hover); border-color: var(--surface-border-strong); }
.hie-empty-workbench, .hie-empty-state { display: grid; place-items: center; align-content: center; gap: 12px; min-height: 220px;
  padding: 30px; color: var(--muted); text-align: center; }

/* Project home: the source-derived project overview is a real split document. */
.hie-project-home { padding: 0 26px 42px; }
.hie-project-hero { display: flex; justify-content: space-between; gap: 24px; padding: 32px 2px 25px; }
.hie-project-hero h1 { max-width: 720px; margin: 6px 0 10px; color: var(--text); font-size: clamp(25px, 3vw, 38px);
  line-height: 1.08; letter-spacing: -.035em; }
.hie-project-hero p { max-width: 760px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.hie-eyebrow { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.hie-scan-proof { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); overflow: hidden; margin-bottom: 18px;
  border: 1px solid var(--surface-border); border-radius: 11px; background: var(--surface-raised); }
.hie-scan-step { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 13px; border-right: 1px solid var(--surface-border); }
.hie-scan-step:last-child { border-right: 0; }
.hie-scan-dot { display: grid; place-items: center; width: 21px; height: 21px; flex: none; border-radius: 999px;
  color: var(--muted); background: var(--surface-hover); font-size: 11px; }
.hie-scan-step.ready .hie-scan-dot { color: var(--accent-ink); background: var(--accent); }
.hie-scan-step div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.hie-scan-step strong { font-size: 11.5px; }
.hie-scan-step div span { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.hie-open-project { margin-bottom: 18px; padding: 18px; border: 1px solid var(--surface-border); border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-wash-soft), color-mix(in srgb,var(--hie-color-info) 8%,transparent)); }
.hie-open-project h2, .hie-route-gallery h2, .hie-intelligence-panel h2 { margin: 3px 0 5px; font-size: 16px; letter-spacing: -.015em; }
.hie-open-project p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.hie-open-row { display: flex; gap: 8px; margin-top: 13px; }
.hie-open-row input { min-width: 0; flex: 1; height: 36px; font: 11.5px/1.3 ui-monospace, monospace; }
.hie-inline-error { margin-top: 9px !important; color: var(--danger) !important; }
.hie-cli-hint { margin-top: 10px !important; }
.hie-cli-hint span { margin-right: 7px; padding: 2px 6px; border-radius: 4px; color: var(--accent); background: var(--accent-wash); font-size: 9px; text-transform: uppercase; }
.hie-style-guide-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-color: var(--surface-border-strong);
  background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 44%), linear-gradient(135deg, var(--surface-hover), var(--surface-raised)); }
.hie-style-guide-action > div:first-child { max-width: 670px; }
.hie-style-guide-action .hie-open-row { flex: none; margin-top: 0; }
.hie-project-grid { display: grid; grid-template-columns: minmax(360px, 1.45fr) minmax(270px, .8fr); gap: 16px; }
.hie-route-gallery, .hie-intelligence-panel { border: 1px solid var(--surface-border); border-radius: 12px; background: var(--surface-raised); }
.hie-route-gallery { overflow: hidden; }
.hie-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px 12px; }
.hie-section-heading h2, .hie-section-heading h3 { margin: 3px 0 0; }
.hie-route-list { border-top: 1px solid var(--surface-border); }
.hie-route-row { width: 100%; min-height: 55px; display: grid; grid-template-columns: 42px minmax(75px, .75fr) auto minmax(120px, 1fr) 18px;
  align-items: center; gap: 9px; padding: 8px 13px; border: 0; border-bottom: 1px solid var(--surface-border); border-radius: 0;
  color: var(--text); background: transparent; text-align: left; }
.hie-route-row:last-child { border-bottom: 0; }
.hie-route-row:hover { background: var(--surface-hover); }
.hie-route-row:disabled { opacity: .6; cursor: default; }
.hie-route-method { color: var(--accent); font: 700 9px/1 var(--hie-font-mono); letter-spacing: .06em; }
.hie-route-path { color: var(--text); font: 600 11.5px/1.3 var(--hie-font-mono); overflow: hidden; text-overflow: ellipsis; }
.hie-route-badge { padding: 2px 6px; border: 1px solid var(--surface-border-strong); border-radius: 999px; color: var(--muted); font-size: 9px; }
.hie-route-file { color: var(--muted); font: 10px/1.3 var(--hie-font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hie-empty-list { padding: 25px 16px; color: var(--muted); font-size: 11.5px; }
.hie-intelligence-panel { padding: 16px; }
.hie-intelligence-panel > h2 { margin-bottom: 13px; }
.hie-proof-row { padding: 11px 0; border-top: 1px solid var(--surface-border); }
.hie-proof-row > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hie-proof-row strong { font-size: 11.5px; }
.hie-proof-row span { color: var(--accent); font: 10.5px/1.3 var(--hie-font-mono); text-align: right; }
.hie-proof-row p { margin: 5px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }

/* A Next.js project is revealed as an evidence path rather than a wall of
   product claims. The active layer reads like a precise inspector timeline;
   every value below is projected from the current scene envelope. */
.hie-next-exploration { margin-bottom: 20px; }
.hie-next-steps { position: relative; margin-bottom: 9px; border-color: var(--surface-border); background: var(--surface-raised);
  grid-template-columns: repeat(5,minmax(108px,1fr)); box-shadow: 0 12px 34px rgba(0,0,0,.16); }
.hie-next-step { position: relative; width: 100%; margin: 0; border: 0; border-right: 1px solid var(--surface-border);
  border-radius: 0; color: var(--muted); background: transparent; text-align: left; transition: color .16s ease, background .16s ease; }
.hie-next-step:last-child { border-right: 0; }
.hie-next-step:hover { border-color: var(--surface-border); color: var(--text); background: var(--surface-hover); }
.hie-next-step:focus-visible { z-index: 1; outline: var(--hie-focus-ring); outline-offset: -3px; }
.hie-next-step::after { position: absolute; right: 12px; bottom: 0; left: 12px; height: 2px; border-radius: 999px 999px 0 0;
  background: transparent; content: ''; transition: background .16s ease, box-shadow .16s ease; }
.hie-next-step.active { color: var(--text); background: linear-gradient(180deg, var(--surface-hover), var(--surface-raised)); }
.hie-next-step.active::after { background: var(--accent); box-shadow: 0 -4px 15px color-mix(in srgb, var(--accent) 28%, transparent); }
.hie-next-step .hie-scan-dot { color: var(--muted); background: var(--surface-hover); font: 700 9px/1 var(--hie-font-mono); }
.hie-next-step.ready .hie-scan-dot { color: var(--ok); background: color-mix(in srgb,var(--ok) 10%,transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--ok) 24%,transparent); }
.hie-next-step.degraded .hie-scan-dot { color: var(--warn); background: color-mix(in srgb,var(--warn) 10%,transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--warn) 24%,transparent); }
.hie-next-step.active .hie-scan-dot { color: var(--accent-ink); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash-soft); }
.hie-next-step.active.degraded .hie-scan-dot { color: var(--hie-color-surface-solid); background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb,var(--warn) 10%,transparent); }
.hie-next-stage { overflow: hidden; padding: 0; border-color: var(--surface-border-strong);
  background: linear-gradient(145deg, var(--surface-hover), var(--surface-raised));
  box-shadow: 0 16px 45px rgba(0,0,0,.18); }
.hie-next-stage .hie-section-heading { min-height: 78px; padding: 15px 16px; border-bottom: 1px solid var(--surface-border);
  background: radial-gradient(circle at 16% 0, var(--accent-wash-soft), transparent 44%); }
.hie-next-stage .hie-section-heading h2 { margin: 4px 0 0; color: var(--text); font-size: 15px; letter-spacing: -.015em; }
.hie-next-evidence { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.hie-next-evidence .hie-proof-row { min-width: 0; padding: 15px 16px 17px; border-top: 0; border-left: 1px solid var(--surface-border); }
.hie-next-evidence .hie-proof-row:first-child { border-left: 0; }
.hie-next-evidence .hie-proof-row > div { min-height: 29px; display: block; }
.hie-next-evidence .hie-proof-row strong { display: block; margin-bottom: 4px; color: var(--text); }
.hie-next-evidence .hie-proof-row span { display: block; overflow-wrap: anywhere; color: var(--accent); text-align: left; }
.hie-next-evidence .hie-proof-row p { margin-top: 8px; line-height: 1.55; }

/* Per-node detail documents. */
.hie-node-document { display: flex; min-width: min(520px, 88vw); flex: 1 0 min(700px, 76vw); flex-direction: column; overflow: hidden; }
.hie-node-document.active { box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent) 78%, transparent); }
.hie-node-header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px 14px 10px 17px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }
.hie-node-identity { min-width: 0; }
.hie-node-identity h2 { margin: 3px 0 0; overflow: hidden; color: var(--text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.hie-node-kicker { display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--muted); font: 9.5px/1.3 var(--hie-font-mono); white-space: nowrap; }
.hie-node-kicker span { padding: 2px 6px; border-radius: 4px; color: var(--accent-ink); background: var(--accent); font: 750 8.5px/1.3 var(--hie-font-sans); text-transform: uppercase; }
.hie-node-kicker em { overflow: hidden; padding: 2px 6px; border: 1px solid var(--surface-border); border-radius: 999px; color: var(--muted);
  font: 650 8.5px/1.3 ui-sans-serif, sans-serif; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.hie-node-header-actions { display: flex; align-items: center; gap: 8px; }
.hie-node-tabs { min-height: 39px; display: flex; align-items: end; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--surface-border); background: var(--hie-color-chrome-background-soft); }
.hie-node-tabs button { height: 34px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--muted); background: transparent; font-size: 10.5px; font-weight: 650; }
.hie-node-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.hie-node-body { flex: 1; min-height: 0; overflow: auto; }

.hie-preview-document { min-height: 100%; display: flex; flex-direction: column; background: var(--hie-color-chrome-workbench); }
.hie-capability-preview { min-height: 420px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 10px;
  padding: clamp(28px, 7vw, 72px); color: var(--muted); background: radial-gradient(circle at 20% 20%, var(--accent-wash-soft), transparent 38%), var(--hie-color-chrome-workbench); }
.hie-capability-preview > span { color: var(--accent); font: 800 9px/1.2 var(--hie-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.hie-capability-preview > strong { color: var(--text); font-size: clamp(25px, 4vw, 42px); line-height: 1; letter-spacing: -.035em; }
.hie-capability-preview > p { max-width: 640px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.hie-capability-preview > div { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--surface-raised); }
.hie-capability-preview > div em { padding: 2px 6px; border-radius: 999px; color: var(--accent-ink); background: var(--accent); font-size: 8px; font-style: normal; text-transform: uppercase; }
.hie-capability-preview > div b { color: var(--text); font: 10px/1.3 var(--hie-font-mono); }
.hie-capability-preview > small { max-width: 640px; color: var(--muted); font-size: 9.5px; line-height: 1.55; }
.hie-preview-toolbar { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 11px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }
.hie-segmented { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--surface-border); border-radius: 7px; background: var(--hie-color-hub-solid); }
.hie-segmented button { padding: 3px 7px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 9.5px; }
.hie-segmented button.active { color: var(--text); background: var(--surface-border); }
.hie-segmented button:disabled { color: var(--muted); cursor: not-allowed; opacity: .52; text-decoration: line-through; text-decoration-color: var(--surface-border-strong); }
.hie-static-proof { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9.5px; white-space: nowrap; }
.hie-static-proof i { width: 6px; height: 6px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 10%, transparent); }
.hie-static-proof.degraded { color: var(--warn); }
.hie-static-proof.degraded i { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 12%, transparent); }
.hie-variant-strip { display: flex; gap: 5px; overflow-x: auto; padding: 7px 10px; border-bottom: 1px solid var(--surface-border); background: var(--hie-color-hub-solid); }
.hie-variant-strip button { padding: 4px 8px; border-color: var(--surface-border); color: var(--muted); background: transparent; font-size: 9.5px; white-space: nowrap; }
.hie-variant-strip button.active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.hie-preview-stage { flex: 1; min-height: 420px; overflow: auto; padding: 22px; background-color: var(--hie-color-chrome-workbench);
  background-image: linear-gradient(45deg,var(--surface-raised) 25%,transparent 25%),linear-gradient(-45deg,var(--surface-raised) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--surface-raised) 75%),linear-gradient(-45deg,transparent 75%,var(--surface-raised) 75%);
  background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; }
.hie-preview-viewport { min-height: 520px; max-width: 100%; margin: 0 auto; overflow: hidden; border: 1px solid var(--surface-border-strong); border-radius: 9px;
  background: #fff; box-shadow: 0 18px 60px rgba(0,0,0,.36); transition: width .2s ease; }
.hie-preview-viewport[data-viewport="mobile"] { min-height: 680px; }
.hie-full-preview.html-preview { width: 100%; min-height: 100%; height: auto; padding: 0; border-radius: 0; overflow: visible; }
.hie-full-preview > html, .hie-full-preview > body { min-height: 100%; }
.hie-native-preview { min-height: 100%; background: #fff; }
.hie-native-inspect-toolbar { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 7px; border-bottom: 1px solid var(--surface-border); color: var(--muted); background: var(--hie-color-chrome-panel);
  font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.hie-native-inspect-toolbar button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid var(--surface-border-strong);
  border-radius: 5px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font: 700 9px/1.2 ui-sans-serif, sans-serif; }
.hie-native-inspect-toolbar button.active { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 8%, transparent); }
.hie-native-inspect-frame { position: relative; overflow: hidden; cursor: default; }
.hie-native-preview[data-inspecting] .hie-native-inspect-frame { cursor: crosshair; }
.hie-native-preview canvas { display: block; width: 100%; height: auto; background: #fff; outline: none; }
.hie-native-preview canvas:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 72%, transparent); }
.hie-native-inspect-outline { position: absolute; z-index: 2; min-width: 2px; min-height: 2px; pointer-events: none;
  border: 1.5px solid var(--selection); background: color-mix(in srgb, var(--selection) 8%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--selection-ink) 88%, transparent), 0 2px 12px rgba(0,0,0,.22); }
.hie-native-inspect-outline.hovered { border-style: dashed; background: color-mix(in srgb, var(--selection) 4%, transparent); }
.hie-native-inspect-outline.source-linked { z-index: 3; border-color: var(--accent); border-style: solid;
  background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 80%,transparent); }
.hie-native-inspect-outline.source-linked > i { color: var(--accent-ink); background: var(--accent); }
.hie-native-inspect-outline > i { position: absolute; left: -1px; top: 0; transform: translateY(-100%); max-width: 150px; overflow: hidden;
  padding: 2px 5px; color: var(--selection-ink); background: var(--selection); font: 700 8px/1.3 ui-monospace, monospace; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.hie-native-inspection { display: grid; grid-template-columns: minmax(120px,.7fr) minmax(180px,1.3fr); gap: 12px 18px;
  padding: 12px; border-top: 1px solid var(--surface-border); color: var(--text); background: var(--surface-raised); box-shadow: inset 3px 0 var(--selection);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hie-native-inspection-title > span { display: block; color: var(--selection); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hie-native-inspection-title > strong { display: block; margin-top: 4px; color: var(--text); font-size: 12px; }
.hie-native-inspection-title > p { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--muted); font-size: 9px; line-height: 1.45; }
.hie-native-inspection dl { margin: 0; min-width: 0; }
.hie-native-inspection dl > div { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 7px; padding: 2px 0; }
.hie-native-inspection dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.hie-native-inspection dd { margin: 0; overflow-wrap: anywhere; color: var(--hie-color-ink-soft); font-size: 9px; }
.hie-native-inspection dd > i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border: 1px solid var(--surface-border-strong); border-radius: 2px; vertical-align: -1px; }
.hie-native-inspection-actions { grid-column: 1/-1; display: flex; justify-content: flex-end; gap: 5px; }
.hie-native-inspection-actions button { padding: 4px 7px; border-color: var(--surface-border-strong); border-radius: 5px; color: var(--hie-color-ink-soft); background: var(--surface-hover); font-size: 8.5px; }
.hie-native-inspection-actions button:first-child { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.hie-native-preview > .hie-inline-error { padding: 12px; }
.hie-native-crop-note { margin: 0; padding: 8px 11px; border-top: 1px solid var(--surface-border); color: var(--muted);
  background: var(--hie-color-chrome-background-soft); font: 9.5px/1.4 ui-monospace, monospace; }
.hie-preview-deopts { flex: none; max-height: 190px; overflow: auto; border-top: 1px solid color-mix(in srgb, var(--warn) 28%, var(--surface-border)); background: color-mix(in srgb, var(--warn) 7%, var(--hie-color-hub-solid)); }
.hie-preview-deopts summary { cursor: pointer; padding: 9px 12px; color: var(--warn); font-size: 10px; font-weight: 650; }
.hie-preview-deopts > div { display: grid; grid-template-columns: 76px 1fr; gap: 9px; padding: 8px 12px; border-top: 1px solid color-mix(in srgb, var(--warn) 22%, var(--surface-border)); }
.hie-preview-deopts > div span { color: var(--warn); font: 700 8.5px/1.4 ui-monospace, monospace; text-transform: uppercase; }
.hie-preview-deopts > div p { margin: 0; color: var(--hie-color-ink-soft); font-size: 9.5px; line-height: 1.45; }

.hie-source-document { height: 100%; min-height: 430px; display: flex; flex-direction: column; padding: 11px; gap: 9px; background: var(--hie-color-hub-solid); }
.hie-source-path, .hie-source-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--muted); font: 10px/1.4 ui-monospace, monospace; }
.hie-source-document textarea { flex: 1; min-height: 420px; width: 100%; resize: none; padding: 14px; border-radius: 8px;
  color: var(--text); background: var(--hie-color-hub-solid); font: 12px/1.62 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
.hie-source-actions { justify-content: flex-start; font-family: ui-sans-serif, sans-serif; }
.hie-source-intelligence { flex: none; display: grid; gap: 7px; padding: 10px 12px; border: 1px solid var(--surface-border); border-radius: 8px;
  background: radial-gradient(circle at 8% 0, var(--accent-wash-soft), transparent 38%), var(--surface-raised); }
.hie-source-intelligence > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hie-source-intelligence > header div { min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.hie-source-intelligence > header span { flex: none; color: var(--accent); font: 800 8.5px/1.2 ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }
.hie-source-intelligence > header strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hie-source-intelligence > header em { flex: none; padding: 3px 7px; border-radius: 999px; color: var(--hie-color-ink-soft); background: var(--surface-hover); font-size: 8.5px; font-style: normal; }
.hie-source-intelligence > p { margin: 0; color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.hie-source-intelligence-grid { display: flex; gap: 5px; overflow-x: auto; }
.hie-source-intelligence-grid > span { display: grid; min-width: 52px; padding: 5px 7px; border: 1px solid var(--surface-border); border-radius: 6px; color: var(--muted);
  background: var(--hie-color-hub-solid); font-size: 7.5px; line-height: 1.15; text-transform: uppercase; }
.hie-source-intelligence-grid > span strong { color: var(--text); font-size: 10.5px; text-transform: none; }
.hie-source-intelligence-grid > code { align-self: center; max-width: 130px; overflow: hidden; padding: 4px 7px; border-radius: 5px;
  color: var(--hie-color-ink-soft); background: var(--surface-hover); font: 9px/1.25 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.hie-source-palette { display: flex; height: 20px; gap: 5px; }
.hie-source-palette span { width: 28px; border: 1px solid var(--surface-border-strong); border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.hie-source-intelligence[data-family="styles"] > header span, .hie-source-intelligence[data-family="font"] > header span { color: var(--selection); }
.hie-source-intelligence[data-family="component"] > header span, .hie-source-intelligence[data-family="mdx"] > header span { color: var(--selection); }
.hie-source-asset-viewer { flex: 1; min-height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
  padding: 28px; border: 1px dashed var(--surface-border-strong); border-radius: 8px; color: var(--muted); background: var(--hie-color-hub-solid); text-align: center; }
.hie-source-asset-viewer strong { color: var(--text); font-size: 14px; text-transform: capitalize; }
.hie-source-asset-viewer span { max-width: 520px; font-size: 11px; line-height: 1.5; }
.hie-source-asset-viewer small { max-width: 520px; color: var(--muted); font-size: 9.5px; line-height: 1.5; }

/* Problems list: real Rust/WASM native diagnostics for the buffer on screen
 * (POST /hie/diagnostics). The edit surface is a textarea, which cannot carry a
 * character-positioned squiggle — so findings are LISTED, and a row selects its
 * exact range instead of pretending to underline it. The row containing the
 * caret carries .active. */
.hie-source-problems { flex: none; max-height: 168px; overflow: auto; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--hie-color-hub-solid); }
.hie-source-problems-heading { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px;
  border-bottom: 1px solid var(--surface-border); color: var(--muted); background: color-mix(in srgb, var(--hie-color-hub-solid) 93%, transparent); font: 700 9px/1.4 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.hie-source-problems ul { margin: 0; padding: 0; list-style: none; }
.hie-source-problem { display: grid; grid-template-columns: 56px 62px 1fr auto; align-items: baseline; gap: 10px; width: 100%; padding: 6px 12px;
  border: 0; border-top: 1px solid var(--surface-border); color: var(--hie-color-ink-soft); background: none; font: 10px/1.45 ui-monospace, monospace; text-align: left; cursor: pointer; }
.hie-source-problem:hover { background: var(--surface-raised); }
.hie-source-problem.active { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.hie-source-problem:focus-visible { outline: var(--hie-focus-ring); outline-offset: -2px; }
.hie-source-problem-severity { color: var(--muted); font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; }
.hie-source-problem.error .hie-source-problem-severity { color: var(--danger); }
.hie-source-problem.warning .hie-source-problem-severity { color: var(--warn); }
.hie-source-problem-where { color: var(--accent); }
.hie-source-problem-message { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.hie-source-problem code { color: var(--muted); font-size: 9px; }

/* Quick info for the symbol at the CARET (POST /hie/hover). A textarea has no
 * pointer-position-to-offset mapping, so the caret is the only offset this
 * surface can honestly ask about. */
.hie-source-quick-info { flex: none; display: flex; align-items: baseline; gap: 10px; overflow: hidden; padding: 7px 11px;
  border: 1px solid var(--surface-border); border-radius: 7px; background: var(--hie-color-hub-solid); }
.hie-source-quick-info code { overflow: hidden; color: var(--text); font: 10px/1.4 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.hie-source-quick-info span { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }

/* Read-mode source: highlighted lines where scene-known symbols/imports are
 * clickable jumps to their canvas nodes (the code and the board navigate as
 * one). Line numbers ride an ol counter so copy/paste stays clean text. */
.hie-source-read { flex: 1; min-height: 420px; overflow: auto; border-radius: 8px; background: var(--hie-color-hub-solid); }
.hie-source-lines { margin: 0; padding: 14px 14px 14px 0; list-style: none; counter-reset: hie-source-line;
  color: var(--text); font: 12px/1.62 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
.hie-source-lines li { white-space: pre; counter-increment: hie-source-line; }
.hie-source-lines li::before { content: counter(hie-source-line); display: inline-block; width: 44px; margin-right: 14px;
  color: var(--muted); text-align: right; user-select: none; }
.hie-symbol-link { all: unset; cursor: pointer; color: inherit; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  transition: background var(--hie-motion-fast) ease, border-color var(--hie-motion-fast) ease; }
.hie-symbol-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-bottom-color: color-mix(in srgb, var(--accent) 85%, transparent); }
.hie-symbol-link:focus-visible { outline: var(--hie-focus-ring); outline-offset: 1px; border-radius: 3px; }
.hie-source-outline { flex: 1; min-height: 420px; overflow: auto; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--hie-color-hub-solid); }
.hie-source-outline-heading { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px;
  border-bottom: 1px solid var(--surface-border); color: var(--accent); background: color-mix(in srgb, var(--hie-color-chrome-panel) 93%, transparent); font: 700 10px/1.4 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.hie-source-outline-heading span:last-child { color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.hie-source-outline-row { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 34px; padding: 6px 12px;
  border: 0; border-bottom: 1px solid var(--surface-border); color: var(--text); background: transparent; text-align: left; cursor: grab; font: 11px/1.35 ui-sans-serif, system-ui, sans-serif; }
.hie-source-outline-row:hover { background: var(--surface-hover); }.hie-source-outline-row:active { cursor: grabbing; }
.hie-source-outline-kind { color: var(--accent); font: 9px/1.3 ui-monospace, monospace; text-transform: uppercase; }
.hie-source-outline-meta { overflow: hidden; max-width: 180px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hie-source-outline-empty { margin: 0; padding: 28px 16px; color: var(--muted); font-size: 12px; text-align: center; }

/* The film: narration captions over the live canvas — ether text, no chrome. */
.hie-tour-captions { position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%); max-width: 640px;
  text-align: center; color: #eef3fb; font: 650 26px/1.35 ui-sans-serif, system-ui, sans-serif; white-space: pre-line;
  text-shadow: 0 2px 18px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); pointer-events: none; z-index: 24;
  opacity: 0; transition: opacity .35s ease; }
.hie-tour-captions.visible { opacity: 1; }
/* The Text tool's composer: a text field laid EXACTLY over where the mark
 * paints. Everything that would move the glyphs off the mark — padding, a
 * border, a min-width, an inherited font or line-height — is zeroed here; the
 * font, size, line advance, color and box come from the shared text metrics
 * (the one place the canvas painter reads too) and are set inline at the live
 * camera scale. The only chrome is a hairline ring, which costs no layout. */
.hie-ether-input { position: absolute; z-index: 24; box-sizing: border-box; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--hie-color-ink); text-align: left; white-space: pre; overflow: hidden; resize: none;
  outline: none; caret-color: var(--accent); border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.hie-ether-input.gpu-text-field { color: transparent !important; caret-color: transparent; }
.hie-ether-input.gpu-text-field::selection { color: transparent; background: transparent; }
.hie-ether-input.path-text { box-shadow: none; }
.hie-ether-input::placeholder { color: color-mix(in srgb, var(--text) 34%, transparent); }
/* The empty-canvas selection marquee. Shape placement itself is retained GPU
 * geometry and deliberately has no DOM preview. */
.hie-marquee-preview { position: absolute; z-index: 24; pointer-events: none; border: 1.5px solid color-mix(in srgb, var(--accent) 80%, transparent);
  background: var(--accent-wash); border-radius: var(--hie-radius-sm); }

/* Brief source-editor mount status. */
.hie-video-open { width: 100%; height: 100%; min-height: 430px; display: grid; place-content: center; gap: 6px; padding: 24px;
  box-sizing: border-box; background: var(--hie-color-hub-solid); color: var(--muted); text-align: center; font: 12px/1.5 ui-sans-serif, sans-serif; }
.hie-video-open strong { color: var(--text); font-size: 13px; font-weight: 650; }
.hie-video-open span { max-width: 440px; }
.hie-video-studio-root { width: 100%; height: 100%; min-height: 680px; overflow: hidden; background: var(--hie-color-hub-solid); container-type: inline-size; }
.hie-node-fullscreen-slot[data-node-kind="video"] .hie-video-studio-root { min-height: 0; }
.hie-node-fullscreen-slot[data-node-kind="video"] .hie-video-studio-root .topBar { padding-right: 54px; }
/* A studio remains a useful viewer/timeline when embedded in a dock or a
   compact node. Fullscreen restores the project browser + inspector because
   its container, rather than the browser viewport, owns this decision. */
@container (max-width: 900px) {
  .hie-video-studio-root .sourcePane, .hie-video-studio-root .inspectPane { display: none; }
  .hie-video-studio-root .workspace { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(230px,1fr) minmax(210px,42%); }
  .hie-video-studio-root .stagePane { grid-column: 1; grid-row: 1; grid-template-rows: 42px minmax(0,1fr); border-right: 0; }
  .hie-video-studio-root .timeline { grid-column: 1; grid-row: 2; }
  .hie-video-studio-root .timelineStats { display: none; }
}
@container (max-width: 560px) {
  .hie-video-studio-root .brandMeta, .hie-video-studio-root .topActions .toolButton:nth-child(-n + 2) { display: none; }
  .hie-video-studio-root .topActions .toolButton { min-height: 34px; padding-inline: 7px; }
  .hie-video-studio-root .timelineRuler, .hie-video-studio-root .trackRow { grid-template-columns: 24px 72px minmax(80px,1fr) 0; }
  .hie-video-studio-root .timelineRulerTail, .hie-video-studio-root .trackTag { display: none; }
}
.hie-render-document { height: 100%; min-height: 520px; display: flex; flex-direction: column; gap: 14px; padding: 14px; overflow: auto; background: var(--hie-color-chrome-workbench); color: var(--text); }
.hie-render-monitor { display: grid; place-items: center; padding: 18px; border: 1px solid var(--surface-border); border-radius: 12px; background: var(--hie-color-hub-solid); }
.hie-render-monitor-frame { position: relative; width: min(100%, 520px); display: grid; place-items: center; align-content: center; gap: 7px; border: 1px solid var(--surface-border); background: radial-gradient(circle at 50% 44%, var(--surface-hover), var(--hie-color-hub-solid) 64%); box-shadow: inset 0 0 60px rgba(0,0,0,.32); color: var(--text); }
.hie-render-monitor-frame small, .hie-render-resolution { color: var(--muted); font: 10px/1.3 ui-monospace, monospace; }
.hie-render-resolution { position: absolute; top: 8px; right: 9px; }
.hie-render-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hie-render-controls label { display: grid; gap: 5px; color: var(--muted); font: 10px/1.3 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }
.hie-render-controls select { width: 100%; min-height: 34px; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--surface-raised); color: var(--text); padding: 0 9px; }
.hie-render-cache { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--surface-border); border-radius: 10px; background: var(--surface-raised); }
.hie-render-cache header { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.hie-render-cache header span, .hie-render-cache small { color: var(--muted); font: 10px/1.4 ui-monospace, monospace; }
.hie-render-cache p { margin: 0; color: var(--hie-color-ink-soft); font-size: 11px; line-height: 1.55; }
.hie-render-segments { display: flex; gap: 2px; height: 13px; overflow: hidden; border-radius: 4px; background: var(--hie-color-hub-solid); }
.hie-render-segments span { min-width: 2px; background: var(--warn); }
.hie-render-segments span.reusable { background: var(--ok); }
.hie-render-run { align-self: flex-end; }
.hie-render-download { align-self: flex-end; color: var(--accent); font: 11px/1.4 ui-monospace, monospace; text-decoration: none; }
.hie-render-download:hover { text-decoration: underline; }
/* The render controls answer to their BOX, not the window. As a viewport rule
   this was already approximate in the dock and is simply wrong once the panel
   is colocated: the fullscreen host splits the screen into two slots, so on a
   1280px window each pane is ~640px while @media still reads 1280 and the
   target/codec/backend grid stays two columns in a half-width pane. Every
   focused node-view host declares container-type: inline-size, so the query
   has a container to resolve against. */
@container (max-width: 640px) { .hie-render-controls { grid-template-columns: 1fr; } }
/* The studio ROOT floor stays viewport-based — it is about how much room the
   device has, not how wide this one panel's box is. */
@media (max-width: 640px) { .hie-video-studio-root { min-height: 560px; } }

/* Deployment monitor: provider-neutral status, the durable HIE publish tree,
 * and a private realtime telemetry/log surface. */
.hie-deploy-document { min-height: 620px; height: 100%; overflow: auto; color: var(--text); background: var(--hie-color-hub-solid); font: 10px/1.4 ui-sans-serif, system-ui, sans-serif; }
.hie-deploy-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }
.hie-deploy-toolbar > div { min-width: 0; display: flex; align-items: center; gap: 7px; }.hie-deploy-toolbar strong { overflow: hidden; color: var(--text); font: 11px/1.2 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.hie-deploy-toolbar button { padding: 6px 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font: 9px/1.2 ui-monospace, monospace; }.hie-deploy-toolbar button:disabled { opacity: .45; }
.hie-deploy-provider, .hie-deploy-connection { padding: 3px 6px; border-radius: 999px; color: var(--selection); background: color-mix(in srgb, var(--selection) 12%, transparent); font: 8px/1.2 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }.hie-deploy-connection { color: var(--muted); background: var(--surface-border); }.hie-deploy-connection[data-state="live"] { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }.hie-deploy-connection[data-state="reconnecting"] { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }.hie-deploy-connection[data-state="unavailable"] { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.hie-deploy-error { margin: 0; padding: 8px 11px; color: var(--danger); border-bottom: 1px solid color-mix(in srgb,var(--danger) 38%,var(--surface-border)); background: color-mix(in srgb,var(--danger) 10%,transparent); font: 9px/1.45 ui-monospace, monospace; overflow-wrap: anywhere; }
.hie-deploy-overview { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 10px; padding: 11px; }.hie-deploy-card { min-width: 0; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); }
.hie-deploy-hero { padding: 13px; }.hie-deploy-hero-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }.hie-deploy-hero-heading small, .hie-deploy-telemetry h3, .hie-deploy-contents h3, .hie-deploy-bottom-grid h3 { margin: 0; color: var(--muted); font: 8.5px/1.2 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }.hie-deploy-hero h2 { margin: 4px 0 0; color: var(--text); font: 19px/1.1 ui-sans-serif, system-ui, sans-serif; }.hie-deploy-status { padding: 5px 7px; border-radius: 6px; color: var(--muted); background: var(--surface-border); font: 9px/1.2 ui-monospace, monospace; text-transform: uppercase; }.hie-deploy-status[data-status="succeeded"] { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }.hie-deploy-status[data-status="failed"], .hie-deploy-status[data-status="canceled"] { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }.hie-deploy-status[data-status="running"], .hie-deploy-status[data-status="pending"] { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.hie-deploy-phase-line { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; color: var(--muted); font: 9px/1.3 ui-monospace, monospace; }.hie-deploy-phase-line b { color: var(--text); font-weight: 500; }.hie-deploy-pipeline { display: flex; align-items: start; gap: 0; margin: 20px 0 12px; }.hie-deploy-pipeline-step { position: relative; flex: 1; min-width: 0; display: grid; justify-items: center; gap: 6px; color: var(--muted); font: 7.5px/1.2 ui-monospace, monospace; text-align: center; text-transform: uppercase; }.hie-deploy-pipeline-step:not(:last-child)::after { content: ''; position: absolute; top: 4px; left: 50%; width: 100%; height: 1px; background: var(--surface-border); z-index: 0; }.hie-deploy-pipeline-step i { position: relative; z-index: 1; width: 9px; height: 9px; border: 2px solid var(--surface-border-strong); border-radius: 99px; background: var(--surface-raised); }.hie-deploy-pipeline-step[data-complete="true"] { color: var(--ok); }.hie-deploy-pipeline-step[data-complete="true"] i { border-color: var(--ok); background: var(--ok); }.hie-deploy-pipeline-step[data-current="true"] { color: var(--text); }.hie-deploy-pipeline-step[data-current="true"] i { box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }.hie-deploy-pipeline-step[data-status="failed"] i, .hie-deploy-pipeline-step[data-status="canceled"] i { border-color: var(--danger); background: var(--danger); }
.hie-deploy-primary-link { color: var(--accent); font: 9px/1.3 ui-monospace, monospace; text-decoration: none; }.hie-deploy-primary-link:hover { text-decoration: underline; }
.hie-deploy-telemetry { padding: 13px; }.hie-deploy-telemetry dl { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px 10px; margin: 13px 0 0; font: 9px/1.35 ui-monospace, monospace; }.hie-deploy-telemetry dt { color: var(--muted); }.hie-deploy-telemetry dd { min-width: 0; margin: 0; overflow: hidden; color: var(--hie-color-ink-soft); text-overflow: ellipsis; white-space: nowrap; }.hie-deploy-telemetry code { color: var(--accent); }
.hie-deploy-contents { margin: 0 11px 10px; overflow: hidden; }.hie-deploy-contents > header, .hie-deploy-bottom-grid section > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--surface-border); }.hie-deploy-contents > header > div { min-width: 0; }.hie-deploy-contents p { margin: 4px 0 0; color: var(--muted); font: 9px/1.35 ui-monospace, monospace; }.hie-deploy-contents > header > strong { color: var(--ok); font: 9px/1.2 ui-monospace, monospace; white-space: nowrap; }.hie-deploy-file-list { max-height: 250px; overflow: auto; padding: 5px 0; }.hie-deploy-file { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: 5px; min-height: 27px; padding-right: 10px; border-bottom: 1px solid var(--surface-border); }.hie-deploy-file-icon { color: var(--accent); font-size: 8px; }.hie-deploy-file code { min-width: 0; overflow: hidden; color: var(--text); font: 9px/1.3 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }.hie-deploy-file small { color: var(--muted); font: 8px/1.2 ui-monospace, monospace; white-space: nowrap; }.hie-deploy-empty { display: grid; place-items: center; min-height: 110px; padding: 15px; color: var(--muted); font: 9.5px/1.5 ui-monospace, monospace; text-align: center; }
.hie-deploy-bottom-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 0 11px 11px; }.hie-deploy-bottom-grid section { min-height: 190px; overflow: hidden; }.hie-deploy-bottom-grid section > header span { color: var(--muted); font: 8px/1.2 ui-monospace, monospace; }.hie-deploy-event-list { max-height: 250px; overflow: auto; padding: 5px 10px; }.hie-deploy-event { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; padding: 7px 3px; border-bottom: 1px solid var(--surface-border); }.hie-deploy-event > i { width: 7px; height: 7px; margin-top: 4px; border-radius: 99px; background: var(--muted); }.hie-deploy-event > i[data-status="succeeded"] { background: var(--ok); }.hie-deploy-event > i[data-status="failed"], .hie-deploy-event > i[data-status="canceled"] { background: var(--danger); }.hie-deploy-event strong { color: var(--text); font: 9px/1.25 ui-monospace, monospace; }.hie-deploy-event small { display: block; margin-top: 2px; color: var(--muted); font: 8px/1.25 ui-monospace, monospace; }.hie-deploy-event p { margin: 4px 0 0; color: var(--danger); font: 8.5px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }.hie-deploy-logs pre { max-height: 250px; overflow: auto; margin: 0; padding: 10px 12px; color: var(--hie-color-ink-soft); background: var(--hie-color-hub-solid); font: 8.5px/1.55 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@container (max-width: 700px) { .hie-deploy-overview, .hie-deploy-bottom-grid { grid-template-columns: 1fr; }.hie-deploy-telemetry dl { grid-template-columns: 100px minmax(0, 1fr); } }
@container (max-width: 460px) { .hie-deploy-toolbar { align-items: stretch; flex-direction: column; }.hie-deploy-toolbar button { align-self: flex-end; }.hie-deploy-pipeline-step span { writing-mode: vertical-rl; transform: rotate(180deg); }.hie-deploy-file { grid-template-columns: 15px minmax(0, 1fr); }.hie-deploy-file small { grid-column: 2; }.hie-deploy-contents > header { align-items: flex-start; flex-direction: column; } }

/* The run node's operator surface. A run is read top-down — is it PARKED,
 * what has it done, where did it come from — so the parked block sits above
 * the chain and is the only part that carries controls. The status pill and
 * the chain rows reuse the run-* class vocabulary the scene preview already
 * speaks, scoped to this panel so the two stylesheets stay independent. */
.hie-run-document { min-height: 420px; height: 100%; overflow: auto; color: var(--text); background: var(--hie-color-hub-solid); font: 10px/1.45 ui-sans-serif, system-ui, sans-serif; }
.hie-run-toolbar { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }
.hie-run-toolbar > div { min-width: 0; display: flex; align-items: center; gap: 7px; }.hie-run-toolbar strong { overflow: hidden; color: var(--text); font: 11px/1.2 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.hie-run-toolbar button { padding: 6px 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font: 9px/1.2 ui-monospace, monospace; }.hie-run-toolbar button:hover { border-color: var(--accent); color: var(--text); }.hie-run-toolbar button:disabled { opacity: .45; }
.hie-run-document .run-status { padding: 3px 7px; border-radius: 999px; color: var(--muted); background: var(--surface-border); font: 8px/1.2 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }
.hie-run-document .run-status-running { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.hie-run-document .run-status-awaiting-approval, .hie-run-document .run-status-awaiting-input, .hie-run-document .run-status-awaiting-inbound { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.hie-run-document .run-status-finished { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.hie-run-document .run-status-failed { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.hie-run-document .run-active { color: var(--accent); font: 8.5px/1.2 ui-monospace, monospace; }
.hie-run-error, .hie-run-note { margin: 0; padding: 8px 11px; font: 9px/1.45 ui-monospace, monospace; overflow-wrap: anywhere; }
.hie-run-error { color: var(--danger); border-bottom: 1px solid color-mix(in srgb,var(--danger) 38%,var(--surface-border)); background: color-mix(in srgb,var(--danger) 10%,transparent); }
.hie-run-note { color: var(--ok); border-bottom: 1px solid var(--surface-border); background: color-mix(in srgb,var(--ok) 8%,transparent); }
.hie-run-parked { margin: 11px; padding: 12px; border: 1px solid color-mix(in srgb,var(--warn) 40%,var(--surface-border)); border-radius: 9px; background: color-mix(in srgb,var(--warn) 7%,var(--surface-raised)); }
.hie-run-parked > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }.hie-run-parked h3 { margin: 0; color: var(--warn); font: 8.5px/1.2 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }.hie-run-parked code { color: var(--hie-color-ink-soft); font: 9px/1.2 ui-monospace, monospace; }
.hie-run-question-message { margin: 9px 0 0; color: var(--text); font: 11.5px/1.5 ui-sans-serif, system-ui, sans-serif; }
.hie-run-question-detail { margin: 6px 0 0; color: var(--muted); font: 9px/1.5 ui-monospace, monospace; }
.hie-run-question-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.hie-run-question-row button { padding: 7px 12px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font: 9.5px/1.2 ui-monospace, monospace; }.hie-run-question-row button:hover { border-color: var(--accent); color: var(--text); }.hie-run-question-row button[data-selected="true"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }.hie-run-question-row button:disabled { opacity: .45; }
.hie-run-question-field { display: grid; gap: 4px; margin-top: 10px; color: var(--muted); font: 8px/1.2 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .07em; }
.hie-run-question-field input[type="text"], .hie-run-question-field input[type="password"], .hie-run-question-field select { height: 30px; padding: 0 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; outline: 0; color: var(--text); background: var(--hie-color-chrome-input); font: 9.5px/1 ui-monospace, monospace; text-transform: none; letter-spacing: 0; }
.hie-run-question-field input:focus, .hie-run-question-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }
.hie-run-question-field small { color: var(--muted); font: 8px/1.35 ui-monospace, monospace; text-transform: none; letter-spacing: 0; }
.hie-run-question-check { grid-template-columns: auto minmax(0,1fr); align-items: center; text-transform: none; letter-spacing: 0; }.hie-run-question-check span { color: var(--hie-color-ink-soft); font: 9.5px/1.35 ui-monospace, monospace; }
.hie-run-question-url a { color: var(--accent); font: 9.5px/1.4 ui-monospace, monospace; text-decoration: none; }.hie-run-question-url a:hover { text-decoration: underline; }
.hie-run-chain { margin: 0 11px 11px; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); overflow: hidden; }
.hie-run-chain > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--surface-border); }.hie-run-chain h3 { margin: 0; color: var(--muted); font: 8.5px/1.2 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }.hie-run-chain > header span { color: var(--muted); font: 8px/1.2 ui-monospace, monospace; }
.hie-run-document .run-timeline { list-style: none; margin: 0; padding: 4px 0; }
.hie-run-document .run-row { display: grid; grid-template-columns: minmax(0,1fr) 88px 92px 62px; align-items: baseline; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--surface-border); font: 9px/1.3 ui-monospace, monospace; }
.hie-run-document .run-row-id { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }.hie-run-document .run-row-status { color: var(--muted); text-transform: uppercase; }.hie-run-document .run-row-usage, .hie-run-document .run-row-ms { color: var(--muted); font-variant-numeric: tabular-nums; }
.hie-run-document .run-row[data-status="failed"] .run-row-status { color: var(--danger); }.hie-run-document .run-row[data-status="succeeded"] .run-row-status { color: var(--ok); }.hie-run-document .run-row[data-status="skipped"] { opacity: .6; }
.hie-run-provenance { display: grid; gap: 4px; margin: 0 11px 11px; padding: 11px 12px; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); color: var(--hie-color-ink-soft); font: 9px/1.4 ui-monospace, monospace; }.hie-run-provenance b { color: var(--muted); font-weight: 400; }
.hie-run-empty { display: grid; place-items: center; min-height: 90px; padding: 15px; color: var(--muted); font: 9.5px/1.5 ui-monospace, monospace; text-align: center; }
.hie-run-document .run-out { margin: 0 11px 8px; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--surface-raised); }.hie-run-document .run-out > summary { padding: 8px 12px; color: var(--hie-color-ink-soft); font: 9px/1.2 ui-monospace, monospace; cursor: pointer; }
.hie-run-document .run-output, .hie-run-document .run-diff, .hie-run-document .run-error { max-height: 260px; overflow: auto; margin: 0; padding: 10px 12px; color: var(--hie-color-ink-soft); background: var(--hie-color-hub-solid); font: 8.5px/1.55 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }.hie-run-document .run-error { color: var(--danger); }
.hie-run-document .run-truncated { padding: 6px 12px; color: var(--warn); font: 8.5px/1.4 ui-monospace, monospace; }
@container (max-width: 460px) { .hie-run-toolbar { align-items: stretch; flex-direction: column; }.hie-run-document .run-row { grid-template-columns: minmax(0,1fr) auto; }.hie-run-document .run-row-usage, .hie-run-document .run-row-ms { grid-column: 2; } }

/* @renoun/outline: source-backed hierarchy plus the durable graph bindings
 * that drive it. The tree is capped in React so a 20k-entry projection never
 * turns into a 20k-row DOM cost; filtering still searches the full IR. */
.hie-outline-empty { min-height: 260px; display: grid; place-items: center; padding: 24px; color: var(--muted); background: var(--hie-color-hub-solid); font: 10px/1.55 ui-monospace, monospace; }
.hie-outline-document { height: 100%; min-height: 460px; display: flex; flex-direction: column; color: var(--text); background: var(--hie-color-hub-solid); }
.hie-outline-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }
.hie-outline-toolbar > div { min-width: 0; display: grid; gap: 2px; }.hie-outline-toolbar strong { font: 11px/1.25 ui-monospace, monospace; }.hie-outline-toolbar span { overflow: hidden; color: var(--muted); font: 8.5px/1.25 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.hie-outline-toolbar button { padding: 6px 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font: 9px/1.2 ui-monospace, monospace; }.hie-outline-toolbar button:hover { border-color: var(--accent); color: var(--text); }
.hie-outline-error { margin: 0; padding: 8px 11px; border-bottom: 1px solid color-mix(in srgb,var(--danger) 38%,var(--surface-border)); color: var(--danger); background: color-mix(in srgb,var(--danger) 10%,transparent); font: 9px/1.45 ui-monospace, monospace; }
.hie-outline-bindings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 10px 11px 0; }.hie-outline-bindings > div { min-width: 0; display: grid; gap: 4px; padding: 9px; border: 1px solid var(--surface-border); border-radius: 7px; background: var(--surface-raised); }.hie-outline-bindings span { color: var(--muted); font: 8px/1.2 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }.hie-outline-bindings code { overflow: hidden; color: var(--muted); font: 8.5px/1.3 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }.hie-outline-bindings [data-connected="true"] code, .hie-outline-output code { color: var(--accent); }
.hie-outline-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; padding: 8px 11px; }.hie-outline-summary div { display: grid; gap: 2px; padding: 7px 9px; border: 1px solid var(--surface-border); border-radius: 6px; background: var(--surface-raised); }.hie-outline-summary strong { color: var(--text); font: 14px/1.1 ui-monospace, monospace; }.hie-outline-summary span { color: var(--muted); font: 7.5px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.hie-outline-search { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 0 11px 9px; color: var(--muted); font: 8.5px/1.2 ui-monospace, monospace; }.hie-outline-search input { min-width: 0; height: 30px; padding: 0 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; outline: 0; color: var(--text); background: var(--hie-color-chrome-input); font: 9.5px/1 ui-monospace, monospace; }.hie-outline-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }.hie-outline-search small { color: var(--muted); }
.hie-outline-tree { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--surface-border); border-bottom: 1px solid var(--surface-border); background: var(--hie-color-hub-solid); }.hie-outline-row { min-height: 34px; display: grid; grid-template-columns: 8px minmax(120px,1fr) minmax(80px,.7fr) auto; align-items: center; gap: 7px; padding: 5px 10px 5px calc(11px + var(--outline-depth) * 13px); border-bottom: 1px solid var(--surface-border); }.hie-outline-row:hover { background: var(--surface-hover); }.hie-outline-row > i { width: 6px; height: 6px; border: 1px solid var(--accent); border-radius: 99px; background: var(--accent-wash-strong); }.hie-outline-row > div { min-width: 0; display: grid; gap: 1px; }.hie-outline-row strong { overflow: hidden; color: var(--text); font: 9.5px/1.25 ui-sans-serif, system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }.hie-outline-row span { color: var(--muted); font: 7.5px/1.2 ui-monospace, monospace; }.hie-outline-row code { overflow: hidden; color: var(--hie-color-ink-soft); font: 7.5px/1.2 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }.hie-outline-row small { color: var(--selection); font: 7px/1.2 ui-monospace, monospace; }.hie-outline-tree-empty { margin: 0; min-height: 150px; display: grid; place-items: center; padding: 22px; color: var(--muted); font: 9px/1.5 ui-monospace, monospace; text-align: center; }
.hie-outline-foot { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 11px; color: var(--muted); font: 8px/1.35 ui-monospace, monospace; }.hie-outline-foot code { flex: none; color: var(--hie-color-ink-soft); }
@container (max-width: 560px) { .hie-outline-bindings { grid-template-columns: 1fr; }.hie-outline-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }.hie-outline-search { grid-template-columns: 1fr auto; }.hie-outline-search > span { grid-column: 1 / -1; }.hie-outline-row { grid-template-columns: 8px minmax(0,1fr); }.hie-outline-row > code, .hie-outline-row > small { grid-column: 2; }.hie-outline-foot { align-items: flex-start; flex-direction: column; } }

/* PNG sequence player: browser decoding is lazy and bounded by the component;
 * the checkerboard makes an intentional transparent missing-frame policy
 * visibly different from a failed image. */
.hie-png-sequence-document { height: 100%; min-height: 520px; display: flex; flex-direction: column; gap: 11px; padding: 12px;
  overflow: auto; background: var(--hie-color-hub-solid); color: var(--text); }
.hie-png-sequence-stage { position: relative; flex: 1; min-height: 280px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--surface-border); border-radius: 10px; background-color: var(--surface-raised);
  background-image: linear-gradient(45deg, var(--surface-hover) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-hover) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface-hover) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-hover) 75%);
  background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
.hie-png-sequence-stage img { width: 100%; height: 100%; min-height: 0; object-fit: contain; image-rendering: auto; }
.hie-png-sequence-empty { min-height: 120px; display: grid; place-items: center; padding: 20px; color: var(--muted);
  text-align: center; font: 12px/1.6 ui-sans-serif, sans-serif; }
.hie-png-sequence-transparent { padding: 7px 10px; border-radius: 999px; color: var(--hie-color-ink-soft); background: color-mix(in srgb, var(--hie-color-surface-solid) 82%, transparent);
  font: 10px/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }
.hie-png-sequence-loading { position: absolute; right: 10px; bottom: 10px; padding: 5px 7px; border-radius: 6px;
  color: var(--accent); background: color-mix(in srgb, var(--hie-color-surface-solid) 82%, transparent); font: 9.5px/1 ui-monospace, monospace; }
.hie-png-sequence-transport { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 10.5px/1 ui-monospace, monospace; }
.hie-png-sequence-transport input[type="range"] { min-width: 80px; flex: 1; accent-color: var(--accent); }
.hie-png-sequence-meta { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 4px 14px; padding: 10px 12px;
  border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); font: 10.5px/1.45 ui-monospace, monospace; color: var(--muted); }
.hie-png-sequence-meta strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); white-space: nowrap; }
.hie-png-sequence-meta span:last-child { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hie-png-sequence-settings { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; }
.hie-png-sequence-settings label { display: grid; gap: 4px; color: var(--muted); font: 9.5px/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; }
.hie-png-sequence-settings input, .hie-png-sequence-settings select { min-width: 105px; height: 30px; padding: 0 8px; border: 1px solid var(--surface-border-strong);
  border-radius: 7px; color: var(--text); background: var(--surface-raised); font: 11px/1 ui-monospace, monospace; }
.hie-png-sequence-settings input:disabled, .hie-png-sequence-settings select:disabled { opacity: .5; }

/* Browser-container workbench: an opaque-origin live preview beside durable
 * files and the streamed worker process terminal. */
.hie-container-loading { min-height: 420px; display: grid; place-items: center; padding: 28px; color: var(--muted); background: var(--hie-color-hub-solid); font: 11px/1.6 ui-monospace, monospace; }
.hie-container-document { height: 100%; min-height: 560px; display: flex; flex-direction: column; color: var(--text); background: var(--hie-color-hub-solid); }
.hie-container-toolbar { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }
.hie-container-toolbar nav { display: flex; gap: 3px; }
.hie-container-toolbar button { padding: 5px 9px; border-color: var(--surface-border-strong); color: var(--muted); background: var(--surface-raised); font-size: 9.5px; }
.hie-container-toolbar button.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.hie-container-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 9px/1.3 ui-monospace, monospace; }
.hie-container-status > span:first-child { padding: 3px 6px; border-radius: 999px; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.hie-container-status > span:first-child[data-state="error"] { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.hie-container-error { margin: 0; padding: 8px 11px; color: var(--danger); border-bottom: 1px solid color-mix(in srgb,var(--danger) 38%,var(--surface-border)); background: color-mix(in srgb,var(--danger) 10%,transparent); font: 10px/1.45 ui-monospace, monospace; }
.hie-container-preview { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px; gap: 10px; background: var(--hie-color-hub-solid); }
.hie-container-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hie-container-preview-bar code { flex: 1; overflow: hidden; padding: 7px 9px; border: 1px solid var(--surface-border); border-radius: 7px; color: var(--accent); background: var(--surface-raised); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hie-container-preview iframe { flex: 1; width: 100%; min-height: 520px; border: 1px solid var(--surface-border-strong); border-radius: 9px; background: #fff; box-shadow: 0 20px 60px #0008; }
.hie-container-empty { flex: 1; display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--surface-border-strong); border-radius: 9px; font-size: 11px; }
.hie-container-files { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(150px, 22%) minmax(0, 1fr); }
.hie-container-files aside { min-width: 0; overflow: auto; padding: 8px; border-right: 1px solid var(--surface-border); background: var(--hie-color-hub-solid); }
.hie-container-files aside > div { display: flex; align-items: center; justify-content: space-between; padding: 4px 5px 8px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.hie-container-files aside button { display: flex; align-items: center; gap: 6px; width: 100%; overflow: hidden; margin: 1px 0; padding: 6px 7px; border: 0; color: var(--muted); background: transparent; font: 9.5px/1.3 ui-monospace, monospace; text-align: left; white-space: nowrap; }
.hie-container-files aside button > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hie-container-files aside button.active { color: var(--text); background: var(--accent-wash); }
.hie-container-binary-badge { flex: none; padding: 1px 4px; border: 1px solid color-mix(in srgb, var(--selection) 40%, var(--surface-border)); border-radius: 999px; color: var(--selection); background: color-mix(in srgb, var(--selection) 12%, transparent); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.hie-container-editor { min-width: 0; display: flex; flex-direction: column; padding: 10px; gap: 8px; }
.hie-container-editor > label { display: flex; justify-content: space-between; color: var(--muted); font: 9px/1.3 ui-monospace, monospace; }
.hie-container-editor textarea { flex: 1; min-height: 460px; width: 100%; resize: none; padding: 13px; border: 1px solid var(--surface-border); border-radius: 8px; color: var(--text); background: var(--hie-color-hub-solid); font: 11.5px/1.62 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
.hie-container-binary-file { flex: 1; min-height: 460px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; border: 1px dashed color-mix(in srgb, var(--selection) 32%, var(--surface-border)); border-radius: 8px; color: var(--muted); background: var(--surface-raised); font: 10px/1.5 ui-monospace, monospace; text-align: center; }
.hie-container-binary-file strong { color: var(--selection); font-size: 12px; }
.hie-container-editor footer { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.hie-container-editor footer label { flex: 1; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.hie-container-editor footer input { flex: 1; min-width: 0; padding: 6px 8px; color: var(--hie-color-ink-soft); background: var(--hie-color-hub-solid); font: 9.5px/1.3 ui-monospace, monospace; }
.hie-container-packages { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--hie-color-hub-solid); }
.hie-container-packages > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--surface-border); background: var(--hie-color-hub-solid); }.hie-container-packages > header > div { display: grid; gap: 3px; }.hie-container-packages > header strong { color: var(--text); font-size: 10px; }.hie-container-packages > header span { color: var(--muted); font: 8.5px/1.35 ui-monospace, monospace; }
.hie-container-packages-filter { display: flex; align-items: end; gap: 7px; padding: 8px 12px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }.hie-container-packages-filter label { flex: 1; display: grid; gap: 3px; color: var(--muted); font-size: 8px; }.hie-container-packages-filter input { padding: 6px 8px; color: var(--hie-color-ink-soft); background: var(--hie-color-chrome-input); font: 9px/1.3 ui-monospace, monospace; }
.hie-container-packages-progress, .hie-container-packages-error { margin: 0; padding: 6px 12px; color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, var(--surface-border)); background: var(--accent-wash); font: 8.5px/1.4 ui-monospace, monospace; }.hie-container-packages-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, var(--surface-border)); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.hie-container-packages-list { flex: 1; min-height: 0; overflow: auto; }.hie-container-packages-list > div { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; padding: 7px 12px; color: var(--muted); border-bottom: 1px solid var(--surface-border); background: var(--hie-color-chrome-panel); font-size: 8px; }.hie-container-packages-list label { display: flex; align-items: center; gap: 7px; min-width: 0; }.hie-container-packages-list ul { margin: 0; padding: 0; list-style: none; }.hie-container-packages-list li { display: grid; gap: 3px; padding: 7px 12px; border-bottom: 1px solid var(--surface-border); }.hie-container-packages-list code { overflow: hidden; color: var(--hie-color-ink-soft); font: 9px/1.35 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }.hie-container-packages-list small { padding-left: 22px; color: var(--muted); font: 7.5px/1.3 ui-monospace, monospace; }.hie-container-packages-list > p { padding: 24px; color: var(--muted); font: 9px/1.5 ui-monospace, monospace; text-align: center; }
.hie-container-packages > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--surface-border); background: var(--hie-color-hub-solid); }.hie-container-packages > footer > div { display: flex; align-items: center; gap: 6px; }.hie-container-packages > footer span { color: var(--muted); font: 8px/1.3 ui-monospace, monospace; }
.hie-container-terminal { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--hie-color-hub-solid); }
.hie-container-terminal pre { flex: 1; min-height: 480px; margin: 0; overflow: auto; padding: 14px; color: var(--hie-color-ink-soft); background: var(--hie-color-hub-solid); font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.hie-container-terminal form { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--surface-border); background: var(--hie-color-hub-solid); }
.hie-container-terminal form > span { color: var(--accent); font: 700 12px ui-monospace, monospace; }
.hie-container-terminal input { flex: 1; min-width: 0; padding: 7px 9px; color: var(--text); background: var(--hie-color-hub-solid); font: 11px ui-monospace, monospace; }
.hie-container-trace { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--hie-color-hub-solid); }
.hie-container-trace-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--surface-border); background: var(--hie-color-hub-solid); }
.hie-container-trace-summary > div:first-child { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.hie-container-trace-summary > div:first-child span { padding: 3px 6px; border: 1px solid var(--surface-border-strong); border-radius: 999px; color: var(--muted); background: var(--surface-raised); font: 8px/1.25 ui-monospace, monospace; }
.hie-container-trace-summary [data-integrity="verified"], .hie-container-trace-summary [data-integrity="live-chain"], .hie-container-trace-summary [data-complete="true"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, var(--surface-border)); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.hie-container-trace-summary [data-integrity="failed"], .hie-container-trace-summary [data-complete="false"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, var(--surface-border)); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.hie-container-trace-recording { display: flex; align-items: end; gap: 6px; min-width: min(360px,48%); }
.hie-container-trace-recording label { flex: 1; display: grid; gap: 3px; color: var(--muted); font-size: 8px; }
.hie-container-trace-recording select, .hie-container-trace-controls select, .hie-container-trace-controls input { min-width: 0; padding: 5px 7px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--hie-color-chrome-input); font: 9px/1.3 ui-monospace, monospace; }
.hie-container-trace-controls { display: grid; grid-template-columns: minmax(220px,1fr) 110px minmax(140px,.6fr) auto; align-items: end; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--surface-border); background: var(--hie-color-hub-solid); }
.hie-container-trace-controls > label { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 6px; color: var(--muted); font-size: 8.5px; }
.hie-container-trace-controls > label:not(:first-child) { grid-template-columns: auto minmax(0,1fr); }.hie-container-trace-controls input[type="range"] { padding: 0; }
.hie-container-trace-controls output { color: var(--accent); font: 8px/1.3 ui-monospace, monospace; white-space: nowrap; }
.hie-container-trace-actions { display: flex; justify-content: flex-end; gap: 5px; }.hie-container-trace-actions button, .hie-container-trace-recording button { padding: 5px 7px; color: var(--hie-color-ink-soft); border-color: var(--surface-border-strong); background: var(--surface-raised); font-size: 8.5px; white-space: nowrap; }
.hie-container-trace-actions button:disabled, .hie-container-trace-recording button:disabled { opacity: .42; cursor: default; }
.hie-container-trace-annotation { grid-column: 1/-1; display: flex; align-items: end; gap: 6px; }.hie-container-trace-annotation label { flex: 1; display: grid; gap: 3px; color: var(--muted); font-size: 8px; }.hie-container-trace-annotation button { padding: 5px 9px; color: var(--hie-color-ink-soft); border-color: var(--surface-border-strong); background: var(--surface-raised); font-size: 8.5px; }.hie-container-trace-annotation button:disabled { opacity: .42; cursor: default; }
.hie-container-trace-error, .hie-container-trace-busy { margin: 0; padding: 6px 10px; border-bottom: 1px solid color-mix(in srgb, var(--danger) 38%, var(--surface-border)); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); font: 9px/1.4 ui-monospace, monospace; }.hie-container-trace-busy { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, var(--surface-border)); background: var(--accent-wash); }
.hie-container-trace-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(230px,36%) minmax(0,1fr); }
.hie-container-trace-events, .hie-container-trace-detail { min-width: 0; min-height: 0; overflow: hidden; }
.hie-container-trace-events { display: flex; flex-direction: column; border-right: 1px solid var(--surface-border); background: var(--hie-color-hub-solid); }
.hie-container-trace-events > header, .hie-container-trace-detail article > header, .hie-container-trace-projections section > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; color: var(--muted); border-bottom: 1px solid var(--surface-border); font-size: 8.5px; }
.hie-container-trace-events > div { flex: 1; overflow: auto; scrollbar-width: thin; }.hie-container-trace-events > div > p { padding: 16px; color: var(--muted); font-size: 9px; }
.hie-container-trace-events button { width: 100%; display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 2px 7px; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--surface-hover); border-left: 2px solid var(--surface-border-strong); border-radius: 0; color: var(--muted); background: transparent; text-align: left; }
.hie-container-trace-events button:hover { background: var(--surface-hover); }.hie-container-trace-events button.active { color: var(--text); border-left-color: var(--accent); background: var(--accent-wash); }
.hie-container-trace-events button > span { grid-row: 1/3; color: var(--muted); font: 8px/1.4 ui-monospace, monospace; }.hie-container-trace-events button b { overflow: hidden; font: 9px/1.3 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }.hie-container-trace-events button small { color: var(--muted); font-size: 7.5px; }
.hie-container-trace-events button[data-lane="process"] { border-left-color: var(--selection); }.hie-container-trace-events button[data-lane="network"] { border-left-color: var(--hie-color-info); }.hie-container-trace-events button[data-lane="fs"] { border-left-color: var(--warn); }
.hie-container-trace-detail { overflow: auto; background: var(--hie-color-hub-solid); }.hie-container-trace-detail article pre { max-height: 230px; overflow: auto; margin: 0; padding: 10px; color: var(--hie-color-ink-soft); background: var(--hie-color-hub-solid); font: 9px/1.5 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.hie-container-trace-projections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.hie-container-trace-projections section { min-width: 0; min-height: 120px; border-right: 1px solid var(--surface-border); border-bottom: 1px solid var(--surface-border); }.hie-container-trace-projections section:nth-child(2n) { border-right: 0; }
.hie-container-trace-projections ul { max-height: 180px; overflow: auto; margin: 0; padding: 6px 9px; list-style: none; }.hie-container-trace-projections li, .hie-container-trace-projections p, .hie-container-trace-projections section > small { overflow: hidden; margin: 0; padding: 3px 0; color: var(--muted); font: 8.5px/1.4 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }.hie-container-trace-projections p, .hie-container-trace-projections section > small { display: block; padding: 8px 9px; }
.hie-container-trace-detail > footer { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }.hie-container-trace-detail > footer span { color: var(--muted); font: 8px/1.3 ui-monospace, monospace; }
@container (max-width: 760px) { .hie-container-trace-summary { align-items: stretch; flex-direction: column; }.hie-container-trace-recording { min-width: 0; }.hie-container-trace-controls { grid-template-columns: 1fr 1fr; }.hie-container-trace-actions { grid-column: 1/-1; }.hie-container-trace-grid { grid-template-columns: minmax(190px,42%) minmax(0,1fr); }.hie-container-trace-projections { grid-template-columns: 1fr; } }

/* HIE storage is a source-declared Canvas instrument, not a settings panel.
 * It fills the node, receives content-free invalidations from the one live
 * stream, and exposes only authority-derived operations. */
.hie-storage-document { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; color: var(--text); background: var(--hie-color-hub-solid); font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.hie-storage-document button, .hie-storage-document input { font: inherit; }
.hie-storage-document button { border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); }
.hie-storage-document button:not(:disabled) { cursor: pointer; }.hie-storage-document button:not(:disabled):hover { color: var(--text); border-color: color-mix(in srgb,var(--accent) 52%,var(--surface-border)); background: var(--surface-hover); }.hie-storage-document button:focus-visible, .hie-storage-document input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }.hie-storage-document button:disabled { opacity: .42; cursor: default; }
.hie-storage-toolbar { flex: none; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }
.hie-storage-title { min-width: 0; display: flex; align-items: center; gap: 8px; }.hie-storage-title > div { min-width: 0; display: grid; gap: 1px; }.hie-storage-title strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.hie-storage-title small { overflow: hidden; color: var(--muted); font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.hie-storage-live-dot { width: 8px; height: 8px; flex: none; border: 1px solid var(--surface-border-strong); border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb,var(--muted) 10%,transparent); }.hie-storage-live-dot[data-live="true"] { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb,var(--ok) 13%,transparent),0 0 12px color-mix(in srgb,var(--ok) 36%,transparent); }
.hie-storage-toolbar-actions { display: flex; align-items: center; gap: 4px; }.hie-storage-toolbar-actions button { padding: 5px 7px; white-space: nowrap; }.hie-storage-toolbar-actions button[aria-pressed="true"] { color: var(--ok); border-color: color-mix(in srgb,var(--ok) 42%,var(--surface-border)); background: color-mix(in srgb,var(--ok) 10%,var(--surface-raised)); }
.hie-storage-navigation { flex: none; min-height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 9px; border-bottom: 1px solid var(--surface-border); }.hie-storage-navigation > div, .hie-storage-navigation nav { display: flex; align-items: center; gap: 3px; }.hie-storage-navigation button { padding: 4px 7px; border-color: transparent; color: var(--muted); background: transparent; }.hie-storage-navigation button.active { color: var(--accent-ink); border-color: color-mix(in srgb,var(--accent) 45%,var(--surface-border)); background: var(--accent-wash); }.hie-storage-navigation nav button { padding-inline: 5px; font-size: 7.5px; }
.hie-storage-error { flex: none; margin: 0; padding: 6px 10px; color: var(--danger); border-bottom: 1px solid color-mix(in srgb,var(--danger) 38%,var(--surface-border)); background: color-mix(in srgb,var(--danger) 10%,transparent); }.hie-storage-sync-bar { position: absolute; z-index: 2; right: 0; left: 0; height: 2px; overflow: hidden; background: var(--accent-wash); }.hie-storage-sync-bar::after { content: ''; display: block; width: 34%; height: 100%; background: var(--accent); animation: hie-storage-sync 1s ease-in-out infinite; }@keyframes hie-storage-sync { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
.hie-storage-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 7px; padding: 24px; color: var(--muted); text-align: center; }.hie-storage-empty strong { color: var(--hie-color-ink-soft); }.hie-storage-spinner { width: 20px; height: 20px; border: 2px solid var(--surface-border-strong); border-top-color: var(--accent); border-radius: 50%; animation: hie-storage-spin .8s linear infinite; }@keyframes hie-storage-spin { to { transform: rotate(360deg); } }
.hie-storage-map { flex: 1; min-height: 0; overflow: auto; padding: 10px; scrollbar-width: thin; }.hie-storage-map-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--surface-border); border-radius: 9px; overflow: hidden; background: var(--surface-raised); }.hie-storage-map-summary > div { min-width: 0; display: grid; gap: 3px; padding: 9px; border-right: 1px solid var(--surface-border); }.hie-storage-map-summary > div:last-child { border-right: 0; }.hie-storage-map-summary span { color: var(--muted); font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }.hie-storage-map-summary strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.hie-storage-flow { display: flex; align-items: stretch; gap: 0; padding: 13px 0; overflow-x: auto; scrollbar-width: thin; }.hie-storage-flow-step { display: flex; align-items: center; flex: 1 0 105px; min-width: 0; }.hie-storage-flow-link { width: 14px; height: 1px; flex: none; background: linear-gradient(90deg,var(--surface-border-strong),var(--accent)); }.hie-storage-flow-step button { position: relative; width: 100%; min-height: 76px; display: grid; align-content: center; justify-items: start; gap: 2px; padding: 9px; text-align: left; border-left: 2px solid var(--surface-border-strong); }.hie-storage-flow-step button > span { color: var(--accent); font-size: 14px; }.hie-storage-flow-step button b { color: var(--hie-color-ink-soft); font-size: 8.5px; text-transform: capitalize; }.hie-storage-flow-step button small { color: var(--muted); font-size: 7px; }.hie-storage-flow-step button[data-lane="source"] { border-left-color: var(--selection); }.hie-storage-flow-step button[data-lane="resources"],.hie-storage-flow-step button[data-lane="artifacts"] { border-left-color: var(--accent); }.hie-storage-flow-step button[data-lane="databases"] { border-left-color: var(--hie-color-info); }.hie-storage-flow-step button[data-lane="collaboration"] { border-left-color: var(--ok); }.hie-storage-flow-step button[data-lane="history"] { border-left-color: var(--warn); }
.hie-storage-activity { min-height: 170px; border: 1px solid var(--surface-border); border-radius: 9px; overflow: hidden; }.hie-storage-activity > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }.hie-storage-activity > header div { min-width: 0; display: grid; }.hie-storage-activity > header strong { color: var(--text); }.hie-storage-activity > header div span { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.hie-storage-signal { max-width: 42%; overflow: hidden; padding: 3px 6px; border-radius: 999px; color: var(--ok); background: color-mix(in srgb,var(--ok) 10%,transparent); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.hie-storage-activity > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 260px; overflow: auto; }.hie-storage-activity > div > button { min-width: 0; display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 1px 6px; padding: 7px 8px; border: 0; border-bottom: 1px solid var(--surface-border); border-radius: 0; text-align: left; background: transparent; }.hie-storage-activity > div > button:nth-child(odd) { border-right: 1px solid var(--surface-border); }.hie-storage-activity > div > button > span { grid-row: 1/3; align-self: center; color: var(--accent); font-size: 12px; }.hie-storage-activity > div > button b,.hie-storage-activity > div > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.hie-storage-activity > div > button b { color: var(--hie-color-ink-soft); font-weight: 500; }.hie-storage-activity > div > button small { color: var(--muted); font-size: 7px; }.hie-storage-activity > div > button[data-change="removed"] > span { color: var(--danger); }.hie-storage-activity > div > button[data-change="moment"] > span { color: var(--warn); }.hie-storage-activity > div > p { grid-column: 1/-1; margin: 0; padding: 24px; color: var(--muted); text-align: center; }
.hie-storage-workbench { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(210px,46%) minmax(0,1fr); }.hie-storage-browser { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--surface-border); }.hie-storage-browser > header { flex: none; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }.hie-storage-browser > header > div { min-width: 0; display: grid; }.hie-storage-browser > header strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }.hie-storage-browser > header span { color: var(--muted); font-size: 7px; }.hie-storage-browser > header > button { padding: 4px 6px; }.hie-storage-search { min-width: 110px; max-width: 210px; display: grid; gap: 2px; color: var(--muted); font-size: 7px; }.hie-storage-search input { min-width: 0; padding: 4px 6px; border: 1px solid var(--surface-border-strong); border-radius: 5px; color: var(--text); background: var(--hie-color-chrome-input); }
.hie-storage-browser > div[role="listbox"] { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }.hie-storage-browser > div[role="listbox"] > button { width: 100%; min-width: 0; display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 7px 8px; border: 0; border-bottom: 1px solid var(--surface-border); border-left: 2px solid transparent; border-radius: 0; text-align: left; background: transparent; }.hie-storage-browser > div[role="listbox"] > button.active { border-left-color: var(--accent); background: var(--accent-wash); }.hie-storage-browser > div[role="listbox"] > button > span:not(.hie-storage-kind-icon) { min-width: 0; display: grid; }.hie-storage-browser > div[role="listbox"] b,.hie-storage-browser > div[role="listbox"] small,.hie-storage-browser > div[role="listbox"] em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.hie-storage-browser > div[role="listbox"] b { color: var(--hie-color-ink-soft); font-weight: 500; }.hie-storage-browser > div[role="listbox"] small,.hie-storage-browser > div[role="listbox"] em { color: var(--muted); font-size: 7px; font-style: normal; }.hie-storage-browser > div[role="listbox"] > p { margin: 0; padding: 20px; color: var(--muted); text-align: center; }.hie-storage-kind-icon,.hie-storage-moment-sequence { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--surface-border); border-radius: 6px; color: var(--accent); background: var(--surface-raised); }.hie-storage-moment-sequence { color: var(--warn); font-size: 7px; }
.hie-storage-scrubber { flex: none; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 5px; padding: 6px 8px; border-bottom: 1px solid var(--surface-border); background: var(--hie-color-hub-solid); }.hie-storage-scrubber button { width: 24px; height: 22px; padding: 0; }.hie-storage-scrubber input { width: 100%; accent-color: var(--accent); }.hie-storage-scrubber output { color: var(--muted); font-size: 7px; white-space: nowrap; }
.hie-storage-detail { min-width: 0; min-height: 0; overflow: auto; padding-bottom: 12px; scrollbar-width: thin; }.hie-storage-detail > header { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }.hie-storage-detail > header > span { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--surface-border-strong); border-radius: 8px; color: var(--accent); font-size: 14px; }.hie-storage-detail > header > div { min-width: 0; display: grid; }.hie-storage-detail > header strong,.hie-storage-detail > header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.hie-storage-detail > header strong { color: var(--text); font-size: 10px; }.hie-storage-detail > header small { color: var(--muted); font-size: 7px; }.hie-storage-detail dl { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 0; margin: 0; padding: 8px 12px; }.hie-storage-detail dt,.hie-storage-detail dd { min-width: 0; margin: 0; padding: 5px 0; border-bottom: 1px solid var(--surface-border); }.hie-storage-detail dt { color: var(--muted); }.hie-storage-detail dd { overflow: hidden; color: var(--hie-color-ink-soft); text-overflow: ellipsis; }.hie-storage-detail code { color: var(--hie-color-ink-soft); font: inherit; overflow-wrap: anywhere; }.hie-storage-detail-row { display: contents; }
.hie-storage-detail-actions { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 12px 8px; }.hie-storage-detail-actions button { padding: 6px 8px; }.hie-storage-detail-actions button.primary { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }.hie-storage-document button.danger { color: var(--danger); border-color: color-mix(in srgb,var(--danger) 40%,var(--surface-border)); background: color-mix(in srgb,var(--danger) 8%,var(--surface-raised)); }
.hie-storage-moment-hero { display: grid; gap: 5px; padding: 13px 12px 8px; }.hie-storage-moment-hero > span { width: max-content; padding: 3px 6px; border-radius: 999px; color: var(--ok); background: color-mix(in srgb,var(--ok) 10%,transparent); font-size: 6.5px; letter-spacing: .08em; }.hie-storage-moment-hero > strong { color: var(--text); font-size: 13px; }.hie-storage-moment-hero p { margin: 0; color: var(--muted); }
.hie-storage-confirm { margin: 6px 12px; padding: 9px; border: 1px solid color-mix(in srgb,var(--warn) 46%,var(--surface-border)); border-radius: 8px; background: color-mix(in srgb,var(--warn) 8%,var(--surface-raised)); }.hie-storage-confirm > strong { color: var(--text); }.hie-storage-confirm p { margin: 4px 0 8px; color: var(--muted); }.hie-storage-confirm > div { display: flex; justify-content: flex-end; gap: 5px; }.hie-storage-confirm button { padding: 5px 7px; }.hie-storage-readonly { display: flex; gap: 7px; margin: 6px 12px; padding: 8px; border-radius: 7px; color: var(--muted); background: var(--surface-raised); }.hie-storage-readonly span { color: var(--accent); }.hie-storage-detail-empty { display: grid; place-content: center; justify-items: center; gap: 7px; padding: 24px; color: var(--muted); text-align: center; }.hie-storage-detail-empty > span { color: var(--accent); font-size: 20px; }.hie-storage-detail-empty p { max-width: 220px; margin: 0; }
.hie-storage-coverage { flex: none; max-height: 85px; overflow: auto; padding: 5px 9px; border-top: 1px solid var(--surface-border); color: var(--muted); background: var(--surface-raised); font-size: 7px; }.hie-storage-coverage summary { cursor: pointer; }.hie-storage-coverage p { margin: 5px 0 0; }
@container (max-width: 620px) { .hie-storage-toolbar { align-items: stretch; flex-direction: column; }.hie-storage-toolbar-actions { justify-content: flex-end; }.hie-storage-navigation { align-items: stretch; flex-direction: column; }.hie-storage-navigation > div,.hie-storage-navigation nav { overflow-x: auto; }.hie-storage-map-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }.hie-storage-map-summary > div:nth-child(2) { border-right: 0; }.hie-storage-map-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--surface-border); }.hie-storage-activity > div { grid-template-columns: 1fr; }.hie-storage-activity > div > button:nth-child(odd) { border-right: 0; }.hie-storage-workbench { grid-template-columns: 1fr; overflow: auto; }.hie-storage-browser { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--surface-border); }.hie-storage-detail { min-height: 260px; }.hie-storage-search { max-width: 150px; } }

/* First-class Rust/WasmGC compute workbench. Source and all evidence render as
 * text; addressed blobs are download-only and never injected into app HTML. */
.hie-code-editor textarea[data-scrub-target="true"] { cursor: ew-resize; }
.hie-compute-loading, .hie-compute-empty { min-height: 220px; display: grid; place-items: center; padding: 28px; color: var(--muted); background: var(--hie-color-hub-solid); font: 10.5px/1.6 ui-monospace, monospace; text-align: center; }
/* No fixed floor. .hie-node-view is a container-type: inline-size box, and
   the inline host that opens beside a node sizes it 300-560px tall — so a
   560px min-height made the editor overflow its own host at every size below
   the maximum, which is most of them. The document is a flex column that fills
   whatever box it is handed; the code pane below carries the real minimum. */
.hie-compute-document { height: 100%; min-height: 0; display: flex; flex-direction: column; color: var(--text); background: var(--hie-color-hub-solid); }
.hie-compute-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }
.hie-compute-toolbar nav, .hie-compute-actions { display: flex; align-items: center; gap: 4px; }
.hie-compute-toolbar button, .hie-compute-document select, .hie-compute-document input { border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font-size: 9.5px; }
.hie-compute-toolbar button { padding: 5px 9px; }.hie-compute-toolbar nav button.active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.hie-compute-toolbar button:disabled { opacity: .45; }.hie-compute-engine { padding: 4px 7px; border-radius: 999px; color: var(--accent); background: var(--accent-wash); font: 8.5px/1.3 ui-monospace, monospace; }
.hie-compute-error { margin: 0; padding: 8px 11px; color: var(--danger); border-bottom: 1px solid color-mix(in srgb,var(--danger) 38%,var(--surface-border)); background: color-mix(in srgb,var(--danger) 10%,transparent); font: 10px/1.45 ui-monospace, monospace; }
.hie-compute-code { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px; gap: 8px; }
.hie-compute-codebar { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 9px; }.hie-compute-codebar label { display: flex; align-items: center; gap: 6px; }.hie-compute-codebar > span { margin-left: auto; }
.hie-compute-document select, .hie-compute-document input { padding: 6px 8px; }
/* 160px, not 300: the toolbar (48), the language/output bar (~28) and the
   result strip (74 min) already claim ~150 of the inline host's 300px floor,
   so a 300px editor could only ever fit by pushing the result out of view —
   and the result is half the reason to edit here. */
.hie-compute-code .hie-code-editor { min-height: 160px; }
.hie-compute-inline-result { flex: 0 1 34%; min-height: 74px; overflow: auto; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--hie-color-hub-solid); }
.hie-compute-inline-result .hie-compute-result { padding: 9px 11px; }
.hie-compute-inline-result .hie-compute-result > header { margin-bottom: 5px; }
.hie-compute-inline-result .hie-compute-result pre { max-height: 150px; margin: 5px 0; padding: 8px; }
.hie-compute-inline-result .hie-compute-empty { min-height: 72px; padding: 12px; background: transparent; }
.hie-compute-connections { flex: 1; min-height: 0; overflow: auto; padding: 14px; }.hie-compute-connections > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); }.hie-compute-connections > header p { max-width: 620px; margin: 0; }.hie-compute-connections button { padding: 6px 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font-size: 9.5px; }.hie-compute-connection-list { display: grid; gap: 7px; margin-top: 10px; }.hie-compute-connection { display: grid; grid-template-columns: minmax(120px,.55fr) minmax(220px,1.45fr) auto auto; align-items: end; gap: 8px; padding: 10px; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--hie-color-hub-solid); }.hie-compute-connection label { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: 8.5px; }.hie-compute-connection input, .hie-compute-connection select { width: 100%; min-width: 0; }.hie-compute-connection > code { align-self: center; color: var(--accent); font: 9.5px/1.4 ui-monospace, monospace; }
.hie-compute-policy { flex: 1; overflow: auto; padding: 15px; display: grid; grid-template-columns: minmax(190px,.65fr) minmax(300px,1.35fr); gap: 12px; }
.hie-compute-policy > section, .hie-compute-evidence > section, .hie-compute-debug > section { padding: 14px; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); }
.hie-compute-policy > section > label { display: grid; gap: 5px; margin-top: 10px; color: var(--muted); font-size: 9px; }.hie-compute-policy > section > label:has(> input[type="checkbox"]) { grid-template-columns: auto 1fr; align-items: center; }.hie-compute-policy textarea { width: 100%; min-height: 150px; resize: vertical; padding: 8px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--hie-color-hub-solid); font: 9.5px/1.5 ui-monospace, monospace; }
.hie-compute-document h3 { margin: 0 0 7px; color: var(--text); font-size: 12px; }.hie-compute-document p { color: var(--muted); font-size: 9.5px; line-height: 1.5; }
.hie-compute-capabilities { display: grid; gap: 6px; margin-top: 14px; }.hie-compute-capabilities label { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--surface-border); border-radius: 7px; color: var(--hie-color-ink-soft); font: 10px ui-monospace, monospace; }
.hie-compute-limits { display: grid; grid-template-columns: repeat(2,minmax(150px,1fr)); gap: 8px; }.hie-compute-limits label { display: grid; grid-template-columns: 1fr minmax(90px,.7fr); align-items: center; gap: 5px 8px; padding: 9px; border: 1px solid var(--surface-border); border-radius: 7px; color: var(--hie-color-ink-soft); font-size: 9px; }.hie-compute-limits label > span { display: flex; justify-content: space-between; gap: 5px; }.hie-compute-limits label > small { grid-column: 1/-1; color: var(--muted); }.hie-compute-limits input { width: 100%; min-width: 0; }
.hie-compute-runs { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(190px,28%) minmax(0,1fr); }.hie-compute-runs > aside { overflow: auto; padding: 8px; border-right: 1px solid var(--surface-border); background: var(--hie-color-hub-solid); }.hie-compute-runs > aside > button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 3px 7px; margin: 2px 0; padding: 8px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; text-align: left; }.hie-compute-runs > aside > button.active { color: var(--text); background: var(--accent-wash); }.hie-compute-runs aside button small { grid-column: 1/-1; color: var(--muted); font-size: 8px; }
.hie-compute-run-controls { display: grid; gap: 6px; padding: 4px 2px 10px; border-bottom: 1px solid var(--surface-border); margin-bottom: 7px; }.hie-compute-run-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 8.5px; }
.hie-compute-result { min-width: 0; overflow: auto; padding: 14px; }.hie-compute-result > header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; color: var(--muted); }.hie-compute-result > header small { margin-left: auto; }.hie-compute-result pre, .hie-compute-evidence pre, .hie-compute-debug pre, .hie-compute-analysis pre { overflow: auto; margin: 8px 0; padding: 12px; border: 1px solid var(--surface-border); border-radius: 7px; color: var(--hie-color-ink-soft); background: var(--hie-color-hub-solid); font: 10px/1.55 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }.hie-compute-result pre.error { color: var(--danger); border-color: color-mix(in srgb,var(--danger) 38%,var(--surface-border)); background: color-mix(in srgb, var(--danger) 8%, var(--hie-color-hub-solid)); }
.hie-compute-document [data-status="ok"] { color: var(--ok); }.hie-compute-document [data-status="error"] { color: var(--danger); }.hie-compute-document [data-status="paused"] { color: var(--warn); }
.hie-compute-evidence { flex: 1; overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(2,minmax(240px,1fr)); gap: 10px; }.hie-compute-evidence dl { display: grid; grid-template-columns: 95px minmax(0,1fr); gap: 5px 9px; margin: 0; font: 9px/1.45 ui-monospace, monospace; }.hie-compute-evidence dt { color: var(--muted); }.hie-compute-evidence dd { margin: 0; overflow-wrap: anywhere; color: var(--hie-color-ink-soft); }.hie-compute-evidence ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.hie-compute-evidence li { display: grid; gap: 3px; padding: 8px; border: 1px solid var(--surface-border); border-radius: 6px; }.hie-compute-evidence a { color: var(--accent); }.hie-compute-evidence li span, .hie-compute-evidence li code { overflow-wrap: anywhere; color: var(--muted); font-size: 8.5px; }
.hie-compute-debug { flex: 1; overflow: auto; padding: 14px; }.hie-compute-debug > header { display: grid; grid-template-columns: 1fr minmax(180px,.55fr) auto; align-items: end; gap: 10px; margin-bottom: 10px; }.hie-compute-debug > header label { display: grid; gap: 4px; color: var(--muted); font-size: 8.5px; }.hie-compute-debug > section { margin-top: 9px; }.hie-compute-debug details summary, .hie-compute-result summary { cursor: pointer; color: var(--hie-color-ink-soft); font-size: 9.5px; }
.hie-compute-analysis { flex: 1; overflow: auto; padding: 14px; display: grid; grid-template-columns: minmax(200px,.5fr) minmax(0,1.5fr); gap: 12px; }.hie-compute-analysis > div:first-child { padding: 14px; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); }
@container (max-width: 650px) { .hie-compute-toolbar { align-items: flex-start; flex-direction: column; }.hie-compute-toolbar nav { width: 100%; overflow-x: auto; }.hie-compute-actions { width: 100%; justify-content: flex-end; }.hie-compute-policy, .hie-compute-evidence, .hie-compute-analysis { grid-template-columns: 1fr; }.hie-compute-runs { grid-template-columns: 1fr; }.hie-compute-runs > aside { max-height: 230px; border-right: 0; border-bottom: 1px solid var(--surface-border); }.hie-compute-debug > header { grid-template-columns: 1fr; }.hie-compute-connection { grid-template-columns: 1fr; }.hie-compute-connection > code { align-self: auto; } }

/* Browser-local capture signal and recorder artifact plane. */
.hie-signal-document { height: 100%; min-height: 500px; color: var(--text); background: var(--hie-color-hub-solid); }
.hie-signal-toolbar { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }
.hie-signal-toolbar > div { display: flex; align-items: center; gap: 7px; }.hie-signal-toolbar strong { font: 11px/1.3 ui-monospace, monospace; }.hie-signal-toolbar span { padding: 3px 7px; border-radius: 999px; color: var(--muted); background: var(--surface-border); font: 8.5px/1.3 ui-monospace, monospace; }.hie-signal-toolbar span[data-status="live"] { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.hie-signal-toolbar button, .hie-signal-document select { padding: 6px 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font-size: 9.5px; }.hie-signal-toolbar button:disabled { opacity: .45; }
.hie-signal-error { margin: 0; padding: 8px 11px; color: var(--danger); border-bottom: 1px solid color-mix(in srgb,var(--danger) 38%,var(--surface-border)); background: color-mix(in srgb,var(--danger) 10%,transparent); font: 9.5px/1.45 ui-monospace, monospace; }
.hie-signal-grid { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(300px,1.3fr); gap: 12px; padding: 14px; }.hie-signal-grid > section { min-width: 0; padding: 14px; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); }.hie-signal-grid h3 { margin: 0 0 12px; font-size: 12px; }.hie-signal-grid p { color: var(--muted); font-size: 9.5px; line-height: 1.55; }
.hie-signal-grid label { display: grid; gap: 5px; margin: 9px 0; color: var(--muted); font-size: 9px; }.hie-signal-grid select { width: 100%; }.hie-signal-checks { display: grid; gap: 5px; margin-top: 10px; }.hie-signal-checks label, .hie-signal-grid .hie-signal-check { display: flex; align-items: center; gap: 7px; margin: 0; padding: 7px; border: 1px solid var(--surface-border); border-radius: 6px; color: var(--hie-color-ink-soft); font: 9px/1.3 ui-monospace, monospace; }
.hie-signal-monitor video, .hie-signal-takes video { width: 100%; max-height: 280px; border-radius: 7px; background: #05080d; }.hie-signal-meter { height: 80px; display: flex; align-items: end; justify-content: center; gap: 7px; padding: 16px; border-radius: 7px; background: var(--hie-color-hub-solid); }.hie-signal-meter i { width: 8px; height: 12%; border-radius: 99px; background: var(--surface-border-strong); }.hie-signal-meter[data-live="true"] i { background: var(--accent); animation: hie-signal-pulse 900ms ease-in-out infinite alternate; }.hie-signal-meter[data-live="true"] i:nth-child(2), .hie-signal-meter[data-live="true"] i:nth-child(4) { animation-delay: -350ms; }.hie-signal-meter[data-live="true"] i:nth-child(3) { animation-delay: -650ms; }@keyframes hie-signal-pulse { to { height: 85%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.hie-signal-meter[data-live="true"] i { height: 48%; animation: none; }.hie-block-flash { transition: none; } }
.hie-signal-takes { display: grid; gap: 9px; max-height: 440px; overflow: auto; }.hie-signal-takes article { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--surface-border); border-radius: 7px; background: var(--surface-raised); }.hie-signal-takes article header { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: 9px/1.4 ui-monospace, monospace; }.hie-signal-takes audio { width: 100%; height: 32px; }.hie-signal-takes a { color: var(--accent); font-size: 9px; }
@container (max-width: 650px) { .hie-signal-grid { grid-template-columns: 1fr; }.hie-signal-toolbar { align-items: flex-start; flex-direction: column; }.hie-signal-toolbar > div:last-child { width: 100%; justify-content: flex-end; } }

/* @renoun/color grade editor — the preview ramp is calculated by the package,
   while this stylesheet only presents its returned colors. */
.hie-grade-empty { min-height: 400px; display: grid; place-items: center; padding: 28px; color: var(--muted); background: var(--hie-color-hub-solid); font: 10.5px/1.6 ui-monospace, monospace; }
.hie-grade-document { min-height: 560px; height: 100%; color: var(--text); background: var(--hie-color-hub-solid); }
.hie-grade-toolbar { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid var(--surface-border); background: var(--surface-raised); }
.hie-grade-toolbar > div { display: flex; align-items: center; gap: 7px; }.hie-grade-toolbar strong { font: 11px/1.3 ui-monospace, monospace; }.hie-grade-toolbar span { padding: 3px 7px; border-radius: 999px; color: var(--selection); background: color-mix(in srgb, var(--selection) 12%, transparent); font: 8.5px/1.3 ui-monospace, monospace; }
.hie-grade-toolbar button, .hie-grade-document select, .hie-grade-finishing button { padding: 6px 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font-size: 9.5px; }.hie-grade-toolbar button:disabled, .hie-grade-finishing button:disabled { opacity: .42; }
.hie-grade-error { margin: 0; padding: 8px 11px; color: var(--danger); border-bottom: 1px solid color-mix(in srgb,var(--danger) 38%,var(--surface-border)); background: color-mix(in srgb,var(--danger) 10%,transparent); font: 9.5px/1.45 ui-monospace, monospace; }
.hie-grade-layout { display: grid; grid-template-columns: minmax(250px, 34%) minmax(0, 1fr); min-height: 510px; }
.hie-grade-layout > aside { min-width: 0; padding: 13px; border-right: 1px solid var(--surface-border); overflow: auto; }.hie-grade-layout > aside section { padding: 12px; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); }.hie-grade-layout > aside section + section { margin-top: 10px; }
.hie-grade-document h3 { margin: 0 0 12px; color: var(--hie-color-ink-soft); font: 9px/1.3 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.hie-grade-layout > aside label { display: grid; gap: 5px; margin: 0 0 10px; color: var(--muted); font: 9px/1.3 ui-monospace, monospace; }.hie-grade-layout > aside label > span { display: flex; justify-content: space-between; gap: 8px; }.hie-grade-layout > aside label b { color: var(--text); font-weight: 500; }
.hie-grade-layout input[type="range"] { width: 100%; height: 4px; appearance: none; border-radius: 99px; background: linear-gradient(90deg,var(--danger),var(--selection),var(--accent)); }.hie-grade-layout input[type="range"]::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 2px solid var(--hie-color-hub-solid); border-radius: 99px; background: var(--selection); }
.hie-grade-finishing label:not(.hie-grade-check) { grid-template-columns: 1fr minmax(100px,.7fr); align-items: center; }.hie-grade-finishing select { width: 100%; }.hie-grade-finishing .hie-grade-check { display: flex; align-items: center; gap: 7px; }.hie-grade-finishing button { width: 100%; }
.hie-grade-layout > main { min-width: 0; display: grid; align-content: start; gap: 12px; padding: 15px; overflow: auto; }
.hie-grade-preview, .hie-grade-stack { overflow: hidden; border: 1px solid var(--surface-border); border-radius: 10px; background: var(--surface-raised); }.hie-grade-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--surface-border); }.hie-grade-preview > header div { display: grid; gap: 2px; }.hie-grade-preview > header strong { font-size: 11px; }.hie-grade-preview > header span { color: var(--muted); font-size: 8.5px; }.hie-grade-preview > header code { padding: 3px 6px; border-radius: 5px; color: var(--selection); background: color-mix(in srgb, var(--selection) 12%, transparent); font-size: 8.5px; }
.hie-grade-ramp { display: grid; grid-template-columns: repeat(9,minmax(34px,1fr)); min-height: 210px; }.hie-grade-ramp figure { min-width: 0; display: grid; grid-template-rows: minmax(130px,1fr) auto; margin: 0; }.hie-grade-ramp figure > span { min-height: 130px; }.hie-grade-ramp figcaption { display: grid; gap: 2px; overflow: hidden; padding: 7px 4px; color: var(--muted); font: 7.5px/1.2 ui-monospace, monospace; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.hie-grade-ramp figcaption b { color: var(--selection); font-weight: 500; }
.hie-grade-evidence { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }.hie-grade-evidence div { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--surface-raised); }.hie-grade-evidence strong { overflow: hidden; color: var(--text); font-size: 15px; text-overflow: ellipsis; }.hie-grade-evidence span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.hie-grade-stack { padding: 12px; }.hie-grade-stack > div { display: flex; flex-wrap: wrap; gap: 5px; }.hie-grade-stack > div span { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--surface-border); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font: 8.5px/1.2 ui-monospace, monospace; }.hie-grade-stack > div span b { color: var(--selection); }.hie-grade-stack p { margin: 0; color: var(--muted); font-size: 9px; }.hie-grade-stack > code, .hie-grade-stack > small { display: block; margin-top: 10px; color: var(--muted); font: 8.5px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }.hie-grade-stack > small { color: var(--muted); opacity: .8; }
.hie-grade-warning { margin: 0; padding: 8px 11px; color: var(--warn); border-bottom: 1px solid color-mix(in srgb, var(--warn) 38%, var(--surface-border)); background: color-mix(in srgb, var(--warn) 10%, transparent); font: 9.5px/1.45 ui-monospace, monospace; }
.hie-grade-picture { display: grid; place-items: center; min-height: 210px; padding: 12px; background: #05070c; }.hie-grade-picture canvas { max-width: 100%; max-height: 440px; border-radius: 5px; }
.hie-grade-scopes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.hie-grade-scopes figure { min-width: 0; display: grid; gap: 6px; margin: 0; padding: 10px; border: 1px solid var(--surface-border); border-radius: 10px; background: var(--surface-raised); }.hie-grade-scopes figcaption { color: var(--muted); font: 8.5px/1.3 ui-monospace, monospace; }.hie-grade-scopes canvas { width: 100%; border-radius: 6px; background: #080b12; }
.hie-grade-readout { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }.hie-grade-readout span { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--surface-border); border-radius: 6px; color: var(--muted); background: var(--surface-raised); font: 8.5px/1.2 ui-monospace, monospace; }.hie-grade-readout span b { color: var(--selection); font-weight: 500; }
.hie-grade-readout-empty { grid-column: 1 / -1; margin: 0; color: var(--muted); font: 9px/1.4 ui-monospace, monospace; }
.hie-grade-lut p { margin: 0 0 10px; color: var(--muted); font: 8.5px/1.4 ui-monospace, monospace; }.hie-grade-lut-loaded b { display: block; color: var(--text); font-weight: 500; }.hie-grade-lut button { width: 100%; padding: 6px 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font-size: 9.5px; }.hie-grade-lut button + button, .hie-grade-lut label + button { margin-top: 7px; }.hie-grade-lut-file input[type="file"] { color: var(--muted); font: 8.5px/1.3 ui-monospace, monospace; }.hie-grade-lut-interpolation { grid-template-columns: 1fr minmax(100px,.7fr); align-items: center; }.hie-grade-lut-interpolation select { width: 100%; }
@container (max-width: 720px) { .hie-grade-layout { grid-template-columns: 1fr; }.hie-grade-layout > aside { border-right: 0; border-bottom: 1px solid var(--surface-border); }.hie-grade-ramp { grid-template-columns: repeat(5,minmax(36px,1fr)); }.hie-grade-evidence { grid-template-columns: repeat(2,minmax(0,1fr)); }.hie-grade-scopes { grid-template-columns: 1fr; } }

/* Typeface authoring: parameter rail, property cards, live vector specimen. */
.hie-typeface { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); height: 100%; min-height: 520px; color: var(--text); background: var(--hie-color-hub-solid); }
.hie-typeface-rail { min-width: 0; min-height: 0; padding: 14px; border-right: 1px solid var(--surface-border); overflow: auto; }
.hie-typeface-actions { display: grid; gap: 5px; }.hie-typeface-derive { display: block; padding: 6px 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font: 9.5px/1.2 ui-monospace, monospace; text-align: center; cursor: pointer; }.hie-typeface-derive:hover { border-color: var(--surface-border-strong); color: var(--text); }.hie-typeface-derive input { display: none; }
.hie-typeface-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }.hie-typeface-head div { display: grid; gap: 3px; min-width: 0; }.hie-typeface-head strong { font: 13px/1.2 ui-monospace, monospace; }.hie-typeface-head span { color: var(--muted); font: 9px/1.3 ui-monospace, monospace; }
.hie-typeface button { padding: 6px 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--hie-color-ink-soft); background: var(--surface-raised); font: 9.5px/1.2 ui-monospace, monospace; cursor: pointer; }.hie-typeface button:hover:not(:disabled) { border-color: var(--surface-border-strong); color: var(--text); }.hie-typeface button:disabled { opacity: .45; cursor: default; }.hie-typeface button[data-active="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.hie-typeface-note { margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--surface-border); border-radius: 7px; color: var(--muted); background: var(--hie-color-hub-solid); font: 9px/1.5 ui-monospace, monospace; }
.hie-typeface-error { margin: 0 0 12px; padding: 8px 10px; border: 1px solid color-mix(in srgb,var(--danger) 38%,var(--surface-border)); border-radius: 7px; color: var(--danger); background: color-mix(in srgb,var(--danger) 10%,transparent); font: 9px/1.5 ui-monospace, monospace; }
.hie-typeface-group { margin-bottom: 16px; }.hie-typeface-group h3 { margin: 0 0 8px; color: var(--muted); font: 9px/1.2 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.hie-typeface-group label { display: grid; gap: 4px; margin: 0 0 9px; cursor: pointer; }.hie-typeface-group label > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted); font: 10px/1.3 ui-monospace, monospace; }.hie-typeface-group label b { color: var(--text); font-weight: 500; }
.hie-typeface-group input[type="range"] { width: 100%; height: 4px; appearance: none; border-radius: 99px; background: var(--surface-border-strong); cursor: grab; }.hie-typeface-group input[type="range"]::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 0; border-radius: 99px; background: var(--accent); }.hie-typeface-group input[type="range"]:disabled { opacity: .4; cursor: default; }
.hie-typeface-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.hie-typeface-card { display: grid; gap: 6px; margin: 0; padding: 8px; border: 1px solid var(--surface-border); border-radius: 8px; color: var(--hie-color-ink-soft); background: var(--surface-raised); }.hie-typeface-card svg { width: 100%; height: 58px; }.hie-typeface-card figcaption { color: var(--muted); font: 8.5px/1.25 ui-monospace, monospace; text-align: center; }
.hie-typeface-stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.hie-typeface-coverage { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--surface-border); overflow-x: auto; }
.hie-typeface-alphabet { display: flex; gap: 2px; margin-left: 8px; }.hie-typeface-alphabet span { min-width: 15px; color: var(--muted); opacity: .5; font: 11px/1.4 ui-monospace, monospace; text-align: center; }.hie-typeface-alphabet span[data-covered="true"] { color: var(--hie-color-ink-soft); opacity: 1; }
.hie-typeface-specimen { display: grid; align-content: center; min-height: 0; padding: 18px 14px; overflow: auto; }.hie-typeface-specimen svg { width: 100%; max-height: 100%; color: var(--text); }
.hie-typeface-diff { fill: var(--accent); fill-opacity: .22; }
.hie-typeface-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--surface-border); }.hie-typeface-foot input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px; color: var(--text); background: var(--surface-raised); font: 11px/1.3 ui-monospace, monospace; }
.hie-typeface-toggles { display: flex; gap: 5px; }.hie-typeface-toggles button { text-transform: uppercase; letter-spacing: .1em; }
@container (max-width: 720px) { .hie-typeface { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }.hie-typeface-rail { border-right: 0; border-bottom: 1px solid var(--surface-border); max-height: 46%; } }

/* ── colocation: the panels that had no container rules ────────────────────
   Written when the editors moved into their nodes. Until then these only ever
   rendered in the ~720px dock, so nothing narrower had to work; a node's pane
   is routinely half that. Each rule below collapses the one thing that
   genuinely breaks first, rather than restyling a working panel. */

/* A note's toolbar is a space-between row (nav | actions) with a 220px origin
   path. Narrow, the path squeezes the tabs until neither is usable, so the row
   becomes two and the path gives up its cap — it already ellipsizes. */
@container (max-width: 520px) {
  .hie-note-toolbar { align-items: stretch; flex-direction: column; gap: 6px; }
  .hie-note-toolbar nav { overflow-x: auto; }
  .hie-note-actions { justify-content: flex-end; }
  .hie-note-origin { max-width: none; }
}

/* png-sequence FLOORS at 520px with a 280px stage, so in a small node it
   scrolls rather than fits. Below this width it stops insisting: the floor
   drops, the stage halves, and the meta grid stacks. This is the difference
   between "a small editor" and "an editor you have to scroll to see at all". */
@container (max-width: 460px) {
  .hie-png-sequence-document { min-height: 0; }
  .hie-png-sequence-stage { min-height: 140px; }
  .hie-png-sequence-meta { grid-template-columns: 1fr; }
  .hie-png-sequence-settings input, .hie-png-sequence-settings select { min-width: 0; width: 100%; }
}

/* The terminal's header is title-left / actions-right; narrow, the actions wrap
   under the title rather than crushing it. The screen itself is already fluid. */
@container (max-width: 460px) {
  .hie-native-terminal-document > header { align-items: stretch; flex-direction: column; gap: 8px; }
  .hie-native-terminal-actions { justify-content: flex-end; }
}
.hie-typeface-subhead { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }.hie-typeface-subhead strong { font: 13px/1.2 ui-monospace, monospace; }.hie-typeface-subhead span { padding: 2px 6px; border-radius: 4px; color: var(--muted); background: var(--surface-raised); font: 8px/1.3 ui-monospace, monospace; letter-spacing: .1em; }.hie-typeface-subhead span[data-parametric="true"] { color: var(--accent); }
.hie-typeface-filmstrip { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; overflow: hidden; }.hie-typeface-filmstrip button { flex: 1; min-width: 0; padding: 4px; border: 0; background: none; color: var(--text); cursor: pointer; }.hie-typeface-filmstrip svg { width: 100%; height: 66px; }.hie-typeface-filmstrip button[data-driven="false"] { opacity: .3; }
.hie-typeface-propnav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }.hie-typeface-propnav strong { font: 11px/1.2 ui-monospace, monospace; }.hie-typeface-propnav button { padding: 2px 8px; }
.hie-typeface-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--surface-border); color: var(--muted); font: 9px/1.3 ui-monospace, monospace; letter-spacing: .1em; }
.hie-typeface-glyph-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 9px; margin: -2px 0 14px; color: var(--muted); font: 9px/1.3 ui-monospace, monospace; }.hie-typeface-glyph-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.hie-typeface-glyph-meta b { color: var(--muted); font-size: 8px; font-weight: 500; letter-spacing: .06em; }
.hie-typeface-hint { position: sticky; bottom: 0; margin: 12px 0 0; padding: 9px 10px; border: 1px solid var(--surface-border); border-radius: 7px; color: var(--muted); background: var(--hie-color-hub-solid); font: 9px/1.55 ui-monospace, monospace; }
.hie-typeface-choice { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 9px; color: var(--muted); font: 10px/1.3 ui-monospace, monospace; }.hie-typeface-choice > div { display: flex; gap: 3px; }.hie-typeface-choice button { padding: 3px 5px; }.hie-typeface-choice svg { width: 17px; height: 17px; display: block; }
.hie-typeface-dial { margin: 0 0 10px; }.hie-typeface-dial header { display: flex; align-items: baseline; justify-content: space-between; color: var(--muted); font: 10px/1.3 ui-monospace, monospace; }.hie-typeface-dial header b { color: var(--text); font-weight: 500; }.hie-typeface-dial svg { width: 62px; height: 62px; margin: 4px auto; display: block; color: var(--accent); }
.hie-typeface-group label[data-override="true"] > span b, .hie-typeface-choice[data-override="true"] > span, .hie-typeface-dial[data-override="true"] header b { color: var(--accent); }
.hie-typeface-layers { display: grid; gap: 5px; }.hie-typeface-layers label { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font: 9px/1.3 ui-monospace, monospace; cursor: pointer; }
.hie-typeface-cards button.hie-typeface-card { border: 1px solid var(--surface-border); cursor: pointer; text-align: center; }.hie-typeface-cards button.hie-typeface-card:hover { border-color: var(--surface-border-strong); }.hie-typeface-card small { color: var(--muted); font: 8px/1.2 ui-monospace, monospace; }.hie-typeface-card figcaption i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 99px; background: var(--accent); }
.hie-typeface-alphabet button { min-width: 17px; padding: 1px 2px; border: 0; border-radius: 4px; background: none; color: var(--muted); opacity: .5; font: 11px/1.4 ui-monospace, monospace; cursor: pointer; }.hie-typeface-alphabet button[data-covered="true"] { color: var(--hie-color-ink-soft); opacity: 1; }.hie-typeface-alphabet button[data-active="true"] { color: var(--accent-ink); background: var(--accent); opacity: 1; }.hie-typeface-alphabet button[data-patched="true"]:not([data-active="true"]) { color: var(--accent); opacity: 1; }
.hie-typeface-glyph { display: block; min-height: 0; overflow: hidden; }.hie-typeface-glyph svg { display: block; width: 100%; height: 100%; max-height: none; }
.hie-typeface-anchor { fill: var(--text); stroke: var(--hie-color-hub-solid); stroke-width: 1; cursor: grab; }.hie-typeface-anchor:hover { fill: var(--accent); }
.hie-typeface-handles line { pointer-events: none; }.hie-typeface-handles circle { cursor: grab; }.hie-typeface-handles circle:hover { fill: var(--warn); }
.hie-typeface-knot rect { cursor: ns-resize; }.hie-typeface-knot rect:hover { fill: var(--accent); }
.hie-analysis-document { padding: 18px; }
.hie-workspace-document { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.hie-workspace-card { padding: 13px; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); }
.hie-workspace-counts { margin: 0; color: var(--muted); font-size: 10.5px; }
.hie-workspace-open { align-self: flex-start; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--surface-border)); border-radius: 8px; background: var(--accent-wash); color: var(--accent); font-size: 11px; cursor: pointer; }
.hie-workspace-open:hover { border-color: var(--accent); }
.hie-workspace-relations h3 { margin: 0 0 6px; color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; }
.hie-workspace-relations ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hie-workspace-relations button { padding: 4px 9px; border: 1px solid var(--surface-border); border-radius: 7px; background: var(--surface-raised); color: var(--text); font-size: 10.5px; cursor: pointer; }
.hie-workspace-relations button:hover { border-color: var(--accent); color: var(--text); }
.hie-workspace-source { margin: 0; color: var(--muted); font: 9.5px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.hie-contextual-controls { margin: 0 14px 10px; border: 1px solid var(--surface-border); border-radius: 10px; background: var(--surface-raised); overflow: hidden; }
.hie-contextual-controls > summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 12px; cursor: pointer; list-style: none; color: var(--text); }
.hie-contextual-controls > summary::-webkit-details-marker { display: none; }
.hie-contextual-controls > summary > span { display: flex; align-items: baseline; gap: 8px; }.hie-contextual-controls > summary strong { font-size: 11px; }.hie-contextual-controls > summary small { color: var(--muted); font-size: 9px; }.hie-contextual-controls > summary > code { color: var(--accent); font-size: 9px; }
.hie-contextual-control-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 8px; padding: 10px; border-top: 1px solid var(--surface-border); }
.hie-contextual-control { min-width: 0; padding: 9px; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--surface-raised); }.hie-contextual-control > span { display: flex; align-items: center; gap: 5px; min-width: 0; margin-bottom: 7px; }.hie-contextual-control > span strong { overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; }.hie-contextual-control > span code { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.hie-contextual-control > span i { margin-left: auto; color: var(--accent); font-size: 7px; font-style: normal; text-transform: uppercase; letter-spacing: .05em; }
.hie-contextual-control input:not([type="checkbox"]), .hie-contextual-control select, .hie-contextual-control textarea, .hie-contextual-control button { box-sizing: border-box; width: 100%; min-height: 30px; border: 1px solid var(--surface-border-strong); border-radius: 6px; outline: none; color: var(--text); background: var(--hie-color-hub-solid); font: 10px/1.35 ui-monospace,monospace; }.hie-contextual-control input:not([type="checkbox"]), .hie-contextual-control select, .hie-contextual-control textarea { padding: 6px 8px; }.hie-contextual-control input:focus, .hie-contextual-control select:focus, .hie-contextual-control textarea:focus, .hie-contextual-control button:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 13%,transparent); }
.hie-contextual-control input[type="color"] { padding: 3px; cursor: pointer; }.hie-contextual-control button { cursor: pointer; }.hie-contextual-toggle { display: flex; align-items: center; justify-content: space-between; }.hie-contextual-toggle > span { margin-bottom: 0; }.hie-contextual-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }.hie-contextual-json { grid-column: span 2; }.hie-contextual-json textarea { resize: vertical; }
.hie-contextual-arguments { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 11px; border-top: 1px solid var(--surface-border); color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }.hie-contextual-arguments code { overflow: hidden; color: var(--hie-color-ink-soft); text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.hie-analysis-cards { display: grid; grid-template-columns: repeat(2,minmax(180px,1fr)); gap: 9px; }
.hie-analysis-card { min-height: 105px; padding: 13px; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); }
.hie-analysis-card > span { color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; }
.hie-analysis-card strong { display: block; margin-top: 6px; color: var(--text); font: 600 14px/1.3 ui-monospace, monospace; }
.hie-analysis-card p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.hie-findings, .hie-ir-list, .hie-source-facts, .hie-project-findings { margin-top: 17px; border: 1px solid var(--surface-border); border-radius: 10px; overflow: hidden; background: var(--surface-raised); }
.hie-findings .hie-section-heading { border-bottom: 1px solid var(--surface-border); }
.hie-findings h3 { font-size: 13px; }
.hie-finding { display: grid; grid-template-columns: 55px 1fr; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--surface-border); }
.hie-finding:last-child { border-bottom: 0; }
.hie-finding > span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.hie-finding.error > span { color: var(--danger); }.hie-finding.warning > span { color: var(--warn); }
.hie-finding strong { font: 600 10.5px/1.4 ui-monospace, monospace; }.hie-finding p { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.hie-clean-finding { display: flex; gap: 9px; padding: 18px 14px; color: var(--muted); font-size: 11px; }.hie-clean-finding span { color: var(--ok); }
.hie-source-facts .hie-section-heading { border-bottom: 1px solid var(--surface-border); }.hie-source-facts h3 { font-size: 13px; }
.hie-analysis-fact { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--surface-border); }
.hie-analysis-fact:last-child { border-bottom: 0; }.hie-analysis-fact > strong { color: var(--muted); font-size: 10px; }
.hie-analysis-fact > div { display: flex; flex-wrap: wrap; gap: 6px; }.hie-analysis-fact code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 3px 6px; border-radius: 5px; color: var(--hie-color-ink-soft); background: var(--surface-hover); font-size: 9.5px; }
.hie-project-findings summary, .hie-project-ir-list summary { cursor: pointer; padding: 12px 13px; color: var(--hie-color-ink-soft); font-size: 10.5px; font-weight: 650; }
.hie-project-findings[open] summary, .hie-project-ir-list[open] summary { border-bottom: 1px solid var(--surface-border); }
.hie-ir-list { padding: 13px; }.hie-ir-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--surface-border); font-size: 10.5px; }
.hie-ir-list > div:last-child { border-bottom: 0; }.hie-ir-list .ok { color: var(--ok); }.hie-ir-list .degraded { color: var(--warn); }
.hie-ir-list > div > span:first-child { min-width: 0; }.hie-ir-list small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-weight: 400; white-space: nowrap; }
.hie-ir-scope { margin: 7px 0 3px; color: var(--muted); font-size: 9.5px; line-height: 1.45; }.hie-ir-scope code { color: var(--hie-color-ink-soft); }
.hie-project-ir-list { padding: 0 13px 13px; }.hie-project-ir-list summary { margin: 0 -13px 3px; }.hie-project-ir-list:not([open]) { padding-bottom: 0; }
.hie-rsc-document { padding: 18px; color: var(--hie-color-ink-soft); font-size: 11.5px; line-height: 1.6; }
.hie-rsc-document h3, .hie-rsc-document h4 { color: var(--text); }.hie-rsc-document .pill { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 7px; border-radius: 999px; background: var(--surface-hover); }
.hie-rsc-document h4 { margin: 20px 0 5px; }.hie-rsc-document ul, .hie-rsc-document ol { padding-left: 20px; }
.hie-rsc-document li { margin: 4px 0; }.hie-rsc-document details { margin-top: 20px; padding: 11px 13px; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-raised); }
.rsc-inspector-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rsc-inspector-heading h3 { margin: 2px 0 0; }.rsc-inspector-heading code { max-width: 58%; overflow: hidden; text-overflow: ellipsis; padding: 4px 7px; border-radius: 5px; color: var(--hie-color-ink-soft); background: var(--surface-hover); font-size: 9.5px; white-space: nowrap; }
.hie-rsc-document .scope-label { color: var(--muted); font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rsc-empty-scope { padding: 10px 12px; border: 1px solid var(--surface-border-strong); border-radius: 8px; color: var(--muted); background: var(--surface-raised); }

@media (max-width: 900px) {
  .hie-scan-proof { grid-template-columns: repeat(2,1fr); }.hie-scan-step:nth-child(2) { border-right: 0; }.hie-scan-step:nth-child(-n+2) { border-bottom: 1px solid var(--surface-border); }
  .hie-next-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hie-next-step:nth-child(2) { border-right: 1px solid var(--surface-border); }
  .hie-next-step:nth-child(3) { border-right: 0; }
  .hie-next-step:nth-child(-n+3) { border-bottom: 1px solid var(--surface-border); }
  .hie-project-grid { grid-template-columns: 1fr; }.hie-route-file { display: none; }.hie-route-row { grid-template-columns: 42px minmax(80px,1fr) auto 18px; }
}
@media (max-width: 620px) {
  /* The canvas remains the full workspace on phones; contextual tools become
     bottom sheets inside this shell instead of allocating a second surface. */
  #hie-canvas-shell { width: 100%; min-width: 0; min-height: 160px; height: auto; z-index: 20; }
  .hie-project-home { padding-inline: 15px; }.hie-project-hero { padding-top: 22px; }
  .hie-open-row { flex-direction: column; }.hie-style-guide-action { align-items: stretch; flex-direction: column; gap: 13px; }.hie-analysis-cards { grid-template-columns: 1fr; }.hie-workbench-title .hie-framework-chip { display: none; }
}
@container (max-width: 680px) {
  .hie-document { min-width: 100%; flex-basis: 100%; }
  .hie-project-home { padding-inline: 15px; }
  .hie-project-hero { padding-top: 22px; }
  .hie-project-hero h1 { font-size: 30px; }
  .hie-style-guide-action { align-items: stretch; flex-direction: column; gap: 13px; }
  .hie-scan-proof { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hie-scan-step:nth-child(2) { border-right: 0; }
  .hie-scan-step:nth-child(-n+2) { border-bottom: 1px solid var(--surface-border); }
  .hie-project-grid { grid-template-columns: 1fr; }
  .hie-route-file { display: none; }
  .hie-route-row { grid-template-columns: 42px minmax(80px,1fr) auto 18px; }
  .hie-next-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hie-next-step:nth-child(2) { border-right: 0; }
  .hie-next-step:nth-child(3) { border-right: 1px solid var(--surface-border); }
  .hie-next-step:nth-child(4) { border-right: 0; }
  .hie-next-step:nth-child(-n+4) { border-bottom: 1px solid var(--surface-border); }
  .hie-next-stage .hie-section-heading { align-items: flex-start; flex-direction: column; }
  .hie-next-stage .hie-section-heading .hie-btn { align-self: stretch; }
  .hie-next-evidence { grid-template-columns: 1fr; }
  .hie-next-evidence .hie-proof-row { border-top: 1px solid var(--surface-border); border-left: 0; }
  .hie-next-evidence .hie-proof-row:first-child { border-top: 0; }
}
@container (max-width: 470px) {
  .hie-project-home { padding-inline: 10px; }
  .hie-project-hero h1 { font-size: 25px; }
  .hie-open-row { flex-direction: column; }
  .hie-analysis-cards { grid-template-columns: 1fr; }
  .hie-workbench-title .hie-framework-chip { display: none; }
  .hie-route-gallery > .hie-section-heading { align-items: flex-start; flex-direction: column; }
  .hie-route-gallery > .hie-section-heading .hie-btn { align-self: stretch; }
  .hie-route-row { min-height: 68px; grid-template-columns: 38px minmax(0,1fr) 18px; gap: 6px 8px; }
  .hie-route-badge { grid-column: 2 / 4; justify-self: start; white-space: normal; }
  .hie-route-row > span:last-child { grid-column: 3; grid-row: 1; }
  .hie-next-steps { grid-template-columns: 1fr; }
  .hie-next-step { min-height: 54px; border-right: 0; border-bottom: 1px solid var(--surface-border); }
  .hie-next-step:nth-child(2), .hie-next-step:nth-child(3), .hie-next-step:nth-child(4) { border-right: 0; }
  .hie-next-step:last-child { border-bottom: 0; }
}

/* ── notes: block editor, command menu, content search, hover cards ── */
.hie-note-document { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }
.hie-note-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--border); }
.hie-note-toolbar nav { display: flex; gap: 4px; }
.hie-note-toolbar nav button { padding: 4px 10px; border-color: transparent; background: transparent;
  color: var(--muted); font-size: 12px; text-transform: capitalize; }
.hie-note-toolbar nav button.active { border-color: var(--border); background: var(--panel-2); color: var(--text); }
.hie-note-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hie-note-origin { overflow: hidden; max-width: 220px; color: var(--muted); font: 10.5px/1.3 ui-monospace, monospace;
  text-overflow: ellipsis; white-space: nowrap; }
.hie-note-lane { flex: none; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.hie-note-lane[data-lane="coedit"] { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); color: var(--accent); }
.hie-note-lane[data-lane="read-only"] { color: var(--warn); }
.hie-note-status { flex: none; color: var(--muted); font-size: 11px; }
.hie-note-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 650; }
.hie-note-blocks { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px 40px; }
.hie-note-block { position: relative; border-radius: 8px; }
.hie-note-block:hover { background: var(--surface-raised); }
.hie-note-block .hie-block-tools { position: absolute; top: 2px; right: 2px; display: none; gap: 2px; }
.hie-note-block:hover .hie-block-tools { display: flex; }
.hie-block-tools button { padding: 1px 7px; border-color: var(--border); background: var(--panel);
  color: var(--muted); font-size: 11px; line-height: 1.6; }
.hie-block-tools button:hover { color: var(--text); }
.hie-block-preview { padding: 2px 6px; border-radius: 8px; }
.hie-block-preview.editable { cursor: text; }
.hie-block-preview .task-list-item-checkbox { cursor: pointer; accent-color: var(--accent); }
.hie-block-flash { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color .3s ease; }
.hie-block-editor { position: relative; margin: 2px 0; }
.hie-block-editor textarea { display: block; width: 100%; resize: vertical;
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.hie-wikilink-complete { position: absolute; z-index: 30; left: 8px; right: 8px; margin: 2px 0 0; padding: 4px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); list-style: none;
  box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.hie-wikilink-complete button { display: block; width: 100%; padding: 5px 8px; border: 0; background: transparent;
  color: var(--text); font: 11.5px/1.3 ui-monospace, monospace; text-align: left; border-radius: 5px; }
.hie-wikilink-complete button.active, .hie-wikilink-complete button:hover { background: var(--panel-2); color: var(--accent); }
.hie-note-add { margin-top: 10px; border-style: dashed; color: var(--muted); background: transparent; }
.hie-note-add:hover { color: var(--text); }
.hie-note-readonly { padding: 8px 2px; color: var(--muted); font-size: 11.5px; }
.hie-note-empty { display: grid; place-items: center; min-height: 160px; padding: 24px; color: var(--muted); }
.hie-note-preview { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px; }
.hie-note-source { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 14px; }
.hie-note-source-text { flex: 1; min-height: 200px; resize: none; padding: 12px; border-radius: 8px;
  border: 1px solid var(--surface-border); background: var(--surface-raised); color: var(--text);
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, monospace; outline: none; }
.hie-note-source-text:focus { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.hie-note-source-actions { display: flex; gap: 8px; }
.hie-note-source-actions button { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--surface-border-strong);
  background: var(--surface-hover); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.hie-note-source-actions button:first-child:not(:disabled) { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.hie-note-source-actions button:disabled { opacity: .45; cursor: default; }
.hie-note-info { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px; font-size: 12.5px; }
.hie-note-info h3 { margin: 14px 0 6px; color: var(--text); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.hie-note-info ul { margin: 0; padding-left: 18px; }
.hie-note-info li { margin: 3px 0; color: var(--hie-color-ink-soft); }
.hie-note-info .hie-note-info-row { width: 100%; display: flex; gap: 8px; align-items: baseline; padding: 5px 8px;
  border: 0; border-radius: 6px; background: transparent; color: var(--hie-color-ink-soft); text-align: left; font-size: 12px; }
.hie-note-info .hie-note-info-row:hover { background: var(--panel-2); color: var(--text); }
.hie-note-info .hie-note-info-line { flex: none; color: var(--muted); font: 10.5px/1.4 ui-monospace, monospace; }
.hie-note-info .hie-note-info-context { overflow: hidden; color: var(--muted); font: 11px/1.4 ui-monospace, monospace;
  text-overflow: ellipsis; white-space: nowrap; }
.hie-note-tag { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border: 1px solid var(--border);
  border-radius: 999px; color: var(--accent-2); background: transparent; font-size: 10.5px; cursor: pointer; }
.hie-note-tag:hover { border-color: var(--accent-2); }

/* The wikilink hover card (note-links.client.ts) — bounded, read-only. */
#hie-note-hover-card { position: fixed; z-index: 60; width: 340px; max-height: 300px; overflow: hidden;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  box-shadow: 0 18px 44px rgba(0,0,0,.55); pointer-events: none; }
#hie-note-hover-card .hie-hover-title { margin: 0 0 6px; color: var(--accent); font: 650 11px/1.3 ui-monospace, monospace; }
#hie-note-hover-card .html-preview { font-size: 11.5px; }

/* Agent program — provider choice, authority posture, prompt, and durable turns. */
.hie-agent-document { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 10px;
  padding: 12px; overflow: auto; color: var(--text); background: var(--hie-color-hub-solid); }
.hie-agent-document > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hie-agent-document > header > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hie-agent-document > header strong { color: var(--text); font-size: 12px; }
.hie-agent-document > header span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.hie-agent-lane { flex: none; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--surface-border)); border-radius: 999px;
  color: var(--accent) !important; background: var(--accent-wash); font: 600 9px/1.2 ui-monospace, monospace !important; }
.hie-agent-readiness { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; padding: 7px 9px;
  border: 1px solid var(--surface-border); border-radius: 7px; color: var(--muted); background: var(--hie-color-hub-solid); font-size: 9.5px; }
.hie-agent-readiness > strong { color: var(--hie-color-ink-soft); font: 650 9px/1.2 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; }
.hie-agent-provider-states { display: flex; flex-wrap: wrap; gap: 5px; }
.hie-agent-provider-state { padding: 2px 6px; border: 1px solid var(--surface-border-strong); border-radius: 999px; color: var(--muted); background: var(--surface-raised); }
.hie-agent-provider-state[data-state="ready"] { border-color: color-mix(in srgb, var(--ok) 42%, var(--surface-border)); color: var(--ok); }
.hie-agent-provider-state[data-state="signed-out"] { border-color: color-mix(in srgb, var(--warn) 42%, var(--surface-border)); color: var(--warn); }
.hie-agent-provider-state[data-state="not-installed"] { border-color: color-mix(in srgb, var(--danger) 36%, var(--surface-border)); color: var(--danger); }
.hie-agent-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hie-agent-config label, .hie-agent-guidance { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.hie-agent-config label > span, .hie-agent-guidance > span { color: var(--muted); font: 600 9px/1.2 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }
.hie-agent-config input, .hie-agent-config select, .hie-agent-guidance textarea, .hie-agent-run textarea { min-width: 0;
  padding: 7px 8px; border: 1px solid var(--surface-border-strong); border-radius: 7px; outline: none; color: var(--text); background: var(--hie-color-chrome-input);
  font: 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.hie-agent-config input:focus, .hie-agent-config select:focus, .hie-agent-guidance textarea:focus, .hie-agent-run textarea:focus { border-color: color-mix(in srgb, var(--accent) 58%, transparent); }
.hie-agent-guidance textarea { min-height: 68px; resize: vertical; }
.hie-agent-notice { padding: 8px 9px; border: 1px solid var(--surface-border); border-radius: 7px; color: var(--muted); background: var(--hie-color-hub-solid); font-size: 9.5px; line-height: 1.5; }
.hie-agent-actions, .hie-agent-run { display: flex; align-items: stretch; gap: 7px; }
.hie-agent-actions button, .hie-agent-run button { flex: none; padding: 7px 11px; border: 1px solid var(--surface-border-strong); border-radius: 7px;
  color: var(--text); background: var(--surface-raised); font: 650 10px/1.2 ui-monospace, monospace; }
.hie-agent-actions button:hover:not(:disabled), .hie-agent-run button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hie-agent-actions button:disabled, .hie-agent-run button:disabled, .hie-agent-document :is(input,select,textarea):disabled { opacity: .48; }
.hie-agent-run textarea { flex: 1; min-height: 62px; resize: vertical; }
.hie-agent-error { padding: 8px 9px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--surface-border)); border-radius: 7px; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); font-size: 10px; }
.hie-agent-turns { display: flex; flex-direction: column; gap: 8px; }
.hie-agent-turns article { padding: 9px; border: 1px solid var(--surface-border); border-radius: 8px; background: var(--hie-color-hub-solid); }
.hie-agent-turns article[data-status="error"] { border-color: color-mix(in srgb, var(--danger) 30%, var(--surface-border)); }
.hie-agent-turns article > header { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9.5px; }
.hie-agent-turns article > header strong { color: var(--ok); }.hie-agent-turns article[data-status="error"] > header strong { color: var(--danger); }
.hie-agent-prompt { margin-top: 7px; color: var(--hie-color-ink-soft); font-size: 10px; line-height: 1.45; }
.hie-agent-turns pre { overflow: auto; max-height: 320px; margin: 7px 0 0; padding: 8px; border-radius: 6px; color: var(--text); background: var(--hie-color-hub-solid);
  font: 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.hie-agent-turns small { display: block; margin-top: 6px; color: var(--ok); font-size: 9.5px; }
.hie-agent-empty { display: grid; min-height: 100px; place-items: center; color: var(--muted); font-size: 10px; }
@container (max-width: 520px) { .hie-agent-config { grid-template-columns: 1fr; }.hie-agent-run { flex-direction: column; } }

/* Native macOS terminal — ordinary web builds render only the boundary copy. */
.hie-native-terminal-document { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 10px;
  padding: 12px; background: var(--hie-color-hub-solid); }
.hie-native-terminal-document > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hie-native-terminal-document > header > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hie-native-terminal-document > header strong { color: var(--text); font-size: 12px; }
.hie-native-terminal-document > header span { overflow: hidden; color: var(--muted); font: 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis; white-space: nowrap; }
.hie-native-terminal-actions { display: flex; gap: 5px; }
.hie-native-terminal-actions button { padding: 5px 9px; border: 1px solid var(--surface-border-strong); border-radius: 6px;
  background: var(--surface-raised); color: var(--hie-color-ink-soft); font: 600 10.5px/1 ui-monospace, monospace; }
.hie-native-terminal-actions button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hie-native-terminal-actions button:disabled { opacity: .42; }
/* --terminal-* are the screen's own defaults, read back by @renoun/terminal when
   it resolves an inverse run (SGR 7): swapping needs the colours only the theme
   knows, so the package leaves those two sides to these variables. */
.hie-native-terminal-screen { --terminal-foreground: #d8e2ef; --terminal-background: #05070a;
  flex: 1; min-height: 260px; overflow: auto; margin: 0; padding: 12px;
  border: 1px solid var(--surface-border-strong); border-radius: 8px; outline: none;
  background: var(--terminal-background); color: var(--terminal-foreground);
  font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; tab-size: 8; white-space: pre; }
.hie-native-terminal-screen:focus { border-color: color-mix(in srgb, var(--accent) 58%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }
/* One element per terminal line; an empty line still occupies its row. */
.hie-native-terminal-screen .terminal-row { min-height: 1.45em; }
.hie-terminal-cursor { background: var(--terminal-foreground); color: var(--terminal-background); }
.hie-native-terminal-boundary { display: flex; min-height: 150px; flex-direction: column; justify-content: center; gap: 6px;
  padding: 20px; border: 1px dashed var(--surface-border-strong); border-radius: 9px; color: var(--muted); text-align: center; }
.hie-native-terminal-boundary strong { color: var(--text); font-size: 12px; }
.hie-native-terminal-boundary span { font-size: 11px; line-height: 1.5; }
.hie-native-mcp-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.hie-native-mcp-status code { overflow: hidden; color: var(--accent); text-overflow: ellipsis; white-space: nowrap; }
.hie-native-mcp-status button { margin-left: auto; padding: 3px 7px; border: 1px solid var(--surface-border-strong); border-radius: 5px;
  background: transparent; color: var(--hie-color-ink-soft); font-size: 9.5px; }
.hie-terminal-receipts { flex: none; border-top: 1px solid var(--surface-border); padding-top: 8px; color: var(--muted); font-size: 10.5px; }
.hie-terminal-receipts > pre { overflow: auto; padding: 8px; border-radius: 6px; background: var(--surface-raised); color: var(--hie-color-ink-soft);
  font: 10.5px/1.4 ui-monospace, monospace; white-space: pre-wrap; }