/* [next]/internal/font/google/geist_a71539c9.module.css [app-client] (css) */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/fef07dbb0973bf53-s.3p2_lha1f2xer.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/8a480f0b521d4e75-s.1qq4vpdcun5oj.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/53b9e256198e5412-s.390ncx5urfkfu.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7178b3e590c64307-s.21jp631_3pja2.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Fallback;
  src: local(Arial);
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0.0%;
  size-adjust: 104.76%;
}

.geist_a71539c9-module__T19VSG__className {
  font-family: Geist, Geist Fallback;
  font-style: normal;
}

.geist_a71539c9-module__T19VSG__variable {
  --font-geist-sans: "Geist", "Geist Fallback";
}

/* [next]/internal/font/google/geist_mono_8d43a2aa.module.css [app-client] (css) */
@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/5ce348bf30bf5439-s.31988l_ccedte.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/4fa387ec64143e14-s.2tuy5pz7dlieh.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/6306c77e7c8268e4-s.2dbetqa9o8jxf.woff2") format("woff2");
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7d817b4c03b0c5f1-s.1uyisp29ctx0d.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/bbc41e54d2fcbd21-s.1rgnod-3esatf.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/797e433ab948586e-s.p.0r6juujl39pe6.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Mono Fallback;
  src: local(Arial);
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

.geist_mono_8d43a2aa-module__8Li5zG__className {
  font-family: Geist Mono, Geist Mono Fallback;
  font-style: normal;
}

.geist_mono_8d43a2aa-module__8Li5zG__variable {
  --font-geist-mono: "Geist Mono", "Geist Mono Fallback";
}

