@font-face {
  font-family: "Syne";
  src: url("/_design/syne-latin.woff2");
  font-weight: 400 800;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("/_design/dm-sans-latin.woff2");
  font-weight: 400 600;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  src: url("/_design/dm-mono-400-latin.woff2");
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  src: url("/_design/dm-mono-500-latin.woff2");
  font-weight: 500;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root, :host {
  --signal-text: #0f1115;
  --signal-body: #4a505b;
  --signal-muted: #6b7280;
  --signal-subtle: #9098a6;
  --signal-surface: #f4f5f7;
  --signal-raised: #ffffff;
  --signal-raised-strong: #e9ebef;
  --signal-sunken: #eceef2;
  --signal-line: #e2e5ea;
  --signal-line-strong: #cfd3da;
  --signal-danger: #c2412a;
  --signal-extreme: #000000;
  --signal-other: #5b4bd6;
  --signal-shadow: 0 10px 30px rgba(15, 17, 21, 0.08);
  --signal-font: "DM Sans", "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --signal-font-display: Syne, "DM Sans", "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --signal-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --signal-size-small: 0.875rem;
  --signal-size-base: 1.0625rem;
  --signal-size-lead: 1.3125rem;
  --signal-size-large: 1.75rem;
  --signal-size-title: clamp(2.5rem, 6vw + 1rem, 5.25rem);
  --signal-size-chapter: clamp(1.875rem, 3vw + 1rem, 3rem);
  --signal-leading-tight: 1.08;
  --signal-leading: 1.6;
  --signal-space-1: 0.25rem;
  --signal-space-2: 0.5rem;
  --signal-space-3: 1rem;
  --signal-space-4: 1.5rem;
  --signal-space-5: 2.5rem;
  --signal-space-6: 4rem;
  --signal-space-7: 7rem;
  --signal-measure: 38rem;
  --signal-wide: 72rem;
  --signal-radius-small: 6px;
  --signal-radius: 10px;
  --signal-radius-card: 14px;
  --signal-radius-large: 20px;
  --signal-enter-duration: 220ms;
  --signal-enter-easing: cubic-bezier(0.2, 0, 0, 1);
  --signal-leave-duration: 160ms;
  --signal-leave-easing: cubic-bezier(0.4, 0, 1, 1);
  --signal-move-duration: 260ms;
  --signal-move-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --signal-change-duration: 160ms;
  --signal-change-easing: ease-out;
  --signal-pulse-duration: 3.2s;
  --signal-accent: #c94a33;
  --signal-accent-text: #ffffff;
  --signal-filament: #f3d2ca;
  --signal-glow: transparent;
  --signal-focus: #c94a33;
}
@media (prefers-color-scheme: dark) {
  :root, :host {
    --signal-text: #eef0f2;
    --signal-body: #a7acb6;
    --signal-muted: #7a8191;
    --signal-subtle: #5c6270;
    --signal-surface: #0b0c0f;
    --signal-raised: #111318;
    --signal-raised-strong: #1c1f25;
    --signal-sunken: #08090b;
    --signal-line: #1c1f25;
    --signal-line-strong: #2a2e36;
    --signal-danger: #ff7a5c;
    --signal-extreme: #ffffff;
    --signal-other: #8b7bff;
    --signal-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
    --signal-font: "DM Sans", "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --signal-font-display: Syne, "DM Sans", "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --signal-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --signal-size-small: 0.875rem;
    --signal-size-base: 1.0625rem;
    --signal-size-lead: 1.3125rem;
    --signal-size-large: 1.75rem;
    --signal-size-title: clamp(2.5rem, 6vw + 1rem, 5.25rem);
    --signal-size-chapter: clamp(1.875rem, 3vw + 1rem, 3rem);
    --signal-leading-tight: 1.08;
    --signal-leading: 1.6;
    --signal-space-1: 0.25rem;
    --signal-space-2: 0.5rem;
    --signal-space-3: 1rem;
    --signal-space-4: 1.5rem;
    --signal-space-5: 2.5rem;
    --signal-space-6: 4rem;
    --signal-space-7: 7rem;
    --signal-measure: 38rem;
    --signal-wide: 72rem;
    --signal-radius-small: 6px;
    --signal-radius: 10px;
    --signal-radius-card: 14px;
    --signal-radius-large: 20px;
    --signal-enter-duration: 220ms;
    --signal-enter-easing: cubic-bezier(0.2, 0, 0, 1);
    --signal-leave-duration: 160ms;
    --signal-leave-easing: cubic-bezier(0.4, 0, 1, 1);
    --signal-move-duration: 260ms;
    --signal-move-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --signal-change-duration: 160ms;
    --signal-change-easing: ease-out;
    --signal-pulse-duration: 3.2s;
    --signal-accent: #ff7f66;
    --signal-accent-text: #0b0c0f;
    --signal-filament: #4f2a23;
    --signal-glow: rgba(255, 127, 102, 0.55);
    --signal-focus: #ff7f66;
  }
}
:root[data-theme="light"], :host([data-theme="light"]) {
  --signal-text: #0f1115;
  --signal-body: #4a505b;
  --signal-muted: #6b7280;
  --signal-subtle: #9098a6;
  --signal-surface: #f4f5f7;
  --signal-raised: #ffffff;
  --signal-raised-strong: #e9ebef;
  --signal-sunken: #eceef2;
  --signal-line: #e2e5ea;
  --signal-line-strong: #cfd3da;
  --signal-danger: #c2412a;
  --signal-extreme: #000000;
  --signal-other: #5b4bd6;
  --signal-shadow: 0 10px 30px rgba(15, 17, 21, 0.08);
  --signal-font: "DM Sans", "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --signal-font-display: Syne, "DM Sans", "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --signal-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --signal-size-small: 0.875rem;
  --signal-size-base: 1.0625rem;
  --signal-size-lead: 1.3125rem;
  --signal-size-large: 1.75rem;
  --signal-size-title: clamp(2.5rem, 6vw + 1rem, 5.25rem);
  --signal-size-chapter: clamp(1.875rem, 3vw + 1rem, 3rem);
  --signal-leading-tight: 1.08;
  --signal-leading: 1.6;
  --signal-space-1: 0.25rem;
  --signal-space-2: 0.5rem;
  --signal-space-3: 1rem;
  --signal-space-4: 1.5rem;
  --signal-space-5: 2.5rem;
  --signal-space-6: 4rem;
  --signal-space-7: 7rem;
  --signal-measure: 38rem;
  --signal-wide: 72rem;
  --signal-radius-small: 6px;
  --signal-radius: 10px;
  --signal-radius-card: 14px;
  --signal-radius-large: 20px;
  --signal-enter-duration: 220ms;
  --signal-enter-easing: cubic-bezier(0.2, 0, 0, 1);
  --signal-leave-duration: 160ms;
  --signal-leave-easing: cubic-bezier(0.4, 0, 1, 1);
  --signal-move-duration: 260ms;
  --signal-move-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --signal-change-duration: 160ms;
  --signal-change-easing: ease-out;
  --signal-pulse-duration: 3.2s;
  --signal-accent: #c94a33;
  --signal-accent-text: #ffffff;
  --signal-filament: #f3d2ca;
  --signal-glow: transparent;
  --signal-focus: #c94a33;
}
:root[data-theme="dark"], :host([data-theme="dark"]) {
  --signal-text: #eef0f2;
  --signal-body: #a7acb6;
  --signal-muted: #7a8191;
  --signal-subtle: #5c6270;
  --signal-surface: #0b0c0f;
  --signal-raised: #111318;
  --signal-raised-strong: #1c1f25;
  --signal-sunken: #08090b;
  --signal-line: #1c1f25;
  --signal-line-strong: #2a2e36;
  --signal-danger: #ff7a5c;
  --signal-extreme: #ffffff;
  --signal-other: #8b7bff;
  --signal-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
  --signal-font: "DM Sans", "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --signal-font-display: Syne, "DM Sans", "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --signal-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, "Noto Sans Arabic", "Geeza Pro", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --signal-size-small: 0.875rem;
  --signal-size-base: 1.0625rem;
  --signal-size-lead: 1.3125rem;
  --signal-size-large: 1.75rem;
  --signal-size-title: clamp(2.5rem, 6vw + 1rem, 5.25rem);
  --signal-size-chapter: clamp(1.875rem, 3vw + 1rem, 3rem);
  --signal-leading-tight: 1.08;
  --signal-leading: 1.6;
  --signal-space-1: 0.25rem;
  --signal-space-2: 0.5rem;
  --signal-space-3: 1rem;
  --signal-space-4: 1.5rem;
  --signal-space-5: 2.5rem;
  --signal-space-6: 4rem;
  --signal-space-7: 7rem;
  --signal-measure: 38rem;
  --signal-wide: 72rem;
  --signal-radius-small: 6px;
  --signal-radius: 10px;
  --signal-radius-card: 14px;
  --signal-radius-large: 20px;
  --signal-enter-duration: 220ms;
  --signal-enter-easing: cubic-bezier(0.2, 0, 0, 1);
  --signal-leave-duration: 160ms;
  --signal-leave-easing: cubic-bezier(0.4, 0, 1, 1);
  --signal-move-duration: 260ms;
  --signal-move-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --signal-change-duration: 160ms;
  --signal-change-easing: ease-out;
  --signal-pulse-duration: 3.2s;
  --signal-accent: #ff7f66;
  --signal-accent-text: #0b0c0f;
  --signal-filament: #4f2a23;
  --signal-glow: rgba(255, 127, 102, 0.55);
  --signal-focus: #ff7f66;
}
/* Signal on a screen, the lobes' layer: an organism and its lobes drawn as Signal draws a page. Every rule stands under :host or names a class (LOOK-3), so it dresses the lobe
   and nothing beside it. The person's access tokens win over Signal's (SCREEN-7): text size, contrast, leading and motion are theirs. Syne names, DM Sans reads, DM Mono
   carries every byte; a section opens on a mono eyebrow in the accent, an item is a raised card, an answer is a ruled list of keys and values. */

:host {
  display: block;
  box-sizing: border-box;
  color: color-mix(in srgb, var(--signal-body), var(--signal-extreme) calc(var(--access-contrast, 0) * 100%));
  background: var(--signal-surface);
  font-family: var(--signal-font);
  font-size: calc(var(--signal-size-base) * var(--access-text-size, 1));
  line-height: calc(var(--signal-leading) * var(--access-leading, 1));
  -webkit-font-smoothing: antialiased;
}

:host div,
:host span,
:host p,
:host h1,
:host h2,
:host h3,
:host h4,
:host header,
:host footer,
:host main,
:host nav,
:host aside,
:host section,
:host article,
:host ul,
:host ol,
:host li,
:host dl,
:host dt,
:host dd,
:host figure,
:host figcaption,
:host blockquote,
:host fieldset,
:host legend,
:host details,
:host summary,
:host label,
:host button,
:host input,
:host select,
:host textarea,
:host table,
:host th,
:host td,
:host pre,
:host code {
  box-sizing: border-box;
}

/* Type: a title in Syne, a section's name as the eyebrow every Signal page opens a band with. */
:host :where(h1),
:host :where(h2) {
  margin: 0 0 var(--signal-space-3);
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: calc(1.15 * var(--access-leading, 1));
}
:host :where(h1) {
  font-size: calc(1.9rem * var(--access-text-size, 1));
}
:host :where(h2) {
  font-size: calc(1.55rem * var(--access-text-size, 1));
}
:host :where(h3) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: var(--signal-space-5) 0 var(--signal-space-3);
  color: var(--signal-accent);
  font-family: var(--signal-font-mono);
  font-size: calc(0.75rem * var(--access-text-size, 1));
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
:host :where(h3)::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--signal-line);
}
:host :where(h4) {
  margin: 0 0 var(--signal-space-1);
  color: var(--signal-text);
  font-family: var(--signal-font-mono);
  font-size: calc(0.95rem * var(--access-text-size, 1));
  font-weight: 500;
}

