/* 01 components, web reference build. Uses only tokens from dist/tokens.css.
   Every value here is a token or a multiple of the 4 px scale. The SwiftUI build mirrors these specs. */

.zo-surface { background: var(--zo-canvas); color: var(--zo-ink-primary); font-family: var(--zo-font); font-feature-settings: "tnum"; }

/* ---------- Text helpers ---------- */
.zo-ink2 { color: var(--zo-ink-secondary); }
.zo-ink3 { color: var(--zo-ink-tertiary); }
.zo-unit { font: 500 15px/20px var(--zo-font); font-stretch: 100%; color: var(--zo-ink-secondary); margin-left: 2px; }

/* ---------- Icons ---------- */
.zo-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.zo-icon.s16 { width: 16px; height: 16px; }
.zo-icon.s24 { width: 24px; height: 24px; }
.zo-icon.s32 { width: 32px; height: 32px; stroke-width: 1.5; }
.zo-icon.fill { fill: currentColor; stroke: none; }
.zo-mark { display: block; fill: currentColor; }

/* ---------- Buttons ---------- */
.zo-btn { appearance: none; border: 0; margin: 0; font: 600 17px/22px var(--zo-font); display: inline-flex; align-items: center; justify-content: center; gap: var(--zo-space-s); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform var(--zo-t-micro) var(--zo-brace), background-color var(--zo-t-micro) linear; white-space: nowrap; }
.zo-btn:focus-visible { outline: var(--zo-stroke-focus) solid var(--zo-focus); outline-offset: 2px; }
.zo-btn:active:not([disabled]):not(.is-loading), .zo-btn.is-pressed { transform: scale(.98); }

.zo-btn.primary { height: 56px; width: 100%; padding: 0 var(--zo-space-xl); border-radius: var(--zo-radius-button); background: var(--zo-accent); color: var(--zo-on-accent); box-shadow: var(--zo-accent-edge); }
.zo-btn.primary:active:not([disabled]), .zo-btn.primary.is-pressed { background: var(--zo-accent-pressed); }
.zo-btn.secondary { height: 48px; padding: 0 var(--zo-space-xl); border-radius: var(--zo-radius-button); background: var(--zo-surface-1); color: var(--zo-ink-primary); box-shadow: inset 0 0 0 1px var(--zo-separator-strong); font: 500 15px/20px var(--zo-font); }
.zo-btn.secondary.wide { width: 100%; }
.zo-btn.secondary:active:not([disabled]), .zo-btn.secondary.is-pressed { background: var(--zo-surface-2); }
.zo-btn.quiet { height: 44px; padding: 0 var(--zo-space-m); border-radius: var(--zo-radius-control); background: transparent; color: var(--zo-ink-primary); font: 500 15px/20px var(--zo-font); text-decoration: underline; text-decoration-color: var(--zo-separator-strong); text-underline-offset: 4px; }
.zo-btn.quiet:active:not([disabled]), .zo-btn.quiet.is-pressed { background: var(--zo-surface-2); }
.zo-btn.destructive { height: 48px; padding: 0 var(--zo-space-xl); border-radius: var(--zo-radius-button); background: var(--zo-surface-1); color: var(--zo-error); box-shadow: inset 0 0 0 1px var(--zo-separator-strong); font: 600 15px/20px var(--zo-font); }
.zo-btn.destructive.wide { width: 100%; }
/* Ink: a strong action that is not the next step (Follow). Never yellow. */
.zo-btn.ink { height: 48px; padding: 0 var(--zo-space-xl); border-radius: var(--zo-radius-button); background: var(--zo-ink-primary); color: var(--zo-canvas); font: 600 15px/20px var(--zo-font); }
.zo-btn.ink.wide { width: 100%; }
.zo-btn.round { width: 44px; height: 44px; padding: 0; border-radius: 22px; background: var(--zo-surface-1); color: var(--zo-ink-primary); }
.zo-btn.round.on2 { background: var(--zo-surface-2); }

.zo-btn[disabled] { cursor: default; }
.zo-btn.primary[disabled] { background: var(--zo-surface-3); color: var(--zo-ink-tertiary); box-shadow: none; }
.zo-btn.secondary[disabled], .zo-btn.destructive[disabled] { color: var(--zo-ink-tertiary); }
.zo-btn.quiet[disabled] { color: var(--zo-ink-tertiary); text-decoration: none; }
.zo-btn.is-loading { pointer-events: none; }
.zo-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: zo-spin 720ms linear infinite; }
@keyframes zo-spin { to { transform: rotate(360deg); } }

/* ---------- Stepper ---------- */
.zo-stepper { display: flex; align-items: center; gap: var(--zo-space-m); min-height: 76px; }
.zo-stepper .value { flex: 1; min-width: 0; }
.zo-stepper .value .zo-metric { display: block; white-space: nowrap; }
.zo-step { width: 48px; height: 48px; border-radius: 24px; border: 0; background: var(--zo-surface-2); color: var(--zo-ink-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--zo-t-micro) var(--zo-brace); }
.zo-step:active, .zo-step.is-pressed { transform: scale(.98); background: var(--zo-surface-3); }
.zo-step[disabled] { color: var(--zo-ink-tertiary); }
.zo-step:focus-visible { outline: 2px solid var(--zo-focus); outline-offset: 2px; }

/* ---------- Chips and filters ---------- */
.zo-chips { display: flex; gap: var(--zo-space-s); overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.zo-chip { flex: none; height: 36px; padding: 0 var(--zo-space-l); border-radius: var(--zo-radius-pill); border: 0; background: var(--zo-surface-1); color: var(--zo-ink-primary); box-shadow: inset 0 0 0 1px var(--zo-separator-strong); font: 500 15px/20px var(--zo-font); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.zo-chip[aria-pressed="true"], .zo-chip.is-on { background: var(--zo-ink-primary); color: var(--zo-canvas); box-shadow: none; }
.zo-chip[disabled] { color: var(--zo-ink-tertiary); }
.zo-chip:focus-visible { outline: 2px solid var(--zo-focus); outline-offset: 2px; }

/* ---------- Toggle ---------- */
.zo-toggle { position: relative; width: 52px; height: 32px; flex: none; border-radius: 16px; border: 0; padding: 0; background: var(--zo-surface-3); cursor: pointer; transition: background-color var(--zo-t-quick) var(--zo-land); }
.zo-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: var(--zo-surface-1); box-shadow: 0 1px 3px rgba(2,2,2,.2); transition: transform var(--zo-t-quick) var(--zo-carry), background-color var(--zo-t-quick) linear; }
.zo-dark .zo-toggle::after { background: var(--zo-ink-secondary); box-shadow: none; }
.zo-toggle[aria-checked="true"] { background: var(--zo-ink-primary); }
.zo-toggle[aria-checked="true"]::after { transform: translateX(20px); background: var(--zo-canvas); }
.zo-toggle[disabled] { opacity: .5; }
.zo-toggle:focus-visible { outline: 2px solid var(--zo-focus); outline-offset: 2px; }

/* ---------- Segmented ---------- */
.zo-seg { display: flex; padding: 2px; border-radius: var(--zo-radius-control); background: var(--zo-surface-2); }
.zo-seg button { flex: 1; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--zo-ink-secondary); font: 500 15px/20px var(--zo-font); cursor: pointer; white-space: nowrap; }
.zo-seg button[aria-pressed="true"] { background: var(--zo-surface-1); color: var(--zo-ink-primary); font-weight: 600; box-shadow: 0 1px 2px rgba(2,2,2,.08); }
.zo-dark .zo-seg button[aria-pressed="true"] { background: var(--zo-surface-3); box-shadow: none; }
.zo-seg button:focus-visible { outline: 2px solid var(--zo-focus); outline-offset: -2px; }

/* ---------- Cards and list rows ---------- */
.zo-card { background: var(--zo-surface-1); border-radius: var(--zo-radius-card); padding: var(--zo-card-padding); }
.zo-card.in-sheet { background: var(--zo-surface-2); }
.zo-card > * + * { margin-top: var(--zo-space-m); }
.zo-card .tight { margin-top: var(--zo-space-xs); }
.zo-list { background: var(--zo-surface-1); border-radius: var(--zo-radius-card); padding: 0 var(--zo-space-l); }
.zo-row { display: flex; align-items: center; gap: var(--zo-space-m); min-height: 56px; padding: var(--zo-space-s) 0; color: inherit; text-decoration: none; }
.zo-row + .zo-row { box-shadow: 0 -1px 0 var(--zo-separator); }
.zo-row .lead { width: 28px; display: flex; justify-content: center; color: var(--zo-ink-primary); }
.zo-row .grow { flex: 1; min-width: 0; }
.zo-row .trail { color: var(--zo-ink-secondary); font: 400 15px/20px var(--zo-font); display: flex; align-items: center; gap: var(--zo-space-xs); white-space: nowrap; }
.zo-row .chev { color: var(--zo-ink-tertiary); }
.zo-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--zo-space-s); padding: 0 var(--zo-space-xs); }

/* ---------- Screen chrome ---------- */
.zo-screen { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--zo-canvas); color: var(--zo-ink-primary); font-family: var(--zo-font); font-feature-settings: "tnum"; overflow: hidden; }
.zo-scroll { flex: 1; overflow: hidden; padding: 0 var(--zo-margin); }
.zo-scroll > * + * { margin-top: var(--zo-space-m); }
.zo-scroll > .gap-section { margin-top: var(--zo-section-gap); }
.zo-head { padding: var(--zo-space-s) 0 var(--zo-space-xs); }
.zo-head .zo-caption { margin-top: 2px; }
.zo-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--zo-space-m); }
.zo-topbar { display: flex; align-items: center; gap: var(--zo-space-m); min-height: 52px; padding: 0 var(--zo-margin); }
.zo-topbar .mid { flex: 1; text-align: center; min-width: 0; }

/* Sheet */
.zo-sheet { background: var(--zo-surface-1); border-radius: var(--zo-radius-sheet) var(--zo-radius-sheet) 0 0; color: var(--zo-ink-primary); }
.zo-grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--zo-separator-strong); margin: 6px auto 0; }
.zo-sheet-bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--zo-space-s); min-height: 56px; padding: 0 var(--zo-space-l); }
.zo-sheet-bar .t { text-align: center; }
.zo-sheet-bar .zo-btn.round { background: var(--zo-surface-2); }
.zo-sheet-body { padding: 0 var(--zo-margin) var(--zo-space-xxl); }
.zo-sheet-body > * + * { margin-top: var(--zo-space-m); }

/* Tab bar */
.zo-tabbar { flex: none; display: flex; align-items: flex-start; height: 84px; padding: 6px var(--zo-space-s) 0; background: var(--zo-canvas); box-shadow: 0 -1px 0 var(--zo-separator); }
.zo-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; min-height: 48px; color: var(--zo-ink-secondary); font: 500 11px/13px var(--zo-font); letter-spacing: .1px; }
.zo-tab[aria-current="page"] { color: var(--zo-ink-primary); }
.zo-tab-main { width: 56px; height: 56px; margin: -4px var(--zo-space-xs) 0; border-radius: 28px; background: var(--zo-ink-primary); color: var(--zo-canvas); display: flex; align-items: center; justify-content: center; flex: none; }

/* Status bar and home indicator, for mock phones only */
.zo-status { flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 32px 0 42px; font: 600 16px/1 var(--zo-font); color: var(--zo-ink-primary); }
.zo-status .bars { display: flex; gap: 6px; align-items: center; }
.zo-island { position: absolute; z-index: 5; top: 11px; left: 50%; width: 124px; height: 36px; margin-left: -62px; background: #000; border-radius: 20px; }
.zo-homebar { position: absolute; z-index: 5; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--zo-ink-primary); }

/* ---------- Badges and status ---------- */
.zo-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--zo-radius-pill); background: var(--zo-surface-2); color: var(--zo-ink-secondary); font: 500 13px/18px var(--zo-font); white-space: nowrap; }
.zo-status-line { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--zo-font); }
.zo-status-line.success { color: var(--zo-success); }
.zo-status-line.warning { color: var(--zo-warning); }
.zo-status-line.error { color: var(--zo-error); }
.zo-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--zo-ink-primary); color: var(--zo-canvas); font: 600 12px/20px var(--zo-font); text-align: center; display: inline-block; }