/* [project]/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

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

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

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

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

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

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

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

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

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

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

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

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

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

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .table {
    display: table;
  }

  .h-full {
    height: 100%;
  }

  .min-h-full {
    min-height: 100%;
  }

  .grow {
    flex-grow: 1;
  }

  .flex-col {
    flex-direction: column;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

:root {
  --ink: #171a18;
  --muted: #5f6763;
  --paper: #fff;
  --cream: #f7f8f6;
  --line: #e2e6e3;
  --signal: #d64c2f;
  --signal-dark: #a83b25;
  --green: #245843;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: clip;
}

button, input, select {
  font: inherit;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  z-index: 20;
  background: #fffffff0;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 34px;
  display: flex;
  position: sticky;
  top: 0;
}

.brand {
  color: inherit;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  display: flex;
}

.brand > div:last-child {
  align-items: baseline;
  gap: 10px;
  display: flex;
}

.brand strong {
  letter-spacing: -.02em;
  font-family: Georgia, serif;
  font-size: 19px;
}

.brand span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 10px;
}

.logo-mark {
  justify-content: center;
  align-items: center;
  width: 29px;
  height: 29px;
  display: flex;
  position: relative;
}

.logo-mark span {
  background: var(--ink);
  transform-origin: 0;
  border-radius: 2px;
  width: 22px;
  height: 2px;
  position: absolute;
}

.logo-mark span:first-child {
  transform: translate(5px, -7px)rotate(42deg);
}

.logo-mark span:nth-child(2) {
  width: 17px;
  transform: translate(-2px);
}

.logo-mark span:nth-child(3) {
  transform: translate(5px, 7px)rotate(-42deg);
}

.topbar nav {
  align-items: center;
  gap: 28px;
  display: flex;
}

.topbar nav a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.topbar nav a.active {
  color: var(--ink);
}

.local-badge {
  color: #31553e;
  background: #e5eadf;
  border-radius: 99px;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 700;
}

.local-badge i {
  background: #52a46d;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  display: inline-block;
}

.product-loading {
  place-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 100vh;
  display: grid;
}

.product-loading span {
  background: var(--signal);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: 1s infinite alternate pulse;
}

.product-loading span:nth-child(2) {
  animation-delay: .2s;
}

.product-loading span:nth-child(3) {
  animation-delay: .4s;
}

.product-loading p {
  color: var(--muted);
  font-size: 12px;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.product-workspace {
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: calc(100vh - 64px);
  display: grid;
}

.workspace-column {
  min-width: 0;
}

.workspace-tabs {
  border-bottom: 1px solid var(--line);
  z-index: 15;
  background: #fffffff5;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 36px;
  display: flex;
  position: sticky;
  top: 64px;
}

.workspace-tabs > div {
  gap: 4px;
  display: grid;
}

.workspace-tabs > div span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 7px;
}

.workspace-tabs > div strong {
  font: 16px Georgia, serif;
}

.workspace-tabs nav {
  align-items: stretch;
  gap: 24px;
  height: 100%;
  display: flex;
}

.workspace-tabs button {
  color: var(--muted);
  text-transform: capitalize;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  padding: 0 2px;
  font-size: 9px;
  font-weight: 800;
}

.workspace-tabs button.active {
  color: var(--ink);
  border-bottom-color: var(--signal);
}

.product-sidebar {
  border-right: 1px solid var(--line);
  background: var(--cream);
  flex-direction: column;
  padding: 34px 20px 24px;
  display: flex;
}

.sidebar-title h1 {
  letter-spacing: -.035em;
  margin: 0;
  font: 400 28px / 1.05 Georgia, serif;
}

.product-list {
  gap: 3px;
  display: grid;
}

.product-list > button {
  text-align: left;
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  display: grid;
}

.product-monogram {
  text-transform: uppercase;
  opacity: .75;
  border: 1px solid;
  border-radius: 50%;
  place-content: center;
  width: 32px;
  height: 32px;
  font: 10px Georgia, serif;
  display: grid;
}

.product-identity {
  color: var(--ink);
  opacity: 1;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}

.product-identity b {
  font: inherit;
  z-index: -1;
  position: relative;
}

.product-list button div {
  gap: 4px;
  display: grid;
}

.product-list strong {
  font-size: 11px;
}

.product-list small {
  color: var(--muted);
  font-size: 8px;
}

.product-list b {
  font-weight: 400;
}

.refresh-products {
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  background: none;
  justify-content: space-between;
  margin-top: auto;
  padding: 11px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
}

.product-main {
  background: #fff;
  min-width: 0;
  padding: 42px 36px 75px;
}

.product-hero {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  padding-bottom: 30px;
  display: flex;
}

.product-hero h1 {
  letter-spacing: -.05em;
  margin: 0;
  font: 400 50px / .95 Georgia, serif;
}

.product-hero > div:first-child > p:last-child {
  max-width: 580px;
  color: var(--muted);
  margin: 15px 0 0;
  font-size: 13px;
}

.product-stats {
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
}

.product-stats div {
  border-right: 1px solid var(--line);
  gap: 3px;
  min-width: 80px;
  padding: 12px 15px;
  display: grid;
}

.product-stats div:last-child {
  border: 0;
}

.product-stats strong {
  font: 21px Georgia, serif;
}

.product-stats span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 7px;
}

.repo-filter {
  align-items: center;
  gap: 7px;
  padding: 17px 0 32px;
  display: flex;
}

.repo-filter > span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-right: 5px;
  font-size: 8px;
  font-weight: 800;
}

.repo-filter button {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  padding: 7px 10px;
  font-size: 9px;
}

.repo-filter button.active {
  border-color: var(--green);
  color: #fff;
  background: var(--green);
}

.initiative-map {
  margin-top: 8px;
}

.view-heading {
  justify-content: space-between;
  align-items: end;
  margin-bottom: 18px;
  display: flex;
}

.view-heading h2 {
  margin: 0;
  font: 400 28px Georgia, serif;
}

.view-heading > span {
  color: var(--muted);
  font-size: 9px;
}

.initiative-lanes {
  border-top: 1px solid var(--line);
}

.initiative-lane {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  grid-template-columns: 250px 1fr;
  gap: 25px;
  padding: 20px 0;
  display: grid;
}

.initiative-lane.active {
  box-shadow: inset 3px 0 var(--signal);
  background: #ffffff40;
  padding-left: 15px;
  padding-right: 15px;
}

.initiative-info > span {
  color: var(--signal-dark);
  font: 9px Georgia, serif;
}

.initiative-info h3 {
  margin: 8px 0 7px;
  font: 400 19px Georgia, serif;
}

.initiative-info p {
  color: var(--muted);
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
}

.feature-nodes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.feature-nodes button {
  border: 1px solid var(--line);
  text-align: left;
  background: var(--paper);
  min-height: 74px;
  color: var(--ink);
  cursor: pointer;
  grid-template-columns: 8px 1fr;
  column-gap: 9px;
  padding: 12px;
  display: grid;
}

.feature-nodes button.active {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}

.feature-nodes i {
  background: var(--signal);
  border-radius: 50%;
  grid-row: span 2;
  width: 7px;
  height: 7px;
  margin-top: 2px;
}

.feature-nodes strong {
  font-size: 10px;
}

.feature-nodes small {
  color: var(--muted);
  font-size: 8px;
}

.feature-detail {
  border: 1px solid var(--line);
  background: #faf9f4f0;
  grid-template-columns: .9fr 1.1fr;
  margin-top: 45px;
  display: grid;
}

.feature-summary {
  border-right: 1px solid var(--line);
  padding: 30px;
}

.feature-status {
  align-items: center;
  gap: 9px;
  display: flex;
}

.feature-status span {
  color: var(--green);
  text-transform: uppercase;
  background: #e0e9df;
  border-radius: 99px;
  padding: 5px 7px;
  font-size: 7px;
  font-weight: 900;
}

.feature-status em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.feature-summary h2 {
  margin: 25px 0 10px;
  font: 400 30px / 1.04 Georgia, serif;
}

.feature-summary > p {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.feature-evidence {
  padding: 25px;
}

.feature-evidence > span {
  color: var(--signal-dark);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 10px;
  font-size: 8px;
  font-weight: 800;
  display: block;
}

.feature-evidence > div {
  border-top: 1px solid var(--line);
  grid-template-columns: 58px 1fr auto;
  gap: 10px;
  padding: 10px 0;
  display: grid;
}

.feature-evidence code {
  color: var(--signal-dark);
  font-size: 9px;
}

.feature-evidence p {
  margin: 0;
  font-size: 9px;
}

.feature-evidence em {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 7px;
  font-style: normal;
}

.collateral-studio {
  border: 1px solid var(--line);
  background: var(--ink);
  color: #f7f4ed;
  margin-top: 22px;
  padding: 30px;
}

.studio-heading {
  justify-content: space-between;
  align-items: start;
  margin-bottom: 25px;
  display: flex;
}

.studio-heading h2 {
  margin: 0;
  font: 400 29px Georgia, serif;
}

.draft-badge {
  color: #abb5b0;
  text-transform: uppercase;
  letter-spacing: .09em;
  border: 1px solid #fff3;
  border-radius: 99px;
  padding: 7px 9px;
  font-size: 7px;
}

.studio-grid {
  grid-template-columns: .85fr 1.15fr;
  gap: 20px;
  display: grid;
}

.capture-stage, .copy-stage {
  min-width: 0;
}

.capture-placeholder {
  aspect-ratio: 16 / 10;
  background: #26312c;
  border: 1px solid #ffffff29;
  flex-direction: column;
  display: flex;
}

.capture-browser {
  border-bottom: 1px solid #ffffff1a;
  gap: 4px;
  height: 24px;
  padding: 9px;
  display: flex;
}

.capture-browser i {
  background: #65706b;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.capture-target {
  color: #9da8a2;
  flex: 1;
  place-content: center;
  justify-items: center;
  gap: 7px;
  display: grid;
}

.capture-target span {
  border: 1px dashed #69756f;
  border-radius: 50%;
  place-content: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.capture-target strong {
  color: #dce1de;
  font-size: 10px;
}

.capture-target small {
  font-size: 8px;
}

.capture-brief {
  border: 1px solid #ffffff1f;
  border-top: 0;
  padding: 12px;
}

.capture-brief span {
  color: #e4876e;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 7px;
}

.capture-brief p {
  color: #aeb7b2;
  margin: 6px 0 0;
  font-size: 9px;
  line-height: 1.5;
}

.channel-tabs {
  gap: 5px;
  margin-bottom: 8px;
  display: flex;
}

.channel-tabs button {
  color: #8e9993;
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff26;
  padding: 8px 10px;
  font-size: 8px;
}

.channel-tabs button.active {
  color: var(--ink);
  background: #f4f1e8;
}

.copy-stage textarea {
  resize: vertical;
  color: #f3f0e8;
  background: #202a25;
  border: 1px solid #ffffff26;
  outline: none;
  width: 100%;
  min-height: 210px;
  padding: 18px;
  font: 13px / 1.7 Georgia, serif;
}

.copy-meta {
  color: #7e8b84;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  font-size: 8px;
  display: flex;
}

.copy-meta button {
  color: #69756f;
  background: none;
  border: 1px solid #ffffff1f;
  margin-left: auto;
  padding: 7px 9px;
  font-size: 7px;
}

.release-dashboard {
  max-width: 1440px;
  margin: 0 auto;
  padding: 58px 42px 70px;
}

.release-index-header {
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 42px;
  display: flex;
}

.release-index-header h1 {
  letter-spacing: -.052em;
  margin: 0;
  font: 400 54px / .98 Georgia, serif;
}

.release-index-header > div:first-child > p:last-child {
  max-width: 610px;
  color: var(--muted);
  margin: 19px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.release-index-actions {
  border: 1px solid var(--line);
  background: #faf9f4b8;
  align-items: stretch;
  display: flex;
}

.release-index-actions > div {
  border-right: 1px solid var(--line);
  gap: 3px;
  min-width: 76px;
  padding: 13px 16px;
  display: grid;
}

.release-index-actions strong {
  font: 20px Georgia, serif;
}

.release-index-actions > div span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 8px;
}

.release-index-actions button {
  background: var(--green);
  color: #fff;
  cursor: pointer;
  border: 0;
  min-width: 112px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 800;
}

.release-index-actions button span {
  margin-left: 7px;
}

.release-index-actions button:disabled {
  opacity: .6;
  cursor: wait;
}

.release-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.release-card {
  text-align: left;
  min-height: 250px;
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
  background: #faf9f4d1;
  flex-direction: column;
  padding: 22px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  display: flex;
}

.release-card:hover {
  border-color: #aaa89f;
  transform: translateY(-2px);
  box-shadow: 0 15px 30px #202a250f;
}

.release-card.active {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}

.release-card-meta {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .11em;
  justify-content: space-between;
  gap: 15px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
}

.release-card-meta span {
  color: var(--signal-dark);
}

.release-card h2 {
  letter-spacing: -.025em;
  margin: 30px 0 11px;
  font: 400 23px / 1.08 Georgia, serif;
}

.release-card > p {
  color: var(--muted);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0 0 22px;
  font-size: 11px;
  line-height: 1.55;
  display: -webkit-box;
  overflow: hidden;
}

.release-card-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 9px;
  display: flex;
}

.release-card-footer b {
  color: var(--ink);
  margin-left: auto;
  font-size: 14px;
}

.category-pill {
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #e5e8df;
  border-radius: 99px;
  padding: 5px 7px;
  font-size: 7px;
  font-weight: 900;
}

.category-fix, .category-security {
  color: #9c3f28;
  background: #f1ddd6;
}

.category-design {
  color: #704c82;
  background: #e9dfef;
}

.category-performance {
  color: #356873;
  background: #dbe8ea;
}

.release-card-loading {
  cursor: wait;
}

.release-card-loading i {
  background: linear-gradient(90deg, #e7e4da 25%, #f5f3ec 50%, #e7e4da 75%) 0 0 / 200% 100%;
  height: 12px;
  margin-bottom: 20px;
  animation: 1.2s infinite shimmer;
}

.release-card-loading i:nth-child(2) {
  width: 78%;
  height: 34px;
  margin-top: 22px;
}

.release-card-loading i:nth-child(3) {
  width: 92%;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.feed-error, .feed-warning {
  color: #843b28;
  background: #f4e3dd;
  border: 1px solid #dbb6aa;
  margin: 0 0 14px;
  padding: 13px 15px;
  font-size: 11px;
}

.feed-warning {
  color: #6d5b21;
  background: #f3edd9;
  border-color: #d9cfaa;
}

.release-detail {
  border-top: 1px solid var(--line);
  margin-top: 72px;
  padding-top: 34px;
}

.release-detail-heading {
  justify-content: space-between;
  align-items: end;
  gap: 25px;
  margin-bottom: 22px;
  display: flex;
}

.release-detail-heading h2 {
  letter-spacing: -.035em;
  margin: 0;
  font: 400 35px Georgia, serif;
}

.release-detail-heading code {
  max-width: 55%;
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: 10px;
}

.release-feed-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  margin-top: 44px;
  padding: 18px 0;
  display: grid;
}

.release-feed-footer span {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 8px;
  font-weight: 800;
}

.release-feed-footer code {
  font-size: 9px;
}

.release-feed-footer p {
  margin: 0;
  font-size: 9px;
}

.workspace {
  grid-template-columns: 340px 1fr;
  min-height: calc(100vh - 76px);
  display: grid;
}

.control-rail {
  border-right: 1px solid var(--line);
  background: var(--cream);
  flex-direction: column;
  gap: 29px;
  padding: 48px 32px 30px;
  display: flex;
}

.eyebrow {
  color: var(--signal-dark);
  text-transform: uppercase;
  letter-spacing: .17em;
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 800;
}

.control-rail h1 {
  letter-spacing: -.035em;
  margin: 0;
  font: 400 34px / 1.05 Georgia, serif;
}

.rail-intro {
  color: var(--muted);
  margin: 13px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.control-rail label {
  gap: 9px;
  display: grid;
}

.control-rail label > span {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  font-weight: 800;
}

.control-rail small {
  color: #8d938f;
  text-transform: none;
  letter-spacing: 0;
  float: right;
  font-weight: 500;
}

.control-rail select, .control-rail input {
  width: 100%;
  color: var(--ink);
  background: #faf9f4;
  border: 1px solid #cbc8bd;
  border-radius: 4px;
  outline: none;
  padding: 12px 13px;
  font-size: 13px;
}

.control-rail select:focus, .control-rail input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #214d3b14;
}

.analyze-button {
  color: #fff;
  background: var(--green);
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  justify-content: space-between;
  padding: 14px 15px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  box-shadow: 0 7px 18px #214d3b29;
}

.analyze-button:hover:not(:disabled) {
  background: #183d2e;
  transform: translateY(-1px);
}

.analyze-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.error-message {
  color: #a03422;
  margin: -15px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.root-note {
  border-top: 1px solid var(--line);
  gap: 7px;
  padding-top: 20px;
  display: grid;
}

.root-note span {
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .13em;
  font-size: 9px;
  font-weight: 800;
}

.root-note code {
  color: #5c6661;
  overflow-wrap: anywhere;
  font-size: 10px;
}

.privacy-note {
  background: #ffffff59;
  border: 1px solid #d7d2c5;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  padding: 14px;
  display: flex;
}

.privacy-note > span {
  color: var(--signal);
}

.privacy-note p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.privacy-note strong {
  color: var(--ink);
}

.canvas {
  background-image: radial-gradient(#d9d6cd .7px, #0000 .7px);
  background-size: 17px 17px;
  min-width: 0;
  padding: 42px;
}

.empty-state {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 760px;
  min-height: calc(100vh - 160px);
  margin: auto;
  display: flex;
}

.signal-orbit {
  place-items: center;
  width: 142px;
  height: 142px;
  margin-bottom: 35px;
  display: grid;
  position: relative;
}

.orbit {
  border: 1px solid #c7c3b8;
  border-radius: 50%;
  position: absolute;
}

.orbit-one {
  width: 95px;
  height: 95px;
}

.orbit-two {
  width: 142px;
  height: 55px;
  transform: rotate(-28deg);
}

.signal-core {
  background: var(--signal);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 8px #f15a381c, 0 0 35px #f15a3859;
}

.empty-state h2 {
  letter-spacing: -.05em;
  max-width: 520px;
  margin: 0;
  font: 400 52px / .98 Georgia, serif;
}

.empty-state > p:not(.eyebrow) {
  max-width: 575px;
  color: var(--muted);
  margin: 21px auto 38px;
  font-size: 15px;
  line-height: 1.65;
}

.pipeline-preview {
  border: 1px solid var(--line);
  background: #faf9f4ad;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  display: grid;
}

.pipeline-step {
  text-align: left;
  border-right: 1px solid var(--line);
  gap: 8px;
  padding: 17px;
  display: grid;
}

.pipeline-step:last-child {
  border-right: 0;
}

.pipeline-step span {
  color: var(--signal-dark);
  font: 11px Georgia, serif;
}

.pipeline-step strong {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}

.analysis-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, .8fr);
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
}

.panel {
  border: 1px solid var(--line);
  background: #faf9f4ed;
  padding: 26px;
  box-shadow: 0 14px 35px #202a250b;
}

.release-hero {
  background: var(--ink);
  color: #f8f5ed;
  grid-column: 1 / -1;
  padding: 36px;
  position: relative;
  overflow: hidden;
}

.release-hero:after {
  content: "";
  border: 1px solid #ffffff14;
  border-radius: 50%;
  width: 280px;
  height: 280px;
  position: absolute;
  top: -150px;
  right: -80px;
  box-shadow: 0 0 0 45px #ffffff06, 0 0 0 90px #ffffff05;
}

.panel-kicker {
  color: #a9b2ad;
  text-transform: uppercase;
  letter-spacing: .12em;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
}

.status-dot {
  background: var(--signal);
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.range-chip {
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid #ffffff29;
  margin-left: auto;
  padding: 6px 9px;
  font-family: monospace;
}

.release-hero h2 {
  letter-spacing: -.04em;
  z-index: 1;
  max-width: 800px;
  margin: 28px 0 14px;
  font: 400 43px / 1.04 Georgia, serif;
  position: relative;
}

.release-hero > p {
  color: #b7c0bb;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
}

.stat-row {
  z-index: 1;
  gap: 42px;
  margin-top: 38px;
  display: flex;
  position: relative;
}

.stat-row div {
  gap: 5px;
  display: grid;
}

.stat-row strong {
  font: 25px Georgia, serif;
}

.stat-row span {
  color: #8f9994;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
}

.stat-row .positive {
  color: #7fba91;
}

.stat-row .negative {
  color: #e58b75;
}

.highlights-panel, .evidence-panel, .category-panel {
  min-width: 0;
}

.evidence-panel {
  grid-column: 1;
}

.category-panel {
  grid-area: 2 / 2 / span 2;
}

.section-heading {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 23px;
  display: flex;
}

.section-heading span {
  color: var(--signal-dark);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 9px;
  font-weight: 800;
}

.section-heading h3 {
  letter-spacing: -.025em;
  margin: 5px 0 0;
  font: 400 24px Georgia, serif;
}

.section-heading button {
  border: 1px solid var(--line);
  color: #a6aaa7;
  background: none;
  border-radius: 99px;
  padding: 7px 10px;
  font-size: 9px;
}

.highlight-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.highlight-list li {
  border-top: 1px solid var(--line);
  grid-template-columns: 34px 1fr;
  align-items: start;
  padding: 14px 0;
  display: grid;
}

.highlight-list li span {
  color: var(--signal-dark);
  padding-top: 2px;
  font: 11px Georgia, serif;
}

.highlight-list p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.branch-chip {
  border: 1px solid var(--line);
  padding: 6px 9px;
  font-family: monospace;
  color: var(--muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.commit-list {
  display: grid;
}

.commit-list article {
  border-top: 1px solid var(--line);
  grid-template-columns: 65px 1fr auto;
  align-items: start;
  gap: 13px;
  padding: 13px 0;
  display: grid;
}

.commit-list code {
  color: var(--signal-dark);
  font-size: 10px;
}

.commit-list article div {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.commit-list strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}

.commit-list article div span {
  color: var(--muted);
  font-size: 10px;
}

.commit-list em {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
  font-style: normal;
}

.category-list {
  gap: 16px;
  display: grid;
}

.category-list > div {
  grid-template-columns: 82px 1fr 20px;
  align-items: center;
  gap: 10px;
  display: grid;
}

.category-list span {
  text-transform: capitalize;
  font-size: 11px;
}

.category-list > div > div {
  background: #dfddd4;
  height: 3px;
}

.category-list i {
  background: var(--signal);
  height: 3px;
  display: block;
}

.category-list strong {
  text-align: right;
  font: 13px Georgia, serif;
}

.next-stage {
  border: 1px solid var(--line);
  background: #eeece3;
  gap: 6px;
  margin-top: 30px;
  padding: 20px;
  display: grid;
}

.next-stage span {
  color: var(--signal-dark);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 8px;
  font-weight: 800;
}

.next-stage strong {
  font: 19px Georgia, serif;
}

.next-stage p {
  color: var(--muted);
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .product-workspace {
    grid-template-columns: 1fr;
  }

  .product-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .product-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .refresh-products {
    margin-top: 20px;
  }

  .initiative-lane, .studio-grid {
    grid-template-columns: 1fr;
  }

  .release-index-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .release-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .control-rail {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .privacy-note {
    margin-top: 0;
  }

  .analysis-grid {
    grid-template-columns: 1fr;
  }

  .release-hero, .evidence-panel, .category-panel {
    grid-area: auto / 1;
  }
}

@media (max-width: 620px) {
  .topbar {
    padding: 0 18px;
  }

  .topbar nav a, .brand > div:last-child span {
    display: none;
  }

  .product-main {
    padding: 32px 18px 60px;
  }

  .product-list {
    grid-template-columns: 1fr;
  }

  .product-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-hero h1 {
    font-size: 41px;
  }

  .product-stats {
    width: 100%;
  }

  .product-stats div {
    flex: 1;
    min-width: 0;
  }

  .repo-filter {
    overflow-x: auto;
  }

  .repo-filter button {
    white-space: nowrap;
  }

  .feature-nodes, .feature-detail {
    grid-template-columns: 1fr;
  }

  .feature-summary {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .collateral-studio {
    padding: 22px 16px;
  }

  .studio-heading {
    flex-direction: column;
    gap: 12px;
  }

  .release-dashboard {
    padding: 38px 18px 60px;
  }

  .release-index-header h1 {
    font-size: 40px;
  }

  .release-index-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .release-index-actions > div {
    flex: 1;
  }

  .release-index-actions button {
    width: 100%;
    min-height: 42px;
  }

  .release-card-grid {
    grid-template-columns: 1fr;
  }

  .release-detail {
    margin-top: 50px;
  }

  .release-detail-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .release-detail-heading code {
    max-width: 100%;
  }

  .release-feed-footer {
    grid-template-columns: 1fr;
  }

  .canvas, .control-rail {
    padding: 28px 20px;
  }

  .empty-state h2 {
    font-size: 40px;
  }

  .pipeline-preview {
    grid-template-columns: 1fr 1fr;
  }

  .pipeline-step:nth-child(2) {
    border-right: 0;
  }

  .pipeline-step:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .release-hero {
    padding: 27px;
  }

  .release-hero h2 {
    font-size: 34px;
  }

  .stat-row {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    display: grid;
  }
}

.docs-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 70px 30px 100px;
}

.docs-back {
  color: var(--ink);
  margin-bottom: 70px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
}

.docs-page > h1 {
  letter-spacing: -.05em;
  margin: 0;
  font: 400 58px / .97 Georgia, serif;
}

.docs-lead {
  max-width: 590px;
  color: var(--muted);
  margin: 22px 0 50px;
  font-size: 15px;
  line-height: 1.65;
}

.docs-grid {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.docs-grid article {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #faf9f4a6;
  min-height: 220px;
  padding: 26px;
}

.docs-grid article > span {
  color: var(--signal-dark);
  font: 11px Georgia, serif;
}

.docs-grid h2 {
  margin: 30px 0 9px;
  font: 400 23px Georgia, serif;
}

.docs-grid p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.docs-grid code {
  color: #7c837f;
  margin-top: 22px;
  font-size: 10px;
  display: block;
}

@media (max-width: 620px) {
  .docs-page > h1 {
    font-size: 43px;
  }

  .docs-grid {
    grid-template-columns: 1fr;
  }
}

.topbar nav button {
  height: 100%;
  color: var(--muted);
  text-transform: capitalize;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  padding: 0 2px;
  font-size: 10px;
}

.topbar nav button:hover, .topbar nav button.active {
  color: var(--ink);
  border-bottom-color: var(--signal);
}

.social-view {
  min-width: 0;
}

.social-hero {
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 34px;
  display: flex;
}

.social-hero h1 {
  letter-spacing: -.05em;
  max-width: 670px;
  margin: 0;
  font: 400 51px / .98 Georgia, serif;
}

.social-hero > div > p:last-child {
  max-width: 650px;
  color: var(--muted);
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

.queue-summary {
  border: 1px solid var(--line);
  background: #ffffff59;
  grid-template-columns: auto 1fr;
  gap: 6px 11px;
  min-width: 210px;
  padding: 17px;
  display: grid;
}

.queue-summary strong {
  font: 20px Georgia, serif;
}

.queue-summary span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  align-self: center;
  font-size: 8px;
}

.panel-title {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  display: flex;
}

.panel-title span {
  color: var(--signal-dark);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 8px;
}

.panel-title b {
  font: 14px Georgia, serif;
}

.planner-grid {
  grid-template-columns: 245px minmax(420px, 1fr) 290px;
  align-items: start;
  gap: 14px;
  display: grid;
}

.campaign-list, .composer, .post-preview, .upcoming-table, .account-cards, .connector-catalog {
  border: 1px solid var(--line);
  background: #faf9f4e0;
}

.campaign-list > button {
  border: 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: none;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  display: grid;
}

.variant-stack {
  align-items: center;
  width: 34px;
  display: flex;
}

.variant-stack .platform-mark {
  border: 2px solid var(--paper);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin-right: -12px;
  font-size: 7px;
}

.variant-stack .platform-mark:last-child {
  margin-right: 0;
}

.variant-tabs {
  border-bottom: 1px solid var(--line);
  gap: 7px;
  padding: 12px 20px;
  display: flex;
  overflow-x: auto;
}

.variant-tabs button {
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  background: none;
  align-items: center;
  gap: 6px;
  padding: 6px 9px 6px 6px;
  font-size: 8px;
  display: flex;
}

.variant-tabs button.active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.variant-tabs .platform-mark {
  border-radius: 5px;
  width: 20px;
  height: 20px;
  font-size: 7px;
}

.campaign-list > button:hover, .campaign-list > button.active {
  background: #e9e6dc;
}

.campaign-list > button.active {
  box-shadow: inset 3px 0 var(--signal);
}

.campaign-list button div {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.campaign-list button strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.campaign-list button small, .campaign-list time {
  color: var(--muted);
  text-transform: capitalize;
  font-size: 7px;
}

.campaign-list time {
  font-style: normal;
}

.platform-mark {
  color: #fff;
  background: #24342d;
  border-radius: 7px;
  place-content: center;
  width: 26px;
  height: 26px;
  font: 10px Georgia, serif;
  display: grid;
}

.platform-mark.instagram {
  background: #9d416d;
}

.platform-mark.linkedin {
  background: #28699a;
}

.platform-mark.threads {
  background: #111;
}

.platform-mark.x {
  background: #333;
}

.platform-mark.bluesky {
  background: #2585d9;
}

.platform-mark.tiktok {
  background: #111;
  box-shadow: inset 2px 0 #25f4ee, inset -2px 0 #fe2c55;
}

.composer {
  padding-bottom: 18px;
}

.composer-top {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  display: flex;
}

.composer-top span, .destination-row span, .copy-editor > span, .schedule-row label span {
  color: var(--signal-dark);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 7px;
  font-weight: 800;
  display: block;
}

.composer-top h2 {
  margin: 7px 0 0;
  font: 24px / 1.05 Georgia, serif;
}

.composer select, .composer input {
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fffdf7;
  outline: none;
  padding: 9px;
  font-size: 9px;
}

.destination-row {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 15px;
  padding: 16px 20px;
  display: grid;
}

.destination-row label {
  gap: 7px;
  display: grid;
}

.destination-row > div {
  gap: 8px;
  display: grid;
}

.connection-demo {
  color: #557064;
  text-transform: capitalize;
  font-size: 8px;
  font-weight: 700;
}

.connection-demo i {
  background: #6a9a77;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  display: inline-block;
}

.copy-editor {
  gap: 8px;
  padding: 19px 20px;
  display: grid;
  position: relative;
}

.copy-editor textarea {
  resize: vertical;
  border: 1px solid var(--line);
  width: 100%;
  min-height: 150px;
  color: var(--ink);
  background: #fffdf7;
  outline: none;
  padding: 15px;
  font: 13px / 1.55 Georgia, serif;
}

.copy-editor small {
  color: var(--muted);
  font-size: 8px;
  position: absolute;
  bottom: 28px;
  right: 29px;
}

.copy-editor small.over {
  color: #ac3623;
  font-weight: 800;
}

.media-row {
  align-items: stretch;
  gap: 9px;
  padding: 0 20px 18px;
  display: flex;
  overflow-x: auto;
}

.media-thumb, .media-asset {
  border: 1px dashed #c5c2b8;
  flex: 0 0 110px;
  place-content: center;
  justify-items: center;
  gap: 4px;
  min-height: 82px;
  display: grid;
}

.media-thumb span {
  font-size: 18px;
}

.media-thumb small, .media-asset small {
  color: var(--muted);
  font-size: 7px;
}

.media-asset {
  border-style: solid;
  flex-basis: 155px;
  place-content: stretch;
  justify-items: stretch;
  padding: 8px;
}

.media-asset strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 8px;
  font-size: 8px;
  overflow: hidden;
}

.mini-browser {
  background: #dfe3dd;
  gap: 3px;
  height: 38px;
  padding: 5px;
  display: flex;
}

.mini-browser i {
  background: #7c8b83;
  border-radius: 50%;
  width: 4px;
  height: 4px;
}

.media-row > button {
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  background: none;
  flex: 0 0 76px;
  font-size: 8px;
}

.schedule-row {
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(170px, 1fr) 1fr auto;
  align-items: end;
  gap: 15px;
  margin: 0 20px;
  padding-top: 17px;
  display: grid;
}

.schedule-row label {
  gap: 7px;
  display: grid;
}

.approval-note {
  gap: 4px;
  display: grid;
}

.approval-note span {
  font-size: 9px;
  font-weight: 800;
}

.approval-note small {
  color: var(--muted);
  font-size: 7px;
}

.schedule-row > button, .primary-action {
  background: var(--green);
  color: #fff;
  cursor: pointer;
  border: 0;
  padding: 11px 14px;
  font-size: 9px;
  font-weight: 800;
}

.schedule-row > button:disabled, .primary-action:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.post-preview {
  padding: 16px;
}

.preview-label {
  justify-content: space-between;
  margin-bottom: 14px;
  display: flex;
}

.preview-label span {
  color: var(--signal-dark);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 8px;
}

.preview-label b {
  font-size: 9px;
}

.social-card {
  color: #171717;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

.social-card header {
  align-items: center;
  gap: 8px;
  padding: 12px;
  display: flex;
}

.social-card header > i {
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  place-content: center;
  width: 30px;
  height: 30px;
  font: 9px Georgia, serif;
  display: grid;
}

.social-card header div {
  gap: 2px;
  display: grid;
}

.social-card header strong {
  font-size: 9px;
}

.social-card header small {
  color: #777;
  font-size: 7px;
}

.social-card header > b {
  margin-left: auto;
  font-size: 9px;
}

.social-card > p {
  white-space: pre-wrap;
  margin: 0;
  padding: 0 12px 13px;
  font-size: 10px;
  line-height: 1.45;
}

.preview-media {
  aspect-ratio: 1.25;
  background: #dde2dc;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  display: flex;
}

.preview-media strong {
  font: 18px / 1.05 Georgia, serif;
}

.preview-media > span {
  color: #657069;
  text-transform: uppercase;
  margin-top: 4px;
  font-size: 7px;
}

.preview-window {
  gap: 3px;
  margin-bottom: auto;
  display: flex;
}

.preview-window i {
  background: #7c8881;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.social-card footer {
  color: #555;
  border-top: 1px solid #eee;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 12px;
  display: flex;
}

.post-preview > p {
  color: var(--muted);
  font-size: 7px;
  line-height: 1.45;
}

.calendar-legend {
  gap: 14px;
  padding-bottom: 5px;
  display: flex;
}

.calendar-legend span {
  color: var(--muted);
  font-size: 8px;
}

.calendar-legend i {
  background: #728b79;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  display: inline-block;
}

.calendar-legend i.review {
  background: #d08958;
}

.calendar-legend i.published {
  background: #476e99;
}

.week-grid {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  display: grid;
  overflow-x: auto;
}

.week-grid > article {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #faf9f4b3;
  min-height: 265px;
}

.week-grid article > header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  padding: 12px;
  display: flex;
}

.week-grid article > header span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 8px;
}

.week-grid article > header strong {
  font: 17px Georgia, serif;
}

.week-grid article > div {
  padding: 6px;
}

.week-grid article > div > button {
  width: 100%;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: #e2e8e1;
  border: 0;
  border-left: 3px solid #668573;
  gap: 5px;
  margin-bottom: 6px;
  padding: 9px;
  display: grid;
}

.week-grid button.review {
  background: #f0e2d6;
  border-color: #ce8052;
}

.week-grid button.published {
  background: #dde6ef;
  border-color: #416d99;
}

.week-grid button small, .week-grid button span {
  color: var(--muted);
  font-size: 7px;
}

.week-grid button strong {
  font-size: 8px;
  line-height: 1.35;
}

.week-grid article > div > p {
  color: #aaa9a3;
  text-align: center;
  font-size: 8px;
}

.upcoming-table {
  margin-top: 20px;
}

.upcoming-table > div:not(.panel-title) {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 28px minmax(0, 1fr) 180px 70px;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  display: grid;
}

.upcoming-table strong {
  font-size: 9px;
}

.upcoming-table strong small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 7px;
  font-weight: normal;
  display: block;
}

.upcoming-table span {
  color: var(--muted);
  font-size: 8px;
}

.upcoming-table em {
  text-transform: uppercase;
  font-size: 7px;
  font-style: normal;
}

.simulation-note {
  color: var(--muted);
  font-size: 8px;
}

.accounts-layout {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  display: grid;
}

.account-cards article, .connector-catalog article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 30px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  display: grid;
}

.account-cards article > div, .connector-catalog article > div {
  gap: 3px;
  display: grid;
}

.account-cards article strong, .connector-catalog article strong {
  font-size: 9px;
}

.account-cards article span, .connector-catalog article span {
  color: var(--muted);
  font-size: 7px;
}

.account-cards article > em, .connector-catalog article > em {
  color: var(--muted);
  text-transform: capitalize;
  font-size: 7px;
  font-style: normal;
}

.account-cards label {
  white-space: nowrap;
  font-size: 7px;
}

.connector-catalog article {
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
}

.connector-catalog article > b {
  text-align: right;
  text-transform: capitalize;
  max-width: 75px;
  font-size: 7px;
}

.ownership-guide {
  border: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  display: grid;
}

.ownership-guide div {
  border-right: 1px solid var(--line);
  padding: 19px;
}

.ownership-guide div:last-child {
  border: 0;
}

.ownership-guide span {
  color: var(--signal-dark);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 7px;
}

.ownership-guide strong {
  margin-top: 16px;
  font: 18px Georgia, serif;
  display: block;
}

.ownership-guide p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 8px;
  line-height: 1.5;
}

.empty-panel {
  text-align: center;
  place-content: center;
  justify-items: center;
  min-height: 400px;
  display: grid;
}

.empty-panel h2 {
  margin: 20px 0 8px;
  font: 28px Georgia, serif;
}

.empty-panel p {
  color: var(--muted);
  font-size: 11px;
}

.brand-grid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  display: grid;
}

.brand-card {
  border: 1px solid var(--line);
  background: #faf9f4e0;
  min-height: 250px;
  padding: 26px;
}

.brand-card > span {
  color: var(--signal-dark);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 8px;
  font-weight: 800;
}

.brand-card h2 {
  margin: 35px 0 12px;
  font: 30px Georgia, serif;
}

.brand-card p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.brand-voice > div {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 25px;
  display: flex;
}

.brand-voice em {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 10px;
  font-size: 8px;
  font-style: normal;
}

.color-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
  display: grid;
}

.color-grid div {
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 4px 10px;
  display: grid;
}

.color-grid i {
  border: 1px solid #0000001f;
  grid-row: span 2;
  width: 48px;
  height: 48px;
}

.color-grid strong {
  font-size: 9px;
}

.color-grid code {
  color: var(--muted);
  font-size: 8px;
}

.type-sample {
  margin: 35px 0 18px;
  font-size: 36px;
  line-height: 1.05;
}

.asset-ideas {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 25px;
  display: grid;
}

.asset-ideas div {
  border: 1px solid var(--line);
  gap: 5px;
  min-height: 80px;
  padding: 12px;
  display: grid;
}

.asset-ideas i {
  color: var(--signal-dark);
  font: 8px Georgia, serif;
}

.asset-ideas strong {
  font-size: 9px;
}

.asset-ideas small {
  color: var(--muted);
  font-size: 7px;
}

.portfolio-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  display: grid;
}

.portfolio-grid article {
  border: 1px solid var(--line);
  background: #faf9f4e0;
  grid-template-columns: 40px 1fr auto;
  align-items: start;
  gap: 15px;
  padding: 20px;
  display: grid;
}

.portfolio-grid h2 {
  margin: 2px 0 7px;
  font: 20px Georgia, serif;
}

.portfolio-grid p {
  color: var(--muted);
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
}

.mini-palette {
  display: flex;
}

.mini-palette i {
  width: 9px;
  height: 34px;
}

.brand-studio {
  border: 1px solid var(--line);
  background: var(--paper);
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: calc(100vh - 232px);
  display: grid;
  overflow: hidden;
}

.brand-reference {
  border-right: 1px solid var(--line);
  background: #f2efe6;
  flex-direction: column;
  gap: 24px;
  padding: 24px 18px;
  display: flex;
}

.brand-reference h1 {
  margin: 5px 0 10px;
  font: 28px Georgia, serif;
}

.brand-reference p {
  color: var(--muted);
  margin: 0;
  font-size: 9px;
  line-height: 1.6;
}

.brand-reference section {
  gap: 7px;
  display: grid;
}

.brand-reference section > span {
  color: var(--signal-dark);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 3px;
  font-size: 7px;
  font-weight: 800;
}

.brand-reference section > strong {
  font: 14px Georgia, serif;
}

.brand-reference section > small {
  color: var(--muted);
  font-size: 7px;
}

.brand-studio-colors {
  gap: 5px;
  display: grid;
}

.brand-studio-colors button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 4px;
  display: grid;
}

.brand-studio-colors button:hover {
  border-color: var(--line);
  background: #fff;
}

.brand-studio-colors i {
  border: 1px solid #0000001f;
  width: 25px;
  height: 25px;
}

.brand-studio-colors strong {
  font-size: 8px;
}

.brand-studio-colors code {
  color: var(--muted);
  font-size: 7px;
}

.brand-studio-traits {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.brand-studio-traits em {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 6px;
  font-size: 7px;
  font-style: normal;
}

.penpot-workspace {
  background: #18181b;
  grid-template-rows: 54px minmax(0, 1fr);
  min-width: 0;
  min-height: 680px;
  display: grid;
}

.penpot-workspace > header {
  color: #fff;
  border-bottom: 1px solid #34343a;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 0 14px;
  display: flex;
}

.penpot-workspace > header > div {
  gap: 3px;
  display: grid;
}

.penpot-workspace > header strong {
  font-size: 9px;
}

.penpot-status {
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 7px;
}

.penpot-status i {
  background: #71717a;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  display: inline-block;
}

.penpot-status.online i {
  background: #6ee7a8;
  box-shadow: 0 0 0 3px #6ee7a81a;
}

.penpot-workspace nav {
  gap: 7px;
  display: flex;
}

.penpot-workspace nav button, .penpot-workspace nav a {
  color: #d4d4d8;
  cursor: pointer;
  background: none;
  border: 1px solid #3f3f46;
  padding: 7px 9px;
  font-size: 7px;
  text-decoration: none;
}

.penpot-workspace nav a {
  color: #111;
  background: #7efff5;
  border-color: #7efff5;
}

.penpot-workspace iframe {
  background: #18181b;
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 680px;
}

.penpot-offline {
  color: #f4f4f5;
  text-align: center;
  place-content: center;
  justify-items: center;
  gap: 12px;
  display: grid;
}

.penpot-offline h2 {
  margin: 4px 0 0;
  font: 25px Georgia, serif;
}

.penpot-offline p {
  color: #a1a1aa;
  max-width: 360px;
  margin: 0;
  font-size: 10px;
  line-height: 1.6;
}

.penpot-offline code {
  color: #7efff5;
  border: 1px solid #3f3f46;
  padding: 9px 12px;
}

.penpot-offline button {
  color: #111;
  cursor: pointer;
  background: #7efff5;
  border: 0;
  padding: 8px 12px;
  font-size: 8px;
  font-weight: 800;
}

.data-mode {
  color: #466353;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: #e7ece6;
  border: 1px solid #c9d5cc;
  border-radius: 99px;
  padding: 9px 12px;
  font-size: 8px;
  font-weight: 800;
}

.data-mode i {
  background: #6f927c;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  display: inline-block;
}

.kpi-scorecards {
  border: 1px solid var(--line);
  background: #faf9f4e0;
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.kpi-scorecards article {
  border-right: 1px solid var(--line);
  flex-direction: column;
  min-height: 142px;
  padding: 19px;
  display: flex;
}

.kpi-scorecards article:last-child {
  border-right: 0;
}

.kpi-scorecards span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 8px;
}

.kpi-scorecards strong {
  letter-spacing: -.04em;
  margin: 19px 0 5px;
  font: 35px Georgia, serif;
}

.kpi-scorecards small {
  color: var(--muted);
  margin-top: auto;
  font-size: 8px;
}

.product-outcomes, .campaign-performance {
  margin-top: 42px;
}

.outcome-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

.outcome-grid article {
  border: 1px solid var(--line);
  background: #faf9f4e0;
  flex-direction: column;
  min-height: 205px;
  padding: 20px;
  display: flex;
}

.outcome-grid header {
  justify-content: space-between;
  gap: 12px;
  display: flex;
}

.outcome-grid header span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 8px;
}

.outcome-grid em {
  color: #47725a;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.outcome-grid em.flat {
  color: var(--muted);
}

.outcome-grid > article > strong {
  margin-top: 30px;
  font: 36px Georgia, serif;
}

.outcome-grid h3 {
  margin: 5px 0 20px;
  font-size: 11px;
}

.outcome-grid footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  margin-top: auto;
  padding-top: 12px;
  font-size: 7px;
}

.performance-table {
  border: 1px solid var(--line);
  background: #faf9f4e0;
  overflow: hidden;
}

.performance-table > div {
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(150px, 1.5fr) repeat(4, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 620px;
  padding: 13px 16px;
  display: grid;
}

.performance-table > div:last-child {
  border-bottom: 0;
}

.performance-table .performance-head {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #ebe8df;
  font-size: 7px;
  font-weight: 800;
}

.performance-table strong {
  font-size: 9px;
}

.performance-table span, .performance-table b {
  font-size: 10px;
}

.performance-table small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 7px;
  font-weight: 400;
  display: block;
}

.measurement-note {
  border: 1px solid var(--green);
  background: var(--green);
  color: #fff;
  grid-template-columns: minmax(180px, .65fr) 1.35fr;
  gap: 30px;
  margin-top: 18px;
  padding: 20px;
  display: grid;
}

.measurement-note div {
  gap: 8px;
  display: grid;
}

.measurement-note span {
  color: #bad0c4;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 7px;
}

.measurement-note strong {
  font: 18px Georgia, serif;
}

.measurement-note p {
  color: #cfddd5;
  margin: 0;
  font-size: 9px;
  line-height: 1.6;
}

@media (max-width: 1200px) {
  .planner-grid {
    grid-template-columns: 220px 1fr;
  }

  .post-preview {
    grid-column: 2;
  }

  .accounts-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .planner-grid {
    grid-template-columns: 1fr;
  }

  .post-preview {
    grid-column: 1;
  }

  .campaign-list {
    max-height: 290px;
    overflow-y: auto;
  }

  .social-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .week-grid {
    grid-template-columns: repeat(7, 150px);
  }

  .accounts-layout, .brand-grid {
    grid-template-columns: 1fr;
  }

  .workspace-tabs {
    top: 76px;
  }

  .kpi-scorecards {
    grid-template-columns: 1fr 1fr;
  }

  .kpi-scorecards article:nth-child(2) {
    border-right: 0;
  }

  .kpi-scorecards article:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .outcome-grid, .brand-studio {
    grid-template-columns: 1fr;
  }

  .brand-reference {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }

  .penpot-workspace, .penpot-workspace iframe {
    min-height: 620px;
  }
}

@media (max-width: 620px) {
  .topbar {
    height: 62px;
  }

  .topbar nav {
    gap: 11px;
    overflow-x: auto;
  }

  .topbar nav a {
    display: none;
  }

  .topbar nav button {
    flex: none;
  }

  .local-badge {
    padding: 7px 9px;
  }

  .product-workspace {
    min-height: calc(100vh - 62px);
  }

  .product-sidebar {
    padding: 22px 18px 18px;
  }

  .sidebar-title {
    padding-bottom: 15px;
  }

  .sidebar-title h1 {
    font-size: 24px;
  }

  .product-list {
    scroll-snap-type: x proximity;
    margin: 0 -18px;
    padding: 0 18px 6px;
    display: flex;
    overflow-x: auto;
  }

  .product-list > button {
    scroll-snap-align: start;
    min-width: 235px;
  }

  .refresh-products {
    margin-top: 12px;
  }

  .workspace-tabs {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 12px 18px 0;
    position: static;
  }

  .workspace-tabs nav {
    scrollbar-width: none;
    gap: 20px;
    width: calc(100% + 36px);
    min-height: 42px;
    margin-left: -18px;
    padding: 0 18px;
    overflow-x: auto;
  }

  .workspace-tabs nav::-webkit-scrollbar {
    display: none;
  }

  .workspace-tabs button {
    flex: none;
    min-height: 42px;
  }

  .social-hero {
    gap: 20px;
    margin-bottom: 25px;
  }

  .social-hero h1 {
    overflow-wrap: anywhere;
    font-size: 38px;
  }

  .queue-summary {
    width: 100%;
  }

  .destination-row, .schedule-row {
    grid-template-columns: 1fr;
  }

  .composer-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .composer-top select {
    width: 100%;
  }

  .composer, .post-preview, .campaign-list {
    max-width: calc(100vw - 36px);
  }

  .media-row {
    -webkit-overflow-scrolling: touch;
  }

  .week-grid {
    scroll-snap-type: x mandatory;
    width: calc(100vw - 36px);
  }

  .week-grid > article {
    scroll-snap-align: start;
  }

  .upcoming-table > div:not(.panel-title) {
    grid-template-columns: 28px 1fr auto;
  }

  .upcoming-table > div span {
    display: none;
  }

  .ownership-guide {
    grid-template-columns: 1fr;
  }

  .ownership-guide div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .account-cards article {
    grid-template-columns: 30px 1fr auto;
  }

  .account-cards article label {
    grid-column: 2;
  }

  .account-cards article > b {
    grid-area: 2 / 3;
  }

  .connector-catalog article {
    grid-template-columns: 30px 1fr auto;
  }

  .connector-catalog article > em {
    display: none;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-grid article {
    grid-template-columns: 40px 1fr;
  }

  .mini-palette {
    grid-column: 2;
  }

  .asset-ideas {
    grid-template-columns: 1fr;
  }

  .view-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .kpi-scorecards {
    grid-template-columns: 1fr 1fr;
  }

  .kpi-scorecards article {
    min-height: 125px;
    padding: 15px;
  }

  .kpi-scorecards strong {
    font-size: 29px;
  }

  .performance-table {
    -webkit-overflow-scrolling: touch;
    width: calc(100vw - 36px);
    overflow-x: auto;
  }

  .measurement-note {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .data-mode {
    white-space: normal;
  }

  .feature-evidence > div {
    grid-template-columns: 52px 1fr;
  }

  .feature-evidence em {
    grid-column: 2;
  }

  .account-cards article > em {
    display: none;
  }
}

@media (max-width: 900px) {
  .topbar {
    padding-inline: 22px;
  }

  .product-workspace, .workspace-column, .product-sidebar {
    min-width: 0;
    max-width: 100vw;
  }

  .product-sidebar {
    padding: 20px 22px;
    overflow: hidden;
  }

  .sidebar-title {
    padding: 0 0 15px;
  }

  .sidebar-title h1 {
    font-size: 24px;
  }

  .product-list {
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    gap: 8px;
    width: calc(100% + 44px);
    margin-inline: -22px;
    padding: 0 22px 8px;
    display: flex;
    overflow-x: auto;
  }

  .product-list > button {
    scroll-snap-align: start;
    background: #ffffff40;
    border: 1px solid #d8d5cbcc;
    flex: 0 0 250px;
    min-height: 54px;
  }

  .refresh-products {
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
  }

  .workspace-tabs {
    min-width: 0;
    max-width: 100vw;
    padding-inline: 22px;
    overflow: hidden;
  }

  .workspace-tabs nav {
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    gap: 14px;
    overflow-x: auto;
  }

  .workspace-tabs nav::-webkit-scrollbar {
    display: none;
  }

  .workspace-tabs button {
    min-width: 52px;
    min-height: 44px;
    font-size: 10px;
  }

  .product-main {
    max-width: 100vw;
    padding-inline: 22px;
    overflow: hidden;
  }

  .repo-filter {
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    margin-inline: -22px;
    padding-inline: 22px;
  }

  .repo-filter::-webkit-scrollbar {
    display: none;
  }

  .repo-filter button {
    min-height: 40px;
  }

  .feature-nodes button, .campaign-list > button {
    min-height: 54px;
  }

  .planner-grid, .accounts-layout, .portfolio-grid, .outcome-grid {
    min-width: 0;
  }

  .social-view, .product-hero, .social-hero, .initiative-map, .feature-detail {
    max-width: 100%;
  }

  .campaign-list, .composer, .post-preview, .upcoming-table, .account-cards, .connector-catalog {
    min-width: 0;
  }

  .variant-tabs {
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .variant-tabs button {
    flex: none;
    min-height: 40px;
  }

  .composer select, .composer input, .copy-editor textarea, .schedule-row > button, .primary-action {
    min-height: 44px;
  }

  .week-grid {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .week-grid article > div > button {
    min-height: 48px;
  }

  .performance-table {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    overflow-x: auto;
  }

  .brand-studio {
    min-width: 0;
  }

  .brand-reference {
    gap: 18px;
  }

  .brand-studio-colors button {
    min-height: 40px;
  }
}

@media (max-width: 620px) {
  .topbar {
    height: 60px;
    padding: 0 max(14px, env(safe-area-inset-left));
  }

  .brand {
    gap: 8px;
  }

  .brand strong {
    font-size: 17px;
  }

  .logo-mark {
    transform: scale(.9);
  }

  .local-badge {
    white-space: nowrap;
    font-size: 9px;
  }

  .product-workspace {
    min-height: calc(100dvh - 60px);
  }

  .product-sidebar {
    padding: 17px 16px 14px;
  }

  .sidebar-title {
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 12px;
    display: flex;
  }

  .sidebar-title .eyebrow {
    margin: 0;
  }

  .sidebar-title h1 {
    font-size: 20px;
  }

  .product-list {
    width: calc(100% + 32px);
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .product-list > button {
    flex-basis: min(78vw, 270px);
    min-width: 0;
  }

  .workspace-tabs {
    z-index: 15;
    box-shadow: 0 1px 0 var(--line);
    padding: 10px 16px 0;
    position: sticky;
    top: 60px;
  }

  .workspace-tabs > div {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 8px;
    width: 100%;
  }

  .workspace-tabs > div strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    overflow: hidden;
  }

  .workspace-tabs nav {
    gap: 8px;
    width: calc(100% + 32px);
    margin-left: -16px;
    padding: 0 16px;
  }

  .workspace-tabs button {
    min-width: auto;
    padding-inline: 8px;
    font-size: 11px;
  }

  .product-main {
    padding: 26px 16px max(48px, env(safe-area-inset-bottom));
  }

  .product-hero {
    gap: 22px;
    padding-bottom: 22px;
  }

  .product-hero h1, .social-hero h1 {
    font-size: clamp(34px, 11vw, 42px);
  }

  .product-hero > div:first-child > p:last-child, .social-hero > div > p:last-child {
    font-size: 14px;
  }

  .product-stats div {
    padding: 11px 9px;
  }

  .product-stats strong {
    font-size: 20px;
  }

  .product-stats span {
    font-size: 8px;
  }

  .repo-filter {
    margin-inline: -16px;
    padding: 12px 16px 24px;
  }

  .repo-filter > span {
    flex: none;
  }

  .view-heading h2 {
    font-size: 25px;
  }

  .view-heading > span {
    font-size: 11px;
    line-height: 1.4;
  }

  .initiative-lane, .initiative-lane.active {
    padding: 18px 0;
  }

  .initiative-lane.active {
    padding-inline: 12px;
  }

  .initiative-info p, .feature-nodes small {
    font-size: 11px;
  }

  .feature-nodes strong {
    font-size: 12px;
  }

  .feature-summary, .feature-evidence {
    padding: 20px 17px;
  }

  .feature-summary h2 {
    font-size: 27px;
  }

  .feature-summary > p {
    font-size: 13px;
  }

  .feature-evidence > div {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .feature-evidence p {
    overflow-wrap: anywhere;
    font-size: 11px;
  }

  .feature-evidence code, .feature-evidence em {
    font-size: 9px;
  }

  .social-hero {
    gap: 16px;
  }

  .queue-summary {
    min-width: 0;
  }

  .panel-title {
    min-height: 48px;
  }

  .panel-title span, .panel-title b {
    font-size: 10px;
  }

  .campaign-list, .composer, .post-preview {
    max-width: 100%;
  }

  .campaign-list {
    max-height: 42dvh;
  }

  .campaign-list button strong {
    font-size: 11px;
  }

  .campaign-list button small, .campaign-list time {
    font-size: 9px;
  }

  .composer-top, .destination-row {
    padding-inline: 16px;
  }

  .composer-top h2 {
    overflow-wrap: anywhere;
    font-size: 22px;
  }

  .composer select, .composer input, .copy-editor textarea {
    font-size: 16px;
  }

  .destination-row span, .copy-editor > span, .schedule-row label span, .composer-top span {
    font-size: 9px;
  }

  .connection-demo, .approval-note span {
    font-size: 11px;
  }

  .approval-note small {
    font-size: 9px;
  }

  .copy-editor {
    padding-inline: 16px;
  }

  .copy-editor small {
    right: 25px;
  }

  .media-row {
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .schedule-row {
    margin-inline: 16px;
  }

  .post-preview {
    padding: 14px;
  }

  .social-card > p {
    font-size: 12px;
  }

  .week-grid {
    grid-template-columns: repeat(7, min(78vw, 260px));
    width: 100%;
  }

  .week-grid > article {
    min-height: 230px;
  }

  .upcoming-table > div:not(.panel-title) {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    padding-inline: 12px;
  }

  .upcoming-table strong {
    overflow-wrap: anywhere;
    font-size: 11px;
  }

  .upcoming-table em {
    font-size: 9px;
  }

  .account-cards article, .connector-catalog article {
    gap: 10px;
    padding: 13px 12px;
  }

  .account-cards article strong, .connector-catalog article strong {
    font-size: 11px;
  }

  .account-cards article span, .connector-catalog article span, .account-cards label, .connector-catalog article > b {
    font-size: 9px;
  }

  .account-cards article > b {
    text-align: right;
    max-width: 76px;
  }

  .ownership-guide strong {
    margin-top: 9px;
  }

  .ownership-guide p {
    font-size: 10px;
  }

  .portfolio-grid article {
    padding: 16px;
  }

  .portfolio-grid p {
    font-size: 11px;
  }

  .kpi-scorecards article {
    min-height: 116px;
    padding: 13px;
  }

  .kpi-scorecards span, .kpi-scorecards small {
    font-size: 9px;
  }

  .kpi-scorecards strong {
    margin-top: 14px;
    font-size: 27px;
  }

  .product-outcomes, .campaign-performance {
    margin-top: 32px;
  }

  .outcome-grid article {
    min-height: 180px;
    padding: 17px;
  }

  .outcome-grid header span, .outcome-grid footer {
    font-size: 9px;
  }

  .performance-table {
    width: 100%;
    max-width: 100%;
  }

  .performance-table > div {
    min-width: 560px;
  }

  .measurement-note p {
    font-size: 11px;
  }

  .brand-reference {
    grid-template-columns: 1fr;
    padding: 20px 16px;
  }

  .brand-reference > div:first-child {
    grid-column: 1;
  }

  .brand-reference p {
    font-size: 11px;
  }

  .brand-reference section > span, .brand-reference section > small, .brand-studio-colors strong, .brand-studio-colors code, .brand-studio-traits em {
    font-size: 9px;
  }

  .penpot-workspace {
    order: -1;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 72dvh;
  }

  .penpot-workspace > header {
    flex-direction: column;
    align-items: stretch;
    min-height: 94px;
    padding: 12px;
  }

  .penpot-workspace > header strong {
    font-size: 11px;
  }

  .penpot-status {
    font-size: 9px;
  }

  .penpot-workspace nav {
    width: 100%;
  }

  .penpot-workspace nav button, .penpot-workspace nav a {
    flex: 1;
    place-content: center;
    min-height: 40px;
    font-size: 10px;
    display: grid;
  }

  .penpot-workspace iframe {
    min-height: 68dvh;
  }

  .penpot-offline {
    padding: 26px 18px;
  }

  .penpot-offline p {
    font-size: 12px;
  }

  .docs-page {
    padding: 42px 18px 70px;
  }

  .docs-back {
    margin-bottom: 42px;
  }

  .docs-page > h1 {
    font-size: 40px;
  }

  .docs-lead {
    font-size: 14px;
  }

  .docs-grid article {
    min-height: 0;
    padding: 22px 18px;
  }
}

@media (max-width: 360px) {
  .brand > div:last-child {
    display: flex;
  }

  .brand strong {
    font-size: 16px;
  }

  .local-badge {
    width: 30px;
    padding-inline: 10px;
    font-size: 0;
    overflow: hidden;
  }

  .local-badge i {
    margin: 0;
  }

  .product-stats {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
  }

  .product-stats div {
    min-width: 0;
  }

  .kpi-scorecards {
    grid-template-columns: 1fr;
  }

  .kpi-scorecards article, .kpi-scorecards article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: 102px;
  }

  .kpi-scorecards article:last-child {
    border-bottom: 0;
  }

  .account-cards article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .account-cards article label, .account-cards article > b {
    text-align: left;
    grid-area: auto / 2;
  }

  .connector-catalog article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .connector-catalog article > b {
    text-align: left;
    grid-column: 2;
  }
}

.brand strong, .workspace-tabs > div strong, .sidebar-title h1, .product-hero h1, .social-hero h1, .kpi-hero h1, .view-heading h2, .metric-toolbar h2, .signal-coverage h2 {
  font-family: var(--font-geist-sans), Arial, sans-serif;
}

.brand strong {
  font-size: 18px;
  font-weight: 680;
}

.workspace-tabs > div span, .eyebrow {
  letter-spacing: .09em;
  font-size: 10px;
  font-weight: 700;
}

.workspace-tabs > div strong {
  font-size: 15px;
  font-weight: 620;
}

.workspace-tabs nav {
  gap: 20px;
}

.workspace-tabs button {
  font-size: 12px;
  font-weight: 600;
}

.product-sidebar {
  padding: 28px 14px 20px;
}

.sidebar-title {
  padding: 0 8px 20px;
}

.sidebar-title h1 {
  letter-spacing: -.025em;
  font-size: 22px;
  font-weight: 640;
}

.product-list {
  gap: 4px;
}

.product-list > button {
  border-radius: 8px;
  padding: 10px 9px;
}

.product-list > button:hover {
  background: #eef1ee;
}

.product-list > button.active {
  color: var(--ink);
  background: #e8efeb;
}

.product-list button.active small {
  color: var(--muted);
}

.product-list strong {
  font-size: 12px;
  font-weight: 620;
}

.product-list small {
  font-size: 10px;
  line-height: 1.35;
}

.refresh-products {
  background: #fff;
  border-radius: 8px;
  margin-top: 24px;
  font-size: 11px;
}

.product-hero h1, .social-hero h1 {
  letter-spacing: -.045em;
  font-weight: 650;
}

.product-hero > div:first-child > p:last-child, .social-hero > div > p:last-child {
  font-size: 15px;
}

.product-stats span, .repo-filter > span, .feature-status span, .feature-evidence > span, .panel-title span {
  font-size: 9px;
}

.repo-filter button, .feature-nodes strong, .feature-nodes small, .initiative-info p, .feature-evidence p, .feature-evidence code, .feature-evidence em {
  font-size: 11px;
}

.initiative-info h3 {
  font-family: var(--font-geist-sans), Arial, sans-serif;
  font-size: 18px;
  font-weight: 640;
}

.kpi-view {
  max-width: 1500px;
  margin: 0 auto;
}

.kpi-hero {
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  margin-bottom: 32px;
  display: flex;
}

.kpi-hero h1 {
  letter-spacing: -.055em;
  max-width: 820px;
  margin: 0;
  font-size: clamp(42px, 5vw, 66px);
  font-weight: 670;
  line-height: .98;
}

.kpi-hero > div:first-child > p:last-child {
  max-width: 720px;
  color: var(--muted);
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.55;
}

.kpi-hero-actions {
  align-items: center;
  gap: 9px;
  display: flex;
}

.kpi-hero-actions button {
  border: 1px solid var(--line);
  min-height: 38px;
  color: var(--ink);
  cursor: pointer;
  background: #fff;
  border-radius: 99px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 620;
}

.kpi-hero-actions button:disabled {
  opacity: .55;
  cursor: wait;
}

.data-mode {
  color: #315e49;
  letter-spacing: .05em;
  background: #eef5f0;
  border-color: #cbd9d0;
  padding: 10px 13px;
  font-size: 10px;
}

.data-mode i {
  background: #3c9a68;
}

.pulse-summary {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
  overflow: hidden;
}

.pulse-summary article {
  border-right: 1px solid var(--line);
  flex-direction: column;
  min-height: 132px;
  padding: 20px;
  display: flex;
}

.pulse-summary article:last-child {
  border-right: 0;
}

.pulse-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 620;
}

.pulse-summary strong {
  letter-spacing: -.045em;
  margin: 12px 0 2px;
  font-size: 34px;
  line-height: 1;
}

.pulse-summary small {
  color: var(--muted);
  margin-top: auto;
  font-size: 11px;
}

.metric-explorer {
  margin-top: 54px;
}

.metric-toolbar {
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 20px;
  display: flex;
}

.metric-toolbar h2, .signal-coverage h2 {
  letter-spacing: -.035em;
  margin: 0;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.15;
}

.metric-toolbar nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  display: flex;
}

.metric-toolbar nav button {
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  background: #fff;
  border-radius: 99px;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 600;
}

.metric-toolbar nav button:hover, .metric-toolbar nav button.active {
  color: #fff;
  background: #2c6049;
  border-color: #2c6049;
}

.metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.metric-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  min-width: 0;
  min-height: 310px;
  padding: 20px;
  display: flex;
  overflow: hidden;
}

.metric-card header {
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  display: flex;
}

.metric-card header > div {
  gap: 4px;
  display: grid;
}

.metric-card header span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 10px;
  font-weight: 680;
}

.metric-card header strong {
  font-size: 12px;
  font-weight: 650;
}

.metric-card header em {
  color: #315e49;
  background: #eef5f0;
  border-radius: 99px;
  padding: 5px 7px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.metric-card header em.repository {
  color: #68706c;
  background: #f2f3f2;
}

.metric-value {
  align-items: baseline;
  gap: 10px;
  margin-top: 25px;
  display: flex;
}

.metric-value > strong {
  letter-spacing: -.055em;
  font-size: 39px;
  line-height: 1;
}

.metric-value span {
  color: #28734d;
  font-size: 11px;
  font-weight: 700;
}

.metric-value span.down {
  color: #aa432d;
}

.metric-card h3 {
  margin: 7px 0 0;
  font-size: 13px;
  font-weight: 600;
}

.metric-chart {
  width: calc(100% + 8px);
  height: 92px;
  margin: auto -4px 8px;
  overflow: visible;
}

.metric-chart line {
  stroke: #edf0ee;
  stroke-width: .6px;
  vector-effect: non-scaling-stroke;
}

.metric-chart polyline {
  fill: none;
  stroke: #2c6049;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-growth .metric-chart polyline {
  stroke: #496cac;
}

.category-marketing .metric-chart polyline {
  stroke: #b1547a;
}

.category-revenue .metric-chart polyline {
  stroke: #a76a24;
}

.category-reliability .metric-chart polyline {
  stroke: #704fa0;
}

.metric-card footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  font-size: 10px;
  display: flex;
}

.metric-card footer span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.metric-card footer time {
  flex: none;
}

.metric-empty {
  text-align: center;
  border: 1px dashed #ccd2ce;
  border-radius: 12px;
  place-content: center;
  justify-items: center;
  min-height: 230px;
  display: grid;
}

.metric-empty strong {
  font-size: 17px;
}

.metric-empty p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 13px;
}

.signal-coverage {
  grid-template-columns: minmax(220px, .7fr) minmax(500px, 1.3fr);
  align-items: start;
  gap: 50px;
  margin-top: 54px;
  display: grid;
}

.signal-coverage > div:first-child > p:last-child {
  max-width: 350px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.coverage-list {
  border-top: 1px solid var(--line);
}

.coverage-list article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 8px minmax(150px, 1fr) auto 72px;
  align-items: center;
  gap: 12px;
  min-height: 57px;
  display: grid;
}

.coverage-list i {
  background: #c7ccc9;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.coverage-list .connected i {
  background: #3c9a68;
  box-shadow: 0 0 0 4px #e7f3eb;
}

.coverage-list article > div {
  align-items: baseline;
  gap: 9px;
  display: flex;
}

.coverage-list strong {
  font-size: 12px;
}

.coverage-list code {
  color: var(--muted);
  font-size: 10px;
}

.coverage-list span {
  color: var(--muted);
  font-size: 11px;
}

.coverage-list .connected span {
  color: #28734d;
  font-weight: 650;
}

.coverage-list em {
  color: var(--muted);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 9px;
  font-style: normal;
}

.ingestion-callout {
  color: #fff;
  background: #183e30;
  border-radius: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  margin-top: 46px;
  padding: 24px;
  display: grid;
}

.ingestion-callout > div {
  gap: 4px;
  display: grid;
}

.ingestion-callout span {
  color: #a9c9b9;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 700;
}

.ingestion-callout strong {
  font-size: 18px;
}

.ingestion-callout p {
  color: #c5d8ce;
  margin: 2px 0 0;
  font-size: 12px;
}

.ingestion-callout code {
  border: 1px solid #fff3;
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 11px;
}

.ingestion-callout a {
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.docs-contract {
  border-top: 1px solid var(--line);
  margin-top: 72px;
  padding-top: 48px;
  scroll-margin-top: 90px;
}

.docs-contract h2 {
  letter-spacing: -.045em;
  max-width: 720px;
  margin: 0;
  font-size: 38px;
  line-height: 1.05;
}

.docs-contract > p:not(.eyebrow):not(.docs-contract-note) {
  max-width: 680px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.docs-contract > div {
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 12px;
  display: flex;
}

.docs-contract > div code {
  border: 1px solid var(--line);
  color: #315e49;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
}

.docs-contract pre {
  color: #dce9e1;
  font: 12px/1.7 var(--font-geist-mono), monospace;
  background: #17231e;
  border-radius: 10px;
  margin: 0;
  padding: 24px;
  overflow-x: auto;
}

.docs-contract-note {
  color: var(--muted);
  font-size: 12px;
}

.docs-contract-note code {
  color: var(--ink);
}

@media (max-width: 1150px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signal-coverage {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .product-workspace {
    min-height: calc(100vh - 64px);
  }

  .workspace-tabs {
    top: 64px;
  }

  .kpi-hero, .metric-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .metric-toolbar nav {
    justify-content: flex-start;
  }

  .pulse-summary {
    grid-template-columns: 1fr 1fr;
  }

  .pulse-summary article:nth-child(2) {
    border-right: 0;
  }

  .pulse-summary article:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .ingestion-callout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 620px) {
  .topbar {
    height: 60px;
  }

  .product-workspace {
    min-height: calc(100vh - 60px);
  }

  .kpi-hero h1 {
    font-size: 42px;
  }

  .kpi-hero-actions {
    justify-content: space-between;
    width: 100%;
  }

  .pulse-summary {
    grid-template-columns: 1fr 1fr;
  }

  .pulse-summary article {
    min-height: 120px;
    padding: 15px;
  }

  .pulse-summary strong {
    font-size: 30px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .metric-toolbar nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 4px;
    overflow-x: auto;
  }

  .metric-toolbar nav button {
    flex: none;
  }

  .metric-card {
    min-height: 290px;
  }

  .signal-coverage {
    margin-top: 42px;
  }

  .coverage-list article {
    grid-template-columns: 8px 1fr auto;
    padding: 10px 0;
  }

  .coverage-list article > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .coverage-list em {
    display: none;
  }

  .ingestion-callout {
    padding: 20px;
  }

  .docs-contract {
    margin-top: 54px;
    padding-top: 38px;
  }

  .docs-contract h2 {
    font-size: 31px;
  }

  .docs-contract pre {
    padding: 17px;
    font-size: 10px;
  }
}

.helm-shell {
  min-height: 100vh;
}

.topbar-nav {
  align-items: center;
  gap: 2px;
  display: flex;
}

.topbar-nav button {
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  transition: color .15s, background .15s;
  display: flex;
}

.topbar-nav button:hover {
  color: var(--ink);
  background: #0000000a;
}

.topbar-nav button.active {
  color: var(--ink);
  background: #0000000f;
  font-weight: 700;
}

.nav-icon {
  opacity: .7;
  font-size: 14px;
}

.helm-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px;
}

.helm-view {
  animation: .2s helm-fade;
}

@keyframes helm-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
  }
}

.view-header {
  margin-bottom: 28px;
}

.view-header h1 {
  letter-spacing: -.035em;
  color: var(--ink);
  margin: 0;
  font: 400 36px / .95 Georgia, serif;
}

.view-header .eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
}

.view-header .primary-action {
  border: 1px solid var(--green);
  background: var(--green);
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
}

.view-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.stat-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
  display: grid;
}

.stat-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  display: flex;
}

.stat-label {
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.stat-value {
  color: var(--ink);
  font: 400 28px Georgia, serif;
}

.stat-sub {
  color: var(--muted);
  font-size: 11px;
}

.stat-card .sparkline {
  align-self: stretch;
  width: 100%;
  margin-top: 6px;
}

.dashboard-columns {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  display: grid;
}

.dashboard-panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 18px;
}

.panel-title {
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
  display: flex;
}

.panel-title span {
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.panel-title b {
  font-size: 14px;
  font-weight: 700;
}

.spend-row {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1fr 60px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  display: grid;
}

.spend-row:last-child {
  border-bottom: 0;
}

.spend-row strong {
  font-size: 12px;
  font-weight: 600;
}

.spend-row span {
  text-align: right;
  font-size: 12px;
}

.spend-row small {
  color: var(--muted);
  font-size: 10px;
}

.spend-bar-container {
  background: var(--cream);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
}

.spend-bar {
  background: var(--signal);
  border-radius: 3px;
  height: 100%;
}

.social-row {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  display: grid;
}

.social-row:last-child {
  border-bottom: 0;
}

.social-row strong {
  font-size: 12px;
}

.social-row small {
  color: var(--muted);
  font-size: 10px;
}

.social-row span {
  font-size: 13px;
  font-weight: 700;
}

.platform-dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: inline-block;
}

.cron-row {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  display: grid;
}

.cron-row:last-child {
  border-bottom: 0;
}

.cron-row strong {
  font-size: 12px;
}

.cron-row small {
  color: var(--muted);
  font-size: 10px;
}

.cron-row em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.cron-status-dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: inline-block;
}

.cron-status-dot.ok {
  background: #52a46d;
}

.cron-status-dot.fail {
  background: var(--signal);
}

.empty-note {
  color: var(--muted);
  padding: 12px 0;
  font-size: 12px;
}

.project-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  display: grid;
}

.project-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 18px;
}

.project-card header {
  justify-content: space-between;
  align-items: start;
  margin-bottom: 8px;
  display: flex;
}

.project-card h2 {
  margin: 0;
  font: 500 16px Georgia, serif;
}

.project-category {
  background: var(--cream);
  color: var(--muted);
  border-radius: 99px;
  padding: 3px 8px;
  font-size: 10px;
}

.project-tagline {
  color: var(--muted);
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
}

.project-metrics {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.project-metric {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.project-metric span {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-size: 9px;
}

.project-metric strong {
  font-size: 14px;
}

.platform-chip {
  border: 1px solid var(--line);
  border-radius: 99px;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10px;
  display: inline-flex;
}

.platform-chip i {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  display: inline-block;
}

.filter-bar {
  gap: 10px;
  margin-bottom: 20px;
  display: flex;
}

.filter-bar select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
}

.social-kpi-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  display: grid;
}

.social-kpi-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 16px;
}

.social-kpi-card header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.social-kpi-card h2 {
  margin: 0;
  font: 500 15px Georgia, serif;
}

.social-kpi-card small {
  color: var(--muted);
  font-size: 10px;
}

.kpi-list {
  gap: 6px;
  display: grid;
}

.kpi-item {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  display: grid;
}

.kpi-item:last-child {
  border-bottom: 0;
}

.kpi-item > div {
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.kpi-item strong {
  font-size: 12px;
}

.kpi-item small {
  color: var(--muted);
  font-size: 10px;
}

.kpi-item > span {
  font-size: 14px;
  font-weight: 700;
}

.kpi-item i {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.spend-summary {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
  display: grid;
}

.spend-summary article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 16px;
}

.spend-summary span {
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.spend-summary strong {
  margin-top: 4px;
  font: 400 24px Georgia, serif;
  display: block;
}

.spend-models, .spend-sessions {
  margin-bottom: 24px;
}

.spend-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.spend-table th {
  text-align: left;
  border-bottom: 2px solid var(--line);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
}

.spend-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}

.spend-table td.fail {
  color: var(--signal);
  font-weight: 700;
}

.spend-table td.ok {
  color: var(--green);
  font-weight: 700;
}

.jobs-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
  display: grid;
}

.job-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 16px;
}

.job-card header {
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.job-card h2 {
  flex: 1;
  margin: 0;
  font: 500 14px Georgia, serif;
}

.job-paused {
  color: var(--muted);
  background: #f0f0f0;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
}

.job-status-dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: inline-block;
}

.job-status-dot.ok {
  background: #52a46d;
}

.job-status-dot.fail {
  background: var(--signal);
}

.job-status-dot.idle {
  background: #ccc;
}

.job-details {
  gap: 6px;
  margin-bottom: 10px;
  display: grid;
}

.job-details div {
  justify-content: space-between;
  font-size: 11px;
  display: flex;
}

.job-details span {
  color: var(--muted);
}

.job-details strong {
  font-weight: 600;
}

.job-stats {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-top: 10px;
  display: grid;
}

.job-stats div {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.job-stats span {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-size: 9px;
}

.job-stats strong {
  font-size: 13px;
}

.job-stats strong.ok {
  color: var(--green);
}

.job-stats strong.fail {
  color: var(--signal);
}

.job-runs {
  margin-top: 20px;
}

.notes-view .view-header {
  margin-bottom: 20px;
}

.notes-layout {
  grid-template-columns: 240px 1fr;
  gap: 16px;
  min-height: 500px;
  display: grid;
}

.notes-sidebar {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.notes-sidebar button {
  text-align: left;
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 8px;
  gap: 4px;
  padding: 12px;
  display: grid;
}

.notes-sidebar button.active {
  border-color: var(--green);
  background: #f0f5f2;
}

.notes-sidebar strong {
  font-size: 13px;
}

.notes-sidebar small {
  color: var(--muted);
  font-size: 10px;
}

.notes-sidebar p {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 11px;
  overflow: hidden;
}

.notes-editor {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  flex-direction: column;
  padding: 20px;
  display: flex;
}

.note-title-input {
  border: 0;
  outline: none;
  margin-bottom: 12px;
  padding: 0;
  font: 500 22px Georgia, serif;
}

.note-body-input {
  resize: none;
  border: 0;
  outline: none;
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
}

.notes-empty {
  color: var(--muted);
  place-content: center;
  justify-items: center;
  gap: 10px;
  font-size: 13px;
  display: grid;
}

@media (max-width: 900px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-columns, .spend-summary, .notes-layout {
    grid-template-columns: 1fr;
  }

  .helm-content {
    padding: 16px;
  }

  .topbar-nav {
    flex-wrap: wrap;
  }

  .topbar-nav button {
    padding: 6px 10px;
    font-size: 11px;
  }

  .nav-icon {
    display: none;
  }
}

.chat-fab {
  z-index: 100;
  border: 1px solid var(--green);
  background: var(--green);
  color: #fff;
  cursor: pointer;
  border-radius: 99px;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
  animation: .35s cubic-bezier(.34, 1.56, .64, 1) chat-fab-in;
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 20px;
  box-shadow: 0 4px 20px #00000026;
}

.chat-fab:hover {
  transform: translateY(-3px)scale(1.02);
  box-shadow: 0 8px 28px #0003;
}

.chat-fab:active {
  transform: translateY(-1px)scale(.98);
}

.chat-fab-icon {
  font-size: 16px;
}

.chat-fab-badge {
  background: var(--signal);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 99px;
  justify-content: center;
  align-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  animation: .3s cubic-bezier(.34, 1.56, .64, 1) chat-badge-pop;
  display: flex;
  position: absolute;
  top: -4px;
  right: -4px;
}

@keyframes chat-fab-in {
  from {
    opacity: 0;
    transform: scale(0)translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1)translateY(0);
  }
}

@keyframes chat-badge-pop {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.chat-backdrop {
  z-index: 99;
  pointer-events: none;
  background: none;
  transition: background .25s, pointer-events .25s;
  position: fixed;
  inset: 0;
}

.chat-backdrop.visible {
  pointer-events: auto;
  background: #00000026;
}

.chat-backdrop.visible.full {
  background: #0000004d;
}

.chat-drawer {
  z-index: 100;
  border-top: 1px solid var(--line);
  background: #fff;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), height .25s;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  box-shadow: 0 -8px 32px #0000001f;
}

.chat-drawer.visible {
  transform: translateY(0);
}

.chat-drawer.half-height {
  height: 45vh;
}

.chat-drawer.full-height {
  height: calc(100vh - 64px);
}

.chat-drawer-header {
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  display: flex;
}

.chat-drawer-title {
  align-items: center;
  gap: 8px;
  display: flex;
}

.chat-drawer-title strong {
  font-size: 13px;
  font-weight: 700;
}

.chat-drawer-title small {
  color: var(--muted);
  font-size: 10px;
}

.chat-status-dot {
  background: #52a46d;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  transition: background .2s;
}

.chat-status-dot.pulsing {
  animation: 1.2s infinite chat-pulse;
}

@keyframes chat-pulse {
  0%, 100% {
    box-shadow: 0 0 #52a46d80;
  }

  50% {
    box-shadow: 0 0 0 6px #52a46d00;
  }
}

.chat-drawer-controls {
  gap: 4px;
  display: flex;
}

.chat-control-btn {
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  transition: background .15s, color .15s, transform .15s;
  display: flex;
}

.chat-control-btn:hover {
  color: var(--ink);
  background: #0000000f;
}

.chat-control-btn:active {
  transform: scale(.9);
}

.chat-messages {
  scroll-behavior: smooth;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 16px 20px;
  display: flex;
  overflow-y: auto;
}

.chat-empty {
  text-align: center;
  color: var(--muted);
  padding: 30px 20px;
  animation: .4s chat-fade-in;
}

.chat-empty-icon {
  opacity: .5;
  justify-content: center;
  margin-bottom: 12px;
  display: flex;
}

.chat-empty p {
  margin: 0 0 20px;
  font-size: 13px;
}

.chat-suggestions {
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
  margin: 0 auto;
  display: flex;
}

.chat-suggestions button {
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 12px;
  transition: border-color .15s, background .15s, transform .1s;
  display: flex;
}

.chat-suggestions button:hover {
  border-color: var(--green);
  background: #f0f5f2;
  transform: translateX(2px);
}

.chat-suggestions button:active {
  transform: scale(.98);
}

.chat-suggestions button span {
  font-size: 14px;
}

.chat-message {
  gap: 8px;
  max-width: 85%;
  animation: .3s chat-msg-in;
  display: flex;
}

@keyframes chat-msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes chat-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.chat-message.user {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.chat-message.assistant {
  align-self: flex-start;
}

.chat-message-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  overflow: hidden;
}

.chat-message.user .chat-message-avatar {
  background: var(--green);
  color: #fff;
}

.chat-message.assistant .chat-message-avatar {
  background: var(--cream);
  border: 1px solid var(--line);
}

.chat-message-body {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.chat-message-content {
  word-break: break-word;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
}

.chat-message.user .chat-message-content {
  background: var(--green);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-message.assistant .chat-message-content {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}

.chat-message-content p {
  margin: 0;
}

.chat-message-content p + p {
  margin-top: 6px;
}

.chat-message time {
  color: var(--muted);
  padding: 0 4px;
  font-size: 9px;
}

.chat-message.streaming .chat-message-content:after {
  content: "▋";
  color: var(--muted);
  margin-left: 2px;
  animation: .8s infinite chat-cursor;
}

@keyframes chat-cursor {
  0%, 100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.chat-typing {
  gap: 5px;
  padding: 4px 0;
  display: flex;
}

.chat-typing span {
  background: var(--muted);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: 1.2s infinite chat-bounce;
}

.chat-typing span:nth-child(2) {
  animation-delay: .15s;
}

.chat-typing span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes chat-bounce {
  0%, 60%, 100% {
    opacity: .4;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

.chat-input-area {
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 20px;
  display: flex;
}

.chat-input-area textarea {
  border: 1px solid var(--line);
  resize: none;
  border-radius: 12px;
  outline: none;
  flex: 1;
  min-height: 40px;
  max-height: 100px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}

.chat-input-area textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #2458431a;
}

.chat-send-btn {
  background: var(--green);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  transition: transform .15s, opacity .15s;
  display: flex;
}

.chat-send-btn:hover:not(:disabled) {
  transform: scale(1.1);
}

.chat-send-btn:active:not(:disabled) {
  transform: scale(.95);
}

.chat-send-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.chat-send-spinner {
  border: 2px solid #ffffff4d;
  border-top-color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: .6s linear infinite chat-spin;
}

@keyframes chat-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .chat-drawer.half-height {
    height: 50vh;
  }

  .chat-drawer.full-height {
    height: calc(100vh - 64px);
  }

  .chat-fab {
    bottom: 16px;
    right: 16px;
  }

  .chat-fab small {
    display: none;
  }

  .chat-fab-icon {
    font-size: 20px;
  }

  .chat-message {
    max-width: 90%;
  }
}

.kanban-board {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  display: grid;
}

.kanban-column {
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 10px;
  flex-direction: column;
  min-height: 400px;
  display: flex;
}

.kanban-column-header {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  display: flex;
}

.kanban-column-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}

.kanban-column-header strong {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}

.kanban-column-header small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.kanban-cards {
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 10px;
  display: flex;
  overflow-y: auto;
}

.kanban-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  transition: border-color .15s, box-shadow .15s;
  animation: .2s kanban-card-in;
  display: flex;
}

.kanban-card:hover {
  border-color: #00000026;
  box-shadow: 0 2px 8px #0000000f;
}

.kanban-card.active {
  border-color: #5b8def;
  box-shadow: 0 0 0 2px #5b8def26;
}

.kanban-card.done {
  opacity: .8;
}

.kanban-card.failed {
  border-color: var(--signal);
}

@keyframes kanban-card-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kanban-card-content {
  color: var(--ink);
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.kanban-card-response {
  margin: 0;
}

.kanban-card-response summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.kanban-card-response p {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
}

.kanban-card-error {
  color: var(--signal);
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}

.kanban-card-footer {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.kanban-card-footer time {
  color: var(--muted);
  font-size: 9px;
}

.kanban-send-btn {
  border: 1px solid var(--green);
  background: var(--green);
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  transition: transform .1s;
}

.kanban-send-btn:hover {
  transform: scale(1.05);
}

.kanban-send-btn:active {
  transform: scale(.95);
}

.kanban-send-btn.retry {
  border-color: var(--signal);
  background: var(--signal);
}

.kanban-active-indicator {
  gap: 4px;
  padding: 2px 0;
  display: flex;
}

.kanban-active-indicator span {
  background: #5b8def;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1s infinite kanban-bounce;
}

.kanban-active-indicator span:nth-child(2) {
  animation-delay: .15s;
}

.kanban-active-indicator span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes kanban-bounce {
  0%, 100% {
    opacity: .4;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.kanban-empty {
  color: var(--muted);
  text-align: center;
  padding: 16px 0;
  font-size: 11px;
}

.chat-suggestions-empty {
  color: var(--muted);
  text-align: center;
  padding: 8px;
  font-size: 12px;
}

.chat-changes {
  border: 1px solid var(--line);
  background: #f9faf8;
  border-radius: 8px;
  max-width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  overflow-x: auto;
}

.chat-changes span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10px;
  font-weight: 700;
}

.chat-changes pre {
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ink);
  font-size: 10px;
  line-height: 1.4;
  font-family: var(--font-geist-mono), monospace;
  margin: 4px 0 0;
}

@media (max-width: 900px) {
  .kanban-board {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .kanban-column {
    min-height: 250px;
  }
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__04kpziu._.css.map*/