@font-face {
  font-family: "Matter";
  src: url("/matter.woff2?v=2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Paper Mono";
  src: url("/paper-mono-0.100.woff2?v=2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-sans: "Matter", sans-serif;
  --font-mono: "Paper Mono", monospace;
  --default-font-family: var(--font-sans);
  --font-inter: var(--font-sans);
  --font-weight-display: 360;
  --font-weight-body: 400;
  --font-weight-ui: 480;
  --font-weight-heading: 550;
  --font-weight-strong: 670;
  --font-weight-mono: 400;
  --font-size-display-xl: 72px;
  --font-size-display-lg: 56px;
  --font-size-display-board: 46px;
  --font-size-heading-xl: 56px;
  --font-size-heading-lg: 40px;
  --font-size-heading-md: 30px;
  --font-size-heading-sm: 24px;
  --font-size-heading-xs: 22px;
  --font-size-body-lg: 20px;
  --font-size-body-md: 18px;
  --font-size-body-sm: 16px;
  --font-size-body-xs: 14px;
  --font-size-label-lg: 13px;
  --font-size-label: 12px;
  --font-size-caption: 11px;
  --font-size-micro: 10px;
  --font-size-detail: 9px;
  --font-size-heading-board: 34px;
  --line-height-display-xl: 76px;
  --line-height-display-lg: 62px;
  --line-height-display-board: 44px;
  --line-height-heading-xl: 62px;
  --line-height-heading-lg: 46px;
  --line-height-heading-md: 36px;
  --line-height-body-lg: 30px;
  --line-height-body-md: 28px;
  --line-height-body-sm: 24px;
  --line-height-label-lg: 18px;
  --line-height-label: 16px;
  --line-height-caption: 16px;
  --line-height-micro: 12px;
  --line-height-micro-relaxed: 14px;
  --line-height-detail: 12px;
  --line-height-flat: 1;
  --line-height-heading-tight: 1.08;
  --line-height-heading-snug: 1.1;
  --line-height-heading-compact: 1.12;
  --line-height-ui-compact: 1.2;
  --line-height-ui-relaxed: 1.25;
  --line-height-meta-snug: 1.3;
  --line-height-copy-snug: 1.34;
  --line-height-copy-relaxed: 1.38;
  --line-height-chip-compact: 15px;
  --space-0-25: 1px;
  --space-0-5: 2px;
  --space-0-75: 3px;
  --letter-spacing-label: 0.08em;
  --letter-spacing-label-tight: 0.06em;
  --letter-spacing-label-wide: 0.07em;
  --letter-spacing-label-emphasis: 0.12em;
  --letter-spacing-label-strong: 0.14em;
  --letter-spacing-label-stronger: 0.16em;
  --letter-spacing-display-tight: -0.01em;
  --letter-spacing-display-strong: -0.02em;
  --letter-spacing-normal: 0em;
  --color-paper: #fcfcf9;
  --color-canvas: #f5f3ee;
  --color-section: #ece8df;
  --color-surface: #fdfbf7;
  --color-surface-soft: #f0efe4;
  --color-surface-hover-soft: #efefef;
  --color-surface-hover-subtle: #e8e8e8;
  --color-line-soft: #e0dfd9;
  --color-line-subtle: #d8d1c5;
  --color-ink: #171614;
  --color-copy: #4c4842;
  --color-muted: #7a746b;
  --color-quiet: #a39e93;
  --color-inverse-hover: #111111;
  --color-inverse-surface: #1f1f1f;
  --color-inverse-surface-soft: #333333;
  --color-inverse-surface-strong: #444444;
  --color-inverse-text: #fcfcf9;
  --color-accent-terracotta: #c45f3c;
  --color-accent-evergreen: #1d6b63;
  --color-accent-blue: #81adec;
  --color-accent-blue-muted: #82aae2;
  --color-accent-blue-soft: #a8c3ea;
  --color-accent-amber: #e99d15;
  --color-accent-indigo: #4c5ad1;
  --color-accent-violet-soft: #a293e1;
  --color-accent-violet: #8d43a3;
  --color-focus-ring: #0f5bd8;
  --color-vertex-border: #d0d0d0;
  --color-vertex-border-dark: #444444;
  --color-vertex-surface-dark: #000000;
  --bg-page: var(--color-paper);
  --bg-canvas: var(--color-canvas);
  --bg-section: var(--color-section);
  --surface-card: var(--color-surface);
  --surface-card-soft: var(--color-surface-soft);
  --surface-hover-soft: var(--color-surface-hover-soft);
  --surface-hover-subtle: var(--color-surface-hover-subtle);
  --surface-demo-light: #ffffff;
  --surface-demo-soft: #f4f4f5;
  --surface-demo-muted: #d4d4d8;
  --surface-inverse: var(--color-inverse-surface);
  --surface-inverse-hover: var(--color-inverse-hover);
  --surface-inverse-soft: var(--color-inverse-surface-soft);
  --surface-inverse-strong: var(--color-inverse-surface-strong);
  --surface-roadmap-tray: #efefe4;
  --surface-roadmap-tray-dark: #2a2a2a;
  --surface-demo-dark: #1e1e1e;
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-copy);
  --text-muted: var(--color-muted);
  --text-quiet: var(--color-quiet);
  --text-inverse: var(--color-inverse-text);
  --text-demo-primary: #18181b;
  --text-demo-muted: #a1a1aa;
  --border-soft: var(--color-line-soft);
  --border-subtle: var(--color-line-subtle);
  --border-inverse-soft: var(--color-inverse-surface-soft);
  --border-inverse-strong: var(--color-inverse-surface-strong);
  --accent-primary: var(--color-accent-terracotta);
  --accent-secondary: var(--color-accent-evergreen);
  --accent-link: var(--color-accent-blue);
  --accent-link-muted: var(--color-accent-blue-muted);
  --accent-link-soft: var(--color-accent-blue-soft);
  --accent-highlight: var(--color-accent-amber);
  --accent-support-indigo: var(--color-accent-indigo);
  --accent-support-violet-soft: var(--color-accent-violet-soft);
  --accent-support-violet: var(--color-accent-violet);
  --focus-ring: var(--color-focus-ring);
  --selection-fill: color-mix(in srgb, var(--accent-link) 50%, transparent);
  --shadow-roadmap-tray:
    #00000014 0px 8px 8px -4px,
    #00000014 0px 2px 4px -2px,
    #00000014 0px 1px 1px -1px,
    #00000014 0px 0px 0px 1px;
  --color-cream: var(--color-surface-soft);
  --color-foreground: var(--color-ink);
  --color-gray: var(--color-quiet);
  --color-blue: var(--color-accent-blue);
  --size-launch-marker: 6px;
  --size-launch-link-thickness: 2px;
  --size-launch-core-max-w: 220px;
  --size-launch-core-min-h: 62px;
  --size-launch-network-min-h: clamp(190px, 30vw, 245px);
  --size-launch-core-width-compact: clamp(104px, 17vw, 136px);
  --size-launch-core-min-h-compact: clamp(50px, 7vw, 62px);
  --size-launch-network-min-h-narrow: 170px;
  --size-launch-core-min-h-mobile: 56px;
  --size-launch-link-span: 28%;
  --inset-launch-node-edge: 4%;
  --inset-launch-node-band: 7%;
  --inset-launch-link-edge: 22%;
  --inset-launch-link-band: 30%;
  --angle-launch-link-diagonal: 24deg;
  --angle-launch-link-diagonal-inverse: -24deg;
  --size-rollout-visual-h: 210px;
  --size-rollout-grid: 14px;
  --size-rollout-bar-h: 3px;
  --size-rollout-disc: 96px;
  --size-rollout-disc-shift: 32px;
  --size-rollout-orbit-pill-w: 44px;
  --size-rollout-orbit-pill-h: 88px;
  --size-rollout-orbit-tab-w: 30px;
  --size-rollout-orbit-tab-h: 34px;
  --size-rollout-orbit-dot: 8px;
  --size-rollout-orbit-ring: 22px;
  --size-rollout-system-panel-w: 120px;
  --size-rollout-system-panel-h: 140px;
  --size-rollout-system-preview-h: 56px;
  --size-rollout-system-grid: 6px;
  --size-rollout-system-ring: 20px;
  --size-rollout-output-head-w: 130px;
  --size-rollout-output-head-h: 50px;
  --size-rollout-output-tile: 32px;
  --size-rollout-output-sidecard-w: 64px;
  --size-rollout-output-sidecard-h: 104px;
  --size-rollout-output-sidecard-preview-h: 46px;
  --size-rollout-output-sidecard-accent-h: 12px;
  --size-rollout-output-float-w: 80px;
  --size-rollout-output-float-h: 80px;
  --size-rollout-output-float-ring: 16px;
  --size-rollout-output-float-dot: 6px;
  --offset-rollout-orbit-tab-x: 20px;
  --offset-rollout-orbit-ring-x: 44px;
  --offset-rollout-orbit-ring-y: 16px;
  --offset-rollout-output-sidecard-left: 188px;
  --offset-rollout-output-sidecard-top: 58px;
  --offset-rollout-output-float-left: 86px;
  --offset-rollout-output-float-top: 100px;
  --angle-rollout-orbit-tab: 9deg;
  --radius-rollout-bar: 2px;
  --shadow-rollout-panel-soft: 0 2px 6px;
  --shadow-rollout-panel-medium: 0 2px 4px;
  --shadow-rollout-panel-strong: 0 6px 14px;
  --size-preview-meter-w: 60px;
  --size-preview-meter-h: 10px;
  --space-1: 4px;
  --space-1-25: 5px;
  --space-1-5: 6px;
  --space-1-75: 7px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-2-75: 11px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 20px;
  --space-5: 24px;
  --space-5-5: 30px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 96px;
  --radius-hairline: 1px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-ui: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --surface-chat-panel: color-mix(in srgb, var(--surface-card) 76%, var(--bg-page) 24%);
  --surface-chat-panel-dark: color-mix(in srgb, var(--color-inverse-surface) 88%, var(--color-black) 12%);
  --text-chat-body: color-mix(in srgb, var(--text-primary) 74%, var(--text-secondary) 26%);
  --text-chat-body-dark: color-mix(in oklab, var(--text-inverse) 74%, transparent);
  --text-field-icon-focus: var(--text-muted);
  --text-field-icon-focus-dark: color-mix(in oklab, var(--text-inverse) 64%, transparent);
  --text-field-focus: color-mix(in srgb, var(--text-primary) 68%, var(--text-secondary) 32%);
  --text-field-focus-dark: color-mix(in oklab, var(--text-inverse) 88%, transparent);
  --chat-dot-tint-alpha-base: 38%;
  --chat-dot-tint-alpha-close-base: 52%;
  --chat-dot-tint-alpha-dark: 48%;
  --chat-dot-tint-alpha-close-dark: 62%;
  --shadow-none: none;
  --shadow-soft: 0 8px 24px rgba(23, 22, 20, 0.08);
  --shadow-lifted: 0 12px 32px rgba(23, 22, 20, 0.12);
  --shadow-chat-panel:
    0 0 0 1px rgba(23, 22, 20, 0.1),
    0 24px 10px rgba(23, 22, 20, 0),
    0 16px 12px rgba(23, 22, 20, 0.04),
    0 8px 8px rgba(23, 22, 20, 0.07),
    0 3px 4px rgba(23, 22, 20, 0.09),
    0 1px 2px rgba(23, 22, 20, 0.12);
  --shadow-chat-dot-base:
    0 0 0 1px rgba(23, 22, 20, 0.1),
    0 24px 10px rgba(23, 22, 20, 0),
    0 14px 10px rgba(23, 22, 20, 0.04),
    0 6px 6px rgba(23, 22, 20, 0.08);
  --shadow-chat-panel-dark:
    0 0 0 1px rgba(247, 246, 239, 0.1),
    0 24px 10px rgba(0, 0, 0, 0),
    0 16px 12px rgba(0, 0, 0, 0.12),
    0 8px 8px rgba(0, 0, 0, 0.18),
    0 3px 4px rgba(0, 0, 0, 0.24),
    0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-chat-dot-base-dark:
    0 0 0 1px rgba(247, 246, 239, 0.1),
    0 24px 10px rgba(0, 0, 0, 0),
    0 14px 10px rgba(0, 0, 0, 0.12),
    0 6px 6px rgba(0, 0, 0, 0.2);
  --shadow-browser-frame:
    0 4px 10px rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.12),
    0 0 4px -1px rgba(0, 0, 0, 0.12);
  --motion-fast: 180ms ease;
  --motion-base: 220ms ease;
}

body {
  font-family: var(--default-font-family);
}

.work-buildlog-card {
  background-color: var(--bg-page);
  border-color: var(--border-soft);
}

.work-buildlog-vertex {
  background-color: var(--bg-page);
  border-color: var(--color-vertex-border);
}

.work-buildlog-divider {
  background-color: var(--border-soft);
}

.work-buildlog-media-placeholder {
  background-color: color-mix(in srgb, var(--text-primary) 5%, transparent);
}

@media (prefers-color-scheme: dark) {
  .work-buildlog-card {
    background-color: var(--color-vertex-surface-dark);
    border-color: var(--border-inverse-soft);
  }

  .work-buildlog-vertex {
    background-color: var(--color-vertex-surface-dark);
    border-color: var(--color-vertex-border-dark);
  }

  .work-buildlog-divider {
    background-color: var(--border-inverse-soft);
  }
}

.vertex-square {
  border: 1px solid var(--color-vertex-border);
  background: var(--bg-page);
}

html.dark .vertex-square {
  border-color: var(--color-vertex-border-dark);
  background: var(--color-vertex-surface-dark);
}