@deeeed/metamask-harness 0.47.0 → 0.47.2

package/site/assets/style.css

@@ -1,1066 +0,0 @@
-/* mm-harness getting-started site — single stylesheet, no external assets. */
-
-:root {
-  --bg: #0e0f13;
-  --bg-raised: #15171d;
-  --surface: #1a1d25;
-  --surface-2: #20242e;
-  --line: #2b3040;
-  --line-soft: #23272f;
-
-  /* Every text token clears WCAG AA (4.5:1) against the darkest-to-lightest
-     surfaces above; --text-faint is the floor at 5.2:1 on --surface-2. */
-  --text: #e9eaf0;
-  --text-dim: #b0b6c6;
-  --text-faint: #9096a8;
-
-  --accent: #f6851b;
-  --accent-deep: #d4700f;
-  --accent-soft: rgba(246, 133, 27, 0.14);
-  --accent-line: rgba(246, 133, 27, 0.34);
-
-  --pass: #58d68a;
-  --fail: #f0736b;
-  --warn: #f0c05a;
-  --info: #6aa9f0;
-
-  --radius: 12px;
-  --radius-sm: 8px;
-  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.28);
-  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
-
-  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, sans-serif;
-  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
-    "Liberation Mono", monospace;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-/* Clears the sticky bar plus the progress rail (114px together), so an anchor
-   never parks its heading underneath them. */
-html { scroll-behavior: smooth; scroll-padding-top: 116px; }
-
-body {
-  margin: 0;
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--sans);
-  font-size: 16px;
-  line-height: 1.65;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-
-/* Ambient wash — keeps the page from reading as a flat README. */
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-  background:
-    radial-gradient(760px 380px at 12% -8%, rgba(246, 133, 27, 0.10), transparent 60%),
-    radial-gradient(620px 320px at 92% 4%, rgba(106, 169, 240, 0.06), transparent 62%);
-}
-
-body > * { position: relative; z-index: 1; }
-
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; text-underline-offset: 3px; }
-
-h1, h2, h3, h4 { line-height: 1.22; letter-spacing: -0.021em; margin: 0 0 0.5em; }
-h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 680; }
-h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 640; margin-top: 2.4em; }
-h3 { font-size: 1.1rem; font-weight: 620; margin-top: 1.8em; }
-p { margin: 0 0 1.1em; }
-p, li { color: #d5d8e2; }
-
-code {
-  font-family: var(--mono);
-  font-size: 0.885em;
-  background: var(--surface-2);
-  border: 1px solid var(--line-soft);
-  border-radius: 5px;
-  padding: 0.1em 0.38em;
-  color: #f0d9bd;
-}
-
-strong { color: var(--text); font-weight: 620; }
-
-/* ---------- layout ---------- */
-
-.wrap { width: min(940px, calc(100% - 3rem)); margin: 0 auto; }
-.wrap-wide { width: min(1160px, calc(100% - 3rem)); margin: 0 auto; }
-
-main { padding-bottom: 6rem; }
-
-/* ---------- top bar ---------- */
-
-.topbar {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  background: rgba(14, 15, 19, 0.86);
-  backdrop-filter: saturate(150%) blur(14px);
-  -webkit-backdrop-filter: saturate(150%) blur(14px);
-  border-bottom: 1px solid var(--line-soft);
-}
-
-.topbar-inner {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5rem 1.5rem;
-  min-height: 60px;
-  padding: 0.5rem 0;
-}
-
-.brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.6rem;
-  font-weight: 640;
-  color: var(--text);
-  letter-spacing: -0.015em;
-  white-space: nowrap;
-}
-.brand:hover { text-decoration: none; }
-
-.brand-mark { width: 22px; height: 22px; flex: none; display: block; }
-
-.brand-name { font-family: var(--mono); font-size: 0.95rem; }
-
-/* Six items fit a laptop on one line; below that they wrap onto a second row
-   rather than scrolling a label out of sight. */
-.nav {
-  display: flex;
-  gap: 0.3rem;
-  margin-left: auto;
-  min-width: 0;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.nav a {
-  flex: none;
-  white-space: nowrap;
-  color: var(--text-dim);
-  font-size: 0.885rem;
-  font-weight: 500;
-  padding: 0.4rem 0.7rem;
-  border-radius: var(--radius-sm);
-  transition: color 0.16s var(--ease), background 0.16s var(--ease);
-}
-.nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
-.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
-
-/* The way back to the setup prompt. It leads the nav and stays visible when the
-   rest of the bar scrolls, because it is the one link every page owes a reader. */
-.nav a.nav-cta { color: var(--accent); border: 1px solid var(--accent-line); }
-.nav a.nav-cta:hover { background: var(--accent-soft); color: var(--accent); }
-
-/* ---------- progress rail ---------- */
-
-.progress-rail {
-  position: sticky;
-  top: 60px;
-  z-index: 45;
-  background: rgba(14, 15, 19, 0.9);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--line-soft);
-  padding: 0.7rem 0;
-}
-
-.progress-inner { display: flex; align-items: center; gap: 1rem; }
-
-.progress-track {
-  flex: 1;
-  height: 6px;
-  background: var(--surface-2);
-  border-radius: 99px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  width: 0%;
-  border-radius: 99px;
-  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
-  transition: width 0.4s var(--ease);
-}
-
-.progress-label {
-  font-family: var(--mono);
-  font-size: 0.78rem;
-  color: var(--text-dim);
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.progress-reset {
-  font: inherit;
-  font-size: 0.78rem;
-  color: var(--text-faint);
-  background: none;
-  border: 1px solid var(--line);
-  border-radius: 99px;
-  padding: 0.22rem 0.7rem;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.16s var(--ease);
-}
-.progress-reset:hover { color: var(--text); border-color: var(--accent-line); }
-
-/* ---------- hero ---------- */
-
-.hero { padding: 4.5rem 0 2.5rem; }
-
-.eyebrow {
-  display: inline-block;
-  font-family: var(--mono);
-  font-size: 0.74rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--accent);
-  background: var(--accent-soft);
-  border: 1px solid var(--accent-line);
-  border-radius: 99px;
-  padding: 0.3rem 0.8rem;
-  margin-bottom: 1.4rem;
-}
-
-.hero h1 { max-width: 20ch; }
-
-.lede {
-  font-size: 1.14rem;
-  color: var(--text-dim);
-  max-width: 66ch;
-  line-height: 1.68;
-}
-
-.hero-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem 1.4rem;
-  margin-top: 1.6rem;
-  font-family: var(--mono);
-  font-size: 0.8rem;
-  color: var(--text-faint);
-}
-
-/* ---------- lobby (front page) ----------
-   The entry page carries one idea and one call to action: no nav, no rail, no
-   checklist. Everything else in the site hangs off the single button below. */
-
-.lobby {
-  display: flex;
-  align-items: center;
-  min-height: 100vh;
-  padding: 3rem 0 4rem;
-}
-
-.lobby-inner {
-  width: min(760px, calc(100% - 3rem));
-  margin: 0 auto;
-  text-align: center;
-}
-
-.lobby-mark { display: block; width: 52px; height: 52px; margin: 0 auto 1.6rem; }
-
-.lobby h1 {
-  font-size: clamp(2rem, 4.6vw, 2.85rem);
-  max-width: 24ch;
-  margin: 0 auto 0.7rem;
-  /* Break at the comma rather than orphaning the last word. */
-  text-wrap: balance;
-}
-
-.lobby-lede {
-  font-size: 1.11rem;
-  line-height: 1.62;
-  color: var(--text-dim);
-  max-width: 60ch;
-  margin: 0 auto 1.1rem;
-}
-
-.lobby-sub {
-  font-size: 0.95rem;
-  color: var(--text-faint);
-  max-width: 54ch;
-  margin: 0 auto 1.5rem;
-}
-
-/* Code is never centred, even when its surroundings are. */
-.lobby .cmd { text-align: left; }
-
-/* The prompt is meant to be copied, not read: keep it short enough that the
-   button under it stays in view, and say so with a fade at the cut. */
-/* Wider right gutter than the shared block: the copy control is bigger here. */
-.lobby .cmd-hero pre { max-height: 15rem; font-size: 0.8rem; padding-right: 5rem; }
-
-.lobby .cmd-hero::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 2.6rem;
-  pointer-events: none;
-  background: linear-gradient(to bottom, rgba(11, 12, 16, 0), #0b0c10);
-}
-
-/* Copying is the call to action here, so the control is a button, not a hint. */
-.lobby .cmd-hero .copy {
-  font-size: 0.78rem;
-  font-weight: 600;
-  padding: 0.38rem 0.85rem;
-  color: #17120b;
-  background: var(--accent);
-  border-color: var(--accent);
-}
-.lobby .cmd-hero .copy:hover { color: #17120b; background: #ff9630; border-color: #ff9630; }
-.lobby .cmd-hero .copy[data-copied="1"] {
-  color: #0a1a10;
-  background: var(--pass);
-  border-color: var(--pass);
-}
-
-/* ---------- quick start (lobby) ----------
-   Two steps: set up once, then pick the work. Left-aligned inside the centred
-   lobby, because everything in here is read line by line. */
-
-.qs { text-align: left; margin-top: 1.8rem; }
-
-.qs-step + .qs-step { margin-top: 2.6rem; }
-
-.qs-title {
-  display: flex;
-  align-items: center;
-  font-size: 1.16rem;
-  font-weight: 640;
-  margin: 0 0 0.35rem;
-}
-
-/* The margin rather than a flex gap: the badge stays separated from the title
-   even when the flex layout does not apply. */
-.qs-num {
-  flex: none;
-  width: 1.7rem;
-  height: 1.7rem;
-  margin-right: 0.75rem;
-  display: inline-grid;
-  place-items: center;
-  border-radius: 50%;
-  background: var(--accent-soft);
-  border: 1px solid var(--accent-line);
-  color: var(--accent);
-  font-family: var(--mono);
-  font-size: 0.8rem;
-  line-height: 1;
-}
-
-.qs-why { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 0.9rem; }
-
-/* ---------- tabs ---------- */
-
-.tablist {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-  margin-bottom: 0.9rem;
-}
-
-.tab {
-  font: 560 0.9rem var(--sans);
-  color: var(--text-dim);
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 99px;
-  padding: 0.4rem 1rem;
-  cursor: pointer;
-  transition: all 0.16s var(--ease);
-}
-.tab:hover { color: var(--text); border-color: var(--accent-line); }
-.tab[aria-selected="true"] {
-  color: var(--accent);
-  background: var(--accent-soft);
-  border-color: var(--accent-line);
-}
-
-.qs-panel[hidden] { display: none; }
-.qs-panel:focus-visible { outline-offset: 4px; }
-
-.qs-panel-why { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 0.5rem; }
-
-/* These prompts are the call to action too, so their copy control never hides. */
-.qs-panel .cmd .copy { opacity: 1; }
-.qs-panel .cmd pre { white-space: pre-wrap; word-break: break-word; font-size: 0.82rem; }
-
-.lobby-cta { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }
-
-.lobby-fine {
-  margin: 2.4rem auto 0;
-  max-width: 56ch;
-  font-size: 0.86rem;
-  color: var(--text-faint);
-}
-
-/* ---------- cards ---------- */
-
-.card {
-  background: var(--surface);
-  border: 1px solid var(--line-soft);
-  border-radius: var(--radius);
-  padding: 1.5rem 1.6rem;
-  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
-}
-
-.card h3 { margin-top: 0; }
-.card p:last-child { margin-bottom: 0; }
-
-.grid { display: grid; gap: 1rem; }
-.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-
-@media (max-width: 780px) {
-  .grid-2, .grid-3 { grid-template-columns: 1fr; }
-}
-
-/* Entry-path cards (Step 0) */
-.path-card {
-  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-raised) 100%);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-.path-card:hover { border-color: var(--accent-line); }
-.path-card > :last-child { margin-top: auto; }
-
-.path-tag {
-  font-family: var(--mono);
-  font-size: 0.72rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--text-faint);
-  margin-bottom: 0.5rem;
-}
-
-/* ---------- code blocks ---------- */
-
-.cmd {
-  position: relative;
-  background: #0b0c10;
-  border: 1px solid var(--line);
-  border-radius: var(--radius-sm);
-  margin: 0.9rem 0;
-  overflow: hidden;
-}
-
-.cmd pre {
-  margin: 0;
-  padding: 0.85rem 3.2rem 0.85rem 1rem;
-  overflow-x: auto;
-  font-family: var(--mono);
-  font-size: 0.855rem;
-  line-height: 1.6;
-  color: #e6e8ef;
-}
-
-.cmd pre code {
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: inherit;
-  color: inherit;
-}
-
-/* The shell prompt marker is decorative — excluded from copy by JS. */
-.cmd .p { color: var(--accent); user-select: none; }
-
-.copy {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  font: 500 0.72rem var(--sans);
-  color: var(--text-dim);
-  background: var(--surface-2);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  padding: 0.24rem 0.55rem;
-  cursor: pointer;
-  opacity: 0;
-  transition: all 0.16s var(--ease);
-}
-.cmd:hover .copy, .copy:focus-visible { opacity: 1; }
-.copy:hover { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); }
-.copy[data-copied="1"] { color: var(--pass); border-color: var(--pass); opacity: 1; }
-
-@media (hover: none) { .copy { opacity: 1; } }
-
-/* The one-prompt block is a call to action: its copy control never hides, and
-   the prompt scrolls rather than pushing the page down. */
-.cmd-hero .copy { opacity: 1; }
-.cmd-hero pre {
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 22rem;
-  overflow-y: auto;
-}
-
-/* Expected-output block */
-.out {
-  background: var(--bg-raised);
-  border: 1px solid var(--line-soft);
-  border-left: 2px solid var(--line);
-  border-radius: var(--radius-sm);
-  padding: 0.8rem 1rem;
-  margin: 0.9rem 0;
-  overflow-x: auto;
-  font-family: var(--mono);
-  font-size: 0.8rem;
-  line-height: 1.62;
-  color: var(--text-dim);
-  white-space: pre;
-}
-
-.out .ok { color: var(--pass); }
-.out .bad { color: var(--fail); }
-.out .hint { color: var(--accent); }
-.out .dim { color: var(--text-faint); }
-
-.out-label {
-  font-family: var(--mono);
-  font-size: 0.72rem;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: var(--text-faint);
-  margin: 1.2rem 0 0.1rem;
-}
-
-/* ---------- checklist steps ---------- */
-
-.steps { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: step; }
-
-.step {
-  position: relative;
-  border: 1px solid var(--line-soft);
-  border-radius: var(--radius);
-  background: var(--surface);
-  padding: 1.4rem 1.6rem 1.5rem 3.6rem;
-  margin-bottom: 1rem;
-  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
-}
-
-.step::before {
-  counter-increment: step;
-  content: counter(step);
-  position: absolute;
-  left: 1.15rem;
-  top: 1.45rem;
-  width: 1.55rem;
-  height: 1.55rem;
-  display: grid;
-  place-items: center;
-  border-radius: 50%;
-  background: var(--surface-2);
-  border: 1px solid var(--line);
-  color: var(--text-faint);
-  font-family: var(--mono);
-  font-size: 0.76rem;
-  transition: all 0.22s var(--ease);
-}
-
-.step[data-done="1"] { border-color: rgba(88, 214, 138, 0.34); background: rgba(88, 214, 138, 0.035); }
-.step[data-done="1"]::before {
-  content: "✓";
-  background: rgba(88, 214, 138, 0.14);
-  border-color: rgba(88, 214, 138, 0.4);
-  color: var(--pass);
-  font-size: 0.85rem;
-}
-
-.step-head {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.8rem;
-  margin-bottom: 0.3rem;
-}
-
-.step-title { font-size: 1.06rem; font-weight: 620; margin: 0; flex: 1; letter-spacing: -0.012em; }
-
-.step-check {
-  flex: none;
-  width: 1.15rem;
-  height: 1.15rem;
-  margin-top: 0.22rem;
-  accent-color: var(--accent);
-  cursor: pointer;
-}
-
-.step-why { color: var(--text-dim); font-size: 0.95rem; }
-
-/* "if it fails" disclosure */
-details.fail {
-  margin-top: 0.9rem;
-  border: 1px solid var(--line-soft);
-  border-radius: var(--radius-sm);
-  background: var(--bg-raised);
-  overflow: hidden;
-}
-
-details.fail > summary {
-  cursor: pointer;
-  padding: 0.6rem 0.95rem;
-  font-size: 0.86rem;
-  font-weight: 560;
-  color: var(--warn);
-  list-style: none;
-  transition: background 0.16s var(--ease);
-}
-details.fail > summary::-webkit-details-marker { display: none; }
-details.fail > summary::before { content: "▸ "; color: var(--text-faint); }
-details.fail[open] > summary::before { content: "▾ "; }
-details.fail > summary:hover { background: var(--surface); }
-
-.fail-body { padding: 0.2rem 0.95rem 0.9rem; font-size: 0.92rem; }
-.fail-body > :last-child { margin-bottom: 0; }
-
-/* ---------- callouts ---------- */
-
-.note {
-  border: 1px solid var(--line);
-  border-left: 3px solid var(--accent);
-  background: var(--accent-soft);
-  border-radius: var(--radius-sm);
-  padding: 0.95rem 1.15rem;
-  margin: 1.4rem 0;
-  font-size: 0.95rem;
-}
-.note > :last-child { margin-bottom: 0; }
-.note-title { font-weight: 640; color: var(--text); display: block; margin-bottom: 0.25rem; }
-
-.note.blue { border-left-color: var(--info); background: rgba(106, 169, 240, 0.09); }
-.note.plain { border-left-color: var(--line); background: var(--surface); }
-
-/* The doctrine banner — the one idea that must land. */
-.doctrine {
-  border: 1px solid var(--accent-line);
-  border-radius: var(--radius);
-  background: linear-gradient(135deg, rgba(246, 133, 27, 0.13), rgba(246, 133, 27, 0.03));
-  padding: 1.3rem 1.5rem;
-  margin: 1.5rem 0;
-}
-.doctrine p { margin: 0; font-size: 1.02rem; }
-.doctrine .k { color: var(--accent); font-weight: 640; }
-
-/* ---------- agent prompt card ---------- */
-
-.agent-card {
-  border: 1px solid var(--accent-line);
-  border-radius: var(--radius);
-  background: linear-gradient(160deg, rgba(246, 133, 27, 0.10), var(--surface) 55%);
-  padding: 1.6rem 1.7rem;
-  margin: 2.2rem 0;
-  box-shadow: var(--shadow);
-}
-.agent-card h2 { margin-top: 0; }
-
-details.prompt > summary {
-  cursor: pointer;
-  display: inline-block;
-  font: 560 0.9rem var(--sans);
-  color: var(--bg);
-  background: var(--accent);
-  border-radius: var(--radius-sm);
-  padding: 0.55rem 1.05rem;
-  list-style: none;
-  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
-}
-details.prompt > summary::-webkit-details-marker { display: none; }
-details.prompt > summary:hover { background: #ff9630; }
-details.prompt[open] > summary { background: var(--surface-2); color: var(--text); }
-
-.prompt-body { margin-top: 1rem; }
-.prompt-body .cmd pre { white-space: pre-wrap; word-break: break-word; max-height: 30rem; overflow-y: auto; }
-
-/* ---------- tables ---------- */
-
-.table-scroll { overflow-x: auto; margin: 1.2rem 0; }
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.92rem;
-  border: 1px solid var(--line-soft);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-
-th {
-  text-align: left;
-  font-weight: 600;
-  font-size: 0.78rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--text-faint);
-  background: var(--bg-raised);
-  padding: 0.65rem 0.9rem;
-  border-bottom: 1px solid var(--line);
-  white-space: nowrap;
-}
-
-td {
-  padding: 0.7rem 0.9rem;
-  border-bottom: 1px solid var(--line-soft);
-  vertical-align: top;
-  color: #d5d8e2;
-}
-
-tbody tr:last-child td { border-bottom: none; }
-tbody tr:hover td { background: rgba(255, 255, 255, 0.018); }
-
-td code { white-space: nowrap; }
-
-/* Reference-table cells are their own copy button. */
-code.copyable {
-  cursor: pointer;
-  transition: all 0.16s var(--ease);
-}
-code.copyable:hover {
-  border-color: var(--accent-line);
-  background: var(--accent-soft);
-  color: var(--accent);
-}
-code.copyable::after {
-  content: "⧉";
-  margin-left: 0.45em;
-  opacity: 0;
-  color: var(--text-faint);
-  transition: opacity 0.16s var(--ease);
-}
-code.copyable:hover::after, code.copyable:focus-visible::after { opacity: 1; }
-code.copyable.copied {
-  color: var(--pass);
-  border-color: rgba(88, 214, 138, 0.4);
-  background: rgba(88, 214, 138, 0.1);
-}
-code.copyable.copied::after { content: ""; margin-left: 0; }
-
-/* ---------- platform filter ---------- */
-
-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.45rem;
-  margin: 1.5rem 0 0.5rem;
-  align-items: center;
-}
-
-.filter-label {
-  font-family: var(--mono);
-  font-size: 0.75rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--text-faint);
-  margin-right: 0.4rem;
-}
-
-.chip {
-  font: 500 0.85rem var(--sans);
-  color: var(--text-dim);
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 99px;
-  padding: 0.34rem 0.9rem;
-  cursor: pointer;
-  transition: all 0.16s var(--ease);
-}
-.chip:hover { color: var(--text); border-color: var(--accent-line); }
-.chip[aria-pressed="true"] {
-  color: var(--accent);
-  background: var(--accent-soft);
-  border-color: var(--accent-line);
-}
-
-.filter-empty {
-  color: var(--text-faint);
-  font-style: italic;
-  padding: 1.5rem 0;
-}
-
-tr[hidden], .filter-hidden { display: none !important; }
-
-/* ---------- layer diagram ---------- */
-
-.stack { display: flex; flex-direction: column; gap: 0.55rem; margin: 1.8rem 0; }
-
-/* Names which end of the diagram is the one you touch. */
-.stack-caption {
-  font-family: var(--mono);
-  font-size: 0.78rem;
-  letter-spacing: 0.04em;
-  color: var(--text-faint);
-  margin: 1.6rem 0 0.55rem;
-}
-.stack-caption + .stack { margin-top: 0; }
-
-.layer {
-  width: 100%;
-  text-align: left;
-  font: inherit;
-  /* Buttons do not inherit color; without this the UA default wins and the
-     row titles render near-black on the dark surface. */
-  color: var(--text);
-  cursor: pointer;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-sm);
-  padding: 0.95rem 1.2rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  transition: all 0.2s var(--ease);
-}
-.layer:hover { border-color: var(--accent-line); transform: translateX(3px); }
-
-/* Diagram rows that are illustration, not controls. */
-.layer-static { cursor: default; }
-.layer-static:hover { border-color: var(--line); transform: none; }
-.layer[aria-expanded="true"] {
-  border-color: var(--accent-line);
-  background: linear-gradient(90deg, var(--accent-soft), var(--surface) 62%);
-}
-
-.layer-n {
-  font-family: var(--mono);
-  font-size: 0.72rem;
-  color: var(--text-faint);
-  border: 1px solid var(--line);
-  border-radius: 5px;
-  padding: 0.1rem 0.4rem;
-  flex: none;
-}
-.layer[aria-expanded="true"] .layer-n { color: var(--accent); border-color: var(--accent-line); }
-
-.layer-name { font-weight: 620; letter-spacing: -0.01em; }
-.layer-sub { color: var(--text-dim); font-size: 0.88rem; margin-left: auto; text-align: right; }
-
-@media (max-width: 640px) {
-  .layer { flex-wrap: wrap; }
-  .layer-sub { margin-left: 0; width: 100%; text-align: left; }
-}
-
-.layer-detail {
-  border: 1px solid var(--accent-line);
-  border-top: none;
-  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
-  background: var(--bg-raised);
-  padding: 1.1rem 1.3rem;
-  margin: -0.55rem 0 0;
-  font-size: 0.94rem;
-}
-.layer-detail > :last-child { margin-bottom: 0; }
-.layer-detail[hidden] { display: none; }
-
-.arrow {
-  text-align: center;
-  color: var(--text-faint);
-  font-size: 0.9rem;
-  line-height: 1;
-  margin: -0.15rem 0;
-}
-
-/* ---------- video cards ---------- */
-
-.vid {
-  display: flex;
-  flex-direction: column;
-  background: var(--surface);
-  border: 1px solid var(--line-soft);
-  border-radius: var(--radius);
-  overflow: hidden;
-  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
-}
-.vid:hover { border-color: var(--accent-line); transform: translateY(-2px); }
-
-.vid-thumb {
-  aspect-ratio: 16 / 9;
-  background:
-    radial-gradient(420px 200px at 30% 20%, rgba(246, 133, 27, 0.16), transparent 70%),
-    linear-gradient(150deg, var(--surface-2), var(--bg-raised));
-  border-bottom: 1px solid var(--line-soft);
-  display: grid;
-  place-items: center;
-  position: relative;
-}
-
-.vid-id {
-  font-family: var(--mono);
-  font-size: 2rem;
-  font-weight: 600;
-  color: #d98b3a;
-  letter-spacing: 0.04em;
-}
-
-.vid-body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
-.vid-body h3 { margin: 0 0 0.4rem; font-size: 1rem; }
-.vid-body p { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 0.9rem; }
-.vid-foot { margin-top: auto; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
-
-.badge {
-  font-family: var(--mono);
-  font-size: 0.7rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  border-radius: 99px;
-  padding: 0.2rem 0.6rem;
-  border: 1px solid var(--line);
-  color: var(--text-faint);
-  white-space: nowrap;
-}
-.badge.soon { color: var(--warn); border-color: rgba(240, 192, 90, 0.35); background: rgba(240, 192, 90, 0.08); }
-.badge.live { color: var(--pass); border-color: rgba(88, 214, 138, 0.35); background: rgba(88, 214, 138, 0.08); }
-.badge.dur { font-family: var(--mono); }
-
-/* ---------- annotated evidence ---------- */
-
-.annot { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.1rem; margin: 1.4rem 0; align-items: start; }
-
-@media (max-width: 900px) { .annot { grid-template-columns: 1fr; } }
-
-.annot-notes { display: flex; flex-direction: column; gap: 0.7rem; }
-
-.annot-note {
-  background: var(--surface);
-  border: 1px solid var(--line-soft);
-  border-left: 3px solid var(--accent);
-  border-radius: var(--radius-sm);
-  padding: 0.75rem 1rem;
-  font-size: 0.9rem;
-}
-.annot-note > :last-child { margin-bottom: 0; }
-.annot-note b { color: var(--accent); font-family: var(--mono); font-size: 0.85rem; font-weight: 600; }
-
-.verdict { font-family: var(--mono); font-weight: 600; }
-.verdict.pass { color: var(--pass); }
-.verdict.fail { color: var(--fail); }
-
-/* ---------- dependency map ----------
-   A column of nodes with the edge label between them, so the direction reads
-   top to bottom without a diagram library. */
-
-.map { margin: 1.5rem 0 2.5rem; }
-
-.node {
-  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-raised) 100%);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1.25rem 1.4rem;
-}
-.node:hover { border-color: var(--accent-line); }
-
-/* The one you install. */
-.node-key { border-color: var(--accent-line); }
-
-.node-tag {
-  display: block;
-  font-family: var(--mono);
-  font-size: 0.72rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--text-faint);
-  margin-bottom: 0.35rem;
-}
-
-.node-name { font-size: 1.12rem; font-weight: 640; margin: 0 0 0.4rem; }
-.node-what { font-size: 0.94rem; color: var(--text-dim); margin-bottom: 0.7rem; }
-
-.node-list {
-  list-style: none;
-  margin: 0 0 0.8rem;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem 0.5rem;
-  font-size: 0.86rem;
-}
-.node-list li { color: var(--text-dim); }
-
-.node-url {
-  display: block;
-  font-family: var(--mono);
-  font-size: 0.8rem;
-  word-break: break-all;
-  margin-bottom: 0.15rem;
-}
-
-.node .badge { margin: 0.55rem 0.4rem 0 0; display: inline-block; }
-.node-more { display: block; font-size: 0.88rem; margin-top: 0.6rem; }
-
-/* Edge labels carry the verb; the arrow alone would not say what flows. */
-.map-edge {
-  margin: 0.7rem 0;
-  text-align: center;
-  font-family: var(--mono);
-  font-size: 0.8rem;
-  color: var(--text-faint);
-}
-
-.map-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
-.map-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
-
-@media (max-width: 780px) {
-  .map-split { grid-template-columns: 1fr; }
-  .map-split .map-edge:last-child { margin-top: 0; }
-  .map-row { grid-template-columns: 1fr; }
-}
-
-/* ---------- misc ---------- */
-
-.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
-
-.btn {
-  display: inline-block;
-  font: 560 0.92rem var(--sans);
-  border-radius: var(--radius-sm);
-  padding: 0.62rem 1.25rem;
-  border: 1px solid transparent;
-  transition: all 0.18s var(--ease);
-}
-.btn-primary { background: var(--accent); color: #17120b; }
-.btn-primary:hover { background: #ff9630; text-decoration: none; transform: translateY(-1px); }
-.btn-ghost { border-color: var(--line); color: var(--text-dim); }
-.btn-ghost:hover { border-color: var(--accent-line); color: var(--text); text-decoration: none; }
-
-.sep { border: none; border-top: 1px solid var(--line-soft); margin: 3rem 0; }
-
-.footer {
-  border-top: 1px solid var(--line-soft);
-  padding: 2.2rem 0 3rem;
-  color: var(--text-faint);
-  font-size: 0.86rem;
-}
-.footer p { color: var(--text-faint); margin-bottom: 0.5rem; }
-
-.skip {
-  position: absolute;
-  left: -9999px;
-  top: 0;
-  background: var(--accent);
-  color: #17120b;
-  padding: 0.6rem 1rem;
-  border-radius: 0 0 var(--radius-sm) 0;
-  z-index: 100;
-}
-.skip:focus { left: 0; }
-
-:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
-
-@media (prefers-reduced-motion: reduce) {
-  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
-  html { scroll-behavior: auto; }
-}