/* Generated from homepage/styles.css by webflow/tools/extract-css.js
   (run): the demo's rules for the Webflow build (nw- section classes).
   Edit the prototype, then regenerate; don't edit this file by hand. */
:root {
  --blue: #3b3bef;
  --mono: "GT Flexa Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
}

/* Webflow wraps a code embed in a div of its own. It lays out as if it were
   not there, so the demo's parts are still its parent's children. */
:where(.nw-run-sec) .w-embed { display: contents; }

/* Tags inside the demo, back to browser defaults: the site's tag styles,
   its head code and Webflow's base CSS would otherwise reach into the embed.
   As specific as a bare tag (the section is in :where), so these outrank
   those by coming later, and every class in the demo still wins. */
:where(.nw-run-sec) ul, :where(.nw-run-sec) ol { display: block; flex-direction: row; flex-wrap: nowrap; max-width: none; margin: 1em 0; padding: 0 0 0 40px; gap: normal; }
:where(.nw-run-sec) p { margin: 1em 0; }
:where(.nw-run-sec) h3 { margin: 1em 0; font-size: 1.17em; line-height: normal; font-weight: bold; text-wrap: wrap; }
:where(.nw-run-sec) img { display: inline; vertical-align: baseline; }
:where(.nw-run-sec) a { text-decoration: none; color: inherit; }
:where(.nw-run-sec) strong { font-weight: bolder; }
:where(.nw-run-sec) label { display: inline; margin-bottom: 0; letter-spacing: normal; text-transform: none; }
:where(.nw-run-sec) figure { margin: 1em 40px; }



.browser {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  will-change: transform;
}

.browser-bar {
  flex: none;
  height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  background: #dee1e6;
}

.browser-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
}

.browser-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #bfc3c9;
}

.browser-tab {
  height: 30px;
  max-width: 200px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  color: #3c4043;
  white-space: nowrap;
}

.browser-favicon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e5532d;
}

.browser-toolbar {
  flex: none;
  height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
}

.browser-nav {
  width: 20px;
  text-align: center;
  font-size: 14px;
  color: #5f6368;
}


.browser-url {
  flex: 1 1 auto;
  height: 28px;
  margin-left: 4px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  background: #f1f3f4;
  border-radius: 14px;
  font-size: 12px;
  color: #5f6368;
}
.browser-page {
  --app-accent: #e5532d;
  --app-accent-down: #c4421f;
  --app-ink: #2b211c;
  --app-muted: #8a7a6f;
  --app-line: #efe8df;
  --app-tint: #f6f0e8;
  --app-side: #fbf7f2;
  --app-chip: #f1e7dc;
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: #fff;
  color: var(--app-ink);
  font-size: 12px;
  line-height: 1.4;
}

.app-shell {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.browser-page.is-loaded .app-shell { opacity: 1; }

.app-side {
  flex: none;
  width: 128px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--app-side);
  border-right: 1px solid var(--app-line);
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 16px;
  font-weight: 600;
}

.app-logo i {
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 4px;
  background: var(--app-accent);
}

.app-nav {
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--app-muted);
  transition: background 0.2s ease, color 0.2s ease;
}

.app-nav.is-on {
  background: var(--app-chip);
  color: var(--app-ink);
}

.app-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.app-screen {
  position: absolute;
  inset: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.app-screen.is-on { opacity: 1; }

.app-head {
  height: 32px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.app-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--app-accent);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.12s ease;
}

.app-btn.is-pressed { background: var(--app-accent-down); }

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

.app-row {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--app-line);
}

.app-av {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--app-chip);
  color: var(--app-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

.app-who {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-who b { font-weight: 500; }

.app-who small,
.app-meta {
  font-size: 11px;
  color: var(--app-muted);
}

.app-badge {
  padding: 2px 8px;
  border-radius: 10px;
  background: #fff3d1;
  color: #8a5a00;
  font-size: 11px;
  font-weight: 500;
}
.app-row-new {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border-bottom-color: transparent;
  transition: height 0.32s ease, opacity 0.24s 0.08s ease, border-color 0.32s ease;
}

.app-row-new.is-in {
  height: 48px;
  opacity: 1;
  border-bottom-color: var(--app-line);
}

.app-plan {
  margin-bottom: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  background: var(--app-side);
}

.app-price {
  font-size: 14px;
  font-weight: 600;
}

.app-price small {
  font-size: 11px;
  font-weight: 400;
  color: var(--app-muted);
}
.app-modal {
  position: absolute;
  inset: 0;
  padding-top: 24px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: rgba(43, 33, 28, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s 0.2s;
}

.app-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}

.app-dialog {
  width: 248px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(43, 33, 28, 0.18);
  transform: translateY(8px);
  transition: transform 0.24s ease;
}

.app-modal.is-open .app-dialog { transform: none; }

.app-dialog .app-title { margin-bottom: 16px; }

.app-label {
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--app-muted);
}

.app-field {
  height: 32px;
  margin-bottom: 12px;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border: 1px solid #e3d9ce;
  border-radius: 8px;
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-field.is-focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(229, 83, 45, 0.16);
}

.app-caret {
  display: none;
  width: 1px;
  height: 14px;
  margin-left: 1px;
  background: var(--app-ink);
}

.app-field.is-focus .app-caret { display: inline-block; }

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

.app-select svg { color: var(--app-muted); }

.app-select-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

.app-menu {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(21, 24, 28, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s 0.16s;
}

.app-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.app-menu li {
  padding: 6px 8px;
  border-radius: 4px;
}

.app-menu li.is-hover { background: var(--app-tint); }

.app-send {
  align-self: flex-end;
  margin-top: 4px;
}
.app-toast {
  position: absolute;
  top: 254px;
  right: 16px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--app-ink);
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.16, 0.9, 0.25, 1);
}

