/* [project]/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-border-style: solid;
      --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-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 {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .isolate {
    isolation: isolate;
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .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, );
  }
}

:root {
  --paper: #f3f4f1;
  --panel: #fff;
  --panel2: #f7f8f5;
  --panel3: #eceee9;
  --line: #dfe3dd;
  --line2: #e8ece6;
  --ink: #1a2420;
  --ink2: #39463f;
  --muted: #5b6862;
  --teal: #0e7a5c;
  --teal2: #e2f0ea;
  --teal3: #8fc4b1;
  --tealglow: #0e7a5c26;
  --good: #0e7a5c;
  --good2: #e2f0ea;
  --warn: #b26a10;
  --warn2: #f6ecdc;
  --crit: #c2452d;
  --crit2: #f6e0db;
  --ag1: #6d5acf;
  --ag2: #1f5d8c;
  --ag3: #b26a10;
  --ag4: #2e6b53;
  --ag5: #7a3b52;
  --btnink: #fff;
  --sh1: 0 1px 2px #1a24200d, 0 1px 3px #1a24200a;
  --sh2: 0 2px 4px #1a24200d, 0 6px 16px #1a242012;
  --sh3: 0 8px 20px #1a24201a, 0 24px 48px #1a24201f;
  --ring: 0 0 0 3px var(--tealglow);
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }

  :root:not([data-theme="light"]) {
    --paper: #101614;
    --panel: #182019;
    --panel2: #131a16;
    --panel3: #1d2620;
    --line: #26302a;
    --line2: #1a2420;
    --ink: #e8ece7;
    --ink2: #b6c4bd;
    --muted: #93a09a;
    --teal: #35b58e;
    --teal2: #1a2e27;
    --teal3: #215347;
    --tealglow: #35b58e33;
    --good: #35b58e;
    --good2: #12281f;
    --warn: #e0a04e;
    --warn2: #2e2517;
    --crit: #e07a63;
    --crit2: #2a1713;
    --ag1: #9b8cf0;
    --ag2: #6ba3d0;
    --ag3: #c79a4e;
    --ag4: #63ae8c;
    --ag5: #bc7a91;
    --btnink: #0c1512;
    --sh1: 0 1px 2px #10161466, 0 1px 3px #1016144d;
    --sh2: 0 2px 4px #10161466, 0 6px 16px #10161473;
    --sh3: 0 8px 20px #1016148c, 0 24px 48px #10161499;
  }
}

:root[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --paper: #101614;
  --panel: #182019;
  --panel2: #131a16;
  --panel3: #1d2620;
  --line: #26302a;
  --line2: #1a2420;
  --ink: #e8ece7;
  --ink2: #b6c4bd;
  --muted: #93a09a;
  --teal: #35b58e;
  --teal2: #1a2e27;
  --teal3: #215347;
  --tealglow: #35b58e33;
  --good: #35b58e;
  --good2: #12281f;
  --warn: #e0a04e;
  --warn2: #2e2517;
  --crit: #e07a63;
  --crit2: #2a1713;
  --ag1: #9b8cf0;
  --ag2: #6ba3d0;
  --ag3: #c79a4e;
  --ag4: #63ae8c;
  --ag5: #bc7a91;
  --btnink: #0c1512;
  --sh1: 0 1px 2px #10161466, 0 1px 3px #1016144d;
  --sh2: 0 2px 4px #10161466, 0 6px 16px #10161473;
  --sh3: 0 8px 20px #1016148c, 0 24px 48px #10161499;
}

:root[data-theme="light"] {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --paper: #f3f4f1;
  --panel: #fff;
  --panel2: #f7f8f5;
  --panel3: #eceee9;
  --line: #dfe3dd;
  --line2: #e8ece6;
  --ink: #1a2420;
  --ink2: #39463f;
  --muted: #5b6862;
  --teal: #0e7a5c;
  --teal2: #e2f0ea;
  --teal3: #8fc4b1;
  --tealglow: #0e7a5c26;
  --good: #0e7a5c;
  --good2: #e2f0ea;
  --warn: #b26a10;
  --warn2: #f6ecdc;
  --crit: #c2452d;
  --crit2: #f6e0db;
  --btnink: #fff;
  --sh1: 0 1px 2px #1a24200d, 0 1px 3px #1a24200a;
  --sh2: 0 2px 4px #1a24200d, 0 6px 16px #1a242012;
  --sh3: 0 8px 20px #1a24201a, 0 24px 48px #1a24201f;
}

:root {
  --s1: .25rem;
  --s2: .375rem;
  --s3: .5rem;
  --s4: .75rem;
  --s5: 1rem;
  --s6: 1.375rem;
  --s7: 1.75rem;
  --s8: 2.5rem;
  --r1: 6px;
  --r2: 9px;
  --r3: 13px;
  --r4: 18px;
  --rfull: 999px;
  --t1: .68rem;
  --t2: .75rem;
  --t3: .8rem;
  --t4: .875rem;
  --t5: .95rem;
  --t6: 1.08rem;
  --t7: 1.3rem;
  --t8: 1.6rem;
  --track: .07em;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  --serif: Charter,"Iowan Old Style",Georgia,serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --out: cubic-bezier(.16,1,.3,1);
  --d1: .11s;
  --d2: .19s;
  --d3: .32s;
  --d4: .52s;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4 {
  letter-spacing: -.015em;
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
}

::selection {
  background: var(--teal2);
  color: var(--teal);
}

code, kbd {
  font-family: var(--mono);
  font-size: .86em;
}

.sr {
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r1);
}

.lbl {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s1);
  font-weight: 500;
  display: block;
}

.quiet {
  color: var(--muted);
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.row {
  gap: var(--s3);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.btn {
  background: var(--teal);
  color: var(--btnink);
  border-radius: var(--r2);
  padding: var(--s2) var(--s4);
  font: inherit;
  font-size: var(--t3);
  cursor: pointer;
  box-shadow: var(--sh1);
  transition: filter var(--d1) var(--ease), box-shadow var(--d1) var(--ease),
             transform var(--d1) var(--ease), border-color var(--d1) var(--ease),
             background var(--d1) var(--ease), opacity var(--d1) var(--ease);
  border: 1px solid #0000;
  font-weight: 600;
  line-height: 1.35;
}

.btn:hover {
  filter: brightness(1.09);
  box-shadow: var(--sh2);
  transform: translateY(-1px);
}

.btn:active {
  box-shadow: var(--sh1);
  filter: brightness(.96);
  transform: translateY(0);
}

.btn.sec {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

.btn.sec:hover {
  border-color: var(--teal3);
  background: var(--panel2);
  filter: none;
}

.btn.dg {
  background: var(--panel);
  color: var(--crit);
  border-color: var(--crit);
}

.btn.dg:hover {
  background: var(--crit2);
  filter: none;
}

.btn.sm {
  padding: var(--s1) var(--s3);
  font-size: var(--t2);
  border-radius: var(--r1);
}

.btn:disabled, .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
  transform: none;
}

input, select, textarea {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: var(--t3);
  color: var(--ink);
  width: 100%;
  transition: border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease),
             background var(--d1) var(--ease);
}

input:hover, select:hover, textarea:hover {
  border-color: var(--teal3);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  box-shadow: var(--ring);
  outline: none;
}

input::placeholder, textarea::placeholder {
  color: var(--muted);
  opacity: .85;
}

textarea {
  resize: vertical;
  line-height: 1.55;
}

select {
  cursor: pointer;
}

.p {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--r1);
  background: var(--panel3);
  color: var(--muted);
  white-space: nowrap;
  padding: .1rem .38rem;
  font-weight: 500;
  line-height: 1.5;
  display: inline-block;
  box-shadow: inset 0 0 0 1px #0000000a;
}

.p.ok {
  background: var(--good2);
  color: var(--good);
}

.p.wa {
  background: var(--warn2);
  color: var(--warn);
}

.p.no {
  background: var(--crit2);
  color: var(--crit);
}

.p.te {
  background: var(--teal2);
  color: var(--teal);
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  margin-bottom: var(--s4);
  box-shadow: var(--sh1);
  transition: box-shadow var(--d2) var(--ease), border-color var(--d2) var(--ease);
  overflow: hidden;
}

.card-h {
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line2);
  background: var(--panel2);
  display: flex;
}

.card-h h3 {
  font-size: var(--t4);
}

.card-h .hint {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  margin-left: auto;
}

.card-b {
  padding: var(--s4);
}

.note, .warnbox, .critbox {
  border-left: 3px solid var(--teal);
  background: var(--teal2);
  border-radius: 0 var(--r2) var(--r2) 0;
  padding: var(--s3) var(--s4);
  font-size: var(--t3);
  margin: var(--s3) 0;
  color: var(--ink2);
  line-height: 1.55;
}

.warnbox {
  border-color: var(--warn);
  background: var(--warn2);
}

.critbox {
  border-color: var(--crit);
  background: var(--crit2);
}

.note > b:first-child, .warnbox > b:first-child, .critbox > b:first-child {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  margin-bottom: var(--s1);
  color: var(--ink);
  display: block;
}

.app {
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
}

.side {
  background: var(--panel2);
  border-right: 1px solid var(--line);
  padding: var(--s4) var(--s3);
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.brand {
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s5);
  display: flex;
}

.brandmark {
  border-radius: var(--r2);
  background: var(--teal);
  width: 28px;
  height: 28px;
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--btnink);
  box-shadow: var(--sh1);
  flex: none;
  place-items: center;
  font-weight: 700;
  display: grid;
}

.brand b {
  font-size: var(--t5);
  letter-spacing: -.015em;
}

.wsw {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  width: 100%;
  padding: var(--s3) var(--s3);
  cursor: pointer;
  margin-bottom: var(--s4);
  color: var(--ink);
  box-shadow: var(--sh1);
  transition: border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease),
             transform var(--d1) var(--ease);
}

.wsw:hover {
  border-color: var(--teal3);
  box-shadow: var(--sh2);
  transform: translateY(-1px);
}

.wsw:active {
  transform: translateY(0);
}

.wsw s {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  display: block;
}

.wsw b {
  font-size: var(--t3);
  margin: 1px 0;
  display: block;
}

.navb {
  align-items: center;
  gap: var(--s3);
  text-align: left;
  border-radius: var(--r2);
  width: 100%;
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: var(--t3);
  color: var(--ink2);
  cursor: pointer;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
  background: none;
  border: 0;
  text-decoration: none;
  display: flex;
  position: relative;
}

.navb:before {
  content: "";
  background: var(--teal);
  width: 3px;
  height: 0;
  transition: height var(--d2) var(--out);
  border-radius: 0 3px 3px 0;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.navb:hover {
  background: var(--panel3);
  color: var(--ink);
}

.navb[aria-current="true"] {
  background: var(--teal2);
  color: var(--teal);
  font-weight: 600;
}

.navb[aria-current="true"]:before {
  height: 60%;
}

.navb .n {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.navb[aria-current="true"] .n {
  color: var(--teal);
}

.navgap {
  margin-top: auto;
}

.main {
  padding: var(--s6) var(--s7) var(--s8);
  min-width: 0;
}

.hd {
  margin-bottom: var(--s5);
  max-width: 72ch;
}

.hd h2 {
  font-family: var(--serif);
  text-wrap: balance;
  font-weight: 600;
  font-size: var(--t7);
  margin-bottom: var(--s1);
}

.hd p {
  font-size: var(--t4);
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.grid {
  gap: var(--s4);
  display: grid;
}

.g2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.g3 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.metrics {
  gap: var(--s3);
  margin-bottom: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  display: grid;
}

.k {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s4);
  background: var(--panel);
  box-shadow: var(--sh1);
  transition: box-shadow var(--d2) var(--ease), transform var(--d2) var(--ease);
}

.k:hover {
  box-shadow: var(--sh2);
  transform: translateY(-1px);
}

.k h6 {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s1);
  font-weight: 500;
}

.k .v {
  font-family: var(--serif);
  font-size: var(--t8);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-weight: 600;
  line-height: 1.05;
}

.k s {
  font-size: var(--t2);
  color: var(--muted);
  text-decoration: none;
}

.tabs {
  gap: var(--s1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
  display: flex;
}

.tab {
  padding: var(--s3) var(--s4);
  font: inherit;
  font-size: var(--t3);
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--r1) var(--r1) 0 0;
  transition: color var(--d1) var(--ease), border-color var(--d2) var(--ease),
             background var(--d1) var(--ease);
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--ink);
  background: var(--panel2);
}

.tab[aria-selected="true"] {
  color: var(--teal);
  border-bottom-color: var(--teal);
  font-weight: 600;
}

.fld {
  margin-bottom: var(--s4);
}

.fld .help {
  font-size: var(--t2);
  color: var(--muted);
  margin-top: var(--s1);
  line-height: 1.5;
}

.alist {
  gap: var(--s3);
  display: grid;
}

.arow {
  gap: var(--s4);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  width: 100%;
  padding: var(--s4);
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--sh1);
  transition: border-color var(--d1) var(--ease), background var(--d1) var(--ease),
             box-shadow var(--d2) var(--ease), transform var(--d2) var(--ease);
  grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr) auto;
  align-items: center;
  display: grid;
}

.arow:hover {
  border-color: var(--teal3);
  background: var(--panel2);
  box-shadow: var(--sh2);
  transform: translateY(-1px);
}

.arow:active {
  box-shadow: var(--sh1);
  transform: translateY(0);
}

.adot {
  background: var(--tc);
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 3px var(--tc);
  border-radius: 50%;
  flex: none;
}

@supports (color: color-mix(in lab, red, red)) {
  .adot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 18%, transparent);
  }
}

.arow.off .adot {
  background: var(--muted);
  box-shadow: none;
}

.aname b {
  font-size: var(--t4);
  letter-spacing: -.01em;
  display: block;
}

.aname s {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tc);
  text-decoration: none;
}

.ameta {
  font-size: var(--t2);
  color: var(--muted);
  line-height: 1.5;
}

.aacts {
  gap: var(--s2);
  flex: none;
  align-items: center;
  display: flex;
}

@media (max-width: 780px) {
  .arow {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ameta, .aacts {
    grid-column: 2;
  }
}

.conn {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  padding: var(--s4);
  margin-bottom: var(--s3);
  box-shadow: var(--sh1);
  transition: border-color var(--d1) var(--ease), box-shadow var(--d2) var(--ease),
             transform var(--d2) var(--ease);
}

.conn:hover {
  box-shadow: var(--sh2);
  transform: translateY(-1px);
}

.conn.live {
  background: var(--panel2);
  border-color: var(--teal3);
}

.conn-h {
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s2);
  flex-wrap: wrap;
  display: flex;
}

.conn-h b {
  font-size: var(--t4);
  letter-spacing: -.01em;
}

.conn-use {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  margin-left: auto;
}

.cg {
  margin-top: var(--s3);
}

.cg h6 {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s1);
  font-weight: 500;
}

.cg ul {
  margin: 0;
  padding-left: 1.1rem;
}

.cg li {
  font-size: var(--t2);
  line-height: 1.6;
}

.cg ul.deny li {
  color: var(--crit);
}

.mono-block {
  font-family: var(--mono);
  font-size: var(--t2);
  background: var(--panel3);
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  padding: var(--s3) var(--s4);
  margin: var(--s2) 0;
  white-space: pre;
  line-height: 1.65;
  overflow-x: auto;
}

.toolrow {
  gap: var(--s3);
  border-top: 1px solid var(--line2);
  padding: var(--s3) 0;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  display: grid;
}

.toolrow:first-of-type {
  border-top: 0;
}

.toolrow b {
  font-family: var(--mono);
  font-size: var(--t3);
  font-weight: 600;
}

.toolrow s {
  font-size: var(--t2);
  color: var(--muted);
  line-height: 1.5;
  text-decoration: none;
  display: block;
}

.sw {
  border-radius: var(--rfull);
  background: var(--panel3);
  border: 1px solid var(--line);
  cursor: pointer;
  width: 38px;
  height: 22px;
  transition: background var(--d2) var(--ease), border-color var(--d2) var(--ease);
  flex: none;
  padding: 0;
  position: relative;
}

.sw:after {
  content: "";
  background: var(--muted);
  width: 16px;
  height: 16px;
  box-shadow: var(--sh1);
  transition: left var(--d2) var(--out), background var(--d2) var(--ease);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
}

.sw[aria-checked="true"] {
  background: var(--teal2);
  border-color: var(--teal3);
}

.sw[aria-checked="true"]:after {
  background: var(--teal);
  left: 18px;
}

.sw:not([disabled]):hover {
  border-color: var(--teal3);
}

.sw[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.ogroup {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  margin-bottom: var(--s3);
  background: var(--panel);
  box-shadow: var(--sh1);
  overflow: hidden;
}

.ohead {
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--panel2);
  border-bottom: 1px solid var(--line2);
  display: flex;
}

.ohead i {
  background: var(--tc);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px var(--tc);
  border-radius: 50%;
  flex: none;
}

@supports (color: color-mix(in lab, red, red)) {
  .ohead i {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 16%, transparent);
  }
}

.ohead b {
  font-size: var(--t4);
}

.ocount {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
}

.oest {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  margin-left: auto;
}

.trow {
  gap: var(--s4);
  text-align: left;
  border: 0;
  border-top: 1px solid var(--line2);
  width: 100%;
  padding: var(--s3) var(--s4);
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  transition: background var(--d1) var(--ease), box-shadow var(--d1) var(--ease);
  background: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) auto;
  align-items: baseline;
  display: grid;
}

.obody > .trow:first-child {
  border-top: 0;
}

.trow:hover {
  background: var(--panel2);
}

.trow.on {
  background: var(--panel2);
  box-shadow: inset 3px 0 0 var(--tc);
}

.tmain b {
  font-size: var(--t3);
  line-height: 1.45;
  display: block;
}

.tfrom {
  margin-top: var(--s1);
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: .05em;
  color: var(--tc);
  border: 1px solid var(--line2);
  border-radius: var(--r1);
  padding: 0 .3rem;
  display: inline-block;
}

.tout {
  font-size: var(--t2);
  color: var(--ink2);
  line-height: 1.5;
}

.tchips {
  gap: var(--s1);
  flex: none;
  align-items: center;
  display: flex;
}

.tdetail {
  gap: var(--s4);
  padding: var(--s4);
  background: var(--panel3);
  border-top: 1px solid var(--line2);
  animation: reveal var(--d3) var(--out) both;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  display: grid;
}

.td h6 {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s1);
  font-weight: 500;
}

.td p {
  font-size: var(--t2);
  margin: 0;
  line-height: 1.55;
}

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

  .tchips {
    justify-content: flex-start;
  }
}

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--r3);
  padding: var(--s7);
  text-align: center;
  background: var(--panel2);
}

.empty h3 {
  font-size: var(--t5);
  margin-bottom: var(--s2);
}

.empty p {
  font-size: var(--t3);
  color: var(--muted);
  max-width: 48ch;
  margin: 0 auto var(--s4);
}

.steps {
  gap: var(--s2);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
  display: flex;
}

.stp {
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--rfull);
  padding: var(--s1) var(--s4);
  background: var(--panel);
  cursor: pointer;
  transition: border-color var(--d1) var(--ease), color var(--d1) var(--ease),
             background var(--d1) var(--ease);
  display: flex;
}

.stp:hover {
  border-color: var(--teal3);
  color: var(--ink);
}

.stp[aria-current="true"] {
  border-color: var(--teal3);
  color: var(--teal);
  background: var(--teal2);
}

.stp.done {
  color: var(--good);
  border-color: var(--good2);
  background: var(--good2);
}

.startwrap {
  min-height: 72vh;
  padding: var(--s5);
  place-items: center;
  display: grid;
}

.startbox {
  width: 100%;
  max-width: 580px;
  animation: rise var(--d4) var(--out) both;
}

.startbox h2 {
  font-family: var(--serif);
  text-wrap: balance;
  font-weight: 600;
  font-size: var(--t7);
  margin-bottom: var(--s2);
}

.startbox > p {
  font-size: var(--t4);
  color: var(--muted);
  margin-bottom: var(--s5);
}

.runwrap {
  gap: var(--s6);
  margin: calc(var(--s6) * -1) calc(var(--s7) * -1) calc(var(--s8) * -1);
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
}

.rail {
  border-right: 1px solid var(--line);
  padding: var(--s5) var(--s4) var(--s7);
  background: var(--panel2);
  overflow-y: auto;
}

.rsec {
  padding-bottom: var(--s4);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line2);
}

.rlbl {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
  display: block;
}

.rco {
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s2);
  display: flex;
}

.rav {
  background: var(--panel3);
  border: 1px solid var(--line);
  width: 24px;
  height: 24px;
  font-family: var(--mono);
  font-size: var(--t1);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-weight: 700;
  display: grid;
}

.rav.big {
  width: 34px;
  height: 34px;
  font-size: var(--t3);
}

.rco b {
  font-size: var(--t3);
}

.rco s {
  font-size: var(--t2);
  color: var(--muted);
  text-decoration: none;
}

.rdesc {
  font-size: var(--t2);
  color: var(--ink2);
  margin: 0;
  line-height: 1.6;
}

.rhead {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}

.rhead b {
  color: var(--ink);
}

.chips {
  gap: var(--s1);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.chip {
  align-items: center;
  gap: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  padding: var(--s1) var(--s2);
  font-size: var(--t1);
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--panel);
  display: flex;
  overflow: hidden;
}

.chip i {
  background: var(--panel3);
  width: 13px;
  height: 13px;
  font-family: var(--mono);
  border-radius: 3px;
  flex: none;
  place-items: center;
  font-size: .46rem;
  font-style: normal;
  font-weight: 700;
  display: grid;
}

.rmore {
  padding: var(--s2) 0 0;
  font: inherit;
  font-size: var(--t2);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--d1) var(--ease);
  background: none;
  border: 0;
}

.rmore:hover {
  color: var(--teal);
}

.rseg {
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s1);
  transition: border-color var(--d1) var(--ease), background var(--d1) var(--ease);
  display: flex;
}

.rseg b {
  font-size: var(--t2);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  overflow: hidden;
}

.rseg span {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  margin-left: auto;
}

.rseg.on {
  border-color: var(--teal3);
  background: var(--panel);
}

.rlog {
  border-top: 1px solid var(--line2);
  padding-top: var(--s4);
  margin-top: var(--s2);
}

.rlogh {
  align-items: center;
  gap: var(--s2);
  font-size: var(--t2);
  margin-bottom: var(--s2);
  display: flex;
}

.rlogh i {
  --beat: var(--teal);
  background: var(--beat);
  width: 7px;
  height: 7px;
  animation: beat 1.6s var(--ease) infinite;
  border-radius: 50%;
  flex: none;
}

.rlog.done .rlogh i {
  --beat: var(--good);
  box-shadow: none;
  animation: none;
}

.rlog.wait .rlogh i {
  --beat: var(--warn);
}

.rlog.back .rlogh {
  color: var(--warn);
}

.rlog.back .rlogh i {
  --beat: var(--warn);
}

.rline {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  white-space: pre;
  text-overflow: ellipsis;
  animation: slidein var(--d3) var(--out) both;
  line-height: 1.85;
  overflow: hidden;
}

.rline.ok {
  color: var(--ink2);
}

.rline.now {
  color: var(--teal);
}

.stagecol {
  padding: var(--s5) var(--s7) var(--s7) 0;
  min-width: 0;
}

.stepper {
  margin-bottom: var(--s6);
  align-items: center;
  display: flex;
}

.stpn {
  flex: 1;
  align-items: center;
  min-width: 0;
  display: flex;
}

.stpn:last-child {
  flex: none;
}

.stpn:has(.stpill) {
  flex: 2.6;
}

.stnum {
  border: 1px solid var(--line);
  width: 26px;
  height: 26px;
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  background: var(--panel);
  transition: border-color var(--d2) var(--ease), color var(--d2) var(--ease),
             background var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
}

.stpn.done .stnum {
  border-color: var(--good);
  color: var(--good);
  background: var(--good2);
}

.stnum.go {
  cursor: pointer;
}

.stnum.go:hover {
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: var(--ring);
}

.stnum:disabled {
  cursor: default;
}

.stpill {
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--line2);
  border-radius: var(--rfull);
  padding: var(--s2) var(--s4);
  font-size: var(--t3);
  background: var(--panel);
  box-shadow: var(--sh1);
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  transition: border-color var(--d1) var(--ease), color var(--d1) var(--ease),
             box-shadow var(--d2) var(--ease);
  flex: 0 auto;
  display: inline-flex;
  overflow: hidden;
}

.stpill i {
  --beat: var(--teal);
  background: var(--beat);
  width: 7px;
  height: 7px;
  animation: beat 1.6s var(--ease) infinite;
  border-radius: 50%;
  flex: none;
}

.stpill[data-goview] {
  cursor: pointer;
}

.stpill[data-goview]:hover {
  border-color: var(--teal3);
  color: var(--teal);
  box-shadow: var(--sh2);
}

.stbar {
  background: var(--line);
  height: 2px;
  margin: 0 var(--s3);
  transition: background var(--d3) var(--ease);
  border-radius: 2px;
  flex: 1;
}

.stpn.done .stbar {
  background: var(--good);
}

.stage {
  min-height: 54vh;
}

.mid {
  padding-top: var(--s5);
  place-items: start center;
  display: grid;
}

.mid.wide .ocard {
  width: 100%;
  max-width: none;
}

.ocard {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  padding: var(--s4) var(--s5);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--sh1);
  animation: rise var(--d3) var(--out) both;
  transition: border-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease),
             opacity var(--d2) var(--ease);
}

.ocard.sm {
  padding: var(--s3) var(--s4);
}

.ocard.live {
  border-color: var(--tc);
  box-shadow: var(--sh2);
}

.ocard.dim {
  opacity: .55;
}

.ocard.mine {
  border-style: dashed;
  border-color: var(--tc);
}

.ocard-h {
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s3);
  display: flex;
}

.ocard-h b {
  font-size: var(--t5);
  letter-spacing: -.01em;
  display: block;
}

.ocard-h s {
  font-size: var(--t2);
  color: var(--muted);
  text-decoration: none;
  display: block;
}

.ocard > p {
  font-size: var(--t3);
  color: var(--ink2);
  margin: 0;
  line-height: 1.6;
}

.ocard .why {
  font-size: var(--t2);
  color: var(--muted);
  margin: 0 0 var(--s2);
  line-height: 1.55;
}

.ev {
  border-top: 1px solid var(--line2);
  margin-top: var(--s4);
  padding-top: var(--s3);
}

.evrow {
  margin-bottom: var(--s2);
}

.evrow b {
  font-size: var(--t2);
  font-weight: 500;
  display: block;
}

.evrow s {
  font-size: var(--t1);
  color: var(--muted);
  text-decoration: none;
  display: block;
}

.two {
  gap: var(--s5);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

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

.two h6 {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s2);
  font-weight: 500;
}

.pbox {
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  padding: var(--s3) var(--s4);
  font-size: var(--t3);
  background: var(--panel2);
  line-height: 1.6;
}

.qrow {
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s1);
  font-size: var(--t2);
  color: var(--ink2);
  background: var(--panel2);
}

.crow {
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s1);
  font-size: var(--t2);
  background: var(--panel2);
  display: flex;
}

.crow i {
  background: var(--panel3);
  width: 15px;
  height: 15px;
  font-family: var(--mono);
  border-radius: 4px;
  flex: none;
  place-items: center;
  font-size: .5rem;
  font-style: normal;
  font-weight: 700;
  display: grid;
}

.cards {
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  display: grid;
}

.cards > .conn {
  flex-direction: column;
  margin-bottom: 0;
  display: flex;
}

.cards > .conn > .row:has( > .btn) {
  padding-top: var(--s3);
  margin-top: auto;
}

.kv {
  gap: var(--s2);
  font-size: var(--t2);
  border-top: 1px solid var(--line2);
  padding-top: var(--s2);
  margin-top: var(--s2);
  display: flex;
}

.kv span {
  color: var(--muted);
}

.kv b {
  font-family: var(--mono);
  font-size: var(--t2);
  margin-left: auto;
}

.dtable {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  box-shadow: var(--sh1);
  overflow: hidden;
}

.dth, .dtr {
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto auto;
  align-items: baseline;
  display: grid;
}

.dth.c3, .dtr.c3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
}

.dth {
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
}

.dtr {
  border-top: 1px solid var(--line2);
  transition: background var(--d1) var(--ease);
}

.dtr:first-of-type {
  border-top: 0;
}

.dtr:hover {
  background: var(--panel2);
}

.dtr b {
  font-size: var(--t3);
  display: block;
}

.dtr s {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  text-decoration: none;
  display: block;
}

.dtr .dim {
  font-size: var(--t2);
  color: var(--ink2);
  line-height: 1.5;
}

@media (max-width: 860px) {
  .dth {
    display: none;
  }

  .dtr, .dtr.c3 {
    grid-template-columns: 1fr;
  }
}

.sk {
  border-radius: var(--r1);
  background: linear-gradient(90deg,var(--panel3) 25%,var(--line2) 37%,var(--panel3) 63%);
  height: 9px;
  animation: sweep 1.4s var(--ease) infinite;
  background-size: 400% 100%;
  display: inline-block;
}

.skrow {
  gap: var(--s4);
  margin-bottom: var(--s3);
  display: flex;
}

.skrow .sk {
  flex: 1;
}

.skcard {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s4);
  background: var(--panel);
  box-shadow: var(--sh1);
}

.skcard.wide {
  width: 100%;
  max-width: 480px;
}

.gridskel {
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  display: grid;
}

.sktable {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s4);
  background: var(--panel);
  box-shadow: var(--sh1);
}

.decide-h {
  margin-bottom: var(--s4);
  max-width: 64ch;
}

.decide-h b {
  font-size: var(--t6);
  letter-spacing: -.015em;
  display: block;
}

.decide-h s {
  font-size: var(--t3);
  color: var(--muted);
  line-height: 1.6;
  text-decoration: none;
  display: block;
}

.gsel {
  align-items: center;
  gap: var(--s3);
  border-top: 1px solid var(--line2);
  padding-top: var(--s3);
  margin-top: var(--s3);
  display: flex;
}

.gsel select {
  width: auto;
  padding: var(--s1) var(--s2);
  font-size: var(--t2);
  flex: 1;
}

.gnote {
  font-size: var(--t2);
  color: var(--crit);
  margin-top: var(--s2);
  line-height: 1.5;
}

.chatstage {
  gap: var(--s6);
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
  align-items: start;
  display: grid;
}

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

.chatcol {
  flex-direction: column;
  max-width: none;
  display: flex;
}

.side2 {
  gap: var(--s4);
  top: var(--s4);
  flex-direction: column;
  display: flex;
  position: sticky;
}

.side2 .effect {
  position: static;
}

.cb {
  border-radius: var(--r3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s3);
  font-size: var(--t4);
  animation: rise var(--d3) var(--out) both;
  line-height: 1.6;
}

.cb.sup {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  box-shadow: var(--sh1);
}

.cb.sup.live {
  border-left-width: 4px;
}

.cb.sup.done {
  border-left-color: var(--good);
}

.cb.sup b {
  font-weight: 600;
  font-size: var(--t5);
  line-height: 1.45;
  display: block;
}

.cb.sup s {
  font-size: var(--t2);
  color: var(--muted);
  margin-top: var(--s1);
  text-decoration: none;
  display: block;
}

.cb.usr {
  background: var(--teal2);
  border: 1px solid var(--teal3);
  max-width: 82%;
  color: var(--ink);
  box-shadow: var(--sh1);
  margin-left: auto;
}

.opts {
  gap: var(--s2);
  margin: var(--s4) 0 var(--s3);
  flex-direction: column;
  display: flex;
}

.opt {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s3) var(--s4);
  font: inherit;
  font-size: var(--t4);
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--sh1);
  transition: border-color var(--d1) var(--ease), background var(--d1) var(--ease),
             box-shadow var(--d2) var(--ease), transform var(--d2) var(--ease);
  display: block;
}

.opt:hover {
  border-color: var(--teal3);
  background: var(--panel2);
  box-shadow: var(--sh2);
  transform: translateY(-1px);
}

.opt:active {
  box-shadow: var(--sh1);
  transform: translateY(0);
}

.opt b {
  font-weight: 500;
  font-size: var(--t4);
  display: block;
}

.opt s {
  font-size: var(--t2);
  color: var(--muted);
  margin-top: var(--s1);
  line-height: 1.5;
  text-decoration: none;
  display: block;
}

.opt-back {
  border-style: dashed;
}

.opt-back b {
  color: var(--warn);
}

.opt-back:hover {
  border-color: var(--warn);
}

.freerow {
  gap: var(--s2);
  align-items: center;
  display: flex;
}

.rans {
  font-size: var(--t2);
  color: var(--ink2);
  border-left: 2px solid var(--line2);
  padding-left: var(--s3);
  margin-bottom: var(--s2);
  line-height: 1.55;
}

.said {
  border-top: 1px solid var(--line2);
  margin-top: var(--s2);
  padding-top: var(--s2);
  font-size: var(--t1);
  color: var(--teal);
  line-height: 1.55;
}

.segopts {
  gap: var(--s2);
  margin: var(--s3) 0 var(--s1);
  flex-direction: column;
  display: flex;
}

.segopt {
  align-items: center;
  gap: var(--s4);
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  box-shadow: var(--sh1);
  transition: border-color var(--d1) var(--ease), background var(--d1) var(--ease),
             box-shadow var(--d2) var(--ease), transform var(--d2) var(--ease);
  display: flex;
}

.segopt:hover {
  border-color: var(--teal3);
  background: var(--panel2);
  box-shadow: var(--sh2);
  transform: translateY(-1px);
}

.segopt.on {
  border-color: var(--teal);
  background: var(--teal2);
}

.segtick {
  border-radius: var(--r1);
  border: 1px solid var(--line);
  width: 19px;
  height: 19px;
  font-size: var(--t2);
  color: var(--teal);
  background: var(--panel);
  transition: border-color var(--d1) var(--ease);
  flex: none;
  place-items: center;
  display: grid;
}

.segopt.on .segtick {
  border-color: var(--teal);
}

.segtxt {
  flex: 1;
  min-width: 0;
}

.segtxt b {
  font-size: var(--t4);
  display: block;
}

.segtxt s {
  font-size: var(--t2);
  color: var(--muted);
  text-decoration: none;
  display: block;
}

.segn {
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t3);
  flex: none;
}

.segn em {
  font-style: normal;
  font-size: var(--t1);
  color: var(--muted);
  display: block;
}

.ctx {
  border-top: 1px solid var(--line2);
  padding-top: var(--s3);
  margin-top: var(--s3);
}

.ctx:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.ctx h6 {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s2);
  align-items: center;
  gap: var(--s1);
  font-weight: 500;
  display: flex;
}

.ctx p {
  font-size: var(--t2);
  margin: 0 0 var(--s1);
  line-height: 1.6;
}

.ctx .dimmer {
  color: var(--muted);
  font-size: var(--t2);
}

.cline {
  margin-bottom: var(--s2);
}

.cline b {
  align-items: center;
  gap: var(--s2);
  font-size: var(--t2);
  font-weight: 500;
  display: flex;
}

.cline b i {
  background: var(--panel3);
  width: 14px;
  height: 14px;
  font-family: var(--mono);
  border-radius: 4px;
  flex: none;
  place-items: center;
  font-size: .48rem;
  font-style: normal;
  font-weight: 700;
  display: grid;
}

.cline s {
  font-size: var(--t1);
  color: var(--muted);
  padding-left: 1.15rem;
  line-height: 1.5;
  text-decoration: none;
  display: block;
}

.effect {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  padding: var(--s4) var(--s5);
  top: var(--s4);
  box-shadow: var(--sh1);
  position: sticky;
}

.effect.intent {
  border-color: var(--teal3);
}

.effh {
  margin-bottom: var(--s4);
}

.effh b {
  font-size: var(--t4);
  display: block;
}

.effh s {
  font-size: var(--t2);
  color: var(--muted);
  text-decoration: none;
  display: block;
}

.erow {
  margin-bottom: var(--s4);
}

.ertop {
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s1);
  display: flex;
}

.ertop b {
  font-size: var(--t3);
  font-weight: 500;
}

.ertop .p {
  margin-left: auto;
}

.ebar {
  background: var(--panel3);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
}

.ebar i {
  background: var(--tc);
  height: 100%;
  transition: width var(--d4) var(--out);
  border-radius: 3px;
  display: block;
}

.edelta {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--teal);
  margin-top: var(--s1);
}

.ewhy {
  font-size: var(--t1);
  color: var(--muted);
  margin-top: var(--s1);
  line-height: 1.5;
}

.ewhy.dimmer {
  opacity: .65;
}

.ewhy .sum {
  font-family: var(--mono);
  font-size: var(--t1);
}

.ewhy .mv {
  color: var(--teal);
  font-family: var(--mono);
  font-size: var(--t1);
}

.erow.moved .ertop b {
  color: var(--tc);
}

.intentbox b {
  font-size: var(--t5);
  color: var(--teal);
  line-height: 1.4;
  display: block;
}

.intentbox s {
  font-size: var(--t2);
  color: var(--muted);
  margin-top: var(--s1);
  line-height: 1.55;
  text-decoration: none;
  display: block;
}

.intentbox.pending b {
  color: var(--muted);
}

.tally {
  border-top: 1px solid var(--line2);
  margin-top: var(--s3);
  padding-top: var(--s2);
}

.trow2 {
  gap: var(--s2);
  font-size: var(--t1);
  margin-bottom: var(--s1);
  grid-template-columns: auto 2.3rem 1fr;
  align-items: baseline;
  display: grid;
}

.trow2 > span {
  color: var(--muted);
  white-space: nowrap;
}

.trow2 > b {
  font-family: var(--mono);
  text-align: right;
  color: var(--muted);
}

.trow2 > b.up {
  color: var(--good);
}

.trow2 > b.down {
  color: var(--crit);
}

.trow2 > s {
  color: var(--ink2);
  line-height: 1.5;
  text-decoration: none;
}

.trow2.total {
  border-top: 1px solid var(--line2);
  margin-top: var(--s1);
  padding-top: var(--s1);
}

.trow2.total > span, .trow2.total > b {
  color: var(--ink);
  font-weight: 600;
}

.openbox textarea {
  font-size: var(--t5);
  min-height: 5.2rem;
  line-height: 1.6;
}

.heardbox {
  border: 1px solid var(--teal3);
  border-radius: var(--r3);
  padding: var(--s4) var(--s5);
  background: var(--teal2);
  animation: rise var(--d3) var(--out) both;
}

.heardbox.miss {
  border-color: var(--warn);
  background: var(--warn2);
}

.heardbox > b {
  font-size: var(--t6);
  margin: var(--s1) 0 var(--s2);
  letter-spacing: -.015em;
  display: block;
}

.heardbox > s {
  font-size: var(--t3);
  color: var(--ink2);
  line-height: 1.6;
  text-decoration: none;
  display: block;
}

.hits {
  font-size: var(--t2);
  color: var(--muted);
  margin-top: var(--s3);
}

.hits code {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  margin-right: var(--s1);
  padding: .04rem .3rem;
}

.hits.dimmer {
  opacity: .8;
}

.implies {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s4);
  margin-top: var(--s3);
  background: var(--panel);
  box-shadow: var(--sh1);
}

.implies .lbl {
  margin-bottom: var(--s2);
}

.implies s {
  font-size: var(--t2);
  color: var(--muted);
  margin-top: var(--s3);
  line-height: 1.55;
  text-decoration: none;
  display: block;
}

.implies .dimmer {
  font-size: var(--t3);
  color: var(--muted);
  margin: 0;
}

.login {
  min-height: 100vh;
  padding: var(--s6);
  place-items: center;
  display: grid;
}

.loginbox {
  width: 100%;
  max-width: 410px;
  animation: rise var(--d4) var(--out) both;
}

.loginbox .brand {
  padding-bottom: var(--s5);
  justify-content: center;
}

.lcard {
  border: 1px solid var(--line);
  border-radius: var(--r4);
  background: var(--panel);
  padding: var(--s6);
  box-shadow: var(--sh3);
}

.lcard h1 {
  font-family: var(--serif);
  text-wrap: balance;
  font-weight: 600;
  font-size: var(--t7);
  margin-bottom: var(--s1);
}

.lcard > p {
  font-size: var(--t3);
  color: var(--muted);
  margin-bottom: var(--s5);
}

.sso {
  gap: var(--s2);
  margin-bottom: var(--s4);
  flex-direction: column;
  display: flex;
}

.ssob {
  align-items: center;
  gap: var(--s3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  width: 100%;
  padding: var(--s3) var(--s4);
  font: inherit;
  font-size: var(--t3);
  cursor: pointer;
  color: var(--ink);
  transition: border-color var(--d1) var(--ease), background var(--d1) var(--ease),
             box-shadow var(--d2) var(--ease), transform var(--d2) var(--ease);
  display: flex;
}

.ssob:hover {
  border-color: var(--teal3);
  background: var(--panel2);
  box-shadow: var(--sh2);
  transform: translateY(-1px);
}

.ssob:active {
  transform: translateY(0);
}

.ssob i {
  border-radius: var(--r1);
  width: 18px;
  height: 18px;
  font-family: var(--mono);
  font-size: var(--t1);
  background: var(--panel3);
  color: var(--ink2);
  flex: none;
  place-items: center;
  font-style: normal;
  font-weight: 700;
  display: grid;
}

.orline {
  align-items: center;
  gap: var(--s3);
  margin: var(--s4) 0;
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
}

.orline:before, .orline:after {
  content: "";
  background: var(--line);
  flex: 1;
  height: 1px;
}

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

  .rail {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: none;
    position: static;
  }

  .stagecol {
    padding: var(--s5) var(--s5) var(--s7);
  }
}

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

  .side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    flex-flow: wrap;
    height: auto;
    position: static;
  }

  .brand, .wsw {
    width: auto;
  }

  .navgap {
    margin: 0;
  }

  .main {
    padding: var(--s5) var(--s5) var(--s7);
  }
}

@keyframes beat {
  0%, 100% {
    box-shadow: 0 0 0 0   color-mix(in srgb, var(--beat) 45%, transparent);
  }

  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--beat)  0%, transparent);
  }
}

@keyframes sweep {
  0% {
    background-position: 100%;
  }

  100% {
    background-position: 0;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes slidein {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  .btn:hover, .arow:hover, .opt:hover, .segopt:hover, .conn:hover, .k:hover, .ssob:hover, .wsw:hover {
    transform: none;
  }
}

.grasp .graspbar {
  margin-top: .4rem;
}

.graspmeter {
  font-size: var(--t2);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: .25rem 0 .5rem;
}

.graspsec {
  margin-top: .55rem;
}

.graspsec h6 {
  font-size: var(--t1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .25rem;
  font-weight: 600;
}

.graspsec .dimmer {
  color: var(--muted);
  font-size: var(--t2);
  margin: 0;
  font-style: italic;
}

.graspfact {
  background: var(--panel2);
  border: 1px solid var(--line2);
  font-size: var(--t2);
  border-radius: 8px;
  align-items: flex-start;
  gap: .4rem;
  margin-bottom: .3rem;
  padding: .35rem .5rem;
  line-height: 1.4;
  display: flex;
}

.graspfact .conf {
  font-size: var(--t0, .62rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 4px;
  flex: none;
  margin-top: .1rem;
  padding: .1rem .35rem;
}

.graspfact .conf.confirmed {
  background: var(--good2);
  color: var(--good);
}

.graspfact .conf.inferred {
  background: var(--warn2);
  color: var(--warn);
}

.briefwrap {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.briefcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem .9rem;
}

.briefcard h6 {
  font-size: var(--t1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .3rem;
  font-weight: 600;
}

.briefcard p {
  font-size: var(--t4);
  margin: 0;
  line-height: 1.55;
}

.briefcard.pain {
  border-left: 3px solid var(--crit);
}

.briefcard.goal {
  border-left: 3px solid var(--good);
}

.briefvia {
  font-size: var(--t2);
  color: var(--muted);
  margin: .2rem 0 0;
}

.bpbar {
  grid-template-columns: 1.2fr 1.4fr 1.4fr;
  gap: .6rem;
  margin-bottom: .8rem;
  display: grid;
}

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

.bpbar > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem .9rem;
}

.bplabel {
  font-size: var(--t1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
  font-weight: 600;
  display: block;
}

.bpgoal {
  border-left: 3px solid var(--good);
}

.bpgoal b {
  font-size: var(--t5, 1rem);
  line-height: 1.35;
  display: block;
}

.bpgoal s {
  color: var(--muted);
  font-size: var(--t2);
  margin-top: .3rem;
  display: block;
}

.bpgoal.unset {
  border-left-color: var(--warn);
}

.bpgoal.unset b {
  color: var(--muted);
  font-weight: 500;
  font-size: var(--t3);
}

.bppilot .bptitle {
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
  display: flex;
}

.bppilot p {
  color: var(--muted);
  font-size: var(--t2);
  margin: 0;
  line-height: 1.5;
}

.bpguard ul {
  color: var(--muted);
  font-size: var(--t2);
  margin: 0;
  padding-left: 1rem;
}

.bpguard li {
  margin-bottom: .25rem;
  line-height: 1.45;
}

.skillrow {
  flex-wrap: wrap;
  gap: .3rem;
  margin: .5rem 0 .2rem;
  display: flex;
}

.skillchip {
  font-size: var(--t1);
  font-family: var(--mono, ui-monospace, monospace);
  background: var(--panel2);
  border: 1px solid var(--line2);
  color: var(--muted);
  cursor: default;
  border-radius: 6px;
  padding: .15rem .45rem;
}

.reach {
  flex-direction: column;
  gap: 1rem;
  margin-bottom: .8rem;
  display: flex;
}

.reachsec h5 {
  font-size: var(--t4);
  margin: 0 0 .3rem;
}

.reachsec > .dimmer {
  color: var(--muted);
  font-size: var(--t2);
  margin: 0 0 .6rem;
}

.changrid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .6rem;
  display: grid;
}

.chan {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-direction: column;
  gap: .3rem;
  padding: .65rem .8rem;
  display: flex;
}

.chan.on {
  border-color: var(--teal3);
}

.chantop {
  align-items: center;
  gap: .45rem;
  display: flex;
}

.chantop b {
  font-size: var(--t3);
}

.chantop .sw {
  background: var(--line);
  border-radius: 9px;
  flex: none;
  width: 30px;
  height: 17px;
  margin-left: auto;
  position: relative;
}

.chantop .sw:after {
  content: "";
  background: var(--panel);
  border-radius: 50%;
  width: 13px;
  height: 13px;
  position: absolute;
  top: 2px;
  left: 2px;
}

.chantop .sw.on {
  background: var(--teal);
}

.chantop .sw.on:after {
  left: auto;
  right: 2px;
}

.chantop .sw.locked {
  opacity: .45;
}

.chanrole {
  color: var(--muted);
  font-size: var(--t1);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.chan p {
  font-size: var(--t2);
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.chan .chanagents {
  color: var(--ink2);
}

.chan .chanunlock {
  font-style: italic;
}

.reqlist {
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .6rem;
  display: flex;
}

.req {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .6rem .8rem;
}

.reqtop {
  align-items: center;
  gap: .5rem;
  margin-bottom: .15rem;
  display: flex;
}

.req > s {
  color: var(--muted);
  font-size: var(--t2);
  margin-bottom: .4rem;
  display: block;
}

.scopes {
  flex-wrap: wrap;
  gap: .3rem;
  display: flex;
}

.scope {
  font-size: var(--t1);
  border-radius: 999px;
  padding: .15rem .55rem;
  line-height: 1.4;
}

.scope.ok {
  background: var(--good2);
  color: var(--good);
}

.scope.no {
  background: var(--panel3);
  color: var(--crit);
}

.tierstrip {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .5rem;
  margin-bottom: .5rem;
  display: grid;
}

.tierstrip > div {
  background: var(--panel2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: .5rem .7rem;
}

.tierstrip b {
  font-size: var(--t2);
  text-transform: capitalize;
  margin-bottom: .15rem;
  display: block;
}

.tierstrip s {
  color: var(--muted);
  font-size: var(--t1);
  line-height: 1.4;
  display: block;
}

.reach > .reachsec > p.dimmer:last-child {
  margin-top: .4rem;
}

.drive {
  margin-bottom: 1.4rem;
}

.drivenew {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .8rem;
  padding: .6rem .8rem;
  display: flex;
}

.drivenew input {
  min-width: 0;
  font: inherit;
  font-size: var(--t2);
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 7px;
  flex: 160px;
  padding: .4rem .6rem;
}

.draftcard {
  background: var(--panel);
  border: 1px solid var(--warn);
  border-radius: 10px;
  margin-bottom: .6rem;
  padding: .7rem .9rem;
}

.drafthead {
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
  display: flex;
}

.draftbody {
  font-size: var(--t3);
  white-space: pre-wrap;
  margin: 0 0 .4rem;
  line-height: 1.55;
}

.draftcard textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t3);
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 7px;
  margin-bottom: .4rem;
  padding: .5rem .6rem;
}

.draftwhy {
  font-size: var(--t2);
  color: var(--muted);
  margin: 0 0 .5rem;
  font-style: italic;
}

.rejwhy {
  min-width: 0;
  font: inherit;
  font-size: var(--t2);
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 7px;
  flex: 200px;
  padding: .35rem .55rem;
}

.drivelaunch {
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: var(--t2);
  color: var(--muted);
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  padding: .6rem .9rem;
  display: flex;
}

.drivelaunch.ok {
  border-color: var(--good);
  color: var(--good);
}

.canvaswrap {
  padding-bottom: .4rem;
  overflow-x: auto;
}

.canvasstage {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 740px;
  height: 260px;
  position: relative;
}

.canvasstage svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.cedge {
  fill: none;
  stroke: var(--teal3);
  stroke-width: 1.4px;
}

.cedge.supervision {
  stroke-dasharray: 2 5;
  opacity: .6;
}

.cedge.flow {
  stroke-dasharray: 6 6;
}

.cedge.flow.active {
  stroke: var(--teal);
  animation: 1.1s linear infinite cdash;
}

@keyframes cdash {
  to {
    stroke-dashoffset: -12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cedge.flow.active {
    animation: none;
  }
}

.celabel {
  fill: var(--muted);
  font-size: .6rem;
  font-family: var(--mono, ui-monospace, monospace);
}

.cnode {
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  border-radius: 10px;
  flex-direction: column;
  gap: .2rem;
  padding: .55rem .7rem;
  display: flex;
  position: absolute;
}

.cnode:hover, .cnode.sel {
  border-color: var(--teal);
}

.cnode.gate {
  border-style: dashed;
  border-color: var(--warn);
}

.cnode b {
  font-size: var(--t3);
  align-items: center;
  gap: .4rem;
  display: flex;
}

.cnode span {
  font-size: var(--t2);
  color: var(--ink2);
}

.cnode s {
  font-size: var(--t1);
  color: var(--muted);
}

.cnode .dot {
  background: var(--line);
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
}

.cnode .dot.running {
  background: var(--teal);
  animation: 1.6s infinite cpulse;
}

.cnode .dot.waiting {
  background: var(--warn);
  animation: 1.6s infinite cpulse;
}

@keyframes cpulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cnode .dot {
    animation: none;
  }
}

.cdetail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  margin-top: .7rem;
  padding: .7rem .9rem;
}

.cdetail h6, .cfeed h6, .clearn h6 {
  font-size: var(--t1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .4rem;
  font-weight: 600;
}

.cdetail p {
  font-size: var(--t3);
  color: var(--ink2);
  margin: 0;
  line-height: 1.5;
}

.cstats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .5rem;
  margin-bottom: .5rem;
  display: grid;
}

.cstats > div {
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: .45rem .6rem;
}

.cstats b {
  font-size: var(--t3);
  display: block;
}

.cstats s {
  color: var(--muted);
  font-size: var(--t1);
}

.cfeed {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: .7rem;
  padding: .7rem .9rem;
}

.cfeed > div {
  border-bottom: 1px dashed var(--line2);
  font-size: var(--t2);
  color: var(--muted);
  padding: .25rem 0;
}

.cfeed > div:last-child {
  border-bottom: none;
}

.cfeed .t {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--t1);
  margin-right: .5rem;
}

.clearn {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: .7rem;
  padding: .7rem .9rem;
}

.lesson {
  border-bottom: 1px dashed var(--line2);
  align-items: flex-start;
  gap: .6rem;
  padding: .4rem 0;
  display: flex;
}

.lesson:last-of-type {
  border-bottom: none;
}

.lesson .kind {
  font-size: var(--t1);
  font-family: var(--mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--teal2);
  color: var(--teal);
  border-radius: 5px;
  flex: none;
  padding: .15rem .45rem;
}

.lesson p {
  font-size: var(--t2);
  margin: 0;
  line-height: 1.5;
}

.lesson s {
  color: var(--muted);
  font-size: var(--t1);
}

.clearnfoot {
  font-size: var(--t1);
  margin-top: .5rem;
}

.skilllib {
  margin-top: 1.4rem;
}

.teachrow {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .7rem;
  padding: .6rem .8rem;
  display: flex;
}

.teachrow input {
  min-width: 0;
  font: inherit;
  font-size: var(--t2);
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 7px;
  flex: 320px;
  padding: .45rem .6rem;
}

.skillgrid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .6rem;
  margin-bottom: .8rem;
  display: grid;
}

.skillcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: .6rem .8rem;
  display: flex;
}

.skillcard.draft {
  border-style: dashed;
  border-color: var(--warn);
}

.skillcard.live {
  border-color: var(--teal3);
}

.skilltop {
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  display: flex;
}

.skilltop b {
  font-size: var(--t3);
}

.skillbody {
  font-size: var(--t2);
  color: var(--ink2);
  margin: 0;
  line-height: 1.5;
}

.skillcard > s {
  color: var(--muted);
  font-size: var(--t1);
}

.promoterow, .builtinrow {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: .7rem;
  padding: .6rem .8rem;
}

.promoterow h6, .builtinrow h6 {
  font-size: var(--t1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .4rem;
  font-weight: 600;
}

.promoteitem {
  border-bottom: 1px dashed var(--line2);
  justify-content: space-between;
  align-items: center;
  gap: .7rem;
  padding: .35rem 0;
  display: flex;
}

.promoteitem:last-of-type {
  border-bottom: none;
}

.promoteitem p {
  font-size: var(--t2);
  margin: 0;
  line-height: 1.45;
}

.promoteitem s {
  color: var(--muted);
  font-size: var(--t1);
}

.builtingrid {
  flex-wrap: wrap;
  gap: .3rem;
  display: flex;
}

.command {
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.1rem;
  display: flex;
}

.cmdgoal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--good);
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .7rem;
  padding: .65rem .9rem;
  display: flex;
}

.cmdgoal b {
  font-size: var(--t4);
}

.cmdgoal s {
  color: var(--muted);
  font-size: var(--t2);
}

.cmdlive {
  font-size: var(--t2);
  color: var(--teal);
  margin-left: auto;
  text-decoration: none;
}

.cmdlive:hover {
  text-decoration: underline;
}

.canvasgoal {
  margin-bottom: .7rem;
}

.cmdkpis {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .6rem;
  display: grid;
}

.cmdkpis > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .55rem .8rem;
}

.cmdkpis > div.hot {
  border-color: var(--warn);
}

.cmdkpis b {
  font-size: var(--t3);
  display: block;
}

.cmdkpis s {
  color: var(--muted);
  font-size: var(--t1);
}

.cmdkpis a {
  color: var(--teal);
  text-decoration: none;
}

.cmdexp {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ag1);
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  padding: .6rem .9rem;
  display: flex;
}

.cmdexp p {
  font-size: var(--t2);
  margin: 0;
  line-height: 1.45;
}

.cmdexp s {
  color: var(--muted);
  font-size: var(--t1);
}

.cmdexp > div {
  flex: 1;
  min-width: 200px;
}

.thinking {
  font-size: var(--t2);
  color: var(--muted);
  align-items: center;
  gap: .5rem;
  margin-top: .6rem;
  display: flex;
}

.tdots {
  gap: 3px;
  display: inline-flex;
}

.tdots i {
  background: var(--teal);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1.2s infinite tblink;
}

.tdots i:nth-child(2) {
  animation-delay: .2s;
}

.tdots i:nth-child(3) {
  animation-delay: .4s;
}

@keyframes tblink {
  0%, 100% {
    opacity: .25;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tdots i {
    opacity: .7;
    animation: none;
  }
}

.opt:disabled {
  opacity: .55;
  cursor: default;
}

.freerow input:disabled {
  opacity: .6;
}

.convoblock {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s4);
  margin-bottom: var(--s5);
  animation: rise var(--d4) var(--out) both;
}

.convoheading {
  margin: 0 0 var(--s3);
  font-size: var(--t1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.convolist {
  gap: var(--s2);
  flex-direction: column;
  display: flex;
}

.convoitem {
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--panel2);
  display: flex;
}

.convoinfo {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.convotitle {
  font-size: var(--t3);
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.convometa {
  font-size: var(--t1);
  color: var(--muted);
}

.convoactions {
  gap: var(--s2);
  flex: none;
  display: flex;
}

.convodelete {
  color: var(--muted);
}

.welcome-curtain {
  z-index: 5;
  background: var(--paper);
  border-radius: var(--r3);
  padding: var(--s4);
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.welcome-curtain .btn {
  pointer-events: auto;
}

.welcome {
  text-align: center;
  max-width: 560px;
  padding: var(--s5) 0 var(--s7);
  margin: 0 auto;
}

.welcome .logo {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--s6);
}

.welcome h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t8);
  margin: 0 0 var(--s3);
  text-wrap: balance;
  line-height: 1.12;
}

.welcome p {
  color: var(--muted);
  margin: 0 0 var(--s6);
}

.assure {
  gap: var(--s3);
  margin-top: var(--s6);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.assure span {
  font-size: var(--t2);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--rfull);
  padding: var(--s2) var(--s4);
  background: var(--panel2);
}

.chatlog {
  gap: var(--s5);
  flex-direction: column;
  display: flex;
}

.msg {
  border-radius: var(--r3);
  max-width: 85%;
  padding: var(--s3) var(--s4);
  font-size: var(--t4);
  animation: rise var(--d3) var(--out) both;
  line-height: 1.5;
}

.msg.agent {
  background: var(--panel3);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

.msg.user {
  background: var(--teal);
  color: var(--btnink);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.msg b {
  margin-bottom: var(--s1);
  font-weight: 600;
  display: block;
}

.msg s {
  font-size: var(--t2);
  color: inherit;
  opacity: .8;
  margin-top: var(--s1);
  text-decoration: none;
  display: block;
}

.msg.agent .why {
  margin-top: var(--s2);
  font-size: var(--t1);
  color: var(--muted);
  font-style: italic;
  display: block;
}

.msg.agent.typing {
  padding: var(--s3) var(--s5);
  align-items: center;
  display: inline-flex;
}

.rp-chips {
  gap: var(--s2);
  margin-top: var(--s2);
  flex-wrap: wrap;
  display: flex;
}

.rp-chip {
  align-items: center;
  gap: var(--s1);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--rfull);
  padding: var(--s2) var(--s4);
  font: inherit;
  font-size: var(--t3);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: border-color var(--d1) var(--ease), color var(--d1) var(--ease),
             background var(--d1) var(--ease);
  display: inline-flex;
}

.rp-chip:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.rp-chip:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.rp-chip:disabled {
  opacity: .55;
  cursor: default;
}

.rp-chip.ghost {
  color: var(--muted);
  border-style: dashed;
}

.rp-chip.opt-back {
  color: var(--warn);
  border-style: dashed;
}

.rp-chip.opt-back:hover {
  border-color: var(--warn);
  color: var(--warn);
}

.rp-chip.primary {
  background: var(--teal);
  color: var(--btnink);
  border-color: var(--teal);
}

.rp-chip.primary:hover {
  filter: brightness(1.08);
  color: var(--btnink);
}

.rp-chip.primary:disabled {
  opacity: .55;
}

.rp-chip.on {
  border-color: var(--teal);
  background: var(--teal2);
  color: var(--ink);
}

.rp-chip .segtick {
  border: 1px solid var(--line);
  width: 15px;
  height: 15px;
  color: var(--teal);
  background: var(--panel);
  border-radius: 4px;
  flex: none;
  place-items: center;
  font-size: 10px;
  display: grid;
}

@media (prefers-reduced-motion: reduce) {
  .rp-chip:hover {
    transform: none;
  }
}

.understand {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel3);
  padding: var(--s4) var(--s5);
  box-shadow: var(--sh1);
}

.understand h3 {
  margin: 0 0 var(--s1);
  font-size: var(--t5);
}

.understand .sub {
  font-size: var(--t2);
  color: var(--muted);
  margin-bottom: var(--s4);
}

.meter {
  background: var(--line);
  height: 6px;
  margin-bottom: var(--s1);
  border-radius: 3px;
  overflow: hidden;
}

.meter i {
  background: var(--teal);
  height: 100%;
  transition: width var(--d4) var(--out);
  border-radius: 3px;
  display: block;
}

.meter-label {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  margin-bottom: var(--s5);
}

.u-section {
  margin-bottom: var(--s4);
}

.u-section h4 {
  margin: 0 0 var(--s2);
  font-family: var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 600;
}

.u-items {
  gap: var(--s2);
  flex-direction: column;
  display: flex;
}

.u-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  padding: var(--s2) var(--s3);
  font-size: var(--t2);
  align-items: flex-start;
  gap: var(--s2);
  display: flex;
}

.u-item .conf {
  font-family: var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 4px;
  flex: none;
  margin-top: 1px;
  padding: 2px 6px;
  font-size: .6rem;
}

.conf.inferred {
  background: var(--warn2);
  color: var(--warn);
}

.conf.confirmed {
  background: var(--teal2);
  color: var(--teal);
}

.u-empty {
  font-size: var(--t2);
  color: var(--muted);
  font-style: italic;
}

.brief {
  max-width: 660px;
  margin: 0 auto;
}

.brief-card {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s5);
  margin-bottom: var(--s4);
  background: var(--panel);
  position: relative;
}

.brief-card h4 {
  margin: 0 0 var(--s2);
  font-family: var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 600;
}

.brief-card p {
  font-size: var(--t5);
  margin: 0;
  line-height: 1.55;
}

.brief-card .edit {
  top: var(--s4);
  right: var(--s4);
  font-size: var(--t2);
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
  position: absolute;
}

.brief-card.pain {
  border-left: 3px solid var(--crit);
}

.brief-card.goal {
  border-left: 3px solid var(--teal);
}

.cta-row {
  gap: var(--s4);
  margin-top: var(--s6);
  flex-wrap: wrap;
  display: flex;
}

.goalbar {
  align-items: center;
  gap: var(--s4);
  background: var(--teal2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s3) var(--s5);
  margin-bottom: var(--s5);
  font-size: var(--t4);
  display: flex;
}

.goalbar b {
  color: var(--teal);
}

.goalbar.unset {
  background: var(--warn2);
}

.goalbar.unset b {
  color: var(--muted);
  font-weight: 500;
}

.team {
  gap: var(--s4);
  margin-bottom: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.agent-card {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  gap: var(--s3);
  flex-direction: column;
  display: flex;
}

.team .agent-card {
  padding: var(--s5);
}

.agent-card.manager {
  border-color: var(--teal);
  box-shadow: var(--sh1);
  grid-column: 1 / -1;
}

.agent-card h4 {
  font-size: var(--t5);
  align-items: center;
  gap: var(--s3);
  letter-spacing: -.01em;
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.agent-card .role {
  font-size: var(--t3);
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

.agent-card .role b {
  color: var(--ink);
}

.agent-card .because {
  font-size: var(--t2);
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: var(--s3);
  margin-top: var(--s1);
  font-style: italic;
  line-height: 1.5;
}

.agent-card .kpi {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--teal);
}

.tag {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 3px 8px;
  display: inline-block;
}

.tag.sales {
  background: var(--teal2);
  color: var(--teal);
}

.tag.mkt {
  background: var(--ag1);
}

@supports (color: color-mix(in lab, red, red)) {
  .tag.mkt {
    background: color-mix(in srgb, var(--ag1) 16%, var(--panel));
  }
}

.tag.mkt {
  color: var(--ag1);
}

.tag.core {
  background: var(--teal);
  color: var(--btnink);
}

.tag.phase2 {
  background: var(--warn2);
  color: var(--warn);
}

.tag.listen {
  background: var(--ag1);
}

@supports (color: color-mix(in lab, red, red)) {
  .tag.listen {
    background: color-mix(in srgb, var(--ag1) 16%, var(--panel));
  }
}

.tag.listen {
  color: var(--ag1);
}

.tag.optional {
  background: var(--panel3);
  color: var(--muted);
}

.skills-row {
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.rp-sk {
  font-size: var(--t1);
  font-family: var(--mono);
  background: var(--panel3);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  color: var(--muted);
  padding: 3px 8px;
}

.rp-sk.add {
  border: 1px dashed var(--teal);
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--teal);
  border-radius: var(--r1);
  background: none;
  padding: 3px 8px;
}

.rp-sk.add:hover {
  background: var(--teal2);
}

.rp-sk.add:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.guardrails {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r2);
  background: var(--panel);
  padding: var(--s4) var(--s5);
  margin: var(--s4) 0 var(--s5);
}

.guardrails h4 {
  margin: 0 0 var(--s2);
  font-size: var(--t3);
}

.guardrails ul {
  padding-left: var(--s5);
  font-size: var(--t3);
  color: var(--muted);
  margin: 0;
}

.guardrails li {
  line-height: 1.5;
}

.chan-note {
  background: var(--panel3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s3) var(--s4);
  font-size: var(--t3);
  color: var(--muted);
  margin-bottom: var(--s2);
  line-height: 1.55;
}

.chan-note b {
  color: var(--ink);
}

.chan-grid {
  gap: var(--s4);
  margin-bottom: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  display: grid;
}

.chan-card {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s4) var(--s5);
  background: var(--panel);
  gap: var(--s2);
  flex-direction: column;
  display: flex;
  position: relative;
}

.chan-card.core {
  border-color: var(--teal);
}

.chan-card h4 {
  font-size: var(--t5);
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: 0;
  padding-right: 3.4rem;
  display: flex;
}

.chan-card .use {
  font-size: var(--t3);
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.chan-card .agentdoes {
  font-size: var(--t2);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line);
  color: var(--ink2);
  margin: 0;
  line-height: 1.5;
}

.chan-card .agentdoes b {
  color: var(--ink);
  font-weight: 600;
}

.chan-card .chanunlock {
  font-size: var(--t2);
  color: var(--muted);
  margin: 0;
  font-style: italic;
}

.chan-onoff {
  top: var(--s4);
  right: var(--s4);
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  position: absolute;
}

.chan-onoff .rp-sw {
  background: var(--line);
  vertical-align: middle;
  border-radius: 10px;
  width: 34px;
  height: 19px;
  margin-left: 6px;
  display: inline-block;
  position: relative;
}

.chan-onoff .rp-sw:after {
  content: "";
  background: var(--panel);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 2px;
  left: 2px;
}

.chan-onoff.on .rp-sw {
  background: var(--teal);
}

.chan-onoff.on .rp-sw:after {
  left: auto;
  right: 2px;
}

.skill-lib {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  padding: var(--s4) var(--s5) var(--s5);
  box-shadow: var(--sh1);
}

.skill-lib > h4 {
  margin: 0 0 var(--s1);
  font-size: var(--t4);
}

.skill-lib .sub2 {
  font-size: var(--t2);
  color: var(--muted);
  margin: 0 0 var(--s4);
  line-height: 1.55;
}

.skill-grid {
  gap: var(--s3);
  margin-bottom: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  display: grid;
}

.skill-card {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s3) var(--s4);
  font-size: var(--t2);
  gap: var(--s2);
  background: var(--panel);
  flex-direction: column;
  display: flex;
}

.skill-card b {
  font-size: var(--t3);
}

.skill-card p {
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.skill-card.draft {
  border-style: dashed;
  border-color: var(--warn);
}

.skill-card .btn {
  margin-top: var(--s1);
  align-self: flex-start;
}

.who2 {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.who2 span {
  font-size: .63rem;
  font-family: var(--mono);
  border-radius: 4px;
  padding: 2px 6px;
}

.who2 .s {
  background: var(--teal2);
  color: var(--teal);
}

.who2 .m {
  background: var(--ag1);
}

@supports (color: color-mix(in lab, red, red)) {
  .who2 .m {
    background: color-mix(in srgb, var(--ag1) 16%, var(--panel));
  }
}

.who2 .m {
  color: var(--ag1);
}

.who2 .o {
  background: var(--panel3);
  color: var(--muted);
}

.skill-create {
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  display: grid;
}

.skill-create > div {
  border: 1px dashed var(--line);
  border-radius: var(--r2);
  padding: var(--s3) var(--s4);
  font-size: var(--t2);
  color: var(--muted);
  line-height: 1.5;
}

.skill-create b {
  color: var(--ink);
  font-size: var(--t2);
  margin-bottom: 3px;
  display: block;
}

.skill-create .teachrow {
  margin: var(--s3) 0 0;
}

.skill-create .promoteitem {
  padding: var(--s2) 0;
}

.rp-drive {
  gap: var(--s5);
  margin-bottom: var(--s5);
  grid-template-columns: 1fr 1.3fr;
  display: grid;
}

@media (max-width: 860px) {
  .rp-drive {
    grid-template-columns: 1fr;
  }
}

.prospects {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  align-self: start;
  overflow: hidden;
}

.prospects h4 {
  padding: var(--s4) var(--s5);
  font-size: var(--t3);
  border-bottom: 1px solid var(--line);
  background: var(--panel3);
  margin: 0;
}

.prospect {
  width: 100%;
  padding: var(--s3) var(--s5);
  border: none;
  border-bottom: 1px solid var(--line);
  font: inherit;
  font-size: var(--t3);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  justify-content: space-between;
  gap: var(--s3);
  transition: background var(--d1) var(--ease);
  background: none;
  align-items: baseline;
  display: flex;
}

.prospect:last-child {
  border-bottom: none;
}

.prospect:hover {
  background: var(--panel2);
}

.prospect .fit {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--teal);
  white-space: nowrap;
}

.prospect.sel {
  background: var(--teal2);
}

.prospect .who {
  text-overflow: ellipsis;
  overflow: hidden;
}

.rp-draft {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  padding: var(--s5) var(--s6);
}

.rp-draft .to {
  font-family: var(--mono);
  font-size: var(--t2);
  color: var(--muted);
  margin-bottom: var(--s3);
}

.rp-draft .body {
  font-size: var(--t4);
  line-height: 1.6;
}

.rp-draft .body p {
  margin: 0 0 var(--s3);
}

.rp-draft .body p:last-child {
  margin-bottom: 0;
}

.rp-draft mark {
  background: var(--teal2);
  color: var(--teal);
  border-radius: 3px;
  padding: 0 3px;
}

.rp-draft .reason {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px dashed var(--line);
  font-size: var(--t2);
  color: var(--muted);
  font-style: italic;
}

.approve-row {
  gap: var(--s3);
  margin-top: var(--s5);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.approved-note {
  margin-top: var(--s4);
  background: var(--teal2);
  color: var(--teal);
  border-radius: var(--r2);
  padding: var(--s3) var(--s4);
  font-size: var(--t3);
}

.approved-note.rej {
  background: var(--warn2);
  color: var(--warn);
}

.goal-progress {
  margin-bottom: var(--s6);
}

.goal-progress .row {
  margin-bottom: var(--s3);
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  display: flex;
}

.goal-progress .big {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.3;
}

.goal-progress .big b {
  color: var(--teal);
}

.goal-progress .ctx {
  font-family: var(--mono);
  font-size: var(--t2);
  color: var(--muted);
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  display: inline-flex;
}

.kpis {
  gap: var(--s4);
  margin-bottom: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  display: grid;
}

.kpi-tile {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s4) var(--s5);
  background: var(--panel);
}

.kpi-tile .v {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
}

.kpi-tile .l {
  font-size: var(--t2);
  color: var(--muted);
  margin-top: 2px;
}

.kpi-tile .d {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--teal);
  margin-top: 4px;
}

.kpi-tile.hot {
  border-color: var(--warn);
}

.kpi-tile.hot .d {
  color: var(--warn);
}

.two-col {
  gap: var(--s4);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media (max-width: 860px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  overflow: hidden;
}

.panel h4 {
  padding: var(--s4) var(--s5);
  font-size: var(--t3);
  border-bottom: 1px solid var(--line);
  background: var(--panel3);
  justify-content: space-between;
  align-items: center;
  margin: 0;
  display: flex;
}

.panel .count {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--warn);
}

.qitem {
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  font-size: var(--t3);
  justify-content: space-between;
  gap: var(--s4);
  align-items: center;
  display: flex;
}

.qitem:last-child {
  border-bottom: none;
}

.feed {
  padding: var(--s2) var(--s5) var(--s4);
  font-size: var(--t2);
}

.feed > div {
  padding: var(--s2) 0;
  border-bottom: 1px dashed var(--line);
  color: var(--muted);
}

.feed > div:last-child {
  border-bottom: none;
}

.feed .t {
  font-family: var(--mono);
  font-size: var(--t1);
  margin-right: var(--s3);
  color: var(--muted);
}

.insight {
  margin-top: var(--s4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ag1);
  border-radius: var(--r2);
  background: var(--panel);
  padding: var(--s4) var(--s5);
  font-size: var(--t4);
  line-height: 1.55;
}

.insight b {
  color: var(--ag1);
}

.insight .btn {
  vertical-align: middle;
  margin-left: var(--s2);
}

.command-center {
  margin-bottom: var(--s7);
}

.restart {
  margin-top: var(--s4);
  font-size: var(--t2);
  color: var(--muted);
}

.restart .link {
  font-family: inherit;
  font-size: var(--t2);
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}

.restart .link:hover {
  color: var(--ink);
}

.restart p {
  margin: 0 0 var(--s2);
}

.msg.agent .rb-parts {
  gap: var(--s2);
  margin-top: var(--s3);
  flex-direction: column;
  display: flex;
}

.msg.agent .rb-part {
  padding: var(--s2) var(--s3);
  border-left: 2px solid var(--teal);
  background: var(--panel2);
  border-radius: 0 var(--r2) var(--r2) 0;
  font-size: var(--t3);
  margin: 0;
  line-height: 1.55;
}

.msg.agent .rb-part b {
  font-size: var(--t1);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 2px;
  font-weight: 600;
  display: block;
}

.msg.agent.heardnote {
  border-left: 2px solid var(--teal);
  background: var(--teal2);
}

.msg.agent.heardnote > b {
  color: var(--teal);
  font-size: var(--t1);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.funnel {
  align-items: center;
  gap: var(--s1) var(--s2);
  margin-bottom: var(--s4);
  font-family: var(--mono);
  font-size: var(--t1);
  flex-wrap: wrap;
  display: flex;
}

.fun-stage {
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--panel);
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: help;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  display: inline-flex;
}

.fun-stage i {
  font-style: normal;
}

.fun-stage.working {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal2);
}

.fun-stage.wall {
  border-color: var(--crit);
  color: var(--crit);
  background: var(--crit);
}

@supports (color: color-mix(in lab, red, red)) {
  .fun-stage.wall {
    background: color-mix(in srgb, var(--crit) 12%, var(--panel));
  }
}

.fun-arrow {
  color: var(--muted);
}

.qwins {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r2);
  background: var(--panel);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s4);
}

.qwins h4 {
  margin: 0 0 var(--s3);
  font-family: var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--warn);
  font-size: .66rem;
  font-weight: 600;
}

.qwins ul {
  gap: var(--s2);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.qwins li b {
  font-size: var(--t3);
  font-weight: 600;
}

.qwins li s {
  font-size: var(--t2);
  color: var(--muted);
  line-height: 1.5;
  text-decoration: none;
  display: block;
}

.skhead {
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  font-size: var(--t2);
  color: var(--muted);
  display: flex;
}

.rlog .rline {
  animation: slidein var(--d2) var(--out) both;
}

.rcaret {
  animation: 1.6s infinite rp-caret;
}

@keyframes rp-caret {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

.rail .chips .chip {
  animation: rise var(--d2) var(--out) both;
}

.rail .chips .chip:nth-child(2) {
  animation-delay: 40ms;
}

.rail .chips .chip:nth-child(3) {
  animation-delay: 80ms;
}

.rail .chips .chip:nth-child(4) {
  animation-delay: .12s;
}

.rail .chips .chip:nth-child(5) {
  animation-delay: .16s;
}

.rail .chips .chip:nth-child(6) {
  animation-delay: .2s;
}

.rail .chips .chip:nth-child(7) {
  animation-delay: .24s;
}

.rail .chips .chip:nth-child(8) {
  animation-delay: .28s;
}

.rail .chips .chip:nth-child(9) {
  animation-delay: .32s;
}

.rail .chips .chip:nth-child(n+10) {
  animation-delay: .36s;
}

.msg.agent .rb-part {
  animation: rise var(--d3) var(--out) both;
}

.msg.agent .rb-part:nth-child(2) {
  animation-delay: 80ms;
}

.msg.agent .rb-part:nth-child(3) {
  animation-delay: .16s;
}

.msg.agent .rb-part:nth-child(4) {
  animation-delay: .24s;
}

.msg.agent .rb-part:nth-child(n+5) {
  animation-delay: .32s;
}

@keyframes rp-pop {
  from {
    opacity: 0;
    transform: scale(.94);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.funnel > * {
  animation: rp-pop var(--d2) var(--out) both;
}

.funnel > :nth-child(2) {
  animation-delay: 40ms;
}

.funnel > :nth-child(3) {
  animation-delay: 80ms;
}

.funnel > :nth-child(4) {
  animation-delay: .12s;
}

.funnel > :nth-child(5) {
  animation-delay: .16s;
}

.funnel > :nth-child(6) {
  animation-delay: .2s;
}

.funnel > :nth-child(7) {
  animation-delay: .24s;
}

.funnel > :nth-child(8) {
  animation-delay: .28s;
}

.funnel > :nth-child(9) {
  animation-delay: .32s;
}

.funnel > :nth-child(n+10) {
  animation-delay: .36s;
}

.msg.agent.heardnote {
  animation: rise var(--d2) var(--out) both;
}

@media (prefers-reduced-motion: reduce) {
  .rcaret, .rlog .rline, .rail .chips .chip, .msg.agent .rb-part, .funnel > *, .msg.agent.heardnote {
    animation: none;
  }
}

.conf.seen {
  background: var(--panel3);
  color: var(--ag2);
  box-shadow: inset 0 0 0 1px var(--ag2);
}

.msg.agent.typing .tlabel {
  margin-left: var(--s3);
  font-size: var(--t2);
  color: var(--muted);
}

.evidence-ask {
  margin-top: var(--s3);
}

.evidence-ask .c2-drawer {
  margin-bottom: 0;
}

.evidencenote .ev-findings {
  gap: var(--s2);
  flex-direction: column;
  display: flex;
}

.evidencenote .ev-finding {
  font-size: var(--t3);
}

.wkactions {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r2);
  background: var(--panel);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
}

.wkactions h4 {
  margin: 0 0 var(--s3);
  font-family: var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--warn);
  font-size: .66rem;
  font-weight: 600;
}

.wkactions ul {
  gap: var(--s3);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.wkactions li {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s4);
  display: flex;
}

.wkactions li b {
  font-size: var(--t3);
  font-weight: 600;
  display: block;
}

.wkactions li s {
  font-size: var(--t2);
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.5;
  text-decoration: none;
  display: block;
}

.wkactions li.wkdone {
  opacity: .62;
}

.wkactions li.wkdone b {
  color: var(--muted);
  text-decoration: line-through;
}

.wkactions .wkwhen {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  white-space: nowrap;
  flex: none;
  padding-top: 2px;
}

.qwins-link {
  margin-top: var(--s2);
  font-size: var(--t2);
  color: var(--muted);
  text-decoration: underline;
  display: inline-block;
}

.qwins-link:hover {
  color: var(--ink);
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@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
}

/* [project]/app/connect.css [app-client] (css) */
.subhead {
  font-size: var(--t3);
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s3);
}