/* ---------- Banner, toast, confirmation ---------- */
.zo-banner { display: flex; align-items: flex-start; gap: var(--zo-space-m); padding: var(--zo-space-m) var(--zo-space-l); border-radius: var(--zo-radius-card); background: var(--zo-surface-2); }
.zo-banner .grow { flex: 1; min-width: 0; }
.zo-banner .zo-btn.quiet { margin: -10px -12px -10px 0; }
.zo-banner.warning .ic { color: var(--zo-warning); }
.zo-banner.error .ic { color: var(--zo-error); }
.zo-banner.success .ic { color: var(--zo-success); }
.zo-banner .ic { margin-top: 1px; }
.zo-toast { display: inline-flex; align-items: center; gap: var(--zo-space-m); min-height: 48px; padding: 0 var(--zo-space-s) 0 var(--zo-space-l); border-radius: var(--zo-radius-pill); background: var(--zo-ink-primary); color: var(--zo-canvas); font: 500 15px/20px var(--zo-font); pointer-events: auto; }
.zo-toast .zo-btn.quiet { color: var(--zo-canvas); text-decoration-color: currentColor; height: 40px; }
.zo-toast .zo-btn.quiet:active { background: transparent; }
.zo-confirm { background: var(--zo-surface-1); border-radius: var(--zo-radius-sheet); padding: var(--zo-space-xxl) var(--zo-space-xl) var(--zo-space-xl); }
.zo-dark .zo-confirm { background: var(--zo-surface-2); }
.zo-confirm > * + * { margin-top: var(--zo-space-s); }
.zo-confirm .actions { margin-top: var(--zo-space-xxl); display: grid; gap: var(--zo-space-s); }
.zo-scrim { background: var(--zo-scrim); }

/* ---------- Empty, error, loading ---------- */
.zo-state { padding: var(--zo-space-xxl) var(--zo-space-l); text-align: left; }
.zo-state > * + * { margin-top: var(--zo-space-s); }
.zo-state .act { margin-top: var(--zo-space-l); }
.zo-skel { border-radius: var(--zo-radius-small); background: var(--zo-surface-2); height: 14px; }
.zo-skel.h24 { height: 24px; width: 60%; }
.zo-skel.w40 { width: 40%; }
.zo-skel.w80 { width: 80%; }

/* ---------- Set rail, rest line, progress ---------- */
.zo-rail { display: flex; align-items: center; height: var(--zo-stroke-rail-app); gap: 2px; }
.zo-rail i { flex: 1 1 0; height: 100%; border-radius: 2px; background: var(--zo-surface-3); }
.zo-rail i.done { background: var(--zo-ink-primary); }
.zo-rail i.now { background: color-mix(in srgb, var(--zo-ink-primary) 45%, transparent); }
.zo-rail i.rest { flex: 0 0 4px; background: transparent; }
.zo-rail.vertical { flex-direction: column; width: var(--zo-stroke-rail-web); height: auto; gap: 8px; }
.zo-rail.vertical i { flex: none; width: 100%; height: 30px; }
.zo-rail.vertical i.rest { height: 10px; background: var(--zo-surface-3); }
.zo-rail.vertical i.rest.done { background: var(--zo-ink-primary); }

.zo-restline { height: var(--zo-stroke-rest-line); border-radius: 3px; background: var(--zo-surface-3); overflow: hidden; }
.zo-restline b { display: block; height: 100%; border-radius: 3px; background: var(--zo-accent); box-shadow: var(--zo-accent-edge); transform-origin: left center; }

.zo-progress { height: var(--zo-stroke-progress); border-radius: 2px; background: var(--zo-surface-3); overflow: hidden; }
.zo-progress b { display: block; height: 100%; border-radius: 2px; background: var(--zo-ink-primary); }

/* Dock: the yellow object at the bottom of the workout */
.zo-dock { flex: none; padding: var(--zo-space-m) var(--zo-margin) 34px; background: var(--zo-canvas); }
.zo-dock .meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--zo-space-s); }

/* ---------- Media frame ---------- */
.zo-media { position: relative; border-radius: var(--zo-radius-card); background: var(--zo-surface-2); overflow: hidden; }
.zo-media img, .zo-media svg.fig { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===================== v1.1: expressive data, celebration and new patterns ===================== */

/* Activity ring */
.zo-ring { position: relative; flex: none; }
.zo-ring > svg { display: block; width: 100%; height: 100%; }
.zo-ring .mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--zo-ink-primary); }
/* v1.5. The goal moment: the ring fills to a solid accent disc with an Onyx icon for about 1.7 s, then settles.
   Settled (done): full ink ring, ink icon, a small ink check on the ring. Accent is never a resting state. */
.zo-ring .disc { position: absolute; inset: 0; border-radius: 50%; background: var(--zo-accent); box-shadow: var(--zo-accent-edge); transform: scale(0); }
.zo-ring.moment .disc { transform: scale(1); }
.zo-ring.moment .mid { color: var(--zo-on-accent); }
.zo-ring.moment > svg { opacity: 0; }
.zo-ring .ok { position: absolute; right: -3%; bottom: -3%; width: 36%; height: 36%; min-width: 18px; min-height: 18px; border-radius: 50%; background: var(--zo-ink-primary); color: var(--zo-canvas); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--zo-ok-gap, var(--zo-surface-1)); transform: scale(0); }
.zo-ring .ok .zo-icon { width: 62%; height: 62%; stroke-width: 2.6; }
.zo-ring.done .ok { transform: scale(1); }

/* Water glasses (v1.2): one glass per 250 ml, same progress logic as every rail */
.zo-glasses { display: flex; gap: 4px; flex-wrap: nowrap; }
.zo-glasses i { flex: 1 1 0; max-width: 26px; display: block; }
.zo-glasses svg { display: block; width: 100%; height: auto; fill: var(--zo-surface-3); }
.zo-glasses i.full svg { fill: var(--zo-ink-primary); }
.zo-glasses.moment i svg { fill: var(--zo-accent); stroke: color-mix(in srgb, var(--zo-on-accent) 18%, transparent); stroke-width: 1; transition: fill var(--zo-t-quick) linear; }
.zo-dark .zo-glasses.moment i svg { stroke: none; }
.zo-glasses .ok { flex: none; align-self: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%; background: var(--zo-ink-primary); color: var(--zo-canvas); display: none; align-items: center; justify-content: center; }
.zo-glasses .ok .zo-icon { width: 13px; height: 13px; stroke-width: 2.6; }
.zo-glasses.done .ok { display: flex; }

/* Macro ring and macro bars */
.zo-macro { position: relative; flex: none; }
.zo-macro > svg { display: block; width: 100%; height: 100%; }
.zo-macro .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.zo-macros { display: grid; gap: 12px; }
.zo-macrobar .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.zo-macrobar .key { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/20px var(--zo-font); }
.zo-macrobar .key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.zo-macrobar .bar { margin-top: 6px; height: 6px; border-radius: 3px; background: var(--zo-surface-3); overflow: hidden; }
.zo-macrobar .bar b { display: block; height: 100%; border-radius: 3px; background: var(--k); }

/* Data tile: icon in its data colour beside the label, never in a box */
.zo-data-label { display: inline-flex; align-items: center; gap: 6px; }
.zo-data-label .zo-icon { color: var(--k); }

/* Goal reached badge (static under Reduce Motion) */
.zo-goal { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 8px; border-radius: var(--zo-radius-pill); background: var(--zo-ink-primary); color: var(--zo-canvas); font: 600 13px/18px var(--zo-font); }
.zo-goal .dot { width: 14px; height: 14px; border-radius: 7px; background: var(--zo-accent); box-shadow: var(--zo-accent-edge); }

/* Confetti layer */
.zo-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 8; }
.zo-confetti i { position: absolute; width: 6px; height: 10px; border-radius: 1.5px; will-change: transform, opacity; }
.zo-confetti i.c { width: 7px; height: 7px; border-radius: 50%; }
.zo-confetti i.m { width: 10px; height: 10px; background: none; }

/* Success check */
.zo-check { width: 28px; height: 28px; border-radius: 14px; background: var(--zo-success); color: var(--zo-canvas); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.zo-check svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Error field */
.zo-field { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: var(--zo-radius-control); background: var(--zo-surface-1); box-shadow: inset 0 0 0 1.5px var(--zo-separator-strong); }
.zo-field.is-error { box-shadow: inset 0 0 0 1.5px var(--zo-error); }
.zo-field-msg { margin-top: 6px; color: var(--zo-error); font: 500 13px/18px var(--zo-font); display: flex; gap: 6px; align-items: center; }

/* Expandable card (workout contents) */
.zo-disclosure { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; border: 0; background: none; padding: 0; color: var(--zo-ink-primary); font: 500 15px/20px var(--zo-font); cursor: pointer; }
.zo-disclosure .zo-icon { transition: transform var(--zo-t-quick) var(--zo-carry); color: var(--zo-ink-tertiary); }
.zo-disclosure[aria-expanded="true"] .zo-icon { transform: rotate(180deg); }
.zo-exlist { display: grid; gap: 0; }
.zo-exlist[hidden] { display: none; }
.zo-exlist .ex { display: flex; align-items: center; gap: 12px; min-height: 44px; box-shadow: 0 -1px 0 var(--zo-separator); }
.zo-exlist .n { width: 20px; color: var(--zo-ink-tertiary); font: 500 13px/18px var(--zo-font); }
.zo-exlist .grow { flex: 1; min-width: 0; }

/* Onboarding rail: starts ahead */
.zo-steps { display: flex; gap: 3px; height: 4px; }
.zo-steps i { flex: 1; border-radius: 2px; background: var(--zo-surface-3); }
.zo-steps i.done { background: var(--zo-ink-primary); }
.zo-steps i.now { background: color-mix(in srgb, var(--zo-ink-primary) 45%, transparent); }

/* Rest controls */
.zo-adjust { display: flex; gap: 8px; justify-content: center; }
.zo-adjust .zo-chip { min-width: 72px; justify-content: center; }

/* Main Action pop-up (keeps the original concept: the 01 button opens a panel above it) */
.zo-pop { position: absolute; left: 12px; right: 12px; bottom: 96px; z-index: 6; border-radius: 28px; background: var(--zo-surface-1); padding: 16px; box-shadow: var(--zo-float); transform-origin: 50% 100%; }
.zo-dark .zo-pop { background: var(--zo-surface-2); box-shadow: inset 0 0 0 1px var(--zo-separator-strong); }
.zo-pop .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.zo-pop .act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 80px; border-radius: 18px; background: var(--zo-surface-2); font: 500 13px/18px var(--zo-font); color: var(--zo-ink-primary); }
.zo-dark .zo-pop .act { background: var(--zo-surface-3); }
.zo-pop .act .zo-icon { width: 24px; height: 24px; }
.zo-pop .quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.zo-pop .q { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 12px; border-radius: 18px; background: var(--zo-surface-2); }
.zo-dark .zo-pop .q { background: var(--zo-surface-3); }
.zo-pop .q .zo-icon { color: var(--k); }
.zo-pop .head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 12px; }
.zo-pop-scrim { position: absolute; inset: 0; z-index: 5; background: var(--zo-scrim); }
.zo-tab-main.open { background: var(--zo-ink-primary); }

/* Profile header */
.zo-avatar { position: relative; width: 72px; height: 72px; border-radius: 36px; background: var(--zo-surface-3); flex: none; display: flex; align-items: center; justify-content: center; color: var(--zo-ink-secondary); font: 600 28px/1 var(--zo-font); overflow: visible; }
.zo-avatar .photo { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.zo-avatar .cam { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 14px; background: var(--zo-ink-primary); color: var(--zo-canvas); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--zo-canvas); }
.zo-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zo-tile { background: var(--zo-surface-1); border-radius: 16px; padding: 12px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; }

/* ===================== v1.2: the Club, member card, photo share card, founder voice ===================== */

/* 01 Club member card: a brand object, Onyx in both themes, card ratio 1.586 */
.zo-member { position: relative; width: 100%; aspect-ratio: 1.586; border-radius: 20px; background: var(--zo-brand-onyx); color: var(--zo-brand-ink); overflow: hidden; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px rgba(2,2,2,.28); font-family: var(--zo-font); font-feature-settings: "tnum"; }
.zo-dark .zo-member { box-shadow: inset 0 0 0 1px var(--zo-brand-edge); }
.zo-member:not(.back) { text-align: left; }
.zo-member .top { display: flex; justify-content: space-between; align-items: flex-start; }
.zo-member .top .zo-mark { color: var(--zo-brand-signal); }
.zo-member .club { font: 600 13px/18px var(--zo-font); color: var(--zo-brand-ink2); text-align: right; }
.zo-member .name { font: 700 26px/30px var(--zo-font); letter-spacing: -.3px; }
.zo-member .no { font: 500 13px/18px var(--zo-font); color: var(--zo-brand-ink2); margin-top: 2px; }
.zo-member .stats { display: flex; gap: 18px; }
.zo-member .stats b { display: block; font: 700 19px/22px var(--zo-font); font-stretch: 85%; }
.zo-member .stats span { font: 400 11px/13px var(--zo-font); color: var(--zo-brand-ink3); }
.zo-member .stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--zo-brand-signal); }
.zo-member .sheen { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%); pointer-events: none; }
.zo-member .founding { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 11px; background: rgba(255,254,42,.14); color: var(--zo-brand-signal); font: 600 11px/13px var(--zo-font); margin-top: 6px; }
.zo-member.back { justify-content: center; align-items: center; text-align: center; gap: 10px; }
.zo-qr { width: 112px; height: 112px; border-radius: 10px; background: var(--zo-brand-ink); padding: 8px; }
.zo-qr svg { display: block; width: 100%; height: 100%; }

