/* GENERATED:TOKENS:START -- edit tokens.v1.json, run python3 scripts/generate_tokens.py */
:root, nz-information, .nz-information-dialog {
  --nozomi-bg: #07080b;
  --nozomi-sidebar: #0b0c10;
  --nozomi-panel: #0f1116;
  --nozomi-surface: #161a20;
  --nozomi-surface-raised: #1d2229;
  --nozomi-border: #1f242b;
  --nozomi-border-strong: #2e353e;
  --nozomi-border-interactive: #646e7a;
  --nozomi-text: #c9ced6;
  --nozomi-text-strong: #f6f8fa;
  --nozomi-text-muted: #8e98a3;
  --nozomi-accent: #d87050;
  --nozomi-accent-hover: #e18363;
  --nozomi-accent-dark: #b95c42;
  --nozomi-accent-soft: #f0a46f;
  --nozomi-accent-ink: #07080b;
  --nozomi-cyan: #7ab6cc;
  --nozomi-success: #8ac27e;
  --nozomi-warning: #e9bd62;
  --nozomi-danger: #e07575;
  --nozomi-focus: #7ab6cc;
  --nozomi-bg-deep: #040507;
  --nozomi-accent-bg: rgba(216, 112, 80, 0.14);
  --nozomi-accent-bg-hover: rgba(216, 112, 80, 0.2);
  --nozomi-accent-border: rgba(232, 168, 124, 0.48);

  /* Surface overlay scale -- use these instead of ad-hoc bg-white/[0.0xx]. */
  --nozomi-overlay-subtle: rgba(255, 255, 255, 0.025);
  --nozomi-overlay-soft: rgba(255, 255, 255, 0.04);
  --nozomi-overlay-medium: rgba(255, 255, 255, 0.06);
  --nozomi-overlay-strong: rgba(255, 255, 255, 0.1);

  /* Status tone overlays -- tinted backgrounds and borders for alerts/badges. */
  --nozomi-danger-bg: rgba(224, 117, 117, 0.10);
  --nozomi-danger-border: rgba(224, 117, 117, 0.30);
  --nozomi-danger-text: #ecb4b4;
  --nozomi-warning-bg: rgba(233, 189, 98, 0.10);
  --nozomi-warning-border: rgba(233, 189, 98, 0.30);
  --nozomi-warning-text: #e9c685;
  --nozomi-success-bg: rgba(138, 194, 126, 0.10);
  --nozomi-success-border: rgba(138, 194, 126, 0.30);
  --nozomi-success-text: #b8dca8;
  --nozomi-info-bg: rgba(122, 182, 204, 0.10);
  --nozomi-info-border: rgba(122, 182, 204, 0.30);
  --nozomi-info-text: #aacfdf;

  /* Radius scale. */
  --nozomi-radius-small: 4px;
  --nozomi-radius-control: 6px;
  --nozomi-radius-panel: 10px;
  --nozomi-radius-dialog: 14px;
  --nozomi-radius-pill: 999px;

  /* Control sizing. */
  --nozomi-size-control: 36px;
  --nozomi-size-control-sm: 30px;
  --nozomi-size-icon-button: 32px;
  --nozomi-size-sidebar: 280px;
  --nozomi-size-target-min: 24px;

  /* Spacing scale -- 4px grid (plus 6/10/20px half-steps) for gaps and padding rhythm. */
  --nozomi-space-1: 4px;
  --nozomi-space-1h: 6px;
  --nozomi-space-2: 8px;
  --nozomi-space-2h: 10px;
  --nozomi-space-3: 12px;
  --nozomi-space-4: 16px;
  --nozomi-space-4h: 20px;
  --nozomi-space-5: 24px;
  --nozomi-space-6: 32px;

  /* Accent tint steps -- color-mix percentages for translucent washes:
     color-mix(in srgb, var(--nozomi-accent) var(--nozomi-tint-2), transparent). */
  --nozomi-tint-1: 4%;
  --nozomi-tint-2: 8%;
  --nozomi-tint-3: 12%;
  --nozomi-tint-4: 20%;
  --nozomi-tint-5: 32%;
  --nozomi-tint-6: 50%;

  /* Motion -- fast: state feedback; base: value change; slow: entrances;
     spin/shimmer: component-internal loop cadences. */
  --nozomi-motion-fast: 140ms;
  --nozomi-motion-base: 220ms;
  --nozomi-motion-slow: 420ms;
  --nozomi-motion-spin: 720ms;
  --nozomi-motion-shimmer: 1400ms;
  --nozomi-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --nozomi-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --nozomi-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Typography scale shared by Kernel, Forge, and Arena dashboards. */
  --nozomi-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --nozomi-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --nozomi-font-body: 14px;
  --nozomi-line-body: 1.5;
  --nozomi-font-control: 13px;
  --nozomi-font-small: 12px;
  --nozomi-font-message: 13.5px;
  --nozomi-font-caption: 11px;
  --nozomi-font-label: 11px;
  --nozomi-font-section-title: 16px;
  --nozomi-font-page-title: 24px;
  --nozomi-font-heading-large: 34px;
  --nozomi-font-heading-medium: 20px;
  --nozomi-line-tight: 1.1;
  --nozomi-line-message: 1.45;
  --nozomi-line-longform: 1.58;
  --nozomi-weight-medium: 500;
  --nozomi-weight-semibold: 600;
  --nozomi-weight-bold: 700;
  --nozomi-font-display-hero: clamp(2.5rem, 1.2rem + 5vw, 5.25rem);
  --nozomi-font-display-page: clamp(1.75rem, 1.2rem + 1.7vw, 2.625rem);
  --nozomi-font-display-section: 1.0625rem;
  --nozomi-tracking-tight: -0.011em;
  --nozomi-tracking-display: -0.04em;
  --nozomi-tracking-label: 0.09em;

  /* Categorical chart palette -- series, personas, avatars. Cycle in order. */
  --nozomi-chart-1: #d87050;
  --nozomi-chart-2: #7ab6cc;
  --nozomi-chart-3: #f0a46f;
  --nozomi-chart-4: #b7d37a;
  --nozomi-chart-5: #c58bd8;
  --nozomi-chart-6: #76c893;
  --nozomi-chart-7: #e5989b;
  --nozomi-chart-8: #8ea7e9;
  --nozomi-chart-9: #f2cc8f;
  --nozomi-chart-10: #b8c0ff;

  /* Shadow scale. */
  --nozomi-shadow-panel: 0 0 #0000;
  --nozomi-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nozomi-shadow-dialog: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 40px 120px -20px rgba(0, 0, 0, 0.85);
  --nozomi-shadow-card: 0 0 #0000;
  --nozomi-shadow-popover: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 40px -8px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  --nozomi-shadow-inset-top: 0 0 #0000;
  --nozomi-glow-accent: 0 0 #0000;
  --nozomi-glow-cyan: 0 0 #0000;
}
/* GENERATED:TOKENS:END */

/* Interface type is Inter (variable weight and optical size, latin subset),
   served by every consumer at /fonts/ so the ecosystem renders the same face
   on every platform. Characters outside the subset fall through to the system
   sans in the stack. Space Mono remains available for deliberate technical
   treatments. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-latin-400.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-latin-700.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}
:root, nz-information, .nz-information-dialog {
  --font-display: var(--nozomi-font-sans);
  /* Caption voice: the vendored Space Mono for eyebrows, labels, and column
     heads, so the technical accent renders identically on every platform.
     Data values keep --nozomi-font-mono. */
  --nozomi-font-caption: "Space Mono", var(--nozomi-font-mono);
  /* Eyebrow ink for .nz-eyebrow and .term-eyebrow: a tint of the product's own
     accent, so every product labels its sections in its own colour. A product
     can still recolour every eyebrow by setting this on its root. */
  --nozomi-eyebrow: color-mix(in srgb, var(--nozomi-accent) 72%, var(--nozomi-text-strong));
  /* Surfaces are flat: opaque panel fills with hairline edges and no ambient
     canvas. A consumer may restyle a region by overriding these. */
  --nozomi-glass: var(--nozomi-panel);
  --nozomi-glass-strong: var(--nozomi-panel);
  --nozomi-glass-edge: var(--nozomi-border);
  --nozomi-sheen: none;
  --nozomi-canvas: none;
}

/* ---------- Native chrome ----------
   The palette is dark, so declare it to the engine once here. This is what
   makes browser-drawn surfaces the shared tokens cannot reach -- scrollbars,
   date and colour pickers, select popups, spellcheck underlines, and autofill
   -- render dark instead of light. Consumers must not restate it. */
/* Scrollbars are thin and track-less: dense operator tables and log panes
   scroll constantly, and full-weight scrollbar chrome competes with the data.
   `scrollbar-color` inherits and so is declared once on the root, but
   `scrollbar-width` does not -- on the root it would thin only the page
   scroller and leave every nested pane, dialog, and table at full weight, so
   it has to reach every element. Both carry zero specificity, so a consumer
   overrides one region by naming it (`.pane { scrollbar-width: none }`).
   Standard properties only -- setting `scrollbar-color` makes Blink ignore
   ::-webkit-scrollbar rules, so the two syntaxes cannot be combined. */
:root {
  color-scheme: dark;
  scrollbar-color: var(--nozomi-border-strong) transparent;
}
* {
  scrollbar-width: thin;
}

/* Shared text rendering defaults. The palette is dark and the surfaces sit on
   a 4px grid; these make type crisp and numbers align across every consumer
   without each app restating them. Consumers may override per surface. */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  /* cv11: single-storey a; ss03: rounded quotes; calt: contextual arrows and
     case-sensitive punctuation. Quietly modern without changing metrics. */
  font-feature-settings: "kern", "calt", "cv11", "ss03";
  font-kerning: normal;
  font-optical-sizing: auto;
  letter-spacing: var(--nozomi-tracking-tight);
}
/* Native check, radio, range and progress controls take the product accent. */
:root { accent-color: var(--nozomi-accent); }
/* Numeric data (metrics, tables, logs) lines up in columns everywhere. */
code, kbd, samp, pre, .nz-mono {
  font-variant-numeric: tabular-nums;
}
::selection {
  background: color-mix(in srgb, var(--nozomi-accent) 32%, transparent);
  color: var(--nozomi-text-strong);
}

