Untitled

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #0a0a0c;
    --surface: #111116;
    --surface2: #18181f;
    --border: rgba(255,255,255,0.07);
    --border2: rgba(255,255,255,0.13);
    --accent: #4a7cff;
    --accent2: #7c4aff;
    --red: #ff4a4a;
    --amber: #ffb84a;
    --green: #4aff9a;
    --text: #e8e8ee;
    --muted: #888898;
    --dim: #4a4a5a;
  }
  body { background: var(--bg); color: var(--text); font-family: var(--font-sans, sans-serif); font-size: 14px; }

  .shell { display: flex; flex-direction: column; height: 100vh; min-height: 500px; overflow: hidden; background: var(--bg); }

  /* HERO */
  .hero { padding: 1.25rem 1.5rem 1rem; border-bottom: 0.5px solid var(--border2); flex-shrink: 0; position: relative; overflow: hidden; }
  .hero-tag { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem; }
  .hero h1 { font-size: 22px; font-weight: 500; line-height: 1.2; }
  .hero h1 span { color: var(--muted); }
  .hero-ghost { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); font-size: 64px; font-weight: 500; color: rgba(255,255,255,0.025); pointer-events: none; letter-spacing: -4px; }

  /* NAV STRIP */
  .nav-strip { display: flex; align-items: center; border-bottom: 0.5px solid var(--border2); flex-shrink: 0; background: var(--bg); }
  .nav-arrow { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 0.75rem; height: 44px; font-size: 16px; flex-shrink: 0; transition: color 0.15s; display: flex; align-items: center; justify-content: center; }
  .nav-arrow:hover { color: var(--text); }
  .nav-arrow:disabled { opacity: 0.2; cursor: default; }
  .nav-scroll { display: flex; overflow-x: auto; scrollbar-width: none; flex: 1; scroll-behavior: smooth; }
  .nav-scroll::-webkit-scrollbar { display: none; }
  .nav-btn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; padding: 0 1rem; height: 44px; cursor: pointer; white-space: nowrap; font-family: inherit; transition: color 0.15s, border-color 0.15s; flex-shrink: 0; margin-bottom: -0.5px; }
  .nav-btn:hover { color: var(--text); }
  .nav-btn.active { color: var(--text); border-bottom-color: var(--accent); }

  /* CONTENT */
  .content { flex: 1; overflow-y: auto; padding: 1.75rem 1.5rem 3rem; scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
  .content::-webkit-scrollbar { width: 4px; }
  .content::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; }

  .section { display: none; }
  .section.active { display: block; }

  /* TYPOGRAPHY */
  .eyebrow { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
  h3 { font-size: 20px; font-weight: 500; margin-bottom: 0.6rem; line-height: 1.3; }
  h4 { font-size: 15px; font-weight: 500; margin-bottom: 0.4rem; }
  p { font-size: 13px; line-height: 1.75; color: var(--muted); margin-bottom: 0.9rem; }
  p:last-child { margin-bottom: 0; }

  /* CARDS */
  .card { background: var(--surface); border: 0.5px solid var(--border2); border-radius: 10px; padding: 1.1rem 1.25rem; margin-bottom: 0.75rem; }
  .card:last-child { margin-bottom: 0; }
  .card h4 { margin-bottom: 0.4rem; }

  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.75rem; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.75rem; }

  /* STATS */
  .stat { background: var(--surface2); border: 0.5px solid var(--border); border-radius: 8px; padding: 0.75rem; text-align: center; }
  .stat-val { font-size: 24px; font-weight: 500; margin-bottom: 0.15rem; }
  .stat-lbl { font-size: 11px; color: var(--muted); }

  /* BADGES */
  .badge { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 500; }
  .badge-red { background: rgba(255,74,74,0.15); color: var(--red); }
  .badge-amber { background: rgba(255,184,74,0.15); color: var(--amber); }
  .badge-blue { background: rgba(74,124,255,0.15); color: var(--accent); }
  .badge-green { background: rgba(74,255,154,0.15); color: var(--green); }
  .badge-purple { background: rgba(124,74,255,0.15); color: var(--accent2); }

  /* TIMELINE */
  .timeline { position: relative; padding-left: 1.25rem; }
  .timeline::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 0.5px; background: var(--border2); }
  .tl-item { position: relative; margin-bottom: 1.4rem; }
  .tl-item::before { content: ''; position: absolute; left: -1.25rem; top: 5px; width: 7px; height: 7px; border-radius: 50%; transform: translateX(-3px); border: 0.5px solid var(--border2); background: var(--surface2); }
  .tl-item.t-blue::before { background: rgba(74,124,255,0.4); border-color: var(--accent); }
  .tl-item.t-amber::before { background: rgba(255,184,74,0.4); border-color: var(--amber); }
  .tl-item.t-red::before { background: rgba(255,74,74,0.4); border-color: var(--red); }
  .tl-time { font-size: 10px; color: var(--accent); letter-spacing: 0.06em; margin-bottom: 0.2rem; }
  .tl-label { font-size: 15px; font-weight: 500; margin-bottom: 0.3rem; }
  .tl-desc { font-size: 13px; color: var(--muted); line-height: 1.65; }

  /* HEARTBEAT */
  .hb-block { background: var(--surface2); border: 0.5px solid var(--border2); border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
  .hb-row { margin-bottom: 0.5rem; }
  .hb-row:last-child { margin-bottom: 0; }
  .hb-top { display: flex; justify-content: space-between; margin-bottom: 0.25rem; }
  .hb-name { font-size: 12px; color: var(--muted); }
  .hb-pct { font-size: 12px; font-weight: 500; }
  .hb-bar { height: 5px; background: var(--border2); border-radius: 3px; overflow: hidden; }
  .hb-fill { height: 100%; border-radius: 3px; }

  /* CONDUCTOR MODES */
  .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.75rem; }
... (379 lines left)