@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/design-fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/design-fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/design-fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/design-fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: light;
  --plaster: #F2F2F2;
  --ink: #183115;
  --clay: #183115;
  --clay-display: #183115;
  --clay-hover: #183115;
  --fog: #526049;
  --card: #FFFFFF;
  --paper: #FFFFFF;
  --line: #D6D6D6;
  --error: #A32014;
  --on-clay: #F2F2F2;
  --scrim: #183115;
  --canvas: #F2F2F2;
  --ink: #183115;
  --scrim: #183115;
  --muted: #526049;
  --card: #FFFFFF;
  --document: #FFFFFF;
  --line: #D6D6D6;
  --field-line: #858585;
  --primary: #183115;
  --on-primary: #F2F2F2;
  --accent: #183115;
  --focus-ring: #183115;
  --focus-ring-on-green: #D9FF00;
  --switch-knob: #FFFFFF;
  --switch-track: #183115;
  --guidance: #CEDBCC;
  --own-bubble: #D9E2D7;
  --identity: #D9FF00;
  --on-identity: #183115;
  --earnings: #183115;
  --on-earnings: #F2F2F2;
  --earnings-total: #D9FF00;
  --error: #A32014;
  --font-display: Newsreader, Georgia, serif;
  --font-body: Inter, Arial, sans-serif;
  --font-mono: Inter, Arial, sans-serif;
  --font-strong: var(--font-body);
  --type-display-size: 2rem;
  --type-display-line-height: 1.15;
  --type-display-tracking: -0.02em;
  --type-title-size: 1.5rem;
  --type-title-line-height: 1.25;
  --type-title-tracking: -0.02em;
  --type-body-size: 0.9375rem;
  --type-body-line-height: 1.5;
  --type-body-tracking: 0em;
  --type-secondary-size: 0.8125rem;
  --type-secondary-line-height: 1.5;
  --type-secondary-tracking: 0em;
  --type-meta-size: 0.75rem;
  --type-meta-line-height: 1.5;
  --type-meta-tracking: 0em;
  --type-amount-input-size: 1.5625rem;
  --type-amount-input-line-height: 1.2;
  --type-amount-input-tracking: 0em;
  --type-headline-number-size: 2.125rem;
  --type-headline-number-line-height: 1.15;
  --type-headline-number-tracking: -0.02em;
  --type-text-link-size: 0.875rem;
  --type-text-link-line-height: 1.5;
  --type-text-link-tracking: 0em;
  --type-room-body-size: 1.0625rem;
  --type-room-body-line-height: 1.411764705882353;
  --type-room-body-tracking: -0.02em;
  --type-room-meta-size: 0.9375rem;
  --type-room-meta-line-height: 1.3333333333333333;
  --type-room-meta-tracking: 0em;
  --type-room-line-size: 0.8125rem;
  --type-room-line-line-height: 1.3846153846153846;
  --type-room-line-tracking: 0em;
  --type-stage-title-size: 1.75rem;
  --type-stage-title-line-height: 1.1428571428571428;
  --type-stage-title-tracking: -0.01em;
  --type-display-numeral-size: 3.625rem;
  --type-display-numeral-line-height: 1.103448275862069;
  --type-display-numeral-tracking: -0.02em;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --screen-padding-phone: 24px;
  --screen-padding-web: 32px;
  --screen-padding-room: 20px;
  --corner-control: 12px;
  --corner-surface: 12px;
  --corner-dialog: 16px;
  --corner-chip: 8px;
  --corner-bubble: 18px;
  --corner-card: 24px;
  --corner-capsule: 999px;
  --hairline: 1px;
  --control-border: 1px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --icon: 20px;
  --icon-stroke: 1.5px;
  --badge: 18px;
  --badge-dot: 10px;
  --badge-dot-ring: 2px;
  --badge-dot-inset: 3px;
  --mark: 24px;
  --dialog-width: 480px;
  --tablet: 768px;
  --content-width: 768px;
  --entry-width: 544px;
  --workspace-width: 1280px;
  --overlay-layer: 50;
  --overlay-opacity: 40%;
  --control-primary: 48px;
  --control-secondary: 44px;
  --control-fold: 44px;
  --control-segment: 44px;
  --control-header: 44px;
  --control-outlined: 44px;
  --control-plain: 44px;
  --disabled-opacity: 0.6;
  --pressed-opacity: 0.8;
  --motion-fast: 120ms;
  --motion-base: 240ms;
  --motion-slow: 320ms;
  --motion-travel: 400ms;
  --motion-mark: 600ms;
  --motion-stagger: 60ms;
  --motion-sheet: 500ms;
  --motion-hold: 400ms;
  --motion-loop: 1200ms;
  --motion-ease-settle: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-fade: cubic-bezier(0, 0, 0.58, 1);
  --motion-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-rise: 8px;
  --glass-tint: rgb(255 255 255 / 0.45);
  --glass-filter: blur(16px) saturate(1.5);
  --glass-edge: 0 0 0 1px rgb(255 255 255 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.8), inset 0 -1px 0 rgb(0 0 0 / 0.06), 0 2px 12px rgb(0 0 0 / 0.1);
  --lift-shadow: 0 1px 2px rgb(24 49 21 / 0.08), 0 8px 24px -6px rgb(24 49 21 / 0.18);
  --room-wash: linear-gradient(#CEDBCC, #F2F2F2 50%);
}
/* Under Reduce Transparency glass is the opaque card fill with the same rim. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-tint: #FFFFFF;
    --glass-filter: none;
  }
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
/* Every deep green ground draws its focus ring lime. */
.ike-earnings, [data-ground='green'], [data-conversation-register='ink'] {
  --focus-ring: var(--focus-ring-on-green);
}
@media (prefers-reduced-motion: reduce) {
  :root {
  --motion-fast: 0ms;
  --motion-base: 0ms;
  --motion-slow: 0ms;
  --motion-travel: 0ms;
  --motion-mark: 0ms;
  --motion-stagger: 0ms;
  --motion-sheet: 0ms;
  --motion-hold: 0ms;
  --motion-loop: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --brand-lime: #D9FF00;
  --brand-green: #183115;
  --brand-taupe: #AB9B8B;
  --brand-light: #F2F2F2;
  --brand-white: #FFFFFF;
  --brand-sage: #CEDBCC;
  --brand-muted: #526049;
  --brand-icon-field: #8A7F74;
}

:root { --screen-canvas: #F2F2F2;
--screen-ink: #183115;
--screen-scrim: #183115;
--screen-muted: #526049;
--screen-card: #FFFFFF;
--screen-document: #FFFFFF;
--screen-line: #D6D6D6;
--screen-field-line: #858585;
--screen-primary: #183115;
--screen-on-primary: #F2F2F2;
--screen-accent: #183115;
--screen-focus-ring: #183115;
--screen-focus-ring-on-green: #D9FF00;
--screen-switch-knob: #FFFFFF;
--screen-switch-track: #183115;
--screen-guidance: #CEDBCC;
--screen-own-bubble: #D9E2D7;
--screen-identity: #D9FF00;
--screen-on-identity: #183115;
--screen-earnings: #183115;
--screen-on-earnings: #F2F2F2;
--screen-earnings-total: #D9FF00;
--screen-error: #A32014; }
.phone { --plaster: #F2F2F2;
--ink: #183115;
--clay: #183115;
--clay-display: #183115;
--clay-hover: #183115;
--fog: #526049;
--card: #FFFFFF;
--paper: #FFFFFF;
--line: #D6D6D6;
--error: #A32014;
--on-clay: #F2F2F2;
--scrim: #183115;
--canvas: #F2F2F2;
--muted: #526049;
--document: #FFFFFF;
--field-line: #858585;
--primary: #183115;
--on-primary: #F2F2F2;
--accent: #183115;
--focus-ring: #183115;
--focus-ring-on-green: #D9FF00;
--switch-knob: #FFFFFF;
--switch-track: #183115;
--guidance: #CEDBCC;
--own-bubble: #D9E2D7;
--identity: #D9FF00;
--on-identity: #183115;
--earnings: #183115;
--on-earnings: #F2F2F2;
--earnings-total: #D9FF00; }
body {
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
}
.btn, .toolbar button, .viewer button, .fb-form .save, .fb-edit .save, .fb-form .cancel, .fb-edit .cancel {
  justify-content: center;
  border-radius: 12px;
  border-width: 0px;
  border-style: solid;
  background-color: transparent;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
}
.btn.primary, .fb-form .save, .fb-edit .save {
  min-height: 48px;
  padding-left: 16px;
  padding-right: 16px;
  background-color: var(--primary);
  border-radius: 12px;
  align-items: center;
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-strong);
  font-weight: 600;
  color: var(--on-primary);
}
.ike-button--secondary {
  min-height: 44px;
  padding-left: 16px;
  padding-right: 16px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--accent);
  align-items: center;
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--accent);
}
.ike-button--destructive {
  min-height: 44px;
  padding-left: 16px;
  padding-right: 16px;
  background-color: var(--card);
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--error);
  align-items: center;
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--error);
}
.ike-button--destructive-cell {
  min-height: 48px;
  padding: 16px;
  background-color: var(--card);
  border-radius: 12px;
  align-items: center;
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--error);
}
.btn.ghost, .toolbar button, .viewer button, .btn.plain, .fb-form .cancel, .fb-edit .cancel {
  min-height: 44px;
  padding-left: 16px;
  padding-right: 16px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--accent);
  align-items: center;
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--accent);
}
.ike-button--compact, .btn.ghost, .toolbar button, .viewer button, .btn.plain, .fb-form .cancel, .fb-edit .cancel {
  align-self: flex-start;
}
.btn:disabled, .toolbar button:disabled, .viewer button:disabled, .fb-form .save:disabled, .fb-edit .save:disabled, .fb-form .cancel:disabled, .fb-edit .cancel:disabled {
  opacity: 0.6;
}
.btn:active:not(:disabled), .toolbar button:active:not(:disabled), .viewer button:active:not(:disabled), .fb-form .save:active:not(:disabled), .fb-edit .save:active:not(:disabled), .fb-form .cancel:active:not(:disabled), .fb-edit .cancel:active:not(:disabled) {
  opacity: 0.8;
}
.ike-navigation-row:active, .ike-fold-summary:active, a.ike-about-chip:active, .ike-segment:not(:has(> input:disabled)):active {
  opacity: 0.8;
}
@media (hover: hover) {
.btn:hover:not(:disabled):not(:active), .toolbar button:hover:not(:disabled):not(:active), .viewer button:hover:not(:disabled):not(:active), .fb-form .save:hover:not(:disabled):not(:active), .fb-edit .save:hover:not(:disabled):not(:active), .fb-form .cancel:hover:not(:disabled):not(:active), .fb-edit .cancel:hover:not(:disabled):not(:active), .ike-navigation-row:hover:not(:disabled):not(:active), .ike-fold-summary:hover:not(:disabled):not(:active), a.ike-about-chip:hover:not(:disabled):not(:active), .ike-segment:not(:has(> input:disabled)):hover:not(:disabled):not(:active) {
  opacity: 0.9;
}
}
.ike-field, :where(.ike-form-field) :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="file"]) {
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background-color: var(--card);
  min-height: 48px;
  padding: 12px;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--field-line);
}
.ike-field[aria-invalid="true"], :where(.ike-form-field) :where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--error);
}
:is(.ike-field, :where(.ike-form-field) :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="file"]))::placeholder {
  color: var(--muted);
  opacity: 1;
}
.card, .bcard, .deal {
  background-color: var(--card);
  color: var(--ink);
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.ike-document, .ike-receipt {
  background-color: var(--document);
  color: var(--ink);
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
}
.ike-navigation-row {
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  min-height: 48px;
  padding: 16px;
  background-color: var(--card);
  flex-direction: row;
  align-items: center;
  gap: 12px;
  border-style: solid;
  border-width: 0px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--line);
}
.ike-group {
  background-color: var(--card);
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  overflow: hidden;
}
.ike-fold-summary {
  min-height: 44px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ike-segmented {
  flex-direction: row;
  gap: 4px;
  padding: 4px;
  background-color: var(--card);
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--field-line);
}
.ike-segment {
  flex: 1;
  min-height: 44px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  text-align: center;
}
.ike-segment:has(> input:checked), .ike-segment[aria-selected='true'] {
  background-color: var(--primary);
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-strong);
  font-weight: 600;
  color: var(--on-primary);
}
:is(.ike-earnings, [data-ground='green'], [data-conversation-register='ink']) .ike-segmented {
  background-color: #183115;
  border-color: #7F9A78;
}
:is(.ike-earnings, [data-ground='green'], [data-conversation-register='ink']) .ike-segment {
  color: #F2F2F2;
}
:is(.ike-earnings, [data-ground='green'], [data-conversation-register='ink']) .ike-segment:has(> input:checked), :is(.ike-earnings, [data-ground='green'], [data-conversation-register='ink']) .ike-segment[aria-selected='true'] {
  background-color: #F2F2F2;
  color: #183115;
}
.ike-badge {
  min-height: 18px;
  min-width: 18px;
  border-radius: 9px;
  padding-left: 4px;
  padding-right: 4px;
  background-color: var(--primary);
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0em;
  font-family: var(--font-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--on-primary);
}
.ike-badge--dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  padding-left: 0px;
  padding-right: 0px;
  border-radius: 5px;
  background-color: var(--primary);
}
.ike-conversation-button .ike-badge--dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  padding-left: 0px;
  padding-right: 0px;
  border-radius: 7px;
  border-width: 2px;
  border-style: solid;
  border-color: var(--canvas);
  background-color: var(--primary);
}
.ike-chip {
  align-self: flex-start;
  min-height: 26px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 8px;
  background-color: var(--identity);
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0em;
  font-family: var(--font-strong);
  font-weight: 600;
  color: var(--on-identity);
}
.ike-about-chip {
  min-height: 48px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 16px;
  padding-right: 4px;
  background-color: var(--canvas);
  border-radius: 12px;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.ike-about-chip-label {
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  flex: 1;
}
a.ike-about-chip {
  padding-right: 16px;
  text-decoration-line: none;
  color: var(--ink);
}
:is(.ike-earnings, [data-ground='green'], [data-conversation-register='ink']) .ike-about-chip {
  background-color: #22401E;
  color: #F2F2F2;
}
:is(.ike-earnings, [data-ground='green'], [data-conversation-register='ink']) .ike-about-chip-label {
  color: #F2F2F2;
}
.h:not(.sm) {
  font-size: 2rem;
  line-height: 2.3rem;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
  font-weight: 500;
  font-weight: 500;
  color: var(--ink);
}
.h.sm {
  font-size: 1.5rem;
  line-height: 1.875rem;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
  font-weight: 500;
  font-weight: 500;
  color: var(--ink);
}
.ike-body-title {
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  letter-spacing: 0em;
  font-family: var(--font-strong);
  font-weight: 600;
  color: var(--ink);
}
.ike-secondary {
  font-size: 0.8125rem;
  line-height: 1.21875rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
}
.ike-meta {
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
}
.num {
  font-family: var(--font-body);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.ike-amount-input {
  font-size: 1.5625rem;
  line-height: 1.875rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.bignum {
  font-size: 2.125rem;
  line-height: 2.4437499999999996rem;
  letter-spacing: -0.02em;
  font-family: var(--font-body);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.ike-field-error {
  font-size: 0.8125rem;
  line-height: 1.21875rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--error);
}
.ike-state-panel--failed {
  border-width: 1px;
  border-style: solid;
  border-color: var(--error);
}
.ike-state-panel--failed .ike-state-tag .ike-icon {
  color: var(--error);
}
.ike-state-panel--on-hold {
  border-width: 1px;
  border-style: solid;
  border-color: var(--accent);
}
.ike-navigation-row-detail {
  font-size: 0.8125rem;
  line-height: 1.21875rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
}
.ike-navigation-row-status {
  font-size: 0.8125rem;
  line-height: 1.21875rem;
  letter-spacing: 0em;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
  text-align: right;
}
.ike-navigation-row-check {
  color: var(--accent);
}
.ike-texture {
  background-color: #183115;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' shape-rendering='crispEdges'%3E%3Cpath fill='%23D9FF00' fill-opacity='0.14' d='M0 0h1v1h-1zM2 0h1v1h-1zM4 0h1v1h-1zM6 0h1v1h-1zM8 0h1v1h-1zM10 0h1v1h-1zM12 0h1v1h-1zM14 0h1v1h-1zM16 0h1v1h-1zM18 0h1v1h-1zM20 0h1v1h-1zM24 0h1v1h-1zM28 0h1v1h-1zM32 0h1v1h-1zM36 0h1v1h-1zM40 0h1v1h-1zM44 0h1v1h-1zM46 0h1v1h-1zM2 2h1v1h-1zM6 2h1v1h-1zM10 2h1v1h-1zM14 2h1v1h-1zM16 2h1v1h-1zM18 2h1v1h-1zM22 2h1v1h-1zM26 2h1v1h-1zM30 2h1v1h-1zM34 2h1v1h-1zM42 2h1v1h-1zM46 2h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM8 4h1v1h-1zM10 4h1v1h-1zM12 4h1v1h-1zM14 4h1v1h-1zM16 4h1v1h-1zM18 4h1v1h-1zM20 4h1v1h-1zM24 4h1v1h-1zM28 4h1v1h-1zM30 4h1v1h-1zM32 4h1v1h-1zM34 4h1v1h-1zM36 4h1v1h-1zM40 4h1v1h-1zM44 4h1v1h-1zM46 4h1v1h-1zM13 5h1v1h-1zM17 5h1v1h-1zM2 6h1v1h-1zM6 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h1v1h-1zM26 6h1v1h-1zM30 6h1v1h-1zM32 6h1v1h-1zM34 6h1v1h-1zM36 6h1v1h-1zM38 6h1v1h-1zM42 6h1v1h-1zM46 6h1v1h-1zM15 7h1v1h-1zM31 7h1v1h-1zM0 8h1v1h-1zM2 8h1v1h-1zM4 8h1v1h-1zM6 8h1v1h-1zM8 8h1v1h-1zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM16 8h1v1h-1zM18 8h1v1h-1zM20 8h1v1h-1zM24 8h1v1h-1zM28 8h1v1h-1zM30 8h1v1h-1zM32 8h1v1h-1zM34 8h1v1h-1zM36 8h1v1h-1zM38 8h1v1h-1zM40 8h1v1h-1zM42 8h1v1h-1zM44 8h1v1h-1zM13 9h1v1h-1zM17 9h1v1h-1zM33 9h1v1h-1zM2 10h1v1h-1zM6 10h1v1h-1zM10 10h1v1h-1zM12 10h1v1h-1zM14 10h1v1h-1zM16 10h1v1h-1zM18 10h1v1h-1zM20 10h1v1h-1zM22 10h1v1h-1zM26 10h1v1h-1zM30 10h1v1h-1zM32 10h1v1h-1zM34 10h1v1h-1zM36 10h1v1h-1zM38 10h1v1h-1zM40 10h1v1h-1zM42 10h1v1h-1zM46 10h1v1h-1zM15 11h1v1h-1zM0 12h1v1h-1zM4 12h1v1h-1zM6 12h1v1h-1zM8 12h1v1h-1zM10 12h1v1h-1zM12 12h1v1h-1zM14 12h1v1h-1zM16 12h1v1h-1zM18 12h1v1h-1zM20 12h1v1h-1zM24 12h1v1h-1zM28 12h1v1h-1zM30 12h1v1h-1zM32 12h1v1h-1zM34 12h1v1h-1zM36 12h1v1h-1zM38 12h1v1h-1zM40 12h1v1h-1zM42 12h1v1h-1zM44 12h1v1h-1zM46 12h1v1h-1zM13 13h1v1h-1zM17 13h1v1h-1zM2 14h1v1h-1zM6 14h1v1h-1zM10 14h1v1h-1zM12 14h1v1h-1zM14 14h1v1h-1zM16 14h1v1h-1zM18 14h1v1h-1zM20 14h1v1h-1zM22 14h1v1h-1zM30 14h1v1h-1zM34 14h1v1h-1zM38 14h1v1h-1zM42 14h1v1h-1zM46 14h1v1h-1zM15 15h1v1h-1zM0 16h1v1h-1zM2 16h1v1h-1zM4 16h1v1h-1zM8 16h1v1h-1zM10 16h1v1h-1zM12 16h1v1h-1zM14 16h1v1h-1zM16 16h1v1h-1zM18 16h1v1h-1zM20 16h1v1h-1zM24 16h1v1h-1zM28 16h1v1h-1zM32 16h1v1h-1zM36 16h1v1h-1zM38 16h1v1h-1zM40 16h1v1h-1zM42 16h1v1h-1zM44 16h1v1h-1zM46 16h1v1h-1zM17 17h1v1h-1zM0 18h1v1h-1zM2 18h1v1h-1zM6 18h1v1h-1zM10 18h1v1h-1zM12 18h1v1h-1zM14 18h1v1h-1zM16 18h1v1h-1zM18 18h1v1h-1zM22 18h1v1h-1zM26 18h1v1h-1zM34 18h1v1h-1zM38 18h1v1h-1zM40 18h1v1h-1zM42 18h1v1h-1zM46 18h1v1h-1zM0 20h1v1h-1zM2 20h1v1h-1zM4 20h1v1h-1zM6 20h1v1h-1zM8 20h1v1h-1zM10 20h1v1h-1zM12 20h1v1h-1zM14 20h1v1h-1zM16 20h1v1h-1zM18 20h1v1h-1zM20 20h1v1h-1zM22 20h1v1h-1zM24 20h1v1h-1zM28 20h1v1h-1zM32 20h1v1h-1zM36 20h1v1h-1zM38 20h1v1h-1zM40 20h1v1h-1zM42 20h1v1h-1zM44 20h1v1h-1zM46 20h1v1h-1zM13 21h1v1h-1zM17 21h1v1h-1zM2 22h1v1h-1zM4 22h1v1h-1zM6 22h1v1h-1zM8 22h1v1h-1zM10 22h1v1h-1zM12 22h1v1h-1zM14 22h1v1h-1zM16 22h1v1h-1zM18 22h1v1h-1zM20 22h1v1h-1zM22 22h1v1h-1zM26 22h1v1h-1zM30 22h1v1h-1zM34 22h1v1h-1zM38 22h1v1h-1zM42 22h1v1h-1zM46 22h1v1h-1zM7 23h1v1h-1zM0 24h1v1h-1zM2 24h1v1h-1zM4 24h1v1h-1zM6 24h1v1h-1zM8 24h1v1h-1zM10 24h1v1h-1zM12 24h1v1h-1zM14 24h1v1h-1zM16 24h1v1h-1zM18 24h1v1h-1zM20 24h1v1h-1zM22 24h1v1h-1zM24 24h1v1h-1zM26 24h1v1h-1zM28 24h1v1h-1zM30 24h1v1h-1zM32 24h1v1h-1zM34 24h1v1h-1zM36 24h1v1h-1zM40 24h1v1h-1zM42 24h1v1h-1zM44 24h1v1h-1zM46 24h1v1h-1zM5 25h1v1h-1zM9 25h1v1h-1zM13 25h1v1h-1zM17 25h1v1h-1zM2 26h1v1h-1zM4 26h1v1h-1zM6 26h1v1h-1zM8 26h1v1h-1zM10 26h1v1h-1zM12 26h1v1h-1zM14 26h1v1h-1zM16 26h1v1h-1zM18 26h1v1h-1zM20 26h1v1h-1zM22 26h1v1h-1zM24 26h1v1h-1zM26 26h1v1h-1zM28 26h1v1h-1zM30 26h1v1h-1zM34 26h1v1h-1zM38 26h1v1h-1zM42 26h1v1h-1zM46 26h1v1h-1zM7 27h1v1h-1zM11 27h1v1h-1zM0 28h1v1h-1zM2 28h1v1h-1zM4 28h1v1h-1zM6 28h1v1h-1zM8 28h1v1h-1zM10 28h1v1h-1zM12 28h1v1h-1zM14 28h1v1h-1zM16 28h1v1h-1zM18 28h1v1h-1zM20 28h1v1h-1zM22 28h1v1h-1zM24 28h1v1h-1zM26 28h1v1h-1zM28 28h1v1h-1zM30 28h1v1h-1zM32 28h1v1h-1zM34 28h1v1h-1zM36 28h1v1h-1zM40 28h1v1h-1zM44 28h1v1h-1zM46 28h1v1h-1zM5 29h1v1h-1zM9 29h1v1h-1zM13 29h1v1h-1zM21 29h1v1h-1zM25 29h1v1h-1zM29 29h1v1h-1zM2 30h1v1h-1zM4 30h1v1h-1zM6 30h1v1h-1zM8 30h1v1h-1zM10 30h1v1h-1zM12 30h1v1h-1zM14 30h1v1h-1zM18 30h1v1h-1zM20 30h1v1h-1zM22 30h1v1h-1zM24 30h1v1h-1zM26 30h1v1h-1zM28 30h1v1h-1zM30 30h1v1h-1zM32 30h1v1h-1zM34 30h1v1h-1zM36 30h1v1h-1zM38 30h1v1h-1zM46 30h1v1h-1zM7 31h1v1h-1zM23 31h1v1h-1zM27 31h1v1h-1zM31 31h1v1h-1zM0 32h1v1h-1zM2 32h1v1h-1zM4 32h1v1h-1zM6 32h1v1h-1zM8 32h1v1h-1zM10 32h1v1h-1zM12 32h1v1h-1zM14 32h1v1h-1zM16 32h1v1h-1zM18 32h1v1h-1zM20 32h1v1h-1zM22 32h1v1h-1zM24 32h1v1h-1zM26 32h1v1h-1zM28 32h1v1h-1zM30 32h1v1h-1zM32 32h1v1h-1zM34 32h1v1h-1zM36 32h1v1h-1zM40 32h1v1h-1zM44 32h1v1h-1zM46 32h1v1h-1zM5 33h1v1h-1zM9 33h1v1h-1zM21 33h1v1h-1zM25 33h1v1h-1zM27 33h1v1h-1zM29 33h1v1h-1zM33 33h1v1h-1zM0 34h1v1h-1zM2 34h1v1h-1zM4 34h1v1h-1zM6 34h1v1h-1zM8 34h1v1h-1zM10 34h1v1h-1zM12 34h1v1h-1zM14 34h1v1h-1zM16 34h1v1h-1zM18 34h1v1h-1zM20 34h1v1h-1zM22 34h1v1h-1zM24 34h1v1h-1zM26 34h1v1h-1zM28 34h1v1h-1zM30 34h1v1h-1zM32 34h1v1h-1zM34 34h1v1h-1zM38 34h1v1h-1zM42 34h1v1h-1zM46 34h1v1h-1zM7 35h1v1h-1zM11 35h1v1h-1zM23 35h1v1h-1zM27 35h1v1h-1zM31 35h1v1h-1zM0 36h1v1h-1zM2 36h1v1h-1zM4 36h1v1h-1zM6 36h1v1h-1zM8 36h1v1h-1zM10 36h1v1h-1zM12 36h1v1h-1zM14 36h1v1h-1zM16 36h1v1h-1zM18 36h1v1h-1zM20 36h1v1h-1zM22 36h1v1h-1zM24 36h1v1h-1zM26 36h1v1h-1zM28 36h1v1h-1zM30 36h1v1h-1zM32 36h1v1h-1zM34 36h1v1h-1zM36 36h1v1h-1zM40 36h1v1h-1zM44 36h1v1h-1zM46 36h1v1h-1zM5 37h1v1h-1zM9 37h1v1h-1zM21 37h1v1h-1zM25 37h1v1h-1zM29 37h1v1h-1zM33 37h1v1h-1zM0 38h1v1h-1zM2 38h1v1h-1zM4 38h1v1h-1zM6 38h1v1h-1zM8 38h1v1h-1zM10 38h1v1h-1zM12 38h1v1h-1zM14 38h1v1h-1zM18 38h1v1h-1zM20 38h1v1h-1zM22 38h1v1h-1zM24 38h1v1h-1zM26 38h1v1h-1zM28 38h1v1h-1zM30 38h1v1h-1zM32 38h1v1h-1zM34 38h1v1h-1zM38 38h1v1h-1zM46 38h1v1h-1zM23 39h1v1h-1zM0 40h1v1h-1zM2 40h1v1h-1zM4 40h1v1h-1zM6 40h1v1h-1zM8 40h1v1h-1zM10 40h1v1h-1zM12 40h1v1h-1zM14 40h1v1h-1zM16 40h1v1h-1zM18 40h1v1h-1zM20 40h1v1h-1zM22 40h1v1h-1zM24 40h1v1h-1zM26 40h1v1h-1zM28 40h1v1h-1zM30 40h1v1h-1zM32 40h1v1h-1zM34 40h1v1h-1zM36 40h1v1h-1zM40 40h1v1h-1zM44 40h1v1h-1zM46 40h1v1h-1zM1 41h1v1h-1zM5 41h1v1h-1zM9 41h1v1h-1zM21 41h1v1h-1zM25 41h1v1h-1zM29 41h1v1h-1zM33 41h1v1h-1zM0 42h1v1h-1zM2 42h1v1h-1zM4 42h1v1h-1zM6 42h1v1h-1zM8 42h1v1h-1zM10 42h1v1h-1zM12 42h1v1h-1zM14 42h1v1h-1zM16 42h1v1h-1zM18 42h1v1h-1zM20 42h1v1h-1zM22 42h1v1h-1zM24 42h1v1h-1zM26 42h1v1h-1zM28 42h1v1h-1zM30 42h1v1h-1zM32 42h1v1h-1zM34 42h1v1h-1zM42 42h1v1h-1zM46 42h1v1h-1zM0 44h1v1h-1zM2 44h1v1h-1zM4 44h1v1h-1zM6 44h1v1h-1zM8 44h1v1h-1zM10 44h1v1h-1zM12 44h1v1h-1zM14 44h1v1h-1zM16 44h1v1h-1zM18 44h1v1h-1zM20 44h1v1h-1zM22 44h1v1h-1zM24 44h1v1h-1zM26 44h1v1h-1zM28 44h1v1h-1zM30 44h1v1h-1zM32 44h1v1h-1zM34 44h1v1h-1zM36 44h1v1h-1zM44 44h1v1h-1zM46 44h1v1h-1zM2 46h1v1h-1zM6 46h1v1h-1zM10 46h1v1h-1zM12 46h1v1h-1zM14 46h1v1h-1zM16 46h1v1h-1zM18 46h1v1h-1zM22 46h1v1h-1zM26 46h1v1h-1zM30 46h1v1h-1zM46 46h1v1h-1z'/%3E%3C/svg%3E");
  background-size: 144px 144px;
  image-rendering: pixelated;
}
/* Shared design contract is prepended by the worker and capture renderer. */
/* Frozen studies still name the retired faces. They load only where a page uses them. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/legacy-fonts/geist-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/legacy-fonts/space-grotesk-latin.woff2') format('woff2');
}
:root {
  --bg: var(--canvas);
  --ink-2: var(--muted);
  --ink-3: var(--muted);
  --pale: var(--guidance);
  --hair: var(--line);
  --hair-strong: var(--line);
  --good: var(--primary);
  --bad: var(--error);
  /* The page follows appearance. Fictional phone frames use the light profile. */
  --s-bg: var(--screen-canvas);
  --s-card: var(--screen-card);
  --s-paper: var(--screen-document);
  --s-ink: var(--screen-ink);
  --s-ink2: var(--screen-muted);
  --s-fog: var(--screen-muted);
  --s-accent: var(--screen-accent);
  --s-pale: var(--screen-guidance);
  --s-lime: var(--screen-identity);
  --s-hair: var(--screen-line);
  --s-hair2: var(--screen-line);
  --s-good: var(--screen-accent);
  --s-bad: var(--screen-error);
  --mono: var(--font-mono);
  --sans: var(--font-body);
  --display: var(--font-display);
  --ios: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-x: clip;
}
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem 6rem;
}

header.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1.4rem 0 1rem;
  border-bottom: 2px solid var(--accent);
}
.wordmark {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.masthead nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.8rem;
}
.masthead nav a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.5rem;
  padding: 3rem 0 2rem;
}
@media (max-width: 900px) {
  .intro {
    grid-template-columns: 1fr;
  }
}
.intro h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.08;
  margin: 0 0 1rem;
  letter-spacing: -0.03em;
}
.intro p {
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 0.8rem;
}
.rules {
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.2rem;
  font-size: 0.9rem;
}
.rules h3 {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.rules ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-2);
}
.rules li {
  margin: 0.3rem 0;
}