.app-toast.is-in {
  opacity: 1;
  transform: none;
}
.planes-foot {
  position: absolute;
  inset: auto 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
}

.planes-foot > :last-child { justify-self: end; }

.planes-run {
  display: flex;
  align-items: center;
  gap: 14px;
}
.planes-clock {
  min-width: 5ch;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: #6b7078;
}

.planes-hud,
.planes-plat {
  color: #6b7078;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.planes-hud b {
  display: inline-block;
  min-width: 4ch;
  text-align: right;
  font-weight: 400;
  color: #15181c;
}
.planes-hud i {
  font-style: normal;
  color: #9aa3b8;
}
.nw-run-band .planes {
  position: relative;
  flex: none;
  height: 240px;
  margin-top: 24px;
}
.planes-plat {
  display: flex;
  align-items: center;
  gap: 11px;
}

.planes-plat > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.planes-plat img {
  display: block;
  width: 13px;
  height: 13px;
}
.planes-plat b {
  min-width: 3ch;
  text-align: right;
  font-weight: 400;
  color: #15181c;
}
.nw-run-band .planes-plat b { text-align: left; }
.planes-bar {
  display: flex;
  gap: 3px;
}

.planes-bar i {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  border: 1px solid #c8cdd8;
}

.planes-bar i::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: #6b7078;
  transform: scale(0);
  transition: transform .18s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}

.planes-bar i.is-on::after { transform: scale(1); }
.planes-tip {
  position: absolute;
  z-index: 2;
  padding: 8px 11px 9px;
  width: max-content;
  background: #15181c;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .1s linear, transform .16s cubic-bezier(0.2, 0.9, 0.3, 1.5),
    visibility 0s linear .1s;
}

.planes-tip {
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) scale(0.9);
  margin-top: -12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 220px;
}
.planes-tip.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -100%) scale(1);
  transition-delay: 0s;
}

.planes-tip[hidden] { display: none; }

.planes-tip-name {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
}

.planes-tip-plat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.planes-tip-plat img {
  display: block;
  width: 13px;
  height: 13px;
}
.planes-tip-plat img.is-dark-mark { filter: invert(1); }

.planes canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.nw-run-band .planes { margin-top: 0; }
.nw-run-band .planes {
  --planes-surface: #fff;
  /* a real shadow, and a tight one: with no outlines it is what marks where
     one sheet ends and the next begins */
  --planes-cast: rgba(26, 29, 66, 0.16);
  --planes-cast-blur: 40;
  /* failures mostly on the lower sheets' exposed edges */
  --planes-fail-edges: on;
  /* three sheets: the app window, then a smaller one for a pull request's
     tests, then the full suite */
  --planes-count: 3;
  --planes-pr-scale: 0.6;
  --planes-scale: 0.74;
  /* held lower than sleek's 400 and 0.5, so the sheets open less far and
     each still overlaps the one beneath it */
  --planes-height: 300;
  --planes-height-ratio: 0.375;
  /* a few pixels of body under each sheet, a step darker than its face so
     the edge reads against the band */
  --planes-thickness: 4;
  --planes-side: #d9dcec;
  --planes-pending: rgba(21, 24, 28, 0.28);
  --planes-ink: #00a383;
  --planes-fail: 214, 150, 0;
  --planes-lines: off;
  --planes-radius: 8;
  --planes-pad-depth: 0.09;
  --planes-pad-bottom: 64;
  --planes-run: 2200;
  /* the AI pass's cards up for a beat rather than sleek's 4.2s, and picked
     up one after another, so each comes as the last is going instead of
     piling up over it */
  --planes-fix-show: 1400;
  --planes-fix-gap: 1100;
  /* confirmed bugs: sleek's red, taken down a step to hold on white */
  --planes-bug: 226, 50, 70;
  /* the PR's sheet closer under the app window. The box cannot get shorter
     than the upright window needs, so the room taken out above goes to the
     drop below instead of to empty space under the suite. */
  --planes-gaps: 0.65 1.35;
  /* the opened stack centred in the stage, not pinned to its top */
  --planes-center: on;
}
.nw-run-band .planes-replay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  background: rgba(21, 24, 28, 0.06);
  color: #4a4f57;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility 0s linear .3s, background-color .2s, color .2s;
}

