@telepath-computer/television 0.1.216 → 1.3.3

package/dist/onboarding/productivity/company-todos/task.css

@@ -40,7 +40,7 @@ tv-task-body {
 
 tv-task-title {
   display: block;
-  font-weight: var(--font-weight-body);
+  font-weight: var(--font-weight-normal);
   line-height: 1.35;
 }
 /* Completed — tracks the checkbox's reflected host attribute live, not a
@@ -100,7 +100,7 @@ tv-task-meta-tag {
   padding: 0 5px;
   padding-bottom: 1px;
   border-radius: 6px;
-  background: var(--color-bg-muted);
+  background: var(--color-surface-muted);
   color: var(--task-meta-text);
   font-size: var(--text-sm);
   line-height: 1.5;
@@ -168,7 +168,7 @@ tv-task-section > header h2 {
 tv-task-count {
   color: var(--task-meta-text);
   font-size: var(--text-sm);
-  font-weight: var(--font-weight-body);
+  font-weight: var(--font-weight-normal);
 }
 
 /* Empty state — shown when a section or list has no tasks. */
@@ -191,9 +191,8 @@ tv-task[highlighted] {
    The canonical theme is light-only, so the skill carries its own dark token
    set, applied when the document has data-theme="dark". */
 [data-theme="dark"] {
-  --color-bg: var(--neutral-950);
-  --color-bg-muted: var(--neutral-900);
   --color-surface: var(--neutral-800);
+  --color-surface-muted: var(--neutral-900);
   --color-text: var(--neutral-50);
   --color-text-muted: var(--neutral-400);
   /* Re-derive: custom properties resolve where declared, so without this the

package/dist/onboarding/productivity/company-todos/task.js

@@ -178,7 +178,7 @@ const CHECKBOX_STYLES = `
   }
   input:active ~ .mark { transform: scale(0.9); }
   input:focus-visible ~ .mark {
-    outline: 2px solid var(--color-focus-ring);
+    outline: 2px solid var(--color-primary);
     outline-offset: 2px;
   }
 

package/dist/onboarding/productivity/meeting-prep.html

@@ -4,8 +4,8 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Meeting prep</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
@@ -96,7 +96,7 @@ header.hero h1 {
 .panel {
   padding: var(--space-20, 20px);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-12, 12px);
+  border-radius: 12px;
   background: var(--color-surface);
 }
 
@@ -114,8 +114,8 @@ header.hero h1 {
 
 .summary-box {
   padding: var(--space-16, 16px) var(--space-20, 20px);
-  border: 1px solid var(--color-border-muted);
-  border-radius: var(--radius-12, 12px);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
   background: var(--color-surface-muted);
 }
 
@@ -161,7 +161,7 @@ header.hero h1 {
   gap: var(--space-4, 4px);
   padding: 2px var(--space-10, 10px);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-full, 9999px);
+  border-radius: var(--radius-pill, 9999px);
   background: var(--color-surface);
   color: var(--color-text-muted);
   font-size: var(--text-sm, 12px);
@@ -176,11 +176,11 @@ header.hero h1 {
 .pill.dim    { color: var(--neutral-500); border-color: var(--neutral-200); background: var(--neutral-100); }
 
 
-/* Meeting prep ([[index.md]]): artifact-specific styling. Kept low on
+/* Meeting prep ([[../index.md]]): artifact-specific styling. Kept low on
    borders to match Priorities and Open model research — the panels are the
    shared borderless .section, references and the person block carry no box,
    and the option cards are held by an accent rule rather than a card. The
-   section, section-title, and pill idioms come from shared/. */
+   section, section-title, and pill styles are defined above. */
 
 .shell {
   max-width: 880px;
@@ -207,7 +207,7 @@ header.hero h1 {
   gap: var(--space-16, 16px);
   padding: var(--space-16, 16px);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-12, 12px);
+  border-radius: 12px;
 }
 
 .avatar {
@@ -216,8 +216,8 @@ header.hero h1 {
   flex-shrink: 0;
   display: grid;
   place-items: center;
-  border-radius: var(--radius-12, 12px);
-  color: var(--white);
+  border-radius: 12px;
+  color: white;
   background: var(--purple-500);
   font-size: var(--text-lg, 15px);
   font-weight: 700;
@@ -290,7 +290,7 @@ header.hero h1 {
 .ref-item {
   padding: var(--space-12, 12px) var(--space-16, 16px);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-12, 12px);
+  border-radius: 12px;
 }
 
 .ref-head {

package/dist/onboarding/productivity/priorities-today.html

@@ -4,8 +4,8 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Priorities for Today</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
@@ -96,7 +96,7 @@ header.hero h1 {
 .panel {
   padding: var(--space-20, 20px);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-12, 12px);
+  border-radius: 12px;
   background: var(--color-surface);
 }
 
@@ -114,8 +114,8 @@ header.hero h1 {
 
 .summary-box {
   padding: var(--space-16, 16px) var(--space-20, 20px);
-  border: 1px solid var(--color-border-muted);
-  border-radius: var(--radius-12, 12px);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
   background: var(--color-surface-muted);
 }
 
@@ -161,7 +161,7 @@ header.hero h1 {
   gap: var(--space-4, 4px);
   padding: 2px var(--space-10, 10px);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-full, 9999px);
+  border-radius: var(--radius-pill, 9999px);
   background: var(--color-surface);
   color: var(--color-text-muted);
   font-size: var(--text-sm, 12px);
@@ -176,12 +176,12 @@ header.hero h1 {
 .pill.dim    { color: var(--neutral-500); border-color: var(--neutral-200); background: var(--neutral-100); }
 
 
-/* Priorities for Today ([[index.md]]): artifact-specific styling only —
+/* Priorities for Today ([[../index.md]]): artifact-specific styling only —
    the ranked-priority and deferred stacks. Kept low on borders: the summary
    is a shared .summary-deck lead, sections are the shared borderless
    .section, priorities are carried by their inline rank number, and deferred
    tasks are a hairline-separated list. The deck, section, section-title, and
-   pill idioms come from shared/. */
+   pill styles are defined above. */
 
 .shell {
   max-width: 920px;
@@ -212,7 +212,7 @@ header.hero h1 {
   height: 18px;
   margin-top: 1px;
   border: 1.5px solid var(--color-border);
-  border-radius: var(--radius-6, 6px);
+  border-radius: 6px;
   background: var(--color-surface);
 }
 
@@ -264,7 +264,7 @@ header.hero h1 {
   gap: var(--space-10, 10px);
   align-items: start;
   padding: var(--space-12, 12px) 0;
-  border-top: 1px solid var(--color-border-muted);
+  border-top: 1px solid var(--color-border);
 }
 
 .deferred-item:first-child {

package/dist/onboarding/productivity/todays-calendar/calendar.css

@@ -1 +1 @@
-calendar-event{display:contents}calendar-event .event-block{pointer-events:none;z-index:2}calendar-event .event-block-inner{background:var(--event-bg-timed, var(--neutral-100));border-left:3px solid var(--event-border-color, var(--neutral-300));border-radius:4px;box-shadow:inset 0 0 0 .5px var(--neutral-200)}calendar-grid calendar-event .event-block{grid-column:calc(var(--day-index) + 1);grid-row:1 / -1;position:relative;z-index:0}calendar-grid calendar-event .event-block-inner{position:absolute;top:calc(var(--y-start) * 100%);height:calc((var(--y-end) - var(--y-start)) * 100%);left:calc(2px + var(--cascade-depth, 0) * 6px);right:2px;padding:var(--space-4) var(--space-8);overflow:hidden;pointer-events:auto;z-index:calc(1 + var(--cascade-depth, 0))}calendar-allday calendar-event .event-block{grid-column:calc(var(--day-start) + 1) / span var(--day-span);grid-row:var(--lane-index);padding:2px}calendar-allday calendar-event .event-block-inner{background:var(--event-bg-all-day, var(--event-bg-timed, var(--neutral-100)));border-left:var( --event-all-day-border, 3px solid var(--event-border-color, var(--neutral-300)) );padding:1px var(--space-8);display:flex;align-items:center;pointer-events:auto}calendar-event[color=red]{--event-bg-timed: var(--red-100);--event-bg-all-day: var(--red-200);--event-border-color: var(--red-500);--event-all-day-border: none}calendar-event[color=orange]{--event-bg-timed: var(--orange-100);--event-bg-all-day: var(--orange-200);--event-border-color: var(--orange-500);--event-all-day-border: none}calendar-event[color=yellow]{--event-bg-timed: var(--yellow-100);--event-bg-all-day: var(--yellow-200);--event-border-color: var(--yellow-500);--event-all-day-border: none}calendar-event[color=green]{--event-bg-timed: var(--green-100);--event-bg-all-day: var(--green-200);--event-border-color: var(--green-500);--event-all-day-border: none}calendar-event[color=blue]{--event-bg-timed: var(--blue-100);--event-bg-all-day: var(--blue-200);--event-border-color: var(--blue-500);--event-all-day-border: none}calendar-event[color=purple]{--event-bg-timed: var(--purple-100);--event-bg-all-day: var(--purple-200);--event-border-color: var(--purple-500);--event-all-day-border: none}calendar-event h3{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}calendar-time-axis{display:contents}calendar-time-axis .hour-label{grid-column:time-left / days-start;grid-row-start:calc(var(--hour-index) + 1);align-self:start;padding:var(--space-2) var(--space-8);font-size:round(calc(var(--text-sm) / var(--text-scale)),1px);color:var(--color-text-muted);text-align:right;white-space:nowrap;transform:translateY(-50%)}calendar-time-axis .hour-label[data-hour="0"]{visibility:hidden;width:0;height:0;padding:0;overflow:hidden}calendar-week{display:grid;grid-template-columns:[time-left] auto [days-start] repeat(var(--day-count, 0),minmax(0,1fr)) [days-end];grid-template-rows:[headers] auto [allday] auto [hours-start] repeat(var(--hour-count, 0),minmax(var(--hour-min-height, 4rem),1fr)) [hours-end];width:100%;height:100%;overflow:auto;background:var(--color-surface);font-family:inherit;color:var(--color-text)}calendar-week>calendar-headers,calendar-week>calendar-allday,calendar-week>calendar-grid{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;min-width:0}calendar-week>calendar-headers{grid-row:headers / allday;position:sticky;top:0;z-index:3;background:var(--color-surface);border-top:.5px solid var(--color-border);border-bottom:1px solid var(--color-border)}calendar-headers>calendar-day{grid-column:calc(var(--day-index) + 1);display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-12);font-size:var(--text-sm);border-left:.5px solid var(--color-border-muted)}calendar-headers>calendar-day:last-of-type{border-right:.5px solid var(--color-border-muted)}calendar-headers>calendar-day .weekday{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted)}calendar-headers>calendar-day .date-num{color:var(--color-text)}calendar-week>calendar-allday{grid-row:allday / hours-start;grid-template-rows:repeat(var(--allday-lane-count, 1),auto);position:sticky;top:var(--headers-height, 0px);z-index:2;border-bottom:1px solid var(--color-border);background:var(--color-surface)}calendar-allday>calendar-cell{grid-column:calc(var(--day-index) + 1);grid-row:1;border-left:.5px solid var(--color-border-muted)}calendar-allday>calendar-cell:last-of-type{border-right:.5px solid var(--color-border-muted)}calendar-week>calendar-grid{grid-row:hours-start / hours-end;grid-template-rows:subgrid;position:relative}calendar-grid>calendar-column{grid-column:calc(var(--day-index) + 1);grid-row:1 / -1;border-left:.5px solid var(--color-border-muted);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(100% / var(--hour-count) - .5px),var(--color-border-muted) calc(100% / var(--hour-count) - .5px),var(--color-border-muted) calc(100% / var(--hour-count)))}calendar-grid>calendar-column:last-of-type{border-right:.5px solid var(--color-border-muted)}calendar-grid>.start-hour-marker{grid-column:2;grid-row-start:calc(var(--start-hour) + 1);width:0;height:0}calendar-grid>.now-line-faint,calendar-grid>.now-line{grid-row:1 / -1;position:relative;pointer-events:none;z-index:1}calendar-grid>.now-line-faint{grid-column:2 / -1}calendar-grid>.now-line{grid-column:calc(var(--day-index) + 1)}calendar-grid>.now-line-faint:before,calendar-grid>.now-line:before{content:"";position:absolute;left:0;right:0;top:calc(var(--y-fraction) * 100%);height:1px;transform:translateY(-.5px)}calendar-grid>.now-line-faint:before{background:#e7202240}calendar-grid>.now-line:before{background:#e72022}calendar-grid>.now-line:after{content:"";position:absolute;left:0;top:calc(var(--y-fraction) * 100%);width:.5rem;height:.5rem;border-radius:50%;background:#e72022;transform:translate(-50%,-50%)}
+calendar-event{display:contents}calendar-event .event-block{pointer-events:none;z-index:2}calendar-event .event-block-inner{background:var(--event-bg-timed, var(--neutral-100));border-left:3px solid var(--event-border-color, var(--neutral-300));border-radius:4px;box-shadow:inset 0 0 0 .5px var(--neutral-200)}calendar-grid calendar-event .event-block{grid-column:calc(var(--day-index) + 1);grid-row:1 / -1;position:relative;z-index:0}calendar-grid calendar-event .event-block-inner{position:absolute;top:calc(var(--y-start) * 100%);height:calc((var(--y-end) - var(--y-start)) * 100%);left:calc(2px + var(--cascade-depth, 0) * 6px);right:2px;padding:var(--space-4) var(--space-8);overflow:hidden;pointer-events:auto;z-index:calc(1 + var(--cascade-depth, 0))}calendar-allday calendar-event .event-block{grid-column:calc(var(--day-start) + 1) / span var(--day-span);grid-row:var(--lane-index);padding:2px}calendar-allday calendar-event .event-block-inner{background:var(--event-bg-all-day, var(--event-bg-timed, var(--neutral-100)));border-left:var( --event-all-day-border, 3px solid var(--event-border-color, var(--neutral-300)) );padding:1px var(--space-8);display:flex;align-items:center;pointer-events:auto}calendar-event[color=red]{--event-bg-timed: var(--red-100);--event-bg-all-day: var(--red-200);--event-border-color: var(--red-500);--event-all-day-border: none}calendar-event[color=orange]{--event-bg-timed: var(--orange-100);--event-bg-all-day: var(--orange-200);--event-border-color: var(--orange-500);--event-all-day-border: none}calendar-event[color=yellow]{--event-bg-timed: var(--yellow-100);--event-bg-all-day: var(--yellow-200);--event-border-color: var(--yellow-500);--event-all-day-border: none}calendar-event[color=green]{--event-bg-timed: var(--green-100);--event-bg-all-day: var(--green-200);--event-border-color: var(--green-500);--event-all-day-border: none}calendar-event[color=blue]{--event-bg-timed: var(--blue-100);--event-bg-all-day: var(--blue-200);--event-border-color: var(--blue-500);--event-all-day-border: none}calendar-event[color=purple]{--event-bg-timed: var(--purple-100);--event-bg-all-day: var(--purple-200);--event-border-color: var(--purple-500);--event-all-day-border: none}calendar-event h3{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--neutral-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}calendar-time-axis{display:contents}calendar-time-axis .hour-label{grid-column:time-left / days-start;grid-row-start:calc(var(--hour-index) + 1);align-self:start;padding:var(--space-2) var(--space-8);font-size:round(calc(var(--text-base) * 10 / 14),1px);color:var(--color-text-muted);text-align:right;white-space:nowrap;transform:translateY(-50%)}calendar-time-axis .hour-label[data-hour="0"]{visibility:hidden;width:0;height:0;padding:0;overflow:hidden}calendar-week{display:grid;grid-template-columns:[time-left] auto [days-start] repeat(var(--day-count, 0),minmax(0,1fr)) [days-end];grid-template-rows:[headers] auto [allday] auto [hours-start] repeat(var(--hour-count, 0),minmax(var(--hour-min-height, 4rem),1fr)) [hours-end];width:100%;height:100%;overflow:auto;background:var(--color-surface);font-family:inherit;color:var(--color-text)}calendar-week>calendar-headers,calendar-week>calendar-allday,calendar-week>calendar-grid{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;min-width:0}calendar-week>calendar-headers{grid-row:headers / allday;position:sticky;top:0;z-index:3;background:var(--color-surface);border-top:.5px solid var(--color-border);border-bottom:1px solid var(--color-border)}calendar-headers>calendar-day{grid-column:calc(var(--day-index) + 1);display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-12);font-size:var(--text-sm);border-left:.5px solid var(--color-border)}calendar-headers>calendar-day:last-of-type{border-right:.5px solid var(--color-border)}calendar-headers>calendar-day .weekday{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted)}calendar-headers>calendar-day .date-num{color:var(--color-text)}calendar-week>calendar-allday{grid-row:allday / hours-start;grid-template-rows:repeat(var(--allday-lane-count, 1),auto);position:sticky;top:var(--headers-height, 0px);z-index:2;border-bottom:1px solid var(--color-border);background:var(--color-surface)}calendar-allday>calendar-cell{grid-column:calc(var(--day-index) + 1);grid-row:1;border-left:.5px solid var(--color-border)}calendar-allday>calendar-cell:last-of-type{border-right:.5px solid var(--color-border)}calendar-week>calendar-grid{grid-row:hours-start / hours-end;grid-template-rows:subgrid;position:relative}calendar-grid>calendar-column{grid-column:calc(var(--day-index) + 1);grid-row:1 / -1;border-left:.5px solid var(--color-border);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(100% / var(--hour-count) - .5px),var(--color-border) calc(100% / var(--hour-count) - .5px),var(--color-border) calc(100% / var(--hour-count)))}calendar-grid>calendar-column:last-of-type{border-right:.5px solid var(--color-border)}calendar-grid>.start-hour-marker{grid-column:2;grid-row-start:calc(var(--start-hour) + 1);width:0;height:0}calendar-grid>.now-line-faint,calendar-grid>.now-line{grid-row:1 / -1;position:relative;pointer-events:none;z-index:1}calendar-grid>.now-line-faint{grid-column:2 / -1}calendar-grid>.now-line{grid-column:calc(var(--day-index) + 1)}calendar-grid>.now-line-faint:before,calendar-grid>.now-line:before{content:"";position:absolute;left:0;right:0;top:calc(var(--y-fraction) * 100%);height:1px;transform:translateY(-.5px)}calendar-grid>.now-line-faint:before{background:#e7202240}calendar-grid>.now-line:before{background:#e72022}calendar-grid>.now-line:after{content:"";position:absolute;left:0;top:calc(var(--y-fraction) * 100%);width:.5rem;height:.5rem;border-radius:50%;background:#e72022;transform:translate(-50%,-50%)}

package/dist/onboarding/productivity/todays-calendar/index.html

@@ -4,15 +4,13 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today&#39;s Calendar</title>
-<link rel="stylesheet" href="/canonical/v1/styles.css">
+<link rel="stylesheet" href="/canonical/v2/styles.css">
 <link rel="stylesheet" href="./calendar.css">
 <script type="module" src="./calendar.js"></script>
 <style>
-/* Today's Calendar ([[index.md]]): deliberate full-bleed rules only. This
-   artifact does not import shared/base — the calendar fills the card edge
-   to edge instead of sitting in the padded content shell. The calendar's
-   appearance comes from calendar.css in the bundled tv-calendar skill; the
-   design story loads that stylesheet beside the artifact document. */
+/* Today's Calendar ([[../index.md]]) fills the card edge to edge.
+   The tv-calendar skill supplies its appearance: the workshop loads source
+   components, and the bake links built assets. */
 
 html,
 body {
@@ -28,21 +26,21 @@ calendar-week {
 </head>
 <body>
 <calendar-week start-date="2026-07-08" days="1" start-hour="8">
-  
+
   <calendar-event title="Daily Standup" start="2026-07-08T09:00" end="2026-07-08T09:15" color="blue"></calendar-event>
-  
+
   <calendar-event title="Product Reliability Sync" start="2026-07-08T09:30" end="2026-07-08T10:00" color="green"></calendar-event>
-  
+
   <calendar-event title="NeonBank Champion Follow-up" start="2026-07-08T11:00" end="2026-07-08T11:30" color="blue"></calendar-event>
-  
+
   <calendar-event title="1:1 with Priya" start="2026-07-08T12:00" end="2026-07-08T12:30" color="purple"></calendar-event>
-  
+
   <calendar-event title="Issue Bash" start="2026-07-08T13:00" end="2026-07-08T14:00" color="orange"></calendar-event>
-  
+
   <calendar-event title="Acme AI CTO Call" start="2026-07-08T14:30" end="2026-07-08T15:00" color="orange"></calendar-event>
-  
+
   <calendar-event title="Seed Update Draft Review" start="2026-07-08T16:00" end="2026-07-08T16:30" color="yellow"></calendar-event>
-  
+
 </calendar-week>
 </body>
 </html>

package/dist/onboarding/research/about.html

@@ -4,8 +4,8 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>About this channel</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
@@ -64,6 +64,7 @@ header > .summary-deck {
    light and vanish on the yellow in a dark theme ([[../index.md#^about-cards]]). */
 body {
   background: var(--yellow-100);
+  color: var(--neutral-900);
 }
 
 .lede {
@@ -94,7 +95,7 @@ body {
   position: absolute;
   inset: 0 auto 0 0;
   width: 3px;
-  border-radius: var(--radius-full, 9999px);
+  border-radius: var(--radius-pill, 9999px);
   background: var(--yellow-700);
 }
 

package/dist/onboarding/research/open-model-research.html

@@ -4,8 +4,8 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Open model research</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
@@ -96,7 +96,7 @@ header.hero h1 {
 .panel {
   padding: var(--space-20, 20px);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-12, 12px);
+  border-radius: 12px;
   background: var(--color-surface);
 }
 
@@ -114,8 +114,8 @@ header.hero h1 {
 
 .summary-box {
   padding: var(--space-16, 16px) var(--space-20, 20px);
-  border: 1px solid var(--color-border-muted);
-  border-radius: var(--radius-12, 12px);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
   background: var(--color-surface-muted);
 }
 
@@ -161,7 +161,7 @@ header.hero h1 {
   gap: var(--space-4, 4px);
   padding: 2px var(--space-10, 10px);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-full, 9999px);
+  border-radius: var(--radius-pill, 9999px);
   background: var(--color-surface);
   color: var(--color-text-muted);
   font-size: var(--text-sm, 12px);
@@ -218,7 +218,7 @@ header.hero h1 {
 
 .table-wrap tbody td {
   padding: var(--space-10, 10px) var(--space-12, 12px);
-  border-bottom: 1px solid var(--color-border-muted);
+  border-bottom: 1px solid var(--color-border);
   white-space: nowrap;
 }
 
@@ -236,12 +236,12 @@ header.hero h1 {
 }
 
 
-/* Artifact-specific styling for Open model research ([[index.md]]): the
+/* Artifact-specific styling for Open model research ([[../index.md]]): the
    wider shell, the horizontal bar chart, and a couple of table-cell
    tweaks. The hero, summary box, panel, pills, and comparison table come
    from the shared idioms; bar and legend colors are canonical ramp tokens
    applied through tier classes, so the artifact never redefines the theme
-   chrome tokens ([[../../index.md#^respect-theme]]). */
+   chrome tokens ([[../index.md#^respect-theme]]). */
 
 .shell {
   max-width: 860px;
@@ -285,12 +285,12 @@ header.hero {
   position: relative;
   height: 24px;
   overflow: hidden;
-  border-radius: var(--radius-4, 4px);
+  border-radius: 4px;
   background: var(--color-surface-muted);
 }
 .bar-fill {
   height: 100%;
-  border-radius: var(--radius-4, 4px);
+  border-radius: 4px;
   transition: width 0.4s ease;
 }
 .bar-value {
@@ -325,7 +325,7 @@ header.hero {
 .legend-dot {
   width: 10px;
   height: 10px;
-  border-radius: var(--radius-4, 4px);
+  border-radius: 4px;
 }
 
 /* Comparison table: the model column reads as a label, not data. */
@@ -363,66 +363,66 @@ header.hero {
     <h2>AgentBench-2.0 scores</h2>
     <p class="note">Composite score across tool-use, reasoning, code execution, and RAG planning tasks · 0–100 scale</p>
     <div class="chart">
-      
+
       <div class="bar-row">
         <div class="bar-label">GLM-4.6-405B</div>
         <div class="bar-track"><div class="bar-fill excellent" style="width: 89%"></div></div>
         <div class="bar-value">89</div>
       </div>
-      
+
       <div class="bar-row">
         <div class="bar-label">Llama-4-70B</div>
         <div class="bar-track"><div class="bar-fill good" style="width: 84%"></div></div>
         <div class="bar-value">84</div>
       </div>
-      
+
       <div class="bar-row">
         <div class="bar-label">Mistral-Large-2</div>
         <div class="bar-track"><div class="bar-fill good" style="width: 79%"></div></div>
         <div class="bar-value">79</div>
       </div>
-      
+
       <div class="bar-row">
         <div class="bar-label">DeepSeek-V3</div>
         <div class="bar-track"><div class="bar-fill good" style="width: 74%"></div></div>
         <div class="bar-value">74</div>
       </div>
-      
+
       <div class="bar-row">
         <div class="bar-label">Qwen-3-72B</div>
         <div class="bar-track"><div class="bar-fill moderate" style="width: 68%"></div></div>
         <div class="bar-value">68</div>
       </div>
-      
+
       <div class="bar-row">
         <div class="bar-label">Gemma-3-27B</div>
         <div class="bar-track"><div class="bar-fill moderate" style="width: 54%"></div></div>
         <div class="bar-value">54</div>
       </div>
-      
+
       <div class="bar-row">
         <div class="bar-label">Phi-4-14B</div>
         <div class="bar-track"><div class="bar-fill limited" style="width: 41%"></div></div>
         <div class="bar-value">41</div>
       </div>
-      
+
       <div class="bar-row">
         <div class="bar-label">Llama-4-8B</div>
         <div class="bar-track"><div class="bar-fill limited" style="width: 33%"></div></div>
         <div class="bar-value">33</div>
       </div>
-      
+
     </div>
     <div class="chart-legend">
-      
+
       <span><div class="legend-dot excellent"></div>Excellent</span>
-      
+
       <span><div class="legend-dot good"></div>Good</span>
-      
+
       <span><div class="legend-dot moderate"></div>Moderate</span>
-      
+
       <span><div class="legend-dot limited"></div>Limited</span>
-      
+
     </div>
   </section>
 
@@ -443,7 +443,7 @@ header.hero {
           </tr>
         </thead>
         <tbody>
-          
+
           <tr>
             <td class="model-name">GLM-4.6-405B</td>
             <td>405B</td>
@@ -453,7 +453,7 @@ header.hero {
             <td><span class="pill dim">Apache 2.0</span></td>
             <td>Multi-tool orchestration</td>
           </tr>
-          
+
           <tr>
             <td class="model-name">Llama-4-70B</td>
             <td>70B</td>
@@ -463,7 +463,7 @@ header.hero {
             <td><span class="pill dim">Llama license</span></td>
             <td>Multi-step reasoning</td>
           </tr>
-          
+
           <tr>
             <td class="model-name">Mistral-Large-2</td>
             <td>123B</td>
@@ -473,7 +473,7 @@ header.hero {
             <td><span class="pill dim">MPL 2.0</span></td>
             <td>Best perf/param ratio</td>
           </tr>
-          
+
           <tr>
             <td class="model-name">DeepSeek-V3</td>
             <td>671B MoE</td>
@@ -483,7 +483,7 @@ header.hero {
             <td><span class="pill dim">MIT</span></td>
             <td>Cost-efficient inference</td>
           </tr>
-          
+
           <tr>
             <td class="model-name">Qwen-3-72B</td>
             <td>72B</td>
@@ -493,7 +493,7 @@ header.hero {
             <td><span class="pill dim">Qwen license</span></td>
             <td>Code + retrieval tasks</td>
           </tr>
-          
+
           <tr>
             <td class="model-name">Gemma-3-27B</td>
             <td>27B</td>
@@ -503,7 +503,7 @@ header.hero {
             <td><span class="pill dim">Gemma terms</span></td>
             <td>Single-step tasks</td>
           </tr>
-          
+
           <tr>
             <td class="model-name">Phi-4-14B</td>
             <td>14B</td>
@@ -513,7 +513,7 @@ header.hero {
             <td><span class="pill dim">MIT</span></td>
             <td>Edge / lightweight</td>
           </tr>
-          
+
           <tr>
             <td class="model-name">Llama-4-8B</td>
             <td>8B</td>
@@ -523,7 +523,7 @@ header.hero {
             <td><span class="pill dim">Llama license</span></td>
             <td>Prototyping</td>
           </tr>
-          
+
         </tbody>
       </table>
     </div>