/* Reset + typography + small utilities */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; color: var(--ink); background: var(--page);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
[hidden] { display: none !important; }
::placeholder { color: var(--faint); opacity: 1; }
::selection { background: color-mix(in oklab, var(--olive) 40%, transparent); }

.i { flex-shrink: 0; display: inline-block; vertical-align: middle; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; border-radius: 6px; }

/* Typography scale (from the mockup .t-* classes) */
.t-display { font-size: var(--fs-display); font-weight: 600; line-height: 1.08; letter-spacing: -.026em; text-wrap: balance; }
.t-title   { font-size: var(--fs-title); font-weight: 600; line-height: 1.15; letter-spacing: -.018em; text-wrap: balance; }
.t-heading { font-size: var(--fs-heading); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.t-label   { font-size: var(--fs-label); font-weight: 500; line-height: 1.35; letter-spacing: .012em; }
.t-body    { font-size: var(--fs-body); }
.t-small   { font-size: var(--fs-sm); }
.t-caption { font-size: var(--fs-xs); color: var(--muted); }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.danger-text { color: var(--danger); }
.olive-text { color: var(--olive-ink); }
.strong { font-weight: 600; }
.medium { font-weight: 500; }
.nums { font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--font-mono); font-size: .92em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; gap: var(--s-2); }
.row-3 { display: flex; align-items: center; gap: var(--s-3); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.ml-auto { margin-left: auto; }

/* Press feedback used on every clickable control in the mockup */
.press {
  transition: transform .14s var(--ease-out), background-color var(--t-base) ease, border-color var(--t-base) ease,
              color var(--t-base) ease, box-shadow var(--t-base) ease, opacity var(--t-base) ease;
}
.press:active:not(:disabled) { transform: scale(.97); transition-duration: 80ms; }

.scroll-quiet { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--ink) 18%, transparent) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Images that exist in a light and a dark variant */
.theme-dark-only { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-dark-only { display: block !important; }
  :root:not([data-theme="light"]) .theme-light-only { display: none !important; }
}
:root[data-theme="dark"] .theme-dark-only { display: block !important; }
:root[data-theme="dark"] .theme-light-only { display: none !important; }
.block { display: block; }
.on-mobile-block, .on-mobile-inline { display: none; }
@media (max-width: 767.98px) { .on-mobile-block { display: block; } .on-mobile-inline { display: inline; } }
.i { fill: currentColor; }