section.journey {
  padding: 3.5rem 0 1rem;
  border-top: 1px solid var(--hair);
}

.journey h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 0.6rem;
  letter-spacing: -0.03em;
}
.journey > p {
  color: var(--ink-2);
  max-width: 64ch;
  margin: 0 0 1.6rem;
}

.frames {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2rem;
  row-gap: 3rem;
  padding: 0.5rem 0 1.5rem;
  /* Full-bleed rail: stretch to the viewport edges with a slim gutter on each
     side, so a wide monitor shows as many phones per row as fit. Frames that
     don't fit wrap to the next row; the rail never scrolls sideways. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.frame {
  flex: 0 0 auto;
  width: 417px;
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* The caption reads first: you learn what you're about to look at before
   reading an 850px phone. Markup keeps figcaption last; order flips it. */
.frame figcaption {
  order: -1;
  margin: 0 0 0.7rem 12px;
  font-size: 0.82rem;
  color: var(--ink-2);
  max-width: 393px;
}
.frame figcaption b {
  color: var(--ink);
  display: block;
  font-size: 0.85rem;
}
.frame figcaption .n {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  margin-right: 0.4rem;
}
.device {
  width: 417px;
  height: 876px;
  position: relative;
  /* Frames stretch to the tallest caption in their row; pinning devices to
     the bottom keeps every phone in a row top-aligned however captions wrap. */
  margin-top: auto;
}
.device .phone {
  transform-origin: top left;
  margin: 12px;
}
@media (max-width: 700px) {
  .frames {
    flex-direction: column;
    gap: 2.5rem;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .frame {
    width: 100%;
  }
  .frame figcaption {
    max-width: none;
    margin-left: 4px;
  }
}

/* iPhone 16-class frame: 393x852 CSS px. */
.phone {
  width: 393px;
  height: 852px;
  background: var(--s-bg);
  border-radius: 55px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 10px var(--s-ink),
    0 0 0 11px var(--s-fog),
    0 24px 60px color-mix(in srgb, var(--s-ink) 28%, transparent);
  margin: 12px;
}
.phone .island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  background: var(--s-ink);
  /* Device chrome, not a product surface: the island stays a capsule. */
  border-radius: 18.5px;
  z-index: 5;
}
.phone .status {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 30px 0 34px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--type-body-size);
  color: var(--s-ink);
  z-index: 4;
}
.phone .status .r {
  display: flex;
  gap: 6px;
  align-items: center;
}
.phone .status svg {
  display: block;
}
.phone .homebar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 139px;
  height: 5px;
  border-radius: 3px;
  background: var(--s-ink);
  opacity: 0.9;
  z-index: 5;
}
.screen {
  position: absolute;
  inset: 0;
  padding-top: 58px;
  display: flex;
  flex-direction: column;
  color: var(--s-ink);
  font-size: var(--type-body-size);
  line-height: 1.5;
}
.phone.ink {
  background: var(--s-ink);
}
.screen.ink {
  color: var(--screen-on-primary);
}
.phone.ink .status {
  color: var(--screen-on-primary);
}
.screen.ink .homebar,
.phone.ink .homebar {
  background: var(--screen-on-primary);
}
.screen.ink .screen-context {
  color: color-mix(in srgb, var(--screen-on-primary) 60%, transparent);
}
/* Lock screen variant: an iOS lock screen on a dark wallpaper. The status
   bar drops its clock (iOS does), the big clock uses the system rounded
   face, and notifications are frosted-glass cards with a 38px app icon. */
