Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>The Living Method Manifesto</title>

  <style>
    :root {
      /* Primary */
      --pure-white: #FFFFFF;
      --soft-tech-gray: #F5F7FA;

      /* Secondary */
      --slate-gray: #6B7280;
      --muted-teal: #2EC4B6;

      /* Accent */
      --electric-blue: #2563EB;
    }

    body.dark-mode {
      --pure-white: #0F172A;
      --soft-tech-gray: #020617;
      --slate-gray: #CBD5E1;
      --muted-teal: #2EC4B6;
      --electric-blue: #3B82F6;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--soft-tech-gray);
      color: var(--slate-gray);
      min-height: 100vh;
      padding: 20px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .container {
      max-width: 900px;
      margin: auto;
      background: var(--pure-white);
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      overflow: hidden;
    }

    nav {
      background: #0F172A;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      padding: 16px;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    nav a {
      color: #E5E7EB;
      text-decoration: none;
      padding: 8px 14px;
      border-radius: 6px;
      font-weight: 600;
      transition: 0.25s ease;
    }

    nav a:hover,
    nav a.active {
      background: var(--electric-blue);
    }

    .content { padding: 42px; }

    header { text-align: center; margin-bottom: 48px; }

    header h1 {
      color: #0F172A;
      font-size: 2.4rem;
      margin-bottom: 10px;
    }

    body.dark-mode header h1 {
      color: #E5E7EB;
    }

    header p { line-height: 1.8; margin-top: 8px; }

    section { margin-top: 42px; scroll-margin-top: 90px; }

    h2 {
      color: var(--electric-blue);
      border-bottom: 3px solid var(--electric-blue);
      padding-bottom: 10px;
      margin-bottom: 20px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    h2::after {
      content: "▼";
      font-size: 0.7em;
      transition: transform 0.3s ease;
    }

    h2.collapsed::after { transform: rotate(-90deg); }

    .section-content {
      overflow: hidden;
      transition: max-height 0.4s ease, opacity 0.4s ease;
      max-height: 2000px;
      opacity: 1;
    }

    .section-content.hidden {
      max-height: 0;
      opacity: 0;
    }

    .principle, .step, .guardrail {
      background: linear-gradient(135deg, var(--pure-white), var(--soft-tech-gray));
      padding: 18px;
      margin: 12px 0;
      border-left: 5px solid var(--muted-teal);
      border-radius: 10px;
      transition: 0.25s ease;
    }

    .principle:hover, .step:hover, .guardrail:hover {
      transform: translateX(8px);
      box-shadow: 0 4px 14px rgba(37,99,235,0.15);
    }

    .tag {
      display: inline-block;
      background: var(--electric-blue);
      color: #fff;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 0.85rem;
      margin: 6px;
      font-weight: 600;
    }

    ul { margin-left: 20px; line-height: 1.9; }

    footer {
      background: #0F172A;
      color: #E5E7EB;
      padding: 32px;
      text-align: center;
      line-height: 1.7;
    }

    .theme-toggle {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--electric-blue);
      color: #fff;
      border: none;
      padding: 14px 18px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 1.1rem;
      box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    }

    .progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 4px;
      background: var(--electric-blue);
      width: 0%;
      z-index: 1000;
    }

    @media(max-width: 640px){
      .content { padding: 24px; }
      header h1 { font-size: 1.7rem; }
    }
  </style>
