@ic-reactor/mcp 0.0.0-stage → 0.0.0

package/examples/canister-studio/src/styles.css

@@ -0,0 +1,3453 @@
+/*
+ * Canister Studio design system
+ * =============================
+ *
+ * One stylesheet, linked from the root route. Light and dark follow the
+ * reader's `prefers-color-scheme` only: no theme class, so the server's HTML
+ * and the hydrated page always agree.
+ *
+ * Rules for feature areas
+ * - Use the tokens below (var(--…)); never hard-code a color, a font or a
+ *   spacing value that a token covers.
+ * - Append your own styles at the END of this file, in one clearly delimited
+ *   section per area, opened by a comment that reads `=== forms ===`,
+ *   `=== values ===`, and so on. Prefix area classes (`.form-…`, `.reply-…`,
+ *   `.call-…`) so they never collide with the shared vocabulary below.
+ *
+ * Tokens (:root)
+ *   Color       --color-bg, --color-bg-subtle, --color-surface, --color-surface-2,
+ *               --color-surface-hover, --color-border, --color-border-strong,
+ *               --color-text, --color-text-muted, --color-text-subtle,
+ *               --color-accent (links, accents), --color-accent-solid (filled
+ *               buttons), --color-accent-hover, --color-accent-soft,
+ *               --color-on-accent, --color-focus, --color-code-bg,
+ *               --color-danger-solid, --color-danger-hover, --color-overlay
+ *   Tones       --tone-<name>-text / -bg / -border for
+ *               query, update, composite, oneway, ok, err, warn, info, certified
+ *   Spacing     --space-0, --space-px (1px), --space-0-5 (2px), --space-1 (4px),
+ *               --space-1-5 (6px), --space-2 (8px), --space-2-5 (10px),
+ *               --space-3 (12px), --space-4 (16px), --space-5 (20px),
+ *               --space-6 (24px), --space-8 (32px), --space-10 (40px),
+ *               --space-12 (48px), --space-16 (64px)
+ *   Radius      --radius-xs, -sm, -md, -lg, -xl, -full
+ *   Shadow      --shadow-xs, -sm, -md, -lg, --ring (focus ring box-shadow,
+ *               outside the element), --ring-inset (inside it: for controls
+ *               in a container that clips, such as a segmented control)
+ *   Type        --font-sans, --font-mono; --text-2xs … --text-4xl;
+ *               --leading-tight, -snug, -normal; --weight-normal, -medium,
+ *               -semibold, -bold
+ *   Layout      --header-height, --sidebar-width, --content-max, --gutter
+ *   Motion      --duration-fast, --duration-normal, --ease
+ *   Layers      --z-header, --z-overlay, --z-toast
+ *
+ * Layout
+ *   .app, .skip-link, .app-header (sticky), .app-header-inner, .brand,
+ *   .brand-mark, .brand-name, .app-nav, .app-nav-link(.active),
+ *   .app-header-tools, .app-main, .app-footer
+ *   .page, .page-header, .page-title, .page-subtitle, .page-actions
+ *   .section, .section-header, .section-title, .lead
+ *   .layout-sidebar > .sidebar + .content   (sidebar + main grid; one column
+ *                                            below 960px)
+ *
+ * Components
+ *   Buttons     .btn (+ .btn-primary, .btn-ghost, .btn-danger, .btn-sm,
+ *               .btn-lg, .btn-icon); disabled via [disabled] or
+ *               [aria-disabled="true"]
+ *   Controls    .input, .select, .textarea (+ .mono for principals, hex);
+ *               invalid via [aria-invalid="true"]; .input-group (control +
+ *               button side by side), .input-addon
+ *   Field       .field > .field-label + control + .field-hint +
+ *               .field-error; .fieldset (+ legend)
+ *   Switch      input[type="checkbox"].switch or button[role="switch"].switch
+ *               ([aria-checked]); .switch-label wraps a switch and its text
+ *   Segmented   .segmented > button[aria-pressed] (or [aria-checked])
+ *   Card        .card (+ .card-interactive, .card-inset) > .card-header,
+ *               .card-title, .card-subtitle, .card-body, .card-footer
+ *   Badge       .badge (+ .badge-query, .badge-update, .badge-composite,
+ *               .badge-oneway, .badge-ok, .badge-err, .badge-warn,
+ *               .badge-info, .badge-certified, .badge-accent,
+ *               .badge-network, .badge-dot (leading dot), .badge-lg)
+ *   Tabs        .tabs[role="tablist"] > .tab ([aria-selected="true"] or
+ *               .active / [aria-current="page"] for links); .tab-panel
+ *   Table       .table-wrap > table.table (+ .table-compact); th.num/td.num
+ *               (right-aligned, tabular figures)
+ *   Code        pre.code (block, scrolls), code.code-inline, .mono (any
+ *               monospace text), .break-all (long principals/hex)
+ *   Notice      .notice (+ .notice-info, .notice-warn, .notice-danger,
+ *               .notice-success) > .notice-title + text; role="status" or
+ *               role="alert" in markup
+ *   Key/value   dl.kv > dt + dd (two columns, stacks on narrow screens);
+ *               .kv-compact
+ *   Disclosure  details.disclosure > summary + .disclosure-body
+ *   Misc        .chip (constant value), .kbd, .spinner (+
+ *               .spinner-sm), .skeleton, .empty-state (+ -code, -detail),
+ *               .list-plain, .dot (+ tone modifiers via color)
+ *
+ * Helpers
+ *   .stack (vertical flow; .stack-xs/-sm/-lg/-xl are stacks with another gap)
+ *   .row (horizontal, wraps, centered; .row-sm is a row with a smaller gap;
+ *   modifiers .row-between, .row-end, .row-nowrap)
+ *   .grid (auto-fill columns, min width --grid-min, default 260px; .grid-2
+ *   two fixed columns that collapse on narrow screens)
+ *   .grow, .shrink-0, .muted, .subtle, .text-xs, .text-sm, .tabular,
+ *   .nowrap, .truncate, .sr-only
+ *
+ * Focus: every interactive element gets a visible ring on :focus-visible.
+ */
+
+/* ------------------------------------------------------------------------ */
+/* Tokens                                                                    */
+/* ------------------------------------------------------------------------ */
+
+:root {
+  color-scheme: light dark;
+
+  /* Neutrals and surfaces */
+  --color-bg: #f6f7f9;
+  --color-bg-subtle: #eef0f3;
+  --color-surface: #ffffff;
+  --color-surface-2: #f9fafb;
+  --color-surface-hover: #f1f3f6;
+  --color-border: #e2e5ea;
+  --color-border-strong: #c9ced7;
+  --color-text: #151920;
+  --color-text-muted: #545d6b;
+  /* At least 4.5:1 on every surface and tone background (AA, small text). */
+  --color-text-subtle: #646d7b;
+  --color-code-bg: #f4f6f8;
+  --color-overlay: rgb(15 18 24 / 0.45);
+
+  /* Accent */
+  --color-accent: #4338ca;
+  --color-accent-solid: #4f46e5;
+  --color-accent-hover: #4338ca;
+  --color-accent-soft: #eef0ff;
+  --color-on-accent: #ffffff;
+  --color-focus: #6366f1;
+  --color-danger-solid: #dc2626;
+  --color-danger-hover: #b91c1c;
+
+  /* Tones: method modes and outcomes */
+  --tone-query-text: #1d4ed8;
+  --tone-query-bg: #eff6ff;
+  --tone-query-border: #bfdbfe;
+  --tone-update-text: #b45309;
+  --tone-update-bg: #fffbeb;
+  --tone-update-border: #fde68a;
+  --tone-composite-text: #6d28d9;
+  --tone-composite-bg: #f5f3ff;
+  --tone-composite-border: #ddd6fe;
+  --tone-oneway-text: #be185d;
+  --tone-oneway-bg: #fdf2f8;
+  --tone-oneway-border: #fbcfe8;
+  --tone-ok-text: #15803d;
+  --tone-ok-bg: #f0fdf4;
+  --tone-ok-border: #bbf7d0;
+  --tone-err-text: #b91c1c;
+  --tone-err-bg: #fef2f2;
+  --tone-err-border: #fecaca;
+  --tone-warn-text: #c2410c;
+  --tone-warn-bg: #fff7ed;
+  --tone-warn-border: #fed7aa;
+  --tone-info-text: #0369a1;
+  --tone-info-bg: #f0f9ff;
+  --tone-info-border: #bae6fd;
+  --tone-certified-text: #047857;
+  --tone-certified-bg: #ecfdf5;
+  --tone-certified-border: #a7f3d0;
+
+  /* Spacing (4 px grid, with half steps for dense controls) */
+  --space-0: 0;
+  --space-px: 1px;
+  --space-0-5: 2px;
+  --space-1: 4px;
+  --space-1-5: 6px;
+  --space-2: 8px;
+  --space-2-5: 10px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+
+  /* Radius */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
+  --shadow-sm: 0 1px 3px rgb(16 24 40 / 0.08), 0 1px 2px rgb(16 24 40 / 0.04);
+  --shadow-md:
+    0 4px 8px -2px rgb(16 24 40 / 0.08), 0 2px 4px -2px rgb(16 24 40 / 0.04);
+  --shadow-lg:
+    0 12px 24px -6px rgb(16 24 40 / 0.12), 0 4px 8px -4px rgb(16 24 40 / 0.05);
+  /* Solid, at least 3:1 against what surrounds it in both themes (WCAG
+     1.4.11): a surface-colored gap, then the focus color. */
+  --ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
+  --ring-inset: inset 0 0 0 2px var(--color-focus);
+
+  /* Type */
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji";
+  --font-mono:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  --text-2xs: 0.6875rem; /* 11px */
+  --text-xs: 0.75rem; /* 12px */
+  --text-sm: 0.8125rem; /* 13px */
+  --text-base: 0.875rem; /* 14px: dense, console-like body text */
+  --text-md: 1rem; /* 16px */
+  --text-lg: 1.125rem; /* 18px */
+  --text-xl: 1.25rem; /* 20px */
+  --text-2xl: 1.5rem; /* 24px */
+  --text-3xl: 1.875rem; /* 30px */
+  --text-4xl: 2.25rem; /* 36px */
+  --leading-tight: 1.2;
+  --leading-snug: 1.35;
+  --leading-normal: 1.55;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  /* Layout */
+  --header-height: 56px;
+  --sidebar-width: 288px;
+  --content-max: 1240px;
+  --gutter: var(--space-6);
+
+  /* Motion */
+  --duration-fast: 120ms;
+  --duration-normal: 200ms;
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Layers */
+  --z-header: 20;
+  --z-overlay: 40;
+  --z-toast: 50;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #0b0d11;
+    --color-bg-subtle: #11141a;
+    --color-surface: #13161c;
+    --color-surface-2: #181c23;
+    --color-surface-hover: #1d222b;
+    --color-border: #262b35;
+    --color-border-strong: #353c48;
+    --color-text: #e7e9ee;
+    --color-text-muted: #a0a8b6;
+    --color-text-subtle: #8a93a3;
+    --color-code-bg: #0f1217;
+    --color-overlay: rgb(0 0 0 / 0.6);
+
+    --color-accent: #a5b4fc;
+    /* White on it is 4.97:1 (AA); #6366f1 was 4.47:1. */
+    --color-accent-solid: #5b5ee9;
+    --color-accent-hover: #4f46e5;
+    --color-accent-soft: rgb(99 102 241 / 0.16);
+    --color-on-accent: #ffffff;
+    --color-focus: #818cf8;
+    --color-danger-solid: #dc2626;
+    --color-danger-hover: #ef4444;
+
+    --tone-query-text: #93c5fd;
+    --tone-query-bg: rgb(59 130 246 / 0.14);
+    --tone-query-border: rgb(59 130 246 / 0.36);
+    --tone-update-text: #fcd34d;
+    --tone-update-bg: rgb(245 158 11 / 0.13);
+    --tone-update-border: rgb(245 158 11 / 0.36);
+    --tone-composite-text: #c4b5fd;
+    --tone-composite-bg: rgb(139 92 246 / 0.16);
+    --tone-composite-border: rgb(139 92 246 / 0.4);
+    --tone-oneway-text: #f9a8d4;
+    --tone-oneway-bg: rgb(236 72 153 / 0.14);
+    --tone-oneway-border: rgb(236 72 153 / 0.36);
+    --tone-ok-text: #86efac;
+    --tone-ok-bg: rgb(34 197 94 / 0.13);
+    --tone-ok-border: rgb(34 197 94 / 0.36);
+    --tone-err-text: #fca5a5;
+    --tone-err-bg: rgb(239 68 68 / 0.14);
+    --tone-err-border: rgb(239 68 68 / 0.4);
+    --tone-warn-text: #fdba74;
+    --tone-warn-bg: rgb(249 115 22 / 0.13);
+    --tone-warn-border: rgb(249 115 22 / 0.36);
+    --tone-info-text: #7dd3fc;
+    --tone-info-bg: rgb(14 165 233 / 0.13);
+    --tone-info-border: rgb(14 165 233 / 0.36);
+    --tone-certified-text: #6ee7b7;
+    --tone-certified-bg: rgb(16 185 129 / 0.13);
+    --tone-certified-border: rgb(16 185 129 / 0.38);
+
+    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
+    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
+    --shadow-md:
+      0 4px 10px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+    --shadow-lg:
+      0 14px 28px -6px rgb(0 0 0 / 0.6), 0 4px 8px -4px rgb(0 0 0 / 0.35);
+  }
+}
+
+/* ------------------------------------------------------------------------ */
+/* Base                                                                      */
+/* ------------------------------------------------------------------------ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  scroll-padding-top: calc(var(--header-height) + var(--space-4));
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  color: var(--color-text);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-tight);
+  letter-spacing: -0.01em;
+}
+
+h1 {
+  font-size: var(--text-2xl);
+}
+h2 {
+  font-size: var(--text-xl);
+}
+h3 {
+  font-size: var(--text-lg);
+}
+h4 {
+  font-size: var(--text-md);
+}
+h5,
+h6 {
+  font-size: var(--text-base);
+}
+
+p {
+  margin: 0;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+  text-underline-offset: 2px;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+}
+
+pre {
+  margin: 0;
+}
+
+hr {
+  height: 0;
+  margin: var(--space-6) 0;
+  border: 0;
+  border-top: 1px solid var(--color-border);
+}
+
+img,
+svg,
+video,
+canvas {
+  vertical-align: middle;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+dl,
+dd,
+ul,
+ol {
+  margin: 0;
+}
+
+ul,
+ol {
+  padding-left: var(--space-5);
+}
+
+::selection {
+  background: color-mix(in srgb, var(--color-focus) 30%, transparent);
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ------------------------------------------------------------------------ */
+/* Layout                                                                    */
+/* ------------------------------------------------------------------------ */
+
+.app {
+  display: flex;
+  min-height: 100vh;
+  min-height: 100dvh;
+  flex-direction: column;
+}
+
+.skip-link {
+  position: absolute;
+  top: var(--space-2);
+  left: var(--space-2);
+  z-index: var(--z-toast);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  background: var(--color-accent-solid);
+  color: var(--color-on-accent);
+  font-weight: var(--weight-medium);
+  transform: translateY(-200%);
+  transition: transform var(--duration-fast) var(--ease);
+}
+
+.skip-link:focus {
+  transform: none;
+  text-decoration: none;
+}
+
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-header);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface);
+  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
+  -webkit-backdrop-filter: saturate(1.4) blur(10px);
+  backdrop-filter: saturate(1.4) blur(10px);
+}
+
+.app-header-inner {
+  display: flex;
+  max-width: var(--content-max);
+  min-height: var(--header-height);
+  margin: 0 auto;
+  padding: 0 var(--gutter);
+  align-items: center;
+  gap: var(--space-6);
+}
+
+.brand {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-text);
+  font-size: var(--text-md);
+  font-weight: var(--weight-semibold);
+  letter-spacing: -0.015em;
+}
+
+.brand:hover {
+  text-decoration: none;
+}
+
+.brand-mark {
+  color: var(--color-accent-solid);
+}
+
+.app-nav {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--space-1);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.app-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.app-nav-link {
+  flex-shrink: 0;
+  padding: var(--space-1-5) var(--space-3);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  font-weight: var(--weight-medium);
+  white-space: nowrap;
+  transition:
+    background-color var(--duration-fast) var(--ease),
+    color var(--duration-fast) var(--ease);
+}
+
+.app-nav-link:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.app-nav-link.active,
+.app-nav-link[aria-current="page"] {
+  background: var(--color-accent-soft);
+  color: var(--color-accent);
+}
+
+.app-header-tools {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.app-main {
+  width: 100%;
+  max-width: var(--content-max);
+  margin: 0 auto;
+  padding: var(--space-8) var(--gutter) var(--space-12);
+  flex: 1;
+}
+
+.app-main:focus {
+  outline: none;
+}
+
+.app-footer {
+  border-top: 1px solid var(--color-border);
+  padding: var(--space-6) var(--gutter);
+  font-size: var(--text-xs);
+  text-align: center;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.page-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-5);
+}
+
+.page-title {
+  font-size: var(--text-3xl);
+  font-weight: var(--weight-bold);
+  letter-spacing: -0.025em;
+}
+
+.page-subtitle {
+  max-width: 72ch;
+  color: var(--color-text-muted);
+  font-size: var(--text-md);
+}
+
+.page-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.section-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-2) var(--space-4);
+}
+
+.section-title {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-semibold);
+}
+
+.lead {
+  max-width: 68ch;
+  color: var(--color-text-muted);
+  font-size: var(--text-lg);
+  line-height: var(--leading-snug);
+}
+
+.layout-sidebar {
+  display: grid;
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+  align-items: start;
+  gap: var(--space-6);
+}
+
+.layout-sidebar > .sidebar {
+  position: sticky;
+  top: calc(var(--header-height) + var(--space-4));
+  max-height: calc(100vh - var(--header-height) - var(--space-8));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.layout-sidebar > .content {
+  min-width: 0;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Buttons                                                                   */
+/* ------------------------------------------------------------------------ */
+
+.btn {
+  display: inline-flex;
+  /* Never stretched by a column flex container (.stack, .card-body). */
+  width: fit-content;
+  min-height: 32px;
+  padding: 0 var(--space-3);
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1-5);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--duration-fast) var(--ease),
+    border-color var(--duration-fast) var(--ease),
+    color var(--duration-fast) var(--ease),
+    box-shadow var(--duration-fast) var(--ease);
+}
+
+.btn:hover {
+  background: var(--color-surface-hover);
+  text-decoration: none;
+}
+
+.btn:active {
+  transform: translateY(0.5px);
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+  border-color: var(--color-focus);
+}
+
+.btn:disabled,
+.btn[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-primary {
+  border-color: var(--color-accent-solid);
+  background: var(--color-accent-solid);
+  color: var(--color-on-accent);
+}
+
+.btn-primary:hover {
+  border-color: var(--color-accent-hover);
+  background: var(--color-accent-hover);
+}
+
+.btn-primary:disabled,
+.btn-primary[aria-disabled="true"] {
+  border-color: var(--color-accent-solid);
+  background: var(--color-accent-solid);
+}
+
+.btn-ghost {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--color-text-muted);
+}
+
+.btn-ghost:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.btn-danger {
+  border-color: var(--color-danger-solid);
+  background: var(--color-danger-solid);
+  color: #ffffff;
+}
+
+.btn-danger:hover {
+  border-color: var(--color-danger-hover);
+  background: var(--color-danger-hover);
+}
+
+.btn-sm {
+  min-height: 26px;
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-xs);
+  font-size: var(--text-xs);
+}
+
+.btn-lg {
+  min-height: 40px;
+  padding: 0 var(--space-5);
+  font-size: var(--text-base);
+}
+
+.btn-icon {
+  width: 32px;
+  padding: 0;
+}
+
+.btn-icon.btn-sm {
+  width: 26px;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Form controls                                                             */
+/* ------------------------------------------------------------------------ */
+
+.input,
+.select,
+.textarea {
+  display: block;
+  width: 100%;
+  min-height: 34px;
+  padding: var(--space-1-5) var(--space-2-5);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: var(--text-base);
+  line-height: var(--leading-snug);
+  transition:
+    border-color var(--duration-fast) var(--ease),
+    box-shadow var(--duration-fast) var(--ease);
+}
+
+.input::placeholder,
+.textarea::placeholder {
+  color: var(--color-text-subtle);
+  opacity: 1;
+}
+
+.input:hover,
+.select:hover,
+.textarea:hover {
+  border-color: var(--color-text-subtle);
+}
+
+.input:focus-visible,
+.select:focus-visible,
+.textarea:focus-visible {
+  outline: none;
+  border-color: var(--color-focus);
+  box-shadow: var(--ring);
+}
+
+.input[aria-invalid="true"],
+.select[aria-invalid="true"],
+.textarea[aria-invalid="true"] {
+  border-color: var(--tone-err-text);
+}
+
+.input[aria-invalid="true"]:focus-visible,
+.select[aria-invalid="true"]:focus-visible,
+.textarea[aria-invalid="true"]:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--color-surface),
+    0 0 0 4px var(--tone-err-text);
+}
+
+.input:disabled,
+.select:disabled,
+.textarea:disabled,
+.input[readonly],
+.textarea[readonly] {
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+}
+
+.input:disabled,
+.select:disabled,
+.textarea:disabled {
+  cursor: not-allowed;
+}
+
+.input.mono,
+.textarea.mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+.select {
+  padding-right: var(--space-8);
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23858e9c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-position: right 10px center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+.textarea {
+  min-height: 84px;
+  resize: vertical;
+}
+
+.input-group {
+  display: flex;
+  align-items: stretch;
+}
+
+.input-group > .input,
+.input-group > .select {
+  min-width: 0;
+  flex: 1;
+}
+
+.input-group > :not(:first-child) {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-group > :not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group > .btn {
+  min-height: 34px;
+  box-shadow: none;
+}
+
+.input-group > :focus-visible {
+  position: relative;
+  z-index: 1;
+}
+
+.input-addon {
+  display: inline-flex;
+  padding: 0 var(--space-2);
+  align-items: center;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  white-space: nowrap;
+}
+
+/* Field: label + control + hint + error */
+
+.field {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.field-label {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1-5);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+}
+
+.field-hint {
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+}
+
+.field-error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-1);
+  color: var(--tone-err-text);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+}
+
+.fieldset {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4) var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-2);
+}
+
+.fieldset > legend {
+  padding: 0 var(--space-1-5);
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: 0.02em;
+}
+
+/* Switch: <input type="checkbox" class="switch"> or <button role="switch"> */
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 34px;
+  height: 20px;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--color-border-strong);
+  appearance: none;
+  cursor: pointer;
+  vertical-align: middle;
+  transition: background-color var(--duration-fast) var(--ease);
+}
+
+.switch::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
+  transition: transform var(--duration-fast) var(--ease);
+}
+
+.switch:checked,
+.switch[aria-checked="true"] {
+  background: var(--color-accent-solid);
+}
+
+.switch:checked::before,
+.switch[aria-checked="true"]::before {
+  transform: translateX(14px);
+}
+
+.switch:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+
+.switch:disabled,
+.switch[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.switch-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  cursor: pointer;
+}
+
+/* Segmented control: a few exclusive options (variant arms, view modes) */
+
+.segmented {
+  display: inline-flex;
+  max-width: 100%;
+  padding: 2px;
+  gap: 2px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-subtle);
+  overflow-x: auto;
+}
+
+.segmented > button {
+  min-height: 26px;
+  padding: 0 var(--space-2-5);
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  white-space: nowrap;
+}
+
+.segmented > button:hover {
+  color: var(--color-text);
+}
+
+.segmented > button[aria-pressed="true"],
+.segmented > button[aria-checked="true"] {
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+  color: var(--color-text);
+}
+
+.segmented > button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.segmented > button:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-inset);
+}
+
+/* ------------------------------------------------------------------------ */
+/* Card                                                                      */
+/* ------------------------------------------------------------------------ */
+
+.card {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+}
+
+.card-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2) var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.card-title {
+  font-size: var(--text-md);
+  font-weight: var(--weight-semibold);
+}
+
+.card-subtitle {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.card-body {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4);
+}
+
+.card-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--color-border);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  background: var(--color-surface-2);
+}
+
+.card-interactive {
+  transition:
+    border-color var(--duration-fast) var(--ease),
+    box-shadow var(--duration-fast) var(--ease),
+    transform var(--duration-fast) var(--ease);
+}
+
+.card-interactive:hover {
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-md);
+}
+
+a.card-interactive,
+a.card-interactive:hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+.card-inset {
+  background: var(--color-surface-2);
+  box-shadow: none;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Badge                                                                     */
+/* ------------------------------------------------------------------------ */
+
+.badge {
+  display: inline-flex;
+  width: fit-content;
+  height: 20px;
+  padding: 0 var(--space-2);
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--space-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-full);
+  background: var(--color-bg-subtle);
+  color: var(--color-text-muted);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-semibold);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.badge-lg {
+  height: 24px;
+  padding: 0 var(--space-2-5);
+  font-size: var(--text-xs);
+}
+
+.badge-dot::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: currentColor;
+}
+
+.badge-query {
+  border-color: var(--tone-query-border);
+  background: var(--tone-query-bg);
+  color: var(--tone-query-text);
+}
+
+.badge-update {
+  border-color: var(--tone-update-border);
+  background: var(--tone-update-bg);
+  color: var(--tone-update-text);
+}
+
+.badge-composite {
+  border-color: var(--tone-composite-border);
+  background: var(--tone-composite-bg);
+  color: var(--tone-composite-text);
+}
+
+.badge-oneway {
+  border-color: var(--tone-oneway-border);
+  background: var(--tone-oneway-bg);
+  color: var(--tone-oneway-text);
+}
+
+.badge-ok {
+  border-color: var(--tone-ok-border);
+  background: var(--tone-ok-bg);
+  color: var(--tone-ok-text);
+}
+
+.badge-err {
+  border-color: var(--tone-err-border);
+  background: var(--tone-err-bg);
+  color: var(--tone-err-text);
+}
+
+.badge-warn {
+  border-color: var(--tone-warn-border);
+  background: var(--tone-warn-bg);
+  color: var(--tone-warn-text);
+}
+
+.badge-info {
+  border-color: var(--tone-info-border);
+  background: var(--tone-info-bg);
+  color: var(--tone-info-text);
+}
+
+.badge-certified {
+  border-color: var(--tone-certified-border);
+  background: var(--tone-certified-bg);
+  color: var(--tone-certified-text);
+}
+
+.badge-accent {
+  border-color: transparent;
+  background: var(--color-accent-soft);
+  color: var(--color-accent);
+}
+
+.badge-network {
+  border-color: var(--tone-ok-border);
+  background: var(--tone-ok-bg);
+  color: var(--tone-ok-text);
+}
+
+.badge-network::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: currentColor;
+  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent);
+}
+
+/* ------------------------------------------------------------------------ */
+/* Tabs                                                                      */
+/* ------------------------------------------------------------------------ */
+
+.tabs {
+  display: flex;
+  gap: var(--space-1);
+  border-bottom: 1px solid var(--color-border);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.tab {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--space-1-5);
+  margin-bottom: -1px;
+  padding: var(--space-2) var(--space-3);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  white-space: nowrap;
+  text-decoration: none;
+  transition:
+    color var(--duration-fast) var(--ease),
+    border-color var(--duration-fast) var(--ease);
+}
+
+.tab:hover {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.tab[aria-selected="true"],
+.tab.active,
+.tab[aria-current="page"] {
+  border-bottom-color: var(--color-accent-solid);
+  color: var(--color-text);
+}
+
+.tab:focus-visible {
+  outline: none;
+  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
+  box-shadow: var(--ring-inset);
+}
+
+.tab-panel {
+  padding-top: var(--space-4);
+}
+
+/* ------------------------------------------------------------------------ */
+/* Table                                                                     */
+/* ------------------------------------------------------------------------ */
+
+.table-wrap {
+  max-width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  font-size: var(--text-sm);
+}
+
+.table th,
+.table td {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+  text-align: left;
+  vertical-align: top;
+}
+
+.table th {
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.table tbody tr:last-child > td {
+  border-bottom: 0;
+}
+
+.table tbody tr:hover > td {
+  background: var(--color-surface-2);
+}
+
+.table .num,
+.table th.num,
+.table td.num {
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.table-compact th,
+.table-compact td {
+  padding: var(--space-1) var(--space-2);
+}
+
+/* ------------------------------------------------------------------------ */
+/* Code and monospace                                                        */
+/* ------------------------------------------------------------------------ */
+
+.mono {
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+  font-variant-ligatures: none;
+}
+
+.break-all {
+  overflow-wrap: anywhere;
+  word-break: break-all;
+}
+
+pre.code,
+.code {
+  display: block;
+  max-width: 100%;
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-code-bg);
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+  tab-size: 2;
+  white-space: pre;
+  overflow: auto;
+}
+
+.code-wrap {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+code.code-inline {
+  padding: 0.1em 0.35em;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xs);
+  background: var(--color-code-bg);
+  font-size: 0.88em;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Notice                                                                    */
+/* ------------------------------------------------------------------------ */
+
+.notice {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--color-border);
+  border-left-width: 3px;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-2);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+}
+
+.notice-title {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+}
+
+.notice-info {
+  border-color: var(--tone-info-border);
+  border-left-color: var(--tone-info-text);
+  background: var(--tone-info-bg);
+}
+
+.notice-info > .notice-title {
+  color: var(--tone-info-text);
+}
+
+.notice-warn {
+  border-color: var(--tone-warn-border);
+  border-left-color: var(--tone-warn-text);
+  background: var(--tone-warn-bg);
+}
+
+.notice-warn > .notice-title {
+  color: var(--tone-warn-text);
+}
+
+.notice-danger {
+  border-color: var(--tone-err-border);
+  border-left-color: var(--tone-err-text);
+  background: var(--tone-err-bg);
+}
+
+.notice-danger > .notice-title {
+  color: var(--tone-err-text);
+}
+
+.notice-success {
+  border-color: var(--tone-ok-border);
+  border-left-color: var(--tone-ok-text);
+  background: var(--tone-ok-bg);
+}
+
+.notice-success > .notice-title {
+  color: var(--tone-ok-text);
+}
+
+/* ------------------------------------------------------------------------ */
+/* Key/value list                                                            */
+/* ------------------------------------------------------------------------ */
+
+.kv {
+  display: grid;
+  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
+  gap: var(--space-1-5) var(--space-4);
+  font-size: var(--text-sm);
+}
+
+.kv > dt {
+  color: var(--color-text-muted);
+  font-weight: var(--weight-medium);
+}
+
+.kv > dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.kv-compact {
+  gap: var(--space-0-5) var(--space-3);
+  font-size: var(--text-xs);
+}
+
+/* ------------------------------------------------------------------------ */
+/* Disclosure                                                                */
+/* ------------------------------------------------------------------------ */
+
+.disclosure {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+}
+
+.disclosure > summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+}
+
+.disclosure > summary::-webkit-details-marker {
+  display: none;
+}
+
+.disclosure > summary::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  flex-shrink: 0;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  color: var(--color-text-subtle);
+  transform: rotate(-45deg);
+  transition: transform var(--duration-fast) var(--ease);
+}
+
+.disclosure[open] > summary::before {
+  transform: rotate(45deg);
+}
+
+.disclosure > summary:hover {
+  background: var(--color-surface-hover);
+}
+
+.disclosure > summary:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-inset);
+}
+
+.disclosure-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border-top: 1px solid var(--color-border);
+}
+
+/* ------------------------------------------------------------------------ */
+/* Misc                                                                      */
+/* ------------------------------------------------------------------------ */
+
+.chip {
+  display: inline-flex;
+  width: fit-content;
+  height: 22px;
+  padding: 0 var(--space-2);
+  align-items: center;
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-xs);
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  white-space: nowrap;
+}
+
+.kbd {
+  display: inline-flex;
+  width: fit-content;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 var(--space-1);
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border-strong);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+}
+
+.dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+  border-radius: var(--radius-full);
+  background: currentColor;
+}
+
+.list-plain {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.spinner {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border: 2px solid var(--color-border-strong);
+  border-top-color: var(--color-accent-solid);
+  border-radius: var(--radius-full);
+  animation: spin 0.7s linear infinite;
+}
+
+.spinner-sm {
+  width: 12px;
+  height: 12px;
+  border-width: 1.5px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.skeleton {
+  display: block;
+  min-height: 1em;
+  border-radius: var(--radius-xs);
+  background: linear-gradient(
+    90deg,
+    var(--color-bg-subtle) 25%,
+    var(--color-surface-hover) 50%,
+    var(--color-bg-subtle) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+.empty-state {
+  display: flex;
+  max-width: 560px;
+  margin: var(--space-12) auto;
+  padding: var(--space-8) var(--space-6);
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-lg);
+  text-align: center;
+}
+
+.empty-state-code {
+  color: var(--color-text-subtle);
+  font-size: var(--text-3xl);
+  font-weight: var(--weight-bold);
+}
+
+.empty-state-detail {
+  width: 100%;
+  max-height: 240px;
+  text-align: left;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Helpers                                                                   */
+/* ------------------------------------------------------------------------ */
+
+/* Each gap variant is a complete stack or row on its own: `.stack-sm` needs
+   no `.stack`. */
+.stack,
+.stack-xs,
+.stack-sm,
+.stack-lg,
+.stack-xl {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.stack-xs {
+  gap: var(--space-1);
+}
+
+.stack-sm {
+  gap: var(--space-2);
+}
+
+.stack-lg {
+  gap: var(--space-5);
+}
+
+.stack-xl {
+  gap: var(--space-8);
+}
+
+.row,
+.row-sm {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.row-sm {
+  gap: var(--space-1);
+}
+
+.row-between {
+  justify-content: space-between;
+}
+
+.row-end {
+  justify-content: flex-end;
+}
+
+.row-nowrap {
+  flex-wrap: nowrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(var(--grid-min, 260px), 100%), 1fr)
+  );
+  gap: var(--space-4);
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grow {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.muted {
+  color: var(--color-text-muted);
+}
+
+.subtle {
+  color: var(--color-text-subtle);
+}
+
+.text-xs {
+  font-size: var(--text-xs);
+}
+
+.text-sm {
+  font-size: var(--text-sm);
+}
+
+.tabular {
+  font-variant-numeric: tabular-nums;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* ------------------------------------------------------------------------ */
+/* Responsive                                                                */
+/* ------------------------------------------------------------------------ */
+
+@media (max-width: 960px) {
+  .layout-sidebar {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .layout-sidebar > .sidebar {
+    position: static;
+    max-height: none;
+    overflow: visible;
+  }
+}
+
+@media (max-width: 720px) {
+  :root {
+    --gutter: var(--space-4);
+  }
+
+  /* The nav moves to its own scrolling row under the brand and tools. */
+  .app-header-inner {
+    flex-wrap: wrap;
+    gap: 0 var(--space-3);
+    padding-top: var(--space-2);
+  }
+
+  .app-nav {
+    order: 3;
+    width: calc(100% + 2 * var(--gutter));
+    margin: 0 calc(-1 * var(--gutter));
+    padding: var(--space-1) var(--gutter) var(--space-2);
+  }
+
+  .app-main {
+    padding-top: var(--space-6);
+  }
+
+  .page-title {
+    font-size: var(--text-2xl);
+  }
+
+  .grid-2 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .kv {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+  }
+
+  .kv > dd {
+    margin-bottom: var(--space-2);
+  }
+}
+
+@media (max-width: 400px) {
+  :root {
+    --gutter: var(--space-3);
+  }
+
+  .brand-name {
+    font-size: var(--text-base);
+  }
+
+  .card-header,
+  .card-body,
+  .card-footer {
+    padding-left: var(--space-3);
+    padding-right: var(--space-3);
+  }
+}
+
+/* === calls === */
+/* The safe-call layer (src/calls): runners, the confirm step, errors,
+   re-sends, read-backs and the live query key. */
+
+.call-runner .card-body {
+  gap: var(--space-4);
+}
+
+.call-kind-note {
+  margin: 0;
+}
+
+.call-outcome:empty {
+  display: none;
+}
+
+/* The verdict of a failed call: the one line a reader must not miss. */
+.call-verdict {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.call-verdict .badge {
+  letter-spacing: 0.02em;
+}
+
+.call-verdict[data-verdict="may_have_executed"] .badge {
+  font-weight: var(--weight-bold);
+}
+
+.call-verdict-advice {
+  font-weight: var(--weight-medium);
+}
+
+.call-error .kv {
+  margin: var(--space-1) 0;
+}
+
+.call-error pre.code,
+.call-confirm pre.code {
+  max-height: 16rem;
+  white-space: pre-wrap;
+}
+
+.call-issues {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  font-size: var(--text-sm);
+}
+
+.call-err-payload {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+}
+
+/* The confirm step: framed like the write it guards. */
+.call-confirm {
+  border-color: var(--tone-update-border);
+  box-shadow: var(--shadow-md);
+}
+
+.call-confirm .card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  background: var(--tone-update-bg);
+}
+
+.call-confirm .card-title:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+  border-radius: var(--radius-xs);
+}
+
+.call-confirm-candid {
+  margin: 0;
+}
+
+.call-confirm-hex {
+  margin: 0;
+  word-break: break-all;
+}
+
+/* The live query key, one segment per row; the caller stands out. */
+.call-cache > summary .badge {
+  margin-left: auto;
+}
+
+.call-key {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.call-key-segment {
+  display: grid;
+  grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
+  gap: var(--space-0-5) var(--space-3);
+  align-items: baseline;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+}
+
+.call-key-name {
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+}
+
+.call-key-value {
+  min-width: 0;
+  font-size: var(--text-xs);
+}
+
+.call-key-note {
+  grid-column: 2;
+  font-size: var(--text-2xs);
+}
+
+.call-key-caller {
+  border: 1px solid var(--tone-certified-border);
+  background: var(--tone-certified-bg);
+}
+
+.call-key-caller .call-key-name,
+.call-key-caller .call-key-value {
+  color: var(--tone-certified-text);
+}
+
+.call-resend .row,
+.call-no-resend .row {
+  margin-top: var(--space-1);
+}
+
+.call-readback .card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.call-share {
+  min-width: 0;
+}
+
+@media (max-width: 480px) {
+  .call-key-segment {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .call-key-note {
+    grid-column: 1;
+  }
+}
+/* === end calls === */
+
+/* === safety === */
+
+.safety-card-header {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+
+.safety-number {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-8);
+  height: var(--space-8);
+  border-radius: var(--radius-full);
+  background: var(--color-accent-soft);
+  color: var(--color-accent);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+}
+
+.safety-card-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  line-height: var(--leading-snug);
+}
+
+.safety-verdict {
+  flex-shrink: 0;
+}
+
+.safety-rule {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-3);
+  border-left: 3px solid var(--color-accent);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.safety-rule-label {
+  color: var(--color-text-subtle);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.safety-outcome {
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--color-border);
+}
+
+.safety-subtitle {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+}
+
+.safety-steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.safety-step {
+  display: flex;
+  gap: var(--space-2);
+  align-items: baseline;
+  font-size: var(--text-sm);
+}
+
+.safety-step-mark {
+  flex-shrink: 0;
+  width: var(--space-4);
+  font-weight: var(--weight-bold);
+  text-align: center;
+}
+
+.safety-step-pass .safety-step-mark {
+  color: var(--tone-ok-text);
+}
+
+.safety-step-fail {
+  color: var(--tone-err-text);
+  font-weight: var(--weight-semibold);
+}
+
+.safety-step-fail .safety-step-mark {
+  color: var(--tone-err-text);
+}
+
+.safety-step-info {
+  color: var(--color-text-muted);
+}
+
+.safety-step-info .safety-step-mark {
+  color: var(--color-text-subtle);
+}
+
+.safety-step-text {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 0 var(--space-2);
+}
+
+.safety-step-detail {
+  color: var(--color-text-subtle);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-normal);
+}
+
+.safety-log-flagged td {
+  background: var(--tone-warn-bg);
+}
+
+.safety-log-empty {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.safety-tally {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.safety-item {
+  scroll-margin-top: calc(var(--header-height) + var(--space-4));
+}
+
+/* === end safety === */
+
+/* === values === */
+/* The reply viewer, its Candid and JSON views, and the call preview
+   (src/values). Classes: .value-* and .call-preview-*. */
+
+.value-inspector,
+.value-body {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.value-inspector {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.value-toolbar,
+.value-toolbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.value-toolbar {
+  justify-content: space-between;
+}
+
+.value-code {
+  max-height: 480px;
+}
+
+/* Key/value levels: names in monospace; nested levels indented on a guide. */
+.value-record > dt {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  overflow-wrap: anywhere;
+}
+
+.value-record > dd {
+  min-width: 0;
+}
+
+/* Two columns (they stack below 720px, as every .kv does): the names take
+   at most 14rem and wrap past it (overflow-wrap above), so one long field
+   name cannot squeeze every value, nested records most, into a sliver. The
+   floor is .kv's, so short names still line their values up. */
+@media (min-width: 721px) {
+  .value-record {
+    grid-template-columns: fit-content(14rem) minmax(0, 1fr);
+  }
+
+  .value-record > dt {
+    min-width: 6rem;
+  }
+}
+
+.value-record .value-record,
+.value-vec .value-record {
+  padding-left: var(--space-2);
+  border-left: 2px solid var(--color-border);
+}
+
+.value-principal,
+.value-blob,
+.value-func,
+.value-number,
+.value-mismatch,
+.value-variant {
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1) var(--space-1-5);
+  vertical-align: middle;
+}
+
+.value-variant {
+  align-items: flex-start;
+}
+
+.value-variant-payload {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.value-result {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+}
+
+.value-text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+pre.value-text-block {
+  max-height: 320px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.value-time,
+.value-open,
+.value-utf8 {
+  font-size: var(--text-xs);
+}
+
+/* A number or a timestamp never breaks inside. */
+.value-number > .mono,
+.value-time {
+  white-space: nowrap;
+}
+
+.value-open {
+  font-weight: var(--weight-medium);
+  white-space: nowrap;
+}
+
+/* The copy buttons inside a value: smaller than a .btn-sm, for dense trees. */
+.btn.value-copy {
+  width: 22px;
+  min-height: 22px;
+}
+
+.value-vec {
+  display: flex;
+  max-width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-1-5);
+}
+
+.value-vec > .table-wrap,
+.value-vec > .value-record,
+.value-vec > .value-list {
+  align-self: stretch;
+}
+
+.value-table td {
+  min-width: 6ch;
+}
+
+/* Cells size to their content (the wrapper scrolls) instead of breaking
+   names, hex and principals one character per line. */
+.value-table .kv {
+  grid-template-columns: max-content minmax(max-content, 1fr);
+}
+
+.value-table .kv > dd {
+  overflow-wrap: normal;
+}
+
+.value-table .value-blob,
+.value-table .value-principal {
+  flex-wrap: nowrap;
+}
+
+.value-table code.break-all {
+  white-space: nowrap;
+  word-break: normal;
+  overflow-wrap: normal;
+}
+
+.value-table td .value-record {
+  font-size: var(--text-2xs);
+}
+
+.value-list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  gap: var(--space-1);
+  list-style: none;
+}
+
+.value-list > li {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: var(--space-2);
+}
+
+.value-index {
+  min-width: 2ch;
+  font-size: var(--text-xs);
+  text-align: right;
+}
+
+.value-pager {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.call-preview-hex {
+  display: block;
+  max-height: 240px;
+  overflow: auto;
+  font-size: var(--text-xs);
+}
+
+/* === end values === */
+
+/* === forms === */
+/* MethodForm / TypedForm: schema-driven argument editors (src/forms). */
+
+.form {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* The busy wrapper: a disabled fieldset disables every control inside. */
+.form-fields {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-4);
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.form-field {
+  min-width: 0;
+}
+
+.form-field-head {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1-5) var(--space-2);
+}
+
+.form-field-head > .field-label {
+  font-family: var(--font-mono);
+  overflow-wrap: anywhere;
+}
+
+.form-field-aside {
+  display: inline-flex;
+  margin-left: auto;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.form-type {
+  color: var(--color-text-subtle);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  white-space: nowrap;
+}
+
+.form-meta {
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.form-status-ok {
+  color: var(--tone-ok-text);
+}
+
+.form-issues {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  gap: var(--space-0-5);
+  list-style: none;
+}
+
+.form-issues > .field-error::before {
+  content: "!";
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  background: var(--tone-err-text);
+  color: var(--color-surface);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-bold);
+}
+
+/* Composite values */
+
+.form-group {
+  min-width: 0;
+}
+
+.form .fieldset .fieldset {
+  background: var(--color-surface);
+}
+
+.form .fieldset .fieldset .fieldset {
+  background: var(--color-surface-2);
+}
+
+.form-legend {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1-5);
+}
+
+.form-legend-toggle {
+  display: inline-flex;
+  padding: 0;
+  align-items: center;
+  gap: var(--space-1-5);
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+}
+
+.form-legend-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+
+.form-chevron {
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid var(--color-text-subtle);
+  border-bottom: 1.5px solid var(--color-text-subtle);
+  transform: rotate(45deg);
+  transition: transform var(--duration-fast) var(--ease);
+}
+
+.form-legend-toggle[aria-expanded="false"] > .form-chevron {
+  transform: rotate(-45deg);
+}
+
+.form-group-body[hidden] {
+  display: none;
+}
+
+.form-opt {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-1-5);
+}
+
+.form-opt > .form-field-head .field-label {
+  font-family: var(--font-mono);
+}
+
+.form-opt-body,
+.form-arm-body {
+  min-width: 0;
+  padding-left: var(--space-3);
+  border-left: 2px solid var(--color-border);
+}
+
+.form-optional > summary {
+  font-size: var(--text-xs);
+}
+
+.form-arm-select {
+  max-width: 320px;
+}
+
+/* A segmented control keeps its own width inside a stack. */
+.form .segmented {
+  align-self: flex-start;
+}
+
+.form-func-grid {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.form-fixed .chip {
+  margin-left: var(--space-1);
+}
+
+/* vec */
+
+.form-list-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.form-list-item {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-1-5);
+  padding: var(--space-2) var(--space-3) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+}
+
+.form-list-item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.form-list-actions {
+  padding-top: var(--space-1);
+}
+
+.form-input-narrow {
+  width: 96px;
+  min-height: 28px;
+  flex: none;
+}
+
+/* Widgets */
+
+.form-helper,
+.form-timestamp-row {
+  row-gap: var(--space-1-5);
+}
+
+.form-timestamp-row > .switch-label {
+  margin-left: auto;
+}
+
+.form-datetime {
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+  flex: 0 1 280px;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+/* Submit, summary and tools */
+
+.form-summary-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: var(--weight-semibold);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.form-summary-link:focus-visible {
+  outline: none;
+  border-radius: var(--radius-xs);
+  box-shadow: var(--ring);
+}
+
+.form-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-border);
+}
+
+.form-submit-row {
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+
+.form-submit-row > .btn {
+  flex-shrink: 0;
+}
+
+.form-reason {
+  min-width: 0;
+  margin: 0;
+  padding-top: var(--space-1-5);
+  font-size: var(--text-sm);
+  overflow-wrap: anywhere;
+}
+
+.form-reason-issue {
+  color: var(--tone-warn-text);
+}
+
+.form-tools {
+  align-items: flex-start;
+}
+
+.form-json {
+  min-width: 0;
+  flex: 1 1 320px;
+}
+
+.form-json-text {
+  min-height: 140px;
+  font-size: var(--text-xs);
+}
+
+@media (max-width: 520px) {
+  .form-submit-row {
+    flex-wrap: wrap;
+  }
+
+  .form-field-aside {
+    margin-left: 0;
+  }
+
+  .form-timestamp-row > .switch-label {
+    margin-left: 0;
+  }
+}
+
+/* === end forms === */
+
+/* === pages === */
+/* Layout and page styles of components/ and routes/: shared primitives
+   (.ui-*), the header tools, and one prefix per page. */
+
+/* Primitives ------------------------------------------------------------- */
+
+.ui-code {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.ui-code-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-1) var(--space-2);
+  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-bottom: 0;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  background: var(--color-surface-2);
+}
+
+.ui-code-toolbar + pre.code {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.ui-code-label {
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+
+.ui-tabs {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.ui-tabs > .tab-panel:focus-visible {
+  outline: none;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ring);
+}
+
+.ui-section-error {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border: 1px dashed var(--tone-err-border);
+  border-radius: var(--radius-md);
+  background: var(--tone-err-bg);
+}
+
+/* Header tools: canister jump and sign-in --------------------------------- */
+
+.canister-jump {
+  position: relative;
+  min-width: 0;
+}
+
+.canister-jump-field {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.canister-jump-icon {
+  position: absolute;
+  left: var(--space-2-5);
+  color: var(--color-text-subtle);
+  pointer-events: none;
+}
+
+.canister-jump-input.input {
+  width: 15.5rem;
+  min-height: 30px;
+  padding-right: var(--space-8);
+  padding-left: var(--space-8);
+  background: var(--color-surface-2);
+  font-size: var(--text-xs);
+}
+
+.canister-jump-input.input:focus-visible {
+  background: var(--color-surface);
+}
+
+.canister-jump-kbd {
+  position: absolute;
+  right: var(--space-2);
+  pointer-events: none;
+}
+
+.canister-jump-input:focus-visible ~ .canister-jump-kbd {
+  display: none;
+}
+
+.canister-jump-problem,
+.auth-failure {
+  position: absolute;
+  top: calc(100% + var(--space-1-5));
+  right: 0;
+  z-index: var(--z-overlay);
+  width: max-content;
+  max-width: min(22rem, calc(100vw - 2 * var(--gutter)));
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--tone-err-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-md);
+  color: var(--tone-err-text);
+  font-size: var(--text-xs);
+}
+
+.auth {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.auth-principal {
+  display: inline-flex;
+  min-height: 26px;
+  padding: 0 var(--space-2);
+  align-items: center;
+  gap: var(--space-1-5);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-full);
+  background: var(--color-surface-2);
+  font-size: var(--text-xs);
+  white-space: nowrap;
+}
+
+.auth-dot {
+  width: 6px;
+  height: 6px;
+  color: var(--tone-ok-text);
+}
+
+/* Home ----------------------------------------------------------------------- */
+
+.home {
+  gap: var(--space-10);
+}
+
+.home-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+  align-items: start;
+  gap: var(--space-8);
+}
+
+.home-hero-text {
+  padding-top: var(--space-6);
+}
+
+.home-eyebrow {
+  color: var(--color-accent);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.home-title {
+  max-width: 18ch;
+  font-size: var(--text-4xl);
+  line-height: var(--leading-tight);
+}
+
+.home-points {
+  max-width: 60ch;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.home-points > li {
+  position: relative;
+  padding-left: var(--space-5);
+}
+
+.home-points > li::before {
+  content: "";
+  position: absolute;
+  top: 0.55em;
+  left: var(--space-1);
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--tone-certified-text);
+}
+
+.home-curated-title {
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.home-curated {
+  display: grid;
+  max-height: 17rem;
+  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
+  gap: var(--space-1);
+  margin: 0 calc(-1 * var(--space-2));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.home-curated-item {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  gap: var(--space-0-5);
+  padding: var(--space-2);
+  border-radius: var(--radius-sm);
+  color: inherit;
+}
+
+.home-curated-item:hover {
+  background: var(--color-surface-hover);
+  text-decoration: none;
+}
+
+.home-curated-name {
+  color: var(--color-accent);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+}
+
+.home-featured-grid {
+  --grid-min: 240px;
+}
+
+.home-featured {
+  position: relative;
+  transition:
+    border-color var(--duration-fast) var(--ease),
+    box-shadow var(--duration-fast) var(--ease);
+}
+
+.home-featured:hover {
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-md);
+}
+
+.home-featured-link {
+  color: inherit;
+}
+
+/* The whole card is the link's target; buttons inside stay above it. */
+.home-featured-link::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.home-featured-link:hover {
+  text-decoration: none;
+}
+
+.home-featured-link:focus-visible {
+  outline: none;
+}
+
+.home-featured:has(.home-featured-link:focus-visible) {
+  border-color: var(--color-focus);
+  box-shadow: var(--ring);
+}
+
+.home-stats {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: var(--space-1) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-2);
+}
+
+.home-stat {
+  display: flex;
+  min-width: 0;
+  min-height: 2rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.home-stat + .home-stat {
+  border-top: 1px solid var(--color-border);
+}
+
+.home-stat > dd {
+  margin: 0;
+}
+
+.home-stat-value {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.home-features {
+  --grid-min: 220px;
+}
+
+.home-feature .card-body {
+  height: 100%;
+}
+
+.home-feature-link {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+}
+
+/* Canister pages ------------------------------------------------------------- */
+
+.canister-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.canister-header-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.canister-title {
+  overflow-wrap: anywhere;
+}
+
+.canister-id {
+  color: var(--color-text-muted);
+}
+
+.canister-mode-counts {
+  gap: var(--space-3);
+}
+
+.canister-mode-count {
+  font-weight: var(--weight-semibold);
+}
+
+.canister-facts {
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+}
+
+.method-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+}
+
+.method-list-modes > .segmented {
+  display: flex;
+  width: 100%;
+}
+
+.method-list-modes > .segmented > button {
+  flex: 1 1 auto;
+}
+
+.method-list-groups {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.method-list-heading {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 var(--space-2) var(--space-1);
+  color: var(--color-text-muted);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.method-list-item {
+  display: flex;
+  width: 100%;
+  min-height: 30px;
+  padding: var(--space-1) var(--space-2);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  text-align: left;
+  text-decoration: none;
+}
+
+.method-list-item:hover {
+  background: var(--color-surface-hover);
+  text-decoration: none;
+}
+
+/* The router marks the selected link aria-current="page" when the URL is
+   exactly its own; the list marks it "true" otherwise (a shared link). */
+.method-list-item[aria-current]:not([aria-current="false"]),
+.method-list-item[aria-pressed="true"] {
+  background: var(--color-accent-soft);
+  color: var(--color-accent);
+}
+
+.method-list-item:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-inset);
+}
+
+.method-list-name {
+  min-width: 0;
+}
+
+.method-list-empty {
+  padding: var(--space-2);
+}
+
+.method-heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.method-heading-name {
+  font-size: var(--text-xl);
+}
+
+.method-heading-doc {
+  max-width: 80ch;
+  white-space: pre-wrap;
+}
+
+.method-quick-reads {
+  --grid-min: 220px;
+  gap: var(--space-2);
+}
+
+.method-quick-read {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-2-5) var(--space-3);
+  font-size: var(--text-sm);
+}
+
+/* The interface tools: secondary tabs under the page tabs. */
+.iface-tabs {
+  gap: var(--space-1);
+  border-bottom: 0;
+}
+
+.iface-tabs > .tab {
+  margin-bottom: 0;
+  padding: var(--space-1) var(--space-3);
+  border-bottom: 0;
+  border-radius: var(--radius-full);
+}
+
+.iface-tabs > .tab[aria-current="page"] {
+  background: var(--color-accent-soft);
+  color: var(--color-accent);
+}
+
+.iface-tabs > .tab:focus-visible {
+  border-radius: var(--radius-full);
+}
+
+.iface-project-list {
+  display: grid;
+  max-height: 22rem;
+  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
+  gap: var(--space-0-5) var(--space-2);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.iface-project-item {
+  display: flex;
+  min-width: 0;
+  padding: var(--space-1-5) var(--space-2);
+  align-items: center;
+  gap: var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  cursor: pointer;
+}
+
+.iface-project-item:hover {
+  background: var(--color-surface-hover);
+}
+
+.iface-project-item > input {
+  flex-shrink: 0;
+  accent-color: var(--color-accent-solid);
+}
+
+.iface-project-filter.input {
+  width: auto;
+  min-width: min(12rem, 100%);
+}
+
+.iface-compat-input.textarea {
+  min-height: 10rem;
+}
+
+/* Wallet ---------------------------------------------------------------------- */
+
+.wallet-ledgers {
+  width: fit-content;
+}
+
+.wallet-ledgers > a {
+  display: inline-flex;
+  min-height: 28px;
+  padding: 0 var(--space-4);
+  align-items: center;
+  border-radius: var(--radius-xs);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.wallet-ledgers > a:hover {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.wallet-ledgers > a[aria-current="page"] {
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+  color: var(--color-accent);
+  font-weight: var(--weight-semibold);
+}
+
+.wallet-ledgers > a:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-inset);
+}
+
+.wallet-grid {
+  align-items: start;
+  gap: var(--space-5);
+}
+
+.wallet-balance-value {
+  font-size: var(--text-2xl);
+  font-weight: var(--weight-semibold);
+  letter-spacing: -0.01em;
+}
+
+.wallet-minter-grid {
+  --grid-min: 240px;
+  gap: var(--space-6);
+}
+
+.wallet-minter-title {
+  font-weight: var(--weight-semibold);
+}
+
+.wallet-address {
+  font-size: var(--text-sm);
+}
+
+/* Safety, playground, history --------------------------------------------------- */
+
+.safety-rules {
+  margin: 0;
+  padding-left: var(--space-5);
+}
+
+.pg-inputs {
+  align-items: start;
+}
+
+.pg-source.textarea {
+  min-height: 22rem;
+  font-size: var(--text-xs);
+}
+
+.history-filters {
+  align-items: flex-end;
+  gap: var(--space-3);
+}
+
+.history-filters > .field {
+  min-width: 9rem;
+}
+
+.history-filters > .field.grow {
+  min-width: min(16rem, 100%);
+}
+
+/* Responsive ------------------------------------------------------------------- */
+
+@media (max-width: 1100px) {
+  .canister-jump-input.input {
+    width: 12rem;
+  }
+}
+
+@media (max-width: 960px) {
+  .home-hero {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-6);
+  }
+
+  .home-hero-text {
+    padding-top: 0;
+  }
+
+  .home-title {
+    font-size: var(--text-3xl);
+  }
+
+  /* The sidebar sits above the runner here: keep a long list short. */
+  .canister-workspace .method-list-groups {
+    max-height: 40vh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+}
+
+@media (max-width: 560px) {
+  /* One header row of brand mark and tools; the nav keeps its own row. */
+  .brand-name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .app-header-tools {
+    min-width: 0;
+    flex: 1 1 auto;
+    gap: var(--space-1-5);
+  }
+
+  .canister-jump {
+    flex: 1 1 auto;
+  }
+
+  /* All five links fit a phone's width; narrower still, the row scrolls. */
+  .app-nav {
+    justify-content: space-between;
+    gap: 0;
+  }
+
+  .app-nav-link {
+    padding: var(--space-1-5) var(--space-2);
+  }
+
+  .canister-jump-input.input {
+    width: 100%;
+    padding-right: var(--space-2);
+  }
+
+  .canister-jump-kbd,
+  .auth .btn-icon {
+    display: none;
+  }
+
+  /* The network badge keeps its dot; its text stays for screen readers. */
+  .app-header-tools > .badge-network {
+    gap: 0;
+    padding: 0 var(--space-1-5);
+    font-size: 0;
+  }
+
+  .home-title {
+    font-size: var(--text-2xl);
+  }
+}
+/* === end pages === */