.phone.lockbg {
  background:
    radial-gradient(70% 55% at 18% 22%, rgba(96, 112, 150, 0.55), transparent 70%),
    radial-gradient(55% 45% at 88% 78%, rgba(150, 96, 74, 0.5), transparent 70%),
    radial-gradient(40% 35% at 60% 50%, rgba(70, 90, 80, 0.35), transparent 70%),
    linear-gradient(170deg, #24272d, #0e0f12);
}
.phone.lockbg .status {
  color: var(--s-card);
}
.phone.lockbg .status > span:first-child {
  visibility: hidden;
}
.phone.lockbg .homebar {
  background: var(--s-card);
}
.screen.lock {
  color: var(--s-card);
  padding: 58px 10px 0;
  font-family: var(--ios);
}
.screen.lock .lockicon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  opacity: 0.9;
}
.screen.lock .date {
  margin-top: 24px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.screen.lock .clock {
  margin-top: 2px;
  text-align: center;
  font-size: 94px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}
.screen.lock .stack {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.screen.lock .actions {
  display: flex;
  justify-content: space-between;
  padding: 22px 34px 34px;
}
.screen.lock .act {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--s-card) 20%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: grid;
  place-items: center;
}

/* Chrome */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 24px 12px;
}
.topbar .mark {
  height: 18px;
  color: var(--s-ink);
}
.topbar .mark svg {
  height: 18px;
  width: auto;
  display: block;
}
.mark svg {
  height: 100%;
  width: auto;
  display: block;
  margin: 0 auto;
}
.mark-face {
  display: inline-block;
  height: 100%;
  background: currentColor;
  mask: url('/brand/ike-wordmark.svg') center / contain no-repeat;
}
.mark-face img {
  display: block;
  height: 100%;
  width: auto;
  visibility: hidden;
}
.appicon .mark-face {
  width: 68%;
  height: auto;
}
.appicon .mark-face img {
  width: 100%;
  height: auto;
}
.topbar .title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.topbar .sub {
  font-size: var(--type-meta-size);
  color: var(--s-fog);
  margin-top: -2px;
}
.topbar .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bell {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--s-hair2);
  display: grid;
  place-items: center;
  position: relative;
}
.bell i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s-accent);
  position: absolute;
  top: 5px;
  right: 6px;
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--s-ink);
  color: var(--s-bg);
  display: grid;
  place-items: center;
  font-size: var(--type-meta-size);
  font-weight: 600;
  flex: 0 0 auto;
}
.tabbar {
  margin-top: auto;
  border-top: 1px solid var(--s-hair);
  display: flex;
  padding: 10px 14px 30px;
  background: var(--s-bg);
}
.tabbar div {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--s-fog);
  padding-top: 8px;
  position: relative;
}
.tabbar div.on {
  color: var(--s-accent);
  font-weight: 600;
}
.tabbar div.on::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--s-accent);
}
.body {
  flex: 1;
  overflow: hidden;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.body.tight {
  gap: 8px;
}
.fade {
  position: relative;
}
.fade::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--s-bg));
  pointer-events: none;
}

