@sekyro/elements 0.0.0-stage → 0.1.0-rc.0

package/dist/styles.css

@@ -0,0 +1,1475 @@
+/* @sekyro/react — plain CSS, logical properties only (ar/fr: RTL for free).
+ * Every painted color goes through a `--sekyro-*` token; the literal defaults
+ * below are the ONLY hex values in this file (scripts/check-css.mjs enforces
+ * both rules). They are the Sekyro AI brand (DEFAULT_THEME, from @sekyro/brand).
+ * SekyroThemeProvider overrides the tokens on `.sekyro-root`. */
+:root {
+  --sekyro-color-brand: #0d3b66;
+  --sekyro-color-brand-fg: #ffffff;
+  --sekyro-color-fg: #13141f;
+  --sekyro-color-fg-muted: #4e5270;
+  --sekyro-color-bg: #f6f7fb;
+  --sekyro-color-surface: #ffffff;
+  --sekyro-color-ring: #0d3b66;
+  --sekyro-color-danger: #ca0f07;
+  --sekyro-color-success: #007a5e;
+  --sekyro-color-warning: #735003;
+  --sekyro-radius: 16px;
+  --sekyro-font: "Sekyro Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Noto Sans", sans-serif;
+}
+
+.sekyro-root {
+  font-family: var(--sekyro-font);
+  color: var(--sekyro-color-fg);
+}
+
+/* ── layout ────────────────────────────────────────────────────────────── */
+.sekyro-capture {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  font-family: var(--sekyro-font);
+  color: var(--sekyro-color-fg);
+  box-sizing: border-box;
+}
+.sekyro-capture *,
+.sekyro-capture *::before,
+.sekyro-capture *::after {
+  box-sizing: inherit;
+}
+.sekyro-stack {
+  display: flex;
+  flex-direction: column;
+}
+.sekyro-stack--1 {
+  gap: 0.25rem;
+}
+.sekyro-stack--3 {
+  gap: 0.75rem;
+}
+.sekyro-stack--4 {
+  gap: 1rem;
+}
+.sekyro-hidden {
+  display: none;
+}
+.sekyro-text-body {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--sekyro-color-fg);
+}
+/* Secondary text only (notes, hints) — never essential instructions. */
+.sekyro-text-muted {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.45;
+  color: var(--sekyro-color-fg-muted);
+}
+.sekyro-coaching {
+  margin: 0;
+  padding-inline-start: 1.25rem;
+  list-style: disc;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.9375rem;
+  line-height: 1.45;
+  color: var(--sekyro-color-fg);
+}
+
+/* ── button ────────────────────────────────────────────────────────────── */
+.sekyro-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 48px;
+  min-width: 48px;
+  padding-block: 0.625rem;
+  padding-inline: 1.25rem;
+  border-radius: var(--sekyro-radius);
+  border: 1px solid transparent;
+  font: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25;
+  cursor: pointer;
+  text-align: center;
+  -webkit-tap-highlight-color: transparent;
+}
+.sekyro-btn:focus-visible {
+  outline: 3px solid var(--sekyro-color-ring);
+  outline-offset: 2px;
+}
+.sekyro-btn:disabled,
+.sekyro-btn[aria-disabled="true"] {
+  cursor: default;
+  opacity: 0.6;
+}
+/* Large bold text (≥ 18.66px / 700): the label reaches WCAG AAA at 4.5:1 on
+ * `brand`, so partner themes with an AA-only brand pair still pass 1.4.6. */
+.sekyro-btn--primary {
+  background: var(--sekyro-color-brand);
+  color: var(--sekyro-color-brand-fg);
+  font-size: 1.1875rem;
+  font-weight: 700;
+}
+/* Hover darkens THROUGH the tokens (brand → fg), so the label's contrast can
+ * only rise; a brightness filter would also dim the label itself. */
+.sekyro-btn--primary:hover {
+  background: color-mix(in srgb, var(--sekyro-color-brand) 92%, var(--sekyro-color-fg));
+}
+/* An aria-disabled (still focusable) primary does not react to hover. */
+.sekyro-btn--primary[aria-disabled="true"]:hover {
+  background: var(--sekyro-color-brand);
+}
+.sekyro-btn--ghost {
+  background: transparent;
+  color: var(--sekyro-color-fg);
+  border-color: color-mix(in srgb, var(--sekyro-color-fg) 30%, transparent);
+}
+.sekyro-btn--ghost:hover {
+  background: color-mix(in srgb, var(--sekyro-color-fg) 6%, transparent);
+}
+/* 48px round on-video icon chip (surface glyph on the fg scrim). */
+.sekyro-btn--chip {
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  border: 0;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--sekyro-color-fg) 70%, transparent);
+  color: var(--sekyro-color-surface);
+}
+.sekyro-btn--chip:hover {
+  background: color-mix(in srgb, var(--sekyro-color-fg) 80%, transparent);
+}
+.sekyro-btn--chip:focus-visible {
+  /* On the dark scrim the surface color is the high-contrast ring. */
+  outline-color: var(--sekyro-color-surface);
+}
+/* Spec 2026-11-06 §3.3: the capture mode switch, the chip widened to its icon and short label. */
+.sekyro-btn--chip.sekyro-stage__mode-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: auto;
+  min-height: 48px;
+  height: auto;
+  max-inline-size: calc(100% - 1.5rem);
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem 1rem;
+  text-align: start;
+}
+.sekyro-btn--full {
+  width: 100%;
+}
+.sekyro-btn--start {
+  align-self: flex-start;
+}
+.sekyro-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-inline: auto;
+}
+.sekyro-icon--sm {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin-inline: 0;
+}
+
+/* ── notice ────────────────────────────────────────────────────────────── */
+.sekyro-notice {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid;
+  border-radius: var(--sekyro-radius);
+  font-size: 0.9375rem;
+  line-height: 1.45;
+  color: var(--sekyro-color-fg);
+}
+.sekyro-notice--info {
+  border-color: var(--sekyro-color-brand);
+  background: color-mix(in srgb, var(--sekyro-color-brand) 8%, var(--sekyro-color-surface));
+}
+.sekyro-notice--warning {
+  border-color: var(--sekyro-color-warning);
+  background: color-mix(in srgb, var(--sekyro-color-warning) 10%, var(--sekyro-color-surface));
+}
+.sekyro-notice--danger {
+  border-color: var(--sekyro-color-danger);
+  background: color-mix(in srgb, var(--sekyro-color-danger) 8%, var(--sekyro-color-surface));
+}
+
+/* ── capture stage ─────────────────────────────────────────────────────── */
+/* Easing vars are SCOPED to the stage so they never leak into the host. */
+.sekyro-stage {
+  --sekyro-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --sekyro-ease-settle: cubic-bezier(0.34, 1.56, 0.64, 1);
+  position: relative;
+  margin-inline: auto;
+  aspect-ratio: 3 / 4;
+  width: 100%;
+  max-width: 24rem;
+  overflow: hidden;
+  border-radius: var(--sekyro-radius);
+  background: var(--sekyro-color-fg);
+}
+.sekyro-stage__video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* Mirror — direction-independent (RTL-safe). */
+  transform: scaleX(-1);
+}
+.sekyro-stage__still {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.sekyro-stage__arc {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.sekyro-stage__corner-start {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-start: 0.75rem;
+}
+.sekyro-stage__corner-end {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 0.75rem;
+}
+.sekyro-stage__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem;
+  border-radius: calc(var(--sekyro-radius) / 2);
+  background: color-mix(in srgb, var(--sekyro-color-fg) 80%, transparent);
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--sekyro-color-surface);
+}
+.sekyro-stage__guidance {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  margin: 0;
+  min-height: 2.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  background: color-mix(in srgb, var(--sekyro-color-fg) 80%, transparent);
+  text-align: center;
+  color: var(--sekyro-color-surface);
+}
+.sekyro-stage__guidance-text {
+  display: block;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+.sekyro-stage__guidance-hint {
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+/* Liveness v7 §4.4: while the screen-ramp wash lights the screen (screen-ramp-layer.tsx marks <html>), its cover fills
+ * the stage over the camera from the overlay slot; the scrim steps aside and the ring rises above the cover. The
+ * guidance band and the corners come after the slot, so they stay above it. */
+:root[data-sekyro-ramp] .sekyro-arc__scrim {
+  visibility: hidden;
+}
+:root[data-sekyro-ramp] .sekyro-stage__arc {
+  z-index: 1;
+}
+
+/* ── arc (SVG) ─────────────────────────────────────────────────────────── */
+.sekyro-arc__scrim {
+  transition: fill 300ms;
+}
+.sekyro-arc__ring {
+  transition: opacity 300ms;
+}
+.sekyro-arc__ring--dim {
+  opacity: 0.25;
+}
+.sekyro-arc__tick {
+  transition: stroke 200ms;
+}
+.sekyro-arc__guide {
+  transition: stroke 200ms;
+}
+.sekyro-arc__guide--spin {
+  stroke-dasharray: 12 10;
+}
+
+/* ── motion (ported from identity-hosted/app/globals.css:37-125) ───────── */
+/* Scene fade-in: guide + scrim settle in on stage mount. */
+.sekyro-capture-fade-in {
+  animation: sekyro-capture-fade-in 300ms var(--sekyro-ease-out, ease-out) both;
+}
+/* Guidance-line text swap. */
+.sekyro-capture-text-in {
+  animation: sekyro-capture-fade-in 150ms var(--sekyro-ease-out, ease-out) both;
+}
+/* Camera-off trust pill fade. */
+.sekyro-capture-pill-in {
+  animation: sekyro-capture-fade-in 200ms var(--sekyro-ease-out, ease-out) both;
+}
+/* Inward breathe while seeking — never expands past the gate. Origin MUST
+ * match the guide center or the circle orbits. */
+.sekyro-capture-breathe {
+  animation: sekyro-capture-breathe 2.8s ease-in-out infinite;
+  transform-origin: 150px 150px;
+}
+/* One-shot lock settle on entering `locked`. */
+.sekyro-capture-settle {
+  animation: sekyro-capture-settle 250ms var(--sekyro-ease-settle, ease-out);
+  transform-origin: 150px 150px;
+}
+/* Checking/recording spinner: the dashes CRAWL around the guide via
+ * stroke-dashoffset — NOT a CSS transform rotation: iOS Safari does not
+ * reliably animate transforms on SVG child elements. −616 = 28 × the 22px dash
+ * period per 2s cycle → seamless loop, one apparent lap ≈ 2s. */
+.sekyro-capture-ring-spin {
+  animation: sekyro-capture-ring-dash 2s linear infinite;
+}
+/* "Photo develops" — the captured still fades + settles in. */
+.sekyro-capture-develop {
+  animation: sekyro-capture-develop 400ms var(--sekyro-ease-out, ease-out) both;
+}
+/* Forced reduction (host hint, e.g. a LOW device profile): the reduced-motion
+ * variants even without prefers-reduced-motion. */
+.sekyro-capture-reduce .sekyro-capture-fade-in,
+.sekyro-capture-reduce .sekyro-capture-text-in,
+.sekyro-capture-reduce .sekyro-capture-pill-in,
+.sekyro-capture-reduce .sekyro-capture-breathe,
+.sekyro-capture-reduce .sekyro-capture-settle,
+.sekyro-capture-reduce .sekyro-capture-develop,
+.sekyro-capture-reduce .sekyro-capture-ring-spin {
+  animation: none;
+}
+.sekyro-capture-reduce .sekyro-arc__guide--spin {
+  stroke-dasharray: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sekyro-capture-fade-in,
+  .sekyro-capture-text-in,
+  .sekyro-capture-pill-in,
+  .sekyro-capture-breathe,
+  .sekyro-capture-settle,
+  .sekyro-capture-develop,
+  .sekyro-capture-ring-spin {
+    animation: none;
+  }
+  .sekyro-arc__scrim,
+  .sekyro-arc__ring,
+  .sekyro-arc__tick,
+  .sekyro-arc__guide {
+    transition: none;
+  }
+  /* Reduced motion → a static SOLID guide circle. */
+  .sekyro-arc__guide--spin {
+    stroke-dasharray: none;
+  }
+}
+
+@keyframes sekyro-capture-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes sekyro-capture-breathe {
+  50% {
+    transform: scale(0.985);
+    opacity: 0.85;
+  }
+}
+@keyframes sekyro-capture-settle {
+  0% {
+    transform: scale(1.03);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes sekyro-capture-ring-dash {
+  to {
+    stroke-dashoffset: -616;
+  }
+}
+@keyframes sekyro-capture-develop {
+  0% {
+    opacity: 0;
+    transform: scale(1.02);
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ── pre-capture screen ────────────────────────────────────────────────── */
+.sekyro-tips {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.875rem;
+  border: 1px solid color-mix(in srgb, var(--sekyro-color-fg) 14%, transparent);
+  border-radius: var(--sekyro-radius);
+  background: var(--sekyro-color-surface);
+}
+.sekyro-tips__title {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--sekyro-color-fg);
+}
+.sekyro-tips__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.sekyro-tips__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  font-size: 0.9375rem;
+  line-height: 1.45;
+  color: var(--sekyro-color-fg);
+}
+.sekyro-tips__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--sekyro-color-brand);
+  margin-block-start: 0.125rem;
+}
+.sekyro-permission {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.75rem;
+  border-radius: var(--sekyro-radius);
+  border: 1px solid color-mix(in srgb, var(--sekyro-color-fg) 14%, transparent);
+  font-size: 0.9375rem;
+  line-height: 1.45;
+  color: var(--sekyro-color-fg);
+}
+.sekyro-permission__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-block-start: 0.125rem;
+  color: var(--sekyro-color-fg-muted);
+}
+.sekyro-permission--granted .sekyro-permission__icon {
+  color: var(--sekyro-color-success);
+}
+.sekyro-permission--denied {
+  border-color: var(--sekyro-color-warning);
+  background: color-mix(in srgb, var(--sekyro-color-warning) 10%, var(--sekyro-color-surface));
+}
+.sekyro-permission--denied .sekyro-permission__icon {
+  color: var(--sekyro-color-warning);
+}
+/* Camera choice: native radios drawn as segments. The input covers its whole
+ * segment (hit area = the ≥ 48px face) but is transparent; the face is its
+ * next sibling, so checked/focus styles need no :has(). */
+.sekyro-segmented {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.sekyro-segmented__legend {
+  padding: 0;
+  margin-block-end: 0.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--sekyro-color-fg);
+}
+.sekyro-segmented__options {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+.sekyro-segmented__option {
+  position: relative;
+  display: flex;
+}
+.sekyro-segmented__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.sekyro-segmented__face {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 48px;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--sekyro-color-fg) 30%, transparent);
+  border-radius: var(--sekyro-radius);
+  background: var(--sekyro-color-surface);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: center;
+  color: var(--sekyro-color-fg);
+  pointer-events: none;
+}
+/* Radio dot: hollow ring → filled ring when checked (shape, not only color). */
+.sekyro-segmented__dot {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  border: 2px solid color-mix(in srgb, var(--sekyro-color-fg) 55%, transparent);
+}
+.sekyro-segmented__input:checked + .sekyro-segmented__face {
+  border-color: var(--sekyro-color-brand);
+  box-shadow: inset 0 0 0 1px var(--sekyro-color-brand);
+  background: color-mix(in srgb, var(--sekyro-color-brand) 8%, var(--sekyro-color-surface));
+}
+.sekyro-segmented__input:checked + .sekyro-segmented__face .sekyro-segmented__dot {
+  border-color: var(--sekyro-color-brand);
+  box-shadow: inset 0 0 0 3px var(--sekyro-color-surface);
+  background: var(--sekyro-color-brand);
+}
+.sekyro-segmented__input:focus-visible + .sekyro-segmented__face {
+  outline: 3px solid var(--sekyro-color-ring);
+  outline-offset: 2px;
+}
+.sekyro-segmented__option:hover .sekyro-segmented__face {
+  border-color: var(--sekyro-color-brand);
+}
+/* Voice switch: label + track/thumb; the thumb moves AND shows a check when on. */
+.sekyro-switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 48px;
+  padding-block: 0.25rem;
+  padding-inline: 0.25rem;
+  border: 0;
+  border-radius: var(--sekyro-radius);
+  background: transparent;
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1.4;
+  color: var(--sekyro-color-fg);
+  cursor: pointer;
+  text-align: start;
+  -webkit-tap-highlight-color: transparent;
+}
+.sekyro-switch:focus-visible {
+  outline: 3px solid var(--sekyro-color-ring);
+  outline-offset: 2px;
+}
+.sekyro-switch__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+}
+.sekyro-switch__track {
+  position: relative;
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--sekyro-color-fg) 55%, var(--sekyro-color-surface));
+  transition: background-color 150ms;
+}
+.sekyro-switch[aria-checked="true"] .sekyro-switch__track {
+  background: var(--sekyro-color-brand);
+}
+.sekyro-switch__thumb {
+  position: absolute;
+  inset-block-start: 0.1875rem;
+  inset-inline-start: 0.1875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 9999px;
+  background: var(--sekyro-color-surface);
+  color: var(--sekyro-color-brand);
+  transition: inset-inline-start 150ms;
+}
+.sekyro-switch[aria-checked="true"] .sekyro-switch__thumb {
+  inset-inline-start: 1.4375rem;
+}
+.sekyro-switch__check {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.sekyro-spinner {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  animation: sekyro-spin 0.9s linear infinite;
+}
+.sekyro-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+@keyframes sekyro-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.sekyro-capture-reduce .sekyro-spinner {
+  animation: none;
+}
+.sekyro-capture-reduce .sekyro-switch__track,
+.sekyro-capture-reduce .sekyro-switch__thumb {
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sekyro-spinner {
+    animation: none;
+  }
+  .sekyro-switch__track,
+  .sekyro-switch__thumb {
+    transition: none;
+  }
+}
+/* Windows high contrast: backgrounds are dropped → draw the switch and the
+ * checked segment with system colors so the state stays visible. */
+@media (forced-colors: active) {
+  .sekyro-switch__track {
+    border: 1px solid CanvasText;
+  }
+  .sekyro-switch__thumb {
+    background: CanvasText;
+  }
+  /* Checked = a thick Highlight border (not an outline, so the focus-visible
+   * outline still shows on the checked option). */
+  .sekyro-segmented__input:checked + .sekyro-segmented__face {
+    border: 3px solid Highlight;
+  }
+  /* The thumb is painted CanvasText: draw the check in Canvas so it stays visible. */
+  .sekyro-switch__check {
+    color: Canvas;
+  }
+  .sekyro-segmented__input:checked + .sekyro-segmented__face .sekyro-segmented__dot {
+    background: Highlight;
+  }
+}
+/* GENERATED by packages/sekyro-brand/scripts/build.mjs from tokens/tokens.json — do not edit.
+   The flow-* type roles of the verification flow (`font: var(--sekyro-type-flow-title) var(--sekyro-font)`), the
+   colours of its camera stages, its component sizes and its page transition. Prepended to dist/verification.css by tsup. */
+:root {
+  --sekyro-type-flow-hero: 600 28px/34px;
+  --sekyro-tracking-flow-hero: -0.015em;
+  --sekyro-type-flow-title: 600 24px/30px;
+  --sekyro-tracking-flow-title: -0.01em;
+  --sekyro-type-flow-camera: 600 24px/30px;
+  --sekyro-tracking-flow-camera: -0.01em;
+  --sekyro-type-flow-body: 400 17px/24px;
+  --sekyro-tracking-flow-body: -0.006em;
+  --sekyro-type-flow-action: 600 17px/22px;
+  --sekyro-tracking-flow-action: -0.006em;
+  --sekyro-type-flow-label: 500 15px/20px;
+  --sekyro-tracking-flow-label: 0;
+  --sekyro-type-flow-input: 500 22px/28px;
+  --sekyro-tracking-flow-input: 0;
+  --sekyro-type-flow-digit: 600 28px/34px;
+  --sekyro-tracking-flow-digit: 0;
+  --sekyro-type-flow-caption: 400 13px/18px;
+  --sekyro-tracking-flow-caption: 0;
+  --sekyro-color-stage: #051a2e;
+  --sekyro-color-stage-accent: #69dfef;
+  --sekyro-color-on-stage: #ffffff;
+  --sekyro-color-on-camera-success: #00c897;
+  --sekyro-color-stage-warning: #ffab00;
+  --sekyro-size-button-height: 52px;
+  --sekyro-size-control-radius: 10px;
+  --sekyro-size-card-radius: 16px;
+  --sekyro-size-field-radius: 10px;
+  --sekyro-size-icon-tile: 56px;
+  --sekyro-size-icon-tile-radius: 16px;
+  --sekyro-size-header-tile: 40px;
+  --sekyro-size-choice-tile: 40px;
+  --sekyro-size-tile-radius: 10px;
+  --sekyro-size-result-disc: 64px;
+  --sekyro-size-result-ring: 8px;
+  --sekyro-size-progress-height: 4px;
+  --sekyro-size-focus-ring: 2px;
+  --sekyro-size-focus-ring-offset: 2px;
+  --sekyro-size-otp-box: 60px;
+  --sekyro-size-choice-min-height: 76px;
+  --sekyro-size-step-gap: 32px;
+  --sekyro-size-heading-gap: 12px;
+  --sekyro-motion-page: 320ms;
+  --sekyro-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+}
+/* packages/sekyro-react/src/verification.css — @sekyro/react/verification.
+   Logical properties only; every color through a --sekyro-* variable (check-css). The type scale (--sekyro-type-flow-*)
+   and the camera colours (--sekyro-color-stage*) are generated from packages/sekyro-brand into generated/brand.css,
+   which tsup prepends to dist/verification.css. The flow is the native SDKs' design (sekyro-mobile/ios SekyroUI, the
+   2026-10-23 premium redesign): one heading per page, quiet secondary text, white fields with hairlines, one large
+   action in the thumb zone, a full-bleed camera under ink. */
+
+/* ── The SDK's faces (as on the native SDKs): Inter 400/500/600, Geist 600/700 for titles of 22 px and more,
+   Cairo 400/600/700 for Arabic (Latin-1 included). Static subset instances of the OFL variable fonts (renamed
+   "Sekyro …", see fonts/*-OFL.txt), woff2, built from sekyro-mobile/ios/Sources/SekyroUI/Resources/fonts with
+   fontTools. Separate assets (a bundler emits them next to this stylesheet), loaded only for the text that needs them
+   (unicode-range) and never blocking it (swap). ─────────────────────────────────────────────────────────────── */
+@font-face { font-family: "Sekyro Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/SekyroInter-Regular.woff2") format("woff2"); unicode-range: U+0000-017F, U+02BB-02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2713, U+FEFF; }
+@font-face { font-family: "Sekyro Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/SekyroInter-Medium.woff2") format("woff2"); unicode-range: U+0000-017F, U+02BB-02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2713, U+FEFF; }
+@font-face { font-family: "Sekyro Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/SekyroInter-SemiBold.woff2") format("woff2"); unicode-range: U+0000-017F, U+02BB-02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2713, U+FEFF; }
+@font-face { font-family: "Sekyro Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/SekyroGeist-SemiBold.woff2") format("woff2"); unicode-range: U+0000-017F, U+02BB-02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2713, U+FEFF; }
+@font-face { font-family: "Sekyro Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/SekyroGeist-Bold.woff2") format("woff2"); unicode-range: U+0000-017F, U+02BB-02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2713, U+FEFF; }
+@font-face { font-family: "Sekyro Cairo"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/SekyroCairo-Regular.woff2") format("woff2"); unicode-range: U+0020-00FF, U+0600-06FF, U+2013-2026, U+FB50-FDFF, U+FE70-FEFC; }
+@font-face { font-family: "Sekyro Cairo"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/SekyroCairo-SemiBold.woff2") format("woff2"); unicode-range: U+0020-00FF, U+0600-06FF, U+2013-2026, U+FB50-FDFF, U+FE70-FEFC; }
+@font-face { font-family: "Sekyro Cairo"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/SekyroCairo-Bold.woff2") format("woff2"); unicode-range: U+0020-00FF, U+0600-06FF, U+2013-2026, U+FB50-FDFF, U+FE70-FEFC; }
+
+/* ── Generic step parts (also used outside <SekyroVerification>) ─────────── */
+.sekyro-field { display: flex; flex-direction: column; gap: 0.5rem; }
+.sekyro-label { font-weight: 600; color: var(--sekyro-color-fg); }
+.sekyro-help { color: var(--sekyro-color-fg-muted); font-size: 0.875rem; }
+.sekyro-help.is-danger { color: var(--sekyro-color-danger); }
+.sekyro-input {
+  min-block-size: 48px;
+  padding-block: 0.625rem;
+  padding-inline: 0.875rem;
+  border: 1px solid var(--sekyro-color-fg-muted);
+  border-radius: var(--sekyro-radius);
+  background: var(--sekyro-color-surface);
+  color: var(--sekyro-color-fg);
+  font: inherit;
+  font-size: 1rem;
+}
+.sekyro-input:focus-visible { outline: 3px solid var(--sekyro-color-ring); outline-offset: 2px; }
+.sekyro-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.sekyro-test-code { font-weight: 600; color: var(--sekyro-color-fg); letter-spacing: 0.04em; }
+.sekyro-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
+.sekyro-center { text-align: center; }
+.sekyro-result { text-align: start; }
+
+/* ── The flow's surface ────────────────────────────────────────────────── */
+/* Arabic: Cairo (Latin-1 included), Inter after it for the rest of the Latin text. */
+:root { --sekyro-font-arabic: "Sekyro Cairo", Cairo, "Sekyro Inter", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif; }
+.sekyro-root {
+  /* Shades derived from the (possibly partner) theme on THIS element, so a partner brand recolours them too. */
+  --sekyro-color-brand-soft: color-mix(in srgb, var(--sekyro-color-brand) 9%, var(--sekyro-color-surface));
+  --sekyro-color-line: color-mix(in srgb, var(--sekyro-color-fg) 22%, var(--sekyro-color-surface));
+  --sekyro-color-line-strong: color-mix(in srgb, var(--sekyro-color-fg) 50%, var(--sekyro-color-surface));
+  --sekyro-color-line-subtle: color-mix(in srgb, var(--sekyro-color-fg) 11%, var(--sekyro-color-surface));
+  --sekyro-color-sunken: color-mix(in srgb, var(--sekyro-color-fg) 6%, var(--sekyro-color-surface));
+  --sekyro-color-fg-subtle: color-mix(in srgb, var(--sekyro-color-fg-muted) 80%, var(--sekyro-color-surface));
+  /* Titles of 22 px and more: Geist while the font is Sekyro's (set on the flow), else the theme's font. */
+  --sekyro-font-display: var(--sekyro-font);
+  --sekyro-gutter: 1.5rem;
+  --sekyro-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
+  --sekyro-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  /* UX refresh 2026-11-05 (prototype): cards keep the brand's 16 px whatever the partner's control radius (a "full"
+     partner radius makes pill buttons, never pill cards); the tiles and the page motion on the prototype's values. */
+  --sekyro-radius-card: var(--sekyro-size-card-radius);
+  --sekyro-radius-tile: var(--sekyro-size-icon-tile-radius);
+  --sekyro-focus: var(--sekyro-size-focus-ring) solid var(--sekyro-color-ring);
+  /* The soft status roles where the flow sets none (<SekyroVerification> sets them from generated/brand-flow.ts). */
+  --sekyro-color-info-soft-fallback: color-mix(in srgb, var(--sekyro-color-brand) 9%, var(--sekyro-color-surface));
+}
+/* The flow paints its own surface, so a dark scheme reads on any host page. */
+.sekyro-verification {
+  display: flex; flex-direction: column; background: var(--sekyro-color-surface); color-scheme: light;
+  /* No double-tap zoom on the flow's taps (pinch zoom stays: it is the host's and the person's). */
+  touch-action: manipulation;
+}
+.sekyro-verification--dark { color-scheme: dark; }
+.sekyro-flow {
+  --sekyro-inline-sign: 1;
+  display: flex; flex-direction: column; flex: 1; gap: 0.75rem;
+  padding-inline: var(--sekyro-gutter);
+  font: var(--sekyro-type-flow-body) var(--sekyro-font);
+  letter-spacing: var(--sekyro-tracking-flow-body);
+  font-optical-sizing: auto;
+}
+.sekyro-flow[dir="rtl"] { --sekyro-inline-sign: -1; }
+.sekyro-verification.is-immersive { background: var(--sekyro-color-stage); }
+.sekyro-verification.is-immersive .sekyro-flow { gap: 0; }
+/* Sizes are outer sizes (a 52px field is 52px with its padding and border), as in the native kits. */
+.sekyro-root :is(.sekyro-input, .sekyro-btn, .sekyro-card, .sekyro-phone, .sekyro-otp-box, .sekyro-org__tile, .sekyro-glass) { box-sizing: border-box; }
+/* Arabic: Cairo first, tracking reset (joined letters must not part), taller lines for its marks. */
+.sekyro-root [lang="ar"] { font-family: var(--sekyro-font-arabic); }
+.sekyro-root [lang="ar"] * { letter-spacing: 0 !important; }
+/* A step title takes focus on mount so screen readers announce it; it is not a control, so it draws no ring. */
+.sekyro-root [tabindex="-1"]:focus { outline: none; }
+
+/* ── Shell: the partner bar, the thin step progress, the footer ───────── */
+/* The prototype's header: a 40 px tile (logo or initials on brand-soft), the name on title-sm, the caption under it,
+   a line-subtle hairline across the whole flow. */
+.sekyro-org {
+  display: flex; align-items: center; gap: 0.75rem; padding-block: 0.75rem;
+  margin-inline: calc(-1 * var(--sekyro-gutter)); padding-inline: var(--sekyro-gutter);
+  border-block-end: 1px solid var(--sekyro-color-line-subtle);
+}
+.sekyro-org__tile {
+  display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden;
+  inline-size: var(--sekyro-size-header-tile); block-size: var(--sekyro-size-header-tile); border-radius: var(--sekyro-size-tile-radius);
+  background: var(--sekyro-color-brand-soft); color: var(--sekyro-color-brand);
+  font: var(--sekyro-type-flow-label) var(--sekyro-font); font-weight: 700;
+}
+.sekyro-org__logo { inline-size: 100%; block-size: 100%; padding: 4px; object-fit: contain; box-sizing: border-box; }
+.sekyro-org__text { flex: 1; min-inline-size: 0; }
+/* plaintext: a Latin org name on an Arabic page is cut at its own end, not its start. */
+.sekyro-org__name { margin: 0; font: var(--sekyro-type-flow-action) var(--sekyro-font); color: var(--sekyro-color-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: match-parent; }
+/* The close: a 36 px sunken disc in a 44 px target, its disc on the gutter (mirrored in Arabic by the flex row). */
+.sekyro-org__end { flex-shrink: 0; display: flex; align-items: center; }
+.sekyro-org__close { flex-shrink: 0; margin-inline-end: -4px; }
+/* The back disc before the tile; its chevron points to the start, so it turns round in Arabic. */
+.sekyro-org__back { flex-shrink: 0; margin-inline-start: -4px; }
+.sekyro-flow[dir="rtl"] .sekyro-org__back .sekyro-glyph { transform: scaleX(-1); }
+/* A phone keeps room for the name: with a back disc the org tile steps aside (the name still says who asks). */
+@media (max-width: 430px) { .sekyro-org__back + .sekyro-org__tile { display: none; } }
+.sekyro-org__sub { margin: 0; font: var(--sekyro-type-flow-caption) var(--sekyro-font); color: var(--sekyro-color-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sekyro-progress { margin: 0; }
+.sekyro-progress__bars { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.sekyro-progress__bar { position: relative; flex: 1; block-size: var(--sekyro-size-progress-height); overflow: hidden; border-radius: 9999px; background: var(--sekyro-color-line-subtle); }
+.sekyro-progress__bar::before {
+  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0;
+  border-radius: inherit; background: var(--sekyro-color-brand); transition: inline-size 450ms var(--sekyro-ease);
+}
+.sekyro-progress__bar.is-done::before { inline-size: 100%; }
+/* The current step is under way, not done: the brand at 70 %. */
+.sekyro-progress__bar.is-current::before { inline-size: 100%; background: color-mix(in srgb, var(--sekyro-color-brand) 70%, transparent); }
+.sekyro-footer {
+  display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin: 0; padding-block: 1rem 0.5rem;
+  font: var(--sekyro-type-flow-caption) var(--sekyro-font); color: var(--sekyro-color-fg-muted);
+}
+.sekyro-footer .sekyro-glyph { inline-size: 0.75rem; block-size: 0.75rem; }
+/* D16: the attribution is a link to sekyro.ai: the muted caption (its contrast holds), underlined on hover, the
+   focus ring of every control. */
+a.sekyro-footer { text-decoration: none; border-radius: 0.25rem; }
+a.sekyro-footer:hover { text-decoration: underline; text-underline-offset: 0.2em; }
+a.sekyro-footer:focus-visible { outline: var(--sekyro-focus); outline-offset: 2px; }
+.sekyro-glyph { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; fill: none; }
+
+/* ── Pages: one at a time, rising into place ───────────────────────────── */
+.sekyro-page { display: flex; flex-direction: column; flex: 1; min-block-size: 0; transition: opacity 100ms ease-out; }
+.sekyro-page.is-leaving { opacity: 0; pointer-events: none; }
+.sekyro-page > * { animation: sekyro-rise var(--sekyro-motion-page) var(--sekyro-ease-out) 40ms both; }
+@keyframes sekyro-rise { from { opacity: 0; transform: translateY(10px); } }
+.sekyro-step { display: flex; flex-direction: column; flex: 1; gap: var(--sekyro-size-step-gap); padding-block-start: 1.5rem; }
+.sekyro-heading { display: flex; flex-direction: column; gap: var(--sekyro-size-heading-gap); }
+.sekyro-root .sekyro-heading > h2,
+.sekyro-root .sekyro-heading > h1 {
+  margin: 0; font: var(--sekyro-type-flow-title) var(--sekyro-font-display); letter-spacing: var(--sekyro-tracking-flow-title);
+  color: var(--sekyro-color-fg); text-wrap: balance;
+}
+.sekyro-root .sekyro-heading > p { margin: 0; font: var(--sekyro-type-flow-body) var(--sekyro-font); letter-spacing: var(--sekyro-tracking-flow-body); color: var(--sekyro-color-fg-muted); }
+.sekyro-root [lang="ar"] .sekyro-heading > :is(h1, h2) { font-family: var(--sekyro-font-arabic); line-height: 1.4; }
+.sekyro-root [lang="ar"] .sekyro-heading > p { font-family: var(--sekyro-font-arabic); line-height: 1.6; }
+/* Other titles in the flow (processing, unsupported, the 0.1 method screen) on the same scale. */
+.sekyro-root :is(h1, h2).sekyro-text-body { font: var(--sekyro-type-flow-title) var(--sekyro-font-display); letter-spacing: var(--sekyro-tracking-flow-title); }
+.sekyro-root [lang="ar"] :is(h1, h2).sekyro-text-body { font-family: var(--sekyro-font-arabic); line-height: 1.4; }
+
+/* The page's actions, pinned in the thumb zone; the consent line under them (decision 1). */
+.sekyro-actions {
+  position: sticky; inset-block-end: 0; z-index: 1;
+  display: flex; flex-direction: column; gap: 0.75rem; margin-block-start: auto; padding-block: 0.75rem 0.25rem;
+  background: var(--sekyro-color-surface);
+}
+/* The consent line: a caption, centred under the actions (or after a page without any). */
+.sekyro-consent { margin: 0; padding-block: 0.25rem; }
+.sekyro-consent__line { margin: 0; text-align: center; font: var(--sekyro-type-flow-caption) var(--sekyro-font); color: var(--sekyro-color-fg-muted); text-wrap: balance; }
+.sekyro-root .sekyro-link.sekyro-link--inline { align-self: auto; min-block-size: 0; padding-block: 0.375rem; font: inherit; color: var(--sekyro-color-brand); text-decoration: underline; text-underline-offset: 0.2em; }
+.sekyro-actions:empty { display: none; }
+.sekyro-actions__group { display: flex; flex-direction: column; gap: 0.75rem; }
+.sekyro-actions__group > .sekyro-label { font: var(--sekyro-type-flow-label) var(--sekyro-font); color: var(--sekyro-color-fg-muted); margin: 0; }
+
+/* Buttons (prototype): 52 px, the partner's control radius (10 px by default), the flow's action type. Primary is the
+   brand fill; secondary is outlined; ghost is a quiet brand text action; danger fills with the danger role. A disabled
+   primary is the brand at 40 %. */
+.sekyro-root .sekyro-btn {
+  min-block-size: var(--sekyro-size-button-height); gap: 0.5rem; padding-inline: 1.5rem; border-radius: var(--sekyro-radius);
+  font: var(--sekyro-type-flow-action) var(--sekyro-font); letter-spacing: var(--sekyro-tracking-flow-action);
+  transition: background-color 150ms, border-color 150ms, transform 250ms var(--sekyro-spring);
+}
+.sekyro-root .sekyro-btn:focus-visible { outline: var(--sekyro-focus); outline-offset: 2px; }
+.sekyro-root .sekyro-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.97); }
+.sekyro-root .sekyro-btn--primary:disabled {
+  opacity: 1;
+  background: color-mix(in srgb, var(--sekyro-color-brand) 40%, var(--sekyro-color-surface));
+  color: var(--sekyro-color-brand-fg);
+}
+.sekyro-root .sekyro-btn--secondary { border-color: var(--sekyro-color-line); background: var(--sekyro-color-surface); color: var(--sekyro-color-fg); }
+.sekyro-root .sekyro-btn--secondary:hover { background: var(--sekyro-color-sunken); }
+.sekyro-root .sekyro-btn--secondary:disabled { opacity: 1; color: var(--sekyro-color-fg-subtle); }
+.sekyro-root .sekyro-btn--ghost { border-color: transparent; background: transparent; color: var(--sekyro-color-brand); }
+.sekyro-root .sekyro-btn--ghost:hover { background: var(--sekyro-color-brand-soft); }
+.sekyro-root .sekyro-btn--ghost:disabled { opacity: 1; color: var(--sekyro-color-fg-subtle); }
+.sekyro-root .sekyro-btn--danger { border-color: transparent; background: var(--sekyro-color-danger); color: var(--sekyro-color-on-danger, var(--sekyro-color-surface)); }
+.sekyro-root .sekyro-btn--danger:hover { background: color-mix(in srgb, var(--sekyro-color-danger) 90%, var(--sekyro-color-fg)); }
+.sekyro-root .sekyro-btn[aria-busy="true"]::after {
+  content: ""; inline-size: 1rem; block-size: 1rem; border-radius: 50%;
+  border: 2px solid currentColor; border-inline-end-color: transparent; animation: sekyro-turn 0.9s linear infinite;
+}
+@keyframes sekyro-turn { to { transform: rotate(360deg); } }
+/* A quiet text action (resend, change number, change document): the brand on the label type, a 44 px target. */
+.sekyro-link {
+  align-self: flex-start; min-block-size: 44px; padding: 0; border: 0; background: none; cursor: pointer;
+  font: var(--sekyro-type-flow-label) var(--sekyro-font); color: var(--sekyro-color-brand);
+}
+.sekyro-link:disabled { cursor: default; color: var(--sekyro-color-fg-muted); }
+.sekyro-links { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }
+.sekyro-otp-expiry { margin-block-start: 4px; }
+.sekyro-resend { align-self: center; padding-inline: 0.5rem; font: var(--sekyro-type-flow-label) var(--sekyro-font); }
+.sekyro-resend:disabled { color: var(--sekyro-color-fg-muted); cursor: default; }
+p.sekyro-resend { display: flex; align-items: center; min-block-size: 44px; margin: 0; color: var(--sekyro-color-fg-muted); font-variant-numeric: tabular-nums; }
+.sekyro-resend-row { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1.5rem; }
+.sekyro-resend-row > .sekyro-resend { align-self: center; }
+.sekyro-link:focus-visible, .sekyro-card:focus-visible, .sekyro-row-btn:focus-visible, .sekyro-reference:focus-visible { outline: var(--sekyro-focus); outline-offset: 2px; }
+
+/* Notices (as on the native SDKs): a soft tint, the tone's -fg text, the tone's icon at the start; no border. On a
+   partner page the soft surfaces come from the chosen standard status set (set by the flow). */
+.sekyro-root .sekyro-notice {
+  border-color: transparent; border-radius: var(--sekyro-radius-card); padding: 0.875rem 1rem;
+  font: var(--sekyro-type-flow-label) var(--sekyro-font);
+}
+.sekyro-root .sekyro-notice:has(> .sekyro-notice__icon) { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
+.sekyro-notice__icon { display: inline-grid; flex-shrink: 0; padding-block-start: 1px; }
+.sekyro-notice__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-inline-size: 0; }
+.sekyro-root .sekyro-notice--info { background: var(--sekyro-color-info-soft, var(--sekyro-color-info-soft-fallback)); color: var(--sekyro-color-info-fg, var(--sekyro-color-fg)); }
+.sekyro-root .sekyro-notice--warning { background: var(--sekyro-color-warning-soft, color-mix(in srgb, var(--sekyro-color-warning) 10%, var(--sekyro-color-surface))); color: var(--sekyro-color-warning-fg, var(--sekyro-color-fg)); }
+.sekyro-root .sekyro-notice--danger { background: var(--sekyro-color-danger-soft, color-mix(in srgb, var(--sekyro-color-danger) 8%, var(--sekyro-color-surface))); color: var(--sekyro-color-danger-fg, var(--sekyro-color-fg)); }
+.sekyro-root .sekyro-notice .sekyro-btn { align-self: flex-start; min-block-size: 44px; }
+
+/* ── Fields: white with a hairline; a 2px ring on focus (red with an error) ── */
+.sekyro-root .sekyro-label { font: var(--sekyro-type-flow-label) var(--sekyro-font); color: var(--sekyro-color-fg-muted); }
+.sekyro-root .sekyro-help { font: var(--sekyro-type-flow-caption) var(--sekyro-font); }
+.sekyro-root .sekyro-help.is-danger { color: var(--sekyro-color-danger); }
+.sekyro-root .sekyro-input {
+  min-block-size: 52px; padding-inline: 1rem;
+  border-color: var(--sekyro-color-line); border-radius: var(--sekyro-radius); background: var(--sekyro-color-surface);
+  /* The input role (17 px): iOS Safari zooms into any focused field under 16 px (the body role is 15 px). */
+  font: var(--sekyro-type-flow-input) var(--sekyro-font);
+  transition: border-color 150ms, box-shadow 150ms;
+}
+.sekyro-root .sekyro-input::placeholder, .sekyro-phone__input::placeholder { color: var(--sekyro-color-fg-subtle); }
+.sekyro-root .sekyro-input:focus-visible,
+.sekyro-phone:focus-within {
+  outline: none; border-color: var(--sekyro-color-ring); box-shadow: inset 0 0 0 1px var(--sekyro-color-ring);
+}
+.sekyro-root .sekyro-input[aria-invalid="true"] { border-color: var(--sekyro-color-danger); box-shadow: inset 0 0 0 1px var(--sekyro-color-danger); }
+.sekyro-root .sekyro-input--number { font: var(--sekyro-type-flow-input) var(--sekyro-font-display); font-variant-numeric: tabular-nums; direction: ltr; }
+/* The phone: 🇲🇷 +222 as a fixed segment, then the national number large and tabular. */
+.sekyro-phone {
+  display: flex; align-items: center; gap: 0.75rem; min-block-size: 60px; padding-inline: 1rem;
+  border: 1px solid var(--sekyro-color-line); border-radius: var(--sekyro-radius); background: var(--sekyro-color-surface);
+  font: var(--sekyro-type-flow-input) var(--sekyro-font-display); font-variant-numeric: tabular-nums;
+  transition: border-color 150ms, box-shadow 150ms; cursor: text;
+}
+.sekyro-phone:has([aria-invalid="true"]) { border-color: var(--sekyro-color-danger); box-shadow: inset 0 0 0 1px var(--sekyro-color-danger); }
+.sekyro-phone__lead { position: relative; display: flex; flex: none; align-items: center; align-self: stretch; margin-inline-start: -1rem; padding-inline-start: 1rem; }
+.sekyro-phone__dial { display: inline-flex; align-items: center; gap: 6px; padding-inline-end: 0.75rem; border-inline-end: 1px solid var(--sekyro-color-line); color: var(--sekyro-color-fg); }
+.sekyro-phone__flag { font-size: 1.25rem; line-height: 1; }
+/* Several contact countries (person data spec Q16): a native select, transparent, over the whole segment from the field's edge. 17 px text keeps iOS from zooming on focus. */
+.sekyro-phone__country {
+  position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; margin: 0; padding: 0;
+  border: 0; opacity: 0; appearance: none; cursor: pointer;
+  font: var(--sekyro-type-flow-input) var(--sekyro-font);
+}
+/* The chevron is drawn here so the JS bundle carries no extra icon; the tighter segment keeps nine digits in view at 320 px. */
+.sekyro-phone:has(.sekyro-phone__country) { padding-inline-end: 0.5rem; }
+/* Nine grouped digits stay in view beside the chevron on the narrowest phones (phone rules spec 2026-11-02 §4.1). */
+@media (max-width: 359px) { .sekyro-phone:has(.sekyro-phone__country) { gap: 0.5rem; padding-inline-end: 0.25rem; } }
+.sekyro-phone__country + .sekyro-phone__dial { gap: 4px; padding-inline-end: 0.5rem; }
+.sekyro-phone__country + .sekyro-phone__dial::after {
+  content: ""; inline-size: 7px; block-size: 7px; margin-block-start: -4px; margin-inline-start: 2px;
+  border-block-end: 1.5px solid var(--sekyro-color-fg-muted); border-inline-end: 1.5px solid var(--sekyro-color-fg-muted);
+  transform: rotate(45deg);
+}
+.sekyro-phone__country:focus-visible + .sekyro-phone__dial { border-radius: 4px; outline: 2px solid var(--sekyro-color-ring); outline-offset: 2px; }
+.sekyro-phone__input {
+  flex: 1; min-inline-size: 0; padding: 0; border: 0; outline: none; background: transparent;
+  font: inherit; font-variant-numeric: tabular-nums; color: var(--sekyro-color-fg); caret-color: var(--sekyro-color-brand);
+}
+
+/* The one-time code: full-width boxes over ONE input (paste and autofill land in it). */
+.sekyro-otp-boxes { position: relative; }
+.sekyro-otp-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
+.sekyro-otp-row.is-shaking { animation: sekyro-shake 400ms linear; }
+@keyframes sekyro-shake {
+  20% { transform: translateX(calc(8px * var(--sekyro-inline-sign))); }
+  40% { transform: translateX(calc(-8px * var(--sekyro-inline-sign))); }
+  60% { transform: translateX(calc(6px * var(--sekyro-inline-sign))); }
+  80% { transform: translateX(calc(-4px * var(--sekyro-inline-sign))); }
+}
+.sekyro-otp-box {
+  position: relative; display: grid; place-items: center; block-size: var(--sekyro-size-otp-box);
+  /* The control radius, capped: a partner's pill radius would turn the boxes into circles. */
+  border: 1px solid var(--sekyro-color-line); border-radius: min(var(--sekyro-radius), var(--sekyro-size-card-radius)); background: var(--sekyro-color-surface);
+  font: var(--sekyro-type-flow-digit) var(--sekyro-font-display); font-variant-numeric: tabular-nums; color: var(--sekyro-color-fg);
+  transition: border-color 150ms, box-shadow 150ms;
+}
+.sekyro-otp-box.is-filled { border-color: var(--sekyro-color-line-strong); }
+.sekyro-otp-box.is-current { border-color: var(--sekyro-color-ring); box-shadow: inset 0 0 0 1px var(--sekyro-color-ring); }
+.sekyro-otp-box.is-current:empty::after {
+  content: ""; inline-size: 2px; block-size: 26px; background: var(--sekyro-color-brand); animation: sekyro-caret 1.06s steps(1) infinite;
+}
+@keyframes sekyro-caret { 50% { opacity: 0; } }
+.sekyro-otp-box.is-invalid { border-color: var(--sekyro-color-danger); box-shadow: inset 0 0 0 1px var(--sekyro-color-danger); }
+.sekyro-otp-digit { animation: sekyro-pop 280ms var(--sekyro-spring) both; }
+@keyframes sekyro-pop { from { opacity: 0; transform: scale(0.6); } }
+.sekyro-otp-boxes .sekyro-input--code {
+  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; min-block-size: 0;
+  padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; letter-spacing: 0;
+  /* Invisible, but 16px: iOS Safari zooms the page into any focused field whose text is smaller. */
+  font-size: 16px;
+}
+.sekyro-otp-boxes .sekyro-input--code:focus-visible { outline: none; box-shadow: none; }
+
+/* ── Choices: quiet cards with a radio that fills once chosen; tap rows ── */
+.sekyro-choices { display: flex; flex-direction: column; gap: 0.75rem; }
+/* Choice cards (prototype): a 40 px icon tile (line-subtle, brand-soft once chosen), the label and caption, the radio;
+   the card radius is the brand's 16 px (never the partner's control radius); chosen = a brand border. */
+.sekyro-card {
+  display: flex; align-items: center; gap: 0.875rem; inline-size: 100%; min-block-size: var(--sekyro-size-choice-min-height); padding-block: 0.75rem; padding-inline: 1rem;
+  border: 1px solid var(--sekyro-color-line); border-radius: var(--sekyro-radius-card); background: var(--sekyro-color-surface);
+  color: var(--sekyro-color-fg); font: inherit; text-align: start; cursor: pointer;
+  transition: border-color 150ms, background-color 150ms, box-shadow 150ms, transform 250ms var(--sekyro-spring);
+}
+.sekyro-card:active { transform: scale(0.98); }
+.sekyro-card:disabled { cursor: default; }
+.sekyro-card__tile {
+  display: inline-grid; place-items: center; flex-shrink: 0; inline-size: var(--sekyro-size-choice-tile); block-size: var(--sekyro-size-choice-tile);
+  border-radius: var(--sekyro-size-tile-radius); background: var(--sekyro-color-line-subtle); color: var(--sekyro-color-fg-muted); transition: background-color 150ms, color 150ms;
+}
+.sekyro-card__tile > .sekyro-glyph { inline-size: 22px; block-size: 22px; }
+.sekyro-card:hover:not(:disabled) { border-color: var(--sekyro-color-line-strong); }
+.sekyro-card__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
+.sekyro-card__title { font: var(--sekyro-type-flow-action) var(--sekyro-font); }
+.sekyro-card__sub { font: var(--sekyro-type-flow-caption) var(--sekyro-font); color: var(--sekyro-color-fg-muted); }
+.sekyro-radio { position: relative; flex-shrink: 0; inline-size: 22px; block-size: 22px; border-radius: 50%; border: 1.5px solid var(--sekyro-color-fg-subtle); box-sizing: border-box; }
+.sekyro-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--sekyro-color-brand); transform: scale(0.2); opacity: 0; transition: transform 300ms var(--sekyro-spring), opacity 150ms; }
+.sekyro-card[aria-pressed="true"] { border-color: var(--sekyro-color-line-brand, var(--sekyro-color-brand)); box-shadow: inset 0 0 0 1px var(--sekyro-color-line-brand, var(--sekyro-color-brand)); }
+.sekyro-card[aria-pressed="true"] .sekyro-card__tile { background: var(--sekyro-color-brand-soft); color: var(--sekyro-color-brand); }
+.sekyro-card[aria-pressed="true"] .sekyro-radio { border-color: var(--sekyro-color-brand); }
+.sekyro-card[aria-pressed="true"] .sekyro-radio::after { transform: scale(1); opacity: 1; }
+@media (prefers-reduced-motion: reduce) { .sekyro-card, .sekyro-radio::after { transition: none; } }
+.sekyro-rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--sekyro-color-line-subtle); border-radius: var(--sekyro-radius-card); overflow: hidden; }
+.sekyro-rows > li + li { border-block-start: 1px solid var(--sekyro-color-line-subtle); }
+.sekyro-row-btn {
+  display: flex; align-items: center; gap: 0.75rem; inline-size: 100%; min-block-size: 52px; padding-inline: 1rem;
+  border: 0; background: var(--sekyro-color-surface); color: var(--sekyro-color-fg); font: inherit; text-align: start; cursor: pointer;
+}
+.sekyro-row-btn:active { background: var(--sekyro-color-sunken); }
+.sekyro-row-btn::after {
+  content: ""; margin-inline-start: auto; inline-size: 7px; block-size: 7px;
+  border-block-start: 1.5px solid var(--sekyro-color-fg-subtle); border-inline-end: 1.5px solid var(--sekyro-color-fg-subtle);
+  transform: rotate(calc(45deg * var(--sekyro-inline-sign)));
+}
+.sekyro-row-btn__flag { font-size: 1.375rem; line-height: 1; }
+
+/* A small label over a group (the ICAO tips' "For your ID photo:"). */
+.sekyro-section-label { margin: 0; font: var(--sekyro-type-flow-label) var(--sekyro-font); color: var(--sekyro-color-fg-muted); }
+
+/* Tips: a line icon, then the words, unboxed. */
+.sekyro-tiprows { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
+.sekyro-tiprows > li { display: flex; align-items: center; gap: 1rem; }
+.sekyro-tiprows .sekyro-glyph { inline-size: 22px; block-size: 22px; color: var(--sekyro-color-fg-muted); }
+
+.sekyro-disc {
+  display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 4px; border: 0; border-radius: 50%;
+  background: var(--sekyro-color-sunken); background-clip: content-box; color: var(--sekyro-color-fg); cursor: pointer;
+}
+.sekyro-disc .sekyro-glyph { inline-size: 18px; block-size: 18px; }
+
+/* ── The camera intros' marks: line geometry of what the camera will do ── */
+.sekyro-mark { display: block; margin-inline: auto; overflow: visible; }
+.sekyro-mark--card { inline-size: min(100%, 15.75rem); margin-block: 0.75rem; }
+.sekyro-mark--face { inline-size: 10.5rem; }
+.sekyro-mark__card { fill: var(--sekyro-color-surface); stroke: var(--sekyro-color-line); stroke-width: 1; }
+.sekyro-mark__photo { fill: var(--sekyro-color-sunken); }
+.sekyro-mark__text { fill: var(--sekyro-color-line-subtle); }
+.sekyro-mark__brackets { fill: none; stroke: var(--sekyro-color-brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
+.sekyro-mark__beam { fill: var(--sekyro-color-stage-accent); filter: drop-shadow(0 0 3px var(--sekyro-color-stage-accent)); }
+/* The card does not mirror in Arabic (a physical card reads left to right): the line crosses it left to right. */
+.sekyro-mark__read { animation: sekyro-mark-read 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s infinite; }
+@keyframes sekyro-mark-read { from { transform: translate(0, 0); } 70%, to { transform: translate(var(--sekyro-read-w), 0); } }
+.sekyro-mark__line { stroke: var(--sekyro-color-line); stroke-width: 1; }
+.sekyro-mark__face { fill: none; stroke: var(--sekyro-color-brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
+.sekyro-mark__ticks { fill: none; stroke: var(--sekyro-color-line); stroke-width: 10; stroke-dasharray: 0.26 0.74; }
+.sekyro-mark__ticks--light { stroke: var(--sekyro-color-stage-accent); }
+.sekyro-mark__arc { stroke-dasharray: 0.22 0.78; animation: sekyro-arc 2.4s linear infinite; }
+@keyframes sekyro-arc { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
+
+/* ── The outcome (prototype): the approved disc in its ring, or a soft status tile; title-lg; the reference ── */
+.sekyro-root .sekyro-result { display: flex; flex-direction: column; flex: 1; padding-block-start: 2rem; }
+.sekyro-result__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; flex: 1; padding-block-end: 2rem; text-align: center; }
+.sekyro-root .sekyro-result .sekyro-heading { align-items: center; }
+/* The approved disc (64 px) in its soft ring (8 px each side). */
+.sekyro-outcome { inline-size: calc(var(--sekyro-size-result-disc) + 2 * var(--sekyro-size-result-ring)); block-size: calc(var(--sekyro-size-result-disc) + 2 * var(--sekyro-size-result-ring)); }
+.sekyro-outcome__ring { fill: var(--sekyro-color-success-soft, color-mix(in srgb, var(--sekyro-color-success) 14%, var(--sekyro-color-surface))); transform-origin: center; transform-box: fill-box; animation: sekyro-fill 380ms var(--sekyro-spring) both; }
+.sekyro-outcome__disc { fill: var(--sekyro-color-success); transform-origin: center; transform-box: fill-box; animation: sekyro-fill 380ms var(--sekyro-spring) 120ms both; }
+@keyframes sekyro-fill { from { opacity: 0; transform: scale(0.86); } }
+.sekyro-outcome__glyph {
+  fill: none; stroke: var(--sekyro-color-on-success, var(--sekyro-color-surface)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
+  stroke-dasharray: 1; stroke-dashoffset: 1; animation: sekyro-draw 320ms ease-out 380ms forwards;
+}
+@keyframes sekyro-draw { to { stroke-dashoffset: 0; } }
+.sekyro-outcome-tile { animation: sekyro-fill 380ms var(--sekyro-spring) both; }
+
+/* ── The status block (prototype): a soft 56 px tile and its Solar icon, the title, the lines; centred ───── */
+.sekyro-tile {
+  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
+  inline-size: var(--sekyro-size-icon-tile); block-size: var(--sekyro-size-icon-tile); border-radius: var(--sekyro-radius-tile);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sekyro-color-fg) 5%, transparent);
+}
+.sekyro-tile > .sekyro-glyph { inline-size: 32px; block-size: 32px; }
+.sekyro-tile--neutral { background: var(--sekyro-color-line-subtle); color: var(--sekyro-color-fg-muted); }
+.sekyro-tile--brand { background: var(--sekyro-color-brand-soft); color: var(--sekyro-color-brand); }
+.sekyro-tile--info { background: var(--sekyro-color-info-soft, var(--sekyro-color-info-soft-fallback)); color: var(--sekyro-color-info-fg, var(--sekyro-color-brand)); }
+.sekyro-tile--warning { background: var(--sekyro-color-warning-soft, color-mix(in srgb, var(--sekyro-color-warning) 12%, var(--sekyro-color-surface))); color: var(--sekyro-color-warning-fg, var(--sekyro-color-warning)); }
+.sekyro-tile--success { background: var(--sekyro-color-success-soft, color-mix(in srgb, var(--sekyro-color-success) 14%, var(--sekyro-color-surface))); color: var(--sekyro-color-success-fg, var(--sekyro-color-success)); }
+/* Still working: the tile breathes (a soft halo of its own colour grows and fades). */
+.sekyro-tile.is-busy { animation: sekyro-breathe 1.6s ease-in-out infinite; }
+@keyframes sekyro-breathe {
+  0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sekyro-color-fg) 5%, transparent), 0 0 0 0 var(--sekyro-color-brand-soft); }
+  50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sekyro-color-fg) 5%, transparent), 0 0 0 10px var(--sekyro-color-brand-soft); }
+}
+.sekyro-status__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; flex: 1; padding-block: 1rem 2rem; text-align: center; }
+.sekyro-root .sekyro-status__text { align-items: center; max-inline-size: 26rem; }
+.sekyro-status__text .sekyro-notice { text-align: start; align-self: stretch; }
+
+/* The loading page: quiet bars where the page will be. */
+.sekyro-skeleton { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.5rem; }
+.sekyro-skeleton__bar { display: block; block-size: 1.25rem; inline-size: 100%; border-radius: 9999px; background: var(--sekyro-color-sunken); animation: sekyro-pulse 1.4s ease-in-out infinite; }
+.sekyro-skeleton__bar.is-title { block-size: 2rem; inline-size: 80%; }
+.sekyro-skeleton__bar.is-short { inline-size: 60%; }
+.sekyro-skeleton__bar.is-block { block-size: 10rem; margin-block-start: 1.5rem; border-radius: var(--sekyro-radius-card); }
+@keyframes sekyro-pulse { 50% { opacity: 0.55; } }
+
+/* ── The modal (terms, leave): a bottom sheet on a phone, centred from 40rem ── */
+.sekyro-dialog {
+  box-sizing: border-box; inline-size: 100%; max-inline-size: 100%; max-block-size: 88dvh; margin: auto auto 0; padding: 0; border: 0;
+  border-start-start-radius: 20px; border-start-end-radius: 20px; background: var(--sekyro-color-surface); color: var(--sekyro-color-fg);
+  font: var(--sekyro-type-flow-body) var(--sekyro-font); overflow: hidden;
+}
+.sekyro-dialog[open] { display: flex; animation: sekyro-sheet var(--sekyro-motion-page) var(--sekyro-ease-out) both; }
+.sekyro-dialog::backdrop { background: color-mix(in srgb, var(--sekyro-color-stage) 55%, transparent); }
+@keyframes sekyro-sheet { from { transform: translateY(24px); opacity: 0; } }
+@media (min-width: 40rem) {
+  .sekyro-dialog { max-inline-size: 30rem; margin: auto; border-radius: 20px; }
+}
+.sekyro-dialog__panel { display: flex; flex-direction: column; inline-size: 100%; max-block-size: 88dvh; padding-block-end: max(1rem, env(safe-area-inset-bottom)); }
+.sekyro-dialog__head { display: flex; align-items: center; gap: 0.75rem; padding-block: 1rem 0.5rem; padding-inline: 1.5rem 1rem; }
+.sekyro-dialog__title { flex: 1; margin: 0; font: var(--sekyro-type-flow-title) var(--sekyro-font-display); letter-spacing: var(--sekyro-tracking-flow-title); text-wrap: balance; }
+.sekyro-root [lang="ar"] .sekyro-dialog__title { font-family: var(--sekyro-font-arabic); line-height: 1.4; }
+.sekyro-dialog__close { flex-shrink: 0; }
+.sekyro-dialog__body { overflow-y: auto; padding-block: 0.25rem 1rem; padding-inline: 1.5rem; color: var(--sekyro-color-fg-muted); }
+.sekyro-dialog__body p { margin: 0; }
+.sekyro-dialog__actions { display: flex; flex-direction: column; gap: 0.75rem; padding-block-start: 0.5rem; padding-inline: 1.5rem; }
+.sekyro-dialog .sekyro-disc:focus-visible { outline: var(--sekyro-focus); outline-offset: 2px; }
+
+.sekyro-reference {
+  display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; padding-inline: 0.75rem; border: 0; border-radius: 9999px; background: none;
+  font: var(--sekyro-type-flow-caption) var(--sekyro-font); font-variant-numeric: tabular-nums; color: var(--sekyro-color-fg-muted); cursor: pointer;
+}
+.sekyro-reference > bdi { color: var(--sekyro-color-fg); }
+.sekyro-reference > .sekyro-glyph { inline-size: 16px; block-size: 16px; }
+.sekyro-reference.is-copied > span { color: var(--sekyro-color-success); }
+
+/* ── Lumière: the document camera, edge to edge ────────────────────────── */
+.sekyro-lm { margin-inline: calc(-1 * var(--sekyro-gutter)); }
+.sekyro-lm-stage {
+  position: relative; overflow: hidden; block-size: 100svh; min-block-size: 32rem;
+  background: var(--sekyro-color-stage); color: var(--sekyro-color-on-stage);
+}
+/* A wide screen keeps a phone-shaped camera, centred. */
+@media (min-width: 40rem) { .sekyro-lm-stage { block-size: min(100svh, 52rem); max-inline-size: 28rem; margin-inline: auto; border-radius: 16px; } }
+.sekyro-lm-video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: filter 250ms ease-out; }
+/* While the photos are read: a light blur (about a third of a full system blur), the scene still recognisable. */
+.sekyro-lm-stage.is-reading .sekyro-lm-video { filter: blur(6px) brightness(0.92); }
+/* The camera's view when the last photo was taken, lightly blurred behind the card being read. */
+.sekyro-lm-scene { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; filter: blur(4px) brightness(0.92); animation: sekyro-fade 250ms ease-out both; }
+.sekyro-lm-frozen { position: absolute; object-fit: cover; animation: sekyro-fade 250ms ease-out both; }
+@keyframes sekyro-fade { from { opacity: 0; } }
+.sekyro-lm-overlay { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
+.sekyro-lm-ink { stop-color: var(--sekyro-color-stage); }
+.sekyro-lm-scrim { fill: var(--sekyro-color-stage); fill-opacity: 0.6; }
+.sekyro-lm-brackets > path {
+  fill: none; stroke: var(--sekyro-color-on-stage); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
+  transition: transform 450ms cubic-bezier(0.2, 0.9, 0.3, 1);
+}
+.sekyro-lm-brackets { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sekyro-color-stage) 40%, transparent)); }
+.sekyro-lm-brackets.is-coaching > path { stroke: var(--sekyro-color-stage-warning); }
+.sekyro-lm-brackets.is-locked > path { stroke: var(--sekyro-color-on-camera-success); }
+.sekyro-lm-brackets.is-locked { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sekyro-color-on-camera-success) 55%, transparent)); }
+.sekyro-lm-trace { fill: none; stroke: var(--sekyro-color-on-camera-success); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sekyro-draw linear forwards; }
+/* The Lumière signature: one precise aqua line crossing the card (in the reading direction). */
+.sekyro-lm-slot { position: absolute; overflow: hidden; pointer-events: none; }
+.sekyro-lm-read {
+  position: absolute; inset-block: 0; inset-inline-start: -6px; inline-size: 12px; mix-blend-mode: screen;
+  animation: sekyro-lm-read 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.sekyro-lm-read::after {
+  content: ""; position: absolute; inset-block: 0; inset-inline-start: 5px; inline-size: 2px;
+  background: var(--sekyro-color-stage-accent); box-shadow: 0 0 5px var(--sekyro-color-stage-accent);
+}
+.sekyro-lm-read.is-repeating { animation: sekyro-lm-read 1.3s ease-in-out infinite alternate; }
+@keyframes sekyro-lm-read { from { transform: translateX(0); } to { transform: translateX(calc(var(--sekyro-guide-w) * var(--sekyro-inline-sign))); } }
+/* The camera's one instruction, large and white over the ink, above the card; one line at a time. */
+.sekyro-lm-instruction { position: absolute; inset-inline: 6%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; transform: translateY(-50%); }
+.sekyro-lm-instruction > div { display: grid; }
+.sekyro-lm-line {
+  font: var(--sekyro-type-flow-camera) var(--sekyro-font-display); letter-spacing: var(--sekyro-tracking-flow-camera);
+  color: var(--sekyro-color-on-stage); text-shadow: 0 2px 8px color-mix(in srgb, var(--sekyro-color-stage) 50%, transparent);
+  text-wrap: balance; animation: sekyro-line-in 250ms ease-out 0ms both; transition: opacity 100ms ease-out;
+}
+.sekyro-root [lang="ar"] .sekyro-lm-line { font-family: var(--sekyro-font-arabic); line-height: 1.4; }
+.sekyro-lm-line.is-leaving { opacity: 0; }
+@keyframes sekyro-line-in { from { opacity: 0; transform: translateY(4px); } }
+.sekyro-lm-attempts { margin: 0; font: var(--sekyro-type-flow-caption) var(--sekyro-font); color: color-mix(in srgb, var(--sekyro-color-on-stage) 80%, transparent); }
+.sekyro-lm-under { position: absolute; inset-inline: 0; display: flex; justify-content: center; margin: 0; pointer-events: none; }
+.sekyro-lm-note { align-items: center; gap: 0.75rem; font: var(--sekyro-type-flow-label) var(--sekyro-font); color: color-mix(in srgb, var(--sekyro-color-on-stage) 85%, transparent); animation: sekyro-fade 250ms ease-out 100ms both; }
+.sekyro-lm-spinner {
+  inline-size: 20px; block-size: 20px; border-radius: 50%; box-sizing: border-box;
+  border: 2.5px solid var(--sekyro-color-stage-accent); border-block-start-color: transparent; animation: sekyro-turn 0.9s linear infinite;
+}
+/* "Turn the card": a small card turning over under the slot (front: portrait and lines; back: the code lines). */
+/* A physical card: it reads left to right in Arabic too. */
+.sekyro-lm-flip { direction: ltr; perspective: 400px; animation: sekyro-fade 250ms ease-out both; }
+.sekyro-lm-flip-card { position: relative; inline-size: 64px; transform-style: preserve-3d; animation: sekyro-flip 0.9s ease-in-out 0.3s infinite alternate; }
+.sekyro-lm-flip.is-toFront .sekyro-lm-flip-card { animation-direction: alternate-reverse; }
+.sekyro-lm-flip-card { --sekyro-cue: color-mix(in srgb, var(--sekyro-color-on-stage) 85%, transparent); }
+.sekyro-lm-flip-front, .sekyro-lm-flip-back {
+  position: absolute; inset: 0; border: 1.75px solid var(--sekyro-cue); border-radius: 6px; backface-visibility: hidden;
+}
+.sekyro-lm-flip-front::before { content: ""; position: absolute; inset-block-start: 7px; inset-inline-start: 7px; inline-size: 13px; block-size: 17px; border-radius: 2px; border: 1.5px solid var(--sekyro-cue); box-sizing: border-box; }
+.sekyro-lm-flip-front::after { content: ""; position: absolute; inset-block-start: 9px; inset-inline: 26px 9px; block-size: 2px; border-radius: 2px; background: var(--sekyro-cue); box-shadow: 0 6px 0 var(--sekyro-cue), 0 12px 0 var(--sekyro-cue); }
+.sekyro-lm-flip-back { transform: rotateY(180deg); }
+.sekyro-lm-flip-back::after { content: ""; position: absolute; inset-block-end: 9px; inset-inline: 8px; block-size: 2px; border-radius: 2px; background: var(--sekyro-cue); box-shadow: 0 -6px 0 var(--sekyro-cue); }
+@keyframes sekyro-flip { to { transform: rotateY(180deg); } }
+/* Frosted controls, the manual shutter and the faces tray. */
+.sekyro-lm-controls {
+  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; pointer-events: none;
+  padding-block: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-bottom)); padding-inline: 1.25rem;
+}
+.sekyro-lm-controls > * { pointer-events: auto; }
+.sekyro-lm-bar { display: flex; justify-content: space-between; margin-block-end: auto; }
+.sekyro-glass {
+  display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
+  background: color-mix(in srgb, var(--sekyro-color-on-stage) 18%, transparent); color: var(--sekyro-color-on-stage);
+  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
+}
+/* Spec 2026-11-06 §3.3: the capture mode switch, a frosted pill with its icon and short label. */
+.sekyro-glass.sekyro-glass--label {
+  display: inline-flex; gap: 0.5rem; align-items: center; inline-size: auto; block-size: auto; min-block-size: 44px;
+  max-inline-size: 100%; padding-block: 0.5rem; padding-inline: 0.75rem 1rem; border-radius: 9999px; font: inherit; text-align: start;
+}
+.sekyro-glass.is-on { background: var(--sekyro-color-on-stage); color: var(--sekyro-color-stage); }
+.sekyro-glass:focus-visible, .sekyro-shutter:focus-visible { outline: 3px solid var(--sekyro-color-on-stage); outline-offset: 2px; }
+.sekyro-shutter {
+  align-self: center; inline-size: 74px; block-size: 74px; border: 3px solid color-mix(in srgb, var(--sekyro-color-on-stage) 90%, transparent);
+  border-radius: 50%; background: var(--sekyro-color-on-stage) content-box; padding: 4px; cursor: pointer; box-sizing: border-box;
+  animation: sekyro-fill 350ms var(--sekyro-spring) both;
+}
+.sekyro-lm-tray { display: flex; justify-content: center; align-items: flex-end; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
+.sekyro-lm-tray > li {
+  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
+  font: var(--sekyro-type-flow-caption) var(--sekyro-font); color: color-mix(in srgb, var(--sekyro-color-on-stage) 62%, transparent);
+}
+.sekyro-lm-tray > li.is-done { color: var(--sekyro-color-on-stage); }
+.sekyro-lm-thumb {
+  position: relative; inline-size: 58px; block-size: 37px; border-radius: 6px; box-sizing: border-box;
+  border: 1.5px solid var(--sekyro-color-on-camera-success); background: color-mix(in srgb, var(--sekyro-color-on-stage) 12%, transparent);
+  animation: sekyro-fill 400ms var(--sekyro-spring) both;
+}
+.sekyro-lm-thumb > img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 4.5px; }
+.sekyro-lm-check {
+  position: absolute; inset-block-start: -6px; inset-inline-end: -6px; inline-size: 18px; block-size: 18px; border-radius: 50%;
+  background: var(--sekyro-color-on-camera-success); fill: none; stroke: var(--sekyro-color-on-stage); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
+}
+.sekyro-lm-error {
+  display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border-radius: 16px;
+  background: color-mix(in srgb, var(--sekyro-color-stage) 88%, transparent); color: var(--sekyro-color-on-stage);
+}
+.sekyro-lm-error > p { margin: 0; }
+/* Design 2026-11-04 §5: "Upload a photo instead" over the camera, under the tray (a glass pill). */
+.sekyro-lm-upload {
+  align-self: center; min-block-size: 44px; padding-block: 0.5rem; padding-inline: 1.25rem; border: 0; border-radius: 999px; cursor: pointer;
+  font: var(--sekyro-type-flow-caption) var(--sekyro-font); color: var(--sekyro-color-on-stage);
+  background: color-mix(in srgb, var(--sekyro-color-on-stage) 18%, transparent);
+}
+.sekyro-lm-upload:focus-visible { outline: 3px solid var(--sekyro-color-ring); outline-offset: 2px; }
+/* Design 2026-11-04 §6.4: the original and the adjusted portrait side by side (the order follows the writing direction). */
+.sekyro-portrait-pair { display: flex; flex-direction: row; gap: 0.75rem; }
+.sekyro-portrait-pair__item { flex: 1 1 0; min-inline-size: 0; margin: 0; display: flex; flex-direction: column; gap: 0.375rem; }
+.sekyro-portrait-pair__item > img {
+  inline-size: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: var(--sekyro-radius);
+  border: 1px solid var(--sekyro-color-line); background: var(--sekyro-color-surface);
+}
+.sekyro-portrait-pair__item > figcaption { text-align: center; }
+.sekyro-portrait-fixes { margin: 0; padding-inline-start: 1.25rem; }
+
+/* ── The face camera (face-camera.tsx): the oval cut from the ink, its ring of ticks and the running light ── */
+.sekyro-fc-video { transform: scaleX(-1); }
+/* The back camera (assisted capture) is not a selfie: no mirror. */
+.sekyro-fc-video.is-rear { transform: none; }
+.sekyro-fc-still { animation: sekyro-fade 250ms ease-out both; }
+.sekyro-fc-scrim { fill: var(--sekyro-color-stage); fill-opacity: 0.82; }
+/* Liveness v7 §4.4: while a screen-ramp pastel fills the viewport, the white instruction and note sit on a band of the
+ * scrim's ink at the scrim's opacity (white keeps at least 4.5:1 over the brightest pastel: screen-ramp-contrast.test). */
+.sekyro-fc[data-ramp] .sekyro-lm-line,
+.sekyro-fc[data-ramp] .sekyro-lm-note {
+  background: color-mix(in srgb, var(--sekyro-color-stage) 82%, transparent);
+  border-radius: 999px;
+  padding-block: 0.25rem;
+  padding-inline: 1rem;
+}
+/* The wash (screen-ramp-layer.tsx) lights the whole screen, its cover fills the stage over the camera; the ink around
+ * the oval steps aside so the ring sits on the colour. */
+.sekyro-fc[data-ramp] .sekyro-fc-scrim { visibility: hidden; }
+.sekyro-fc-rim { fill: none; stroke: color-mix(in srgb, var(--sekyro-color-on-stage) 35%, transparent); stroke-width: 1.5; }
+.sekyro-fc-ticks { fill: none; stroke: color-mix(in srgb, var(--sekyro-color-on-stage) 28%, transparent); stroke-width: 3; stroke-linecap: round; }
+.sekyro-fc-ticks.is-done { stroke: var(--sekyro-color-on-camera-success); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sekyro-color-on-camera-success) 60%, transparent)); }
+.sekyro-fc-ticks.is-light { stroke: var(--sekyro-color-stage-accent); }
+.sekyro-fc-fade { stop-color: var(--sekyro-color-on-stage); }
+.sekyro-fc-sweep { animation: sekyro-turn 2.2s linear infinite; }
+.sekyro-fc-panel {
+  display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border-radius: 16px;
+  background: var(--sekyro-color-surface); color: var(--sekyro-color-fg);
+}
+.sekyro-fc-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; margin: 0; padding: 0; list-style: none; }
+.sekyro-fc-checks > li {
+  display: flex; align-items: center; gap: 0.375rem;
+  font: var(--sekyro-type-flow-caption) var(--sekyro-font); color: color-mix(in srgb, var(--sekyro-color-on-stage) 70%, transparent);
+}
+.sekyro-fc-checks > li.is-met { color: var(--sekyro-color-on-stage); }
+.sekyro-fc-mark {
+  display: inline-grid; place-items: center; inline-size: 16px; block-size: 16px; border-radius: 50%; box-sizing: border-box;
+  border: 1.5px solid currentColor;
+}
+.sekyro-fc-mark > svg { inline-size: 14px; block-size: 14px; fill: none; stroke: transparent; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.sekyro-fc-checks > li.is-met .sekyro-fc-mark { border-color: var(--sekyro-color-on-camera-success); background: var(--sekyro-color-on-camera-success); }
+.sekyro-fc-checks > li.is-met .sekyro-fc-mark > svg { stroke: var(--sekyro-color-stage); }
+/* A criterion the last photo failed (the server's report), until the gate holds it: the row to fix. */
+.sekyro-fc-checks > li.is-flagged { color: var(--sekyro-color-on-stage); }
+.sekyro-fc-checks > li.is-flagged .sekyro-fc-mark { border-color: var(--sekyro-color-warning); border-width: 2px; }
+
+/* The face capture (the 0.1 stage) inside the flow: the instruction on the flow's camera scale. */
+.sekyro-verification .sekyro-stage__guidance-text { font: var(--sekyro-type-flow-camera) var(--sekyro-font-display); letter-spacing: var(--sekyro-tracking-flow-camera); }
+.sekyro-root [lang="ar"] .sekyro-stage__guidance-text { font-family: var(--sekyro-font-arabic); }
+
+/* Over the camera, the scrim is the Sekyro navy and captions are white, in light and dark alike: inside a stage,
+ * the `fg` (scrim) and `surface` (caption) tokens the 0.1 stage rules paint with are remapped. */
+.sekyro-verification .sekyro-stage {
+  --sekyro-color-fg: var(--sekyro-color-stage);
+  --sekyro-color-surface: var(--sekyro-color-on-stage);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sekyro-fc-sweep, .sekyro-fc-still, .sekyro-page > *, .sekyro-otp-digit, .sekyro-otp-row.is-shaking, .sekyro-lm-line, .sekyro-lm-thumb, .sekyro-shutter { animation: none; }
+  .sekyro-mark__read { animation: none; transform: translate(calc(var(--sekyro-read-w) * 0.62), 0); }
+  .sekyro-mark__arc { animation: none; stroke-dashoffset: 0.45; }
+  .sekyro-lm-read, .sekyro-lm-flip-card { animation: none; }
+  .sekyro-lm-flip-card { transform: rotateY(180deg); }
+  .sekyro-lm-read.is-repeating { transform: translateX(calc(var(--sekyro-guide-w) * 0.5 * var(--sekyro-inline-sign))); }
+  .sekyro-outcome__glyph { animation: none; stroke-dashoffset: 0; }
+  .sekyro-outcome__ring, .sekyro-outcome__disc, .sekyro-outcome-tile, .sekyro-dialog[open], .sekyro-skeleton__bar, .sekyro-handoff__pulse { animation: none; }
+  .sekyro-tile.is-busy { animation: none; }
+  .sekyro-lm-brackets > path, .sekyro-progress__bar::before, .sekyro-root .sekyro-btn, .sekyro-card { transition: none; }
+  .sekyro-root .sekyro-btn:active, .sekyro-card:active { transform: none; }
+  .sekyro-lm-trace { animation: none; stroke-dashoffset: 0; }
+}
+/* A masked number or address stays on one line, left to right. */
+.sekyro-root bdi.sekyro-mono { white-space: nowrap; font-family: inherit; font-variant-numeric: tabular-nums; }
+
+/* Web live MRZ (plan Task 10): the band the on-device reader watches, at the bottom of the guide. Decorative — the
+   polite pill carries the state; the pulse stops under reduced motion. */
+.sekyro-lm-mrz { position: absolute; inset-inline: 9%; inset-block-end: 22%; block-size: 22%; border: 2px solid var(--sekyro-color-brand); border-radius: 6px; background: color-mix(in srgb, var(--sekyro-color-brand) 12%, transparent); animation: sekyro-lm-mrz-pulse 1.4s ease-in-out infinite; pointer-events: none; }
+.sekyro-lm-mrz.is-page { inset-block-end: 18%; block-size: 16%; }
+.sekyro-lm-mrz.is-valid { border-color: var(--sekyro-color-success); animation: none; }
+@keyframes sekyro-lm-mrz-pulse { 50% { opacity: 0.55; } }
+@media (prefers-reduced-motion: reduce) { .sekyro-lm-mrz { animation: none; } }
+/* The choice screens on the step's rhythm (the 0.1 drop-in keeps its own). */
+.sekyro-flow .sekyro-choice { flex: 1; gap: var(--sekyro-size-step-gap); padding-block-start: 1.5rem; }
+/* Flow model 2026-10-23: the identity summary, the handoff QR. */
+.sekyro-summary__source {
+  display: inline-flex; align-self: flex-start; margin: 0; padding-block: 0.25rem; padding-inline: 0.625rem; border-radius: 9999px;
+  background: var(--sekyro-color-sunken); font: var(--sekyro-type-flow-caption) var(--sekyro-font); color: var(--sekyro-color-fg-muted);
+}
+.sekyro-handoff__waiting { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; text-align: center; font: var(--sekyro-type-flow-label) var(--sekyro-font); color: var(--sekyro-color-fg-muted); }
+.sekyro-handoff__pulse { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--sekyro-color-brand); animation: sekyro-pulse 1.4s ease-in-out infinite; }.sekyro-summary { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--sekyro-color-line-subtle); border-radius: var(--sekyro-radius-card); }
+.sekyro-summary__portrait { inline-size: 5.5rem; block-size: 7rem; object-fit: cover; border-radius: 10px; }
+.sekyro-summary__list { display: grid; gap: 0.75rem; margin: 0; flex: 1 1 12rem; }
+.sekyro-summary__row { display: grid; gap: 0.125rem; }
+.sekyro-summary__row dt { font: var(--sekyro-type-flow-caption) var(--sekyro-font); }
+.sekyro-summary__row dd { margin: 0; color: var(--sekyro-color-fg); font: var(--sekyro-type-flow-action) var(--sekyro-font); font-variant-numeric: tabular-nums; }
+/* The handoff QR: always navy modules on a white tile, in dark mode and under a partner theme too (phone cameras read
+   dark-on-light codes best). The camera-stage pair is fixed Sekyro navy and white: no theme or branding sets it. */
+.sekyro-qr { inline-size: 12rem; block-size: 12rem; align-self: center; padding: 0.75rem; border: 1px solid var(--sekyro-color-line-subtle); border-radius: var(--sekyro-radius-card); background: var(--sekyro-color-on-stage); }
+.sekyro-qr__bg { fill: var(--sekyro-color-on-stage); }
+.sekyro-qr__fg { fill: var(--sekyro-color-stage); }
+a.sekyro-btn { text-decoration: none; }
+/* WhatsApp and SMS as equals: one row, two buttons of the same kind and width (Salem 2026-11-05). */
+.sekyro-channel-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
+.sekyro-channel-row > .sekyro-btn { padding-inline: 0.75rem; }
+
+/* @sekyro/elements: the element is a block, like the flow's own root. */
+sekyro-verification { display: block; }
+sekyro-verification:not(:defined) { display: none; }
+
+/* Host stylesheets reset whole pages (Bootstrap's reboot, Tailwind's preflight): the flow keeps the browser's own
+   defaults it was built on. Element selectors only, so every rule of the flow's own (a class) still wins. */
+sekyro-verification *,
+sekyro-verification *::before,
+sekyro-verification *::after { box-sizing: content-box; }
+/* The inherited text properties start from the browser's defaults at the element, whatever the page's body sets
+   (Bootstrap's line height of 1.5, a framework's letter spacing): the flow sets its own fonts and colours below it. */
+sekyro-verification {
+  font-size: medium;
+  font-weight: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-align: start;
+  text-indent: 0;
+  text-transform: none;
+  white-space: normal;
+}