.c2-req-head {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
  display: flex;
}

.c2-progress {
  font-size: var(--t1);
  color: var(--muted);
}

.c2-req {
  gap: var(--s3);
  margin-bottom: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  display: grid;
}

.c2-req-card {
  align-items: center;
  gap: var(--s3);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r3);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  transition: border-color var(--d1) var(--ease);
  display: flex;
}

.c2-req-card:hover {
  border-color: var(--teal);
}

.c2-req-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.c2-req-card.done {
  border-color: var(--teal);
  background: var(--teal2);
}

.c2-logo {
  border-radius: var(--r2);
  color: #fff;
  width: 34px;
  height: 34px;
  font-family: var(--mono);
  font-size: var(--t3);
  flex: none;
  place-items: center;
  font-weight: 700;
  display: grid;
}

.c2-req-txt {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  display: flex;
}

.c2-req-txt b {
  font-size: var(--t4);
}

.c2-req-txt small {
  font-size: var(--t1);
  color: var(--muted);
}

.c2-st {
  font-family: var(--mono);
  font-size: var(--t1);
  white-space: nowrap;
}

.c2-st.ok {
  color: var(--teal);
}

.c2-st.todo {
  color: var(--warn);
}

.c2-drawer {
  border: 1px solid var(--teal);
  border-radius: var(--r3);
  background: var(--panel);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s4);
}