/* Type */
.h {
  margin: 6px 0 2px;
}
.lede {
  font-size: var(--type-body-size);
  color: var(--s-ink2);
  margin: 0;
}
.screen-context {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  color: var(--s-fog);
}
.screen-context.accent {
  color: var(--s-accent);
}

.muted {
  color: var(--s-fog);
}
.small {
  font-size: var(--type-meta-size);
}
.center {
  text-align: center;
}
.bignum {
  margin: 4px 0 2px;
}
.disclaimer {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--s-fog);
  border-top: 1px solid var(--s-hair);
  padding-top: 8px;
  margin-top: 4px;
}

/* Components */
.card {
  padding: 14px 16px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--corner-chip);
  padding: 8px 14px;
  font-size: var(--type-secondary-size);
  font-weight: 600;
}
.pill.ink {
  background: var(--s-ink);
  color: var(--s-bg);
}
.pill.out {
  border: 1px solid var(--s-hair2);
  color: var(--s-ink2);
}
.pill.sm {
  padding: 4px 10px;
  font-size: 11px;
}
.btn {
  display: flex;
  align-items: center;
}
.btnrow {
  display: flex;
  gap: 10px;
}
.btnrow .btn {
  flex: 1;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--s-hair2);
  border-radius: var(--corner-chip);
  padding: 3px 10px;
  font-size: var(--type-meta-size);
  font-weight: 500;
  color: var(--s-fog);
  font-family: var(--sans);
}
.chip.done {
  background: var(--s-pale);
  border-color: var(--s-pale);
  color: var(--s-accent);
}
.chip.now {
  border-color: var(--s-accent);
  color: var(--s-accent);
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--s-hair);
}
.row:last-child {
  border-bottom: 0;
}
.row .t {
  flex: 1;
  min-width: 0;
}
.row .t b {
  display: block;
  font-weight: 600;
  font-size: var(--type-body-size);
}
.row .t > span {
  display: block;
  font-size: var(--type-meta-size);
  color: var(--s-fog);
  margin-top: 1px;
}
.row .v {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-body-size);
  text-align: right;
}
.row .v small {
  display: block;
  font-size: 11px;
  color: var(--s-fog);
  font-family: var(--sans);
}
.stat3 {
  display: flex;
  border-top: 1px solid var(--s-hair);
  border-bottom: 1px solid var(--s-hair);
}
.stat3 div {
  flex: 1;
  padding: 12px 0;
  text-align: center;
}
.stat3 div + div {
  border-left: 1px solid var(--s-hair);
}
.stat3 .num {
  font-size: 20px;
  display: block;
}
.stat3 .small {
  display: block;
  color: var(--s-fog);
}