/* Photo share card: the person's photo stays the hero, data sits in a scrim band */
.zo-share { position: relative; border-radius: 20px; overflow: hidden; background: var(--zo-brand-edge); color: var(--zo-brand-ink); font-family: var(--zo-font); font-feature-settings: "tnum"; }
.zo-share .photo { position: absolute; inset: 0; }
.zo-share .photo svg { width: 100%; height: 100%; display: block; }
.zo-share .scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(to top, rgba(2,2,2,.78) 0%, rgba(2,2,2,.5) 45%, rgba(2,2,2,0) 100%); }
.zo-share .tl { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; font: 600 12px/16px var(--zo-font); }
.zo-share .tl .zo-mark { color: var(--zo-brand-signal); filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.zo-share .data { position: absolute; left: 16px; right: 16px; bottom: 14px; }
.zo-share .wname { font: 700 22px/26px var(--zo-font); letter-spacing: -.2px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.zo-share .wmeta { font: 500 12px/16px var(--zo-font); color: var(--zo-brand-on-photo-ink2); margin-top: 2px; }
.zo-share .nums { display: flex; gap: 16px; margin-top: 10px; }
.zo-share .nums b { display: block; font: 700 22px/24px var(--zo-font); font-stretch: 85%; }
.zo-share .nums span { font: 400 11px/13px var(--zo-font); color: var(--zo-brand-on-photo-ink3); }
.zo-share .pr { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--zo-brand-signal); color: var(--zo-brand-onyx); font: 600 12px/16px var(--zo-font); }
.zo-share .mini-rail { display: flex; gap: 2px; height: 4px; margin-top: 10px; }
.zo-share .mini-rail i { flex: 1; border-radius: 1px; background: var(--zo-brand-ink); }
.zo-share .mini-rail i.r { flex: 0 0 3px; background: transparent; }
.zo-share .foot { position: absolute; right: 14px; top: 14px; font: 500 11px/13px var(--zo-font); color: var(--zo-brand-on-photo-ink2); text-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* Temporary (trial) card: same object, not yet yours. Outlined mark, a dashed inner edge like an unpunched card,
   the number "held", and the yellow stripe draining with the days left. Never greyed out or broken. */
.zo-member.is-trial { background: var(--zo-brand-onyx); }
.zo-member.is-trial::after { content: ""; position: absolute; inset: 2.3cqw; border-radius: 3.4cqw; border: 1.5px dashed color-mix(in srgb, var(--zo-brand-signal) 45%, transparent); pointer-events: none; }
.zo-member.is-trial .top .zo-mark { color: var(--zo-brand-ink); } /* approved warm-white colourway; turns Signal Yellow when the card is yours */
.zo-member .founding.trial { background: transparent; box-shadow: inset 0 0 0 1px var(--zo-brand-signal); }
.zo-member .founding.partner { gap: 1.7cqw; }
.zo-member .tier { display: inline-flex; gap: .8cqw; }
.zo-member .tier i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--zo-brand-signal); }
.zo-member .tier i.on { background: var(--zo-brand-signal); }

/* Creator code field and partner dashboard */
.zo-code { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px; border-radius: var(--zo-radius-control); background: var(--zo-surface-1); box-shadow: inset 0 0 0 1.5px var(--zo-separator-strong); font: 700 24px/1 var(--zo-font); font-stretch: 85%; letter-spacing: 2px; }
.zo-code.ok { box-shadow: inset 0 0 0 1.5px var(--zo-ink-primary); }
.zo-code.is-error { box-shadow: inset 0 0 0 1.5px var(--zo-error); }
.zo-code .grow { flex: 1; }
.zo-tiers { position: relative; margin-top: 8px; }
.zo-tiers .track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; height: 8px; }
.zo-tiers .track i { border-radius: 2px; background: var(--zo-surface-3); position: relative; overflow: hidden; }
.zo-tiers .track i.done { background: var(--zo-ink-primary); }
.zo-tiers .track i b { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--zo-ink-primary) 45%, transparent); }
.zo-tiers .marks { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
/* v1.6: the current share is bold ink; the others step back to tertiary ink at a lighter weight (still 4.5:1). */
.zo-tiers .marks div { font: 400 12px/16px var(--zo-font); color: var(--zo-ink-tertiary); }
.zo-tiers .marks b { display: block; font: 500 17px/20px var(--zo-font); font-stretch: 85%; color: var(--zo-ink-tertiary); }
.zo-tiers .marks .here { color: var(--zo-ink-secondary); }
.zo-tiers .marks .here b { font-weight: 700; font-size: 20px; color: var(--zo-ink-primary); }

/* ===================== v1.4 ===================== */
/* Charts: ink on surfaces, axis text as captions */
.zo-chart { display: block; width: 100%; height: auto; overflow: visible; }
.zo-chart .ax { font: 400 11px var(--zo-font); fill: var(--zo-ink-secondary); }
.zo-sleep svg { display: block; width: 100%; height: 44px; }
.zo-sleep .key { display: flex; gap: 12px; margin-top: 8px; font: 400 12px/16px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-sleep .key span { display: inline-flex; align-items: center; gap: 5px; }
.zo-sleep .key i { width: 10px; height: 10px; border-radius: 3px; }
.zo-nights { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 72px; }
.zo-nights div { display: grid; gap: 4px; justify-items: center; align-self: end; }
.zo-nights b { width: 100%; border-radius: 4px; background: color-mix(in srgb, var(--zo-data-sleep) 45%, transparent); display: block; }
.zo-nights div.last b { background: var(--zo-data-sleep); }
.zo-nights span { font: 400 11px/13px var(--zo-font); color: var(--zo-ink-secondary); }

/* Before/after */
.zo-compare { position: relative; aspect-ratio: 4 / 5; border-radius: var(--zo-radius-card); overflow: hidden; background: var(--zo-surface-2); }
.zo-compare .side { position: absolute; inset: 0; }
.zo-compare .side svg { width: 100%; height: 100%; display: block; }
.zo-compare .tag { position: absolute; left: 10px; bottom: 10px; height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(2,2,2,.6); color: var(--zo-brand-ink); font: 600 12px/26px var(--zo-font); }
.zo-compare .tag.r { left: auto; right: 10px; }
.zo-compare .handle { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--zo-brand-ink); }
.zo-compare .handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px; background: var(--zo-brand-ink); color: var(--zo-brand-onyx); }
.zo-compare .handle .zo-icon { width: 14px; height: 14px; margin: 0 -2px; }

/* Permission cards: an Onyx art panel (the brand object) shows what you get, then iOS asks */
.zo-perm-art { border-radius: 20px; background: var(--zo-brand-onyx); padding: 16px; display: grid; gap: 8px; }
.zo-dark .zo-perm-art { box-shadow: inset 0 0 0 1px var(--zo-brand-edge); }
.zo-perm-art.health { display: block; }
.zo-perm-art .lock { text-align: center; color: var(--zo-brand-ink); margin-bottom: 10px; }
.zo-perm-art .lock .d { font: 600 15px/20px var(--zo-font); color: var(--zo-brand-ink2); }
.zo-perm-art .lock .t { font: 700 72px/1 var(--zo-font); font-stretch: 75%; letter-spacing: -1px; font-feature-settings: "tnum"; }
.zo-perm-art .link { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--zo-brand-ink2); }
.zo-perm-art .sq { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.zo-perm-art .sq.y { background: var(--zo-brand-signal); color: var(--zo-brand-onyx); }
.zo-perm-art .sq.w { background: var(--zo-brand-ink); color: var(--zo-brand-onyx); }
.zo-perm-art .arrows { display: grid; gap: 2px; }
.zo-perm-art .pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; background: rgba(247,246,241,.1); color: var(--zo-brand-ink); font: 600 13px/18px var(--zo-font); }
.zo-perm-art .pill .zo-icon { color: var(--zo-brand-signal); }
.zo-notif { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(247,246,241,.12); color: var(--zo-brand-ink); }
.zo-notif.dim { opacity: .62; transform: scale(.96); }
.zo-notif .app { width: 32px; height: 32px; border-radius: 8px; background: var(--zo-brand-signal); color: var(--zo-brand-onyx); display: flex; align-items: center; justify-content: center; flex: none; }
.zo-notif .t { display: flex; justify-content: space-between; font: 600 13px/18px var(--zo-font); }
.zo-notif .t span { font-weight: 400; color: var(--zo-brand-ink2); }
.zo-notif .b { font: 400 13px/18px var(--zo-font); color: var(--zo-brand-on-photo-ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zo-notif .kind { width: 32px; height: 32px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(247,246,241,.1); color: var(--zo-brand-ink); align-self: center; }
.zo-notif.dim2 { opacity: .4; transform: scale(.92); margin-top: -4px; }

/* Chat */
.zo-bubble { max-width: 78%; align-self: flex-start; }
.zo-bubble .txt { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--zo-surface-1); font: 400 15px/20px var(--zo-font); }
.zo-bubble.mine { align-self: flex-end; }
.zo-bubble.mine .txt { border-radius: 18px 18px 6px 18px; background: var(--zo-ink-primary); color: var(--zo-canvas); }
.zo-bubble .meta { margin-top: 4px; font: 400 11px/13px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-bubble.mine .meta { text-align: right; }
.zo-thread { display: flex; flex-direction: column; gap: 8px; }
.zo-composer { display: flex; align-items: center; gap: 8px; padding: 8px 12px 30px; background: var(--zo-canvas); box-shadow: 0 -1px 0 var(--zo-separator); }
.zo-composer .field { flex: 1; height: 44px; border-radius: 22px; background: var(--zo-surface-1); display: flex; align-items: center; padding: 0 16px; color: var(--zo-ink-tertiary); font: 400 15px var(--zo-font); box-shadow: inset 0 0 0 1px var(--zo-separator-strong); }

/* Voice: the 01 button becomes the listening control */
.zo-voice { text-align: center; }
.zo-voice .wave { display: flex; gap: 6px; justify-content: center; align-items: center; height: 56px; margin-top: 20px; }
.zo-voice .wave i { width: 6px; border-radius: 3px; background: var(--zo-ink-primary); }
.zo-voice-orb { width: 84px; height: 84px; border-radius: 42px; background: var(--zo-accent); color: var(--zo-on-accent); box-shadow: var(--zo-accent-edge), 0 0 0 10px color-mix(in srgb, var(--zo-accent) 22%, transparent), 0 0 0 22px color-mix(in srgb, var(--zo-accent) 10%, transparent); display: flex; align-items: center; justify-content: center; }

/* Subscription panel */
.zo-offer { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; border-radius: var(--zo-radius-card); background: var(--zo-surface-1); box-shadow: inset 0 0 0 1.5px var(--zo-separator-strong); }
.zo-offer.on { box-shadow: inset 0 0 0 2px var(--zo-ink-primary); }
.zo-offer .m-radio, .zo-offer.on .m-radio { width: 22px; height: 22px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px var(--zo-ink-tertiary); }
.zo-offer.on .m-radio { background: var(--zo-ink-primary); color: var(--zo-canvas); box-shadow: none; }
.zo-timeline { display: grid; gap: 0; }
.zo-timeline .st { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }
.zo-timeline .dot { position: relative; display: flex; justify-content: center; }
.zo-timeline .dot i { width: 12px; height: 12px; border-radius: 6px; margin-top: 4px; background: var(--zo-surface-3); position: relative; z-index: 1; }
.zo-timeline .st.now .dot i { background: var(--zo-ink-primary); }
.zo-timeline .dot::after { content: ""; position: absolute; top: 16px; bottom: -4px; width: 2px; background: var(--zo-surface-3); }
.zo-timeline .st:last-child .dot::after { display: none; }
.zo-timeline .st > div:last-child { padding-bottom: 14px; }

/* Article and evidence */
.zo-evidence { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--zo-surface-2); font: 600 12px/16px var(--zo-font); }
.zo-evidence .bars { display: inline-flex; gap: 2px; }
.zo-evidence .bars i { width: 4px; height: 10px; border-radius: 1px; background: var(--zo-surface-3); }
.zo-evidence .bars i.on { background: var(--zo-ink-primary); }
.zo-source { display: flex; gap: 10px; align-items: center; min-height: 44px; font: 500 13px/18px var(--zo-font); }
.zo-source .s { width: 28px; height: 28px; border-radius: 8px; background: var(--zo-surface-2); display: flex; align-items: center; justify-content: center; font: 700 10px/1 var(--zo-font); flex: none; }

/* Programme cover */
.zo-cover { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--zo-brand-onyx); color: var(--zo-brand-ink); container-type: inline-size; }
.zo-cover .photo { position: absolute; inset: 0; }
.zo-cover .photo svg { width: 100%; height: 100%; display: block; }
.zo-cover .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,2,2,.85) 0%, rgba(2,2,2,.35) 45%, rgba(2,2,2,0) 70%); }
.zo-cover .big { position: absolute; left: 6cqw; top: 5cqw; font: 700 24cqw/0.85 var(--zo-font); font-stretch: 75%; letter-spacing: -0.5cqw; color: var(--zo-brand-signal); }
.zo-cover .big small { display: block; font-size: 5cqw; line-height: 1.2; letter-spacing: 0; color: var(--zo-brand-ink); font-stretch: 100%; margin-top: 1.5cqw; }
.zo-cover .txt { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; }
.zo-cover .txt h3 { margin: 0; font: 700 9cqw/1.05 var(--zo-font); letter-spacing: -.2cqw; }
.zo-cover .chips { display: flex; gap: 2cqw; margin-top: 3cqw; flex-wrap: wrap; }
.zo-cover .chips span { height: 7.5cqw; padding: 0 3cqw; border-radius: 4cqw; background: rgba(247,246,241,.14); font: 600 3.6cqw/7.5cqw var(--zo-font); }

