/* Canonical Datalayer foundations. Run npm run design:sync after editing. */
@font-face {
  font-family: Matter;
  font-weight: 400;
  src: url("./fonts/Matter-Regular.db893963.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Matter;
  font-weight: 500;
  src: url("./fonts/Matter-Medium.2d3e576a.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Matter;
  font-weight: 600;
  src: url("./fonts/Matter-Bold.b6d7c918.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: MatterMono;
  font-weight: 400;
  src: url("./fonts/MatterMono-Regular.621e2aee.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: MatterMono;
  font-weight: 500;
  src: url("./fonts/MatterMono-Medium.3cbc2f99.woff2") format("woff2");
  font-display: swap;
}
:root {
  --dl-color-brand: #00d66f;
  --dl-color-ink: #011e0f;
  --dl-color-text: #171717;
  --dl-color-muted: #525252;
  --dl-color-surface: #fff;
  --dl-color-soft: #f5f5f5;
  --dl-color-border: #e5e5e5;
  --dl-color-border-strong: #b8b8b8;
  --dl-color-brand-soft: #e6ffed;
  --dl-color-brand-hover: #034f28;
  --dl-color-focus: #008545;
  --dl-color-success: #006635;
  --dl-color-success-bg: #e6ffed;
  --dl-color-warning: #754500;
  --dl-color-warning-bg: #fff4d6;
  --dl-color-danger: #a32626;
  --dl-color-danger-bg: #fff0f0;
  --dl-font-sans: Matter, Arial, sans-serif;
  --dl-font-mono: MatterMono, ui-monospace, monospace;
  --dl-text-small: 0.875rem;
  --dl-text-body: 1rem;
  --dl-text-lead: 1.125rem;
  --dl-space-1: 0.25rem;
  --dl-space-2: 0.5rem;
  --dl-space-3: 0.75rem;
  --dl-space-4: 1rem;
  --dl-space-5: 1.25rem;
  --dl-space-6: 1.5rem;
  --dl-space-8: 2rem;
  --dl-space-10: 2.5rem;
  --dl-space-12: 3rem;
  --dl-space-16: 4rem;
  --dl-space-20: 5rem;
  --dl-radius-control: 0.5rem;
  --dl-radius-card: 0.75rem;
  --dl-radius-feature: 1.125rem;
  --dl-radius-pill: 999px;
  --dl-shadow-raised: 0 3px 6px #011e0f03, 0 24px 48px -18px #011e0f24;
  --dl-duration: 160ms;
  --dl-touch-target: 2.75rem;
}
.dl-theme {
  margin: 0;
  background: var(--dl-color-surface);
  color: var(--dl-color-text);
  font: 400 1rem/1.6 var(--dl-font-sans);
  -webkit-font-smoothing: antialiased;
}
.dl-theme *,
.dl-theme *::before,
.dl-theme *::after {
  box-sizing: border-box;
}
.dl-theme [hidden] {
  display: none !important;
}
.dl-theme ::selection {
  background: var(--dl-color-brand-soft);
  color: var(--dl-color-ink);
}
.dl-theme :where(h1, h2, h3, p) {
  margin-top: 0;
}
.dl-theme h1 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.dl-theme h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 500;
}
.dl-theme h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 500;
}
.dl-theme :where(a) {
  color: var(--dl-color-ink);
  text-underline-offset: 0.2em;
}
.dl-theme :where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--dl-color-focus);
  outline-offset: 3px;
}
.dl-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;
  color: var(--dl-color-ink);
  text-decoration: none;
  font: 600 1.75rem/1 var(--dl-font-sans);
  letter-spacing: -0.045em;
}
/* Consistent roles; proportions remain inherited from the base wordmark. */
.dl-brand--compact {
  font-size: 1.25rem;
}
.dl-brand--navigation {
  font-size: 1.75rem;
}
@media (max-width: 760px) {
  .dl-brand--navigation {
    font-size: 1.625rem;
  }
}
.dl-brand-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.46em;
  height: 0.46em;
  border-radius: 50%;
  background: var(--dl-color-brand);
  transform: translateY(-0.025em);
}
.dl-theme :where(button, .dl-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: var(--dl-touch-target);
  padding: 0.65rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--dl-radius-control);
  background: var(--dl-color-ink);
  color: white;
  font: 500 0.9375rem/1.35 var(--dl-font-sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dl-duration),
    border-color var(--dl-duration);
  touch-action: manipulation;
}
.dl-theme :where(button, .dl-button):hover {
  background: var(--dl-color-brand-hover);
}
.dl-theme .dl-button--secondary {
  background: var(--dl-color-surface);
  border-color: var(--dl-color-border-strong);
  color: var(--dl-color-ink);
}
.dl-theme .dl-button--secondary:hover {
  background: var(--dl-color-soft);
}
.dl-theme .dl-button--danger {
  background: var(--dl-color-danger-bg);
  border-color: #e7b8b8;
  color: var(--dl-color-danger);
}
.dl-theme .dl-button--danger:hover {
  background: #ffe0e0;
}
.dl-theme :where(button, .dl-button):disabled {
  background: var(--dl-color-soft);
  border-color: var(--dl-color-border);
  color: var(--dl-color-muted);
  cursor: not-allowed;
}
.dl-theme :where(input, textarea, select) {
  display: block;
  width: 100%;
  min-height: var(--dl-touch-target);
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--dl-color-border-strong);
  border-radius: var(--dl-radius-control);
  background: var(--dl-color-surface);
  color: var(--dl-color-text);
  font: 400 1rem/1.5 var(--dl-font-sans);
}
.dl-theme textarea {
  resize: vertical;
}
.dl-theme :where(input, textarea):disabled {
  background: var(--dl-color-soft);
  cursor: not-allowed;
}
.dl-theme :where(input, textarea)[aria-invalid="true"] {
  border-color: var(--dl-color-danger);
}
.dl-theme label {
  display: block;
  font-size: var(--dl-text-small);
  font-weight: 500;
  margin-bottom: 0.375rem;
}
.dl-theme :where(code, pre) {
  font-family: var(--dl-font-mono);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.dl-theme pre {
  white-space: pre-wrap;
  padding: 1rem;
  border: 1px solid var(--dl-color-border);
  border-radius: var(--dl-radius-control);
  background: var(--dl-color-soft);
}
.dl-card {
  padding: var(--dl-space-8);
  border: 1px solid var(--dl-color-border);
  border-radius: var(--dl-radius-card);
  background: var(--dl-color-surface);
  min-width: 0;
}
.dl-card--soft {
  background: var(--dl-color-soft);
  border-color: transparent;
}
.dl-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--dl-color-border);
  border-radius: var(--dl-radius-pill);
  font-size: var(--dl-text-small);
  line-height: 1.4;
  color: var(--dl-color-muted);
  background: var(--dl-color-surface);
}
.dl-notice {
  padding: 0.875rem 1rem;
  border: 1px solid var(--dl-color-border);
  border-radius: var(--dl-radius-control);
  background: var(--dl-color-soft);
  color: var(--dl-color-muted);
  font-size: var(--dl-text-small);
}
.dl-notice--success {
  color: var(--dl-color-success);
  background: var(--dl-color-success-bg);
}
.dl-notice--warning {
  color: var(--dl-color-warning);
  background: var(--dl-color-warning-bg);
}
.dl-notice--error {
  color: var(--dl-color-danger);
  background: var(--dl-color-danger-bg);
}
.dl-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.dl-icon-tile {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--dl-color-border);
  border-radius: 0.6875rem;
  background: var(--dl-color-soft);
  color: var(--dl-color-brand-hover);
}
.dl-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: white;
  transform: translateY(-200%);
}
.dl-skip-link:focus {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .dl-theme * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}