/* Progress ring */
.ring {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}
.ring svg {
  display: block;
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
}
.ring circle {
  fill: none;
  stroke-width: 4.5;
}
.ring .track {
  stroke: var(--s-hair2);
  opacity: 0.5;
}
.ring .arc {
  stroke: var(--s-accent);
  stroke-linecap: round;
  stroke-dasharray: 100.5;
}

/* Buyer card (P1) */
.bcard {
  padding: 14px 16px;
  display: flex;
  gap: 12px;
}
.bcard .bt {
  flex: 1;
  min-width: 0;
}
.bcard .bt b {
  font-size: 16px;
  font-weight: 600;
}
.bcard .bt .st {
  font-size: 12.5px;
  color: var(--s-fog);
  margin-top: 2px;
}
.bcard .act {
  margin-top: 10px;
}
.bcard.quiet {
  border-style: dashed;
  background: transparent;
}

/* Sectioned list (P2) */
.lsec {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 4px;
}
.lsec.you {
  color: var(--s-accent);
}
.lsec.calm {
  color: var(--s-fog);
}

/* Served queue (P3) */
.deal {
  padding: 18px;
}
.deal .of {
  font-family: var(--sans);
  font-size: var(--type-meta-size);
  color: var(--s-accent);
  font-weight: 600;
}
.deal .dh {
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.2;
  margin: 8px 0 6px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.deal p {
  font-size: 14px;
  color: var(--s-ink2);
  margin: 0 0 12px;
}

/* Money */
.spark {
  display: block;
  width: 100%;
  height: 64px;
}
.receipt .row .t b {
  font-size: 14.5px;
}
.goalring {
  width: 150px;
  height: 150px;
  margin: 6px auto;
  position: relative;
}
.goalring svg {
  display: block;
  transform: rotate(-90deg);
}
.goalring circle {
  fill: none;
  stroke-width: 11;
}
.goalring .track {
  stroke: var(--s-hair2);
  opacity: 0.5;
}
.goalring .arc {
  stroke: var(--s-ink2);
  stroke-linecap: round;
  stroke-dasharray: 408.4;
}
.goalring .in {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.goalring .in b {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 600;
}
.goalring .in span {
  font-size: 11px;
  color: var(--s-fog);
}
.split {
  border-radius: var(--corner-control);
  background: color-mix(in srgb, var(--s-ink) 5%, transparent);
  padding: 12px 14px;
}
.split .row {
  padding: 7px 0;
  border-bottom-color: color-mix(in srgb, var(--s-ink) 8%, transparent);
}
.split .row .t b {
  font-size: var(--type-secondary-size);
  font-weight: 500;
  color: var(--s-ink2);
}
.split .row .v {
  font-size: 13.5px;
}

/* Loan file */
.track2 {
  position: relative;
  padding-left: 26px;
}
.track2::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 12px;
  width: 2px;
  background: var(--s-hair2);
}
.tstep {
  position: relative;
  padding: 10px 0;
}
/* Completed steps fill with ink, never blue: blue is the accent for the one
   thing that wants a hand, and must never read as "done" or "correct". The
   blue ring is reserved for the `now` step. */
.tstep::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--s-ink2);
  border: 2px solid var(--s-bg);
}
.tstep.todo::before {
  background: var(--s-card);
  border: 2px solid var(--s-hair2);
}
.tstep.now::before {
  background: var(--s-bg);
  border: 2.5px solid var(--s-accent);
}
.tstep b {
  font-size: var(--type-body-size);
  font-weight: 600;
}
.tstep .d {
  font-size: var(--type-meta-size);
  color: var(--s-fog);
}
.allclear {
  background: color-mix(in srgb, var(--s-good) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--s-good) 25%, transparent);
  color: var(--s-good);
  border-radius: var(--corner-control);
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.checks {
  background: color-mix(in srgb, var(--s-ink) 5%, transparent);
  border-radius: var(--corner-control);
  padding: 11px 14px;
  font-size: 12.5px;
}
.checks b {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.slide {
  border: 1.5px solid var(--s-accent);
  border-radius: var(--corner-control);
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.slide .knob {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--s-accent);
  color: var(--screen-on-primary);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: 0 0 auto;
}
.slide span {
  color: var(--s-accent);
  font-weight: 600;
  font-size: 14px;
}
.field {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--s-hair);
}
.field .fl {
  flex: 1;
  font-size: 13.5px;
  color: var(--s-fog);
}
.field .fv {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-body-size);
  font-weight: 500;
}
.field .fe {
  font-size: 11.5px;
  color: var(--s-fog);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Licensing */
.qopt {
  background: var(--s-card);
  border: 1px solid var(--s-hair2);
  border-radius: var(--corner-control);
  padding: 13px 16px;
  font-size: var(--type-body-size);
}
.qopt.right {
  border-color: var(--s-accent);
  background: var(--s-pale);
  font-weight: 600;
}
.gauge {
  width: 190px;
  height: 110px;
  margin: 8px auto 0;
  position: relative;
}
.gauge svg {
  display: block;
}
.locked {
  border: 1px dashed var(--s-hair2);
  border-radius: var(--corner-control);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--s-ink) 3%, transparent);
}
.locked .lk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--s-ink2);
}
.locked .lknum {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 600;
  color: var(--s-ink2);
  margin: 6px 0 2px;
}
.statchip {
  font-family: var(--sans);
  font-size: var(--type-meta-size);
  border-radius: var(--corner-chip);
  padding: 4px 10px;
  font-weight: 600;
  flex: 0 0 auto;
}
.statchip.done {
  background: var(--s-pale);
  color: var(--s-accent);
}
.statchip.wait {
  background: color-mix(in srgb, var(--s-ink) 8%, transparent);
  color: var(--s-ink2);
}

