Active
Theory

:root {
  --color-primary: #00FFFF;          /* cian terminal: un solo pixel vivo por vista */
  --color-secondary: #9CA5FF;        /* periwinkle: superficie de accion */
  --color-steel: #7F95A6;            /* instrucciones del HUD */
  --color-glow: #9BB796;             /* verde salvia: luz del HUD */
  --color-background: #000000;       /* declarado; la escena lo templa */
  --color-haze: #10141C;             /* neblina medida */
  --color-haze-high: #141B26;
  --color-surface-raised: #191E22;   /* nav pill */
  --color-surface-control: rgba(255, 255, 255, 0.1);
  --color-surface-action: rgba(156, 165, 255, 0.333);
  --color-text-primary: #F4F4F4;
  --color-white: #FFFFFF;
  --color-text-secondary: #7F95A6;
  --color-text-on-action: #000000;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.24);
  --color-particle-pink: #A98C9F;    /* decorativo, nunca texto */
  --color-particle-olive: #62681F;   /* decorativo, nunca texto */
  --color-success: #9BB796;
  --color-info: #00FFFF;
  --color-error: #FF6A6A;            /* derivado */
  --color-warning: #FFC865;          /* derivado */

  --font-display: "Chivo Mono", "NB Architekt", monospace;
  --font-body: "Chivo Mono", "NB Architekt", monospace;
  --font-mono: "Chivo Mono", ui-monospace, monospace;

  --radius-control: 5px;   /* botones: real */
  --radius-cursor: 6px;    /* cursor del chat: real */
  --radius-pill: 500px;    /* nav pill y acciones: real */
  /* prohibido: radios intermedios 12/16/24px */

  --shadow-none: none;     /* el DOM real no tiene box-shadow */
  --glow-nav: 0 24px 48px -12px rgba(155, 183, 150, 0.25);
  --glow-cyan: 0 0 12px rgba(0, 255, 255, 0.35);

  --space-base: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-edge: 40px;      /* anclaje del HUD a los bordes */

  --ease-inertia: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-blink: 500ms;
  --duration-scene: 1200ms;
}

@theme {
  --color-primary: #00FFFF;
  --color-secondary: #9CA5FF;
  --color-steel: #7F95A6;
  --color-glow: #9BB796;
  --color-background: #000000;
  --color-haze: #10141C;
  --color-haze-high: #141B26;
  --color-surface-raised: #191E22;
  --color-text-primary: #F4F4F4;
  --color-white: #FFFFFF;
  --color-text-secondary: #7F95A6;
  --color-text-on-action: #000000;
  --color-particle-pink: #A98C9F;
  --color-particle-olive: #62681F;
  --color-success: #9BB796;
  --color-info: #00FFFF;
  --color-error: #FF6A6A;
  --color-warning: #FFC865;

  --font-display: "Chivo Mono", "NB Architekt", monospace;
  --font-body: "Chivo Mono", "NB Architekt", monospace;
  --font-mono: "Chivo Mono", ui-monospace, monospace;

  --radius-control: 5px;
  --radius-cursor: 6px;
  --radius-pill: 500px;

  --shadow-glow-nav: 0 24px 48px -12px rgba(155, 183, 150, 0.25);
  --shadow-glow-cyan: 0 0 12px rgba(0, 255, 255, 0.35);

  --spacing-base: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-edge: 40px;
}

{
  "colors": {
    "primary": "#00FFFF",
    "secondary": "#9CA5FF",
    "steel": "#7F95A6",
    "glow-green": "#9BB796",
    "background": "#000000",
    "haze": "#10141C",
    "haze-high": "#141B26",
    "surface-raised": "#191E22",
    "surface-control": "rgba(255, 255, 255, 0.1)",
    "surface-action": "rgba(156, 165, 255, 0.333)",
    "text-primary": "#F4F4F4",
    "white": "#FFFFFF",
    "text-secondary": "#7F95A6",
    "text-on-action": "#000000",
    "border": "rgba(255, 255, 255, 0.12)",
    "border-strong": "rgba(255, 255, 255, 0.24)",
    "particle-pink": "#A98C9F",
    "particle-olive": "#62681F",
    "success": "#9BB796",
    "info": "#00FFFF",
    "error": "#FF6A6A",
    "warning": "#FFC865"
  },
  "typography": {
    "display-xl": {
      "fontFamily": "NB Architekt",
      "substitute": "Chivo Mono",
      "fontSize": "canvas (WebGL)",
      "fontWeight": 700,
      "letterSpacing": "0.08em",
      "textTransform": "uppercase"
    },
    "hud": {
      "fontFamily": "NB Architekt",
      "substitute": "Chivo Mono",
      "fontSize": "14px",
      "fontWeight": 700,
      "letterSpacing": "0.08em",
      "textTransform": "uppercase"
    },
    "body": {
      "fontFamily": "NB Architekt",
      "substitute": "Chivo Mono",
      "fontSize": "14px",
      "fontWeight": 400,
      "lineHeight": "21px"
    },
    "body-sm": {
      "fontFamily": "NB Architekt",
      "substitute": "Chivo Mono",
      "fontSize": "12px",
      "fontWeight": 400,
      "lineHeight": "18px"
    },
    "light": {
      "fontFamily": "NB Architekt",
      "substitute": "Chivo Mono",
      "fontSize": "14px",
      "fontWeight": 300,
      "letterSpacing": "0.04em"
    }
  },
  "rounded": {
    "control": "5px",
    "cursor": "6px",
    "pill": "500px"
  },
  "shadow": {
    "none": "none",
    "glow-nav": "0 24px 48px -12px rgba(155, 183, 150, 0.25)",
    "glow-cyan": "0 0 12px rgba(0, 255, 255, 0.35)"
  },
  "spacing": {
    "base": "4px",
    "xs": "8px",
    "sm": "12px",
    "md": "16px",
    "lg": "24px",
    "edge": "40px"
  },
  "motion": {
    "ease-inertia": "cubic-bezier(0.22, 1, 0.36, 1)",
    "duration-fast": "200ms",
    "duration-blink": "500ms (steps, sin fade)",
    "duration-scene": "1200ms",
    "scroll": "progreso normalizado 0-1, sin duración"
  }
}

