diff --git a/.gitignore b/.gitignore
index c066ee1..0d57d11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -146,3 +146,8 @@ temp/
 CLAUDE.md
 COMMIT.org
 PR.org
+
+# Personal context content — each contributor's own .org notes
+# loaded by <UiOrgContent> for live overlays. The rendering
+# plumbing is tracked; the content is private.
+@kyonax_on_tech/data/contexts/
diff --git a/@kyonax_on_tech/sources.js b/@kyonax_on_tech/sources.js
index 141bda6..0dfce01 100644
--- a/@kyonax_on_tech/sources.js
+++ b/@kyonax_on_tech/sources.js
@@ -43,6 +43,37 @@ export default [
     triggers: [],
     status: 'ready',
   },
+  {
+    id: 'context-screen',
+    type: 'hud',
+    brand: '@kyonax_on_tech',
+    name: 'CONTEXT-SCREEN',
+    description:
+      'News-style **lower-third HUD** for the **CONTEXT scene**. '
+      + 'Surfaces the **video title**, a short **description**, '
+      + 'a **talking-point marquee**, and a **toggleable right '
+      + 'sidebar** that renders the **full parsed .org context** '
+      + '(headlines, lists, **checklists**, **tables**, **code '
+      + 'blocks**, **#+RESULTS evaluations**, links). Authored '
+      + 'per video as a small **.org file** in the brand folder.',
+    use_cases: [
+      'video context overlay',
+      'news-style lower third',
+      'topic outline',
+      'code walkthrough sidebar',
+      'talking-points reel',
+    ],
+    path: '/@kyonax_on_tech/context-screen',
+    width: CANVAS_WIDTH,
+    height: CANVAS_HEIGHT,
+    fps: TARGET_FPS,
+    requires: [
+      '.org files at @kyonax_on_tech/data/contexts/',
+      'BroadcastChannel-capable browser (OBS Chromium 32+)',
+    ],
+    triggers: [],
+    status: 'ready',
+  },
   {
     id: 'item-explain',
     type: 'animation',
diff --git a/@kyonax_on_tech/sources/hud/context-screen.vue b/@kyonax_on_tech/sources/hud/context-screen.vue
new file mode 100644
index 0000000..1d3d232
--- /dev/null
+++ b/@kyonax_on_tech/sources/hud/context-screen.vue
@@ -0,0 +1,644 @@
+<!--
+  Copyright (c) 2026 Cristian D. Moreno — @Kyonax
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
+
+  context-screen — HUD web source for the CONTEXT scene. News-style
+  three-surface layout (Plan #context-screen, decisions D5+D6+D8+
+  D9+D10+D11+D13+D14+D15):
+
+    1. .context-strip      lower-third (always visible) — title +
+                           description, Geomanist + SpaceMono.
+                           Width transitions 100% ↔ 62% on sidebar
+                           toggle (the one acknowledged non-transform
+                           animation, R2a + TRADE-OFFS).
+    2. .context-marquee    row below the strip. transform: translateX
+                           infinite loop, duplicated items list,
+                           GPU-composited.
+    3. .context-sidebar    right-edge slide-in panel (z=100). Renders
+                           full parsed .org via <UiOrgContent> (D11 —
+                           recursive Vue template, never v-html).
+                           Auto-scroll via translateY on inner wrapper
+                           after 2 s open delay. Custom thin lateral
+                           indicator (z synced to scroll progress).
+                           Direct DOM writes per §1.14.6.
+    4. .context-peek       closed-state ambient indicator (z=99) —
+                           layered span (static halo + animated-opacity
+                           pulse) mirroring <UiStatusDot>. Fades to
+                           opacity 0 when sidebar opens.
+
+  All animation in this file uses transform / opacity ONLY, except the
+  one-time .context-lower width transition on toggle (R6 + R2a). All
+  surfaces ship border-radius: 0 (D15). contain: layout paint on every
+  updating sub-tree (§1.14.4).
+-->
+
+<template>
+  <div
+    class="context-screen-overlay"
+    :class="{ 'context-sidebar-open': channel.sidebar_open.value }"
+  >
+    <div class="context-lower">
+      <div class="context-strip">
+        <template v-if="parsed">
+          <div class="context-strip__title">
+            {{ parsed.title }}
+          </div>
+          <div
+            v-if="parsed.subtitle"
+            class="context-strip__subtitle"
+          >
+            {{ parsed.subtitle }}
+          </div>
+          <div class="context-strip__description">
+            {{ parsed.description }}
+          </div>
+        </template>
+        <template v-else>
+          <div class="context-strip__title context-strip__title--placeholder">
+            NO CONTEXT ACTIVE
+          </div>
+          <div
+            class="context-strip__description
+              context-strip__description--placeholder"
+          >
+            Open the CONTROLS modal on the source card to pick an
+            <code>.org</code> file.
+          </div>
+        </template>
+      </div>
+      <div
+        v-if="marquee_doubled.length > 0"
+        class="context-marquee"
+      >
+        <div class="context-marquee__items">
+          <span
+            v-for="(item, index) in marquee_doubled"
+            :key="index"
+            class="context-marquee__item"
+          >{{ item }}</span>
+        </div>
+      </div>
+    </div>
+
+    <aside class="context-sidebar">
+      <header
+        v-if="parsed && parsed.tags && parsed.tags.length"
+        class="context-sidebar__header"
+      >
+        <UiChip
+          v-for="tag in parsed.tags"
+          :key="tag"
+          variant="solid"
+          shape="square"
+        >
+          {{ tag }}
+        </UiChip>
+      </header>
+      <div
+        ref="sidebar_body_el"
+        class="context-sidebar__body"
+      >
+        <UiOrgContent
+          v-if="parsed"
+          :ast="parsed.body_ast"
+        />
+        <p
+          v-else
+          class="context-sidebar__placeholder"
+        >
+          No context selected. Pick an
+          <code>.org</code>
+          file from the CONTROLS modal.
+        </p>
+      </div>
+    </aside>
+
+    <span
+      class="context-peek"
+      aria-hidden="true"
+    >
+      <span class="context-peek__pulse">❮</span>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { useContextChannel } from '@composables/use-context-channel.js';
+import { getContexts } from '@shared/brand-loader.js';
+import UiChip from '@ui/chip.vue';
+import UiOrgContent from '@ui/org-content.vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
+
+const BRAND_HANDLE = '@kyonax_on_tech';
+const OPEN_DELAY_MS = 3000;
+const BOTTOM_HOLD_MS = 3000;
+const SCROLL_SPEED_PX_PER_SEC = 16;
+const MS_PER_SEC = 1000;
+const MARQUEE_HALF_REPEATS = 3;
+const USER_INTERACTION_PAUSE_MS = 5000;
+
+const contexts = getContexts(BRAND_HANDLE);
+const channel = useContextChannel();
+
+const parsed = computed(() => {
+  const slug = channel.active_slug.value;
+  if (!slug) {
+    return null;
+  }
+  const entry = contexts[slug];
+  return entry && entry.parsed ? entry.parsed : null;
+});
+
+const marquee_doubled = computed(() => {
+  if (!parsed.value || !parsed.value.marquee_items.length) {
+    return [];
+  }
+  const items = parsed.value.marquee_items;
+  // Repeat each half MARQUEE_HALF_REPEATS times so a single half exceeds the
+  // visible canvas width. Then duplicate the half for the seamless
+  // translateX(0% → -50%) loop — at -50% the visual content matches 0%
+  // because the second half is identical to the first.
+  const half = [];
+  for (let i = 0; i < MARQUEE_HALF_REPEATS; i++) {
+    for (const item of items) {
+      half.push(item);
+    }
+  }
+  return [...half, ...half];
+});
+
+const sidebar_body_el = ref(null);
+
+let open_timer = null;
+let bottom_hold_timer = null;
+let raf_id = null;
+let last_frame_time = 0;
+let last_user_interaction_at = 0;
+let cached_inner_height = 0;
+let cached_body_height = 0;
+
+function cacheDimensions() {
+  const body = sidebar_body_el.value;
+  if (!body) {
+    return;
+  }
+  cached_inner_height = body.scrollHeight;
+  cached_body_height = body.clientHeight;
+}
+
+function tick(now) {
+  const body = sidebar_body_el.value;
+  if (!body) {
+    raf_id = null;
+    return;
+  }
+  const delta_seconds = (now - last_frame_time) / MS_PER_SEC;
+  last_frame_time = now;
+
+  const paused_until = last_user_interaction_at + USER_INTERACTION_PAUSE_MS;
+  const is_paused = now < paused_until;
+
+  const max_scroll = Math.max(0, cached_inner_height - cached_body_height);
+  if (max_scroll <= 0) {
+    raf_id = requestAnimationFrame(tick);
+    return;
+  }
+
+  if (!is_paused) {
+    body.scrollTop += SCROLL_SPEED_PX_PER_SEC * delta_seconds;
+    if (body.scrollTop >= max_scroll - 1) {
+      body.scrollTop = max_scroll;
+      bottom_hold_timer = setTimeout(() => {
+        body.scrollTop = 0;
+        last_frame_time = performance.now();
+        raf_id = requestAnimationFrame(tick);
+      }, BOTTOM_HOLD_MS);
+      return;
+    }
+  }
+
+  raf_id = requestAnimationFrame(tick);
+}
+
+function cancelAutoScroll() {
+  if (open_timer) {
+    clearTimeout(open_timer);
+    open_timer = null;
+  }
+  if (bottom_hold_timer) {
+    clearTimeout(bottom_hold_timer);
+    bottom_hold_timer = null;
+  }
+  if (raf_id) {
+    cancelAnimationFrame(raf_id);
+    raf_id = null;
+  }
+}
+
+function startAutoScroll() {
+  cancelAutoScroll();
+  cacheDimensions();
+  if (sidebar_body_el.value) {
+    sidebar_body_el.value.scrollTop = 0;
+  }
+  last_user_interaction_at = 0;
+  if (cached_inner_height <= cached_body_height) {
+    return;
+  }
+  open_timer = setTimeout(() => {
+    last_frame_time = performance.now();
+    raf_id = requestAnimationFrame(tick);
+  }, OPEN_DELAY_MS);
+}
+
+function handleUserInteraction() {
+  last_user_interaction_at = performance.now();
+  // Cancel pending bottom-hold reset so manual scroll isn't yanked.
+  if (bottom_hold_timer) {
+    clearTimeout(bottom_hold_timer);
+    bottom_hold_timer = null;
+  }
+}
+
+function attachInteractionListeners() {
+  const body = sidebar_body_el.value;
+  if (!body) {
+    return;
+  }
+  body.addEventListener('wheel', handleUserInteraction, { passive: true });
+  body.addEventListener('touchstart', handleUserInteraction, { passive: true });
+}
+
+function detachInteractionListeners() {
+  const body = sidebar_body_el.value;
+  if (!body) {
+    return;
+  }
+  body.removeEventListener('wheel', handleUserInteraction);
+  body.removeEventListener('touchstart', handleUserInteraction);
+}
+
+watch(channel.sidebar_open, (open) => {
+  if (open) {
+    requestAnimationFrame(() => {
+      attachInteractionListeners();
+      startAutoScroll();
+    });
+    return;
+  }
+  cancelAutoScroll();
+  detachInteractionListeners();
+  if (sidebar_body_el.value) {
+    sidebar_body_el.value.scrollTop = 0;
+  }
+});
+
+watch(parsed, () => {
+  if (!channel.sidebar_open.value) {
+    return;
+  }
+  cancelAutoScroll();
+  requestAnimationFrame(() => startAutoScroll());
+});
+
+onUnmounted(() => {
+  cancelAutoScroll();
+  detachInteractionListeners();
+});
+</script>
+
+<style lang="scss">
+/*
+ * Page-scoped html font-size bump. The project's global stylesheet
+ * (src/app/scss/base/_global.scss) anchors `html` at `font-size: 12px`,
+ * which makes every rem-based --fs-* token render small inside the OBS
+ * 1920x1080 browser source (e.g. --fs-300 large = 1.25rem × 12 = 15px).
+ *
+ * `:has(.context-screen-overlay)` activates the override only when the
+ * overlay is in the document — true for the standalone OBS source AND
+ * inside the home preview iframe (each iframe owns its own `html` /
+ * `:root`). Other pages (home, cam-log) keep the 12px base.
+ *
+ * The `:has()` selector ships in Chromium 105+ — OBS 32.x CEF supports
+ * it. No JS required, no module-init side effects.
+ */
+html:has(.context-screen-overlay) {
+  font-size: 16px;
+}
+</style>
+
+<style scoped lang="scss">
+@use "@app/scss/abstracts/mixins" as *;
+
+.context-screen-overlay {
+  --strip-width-ratio: 0.66;
+  --strip-fs-scale: 0.95;
+  --sidebar-width-ratio: 0.34;
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  contain: layout paint;
+}
+
+.context-lower {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  /* Stacks above the sidebar (z-index: 100) so the strip's TR corner
+   * square overflows ON TOP of the sidebar at the strip-right /
+   * sidebar-left boundary instead of being hidden behind it.
+   * `contain: layout` only — paint containment would clip the
+   * overflowing pseudo-element. */
+  z-index: 110;
+  display: flex;
+  flex-direction: column;
+  contain: layout;
+  transition: width var(--motion-sidebar-ms) var(--motion-strip-ease);
+}
+
+.context-screen-overlay.context-sidebar-open .context-lower {
+  width: calc(100% * var(--strip-width-ratio));
+}
+
+.context-screen-overlay.context-sidebar-open .context-strip__title {
+  font-size: calc(var(--fs-700) * var(--strip-fs-scale));
+}
+
+.context-screen-overlay.context-sidebar-open .context-strip__subtitle {
+  font-size: calc(var(--fs-425) * var(--strip-fs-scale));
+}
+
+.context-screen-overlay.context-sidebar-open .context-strip__description {
+  font-size: calc(var(--fs-400) * var(--strip-fs-scale));
+}
+
+.context-strip {
+  position: relative;
+  background-color: var(--clr-neutral-500);
+  border: 1px solid var(--clr-border-100);
+  /* Strip + sidebar share a single 1px boundary when the sidebar is
+   * open. The sidebar's LEFT border owns that line; the strip drops
+   * its right border so the two don't stack into a 2px visual. When
+   * the sidebar is closed, the strip's right edge sits at the canvas
+   * right edge anyway, so no missing border is visible.
+   * The strip's BOTTOM border is restored (the marquee's `border-top`
+   * is dropped below) so the strip carries the divider line itself. */
+  border-right: none;
+  /* TR corner only — bottom is at the canvas edge; TL is intentionally
+   * dropped so the strip's left edge runs flush into the canvas without
+   * a visual dot. The pseudo-element square overflows the border so
+   * it's visibly centered on the corner intersection. */
+  @include corner-square-tr(var(--clr-neutral-100));
+  padding: 2.4em 2em 1em 2em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  border-radius: 0;
+  contain: layout;
+  transition: padding var(--motion-sidebar-ms) var(--motion-strip-ease);
+}
+
+.context-strip__title {
+  font-family: var(--font-display);
+  font-size: var(--fs-700);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: -0.04em;
+  color: var(--clr-neutral-100);
+  text-shadow: var(--hud-halo-text);
+  transition: font-size var(--motion-sidebar-ms) var(--motion-strip-ease);
+}
+
+.context-strip__subtitle {
+  font-family: var(--font-display);
+  font-size: var(--fs-425);
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  color: var(--clr-primary-100);
+  transition: font-size var(--motion-sidebar-ms) var(--motion-strip-ease);
+}
+
+.context-strip__description {
+  font-family: var(--font-mono);
+  font-size: var(--fs-400);
+  line-height: 1.25;
+  color: var(--clr-neutral-200);
+  transition: font-size var(--motion-sidebar-ms) var(--motion-strip-ease);
+}
+
+.context-strip__title--placeholder {
+  color: var(--clr-neutral-200);
+  opacity: 0.45;
+}
+
+.context-strip__description--placeholder {
+  color: var(--clr-neutral-200);
+  opacity: 0.45;
+}
+
+.context-sidebar__placeholder {
+  font-family: var(--font-mono);
+  font-size: var(--fs-225);
+  color: var(--clr-neutral-200);
+  opacity: 0.45;
+  margin: 0;
+  padding: 1.5em 0;
+}
+
+.context-sidebar__placeholder code {
+  color: var(--clr-primary-100);
+  opacity: 0.7;
+  background: color-mix(in srgb, var(--clr-neutral-100) 10%, transparent);
+  padding: 0 0.3em;
+}
+
+/* Marquee — mirrors kyo-web-online/src/app/scss/components/_marquee.scss */
+/* (gold background, black text, font-weight 900) — without the deprecated */
+/* cyberpunk-glow utility class. Halo opt-in via --hud-halo-text instead. */
+.context-marquee {
+  background-color: var(--clr-primary-100);
+  color: var(--clr-neutral-500);
+  font-size: var(--fs-225);
+  line-height: var(--fs-425);
+  width: 100%;
+  overflow: hidden;
+  /* Bottom border closes the lower-third's lower edge with the same
+   * 1px line as the strip's outer borders. The top border is dropped
+   * because the strip above already owns the strip/marquee divider via
+   * its own `border-bottom` — stacking both would render a 2px line. */
+  border-bottom: 1px solid var(--clr-border-100);
+  border-radius: 0;
+  contain: layout paint;
+}
+
+.context-marquee__items {
+  display: flex;
+  white-space: nowrap;
+  width: max-content;
+  font-weight: 900;
+  animation: context-marquee-scroll var(--motion-marquee-s) linear infinite;
+  will-change: transform;
+}
+
+.context-marquee__item {
+  display: inline-flex;
+  align-items: center;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.context-marquee__item::after {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: currentColor;
+  margin: 0 1rem;
+  flex-shrink: 0;
+}
+
+@keyframes context-marquee-scroll {
+  0%   { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
+.context-sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: calc(100% * var(--sidebar-width-ratio));
+  height: 100%;
+  background-color: var(--clr-neutral-500);
+  border: 1px solid var(--clr-border-100);
+  /* Top-left only — top-right + bottom-right are at the canvas edge,
+   * bottom-left is dropped per design. White square overflows the
+   * border so it sits centered on the intersection. */
+  @include corner-square-tl(var(--clr-neutral-100));
+  border-radius: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateX(100%);
+  transition:
+    transform var(--motion-sidebar-ms) var(--motion-strip-ease),
+    opacity var(--motion-sidebar-ms) var(--motion-strip-ease);
+  will-change: transform, opacity;
+  contain: layout;
+}
+
+.context-screen-overlay.context-sidebar-open .context-sidebar {
+  opacity: 1;
+  transform: translateX(0);
+  pointer-events: auto;
+}
+
+.context-sidebar__header {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  padding: 1em 1.5em;
+  border-bottom: 1px solid var(--clr-border-100);
+  flex-shrink: 0;
+}
+
+/* Sidebar header chip override — switches the chip to a quiet outline
+ * style so tags read as ambient context, not as a focal element.
+ * Smaller font, dimmer text (neutral-100 instead of neutral-50),
+ * transparent surface, and a low-alpha border (border-100 = white at
+ * 20%). Sits firmly in the 30% support tier of 60-30-10 — no surface
+ * pooling competes for attention with the body content below.
+ * Scoped via :deep(). */
+.context-sidebar__header :deep(.ui-chip) {
+  font-size: var(--fs-225);
+  color: var(--clr-neutral-100);
+  background-color: transparent;
+  border-color: var(--clr-border-100);
+}
+
+/*
+ * Square at the LEFT end of the header separator line — interior
+ * intersection of the separator + the sidebar's left edge. The right
+ * end is at the canvas edge, so no square there. Matches the bright
+ * white of the corner squares.
+ */
+.context-sidebar__header::after {
+  content: '';
+  position: absolute;
+  bottom: -2.25px;
+  left: -2.25px;
+  width: 4.5px;
+  height: 4.5px;
+  background-color: var(--clr-neutral-100);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.context-sidebar__body {
+  position: relative;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Tighter top/bottom — body content sits closer to the header rule
+   * and the canvas bottom edge. Horizontal padding unchanged. */
+  padding: 0.75em 1.5em;
+  /* Base text color lives here (not on `.org-content`) so the recursive
+   * `<UiOrgContent>` nested inside an `<.org-headline>` inherits the
+   * headline's primary-100 gold instead of overriding it. */
+  color: var(--clr-neutral-200);
+  contain: layout paint;
+  /* Hide native scrollbar — the lateral indicator replaces it visually,
+   * scroll wheel + drag still work natively. */
+  scrollbar-width: none;
+}
+
+.context-sidebar__body::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.context-peek {
+  position: absolute;
+  top: 50%;
+  right: 0.4em;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6em;
+  height: 2.6em;
+  background-color: var(--clr-neutral-500);
+  border: 1px solid var(--clr-border-100);
+  border-radius: 0;
+  color: var(--clr-primary-100);
+  font-family: var(--font-mono);
+  font-size: var(--fs-300);
+  z-index: 99;
+  opacity: 1;
+  transition: opacity var(--motion-sidebar-ms) var(--motion-strip-ease);
+  contain: layout paint;
+}
+
+.context-screen-overlay.context-sidebar-open .context-peek {
+  opacity: 0;
+}
+
+.context-peek__pulse {
+  display: inline-block;
+  opacity: 1;
+  animation: context-peek-breathe var(--motion-peek-pulse-s)
+    ease-in-out infinite;
+  will-change: opacity;
+}
+
+@keyframes context-peek-breathe {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.55; }
+}
+</style>
diff --git a/NOTICE b/NOTICE
index 3595c0a..4ab95c6 100644
--- a/NOTICE
+++ b/NOTICE
@@ -5,3 +5,16 @@ ORCID: https://orcid.org/0009-0006-4459-5538
 This product includes software developed by Cristian D. Moreno (@Kyonax).
 Attribution to the original author must be preserved in all copies,
 modifications, and derivative works.
+
+Third-Party Fonts
+=================
+
+SpaceMono Nerd Font — derived from Space Mono by Colophon Foundry
+(SIL Open Font License 1.1) and the Nerd Fonts patcher project
+(MIT License). See https://www.nerdfonts.com/ for full attribution.
+
+Geomanist — by Atipo Foundry (atipofoundry.com). Used in RECKIT under
+the same licensee as the sibling project Kyonax/kyo-web-online, which
+ships the same font under the same authorship. License-of-record:
+verify directly with Atipo Foundry for any redistribution beyond the
+Kyonax-owned project graph.
diff --git a/package-lock.json b/package-lock.json
index 0f07bb1..5201e6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
       "dependencies": {
         "dayjs": "^1.11.20",
         "obs-websocket-js": "^5.0.6",
+        "shiki": "^4.0.2",
+        "uniorg-parse": "^3.2.1",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
       },
@@ -1543,6 +1545,106 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@shikijs/core": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-4.0.2.tgz",
+      "integrity": "sha512-hxT0YF4ExEqB8G/qFdtJvpmHXBYJ2lWW7qTHDarVkIudPFE6iCIrqdgWxGn5s+ppkGXI0aEGlibI0PAyzP3zlw==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/primitive": "4.0.2",
+        "@shikijs/types": "4.0.2",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.5"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-4.0.2.tgz",
+      "integrity": "sha512-7PW0Nm49DcoUIQEXlJhNNBHyoGMjalRETTCcjMqEaMoJRLljy1Bi/EGV3/qLBgLKQejdspiiYuHGQW6dX94Nag==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "4.0.2",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "oniguruma-to-es": "^4.3.4"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-4.0.2.tgz",
+      "integrity": "sha512-UpCB9Y2sUKlS9z8juFSKz7ZtysmeXCgnRF0dlhXBkmQnek7lAToPte8DkxmEYGNTMii72zU/lyXiCB6StuZeJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "4.0.2",
+        "@shikijs/vscode-textmate": "^10.0.2"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/langs": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-4.0.2.tgz",
+      "integrity": "sha512-KaXby5dvoeuZzN0rYQiPMjFoUrz4hgwIE+D6Du9owcHcl6/g16/yT5BQxSW5cGt2MZBz6Hl0YuRqf12omRfUUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "4.0.2"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/primitive": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/primitive/-/primitive-4.0.2.tgz",
+      "integrity": "sha512-M6UMPrSa3fN5ayeJwFVl9qWofl273wtK1VG8ySDZ1mQBfhCpdd8nEx7nPZ/tk7k+TYcpqBZzj/AnwxT9lO+HJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "4.0.2",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/themes": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-4.0.2.tgz",
+      "integrity": "sha512-mjCafwt8lJJaVSsQvNVrJumbnnj1RI8jbUKrPKgE6E3OvQKxnuRoBaYC51H4IGHePsGN/QtALglWBU7DoKDFnA==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "4.0.2"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-4.0.2.tgz",
+      "integrity": "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
+      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
@@ -1575,6 +1677,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1589,6 +1700,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "25.6.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.6.0.tgz",
@@ -1606,6 +1726,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/whatwg-mimetype": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
@@ -1918,6 +2044,12 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "license": "ISC"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@@ -2426,6 +2558,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2592,6 +2734,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
@@ -2619,6 +2771,26 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -2694,6 +2866,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
@@ -2913,6 +3095,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -2924,6 +3115,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -3716,6 +3920,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4178,6 +4388,42 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
+      "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -4185,6 +4431,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4531,6 +4787,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -4911,6 +5179,116 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -5235,6 +5613,23 @@
       ],
       "license": "MIT"
     },
+    "node_modules/oniguruma-parser": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.2.tgz",
+      "integrity": "sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==",
+      "license": "MIT"
+    },
+    "node_modules/oniguruma-to-es": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.6.tgz",
+      "integrity": "sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==",
+      "license": "MIT",
+      "dependencies": {
+        "oniguruma-parser": "^0.12.2",
+        "regex": "^6.1.0",
+        "regex-recursion": "^6.0.2"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -5511,6 +5906,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -5675,6 +6080,30 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
+      "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==",
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-recursion": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz",
+      "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-utilities": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
+      "license": "MIT"
+    },
     "node_modules/regexp-tree": {
       "version": "0.1.27",
       "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.27.tgz",
@@ -5985,6 +6414,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/shiki": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-4.0.2.tgz",
+      "integrity": "sha512-eAVKTMedR5ckPo4xne/PjYQYrU3qx78gtJZ+sHlXEg5IHhhoQhMfZVzetTYuaJS0L2Ef3AcCRzCHV8T0WI6nIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/core": "4.0.2",
+        "@shikijs/engine-javascript": "4.0.2",
+        "@shikijs/engine-oniguruma": "4.0.2",
+        "@shikijs/langs": "4.0.2",
+        "@shikijs/themes": "4.0.2",
+        "@shikijs/types": "4.0.2",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -6090,6 +6538,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -6288,6 +6746,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
@@ -6434,6 +6906,26 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
@@ -6604,6 +7096,128 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/uniorg": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/uniorg/-/uniorg-1.4.0.tgz",
+      "integrity": "sha512-1QYkebPJCmSNyA3bZDAqxgEJb435XYz8fQE4Mc5gxQ86tyG7EV/pyUcIrSizCkmph/ioteXUErByIjLGho/zBA==",
+      "license": "GPL-3.0-or-later",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      }
+    },
+    "node_modules/uniorg-parse": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/uniorg-parse/-/uniorg-parse-3.2.1.tgz",
+      "integrity": "sha512-4HKJj+bv3JfWxqGDqc3xJ3WLwGNg34kQS58DRBDT5er/lWKqyf17gvxuSrrw1deXqtmevFwsSYCdHTv8iL/cxQ==",
+      "license": "GPL-3.0-or-later",
+      "dependencies": {
+        "unified": "^11.0.4",
+        "uniorg": "^1.3.0",
+        "unist-builder": "^4.0.0",
+        "vfile": "^6.0.1",
+        "vfile-location": "^5.0.2"
+      }
+    },
+    "node_modules/unist-builder": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-builder/-/unist-builder-4.0.0.tgz",
+      "integrity": "sha512-wmRFnH+BLpZnTKpc5L7O67Kac89s9HMrtELpnNaE6TAobq5DTZZs5YaTQfAZBA9bFPECx2uVAPO31c+GVug8mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -6674,6 +7288,48 @@
         "spdx-license-ids": "^3.0.0"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
