/* [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-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-outline-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-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

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

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

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

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

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

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

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

  b, strong {
    font-weight: bolder;
  }

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

  small {
    font-size: 80%;
  }

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

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

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

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

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

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

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

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

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

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

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

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

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

  ::placeholder {
    opacity: 1;
  }

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

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

  textarea {
    resize: vertical;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@layer components;

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

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .isolate {
    isolation: isolate;
  }

  .container {
    width: 100%;
  }

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

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

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

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

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

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

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

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

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

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

  .blur {
    --tw-blur: blur(8px);
    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, );
  }

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

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

:root {
  --paper: #f3f4f1;
  --panel: #fff;
  --panel2: #f7f8f5;
  --panel3: #eceee9;
  --line: #dfe3dd;
  --line2: #e8ece6;
  --skel: #b8c0ba;
  --skel-hi: #cbd2cd;
  --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;
    --skel: #3a4a41;
    --skel-hi: #4b5d52;
    --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;
  --skel: #3a4a41;
  --skel-hi: #4b5d52;
  --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;
  --skel: #b8c0ba;
  --skel-hi: #cbd2cd;
  --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: 208px minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
}

.side {
  background: var(--panel2);
  border-right: 1px solid var(--line);
  min-width: 0;
}

.sidein {
  height: 100vh;
  padding: var(--s4) var(--s4) 56px;
  flex-direction: column;
  gap: 1px;
  display: flex;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

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

.sidein .brand {
  min-height: 36px;
  padding: 0 var(--s2) var(--s4);
}

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

.navb {
  align-items: center;
  gap: var(--s3);
  text-align: left;
  border-radius: var(--r2);
  width: 100%;
  padding: 0 var(--s3);
  min-height: 32px;
  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);
}

.appcol {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.scopebar {
  align-items: center;
  gap: var(--s4);
  min-height: 52px;
  padding: 0 var(--s7);
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  flex: none;
  min-width: 0;
  display: flex;
}

.crumbs {
  align-items: center;
  gap: var(--s3);
  flex: 1;
  min-width: 0;
  display: flex;
}

.crumbws {
  font-size: var(--t3);
  color: var(--muted);
  white-space: nowrap;
  flex: none;
}

.crumbws--wait {
  opacity: .4;
  -webkit-user-select: none;
  user-select: none;
}

.crumbsep {
  color: var(--line);
  font-size: var(--t5);
  flex: none;
}

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

.barbtn {
  border-radius: var(--r1);
  padding: var(--s1) var(--s3);
  font: inherit;
  font-size: var(--t2);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
  background: none;
  border: 1px solid #0000;
}

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

.barbtn:disabled {
  cursor: default;
  opacity: .7;
}

.prjsw {
  min-width: 0;
  position: relative;
}

.prjtrig {
  align-items: baseline;
  gap: var(--s3);
  border-radius: var(--r2);
  min-width: 0;
  max-width: 100%;
  padding: var(--s2) var(--s3);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background var(--d1) var(--ease), border-color var(--d1) var(--ease);
  background: none;
  border: 1px solid #0000;
  display: flex;
}

.prjtrig:hover, .prjtrig[aria-expanded="true"] {
  background: var(--panel3);
  border-color: var(--line);
}

.prjtrig b {
  font-size: var(--t4);
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
}

.prjtrig .prjhost {
  font-family: var(--mono);
  font-size: var(--t2);
  color: var(--muted);
  white-space: nowrap;
  flex: none;
  text-decoration: none;
}

.prjchev {
  width: 12px;
  height: 12px;
  color: var(--muted);
  flex: none;
  align-self: center;
}

.prjtrig--wait {
  color: var(--muted);
  font-size: var(--t3);
  cursor: default;
}

.prjmenu {
  z-index: 40;
  left: 0;
  top: calc(100% + var(--s1));
  min-width: 320px;
  max-width: min(420px, calc(100vw - 2 * var(--s5)));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--sh2);
  padding: var(--s2);
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  display: flex;
  position: absolute;
  overflow-y: auto;
}

.prjrow {
  text-align: left;
  border-radius: var(--r1);
  width: 100%;
  padding: var(--s2) var(--s3);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--d1) var(--ease);
  background: none;
  border: 0;
}

.prjrow:hover {
  background: var(--panel3);
}

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

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

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

.prjnone {
  padding: var(--s2) var(--s3);
  font-size: var(--t2);
  color: var(--muted);
  margin: 0;
}

.prjnew {
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--t2);
  color: var(--teal);
  text-decoration: none;
  display: block;
}

.prjnew:hover {
  background: var(--panel3);
}

.prov {
  font-size: var(--t1);
  color: var(--muted);
  margin: .25rem 0 0;
  display: block;
}

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

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

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

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

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

.arow:first-child {
  border-top: 0;
}

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

.adot {
  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)) {
  .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 {
  font-size: var(--t4);
  letter-spacing: -.01em;
  white-space: nowrap;
  font-weight: 600;
}

.arole {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--tc);
  white-space: nowrap;
  border-radius: var(--r1);
  background: var(--tc);
  padding: 0 .35rem;
  line-height: 1.6;
}

@supports (color: color-mix(in lab, red, red)) {
  .arole {
    background: color-mix(in srgb, var(--tc) 10%, transparent);
  }
}

.ameta {
  font-size: var(--t2);
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

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

.amono {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  white-space: nowrap;
}

.achip {
  font-size: var(--t1);
  border-radius: var(--rfull);
  white-space: nowrap;
  cursor: help;
  padding: .05rem .45rem;
  line-height: 1.6;
}

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

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

  .arole {
    justify-self: start;
  }

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

.adetail {
  max-width: 1280px;
}

.hd .astatus {
  gap: var(--s1) var(--s3);
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--t2);
  color: var(--muted);
  flex-wrap: wrap;
  display: flex;
}

.astatus .good {
  color: var(--good);
}

.astatus .warn {
  color: var(--warn);
}

.astatus span + span:before {
  content: "·";
  color: var(--muted);
  margin-right: var(--s3);
}

.adetail .card-h {
  flex-wrap: wrap;
  row-gap: 0;
}

.adetail .card-h .hint {
  white-space: nowrap;
}

.adetail .trow {
  padding: var(--s2) var(--s4);
  grid-template-columns: minmax(0, 1fr) auto;
}

.adetail .card {
  margin-bottom: var(--s3);
}

.adetail .card-h {
  min-height: 40px;
  padding: var(--s1) var(--s4);
}

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

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

.adetail .card-b > p, .adetail .card-b > .clampbox > p {
  margin: 0 0 var(--s2);
  font-size: var(--t3);
}

.adetail .card-b > :last-child, .adetail .card-b > .clampbox:last-child > p {
  margin-bottom: 0;
}

.adetail .card-b .asmall {
  font-size: var(--t2);
  color: var(--muted);
  line-height: 1.5;
}

.aevid > summary {
  cursor: pointer;
  font-size: var(--t2);
  color: var(--muted);
  margin-top: var(--s2);
  width: max-content;
}

.aevid[open] > summary {
  margin-bottom: var(--s2);
}

.aevid .clampbox {
  padding: var(--s2) 0;
  border-top: 1px solid var(--line2);
}

.aevid .clampbox p {
  margin: 0;
}

.clamp {
  -webkit-line-clamp: var(--lines);
  line-clamp: var(--lines);
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.linkbtn {
  font: inherit;
  font-size: var(--t2);
  color: var(--teal);
  cursor: pointer;
  margin: 0 0 var(--s2);
  background: none;
  border: 0;
  padding: 0;
}

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

.aitem {
  border-top: 1px solid var(--line2);
  position: relative;
}

.aitem:first-child {
  border-top: 0;
}

.aitem .arow {
  border-top: 0;
  padding-right: 48px;
}

.ainfo {
  right: var(--s3);
  border: 1px solid var(--line);
  background: var(--panel);
  width: 24px;
  height: 24px;
  color: var(--muted);
  font: italic 600 var(--t2)/1 var(--serif);
  cursor: pointer;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.ainfo:hover {
  color: var(--teal);
  border-color: var(--teal3);
}

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

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

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

.agenthead h2 .arole {
  font-size: var(--t2);
  font-weight: 400;
}

.agenthead > .btn {
  margin-top: var(--s1);
  flex: none;
}

@media (max-width: 780px) {
  .agenthead {
    flex-direction: column;
    gap: 0;
  }

  .agenthead > .btn {
    margin: 0 0 var(--s4);
  }
}

.tdclose {
  color: var(--muted);
  cursor: pointer;
  padding: 0 var(--s1);
  border-radius: var(--r1);
  background: none;
  border: 0;
  font-size: 1.3rem;
  line-height: 1;
}

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

.aboutdlg {
  width: min(760px, calc(100vw - 2 * var(--s5)));
  max-height: calc(100dvh - 2 * var(--s6));
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sh3);
  margin: auto;
  padding: 0;
}

.aboutdlg::backdrop {
  background: #10161461;
}

.aboutin {
  max-height: calc(100dvh - 2 * var(--s6));
  flex-direction: column;
  display: flex;
}

.abouthead {
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex: none;
  display: flex;
}

.abouthead h3 {
  font-size: var(--t5);
  flex: 1;
}

.aboutbody {
  padding: var(--s4) var(--s5) var(--s5);
  overflow-y: auto;
}

.aboutcat > summary {
  cursor: pointer;
  list-style: none;
}

.aboutcat > summary::-webkit-details-marker {
  display: none;
}

.aboutcat > summary h3:before {
  content: "▸ ";
  color: var(--muted);
}

.aboutcat[open] > summary h3:before {
  content: "▾ ";
}

.hd--tight {
  margin-bottom: var(--s4);
  max-width: 70ch;
}

.hd--tight h2 {
  margin-bottom: 2px;
}

.hd--tight p {
  line-height: 1.5;
}

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

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

.playswriting {
  padding: var(--s2) 0;
}

.playswriting .skrow:last-child {
  margin-bottom: 0;
}

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

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

.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(--skel) 25%,var(--skel-hi) 37%,var(--skel) 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;
}

@media (min-width: 1001px) {
  .app--lock {
    height: 100dvh;
    overflow: hidden;
  }

  .app--lock .sidein {
    height: 100%;
  }

  .app--lock .appcol {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .app--lock .main {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .app--lock .runwrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .app--lock .rail {
    height: 100%;
    min-height: 0;
  }

  .app--lock .stagecol {
    flex-direction: column;
    height: 100%;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .app--lock .stage {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .app--lock .stage:has( > .chatstage) {
    overflow: hidden;
  }

  .app--lock .chatstage {
    height: 100%;
    min-height: 0;
  }

  .app--lock .chatcol {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .app--lock .chatlog {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .app--lock .side2 {
    height: 100%;
    min-height: 0;
    position: static;
    overflow-y: auto;
  }

  .app--lock .chatlog .composer-pin {
    background: var(--paper);
    position: sticky;
    bottom: 0;
  }

  .app--lock .chatlog[data-tall] .composer-pin {
    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-rows: auto 1fr;
    grid-template-columns: 1fr;
  }

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

  .sidein {
    height: auto;
    padding: var(--s3) var(--s5);
    flex-flow: wrap;
    align-items: center;
    position: static;
    overflow: visible;
  }

  .sidein .brand {
    padding: 0 var(--s3) 0 0;
    min-height: 0;
  }

  .navb {
    width: auto;
  }

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

  .scopebar {
    padding: 0 var(--s5);
    gap: var(--s2);
  }

  .crumbws, .crumbsep, .prjtrig .prjhost {
    display: none;
  }

  .prjsw {
    position: static;
  }

  .prjmenu {
    left: var(--s5);
    right: var(--s5);
    min-width: 0;
    max-width: none;
    top: calc(100% - 2px);
  }

  .scopebar {
    position: relative;
  }

  .runwrap {
    margin: calc(var(--s5) * -1) calc(var(--s5) * -1) calc(var(--s7) * -1);
  }
}

@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) {
  .sk {
    background: var(--skel);
    animation: none;
  }

  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  .btn:hover, .opt:hover, .segopt:hover, .ssob: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: clamp(var(--s4), 9vh, 5rem) var(--s4) var(--s4);
  pointer-events: none;
  justify-content: center;
  align-items: flex-start;
  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);
  scrollbar-gutter: stable;
  overflow-anchor: none;
  flex-direction: column;
  display: flex;
}

.composer-pin {
  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);
}

.agent-card .whyblock {
  margin: 0;
}

.agent-card .whytext {
  font-size: var(--t3);
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  line-height: 1.6;
}

.agent-card .whyvia {
  font-size: var(--t1);
  color: var(--muted);
  margin-top: var(--s1);
  text-decoration: none;
  display: block;
}

.agent-card .tallywrap {
  border-top: 1px dashed var(--line);
  padding-top: var(--s2);
  margin-top: var(--s1);
}

.agent-card .tallywrap summary {
  cursor: pointer;
  font-size: var(--t1);
  color: var(--muted);
  list-style: none;
}

.agent-card .tallywrap summary::-webkit-details-marker {
  display: none;
}

.agent-card .tallywrap .tally {
  margin-top: var(--s2);
  border-top: none;
  padding-top: 0;
}

.trow2 .tag {
  white-space: normal;
  margin-left: var(--s2);
  vertical-align: middle;
}

.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);
  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(--s3);
  max-width: 70ch;
  line-height: 1.5;
}

.skill-grid {
  gap: var(--s2);
  margin-bottom: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  display: grid;
}

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

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

.skill-card p {
  color: var(--muted);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.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-how > summary {
  cursor: pointer;
  align-items: center;
  gap: var(--s2);
  width: max-content;
  max-width: 100%;
  margin: 0;
  list-style: none;
  display: flex;
}

.skill-how > summary::-webkit-details-marker {
  display: none;
}

.skill-how > summary:before {
  content: "▸";
  font-size: var(--t2);
  transition: transform var(--d1) var(--ease);
}

.skill-how[open] > summary:before {
  transform: rotate(90deg);
}

.skill-how[open] > summary {
  margin-bottom: var(--s3);
}

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

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

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

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

.dbasis-flag ul {
  margin: var(--s1) 0 0;
  padding-left: var(--s5);
}

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

.rp-chip.suggested {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal);
}

.suggested-tag {
  margin-right: var(--s2);
  font-family: var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--teal);
  opacity: .85;
  font-size: .6rem;
  display: inline-block;
}

.fill-card {
  border-left: 2px solid var(--line);
  margin: var(--s2) 0 var(--s2) var(--s3);
  padding: var(--s2) 0 var(--s2) var(--s3);
}

.fill-card > b {
  font-size: var(--t3);
  display: block;
}

.fill-card > s {
  color: var(--muted);
  font-size: var(--t2);
  margin-top: 2px;
  text-decoration: none;
  display: block;
}

.fill-quote {
  font-size: var(--t2);
  color: var(--muted);
  margin-top: var(--s2);
  font-style: italic;
}

.fill-card .change-it {
  margin-top: var(--s2);
  font-size: var(--t2);
  display: inline-block;
}

.confirm-inline {
  font-size: var(--t2);
  color: var(--muted);
}

.confirm-inline .link {
  margin-left: var(--s2);
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

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

@property --tw-outline-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-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;
  }
}

/* [project]/app/tasks.css [app-client] (css) */
.ico {
  flex: none;
  display: block;
}