.c2-d-head {
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  display: flex;
}

.c2-d-head b {
  font-size: var(--t5);
  display: block;
}

.c2-d-head small {
  font-size: var(--t1);
  color: var(--muted);
}

.c2-d-head .c2-close {
  color: var(--muted);
  font-size: var(--t5);
  cursor: pointer;
  padding: var(--s1);
  background: none;
  border: none;
  margin-left: auto;
}

.c2-d-head .c2-close:hover {
  color: var(--ink);
}

.c2-d-head .c2-close:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.c2-drawer p {
  font-size: var(--t3);
  color: var(--muted);
  margin: 0 0 var(--s3);
  max-width: 62em;
}

.c2-drawer p b {
  color: var(--ink);
}

.c2-sheet-scroll {
  margin-bottom: var(--s3);
  overflow-x: auto;
}

.c2-sheet {
  border-collapse: collapse;
  font-size: var(--t2);
  min-width: 560px;
}

.c2-sheet th, .c2-sheet td {
  border: 1px solid var(--line);
  padding: var(--s1) var(--s3);
  text-align: left;
  white-space: nowrap;
}

.c2-sheet thead tr:first-child th {
  background: var(--panel3);
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  text-align: center;
  font-weight: 600;
}

.c2-sheet thead tr.cols th {
  background: var(--panel3);
  font-size: var(--t2);
}

