Dark Developer Console in CSS, Bootstrap & Tailwind

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="dk-i-terminal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="18" height="15" rx="2"/><path d="m7 9.5 3 2.5-3 2.5M12.5 15H17"/></symbol>
  <symbol id="dk-i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 12 4l8 6.5V20h-5.5v-6h-5v6H4z"/></symbol>
  <symbol id="dk-i-rocket" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 15c-1.5 1.3-2 4-2 4s2.7-.5 4-2M14.5 4.5C17.5 3 21 3 21 3s0 3.5-1.5 6.5L13 16l-5-5z"/><path d="m9.5 12.5-3-1L8.5 9h4M11.5 14.5l1 3 2.5-2V11.5"/></symbol>
  <symbol id="dk-i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5-8.5 4.5L3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
  <symbol id="dk-i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V4M4 20h16"/><path d="m7.5 15 3.5-4 3 2.5 5-6"/></symbol>
  <symbol id="dk-i-db" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="7.5" ry="2.75"/><path d="M4.5 6v12c0 1.5 3.4 2.75 7.5 2.75s7.5-1.25 7.5-2.75V6M4.5 12c0 1.5 3.4 2.75 7.5 2.75s7.5-1.25 7.5-2.75"/></symbol>
  <symbol id="dk-i-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></symbol>
  <symbol id="dk-i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></symbol>
  <symbol id="dk-i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3.75"/><path d="M12 3v1.75M12 19.25V21M3 12h1.75M19.25 12H21M5.6 5.6l1.25 1.25M17.15 17.15l1.25 1.25M5.6 18.4l1.25-1.25M17.15 6.85l1.25-1.25"/></symbol>
  <symbol id="dk-i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></symbol>
  <symbol id="dk-i-monitor" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="18" height="12" rx="2"/><path d="M8.5 20h7M12 16.5V20"/></symbol>
  <symbol id="dk-i-activity" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h4l2.5-6.5 5 13L17 12h4"/></symbol>
  <symbol id="dk-i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
  <symbol id="dk-i-warn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4 2.8 19.5h18.4z"/><path d="M12 10v4.5M12 17.25h.01"/></symbol>
  <symbol id="dk-i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6L10 21l8-10.5h-6z"/></symbol>
  <symbol id="dk-i-arrowup" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M9 7h8v8"/></symbol>
  <symbol id="dk-i-arrowdown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7l10 10M17 9v8H9"/></symbol>
  <symbol id="dk-i-branch" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6.5" cy="5.5" r="2"/><circle cx="6.5" cy="18.5" r="2"/><circle cx="17.5" cy="7.5" r="2"/><path d="M6.5 7.5v9M17.5 9.5c0 4-4 5-11 7"/></symbol>
  <symbol id="dk-i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9a6 6 0 1 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9"/><path d="M10.3 20a2 2 0 0 0 3.4 0"/></symbol>
  <symbol id="dk-i-refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3L19.5 9"/><path d="M19.5 4.5V9H15"/></symbol>
</svg>
<div class="dk-app" data-theme="dark" data-theme-root>
<aside class="dk-app__side"><div class="dk-brand"><span class="dk-brand__mark" aria-hidden="true"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-terminal"/></svg></span>Northwind</div><nav class="dk-sidenav" aria-label="Project"><ul>
<li><a class="dk-sidelink" href="#overview" aria-current="page"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-home"/></svg>Overview</a></li>
<li><a class="dk-sidelink" href="#deployments"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-rocket"/></svg>Deployments</a></li>
<li><a class="dk-sidelink" href="#logs"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-layers"/></svg>Logs</a></li>
<li><a class="dk-sidelink" href="#analytics"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-chart"/></svg>Analytics</a></li>
<li><a class="dk-sidelink" href="#storage"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-db"/></svg>Storage</a></li>
<li><a class="dk-sidelink" href="#settings"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-settings"/></svg>Settings</a></li>
</ul></nav><div class="dk-usage"><p><span>Build minutes</span><b>3,420 / 6,000</b></p><div class="dk-bar" role="progressbar" aria-label="Build minutes used" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100"><span style="width:57%"></span></div></div></aside>
<main class="dk-app__main"><header class="dk-top"><h1><span>atlas-api /</span> Overview</h1><div class="dk-top__end">
<button class="dk-cmdk" type="button" aria-keyshortcuts="Meta+K"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-search"/></svg><span>Search or jump to</span><span aria-hidden="true"><kbd class="dk-kbd">⌘</kbd><kbd class="dk-kbd">K</kbd></span></button>
<fieldset class="dk-seg dk-theme"><legend class="dk-sr">Theme</legend><div class="dk-seg__opts">
<label class="dk-seg__opt"><input class="dk-sr theme-pick" type="radio" name="theme" value="light"><span><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-sun"/></svg>Light</span></label>
<label class="dk-seg__opt"><input class="dk-sr theme-pick" type="radio" name="theme" value="dark" checked><span><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-moon"/></svg>Dark</span></label>
<label class="dk-seg__opt"><input class="dk-sr theme-pick" type="radio" name="theme" value="system"><span><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-monitor"/></svg>System</span></label>
</div></fieldset><button class="dk-btn dk-btn--icon" type="button" aria-label="Notifications"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-bell"/></svg></button><button class="dk-avatar" type="button" aria-label="Account menu for Mira Chen">MC</button></div></header>
<section class="dk-kpis" aria-label="Key metrics">
<article class="dk-card dk-kpi"><h2 class="dk-kpi__head"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-activity"/></svg>Requests · 24 h</h2><p class="dk-kpi__value">1.84M</p><span class="dk-badge dk-badge--success"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-arrowup"/></svg><span class="dk-sr">up </span>12.4%</span><div class="dk-kpi__spark"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 29.0 L21.8 25.8 L43.6 27.4 L65.5 21.0 L87.3 22.6 L109.1 17.8 L130.9 19.4 L152.7 13.0 L174.5 14.6 L196.4 9.8 L218.2 11.4 L240.0 5.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 29.0 L21.8 25.8 L43.6 27.4 L65.5 21.0 L87.3 22.6 L109.1 17.8 L130.9 19.4 L152.7 13.0 L174.5 14.6 L196.4 9.8 L218.2 11.4 L240.0 5.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="dk-sr">Trend: rising.</span></div></article>
<article class="dk-card dk-kpi"><h2 class="dk-kpi__head"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-clock"/></svg>p95 latency</h2><p class="dk-kpi__value">182 ms</p><span class="dk-badge dk-badge--success"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-arrowdown"/></svg><span class="dk-sr">down </span>8.1%</span><div class="dk-kpi__spark"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 5.0 L21.8 6.7 L43.6 10.0 L65.5 8.7 L87.3 15.3 L109.1 17.4 L130.9 19.9 L152.7 22.0 L174.5 23.2 L196.4 25.7 L218.2 27.3 L240.0 29.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 5.0 L21.8 6.7 L43.6 10.0 L65.5 8.7 L87.3 15.3 L109.1 17.4 L130.9 19.9 L152.7 22.0 L174.5 23.2 L196.4 25.7 L218.2 27.3 L240.0 29.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="dk-sr">Trend: falling.</span></div></article>
<article class="dk-card dk-kpi"><h2 class="dk-kpi__head"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-warn"/></svg>Error rate</h2><p class="dk-kpi__value">0.42%</p><span class="dk-badge dk-badge--danger"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-arrowup"/></svg><span class="dk-sr">up </span>0.10 pt</span><div class="dk-kpi__spark"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 29.0 L21.8 26.8 L43.6 27.9 L65.5 23.5 L87.3 24.6 L109.1 18.1 L130.9 20.3 L152.7 14.8 L174.5 11.5 L196.4 12.6 L218.2 7.2 L240.0 5.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 29.0 L21.8 26.8 L43.6 27.9 L65.5 23.5 L87.3 24.6 L109.1 18.1 L130.9 20.3 L152.7 14.8 L174.5 11.5 L196.4 12.6 L218.2 7.2 L240.0 5.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="dk-sr">Trend: climbing.</span></div></article>
<article class="dk-card dk-kpi"><h2 class="dk-kpi__head"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-zap"/></svg>Spend · October</h2><p class="dk-kpi__value">$412.80</p><span class="dk-badge dk-badge--warning"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-arrowup"/></svg><span class="dk-sr">up </span>69% of budget</span><div class="dk-kpi__spark"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 29.0 L21.8 26.4 L43.6 23.8 L65.5 21.9 L87.3 19.3 L109.1 16.7 L130.9 14.8 L152.7 12.2 L174.5 10.3 L196.4 8.4 L218.2 6.4 L240.0 5.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 29.0 L21.8 26.4 L43.6 23.8 L65.5 21.9 L87.3 19.3 L109.1 16.7 L130.9 14.8 L152.7 12.2 L174.5 10.3 L196.4 8.4 L218.2 6.4 L240.0 5.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="dk-sr">Trend: on track to reach the budget.</span></div></article>
</section><div class="dk-split">
<section class="dk-card" aria-labelledby="h-traffic"><div class="dk-panel-head"><h2 class="" id="h-traffic">Traffic · requests per hour</h2><ul class="dk-legend"><li class=""><i class=""></i>Today</li><li class=""><i class="dk-legend--dash"></i>Last week</li></ul></div><div class="dk-chart__plot"><div class="dk-chart__y" aria-hidden="true"><span>4k</span><span>3k</span><span>2k</span><span>1k</span><span>0</span></div><svg viewBox="0 0 560 180" preserveAspectRatio="none" aria-hidden="true" focusable="false" style="display:block;width:100%;height:180px;overflow:visible"><path d="M0 0.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 45H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 90H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 135H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 179.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0 L560 180 L0 180 Z" style="fill:color-mix(in srgb,var(--accent) 18%,transparent)"/><path d="M0.0 135.0 L80.0 144.0 L160.0 139.5 L240.0 117.0 L320.0 67.5 L400.0 45.0 L480.0 49.5 L560.0 81.0" style="fill:none;stroke:var(--text-3);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0" style="fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke"/></svg></div><div class="dk-chart__x" aria-hidden="true"><span>00</span><span>03</span><span>06</span><span>09</span><span>12</span><span>15</span><span>18</span><span>21</span></div><div class="dk-sr"><table><caption>Requests per hour, today and the same day last week</caption><tr><th scope="col">Hour</th><th scope="col">Today</th><th scope="col">Last week</th></tr><tr><th scope="row">00:00</th><td>1,200</td><td>1,000</td></tr><tr><th scope="row">03:00</th><td>900</td><td>800</td></tr><tr><th scope="row">06:00</th><td>800</td><td>900</td></tr><tr><th scope="row">09:00</th><td>1,600</td><td>1,400</td></tr><tr><th scope="row">12:00</th><td>3,100</td><td>2,500</td></tr><tr><th scope="row">15:00</th><td>3,800</td><td>3,000</td></tr><tr><th scope="row">18:00</th><td>3,400</td><td>2,900</td></tr><tr><th scope="row">21:00</th><td>2,600</td><td>2,200</td></tr></table></div></section>
<section class="dk-card" aria-labelledby="h-svc"><div class="dk-panel-head"><h2 id="h-svc">Services</h2><span class="dk-badge dk-badge--warning">1 degraded, 1 down</span></div><ul class="dk-services">
<li><code>api</code><span class="dk-badge dk-badge--success dk-badge--dot">Healthy</span><small>38 ms</small></li>
<li><code>worker</code><span class="dk-badge dk-badge--warning dk-badge--dot">Degraded</span><small>1.4 s</small></li>
<li><code>cron</code><span class="dk-badge dk-badge--success dk-badge--dot">Healthy</span><small>—</small></li>
<li><code>db-primary</code><span class="dk-badge dk-badge--success dk-badge--dot">Healthy</span><small>4 ms</small></li>
<li><code>search</code><span class="dk-badge dk-badge--danger dk-badge--dot">Down</span><small>timeout</small></li>
</ul></section></div>
<section class="dk-card" aria-labelledby="h-dep"><div class="dk-panel-head"><h2 id="h-dep">Recent deployments</h2><button class="dk-btn dk-btn--sm" type="button"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-refresh"/></svg>Redeploy main</button></div><div class="dk-table-wrap" tabindex="0" role="region" aria-labelledby="h-dep"><table class="dk-table">
<thead><tr><th scope="col">Commit</th><th scope="col">Branch</th><th scope="col">Status</th><th scope="col">Author</th><th scope="col">When</th></tr></thead><tbody>
<tr><td><b>Move sessions to the new Redis cluster</b><code>dpl_7Kq2xT</code></td><td><span class="dk-branch"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>main</span></td><td><span class="dk-badge dk-badge--accent dk-badge--dot">Building</span></td><td>Mira Chen</td><td>2 min ago</td></tr>
<tr><td><b>Drop legacy /v1/auth routes</b><code>dpl_9fA1cE</code></td><td><span class="dk-branch"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>main</span></td><td><span class="dk-badge dk-badge--success dk-badge--dot">Ready</span></td><td>Jonas Okafor</td><td>1 h ago</td></tr>
<tr><td><b>Retry webhook delivery with backoff</b><code>dpl_3bD8kL</code></td><td><span class="dk-branch"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>fix/webhooks</span></td><td><span class="dk-badge dk-badge--danger dk-badge--dot">Failed</span></td><td>Priya Raman</td><td>3 h ago</td></tr>
<tr><td><b>Bump node to 22.11</b><code>dpl_5cE0pQ</code></td><td><span class="dk-branch"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>chore/node-22</span></td><td><span class="dk-badge dk-badge--success dk-badge--dot">Ready</span></td><td>Leo Brandt</td><td>Yesterday</td></tr>
</tbody></table></div></section>
<section class="dk-card" aria-labelledby="h-logs"><div class="dk-panel-head"><h2 id="h-logs">Live logs</h2><span class="dk-badge dk-badge--success dk-badge--dot">Streaming</span></div><ol class="dk-logs" tabindex="0" aria-labelledby="h-logs">
<li><time>12:04:18</time><b style="--l:var(--accent)">INFO</b><span>GET /v2/projects 200 · 41 ms</span></li>
<li><time>12:04:19</time><b style="--l:var(--accent)">INFO</b><span>POST /v2/deployments 201 · 212 ms</span></li>
<li><time>12:04:21</time><b style="--l:var(--warning)">WARN</b><span>worker queue depth 1,204 above 1,000</span></li>
<li><time>12:04:22</time><b style="--l:var(--danger)">ERROR</b><span>search: upstream timeout after 5,000 ms</span></li>
<li><time>12:04:24</time><b style="--l:var(--accent)">INFO</b><span>cache hit ratio 0.93 over the last 5 min</span></li>
</ol></section></main></div>