/* X: estimator + win + pushes */
.sliderline {
  position: relative;
  height: 34px;
}
.sliderline .base {
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  height: 4px;
  border-radius: 2px;
  background: var(--s-hair2);
}
.sliderline .fill {
  position: absolute;
  left: 0;
  top: 15px;
  height: 4px;
  border-radius: 2px;
  background: var(--s-accent);
}
.sliderline .knob {
  position: absolute;
  top: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--s-card);
  border: 2.5px solid var(--s-accent);
}
/* Lock-screen notification: icon | title + time / body, on frosted glass.
   Scoped to the lock screen so the generic name can't leak into app chrome. */
.screen.lock .push {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  grid-template-areas:
    'icon title time'
    'icon body body';
  column-gap: 10px;
  align-items: start;
  background: color-mix(in srgb, var(--s-card) 20%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-radius: 22px;
  padding: 12px 14px 12px 12px;
  color: var(--s-card);
}
.screen.lock .push .appicon {
  grid-area: icon;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--s-ink);
  color: var(--screen-on-primary);
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
}
.screen.lock .push b {
  grid-area: title;
  font-size: var(--type-body-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.screen.lock .push .pw {
  grid-area: time;
  margin-left: 8px;
  font-size: var(--type-secondary-size);
  color: color-mix(in srgb, var(--s-card) 60%, transparent);
}
.screen.lock .push p {
  grid-area: body;
  margin: 1px 0 0;
  font-size: var(--type-body-size);
  line-height: 1.3;
  color: color-mix(in srgb, var(--s-card) 88%, transparent);
}
/* Live Activity: an app-drawn, persistent card with its own hierarchy
   (small app mark + name, stage headline, detail line, stage rail), solid
   rather than glass, and no timestamp. */
.screen.lock .push.live {
  grid-template-columns: 22px 1fr;
  grid-template-areas:
    'icon name'
    'title title'
    'body body'
    'stages stages';
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  background: color-mix(in srgb, var(--s-ink) 78%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-card) 8%, transparent);
  padding: 12px 14px 14px;
}
.screen.lock .push.live .appicon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 9px;
}
.screen.lock .push.live .ln {
  grid-area: name;
  font-size: var(--type-secondary-size);
  font-weight: 600;
  color: color-mix(in srgb, var(--s-card) 70%, transparent);
}
.screen.lock .push.live b {
  font-size: 17px;
  margin-top: 4px;
}
.screen.lock .push.live p {
  margin: 0;
  font-size: var(--type-secondary-size);
  color: color-mix(in srgb, var(--s-card) 70%, transparent);
}
.screen.lock .push.live .stages {
  grid-area: stages;
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.screen.lock .push.live .stages i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--s-card) 22%, transparent);
}
.screen.lock .push.live .stages .on {
  background: var(--s-card);
}
/* Persistent help bubble: every in-app screen, above the tab bar. */
.helpbubble {
  position: absolute;
  right: 14px;
  bottom: 96px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--s-card);
  border: 1px solid var(--s-hair2);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--s-ink) 14%, transparent);
  display: grid;
  place-items: center;
  z-index: 6;
}
.helpbubble .mark {
  height: 13px;
  color: var(--s-ink);
}
.helpbubble .avatar {
  width: 36px;
  height: 36px;
  font-size: var(--type-meta-size);
}
.screen.humanize .helpbubble {
  bottom: 244px;
}
.scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--s-ink) 38%, transparent);
  z-index: 7;
}
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--s-bg);
  border-radius: var(--corner-dialog) var(--corner-dialog) 0 0;
  padding: 10px 20px 40px;
  z-index: 8;
}
.sheet .handle {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--s-hair2);
  margin: 0 auto 12px;
}
/* Help thread */
.bubble {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: var(--corner-surface);
  font-size: 14px;
  background: var(--s-card);
  border: 1px solid var(--s-hair);
}
.bubble.me {
  margin-left: auto;
  background: var(--s-pale);
  border-color: var(--s-pale);
}
.wave {
  display: flex;
  gap: 2.5px;
  align-items: center;
  height: 22px;
}
.wave i {
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.85;
}
.whofrom {
  font-size: 11px;
  color: var(--s-fog);
  margin: 2px 6px;
}
.composer {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--s-hair2);
  border-radius: var(--corner-control);
  padding: 8px 10px 8px 16px;
  background: var(--s-card);
}
.composer .ph {
  flex: 1;
  color: var(--s-fog);
  font-size: 14px;
}
.composer .mic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--s-accent);
  color: var(--screen-on-primary);
  display: grid;
  place-items: center;
  font-size: var(--type-body-size);
  flex: 0 0 auto;
}
.winnum {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--screen-on-primary);
  text-align: center;
  margin: 2px 0;
}

/* Supporting context follows the heading and reads as ordinary sentence-case text. */
.screen .deal .of {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Scroll affordance: kit.js sets .more while a rail can still scroll right. */
@media (min-width: 701px) {
  .frames.more {
    mask-image: linear-gradient(
      90deg,
      var(--s-ink) 0%,
      var(--s-ink) calc(100% - 64px),
      color-mix(in srgb, var(--s-ink) 20%, transparent) 100%
    );
    -webkit-mask-image: linear-gradient(
      90deg,
      var(--s-ink) 0%,
      var(--s-ink) calc(100% - 64px),
      color-mix(in srgb, var(--s-ink) 20%, transparent) 100%
    );
  }
}