/* Share size picker: each button shows its own shape */
.zo-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.zo-sizes button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 52px; padding: 6px 0; border: 0; border-radius: var(--zo-radius-control); background: var(--zo-surface-1); color: var(--zo-ink-secondary); font: 500 12px/16px var(--zo-font); box-shadow: inset 0 0 0 1px var(--zo-separator-strong); cursor: pointer; }
.zo-sizes .shape { display: block; border-radius: 2px; box-shadow: inset 0 0 0 1.5px currentColor; }
.zo-sizes button[aria-pressed="true"] { background: var(--zo-ink-primary); color: var(--zo-canvas); box-shadow: none; }

/* Founder note: the solo-builder voice, used sparingly */
.zo-founder { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--zo-radius-card); background: var(--zo-surface-1); }
.zo-founder .face { width: 40px; height: 40px; border-radius: 20px; flex: none; background: var(--zo-surface-3); display: flex; align-items: center; justify-content: center; font: 600 15px/1 var(--zo-font); color: var(--zo-ink-primary); }
.zo-founder .sig { margin-top: 8px; font: 600 13px/18px var(--zo-font); }
.zo-founder .sig span { color: var(--zo-ink-secondary); font-weight: 400; }

/* Club: crew row, posts, reactions */
.zo-crew { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--zo-margin) * -1); padding: 4px 0; }
.zo-crew .m { display: grid; justify-items: center; gap: 4px; width: 56px; flex: none; }
.zo-av { width: 48px; height: 48px; border-radius: 24px; background: var(--zo-surface-3); display: flex; align-items: center; justify-content: center; font: 600 16px/1 var(--zo-font); color: var(--zo-ink-primary); position: relative; flex: none; }
.zo-av.sm { width: 32px; height: 32px; font-size: 13px; }
.zo-av.trained { box-shadow: 0 0 0 2px var(--zo-canvas), 0 0 0 4px var(--zo-ink-primary); }
.zo-av .tick { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 9px; background: var(--zo-ink-primary); color: var(--zo-canvas); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--zo-canvas); }
.zo-av .tick .zo-icon { width: 12px; height: 12px; stroke-width: 2.4; }
.zo-post { background: var(--zo-surface-1); border-radius: var(--zo-radius-card); overflow: hidden; }
.zo-post .who { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.zo-post .acts { display: flex; align-items: center; gap: 8px; padding: 10px 14px 12px; }
.zo-react { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px; border: 0; background: var(--zo-surface-2); color: var(--zo-ink-primary); font: 600 13px/18px var(--zo-font); }
.zo-react.on { background: var(--zo-ink-primary); color: var(--zo-canvas); }
.zo-stack { display: flex; }
.zo-stack .zo-av { margin-left: -8px; box-shadow: 0 0 0 2px var(--zo-surface-1); }
.zo-stack .zo-av:first-child { margin-left: 0; }

/* The card and the share card scale with their own width (designed at 353 and 300 px), so the same object
   works as a thumbnail, in the profile and as a 1080 px export. */
.zo-member, .zo-share { container-type: inline-size; }
.zo-member { padding: 5.1% 5.7%; }
.zo-member .top .zo-mark { width: 8.5cqw; height: 8.5cqw; }
.zo-member .club, .zo-member .no { font-size: 3.68cqw; line-height: 1.38; }
.zo-member .name { font-size: 7.37cqw; line-height: 1.15; }
.zo-member .stats { gap: 5.1cqw; }
.zo-member .stats b { font-size: 5.38cqw; line-height: 1.16; }
.zo-member .stats span, .zo-member .founding { font-size: 3.12cqw; line-height: 1.2; }
.zo-member .founding { height: 6.23cqw; padding: 0 2.3cqw; margin-top: 1.7cqw; }
.zo-member.back { gap: 2.8cqw; }
.zo-member.back .zo-qr { width: 31.7cqw; height: 31.7cqw; padding: 2.3cqw; }
.zo-share .tl { top: 4.7cqw; left: 4.7cqw; }
.zo-share .tl .zo-mark { width: 7.3cqw; height: 7.3cqw; }
.zo-share .foot { top: 4.7cqw; right: 4.7cqw; font-size: 3.7cqw; }
.zo-share .data { left: 5.3cqw; right: 5.3cqw; bottom: 4.7cqw; }
.zo-share .wname { font-size: 7.3cqw; line-height: 1.18; }
.zo-share .wmeta { font-size: 4cqw; line-height: 1.33; }
.zo-share .nums { gap: 5.3cqw; margin-top: 3.3cqw; }
.zo-share .nums b { font-size: 7.3cqw; line-height: 1.1; }
.zo-share .nums span { font-size: 3.7cqw; }
.zo-share .pr { font-size: 4cqw; height: 8.7cqw; padding: 0 3.3cqw; border-radius: 4.35cqw; margin-top: 3.3cqw; }
.zo-share .mini-rail { margin-top: 3.3cqw; height: 1.4cqw; }

@media (prefers-reduced-motion: reduce) {
  .zo-disclosure .zo-icon { transition: none; }
  .zo-btn, .zo-step, .zo-toggle, .zo-toggle::after { transition-property: background-color, color, opacity; }
  .zo-btn:active:not([disabled]), .zo-btn.is-pressed, .zo-step:active { transform: none; }
  .zo-spinner { animation: none; border-right-color: currentColor; opacity: .5; }
}

/* v1.5: member photo on the card (testers, profile) and Sammy's photo on his note */
.zo-founder .face.photo { overflow: hidden; background: none; }
.zo-founder .face.photo svg { display: block; width: 100%; height: 100%; }
.zo-av .ph { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.zo-av .ph svg { display: block; width: 100%; height: 100%; }

/* v1.5: testimonials as a deck of tester cards */
.zo-deck { position: relative; padding: 18px 12px 10px; }
.zo-deck .under { position: absolute; left: 22px; right: 22px; top: 10px; transform: rotate(4deg); opacity: .55; }
.zo-deck .under.two { transform: rotate(-5deg) translateY(6px); opacity: .35; }
.zo-deck .front { position: relative; transform: rotate(-1.5deg); }
.zo-quote { margin-top: 18px; font: 600 24px/30px var(--zo-font); letter-spacing: -.2px; }
.zo-quote::before { content: "\201C"; display: block; font: 700 64px/40px var(--zo-font); height: 30px; color: var(--zo-ink-tertiary); }
.zo-dots { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.zo-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--zo-surface-3); }
.zo-dots i.on { width: 18px; background: var(--zo-ink-primary); }

/* v1.5 voice, concept A: the 01 button stretches into an Onyx capsule over the tab bar (like the Dynamic Island) */
.zo-capsule { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px 0 10px; border-radius: 32px; background: var(--zo-brand-onyx); color: var(--zo-brand-ink); box-shadow: 0 10px 30px rgba(2,2,2,.28); }
.zo-dark .zo-capsule { box-shadow: inset 0 0 0 1px var(--zo-brand-edge); }
.zo-capsule .m { width: 44px; height: 44px; border-radius: 22px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--zo-brand-signal); background: rgba(247,246,241,.08); }
.zo-capsule .m.ok { background: var(--zo-brand-ink); color: var(--zo-brand-onyx); }
.zo-capsule .txt { flex: 1; min-width: 0; }
.zo-capsule .h { font: 500 11px/13px var(--zo-font); color: var(--zo-brand-ink2); }
.zo-capsule .w { font: 600 17px/22px var(--zo-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zo-capsule .lv { display: flex; align-items: center; gap: 3px; height: 24px; flex: none; }
.zo-capsule .lv i { width: 3px; border-radius: 2px; background: var(--zo-brand-ink); }
.zo-capsule .u { appearance: none; border: 0; background: var(--zo-brand-ink); color: var(--zo-brand-onyx); height: 36px; padding: 0 14px; border-radius: 18px; font: 600 15px/20px var(--zo-font); flex: none; }

/* v1.5 voice, concept B: the poster. Your sentence in display type; understood words underlined in ink */
.zo-poster { flex: 1; display: flex; flex-direction: column; padding: 24px 20px 0; }
.zo-poster .say { margin-top: 16px; font: 700 52px/56px var(--zo-font); font-stretch: 75%; letter-spacing: -1px; color: var(--zo-ink-tertiary); }
.zo-poster .say span { color: var(--zo-ink-primary); }
.zo-poster .say span.live { color: var(--zo-ink-tertiary); }
.zo-poster .say span.k { text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 8px; text-decoration-color: var(--zo-ink-primary); }
.zo-poster .go { margin-top: 24px; display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--zo-ink-primary); color: var(--zo-canvas); font: 600 15px/20px var(--zo-font); }
.zo-hold { position: relative; width: 72px; height: 72px; border-radius: 36px; background: var(--zo-ink-primary); color: var(--zo-canvas); display: flex; align-items: center; justify-content: center; }
.zo-hold::before, .zo-hold::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--zo-ink-primary); opacity: .22; }
.zo-hold::after { inset: -26px; opacity: .1; }

