@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/dist/styles.css

@@ -1,2318 +0,0 @@
-/*
- * @signalcore/ui: the shipped styles.
- *
- * Dropped into a page they use the page's own font, text color and color scheme; everything else
- * is a --sc-* token with a default here, so a host changes only what it wants different (in CSS,
- * or through the provider's `theme`). The tokens are listed in src/theme.ts; `density` scales
- * the room things take, `radius` the corners, `font-size` the type.
- *
- * Nothing here leaks: every rule sits in the `signalcore` layer (a host's own CSS wins without a
- * specificity fight) and under the provider's wrapper, and a wrapper marked `data-sc-unstyled`
- * (the provider's `unstyled`) is skipped, so a host that styles through `classNames` alone loses
- * none of the classes and none of this.
- *
- * Classes are BEM, one per slot (`sc-card`, `sc-card__title`, `sc-button--primary`); see
- * src/look.ts for the list.
- */
-@layer signalcore {
-  :where(.sc-ui:not([data-sc-unstyled])) {
-    /* The wrapper takes no room of its own. */
-    display: contents;
-
-    /*
-     * Working copies of the tokens: the host's, else the default. Colors that are not set derive
-     * from the page's text color (tints of `currentColor`), so any page, light or dark, gets
-     * readable lines and muted text without saying anything.
-     */
-    --_fs: var(--sc-font-size, 14px);
-    --_fs-xs: calc(var(--_fs) * 12 / 14);
-    --_fs-ui: calc(var(--_fs) * 13 / 14);
-    --_fs-md: calc(var(--_fs) * 15 / 14);
-    --_density: var(--sc-density, 1);
-    --_s2: calc(2px * var(--_density));
-    --_s4: calc(4px * var(--_density));
-    --_s6: calc(6px * var(--_density));
-    --_s8: calc(8px * var(--_density));
-    --_s10: calc(10px * var(--_density));
-    --_s12: calc(12px * var(--_density));
-    --_s14: calc(14px * var(--_density));
-    --_s16: calc(16px * var(--_density));
-    --_s20: calc(20px * var(--_density));
-    --_radius: var(--sc-radius, 12px);
-    --_radius-md: calc(var(--_radius) * 2 / 3);
-    --_radius-sm: calc(var(--_radius) / 2);
-    --_mono: var(
-      --sc-font-mono,
-      ui-monospace,
-      "SF Mono",
-      "Cascadia Mono",
-      "Roboto Mono",
-      Menlo,
-      monospace
-    );
-
-    --_text: var(--sc-text, currentColor);
-    --_muted: var(--sc-muted, color-mix(in srgb, currentColor 68%, transparent));
-    --_subtle: var(--sc-subtle, color-mix(in srgb, currentColor 52%, transparent));
-    --_surface: var(--sc-surface, var(--sc-bg, transparent));
-    --_sunken: var(--sc-sunken, color-mix(in srgb, currentColor 5%, transparent));
-    --_line: var(--sc-line, color-mix(in srgb, currentColor 13%, transparent));
-    --_line-strong: var(--sc-line-strong, color-mix(in srgb, currentColor 24%, transparent));
-    --_accent: var(
-      --sc-accent,
-      light-dark(color-mix(in oklch, #9932cc 86%, black), color-mix(in oklch, #9932cc 62%, white))
-    );
-    --_accent-fg: var(--sc-accent-fg, light-dark(#ffffff, #120c24));
-    --_accent-soft: var(--sc-accent-soft, color-mix(in srgb, var(--_accent) 12%, transparent));
-    --_signal: var(
-      --sc-signal,
-      light-dark(color-mix(in oklch, #ff8c00 80%, black), color-mix(in oklch, #ff8c00 82%, white))
-    );
-    --_signal-soft: var(--sc-signal-soft, color-mix(in srgb, var(--_signal) 14%, transparent));
-    --_ok: var(--sc-ok, light-dark(#1f7a4d, #5dbb88));
-    --_ok-soft: var(--sc-ok-soft, color-mix(in srgb, var(--_ok) 14%, transparent));
-    --_danger: var(--sc-danger, light-dark(#c0392b, #ef7a6a));
-    --_danger-soft: var(--sc-danger-soft, color-mix(in srgb, var(--_danger) 13%, transparent));
-    --_focus: var(--sc-focus, color-mix(in srgb, var(--_accent) 40%, transparent));
-    --_face: var(--sc-face, var(--_surface));
-    --_face-hover: var(--sc-face-hover, var(--_sunken));
-    /* A button has a little body: a lit upper edge, and a shadow that closes the lower one. */
-    --_shadow-button:
-      inset 0 1px 0 light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.06)),
-      0 1px 1px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.3));
-    --_shadow-button-primary: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 1px rgb(0 0 0 / 0.08);
-    --_shadow-raised: 0 1px 2px rgb(0 0 0 / 0.04);
-    --_shadow-float: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);
-    --_ease: cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  /*
-   * The three things the package draws on a page. The font and the color are the page's own
-   * (`inherit`), the size is the reading size, and the color scheme follows the reader's
-   * preference, unless an ancestor says otherwise (see below). Zero specificity: a host's rule on
-   * any of them wins.
-   */
-  :where(.sc-ui:not([data-sc-unstyled]))
-    :where(
-      .sc-surface,
-      .sc-request,
-      .sc-browser,
-      .sc-live,
-      .sc-chat,
-      .sc-voice,
-      .sc-composer,
-      .sc-transcript,
-      .sc-status-line,
-      .sc-automations,
-      .sc-automation,
-      .sc-flow,
-      .sc-window,
-      .sc-space
-    ) {
-    color-scheme: light dark;
-    color: inherit;
-    font-family: var(--sc-font, inherit);
-    font-size: var(--_fs);
-    line-height: 1.55;
-  }
-
-  /*
-   * A `data-theme` of "light" or "dark" on <html>, on the provider, or on anything between it and
-   * what we draw, decides the scheme; of those, the one written last here wins a disagreement.
-   */
-  :where(
-      [data-theme="light"] .sc-ui:not([data-sc-unstyled]),
-      .sc-ui:not([data-sc-unstyled])[data-theme="light"],
-      .sc-ui:not([data-sc-unstyled]) [data-theme="light"]
-    )
-    :is(
-      .sc-surface,
-      .sc-request,
-      .sc-browser,
-      .sc-live,
-      .sc-chat,
-      .sc-voice,
-      .sc-composer,
-      .sc-transcript,
-      .sc-status-line,
-      .sc-automations,
-      .sc-automation,
-      .sc-flow,
-      .sc-window,
-      .sc-space
-    ),
-  :where(.sc-ui:not([data-sc-unstyled]))
-    :is(
-      .sc-surface,
-      .sc-request,
-      .sc-browser,
-      .sc-live,
-      .sc-chat,
-      .sc-voice,
-      .sc-composer,
-      .sc-transcript,
-      .sc-status-line,
-      .sc-automations,
-      .sc-automation,
-      .sc-flow,
-      .sc-window,
-      .sc-space
-    )[data-theme="light"] {
-    color-scheme: light;
-  }
-
-  :where(
-      [data-theme="dark"] .sc-ui:not([data-sc-unstyled]),
-      .sc-ui:not([data-sc-unstyled])[data-theme="dark"],
-      .sc-ui:not([data-sc-unstyled]) [data-theme="dark"]
-    )
-    :is(
-      .sc-surface,
-      .sc-request,
-      .sc-browser,
-      .sc-live,
-      .sc-chat,
-      .sc-voice,
-      .sc-composer,
-      .sc-transcript,
-      .sc-status-line,
-      .sc-automations,
-      .sc-automation,
-      .sc-flow,
-      .sc-window,
-      .sc-space
-    ),
-  :where(.sc-ui:not([data-sc-unstyled]))
-    :is(
-      .sc-surface,
-      .sc-request,
-      .sc-browser,
-      .sc-live,
-      .sc-chat,
-      .sc-voice,
-      .sc-composer,
-      .sc-transcript,
-      .sc-status-line,
-      .sc-automations,
-      .sc-automation,
-      .sc-flow,
-      .sc-window,
-      .sc-space
-    )[data-theme="dark"] {
-    color-scheme: dark;
-  }
-
-  /* A small reset, scoped to what we draw and weaker than any class a host adds to it. */
-  :where(.sc-ui:not([data-sc-unstyled]))
-    :where(
-      .sc-surface,
-      .sc-request,
-      .sc-browser,
-      .sc-live,
-      .sc-chat,
-      .sc-voice,
-      .sc-composer,
-      .sc-transcript,
-      .sc-status-line,
-      .sc-automations,
-      .sc-automation,
-      .sc-flow,
-      .sc-window,
-      .sc-space
-    ) {
-    :where(*, *::before, *::after) {
-      box-sizing: border-box;
-    }
-    :where(h3, p, dl, dd, figure, ol, ul, pre) {
-      margin: 0;
-    }
-    :where(ol, ul) {
-      padding: 0;
-      list-style: none;
-    }
-    :where(table) {
-      border-collapse: collapse;
-    }
-    :where(img) {
-      display: block;
-      max-width: 100%;
-    }
-    :where(button, input, select, textarea) {
-      font: inherit;
-      color: inherit;
-    }
-    :where(button) {
-      padding: 0;
-      border: 0;
-      background: none;
-      cursor: pointer;
-    }
-    :where(:focus-visible) {
-      outline: 2px solid var(--_focus);
-      outline-offset: 2px;
-    }
-  }
-
-  :where(.sc-ui:not([data-sc-unstyled])) {
-    /* --- A surface ------------------------------------------------------------------------ */
-
-    .sc-surface {
-      width: 100%;
-    }
-    .sc-surface--text {
-      white-space: pre-wrap;
-      color: var(--_muted);
-    }
-
-    .sc-column {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s8);
-    }
-    .sc-row {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--_s8);
-    }
-
-    .sc-card {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s10);
-      padding: var(--_s14);
-      border: 1px solid var(--_line);
-      border-radius: var(--_radius);
-      background: var(--_surface);
-    }
-    /* The pattern `card: "raised"`: the card lifts a hair off the page. */
-    .sc-card--raised {
-      box-shadow: var(--_shadow-raised);
-    }
-    .sc-card__title {
-      font-size: var(--_fs);
-      font-weight: 500;
-    }
-    .sc-card__subtitle {
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-
-    .sc-text {
-      line-height: 1.625;
-    }
-    .sc-text--heading {
-      font-size: var(--_fs-md);
-      font-weight: 500;
-      line-height: 1.5;
-    }
-    .sc-text--caption {
-      font-size: var(--_fs-xs);
-      line-height: 1.5;
-      color: var(--_subtle);
-    }
-
-    .sc-callout {
-      padding: var(--_s8) var(--_s12);
-      border-radius: var(--_radius-md);
-      font-size: var(--_fs-ui);
-      line-height: 1.5;
-    }
-    .sc-callout--info {
-      background: var(--_accent-soft);
-    }
-    .sc-callout--success {
-      background: var(--_ok-soft);
-    }
-    .sc-callout--warning {
-      background: var(--_signal-soft);
-    }
-    .sc-callout--error {
-      background: var(--_danger-soft);
-    }
-
-    .sc-image {
-      max-height: 16rem;
-      border-radius: var(--_radius-md);
-      object-fit: cover;
-    }
-    .sc-link {
-      font-size: var(--_fs-ui);
-      color: var(--_accent);
-      text-decoration: none;
-      text-underline-offset: 2px;
-    }
-    .sc-link:hover {
-      text-decoration: underline;
-    }
-
-    .sc-pairs {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: var(--_s4) var(--_s16);
-      font-size: var(--_fs-ui);
-      line-height: 1.5;
-    }
-    .sc-pairs__row {
-      display: contents;
-    }
-    .sc-pairs__label {
-      color: var(--_subtle);
-    }
-    .sc-pairs__value {
-      font-weight: 500;
-      text-align: right;
-    }
-
-    .sc-table-wrap {
-      overflow-x: auto;
-    }
-    .sc-table {
-      width: 100%;
-      font-size: var(--_fs-ui);
-      line-height: 1.5;
-      text-align: left;
-    }
-    .sc-table__row {
-      border-bottom: 1px solid color-mix(in srgb, var(--_line) 60%, transparent);
-    }
-    .sc-table tbody .sc-table__row:last-child {
-      border-bottom: 0;
-    }
-    .sc-table__row--head {
-      border-bottom-color: var(--_line);
-      color: var(--_subtle);
-    }
-    .sc-table__head,
-    .sc-table__cell {
-      padding: var(--_s6) var(--_s12) var(--_s6) 0;
-    }
-    .sc-table__head {
-      font-weight: 400;
-      text-align: left;
-    }
-    /* The pattern `table: "compact"`: rows close together, for a lot of records. */
-    .sc-table--compact {
-      font-size: var(--_fs-xs);
-    }
-    .sc-table--compact .sc-table__head,
-    .sc-table--compact .sc-table__cell {
-      padding-block: var(--_s2);
-    }
-
-    .sc-chart {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s6);
-    }
-    .sc-chart__title {
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-    .sc-chart__row {
-      display: grid;
-      grid-template-columns: 6rem 1fr auto;
-      align-items: center;
-      gap: var(--_s8);
-      font-size: var(--_fs-xs);
-    }
-    .sc-chart__label {
-      overflow: hidden;
-      color: var(--_subtle);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .sc-chart__bar {
-      height: calc(8px * var(--_density));
-      border-radius: 9999px;
-      background: var(--_accent);
-    }
-    .sc-chart__value {
-      font-family: var(--_mono);
-    }
-
-    .sc-choices {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s6);
-    }
-    .sc-choice {
-      padding: var(--_s8) var(--_s12);
-      border: 1px solid var(--_line-strong);
-      border-radius: var(--_radius-md);
-      background: var(--_surface);
-      font-size: var(--_fs-ui);
-      line-height: 1.5;
-      text-align: left;
-    }
-    .sc-choice:hover {
-      background: var(--_sunken);
-    }
-    .sc-choice:disabled {
-      cursor: default;
-      opacity: 0.6;
-    }
-    .sc-choice__label {
-      font-weight: 500;
-    }
-    .sc-choice__description {
-      display: block;
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-
-    .sc-slots {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--_s6);
-    }
-
-    .sc-form {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s10);
-    }
-    /* The pattern `actions: "footer"`: the button is set apart below the fields, on a line. */
-    .sc-form__actions--footer {
-      display: flex;
-      justify-content: flex-end;
-      padding-top: var(--_s10);
-      border-top: 1px solid var(--_line);
-    }
-    .sc-field {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s4);
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-    .sc-input,
-    .sc-select {
-      width: 100%;
-      height: calc(36px * var(--_density));
-      padding: 0 var(--_s12);
-      border: 1px solid var(--_line-strong);
-      border-radius: var(--_radius-md);
-      background: var(--_surface);
-      box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.02);
-      font-size: var(--_fs-ui);
-      line-height: 1.5;
-      color: var(--_text);
-      transition:
-        border-color 0.15s,
-        box-shadow 0.15s;
-    }
-    .sc-select {
-      padding: 0 var(--_s8);
-    }
-    .sc-input::placeholder {
-      color: var(--_subtle);
-    }
-    .sc-input:hover,
-    .sc-select:hover {
-      border-color: color-mix(in srgb, var(--_subtle) 60%, transparent);
-    }
-    .sc-input:focus,
-    .sc-select:focus {
-      border-color: var(--_accent);
-      box-shadow:
-        inset 0 1px 0 rgb(0 0 0 / 0.02),
-        0 0 0 2px var(--_focus);
-      outline: none;
-    }
-    .sc-input:disabled,
-    .sc-select:disabled {
-      opacity: 0.6;
-    }
-    .sc-checkbox {
-      align-self: flex-start;
-      width: 16px;
-      height: 16px;
-      accent-color: var(--_accent);
-    }
-
-    /* --- Buttons and small parts -------------------------------------------------------------- */
-
-    .sc-button {
-      display: inline-flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      font-size: var(--_fs-ui);
-      font-weight: 500;
-      line-height: 1.5;
-      letter-spacing: -0.01em;
-      white-space: nowrap;
-      user-select: none;
-      transition:
-        background-color 0.15s,
-        opacity 0.15s,
-        transform 0.15s;
-    }
-    .sc-button:active:not(:disabled) {
-      transform: scale(0.985);
-    }
-    .sc-button:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-    .sc-button--sm {
-      height: calc(28px * var(--_density));
-      gap: var(--_s6);
-      padding: 0 var(--_s12);
-      border-radius: var(--_radius-sm);
-    }
-    .sc-button--md {
-      height: calc(36px * var(--_density));
-      gap: var(--_s8);
-      padding: 0 var(--_s16);
-      border-radius: var(--_radius-md);
-    }
-    .sc-button--primary {
-      background: var(--_accent);
-      box-shadow: var(--_shadow-button-primary);
-      color: var(--_accent-fg);
-    }
-    .sc-button--primary:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--_accent) 92%, transparent);
-    }
-    .sc-button--secondary {
-      border: 1px solid var(--_line-strong);
-      background: var(--_face);
-      box-shadow: var(--_shadow-button);
-    }
-    .sc-button--secondary:hover:not(:disabled) {
-      background: var(--_face-hover);
-    }
-    .sc-button--ghost {
-      color: var(--_muted);
-    }
-    .sc-button--ghost:hover:not(:disabled) {
-      background: var(--_sunken);
-      color: var(--_text);
-    }
-
-    .sc-icon-button {
-      display: inline-flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      width: calc(32px * var(--_density));
-      height: calc(32px * var(--_density));
-      border-radius: var(--_radius-md);
-      color: var(--_muted);
-      transition:
-        background-color 0.15s,
-        color 0.15s;
-    }
-    .sc-icon-button:hover:not(:disabled) {
-      background: var(--_sunken);
-      color: var(--_text);
-    }
-    .sc-icon-button:disabled {
-      opacity: 0.4;
-    }
-    /* On a phone the small tile already fills the screen: there is nothing to enlarge. */
-    @media (max-width: 639px) {
-      .sc-icon-button--enlarge {
-        display: none;
-      }
-    }
-
-    .sc-icon,
-    .sc-request__icon,
-    .sc-drop__icon {
-      flex-shrink: 0;
-      width: 16px;
-      height: 16px;
-    }
-    .sc-spinner {
-      flex-shrink: 0;
-      width: 14px;
-      height: 14px;
-      animation: sc-spin 0.8s linear infinite;
-    }
-    .sc-sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      margin: -1px;
-      padding: 0;
-      overflow: hidden;
-      border: 0;
-      clip-path: inset(50%);
-      white-space: nowrap;
-    }
-    .sc-error {
-      font-size: var(--_fs-xs);
-      color: var(--_danger);
-    }
-
-    /* --- The browser the agent drives --------------------------------------------------------- */
-
-    .sc-browser {
-      width: 100%;
-      max-width: 26.25rem;
-      overflow: hidden;
-      border: 1px solid var(--_line);
-      border-radius: var(--_radius);
-      background: var(--_surface);
-      transition: max-width 0.5s var(--_ease);
-    }
-    /* As big as the window allows while keeping the page's 4:3 shape: 86% of its height for the
-       whole tile, the header and caption (8.5rem) included, and never smaller than the small one. */
-    .sc-browser--large {
-      max-width: max(26.25rem, calc((86vh - 8.5rem) * 4 / 3));
-    }
-    .sc-browser--spacious {
-      margin-inline: auto;
-      box-shadow: var(--_shadow-float);
-    }
-    .sc-browser__header {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s6);
-      padding: var(--_s8) var(--_s12);
-      border-bottom: 1px solid var(--_line);
-    }
-    .sc-browser__driver {
-      display: flex;
-      min-width: 0;
-      align-items: center;
-      gap: var(--_s8);
-    }
-    .sc-browser__dot {
-      flex-shrink: 0;
-      width: 8px;
-      height: 8px;
-      border-radius: 9999px;
-    }
-    .sc-browser__dot--agent {
-      background: var(--_signal);
-    }
-    .sc-browser__dot--owner {
-      background: var(--_accent);
-    }
-    .sc-browser__dot--live {
-      animation: sc-pulse 1.4s ease-in-out infinite;
-    }
-    .sc-browser__who {
-      min-width: 0;
-      overflow: hidden;
-      font-size: var(--_fs-xs);
-      font-weight: 500;
-      color: var(--_muted);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .sc-browser__controls {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      gap: var(--_s4);
-      margin-left: auto;
-    }
-    .sc-browser__site {
-      overflow: hidden;
-      padding: var(--_s4) var(--_s8);
-      border-radius: var(--_radius-sm);
-      background: var(--_sunken);
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .sc-browser__site-name {
-      font-weight: 500;
-      color: var(--_text);
-    }
-    .sc-browser__screen {
-      position: relative;
-      width: 100%;
-      aspect-ratio: 4 / 3;
-      background: var(--_sunken);
-    }
-    .sc-browser__frame {
-      width: 100%;
-      height: 100%;
-      border: 0;
-    }
-    .sc-browser__shot {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-    /* Only watched: the cover keeps the pointer out of the live view. */
-    .sc-browser__cover {
-      position: absolute;
-      inset: 0;
-    }
-    .sc-browser__caption {
-      display: flex;
-      min-height: calc(56px * var(--_density));
-      align-items: center;
-      gap: var(--_s8);
-      padding: var(--_s8) var(--_s12);
-      border-top: 1px solid var(--_line);
-      font-size: var(--_fs-ui);
-      line-height: 1.5;
-    }
-    .sc-browser__step {
-      flex-shrink: 0;
-      width: 16px;
-      color: var(--_subtle);
-      font-variant-numeric: tabular-nums;
-    }
-    .sc-browser__line {
-      display: -webkit-box;
-      min-width: 0;
-      overflow: hidden;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      animation: sc-fade-in 0.16s var(--_ease);
-    }
-    .sc-browser__ended {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-      padding: var(--_s16) calc(24px * var(--_density));
-      text-align: center;
-    }
-    .sc-browser__ended > div {
-      margin: auto;
-    }
-    .sc-browser__ended-title {
-      font-size: var(--_fs-ui);
-      font-weight: 500;
-    }
-    .sc-browser__ended-summary {
-      margin-top: var(--_s4);
-      font-size: var(--_fs-ui);
-      line-height: 1.625;
-      color: var(--_muted);
-    }
-
-    /* --- A live stream ------------------------------------------------------------------------ */
-
-    .sc-live {
-      position: relative;
-      width: 100%;
-      overflow: hidden;
-      border-radius: var(--_radius-md);
-      background: var(--_sunken);
-    }
-    /* Sized by the stream's own shape (the canvas has its width and height), whatever the room. */
-    .sc-live__canvas {
-      display: block;
-      width: 100%;
-      height: auto;
-      transition: opacity 0.3s var(--_ease);
-    }
-    .sc-live--input .sc-live__canvas {
-      cursor: crosshair;
-    }
-    .sc-live--input .sc-live__canvas:focus-visible {
-      outline-offset: -2px;
-    }
-    .sc-live--ended .sc-live__canvas,
-    .sc-live--unavailable .sc-live__canvas {
-      opacity: 0.5;
-    }
-    /* A word over a picture: its own dark ground, so it reads on whatever the stream shows. */
-    .sc-live__status {
-      position: absolute;
-      bottom: var(--_s8);
-      left: var(--_s8);
-      display: flex;
-      align-items: center;
-      gap: var(--_s6);
-      padding: var(--_s2) var(--_s8);
-      border-radius: 9999px;
-      background: rgb(0 0 0 / 0.6);
-      color: rgb(255 255 255 / 0.9);
-      font-size: var(--_fs-xs);
-      line-height: 1.5;
-      pointer-events: none;
-    }
-    .sc-live__dot {
-      flex-shrink: 0;
-      width: 6px;
-      height: 6px;
-      border-radius: 9999px;
-      background: rgb(255 255 255 / 0.55);
-    }
-    .sc-live--live .sc-live__dot {
-      background: var(--_ok);
-      animation: sc-pulse 1.4s ease-in-out infinite;
-    }
-    .sc-live--connecting .sc-live__dot,
-    .sc-live--reconnecting .sc-live__dot {
-      background: var(--_signal);
-      animation: sc-pulse 1.1s ease-in-out infinite;
-    }
-    /* In the browser's tile the stream sits in the page's 4:3 window, centred if its shape differs. */
-    .sc-browser__screen > .sc-live {
-      display: grid;
-      height: 100%;
-      place-items: center;
-      border-radius: 0;
-    }
-
-    /* --- Requests: what the agent needs from the owner ------------------------------------------ */
-
-    .sc-request {
-      max-width: 35rem;
-      container-type: inline-size;
-      border: 1px solid var(--_line);
-      border-radius: var(--_radius);
-      background: var(--_surface);
-      box-shadow: var(--_shadow-raised);
-      transition: max-width 0.5s var(--_ease);
-      animation: sc-rise 0.25s var(--_ease);
-    }
-    .sc-request--wide {
-      max-width: 100%;
-    }
-    .sc-request__heading {
-      display: flex;
-      align-items: center;
-      gap: var(--_s8);
-      padding: var(--_s8) var(--_s16);
-      border-bottom: 1px solid var(--_line);
-      font-size: var(--_fs-xs);
-      font-weight: 500;
-      color: var(--_muted);
-    }
-    .sc-request__icon {
-      color: var(--_accent);
-    }
-    .sc-request__body {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s12);
-      padding: var(--_s14) var(--_s16);
-    }
-    .sc-request__title {
-      font-size: var(--_fs);
-      font-weight: 500;
-      line-height: 1.375;
-    }
-    .sc-request__details {
-      font-size: var(--_fs-ui);
-      line-height: 1.625;
-      color: var(--_muted);
-    }
-    .sc-request__done {
-      display: flex;
-      align-items: center;
-      gap: var(--_s6);
-      font-size: var(--_fs-ui);
-      color: var(--_ok);
-    }
-    .sc-request__check {
-      width: 14px;
-      height: 14px;
-    }
-    .sc-request__actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--_s8);
-    }
-    .sc-request__actions--center {
-      align-items: center;
-    }
-    .sc-request__form {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s8);
-    }
-    .sc-request__hint {
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-    .sc-request__name {
-      font-family: var(--_mono);
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-
-    .sc-approval {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s8);
-    }
-    .sc-calls {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s4);
-      font-size: var(--_fs-ui);
-    }
-    .sc-calls__item {
-      display: flex;
-      min-width: 0;
-      gap: var(--_s8);
-    }
-    .sc-calls__label {
-      flex-shrink: 0;
-      font-weight: 500;
-    }
-    .sc-calls__summary {
-      min-width: 0;
-      overflow-wrap: break-word;
-      color: var(--_muted);
-    }
-    .sc-preview-pairs {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: var(--_s4) var(--_s12);
-      font-size: var(--_fs-ui);
-    }
-    .sc-preview-pairs__row {
-      display: contents;
-    }
-    .sc-preview-pairs__label {
-      color: var(--_subtle);
-    }
-    .sc-preview-pairs__value {
-      min-width: 0;
-      overflow-wrap: break-word;
-    }
-    .sc-preview-table {
-      overflow-x: auto;
-      border: 1px solid var(--_line);
-      border-radius: var(--_radius-md);
-    }
-    .sc-preview-table__table {
-      width: 100%;
-      font-size: var(--_fs-ui);
-    }
-    .sc-preview-table__table tr {
-      border-bottom: 1px solid var(--_line);
-    }
-    .sc-preview-table__table tbody tr:last-child {
-      border-bottom: 0;
-    }
-    .sc-preview-table__head,
-    .sc-preview-table__cell {
-      padding: var(--_s6) calc(10px * var(--_density));
-      text-align: left;
-    }
-    .sc-preview-table__head {
-      font-weight: 500;
-      color: var(--_subtle);
-    }
-    .sc-preview-table__cell {
-      font-variant-numeric: tabular-nums;
-    }
-    .sc-preview-table__more {
-      padding: var(--_s6) calc(10px * var(--_density));
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-    .sc-preview-json {
-      overflow-x: auto;
-      padding: var(--_s8) var(--_s12);
-      border-radius: var(--_radius-md);
-      background: var(--_sunken);
-      font-family: var(--_mono);
-      font-size: var(--_fs-xs);
-    }
-
-    /* A hand-over: the browser, and what to do in it, side by side once the card is wide enough. */
-    .sc-handover {
-      display: grid;
-      gap: var(--_s12);
-    }
-    @container (min-width: 48rem) {
-      .sc-handover--steps {
-        grid-template-columns: minmax(0, 1fr) 18rem;
-        gap: var(--_s20);
-      }
-    }
-    .sc-handover__side {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s12);
-    }
-    .sc-steps {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s10);
-    }
-    .sc-steps__item {
-      display: flex;
-      align-items: flex-start;
-      gap: var(--_s10);
-      font-size: var(--_fs-ui);
-      line-height: 1.375;
-    }
-    .sc-steps__number {
-      display: grid;
-      flex-shrink: 0;
-      place-items: center;
-      width: 24px;
-      height: 24px;
-      border-radius: 9999px;
-      background: var(--_accent);
-      font-size: var(--_fs-xs);
-      font-weight: 500;
-      color: var(--_accent-fg);
-      font-variant-numeric: tabular-nums;
-    }
-    .sc-steps__text {
-      padding-top: var(--_s2);
-    }
-
-    .sc-drop {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--_s4);
-      padding: var(--_s16) var(--_s12);
-      border: 1px dashed var(--_line-strong);
-      border-radius: var(--_radius);
-      font-size: var(--_fs-ui);
-      color: var(--_muted);
-      text-align: center;
-      cursor: pointer;
-      transition: border-color 0.15s;
-    }
-    .sc-drop:hover {
-      border-color: color-mix(in srgb, var(--_text) 30%, transparent);
-    }
-    .sc-drop--busy {
-      opacity: 0.6;
-      pointer-events: none;
-    }
-    .sc-drop__icon {
-      color: var(--_subtle);
-    }
-
-    .sc-app-button {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--_s10);
-      height: calc(36px * var(--_density));
-      padding: 0 var(--_s12);
-      border-radius: var(--_radius);
-      background: var(--_surface);
-      box-shadow:
-        var(--_shadow-button),
-        0 0 0 1px var(--_line);
-      font-size: var(--_fs-ui);
-      font-weight: 500;
-      line-height: 1.5;
-      letter-spacing: -0.01em;
-      white-space: nowrap;
-      user-select: none;
-      transition:
-        background-color 0.15s,
-        transform 0.15s;
-    }
-    .sc-app-button:hover:not(:disabled) {
-      background: var(--_sunken);
-    }
-    .sc-app-button:active:not(:disabled) {
-      transform: scale(0.985);
-    }
-    .sc-app-button:disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-    .sc-app-button__logo {
-      position: relative;
-      display: grid;
-      flex-shrink: 0;
-      place-items: center;
-    }
-    .sc-app-button__ping {
-      position: absolute;
-      top: -2px;
-      right: -2px;
-      width: 10px;
-      height: 10px;
-      border-radius: 9999px;
-      background: var(--_ok);
-      box-shadow: 0 0 0 2px var(--_surface);
-      animation: sc-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
-    }
-    .sc-app-logo {
-      display: grid;
-      flex-shrink: 0;
-      place-items: center;
-      overflow: hidden;
-      border-radius: 28%;
-      background: var(--_sunken);
-      font-weight: 600;
-      color: var(--_muted);
-    }
-    .sc-app-logo:has(img) {
-      background: #ffffff;
-    }
-    .sc-app-logo img {
-      width: 72%;
-      height: 72%;
-      object-fit: contain;
-    }
-
-    /* --- The chat: messages, and the box to write in --------------------------------------- */
-
-    .sc-chat {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      min-height: 0;
-    }
-    .sc-chat__scroll {
-      flex: 1;
-      min-height: 0;
-      overflow-y: auto;
-      overscroll-behavior: contain;
-    }
-    .sc-chat__content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s8);
-      padding: var(--_s16) var(--_s16) var(--_s12);
-    }
-    .sc-chat__note,
-    .sc-chat__status {
-      display: flex;
-      align-items: center;
-      gap: var(--_s8);
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-    .sc-chat__status:empty {
-      display: none;
-    }
-    .sc-messages {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s10);
-    }
-    /* The time a stretch of the conversation began: quiet, in the middle. */
-    .sc-moment {
-      align-self: center;
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-      font-variant-numeric: tabular-nums;
-    }
-    .sc-message {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s8);
-      max-width: 88%;
-      animation: sc-rise 0.2s var(--_ease);
-    }
-    /* The same side again: close to the message before it. */
-    .sc-message--joined {
-      margin-top: calc(var(--_s2) - var(--_s10));
-    }
-    .sc-message--person {
-      align-self: flex-end;
-      align-items: flex-end;
-    }
-    .sc-message--agent {
-      align-self: flex-start;
-      align-items: flex-start;
-    }
-    /* What the agent drew needs the room: it takes the whole line. */
-    .sc-message--agent:has(.sc-message__surface) {
-      align-self: stretch;
-      max-width: 100%;
-    }
-    .sc-message__text {
-      padding: var(--_s8) var(--_s12);
-      border-radius: var(--_radius);
-      line-height: 1.5;
-      overflow-wrap: anywhere;
-      white-space: pre-wrap;
-    }
-    .sc-message--person .sc-message__text {
-      border-bottom-right-radius: var(--_radius-sm);
-      background: var(--_accent);
-      color: var(--_accent-fg);
-    }
-    .sc-message--agent .sc-message__text {
-      border-bottom-left-radius: var(--_radius-sm);
-      background: var(--_sunken);
-    }
-    .sc-message__surface {
-      width: 100%;
-    }
-    /* Where a surface went, when the agent placed it in a window of the shell instead. */
-    .sc-message__window {
-      font-size: var(--_fs-ui);
-      line-height: 1.5;
-      color: var(--_muted);
-    }
-    .sc-message__open {
-      font-weight: 500;
-      color: var(--_accent);
-      text-underline-offset: 2px;
-    }
-    .sc-message__open:hover {
-      text-decoration: underline;
-    }
-
-    .sc-composer {
-      flex-shrink: 0;
-      padding: var(--_s8) var(--_s12) var(--_s12);
-    }
-    .sc-composer__context {
-      margin-bottom: var(--_s6);
-    }
-    .sc-composer__box {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s4);
-      padding: var(--_s8) var(--_s8) var(--_s8) var(--_s12);
-      border: 1px solid var(--_line-strong);
-      border-radius: var(--_radius);
-      background: var(--_surface);
-      box-shadow: var(--_shadow-raised);
-      cursor: text;
-      transition:
-        border-color 0.15s,
-        box-shadow 0.15s;
-    }
-    .sc-composer__box:focus-within {
-      border-color: var(--_accent);
-      box-shadow:
-        var(--_shadow-raised),
-        0 0 0 2px var(--_focus);
-    }
-    .sc-composer__input {
-      width: 100%;
-      min-height: calc(24px * var(--_density));
-      max-height: 200px;
-      padding: 0;
-      border: 0;
-      background: transparent;
-      line-height: 1.5;
-      color: var(--_text);
-      resize: none;
-    }
-    .sc-composer__input::placeholder {
-      color: var(--_subtle);
-    }
-    .sc-composer__input:focus {
-      outline: none;
-    }
-    .sc-composer__bar {
-      display: flex;
-      align-items: center;
-      gap: var(--_s4);
-    }
-    .sc-composer__tools {
-      display: flex;
-      min-width: 0;
-      flex: 1;
-      align-items: center;
-      gap: var(--_s2);
-    }
-    .sc-composer__send {
-      display: grid;
-      flex-shrink: 0;
-      place-items: center;
-      width: calc(28px * var(--_density));
-      height: calc(28px * var(--_density));
-      border-radius: 9999px;
-      background: var(--_accent);
-      color: var(--_accent-fg);
-      transition:
-        background-color 0.15s,
-        opacity 0.15s;
-    }
-    .sc-composer__send:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--_accent) 92%, transparent);
-    }
-    .sc-composer__send:disabled {
-      background: var(--_sunken);
-      color: var(--_subtle);
-      cursor: not-allowed;
-    }
-
-    /* --- The chat with the builder: what it says, does and changed --------------------------- */
-
-    .sc-chat__note--invitation {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--_s6);
-      padding-block: var(--_s20) var(--_s8);
-      font-size: var(--_fs-ui);
-      line-height: 1.5;
-      color: var(--_muted);
-    }
-    .sc-chat__note--invitation strong {
-      font-size: var(--_fs-md);
-      font-weight: 600;
-      color: var(--_text);
-    }
-
-    .sc-transcript {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s16);
-    }
-    .sc-reply {
-      line-height: 1.625;
-      overflow-wrap: anywhere;
-      white-space: pre-wrap;
-    }
-    .sc-reply__cursor {
-      display: inline-block;
-      width: 2px;
-      height: 1.05em;
-      margin-left: 2px;
-      vertical-align: -0.15em;
-      background: var(--_signal);
-      animation: sc-pulse 1.1s ease-in-out infinite;
-    }
-
-    .sc-activity {
-      display: flex;
-      flex-direction: column;
-    }
-    .sc-activity__toggle {
-      display: flex;
-      width: 100%;
-      min-width: 0;
-      align-items: center;
-      gap: var(--_s10);
-      padding: var(--_s4) 0;
-      border-radius: var(--_radius-sm);
-      font-size: var(--_fs-ui);
-      text-align: left;
-    }
-    .sc-activity__toggle:is(button) {
-      cursor: pointer;
-    }
-    .sc-activity__toggle:is(button):hover {
-      background: var(--_sunken);
-    }
-    .sc-activity__mark {
-      display: grid;
-      flex-shrink: 0;
-      place-items: center;
-      width: 20px;
-      height: 20px;
-      color: var(--_subtle);
-    }
-    .sc-activity__mark--running {
-      color: var(--_signal);
-    }
-    .sc-activity__mark--error {
-      color: var(--_danger);
-    }
-    .sc-activity__verb {
-      flex-shrink: 0;
-      font-weight: 500;
-    }
-    .sc-activity__step--error .sc-activity__verb {
-      color: var(--_danger);
-    }
-    .sc-activity__target {
-      min-width: 0;
-      overflow: hidden;
-      color: var(--_muted);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .sc-activity__target--code {
-      font-family: var(--_mono);
-      font-size: var(--_fs-xs);
-    }
-    .sc-activity__target--struck {
-      text-decoration: line-through;
-    }
-    .sc-activity__note {
-      flex-shrink: 0;
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-    .sc-activity__note--danger {
-      color: var(--_danger);
-    }
-    .sc-activity__summary {
-      max-height: 14rem;
-      margin: var(--_s4) 0 var(--_s8) 30px;
-      padding: var(--_s8) var(--_s12);
-      overflow: auto;
-      border: 1px solid var(--_line);
-      border-radius: var(--_radius-md);
-      background: var(--_sunken);
-      font-family: var(--_mono);
-      font-size: var(--_fs-xs);
-      line-height: 1.5;
-      color: var(--_muted);
-      white-space: pre-wrap;
-    }
-
-    .sc-note {
-      display: flex;
-      align-items: center;
-      gap: var(--_s8);
-      font-size: var(--_fs-ui);
-      color: var(--_muted);
-    }
-    .sc-note strong {
-      font-weight: 500;
-      color: var(--_text);
-    }
-    .sc-note--ok .sc-icon {
-      color: var(--_ok);
-    }
-
-    .sc-changes {
-      padding: var(--_s10) var(--_s14);
-      border: 1px solid var(--_line);
-      border-radius: var(--_radius);
-      background: var(--_surface);
-    }
-    .sc-changes__title {
-      font-size: var(--_fs-xs);
-      font-weight: 500;
-      color: var(--_subtle);
-    }
-    .sc-changes__list {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s4);
-      margin-top: var(--_s6);
-    }
-    .sc-changes__item {
-      font-size: var(--_fs-ui);
-    }
-    .sc-changes__label {
-      color: var(--_muted);
-    }
-    .sc-changes__item--added .sc-changes__label {
-      color: var(--_ok);
-    }
-    .sc-changes__item--removed .sc-changes__label {
-      color: var(--_danger);
-    }
-    .sc-changes__item--changed .sc-changes__label,
-    .sc-changes__item--learned .sc-changes__label {
-      color: var(--_accent);
-    }
-    .sc-changes__more {
-      margin-top: var(--_s4);
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-    .sc-changes__more:hover {
-      color: var(--_text);
-    }
-
-    .sc-status-line {
-      display: flex;
-      align-items: center;
-      gap: var(--_s8);
-      padding: 0 var(--_s16) var(--_s4);
-      font-size: var(--_fs-xs);
-      font-variant-numeric: tabular-nums;
-      color: var(--_subtle);
-    }
-    .sc-status-line:empty {
-      display: none;
-    }
-    .sc-status-line__dot {
-      flex-shrink: 0;
-      width: 6px;
-      height: 6px;
-      border-radius: 9999px;
-      background: var(--_signal);
-      animation: sc-pulse 1.4s ease-in-out infinite;
-    }
-    .sc-status-line__hint {
-      margin-left: auto;
-    }
-    .sc-status-line kbd {
-      font: inherit;
-    }
-    @media (max-width: 639px) {
-      .sc-status-line__hint {
-        display: none;
-      }
-    }
-
-    /* --- The windows of an agent: a state in words, and the map -------------------------------- */
-
-    /* A state: a dot of its color and the word, so the color is never the whole message. */
-    .sc-status {
-      display: inline-flex;
-      flex-shrink: 0;
-      align-items: center;
-      gap: var(--_s6);
-      font-size: var(--_fs-xs);
-      white-space: nowrap;
-      color: var(--_muted);
-    }
-    .sc-status--signal {
-      color: var(--_signal);
-    }
-    .sc-status--danger {
-      color: var(--_danger);
-    }
-    .sc-status--neutral {
-      color: var(--_subtle);
-    }
-    .sc-status__dot {
-      flex-shrink: 0;
-      width: 6px;
-      height: 6px;
-      border-radius: 9999px;
-      background: var(--_line-strong);
-    }
-    .sc-status__dot--ok {
-      background: var(--_ok);
-    }
-    .sc-status__dot--signal {
-      background: var(--_signal);
-    }
-    .sc-status__dot--danger {
-      background: var(--_danger);
-    }
-    /* Something is happening right now. */
-    .sc-status--live .sc-status__dot {
-      animation: sc-pulse 1.4s ease-in-out infinite;
-    }
-
-    /* What the agent does: its channels and automations, as rows that open. */
-    .sc-automations {
-      display: flex;
-      flex-direction: column;
-      gap: calc(24px * var(--_density));
-    }
-    .sc-automations__title {
-      padding: 0 var(--_s8) var(--_s4);
-      font-size: calc(var(--_fs) * 11 / 14);
-      font-weight: 500;
-      color: var(--_subtle);
-    }
-    .sc-automations__item + .sc-automations__item {
-      border-top: 1px solid var(--_line);
-    }
-    .sc-automations__empty {
-      padding: var(--_s8);
-      font-size: var(--_fs-xs);
-      line-height: 1.5;
-      color: var(--_muted);
-    }
-    /* What a window says instead of itself: that it is loading, or could not be. */
-    .sc-automations > .sc-note,
-    .sc-automations > .sc-error,
-    .sc-flow > .sc-note,
-    .sc-flow > .sc-error {
-      padding: var(--_s16);
-    }
-
-    .sc-automation {
-      position: relative;
-    }
-    /* The part the builder just touched: a wash of the signal color that fades, once. */
-    .sc-automation__wash {
-      position: absolute;
-      inset: 0;
-      border-radius: var(--_radius-md);
-      pointer-events: none;
-      animation: sc-wash 1.8s var(--_ease) both;
-    }
-    .sc-automation__head {
-      display: flex;
-      align-items: flex-start;
-      gap: var(--_s12);
-      width: 100%;
-      min-height: calc(44px * var(--_density));
-      padding: var(--_s8);
-      border-radius: var(--_radius-md);
-      text-align: left;
-      transition: background-color 0.15s;
-    }
-    .sc-automation__head:hover {
-      background: var(--_sunken);
-    }
-    .sc-automation__head:focus-visible {
-      outline-offset: -2px;
-    }
-    .sc-automation__tile {
-      display: grid;
-      flex-shrink: 0;
-      place-items: center;
-      width: 26px;
-      height: 26px;
-      border-radius: var(--_radius-sm);
-      background: var(--_accent-soft);
-      color: var(--_accent);
-    }
-    .sc-automation__tile--signal {
-      background: var(--_signal-soft);
-      color: var(--_signal);
-    }
-    /* A logo has its own ground. */
-    .sc-automation__tile--mark {
-      background: none;
-    }
-    .sc-automation__tile--building {
-      animation: sc-pulse 1.4s ease-in-out infinite;
-    }
-    .sc-automation__glyph {
-      width: 14px;
-      height: 14px;
-    }
-    .sc-automation__text {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      min-width: 0;
-    }
-    .sc-automation__line {
-      display: flex;
-      align-items: center;
-      gap: var(--_s12);
-      min-height: 26px;
-    }
-    .sc-automation__title {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: var(--_fs-ui);
-      font-weight: 500;
-      line-height: 1.375;
-    }
-    .sc-automation__status {
-      flex-shrink: 0;
-      margin-left: auto;
-    }
-    .sc-automation__tagline {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--_s4) var(--_s8);
-      margin-top: -2px;
-      font-size: var(--_fs-xs);
-      color: var(--_muted);
-    }
-    .sc-automation__meta {
-      margin-top: var(--_s4);
-      font-size: var(--_fs-xs);
-    }
-    .sc-automation__chevron {
-      flex-shrink: 0;
-      width: 14px;
-      height: 14px;
-      margin-top: 6px;
-      color: var(--_subtle);
-      opacity: 0;
-      transition:
-        opacity 0.15s,
-        transform 0.15s;
-    }
-    .sc-automation__head:hover .sc-automation__chevron,
-    .sc-automation__head:focus-visible .sc-automation__chevron,
-    .sc-automation--open .sc-automation__chevron {
-      opacity: 1;
-    }
-    .sc-automation--open .sc-automation__chevron {
-      transform: rotate(180deg);
-    }
-    /* Under the tile and the text, aligned with the title. */
-    .sc-automation__body {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s12);
-      padding: 0 var(--_s8) var(--_s12) calc(var(--_s8) + 26px + var(--_s12));
-      font-size: var(--_fs-xs);
-      line-height: 1.5;
-      animation: sc-fade-in 0.2s var(--_ease);
-    }
-    .sc-automation__description {
-      max-width: 65ch;
-      color: var(--_muted);
-    }
-    .sc-automation__facts {
-      display: grid;
-      grid-template-columns: auto minmax(0, 1fr);
-      gap: var(--_s4) var(--_s16);
-    }
-    .sc-automation__fact {
-      display: contents;
-    }
-    .sc-automation__label {
-      color: var(--_subtle);
-    }
-    .sc-automation__activity {
-      color: var(--_subtle);
-    }
-    .sc-automation__activity--failed {
-      color: var(--_danger);
-    }
-    .sc-automation__tips {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s2);
-      color: var(--_subtle);
-    }
-    .sc-automation__actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--_s6);
-    }
-
-    /* When it runs: the days of the week with the ones it works on marked, and the time. */
-    .sc-schedule {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--_s8);
-    }
-    .sc-schedule__days {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--_s2);
-    }
-    .sc-schedule__day {
-      display: grid;
-      place-items: center;
-      width: 18px;
-      height: 18px;
-      border-radius: 9999px;
-      font-size: calc(var(--_fs) * 11 / 14);
-      font-weight: 500;
-      line-height: 1;
-      color: color-mix(in srgb, var(--_subtle) 70%, transparent);
-    }
-    .sc-schedule__day--on {
-      background: var(--_accent-soft);
-      color: var(--_accent);
-    }
-    .sc-schedule--signal .sc-schedule__day--on {
-      background: var(--_signal-soft);
-      color: var(--_signal);
-    }
-    .sc-schedule__day--today {
-      box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
-    }
-    .sc-schedule__time {
-      font-size: var(--_fs-xs);
-      font-weight: 500;
-      font-variant-numeric: tabular-nums;
-    }
-
-    /* The apps a part uses; dimmed until they are connected. */
-    .sc-app-marks {
-      display: inline-flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--_s4) var(--_s8);
-    }
-    .sc-app-marks__item {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--_s4);
-    }
-    .sc-app-marks__item--off {
-      color: var(--_subtle);
-    }
-
-    /*
-     * The agent as a map. The graph library sets what it needs to work in its own stylesheet and
-     * reads its look from custom properties, which are set here from the tokens (the names without
-     * "-default" are the ones a host may set).
-     */
-    .sc-flow {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      min-height: 20rem;
-    }
-    .sc-flow .react-flow {
-      --xy-background-color: transparent;
-      --xy-background-pattern-color: var(--_line-strong);
-      --xy-edge-stroke: var(--_line-strong);
-      --xy-edge-stroke-width: 1.25;
-      --xy-edge-stroke-selected: var(--_muted);
-    }
-    .sc-flow .react-flow__edge-textbg {
-      fill: var(--_surface);
-      stroke: var(--_line);
-      rx: 6;
-    }
-    .sc-flow .react-flow__edge-text {
-      fill: var(--_muted);
-      font-size: calc(var(--_fs) * 11 / 14);
-    }
-    .sc-flow .react-flow__controls {
-      overflow: hidden;
-      border: 1px solid var(--_line);
-      border-radius: var(--_radius-md);
-      box-shadow: var(--_shadow-raised);
-    }
-    .sc-flow .react-flow__controls-button {
-      border-bottom: 1px solid var(--_line);
-      background: var(--_face);
-      color: var(--_muted);
-      cursor: pointer;
-    }
-    .sc-flow .react-flow__controls-button:last-child {
-      border-bottom: 0;
-    }
-    .sc-flow .react-flow__controls-button:hover {
-      background: var(--_face-hover);
-      color: var(--_text);
-    }
-    .sc-flow__empty {
-      padding: calc(64px * var(--_density)) calc(24px * var(--_density));
-      font-size: var(--_fs-ui);
-      line-height: 1.625;
-      text-align: center;
-      color: var(--_muted);
-    }
-    /* Its width and height are the layout's (NODE_W, NODE_H), set on the element itself. */
-    .sc-flow__node {
-      display: flex;
-      align-items: center;
-      gap: var(--_s10);
-      padding: 0 var(--_s12);
-      border: 1px solid var(--_line);
-      border-radius: var(--_radius);
-      background: var(--_surface);
-      box-shadow: var(--_shadow-raised);
-      color: var(--_text);
-    }
-    .sc-flow__node--strong {
-      border-color: var(--_line-strong);
-    }
-    .sc-flow__node--selected {
-      outline: 2px solid var(--_accent);
-      outline-offset: 2px;
-    }
-    .sc-flow__handle {
-      opacity: 0;
-    }
-    .sc-flow__mark {
-      display: grid;
-      flex-shrink: 0;
-      place-items: center;
-      width: 32px;
-      height: 32px;
-      border-radius: var(--_radius-md);
-      background: var(--_sunken);
-      color: var(--_muted);
-    }
-    .sc-flow__mark--strong {
-      background: var(--_signal-soft);
-      color: var(--_signal);
-    }
-    .sc-flow__glyph {
-      width: 16px;
-      height: 16px;
-    }
-    .sc-flow__text {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      min-width: 0;
-    }
-    .sc-flow__name,
-    .sc-flow__detail {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .sc-flow__name {
-      font-size: var(--_fs-xs);
-      font-weight: 500;
-      line-height: 1.375;
-    }
-    .sc-flow__detail {
-      font-size: calc(var(--_fs) * 11 / 14);
-      color: var(--_subtle);
-    }
-    .sc-flow__trigger {
-      font-family: var(--_mono);
-      color: var(--_muted);
-    }
-
-    /* --- The orb: the voice window's shape, still when the person asked for less motion -------- */
-
-    .sc-orb {
-      /* At rest the accent worn down to gray; the person is the accent, the agent the signal. */
-      --_orb: color-mix(in srgb, var(--_accent) 40%, rgb(150 150 150));
-      position: relative;
-      display: grid;
-      flex-shrink: 0;
-      place-items: center;
-    }
-    .sc-orb--listening {
-      --_orb: var(--_accent);
-    }
-    .sc-orb--thinking,
-    .sc-orb--speaking {
-      --_orb: var(--_signal);
-    }
-    /* Not drawn by the library: a disc in a ring, and the ring's outline tells the state. */
-    .sc-orb__core,
-    .sc-orb__ring {
-      grid-area: 1 / 1;
-      aspect-ratio: 1;
-      border-radius: 9999px;
-    }
-    .sc-orb__core {
-      width: 55%;
-      background: var(--_orb);
-    }
-    .sc-orb__ring {
-      width: 80%;
-      border: 1px solid color-mix(in srgb, var(--_orb) 45%, transparent);
-    }
-    .sc-orb--listening .sc-orb__ring {
-      border: 3px solid var(--_orb);
-    }
-    .sc-orb--thinking .sc-orb__ring {
-      border: 3px dashed var(--_orb);
-    }
-    .sc-orb--speaking .sc-orb__ring {
-      border: 3px solid var(--_orb);
-      outline: 2px solid var(--_orb);
-      outline-offset: 6px;
-    }
-
-    /* --- The voice window: the orb, what it is doing in words, and what was said ---------------- */
-
-    .sc-voice {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: var(--_s12);
-      min-height: 100%;
-      padding: var(--_s20) var(--_s16);
-      text-align: center;
-    }
-    .sc-voice__stage {
-      display: grid;
-      place-items: center;
-    }
-    .sc-voice__state {
-      font-size: var(--_fs-md);
-      font-weight: 500;
-    }
-    .sc-voice--idle .sc-voice__state,
-    .sc-voice--muted .sc-voice__state {
-      color: var(--_muted);
-    }
-    .sc-voice__captions {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s10);
-      width: 100%;
-      max-width: 34rem;
-    }
-    .sc-voice__captions:empty {
-      display: none;
-    }
-    .sc-voice__line {
-      line-height: 1.5;
-      overflow-wrap: anywhere;
-      white-space: pre-wrap;
-    }
-    .sc-voice__line--person {
-      font-size: var(--_fs-ui);
-      color: var(--_muted);
-    }
-    .sc-voice__line--agent {
-      font-size: var(--_fs-md);
-      animation: sc-rise 0.2s var(--_ease);
-    }
-    .sc-voice__who {
-      display: block;
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-    .sc-voice__note {
-      max-width: 28rem;
-      font-size: var(--_fs-ui);
-      line-height: 1.5;
-      color: var(--_muted);
-    }
-    .sc-voice__controls {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--_s8);
-    }
-
-    /* --- A window of the shell: its bar, and the room for what it holds ---------------------- */
-
-    .sc-window {
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-      height: 100%;
-      min-height: 0;
-    }
-    .sc-window__bar {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      gap: var(--_s8);
-      min-height: calc(40px * var(--_density));
-      padding: 0 var(--_s8) 0 var(--_s14);
-      border-bottom: 1px solid var(--_line);
-    }
-    .sc-window__mark {
-      flex-shrink: 0;
-      width: 16px;
-      height: 16px;
-      color: var(--_subtle);
-    }
-    .sc-window__title {
-      min-width: 0;
-      flex: 1;
-      margin: 0;
-      overflow: hidden;
-      font-size: var(--_fs);
-      font-weight: 500;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    /* The window scrolls inside; the bar stays. */
-    .sc-window__body {
-      min-height: 0;
-      flex: 1;
-      overflow: auto;
-      overscroll-behavior: contain;
-    }
-    /* A surface in a window has a page to itself: it gets the room, not a card's width. */
-    .sc-window--surface > .sc-window__body {
-      padding: var(--_s16);
-    }
-    /* What a window says when nothing here draws it: its words. */
-    .sc-window__twin {
-      max-width: 40rem;
-      padding: var(--_s16);
-      line-height: 1.625;
-      white-space: pre-wrap;
-      color: var(--_muted);
-    }
-
-    /* The conversation when the person listens: only the last words, quiet and in the middle. */
-    .sc-captions {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: var(--_s12);
-      height: 100%;
-      padding: var(--_s20) var(--_s16);
-      text-align: center;
-    }
-    .sc-captions__line {
-      line-height: 1.5;
-      overflow-wrap: anywhere;
-      white-space: pre-wrap;
-    }
-    .sc-captions__line--person {
-      font-size: var(--_fs-ui);
-      color: var(--_muted);
-    }
-    .sc-captions__line--agent {
-      font-size: var(--_fs-md);
-      animation: sc-rise 0.2s var(--_ease);
-    }
-
-    /* --- The shell: the strip of open windows, the stage, and the dock to talk from ---------- */
-
-    /*
-     * The shell answers to its own width, not the page's: a widget in a narrow column of a wide
-     * page is narrow. Under 720px the strip becomes tabs and the stage takes the width.
-     */
-    .sc-space {
-      container-type: inline-size;
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-      min-height: 0;
-    }
-    .sc-space__main {
-      display: grid;
-      grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
-      flex: 1;
-      min-height: 0;
-    }
-    /* The window on the stage scrolls inside its frame; the stage itself only holds it. */
-    .sc-space__stage {
-      min-width: 0;
-      min-height: 0;
-      overflow: hidden;
-    }
-    .sc-space__stage:focus {
-      outline: none;
-    }
-
-    .sc-strip {
-      display: flex;
-      flex-direction: column;
-      gap: var(--_s2);
-      padding: var(--_s8);
-      overflow-y: auto;
-      border-right: 1px solid var(--_line);
-    }
-    .sc-strip__tab {
-      display: flex;
-      min-width: 0;
-      flex-shrink: 0;
-      align-items: center;
-      gap: var(--_s8);
-      padding: var(--_s8) var(--_s10);
-      border-radius: var(--_radius-md);
-      font-size: var(--_fs-ui);
-      text-align: left;
-      color: var(--_muted);
-      transition:
-        background-color 0.15s,
-        color 0.15s;
-    }
-    .sc-strip__tab:hover {
-      background: var(--_sunken);
-      color: var(--_text);
-    }
-    /* The window on the stage. */
-    .sc-strip__tab--current,
-    .sc-strip__tab--current:hover {
-      background: var(--_accent-soft);
-      font-weight: 500;
-      color: var(--_text);
-    }
-    /* A window the person closed: still there to open, but quiet. */
-    .sc-strip__tab--closed {
-      opacity: 0.6;
-    }
-    .sc-strip__mark {
-      flex-shrink: 0;
-      width: 16px;
-      height: 16px;
-    }
-    .sc-strip__title {
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    /* The agent said something while another window was on the stage. */
-    .sc-strip__dot {
-      flex-shrink: 0;
-      width: 8px;
-      height: 8px;
-      margin-left: auto;
-      border-radius: 9999px;
-      background: var(--_signal);
-    }
-
-    .sc-dock {
-      flex-shrink: 0;
-      border-top: 1px solid var(--_line);
-    }
-    .sc-dock__status {
-      display: flex;
-      align-items: center;
-      gap: var(--_s8);
-      padding: var(--_s6) var(--_s16) 0;
-      font-size: var(--_fs-xs);
-      color: var(--_subtle);
-    }
-    .sc-dock__status:empty {
-      display: none;
-    }
-    .sc-dock .sc-error {
-      padding: var(--_s6) var(--_s16) 0;
-    }
-    .sc-dock__voice {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--_s8);
-      padding: var(--_s8) var(--_s12) var(--_s12);
-    }
-
-    @container (max-width: 719px) {
-      .sc-space__main {
-        grid-template-columns: minmax(0, 1fr);
-        grid-template-rows: auto minmax(0, 1fr);
-      }
-      .sc-strip {
-        flex-direction: row;
-        gap: 0;
-        padding: 0 var(--_s8);
-        overflow: auto hidden;
-        scrollbar-width: none;
-        border-right: 0;
-        border-bottom: 1px solid var(--_line);
-      }
-      .sc-strip__tab,
-      .sc-strip__tab:hover {
-        border-radius: 0;
-        background: none;
-        box-shadow: inset 0 -2px 0 transparent;
-      }
-      .sc-strip__tab--current,
-      .sc-strip__tab--current:hover {
-        background: none;
-        box-shadow: inset 0 -2px 0 var(--_accent);
-      }
-    }
-  }
-
-  @keyframes sc-rise {
-    from {
-      opacity: 0;
-      transform: translateY(6px);
-    }
-  }
-  @keyframes sc-fade-in {
-    from {
-      opacity: 0;
-      transform: translateY(3px);
-    }
-  }
-  @keyframes sc-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  @keyframes sc-pulse {
-    0%,
-    100% {
-      opacity: 0.35;
-    }
-    50% {
-      opacity: 1;
-    }
-  }
-  @keyframes sc-wash {
-    from {
-      background-color: var(--_signal-soft);
-    }
-    to {
-      background-color: transparent;
-    }
-  }
-  @keyframes sc-ping {
-    75%,
-    100% {
-      opacity: 0;
-      transform: scale(2);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where(.sc-ui:not([data-sc-unstyled])) * {
-      animation: none !important;
-      transition: none !important;
-    }
-  }
-}