@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&display=swap');

    :root { 
      --bg: #000000;
      --fg: #ffffff;
      --mid: #808080;
      --light: #cccccc;
      --dark: #333333;
      --accent: #ffffff;
      --ghost: #666666;
      --void: #080808;
    }
    
    
    html,body{
      height:100%;margin:0;background:var(--bg);color:var(--fg);
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      font-size:11px;line-height:1.4;font-weight:300;
      overflow:hidden;
    }
    
    /* Refined monochrome animations */
    @keyframes void-drift {
      0%, 100% { transform: translate(0); opacity: 1; }
      25% { transform: translate(-1px, 0.5px); opacity: 0.95; }
      50% { transform: translate(0.5px, -1px); opacity: 0.9; }
      75% { transform: translate(-0.5px, -0.5px); opacity: 0.95; }
    }
    
    @keyframes memory-fade {
      0%, 90%, 100% { opacity: 1; }
      5% { opacity: 0.7; }
      10% { opacity: 0.9; }
      15% { opacity: 0.6; }
    }
    
    @keyframes subtle-pulse {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }
    
    @keyframes ghost-whisper {
      0%, 100% { opacity: 0.4; transform: translateY(0px); }
      50% { opacity: 0.7; transform: translateY(-2px); }
    }
    
    @keyframes minimal-glow {
      0%, 100% { box-shadow: 0 0 0 1px var(--mid); }
      50% { box-shadow: 0 0 0 2px var(--fg); }
    }
    
    @keyframes data-scan {
      0% { background-position: 0% 0%; }
      100% { background-position: 100% 100%; }
    }
    
    .void-drift { animation: void-drift 2s infinite linear; }
    .memory-fade { animation: memory-fade 3s infinite linear; }
    .subtle-pulse { animation: subtle-pulse 2s infinite ease-in-out; }
    .ghost-whisper { animation: ghost-whisper 4s infinite ease-in-out; }
    .minimal-glow { animation: minimal-glow 3s infinite ease-in-out; }
    .data-scan { animation: data-scan 8s infinite linear; }

    /* Touch-friendly canvas behavior */
    #threejs-container, #threejs-container canvas {
      touch-action: none; /* prevent browser panning/zoom so gestures control the scene */
      -ms-touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      overscroll-behavior: contain;
    }

    /* Touch-friendly DOM world (boards) */
    .world {
      touch-action: none; /* allow pointer gestures to control camera */
      -ms-touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      overscroll-behavior: contain;
      /* The transparent world plane must not cover boards at negative Z.
         Boards opt back into hit testing; empty-space gestures reach .stage. */
      pointer-events: none;
    }
    .stage, .board { cursor: grab; touch-action: none; }
    body.scene-dragging .stage, body.scene-dragging .board { cursor: grabbing; }
    .media-content { -webkit-user-drag: none; user-select: none; }
    
    /* Overflow indicators remain readable without flashing. */
    .memory-boundary-breach { border-color: #999; }

    
    /* Clean HUD with monochrome design */
    .hud{
      position:fixed;top:0;left:0;right:0;z-index:4;
      display:flex;justify-content:space-between;align-items:flex-start;
      gap:12px;padding:12px 16px;
      background:var(--bg);
      border-bottom:1px solid var(--mid);
      backdrop-filter:blur(8px);
    }
    
    .hud-left {
      flex: 1;
      min-width: 0;
    }
    
    .hud-right {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
    }
    
    .archaeological-data {
      font-size: 9px;
      opacity: 0.6;
      color: var(--mid);
      letter-spacing: 0.05em;
      margin-top: 3px;
      font-weight: 300;
    }
    
    .btn{
      border:1px solid var(--mid);border-radius:0;padding:6px 12px;
      background:transparent;color:var(--fg);cursor:pointer;
      font-family:inherit;font-weight:300;letter-spacing:0.02em;
      transition: all 0.2s ease;
      position: relative;
    }
    .btn:hover{
      background:var(--fg);color:var(--bg);
      border-color:var(--fg);
    }
    
    .note{opacity:.5;font-size:9px;letter-spacing:.05em;font-weight:300;}

    /* Start with a populated scene; file import remains an optional drawer. */
    .import-panel { display: none; }
    body .import-panel { left: 15px; right: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #555 #111; }
    .import-panel .model-upload-input { box-sizing: border-box; width: 100%; min-width: 0; }
    .import-panel .data { overflow-wrap: anywhere; }
    body.imports-open .import-panel { display: block; }
    .import-panel { top: 90px; left: 15px; right: auto; width: 250px; box-sizing: border-box; }
    .texture-archive-panel.import-panel { top: 315px; }
    .media-panel.import-panel { top: 560px; }
    .feed-status { font-size: 8px; color: var(--light); letter-spacing: .05em; }
    .media-credit {
      position: absolute; bottom: 0; left: 0; right: 0; z-index: 12;
      padding: 4px 6px; background: rgba(0,0,0,.88); color: #ccc;
      font-size: 7px; line-height: 1.4; pointer-events: auto;
    }
    .media-credit { cursor: inherit; }
    .hud-right { flex-wrap: wrap; justify-content: flex-end; max-width: 76%; }
    @media (max-width: 900px) {
      .hud { gap: 6px; padding: 8px; }
      .hud-left { max-width: 30%; }
      .hud-right { gap: 4px; }
      .hud-right .btn { padding: 5px 6px; font-size: 9px; }
      .hud-right .note, .archaeological-data { display: none; }
      .buffer-overflow-panel { display: none; }
      .board-inspector-panel { max-width: 300px; bottom: 8px; }
      .archaeology-panel, .ghost-panel { display: none; }
    }
    @media (max-height: 820px) {
      body.imports-open .import-panel { max-height: 24vh; overflow-y: auto; }
      .texture-archive-panel.import-panel { top: calc(90px + 25vh); }
      .media-panel.import-panel { top: calc(90px + 50vh); }
    }

    /* UI visibility toggle (configurable) */
    body.ui-hidden .ui-can-hide:not(.ui-keep) {
      display: none !important;
    }

    /* UI settings panel */
    .ui-settings-panel{
      position: fixed;
      top: 70px;
      right: 15px;
      width: 200px;
      background: var(--bg);
      border: 1px solid var(--mid);
      color: var(--fg);
      padding: 10px;
      font-size: 8px;
      z-index: 120;
      backdrop-filter: blur(4px);
      display: none;
    }
    .ui-settings-panel .row{ display:flex; align-items:center; gap:6px; margin:4px 0; }
    .ui-settings-panel .title{ font-weight:400; margin-bottom:6px; letter-spacing:.02em; }
    .ui-settings-panel .section{ margin-top:8px; padding-top:6px; border-top:1px solid var(--mid); }

    /* Force hide utility */
    .ui-force-hide{ display:none !important; }

    /* Always-visible UI CFG button */
    .ui-settings-fab{
      position: fixed;
      top: 70px;
      right: 15px;
      z-index: 121;
      padding: 6px 8px;
      font-size: 8px;
      opacity: 0.85;
    }

    /* Three.js Scene Container */
    .threejs-scene {
      position: fixed;
      inset: 0;
      top: 70px;
      z-index: 1;
      pointer-events: auto;
    }

    /* Minimal 3D stage */
      .stage{
        position:fixed;inset:0;top:70px;perspective:1500px;overflow:hidden;
        background: transparent;
        z-index: 2;
        pointer-events: auto; /* allow DOM world to receive gestures */
      }
    .stage::before {
      content: '';
      position: absolute;
      inset: 0;
      background: 
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255,255,255,.02) 4px, rgba(255,255,255,.02) 8px),
        repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(255,255,255,.01) 6px, rgba(255,255,255,.01) 12px);
      pointer-events: none;
      z-index: 3;
    }
    
    .world{position:absolute;inset:0;margin:auto;transform-style:preserve-3d;}
    /* Leave the central model visible while media continues around the scene. */
    body.model-focus .stage {
      mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.08) 30%, rgba(0,0,0,.08) 70%, #000);
    }

    /* Monochrome board styling */
    .board{
      position:absolute;transform-style:preserve-3d;
      border:1px solid var(--mid);border-radius:0;overflow:hidden;
      background:var(--bg);
      box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;
      transition: all 0.3s ease;
      cursor: pointer;
      pointer-events: auto;
    }
    .board:hover {
      transform: scale(1.02);
      border-color: var(--fg);
      box-shadow:0 0 0 1px var(--fg) inset, 0 0 20px rgba(255,255,255,.1);
    }
    
    /* Media archive boards */
    .board.media-archive {
      background: linear-gradient(45deg, var(--void), var(--bg));
      border-color: var(--light);
    }
    
    .board.gif-archive {
      background: linear-gradient(135deg, var(--dark), var(--bg));
      border-color: var(--light);
    }
    
    /* Void-touched boards */
    .board.void-touched {
      background: var(--void);
      border-color: var(--dark);
    }
    
    /* Ghost narrative boards */
    .board.ghost-narrative {
      border-color: var(--ghost);
      background: linear-gradient(135deg, var(--void), var(--bg));
      animation: minimal-glow 4s infinite ease-in-out;
    }
    
    .board.developer-ghost {
      border-color: var(--mid);
      background: linear-gradient(135deg, var(--dark), var(--bg));
    }
    
    .board.orphaned-variable {
      border-color: var(--ghost);
      background: linear-gradient(135deg, var(--void), var(--bg));
    }
    
    /* Enhanced board types */
    .board.model-archive {
      background: linear-gradient(135deg, var(--void), var(--bg));
      border-color: #00ff88;
      animation: minimal-glow 3s infinite ease-in-out;
    }
    
    .board.pbr-archive {
      background: linear-gradient(45deg, var(--dark), var(--void));
      border-color: #ff8800;
      animation: minimal-glow 4s infinite ease-in-out;
    }
    
    .board canvas{display:block;width:100%;height:100%;filter:contrast(1.3) brightness(1.1) saturate(1.2)}
    
    /* Media content styling - keep colors */
    .board .media-content {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: contrast(1.2) brightness(1.1) saturate(1.1);
      transition: all 0.3s ease;
    }
    
    .board:hover .media-content {
      filter: contrast(1.4) brightness(1.2) saturate(1.3);
    }
    
    /* Subtle overlay for media */
    .media-overlay {
      position: absolute;
      inset: 0;
      background: 
        repeating-linear-gradient(0deg, transparent 0%, rgba(255,255,255,0.03) 1%, transparent 2%);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .board.media-archive:hover .media-overlay,
    .board.gif-archive:hover .media-overlay {
      opacity: 1;
    }
    
    /* Clean archaeological tags */
    .tag{
      position:absolute;left:8px;top:6px;font-size:8px;letter-spacing:.03em;
      color:var(--fg);z-index:2;font-weight:400;
      background: rgba(0,0,0,0.8);
      padding: 3px 6px;
      border-left: 2px solid var(--mid);
    }
    .tag .sub{
      opacity:.7;font-size:7px;font-weight:300;
      color: var(--mid);
      margin-top: 2px;
    }
    .tag .artifact-id{
      opacity:.6;font-size:6px;font-weight:300;
      color: var(--ghost);
      margin-top: 1px;
    }
    .tag .hex-info{
      opacity:.8;font-size:6px;font-weight:300;
      color: var(--light);
      margin-top: 1px;
    }
    .tag .ghost-info{
      opacity:.8;font-size:6px;font-weight:300;
      color: var(--ghost);
      margin-top: 1px;
      animation: ghost-whisper 4s infinite ease-in-out;
    }
    .tag .media-info{
      opacity:.8;font-size:6px;font-weight:300;
      color: var(--light);
      margin-top: 1px;
    }
    .tag .archive-info{
      opacity:.8;font-size:6px;font-weight:300;
      color: var(--mid);
      margin-top: 1px;
    }

    /* Minimal wire connections */
    .wire{
      position:absolute;height:1px;
      background:linear-gradient(90deg, var(--mid), transparent 30%, var(--light) 70%, transparent);
      transform-origin:0 50%;
      z-index: 2;
      opacity: 0.6;
      pointer-events: none;
    }
    .wire.void-connection {
      background:linear-gradient(90deg, var(--ghost), transparent 50%, var(--ghost));
      height: 1px;
      opacity: 0.8;
    }
    
    .wire.phantom-connection {
      background:linear-gradient(90deg, var(--dark), transparent 50%, var(--dark));
      height: 1px;
      opacity: 0.3;
      animation: ghost-whisper 6s infinite ease-in-out;
    }
    
    .wire.media-connection {
      background:linear-gradient(90deg, var(--light), transparent 50%, var(--light));
      height: 1px;
      opacity: 0.5;
    }

    /* Enhanced wire types */
    .wire.model-connection {
      background: linear-gradient(90deg, #00ff88, transparent 50%, #00ff88);
      height: 1px;
      opacity: 0.6;
    }
    
    .wire.pbr-connection {
      background: linear-gradient(90deg, #ff8800, transparent 50%, #ff8800);
      height: 1px;
      opacity: 0.5;
    }

    /* Subtle void atmosphere */
    .void-atmosphere{
      position:fixed;inset:0;pointer-events:none;z-index:3;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.02), transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(255,255,255,.01), transparent 70%);
      /* Stable atmosphere; no screen movement. */
    }
    
    /* Minimal memory overlay */
    .memory-overlay {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      background: 
        linear-gradient(90deg, transparent 98%, rgba(255,255,255,.02) 99%, transparent 100%),
        linear-gradient(180deg, transparent 97%, rgba(255,255,255,.01) 99%, transparent 100%);
      animation: memory-fade 6s infinite linear;
    }
    
    /* Clean panels */
    .archaeology-panel {
      position: fixed;
      bottom: 15px;
      left: 15px;
      background: var(--bg);
      border: 1px solid var(--mid);
      padding: 12px;
      font-size: 8px;
      max-width: 280px;
      z-index: 5;
      backdrop-filter: blur(4px);
    }
    
    .archaeology-panel .title {
      color: var(--fg);
      font-weight: 400;
      margin-bottom: 6px;
      letter-spacing: 0.02em;
    }
    
    .archaeology-panel .data {
      color: var(--mid);
      opacity: 0.9;
      line-height: 1.3;
      font-weight: 300;
    }
    
    .overflow-warning {
      color: #ff4444;
      font-weight: 400;
      animation: subtle-pulse 2s infinite ease-in-out;
    }
    
    .overflow-warning span {
      color: #ff6666;
      font-weight: 500;
    }

    /* Model Upload Panel */
    .model-upload-panel {
      position: fixed;
      top: 90px;
      left: 15px;
      background: var(--bg);
      border: 1px solid var(--mid);
      padding: 12px;
      font-size: 8px;
      max-width: 260px;
      z-index: 5;
      backdrop-filter: blur(4px);
    }
    
    .model-upload-panel .title {
      color: var(--fg);
      font-weight: 400;
      margin-bottom: 6px;
      letter-spacing: 0.02em;
    }
    
    .model-upload-panel .data {
      color: var(--mid);
      opacity: 0.9;
      line-height: 1.3;
      font-weight: 300;
    }

    .model-upload-input {
      width: 100%;
      background: var(--void);
      border: 1px solid var(--mid);
      color: var(--fg);
      padding: 6px;
      font-family: inherit;
      font-size: 8px;
      font-weight: 300;
      margin: 6px 0;
    }
    
    /* Texture Archive Panel */
    .texture-archive-panel {
      position: fixed;
      top: 90px;
      left: 290px;
      background: var(--bg);
      border: 1px solid var(--mid);
      padding: 12px;
      font-size: 8px;
      max-width: 260px;
      z-index: 5;
      backdrop-filter: blur(4px);
    }
    
    .texture-archive-panel .title {
      color: var(--fg);
      font-weight: 400;
      margin-bottom: 6px;
      letter-spacing: 0.02em;
    }
    
    .texture-archive-panel .data {
      color: var(--mid);
      opacity: 0.9;
      line-height: 1.3;
      font-weight: 300;
    }
    
    /* Media Archive Panel */
    /* Buffer Overflow Panel */
    .buffer-overflow-panel {
      position: fixed;
      top: 90px;
      right: 15px;
      background: var(--bg);
      border: 1px solid var(--mid);
      padding: 12px;
      font-size: 8px;
      max-width: 280px;
      z-index: 5;
      backdrop-filter: blur(4px);
    }
    
    .buffer-overflow-panel .title {
      color: #ff4444;
      font-weight: 400;
      margin-bottom: 6px;
      letter-spacing: 0.02em;
      text-shadow: 0 0 4px #ff4444;
    }
    
    .buffer-overflow-panel .data {
      color: var(--mid);
      opacity: 0.9;
      line-height: 1.3;
      font-weight: 300;
    }

    .media-panel {
      position: fixed;
      top: 90px;
      right: 15px;
      background: var(--bg);
      border: 1px solid var(--mid);
      padding: 12px;
      font-size: 8px;
      max-width: 260px;
      z-index: 5;
      backdrop-filter: blur(4px);
    }
    
    .media-panel .title {
      color: var(--fg);
      font-weight: 400;
      margin-bottom: 6px;
      letter-spacing: 0.02em;
    }
    
    .media-panel .data {
      color: var(--mid);
      opacity: 0.9;
      line-height: 1.3;
      font-weight: 300;
    }
    
    /* Ghost narratives panel */
    .ghost-panel {
      position: fixed;
      bottom: 15px;
      right: 15px;
      background: var(--bg);
      border: 1px solid var(--mid);
      padding: 12px;
      font-size: 8px;
      max-width: 320px;
      max-height: 200px;
      overflow-y: auto;
      z-index: 5;
      backdrop-filter: blur(4px);
    }
    
    .ghost-panel .title {
      color: var(--fg);
      font-weight: 400;
      margin-bottom: 8px;
      letter-spacing: 0.02em;
    }
    
    .ghost-story {
      color: var(--mid);
      font-style: italic;
      margin-bottom: 10px;
      line-height: 1.4;
      font-weight: 300;
      animation: ghost-whisper 6s infinite ease-in-out;
    }
    
    .narrative-fragments {
      max-height: 140px;
      overflow-y: auto;
    }
    
    .fragment {
      margin: 6px 0;
      padding: 4px 6px;
      border-left: 2px solid;
      font-size: 7px;
      line-height: 1.3;
      opacity: 0.8;
      font-weight: 300;
    }
    
    .fragment.phantom {
      border-color: var(--ghost);
      background: var(--void);
      color: var(--mid);
    }
    
    .fragment.echo {
      border-color: var(--dark);
      background: var(--void);
      color: var(--ghost);
    }
    
    .fragment.void {
      border-color: var(--mid);
      background: var(--void);
      color: var(--light);
    }
    
    .fragment.developer_ghost {
      border-color: var(--light);
      background: var(--void);
      color: var(--mid);
    }
    
    .fragment.orphaned_variable {
      border-color: var(--ghost);
      background: var(--void);
      color: var(--light);
    }
    
    .fragment.media_ghost {
      border-color: var(--mid);
      background: var(--void);
      color: var(--light);
    }
    
    /* ASCII Chat Display */
    .ascii-chat {
      position: fixed;
      top: 300px;
      right: 15px;
      width: 260px;
      height: 180px;
      background: var(--bg);
      border: 1px solid var(--mid);
      padding: 10px;
      font-size: 8px;
      line-height: 1.3;
      overflow-y: auto;
      backdrop-filter: blur(4px);
      z-index: 15;
      scrollbar-width: thin;
      scrollbar-color: var(--mid) transparent;
    }
    
    .ascii-chat::-webkit-scrollbar {
      width: 3px;
    }
    
    .ascii-chat::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .ascii-chat::-webkit-scrollbar-thumb {
      background: var(--mid);
    }
    
    /* Chat header */
    .ascii-chat::before {
      content: "Archaeological System Log";
      display: block;
      color: var(--fg);
      font-weight: 400;
      font-size: 8px;
      margin-bottom: 8px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--mid);
      letter-spacing: 0.02em;
      text-align: left;
    }

    /* Text overlay styles */
    .text-overlay {
      position: absolute;
      inset: 8px;
      background: rgba(0,0,0,0.8);
      color: var(--fg);
      font-size: 6px;
      line-height: 1.2;
      padding: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 300;
      border-left: 2px solid var(--mid);
      backdrop-filter: blur(2px);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 10;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .text-overlay:hover {
      opacity: 1 !important;
      background: rgba(0,0,0,0.95) !important;
      z-index: 15;
    }

    .board:hover .text-overlay {
      transform: scale(1.02);
    }

    .board.ghost-narrative .text-overlay {
      border-left-color: var(--ghost);
      animation: ghost-whisper 6s infinite ease-in-out;
    }

    .board.media-archive .text-overlay {
      border-left-color: var(--light);
    }

    .board.model-archive .text-overlay {
      border-left-color: #00ff88;
    }

    .board.pbr-archive .text-overlay {
      border-left-color: #ff8800;
    }

    @keyframes text-generation {
      0% { opacity: 0; transform: translateY(10px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .text-overlay[data-generating="true"] {
      animation: text-generation 0.5s ease-out;
    }

    .ascii-message {
      margin: 4px 0;
      padding: 3px 6px;
      border-left: 2px solid;
      font-size: 7px;
      line-height: 1.3;
      opacity: 0.8;
      font-weight: 300;
      animation: message-appear 0.3s ease;
    }
    
    .ascii-message.system {
      border-color: var(--mid);
      background: var(--void);
      color: var(--light);
    }
    
    .ascii-message.ghost {
      border-color: var(--ghost);
      background: var(--void);
      color: var(--mid);
      animation: ghost-whisper 4s infinite ease-in-out;
    }
    
    .ascii-message.error {
      border-color: var(--light);
      background: var(--void);
      color: var(--mid);
    }
    
    .ascii-message.success {
      border-color: var(--fg);
      background: var(--void);
      color: var(--light);
    }
    
    .ascii-message.hex {
      border-color: var(--ghost);
      background: var(--void);
      color: var(--mid);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 6px;
    }
    
    .ascii-message.important {
      border-color: var(--fg);
      background: var(--void);
      color: var(--light);
    }
    
    .ascii-message.media {
      border-color: var(--light);
      background: var(--void);
      color: var(--mid);
    }

    .ascii-message.create {
      border-color: #00ff88;
      background: var(--void);
      color: var(--light);
    }

    .ascii-message.batch {
      border-color: #ff8800;
      background: var(--void);
      color: var(--light);
    }
    
    @keyframes message-appear {
      from { opacity: 0; transform: translateX(-5px); }
      to { opacity: 1; transform: translateX(0); }
    }
    
    .ascii-timestamp {
      color: var(--ghost);
      font-size: 6px;
      margin-right: 4px;
      opacity: 0.6;
    }
    
    .ascii-content {
      white-space: pre-wrap;
      word-break: break-word;
      line-height: 1.3;
      font-size: 7px;
    }
    
    .terminal-cursor {
      animation: blink 1.5s infinite;
    }
    
    @keyframes blink {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
    }

    .hex-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.95);
      z-index: 100;
      padding: 20px;
      display: none;
    }

    .hex-modal-content {
      max-width: 700px;
      margin: 0 auto;
      background: var(--bg);
      border: 1px solid var(--mid);
      padding: 24px;
    }

    .hex-modal h3 {
      color: var(--fg);
      margin-top: 0;
      font-weight: 400;
      letter-spacing: 0.02em;
    }

    .hex-modal textarea {
      width: 100%;
      height: 280px;
      background: var(--void);
      color: var(--fg);
      border: 1px solid var(--mid);
      padding: 12px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      font-weight: 300;
      resize: vertical;
    }

    .hex-modal-footer {
      margin-top: 12px;
    }

    .hex-modal-info {
      font-size: 9px;
      color: var(--mid);
      margin-top: 12px;
      font-weight: 300;
    }

    /* Board Detail Modal */
    .board-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.92);
      z-index: 120;
      padding: 20px;
      display: none;
    }

    .board-modal-content {
      max-width: 760px;
      margin: 0 auto;
      background: var(--bg);
      border: 1px solid var(--mid);
      padding: 18px;
    }

    .board-modal h3 {
      color: var(--fg);
      margin-top: 0;
      font-weight: 400;
      letter-spacing: 0.02em;
    }

    .board-modal .board-meta {
      font-size: 9px;
      color: var(--mid);
      margin-bottom: 10px;
      line-height: 1.5;
    }

    .board-modal .board-text {
      background: var(--dark);
      border: 1px solid var(--mid);
      color: var(--fg);
      padding: 10px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      font-weight: 300;
      max-height: 260px;
      overflow: auto;
      white-space: pre-wrap;
    }

    .board-modal .footer {
      margin-top: 10px;
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    /* Board Inspector Panel (always visible) */
    .board-inspector-panel {
      position: fixed;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--bg);
      border: 1px solid var(--mid);
      padding: 12px;
      font-size: 8px;
      max-width: 520px;
      width: calc(100% - 40px);
      z-index: 150; /* Above modals */
      backdrop-filter: blur(4px);
      pointer-events: auto;
    }
    .board-inspector-panel .title {
      color: var(--fg);
      font-weight: 400;
      margin-bottom: 6px;
      letter-spacing: 0.02em;
    }
    .board-inspector-panel .meta {
      color: var(--mid);
      opacity: 0.9;
      line-height: 1.4;
      margin-bottom: 6px;
    }
    .board-inspector-panel .content {
      background: var(--dark);
      border: 1px solid var(--mid);
      color: var(--fg);
      padding: 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      font-weight: 300;
      max-height: 220px;
      overflow: auto;
      white-space: pre-wrap;
    }