/* v1.5 voice, concept C: the command sheet. What you said on top, what 01 can do as rows */
.zo-heard { font: 600 24px/30px var(--zo-font); letter-spacing: -.2px; }
.zo-heard .live { color: var(--zo-ink-tertiary); }
.zo-cmd .zo-row .kind { font: 400 13px/18px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-cmd .zo-row.top { box-shadow: inset 0 0 0 2px var(--zo-ink-primary); border-radius: var(--zo-radius-control); }


/* ===== v1.6: the card is metal, in editions ===== */
@property --sx { syntax: "<percentage>"; inherits: false; initial-value: 62%; }
.zo-member, .zo-member.ed-auto, .zo-member.ed-onyx { --ed-1: var(--zo-ed-onyx-1); --ed-2: var(--zo-ed-onyx-2); --ed-3: var(--zo-ed-onyx-3); --ed-4: var(--zo-ed-onyx-1); --ed-ink: var(--zo-ed-onyx-ink); --ed-ink2: var(--zo-ed-onyx-ink2); --ed-ink3: var(--zo-ed-onyx-ink3); --ed-mark: var(--zo-ed-onyx-mark); --ed-shine: 16%; }
.zo-member.ed-pink { --ed-1: var(--zo-ed-pink-1); --ed-2: var(--zo-ed-pink-2); --ed-3: var(--zo-ed-pink-3); --ed-4: var(--zo-ed-pink-4); --ed-ink: var(--zo-ed-pink-ink); --ed-ink2: var(--zo-ed-pink-ink2); --ed-ink3: var(--zo-ed-pink-ink3); --ed-mark: var(--zo-ed-pink-mark); --ed-shine: 42%; }
.zo-member.ed-chrome { --ed-1: var(--zo-ed-chrome-1); --ed-2: var(--zo-ed-chrome-2); --ed-3: var(--zo-ed-chrome-3); --ed-4: var(--zo-ed-chrome-4); --ed-ink: var(--zo-ed-chrome-ink); --ed-ink2: var(--zo-ed-chrome-ink2); --ed-ink3: var(--zo-ed-chrome-ink3); --ed-mark: var(--zo-ed-chrome-mark); --ed-shine: var(--zo-ed-chrome-shine); }
.zo-member.ed-neon { --ed-1: var(--zo-ed-neon-1); --ed-2: var(--zo-ed-neon-2); --ed-3: var(--zo-ed-neon-3); --ed-4: var(--zo-ed-neon-1); --ed-ink: var(--zo-ed-neon-ink); --ed-ink2: var(--zo-ed-neon-ink2); --ed-ink3: var(--zo-ed-neon-ink3); --ed-mark: var(--zo-ed-neon-mark); --ed-shine: 14%; }
.zo-member { background: var(--ed-2) linear-gradient(155deg, var(--ed-1) 0%, var(--ed-2) 42%, var(--ed-3) 72%, var(--ed-4) 100%); color: var(--ed-ink); }
.zo-member .top .zo-mark, .zo-member.is-trial.ed-pink .top .zo-mark { color: var(--ed-mark); }
.zo-member .club, .zo-member .no { color: var(--ed-ink2); }
.zo-member .stats span { color: var(--ed-ink3); }
/* Brushed grain and a soft specular band: tilt moves --sx; it sweeps once on arrival (motion.js zoCardMetal). */
.zo-member .sheen { inset: 0; mix-blend-mode: normal;
  background:
    linear-gradient(104deg, transparent calc(var(--sx) - 38%), color-mix(in srgb, white calc(var(--ed-shine) * .25), transparent) calc(var(--sx) - 18%), color-mix(in srgb, white var(--ed-shine), transparent) var(--sx), color-mix(in srgb, white calc(var(--ed-shine) * .25), transparent) calc(var(--sx) + 18%), transparent calc(var(--sx) + 38%)),
    repeating-linear-gradient(90deg, color-mix(in srgb, white 1.4%, transparent) 0 1px, transparent 1px 3px); }
.zo-member .founding { background: color-mix(in srgb, var(--zo-brand-signal) 14%, transparent); }
.zo-member.ed-pink .founding, .zo-member.ed-chrome .founding, .zo-member.ed-neon .founding, .zo-theme-retro .zo-member.ed-auto .founding, .zo-theme-freak .zo-member.ed-auto .founding { background: color-mix(in srgb, var(--ed-ink) 12%, transparent); color: var(--ed-ink); }
.zo-member.ed-pink .stripe, .zo-member.ed-chrome .stripe { background: var(--ed-ink); }
.zo-member.ed-pink { box-shadow: inset 0 1px 0 color-mix(in srgb, white 50%, transparent), 0 18px 40px color-mix(in srgb, var(--zo-ed-pink-2) 30%, transparent); }
.zo-member.ed-chrome { box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), inset 0 -1px 0 color-mix(in srgb, black 40%, transparent), 0 18px 40px color-mix(in srgb, black 30%, transparent); }
/* Edition details: neon gets the striped sunset and the four-colour stripe (v1.7: from the edition tokens, the same on every page), chrome the etched sigil, pink a pearl drift. */
.zo-member.ed-neon::before, .zo-theme-retro .zo-member.ed-auto::before { content: ""; position: absolute; right: -8%; bottom: -26%; width: 38%; aspect-ratio: 1; border-radius: 50%; opacity: .9; pointer-events: none;
  background: linear-gradient(to bottom, var(--zo-ed-neon-sun-1), var(--zo-ed-neon-sun-2) 30%, var(--zo-ed-neon-sun-3) 50%, var(--zo-ed-neon-sun-4) 70%, var(--zo-ed-neon-sun-5));
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 9%, transparent 9% 12%); mask-image: repeating-linear-gradient(to bottom, black 0 9%, transparent 9% 12%); }
.zo-member.ed-neon .stripe, .zo-theme-retro .zo-member.ed-auto .stripe { background: linear-gradient(90deg, var(--zo-ed-neon-stripe-1), var(--zo-ed-neon-stripe-2), var(--zo-ed-neon-stripe-3), var(--zo-ed-neon-stripe-4)); }
.zo-member.ed-pink::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 90% at 85% 10%, color-mix(in srgb, white 35%, transparent), transparent 60%), radial-gradient(60% 80% at 10% 100%, color-mix(in srgb, var(--zo-ed-pink-4) 70%, transparent), transparent 70%); }

/* Card back v1.6: the styled code on the left, who it is on the right */
.zo-member.back { flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; gap: 0 5%; padding: 5.1% 5.7%; }
.zo-member.back .zo-qr.styled { width: 47cqw; height: 47cqw; padding: 0; background: none; border-radius: 3.4cqw; flex: none; position: relative; z-index: 1; color: var(--zo-brand-onyx); }
.zo-qr.styled svg { display: block; width: 100%; height: 100%; }
.zo-qr.styled .bg { fill: var(--zo-brand-ink); }
.zo-qr.styled .tile { fill: var(--zo-brand-onyx); }
.zo-qr.styled .m { color: var(--zo-brand-signal); }
.zo-member.back .side { flex: 1 1 0; position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.zo-member.back .side .zo-mark { width: 8.5cqw; height: 8.5cqw; color: var(--ed-mark); }
.zo-member.back .side .name { font-size: 4.8cqw; line-height: 1.2; }
.zo-member.back .side .url { font: 600 3.4cqw/1.2 var(--zo-font); color: var(--ed-ink3); }

/* v1.6 voice gesture: press and hold the 01 button, talk, let go. */
.zo-capsule { position: relative; overflow: hidden; }
.zo-capsule.cancel { opacity: .72; }
.zo-capsule .go { position: absolute; left: 0; bottom: 0; height: 3px; width: 62%; background: var(--zo-brand-ink); }
.zo-talk { position: absolute; z-index: 7; left: 50%; bottom: 24px; width: 56px; height: 56px; margin-left: -28px; border-radius: 28px; display: flex; align-items: center; justify-content: center; background: var(--zo-ink-primary); color: var(--zo-canvas); }
.zo-talk.press { transform: scale(.94); }
.zo-talk.press::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(var(--zo-ink-primary) 0 64%, transparent 64%); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), black calc(100% - 3px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), black calc(100% - 3px)); }
.zo-talk.listening { width: 64px; height: 64px; margin-left: -32px; bottom: 20px; border-radius: 32px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--zo-ink-primary) 22%, transparent), 0 0 0 14px color-mix(in srgb, var(--zo-ink-primary) 9%, transparent); }
.zo-talk.cancel { background: var(--zo-surface-3); color: var(--zo-ink-secondary); }
.zo-touch { position: absolute; z-index: 8; left: 50%; bottom: 26px; width: 52px; height: 52px; margin-left: -26px; border-radius: 26px; background: color-mix(in srgb, var(--zo-ink-tertiary) 40%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--zo-canvas) 70%, transparent); pointer-events: none; }
.zo-cancel-hint { position: absolute; z-index: 7; left: 0; right: 0; bottom: 86px; display: flex; justify-content: center; align-items: center; gap: 4px; font: 500 13px/18px var(--zo-font); color: var(--zo-ink-secondary); }

