/* === assets/css/daBase.css === */
/* ─────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ STYLESHEET — daBase.css
   Classification: Absolute Base (NEUTRAL, NON-OVERRIDING)
   Version: 2.0.0 (Layered - No !important)
   File: /assets/css/daBase.css
   Maintainer: DΛREΛKT_ Core UI Team

   Changes (2.0.0):
   - Wrapped in @layer daBase for proper cascade control
   - Removed all !important declarations
   - Safety reset targets pages with NO data-site only
   ─────────────────────────────────────────────────────────────────────────── */

@layer daBase {

/* GLOBAL RESET — foundation only */
html, body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color, #ffffff);
  color: var(--text-color, #111111);
  font-family: var(--font-family-base, 'Inter', 'Roboto', sans-serif);
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  /* 🔒 GENESIS: Prevent horizontal scroll - site should never scroll sideways */
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* LAYOUT ROOTS — NEVER CLAMP OR CENTER AUTOMATICALLY */
#app,
#layout-wrapper,
main,
section,
header,
footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Layout structure */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#layout-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* ZONES */
#layout-wrapper > header,
#layout-wrapper > nav,
#layout-wrapper > main,
#layout-wrapper > footer,
#header-zone,
#nav-zone,
#layout-zones,
#content-zone,
#footer-zone {
  align-self: stretch;
  width: 100%;
  max-width: none;
}

/* FLEX UTILITIES */
.flex { display: flex; align-items: stretch; }
.flex-center { display: flex; align-items: center; justify-content: center; }

.flex > button,
.flex > [role="button"],
.flex > input,
.flex > select,
.flex > textarea {
  flex: 0 0 auto;
  min-width: max-content;
}

.grow    { flex: 1 1 auto; min-width: 0; }
.no-grow { flex: 0 0 auto; min-width: max-content; }

:where([flex],[data-flex]) {
  flex: 0 0 auto;
  align-self: auto;
  min-width: max-content;
}

/* GRID UTILITIES */
.grid  { display: grid; gap: var(--spacing-sm, 8px); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

/* CONTAINERS — no auto max-width or centering EVER */
.container,
.section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Optional helper for explicit centering (only when asked) */
.container.center,
.section.center {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-max, 1200px);
  padding-left: var(--spacing-sm, 8px);
  padding-right: var(--spacing-sm, 8px);
}

/* BOX + SPACERS */
.box {
  background: var(--background-color, #fff);
  padding: var(--spacing-md, 16px);
  border-radius: 0.5rem;
  box-shadow: 0 0 8px rgba(0,0,0,.2);
  transition: box-shadow .3s ease;
}
.box:hover { box-shadow: 0 0 12px rgba(0,0,0,.3); }

.spacer    { display: block; width: 100%; }
.spacer-xs { height: var(--spacing-xs, 4px); }
.spacer-sm { height: var(--spacing-sm, 8px); }
.spacer-md { height: var(--spacing-md, 16px); }
.spacer-lg { height: var(--spacing-lg, 24px); }

/* BACKGROUND + BORDERS */
[data-background] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

[data-border-shadow] {
  border-style: solid;
  border-width: 0px;
  border-color: var(--color-border, #cccccc);
  box-shadow: none;
}

/* ANIMATIONS (safe defaults) */
[data-animation] {
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
}
[data-animation].active { opacity: 1; transform: translateY(0); }
[data-animation="fade-in"].active    { opacity: 1; }
[data-animation="slide-up"].active   { transform: translateY(0); }
[data-animation="slide-left"].active { transform: translateX(0); }
[data-animation="slide-right"].active{ transform: translateX(0); }
[data-animation="zoom-in"].active    { transform: scale(1); }
[data-animation="rotate-in"].active  { transform: rotate(0deg); }

/* ─────────────────────────────────────────────────────────────
   BOOT MODE — Scoped: only triggers when engine is booting
   ───────────────────────────────────────────────────────────── */
body[data-engine="boot"],
#boot-center {
  background: var(--boot-bg, #000);
  color: var(--boot-fg, #0f0);
  font-family: var(--font-family-base, monospace);
  min-height: 100vh;
}

#boot-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

/* Safety reset when NO site is mounted (prevents white flick on site pages) */
html:not([data-site]) body:not([data-site]) {
  background: var(--background-color, #ffffff);
  color: var(--text-color, #111111);
}

}

/* === assets/css/core.css === */
/* ─── DΛREΛKT_ STYLESHEET — core ─────────────────────────────────────────────
   Classification: Core | Reset + Theme Tokens + Globals (atom-safe)
   Version: 2.2.0  (neutral, non-opinionated, no implicit clamping/centering)
   File: /assets/css/core.css
   ─────────────────────────────────────────────────────────────────────────── */

@layer reset, base, atoms, modules, site;

/* ─── RESET (lowest) ─────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
}

/* ─── BASE (neutral foundation; NEVER clamps/centers) ───────────────────── */
@layer base {

  /* THEME TOKENS */
  :root{
    --bg:#ffffff; --text:#111111;
    --primary:#4f46e5; --secondary:#3ea8ff;
    --font-main:'Inter','Roboto',sans-serif;

    --gap-xs:.25rem; --gap-sm:.5rem; --gap-md:1rem; --gap-lg:2rem;

    --ctl-h:28px; --ctl-pad-x:10px;
    --ctl-bg:#111; --ctl-bd:#333; --ctl-fg:#bcbcbc; --ctl-fg-muted:#8aa; --ctl-focus:#3ea8ff;
  }
  :root[data-theme="dark"]{
    --bg:#000; --text:#bcbcbc;
    --ctl-bg:#111; --ctl-bd:#333; --ctl-fg:#bcbcbc; --ctl-fg-muted:#8aa; --ctl-focus:#3ea8ff;
  }

  /* BODY (no max-width, no auto-center) */
  body{
    font-family:var(--font-main);
    background-color:var(--bg);
    color:var(--text);
    line-height:1.6;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    background-size:cover;
    width:100%;
    min-height:100vh;
  }

  /* TYPOGRAPHY */
  h1,h2,h3,h4,h5,h6{ font-family:var(--font-main); font-weight:600; line-height:1.2; }
  p{ margin:0 0 var(--gap-md) 0; }

  /* LINKS */
  a{ color:var(--primary); text-decoration:none; transition:color .25s ease; }
  a:hover{ text-decoration:underline; }

  /* BUTTONS (visuals only; no layout constraints) */
  button{
    font-family:var(--font-main); font-size:1rem;
    padding:var(--gap-sm) var(--gap-md);
    border:none; border-radius:6px; cursor:pointer;
    background-color:var(--primary); color:#fff;
    transition:background-color .25s ease, color .25s ease, border-color .25s ease;
    -webkit-tap-highlight-color:transparent;
  }
  button:hover{ background-color:var(--secondary); }
  button:disabled{ opacity:.6; cursor:not-allowed; }

  /* IMAGES */
  img{ max-width:100%; height:auto; display:block; }

  /* CONTAINER (neutral) — NO implicit width/max/centering */
  .container, .section{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
  }

  /* EXPLICIT, OPT-IN helpers (use only when you want them) */
  .center{ margin-left:auto; margin-right:auto; }
  .clamp{ max-width:var(--container-max,1200px); }
  .pad-x{ padding-left:var(--gap-lg); padding-right:var(--gap-lg); }
  .w-100{ width:100%; }

  /* BUTTON VARIANTS (visual only) */
  .back-btn{
    display:inline-block; padding:.5rem 1rem; border-radius:8px;
    background-color:var(--primary); color:#fff; border:2px solid var(--primary);
    transition:background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  .back-btn:hover{ background-color:var(--secondary); }

  .btn-primary,#save-theme-btn{ background-color:var(--primary); color:#fff; border:2px solid var(--primary); }
  .btn-primary:hover,#save-theme-btn:hover{ background-color:var(--secondary); }

  .btn-secondary,#reset-theme-btn{ background-color:transparent; color:var(--primary); border:2px solid var(--primary); }
  .btn-secondary:hover,#reset-theme-btn:hover{ background-color:var(--primary); color:var(--bg); }

  .btn-danger,#factory-reset-btn{ background-color:#e11d48; color:#fff; border:2px solid #e11d48; }
  .btn-danger:hover,#factory-reset-btn:hover{ background-color:#be123c; border-color:#be123c; }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{ scroll-behavior:auto; }
  }
}


/* System-wide: visually boost Λ */
.lambda {
  display: inline-block;
  transform: scale(1.22) translateY(-0.04em);
  transform-origin: center;
  text-shadow: 0 0 8px rgba(255,255,255,.14);
}

.lambda {
  transform: scale(1.25) translateY(-0.03em);
  text-shadow: 0 6px 10px rgb(255, 0, 0);
}


/* DΛREΛKT_ — Lambda Identity Glow */
.lambda {
  display: inline-block;
  transform: scale(1.22) translateY(-0.03em);
  transform-origin: center;
  color: #fff;
  text-shadow:
    0 0 4px rgba(255, 0, 0, 0.6),
    0 0 12px rgba(255, 0, 0, 0.4),
    0 0 20px rgba(255, 0, 0, 0.3);
  animation: lambdaGlow 4s ease-in-out infinite alternate;
}

/* Subtle breathing glow animation */
@keyframes lambdaGlow {
  0% {
    text-shadow:
      0 0 2px rgba(255, 0, 0, 0.5),
      0 0 8px rgba(255, 0, 0, 0.4),
      0 0 16px rgba(255, 0, 0, 0.3);
  }
  100% {
    text-shadow:
      0 0 6px rgba(255, 80, 80, 0.8),
      0 0 18px rgba(255, 0, 0, 0.6),
      0 0 30px rgba(255, 0, 0, 0.4);
  }
}

.lambda {
  opacity: 0;
  animation:
    lambdaBoot 0.8s ease-out forwards,
    lambdaGlow 4s ease-in-out infinite alternate 0.8s;
}

@keyframes lambdaBoot {
  0%, 10%, 20%, 30%, 40%, 50% {
    opacity: 0;
  }
  55%, 60%, 70%, 80%, 100% {
    opacity: 1;
  }
}



/* atoms/modules/site layers intentionally left to your project */

/* === tools/modules/ui.canvas/ui.canvas.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.canvas
   Version: 3.1.0 | Genesis-Final • Wrapping-Aware • Theme-Safe
   Classification: Core UI | Structural Root | Frameless Baseline
   Maintainer: DΛREΛKT_ CORE UI TEAM
   Host: Global (RuthBowers / Dareakt / Diagnostics / Dev)
   ──────────────────────────────────────────────────────────────── */
@layer ui.canvas {

  /* ── Root Canvas (Frameless Structural Container) ───────────── */
  .ui-canvas[data-module="ui.canvas"],
  .ui-canvas[data-mod="ui_canvas"] {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    isolation: isolate;

    /* Token-aware visual styling */
    padding-inline: var(--edge, 32px);
    background: var(--bg, var(--site-bg, transparent));
    color: var(--fg, var(--site-fg, inherit));

    /* Responsive + scroll control (body owns scroll by default) */
    overflow-y: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }

  /* ── Centered & Max Width Variant ───────────────────────────── */
  .ui-canvas[data-module="ui.canvas"][data-center="1"],
  .ui-canvas[data-mod="ui_canvas"][data-center="1"] {
    margin-inline: auto;
    max-width: var(--max, 14400px);
  }

  /* ── Vertical stacking rhythm (using --stack token) ─────────── */
  /* Default: no auto stacking (content-driven layout) */
  .ui-canvas[data-module="ui.canvas"] > * + *,
  .ui-canvas[data-mod="ui_canvas"] > * + * {
    margin-top: 0;
  }

  /* ── Layout Intent: Editorial pages opt in to stacking ───────── */
  body[data-layout="viewport"] .ui-canvas[data-module="ui.canvas"] > * + *,
  body[data-layout="viewport"] .ui-canvas[data-mod="ui_canvas"] > * + * {
    margin-top: var(--stack, 24px);
  }

  /* ── Scroll toggle (false = lock body scroll) ───────────────── */
  .ui-canvas[data-module="ui.canvas"][data-scroll="0"],
  .ui-canvas[data-mod="ui_canvas"][data-scroll="0"] {
    overflow-y: hidden !important;
  }

  /* ── Scroll toggle (true = canvas owns scroll) ───────────────── */
  .ui-canvas[data-module="ui.canvas"][data-scroll="1"],
  .ui-canvas[data-mod="ui_canvas"][data-scroll="1"] {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
  }

  /* ── Theme + Scope Awareness ────────────────────────────────── */
  .ui-canvas[data-module="ui.canvas"][data-theme="dark"],
  .ui-canvas[data-mod="ui_canvas"][data-theme="dark"] {
    background: var(--site-bg-dark, #111);
    color: var(--site-fg-dark, #eee);
  }
  .ui-canvas[data-module="ui.canvas"][data-theme="light"],
  .ui-canvas[data-mod="ui_canvas"][data-theme="light"] {
    background: var(--site-bg-light, #fff);
    color: var(--site-fg-light, #111);
  }

  /* ── Internal Helpers (isolate nested atoms) ────────────────── */
  .ui-canvas[data-module="ui.canvas"],
  .ui-canvas[data-mod="ui_canvas"]
  :where(.ui-navbar__inner,
         .ui-section-top__inner,
         .ui-copy__wrap,
         .ui-list__wrap,
         .ui-grid__wrap) {
    padding: 0;
    margin: 0;
  }

  .ui-canvas[data-module="ui.canvas"],
  .ui-canvas[data-mod="ui_canvas"]
  :where(.ui-grid, .ui-grid__wrap, .ui-grid__cell) {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* ── Responsive Safety (Stack fallback below 900px) ─────────── */
  @media (max-width: 900px) {
    .ui-canvas[data-module="ui.canvas"],
    .ui-canvas[data-mod="ui_canvas"] {
      padding-inline: var(--edge-mobile, 16px);
    }
  }

  /* ── Debug Overlay (opt-in via data-debug="1") ──────────────── */
  .ui-canvas[data-module="ui.canvas"][data-debug="1"]::before,
  .ui-canvas[data-mod="ui_canvas"][data-debug="1"]::before {
    content: "ui.canvas active";
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    font-size: 10px;
    color: var(--fg, #999);
    opacity: 0.4;
    pointer-events: none;
    z-index: 9999;
  }

  /* ── Shadow Isolation Gate (no bleed outside canvas) ───────── */
  .ui-canvas[data-module="ui.canvas"] *,
  .ui-canvas[data-mod="ui_canvas"] * {
    box-sizing: inherit;
  }

  /* ── Layout Intent: Full-height only when explicitly requested ───────── */
  body[data-layout="viewport"] .ui-canvas[data-module="ui.canvas"],
  body[data-layout="viewport"] .ui-canvas[data-mod="ui_canvas"] {
    min-height: 100vh;
    height: 100%;
  }
}

/* === tools/modules/ui.layout/ui.layout.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.layout
   Classification : Structural Atom | Grid/Flex Coordinator
   Version        : 3.3.0 | Genesis-Final • Self-Healing • Token-Safe • Canvas-Aware
   Maintainer     : DΛREΛKT_ UI TEAM
   ──────────────────────────────────────────────────────────────── */
@layer ui.layout {

  /* ── Root Layout Container ───────────────────────────────────── */
  .ui-layout[data-module="ui.layout"],
  .ui-layout[data-mod="ui_layout"] {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: auto;
    box-sizing: border-box;
    position: relative;
    isolation: isolate;

    gap: var(--ui-layout-gap, 0);
    padding-block: var(--ui-layout-padY, 0);
    padding-inline: var(--ui-layout-padX, 0);

    background: var(--ui-layout-bg, transparent);
    color: var(--ui-layout-fg, inherit);
    align-items: var(--ui-layout-align, stretch);
    justify-content: var(--ui-layout-justify, start);

    /* Full-bleed by default — override only if needed */
    margin-inline: 0 !important;
    max-width: none !important;
  }

  /* ── Layout Intent: Only viewport layouts stretch ───────── */
  body[data-layout="viewport"] .ui-layout[data-module="ui.layout"],
  body[data-layout="viewport"] .ui-layout[data-mod="ui_layout"] {
    min-height: 100%;
  }

  /* ── Mode: Grid ──────────────────────────────────────────────── */
  .ui-layout[data-mode="grid"] {
    display: grid;
    grid-template-columns: repeat(
      var(--ui-layout-cols, auto-fit),
      minmax(var(--ui-layout-cell-min, 200px), 1fr)
    );
  }

  /* ── Mode: Flex ──────────────────────────────────────────────── */
  .ui-layout[data-mode="flex"] {
    display: flex;
    flex-direction: row;
    flex-wrap: var(--ui-layout-wrap, wrap);
    align-items: var(--ui-layout-align, stretch);
    justify-content: var(--ui-layout-justify, start);
  }

  /* ── Flex Column Mode (for main layout) ──────────────────────── */
  .ui-layout[data-mode="flex"][data-direction="column"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* 🔧 FIX: Column layouts must NOT wrap — wrapping pushes children
       into new columns (off-screen right) when content exceeds container height.
       Vertical overflow should scroll, not create horizontal columns. */
    flex-wrap: nowrap;
  }

  /* ── Layout Intent: Full-height only when explicitly requested ───────── */
  body[data-layout="viewport"] .ui-layout[data-mode="flex"][data-direction="column"] {
    min-height: 100%;
  }

  /* ── Mode: Stack ─────────────────────────────────────────────── */
  .ui-layout[data-mode="stack"] {
    display: flex;
    flex-direction: column;
    align-items: var(--ui-layout-align, stretch);
    justify-content: var(--ui-layout-justify, start);
  }

  /* ── Mode: Split (two-column) ───────────────────────────────── */
  .ui-layout[data-mode="split"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ui-layout-gap, 32px);
  }

  /* ── Mode: Center ────────────────────────────────────────────── */
  .ui-layout[data-mode="center"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  /* ── Layout Intent: Center mode stretches only in viewport layout ───────── */
  body[data-layout="viewport"] .ui-layout[data-mode="center"] {
    min-height: 100%;
  }

  /* ── Cells ───────────────────────────────────────────────────── */
  .ui-layout__cell {
    display: block;
    min-width: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  /* Main area grows to fill available space (pushes footer to bottom) */
  .ui-layout__cell[data-area="main"] {
    flex: 1 1 auto;
  }

  /* ── Bleed Mode: Remove padding when section declares bleed intent ───────────────── */
  .ui-layout__cell[data-area="main"][data-bleed="true"] {
    padding-inline: 0;
  }

  /* ── Canvas Awareness (inside ui.canvas) ─────────────────────── */
  .ui-canvas[data-mod="ui_canvas"] :where(.ui-layout) {
    width: 100%;
    margin: 0 !important;
    background: var(--ui-layout-bg, transparent);
  }

  /* ── Responsive Stacking (token-controlled) ─────────────────── */
  @media (max-width: 1280px) {
    .ui-layout[data-stack="lg"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }
  @media (max-width: 960px) {
    .ui-layout[data-stack="md"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }
  @media (max-width: 640px) {
    .ui-layout[data-stack="sm"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }
  @media (max-width: 480px) {
    .ui-layout[data-stack="xs"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }

  /* ── Debug Overlay (opt-in) ──────────────────────────────────── */
  /* .ui-layout[data-debug="1"]::before {
       content: "ui.layout active";
       position: absolute;
       top: 0.25rem;
       right: 0.75rem;
       font-size: 10px;
       opacity: 0.4;
       color: #999;
       pointer-events: none;
     } */
}

/* === tools/modules/ui.navbar/ui.navbar.css === */
/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.navbar
   Classification : UI Atom | Navigation Bar | Wrapping-Aware | Themeable
   Version        : 2.0.0 | Genesis-Final • BEM-Consistent • Responsive • Bus-Linked
   File           : /tools/modules/ui.navbar/ui.navbar.css
   Maintainer     : DΛREΛKT_ UI TEAM
   Runtime Tokens : --ui-navbar-bg, --ui-navbar-bd, --ui-navbar-fg,
                    --ui-navbar-link, --ui-navbar-hover, --ui-navbar-active,
                    --ui-navbar-padY, --ui-navbar-padX, --ui-navbar-gap,
                    --ui-navbar-logo-fs, --ui-navbar-link-fs
   ────────────────────────────────────────────────────────────────────────────── */

/* ─── Layer: Tokens ──────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    --ui-navbar-bg:      var(--site-bg, #fff);
    --ui-navbar-bd:      var(--site-border, #eee);
    --ui-navbar-fg:      var(--site-fg, #111);
    --ui-navbar-link:    var(--site-fg, #111);
    --ui-navbar-hover:   #000;
    --ui-navbar-active:  #000;
    --ui-navbar-padY:    16px;
    --ui-navbar-padX:    0px;    /* canvas handles side padding */
    --ui-navbar-gap:     24px;
    --ui-navbar-logo-fs: 18px;
    --ui-navbar-link-fs: 15px;
  }
}

/* ─── Layer: Atoms ───────────────────────────────────────────────────────────── */
@layer atoms {
  /* wrapping container */
  .ui-navbar__wrap {
    width: 100%;
    background: var(--ui-navbar-bg);
    border-bottom: 1px solid var(--ui-navbar-bd);
    position: relative;
    z-index: var(--ui-navbar-z, 100);
  }

  /* root element */
  .ui-navbar {
    width: 100%;
    color: var(--ui-navbar-fg);
  }

  /* inner flex row: logo left / menu right */
  .ui-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-navbar-gap);
    padding: var(--ui-navbar-padY) var(--ui-navbar-padX);
    box-sizing: border-box;
    width: 100%;
  }

  /* logo */
  .ui-navbar__logo {
    font-size: var(--ui-navbar-logo-fs);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ui-navbar-fg);
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    cursor: pointer;
    flex-shrink: 0; /* Prevent logo from shrinking */
  }

  /* menu list */
  .ui-navbar__menu {
    display: flex;
    align-items: center;
    gap: var(--ui-navbar-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: auto; /* Push menu to the right */
  }

  .ui-navbar__item {
    margin: 0;
    padding: 0;
  }

  .ui-navbar__link {
    color: var(--ui-navbar-link);
    font-size: var(--ui-navbar-link-fs);
    line-height: 1;
    text-decoration: none;
    padding: 2px 0;
    transition: color .15s ease, text-decoration .15s ease;
  }

  .ui-navbar__link:hover,
  .ui-navbar__link:focus {
    color: var(--ui-navbar-hover);
    text-decoration: underline;
  }

  .ui-navbar__link[aria-current="page"] {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--ui-navbar-active);
  }

  /* ── Dropdown submenu ──────────────────────────────────────────────────── */
  .ui-navbar__item--has-dropdown {
    position: relative;
  }

  .ui-navbar__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    min-width: 180px;
    background: var(--ui-navbar-bg);
    border: 1px solid var(--ui-navbar-bd);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 200;
  }

  .ui-navbar__item--has-dropdown:hover > .ui-navbar__dropdown,
  .ui-navbar__item--has-dropdown:focus-within > .ui-navbar__dropdown {
    display: block;
  }

  .ui-navbar__dropdown-item {
    margin: 0;
    padding: 0;
  }

  .ui-navbar__dropdown-link {
    display: block;
    padding: 0.4rem 1rem;
    white-space: nowrap;
    font-size: calc(var(--ui-navbar-link-fs) - 1px);
  }

  .ui-navbar__dropdown-link:hover,
  .ui-navbar__dropdown-link:focus {
    background: rgba(0, 0, 0, 0.04);
  }

  /* ── Hamburger button (hidden on desktop) ──────────────────────────────── */
  .ui-navbar__burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 5px;
    z-index: 201;
  }

  .ui-navbar__burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ui-navbar-fg);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .ui-navbar__burger--open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .ui-navbar__burger--open span:nth-child(2) {
    opacity: 0;
  }

  .ui-navbar__burger--open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* optional wrapping diagnostics (builder/inspector layer) */
  .ui-navbar__wrap[data-state="warn"] { outline: 1px dashed orange; }
  .ui-navbar__wrap[data-state="error"] { outline: 1px dashed red; }
  .ui-navbar__wrap[data-state="trust"] { outline: 1px dashed limegreen; }

  /* ── Mobile: hamburger + slide-down menu ─────────────────────────────── */
  @media (max-width: 720px) {
    .ui-navbar__burger {
      display: flex;
    }

    .ui-navbar__inner {
      flex-wrap: wrap;
    }

    .ui-navbar__menu {
      display: none;
      flex-direction: column;
      width: 100%;
      gap: 0;
      padding: 0.5rem 0;
      order: 3;
    }

    .ui-navbar__menu--open {
      display: flex;
    }

    .ui-navbar__item {
      width: 100%;
    }

    .ui-navbar__link {
      display: block;
      padding: 0.75rem 0;
      border-bottom: 1px solid var(--ui-navbar-bd);
    }

    .ui-navbar__dropdown {
      position: static;
      transform: none;
      box-shadow: none;
      border: none;
      padding: 0 0 0 1.5rem;
      min-width: auto;
      background: transparent;
    }

    .ui-navbar__item--has-dropdown > .ui-navbar__dropdown {
      display: block;
    }

    .ui-navbar__dropdown-link {
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--ui-navbar-bd);
    }
  }
}

/* === tools/modules/ui.section.composer/ui.section.composer.css === */
/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.section.composer
   Classification : Orchestrator | Page Composer | JSON-Driven Renderer | Wrapping-Aware
   Version        : 3.1.0 | Genesis-Final • Token-Harmonized • Layer-Scoped • Schema-Aligned
   File           : /tools/modules/ui.section.composer/ui.section.composer.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ────────────────────────────────────────────────────────────────────────────── */

/* ─── Layer Declaration ─────────────────────────────────────────────────────── */
@layer site, ui.section;

/* ─── Base Container ────────────────────────────────────────────────────────── */
.ui-section-composer {
  display: flex;
  flex-direction: column;
  gap: var(--site-pad, 3rem);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  isolation: isolate;
  contain: layout paint;
}

/* ─── Fade-in Animation (deprecated - using opacity transition instead) ───── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Section Placeholder — Production Fallback ─────────────────────────────── */
.section-placeholder {
  padding: clamp(1rem, 2vw, 2rem);
  text-align: center;
  font-size: 0.9rem;
  color: var(--ui-muted, #777);
  border: 1px dashed var(--ui-border, #ccc);
  border-radius: var(--ui-radius, 0.5rem);
  background: var(--ui-bg-alt, #fafafa);
  margin-inline: auto;
  width: min(100%, 900px);
  opacity: 0.85;
  line-height: 1.5;
  backdrop-filter: var(--ui-blur, none);
}

/* ─── Developer Mode Placeholder (DAREAKT_MODE=dev) ─────────────────────────── */
.section-placeholder.dev {
  background: #fff5f5;
  border-color: #ff8888;
  color: #d33;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 1.5rem;
  box-shadow: inset 0 0 6px rgba(255, 0, 0, 0.1);
}

/* ─── Token Harmony — Site Layer Bridge ─────────────────────────────────────── */
body[data-site] .ui-section-composer {
  --ui-border: var(--site-border, #ccc);
  --ui-bg-alt: var(--site-bg-alt, #fafafa);
  --ui-muted: var(--site-muted, #666);
  --ui-radius: var(--site-radius, 0.5rem);
  --ui-blur: var(--site-blur, none);
}

/* ─── Wrapping Awareness — Structural Markers ───────────────────────────────── */
.ui-section-composer[data-wrapping="layout"] {
  outline: 1px dotted rgba(0, 128, 255, 0.25);
  outline-offset: 3px;
}
.ui-section-composer[data-wrapping="canvas"] {
  outline: 1px dashed rgba(0, 200, 128, 0.25);
  outline-offset: 3px;
}

/* ─── Debug Overlay — Optional Diagnostic Grid ──────────────────────────────── */
.ui-section-composer[data-debug="true"] {
  outline: 1px dotted rgba(0, 0, 0, 0.25);
  outline-offset: 2px;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.02) 0,
    rgba(0, 0, 0, 0.02) 2px,
    transparent 2px,
    transparent 4px
  );
}

/* === tools/modules/ui.section.footer/ui.section.footer.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.section.footer
   Classification : Layout Section | Footer | Genesis-Final
   Version        : 2.0.1 | Wrapper-Safe • Token-Aligned • Responsive
   File           : /tools/modules/ui.section.footer/ui.section.footer.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ──────────────────────────────────────────────────────────────── */

@layer ui.section.footer {
  /* ─── Root Scope ─────────────────────────────────────────────── */
  .ui-section-footer[data-mod="ui_section_footer"] {
    box-sizing: border-box;
    width: 100%;
    background: var(--ui-sec-footer-bg, var(--site-bg));
    color: var(--ui-sec-footer-fg, var(--site-fg));
    padding: var(--ui-sec-footer-padY, 40px) var(--ui-sec-footer-padX, 24px);
    text-align: center;
    border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    isolation: isolate;
    position: relative;
    z-index: var(--ui-sec-footer-z, 1);
  }

  /* ─── Inner Wrapper ──────────────────────────────────────────── */
  .ui-section-footer__inner {
    max-width: var(--ui-sec-footer-maxWidth, 1200px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    line-height: 1.5;
  }

  /* ─── Links Navigation ───────────────────────────────────────── */
  .ui-section-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .ui-section-footer__links a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: opacity 0.25s ease, color 0.25s ease;
  }

  .ui-section-footer__links a:hover,
  .ui-section-footer__links a:focus-visible {
    opacity: 1;
    color: var(--ui-sec-footer-link-hover, var(--site-accent, currentColor));
  }

  /* ─── Credits ───────────────────────────────────────────────── */
  .ui-section-footer__credits {
    font-size: 0.9rem;
    opacity: 0.7;
    line-height: 1.4;
    text-wrap: balance;
  }

  /* ─── Responsive Adjustments ────────────────────────────────── */
  @media (max-width: 768px) {
    .ui-section-footer[data-mod="ui_section_footer"] {
      padding: calc(var(--ui-sec-footer-padY, 40px) * 0.75)
        calc(var(--ui-sec-footer-padX, 24px) * 0.75);
    }

    .ui-section-footer__inner {
      gap: 0.5rem;
    }

    .ui-section-footer__credits {
      font-size: 0.8rem;
    }
  }
}

/* === tools/modules/ui.section.body/ui.section.body.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.section.body
   Classification : Layout Section | JSON-driven | Genesis Safe
   Version        : 2.1.0 | Edge-Token-Aware • DOM-Return-Guaranteed
   File           : /tools/modules/ui.section.body/ui.section.body.css
   Maintainer     : DΛREΛKT_ UI TEAM

   ARCHITECTURE:
   Root (.ui-section-body) = full-width background container.
     → padding-block for vertical spacing
     → NO padding-inline (background must go edge-to-edge)

   Inner (.ui-section-body__inner) = content constraint container.
     → padding-inline via --edge token (site controls the value)
     → optional max-width + centering via data-width="content"
     → NO responsive scaling here — sites set --edge at breakpoints

   Token chain:  --edge  →  --ui-sec-body-padX  →  24px (hardcoded fallback)
   Sites ONLY need to set --edge. Everything responds automatically.
   ──────────────────────────────────────────────────────────────── */

@layer ui.section.body {

  /* ─── Root: full-width background container ──────────────────── */
  .ui-section-body[data-module="ui.section.body"] {
    box-sizing: border-box;
    width: 100%;
    background: var(--ui-sec-body-bg, var(--site-bg));
    color: var(--ui-sec-body-fg, var(--site-fg));
    padding-block: var(--ui-sec-body-padY, 48px);
    padding-inline: 0;
    margin: 0;
  }

  /* ─── Inner: content container with edge padding ─────────────── */
  .ui-section-body__inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--edge, var(--ui-sec-body-padX, 24px));
  }

  /* ─── Opt-in: constrained content width ──────────────────────── */
  .ui-section-body[data-width="content"] .ui-section-body__inner {
    max-width: var(--ui-body-max, 1200px);
    margin-inline: auto;
  }

  /* ─── Opt-in: full-bleed (no padding, no constraint) ─────────── */
  .ui-section-body[data-width="bleed"] .ui-section-body__inner {
    padding-inline: 0;
    margin-inline: 0;
    max-width: none;
  }
}

/* === tools/modules/ui.stack/ui.stack.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.stack
   Version: 3.1.0 | Genesis-Final • Vertical Rhythm Atom
   Classification: Layout Atom | Flow Coordinator | Token-Aware
   Maintainer: DΛREΛKT_ UI TEAM
   ──────────────────────────────────────────────────────────────── */
@layer components.ui.stack {

  /* ─── Root Stack Container ───────────────────────────────────── */
  .ui-stack[data-mod="ui_stack"] {
    display: flex;
    flex-direction: column;
    gap: var(--ui-stack-gap, 1rem);
    align-items: var(--ui-stack-align, stretch);
    justify-content: var(--ui-stack-justify, start);
    position: relative;
    background: var(--ui-stack-bg, transparent);
    color: var(--ui-stack-fg, inherit);
    width: 100%;
    box-sizing: border-box;
    isolation: isolate;
  }

  /* ─── Bleed Mode (edge overlap) ───────────────────────────────── */
  .ui-stack[data-bleed="true"] {
    margin-top: calc(var(--ui-stack-gap, 1rem) * -1);
  }

  /* ─── Divider-Enabled Mode ────────────────────────────────────── */
  .ui-stack[data-mod="ui_stack"][data-divider="1"] > * + * {
    border-top: 1px solid var(--ui-stack-divider-color, rgba(0,0,0,0.1));
    padding-top: calc(var(--ui-stack-gap, 1rem) / 2);
  }

  /* ─── Debug Visualization (diagnostics only) ──────────────────── */
  .ui-stack[data-mod="ui_stack"][data-debug="true"] {
    outline: 1px dashed rgba(255, 0, 0, 0.35);
    outline-offset: 2px;
  }

  /* ─── Theme-Aware Color Tokens (optional) ─────────────────────── */
  [data-theme="dark"] .ui-stack[data-mod="ui_stack"][data-divider="1"] > * + * {
    border-top-color: var(--ui-stack-divider-color-dark, rgba(255,255,255,0.15));
  }

  /* ─── Internal Safety (no margin collapse, allow alignment) ──── */
  .ui-stack[data-mod="ui_stack"] > * {
    margin-block-start: 0;
    margin-block-end: 0;
    width: auto;       /* override .ui-section width:100% so align-items works */
    min-width: 0;      /* prevent flex overflow */
  }

  /* ─── Optional Diagnostic Label (off by default) ──────────────── */
  /* .ui-stack[data-mod="ui_stack"]::before {
       content: "ui.stack active";
       position: absolute;
       top: 0.25rem;
       right: 0.5rem;
       font-size: 10px;
       opacity: 0.4;
       color: #999;
       pointer-events: none;
     } */
}

/* === tools/modules/ui.copy.fromJson/ui.copy.fromJson.css === */
/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — ui.copy (shared styles)
   Version: 1.0.0
   • Typography tokens for readable copy blocks
   • Generic/neutral defaults - sites can override via CSS custom properties
   ──────────────────────────────────────────────────────────────────────────── */

@layer ui.copy {
  :root {
    --ui-copy-max: 720px;
    --ui-copy-margin-inline: auto; /* Allow sites to override centering */
    --ui-copy-gap: 1rem;
    --ui-copy-fg: #222;
    --ui-copy-fs: 1.125rem;
    --ui-copy-lh: 1.65;
  }

  .ui-copy__wrap {
    width: 100%;
    display: block;
  }

  .ui-copy {
    max-width: var(--ui-copy-max, 720px);
    margin: 0 var(--ui-copy-margin-inline, auto); /* Use variable for centering */
  }

  .ui-copy__item {
    margin: 0 0 var(--ui-copy-gap, 1rem) 0;
    color: var(--ui-copy-fg, #222);
    font-size: var(--ui-copy-fs, 1.125rem);
    line-height: var(--ui-copy-lh, 1.65);
  }

  .ui-copy__item em {
    font-style: italic;
  }
}

/* === tools/modules/ui.button/ui.button.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.button
   Version: 3.2.0 | Genesis-Final • Bus-Aware • Wrap-Safe • Tokenized
   Classification: Atom | Interactive Control | Theme-Aware
   Maintainer: DΛREΛKT_ UI TEAM
   Host: Global (RuthBowers / DΛREΛKT Gate / Diagnostics / Dev)
   ──────────────────────────────────────────────────────────────── */

/* The atom lives inside @layer atoms; global layers must exist earlier:
   @layer base, core, atoms, siteOverrides; */

@layer atoms {
  /* ── Root Button Atom ────────────────────────────────────────── */
  [data-atom="ui.button"][data-ownedby] .da-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    padding: var(--ui-btn-pad-y, 10px) var(--ui-btn-pad-x, 18px);
    border-radius: var(--ui-btn-radius, 999px);
    background: var(--ui-btn-bg, #fff);
    color: var(--ui-btn-fg, #000);
    border: 1px solid var(--ui-btn-bd, transparent);

    font-weight: var(--ui-btn-font-w, 600);
    font-size: var(--ui-btn-font-size, 16px);
    line-height: var(--ui-btn-line-h, 1.15);

    box-shadow: var(--ui-btn-shadow, none);
    transition:
      transform 0.06s ease,
      opacity 0.15s ease,
      box-shadow 0.15s ease,
      background-color 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease;
  }

  /* ── Hover / Focus / Disabled States ─────────────────────────── */
  [data-atom="ui.button"] .da-btn:hover:not([disabled]) {
    background: var(--ui-btn-bg-hover, var(--ui-btn-bg));
    color: var(--ui-btn-fg-hover, var(--ui-btn-fg));
    border-color: var(--ui-btn-bd-hover, var(--ui-btn-bd));
    box-shadow: var(--ui-btn-shadow-hover, var(--ui-btn-shadow));
    transform: translateY(-1px);
  }

  [data-atom="ui.button"] .da-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
  }

  [data-atom="ui.button"] .da-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }

  /* ── Sizes ───────────────────────────────────────────────────── */
  [data-atom="ui.button"] .da-btn[data-size="sm"] { font-size: 14px; padding: 8px 14px; }
  [data-atom="ui.button"] .da-btn[data-size="lg"] { font-size: 18px; padding: 14px 24px; }

  /* ── Kinds ───────────────────────────────────────────────────── */
  [data-atom="ui.button"] .da-btn[data-kind="ghost"] {
    background: transparent;
    color: var(--d-fg, #d9d9d9);
    border-color: rgba(255,255,255,0.18);
  }

  [data-atom="ui.button"] .da-btn[data-kind="link"] {
    background: transparent;
    color: var(--d-fg-strong, #f5f5f5);
    border-color: transparent;
    text-decoration: none;
  }
}

/* ── Site Overrides Layer (Wins Cascade) ──────────────────────── */
@layer siteOverrides {
  body[data-site="dareakt"] {
    --ui-btn-pad-y: 10px;
    --ui-btn-pad-x: 18px;
    --ui-btn-radius: 999px;

    --ui-btn-bg: var(--d-accent, #fff);
    --ui-btn-fg: #000;
    --ui-btn-bd: transparent;

    --ui-btn-bg-hover: var(--d-accent, #fff);
    --ui-btn-fg-hover: #000;
    --ui-btn-bd-hover: transparent;

    --ui-btn-shadow: none;
    --ui-btn-shadow-hover: none;
    --ui-btn-font-w: 600;
    --ui-btn-font-size: 16px;
    --ui-btn-line-h: 1.15;
  }

  body[data-site="dareakt"]
  [data-atom="ui.button"] .da-btn[data-kind="ghost"] {
    background: transparent;
    color: var(--d-fg, #d9d9d9);
    border-color: rgba(255,255,255,0.18);
  }

  body[data-site="dareakt"]
  [data-atom="ui.button"] .da-btn[data-kind="ghost"]:hover {
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.06);
    color: #fff;
  }
}

/* === tools/modules/ui.icon/ui.icon.css === */
@layer atoms { [data-atom="ui.icon"] .ui-icon { display: inline-flex; } }
/* === tools/modules/ui.prefers/ui.prefers.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — ui.prefers
   Layer: @layer ui.prefers
   Controls theme (light/dark), motion (normal/reduce), and density.
   Genesis-Final | Bus-Linked | Palette-Aware | Safe Fallbacks
   ─────────────────────────────────────────────────────────────── */
@layer ui.prefers {
  /* ─── Theme Modes ───────────────────────────────────────────── */
  html[data-theme="light"] {
    --ui-bg: #ffffff;
    --ui-fg: #111111;
    --ui-accent: #ff5555;
    color-scheme: light;
  }

  html[data-theme="dark"] {
    --ui-bg: #0b0b0b;
    --ui-fg: #f2f2f2;
    --ui-accent: #ff4444;
    color-scheme: dark;
  }

  /* ─── Motion Preference ─────────────────────────────────────── */
  [data-motion="reduce"] * {
    transition: none !important;
    animation: none !important;
  }

  /* ─── Density Scale ─────────────────────────────────────────── */
  :root {
    --ui-density: 1;
  }

  [data-density="compact"] {
    --ui-density: 0.85;
  }

  [data-density="cozy"] {
    --ui-density: 1.1;
  }

  /* ─── Base Application Layer ────────────────────────────────── */
  body {
    background: var(--ui-bg);
    color: var(--ui-fg);
    transition: background 0.3s ease, color 0.3s ease;
  }

  /* ─── Integration Hooks ─────────────────────────────────────── */
  body[data-theme="dark"][data-motion="reduce"] {
    transition: none !important;
  }

  html[data-theme][data-density][data-motion] body::before {
    content: "";
    display: none; /* used by diagnostics for state detection */
  }
}

/* === tools/modules/ui.accessibility/ui.accessibility.css === */
/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — ui.accessibility
   Classification : System | Accessibility | Focus & Live Announcer
   Version        : 3.3.0
   File           : /tools/modules/ui.accessibility/ui.accessibility.css
   Maintainer     : DΛREΛKT_ CORE UI TEAM
   ────────────────────────────────────────────────────────────────────────────── */

@layer ui.accessibility {

  /* ─── Skiplink ─────────────────────────────────────────────────────────────── */
  .skiplink {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ui-skiplink-bg, #000);
    color: var(--ui-skiplink-fg, #fff);
    padding: var(--ui-skiplink-pad, 0.5rem 1rem);
    font-size: var(--ui-skiplink-size, 0.95rem);
    border-radius: var(--ui-skiplink-radius, 4px);
    z-index: 10000;
    text-decoration: none;
    transition: top 0.3s ease, background 0.2s ease, color 0.2s ease;
  }

  .skiplink:focus,
  .skiplink:active {
    top: 0;
    background: var(--ui-skiplink-bg-focus, #111);
    color: var(--ui-skiplink-fg-focus, #fff);
  }

  /* ─── Focus Visibility Layer ──────────────────────────────────────────────── */
  .focus-visible *:focus {
    outline: 2px solid var(--ui-accent, #ff4444);
    outline-offset: 2px;
  }

  /* ─── Screen Reader Only Utility ──────────────────────────────────────────── */
  .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ─── Accessibility Debug (Optional) ─────────────────────────────────────────
     Uncomment for diagnostics of accessibility regions or skiplinks
  [data-debug-a11y="true"] .skiplink {
    top: 0 !important;
    opacity: 0.7;
  }
  ----------------------------------------------------------------------------- */
}

/* === sites/dareakt/css/site.css === */
/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ — Dark Terminal Theme
   Retro DOS aesthetic, glowing lambda, elegant monospace.
   ──────────────────────────────────────────────────────────────── */

/* ── UNLAYERED OVERRIDES — beat module layers (canvas, navbar) ── */
html[data-site="dareakt"] {
  background: #0a0a0a;
}

body[data-site="dareakt"] {
  --site-bg: #0a0a0a;
  --site-bg-light: #0a0a0a;
  --site-bg-dark: #0a0a0a;
  --site-fg: #e8e8e8;
  --site-fg-bright: #ffffff;
  --site-accent: #00ffcc;
  --site-accent-dim: rgba(0, 255, 204, 0.15);
  --site-border: rgba(255, 255, 255, 0.06);
  --site-pad: clamp(1.5rem, 5vw, 4rem);
  --site-max: 960px;
  --site-font: "IBM Plex Mono", "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace;
  --site-glow: 0 0 8px rgba(0, 255, 204, 0.6), 0 0 24px rgba(0, 255, 204, 0.2);
  --background-color: #0a0a0a;

  background: #0a0a0a;
  color: var(--site-fg);
  font-family: var(--site-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

html[data-site="dareakt"],
body[data-site="dareakt"] {
  height: 100%;
  margin: 0;
}

/* Force canvas dark regardless of data-theme attribute */
body[data-site="dareakt"] .ui-canvas,
body[data-site="dareakt"] .ui-canvas[data-theme="light"],
body[data-site="dareakt"] .ui-canvas[data-theme="dark"] {
  background: #0a0a0a;
}

body[data-site="dareakt"] .ui-layout {
  background: #0a0a0a;
}

/* ── Terminal Navbar — unlayered to beat module layers ──────── */
body[data-site="dareakt"] .ui-navbar__wrap {
  background: rgba(10, 10, 10, 0.85);
  border-bottom: 1px solid rgba(0, 255, 204, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 100;
}

body[data-site="dareakt"] .ui-navbar {
  background: transparent;
  max-width: var(--site-max, 960px);
  margin: 0 auto;
}

body[data-site="dareakt"] .ui-navbar__inner {
  padding: 0.6rem var(--site-pad);
}

body[data-site="dareakt"] .ui-navbar__logo {
  color: #00ffcc;
  font-family: var(--site-font);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

body[data-site="dareakt"] .ui-navbar__menu {
  gap: 0.15rem;
}

body[data-site="dareakt"] .ui-navbar__link {
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--site-font);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.35rem 0.65rem;
  border: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

body[data-site="dareakt"] .ui-navbar__link:hover {
  color: #00ffcc;
  border-color: rgba(0, 255, 204, 0.25);
}

body[data-site="dareakt"] .ui-navbar__link[aria-current="page"],
body[data-site="dareakt"] .ui-navbar__link.active {
  color: #00ffcc;
  border-color: rgba(0, 255, 204, 0.5);
}

body[data-site="dareakt"] .ui-navbar__burger {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Text colors — unlayered to beat module layers ───────────── */
body[data-site="dareakt"] h1,
body[data-site="dareakt"] h2,
body[data-site="dareakt"] h3 {
  color: #ffffff;
}

body[data-site="dareakt"] h2 {
  color: #00ffcc;
}

body[data-site="dareakt"] p {
  color: #e8e8e8;
}

body[data-site="dareakt"] .module-wrapper--dareakt-description p {
  color: #c0c0c0;
}

body[data-site="dareakt"] .module-wrapper--dareakt-separator p {
  color: rgba(255, 255, 255, 0.5);
}

body[data-site="dareakt"] .module-wrapper--dareakt-system-info p {
  color: rgba(255, 255, 255, 0.6);
}

body[data-site="dareakt"] .ui-section-footer,
body[data-site="dareakt"] .ui-section-footer__credits {
  color: rgba(255, 255, 255, 0.6);
}

/* ── List items (copy.fromJson arrays) — terminal readout ──── */
body[data-site="dareakt"] .module-wrapper--philosophy-laws-list .ui-copy__item,
body[data-site="dareakt"] .module-wrapper--philosophy-principles-list .ui-copy__item,
body[data-site="dareakt"] .module-wrapper--architecture-boot-list .ui-copy__item,
body[data-site="dareakt"] .module-wrapper--architecture-modules-list .ui-copy__item,
body[data-site="dareakt"] .module-wrapper--architecture-bus-list .ui-copy__item,
body[data-site="dareakt"] .module-wrapper--security-levels-list .ui-copy__item,
body[data-site="dareakt"] .module-wrapper--security-capabilities-list .ui-copy__item,
body[data-site="dareakt"] .module-wrapper--security-evidence-list .ui-copy__item,
body[data-site="dareakt"] .module-wrapper--security-egress-list .ui-copy__item {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  line-height: 1.9;
  padding-left: 1.5em;
  position: relative;
  margin-block: 0.25em;
}

body[data-site="dareakt"] .module-wrapper--philosophy-laws-list .ui-copy__item::before,
body[data-site="dareakt"] .module-wrapper--philosophy-principles-list .ui-copy__item::before,
body[data-site="dareakt"] .module-wrapper--architecture-boot-list .ui-copy__item::before,
body[data-site="dareakt"] .module-wrapper--architecture-modules-list .ui-copy__item::before,
body[data-site="dareakt"] .module-wrapper--architecture-bus-list .ui-copy__item::before,
body[data-site="dareakt"] .module-wrapper--security-levels-list .ui-copy__item::before,
body[data-site="dareakt"] .module-wrapper--security-capabilities-list .ui-copy__item::before,
body[data-site="dareakt"] .module-wrapper--security-evidence-list .ui-copy__item::before,
body[data-site="dareakt"] .module-wrapper--security-egress-list .ui-copy__item::before {
  content: ">";
  position: absolute;
  left: 0;
  color: rgba(0, 255, 204, 0.5);
}

/* ── Closing statements — accent, italic ──────────────────── */
body[data-site="dareakt"] .module-wrapper--philosophy-closing-text .ui-copy__item,
body[data-site="dareakt"] .module-wrapper--security-closing-text .ui-copy__item {
  color: rgba(0, 255, 204, 0.75);
  font-style: italic;
}

/* ── Stats line ───────────────────────────────────────────── */
body[data-site="dareakt"] .module-wrapper--architecture-stats-text .ui-copy__item {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: center;
}

/* Λ Lambda glow — unlayered to beat core.css global .lambda */
body[data-site="dareakt"] .lambda {
  color: #00ffcc;
  text-shadow:
    0 0 8px rgba(0, 255, 204, 0.6),
    0 0 24px rgba(0, 255, 204, 0.2);
  animation:
    lambdaBoot 0.8s ease-out forwards,
    dareakt-lambda-pulse 3s ease-in-out infinite 0.8s;
}

@keyframes dareakt-lambda-pulse {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(0, 255, 204, 0.6),
      0 0 24px rgba(0, 255, 204, 0.2);
  }
  50% {
    text-shadow:
      0 0 14px rgba(0, 255, 204, 0.9),
      0 0 40px rgba(0, 255, 204, 0.35);
  }
}

/* Blinking cursor _ — unlayered to beat core.css */
body[data-site="dareakt"] .cursor {
  color: #00ffcc;
  animation: dareakt-cursor-blink 1s step-end infinite;
}

@keyframes dareakt-cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@layer site {

  /* ── Typography ──────────────────────────────────────────────── */
  body[data-site="dareakt"] h1,
  body[data-site="dareakt"] h2,
  body[data-site="dareakt"] h3 {
    color: var(--site-fg-bright);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-block: 1em 0.5em;
  }

  body[data-site="dareakt"] h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    letter-spacing: 0.15em;
    margin-block-end: 0.3em;
  }

  body[data-site="dareakt"] h2 {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: var(--site-accent);
    letter-spacing: 0.12em;
  }

  body[data-site="dareakt"] p {
    max-width: 60ch;
    margin-block: 0.6em;
    color: var(--site-fg);
  }

  body[data-site="dareakt"] a {
    color: var(--site-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
  }

  body[data-site="dareakt"] a:hover {
    border-bottom-color: var(--site-accent);
  }

  /* Lambda + cursor styles are unlayered (above) to beat core.css */

  /* ── Hero section — full-viewport centered ───────────────────── */
  .module-wrapper--dareakt-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--site-pad);
    box-sizing: border-box;
    text-align: center;
    position: relative;
  }

  /* Scanline overlay (subtle CRT effect) */
  .module-wrapper--dareakt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 1;
  }

  .module-wrapper--dareakt-hero .ui-section-body {
    position: relative;
    z-index: 2;
  }

  /* Hero inner content centering */
  .ui-section-body[data-id="dareakt-hero"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Hero subtitle line */
  .module-wrapper--dareakt-subtitle p {
    color: var(--site-accent);
    letter-spacing: 0.12em;
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    text-transform: uppercase;
    margin-block: 0;
  }

  /* Description block */
  .module-wrapper--dareakt-description p {
    color: #c0c0c0;
    max-width: 48ch;
    margin-inline: auto;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.8;
  }

  /* Separator line */
  .module-wrapper--dareakt-separator {
    display: flex;
    justify-content: center;
    padding-block: 1.5rem;
  }

  .module-wrapper--dareakt-separator p {
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5em;
    font-size: 0.7rem;
  }

  /* System info block */
  .module-wrapper--dareakt-system-info p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-align: center;
    margin-inline: auto;
  }

  /* ── Page header sections (not home hero) ────────────────────── */
  .module-wrapper--philosophy-header,
  .module-wrapper--architecture-header,
  .module-wrapper--security-header {
    padding-top: 5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 255, 204, 0.08);
  }

  /* Page h1 — smaller than home hero, left-aligned */
  .module-wrapper--philosophy-heading h1,
  .module-wrapper--architecture-heading h1,
  .module-wrapper--security-heading h1 {
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    letter-spacing: 0.15em;
    margin-block-end: 0.2em;
  }

  /* Page content sections — constrained width, left-aligned */
  .module-wrapper--philosophy-manifesto,
  .module-wrapper--philosophy-laws,
  .module-wrapper--philosophy-principles,
  .module-wrapper--philosophy-closing,
  .module-wrapper--architecture-intro,
  .module-wrapper--architecture-boot,
  .module-wrapper--architecture-modules,
  .module-wrapper--architecture-bus,
  .module-wrapper--architecture-stats,
  .module-wrapper--security-intro,
  .module-wrapper--security-levels,
  .module-wrapper--security-capabilities,
  .module-wrapper--security-evidence,
  .module-wrapper--security-egress,
  .module-wrapper--security-closing {
    max-width: var(--site-max, 960px);
    margin-inline: auto;
    padding-inline: var(--site-pad);
  }

  /* Section dividers — subtle top border */
  .module-wrapper--philosophy-laws,
  .module-wrapper--philosophy-principles,
  .module-wrapper--architecture-boot,
  .module-wrapper--architecture-modules,
  .module-wrapper--architecture-bus,
  .module-wrapper--security-levels,
  .module-wrapper--security-capabilities,
  .module-wrapper--security-evidence,
  .module-wrapper--security-egress {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 0.5rem;
    padding-top: 1.5rem;
  }

  /* ── Footer ──────────────────────────────────────────────────── */
  body[data-site="dareakt"] .ui-section-footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-align: center;
    padding-block: 2rem;
  }

  body[data-site="dareakt"] .ui-section-footer__credits {
    color: rgba(255, 255, 255, 0.6);
  }

  /* ── Layout overrides ────────────────────────────────────────── */
  body[data-site="dareakt"] .ui-canvas {
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* ── Scrollbar (match dark theme) ────────────────────────────── */
  body[data-site="dareakt"]::-webkit-scrollbar {
    width: 6px;
  }

  body[data-site="dareakt"]::-webkit-scrollbar-track {
    background: var(--site-bg);
  }

  body[data-site="dareakt"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }

  /* ── Selection ───────────────────────────────────────────────── */
  body[data-site="dareakt"] ::selection {
    background: var(--site-accent);
    color: var(--site-bg);
  }

  /* ── Responsive ──────────────────────────────────────────────── */
  @media (max-width: 600px) {
    body[data-site="dareakt"] {
      font-size: 14px;
    }
  }

}