.nw-run-band .planes-replay.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s, visibility 0s, background-color .2s, color .2s;
}

.nw-run-band .planes-replay:hover { background: rgba(21, 24, 28, 0.12); color: #15181c; }
.nw-run-band .planes-replay:focus-visible { outline-color: var(--blue); }
.nw-run-band .planes-replay .mk-pause-ic {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nw-run-band .planes-foot { bottom: 0; }
.nw-run-band .planes-app {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.nw-run-band .planes-app .browser {
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(21, 24, 28, 0.08), 0 24px 48px rgba(26, 29, 66, 0.16);
}

.nw-run-band .planes-app .browser-page { background: #fff; }
.nw-run-band .planes-app .browser.is-outline {
  background: transparent;
  box-shadow: none;
  border: 1px solid #8a91a3;
}

.nw-run-band .planes-app .is-outline * {
  background: transparent !important;
  box-shadow: none !important;
  color: #8a91a3 !important;
  border-color: #8a91a3 !important;
}

.nw-run-band .planes-app .is-outline .browser-bar,
.nw-run-band .planes-app .is-outline .browser-toolbar { border-bottom: 1px solid; }

.nw-run-band .planes-app .is-outline .browser-dots i,
.nw-run-band .planes-app .is-outline .browser-favicon,
.nw-run-band .planes-app .is-outline .browser-url,
.nw-run-band .planes-app .is-outline .app-logo i,
.nw-run-band .planes-app .is-outline .app-nav.is-on,
.nw-run-band .planes-app .is-outline .app-btn,
.nw-run-band .planes-app .is-outline .app-av,
.nw-run-band .planes-app .is-outline .app-badge { border: 1px solid; }

.nw-run-band .planes-app .is-outline .browser-tab {
  border: 1px solid;
  border-bottom: 0;
}
.nw-run-band .planes-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.nw-run-band .planes-label > span {
  position: absolute;
  right: 12px;
  /* a small mark ahead of each name */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px 6px 7px;
  background: #15181c;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(26, 29, 66, 0.14);
  transform: translate(14px, -50%);
  opacity: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.nw-run-band .planes-label svg { flex: none; color: rgba(255, 255, 255, 0.7); }

.nw-run-band .planes-label.is-out > span {
  transform: translate(0, -50%);
  opacity: 1;
  transition: transform .42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity .3s linear;
}

@media (prefers-reduced-motion: reduce) {
  .nw-run-band .planes-label.is-out > span { transition: none; }
}
.nw-run-band .planes-fix {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px 9px 10px;
  width: max-content;
  background: #15181c;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(26, 29, 66, 0.18);
  transform-origin: 50% 100%;
  transform: scale(0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s linear, transform .18s cubic-bezier(0.2, 0.9, 0.3, 1.5),
    visibility 0s linear .12s;
}

.nw-run-band .planes-fix[data-side="below"] { transform-origin: 50% 0; }

.nw-run-band .planes-fix.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nw-run-band .planes-fix .is-bug-mark,
.nw-run-band .planes-fix.is-bug .is-pass { display: none; }
.nw-run-band .planes-fix.is-bug .is-bug-mark { display: block; color: rgb(255, 77, 94); }

.nw-run-band .planes-fix-mark {
  flex: none;
  margin-top: 2px;
  color: #0df2cc;
}

.nw-run-band .planes-fix-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nw-run-band .planes-fix-title {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
}

.nw-run-band .planes-fix-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 900px) {
  .nw-run-band .planes-run { display: none; }
  .nw-run-band .planes-foot {
    grid-template-columns: auto auto;
    justify-content: space-between;
    column-gap: 12px;
  }
  .nw-run-band .planes-hud { white-space: nowrap; }
}

@media (max-width: 480px) {
  .nw-run-band .planes-foot {
    grid-template-columns: auto;
    justify-content: start;
    row-gap: 6px;
  }
}

@media (max-width: 600px) {
  .nw-run-band .planes {
    --planes-scale: 0.92;
    --planes-height-ratio: 1;
    --planes-cols: 30;
    --planes-rows: 8;
    --planes-dot: 3;
    --planes-fail-dot: 4.4;
  }
  .nw-run-band .planes-fix { display: none; }
}

.mk-pause {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.mk-pause[hidden] { display: none; }
.mk-pause:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.mk-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mk-pause-ic { display: block; width: 12px; height: 12px; fill: currentColor; }
.mk-pause-ic-play,
.mk-pause[aria-label^="Play"] .mk-pause-ic-pause { display: none; }
.mk-pause[aria-label^="Play"] .mk-pause-ic-play { display: block; }