/* ---------- Shared base (opt-in preflight) ----------
   A minimal element reset every consumer was hand-rolling: border-box, zeroed
   margins on prose/heading elements, and form controls that inherit the body
   font and colour. Scoped to a root `.nz-base` (or `nz-root` host) so it never
   fights an app's own element rules -- an app adopts it by putting the class
   on its top-level wrapper instead of re-writing the preflight. Colours come
   only from tokens. */
.nz-base,
.nz-base *,
.nz-base *::before,
.nz-base *::after {
  box-sizing: border-box;
}
.nz-base {
  margin: 0;
  min-height: 100vh;
  background: var(--nozomi-canvas), var(--nozomi-bg);
  background-attachment: fixed;
  color: var(--nozomi-text);
  font: var(--nozomi-font-body)/var(--nozomi-line-body) var(--nozomi-font-sans);
  -webkit-tap-highlight-color: transparent;
}
/* Zero the browser default margins on prose/heading elements. Heading size and
   weight are deliberately NOT reset: every product styles headings through
   classes. The whole reset carries zero specificity (:where) so any class --
   a margin utility such as `.app-mt-2` included -- wins over it; at 0,1,1 it
   silently cancelled every single-class margin on a heading or paragraph. */
:where(.nz-base) :where(h1, h2, h3, h4, h5, h6, p, dl, dd, figure, blockquote, pre, hr, ol, ul) {
  margin: 0;
}
/* list-style-type: "" (not none) keeps VoiceOver announcing these as lists. */
:where(.nz-base) :where(ol, ul) { padding: 0; list-style-type: ""; }
/* Preflight resets use :where() (zero specificity) so they only apply to bare
   elements. Any element carrying a component class (.nz-btn-primary and the
   like, specificity 0,1,0) beats them, which keeps component colours such as
   Kura's dark ink on the yellow mark from being clobbered by `inherit`. */
.nz-base :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}
.nz-base :where(button) { margin: 0; border: 0; padding: 0; background: none; cursor: pointer; }
.nz-base :where(button:disabled) { cursor: not-allowed; }
.nz-base :where(a) { color: inherit; text-decoration: none; }
:where(.nz-base) :where(img, svg) { display: block; max-width: 100%; }
:where(.nz-base) :where(code, kbd, samp, pre) {
  font-family: var(--nozomi-font-mono);
  font-size: 1em;
}

/* Canonical focus ring -- keystroke navigation only. */
*:focus-visible {
  outline: 2px solid var(--nozomi-focus);
  outline-offset: 2px;
  border-radius: inherit;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline-offset: 1px;
}

/* ---------- Shared utility classes ---------- */

.nz-card {
  border-radius: var(--nozomi-radius-panel);
  border: 1px solid var(--nozomi-border);
  background: var(--nozomi-sheen), var(--nozomi-overlay-soft);
  box-shadow: var(--nozomi-shadow-inset-top);
  transition: border-color var(--nozomi-motion-fast) var(--nozomi-ease),
    box-shadow var(--nozomi-motion-fast) var(--nozomi-ease),
    transform var(--nozomi-motion-fast) var(--nozomi-ease);
}

.nz-card-raised {
  border-radius: var(--nozomi-radius-panel);
  border: 1px solid var(--nozomi-border);
  background: var(--nozomi-sheen), var(--nozomi-glass-strong);
  box-shadow: var(--nozomi-shadow-panel);
}

/* Panels are glass: a translucent fill over the ambient canvas, a sheen that
   lights the top edge, and a long soft drop shadow that lifts them off it. */
.nz-panel {
  border-radius: var(--nozomi-radius-panel);
  border: 1px solid var(--nozomi-border);
  background: var(--nozomi-sheen), var(--nozomi-glass);
  box-shadow: var(--nozomi-shadow-panel);
  transition: border-color var(--nozomi-motion-fast) var(--nozomi-ease);
}

.nz-panel-head {
  border-bottom: 1px solid var(--nozomi-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
}

.nz-toolbar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nozomi-border);
  border-radius: calc(var(--nozomi-radius-control) + 4px);
  background: var(--nozomi-glass);
  box-shadow: var(--nozomi-shadow-inset-top);
  padding: 6px;
}

.nz-metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-border);
  box-shadow: var(--nozomi-shadow-panel);
  gap: 1px;
}

/* Inside a framed surface the strip is the frame's foot: one top rule, no
   second border. */
:is(.nz-panel, .nz-card, .nz-card-raised) > .nz-metric-strip {
  border-width: 1px 0 0;
  border-radius: 0;
  box-shadow: none;
}

.nz-metric-strip-item {
  min-width: 0;
  background: var(--nozomi-sheen), var(--nozomi-panel);
  padding: 14px 18px;
}

.nz-metric-strip-value {
  margin-top: 8px;
  overflow: hidden;
  color: var(--nozomi-text-strong);
  font-size: 1.375rem;
  font-weight: var(--nozomi-weight-semibold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Directional trend marker beside a metric value (component sets tone). */
.nz-metric-trend {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin-left: 8px;
  font-family: var(--nozomi-font-sans);
  font-size: var(--nozomi-font-small);
  font-weight: var(--nozomi-weight-semibold);
  letter-spacing: 0;
  vertical-align: baseline;
}

.nz-metric-strip-detail {
  margin-top: 4px;
  overflow: hidden;
  color: var(--nozomi-text-muted);
  font-size: var(--nozomi-font-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nz-empty-state {
  display: flex;
  min-height: 168px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--nozomi-border-strong);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-overlay-subtle);
  padding: 40px 24px;
  text-align: center;
}

.nz-empty-state-compact {
  min-height: 96px;
  padding: 18px 16px;
}

.nz-empty-state-mark {
  width: 28px;
  height: 4px;
  margin-bottom: 14px;
  border-radius: var(--nozomi-radius-pill);
  background: var(--nozomi-border-strong);
  box-shadow: 0 0 0 1px var(--nozomi-border);
}
/* Optional icon slot above the mark; consumers pass any inline SVG. */
.nz-empty-state-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 14px;
  border: 1px solid var(--nozomi-border-strong);
  border-radius: 12px;
  background: var(--nozomi-surface);
  box-shadow: var(--nozomi-shadow-inset-top), var(--nozomi-shadow-card);
  color: var(--nozomi-text);
}
.nz-empty-state-icon > svg { width: 20px; height: 20px; }

.nz-empty-state-description {
  max-width: 36rem;
  margin-top: 6px;
  color: var(--nozomi-text-muted);
  font-size: var(--nozomi-font-control);
  line-height: var(--nozomi-line-body);
}

.nz-empty-state-action {
  margin-top: 14px;
}

.nz-input {
  width: 100%;
  border-radius: var(--nozomi-radius-control);
  /* Interactive controls get the >=3:1 boundary; decorative panel edges keep
     the hairline --nozomi-border. */
  border: 1px solid var(--nozomi-border-interactive);
  /* Fields sit recessed below the panel plane. */
  background: color-mix(in srgb, var(--nozomi-bg-deep) 62%, transparent);
  color: var(--nozomi-text-strong);
  padding: 8px 12px;
  font-size: var(--nozomi-font-control);
  line-height: 1.4;
  min-height: var(--nozomi-size-control);
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    border-color var(--nozomi-motion-fast) var(--nozomi-ease),
    box-shadow var(--nozomi-motion-fast) var(--nozomi-ease),
    background-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-input::placeholder { color: var(--nozomi-text-muted); opacity: 0.85; }
.nz-input:hover:not(:disabled):not(:focus) { border-color: color-mix(in srgb, var(--nozomi-border-interactive) 70%, var(--nozomi-text)); }
/* Focus draws a soft halo in the product focus colour; the 2px ring keeps
   the keyboard indicator at >=3:1 against every surface. */
.nz-input:focus {
  border-color: var(--nozomi-focus);
  background-color: color-mix(in srgb, var(--nozomi-bg-deep) 80%, transparent);
  box-shadow: 0 0 0 1px var(--nozomi-focus);
}
.nz-input:disabled { opacity: 0.5; cursor: not-allowed; }
textarea.nz-input { min-height: 88px; line-height: var(--nozomi-line-body); resize: vertical; }
/* Selects draw their own chevron (two gradient strokes, no image request, so
   strict img-src policies still render it) and drop the platform chrome. */
select.nz-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--nozomi-text-muted) 50%),
    linear-gradient(135deg, var(--nozomi-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select.nz-input option { background: var(--nozomi-panel); color: var(--nozomi-text-strong); }

.nz-switch {
  display: inline-grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--nozomi-text);
  cursor: pointer;
}
.nz-switch > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nz-switch-track {
  display: flex;
  width: 36px;
  height: 20px;
  align-items: center;
  border: 1px solid var(--nozomi-border-interactive);
  border-radius: var(--nozomi-radius-pill);
  background: var(--nozomi-overlay-strong);
  padding: 2px;
  transition: background var(--nozomi-motion-fast) var(--nozomi-ease), border-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-switch-track > span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nozomi-text-muted);
  transition: transform var(--nozomi-motion-fast) var(--nozomi-ease), background var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-switch > input:checked + .nz-switch-track {
  border-color: var(--nozomi-accent-border);
  background: color-mix(in srgb, var(--nozomi-accent) 26%, transparent);
}
.nz-switch > input:checked + .nz-switch-track > span {
  transform: translateX(16px);
  background: var(--nozomi-accent);
}
.nz-switch > input:focus-visible + .nz-switch-track {
  outline: 2px solid var(--nozomi-focus);
  outline-offset: 2px;
}
.nz-switch-copy { display: grid; gap: 2px; min-width: 0; }
.nz-switch-label { color: var(--nozomi-text-strong); font-size: var(--nozomi-font-control); }
.nz-switch-description { color: var(--nozomi-text-muted); font-size: var(--nozomi-font-small); }
.nz-switch-disabled { cursor: not-allowed; opacity: 0.5; }


.nz-label {
  display: block;
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-medium);
  letter-spacing: var(--nozomi-tracking-label);
  text-transform: uppercase;
  color: var(--nozomi-text-muted);
  margin-bottom: 6px;
}

