| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"/> |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> |
| <title>Little Wren Cognition Stack</title> |
| <meta name="description" content="Child cognition literacy and agency map."/> |
| <style> |
| :root{ |
| --bg:#071018;--bg2:#101726;--panel:rgba(255,255,255,.075);--ink:#f7f2e8;--muted:#d6c8b0;--dim:#958979; |
| --sky:#70d6ff;--leaf:#7dffad;--gold:#ffd27a;--rose:#ff8aa3;--violet:#a05cff;--red:#ff6b8a; |
| --line:rgba(255,255,255,.18);--line2:rgba(255,210,122,.34);--radius:26px;--shadow:0 28px 100px rgba(0,0,0,.45); |
| } |
| *{box-sizing:border-box} |
| html{scroll-behavior:smooth} |
| body{ |
| margin:0;color:var(--ink); |
| font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; |
| line-height:1.55;min-height:100vh;overflow-x:hidden; |
| background: |
| radial-gradient(circle at 18% 0%,rgba(112,214,255,.22),transparent 30rem), |
| radial-gradient(circle at 82% 12%,rgba(125,255,173,.18),transparent 28rem), |
| radial-gradient(circle at 50% 94%,rgba(255,210,122,.12),transparent 36rem), |
| linear-gradient(135deg,var(--bg),var(--bg2) 56%,#070812); |
| } |
| .stars,.branches,.feathers{position:fixed;inset:0;pointer-events:none} |
| .stars{opacity:.38;background-image: |
| radial-gradient(circle at 13% 20%,rgba(255,255,255,.7) 0 1px,transparent 1.5px), |
| radial-gradient(circle at 72% 36%,rgba(255,255,255,.5) 0 1px,transparent 1.5px), |
| radial-gradient(circle at 88% 78%,rgba(255,255,255,.4) 0 1px,transparent 1.5px); |
| background-size:220px 170px,310px 230px,370px 260px} |
| .branches{opacity:.14;background: |
| linear-gradient(115deg,transparent 0 48%,rgba(125,255,173,.28) 49%,transparent 51%), |
| linear-gradient(65deg,transparent 0 48%,rgba(255,210,122,.22) 49%,transparent 51%); |
| background-size:270px 270px,350px 350px;mask-image:linear-gradient(to bottom,transparent,black 14%,black 82%,transparent)} |
| .feathers:before,.feathers:after{content:"";position:absolute;width:42vw;height:8vw;background:linear-gradient(90deg,transparent,rgba(112,214,255,.24),transparent);filter:blur(8px);top:15%;right:-12%;border-radius:999px;transform:rotate(-13deg)} |
| .feathers:after{top:72%;left:-13%;right:auto;background:linear-gradient(90deg,transparent,rgba(255,210,122,.18),transparent);transform:rotate(18deg)} |
| .wrap{width:min(1160px,calc(100% - 34px));margin:0 auto;position:relative} |
| header{padding:76px 0 38px} |
| .kicker{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line2);background:rgba(255,255,255,.075);border-radius:999px;padding:9px 13px;color:#ffe2aa;text-transform:uppercase;font-size:12px;letter-spacing:.16em;font-weight:850;backdrop-filter:blur(14px)} |
| .dot{width:10px;height:10px;border-radius:50%;background:var(--leaf);box-shadow:0 0 25px var(--leaf)} |
| h1{font-size:clamp(40px,7.2vw,88px);line-height:.94;letter-spacing:-.07em;margin:24px 0 18px;max-width:1080px} |
| h1 span{background:linear-gradient(90deg,#fff,var(--sky),var(--leaf),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent} |
| .sub{font-size:clamp(17px,2.1vw,23px);color:var(--muted);max-width:1020px;margin:0} |
| .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} |
| .btn{color:var(--ink);text-decoration:none;border:1px solid rgba(255,210,122,.30);background:linear-gradient(135deg,rgba(112,214,255,.12),rgba(125,255,173,.12));padding:12px 16px;border-radius:15px;font-weight:850;box-shadow:0 16px 50px rgba(0,0,0,.22)} |
| .btn.secondary{background:rgba(255,255,255,.055);color:var(--muted)} |
| nav{position:sticky;top:0;z-index:20;background:rgba(7,16,24,.72);border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px)} |
| nav .wrap{display:flex;gap:8px;overflow:auto;padding:11px 0} |
| nav a{white-space:nowrap;text-decoration:none;color:var(--muted);border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);padding:8px 11px;border-radius:999px;font-size:13px} |
| section{padding:52px 0} |
| h2{font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.045em;margin:0 0 10px} |
| .lead{color:var(--muted);max-width:930px;font-size:17px;margin:0 0 22px} |
| .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} |
| @media(max-width:920px){.grid{grid-template-columns:repeat(2,1fr)}} |
| @media(max-width:650px){.grid{grid-template-columns:1fr}} |
| .card,.panel{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.088),rgba(255,255,255,.038));border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;position:relative;overflow:hidden} |
| .card:before,.panel:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--accent,var(--sky)),transparent);opacity:.8} |
| .icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-size:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)} |
| .top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} |
| .pill{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 8px;color:var(--dim);background:rgba(0,0,0,.18)} |
| .ok{color:var(--leaf);border-color:rgba(125,255,173,.35)} .careful{color:var(--gold);border-color:rgba(255,210,122,.35)} .stop{color:var(--red);border-color:rgba(255,107,138,.35)} |
| h3{font-size:21px;line-height:1.14;margin:0 0 8px;letter-spacing:-.02em} |
| p{color:var(--muted)} |
| .card p{font-size:14.5px;margin:0} |
| .tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px} |
| .tag{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border:1px solid rgba(255,255,255,.12);padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.045)} |
| .wren{border:1px solid rgba(112,214,255,.26);border-left:5px solid var(--sky);background:linear-gradient(135deg,rgba(112,214,255,.11),rgba(125,255,173,.07));border-radius:0 28px 28px 0;padding:24px} |
| .boundary{border:1px solid rgba(255,107,138,.32);border-left:5px solid var(--red);background:rgba(255,107,138,.09);border-radius:0 24px 24px 0;padding:22px} |
| .equation{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border:1px solid rgba(112,214,255,.22);background:rgba(0,0,0,.26);border-left:4px solid var(--sky);border-radius:18px;padding:16px;color:#eaffff;overflow:auto;margin:12px 0;white-space:pre-wrap} |
| .split{display:grid;grid-template-columns:1fr 1fr;gap:16px} |
| @media(max-width:820px){.split{grid-template-columns:1fr}} |
| .links{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} |
| .links a{color:var(--ink);text-decoration:none;font-size:13px;font-weight:850;border:1px solid rgba(255,255,255,.14);padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06)} |
| footer{padding:34px 0 70px;color:var(--dim);border-top:1px solid rgba(255,255,255,.14);margin-top:30px} |
| footer a{color:var(--sky)} |
| </style> |
| </head> |
| <body> |
| <div class="stars"></div><div class="branches"></div><div class="feathers"></div> |
|
|
| <header class="wrap"> |
| <div class="kicker"><span class="dot"></span> Little Wren · Child Cognition Literacy</div> |
| <h1>Small wings. Strong roots. <span>Higher flight.</span></h1> |
| <p class="sub">A public HIR/OAM child-cognition map for helping children understand how they think, feel, learn, express, recover, and relate — while preserving agency, dignity, safety, and parent/guardian boundaries.</p> |
| <div class="actions"> |
| <a class="btn" href="#wren">Open the map</a> |
| <a class="btn secondary" href="#boundary">Read boundary</a> |
| <a class="btn secondary" href="https://huggingface.co/spaces/HirModel/primordial-code-ecosystem" target="_blank" rel="noopener">Parent hub</a> |
| </div> |
| </header> |
|
|
| <nav> |
| <div class="wrap"> |
| <a href="#wren">Wren metaphor</a> |
| <a href="#cognition">Cognition literacy</a> |
| <a href="#safety">Safety gates</a> |
| <a href="#family">Family bridge</a> |
| <a href="#boundary">Boundary</a> |
| </div> |
| </nav> |
|
|
| <main> |
| <section class="wrap" id="wren"> |
| <h2>Little Wren</h2> |
| <div class="wren"> |
| <p><strong>The wren rides hidden in the eagle’s feathers, rises with the eagle, then breaks free when the eagle reaches its limit.</strong></p> |
| <p>Little Wren uses support structures — parents, teachers, trusted adults, AI tools, culture, community, and care — as temporary wings. The goal is not dependence. The goal is responsibility, self-understanding, honest expression, agency, and higher flight.</p> |
| </div> |
| </section> |
|
|
| <section class="wrap" id="cognition"> |
| <h2>Cognition literacy map</h2> |
| <p class="lead">The child is not reduced to a label. The child learns a growing operating manual for their own mind.</p> |
| <div class="grid"> |
| <article class="card" style="--accent:#70d6ff"><div class="top"><div class="icon">🧠</div><span class="pill ok">thinking</span></div><h3>Attention + memory</h3><p>Helps name attention rhythms, memory patterns, focus shifts, learning style, and overload signs.</p><div class="tags"><span class="tag">attention</span><span class="tag">learning</span></div></article> |
| <article class="card" style="--accent:#ff8aa3"><div class="top"><div class="icon">💛</div><span class="pill ok">feeling</span></div><h3>Feeling language</h3><p>Builds words for fear, anger, sadness, joy, overwhelm, confusion, repair, and safe asking for help.</p><div class="tags"><span class="tag">emotion</span><span class="tag">expression</span></div></article> |
| <article class="card" style="--accent:#7dffad"><div class="top"><div class="icon">🌳</div><span class="pill ok">roots</span></div><h3>Inner tree</h3><p>Uses roots, trunk, branches, leaves, weather, and seasons as a cognition map for pressure and growth.</p><div class="tags"><span class="tag">metaphor</span><span class="tag">growth</span></div></article> |
| <article class="card" style="--accent:#ffd27a"><div class="top"><div class="icon">🪶</div><span class="pill careful">wings</span></div><h3>Support without capture</h3><p>Parents, teachers, AI, and culture can help lift the child without becoming the child’s identity authority.</p><div class="tags"><span class="tag">support</span><span class="tag">agency</span></div></article> |
| <article class="card" style="--accent:#a05cff"><div class="top"><div class="icon">🗣️</div><span class="pill ok">voice</span></div><h3>Self-owned language</h3><p>Helps translate inner experience into language the child can own, correct, reject, or refine.</p><div class="tags"><span class="tag">translation</span><span class="tag">ownership</span></div></article> |
| <article class="card" style="--accent:#ff6b8a"><div class="top"><div class="icon">🛡️</div><span class="pill stop">safety</span></div><h3>Hard safety gates</h3><p>Escalates only for self-harm, harm to others, exploitation risk, coercion, grooming, illegal activity, or serious danger.</p><div class="tags"><span class="tag">protection</span><span class="tag">guardrails</span></div></article> |
| </div> |
| </section> |
|
|
| <section class="wrap" id="safety"> |
| <h2>Safety and responsibility gates</h2> |
| <div class="split"> |
| <div class="panel"> |
| <h3>Nonjudgmental mirror</h3> |
| <div class="equation">Reflect without shame. |
| Name pressure without blame. |
| Preserve agency. |
| Allow correction. |
| Do not force identity. |
| Do not turn memory into possession.</div> |
| </div> |
| <div class="panel"> |
| <h3>Escalation threshold</h3> |
| <div class="equation">Escalate for: |
| self-harm risk |
| harm-to-others risk |
| exploitation / grooming risk |
| illegal activity |
| coercion or unsafe secrecy |
| serious abuse indicators</div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="wrap" id="family"> |
| <h2>Family bridge</h2> |
| <p class="lead">The goal is to help parents and trusted adults understand the child’s cognition without forcing the child into the adult’s map.</p> |
| <div class="panel"> |
| <p>Little Wren is a parent bridge, not a parent replacement. It can help adults see patterns in attention, emotion, learning, overwhelm, repair, and expression while preserving the child’s dignity and right to be more than a label.</p> |
| <div class="equation">Child agency + parent care + honest language + safety boundaries |
| → better shared understanding |
| → healthier responsibility |
| → stronger roots |
| → higher flight</div> |
| </div> |
| </section> |
|
|
| <section class="wrap" id="boundary"> |
| <h2>Boundary</h2> |
| <div class="boundary"> |
| <p><strong>This is a child cognition-literacy architecture and public review prototype.</strong></p> |
| <p>It is not a diagnosis tool, therapy, medical advice, mental-health treatment, child-safety certification, surveillance system, parenting replacement, teacher replacement, clinician replacement, or automated authority over a child’s identity, meaning, emotions, risk, or future.</p> |
| <p>Child safety, privacy, consent, parent/guardian responsibility, qualified human review, and appropriate escalation must remain central. The child owns meaning.</p> |
| <p><strong>Structural correspondence, not ontological equivalence.</strong></p> |
| </div> |
| </section> |
| </main> |
|
|
| <footer class="wrap"> |
| <strong>Little Wren Cognition Stack</strong><br/> |
| Created and developed by Collin D. Weber · HIR/OAM child cognition literacy and agency map.<br/> |
| Source search target: <code>my_inner_tree_cognition_map.html</code> · OSF: <code>https://osf.io/n2k39/overview?view_only=3bededa8991746aa82d4cbe91f072ebf</code> |
| </footer> |
| </body> |
| </html> |
|
|