:host :where(p),
:host :where(ul),
:host :where(ol),
:host :where(dl),
:host :where(blockquote),
:host :where(figure),
:host :where(table),
:host :where(hr),
:host :where(pre) {
  margin: 0 0 var(--signal-space-3);
}
:host :where(ul),
:host :where(ol) {
  padding-inline-start: var(--signal-space-4);
}
:host :where(small),
:host :where(figcaption),
:host :where(caption) {
  color: var(--signal-muted);
  font-size: calc(var(--signal-size-small) * var(--access-text-size, 1));
}
:host :where(strong),
:host :where(th) {
  color: var(--signal-text);
  font-weight: 600;
}
:host :where(mark) {
  padding: 0 0.3em;
  border-radius: 4px;
  background: color-mix(in oklab, var(--signal-accent) 18%, transparent);
  color: var(--signal-text);
}
:host :where(hr) {
  border: 0;
  border-top: calc(1px + var(--access-contrast, 0) * 1px) solid var(--signal-line);
}
:host :where(blockquote) {
  padding-inline-start: var(--signal-space-3);
  border-inline-start: 3px solid var(--signal-accent);
}
:host :where(pre),
:host :where(code) {
  font-family: var(--signal-font-mono);
  font-size: 0.9em;
}
:host :where(pre) {
  padding: var(--signal-space-3);
  overflow-x: auto;
  border-radius: var(--signal-radius);
  background: var(--signal-sunken);
}

:host :where(a) {
  color: var(--signal-accent);
  text-decoration: none;
  text-underline-offset: 0.2em;
}
:host :where(a:hover) {
  text-decoration: underline;
}
:host :where(img) {
  max-width: 100%;
  height: auto;
  border-radius: var(--signal-radius);
}
:host :where(meter),
:host :where(progress) {
  width: 100%;
  accent-color: var(--signal-accent);
}

:host :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
:host :where(th),
:host :where(td) {
  padding: var(--signal-space-2) var(--signal-space-3);
  border-bottom: calc(1px + var(--access-contrast, 0) * 1px) solid var(--signal-line);
  text-align: start;
}
:host :where(th) {
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A form: Signal's fields, rounded, quiet until focused, the accent their ring. */
:host :where(fieldset) {
  margin: 0 0 var(--signal-space-3);
  padding: var(--signal-space-4);
  border: calc(1px + var(--access-contrast, 0) * 1px) solid var(--signal-line);
  border-radius: var(--signal-radius-card);
}
:host :where(legend) {
  padding: 0 var(--signal-space-2);
  color: var(--signal-text);
  font-family: var(--signal-font-mono);
  font-size: 0.85em;
  font-weight: 500;
}
:host :where(label) {
  display: block;
  margin-bottom: var(--signal-space-1);
  color: var(--signal-text);
  font-size: 0.92em;
  font-weight: 600;
}
:host :where(input),
:host :where(select),
:host :where(textarea),
:host :where(button) {
  max-width: 100%;
  min-height: 2.75rem;
  padding: var(--signal-space-2) var(--signal-space-3);
  border: calc(1px + var(--access-contrast, 0) * 1px) solid var(--signal-line-strong);
  border-radius: var(--signal-radius);
  background: var(--signal-raised);
  color: var(--signal-text);
  font: inherit;
  transition:
    border-color var(--signal-change-duration) var(--signal-change-easing),
    box-shadow var(--signal-change-duration) var(--signal-change-easing);
}
:host :where(input:focus),
:host :where(select:focus),
:host :where(textarea:focus) {
  border-color: var(--signal-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--signal-accent) 22%, transparent);
  outline: none;
}
:host :where(input[type='checkbox']),
:host :where(input[type='radio']) {
  min-width: 1.5rem;
  min-height: 1.5rem;
  accent-color: var(--signal-accent);
}
:host :where(textarea) {
  width: 100%;
  font-family: var(--signal-font-mono);
  font-size: 0.9em;
}
:host :where(button) {
  cursor: pointer;
  font-weight: 600;
}
:host :where(button:disabled),
:host :where(input:disabled),
:host :where(select:disabled),
:host :where(textarea:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

:host :where(details) {
  margin: var(--signal-space-2) 0 0;
}
:host :where(summary) {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--signal-muted);
  cursor: pointer;
  font-size: 0.92em;
}
:host :where(summary:hover) {
  color: var(--signal-text);
}