.c2-sheet tbody th {
  background: var(--panel3);
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  font-weight: 600;
}

.c2-sheet .new {
  background: var(--teal2);
  border-color: var(--teal);
}

.c2-sheet thead .new {
  color: var(--teal);
}

.c2-scopes {
  gap: var(--s2);
  margin-bottom: var(--s1);
  flex-wrap: wrap;
  display: flex;
}

.c2-scopes span {
  font-size: var(--t1);
  border-radius: var(--rfull);
  padding: var(--s1) var(--s3);
}

.c2-scopes .ok {
  background: var(--teal2);
  color: var(--teal);
}

.c2-scopes .no {
  background: var(--panel3);
  color: var(--crit);
}

.c2-seg {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
  display: inline-flex;
  overflow: hidden;
}

.c2-seg button {
  font: inherit;
  font-size: var(--t2);
  padding: var(--s2) var(--s4);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  border: none;
}

.c2-seg button + button {
  border-left: 1px solid var(--line);
}

.c2-seg button.on {
  background: var(--teal);
  color: var(--btnink);
}

.c2-seg button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.c2-hub {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  margin-bottom: var(--s5);
  grid-template-columns: 186px 1fr;
  display: grid;
  overflow: hidden;
}

@media (max-width: 640px) {
  .c2-hub {
    grid-template-columns: 1fr;
  }
}

