/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
:root {
  --ink: #0f0f10;
  --ink-soft: #1c1c1e;
  --paper: #f3f2ef;
  --paper-warm: #e8e6e1;
  --surface: #fbfbf9;
  --pine: #7a5c22;
  --pine-light: #b39256;
  --sage: #ddd6c8;
  --silver: #a8a59f;
  --line: rgba(15, 15, 16, 0.12);
  --line-strong: rgba(15, 15, 16, 0.28);
  --pine-fill: #121214;
  --danger-fill: #9b5149;
  --c-ink: #0f0f10;
  --c-ink-soft: #1c1c1e;
  --c-paper: #ece7dc;
  --glow: rgba(236, 231, 220, 0.9);
  --sage-tint: rgba(221, 214, 200, 0.4);
  --placeholder: #7a7771;
  --muted: #5f5d58;
  --danger: #9b5149;
  --night: #050506;
  --on-dark-muted: rgba(236, 231, 220, 0.62);
  --card: #0e0e10;
  --card-edge: #1b1a1d;
  --card-ink: #ece7dc;
  --card-soft: rgba(236, 231, 220, 0.74);
  --gold: #d2b47a;
  --gold-deep: #a88a52;
  --gold-line: rgba(210, 180, 122, 0.42);
  --btn-bg: #121214;
  --btn-fg: #e6cf98;
  --note-500: #0e0e10;
  --note-200: #0e0e10;
  --note-100: #121214;
  --note-50: #0e0e10;
  --note-20: #0e0e10;
  --note-10: #0e0e10;
  --note-over: #2e1715;
  --note-hidden: #1c1c1e;
  --note-ink: #ece7dc;
  --note-ink-soft: rgba(236, 231, 220, 0.8);
  --note-deep-teal: #0e0e10;
  --brain-accent: #d8bd84;
  --guilloche: repeating-linear-gradient(115deg, rgba(255, 255, 255, .024) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 88% -12%, rgba(255, 255, 255, .11), transparent 55%), radial-gradient(90% 80% at -5% 112%, rgba(210, 180, 122, .12), transparent 60%);
  --fill-food: #6e4a1f;
  --fill-transport: #34495f;
  --fill-study: #2c564d;
  --fill-entertainment: #613342;
  --fill-shopping: #5e4c1f;
  --fill-other: #4a4844;
  --fill-income: #33553a;
  --fill-saving: #121214;
  --cat-food: #9a6a2e;
  --cat-transport: #4d6785;
  --cat-study: #3f7a6e;
  --cat-entertainment: #8a4a5e;
  --cat-shopping: #8a7030;
  --cat-other: #6b6862;
  --cat-income: #4a7a50;
  --cat-saving: #7a5c22;
  --display: "EB Garamond", "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --text-micro: 12px;
  --text-xs: 12.5px;
  --text-sm: 13.5px;
  --nav-space: calc(92px + env(safe-area-inset-bottom));
  color: var(--ink);
  font-family: var(--sans);
  font-synthesis: none;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ece7dc;
    --ink-soft: #d5cfc2;
    --paper: #0b0b0c;
    --paper-warm: #161618;
    --surface: #121214;
    --pine: #d4b77c;
    --pine-light: #c9a96a;
    --pine-fill: #2a282b;
    --sage: #3a3833;
    --silver: #6f6c66;
    --line: rgba(236, 231, 220, 0.13);
    --line-strong: rgba(236, 231, 220, 0.3);
    --muted: #a39e93;
    --danger: #e59a8f;
    --glow: rgba(18, 21, 18, 0.9);
    --sage-tint: rgba(179, 146, 86, 0.2);
    --placeholder: #85827b;
    --cat-food: #d6a66a;
    --cat-transport: #9fb5cf;
    --cat-study: #8cc4b6;
    --cat-entertainment: #d49aab;
    --cat-shopping: #d9bd78;
    --cat-other: #b9b5ad;
    --cat-income: #9ccaa2;
    --cat-saving: #d4b77c;
    --btn-bg: #c9a96a;
    --btn-fg: #0b0b0c;
    --card: #19181c;
    --card-edge: #242327;
    --gold-line: rgba(210, 180, 122, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #ece7dc;
  --ink-soft: #d5cfc2;
  --paper: #0b0b0c;
  --paper-warm: #161618;
  --surface: #121214;
  --pine: #d4b77c;
  --pine-light: #c9a96a;
  --pine-fill: #2a282b;
  --sage: #3a3833;
  --silver: #6f6c66;
  --line: rgba(236, 231, 220, 0.13);
  --line-strong: rgba(236, 231, 220, 0.3);
  --muted: #a39e93;
  --danger: #e59a8f;
  --glow: rgba(18, 21, 18, 0.9);
  --sage-tint: rgba(179, 146, 86, 0.2);
  --placeholder: #85827b;
  --cat-food: #d6a66a;
  --cat-transport: #9fb5cf;
  --cat-study: #8cc4b6;
  --cat-entertainment: #d49aab;
  --cat-shopping: #d9bd78;
  --cat-other: #b9b5ad;
  --cat-income: #9ccaa2;
  --cat-saving: #d4b77c;
  --btn-bg: #c9a96a;
  --btn-fg: #0b0b0c;
  --card: #19181c;
  --card-edge: #242327;
  --gold-line: rgba(210, 180, 122, 0.5);
  color-scheme: dark;
}
[data-cat="food"] {
  --cat: var(--cat-food);
  --cat-fill: var(--fill-food);
}
[data-cat="transport"] {
  --cat: var(--cat-transport);
  --cat-fill: var(--fill-transport);
}
[data-cat="study"] {
  --cat: var(--cat-study);
  --cat-fill: var(--fill-study);
}
[data-cat="entertainment"] {
  --cat: var(--cat-entertainment);
  --cat-fill: var(--fill-entertainment);
}
[data-cat="shopping"] {
  --cat: var(--cat-shopping);
  --cat-fill: var(--fill-shopping);
}
[data-cat="other"] {
  --cat: var(--cat-other);
  --cat-fill: var(--fill-other);
}
[data-cat="income"] {
  --cat: var(--cat-income);
  --cat-fill: var(--fill-income);
}
[data-cat="saving"] {
  --cat: var(--cat-saving);
  --cat-fill: var(--fill-saving);
}
* {
  box-sizing: border-box;
}
html {
  background: var(--c-ink);
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}
body.sheet-open {
  overflow: hidden;
}
button, input {
  font: inherit;
  font-synthesis: none;
}
button {
  color: inherit;
}
input {
  color: var(--ink);
}
:focus-visible {
  outline: 2px solid var(--pine-light);
  outline-offset: 3px;
}
.button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  text-align: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease);
}
.button:active:not(:disabled) {
  transform: scale(.965);
}
.button:disabled {
  opacity: .4;
  cursor: default;
}
.toast-action::after, .filter-chip::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.type-toggle .button::after {
  content: "";
  position: absolute;
  inset: -8px 0;
}
.toast-action, .type-toggle .button, .filter-chip {
  position: relative;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 120;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--paper);
  background: var(--ink);
  font-size: var(--text-sm);
  transform: translateY(-160%);
  transition: transform .2s;
}
.skip-link:focus {
  transform: none;
}
.money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.money--hidden {
  letter-spacing: .04em;
}
.app-shell {
  min-height: 100dvh;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}