.tvav {
  width: 32px;
  height: 32px;
  font-size: var(--t2);
  letter-spacing: .01em;
  color: var(--tc);
  background: color-mix(in srgb, var(--tc) 16%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 32%, transparent);
  -webkit-user-select: none;
  user-select: none;
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-weight: 600;
  line-height: 1;
  display: inline-grid;
}

.tvav--sm {
  width: 22px;
  height: 22px;
  font-size: .62rem;
}

.tvav--lg {
  width: 36px;
  height: 36px;
  font-size: var(--t3);
}

.tvcount {
  min-width: 18px;
  padding: 0 var(--s1);
  border-radius: var(--rfull);
  background: var(--panel3);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t1);
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  display: inline-block;
}

.tvlogo {
  color: #fff;
  border-radius: 5px;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: .58rem;
  font-weight: 700;
  line-height: 1;
  display: inline-grid;
}

.tvwho {
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
}

.tvwho > span:last-child {
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.tw {
  max-width: 1280px;
  margin-bottom: var(--s7);
  container: tw / inline-size;
}

.tvsummary {
  margin: 0 0 var(--s4);
  font-size: var(--t2);
}

.tvbar {
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
  display: flex;
}

.tvbar-l {
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  min-width: 0;
  display: flex;
}

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

.tvsearch {
  align-items: center;
  width: 220px;
  max-width: 100%;
  display: flex;
  position: relative;
}

.tvsearch .ico {
  left: var(--s3);
  color: var(--muted);
  pointer-events: none;
  position: absolute;
}

.tvsearch input {
  height: 32px;
  padding: 0 var(--s3) 0 28px;
  font-size: var(--t3);
}

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

.tvagents--stack {
  gap: 0;
}

.tvagents--stack .tvavbtn + .tvavbtn, .tvagents--stack .tvavbtn + .tvmore {
  margin-left: -6px;
}

.tvall {
  height: 32px;
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--rfull);
  background: var(--panel);
  color: var(--ink2);
  font: inherit;
  font-size: var(--t2);
  cursor: pointer;
  margin-right: var(--s1);
  transition: background var(--d1) var(--ease), border-color var(--d1) var(--ease);
  font-weight: 600;
}

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

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

.tvavbtn {
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--paper);
  transition: transform var(--d1) var(--ease), box-shadow var(--d1) var(--ease);
  background: none;
  border: 0;
  border-radius: 50%;
  padding: 0;
  position: relative;
}

.tvavbtn:hover {
  z-index: 1;
  transform: translateY(-1px);
}

.tvavbtn[aria-pressed="true"] {
  z-index: 2;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--teal), var(--sh2);
  transform: translateY(-3px);
}

.tvmore {
  display: inline-flex;
  position: relative;
}

.tvmore-t .tvav {
  --tc: var(--muted);
  font-size: var(--t1);
}

.tvmore-m {
  z-index: 30;
  min-width: 220px;
  padding: var(--s1);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--sh3);
  animation: reveal var(--d2) var(--out) both;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
}

.tvmore-i {
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r1);
  font-size: var(--t3);
  cursor: pointer;
  display: flex;
}

.tvmore-i:hover {
  background: var(--panel3);
}

.tvmore-i input {
  width: auto;
  accent-color: var(--teal);
  margin: 0;
}

.tvmore-n {
  flex: 1;
  min-width: 0;
}

.tvavn {
  border-radius: var(--rfull);
  background: var(--panel);
  border: 1px solid var(--line);
  min-width: 16px;
  height: 16px;
  color: var(--ink2);
  font-family: var(--mono);
  text-align: center;
  padding: 0 3px;
  font-size: .6rem;
  line-height: 14px;
  position: absolute;
  bottom: -4px;
  right: -5px;
}

.tvquick {
  gap: var(--s1);
  flex-wrap: wrap;
  display: flex;
}

.tvchip {
  align-items: center;
  gap: var(--s2);
  height: 32px;
  padding: 0 var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel);
  color: var(--ink2);
  font: inherit;
  font-size: var(--t2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--d1) var(--ease), border-color var(--d1) var(--ease), color var(--d1) var(--ease);
  display: inline-flex;
}

.tvchip:hover {
  border-color: var(--teal3);
  background: var(--panel2);
}

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

.tvchip[aria-pressed="true"] .tvcount {
  background: var(--panel);
  color: var(--teal);
}

.tvchip--needs_connection .ico {
  color: var(--crit);
}

.tvchip--waits_for_you .ico {
  color: var(--warn);
}

