/* stx role tokens — override any of these to re-theme by meaning. */
:root {
  --stx-fg: oklch(20.5% 0 0);
  --stx-fg-strong: oklch(37.1% 0 0);
  --stx-fg-muted: oklch(43.9% 0 0);
  --stx-fg-soft: oklch(55.6% 0 0);
  --stx-fg-subtle: oklch(70.8% 0 0);
  --stx-surface: oklch(98.5% 0 0);
  --stx-surface-raised: oklch(97% 0 0);
  --stx-surface-sunken: oklch(92.2% 0 0);
  --stx-panel: #fff;
  --stx-field: #fff;
  --stx-page: oklch(98.5% 0 0);
  --stx-content: #fff;
  --stx-surface-hover: oklch(97% 0 0);
  --stx-surface-raised-hover: oklch(92.2% 0 0);
  --stx-surface-sunken-hover: oklch(87% 0 0);
  --stx-field-hover: oklch(98.5% 0 0);
  --stx-link: oklch(62.3% 0.214 259.815);
  --stx-link-hover: oklch(54.6% 0.245 262.881);
  --stx-inverse: oklch(20.5% 0 0);
  --stx-inverse-ink: #fff;
  --stx-line: oklch(92.2% 0 0);
  --stx-line-strong: oklch(87% 0 0);
  --stx-line-hover: oklch(70.8% 0 0);
  --stx-accent: oklch(54.6% 0.245 262.881);
  --stx-info: oklch(60.9% 0.126 221.723);
  --stx-danger: oklch(57.7% 0.245 27.325);
  --stx-success: oklch(62.7% 0.194 149.214);
  --stx-warning: oklch(68.1% 0.162 75.834);
  --stx-accent-solid: oklch(62.3% 0.214 259.815);
  --stx-info-solid: oklch(71.5% 0.143 215.221);
  --stx-danger-solid: oklch(63.7% 0.237 25.331);
  --stx-success-solid: oklch(72.3% 0.219 149.579);
  --stx-warning-solid: oklch(79.5% 0.184 86.047);
  --stx-accent-solid-hover: oklch(54.6% 0.245 262.881);
  --stx-info-solid-hover: oklch(60.9% 0.126 221.723);
  --stx-danger-solid-hover: oklch(57.7% 0.245 27.325);
  --stx-success-solid-hover: oklch(62.7% 0.194 149.214);
  --stx-warning-solid-hover: oklch(68.1% 0.162 75.834);
  --stx-accent-ink: #fff;
  --stx-info-ink: oklch(20.5% 0 0);
  --stx-danger-ink: #fff;
  --stx-success-ink: oklch(20.5% 0 0);
  --stx-warning-ink: oklch(20.5% 0 0);
  --stx-accent-soft: oklch(93.2% 0.032 255.585);
  --stx-accent-soft-ink: oklch(42.4% 0.199 265.638);
  --stx-info-soft: oklch(95.6% 0.045 203.388);
  --stx-info-soft-ink: oklch(45% 0.085 224.283);
  --stx-danger-soft: oklch(93.6% 0.032 17.717);
  --stx-danger-soft-ink: oklch(44.4% 0.177 26.899);
  --stx-success-soft: oklch(96.2% 0.044 156.743);
  --stx-success-soft-ink: oklch(44.8% 0.119 151.328);
  --stx-warning-soft: oklch(97.3% 0.071 103.193);
  --stx-warning-soft-ink: oklch(47.6% 0.114 61.907);
  --stx-secondary: oklch(55.8% 0.288 302.321);
  --stx-secondary-solid: oklch(62.7% 0.265 303.9);
  --stx-secondary-solid-hover: oklch(55.8% 0.288 302.321);
  --stx-secondary-ink: #fff;
  --stx-secondary-soft: oklch(94.6% 0.033 307.174);
  --stx-secondary-soft-ink: oklch(43.8% 0.218 303.724);
  --stx-danger-fg: oklch(39.6% 0.141 25.723);
  --stx-danger-fg-subtle: oklch(80.8% 0.114 19.571);
  --stx-danger-line: oklch(80.8% 0.114 19.571);
  --stx-danger-focus: oklch(63.7% 0.237 25.331);
}
.dark {
  --stx-fg: oklch(97% 0 0);
  --stx-fg-strong: oklch(87% 0 0);
  --stx-fg-muted: oklch(70.8% 0 0);
  --stx-fg-soft: oklch(70.8% 0 0);
  --stx-fg-subtle: oklch(55.6% 0 0);
  --stx-surface: oklch(26.9% 0 0);
  --stx-surface-raised: oklch(37.1% 0 0);
  --stx-surface-sunken: oklch(37.1% 0 0);
  --stx-panel: oklch(26.9% 0 0);
  --stx-field: oklch(37.1% 0 0);
  --stx-page: oklch(20.5% 0 0);
  --stx-content: oklch(20.5% 0 0);
  --stx-surface-hover: oklch(37.1% 0 0);
  --stx-surface-raised-hover: oklch(43.9% 0 0);
  --stx-surface-sunken-hover: oklch(43.9% 0 0);
  --stx-field-hover: oklch(43.9% 0 0);
  --stx-link: oklch(70.7% 0.165 254.624);
  --stx-link-hover: oklch(80.9% 0.105 251.813);
  --stx-inverse: oklch(37.1% 0 0);
  --stx-inverse-ink: #fff;
  --stx-line: oklch(37.1% 0 0);
  --stx-line-strong: oklch(43.9% 0 0);
  --stx-line-hover: oklch(55.6% 0 0);
  --stx-accent: oklch(70.7% 0.165 254.624);
  --stx-info: oklch(78.9% 0.154 211.53);
  --stx-danger: oklch(70.4% 0.191 22.216);
  --stx-success: oklch(79.2% 0.209 151.711);
  --stx-warning: oklch(85.2% 0.199 91.936);
  --stx-accent-solid: oklch(54.6% 0.245 262.881);
  --stx-info-solid: oklch(60.9% 0.126 221.723);
  --stx-danger-solid: oklch(57.7% 0.245 27.325);
  --stx-success-solid: oklch(62.7% 0.194 149.214);
  --stx-warning-solid: oklch(68.1% 0.162 75.834);
  --stx-accent-solid-hover: oklch(48.8% 0.243 264.376);
  --stx-info-solid-hover: oklch(52% 0.105 223.128);
  --stx-danger-solid-hover: oklch(50.5% 0.213 27.518);
  --stx-success-solid-hover: oklch(52.7% 0.154 150.069);
  --stx-warning-solid-hover: oklch(55.4% 0.135 66.442);
  --stx-accent-ink: #fff;
  --stx-info-ink: oklch(20.5% 0 0);
  --stx-danger-ink: #fff;
  --stx-success-ink: oklch(20.5% 0 0);
  --stx-warning-ink: oklch(20.5% 0 0);
  --stx-accent-soft: oklch(37.9% 0.146 265.522);
  --stx-accent-soft-ink: oklch(88.2% 0.059 254.128);
  --stx-info-soft: oklch(39.8% 0.07 227.392);
  --stx-info-soft-ink: oklch(91.7% 0.08 205.041);
  --stx-danger-soft: oklch(39.6% 0.141 25.723);
  --stx-danger-soft-ink: oklch(88.5% 0.062 18.334);
  --stx-success-soft: oklch(39.3% 0.095 152.535);
  --stx-success-soft-ink: oklch(92.5% 0.084 155.995);
  --stx-warning-soft: oklch(42.1% 0.095 57.708);
  --stx-warning-soft-ink: oklch(94.5% 0.129 101.54);
  --stx-secondary: oklch(71.4% 0.203 305.504);
  --stx-secondary-solid: oklch(55.8% 0.288 302.321);
  --stx-secondary-solid-hover: oklch(49.6% 0.265 301.924);
  --stx-secondary-ink: #fff;
  --stx-secondary-soft: oklch(38.1% 0.176 304.987);
  --stx-secondary-soft-ink: oklch(90.2% 0.063 306.703);
  --stx-danger-fg: oklch(80.8% 0.114 19.571);
  --stx-danger-fg-subtle: oklch(63.7% 0.237 25.331);
  --stx-danger-line: oklch(57.7% 0.245 27.325);
  --stx-danger-focus: oklch(70.4% 0.191 22.216);
}
/* stx shape tokens — a radius by what the thing is. */
:root {
  --stx-radius-control: 0.375rem;
  --stx-radius-panel: 0.5rem;
  --stx-radius-pill: 9999px;
}
/* stx density tokens — how much room a control or a table cell takes. */
:root {
  --stx-control-px: 1rem;
  --stx-control-py: 0.5rem;
  --stx-control-text: 1rem;
  --stx-control-leading: 1.5rem;
  --stx-cell-px: 1.5rem;
  --stx-cell-py: 1rem;
  --stx-cell-text: 0.875rem;
  --stx-cell-leading: 1.25rem;
  --stx-cell-head-py: 0.75rem;
  --stx-cell-head-text: 0.75rem;
  --stx-cell-head-leading: 1rem;
}
.wordmark {
  font-family: Space Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.field {
  background-color: var(--bg);
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  border-radius: 10px;
  color: var(--text);
}

.field:focus {
  outline-style: none;
  border-color: var(--accent);
  --tc-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
  --tc-shadow-colored: 0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow: var(--tc-inset-shadow, 0 0 #0000), var(--tc-inset-ring-shadow, 0 0 #0000), var(--tc-ring-offset-shadow, 0 0 #0000), var(--tc-ring-shadow, 0 0 #0000), var(--tc-shadow, 0 0 #0000);
}

.btn-solid {
  background-color: var(--accent);
  color: var(--accent-ink);
  border-radius: 10px !important;
  --tc-shadow: 0 0 #0000 !important;
  box-shadow: var(--tc-inset-shadow, 0 0 #0000), var(--tc-inset-ring-shadow, 0 0 #0000), var(--tc-ring-offset-shadow, 0 0 #0000), var(--tc-ring-shadow, 0 0 #0000), var(--tc-shadow, 0 0 #0000) !important;
  font-weight: 600;
  transition: transform 0.12s ease,opacity 0.15s ease,background-color 0.15s ease;
}

.btn-solid:hover {
  --tc-shadow: 0 0 #0000 !important;
  box-shadow: var(--tc-inset-shadow, 0 0 #0000), var(--tc-inset-ring-shadow, 0 0 #0000), var(--tc-ring-offset-shadow, 0 0 #0000), var(--tc-ring-shadow, 0 0 #0000), var(--tc-shadow, 0 0 #0000) !important;
  background-color: color-mix(in srgb,var(--accent) 88%,#000);
}

.btn-solid:active {
  transform: translateY(1px);
}

.btn-solid:disabled {
  opacity: 0.6 !important;
  cursor: default;
}

.btn-accent {
  background-color: var(--accent);
  color: var(--accent-ink);
  border-radius: 10px !important;
  --tc-shadow: 0 0 #0000 !important;
  box-shadow: var(--tc-inset-shadow, 0 0 #0000), var(--tc-inset-ring-shadow, 0 0 #0000), var(--tc-ring-offset-shadow, 0 0 #0000), var(--tc-ring-shadow, 0 0 #0000), var(--tc-shadow, 0 0 #0000) !important;
  font-weight: 600;
  transition: transform 0.12s ease,opacity 0.15s ease,background-color 0.15s ease;
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.btn-accent:hover {
  --tc-shadow: 0 0 #0000 !important;
  box-shadow: var(--tc-inset-shadow, 0 0 #0000), var(--tc-inset-ring-shadow, 0 0 #0000), var(--tc-ring-offset-shadow, 0 0 #0000), var(--tc-ring-shadow, 0 0 #0000), var(--tc-shadow, 0 0 #0000) !important;
  background-color: color-mix(in srgb,var(--accent) 88%,#000);
}

.btn-accent:active {
  transform: translateY(1px);
}

.btn-accent:disabled {
  opacity: 0.6 !important;
  cursor: default;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem !important;
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  border-radius: 9px !important;
  font-size: 0.8rem !important;
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  background-color: var(--panel);
  color: var(--text-2) !important;
  cursor: pointer;
  transition: color 0.12s ease,border-color 0.12s ease,background-color 0.12s ease,transform 0.12s ease;
}

.btn-outline:hover {
  color: var(--text) !important;
  border-color: color-mix(in srgb,var(--accent) 40%,var(--border));
  background-color: color-mix(in srgb,var(--accent) 6%,transparent);
}

.btn-outline:active {
  transform: translateY(1px);
}

.btn-autofix {
  color: #fff !important;
  background-color: color-mix(in srgb,var(--accent) 78%,#0b0f19) !important;
  border-color: transparent !important;
  white-space: nowrap;
}

.btn-autofix:hover {
  color: #fff !important;
  background-color: color-mix(in srgb,var(--accent) 88%,#0b0f19) !important;
  border-color: transparent !important;
}

.icon-btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  border-radius: 10px;
  color: var(--text-3);
  background-color: var(--panel);
  cursor: pointer;
  transition: color 0.15s ease,border-color 0.15s ease;
}

.icon-btn-lg:hover {
  color: var(--text);
  border-color: color-mix(in srgb,var(--accent) 45%,var(--border));
}

.icon-btn-lg svg {
  width: 18px;
  height: 18px;
}

.badge {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.badge-pro {
  border-color: var(--accent);
  color: var(--accent);
}

.avatar {
  border-radius: 999px;
  object-fit: cover;
  background-color: color-mix(in srgb,var(--accent) 14%,var(--panel));
}

.row-rule {
  border-top-width: 1px;
  border-style: solid;
  border-color: var(--border);
}

.skeleton {
  background-color: color-mix(in srgb,var(--text-3) 20%,transparent);
  border-radius: 6px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.notice-box {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.5rem;
}

.sec {
  scroll-margin-top: 84px;
}

.sec-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.field-quiet:focus {
  border-color: color-mix(in srgb,var(--accent) 55%,var(--border)) !important;
  box-shadow: none !important;
}

.danger-panel {
  border-color: color-mix(in srgb,var(--warn) 40%,var(--border)) !important;
}

.code-block {
  background-color: var(--bg);
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  border-radius: 10px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  padding-left: 1rem;
  padding-right: 4rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  overflow-x: auto;
}

.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font: 500 11px/1 var(--sans);
  padding-left: 9px;
  padding-right: 9px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  background-color: var(--panel);
  color: var(--text-3);
  cursor: pointer;
  transition: color .15s ease,border-color .15s ease;
}

.copy-btn:hover {
  color: var(--text);
  border-color: color-mix(in srgb,var(--accent) 45%,var(--border));
}

.dz-div {
  height: 1px;
  background-color: color-mix(in srgb,var(--warn) 20%,var(--border));
}

.dz-card {
  width: 100%;
  max-width: 440px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
  animation: dz-pop 0.14s cubic-bezier(0.2,0.8,0.3,1);
}

.note-ok {
  color: var(--ok);
}

.note-err {
  color: var(--accent);
}

.note-failed {
  color: var(--warn);
}

.btn-danger {
  border-width: 1px;
  border-style: solid;
  border-color: color-mix(in srgb,var(--warn) 45%,var(--border));
  color: var(--warn) !important;
  border-radius: 10px !important;
  background-color: var(--panel);
  transition: all 0.15s ease;
}

.btn-danger:hover {
  color: #fff !important;
  background-color: var(--warn);
  border-color: var(--warn);
}

.btn-danger:disabled {
  opacity: 0.55 !important;
  cursor: default;
}

.btn-danger:disabled:hover {
  color: var(--warn) !important;
  background-color: var(--panel);
  border-color: color-mix(in srgb,var(--warn) 45%,var(--border));
}

.btn-sm {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 500 !important;
}

.btn-xs {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  font-weight: 500 !important;
}

.btn-dz {
  flex: none;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.btn-resolve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem !important;
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  border-radius: 9px !important;
  font-size: 0.8rem !important;
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(34,197,94,.4);
  background-color: var(--panel);
  color: #16a34a !important;
  cursor: pointer;
  transition: color 0.12s ease,border-color 0.12s ease,background-color 0.12s ease,transform 0.12s ease;
}

.btn-resolve:hover {
  color: #16a34a !important;
  border-color: rgba(34,197,94,.75);
  background-color: rgba(34,197,94,.1);
}

.btn-resolve:active {
  transform: translateY(1px);
}

.btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem !important;
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  border-radius: 9px !important;
  font-size: 0.68rem !important;
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
  background-color: var(--panel);
  color: var(--text-2) !important;
  cursor: pointer;
  transition: color 0.12s ease,border-color 0.12s ease,background-color 0.12s ease,transform 0.12s ease;
  font-family: var(--mono);
}

.btn-copy:hover {
  color: var(--text) !important;
  border-color: color-mix(in srgb,var(--accent) 40%,var(--border));
  background-color: color-mix(in srgb,var(--accent) 6%,transparent);
}

.btn-copy:active {
  transform: translateY(1px);
}

.backlink {
  color: var(--text-2);
  transition: color .12s ease;
}

.backlink:hover {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
.skeleton {
  animation: none;
}
}
@layer tc-base {
/*
! Tailwind CSS Preflight | MIT License | https://tailwindcss.com
*/

/*
  The fallback is a neutral grey, not currentColor.

  currentColor makes every border whose colour was never set take the TEXT
  colour, which is near-black on a light page and near-white on a dark one.
  That is never what an author means by a divider: the divide-* and
  border-width utilities set a width and no colour, so a plain divide-y
  rendered as a heavy black rule instead of a hairline.

  It also punished the obvious workaround. Setting border-color on a parent
  does not reach divide-* children, because divide targets
  "> :not([hidden]) ~ :not([hidden])" and the child declaration from this
  block wins.

  Tailwind preflight resolves this the same way (its default is gray-200).
  --border-color stays the escape hatch: set it once on :root, or per
  theme, and every uncoloured border follows.
*/
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border-color, #e5e7eb);
}

::before,
::after {
  --tc-content: '';
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: Space Grotesk, ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings: normal;
  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: var(--border-color, inherit);
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentColor 50%, transparent);
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none;
}
}

@layer tc-base {
:root { --bg: #fbfbfd; --panel: #ffffff; --border: rgba(15,23,42,0.09); --text: #0b0f19; --text-2: #4b5565; --text-3: #667085; --accent: #e11d48; --accent-ink: #ffffff; --rail: rgba(225,29,72,0.14); --ok: #16a34a; --warn: #b91c1c; --discord: #5865f2; --panel-2: #fbfcfd; --border-2: rgba(15,23,42,0.06); --code: #0f172a; --code-bg: #f8fafc; --app-tint: rgba(225,29,72,0.07); --app-bar: #e11d48; --slack: #611f69; --sans-system: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (prefers-color-scheme: dark) { :root { --bg: #090b11; --panel: #10131c; --border: rgba(148,163,184,0.12); --text: #f3f5f9; --text-2: #b3bccb; --text-3: #7b879a; --accent: #fb7185; --accent-ink: #090b11; --rail: rgba(251,113,133,0.16); --ok: #4ade80; --warn: #f87171; --discord: #818cf8; --panel-2: #0e111a; --border-2: rgba(148,163,184,0.08); --code: #e5e9f0; --code-bg: #0b0e16; --app-tint: rgba(251,113,133,0.1); --app-bar: #fb7185; } }
:root[data-theme="dark"] { --bg: #090b11; --panel: #10131c; --border: rgba(148,163,184,0.12); --text: #f3f5f9; --text-2: #b3bccb; --text-3: #7b879a; --accent: #fb7185; --accent-ink: #090b11; --rail: rgba(251,113,133,0.16); --ok: #4ade80; --warn: #f87171; --discord: #818cf8; --panel-2: #0e111a; --border-2: rgba(148,163,184,0.08); --code: #e5e9f0; --code-bg: #0b0e16; --app-tint: rgba(251,113,133,0.1); --app-bar: #fb7185; }
:root[data-theme="light"] { --bg: #fbfbfd; --panel: #ffffff; --border: rgba(15,23,42,0.09); --text: #0b0f19; --text-2: #4b5565; --text-3: #667085; --accent: #e11d48; --accent-ink: #ffffff; --rail: rgba(225,29,72,0.14); --ok: #16a34a; --warn: #b91c1c; --discord: #5865f2; --panel-2: #fbfcfd; --border-2: rgba(15,23,42,0.06); --code: #0f172a; --code-bg: #f8fafc; --app-tint: rgba(225,29,72,0.07); --app-bar: #e11d48; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body:has(.issue-root) { font-family: var(--sans-system); }
}

@layer tc-base {
.cmp-note { margin-top: 1rem; color: var(--text-3); font-size: 0.86rem; line-height: 1.55; max-width: 68ch; }

.autofix-hidden { display:none !important; }
/* The branch name under an opened pull request. It shares pullRequestLinkClass()
   with the Review button, so it arrives wearing .btn and has to undo most of
   it: the inline style that used to do that overrode five of .btn's
   declarations. A rule rather than utilities because both ends are ties --
   a utility would tie with .btn, and an important utility would tie with
   .autofix-hidden above. Sitting after .btn it wins on order, and it still
   loses to that important, so the element hides exactly as it did.
   No backticks in here: this block is inside a template literal. */
.autofix-branch { display:block; padding:.5rem 0 0; color:var(--text-3); font-family:var(--mono); font-size:.75rem; }
/* AI Autofix */
.autofix-card { width:100%; min-width:0; overflow:hidden; background:var(--panel); border:1px solid var(--border); border-radius:14px; }
.autofix-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border-bottom:1px solid var(--border-2); }
.autofix-title { display:flex; align-items:center; gap:.65rem; font-weight:700; letter-spacing:-.015em; }
.autofix-title i { color:var(--accent); }
.autofix-status { font-family:var(--mono); font-size:.7rem; color:var(--text-3); }
.autofix-setup { padding:1rem 1.1rem 1.15rem; background:var(--panel-2); }
.autofix-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(9rem,.35fr) auto; gap:.65rem; align-items:end; }
.autofix-field label { display:block; margin-bottom:.35rem; color:var(--text-3); font-size:.7rem; font-weight:600; }
.autofix-input { width:100%; border:1px solid var(--border); border-radius:9px; background:var(--panel); color:var(--text); padding:.55rem .7rem; font-family:var(--mono); font-size:.76rem; outline:none; }
.autofix-input:focus { border-color:color-mix(in srgb,var(--accent) 65%,var(--border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); }
.autofix-run { padding:1.1rem; }
.autofix-progress { height:3px; overflow:hidden; background:var(--border); }
.autofix-progress span { display:block; height:100%; background:var(--accent); transition:transform .35s ease; transform-origin:left; }
.autofix-step { border-top:1px solid var(--border-2); }
.autofix-step summary { display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; cursor:pointer; list-style:none; }
.autofix-step summary::-webkit-details-marker { display:none; }
.autofix-step summary:hover { background:var(--panel-2); }
.autofix-step .step-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--panel-2); color:var(--text-3); }
.autofix-step.done .step-icon, .autofix-step.active .step-icon { color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
.autofix-step .step-copy { flex:1; min-width:0; }
.autofix-step .step-name { font-size:.83rem; font-weight:650; }
.autofix-step .step-state { margin-top:.1rem; color:var(--text-3); font-size:.7rem; }
.autofix-step .step-chevron { color:var(--text-3); transition:transform .16s ease; }
.autofix-step[open] .step-chevron { transform:rotate(90deg); }
.autofix-detail { padding:.1rem 1rem 1rem 3.75rem; color:var(--text-2); font-size:.8rem; line-height:1.55; }
.autofix-plan { display:grid; gap:.55rem; }
.autofix-plan li { display:grid; grid-template-columns:1.15rem 1fr; gap:.55rem; }
.autofix-file { padding:.6rem .7rem; border-radius:9px; background:var(--panel-2); }
.autofix-file + .autofix-file { margin-top:.45rem; }
.autofix-error { margin:0 1rem 1rem; padding:.7rem .8rem; border-radius:9px; color:#ef4444; background:rgba(239,68,68,.08); font-size:.78rem; }
.autofix-value { color:var(--text-2); line-height:1.55; white-space:pre-wrap; }
.autofix-value::after { content:attr(data-value); }
.autofix-skeleton { height:.75rem; border-radius:5px; background:linear-gradient(90deg,var(--border),var(--panel-2),var(--border)); background-size:200% 100%; animation:autofix-shimmer 1.4s ease infinite; }
@keyframes autofix-shimmer { to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .autofix-progress span { transition:none; } .autofix-skeleton { animation:none; } }
@media (max-width:767px) { .autofix-fields { grid-template-columns:1fr; } .autofix-detail { padding-left:1rem; } .autofix-top { align-items:flex-start; } }
    

    .err { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; }
    .divider { display: flex; align-items: center; gap: 0.75rem; color: var(--text-3); font-size: 12px; }
    .divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
    /* Was a 5-property cssText string assigned to a createElement'd <p>. */
    .invite-hint { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
    input[readonly].field { opacity: 0.85; }
    .ok { background: color-mix(in srgb, #22c55e 12%, transparent); color: #16a34a; }
    .limit-note { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text-2); margin-bottom: 0.75rem; }
    

      .hero-code { border: 1px solid var(--border); border-radius: var(--r); background: var(--code-bg); overflow: hidden; }
      .hero-code .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent); }
      .open-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; border: 1px solid var(--border); border-radius: var(--r); padding: 1.75rem 2rem; background: var(--surface); }
      .open-band p { margin: 0; max-width: 52ch; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
      .open-band strong { color: var(--text); font-weight: 600; }
    

  /* CSS-only mega menu. Reveal on hover + keyboard focus (:focus-within).
     Tokens are the same variables the rest of marketing.css uses. */
  .mega { position: relative; display: inline-flex; align-items: center; }
  .mega-trigger { display: inline-flex; align-items: center; gap: 0.32rem; cursor: pointer; }
  .mega-trigger::after {
    content: "\25BE"; font-size: 0.62em; line-height: 1; color: var(--text-3);
    transition: transform 0.18s ease, color 0.18s ease;
  }
  .mega:hover .mega-trigger, .mega:focus-within .mega-trigger { color: var(--text); }
  .mega:hover .mega-trigger::after, .mega:focus-within .mega-trigger::after { transform: rotate(180deg); color: var(--accent); }

  .mega-panel {
    position: absolute; top: 100%; left: 50%; z-index: 50;
    margin-top: 14px;
    display: grid; grid-template-columns: repeat(2, minmax(216px, 1fr)); gap: 0.12rem;
    min-width: 484px; padding: 0.55rem;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }
  /* invisible hover bridge so the pointer can cross the 14px gap */
  .mega-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
  .mega:hover .mega-panel, .mega:focus-within .mega-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .mega-panel a { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.62rem 0.72rem; border-radius: var(--r-sm); }
  .mega-panel a:hover { background: var(--surface-2); }
  .mega-t { color: var(--text); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; }
  .mega-d { color: var(--text-3); font-size: 0.8rem; line-height: 1.4; }

  .nav-menu-group {
    padding: 0.55rem 0.7rem 0.2rem; font-family: var(--mono); font-size: 0.68rem;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
  }
  .nav-menu-group:not(:first-child) { margin-top: 0.35rem; border-top: 1px solid var(--border); }

  @media (prefers-reduced-motion: reduce) {
    .mega-trigger::after, .mega-panel { transition: none; }
  }
  @media (max-width: 900px) {
    /* desktop mega hidden with .nav-links; the <details> menu takes over */
    .mega-panel { display: none; }
  }
    

  /* Multi-column footer. Reuses the same tokens as the rest of marketing.css. */
  .footer-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2rem 2.5rem;
    padding: 1rem 0 2.25rem;
  }
  .footer-col { display: flex; flex-direction: column; gap: 0.6rem; }
  .footer-col h4 {
    margin: 0 0 0.35rem; font-family: var(--mono); font-size: 0.7rem;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); font-weight: 600;
  }
  .footer-col a { color: var(--text-2); font-size: 0.9rem; line-height: 1.4; transition: color 0.16s ease; }
  .footer-col a:hover { color: var(--text); }

  @media (max-width: 900px) {
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; }
  }
  @media (max-width: 560px) {
    .footer-cols { grid-template-columns: 1fr; }
  }
    

/* bughq - Space Grotesk display + JetBrains Mono for numerics/code.
   One accent (rose), off-black/off-white, auto light+dark, radius lock 12px. */
.mono { font-feature-settings: 'tnum' 1; }
.row-wrap { transition: background-color 0.15s ease; }
.row-wrap:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.row-link { text-decoration: none; color: inherit; }
/* The controls only materialise on hover or keyboard focus, so a list at rest
   reads as a list rather than a wall of buttons. focus-within keeps them
   reachable by tab, which display:none or opacity alone would not. */
.row-actions { opacity: 0; transition: opacity 0.12s ease; }
.row-wrap:hover .row-actions, .row-wrap:focus-within .row-actions { opacity: 1; }
@media (hover: none) { .row-actions { opacity: 1; } }
.act { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text-3); font-size: 13px; line-height: 1; cursor: pointer; transition: color .12s ease, border-color .12s ease; }
.act:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.act:disabled { opacity: .5; cursor: default; }
.act-resolve:hover { color: #22c55e; border-color: rgba(34,197,94,.5); }
.act-ignore:hover { color: var(--text-2); }
.undo-strip { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text-2); }
.undo-err { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.undo-btn { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 8px; background: transparent; color: var(--accent); cursor: pointer; }
.undo-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.undo-x { border: 0; background: transparent; color: var(--text-3); cursor: pointer; }
.unread-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }
/* Column headers, matching the "Issues" label's weight so the row reads as one
   header rather than a title with decorations after it. */
.col-head { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
/* Icons sit at the text's own size and colour, so a number and its icon read as
   one value rather than an illustration next to a figure. */
.col-ic { width: 13px; height: 13px; color: var(--text-3); flex: none; }
.new-since { font-size: 11px; padding: 1px 6px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* Native <details> disclosure: no per-row open state to track, closes itself. */
.snooze-wrap { position: relative; }
.snooze-wrap > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; }
.snooze-wrap > summary::-webkit-details-marker { display: none; }
.snooze-menu { position: absolute; right: 0; top: 34px; z-index: 20; min-width: 116px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); }
.snooze-opt { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font-size: 12px; text-align: left; cursor: pointer; }
.snooze-opt:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn-join { padding: 0.375rem 1rem !important; font-size: 0.875rem !important; line-height: 1.25rem !important; font-weight: 600 !important; border-radius: 999px !important; background: var(--accent) !important; border: 1px solid var(--accent) !important; color: var(--accent-ink) !important; }
.pill { border-radius: 999px; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease; }
/* Idle pills respond to hover; the ACTIVE tab carries inline accent styles
   which outrank these rules, so it stays put. Disabled pager pills are spans
   and never match. */
a.pill:hover, button.pill:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, transparent); }
a.pill:active, button.pill:active { transform: translateY(1px); }
/* Project dropdown: replace the native select chevron (which hugged the rounded
   border) with a custom one that has a comfortable inset + room for the value. */
select.panel {
  transition: border-color 0.15s ease; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2rem; background-repeat: no-repeat;
  background-position: right 0.7rem center; background-size: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2397a1b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { select.panel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] select.panel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
:root[data-theme="light"] select.panel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2397a1b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
/* Fixed chrome (Account / Log out). These used to be built with createElement
   and positioned with an inline cssText string, which is why the position and
   typography were split from the colors. They are ordinary markup now, so the
   whole rule lives here. */
.chrome-btn { position: fixed; top: 16px; z-index: 60; padding: 8px 13px; border-radius: 9px;
  font-family: var(--sans, ui-sans-serif); font-size: 13px; line-height: 1; }
.chrome-logout { right: 18px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-2); transition: color 0.15s ease, border-color 0.15s ease; }
.chrome-logout:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
/* Ghost, matching Log out rather than the accent fill the Upgrade pill used to
   carry. It is navigation to a settings page, not a call to action, and 112px is
   the offset that was already measured to clear Log out at this font size. */
.chrome-account { right: 112px; font-weight: 500; text-decoration: none;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-2); transition: color 0.15s ease, border-color 0.15s ease; }
.chrome-account:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.reveal { opacity: 0; transform: translateY(10px); animation: reveal 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
@media (max-width: 639px) {
  /* Keep every project control reachable without making the document wider
     than the phone. Identity and utilities stay above app navigation. */
  .dashboard-appbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
  }
  .dashboard-project-switcher { min-width: 0; }
  .dashboard-project-switcher select { width: 100%; min-width: 0; }
  .dashboard-utilities { grid-column: 3; grid-row: 1; }
  .dashboard-app-action {
    display: flex;
    justify-content: center;
    min-height: 40px;
  }
  .dashboard-all-apps { grid-column: 1 / 3; grid-row: 2; }
  .dashboard-new-app { grid-column: 3; grid-row: 2; }

  /* Two compact summary tiles followed by one full-width total keeps large
     event counts legible instead of squeezing them into a narrow column. */
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-stats > :nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    border-left-width: 0;
  }

  /* Issue metadata and triage move below the title on phones. The title owns
     the full content width and every action remains easy to tap. */
  .row-wrap {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
  }
  .issue-rail { grid-column: 1; grid-row: 1 / 3; height: 100%; min-height: 44px; }
  .row-link { grid-column: 2 / -1; grid-row: 1; }
  .event-count {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-content: flex-start;
    width: auto;
  }
  .row-actions { grid-column: 3; grid-row: 2; width: auto; }
  .act { width: 44px; height: 44px; }
  .issue-columns .events-heading { display: none; }
  .issue-columns .page-count { width: auto; }
}


  /* ---- Reporting-period picker (Fathom-style presets + calendar) ---- */
.range-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0 0.72rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-2);
  font: 600 0.8125rem/1 var(--sans, ui-sans-serif);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.range-tool:hover { color: var(--text); border-color: var(--accent); }
.range-tool:active { transform: scale(0.98); }
/* components/AutofixPanel.stx declared its own copy of this, naming .btn,
   .icon-btn and .autofix-input. Two of those three were already covered here
   and by input:focus-visible below, so all it really added was the button --
   which is btn-outline now, and icon-btn-lg joins it. Both reach every page
   instead of only /issue/:id, which is where that copy shipped. */
.range-tool:focus-visible,
.range-link:focus-visible,
.chrome-btn:focus-visible,
.icon-btn:focus-visible,
.icon-btn-lg:focus-visible,
.btn-outline:focus-visible,
select.panel:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.range-tool.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.range-tool i { width: 1rem; height: 1rem; }
.date-menu { position: relative; }
.date-menu > summary { list-style: none; }
.date-menu > summary::-webkit-details-marker { display: none; }
.date-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 40;
  width: min(44rem, calc(100vw - 2.5rem));
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--text) 10%, transparent);
}
/* Period picker: presets down the left, two months on the right. The range is
   drawn flat with rounded ends, the way Fathom's is, on the --bar wash the KPI
   bars already use so it reads as the same accent at the same strength. */
