@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;
}
:root {
  --bg: #0b0e14;
  --bg-soft: #10141d;
  --panel: #131824;
  --panel-2: #1a2130;
  --border: #232c3f;
  --accent: #35e0c2;
  --accent-2: #7aa5ff;
  --warn: #f0a020;
  --danger: #f0503c;
  --ok: #62d989;
  --text: #e8ecf4;
  --muted: #8b96ab;
  --node: #161c2a;
  --node-header: #1f2a3f;
}
* { 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: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
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: #06211c; 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: #0d1119; 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: #5a6478; }
code, pre, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* GPU fabric layers: the app-sized WebGPU canvas is mounted directly under
   #hie-app so flex chrome cannot invalidate it; the camera-synced DOM preview world
   (client/gpu/previews.ts + preview-raster.ts), and the canvas hover tooltip
   (client/canvas/pick.ts). All pointer-transparent so gestures reach the stage. */
.canvas-gpu { position: absolute; inset: 0; pointer-events: none; }
.hie-prepared-frame { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; }
.preview-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.preview-layer:has(.hie-live-capture-node) { z-index: 2; }
.preview-layer .preview-world { position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-origin: 0 0; will-change: transform; }
.preview-layer .html-preview { position: absolute; }
.preview-layer .html-preview:has(.hie-live-capture-node) { z-index: 1; padding: 0; pointer-events: none; background: #05090e; }
.preview-layer .html-preview[data-preview-mode="focus"]:has(.hie-live-capture-node) { pointer-events: auto; }
.hie-live-capture-node { position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  pointer-events: inherit; background: radial-gradient(circle at 50% 20%, #1b2735, #05090e 72%); }
.hie-live-capture-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #05090e; }
.hie-live-capture-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px 14px 40px;
  color: #9ba8b9; font: 650 9px/1.35 ui-sans-serif,system-ui; text-align: center; }
.hie-live-capture-status { position: absolute; left: 6px; right: 6px; top: 6px; min-height: 21px; padding: 5px 7px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; color: #d2dbe7;
  background: rgba(5,9,14,.72); backdrop-filter: blur(12px); font: 700 7.5px/1.2 ui-sans-serif,system-ui;
  white-space: nowrap; text-overflow: ellipsis; }
.hie-live-capture-status[data-status="live"]::before { content: ''; display: inline-block; width: 5px; height: 5px;
  margin-right: 5px; border-radius: 50%; background: #58e2c8; box-shadow: 0 0 0 3px rgba(88,226,200,.12); }
.hie-live-capture-status[data-status="recording"] { color: #ffd9dd; border-color: rgba(255,102,119,.32); }
.hie-live-capture-status[data-status="recording"]::before { content: ''; display: inline-block; width: 5px; height: 5px;
  margin-right: 5px; border-radius: 50%; background: #ff6677; }
.hie-live-capture-controls { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; justify-content: center; gap: 4px; }
.hie-live-capture-controls button { min-width: 0; min-height: 27px; display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; flex: 1 1 0; padding: 4px 7px; border-color: rgba(255,255,255,.13); border-radius: 999px;
  color: #dce5ef; background: rgba(7,12,18,.82); box-shadow: 0 3px 14px rgba(0,0,0,.18); backdrop-filter: blur(12px);
  font: 700 7.5px/1 ui-sans-serif,system-ui; white-space: nowrap; }
.hie-live-capture-controls button:hover { border-color: rgba(103,230,207,.58); background: rgba(16,26,35,.92); }
.hie-live-capture-controls button[data-variant="primary"] { color: #062019; border-color: transparent; background: #67e6cf; }
.hie-live-capture-control-icon { flex: none; font-size: 7px; line-height: 1; }
.hie-live-capture-controls button:disabled { opacity: .48; }
.preview-layer .html-preview[data-preview-mode="ambient"] .hie-live-capture-controls { display: none; }
.preview-layer .html-preview[data-preview-mode="ambient"] .hie-live-capture-empty { padding: 24px 12px 12px; }
.preview-layer .html-preview[data-preview-mode="ambient"] .hie-live-capture-status { right: auto; max-width: calc(100% - 12px); }
.hover-tip { position: absolute; z-index: 7; display: none; max-width: 340px; pointer-events: none;
  background: rgba(19,24,36,0.96); 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. */
.hie-compat-canvas { position: absolute; inset: 0; overflow: auto; padding: 28px; background:
  radial-gradient(circle at 20% 0%, rgba(53,224,194,.1), transparent 32%), #0b0f16; }
.hie-compat-heading { max-width: 680px; margin-bottom: 21px; }
.hie-compat-heading > span { color: #59e4cd; font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.hie-compat-heading > strong { display: block; margin-top: 5px; color: #eef3f8; font-size: 20px; }
.hie-compat-heading > p { max-width: 620px; margin: 7px 0 0; color: #8794a8; 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: #263247; background: #111722; text-align: left; }
.hie-compat-node:hover, .hie-compat-node:focus-visible { border-color: #4bdcc3; background: #151f2d; }
.hie-compat-node > span { padding: 2px 5px; border-radius: 4px; color: #5de2ca; background: #17302e;
  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: #dce4ee; font-size: 11px; }.hie-compat-node > small { color: #718096; font: 9px/1.35 ui-monospace,monospace; }

/* ── developer workspace split ─────────────────────────────────────── */
#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: radial-gradient(circle at 45% 35%, rgba(41,55,78,.16), transparent 44%), var(--bg); }
#hie-app[data-entry-mode='launch'] { position: absolute; }
#hie-app > .canvas-gpu { z-index: 0; }
#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; }
#hie-workbench, .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 rgba(64,80,103,.72); border-radius: 13px;
  background: rgba(12,17,25,.92); box-shadow: 0 18px 54px rgba(0,0,0,.34); transform: translate(-50%,-50%);
  color: #e7edf6; pointer-events: none; backdrop-filter: blur(14px); }
.hie-boot-status[hidden] { display: none; }
.hie-boot-status-mark { display: grid; place-items: center; width: 29px; height: 29px; flex: none; border-radius: 9px;
  color: #071b17; background: linear-gradient(135deg,#76f6dc,#35caae); font: 800 17px/1 ui-monospace,monospace; }
.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: #8d9aaf; font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.hie-boot-status.failed { border-color: rgba(194,78,94,.72); pointer-events: auto; }
.hie-boot-status.failed .hie-boot-status-mark { color: #fff; background: #b9495a; }
.hie-boot-status.failed .hie-boot-status-copy small { color: #ef9eaa; white-space: normal; }
/* The shell carries the morphing cursor (set inline by @renoun/cursor) and the
   board layers under it inherit it. Chrome is not board: every island mounted
   on the shell is an id'd <div> (hud, selection toolbar, activity, notch,
   breadcrumb, layer path), while the board's own layers are the stage and
   anonymous overlays — so that structure IS the rule, and a new island needs no
   new selector here. Buttons keep their own pointer cursor from the element
   rule above. */
#hie-canvas-shell > div[id]:not(#hie-stage) { cursor: auto; }
#hie-workbench { position: relative; flex: 0 0 var(--hie-detail-width, 720px); width: var(--hie-detail-width, 720px);
  min-width: 0; height: 100%; z-index: 10; overflow: hidden; container-type: inline-size; background: #0c1018; }
#hie-splitter { position: relative; flex: 0 0 7px; width: 7px; z-index: 14; cursor: col-resize;
  background: #0b0f16; border-left: 1px solid #1e2736; border-right: 1px solid #0a0d12; touch-action: none; }
#hie-splitter::after { content: ''; position: absolute; inset: 0 2px; background: transparent; transition: background .15s; }
#hie-splitter:hover::after, #hie-splitter.dragging::after, #hie-splitter:focus-visible::after { background: var(--accent); }
#hie-splitter:focus-visible { outline: none; }
/* Keep the workbench compositor subtree alive when closed. Removing it with
   display:none makes Chromium briefly invalidate an OffscreenCanvas sibling
   while the flex tree is rebuilt; its next worker present arrives one frame
   later, which is the black flash users see. Zero-sized, invisible boxes take
   no canvas space and stay out of hit-testing/accessibility, without tearing
   down the neighboring GPU presentation layer. */
#hie-app.workbench-closed #hie-workbench,
#hie-app.workbench-closed #hie-splitter {
  flex: 0 0 0; width: 0; min-width: 0; border: 0; opacity: 0; visibility: hidden; pointer-events: none;
}
#hie-app.canvas-collapsed #hie-canvas-shell { flex: 0 0 58px; min-width: 58px; }
#hie-app.canvas-collapsed #hie-workbench { flex: 1 1 auto; width: auto; }
#hie-app.canvas-collapsed #hie-splitter { cursor: default; }
#hie-app.canvas-collapsed #hie-minimap-root { display: none; }
#hie-app.welcome-open #hie-minimap-root,
#hie-app.welcome-open #hie-selection-toolbar-root,
#hie-app.welcome-open #hie-layer-path-root { display: none; }
#hie-app.canvas-collapsed .hie-node-document { min-width: min(480px, 50%); flex: 1 1 50%; }
#hie-minimap-root { position: absolute; right: 14px; bottom: 14px; z-index: 19; pointer-events: none; }
#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 rgba(88,226,200,.22); border-radius: 12px; color: #d9e4f0; background: rgba(10,16,24,.93);
  box-shadow: 0 18px 48px -24px rgba(0,0,0,.85); 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: #8997aa; font-size: 8.5px; line-height: 1.45; }
.hie-media-privacy-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #58e2c8;
  box-shadow: 0 0 0 4px rgba(88,226,200,.1); }.hie-media-privacy-dot.requested { background: #f7c76c; box-shadow: 0 0 0 4px rgba(247,199,108,.1); }
.hie-media-privacy-dot.recording { background: #ff6677; box-shadow: 0 0 0 4px rgba(255,102,119,.12); animation: hie-coworker-pulse 1.1s ease-in-out infinite; }
.hie-media-privacy.recording { border-color: rgba(255,102,119,.34); }.hie-media-consent { border-color: rgba(247,199,108,.34); }
.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: #071018; border-color: transparent; background: #7cf3ff; 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 rgba(82,99,126,.72); border-radius: 10px;
  background: rgba(12,17,25,.9); box-shadow: 0 10px 30px rgba(0,0,0,.28); 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: #78869b; 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: #91a1b8; 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: rgba(83,224,198,.1); }
.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: rgba(7,11,17,.78); stroke: rgba(63,78,101,.7); }
.hie-canvas-minimap-item { fill: rgba(92,116,150,.58); stroke: rgba(142,164,194,.62); vector-effect: non-scaling-stroke; }
.hie-canvas-minimap-viewport { fill: rgba(83,224,198,.08); stroke: #53e0c6; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (max-width: 760px) { #hie-minimap-root { right: 8px; bottom: 8px; transform: scale(.82); transform-origin: right bottom; } }

.hie-workbench { display: flex; height: 100%; min-width: 0; flex-direction: column; background: #0c1018; 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 #202938; background: rgba(15,20,29,.96); }
.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: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px;
  color: #071b17; background: linear-gradient(135deg, #76f6dc, #35caae); font: 800 15px/1 ui-monospace, monospace; }
.hie-framework-chip { padding: 3px 7px; border: 1px solid #2b3850; border-radius: 999px; color: #aab7ca;
  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: #05211b; background: var(--accent); border-color: var(--accent); }
.hie-btn-ghost { background: #171e2b; }
.hie-btn-quiet { padding-inline: 8px; color: #aeb8c8; background: transparent; border-color: transparent; }
.hie-btn-quiet:hover { background: #171e2b; border-color: #2a3548; }
.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 #202938; background: #0b0f16; 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: #7f8a9d; 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: 2px solid #58e5cd; outline-offset: 1px; }
.hie-document-tab.active { color: #e7ecf4; background: #121824; border-color: #273143; }
.hie-tab-close { display: grid; place-items: center; width: 17px; height: 17px; flex: none; padding: 0; border: 0; border-radius: 4px; color: #778297; background: transparent; font-size: 14px; }
.hie-tab-close:hover { color: #fff; background: #2b3547; }
.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: #39465d #0b0f16; }
.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 #202938; background: #0e131d; }
.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: #8792a5; background: transparent; font-size: 18px; line-height: 1; }
.hie-icon-button:hover { color: #fff; background: #202838; border-color: #2d394e; }
.hie-empty-workbench, .hie-empty-state { display: grid; place-items: center; align-content: center; gap: 12px; min-height: 220px;
  padding: 30px; color: #7f8a9d; 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: #f3f6fb; font-size: clamp(25px, 3vw, 38px);
  line-height: 1.08; letter-spacing: -.035em; }
.hie-project-hero p { max-width: 760px; margin: 0; color: #919daf; font-size: 13px; line-height: 1.65; }
.hie-eyebrow { color: #56e6cc; 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 #263145; border-radius: 11px; background: #111722; }
.hie-scan-step { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 13px; border-right: 1px solid #263145; }
.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: #657084; background: #1b2230; font-size: 11px; }
.hie-scan-step.ready .hie-scan-dot { color: #06221d; 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: #7f8a9d; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.hie-open-project { margin-bottom: 18px; padding: 18px; border: 1px solid #2b3e4c; border-radius: 12px;
  background: linear-gradient(135deg, rgba(53,224,194,.08), rgba(49,91,171,.08)); }
.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: #8591a5; 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: #ff8d7d !important; }
.hie-cli-hint { margin-top: 10px !important; }
.hie-cli-hint span { margin-right: 7px; padding: 2px 6px; border-radius: 4px; color: #9bf4e4; background: #17322e; font-size: 9px; text-transform: uppercase; }
.hie-style-guide-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-color: #334353;
  background: radial-gradient(circle at 10% 0, rgba(53,224,194,.12), transparent 44%), linear-gradient(135deg, rgba(26,36,50,.98), rgba(17,23,34,.98)); }
.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 #253043; border-radius: 12px; background: #111722; }
.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 #253043; }
.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 #202a3a; border-radius: 0;
  color: #b8c2d1; background: transparent; text-align: left; }
.hie-route-row:last-child { border-bottom: 0; }
.hie-route-row:hover { background: #161e2b; }
.hie-route-row:disabled { opacity: .6; cursor: default; }
.hie-route-method { color: #55e0c7; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .06em; }
.hie-route-path { color: #f0f3f8; font: 600 11.5px/1.3 ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; }
.hie-route-badge { padding: 2px 6px; border: 1px solid #324059; border-radius: 999px; color: #8f9bb0; font-size: 9px; }
.hie-route-file { color: #737f93; font: 10px/1.3 ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hie-empty-list { padding: 25px 16px; color: #758197; 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 #253043; }
.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: #68e7d0; font: 10.5px/1.3 ui-monospace, monospace; text-align: right; }
.hie-proof-row p { margin: 5px 0 0; color: #7d899c; 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: #2a3548; background: #0d131d;
  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 #263145;
  border-radius: 0; color: #8b96a8; 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: #263145; color: #dfe6ef; background: #141c28; }
.hie-next-step:focus-visible { z-index: 1; outline: 2px solid #58e5cd; 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: #f1f5fa; background: linear-gradient(180deg, rgba(40,53,73,.78), rgba(20,28,40,.88)); }
.hie-next-step.active::after { background: var(--accent); box-shadow: 0 -4px 15px rgba(53,224,194,.28); }
.hie-next-step .hie-scan-dot { color: #7e8b9e; background: #1a2331; font: 700 9px/1 ui-monospace,monospace; }
.hie-next-step.ready .hie-scan-dot { color: #8bfae5; background: #12332f; box-shadow: inset 0 0 0 1px rgba(83,229,202,.18); }
.hie-next-step.degraded .hie-scan-dot { color: #ffd58b; background: #3a2c18; box-shadow: inset 0 0 0 1px rgba(240,160,32,.22); }
.hie-next-step.active .hie-scan-dot { color: #061d18; background: var(--accent); box-shadow: 0 0 0 4px rgba(53,224,194,.08); }
.hie-next-step.active.degraded .hie-scan-dot { color: #241704; background: #f0ad43; box-shadow: 0 0 0 4px rgba(240,160,32,.1); }
.hie-next-stage { overflow: hidden; padding: 0; border-color: #2a394a;
  background: linear-gradient(145deg, rgba(19,30,40,.98), rgba(15,22,34,.98));
  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 #273344;
  background: radial-gradient(circle at 16% 0, rgba(53,224,194,.08), transparent 44%); }
.hie-next-stage .hie-section-heading h2 { margin: 4px 0 0; color: #eef3f8; 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 #253143; }
.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: #dbe3ed; }
.hie-next-evidence .hie-proof-row span { display: block; overflow-wrap: anywhere; color: #63e5ce; 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 rgba(53,224,194,.78); }
.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 #242e3e; background: #111722; }
.hie-node-identity { min-width: 0; }
.hie-node-identity h2 { margin: 3px 0 0; overflow: hidden; color: #edf1f7; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.hie-node-kicker { display: flex; align-items: center; gap: 7px; overflow: hidden; color: #718096; font: 9.5px/1.3 ui-monospace, monospace; white-space: nowrap; }
.hie-node-kicker span { padding: 2px 6px; border-radius: 4px; color: #06231d; background: #65e8d0; font: 750 8.5px/1.3 ui-sans-serif, sans-serif; text-transform: uppercase; }
.hie-node-kicker em { overflow: hidden; padding: 2px 6px; border: 1px solid #2a3649; border-radius: 999px; color: #8fa0b8;
  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 #242e3e; background: #0e141e; }
.hie-node-tabs button { height: 34px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: #748197; background: transparent; font-size: 10.5px; font-weight: 650; }
.hie-node-tabs button.active { color: #e8edf5; 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: #090d13; }
.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: #8d9bb0; background: radial-gradient(circle at 20% 20%, rgba(53,224,194,.08), transparent 38%), #0a0f17; }
.hie-capability-preview > span { color: #5fe1ca; font: 800 9px/1.2 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.hie-capability-preview > strong { color: #edf3f8; font-size: clamp(25px, 4vw, 42px); line-height: 1; letter-spacing: -.035em; }
.hie-capability-preview > p { max-width: 640px; margin: 0; color: #98a6ba; font-size: 13px; line-height: 1.6; }
.hie-capability-preview > div { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #29364a; border-radius: 8px; background: #111925; }
.hie-capability-preview > div em { padding: 2px 6px; border-radius: 999px; color: #09231f; background: #5ee0c8; font-size: 8px; font-style: normal; text-transform: uppercase; }
.hie-capability-preview > div b { color: #c8d2df; font: 10px/1.3 ui-monospace, monospace; }
.hie-capability-preview > small { max-width: 640px; color: #5f6c7e; 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 #202a3a; background: #111722; }
.hie-segmented { display: flex; gap: 2px; padding: 2px; border: 1px solid #252f40; border-radius: 7px; background: #0b1018; }
.hie-segmented button { padding: 3px 7px; border: 0; border-radius: 5px; color: #758196; background: transparent; font-size: 9.5px; }
.hie-segmented button.active { color: #e8edf5; background: #263247; }
.hie-segmented button:disabled { color: #424b5b; cursor: not-allowed; text-decoration: line-through; text-decoration-color: #596273; }
.hie-static-proof { display: flex; align-items: center; gap: 6px; color: #758196; font-size: 9.5px; white-space: nowrap; }
.hie-static-proof i { width: 6px; height: 6px; border-radius: 999px; background: #54dd92; box-shadow: 0 0 0 3px rgba(84,221,146,.1); }
.hie-static-proof.degraded { color: #d8a955; }
.hie-static-proof.degraded i { background: #e7a43b; box-shadow: 0 0 0 3px rgba(231,164,59,.12); }
.hie-variant-strip { display: flex; gap: 5px; overflow-x: auto; padding: 7px 10px; border-bottom: 1px solid #202a3a; background: #0d121b; }
.hie-variant-strip button { padding: 4px 8px; border-color: #263145; color: #78859a; background: transparent; font-size: 9.5px; white-space: nowrap; }
.hie-variant-strip button.active { color: #071d18; background: #5be6cc; border-color: #5be6cc; }
.hie-preview-stage { flex: 1; min-height: 420px; overflow: auto; padding: 22px; background-color: #0a0e15;
  background-image: linear-gradient(45deg,#111823 25%,transparent 25%),linear-gradient(-45deg,#111823 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#111823 75%),linear-gradient(-45deg,transparent 75%,#111823 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 #2b3545; 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 #dce3ea; color: #687588; background: #f8fafc;
  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 #cbd5df;
  border-radius: 5px; color: #556273; background: #fff; font: 700 9px/1.2 ui-sans-serif, sans-serif; }
.hie-native-inspect-toolbar button.active { border-color: #168a78; color: #09695b; background: #dff9f3; box-shadow: 0 0 0 2px rgba(22,138,120,.08); }
.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 rgba(31,184,159,.72); }
.hie-native-inspect-outline { position: absolute; z-index: 2; min-width: 2px; min-height: 2px; pointer-events: none;
  border: 1.5px solid #15b89d; background: rgba(21,184,157,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.88), 0 2px 12px rgba(3,47,40,.22); }
.hie-native-inspect-outline.hovered { border-style: dashed; background: rgba(21,184,157,.04); }
.hie-native-inspect-outline > i { position: absolute; left: -1px; top: 0; transform: translateY(-100%); max-width: 150px; overflow: hidden;
  padding: 2px 5px; color: #fff; background: #0b7665; 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 #263142; color: #d9e2ec; background: #101722; box-shadow: inset 3px 0 #19bca1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hie-native-inspection-title > span { display: block; color: #55d8c1; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hie-native-inspection-title > strong { display: block; margin-top: 4px; color: #f1f5f8; font-size: 12px; }
.hie-native-inspection-title > p { margin: 4px 0 0; overflow-wrap: anywhere; color: #8e9bad; 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: #68768a; font-size: 8px; text-transform: uppercase; }
.hie-native-inspection dd { margin: 0; overflow-wrap: anywhere; color: #b9c4d1; font-size: 9px; }
.hie-native-inspection dd > i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border: 1px solid rgba(255,255,255,.3); 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: #344156; border-radius: 5px; color: #9aa8ba; background: #182130; font-size: 8.5px; }
.hie-native-inspection-actions button:first-child { border-color: #168a78; color: #73e4d1; background: #12302d; }
.hie-native-preview > .hie-inline-error { padding: 12px; }
.hie-native-crop-note { margin: 0; padding: 8px 11px; border-top: 1px solid #dce2ea; color: #687487;
  background: #f5f7fa; font: 9.5px/1.4 ui-monospace, monospace; }
.hie-preview-deopts { flex: none; max-height: 190px; overflow: auto; border-top: 1px solid #2d3340; background: #16130e; }
.hie-preview-deopts summary { cursor: pointer; padding: 9px 12px; color: #d7aa5b; 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 #30291d; }
.hie-preview-deopts > div span { color: #bd8d40; font: 700 8.5px/1.4 ui-monospace, monospace; text-transform: uppercase; }
.hie-preview-deopts > div p { margin: 0; color: #a9987e; 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: #0b1018; }
.hie-source-path, .hie-source-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: #748196; 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: #dce4ef; background: #080c12; 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 #243047; border-radius: 8px;
  background: radial-gradient(circle at 8% 0, rgba(83,226,194,.08), transparent 38%), #101722; }
.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: #55dfc6; font: 800 8.5px/1.2 ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }
.hie-source-intelligence > header strong { overflow: hidden; color: #e8edf5; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hie-source-intelligence > header em { flex: none; padding: 3px 7px; border-radius: 999px; color: #9eacc0; background: #1b2535; font-size: 8.5px; font-style: normal; }
.hie-source-intelligence > p { margin: 0; color: #8795aa; 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 #28354a; border-radius: 6px; color: #718096;
  background: #0c121c; font-size: 7.5px; line-height: 1.15; text-transform: uppercase; }
.hie-source-intelligence-grid > span strong { color: #dbe5f1; 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: #aebbd0; background: #182131; 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 rgba(255,255,255,.16); 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: #ed8fbc; }
.hie-source-intelligence[data-family="component"] > header span, .hie-source-intelligence[data-family="mdx"] > header span { color: #aca5ff; }
.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 #2a364a; border-radius: 8px; color: #7d8ba0; background: #080c12; text-align: center; }
.hie-source-asset-viewer strong { color: #e3e9f2; 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: #59677c; font-size: 9.5px; line-height: 1.5; }

/* 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: #080c12; }
.hie-source-lines { margin: 0; padding: 14px 14px 14px 0; list-style: none; counter-reset: hie-source-line;
  color: #dce4ef; 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: #3c485c; text-align: right; user-select: none; }
.hie-symbol-link { all: unset; cursor: pointer; color: inherit; border-bottom: 1px dashed rgba(124, 243, 255, 0.45);
  transition: background 0.12s ease, border-color 0.12s ease; }
.hie-symbol-link:hover { background: rgba(124, 243, 255, 0.12); border-bottom-color: rgba(124, 243, 255, 0.85); }
.hie-symbol-link:focus-visible { outline: 2px solid #7cf3ff; outline-offset: 1px; border-radius: 3px; }
.hie-source-outline { flex: 1; min-height: 420px; overflow: auto; border: 1px solid #1d2c2a; border-radius: 8px; background: #080f0e; }
.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 #1d2c2a; color: #53e2c2; background: #0b1715ee; font: 700 10px/1.4 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.hie-source-outline-heading span:last-child { color: #718b85; 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 #12201e; color: #dcebe7; background: transparent; text-align: left; cursor: grab; font: 11px/1.35 ui-sans-serif, system-ui, sans-serif; }
.hie-source-outline-row:hover { background: #10211d; }.hie-source-outline-row:active { cursor: grabbing; }
.hie-source-outline-kind { color: #53e2c2; font: 9px/1.3 ui-monospace, monospace; text-transform: uppercase; }
.hie-source-outline-meta { overflow: hidden; max-width: 180px; color: #718b85; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hie-source-outline-empty { margin: 0; padding: 28px 16px; color: #718b85; 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: #e6ebf5; text-align: left; white-space: pre; overflow: hidden; resize: none;
  outline: none; caret-color: #7cf3ff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(124,243,255,.45); }
.hie-ether-input::placeholder { color: rgba(230,235,245,.34); }
/* The live drag-out preview while placing a design shape/frame. */
.hie-shape-preview { position: absolute; z-index: 24; pointer-events: none; border: 1.5px solid rgba(124,243,255,.8);
  background: rgba(124,243,255,.1); border-radius: 6px; }

/* Timeline editor: lanes of durable timeline entries; drag = move, edge drag =
 * trim, Delete = remove — each gesture commits a video.ops program revision. */
.hie-timeline-document { height: 100%; min-height: 430px; display: flex; flex-direction: column; gap: 10px; padding: 12px;
  background: #0b1018; color: #dce4ef; outline: none; }
.hie-timeline-empty { flex: 1; display: grid; place-items: center; align-content: center; gap: 8px; color: #8fa0b4;
  font: 12px/1.6 ui-sans-serif, sans-serif; }
.hie-timeline-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px;
  border: 1px solid #3a3020; border-radius: 9px; background: #171307; color: #e7c97a; font: 11.5px/1.5 ui-sans-serif, sans-serif; }
.hie-timeline-toolbar { display: flex; align-items: center; gap: 12px; font: 11px/1.4 ui-monospace, monospace; color: #8b96ab; }
.hie-timeline-clock { color: #7cf3ff; }
.hie-timeline-spacer { flex: 1; }
.hie-timeline-ruler { position: relative; height: 22px; border-bottom: 1px solid #232c3f; cursor: crosshair; user-select: none; }
.hie-timeline-tick { position: absolute; top: 2px; transform: translateX(-1px); padding-left: 5px; border-left: 1px solid #2c3852;
  color: #5d6a82; font: 9.5px/1 ui-monospace, monospace; white-space: nowrap; }
.hie-timeline-lanes { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-top: 6px; }
.hie-timeline-playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: #7cf3ff; opacity: .7; pointer-events: none; z-index: 2; }
.hie-timeline-lane { display: grid; grid-template-columns: 92px 1fr; align-items: stretch; gap: 8px; min-height: 40px; }
.hie-timeline-lane-label { align-self: center; color: #8b96ab; font: 10.5px/1.3 ui-monospace, monospace; text-transform: uppercase;
  letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hie-timeline-lane-track { position: relative; border-radius: 8px; background: #0e141f; border: 1px solid #1c2536; min-height: 40px; }
.hie-timeline-clip { position: absolute; top: 5px; bottom: 5px; min-width: 8px; display: flex; align-items: center; border-radius: 6px;
  border: 1px solid #33415c; background: #1b2637; color: #d5deeb; font: 10.5px/1.2 ui-sans-serif, sans-serif; overflow: hidden;
  cursor: default; user-select: none; touch-action: none; }
.hie-timeline-clip.movable { cursor: grab; }
.hie-timeline-clip.movable:active { cursor: grabbing; }
.hie-timeline-clip.selected { border-color: #7cf3ff; box-shadow: 0 0 0 1px rgba(124,243,255,.4); }
.hie-timeline-clip-media { background: #1c2f4d; border-color: #35507e; }
.hie-timeline-clip-audio { background: #16382e; border-color: #2b5f4e; }
.hie-timeline-clip-captions { background: #3a2f18; border-color: #64522a; }
.hie-timeline-clip-keyframes { background: #33203f; border-color: #5a3a6e; }
.hie-timeline-clip-transitions { background: #40222a; border-color: #6e3a48; }
.hie-timeline-clip-sections { background: #101822; border-color: #26334a; opacity: .8; }
.hie-timeline-clip-label { flex: 1; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.hie-timeline-handle { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; touch-action: none; }
.hie-timeline-handle.start { left: 0; border-left: 2px solid rgba(124,243,255,.35); }
.hie-timeline-handle.end { right: 0; border-right: 2px solid rgba(124,243,255,.35); }
.hie-timeline-handle:hover { background: rgba(124,243,255,.18); }
.hie-timeline-hint { color: #5d6a82; font: 10.5px/1.5 ui-sans-serif, sans-serif; }
.hie-video-studio-root { width: 100%; height: 100%; min-height: 680px; overflow: hidden; background: #0b0e13; }
.hie-render-document { height: 100%; min-height: 520px; display: flex; flex-direction: column; gap: 14px; padding: 14px; overflow: auto; background: #0b0f15; color: #dfe8f3; }
.hie-render-monitor { display: grid; place-items: center; padding: 18px; border: 1px solid #202a3b; border-radius: 12px; background: #080b10; }
.hie-render-monitor-frame { position: relative; width: min(100%, 520px); display: grid; place-items: center; align-content: center; gap: 7px; border: 1px solid #29364b; background: radial-gradient(circle at 50% 44%, #172637, #0c121b 64%); box-shadow: inset 0 0 60px #05070a; color: #d9e7f4; }
.hie-render-monitor-frame small, .hie-render-resolution { color: #7f90a6; 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: #7f90a6; 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 #283349; border-radius: 8px; background: #111722; color: #e5edf6; padding: 0 9px; }
.hie-render-cache { display: grid; gap: 9px; padding: 12px; border: 1px solid #202a3b; border-radius: 10px; background: #0e141e; }
.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: #7f90a6; font: 10px/1.4 ui-monospace, monospace; }
.hie-render-cache p { margin: 0; color: #92a0b3; font-size: 11px; line-height: 1.55; }
.hie-render-segments { display: flex; gap: 2px; height: 13px; overflow: hidden; border-radius: 4px; background: #080b10; }
.hie-render-segments span { min-width: 2px; background: #ffb454; }
.hie-render-segments span.reusable { background: #45d9b1; }
.hie-render-run { align-self: flex-end; }
.hie-render-download { align-self: flex-end; color: #7cf3ff; font: 11px/1.4 ui-monospace, monospace; text-decoration: none; }
.hie-render-download:hover { text-decoration: underline; }
@media (max-width: 640px) { .hie-render-controls { grid-template-columns: 1fr; } .hie-video-studio-root { min-height: 560px; } }

/* 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: #0b1018; color: #dce4ef; }
.hie-png-sequence-stage { position: relative; flex: 1; min-height: 280px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid #263142; border-radius: 10px; background-color: #111722;
  background-image: linear-gradient(45deg, #1a2230 25%, transparent 25%), linear-gradient(-45deg, #1a2230 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a2230 75%), linear-gradient(-45deg, transparent 75%, #1a2230 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: #8fa0b4;
  text-align: center; font: 12px/1.6 ui-sans-serif, sans-serif; }
.hie-png-sequence-transparent { padding: 7px 10px; border-radius: 999px; color: #a9b8cb; background: rgba(9,14,22,.82);
  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: #7cf3ff; background: rgba(9,14,22,.82); font: 9.5px/1 ui-monospace, monospace; }
.hie-png-sequence-transport { display: flex; align-items: center; gap: 7px; color: #8b96ab; font: 10.5px/1 ui-monospace, monospace; }
.hie-png-sequence-transport input[type="range"] { min-width: 80px; flex: 1; accent-color: #68e5d1; }
.hie-png-sequence-meta { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 4px 14px; padding: 10px 12px;
  border: 1px solid #202a3b; border-radius: 9px; background: #0f151f; font: 10.5px/1.45 ui-monospace, monospace; color: #74829a; }
.hie-png-sequence-meta strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #dbe5ef; 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: #718097; 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 #2c394b;
  border-radius: 7px; color: #dce5ef; background: #101722; 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: #8fa0b4; background: #090d13; font: 11px/1.6 ui-monospace, monospace; }
.hie-container-document { height: 100%; min-height: 560px; display: flex; flex-direction: column; color: #dce5ef; background: #080d13; }
.hie-container-toolbar { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-bottom: 1px solid #263142; background: #111925; }
.hie-container-toolbar nav { display: flex; gap: 3px; }
.hie-container-toolbar button { padding: 5px 9px; border-color: #2c394b; color: #8c9aae; background: #101722; font-size: 9.5px; }
.hie-container-toolbar button.active { border-color: #4dd9c1; color: #06231d; background: #63e5ce; }
.hie-container-status { display: flex; align-items: center; gap: 7px; color: #718097; font: 9px/1.3 ui-monospace, monospace; }
.hie-container-status > span:first-child { padding: 3px 6px; border-radius: 999px; color: #6ee8cf; background: #12322f; }
.hie-container-status > span:first-child[data-state="error"] { color: #ff9a9a; background: #3a171b; }
.hie-container-error { margin: 0; padding: 8px 11px; color: #ffb1b1; border-bottom: 1px solid #4b2429; background: #261419; 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: #090e15; }
.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 #273345; border-radius: 7px; color: #80dcca; background: #0b111a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hie-container-preview iframe { flex: 1; width: 100%; min-height: 520px; border: 1px solid #303d4f; border-radius: 9px; background: #fff; box-shadow: 0 20px 60px #0008; }
.hie-container-empty { flex: 1; display: grid; place-items: center; color: #6f7d90; border: 1px dashed #2c3748; 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 #263142; background: #0c121b; }
.hie-container-files aside > div { display: flex; align-items: center; justify-content: space-between; padding: 4px 5px 8px; color: #728096; 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: #8795a9; 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: #dffaf5; background: #17312f; }
.hie-container-binary-badge { flex: none; padding: 1px 4px; border: 1px solid #4a4365; border-radius: 999px; color: #c7b9ee; background: #211b31; 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: #708095; 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 #263247; border-radius: 8px; color: #dce5ef; background: #070b11; 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 #403a57; border-radius: 8px; color: #8290a4; background: #0b0c14; font: 10px/1.5 ui-monospace, monospace; text-align: center; }
.hie-container-binary-file strong { color: #c7b9ee; 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: #718096; font-size: 9px; }
.hie-container-editor footer input { flex: 1; min-width: 0; padding: 6px 8px; color: #cdd8e5; background: #0b1119; font: 9.5px/1.3 ui-monospace, monospace; }
.hie-container-packages { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #080d13; }
.hie-container-packages > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #253043; background: #0e151f; }.hie-container-packages > header > div { display: grid; gap: 3px; }.hie-container-packages > header strong { color: #dce5ef; font-size: 10px; }.hie-container-packages > header span { color: #718096; 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 #202b3a; background: #0a1119; }.hie-container-packages-filter label { flex: 1; display: grid; gap: 3px; color: #718096; font-size: 8px; }.hie-container-packages-filter input { padding: 6px 8px; color: #cdd8e5; background: #060b11; font: 9px/1.3 ui-monospace, monospace; }
.hie-container-packages-progress, .hie-container-packages-error { margin: 0; padding: 6px 12px; color: #7fdcca; border-bottom: 1px solid #24413e; background: #102321; font: 8.5px/1.4 ui-monospace, monospace; }.hie-container-packages-error { color: #ffaca0; border-color: #4a272d; background: #25151a; }
.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: #708095; border-bottom: 1px solid #202b3a; background: #0b121b; 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 #17212d; }.hie-container-packages-list code { overflow: hidden; color: #b9c8d7; font: 9px/1.35 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }.hie-container-packages-list small { padding-left: 22px; color: #627186; font: 7.5px/1.3 ui-monospace, monospace; }.hie-container-packages-list > p { padding: 24px; color: #677589; 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 #253043; background: #0c121b; }.hie-container-packages > footer > div { display: flex; align-items: center; gap: 6px; }.hie-container-packages > footer span { color: #77869a; font: 8px/1.3 ui-monospace, monospace; }
.hie-container-terminal { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #05090e; }
.hie-container-terminal pre { flex: 1; min-height: 480px; margin: 0; overflow: auto; padding: 14px; color: #c4d8d3; background: #05090e; 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 #253043; background: #0c121b; }
.hie-container-terminal form > span { color: #63e5ce; font: 700 12px ui-monospace, monospace; }
.hie-container-terminal input { flex: 1; min-width: 0; padding: 7px 9px; color: #e2ebf4; background: #080d14; font: 11px ui-monospace, monospace; }
.hie-container-trace { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #070b11; }
.hie-container-trace-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-bottom: 1px solid #253043; background: #0e151f; }
.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 #2d3a4d; border-radius: 999px; color: #8e9bad; background: #111a26; 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: #72e8d2; border-color: #245248; background: #102b28; }
.hie-container-trace-summary [data-integrity="failed"], .hie-container-trace-summary [data-complete="false"] { color: #ffaca0; border-color: #5a2c30; background: #2c171c; }
.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: #718096; 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 #2b384a; border-radius: 6px; color: #b7c3d1; background: #090f17; 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 #253043; background: #0b1119; }
.hie-container-trace-controls > label { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 6px; color: #718096; 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: #7fdcca; 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: #a4b1c2; border-color: #2b384a; background: #111a26; 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: #718096; font-size: 8px; }.hie-container-trace-annotation button { padding: 5px 9px; color: #a4b1c2; border-color: #2b384a; background: #111a26; 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 #3b2930; color: #ffaca0; background: #21151a; font: 9px/1.4 ui-monospace, monospace; }.hie-container-trace-busy { color: #7fdcca; border-color: #24413e; background: #102321; }
.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 #253043; background: #080d14; }
.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: #8795a8; border-bottom: 1px solid #222d3d; 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: #667489; 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 #151e2a; border-left: 2px solid #344157; border-radius: 0; color: #8897aa; background: transparent; text-align: left; }
.hie-container-trace-events button:hover { background: #101925; }.hie-container-trace-events button.active { color: #dcf9f3; border-left-color: #63e5ce; background: #12302d; }
.hie-container-trace-events button > span { grid-row: 1/3; color: #5f6e83; 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: #657388; font-size: 7.5px; }
.hie-container-trace-events button[data-lane="process"] { border-left-color: #a785e8; }.hie-container-trace-events button[data-lane="network"] { border-left-color: #5da8e8; }.hie-container-trace-events button[data-lane="fs"] { border-left-color: #e4bd67; }
.hie-container-trace-detail { overflow: auto; background: #090e15; }.hie-container-trace-detail article pre { max-height: 230px; overflow: auto; margin: 0; padding: 10px; color: #b9c8d7; background: #060a0f; 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 #222d3d; border-bottom: 1px solid #222d3d; }.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: #77869a; 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: #8492a5; 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; } }

/* 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-compute-loading, .hie-compute-empty { min-height: 220px; display: grid; place-items: center; padding: 28px; color: #8290a4; background: #090d13; font: 10.5px/1.6 ui-monospace, monospace; text-align: center; }
.hie-compute-document { height: 100%; min-height: 560px; display: flex; flex-direction: column; color: #dce5ef; background: #080d13; }
.hie-compute-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #263142; background: #111925; }
.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 #2c394b; border-radius: 6px; color: #aab6c6; background: #0d141e; font-size: 9.5px; }
.hie-compute-toolbar button { padding: 5px 9px; }.hie-compute-toolbar nav button.active { border-color: #4dd9c1; color: #06231d; background: #63e5ce; }
.hie-compute-toolbar button:disabled { opacity: .45; }.hie-compute-engine { padding: 4px 7px; border-radius: 999px; color: #6ee8cf; background: #12322f; font: 8.5px/1.3 ui-monospace, monospace; }
.hie-compute-error { margin: 0; padding: 8px 11px; color: #ffb1b1; border-bottom: 1px solid #4b2429; background: #261419; 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: #718096; 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; }.hie-compute-code textarea { flex: 1; width: 100%; min-height: 520px; resize: none; padding: 14px; border: 1px solid #263247; border-radius: 8px; color: #dce5ef; background: #070b11; font: 11.5px/1.62 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
.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 #263145; border-radius: 9px; background: #101722; }.hie-compute-connections > header p { max-width: 620px; margin: 0; }.hie-compute-connections button { padding: 6px 9px; border: 1px solid #2c394b; border-radius: 6px; color: #aab6c6; background: #0d141e; 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 #263145; border-radius: 8px; background: #0c121b; }.hie-compute-connection label { min-width: 0; display: grid; gap: 4px; color: #718096; 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: #63e5ce; 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 #263145; border-radius: 9px; background: #101722; }
.hie-compute-document h3 { margin: 0 0 7px; color: #dce5ef; font-size: 12px; }.hie-compute-document p { color: #7e8a9e; 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 #263145; border-radius: 7px; color: #a9b7c9; 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 #263145; border-radius: 7px; color: #9ba8ba; 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: #657286; }.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 #263142; background: #0c121b; }.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: #93a1b4; background: transparent; text-align: left; }.hie-compute-runs > aside > button.active { color: #dffaf5; background: #17312f; }.hie-compute-runs aside button small { grid-column: 1/-1; color: #68768a; font-size: 8px; }
.hie-compute-run-controls { display: grid; gap: 6px; padding: 4px 2px 10px; border-bottom: 1px solid #253043; margin-bottom: 7px; }.hie-compute-run-controls label { display: grid; gap: 4px; color: #718096; 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: #8c99ab; }.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 #232e3e; border-radius: 7px; color: #c7d4e3; background: #070b11; font: 10px/1.55 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }.hie-compute-result pre.error { color: #ffb1b1; border-color: #4b2429; background: #211216; }
.hie-compute-document [data-status="ok"] { color: #6ee8a5; }.hie-compute-document [data-status="error"] { color: #ff8f8f; }.hie-compute-document [data-status="paused"] { color: #ffd073; }
.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: #647287; }.hie-compute-evidence dd { margin: 0; overflow-wrap: anywhere; color: #aebccd; }.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 #273347; border-radius: 6px; }.hie-compute-evidence a { color: #63e5ce; }.hie-compute-evidence li span, .hie-compute-evidence li code { overflow-wrap: anywhere; color: #708095; 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: #718096; font-size: 8.5px; }.hie-compute-debug > section { margin-top: 9px; }.hie-compute-debug details summary, .hie-compute-result summary { cursor: pointer; color: #9cabbc; 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 #263145; border-radius: 9px; background: #101722; }
@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 #263142; }.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: #dce5ef; background: #080d13; }
.hie-signal-toolbar { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid #263142; background: #111925; }
.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: #8391a4; background: #1b2533; font: 8.5px/1.3 ui-monospace, monospace; }.hie-signal-toolbar span[data-status="live"] { color: #57e0c6; background: #12352f; }
.hie-signal-toolbar button, .hie-signal-document select { padding: 6px 9px; border: 1px solid #2d394a; border-radius: 6px; color: #acb8c8; background: #0d141e; font-size: 9.5px; }.hie-signal-toolbar button:disabled { opacity: .45; }
.hie-signal-error { margin: 0; padding: 8px 11px; color: #ffb1b1; border-bottom: 1px solid #4b2429; background: #261419; 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 #263145; border-radius: 9px; background: #101722; }.hie-signal-grid h3 { margin: 0 0 12px; font-size: 12px; }.hie-signal-grid p { color: #7f8da1; font-size: 9.5px; line-height: 1.55; }
.hie-signal-grid label { display: grid; gap: 5px; margin: 9px 0; color: #8190a4; 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 #263145; border-radius: 6px; color: #a4b1c2; 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: #080d13; }.hie-signal-meter i { width: 8px; height: 12%; border-radius: 99px; background: #344254; }.hie-signal-meter[data-live="true"] i { background: #4dd9c1; 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 #273347; border-radius: 7px; background: #0a1018; }.hie-signal-takes article header { display: flex; justify-content: space-between; gap: 8px; color: #8998ab; font: 9px/1.4 ui-monospace, monospace; }.hie-signal-takes audio { width: 100%; height: 32px; }.hie-signal-takes a { color: #63e5ce; 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: #8290a4; background: #080d13; font: 10.5px/1.6 ui-monospace, monospace; }
.hie-grade-document { min-height: 560px; height: 100%; color: #dce5ef; background: #080d13; }
.hie-grade-toolbar { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid #263142; background: #111925; }
.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: #ed9bc3; background: #341a2a; 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 #3c3041; border-radius: 6px; color: #d2b9c8; background: #171019; 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: #ffb1b1; border-bottom: 1px solid #4b2429; background: #261419; 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 #263142; overflow: auto; }.hie-grade-layout > aside section { padding: 12px; border: 1px solid #2c293b; border-radius: 9px; background: #10131d; }.hie-grade-layout > aside section + section { margin-top: 10px; }
.hie-grade-document h3 { margin: 0 0 12px; color: #cdbac7; 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: #8e8190; 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: #e7d9e3; font-weight: 500; }
.hie-grade-layout input[type="range"] { width: 100%; height: 4px; appearance: none; border-radius: 99px; background: linear-gradient(90deg,#b94f89,#734ed8,#35cdb1); }.hie-grade-layout input[type="range"]::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 2px solid #160e17; border-radius: 99px; background: #f1b0d0; }
.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 #2c293b; border-radius: 10px; background: #10131d; }.hie-grade-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-bottom: 1px solid #2c293b; }.hie-grade-preview > header div { display: grid; gap: 2px; }.hie-grade-preview > header strong { font-size: 11px; }.hie-grade-preview > header span { color: #81788a; font-size: 8.5px; }.hie-grade-preview > header code { padding: 3px 6px; border-radius: 5px; color: #e8a4c7; background: #291724; 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: #6f6877; font: 7.5px/1.2 ui-monospace, monospace; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.hie-grade-ramp figcaption b { color: #d690b4; 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 #2c293b; border-radius: 8px; background: #10131d; }.hie-grade-evidence strong { overflow: hidden; color: #edc0d7; font-size: 15px; text-overflow: ellipsis; }.hie-grade-evidence span { color: #766d7b; 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 #392a38; border-radius: 6px; color: #c9b6c4; background: #171019; font: 8.5px/1.2 ui-monospace, monospace; }.hie-grade-stack > div span b { color: #f0a8cb; }.hie-grade-stack p { margin: 0; color: #776e7b; font-size: 9px; }.hie-grade-stack > code, .hie-grade-stack > small { display: block; margin-top: 10px; color: #8b7d89; font: 8.5px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }.hie-grade-stack > small { color: #716676; }
@container (max-width: 720px) { .hie-grade-layout { grid-template-columns: 1fr; }.hie-grade-layout > aside { border-right: 0; border-bottom: 1px solid #263142; }.hie-grade-ramp { grid-template-columns: repeat(5,minmax(36px,1fr)); }.hie-grade-evidence { grid-template-columns: repeat(2,minmax(0,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: #dce5ef; background: #080d13; }
.hie-typeface-rail { min-width: 0; min-height: 0; padding: 14px; border-right: 1px solid #263142; overflow: auto; }
.hie-typeface-actions { display: grid; gap: 5px; }.hie-typeface-derive { display: block; padding: 6px 9px; border: 1px solid #2d394a; border-radius: 6px; color: #acb8c8; background: #0d141e; font: 9.5px/1.2 ui-monospace, monospace; text-align: center; cursor: pointer; }.hie-typeface-derive:hover { border-color: #3d4c62; color: #dce5ef; }.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: #7f8da1; font: 9px/1.3 ui-monospace, monospace; }
.hie-typeface button { padding: 6px 9px; border: 1px solid #2d394a; border-radius: 6px; color: #acb8c8; background: #0d141e; font: 9.5px/1.2 ui-monospace, monospace; cursor: pointer; }.hie-typeface button:hover:not(:disabled) { border-color: #3d4c62; color: #dce5ef; }.hie-typeface button:disabled { opacity: .45; cursor: default; }.hie-typeface button[data-active="true"] { border-color: #2f7f70; color: #6fe7cf; background: #10241f; }
.hie-typeface-note { margin: 0 0 12px; padding: 8px 10px; border: 1px solid #2a3a4e; border-radius: 7px; color: #8fa2b8; background: #0d151f; font: 9px/1.5 ui-monospace, monospace; }
.hie-typeface-error { margin: 0 0 12px; padding: 8px 10px; border: 1px solid #4b2429; border-radius: 7px; color: #ffb1b1; background: #261419; font: 9px/1.5 ui-monospace, monospace; }
.hie-typeface-group { margin-bottom: 16px; }.hie-typeface-group h3 { margin: 0 0 8px; color: #8190a4; 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: #9daaba; font: 10px/1.3 ui-monospace, monospace; }.hie-typeface-group label b { color: #dce5ef; font-weight: 500; }
.hie-typeface-group input[type="range"] { width: 100%; height: 4px; appearance: none; border-radius: 99px; background: #1d2836; cursor: grab; }.hie-typeface-group input[type="range"]::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 0; border-radius: 99px; background: #6fe7cf; }.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 #263145; border-radius: 8px; color: #cfdae8; background: #101722; }.hie-typeface-card svg { width: 100%; height: 58px; }.hie-typeface-card figcaption { color: #7f8da1; 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 #263142; overflow-x: auto; }
.hie-typeface-alphabet { display: flex; gap: 2px; margin-left: 8px; }.hie-typeface-alphabet span { min-width: 15px; color: #2f3b4d; font: 11px/1.4 ui-monospace, monospace; text-align: center; }.hie-typeface-alphabet span[data-covered="true"] { color: #b9c7d8; }
.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: #e7eef7; }
.hie-typeface-diff { fill: #6fe7cf; fill-opacity: .22; }
.hie-typeface-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid #263142; }.hie-typeface-foot input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid #2d394a; border-radius: 6px; color: #dce5ef; background: #0d141e; 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 #263142; max-height: 46%; } }
.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: #7f8da1; background: #131b26; font: 8px/1.3 ui-monospace, monospace; letter-spacing: .1em; }.hie-typeface-subhead span[data-parametric="true"] { color: #6fe7cf; }
.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: #dce5ef; 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 #1e2836; color: #7f8da1; font: 9px/1.3 ui-monospace, monospace; letter-spacing: .1em; }
.hie-typeface-hint { position: sticky; bottom: 0; margin: 12px 0 0; padding: 9px 10px; border: 1px solid #263145; border-radius: 7px; color: #9fb0c4; background: #0d151f; 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: #9daaba; 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: #9daaba; font: 10px/1.3 ui-monospace, monospace; }.hie-typeface-dial header b { color: #dce5ef; font-weight: 500; }.hie-typeface-dial svg { width: 62px; height: 62px; margin: 4px auto; display: block; color: #6fe7cf; }
.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: #6fe7cf; }
.hie-typeface-layers { display: grid; gap: 5px; }.hie-typeface-layers label { display: flex; align-items: center; gap: 7px; margin: 0; color: #9daaba; font: 9px/1.3 ui-monospace, monospace; cursor: pointer; }
.hie-typeface-cards button.hie-typeface-card { border: 1px solid #263145; cursor: pointer; text-align: center; }.hie-typeface-cards button.hie-typeface-card:hover { border-color: #3d4c62; }.hie-typeface-card small { color: #5f6d80; 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: #6fe7cf; }
.hie-typeface-alphabet button { min-width: 17px; padding: 1px 2px; border: 0; border-radius: 4px; background: none; color: #2f3b4d; font: 11px/1.4 ui-monospace, monospace; cursor: pointer; }.hie-typeface-alphabet button[data-covered="true"] { color: #b9c7d8; }.hie-typeface-alphabet button[data-active="true"] { color: #0b0f16; background: #6fe7cf; }.hie-typeface-alphabet button[data-patched="true"]:not([data-active="true"]) { color: #6fe7cf; }
.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: #f8fafc; stroke: #0b0f16; stroke-width: 1; cursor: grab; }.hie-typeface-anchor:hover { fill: #6fe7cf; }
.hie-typeface-knot rect { cursor: ns-resize; }.hie-typeface-knot rect:hover { fill: #6fe7cf; }
.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 #263145; border-radius: 9px; background: #111722; }
.hie-workspace-counts { margin: 0; color: #748196; font-size: 10.5px; }
.hie-workspace-open { align-self: flex-start; padding: 7px 12px; border: 1px solid #2b4f47; border-radius: 8px; background: #12201d; color: #5eead4; font-size: 11px; cursor: pointer; }
.hie-workspace-open:hover { border-color: #5eead4; }
.hie-workspace-relations h3 { margin: 0 0 6px; color: #718096; 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 #263145; border-radius: 7px; background: #111722; color: #dbe5f1; font-size: 10.5px; cursor: pointer; }
.hie-workspace-relations button:hover { border-color: #5eead4; color: #eef4fb; }
.hie-workspace-source { margin: 0; color: #55627a; font: 9.5px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; }
.hie-contextual-controls { margin: 0 14px 10px; border: 1px solid #283449; border-radius: 10px; background: #101722; 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: #dbe5f1; }
.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: #748196; font-size: 9px; }.hie-contextual-controls > summary > code { color: #5eead4; 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 #222d3f; }
.hie-contextual-control { min-width: 0; padding: 9px; border: 1px solid #253147; border-radius: 8px; background: #131c29; }.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: #dbe5f1; font-size: 10px; text-overflow: ellipsis; }.hie-contextual-control > span code { overflow: hidden; color: #76869c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.hie-contextual-control > span i { margin-left: auto; color: #5eead4; 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 #314158; border-radius: 6px; outline: none; color: #dce6f2; background: #0c121c; 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: #5eead4; box-shadow: 0 0 0 2px #5eead422; }
.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: #5eead4; }.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 #222d3f; color: #708096; font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }.hie-contextual-arguments code { overflow: hidden; color: #9eb0c6; 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 #263145; border-radius: 9px; background: #111722; }
.hie-analysis-card > span { color: #718096; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; }
.hie-analysis-card strong { display: block; margin-top: 6px; color: #dfe6f0; font: 600 14px/1.3 ui-monospace, monospace; }
.hie-analysis-card p { margin: 5px 0 0; color: #748196; font-size: 10px; line-height: 1.45; }
.hie-findings, .hie-ir-list, .hie-source-facts, .hie-project-findings { margin-top: 17px; border: 1px solid #263145; border-radius: 10px; overflow: hidden; background: #111722; }
.hie-findings .hie-section-heading { border-bottom: 1px solid #263145; }
.hie-findings h3 { font-size: 13px; }
.hie-finding { display: grid; grid-template-columns: 55px 1fr; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #222c3c; }
.hie-finding:last-child { border-bottom: 0; }
.hie-finding > span { color: #7e8a9e; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.hie-finding.error > span { color: #ff796b; }.hie-finding.warning > span { color: #f3b04b; }
.hie-finding strong { font: 600 10.5px/1.4 ui-monospace, monospace; }.hie-finding p { margin: 3px 0 0; color: #7e8a9e; font-size: 10.5px; line-height: 1.45; }
.hie-clean-finding { display: flex; gap: 9px; padding: 18px 14px; color: #7e8a9e; font-size: 11px; }.hie-clean-finding span { color: #54dd92; }
.hie-source-facts .hie-section-heading { border-bottom: 1px solid #263145; }.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 #222c3c; }
.hie-analysis-fact:last-child { border-bottom: 0; }.hie-analysis-fact > strong { color: #8c99ab; 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: #c7d7eb; background: #182131; font-size: 9.5px; }
.hie-project-findings summary, .hie-project-ir-list summary { cursor: pointer; padding: 12px 13px; color: #aeb8c7; font-size: 10.5px; font-weight: 650; }
.hie-project-findings[open] summary, .hie-project-ir-list[open] summary { border-bottom: 1px solid #263145; }
.hie-ir-list { padding: 13px; }.hie-ir-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #222c3c; font-size: 10.5px; }
.hie-ir-list > div:last-child { border-bottom: 0; }.hie-ir-list .ok { color: #55d991; }.hie-ir-list .degraded { color: #f3b04b; }
.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: #748196; font-weight: 400; white-space: nowrap; }
.hie-ir-scope { margin: 7px 0 3px; color: #748196; font-size: 9.5px; line-height: 1.45; }.hie-ir-scope code { color: #b8c8dc; }
.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: #aeb8c7; font-size: 11.5px; line-height: 1.6; }
.hie-rsc-document h3, .hie-rsc-document h4 { color: #edf1f7; }.hie-rsc-document .pill { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 7px; border-radius: 999px; background: #26334a; }
.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 #263145; border-radius: 9px; background: #111722; }
.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: #b8c8dc; background: #182131; font-size: 9.5px; white-space: nowrap; }
.hie-rsc-document .scope-label { color: #718096; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rsc-empty-scope { padding: 10px 12px; border: 1px solid #2b3545; border-radius: 8px; color: #8f9bad; background: #101722; }

@media (max-width: 900px) {
  #hie-workbench { max-width: calc(100vw - 58px); }
  .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 #263145; }
  .hie-next-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hie-next-step:nth-child(2) { border-right: 1px solid #263145; }
  .hie-next-step:nth-child(3) { border-right: 0; }
  .hie-next-step:nth-child(-n+3) { border-bottom: 1px solid #263145; }
  .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) {
  #hie-app { flex-direction: column; }
  #hie-canvas-shell { width: 100%; min-width: 0; min-height: 160px; height: auto; }
  #hie-workbench { width: 100%; max-width: none; height: auto; min-height: 280px;
    flex: 0 0 var(--hie-detail-width, 360px); }
  #hie-splitter { width: 100%; height: 7px; flex: 0 0 7px; cursor: row-resize;
    border-top: 1px solid #1e2736; border-right: 0; border-bottom: 1px solid #0a0d12; border-left: 0; }
  #hie-splitter::after { inset: 2px 0; }
  #hie-app.workbench-closed #hie-workbench,
  #hie-app.workbench-closed #hie-splitter { width: 100%; height: 0; min-height: 0; }
  #hie-app.canvas-collapsed #hie-canvas-shell { width: 100%; min-width: 0; min-height: 58px; flex: 0 0 58px; }
  #hie-app.canvas-collapsed #hie-workbench { width: 100%; height: auto; flex: 1 1 auto; }
  .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 #263145; }
  .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 #263145; }
  .hie-next-step:nth-child(4) { border-right: 0; }
  .hie-next-step:nth-child(-n+4) { border-bottom: 1px solid #263145; }
  .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 #253143; 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 #263145; }
  .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: #1f5c50; 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: #06211c; 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: rgba(255,255,255,0.02); }
.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 rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); color: var(--text);
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, monospace; outline: none; }
.hie-note-source-text:focus { border-color: rgba(124,243,255,0.35); }
.hie-note-source-actions { display: flex; gap: 8px; }
.hie-note-source-actions button { padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.hie-note-source-actions button:first-child:not(:disabled) { background: linear-gradient(180deg,#3b82f6,#2563eb); border-color: transparent; color: #fff; }
.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: #b8c2d1; }
.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: #b8c2d1; 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; }

/* 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: #080b10; }
.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: #eef6ff; font-size: 12px; }
.hie-native-terminal-document > header span { overflow: hidden; color: #7f8da3; 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 #29354a; border-radius: 6px;
  background: #111824; color: #b9c7da; font: 600 10.5px/1 ui-monospace, monospace; }
.hie-native-terminal-actions button:hover:not(:disabled) { border-color: #35e0c2; color: #eafffb; }
.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 #202b3d; 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: rgba(53,224,194,.58); box-shadow: inset 0 0 0 1px rgba(53,224,194,.12); }
/* 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 #2d384b; border-radius: 9px; color: #8492a7; text-align: center; }
.hie-native-terminal-boundary strong { color: #c9d4e4; 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: #718096; font-size: 10px; }
.hie-native-mcp-status code { overflow: hidden; color: #83cfc2; text-overflow: ellipsis; white-space: nowrap; }
.hie-native-mcp-status button { margin-left: auto; padding: 3px 7px; border: 1px solid #29354a; border-radius: 5px;
  background: transparent; color: #9cabc0; font-size: 9.5px; }
.hie-terminal-receipts { flex: none; border-top: 1px solid #1c2533; padding-top: 8px; color: #8492a7; font-size: 10.5px; }
.hie-terminal-receipts > pre { overflow: auto; padding: 8px; border-radius: 6px; background: #0d121a; color: #aebbcf;
  font: 10.5px/1.4 ui-monospace, monospace; white-space: pre-wrap; }

/* Node/screen preview content — ONE source of truth shared with the GPU texture
   rasterizer (client/gpu/preview-raster.ts). Owns .html-preview/.screen-preview. */

.html-preview, .html-preview * { box-sizing: border-box; }
.html-preview { width: 100%; height: 100%; overflow: hidden; background: #f7f8fb; color: #131722;
  border-radius: 8px; padding: 7px; font: 12px/1.35 system-ui, sans-serif; }
.html-preview > svg { display: block; width: 100%; height: 100%; }
.artifact-chip { width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column;
  gap: 3px; overflow: hidden; padding: 6px; border-radius: 6px; color: #e2e8f0; background: #101722;
  font: 10px/1.3 ui-sans-serif, system-ui, sans-serif; }
.artifact-chip-kind { color: #5eead4; font-size: 7.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.artifact-chip-label { overflow: hidden; font-size: 13px; font-weight: 650; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.html-preview:has(.style-guide-preview), .html-preview:has(.stylesheet-preview) { container-type: inline-size; }
.html-preview h1 { font-size: 17px; margin: 0 0 6px; }
.html-preview nav { display: flex; gap: 10px; }
.html-preview footer { color: #667; font-size: 12px; }
/* A dynamic value binding (an unbound JSX expression like {count}). Rendered as
   a clean inline token — a subtle mono pill that reads as "a live value goes
   here" — instead of a cramped striped placeholder box that the label overflows. */
.html-preview .jsx-expr { display: inline-block; max-width: 150px; padding: 0 5px; vertical-align: baseline;
  border-radius: 4px; font: 500 11px/1.5 ui-monospace, SFMono-Regular, monospace; font-style: normal;
  color: #5b6bd6; background: #eef1fb; border: 1px solid #dde3f6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.html-preview .jsx-component { display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 11px;
  font-family: ui-monospace, monospace; color: #4b62d8; background: #eaeefb; border: 1px solid #d2dbf4; }
.html-preview p { margin: 4px 0; }
.html-preview em { font-style: normal; }
/* semantic-kind previews: package cards, export signatures, readme */
.pkg-card { font: 12px/1.45 system-ui, sans-serif; }
.pkg-card .pkg-name { font-weight: 700; font-size: 12.5px; word-break: break-all; }
.pkg-card .pkg-version { font-weight: 400; color: #64748b; margin-left: 6px; font-size: 10.5px; }
.pkg-card .pkg-desc { margin: 4px 0; color: #475569; font-size: 11px; }
.pkg-card .pkg-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.pkg-card .pkg-stats span { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: #e8edf5; color: #334155; }
.export-sig { margin: 0; font: 10.5px/1.5 ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; color: #1e293b; }
.source-card, .export-card { display: flex; height: 100%; min-height: 100%; flex-direction: column; gap: 5px; overflow: hidden;
  padding: 1px; font: 11px/1.35 system-ui, sans-serif; }
.source-card header, .export-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: #667085; font: 700 8.5px/1.2 ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }
.source-card header em, .export-card header em { overflow: hidden; padding: 2px 6px; border-radius: 999px;
  background: #e8edf5; color: #475569; font-style: normal; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.source-card > strong, .export-card > strong { overflow: hidden; color: #172033; font-size: 14px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.source-card > p { display: -webkit-box; overflow: hidden; margin: 0; color: #526078; font-size: 9.5px; line-height: 1.35;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.source-card-items { display: flex; min-height: 20px; gap: 4px; overflow: hidden; }
.source-card-items code { overflow: hidden; max-width: 92px; padding: 3px 6px; border: 1px solid #dfe5ef; border-radius: 5px;
  background: #f0f3f8; color: #37445a; font: 9px/1.15 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.source-card-colors { display: flex; height: 22px; gap: 4px; }
.source-card-colors i { width: 22px; border: 1px solid rgba(15,23,42,.13); border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.source-card-facts { display: flex; gap: 4px; overflow: hidden; margin-top: auto; }
.source-card-facts span { display: grid; min-width: 42px; padding: 4px 6px; border: 1px solid #e1e6ef; border-radius: 5px; background: #fff; color: #68758b;
  font-size: 7.5px; line-height: 1.1; text-transform: uppercase; white-space: nowrap; }
.source-card-facts b { color: #1f2b41; font-size: 10px; text-transform: none; }
.source-card[data-family="component"] header > span, .source-card[data-family="mdx"] header > span { color: #5b55d5; }
.source-card[data-family="styles"] header > span, .source-card[data-family="font"] header > span { color: #b34c7c; }
.source-card[data-family="markdown"] header > span, .source-card[data-family="data"] header > span { color: #287c68; }
.export-card .export-sig { max-height: 54px; padding: 7px; border: 1px solid #e1e6ef; background: #f1f4f8; }
.export-card footer { margin-top: auto; color: #718096; font: 8.5px/1.2 ui-monospace, monospace; }
.html-preview h2, .html-preview h3 { font-size: 14px; margin: 8px 0 4px; }
.html-preview pre { background: #eef2f8; border-radius: 6px; padding: 6px 8px; overflow: hidden; font-size: 10.5px; }
.html-preview code { font-size: 11px; }
/* CSSIR style guide. The graphite shell stays deliberately neutral so the
   project's own color, type, spacing, radius, and shadow tokens are the visual
   subject. The same responsive document is useful as a dense canvas card and
   as a scrollable split-workbench preview. */
.style-guide-preview { width: 100%; height: 100%; min-height: 100%; container-type: inline-size; overflow: auto;
  padding: 14px; border: 1px solid #202938; border-radius: 8px; color: #e8edf5;
  background: radial-gradient(circle at 92% -8%, rgba(107,114,255,.16), transparent 34%),
    radial-gradient(circle at 3% 4%, rgba(53,224,194,.09), transparent 30%), #0b1018;
  font: 11px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; scrollbar-color: #3b4659 transparent; }
.style-guide-preview .sg-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 2px 2px 13px; }
.style-guide-preview .sg-eyebrow { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 5px; color: #70ead4;
  font: 750 8px/1.2 ui-monospace, SFMono-Regular, monospace; letter-spacing: .12em; text-transform: uppercase; }
.style-guide-preview .sg-eyebrow::before { width: 5px; height: 5px; border-radius: 999px; background: #53e0c2;
  box-shadow: 0 0 0 3px rgba(83,224,194,.1); content: ''; }
.style-guide-preview .sg-title { margin: 0; color: #f4f7fb; font-size: clamp(16px, 4cqi, 25px); line-height: 1.05; letter-spacing: -.035em; }
.style-guide-preview .sg-subtitle { max-width: 520px; margin: 7px 0 0; color: #8793a6; font-size: 9.5px; line-height: 1.5; }
.style-guide-preview .sg-hero > :last-child:not(:first-child) { flex: none; padding: 5px 8px; border: 1px solid #313d51; border-radius: 999px;
  color: #b7c3d3; background: rgba(18,25,37,.78); font: 700 8px/1 ui-monospace, SFMono-Regular, monospace; }
.style-guide-preview .sg-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden;
  border: 1px solid #252f40; border-radius: 7px; background: rgba(16,22,33,.76); }
.style-guide-preview .sg-stat { min-width: 0; padding: 9px 10px; border-left: 1px solid #252f40; }
.style-guide-preview .sg-stat:first-child { border-left: 0; }
.style-guide-preview .sg-stat strong { display: block; overflow: hidden; color: #f0f4f9; font: 650 14px/1.15 ui-monospace, SFMono-Regular, monospace; text-overflow: ellipsis; white-space: nowrap; }
.style-guide-preview .sg-stat span { display: block; margin-top: 3px; overflow: hidden; color: #727f93; font-size: 7.5px; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.style-guide-preview .sg-section { margin-top: 14px; }
.style-guide-preview .sg-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.style-guide-preview .sg-section-head h2 { margin: 0; color: #dce3ec; font-size: 10px; line-height: 1.2; letter-spacing: -.01em; }
.style-guide-preview .sg-section-head span, .style-guide-preview .sg-section-head p { margin: 0; overflow: hidden; color: #667489; font: 7.5px/1.3 ui-monospace, SFMono-Regular, monospace; text-overflow: ellipsis; white-space: nowrap; }
.style-guide-preview .sg-swatches { display: grid; grid-template-columns: repeat(auto-fit,minmax(84px,1fr)); gap: 6px; }
.style-guide-preview .sg-swatch { min-width: 0; overflow: hidden; border: 1px solid #252f40; border-radius: 7px; background: #111823; }
.style-guide-preview .sg-swatch-color { display: block; height: 43px; border-bottom: 1px solid rgba(4,8,13,.22); background-image: linear-gradient(135deg,rgba(255,255,255,.08),transparent 55%); }
.style-guide-preview .sg-swatch > :not(.sg-swatch-color) { padding-right: 7px; padding-left: 7px; }
.style-guide-preview .sg-token-name { display: block; margin-top: 6px; overflow: hidden; color: #dbe3ed; font: 650 8px/1.3 ui-monospace, SFMono-Regular, monospace; text-overflow: ellipsis; white-space: nowrap; }
.style-guide-preview .sg-token-value { display: block; margin: 2px 0 6px; overflow: hidden; color: #718096; font: 7px/1.3 ui-monospace, SFMono-Regular, monospace; text-overflow: ellipsis; white-space: nowrap; }
.style-guide-preview .sg-type-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 6px; }
.style-guide-preview .sg-type-sample { min-width: 0; padding: 10px; overflow: hidden; border: 1px solid #252f40; border-radius: 7px; color: #e8edf5; background: #101721; }
.style-guide-preview .sg-type-sample > :first-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-guide-preview .sg-type-sample .sg-token-name { margin-top: 7px; }
.style-guide-preview .sg-scale { display: flex; flex-direction: column; gap: 5px; padding: 9px; border: 1px solid #252f40; border-radius: 7px; background: #101721; }
.style-guide-preview .sg-scale-row { display: grid; grid-template-columns: minmax(56px,.7fr) minmax(42px,1.3fr) auto; align-items: center; gap: 8px; min-height: 13px; }
.style-guide-preview .sg-scale-row .sg-token-name, .style-guide-preview .sg-scale-row .sg-token-value { margin: 0; }
.style-guide-preview .sg-scale-bar { display: block; width: min(100%,var(--sg-size,100%)); height: 5px; border-radius: 999px;
  background: linear-gradient(90deg,#5fe5cd,#7185ff); box-shadow: 0 0 12px rgba(92,225,203,.13); }
.style-guide-preview .sg-radius-grid, .style-guide-preview .sg-shadow-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(88px,1fr)); gap: 6px; }
.style-guide-preview .sg-radius-sample, .style-guide-preview .sg-shadow-sample { min-width: 0; min-height: 56px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px; overflow: hidden; border: 1px solid #2a3547; color: #dce4ed; background: #151d29; }
.style-guide-preview .sg-radius-sample .sg-token-name, .style-guide-preview .sg-shadow-sample .sg-token-name { margin-top: 0; }
.style-guide-preview .sg-provenance { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 5px; }
.style-guide-preview .sg-source { min-width: 0; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 7px;
  padding: 7px 8px; border: 1px solid #252f40; border-radius: 6px; color: #9aa6b8; background: #0f1620;
  font: 7.5px/1.3 ui-monospace, SFMono-Regular, monospace; }
.style-guide-preview .sg-source::before { width: 6px; height: 6px; border-radius: 2px; background: #59677c; content: ''; }
.style-guide-preview .sg-source[data-loaded="true"]::before, .style-guide-preview .sg-source.loaded::before { background: #55dfc5; box-shadow: 0 0 0 3px rgba(85,223,197,.08); }
.style-guide-preview .sg-source > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-guide-preview .sg-source > :last-child:not(:first-child) { color: #627087; }
@container (max-width: 300px) {
  .style-guide-preview { padding: 9px; }
  .style-guide-preview .sg-hero { display: block; padding-bottom: 9px; }
  .style-guide-preview .sg-title { font-size: 15px; }
  .style-guide-preview .sg-subtitle, .style-guide-preview .sg-hero > :last-child:not(:first-child) { display: none; }
  .style-guide-preview .sg-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .style-guide-preview .sg-stat { padding: 7px; border-bottom: 1px solid #252f40; }
  .style-guide-preview .sg-stat:nth-child(odd) { border-left: 0; }
  .style-guide-preview .sg-stat:nth-last-child(-n+2) { border-bottom: 0; }
  .style-guide-preview .sg-stat strong { font-size: 11px; }
  .style-guide-preview .sg-section { margin-top: 9px; }
  .style-guide-preview .sg-section-head { margin-bottom: 5px; }
  .style-guide-preview .sg-section-head span, .style-guide-preview .sg-section-head p { display: none; }
  .style-guide-preview .sg-swatches { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
  .style-guide-preview .sg-swatch-color { height: 30px; }
  .style-guide-preview .sg-swatch:nth-child(n+5) { display: none; }
  .style-guide-preview .sg-type-grid, .style-guide-preview .sg-provenance { grid-template-columns: 1fr; }
}
@container (min-width: 720px) {
  .style-guide-preview { padding: 22px; font-size: 13px; }
  .style-guide-preview .sg-eyebrow { font-size: 10px; }
  .style-guide-preview .sg-subtitle { font-size: 12px; }
  .style-guide-preview .sg-section-head h2 { font-size: 13px; }
  .style-guide-preview .sg-token-name { font-size: 10px; }
  .style-guide-preview .sg-token-value, .style-guide-preview .sg-source { font-size: 9px; }
}
/* One compact, source-backed stylesheet artifact. Relationship chips are the
   useful payload here: a sheet never reads like a disconnected file card. */
.stylesheet-preview { width: 100%; height: 100%; min-height: 100%; container-type: inline-size; overflow: hidden;
  padding: 10px; border: 1px solid #2b2938; border-radius: 8px; color: #e8e9f0;
  background: radial-gradient(circle at 100% 0, rgba(181,114,255,.13), transparent 42%), #10121a;
  font: 9px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; }
.stylesheet-preview .ss-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.stylesheet-preview .ss-kicker { display: block; margin-bottom: 3px; color: #ca9df6; font: 750 7px/1.2 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .1em; text-transform: uppercase; }
.stylesheet-preview .ss-title { margin: 0; overflow: hidden; color: #f1f2f7; font-size: 12px; line-height: 1.15; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.stylesheet-preview .ss-head > :last-child:not(:first-child) { flex: none; padding: 3px 6px; border: 1px solid #3a3c4e; border-radius: 999px;
  color: #aeb5c3; background: rgba(26,29,41,.88); font: 700 6.5px/1 ui-monospace, SFMono-Regular, monospace; text-transform: uppercase; }
.stylesheet-preview .ss-path { margin: 5px 0 7px; overflow: hidden; color: #747f91; font: 7px/1.3 ui-monospace, SFMono-Regular, monospace; text-overflow: ellipsis; white-space: nowrap; }
.stylesheet-preview .ss-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; border: 1px solid #2a2e3c; border-radius: 6px; background: rgba(20,23,33,.85); }
.stylesheet-preview .ss-metric { min-width: 0; padding: 6px 7px; border-left: 1px solid #2a2e3c; }
.stylesheet-preview .ss-metric:first-child { border-left: 0; }
.stylesheet-preview .ss-metric strong { display: block; color: #e5e7ee; font: 650 10px/1.1 ui-monospace, SFMono-Regular, monospace; }
.stylesheet-preview .ss-metric span { display: block; margin-top: 2px; overflow: hidden; color: #6f798c; font-size: 6px; letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.stylesheet-preview .ss-relations { display: flex; gap: 4px; margin-top: 7px; overflow: hidden; }
.stylesheet-preview .ss-chip { max-width: 105px; flex: none; overflow: hidden; padding: 3px 6px; border: 1px solid #343747; border-radius: 999px;
  color: #aeb5c4; background: #191c27; font: 6.5px/1.2 ui-monospace, SFMono-Regular, monospace; text-overflow: ellipsis; white-space: nowrap; }
.stylesheet-preview .ss-chip:first-child { color: #d5b2f8; border-color: #463957; background: #201a2a; }
.stylesheet-preview .ss-foot { margin-top: 6px; overflow: hidden; color: #626d80; font-size: 6.5px; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 220px) {
  .stylesheet-preview .ss-head > :last-child:not(:first-child), .stylesheet-preview .ss-foot { display: none; }
  .stylesheet-preview .ss-path { margin-bottom: 6px; }
  .stylesheet-preview .ss-relations { margin-top: 6px; }
}
@container (min-width: 520px) {
  .stylesheet-preview { padding: 16px; font-size: 12px; }
  .stylesheet-preview .ss-kicker, .stylesheet-preview .ss-path,
  .stylesheet-preview .ss-chip, .stylesheet-preview .ss-foot { font-size: 9px; }
  .stylesheet-preview .ss-title { font-size: 16px; }
}
/* screen programs: the stored tree rendered inside the node — scaled preview,
   white page ground, its own <style> applies inside this container only. */
.screen-preview { width: 100%; height: 100%; overflow: hidden; background: #ffffff; color: #131722;
  border-radius: 8px; font: 13px/1.4 system-ui, sans-serif; }
/* run previews (server-projected runPreviewHtml — inside node previews AND the
   inspector) + the run viewer. Status classes tint by lifecycle: running
   pulses, finished is ok-green, failed is red, gates are amber. These render
   on the LIGHT preview background and the dark inspector, so tints ride
   borders/colors that read on both. */
.run-preview { display: flex; flex-direction: column; gap: 3px; font: 10.5px/1.45 ui-monospace, monospace; }
.run-status { display: inline-block; width: max-content; font-size: 10px; font-weight: 700; padding: 1px 8px;
  border-radius: 999px; border: 1px solid #94a3b8; color: #475569; text-transform: uppercase; letter-spacing: 0.05em; }
.run-status-running { color: #0369a1; border-color: #38bdf8; animation: pulse 1.6s infinite; }
.run-status-queued { color: #64748b; border-color: #94a3b8; }
.run-status-awaiting-approval { color: #92600a; border-color: #f0a020; }
.run-status-finished { color: #15803d; border-color: #22c55e; }
.run-status-failed { color: #b91c1c; border-color: #ef4444; }
.run-status-cancelled { color: #64748b; border-color: #94a3b8; text-decoration: line-through; }
.run-preview .run-gate, .run-view .run-banner { color: #92600a; }
.run-preview .run-active { color: #0369a1; }
.run-steps, .run-timeline { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.run-step, .run-row { display: flex; gap: 8px; align-items: baseline; }
.run-step-id, .run-row-id { font-weight: 700; }
.run-step-usage, .run-step-duration, .run-row-usage, .run-row-ms { opacity: 0.75; font-variant-numeric: tabular-nums; }
.run-step[data-status="failed"], .run-row[data-status="failed"] { color: #ef4444; }
.run-step[data-status="skipped"], .run-row[data-status="skipped"] { opacity: 0.6; }
.run-total { opacity: 0.75; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .run-status-running { animation: none; } }