.c2-rail {
  background: var(--panel3);
  border-right: 1px solid var(--line);
  padding: var(--s3);
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.c2-rail button {
  font: inherit;
  font-size: var(--t2);
  text-align: left;
  padding: var(--s2) var(--s3);
  color: var(--muted);
  border-radius: var(--r2);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
}

.c2-rail button:hover {
  color: var(--ink);
}

.c2-rail button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.c2-rail button.on {
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
}

.c2-main {
  padding: var(--s4) var(--s4);
}

.c2-search {
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s3);
  display: flex;
}

.c2-search:focus-within {
  border-color: var(--teal);
  box-shadow: var(--ring);
}

.c2-search input {
  font: inherit;
  font-size: var(--t3);
  color: var(--ink);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
}

.c2-grid {
  gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  display: grid;
}

.c2-app {
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  background: var(--panel);
  font: inherit;
  color: var(--ink);
  text-align: left;
  transition: border-color var(--d1) var(--ease);
  display: flex;
}

.c2-app:hover {
  border-color: var(--teal);
}

.c2-app:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.c2-app .c2-logo {
  width: 28px;
  height: 28px;
  font-size: var(--t1);
  border-radius: 7px;
}

.c2-app .an {
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
  display: flex;
}

.c2-app .an b {
  font-size: var(--t2);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.c2-app .an small {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--warn);
}