/* The focus is always visible, and never turned off. */
:host :where(a:focus-visible),
:host :where(button:focus-visible),
:host :where(input:focus-visible),
:host :where(select:focus-visible),
:host :where(textarea:focus-visible),
:host :where(summary:focus-visible) {
  outline: 3px solid var(--signal-focus);
  outline-offset: 2px;
}

/* An organism's page and a lobe's: the room, its lists as cards, its answers as ruled keys and values. */
.signal-page {
  padding: calc(var(--signal-space-4) * var(--signal-density, 1)) calc(var(--signal-space-4) * var(--signal-density, 1))
    var(--signal-space-5);
}
:host .signal-list {
  display: grid;
  gap: calc(var(--signal-space-2) * var(--signal-density, 1));
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-item {
  padding: calc(var(--signal-space-3) * var(--signal-density, 1)) var(--signal-space-4);
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius-card);
  background: var(--signal-raised);
  transition:
    border-color calc(var(--signal-change-duration) * var(--access-motion, 1)) var(--signal-change-easing),
    transform calc(var(--signal-move-duration) * var(--access-motion, 1)) var(--signal-move-easing),
    opacity calc(var(--signal-enter-duration) * var(--access-motion, 1)) var(--signal-enter-easing);
}
.signal-item:hover {
  border-color: color-mix(in oklab, var(--signal-accent) 45%, var(--signal-line));
}
:host .signal-link {
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: 1.05em;
  font-weight: 600;
}
:host .signal-link:hover {
  color: var(--signal-accent);
  text-decoration: none;
}
:host .signal-muted {
  color: var(--signal-muted);
}
.signal-write {
  background: var(--signal-sunken);
}
/* A field of a form: its label, the control the whole width of the form, and its hint beneath, quiet. */
.signal-field {
  display: grid;
  gap: 0.4rem;
  margin-bottom: var(--signal-space-3);
}
.signal-field input,
.signal-field select,
.signal-field textarea {
  box-sizing: border-box;
  width: 100%;
}
.signal-field small {
  color: var(--signal-muted);
  font-size: calc(0.8rem * var(--access-text-size, 1));
  line-height: 1.45;
}
:host .signal-button {
  min-height: 2.6rem;
  padding: 0 1.2rem;
  border-color: var(--signal-accent);
  border-radius: 999px;
  background: var(--signal-accent);
  color: var(--signal-accent-text);
  box-shadow: 0 0 22px var(--signal-glow);
  transition: background-color calc(var(--signal-change-duration) * var(--access-motion, 1)) var(--signal-change-easing);
}
:host .signal-button:hover {
  background: color-mix(in oklab, var(--signal-accent), var(--signal-text) 12%);
}

