@telepath-computer/television 0.1.216 → 1.3.3

package/dist/onboarding/research/todays-news.html

@@ -4,8 +4,8 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today&#39;s AI News</title>
-<link rel="stylesheet" href="/canonical/v1/styles.css">
-<script type="module" src="/canonical/v1/components.js"></script>
+<link rel="stylesheet" href="/canonical/v2/styles.css">
+<script type="module" src="/canonical/v2/components.js"></script>
 <style>
 /* Shared base for onboarding artifacts ([[../index.md]]): document padding
    and the centered content shell. Typography, text color, and background
@@ -72,11 +72,11 @@ header.hero h1 {
 }
 
 
-/* Artifact-specific styling for Today's AI News ([[index.md]]): the wider
+/* Artifact-specific styling for Today's AI News ([[../index.md]]): the wider
    feed shell, per-source accent props over canonical ramp tokens, the
    source chips, the agent "why" notes, and the three source-shaped cards.
    Chrome colors are semantic tokens; the artifact never redefines them
-   ([[../../index.md#^respect-theme]]). */
+   ([[../index.md#^respect-theme]]). */
 
 .shell {
   max-width: 760px;
@@ -98,13 +98,13 @@ header.hero h1 {
 .card {
   overflow: hidden;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-12, 12px);
+  border-radius: 12px;
   background: var(--color-surface);
 }
 
 .card-header {
   padding: var(--space-10, 10px) var(--space-16, 16px);
-  color: var(--white);
+  color: white;
 }
 .card.hn .card-header { background: var(--hn-color); }
 .card.x .card-header  { background: var(--x-color); }
@@ -121,7 +121,7 @@ header.hero h1 {
 .card-title {
   display: block;
   margin-top: var(--space-2, 2px);
-  color: var(--white);
+  color: white;
   font-size: var(--text-base, 13.5px);
   font-weight: 600;
   line-height: 1.3;
@@ -133,7 +133,7 @@ a.card-title:hover {
 /* Source metadata (domain / timestamp / outlet) under the title, dimmed. */
 .card-meta {
   margin-top: var(--space-4, 4px);
-  color: var(--white);
+  color: white;
   font-size: var(--text-sm, 12px);
   opacity: 0.75;
 }
@@ -153,7 +153,7 @@ a.card-title:hover {
 
 .card-footer {
   padding: var(--space-8, 8px) var(--space-16, 16px);
-  border-top: 1px solid var(--color-border-muted);
+  border-top: 1px solid var(--color-border);
   background: var(--color-surface-muted);
   color: var(--color-text-muted);
   font-size: var(--text-sm, 12px);
@@ -207,7 +207,7 @@ a.card-title:hover {
   display: inline-flex;
   padding: 2px var(--space-8, 8px);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-full, 9999px);
+  border-radius: var(--radius-pill, 9999px);
   background: var(--color-surface-muted);
   color: var(--color-text-muted);
   font-size: var(--text-sm, 12px);
@@ -234,7 +234,7 @@ a.card-title:hover {
   gap: var(--space-24, 24px);
   margin: var(--space-12, 12px) 0 0;
   padding-top: var(--space-10, 10px);
-  border-top: 1px solid var(--color-border-muted);
+  border-top: 1px solid var(--color-border);
 }
 .x-stat {
   display: flex;
@@ -290,18 +290,18 @@ a.card-title:hover {
   </header>
 
   <div class="feed">
-    
-    
+
+
     <article class="card hn">
       <div class="card-header">
         <div class="card-source">Hacker News</div>
-        
+
         <a class="card-title" href="https://news.ycombinator.com/item?id=42901234" target="_blank" rel="noopener">Why Open Models Are Critical to the Future of Computing</a>
         <div class="card-meta">openweights.blog</div>
-        
+
       </div>
       <div class="card-body">
-        
+
         <p class="hn-subhead">A front-page essay argues that open models — weights you can download, inspect, modify, and run on your own hardware — are the only path that preserves user sovereignty, privacy, censorship resistance, low latency, and cost control. The thread also rounds up recent open model releases: GLM-4.6-405B, Llama-4-70B, Mistral-Large-2, DeepSeek-V3, and Qwen-3-72B. Commenters debate whether the frontier gap is closing fast enough to matter for production deployments.</p>
         <div class="hn-stats">
           <span class="hn-stat">▲ <strong>927</strong> points</span>
@@ -309,34 +309,34 @@ a.card-title:hover {
           <a class="hn-discussion" href="https://news.ycombinator.com/item?id=42901234" target="_blank" rel="noopener">view discussion →</a>
         </div>
         <div class="hn-tags">
-          
+
           <span class="hn-tag">open-models</span>
-          
+
           <span class="hn-tag">llm</span>
-          
+
           <span class="hn-tag">sovereignty</span>
-          
+
           <span class="hn-tag">privacy</span>
-          
+
           <span class="hn-tag">latency</span>
-          
+
         </div>
-        
+
       </div>
       <div class="card-footer">You've been thinking and writing a lot about open models lately.</div>
     </article>
-    
-    
+
+
     <article class="card x">
       <div class="card-header">
         <div class="card-source">X</div>
-        
+
         <div class="card-title">Marcus Vane <span class="x-handle-h">marcusvane</span></div>
         <div class="card-meta">3h ago</div>
-        
+
       </div>
       <div class="card-body">
-        
+
         <div class="x-text">most AI startups are building for the demo, not the deployment. the enterprise buyers i talk to care about three things: does it work reliably, can i audit what it did, and can i roll it back. "autonomy" is maybe 4th on the list. maybe.</div>
         <div class="x-stats">
           <div class="x-stat">💬 <strong>287</strong> replies</div>
@@ -344,22 +344,22 @@ a.card-title:hover {
           <div class="x-stat">❤️ <strong>5.8K</strong> likes</div>
           <div class="x-stat">📊 <strong>89K</strong> views</div>
         </div>
-        
+
       </div>
       <div class="card-footer">Validates the Acme pilot positioning — auditability and rollback over autonomy is exactly what you're betting on.</div>
     </article>
-    
-    
+
+
     <article class="card x">
       <div class="card-header">
         <div class="card-source">X</div>
-        
+
         <div class="card-title">Nadia Okonkwo <span class="x-handle-h">nadiaoko</span></div>
         <div class="card-meta">6h ago</div>
-        
+
       </div>
       <div class="card-body">
-        
+
         <div class="x-text">we just open-sourced an eval framework for agentic workflows — regression thresholds, latency budgets, rollback traces, all configurable. 2k stars in 6 hours. link in reply 👇
 
 the best part: it plugs into CI with 3 lines of yaml. no vendor lock-in. no managed service upsell. just the harness.</div>
@@ -369,22 +369,22 @@ the best part: it plugs into CI with 3 lines of yaml. no vendor lock-in. no mana
           <div class="x-stat">❤️ <strong>7.3K</strong> likes</div>
           <div class="x-stat">📊 <strong>120K</strong> views</div>
         </div>
-        
+
       </div>
       <div class="card-footer">This is likely the same framework that showed up as HN #1 today — worth evaluating for the Priya eval ownership discussion.</div>
     </article>
-    
-    
+
+
     <article class="card hn">
       <div class="card-header">
         <div class="card-source">Hacker News</div>
-        
+
         <a class="card-title" href="https://news.ycombinator.com/item?id=42900721" target="_blank" rel="noopener">How we cut our LLM inference latency by 60% with streaming + speculative decoding</a>
         <div class="card-meta">eng.blog</div>
-        
+
       </div>
       <div class="card-body">
-        
+
         <p class="hn-subhead">Engineering deep-dive on reducing p99 latency for agentic workloads using speculative decoding and chunked streaming, with benchmark code included. Covers tradeoffs between accuracy loss and latency gains across three model families.</p>
         <div class="hn-stats">
           <span class="hn-stat">▲ <strong>176</strong> points</span>
@@ -392,57 +392,57 @@ the best part: it plugs into CI with 3 lines of yaml. no vendor lock-in. no mana
           <a class="hn-discussion" href="https://news.ycombinator.com/item?id=42900721" target="_blank" rel="noopener">view discussion →</a>
         </div>
         <div class="hn-tags">
-          
+
           <span class="hn-tag">latency</span>
-          
+
           <span class="hn-tag">inference</span>
-          
+
           <span class="hn-tag">engineering</span>
-          
+
         </div>
-        
+
       </div>
       <div class="card-footer">The latency issues that came up in the Product Reliability Sync could benefit from this approach.</div>
     </article>
-    
-    
+
+
     <article class="card tm">
       <div class="card-header">
         <div class="card-source">TechMeme</div>
-        
+
         <a class="card-title" href="https://techmeme.com/clip" target="_blank" rel="noopener">Mistral releases Mixtral 12B with Apache 2.0 license; benchmarks show parity with leading hosted mini models on tool-use at 1/8 the cost</a>
         <div class="card-meta">TechCrunch · 8h ago</div>
-        
+
       </div>
       <div class="card-body">
-        
+
         <p class="tm-excerpt">French AI lab Mistral published Mixtral 12B under Apache 2.0, with a Mixture-of-Experts architecture active at 4B parameters per token. Independent benchmarks on the AgentBench-2.0 agentic suite score it at parity with leading hosted mini models while running at roughly $0.30/M input tokens on self-hosted A100s.</p>
         <div class="tm-related">
           <span class="tm-related-label">More:</span>
-          
+
           <a href="#" target="_blank">The Register</a><span class="tm-related-sep">/</span>
-          
+
           <a href="#" target="_blank">VentureBeat</a><span class="tm-related-sep">/</span>
-          
+
           <a href="#" target="_blank">Hacker News (298↑)</a>
-          
+
         </div>
-        
+
       </div>
       <div class="card-footer">Apache 2.0 with tool-use parity is worth a spike — could reduce per-workflow inference cost for the Acme pilot significantly.</div>
     </article>
-    
-    
+
+
     <article class="card hn">
       <div class="card-header">
         <div class="card-source">Hacker News</div>
-        
+
         <a class="card-title" href="https://news.ycombinator.com/item?id=42900555" target="_blank" rel="noopener">Seed funding landscape Q3 2026: AI rounds are closing faster but valuations are flattening</a>
         <div class="card-meta">pitchbook.com</div>
-        
+
       </div>
       <div class="card-body">
-        
+
         <p class="hn-subhead">Analysis of 120 seed rounds shows AI startups are raising 2-3x faster than last year, but median valuations have plateaued as investors demand more proof of revenue. The median time-to-close dropped from 8 weeks to 3 weeks.</p>
         <div class="hn-stats">
           <span class="hn-stat">▲ <strong>256</strong> points</span>
@@ -450,30 +450,30 @@ the best part: it plugs into CI with 3 lines of yaml. no vendor lock-in. no mana
           <a class="hn-discussion" href="https://news.ycombinator.com/item?id=42900555" target="_blank" rel="noopener">view discussion →</a>
         </div>
         <div class="hn-tags">
-          
+
           <span class="hn-tag">fundraising</span>
-          
+
           <span class="hn-tag">seed</span>
-          
+
           <span class="hn-tag">valuation</span>
-          
+
         </div>
-        
+
       </div>
       <div class="card-footer">Relevant to your investor update with Jake — sets context for what investors are seeing across the market right now.</div>
     </article>
-    
-    
+
+
     <article class="card x">
       <div class="card-header">
         <div class="card-source">X</div>
-        
+
         <div class="card-title">Lena Park <span class="x-handle-h">lenapark</span></div>
         <div class="card-meta">14h ago</div>
-        
+
       </div>
       <div class="card-body">
-        
+
         <div class="x-text">hot take: the "eval harness" conversation is the most important infra convo in AI right now.
 
 if you can't define what "good enough" means, you can't ship reliably, and if you can't ship reliably, enterprise won't buy.
@@ -485,11 +485,11 @@ it's not a QA problem, it's a go-to-market problem.</div>
           <div class="x-stat">❤️ <strong>3.4K</strong> likes</div>
           <div class="x-stat">📊 <strong>54K</strong> views</div>
         </div>
-        
+
       </div>
       <div class="card-footer">Directly relevant to the eval harness ownership decision you're discussing with Priya today.</div>
     </article>
-    
+
   </div>
 </main>
 </body>

package/dist/onboarding/tv-guide/welcome.html

@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Welcome to Television</title>
+<link rel="stylesheet" href="/canonical/v2/styles.css">
+<script type="module" src="/canonical/v2/components.js"></script>
+<style>
+html {
+  min-height: 100%;
+  background: var(--color-surface);
+  overscroll-behavior: none;
+}
+
+body {
+  margin: 0;
+  padding: var(--space-48);
+  min-height: 100%;
+  box-sizing: border-box;
+  background: transparent;
+}
+
+tv-icon {
+  position: relative;
+  top: 1px;
+  color: var(--color-text-muted);
+}
+
+.logo {
+  width: 22px;
+  height: 22px;
+  margin-left: 2px;
+  margin-right: -2px;
+  vertical-align: -3px;
+}
+
+h1 {
+  margin-bottom: var(--space-10);
+  font-size: var(--text-3xl);
+}
+
+.lede {
+  margin-bottom: 18px;
+  color: var(--color-text-muted);
+}
+
+.prompts {
+  position: relative;
+  max-width: 460px;
+  height: 220px;
+  margin: var(--space-24) auto;
+}
+
+.prompt {
+  position: absolute;
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr);
+  gap: var(--space-8);
+  align-items: flex-start;
+  width: 238px;
+  min-height: 104px;
+  margin: 0;
+  padding: 14px;
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  background: var(--color-surface-muted);
+  box-shadow: var(--shadow-md);
+  color: color-mix(in srgb, var(--color-text) 82%, var(--color-text-muted));
+  font-size: 13.5px;
+}
+
+.prompt svg {
+  width: 22px;
+  height: 22px;
+  color: var(--color-primary);
+}
+
+.prompt svg.weather-icon { color: var(--yellow-500); }
+.prompt svg.todo-icon { color: var(--color-success); }
+.prompt svg.food-icon { color: var(--color-danger); }
+
+.prompt:nth-child(1) {
+  left: -48px;
+  top: 0;
+  width: 298px;
+  transform: rotate(-4deg);
+}
+
+.prompt:nth-child(2) {
+  right: -52px;
+  top: 40px;
+  min-height: 78px;
+  transform: rotate(5deg);
+}
+
+.prompt:nth-child(3) {
+  left: 74px;
+  top: 106px;
+  width: 310px;
+  transform: rotate(2deg);
+}
+
+.callout {
+  margin-top: 28px;
+  padding: var(--space-12) 14px;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  background: var(--color-surface-muted);
+}
+
+.callout h2 {
+  display: flex;
+  gap: var(--space-6);
+  align-items: center;
+  margin-top: 0;
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.callout-icon {
+  width: var(--space-16);
+  height: var(--space-16);
+  flex: none;
+}
+
+.callout p { color: var(--color-text); }
+.callout p:last-child { margin-bottom: 0; }
+
+@media (max-width: 560px) {
+  .prompts {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: auto;
+    gap: var(--space-8);
+  }
+
+  .prompt,
+  .prompt:nth-child(1),
+  .prompt:nth-child(2),
+  .prompt:nth-child(3) {
+    position: static;
+    width: min(350px, 100%);
+    min-height: 0;
+    transform: none !important;
+  }
+}
+
+</style>
+</head>
+<body>
+<main text-display="prose">
+  <h1>Your <svg class="logo" viewBox="0 0 55 55" aria-hidden="true"><defs><linearGradient id="tv-logo-shell" x1="27.5" y1="1.45" x2="27.5" y2="53.55" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="1" stop-color="#262626"/></linearGradient><clipPath id="tv-logo-screen"><path d="M14.2 7.7h26.6c3.15 0 5.7 2.66 5.7 5.94v27.72c0 3.28-2.55 5.94-5.7 5.94H14.2c-3.15 0-5.7-2.66-5.7-5.94V13.64c0-3.28 2.55-5.94 5.7-5.94Z"/></clipPath></defs><path fill="url(#tv-logo-shell)" d="M12.5 1.45h30c5.47 0 10.48 4.46 10.89 9.98.73 10.7.73 21.44 0 32.13-.41 5.52-5.42 9.98-10.89 9.98h-30c-5.47 0-10.48-4.46-10.89-9.98-.73-10.7-.73-21.44 0-32.13C2.02 5.91 7.03 1.45 12.5 1.45Z"/><g clip-path="url(#tv-logo-screen)"><rect fill="#fff" x="8.5" y="7.7" width="38" height="39.6" rx="5.7"/><path fill="#38c428" d="M27.5 48.78V6.71h-9.98v42.07h9.98Z"/><path fill="#ff01d0" d="M27.5 6.71v42.07h9.97V6.71H27.5Z"/><path fill="#40d2b3" d="M22.75 48.29c-3.8-18.22-1.58-34.98 0-41.08H10.87v41.08c3.96.33 11.88.79 11.88 0Z"/><path fill="#d24043" d="M32.25 7.21c3.8 18.22 1.58 34.98 0 41.08h11.88V7.21c-3.96-.33-11.88-.79-11.88 0Z"/><path fill="#ffcd27" d="M15.62 47.3c-5.7-17.42-2.38-33.66 0-39.6H7.07v39.6s9.03.49 8.55 0Z"/><path fill="#0015ff" d="M38.92 6.93c5.69 17.76 2.37 34.31 0 40.36h8.53V6.93s-9.01-.5-8.53 0Z"/></g><path fill="none" stroke="#fff" stroke-width="3" d="M14.2 8.74h26.6c2.56 0 5.25 2.06 5.8 4.64 1.89 9.31 1.89 18.91 0 28.23-.55 2.58-3.25 4.64-5.8 4.64H14.2c-2.56 0-5.25-2.06-5.8-4.64-1.89-9.31-1.89-18.91 0-28.23.55-2.58 3.25-4.64 5.8-4.64Z"/></svg> Television is on!</h1>
+
+  <p class="lede">Television is the missing GUI for your personal agent, created by the team at Telepath. We’re glad you’re here.</p>
+  <p>Your TV is organized into <strong>Channels</strong>, which are listed in the sidebar. We put you on "TV Guide" to start. Click <tv-icon name="expand"></tv-icon> to rename a channel or pin it to the top. Use <tv-icon name="add"></tv-icon> to add a new channel.</p>
+  <p>Channels hold <tv-icon name="artifact"></tv-icon> <strong>Artifacts</strong>, like this one. They're live surfaces your agent can create, edit, and update. Artifacts can be notes, editable documents, dashboards, web pages, reports, or custom web apps. Each artifact has a button at the top of the screen; click these buttons to navigate, or double-click to zoom. (You can also navigate with Option + arrow on macOS or Ctrl + arrow on Windows and Linux.)</p>
+  <p>To create or change an artifact, simply tell your agent what you want to see! Click <tv-icon name="skills"></tv-icon> to view some of the artifacts that TV supports. Or try asking your agent…</p>
+
+  <div class="prompts">
+    <p class="prompt"><svg class="weather-icon" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M139.84 84.41a68.22 68.22 0 0 0-41.65 46 44.08 44.08 0 0 0-38.54 5 48 48 0 1 1 80.19-50.94Z" opacity=".2"/><path d="M164 72a76.2 76.2 0 0 0-20.26 2.73A55.63 55.63 0 0 0 134.33 63l9.51-13.57a8 8 0 1 0-13.11-9.18L121.22 54A55.9 55.9 0 0 0 96 48l-1.74.03-2.89-16.32a8 8 0 1 0-15.75 2.77l2.88 16.34A56.1 56.1 0 0 0 55.23 65.67l-13.62-9.53a8 8 0 1 0-9.17 13.11L46 78.77A55.55 55.55 0 0 0 40 104l.03 1.72-16.32 2.88a8 8 0 0 0 2.77 15.76l16.32-2.88a55.74 55.74 0 0 0 5.86 12.42A52 52 0 0 0 84 224h80a76 76 0 0 0 0-152ZM56 104a40 40 0 0 1 72.54-23.24 76.26 76.26 0 0 0-35.62 40 52.14 52.14 0 0 0-31 4.17A40 40 0 0 1 56 104Zm108 104H84a36 36 0 1 1 4.78-71.69c-.37 2.37-.63 4.79-.77 7.23a8 8 0 0 0 16 .92 58.91 58.91 0 0 1 1.88-11.81l.12-.48A60.06 60.06 0 1 1 164 208Z"/></svg><span>What’s the 3-day weather forecast for New York City? Include a nice icon for each day’s weather. Update it twice a day.</span></p>
+    <p class="prompt"><svg class="todo-icon" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216 48v160a8 8 0 0 1-8 8H48a8 8 0 0 1-8-8V48a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8Z" opacity=".2"/><path d="M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0ZM224 48v160a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16Zm-16 160V48H48v160h160Z"/></svg><span>Open my to-do list from my Obsidian vault.</span></p>
+    <p class="prompt"><svg class="food-icon" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208 40v128h-56S152 64 208 40Z" opacity=".2"/><path d="M72 88V40a8 8 0 0 1 16 0v48a8 8 0 0 1-16 0Zm144-48v184a8 8 0 0 1-16 0v-48h-48a8 8 0 0 1-8-8 268.75 268.75 0 0 1 7.22-56.88c9.78-40.49 28.32-67.63 53.63-78.47A8 8 0 0 1 216 40Zm-16 13.9c-32.17 24.57-38.47 84.42-39.7 106.1H200V53.9Zm-80.11-15.21a8 8 0 1 0-15.78 2.63L112 88.63a32 32 0 0 1-64 0l7.88-47.31a8 8 0 1 0-15.78-2.63l-8 48A8.17 8.17 0 0 0 32 88a48.07 48.07 0 0 0 40 47.32V224a8 8 0 0 0 16 0v-88.68A48.07 48.07 0 0 0 128 88a8.17 8.17 0 0 0-.11-1.31Z"/></svg><span>Research the best Thai restaurants in San Francisco and give me a report on the top three. Include photos.</span></p>
+  </div>
+
+  <p>Your agent will usually know when to answer by creating an artifact. If it replies in chat instead, just say: “put that on my TV.”</p>
+
+  <section class="callout">
+    <h2><svg class="callout-icon" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208 104a79.86 79.86 0 0 1-30.59 62.92A24.29 24.29 0 0 0 168 186v6a8 8 0 0 1-8 8H96a8 8 0 0 1-8-8v-6a24.11 24.11 0 0 0-9.3-19A79.87 79.87 0 0 1 48 104.45C47.76 61.09 82.72 25 126.07 24A80 80 0 0 1 208 104Z" opacity=".2"/><path d="M176 232a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8Zm40-128a87.55 87.55 0 0 1-33.64 69.21A16.24 16.24 0 0 0 176 186v6a16 16 0 0 1-16 16H96a16 16 0 0 1-16-16v-6a16 16 0 0 0-6.23-12.66A87.59 87.59 0 0 1 40 104.49C39.74 56.83 78.26 17.14 125.88 16A88 88 0 0 1 216 104Zm-16 0a72 72 0 0 0-73.74-72C87.26 32.92 55.79 65.39 56 104.39a71.65 71.65 0 0 0 27.64 56.3A32 32 0 0 1 96 186v6h64v-6a32.15 32.15 0 0 1 12.47-25.35A71.65 71.65 0 0 0 200 104Zm-16.11-9.34a57.6 57.6 0 0 0-46.56-46.55 8 8 0 0 0-2.66 15.78c16.57 2.79 30.63 16.85 33.44 33.45A8 8 0 0 0 176 104a9 9 0 0 0 1.35-.11 8 8 0 0 0 6.54-9.23Z"/></svg>More examples</h2>
+    <p>See the other channels for more examples of how to use Television. (You can delete these channels whenever you like; they're just there to give you ideas!)</p>
+  </section>
+</main>
+</body>
+</html>