<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MainsKeeper — Rounds 1–4 launcher</title>
<style>
/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }   /* block-level reservation for a shared baseline */
  .od-nowrap  { white-space: nowrap; }           /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

:root {
  --bg: #F3F4F5; --surface: #FFFFFF; --ink: #17191C; --ink-2: #4A4F55; --ink-3: #62676E;
  --rule: #D5D8DC; --rule-2: #B9BDC2; --focus: #0B57D0; --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 5px #0B57D0;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  --serif: "Times New Roman", Times, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-28: 28px; --t-40: 40px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --dur: 180ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-16)/1.5 var(--sans); overflow-x: hidden; }
img, iframe { max-width: 100%; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; transition: text-decoration-color var(--dur); }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a:focus-visible, iframe:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: var(--s-4); top: -60px; background: var(--ink); color: #fff; padding: var(--s-2) var(--s-3); z-index: 10; }
.skip:focus { top: var(--s-4); }
.wrap { max-width: 1480px; margin: 0 auto; padding: 0 var(--s-8); }
.top { border-bottom: 1px solid var(--rule); background: var(--surface); }
.top .wrap { padding-block: var(--s-3); --od-gap: var(--s-2) var(--s-6); }
.top nav a { font-size: var(--t-14); }
.crumb { font-size: var(--t-14); color: var(--ink-2); }
.demo { font: 500 var(--t-12)/1.4 var(--mono); letter-spacing: .02em; color: var(--ink); border: 1px dashed var(--rule-2); padding: var(--s-1) var(--s-2); background: var(--surface); }
.eyebrow { font: 600 var(--t-12)/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
h1 { font: 600 var(--t-40)/1.1 var(--sans); letter-spacing: -.01em; margin: 0; }
h2 { font: 600 var(--t-28)/1.2 var(--sans); margin: 0; }
h3 { font: 600 var(--t-20)/1.3 var(--sans); margin: 0; }
h4 { font: 600 var(--t-14)/1.4 var(--sans); margin: 0; letter-spacing: .02em; }
p { margin: 0; }
.lede { font-size: var(--t-20); line-height: 1.45; color: var(--ink-2); max-width: 64ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-14); }
.section { padding-block: var(--s-12); border-top: 1px solid var(--rule); }
.foot { border-top: 1px solid var(--rule); padding-block: var(--s-6); font-size: var(--t-14); color: var(--ink-2); }
code, .mono { font-family: var(--mono); font-size: .92em; }
@media (max-width: 700px) { .wrap { padding: 0 var(--s-4); } h1 { font-size: var(--t-28); } .lede { font-size: var(--t-16); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.intro { padding-block: var(--s-12) var(--s-6); }
.hero { background: var(--surface); border: 2px solid var(--ink); padding: var(--s-8); display: grid; gap: var(--s-3); margin-bottom: var(--s-8); }
.hero h2 a { text-decoration-thickness: 2px; }
.cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-6); background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; }
.cta:hover { background: #2C3036; }
.block { padding-block: var(--s-8); border-top: 1px solid var(--rule); display: grid; gap: var(--s-3); }
.h3 { font-size: var(--t-20); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.concept { background: var(--surface); border: 1px solid var(--rule); padding: var(--s-4); }
.swatch { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--rule); }
.swatch img { width: 40px; height: 40px; }
.targets { list-style: none; margin: 0; padding: 0; display: grid; }
.targets li { border-top: 1px solid var(--rule); }
.targets a { display: flex; align-items: center; min-height: 44px; padding: var(--s-2) 0; font-size: var(--t-14); }
@media (max-width: 1100px) { .grid3 { grid-template-columns: minmax(0, 1fr); } .hero { padding: var(--s-6); } }

.round { padding-block: var(--s-8); display: grid; gap: var(--s-6); }
.round + .round { border-top: 2px solid var(--ink); margin-top: var(--s-8); }
.round-h { display: grid; gap: var(--s-2); }
.grid3.big .concept { padding: var(--s-6); border-color: var(--rule-2); }
.swatch.big { width: 64px; height: 64px; } .swatch.big img { width: 48px; height: 48px; }
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="top"><div class="wrap od-cluster" style="justify-content:space-between"><span class="crumb">MainsKeeper · Rounds 1–9 · complete-design review checkpoint 0.1.12 (nonfinal · browser tests skipped)</span><span class="demo">Fictional demonstration data — not real equipment</span></div></header>
<main id="main" class="wrap">
  <section class="intro od-stack" style="--od-gap:var(--s-3)" aria-labelledby="h-page">
    <p class="eyebrow">Mainskeeper - App · launcher</p>
    <h1 id="h-page">MainsKeeper — complete design</h1>
    <p class="lede">Rounds four and five are one consolidated product: Lattice identity with Datum equipment workflows. Round five adds a shared prototype state with Reset demo, the first-run account, network UPS setup and one configuration and CLI contract. Start with the complete design review. The nine exploration concepts from rounds 1–3 are preserved unchanged below.</p>
  </section>

  <section class="round" aria-labelledby="h-r4">
    <div class="round-h"><p class="eyebrow">Rounds 4–9 · complete design · current (checkpoint 0.1.12)</p><h2 id="h-r4">Complete design (rounds 4–5)</h2></div>
    <section class="hero" aria-labelledby="h-primary4">
      <p class="eyebrow">Primary review page</p>
      <h2 id="h-primary4"><a href="product/review.html">Complete-design review launcher — MainsKeeper product, journeys, state coverage</a></h2>
      <p class="muted">One consolidated MainsKeeper product: checkpoint 0.1.12 for manual review, preserving the 0.1.11 exact aggregate-range correction, the 0.1.10 exact monitoring-gap fix, the 0.1.9 persistent gaps, the 0.1.8 and 0.1.7 corrections with exact routes and expected outcomes, what changed in 0.1.6, ten step-by-step journeys, the configuration-ownership table, every page with direct links to its states, a state-coverage checklist (Designed / Partial / Not designed), an unverified visual checklist, screenshot routes, CLI examples, the design system and the fixture scenario. Dark theme by default; light theme via the switch. Browser tests were skipped for 0.1.12 at your request; no screenshots are included. Earlier numerical verification is preserved in the notes and was not rerun.</p>
      <p><a class="cta" href="product/review.html">Open the complete design review</a></p>
    </section>
    <section class="block" aria-labelledby="h-notes4">
      <p class="eyebrow">Notes, design system, CLI</p>
      <h3 id="h-notes4" class="h3"><a href="product/notes.html">Complete-design notes — provenance, non-obvious behaviour, assumptions, known issues</a></h3>
      <ul class="targets">
<li><a href="product/app/components.html">Design system — component gallery (dark and light)</a></li>
<li><a href="product/cli/index.html">CLI — proposed mainskeeper contract, terminal mockups and JSON examples</a></li>
      </ul>
    </section>
    <section class="block" aria-labelledby="h-product4">
      <p class="eyebrow">Product pages · rounds 4–5</p>
      <h3 id="h-product4" class="h3">Every product page</h3>
      <ul class="targets">
<li><a href="product/app/index.html">Product — fleet overview (landing)</a></li>
<li><a href="product/app/site.html">Product — site detail</a></li>
<li><a href="product/app/site-setup.html">Product — site settings and new site</a></li>
<li><a href="product/app/equipment.html">Product — equipment workspace (filter, sort, compare, inspector)</a></li>
<li><a href="product/app/ups.html">Product — UPS detail</a></li>
<li><a href="product/app/incidents.html">Product — incidents list</a></li>
<li><a href="product/app/incident.html">Product — incident detail</a></li>
<li><a href="product/app/notifications.html">Product — notification channels and delivery log</a></li>
<li><a href="product/app/maintenance.html">Product — maintenance windows</a></li>
<li><a href="product/app/alert-rules.html">Product — alert rules (settings)</a></li>
<li><a href="product/app/history.html">Product — history and investigation</a></li>
<li><a href="product/app/collectors.html">Product — collectors list</a></li>
<li><a href="product/app/collector.html">Product — collector detail</a></li>
<li><a href="product/app/relationships.html">Product — relationships and coverage map</a></li>
<li><a href="product/app/sources.html">Product — UPS source diagnostics</a></li>
<li><a href="product/app/collector-config.html">Product — collector configuration</a></li>
<li><a href="product/app/sync.html">Product — history sync and backlog</a></li>
<li><a href="product/app/sign-in.html">Product — sign-in states</a></li>
<li><a href="product/app/welcome.html">Product — first-run onboarding (empty account to first readings)</a></li>
<li><a href="product/app/install.html">Product — collector install by platform</a></li>
<li><a href="product/app/enroll.html">Product — collector enrollment and re-enrollment</a></li>
<li><a href="product/app/network-source.html">Product — network UPS setup (NUT / SNMP)</a></li>
      </ul>
      <p class="small muted">Product pages open on the incident fixture (Wed 30 Sep 2026, 15:22 PDT) unless you switched to your first-run account. Use the review bar on each page for Calm, the scenarios, the dataset switch and Reset demo; the review page links every state directly. The network UPS setup page needs a collector, for example <a href="product/app/network-source.html?collector=bw-pi-01">network-source.html?collector=bw-pi-01</a>.</p>
    </section>
  </section>

  <section class="round" aria-labelledby="h-r3">
    <div class="round-h"><p class="eyebrow">Round 3 · preserved unchanged</p><h2 id="h-r3">Round 3 — concepts 7–9</h2></div>
    <section class="hero" aria-labelledby="h-primary3">
      <p class="eyebrow">Primary review canvas</p>
      <h2 id="h-primary3"><a href="review/round-3.html">Round 3 comparison canvas — all nine marks and interfaces, detailed review of 7–9</a></h2>
      <p class="muted">All nine marks in a logo-only section (with a mark-only view), every interface one click away, live incident, calm and mobile previews of 7–9 with “Try this” steps, and a table of how 7–9 differ.</p>
      <p><a class="cta" href="review/round-3.html">Open the round 3 comparison</a></p>
    </section>
    <section class="block" aria-labelledby="h-notes3">
      <p class="eyebrow">Round notes</p>
      <h3 id="h-notes3" class="h3"><a href="notes/round-3.html">Round 3 notes — differences, corrections, inherited issues, questions</a></h3>
      <p class="muted small">Includes how the five corrections are applied in 7–9 and the issues inherited by concepts 1–6, with file references.</p>
    </section>
    <section class="block" aria-labelledby="h-concepts3">
      <p class="eyebrow">Concept pages · round 3</p>
      <h3 id="h-concepts3" class="h3">Every page, concepts 7–9</h3>
      <div class="grid3 big">
      <article class="concept od-stack" style="--od-gap:var(--s-3)" aria-labelledby="ix-g">
        <div class="od-row" style="--od-gap:var(--s-3)"><span class="swatch od-fixed big" style="background:#F7F7F5"><img src="concepts/g/assets/logomark.svg" width="48" height="48" alt=""></span><div class="od-stack od-fill" style="--od-gap:0"><h3 id="ix-g">7 · Datum</h3><span class="small muted">G · lettering-led equipment workspace</span></div></div>
        <ul class="targets">
<li><a href="concepts/g/identity.html">7 Datum — identity board</a></li><li><a href="concepts/g/dashboard.html">7 Datum — desktop equipment workspace (calm / incident, filter, compare, inspector)</a></li><li><a href="concepts/g/mobile.html">7 Datum — 390px mobile view</a></li><li><a href="concepts/g/cli.html">7 Datum — mainskeeper status CLI preview</a></li>
        </ul>
      </article>
      <article class="concept od-stack" style="--od-gap:var(--s-3)" aria-labelledby="ix-h">
        <div class="od-row" style="--od-gap:var(--s-3)"><span class="swatch od-fixed big" style="background:#101418"><img src="concepts/h/assets/logomark.svg" width="48" height="48" alt=""></span><div class="od-stack od-fill" style="--od-gap:0"><h3 id="ix-h">8 · Lattice</h3><span class="small muted">H · relationship and coverage map</span></div></div>
        <ul class="targets">
<li><a href="concepts/h/identity.html">8 Lattice — identity board</a></li><li><a href="concepts/h/dashboard.html">8 Lattice — desktop relationship and coverage map (calm / incident, select nodes)</a></li><li><a href="concepts/h/mobile.html">8 Lattice — 390px mobile view</a></li><li><a href="concepts/h/cli.html">8 Lattice — mainskeeper status CLI preview</a></li>
        </ul>
      </article>
      <article class="concept od-stack" style="--od-gap:var(--s-3)" aria-labelledby="ix-i">
        <div class="od-row" style="--od-gap:var(--s-3)"><span class="swatch od-fixed big" style="background:#E4E9DE"><img src="concepts/i/assets/logomark.svg" width="48" height="48" alt=""></span><div class="od-stack od-fill" style="--od-gap:0"><h3 id="ix-i">9 · Synoptic</h3><span class="small muted">I · power weather service</span></div></div>
        <ul class="targets">
<li><a href="concepts/i/identity.html">9 Synoptic — identity board</a></li><li><a href="concepts/i/dashboard.html">9 Synoptic — desktop station chart (calm / incident, station reports, bulletins)</a></li><li><a href="concepts/i/mobile.html">9 Synoptic — 390px mobile view</a></li><li><a href="concepts/i/cli.html">9 Synoptic — mainskeeper status CLI preview</a></li>
        </ul>
      </article>
      </div>
      <p class="small muted">Dashboards open on the incident state; use the Demo state switch or add #calm to the address.</p>
    </section>
  </section>

  <section class="round" aria-labelledby="h-r2">
    <div class="round-h"><p class="eyebrow">Round 2 · preserved unchanged</p><h2 id="h-r2">Round 2 — concepts 4–6</h2></div>
    <section class="block" aria-labelledby="h-primary">
      <p class="eyebrow">Round 2 comparison canvas</p>
      <h2 id="h-primary" class="h3"><a href="review/round-2.html">Round 2 comparison canvas — all six concepts, detailed review of 4–6</a></h2>
      <p class="muted">All six marks together, every interface one click away, live dashboard and mobile previews of 4–6 with “Try this” steps, and a 1–6 comparison table.</p>
      <p><a class="cta" href="review/round-2.html">Open the round 2 comparison</a></p>
    </section>
    <section class="block" aria-labelledby="h-notes2">
      <p class="eyebrow">Round notes</p>
      <h3 id="h-notes2" class="h3"><a href="notes/round-2.html">Round 2 notes — differences, inconsistencies, state inventory, questions</a></h3>
    </section>
    <section class="block" aria-labelledby="h-concepts2">
      <p class="eyebrow">Concept pages · round 2</p>
      <h3 id="h-concepts2" class="h3">Every page, concepts 4–6</h3>
      <div class="grid3 big">
      <article class="concept od-stack" style="--od-gap:var(--s-3)" aria-labelledby="ix-d">
        <div class="od-row" style="--od-gap:var(--s-3)"><span class="swatch od-fixed big" style="background:#FBF5EE"><img src="concepts/d/assets/logomark.svg" width="48" height="48" alt=""></span><div class="od-stack od-fill" style="--od-gap:0"><h3 id="ix-d">4 · Porchlight</h3><span class="small muted">D · site-first everyday tool</span></div></div>
        <ul class="targets">
<li><a href="concepts/d/identity.html">4 Porchlight — identity board</a></li><li><a href="concepts/d/dashboard.html">4 Porchlight — desktop fleet dashboard (calm / incident, site selection)</a></li><li><a href="concepts/d/mobile.html">4 Porchlight — 390px mobile view</a></li><li><a href="concepts/d/cli.html">4 Porchlight — mainskeeper status CLI preview</a></li>
        </ul>
      </article>
      <article class="concept od-stack" style="--od-gap:var(--s-3)" aria-labelledby="ix-e">
        <div class="od-row" style="--od-gap:var(--s-3)"><span class="swatch od-fixed big" style="background:#F5F7FB"><img src="concepts/e/assets/logomark.svg" width="48" height="48" alt=""></span><div class="od-stack od-fill" style="--od-gap:0"><h3 id="ix-e">5 · Meridian</h3><span class="small muted">E · time-first investigation</span></div></div>
        <ul class="targets">
<li><a href="concepts/e/identity.html">5 Meridian — identity board</a></li><li><a href="concepts/e/dashboard.html">5 Meridian — desktop fleet dashboard (calm / incident, event and range investigation)</a></li><li><a href="concepts/e/mobile.html">5 Meridian — 390px mobile view</a></li><li><a href="concepts/e/cli.html">5 Meridian — mainskeeper status CLI preview</a></li>
        </ul>
      </article>
      <article class="concept od-stack" style="--od-gap:var(--s-3)" aria-labelledby="ix-f">
        <div class="od-row" style="--od-gap:var(--s-3)"><span class="swatch od-fixed big" style="background:#EFEEEA"><img src="concepts/f/assets/logomark.svg" width="48" height="48" alt=""></span><div class="od-stack od-fill" style="--od-gap:0"><h3 id="ix-f">6 · Docket</h3><span class="small muted">F · exception-first workbench</span></div></div>
        <ul class="targets">
<li><a href="concepts/f/identity.html">6 Docket — identity board</a></li><li><a href="concepts/f/dashboard.html">6 Docket — desktop fleet dashboard (calm / incident, incident queue and evidence)</a></li><li><a href="concepts/f/mobile.html">6 Docket — 390px mobile view</a></li><li><a href="concepts/f/cli.html">6 Docket — mainskeeper status CLI preview</a></li>
        </ul>
      </article>
      </div>
      <p class="small muted">Dashboards open on the incident state; use the Demo state switch or add #calm to the address.</p>
    </section>
  </section>

  <section class="round" aria-labelledby="h-r1">
    <div class="round-h"><p class="eyebrow">Round 1 · preserved unchanged</p><h2 id="h-r1">Round 1 — concepts 1–3</h2></div>
    <section class="block" aria-labelledby="h-primary1">
      <p class="eyebrow">Round 1 comparison canvas</p>
      <h3 id="h-primary1" class="h3"><a href="review/comparison.html">Round 1 comparison canvas — concepts 1–3 (preserved)</a></h3>
      <p class="muted">Marks, live dashboard previews in three columns, a comparison matrix and per-concept detail with mobile and identity previews.</p>
    </section>
    <section class="block" aria-labelledby="h-notes">
      <p class="eyebrow">Round notes</p>
      <h3 id="h-notes" class="h3"><a href="notes/round-1.html">Round 1 notes — recommendation, tradeoffs, state inventory, questions</a></h3>
    </section>
    <section class="block" aria-labelledby="h-concepts">
      <p class="eyebrow">Concept pages · round 1</p>
      <h3 id="h-concepts" class="h3">Every page, concepts 1–3</h3>
      <div class="grid3">
      <article class="concept od-stack" style="--od-gap:var(--s-3)" aria-labelledby="ix-a">
        <div class="od-row" style="--od-gap:var(--s-3)"><span class="swatch od-fixed" style="background:#F4F5F2"><img src="concepts/a/assets/logomark.svg" width="40" height="40" alt=""></span><div class="od-stack od-fill" style="--od-gap:0"><h3 id="ix-a">1 · Vigil</h3><span class="small muted">A · considered watchkeeping</span></div></div>
        <ul class="targets">
<li><a href="concepts/a/identity.html">1 Vigil — identity board</a></li><li><a href="concepts/a/dashboard.html">1 Vigil — desktop fleet dashboard (calm / incident switch)</a></li><li><a href="concepts/a/mobile.html">1 Vigil — 390px mobile incident view</a></li><li><a href="concepts/a/cli.html">1 Vigil — mainskeeper status CLI preview</a></li>
        </ul>
      </article>
      <article class="concept od-stack" style="--od-gap:var(--s-3)" aria-labelledby="ix-b">
        <div class="od-row" style="--od-gap:var(--s-3)"><span class="swatch od-fixed" style="background:#0E1113"><img src="concepts/b/assets/logomark.svg" width="40" height="40" alt=""></span><div class="od-stack od-fill" style="--od-gap:0"><h3 id="ix-b">2 · Feeder Board</h3><span class="small muted">B · utility dispatch board</span></div></div>
        <ul class="targets">
<li><a href="concepts/b/identity.html">2 Feeder Board — identity board</a></li><li><a href="concepts/b/dashboard.html">2 Feeder Board — desktop fleet dashboard (calm / incident switch)</a></li><li><a href="concepts/b/mobile.html">2 Feeder Board — 390px mobile incident view</a></li><li><a href="concepts/b/cli.html">2 Feeder Board — mainskeeper status CLI preview</a></li>
        </ul>
      </article>
      <article class="concept od-stack" style="--od-gap:var(--s-3)" aria-labelledby="ix-c">
        <div class="od-row" style="--od-gap:var(--s-3)"><span class="swatch od-fixed" style="background:#0A0708"><img src="concepts/c/assets/logomark.svg" width="40" height="40" alt=""></span><div class="od-stack od-fill" style="--od-gap:0"><h3 id="ix-c">3 · Brownout</h3><span class="small muted">C · power after dark</span></div></div>
        <ul class="targets">
<li><a href="concepts/c/identity.html">3 Brownout — identity board</a></li><li><a href="concepts/c/dashboard.html">3 Brownout — desktop fleet dashboard (calm / incident switch)</a></li><li><a href="concepts/c/mobile.html">3 Brownout — 390px mobile incident view</a></li><li><a href="concepts/c/cli.html">3 Brownout — mainskeeper status CLI preview</a></li>
        </ul>
      </article>
      </div>
      <p class="small muted">Round-one pages use the round-one scenario; see the round 2 notes for recorded inconsistencies.</p>
    </section>
  </section>
</main>
<footer class="foot"><div class="wrap od-cluster" style="justify-content:space-between"><span>MainsKeeper · Rounds 1–9 · nonfinal complete-design review checkpoint 0.1.12</span><span class="demo">Fictional demonstration data — not real equipment</span></div></footer>
</body>
</html>