.c2-empty {
  font-size: var(--t2);
  color: var(--muted);
  grid-column: 1 / -1;
}

.c2-footnote {
  font-size: var(--t2);
  color: var(--muted);
  margin-top: var(--s3);
}

.c2-footnote b {
  color: var(--ink);
}

.matrix {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  margin-bottom: var(--s5);
  overflow: hidden;
}

.matrix table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--t4);
}

.matrix th, .matrix td {
  padding: var(--s3) var(--s4);
  text-align: left;
  border-top: 1px solid var(--line);
}

.matrix thead th {
  background: var(--panel3);
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: none;
  font-weight: 600;
}

.pill {
  border-radius: var(--rfull);
  padding: var(--s1) var(--s3);
  font-size: var(--t2);
  border: 1px solid var(--line);
  color: var(--muted);
  display: inline-block;
}

.pill.on {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--btnink);
}

.matrix-note {
  font-size: var(--t2);
  color: var(--muted);
  margin: calc(-1 * var(--s3)) 0 var(--s5);
}

.c2-req-card {
  cursor: default;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

.c2-req-open {
  align-items: center;
  gap: var(--s3);
  border-radius: var(--r3);
  width: 100%;
  padding: var(--s3) var(--s4);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
}

.c2-req-open:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.c2-req-card.declined {
  border-style: dashed;
}

.c2-req-card.declined .c2-req-open {
  opacity: .72;
}

.c2-st.decl {
  color: var(--muted);
}

.c2-req-foot {
  padding: 0 var(--s4) var(--s3);
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  display: flex;
}

.c2-truth {
  font-size: var(--t1);
  color: var(--muted);
  font-style: italic;
}

.c2-alt {
  font-size: var(--t1);
  color: var(--muted);
}

.c2-unavail {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.c2-absent {
  font-family: inherit;
  font-size: var(--t1);
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}

.c2-absent:hover {
  color: var(--ink);
}

.c2-absent:disabled {
  cursor: default;
  opacity: .6;
}

.c2-absent-confirm {
  gap: var(--s3);
  flex-wrap: wrap;
  display: inline-flex;
}

.c2-smtp {
  margin-top: var(--s3);
}

.c2-smtp-grid {
  gap: var(--s3);
  margin-bottom: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  display: grid;
}

.c2-smtp-grid .fld {
  margin-bottom: 0;
}

.c2-drawer .c2-smtp-err {
  color: var(--crit);
}

.c2-smtp-done {
  color: var(--teal);
  font-size: var(--t3);
}

.reqside {
  margin-left: auto;
}

.req.declined {
  opacity: .8;
  border-style: dashed;
}

.reqtruth {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

/* [project]/app/canvas.css [app-client] (css) */
.rp-canvas {
  --rp-line-strong: color-mix(in srgb, var(--line) 55%, var(--muted));
  --rp-accent-ink: color-mix(in srgb, var(--teal) 78%, var(--ink));
  --rp-violet-soft: color-mix(in srgb, var(--ag1) 16%, var(--panel));
}

.rp-canvas .mono {
  font-family: var(--mono, ui-monospace, monospace);
}

.rp-canvas .muted {
  color: var(--muted);
}

.rp-canvas .canvas-scroll {
  padding-bottom: 6px;
  overflow-x: auto;
}

.rp-canvas .canvas {
  min-width: 940px;
}

.rp-canvas .tv {
  width: 940px;
  height: 400px;
  margin-bottom: 10px;
  position: relative;
}

.rp-canvas .tv svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.rp-canvas .tv path.mgmt {
  stroke: var(--teal);
  stroke-width: 1.2px;
  stroke-dasharray: 2 5;
  fill: none;
  opacity: .55;
}

.rp-canvas .tv path.flow {
  stroke: var(--rp-line-strong);
  stroke-width: 1.6px;
  stroke-dasharray: 6 6;
  fill: none;
}

.rp-canvas .tv path.flow.active {
  stroke: var(--teal);
  animation: 1s linear infinite rp-dashmove;
}

.rp-canvas .tv text {
  fill: var(--muted);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px;
}

@keyframes rp-dashmove {
  to {
    stroke-dashoffset: -12px;
  }
}

.rp-canvas .node {
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  border-radius: 11px;
  flex-direction: column;
  gap: 5px;
  min-width: 128px;
  padding: 11px 13px;
  font-size: 12.5px;
  transition: border-color .15s;
  display: flex;
}

.rp-canvas .node:hover {
  border-color: var(--teal);
}

.rp-canvas .node:focus-visible {
  box-shadow: var(--ring);
  outline: none;
}

.rp-canvas .node.selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal);
}

.rp-canvas .node.selected:focus-visible {
  box-shadow: 0 0 0 1px var(--teal), var(--ring);
}

.rp-canvas .node .nh {
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
}

.rp-canvas .dot {
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
}

.rp-canvas .dot.running {
  background: var(--teal);
  animation: 1.6s infinite rp-pulse;
}

.rp-canvas .dot.waiting {
  background: var(--warn);
  animation: 1.6s infinite rp-pulse;
}

.rp-canvas .dot.idle {
  background: var(--rp-line-strong);
}

@keyframes rp-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

.rp-canvas .node .nc {
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--muted);
  font-size: 10.5px;
}

