feat(agentic-guide): link setup doc, add Claude Code start command and repo link

agentic-setup/agentic-setup-overview.html

@@ -552,6 +552,60 @@ section{padding:clamp(2.6rem,6vw,4.4rem) 0;border-top:1px solid var(--rule)}
 }
 .motto em{font-style:normal;color:var(--accent)}
 
+/* ---- "Get started" call-to-action — accent-bordered concrete next step ---- */
+.getstarted{
+  margin-top:18px;border:1px solid var(--border);border-left:5px solid var(--accent);
+  border-radius:0 14px 14px 0;overflow:hidden;box-shadow:var(--shadow);
+  background:
+    radial-gradient(120% 140% at 0% 0%, var(--accent-wash) 0%, transparent 55%),
+    var(--surface);
+  padding:clamp(1.3rem,3.5vw,2rem) clamp(1.3rem,3.5vw,2.2rem);
+}
+.getstarted .gsk{
+  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.16em;
+  text-transform:uppercase;color:var(--accent);font-weight:700;display:flex;
+  align-items:center;gap:.5rem;margin-bottom:.5rem;
+}
+.getstarted .gsk svg{flex:none}
+.getstarted h3{font-size:var(--step-2);margin:0 0 .55rem;font-family:var(--serif)}
+.getstarted .gslede{margin:0;color:var(--ink-soft);font-size:var(--step-0);line-height:1.55;max-width:62ch}
+.getstarted .gslede b{color:var(--ink)}
+.getstarted ol.gssteps{
+  margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.85rem;counter-reset:gs;
+}
+.getstarted ol.gssteps > li{
+  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
+  font-size:var(--step--1);line-height:1.55;color:var(--ink-soft);
+}
+.getstarted ol.gssteps > li::before{
+  counter-increment:gs;content:counter(gs);
+  font-family:var(--mono);font-weight:700;font-size:.72rem;
+  width:1.55rem;height:1.55rem;flex:none;border-radius:50%;
+  display:grid;place-items:center;background:var(--accent-wash);
+  color:var(--accent-ink);border:1px solid var(--border-strong);
+}
+.getstarted ol.gssteps > li b{color:var(--ink)}
+.getstarted .dl{
+  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
+  font-family:var(--mono);font-weight:700;font-size:var(--step--1);letter-spacing:.02em;
+  color:#fff;background:var(--accent);border:1px solid var(--accent-ink);
+  padding:.5em .95em;border-radius:8px;box-shadow:var(--shadow);
+  transition:background-color .16s ease, transform .12s ease;
+}
+.getstarted .dl svg{flex:none}
+.getstarted .dl:hover{background:var(--accent-ink)}
+.getstarted .dl:active{transform:translateY(1px)}
+@media(prefers-color-scheme: dark){.getstarted .dl{color:#15130f}}
+.getstarted .cmd{
+  margin-top:.55rem;display:block;font-family:var(--mono);font-size:.82rem;line-height:1.5;
+  background:var(--ink);color:var(--bg);border:1px solid var(--border-strong);
+  border-radius:9px;padding:.75rem .9rem;white-space:pre-wrap;word-break:break-word;
+}
+@media(prefers-color-scheme: dark){
+  .getstarted .cmd{background:var(--surface-2);color:var(--ink);}
+}
+.getstarted .cmd .cprompt{color:var(--accent);user-select:none;margin-right:.4rem}
+
 /* =========================================================================
    SECTION 7 — PRINCIPLES & ANTI-PATTERNS  (two columns)
    ========================================================================= */
@@ -621,9 +675,9 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
   body{background:#fff}
   body::before{display:none}
   section{page-break-inside:avoid;border-top:1px solid #ccc}
-  .pillar,.role,.fact,.lstage,.stratum,.sstep .scard,.col-card,.loop-wrap,.pitch,.principle{box-shadow:none}
+  .pillar,.role,.fact,.lstage,.stratum,.sstep .scard,.col-card,.loop-wrap,.pitch,.principle,.getstarted,.getstarted .dl,.getstarted .cmd{box-shadow:none}
   .reveal{opacity:1!important;transform:none!important}
-  .pitch .is,.motto{background:#111 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
+  .pitch .is,.motto,.getstarted .cmd{background:#111 !important;color:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
   .compass,.langbar{display:none}
 }
 </style>
@@ -676,6 +730,7 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
     <a href="#memory"><span class="n">5</span> <span data-i18n data-en="Memory" data-de="Gedächtnis">Memory</span></a>
     <a href="#setup"><span class="n">6</span> <span data-i18n data-en="Setup" data-de="Setup">Setup</span></a>
     <a href="#principles"><span class="n">7</span> <span data-i18n data-en="Do &amp; avoid" data-de="Tun &amp; meiden">Do &amp; avoid</span></a>
+    <a href="#get-started"><span class="n" aria-hidden="true">&rarr;</span> <span data-i18n data-en="Get started" data-de="Loslegen">Get started</span></a>
   </nav>
 </header>
 
@@ -1226,6 +1281,45 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
       data-en="Build the <em>smallest useful thing</em>, use it, and let <em>friction guide</em> what's next."
       data-de="Bau das <em>kleinste nützliche Ding</em>, nutze es, und lass die <em>Reibung leiten</em>, was als Nächstes kommt.">Build the <em>smallest useful thing</em>, use it, and let
     <em>friction guide</em> what's next.</p>
+
+    <!-- ----- concrete next step: get the setup doc + the command ----- -->
+    <div class="getstarted reveal" id="get-started" aria-labelledby="gs-h">
+      <span class="gsk">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
+        <span data-i18n data-en="Start here" data-de="Hier starten">Start here</span>
+      </span>
+      <h3 id="gs-h" data-i18n data-en="Get started" data-de="Loslegen">Get started</h3>
+      <p class="gslede" data-i18n
+        data-en="This page is the <b>what &amp; why</b>. The actual build is driven by the <b>setup doc</b> — a single file your Claude Code <b>reads and executes</b> to scaffold the repo, interview you, and stand up your first agents."
+        data-de="Diese Seite ist das <b>Was &amp; Warum</b>. Der eigentliche Aufbau wird von der <b>Setup-Anleitung</b> gesteuert — einer einzelnen Datei, die deine Claude Code <b>liest und ausführt</b>, um das Repo anzulegen, dich zu befragen und deine ersten Agenten aufzustellen.">This page is the <b>what &amp; why</b>. The actual build is driven by the <b>setup doc</b> — a single file your Claude Code <b>reads and executes</b> to scaffold the repo, interview you, and stand up your first agents.</p>
+
+      <ol class="gssteps">
+        <li>
+          <span data-i18n
+            data-en="<b>Get the setup doc.</b> It's one Markdown file that lives alongside this guide."
+            data-de="<b>Hol dir die Setup-Anleitung.</b> Es ist eine einzelne Markdown-Datei, die neben diesem Leitfaden liegt."><b>Get the setup doc.</b> It's one Markdown file that lives alongside this guide.<br>
+            <a class="dl" href="agentic-setup-bootstrap.md"
+               data-en-aria="Get the setup doc — agentic-setup-bootstrap.md"
+               data-de-aria="Setup-Anleitung holen — agentic-setup-bootstrap.md"
+               aria-label="Get the setup doc — agentic-setup-bootstrap.md">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg>
+              <span data-i18n data-en="Get the setup doc — agentic-setup-bootstrap.md" data-de="Setup-Anleitung holen — agentic-setup-bootstrap.md">Get the setup doc — agentic-setup-bootstrap.md</span>
+            </a>
+          </span>
+        </li>
+        <li>
+          <span data-i18n
+            data-en="<b>Save it where your Claude Code can read it</b> — inside your project folder, or in your home directory (<code>~/</code>)."
+            data-de="<b>Speichere sie dort, wo deine Claude Code sie lesen kann</b> — in deinem Projektordner oder in deinem Home-Verzeichnis (<code>~/</code>)."><b>Save it where your Claude Code can read it</b> — inside your project folder, or in your home directory (<code>~/</code>).</span>
+        </li>
+        <li>
+          <span data-i18n
+            data-en="<b>Give Claude Code this instruction</b> and let it take it from there:"
+            data-de="<b>Gib Claude Code diese Anweisung</b> und lass sie ab da übernehmen:"><b>Give Claude Code this instruction</b> and let it take it from there:</span>
+          <code class="cmd"><span class="cprompt" aria-hidden="true">&gt;</span>Read agentic-setup-bootstrap.md and set up my agentic environment.</code>
+        </li>
+      </ol>
+    </div>
   </section>
 
   <!-- ============================ SECTION 7 ============================ -->
@@ -1291,6 +1385,8 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
     <span data-i18n data-en="Your Agentic Environment — A Field Guide" data-de="Deine agentische Umgebung — ein Feldführer">Your Agentic Environment — A Field Guide</span>
     <span class="num">ORIENT·01</span>
     <span data-i18n data-en="The what &amp; why · a companion to the setup doc" data-de="Das Was &amp; Warum · ein Begleiter zur Setup-Anleitung">The what &amp; why · a companion to the setup doc</span>
+    <a href="https://git.pouya.duckdns.org/public/tutorials" target="_blank" rel="noopener"
+       data-i18n data-en="View the source repository &rarr;" data-de="Quell-Repository ansehen &rarr;">View the source repository &rarr;</a>
   </div>
 </footer>