@@ -7199,6 +7855,16 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 84acb83..1b0c129 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,8 @@
   "dependencies": {
     "dayjs": "^1.11.20",
     "obs-websocket-js": "^5.0.6",
+    "shiki": "^4.0.2",
+    "uniorg-parse": "^3.2.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
diff --git a/src/app/fonts/Geomanist/GeomanistBold.ttf b/src/app/fonts/Geomanist/GeomanistBold.ttf
new file mode 100644
index 0000000..7e85856
Binary files /dev/null and b/src/app/fonts/Geomanist/GeomanistBold.ttf differ
diff --git a/src/app/fonts/Geomanist/GeomanistItalic.ttf b/src/app/fonts/Geomanist/GeomanistItalic.ttf
new file mode 100644
index 0000000..1e75211
Binary files /dev/null and b/src/app/fonts/Geomanist/GeomanistItalic.ttf differ
diff --git a/src/app/fonts/Geomanist/GeomanistRegular.ttf b/src/app/fonts/Geomanist/GeomanistRegular.ttf
new file mode 100644
index 0000000..63d0aa6
Binary files /dev/null and b/src/app/fonts/Geomanist/GeomanistRegular.ttf differ
diff --git a/src/app/scss/abstracts/_mixins.scss b/src/app/scss/abstracts/_mixins.scss
index cf8d41b..565b762 100644
--- a/src/app/scss/abstracts/_mixins.scss
+++ b/src/app/scss/abstracts/_mixins.scss
@@ -37,3 +37,133 @@
 	position: absolute;
 }
 