.rp-canvas .node .nb {
  color: var(--muted);
  font-size: 11px;
}

.rp-canvas .node.gate {
  border-style: dashed;
  border-color: var(--warn);
  background: var(--warn2);
}

.rp-canvas .node.gate .nh {
  color: var(--warn);
}

.rp-canvas .node.abs {
  flex: none;
  margin: 0;
  position: absolute;
}

.rp-canvas .node.sup {
  border-color: var(--teal);
}

.rp-canvas .node.sup .goalchip {
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--rp-accent-ink);
  background: var(--teal2);
  white-space: nowrap;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 10.5px;
}

.rp-canvas .node.sup.abs {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 11px 14px;
}

.rp-canvas .node.sup.abs .nb {
  margin-left: 0;
}

.rp-canvas .goal-node {
  border: 1px solid var(--teal);
  background: var(--teal2);
  border-radius: 11px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 18px;
  font-size: 13.5px;
  display: flex;
}

.rp-canvas .goal-node b {
  color: var(--rp-accent-ink);
}

.rp-canvas .goal-node .wb {
  font-size: 11px;
}

.rp-canvas .legend {
  color: var(--muted);
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 11.5px;
  display: flex;
}

.rp-canvas .legend span {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.rp-canvas .legend .dot {
  display: inline-block;
}

.rp-canvas .agent-detail {
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  background: var(--panel);
  border-radius: 12px;
  margin: 14px 0;
  padding: 14px 18px;
}

.rp-canvas .agent-detail .who {
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rp-accent-ink);
  margin-bottom: 8px;
  font-size: 10.5px;
}