.nz-type-section-title {
  font-family: var(--nozomi-font-sans);
  font-size: var(--nozomi-font-display-section);
  font-weight: var(--nozomi-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--nozomi-tracking-tight);
  color: var(--nozomi-text-strong);
}

.nz-type-label {
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-medium);
  line-height: 1.2;
  letter-spacing: var(--nozomi-tracking-label);
  text-transform: uppercase;
  color: var(--nozomi-text-muted);
}

.nz-type-metric-value {
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-display-page);
  font-weight: var(--nozomi-weight-semibold);
  line-height: var(--nozomi-line-tight);
  letter-spacing: var(--nozomi-tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--nozomi-text-strong);
}

.nz-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: calc(var(--nozomi-radius-control) + 2px);
  border: 1px solid;
  box-shadow: var(--nozomi-shadow-inset-top);
  padding: 11px 14px;
  font-size: var(--nozomi-font-control);
  line-height: 1.5;
}
.nz-alert-neutral {
  border-color: var(--nozomi-border);
  background: var(--nozomi-overlay-soft);
  color: var(--nozomi-text);
}
.nz-alert-danger {
  border-color: var(--nozomi-danger-border);
  background: var(--nozomi-danger-bg);
  color: var(--nozomi-danger-text);
}
.nz-alert-warning {
  border-color: var(--nozomi-warning-border);
  background: var(--nozomi-warning-bg);
  color: var(--nozomi-warning-text);
}
.nz-alert-success {
  border-color: var(--nozomi-success-border);
  background: var(--nozomi-success-bg);
  color: var(--nozomi-success-text);
}
.nz-alert-info {
  border-color: var(--nozomi-info-border);
  background: var(--nozomi-info-bg);
  color: var(--nozomi-info-text);
}

/* Row helper for hoverable list items (leaderboard rows, etc.). */
.nz-row-hover {
  transition: background-color var(--nozomi-motion-fast) var(--nozomi-ease), border-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-row-hover:hover {
  background: var(--nozomi-overlay-medium);
  border-color: var(--nozomi-border-strong);
}

/* Loading primitives. */
.nz-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--nozomi-radius-pill);
  border: 2px solid var(--nozomi-border-strong);
  border-top-color: var(--nozomi-accent);
  animation: nz-spin var(--nozomi-motion-spin) linear infinite;
  vertical-align: -2px;
}
@keyframes nz-spin {
  to { transform: rotate(360deg); }
}

.nz-skeleton {
  display: block;
  border-radius: var(--nozomi-radius-control);
  background: linear-gradient(
    90deg,
    var(--nozomi-overlay-subtle) 0%,
    var(--nozomi-overlay-medium) 50%,
    var(--nozomi-overlay-subtle) 100%
  );
  background-size: 200% 100%;
  animation: nz-skeleton-shimmer var(--nozomi-motion-shimmer) ease-in-out infinite;
  color: transparent;
}
@keyframes nz-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}


/* ---------- App shell (280px sidebar rail) ---------- */
/* Shared chrome for Kernel / Forge / Arena. Plain CSS (no Tailwind here), all
   on the --nozomi-* tokens. Apps set --font-display for the header voice; it
   falls back to the mono stack when unset. */

.nz-shell { background: var(--nozomi-sidebar); }

.nz-shell-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--nozomi-text-strong);
  font-size: var(--nozomi-font-body);
  font-weight: var(--nozomi-weight-semibold);
  letter-spacing: 0;
  text-decoration: none;
}

.nz-shell-brand-mark {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--nozomi-radius-control);
  object-fit: contain;
  box-shadow: 0 0 0 1px var(--nozomi-border);
}
/* The rail's mark sits at wordmark scale, not hero scale. */
.nz-shell-brand .nz-logo { --nz-logo-size: 30px; }

.nz-shell-brand-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nozomi-text-strong);
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: 16px;
  font-weight: var(--nozomi-weight-bold);
  line-height: 1;
  letter-spacing: -0.025em;
}

.nz-shell-link {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: var(--nozomi-radius-control);
  background: transparent;
  padding: 0 10px;
  font: inherit;
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  color: var(--nozomi-text-muted);
  transition:
    color var(--nozomi-motion-fast) var(--nozomi-ease),
    background-color var(--nozomi-motion-fast) var(--nozomi-ease),
    border-color var(--nozomi-motion-fast) var(--nozomi-ease),
    transform var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-shell-link:hover {
  background: var(--nozomi-overlay-soft);
  color: var(--nozomi-text-strong);
}
.nz-shell-link:hover .nz-shell-link-icon { color: var(--nozomi-text); }
.nz-shell-link:active { transform: scale(0.99); }
/* Active nav item: a raised neutral ground with a short accent bar and an
   accent icon, in the product's own accent. This is the single "you are here"
   convention across every Nozomi rail (shared shell here, Sakura's own
   #sidebar); it reads the accent tokens, so each product colours it itself
   with no per-app override. The bar is a pseudo-element pinned to the item's
   left edge, so it never overlaps a leading icon. */
.nz-shell-link-active,
.nz-shell-link[aria-current="page"] {
  border-color: transparent;
  background: var(--nozomi-overlay-medium);
  color: var(--nozomi-text-strong);
}
.nz-shell-link-active::before,
.nz-shell-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--nozomi-accent);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--nozomi-accent) 75%, transparent);
}
.nz-shell-link-active .nz-shell-link-icon,
.nz-shell-link[aria-current="page"] .nz-shell-link-icon { color: var(--nozomi-accent); }

.nz-shell-toggle {
  display: inline-flex;
  width: var(--nozomi-size-icon-button);
  height: var(--nozomi-size-icon-button);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-control);
  background: var(--nozomi-overlay-subtle);
  color: var(--nozomi-text);
}

.nz-shell-toggle:hover {
  border-color: var(--nozomi-border-strong);
  background: var(--nozomi-overlay-medium);
  color: var(--nozomi-text-strong);
}

.nz-shell-toggle-lines {
  display: grid;
  width: 14px;
  gap: 3px;
}

.nz-shell-toggle-lines > span {
  display: block;
  height: 1px;
  background: currentColor;
}

.nz-shell-link-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  transition: color var(--nozomi-motion-fast) var(--nozomi-ease);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--nozomi-text-muted);
}

.nz-shell-link-icon > svg {
  width: 16px;
  height: 16px;
}

.nz-shell-link-meta {
  flex: 0 0 auto;
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-mono);
  font-size: var(--nozomi-font-caption);
  font-variant-numeric: tabular-nums;
}

.nz-shell-section {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.nz-shell-section-label {
  display: none;
  padding: 4px 10px 8px;
  font-family: var(--nozomi-font-caption);
  font-size: 10.5px;
  font-weight: var(--nozomi-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--nozomi-text-muted) 78%, transparent);
}

@media (min-width: 768px) {
  .nz-shell-toggle {
    display: none;
  }
  .nz-shell-section {
    display: block;
    flex-shrink: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .nz-shell-nav {
    overflow-y: auto;
  }
  .nz-shell-section:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .nz-shell-section-label {
    display: block;
  }
  /* The main column clears the floating rail. Apps own everything inside it. */
  .nz-shell ~ main {
    width: calc(100% - var(--nozomi-size-sidebar));
    max-width: none;
    margin-left: var(--nozomi-size-sidebar);
    margin-right: 0;
    padding-left: clamp(20px, 3vw, 44px);
    padding-right: clamp(20px, 3vw, 44px);
  }
}

/* ---------- Progress primitives ---------- */

.nz-progress {
  height: 6px;
  overflow: hidden;
  border-radius: var(--nozomi-radius-pill);
  background: var(--nozomi-overlay-medium);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.nz-progress-fill {
  height: 100%;
  border-radius: var(--nozomi-radius-pill);
  background: var(--nozomi-cyan);
  transition: width var(--nozomi-motion-slow) var(--nozomi-ease-entrance);
}



/* ---------- Component classes (owned by react.tsx) ----------
   These transcribe the shared components' former inline utility styling 1:1.
   react.tsx emits only nz-* classes; no utility framework is involved. */

/* Generic bits shared by several components. */
.nz-truncate {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nz-mono { font-family: var(--nozomi-font-mono); }
.nz-left { text-align: left; }
.nz-center { text-align: center; }
.nz-right { text-align: right; }
.nz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nz-desktop-only { display: none !important; }
@media (min-width: 768px) {
  .nz-desktop-only { display: revert !important; }
  .nz-mobile-only { display: none !important; }
}

/* Status tones -- border/background/text sets and text-only variants. */
.nz-tone-neutral { border-color: var(--nozomi-border); background: var(--nozomi-overlay-soft); color: var(--nozomi-text); }
.nz-tone-success { border-color: var(--nozomi-success-border); background: var(--nozomi-success-bg); color: var(--nozomi-success-text); }
.nz-tone-warning { border-color: var(--nozomi-warning-border); background: var(--nozomi-warning-bg); color: var(--nozomi-warning-text); }
.nz-tone-danger { border-color: var(--nozomi-danger-border); background: var(--nozomi-danger-bg); color: var(--nozomi-danger-text); }
.nz-tone-info { border-color: var(--nozomi-info-border); background: var(--nozomi-info-bg); color: var(--nozomi-info-text); }
.nz-tone-text-neutral { color: var(--nozomi-text); }
.nz-tone-text-success { color: var(--nozomi-success-text); }
.nz-tone-text-warning { color: var(--nozomi-warning-text); }
.nz-tone-text-danger { color: var(--nozomi-danger-text); }
.nz-tone-text-info { color: var(--nozomi-info-text); }

/* Badge */
.nz-badge {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  border: 1px solid;
  border-radius: var(--nozomi-radius-pill);
  padding: 3px 10px;
  font-size: var(--nozomi-font-small);
  font-weight: var(--nozomi-weight-medium);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}
/* Optional leading status dot (component sets --nz-badge-dot). */
.nz-badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--nz-badge-dot, currentColor);
}

/* Buttons */
.nz-btn {
  display: inline-flex;
  min-height: var(--nozomi-size-control);
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--nozomi-radius-control);
  padding: 0 14px;
  font-family: inherit;
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none; /* anchors styled as buttons */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    color var(--nozomi-motion-fast) var(--nozomi-ease),
    background-color var(--nozomi-motion-fast) var(--nozomi-ease),
    border-color var(--nozomi-motion-fast) var(--nozomi-ease),
    box-shadow var(--nozomi-motion-fast) var(--nozomi-ease),
    transform var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-btn > svg { flex: 0 0 auto; }
.nz-btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* Solid accent fill: the default affirmative control. The ink colour adapts
   per brand through --nozomi-accent-ink so a high-chroma mark (Kura yellow)
   stays legible while terracotta/cyan read as light-on-dark. */
/* Primary actions are a solid accent fill: no lift, no glow. */
.nz-btn-primary {
  border-color: transparent;
  background: var(--nozomi-accent);
  color: var(--nozomi-accent-ink);
  font-weight: var(--nozomi-weight-semibold);
}
.nz-btn-primary:hover:not(:disabled) {
  border-color: transparent;
  background: var(--nozomi-accent-hover);
}

/* Secondary actions are a solid surface with a hairline border. */
.nz-btn-secondary {
  border-color: var(--nozomi-border-strong);
  background: var(--nozomi-surface);
  color: var(--nozomi-text-strong);
}
.nz-btn-secondary:hover:not(:disabled) {
  border-color: var(--nozomi-border-interactive);
  background: var(--nozomi-surface-raised);
  color: var(--nozomi-text-strong);
}
.nz-btn-danger {
  border-color: var(--nozomi-danger-border);
  background: var(--nozomi-danger-bg);
  color: var(--nozomi-danger-text);
}
.nz-btn-danger:hover:not(:disabled) {
  border-color: var(--nozomi-danger);
  color: var(--nozomi-text-strong);
}
.nz-btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--nozomi-text-muted);
}
.nz-btn-ghost:hover:not(:disabled) {
  border-color: var(--nozomi-border);
  background: var(--nozomi-overlay-soft);
  color: var(--nozomi-text-strong);
}
.nz-btn-sm {
  min-height: var(--nozomi-size-control-sm);
  padding: 0 10px;
  font-size: var(--nozomi-font-small);
}
.nz-btn-icon {
  width: var(--nozomi-size-icon-button);
  height: var(--nozomi-size-icon-button);
  padding: 0;
}