.app-loading {
  min-height: 100dvh;
  background: var(--paper);
}
.app-content {
  animation: viewIn .6s var(--ease) backwards;
}
.view {
  width: min(100%, 760px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 20px calc(var(--nav-space) + 48px);
}
.eyebrow {
  color: var(--muted);
  font-size: var(--text-micro);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.camera-thread {
  position: fixed;
  z-index: 4;
  top: 18%;
  right: 7px;
  display: none;
  width: 20px;
  height: 60vh;
  pointer-events: none;
  opacity: calc(.18 + var(--thread-progress, 0) * .3);
}
.camera-thread > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--pine), transparent);
  transform: scaleY(calc(.22 + var(--thread-progress, 0) * .78));
  transform-origin: top;
}
.camera-thread i {
  position: absolute;
  left: 6px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--pine);
  border-radius: 50%;
  background: var(--paper);
  transition: background .4s, transform .5s var(--spring);
}
.camera-thread i b {
  position: absolute;
  right: 16px;
  top: 50%;
  color: var(--pine);
  font-size: var(--text-micro);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity .4s, transform .5s var(--ease);
}
.camera-thread i:nth-of-type(1) {
  top: 8%;
}
.camera-thread i:nth-of-type(2) {
  top: 34%;
}
.camera-thread i:nth-of-type(3) {
  top: 64%;
}
.camera-thread i:nth-of-type(4) {
  top: 92%;
}
.camera-thread[data-active="0"] i:nth-of-type(1), .camera-thread[data-active="1"] i:nth-of-type(2), .camera-thread[data-active="2"] i:nth-of-type(3), .camera-thread[data-active="3"] i:nth-of-type(4) {
  background: var(--pine);
  transform: scale(1.35);
}
.camera-thread[data-active="0"] i:nth-of-type(1) b, .camera-thread[data-active="1"] i:nth-of-type(2) b, .camera-thread[data-active="2"] i:nth-of-type(3) b, .camera-thread[data-active="3"] i:nth-of-type(4) b {
  opacity: 1;
  transform: translate(0, -50%);
}
.camera-thread small {
  position: absolute;
  top: 16%;
  left: 17px;
  white-space: nowrap;
  color: var(--pine);
  font-size: var(--text-micro);
  letter-spacing: .16em;
  transform: rotate(90deg);
  transform-origin: left;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 19px;
  height: 23px;
  transform: skewX(-13deg);
}
.brand-mark i {
  width: 5px;
  border-radius: 1px;
  background: currentColor;
}
.brand-mark i:nth-child(1) {
  height: 14px;
}
.brand-mark i:nth-child(2) {
  height: 22px;
}
.brand-mark i:nth-child(3) {
  height: 9px;
}
.brand-name {
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: -.035em;
  line-height: 1.3;
}
.brand--compact .brand-mark {
  width: 23px;
  height: 28px;
}
.brand--compact .brand-mark i {
  width: 6px;
}
.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 38px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: .08em;
}
.eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.demo-pill {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font-size: var(--text-micro);
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.status-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: 1.55;
}
.status-banner p {
  margin: 2px 0 0;
  color: var(--muted);
}
.status-banner strong {
  font-size: var(--text-sm);
  font-weight: 600;
}
.status-banner--warning {
  border: 1px solid rgba(155, 81, 73, .3);
  background: rgba(155, 81, 73, .06);
}
.status-banner--warning > svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--danger);
}
.status-banner--warning > div {
  flex: 1;
}
.status-dismiss {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -12px -14px -8px 0;
  border-radius: 50%;
  color: var(--muted);
}
.status-banner--demo {
  flex-wrap: wrap;
  align-items: center;
  border: 1px dashed var(--line);
}
.status-banner--demo .demo-pill {
  display: none;
}
.status-banner--demo p {
  flex: 1 1 200px;
  margin: 0;
}
.status-link {
  min-height: 44px;
  padding: 0 2px;
  border-bottom: 1px solid var(--ink);
  font-size: var(--text-xs);
  font-weight: 600;
}
.status-banner--backup {
  border: 1px solid var(--line-strong);
  background: var(--paper-warm);
}
.status-banner--backup > svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--pine);
}
.status-banner--backup > div {
  flex: 1;
}
.status-banner--backup .status-link {
  margin-top: 4px;
}
.balance-hero {
  position: relative;
}
.black-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1.586;
  min-height: 200px;
  margin: 0;
  padding: 18px 20px 18px;
  border-radius: 18px;
  color: var(--card-ink);
  background-color: var(--card);
  box-shadow: inset 0 0 0 1px var(--gold-line), inset 0 1px 0 rgba(255, 255, 255, .1), 0 32px 48px -30px rgba(0, 0, 0, .75), 0 10px 18px -12px rgba(0, 0, 0, .35);
}
.black-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .09) 48%, transparent 58%) 130% 0 / 260% 100% no-repeat, var(--guilloche);
  animation: noteSheen 2.2s .3s var(--ease) both;
}
.black-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.black-card-brand {
  color: var(--card-soft);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: .32em;
}
.black-card-brand b {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .24em;
}
.black-card-serial {
  color: var(--card-soft);
  font-size: var(--text-micro);
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
}
.black-card-middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.black-card-chip {
  position: relative;
  width: 40px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ecd8a8 0%, #b8955a 42%, #e4c88f 64%, #957341 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .15);
}
.black-card-chip::before {
  content: "";
  position: absolute;
  inset: 6px 4px;
  border-block: 1px solid rgba(60, 42, 14, .45);
  background: linear-gradient(90deg, transparent 32%, rgba(60, 42, 14, .45) 32% calc(32% + 1px), transparent calc(32% + 1px) 68%, rgba(60, 42, 14, .45) 68% calc(68% + 1px), transparent calc(68% + 1px));
}
.black-card-gauge svg {
  display: block;
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
}
.black-card-gauge-track {
  fill: none;
  stroke: rgba(236, 231, 220, .14);
  stroke-width: 3;
}
.black-card-gauge-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray .9s var(--ease);
}
.black-card-label {
  margin-top: auto;
  color: var(--card-soft);
  font-size: var(--text-sm);
  letter-spacing: .04em;
}
.black-card-value {
  margin-top: 2px;
  color: var(--gold);
  font-size: clamp(32px, 9.6vw, 46px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 -1px 0 rgba(255, 255, 255, .06);
}
.black-card-detail {
  margin-top: 6px;
  color: var(--card-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.black-card-detail .money {
  color: var(--card-ink);
  font-weight: 500;
}
.black-card--over {
  box-shadow: inset 0 0 0 1px rgba(217, 143, 132, .45), 0 32px 48px -30px rgba(0, 0, 0, .75);
}
.black-card--over .black-card-value {
  color: #e2a297;
}
.black-card--over .black-card-gauge-ring {
  stroke: #e2a297;
}
.today-note--blank {
  display: block;
  min-height: 0;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.today-note--blank::before {
  content: none;
}
.balance-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.balance-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.balance-copy > span {
  color: var(--muted);
  font-size: var(--text-sm);
}
.privacy-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 -10px 4px 0;
  border-radius: 50%;
  color: var(--muted);
  transition: color .3s, background .3s;
}
.privacy-toggle[aria-pressed="true"] {
  color: var(--pine);
  background: rgba(18, 18, 20, .07);
}
.balance-value {
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: clamp(34px, 9.6vw, 56px);
  line-height: 1.12;
  letter-spacing: -.045em;
  white-space: nowrap;
  perspective: 800px;
}
.balance-value--long {
  font-size: clamp(30px, 8.4vw, 48px);
}
.balance-value .money {
  display: inline-block;
  transform-origin: 50% 100%;
  transition: color .6s var(--ease);
}
.balance-value .money-moving {
  animation: moneyMorph .82s var(--ease) both;
}
.balance-value .money-moving--down {
  color: var(--pine);
}
.balance-value .money-moving--up {
  color: var(--pine);
}
.reserve-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.reserve-note svg {
  flex: 0 0 auto;
  color: var(--pine);
}
.reserve-note .money {
  color: var(--ink);
  font-weight: 600;
}
.pulse-dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pine-light);
  box-shadow: 0 0 0 5px rgba(179, 146, 86,.12);
  animation: breathe 2.8s ease-in-out infinite;
}
.sparkline {
  margin: 30px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.chart-label, .chart-days {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--text-micro);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.chart-label .money {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0;
}
.chart-plot {
  position: relative;
  margin: 6px 0 4px;
}
.sparkline svg {
  display: block;
  width: 100%;
  height: 92px;
  overflow: visible;
}
.chart-line {
  fill: none;
  stroke: var(--pine);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1400;
  animation: draw 1.8s .3s var(--ease) both;
}
.chart-area {
  opacity: 0;
  animation: fadeUp 1s .8s var(--ease) both;
}
.chart-now {
  position: absolute;
  right: -4px;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border: 2px solid var(--pine);
  border-radius: 50%;
  background: var(--paper);
  transition: top .9s var(--ease);
}
.chart-days--today {
  color: var(--ink);
  font-weight: 600;
}
.sparkline--empty .chart-line {
  stroke: var(--silver);
  stroke-dasharray: 3 5;
  animation: none;
}
.sparkline--empty .chart-now {
  border-color: var(--silver);
}
.chart-empty {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
}
.category-ecosystem {
  margin-top: 56px;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.section-heading h2, .timeline-date h2 {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.03em;
}
.text-link {
  min-height: 44px;
  padding: 0 2px;
  border-bottom: 1px solid var(--ink);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.category-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.3;
}
.category-total small {
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--text-xs);
}
.money-stack {
  display: flex;
  gap: 3px;
  height: 44px;
  margin-top: 16px;
}
.money-stack i {
  position: relative;
  overflow: hidden;
  flex-basis: 0;
  min-width: 6px;
  border-radius: 7px;
  background-color: var(--cat);
  opacity: .58;
  transition: opacity .5s var(--ease), transform .5s var(--spring);
}
.money-stack i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 0 110%, rgba(255, 255, 255, .17) 0 1px, transparent 1px 5px);
}
.money-stack i.money-stack--active {
  opacity: 1;
  transform: translateY(-4px);
}
.money-stack--empty {
  display: grid;
  place-items: center;
  height: auto;
  padding: 22px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
}
.money-stack--empty p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: center;
}
.category-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.category-chip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  transition: border-color .3s, background-color .3s, transform .18s var(--ease);
}
.category-chip-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--cat);
  background: var(--cat);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--cat) 14%, transparent);
  }
}
.category-chip-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.category-chip-copy > span {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-chip-copy strong {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}
.category-chip small {
  align-self: start;
  color: var(--muted);
  font-size: var(--text-micro);
  font-variant-numeric: tabular-nums;
}
.category-chip--active {
  border-color: var(--cat);
  background-color: var(--cat);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--cat) 7%, var(--paper));
  }
}
.category-ecosystem--receive .category-chip--active {
  animation: categoryReceive 1.25s var(--ease) both;
}
.category-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
  animation: focusEmerge .6s var(--ease) both;
}
.category-caption > span {
  flex: 0 0 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cat, var(--pine));
}
.category-caption strong {
  color: var(--ink);
}
.brain-teaser {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 36px;
  padding: 24px 0;
  border-block: 1px solid var(--ink);
  text-align: left;
  transition: color .35s, transform .18s var(--ease);
}
.brain-teaser:hover {
  color: var(--pine);
}
.brain-signal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.brain-signal span {
  width: 2px;
  height: 8px;
  background: var(--pine);
  animation: signal 1.8s ease-in-out infinite;
}
.brain-signal span:nth-child(2) {
  height: 19px;
  animation-delay: -.3s;
}
.brain-signal span:nth-child(3) {
  height: 12px;
  animation-delay: -.6s;
}
.brain-signal span:nth-child(4) {
  height: 5px;
  animation-delay: -.9s;
}
.brain-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brain-copy strong {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}
.brain-copy-detail {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.6;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.section-block {
  margin-top: 52px;
}
.transaction-list {
  border-top: 1px solid var(--line);
}
.transaction {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 76px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.button.transaction {
  transition: background .3s, transform .18s var(--ease);
}
.button.transaction:hover {
  background: rgba(18, 18, 20, .03);
}
.transaction-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--cat, var(--pine));
  background: var(--cat, var(--pine));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--cat, var(--pine)) 13%, transparent);
  }
}
.transaction-icon--income {
  box-shadow: inset 0 0 0 1px var(--cat);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 40%, transparent);
  }
}
.transaction-icon--saving {
  border: 1px dashed var(--cat);
}
.transaction-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.transaction-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.transaction-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transaction-amount {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
}
.transaction-amount--income {
  color: var(--pine);
}
.transaction--fresh {
  animation: transactionIn .8s var(--spring) both;
}
.empty-state {
  padding: 28px 0 8px;
}
.empty-state strong {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.4;
}
.empty-state p {
  max-width: 460px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 99px;
  color: var(--paper);
  background: var(--ink);
  font-size: var(--text-sm);
  font-weight: 500;
}
.pill-button--ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.goal-teaser {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  width: 100%;
  margin-top: 50px;
  padding: 26px 24px 24px;
  border-radius: var(--radius-md);
  color: var(--c-paper);
  background: var(--pine-fill);
  text-align: left;
}
.goal-teaser:not(.goal-teaser--empty)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: repeating-radial-gradient(circle at 104% -10%, rgba(236, 231, 220, .07) 0 1px, transparent 1px 7px);
}
.goal-meta, .goal-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.goal-teaser .eyebrow {
  color: rgba(236, 231, 220,.82);
}
.goal-meta > span:last-child {
  font-family: var(--display);
  font-size: 22px;
}
.goal-teaser-name {
  display: block;
  margin: 32px 0 20px;
  font-family: var(--display);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.goal-track {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: rgba(236, 231, 220,.2);
}
.goal-track span {
  display: block;
  position: relative;
  height: 100%;
  border-radius: 4px;
  background: var(--c-paper);
  transition: width 1.1s var(--ease);
}
.goal-track span::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-paper);
  box-shadow: 0 0 18px var(--c-paper);
}
.goal-bottom {
  margin-top: 13px;
  color: rgba(236, 231, 220,.82);
  font-size: var(--text-xs);
}
.goal-bottom strong {
  color: var(--c-paper);
  font-size: var(--text-sm);
  font-weight: 500;
}
.goal-teaser--empty {
  border: 1px dashed var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.goal-teaser--empty .eyebrow {
  color: var(--muted);
}
.goal-teaser--empty .goal-teaser-name {
  margin: 18px 0 8px;
  font-size: 30px;
}
.goal-teaser--empty .goal-bottom {
  color: var(--muted);
}
.add-button {
  position: fixed;
  z-index: 5;
  right: 20px;
  bottom: calc(var(--nav-space) + 2px);
  display: flex;
  align-items: center;
  gap: 0;
  width: 56px;
  height: 56px;
  padding: 0 18px;
  overflow: hidden;
  border-radius: 28px;
  color: var(--paper);
  background: var(--ink);
  box-shadow: 0 16px 35px rgba(15, 15, 16,.24);
  transition: width .45s var(--ease), gap .45s, transform .18s var(--ease);
}
.add-button span {
  width: 0;
  opacity: 0;
  white-space: nowrap;
  font-size: var(--text-sm);
  transition: opacity .3s;
}
.add-button svg {
  flex: 0 0 auto;
}
@media (hover: hover) {
  .add-button:hover, .add-button:focus-visible {
    width: 184px;
    gap: 10px;
  }
  .add-button:hover span, .add-button:focus-visible span {
    width: auto;
    opacity: 1;
  }
}
.mobile-nav {
  position: fixed;
  z-index: 10;
  right: 12px;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 12px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 72px;
  padding: 7px 5px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 23px;
  color: rgba(236, 231, 220,.62);
  background: rgba(15, 15, 16,.96);
  box-shadow: 0 18px 55px rgba(15, 15, 16,.32);
}
.mobile-nav .button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  transition: color .3s;
}
.mobile-nav .button > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: transform .4s var(--spring), background .3s, color .3s;
}
.mobile-nav small {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--text-micro);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-nav .nav-active {
  color: var(--c-paper);
}
.mobile-nav .nav-active > span {
  color: var(--c-ink);
  background: var(--c-paper);
  transform: translateY(-2px);
}
.desktop-nav {
  display: none;
}
.page-title {
  padding: 32px 0 32px;
  border-bottom: 1px solid var(--ink);
}
.page-title h1 {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: clamp(56px, 16vw, 100px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.05em;
}
.page-title p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.month-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}
.month-switcher strong {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
}
.history-summary {
  margin: 22px 0 30px;
}
.history-summary > div:first-child {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.history-summary > div:first-child > span {
  color: var(--muted);
  font-size: var(--text-xs);
}
.history-summary > div:first-child strong {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
}
.history-totals {
  display: flex;
  gap: 24px;
  margin: 6px 0 0;
  font-size: var(--text-xs);
}
.history-totals div {
  display: flex;
  gap: 6px;
}
.history-totals dt {
  color: var(--muted);
}
.history-totals dd {
  margin: 0;
  font-weight: 500;
}
.history-line {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 54px;
  margin-top: 18px;
}
.history-line i {
  flex: 0 1 14px;
  height: 100%;
  background: var(--sage);
  transform-origin: bottom;
  transition: transform .8s var(--ease);
  animation: barIn .8s var(--ease) both;
}
.history-line i.history-line--today {
  background: var(--pine);
}
.filter-row {
  display: flex;
  gap: 8px;
  margin: 0 -20px 30px;
  padding: 2px 20px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-row::-webkit-scrollbar {
  display: none;
}
.filter-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font-size: var(--text-xs);
  white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}
.filter-chip--active {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}
.chip-badge {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(236, 231, 220,.18);
  font-size: var(--text-micro);
}
.filter-chip:not(.filter-chip--active) .chip-badge {
  background: var(--paper-warm);
}
.timeline-group {
  margin-bottom: 40px;
}
.timeline-date {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.timeline-date h2 {
  font-size: 25px;
}
.timeline-date > .money {
  color: var(--muted);
  font-size: var(--text-xs);
}
.intelligence-surface {
  position: relative;
  margin: 24px -20px 0;
  padding: 26px 20px 28px;
  overflow: hidden;
  color: var(--c-paper);
  background: var(--c-ink);
}
.brain-status {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 18px;
  color: rgba(236, 231, 220,.62);
  font-size: var(--text-micro);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.brain-field {
  position: relative;
  height: 210px;
  margin: 10px -20px 0;
}
.data-field {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black 30%, transparent);
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease);
}
.brain-phase--dormant .data-field {
  opacity: .05;
  transform: scale(1.08);
}
.brain-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.brain-mesh {
  stroke: rgba(236, 231, 220,.12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 6;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.brain-phase--relating .brain-mesh, .brain-phase--focusing .brain-mesh {
  opacity: 1;
}
.brain-phase--resolved .brain-mesh {
  opacity: .35;
}
.brain-link {
  stroke: var(--pine-light);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.brain-phase--focusing .brain-link, .brain-phase--resolved .brain-link {
  opacity: .85;
}
.brain-node {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: translate(-50%, -6px);
  opacity: .12;
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.brain-node i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-paper);
  box-shadow: 0 0 0 0 rgba(179, 146, 86,0);
  transition: box-shadow .6s, background .6s, transform .6s var(--spring);
}
.brain-node b {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}
.brain-node small {
  color: rgba(236, 231, 220,.86);
  font-size: var(--text-micro);
  white-space: nowrap;
}
.brain-phase--activating .brain-node, .brain-phase--relating .brain-node {
  opacity: .8;
  transform: translate(-50%, 0);
}
.brain-node--focus {
  opacity: 1 !important;
  transform: translate(-50%, 0) scale(1.06) !important;
}
.brain-node--focus i {
  background: var(--pine-light);
  box-shadow: 0 0 0 6px rgba(179, 146, 86,.18);
  transform: scale(1.4);
}
.brain-node--recede {
  opacity: .68 !important;
}
.brain-insight {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--pine-light);
  box-shadow: 0 0 22px var(--pine-light);
  opacity: 0;
  transform: scale(.3);
  transition: opacity .5s, transform .6s var(--spring);
}
.brain-phase--focusing .brain-insight, .brain-phase--resolved .brain-insight {
  opacity: 1;
  transform: scale(1);
}
.analysis-sweep {
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(179, 146, 86,.14), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.brain-phase--activating .analysis-sweep, .brain-phase--relating .analysis-sweep {
  animation: analysisSweep 1.6s var(--ease) infinite;
}
.brain-answer {
  position: relative;
  z-index: 2;
  min-height: 150px;
}
.answer-kicker {
  margin: 8px 0 10px;
  color: var(--pine-light);
  font-size: var(--text-sm);
}
.answer-main {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 15px;
  animation: insightResolve .8s var(--ease) both;
}
.answer-main > strong {
  max-width: 76%;
  font-family: var(--display);
  font-size: clamp(30px, 8.6vw, 38px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.035em;
}
.answer-main > span {
  flex: 0 0 auto;
  padding-top: 6px;
  color: var(--pine-light);
  font-family: var(--display);
  font-size: 22px;
  white-space: nowrap;
}
.answer-detail {
  max-width: 520px;
  margin: 20px 0 0;
  color: rgba(236, 231, 220,.78);
  font-size: var(--text-sm);
  line-height: 1.75;
  animation: fadeUp .7s .15s var(--ease) both;
}
.fact-token {
  font-weight: 500;
  white-space: nowrap;
}
.intelligence-surface .fact-token {
  color: var(--c-paper);
}
.answer-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 14px 0 0;
  color: #e2c9a0;
  font-size: var(--text-xs);
  line-height: 1.55;
}
.answer-notice svg {
  flex: 0 0 auto;
  margin-top: 2px;
}
.answer-pending {
  display: grid;
  gap: 12px;
  padding-top: 6px;
}
.answer-pending i {
  display: block;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(236, 231, 220,.05), rgba(236, 231, 220,.11), rgba(236, 231, 220,.05));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.answer-pending i:first-child {
  width: 78%;
  height: 34px;
}
.answer-pending i:last-child {
  width: 56%;
}
.reasoning-line {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  margin: 30px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(236, 231, 220,.14);
  list-style: none;
}
.reasoning-line li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(236, 231, 220,.62);
  font-size: var(--text-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .5s;
}
.reasoning-line i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(236, 231, 220,.25);
  transition: background .5s, box-shadow .5s;
}
.reasoning-line .reasoning-line--on {
  color: rgba(236, 231, 220,.85);
}
.reasoning-line .reasoning-line--on i {
  background: var(--pine-light);
  box-shadow: 0 0 12px var(--pine-light);
}
.brain-facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  animation: fadeUp .7s .25s var(--ease) both;
}
.brain-facts div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.brain-facts dt {
  overflow: hidden;
  color: rgba(236, 231, 220,.55);
  font-size: var(--text-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brain-facts dd {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
}
.brain-ask {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--ink);
  border-radius: 99px;
}
.brain-ask input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
}
.brain-ask input::placeholder {
  color: var(--muted);
  font-size: var(--text-sm);
}
.brain-ask .button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--paper);
  background: var(--ink);
}
.prompts {
  margin-top: 36px;
}
.prompts > .eyebrow {
  display: block;
  margin-bottom: 10px;
}
.prompts .button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.35;
  transition: padding .35s, color .35s;
}
.prompts .button:hover, .prompts .prompt--active {
  padding-left: 8px;
  color: var(--pine);
}
.brain-disclaimer {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.65;
}
.goal-switcher {
  margin: 22px -20px 0;
}
.goal-cinematic {
  position: relative;
  margin-top: 24px;
}
.goal-horizon {
  position: relative;
  height: 210px;
  margin-inline: -20px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, #2a241a, var(--c-ink) 65%);
  perspective: 500px;
}
.goal-horizon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 5, 6,.15), rgba(5, 5, 6,.82)), radial-gradient(ellipse at calc(8% + var(--progress, 0%) * .84) 55%, rgba(179, 146, 86,.25), transparent 25%);
  pointer-events: none;
}
.goal-city {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72%;
  fill: rgba(236, 231, 220,.07);
  opacity: .9;
  transform: scale(1.04);
  transform-origin: 50% 100%;
  transition: transform 1.4s var(--ease), opacity 1.4s;
}
.goal-horizon--advancing .goal-city {
  opacity: 1;
  transform: scale(1.1) translateY(2%);
}
.horizon-line {
  position: absolute;
  z-index: 1;
  top: 55%;
  right: 8%;
  left: 8%;
  height: 1px;
  background: rgba(236, 231, 220,.2);
}
.horizon-line span {
  display: block;
  position: relative;
  width: var(--progress);
  height: 2px;
  margin-top: -.5px;
  background: linear-gradient(90deg, #b39256, var(--c-paper));
  transition: width 1.1s var(--ease);
}
.horizon-tick {
  position: absolute;
  z-index: 1;
  top: calc(55% - 4px);
  width: 1px;
  height: 9px;
  background: rgba(236, 231, 220,.3);
  transition: background .5s, box-shadow .5s;
}
.horizon-tick--reached {
  background: var(--c-paper);
}
.horizon-tick--crossed {
  animation: tickCrossed 1.1s .5s var(--ease) both;
}
.journey-light {
  position: absolute;
  z-index: 3;
  top: calc(55% - 3.5px);
  left: calc(8% + var(--progress) * .84 - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-paper);
  box-shadow: 0 0 12px 4px rgba(236, 231, 220,.4);
  transition: left 1.1s var(--ease);
}
.journey-particles i {
  position: absolute;
  z-index: 2;
  top: 55%;
  left: calc(8% + var(--progress) * .84);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--c-paper);
  opacity: 0;
}
.goal-horizon--advancing .journey-particles i {
  animation: goalParticle 1.25s var(--ease) both;
}
.journey-particles i:nth-child(2) {
  animation-delay: .08s !important;
}
.journey-particles i:nth-child(3) {
  animation-delay: .16s !important;
}
.journey-particles i:nth-child(4) {
  animation-delay: .24s !important;
}
.journey-particles i:nth-child(5) {
  animation-delay: .32s !important;
}
.goal-horizon--advancing {
  animation: horizonCamera 1.35s var(--ease) both;
}
.goal-horizon--dormant {
  height: 150px;
}
.milestone {
  position: absolute;
  z-index: 2;
  top: calc(55% - 2.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(236, 231, 220,.55);
  font-size: var(--text-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.milestone i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--silver);
}
.milestone--start {
  left: calc(8% - 2.5px);
  align-items: flex-start;
  transform: none;
}
.milestone--now {
  left: calc(8% + var(--progress) * .84);
  color: var(--c-paper);
  transition: left 1.1s var(--ease);
}
.milestone--now i {
  opacity: 0;
}
.milestone--quiet span {
  opacity: 0;
}
.milestone--end {
  left: calc(92% + 2.5px);
  align-items: flex-end;
  transform: translateX(-100%);
}
.contribution-chip {
  position: absolute;
  z-index: 6;
  top: 96px;
  left: calc(8% + var(--progress) * .84);
  padding: 8px 14px;
  border-radius: 99px;
  color: var(--c-ink);
  background: var(--c-paper);
  font-family: var(--display);
  font-size: 17px;
  white-space: nowrap;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  animation: contributionEnter .62s var(--ease) both;
}
.goal-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
}
.goal-title h2 {
  margin: 8px 0 0;
  font-family: var(--display);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.goal-amount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}
