@deeeed/metamask-harness 0.28.0 → 0.29.0

package/site/assets/style.css

@@ -0,0 +1,808 @@
+/* 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; }
+
+html { scroll-behavior: smooth; scroll-padding-top: 92px; }
+
+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;
+  gap: 1.5rem;
+  height: 60px;
+}
+
+.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-adjacent mark: a geometric diamond, not a product logo. */
+.brand-mark {
+  width: 20px;
+  height: 20px;
+  flex: none;
+  border-radius: 5px;
+  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-deep) 100%);
+  transform: rotate(45deg);
+  box-shadow: 0 0 0 1px rgba(246, 133, 27, 0.3), 0 3px 12px rgba(246, 133, 27, 0.22);
+}
+
+.brand-name { font-family: var(--mono); font-size: 0.95rem; }
+
+.nav { display: flex; gap: 0.3rem; margin-left: auto; flex-wrap: wrap; }
+
+.nav a {
+  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); }
+
+/* ---------- 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);
+}
+
+/* ---------- 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; } }
+
+/* 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; }
+
+.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); }
+
+/* ---------- 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; }
+}