/* Panel composition (the base .nz-panel-head block lives with .nz-panel). */
@media (min-width: 640px) {
  .nz-panel-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.nz-panel-titles { min-width: 0; }
.nz-panel-sub {
  margin-top: 4px;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-text-muted);
}
.nz-panel-actions { flex-shrink: 0; }
.nz-panel-body { padding: 16px; }

/* Metric tile */
.nz-metric-tile { padding: 16px; }
.nz-metric-tile-value { margin-top: 8px; }

/* Progress */
.nz-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nz-progress-row > .nz-progress {
  min-width: 0;
  flex: 1 1 auto;
}
.nz-progress-value {
  flex-shrink: 0;
  font-size: var(--nozomi-font-small);
  font-variant-numeric: tabular-nums;
  color: var(--nozomi-text-muted);
}
.nz-ring {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nozomi-border);
  border-radius: 50%;
}
.nz-ring-well {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--nozomi-panel);
  font-size: var(--nozomi-font-small);
  font-variant-numeric: tabular-nums;
  color: var(--nozomi-text-strong);
}

/* Dashed empty box (Empty). */
.nz-empty-dashed {
  border: 1px dashed var(--nozomi-border);
  border-radius: var(--nozomi-radius-control);
  background: var(--nozomi-overlay-subtle);
  padding: 32px 16px;
  text-align: center;
  font-size: var(--nozomi-font-body);
  color: var(--nozomi-text-muted);
}

/* Dialog */
.nz-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  border: 0;
  background: color-mix(in srgb, var(--nozomi-bg-deep) 58%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  padding: 16px;
  color: var(--nozomi-text);
}
.nz-dialog::backdrop { background: transparent; }
.nz-dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The box is the scroll container, not the backdrop: a dialog taller than the
   viewport scrolls inside its own rounded frame instead of dragging the whole
   fixed layer, which kept the corners and the close control off screen.
   box-sizing is stated locally because the shared sheet ships no global reset. */
.nz-dialog,
.nz-dialog-box { box-sizing: border-box; }
.nz-dialog-box {
  display: flex;
  width: 100%;
  max-height: 100%;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--nozomi-border-strong);
  border-radius: var(--nozomi-radius-dialog);
  background: var(--nozomi-panel);
  box-shadow: var(--nozomi-shadow-dialog);
  /* Keep keyboard-focused controls from landing under a sticky header. */
  scroll-padding-top: 6.5rem;
}
/* Entrance: the dialog layer fades, the box rises and settles. */
.nz-dialog[open] { animation: nz-fade-in var(--nozomi-motion-fast) var(--nozomi-ease) both; }
.nz-dialog[open] .nz-dialog-box {
  animation: nz-dialog-in var(--nozomi-motion-base) var(--nozomi-ease-entrance) both;
}
@keyframes nz-dialog-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Wrap a DialogHeader in this to pin it while the body below scrolls. Supplies
   its own padding, so the scrolling remainder starts with nz-dialog-pad. */
.nz-dialog-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  border-bottom: 1px solid var(--nozomi-border);
  background: color-mix(in srgb, var(--nozomi-panel) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 20px 24px;
}

/* Page header */
.nz-page-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 4px;
}
.nz-page-header-compact { gap: 12px; }
@media (min-width: 640px) {
  .nz-page-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.nz-page-header-titles { min-width: 0; }
.nz-page-header-title-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.nz-page-header-title-row-spaced { margin-top: 10px; }
.nz-page-header-title-row .nz-display-title { min-width: 0; }
.nz-page-header-meta { flex-shrink: 0; max-width: 100%; }
.nz-page-header-description {
  margin-top: 10px;
  max-width: 46rem;
  font-size: var(--nozomi-font-body);
  line-height: 1.6;
  color: var(--nozomi-text-muted);
  text-wrap: pretty;
}
.nz-page-header-description-tight { margin-top: 4px; }
.nz-page-header-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 640px) {
  .nz-page-header-actions {
    flex-direction: row;
    align-items: center;
  }
}

/* Status dot */
.nz-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nz-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
}
.nz-status-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-text);
}

/* Form field */
.nz-field {
  display: grid;
  gap: 6px;
}
.nz-field > .nz-label { margin-bottom: 0; }
.nz-field-required { color: var(--nozomi-danger-text); }
.nz-field-help {
  margin: 0;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-text-muted);
}
.nz-field-error {
  margin: 0;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-danger-text);
}

/* Segmented control */
.nz-segmented {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 2px;
  border: 1px solid var(--nozomi-border);
  border-radius: calc(var(--nozomi-radius-control) + 3px);
  background: color-mix(in srgb, var(--nozomi-bg-deep) 62%, transparent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  padding: 3px;
}
.nz-segmented-option {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: calc(var(--nozomi-radius-control) - 1px);
  background: transparent;
  padding: 0 12px;
  font-family: inherit;
  font-size: var(--nozomi-font-small);
  font-weight: var(--nozomi-weight-medium);
  color: var(--nozomi-text-muted);
  cursor: pointer;
  transition:
    color var(--nozomi-motion-fast) var(--nozomi-ease),
    background-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-segmented-option:hover:not(:disabled) { color: var(--nozomi-text); }
.nz-segmented-option[aria-checked="true"] {
  border-color: var(--nozomi-border-strong);
  background: var(--nozomi-surface-raised);
  color: var(--nozomi-text-strong);
}
.nz-segmented-option:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Tabs */
.nz-tabs { display: grid; gap: 0; }
.nz-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--nozomi-border);
}
.nz-tab {
  position: relative;
  min-height: 40px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 0 12px;
  font-family: inherit;
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-medium);
  color: var(--nozomi-text-muted);
  cursor: pointer;
  transition:
    color var(--nozomi-motion-fast) var(--nozomi-ease),
    border-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-tab:hover:not(:disabled) { color: var(--nozomi-text-strong); }
.nz-tab[aria-selected="true"] {
  border-bottom-color: var(--nozomi-accent);
  color: var(--nozomi-text-strong);
  box-shadow: 0 10px 18px -14px color-mix(in srgb, var(--nozomi-accent) 90%, transparent);
}
.nz-tab:disabled { cursor: not-allowed; opacity: 0.5; }
.nz-tabpanel { padding-top: var(--nozomi-space-4); }
.nz-tabpanel[hidden] { display: none; }

