@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/SourceSerif4Variable-Roman.woff2") format("woff2");
}
@layer base {
  :root {
    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
    --font-display: "Source Serif 4", Georgia, serif;
    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
    --leading-body: 1.5;
    --leading-heading: 1.25;
    --leading-display: 1.1;
    --text-xs: 14px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 28px;
    --type-page: 28px;
    --type-section: 20px;
    --type-body: 16px;
    --type-meta: 14px;
    --type-value: 32px;
    --type-display: clamp(44px, 5.2vw, 64px);
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-enter: 140ms;
    --page: var(--color-kumo-canvas);
    --surface: var(--color-kumo-base);
    --surface-raised: var(--color-kumo-elevated);
    --surface-recessed: var(--color-kumo-recessed);
    --surface-hover: var(--color-kumo-tint);
    --text: var(--text-color-kumo-default);
    --muted: var(--text-color-kumo-subtle);
    --line: var(--color-kumo-line);
    --hairline: var(--color-kumo-hairline);
    --accent: var(--text-color-kumo-link);
    --success-text: var(--text-color-kumo-success);
    --finance-income: var(--text-color-kumo-success);
    --finance-expense: var(--text-color-kumo-danger);
    font-family: var(--font-sans);
    font-size: 16px;
    font-optical-sizing: auto;
    line-height: var(--leading-body);
    color: var(--text);
    color-scheme: dark;
    background: var(--page);
  }
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    font-size: var(--type-body);
    font-synthesis: none;
  }
  a {
    text-underline-offset: 3px;
    transition: none;
  }
  h1,
  h2,
  h3 {
    font-weight: 600;
    line-height: var(--leading-heading);
    text-wrap: balance;
  }
  h1 {
    font-size: var(--type-page);
  }
  h2 {
    font-size: var(--type-section);
  }
  h3 {
    font-size: var(--type-body);
  }
  p {
    max-width: 65ch;
  }
  strong,
  b {
    font-weight: 500;
  }
  small {
    font-size: var(--type-meta);
  }
  code,
  pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
    line-height: 1.6;
  }
  code {
    overflow-wrap: anywhere;
  }
  pre {
    overflow-x: auto;
  }
  :is(a, button, input, textarea, select, summary):not(
    [data-kumo-component]
  ):focus-visible {
    outline: 2px solid var(--color-kumo-focus);
    outline-offset: 3px;
  }
  ::selection {
    background: var(--color-kumo-info-tint);
  }
  .muted,
  small {
    color: var(--muted);
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0, 0, 0, 0);
  }
}
/* Semantic theme values, shared by the Kumo components and product text. */
:root[data-mode] {
  --text-color-kumo-placeholder: var(--text-color-kumo-subtle);
  --shadow-xs: 0 1px 2px var(--color-kumo-shadow-drop);
  --shadow-sm:
    0 2px 4px -1px var(--color-kumo-shadow-drop),
    0 1px 2px -1px var(--color-kumo-shadow-drop);
  --shadow-md:
    0 8px 20px -4px var(--color-kumo-shadow-drop),
    0 2px 6px -2px var(--color-kumo-shadow-drop);
  --shadow-lg:
    0 16px 32px -8px var(--color-kumo-shadow-drop),
    0 4px 12px -4px var(--color-kumo-shadow-drop);
  --shadow-dialog:
    0 24px 64px -12px var(--color-kumo-shadow-drop),
    0 4px 16px -4px var(--color-kumo-shadow-drop);
}
:root[data-mode="dark"] {
  --color-kumo-canvas: oklch(14% 0 0);
  --color-kumo-elevated: oklch(17% 0 0);
  --color-kumo-recessed: oklch(12% 0 0);
  --color-kumo-base: oklch(21% 0 0);
  --color-kumo-control: oklch(23% 0 0);
  --color-kumo-tint: oklch(28% 0 0);
  --color-kumo-line: oklch(36% 0 0);
  --color-kumo-hairline: oklch(30% 0 0);
  --color-kumo-shadow-drop: oklch(0% 0 0 / 0.35);
  --text-color-kumo-default: #f4f4f5;
  --text-color-kumo-strong: #ffffff;
  --text-color-kumo-subtle: #b3b3b8;
  --text-color-kumo-inactive: #a0a0a6;
  --text-color-kumo-link: #e4e4e7;
  color-scheme: dark;
}
:root[data-mode="light"] {
  --color-kumo-canvas: oklch(96% 0 0);
  --color-kumo-elevated: oklch(98% 0 0);
  --color-kumo-recessed: oklch(92% 0 0);
  --color-kumo-base: #ffffff;
  --color-kumo-control: #ffffff;
  --color-kumo-tint: oklch(94% 0 0);
  --color-kumo-line: oklch(82% 0 0);
  --color-kumo-hairline: oklch(90% 0 0);
  --color-kumo-shadow-drop: oklch(0% 0 0 / 0.08);
  --text-color-kumo-subtle: #64646c;
  --text-color-kumo-inactive: #6b6b73;
  --text-color-kumo-warning: oklch(48% 0.12 57.5);
  color-scheme: light;
}
/* The standalone Kumo bundle inlines shadow lengths. Bind its utilities to the
   theme once; retain the native ring composition and focus indicators. */
@layer utilities {
  .shadow-xs {
    --tw-shadow: var(--shadow-xs);
  }
  .shadow-sm {
    --tw-shadow: var(--shadow-sm);
  }
  .shadow-md {
    --tw-shadow: var(--shadow-md);
  }
  .shadow-lg {
    --tw-shadow: var(--shadow-lg);
  }
}
.theme-target-light,
.theme-target-dark {
  display: none;
  align-items: center;
  justify-content: center;
}
:root[data-mode="dark"] .theme-target-light,
:root[data-mode="light"] .theme-target-dark {
  display: inline-flex;
}
[data-money-tone="income"] {
  color: var(--finance-income);
}
[data-money-tone="expense"] {
  color: var(--finance-expense);
}
.feedback {
  margin-block: 16px;
}
.feedback p {
  margin-block: 0;
}

@keyframes content-arrive {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Opt-in review overlay. The public review overlay uses only a fragment and CSS. */
body {
  --qa-columns: 12;
  --qa-gutter: 24px;
  --qa-pad: 24px;
  --qa-max: 1072px;
}
body:has(.shell) {
  --qa-pad: 32px;
  --qa-max: 1056px;
}
body:has(#layout-grid:target)::after {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: min(calc(100% - var(--qa-pad) * 2), var(--qa-max));
  margin-inline: auto;
  pointer-events: none;
  outline: 1px solid #40e09780;
  content: "";
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 7px, #40e09730 7px 8px),
    repeating-linear-gradient(
      to right,
      #40e09710 0
        calc(
          (100% - (var(--qa-columns) - 1) * var(--qa-gutter)) /
          var(--qa-columns)
        ),
      transparent
        calc(
          (100% - (var(--qa-columns) - 1) * var(--qa-gutter)) /
          var(--qa-columns)
        )
        calc(
          (100% - (var(--qa-columns) - 1) * var(--qa-gutter)) /
          var(--qa-columns) +
          var(--qa-gutter)
        )
    );
}
@media (max-width: 760px) {
  body {
    --qa-columns: 4;
    --qa-gutter: 16px;
    --qa-pad: 16px;
  }
  body:has(.shell) {
    --qa-pad: 20px;
  }
}

.money-value {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
}
.money-value > span,
.money-value-whole {
  white-space: nowrap;
}