/* An answer: each key in mono and quiet, its value beside it, a hairline between them; nested answers indent under a rule of the accent. */
.signal-data {
  overflow-wrap: anywhere;
  color: var(--signal-text);
  font-family: var(--signal-font-mono);
  font-size: calc(0.85rem * var(--access-text-size, 1));
  line-height: 1.55;
}
.signal-data dl {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  margin: 0;
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius);
  background: var(--signal-raised);
  overflow: hidden;
}
.signal-data dt,
.signal-data dd {
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--signal-line);
}
.signal-data dt {
  color: var(--signal-muted);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.signal-data dd {
  min-width: 0;
}
.signal-data dd dl,
.signal-data dd ol {
  border-inline-start: 2px solid color-mix(in oklab, var(--signal-accent) 55%, transparent);
  border-radius: 0;
  background: transparent;
}
.signal-data ol {
  margin: 0;
  padding-inline-start: 1.6rem;
}
.signal-data ol li {
  padding: 0.15rem 0;
}
@container (max-width: 30rem) {
  .signal-data dl {
    grid-template-columns: 1fr;
  }
  .signal-data dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-item,
  :host .signal-button,
  :host input,
  :host select,
  :host textarea {
    transition: none;
  }
}

/* An organism's vital signs (never the drawing's `.signal-pulse`): a live dot breathing in the accent, what its state says in Syne, and its fingerprint short in mono; then its few facts as a ruled grid. */
.signal-vital {
  display: flex;
  align-items: center;
  gap: var(--signal-space-3);
  padding: var(--signal-space-4);
  border: 1px solid color-mix(in oklab, var(--signal-accent) 35%, var(--signal-line));
  border-radius: var(--signal-radius-card);
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in oklab, var(--signal-accent) 14%, transparent), transparent 60%),
    var(--signal-raised);
}
.signal-vital-dot {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  background: var(--signal-accent);
  box-shadow: 0 0 0 0 var(--signal-glow);
  animation: signal-vital-breathe calc(2.4s / max(var(--access-motion, 1), 0.001)) ease-in-out infinite;
}
.signal-vital-text {
  flex: 1;
  min-width: 0;
}
.signal-vital-text p {
  margin: 0;
}
.signal-vital-words {
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: 1.25em;
  font-weight: 600;
}
.signal-print {
  flex: none;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--signal-line);
  border-radius: 999px;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: calc(0.75rem * var(--access-text-size, 1));
}
.signal-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: var(--signal-space-3) 0 0;
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius);
  background: var(--signal-line);
  overflow: hidden;
}
.signal-facts dt,
.signal-facts dd {
  margin: 0;
  padding: 0 var(--signal-space-3);
  background: var(--signal-raised);
}
.signal-facts dt {
  grid-row: 1;
  padding-top: var(--signal-space-3);
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: calc(0.7rem * var(--access-text-size, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.signal-facts dd {
  grid-row: 2;
  padding-bottom: var(--signal-space-3);
  color: var(--signal-text);
  font-weight: 500;
}
.signal-empty {
  margin: 0;
  padding: var(--signal-space-3) var(--signal-space-4);
  border: 1px dashed var(--signal-line);
  border-radius: var(--signal-radius-card);
  color: var(--signal-muted);
}
.signal-raw {
  margin-top: var(--signal-space-5);
}
.signal-raw summary {
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: calc(0.75rem * var(--access-text-size, 1));
  cursor: pointer;
}
@container (max-width: 30rem) {
  .signal-vital {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .signal-print {
    grid-column: 2;
    justify-self: start;
  }
  .signal-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .signal-facts dt:nth-of-type(n + 3) {
    grid-row: 3;
  }
  .signal-facts dd:nth-of-type(n + 3) {
    grid-row: 4;
  }
}
@keyframes signal-vital-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--signal-glow);
  }
  50% {
    box-shadow: 0 0 0 0.45rem transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .signal-vital-dot {
    animation: none;
  }
}
/* Signal on a website, the lobes' layer: every rule names a class (LOOK-3), so it dresses only what Signal's components write and the page's own frame wearing its classes.
   A near-black night where the nerve glows, a cool morning sheet where it is drawn in ink: Syne announces, DM Sans reads, DM Mono carries every byte. */

.signal-site {
  min-height: 100vh;
  color: var(--signal-body);
  background: var(--signal-surface);
  font-family: var(--signal-font);
  font-size: var(--signal-size-base);
  line-height: var(--signal-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.signal-site :where(a) {
  color: inherit;
}
.signal-site :where(:focus-visible) {
  outline: 3px solid var(--signal-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.signal-wrap {
  width: 100%;
  max-width: var(--signal-wide);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

/* The head: the mark, the places, the switches; it stays while the page moves under it. On a phone the places and the languages fold into one menu. */
.signal-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--signal-surface) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--signal-line);
}
.signal-head-row {
  display: flex;
  align-items: center;
  gap: var(--signal-space-3);
  max-width: var(--signal-wide);
  margin-inline: auto;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}
.signal-brand,
.signal-foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--signal-text);
  text-decoration: none;
}
.signal-brand-name {
  font-family: var(--signal-font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.signal-mark {
  width: 30px;
  height: 30px;
  overflow: visible;
}
.signal-mark-line {
  stroke: var(--signal-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.signal-mark-tip {
  fill: var(--signal-accent);
}
.signal-mark-core {
  fill: var(--signal-text);
}
.signal-head-nav {
  margin-inline-start: auto;
}
.signal-head-links {
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-head-link {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--signal-change-duration) var(--signal-change-easing),
    background-color var(--signal-change-duration) var(--signal-change-easing);
}
.signal-head-link:hover {
  color: var(--signal-text);
  background: var(--signal-sunken);
}

.signal-switchers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}
.signal-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.7rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: 999px;
  background: var(--signal-raised);
  color: var(--signal-text);
  font-family: var(--signal-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  box-sizing: border-box;
}
.signal-switch::-webkit-details-marker {
  display: none;
}
.signal-switch:hover {
  background: var(--signal-raised-strong);
}
.signal-theme {
  padding: 0;
}
.signal-theme-day {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid var(--signal-text);
  background: linear-gradient(90deg, var(--signal-text) 50%, transparent 50%);
}
.signal-globe {
  width: 0.95rem;
  height: 0.95rem;
  border: 1.6px solid var(--signal-text);
  border-radius: 999px;
  background:
    linear-gradient(var(--signal-text), var(--signal-text)) center / 100% 1.6px no-repeat,
    radial-gradient(ellipse 35% 50% at center, transparent 88%, var(--signal-text) 92%, transparent 100%);
}
.signal-burger {
  width: 1rem;
  height: 0.75rem;
  background:
    linear-gradient(var(--signal-text), var(--signal-text)) top / 100% 2px no-repeat,
    linear-gradient(var(--signal-text), var(--signal-text)) center / 100% 2px no-repeat,
    linear-gradient(var(--signal-text), var(--signal-text)) bottom / 100% 2px no-repeat;
}
.signal-langs,
.signal-menu {
  position: relative;
}
.signal-langs-pop,
.signal-menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  min-width: 14rem;
  max-height: min(70vh, 32rem);
  overflow: auto;
  margin: 0;
  padding: 0.4rem;
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius-card);
  background: var(--signal-raised);
  box-shadow:
    var(--signal-shadow),
    0 18px 48px rgba(0, 0, 0, 0.18);
  list-style: none;
}
.signal-langs-flat {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0 0;
  border-top: 1px solid var(--signal-line);
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.signal-lang {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--signal-radius);
  color: var(--signal-text);
  text-decoration: none;
}
.signal-lang:hover {
  background: var(--signal-sunken);
}
.signal-lang[aria-current='page'] {
  background: color-mix(in oklab, var(--signal-accent) 12%, transparent);
  color: var(--signal-accent);
}
.signal-lang-code {
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.signal-menu {
  display: none;
}
.signal-menu-panel {
  min-width: min(20rem, calc(100vw - 2rem));
  padding: 0.6rem;
}
.signal-menu-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-menu-links .signal-head-link {
  display: block;
  padding: 0.75rem;
  font-size: 0.85rem;
}
@media (max-width: 760px) {
  .signal-head-nav,
  .signal-langs {
    display: none;
  }
  .signal-menu {
    display: block;
  }
  .signal-switchers {
    margin-inline-start: auto;
  }
}

/* Type: one title per page in Syne, the eyebrow in mono and the accent, every paragraph in DM Sans. */
.signal-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--signal-space-4);
  color: var(--signal-accent);
  font-family: var(--signal-font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.signal-number {
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.signal-title {
  margin: 0 0 var(--signal-space-4);
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: var(--signal-size-title);
  font-weight: 700;
  line-height: var(--signal-leading-tight);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.signal-chapter-title,
:host [data-quo-card] h1 {
  margin: 0 0 var(--signal-space-4);
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: var(--signal-size-chapter);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.signal-lead,
:host [data-quo-card] p {
  max-width: var(--signal-measure);
  margin: 0 0 var(--signal-space-3);
  font-size: var(--signal-size-lead);
  line-height: 1.5;
  text-wrap: pretty;
}
.signal-body {
  max-width: var(--signal-measure);
  margin: 0 0 var(--signal-space-3);
  text-wrap: pretty;
}
.signal-note {
  margin: var(--signal-space-3) 0 0;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.signal-points {
  max-width: var(--signal-measure);
  margin: var(--signal-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.signal-points li {
  position: relative;
  margin-bottom: var(--signal-space-3);
  padding-inline-start: 1.6rem;
}
.signal-points li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.2rem;
  top: 0.62em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--signal-accent);
  box-shadow: 0 0 12px var(--signal-glow);
}
.signal-points strong {
  color: var(--signal-text);
  font-weight: 600;
}

/* Actions: a place a reader acts is a capsule, never a box. The landing's cards are the home's own standard elements (SCREEN-7), so their title, their words and their buttons
   stand in the same rules as the parts they read as: a title, a lead, an action, the yes the accent one. */
.signal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--signal-space-5);
}
.signal-action,
:host [data-quo-card] button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 1.4rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: 999px;
  background: var(--signal-raised);
  color: var(--signal-text);
  font-family: var(--signal-font);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--signal-move-duration) var(--signal-move-easing),
    background-color var(--signal-change-duration) var(--signal-change-easing),
    box-shadow var(--signal-change-duration) var(--signal-change-easing);
}
.signal-action:hover,
:host [data-quo-card] button:hover {
  transform: translateY(-1px);
  background: var(--signal-raised-strong);
}
.signal-action-accent,
:host [data-quo-card] button[type='submit'] {
  border-color: var(--signal-accent);
  background: var(--signal-accent);
  color: var(--signal-accent-text);
  box-shadow: 0 0 28px var(--signal-glow);
}
.signal-action-accent:hover,
:host [data-quo-card] button[type='submit']:hover {
  background: color-mix(in oklab, var(--signal-accent), var(--signal-text) 12%);
}

/* The hero: the words first, the scene beside them on a halo of the accent. */
.signal-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
}
.signal-hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto 35%;
  height: 120%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--signal-accent) 13%, transparent), transparent);
  pointer-events: none;
}
.signal-hero-plain::before {
  display: none;
}
.signal-hero-row {
  position: relative;
  display: grid;
  gap: var(--signal-space-5);
  align-items: center;
}
.signal-hero-figure,
.signal-chapter-figure {
  container-type: inline-size;
  min-width: 0;
}
@media (min-width: 980px) {
  .signal-hero-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

/* A chapter: one idea, its words beside its drawing, the side alternating down the page. */
.signal-chapter {
  padding-block: clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--signal-line);
}
.signal-chapter-row {
  display: grid;
  gap: var(--signal-space-5);
  align-items: center;
}
@media (min-width: 980px) {
  .signal-chapter-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--signal-space-6);
  }
  .signal-chapter-start .signal-chapter-row {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
  .signal-chapter-start .signal-chapter-figure {
    order: -1;
  }
}

