╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║     THE CENTER                                                              ║
║                                                                             ║
║     "CodexMono is The Brick - the fundamental unit that enables             ║
║      Monokinetics: unified Human + AI experience through predictable,       ║
║      trustable visual alignment."                                           ║
║                                                                             ║
║     Interaction extends this trust to user navigation:                      ║
║     Click, drag, keyboard - all methods respect the Brick's integrity.      ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝

╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║   SCALE GATE: WHEN TO SHOW POPUP                                            ║
║                                                                             ║
║                         User Clicks                                         ║
║                              │                                              ║
║                              ▼                                              ║
║                   ┌─────────────────────┐                                   ║
║                   │  Is content scaled  │                                   ║
║                   │    below 0.99?      │                                   ║
║                   └─────────┬───────────┘                                   ║
║                             │                                               ║
║              ┌───────NO─────┴─────YES───────┐                               ║
║              │                              │                               ║
║              ▼                              ▼                               ║
║       ┌──────────────┐              ┌─────────────────┐                     ║
║       │ No action    │              │ Show expanded   │                     ║
║       │ Content fits │              │ popup view      │                     ║
║       └──────────────┘              └─────────────────┘                     ║
║                                                                             ║
║   Why 0.99 threshold?                                                       ║
║   Floating-point math: 800/800 can equal 0.9999... not 1.0                  ║
║   0.99 catches this edge case correctly.                                    ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝

╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║   POPUP: FULL-SIZE VIEW OF SCALED CONTENT                                   ║
║                                                                             ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │   Position: Centered on screen (50%, 50%)                         │     ║
║   │                                                                   │     ║
║   │   Size Limits:                                                    │     ║
║   │   - Max width: 90% of screen                                      │     ║
║   │   - Max height: 80% of screen                                     │     ║
║   │   - Scrollable if content exceeds                                 │     ║
║   │                                                                   │     ║
║   │   Visual Style:                                                   │     ║
║   │   - Dark background matching theme                                │     ║
║   │   - Soft shadow for depth                                         │     ║
║   │   - Rounded corners                                               │     ║
║   │                                                                   │     ║
║   │   Typography:                                                     │     ║
║   │   - CodexMono font (default)                                      │     ║
║   │   - Preserved whitespace (pre formatting)                         │     ║
║   │   - Configurable line-height                                      │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝

╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║   CLOSING THE POPUP                                                         ║
║                                                                             ║
║   ┌───────────────────┐    ┌───────────────────┐    ┌───────────────────┐   ║
║   │                   │    │                   │    │                   │   ║
║   │   Press ESC       │    │  Click Outside    │    │  Click Same Box   │   ║
║   │   ___________     │    │                   │    │   (Toggle)        │   ║
║   │  │  Escape  │     │    │    ┌───────┐      │    │                   │   ║
║   │   ───────────     │    │    │ popup │      │    │   Click once:     │   ║
║   │                   │    │    └───────┘      │    │   → Opens         │   ║
║   │   Quick dismiss   │    │        X ←click   │    │   Click again:    │   ║
║   │   keyboard user   │    │   anywhere here   │    │   → Closes        │   ║
║   │                   │    │                   │    │                   │   ║
║   └───────────────────┘    └───────────────────┘    └───────────────────┘   ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝

╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║   KEYBOARD CONTROLS                                                         ║
║                                                                             ║
║   Fine Movement (Line by Line)                                              ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │         ▲                                                         │     ║
║   │         │   Arrow Up    - Move up ~2-3 lines                      │     ║
║   │                                                                   │     ║
║   │         │   Arrow Down  - Move down ~2-3 lines                    │     ║
║   │         ▼                                                         │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
║   Page Movement (Full Screen)                                               ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │         Page Up    - Jump up one screen                           │     ║
║   │         Page Down  - Jump down one screen                         │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
║   Absolute Movement (Instant Jump)                                          ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │         Home  - Jump to top                                       │     ║
║   │         End   - Jump to bottom                                    │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
║   The ~2-3 lines per arrow key matches terminal scrollback behavior,        ║
║   providing a familiar experience for developers.                           ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝

╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║   MOUSE WHEEL: DEDICATED POPUP SCROLLING                                    ║
║                                                                             ║
║   While popup is open:                                                      ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │   All wheel events captured                                       │     ║
║   │        │                                                          │     ║
║   │        ▼                                                          │     ║
║   │   Applied to popup only                                           │     ║
║   │        │                                                          │     ║
║   │        ▼                                                          │     ║
║   │   Background page does NOT scroll                                 │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
║   Why capture all wheel events?                                             ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │   Without capture:                                                │     ║
║   │   - Mouse over popup: popup scrolls                               │     ║
║   │   - Mouse outside popup: page scrolls (confusing!)                │     ║
║   │                                                                   │     ║
║   │   With capture:                                                   │     ║
║   │   - Mouse anywhere: popup scrolls                                 │     ║
║   │   - Consistent, predictable behavior                              │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝

╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║   DRAG SCROLLING: WIDE CONTENT NAVIGATION                                   ║
║                                                                             ║
║   Enabled when content overflows horizontally:                              ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │   Content narrower than viewport:                                 │     ║
║   │   ┌────────────────────────┐                                      │     ║
║   │   │    Content fits        │     Drag: DISABLED                   │     ║
║   │   └────────────────────────┘                                      │     ║
║   │                                                                   │     ║
║   │   Content wider than viewport:                                    │     ║
║   │   ┌────────────────────────┬──────┐                               │     ║
║   │   │  Visible  │  Hidden...        │ Drag: ENABLED                 │     ║
║   │   └────────────────────────┴──────┘                               │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
║   How drag works:                                                           ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │   1. Click and hold                                               │     ║
║   │   2. Drag left or right                                           │     ║
║   │   3. Content scrolls in opposite direction (natural feel)         │     ║
║   │   4. 2x acceleration for responsive movement                      │     ║
║   │   5. Release to stop                                              │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
║   Drag State:                                                               ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │      IDLE ────mousedown────→ DRAGGING ────mouseup────→ IDLE       │     ║
║   │                                  │                                │     ║
║   │                             mousemove                             │     ║
║   │                                  │                                │     ║
║   │                                  ▼                                │     ║
║   │                            Update scroll                          │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝

╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║   CODEXMONO: PERFECT MONOSPACE ALIGNMENT                                    ║
║                                                                             ║
║   Every character occupies exactly 600 font units:                          ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │   'A'  = 600 units                                                │     ║
║   │   '│'  = 600 units                                                │     ║
║   │   '─'  = 600 units                                                │     ║
║   │   '┌'  = 600 units                                                │     ║
║   │   ' '  = 600 units (space)                                        │     ║
║   │                                                                   │     ║
║   │   No kerning. No variable spacing.                                │     ║
║   │   Every character is a perfect brick.                             │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
║   Result: Perfect ASCII Art                                                 ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │   ┌───┬───┬───┐                                                   │     ║
║   │   │ A │ B │ C │   ← Lines connect perfectly                       │     ║
║   │   ├───┼───┼───┤                                                   │     ║
║   │   │ D │ E │ F │   ← Vertical bars align exactly                   │     ║
║   │   └───┴───┴───┘                                                   │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝

╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║   CSS WHITESPACE: PROTECTING ASCII ART                                      ║
║                                                                             ║
║   ┌───────────────┬────────────┬────────────┬───────────┬──────────────┐    ║
║   │    Mode       │ New Lines  │ Spaces     │ Text Wrap │ ASCII Safe?  │    ║
║   ├───────────────┼────────────┼────────────┼───────────┼──────────────┤    ║
║   │ normal        │ Collapse   │ Collapse   │ Yes       │ NO           │    ║
║   │ nowrap        │ Collapse   │ Collapse   │ No        │ NO           │    ║
║   │ pre           │ Preserve   │ Preserve   │ No        │ YES          │    ║
║   │ pre-wrap      │ Preserve   │ Preserve   │ Yes       │ MAYBE        │    ║
║   │ pre-line      │ Preserve   │ Collapse   │ Yes       │ NO           │    ║
║   └───────────────┴────────────┴────────────┴───────────┴──────────────┘    ║
║                                                                             ║
║   Only `white-space: pre` provides complete ASCII art protection.           ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝

╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║   BRICK NAVIGATION: ALL INPUT METHODS                                       ║
║                                                                             ║
║   The Brick (Full ASCII Content):                                           ║
║   ┌───────────────────────────────────────────────────────┐                 ║
║   │                                                       │                 ║
║   │   ┌───────────────────────────────────────────────┐   │                 ║
║   │   │   Header Section                              │   │                 ║
║   │   ├───────────────────────────────────────────────┤   │                 ║
║   │   │                                               │   │                 ║
║   │   │   Content extends vertically                  │   │                 ║
║   │   │   and horizontally beyond                     │   │                 ║
║   │   │   what fits on screen                         │   │                 ║
║   │   │                                               │   │                 ║
║   │   └───────────────────────────────────────────────┘   │                 ║
║   │                                                       │                 ║
║   └───────────────────────────────────────────────────────┘                 ║
║                                                                             ║
║   ┌───────────────────┐                                                     ║
║   │    Viewport       │  ← What you see at any moment                       ║
║   └───────────────────┘                                                     ║
║                                                                             ║
║   Navigation Methods:                                                       ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │                                                                   │     ║
║   │   Keyboard        │ Fine control (2-3 lines) and page jumps       │     ║
║   │   Mouse Wheel     │ Smooth continuous scrolling                   │     ║
║   │   Click + Drag    │ Direct manipulation (2x responsive)           │     ║
║   │                                                                   │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
║   "Just as terminal users navigate scrollback history,                      ║
║    document users navigate the Brick space."                                ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝

╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║   ALIGNMENT CHAIN: FROM FONT TO SCREEN                                      ║
║                                                                             ║
║   1. CodexMono Font                                                         ║
║      │                                                                      ║
║      │  600 units per character                                             ║
║      ▼                                                                      ║
║   2. white-space: pre                                                       ║
║      │                                                                      ║
║      │  Preserve all whitespace and newlines                                ║
║      ▼                                                                      ║
║   3. word-wrap: normal                                                      ║
║      │                                                                      ║
║      │  Prevent line breaks                                                 ║
║      ▼                                                                      ║
║   4. line-height: 1.4                                                       ║
║      │                                                                      ║
║      │  Consistent vertical spacing                                         ║
║      ▼                                                                      ║
║   5. transform: scale()                                                     ║
║      │                                                                      ║
║      │  Preserve internal proportions                                       ║
║      ▼                                                                      ║
║   RESULT: Perfect alignment at any size                                     ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝

╔═════════════════════════════════════════════════════════════════════════════╗
║                                                                             ║
║   THREE INTERACTION PRINCIPLES                                              ║
║                                                                             ║
║   1. EXPANSION PRINCIPLE                                                    ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │   "Scaling compresses the Brick; expansion reveals it             │     ║
║   │    in complete form."                                             │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
║   2. NAVIGATION PARALLELISM                                                 ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │   "Just as terminal users navigate scrollback history,            │     ║
║   │    document users navigate the Brick space."                      │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
║   3. ALIGNMENT IMPERATIVE                                                   ║
║   ┌───────────────────────────────────────────────────────────────────┐     ║
║   │   "Without perfect alignment, structure dissolves into chaos."    │     ║
║   └───────────────────────────────────────────────────────────────────┘     ║
║                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════╝