---
version: "1.0"
name: "Active Theory"
description: "Sistema visual de Active Theory: estudio creativo (Los Angeles / Ámsterdam) cuyo sitio es una sola escena WebGL continua sobre negro azulado. El DOM entero pesa 4KB: los titulares, el logo cromado y las escenas viven en el canvas, y el HTML solo aloja un HUD mínimo en NB Architekt (una mono técnica de 12-14px, pesos 300/400/700). El color es oscuridad con instrumentos: cian #00FFFF para el cursor del chat, periwinkle #9CA5FF para la única superficie de acción, azul acero #7F95A6 para las órdenes del HUD, y nubes de partículas rosa y oliva que son la única 'ilustración'. Píldoras de radio 500px, botones translúcidos al 10% de blanco y navegación por chat conversacional. Dark mode cinemático, denso en motion y casi vacío de DOM."
colors:
  primary: "#00FFFF"
  primary-soft: "#7F95A6"
  secondary: "#9CA5FF"
  canvas: "#000000"
  scene-haze: "#10141C"
  scene-haze-high: "#141B26"
  ink: "#F4F4F4"
  white: "#FFFFFF"
  steel: "#7F95A6"
  glow-green: "#9BB796"
  particle-pink: "#A98C9F"
  particle-olive: "#62681F"
  background: "#000000"
  surface: "#10141C"
  surface-raised: "#191E22"
  surface-control: "#FFFFFF1A"
  surface-action: "#9CA5FF55"
  text-primary: "#F4F4F4"
  text-secondary: "#7F95A6"
  text-on-action: "#000000"
  border: "#FFFFFF1F"
  border-strong: "#FFFFFF3D"
  success: "#9BB796"
  info: "#00FFFF"
  error: "#FF6A6A"
  warning: "#FFC865"
typography:
  display-xl:
    fontFamily: "NB Architekt"
    fontSize: "canvas (WebGL)"
    fontWeight: 700
    lineHeight: "1.0"
    letterSpacing: "0.08em"
  hud-title:
    fontFamily: "NB Architekt"
    fontSize: "14px"
    fontWeight: 700
    lineHeight: "normal"
    letterSpacing: "0.08em"
  body:
    fontFamily: "NB Architekt"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: "normal"
  body-sm:
    fontFamily: "NB Architekt"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: "normal"
  hud-light:
    fontFamily: "NB Architekt"
    fontSize: "14px"
    fontWeight: 300
    lineHeight: "1.5"
    letterSpacing: "0.04em"
rounded:
  control: "5px"
  cursor: "6px"
  pill: "500px"
spacing:
  base: "4px"
  xs: "8px"
  sm: "12px"
  md: "16px"
  lg: "24px"
  xl: "40px"
  edge: "40px"
components:
  nav-pill:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.text-primary}"
    typography: "{typography.hud-title}"
    rounded: "{rounded.pill}"
    padding: "14px 28px"
    border: "1px solid rgba(255, 255, 255, 0.12)"
  button-control:
    backgroundColor: "rgba(255, 255, 255, 0.1)"
    textColor: "{colors.white}"
    typography: "{typography.hud-title}"
    rounded: "{rounded.control}"
    padding: "8px 12px"
  button-action:
    backgroundColor: "rgba(156, 165, 255, 0.333)"
    textColor: "{colors.text-on-action}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "10px 18px"
  chat-cursor:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.cursor}"
    animation: "parpadeo por pasos, sin fade"
  chat-reply:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    typography: "{typography.body}"
    prefix: "->"
---

# DESIGN.md - Active Theory