.tvchip--ready .ico {
  color: var(--good);
}

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

.tvgroupby select {
  width: auto;
  height: 32px;
  padding: 0 var(--s3);
  font-size: var(--t2);
}

.tvseg {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel2);
  gap: 2px;
  padding: 2px;
  display: inline-flex;
}

.tvseg button {
  align-items: center;
  gap: var(--s1);
  height: 26px;
  padding: 0 var(--s3);
  border-radius: var(--r1);
  color: var(--muted);
  font: inherit;
  font-size: var(--t2);
  cursor: pointer;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
  background: none;
  border: 0;
  display: inline-flex;
}

.tvseg button:hover {
  color: var(--ink);
}

.tvseg button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--sh1);
  font-weight: 600;
}

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

.tvclear {
  font: inherit;
  font-size: var(--t2);
  color: var(--teal);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

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

.tvnone {
  align-items: center;
  gap: var(--s3);
  padding: var(--s7) var(--s5);
  border: 1px dashed var(--line);
  border-radius: var(--r3);
  background: var(--panel2);
  color: var(--muted);
  font-size: var(--t3);
  text-align: center;
  flex-direction: column;
  display: flex;
}

.tvnone p {
  margin: 0;
}

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

.tvtable {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  font-size: var(--t3);
}

.tvtable thead th {
  z-index: 2;
  height: 36px;
  padding: 0 var(--s3);
  text-align: left;
  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);
  white-space: nowrap;
  font-weight: 500;
  position: sticky;
  top: 0;
}

.tvsort {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 2px;
  padding: 0;
  display: inline-flex;
}

.tvsort:hover, th[aria-sort="ascending"] .tvsort, th[aria-sort="descending"] .tvsort {
  color: var(--ink);
}

.tvsortmark {
  width: 12px;
  display: inline-grid;
}

.tvc-key {
  width: 84px;
}

.tvc-agent {
  width: 168px;
}

.tvc-status {
  width: 156px;
}

.tvc-needs {
  width: 190px;
}

.tvc-connector {
  width: 156px;
}

.tvrow {
  cursor: pointer;
}

.tvrow td {
  height: 40px;
  padding: 0 var(--s3);
  border-top: 1px solid var(--line2);
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background var(--d1) var(--ease);
  overflow: hidden;
}

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

.tvrow .tvc-key {
  color: var(--muted);
  font-size: var(--t2);
}

.tvrow .tvc-needs {
  color: var(--ink2);
  font-size: var(--t2);
}

.tvopen {
  color: var(--ink);
  border-radius: var(--r1);
  font-weight: 600;
  text-decoration: none;
}

.tvopen:hover {
  color: var(--teal);
  text-decoration: underline;
}

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

.tvgroup th {
  background: var(--panel);
  border-top: 1px solid var(--line);
  text-align: left;
  padding: 0;
}

.tvtable tbody:first-of-type .tvgroup th {
  border-top: 0;
}

.tvgroup button {
  align-items: center;
  gap: var(--s2);
  width: 100%;
  height: 36px;
  padding: 0 var(--s3);
  font: inherit;
  font-size: var(--t2);
  color: var(--ink2);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  font-weight: 600;
  display: flex;
}

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

@container tw (max-width: 1000px) {
  .tvc-connector {
    display: none;
  }
}

@container tw (max-width: 820px) {
  .tvc-needs {
    display: none;
  }

  .tvc-agent {
    width: 140px;
  }
}

@container tw (max-width: 600px) {
  .tvtable, .tvtable tbody {
    display: block;
  }

  .tvtable thead {
    display: none;
  }

  .tvgroup, .tvgroup th {
    display: block;
  }

  .tvrow {
    align-items: center;
    gap: var(--s1) var(--s3);
    padding: var(--s3);
    border-top: 1px solid var(--line2);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "key status"
                         "task task"
                         "agent connector";
    display: grid;
  }

  .tvrow td {
    background: none;
    border: 0;
    height: auto;
    padding: 0;
    display: block;
  }

  .tvrow:hover td {
    background: none;
  }

  .tvrow .tvc-key {
    grid-area: key;
    width: auto;
  }

  .tvrow .tvc-agent {
    grid-area: agent;
    width: auto;
  }

  .tvrow .tvc-status {
    grid-area: status;
    width: auto;
  }

  .tvrow .tvc-task {
    white-space: normal;
    grid-area: task;
  }

  .tvrow .tvc-connector {
    grid-area: connector;
    justify-self: end;
    width: auto;
  }

  .tvrow .tvc-needs {
    display: none;
  }

  .tvrow .tvdoes {
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 2px 0 0;
    display: block;
    overflow: hidden;
  }
}

.tvboard {
  gap: var(--s4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  display: grid;
}

@container tw (max-width: 640px) {
  .tvboard {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tvcol {
  gap: var(--s3);
  min-height: 140px;
  padding: var(--s3);
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: var(--r3);
  flex-direction: column;
  display: flex;
}

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

.tvcol--needs_connection .tvcol-h .ico {
  color: var(--crit);
}

.tvcol--waits_for_you .tvcol-h .ico {
  color: var(--warn);
}

.tvcol--ready .tvcol-h .ico {
  color: var(--good);
}

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

.tvcard {
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel);
  box-shadow: var(--sh1);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease), transform var(--d1) var(--ease);
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

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

.tvcard-t {
  font-size: var(--t3);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}

.tvcard-f {
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-width: 0;
  display: flex;
}

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

.tvkind {
  color: var(--muted);
  display: inline-flex;
}

.tvneed {
  align-items: center;
  gap: var(--s1);
  min-width: 0;
  max-width: 100%;
  padding: 1px var(--s2) 1px 2px;
  border-radius: var(--rfull);
  font-size: var(--t1);
  white-space: nowrap;
  text-overflow: ellipsis;
  align-self: flex-start;
  display: inline-flex;
  overflow: hidden;
}

.tvneed--needs_connection {
  background: var(--crit2);
  color: var(--crit);
}

.tvneed--waits_for_you {
  background: var(--warn2);
  color: var(--warn);
  padding-left: var(--s2);
}

.tvneed .tvlogo {
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: .52rem;
}

.tvcard-who {
  font-size: var(--t2);
  color: var(--ink2);
  gap: var(--s2);
  margin-left: auto;
}

.tvcard-who > span:last-child {
  white-space: nowrap;
}

.tvlanes {
  gap: var(--s3);
  flex-direction: column;
  display: flex;
}

.tvlanes-h {
  gap: var(--s4);
  padding: 0 var(--s3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.tvlane {
  border: 1px solid var(--line2);
  border-radius: var(--r3);
  background: var(--panel2);
  overflow: clip;
}

.tvlane-h {
  align-items: center;
  gap: var(--s2);
  width: 100%;
  height: 40px;
  padding: 0 var(--s3);
  font: inherit;
  font-size: var(--t3);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  font-weight: 600;
  display: flex;
}

.tvlane-h:hover {
  background: var(--panel3);
}

.tvlane-b {
  gap: var(--s4);
  padding: 0 var(--s3) var(--s3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

@container tw (max-width: 640px) {
  .tvlanes-h {
    display: none;
  }

  .tvlane-b {
    gap: var(--s3);
    grid-template-columns: minmax(0, 1fr);
  }

  .tvcell:before {
    content: attr(data-label);
    margin-bottom: var(--s2);
    font-family: var(--mono);
    font-size: var(--t1);
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--muted);
    display: block;
  }
}

.tvempty {
  padding: var(--s5);
  border: 1px dashed var(--line);
  border-radius: var(--r2);
  color: var(--muted);
  font-size: var(--t2);
  text-align: center;
  margin: 0;
}

.agsw {
  position: relative;
}

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

.agsw-t {
  align-items: center;
  gap: var(--s1);
  margin-left: calc(-1 * var(--s2));
  padding: 2px var(--s2);
  border-radius: var(--r2);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--d1) var(--ease);
  background: none;
  border: 0;
  display: inline-flex;
}

.agsw-t:hover, .agsw-t[aria-expanded="true"] {
  background: var(--panel3);
}

.agsw-m {
  z-index: 30;
  min-width: 260px;
  max-width: calc(100vw - 2 * var(--s5));
  padding: var(--s1);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--sh3);
  font-family: var(--sans);
  animation: reveal var(--d2) var(--out) both;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
}

.agsw-i {
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s2) var(--s3);
  border-radius: var(--r1);
  color: var(--ink);
  font: inherit;
  font-size: var(--t3);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  font-weight: 400;
  text-decoration: none;
  display: flex;
}

.agsw-i:hover, .agsw-i:focus-visible {
  background: var(--panel3);
}

.agsw-i[aria-checked="true"] {
  font-weight: 600;
}

.agsw-n {
  flex: 1;
  min-width: 0;
}

.agsw-all {
  margin-top: var(--s1);
  border-top: 1px solid var(--line2);
  border-radius: 0 0 var(--r1) var(--r1);
  color: var(--teal);
  justify-content: space-between;
}

.ptabs {
  gap: var(--s5);
  margin: 0 0 var(--s5);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
  display: flex;
  overflow-x: auto;
}

.ptab {
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) 0;
  font: inherit;
  font-size: var(--t3);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--d1) var(--ease), border-color var(--d2) var(--ease);
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  flex: none;
  margin-bottom: -1px;
  font-weight: 500;
  display: inline-flex;
  position: relative;
}

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

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

.ptab:focus-visible {
  box-shadow: var(--ring);
  border-radius: var(--r1);
  outline: none;
}

.ptab-n {
  min-width: 18px;
  padding: 0 var(--s1);
  border-radius: var(--rfull);
  background: var(--panel3);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t1);
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  display: inline-block;
}

.ptab[aria-selected="true"] .ptab-n {
  background: var(--teal2);
  color: var(--teal);
}

/* [project]/app/connections.css [app-client] (css) */
.cx-hd {
  max-width: none;
}

.cx-hd p {
  max-width: 70ch;
}