/* The world as it is: a person kept as a row in every server's table. */
.signal-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.9rem;
}
.signal-table {
  margin: 0;
  padding: 0.9rem;
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius-card);
  background: var(--signal-raised);
  box-shadow: var(--signal-shadow);
}
.signal-table-owner {
  margin-bottom: 0.6rem;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.signal-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--signal-font-mono);
  font-size: 0.72rem;
}
.signal-row td {
  padding: 0.32rem 0.25rem;
  border-top: 1px solid var(--signal-line);
  color: var(--signal-subtle);
  white-space: nowrap;
}
.signal-row-you td {
  color: var(--signal-accent);
  animation: signal-lit calc(var(--signal-pulse-duration) * 2) ease-in-out infinite;
}
@keyframes signal-lit {
  0%,
  100% {
    background: transparent;
  }
  12%,
  30% {
    background: color-mix(in oklab, var(--signal-accent) 14%, transparent);
  }
}

/* The hosts: the same heart in every device. */
.signal-hosts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-host {
  display: grid;
  gap: 0.15rem;
  padding: 1rem;
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius-card);
  background: var(--signal-raised);
}
.signal-host-name {
  color: var(--signal-text);
  font-weight: 600;
}
.signal-host-note {
  color: var(--signal-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}
.signal-device {
  width: 100%;
  max-width: 8rem;
  height: auto;
  margin-bottom: 0.4rem;
  overflow: visible;
}

/* The band: where something live is shown, set apart by depth and light, never by another theme: a ground washed with the accent, a raised room, and by night
   the accent's glow. Each theme stays whole, LOOK-3, and the organism drawn in the room wears the page's. */
.signal-band {
  padding-block: clamp(4rem, 9vw, 7rem);
  border-block: 1px solid var(--signal-line);
  background:
    radial-gradient(60% 80% at 85% 20%, color-mix(in oklab, var(--signal-accent) 12%, transparent), transparent),
    color-mix(in oklab, var(--signal-accent) 4%, var(--signal-surface));
}
.signal-band-row {
  display: grid;
  gap: var(--signal-space-5);
  align-items: start;
}
@media (min-width: 980px) {
  .signal-band-row {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--signal-space-6);
  }
}
.signal-live {
  border: 1px solid color-mix(in oklab, var(--signal-accent) 30%, var(--signal-line));
  border-radius: var(--signal-radius-large);
  background: var(--signal-raised);
  box-shadow:
    var(--signal-shadow),
    0 0 60px color-mix(in oklab, var(--signal-glow) 40%, transparent);
  overflow: hidden;
}
.signal-live-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--signal-line);
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.signal-live-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--signal-accent);
  box-shadow: 0 0 12px var(--signal-glow);
  animation: signal-breathe 2.4s ease-in-out infinite;
}
@keyframes signal-breathe {
  50% {
    opacity: 0.35;
  }
}
.signal-live-room {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--signal-space-4);
  min-height: 22rem;
  padding: var(--signal-space-4);
  text-align: center;
}
.signal-live-room[data-quo='drawn'] {
  display: block;
  padding: 0;
  text-align: start;
  min-height: 22rem;
  max-height: 38rem;
  overflow: auto;
}
.signal-live-waiting {
  max-width: 26rem;
  margin: 0;
  color: var(--signal-muted);
}
.signal-live-said {
  margin: 0;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--signal-line);
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

/* The doorway's card: a field for the link a person was given, beside the button that opens it, and a quiet way into the app they stand in. */
.signal-paste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--signal-space-2);
  width: min(100%, 28rem);
}
.signal-paste-field {
  flex: 1 1 14rem;
  min-height: 2.9rem;
  padding: 0 1rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: 999px;
  background: var(--signal-surface);
  color: var(--signal-text);
  font: inherit;
  font-family: var(--signal-font-mono);
  font-size: 0.85rem;
}
.signal-paste-field:focus-visible {
  border-color: var(--signal-accent);
  outline: 3px solid color-mix(in oklab, var(--signal-accent) 30%, transparent);
}
.signal-paste-field[aria-invalid='true'] {
  border-color: var(--signal-danger);
}
.signal-open {
  color: var(--signal-accent);
  font-weight: 600;
}

/* A room of the site where the app or a link is drawn: its own words stand until the organism draws, and what it draws are the parts below, the same the page writes. */
.signal-room {
  padding-block: clamp(2rem, 6vw, 4rem);
}
.signal-room [data-quo] {
  min-height: 24rem;
}
/* The app's room while it wakes: the state that opens for one who stands somewhere, the doorway for one who stands nowhere; the links' room likewise, its loader until a link is read, the state
   of a stranger where the url carries none (LOOK-7: a wait never says the wrong thing). */
[data-quo-app] .signal-app-doorway {
  display: none;
}
[data-quo-app][data-quo='none'] .signal-app-doorway {
  display: grid;
}
[data-quo-app][data-quo='none'] .signal-app-waking {
  display: none;
}
[data-quo-link] .signal-link-none {
  display: none;
}
[data-quo-link][data-quo='none'] .signal-link-none {
  display: grid;
}
[data-quo-link][data-quo='none'] .signal-loader {
  display: none;
}

/* The glyph (LOOK-7): a filament between two nodes, the one that asks inked, the one asked in the accent, and a pulse travelling it while the asking waits. It is drawn by its
   background alone, so the page writes it as one `span`, a tree writes it the same, and the home's loader and cards, which are standard elements, wear it as `::before`. Dashed
   to a node not yet there, it says there is nothing or no one yet; broken, that the asking failed. By night it glows, by day it is ink. */
.signal-glyph,
:host form[data-quo-card]::before,
:host [data-quo-card='reading']::before {
  content: '';
  display: block;
  box-sizing: border-box;
  width: 8em;
  height: 2em;
  font-size: 1rem;
  background:
    linear-gradient(90deg, transparent, var(--signal-accent)) 0.7em 50% / 1.6em 3px no-repeat,
    radial-gradient(circle closest-side, var(--signal-accent) 0 76%, transparent 82%) 100% 50% / 1em 1em no-repeat,
    radial-gradient(circle closest-side, var(--signal-text) 0 76%, transparent 82%) 0 50% / 1em 1em no-repeat,
    linear-gradient(var(--signal-filament), var(--signal-filament)) 50% 50% / calc(100% - 1em) 2px no-repeat;
  filter: drop-shadow(0 0 5px var(--signal-glow));
  animation: signal-glyph-travel 1.8s linear infinite;
}
@keyframes signal-glyph-travel {
  from {
    background-position:
      0.7em 50%,
      100% 50%,
      0 50%,
      50% 50%;
  }
  to {
    background-position:
      calc(100% - 1.9em) 50%,
      100% 50%,
      0 50%,
      50% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .signal-glyph,
  :host [data-quo-card='reading']::before {
    animation: none;
    background-position:
      3.2em 50%,
      100% 50%,
      0 50%,
      50% 50%;
  }
}
.signal-glyph-still,
:host form[data-quo-card]::before {
  animation: none;
  background:
    radial-gradient(circle closest-side, transparent 0 58%, var(--signal-line-strong) 62% 86%, transparent 90%) 100%
      50% / 1em 1em no-repeat,
    radial-gradient(circle closest-side, var(--signal-text) 0 76%, transparent 82%) 0 50% / 1em 1em no-repeat,
    repeating-linear-gradient(90deg, var(--signal-line-strong) 0 0.4em, transparent 0.4em 0.8em) 50% 50% /
      calc(100% - 1.4em) 2px no-repeat;
}
.signal-glyph-broken,
:host form[data-quo-card='again']::before {
  animation: none;
  background:
    radial-gradient(circle closest-side, var(--signal-danger) 0 70%, transparent 76%) 54% 50% / 0.7em 0.7em no-repeat,
    radial-gradient(circle closest-side, transparent 0 58%, var(--signal-line-strong) 62% 86%, transparent 90%) 100%
      50% / 1em 1em no-repeat,
    radial-gradient(circle closest-side, var(--signal-text) 0 76%, transparent 82%) 0 50% / 1em 1em no-repeat,
    linear-gradient(var(--signal-filament), var(--signal-filament)) 0.5em 50% / 40% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--signal-line-strong) 0 0.3em, transparent 0.3em 0.6em) calc(100% - 0.5em)
      50% / 26% 2px no-repeat;
}
.signal-glyph:dir(rtl),
:host form[data-quo-card]:dir(rtl)::before,
:host [data-quo-card='reading']:dir(rtl)::before {
  transform: scaleX(-1);
}