/* Tooltip */
.nz-tooltip-wrap { position: relative; display: inline-flex; }
.nz-tooltip-trigger { display: inline-flex; }
.nz-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 70;
  max-width: 20rem;
  transform: translateX(-50%) translateY(2px);
  border: 1px solid var(--nozomi-border-strong);
  border-radius: var(--nozomi-radius-control);
  background: color-mix(in srgb, var(--nozomi-surface-raised) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 6px 10px;
  font-size: var(--nozomi-font-small);
  line-height: 1.35;
  color: var(--nozomi-text);
  box-shadow: var(--nozomi-shadow-popover);
  opacity: 0;
  pointer-events: none;
  white-space: normal;
  transition:
    opacity var(--nozomi-motion-fast) var(--nozomi-ease),
    transform var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-tooltip-wrap:hover .nz-tooltip,
.nz-tooltip-wrap:focus-within .nz-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Table */
.nz-table-wrap { overflow-x: auto; }
.nz-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: var(--nozomi-font-body);
}
.nz-table-th {
  border-bottom: 1px solid var(--nozomi-border);
  padding: 11px 14px;
  background: var(--nozomi-overlay-subtle);
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-caption);
  font-size: 10.5px;
  font-weight: var(--nozomi-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nz-table-td {
  border-bottom: 1px solid var(--nozomi-border);
  padding: 12px 14px;
  vertical-align: top;
  color: var(--nozomi-text);
  transition: background-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-table tbody tr:hover .nz-table-td { background: color-mix(in srgb, var(--nozomi-accent) 4%, var(--nozomi-overlay-subtle)); }
/* Last row needs no trailing rule so the table ends flush with its frame. */
.nz-table tbody tr:last-child .nz-table-td { border-bottom: 0; }
.nz-table-cards {
  display: grid;
  gap: 12px;
}
.nz-table-card { padding: 12px; }


/* Shell composition (Sidebar component layout). */
.nz-shell {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--nozomi-border);
}
/* Desktop: the rail is flush to the viewport edge, divided by one rule. */
@media (min-width: 768px) {
  .nz-shell {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: var(--nozomi-size-sidebar);
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-right: 1px solid var(--nozomi-border);
  }
}
.nz-shell-head {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--nozomi-border);
  padding: 12px 16px;
}
@media (min-width: 768px) {
  .nz-shell-head { padding: 16px 16px 12px; border-bottom-color: transparent; }
}
.nz-shell-head-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.nz-shell-scrim {
  position: fixed;
  inset: 0;
  top: 58px;
  z-index: 40;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.62);
}
.nz-shell-nav-closed { display: none; }
.nz-shell-nav-open {
  position: fixed;
  left: 0;
  right: 0;
  top: 58px;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  background: var(--nozomi-canvas), var(--nozomi-sidebar);
  animation: nz-rise-in var(--nozomi-motion-base) var(--nozomi-ease-entrance) both;
  border-bottom: 1px solid var(--nozomi-border);
  padding: 12px;
}
@media (min-width: 768px) {
  .nz-shell-nav-closed,
  .nz-shell-nav-open {
    position: static;
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    background: transparent;
    border-bottom: 0;
    padding: 12px;
  }
}
.nz-shell-links {
  display: grid;
  gap: 2px;
}
.nz-shell-link-body {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.nz-shell-section-label-visible { display: block; }
/* The mobile drawer stacks each section's label above its links. */
@media (max-width: 767px) {
  .nz-shell-nav-open .nz-shell-section { display: block; padding: 6px 0 10px; }
  .nz-shell-nav-open .nz-shell-link { min-height: 44px; font-size: var(--nozomi-font-body); }
}
.nz-shell-foot-mobile {
  margin-top: auto;
  border-top: 1px solid var(--nozomi-border);
  padding: 12px 4px;
}
.nz-shell-foot {
  margin: 0 8px 8px;
  border: 1px solid var(--nozomi-border);
  border-radius: 14px;
  background: var(--nozomi-overlay-subtle);
  box-shadow: var(--nozomi-shadow-inset-top);
  padding: 8px 10px;
}


/* ---------- Layout and text vocabulary ----------
   A deliberately closed set of composition helpers. Gap and column sizing tune
   through the --nz-gap / --nz-col custom properties instead of per-value
   utility classes; bespoke geometry stays in app-local semantic CSS. */
.nz-row {
  display: flex;
  align-items: center;
  gap: var(--nz-gap, var(--nozomi-space-2));
  min-width: 0;
}
.nz-row-between { justify-content: space-between; }
.nz-row-end { justify-content: flex-end; }
.nz-row-wrap { flex-wrap: wrap; }
.nz-row-top { align-items: flex-start; }
.nz-stack {
  display: grid;
  gap: var(--nz-gap, var(--nozomi-space-3));
  min-width: 0;
}
.nz-grid {
  display: grid;
  gap: var(--nz-gap, var(--nozomi-space-4));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--nz-col, 280px)), 1fr));
}
.nz-gap-xs { --nz-gap: var(--nozomi-space-1); }
.nz-gap-sm { --nz-gap: var(--nozomi-space-2); }
.nz-gap-md { --nz-gap: var(--nozomi-space-3); }
.nz-gap-lg { --nz-gap: var(--nozomi-space-4); }
.nz-gap-xl { --nz-gap: var(--nozomi-space-5); }
.nz-grow { flex: 1 1 auto; min-width: 0; }
.nz-fixed { flex: 0 0 auto; }
.nz-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}
.nz-num { font-variant-numeric: tabular-nums; }
.nz-muted { color: var(--nozomi-text-muted); }
.nz-strong { color: var(--nozomi-text-strong); }
.nz-small { font-size: var(--nozomi-font-small); }

/* ---------- Loading and refresh smoothness ---------- */

/* Text-shaped skeleton line; width tunes via --nz-w. */
.nz-skeleton-text {
  display: block;
  height: 1em;
  width: var(--nz-w, 100%);
  border-radius: var(--nozomi-radius-small);
}

/* Stale-while-revalidate rendering: keep last-good content mounted and set
   aria-busy on the region while refreshing. The transition delay means
   revalidations faster than one base beat never visibly flash. */
.nz-refresh {
  transition: opacity var(--nozomi-motion-base) var(--nozomi-ease);
}
.nz-refresh[aria-busy="true"] {
  opacity: 0.6;
  transition-delay: var(--nozomi-motion-base);
}

/* Page entrance: the direct sections of a shell's main column rise in with a
   short stagger whenever a view mounts. The fill is backwards-only, so once the
   entrance ends no transform remains to capture fixed-position descendants or
   shift layout measurements. */
/* Zero specificity: a section that runs its own entrance keeps it. */
:where(.nz-shell ~ main, .nz-page-enter) > * {
  animation: nz-rise-in var(--nozomi-motion-slow) var(--nozomi-ease-entrance) backwards;
}
:where(.nz-shell ~ main, .nz-page-enter) > :nth-child(2) { animation-delay: 50ms; }
:where(.nz-shell ~ main, .nz-page-enter) > :nth-child(3) { animation-delay: 100ms; }
:where(.nz-shell ~ main, .nz-page-enter) > :nth-child(4) { animation-delay: 150ms; }
:where(.nz-shell ~ main, .nz-page-enter) > :nth-child(n + 5) { animation-delay: 200ms; }

/* Entrances for content appearing after skeletons or into lists. */
.nz-anim-fade { animation: nz-fade-in var(--nozomi-motion-base) var(--nozomi-ease) both; }
.nz-anim-rise { animation: nz-rise-in var(--nozomi-motion-base) var(--nozomi-ease-entrance) both; }
@keyframes nz-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nz-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Auth card (login treatment; static-HTML friendly) ---------- */
.nz-auth {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--nozomi-bg);
  padding: var(--nozomi-space-5);
}
.nz-auth > * { position: relative; }
.nz-auth-card {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--nozomi-border-strong);
  border-radius: var(--nozomi-radius-dialog);
  background: var(--nozomi-panel);
  padding: var(--nozomi-space-6);
}
.nz-auth-brand {
  display: flex;
  align-items: center;
  gap: var(--nozomi-space-2);
  margin-bottom: var(--nozomi-space-5);
  color: var(--nozomi-text-strong);
  font-weight: var(--nozomi-weight-semibold);
}
.nz-auth-actions {
  display: grid;
  gap: var(--nozomi-space-2);
  margin-top: var(--nozomi-space-5);
}
/* Operator login composition: mark, product eyebrow, title, one line, one
   action. Same card on every operator surface. */
/* No form fields here, so the card is centred: mark as a badge, then the
   product eyebrow, title, one line, and one full-width action. */
.nz-auth-card { text-align: center; padding: var(--nozomi-space-6) var(--nozomi-space-6) calc(var(--nozomi-space-6) + var(--nozomi-space-1)); }
.nz-auth-card .nz-logo { --nz-logo-size: 72px; margin: 0 auto var(--nozomi-space-5); }
.nz-auth-card .nz-eyebrow { color: var(--nozomi-accent); }
.nz-auth-card .nz-alert { text-align: left; }
.nz-auth-title {
  margin: var(--nozomi-space-2) 0 0;
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-display-page);
  font-weight: var(--nozomi-weight-semibold);
  line-height: var(--nozomi-line-tight);
  letter-spacing: var(--nozomi-tracking-display);
  color: var(--nozomi-text-strong);
}
.nz-auth-card > p { margin: var(--nozomi-space-3) 0 0; color: var(--nozomi-text-muted); line-height: 1.6; text-wrap: pretty; }
.nz-auth-actions .nz-btn { min-height: 42px; font-size: var(--nozomi-font-body); }


/* ---------- Account footer ---------- */
.nz-account {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.nz-account-avatar {
  display: grid;
  width: var(--nozomi-size-control-sm);
  height: var(--nozomi-size-control-sm);
  flex-shrink: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--nozomi-accent) 40%, var(--nozomi-border-strong));
  border-radius: 50%;
  background: var(--nozomi-surface);
  font-family: var(--nozomi-font-sans);
  font-size: var(--nozomi-font-small);
  font-weight: var(--nozomi-weight-semibold);
  color: var(--nozomi-text-strong);
}
.nz-account-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--nozomi-font-small);
  line-height: 1.375;
}
.nz-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--nozomi-weight-medium);
  color: var(--nozomi-text-strong);
}
.nz-account-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nozomi-text-muted);
}
.nz-account .nz-btn-icon {
  width: var(--nozomi-size-control-sm);
  height: var(--nozomi-size-control-sm);
}
.nz-account-extra {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--nozomi-border);
  padding-top: 12px;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-text-muted);
}