/* v1.6: the cybersigil, etched into the Chrome card edition (and used by the Freak theme). */
:root { --sigil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60'><g id='h'><path d='M144 30C118 22 78 12 18 28C70 20 116 28 144 35Z'/><path d='M122 23C113 12 102 5 86 1C99 9 107 15 116 25Z'/><path d='M110 31C101 43 89 51 71 58C86 48 96 40 104 30Z'/><path d='M66 20C59 13 52 9 42 7C51 12 56 16 61 22Z'/><path d='M40 25C30 31 19 34 3 34C17 30 27 27 36 23Z'/><path d='M86 28C80 34 74 37 64 38C72 35 78 31 82 27Z'/></g><g transform='matrix(-1 0 0 1 300 0)'><path d='M144 30C118 22 78 12 18 28C70 20 116 28 144 35Z'/><path d='M122 23C113 12 102 5 86 1C99 9 107 15 116 25Z'/><path d='M110 31C101 43 89 51 71 58C86 48 96 40 104 30Z'/><path d='M66 20C59 13 52 9 42 7C51 12 56 16 61 22Z'/><path d='M40 25C30 31 19 34 3 34C17 30 27 27 36 23Z'/><path d='M86 28C80 34 74 37 64 38C72 35 78 31 82 27Z'/></g><path d='M150 2L157 30L150 58L143 30Z'/></svg>"); }
.zo-member.ed-chrome::before, .zo-theme-freak .zo-member.ed-auto::before { content: ""; position: absolute; right: -6%; top: 30%; width: 72%; height: 26%; pointer-events: none; background: color-mix(in srgb, white 9%, transparent); -webkit-mask: var(--sigil) no-repeat right center / contain; mask: var(--sigil) no-repeat right center / contain; }


/* ===== v1.7 ===== */
/* Real photos: a portrait on the card (cropped inside the round source) and on the founder note. */
.zo-founder .face.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
/* Sammy's badge: a sticker in the card's own ink, slightly off-angle. Only card No. 0001 has one. */
.zo-member .founding.badge { margin-left: 1.6cqw; background: transparent; color: var(--ed-ink); box-shadow: inset 0 0 0 1.5px var(--ed-ink); font-weight: 700; transform: rotate(-4deg); }

/* The week code: your member number as a training week (codes.js). Filled = 1, faint = 0. */
.zo-weekcode svg { display: block; width: 100%; height: auto; overflow: visible; }
.zo-weekcode rect.on { fill: var(--wk-ink, var(--zo-ink-primary)); }
.zo-weekcode rect.off { fill: color-mix(in srgb, var(--wk-ink, var(--zo-ink-primary)) 26%, transparent); }
.zo-weekcode text { fill: var(--wk-ink3, var(--zo-ink-secondary)); font: 600 14px var(--zo-font); }
.zo-member .zo-weekcode { --wk-ink: var(--ed-ink); --wk-ink3: var(--ed-ink3); }
.zo-member.back.wk { flex-direction: column; justify-content: space-between; align-items: stretch; text-align: left; gap: 0; padding: 5.1% 5.7% 6.2%; }
.zo-member.back.wk > :not(.sheen):not(.stripe) { position: relative; z-index: 1; } /* 4 Oct: the stripe and sheen stay pinned to the card edge */
.zo-member.back.wk .zo-weekcode { margin: 0 1%; }
.zo-member.back.wk .foot .name { font-size: 4.8cqw; line-height: 1.2; }
.zo-member.back.wk .foot .no { color: var(--ed-ink2); }

/* QR variations that any camera reads */
.zo-qrv { width: 100%; aspect-ratio: 1; }
.zo-qrv svg { display: block; width: 100%; height: 100%; }
.zo-qrv.rail { color: var(--zo-brand-onyx); }
.zo-qrv.rail .bg { fill: var(--zo-brand-ink); }
.zo-qrv.etched { color: var(--ed-ink, var(--zo-brand-ink)); }

/* Exercise stills: the real exercise video's poster frame, never a drawing (v1.7). */
.zo-media.pose { background: var(--zo-surface-2); }
.zo-media.pose img { object-fit: cover; object-position: 50% 42%; }
.zo-media.pose .tag { position: absolute; left: 10px; bottom: 10px; height: 24px; padding: 0 8px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; background: var(--zo-brand-onyx); color: var(--zo-brand-ink); font: 500 11px/13px var(--zo-font); }

/* ---- Sign in v1.7b: six big digits in the rest clock's type. No boxes, no dashes, no card. ---- */
.zo-otp { position: relative; text-align: center; }
.zo-otp .cells { display: flex; justify-content: center; align-items: center; gap: 2px; cursor: text; }
.zo-otp .sp { width: 14px; }
.zo-otp .c { position: relative; width: 44px; height: 72px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  font: 700 64px/1 var(--zo-font); font-stretch: 75%; font-feature-settings: "tnum"; letter-spacing: -1px; color: var(--zo-ink-primary); transition: color var(--zo-t-label) linear; }
.zo-otp .c:empty::after { content: ""; width: 10px; height: 10px; border-radius: 5px; background: var(--zo-ink-tertiary); opacity: .35; }
.zo-otp .c.now:empty::after { width: 14px; height: 14px; border-radius: 7px; background: var(--zo-ink-primary); opacity: .6; animation: zoOtpBreath 1440ms var(--zo-brace) infinite alternate; }
@keyframes zoOtpBreath { from { opacity: .25; transform: scale(.8); } to { opacity: .7; transform: scale(1); } }
.zo-otp .c b { display: inline-block; font-weight: inherit; animation: zoRollIn var(--zo-t-quick) var(--zo-land) both; }
@keyframes zoRollIn { from { transform: translateY(60%); opacity: 0; filter: blur(2px); } }
/* Checking: the digits lift one after another, a wave */
.zo-otp.checking .c b { animation: zoWave 720ms var(--zo-brace) infinite; animation-delay: calc(var(--i) * 60ms); }
@keyframes zoWave { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-8px); } }
/* Right: a check lands under the number */
.zo-otp .okmark { display: none; width: 44px; height: 44px; margin: 6px auto 0; border-radius: 22px; align-items: center; justify-content: center; background: var(--zo-ink-primary); color: var(--zo-canvas); }
.zo-otp.ok .okmark { display: flex; animation: zoPop var(--zo-t-quick) var(--zo-land) both; }
@keyframes zoPop { from { transform: scale(.4); opacity: 0; } }
/* Wrong: one shake, the digits in the error colour, every digit kept */
.zo-otp.bad .cells { animation: zoShake 360ms var(--zo-brace); }
.zo-otp.bad .c { color: var(--zo-error); }
.zo-otp.bad .c.now b { opacity: .55; }
@keyframes zoShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.zo-otp .msg { min-height: 20px; margin-top: 10px; font: 500 15px/20px var(--zo-font); color: var(--zo-ink-secondary); display: flex; align-items: center; justify-content: center; gap: 6px; }
.zo-otp.bad .msg { color: var(--zo-error); }
.zo-otp input { position: absolute; left: 0; top: 0; width: 100%; height: 72px; opacity: 0; border: 0; font-size: 16px; caret-color: transparent; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .zo-otp .c b, .zo-otp.checking .c b, .zo-otp.bad .cells, .zo-otp.ok .okmark, .zo-otp .c.now:empty::after { animation: none; }
}
/* The first sign-in screen: real moments from the app, fanned, on a light pool */
.zo-peek { position: relative; height: 300px; margin: 0 -20px; }
.zo-peek::before { content: ""; position: absolute; inset: -30px 0 -10px; background: radial-gradient(55% 60% at 50% 50%, color-mix(in srgb, var(--zo-ink-primary) 8%, transparent), transparent 72%); }
.zo-peek .t { position: absolute; border-radius: 22px; overflow: hidden; background: var(--zo-surface-1); box-shadow: 0 14px 34px color-mix(in srgb, var(--zo-brand-onyx) 22%, transparent), inset 0 0 0 1px var(--zo-separator); }
.zo-peek .t img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.zo-peek .t.pose { background: var(--zo-surface-2); }/* Language: the greetings themselves are the list */
.zo-hello { display: grid; gap: 2px; margin-top: 18px; }
.zo-hello .l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--zo-separator); }
.zo-hello .l .w { font: 700 34px/40px var(--zo-font); letter-spacing: -.6px; color: var(--zo-ink-tertiary); }
.zo-hello .l .n { font: 500 13px/18px var(--zo-font); color: var(--zo-ink-secondary); text-align: right; }
.zo-hello .l.on .w { color: var(--zo-ink-primary); }
.zo-hello .l.on .n { color: var(--zo-ink-primary); display: flex; align-items: center; gap: 6px; }
.zo-greet { font: 700 56px/60px var(--zo-font); letter-spacing: -1.4px; color: var(--zo-ink-primary); }
.zo-greet .ghost { color: var(--zo-ink-tertiary); opacity: .55; font-size: 26px; line-height: 32px; letter-spacing: -.3px; display: block; }.zo-signin .hero { display: grid; justify-items: center; text-align: center; padding-top: 72px; }
.zo-signin .hero .zo-mark { color: var(--zo-ink-primary); }
.zo-provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border-radius: var(--zo-radius-button); border: 0; font: 600 17px/22px var(--zo-font); }
.zo-provider.apple { background: var(--zo-ink-primary); color: var(--zo-canvas); }
.zo-provider.google { background: var(--zo-surface-1); color: var(--zo-ink-primary); box-shadow: inset 0 0 0 1.5px var(--zo-separator-strong); }
.zo-provider.google svg { width: 18px; height: 18px; }
.zo-provider.apple svg { width: 19px; height: 19px; margin-top: -3px; }
.zo-field { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-radius: var(--zo-radius-control); background: var(--zo-surface-2); box-shadow: inset 0 0 0 1.5px var(--zo-separator-strong); font: 400 17px/24px var(--zo-font); color: var(--zo-ink-primary); }
.zo-field.focus { box-shadow: inset 0 0 0 2px var(--zo-ink-primary); }
.zo-field .ph { color: var(--zo-ink-tertiary); }
.zo-field.code { font: 600 20px/24px var(--zo-font); letter-spacing: 2px; text-transform: uppercase; }
.zo-keys { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: 6px 6px 34px; background: var(--zo-surface-3); display: grid; gap: 6px; }
.zo-keys .sugg { height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 15px/20px var(--zo-font); color: var(--zo-ink-primary); }
.zo-keys .sugg small { font: 400 12px/16px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-keys .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.zo-keys .pad span { height: 44px; border-radius: 6px; background: var(--zo-surface-1); display: flex; align-items: center; justify-content: center; font: 500 22px/1 var(--zo-font); color: var(--zo-ink-primary); }
.zo-keys .pad span.n { background: transparent; }

/* ---- Voice v1.7: let go sends; drag onto the × to cancel; listening is the mark breathing ---- */
.zo-mark-live { display: block; }
.zo-mark-live .bar { transform-box: fill-box; transform-origin: center; }
.zo-listen .zo-mark-live .bar { animation: zoBreath 1440ms var(--zo-brace) infinite alternate; }
@keyframes zoBreath { from { opacity: .35; } to { opacity: 1; } }
.zo-heard2 { font: 600 22px/28px var(--zo-font); letter-spacing: -.2px; color: var(--zo-ink-primary); }
.zo-heard2 span { animation: zoWordIn var(--zo-t-label) var(--zo-land) both; }
.zo-heard2 span.live { color: var(--zo-ink-tertiary); }
@keyframes zoWordIn { from { opacity: 0; filter: blur(3px); } }
.zo-listen { position: absolute; z-index: 7; left: 16px; right: 16px; bottom: 122px; padding: 14px 16px; border-radius: 22px; background: var(--zo-surface-1); box-shadow: var(--zo-float), inset 0 0 0 1px var(--zo-separator); }
.zo-dark .zo-listen { background: var(--zo-surface-2); }
.zo-listen .h { display: flex; align-items: center; gap: 8px; font: 500 13px/18px var(--zo-font); color: var(--zo-ink-secondary); margin-bottom: 4px; }
.zo-listen.cancel { opacity: .55; }
.zo-listen .go { position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--zo-ink-primary) 12%, transparent); overflow: hidden; }
.zo-listen .go b { display: block; height: 100%; width: 62%; background: var(--zo-ink-primary); }
.zo-talk2 { position: absolute; z-index: 8; left: 50%; bottom: 22px; width: 60px; height: 60px; margin-left: -30px; border-radius: 30px; display: flex; align-items: center; justify-content: center; background: var(--zo-ink-primary); color: var(--zo-canvas); box-shadow: 0 0 0 6px color-mix(in srgb, var(--zo-ink-primary) 10%, transparent); }
.zo-talk2 .zo-mark-live { width: 26px; height: 26px; }
.zo-talk2.away { opacity: .5; }
.zo-xtarget { position: absolute; z-index: 8; left: 50%; bottom: 30px; margin-left: -128px; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: var(--zo-surface-2); color: var(--zo-ink-secondary); box-shadow: inset 0 0 0 1.5px var(--zo-separator-strong); transition: transform var(--zo-t-quick) var(--zo-land); }
.zo-xtarget.hot { transform: scale(1.36); background: var(--zo-error); color: var(--zo-canvas); box-shadow: none; }
.zo-xtarget .lbl { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 12px/16px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-xtarget.hot .lbl { display: none; }
.zo-holding .zo-tabbar .zo-tab, .zo-holding .zo-tabbar .zo-tab-main { opacity: .16; transition: opacity var(--zo-t-label) linear; }
.zo-dragpath { position: absolute; z-index: 7; left: 50%; bottom: 51px; height: 2px; margin-left: -84px; width: 64px; background: repeating-linear-gradient(90deg, var(--zo-ink-tertiary) 0 4px, transparent 4px 8px); opacity: .7; }
.zo-finger { position: absolute; z-index: 9; bottom: 26px; width: 52px; height: 52px; border-radius: 26px; background: color-mix(in srgb, var(--zo-ink-tertiary) 40%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--zo-canvas) 70%, transparent); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .zo-listen .zo-mark-live .bar, .zo-heard2 span { animation: none; } }

/* ---- Workout, talking to you (v1.7 directions) ---- */
.zo-coach { display: flex; gap: 10px; align-items: flex-start; }
.zo-coach .who { flex: none; margin-top: 4px; width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--zo-ink-primary); color: var(--zo-canvas); }
.zo-coach .who .zo-mark { width: 14px; height: 14px; }
.zo-coach .say { font: 600 28px/36px var(--zo-font); letter-spacing: -.4px; color: var(--zo-ink-primary); }
.zo-coach .say .pair { white-space: nowrap; }
.zo-coach .say.s { font-size: 17px; line-height: 26px; letter-spacing: 0; }
.zo-coach .say.s .zo-num.up { font-size: 15px; }
.zo-coach .say.dim { color: var(--zo-ink-secondary); font-weight: 500; }
/* 4 Oct (Sammy): numbers in a coach line are data, not a form field: no box, no underline. Bold condensed numerals,
   the rest clock's type. A gain ("+6 kg") is the ink pill, the same as the "+1 rep" badge. Editing happens in the steppers. */
.zo-num { font-weight: 800; font-stretch: 75%; font-size: 1.14em; letter-spacing: .2px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.zo-num.up { display: inline-flex; align-items: center; height: 1.35em; padding: 0 .45em; border-radius: 999px; background: var(--zo-ink-primary); color: var(--zo-canvas); font-size: .82em; font-stretch: 85%; letter-spacing: 0; vertical-align: .1em; }
.zo-said { display: grid; gap: 10px; }
.zo-said .old { opacity: .5; }
.zo-said .old .say { font-size: 15px; line-height: 20px; font-weight: 500; }
.zo-ghostbar { position: relative; height: 10px; border-radius: 5px; background: var(--zo-surface-3); }
.zo-ghostbar b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--zo-ink-primary); }
.zo-ghostbar .g { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed color-mix(in srgb, var(--zo-ink-primary) 55%, transparent); }
.zo-ghostrow { display: grid; grid-template-columns: 64px 1fr 56px; gap: 10px; align-items: center; padding: 6px 0; }
.zo-rail i.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--zo-ink-primary) 45%, transparent); }
.zo-tele { font: 700 40px/44px var(--zo-font); letter-spacing: -.8px; color: var(--zo-ink-primary); }
.zo-tele .n { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; font-feature-settings: "tnum"; }
.zo-tele .q { color: var(--zo-ink-tertiary); }
.zo-tele.s { font-size: 32px; line-height: 38px; letter-spacing: -.5px; }
.zo-earbud { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--zo-surface-2); font: 500 13px/18px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-swipe { display: grid; justify-items: center; gap: 4px; font: 500 13px/18px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-dir { display: inline-flex; height: 24px; align-items: center; padding: 0 10px; border-radius: 12px; background: var(--zo-ink-primary); color: var(--zo-canvas); font: 600 12px/16px var(--zo-font); }
/* ===== Round 1 (4 Oct 2026): library, builder, exercise detail, swap, history, scheduling ===== */
/* Exercise thumbnails are the MoveKit poster frame, cropped square. Never a figure drawn by us. */
.zo-thumb { flex: none; width: 48px; height: 48px; border-radius: var(--zo-radius-control); overflow: hidden; background: var(--zo-surface-2); }
.zo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.zo-thumb.l { width: 64px; height: 64px; }
.zo-thumbs { display: flex; }
.zo-thumbs .zo-thumb { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 0 0 2px var(--zo-surface-1); }
.zo-thumbs .zo-thumb + .zo-thumb { margin-left: -8px; }
.zo-thumbs .more { flex: none; width: 36px; height: 36px; margin-left: -8px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--zo-surface-2); box-shadow: 0 0 0 2px var(--zo-surface-1); font: 600 13px/18px var(--zo-font); color: var(--zo-ink-secondary); }

/* The week, as seven days. plan = ring, done = ink disc with a check, today = bold label, on = chosen in the schedule. */
.zo-week7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.zo-week7 .d { display: grid; justify-items: center; gap: 6px; font: 500 12px/16px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-week7 .d b { width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--zo-surface-2); color: var(--zo-ink-secondary); font: 600 15px/20px var(--zo-font); font-feature-settings: "tnum"; }
.zo-week7 .d.plan b { background: transparent; box-shadow: inset 0 0 0 2px var(--zo-ink-primary); color: var(--zo-ink-primary); }
.zo-week7 .d.done b, .zo-week7 .d.on b { background: var(--zo-ink-primary); color: var(--zo-canvas); box-shadow: none; }
.zo-week7 .d.today { color: var(--zo-ink-primary); font-weight: 700; }
.zo-week7 .d.today b { outline: 2px solid var(--zo-ink-primary); outline-offset: 2px; }
.zo-week7.big .d b { width: 42px; height: 42px; border-radius: 21px; font-size: 17px; }

/* Library */
.zo-plan { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--zo-radius-card); background: var(--zo-surface-1); }
.zo-plan .zo-thumb { width: 76px; height: 76px; border-radius: 12px; }
.zo-plan .grow { flex: 1; min-width: 0; }
.zo-exgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zo-excard { border-radius: var(--zo-radius-card); background: var(--zo-surface-1); overflow: hidden; }
.zo-excard .zo-media { height: 112px; border-radius: 0; }
.zo-excard .t { padding: 8px 10px 10px; }
.zo-excard.picked { box-shadow: inset 0 0 0 2px var(--zo-ink-primary); }
/* Posters are always light, so the pick mark uses the fixed brand pair, like the poster tag. */
.zo-excard .pick { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1.5px var(--zo-brand-onyx); color: var(--zo-brand-ink); }
.zo-excard.picked .pick { background: var(--zo-brand-onyx); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }

/* Builder: rows you can drag by the grip. The lifted row rises with a shadow; a dashed slot shows where it lands. */
.zo-build { display: grid; gap: 8px; }
.zo-brow { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 6px 10px 10px; border-radius: var(--zo-radius-card); background: var(--zo-surface-1); }
.zo-brow .grow { flex: 1; min-width: 0; }
.zo-brow .grip { width: 36px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--zo-ink-tertiary); }
.zo-brow .n { width: 18px; text-align: center; color: var(--zo-ink-tertiary); font: 600 13px/18px var(--zo-font); font-feature-settings: "tnum"; }
.zo-brow.lifted { position: relative; z-index: 2; transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 28px rgba(2,2,2,.22), 0 0 0 1.5px var(--zo-ink-primary); transition: transform var(--zo-t-quick) var(--zo-land), box-shadow var(--zo-t-quick) var(--zo-land); }
.zo-brow.lifted .grip { color: var(--zo-ink-primary); }
.zo-slot { height: 72px; border-radius: var(--zo-radius-card); box-shadow: inset 0 0 0 1.5px var(--zo-separator-strong); background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--zo-ink-primary) 5%, transparent) 8px 16px); }
.zo-sum { display: flex; gap: 6px; flex-wrap: wrap; }

/* Exercise detail */
.zo-cues { display: grid; gap: 12px; counter-reset: cue; }
.zo-cues li { list-style: none; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font: 400 17px/24px var(--zo-font); color: var(--zo-ink-primary); }
.zo-cues li::before { counter-increment: cue; content: counter(cue); width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--zo-surface-2); font: 600 13px/18px var(--zo-font); color: var(--zo-ink-primary); }
.zo-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.zo-badge.ink { background: var(--zo-ink-primary); color: var(--zo-canvas); }
.zo-badge.ink .zo-icon { width: 14px; height: 14px; margin-right: 4px; }
.zo-sets { display: flex; flex-wrap: wrap; gap: 6px; }
.zo-sets span { height: 28px; padding: 0 9px; border-radius: 8px; display: inline-flex; align-items: center; background: var(--zo-surface-2); font: 500 13px/18px var(--zo-font); font-feature-settings: "tnum"; color: var(--zo-ink-primary); }
.zo-sets span.best { background: var(--zo-ink-primary); color: var(--zo-canvas); font-weight: 600; }

/* Swap: each option says why it fits */
.zo-alt { display: flex; gap: 12px; align-items: center; padding: 10px 12px 10px 10px; border-radius: var(--zo-radius-card); background: var(--zo-surface-2); }
.zo-alt .grow { flex: 1; min-width: 0; }
.zo-alt .why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.zo-alt .why span { height: 22px; padding: 0 8px; border-radius: 11px; display: inline-flex; align-items: center; background: var(--zo-surface-1); font: 500 12px/16px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-alt.on { background: var(--zo-surface-1); box-shadow: inset 0 0 0 2px var(--zo-ink-primary); }
.zo-alt.on .why span { background: var(--zo-surface-2); color: var(--zo-ink-primary); }
.zo-alt .m-radio, .zo-alt .rad { width: 22px; height: 22px; border-radius: 11px; flex: none; box-shadow: inset 0 0 0 1.5px var(--zo-ink-tertiary); display: flex; align-items: center; justify-content: center; }
.zo-alt.on .rad { background: var(--zo-ink-primary); box-shadow: none; color: var(--zo-canvas); }

/* History */
.zo-weekhead { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 2px 8px; }
.zo-hist { display: block; padding: 14px 16px; border-radius: var(--zo-radius-card); background: var(--zo-surface-1); }
.zo-hist + .zo-hist { margin-top: 8px; }
.zo-hist .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.zo-hist .zo-rail { margin-top: 10px; }
.zo-route { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--zo-surface-2); overflow: hidden; }
.zo-route svg { display: block; width: 100%; height: 100%; }

/* Scheduling */
.zo-time { font: 700 56px/60px var(--zo-font); letter-spacing: -1.5px; font-feature-settings: "tnum"; color: var(--zo-ink-primary); }
.zo-time small { font-size: 22px; letter-spacing: 0; font-weight: 600; color: var(--zo-ink-secondary); margin-left: 4px; }
.zo-when { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--zo-radius-card); background: var(--zo-surface-1); }
.zo-when .cal { flex: none; width: 48px; border-radius: 10px; overflow: hidden; text-align: center; background: var(--zo-surface-2); }
.zo-when .cal i { display: block; font: 700 11px/18px var(--zo-font); font-style: normal; letter-spacing: .6px; text-transform: uppercase; background: var(--zo-ink-primary); color: var(--zo-canvas); }
.zo-when .cal b { display: block; font: 700 22px/30px var(--zo-font); font-feature-settings: "tnum"; color: var(--zo-ink-primary); }
@media (prefers-reduced-motion: reduce) { .zo-brow.lifted { transition: none; transform: none; } }
/* ===== Round 2 (4 Oct 2026): reviews, Learn, music, settings, outdoor, camera, Club, your data, safety ===== */
/* Workload and references as bars, never a body. The band is the usual range; the bar is what you did. */
.zo-hbars { display: grid; gap: 10px; }
.zo-hbar { display: grid; grid-template-columns: 92px 1fr 34px; gap: 10px; align-items: center; }
.zo-hbar .track { position: relative; height: 12px; border-radius: 6px; background: var(--zo-surface-2); }
.zo-hbar .band { position: absolute; top: -3px; bottom: -3px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--zo-ink-primary) 35%, transparent); }
.zo-hbar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--zo-ink-primary); }
.zo-hbar .fill.unknown { background: repeating-linear-gradient(135deg, var(--zo-surface-3) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--zo-separator-strong); }
.zo-hbar .v { text-align: right; font: 600 15px/20px var(--zo-font); font-feature-settings: "tnum"; color: var(--zo-ink-primary); }
.zo-hbar .v.dim { color: var(--zo-ink-secondary); font-weight: 500; font-size: 13px; line-height: 18px; white-space: nowrap; }
.zo-legend { display: flex; flex-wrap: wrap; gap: 12px; font: 500 12px/16px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-legend i { display: inline-block; width: 14px; height: 8px; border-radius: 3px; margin-right: 5px; vertical-align: 1px; background: var(--zo-ink-primary); }
.zo-legend i.band { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--zo-ink-primary) 35%, transparent); }
.zo-legend i.unknown { background: repeating-linear-gradient(135deg, var(--zo-surface-3) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--zo-separator-strong); }
/* A choice to make: the suggestion and two answers. */
.zo-suggest { padding: 16px; border-radius: var(--zo-radius-card); background: var(--zo-surface-1); box-shadow: inset 0 0 0 1.5px var(--zo-ink-primary); }
.zo-suggest .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.zo-ask { display: grid; gap: 8px; }
.zo-ask .q { font: 600 17px/22px var(--zo-font); color: var(--zo-ink-primary); }

/* Learn */
.zo-eyebrow { font: 700 12px/16px var(--zo-font); letter-spacing: .8px; text-transform: uppercase; color: var(--zo-ink-secondary); }
.zo-short { padding: 16px; border-radius: var(--zo-radius-card); background: var(--zo-surface-2); }
.zo-short p { margin: 6px 0 0; font: 500 17px/24px var(--zo-font); color: var(--zo-ink-primary); }
.zo-lessonrow { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--zo-radius-card); background: var(--zo-surface-1); }
.zo-lessonrow + .zo-lessonrow { margin-top: 8px; }
.zo-lessonrow .art { flex: none; width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--zo-surface-2); color: var(--zo-ink-primary); }
.zo-lessonrow .grow { flex: 1; min-width: 0; }
.zo-sure { display: flex; gap: 4px; }
.zo-sure i { width: 22px; height: 8px; border-radius: 4px; background: var(--zo-surface-3); }
.zo-sure i.on { background: var(--zo-ink-primary); }
.zo-prose { font: 400 17px/26px var(--zo-font); color: var(--zo-ink-primary); }
.zo-prose + .zo-prose { margin-top: 10px; }

.zo-np { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 6px; border-radius: 26px; background: var(--zo-surface-1); box-shadow: 0 1px 0 var(--zo-separator); }
.zo-np .art { flex: none; width: 40px; height: 40px; border-radius: 20px; background: var(--zo-brand-onyx); color: var(--zo-brand-ink); display: flex; align-items: center; justify-content: center; }
.zo-np .grow { flex: 1; min-width: 0; }
.zo-np .grow > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zo-np .zo-btn.round { width: 40px; height: 40px; }
.zo-duck { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--zo-surface-2); font: 500 12px/16px var(--zo-font); color: var(--zo-ink-secondary); }

/* Settings groups */
.zo-group-t { margin: 22px 4px 8px; font: 600 13px/18px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-row .ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--zo-surface-2); color: var(--zo-ink-primary); }

/* Your data: one choice per kind */
.zo-sync { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; min-height: 64px; padding: 8px 0; }
.zo-sync + .zo-sync { box-shadow: 0 -1px 0 var(--zo-separator); }
.zo-sync .zo-seg { width: 128px; }
.zo-sync .zo-seg button { height: 30px; font-size: 12px; }