/* ── Dark UI kit tokens (uiCookies) — identical in every set ──────────────────────────────
   Dark first. Elevation is a lighter surface, not a shadow: surface-0 is the page, 1 cards and
   panels, 2 controls, menus and dialogs, 3 hover, selected rows and tooltips.
   Every colour is a light-dark() pair, so flipping color-scheme turns the whole kit light:
   data-theme="dark" | "light" | "system" on any wrapper (system follows prefers-color-scheme),
   or a checked .theme-pick radio inside a [data-theme] element (:has()).
   Contrast, dark | light, on the worst surface (surface-3): text-1 12.2 | 15.0, text-2 6.6 | 7.3,
   text-3 4.8 | 5.4, accent 5.4 | 5.1, success 7.7 | 5.0, warning 8.4 | 5.2, danger 6.8 | 5.0;
   edge (control boundaries) 3.3 | 3.1 and focus 7.9 | 5.9 against every surface. */
:root{color-scheme:dark}
[data-theme="dark"]{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
[data-theme="system"]{color-scheme:light dark}
[data-theme]:has(.theme-pick[value="dark"]:checked){color-scheme:dark}
[data-theme]:has(.theme-pick[value="light"]:checked){color-scheme:light}
[data-theme]:has(.theme-pick[value="system"]:checked){color-scheme:light dark}
:root{
  --surface-0:light-dark(#eef1f5,#0b0d12);   /* page */
  --surface-1:light-dark(#ffffff,#151821);   /* cards, panels, navbar, sidebar */
  --surface-2:light-dark(#f6f7f9,#1d212c);   /* controls, menus, dialogs, toasts */
  --surface-3:light-dark(#e6e9ef,#262b38);   /* hover, selected rows, tooltips */
  --text-1:light-dark(#12151c,#eceef3);      /* primary text */
  --text-2:light-dark(#434a5a,#aab1bf);      /* secondary text */
  --text-3:light-dark(#555d6e,#8f96a8);      /* captions, placeholders, axis labels */
  --border:light-dark(#dde1e8,#2a2f3c);      /* decorative 1px dividers and card edges */
  --edge:light-dark(#7c8496,#737b90);        /* control boundaries: fields, boxes, tracks */
  --accent:light-dark(#4452d0,#8b97ff);      /* the one vivid colour: links, selected, primary */
  --accent-soft:light-dark(#e6e8ff,#232a4d); /* selected backgrounds; accent text keeps 5.2 | 5.3 on it */
  --on-accent:light-dark(#ffffff,#0b0d12);   /* text on accent fills, 6.2 | 7.4 */
  --success:light-dark(#11713f,#5fd4a0);     /* desaturated for dark, so they do not vibrate */
  --warning:light-dark(#875500,#f0c060);
  --danger:light-dark(#bb2532,#ff9790);
  --focus:light-dark(#3b48c4,#b5bdff);       /* 2px focus ring */
  --highlight:light-dark(rgb(255 255 255 / 0),rgb(255 255 255 / .045)); /* 1px top light on dark surfaces */
  --shadow-color:light-dark(rgb(16 24 40 / .16),rgb(0 0 0 / .55));     /* overlays only */
  --radius:12px;--radius-sm:8px;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
/* No light-dark() (Chrome < 123, Safari < 17.5, Firefox < 120): the same values, chosen by attribute */
@supports not (color:light-dark(#fff,#000)){
  :root,[data-theme="dark"]{--surface-0:#0b0d12;--surface-1:#151821;--surface-2:#1d212c;--surface-3:#262b38;--text-1:#eceef3;--text-2:#aab1bf;--text-3:#8f96a8;--border:#2a2f3c;--edge:#737b90;--accent:#8b97ff;--accent-soft:#232a4d;--on-accent:#0b0d12;--success:#5fd4a0;--warning:#f0c060;--danger:#ff9790;--focus:#b5bdff;--highlight:rgb(255 255 255 / .045);--shadow-color:rgb(0 0 0 / .55)}
  [data-theme="light"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}
  @media (prefers-color-scheme:light){[data-theme="system"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}}
}
@media (prefers-contrast:more){:root{--border:var(--edge);--text-3:var(--text-2)}}
[data-theme]{background:var(--surface-0);color:var(--text-1)}
/* Components */
:where([class^="dk-"],[class*=" dk-"]),:where([class^="dk-"],[class*=" dk-"])::before,:where([class^="dk-"],[class*=" dk-"])::after{box-sizing:border-box}
.dk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dk-ico{width:18px;height:18px;flex:none}
.dk-kbd{display:inline-grid;place-items:center;min-width:1.45rem;height:1.35rem;padding:0 .35rem;border:1px solid var(--border);border-bottom-width:2px;
  border-radius:5px;background:var(--surface-2);color:var(--text-2);font:500 .72rem/1 var(--mono)}
.dk-link{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:3px}
.dk-link:hover{text-decoration-color:currentColor}
.dk-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
/* Card: surface-1 with a 1px border and a 1px top highlight (dark only); no shadow */
.dk-card{padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-1);color:var(--text-1);box-shadow:inset 0 1px 0 var(--highlight)}
.dk-card h2,.dk-card h3,.dk-card p{margin:0}
.dk-card__title{font-size:1rem;font-weight:650;letter-spacing:-.01em}
.dk-card__sub{margin-top:2px;font-size:.85rem;color:var(--text-2)}
/* Buttons: one recipe, variants only swap four custom properties */
.dk-btn{--b-bg:var(--surface-2);--b-fg:var(--text-1);--b-bd:var(--border);--b-hover:var(--surface-3);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:38px;padding:.5rem 1rem;
  border:1px solid var(--b-bd);border-radius:var(--radius-sm);background:var(--b-bg);color:var(--b-fg);
  font-family:inherit;font-size:.875rem;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--highlight);transition:background-color .15s,border-color .15s,color .15s}
.dk-btn:hover{background:var(--b-hover)}
.dk-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dk-btn--primary{--b-bg:var(--accent);--b-fg:var(--on-accent);--b-bd:var(--accent);--b-hover:color-mix(in srgb,var(--accent) 86%,var(--text-1))}
.dk-btn--ghost{--b-bg:transparent;--b-bd:transparent;--b-fg:var(--text-2);box-shadow:none}
.dk-btn--ghost:hover{color:var(--text-1)}
.dk-btn--danger{--b-fg:var(--danger);--b-bd:color-mix(in srgb,var(--danger) 40%,var(--border))}
.dk-btn--sm{min-height:32px;padding:.35rem .75rem;font-size:.8rem}
.dk-btn--lg{min-height:46px;padding:.7rem 1.35rem;font-size:.95rem}
.dk-btn--block{width:100%}
.dk-btn:disabled{opacity:.5;cursor:not-allowed}
.dk-btn[aria-busy="true"]{cursor:progress}
.dk-btn:disabled:hover{background:var(--b-bg)}
.dk-btn--icon{width:38px;padding:0}
.dk-btn--icon.dk-btn--sm{width:32px}
.dk-btn--icon.dk-btn--lg{width:46px}
.dk-btn--round{border-radius:999px}
.dk-spin{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:dk-spin .75s linear infinite}
@keyframes dk-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.dk-btn{transition:none}.dk-spin{animation-duration:2.4s}}
/* Segmented control: radios in a fieldset. Selected = accent-soft fill, accent text and edge */
.dk-seg{min-width:0;margin:0;padding:0;border:0}
.dk-seg legend{margin-bottom:8px;padding:0;font-size:.8rem;font-weight:600;color:var(--text-2)}
.dk-seg__opts{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-0)}
.dk-seg__opt{position:relative}
.dk-seg__opt span{display:inline-flex;align-items:center;gap:.4rem;min-height:30px;padding:.3rem .8rem;border:1px solid transparent;border-radius:6px;
  color:var(--text-2);font-size:.82rem;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s}
.dk-seg__opt span:hover{color:var(--text-1);background:var(--surface-2)}
.dk-seg__opt input:checked+span{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}
.dk-seg__opt input:focus-visible+span{outline:2px solid var(--focus);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.dk-seg__opt span{transition:none}}
/* Badges: tinted with color-mix so the text colour keeps 4.5:1 on its own fill */
.dk-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .5rem;border:1px solid color-mix(in srgb,var(--b,var(--text-2)) 32%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--b,var(--text-2)) 12%,transparent);color:var(--b,var(--text-2));font-size:.72rem;font-weight:650;line-height:1.4;white-space:nowrap}
.dk-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dk-badge--accent{--b:var(--accent)}.dk-badge--success{--b:var(--success)}.dk-badge--warning{--b:var(--warning)}.dk-badge--danger{--b:var(--danger)}
/* App shell: the element with data-theme is the theme root; the radios inside it flip the theme */
.dk-app{display:grid;grid-template-columns:224px minmax(0,1fr);overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface-0);color:var(--text-1)}
.dk-app__side{display:flex;flex-direction:column;gap:18px;padding:16px 12px;border-right:1px solid var(--border);background:var(--surface-1)}
.dk-app__main{display:flex;flex-direction:column;gap:20px;min-width:0;padding:20px}
.dk-brand{display:flex;align-items:center;gap:10px;padding:2px 8px;font-weight:700;letter-spacing:-.01em}
.dk-brand__mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--on-accent)}
.dk-brand__mark .dk-ico{width:16px;height:16px}
.dk-sidenav ul{display:grid;gap:1px;margin:0;padding:0;list-style:none}
.dk-sidelink{position:relative;display:flex;align-items:center;gap:10px;min-height:36px;padding:.4rem 10px;border-radius:var(--radius-sm);color:var(--text-2);font-size:.875rem;font-weight:500;text-decoration:none;white-space:nowrap}
.dk-sidelink .dk-ico{color:var(--text-3)}
.dk-sidelink:hover{background:var(--surface-3);color:var(--text-1)}
.dk-sidelink[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.dk-sidelink[aria-current="page"] .dk-ico{color:var(--accent)}
.dk-sidelink:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.dk-usage{margin-top:auto;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);font-size:.78rem;color:var(--text-2)}
.dk-usage p{display:flex;justify-content:space-between;gap:8px;margin:0 0 8px}
.dk-usage b{color:var(--text-1);font-weight:600}
.dk-bar{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.dk-bar>span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.dk-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.dk-top h1{margin:0;font-size:1.15rem;font-weight:650;letter-spacing:-.015em}
.dk-top h1 span{color:var(--text-3);font-weight:500}
.dk-top__end{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-left:auto}
.dk-cmdk{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:.35rem .5rem .35rem .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-3);font-family:inherit;font-size:.85rem;cursor:pointer}
.dk-cmdk:hover{border-color:var(--edge);color:var(--text-2)}
.dk-cmdk:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dk-cmdk span:last-child{display:inline-flex;gap:3px}
.dk-avatar{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:inherit;font-size:.72rem;font-weight:700;cursor:pointer}
.dk-avatar:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dk-theme .dk-seg__opts{background:var(--surface-1)}
.dk-theme .dk-seg__opt span{padding:.3rem .6rem}
.dk-theme .dk-ico{width:16px;height:16px}
/* KPI tiles */
.dk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.dk-kpi{padding:16px}
.dk-kpi__head{display:flex;align-items:center;gap:8px;margin:0;font-size:.8rem;font-weight:500;color:var(--text-2)}
.dk-kpi__head .dk-ico{width:15px;height:15px;color:var(--text-3)}
.dk-kpi__value{margin:8px 0 6px!important;font-size:1.45rem;font-weight:650;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.dk-kpi .dk-badge{align-self:flex-start}
.dk-kpi .dk-badge .dk-ico{width:12px;height:12px}
.dk-kpi__spark{margin-top:12px}
/* Chart and services */
.dk-split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:stretch}
.dk-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.dk-panel-head h2{margin:0;font-size:.95rem;font-weight:650}
.dk-legend{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none;font-size:.75rem;color:var(--text-2)}
.dk-legend li{display:inline-flex;align-items:center;gap:6px}
.dk-legend i{width:14px;height:3px;border-radius:2px;background:var(--accent)}
.dk-legend i.dk-legend--dash{background:repeating-linear-gradient(90deg,var(--text-3) 0 4px,transparent 4px 7px)}
.dk-chart__plot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.dk-chart__y{display:flex;flex-direction:column;justify-content:space-between;height:180px;margin:-7px 0;font:500 .7rem var(--mono);color:var(--text-3);text-align:right}
.dk-chart__x{display:flex;justify-content:space-between;margin:8px 0 0 30px;font:500 .7rem var(--mono);color:var(--text-3)}
.dk-services{display:grid;margin:0;padding:0;list-style:none}
.dk-services li{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:.85rem}
.dk-services li+li{border-top:1px solid var(--border)}
.dk-services code{font:500 .82rem var(--mono);color:var(--text-1)}
.dk-services small{margin-left:auto;font:500 .75rem var(--mono);color:var(--text-3)}
/* Deployments table */
.dk-table-wrap{overflow-x:auto;margin:0 -20px -20px}
.dk-table{width:100%;min-width:640px;border-collapse:collapse;font-size:.84rem}
.dk-table th{padding:8px 20px;border-bottom:1px solid var(--border);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-align:left;text-transform:uppercase;color:var(--text-3)}
.dk-table td{padding:11px 20px;border-bottom:1px solid var(--border);color:var(--text-2);vertical-align:middle}
.dk-table tr:last-child td{border-bottom:0}
.dk-table tbody tr:hover{background:var(--surface-2)}
.dk-table td b{display:block;font-weight:600;color:var(--text-1)}
.dk-table code,.dk-branch{font:500 .78rem var(--mono);color:var(--text-3)}
.dk-branch{display:inline-flex;align-items:center;gap:5px}
.dk-branch .dk-ico{width:14px;height:14px}
/* Log stream */
.dk-logs{margin:0;padding:12px 14px;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-0);font:.78rem/1.75 var(--mono);color:var(--text-2);list-style:none}
.dk-logs li{display:grid;grid-template-columns:auto 3.6rem 1fr;gap:12px;white-space:nowrap}
.dk-logs time{color:var(--text-3)}
.dk-logs b{font-weight:600;color:var(--l)}
.dk-table-wrap:focus-visible,.dk-logs:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:900px){.dk-app{grid-template-columns:minmax(0,1fr)}.dk-app__side{border-right:0;border-bottom:1px solid var(--border)}
  .dk-sidenav ul{display:flex;overflow-x:auto}.dk-usage{display:none}.dk-split{grid-template-columns:1fr}}
@media (max-width:560px){.dk-cmdk span,.dk-cmdk span:last-child{display:none}.dk-top__end{margin-left:0}}

// Theme toggle: the radios already switch the theme with :has(); this mirrors the choice to
// data-theme (for browsers without :has()) and remembers it for the next visit.
(() => {
  const root = document.querySelector('[data-theme-root]'); if (!root) return;
  const picks = root.querySelectorAll('.theme-pick');
  let saved = null; try { saved = localStorage.getItem('dk-theme'); } catch (e) {}
  const apply = v => { root.dataset.theme = v; picks.forEach(p => { p.checked = p.value === v; }); };
  if (saved && ['dark', 'light', 'system'].includes(saved)) apply(saved);
  picks.forEach(p => p.addEventListener('change', () => { apply(p.value); try { localStorage.setItem('dk-theme', p.value); } catch (e) {} }));
})();

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="dk-i-terminal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="18" height="15" rx="2"/><path d="m7 9.5 3 2.5-3 2.5M12.5 15H17"/></symbol>
  <symbol id="dk-i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 12 4l8 6.5V20h-5.5v-6h-5v6H4z"/></symbol>
  <symbol id="dk-i-rocket" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 15c-1.5 1.3-2 4-2 4s2.7-.5 4-2M14.5 4.5C17.5 3 21 3 21 3s0 3.5-1.5 6.5L13 16l-5-5z"/><path d="m9.5 12.5-3-1L8.5 9h4M11.5 14.5l1 3 2.5-2V11.5"/></symbol>
  <symbol id="dk-i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5-8.5 4.5L3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
  <symbol id="dk-i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V4M4 20h16"/><path d="m7.5 15 3.5-4 3 2.5 5-6"/></symbol>
  <symbol id="dk-i-db" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="7.5" ry="2.75"/><path d="M4.5 6v12c0 1.5 3.4 2.75 7.5 2.75s7.5-1.25 7.5-2.75V6M4.5 12c0 1.5 3.4 2.75 7.5 2.75s7.5-1.25 7.5-2.75"/></symbol>
  <symbol id="dk-i-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></symbol>
  <symbol id="dk-i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></symbol>
  <symbol id="dk-i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3.75"/><path d="M12 3v1.75M12 19.25V21M3 12h1.75M19.25 12H21M5.6 5.6l1.25 1.25M17.15 17.15l1.25 1.25M5.6 18.4l1.25-1.25M17.15 6.85l1.25-1.25"/></symbol>
  <symbol id="dk-i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></symbol>
  <symbol id="dk-i-monitor" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="18" height="12" rx="2"/><path d="M8.5 20h7M12 16.5V20"/></symbol>
  <symbol id="dk-i-activity" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h4l2.5-6.5 5 13L17 12h4"/></symbol>
  <symbol id="dk-i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
  <symbol id="dk-i-warn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4 2.8 19.5h18.4z"/><path d="M12 10v4.5M12 17.25h.01"/></symbol>
  <symbol id="dk-i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6L10 21l8-10.5h-6z"/></symbol>
  <symbol id="dk-i-arrowup" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M9 7h8v8"/></symbol>
  <symbol id="dk-i-arrowdown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7l10 10M17 9v8H9"/></symbol>
  <symbol id="dk-i-branch" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6.5" cy="5.5" r="2"/><circle cx="6.5" cy="18.5" r="2"/><circle cx="17.5" cy="7.5" r="2"/><path d="M6.5 7.5v9M17.5 9.5c0 4-4 5-11 7"/></symbol>
  <symbol id="dk-i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9a6 6 0 1 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9"/><path d="M10.3 20a2 2 0 0 0 3.4 0"/></symbol>
  <symbol id="dk-i-refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3L19.5 9"/><path d="M19.5 4.5V9H15"/></symbol>
</svg>
<div class="dk-app" data-theme="dark" data-bs-theme="dark" data-theme-root>
<aside class="dk-app__side"><div class="dk-brand"><span class="dk-brand__mark" aria-hidden="true"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-terminal"/></svg></span>Northwind</div><nav class="dk-sidenav" aria-label="Project"><ul>
<li class="nav-item"><a class="dk-sidelink" href="#overview" aria-current="page"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-home"/></svg>Overview</a></li>
<li class="nav-item"><a class="dk-sidelink" href="#deployments"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-rocket"/></svg>Deployments</a></li>
<li class="nav-item"><a class="dk-sidelink" href="#logs"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-layers"/></svg>Logs</a></li>
<li class="nav-item"><a class="dk-sidelink" href="#analytics"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-chart"/></svg>Analytics</a></li>
<li class="nav-item"><a class="dk-sidelink" href="#storage"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-db"/></svg>Storage</a></li>
<li class="nav-item"><a class="dk-sidelink" href="#settings"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-settings"/></svg>Settings</a></li>
</ul></nav><div class="dk-usage"><p><span>Build minutes</span><b>3,420 / 6,000</b></p><div class="progress dk-bar" style="--bs-progress-height:6px;--bs-progress-bg:var(--surface-3);--bs-progress-bar-bg:var(--accent)" role="progressbar" aria-label="Build minutes used" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width:57%"></div></div></div></aside>
<main class="dk-app__main"><header class="dk-top"><h1><span>atlas-api /</span> Overview</h1><div class="dk-top__end">
<button class="dk-cmdk" type="button" aria-keyshortcuts="Meta+K"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-search"/></svg><span>Search or jump to</span><span aria-hidden="true"><kbd class="dk-kbd">⌘</kbd><kbd class="dk-kbd">K</kbd></span></button>
<fieldset class="dk-seg dk-theme"><legend class="visually-hidden">Theme</legend><div class="btn-group">
<input class="btn-check theme-pick" type="radio" name="theme" id="theme-light" value="light" autocomplete="off"><label class="btn" for="theme-light"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-sun"/></svg>Light</label>
<input class="btn-check theme-pick" type="radio" name="theme" id="theme-dark" value="dark" autocomplete="off" checked><label class="btn" for="theme-dark"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-moon"/></svg>Dark</label>
<input class="btn-check theme-pick" type="radio" name="theme" id="theme-system" value="system" autocomplete="off"><label class="btn" for="theme-system"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-monitor"/></svg>System</label>
</div></fieldset><button class="btn btn-dk btn-dk-icon" type="button" aria-label="Notifications"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-bell"/></svg></button><button class="dk-avatar" type="button" aria-label="Account menu for Mira Chen">MC</button></div></header>
<section class="dk-kpis" aria-label="Key metrics">
<article class="card dk-card dk-kpi"><h2 class="dk-kpi__head"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-activity"/></svg>Requests · 24 h</h2><p class="dk-kpi__value">1.84M</p><span class="badge dk-badge dk-badge-success"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-arrowup"/></svg><span class="visually-hidden">up </span>12.4%</span><div class="dk-kpi__spark"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 29.0 L21.8 25.8 L43.6 27.4 L65.5 21.0 L87.3 22.6 L109.1 17.8 L130.9 19.4 L152.7 13.0 L174.5 14.6 L196.4 9.8 L218.2 11.4 L240.0 5.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 29.0 L21.8 25.8 L43.6 27.4 L65.5 21.0 L87.3 22.6 L109.1 17.8 L130.9 19.4 L152.7 13.0 L174.5 14.6 L196.4 9.8 L218.2 11.4 L240.0 5.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="visually-hidden">Trend: rising.</span></div></article>
<article class="card dk-card dk-kpi"><h2 class="dk-kpi__head"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-clock"/></svg>p95 latency</h2><p class="dk-kpi__value">182 ms</p><span class="badge dk-badge dk-badge-success"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-arrowdown"/></svg><span class="visually-hidden">down </span>8.1%</span><div class="dk-kpi__spark"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 5.0 L21.8 6.7 L43.6 10.0 L65.5 8.7 L87.3 15.3 L109.1 17.4 L130.9 19.9 L152.7 22.0 L174.5 23.2 L196.4 25.7 L218.2 27.3 L240.0 29.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 5.0 L21.8 6.7 L43.6 10.0 L65.5 8.7 L87.3 15.3 L109.1 17.4 L130.9 19.9 L152.7 22.0 L174.5 23.2 L196.4 25.7 L218.2 27.3 L240.0 29.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="visually-hidden">Trend: falling.</span></div></article>
<article class="card dk-card dk-kpi"><h2 class="dk-kpi__head"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-warn"/></svg>Error rate</h2><p class="dk-kpi__value">0.42%</p><span class="badge dk-badge dk-badge-danger"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-arrowup"/></svg><span class="visually-hidden">up </span>0.10 pt</span><div class="dk-kpi__spark"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 29.0 L21.8 26.8 L43.6 27.9 L65.5 23.5 L87.3 24.6 L109.1 18.1 L130.9 20.3 L152.7 14.8 L174.5 11.5 L196.4 12.6 L218.2 7.2 L240.0 5.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 29.0 L21.8 26.8 L43.6 27.9 L65.5 23.5 L87.3 24.6 L109.1 18.1 L130.9 20.3 L152.7 14.8 L174.5 11.5 L196.4 12.6 L218.2 7.2 L240.0 5.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="visually-hidden">Trend: climbing.</span></div></article>
<article class="card dk-card dk-kpi"><h2 class="dk-kpi__head"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-zap"/></svg>Spend · October</h2><p class="dk-kpi__value">$412.80</p><span class="badge dk-badge dk-badge-warning"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-arrowup"/></svg><span class="visually-hidden">up </span>69% of budget</span><div class="dk-kpi__spark"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 29.0 L21.8 26.4 L43.6 23.8 L65.5 21.9 L87.3 19.3 L109.1 16.7 L130.9 14.8 L152.7 12.2 L174.5 10.3 L196.4 8.4 L218.2 6.4 L240.0 5.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 29.0 L21.8 26.4 L43.6 23.8 L65.5 21.9 L87.3 19.3 L109.1 16.7 L130.9 14.8 L152.7 12.2 L174.5 10.3 L196.4 8.4 L218.2 6.4 L240.0 5.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="visually-hidden">Trend: on track to reach the budget.</span></div></article>
</section><div class="dk-split">
<section class="card dk-card card-body" aria-labelledby="h-traffic"><div class="dk-panel-head"><h2 class="" id="h-traffic">Traffic · requests per hour</h2><ul class="dk-legend"><li class=""><i class=""></i>Today</li><li class=""><i class="dk-legend--dash"></i>Last week</li></ul></div><div class="dk-chart__plot"><div class="dk-chart__y" aria-hidden="true"><span>4k</span><span>3k</span><span>2k</span><span>1k</span><span>0</span></div><svg viewBox="0 0 560 180" preserveAspectRatio="none" aria-hidden="true" focusable="false" style="display:block;width:100%;height:180px;overflow:visible"><path d="M0 0.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 45H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 90H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 135H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 179.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0 L560 180 L0 180 Z" style="fill:color-mix(in srgb,var(--accent) 18%,transparent)"/><path d="M0.0 135.0 L80.0 144.0 L160.0 139.5 L240.0 117.0 L320.0 67.5 L400.0 45.0 L480.0 49.5 L560.0 81.0" style="fill:none;stroke:var(--text-3);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0" style="fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke"/></svg></div><div class="dk-chart__x" aria-hidden="true"><span>00</span><span>03</span><span>06</span><span>09</span><span>12</span><span>15</span><span>18</span><span>21</span></div><div class="visually-hidden"><table><caption>Requests per hour, today and the same day last week</caption><tr><th scope="col">Hour</th><th scope="col">Today</th><th scope="col">Last week</th></tr><tr><th scope="row">00:00</th><td>1,200</td><td>1,000</td></tr><tr><th scope="row">03:00</th><td>900</td><td>800</td></tr><tr><th scope="row">06:00</th><td>800</td><td>900</td></tr><tr><th scope="row">09:00</th><td>1,600</td><td>1,400</td></tr><tr><th scope="row">12:00</th><td>3,100</td><td>2,500</td></tr><tr><th scope="row">15:00</th><td>3,800</td><td>3,000</td></tr><tr><th scope="row">18:00</th><td>3,400</td><td>2,900</td></tr><tr><th scope="row">21:00</th><td>2,600</td><td>2,200</td></tr></table></div></section>
<section class="card dk-card card-body" aria-labelledby="h-svc"><div class="dk-panel-head"><h2 id="h-svc">Services</h2><span class="badge dk-badge dk-badge-warning">1 degraded, 1 down</span></div><ul class="dk-services">
<li><code>api</code><span class="badge dk-badge dk-badge-success dk-badge-dot">Healthy</span><small>38 ms</small></li>
<li><code>worker</code><span class="badge dk-badge dk-badge-warning dk-badge-dot">Degraded</span><small>1.4 s</small></li>
<li><code>cron</code><span class="badge dk-badge dk-badge-success dk-badge-dot">Healthy</span><small>—</small></li>
<li><code>db-primary</code><span class="badge dk-badge dk-badge-success dk-badge-dot">Healthy</span><small>4 ms</small></li>
<li><code>search</code><span class="badge dk-badge dk-badge-danger dk-badge-dot">Down</span><small>timeout</small></li>
</ul></section></div>
<section class="card dk-card card-body" aria-labelledby="h-dep"><div class="dk-panel-head"><h2 id="h-dep">Recent deployments</h2><button class="btn btn-dk btn-sm" type="button"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-refresh"/></svg>Redeploy main</button></div><div class="dk-table-wrap" tabindex="0" role="region" aria-labelledby="h-dep"><table class="table dk-table">
<thead><tr><th scope="col">Commit</th><th scope="col">Branch</th><th scope="col">Status</th><th scope="col">Author</th><th scope="col">When</th></tr></thead><tbody>
<tr><td><b>Move sessions to the new Redis cluster</b><code>dpl_7Kq2xT</code></td><td><span class="dk-branch"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>main</span></td><td><span class="badge dk-badge dk-badge-accent dk-badge-dot">Building</span></td><td>Mira Chen</td><td>2 min ago</td></tr>
<tr><td><b>Drop legacy /v1/auth routes</b><code>dpl_9fA1cE</code></td><td><span class="dk-branch"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>main</span></td><td><span class="badge dk-badge dk-badge-success dk-badge-dot">Ready</span></td><td>Jonas Okafor</td><td>1 h ago</td></tr>
<tr><td><b>Retry webhook delivery with backoff</b><code>dpl_3bD8kL</code></td><td><span class="dk-branch"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>fix/webhooks</span></td><td><span class="badge dk-badge dk-badge-danger dk-badge-dot">Failed</span></td><td>Priya Raman</td><td>3 h ago</td></tr>
<tr><td><b>Bump node to 22.11</b><code>dpl_5cE0pQ</code></td><td><span class="dk-branch"><svg class="dk-ico" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>chore/node-22</span></td><td><span class="badge dk-badge dk-badge-success dk-badge-dot">Ready</span></td><td>Leo Brandt</td><td>Yesterday</td></tr>
</tbody></table></div></section>
<section class="card dk-card card-body" aria-labelledby="h-logs"><div class="dk-panel-head"><h2 id="h-logs">Live logs</h2><span class="badge dk-badge dk-badge-success dk-badge-dot">Streaming</span></div><ol class="dk-logs" tabindex="0" aria-labelledby="h-logs">
<li><time>12:04:18</time><b style="--l:var(--accent)">INFO</b><span>GET /v2/projects 200 · 41 ms</span></li>
<li><time>12:04:19</time><b style="--l:var(--accent)">INFO</b><span>POST /v2/deployments 201 · 212 ms</span></li>
<li><time>12:04:21</time><b style="--l:var(--warning)">WARN</b><span>worker queue depth 1,204 above 1,000</span></li>
<li><time>12:04:22</time><b style="--l:var(--danger)">ERROR</b><span>search: upstream timeout after 5,000 ms</span></li>
<li><time>12:04:24</time><b style="--l:var(--accent)">INFO</b><span>cache hit ratio 0.93 over the last 5 min</span></li>
</ol></section></main></div>

/* ── Dark UI kit tokens (uiCookies) — identical in every set ──────────────────────────────
   Dark first. Elevation is a lighter surface, not a shadow: surface-0 is the page, 1 cards and
   panels, 2 controls, menus and dialogs, 3 hover, selected rows and tooltips.
   Every colour is a light-dark() pair, so flipping color-scheme turns the whole kit light:
   data-theme="dark" | "light" | "system" on any wrapper (system follows prefers-color-scheme),
   or a checked .theme-pick radio inside a [data-theme] element (:has()).
   Contrast, dark | light, on the worst surface (surface-3): text-1 12.2 | 15.0, text-2 6.6 | 7.3,
   text-3 4.8 | 5.4, accent 5.4 | 5.1, success 7.7 | 5.0, warning 8.4 | 5.2, danger 6.8 | 5.0;
   edge (control boundaries) 3.3 | 3.1 and focus 7.9 | 5.9 against every surface. */
:root{color-scheme:dark}
[data-theme="dark"]{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
[data-theme="system"]{color-scheme:light dark}
[data-theme]:has(.theme-pick[value="dark"]:checked){color-scheme:dark}
[data-theme]:has(.theme-pick[value="light"]:checked){color-scheme:light}
[data-theme]:has(.theme-pick[value="system"]:checked){color-scheme:light dark}
:root{
  --surface-0:light-dark(#eef1f5,#0b0d12);   /* page */
  --surface-1:light-dark(#ffffff,#151821);   /* cards, panels, navbar, sidebar */
  --surface-2:light-dark(#f6f7f9,#1d212c);   /* controls, menus, dialogs, toasts */
  --surface-3:light-dark(#e6e9ef,#262b38);   /* hover, selected rows, tooltips */
  --text-1:light-dark(#12151c,#eceef3);      /* primary text */
  --text-2:light-dark(#434a5a,#aab1bf);      /* secondary text */
  --text-3:light-dark(#555d6e,#8f96a8);      /* captions, placeholders, axis labels */
  --border:light-dark(#dde1e8,#2a2f3c);      /* decorative 1px dividers and card edges */
  --edge:light-dark(#7c8496,#737b90);        /* control boundaries: fields, boxes, tracks */
  --accent:light-dark(#4452d0,#8b97ff);      /* the one vivid colour: links, selected, primary */
  --accent-soft:light-dark(#e6e8ff,#232a4d); /* selected backgrounds; accent text keeps 5.2 | 5.3 on it */
  --on-accent:light-dark(#ffffff,#0b0d12);   /* text on accent fills, 6.2 | 7.4 */
  --success:light-dark(#11713f,#5fd4a0);     /* desaturated for dark, so they do not vibrate */
  --warning:light-dark(#875500,#f0c060);
  --danger:light-dark(#bb2532,#ff9790);
  --focus:light-dark(#3b48c4,#b5bdff);       /* 2px focus ring */
  --highlight:light-dark(rgb(255 255 255 / 0),rgb(255 255 255 / .045)); /* 1px top light on dark surfaces */
  --shadow-color:light-dark(rgb(16 24 40 / .16),rgb(0 0 0 / .55));     /* overlays only */
  --radius:12px;--radius-sm:8px;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
/* No light-dark() (Chrome < 123, Safari < 17.5, Firefox < 120): the same values, chosen by attribute */
@supports not (color:light-dark(#fff,#000)){
  :root,[data-theme="dark"]{--surface-0:#0b0d12;--surface-1:#151821;--surface-2:#1d212c;--surface-3:#262b38;--text-1:#eceef3;--text-2:#aab1bf;--text-3:#8f96a8;--border:#2a2f3c;--edge:#737b90;--accent:#8b97ff;--accent-soft:#232a4d;--on-accent:#0b0d12;--success:#5fd4a0;--warning:#f0c060;--danger:#ff9790;--focus:#b5bdff;--highlight:rgb(255 255 255 / .045);--shadow-color:rgb(0 0 0 / .55)}
  [data-theme="light"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}
  @media (prefers-color-scheme:light){[data-theme="system"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}}
}
@media (prefers-contrast:more){:root{--border:var(--edge);--text-3:var(--text-2)}}
[data-theme]{background:var(--surface-0);color:var(--text-1)}
/* Bootstrap's own variables mapped onto the kit tokens (identical in every Bootstrap set).
   data-bs-theme="dark" on <html> gives Bootstrap's dark defaults; the tokens then win. */
:root,[data-bs-theme],[data-theme]{
  --bs-body-bg:var(--surface-0);--bs-body-color:var(--text-1);--bs-emphasis-color:var(--text-1);
  --bs-heading-color:var(--text-1);--bs-secondary-color:var(--text-2);--bs-tertiary-color:var(--text-3);
  --bs-secondary-bg:var(--surface-2);--bs-tertiary-bg:var(--surface-3);
  --bs-border-color:var(--border);--bs-border-color-translucent:var(--border);
  --bs-border-radius:var(--radius-sm);--bs-border-radius-lg:var(--radius);--bs-border-radius-sm:6px;
  --bs-link-color:var(--accent);--bs-link-hover-color:var(--accent);
  --bs-focus-ring-color:var(--focus);--bs-code-color:var(--accent);
  --bs-font-monospace:var(--mono);
  --bs-success-text-emphasis:var(--success);--bs-warning-text-emphasis:var(--warning);--bs-danger-text-emphasis:var(--danger)}
/* Bootstrap draws the checkbox tick and select chevron as SVG images, which cannot read CSS
   variables, so each theme gets its own copy */
:root,[data-theme="dark"]{--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0d12' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aab1bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
[data-theme="light"]{--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23434a5a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
@media (prefers-color-scheme:light){[data-theme="system"]{--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23434a5a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}}
[data-theme]:has(.theme-pick[value="dark"]:checked){--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0d12' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aab1bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
[data-theme]:has(.theme-pick[value="light"]:checked){--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23434a5a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
@media (prefers-color-scheme:light){[data-theme]:has(.theme-pick[value="system"]:checked){--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23434a5a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}}
@media (prefers-color-scheme:dark){[data-theme]:has(.theme-pick[value="system"]:checked){--dk-check-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0d12' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");--dk-select-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aab1bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}}
a{color:var(--accent)}
a:hover{color:var(--accent)}
/* Components */
.dk-ico{width:18px;height:18px;flex:none}
.dk-kbd{display:inline-grid;place-items:center;min-width:1.45rem;height:1.35rem;padding:0 .35rem;border:1px solid var(--border);border-bottom-width:2px;
  border-radius:5px;background:var(--surface-2);color:var(--text-2);font:500 .72rem/1 var(--mono)}
.dk-link{color:var(--accent);font-weight:600;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:3px}
.dk-link:hover{color:var(--accent);text-decoration-color:currentColor}
.dk-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px;box-shadow:none}
/* .card through --bs-card-* */
.card.dk-card{--bs-card-bg:var(--surface-1);--bs-card-color:var(--text-1);--bs-card-border-color:var(--border);--bs-card-border-radius:var(--radius);
  --bs-card-inner-border-radius:calc(var(--radius) - 1px);--bs-card-spacer-x:20px;--bs-card-spacer-y:20px;--bs-card-cap-bg:transparent;--bs-card-title-color:var(--text-1);
  --bs-card-subtitle-color:var(--text-2);box-shadow:inset 0 1px 0 var(--highlight)}
.dk-card h2,.dk-card h3,.dk-card p{margin:0}
.dk-card .card-title{font-size:1rem;font-weight:650;letter-spacing:-.01em;margin:0}
.dk-card .card-subtitle{margin-top:2px;font-size:.85rem}
/* .btn variants through --bs-btn-* */
.btn-dk{--bs-btn-padding-x:1rem;--bs-btn-padding-y:.5rem;--bs-btn-font-size:.875rem;--bs-btn-font-weight:600;--bs-btn-line-height:1.2;--bs-btn-border-radius:var(--radius-sm);
  --bs-btn-bg:var(--surface-2);--bs-btn-color:var(--text-1);--bs-btn-border-color:var(--border);
  --bs-btn-hover-bg:var(--surface-3);--bs-btn-hover-color:var(--text-1);--bs-btn-hover-border-color:var(--border);
  --bs-btn-active-bg:var(--surface-3);--bs-btn-active-color:var(--text-1);--bs-btn-active-border-color:var(--border);
  --bs-btn-disabled-bg:var(--surface-2);--bs-btn-disabled-color:var(--text-1);--bs-btn-disabled-border-color:var(--border);--bs-btn-disabled-opacity:.5;
  --bs-btn-focus-box-shadow:inset 0 1px 0 var(--highlight);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:38px;white-space:nowrap;box-shadow:inset 0 1px 0 var(--highlight)}
.btn-dk:focus-visible,.btn-check:focus-visible+.btn-dk{outline:2px solid var(--focus);outline-offset:2px}
.btn-dk-primary{--bs-btn-bg:var(--accent);--bs-btn-color:var(--on-accent);--bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:color-mix(in srgb,var(--accent) 86%,var(--text-1));--bs-btn-hover-color:var(--on-accent);--bs-btn-hover-border-color:var(--accent);
  --bs-btn-active-bg:color-mix(in srgb,var(--accent) 86%,var(--text-1));--bs-btn-active-color:var(--on-accent);--bs-btn-active-border-color:var(--accent);
  --bs-btn-disabled-bg:var(--accent);--bs-btn-disabled-color:var(--on-accent);--bs-btn-disabled-border-color:var(--accent)}
.btn-dk-ghost{--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-color:var(--text-2);--bs-btn-hover-border-color:transparent;--bs-btn-active-border-color:transparent;box-shadow:none}
.btn-dk-danger{--bs-btn-color:var(--danger);--bs-btn-border-color:color-mix(in srgb,var(--danger) 40%,var(--border));--bs-btn-hover-color:var(--danger);
  --bs-btn-hover-border-color:color-mix(in srgb,var(--danger) 40%,var(--border));--bs-btn-active-color:var(--danger)}
.btn-dk.btn-sm{--bs-btn-padding-x:.75rem;--bs-btn-padding-y:.35rem;--bs-btn-font-size:.8rem;min-height:32px}
.btn-dk.btn-lg{--bs-btn-padding-x:1.35rem;--bs-btn-padding-y:.7rem;--bs-btn-font-size:.95rem;--bs-btn-border-radius:var(--radius-sm);min-height:46px}
.btn-dk-icon{--bs-btn-padding-x:0;--bs-btn-padding-y:0;width:38px}
.btn-dk-icon.btn-sm{width:32px}.btn-dk-icon.btn-lg{width:46px}
.btn-dk.btn-dk-round{--bs-btn-border-radius:999px}
@media (prefers-reduced-motion:reduce){.btn-dk{transition:none}}
/* Segmented control: a .btn-group of .btn-check radios */
.dk-seg{min-width:0;margin:0;padding:0;border:0}
.dk-seg legend{float:none;width:auto;margin-bottom:8px;padding:0;font-size:.8rem;font-weight:600;color:var(--text-2)}
.dk-seg .btn-group{flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-0)}
.dk-seg .btn{--bs-btn-padding-x:.8rem;--bs-btn-padding-y:.3rem;--bs-btn-font-size:.82rem;--bs-btn-font-weight:600;--bs-btn-color:var(--text-2);--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--text-1);--bs-btn-hover-bg:var(--surface-2);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-color:var(--accent);--bs-btn-active-bg:var(--accent-soft);--bs-btn-active-border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  display:inline-flex;align-items:center;gap:.4rem;min-height:30px;flex:none;border-radius:6px!important;margin:0!important}
.dk-seg .btn-check:focus-visible+.btn{outline:2px solid var(--focus);outline-offset:1px;box-shadow:none}
/* .badge tinted with color-mix */
.badge.dk-badge{--b:var(--text-2);--bs-badge-padding-x:.5rem;--bs-badge-padding-y:.15rem;--bs-badge-font-size:.72rem;--bs-badge-font-weight:650;--bs-badge-color:var(--b);--bs-badge-border-radius:999px;
  display:inline-flex;align-items:center;gap:.35rem;line-height:1.4;border:1px solid color-mix(in srgb,var(--b) 32%,transparent);background:color-mix(in srgb,var(--b) 12%,transparent)}
.dk-badge-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dk-badge.dk-badge-accent{--b:var(--accent)}.dk-badge.dk-badge-success{--b:var(--success)}.dk-badge.dk-badge-warning{--b:var(--warning)}.dk-badge.dk-badge-danger{--b:var(--danger)}
/* App shell: the element with data-theme is the theme root; the radios inside it flip the theme */
.dk-app{display:grid;grid-template-columns:224px minmax(0,1fr);overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface-0);color:var(--text-1)}
.dk-app__side{display:flex;flex-direction:column;gap:18px;padding:16px 12px;border-right:1px solid var(--border);background:var(--surface-1)}
.dk-app__main{display:flex;flex-direction:column;gap:20px;min-width:0;padding:20px}
.dk-brand{display:flex;align-items:center;gap:10px;padding:2px 8px;font-weight:700;letter-spacing:-.01em}
.dk-brand__mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--on-accent)}
.dk-brand__mark .dk-ico{width:16px;height:16px}
.dk-sidenav ul{display:grid;gap:1px;margin:0;padding:0;list-style:none}
.dk-sidelink{position:relative;display:flex;align-items:center;gap:10px;min-height:36px;padding:.4rem 10px;border-radius:var(--radius-sm);color:var(--text-2);font-size:.875rem;font-weight:500;text-decoration:none;white-space:nowrap}
.dk-sidelink .dk-ico{color:var(--text-3)}
.dk-sidelink:hover{background:var(--surface-3);color:var(--text-1)}
.dk-sidelink[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.dk-sidelink[aria-current="page"] .dk-ico{color:var(--accent)}
.dk-sidelink:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.dk-usage{margin-top:auto;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);font-size:.78rem;color:var(--text-2)}
.dk-usage p{display:flex;justify-content:space-between;gap:8px;margin:0 0 8px}
.dk-usage b{color:var(--text-1);font-weight:600}
.dk-bar{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.dk-bar>span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.dk-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.dk-top h1{margin:0;font-size:1.15rem;font-weight:650;letter-spacing:-.015em}
.dk-top h1 span{color:var(--text-3);font-weight:500}
.dk-top__end{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-left:auto}
.dk-cmdk{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:.35rem .5rem .35rem .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-3);font-family:inherit;font-size:.85rem;cursor:pointer}
.dk-cmdk:hover{border-color:var(--edge);color:var(--text-2)}
.dk-cmdk:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dk-cmdk span:last-child{display:inline-flex;gap:3px}
.dk-avatar{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:inherit;font-size:.72rem;font-weight:700;cursor:pointer}
.dk-avatar:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dk-theme .dk-seg__opts{background:var(--surface-1)}
.dk-theme .dk-seg__opt span{padding:.3rem .6rem}
.dk-theme .dk-ico{width:16px;height:16px}
/* KPI tiles */
.dk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.dk-kpi{padding:16px}
.dk-kpi__head{display:flex;align-items:center;gap:8px;margin:0;font-size:.8rem;font-weight:500;color:var(--text-2)}
.dk-kpi__head .dk-ico{width:15px;height:15px;color:var(--text-3)}
.dk-kpi__value{margin:8px 0 6px!important;font-size:1.45rem;font-weight:650;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.dk-kpi .dk-badge{align-self:flex-start}
.dk-kpi .dk-badge .dk-ico{width:12px;height:12px}
.dk-kpi__spark{margin-top:12px}
/* Chart and services */
.dk-split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:stretch}
.dk-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.dk-panel-head h2{margin:0;font-size:.95rem;font-weight:650}
.dk-legend{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none;font-size:.75rem;color:var(--text-2)}
.dk-legend li{display:inline-flex;align-items:center;gap:6px}
.dk-legend i{width:14px;height:3px;border-radius:2px;background:var(--accent)}
.dk-legend i.dk-legend--dash{background:repeating-linear-gradient(90deg,var(--text-3) 0 4px,transparent 4px 7px)}
.dk-chart__plot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.dk-chart__y{display:flex;flex-direction:column;justify-content:space-between;height:180px;margin:-7px 0;font:500 .7rem var(--mono);color:var(--text-3);text-align:right}
.dk-chart__x{display:flex;justify-content:space-between;margin:8px 0 0 30px;font:500 .7rem var(--mono);color:var(--text-3)}
.dk-services{display:grid;margin:0;padding:0;list-style:none}
.dk-services li{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:.85rem}
.dk-services li+li{border-top:1px solid var(--border)}
.dk-services code{font:500 .82rem var(--mono);color:var(--text-1)}
.dk-services small{margin-left:auto;font:500 .75rem var(--mono);color:var(--text-3)}
/* Deployments table */
.dk-table-wrap{overflow-x:auto;margin:0 -20px -20px}
.dk-table{width:100%;min-width:640px;border-collapse:collapse;font-size:.84rem}
.dk-table th{padding:8px 20px;border-bottom:1px solid var(--border);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-align:left;text-transform:uppercase;color:var(--text-3)}
.dk-table td{padding:11px 20px;border-bottom:1px solid var(--border);color:var(--text-2);vertical-align:middle}
.dk-table tr:last-child td{border-bottom:0}
.dk-table tbody tr:hover{background:var(--surface-2)}
.dk-table td b{display:block;font-weight:600;color:var(--text-1)}
.dk-table code,.dk-branch{font:500 .78rem var(--mono);color:var(--text-3)}
.dk-branch{display:inline-flex;align-items:center;gap:5px}
.dk-branch .dk-ico{width:14px;height:14px}
/* Log stream */
.dk-logs{margin:0;padding:12px 14px;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-0);font:.78rem/1.75 var(--mono);color:var(--text-2);list-style:none}
.dk-logs li{display:grid;grid-template-columns:auto 3.6rem 1fr;gap:12px;white-space:nowrap}
.dk-logs time{color:var(--text-3)}
.dk-logs b{font-weight:600;color:var(--l)}
.dk-table-wrap:focus-visible,.dk-logs:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:900px){.dk-app{grid-template-columns:minmax(0,1fr)}.dk-app__side{border-right:0;border-bottom:1px solid var(--border)}
  .dk-sidenav ul{display:flex;overflow-x:auto}.dk-usage{display:none}.dk-split{grid-template-columns:1fr}}
@media (max-width:560px){.dk-cmdk span,.dk-cmdk span:last-child{display:none}.dk-top__end{margin-left:0}}
/* Bootstrap pieces: .card, .table, .nav, .btn-check segmented theme switch, .progress */
.dk-kpi.card{--bs-card-spacer-x:16px;--bs-card-spacer-y:16px;padding:16px}
.dk-table.table{--bs-table-bg:transparent;--bs-table-color:var(--text-2);--bs-table-border-color:var(--border);--bs-table-hover-bg:var(--surface-2);margin:0}
.dk-table.table>:not(caption)>*>*{padding:11px 20px;background:transparent;color:var(--text-2)}
.dk-table.table>thead>tr>th{padding:8px 20px;color:var(--text-3)}
.dk-table.table>tbody>tr:hover>*{background:var(--surface-2)}
.dk-theme .btn{padding:.3rem .6rem}
.dk-theme .btn-group{background:var(--surface-1)}
.dk-sidenav .nav{flex-wrap:nowrap}
.dk-bar.progress{border-radius:999px}

// Theme toggle: the radios already switch the theme with :has(); this mirrors the choice to
// data-theme (for browsers without :has()) and remembers it for the next visit.
(() => {
  const root = document.querySelector('[data-theme-root]'); if (!root) return;
  const picks = root.querySelectorAll('.theme-pick');
  let saved = null; try { saved = localStorage.getItem('dk-theme'); } catch (e) {}
  const apply = v => { root.dataset.theme = v; picks.forEach(p => { p.checked = p.value === v; }); };
  if (saved && ['dark', 'light', 'system'].includes(saved)) apply(saved);
  picks.forEach(p => p.addEventListener('change', () => { apply(p.value); try { localStorage.setItem('dk-theme', p.value); } catch (e) {} }));
})();

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="dk-i-terminal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="18" height="15" rx="2"/><path d="m7 9.5 3 2.5-3 2.5M12.5 15H17"/></symbol>
  <symbol id="dk-i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 12 4l8 6.5V20h-5.5v-6h-5v6H4z"/></symbol>
  <symbol id="dk-i-rocket" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 15c-1.5 1.3-2 4-2 4s2.7-.5 4-2M14.5 4.5C17.5 3 21 3 21 3s0 3.5-1.5 6.5L13 16l-5-5z"/><path d="m9.5 12.5-3-1L8.5 9h4M11.5 14.5l1 3 2.5-2V11.5"/></symbol>
  <symbol id="dk-i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5-8.5 4.5L3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
  <symbol id="dk-i-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20V4M4 20h16"/><path d="m7.5 15 3.5-4 3 2.5 5-6"/></symbol>
  <symbol id="dk-i-db" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="7.5" ry="2.75"/><path d="M4.5 6v12c0 1.5 3.4 2.75 7.5 2.75s7.5-1.25 7.5-2.75V6M4.5 12c0 1.5 3.4 2.75 7.5 2.75s7.5-1.25 7.5-2.75"/></symbol>
  <symbol id="dk-i-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></symbol>
  <symbol id="dk-i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></symbol>
  <symbol id="dk-i-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3.75"/><path d="M12 3v1.75M12 19.25V21M3 12h1.75M19.25 12H21M5.6 5.6l1.25 1.25M17.15 17.15l1.25 1.25M5.6 18.4l1.25-1.25M17.15 6.85l1.25-1.25"/></symbol>
  <symbol id="dk-i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></symbol>
  <symbol id="dk-i-monitor" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="18" height="12" rx="2"/><path d="M8.5 20h7M12 16.5V20"/></symbol>
  <symbol id="dk-i-activity" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h4l2.5-6.5 5 13L17 12h4"/></symbol>
  <symbol id="dk-i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
  <symbol id="dk-i-warn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4 2.8 19.5h18.4z"/><path d="M12 10v4.5M12 17.25h.01"/></symbol>
  <symbol id="dk-i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 13.5h6L10 21l8-10.5h-6z"/></symbol>
  <symbol id="dk-i-arrowup" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M9 7h8v8"/></symbol>
  <symbol id="dk-i-arrowdown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7l10 10M17 9v8H9"/></symbol>
  <symbol id="dk-i-branch" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6.5" cy="5.5" r="2"/><circle cx="6.5" cy="18.5" r="2"/><circle cx="17.5" cy="7.5" r="2"/><path d="M6.5 7.5v9M17.5 9.5c0 4-4 5-11 7"/></symbol>
  <symbol id="dk-i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9a6 6 0 1 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9"/><path d="M10.3 20a2 2 0 0 0 3.4 0"/></symbol>
  <symbol id="dk-i-refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3L19.5 9"/><path d="M19.5 4.5V9H15"/></symbol>
</svg>
<div class="grid overflow-hidden rounded-2xl border border-line bg-surface-0 text-ink-1 grid-cols-[minmax(0,1fr)] min-[901px]:grid-cols-[224px_minmax(0,1fr)]" data-theme="dark" data-theme-root>
<aside class="flex flex-col gap-[18px] border-line bg-surface-1 px-3 py-4 max-[900px]:border-b min-[901px]:border-r"><div class="flex items-center gap-2.5 px-2 py-0.5 font-bold tracking-[-.01em]"><span class="grid size-7 place-items-center rounded-ui-sm bg-accent text-on-accent" aria-hidden="true"><svg class="size-4" aria-hidden="true" focusable="false"><use href="#dk-i-terminal"/></svg></span>Northwind</div><nav aria-label="Project"><ul class="grid gap-px max-[900px]:flex max-[900px]:overflow-x-auto">
<li><a class="flex min-h-9 items-center gap-2.5 rounded-ui-sm px-2.5 py-[.4rem] text-[.875rem] font-medium whitespace-nowrap text-ink-2 no-underline hover:bg-surface-3 hover:text-ink-1 aria-[current=page]:bg-accent-soft aria-[current=page]:font-semibold aria-[current=page]:text-accent group focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus" href="#overview" aria-current="page"><svg class="size-[18px] shrink-0 text-ink-3 group-aria-[current=page]:text-accent" aria-hidden="true" focusable="false"><use href="#dk-i-home"/></svg>Overview</a></li>
<li><a class="flex min-h-9 items-center gap-2.5 rounded-ui-sm px-2.5 py-[.4rem] text-[.875rem] font-medium whitespace-nowrap text-ink-2 no-underline hover:bg-surface-3 hover:text-ink-1 aria-[current=page]:bg-accent-soft aria-[current=page]:font-semibold aria-[current=page]:text-accent group focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus" href="#deployments"><svg class="size-[18px] shrink-0 text-ink-3 group-aria-[current=page]:text-accent" aria-hidden="true" focusable="false"><use href="#dk-i-rocket"/></svg>Deployments</a></li>
<li><a class="flex min-h-9 items-center gap-2.5 rounded-ui-sm px-2.5 py-[.4rem] text-[.875rem] font-medium whitespace-nowrap text-ink-2 no-underline hover:bg-surface-3 hover:text-ink-1 aria-[current=page]:bg-accent-soft aria-[current=page]:font-semibold aria-[current=page]:text-accent group focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus" href="#logs"><svg class="size-[18px] shrink-0 text-ink-3 group-aria-[current=page]:text-accent" aria-hidden="true" focusable="false"><use href="#dk-i-layers"/></svg>Logs</a></li>
<li><a class="flex min-h-9 items-center gap-2.5 rounded-ui-sm px-2.5 py-[.4rem] text-[.875rem] font-medium whitespace-nowrap text-ink-2 no-underline hover:bg-surface-3 hover:text-ink-1 aria-[current=page]:bg-accent-soft aria-[current=page]:font-semibold aria-[current=page]:text-accent group focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus" href="#analytics"><svg class="size-[18px] shrink-0 text-ink-3 group-aria-[current=page]:text-accent" aria-hidden="true" focusable="false"><use href="#dk-i-chart"/></svg>Analytics</a></li>
<li><a class="flex min-h-9 items-center gap-2.5 rounded-ui-sm px-2.5 py-[.4rem] text-[.875rem] font-medium whitespace-nowrap text-ink-2 no-underline hover:bg-surface-3 hover:text-ink-1 aria-[current=page]:bg-accent-soft aria-[current=page]:font-semibold aria-[current=page]:text-accent group focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus" href="#storage"><svg class="size-[18px] shrink-0 text-ink-3 group-aria-[current=page]:text-accent" aria-hidden="true" focusable="false"><use href="#dk-i-db"/></svg>Storage</a></li>
<li><a class="flex min-h-9 items-center gap-2.5 rounded-ui-sm px-2.5 py-[.4rem] text-[.875rem] font-medium whitespace-nowrap text-ink-2 no-underline hover:bg-surface-3 hover:text-ink-1 aria-[current=page]:bg-accent-soft aria-[current=page]:font-semibold aria-[current=page]:text-accent group focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus" href="#settings"><svg class="size-[18px] shrink-0 text-ink-3 group-aria-[current=page]:text-accent" aria-hidden="true" focusable="false"><use href="#dk-i-settings"/></svg>Settings</a></li>
</ul></nav><div class="mt-auto rounded-ui-sm border border-line bg-surface-2 p-3 text-[.78rem] text-ink-2 max-[900px]:hidden"><p class="mb-2 flex justify-between gap-2"><span>Build minutes</span><b class="font-semibold text-ink-1">3,420 / 6,000</b></p><div class="h-1.5 overflow-hidden rounded-full bg-surface-3" role="progressbar" aria-label="Build minutes used" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100"><span class="block h-full w-[57%] rounded-full bg-accent"></span></div></div></aside>
<main class="flex min-w-0 flex-col gap-5 p-5"><header class="flex flex-wrap items-center gap-3"><h1 class="text-[1.15rem] font-[650] tracking-[-.015em]"><span class="font-medium text-ink-3">atlas-api /</span> Overview</h1><div class="ml-auto flex flex-wrap items-center gap-2.5 max-[560px]:ml-0">
<button class="inline-flex min-h-9 cursor-pointer items-center gap-2.5 rounded-ui-sm border border-line bg-surface-2 py-[.35rem] pr-2 pl-3 text-[.85rem] text-ink-3 hover:border-edge hover:text-ink-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus" type="button" aria-keyshortcuts="Meta+K"><svg class="size-[18px] shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-search"/></svg><span class="max-[560px]:hidden">Search or jump to</span><span class="inline-flex gap-[3px] max-[560px]:hidden" aria-hidden="true"><kbd class="inline-grid h-[1.35rem] min-w-[1.45rem] place-items-center rounded-[5px] border border-b-2 border-line bg-surface-2 px-[.35rem] font-mono text-[.72rem] leading-none font-medium text-ink-2">⌘</kbd><kbd class="inline-grid h-[1.35rem] min-w-[1.45rem] place-items-center rounded-[5px] border border-b-2 border-line bg-surface-2 px-[.35rem] font-mono text-[.72rem] leading-none font-medium text-ink-2">K</kbd></span></button>
<fieldset class="m-0 min-w-0 border-0 p-0"><legend class="sr-only">Theme</legend><div class="inline-flex flex-wrap gap-0.5 rounded-ui-sm border border-line bg-surface-1 p-[3px]"><label class="relative"><input class="peer sr-only theme-pick" type="radio" name="theme" value="light"><span class="inline-flex min-h-[30px] cursor-pointer items-center gap-[.4rem] rounded-md border border-transparent px-[.6rem] py-[.3rem] text-[.82rem] font-semibold text-ink-2 transition-colors duration-150 hover:bg-surface-2 hover:text-ink-1 motion-reduce:transition-none peer-checked:border-[color-mix(in_srgb,var(--accent)_55%,transparent)] peer-checked:bg-accent-soft peer-checked:text-accent peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-focus"><svg class="size-4 shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-sun"/></svg>Light</span></label><label class="relative"><input class="peer sr-only theme-pick" type="radio" name="theme" value="dark" checked><span class="inline-flex min-h-[30px] cursor-pointer items-center gap-[.4rem] rounded-md border border-transparent px-[.6rem] py-[.3rem] text-[.82rem] font-semibold text-ink-2 transition-colors duration-150 hover:bg-surface-2 hover:text-ink-1 motion-reduce:transition-none peer-checked:border-[color-mix(in_srgb,var(--accent)_55%,transparent)] peer-checked:bg-accent-soft peer-checked:text-accent peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-focus"><svg class="size-4 shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-moon"/></svg>Dark</span></label><label class="relative"><input class="peer sr-only theme-pick" type="radio" name="theme" value="system"><span class="inline-flex min-h-[30px] cursor-pointer items-center gap-[.4rem] rounded-md border border-transparent px-[.6rem] py-[.3rem] text-[.82rem] font-semibold text-ink-2 transition-colors duration-150 hover:bg-surface-2 hover:text-ink-1 motion-reduce:transition-none peer-checked:border-[color-mix(in_srgb,var(--accent)_55%,transparent)] peer-checked:bg-accent-soft peer-checked:text-accent peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-focus"><svg class="size-4 shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-monitor"/></svg>System</span></label></div></fieldset>
<button class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui-sm border font-semibold leading-[1.2] whitespace-nowrap no-underline transition-colors duration-150 motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus border-line bg-surface-2 text-ink-1 inset-shadow-hl hover:bg-surface-3 size-[38px] p-0" type="button" aria-label="Notifications"><svg class="size-[18px] shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-bell"/></svg></button><button class="inline-grid size-[34px] cursor-pointer place-items-center rounded-full border border-line bg-accent-soft text-[.72rem] font-bold text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus" type="button" aria-label="Account menu for Mira Chen">MC</button></div></header>
<section class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,200px),1fr))] gap-3.5" aria-label="Key metrics">
<article class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-4"><h2 class="flex items-center gap-2 text-[.8rem] font-medium text-ink-2"><svg class="size-[15px] shrink-0 text-ink-3" aria-hidden="true" focusable="false"><use href="#dk-i-activity"/></svg>Requests · 24 h</h2><p class="mt-2 mb-1.5 text-[1.45rem] leading-[1.15] font-[650] tracking-[-.02em] tabular-nums">1.84M</p><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--success)_32%,transparent)] bg-[color-mix(in_srgb,var(--success)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-success [&_svg]:size-3"><svg class="size-3 shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-arrowup"/></svg><span class="sr-only">up </span>12.4%</span><div class="mt-3"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 29.0 L21.8 25.8 L43.6 27.4 L65.5 21.0 L87.3 22.6 L109.1 17.8 L130.9 19.4 L152.7 13.0 L174.5 14.6 L196.4 9.8 L218.2 11.4 L240.0 5.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 29.0 L21.8 25.8 L43.6 27.4 L65.5 21.0 L87.3 22.6 L109.1 17.8 L130.9 19.4 L152.7 13.0 L174.5 14.6 L196.4 9.8 L218.2 11.4 L240.0 5.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="sr-only">Trend: rising.</span></div></article>
<article class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-4"><h2 class="flex items-center gap-2 text-[.8rem] font-medium text-ink-2"><svg class="size-[15px] shrink-0 text-ink-3" aria-hidden="true" focusable="false"><use href="#dk-i-clock"/></svg>p95 latency</h2><p class="mt-2 mb-1.5 text-[1.45rem] leading-[1.15] font-[650] tracking-[-.02em] tabular-nums">182 ms</p><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--success)_32%,transparent)] bg-[color-mix(in_srgb,var(--success)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-success [&_svg]:size-3"><svg class="size-3 shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-arrowdown"/></svg><span class="sr-only">down </span>8.1%</span><div class="mt-3"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 5.0 L21.8 6.7 L43.6 10.0 L65.5 8.7 L87.3 15.3 L109.1 17.4 L130.9 19.9 L152.7 22.0 L174.5 23.2 L196.4 25.7 L218.2 27.3 L240.0 29.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 5.0 L21.8 6.7 L43.6 10.0 L65.5 8.7 L87.3 15.3 L109.1 17.4 L130.9 19.9 L152.7 22.0 L174.5 23.2 L196.4 25.7 L218.2 27.3 L240.0 29.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="sr-only">Trend: falling.</span></div></article>
<article class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-4"><h2 class="flex items-center gap-2 text-[.8rem] font-medium text-ink-2"><svg class="size-[15px] shrink-0 text-ink-3" aria-hidden="true" focusable="false"><use href="#dk-i-warn"/></svg>Error rate</h2><p class="mt-2 mb-1.5 text-[1.45rem] leading-[1.15] font-[650] tracking-[-.02em] tabular-nums">0.42%</p><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--danger)_32%,transparent)] bg-[color-mix(in_srgb,var(--danger)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-danger [&_svg]:size-3"><svg class="size-3 shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-arrowup"/></svg><span class="sr-only">up </span>0.10 pt</span><div class="mt-3"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 29.0 L21.8 26.8 L43.6 27.9 L65.5 23.5 L87.3 24.6 L109.1 18.1 L130.9 20.3 L152.7 14.8 L174.5 11.5 L196.4 12.6 L218.2 7.2 L240.0 5.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 29.0 L21.8 26.8 L43.6 27.9 L65.5 23.5 L87.3 24.6 L109.1 18.1 L130.9 20.3 L152.7 14.8 L174.5 11.5 L196.4 12.6 L218.2 7.2 L240.0 5.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="sr-only">Trend: climbing.</span></div></article>
<article class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-4"><h2 class="flex items-center gap-2 text-[.8rem] font-medium text-ink-2"><svg class="size-[15px] shrink-0 text-ink-3" aria-hidden="true" focusable="false"><use href="#dk-i-zap"/></svg>Spend · October</h2><p class="mt-2 mb-1.5 text-[1.45rem] leading-[1.15] font-[650] tracking-[-.02em] tabular-nums">$412.80</p><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--warning)_32%,transparent)] bg-[color-mix(in_srgb,var(--warning)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-warning [&_svg]:size-3"><svg class="size-3 shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-arrowup"/></svg><span class="sr-only">up </span>69% of budget</span><div class="mt-3"><svg viewBox="0 0 240 32" preserveAspectRatio="none" style="display:block;width:100%;height:32px" aria-hidden="true" focusable="false"><path d="M0.0 29.0 L21.8 26.4 L43.6 23.8 L65.5 21.9 L87.3 19.3 L109.1 16.7 L130.9 14.8 L152.7 12.2 L174.5 10.3 L196.4 8.4 L218.2 6.4 L240.0 5.0 L240 32 L0 32 Z" style="fill:color-mix(in srgb,var(--accent) 16%,transparent)"/><path d="M0.0 29.0 L21.8 26.4 L43.6 23.8 L65.5 21.9 L87.3 19.3 L109.1 16.7 L130.9 14.8 L152.7 12.2 L174.5 10.3 L196.4 8.4 L218.2 6.4 L240.0 5.0" style="fill:none;stroke:var(--accent);stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round"/></svg><span class="sr-only">Trend: on track to reach the budget.</span></div></article>
</section><div class="grid items-stretch gap-3.5 min-[901px]:grid-cols-[minmax(0,1.7fr)_minmax(0,1fr)]">
<section class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-5" aria-labelledby="h-traffic"><div class="mb-3.5 flex flex-wrap items-center justify-between gap-2.5"><h2 class="text-[.95rem] font-[650]" id="h-traffic">Traffic · requests per hour</h2><ul class="flex flex-wrap gap-3.5 text-[.75rem] text-ink-2"><li class="inline-flex items-center gap-1.5"><i class="h-[3px] w-3.5 rounded-sm bg-accent"></i>Today</li><li class="inline-flex items-center gap-1.5"><i class="h-[3px] w-3.5 rounded-sm bg-[repeating-linear-gradient(90deg,var(--text-3)_0_4px,transparent_4px_7px)]"></i>Last week</li></ul></div><div class="grid grid-cols-[auto_minmax(0,1fr)] gap-2.5"><div class="-my-[7px] flex h-[180px] flex-col justify-between text-right font-mono text-[.7rem] font-medium text-ink-3" aria-hidden="true"><span>4k</span><span>3k</span><span>2k</span><span>1k</span><span>0</span></div><svg viewBox="0 0 560 180" preserveAspectRatio="none" aria-hidden="true" focusable="false" style="display:block;width:100%;height:180px;overflow:visible"><path d="M0 0.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 45H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 90H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 135H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0 179.5H560" style="stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0 L560 180 L0 180 Z" style="fill:color-mix(in srgb,var(--accent) 18%,transparent)"/><path d="M0.0 135.0 L80.0 144.0 L160.0 139.5 L240.0 117.0 L320.0 67.5 L400.0 45.0 L480.0 49.5 L560.0 81.0" style="fill:none;stroke:var(--text-3);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke"/><path d="M0.0 126.0 L80.0 139.5 L160.0 144.0 L240.0 108.0 L320.0 40.5 L400.0 9.0 L480.0 27.0 L560.0 63.0" style="fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke"/></svg></div><div class="mt-2 ml-[30px] flex justify-between font-mono text-[.7rem] font-medium text-ink-3" aria-hidden="true"><span>00</span><span>03</span><span>06</span><span>09</span><span>12</span><span>15</span><span>18</span><span>21</span></div><div class="sr-only"><table><caption>Requests per hour, today and the same day last week</caption><tr><th scope="col">Hour</th><th scope="col">Today</th><th scope="col">Last week</th></tr><tr><th scope="row">00:00</th><td>1,200</td><td>1,000</td></tr><tr><th scope="row">03:00</th><td>900</td><td>800</td></tr><tr><th scope="row">06:00</th><td>800</td><td>900</td></tr><tr><th scope="row">09:00</th><td>1,600</td><td>1,400</td></tr><tr><th scope="row">12:00</th><td>3,100</td><td>2,500</td></tr><tr><th scope="row">15:00</th><td>3,800</td><td>3,000</td></tr><tr><th scope="row">18:00</th><td>3,400</td><td>2,900</td></tr><tr><th scope="row">21:00</th><td>2,600</td><td>2,200</td></tr></table></div></section>
<section class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-5" aria-labelledby="h-svc"><div class="mb-3.5 flex flex-wrap items-center justify-between gap-2.5"><h2 class="text-[.95rem] font-[650]" id="h-svc">Services</h2><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--warning)_32%,transparent)] bg-[color-mix(in_srgb,var(--warning)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-warning [&_svg]:size-3">1 degraded, 1 down</span></div><ul class="grid divide-y divide-line">
<li class="flex items-center gap-2.5 py-2.5 text-[.85rem]"><code class="font-mono text-[.82rem] font-medium text-ink-1">api</code><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--success)_32%,transparent)] bg-[color-mix(in_srgb,var(--success)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-success before:size-1.5 before:rounded-full before:bg-current before:content-[''] [&_svg]:size-3">Healthy</span><small class="ml-auto font-mono text-[.75rem] font-medium text-ink-3">38 ms</small></li>
<li class="flex items-center gap-2.5 py-2.5 text-[.85rem]"><code class="font-mono text-[.82rem] font-medium text-ink-1">worker</code><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--warning)_32%,transparent)] bg-[color-mix(in_srgb,var(--warning)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-warning before:size-1.5 before:rounded-full before:bg-current before:content-[''] [&_svg]:size-3">Degraded</span><small class="ml-auto font-mono text-[.75rem] font-medium text-ink-3">1.4 s</small></li>
<li class="flex items-center gap-2.5 py-2.5 text-[.85rem]"><code class="font-mono text-[.82rem] font-medium text-ink-1">cron</code><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--success)_32%,transparent)] bg-[color-mix(in_srgb,var(--success)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-success before:size-1.5 before:rounded-full before:bg-current before:content-[''] [&_svg]:size-3">Healthy</span><small class="ml-auto font-mono text-[.75rem] font-medium text-ink-3">—</small></li>
<li class="flex items-center gap-2.5 py-2.5 text-[.85rem]"><code class="font-mono text-[.82rem] font-medium text-ink-1">db-primary</code><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--success)_32%,transparent)] bg-[color-mix(in_srgb,var(--success)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-success before:size-1.5 before:rounded-full before:bg-current before:content-[''] [&_svg]:size-3">Healthy</span><small class="ml-auto font-mono text-[.75rem] font-medium text-ink-3">4 ms</small></li>
<li class="flex items-center gap-2.5 py-2.5 text-[.85rem]"><code class="font-mono text-[.82rem] font-medium text-ink-1">search</code><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--danger)_32%,transparent)] bg-[color-mix(in_srgb,var(--danger)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-danger before:size-1.5 before:rounded-full before:bg-current before:content-[''] [&_svg]:size-3">Down</span><small class="ml-auto font-mono text-[.75rem] font-medium text-ink-3">timeout</small></li>
</ul></section></div>
<section class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-5" aria-labelledby="h-dep"><div class="mb-3.5 flex flex-wrap items-center justify-between gap-2.5"><h2 class="text-[.95rem] font-[650]" id="h-dep">Recent deployments</h2><button class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-ui-sm border font-semibold leading-[1.2] whitespace-nowrap no-underline transition-colors duration-150 motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus border-line bg-surface-2 text-ink-1 inset-shadow-hl hover:bg-surface-3 min-h-8 px-3 py-[.35rem] text-[.8rem]" type="button"><svg class="size-[18px] shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-refresh"/></svg>Redeploy main</button></div><div class="-mx-5 -mb-5 overflow-x-auto focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus" tabindex="0" role="region" aria-labelledby="h-dep"><table class="w-full min-w-[640px] border-collapse text-[.84rem]">
<thead><tr><th class="border-b border-line px-5 py-2 text-left text-[.7rem] font-semibold tracking-[.08em] text-ink-3 uppercase" scope="col">Commit</th><th class="border-b border-line px-5 py-2 text-left text-[.7rem] font-semibold tracking-[.08em] text-ink-3 uppercase" scope="col">Branch</th><th class="border-b border-line px-5 py-2 text-left text-[.7rem] font-semibold tracking-[.08em] text-ink-3 uppercase" scope="col">Status</th><th class="border-b border-line px-5 py-2 text-left text-[.7rem] font-semibold tracking-[.08em] text-ink-3 uppercase" scope="col">Author</th><th class="border-b border-line px-5 py-2 text-left text-[.7rem] font-semibold tracking-[.08em] text-ink-3 uppercase" scope="col">When</th></tr></thead><tbody>
<tr class="group hover:bg-surface-2"><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><b class="block font-semibold text-ink-1">Move sessions to the new Redis cluster</b><code class="font-mono text-[.78rem] font-medium text-ink-3">dpl_7Kq2xT</code></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><span class="inline-flex items-center gap-[5px] font-mono text-[.78rem] font-medium text-ink-3"><svg class="size-3.5 shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>main</span></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--accent)_32%,transparent)] bg-[color-mix(in_srgb,var(--accent)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-accent before:size-1.5 before:rounded-full before:bg-current before:content-[''] [&_svg]:size-3">Building</span></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0">Mira Chen</td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0">2 min ago</td></tr>
<tr class="group hover:bg-surface-2"><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><b class="block font-semibold text-ink-1">Drop legacy /v1/auth routes</b><code class="font-mono text-[.78rem] font-medium text-ink-3">dpl_9fA1cE</code></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><span class="inline-flex items-center gap-[5px] font-mono text-[.78rem] font-medium text-ink-3"><svg class="size-3.5 shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>main</span></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--success)_32%,transparent)] bg-[color-mix(in_srgb,var(--success)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-success before:size-1.5 before:rounded-full before:bg-current before:content-[''] [&_svg]:size-3">Ready</span></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0">Jonas Okafor</td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0">1 h ago</td></tr>
<tr class="group hover:bg-surface-2"><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><b class="block font-semibold text-ink-1">Retry webhook delivery with backoff</b><code class="font-mono text-[.78rem] font-medium text-ink-3">dpl_3bD8kL</code></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><span class="inline-flex items-center gap-[5px] font-mono text-[.78rem] font-medium text-ink-3"><svg class="size-3.5 shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>fix/webhooks</span></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--danger)_32%,transparent)] bg-[color-mix(in_srgb,var(--danger)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-danger before:size-1.5 before:rounded-full before:bg-current before:content-[''] [&_svg]:size-3">Failed</span></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0">Priya Raman</td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0">3 h ago</td></tr>
<tr class="group hover:bg-surface-2"><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><b class="block font-semibold text-ink-1">Bump node to 22.11</b><code class="font-mono text-[.78rem] font-medium text-ink-3">dpl_5cE0pQ</code></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><span class="inline-flex items-center gap-[5px] font-mono text-[.78rem] font-medium text-ink-3"><svg class="size-3.5 shrink-0" aria-hidden="true" focusable="false"><use href="#dk-i-branch"/></svg>chore/node-22</span></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0"><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--success)_32%,transparent)] bg-[color-mix(in_srgb,var(--success)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-success before:size-1.5 before:rounded-full before:bg-current before:content-[''] [&_svg]:size-3">Ready</span></td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0">Leo Brandt</td><td class="border-b border-line px-5 py-[11px] align-middle text-ink-2 group-last:border-b-0">Yesterday</td></tr>
</tbody></table></div></section>
<section class="rounded-ui border border-line bg-surface-1 text-ink-1 inset-shadow-hl p-5" aria-labelledby="h-logs"><div class="mb-3.5 flex flex-wrap items-center justify-between gap-2.5"><h2 class="text-[.95rem] font-[650]" id="h-logs">Live logs</h2><span class="inline-flex items-center gap-[.35rem] rounded-full border border-[color-mix(in_srgb,var(--success)_32%,transparent)] bg-[color-mix(in_srgb,var(--success)_12%,transparent)] px-2 py-[.15rem] text-[.72rem] leading-[1.4] font-[650] whitespace-nowrap text-success before:size-1.5 before:rounded-full before:bg-current before:content-[''] [&_svg]:size-3">Streaming</span></div><ol class="overflow-x-auto rounded-ui-sm border border-line bg-surface-0 px-3.5 py-3 font-mono text-[.78rem] leading-[1.75] text-ink-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus" tabindex="0" aria-labelledby="h-logs">
<li class="grid grid-cols-[auto_3.6rem_1fr] gap-3 whitespace-nowrap"><time class="text-ink-3">12:04:18</time><b class="font-semibold text-accent">INFO</b><span>GET /v2/projects 200 · 41 ms</span></li>
<li class="grid grid-cols-[auto_3.6rem_1fr] gap-3 whitespace-nowrap"><time class="text-ink-3">12:04:19</time><b class="font-semibold text-accent">INFO</b><span>POST /v2/deployments 201 · 212 ms</span></li>
<li class="grid grid-cols-[auto_3.6rem_1fr] gap-3 whitespace-nowrap"><time class="text-ink-3">12:04:21</time><b class="font-semibold text-warning">WARN</b><span>worker queue depth 1,204 above 1,000</span></li>
<li class="grid grid-cols-[auto_3.6rem_1fr] gap-3 whitespace-nowrap"><time class="text-ink-3">12:04:22</time><b class="font-semibold text-danger">ERROR</b><span>search: upstream timeout after 5,000 ms</span></li>
<li class="grid grid-cols-[auto_3.6rem_1fr] gap-3 whitespace-nowrap"><time class="text-ink-3">12:04:24</time><b class="font-semibold text-accent">INFO</b><span>cache hit ratio 0.93 over the last 5 min</span></li>
</ol></section></main></div>

/* ── Dark UI kit tokens (uiCookies) — identical in every set ──────────────────────────────
   Dark first. Elevation is a lighter surface, not a shadow: surface-0 is the page, 1 cards and
   panels, 2 controls, menus and dialogs, 3 hover, selected rows and tooltips.
   Every colour is a light-dark() pair, so flipping color-scheme turns the whole kit light:
   data-theme="dark" | "light" | "system" on any wrapper (system follows prefers-color-scheme),
   or a checked .theme-pick radio inside a [data-theme] element (:has()).
   Contrast, dark | light, on the worst surface (surface-3): text-1 12.2 | 15.0, text-2 6.6 | 7.3,
   text-3 4.8 | 5.4, accent 5.4 | 5.1, success 7.7 | 5.0, warning 8.4 | 5.2, danger 6.8 | 5.0;
   edge (control boundaries) 3.3 | 3.1 and focus 7.9 | 5.9 against every surface. */
:root{color-scheme:dark}
[data-theme="dark"]{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
[data-theme="system"]{color-scheme:light dark}
[data-theme]:has(.theme-pick[value="dark"]:checked){color-scheme:dark}
[data-theme]:has(.theme-pick[value="light"]:checked){color-scheme:light}
[data-theme]:has(.theme-pick[value="system"]:checked){color-scheme:light dark}
:root{
  --surface-0:light-dark(#eef1f5,#0b0d12);   /* page */
  --surface-1:light-dark(#ffffff,#151821);   /* cards, panels, navbar, sidebar */
  --surface-2:light-dark(#f6f7f9,#1d212c);   /* controls, menus, dialogs, toasts */
  --surface-3:light-dark(#e6e9ef,#262b38);   /* hover, selected rows, tooltips */
  --text-1:light-dark(#12151c,#eceef3);      /* primary text */
  --text-2:light-dark(#434a5a,#aab1bf);      /* secondary text */
  --text-3:light-dark(#555d6e,#8f96a8);      /* captions, placeholders, axis labels */
  --border:light-dark(#dde1e8,#2a2f3c);      /* decorative 1px dividers and card edges */
  --edge:light-dark(#7c8496,#737b90);        /* control boundaries: fields, boxes, tracks */
  --accent:light-dark(#4452d0,#8b97ff);      /* the one vivid colour: links, selected, primary */
  --accent-soft:light-dark(#e6e8ff,#232a4d); /* selected backgrounds; accent text keeps 5.2 | 5.3 on it */
  --on-accent:light-dark(#ffffff,#0b0d12);   /* text on accent fills, 6.2 | 7.4 */
  --success:light-dark(#11713f,#5fd4a0);     /* desaturated for dark, so they do not vibrate */
  --warning:light-dark(#875500,#f0c060);
  --danger:light-dark(#bb2532,#ff9790);
  --focus:light-dark(#3b48c4,#b5bdff);       /* 2px focus ring */
  --highlight:light-dark(rgb(255 255 255 / 0),rgb(255 255 255 / .045)); /* 1px top light on dark surfaces */
  --shadow-color:light-dark(rgb(16 24 40 / .16),rgb(0 0 0 / .55));     /* overlays only */
  --radius:12px;--radius-sm:8px;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
/* No light-dark() (Chrome < 123, Safari < 17.5, Firefox < 120): the same values, chosen by attribute */
@supports not (color:light-dark(#fff,#000)){
  :root,[data-theme="dark"]{--surface-0:#0b0d12;--surface-1:#151821;--surface-2:#1d212c;--surface-3:#262b38;--text-1:#eceef3;--text-2:#aab1bf;--text-3:#8f96a8;--border:#2a2f3c;--edge:#737b90;--accent:#8b97ff;--accent-soft:#232a4d;--on-accent:#0b0d12;--success:#5fd4a0;--warning:#f0c060;--danger:#ff9790;--focus:#b5bdff;--highlight:rgb(255 255 255 / .045);--shadow-color:rgb(0 0 0 / .55)}
  [data-theme="light"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}
  @media (prefers-color-scheme:light){[data-theme="system"]{--surface-0:#eef1f5;--surface-1:#ffffff;--surface-2:#f6f7f9;--surface-3:#e6e9ef;--text-1:#12151c;--text-2:#434a5a;--text-3:#555d6e;--border:#dde1e8;--edge:#7c8496;--accent:#4452d0;--accent-soft:#e6e8ff;--on-accent:#ffffff;--success:#11713f;--warning:#875500;--danger:#bb2532;--focus:#3b48c4;--highlight:rgb(255 255 255 / 0);--shadow-color:rgb(16 24 40 / .16)}}
}
@media (prefers-contrast:more){:root{--border:var(--edge);--text-3:var(--text-2)}}
[data-theme]{background:var(--surface-0);color:var(--text-1)}
/* The tokens above as Tailwind utilities: bg-surface-0…3, text-ink-1…3, border-line, border-edge,
   bg-accent, bg-accent-soft, text-on-accent, text-success|warning|danger, outline-focus, rounded-ui… */
@theme inline {
  --color-surface-0: var(--surface-0); --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2); --color-surface-3: var(--surface-3);
  --color-ink-1: var(--text-1); --color-ink-2: var(--text-2); --color-ink-3: var(--text-3);
  --color-line: var(--border); --color-edge: var(--edge);
  --color-accent: var(--accent); --color-accent-soft: var(--accent-soft); --color-on-accent: var(--on-accent);
  --color-success: var(--success); --color-warning: var(--warning); --color-danger: var(--danger);
  --color-focus: var(--focus); --color-highlight: var(--highlight);
  --radius-ui: var(--radius); --radius-ui-sm: var(--radius-sm);
  --font-mono: var(--mono);
  --shadow-overlay: 0 18px 48px -12px var(--shadow-color);
  --inset-shadow-hl: inset 0 1px 0 var(--highlight);
}

// Theme toggle: the radios already switch the theme with :has(); this mirrors the choice to
// data-theme (for browsers without :has()) and remembers it for the next visit.
(() => {
  const root = document.querySelector('[data-theme-root]'); if (!root) return;
  const picks = root.querySelectorAll('.theme-pick');
  let saved = null; try { saved = localStorage.getItem('dk-theme'); } catch (e) {}
  const apply = v => { root.dataset.theme = v; picks.forEach(p => { p.checked = p.value === v; }); };
  if (saved && ['dark', 'light', 'system'].includes(saved)) apply(saved);
  picks.forEach(p => p.addEventListener('change', () => { apply(p.value); try { localStorage.setItem('dk-theme', p.value); } catch (e) {} }));
})();