/* ---------- Dialog header, body, and actions ---------- */
.nz-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.nz-dialog-header-title {
  margin: 0;
  font-size: var(--nozomi-font-heading-medium);
  font-weight: var(--nozomi-weight-semibold);
  letter-spacing: -0.018em;
  color: var(--nozomi-text-strong);
}
.nz-dialog-header-title-spaced { margin-top: 8px; }
.nz-dialog-pad { padding: 24px; }
.nz-dialog-body {
  margin-top: 8px;
  font-size: var(--nozomi-font-body);
  line-height: var(--nozomi-line-body);
  color: var(--nozomi-text-muted);
}
.nz-dialog-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Toasts ---------- */
.nz-toaster {
  pointer-events: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  width: 100%;
  max-width: 24rem;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
@media (min-width: 640px) {
  .nz-toaster { padding: 0; }
}
.nz-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: var(--nozomi-font-control);
  border: 1px solid var(--nozomi-border-strong);
  border-radius: var(--nozomi-radius-panel);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--nozomi-shadow-popover);
  animation: nz-toast-in var(--nozomi-motion-base) var(--nozomi-ease-spring) both;
}
@keyframes nz-toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.nz-toast-message {
  min-width: 0;
  overflow-wrap: break-word;
}
.nz-toast-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--nozomi-size-target-min);
  min-height: var(--nozomi-size-target-min);
  margin: -4px -6px -4px 0;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-toast-dismiss:hover { opacity: 1; }

/* ---------- App boundary ---------- */
.nz-boundary {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: var(--nozomi-space-5);
}
.nz-boundary-alert {
  width: 100%;
  max-width: 32rem;
}
/* ---------- Table pager ---------- */
.nz-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--nozomi-border);
  border-radius: calc(var(--nozomi-radius-control) + 4px);
  background: var(--nozomi-glass);
  box-shadow: var(--nozomi-shadow-inset-top);
  padding: 6px 8px 6px 14px;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-text-muted);
}
.nz-pager-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nz-pager-page {
  font-family: var(--nozomi-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Display-font header voice ---------- */

/* Eyebrows are instrument captions: mono, widely tracked, in the product
   accent tint. */
.nz-eyebrow {
  margin: 0;
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-medium);
  letter-spacing: var(--nozomi-tracking-label);
  text-transform: uppercase;
  color: var(--nozomi-eyebrow);
}

/* Page titles: large, tight, and lit from above so they read as the one
   headline on the page. */
.nz-display-title {
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-display-page);
  font-weight: var(--nozomi-weight-bold);
  line-height: 1.08;
  text-wrap: balance;
  letter-spacing: var(--nozomi-tracking-display);
  color: var(--nozomi-text-strong);
}

/* Hero-scale display title for brand/login/landing surfaces. */
.nz-display-hero {
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-display-hero);
  font-weight: var(--nozomi-weight-semibold);
  line-height: 1.04;
  letter-spacing: var(--nozomi-tracking-display);
  text-wrap: balance;
  color: var(--nozomi-text-strong);
}

/* ============================================================
   Compatibility treatments for existing hero and operator surfaces.
   Display text follows the shared proportional type; technical values
   continue to use the explicit monospace helpers.
   ============================================================ */

:root {
  --term-phosphor: color-mix(in srgb, var(--nozomi-cyan) 90%, transparent);
}

.term-display {
  font-family: var(--font-display), var(--nozomi-font-mono);
  letter-spacing: -0.01em;
}

/* Large brand/hero wordmark -- bypasses app-level .text-* size clamps. */
.term-brand {
  font-family: var(--font-display), var(--nozomi-font-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Phosphor glow for key accents (use sparingly). */
.term-glow {
  text-shadow: var(--nozomi-glow-cyan);
}

/* Display eyebrow label with a leading marker, e.g. "// player". */
.term-eyebrow {
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-medium);
  letter-spacing: var(--nozomi-tracking-label);
  text-transform: uppercase;
  color: var(--nozomi-eyebrow);
}

/* Framed surfaces share the same quiet treatment as panels. Existing class
   names remain compatible with independently deployed consumers. */
.term-frame {
  position: relative;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-sheen), var(--nozomi-glass);
  box-shadow: var(--nozomi-shadow-panel);
}

/* Terminal bracket tag, e.g. difficulty / category chips. */
.term-tag {
  font-family: var(--font-display), var(--nozomi-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* Uppercase metric label for console stat rows. */
.term-metric-label {
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-medium);
  letter-spacing: var(--nozomi-tracking-label);
  text-transform: uppercase;
  color: var(--nozomi-text-muted);
}

/* Boot reveal -- staggered fade/translate on page load. Per element set
   `style={{ ['--boot-delay']: '120ms' }}` for the cascade. */
.term-boot {
  opacity: 0;
  transform: translateY(8px);
  animation: term-boot-in var(--nozomi-motion-slow) var(--nozomi-ease-entrance) forwards;
  animation-delay: var(--boot-delay, 0ms);
}
@keyframes term-boot-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Blinking cursor for prompts. */
.term-caret::after {
  content: "_";
  margin-left: 2px;
  color: var(--nozomi-cyan);
  animation: term-blink 1.1s step-end infinite;
}
@keyframes term-blink {
  50% {
    opacity: 0;
  }
}

/* ---------- Brand mark (pixel compass-star) ----------
   The shared mark rendered as an inline SVG of unit squares (see logo.html /
   BrandMark). Region 1 (`b*`) reads the consumer accent, region 2 (`l*`) the
   strong text tone, so every product shows the same object in its own colour;
   the level suffix carries the face shading. Sized by --nz-logo-size. */
.nz-logo {
  display: block;
  width: var(--nz-logo-size, 112px);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  shape-rendering: crispEdges;
  user-select: none;
  -webkit-user-select: none;
}
.nz-logo-hero { --nz-logo-size: clamp(104px, 9vw, 136px); }
.nz-logo-compact { --nz-logo-size: 48px; filter: none; }
.nz-logo [class^="b"] { fill: var(--nozomi-accent); }
.nz-logo [class^="l"] { fill: var(--nozomi-text-strong); }
.nz-logo .b0, .nz-logo .l0 { fill-opacity: 0.22; }
.nz-logo .b1, .nz-logo .l1 { fill-opacity: 0.32; }
.nz-logo .b2, .nz-logo .l2 { fill-opacity: 0.42; }
.nz-logo .b3, .nz-logo .l3 { fill-opacity: 0.53; }
.nz-logo .b4, .nz-logo .l4 { fill-opacity: 0.64; }
.nz-logo .b5, .nz-logo .l5 { fill-opacity: 0.76; }
.nz-logo .b6, .nz-logo .l6 { fill-opacity: 0.88; }
.nz-logo .b7, .nz-logo .l7 { fill-opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .nz-logo-spin { animation: nz-logo-spin var(--nz-logo-spin-duration, 3.2s) linear infinite; }
}
@keyframes nz-logo-spin {
  to { transform: perspective(320px) rotateY(1turn); }
}

/* ---------- Landing gate liveness ----------
   The gate aside can read as a running system: a live pulse on its eyebrow,
   and (opt-in, add the graph SVG) a faint node graph behind the copy with one
   pulsing core. Accent-driven, CSP-safe (class-only), reduced-motion aware.
   The graph SVG self-clips to its box, so the gate keeps its corner ticks. */
.nz-gate-live { display: inline-flex; align-items: center; gap: 7px; }
.nz-gate-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nozomi-accent);
  animation: nz-gate-dot 2s ease-out infinite;
}
@keyframes nz-gate-dot {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nozomi-accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
.nz-gate-graph {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  pointer-events: none;
  /* Fade the graph out before the step copy so text stays legible over it. */
  -webkit-mask-image: linear-gradient(180deg, #000 0 14%, transparent 40%);
  mask-image: linear-gradient(180deg, #000 0 14%, transparent 40%);
}
/* Raise the real content above the graph only when a graph is present. */
.nz-gate:has(.nz-gate-graph) > :not(.nz-gate-graph) { position: relative; z-index: 1; }
.nz-gate-graph-edges line { stroke: var(--nozomi-accent-border); stroke-width: 0.75; }
.nz-gate-graph-node { fill: var(--nozomi-accent); opacity: 0.7; }
.nz-gate-graph-core { fill: var(--nozomi-accent); }
.nz-gate-graph-ping {
  fill: none;
  stroke: var(--nozomi-accent);
  stroke-width: 1;
  transform-origin: 110px 60px;
  animation: nz-gate-ping 2.6s var(--nozomi-ease) infinite;
}
@keyframes nz-gate-ping {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(4.5); opacity: 0; }
}

/* ---------- Section seam (accent divider) ----------
   A single shallow accent chevron that separates hero from the section below,
   the way a technical console rules off one region from the next. An inline
   SVG so the hairline stays crisp at any width (non-scaling stroke); reads the
   consumer accent. Decorative -- always aria-hidden. Fuji's peak doubles as
   its mountain motif; the shallow angle reads as a neutral divider elsewhere. */
.nz-seam {
  display: block;
  width: 100%;
  height: clamp(24px, 4vw, 44px);
  margin: clamp(1.5rem, 4vw, 3rem) 0;
  overflow: visible;
  pointer-events: none;
}
.nz-seam-line {
  fill: none;
  stroke: var(--nozomi-accent);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  opacity: 0.5;
}

/* ---------- Work meter (determinate progress + ETA) ----------
   A live "actual work" indicator for long-running jobs: a headline + percent,
   a native <progress> fill (CSP-safe -- the value is a DOM property, no inline
   style), and a phase + estimated-completion foot. Determinate when a value is
   set; a sweeping overlay (.nz-workmeter-indeterminate) covers the queued state
   before work has a measurable start. Reads the consumer accent. */
.nz-workmeter { display: grid; gap: 0.5rem; }
.nz-workmeter-head, .nz-workmeter-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nozomi-space-4);
}
.nz-workmeter-label {
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-bold);
  letter-spacing: 0.01em;
  color: var(--nozomi-text-strong);
}
.nz-workmeter-pct {
  font-family: var(--nozomi-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-bold);
  color: var(--nozomi-accent);
}
.nz-workmeter-foot { color: var(--nozomi-text-muted); font-size: var(--nozomi-font-small); }
.nz-workmeter-eta { font-family: var(--nozomi-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The bar: a recessed rail; the value is an accent gradient with a slow
   travelling sheen so it reads as live even between value updates. */
.nz-workmeter-track { position: relative; }
.nz-workmeter-bar {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.6rem;
  border: 0;
  border-radius: var(--nozomi-radius-pill);
  overflow: hidden;
  background: var(--nozomi-overlay-medium);
}
.nz-workmeter-bar::-webkit-progress-bar { background: var(--nozomi-overlay-medium); border-radius: var(--nozomi-radius-pill); }
.nz-workmeter-bar::-webkit-progress-value {
  border-radius: var(--nozomi-radius-pill);
  background:
    linear-gradient(90deg, transparent, var(--nozomi-overlay-strong) 45%, transparent 70%) 0 0 / 180px 100% repeat-x,
    linear-gradient(90deg, var(--nozomi-accent-dark), var(--nozomi-accent));
  animation: nz-workmeter-sheen 1.4s linear infinite;
}
.nz-workmeter-bar::-moz-progress-bar {
  border-radius: var(--nozomi-radius-pill);
  background:
    linear-gradient(90deg, transparent, var(--nozomi-overlay-strong) 45%, transparent 70%) 0 0 / 180px 100% repeat-x,
    linear-gradient(90deg, var(--nozomi-accent-dark), var(--nozomi-accent));
  animation: nz-workmeter-sheen 1.4s linear infinite;
}
@keyframes nz-workmeter-sheen { to { background-position: 180px 0, 0 0; } }
/* Queued state: hide the (zero) value and run a sweeping band over the rail. */
.nz-workmeter-indeterminate .nz-workmeter-sweep { display: block; }
.nz-workmeter-sweep {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: var(--nozomi-radius-pill);
  overflow: hidden;
  pointer-events: none;
}
.nz-workmeter-sweep::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 38%;
  border-radius: var(--nozomi-radius-pill);
  background: linear-gradient(90deg, transparent, var(--nozomi-accent), transparent);
  animation: nz-workmeter-scan 1.5s var(--nozomi-ease) infinite;
}
@keyframes nz-workmeter-scan { to { left: 102%; } }

/* ============================================================
   Public landing layer -- the one composition every product's
   signed-out page shares: masthead, two-column hero (copy +
   framed "bar" aside), three-step explainer, one access card,
   legal links. Products keep only their accent tokens and any
   decorative background field. Static-HTML friendly.
   ============================================================ */
.nz-public {
  position: relative;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}
/* Masthead: a flush sticky bar whose content aligns to the 76rem column. */
.nz-public-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: var(--nozomi-space-6);
  padding: 8px max(18px, calc((100% - 76rem) / 2));
  border-bottom: 1px solid var(--nozomi-border);
  background: var(--nozomi-bg);
}
.nz-public-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--nozomi-text-strong);
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: 1.0625rem;
  font-weight: var(--nozomi-weight-bold);
  letter-spacing: -0.025em;
  text-decoration: none;
}
.nz-public-brand .nz-logo { --nz-logo-size: 1.6rem; }
.nz-public-brand:hover { color: var(--nozomi-accent); }
.nz-public-account {
  display: flex;
  align-items: center;
  gap: var(--nozomi-space-4);
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-small);
  letter-spacing: 0.02em;
}
.nz-public-account a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border-radius: var(--nozomi-radius-control);
  background: var(--nozomi-accent);
  padding: 0 16px;
  color: var(--nozomi-accent-ink);
  font-family: var(--nozomi-font-sans);
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-semibold);
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-public-account a:hover { background-color: var(--nozomi-accent-hover); }
.nz-public-notice { position: relative; z-index: 1; margin: var(--nozomi-space-6) 0 0; }