/* Camera: a solid control deck, so labels never sit on the live picture */
.zo-viewfinder { position: relative; flex: 1; min-height: 0; margin: 0 0 0; overflow: hidden; background: #111; }
.zo-viewfinder > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zo-viewfinder .ghost { position: absolute; inset: 0; opacity: .32; mix-blend-mode: screen; }
.zo-viewfinder .grid { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33.3% - .5px), rgba(255,255,255,.35) calc(33.3% - .5px) calc(33.3% + .5px), transparent calc(33.3% + .5px) calc(66.6% - .5px), rgba(255,255,255,.35) calc(66.6% - .5px) calc(66.6% + .5px), transparent calc(66.6% + .5px)); }
.zo-camdeck { flex: none; padding: 14px 20px 40px; background: var(--zo-brand-onyx); color: var(--zo-brand-ink); }
.zo-camdeck .modes { display: flex; justify-content: center; gap: 18px; font: 600 13px/18px var(--zo-font); letter-spacing: .4px; text-transform: uppercase; color: #A9A79F; }
.zo-camdeck .modes .on { color: var(--zo-brand-ink); }
.zo-camdeck .row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.zo-shutter { width: 72px; height: 72px; border-radius: 36px; border: 4px solid var(--zo-brand-ink); padding: 4px; background: transparent; }
.zo-shutter i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--zo-brand-ink); }
.zo-camchip { height: 44px; min-width: 44px; padding: 0 12px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #2A2A28; color: var(--zo-brand-ink); font: 600 13px/18px var(--zo-font); }

/* Club safety */
.zo-held { padding: 12px 14px; border-radius: 18px 18px 6px 18px; background: var(--zo-surface-2); box-shadow: inset 0 0 0 1.5px var(--zo-separator-strong); }
.zo-held .h { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--zo-font); color: var(--zo-ink-primary); }
.zo-held .orig { margin-top: 6px; font: 400 15px/20px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-held .orig mark { background: transparent; color: var(--zo-ink-primary); text-decoration: line-through; text-decoration-thickness: 2px; }
.zo-report { padding: 14px; border-radius: var(--zo-radius-card); background: var(--zo-surface-1); }
.zo-report + .zo-report { margin-top: 8px; }
.zo-report .ctx { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--zo-surface-2); font: 400 15px/20px var(--zo-font); color: var(--zo-ink-primary); }
.zo-report .acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.zo-report .acts .zo-btn { height: 40px; font-size: 14px; }
.zo-person { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.zo-person + .zo-person { box-shadow: 0 -1px 0 var(--zo-separator); }
.zo-person .grow { flex: 1; min-width: 0; }

/* ===== The gaps (4 Oct, after the compaction) ===== */
/* 54. Logging food */
.zo-addbtn { flex: none; width: 36px; height: 36px; border: 0; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--zo-surface-2); color: var(--zo-ink-primary); }
.zo-bigact { height: 72px; border: 0; border-radius: var(--zo-radius-card); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 12px 14px; background: var(--zo-surface-1); color: var(--zo-ink-primary); font: 600 15px/20px var(--zo-font); text-align: left; }
.zo-field .zo-caret { display: inline-block; width: 2px; height: 20px; margin-left: 1px; vertical-align: -4px; background: var(--zo-ink-primary); }
.zo-scanview { background: radial-gradient(120% 80% at 30% 20%, #3A3631, #191816 70%); }
.zo-pack { position: absolute; left: 50%; top: 46%; width: 250px; padding: 22px 22px 26px; margin-left: -125px; transform: translateY(-50%) rotate(-5deg); border-radius: 10px; background: linear-gradient(160deg, #F2EEE4, #DCD6C8); box-shadow: 0 20px 40px rgba(0,0,0,.45); display: grid; gap: 8px; }
.zo-pack > i { display: block; height: 7px; border-radius: 3px; background: #B8B2A4; }
.zo-pack .t1 { width: 80%; } .zo-pack .t2 { width: 64%; } .zo-pack .t3 { width: 72%; }
.zo-pack .code { justify-self: center; margin: 6px 0; }
.zo-ean { display: block; height: auto; }
.zo-bcframe { position: absolute; left: 50%; top: 46%; width: 250px; height: 140px; margin: -70px 0 0 -125px; }
.zo-bcframe i { position: absolute; width: 30px; height: 30px; border: 3px solid var(--zo-brand-ink); }
.zo-bcframe i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.zo-bcframe i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.zo-bcframe i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.zo-bcframe i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.zo-bcframe.got { width: 196px; height: 108px; margin: -40px 0 0 -98px; transform: rotate(-5deg); }
.zo-bcframe.got i { border-width: 4px; }
.zo-scanhint { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; }
.zo-source { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 13px/18px var(--zo-font); color: var(--zo-ink-secondary); }
.zo-source .grow { flex: 1; min-width: 0; }
.zo-source .zo-btn.quiet { height: 32px; width: auto; padding: 0 4px; margin-right: -4px; }
.zo-macrobar .bar.plus { display: flex; }
.zo-macrobar .bar.plus b { border-radius: 0; flex: none; }
.zo-macrobar .bar.plus b.add { background: repeating-linear-gradient(-45deg, var(--k) 0 2px, color-mix(in srgb, var(--k) 40%, transparent) 2px 4px); }
/* The nutrition label in the camera, and the recognised numbers boxed (Live Text style). */
.zo-nlabel { position: absolute; left: 50%; top: 47%; width: 262px; margin-left: -131px; transform: translateY(-50%) rotate(-3deg); padding: 12px 14px 14px; background: #FBFAF6; color: #020202; border-radius: 6px; box-shadow: 0 20px 40px rgba(0,0,0,.45); font: 500 13px/16px var(--zo-font); }
.zo-nlabel .h { font: 800 22px/26px var(--zo-font); letter-spacing: -.3px; border-bottom: 6px solid #020202; padding-bottom: 4px; }
.zo-nlabel .r { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #020202; }
.zo-nlabel .r.hd { font-weight: 700; border-bottom-width: 3px; }
.zo-nlabel .r.ind span:first-child { padding-left: 12px; font-weight: 400; }
.zo-nlabel .rd { margin: -2px -4px; padding: 2px 4px; border-radius: 4px; box-shadow: 0 0 0 2px #020202; background: #FFFFFF; }
.zo-nlabel .rd.unsure { box-shadow: none; outline: 2px dashed #020202; outline-offset: 0; }
.zo-labelthumb { position: relative; flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #2A2826; }
.zo-labelthumb .zo-nlabel { zoom: .3; left: 0; top: 0; margin: 0; transform: rotate(-3deg) translate(-14px, 10px); box-shadow: none; }
.zo-badge.check { background: transparent; color: var(--zo-ink-primary); box-shadow: inset 0 0 0 1.5px var(--zo-warning); margin-right: 4px; }
.zo-badge.check .zo-icon { color: var(--zo-warning); }
.zo-toastwrap { position: absolute; left: 0; right: 0; bottom: 104px; display: flex; justify-content: center; z-index: 5; }
/* 55. Share my 14 days: an Onyx poster built from the recap. Scales with its width (container units). */
.zo-s14 { position: relative; container-type: inline-size; border-radius: 20px; overflow: hidden; background: radial-gradient(90% 50% at 85% 0%, color-mix(in srgb, var(--zo-brand-ink) 7%, transparent), transparent 70%), var(--zo-brand-onyx); color: var(--zo-brand-ink); font-family: var(--zo-font); }
.zo-s14 .cf { position: absolute; left: 0; right: 0; top: 41%; height: 24%; } .zo-s14 .cf .zo-confetti { z-index: 0; } .zo-s14.post .cf, .zo-s14.square .cf { display: none; }
.zo-s14 .in { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 6cqw 6cqw 6.5cqw; }
.zo-s14 .top { display: flex; align-items: center; justify-content: space-between; font: 500 3.7cqw/1.2 var(--zo-font); color: var(--zo-ink-secondary); }
.zo-s14 .top .zo-mark { width: 8cqw; height: 8cqw; color: var(--zo-brand-signal); }
.zo-s14 .hero { margin-top: 16cqw; }
.zo-s14 .hero .k { font: 600 5.6cqw/1.2 var(--zo-font); color: var(--zo-ink-secondary); }
.zo-s14 .hero .big { font: 800 23cqw/.9 var(--zo-font); font-stretch: 75%; letter-spacing: -.3cqw; text-transform: uppercase; margin-top: 1cqw; white-space: nowrap; }
.zo-s14 .dots { display: grid; grid-template-columns: repeat(14, 1fr); gap: 1.4cqw; margin-top: 5cqw; }
.zo-s14 .dots i { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 .5cqw var(--zo-surface-3); }
.zo-s14 .dots i.on { background: var(--zo-brand-ink); box-shadow: none; }
.zo-s14 .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; margin-top: auto; padding-top: 8cqw; }
.zo-s14 .nums b { display: block; font: 800 13cqw/1 var(--zo-font); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.zo-s14 .nums span { display: block; margin-top: .8cqw; font: 500 3.7cqw/1.2 var(--zo-font); color: var(--zo-ink-secondary); }
.zo-s14 .bars { display: grid; gap: 3cqw; margin-top: 7cqw; padding-top: 5cqw; box-shadow: 0 -1px 0 var(--zo-surface-3); }
.zo-s14 .bars .r { display: grid; grid-template-columns: 15cqw 1fr 23cqw; align-items: center; gap: 3cqw; font: 600 4cqw/1.2 var(--zo-font); }
.zo-s14 .bars .b { position: relative; height: 2.6cqw; border-radius: 1.3cqw; background: var(--zo-surface-3); }
.zo-s14 .bars .b b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1.3cqw; background: var(--zo-brand-ink); }
.zo-s14 .bars .b i { position: absolute; top: -1.2cqw; bottom: -1.2cqw; width: .6cqw; margin-left: -.3cqw; border-radius: .3cqw; background: var(--zo-brand-onyx); }
.zo-s14 .bars .v { text-align: right; font-weight: 500; color: var(--zo-ink-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zo-s14 .who { margin-top: 5cqw; font: 500 3.7cqw/1.2 var(--zo-font); color: var(--zo-ink-secondary); }
.zo-s14 .who + .who { margin-top: 1cqw; }
.zo-s14.post .hero { margin-top: 7cqw; } .zo-s14.post .hero .big { font-size: 19cqw; }
.zo-s14.post .bars .r:nth-child(n+2), .zo-s14.square .bars, .zo-s14.square .dots { display: none; }
.zo-s14.square .hero { margin-top: 6cqw; } .zo-s14.square .hero .big { font-size: 18cqw; }
.zo-s14.post .nums, .zo-s14.square .nums { padding-top: 5cqw; }
/* 56. The Lock Screen with 01's notes (iOS draws the real one; this is how 01's content sits in it). */
.zo-lockscreen { position: absolute; inset: 0; display: flex; flex-direction: column; color: #F7F6F1; background: radial-gradient(110% 60% at 15% 5%, #4A3F5C, transparent 62%), radial-gradient(90% 55% at 100% 100%, #5B3A2E, transparent 62%), #141217; }
.zo-lockhead { text-align: center; margin-top: 6px; }
.zo-lockhead .lk { display: inline-flex; color: #F7F6F1; }
.zo-lockhead .d { margin-top: 6px; font: 600 19px/24px var(--zo-font); }
.zo-lockhead .t { font: 700 96px/1 var(--zo-font); font-stretch: 85%; letter-spacing: -2px; font-feature-settings: "tnum"; }
.zo-locknotes { margin-top: auto; padding: 0 10px 14px; display: grid; gap: 8px; }
.zo-inote { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 22px; background: #2B282F; color: #F7F6F1; }
.zo-inote .app { flex: none; width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--zo-brand-signal); color: var(--zo-brand-onyx); align-self: flex-start; }
.zo-inote .mid { flex: 1; min-width: 0; }
.zo-inote .tt { display: flex; justify-content: space-between; gap: 8px; font: 600 15px/20px var(--zo-font); }
.zo-inote .tt span { flex: none; font-weight: 400; font-size: 13px; color: #C9C7BF; }
.zo-inote .b { font: 400 15px/20px var(--zo-font); color: #F7F6F1; }
.zo-inote .att { flex: none; align-self: center; }
.zo-inote.older { opacity: .7; transform: scale(.95); margin-top: -2px; }
.zo-inote.big { padding: 14px 16px; }
.zo-ifaces { display: flex; }
.zo-ifaces > * { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #2B282F; display: block; }
.zo-ifaces > * + * { margin-left: -12px; }
.zo-lockfoot { display: flex; justify-content: space-between; padding: 4px 48px 36px; }
.zo-lockfoot span { width: 50px; height: 50px; border-radius: 25px; display: flex; align-items: center; justify-content: center; background: #2B282F; color: #F7F6F1; }
.zo-lockheld { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 12px 40px; background: #0C0B0E; }
.zo-iactions { width: 250px; border-radius: 14px; overflow: hidden; background: #2B282F; }
.zo-iactions div { padding: 13px 16px; font: 400 17px/22px var(--zo-font); color: #F7F6F1; }
.zo-iactions div + div { box-shadow: 0 -1px 0 #45414A; }
/* 57. Share a run or walk: the photo share card for the outdoors. The route in 01 yellow is the signature. */
.zo-runroute { position: absolute; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.zo-runroute .edge { stroke: rgba(2,2,2,.55); stroke-width: 5.2; }
.zo-runroute .line { stroke: var(--zo-brand-signal); stroke-width: 2.6; }
.zo-runroute .dot { fill: var(--zo-brand-ink); stroke: rgba(2,2,2,.6); stroke-width: 1.4; }
.zo-runroute .dot.end { fill: var(--zo-brand-signal); }
.zo-runcard .zo-runroute.big { left: 12cqw; top: 18cqw; width: 76cqw; height: 76cqw; }
.zo-runcard .zo-runroute.mini { right: 6cqw; bottom: 25cqw; width: 26cqw; height: 26cqw; }
.zo-runcard .zo-runroute.mini .edge { stroke-width: 7; } .zo-runcard .zo-runroute.mini .line { stroke-width: 3.6; }
.zo-runcard .dist { font: 800 19cqw/.95 var(--zo-font); font-stretch: 75%; letter-spacing: -.2cqw; font-variant-numeric: tabular-nums; margin-top: 1.5cqw; text-shadow: 0 1px 8px rgba(0,0,0,.35); white-space: nowrap; }
.zo-runcard .dist span { font-size: 6cqw; font-weight: 600; font-stretch: 100%; letter-spacing: 0; margin-left: 1cqw; }
.zo-runcard .dist.sm { font-size: 12cqw; }
.zo-runcard .dist em { font-style: normal; font-size: 6cqw; font-weight: 600; font-stretch: 100%; color: var(--zo-brand-on-photo-ink2); margin-left: 2cqw; }
.zo-runcard .zo-runmap { background: repeating-linear-gradient(0deg, rgba(247,246,241,.07) 0 1px, transparent 1px 9cqw), repeating-linear-gradient(90deg, rgba(247,246,241,.07) 0 1px, transparent 1px 11cqw), radial-gradient(60% 40% at 30% 30%, #1E2A22, transparent 70%), #121211; }
.zo-runcard.sticker { background: transparent; }
.zo-runcard.sticker .data { text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.zo-runcard.sticker .data > .zo-mark { display: block; width: 8cqw; height: 8cqw; color: var(--zo-brand-signal); margin-bottom: 1cqw; }
.zo-runcard.sticker .zo-runroute.big { top: 10cqw; }
.zo-runcard.sq .zo-runroute.big { left: 26cqw; top: 8cqw; width: 48cqw; height: 48cqw; }
.zo-runcard.sq.stats .zo-runroute.mini, .zo-runcard.wide.stats .zo-runroute.mini { bottom: auto; top: 16cqw; width: 22cqw; height: 22cqw; }
.zo-runcard.wide .zo-runroute.big { left: auto; right: 7cqw; top: 9cqw; width: 36cqw; height: 36cqw; }
.zo-runcard.wide .dist { font-size: 14cqw; }
.zo-checker { border-radius: 20px; background: conic-gradient(#4A4A47 25%, transparent 0 50%, #4A4A47 0 75%, transparent 0) 0 0 / 16px 16px, #3A3A38; }