.cx-progress {
  align-items: center;
  gap: var(--s2) var(--s4);
  margin-top: var(--s4);
  font-size: var(--t3);
  color: var(--ink2);
  flex-wrap: wrap;
  display: flex;
}

.cx-progress-t b {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.cx-bar-track {
  border-radius: var(--rfull);
  background: var(--panel3);
  flex: 0 220px;
  min-width: 120px;
  height: 4px;
  position: relative;
  overflow: hidden;
}

.cx-bar-track > span {
  border-radius: inherit;
  background: var(--good);
  transition: width var(--d2) var(--ease);
  position: absolute;
  inset: 0 auto 0 0;
}

.cx-tabs {
  gap: var(--s1);
  margin: 0 0 var(--s5);
  border-bottom: 1px solid var(--line);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  display: flex;
  overflow-x: auto;
}

.cx-tabs::-webkit-scrollbar {
  display: none;
}

.cx-tab {
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r1) var(--r1) 0 0;
  font: inherit;
  font-size: var(--t4);
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  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;
  flex: none;
  margin-bottom: -1px;
  display: inline-flex;
}

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

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

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

.cx-tab-n, .cx-count {
  min-width: 18px;
  padding: 0 var(--s1);
  border-radius: var(--rfull);
  background: var(--panel3);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t1);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 18px;
  display: inline-block;
}

.cx-tab[aria-selected="true"] .cx-tab-n {
  background: var(--teal2);
  color: var(--teal);
}

.cx-work, .cx-tabs {
  max-width: 1180px;
}

.cx-work {
  container: cxwork / inline-size;
}

.cx-panel {
  min-width: 0;
  container: cxpanel / inline-size;
}

.cx-panel:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: var(--r2);
}

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

.cx-sheet-layer {
  z-index: 40;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.cx-sheet-bg {
  display: none;
}

.cx-sheet {
  gap: var(--s4);
  width: min(420px, 100vw);
  padding: var(--s5);
  overscroll-behavior: contain;
  pointer-events: auto;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--sh3);
  animation: reveal var(--d2) var(--out) both;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: auto;
}

.cx-sheet:focus, .cx-sheet:focus-visible {
  outline: none;
}

.cx-sheet-back {
  align-self: flex-start;
}