/* The hero is one centred column: the mark in orbit, the claim, one action. */
.nz-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5.5rem);
  text-align: center;
}
.nz-hero-copy { display: grid; justify-items: center; min-width: 0; }
/* Boot reveal: the mark settles first, then the copy rises in line by line.
   Runs once on load; the consolidated reduced-motion block collapses it. */
.nz-hero-copy > *, .nz-hero-visual {
  opacity: 0;
  animation: nz-rise-in var(--nozomi-motion-slow) var(--nozomi-ease-entrance) forwards;
}
.nz-hero-visual { animation-delay: 20ms; }
.nz-hero-copy > :nth-child(1) { animation-delay: 90ms; }
.nz-hero-copy > :nth-child(2) { animation-delay: 160ms; }
.nz-hero-copy > :nth-child(3) { animation-delay: 230ms; }
.nz-hero-copy > :nth-child(4) { animation-delay: 300ms; }
.nz-hero-copy > :nth-child(5) { animation-delay: 370ms; }
.nz-hero-copy > :nth-child(n + 6) { animation-delay: 440ms; }
/* The hero eyebrow is a label with a leading accent dot. */
.nz-hero-copy .nz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: color-mix(in srgb, var(--nozomi-accent) 60%, var(--nozomi-text-strong));
}
.nz-hero-copy .nz-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nozomi-accent);
}
.nz-hero h1 {
  max-width: 15ch;
  margin: 1.4rem 0 1.5rem;
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-display-hero);
  font-weight: var(--nozomi-weight-bold);
  line-height: 0.98;
  letter-spacing: -0.048em;
  color: var(--nozomi-text-strong);
  text-wrap: balance;
}
.nz-hero h1 span { color: var(--nozomi-accent); }
.nz-hero-lede {
  max-width: 40rem;
  margin: 0;
  color: color-mix(in srgb, var(--nozomi-text) 82%, var(--nozomi-text-muted));
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.nz-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nozomi-space-3); margin-top: 2.25rem; }
.nz-hero-actions .nz-btn, .nz-access-card .nz-btn { min-height: 48px; padding-inline: 1.6rem; font-size: 0.9375rem; }
p.nz-hero-note { max-width: 32rem; margin: var(--nozomi-space-4) 0 0; color: var(--nozomi-text-muted); font-size: var(--nozomi-font-small); line-height: 1.55; }
ul.nz-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-small);
  letter-spacing: 0.01em;
}
.nz-trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 28px;
}
.nz-trust-row li::before {
  content: "✓";
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--nozomi-success-border);
  border-radius: 50%;
  background: var(--nozomi-success-bg);
  color: var(--nozomi-success);
  font-size: 10px;
  font-weight: var(--nozomi-weight-bold);
}

/* The brand moment: the mark inside two thin orbit rings. */
.nz-hero-visual {
  position: relative;
  order: -1;
  display: grid;
  place-items: center;
  width: clamp(168px, 16vw, 216px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent 64%, color-mix(in srgb, var(--nozomi-accent) 22%, transparent) 64.6% 65.4%, transparent 66%),
    radial-gradient(closest-side, transparent 97.2%, color-mix(in srgb, var(--nozomi-text-strong) 14%, transparent) 97.6% 98.6%, transparent 99%);
}
.nz-hero-visual .nz-logo {
  position: relative;
  z-index: 1;
  --nz-logo-size: 46%;
}

/* The bar: what a result has to clear before the customer sees it, stated as
   three numbered stages. The last stage is the only one that reports, so it
   is the only one lit in the accent. */
.nz-gate {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-top: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-panel);
}
.nz-gate .nz-eyebrow { margin: 0; color: var(--nozomi-eyebrow); }
.nz-gate h2 { margin: 0.4rem 0 0; font-size: var(--nozomi-font-page-title); font-weight: var(--nozomi-weight-semibold); letter-spacing: -0.022em; color: var(--nozomi-text-strong); }
ol.nz-gate-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: nz-gate;
}
.nz-gate-steps li {
  position: relative;
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-overlay-subtle);
  counter-increment: nz-gate;
}
.nz-gate-steps li:last-child {
  border-color: var(--nozomi-accent-border);
}
/* Stage index, top right of each card. */
.nz-gate-steps li::after {
  content: counter(nz-gate, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-small);
  letter-spacing: 0.08em;
}
.nz-gate-steps li:last-child::after { color: var(--nozomi-accent); }
/* A connector runs from each stage into the next. */
.nz-gate-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1.62rem;
  right: calc(-0.75rem - 1px);
  width: 0.75rem;
  height: 1px;
  background: var(--nozomi-border-strong);
}
.nz-gate-mark {
  position: relative;
  z-index: 1;
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid var(--nozomi-border-interactive);
  border-radius: 50%;
  background: var(--nozomi-bg);
}
.nz-gate-mark-warn { border-color: var(--nozomi-warning); background: var(--nozomi-warning-bg); }
.nz-gate-mark-ok { border-color: var(--nozomi-success); background: var(--nozomi-success); }
.nz-gate-steps strong { display: block; color: var(--nozomi-text-strong); font-size: var(--nozomi-font-section-title); font-weight: var(--nozomi-weight-semibold); letter-spacing: -0.015em; }
.nz-gate-steps p { margin: 0.4rem 0 0; color: var(--nozomi-text-muted); font-size: var(--nozomi-font-control); line-height: 1.55; }
p.nz-gate-rule {
  margin: 1.35rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--nozomi-border);
  color: var(--nozomi-text);
  font-size: var(--nozomi-font-control);
  line-height: 1.55;
}

/* Explainer cards: each carries a large outline numeral in the accent. */
.nz-explain-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; counter-reset: nz-explain; }
.nz-explain-grid article {
  position: relative;
  overflow: hidden;
  min-height: 12.5rem;
  padding: 1.5rem;
  border: 1px solid var(--nozomi-border);
  border-radius: calc(var(--nozomi-radius-panel) + 2px);
  background: var(--nozomi-sheen), var(--nozomi-glass);
  box-shadow: var(--nozomi-shadow-panel);
  counter-increment: nz-explain;
  transition: border-color var(--nozomi-motion-base) var(--nozomi-ease), transform var(--nozomi-motion-base) var(--nozomi-ease-entrance), box-shadow var(--nozomi-motion-base) var(--nozomi-ease);
}
.nz-explain-grid article::after {
  content: counter(nz-explain, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  left: 1.4rem;
  color: transparent;
  font-family: var(--font-display, var(--nozomi-font-sans));
  font-size: 3.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--nozomi-accent) 30%, transparent);
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--nozomi-motion-base) var(--nozomi-ease);
}
.nz-explain-grid article:hover {
  border-color: color-mix(in srgb, var(--nozomi-accent) 35%, var(--nozomi-border));
}
.nz-explain-grid article:hover::after { -webkit-text-stroke-color: color-mix(in srgb, var(--nozomi-accent) 60%, transparent); }
/* The outline numeral is the visible index; the step chip stays for
   assistive technology only. */