+// Ad-hoc color helpers for cases where a dedicated --clr-X-XX token does
+// not exist. Always prefer a named token (e.g. var(--clr-primary-100-06))
+// when available — these helpers are for one-off variants only. Each
+// produces a runtime color-mix() expression compatible with CSS custom
+// properties.
+//
+// Usage:
+//   background: alpha-tint(--clr-primary-100, 6%);
+//   color:      darken(--clr-primary-100, 30%);
+//   border:     1px solid lighten(--clr-neutral-100, 20%);
+@function alpha-tint($color-var, $percent) {
+	@return color-mix(in srgb, var(#{$color-var}) #{$percent}, transparent);
+}
+
+@function darken($color-var, $by) {
+	@return color-mix(in srgb, var(#{$color-var}) #{100% - $by}, black);
+}
+
+@function lighten($color-var, $by) {
+	@return color-mix(in srgb, var(#{$color-var}) #{100% - $by}, white);
+}
+
+// Adds hard-edge corner squares to a container — a HUD/cyberpunk
+// treatment that pairs with a 1px solid border. Expects the consumer
+// to set its own background-color + border; this mixin only paints
+// the corner markers via background-image.
+//
+// Usage:
+//   .container {
+//     background-color: var(--clr-neutral-500);
+//     border: 1px solid var(--clr-border-100);
+//     @include corner-dots(var(--clr-border-100));            // all 4
+//     @include corner-dots(var(--clr-border-100), 4.5px, tl bl);  // left only
+//   }
+//
+// Parameters:
+//   $color   — solid CSS color (e.g. var(--clr-border-100))
+//   $size    — square edge length, default 4.5px
+//   $corners — space-separated list of corner keys to draw:
+//                tl  top-left
+//                tr  top-right
+//                bl  bottom-left
+//                br  bottom-right
+//              Default: tl tr bl br (all four).
+//
+// Implementation: stacked linear-gradient background-image layers, one
+// per requested corner. background-origin: border-box places position
+// 0 0 / 100% 100% at the OUTER border edge, so each square sits flush
+// with the corner intersection rather than inset by the border width.
+@mixin corner-dots($color, $size: 4.5px, $corners: tl tr bl br) {
+	$position-map: (
+		tl: 0 0,
+		tr: 100% 0,
+		bl: 0 100%,
+		br: 100% 100%,
+	);
+	$images: ();
+	$positions: ();
+
+	@each $corner in $corners {
+		$pos: map.get($position-map, $corner);
+		@if $pos {
+			$images: append(
+				$images,
+				linear-gradient(#{$color}, #{$color}),
+				$separator: comma
+			);
+			$positions: append($positions, $pos, $separator: comma);
+		}
+	}
+
+	@if length($images) > 0 {
+		background-image: $images;
+		background-position: $positions;
+		background-size: #{$size} #{$size};
+		background-repeat: no-repeat;
+		background-origin: border-box;
+		background-clip: border-box;
+	}
+}
+
+// Pseudo-element corner squares — half outside, half inside the
+// container so the square sits CENTERED on the corner intersection.
+//
+// IMPORTANT: the consumer must be a positioned element (any of
+// `position: relative | absolute | fixed | sticky`). The mixin does
+// NOT set `position: relative` itself — that would clobber existing
+// `position: absolute` consumers (e.g. a sidebar pinned to the right
+// edge). The consumer must also NOT use `contain: paint`, which would
+// clip pseudo-elements rendered outside the box.
+//
+// Each mixin handles ONE corner via either ::before or ::after, so a
+// surface needing two corners (e.g. strip = TL + TR) calls both
+// `corner-square-tl` and `corner-square-tr`.
+//
+// Usage:
+//   .container {
+//     position: relative;             // or absolute / fixed
+//     border: 1px solid var(--clr-border-100);
+//     @include corner-square-tl(var(--clr-neutral-50));
+//     @include corner-square-tr(var(--clr-neutral-50));
+//   }
+@mixin corner-square-tl($color, $size: 4.5px) {
+	&::before {
+		content: '';
+		position: absolute;
+		top: -#{$size * 0.5};
+		left: -#{$size * 0.5};
+		width: $size;
+		height: $size;
+		background: $color;
+		pointer-events: none;
+		z-index: 1;
+	}
+}
+
+@mixin corner-square-tr($color, $size: 4.5px) {
+	&::after {
+		content: '';
+		position: absolute;
+		top: -#{$size * 0.5};
+		right: -#{$size * 0.5};
+		width: $size;
+		height: $size;
+		background: $color;
+		pointer-events: none;
+		z-index: 1;
+	}
+}
+
diff --git a/src/app/scss/abstracts/_theme.scss b/src/app/scss/abstracts/_theme.scss
index 6ff67aa..0c36400 100644
--- a/src/app/scss/abstracts/_theme.scss
+++ b/src/app/scss/abstracts/_theme.scss
@@ -35,14 +35,32 @@
 	}
 
 	--font-mono: "SpaceMono", "Roboto Mono", "Courier New", Courier, monospace;
+	--font-display: "Geomanist", "Inter", "Helvetica Neue", Arial, sans-serif;
 
 	--canvas-width: 1920px;
 	--canvas-height: 1080px;
 	--hud-bar-offset: 24px;
 	--hud-bar-gap: 24px;
 
-	--clr-primary-100-80: color-mix(in srgb, var(--clr-primary-100) 80%, transparent);
+	--surface-bg: linear-gradient(135deg, hsl(0 0% 2%) 0%, hsl(0 0% 7%) 50%, hsl(0 0% 14%) 100%);
+
+	--motion-sidebar-ms: 280ms;
+	--motion-strip-ease: cubic-bezier(0.22, 1, 0.36, 1);
+	--motion-peek-pulse-s: 2.5s;
+	--motion-marquee-s: 90s;
+
+	--clr-primary-100-02: color-mix(in srgb, var(--clr-primary-100) 2%, transparent);
+	--clr-primary-100-03: color-mix(in srgb, var(--clr-primary-100) 3%, transparent);
+	--clr-primary-100-04: color-mix(in srgb, var(--clr-primary-100) 4%, transparent);
+	--clr-primary-100-06: color-mix(in srgb, var(--clr-primary-100) 6%, transparent);
+	--clr-primary-100-10: color-mix(in srgb, var(--clr-primary-100) 10%, transparent);
+	--clr-primary-100-14: color-mix(in srgb, var(--clr-primary-100) 14%, transparent);
 	--clr-primary-100-40: color-mix(in srgb, var(--clr-primary-100) 40%, transparent);
+	--clr-primary-100-80: color-mix(in srgb, var(--clr-primary-100) 80%, transparent);
+
+	--clr-neutral-50-02: color-mix(in srgb, var(--clr-neutral-50) 2%, transparent);
+	--clr-neutral-50-04: color-mix(in srgb, var(--clr-neutral-50) 4%, transparent);
+	--clr-neutral-50-12: color-mix(in srgb, var(--clr-neutral-50) 12%, transparent);
 
 	--hud-halo:
 		drop-shadow(0 0 1px rgba(0, 0, 0, 0.9))
diff --git a/src/app/scss/abstracts/_variables.scss b/src/app/scss/abstracts/_variables.scss
index 4b9ff3a..5356b0c 100644
--- a/src/app/scss/abstracts/_variables.scss
+++ b/src/app/scss/abstracts/_variables.scss
@@ -28,6 +28,14 @@ $colors: (
 		400: hsl(224, 74%, 34%),
 		500: hsl(224, 74%, 22%),
 	),
+	tertiary: (
+		50: hsl(266, 88%, 78%),
+		100: hsl(266, 73%, 56%),
+		200: hsl(266, 73%, 45%),
+		300: hsl(266, 73%, 39%),
+		400: hsl(266, 73%, 28%),
+		500: hsl(266, 73%, 17%),
+	),
 	neutral: (
 		50: hsl(0, 0%, 95%),
 		100: hsl(0, 0%, 85%),
diff --git a/src/app/scss/base/_typography.scss b/src/app/scss/base/_typography.scss
index d385e9f..226162b 100644
--- a/src/app/scss/base/_typography.scss
+++ b/src/app/scss/base/_typography.scss
@@ -10,3 +10,7 @@
 @include mixins.font-face("SpaceMono", "SpaceMono/SpaceMonoNerdFont-Bold", 700, normal);
 @include mixins.font-face("SpaceMono", "SpaceMono/SpaceMonoNerdFont-Italic", 400, italic);
 @include mixins.font-face("SpaceMono", "SpaceMono/SpaceMonoNerdFont-BoldItalic", 700, italic);
+
+@include mixins.font-face("Geomanist", "Geomanist/GeomanistRegular", 400, normal);
+@include mixins.font-face("Geomanist", "Geomanist/GeomanistBold", 700, normal);
+@include mixins.font-face("Geomanist", "Geomanist/GeomanistItalic", 400, italic);
diff --git a/src/shared/brand-loader.js b/src/shared/brand-loader.js
index e93cf2e..44cfc3d 100644
--- a/src/shared/brand-loader.js
+++ b/src/shared/brand-loader.js
@@ -7,8 +7,19 @@
  * root and merges their metadata + source registries into a
  * single runtime object. Uses import.meta.glob for static
  * analysis by Vite's bundler.
+ *
+ * Also discovers per-brand .org context files at /@<brand>/data/
+ * contexts/<slug>.org, parses each via uniorg-parse at glob-time,
+ * and exposes them as a CONTEXTS map: { brand → slug → { raw,
+ * parsed } }. Cached AST means the sidebar renderer has zero
+ * parse cost per frame (Plan #context-screen, decision D3).
  */
 
+import { OrgSchemaError, parseOrg } from '@shared/utils/org.js';
+
+const BRAND_HANDLE_PATTERN = /^\/(@[^/]+)\/data\/contexts\//;
+const ORG_FILENAME_PATTERN = /([^/]+)\.org$/;
+
 const brand_modules = import.meta.glob(
   '/@*/brand.js',
   { eager: true, import: 'default' },
@@ -25,8 +36,14 @@ const animation_components = import.meta.glob(
 );
 const scene_components = import.meta.glob('/@*/sources/scene/*.vue');
 
+const context_modules = import.meta.glob(
+  '/@*/data/contexts/*.org',
+  { eager: true, query: '?raw', import: 'default' },
+);
+
 export const BRANDS = Object.values(brand_modules);
 export const SOURCES = Object.values(source_modules).flat();
+export const CONTEXTS = buildContextsMap(context_modules);
 
 export function getBrand(handle) {
   return BRANDS.find((b) => b.handle === handle) || null;
@@ -49,3 +66,43 @@ export function resolveComponent(source) {
 
   return components[key] || null;
 }
+
+export function getContexts(handle) {
+  return CONTEXTS[handle] || {};
+}
+
+function buildContextsMap(modules) {
+  const map = {};
+  for (const path of Object.keys(modules)) {
+    const brand_match = path.match(BRAND_HANDLE_PATTERN);
+    const slug_match = path.match(ORG_FILENAME_PATTERN);
+    if (!brand_match || !slug_match) {
+      continue;
+    }
+    const brand_handle = brand_match[1];
+    const slug = slug_match[1];
+    const raw = modules[path];
+
+    let parsed = null;
+    let parse_error = null;
+    try {
+      parsed = parseOrg(raw);
+    } catch (error) {
+      if (error instanceof OrgSchemaError) {
+        parse_error = {
+          name: error.name,
+          message: error.message,
+          missing_keys: error.missing_keys,
+        };
+      } else {
+        parse_error = { name: 'Error', message: String(error) };
+      }
+    }
+
+    if (!map[brand_handle]) {
+      map[brand_handle] = {};
+    }
+    map[brand_handle][slug] = { raw, parsed, parse_error };
+  }
+  return map;
+}
diff --git a/src/shared/brand-loader.test.js b/src/shared/brand-loader.test.js
index 137df52..00920d7 100644
--- a/src/shared/brand-loader.test.js
+++ b/src/shared/brand-loader.test.js
@@ -7,7 +7,7 @@
  * Validates brand metadata and web source schema.
  */
 
-import { BRANDS, SOURCES } from '@shared/brand-loader.js';
+import { BRANDS, CONTEXTS, getContexts, SOURCES } from '@shared/brand-loader.js';
 import { describe, expect, it } from 'vitest';
 
 const REQUIRED_SOURCE_FIELDS = [
@@ -155,3 +155,63 @@ describe('Brand loader — SOURCES', () => {
     },
   );
 });
+
+describe('Brand loader — CONTEXTS', () => {
+  const BRAND_KOT = '@kyonax_on_tech';
+
+  it('exposes CONTEXTS as a brand-keyed object', () => {
+    expect(typeof CONTEXTS).toBe('object');
+    expect(CONTEXTS).not.toBe(null);
+  });
+
+  it(`discovers at least one context under ${BRAND_KOT}`, () => {
+    const kot = CONTEXTS[BRAND_KOT] || {};
+    expect(Object.keys(kot).length).toBeGreaterThan(0);
+  });
+
+  it('every context has { raw: string, parsed: object|null }', () => {
+    for (const brand of Object.keys(CONTEXTS)) {
+      for (const slug of Object.keys(CONTEXTS[brand])) {
+        const entry = CONTEXTS[brand][slug];
+        expect(typeof entry.raw).toBe('string');
+        expect(entry.raw.length).toBeGreaterThan(0);
+        expect(
+          entry.parsed === null || typeof entry.parsed === 'object',
+        ).toBe(true);
+      }
+    }
+  });
+
+  it('every parsed context (no parse_error) has the locked Q5 schema', () => {
+    for (const brand of Object.keys(CONTEXTS)) {
+      for (const slug of Object.keys(CONTEXTS[brand])) {
+        const entry = CONTEXTS[brand][slug];
+        if (entry.parse_error) {
+          continue;
+        }
+        expect(typeof entry.parsed.title).toBe('string');
+        expect(typeof entry.parsed.description).toBe('string');
+        expect(Array.isArray(entry.parsed.tags)).toBe(true);
+        expect(Array.isArray(entry.parsed.marquee_items)).toBe(true);
+        expect(Array.isArray(entry.parsed.body_ast)).toBe(true);
+      }
+    }
+  });
+
+  it('slugs are unique within each brand', () => {
+    for (const brand of Object.keys(CONTEXTS)) {
+      const slugs = Object.keys(CONTEXTS[brand]);
+      expect(new Set(slugs).size).toBe(slugs.length);
+    }
+  });
+
+  it('getContexts(handle) returns the per-brand map', () => {
+    const kot = getContexts(BRAND_KOT);
+    expect(typeof kot).toBe('object');
+    expect(Object.keys(kot).length).toBeGreaterThan(0);
+  });
+
+  it('getContexts(missing-handle) returns empty object', () => {
+    expect(getContexts('@no-such-brand')).toEqual({});
+  });
+});
diff --git a/src/shared/components/ui/chip.vue b/src/shared/components/ui/chip.vue
index a46b061..7a82fc7 100644
--- a/src/shared/components/ui/chip.vue
+++ b/src/shared/components/ui/chip.vue
@@ -16,10 +16,20 @@
     variant — "solid" (default) | "overflow" (dashed border +
               dimmed — used for "+N more" indicators at the end
               of a list).
+    shape   — "pill" (default) | "square". Controls border-radius.
+              Both currently map to 0 (the chip ships sharp by
+              default per Plan #context-screen D15); "pill" is
+              reserved for a future redesign that may introduce
+              a radius. Consumers under a sharp-corner mandate
+              (context-screen surfaces) should pass shape="square"
+              to lock 0-radius regardless of future chip CSS.
 -->
 
 <template>
-  <span class="ui-chip" :class="variant_class">
+  <span
+    class="ui-chip"
+    :class="[variant_class, shape_class]"
+  >
     <slot />
   </span>
 </template>
@@ -33,9 +43,15 @@ const props = defineProps({
     default: 'solid',
     validator: (v) => ['solid', 'overflow'].includes(v),
   },
+  shape: {
+    type: String,
+    default: 'pill',
+    validator: (v) => ['pill', 'square'].includes(v),
+  },
 });
 
 const variant_class = computed(() => `ui-chip--${props.variant}`);
+const shape_class = computed(() => `ui-chip--${props.shape}`);
 </script>
 
 <style scoped lang="scss">
@@ -46,7 +62,7 @@ const variant_class = computed(() => `ui-chip--${props.variant}`);
   font-size: var(--fs-175);
   letter-spacing: 0.1em;
   color: var(--clr-primary-100);
-  background: rgba(255, 215, 0, 0.06);
+  background: var(--clr-primary-100-06);
   border: 1px solid var(--clr-border-100);
   text-transform: lowercase;
   white-space: nowrap;
@@ -56,4 +72,9 @@ const variant_class = computed(() => `ui-chip--${props.variant}`);
   opacity: 0.5;
   border-style: dashed;
 }
+
+.ui-chip--pill,
+.ui-chip--square {
+  border-radius: 0;
+}
 </style>
diff --git a/src/shared/components/ui/org-content.test.js b/src/shared/components/ui/org-content.test.js
new file mode 100644
index 0000000..9a68904
--- /dev/null
+++ b/src/shared/components/ui/org-content.test.js
@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) 2026 Cristian D. Moreno — @Kyonax
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
+ *
+ * Tests for <UiOrgContent> — recursive AST renderer (Plan #context-
+ * screen D10 + D11). Mounts the parsed body AST from a fixture
+ * .org string and asserts each major node type produces the
+ * expected DOM. No v-html, no innerHTML — verified by template
+ * walk only.
+ */
+
+import { collectBodyNodes } from '@shared/utils/org.js';
+import UiOrgContent from '@ui/org-content.vue';
+import { mount } from '@vue/test-utils';
+import { unified } from 'unified';
+import uniorgParse from 'uniorg-parse';
+import { describe, expect, it } from 'vitest';
+
+const FIXTURE = `#+TITLE: Fixture
+#+DESCRIPTION: Body fixture
+
+* Headline One
+
+A *bold* and /italic/ paragraph with =verbatim=.
+
+** Headline Two
+
+- plain item
+- [ ] todo
+- [X] done
+
+A separating paragraph between lists.
+
+1. ordered one
+2. ordered two
+
+| col | val |
+|-----+-----|
+| a   | 1   |
+
+#+begin_src js
+const x = 1;
+#+end_src
+
+#+RESULTS:
+: 1
+
+#+begin_quote
+A quote
+#+end_quote
+
+[[https://example.com][a link]]
+
+-----
+`;
+
+const EXPECTED_HEADLINE_COUNT = 2;
+const EXPECTED_LIST_ITEMS = 4;
+const EXPECTED_TABLE_CELLS = 2;
+
+function buildBodyAst(raw_string) {
+  const ast = unified().use(uniorgParse).parse(raw_string);
+  return collectBodyNodes(ast);
+}
+
+function mountFixture() {
+  return mount(UiOrgContent, {
+    props: { ast: buildBodyAst(FIXTURE) },
+  });
+}
+
+describe('<UiOrgContent>', () => {
+  it('renders without throwing on the empty default', () => {
+    const wrapper = mount(UiOrgContent);
+    expect(wrapper.find('.org-content').exists()).toBe(true);
+  });
+
+  it('renders headlines as h2/h3 with org-headline classes', () => {
+    const wrapper = mountFixture();
+    const headlines = wrapper.findAll('.org-headline');
+    expect(headlines.length).toBe(EXPECTED_HEADLINE_COUNT);
+    expect(headlines[0].element.tagName).toBe('H2');
+    expect(headlines[0].classes()).toContain('org-headline--h1');
+    expect(headlines[1].element.tagName).toBe('H3');
+    expect(headlines[1].classes()).toContain('org-headline--h2');
+  });
+
+  it('renders bold + italic + verbatim as semantic elements', () => {
+    const wrapper = mountFixture();
+    expect(wrapper.find('strong.org-bold').exists()).toBe(true);
+    expect(wrapper.find('em.org-italic').exists()).toBe(true);
+    expect(wrapper.find('code.org-verbatim').exists()).toBe(true);
+  });
+
+  it('renders unordered + ordered lists with checkbox items', () => {
+    const wrapper = mountFixture();
+    expect(wrapper.find('ul.org-list--unordered').exists()).toBe(true);
+    expect(wrapper.find('ol.org-list--ordered').exists()).toBe(true);
+    const items = wrapper.findAll('.org-list-item');
+    expect(items.length).toBeGreaterThanOrEqual(EXPECTED_LIST_ITEMS);
+    expect(wrapper.find('.org-list-item--todo').exists()).toBe(true);
+    expect(wrapper.find('.org-list-item--done').exists()).toBe(true);
+  });
+
+  it('renders tables with cells', () => {
+    const wrapper = mountFixture();
+    expect(wrapper.find('table.org-table').exists()).toBe(true);
+    const cells = wrapper.findAll('td.org-table__cell');
+    expect(cells.length).toBeGreaterThanOrEqual(EXPECTED_TABLE_CELLS);
+  });
+
+  it('renders src-block as <pre><code> with lang label', () => {
+    const wrapper = mountFixture();
+    const src_block = wrapper.find('pre.org-src-block');
+    expect(src_block.exists()).toBe(true);
+    expect(src_block.find('code.org-src-block__code').exists()).toBe(true);
+    expect(src_block.find('.org-src-block__lang').text()).toBe('js');
+  });
+
+  it('renders #+RESULTS: as a fixed-width block with OUTPUT label', () => {
+    const wrapper = mountFixture();
+    const results = wrapper.find('pre.org-results');
+    expect(results.exists()).toBe(true);
+    expect(results.find('.org-results__label').text()).toBe('OUTPUT');
+  });
+
+  it('renders quote-block as <blockquote.org-quote>', () => {
+    const wrapper = mountFixture();
+    expect(wrapper.find('blockquote.org-quote').exists()).toBe(true);
+  });
+
+  it('renders external link as <a> with target=_blank + rel=noopener', () => {
+    const wrapper = mountFixture();
+    const link = wrapper.find('a.org-link');
+    expect(link.exists()).toBe(true);
+    expect(link.attributes('href')).toBe('https://example.com');
+    expect(link.attributes('target')).toBe('_blank');
+    expect(link.attributes('rel')).toContain('noopener');
+  });
+
+  it('renders horizontal rule as <hr.org-hr>', () => {
+    const wrapper = mountFixture();
+    expect(wrapper.find('hr.org-hr').exists()).toBe(true);
+  });
+
+  it('does not inject script tags through any node value', () => {
+    const wrapper = mountFixture();
+    expect(wrapper.html()).not.toContain('<script');
+  });
+});
diff --git a/src/shared/components/ui/org-content.vue b/src/shared/components/ui/org-content.vue
new file mode 100644
index 0000000..9ffe55d
--- /dev/null
+++ b/src/shared/components/ui/org-content.vue
@@ -0,0 +1,1104 @@
+<!--
+  Copyright (c) 2026 Cristian D. Moreno — @Kyonax
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
+
+  ui-org-content — domain-agnostic recursive renderer for org-mode
+  ASTs produced by uniorg-parse. Walks `node.children` via v-for,
+  dispatches one template branch per node type per Plan #context-
+  screen D10 (futuristic-but-readable styling). Zero v-html, zero
+  innerHTML — D11 (project ESLint bans innerHTML assignment via
+  no-restricted-syntax; v-html compiles to innerHTML under the
+  hood). All text content flows through Vue's template engine via
+  mustache or scoped <span>; code blocks via <pre><code>{{ value }}
+  </code></pre>.
+
+  Self-referential — uses defineOptions({ name }) so the recursive
+  template binding resolves.
+
+  Props:
+    ast — Array of OrgNode. Default empty array.
+-->
+
+<template>
+  <div class="org-content">
+    <template
+      v-for="(node, index) in ast"
+      :key="index"
+    >
+      <!-- section: unwrap, render its children -->
+      <UiOrgContent
+        v-if="node.type === 'section'"
+        :ast="node.children"
+      />
+
+      <!-- headline: maps level 1 → h2 (page-level h1 lives in strip) -->
+      <component
+        :is="headlineTag(node.level)"
+        v-else-if="node.type === 'headline'"
+        :class="['org-headline', `org-headline--h${node.level}`]"
+      >
+        <UiOrgContent
+          v-if="node.children && node.children.length"
+          :ast="node.children"
+        />
+      </component>
+
+      <!-- paragraph -->
+      <p
+        v-else-if="node.type === 'paragraph'"
+        class="org-paragraph"
+      >
+        <UiOrgContent :ast="node.children" />
+      </p>
+
+      <!-- text leaf -->
+      <span
+        v-else-if="node.type === 'text'"
+      >{{ node.value }}</span>
+
+      <!-- inline marks -->
+      <strong
+        v-else-if="node.type === 'bold'"
+        class="org-bold"
+      >
+        <UiOrgContent :ast="node.children" />
+      </strong>
+      <em
+        v-else-if="node.type === 'italic'"
+        class="org-italic"
+      >
+        <UiOrgContent :ast="node.children" />
+      </em>
+      <code
+        v-else-if="node.type === 'verbatim'"
+        class="org-verbatim"
+      >{{ node.value }}</code>
+      <code
+        v-else-if="node.type === 'code'"
+        class="org-inline-code"
+      >{{ node.value }}</code>
+      <s
+        v-else-if="node.type === 'strike-through'"
+        class="org-strike"
+      >
+        <UiOrgContent :ast="node.children" />
+      </s>
+      <u
+        v-else-if="node.type === 'underline'"
+        class="org-underline"
+      >
+        <UiOrgContent :ast="node.children" />
+      </u>
+
+      <!-- plain-list -->
+      <ul
+        v-else-if="node.type === 'plain-list' && node.listType === 'unordered'"
+        class="org-list org-list--unordered"
+      >
+        <UiOrgContent :ast="node.children" />
+      </ul>
+      <ol
+        v-else-if="node.type === 'plain-list' && node.listType === 'ordered'"
+        class="org-list org-list--ordered"
+      >
+        <UiOrgContent :ast="node.children" />
+      </ol>
+      <dl
+        v-else-if="node.type === 'plain-list' && node.listType === 'descriptive'"
+        class="org-list org-list--descriptive"
+      >
+        <UiOrgContent :ast="node.children" />
+      </dl>
+
+      <!-- list-item (with optional checkbox) -->
+      <li
+        v-else-if="node.type === 'list-item'"
+        :class="['org-list-item', checkboxModifierClass(node)]"
+      >
+        <span
+          v-if="node.checkbox"
+          class="org-checkbox"
+        >{{ checkboxGlyph(node.checkbox) }}</span>
+        <UiOrgContent :ast="node.children" />
+      </li>
+
+      <!-- table — rows and cells rendered inline (NOT through recursive
+           UiOrgContent) because the recursive call wraps children in a
+           `<div class="org-content">`, and Chromium does not reliably
+           honor `display: contents` on a div sitting inside <tbody> /
+           <tr>. The browser inserts an anonymous tbody to repair table
+           structure, which collapses widths and hides cells. Iterating
+           rows + cells directly keeps table layout valid; cell contents
+           still flow through UiOrgContent so inline marks render. -->
+      <table
+        v-else-if="node.type === 'table'"
+        class="org-table"
+      >
+        <tbody>
+          <tr
+            v-for="(row, ri) in standardRows(node)"
+            :key="ri"
+            class="org-table__row"
+          >
+            <td
+              v-for="(cell, ci) in (row.children || [])"
+              :key="ci"
+              class="org-table__cell"
+            >
+              <UiOrgContent :ast="cell.children || []" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- src-block: Shiki tokens when available; plain fallback otherwise.
+           Each token is split into whitespace / non-whitespace runs so
+           the WS runs can render with 2px-square indent markers. -->
+      <pre
+        v-else-if="node.type === 'src-block'"
+        class="org-src-block"
+      ><span
+        v-if="node.language"
+        class="org-src-block__lang"
+      >{{ node.language }}</span><code
+        v-if="tokenized.get(srcKey(node))"
+        class="org-src-block__code"
+      ><template
+        v-for="(line, lineIdx) in tokenized.get(srcKey(node))"
+        :key="lineIdx"
+      ><template
+        v-for="(tok, tIdx) in line"
+        :key="tIdx"
+      ><template
+        v-for="(seg, sIdx) in splitWhitespaceSegments(tok.content)"
+        :key="sIdx"
+      ><span
+        v-if="seg.is_ws"
+        class="org-src-block__ws"
+      >{{ seg.text }}</span><span
+        v-else
+        :style="{ color: tok.color }"
+      >{{ seg.text }}</span></template></template>{{ '\n' }}</template></code><code
+        v-else
+        class="org-src-block__code"
+      >{{ node.value }}</code></pre>
+
+      <!-- #+RESULTS: block (fixed-width with affiliated.RESULTS) -->
+      <pre
+        v-else-if="node.type === 'fixed-width' && hasResults(node)"
+        class="org-results"
+      ><span class="org-results__label">OUTPUT</span><code class="org-results__code">{{ node.value }}</code></pre>
+
+      <!-- example-block -->
+      <pre
+        v-else-if="node.type === 'example-block'"
+        class="org-example"
+      ><code>{{ node.value }}</code></pre>
+
+      <!-- alert-style quote-block (GitHub-flavored alerts: NOTE, TIP,
+           IMPORTANT, WARNING, CAUTION). Detected when a quote-block's
+           first text leaf starts with `[!TYPE]`. The prefix is
+           stripped from the rendered body and the type drives the
+           surface + label color. -->
+      <aside
+        v-else-if="node.type === 'quote-block' && detectAlertType(node)"
+        :class="['org-alert', `org-alert--${detectAlertType(node).toLowerCase()}`]"
+      >
+        <header class="org-alert__header">
+          <svg
+            class="org-alert__icon"
+            width="1em"
+            height="1em"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            aria-hidden="true"
+          ><path :d="ALERT_SVG_PATHS[detectAlertType(node)]" /></svg>
+          <span class="org-alert__label">{{ detectAlertType(node) }}</span>
+        </header>
+        <div class="org-alert__body">
+          <UiOrgContent :ast="alertBody(node)" />
+        </div>
+      </aside>
+
+      <!-- quote-block (plain) -->
+      <blockquote
+        v-else-if="node.type === 'quote-block'"
+        class="org-quote"
+      >
+        <UiOrgContent :ast="node.children" />
+      </blockquote>
+
+      <!-- link -->
+      <a
+        v-else-if="node.type === 'link' && isExternalLink(node)"
+        class="org-link"
+        :href="node.rawLink"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <UiOrgContent
+          v-if="node.children && node.children.length"
+          :ast="node.children"
+        />
+        <span v-else>{{ node.rawLink }}</span>
+      </a>
+      <span
+        v-else-if="node.type === 'link'"
+        class="org-link org-link--internal"
+      >
+        <UiOrgContent
+          v-if="node.children && node.children.length"
+          :ast="node.children"
+        />
+        <span v-else>{{ node.rawLink }}</span>
+      </span>
+
+      <!-- horizontal rule -->
+      <hr
+        v-else-if="node.type === 'horizontal-rule'"
+        class="org-hr"
+      >
+
+      <!-- property-drawer / drawer / unknown: silently filtered -->
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { highlightCode } from '@shared/utils/highlight.js';
+import { ref, watch } from 'vue';
+
+const HEADLINE_LEVEL_OFFSET = 1;
+const MAX_HEADLINE_TAG = 6;
+
+const CHECKBOX_GLYPH_OFF = '▢';
+const CHECKBOX_GLYPH_ON = '▣';
+const CHECKBOX_GLYPH_TRANS = '▨';
+
+const EXTERNAL_LINK_TYPES = new Set([
+  'http',
+  'https',
+  'ftp',
+  'mailto',
+  'tel',
+]);
+
+const ALERT_TYPES = ['NOTE', 'TIP', 'IMPORTANT', 'WARNING', 'CAUTION'];
+const ALERT_PREFIX_RE = /^\[!(\w+)\]\s*/;
+/*
+ * Octicon path data straight from GitHub's primer/octicons repository
+ * (16px viewBox, MIT licensed). Each glyph fills with `currentColor`
+ * so the icon inherits the alert header's brand color (the saturated
+ * 100-shade per family, set per `.org-alert--<type>` below).
+ *
+ * info / light-bulb / report / alert / stop are the exact icons GitHub
+ * renders inside its NOTE / TIP / IMPORTANT / WARNING / CAUTION
+ * Markdown alerts.
+ */
+const ALERT_SVG_PATHS = {
+  NOTE: 'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z',
+  TIP: 'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z',
+  IMPORTANT: 'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z',
+  WARNING: 'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z',
+  CAUTION: 'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z',
+};
+
+defineOptions({ name: 'UiOrgContent' });
+
+const props = defineProps({
+  ast: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const tokenized = ref(new Map());
+
+function headlineTag(level) {
+  const target = (level || 1) + HEADLINE_LEVEL_OFFSET;
+  const clamped = target > MAX_HEADLINE_TAG ? MAX_HEADLINE_TAG : target;
+  return `h${clamped}`;
+}
+
+function checkboxGlyph(state) {
+  if (state === 'on') {
+    return CHECKBOX_GLYPH_ON;
+  }
+  if (state === 'trans') {
+    return CHECKBOX_GLYPH_TRANS;
+  }
+  return CHECKBOX_GLYPH_OFF;
+}
+
+function checkboxModifierClass(node) {
+  if (!node.checkbox) {
+    return '';
+  }
+  if (node.checkbox === 'on') {
+    return 'org-list-item--done';
+  }
+  if (node.checkbox === 'trans') {
+    return 'org-list-item--partial';
+  }
+  return 'org-list-item--todo';
+}
+
+function hasResults(node) {
+  return Boolean(node.affiliated && 'RESULTS' in node.affiliated);
+}
+
+function isExternalLink(node) {
+  return EXTERNAL_LINK_TYPES.has(node.linkType);
+}
+
+function standardRows(table_node) {
+  if (!Array.isArray(table_node.children)) {
+    return [];
+  }
+  return table_node.children.filter(
+    (child) => child.type === 'table-row' && child.rowType === 'standard',
+  );
+}
+
+/*
+ * GitHub-flavored alert detection.
+ * A quote-block becomes an alert when its first text leaf starts with
+ * `[!TYPE]` for any of: NOTE, TIP, IMPORTANT, WARNING, CAUTION.
+ * Detection walks into the first paragraph's first text node (the
+ * common uniorg shape for `#+begin_quote\n[!NOTE]\n…body\n#+end_quote`).
+ */
+function firstAlertText(quote_node) {
+  if (!Array.isArray(quote_node.children)) {
+    return null;
+  }
+  const first = quote_node.children[0];
+  if (!first) {
+    return null;
+  }
+  if (first.type === 'paragraph' && Array.isArray(first.children)) {
+    const text_leaf = first.children.find((child) => child.type === 'text');
+    return text_leaf ? text_leaf.value : null;
+  }
+  if (first.type === 'text') {
+    return first.value;
+  }
+  return null;
+}
+
+/*
+ * Memoize the detection so the template (which calls this 3× per
+ * alert quote-block — `v-else-if`, `:class`, and the label `{{ }}`)
+ * only walks the AST + runs the regex once per node. The cache is a
+ * WeakMap keyed by the AST node object itself; nodes are stable refs
+ * from uniorg-parse, and the WeakMap GC's its entries when an AST is
+ * dropped on the next context selection.
+ */
+const ALERT_TYPE_CACHE = new WeakMap();
+
+function detectAlertType(quote_node) {
+  if (ALERT_TYPE_CACHE.has(quote_node)) {
+    return ALERT_TYPE_CACHE.get(quote_node);
+  }
+  const text = firstAlertText(quote_node);
+  let result = null;
+  if (typeof text === 'string') {
+    const match = ALERT_PREFIX_RE.exec(text);
+    if (match) {
+      const candidate = match[1].toUpperCase();
+      if (ALERT_TYPES.includes(candidate)) {
+        result = candidate;
+      }
+    }
+  }
+  ALERT_TYPE_CACHE.set(quote_node, result);
+  return result;
+}
+
+/*
+ * Returns the alert body — quote-block children with the leading
+ * `[!TYPE]` prefix stripped from the first text leaf. The original AST
+ * is not mutated; nodes are shallow-cloned along the path from the
+ * quote-block root down to the affected text leaf.
+ */
+function alertBody(quote_node) {
+  if (!Array.isArray(quote_node.children)) {
+    return [];
+  }
+  const out = [];
+  let stripped = false;
+  for (const child of quote_node.children) {
+    if (stripped) {
+      out.push(child);
+      continue;
+    }
+    if (child.type === 'paragraph' && Array.isArray(child.children)) {
+      const cleaned_children = stripPrefixFromChildren(child.children);
+      if (cleaned_children.length > 0) {
+        out.push({ ...child, children: cleaned_children });
+      }
+      stripped = true;
+      continue;
+    }
+    if (child.type === 'text') {
+      const cleaned_value = child.value.replace(ALERT_PREFIX_RE, '');
+      if (cleaned_value) {
+        out.push({ ...child, value: cleaned_value });
+      }
+      stripped = true;
+      continue;
+    }
+    out.push(child);
+    stripped = true;
+  }
+  return out;
+}
+
+function stripPrefixFromChildren(children) {
+  const out = [];
+  let stripped = false;
+  for (const node of children) {
+    if (stripped) {
+      out.push(node);
+      continue;
+    }
+    if (node.type === 'text') {
+      const cleaned = node.value.replace(ALERT_PREFIX_RE, '');
+      if (cleaned) {
+        out.push({ ...node, value: cleaned });
+      }
+      stripped = true;
+      continue;
+    }
+    out.push(node);
+    stripped = true;
+  }
+  return out;
+}
+
+function srcKey(node) {
+  return `${node.language || 'plain'}::${node.value}`;
+}
+
+/*
+ * Split a Shiki token's content into alternating whitespace / non-
+ * whitespace runs so the template can render each whitespace run as a
+ * <span class="org-src-block__ws"> with a 2px-square marker per 1ch
+ * column. Non-whitespace runs render with the token's syntax color.
+ */
+function splitWhitespaceSegments(content) {
+  if (typeof content !== 'string' || content.length === 0) {
+    return [];
+  }
+  const segments = [];
+  let i = 0;
+  while (i < content.length) {
+    const start_is_ws = content[i] === ' ' || content[i] === '\t';
+    let j = i + 1;
+    while (j < content.length) {
+      const char_is_ws = content[j] === ' ' || content[j] === '\t';
+      if (char_is_ws !== start_is_ws) {
+        break;
+      }
+      j++;
+    }
+    segments.push({
+      text: content.slice(i, j),
+      is_ws: start_is_ws,
+    });
+    i = j;
+  }
+  return segments;
+}
+
+function collectSrcBlocks(nodes, sink) {
+  for (const node of nodes) {
+    if (node.type === 'src-block' && typeof node.value === 'string') {
+      sink.push(node);
+    }
+    if (Array.isArray(node.children) && node.children.length) {
+      collectSrcBlocks(node.children, sink);
+    }
+  }
+}
+
+async function tokenizeAst(nodes) {
+  const blocks = [];
+  collectSrcBlocks(nodes, blocks);
+  for (const node of blocks) {
+    const key = srcKey(node);
+    if (tokenized.value.has(key)) {
+      continue;
+    }
+    const tokens = await highlightCode(node.value, node.language);
+    if (tokens) {
+      const next = new Map(tokenized.value);
+      next.set(key, tokens);
+      tokenized.value = next;
+    }
+  }
+}
+
+watch(
+  () => props.ast,
+  (next_ast) => {
+    if (Array.isArray(next_ast) && next_ast.length) {
+      tokenizeAst(next_ast);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped lang="scss">
+@use "@app/scss/abstracts/mixins" as *;
+
+.org-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85em;
+  font-family: var(--font-mono);
+  font-size: var(--fs-325);
+  line-height: 1.35;
+  /* `color` deliberately omitted — base text color is set on the
+   * sidebar body so the recursive `.org-content` nested inside an
+   * `.org-headline` (which sets `color: --clr-neutral-100`) inherits
+   * the headline's chosen tone instead of clobbering it back to
+   * the body's neutral-200. */
+  contain: layout paint;
+}
+
+/* Headlines — Geomanist with a 3-dot gold accent stacked left of every
+ * level (single 3px gold square + two box-shadow clones at ±6px). Text
+ * is neutral-100 (the sidebar's chosen title shade); the dot stack is
+ * the small 10% gold accent that marks every headline. The lower-third
+ * strip title is set to the same neutral-100 so both compositions
+ * share the same title tone. */
+.org-headline {
+  font-family: var(--font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--clr-neutral-100);
+  line-height: 1.1;
+  margin-top: 0.2em;
+  margin-bottom: 0;
+  border-radius: 0;
+  position: relative;
+  padding-left: 0.5em;
+}
+
+/* Three vertically-stacked 3px gold squares mark the headline. Single
+ * 3px square + two box-shadow clones at ±6px so the gap between
+ * squares matches the square size. Stack centered against the first
+ * line of the headline via `top: 0.5em` + `translateY(-50%)` so it
+ * adapts as the headline font size scales across h1–h4. */
+.org-headline::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.5em;
+  width: 3px;
+  height: 3px;
+  background-color: var(--clr-primary-100);
+  box-shadow:
+    0 -6px 0 var(--clr-primary-100),
+    0 6px 0 var(--clr-primary-100);
+  transform: translateY(60%);
+}
+
+.org-headline--h1 { font-size: var(--fs-525); }
+.org-headline--h2 { font-size: var(--fs-450); }
+.org-headline--h3 { font-size: var(--fs-400); }
+.org-headline--h4 { font-size: var(--fs-350); }
+
+.org-paragraph {
+  margin: 0;
+}
+
+/* Inline marks — kept as default `display: inline` so they flow with
+ * surrounding text and never expand to full width. The wrapping fix
+ * (preventing block-level break-out from the recursive UiOrgContent
+ * `<div class="org-content">`) is handled below in the
+ * `display: contents` rule for nested .org-content. */
+.org-bold {
+  font-weight: 700;
+  /* Lighter than the surrounding `.org-content` text (neutral-200) to
+   * draw attention without using the gold brand color. */
+  color: var(--clr-neutral-100);
+}
+
+.org-italic {
+  font-style: italic;
+  color: var(--clr-neutral-200);
+}
+
+.org-verbatim,
+.org-inline-code {
+  /* `width: fit-content` is a defensive safeguard: even if any ancestor
+   * accidentally lays this out as a flex/grid item, the element still
+   * sizes to its actual text instead of stretching to a full row. */
+  width: fit-content;
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  line-height: 1.5em;
+  /* Dark-neutral pill — solid neutral-400 surface (hsl(0,0%,25%)) with
+   * off-white text. Stays in the dark side of the palette (no white
+   * surface) while still reading distinctly against the surrounding
+   * neutral-200 body text and the black sidebar. */
+  background: var(--clr-neutral-400);
+  color: var(--clr-neutral-100);
+  padding: 0.05em 0.4em;
+  border-radius: 0;
+}
+
+/*
+ * Every `<UiOrgContent>` invocation wraps its children in a
+ * `<div class="org-content">` whose default layout is `display: flex;
+ * flex-direction: column`. That column stacks children vertically —
+ * which is what we want at the TOP level (paragraphs, headlines, lists
+ * spaced apart in the sidebar body) but is exactly what we DON'T want
+ * for any recursive nested invocation, because every text leaf,
+ * verbatim, bold, etc. inside a paragraph would otherwise become its
+ * own row in a flex column. That's the root cause of "lines jumping".
+ *
+ * Rule: any `.org-content` nested inside another `.org-content`
+ * (regardless of depth — paragraph, bold, list-item, link, anything)
+ * dissolves to `display: contents`. Its box vanishes from layout and
+ * its children participate in the OUTER context — which is the inline
+ * flow of the actual semantic element (paragraph, strong, em, etc.).
+ *
+ * Only the single top-level `.org-content` (direct child of the
+ * sidebar body) keeps the flex-column layout that drives vertical
+ * spacing between top-level org elements.
+ */
+.org-content .org-content {
+  display: contents;
+}
+
+.org-strike {
+  text-decoration: line-through;
+  opacity: 0.55;
+}
+
+/* Lists */
+.org-list {
+  margin: 0;
+  padding-left: 1.4em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35em;
+  list-style: none;
+}
+
+/* Every non-ordered list-item gets a graphic marker — checkbox states
+ * own their own glyph (▢▣▨); everything else (unordered + descriptive +
+ * un-classed) renders a chevron. Ordered lists keep the browser's
+ * decimal marker via list-style.
+ *
+ * `align-self: center` + `translateY(0.05em)` mirrors the `.org-checkbox`
+ * treatment: the list-item is a flex container with
+ * `align-items: baseline`, so the marker would otherwise sit on the
+ * text baseline and read as floating above the line. Centering it
+ * cross-axis and nudging down 0.05em lands it on the text x-height. */
+.org-list:not(.org-list--ordered) .org-list-item:not(.org-list-item--done):not(
+    .org-list-item--partial):not(.org-list-item--todo)::before {
+  content: '\276F';
+  color: var(--clr-primary-100);
+  margin-right: 0.3em;
+  font-weight: 700;
+  display: inline-block;
+  align-self: center;
+  transform: translateY(0.05em);
+}
+
+.org-list--ordered {
+  list-style: decimal;
+  padding-left: 1.6em;
+  color: var(--clr-primary-100);
+}
+
+.org-list--ordered .org-list-item {
+  color: var(--clr-neutral-100);
+}
+
+.org-list-item {
+  border-radius: 0;
+  padding-left: 0.1em;
+}
+
+/* Non-ordered list-items (unordered + descriptive) use flex baseline so
+ * the chevron/checkbox + the paragraph child sit on the same line.
+ * Ordered lists keep default block flow so the browser's
+ * `list-style: decimal` numbering renders. */
+.org-list:not(.org-list--ordered) .org-list-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45em;
+}
+
+.org-list:not(.org-list--ordered) .org-list-item > .org-paragraph {
+  margin: 0;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.org-list--ordered .org-list-item > .org-paragraph {
+  margin: 0;
+  display: inline;
+}
+
+/* Checkboxes — distinct color per state */
+.org-list-item--done .org-checkbox { color: var(--clr-success-100); }
+.org-list-item--partial .org-checkbox { color: var(--clr-warning-100); }
+.org-list-item--todo .org-checkbox { color: var(--clr-neutral-100); }
+
+.org-list-item--done {
+  color: color-mix(in srgb, var(--clr-neutral-100) 65%, transparent);
+}
+
+.org-checkbox {
+  display: inline-block;
+  margin-right: 0.25em;
+  font-family: var(--font-mono);
+  font-size: 1.3em;
+  line-height: 1;
+  /* The list-item is a flex container with `align-items: baseline`, so
+   * `vertical-align` is ignored on this flex child. Override the
+   * cross-axis alignment for the checkbox specifically (centered
+   * instead of baseline-aligned), then nudge it down a hair with a
+   * transform so the glyph reads centered on the text x-height rather
+   * than floating above it. */
+  align-self: center;
+  transform: translateY(0.05em);
+}
+
+/* Tables — bordered, header-row distinct, alternate rows subtle */
+.org-table {
+  border-collapse: collapse;
+  /* `table-layout: fixed` distributes column widths equally regardless
+   * of cell content, so a 6-column table inside the narrow sidebar
+   * gets six even columns instead of one wide column auto-sized to its
+   * longest cell that pushes the rest out of view. Combined with
+   * `word-break` on cells, content wraps inside narrow columns instead
+   * of overflowing the sidebar's `overflow-x: hidden` boundary. */
+  table-layout: fixed;
+  width: 100%;
+  font-family: var(--font-mono);
+  font-size: var(--fs-225);
+  /* Neutral frame — the table belongs to the 30% support tier, not
+   * the 10% gold accent tier. */
+  border: 1px solid var(--clr-neutral-300);
+  border-radius: 0;
+  margin: 0.3em 0;
+}
+
+.org-table__row {
+  border-top: 1px solid var(--clr-border-200);
+}
+
+.org-table__row:first-child {
+  /* Header row — neutral tint instead of gold-10. The header reads as
+   * structure (30% tier), not accent. */
+  background: var(--clr-neutral-50-04);
+  border-top: none;
+}
+
+.org-table__row:first-child .org-table__cell {
+  color: var(--clr-neutral-100);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.org-table__row:nth-child(odd):not(:first-child) {
+  background: var(--clr-neutral-50-04);
+}
+
+.org-table__cell {
+  padding: 0.45em 0.85em;
+  border-right: 1px solid var(--clr-border-200);
+  vertical-align: top;
+  /* Allow content to wrap inside narrow fixed-width columns. Verbatim
+   * tokens like `=very_long_identifier=` would otherwise force a
+   * column wider than the sidebar and clip the rest. */
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+.org-table__cell:last-child {
+  border-right: none;
+}
+
+/* Code blocks — same surface aesthetic as the rest of the HUD: low-alpha
+ * tint background + 1px solid border in the matching saturated color.
+ * Src blocks use neutral; output blocks use primary (gold). Tokens only,
+ * no inline rgba/hsl literals. No corner decoration — the plain border
+ * carries the surface; the absolute-positioned lang/OUTPUT label is the
+ * only chrome. Top padding clears the label so code never overlaps it.
+ * Long code lines wrap (`pre-wrap`) because the sidebar is narrow and
+ * horizontal scrolling would be clipped by the parent body's
+ * `overflow-x: hidden`. */
+.org-src-block,
+.org-results,
+.org-example {
+  position: relative;
+  font-family: var(--font-mono);
+  font-size: var(--fs-200);
+  line-height: 1.35;
+  padding: 2.5em 1.1em 0.85em;
+  margin: 0.3em 0;
+  border-radius: 0;
+  border: 1px solid;
+  contain: layout paint;
+}
+
+.org-src-block {
+  --ws-marker: var(--clr-neutral-400);
+  background-color: var(--clr-neutral-50-04);
+  border-color: var(--clr-neutral-300);
+  color: var(--clr-neutral-100);
+  /* Code surfaces feel tighter at the bottom — output blocks keep the
+   * default to leave room for the gold OUTPUT framing. */
+  padding-bottom: 0.4em;
+}
+
+.org-results {
+  --ws-marker: var(--clr-primary-400);
+  background-color: var(--clr-primary-100-06);
+  border-color: var(--clr-primary-100);
+  color: var(--clr-primary-100);
+  font-weight: 500;
+}
+
+.org-example {
+  --ws-marker: var(--clr-neutral-400);
+  background-color: var(--clr-neutral-50-02);
+  border-color: var(--clr-neutral-400);
+  color: var(--clr-neutral-200);
+  padding-bottom: 0.4em;
+}
+
+/*
+ * Whitespace markers — paint a 3px-wide colored stripe at the center of
+ * each 1ch-wide column via repeating linear-gradient. The gradient is
+ * 1ch tall (height-tile) with the colored band centered horizontally;
+ * the result is a visible 3px square per character, helpful for tab /
+ * indent visibility. Color = --ws-marker (set per-block above).
+ */
+.org-src-block__ws {
+  position: relative;
+  display: inline-block;
+  background-image: linear-gradient(
+    to right,
+    transparent calc((1ch - 3px) / 2),
+    var(--ws-marker, currentColor) calc((1ch - 3px) / 2),
+    var(--ws-marker, currentColor) calc((1ch + 3px) / 2),
+    transparent calc((1ch + 3px) / 2)
+  );
+  background-size: 1ch 3px;
+  background-position: 0 50%;
+  background-repeat: repeat-x;
+}
+
+.org-src-block__lang,
+.org-results__label {
+  position: absolute;
+  top: 0.7em;
+  right: 0.55em;
+  font-family: var(--font-mono);
+  font-size: var(--fs-125);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  padding: 0.05em 0.45em;
+  border-radius: 0;
+}
+
+.org-src-block__lang {
+  color: var(--clr-primary-100);
+  background: var(--clr-primary-100-14);
+  border: 1px solid var(--clr-primary-100);
+}
+
+.org-results__label {
+  /* Border + text use `--clr-neutral-300` — the same border color the
+   * src-block code blocks ship with — so OUTPUT visually rhymes with
+   * the surrounding code block frames instead of standing alone. */
+  color: var(--clr-neutral-300);
+  background-color: lighten(--clr-neutral-500, 8%);
+  border: 1px solid var(--clr-neutral-300);
+}
+
+.org-src-block__code,
+.org-results__code {
+  display: block;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+/*
+ * GitHub-flavored alerts. Each variant pairs a saturated palette family
+ * with a faint 6% color-mix surface tint so the alert reads as a typed
+ * callout (10% accent on the border + glyph) without flooding the
+ * sidebar with a saturated panel (60-30-10 discipline).
+ *
+ * NOTE      → secondary (blue)
+ * TIP       → success   (green)
+ * IMPORTANT → tertiary  (purple — added to the palette for this)
+ * WARNING   → warning   (orange)
+ * CAUTION   → error     (red)
+ */
+.org-alert {
+  margin: 0.4em 0;
+  /* Only the LEFT edge gets a border — the other three sides stay
+   * borderless. Per-type rules below set `border-color` (4-side
+   * shorthand), but since only the left has a `solid` style, only the
+   * left edge renders. */
+  border-left: 1px solid;
+  padding: 0.6em 0.9em;
+  border-radius: 0;
+  /* Body voice = display font (Geomanist) so callouts read as
+   * narrative text, not as code. Inline `<code>` / verbatim spans
+   * still flip back to `var(--font-mono)` via their own rules. */
+  font-family: var(--font-display);
+  font-size: var(--fs-225);
+  /* Tighter line-height than the body's 1.35 — alerts read as a
+   * compact narrative aside, not paragraph-height prose. */
+  line-height: 1.2;
+}
+
+/* Alert header — same display font + tracking as `.org-headline` so
+ * the section titles in the body and the alert callout titles read as
+ * the same typographic system. */
+.org-alert__header {
+  display: flex;
+  align-items: center;
+  gap: 0.45em;
+  font-family: var(--font-display);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: var(--fs-200);
+  line-height: 1;
+  margin-bottom: 0.3em;
+}
+
+.org-alert__icon {
+  flex-shrink: 0;
+  display: inline-block;
+  vertical-align: middle;
+  fill: currentColor;
+}
+
+/* Italic body — both the alerts and the plain blockquote share this
+ * voice so the callout reads as a stylized aside. */
+.org-alert__body {
+  color: var(--clr-neutral-200);
+  font-style: italic;
+}
+
+/* All descendants inside an alert use the display font (Geomanist).
+ *
+ * Critical override: `.org-alert .org-content` MUST be in this list.
+ * The recursive UiOrgContent always wraps its children in
+ * `<div class="org-content">` whose own rule sets
+ * `font-family: var(--font-mono)`, and even though nested .org-content
+ * uses `display: contents` (no layout box), the element still exists
+ * in the DOM and its font-family cascades to descendants. So without
+ * the .org-content override the entire alert body inherits mono no
+ * matter how many sibling-class overrides we add.
+ *
+ * Universal `*` is added with the `:where()` selector for any
+ * descendant tag whose ancestor isn't already covered above —
+ * `:where(*)` keeps specificity 0,2,0 the same as the explicit list
+ * but acts as a final catch. */
+.org-alert .org-content,
+.org-alert .org-verbatim,
+.org-alert .org-inline-code,
+.org-alert .org-table,
+.org-alert .org-src-block,
+.org-alert .org-results,
+.org-alert .org-example,
+.org-alert .org-src-block__lang,
+.org-alert .org-results__label,
+.org-alert :where(*) {
+  font-family: var(--font-display);
+}
+
+/* Per-type accent: header (icon + label) AND border use the saturated
+ * 100-shade of the family — that's the "main color" of the alert.
+ * Surface stays at a faint 6% color-mix so the callout doesn't pool
+ * saturated color (60-30-10 discipline). */
+.org-alert--note {
+  border-color: var(--clr-secondary-100);
+  background-color: color-mix(in srgb, var(--clr-secondary-100) 6%, transparent);
+}
+.org-alert--note .org-alert__header { color: var(--clr-secondary-100); }
+
+.org-alert--tip {
+  border-color: var(--clr-success-100);
+  background-color: color-mix(in srgb, var(--clr-success-100) 6%, transparent);
+}
+.org-alert--tip .org-alert__header { color: var(--clr-success-100); }
+
+.org-alert--important {
+  border-color: var(--clr-tertiary-100);
+  background-color: color-mix(in srgb, var(--clr-tertiary-100) 6%, transparent);
+}
+.org-alert--important .org-alert__header { color: var(--clr-tertiary-100); }
+
+.org-alert--warning {
+  border-color: var(--clr-warning-100);
+  background-color: color-mix(in srgb, var(--clr-warning-100) 6%, transparent);
+}
+.org-alert--warning .org-alert__header { color: var(--clr-warning-100); }
+
+.org-alert--caution {
+  border-color: var(--clr-error-100);
+  background-color: color-mix(in srgb, var(--clr-error-100) 6%, transparent);
+}
+.org-alert--caution .org-alert__header { color: var(--clr-error-100); }
+
+/* Plain quote — same border-left-only treatment as `.org-alert` but
+ * with the neutral border-100 (faint white) for the bar instead of a
+ * typed brand color, since the quote is unlabelled. Faint surface
+ * tint + italic text + display title shape kept consistent with the
+ * alerts so the family reads as one system. */
+.org-quote {
+  margin: 0.4em 0;
+  padding: 0.6em 0.9em;
+  border-left: 1px solid var(--clr-border-100);
+  border-radius: 0;
+  background-color: var(--clr-neutral-50-02);
+  font-family: var(--font-mono);
+  font-size: var(--fs-225);
+  font-style: italic;
+  color: var(--clr-neutral-200);
+}
+
+/* Links */
+.org-link {
+  color: var(--clr-primary-100);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: var(--clr-primary-100-40);
+}
+
+.org-link:hover {
+  text-decoration-color: var(--clr-primary-100);
+}
+
+.org-link--internal {
+  color: var(--clr-neutral-100);
+  text-decoration: none;
+}
+
+/* Horizontal rule */
+.org-hr {
+  border: none;
+  border-top: 1px solid var(--clr-border-200);
+  margin: 0.8em 0;
+}
+</style>
diff --git a/src/shared/composables/composables.test.js b/src/shared/composables/composables.test.js
index 7481fc7..d782813 100644
--- a/src/shared/composables/composables.test.js
+++ b/src/shared/composables/composables.test.js
@@ -10,9 +10,10 @@
  */
 
 import { useAudioAnalyzer } from '@composables/use-audio-analyzer.js';
+import { useContextChannel } from '@composables/use-context-channel.js';
 import { useRecordingStatus } from '@composables/use-recording-status.js';
 import { useSceneName } from '@composables/use-scene-name.js';
-import { describe, expect, it, vi } from 'vitest';
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
 
 vi.mock('@composables/use-obs-websocket.js', async () => {
   const vue = await vi.importActual('vue');
@@ -79,3 +80,73 @@ describe('useAudioAnalyzer (singleton)', () => {
     expect(a.tick).toBe(b.tick);
   });
 });
+
+const post_message_spy = vi.fn();
+
+class MockBroadcastChannel {
+  constructor(name) {
+    this.name = name;
+  }
+  addEventListener() {}
+  removeEventListener() {}
+  postMessage(data) {
+    post_message_spy(data);
+  }
+  close() {}
+}
+
+describe('useContextChannel (singleton)', () => {
+  beforeAll(() => {
+    vi.stubGlobal('BroadcastChannel', MockBroadcastChannel);
+  });
+
+  afterAll(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('returns the same instance on repeated calls', () => {
+    const a = useContextChannel();
+    const b = useContextChannel();
+    expect(a).toBe(b);
+    expect(a.active_slug).toBe(b.active_slug);
+    expect(a.sidebar_open).toBe(b.sidebar_open);
+  });
+});
+
+describe('useContextChannel (initial state)', () => {
+  it('starts with active_slug=null and sidebar_open=false', () => {
+    const state = useContextChannel();
+    expect(state.active_slug.value).toBe(null);
+    expect(state.sidebar_open.value).toBe(false);
+  });
+
+  it('exposes setActiveSlug, toggleSidebar, hideSidebar methods', () => {
+    const state = useContextChannel();
+    expect(typeof state.setActiveSlug).toBe('function');
+    expect(typeof state.toggleSidebar).toBe('function');
+    expect(typeof state.hideSidebar).toBe('function');
+  });
+});
+
+describe('useContextChannel (BroadcastChannel)', () => {
+  it('postMessage fires when setActiveSlug runs', () => {
+    const state = useContextChannel();
+    post_message_spy.mockClear();
+    state.setActiveSlug('obs-browser-sources');
+    expect(post_message_spy).toHaveBeenCalledTimes(1);
+    const payload = post_message_spy.mock.calls[0][0];
+    expect(payload.active_slug).toBe('obs-browser-sources');
+    expect(typeof payload.sidebar_open).toBe('boolean');
+  });
+
+  it('toggleSidebar flips sidebar_open and broadcasts', () => {
+    const state = useContextChannel();
+    const before = state.sidebar_open.value;
+    post_message_spy.mockClear();
+    state.toggleSidebar();
+    expect(state.sidebar_open.value).toBe(!before);
+    expect(post_message_spy).toHaveBeenCalledTimes(1);
+    state.toggleSidebar();
+    expect(state.sidebar_open.value).toBe(before);
+  });
+});
diff --git a/src/shared/composables/use-context-channel.js b/src/shared/composables/use-context-channel.js
new file mode 100644
index 0000000..40a8d95
--- /dev/null
+++ b/src/shared/composables/use-context-channel.js
@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) 2026 Cristian D. Moreno — @Kyonax
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
+ *
+ * useContextChannel — singleton composable for the context-screen
+ * cross-page control plane (Plan #context-screen, decisions D1 +
+ * D4). Owns two reactive refs (active_slug, sidebar_open) and
+ * three actions (setActiveSlug, toggleSidebar, hideSidebar).
+ * Synchronises across same-origin browser tabs via the native
+ * `BroadcastChannel` API, and persists state to `localStorage` so
+ * a page reload restores the last selection. Watches sidebar_open
+ * and toggles the `.context-sidebar-open` class on the document
+ * root — the lower-third strip + sidebar slide animation hang off
+ * that class flip (Plan R2a + R2c + R2f).
+ *
+ * Module-level singleton per session-file §1.14.5: every consumer
+ * shares one channel + one state object. No onUnmounted cleanup —
+ * the channel lives for the page lifetime.
+ *
+ * Mirrors the singleton shape of `use-audio-analyzer.js`.
+ */
+
+import { effectScope, ref, watch } from 'vue';
+
+const CHANNEL_NAME = 'reckit:context-screen';
+const LOCALSTORAGE_KEY = 'reckit:context-channel:state';
+const LOCALSTORAGE_DEBOUNCE_MS = 100;
+const SIDEBAR_OPEN_CLASS = 'context-sidebar-open';
+const RELAY_ENDPOINT = '/__context_state';
+const RELAY_POLL_INTERVAL_MS = 300;
+
+let shared_state = null;
+
+export function useContextChannel() {
+  if (shared_state) {
+    return shared_state;
+  }
+
+  const active_slug = ref(null);
+  const sidebar_open = ref(false);
+
+  const persisted = readPersistedState();
+  if (persisted) {
+    if (typeof persisted.active_slug !== 'undefined') {
+      active_slug.value = persisted.active_slug;
+    }
+    if (typeof persisted.sidebar_open === 'boolean') {
+      sidebar_open.value = persisted.sidebar_open;
+    }
+  }
+
+  const channel = createChannel();
+  function applyRemote(remote) {
+    if (!remote || typeof remote !== 'object') {
+      return;
+    }
+    if (typeof remote.active_slug !== 'undefined') {
+      active_slug.value = remote.active_slug;
+    }
+    if (typeof remote.sidebar_open === 'boolean') {
+      sidebar_open.value = remote.sidebar_open;
+    }
+  }
+
+  channel.addEventListener('message', (event) => {
+    applyRemote(event && event.data);
+  });
+
+  // Cross-process bridge via HTTP. OBS browser source runs in its own
+  // Chromium (CEF) process — BroadcastChannel can't reach across that
+  // boundary. Every consumer polls the dev-server endpoint at a fixed
+  // interval; every local action pushes via POST. Latency ~300 ms p95.
+  // Suppress echo: when we POST our own snapshot, set last_pushed_hash
+  // so the very next poll skips applying it.
+  let last_pushed_hash = '';
+  let is_pushing = false;
+
+  async function pollState() {
+    if (is_pushing) {
+      return;
+    }
+    if (typeof fetch === 'undefined') {
+      return;
+    }
+    try {
+      const res = await fetch(RELAY_ENDPOINT, { cache: 'no-store' });
+      if (!res.ok) {
+        return;
+      }
+      const data = await res.json();
+      const hash = JSON.stringify(data);
+      if (hash !== last_pushed_hash) {
+        last_pushed_hash = hash;
+        applyRemote(data);
+      }
+    } catch {
+      // Network error — silently retry next interval.
+    }
+  }
+
+  async function pushState(snapshot) {
+    if (typeof fetch === 'undefined') {
+      return;
+    }
+    is_pushing = true;
+    try {
+      last_pushed_hash = JSON.stringify(snapshot);
+      await fetch(RELAY_ENDPOINT, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(snapshot),
+      });
+    } catch {
+      // Network error — local state still applied; remote may diverge
+      // until next successful push.
+    } finally {
+      is_pushing = false;
+    }
+  }
+
+  pollState();
+  setInterval(pollState, RELAY_POLL_INTERVAL_MS);
+
+  let persist_timer = null;
+  function schedulePersist() {
+    if (persist_timer) {
+      clearTimeout(persist_timer);
+    }
+    persist_timer = setTimeout(persistNow, LOCALSTORAGE_DEBOUNCE_MS);
+  }
+
+  function persistNow() {
+    persist_timer = null;
+    if (typeof localStorage === 'undefined') {
+      return;
+    }
+    try {
+      localStorage.setItem(
+        LOCALSTORAGE_KEY,
+        JSON.stringify({
+          active_slug: active_slug.value,
+          sidebar_open: sidebar_open.value,
+        }),
+      );
+    } catch {
+      // Storage quota / disabled — silently degrade.
+    }
+  }
+
+  function broadcastSnapshot() {
+    const snapshot = {
+      active_slug: active_slug.value,
+      sidebar_open: sidebar_open.value,
+    };
+    channel.postMessage(snapshot);
+    pushState(snapshot);
+  }
+
+  function setActiveSlug(slug) {
+    active_slug.value = slug;
+    broadcastSnapshot();
+  }
+
+  function toggleSidebar() {
+    sidebar_open.value = !sidebar_open.value;
+    broadcastSnapshot();
+  }
+
+  function hideSidebar() {
+    sidebar_open.value = false;
+    broadcastSnapshot();
+  }
+
+  const scope = effectScope(true);
+  scope.run(() => {
+    watch([active_slug, sidebar_open], schedulePersist);
+    watch(sidebar_open, (open) => applyDocumentClass(open));
+  });
+
+  applyDocumentClass(sidebar_open.value);
+
+  shared_state = {
+    active_slug,
+    sidebar_open,
+    setActiveSlug,
+    toggleSidebar,
+    hideSidebar,
+  };
+  return shared_state;
+}
+
+function createChannel() {
+  if (typeof BroadcastChannel === 'undefined') {
+    return { postMessage: () => {}, onmessage: null, close: () => {} };
+  }
+  return new BroadcastChannel(CHANNEL_NAME);
+}
+
+function readPersistedState() {
+  if (typeof localStorage === 'undefined') {
+    return null;
+  }
+  try {
+    const raw = localStorage.getItem(LOCALSTORAGE_KEY);
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw);
+    if (typeof parsed === 'object' && parsed !== null) {
+      return parsed;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function applyDocumentClass(open) {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  const root = document.documentElement;
+  if (!root || !root.classList) {
+    return;
+  }
+  root.classList.toggle(SIDEBAR_OPEN_CLASS, open);
+}
diff --git a/src/shared/utils/highlight.js b/src/shared/utils/highlight.js
new file mode 100644
index 0000000..3f857b0
--- /dev/null
+++ b/src/shared/utils/highlight.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2026 Cristian D. Moreno — @Kyonax
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
+ *
+ * highlight — async wrapper around Shiki for syntax-tokenizing code
+ * blocks rendered inside <UiOrgContent>. Returns a 2-D token array
+ * ([line][token]) with `content` + `color` per token. Consumers
+ * render tokens through Vue templates as <span :style> entries —
+ * never via v-html (D11). Cache keyed by `lang::code` so the same
+ * block isn't re-tokenized.
+ *
+ * Falls back to `null` when the language is not in the supported
+ * set OR when Shiki throws — consumers then render plain text.
+ */
+
+import { codeToTokens } from 'shiki';
+
+const SUPPORTED_LANGUAGES = new Set([
+  'js',
+  'javascript',
+  'ts',
+  'typescript',
+  'vue',
+  'html',
+  'css',
+  'scss',
+  'json',
+  'bash',
+  'sh',
+  'shell',
+  'python',
+  'py',
+  'markdown',
+  'md',
+  'yaml',
+  'yml',
+  'diff',
+]);
+
+const SHIKI_THEME = 'tokyo-night';
+
+const cache = new Map();
+
+export async function highlightCode(code, language) {
+  if (typeof code !== 'string' || code.length === 0) {
+    return null;
+  }
+  const lang = (language || '').toLowerCase().trim();
+  if (!SUPPORTED_LANGUAGES.has(lang)) {
+    return null;
+  }
+  const key = `${lang}::${code}`;
+  if (cache.has(key)) {
+    return cache.get(key);
+  }
+  try {
+    const result = await codeToTokens(code, {
+      lang,
+      theme: SHIKI_THEME,
+    });
+    cache.set(key, result.tokens);
+    return result.tokens;
+  } catch {
+    cache.set(key, null);
+    return null;
+  }
+}
diff --git a/src/shared/utils/org.js b/src/shared/utils/org.js
new file mode 100644
index 0000000..99edbb8
--- /dev/null
+++ b/src/shared/utils/org.js
@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2026 Cristian D. Moreno — @Kyonax
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
+ *
+ * org — topic library (Rule J) for parsing RECKIT context .org files.
+ * Wraps uniorg-parse to produce a unified AST, then partitions the
+ * top-level nodes into metadata (title, subtitle, description, tags),
+ * a marquee items array (extracted from a `#+begin_marquee` special
+ * block), and a body AST (everything else, rendered in the sidebar
+ * via <UiOrgContent> per D11 — never via v-html).
+ *
+ * Required keys: TITLE, DESCRIPTION. Missing either throws
+ * `OrgSchemaError` so a malformed .org surfaces a parser-error
+ * indicator on the corresponding card (D7).
+ *
+ * Schema lock: see plan node Plan #context-screen, decisions D7 + D11.
+ */
+
+import { unified } from 'unified';
+import uniorgParse from 'uniorg-parse';
+
+const MARQUEE_BLOCK_NAME = 'marquee';
+const REQUIRED_KEYS = ['TITLE', 'DESCRIPTION'];
+const TAG_KEYS = ['FILETAGS', 'TAGS'];
+const TAG_DELIMITER = ':';
+
+const processor = unified().use(uniorgParse);
+
+export class OrgSchemaError extends Error {
+  constructor(message, missing_keys = []) {
+    super(message);
+    this.name = 'OrgSchemaError';
+    this.missing_keys = missing_keys;
+  }
+}
+
+export function parseOrg(raw_string) {
+  const ast = processor.parse(raw_string);
+
+  const required_values = {};
+  const missing = [];
+  for (const key of REQUIRED_KEYS) {
+    const value = extractMetaKey(ast, key);
+    if (value === null) {
+      missing.push(key);
+    } else {
+      required_values[key] = value;
+    }
+  }
+  if (missing.length > 0) {
+    throw new OrgSchemaError(
+      `Required org keyword(s) missing: ${missing.join(', ')}`,
+      missing,
+    );
+  }
+
+  return {
+    title: required_values.TITLE,
+    subtitle: extractMetaKey(ast, 'SUBTITLE'),
+    description: required_values.DESCRIPTION,
+    tags: extractFiletags(ast),
+    marquee_items: extractMarqueeBlock(ast),
+    body_ast: collectBodyNodes(ast),
+  };
+}
+
+export function extractMetaKey(ast, key) {
+  if (!ast || !Array.isArray(ast.children)) {
+    return null;
+  }
+  for (const node of ast.children) {
+    if (node.type === 'keyword' && node.key === key) {
+      return typeof node.value === 'string' ? node.value : null;
+    }
+  }
+  return null;
+}
+
+export function extractFiletags(ast) {
+  if (!ast || !Array.isArray(ast.children)) {
+    return [];
+  }
+  for (const node of ast.children) {
+    if (node.type !== 'keyword') {
+      continue;
+    }
+    if (!TAG_KEYS.includes(node.key)) {
+      continue;
+    }
+    const raw_value = typeof node.value === 'string' ? node.value : '';
+    return raw_value
+      .split(TAG_DELIMITER)
+      .map((part) => part.trim())
+      .filter((part) => part.length > 0);
+  }
+  return [];
+}
+
+export function extractMarqueeBlock(ast) {
+  if (!ast || !Array.isArray(ast.children)) {
+    return [];
+  }
+  for (const node of ast.children) {
+    if (
+      node.type === 'special-block'
+      && node.blockType === MARQUEE_BLOCK_NAME
+    ) {
+      return collectTextLines(node);
+    }
+  }
+  return [];
+}
+
+export function collectBodyNodes(ast) {
+  if (!ast || !Array.isArray(ast.children)) {
+    return [];
+  }
+  const body = [];
+  for (const node of ast.children) {
+    if (node.type === 'keyword') {
+      continue;
+    }
+    if (
+      node.type === 'special-block'
+      && node.blockType === MARQUEE_BLOCK_NAME
+    ) {
+      continue;
+    }
+    body.push(node);
+  }
+  return body;
+}
+
+function collectTextLines(node) {
+  const buffer = [];
+  walkText(node, buffer);
+  return buffer
+    .join('')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+}
+
+function walkText(node, buffer) {
+  if (!node) {
+    return;
+  }
+  if (node.type === 'text' && typeof node.value === 'string') {
+    buffer.push(node.value);
+    return;
+  }
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) {
+      walkText(child, buffer);
+    }
+  }
+}
diff --git a/src/shared/utils/org.test.js b/src/shared/utils/org.test.js
new file mode 100644
index 0000000..0cac3d7
--- /dev/null
+++ b/src/shared/utils/org.test.js
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) 2026 Cristian D. Moreno — @Kyonax
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
+ *
+ * Tests for the org topic library: required-field enforcement,
+ * metadata extraction, filetag parsing, marquee block extraction,
+ * body partitioning. Covers Plan #context-screen Q5 schema lock.
+ */
+
+import {
+  collectBodyNodes,
+  extractFiletags,
+  extractMarqueeBlock,
+  extractMetaKey,
+  OrgSchemaError,
+  parseOrg,
+} from '@shared/utils/org.js';
+import { unified } from 'unified';
+import uniorgParse from 'uniorg-parse';
+import { describe, expect, it } from 'vitest';
+
+const FULL_FIXTURE = `#+TITLE: Hello
+#+SUBTITLE: A second line
+#+DESCRIPTION: Short description for the lower-third strip.
+#+TAGS: :alpha:beta:gamma:
+
+#+begin_marquee
+First item
+Second item
+Third item
+#+end_marquee
+
+* Section A
+
+A paragraph with content.
+
+#+begin_src js
+const x = 1;
+#+end_src
+`;
+
+const MIN_FIXTURE = `#+TITLE: Quick Note
+#+DESCRIPTION: Minimal context — no marquee, no body.
+`;
+
+const MISSING_DESCRIPTION_FIXTURE = `#+TITLE: Only Title
+`;
+
+const MISSING_BOTH_FIXTURE = `#+TAGS: :nope:
+`;
+
+const NO_MARQUEE_FIXTURE = `#+TITLE: A
+#+DESCRIPTION: B
+* Body section
+Content paragraph.
+`;
+
+const FILETAGS_FIXTURE = `#+TITLE: A
+#+DESCRIPTION: B
+#+FILETAGS: :tag1:tag2:
+`;
+
+const EXPECTED_TAG_COUNT = 3;
+const EXPECTED_MARQUEE_COUNT = 3;
+
+function parseRaw(raw_string) {
+  return unified().use(uniorgParse).parse(raw_string);
+}
+
+describe('parseOrg — happy path', () => {
+  it('extracts every locked Q5 schema field from the full fixture', () => {
+    const result = parseOrg(FULL_FIXTURE);
+    expect(result.title).toBe('Hello');
+    expect(result.subtitle).toBe('A second line');
+    expect(result.description).toBe(
+      'Short description for the lower-third strip.',
+    );
+    expect(result.tags).toHaveLength(EXPECTED_TAG_COUNT);
+    expect(result.tags).toEqual(['alpha', 'beta', 'gamma']);
+    expect(result.marquee_items).toHaveLength(EXPECTED_MARQUEE_COUNT);
+    expect(result.marquee_items[0]).toBe('First item');
+    expect(Array.isArray(result.body_ast)).toBe(true);
+    expect(result.body_ast.length).toBeGreaterThan(0);
+  });
+
+  it('returns null subtitle + empty arrays for the minimal fixture', () => {
+    const result = parseOrg(MIN_FIXTURE);
+    expect(result.title).toBe('Quick Note');
+    expect(result.subtitle).toBe(null);
+    expect(result.tags).toEqual([]);
+    expect(result.marquee_items).toEqual([]);
+  });
+});
+
+describe('parseOrg — error paths', () => {
+  it('throws OrgSchemaError when DESCRIPTION is missing', () => {
+    expect(() => parseOrg(MISSING_DESCRIPTION_FIXTURE)).toThrow(
+      OrgSchemaError,
+    );
+  });
+
+  it('throws OrgSchemaError when both required keys are missing', () => {
+    let thrown = null;
+    try {
+      parseOrg(MISSING_BOTH_FIXTURE);
+    } catch (error) {
+      thrown = error;
+    }
+    expect(thrown).toBeInstanceOf(OrgSchemaError);
+    expect(thrown.missing_keys).toEqual(['TITLE', 'DESCRIPTION']);
+  });
+});
+
+describe('extractMetaKey', () => {
+  it('returns the keyword value when present', () => {
+    const ast = parseRaw('#+TITLE: Hello\n');
+    expect(extractMetaKey(ast, 'TITLE')).toBe('Hello');
+  });
+
+  it('returns null for an absent key', () => {
+    const ast = parseRaw('#+TITLE: Hello\n');
+    expect(extractMetaKey(ast, 'SUBTITLE')).toBe(null);
+  });
+
+  it('handles a null AST gracefully', () => {
+    expect(extractMetaKey(null, 'TITLE')).toBe(null);
+  });
+});
+
+describe('extractFiletags', () => {
+  it('parses the colon-delimited TAGS form', () => {
+    const ast = parseRaw('#+TAGS: :a:b:c:\n');
+    expect(extractFiletags(ast)).toEqual(['a', 'b', 'c']);
+  });
+
+  it('also recognises FILETAGS', () => {
+    const ast = parseRaw(FILETAGS_FIXTURE);
+    expect(extractFiletags(ast)).toEqual(['tag1', 'tag2']);
+  });
+
+  it('returns an empty array when no tag keyword is present', () => {
+    const ast = parseRaw('#+TITLE: A\n');
+    expect(extractFiletags(ast)).toEqual([]);
+  });
+});
+
+describe('extractMarqueeBlock', () => {
+  it('returns the items split by newline, trimmed, no empties', () => {
+    const ast = parseRaw(FULL_FIXTURE);
+    const items = extractMarqueeBlock(ast);
+    expect(items).toEqual(['First item', 'Second item', 'Third item']);
+  });
+
+  it('returns an empty array when no marquee block is present', () => {
+    const ast = parseRaw(NO_MARQUEE_FIXTURE);
+    expect(extractMarqueeBlock(ast)).toEqual([]);
+  });
+});
+
+describe('collectBodyNodes', () => {
+  it('filters out top-level keywords', () => {
+    const ast = parseRaw(FULL_FIXTURE);
+    const body = collectBodyNodes(ast);
+    expect(body.every((node) => node.type !== 'keyword')).toBe(true);
+  });
+
+  it('filters out the marquee special-block', () => {
+    const ast = parseRaw(FULL_FIXTURE);
+    const body = collectBodyNodes(ast);
+    expect(
+      body.every(
+        (node) =>
+          !(node.type === 'special-block' && node.blockType === 'marquee'),
+      ),
+    ).toBe(true);
+  });
+
+  it('preserves headlines, sections, paragraphs, src-blocks', () => {
+    const ast = parseRaw(FULL_FIXTURE);
+    const body = collectBodyNodes(ast);
+    expect(body.length).toBeGreaterThan(0);
+  });
+});
diff --git a/src/views/components/elements/card.vue b/src/views/components/elements/card.vue
index bbc36a7..b3c54b8 100644
--- a/src/views/components/elements/card.vue
+++ b/src/views/components/elements/card.vue
@@ -153,14 +153,26 @@
       </div>
     </div>
 
-    <button
-      type="button"
-      class="detail-button"
-      @click="openDetail"
-    >
-      <span class="detail-icon">&#9670;</span>
-      <span class="detail-label">DETAILS</span>
-    </button>
+    <div class="card-secondary-actions">
+      <button
+        type="button"
+        class="detail-button"
+        @click="openDetail"
+      >
+        <span class="detail-icon">&#9670;</span>
+        <span class="detail-label">DETAILS</span>
+      </button>
+
+      <button
+        v-if="is_context_screen"
+        type="button"
+        class="detail-button detail-button--control"
+        @click="openControl"
+      >
+        <span class="detail-icon">&#9670;</span>
+        <span class="detail-label">CONTROLS</span>
+      </button>
+    </div>
 
     <PreviewModal
       :overlay="overlay"
@@ -175,10 +187,18 @@
       :is_open="is_detail_open"
       @close="closeDetail"
     />
+
+    <ContextControlModal
+      v-if="is_context_screen"
+      :overlay="overlay"
+      :is_open="is_control_open"
+      @close="closeControl"
+    />
   </article>
 </template>
 
 <script setup>
+import ContextControlModal from '@modals/context-control.vue';
 import DetailModal from '@modals/detail.vue';
 import PreviewModal from '@modals/preview.vue';
 import UiBadge from '@ui/badge.vue';
@@ -188,6 +208,8 @@ import UiIcon from '@ui/icon.vue';
 import { parseEmphasis } from '@views/utils/markup.js';
 import { computed, ref } from 'vue';
 
+const CONTEXT_SCREEN_ID = 'context-screen';
+
 const COPIED_RESET_MS = 1500;
 const MAX_VISIBLE_USE_CASES = 3;
 const MAX_VISIBLE_REQUIRES = 3;
@@ -202,12 +224,17 @@ const props = defineProps({
 const is_copied = ref(false);
 const is_modal_open = ref(false);
 const is_detail_open = ref(false);
+const is_control_open = ref(false);
 const pending_trigger = ref(null);
 
 const is_planned = computed(() => {
   return props.overlay.status === 'planned';
 });
 
+const is_context_screen = computed(() => {
+  return props.overlay.id === CONTEXT_SCREEN_ID;
+});
+
 const description_segments = computed(() => {
   return parseEmphasis(props.overlay.description);
 });
@@ -264,6 +291,14 @@ function closeDetail() {
   is_detail_open.value = false;
 }
 
+function openControl() {
+  is_control_open.value = true;
+}
+
+function closeControl() {
+  is_control_open.value = false;
+}
+
 const full_url = computed(() => {
   return `${window.location.origin}${props.overlay.path}`;
 });
@@ -291,7 +326,7 @@ async function copyUrl() {
 .overlay-card {
   position: relative;
   padding: 1.75em 1.5em;
-  background: rgba(255, 215, 0, 0.02);
+  background: var(--clr-primary-100-02);
   border: 1px solid var(--clr-border-100);
   display: grid;
   grid-auto-rows: auto;
@@ -572,7 +607,7 @@ async function copyUrl() {
 .action-button:hover:not(:disabled) {
   color: var(--clr-primary-100);
   border-color: var(--clr-primary-100);
-  background: rgba(255, 215, 0, 0.04);
+  background: var(--clr-primary-100-04);
 }
 
 .action-button:disabled {
@@ -586,6 +621,11 @@ async function copyUrl() {
   line-height: 1;
 }
 
+.card-secondary-actions {
+  display: flex;
+  gap: 0.5em;
+}
+
 .detail-button {
   display: flex;
   align-items: center;
@@ -608,7 +648,13 @@ async function copyUrl() {
 .detail-button:hover {
   color: var(--clr-primary-100);
   border-color: var(--clr-primary-100);
-  background: rgba(255, 215, 0, 0.04);
+  background: var(--clr-primary-100-04);
+}
+
+.detail-button--control {
+  color: var(--clr-primary-100);
+  border-color: var(--clr-primary-100);
+  background: var(--clr-primary-100-04);
 }
 
 .detail-icon {
diff --git a/src/views/components/modals/context-control.vue b/src/views/components/modals/context-control.vue
new file mode 100644
index 0000000..e0c4987
--- /dev/null
+++ b/src/views/components/modals/context-control.vue
@@ -0,0 +1,533 @@
+<!--
+  Copyright (c) 2026 Cristian D. Moreno — @Kyonax
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
+
+  context-control — modal opened from the context-screen source card
+  (Plan #context-screen D4). Lets the user pick the active .org slug,
+  toggle the right sidebar, and watch the live result inside an
+  iframe scoped to /<brand>/context-screen. State flows through
+  useContextChannel — the iframe receives BroadcastChannel messages
+  from the same origin and reacts in real time.
+
+  Three sections: clickable slug list (active one badged with
+  <UiBadge variant="active">), open-sidebar toggle, live preview.
+
+  Binding: <ContextControlModal>. Composed by <Card> when the source
+  is the context-screen entry (conditional render on source.id).
+
+  Props:
+    overlay — source registry entry (from sources.js).
+    is_open — modal open state (parent owns).
+
+  Emits:
+    close — modal backdrop click / ESC / X.
+-->
+
+<template>
+  <BaseModal
+    :is_open="is_open"
+    @close="close"
+  >
+    <template #header>
+      <span class="modal-brand">{{ overlay.brand }}</span>
+      <span class="modal-title">{{ overlay.name }}</span>
+      <span class="modal-spec">CONTROLS</span>
+    </template>
+
+    <div class="control-grid">
+      <section class="control-list">
+        <header class="control-list__header">
+          <span class="control-list__label">CONTEXTS</span>
+          <span class="control-list__hint">
+            {{ slugs.length }} discovered for {{ overlay.brand }}
+          </span>
+        </header>
+
+        <ul
+          v-if="slugs.length"
+          class="control-list__items"
+        >
+          <li
+            v-for="entry in slugs"
+            :key="entry.slug"
+            :class="[
+              'control-list__item',
+              { 'control-list__item--active':
+                entry.slug === channel.active_slug.value },
+              { 'control-list__item--errored': entry.parse_error },
+            ]"
+          >
+            <button
+              type="button"
+              class="control-list__button"
+              @click="selectSlug(entry.slug)"
+            >
+              <span class="control-list__slug">{{ entry.slug }}</span>
+              <span
+                v-if="entry.parsed && entry.parsed.title"
+                class="control-list__title"
+              >{{ entry.parsed.title }}</span>
+              <span
+                v-else-if="entry.parse_error"
+                class="control-list__error"
+              >{{ entry.parse_error.message }}</span>
+            </button>
+
+            <UiBadge
+              v-if="entry.slug === channel.active_slug.value"
+              variant="active"
+            >
+              ACTIVE
+            </UiBadge>
+            <UiBadge
+              v-else-if="entry.parse_error"
+              variant="dim"
+            >
+              ERROR
+            </UiBadge>
+          </li>
+        </ul>
+
+        <p
+          v-else
+          class="control-list__empty"
+        >
+          No .org files discovered. Drop one at
+          <code>{{ overlay.brand }}/data/contexts/&lt;slug&gt;.org</code>
+          to author a context.
+        </p>
+
+        <div class="control-list__toggles">
+          <button
+            type="button"
+            class="control-toggle"
+            :class="{ 'control-toggle--on': channel.sidebar_open.value }"
+            @click="channel.toggleSidebar()"
+          >
+            <span class="control-toggle__dot" />
+            <span class="control-toggle__label">
+              {{ channel.sidebar_open.value
+                ? 'SIDEBAR OPEN'
+                : 'SIDEBAR CLOSED' }}
+            </span>
+          </button>
+        </div>
+      </section>
+
+      <section class="control-stage">
+        <header class="control-stage__header">
+          <span class="control-stage__label">LIVE PREVIEW</span>
+          <span class="control-stage__spec">
+            {{ overlay.width }} × {{ overlay.height }}
+            @ {{ overlay.fps }}
+          </span>
+        </header>
+        <div
+          ref="stage_el"
+          class="control-stage__inner"
+          :style="aspect_style"
+        >
+          <iframe
+            ref="iframe_ref"
+            class="control-stage__iframe"
+            :src="full_url"
+            :style="iframe_size_style"
+            :title="`${overlay.name} live preview`"
+          />
+        </div>
+      </section>
+    </div>
+
+    <template #footer>
+      <button
+        type="button"
+        class="action-button"
+        @click="reload"
+      >
+        <span class="action-icon">↻</span>
+        <span class="action-label">RELOAD IFRAME</span>
+      </button>
+    </template>
+  </BaseModal>
+</template>
+
+<script setup>
+import { useContextChannel } from '@composables/use-context-channel.js';
+import BaseModal from '@modals/base.vue';
+import { getContexts } from '@shared/brand-loader.js';
+import UiBadge from '@ui/badge.vue';
+import {
+  computed, nextTick, onMounted, onUnmounted, ref, watch,
+} from 'vue';
+
+const RESIZE_DEBOUNCE_MS = 100;
+
+const props = defineProps({
+  overlay: {
+    type: Object,
+    required: true,
+  },
+  is_open: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const channel = useContextChannel();
+
+const stage_el = ref(null);
+const iframe_ref = ref(null);
+
+const slugs = computed(() => {
+  const contexts = getContexts(props.overlay.brand);
+  return Object.keys(contexts).map((slug) => ({
+    slug,
+    parsed: contexts[slug].parsed,
+    parse_error: contexts[slug].parse_error,
+  }));
+});
+
+const full_url = computed(() => {
+  return `${window.location.origin}${props.overlay.path}`;
+});
+
+const aspect_style = computed(() => {
+  return {
+    aspectRatio: `${props.overlay.width} / ${props.overlay.height}`,
+  };
+});
+
+const iframe_size_style = computed(() => {
+  return {
+    width: `${props.overlay.width}px`,
+    height: `${props.overlay.height}px`,
+  };
+});
+
+function selectSlug(slug) {
+  channel.setActiveSlug(slug);
+}
+
+function close() {
+  emit('close');
+}
+
+function applyScale() {
+  const element = stage_el.value;
+  if (!element) {
+    return;
+  }
+  const width = element.getBoundingClientRect().width;
+  const scale = width / props.overlay.width;
+  element.style.setProperty('--iframe-scale', scale);
+}
+
+function reload() {
+  const target = iframe_ref.value;
+  if (!target) {
+    return;
+  }
+  const url = target.src;
+  target.src = '';
+  setTimeout(() => {
+    target.src = url;
+  }, 0);
+}
+
+watch(() => props.is_open, async (open) => {
+  if (!open) {
+    return;
+  }
+  await nextTick();
+  requestAnimationFrame(applyScale);
+});
+
+let resize_timer = null;
+
+function handleResize() {
+  if (resize_timer) {
+    clearTimeout(resize_timer);
+  }
+  resize_timer = setTimeout(applyScale, RESIZE_DEBOUNCE_MS);
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  if (resize_timer) {
+    clearTimeout(resize_timer);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@use "@app/scss/abstracts/mixins" as *;
+
+.modal-brand {
+  @include hud-label-base;
+  position: static;
+  font-size: var(--fs-175);
+  color: var(--clr-primary-100);
+  letter-spacing: 0.2em;
+  opacity: 0.7;
+}
+
+.modal-title {
+  font-family: var(--font-mono);
+  font-size: var(--fs-475);
+  font-weight: 700;
+  color: var(--clr-neutral-50);
+  letter-spacing: 0.05em;
+}
+
+.modal-spec {
+  @include hud-label-base;
+  position: static;
+  font-size: var(--fs-175);
+  letter-spacing: 0.2em;
+  color: var(--clr-neutral-100);
+}
+
+.control-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
+  gap: 1.5em;
+  padding: 1.5em;
+}
+
+.control-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  min-width: 0;
+}
+
+.control-list__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1em;
+}
+
+.control-list__label {
+  @include hud-label-base;
+  position: static;
+  font-size: var(--fs-175);
+  letter-spacing: 0.2em;
+  color: var(--clr-primary-100);
+}
+
+.control-list__hint {
+  font-family: var(--font-mono);
+  font-size: var(--fs-150);
+  color: var(--clr-neutral-100);
+}
+
+.control-list__items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.control-list__item {
+  display: flex;
+  align-items: center;
+  gap: 0.6em;
+  padding: 0.6em 0.8em;
+  border: 1px solid var(--clr-border-100);
+  background: var(--clr-neutral-50-02);
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.control-list__item--active {
+  border-color: var(--clr-primary-100);
+  background: var(--clr-primary-100-06);
+}
+
+.control-list__item--errored {
+  border-color: var(--clr-error-100);
+}
+
+.control-list__button {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2em;
+  flex: 1 1 auto;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  padding: 0;
+  font-family: inherit;
+}
+
+.control-list__slug {
+  font-family: var(--font-mono);
+  font-size: var(--fs-275);
+  color: var(--clr-neutral-50);
+  letter-spacing: 0.05em;
+}
+
+.control-list__title {
+  font-family: var(--font-mono);
+  font-size: var(--fs-175);
+  color: var(--clr-neutral-100);
+  letter-spacing: 0.04em;
+}
+
+.control-list__error {
+  font-family: var(--font-mono);
+  font-size: var(--fs-175);
+  color: var(--clr-error-100);
+  letter-spacing: 0.04em;
+}
+
+.control-list__empty {
+  font-family: var(--font-mono);
+  font-size: var(--fs-225);
+  color: var(--clr-neutral-100);
+  margin: 0;
+  padding: 1em;
+  border: 1px dashed var(--clr-border-100);
+}
+
+.control-list__empty code {
+  color: var(--clr-primary-100);
+}
+
+.control-list__toggles {
+  display: flex;
+  gap: 0.6em;
+  margin-top: 0.4em;
+}
+
+.control-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6em;
+  padding: 0.5em 1em;
+  font-family: var(--font-mono);
+  font-size: var(--fs-275);
+  color: var(--clr-neutral-50);
+  background: transparent;
+  border: 1px solid var(--clr-border-100);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.control-toggle:hover {
+  border-color: var(--clr-primary-100);
+}
+
+.control-toggle--on {
+  color: var(--clr-primary-100);
+  border-color: var(--clr-primary-100);
+  background: var(--clr-primary-100-06);
+}
+
+.control-toggle__dot {
+  display: inline-block;
+  width: 0.5em;
+  height: 0.5em;
+  background: var(--clr-neutral-200);
+  border-radius: 0;
+}
+
+.control-toggle--on .control-toggle__dot {
+  background: var(--clr-primary-100);
+}
+
+.control-stage {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  min-width: 0;
+}
+
+.control-stage__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.control-stage__label {
+  @include hud-label-base;
+  position: static;
+  font-size: var(--fs-175);
+  letter-spacing: 0.2em;
+  color: var(--clr-primary-100);
+}
+
+.control-stage__spec {
+  font-family: var(--font-mono);
+  font-size: var(--fs-150);
+  color: var(--clr-neutral-100);
+}
+
+.control-stage__inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: var(--clr-neutral-500);
+  border: 1px solid var(--clr-border-100);
+}
+
+.control-stage__iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  background: transparent;
+  transform: scale(var(--iframe-scale, 0.5));
+  transform-origin: top left;
+}
+
+.action-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6em;
+  padding: 0.5em 1em;
+  font-family: var(--font-mono);
+  font-size: var(--fs-275);
+  color: var(--clr-neutral-50);
+  background: transparent;
+  border: 1px solid var(--clr-border-100);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.action-button:hover {
+  color: var(--clr-primary-100);
+  border-color: var(--clr-primary-100);
+  background: var(--clr-primary-100-04);
+}
+
+.action-icon {
+  color: var(--clr-primary-100);
+}
+</style>
diff --git a/src/views/components/modals/preview.vue b/src/views/components/modals/preview.vue
index 1a39856..09d994c 100644
--- a/src/views/components/modals/preview.vue
+++ b/src/views/components/modals/preview.vue
@@ -236,7 +236,7 @@ onUnmounted(() => {
 
 .modal-stage {
   padding: 1em;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--clr-neutral-50-04);
 }
 
 .stage-inner {
@@ -297,7 +297,7 @@ onUnmounted(() => {
 .action-button:hover {
   color: var(--clr-primary-100);
   border-color: var(--clr-primary-100);
-  background: rgba(255, 215, 0, 0.04);
+  background: var(--clr-primary-100-04);
 }
 
 .action-icon {
diff --git a/src/views/components/sections/setup.vue b/src/views/components/sections/setup.vue
index c0da439..e2f8956 100644
--- a/src/views/components/sections/setup.vue
+++ b/src/views/components/sections/setup.vue
@@ -94,7 +94,7 @@
 }
 
 .setup-flow li:hover {
-  background: rgba(255, 215, 0, 0.04);
+  background: var(--clr-primary-100-04);
   color: var(--clr-neutral-50);
 }
 
diff --git a/src/views/components/sections/sources.vue b/src/views/components/sections/sources.vue
index cc86ded..d5490d0 100644
--- a/src/views/components/sections/sources.vue
+++ b/src/views/components/sections/sources.vue
@@ -182,12 +182,12 @@ const filtered_overlays = computed(() => {
 
 .brand-tab:hover {
   color: var(--clr-neutral-50);
-  background: rgba(255, 215, 0, 0.03);
+  background: var(--clr-primary-100-03);
 }
 
 .brand-tab.active {
   color: var(--clr-primary-100);
-  background: rgba(255, 215, 0, 0.06);
+  background: var(--clr-primary-100-06);
   border-color: var(--clr-border-100);
   border-bottom: 1px solid var(--clr-neutral-500);
 }
@@ -325,12 +325,12 @@ const filtered_overlays = computed(() => {
 
 .status-chip:hover {
   color: var(--clr-neutral-50);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--clr-neutral-50-04);
 }
 
 .status-chip.active {
   color: var(--clr-primary-100);
-  background: rgba(255, 215, 0, 0.06);
+  background: var(--clr-primary-100-06);
 }
 
 .chip-dot {
diff --git a/vite.config.js b/vite.config.js
index bb0a4e5..3f85694 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -51,6 +51,71 @@ const pkg = require('./package.json');
 const ROOT = dirname(fileURLToPath(import.meta.url));
 const DEV_SERVER_PORT = 5173;
 
+// Cross-process bridge for the context-screen control plane.
+// OBS browser source runs in its own embedded Chromium (CEF) process —
+// BroadcastChannel can't reach across processes, and Vite HMR custom
+// events proved unreliable in CEF (silent failure of the WebSocket
+// connection or the import.meta.hot handoff). HTTP polling + push is
+// universal: every browser process can fetch + POST the same endpoint.
+//
+// State is held in a closure on the dev server. GET returns current
+// state; POST replaces it. Composable polls at POLL_INTERVAL_MS for
+// freshness; pushes on every local action. ~300 ms p95 cross-process
+// latency, debuggable with `curl http://localhost:5173/__context_state`.
+const CONTEXT_STATE_PATH = '/__context_state';
+const context_relay_plugin = {
+  name: 'reckit-context-relay',
+  configureServer(server) {
+    let current_state = { active_slug: null, sidebar_open: false };
+
+    server.middlewares.use(CONTEXT_STATE_PATH, (req, res) => {
+      res.setHeader('Cache-Control', 'no-store');
+      res.setHeader('Access-Control-Allow-Origin', '*');
+      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+      res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+      if (req.method === 'OPTIONS') {
+        res.statusCode = 204;
+        res.end();
+        return;
+      }
+
+      if (req.method === 'GET') {
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify(current_state));
+        return;
+      }
+
+      if (req.method === 'POST') {
+        let body = '';
+        req.on('data', (chunk) => {
+          body += chunk;
+        });
+        req.on('end', () => {
+          try {
+            const parsed = JSON.parse(body);
+            if (parsed && typeof parsed === 'object') {
+              current_state = parsed;
+              res.statusCode = 204;
+              res.end();
+              return;
+            }
+            res.statusCode = 400;
+            res.end('invalid payload');
+          } catch {
+            res.statusCode = 400;
+            res.end('invalid json');
+          }
+        });
+        return;
+      }
+
+      res.statusCode = 405;
+      res.end();
+    });
+  },
+};
+
 export default defineConfig({
   resolve: {
     alias: {
@@ -69,7 +134,7 @@ export default defineConfig({
       '@composables': resolve(ROOT, 'src/shared/composables'),
     },
   },
-  plugins: [vue()],
+  plugins: [vue(), context_relay_plugin],
   define: {
     __APP_VERSION__: JSON.stringify(pkg.version),
   },