> Sistema de diseño extraído de `https://activetheory.net` (home, julio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Colores, familias, tamaños y radios medidos sobre el sitio en vivo con Puppeteer: `background` declarado del body, `@font-face` reales, estilos computados del HUD y muestreo de píxeles de la captura 1600x900 (el sitio renderiza casi todo en un canvas WebGL de 2400x1350, así que los colores de escena se muestrean de la captura, no del CSS). Lo que el sitio no expone (estados, escalas, semánticos) va marcado como *(derivado para completar el sistema)*.

---

## 1. Tema Visual y Atmósfera

Active Theory es el estudio que otros estudios miran cuando quieren saber qué se puede hacer con WebGL, y su sitio es la demostración: **el DOM entero pesa 4.141 bytes**. No hay secciones HTML, no hay imágenes, no hay grid de proyectos. Hay un solo `<canvas>` de 2400x1350 que lo dibuja todo (el logo cromado, las nubes de partículas, los titulares, las escenas de los proyectos) y, flotando encima, un HUD mínimo: una píldora de navegación con `WORK` y `CONTACT`, un reproductor de música con flechas `<<` `>>`, un toggle de audio y un chat.

El color de ese mundo es **negro con atmósfera**. El body declara `#000000` (y el `meta theme-color` lo confirma), pero la escena nunca es negro plano: la niebla volumétrica del render la levanta a un azul carbón que en la captura mide entre `#10141C` y `#141B26`. Sobre esa oscuridad viven cuatro instrumentos de color, todos fríos y todos medidos: el **cian `#00FFFF`** del cursor parpadeante del chat (el único color declarado en el CSS del sitio a plena saturación), el **periwinkle `#9CA5FF`** de la única superficie de acción (el botón de aceptar cookies, servido a `rgba(156,165,255,0.333)`), el **azul acero `#7F95A6`** del texto de instrucción `SCROLL DOWN`, y el **verde salvia `#9BB796`** del reflejo que la píldora de navegación proyecta hacia abajo, como si el HUD emitiera luz propia.

La única "ilustración" del sitio son las partículas: decenas de miles de puntos en rosa empolvado (`#A98C9F`) y oliva (`#62681F`) que se arremolinan alrededor del logo cromado, reaccionan al cursor y se recomponen al hacer scroll. No hay fotografías de proyectos en la home: hay materia.

La tipografía es una sola familia, **NB Architekt** (Neubau Berlin), una grotesca técnica de dibujo modular con alma de plano de arquitecto, servida self-hosted en pesos 300, 400 y 700 con fallback declarado a `monospace`. Y el sistema la usa al revés que todo el mundo: **no hay tamaños display en el DOM**. El texto HTML más grande del sitio mide 14px. Los titulares gigantes existen, pero son geometría dentro del canvas. El HTML solo habla en susurros de 12 y 14px, en mayúsculas, con el laconismo de una terminal.

El resultado es un sitio que se siente como la cabina de una nave: oscuridad exterior, instrumentos precisos, y una inteligencia (el chat pregunta "What are you looking for?" y responde con flechas `-> games -> multiplayer -> XR / VR / AI -> installations -> websites`) que convierte la navegación en conversación.

**Palabras clave de personalidad**: cinemático, técnico, HUD, oscuro, atmosférico, translúcido, conversacional, WebGL-first

**Densidad del layout**: mínima en DOM (un canvas y cuatro controles anclados a las esquinas); densísima en render (partículas, niebla, reflejos)

**Modo preferido**: oscuro absoluto (`#000000` declarado; la escena lo templa a azul carbón)

**Nivel de ornamentación**: alto pero no decorativo: toda la ornamentación es simulación física (partículas, metal, niebla), nunca iconografía plana

**Audiencia visual objetivo**: directores creativos, marcas de entretenimiento y tecnología que quieren experiencias imposibles en el navegador

---

## 2. Paleta de Colores y Roles Semánticos

Un negro declarado, una neblina medida, y cuatro acentos fríos de baja superficie. El sitio no tokeniza color en CSS (una sola variable en el `:root`, `--baropacity`, y es de opacidad, no de color): el color vive en el render y en tres recetas de componente.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre él |
|--------|-------------|-----|-----|----------------|
| Cian terminal | `--color-primary` | `#00FFFF` | El cursor parpadeante del chat (real: `rgb(0,255,255)`, radio 6px). El color de "el sistema está vivo" | `#000000` |
| Periwinkle | `--color-secondary` | `#9CA5FF` | La única superficie de acción del DOM: botón accept a `rgba(156,165,255,0.333)`, radio 500px, texto negro | `#000000` |
| Azul acero | `--color-steel` | `#7F95A6` | Texto de instrucción del HUD (`SCROLL DOWN`, medido en captura) | superficie, no lleva texto |
| Verde salvia | `--color-glow` | `#9BB796` | Reflejo/glow que la píldora de nav proyecta sobre la escena (medido en captura) | decorativo |

### Colores de escena (muestreados de la captura 1600x900)

El render no es CSS: estas paradas están muestreadas píxel a píxel sobre la captura real.

| Nombre | Hex | Dónde se midió |
|--------|-----|----------------|
| Negro base | `#000000` | `background` declarado del body y `meta theme-color` |
| Neblina | `#10141C` | Fondo medio de la escena (cuantizado dominante `#101020`, 43.9% del frame) |
| Neblina alta | `#141B26` | Zona superior, donde la niebla recibe más luz |
| Rosa partícula | `#A98C9F` | Nube de partículas alrededor del logo |
| Oliva partícula | `#62681F` | Segunda población de partículas, abajo a la derecha |
| Cromo | `#FFFFFF` a `#181A28` | El logo metálico: blanco especular a sombra azulada en centímetros |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Canvas | `--color-background` | `#000000` | Fondo declarado; el render lo templa |
| Superficie | `--color-surface` | `#10141C` | Paneles sobre la escena *(derivado de la neblina medida)* |
| Superficie elevada | `--color-surface-raised` | `#191E22` | La píldora de navegación (medido en captura) |
| Control | `--color-surface-control` | `rgba(255,255,255,0.1)` | Botones `<<` `>>` del reproductor (real, radio 5px) |
| Acción | `--color-surface-action` | `rgba(156,165,255,0.333)` | Botón de acción (real: accept del consent) |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Tinta | `--color-text-primary` | `#F4F4F4` | Texto del chat (real: `rgb(244,244,244)`); casi blanco, nunca `#FFF` puro en párrafos |
| Blanco | `--color-white` | `#FFFFFF` | Labels del HUD y botones (real) |
| Acero | `--color-text-secondary` | `#7F95A6` | Instrucciones y metadata (`SCROLL DOWN`) |
| Sobre acción | `--color-text-on-action` | `#000000` | Texto negro sobre periwinkle (real: el botón accept) |

### Contraste verificado (sobre `#000000`)

| Combinación | Ratio | Nivel |
|-------------|-------|-------|
| `#F4F4F4` sobre `#000000` | 19.1:1 | AAA |
| `#FFFFFF` sobre `#000000` | 21:1 | AAA |
| `#00FFFF` sobre `#000000` | 16.7:1 | AAA |
| `#9CA5FF` sobre `#000000` | 9.2:1 | AAA |
| `#7F95A6` sobre `#000000` | 6.7:1 | AA (AAA en texto grande) |
| `#9BB796` sobre `#000000` | 9.6:1 | AAA |
| `#000000` sobre `#9CA5FF` | 9.2:1 | AAA |
| `#F4F4F4` sobre `#191E22` | 15.6:1 | AAA |
| `#62681F` sobre `#000000` | 3.1:1 | solo decorativo (partículas), nunca texto |

> **La ventaja del negro**: con canvas `#000000`, hasta los acentos desaturados pasan AAA. El riesgo está en el otro extremo: cualquier texto sobre la neblina `#141B26` o sobre el glow pierde ratio rápido. El sitio lo resuelve anclando todo el texto del HUD a las esquinas, donde la escena es más oscura.

### Colores de estado

El sitio no tiene estados de sistema visibles (no hay formularios clásicos ni toasts). Todos *(derivados para completar el sistema)*, eligiendo dentro de la temperatura de la paleta:

| Estado | Variable CSS | Hex | Base |
|--------|-------------|-----|------|
| Éxito | `--color-success` | `#9BB796` | El verde salvia del glow real |
| Info | `--color-info` | `#00FFFF` | El cian del cursor |
| Error | `--color-error` | `#FF6A6A` | *(derivado)*: rojo desaturado a la temperatura del rosa partícula |
| Aviso | `--color-warning` | `#FFC865` | *(derivado)*: ámbar frío |

---

## 3. Reglas de Tipografía

```css
/* Familia única: NB Architekt (Neubau Berlin, self-hosted).
   font-family real del HUD: nbarchitekt, monospace
   pesos @font-face reales: 300, 400, 700
   -> sustituto Google: Chivo Mono */
--font-display: 'Chivo Mono', 'NB Architekt', monospace;
--font-body:    'Chivo Mono', 'NB Architekt', monospace;
--font-mono:    'Chivo Mono', ui-monospace, SFMono-Regular, monospace;
```

**Google Fonts (sustituto):**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@300;400;700&display=swap" rel="stylesheet">
```

### Nota sobre sustitución tipográfica

**Original: NB Architekt -> HTML: Chivo Mono (Google substitute).**

NB Architekt (Stefan Gandl, Neubau Berlin) es una grotesca técnica de construcción modular, inspirada en la rotulación de planos de arquitectura: formas cuadradas, esquinas duras, ritmo casi monoespaciado. El propio sitio declara `monospace` como fallback, que es la pista de cómo la piensa el estudio: como tipografía de instrumento, no de editorial. Es de licencia comercial y no está en Google Fonts.

Candidatas comparadas antes de decidir:

| Candidata | Por qué encaja | Por qué se descarta |
|---|---|---|
| **Chivo Mono** | Monoespaciada de esqueleto grotesco con formas cuadradas y esquinas firmes, exactamente el terreno técnico de NB Architekt. Cubre los tres pesos reales (300, 400, 700), algo rarísimo en monos de Google, y a 12-14px en mayúsculas reproduce el tono de terminal del HUD sin volverse retro. | **Elegida.** |
| Space Mono | El sabor techno-retro es cercano y muy reconocible. | Solo tiene 400 y 700: pierde el peso 300 real del sistema, y sus terminaciones con gracia (la `i`, la `l`) la hacen más excéntrica que arquitectónica. |
| Share Tech Mono | La más HUD de todas, casi militar. | Un solo peso (400). Un sistema con tres pesos reales no puede vivir con uno. |
| IBM Plex Mono | Cobertura de pesos completa y excelente factura. | Demasiado humanista: sus curvas abiertas suavizan justo la dureza modular que define a NB Architekt. |

> El fallback declarado (`'Chivo Mono', 'NB Architekt', monospace`) deja documentada la original: si algún día la licencia está disponible, basta reordenar.

### Escala tipográfica

> Tamaños reales medidos en el DOM: **14px** (chat, reproductor, consent, line-height 21px = 1.5) y **12px** (botones del consent, line-height 18px = 1.5). No hay más. Los tamaños display existen solo dentro del canvas WebGL, así que la escala display de esta guía es *(derivada para completar el sistema)*, respetando la proporción del render.

| Token | px | Line height | Weight | Tracking | Uso |
|-------|----|-----------  |--------|----------|-----|
| `--f-display-xl` | 96-160px *(derivado)* | 1.0 | 700 | 0.08em | Titulares de escena (en el sitio real: geometría GL) |
| `--f-display-md` | 40-64px *(derivado)* | 1.05 | 700 | 0.06em | Titulares de sección |
| `--f-title` | 20px *(derivado)* | 1.3 | 700 | 0.06em | Títulos de panel |
| `--f-hud` | 14px | normal | 700 | 0.08em | Labels del HUD en mayúsculas (`WORK`, `CONTACT`, `<<`, `>>`) |
| `--f-body` | 14px | 1.5 (21px) | 400 | normal | Chat y párrafos (real) |
| `--f-body-sm` | 12px | 1.5 (18px) | 400 | normal | Botones de texto y legales (real) |
| `--f-light` | 14px | 1.5 | 300 | 0.04em | Metadata suave (peso 300 real del @font-face) |

### Pesos tipográficos

```css
--font-light:   300;  /* @font-face real: metadata y aire */
--font-regular: 400;  /* @font-face real: EL peso del chat y el body */
--font-bold:    700;  /* @font-face real: HUD, flechas del reproductor, labels */
```

> Tres pesos y los tres se usan. El 700 no es énfasis de párrafo: es la voz de los controles (las flechas `<<` `>>` van en 700). El texto conversacional del chat va siempre en 400. No existe 500 ni 600: el sistema salta de la voz suave a la voz de instrumento sin término medio.

### Reglas de composición

- **Mayúsculas para el HUD, caja normal para la conversación.** `WORK`, `CONTACT`, `SCROLL DOWN` van en caps con tracking abierto; el chat ("What are you looking for?") va en sentence case.
- **El DOM susurra.** Nada en HTML supera los 14px. Si un texto necesita ser grande, es que pertenece a la escena, no al HUD.
- **Tracking abierto solo en caps.** 0.06-0.08em en labels; el body a 14px va con tracking normal (medido: `letter-spacing: normal`).

---

## 4. Estilos de Componentes

### Píldora de navegación (componente firma)

La única navegación persistente: `WORK ——— CONTACT` arriba a la derecha, con una línea que conecta las dos palabras y un glow verde salvia proyectado debajo.

```
Background: #191E22 (medido; superficie glassy sobre la escena)
Border: 1px solid rgba(255,255,255,0.12)
Border-radius: 500px   (real: el CSS del sitio usa 500px, no 9999px)
Padding: 14px 28px
Font: NB Architekt 700, 14px, caps, tracking 0.08em
Color: #FFFFFF
Detalle: línea horizontal de 1px entre los dos links (la "regla" del plano)
Glow: reflejo verde #9BB796 difuso proyectado hacia abajo (parte del render)

Hover (derivado):
  Border-color: rgba(255,255,255,0.24)
  El glow sube de intensidad
```

### Botones de control (reproductor)

```
Background: rgba(255,255,255,0.1)   (real)
Border: none
Border-radius: 5px                   (real)
Padding: 8px 12px
Font: NB Architekt 700, 14px
Color: #FFFFFF
Contenido: << y >> literales, no iconos SVG

Hover (derivado):
  Background: rgba(255,255,255,0.16)
```

### Botón de acción (periwinkle)

El único botón con color del DOM: el accept del consent.

```
Background: rgba(156,165,255,0.333)  (real)
Color: #000000                        (real: texto negro sobre acción)
Border-radius: 500px                  (real)
Padding: 10px 18px
Font: 12-13px

Variante neutra (reject, real):
  Background: rgba(0,0,0,0.333)
  Color: #000000 sobre el panel claro del consent

Hover (derivado):
  Background: rgba(156,165,255,0.5)
```

### Cursor del chat (micro-componente firma)

```
Background: #00FFFF   (real: rgb(0,255,255))
Border-radius: 6px    (real)
Tamaño: un carácter de la mono (~8x16px)
Animación: parpadeo por PASOS (visible/invisible), sin fade.
El cursor es la firma del sistema: el único píxel saturado del HUD.
```

### Chat de navegación

```
Pregunta: "What are you looking for?" - NB Architekt 400, 14px, #F4F4F4
Respuestas: prefijadas con "->" literal:
  -> games   -> multiplayer   -> XR / VR / AI   -> installations   -> websites
Sin burbujas, sin avatares, sin superficie: texto sobre la escena.
Las respuestas son links; el hover las desplaza 4px a la derecha (derivado).
```

### Reproductor de música

```
Estructura: << [Song--Artist] >>
Título: "Song--Artist" con doble guion literal como separador
Font: NB Architekt 400/700, 14px
Flechas: botones de control (receta de arriba)
Var CSS real: --baropacity (0.0 a 1.0) controla la opacidad de las barras
de audio del visualizador
```

### Panel de consentimiento (el único "formulario" del sitio)

```
Texto: NB Architekt 400, 14px (lh 21px), #FFFFFF
Legales: 12px (lh 18px)
Botón accept: rgba(156,165,255,0.333), radio 500px, texto negro (real)
Botón reject: rgba(0,0,0,0.333), radio 500px, texto negro (real)
Labels de botón: 12px

Regla: incluso el consent respeta el sistema: píldoras translúcidas,
texto en susurro, cero color salvo el periwinkle de la acción primaria.
```

### Toggle de audio

```
Posición: esquina superior izquierda (anclaje fijo del HUD)
Contenido: "Toggle Audio" en el DOM accesible; en el render, un
icono-forma que reacciona al estado del visualizador
Estado: puenteado al DOM por --baropacity (0.0 = silencio, 1.0 = pico)
```

### Capa de accesibilidad (GLA11y)

Patrón real y poco común: como todo se dibuja en canvas, el sitio mantiene
un DOM espejo (`div.GLA11y`) con el contenido navegable por lector de
pantalla y teclado ("Toggle Audio", "Work", "Contact").

```
Regla del sistema: cada objeto interactivo del render tiene su gemelo
DOM invisible. El canvas es la vista; el DOM es la verdad accesible.
```

---

## 5. Principios de Layout

### El layout es un viewport, no una página

El sitio no scrollea en el sentido DOM: el scroll es un input que mueve la cámara de la escena (`div.FXScroll` con `scrollElement`s vacíos que solo dan altura). El layout real es la composición de los cuatro anclajes del HUD sobre el frame:

```
+--------------------------------------------------+
| [audio toggle]                    [WORK - CONTACT]|
|                                            (glow) |
|                                                    |
|                   SCROLL DOWN                      |
|                  (logo cromado)                    |
|                 (nubes de partículas)              |
|                                                    |
| [chat: What are you looking for?]   [<< Song >>]  |
+--------------------------------------------------+
```

### Escala de espaciado

*(derivada: el DOM real posiciona por anclaje absoluto, no por flujo)*

```css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 40px;   /* margen de anclaje del HUD a los bordes del viewport */
```

### Reglas

1. **Los bordes son del HUD, el centro es de la escena.** Nada de texto permanente en el centro del frame: ahí vive el render.
2. **Densidad cero.** Máximo 4-5 elementos DOM visibles a la vez. Si un contenido necesita más, es una escena nueva, no más HUD.
3. **El canvas rinde a 1.5x.** Canvas de 2400x1350 para un viewport de 1600x900: el render va siempre por encima de la densidad del monitor para que el metal y las partículas no muestren aliasing.

---

## 6. Profundidad y Elevación

La profundidad de Active Theory no se hace con sombras CSS: **se hace con niebla y con luz**. No hay una sola `box-shadow` en el DOM (medido: `none` en todos los nodos).

### Sistema de elevación

| Nivel | Técnica | Uso |
|-------|---------|-----|
| 0 - Vacío | `#000000` declarado | El fondo absoluto |
| 1 - Niebla | Neblina volumétrica `#10141C` a `#141B26` | El espacio de la escena |
| 2 - Materia | Partículas rosa/oliva con profundidad de campo | La ornamentación |
| 3 - Objeto | El logo cromado con reflejos especulares | El sujeto |
| 4 - HUD | Superficies translúcidas (`rgba(255,255,255,0.1)`, `#191E22`) | Los controles |
| 5 - Glow | Emisión verde `#9BB796` bajo la píldora | La prueba de que el HUD "existe" en la escena |

```css
/* Si se necesita traducir la atmósfera a CSS plano (derivado): */
--shadow-none: none;                                  /* el DOM real no tiene sombras */
--glow-nav: 0 24px 48px -12px rgba(155, 183, 150, 0.25);
--haze-panel: 0 0 80px rgba(16, 20, 28, 0.9);
```

> **Regla**: un panel sobre la escena no proyecta sombra hacia abajo (no hay "suelo"); emite o recibe luz. La elevación se comunica con bordes hairline blancos al 10-12% y con glow, nunca con negro bajo el elemento (todo ya es negro).

### Radios de borde

```css
--radius-control: 5px;    /* real: botones << >> */
--radius-cursor:  6px;    /* real: el cursor cian del chat */
--radius-pill:    500px;  /* real: nav pill y botones de acción */
```

> Solo tres radios en todo el sitio, y el salto es brutal: de 5-6px directo a 500px. No existe el radio medio (12/16/24px). O es un control cuadrado de instrumento, o es una cápsula. Ese salto es parte de la voz.

---

## 7. Lo que Sí y lo que No

### Sí hacer

1. **Declara el fondo `#000000` y deja que la luz lo temple.** El azul carbón `#10141C` no se pinta: emerge de la niebla y los reflejos.
2. **Reserva el cian `#00FFFF` para un solo píxel vivo** (cursor, indicador de actividad). Su poder es la escasez: es el único saturado del sistema.
3. **Trata los botones como instrumentos**: superficies `rgba(255,255,255,0.1)`, radio 5px, texto 700 en caps, contenido tipográfico literal (`<<`, `->`) en lugar de iconos.
4. **Mantén el DOM en susurros de 12-14px.** Lo grande pertenece a la escena (canvas, imagen, vídeo), no al flujo HTML.
5. **Usa NB Architekt (o Chivo Mono) en los tres pesos reales**: 300 para aire, 400 para conversación, 700 para instrumento.
6. **Dale al HUD luz propia**: bordes hairline al 10-12% y glow salvia, nunca sombra negra.
7. **Duplica todo lo interactivo en un DOM accesible** (patrón GLA11y): el canvas es la vista, el DOM es la verdad.
8. **Convierte la navegación en conversación**: pregunta, respuestas con prefijo `->`, cursor parpadeante.

### No hacer

1. **No subas la neblina a gris.** `#10141C` y `#141B26` son azules carbón; un `#1A1A1A` neutro mata la temperatura cinemática.
2. **No repartas el cian.** Si `#00FFFF` aparece en botones, links y bordes a la vez, el sistema pierde su único punto de vida.
3. **No uses radios intermedios (12/16/24px).** El sistema salta de 5-6px a 500px; una card de 16px lo vuelve un SaaS.
4. **No pongas sombras negras bajo los paneles.** Sobre negro no hay sombra: hay glow, borde hairline o nada.
5. **No metas una segunda familia tipográfica.** Ni serif editorial ni geométrica amable: una sola mono técnica en tres pesos.
6. **No ilustres con iconos planos.** La ornamentación de esta marca es materia simulada (partículas, metal, niebla), y en su defecto, caracteres tipográficos (`<<`, `->`).
7. **No pongas texto pequeño sobre las zonas claras del render** (el cromo, el glow): el HUD vive en las esquinas oscuras.
8. **No conviertas el oliva `#62681F` en color de texto.** A 3.1:1 sobre negro es materia decorativa, no señal.

---

## 8. Comportamiento Responsive

### Breakpoints

El sitio no reordena un grid (no hay grid): **reencuadra la cámara y reancla el HUD**.

```css
/* Mobile first (derivado del comportamiento observable) */
/* sm: */ @media (min-width: 640px)  { }
/* md: */ @media (min-width: 768px)  { }
/* lg: */ @media (min-width: 1024px) { }
```

### Cambios por breakpoint

**Mobile (< 640px)**
- La escena baja de densidad de partículas (presupuesto de GPU) y la cámara encuadra más cerrado
- El HUD colapsa: nav pill arriba (full width menos márgenes), reproductor abajo
- El chat pasa a ocupar el borde inferior completo
- Texto: sigue en 12-14px; el HUD no encoge porque ya es mínimo

**Tablet (640px a 1024px)**
- HUD en las cuatro esquinas como en desktop
- El canvas rinde a dpr nativo con tope en 2x

**Desktop (> 1024px)**
- Composición completa: nav arriba derecha, audio arriba izquierda, chat abajo izquierda, reproductor abajo derecha
- Canvas a 1.5x del viewport (2400x1350 para 1600x900)

### Touch y rendimiento

- Los botones de 14px con padding cumplen 44px de target táctil sumando el área de la píldora
- En dispositivos sin WebGL2/GPU potente, el sitio degrada la escena antes que el HUD: menos partículas, misma interfaz
- `prefers-reduced-motion`: congela la deriva de partículas y desactiva el scroll-cámara *(comportamiento derivado; el HUD ya es estático)*

---

## 9. Guía de Prompts para Agentes

### Prompt de inicialización de sesión

```text
Estás trabajando con el sistema de diseño de Active Theory (estudio creativo WebGL).

PALETA: fondo negro declarado #000000, templado por la escena a azul carbón
#10141C-#141B26 (nunca gris neutro). Tinta #F4F4F4 (no blanco puro en párrafos).
Acentos, todos fríos y escasos: cian #00FFFF (UN solo elemento vivo por vista,
p. ej. el cursor), periwinkle #9CA5FF (superficie de acción, texto negro encima),
azul acero #7F95A6 (instrucciones), verde salvia #9BB796 (glow). Partículas
decorativas rosa #A98C9F y oliva #62681F (nunca texto).

TIPOGRAFÍA: una sola mono técnica (Chivo Mono, sustituta de NB Architekt),
pesos 300/400/700. El DOM habla a 12-14px; los tamaños display pertenecen
al canvas/escena. HUD en MAYÚSCULAS con tracking 0.06-0.08em; conversación
en sentence case a 14px/1.5.

ESTILO: radios 5-6px (controles) o 500px (píldoras), NADA intermedio.
Superficies translúcidas rgba(255,255,255,0.1) con borde hairline al 10-12%.
Sin box-shadow: la elevación es glow o borde. Iconografía tipográfica
literal (<<, >>, ->). MODO: oscuro absoluto.
```

### Prompt: Crear nueva pantalla

```text
Crea una pantalla de [FUNCIONALIDAD] para Active Theory.

Requisitos:
- Fondo #000000 con atmósfera azul carbón (#10141C), nunca gris
- El centro del frame es para la escena/contenido inmersivo; el HUD vive
  anclado a esquinas y bordes con margen de 40px
- Texto DOM en Chivo Mono: 14px/400 para conversación, 14px/700 caps para
  controles, 12px/400 para legales
- Un solo elemento cian #00FFFF por vista (cursor, LED, indicador)
- Botones: rgba(255,255,255,0.1) radio 5px, o píldora 500px si es acción
- Acción destacada: periwinkle rgba(156,165,255,0.333) con texto negro
- Sin sombras negras: bordes hairline y glow salvia #9BB796
- Navegación conversacional si aplica: pregunta + respuestas con "->"
```

### Prompt: Añadir componente al UI kit

```text
Añade un componente de [TIPO] al sistema de Active Theory.

Debe:
- Usar solo tokens del DESIGN.md de Active Theory
- Radios: 5px o 6px para controles, 500px para píldoras; prohibido 12/16/24px
- Superficie: rgba(255,255,255,0.1) sobre negro, borde 1px blanco al 10-12%
- Tipografía: Chivo Mono 300/400/700; caps + tracking solo en labels
- Estados: hover sube la superficie a 0.16 y el borde a 0.24; focus con
  outline cian de 2px; disabled a opacidad 0.4
- Si el componente emite "vida" (loading, recording, activo), ese punto
  es el único cian de la vista
```

### Prompt: Revisión de consistencia

```text
Revisa esta interfaz y detecta qué no sigue el sistema de Active Theory.

Verifica:
1. Si hay más de un elemento cian #00FFFF por vista (no debe)
2. Si hay radios intermedios (12/16/24px) entre el 5-6px y el 500px
3. Si hay box-shadow negra (la elevación aquí es glow o borde hairline)
4. Si hay texto DOM por encima de 14px que debería ser escena
5. Si la neblina es azul carbón (#10141C) y no gris neutro
6. Si los labels van en caps con tracking 0.06-0.08em y peso 700
7. Si hay una segunda familia tipográfica (no debe: solo la mono)
8. Si los iconos son SVG decorativos donde bastaría un carácter (<<, ->)
9. Si todo lo interactivo del render tiene gemelo DOM accesible
```

### Prompt: Variante de campaña

```text
Genera una variante [proyecto / case study / campaña] para Active Theory
manteniendo el sistema base.

Conserva:
- Negro #000000 + neblina azul carbón y la tinta #F4F4F4
- La mono técnica en 300/400/700 y el DOM en 12-14px
- El salto de radios 5-6px / 500px y las superficies translúcidas
- Un solo punto cian de vida por vista

Puedes variar:
- La población de partículas (color, densidad, comportamiento)
- El material del objeto central (cromo, vidrio, tela simulada)
- El acento de acción (periwinkle #9CA5FF puede ceder a salvia #9BB796
  en contextos de éxito/confirmación)
```

---

## 10. Movimiento (Motion) e Interacción JS

El motion no es una capa sobre el sitio: **es el sitio**. Active Theory construye su propio motor (render WebGL, física de partículas, transiciones de escena) y la página es una demo continua de ese motor. Es el motivo por el que está en esta galería.

**Nivel de motion**: extremo, pero con un solo foco por momento (la escena); el HUD apenas se mueve

**Arquitectura observada**:
- Un único `<canvas>` de 2400x1350 (1.5x el viewport) dibuja todo: logo, titulares, partículas, escenas de proyectos
- El DOM (4KB) es solo HUD + capa de accesibilidad GLA11y
- `div.FXScroll` con `scrollElement`s vacíos: el scroll nativo se captura como input numérico y se mapea al progreso de la cámara, no a desplazamiento de página
- Una sola variable CSS (`--baropacity`) puentea el estado del audio del motor al DOM

**Patrones de motion observados**:
- **Partículas GPGPU**: decenas de miles de puntos (rosa `#A98C9F`, oliva `#62681F`) con deriva browniana continua; reaccionan al cursor como campo de fuerza (se apartan y vuelven) y se recomponen en formaciones nuevas al cambiar de escena
- **Scroll-cámara**: la rueda no scrollea, conduce un travelling; `SCROLL DOWN` en acero `#7F95A6` es la única instrucción. El easing del acoplamiento cámara-scroll es suave con inercia larga (~1-2s de asentamiento), estilo lerp exponencial
- **Material cromado**: el logo es metal con reflejos especulares en tiempo real que responden a la posición del cursor como si fuera una luz
- **Chat conversacional**: la pregunta se escribe con efecto typewriter y el cursor cian parpadea por pasos (sin fade), a ~2 parpadeos por segundo
- **Audio-reactivo**: reproductor de música integrado; `--baropacity` insinúa un visualizador cuyo estado vive en el motor
- **Transición de escena**: al elegir una respuesta del chat o navegar, la escena no corta: las partículas se disuelven y recomponen (morph de formación), ~1.2s

**Duraciones y easings** *(medidos donde el DOM lo expone; derivados donde el motor no lo declara)*:

```css
--ease-hud:      ease;                          /* hover de controles, 200ms */
--ease-inertia:  cubic-bezier(0.22, 1, 0.36, 1); /* asentamiento de cámara (derivado) */
--duration-fast:   200ms;   /* hover de HUD */
--duration-blink:  500ms;   /* medio ciclo del cursor cian, por pasos */
--duration-scene:  1200ms;  /* morph de partículas entre escenas (derivado) */
/* scroll-linked: sin duración; progreso normalizado 0-1 mapeado a la cámara */
```

**Inventario de interacciones observadas**:

| Interacción | Disparador | Respuesta | Capa |
|-------------|-----------|-----------|------|
| Deriva de partículas | tiempo | movimiento browniano continuo | render |
| Repulsión de partículas | posición del cursor | campo de fuerza local | render |
| Reflejo del cromo | posición del cursor | especular que sigue al puntero | render |
| Travelling de cámara | rueda / scroll | progreso 0-1 con inercia | render |
| Cambio de escena | respuesta del chat / nav | morph de formación (~1.2s) | render |
| Typewriter del chat | carga / cambio de pregunta | escritura + cursor por pasos | DOM+render |
| Hover de HUD | puntero | superficie 10%→16%, borde 12%→24%, 200ms | DOM |
| Reproductor | click en << >> | cambio de pista + visualizador | DOM+audio |
| Toggle de audio | click | --baropacity 0.0↔1.0 | DOM+audio |

**Reglas de interacción**:
1. El cursor del usuario es una entidad física de la escena (campo de fuerza, fuente de luz), no una flecha sobre la página.
2. Nada corta: toda transición es materia que se recompone.
3. El HUD es estable: mientras la escena entera se transforma, los controles no se mueven ni un píxel. Ese contraste (mundo líquido, instrumentos fijos) es la firma de motion del estudio.
4. El audio es parte del sistema (toggle propio + reproductor): el motion está coreografiado con sonido.

> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)`: partículas congeladas en formación, scroll-cámara desactivado (saltos discretos entre escenas), cursor cian sin parpadeo (fijo visible). La capa GLA11y garantiza que nada dependa del render para ser operable.

---

## Anexo: Stack técnico detectado

- **Plataforma**: aplicación WebGL a canvas completo (2400x1350 para viewport 1600x900, dpr 1.5). `bodyHTMLLen` medido: **4.141 bytes**; todo el contenido visual vive en el render.
- **Sistema de tokens**: una sola variable CSS real en el `:root`: `--baropacity: 0.0` (opacidad del visualizador de audio). El color no está tokenizado: vive en el motor y en tres recetas de componente del HUD.
- **Tipografía**: `@font-face` reales: `nbarchitekt` en pesos **300, 400 y 700**, self-hosted, con fallback declarado `monospace`. `font-family` computada del HUD: `nbarchitekt, monospace`. Tamaños DOM: solo 14px (lh 21px) y 12px (lh 18px).
- **Colores DOM reales**: body/html `#000000`; texto `rgb(244,244,244)` y `#FFFFFF`; cursor `rgb(0,255,255)` radio 6px; accept `rgba(156,165,255,0.333)` radio 500px; reject `rgba(0,0,0,0.333)`; controles `rgba(255,255,255,0.1)` radio 5px. `meta theme-color: #000000`.
- **Colores de escena muestreados** (captura 1600x900, cuantización 16): dominante `#101020`-cluster (43.9% del frame), neblina `#10141C`/`#141B26`, partículas `#A98C9F` y `#62681F`, glow `#9BB796`, instrucción `#7F95A6`.
- **Accesibilidad**: capa `div.GLA11y` con espejo DOM del contenido del render ("Toggle Audio", "Work", "Contact") — patrón poco común y ejemplar en sitios full-canvas.
- **Scroll**: `div.FXScroll` + `scrollElement`s vacíos: scroll nativo como input de cámara.
- **Contenido de navegación**: chat "What are you looking for?" con respuestas `-> games -> multiplayer -> XR / VR / AI -> installations -> websites`; reproductor "Song--Artist" con controles `<<` `>>`.
- **Reconocimiento**: Active Theory es uno de los estudios WebGL más premiados (múltiples FWA/Awwwards; autores de experiencias para marcas globales); su motor interno y su enfoque full-canvas son referencia de la disciplina.
- **(no detectado)**: framework de UI declarado (React/Vue no observables en el DOM mínimo), librería de motion externa (el motor es propio), variables CSS de color, box-shadows (ninguna), media queries expuestas, modo claro.