.drp-backdrop { position: fixed; inset: 0; z-index: 39; background: transparent; cursor: default; }
.drp { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 0.75rem; }
.drp-presets { display: flex; flex-direction: column; gap: 0.15rem; padding-right: 0.75rem; border-right: 1px solid var(--border); }
.drp-preset {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font: 500 0.8125rem/1.2 var(--sans, ui-sans-serif);
  text-align: left;
  cursor: pointer;
}
.drp-preset:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.drp-preset.is-active { color: var(--accent-ink); background: var(--accent); }
.drp-cals { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.drp-head { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 2rem; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.drp-nav {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.drp-nav:hover { color: var(--text); border-color: var(--border); }
.drp-nav svg { width: 1rem; height: 1rem; }
.drp-nav.is-hidden { visibility: hidden; }
.drp-sel {
  min-width: 0;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: 600 0.8125rem/1 var(--sans, ui-sans-serif);
}
.drp-dow, .drp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.drp-dow span { padding: 0.25rem 0; color: var(--text-3); font: 600 0.7rem/1.2 var(--sans, ui-sans-serif); text-align: center; }
.drp-day {
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 500 0.8125rem/1 var(--mono, ui-monospace);
  cursor: pointer;
}
.drp-day:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.drp-day.is-out { color: var(--text-3); }
.drp-day.is-today { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.drp-day.is-range { background: var(--accent-soft); }
.drp-day.is-edge { background: var(--accent); color: var(--accent-ink); border-radius: 8px; }
.drp-day.is-disabled { color: var(--text-3); opacity: 0.45; cursor: default; }
.drp-day.is-disabled:hover { background: transparent; }
.drp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
@media (max-width: 640px) {
  .date-menu { position: static; }
  .date-popover { left: 0; right: auto; width: calc(100vw - 2rem); max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain; }
  .drp { grid-template-columns: minmax(0, 1fr); }
  .drp-presets { flex-direction: row; flex-wrap: wrap; gap: 0.35rem; padding: 0 0 0.6rem; border-right: 0; border-bottom: 1px solid var(--border); }
  .drp-preset { width: auto; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 999px; }
  .drp-cals { grid-template-columns: minmax(0, 1fr); }
  .drp-cal.is-right { display: none; }
  .drp-cal.is-left .drp-nav.is-hidden { visibility: visible; }
  .drp-day { height: 2.5rem; }
}
    

html:has(.tabnav) { scroll-behavior: smooth; }
.tabnav { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.tabnav::-webkit-scrollbar { display: none; }
.tabnav a { flex: none; color: var(--text-2); border: 1px solid var(--border); border-radius: 999px; transition: color .15s ease, border-color .15s ease; }
.tabnav a:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* The notification toggle. Pseudo-element knob, attribute state. */
.tgl { width: 38px; height: 22px; border-radius: 999px; background: var(--border); position: relative; transition: background 0.15s ease; cursor: pointer; flex: none; }
.tgl::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff; transition: transform 0.15s ease; }
.tgl[data-on="1"] { background: var(--ok); }
.tgl[data-on="1"]::after { transform: translateX(16px); }

/* Slack / Discord picker. The brand fill is keyed off the selected attribute. */
.seg { border: 1px solid var(--border); border-radius: 10px; color: var(--text-2); background: var(--panel); transition: all 0.12s ease; }
.seg[data-sel="1"] { color: #fff; border-color: transparent; }
.seg-slack[data-sel="1"] { background: var(--slack); }
.seg-discord[data-sel="1"] { background: var(--discord); }

/* Notes rendered from signals, so the state is a class rather than an inline
   style assignment. The colours are the note-ok / note-err / note-failed
   shortcuts; this is the compound that cannot be one. */
.note { display: none; }
.note.show { display: block; }

/* The danger-zone confirm dialog. */
.dz-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(2,4,10,0.62); backdrop-filter: blur(3px); animation: dz-fade 0.12s ease; }
.dz-overlay[hidden] { display: none; }
@keyframes dz-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes dz-pop { from { opacity: 0; transform: translateY(6px) scale(0.98) } to { opacity: 1; transform: none } }

@keyframes skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }

.card-head { display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-bottom:1px solid var(--border-2); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.pill { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .55rem; border-radius:999px; font-size:.7rem; font-weight:600; letter-spacing:.02em; }

/* Severity chips: the one deliberately loud element on the page. Solid
   saturated fills (they carry on both themes) with a soft matching glow so
   the level reads instantly instead of blending into the panel. */
.pill.lvl { color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:#64748b; }
.pill.lvl-fatal { background:#dc2626; box-shadow:0 0 16px rgba(220,38,38,.4); }
.pill.lvl-error { background:#e11d48; box-shadow:0 0 16px rgba(225,29,72,.4); }
.pill.lvl-warning { background:#d97706; box-shadow:0 0 14px rgba(217,119,6,.35); }
.pill.lvl-info { background:#0284c7; }
.pill.lvl-debug { background:#7c3aed; }
/* Status is secondary to severity: outlined + tinted, not solid. */
.pill.st-unresolved { color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.pill.st-resolved { color:#22c55e; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.4); }
.pill.st-ignored { color:var(--text-3); background:color-mix(in srgb, var(--text-3) 14%, transparent); border:1px solid color-mix(in srgb, var(--text-3) 35%, transparent); }

/* Stack trace */
.exc + .exc { margin-top: .75rem; }
.exc-head { padding: 1rem 1.15rem .9rem; border-bottom:1px solid var(--border-2); }
.exc-type { font-family: var(--mono); font-weight:700; font-size:1rem; color:var(--accent); word-break:break-word; }
.exc-msg { margin-top:.3rem; font-size:.95rem; line-height:1.5; color:var(--text); word-break:break-word; }
.caused { display:inline-block; margin-bottom:.5rem; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.frames { padding:.35rem; }
.frame { display:flex; align-items:baseline; gap:.75rem; padding:.5rem .65rem; border-radius:8px; font-family: var(--mono); font-size:.8rem; line-height:1.45; }
.frame + .frame { margin-top:1px; }
.frame.is-app { background: var(--app-tint); box-shadow: inset 2px 0 0 var(--app-bar); }
.frame.is-sys { opacity:.62; }
/* The crash frame is where the error actually happened — it gets the
   strongest treatment on the page: warmer wash, thicker bar, accent
   filename + location chip. */
.frame.is-crash { background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: inset 3px 0 0 var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent); }
.frame.is-crash .fr-base { color: var(--accent); }
.frame.is-crash .fr-loc { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-weight:600; }
.fr-main { min-width:0; flex:1; display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.fr-base { color: var(--text); font-weight:600; flex-shrink:0; }
.fr-dir { color: var(--text-3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-fn { color: var(--text-2); flex-shrink:0; }
.fr-fn b { color: var(--text); font-weight:600; }
.fr-loc { flex-shrink:0; color: var(--text-3); font-size:.74rem; padding:.05rem .4rem; border-radius:5px; background: var(--code-bg); }
details.sysgroup { margin:1px 0; }
details.sysgroup > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem; padding:.45rem .65rem; border-radius:8px; font-size:.74rem; color:var(--text-3); font-family: var(--mono); }
details.sysgroup > summary::-webkit-details-marker { display:none; }
details.sysgroup > summary:hover { color: var(--text-2); background: var(--code-bg); }
details.sysgroup > summary .chev { transition: transform .15s ease; }
details.sysgroup[open] > summary .chev { transform: rotate(90deg); }

/* Breadcrumbs */
.crumb { display:flex; align-items:flex-start; gap:.7rem; padding:.5rem 1rem; border-top:1px solid var(--border-2); }
.crumb:first-child { border-top:none; }
.crumb-ic { flex-shrink:0; width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; }
.crumb-ic svg { width:15px; height:15px; }
.crumb-cat { flex-shrink:0; width:5.5rem; font-family:var(--mono); font-size:.72rem; color:var(--text-2); padding-top:.28rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crumb-txt { flex:1; min-width:0; font-family:var(--mono); font-size:.75rem; color:var(--text); padding-top:.28rem; word-break:break-word; }
.crumb-time { flex-shrink:0; font-family:var(--mono); font-size:.68rem; color:var(--text-3); padding-top:.32rem; }

/* Key/value context */
.kv { display:grid; grid-template-columns: minmax(6rem,auto) 1fr; gap:.1rem .9rem; padding:.6rem 1rem 1rem; font-size:.78rem; }
.kv dt { color:var(--text-3); font-family:var(--mono); font-size:.72rem; padding:.2rem 0; overflow:hidden; text-overflow:ellipsis; }
.kv dd { color:var(--text); font-family:var(--mono); word-break:break-word; padding:.2rem 0; }
.jsonblock { font-family:var(--mono); font-size:.72rem; line-height:1.5; color:var(--text-2); white-space:pre-wrap; word-break:break-word; padding:.7rem 1rem 1rem; margin:0; }

}

@layer tc-base {

html:has(meta[name="stx-layout-group"][content="marketing"]) {
  --surface: #ffffff;
  --surface-2: #f4f5f8;
  --border-strong: rgba(15, 23, 42, 0.16);
  --accent: #d31340;
  --accent-ink: #ffffff;
  --accent-soft: rgba(225, 29, 72, 0.08);
  --accent-line: rgba(225, 29, 72, 0.34);
  --code-bg: #0b0f19;
  --code-ink: #d6deeb;
  --r: 14px;
  --r-sm: 9px;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  html:has(meta[name="stx-layout-group"][content="marketing"]) {
    --surface: #10131c; --surface-2: #161a24;
    --border-strong: rgba(148, 163, 184, 0.2);
    --accent: #fb7185; --accent-ink: #1a0509;
    --accent-soft: rgba(251, 113, 133, 0.1); --accent-line: rgba(251, 113, 133, 0.32);
    --code-bg: #05070c;
  }
}
html:has(meta[name="stx-layout-group"][content="marketing"])[data-theme="dark"] {
  --surface: #10131c; --surface-2: #161a24;
  --border-strong: rgba(148, 163, 184, 0.2);
  --accent: #fb7185; --accent-ink: #1a0509;
  --accent-soft: rgba(251, 113, 133, 0.1); --accent-line: rgba(251, 113, 133, 0.32);
  --code-bg: #05070c;
}
html:has(meta[name="stx-layout-group"][content="marketing"])[data-theme="light"] {
  --surface: #ffffff; --surface-2: #f4f5f8;
  --border-strong: rgba(15, 23, 42, 0.16);
  --accent: #d31340; --accent-ink: #ffffff;
  --accent-soft: rgba(225, 29, 72, 0.08); --accent-line: rgba(225, 29, 72, 0.34);
  --code-bg: #0b0f19;
}

html:has(meta[name="stx-layout-group"][content="marketing"]), html:has(meta[name="stx-layout-group"][content="marketing"]) * { box-sizing: border-box; }
html:has(meta[name="stx-layout-group"][content="marketing"]) { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html:has(meta[name="stx-layout-group"][content="marketing"]) body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  color: var(--text); background: var(--bg);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html:has(meta[name="stx-layout-group"][content="marketing"]) {
a { color: inherit; text-decoration: none; }

.shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.shell-narrow { width: min(920px, calc(100% - 48px)); margin: 0 auto; }
.mono { font-family: var(--mono); }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-mark {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  color: var(--accent); font-weight: 700; font-size: 1rem; line-height: 1;
}
.brand-name { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; color: var(--text-2); font-size: 0.9rem; }
.nav-links a { transition: color 0.16s ease; }
.nav-links a:hover { color: var(--text); }
.nav-cta { margin-left: 1.6rem; }

.nav-menu { display: none; margin-left: auto; position: relative; }
.nav-menu > summary {
  list-style: none; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.burger, .burger::before, .burger::after {
  display: block; width: 18px; height: 1.5px; background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger { position: relative; }
.burger::before { content: ""; position: absolute; top: -5px; }
.burger::after { content: ""; position: absolute; top: 5px; }
.nav-menu[open] .burger { background: transparent; }
.nav-menu[open] .burger::before { transform: translateY(5px) rotate(45deg); }
.nav-menu[open] .burger::after { transform: translateY(-5px) rotate(-45deg); }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 50;
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 232px; padding: 0.6rem;
  max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}
.nav-menu-panel a { padding: 0.6rem 0.7rem; border-radius: var(--r-sm); color: var(--text-2); font-size: 0.95rem; }
.nav-menu-panel a:hover { color: var(--text); background: var(--surface-2); }
.nav-menu-panel .btn { margin-top: 0.35rem; justify-content: center; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 46px; padding: 0 1.15rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  color: var(--text); font-family: var(--sans); font-weight: 600; font-size: 0.92rem;
  white-space: nowrap; background: transparent; cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.btn.sm { min-height: 38px; padding: 0 0.85rem; font-size: 0.86rem; }
.btn.primary { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn.ghost:hover { border-color: var(--accent-line); }
.btn:active { transform: translateY(1px); }

/* section scaffolding */
.section { padding: 3.5rem 0; }
.section-head { max-width: 62ch; margin-bottom: 1.75rem; }
.section-title { margin: 0; font-weight: 700; font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; }
.section-intro { margin: 0.9rem 0 0; color: var(--text-2); font-size: 1.02rem; line-height: 1.6; }
.eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.textlink { color: var(--accent); font-weight: 500; }
.textlink:hover { text-decoration: underline; }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; padding: 3.5rem 0 4rem; }
.hero-title { margin: 0; font-weight: 700; font-size: clamp(2.3rem, 5.4vw, 3.4rem); letter-spacing: -0.035em; line-height: 1.04; }
.hero-sub { margin: 1.25rem 0 0; color: var(--text-2); font-size: 1.08rem; line-height: 1.6; max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* single-column feature/use-case hero */
.feat-hero { padding: 2.5rem 0 1.5rem; max-width: 62ch; }
.feat-hero .kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.feat-hero h1 { margin: 1rem 0 0; font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.05; letter-spacing: -0.03em; }
.feat-hero p { margin: 1.1rem 0 0; color: var(--text-2); font-size: 1.05rem; line-height: 1.6; }
.feat-hero .hero-actions { margin-top: 1.75rem; }

.subnav { display: flex; align-items: center; gap: 0.5rem; padding-top: 1.75rem; color: var(--text-3); font-size: 0.88rem; }
.subnav a { color: var(--text-2); transition: color 0.16s ease; }
.subnav a:hover { color: var(--text); }
.subnav .sep { color: var(--text-3); }

/* code panel */
.code { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.code-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(148,163,184,0.14); }
.code-body { margin: 0; padding: 1.1rem 1.25rem; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--code-ink); }
.chart-cap { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8a94a6; }

/* panel (data viz container) */
.panel { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 1.4rem 1.5rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.panel-tag { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.live { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-2); }
.live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.stat-big { margin: 0; font-weight: 700; font-size: 2.6rem; letter-spacing: -0.03em; }
.stat-label { margin: 0.15rem 0 0; color: var(--text-3); font-size: 0.9rem; }

/* trackless bars */
.bar-row { display: grid; grid-template-columns: 148px 1fr 52px; align-items: center; gap: 0.9rem; padding: 0.5rem 0; }
.bar-row + .bar-row { border-top: 1px solid var(--border); }
.bar-label { color: var(--text-2); font-size: 0.88rem; }
.bar-track { height: 8px; border-radius: 999px; background: transparent; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); opacity: 0.82; min-width: 4px; }
.bar-value { font-family: var(--mono); font-size: 0.82rem; color: var(--text); text-align: right; }

/* stat/severity tiles */
.vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.vital { padding: 1.4rem 1.5rem; background: var(--surface); }
.vital-k { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.vital-v { margin-top: 0.5rem; font-weight: 700; font-size: 1.9rem; letter-spacing: -0.02em; color: var(--text); }
.vital-tag { margin-top: 0.4rem; display: inline-flex; font-size: 0.78rem; color: var(--accent); }

/* numbered flow */
.flow { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.flow-step { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.4rem 1.5rem; background: var(--surface); }
.flow-num { font-family: var(--mono); font-size: 0.82rem; color: var(--accent); padding-top: 0.15rem; }
.flow-step h3 { margin: 0; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.flow-step p { margin: 0.4rem 0 0; color: var(--text-2); font-size: 0.95rem; line-height: 1.55; }

/* metric tiles */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2.5rem; }
.metric .m-value { font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.02em; color: var(--text); }
.metric .m-label { margin-top: 0.35rem; color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }

/* chips grid */
.chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.chip { border: 1px solid var(--border); border-radius: var(--r); padding: 1.4rem 1.5rem; background: var(--surface); }
.chip h3 { margin: 0; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.chip p { margin: 0.5rem 0 0; color: var(--text-2); font-size: 0.94rem; line-height: 1.6; }

/* feature bento (landing) */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.cell { display: block; padding: 1.5rem 1.6rem; background: var(--surface); transition: background 0.16s ease; }
a.cell { cursor: pointer; }
a.cell:hover { background: var(--surface-2); }
.cell h3 { margin: 0; font-weight: 600; font-size: 1.08rem; letter-spacing: -0.015em; }
.cell p { margin: 0.5rem 0 0; color: var(--text-2); font-size: 0.93rem; line-height: 1.55; }
.cell.lead { grid-column: span 1; }
.cell.tint { background: var(--accent-soft); }
a.cell.tint:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.cell-more { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); transition: color 0.16s ease, gap 0.16s ease; }
.cell-more::after { content: "\2192"; }
a.cell:hover .cell-more { color: var(--accent); gap: 0.55rem; }

/* comparison table */
.cmp { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.cmp-cell { padding: 1rem 1.2rem; border-top: 1px solid var(--border); background: var(--surface); font-size: 0.92rem; }
.cmp-cell:nth-child(-n+3) { border-top: none; font-weight: 600; }
.cmp-dim { color: var(--text-3); }
.cmp-ghost { color: var(--text); }

/* related features */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.related a { display: block; padding: 1.3rem 1.4rem; background: var(--surface); transition: background 0.16s ease; }
.related a:hover { background: var(--surface-2); }
.related .r-name { font-weight: 600; font-size: 1rem; color: var(--text); letter-spacing: -0.01em; }
.related .r-desc { margin-top: 0.3rem; color: var(--text-3); font-size: 0.86rem; line-height: 1.45; }

/* use-case cards */
.usecases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.usecase { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.usecase img { display: block; width: 100%; height: 168px; object-fit: cover; }
.usecase-body { padding: 1.4rem 1.5rem 1.6rem; }
/* h2, not h3: these card titles are the only headings under the page h1,
   so h3 skipped a level. The element selector follows the markup. */
.usecase-body h2 { margin: 0; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.usecase-body p { margin: 0.55rem 0 0; color: var(--text-2); font-size: 0.94rem; line-height: 1.6; }
.usecase-body .textlink { margin-top: 0.9rem; display: inline-block; }

/* cta band */
.cta-band { border: 1px solid var(--border); border-radius: var(--r); padding: 2.5rem; background: var(--surface); text-align: center; }
.cta-band h2 { margin: 0 auto; max-width: 30ch; font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: -0.03em; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }

/* footer */
.footer { padding: 2.5rem 0; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--text-3); font-size: 0.88rem; }

/* motion */
.reveal { opacity: 0; transform: translateY(12px); animation: reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } }

/* responsive */
@media (max-width: 900px) {
  body:has(.nav-menu[open]) { overflow: hidden; }
  .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.5rem; }
  .bento, .related, .cmp { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .chips, .usecases { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 560px) {
  .metrics, .vitals { grid-template-columns: 1fr; }
  .flow-step { grid-template-columns: 1fr; gap: 0.4rem; }
  .bar-row { grid-template-columns: 120px 1fr 44px; }
}

/* login link beside the Sign up nav button */
.nav-login { color: var(--text-2); font-size: 0.9rem; transition: color 0.16s ease; }
.nav-login:hover { color: var(--text); }
.nav-cta { margin-left: 0.95rem; }
}

}

.\!bg-\[color-mix\(in_srgb\,var\(--accent\)_6\%\,var\(--panel\)\)\] {
  background-color: color-mix(in srgb,var(--accent) 6%,var(--panel)) !important;
}

.\!border-\[color-mix\(in_srgb\,var\(--accent\)_45\%\,var\(--border\)\)\] {
  border-color: color-mix(in srgb,var(--accent) 45%,var(--border)) !important;
}

.bg-\[var\(--border\)\] {
  background-color: var(--border);
}

.opacity-\[\.35\] {
  opacity: .35;
}

.opacity-45 {
  opacity: 0.45;
}

.tracking-\[-0\.01em\] {
  letter-spacing: -0.01em;
}

.\!border-\[var\(--border-2\)\] {
  border-color: var(--border-2) !important;
}

.\[grid-auto-rows\:min-content\] {
  grid-auto-rows: min-content;
}

.border-\[var\(--border-2\)\] {
  border-color: var(--border-2);
}

.border-b {
  border-bottom-width: 1px;
}

.border-line {
  border-color: var(--border);
}

.border-t {
  border-top-width: 1px;
}

.font-extrabold {
  font-weight: 800;
}

.grid-cols-\[minmax\(0\,1fr\)\] {
  grid-template-columns: minmax(0,1fr);
}

.h-\[\.6rem\] {
  height: .6rem;
}

.justify-between {
  justify-content: space-between;
}

.leading-\[1\.15\] {
  line-height: 1.15;
}

.max-w-\[78rem\] {
  max-width: 78rem;
}

.p-2 {
  padding: 0.5rem;
}

.shadow-none {
  --tc-shadow: 0 0 #0000;
  box-shadow: var(--tc-inset-shadow, 0 0 #0000), var(--tc-inset-ring-shadow, 0 0 #0000), var(--tc-ring-offset-shadow, 0 0 #0000), var(--tc-ring-shadow, 0 0 #0000), var(--tc-shadow, 0 0 #0000);
}

.text-\[1\.7rem\] {
  font-size: 1.7rem;
}

.bg-\[color-mix\(in_srgb\,var\(--accent\)_14\%\,var\(--panel\)\)\] {
  background-color: color-mix(in srgb,var(--accent) 14%,var(--panel));
}

.text-accent {
  color: var(--accent);
}

.\!text-\[var\(--warn\)\] {
  color: var(--warn) !important;
}

.\[white-space\:pre\] {
  white-space: pre;
}

.bg-\[color-mix\(in_srgb\,var\(--text-3\)_12\%\,var\(--panel\)\)\] {
  background-color: color-mix(in srgb,var(--text-3) 12%,var(--panel));
}

.bg-\[color-mix\(in_srgb\,var\(--text-3\)_16\%\,var\(--panel\)\)\] {
  background-color: color-mix(in srgb,var(--text-3) 16%,var(--panel));
}

.text-\[var\(--warn\)\] {
  color: var(--warn);
}

.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}

.tracking-\[0\.01em\] {
  letter-spacing: 0.01em;
}

.active\:translate-y-px:active {
  transform: translateY(1px);
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.min-h-\[100dvh\] {
  min-height: 100dvh;
}

.max-w-sm {
  max-width: 24rem;
}

.w-full {
  width: 100%;
}

.text-center {
  text-align: center;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-subtle {
  color: var(--text-3);
}

.font-medium {
  font-weight: 500;
}

.text-muted {
  color: var(--text-2);
}

.block {
  display: block;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.inline-flex {
  display: inline-flex;
}

.font-semibold {
  font-weight: 600;
}

.rounded-control {
  border-radius: 10px;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.focus\:outline-none:focus {
  outline-style: none;
}

.focus\:ring-2:focus {
  --tc-ring-offset-shadow: var(--tc-ring-inset,) 0 0 0 var(--tc-ring-offset-width, 0px) var(--tc-ring-offset-color, #fff);
  --tc-ring-shadow: var(--tc-ring-inset,) 0 0 0 calc(2px + var(--tc-ring-offset-width, 0px)) var(--tc-ring-color, currentcolor);
  box-shadow: var(--tc-inset-shadow, 0 0 #0000), var(--tc-inset-ring-shadow, 0 0 #0000), var(--tc-ring-offset-shadow, 0 0 #0000), var(--tc-ring-shadow, 0 0 #0000), var(--tc-shadow, 0 0 #0000);
}

.focus\:ring-offset-2:focus {
  --tc-ring-offset-width: 2px;
}

.focus\:ring-offset-panel:focus {
  --tc-ring-offset-color: var(--panel);
}

.focus\:ring-accent:focus {
  --tc-ring-color: var(--accent);
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.bg-accent-solid {
  background-color: var(--accent);
}

.hover\:bg-accent-solid-hover:hover {
  background-color: var(--accent);
}

.text-accent-ink {
  color: var(--accent-ink);
}

.shadow-md {
  --tc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tc-shadow-colored: 0 4px 6px -1px var(--tc-shadow-color), 0 2px 4px -2px var(--tc-shadow-color);
  box-shadow: var(--tc-inset-shadow, 0 0 #0000), var(--tc-inset-ring-shadow, 0 0 #0000), var(--tc-ring-offset-shadow, 0 0 #0000), var(--tc-ring-shadow, 0 0 #0000), var(--tc-shadow, 0 0 #0000);
}

.hover\:shadow-lg:hover {
  --tc-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tc-shadow-colored: 0 10px 15px -3px var(--tc-shadow-color), 0 4px 6px -4px var(--tc-shadow-color);
  box-shadow: var(--tc-inset-shadow, 0 0 #0000), var(--tc-inset-ring-shadow, 0 0 #0000), var(--tc-ring-offset-shadow, 0 0 #0000), var(--tc-ring-shadow, 0 0 #0000), var(--tc-shadow, 0 0 #0000);
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.h-5 {
  height: 1.25rem;
}

.w-5 {
  width: 1.25rem;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-75 {
  opacity: 0.75;
}

.\!px-\[\.55rem\] {
  padding-left: .55rem !important;
  padding-right: .55rem !important;
}

.\!py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tc-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tc-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tc-space-y-reverse));
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.\!pb-\[\.2rem\] {
  padding-bottom: .2rem !important;
}

.\!pt-\[\.6rem\] {
  padding-top: .6rem !important;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}