.nz-explain-grid .nz-step-number {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nz-explain-grid h2, .nz-explain-grid h3 { position: relative; margin: 3.9rem 0 0; font-size: 1.125rem; font-weight: var(--nozomi-weight-semibold); letter-spacing: -0.02em; color: var(--nozomi-text-strong); }
.nz-explain-grid p { position: relative; max-width: 30rem; margin: 0.5rem 0 0; color: var(--nozomi-text-muted); font-size: var(--nozomi-font-control); line-height: 1.6; }
.nz-step-number {
  display: inline-flex;
  min-width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.45rem;
  border: 1px solid var(--nozomi-accent-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--nozomi-accent) 12%, transparent);
  color: var(--nozomi-accent);
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-small);
  font-weight: var(--nozomi-weight-bold);
}

/* The closing call to action: a centred card whose border carries a slowly
   travelling band of accent light. */
.nz-access-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nozomi-space-5);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(2.25rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--nozomi-accent-border);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-panel);
  text-align: center;
}
.nz-access-card .nz-eyebrow { margin: 0; color: var(--nozomi-eyebrow); }
.nz-access-card h2 { max-width: 22ch; margin: 0.6rem auto 0.75rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: var(--nozomi-weight-bold); line-height: 1.08; letter-spacing: -0.04em; color: var(--nozomi-text-strong); text-wrap: balance; }
.nz-access-card p { max-width: 36rem; margin: 0 auto; color: var(--nozomi-text-muted); line-height: 1.6; }

/* Element-qualified selectors above (ul/ol/p) outrank the .nz-base prose
   reset, which zeroes margins on bare lists and paragraphs. */
body:has(nz-information) { padding-bottom: 40px; }
body.nz-information-open { overflow: hidden; }
nz-information, .nz-information-dialog { font: var(--nozomi-font-body)/var(--nozomi-line-body) var(--nozomi-font-sans); }
@media (min-width: 768px) { body:has(nz-information) .nz-shell { bottom: 40px; } }
/* The mobile drawer ends above the fixed reference footer, not under it. */
@media (max-width: 767px) { body:has(nz-information) .nz-shell-nav-open { bottom: 40px; } }
nz-information { display: block; position: fixed; inset: auto 0 0; z-index: 45; height: 40px; border-top: 1px solid color-mix(in srgb, var(--nozomi-border) 70%, transparent); background: var(--nozomi-bg); }
.nz-public-links { display: flex; justify-content: center; align-items: center; gap: clamp(0px, 1.5vw, 16px); height: 100%; margin: 0; padding: 0 8px; }
.nz-public-links a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-caption);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0 clamp(6px, 1vw, 12px);
  transition: color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-public-links a:hover { color: var(--nozomi-text-strong); }
.nz-public-links a[aria-current="page"] { color: var(--nozomi-accent); text-decoration: underline; text-underline-offset: 5px; }
.nz-public-links a:focus-visible { outline: 2px solid var(--nozomi-accent); outline-offset: 3px; border-radius: 2px; }
.nz-information-dialog { box-sizing: border-box; width: min(860px, calc(100vw - 48px)); max-width: none; height: fit-content; max-height: min(780px, calc(100dvh - 96px)); padding: 0; margin: auto; overflow: hidden; border: 1px solid var(--nozomi-border-strong); border-radius: var(--nozomi-radius-dialog); color: var(--nozomi-text); background: var(--nozomi-bg); box-shadow: var(--nozomi-shadow-dialog); animation: nz-dialog-in var(--nozomi-motion-base) var(--nozomi-ease-entrance) both; }
.nz-information-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.nz-information-dialog::backdrop { background: color-mix(in srgb, var(--nozomi-bg-deep) 62%, transparent); backdrop-filter: blur(10px); }
.nz-information-head { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 16px 10px 28px; border-bottom: 1px solid var(--nozomi-border); font-size: 12px; color: var(--nozomi-text-muted); }
.nz-information-head > span { font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.nz-information-head .nz-information-permalink { margin-left: auto; color: var(--nozomi-text-muted); text-decoration: none; }
.nz-information-head button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--nozomi-border); border-radius: 50%; background: var(--nozomi-panel); color: var(--nozomi-text-strong); font: 24px/1 sans-serif; cursor: pointer; }
.nz-information-head button:hover { background: var(--nozomi-surface-raised); }
.nz-information-head .nz-information-back { width: auto; padding: 0 12px; border-radius: 8px; font: inherit; }
.nz-information-head [hidden] { display: none; }
.nz-information-dialog :is(button, a):focus-visible { outline: 2px solid var(--nozomi-accent); outline-offset: 3px; }
.nz-information-content { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--nozomi-border) transparent; }
.nz-information-document[role="status"] { min-height: 200px; padding: 32px; color: var(--nozomi-text-muted); }
.nz-information-document .nz-document { width: 100%; }
@media (max-width: 540px) {
  .nz-public-links a { font-size: 11px; }
  .nz-information-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 40px); border-radius: 12px; }
  .nz-information-head { padding-left: 20px; gap: 10px; }
}
@media print { nz-information { display: none; } }
/* Footer wrapper for pages that keep the legal links outside <main>. */
.nz-site-footer { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem 2.5rem; }

/* One document reader for standalone pages and in-app reference views. */
.nz-document { box-sizing: border-box; width: min(52rem, 100%); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem); color: var(--nozomi-text); overflow-wrap: anywhere; }
.nz-document h1 { margin: 0 0 1.5rem; font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.2; letter-spacing: -.03em; color: var(--nozomi-text-strong); }
.nz-document h2 { margin: 2rem 0 .65rem; font-size: 1.1rem; font-weight: 600; color: var(--nozomi-text-strong); }
.nz-document :is(p, ul, ol, dl) { margin: 0 0 1rem; line-height: 1.75; color: var(--nozomi-text-muted); }
.nz-document :is(ul, ol) { padding-left: 1.4rem; }
.nz-document ul { list-style: disc; }
.nz-document ol { list-style: decimal; }
.nz-document dt { margin-top: .85rem; font-weight: 600; }
.nz-document dd { margin: .25rem 0 0; }
.nz-document a { color: var(--nozomi-accent); text-underline-offset: 3px; }
.nz-document a:focus-visible { outline: 2px solid var(--nozomi-accent); outline-offset: 3px; }
.nz-document .nz-eyebrow { margin-bottom: .75rem; }
.nz-document .nz-public-links { margin-top: 2rem; }
.nz-document .nz-public-links a { color: var(--nozomi-text-muted); }
.nz-document .nz-public-links a:hover, .nz-document .nz-public-links a[aria-current="page"] { color: var(--nozomi-accent); }
.nz-document .nz-document-meta { margin-top: 1rem; font-size: var(--nozomi-font-small); }
.nz-document-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0; }
.nz-document-grid a { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border: 1px solid var(--nozomi-border); border-radius: var(--nozomi-radius-panel); background: var(--nozomi-panel); text-decoration: none; }
.nz-document-grid a:hover { border-color: var(--nozomi-accent); background: var(--nozomi-accent-bg); }
.nz-document-grid strong { color: var(--nozomi-text-strong); }
.nz-document-grid span { color: var(--nozomi-text-muted); font-size: var(--nozomi-font-small); line-height: 1.6; }
@media (max-width: 540px) {
  .nz-document-grid { grid-template-columns: 1fr; }
  .nz-public-links a { min-height: 32px; }
}

@media (max-width: 960px) {
  ol.nz-gate-steps { grid-template-columns: 1fr; }
  .nz-gate-steps li:not(:last-child)::before { top: auto; bottom: calc(-0.75rem - 1px); left: 1.62rem; right: auto; width: 1px; height: 0.75rem; }
  .nz-explain-grid { grid-template-columns: 1fr 1fr; }
  .nz-explain-grid article:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .nz-public { padding-inline: 1rem; }
  .nz-public-header { top: 8px; width: calc(100% - 16px); min-height: 52px; margin-top: 8px; padding-left: 14px; }
  .nz-public-account span { display: none; }
  .nz-hero { padding-top: 2rem; }
  .nz-hero-visual { width: 132px; }
  .nz-hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .nz-hero-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .nz-trust-row { flex-direction: column; align-items: flex-start; }
  .nz-gate { padding: 1.25rem; }
  .nz-explain-grid { grid-template-columns: 1fr; }
  .nz-explain-grid article { min-height: 0; }
  .nz-explain-grid article:last-child { grid-column: auto; }
  .nz-access-card .nz-btn { align-self: stretch; }
}

/* ---------- Reduced motion (consolidated) ----------
   Every animated shared surface must be covered here; new motion features add
   their reduce path to this block. */
@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;
  }
  .nz-spinner { animation-duration: 1800ms !important; animation-iteration-count: infinite !important; }
  .nz-skeleton { animation: none !important; }
  .term-boot { opacity: 1 !important; transform: none !important; }
  .nz-hero-copy > *, .nz-hero-visual { opacity: 1 !important; animation: none !important; }
  :where(.nz-shell ~ main, .nz-page-enter) > * { animation: none !important; }
  .term-caret::after { animation: none !important; }
  .nz-gate-dot, .nz-gate-graph-ping { animation: none !important; }
  .nz-gate-graph-ping { opacity: 0; }
  .nz-workmeter-bar::-webkit-progress-value,
  .nz-workmeter-bar::-moz-progress-bar,
  .nz-workmeter-sweep::before { animation: none !important; }
}