/* A state: the glyph over a head, for what is opening, empty, failed, a stranger, a link. The landing's consent and its words are the same state, written by the home. */
.signal-state,
:host form[data-quo-card] {
  display: grid;
  justify-items: start;
  align-content: start;
  box-sizing: border-box;
  width: min(var(--signal-measure), 100%);
  padding-block: var(--signal-space-5);
}
.signal-state .signal-glyph,
:host form[data-quo-card]::before {
  margin-bottom: var(--signal-space-4);
}
.signal-state .signal-actions,
.signal-state .signal-paste,
.signal-state .signal-app-back {
  margin-top: var(--signal-space-4);
}
.signal-state > :last-child,
.signal-intro > :last-child {
  margin-bottom: 0;
}
:host form[data-quo-card] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
}
:host form[data-quo-card] h1,
:host form[data-quo-card] p {
  flex: 0 0 100%;
}
:host form[data-quo-card]::before {
  flex: 0 0 auto;
}
:host form[data-quo-card] button {
  margin-top: var(--signal-space-4);
}

/* The loader (LOOK-7): the glyph small, its words beneath; the landing's own `reading` card is it, written by the home. */
.signal-loader,
:host [data-quo-card='reading'] {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  margin: 0;
  padding-block: var(--signal-space-5);
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
}
.signal-loader .signal-glyph,
:host [data-quo-card='reading']::before {
  font-size: 0.75rem;
}
.signal-loader-words {
  margin: 0;
}

/* A head: the eyebrow, the title, the lead and the actions of a page, a section or a state. */
.signal-intro {
  max-width: var(--signal-measure);
}
.signal-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.signal-pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0.1rem 0.65rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: 999px;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
}
.signal-pill-accent,
.signal-pill-enters {
  border-color: color-mix(in oklab, var(--signal-accent) 55%, var(--signal-line));
  background: color-mix(in oklab, var(--signal-accent) 14%, transparent);
  color: var(--signal-accent);
}
.signal-pill-waits {
  border-color: color-mix(in oklab, var(--signal-other) 60%, var(--signal-line));
  color: var(--signal-other);
}
.signal-pill-later {
  color: var(--signal-subtle);
}

/* A part numbered in the margin as a chapter is, and an entry of a list: ruled, numbered, pressed to open. */
.signal-part {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--signal-space-3);
  align-items: start;
  padding-block: var(--signal-space-4);
  border-top: 1px solid var(--signal-line);
}
.signal-part > .signal-number {
  justify-self: start;
}
.signal-part-title {
  margin: 0 0 var(--signal-space-2);
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.signal-part-body > :last-child {
  margin-bottom: 0;
}
.signal-entries {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--signal-line);
  list-style: none;
}
.signal-entries li {
  margin: 0;
  border-bottom: 1px solid var(--signal-line);
}
.signal-entry {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: var(--signal-space-3);
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: 1rem 0.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--signal-body);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--signal-change-duration) var(--signal-change-easing);
}
.signal-entry:hover {
  background: color-mix(in oklab, var(--signal-accent) 5%, transparent);
}
.signal-entry-words {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}
.signal-entry-title {
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  transition: color var(--signal-change-duration) var(--signal-change-easing);
}
.signal-entry:hover .signal-entry-title {
  color: var(--signal-accent);
}
.signal-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.signal-entry-go {
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  color: var(--signal-subtle);
  transform: rotate(-45deg);
}
.signal-entry-go:dir(rtl) {
  transform: rotate(135deg);
}
.signal-entry:hover .signal-entry-go {
  color: var(--signal-accent);
}

/* The app: the site's own page read on. Its head is an eyebrow (the place, with the live dot) beside who the person is there; its sections are chapters numbered down a filament, the
   one shown lit as a node is; its section is the page's one column. Narrow, the filament lies down and the chapters are capsules, as the head's links are. */
