| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| <title>Substrate Education Ecosystem Hub v0.1</title> |
| <style> |
| :root{ |
| --bg:#06080c; |
| --panel:#0e1422; |
| --panel2:#111a2c; |
| --ink:#eef6ff; |
| --muted:#aab9d2; |
| --line:#27364e; |
| --blue:#64b5ff; |
| --cyan:#5ef2df; |
| --violet:#a78bfa; |
| --green:#4ade80; |
| --yellow:#ffd166; |
| --orange:#ff9f43; |
| --red:#ff5c7a; |
| --shadow:0 24px 80px rgba(0,0,0,.40); |
| --radius:24px; |
| } |
| *{box-sizing:border-box} |
| html{scroll-behavior:smooth} |
| body{ |
| margin:0; |
| font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; |
| color:var(--ink); |
| background: |
| radial-gradient(circle at 12% 8%,rgba(100,181,255,.20),transparent 30%), |
| radial-gradient(circle at 82% 10%,rgba(167,139,250,.16),transparent 32%), |
| radial-gradient(circle at 50% 110%,rgba(94,242,223,.10),transparent 48%), |
| linear-gradient(180deg,#07090e,#05070b 52%,#030407); |
| } |
| a{color:inherit;text-decoration:none} |
| .wrap{max-width:1360px;margin:0 auto;padding:0 24px} |
| header{ |
| position:sticky;top:0;z-index:50; |
| backdrop-filter:blur(16px); |
| background:linear-gradient(180deg,rgba(7,9,14,.92),rgba(7,9,14,.70)); |
| border-bottom:1px solid rgba(255,255,255,.08); |
| } |
| .nav{ |
| height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px; |
| } |
| .brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.03em} |
| .logo{ |
| width:38px;height:38px;border-radius:50%; |
| display:grid;place-items:center; |
| background:linear-gradient(135deg,rgba(100,181,255,.22),rgba(94,242,223,.10)); |
| border:1px solid rgba(255,255,255,.18); |
| box-shadow:0 0 32px rgba(100,181,255,.18); |
| font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; |
| } |
| nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} |
| nav a{ |
| font-size:13px;color:var(--muted); |
| padding:8px 10px;border:1px solid transparent;border-radius:999px; |
| } |
| nav a:hover{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.04)} |
| .hero{padding:76px 0 42px} |
| .heroGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:24px;align-items:stretch} |
| .eyebrow{ |
| display:inline-flex;gap:8px;align-items:center; |
| border:1px solid rgba(94,242,223,.26); |
| background:rgba(94,242,223,.06); |
| color:#d9fffb;border-radius:999px;padding:7px 10px; |
| font-size:12px;font-weight:800;letter-spacing:.02em; |
| } |
| h1{ |
| margin:18px 0 14px; |
| font-size:clamp(38px,6vw,78px); |
| line-height:.95;letter-spacing:-.07em; |
| } |
| .gradient{ |
| background:linear-gradient(90deg,#fff,#bfe7ff,#b7fff6,#d7c8ff); |
| -webkit-background-clip:text;background-clip:text;color:transparent; |
| } |
| .lead{ |
| color:#dce8f7;font-size:clamp(17px,2vw,22px);line-height:1.5;max-width:900px; |
| } |
| .thesis{ |
| margin-top:24px;padding:18px 20px;border-radius:var(--radius); |
| background:linear-gradient(135deg,rgba(100,181,255,.10),rgba(167,139,250,.08)); |
| border:1px solid rgba(255,255,255,.12); |
| color:#f1f7ff;line-height:1.48; |
| } |
| .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} |
| .btn{ |
| display:inline-flex;align-items:center;gap:8px; |
| border:1px solid var(--line);border-radius:999px; |
| padding:12px 15px;font-weight:900;font-size:14px; |
| background:rgba(255,255,255,.04); |
| } |
| .btn.primary{background:linear-gradient(135deg,#1f6feb,#5b8cff);border-color:#77c1ff} |
| .btn:hover{transform:translateY(-1px);filter:brightness(1.08)} |
| .heroPanel{ |
| position:relative;overflow:hidden;min-height:420px; |
| background: |
| radial-gradient(circle at 50% 28%,rgba(100,181,255,.26),transparent 28%), |
| radial-gradient(circle at 52% 48%,rgba(94,242,223,.10),transparent 34%), |
| linear-gradient(180deg,rgba(18,26,44,.96),rgba(10,15,25,.96)); |
| border:1px solid rgba(255,255,255,.12); |
| border-radius:32px;box-shadow:var(--shadow); |
| padding:24px; |
| } |
| .orbit{ |
| position:absolute;inset:34px;border:1px solid rgba(100,181,255,.20);border-radius:50%; |
| animation:spin 24s linear infinite; |
| } |
| .orbit:nth-child(2){inset:74px;border-color:rgba(94,242,223,.18);animation-duration:18s;animation-direction:reverse} |
| .orbit:nth-child(3){inset:112px;border-color:rgba(167,139,250,.20);animation-duration:28s} |
| @keyframes spin{to{transform:rotate(360deg)}} |
| .diamond{ |
| position:absolute;left:50%;top:42%;width:116px;height:116px;transform:translate(-50%,-50%) rotate(45deg); |
| background:linear-gradient(135deg,rgba(100,181,255,.70),rgba(94,242,223,.25),rgba(167,139,250,.62)); |
| border:1px solid rgba(255,255,255,.45); |
| box-shadow:0 0 70px rgba(100,181,255,.35); |
| } |
| .heroPanelText{ |
| position:absolute;left:24px;right:24px;bottom:24px; |
| border:1px solid rgba(255,255,255,.12); |
| background:rgba(4,7,12,.56);backdrop-filter:blur(10px); |
| border-radius:22px;padding:16px; |
| } |
| .heroPanelText h2{margin:0 0 8px;font-size:18px} |
| .heroPanelText p{margin:0;color:var(--muted);line-height:1.45;font-size:14px} |
| .section{padding:34px 0} |
| .sectionHead{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px} |
| .section h2{font-size:clamp(26px,3vw,42px);margin:0;letter-spacing:-.05em} |
| .section p.sub{margin:6px 0 0;color:var(--muted);line-height:1.45;max-width:850px} |
| .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} |
| .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} |
| .card{ |
| position:relative;overflow:hidden; |
| background:linear-gradient(180deg,rgba(18,26,44,.96),rgba(11,17,29,.96)); |
| border:1px solid rgba(255,255,255,.11); |
| border-radius:var(--radius); |
| padding:20px; |
| box-shadow:var(--shadow); |
| } |
| .card:before{ |
| content:"";position:absolute;inset:0 0 auto 0;height:3px; |
| background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet)); |
| opacity:.9; |
| } |
| .card h3{margin:0 0 8px;font-size:20px;letter-spacing:-.03em} |
| .card p{color:#dce8f7;line-height:1.5;margin:0 0 14px} |
| .card .meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0} |
| .pill{ |
| border:1px solid var(--line);background:rgba(255,255,255,.04);color:#dbeafe; |
| padding:6px 8px;border-radius:999px;font-size:12px;font-weight:800; |
| } |
| .card a.launch{ |
| display:inline-flex;margin-top:8px;padding:10px 12px;border-radius:999px; |
| border:1px solid rgba(100,181,255,.36);background:rgba(100,181,255,.10); |
| color:#e5f4ff;font-size:13px;font-weight:900; |
| } |
| .timeline{display:grid;gap:12px} |
| .step{ |
| display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:start; |
| border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035); |
| border-radius:18px;padding:13px; |
| } |
| .num{ |
| width:38px;height:38px;border-radius:50%;display:grid;place-items:center; |
| background:linear-gradient(135deg,rgba(100,181,255,.25),rgba(94,242,223,.12)); |
| border:1px solid rgba(255,255,255,.16);font-weight:900;color:#e8f6ff; |
| } |
| .step h4{margin:0 0 4px;font-size:15px} |
| .step p{margin:0;color:var(--muted);line-height:1.42;font-size:13px} |
| .ruleBox{ |
| border-radius:28px;border:1px solid rgba(255,255,255,.12); |
| background: |
| radial-gradient(circle at 18% 20%,rgba(94,242,223,.12),transparent 28%), |
| radial-gradient(circle at 82% 18%,rgba(167,139,250,.13),transparent 28%), |
| linear-gradient(180deg,rgba(18,26,44,.94),rgba(8,13,22,.94)); |
| padding:24px;box-shadow:var(--shadow); |
| } |
| .rules{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px} |
| .rule{ |
| border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px;background:rgba(255,255,255,.035); |
| } |
| .rule strong{display:block;margin-bottom:6px} |
| .rule span{color:var(--muted);font-size:13px;line-height:1.42} |
| footer{padding:40px 0 48px;color:var(--muted);border-top:1px solid rgba(255,255,255,.08);margin-top:30px} |
| .copyline{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#8ea0bb} |
| @media(max-width:1100px){ |
| .heroGrid,.grid3,.grid2,.rules{grid-template-columns:1fr} |
| header{position:static} |
| nav{display:none} |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <div class="wrap nav"> |
| <a class="brand" href="#top" aria-label="Substrate Education Ecosystem Hub"> |
| <span class="logo">HIR</span> |
| <span>Substrate Education Ecosystem</span> |
| </a> |
| <nav> |
| <a href="#stack">Stack</a> |
| <a href="#simulators">Simulators</a> |
| <a href="#rules">Rules</a> |
| <a href="#roadmap">Roadmap</a> |
| </nav> |
| </div> |
| </header> |
|
|
| <main id="top"> |
| <section class="hero"> |
| <div class="wrap heroGrid"> |
| <div> |
| <span class="eyebrow">Primordial Code · Substrate · Education Layer</span> |
| <h1><span class="gradient">Preserve the structure. Adapt the route.</span></h1> |
| <p class="lead"> |
| Substrate is a cognition-aware education layer for translating concepts without flattening people. |
| It does not treat confusion as failure, cognition difference as degradation, or unresolved loops as something to close by force. |
| </p> |
| <div class="thesis"> |
| <strong>Core thesis:</strong> |
| A learner should not be made to feel stupid because the explanation arrived in the wrong format. |
| Math stays math. Physics stays physics. The route changes so the learner can meet the structure. |
| </div> |
| <div class="ctas"> |
| <a class="btn primary" href="#simulators">Open the simulator stack</a> |
| <a class="btn" href="https://huggingface.co/spaces/HirModel/primordial-code-ecosystem" target="_blank" rel="noopener">Primordial Code Ecosystem</a> |
| <a class="btn" href="https://huggingface.co/HirModel" target="_blank" rel="noopener">HirModel on Hugging Face</a> |
| </div> |
| </div> |
|
|
| <div class="heroPanel" aria-label="Animated diamond field illustration"> |
| <div class="orbit"></div> |
| <div class="orbit"></div> |
| <div class="orbit"></div> |
| <div class="diamond"></div> |
| <div class="heroPanelText"> |
| <h2>Substrate turns explanation into a pressure-mapped handoff.</h2> |
| <p> |
| Concept → cognition route → examples / symbols / metaphor / pacing → misconception guardrail → closure boundary. |
| The point is not to make everyone think the same. The point is to keep structure readable across difference. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section" id="stack"> |
| <div class="wrap"> |
| <div class="sectionHead"> |
| <div> |
| <h2>The stack</h2> |
| <p class="sub"> |
| The current public stack now has field integrity, cognition translation, physics translation, and math translation. |
| Together, they form a visible education substrate instead of isolated demos. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="grid2"> |
| <div class="card"> |
| <h3>Signal / field integrity</h3> |
| <p> |
| The HIR Diamond Matrix Transfer Simulator tests whether structure survives pressure: |
| compression, pruning, residual loss, offline nodes, adversarial injection, revocation, and handoff. |
| </p> |
| <div class="meta"> |
| <span class="pill">field-first</span> |
| <span class="pill">audit artifact</span> |
| <span class="pill">handoff integrity</span> |
| </div> |
| <a class="launch" href="https://huggingface.co/spaces/HirModel/hir-diamond-matrix-transfer-simulator" target="_blank" rel="noopener">Open Diamond Matrix Simulator</a> |
| </div> |
|
|
| <div class="card"> |
| <h3>Cognitive / education integrity</h3> |
| <p> |
| The Substrate translator series tests whether meaning survives explanation pressure: |
| different cognition styles, symbol density, examples, pacing, metaphors, proof boundaries, and open-loop discipline. |
| </p> |
| <div class="meta"> |
| <span class="pill">cognition-aware</span> |
| <span class="pill">non-diagnostic</span> |
| <span class="pill">loop steward</span> |
| </div> |
| <a class="launch" href="#simulators">View translator stack</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section" id="simulators"> |
| <div class="wrap"> |
| <div class="sectionHead"> |
| <div> |
| <h2>Education simulators</h2> |
| <p class="sub"> |
| Each simulator preserves the concept while adapting the explanation route. |
| They generate copyable outputs, JSON artifacts, visual signal fields, recommended supports, and closure boundaries. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="grid3"> |
| <div class="card"> |
| <h3>Substrate Cognition Translation Simulator</h3> |
| <p> |
| General cognition-route translator for HIR/OAM pressure grammar across light, heat, rhythm, electricity, and signal integrity. |
| </p> |
| <div class="meta"> |
| <span class="pill">visual/map</span> |
| <span class="pill">story/metaphor</span> |
| <span class="pill">red-team</span> |
| <span class="pill">lived-context</span> |
| </div> |
| <a class="launch" href="https://huggingface.co/spaces/HirModel/substrate-cognition-translation-simulator" target="_blank" rel="noopener">Open Cognition Simulator</a> |
| </div> |
|
|
| <div class="card"> |
| <h3>Substrate Physics Translation Simulator</h3> |
| <p> |
| Physics concepts explained through cognition styles: motion, forces, energy, heat, waves, electricity, light, gravity, and quantum basics. |
| </p> |
| <div class="meta"> |
| <span class="pill">physics stays physics</span> |
| <span class="pill">misconception guardrails</span> |
| <span class="pill">check-for-understanding</span> |
| </div> |
| <a class="launch" href="https://huggingface.co/spaces/HirModel/substrate-physics-translation-simulator" target="_blank" rel="noopener">Open Physics Simulator</a> |
| </div> |
|
|
| <div class="card"> |
| <h3>Substrate Math Translation Simulator</h3> |
| <p> |
| Math concepts explained through cognition styles: arithmetic, fractions, algebra, functions, geometry, graphing, probability, statistics, calculus, and linear algebra. |
| </p> |
| <div class="meta"> |
| <span class="pill">math stays math</span> |
| <span class="pill">define symbols</span> |
| <span class="pill">worked examples</span> |
| </div> |
| <a class="launch" href="https://huggingface.co/spaces/HirModel/substrate-math-translation-simulator" target="_blank" rel="noopener">Open Math Simulator</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section" id="rules"> |
| <div class="wrap"> |
| <div class="ruleBox"> |
| <h2>Substrate operating rules</h2> |
| <p class="sub"> |
| The system is not a moderator that arbitrarily closes loops. It is a cognition-aware loop-steward layer: |
| preserve the structure, translate the route, mark uncertainty, and close only with integrity. |
| </p> |
|
|
| <div class="rules"> |
| <div class="rule"> |
| <strong>1. No forced closure</strong> |
| <span>A loop does not close because people are tired, uncomfortable, or dislike the expression style.</span> |
| </div> |
| <div class="rule"> |
| <strong>2. Difference is signal</strong> |
| <span>Cognition-format mismatch is pressure to translate, not proof of defect, bad faith, or degradation.</span> |
| </div> |
| <div class="rule"> |
| <strong>3. Structure stays honest</strong> |
| <span>Math remains math. Physics remains physics. Translation adapts the route without laundering the concept.</span> |
| </div> |
| <div class="rule"> |
| <strong>4. Boundaries remain visible</strong> |
| <span>Misconceptions, assumptions, uncertainty, examples, proof limits, and closure state stay explicit.</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section" id="roadmap"> |
| <div class="wrap"> |
| <div class="sectionHead"> |
| <div> |
| <h2>Roadmap: from translation to live loop stewardship</h2> |
| <p class="sub"> |
| The translator stack is the first proof-of-wiring. The next major test is a live high-variance loop simulator: |
| messy classroom/forum/thread inputs synthesized without flattening cognition or forcing consensus. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="timeline"> |
| <div class="step"> |
| <div class="num">01</div> |
| <div> |
| <h4>Single-user cognition translation</h4> |
| <p>Self-selected cognition route turns one concept into a readable explanation while preserving unresolved layers.</p> |
| </div> |
| </div> |
| <div class="step"> |
| <div class="num">02</div> |
| <div> |
| <h4>Subject-specific translation</h4> |
| <p>Physics and math demonstrate that stable concept structures can be translated without treating learners as deficient.</p> |
| </div> |
| </div> |
| <div class="step"> |
| <div class="num">03</div> |
| <div> |
| <h4>Live Loop Steward Simulator</h4> |
| <p>Multiple participants, memes, frustration, evidence, questions, confusion, and disagreement become pressure-mapped signals.</p> |
| </div> |
| </div> |
| <div class="step"> |
| <div class="num">04</div> |
| <div> |
| <h4>Classroom / forum substrate</h4> |
| <p>Open loops produce artifacts: summaries, unresolved-loop ledgers, misconception maps, evidence spines, and closure notes.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <footer> |
| <div class="wrap"> |
| <p><strong>Boundary statement:</strong> This hub is a public-demo index for educational translation prototypes. It is not clinical, diagnostic, or a replacement for teachers, formal instruction, labs, practice, or domain expertise.</p> |
| <p class="copyline">Substrate Education Ecosystem Hub v0.1 · Primordial Code / HIR-OAM · Map the field. Translate the signal. Preserve the loop. Close only with integrity.</p> |
| </div> |
| </footer> |
| </body> |
| </html> |
|
|