</head>
<body>

  <div class="progress-bar" id="progressBar"></div>
  <button class="theme-toggle" id="themeToggle">🌙</button>

  <div class="container">
    <nav>
      <a href="#problem" class="nav-link">Problem</a>
      <a href="#principles" class="nav-link">Principles</a>
      <a href="#cycle" class="nav-link">Cycle</a>
      <a href="#ethics" class="nav-link">Ethics</a>
      <a href="#audience" class="nav-link">Audience</a>
    </nav>

    <div class="content">
      <header>
        <h1>The Living Method Manifesto</h1>
        <p><em>Framework, Ethics, and Application</em></p>
        <p>
          The Living Method is an ethical, transferable framework developed through sustained
          documentation of lived experience, disciplined attention, and iterative reflection over time.
        </p>
      </header>

      <section id="problem">
        <h2 class="section-toggle">The Problem This Method Addresses</h2>
        <div class="section-content">
          <p>Modern systems are highly effective at processing external data, yet poorly equipped to work with first-person experience rigorously.</p>
          <ul>
            <li>Lived experience is often dismissed as anecdotal.</li>
            <li>Insight is separated from structure.</li>
            <li>Reflection lacks continuity.</li>
          </ul>
        </div>
      </section>

      <section id="principles">
        <h2 class="section-toggle">Core Principles</h2>
        <div class="section-content">
          <div class="principle"><strong>Intuition as Signal:</strong> A prompt for inquiry, not truth.</div>
          <div class="principle"><strong>Experience as Data:</strong> Recorded, revisited, compared.</div>
          <div class="principle"><strong>Documentation as Infrastructure:</strong> Enables continuity and pattern recognition.</div>
          <div class="principle"><strong>Meaning is Surfaced:</strong> Not imposed.</div>
          <div class="principle"><strong>Coherence Precedes Explanation:</strong> Stabilization before theory.</div>
        </div>
      </section>

      <section id="cycle">
        <h2 class="section-toggle">How the Method Works: The Cycle</h2>
        <div class="section-content">
          <div class="step">1. <strong>Attention:</strong> Notice internal/external states.</div>
          <div class="step">2. <strong>Documentation:</strong> Record neutrally and consistently.</div>
          <div class="step">3. <strong>Reflection:</strong> Review records across time.</div>
          <div class="step">4. <strong>Pattern Recognition:</strong> Identify emergent structures.</div>
          <div class="step">5. <strong>Integration:</strong> Apply insights to systems or self-regulation.</div>
        </div>
      </section>

      <section id="ethics">
        <h2 class="section-toggle">Ethical Guardrails</h2>
        <div class="section-content">
          <div class="guardrail">Derived from lived experience, not supernatural authority.</div>
          <div class="guardrail">Technology is scaffolding, not agency or intelligence.</div>
          <div class="guardrail">Descriptive (what happened), not causal (why it happened).</div>
          <div class="guardrail">Purpose: coherence, self-regulation, ethical sense-making.</div>
        </div>
      </section>

      <section id="audience">
        <h2 class="section-toggle">Who This Method Is For</h2>
        <div class="section-content">
          <span class="tag">Individuals</span>
          <span class="tag">Researchers</span>
          <span class="tag">Educators</span>
          <span class="tag">Organizations</span>
        </div>
      </section>
    </div>

    <footer>
      <p><strong>Purpose and Continuity:</strong> To create systems that can be learned, transferred, inherited, and adapted—without losing ethical grounding.</p>
      <p>"The Method exists to help meaning hold its shape at scale."</p>
    </footer>
  </div>

  <script>
    const navLinks = document.querySelectorAll('.nav-link');
    const sections = document.querySelectorAll('section');

    navLinks.forEach(link => {
      link.addEventListener('click', e => {
        e.preventDefault();
        document.getElementById(link.getAttribute('href').substring(1))
          .scrollIntoView({ behavior: 'smooth' });
      });
    });

    window.addEventListener('scroll', () => {
      let current = '';
      sections.forEach(section => {
        if (pageYOffset >= section.offsetTop - 120) {
          current = section.id;
        }
      });
      navLinks.forEach(link => {
        link.classList.toggle('active', link.getAttribute('href').substring(1) === current);
      });

      const scrollTop = window.pageYOffset;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      document.getElementById('progressBar').style.width = (scrollTop / docHeight) * 100 + '%';
    });

    document.querySelectorAll('.section-toggle').forEach(toggle => {
      toggle.addEventListener('click', () => {
        toggle.classList.toggle('collapsed');
        toggle.nextElementSibling.classList.toggle('hidden');
      });
    });

    const themeToggle = document.getElementById('themeToggle');
    themeToggle.onclick = () => {
      document.body.classList.toggle('dark-mode');
      themeToggle.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙';
    };
  </script>

</body>
</html>


Insight Systems

Insight Systems, is a universal living research space that explores cognition, intuition, and human‑AI collaboration by documenting real‑world case studies, field notes, and applied research on how lived experience becomes structured knowledge. Emphasizing documentation over performance, the venture is just starting out.