.signal-app {
  container-type: inline-size;
  padding-block: var(--signal-space-2) var(--signal-space-5);
}
.signal-app-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-bottom: var(--signal-space-5);
  padding-bottom: var(--signal-space-3);
  border-bottom: 1px solid var(--signal-line);
}
.signal-app-head .signal-eyebrow {
  margin: 0;
}
.signal-app-places {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-app-place {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: 999px;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.signal-app-place:hover {
  background: var(--signal-sunken);
  color: var(--signal-text);
}
.signal-app-person {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  margin-inline-start: auto;
  color: var(--signal-muted);
}
.signal-app-person strong {
  color: var(--signal-text);
  font-weight: 600;
}
.signal-app-body {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--signal-space-5) clamp(1.5rem, 5cqi, 4rem);
  align-items: start;
}
.signal-app-rail {
  position: sticky;
  top: 5.5rem;
}
.signal-app-rail ul {
  position: relative;
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-app-rail ul::before {
  content: '';
  position: absolute;
  inset-block: 0.8rem;
  inset-inline-start: 1.1rem;
  width: 2px;
  background: var(--signal-filament);
}
.signal-app-section {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: 0.35rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: start;
  text-transform: uppercase;
  cursor: pointer;
}
.signal-app-section .signal-number {
  background: var(--signal-surface);
  color: var(--signal-muted);
  font-size: 0.78rem;
  transition:
    background-color var(--signal-change-duration) var(--signal-change-easing),
    box-shadow var(--signal-change-duration) var(--signal-change-easing);
}
.signal-app-section:hover {
  color: var(--signal-text);
}
.signal-app-section[aria-current='page'] {
  color: var(--signal-text);
}
.signal-app-section[aria-current='page'] .signal-number {
  border-color: var(--signal-accent);
  background: var(--signal-accent);
  color: var(--signal-accent-text);
  box-shadow: 0 0 18px var(--signal-glow);
}
.signal-app-main {
  min-width: 0;
}
.signal-section {
  display: grid;
  gap: var(--signal-space-4);
  max-width: 52rem;
}
.signal-section > * {
  margin-block: 0;
}
.signal-app-back {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-self: start;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--signal-accent);
  font-family: var(--signal-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.signal-app-back::before {
  content: '←';
}
.signal-app-back:dir(rtl)::before {
  content: '→';
}
.signal-app-back:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
@container (max-width: 44rem) {
  .signal-app-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .signal-app-rail {
    position: static;
    overflow-x: auto;
  }
  .signal-app-rail ul {
    display: flex;
    gap: 0.3rem;
  }
  .signal-app-rail ul::before,
  .signal-app-section .signal-number {
    display: none;
  }
  .signal-app-section {
    display: block;
    width: auto;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
  }
  .signal-app-section:hover {
    background: var(--signal-sunken);
  }
  .signal-app-section[aria-current='page'] {
    background: color-mix(in oklab, var(--signal-accent) 14%, transparent);
    color: var(--signal-accent);
  }
  .signal-app-person {
    margin-inline-start: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .signal-entry,
  .signal-entry-title,
  .signal-app-section .signal-number {
    transition: none;
  }
}

/* The ladders: two, side by side, each rung climbed when a need asks for it. */
.signal-ladder-head {
  max-width: 46rem;
  margin-bottom: var(--signal-space-5);
}
.signal-ladders {
  display: grid;
  gap: var(--signal-space-5);
}
@media (min-width: 860px) {
  .signal-ladders {
    grid-template-columns: 1fr 1fr;
  }
}
.signal-ladder {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius-large);
  background: var(--signal-raised);
}
.signal-ladder-name {
  margin: 0 0 0.3rem;
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.signal-ladder-said {
  margin: 0 0 var(--signal-space-4);
  color: var(--signal-muted);
}
.signal-rungs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-rung {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.9rem;
  padding-bottom: var(--signal-space-4);
}
.signal-rung:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 1.05rem;
  top: 2.3rem;
  bottom: 0.2rem;
  width: 2px;
  background: var(--signal-filament);
}
.signal-rung-step {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1.5px solid var(--signal-line-strong);
  border-radius: 999px;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.85rem;
}
.signal-rung-marked .signal-rung-step {
  border-color: var(--signal-accent);
  background: var(--signal-accent);
  color: var(--signal-accent-text);
  box-shadow: 0 0 18px var(--signal-glow);
}
.signal-rung-words p {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.signal-rung-name {
  color: var(--signal-text);
  font-weight: 600;
}
.signal-closing {
  max-width: 46rem;
  margin: var(--signal-space-5) 0 0;
  color: var(--signal-text);
  font-size: var(--signal-size-lead);
  line-height: 1.5;
}

/* The technical register: code where a figure would stand, on the sunken ground of its theme, in mono. */
.signal-codes {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.signal-code {
  margin: 0;
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius-card);
  background: var(--signal-sunken);
  overflow: hidden;
}
.signal-code-name {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--signal-line);
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.signal-code pre {
  margin: 0;
  padding: 1rem 1.1rem 1.2rem;
  overflow-x: auto;
  color: var(--signal-text);
  font-family: var(--signal-font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
}

/* Scripts the latin faces do not draw: no letter-spacing where letters join or stand as one (Arabic, Hebrew, the CJK), and no capitals where a script has none. */
.signal-site:lang(ar) .signal-eyebrow,
.signal-site:lang(ar) .signal-head-link,
.signal-site:lang(ar) .signal-switch,
.signal-site:lang(ar) .signal-title,
.signal-site:lang(ar) .signal-chapter-title,
.signal-site:lang(ar) .signal-brand-name,
.signal-site:lang(ar) .signal-table-owner,
.signal-site:lang(ar) .signal-code-name,
.signal-site:lang(ar) .signal-live-bar,
.signal-site:lang(ar) .signal-note,
.signal-site:lang(he) .signal-eyebrow,
.signal-site:lang(hi) .signal-eyebrow,
.signal-site:lang(hi) .signal-note,
.signal-site:lang(hi) .signal-head-link,
.signal-site:lang(hi) .signal-live-bar,
.signal-site:lang(hi) .signal-table-owner,
.signal-site:lang(ar) .signal-pill,
.signal-site:lang(hi) .signal-pill,
.signal-site:lang(ja) .signal-eyebrow,
.signal-site:lang(zh) .signal-eyebrow,
.signal-site:lang(ja) .signal-title,
.signal-site:lang(zh) .signal-title,
.signal-site:lang(ja) .signal-chapter-title,
.signal-site:lang(zh) .signal-chapter-title {
  letter-spacing: 0;
}
.signal-site:lang(ar) .signal-title,
.signal-site:lang(ar) .signal-chapter-title {
  line-height: 1.35;
}
.signal-site:lang(ja) .signal-title,
.signal-site:lang(zh) .signal-title,
.signal-site:lang(ja) .signal-chapter-title,
.signal-site:lang(zh) .signal-chapter-title {
  line-height: 1.25;
  line-break: strict;
}
.signal-site:lang(ar) .signal-lead,
.signal-site:lang(ar) .signal-body,
.signal-site:lang(ar) .signal-points li {
  line-height: 1.85;
}
.signal-site:lang(ja) .signal-body,
.signal-site:lang(zh) .signal-body,
.signal-site:lang(ja) .signal-lead,
.signal-site:lang(zh) .signal-lead {
  line-height: 1.85;
}

/* The foot. */
.signal-foot {
  padding-block: var(--signal-space-6) var(--signal-space-5);
  border-top: 1px solid var(--signal-line);
}
.signal-foot-row {
  display: grid;
  gap: var(--signal-space-3);
}
@media (min-width: 860px) {
  .signal-foot-row {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
}
.signal-foot-line {
  margin: 0;
  color: var(--signal-muted);
}
.signal-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--signal-font-mono);
  font-size: 0.8rem;
}
.signal-foot-links a {
  color: var(--signal-muted);
  text-decoration: none;
}
.signal-foot-links a:hover {
  color: var(--signal-accent);
}
.signal-foot-held {
  grid-column: 1 / -1;
  margin: var(--signal-space-3) 0 0;
  color: var(--signal-subtle);
  font-family: var(--signal-font-mono);
  font-size: 0.75rem;
}

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

@media (prefers-reduced-motion: reduce) {
  .signal-row-you td,
  .signal-live-dot {
    animation: none;
  }
  .signal-action {
    transition: none;
  }
}

/* CASE-2. The roads the link page offers beside accepting here, naming no app: the link to a home, a copy of it and its QR, set apart by one rule above and dressed as the actions are; the QR keeps its own light ground in either theme, which a scanner reads. */
:host [data-quo-card] a[data-quo-road='home'] {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin: 0 0.75rem var(--signal-space-3) 0;
  padding: 0 1.4rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: 999px;
  background: var(--signal-raised);
  color: var(--signal-text);
  font-family: var(--signal-font);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
:host [data-quo-card] a[data-quo-road='home']:hover {
  background: var(--signal-raised-strong);
}
:host [data-quo-card] button[data-quo-road='copy'] {
  margin: 0 0.75rem var(--signal-space-3) 0;
}
:host [data-quo-card] [data-quo-road='said'] {
  margin: 0 0 var(--signal-space-3);
  color: var(--signal-accent);
  font-size: 0.9rem;
}
:host [data-quo-card] svg[data-quo-road='qr'] {
  display: block;
  width: min(100%, 11rem);
  height: auto;
  margin: var(--signal-space-3) 0 var(--signal-space-2);
  border: 1px solid var(--signal-line-strong);
  border-radius: 0.75rem;
}

/* A destructive action (LOOK-12): the same pill, in the danger ink. */
.signal-action-danger {
  border-color: var(--signal-danger);
  color: var(--signal-danger);
}
.signal-action-danger:hover {
  background: color-mix(in oklab, var(--signal-danger) 12%, transparent);
  color: var(--signal-danger);
}

/* A conversation (LOOK-12): who said it above what was said, each line ruled under the last. */
.signal-saying {
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-said {
  display: grid;
  gap: 0.2rem;
  padding: var(--signal-space-2) 0;
  border-bottom: 1px solid var(--signal-line);
}
.signal-said strong {
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The line above a place (SCREEN-7): whose page it is and since when the standing is held, in quiet mono under the head. */
.signal-app-line {
  flex: 0 0 100%;
  margin: 0;
  color: var(--signal-subtle);
  font-family: var(--signal-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A piece of a place's page (LOOK-12): a part with no number in the margin, ruled from the one above; its fields are terms over their words. */
.signal-piece {
  display: grid;
  gap: var(--signal-space-3);
  padding-block: var(--signal-space-4);
  border-top: 1px solid var(--signal-line);
}
.signal-piece > * {
  margin: 0;
}
.signal-fields {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.35rem var(--signal-space-4);
  margin: 0;
}
.signal-fields dt {
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.signal-fields dd {
  margin: 0;
  color: var(--signal-text);
}
/* Signal's drawings: the reach grammar inked by classes, and its motion on one clock. By night the filaments glow; by day they are ink and nothing glows.
   A pulse is a short dash on a long gap, so it travels every filament at one speed; a scene stands still, its end state shown, for a reader who asks for less motion. */

.signal-scene {
  width: 100%;
}
.signal-upright {
  display: none;
}
@container (max-width: 520px) {
  .signal-wide {
    display: none;
  }
  .signal-upright {
    display: block;
    max-width: 26rem;
    margin-inline: auto;
  }
}
.signal-drawing {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.signal-t-name {
  fill: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.signal-t-place {
  fill: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.signal-t-say {
  fill: var(--signal-body);
  font-family: var(--signal-font);
  font-size: 14.5px;
  font-weight: 500;
}
.signal-t-tag {
  fill: var(--signal-text);
  font-family: var(--signal-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.signal-filament {
  stroke: var(--signal-filament);
  stroke-width: 2;
  stroke-linecap: round;
}
.signal-pulse {
  stroke: var(--signal-accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--signal-glow));
  animation: signal-travel var(--signal-pulse-duration) linear infinite;
}
@keyframes signal-travel {
  from {
    stroke-dashoffset: 10;
  }
  to {
    stroke-dashoffset: -1000;
  }
}
.signal-beat-0,
.signal-beat-0 .signal-cell {
  animation-delay: 0s;
}
.signal-beat-1,
.signal-beat-1 .signal-cell {
  animation-delay: -0.55s;
}
.signal-beat-2,
.signal-beat-2 .signal-cell {
  animation-delay: -1.1s;
}
.signal-beat-3,
.signal-beat-3 .signal-cell {
  animation-delay: -1.7s;
}
.signal-beat-4,
.signal-beat-4 .signal-cell {
  animation-delay: -2.2s;
}
.signal-beat-5,
.signal-beat-5 .signal-cell {
  animation-delay: -2.75s;
}

.signal-halo {
  fill: var(--signal-glow);
  opacity: 0.32;
  filter: blur(22px);
}
.signal-plate {
  fill: var(--signal-raised);
  stroke: var(--signal-accent);
  stroke-width: 1.6;
  filter: drop-shadow(0 10px 22px rgba(15, 17, 21, 0.1));
}
.signal-tip-disc {
  fill: var(--signal-raised);
  stroke: var(--signal-line-strong);
  stroke-width: 1.2;
}
.signal-person {
  fill: var(--signal-body);
}
.signal-stranger {
  fill: var(--signal-subtle);
}

.signal-lobe-plate {
  fill: var(--signal-raised);
  stroke: var(--signal-line-strong);
  stroke-width: 1.2;
}
.signal-cell {
  fill: var(--signal-accent);
  opacity: 0.35;
  animation: signal-write calc(var(--signal-pulse-duration) * 1.25) ease-in-out infinite;
}
@keyframes signal-write {
  0%,
  70%,
  100% {
    opacity: 0.3;
  }
  80% {
    opacity: 1;
  }
}

.signal-edge rect {
  stroke: var(--signal-line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}
.signal-edge .signal-t-tag {
  fill: var(--signal-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.signal-ring {
  stroke: var(--signal-text);
  stroke-width: 2;
  opacity: 0.55;
}
.signal-refused {
  stroke: var(--signal-subtle);
  stroke-width: 2;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}
.signal-stop {
  fill: var(--signal-danger);
}

.signal-chip-invitation rect {
  fill: var(--signal-accent);
  filter: drop-shadow(0 0 10px var(--signal-glow));
}
.signal-chip-invitation .signal-t-tag {
  fill: var(--signal-accent-text);
}
.signal-chip-faculty rect {
  fill: var(--signal-other);
  filter: drop-shadow(0 0 10px var(--signal-glow));
}
.signal-chip-faculty .signal-t-tag {
  fill: #ffffff;
}

/* A standing: the invitation travels from the one who gives it to the one who takes it, and the asks begin. */
.signal-invitation {
  animation: signal-invite-wide 7s var(--signal-move-easing) infinite;
}
.signal-upright .signal-invitation {
  animation-name: signal-invite-upright;
}
@keyframes signal-invite-wide {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  38% {
    transform: translate(-340px, 0);
    opacity: 1;
  }
  46%,
  100% {
    transform: translate(-340px, 0);
    opacity: 0;
  }
}
@keyframes signal-invite-upright {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  38% {
    transform: translate(0, -170px);
    opacity: 1;
  }
  46%,
  100% {
    transform: translate(0, -170px);
    opacity: 0;
  }
}

/* Code arrives as any answer does, and the organism reaches someone new. */
.signal-arrival {
  stroke: var(--signal-other);
  stroke-width: 1.6;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  opacity: 0.7;
}
.signal-carried {
  animation: signal-carry-wide 8s var(--signal-move-easing) infinite;
}
.signal-upright .signal-carried {
  animation-name: signal-carry-upright;
}
@keyframes signal-carry-wide {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  30% {
    transform: translate(-310px, 150px);
    opacity: 1;
  }
  36%,
  100% {
    transform: translate(-310px, 150px);
    opacity: 0;
  }
}
@keyframes signal-carry-upright {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  30% {
    transform: translate(-100px, 220px);
    opacity: 1;
  }
  36%,
  100% {
    transform: translate(-100px, 220px);
    opacity: 0;
  }
}
.signal-grow {
  stroke: var(--signal-accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--signal-glow));
  animation: signal-grow 8s var(--signal-move-easing) infinite;
}
@keyframes signal-grow {
  0%,
  34% {
    stroke-dasharray: 0 1000;
    opacity: 1;
  }
  58%,
  92% {
    stroke-dasharray: 700 1000;
    opacity: 1;
  }
  100% {
    stroke-dasharray: 700 1000;
    opacity: 0;
  }
}
.signal-fresh {
  animation: signal-fresh 8s ease-out infinite;
}
@keyframes signal-fresh {
  0%,
  52% {
    opacity: 0;
  }
  62%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* The hosts' hearts beat together: one organism, whatever holds it. */
.signal-device-body {
  fill: none;
  stroke: var(--signal-line-strong);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.signal-device .signal-halo {
  stroke: none;
  opacity: 0.5;
  filter: blur(6px);
}
.signal-core {
  fill: var(--signal-accent);
  stroke: none;
  animation: signal-beat var(--signal-pulse-duration) ease-in-out infinite;
}
@keyframes signal-beat {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-pulse,
  .signal-invitation,
  .signal-carried {
    display: none;
  }
  .signal-cell,
  .signal-core {
    animation: none;
    opacity: 1;
  }
  .signal-grow {
    animation: none;
    stroke-dasharray: none;
  }
  .signal-fresh {
    animation: none;
    opacity: 1;
  }
}

/* A drawing's words in a script whose letters join or stand as one carry no letter-spacing and no capitals. */
.signal-site:lang(ar) .signal-t-name,
.signal-site:lang(ar) .signal-t-place,
.signal-site:lang(ar) .signal-t-tag,
.signal-site:lang(ar) .signal-edge .signal-t-tag,
.signal-site:lang(ja) .signal-t-place,
.signal-site:lang(zh) .signal-t-place,
.signal-site:lang(ja) .signal-edge .signal-t-tag,
.signal-site:lang(zh) .signal-edge .signal-t-tag {
  letter-spacing: 0;
  text-transform: none;
}