.rp-canvas .detail-stats {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 10px 0 4px;
  display: grid;
}

.rp-canvas .detail-stats > div {
  border: 1px solid var(--line);
  background: var(--panel3);
  border-radius: 9px;
  padding: 9px 12px;
}

.rp-canvas .detail-stats b {
  font-size: 13px;
  display: block;
}

.rp-canvas .detail-stats small {
  color: var(--muted);
  font-size: 11px;
}

.rp-canvas .detail-say {
  color: var(--muted);
  max-width: 66em;
  margin: 10px 0 0;
  font-size: 13px;
  font-style: italic;
}

.rp-canvas .learn {
  margin-top: 16px;
}

.rp-canvas .learn-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.rp-canvas .learn-head .subhead {
  font-size: 13px;
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.rp-canvas .learn-head .lnote {
  font-size: 11px;
}

.rp-canvas .learn-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  display: grid;
}

.rp-canvas .learn-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--ag1);
  background: var(--panel);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 12.5px;
}

.rp-canvas .learn-card h5 {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  font-size: 12.5px;
  display: flex;
}

.rp-canvas .learn-card .src {
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ag1);
  background: var(--rp-violet-soft);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 9.5px;
}

.rp-canvas .learn-card p {
  color: var(--muted);
  margin: 0;
}

.rp-canvas .learn-card .ev {
  font-family: var(--mono, ui-monospace, monospace);
  margin-top: 6px;
  font-size: 10.5px;
}

.rp-canvas .learn-foot {
  color: var(--muted);
  max-width: 62em;
  margin-top: 10px;
  font-size: 11.5px;
  font-style: italic;
}

.rp-canvas .rp-feed {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  margin-top: 16px;
  overflow: hidden;
}

.rp-canvas .rp-feed h4 {
  border-bottom: 1px solid var(--line);
  background: var(--panel3);
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
}

.rp-canvas .rp-feed .feedbody {
  padding: 6px 16px 12px;
  font-size: 12.5px;
}

.rp-canvas .rp-feed .feedbody > div {
  border-bottom: 1px dashed var(--line);
  color: var(--muted);
  padding: 7px 0;
}

.rp-canvas .rp-feed .feedbody > div:last-child {
  border-bottom: none;
}

.rp-canvas .rp-feed .t {
  font-family: var(--mono, ui-monospace, monospace);
  margin-right: 8px;
  font-size: 10.5px;
}

.rp-canvas .rp-empty {
  border: 1px dashed var(--line);
  background: var(--panel);
  border-radius: 12px;
  max-width: 62ch;
  padding: 16px 18px;
}

.rp-canvas .rp-empty b {
  margin-bottom: 4px;
  font-size: 13.5px;
  display: block;
}

.rp-canvas .rp-empty p {
  color: var(--muted);
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .rp-canvas .dot.running, .rp-canvas .dot.waiting, .rp-canvas .tv path.flow.active {
    animation: none;
  }
}

/*# sourceMappingURL=app_1_af1nf._.css.map*/