.cx-sheet .c2-drawer {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.cx-sheet-status {
  margin: 0 0 var(--s3);
}

.cx-sheet-hint {
  margin-top: var(--s1);
  overflow-wrap: anywhere;
  display: block;
}

@media (max-width: 1023px) {
  .cx-sheet-bg {
    pointer-events: auto;
    background: #00000052;
    display: block;
    position: absolute;
    inset: 0;
  }
}

.cx-secs {
  gap: var(--s4);
  border-top: 1px solid var(--line2);
  padding-top: var(--s4);
  flex-direction: column;
  display: flex;
}

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

.cx-sec h4 {
  margin: var(--s3) 0 var(--s1);
  font-size: var(--t2);
  color: var(--ink2);
  font-weight: 600;
}

.cx-sec p {
  font-size: var(--t3);
  color: var(--ink2);
  margin: 0;
  line-height: 1.55;
}

.cx-sec .mono-block {
  margin: 0 0 var(--s2);
}

.cx-grants {
  margin: 0;
  padding-left: 1.1rem;
}

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

.cx-grants.deny li {
  color: var(--crit);
}

.cx-card {
  gap: var(--s3);
  min-width: 0;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  box-shadow: var(--sh1);
  flex-direction: column;
  display: flex;
}

.cx-pill {
  align-items: center;
  gap: var(--s1);
  padding: 1px var(--s2);
  border-radius: var(--rfull);
  font-size: var(--t1);
  white-space: nowrap;
  flex: none;
  font-weight: 600;
  line-height: 1.6;
  display: inline-flex;
}

.cx-pill:before {
  content: "";
  background: currentColor;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.cx-pill--good {
  background: var(--good2);
  color: var(--good);
}

.cx-pill--warn {
  background: var(--warn2);
  color: var(--warn);
}

.cx-pill--crit {
  background: var(--crit2);
  color: var(--crit);
}

.cx-pill--muted {
  background: var(--panel3);
  color: var(--muted);
}

.cx-used {
  align-items: center;
  gap: var(--s2);
  font-size: var(--t2);
  color: var(--muted);
  flex-wrap: wrap;
  display: flex;
}

.cx-used-l {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.cx-avs {
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.cx-avs li {
  box-shadow: 0 0 0 2px var(--panel);
  border-radius: 50%;
  display: inline-flex;
}

.cx-avs--stack {
  gap: 0;
}

.cx-avs--stack li + li {
  margin-left: -5px;
}

.cx-used-none {
  font-style: italic;
}

.cx-used-sk {
  width: 3.5rem;
}

.cx-unblocks {
  color: var(--crit);
  font-weight: 600;
}

.cx-sys-h--static {
  align-items: baseline;
  gap: 0 var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--panel2);
  flex-wrap: wrap;
  display: flex;
}

.cx-sys-h--static h3 {
  align-items: center;
  gap: var(--s2);
  font-size: var(--t3);
  color: var(--ink2);
  margin: 0;
  font-weight: 600;
  display: flex;
}

.cx-sys-h--static p {
  font-size: var(--t2);
  color: var(--muted);
  margin: 0;
}

.conn--needs {
  box-shadow: inset 3px 0 0 var(--crit);
}

.conn--declined .cx-row-name, .conn--declined .cx-row-logo {
  opacity: .72;
}

.cx-cats {
  gap: var(--s3);
  flex-direction: column;
  display: flex;
}

.cx-groups, .cx-rest {
  gap: var(--s2);
  flex-direction: column;
  display: flex;
}

.cx-rest-t {
  align-items: center;
  gap: var(--s2);
  font-size: var(--t3);
  color: var(--ink2);
  margin: 0;
  font-weight: 600;
  display: flex;
}

.cx-needs-sk {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  overflow: clip;
}

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

.cx-sys-h {
  margin: 0;
}

.cx-sys-h button {
  align-items: center;
  gap: var(--s2);
  width: 100%;
  height: 36px;
  padding: 0 var(--s3);
  background: var(--panel2);
  font: inherit;
  font-size: var(--t3);
  color: var(--ink2);
  text-align: left;
  cursor: pointer;
  transition: background var(--d1) var(--ease);
  border: 0;
  font-weight: 600;
  display: flex;
}

.cx-sys-h button:hover {
  background: var(--panel3);
}

.cx-sys-h button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.cx-chev {
  width: 14px;
  color: var(--muted);
  font-size: var(--t3);
  display: inline-grid;
}

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

.cx-row {
  align-items: center;
  gap: var(--s2) var(--s4);
  grid-template-columns: 28px minmax(0,1fr) 190px 190px var(--go-w, 170px);
  min-height: 48px;
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--line2);
  cursor: pointer;
  transition: background var(--d1) var(--ease);
  grid-template-areas: "logo name used st go";
  display: grid;
}

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

.cx-row.live {
  box-shadow: inset 3px 0 0 var(--good);
}

.cx-row-logo {
  width: 28px;
  height: 28px;
  font-size: var(--t1);
  border-radius: 7px;
  grid-area: logo;
}

.cx-row-name {
  flex-direction: column;
  grid-area: name;
  gap: 1px;
  min-width: 0;
  line-height: 1.3;
  display: flex;
}

.cx-row-t {
  align-items: baseline;
  gap: var(--s2);
  min-width: 0;
  display: flex;
}

.cx-row-t b {
  font-size: var(--t4);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: none;
  max-width: 70%;
  overflow: hidden;
}

.cx-row-t small, .cx-row-sub {
  min-width: 0;
  font-size: var(--t2);
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cx-row-sub {
  font-size: var(--t1);
}

.cx-row-sub.cx-row-hint {
  color: var(--ink2);
}

.cx-row-used {
  grid-area: used;
  min-width: 0;
}

.cx-row-used .cx-used {
  white-space: nowrap;
  flex-wrap: nowrap;
}

.cx-row .cx-used-l {
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.cx-row-st {
  grid-area: st;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
}

.cx-row-st .cx-pill {
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

.cx-cats:has(.c2-absent) {
  --go-w: 300px;
}

.cx-row-go {
  justify-content: flex-end;
  justify-self: end;
  align-items: center;
  gap: var(--s1) var(--s3);
  cursor: default;
  flex-wrap: wrap;
  grid-area: go;
  display: flex;
}

@container cxpanel (max-width: 860px) {
  .cx-row {
    padding: var(--s3);
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas: "logo name st"
                         "logo used go";
  }

  .cx-row-logo {
    align-self: start;
  }

  .cx-row-sub {
    display: none;
  }

  .cx-row-sub.cx-row-hint {
    white-space: normal;
    overflow-wrap: anywhere;
    display: block;
  }

  .cx-row-t {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .cx-row-t b {
    max-width: 100%;
  }

  .cx-row-st {
    justify-self: end;
  }

  .cx-row-go {
    justify-content: flex-end;
  }
}

.cx-bar {
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
  display: flex;
}

.cx-seg {
  scrollbar-width: none;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel2);
  gap: 2px;
  max-width: 100%;
  padding: 2px;
  display: flex;
  overflow-x: auto;
}

.cx-seg::-webkit-scrollbar {
  display: none;
}

.cx-seg button {
  align-items: center;
  gap: var(--s2);
  height: 30px;
  padding: 0 var(--s3);
  border-radius: var(--r1);
  color: var(--muted);
  font: inherit;
  font-size: var(--t3);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
  background: none;
  border: 0;
  flex: none;
  display: inline-flex;
}

.cx-seg button:hover {
  color: var(--ink);
}

.cx-seg button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.cx-seg button[aria-pressed="true"], .cx-seg button[aria-checked="true"] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--sh1);
  font-weight: 600;
}

.cx-seg-n {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  font-weight: 500;
}

.cx-search {
  width: 260px;
  max-width: 100%;
  display: flex;
}

.cx-bar .cx-search {
  margin-left: auto;
}

.cx-search input {
  height: 34px;
  font-size: var(--t3);
}

.cx-search--wide {
  width: 100%;
}

.cx-rest-t--btn button {
  align-items: center;
  gap: var(--s2);
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: flex;
}

.cx-rest-t--btn button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.cx-rest-sub {
  font-size: var(--t2);
  color: var(--muted);
  margin: 0;
}

.cx-dev-link {
  margin: var(--s5) 0 0;
  font-size: var(--t3);
}

.cx-lead {
  margin: 0 0 var(--s4);
  font-size: var(--t3);
  color: var(--muted);
  max-width: 70ch;
}

.cx-panel-now {
  gap: var(--s3);
  margin: 0 0 var(--s3);
  flex-direction: column;
  display: flex;
}

.cx-panel-now:empty {
  display: none;
}

.cx-panel-now > .cx-sheet-status {
  margin: 0;
}

.cx-landed {
  font-size: var(--t3);
  color: var(--good);
  margin: 0;
  font-weight: 600;
}

.cx-err {
  font-size: var(--t3);
  color: var(--crit);
  margin: 0;
  line-height: 1.5;
}

.cx-linkbtn {
  font: inherit;
  font-size: var(--t2);
  color: var(--teal);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
}

.cx-linkbtn:hover {
  color: var(--ink);
}

.cx-oauth {
  align-items: flex-start;
  gap: var(--s2);
  flex-direction: column;
  display: flex;
}

.cx-oauth-note {
  font-size: var(--t2);
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.cx-live {
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border: 1px solid color-mix(in srgb, var(--good) 35%, var(--line));
  border-radius: var(--r2);
  background: var(--good2);
  flex-direction: column;
  display: flex;
}

.cx-live-who {
  align-items: center;
  gap: var(--s2);
  font-size: var(--t3);
  color: var(--ink);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.cx-live-who b {
  overflow-wrap: anywhere;
}

.cx-live-proof {
  font-size: var(--t2);
  color: var(--ink2);
  margin: 0;
}

.cx-live-actions {
  gap: var(--s2);
  flex-wrap: wrap;
  display: flex;
}

.cx-wiz {
  gap: var(--s3);
  flex-direction: column;
  display: flex;
}

.cx-wiz-where {
  font-size: var(--t2);
  color: var(--muted);
  overflow-wrap: anywhere;
  margin: 0;
}

.cx-wiz-where b {
  color: var(--ink);
}

.cx-tool-steps .cx-paste-steps {
  padding-left: var(--s5);
  list-style: decimal;
}

.cx-tool-steps {
  gap: var(--s1);
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.cx-steps li {
  min-width: 0;
  padding: var(--s1) 0 0;
  border-top: 2px solid var(--line);
  font-size: var(--t1);
  color: var(--muted);
  counter-increment: step;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  overflow: hidden;
}

.cx-steps li:before {
  content: counter(step) ". ";
}

.cx-steps li[aria-current="step"] {
  border-top-color: var(--teal);
  color: var(--ink);
  font-weight: 600;
}

.cx-picks {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  flex-direction: column;
  max-height: 260px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  overflow-y: auto;
}

.cx-picks li + li {
  border-top: 1px solid var(--line2);
}

.cx-picks li.quiet {
  padding: var(--s3);
  font-size: var(--t2);
}

.cx-picks button {
  width: 100%;
  padding: var(--s2) var(--s3);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  display: flex;
}

.cx-picks button:hover {
  background: var(--panel2);
}

.cx-picks button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.cx-picks button b {
  font-size: var(--t3);
  overflow-wrap: anywhere;
  font-weight: 600;
}

.cx-picks button small {
  font-size: var(--t1);
  color: var(--muted);
}

.cx-map {
  gap: var(--s3);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.cx-map-fields {
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  display: grid;
}

.cx-map-field {
  font-size: var(--t2);
  color: var(--ink2);
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.cx-map-field em {
  color: var(--crit);
  font-style: normal;
  font-size: var(--t1);
}

.cx-map-field select {
  height: 32px;
  font-size: var(--t2);
}

.cx-map-scroll {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow-x: auto;
}

.cx-map-table {
  border-collapse: collapse;
  font-size: var(--t1);
  min-width: 100%;
}

.cx-map-table th, .cx-map-table td {
  padding: var(--s1) var(--s2);
  border-bottom: 1px solid var(--line2);
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 180px;
  overflow: hidden;
}

.cx-map-table th {
  background: var(--panel3);
  color: var(--ink2);
  font-weight: 600;
}

.cx-map-table .on {
  background: var(--teal2);
}

.cx-map-table th.on {
  color: var(--teal);
}

.cx-map-table .added {
  background: var(--panel2);
  color: var(--muted);
  font-style: italic;
}

.cx-map-note {
  font-size: var(--t1);
  color: var(--muted);
  margin: 0;
}

.cx-map-added {
  font-style: italic;
}

.cx-drop {
  align-items: center;
  gap: var(--s1);
  padding: var(--s6) var(--s4);
  border: 2px dashed var(--line);
  border-radius: var(--r3);
  background: var(--panel2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--d1) var(--ease), background var(--d1) var(--ease);
  flex-direction: column;
  display: flex;
}

.cx-drop:hover, .cx-drop.over {
  border-color: var(--teal);
  background: var(--teal2);
}

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

.cx-drop small {
  font-size: var(--t2);
  color: var(--muted);
}

.cx-file {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.cx-drop:has( + .cx-file:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.cx-result {
  align-items: flex-start;
  gap: var(--s1);
  flex-direction: column;
  display: flex;
}

.cx-result p {
  font-size: var(--t3);
  color: var(--ink2);
  margin: 0;
}

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

.cx-skipped {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  width: 100%;
  max-height: 200px;
  font-size: var(--t2);
  color: var(--ink2);
  margin: 0;
  list-style: none;
  overflow-y: auto;
}

.cx-skipped li + li {
  margin-top: 2px;
}

.cx-skipped span {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  margin-right: var(--s2);
}

.cx-skipped .more {
  color: var(--muted);
  font-style: italic;
}

.cx-modes {
  gap: var(--s3);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.cx-modes-alt {
  gap: var(--s1) var(--s3);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.cx-modes > .cx-sheet-status {
  margin: 0;
}

.cx-paste, .cx-paste form {
  gap: var(--s3);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.cx-paste > .btn, .cx-paste form > .btn {
  align-self: flex-start;
}

.cx-paste .cx-sheet-status {
  margin: 0;
}

.cx-paste-steps {
  padding-left: var(--s4);
  font-size: var(--t2);
  color: var(--ink2);
  gap: var(--s1);
  flex-direction: column;
  margin: 0;
  line-height: 1.55;
  display: flex;
}

.cx-paste-steps b {
  color: var(--ink);
}

.cx-paste-steps a {
  color: var(--teal);
}

.cx-scopes {
  margin: var(--s1) 0 0;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  list-style: none;
  display: flex;
}

.cx-scopes code {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--ink);
  padding: 1px var(--s1);
  border-radius: var(--r1, 4px);
  background: var(--panel3);
  overflow-wrap: anywhere;
}

.cx-paste-only {
  font-size: var(--t2);
  color: var(--good);
  margin: 0;
  font-weight: 600;
}

.cx-paste-field {
  font-size: var(--t2);
  color: var(--ink2);
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.cx-paste-field input {
  width: 100%;
  height: 36px;
  font-size: var(--t3);
  min-width: 0;
}

.cx-paste-help {
  font-size: var(--t1);
  color: var(--muted);
  line-height: 1.4;
}

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

.cx-paste-docs a {
  color: var(--teal);
}

.cx-uni {
  gap: var(--s3);
  flex-direction: column;
  max-width: 880px;
  display: flex;
}

.cx-uni-sec {
  gap: var(--s2);
  flex-direction: column;
  display: flex;
}

.cx-uni-sec:hover {
  box-shadow: var(--sh1);
  transform: none;
}

.cx-uni-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s3);
  display: flex;
}

.cx-uni-head > div {
  min-width: 0;
}

.cx-uni-head .btn {
  flex: none;
}

.cx-uni-sec h3 {
  font-size: var(--t4);
  margin: 0;
  font-weight: 600;
}

.cx-uni-block {
  gap: var(--s3);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.cx-uni-next {
  font-size: var(--t3);
  margin: 0;
  font-weight: 600;
}

.cx-uni-meta {
  font-size: var(--t2);
  color: var(--muted);
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.5;
}

.cx-uni-meta code, .cx-uni-sec code, .cx-guide code, .cx-check code, .cx-tech code {
  font-family: var(--mono);
  font-size: var(--t1);
  padding: 1px var(--s1);
  border-radius: var(--r1, 4px);
  background: var(--panel3);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.cx-uni-list {
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.cx-uni-row {
  border-top: 1px solid var(--line2);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.cx-uni-row:first-child {
  border-top: 0;
}

.cx-uni-line {
  align-items: center;
  gap: var(--s1) var(--s3);
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 46px;
  display: grid;
}

.cx-uni-name {
  min-width: 0;
  font-size: var(--t3);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  overflow: hidden;
}

.cx-uni-cells {
  justify-content: flex-end;
  align-items: center;
  gap: var(--s1) var(--s3);
  flex-wrap: wrap;
  min-width: 0;
  display: flex;
}

.cx-uni-cell {
  max-width: 100%;
  font-size: var(--t2);
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.cx-uni-row .cx-pill {
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

.cx-uni-row > .cx-uni-meta {
  padding: 0 0 var(--s2);
}

.cx-chip {
  padding: 1px var(--s2);
  border-radius: var(--rfull);
  background: var(--panel3);
  color: var(--ink2);
  font-size: var(--t1);
  white-space: nowrap;
  flex: none;
  font-weight: 500;
}

.cx-uni-line--ask {
  grid-template-columns: minmax(0, 1fr);
}

.cx-uni-ask {
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 0;
  font-size: var(--t2);
  color: var(--ink2);
  flex-wrap: wrap;
  display: flex;
}

.cx-uni-ask > span {
  flex: 220px;
  min-width: 0;
}

@media (max-width: 560px) {
  .cx-uni-line {
    gap: 0 var(--s3);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cx-uni-cells {
    padding-bottom: var(--s2);
    grid-area: 2 / 1 / auto / -1;
    justify-content: flex-start;
  }

  .cx-menu {
    grid-area: 1 / 2;
  }
}

.cx-menu {
  flex: none;
  position: relative;
}

.cx-menu-btn {
  border-radius: var(--r2);
  width: 44px;
  height: 44px;
  color: var(--ink2);
  font-size: var(--t7);
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  margin: -4px -10px -4px 0;
  line-height: 1;
  display: inline-flex;
}

.cx-menu-btn:hover:not(:disabled) {
  background: var(--panel3);
}

.cx-menu-btn:disabled {
  opacity: .5;
  cursor: default;
}

.cx-menu-list {
  z-index: 6;
  min-width: 176px;
  padding: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel);
  box-shadow: var(--sh3);
  flex-direction: column;
  display: flex;
  position: absolute;
  top: calc(100% - 4px);
  right: 0;
}

.cx-menu-item {
  padding: var(--s2) var(--s3);
  border-radius: var(--r1, 4px);
  color: var(--ink);
  font: inherit;
  font-size: var(--t2);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
}

.cx-menu-item:hover, .cx-menu-item:focus-visible {
  background: var(--panel3);
}

.cx-menu-item--dg {
  color: var(--crit);
}

.cx-usheet-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  display: flex;
}

.cx-usheet-head h2 {
  font-size: var(--t7);
  margin: 0;
  font-weight: 600;
}

.cx-pick {
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  display: grid;
}

.cx-pick-opt {
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel);
  min-height: 40px;
  color: var(--ink);
  font-size: var(--t2);
  cursor: pointer;
  display: flex;
}

.cx-pick-opt:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal2);
}

.cx-pick-opt:has(input:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.cx-pick-opt input {
  width: 16px;
  min-width: 0;
  height: 16px;
  box-shadow: none;
  accent-color: var(--teal);
  flex: none;
  margin: 0;
  padding: 0;
}

.cx-test {
  align-items: flex-start;
  gap: var(--s2);
  flex-direction: column;
  display: flex;
}

.cx-test-btn {
  width: 100%;
  height: 48px;
  font-size: var(--t4);
}

.cx-tech {
  border-top: 1px solid var(--line2);
  padding-top: var(--s2);
  min-width: 0;
}

.cx-tech > summary {
  cursor: pointer;
  font-size: var(--t2);
  color: var(--ink2);
  padding: var(--s1) 0;
  font-weight: 600;
}

.cx-tech-body {
  gap: var(--s2);
  padding-top: var(--s2);
  font-size: var(--t2);
  color: var(--ink2);
  flex-direction: column;
  min-width: 0;
  line-height: 1.55;
  display: flex;
}

.cx-tech-body p {
  overflow-wrap: anywhere;
  margin: 0;
}

.cx-codes {
  margin: 0;
  padding-left: 1.1rem;
}

.cx-tool-steps {
  gap: var(--s2);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.cx-uni-code {
  margin: var(--s1) 0 0;
  font-size: var(--t1);
  white-space: pre;
  overflow-x: auto;
}

.cx-copy {
  min-width: 0;
  font-size: var(--t2);
  color: var(--ink2);
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.cx-copy-row {
  gap: var(--s2);
  min-width: 0;
  display: flex;
}

.cx-copy-row input {
  min-width: 0;
  height: 34px;
  font-size: var(--t2);
  flex: 1;
}

.cx-copy-row .btn {
  flex: none;
}

.cx-copy-note {
  color: var(--muted);
}

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

.cx-once > .btn {
  align-self: flex-start;
}

.cx-modes-pick {
  gap: var(--s2);
  border: 0;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
}

.cx-modes-pick legend {
  margin-bottom: var(--s1);
  font-size: var(--t2);
  color: var(--ink2);
  padding: 0;
}

.cx-check {
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--t2);
  color: var(--ink2);
  cursor: pointer;
  display: flex;
}

.cx-check input {
  width: 16px;
  min-width: 0;
  height: 16px;
  box-shadow: none;
  accent-color: var(--teal);
  flex: none;
  margin: 3px 0 0;
  padding: 0;
}

.cx-check span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.cx-guide {
  gap: var(--s3);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.cx-guide .cx-seg {
  align-self: flex-start;
}

.cx-guide-lead {
  font-size: var(--t3);
  color: var(--ink2);
  margin: 0;
  line-height: 1.5;
}

.cx-log td, .cx-log th {
  max-width: none;
}

.cx-log-bad td:last-child {
  color: var(--crit);
}

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

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

.cx-adv:hover {
  box-shadow: var(--sh1);
  transform: none;
}

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

.cx-adv > details > summary {
  cursor: pointer;
  font-size: var(--t2);
  color: var(--ink2);
  padding: var(--s1) 0;
  font-weight: 600;
}

.cx-adv-body {
  gap: var(--s3);
  padding-top: var(--s2);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.cx-adv-body .cx-seg {
  align-self: flex-start;
}

.cx-why {
  font-size: var(--t3);
  color: var(--ink2);
  margin: 0;
  line-height: 1.55;
}

.cx-more > summary {
  cursor: pointer;
  font-size: var(--t2);
  color: var(--ink2);
  padding: var(--s1) 0;
  font-weight: 600;
}

.cx-more[open] > summary {
  margin-bottom: var(--s3);
}

.cx-more > .cx-sec {
  margin-bottom: var(--s4);
}

.cx-more .c2-scopes {
  margin-top: var(--s2);
}

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

.cx-methods {
  gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.cx-method {
  align-items: flex-start;
  gap: var(--s1);
  padding: var(--s4) var(--s5) var(--s4) var(--s4);
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  cursor: pointer;
  transition: border-color var(--d1) var(--out), background var(--d1) var(--out), box-shadow var(--d1) var(--out);
  flex-direction: column;
  display: flex;
  position: relative;
}

.cx-method b {
  font-size: var(--t3);
  padding-right: var(--s5);
  font-weight: 600;
  line-height: 1.3;
}

.cx-method span {
  font-size: var(--t2);
  color: var(--muted);
  line-height: 1.4;
}

.cx-method:hover:not(:disabled) {
  border-color: var(--teal3);
  background: var(--panel2);
}

.cx-method:active:not(:disabled) {
  background: var(--panel3);
}

.cx-method:focus-visible {
  box-shadow: var(--ring);
  border-color: var(--teal);
  outline: none;
}

.cx-method.on {
  border-color: var(--teal);
  background: var(--teal2);
  box-shadow: var(--ring);
}

.cx-method.on:after {
  content: "✓";
  top: var(--s3);
  right: var(--s3);
  border-radius: var(--rfull);
  background: var(--teal);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--btnink);
  font-size: var(--t1);
  place-items: center;
  font-weight: 700;
  line-height: 1;
  display: grid;
  position: absolute;
}

.cx-method:disabled {
  cursor: not-allowed;
  background: var(--panel2);
  opacity: .62;
}

.cx-method:disabled span {
  font-style: italic;
}

.cx-method-pane {
  gap: var(--s3);
  flex-direction: column;
  display: flex;
}

.cx-method-pane p {
  font-size: var(--t3);
  color: var(--ink2);
  margin: 0;
  line-height: 1.55;
}

.cx-method-pane .c2-smtp-grid {
  margin-top: var(--s2);
}

.cx-switch {
  gap: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid color-mix(in srgb, var(--good) 25%, var(--line));
  flex-direction: column;
  display: flex;
}

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

.cx-switch-link {
  color: var(--muted);
  align-self: flex-start;
}

.cx-getkey {
  align-items: flex-start;
  gap: var(--s2);
  flex-direction: column;
  display: flex;
}

.cx-getkey .cx-paste-steps {
  padding-left: var(--s5);
  list-style: decimal;
}

.cx-signin {
  gap: var(--s3);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.cx-sub-wrap {
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  display: flex;
}

.cx-sub-wrap input {
  flex: auto;
}

.cx-sub-suffix {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t2);
  white-space: nowrap;
}

.cx-shipped-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  display: flex;
}

.cx-shipped-head h4, .cx-shipped-block h5 {
  font-size: var(--t3);
  color: var(--ink);
  margin: 0;
  font-weight: 600;
}

.cx-shipped-block {
  gap: var(--s1);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.cx-shipped-block h5 {
  font-size: var(--t2);
  color: var(--ink2);
}

.cx-since {
  gap: var(--s1);
  display: flex;
}

.cx-since-btn {
  height: 28px;
  padding: 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel);
  font: inherit;
  font-size: var(--t2);
  color: var(--ink2);
  cursor: pointer;
}

.cx-since-btn[aria-pressed="true"] {
  border-color: var(--teal);
  background: var(--teal2);
  color: var(--ink);
  font-weight: 600;
}

.cx-since-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.cx-shipped-list {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.cx-shipped-list li {
  padding: var(--s2) var(--s3);
  font-size: var(--t3);
  color: var(--ink);
  overflow-wrap: anywhere;
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.cx-shipped-list li + li {
  border-top: 1px solid var(--line2);
}

.cx-shipped-list a, .cx-shipped-one a {
  color: var(--teal);
}

.cx-shipped-list small, .cx-shipped-one small {
  font-size: var(--t1);
  color: var(--muted);
}

.cx-shipped-one {
  font-size: var(--t3);
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 0;
}

.cx-docs-key {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2, 8px);
  background: var(--panel, transparent);
}

.cx-docs-key-link {
  color: var(--ink2);
  font-size: var(--t2);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
}

/* [project]/app/product-source.css [app-client] (css) */
.cx-sheet--wide {
  width: min(1120px, 100vw);
}

.ps-root {
  gap: var(--s4);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.ps-h {
  margin: var(--s3) 0 0;
  font-size: var(--t4);
  color: var(--ink);
}

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

.ps-hint {
  font-size: var(--t1);
  color: var(--muted);
  line-height: 1.4;
}

.ps-tech {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
  padding: 0 var(--s1);
  background: var(--panel3);
  border-radius: var(--r1);
  font-weight: 400;
}

.ps-conn {
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t2);
  color: var(--ink2);
  flex-wrap: wrap;
  display: flex;
}

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

.ps-connect .is-bad input {
  border-color: var(--crit);
  background: var(--crit2);
}

.ps-card {
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel2);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.ps-card-h {
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  display: flex;
}

.ps-card-h h4 {
  font-size: var(--t4);
  color: var(--ink);
  margin: 0;
}

.ps-badge {
  font-size: var(--t1);
  padding: 2px var(--s3);
  border-radius: var(--rfull);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 600;
}

.ps-badge.is-ok {
  color: var(--good);
  background: var(--good2);
  border-color: var(--good);
}

.ps-badge.is-bad {
  color: var(--crit);
  background: var(--crit2);
  border-color: var(--crit);
}

.ps-badge.is-warn {
  color: var(--warn);
  background: var(--warn2);
  border-color: var(--warn);
}

.ps-form, .ps-map {
  gap: var(--s3);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.ps-map h5, .ps-sbs h5 {
  font-size: var(--t3);
  color: var(--ink2);
  margin: 0;
}

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

.ps-set {
  padding: var(--s3);
  border: 1px solid var(--line2);
  border-radius: var(--r1);
  gap: var(--s3);
  flex-direction: column;
  min-width: 0;
  margin: 0;
  display: flex;
}

.ps-set legend {
  padding: 0 var(--s2);
  font-size: var(--t2);
  color: var(--ink2);
  font-weight: 600;
}

.ps-set select, .ps-field select, .ps-add-stream select, .ps-connect select {
  height: 36px;
  font-size: var(--t3);
  min-width: 0;
  max-width: 100%;
}

.ps-check {
  gap: var(--s3);
  font-size: var(--t2);
  color: var(--ink2);
  align-items: center;
  display: flex;
}

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

.ps-field label {
  gap: var(--s2);
  font-size: var(--t2);
  color: var(--ink2);
  flex-wrap: wrap;
  align-items: baseline;
  display: flex;
}

.ps-field input {
  width: 100%;
  height: 36px;
  font-size: var(--t3);
  min-width: 0;
}

.ps-req {
  font-size: var(--t1);
  color: var(--teal);
  font-weight: 600;
}

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

.ps-field.is-focus input, .ps-pair.is-focus input:last-of-type {
  border-color: var(--teal);
  box-shadow: var(--ring);
}

.ps-field.is-bad input, .ps-pair.is-bad input {
  border-color: var(--crit);
  background: var(--crit2);
}

.ps-problem {
  font-size: var(--t1);
  color: var(--crit);
  line-height: 1.4;
}

.ps-pairs {
  gap: var(--s2);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.ps-pairs-h {
  gap: var(--s2);
  font-size: var(--t2);
  color: var(--ink2);
  align-items: baseline;
  display: flex;
}

.ps-pair {
  gap: var(--s2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  display: grid;
}

.ps-pair input {
  height: 36px;
  font-size: var(--t3);
  min-width: 0;
}

.ps-add {
  align-self: flex-start;
}

.ps-add-stream {
  gap: var(--s3);
  padding: var(--s4);
  border: 1px dashed var(--line);
  border-radius: var(--r2);
  flex-direction: column;
  max-width: 520px;
  display: flex;
}

.ps-test {
  gap: var(--s3);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.ps-verdict {
  font-size: var(--t3);
  margin: 0;
  font-weight: 600;
}

.ps-verdict.is-ok {
  color: var(--good);
}

.ps-verdict.is-bad {
  color: var(--crit);
}

.ps-problems {
  padding-left: var(--s4);
  gap: var(--s1);
  font-size: var(--t2);
  color: var(--crit);
  flex-direction: column;
  margin: 0;
  display: flex;
}

.ps-sbs {
  gap: var(--s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.ps-pane {
  max-height: 420px;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--panel);
  min-width: 0;
  overflow: auto;
}

.ps-raw {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--t1);
  margin: 0;
}

.ps-tree, .ps-tree ul {
  padding: 0 0 0 var(--s4);
  border-left: 1px solid var(--line2);
  margin: 0;
  list-style: none;
}

.ps-tree {
  border-left: 0;
  padding-left: 0;
}

.ps-leaf {
  gap: var(--s3);
  max-width: 100%;
  padding: 1px var(--s2);
  text-align: left;
  font: inherit;
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--ink);
  border-radius: var(--r1);
  cursor: pointer;
  background: none;
  border: 0;
  align-items: baseline;
  display: inline-flex;
}

.ps-leaf:hover {
  background: var(--teal2);
}

.ps-k {
  color: var(--muted);
}

.ps-v {
  overflow-wrap: anywhere;
}

.ps-leaf.is-node .ps-v {
  color: var(--muted);
}

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

.ps-row {
  gap: var(--s1);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line2);
  font-size: var(--t2);
  flex-direction: column;
  display: flex;
}

.ps-row dl {
  flex-direction: column;
  gap: 2px;
  margin: 0;
  display: flex;
}

.ps-row dl > div {
  gap: var(--s2);
  grid-template-columns: 120px minmax(0, 1fr);
  display: grid;
}

.ps-row dt {
  color: var(--muted);
}

.ps-row dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.ps-dropped {
  color: var(--warn);
  font-size: var(--t1);
  margin: 0;
}

.ps-save {
  gap: var(--s2);
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.ps-status {
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel2);
  flex-direction: column;
  display: flex;
}

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

.ps-srows li {
  gap: var(--s2) var(--s4);
  font-size: var(--t2);
  color: var(--ink2);
  flex-wrap: wrap;
  align-items: baseline;
  display: flex;
}

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

.ps-err {
  color: var(--crit);
  flex-basis: 100%;
}

.ps-export-box {
  gap: var(--s2);
  margin-top: var(--s3);
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.ps-export-box textarea {
  width: 100%;
  font-size: var(--t1);
}

@media (max-width: 900px) {
  .ps-sbs, .ps-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ps-tablewrap {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel);
  overflow-x: auto;
}

.ps-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--t2);
}

.ps-table th, .ps-table td {
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line2);
  vertical-align: top;
}

.ps-table thead th {
  font-family: var(--mono);
  font-size: var(--t1);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--muted);
  white-space: nowrap;
  font-weight: 500;
}

.ps-table tbody th {
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 10rem;
  max-width: 16rem;
  font-weight: 500;
}

.ps-table tr:last-child > * {
  border-bottom: 0;
}

.ps-table .ps-sample {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 9rem;
  max-width: 16rem;
  color: var(--ink2);
}

.ps-table .ps-does {
  min-width: 12rem;
  max-width: 20rem;
  color: var(--ink2);
}

.ps-table td select {
  width: max-content;
  min-width: 15rem;
  max-width: none;
  height: 36px;
  font-size: var(--t3);
}

.ps-table td select + select {
  margin-top: var(--s2);
}

.ps-sr {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

/* [project]/app/task-view.css [app-client] (css) */
.ivpage {
  max-width: calc(760px + 300px + var(--s7));
  container: iv / inline-size;
}

.ivtop {
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  display: flex;
}

.ivcrumbs {
  min-width: 0;
  font-size: var(--t2);
  color: var(--muted);
}

.ivcrumbs ol {
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ivcrumbs li {
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  display: flex;
}

.ivcrumbs a {
  align-items: center;
  gap: var(--s2);
  border-radius: var(--r1);
  min-width: 0;
  color: var(--muted);
  transition: color var(--d1) var(--ease);
  text-decoration: none;
  display: inline-flex;
}

.ivcrumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.ivcrumb-a {
  min-width: 0;
}

.ivcrumb-a > span:last-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ivcrumb-s {
  color: var(--line);
}

.ivcrumb-k {
  color: var(--ink);
  white-space: nowrap;
  font-weight: 600;
}

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

.ivpos {
  margin-right: var(--s1);
  font-size: var(--t1);
  color: var(--muted);
}

.ivicon {
  border-radius: var(--r1);
  width: 32px;
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
  background: none;
  border: 0;
  place-items: center;
  padding: 0;
  display: inline-grid;
  position: relative;
}

.ivicon:hover:not(:disabled) {
  background: var(--panel3);
  color: var(--ink);
}

.ivicon:disabled {
  opacity: .35;
  cursor: default;
}

.ivcopied {
  padding: 2px var(--s2);
  border-radius: var(--r1);
  background: var(--ink);
  color: var(--panel);
  font-size: var(--t1);
  white-space: nowrap;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
}

.ivcopied:empty {
  display: none;
}

.ivbody {
  gap: var(--s7);
  padding-bottom: var(--s8);
  grid-template-columns: minmax(0, 760px) 300px;
  align-items: start;
  display: grid;
}

@container iv (max-width: 820px) {
  .ivbody {
    gap: var(--s5);
    grid-template-columns: minmax(0, 1fr);
  }
}

.ivmain {
  min-width: 0;
}

.ivtitle {
  font-size: var(--t7);
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0 0 var(--s4);
  line-height: 1.3;
}

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

.ivactions .btn {
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}

.ivstatus {
  margin-bottom: var(--s6);
  display: inline-block;
  position: relative;
}

.ivstatus-pill {
  align-items: center;
  gap: var(--s1);
  color: var(--muted);
  cursor: help;
  border-radius: var(--r1);
  display: inline-flex;
}

.ivstatus-pill .p {
  font-size: var(--t2);
  padding: .15rem .5rem;
}

.ivtip {
  z-index: 3;
  width: max-content;
  max-width: min(340px, 80cqw);
  padding: var(--s3) var(--s4);
  border-radius: var(--r2);
  background: var(--ink);
  color: var(--panel);
  font-size: var(--t2);
  box-shadow: var(--sh2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d1) var(--ease), transform var(--d1) var(--ease), visibility var(--d1);
  line-height: 1.45;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  transform: translateY(-2px);
}

.ivstatus:hover .ivtip, .ivstatus-pill:focus-visible + .ivtip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

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

.ivsec > h3 {
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  font-size: var(--t3);
  color: var(--ink);
  font-weight: 600;
  display: flex;
}

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

.ivget {
  align-items: flex-start;
  gap: var(--s3);
  flex-direction: column;
  display: flex;
}

.ivkind {
  align-items: center;
  gap: var(--s1);
  padding: 2px var(--s3) 2px var(--s2);
  border-radius: var(--rfull);
  background: var(--panel3);
  color: var(--ink2);
  font-size: var(--t1);
  font-weight: 600;
  display: inline-flex;
}

.ivquote {
  padding: var(--s3) var(--s5);
  border-left: 3px solid var(--teal3);
  background: var(--panel2);
  border-radius: 0 var(--r2) var(--r2) 0;
  margin: 0;
}

.ivquote p {
  font-family: var(--serif);
  font-size: var(--t5);
  color: var(--ink);
  margin: 0;
  font-style: italic;
  line-height: 1.55;
}

.ivquote footer {
  margin-top: var(--s2);
}

.ivquote footer .prov {
  margin: 0;
}

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

.ivprog-l {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ivprog-bar {
  border-radius: var(--rfull);
  background: var(--panel3);
  flex: 1;
  height: 6px;
  overflow: hidden;
}

.ivprog-bar > span {
  border-radius: inherit;
  background: var(--good);
  height: 100%;
  transition: width var(--d3) var(--out);
  display: block;
}

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

.tdcheck {
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel);
  font-size: var(--t3);
  flex-wrap: wrap;
  display: flex;
}

.tdcheck > .ico {
  color: var(--muted);
}

.tdcheck .btn {
  text-decoration: none;
}

.tdbox {
  border: 1.5px solid var(--line);
  width: 16px;
  height: 16px;
  color: var(--btnink);
  border-radius: 4px;
  flex: none;
  place-items: center;
  display: grid;
}

.tdcheck.is-done .tdbox {
  background: var(--good);
  border-color: var(--good);
}

.tdcheck.is-done .tdneed {
  color: var(--muted);
}

.tdneed {
  flex: 160px;
  min-width: 0;
}

.tdok {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--good);
}

.tdact {
  align-items: center;
  gap: var(--s1) var(--s3);
  padding-left: calc(16px + 14px + 2 * var(--s3));
  flex-wrap: wrap;
  flex: 100%;
  display: flex;
}

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

.ivdone {
  align-items: center;
  gap: var(--s2);
  color: var(--good);
  font-size: var(--t3);
  margin: 0;
  display: flex;
}

.ivframe {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  box-shadow: var(--sh1);
  animation: reveal var(--d3) var(--out) both;
  overflow: hidden;
}

.ivframe--empty {
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--panel2);
  box-shadow: none;
  color: var(--muted);
  border-style: dashed;
  flex-direction: column;
  animation: none;
  display: flex;
}

.ivframe--empty p {
  font-size: var(--t3);
  margin: 0;
}

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

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

.ivframe-tag {
  font-family: var(--mono);
  font-size: var(--t1);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px var(--s2);
  border-radius: var(--r1);
  background: var(--warn2);
  color: var(--warn);
}

.ivhide {
  padding: var(--s1) var(--s2);
  border-radius: var(--r1);
  font: inherit;
  font-size: var(--t2);
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  flex: none;
  margin-left: auto;
}

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

.ivframe .warnbox {
  margin: var(--s4);
}

.ivskel {
  gap: var(--s3);
  padding: var(--s5);
  flex-direction: column;
  display: flex;
}

.ivmail-h {
  gap: var(--s2) var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line2);
  font-size: var(--t3);
  grid-template-columns: 64px minmax(0, 1fr);
  margin: 0;
  display: grid;
}

.ivmail-h dt {
  color: var(--muted);
  font-size: var(--t2);
}

.ivmail-h dd {
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

.ivmail-s {
  font-weight: 600;
}

.ivmail-b {
  padding: var(--s5);
  font-size: var(--t4);
  line-height: 1.65;
}

.ivmail-b p {
  margin: 0;
}

.ivmail-b p + p {
  margin-top: var(--s3);
}

.ivline {
  padding: var(--s6) var(--s5);
  font-family: var(--serif);
  font-size: var(--t7);
  text-wrap: balance;
  margin: 0;
  line-height: 1.35;
}

.ivnote {
  padding: var(--s5);
  font-size: var(--t4);
  margin: 0;
  line-height: 1.65;
}

.ivitems {
  padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 1.25rem);
  margin: 0;
}

.ivitems li {
  font-size: var(--t4);
  padding: 2px 0;
  line-height: 1.6;
}

.ivused {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line2);
  background: var(--panel2);
}

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

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

.ivused mark {
  background: var(--warn2);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 2px;
}

.ivfeed {
  padding: 0 0 0 var(--s5);
  border-left: 1px solid var(--line);
  gap: var(--s4);
  flex-direction: column;
  margin: 0 0 0 11px;
  list-style: none;
  display: flex;
}

.ivfeed li {
  font-size: var(--t2);
  color: var(--ink2);
  align-items: center;
  min-height: 22px;
  line-height: 1.5;
  display: flex;
  position: relative;
}

.ivfeed-i {
  left: calc(-1 * var(--s5) - 12px);
  background: var(--panel);
  border: 1px solid var(--line);
  width: 22px;
  height: 22px;
  color: var(--muted);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: 0;
}

.ivside {
  top: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel2);
  align-self: start;
  position: sticky;
}

.ivside-h {
  margin: 0 0 var(--s3);
  font-size: var(--t3);
  font-weight: 600;
}

.ivside .tdmeta {
  gap: var(--s3);
  grid-template-columns: minmax(0, 124px) minmax(0, 1fr);
  align-items: baseline;
  margin: 0;
  display: grid;
}

.ivside .tdmeta dt {
  align-items: center;
  gap: var(--s2);
  font-size: var(--t2);
  color: var(--muted);
  white-space: nowrap;
  display: flex;
}

.ivside .tdmeta dd {
  min-width: 0;
  font-size: var(--t2);
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 0;
}

.ivside .tdmeta dd .hint {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--muted);
}

.ivside .tdmeta dd .prov {
  margin: 0;
}

.ivside .tdmeta dd .p {
  white-space: normal;
}

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

.ivlive, .ivdead {
  font-size: var(--t1);
  display: block;
}

.ivlive {
  color: var(--good);
}

.ivdead {
  color: var(--crit);
}

@container iv (max-width: 820px) {
  .ivside {
    position: static;
  }

  .ivside .tdmeta {
    grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  }
}

.ivmissing {
  padding: var(--s7) 0;
}

.ivmissing h2 {
  margin: 0 0 var(--s3);
  font-size: var(--t7);
}

.ivmissing p {
  margin: 0 0 var(--s5);
  max-width: 60ch;
  font-size: var(--t4);
  color: var(--muted);
  line-height: 1.6;
}

.ivmissing .btn {
  text-decoration: none;
  display: inline-flex;
}

/* [project]/app/loading.css [app-client] (css) */
.pl {
  gap: var(--s5);
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  display: flex;
}

.pl .sk {
  height: var(--h, 9px);
  flex: none;
  max-width: 100%;
  display: block;
}

.pl .sk--round {
  width: var(--h, 28px);
  border-radius: 50%;
}

.pl-lines {
  gap: var(--s3);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.pl-lines .sk {
  flex: none;
}

.pl-tabs {
  gap: var(--s6);
  border-bottom: 1px solid var(--line);
  padding: var(--s4) 0;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.pl-tools {
  gap: var(--s4);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.pl-tools .sk--field {
  flex: 12rem;
  min-width: 0;
}

.pl-progress {
  gap: var(--s3);
  flex-direction: column;
  max-width: 30rem;
  display: flex;
}

.pl-list {
  gap: var(--s3);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.pl-row {
  align-items: center;
  gap: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  min-width: 0;
  padding: var(--s4);
  background: var(--panel);
  box-shadow: var(--sh1);
  display: flex;
}

.pl-row .sk--btn {
  border-radius: var(--r2);
  width: 4.5rem;
  max-width: 25%;
  height: 24px;
  margin-left: auto;
}

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

.pl-tr {
  gap: var(--s5);
  padding: var(--s4);
  border-top: 1px solid var(--line2);
  grid-template-columns: 5rem minmax(0, 1fr) 7rem 5rem;
  align-items: center;
  display: grid;
}

.pl-tr:first-child {
  background: var(--panel2);
  border-top: 0;
}

@media (max-width: 600px) {
  .pl-tr {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .pl-tr > :nth-child(n+3) {
    display: none;
  }
}

.pl-canvas {
  justify-content: center;
  align-items: center;
  gap: var(--s7);
  min-height: 14rem;
  padding: var(--s7) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--panel);
  box-shadow: var(--sh1);
  flex-wrap: wrap;
  display: flex;
}

.pl-node {
  gap: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  width: min(10rem, 100%);
  padding: var(--s4);
  background: var(--panel2);
  flex-direction: column;
  display: flex;
}

.pl-status {
  margin-top: var(--s5);
}

.pl-status p {
  font-size: var(--t3);
  margin: 0;
  line-height: 1.5;
}

.pl-status .pl-elapsed {
  font-variant-numeric: tabular-nums;
}

.pl-status .pl-note {
  margin-top: var(--s2);
}

@media (prefers-reduced-motion: reduce) {
  .pl .sk {
    background: var(--skel);
    animation: none;
  }
}

.cx-hd .pl-status {
  margin-top: var(--s3);
}

/*# sourceMappingURL=app_0rcksbe._.css.map*/