.goal-amount strong {
  font-family: var(--display);
  font-size: clamp(24px, 7.5vw, 30px);
  font-weight: 400;
}
.goal-amount > span {
  color: var(--muted);
  font-size: var(--text-xs);
  text-align: right;
}
.goal-progress-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.goal-progress-copy strong {
  font-family: var(--display);
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
}
.goal-progress-copy span {
  color: var(--muted);
  font-size: var(--text-xs);
  text-align: right;
}
.goal-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 18px 0 0;
}
.goal-stats div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.goal-stats dt {
  color: var(--muted);
  font-size: var(--text-micro);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.goal-stats dd {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
}
.contribute {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 26px;
  padding: 0 22px;
  border-radius: 99px;
  color: var(--c-paper);
  background: var(--pine-fill);
  font-size: var(--text-sm);
  font-weight: 600;
}
.empty-actions .contribute {
  width: auto;
  margin-top: 0;
}
.goal-note {
  display: flex;
  gap: 15px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.goal-note > svg {
  flex: 0 0 auto;
  color: var(--pine);
}
.goal-note div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.goal-note strong {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}
.goal-note p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.add-goal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}
.profile-block {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  margin: 28px 0 48px;
}
.profile-block > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--c-paper);
  background: var(--pine-fill);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .06em;
}
.profile-block label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-block small {
  color: var(--muted);
  font-size: var(--text-xs);
}
.profile-block input {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 22px;
}
.profile-block input:focus {
  border-color: var(--pine);
}
.settings-group {
  margin-bottom: 44px;
}
.settings-group > .eyebrow {
  display: block;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 74px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.setting-row > div, .setting-link > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.setting-row strong, .setting-link strong {
  font-size: var(--text-sm);
  font-weight: 500;
}
.setting-row small, .setting-link small {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.setting-link {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 70px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.setting-link > svg:first-child {
  color: var(--pine);
}
.setting-link > svg:last-child {
  color: var(--muted);
}
.setting-link--danger, .setting-link--danger > svg:first-child {
  color: var(--danger);
}
.switch {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 44px;
  padding: 0;
}
.switch::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 3px;
  left: 3px;
  height: 28px;
  border-radius: 20px;
  background: var(--paper-warm);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background .35s;
}
.switch i {
  position: absolute;
  top: 11px;
  left: 6px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
  transition: transform .35s var(--spring);
}
.switch--on::before {
  background: var(--pine-fill);
}
.switch--on i {
  transform: translateX(18px);
}
.setting-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 99px;
  background: var(--paper-warm);
}
.segmented-option {
  min-height: 44px;
  border-radius: 99px;
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
  transition: background .3s, color .3s;
}
.segmented-option--active {
  color: var(--paper);
  background: var(--ink);
}
.workspace-choice {
  display: grid;
  gap: 0;
}
.workspace-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 70px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.workspace-option > i {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--silver);
  border-radius: 50%;
  transition: border .3s, box-shadow .3s;
}
.workspace-option--active > i {
  border: 5px solid var(--pine);
}
.workspace-option span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.workspace-option strong {
  font-size: var(--text-sm);
  font-weight: 500;
}
.workspace-option small {
  color: var(--muted);
  font-size: var(--text-xs);
}
.privacy-note {
  display: flex;
  gap: 14px;
  margin: 0 0 36px;
  padding: 18px;
  border-radius: var(--radius-sm);
  background: var(--paper-warm);
}
.privacy-note svg {
  flex: 0 0 auto;
  color: var(--pine);
}
.privacy-note p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  line-height: 1.65;
}
.version {
  color: var(--muted);
  font-size: var(--text-micro);
  text-align: center;
}
.sheet-backdrop {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(5, 5, 6,.58);
  animation: fadeIn .3s both;
}
.sheet-backdrop--closing {
  animation: fadeOut .24s both;
}
.sheet {
  width: min(100%, 540px);
  max-height: calc(100dvh - 16px);
  padding: 10px 20px max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 28px 28px 0 0;
  background: var(--surface);
  box-shadow: 0 -24px 90px rgba(0,0,0,.22);
  animation: sheetIn .55s var(--ease) both;
}
.sheet--closing {
  animation: sheetOut .24s var(--ease) both;
}
.sheet-handle {
  width: 36px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 2px;
  background: var(--line);
}
.entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.entry-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.entry-head strong {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
}
.type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 16px;
  padding: 4px;
  border-radius: 99px;
  background: var(--paper-warm);
}
.type-toggle .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border-radius: 99px;
  color: var(--muted);
  font-size: var(--text-sm);
  transition: background .3s, color .3s;
}
.type-toggle .type-toggle--active {
  color: var(--paper);
  background: var(--ink);
}
.amount-stage {
  padding: 22px 0 20px;
  text-align: center;
}
.amount-field {
  display: flex;
  flex-direction: column;
}
.amount-field > label {
  color: var(--muted);
  font-size: var(--text-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.amount-field > small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--text-xs);
}
.amount-field--hero .amount-input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.amount-field--hero .amount-input b {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
}
.amount-field--hero .amount-input input {
  width: calc(var(--chars, 1) * .56em + .2em);
  max-width: calc(100% - 40px);
  min-width: max(44px, .8em);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--display);
  font-size: clamp(48px, 15vw, 66px);
  line-height: 1.25;
  letter-spacing: -.035em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.amount-field--hero .amount-input[data-length="9"] input, .amount-field--hero .amount-input[data-length="10"] input {
  font-size: clamp(40px, 12vw, 56px);
}
.amount-field--hero .amount-input[data-length="11"] input, .amount-field--hero .amount-input[data-length="13"] input {
  font-size: clamp(34px, 10vw, 48px);
}
.amount-field--hero input::placeholder {
  color: var(--placeholder);
}
.amount-field--inline {
  gap: 6px;
  text-align: left;
}
.amount-field--inline > label {
  letter-spacing: .04em;
}
.amount-field--inline .amount-input {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}
.amount-field--inline .amount-input b {
  color: var(--muted);
  font-weight: 400;
}
.amount-field--inline .amount-input input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.amount-field--inline .amount-input:focus-within {
  border-color: var(--pine);
}
.amount-field--error .amount-input {
  border-color: var(--danger);
}
.field-error {
  display: block;
  margin-top: 6px;
  color: var(--danger) !important;
  font-size: var(--text-xs);
}
.category-stage {
  margin: 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.category-stage legend {
  float: left;
  width: 100%;
  padding: 0;
}
.category-grid {
  display: grid;
  clear: both;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding-top: 12px;
}
.category-grid .button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-xs);
  transition: background .3s, color .3s, border-color .3s, transform .18s var(--ease);
}
.category-grid .button > svg:last-child:not(:first-child) {
  position: absolute;
  top: 7px;
  right: 7px;
}
.category-grid .category--active {
  border-color: var(--pine-fill);
  color: var(--c-paper);
  background: var(--pine-fill);
}
.entry-linked {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
}
.entry-linked strong {
  color: var(--ink);
  font-weight: 500;
}
.entry-fields {
  margin-top: 12px;
}
.note-row {
  display: block;
}
.note-row input {
  width: 100%;
  height: 50px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: 0;
  background: transparent;
  font-size: 16px;
}
.note-row input:focus {
  border-color: var(--pine);
}
.note-row input::placeholder {
  color: var(--muted);
  font-size: var(--text-sm);
}
.date-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.date-row input {
  min-height: 44px;
  border: 0;
  outline: 0;
  color: var(--muted);
  background: transparent;
  font-size: var(--text-sm);
}
.date-row--error {
  border-color: var(--danger);
}
.entry-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.save-expense {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 99px;
  color: var(--paper);
  background: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
}
.delete-button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid rgba(155,81,73,.35);
  border-radius: 99px;
  color: var(--danger);
  font-size: var(--text-sm);
  transition: background .3s, color .3s;
}
.delete-button--confirm {
  color: var(--c-paper);
  background: var(--danger-fill);
}
.delete-button--wide {
  justify-content: center;
  width: 100%;
}
.confirm-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 6px;
}
.confirm-body p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.confirm-body .pill-button {
  min-height: 52px;
}
.text-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
}
.text-field > span {
  color: var(--muted);
  font-size: var(--text-micro);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.text-field input {
  width: 100%;
  height: 46px;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: 0;
  background: transparent;
  font-size: 16px;
}
.text-field input:focus {
  border-color: var(--pine);
}
.text-field--error input {
  border-color: var(--danger);
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
.field-grid > * {
  margin-top: 18px;
}
.field-grid .text-field {
  margin-top: 18px;
}
.goal-preview {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--paper-warm);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.goal-preview strong {
  font-weight: 600;
}
.goal-primary-link {
  display: block;
  margin: 16px auto 0;
}
.quick-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.quick-keys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.quick-key {
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.small-confirm {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--paper-warm);
  text-align: left;
}
.small-confirm p {
  margin: 0 0 10px;
  font-size: var(--text-sm);
}
.small-confirm > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.small-confirm .pill-button {
  flex: 1 1 auto;
  min-height: 44px;
}
.demo-choice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 6px;
}
.demo-choice p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.demo-choice .pill-button {
  min-height: 52px;
}
.entry-head .demo-pill {
  margin-left: 2px;
}
.contribute-submit {
  margin-top: 18px;
  width: 100%;
}
.contribute-sheet .save-expense, .goal-sheet .save-expense {
  flex: 1;
}
.money-transfer {
  position: fixed;
  z-index: 80;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.money-transfer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(179, 146, 86,.1), transparent 55%);
  animation: transferAtmosphere 1.4s var(--ease) both;
}
.transfer-trail {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.transfer-trail path {
  fill: none;
  stroke: var(--pine-light);
  stroke-width: 1.2;
  stroke-dasharray: 6 10;
  animation: transferPath 1.3s var(--ease) both;
}
.transfer-token {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  will-change: transform, opacity;
}
.transfer-token strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.04em;
  white-space: nowrap;
  text-shadow: 0 8px 30px var(--glow);
}
.transfer-token span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--pine);
  border-radius: 99px;
  color: var(--pine);
  background: var(--paper);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 14px 45px rgba(18, 18, 20,.2);
}
.transfer-token--in strong {
  color: var(--pine);
}
.transfer-impact {
  position: absolute;
  width: 0;
  height: 0;
}
.transfer-impact i {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--pine-light);
  border-radius: 50%;
  opacity: 0;
  animation: transferRing .8s 1.05s var(--ease) both;
}
.transfer-impact i:nth-child(2) {
  animation-delay: 1.15s;
}
.transfer-impact i:nth-child(3) {
  animation-delay: 1.25s;
}
.toast-stack {
  position: fixed;
  z-index: 90;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  min-height: 46px;
  padding: 10px 12px 10px 16px;
  border-radius: 16px;
  color: var(--c-paper);
  background: var(--c-ink-soft);
  box-shadow: 0 14px 40px rgba(5, 5, 6,.28);
  font-size: var(--text-sm);
  line-height: 1.45;
  pointer-events: auto;
  animation: toastIn .45s var(--ease) both;
}
.toast svg {
  flex: 0 0 auto;
  color: var(--pine-light);
}
.toast--warning svg {
  color: #e2c9a0;
}
.toast-action {
  flex: 0 0 auto;
  min-height: 44px;
  margin-left: 4px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--c-ink);
  background: var(--c-paper);
  font-size: var(--text-xs);
  font-weight: 600;
}
.intro {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  color: var(--c-paper);
  background: var(--night);
  cursor: pointer;
  animation: introOut .9s 6.35s var(--ease) forwards;
}
.intro-grain {
  position: absolute;
  inset: -50%;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: grain .18s steps(2) infinite;
}
.intro-dark-label {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(236, 231, 220,.5);
  font-size: var(--text-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: translate(-50%,28px);
  animation: darkLabel 1.5s .35s var(--ease) both;
}
.intro-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 15px;
  transform: translate(-50%,-50%);
  animation: brandFinale 1.8s 5s var(--ease) both;
}
.intro-brand .brand-name {
  font-size: 30px;
}
.intro-sub {
  color: rgba(236, 231, 220,.55);
  font-size: var(--text-micro);
  letter-spacing: .12em;
  white-space: nowrap;
  text-transform: uppercase;
}
.trajectory {
  position: absolute;
  inset: 18% -10% 13%;
  opacity: 0;
  animation: trajectoryIn 4.6s .75s var(--ease) both;
}
.trajectory svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.trajectory path {
  fill: none;
  stroke: url(#intro-line);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: introDraw 3s .85s var(--ease) forwards;
}
.intro-grid {
  position: absolute;
  inset: -10%;
  opacity: 0;
  background-image: linear-gradient(rgba(236, 231, 220,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 231, 220,.055) 1px, transparent 1px);
  background-size: 58px 52px;
  mask-image: radial-gradient(ellipse, black, transparent 72%);
  animation: gridMaterialize 2.5s 2.55s var(--ease) both;
  transform: perspective(650px) rotateX(61deg) scale(1.45);
}
.light-point {
  position: absolute;
  z-index: 2;
  top: 80%;
  left: 1%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-paper);
  box-shadow: 0 0 12px 4px rgba(236, 231, 220,.5), 0 0 40px 15px rgba(179, 146, 86,.22);
  opacity: 0;
  animation: pointTravel 3s .85s var(--ease) both;
}
.intro-data span {
  position: absolute;
  color: rgba(236, 231, 220,.55);
  font-family: var(--display);
  font-size: clamp(13px, 2vw, 19px);
  opacity: 0;
  animation: introDatum 1.8s var(--ease) both;
}
.intro-data span:nth-child(1) {
  top: 67%;
  left: 23%;
  animation-delay: 2.25s;
}
.intro-data span:nth-child(2) {
  top: 39%;
  left: 51%;
  animation-delay: 2.55s;
}
.intro-data span:nth-child(3) {
  top: 24%;
  right: 16%;
  animation-delay: 2.8s;
}
.intro-data span:nth-child(4) {
  bottom: 14%;
  right: 32%;
  animation-delay: 3s;
}
.intro-data span:nth-child(5) {
  top: 45%;
  left: 8%;
  animation-delay: 3.2s;
}
.intro-interface {
  position: absolute;
  inset: 12% 8%;
  border: 1px solid rgba(236, 231, 220,.12);
  opacity: 0;
  transform: perspective(900px) rotateX(7deg) scale(.93);
  animation: interfaceResolve 2s 3.5s var(--ease) both;
}
.intro-interface::before, .intro-interface::after {
  content: "";
  position: absolute;
  background: rgba(236, 231, 220,.1);
}
.intro-interface::before {
  top: 0;
  bottom: 0;
  left: 63%;
  width: 1px;
}
.intro-interface::after {
  top: 28%;
  right: 0;
  left: 0;
  height: 1px;
}
.intro-interface i {
  position: absolute;
  height: 1px;
  background: rgba(236, 231, 220,.18);
}
.intro-interface i:nth-child(1) {
  top: 42%;
  left: 5%;
  width: 40%;
}
.intro-interface i:nth-child(2) {
  top: 52%;
  left: 5%;
  width: 29%;
}
.intro-interface i:nth-child(3) {
  top: 68%;
  left: 68%;
  width: 25%;
}
.intro-interface i:nth-child(4) {
  top: 76%;
  left: 68%;
  width: 16%;
}
.intro-interface i:nth-child(5) {
  top: 84%;
  left: 68%;
  width: 21%;
}
.intro-statement {
  position: absolute;
  z-index: 4;
  bottom: 11%;
  left: 7%;
  opacity: 0;
  animation: statementReveal 1.65s 4.05s var(--ease) both;
}
.intro-statement > span {
  font-size: var(--text-micro);
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .6;
}
.intro-statement strong {
  display: block;
  margin-top: 9px;
  font-family: var(--display);
  font-size: clamp(43px, 9vw, 112px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.045em;
}
.intro-statement em {
  color: var(--pine-light);
  font-weight: 400;
}
.skip {
  position: absolute;
  z-index: 6;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(236, 231, 220,.2);
  border-radius: 99px;
  color: rgba(236, 231, 220,.7);
  font-size: var(--text-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.skip:active {
  transform: translateX(-50%) scale(.96) !important;
}
.intro--still, .intro--still * {
  animation: none !important;
}
.intro--still .trajectory {
  opacity: .7;
}
.intro--still .trajectory path {
  stroke-dashoffset: 0;
}
.intro--still .intro-dark-label {
  display: none;
}
.history-view, .brain-view, .goals-view, .settings-view {
  --page-note: var(--card);
}
.page-title h1, .section-heading h2, .timeline-date h2, .goal-title h2, .goal-teaser-name, .brand-name, .balance-value, .empty-state strong, .answer-main > strong, .goal-note strong, .brain-copy strong, .prompts .button, .month-switcher strong {
  font-weight: 500;
}
.page-title h1 {
  letter-spacing: -.03em;
}
.balance-value {
  font-size: clamp(40px, 11vw, 60px);
  letter-spacing: -.02em;
}
.transaction-amount, .category-total, .category-chip-copy strong, .goal-stats dd, .brain-facts dd, .goal-amount strong, .goal-meta > span:last-child, .history-summary > div:first-child strong, .today-guide-value {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.transaction-amount {
  font-size: 15px;
}
.category-total {
  font-size: 16px;
}
.category-chip-copy strong {
  font-size: 15px;
}
.goal-stats dd {
  font-size: 15px;
}
.brand-name {
  font-size: 25px;
  letter-spacing: -.01em;
}
.mobile-header .brand-mark {
  color: var(--pine);
}
.brand-tier {
  align-self: center;
  padding: 3px 8px 2px;
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  color: var(--pine);
  font-size: var(--text-micro);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.page-title {
  padding-bottom: 0;
  border-bottom: 0;
}
.page-title::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 26px;
  background: linear-gradient(90deg, var(--gold-deep) 0 56px, var(--line-strong) 56px);
}
.eyebrow {
  letter-spacing: .2em;
}
.mobile-nav {
  isolation: isolate;
  overflow: hidden;
  background-color: var(--card);
  box-shadow: inset 0 0 0 1px rgba(210, 180, 122, .22), 0 18px 40px -16px rgba(0, 0, 0, .6);
}
.mobile-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--guilloche);
  pointer-events: none;
}
.mobile-nav .button > span {
  width: 44px;
  height: 30px;
  border-radius: 10px;
}
.mobile-nav .nav-active {
  color: var(--gold);
}
.mobile-nav .nav-active > span {
  color: var(--gold);
  background: rgba(210, 180, 122, .12);
  box-shadow: inset 0 0 0 1px var(--gold-line);
  transform: none;
}
.add-button {
  border-radius: 18px;
  color: var(--gold);
  background-color: var(--card);
  background-image: var(--guilloche);
  box-shadow: inset 0 0 0 1px var(--gold-line), 0 18px 32px -14px rgba(0, 0, 0, .7);
}
.pill-button, .save-expense, .contribute {
  border-radius: 14px;
  color: var(--btn-fg);
  background-color: var(--btn-bg);
}
.pill-button--ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.contribute {
  background-image: var(--guilloche);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.icon-button {
  border-radius: 12px;
}
.type-toggle, .segmented {
  border-radius: 14px;
}
.type-toggle .button, .segmented-option {
  border-radius: 10px;
}
.type-toggle .type-toggle--active, .segmented-option--active, .filter-chip--active:not([data-cat]) {
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-color: var(--btn-bg);
}
.switch--on::before {
  background: var(--gold-deep);
}
.filter-chip {
  border-radius: 10px;
}
.chip-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cat);
}
.filter-chip--active[data-cat] {
  border-color: var(--cat-fill);
  color: var(--note-ink);
  background: var(--cat-fill);
}
.filter-chip--active .chip-dot {
  background: var(--note-ink);
}
.category-grid .button > svg:first-child {
  color: var(--cat, var(--pine));
}
.category-grid .button.category--active {
  border-color: var(--cat-fill);
  color: var(--note-ink);
  background-color: var(--cat-fill);
  background-image: var(--guilloche);
}
.category-grid .button.category--active > svg, .category-grid .button.category--active span {
  color: var(--note-ink);
}
.setting-row > .segmented {
  display: grid;
}
.sheet-handle {
  width: 40px;
  background: var(--gold-line);
}
.money-stack i::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 45%, rgba(0, 0, 0, .18));
}
.category-chip--active {
  box-shadow: inset 0 0 0 1px var(--cat);
}
.history-summary, .intelligence-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--card-ink);
  background-color: var(--card);
  box-shadow: inset 0 0 0 1px var(--gold-line), 0 28px 44px -30px rgba(0, 0, 0, .7);
}
.history-summary::before, .intelligence-surface::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--guilloche);
  pointer-events: none;
}
.history-summary {
  margin: 18px 0 26px;
  padding: 18px 20px 16px;
  border-radius: 18px;
}
.history-summary > div:first-child > span, .history-totals dt {
  color: var(--card-soft);
}
.history-summary > div:first-child strong {
  color: var(--gold);
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 300;
}
.history-line {
  height: 46px;
  margin-top: 14px;
}
.history-line i {
  border-radius: 2px 2px 0 0;
  background: rgba(236, 231, 220, .26);
}
.history-line i.history-line--today {
  background: var(--gold);
}
.timeline-date h2 {
  font-size: 24px;
}
.intelligence-surface {
  margin: 22px 0 0;
  padding: 22px 20px 24px;
  border-radius: 22px;
}
.intelligence-surface .answer-kicker, .intelligence-surface .answer-main > span {
  color: var(--brain-accent);
}
.intelligence-surface .brain-node--recede {
  opacity: .8 !important;
}
.intelligence-surface .brain-facts dt, .intelligence-surface .brain-status, .intelligence-surface .reasoning-line li {
  color: var(--note-ink-soft);
}
.brain-ask {
  border-radius: 16px;
}
.brain-ask .button {
  border-radius: 12px;
  color: var(--btn-fg);
  background: var(--btn-bg);
}
.goal-teaser {
  border-radius: 20px;
  background-color: var(--card);
  box-shadow: inset 0 0 0 1px var(--gold-line), 0 28px 44px -30px rgba(0, 0, 0, .7);
}
.goal-teaser:not(.goal-teaser--empty)::before {
  background: var(--guilloche);
}
.goal-teaser .goal-meta > span:last-child {
  color: var(--gold);
}
.goal-track span {
  background: var(--gold);
}
.goal-track span::after {
  background: var(--gold);
  box-shadow: 0 0 14px var(--gold);
}
.goal-teaser--empty {
  box-shadow: none;
  background: transparent;
}
.goal-horizon {
  margin-inline: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.horizon-line span {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.goal-stats {
  gap: 8px;
}
.goal-stats div {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.goal-note {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.goal-note > svg {
  color: var(--pine);
}
.profile-block > span {
  border-radius: 14px;
  color: var(--gold);
  background-color: var(--card);
  background-image: var(--guilloche);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.settings-group > .eyebrow {
  padding-bottom: 10px;
  border-bottom: 0;
}
.settings-group > .setting-row, .settings-group > .setting-link, .workspace-choice {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.settings-group > .setting-row, .settings-group > .setting-link {
  padding-inline: 16px;
}
.settings-group > .setting-row + .setting-row, .settings-group > .setting-link + .setting-link, .settings-group > .setting-row + .setting-link, .settings-group > .setting-link + .setting-row {
  margin-top: 8px;
}
.workspace-choice {
  overflow: hidden;
}
.workspace-option {
  padding-inline: 16px;
}
.workspace-option:last-child {
  border-bottom: 0;
}
.privacy-note {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.version {
  letter-spacing: .2em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 374px) {
  .view {
    padding-inline: 16px;
  }
  .intelligence-surface {
    padding-inline: 16px;
  }
  .brain-field {
    margin-inline: -16px;
  }
  .filter-row {
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .category-chip {
    gap: 8px;
    padding-inline: 8px;
  }
  .field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .brain-node small {
    display: none;
  }
}
@media (max-width: 767px) {
  .view {
    padding-bottom: calc(var(--nav-space) + 16px);
  }
  .mobile-header {
    margin-bottom: 18px;
  }
  .eyebrow-row {
    margin-bottom: 10px;
  }
  .balance-row {
    margin-top: 14px;
  }
  .sparkline {
    margin-top: 16px;
    padding-top: 12px;
  }
  .sparkline svg {
    height: 48px;
  }
  .category-ecosystem {
    margin-top: 30px;
  }
  .section-heading {
    margin-bottom: 8px;
  }
  .section-heading h2 {
    font-size: 26px;
  }
  .money-stack {
    margin-top: 10px;
    height: 40px;
  }
  .category-legend {
    margin-top: 12px;
  }
  .category-caption {
    margin-top: 10px;
  }
  .brain-teaser {
    margin-top: 22px;
    padding: 12px 0;
  }
  .brain-copy-detail {
    -webkit-line-clamp: 1;
  }
  .section-block {
    margin-top: 24px;
  }
  .transaction {
    min-height: 60px;
    padding: 5px 0;
  }
  .goal-teaser {
    margin-top: 22px;
    padding: 18px 20px 16px;
  }
  .goal-teaser-name {
    margin: 10px 0 12px;
    font-size: 28px;
  }
  .goal-teaser--empty .goal-teaser-name {
    margin: 12px 0 6px;
    font-size: 26px;
  }
}
@media (min-width: 768px) {
  .view {
    padding-inline: 42px;
  }
  .intelligence-surface {
    padding-inline: 32px;
  }
  .brain-field {
    margin-inline: -32px;
  }
  .filter-row, .goal-switcher {
    margin-inline: -42px;
    padding-inline: 42px;
  }
  .balance-value {
    font-size: 64px;
  }
  .balance-value--long {
    font-size: 54px;
  }
  .black-card {
    max-width: 520px;
    padding: 24px 28px;
  }
  .black-card-value {
    font-size: 56px;
  }
  .category-grid {
    gap: 12px;
  }
  .brain-field {
    height: 240px;
  }
}
@media (min-width: 1100px) {
  :root {
    --nav-space: 0px;
  }
  body {
    background: var(--c-ink);
  }
  .app-shell {
    margin-left: 94px;
    min-height: 100vh;
  }
  .desktop-nav {
    position: fixed;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 94px;
    padding: 30px 0 24px;
    color: rgba(236, 231, 220,.6);
    background: var(--c-ink);
  }
  .camera-thread {
    display: block;
    right: 22px;
  }
  .desktop-nav-items {
    display: flex;
    justify-content: center;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .desktop-nav-items .button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    min-height: 66px;
    transition: color .3s;
  }
  .desktop-nav-items .button::before {
    content: "";
    position: absolute;
    left: 0;
    width: 2px;
    height: 0;
    background: var(--c-paper);
    transition: height .4s var(--ease);
  }
  .desktop-nav-items .button span {
    font-size: var(--text-micro);
  }
  .desktop-nav-items .nav-active {
    color: var(--c-paper);
  }
  .desktop-nav-items .nav-active::before {
    height: 28px;
  }
  .nav-signature {
    font-family: var(--display);
    font-size: var(--text-micro);
    line-height: 1.2;
    text-align: center;
  }
  .mobile-nav {
    display: none;
  }
  .view {
    width: min(100%, 1120px);
    padding: 55px 70px 90px;
  }
  .home-view {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(310px, .75fr);
    column-gap: 70px;
    align-content: start;
  }
  .home-view .mobile-header {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 64px;
  }
  .home-view .eyebrow-row {
    grid-column: 1;
    grid-row: 2;
  }
  .home-view .status-banner {
    grid-column: 1;
    grid-row: 3;
  }
  .home-view .balance-hero {
    grid-column: 1;
    grid-row: 4;
  }
  .home-view .category-ecosystem {
    grid-column: 1;
    grid-row: 5;
  }
  .home-view .brain-teaser {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    margin: 0 0 6px;
  }
  .home-view .section-block {
    grid-column: 1;
    grid-row: 6;
    margin-top: 65px;
  }
  .home-view .goal-teaser {
    grid-column: 2;
    grid-row: 5 / span 2;
    align-self: start;
    margin-top: 56px;
  }
  .add-button {
    right: 35px;
    bottom: 35px;
  }
  .inner-view, .brain-view, .goals-view {
    width: min(100%, 1000px);
  }
  .page-title {
    padding-top: 20px;
  }
  .page-title h1 {
    font-size: 112px;
  }
  .intelligence-surface {
    margin-inline: 0;
    padding: 40px 45px;
  }
  .brain-field {
    margin-inline: -45px;
    height: 260px;
  }
  .answer-main > strong {
    font-size: 52px;
  }
  .goal-horizon {
    height: 300px;
    margin-inline: 0;
  }
  .goal-title h2 {
    font-size: 64px;
  }
  .goal-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .filter-row, .goal-switcher {
    margin-inline: 0;
    padding-inline: 0;
    flex-wrap: wrap;
  }
  .settings-view {
    width: min(100%, 760px);
  }
  .sheet {
    border-radius: 28px;
    margin-bottom: 24px;
  }
}
@media (min-width: 1600px) {
  .view {
    width: min(100%, 1320px);
  }
  .home-view {
    grid-template-columns: 1.65fr .75fr;
    column-gap: 100px;
    padding-top: 70px;
  }
  .balance-value {
    font-size: 76px;
  }
  .balance-value--long {
    font-size: 64px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: .01ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
:root[data-motion="reduce"] .goal-city {
  transform: none !important;
}
:root[data-motion="reduce"] .journey-particles, :root[data-motion="reduce"] .analysis-sweep, :root[data-motion="reduce"] .money-transfer {
  display: none;
}
:root[data-motion="reduce"] .money-stack i.money-stack--active {
  transform: none;
}
@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes focusEmerge {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes draw {
  from {
    stroke-dashoffset: 1400;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes barIn {
  from {
    scale: 1 0;
  }
  to {
    scale: 1 1;
  }
}
@keyframes breathe {
  50% {
    box-shadow: 0 0 0 8px rgba(179, 146, 86,0);
  }
}
@keyframes signal {
  50% {
    transform: scaleY(.45);
    opacity: .5;
  }
}
@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@keyframes transactionIn {
  from {
    opacity: 0;
    transform: translateX(40px) scale(.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sheetIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@keyframes sheetOut {
  from {
    transform: none;
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes trajectoryIn {
  0%, 8% {
    opacity: 0;
    transform: scale(1.15);
    filter: blur(10px);
  }
  30%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}
@keyframes introDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pointTravel {
  0% {
    left: 1%;
    top: 80%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  42% {
    left: 34%;
    top: 70%;
  }
  72% {
    left: 61%;
    top: 52%;
  }
  100% {
    left: 95%;
    top: 25%;
    opacity: 1;
  }
}
@keyframes introOut {
  to {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
  }
}
@keyframes grain {
  0% {
    transform: translate(0,0);
  }
  25% {
    transform: translate(2%,-3%);
  }
  50% {
    transform: translate(-3%,2%);
  }
  75% {
    transform: translate(3%,4%);
  }
}
@keyframes moneyMorph {
  0% {
    opacity: .6;
    transform: translateY(-7px) rotateX(24deg) scaleY(.9);
  }
  45% {
    transform: translateY(2px) rotateX(-6deg) scaleY(1.04);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes categoryReceive {
  0%, 100% {
    transform: none;
  }
  38% {
    transform: scale(1.05);
    box-shadow: 0 12px 30px -12px var(--cat);
  }
}
@keyframes noteSheen {
  from {
    background-position: 130% 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: -30% 0, 0 0, 0 0, 0 0;
  }
}
@keyframes analysisSweep {
  0% {
    left: -30%;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    left: 112%;
    opacity: 0;
  }
}
@keyframes insightResolve {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes horizonCamera {
  0%, 100% {
    transform: perspective(700px) translateZ(0);
  }
  45% {
    transform: perspective(700px) translateZ(45px);
  }
}
@keyframes goalParticle {
  0% {
    opacity: 0;
    transform: translate(0,0) scale(.5);
  }
  35% {
    opacity: .8;
  }
  100% {
    opacity: 0;
    transform: translate(72px, -50px) scale(1.5);
  }
}
@keyframes tickCrossed {
  0% {
    box-shadow: 0 0 0 0 rgba(236, 231, 220,.6);
    transform: scaleY(1);
  }
  40% {
    box-shadow: 0 0 18px 4px rgba(236, 231, 220,.5);
    transform: scaleY(2.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(236, 231, 220,0);
    transform: scaleY(1);
  }
}
@keyframes contributionEnter {
  0% {
    opacity: 0;
    transform: translate(-50%, 110px) scale(.9);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, 40px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(.2);
  }
}
@keyframes transferAtmosphere {
  0%, 100% {
    opacity: 0;
  }
  20%, 72% {
    opacity: 1;
  }
}
@keyframes transferPath {
  from {
    opacity: 0;
    stroke-dashoffset: 160;
  }
  24% {
    opacity: .7;
  }
  to {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes transferRing {
  from {
    opacity: .8;
    transform: scale(.1);
  }
  to {
    opacity: 0;
    transform: scale(6);
  }
}
@keyframes darkLabel {
  0%, 100% {
    opacity: 0;
    filter: blur(5px);
  }
  30%, 70% {
    opacity: 1;
    filter: none;
  }
}
@keyframes brandFinale {
  0% {
    opacity: 0;
    filter: blur(16px);
    transform: translate(-50%,-42%) scale(.88);
  }
  45%, 82% {
    opacity: 1;
    filter: none;
    transform: translate(-50%,-50%) scale(1);
  }
  100% {
    opacity: 0;
    filter: blur(5px);
    transform: translate(-50%,-54%) scale(1.015);
  }
}
@keyframes gridMaterialize {
  0% {
    opacity: 0;
    transform: perspective(650px) rotateX(70deg) scale(1.8);
  }
  45%, 75% {
    opacity: .8;
  }
  100% {
    opacity: 0;
    transform: perspective(650px) rotateX(48deg) scale(1.18);
  }
}
@keyframes introDatum {
  0%, 100% {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(12px);
  }
  24%, 70% {
    opacity: .8;
    filter: none;
    transform: none;
  }
}
@keyframes interfaceResolve {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: perspective(900px) rotateX(12deg) scale(.9);
  }
  45%, 72% {
    opacity: .75;
    filter: none;
    transform: perspective(900px) rotateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes statementReveal {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(24px);
  }
  38%, 72% {
    opacity: 1;
    filter: none;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

/* ===== Mobile fixes (2.2.1) ===== */
/* Black card: never wider than the screen (aspect-ratio + min-height pushed it to 317px on 320px phones) */
.black-card { max-width: 100%; min-width: 0; }
@media (max-width: 359px) {
  .black-card { aspect-ratio: auto; min-height: 180px; padding: 16px 18px; }
  .black-card-brand { letter-spacing: .22em; }
  .black-card-serial { letter-spacing: .1em; }
}

/* "Ăn uống đang chiếm 65,4% tổng chi tiêu tháng này." reads as one sentence instead of three columns */
.category-caption { display: block; }
.category-caption > span { display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: 0; }

/* Category chips: one per row on narrow phones so names are not cut to "Ăn uố…" */
@media (max-width: 359px) {
  .category-legend { grid-template-columns: minmax(0, 1fr); }
}

/* History summary card: label above the total, Thu / Tiết kiệm stay on one line each */
.history-totals { flex-wrap: wrap; gap: 6px 20px; }
.history-totals div { white-space: nowrap; }
@media (max-width: 400px) {
  .history-summary > div:first-child { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* Goal journey: "Hiện tại" sits above the line so it never runs into "Bắt đầu" or the deadline */
.milestone--now { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 5px)); }

/* Dates and eyebrows stay on one line where possible */
.eyebrow-row .eyebrow { min-width: 0; }
@media (max-width: 374px) { .eyebrow-row .eyebrow { letter-spacing: .1em; } }
.eyebrow-row .demo-pill { flex: 0 0 auto; }

/* Long Vietnamese words never push a box wider than the screen */
.view { overflow-wrap: break-word; }
.view h1, .view h2, .view h3, .view p, .view strong, .view dd, .view dt, .view label { overflow-wrap: break-word; min-width: 0; }

/* Leave room for the floating + button and the bottom bar under the last item */
@media (max-width: 767px) {
  .view { padding-bottom: calc(var(--nav-space) + 84px); }
}

/* Empty month: the mobile rule `.money-stack { height: 40px }` was squeezing the dashed box,
   so its text spilled out over "Benevolent Brain" */
.money-stack.money-stack--empty { height: auto; min-height: 0; }

/* Fonts declared here as well (absolute URLs), so the app never depends on an old cached /fonts/fonts.css */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/be-vietnam-pro-Light.woff") format("woff")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/be-vietnam-pro-Regular.woff") format("woff")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/be-vietnam-pro-Medium.woff") format("woff")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/be-vietnam-pro-SemiBold.woff") format("woff")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/be-vietnam-pro-Bold.woff") format("woff")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/eb-garamond-var.woff") format("woff")}

/* Large system text on Android (page zoom) makes the screen narrower than 320px: let the app follow it */
body { min-width: 0; }
@media (max-width: 339px) {
  .view { padding-left: 14px; padding-right: 14px; }
  .mobile-nav { right: 8px; left: 8px; }
  .add-button { right: 14px; }
}

/* ===== Free edition: the black "Benevolent Pro" card belongs to the 30 founding members only ===== */
.black-card {
  --card: var(--surface);
  --card-ink: var(--ink);
  --card-soft: var(--muted);
  --gold: var(--pine);
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 32px -26px rgba(15, 15, 16, .35);
}
.black-card::before, .black-card-chip { display: none; }
.black-card-value { text-shadow: none; font-weight: 400; }
.black-card-brand { letter-spacing: .24em; }
.black-card-middle { justify-content: flex-end; }