@layer lf-reset, lf-base, lf-layouts, lf-shadow, lf-overrides, lf-state;
@layer lf-base {



:where(:root) :is(.lf-ui-face, .button, .field) {
  font-family: var(--sans);
  font-size: var(--t-5);
  line-height: var(--lf-ui-lh);
  color: var(--ink);
}
:where(
  :root .lf-ui-face,
  :root .button,
  :root .field,
  :root main :is(button, input, select, textarea)
) {
  font: var(--t-5) / var(--lf-ui-lh) var(--sans);
  font-feature-settings: normal;
  font-variation-settings: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
}

.lf-quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

lf-suggestion:not([data-lf-state]) > :is(lf-old, lf-new) > .lf-quiet {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  display: inline-block;
  margin-right: 5px;
}
@media screen {
  html:root lf-suggestion:not([data-lf-state]) > :is(lf-old, lf-new) > .lf-quiet {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    margin-right: 0;
  }
}

.lf-error {
  border: 1px solid var(--danger);
  background: var(--danger-tint);
  color: var(--danger-ink);
  border-radius: var(--r);
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: var(--t-5);
  font-variant-numeric: tabular-nums;
  white-space: normal;
  --lf-block-frame: 1;
}

.lf-error pre {
  margin: 8px 0 0;
  white-space: pre;
}
@media print {
  .lf-error pre {
    white-space: pre-wrap;
  }
}

.lf-key-badge {
  box-sizing: border-box;
  min-width: var(--lf-key-badge-size);
  height: var(--lf-key-badge-size);
  padding: 0 4px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-s);
  background: var(--chip);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-6);
  
  line-height: calc(var(--lf-key-badge-size) - 2px);
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.lf-key-badge:empty {
  display: none;
}

.lf-binding-seat {
  position: absolute;
}
.lf-external-mark {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-inline-start: 0.24em;
  vertical-align: 0.03em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}


:where([data-lf-focus-visible]) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-gap);
}

:where(*) {
  scroll-margin-top: max(0px, var(--lf-top) - var(--lf-top-covered, var(--lf-top)));
}

:where(:focus, [data-lf-focus]) {
  scroll-margin: var(--focus-ring-landing);
}

:where(:focus, [data-lf-focus]) {
  scroll-margin-top: calc(
    var(--lf-top) - var(--lf-top-covered, var(--lf-top)) +
      var(
        --lf-head-inset,
        calc(var(--focus-ring-landing) + var(--lf-landing-room, 0px))
      ) -
      var(--lf-landing-room, 0px)
  );
}
[data-lf-offer]:where(:not([data-lf-offer=""])) {
  cursor: pointer;
}
[data-lf-offer]:where(:not([data-lf-offer=""])):hover:where(
    :not([aria-disabled="true"], :disabled)
  ) {
  box-shadow: var(--offer-hover-shadow);
}
[data-lf-offer]:where(:not([data-lf-offer=""])):is([aria-disabled="true"], :disabled) {
  cursor: default;
  opacity: 0.55;
}
[data-lf-offer]:where(:not([data-lf-offer=""]))[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-gap);
}

[data-lf-offer]:where(
  :not(
    [data-lf-offer=""],
    [data-lf-offer="checkbox"],
    [data-lf-offer="radio"],
    .lf-mark-note
  )
),
.lf-btn,
.button,
button.lf-inline-action,
.lf-react,
.lf-margin-entry,
.lf-command-reference-command,
.lf-quote {
  min-width: var(--aim-floor);
  min-height: var(--lf-face-floor, var(--aim-floor));
}

@property --lf-face-floor {
  syntax: "*";
  inherits: false;
}
:where(
  .lf-btn,
  .button,
  button.lf-icon-action,
  .lf-compose-submit,
  .lf-compose-dictate,
  button.lf-inline-action,
  button.lf-mark-action,
  button.lf-fp-face
) {
  --lf-face-floor: auto;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    inset: min(0px, (100% - var(--aim-floor)) / 2);
  }
}

:is(.lf-icon-action, .lf-mark-action).lf-ui::part(button)::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - var(--aim-floor)) / 2);
}

summary {
  align-content: center;
}

@media (pointer: coarse) {
  :is(input, textarea, leaf-text, select) {
    font-size: max(var(--entry-floor), 1em) !important;
  }
}

.lf-thread-seat {
  display: none;
  margin-top: var(--sp-2);
  overflow-wrap: anywhere;
}
.lf-page-thread {
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  padding: var(--sp-1);
  font-family: var(--sans);
  font-size: var(--t-5);
  line-height: var(--lf-ui-lh);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.lf-page-thread:not(.lf-primary-part)[data-lf-focus-within] {
  outline: none;
  border-radius: var(--r);
  --lf-ground: var(--focus-surface);
  background: var(--lf-ground);
}

.lf-page-thread[data-lf-focus-visible] {
  outline: none;
}
.lf-page-thread[data-lf-focus-visible]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
}

@media (forced-colors: active) {
  .lf-page-thread:not(.lf-primary-part)[data-lf-focus-within] {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--focus-ring-w));
  }
}
.lf-say {
  display: none;
  align-items: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.lf-say leaf-text {
  flex: 1;
  min-width: 0;
}
.lf-thread-seat > .lf-say {
  margin-top: 0;
}

:is(
  .lf-page-thread:not(.lf-primary-part, [inert])
    + :is(.lf-page-thread:not(.lf-primary-part, [inert]), .lf-resolved-threads),
  .lf-thread-seat
    > .lf-page-thread:not([inert])
    ~ :is(.lf-page-thread:not([inert]), .lf-resolved-threads)
) {
  margin-top: var(--sp-3);
}
:is(
  .lf-page-thread:not(.lf-primary-part, [inert])
    + :is(.lf-page-thread:not(.lf-primary-part, [inert]), .lf-resolved-threads),
  .lf-thread-seat
    > .lf-page-thread:not([inert])
    ~ :is(.lf-page-thread:not([inert]), .lf-resolved-threads)
)::before {
  content: "";
  position: absolute;
  inset-inline: var(--sp-1);
  inset-block-start: calc(-1 * var(--sp-2));
  border-top: 1px solid var(--rule);
  pointer-events: none;
}


:root,
.lf-page-thread,
.lf-fab-bar {
  --lf-thread-text-inset: 13px;
  --lf-group-ring-end: 6px;
  --lf-msg-head-height: 28px;
  --lf-msg-body-gap: 4px;
  
  --lf-msg-control-size: var(--lf-icon-action-face);
  --lf-msg-control-width: max(var(--lf-msg-control-size), var(--aim-floor));
  --lf-msg-edit-gap: 4px;
  
  --lf-msg-controls-width: calc(
    2 * var(--lf-msg-control-width) + var(--lf-msg-edit-gap)
  );
  --lf-msg-edit-width: calc(var(--lf-msg-controls-width) + var(--sp-2));
  
  --lf-news-count-room: 1.6em;
  
  --lf-news-width: calc(5rem + var(--lf-news-count-room));
}
.lf-thread-transcript {
  min-width: 0;
  padding-inline: var(--lf-thread-text-inset) 0;
}

.lf-thread-content {
  display: flow-root;
  position: relative;
  min-width: 0;
  anchor-scope: --lf-thread-headline;
  --lf-thread-action-room: max(var(--lf-msg-head-height), var(--aim-floor));
  --lf-thread-notice-room: var(--lf-msg-head-height);
  --lf-thread-message-control-room: 0px;
}


@property --lf-msg-ground {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --lf-msg-arrival {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.lf-msg {
  margin: 16px 0 0;
  --lf-msg-rest-ground: transparent;
  --lf-msg-ground: color-mix(
    in srgb,
    var(--hi-tint) calc(var(--lf-msg-arrival) * 100%),
    var(--lf-msg-rest-ground)
  );
  background-color: var(--lf-msg-ground);
}
.lf-thread-transcript > .lf-msg:nth-child(1 of .lf-msg, .lf-thread-checkpoint) {
  margin-top: 0;
}

:is(.lf-msg-head, .lf-thread-working-head) {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: var(--lf-msg-head-height);
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--t-6);
  --lf-msg-name-size: 13px;
}
:is(.lf-msg-head, .lf-thread-working-head) .lf-msg-meta {
  flex: 0 1 auto;
  overflow: hidden;
}

.lf-msg > .lf-msg-head:has(> .lf-primary-news) {
  position: relative;
  --lf-msg-head-room: var(--lf-news-width);
  padding-inline-end: var(--lf-msg-head-room);
}
.lf-msg:has(> .lf-msg-body > .lf-msg-editor) > .lf-msg-head:has(> .lf-primary-news) {
  --lf-msg-control: var(--lf-msg-edit-width);
}
.lf-primary-part {
  position: relative;
  border-radius: var(--r);
}
.lf-primary-part[data-lf-part="reply"] {
  padding-block-start: 28px;
}
.lf-primary-news {
  position: absolute;
  box-sizing: border-box;
  inset-block-start: 0;
  inset-inline-end: var(--lf-msg-control, 0px);
  max-inline-size: var(--lf-news-width);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lf-msg-head .lf-msg-sending {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(.lf-msg-head, .lf-thread-working-head) b {
  flex: 0 0 auto;
  max-inline-size: 40%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--lf-msg-name-size);
  font-weight: 600;
  color: var(--ink);
}

.lf-thread-checkpoint {
  margin-block: 16px;
  anchor-name: var(--lf-fold-head);
}
.lf-thread-checkpoint[data-expanded="true"] {
  margin-block-end: 8px;
}
.lf-thread-transcript > .lf-msg[data-lf-summary] {
  margin-block: 8px;
  anchor-name: var(--lf-fold-foot);
}

.lf-thread-transcript > .lf-msg[hidden="until-found"] {
  margin-block: 0;
}

.lf-thread-checkpoint[data-expanded="true"]::before {
  content: "";
  position: absolute;
  inset-block-start: calc(anchor(var(--lf-fold-head) start) - 7px);
  inset-block-end: calc(anchor(var(--lf-fold-foot) end) - 7px);
  inset-inline-start: calc(anchor(var(--lf-fold-head) start) - 12px);
  inset-inline-end: calc(anchor(var(--lf-fold-head) end) - var(--lf-group-ring-end));
  border: 1px solid var(--rule);
  border-radius: var(--r);
  pointer-events: none;
}
.lf-summary-checkpoint {
  padding-block: 4px;
}

.lf-summary-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.lf-summary-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font: 500 11px/1.3 var(--sans);
}
.lf-summary-text {
  color: var(--ink-2);
  font-size: var(--t-5);
  line-height: 1.5;
  overflow-wrap: anywhere;
  user-select: text;
}
.lf-summary-text > :first-child {
  margin-top: 0;
}
.lf-summary-text > :last-child {
  margin-bottom: 0;
}

.lf-thread-disclosure {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--aim-floor);
  max-inline-size: 100%;
  flex-shrink: 0;
  padding: 4px 0;
}

:is(.lf-msg-head, .lf-thread-working-head):has(> .lf-summary-expand) {
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
  row-gap: 0;
}
:is(.lf-msg-head, .lf-thread-working-head) > .lf-thread-disclosure {
  padding-block: 0;
}

:is(.lf-msg-head, .lf-thread-working-head) > .lf-progress-expand {
  margin-inline-start: auto;
}
.lf-summary-required {
  margin-top: 6px;
  color: var(--turn-ink);
  font: 600 11px/1.4 var(--sans);
}

.lf-thread-working {
  margin-top: 16px;
}
.lf-thread-working-words {
  margin-top: var(--lf-msg-body-gap);
  inline-size: fit-content;
  max-inline-size: 100%;
  font: var(--msg-font);
  
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.lf-thread-working[data-lf-live] .lf-thread-working-words {
  animation: lf-sheen 2s ease-in-out infinite alternate;
}

.lf-thread-name-pending {
  font-weight: 400;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  animation: lf-sheen 2s ease-in-out infinite alternate;
}

@keyframes lf-sheen {
  from,
  to {
    color: var(--ink);
    mask-image: linear-gradient(
      110deg,
      rgb(0 0 0 / var(--lf-sheen-rest, 0.5)) 42%,
      #000 50%,
      rgb(0 0 0 / var(--lf-sheen-rest, 0.5)) 58%
    );
    mask-size: 200% 100%;
  }
  from {
    mask-position: 100% 0;
  }
  to {
    mask-position: 0% 0;
  }
}
@media (forced-colors: active) {
  @keyframes lf-sheen {
    from,
    to {
      mask-image: none;
    }
  }
}

.lf-msg-head > .lf-held-header-item {
  flex: 0 0 var(--lf-held-header-width);
  max-inline-size: var(--lf-held-header-width);
  box-sizing: border-box;
  overflow: hidden;
}
.lf-msg-meta.lf-held-header-item > time {
  flex-shrink: 0;
}

.lf-thread-controls {
  position: absolute;
  position-anchor: --lf-thread-headline;
  inset-inline-start: calc(anchor(right) + var(--sp-2));
  inset-block-start: anchor(center);
  translate: 0 -50%;
  inline-size: var(--lf-thread-action-room);
  block-size: var(--lf-thread-action-room);
  display: flex;
  align-items: center;
  font-size: var(--t-6);
}
.lf-thread-content:has(> .lf-thread-controls)
  > .lf-thread-transcript
  > .lf-msg:nth-child(1 of .lf-msg, .lf-thread-checkpoint)
  > .lf-msg-head {
  anchor-name: --lf-thread-headline;
  margin-inline-end: calc(var(--lf-thread-action-room) + var(--sp-2));
  padding-inline-end: calc(
    var(--lf-thread-notice-room) + var(--sp-2) + var(--lf-thread-message-control-room)
  );
}
.lf-thread-content:has(> .lf-thread-controls)
  > .lf-thread-transcript
  > .lf-thread-checkpoint:nth-child(1 of .lf-msg, .lf-thread-checkpoint)
  > .lf-summary-checkpoint
  > .lf-summary-header {
  anchor-name: --lf-thread-headline;
  min-height: var(--lf-thread-action-room);
  box-sizing: border-box;
  margin-inline-end: calc(var(--lf-thread-action-room) + var(--sp-2));
  padding-inline-end: calc(var(--lf-thread-notice-room) + var(--sp-2));
}
.lf-thread-content:has(> .lf-thread-controls):has(
    > .lf-thread-transcript
      > .lf-msg:nth-child(1 of .lf-msg, .lf-thread-checkpoint)
      > :is(.lf-react-strip, .lf-msg-control)
  ) {
  --lf-thread-message-control-room: calc(var(--lf-msg-control-width) + var(--sp-2));
}
@media (hover: hover) and (pointer: fine) {
  .lf-thread-content:has(> .lf-thread-controls):has(
      > .lf-thread-transcript
        > .lf-msg:nth-child(1 of .lf-msg, .lf-thread-checkpoint)
        > .lf-msg-copy
    ) {
    --lf-thread-message-control-room: calc(var(--lf-msg-controls-width) + var(--sp-2));
  }
}
.lf-thread-content:has(> .lf-thread-controls):has(
    > .lf-thread-transcript
      > .lf-msg:nth-child(1 of .lf-msg, .lf-thread-checkpoint)
      > .lf-msg-body
      > .lf-msg-editor
  ) {
  --lf-thread-message-control-room: calc(var(--lf-msg-edit-width) + var(--sp-2));
}
.lf-thread-content:has(> .lf-thread-controls)
  > .lf-thread-transcript
  > .lf-msg:nth-child(1 of .lf-msg, .lf-thread-checkpoint)
  > .lf-msg-head {
  anchor-name: --lf-thread-headline, --lf-msg-head;
}
.lf-thread-meta-actions {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}
.lf-thread-controls > .lf-thread-meta-actions {
  min-height: var(--lf-thread-action-room);
}

.lf-thread-content > .lf-thread-news {
  position: absolute;
  position-anchor: --lf-thread-headline;
  inset-inline-start: calc(
    anchor(left) + var(--lf-thread-news-start, 0px) + var(--sp-2)
  );
  inset-block-start: anchor(center);
  translate: 0 -50%;
  inline-size: max-content;
  max-inline-size: max(
    0px,
    min(
      calc(
        anchor-size(width) - var(--lf-thread-news-start, 0px) - var(--sp-2) -
          var(--lf-thread-message-control-room)
      ),
      calc(
        var(--lf-thread-news-visible-end, anchor-size(width)) -
          var(--lf-thread-news-start, 0px) - var(--sp-2)
      )
    )
  );
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--lf-thread-action-room);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}

.lf-thread-news {
  flex: none;
  align-self: center;
  white-space: nowrap;
}
button.lf-thread-news {
  font-size: var(--t-6);
}

.lf-thread-news > span {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  row-gap: 1lh;
  block-size: 1.5lh;
  padding-block-end: 0.5lh;
  margin-block-end: -0.5lh;
  overflow: visible clip;
}
.lf-thread-news > span > span {
  flex: none;
  white-space: pre;
}
.lf-thread-news > span > :first-child {
  flex-shrink: 1;
  min-inline-size: 0;
  padding-block-end: 0.5lh;
  margin-block-end: -0.5lh;
  overflow: clip;
  text-overflow: ellipsis;
}

.lf-thread-news[data-room] > span > :first-child {
  margin-inline-end: -1px;
}

.lf-thread-content > .lf-thread-news,
button.lf-primary-news {
  padding-inline-end: var(--lf-news-count-room);
}
.lf-thread-news > span[data-lf-more]::after {
  content: attr(data-lf-more) / "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--lf-news-shown, 100%);
  inline-size: var(--lf-news-count-room);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.lf-thread-news > span[data-lf-short] > span {
  visibility: hidden;
}
.lf-thread-news > span[data-lf-short]::before {
  content: attr(data-lf-short) / "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}
.lf-thread-news > span[data-lf-short]::after {
  content: none;
}

.lf-thread-news > span,
.lf-thread-news > span::before,
.lf-thread-news > span::after {
  text-decoration: inherit;
}
.lf-seat-news {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.lf-msg-head time {
  color: var(--muted-2);
}
.lf-msg-head :is(.lf-edited, .lf-msg-kept) {
  color: var(--muted-2);
}

.lf-msg-head .lf-msg-failure {
  color: var(--warn-ink);
  font-weight: 600;
}

.lf-msg-head .lf-msg-leaves {
  color: var(--ink-2);
  font-weight: 600;
}

.lf-thread-todos {
  margin: 0 0 var(--sp-2);
  padding: 0 0 0 var(--lf-thread-text-inset);
  list-style: none;
}
.lf-thread-todo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-6);
}
.lf-thread-todo-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink-2);
  font-weight: 600;
}
.lf-thread-todo > .lf-icon-action {
  flex: none;
  white-space: nowrap;
}


:root {
  --lf-text-scroll-clearance: 8px;
  --lf-text-scroll-track: 15px;
}

:where(.lf-thread-transcript, .lf-markdown-body, .lf-markdown-words) {
  --lf-reading-face: 1;
}
:host {
  --lf-reading-face: initial;
}

:where(:root, .lf-thread-transcript) :is(code, samp, kbd:where(:not(.lf-key-badge))) {
  overflow-wrap: anywhere;
}

:where(:root, .lf-thread-transcript) pre {
  overflow: auto hidden;
  contain: inline-size;
}

@media screen {
  .lf-text-scroller::after,
  :where(:root, .lf-thread-transcript) pre::after {
    content: "";
    float: inline-start;
    inline-size: 100%;
    block-size: var(--lf-text-scroll-track);
    grid-column: 1 / -1;
  }
  :where(:root, .lf-thread-transcript) pre::after {
    block-size: var(--lf-text-scroll-clearance);
  }
  
  :where(:root, .lf-thread-transcript) table {
    padding-block-end: var(--lf-text-scroll-clearance);
  }
}

@media print {
  :where(:root, .lf-thread-transcript) pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}


:where(:root, .lf-thread-transcript) table {
  display: block;
  overflow: auto hidden;
  
  --lf-table-edge: max(var(--focus-ring-room), var(--raise-1-blur));
  container-type: inline-size;
}
:where(:root, .lf-thread-transcript) table > * {
  --lf-top: 0px;
}

:where(:root, .lf-thread-transcript) caption {
  position: sticky;
  --lf-head-inset: 0px;
  inset-inline-start: 0;
  max-inline-size: 100cqi;
}

:where(:root, .lf-thread-transcript) :where(th, td)[data-lf-focus-visible] {
  outline-offset: calc(-1 * var(--focus-ring-w));
}


.lf-media-frame {
  border-radius: var(--r);
  box-shadow:
    0 0 0 1px var(--lf-ring, var(--border-2)),
    var(--raise-1);
}

@media (forced-colors: active) {
  .lf-media-frame {
    outline: 1px solid CanvasText;
  }
}

@container style(--lf-reading-face: 1) {
  a {
    color: var(--accent);
    text-underline-offset: var(--link-underline-offset);
    text-decoration-color: var(--link-underline);
  }
  a:hover {
    text-decoration-color: currentColor;
  }
  
  :is(code, samp, kbd:where(:not(.lf-key-badge))) {
    background: var(--code-bg);
    border-radius: var(--code-inline-r);
    padding: var(--code-inline-pad);
    font-size: var(--code-inline-size);
    font-family: var(--mono);
    box-decoration-break: slice;
    display: inline;
    contain: none;
    isolation: auto;
  }
  
  kbd:where(:not(.lf-key-badge)) {
    border: 1px solid var(--border-2);
    background: var(--chip);
  }
  
  pre {
    background: var(--pre-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--r);
    padding: 12px var(--pre-inset);
    font-size: var(--code-size);
    line-height: var(--code-line);
    font-family: var(--mono);
    color: var(--code-ink);
    font-variant-ligatures: none;
  }
  pre > :is(code, samp, kbd) {
    border: 0;
    background: none;
    padding: 0;
    font-size: 100%;
  }
  blockquote {
    margin: 18px 0;
    padding: 2px var(--quote-inset);
    border-left: var(--quote-rule);
    color: var(--muted);
    font-style: var(--quote-style);
    --lf-block-frame: 1;
  }
  table {
    border-collapse: collapse;
    font: var(--t-5)/1.5 var(--sans);
    margin: 18px 0;
    font-variant-numeric: tabular-nums;
  }
  
  :is(th, td) :is(code, samp):not(pre *) {
    padding: 0;
    background: none;
    font-size: 0.9em;
  }
  caption {
    text-align: start;
    font-size: var(--t-6);
    color: var(--muted);
    margin-bottom: 6px;
  }
  :is(th, td) {
    text-align: start;
    padding: 8px 14px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
    --lf-block-frame: 1;
  }
  @media screen and (max-width: 640px) {
    :is(th, td) {
      padding-inline: 8px;
    }
  }
  
  tr > :first-child {
    padding-inline-start: var(--lf-table-edge);
  }
  tr > :last-child {
    padding-inline-end: var(--lf-table-edge);
  }
  
  th:not([scope="row"]) {
    font-size: var(--t-working-label);
    color: var(--muted);
    font-weight: 600;
    border-bottom-color: var(--border-2);
  }
  th[scope="row"] {
    font-weight: 600;
  }
  
  table:has(> * > tr > th[scope="row"]:first-child) {
    --lf-more-fade-start: 0px;
  }
  table:has(> * > tr > th[scope="row"]:first-child) > * > tr > :first-child {
    position: sticky;
    inset-inline-start: 0;
    background: var(--lf-ground);
  }
  @media screen {
    table:has(> * > tr > th[scope="row"]:first-child)[data-lf-more-before]:not(
        [data-lf-focus],
        :has([data-lf-focus])
      )
      > *
      > tr
      > :first-child::after {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: 100%;
      inline-size: var(--lf-more-fade, 24px);
      background: linear-gradient(to right, var(--lf-ground), transparent);
      pointer-events: none;
    }
    table:has(> * > tr > th[scope="row"]:first-child)[data-lf-scroll-direction="rtl"]
      > *
      > tr
      > :first-child::after {
      background: linear-gradient(to left, var(--lf-ground), transparent);
    }
  }
  img:where(:not(.lf-media-frame img)) {
    border-radius: var(--r);
    box-shadow:
      0 0 0 1px var(--lf-ring, var(--border-2)),
      var(--raise-1);
  }
  @media (forced-colors: active) {
    img:where(:not(.lf-media-frame img)) {
      outline: 1px solid CanvasText;
    }
  }
  
  table:has(
      > * > tr > td > img:only-child,
      > * > tr > td > a:only-child > img:only-child
    )
    > *
    > tr
    > :is(th, td) {
    vertical-align: middle;
  }
  table:has(
      > * > tr > td > img:only-child,
      > * > tr > td > a:only-child > img:only-child
    )
    > *
    > tr
    > th:not([scope="row"]) {
    text-align: center;
    color: var(--ink);
  }
  :is(ul, ol) {
    margin: 10px 0;
    padding-inline-start: var(--list-inset);
  }
  li {
    margin: 6px 0;
  }
  hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: var(--hr-margin-block) 0;
  }
  
  h1 {
    font-size: var(--t-1);
    line-height: 1.16;
    letter-spacing: -0.014em;
    margin: 0 0 12px;
    text-wrap: balance;
  }
  h2 {
    font-size: var(--t-2);
    line-height: 1.25;
    letter-spacing: -0.008em;
    margin: var(--h2-start) 0 12px;
    text-wrap: balance;
  }
  h3 {
    font-size: var(--t-3);
    line-height: 1.3;
    margin: var(--h3-start) 0 8px;
    text-wrap: balance;
  }
  p {
    margin: 13px 0;
  }
  figure {
    margin: var(--figure-margin-block) 0;
  }
  figcaption {
    font-size: var(--t-6);
    color: var(--muted);
    margin-top: 8px;
  }
  
  img,
  svg,
  video,
  canvas {
    vertical-align: middle;
  }
  
  details {
    padding-block: 8px;
    margin: var(--details-margin-block) 0;
    --lf-block-frame: trim;
  }
  
  details:has(+ details) {
    margin-block-end: 0;
  }
  details + details {
    margin-block-start: 0;
  }
  summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--t-5);
  }
  details pre {
    margin: 10px 0 6px;
  }
  dl {
    margin: 10px 0;
  }
  dt {
    font-weight: 600;
  }
  dd {
    margin: 0 0 8px 0;
  }

  
  figcaption,
  caption,
  th:not([scope="row"]),
  summary {
    font-family: var(--sans);
    font-variant-numeric: tabular-nums;
  }
  
  @container style(--lf-density: working) {
    :is(p, ul, ol) {
      margin-block: 6px;
    }
    li {
      margin-block: 3px;
    }
    h2 {
      margin-block-end: 6px;
    }
    h3 {
      margin-block-end: 4px;
    }
    h4 {
      margin: 10px 0 4px;
    }
    :is(th, td) {
      padding: 4px 10px;
    }
  }
}

:is(.lf-msg-body, leaf-text) {
  --quote-inset: 10px;
  --pre-inset: 10px;
  --pre-pad-block: 8px;
}
leaf-text.lf-fab-input,
.lf-msg-body {
  font: var(--msg-font);
  color: var(--ink);
}

.lf-msg-body {
  min-width: 0;
  margin: var(--lf-msg-body-gap) 0 0;
  overflow-wrap: anywhere;
  --lf-measure: none;
}

.lf-msg:where(.user) {
  --lf-msg-text-end: var(--lf-thread-text-inset);
}
.lf-msg-text {
  display: block;
  padding-block: var(--lf-thread-text-pad-block, 0px);
  padding-inline-end: var(--lf-msg-text-end, 0px);
}
.lf-msg-media {
  padding-inline-end: var(--lf-msg-text-end, 0px);
}
.lf-msg-text > :first-child {
  margin-top: 0;
}
.lf-msg-body > :last-child,
.lf-msg-text > :last-child,
.lf-msg-media > :last-child {
  margin-bottom: 0;
}
.lf-msg-body :is(p, ul, ol, pre, blockquote, table, hr) {
  margin: 6px 0;
}

.lf-msg-body
  > :is(.lf-msg-text:not(:empty), .lf-msg-media):has(
    + :not(.lf-msg-media, .lf-drawing-reference)
  ) {
  margin-block-end: 6px;
}

.lf-msg-text > p {
  font: inherit;
  white-space: pre-wrap;
  margin-block: 1lh;
}

.lf-msg-body :is(th, td) {
  overflow-wrap: normal;
}
.lf-msg-body :is(h1, h2, h3, h4, h5, h6) {
  margin: 8px 0 4px;
  font-size: inherit;
  line-height: inherit;
}
.lf-msg-body li {
  margin: 2px 0;
}
.lf-msg-body pre {
  padding-block: var(--pre-pad-block);
}

@property --lf-msg-line {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.lf-msg-text {
  --lf-msg-line: 1lh;
}
.lf-msg-text :is([data-lf-gap], pre:has(> [data-lf-gap])) {
  margin-block: 0;
}
.lf-msg-text blockquote[data-lf-gap] {
  padding-block: 0;
}
.lf-msg-text :is([data-lf-gap="1"], pre:has(> [data-lf-gap="1"])) {
  margin-block-start: var(--lf-msg-line);
}
.lf-msg-text :is([data-lf-gap="2"], pre:has(> [data-lf-gap="2"])) {
  margin-block-start: calc(2 * var(--lf-msg-line));
}
.lf-msg-text :is([data-lf-gap="3"], pre:has(> [data-lf-gap="3"])) {
  margin-block-start: calc(3 * var(--lf-msg-line));
}


:where([data-lf-content="data"]:not([data-lf-verbatim])) {
  display: block;
  margin: 14px 0;
}
:where([data-lf-content="data"]:not([data-lf-verbatim]):not(.lf-rendered)) {
  font-family: var(--mono);
  font-size: var(--code-size);
  line-height: var(--code-line);
  font-variant-ligatures: none;
  color: var(--code-muted);
  overflow-x: auto;
}
:where([data-lf-content="data"]:not([data-lf-verbatim]):not(.lf-rendered)) > pre {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  overflow: visible;
}

.lf-drawing-reference {
  display: block;
  margin-top: 2px;
  color: var(--muted-2);
  font: 500 var(--t-6)/1.35 var(--sans);
}

.lf-resolved-threads {
  position: relative;
  min-width: 0;
  
  margin-block-start: 0;
}

.lf-resolved-threads::details-content {
  content-visibility: visible;
}
.lf-resolved-threads:not([open]) > :not(summary) {
  display: none;
}
.lf-resolved-summary {
  border-radius: var(--r);
  cursor: pointer;
  padding: max(var(--sp-1), (var(--aim-floor) - 1lh) / 2) var(--sp-1);
  color: var(--muted);
  font: var(--t-6)/var(--lf-ui-lh) var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-resolved-summary:hover {
  color: var(--ink-2);
}
.lf-page-thread .lf-btn {
  font: inherit;
}
:is(
  .lf-page-thread :is(.lf-btn, summary),
  .lf-resolved-summary
)[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

@media print {
  .lf-page-thread,
  .lf-resolved-threads,
  .lf-page-thread .lf-msg {
    display: block !important;
  }
  .lf-page-thread :is(button, .lf-msg-sending) {
    display: none !important;
  }
}

:where(.lf-react-strip) .lf-react {
  appearance: none;
  margin: 0;
  padding: var(--chip-pad);
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--chip-r);
  font: inherit;
  font-family: var(--sans);
  font-size: var(--t-6);
  line-height: var(--chip-lh);
}
.lf-react-strip .lf-react[data-lf-focus-visible] {
  outline-offset: 1px;
}


.lf-msg-control[aria-expanded="true"] {
  background: var(--chip);
  color: var(--ink);
}
.lf-react {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: max(26px, var(--aim-floor));
}
.lf-react:not(.lf-margin-entry) {
  color: var(--muted);
  border-color: transparent;
  background: transparent;
}
.lf-react:not(.lf-margin-entry):is(:hover, [data-lf-focus]) {
  color: var(--ink-2);
  border-color: var(--border-2);
  background: var(--chip);
}

.lf-react:not(.lf-margin-entry)[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-tint);
}
.lf-react:not(.lf-margin-entry)[aria-pressed="true"]:is(:hover, [data-lf-focus]) {
  background: color-mix(in srgb, var(--accent) 24%, var(--card));
}
.lf-react.lf-response-action:where(:not([aria-pressed="true"])) {
  background: var(--card);
}

.lf-react {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.lf-react:not(.lf-margin-entry) {
  position: relative;
}
.lf-react:not(.lf-margin-entry):is([data-lf-held-word], [data-lf-focus])::after {
  content: attr(aria-label);
  position: absolute;
  z-index: 5;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 220px;
  padding: var(--tip-pad);
  border-radius: var(--tip-r);
  background: var(--tip-bg);
  color: var(--tip-ink);
  box-shadow: var(--raise-1);
  font: var(--tip-font);
  white-space: nowrap;
  pointer-events: none;
}

.lf-react-palette {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.lf-react-surface
  .lf-react-palette:not(:popover-open)
  > .lf-react:not([aria-pressed="true"]) {
  display: none;
}
.lf-react-strip > .lf-react-palette:not(:popover-open, :has(> [aria-pressed="true"])) {
  display: none;
}

.lf-msg {
  anchor-scope: --lf-msg-head;
}
.lf-msg > .lf-msg-head {
  anchor-name: --lf-msg-head;
}

.lf-msg:has(.lf-msg-control, > .lf-msg-head > .lf-progress-expand) > .lf-msg-head {
  --lf-msg-control: var(--lf-msg-control-width);
  padding-inline-end: calc(var(--lf-msg-control) + var(--lf-msg-head-room, 0px));
}

@media (hover: hover) and (pointer: fine) {
  .lf-msg:has(> .lf-msg-copy, > .lf-msg-body > .lf-msg-editor) > .lf-msg-head {
    --lf-msg-control: var(--lf-msg-controls-width);
  }
  .lf-msg:has(> .lf-msg-copy) > .lf-msg-edit,
  .lf-msg:has(> .lf-msg-copy) > .lf-react-strip > .lf-react-trigger {
    inset-inline-end: calc(
      anchor(right) + var(--lf-msg-control-width) + var(--lf-msg-edit-gap)
    );
  }
}
@media (pointer: coarse), (hover: none) {
  .lf-msg > .lf-msg-copy {
    display: none;
  }
}

.lf-msg:has(> .lf-msg-body > .lf-msg-editor) {
  scroll-margin-block-end: var(--sp-2);
}
.lf-msg-control {
  appearance: none;
  position: absolute;
  z-index: 2;
  position-anchor: --lf-msg-head;
  inset-block-start: anchor(center);
  inset-inline-end: anchor(right);
  translate: 0 -50%;
  box-sizing: border-box;
  inline-size: var(--lf-msg-control-width);
  block-size: var(--lf-msg-control-size);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  opacity: var(--lf-msg-offered, 0);
  cursor: pointer;
}

svg[data-lf-icon] {
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(svg[data-lf-icon]) {
  inline-size: 16px;
  block-size: 16px;
}

.lf-msg:is(
  :hover,
  [data-lf-focus-visible-within],
  :has(.lf-msg-control[aria-expanded="true"])
) {
  --lf-msg-offered: 1;
}

:is(.lf-thread-content, .lf-page-thread):has(
    > :is(.lf-thread-controls, .lf-margin-thread-controls)
  )
  > .lf-thread-transcript
  > .lf-msg:nth-child(1 of .lf-msg, .lf-thread-checkpoint):has(
    > :is(.lf-react-strip, .lf-msg-control)
  ):not(:has(> .lf-msg-body > .lf-msg-editor))::after {
  content: "";
  position: absolute;
  z-index: 2;
  position-anchor: --lf-msg-head;
  inset-inline-start: calc(anchor(right) + var(--sp-2) / 2);
  inset-block-start: anchor(center);
  translate: -50% -50%;
  inline-size: 1px;
  block-size: 16px;
  background: var(--border-2);
  opacity: var(--lf-msg-offered, 0);
  pointer-events: none;
}
.lf-react-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0;
  anchor-scope: --lf-react-trigger;
}
.lf-react-strip:has(.lf-react[aria-pressed="true"]) {
  margin-top: 4px;
}
.lf-react-strip > .lf-react-trigger {
  anchor-name: --lf-react-trigger;
}

.lf-react-strip > .lf-react-palette[popover] {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  width: auto;
  height: auto;
  overflow: visible;
  color: inherit;
  background: none;
}
.lf-react-strip > .lf-react-palette:popover-open {
  position: fixed;
  position-anchor: --lf-react-trigger;
  position-visibility: anchors-visible;
  position-try-fallbacks: flip-block;
  top: calc(anchor(bottom) + 4px);
  right: anchor(right);
  left: auto;
  bottom: auto;
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: 4px;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--raise-2);
}
:where(.lf-react-strip > .lf-react-palette:popover-open) > .lf-react {
  box-sizing: border-box;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  font-size: 16px;
}
@media (hover: none) {
  .lf-msg {
    --lf-msg-offered: 1;
  }
}

@media (pointer: coarse), (hover: none) {
  .lf-msg:is(.agent, .user) > .lf-msg-head {
    --lf-msg-control: var(--lf-msg-control-width);
    padding-inline-end: calc(var(--lf-msg-control) + var(--lf-msg-head-room, 0px));
  }
}
.lf-msg-meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}
.lf-msg-sending {
  color: var(--muted);
  white-space: nowrap;
}

.lf-msg-sending[data-voice="leaf"] {
  font-style: italic;
}
.lf-msg-sending::before {
  content: "·";
  margin-inline-end: 6px;
  color: var(--muted-2);
}
.lf-msg-meta > time {
  flex: none;
}

.lf-unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.lf-msg-new {
  flex: none;
  align-self: center;
}

:where(.scroll) {
  position: relative;
}

@property --lf-more-across {
  syntax: "*";
  inherits: false;
}
@property --lf-more-down {
  syntax: "*";
  inherits: false;
}
@media screen {
  [data-lf-more-after]:where(
    [data-lf-scroll-direction="ltr"]:not([data-lf-more-before])
  ) {
    --lf-more-across:
      #000 calc(100% - var(--lf-more-fade, 24px)), var(--lf-more-fade-to, transparent);
  }
  [data-lf-more-before]:where(
    [data-lf-scroll-direction="rtl"]:not([data-lf-more-after])
  ) {
    --lf-more-across:
      #000 calc(100% - var(--lf-more-fade-start, var(--lf-more-fade, 24px))),
      var(--lf-more-fade-to, transparent);
  }
  [data-lf-more-before]:where(
    [data-lf-scroll-direction="ltr"]:not([data-lf-more-after])
  ) {
    --lf-more-across:
      var(--lf-more-fade-to, transparent),
      #000 var(--lf-more-fade-start, var(--lf-more-fade, 24px));
  }
  [data-lf-more-after]:where(
    [data-lf-scroll-direction="rtl"]:not([data-lf-more-before])
  ) {
    --lf-more-across:
      var(--lf-more-fade-to, transparent), #000 var(--lf-more-fade, 24px);
  }
  [data-lf-more-before][data-lf-more-after]:where([data-lf-scroll-direction="ltr"]) {
    --lf-more-across:
      var(--lf-more-fade-to, transparent),
      #000 var(--lf-more-fade-start, var(--lf-more-fade, 24px)),
      #000 calc(100% - var(--lf-more-fade, 24px)), var(--lf-more-fade-to, transparent);
  }
  [data-lf-more-before][data-lf-more-after]:where([data-lf-scroll-direction="rtl"]) {
    --lf-more-across:
      var(--lf-more-fade-to, transparent), #000 var(--lf-more-fade, 24px),
      #000 calc(100% - var(--lf-more-fade-start, var(--lf-more-fade, 24px))),
      var(--lf-more-fade-to, transparent);
  }
  [data-lf-more-below] {
    --lf-more-down:
      #000 calc(100% - var(--lf-more-fade, 24px)), var(--lf-more-fade-to, transparent);
  }
  :is([data-lf-more-before], [data-lf-more-after], [data-lf-more-below]) {
    mask-image:
      linear-gradient(to right, var(--lf-more-across, #000, #000)),
      linear-gradient(var(--lf-more-down, #000, #000));
    mask-composite: intersect;
  }
  :is([data-lf-more-before], [data-lf-more-after], [data-lf-more-below]):is(
    [data-lf-focus],
    :has([data-lf-focus])
  ) {
    mask-image: none;
  }
}
@media print {
  
  details:not([open])::details-content,
  [hidden="until-found"] {
    content-visibility: visible;
  }
  :is(summary, .lf-disclosure-marker)::before {
    visibility: hidden;
  }
}

summary,
.lf-disclosure-marker {
  list-style: none;
}
:is(summary, .lf-disclosure-marker)::-webkit-details-marker {
  display: none;
}
:is(summary, .lf-disclosure-marker)::before {
  content: "";
  float: inline-start;
  inline-size: 0.5em;
  block-size: 0.8em;
  margin-block: calc((1lh - 0.8em) / 2);
  margin-inline-end: 0.4em;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.5 2 7.5 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 3.5 4.5 4.5L6 12.5'/%3E%3C/svg%3E")
    center / contain no-repeat;
  forced-color-adjust: none;
}
:is(summary, .lf-disclosure-marker):dir(rtl)::before {
  scale: -1 1;
}
:is(
  details[open] > summary,
  details[open] > .lf-disclosure-marker,
  .lf-disclosure-marker[aria-expanded="true"]
)::before {
  rotate: 90deg;
}

:is(
    details[open] > summary,
    details[open] > .lf-disclosure-marker,
    .lf-disclosure-marker[aria-expanded="true"]
  ):dir(rtl)::before {
  rotate: -90deg;
}
@media (prefers-reduced-motion: no-preference) {
  :is(summary, .lf-disclosure-marker)::before {
    transition: rotate var(--lf-motion-disclosure) ease-out;
  }
}

:is(.lf-btn, .button) {
  padding: max(4px, (var(--lf-line) - 1lh) / 2 - 1px) 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  display: inline-block;
}
:is(.lf-btn, .button):where(
  :not(:disabled, [aria-disabled="true"])[data-lf-focus-visible]
) {
  background: var(--chip);
  color: var(--ink);
}

.choice {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--sp-1);
  padding: max(var(--sp-1), var(--focus-ring-room));
  min-block-size: var(--aim-floor);
  min-inline-size: var(--aim-floor);
  box-sizing: border-box;
  cursor: pointer;
  font: var(--t-5)/var(--lf-ui-lh) var(--sans);
}
.choice > input {
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}
.choice > input:is(:focus-visible, [data-lf-focus-visible]) {
  outline: none;
}
.choice:has(> input:is(:focus-visible, [data-lf-focus-visible])) {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
  --lf-wears-ring: 1;
}


:where([data-room]) {
  display: inline-block;
  max-inline-size: 100%;
}
[data-room]::before {
  content: attr(data-room);
  display: block;
  block-size: 0;
  overflow: hidden;
  visibility: hidden;
  white-space: pre-line;
}
[data-room] > * {
  display: block;
  inline-size: 0;
  min-inline-size: 100%;
  overflow: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) {
  :is(.lf-btn, .button):where(:not(:disabled, [aria-disabled="true"])):hover {
    background: var(--chip);
    color: var(--ink);
    box-shadow: none;
  }
}

.lf-icon-action {
  box-sizing: border-box;
  width: var(--lf-icon-action-hit);
  height: var(--lf-icon-action-face);
  min-width: var(--lf-icon-action-hit);
  min-height: var(--lf-icon-action-face);
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--muted);
}
.lf-icon-action:where(:not(:disabled, [aria-disabled="true"])[data-lf-focus-visible]) {
  background: var(--chip);
  color: var(--ink);
}
@media (hover: hover) {
  .lf-icon-action:where(:not(:disabled, [aria-disabled="true"])):hover {
    background: var(--chip);
    color: var(--ink);
    box-shadow: none;
  }
}

wa-copy-button.lf-icon-action {
  place-items: stretch;
  font-size: 0;
  line-height: 0;
}
.lf-icon-action.lf-ui::part(button) {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

:is(.lf-btn, .button).primary {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--card));
  background: var(--card);
}
@media (hover: hover) {
  :is(.lf-btn, .button).primary:not(:disabled, [aria-disabled="true"]):hover {
    background: var(--accent-tint);
  }
}

:is(.lf-btn, .button):disabled,
:is(.lf-btn, .button)[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}
:is(.lf-btn, .button).primary:is(:disabled, [aria-disabled="true"]) {
  opacity: 1;
  color: var(--muted);
  background: var(--paper);
  border-color: var(--border-2);
}

:is(.lf-btn, .button, .lf-icon-action)[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

:where(button).lf-mark-action,
.lf-mark-action.lf-ui::part(button) {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  inline-size: var(--mark-size);
  min-inline-size: 0;
  block-size: var(--mark-size);
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  font: inherit;
  background: none;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  box-shadow: none;
  cursor: pointer;
}
:where(button).lf-mark-action:hover,
.lf-mark-action.lf-ui::part(button):hover {
  color: var(--ink);
}
:where(button).lf-mark-action[data-lf-focus-visible],
.lf-mark-action.lf-ui::part(lf-focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 0;
}
.lf-mark-action > svg {
  inline-size: 12px;
  block-size: 12px;
}

.lf-corner-mark {
  position: absolute;
  z-index: 1;
  background: var(--lf-ground);
  box-shadow:
    0 0 0 1px var(--lf-ring, var(--border-2)),
    var(--raise-1);
}

@media (forced-colors: active) {
  .lf-corner-mark {
    border: 1px solid ButtonText;
  }
}

:where(button).lf-inline-action {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
:is(.lf-inline-action, .lf-resolved-summary *)[data-lf-news] {
  color: var(--danger);
}
.lf-resolved-summary [data-lf-news] {
  font-weight: 600;
}

:where(button).lf-inline-action:hover {
  box-shadow: none;
}
@media (hover: hover) {
  :where(button).lf-inline-action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
:where(button).lf-inline-action[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.lf-row {
  border: 0;
  border-inline-start: 2px solid transparent;
  border-radius: 0;
  background-color: transparent;
  color: var(--ink);
  font: inherit;
  text-align: start;
  text-decoration: none;
}

.lf-row:hover {
  box-shadow: none;
}
.lf-row:where(:not(:disabled, [aria-disabled="true"])):is(
    [data-lf-focus-visible],
    [aria-selected="true"]
  ) {
  background-image: linear-gradient(var(--offer-hover), var(--offer-hover));
}
@media (hover: hover) {
  .lf-row:where(:not(:disabled, [aria-disabled="true"])):hover {
    background-image: linear-gradient(var(--offer-hover), var(--offer-hover));
  }
}
.lf-row[aria-current]:not([aria-current="false"]) {
  border-inline-start-color: var(--accent);
  background-color: var(--accent-tint);
  color: var(--ink);
}



:root {
  --lf-icon-action-face: 28px;
  --lf-compose-action-inset: 6px;
}

leaf-composition-field {
  display: contents;
}
:is(.lf-fab-bar, .lf-margin-preview),
.lf-compose-field {
  --lf-compose-send-end: calc(
    var(--lf-icon-action-hit) + 2 * var(--lf-compose-action-inset)
  );
}
:root,
.lf-compose-field,
.lf-icon-action,
.lf-compose-submit,
.lf-compose-dictate {
  --lf-icon-action-hit: max(var(--lf-icon-action-face), var(--aim-floor));
}
:root,
:is(.lf-fab-bar, .lf-margin-preview),
.lf-compose-field {
  --lf-compose-h: calc(var(--lf-icon-action-face) + 2 * var(--lf-compose-action-inset));
}
.lf-compose-field {
  --lf-compose-pad-block: 8px;
  --lf-compose-pad-inline-start: 10px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  min-width: 0;
}
.lf-compose-field > leaf-text {
  grid-area: 1 / 1;
}

.lf-compose-placeholder {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  block-size: 1lh;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.lf-compose-placeholder > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-compose-placeholder > kbd {
  flex: none;
}

.lf-compose-placeholder > .lf-compose-placeholder-lead {
  margin-inline-end: auto;
  padding-inline-end: 0.75em;
}
.lf-compose-placeholder-lead:not(:empty) ~ span {
  flex: none;
}
.lf-compose-placeholder-lead:empty {
  display: none;
}
.lf-compose-placeholder .lf-key-badge {
  background: transparent;
  color: var(--muted);
}

.lf-compose-error {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  margin: 0;
  padding: var(--lf-compose-pad-block) var(--lf-compose-pad-inline-start);
  border-radius: var(--r);
  background: var(--card);
  color: var(--danger-ink);
  font: 500 var(--t-5) / 1.5 var(--sans);
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: text;
}
.lf-compose-error > span {
  display: block;
  max-height: round(down, 100%, 1lh);
  overflow: hidden;
}
.lf-compose-field > leaf-text:not(.lf-fab-input) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--lf-compose-h);
  padding-inline-end: var(--lf-compose-pad-inline-start);
}

.lf-compose-field:where(:has(> .lf-compose-submit)) > leaf-text:not(.lf-fab-input) {
  --lf-field-end-room: calc(
    var(--lf-compose-send-end) - var(--lf-compose-pad-inline-start)
  );
}
.lf-action-icon {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

:is(.lf-compose-submit, .lf-compose-dictate) {
  box-sizing: border-box;
  width: var(--lf-icon-action-hit);
  height: var(--lf-icon-action-face);
  min-width: var(--lf-icon-action-hit);
  min-height: var(--lf-icon-action-face);
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  cursor: pointer;
}
:where(.lf-compose-submit, .lf-compose-dictate)[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
:is(.lf-compose-submit, .lf-compose-dictate, .lf-response-trigger),
:is(.lf-resolve, .lf-reopen).lf-icon-action {
  border: 0;
  background: transparent;
  box-shadow: none;
}
:is(
  .lf-compose-submit,
  .lf-compose-dictate,
  .lf-response-trigger,
  .lf-resolve.lf-icon-action,
  .lf-reopen.lf-icon-action
)::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  inline-size: var(--lf-icon-action-face);
  block-size: var(--lf-icon-action-face);
  border-radius: var(--r);
  background: transparent;
}
:is(
  .lf-compose-submit,
  .lf-compose-dictate,
  .lf-response-trigger,
  .lf-resolve.lf-icon-action,
  .lf-reopen.lf-icon-action
):hover {
  background: transparent;
  box-shadow: none;
}
:is(.lf-compose-submit, .lf-compose-dictate) {
  position: absolute;
  z-index: 1;
  inset-inline-end: var(--lf-compose-action-inset);
  inset-block-end: var(--lf-compose-action-inset);
  color: var(--accent);
}
:is(.lf-compose-submit, .lf-compose-dictate, .lf-response-trigger):not(
    :disabled,
    [aria-disabled="true"]
  ):hover::before,
.lf-response-trigger[aria-expanded="true"]::before {
  background: var(--accent-tint);
}
:is(.lf-compose-submit, .lf-compose-dictate):is(:disabled, [aria-disabled="true"]) {
  opacity: 1;
  color: var(--muted);
  cursor: default;
}
:is(.lf-compose-dictate, .lf-response-trigger) {
  color: var(--muted);
}
:is(.lf-compose-dictate, .lf-response-trigger):hover {
  color: var(--ink);
}
.lf-compose-dictate:is([data-dictation="starting"], [data-dictation="listening"]) {
  color: var(--accent);
}
.lf-compose-dictate[data-dictation="listening"]::before {
  background: var(--accent-tint);
}
.lf-compose-dictate[data-dictation="failed"] {
  color: var(--danger-ink);
}
.lf-compose-dictate[data-dictation="failed"]:hover::before {
  background: var(--danger-tint);
}
.lf-compose-dictate:not([data-dictation="failed"]) .lf-mic-slash {
  display: none;
}
:is(.lf-resolve, .lf-reopen).lf-icon-action {
  position: relative;
  flex: none;
  margin-inline-start: auto;
  color: var(--ink);
}

.lf-resolve.lf-icon-action:not([aria-disabled="true"]):hover::before {
  background: var(--chip);
}
:is(.lf-resolve, .lf-reopen).lf-icon-action .lf-action-icon {
  inline-size: 15px;
  block-size: 15px;
}
.lf-reopen.lf-icon-action {
  color: var(--ok-ink);
}
.lf-reopen.lf-icon-action::before {
  background: var(--ok-tint);
}

.lf-reopen.lf-icon-action:not([aria-disabled="true"]):hover::before {
  background: color-mix(in srgb, var(--ok-ink) 18%, var(--ok-tint));
}

:is(.lf-thread-reply, .lf-say):has(
  > leaf-composition-field > .lf-composer-media:not([hidden])
),
.lf-fab-bar[data-lf-presentation="inline"]:has(
    > .lf-composer > leaf-composition-field > .lf-composer-media:not([hidden])
  ) {
  flex-wrap: wrap;
}


:is(.lf-composer-media, .lf-msg-media) {
  --lf-media-mark-overhang: 6px;
}
.lf-composer-media {
  --lf-media-room: max(
    calc(var(--raise-1-drop) + var(--raise-1-blur)),
    calc(var(--lf-media-mark-overhang) + (var(--aim-floor) - var(--mark-size)) / 2)
  );
  --lf-media-h: 120px;
  display: flex;
  align-items: flex-end;
  flex: 1 0 calc(100% + 2 * var(--lf-media-room));
  gap: var(--lf-media-room);
  min-width: 0;
  overflow-x: auto;
  padding: var(--lf-media-room);
  
  margin: calc(var(--lf-media-mark-overhang) - var(--lf-media-room))
    calc(-1 * var(--lf-media-room)) calc(4px - var(--lf-media-room));
  box-sizing: border-box;
}
.lf-composer-media-item {
  position: relative;
  flex: none;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
}
.lf-media-open {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: inherit;
  font: inherit;
}
button.lf-media-open {
  cursor: zoom-in;
}
.lf-media-open[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.lf-composer-media-item:not(.lf-composer-drawing) > .lf-composer-media-open img {
  display: block;
  max-width: calc(2 * var(--lf-media-h));
  max-height: var(--lf-media-h);
  border-radius: inherit;
}

.lf-composer-media-item > .lf-corner-mark {
  inset-block-start: calc(-1 * var(--lf-media-mark-overhang));
  inset-inline-end: calc(-1 * var(--lf-media-mark-overhang));
}
.lf-composer-media-item > .lf-composer-drawing-undo {
  inset-inline: calc(-1 * var(--lf-media-mark-overhang)) auto;
}
@media (hover: hover) {
  .lf-composer-media-item:not(:hover, :focus-within) > .lf-corner-mark {
    opacity: 0;
  }
  .lf-composer-media-item > .lf-corner-mark {
    transition: opacity var(--lf-motion-disclosure);
  }
}

.lf-msg-media > .lf-composer-media-item {
  inline-size: fit-content;
  max-inline-size: 100%;
}

.lf-composer-drawing > .lf-composer-media-open {
  position: relative;
  width: calc(1.5 * var(--lf-media-h));
  height: var(--lf-media-h);
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}
.lf-drawing-context-status {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 2px;
  font: 10px/1.2 var(--sans);
  background: var(--paper);
  color: var(--ink-2);
}
.lf-composer-drawing > .lf-composer-media-open > canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.lf-comment-box > leaf-composition-field > .lf-compose-field,
.lf-response-control {
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--card);
}
.lf-comment-box
  > leaf-composition-field
  > .lf-compose-field:has(> leaf-text[data-lf-focus-visible]),
.lf-response-control[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: 0;
  border-color: transparent;
  --lf-wears-ring: 1;
}

.lf-response-control {
  filter: drop-shadow(var(--raise-1));
}
.lf-comment-box > leaf-composition-field > .lf-compose-field > leaf-text {
  padding: var(--lf-compose-pad-block) var(--lf-compose-pad-inline-start);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: var(--t-5)/1.5 var(--sans);
  max-height: 50vh;
  overflow-y: auto;
}
.lf-comment-box
  > leaf-composition-field
  > .lf-compose-field
  > leaf-text[data-lf-focus-visible] {
  outline: none;
}
.lf-thread-reply {
  display: block;
  margin-top: var(--sp-3);
  min-width: 0;
}
:is(.lf-thread-reply, .lf-fab-bar, .lf-msg-editor) .lf-compose-field {
  --lf-compose-pad-inline-start: calc(var(--lf-thread-text-inset) - 1px);
}

.lf-msg-editor {
  display: block;
  min-width: 0;
  
  font: var(--msg-font);
}

.lf-msg-body:has(> .lf-msg-editor) {
  display: flow-root;
}
.lf-msg-editor > leaf-composition-field > .lf-compose-field {
  --lf-compose-pad-block: calc(
    (var(--lf-response-height, var(--lf-line)) - 2px - 1lh) / 2
  );
  margin-inline-start: calc(-1 * var(--lf-thread-text-inset));
  margin-block: calc(
    var(--lf-thread-text-pad-block, 0px) - var(--lf-compose-pad-block) - 1px
  );
}
.lf-msg-editor > leaf-composition-field > .lf-compose-field > leaf-text {
  min-height: 0;
  padding-inline-end: calc(var(--lf-msg-text-end) - 1px);
}
.lf-msg-editor
  > leaf-composition-field
  > .lf-compose-field:has(> .lf-msg-media:not([hidden])) {
  margin-block-end: calc(-1 * var(--lf-compose-pad-block) - 1px);
}
.lf-msg-editor
  > leaf-composition-field
  > .lf-compose-field:has(> .lf-msg-media:not([hidden]))
  > leaf-text {
  padding-block-end: var(--lf-thread-text-pad-block, 0px);
}
.lf-msg-editor > leaf-composition-field > .lf-compose-field > .lf-msg-media {
  margin-inline: calc(var(--lf-thread-text-inset) - 1px) -1px;
  padding-block-end: var(--lf-compose-pad-block);
}

.lf-msg-edit-foot {
  display: block;
  block-size: 0;
  scroll-margin-block-start: 1lh;
}

.lf-msg-edit-actions {
  position: absolute;
  z-index: 2;
  position-anchor: --lf-msg-head;
  inset-block-start: anchor(center);
  inset-inline-end: anchor(right);
  translate: 0 -50%;
  display: inline-flex;
  gap: var(--lf-msg-edit-gap);
  padding-inline-start: var(--sp-2);
  font-size: var(--t-6);
  background:
    linear-gradient(to right, transparent, var(--lf-msg-ground) var(--sp-2)),
    linear-gradient(to right, transparent, var(--lf-ground) var(--sp-2));
  background-size: 100% 1lh;
  background-position: center;
  background-repeat: no-repeat;
}
.lf-msg-edit-actions > .lf-msg-control {
  position: relative;
  inset: auto;
  translate: none;
  opacity: 1;
  inline-size: var(--lf-msg-control-width);
  block-size: var(--lf-msg-control-size);
  min-width: 0;
  min-height: 0;
  border: 1px solid transparent;
}

.lf-msg-edit-actions > .lf-msg-control:is(:hover, [data-lf-focus]) {
  background: var(--chip);
  color: var(--ink);
}

.lf-msg-edit-actions > .lf-msg-control::after {
  inset: min(0px, 100% - var(--aim-floor)) 0 0;
}
.lf-msg-edit-actions > .lf-msg-edit-save::before {
  display: none;
}
.lf-msg-edit-actions > .lf-msg-edit-save:not([aria-disabled="true"]) {
  color: var(--accent);
}

:is(.lf-page-thread, .lf-fp-opened):has(.lf-msg-editor) :is(.lf-resolve, .lf-reopen) {
  display: none;
}

.lf-thread-content:has(> .lf-thread-controls)
  > .lf-thread-transcript
  > .lf-msg:nth-child(1 of .lf-msg, .lf-thread-checkpoint)
  .lf-msg-edit-actions {
  inset-inline-end: calc(anchor(right) - var(--lf-thread-action-room) - var(--sp-2));
}

:is(.lf-fab-bar, .lf-margin-preview) {
  --lf-response-height: var(--lf-line);
}

:is(.lf-fab-bar, .lf-margin-preview) {
  --lf-thread-text-pad-block: calc((var(--lf-response-height) - 1lh) / 2);
  --lf-compose-action-inset: calc(
    (var(--lf-response-height) - var(--lf-icon-action-face)) / 2
  );
}
.lf-margin-preview .lf-msg {
  --lf-msg-text-end: calc(var(--lf-compose-send-end) + 1px);
}

.lf-fab-bar .lf-compose-field,
.lf-margin-preview .lf-thread-reply .lf-compose-field,
.lf-response-control {
  --lf-compose-pad-block: calc(var(--lf-thread-text-pad-block) - 1px);
}

.lf-response-control {
  box-sizing: border-box;
  min-height: var(--lf-response-height);
  color: var(--ink-2);
  font-weight: 400;
  line-height: inherit;
  padding-block: var(--lf-compose-pad-block);
}

leaf-text.lf-fab-input {
  display: none;
  width: 100%;
  min-width: 0;
  padding-inline: var(--lf-compose-pad-inline-start) var(--lf-compose-send-end);
  overflow-y: auto;
}

.lf-fab-bar .lf-compose-field > .lf-response-trigger {
  position: absolute;
  z-index: 1;
  inset-inline-end: calc(var(--lf-compose-action-inset) + var(--lf-icon-action-hit));
  inset-block-end: var(--lf-compose-action-inset);
}
.lf-fab-bar .lf-compose-field[data-words] > .lf-response-trigger {
  display: none;
}
.lf-fab-bar
  .lf-compose-field:not([data-words]):has(> .lf-response-trigger:not([hidden]))
  > leaf-text.lf-fab-input {
  padding-inline-end: calc(var(--lf-compose-send-end) + var(--lf-icon-action-hit));
}
.lf-response-action {
  min-width: max(30px, var(--aim-floor));
  padding-inline: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  cursor: pointer;
}
.lf-response-action:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--card));
  background: var(--card);
}
.lf-response-action-glyph {
  line-height: 1;
}
.lf-response-action-space {
  white-space: pre;
}
.lf-response-action[data-lf-collapse]
  > :is(.lf-response-action-space, .lf-response-action-label) {
  display: none;
}
.lf-fab-bar:not([data-lf-target-only]) > .lf-fab {
  display: none;
}

.lf-response-trigger,
.lf-fab-bar .lf-compose-field[data-words] {
  anchor-name: --lf-response-options;
}

.lf-response-options {
  position: fixed;
  position-anchor: --lf-response-options;
  position-visibility: anchors-visible;
  position-area: block-start span-all;
  position-try-fallbacks: flip-block;
  justify-self: anchor-center;
  inset: auto;
  width: max-content;
  max-width: calc(100vw - 16px);
  margin: 4px 8px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.lf-response-options:popover-open {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.lf-response-options .lf-response-action {
  min-height: var(--lf-response-height);
}
.lf-response-options .lf-react.lf-response-action {
  flex: 1 1 max(30px, var(--aim-floor));
  max-width: max-content;
}

.lf-response-options > .lf-react-palette {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}


.lf-composer {
  display: none;
}
.lf-composer[data-lf-open] {
  display: contents;
}
.lf-composer[data-lf-open] leaf-text.lf-fab-input {
  display: block;
}

.lf-fab-bar {
  display: none;
  font: var(--t-5)/1.5 var(--sans);
}
@media screen {
  .lf-fab-bar:is([data-lf-target-only], :has(> .lf-composer[data-lf-open])) {
    display: var(--lf-response-display, inline-flex);
  }
}
.lf-fab-bar[data-lf-presentation="inline"] {
  position: static;
  box-sizing: border-box;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  max-width: 760px;
  white-space: nowrap;
  color: var(--ink);
}
.lf-fab-bar[data-lf-presentation="inline"] *,
.lf-fab-bar[data-lf-presentation="inline"] *::before,
.lf-fab-bar[data-lf-presentation="inline"] *::after {
  box-sizing: inherit;
}
.lf-fab-bar[data-lf-presentation="inline"] leaf-text.lf-fab-input {
  max-width: none;
  max-height: 50vh;
  margin: 0;
}

.lf-fab-bar[data-lf-presentation="inline"] > .lf-surface-grip {
  display: none;
}


.lf-message-media img {
  display: block;
  max-width: 100%;
  max-height: min(60vh, 480px);
}

:is(.lf-btn, .button, .lf-icon-action):is(
  [aria-pressed="true"],
  [aria-checked="true"]
) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--chip);
}

html[data-lf-draw-mode] main {
  --lf-draw-mode: on;
}
@container style(--lf-draw-mode: on) {
  :not([data-lf-runtime], [data-lf-runtime] *) {
    cursor: crosshair !important;
  }
  :where([data-lf-runtime]) {
    cursor: auto;
  }
}

:root {
  --lf-mark-bar-end: 8px;
}
.lf-mark-bar,
.lf-code-copy {
  box-sizing: border-box;
  display: flex;
  gap: max(2px, var(--aim-floor) - var(--mark-size));
  padding: 1px;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--raise-1);
}

.lf-code-copy {
  --lf-code-copy-box: calc(var(--mark-size) + 4px);
  position: absolute;
  
  top: calc(
    anchor(top, -9999px) - var(--lf-code-copy-box) / 2 + var(--lf-block-control-dy, 0px)
  );
  left: calc(
    anchor(right, -9999px) - var(--lf-mark-bar-end) - var(--lf-code-copy-box) +
      var(--lf-block-control-dx, 0px)
  );
  width: var(--lf-code-copy-box);
  height: var(--lf-code-copy-box);
  z-index: 1;
  white-space: normal;
  font-size: 0;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
}

.lf-block-controls {
  display: contents;
}

.lf-block-control-cut {
  pointer-events: none;
  z-index: 1;
}
.lf-block-controls .lf-block-control-cut > * {
  position: fixed;
}

:not(.lf-chrome, .lf-block-controls):is(:hover, [data-lf-focus-within]) > .lf-code-copy,
.lf-code-copy-hover,
.lf-code-copy-focused,
.lf-code-copy:is(:hover, [data-lf-focus-within]) {
  opacity: 1;
  pointer-events: auto;
}

.lf-mark-bar > .lf-code-copy {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
}

.lf-code-copy::part(button) {
  scroll-margin: var(--focus-ring-landing);
}

:root {
  --lf-heading-link-size: var(--lf-line);
}

.lf-heading-link {
  --lf-heading-link-room: calc(
    100% - anchor(left, 9999px) + var(--lf-block-control-dx, 0px) -
      var(--lf-heading-link-size)
  );
  position: absolute;
  top: calc(
    anchor(top, -9999px) + var(--lf-heading-link-top, 0px) +
      (
        var(--lf-heading-link-line, var(--lf-heading-link-size)) -
          var(--lf-heading-link-size)
      ) /
      2 + var(--lf-block-control-dy, 0px)
  );
  right: calc(
    anchor(left, 9999px) - var(--lf-block-control-dx, 0px) +
      (1 - clamp(0, sign(var(--lf-heading-link-room)) + 1, 1)) *
      (anchor(right, 9999px) - anchor(left, 9999px))
  );
  --lf-icon-action-face: var(--lf-heading-link-size);
  width: var(--lf-heading-link-size);
  height: var(--lf-heading-link-size);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.lf-heading-link:is(.lf-heading-link-shown, :hover, [data-lf-focus-within]) {
  opacity: 1;
  pointer-events: auto;
}

:root {
  --lf-video-bar-h: var(--lf-line);
  --lf-video-bar-inset: 4px;
}
.lf-video-controls {
  position: absolute;
  top: calc(
    anchor(bottom, -9999px) - var(--lf-video-bar-h) - var(--lf-video-bar-inset) +
      var(--lf-block-control-dy, 0px)
  );
  left: calc(
    anchor(left, -9999px) + var(--lf-video-bar-inset) + var(--lf-block-control-dx, 0px)
  );
  width: calc(anchor-size(width, 0px) - 2 * var(--lf-video-bar-inset));
  height: var(--lf-video-bar-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding-inline: 0 var(--sp-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--paper);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  
  &:has(> .lf-video-full-screen) {
    padding-inline: 0;
  }
}
.lf-video-controls:is(
  :not([data-playing]),
  [data-hovered],
  [data-keyed],
  :hover,
  :has(:focus-visible)
) {
  opacity: 1;
  pointer-events: auto;
}

.lf-video-controls {
  --lf-icon-action-face: calc(var(--lf-video-bar-h) - 2px);
}
:is(.lf-video-play, .lf-video-full-screen) {
  flex: none;
  
  &[data-lf-focus-visible] {
    outline-offset: calc(-1 * var(--focus-ring-w));
  }
}
.lf-video-play > .lf-action-icon {
  grid-area: 1 / 1;
}
.lf-video-controls:not([data-playing]) .lf-video-play > [data-lf-icon="pause"],
.lf-video-controls[data-playing] .lf-video-play > [data-lf-icon="play"] {
  visibility: hidden;
}
.lf-video-time {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
  accent-color: var(--accent);
}
.lf-msg-body a.detached {
  color: var(--muted-2);
  text-decoration: underline dashed;
  cursor: default;
}

.lf-suggest-body > .lf-msg-text {
  white-space: pre-wrap;
}

.lf-suggest-label {
  color: var(--muted-2);
}

.lf-react-said {
  font-family: var(--sans);
  color: var(--mark-ink);
}

.lf-reply-continuity[open]::details-content,
.lf-reply-continuity:not(details) {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}
.lf-reply-space {
  flex: 0 1 auto;
  block-size: var(--lf-reply-space, 0px);
  min-block-size: 0;
  max-block-size: 100%;
}


:where(:root),
:is(
  wa-copy-button,
  wa-comparison,
  wa-radio-group,
  wa-radio,
  wa-slider,
  wa-tooltip,
  wa-select,
  wa-option,
  wa-input
) {
  --wa-font-family-body: var(--sans);
  
  &:not(:root) {
    font-family: var(--wa-font-family-body);
    font-style: normal;
    font-variant: normal;
    font-stretch: normal;
    font-feature-settings: normal;
    font-variation-settings: normal;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
  }
  --wa-color-surface-raised: var(--card);
  --wa-color-surface-default: var(--field);
  --wa-color-surface-lowered: var(--card);
  --wa-color-surface-border: var(--border-2);
  --wa-color-text-normal: var(--ink);
  --wa-color-text-quiet: var(--muted);
  --wa-color-neutral-fill-quiet: var(--field);
  
  --wa-color-neutral-fill-normal: var(--chip);
  --wa-color-neutral-border-normal: var(--border-2);
  --wa-color-neutral-on-quiet: var(--ink-2);
  --wa-color-neutral-on-normal: var(--ink);
  --wa-color-brand-fill-quiet: var(--accent-tint);
  --wa-color-brand-on-quiet: var(--accent);
  --wa-color-brand-border-quiet: var(--accent);
  
  --wa-color-brand-fill-loud: var(--accent);
  --wa-color-brand-on-loud: light-dark(var(--card), var(--paper));
  --wa-color-focus: var(--accent);
  
  --wa-border-radius-s: var(--r-s);
  --wa-border-radius-m: var(--r);
  --wa-border-radius-l: var(--r-l);
  
  --wa-focus-ring-style: none;
  --wa-form-control-background-color: var(--field);
  --wa-form-control-border-color: var(--border-2);
  --wa-form-control-value-color: var(--ink);
  
  --wa-form-control-height: var(--lf-line);
}


wa-input {
  --wa-form-control-background-color: var(--card);
  --wa-form-control-value-font-size: max(var(--entry-floor), 1em);
}


.lf-label-hidden::part(form-control-label) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


wa-input::part(base),
wa-select::part(combobox) {
  transition-property: background-color, border-color;
}


wa-copy-button::part(lf-focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-gap);
}
wa-comparison::part(lf-focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-gap);
}


wa-radio[appearance="button"][data-lf-focus-visible] {
  z-index: 2;
}


wa-input::part(base lf-focus-visible-within) {
  outline: var(--focus-ring);
}
wa-select::part(combobox lf-focus-visible-within) {
  outline: var(--focus-ring);
}

wa-option {
  --focus-ring-gap: calc(-1 * var(--focus-ring-w));
}


wa-slider:not([range])[data-lf-focus-visible-within]::part(thumb),
wa-slider[range]::part(lf-focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 0;
}
wa-slider[range]::part(lf-focus-visible) {
  z-index: 4;
}


wa-slider::part(track) {
  background: var(--border-2);
}


wa-tooltip {
  color: var(--wa-tooltip-content-color);
}

}
@layer lf-base {
@layer lf-vendor {


@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;
@layer wa-base {
  wa-page :is(*, *:after, *:before) {
    scroll-margin-top: var(--scroll-margin-top);
  }
  wa-page[view=desktop] [data-toggle-nav] {
    display: none;
  }
  wa-page[view=mobile] .wa-desktop-only,
  wa-page[view=desktop] .wa-mobile-only {
    display: none !important;
  }
}


@layer wa-color-variant {
  :where(:root),
  .wa-brand-blue {
    --wa-color-brand-95: var(--wa-color-blue-95);
    --wa-color-brand-90: var(--wa-color-blue-90);
    --wa-color-brand-80: var(--wa-color-blue-80);
    --wa-color-brand-70: var(--wa-color-blue-70);
    --wa-color-brand-60: var(--wa-color-blue-60);
    --wa-color-brand-50: var(--wa-color-blue-50);
    --wa-color-brand-40: var(--wa-color-blue-40);
    --wa-color-brand-30: var(--wa-color-blue-30);
    --wa-color-brand-20: var(--wa-color-blue-20);
    --wa-color-brand-10: var(--wa-color-blue-10);
    --wa-color-brand-05: var(--wa-color-blue-05);
    --wa-color-brand: var(--wa-color-blue);
    --wa-color-brand-on: var(--wa-color-blue-on);
  }
  .wa-brand-red {
    --wa-color-brand-95: var(--wa-color-red-95);
    --wa-color-brand-90: var(--wa-color-red-90);
    --wa-color-brand-80: var(--wa-color-red-80);
    --wa-color-brand-70: var(--wa-color-red-70);
    --wa-color-brand-60: var(--wa-color-red-60);
    --wa-color-brand-50: var(--wa-color-red-50);
    --wa-color-brand-40: var(--wa-color-red-40);
    --wa-color-brand-30: var(--wa-color-red-30);
    --wa-color-brand-20: var(--wa-color-red-20);
    --wa-color-brand-10: var(--wa-color-red-10);
    --wa-color-brand-05: var(--wa-color-red-05);
    --wa-color-brand: var(--wa-color-red);
    --wa-color-brand-on: var(--wa-color-red-on);
  }
  .wa-brand-orange {
    --wa-color-brand-95: var(--wa-color-orange-95);
    --wa-color-brand-90: var(--wa-color-orange-90);
    --wa-color-brand-80: var(--wa-color-orange-80);
    --wa-color-brand-70: var(--wa-color-orange-70);
    --wa-color-brand-60: var(--wa-color-orange-60);
    --wa-color-brand-50: var(--wa-color-orange-50);
    --wa-color-brand-40: var(--wa-color-orange-40);
    --wa-color-brand-30: var(--wa-color-orange-30);
    --wa-color-brand-20: var(--wa-color-orange-20);
    --wa-color-brand-10: var(--wa-color-orange-10);
    --wa-color-brand-05: var(--wa-color-orange-05);
    --wa-color-brand: var(--wa-color-orange);
    --wa-color-brand-on: var(--wa-color-orange-on);
  }
  .wa-brand-yellow {
    --wa-color-brand-95: var(--wa-color-yellow-95);
    --wa-color-brand-90: var(--wa-color-yellow-90);
    --wa-color-brand-80: var(--wa-color-yellow-80);
    --wa-color-brand-70: var(--wa-color-yellow-70);
    --wa-color-brand-60: var(--wa-color-yellow-60);
    --wa-color-brand-50: var(--wa-color-yellow-50);
    --wa-color-brand-40: var(--wa-color-yellow-40);
    --wa-color-brand-30: var(--wa-color-yellow-30);
    --wa-color-brand-20: var(--wa-color-yellow-20);
    --wa-color-brand-10: var(--wa-color-yellow-10);
    --wa-color-brand-05: var(--wa-color-yellow-05);
    --wa-color-brand: var(--wa-color-yellow);
    --wa-color-brand-on: var(--wa-color-yellow-on);
  }
  .wa-brand-green {
    --wa-color-brand-95: var(--wa-color-green-95);
    --wa-color-brand-90: var(--wa-color-green-90);
    --wa-color-brand-80: var(--wa-color-green-80);
    --wa-color-brand-70: var(--wa-color-green-70);
    --wa-color-brand-60: var(--wa-color-green-60);
    --wa-color-brand-50: var(--wa-color-green-50);
    --wa-color-brand-40: var(--wa-color-green-40);
    --wa-color-brand-30: var(--wa-color-green-30);
    --wa-color-brand-20: var(--wa-color-green-20);
    --wa-color-brand-10: var(--wa-color-green-10);
    --wa-color-brand-05: var(--wa-color-green-05);
    --wa-color-brand: var(--wa-color-green);
    --wa-color-brand-on: var(--wa-color-green-on);
  }
  .wa-brand-cyan {
    --wa-color-brand-95: var(--wa-color-cyan-95);
    --wa-color-brand-90: var(--wa-color-cyan-90);
    --wa-color-brand-80: var(--wa-color-cyan-80);
    --wa-color-brand-70: var(--wa-color-cyan-70);
    --wa-color-brand-60: var(--wa-color-cyan-60);
    --wa-color-brand-50: var(--wa-color-cyan-50);
    --wa-color-brand-40: var(--wa-color-cyan-40);
    --wa-color-brand-30: var(--wa-color-cyan-30);
    --wa-color-brand-20: var(--wa-color-cyan-20);
    --wa-color-brand-10: var(--wa-color-cyan-10);
    --wa-color-brand-05: var(--wa-color-cyan-05);
    --wa-color-brand: var(--wa-color-cyan);
    --wa-color-brand-on: var(--wa-color-cyan-on);
  }
  .wa-brand-indigo {
    --wa-color-brand-95: var(--wa-color-indigo-95);
    --wa-color-brand-90: var(--wa-color-indigo-90);
    --wa-color-brand-80: var(--wa-color-indigo-80);
    --wa-color-brand-70: var(--wa-color-indigo-70);
    --wa-color-brand-60: var(--wa-color-indigo-60);
    --wa-color-brand-50: var(--wa-color-indigo-50);
    --wa-color-brand-40: var(--wa-color-indigo-40);
    --wa-color-brand-30: var(--wa-color-indigo-30);
    --wa-color-brand-20: var(--wa-color-indigo-20);
    --wa-color-brand-10: var(--wa-color-indigo-10);
    --wa-color-brand-05: var(--wa-color-indigo-05);
    --wa-color-brand: var(--wa-color-indigo);
    --wa-color-brand-on: var(--wa-color-indigo-on);
  }
  .wa-brand-purple {
    --wa-color-brand-95: var(--wa-color-purple-95);
    --wa-color-brand-90: var(--wa-color-purple-90);
    --wa-color-brand-80: var(--wa-color-purple-80);
    --wa-color-brand-70: var(--wa-color-purple-70);
    --wa-color-brand-60: var(--wa-color-purple-60);
    --wa-color-brand-50: var(--wa-color-purple-50);
    --wa-color-brand-40: var(--wa-color-purple-40);
    --wa-color-brand-30: var(--wa-color-purple-30);
    --wa-color-brand-20: var(--wa-color-purple-20);
    --wa-color-brand-10: var(--wa-color-purple-10);
    --wa-color-brand-05: var(--wa-color-purple-05);
    --wa-color-brand: var(--wa-color-purple);
    --wa-color-brand-on: var(--wa-color-purple-on);
  }
  .wa-brand-pink {
    --wa-color-brand-95: var(--wa-color-pink-95);
    --wa-color-brand-90: var(--wa-color-pink-90);
    --wa-color-brand-80: var(--wa-color-pink-80);
    --wa-color-brand-70: var(--wa-color-pink-70);
    --wa-color-brand-60: var(--wa-color-pink-60);
    --wa-color-brand-50: var(--wa-color-pink-50);
    --wa-color-brand-40: var(--wa-color-pink-40);
    --wa-color-brand-30: var(--wa-color-pink-30);
    --wa-color-brand-20: var(--wa-color-pink-20);
    --wa-color-brand-10: var(--wa-color-pink-10);
    --wa-color-brand-05: var(--wa-color-pink-05);
    --wa-color-brand: var(--wa-color-pink);
    --wa-color-brand-on: var(--wa-color-pink-on);
  }
  .wa-brand-gray {
    --wa-color-brand-95: var(--wa-color-gray-95);
    --wa-color-brand-90: var(--wa-color-gray-90);
    --wa-color-brand-80: var(--wa-color-gray-80);
    --wa-color-brand-70: var(--wa-color-gray-70);
    --wa-color-brand-60: var(--wa-color-gray-60);
    --wa-color-brand-50: var(--wa-color-gray-50);
    --wa-color-brand-40: var(--wa-color-gray-40);
    --wa-color-brand-30: var(--wa-color-gray-30);
    --wa-color-brand-20: var(--wa-color-gray-20);
    --wa-color-brand-10: var(--wa-color-gray-10);
    --wa-color-brand-05: var(--wa-color-gray-05);
    --wa-color-brand: var(--wa-color-gray);
    --wa-color-brand-on: var(--wa-color-gray-on);
  }
}


@layer wa-color-variant {
  :where(:root),
  .wa-neutral-gray {
    --wa-color-neutral-95: var(--wa-color-gray-95);
    --wa-color-neutral-90: var(--wa-color-gray-90);
    --wa-color-neutral-80: var(--wa-color-gray-80);
    --wa-color-neutral-70: var(--wa-color-gray-70);
    --wa-color-neutral-60: var(--wa-color-gray-60);
    --wa-color-neutral-50: var(--wa-color-gray-50);
    --wa-color-neutral-40: var(--wa-color-gray-40);
    --wa-color-neutral-30: var(--wa-color-gray-30);
    --wa-color-neutral-20: var(--wa-color-gray-20);
    --wa-color-neutral-10: var(--wa-color-gray-10);
    --wa-color-neutral-05: var(--wa-color-gray-05);
    --wa-color-neutral: var(--wa-color-gray);
    --wa-color-neutral-on: var(--wa-color-gray-on);
  }
  .wa-neutral-red {
    --wa-color-neutral-95: var(--wa-color-red-95);
    --wa-color-neutral-90: var(--wa-color-red-90);
    --wa-color-neutral-80: var(--wa-color-red-80);
    --wa-color-neutral-70: var(--wa-color-red-70);
    --wa-color-neutral-60: var(--wa-color-red-60);
    --wa-color-neutral-50: var(--wa-color-red-50);
    --wa-color-neutral-40: var(--wa-color-red-40);
    --wa-color-neutral-30: var(--wa-color-red-30);
    --wa-color-neutral-20: var(--wa-color-red-20);
    --wa-color-neutral-10: var(--wa-color-red-10);
    --wa-color-neutral-05: var(--wa-color-red-05);
    --wa-color-neutral: var(--wa-color-red);
    --wa-color-neutral-on: var(--wa-color-red-on);
  }
  .wa-neutral-orange {
    --wa-color-neutral-95: var(--wa-color-orange-95);
    --wa-color-neutral-90: var(--wa-color-orange-90);
    --wa-color-neutral-80: var(--wa-color-orange-80);
    --wa-color-neutral-70: var(--wa-color-orange-70);
    --wa-color-neutral-60: var(--wa-color-orange-60);
    --wa-color-neutral-50: var(--wa-color-orange-50);
    --wa-color-neutral-40: var(--wa-color-orange-40);
    --wa-color-neutral-30: var(--wa-color-orange-30);
    --wa-color-neutral-20: var(--wa-color-orange-20);
    --wa-color-neutral-10: var(--wa-color-orange-10);
    --wa-color-neutral-05: var(--wa-color-orange-05);
    --wa-color-neutral: var(--wa-color-orange);
    --wa-color-neutral-on: var(--wa-color-orange-on);
  }
  .wa-neutral-yellow {
    --wa-color-neutral-95: var(--wa-color-yellow-95);
    --wa-color-neutral-90: var(--wa-color-yellow-90);
    --wa-color-neutral-80: var(--wa-color-yellow-80);
    --wa-color-neutral-70: var(--wa-color-yellow-70);
    --wa-color-neutral-60: var(--wa-color-yellow-60);
    --wa-color-neutral-50: var(--wa-color-yellow-50);
    --wa-color-neutral-40: var(--wa-color-yellow-40);
    --wa-color-neutral-30: var(--wa-color-yellow-30);
    --wa-color-neutral-20: var(--wa-color-yellow-20);
    --wa-color-neutral-10: var(--wa-color-yellow-10);
    --wa-color-neutral-05: var(--wa-color-yellow-05);
    --wa-color-neutral: var(--wa-color-yellow);
    --wa-color-neutral-on: var(--wa-color-yellow-on);
  }
  .wa-neutral-green {
    --wa-color-neutral-95: var(--wa-color-green-95);
    --wa-color-neutral-90: var(--wa-color-green-90);
    --wa-color-neutral-80: var(--wa-color-green-80);
    --wa-color-neutral-70: var(--wa-color-green-70);
    --wa-color-neutral-60: var(--wa-color-green-60);
    --wa-color-neutral-50: var(--wa-color-green-50);
    --wa-color-neutral-40: var(--wa-color-green-40);
    --wa-color-neutral-30: var(--wa-color-green-30);
    --wa-color-neutral-20: var(--wa-color-green-20);
    --wa-color-neutral-10: var(--wa-color-green-10);
    --wa-color-neutral-05: var(--wa-color-green-05);
    --wa-color-neutral: var(--wa-color-green);
    --wa-color-neutral-on: var(--wa-color-green-on);
  }
  .wa-neutral-cyan {
    --wa-color-neutral-95: var(--wa-color-cyan-95);
    --wa-color-neutral-90: var(--wa-color-cyan-90);
    --wa-color-neutral-80: var(--wa-color-cyan-80);
    --wa-color-neutral-70: var(--wa-color-cyan-70);
    --wa-color-neutral-60: var(--wa-color-cyan-60);
    --wa-color-neutral-50: var(--wa-color-cyan-50);
    --wa-color-neutral-40: var(--wa-color-cyan-40);
    --wa-color-neutral-30: var(--wa-color-cyan-30);
    --wa-color-neutral-20: var(--wa-color-cyan-20);
    --wa-color-neutral-10: var(--wa-color-cyan-10);
    --wa-color-neutral-05: var(--wa-color-cyan-05);
    --wa-color-neutral: var(--wa-color-cyan);
    --wa-color-neutral-on: var(--wa-color-cyan-on);
  }
  .wa-neutral-blue {
    --wa-color-neutral-95: var(--wa-color-blue-95);
    --wa-color-neutral-90: var(--wa-color-blue-90);
    --wa-color-neutral-80: var(--wa-color-blue-80);
    --wa-color-neutral-70: var(--wa-color-blue-70);
    --wa-color-neutral-60: var(--wa-color-blue-60);
    --wa-color-neutral-50: var(--wa-color-blue-50);
    --wa-color-neutral-40: var(--wa-color-blue-40);
    --wa-color-neutral-30: var(--wa-color-blue-30);
    --wa-color-neutral-20: var(--wa-color-blue-20);
    --wa-color-neutral-10: var(--wa-color-blue-10);
    --wa-color-neutral-05: var(--wa-color-blue-05);
    --wa-color-neutral: var(--wa-color-blue);
    --wa-color-neutral-on: var(--wa-color-blue-on);
  }
  .wa-neutral-indigo {
    --wa-color-neutral-95: var(--wa-color-indigo-95);
    --wa-color-neutral-90: var(--wa-color-indigo-90);
    --wa-color-neutral-80: var(--wa-color-indigo-80);
    --wa-color-neutral-70: var(--wa-color-indigo-70);
    --wa-color-neutral-60: var(--wa-color-indigo-60);
    --wa-color-neutral-50: var(--wa-color-indigo-50);
    --wa-color-neutral-40: var(--wa-color-indigo-40);
    --wa-color-neutral-30: var(--wa-color-indigo-30);
    --wa-color-neutral-20: var(--wa-color-indigo-20);
    --wa-color-neutral-10: var(--wa-color-indigo-10);
    --wa-color-neutral-05: var(--wa-color-indigo-05);
    --wa-color-neutral: var(--wa-color-indigo);
    --wa-color-neutral-on: var(--wa-color-indigo-on);
  }
  .wa-neutral-purple {
    --wa-color-neutral-95: var(--wa-color-purple-95);
    --wa-color-neutral-90: var(--wa-color-purple-90);
    --wa-color-neutral-80: var(--wa-color-purple-80);
    --wa-color-neutral-70: var(--wa-color-purple-70);
    --wa-color-neutral-60: var(--wa-color-purple-60);
    --wa-color-neutral-50: var(--wa-color-purple-50);
    --wa-color-neutral-40: var(--wa-color-purple-40);
    --wa-color-neutral-30: var(--wa-color-purple-30);
    --wa-color-neutral-20: var(--wa-color-purple-20);
    --wa-color-neutral-10: var(--wa-color-purple-10);
    --wa-color-neutral-05: var(--wa-color-purple-05);
    --wa-color-neutral: var(--wa-color-purple);
    --wa-color-neutral-on: var(--wa-color-purple-on);
  }
  .wa-neutral-pink {
    --wa-color-neutral-95: var(--wa-color-pink-95);
    --wa-color-neutral-90: var(--wa-color-pink-90);
    --wa-color-neutral-80: var(--wa-color-pink-80);
    --wa-color-neutral-70: var(--wa-color-pink-70);
    --wa-color-neutral-60: var(--wa-color-pink-60);
    --wa-color-neutral-50: var(--wa-color-pink-50);
    --wa-color-neutral-40: var(--wa-color-pink-40);
    --wa-color-neutral-30: var(--wa-color-pink-30);
    --wa-color-neutral-20: var(--wa-color-pink-20);
    --wa-color-neutral-10: var(--wa-color-pink-10);
    --wa-color-neutral-05: var(--wa-color-pink-05);
    --wa-color-neutral: var(--wa-color-pink);
    --wa-color-neutral-on: var(--wa-color-pink-on);
  }
}


@layer wa-color-variant {
  :where(:root),
  .wa-success-green {
    --wa-color-success-95: var(--wa-color-green-95);
    --wa-color-success-90: var(--wa-color-green-90);
    --wa-color-success-80: var(--wa-color-green-80);
    --wa-color-success-70: var(--wa-color-green-70);
    --wa-color-success-60: var(--wa-color-green-60);
    --wa-color-success-50: var(--wa-color-green-50);
    --wa-color-success-40: var(--wa-color-green-40);
    --wa-color-success-30: var(--wa-color-green-30);
    --wa-color-success-20: var(--wa-color-green-20);
    --wa-color-success-10: var(--wa-color-green-10);
    --wa-color-success-05: var(--wa-color-green-05);
    --wa-color-success: var(--wa-color-green);
    --wa-color-success-on: var(--wa-color-green-on);
  }
  .wa-success-red {
    --wa-color-success-95: var(--wa-color-red-95);
    --wa-color-success-90: var(--wa-color-red-90);
    --wa-color-success-80: var(--wa-color-red-80);
    --wa-color-success-70: var(--wa-color-red-70);
    --wa-color-success-60: var(--wa-color-red-60);
    --wa-color-success-50: var(--wa-color-red-50);
    --wa-color-success-40: var(--wa-color-red-40);
    --wa-color-success-30: var(--wa-color-red-30);
    --wa-color-success-20: var(--wa-color-red-20);
    --wa-color-success-10: var(--wa-color-red-10);
    --wa-color-success-05: var(--wa-color-red-05);
    --wa-color-success: var(--wa-color-red);
    --wa-color-success-on: var(--wa-color-red-on);
  }
  .wa-success-orange {
    --wa-color-success-95: var(--wa-color-orange-95);
    --wa-color-success-90: var(--wa-color-orange-90);
    --wa-color-success-80: var(--wa-color-orange-80);
    --wa-color-success-70: var(--wa-color-orange-70);
    --wa-color-success-60: var(--wa-color-orange-60);
    --wa-color-success-50: var(--wa-color-orange-50);
    --wa-color-success-40: var(--wa-color-orange-40);
    --wa-color-success-30: var(--wa-color-orange-30);
    --wa-color-success-20: var(--wa-color-orange-20);
    --wa-color-success-10: var(--wa-color-orange-10);
    --wa-color-success-05: var(--wa-color-orange-05);
    --wa-color-success: var(--wa-color-orange);
    --wa-color-success-on: var(--wa-color-orange-on);
  }
  .wa-success-yellow {
    --wa-color-success-95: var(--wa-color-yellow-95);
    --wa-color-success-90: var(--wa-color-yellow-90);
    --wa-color-success-80: var(--wa-color-yellow-80);
    --wa-color-success-70: var(--wa-color-yellow-70);
    --wa-color-success-60: var(--wa-color-yellow-60);
    --wa-color-success-50: var(--wa-color-yellow-50);
    --wa-color-success-40: var(--wa-color-yellow-40);
    --wa-color-success-30: var(--wa-color-yellow-30);
    --wa-color-success-20: var(--wa-color-yellow-20);
    --wa-color-success-10: var(--wa-color-yellow-10);
    --wa-color-success-05: var(--wa-color-yellow-05);
    --wa-color-success: var(--wa-color-yellow);
    --wa-color-success-on: var(--wa-color-yellow-on);
  }
  .wa-success-cyan {
    --wa-color-success-95: var(--wa-color-cyan-95);
    --wa-color-success-90: var(--wa-color-cyan-90);
    --wa-color-success-80: var(--wa-color-cyan-80);
    --wa-color-success-70: var(--wa-color-cyan-70);
    --wa-color-success-60: var(--wa-color-cyan-60);
    --wa-color-success-50: var(--wa-color-cyan-50);
    --wa-color-success-40: var(--wa-color-cyan-40);
    --wa-color-success-30: var(--wa-color-cyan-30);
    --wa-color-success-20: var(--wa-color-cyan-20);
    --wa-color-success-10: var(--wa-color-cyan-10);
    --wa-color-success-05: var(--wa-color-cyan-05);
    --wa-color-success: var(--wa-color-cyan);
    --wa-color-success-on: var(--wa-color-cyan-on);
  }
  .wa-success-blue {
    --wa-color-success-95: var(--wa-color-blue-95);
    --wa-color-success-90: var(--wa-color-blue-90);
    --wa-color-success-80: var(--wa-color-blue-80);
    --wa-color-success-70: var(--wa-color-blue-70);
    --wa-color-success-60: var(--wa-color-blue-60);
    --wa-color-success-50: var(--wa-color-blue-50);
    --wa-color-success-40: var(--wa-color-blue-40);
    --wa-color-success-30: var(--wa-color-blue-30);
    --wa-color-success-20: var(--wa-color-blue-20);
    --wa-color-success-10: var(--wa-color-blue-10);
    --wa-color-success-05: var(--wa-color-blue-05);
    --wa-color-success: var(--wa-color-blue);
    --wa-color-success-on: var(--wa-color-blue-on);
  }
  .wa-success-indigo {
    --wa-color-success-95: var(--wa-color-indigo-95);
    --wa-color-success-90: var(--wa-color-indigo-90);
    --wa-color-success-80: var(--wa-color-indigo-80);
    --wa-color-success-70: var(--wa-color-indigo-70);
    --wa-color-success-60: var(--wa-color-indigo-60);
    --wa-color-success-50: var(--wa-color-indigo-50);
    --wa-color-success-40: var(--wa-color-indigo-40);
    --wa-color-success-30: var(--wa-color-indigo-30);
    --wa-color-success-20: var(--wa-color-indigo-20);
    --wa-color-success-10: var(--wa-color-indigo-10);
    --wa-color-success-05: var(--wa-color-indigo-05);
    --wa-color-success: var(--wa-color-indigo);
    --wa-color-success-on: var(--wa-color-indigo-on);
  }
  .wa-success-purple {
    --wa-color-success-95: var(--wa-color-purple-95);
    --wa-color-success-90: var(--wa-color-purple-90);
    --wa-color-success-80: var(--wa-color-purple-80);
    --wa-color-success-70: var(--wa-color-purple-70);
    --wa-color-success-60: var(--wa-color-purple-60);
    --wa-color-success-50: var(--wa-color-purple-50);
    --wa-color-success-40: var(--wa-color-purple-40);
    --wa-color-success-30: var(--wa-color-purple-30);
    --wa-color-success-20: var(--wa-color-purple-20);
    --wa-color-success-10: var(--wa-color-purple-10);
    --wa-color-success-05: var(--wa-color-purple-05);
    --wa-color-success: var(--wa-color-purple);
    --wa-color-success-on: var(--wa-color-purple-on);
  }
  .wa-success-pink {
    --wa-color-success-95: var(--wa-color-pink-95);
    --wa-color-success-90: var(--wa-color-pink-90);
    --wa-color-success-80: var(--wa-color-pink-80);
    --wa-color-success-70: var(--wa-color-pink-70);
    --wa-color-success-60: var(--wa-color-pink-60);
    --wa-color-success-50: var(--wa-color-pink-50);
    --wa-color-success-40: var(--wa-color-pink-40);
    --wa-color-success-30: var(--wa-color-pink-30);
    --wa-color-success-20: var(--wa-color-pink-20);
    --wa-color-success-10: var(--wa-color-pink-10);
    --wa-color-success-05: var(--wa-color-pink-05);
    --wa-color-success: var(--wa-color-pink);
    --wa-color-success-on: var(--wa-color-pink-on);
  }
  .wa-success-gray {
    --wa-color-success-95: var(--wa-color-gray-95);
    --wa-color-success-90: var(--wa-color-gray-90);
    --wa-color-success-80: var(--wa-color-gray-80);
    --wa-color-success-70: var(--wa-color-gray-70);
    --wa-color-success-60: var(--wa-color-gray-60);
    --wa-color-success-50: var(--wa-color-gray-50);
    --wa-color-success-40: var(--wa-color-gray-40);
    --wa-color-success-30: var(--wa-color-gray-30);
    --wa-color-success-20: var(--wa-color-gray-20);
    --wa-color-success-10: var(--wa-color-gray-10);
    --wa-color-success-05: var(--wa-color-gray-05);
    --wa-color-success: var(--wa-color-gray);
    --wa-color-success-on: var(--wa-color-gray-on);
  }
}


@layer wa-color-variant {
  :where(:root),
  .wa-warning-yellow {
    --wa-color-warning-95: var(--wa-color-yellow-95);
    --wa-color-warning-90: var(--wa-color-yellow-90);
    --wa-color-warning-80: var(--wa-color-yellow-80);
    --wa-color-warning-70: var(--wa-color-yellow-70);
    --wa-color-warning-60: var(--wa-color-yellow-60);
    --wa-color-warning-50: var(--wa-color-yellow-50);
    --wa-color-warning-40: var(--wa-color-yellow-40);
    --wa-color-warning-30: var(--wa-color-yellow-30);
    --wa-color-warning-20: var(--wa-color-yellow-20);
    --wa-color-warning-10: var(--wa-color-yellow-10);
    --wa-color-warning-05: var(--wa-color-yellow-05);
    --wa-color-warning: var(--wa-color-yellow);
    --wa-color-warning-on: var(--wa-color-yellow-on);
  }
  .wa-warning-red {
    --wa-color-warning-95: var(--wa-color-red-95);
    --wa-color-warning-90: var(--wa-color-red-90);
    --wa-color-warning-80: var(--wa-color-red-80);
    --wa-color-warning-70: var(--wa-color-red-70);
    --wa-color-warning-60: var(--wa-color-red-60);
    --wa-color-warning-50: var(--wa-color-red-50);
    --wa-color-warning-40: var(--wa-color-red-40);
    --wa-color-warning-30: var(--wa-color-red-30);
    --wa-color-warning-20: var(--wa-color-red-20);
    --wa-color-warning-10: var(--wa-color-red-10);
    --wa-color-warning-05: var(--wa-color-red-05);
    --wa-color-warning: var(--wa-color-red);
    --wa-color-warning-on: var(--wa-color-red-on);
  }
  .wa-warning-orange {
    --wa-color-warning-95: var(--wa-color-orange-95);
    --wa-color-warning-90: var(--wa-color-orange-90);
    --wa-color-warning-80: var(--wa-color-orange-80);
    --wa-color-warning-70: var(--wa-color-orange-70);
    --wa-color-warning-60: var(--wa-color-orange-60);
    --wa-color-warning-50: var(--wa-color-orange-50);
    --wa-color-warning-40: var(--wa-color-orange-40);
    --wa-color-warning-30: var(--wa-color-orange-30);
    --wa-color-warning-20: var(--wa-color-orange-20);
    --wa-color-warning-10: var(--wa-color-orange-10);
    --wa-color-warning-05: var(--wa-color-orange-05);
    --wa-color-warning: var(--wa-color-orange);
    --wa-color-warning-on: var(--wa-color-orange-on);
  }
  .wa-warning-green {
    --wa-color-warning-95: var(--wa-color-green-95);
    --wa-color-warning-90: var(--wa-color-green-90);
    --wa-color-warning-80: var(--wa-color-green-80);
    --wa-color-warning-70: var(--wa-color-green-70);
    --wa-color-warning-60: var(--wa-color-green-60);
    --wa-color-warning-50: var(--wa-color-green-50);
    --wa-color-warning-40: var(--wa-color-green-40);
    --wa-color-warning-30: var(--wa-color-green-30);
    --wa-color-warning-20: var(--wa-color-green-20);
    --wa-color-warning-10: var(--wa-color-green-10);
    --wa-color-warning-05: var(--wa-color-green-05);
    --wa-color-warning: var(--wa-color-green);
    --wa-color-warning-on: var(--wa-color-green-on);
  }
  .wa-warning-cyan {
    --wa-color-warning-95: var(--wa-color-cyan-95);
    --wa-color-warning-90: var(--wa-color-cyan-90);
    --wa-color-warning-80: var(--wa-color-cyan-80);
    --wa-color-warning-70: var(--wa-color-cyan-70);
    --wa-color-warning-60: var(--wa-color-cyan-60);
    --wa-color-warning-50: var(--wa-color-cyan-50);
    --wa-color-warning-40: var(--wa-color-cyan-40);
    --wa-color-warning-30: var(--wa-color-cyan-30);
    --wa-color-warning-20: var(--wa-color-cyan-20);
    --wa-color-warning-10: var(--wa-color-cyan-10);
    --wa-color-warning-05: var(--wa-color-cyan-05);
    --wa-color-warning: var(--wa-color-cyan);
    --wa-color-warning-on: var(--wa-color-cyan-on);
  }
  .wa-warning-blue {
    --wa-color-warning-95: var(--wa-color-blue-95);
    --wa-color-warning-90: var(--wa-color-blue-90);
    --wa-color-warning-80: var(--wa-color-blue-80);
    --wa-color-warning-70: var(--wa-color-blue-70);
    --wa-color-warning-60: var(--wa-color-blue-60);
    --wa-color-warning-50: var(--wa-color-blue-50);
    --wa-color-warning-40: var(--wa-color-blue-40);
    --wa-color-warning-30: var(--wa-color-blue-30);
    --wa-color-warning-20: var(--wa-color-blue-20);
    --wa-color-warning-10: var(--wa-color-blue-10);
    --wa-color-warning-05: var(--wa-color-blue-05);
    --wa-color-warning: var(--wa-color-blue);
    --wa-color-warning-on: var(--wa-color-blue-on);
  }
  .wa-warning-indigo {
    --wa-color-warning-95: var(--wa-color-indigo-95);
    --wa-color-warning-90: var(--wa-color-indigo-90);
    --wa-color-warning-80: var(--wa-color-indigo-80);
    --wa-color-warning-70: var(--wa-color-indigo-70);
    --wa-color-warning-60: var(--wa-color-indigo-60);
    --wa-color-warning-50: var(--wa-color-indigo-50);
    --wa-color-warning-40: var(--wa-color-indigo-40);
    --wa-color-warning-30: var(--wa-color-indigo-30);
    --wa-color-warning-20: var(--wa-color-indigo-20);
    --wa-color-warning-10: var(--wa-color-indigo-10);
    --wa-color-warning-05: var(--wa-color-indigo-05);
    --wa-color-warning: var(--wa-color-indigo);
    --wa-color-warning-on: var(--wa-color-indigo-on);
  }
  .wa-warning-purple {
    --wa-color-warning-95: var(--wa-color-purple-95);
    --wa-color-warning-90: var(--wa-color-purple-90);
    --wa-color-warning-80: var(--wa-color-purple-80);
    --wa-color-warning-70: var(--wa-color-purple-70);
    --wa-color-warning-60: var(--wa-color-purple-60);
    --wa-color-warning-50: var(--wa-color-purple-50);
    --wa-color-warning-40: var(--wa-color-purple-40);
    --wa-color-warning-30: var(--wa-color-purple-30);
    --wa-color-warning-20: var(--wa-color-purple-20);
    --wa-color-warning-10: var(--wa-color-purple-10);
    --wa-color-warning-05: var(--wa-color-purple-05);
    --wa-color-warning: var(--wa-color-purple);
    --wa-color-warning-on: var(--wa-color-purple-on);
  }
  .wa-warning-pink {
    --wa-color-warning-95: var(--wa-color-pink-95);
    --wa-color-warning-90: var(--wa-color-pink-90);
    --wa-color-warning-80: var(--wa-color-pink-80);
    --wa-color-warning-70: var(--wa-color-pink-70);
    --wa-color-warning-60: var(--wa-color-pink-60);
    --wa-color-warning-50: var(--wa-color-pink-50);
    --wa-color-warning-40: var(--wa-color-pink-40);
    --wa-color-warning-30: var(--wa-color-pink-30);
    --wa-color-warning-20: var(--wa-color-pink-20);
    --wa-color-warning-10: var(--wa-color-pink-10);
    --wa-color-warning-05: var(--wa-color-pink-05);
    --wa-color-warning: var(--wa-color-pink);
    --wa-color-warning-on: var(--wa-color-pink-on);
  }
  .wa-warning-gray {
    --wa-color-warning-95: var(--wa-color-gray-95);
    --wa-color-warning-90: var(--wa-color-gray-90);
    --wa-color-warning-80: var(--wa-color-gray-80);
    --wa-color-warning-70: var(--wa-color-gray-70);
    --wa-color-warning-60: var(--wa-color-gray-60);
    --wa-color-warning-50: var(--wa-color-gray-50);
    --wa-color-warning-40: var(--wa-color-gray-40);
    --wa-color-warning-30: var(--wa-color-gray-30);
    --wa-color-warning-20: var(--wa-color-gray-20);
    --wa-color-warning-10: var(--wa-color-gray-10);
    --wa-color-warning-05: var(--wa-color-gray-05);
    --wa-color-warning: var(--wa-color-gray);
    --wa-color-warning-on: var(--wa-color-gray-on);
  }
}


@layer wa-color-variant {
  :where(:root),
  .wa-danger-red {
    --wa-color-danger-95: var(--wa-color-red-95);
    --wa-color-danger-90: var(--wa-color-red-90);
    --wa-color-danger-80: var(--wa-color-red-80);
    --wa-color-danger-70: var(--wa-color-red-70);
    --wa-color-danger-60: var(--wa-color-red-60);
    --wa-color-danger-50: var(--wa-color-red-50);
    --wa-color-danger-40: var(--wa-color-red-40);
    --wa-color-danger-30: var(--wa-color-red-30);
    --wa-color-danger-20: var(--wa-color-red-20);
    --wa-color-danger-10: var(--wa-color-red-10);
    --wa-color-danger-05: var(--wa-color-red-05);
    --wa-color-danger: var(--wa-color-red);
    --wa-color-danger-on: var(--wa-color-red-on);
  }
  .wa-danger-orange {
    --wa-color-danger-95: var(--wa-color-orange-95);
    --wa-color-danger-90: var(--wa-color-orange-90);
    --wa-color-danger-80: var(--wa-color-orange-80);
    --wa-color-danger-70: var(--wa-color-orange-70);
    --wa-color-danger-60: var(--wa-color-orange-60);
    --wa-color-danger-50: var(--wa-color-orange-50);
    --wa-color-danger-40: var(--wa-color-orange-40);
    --wa-color-danger-30: var(--wa-color-orange-30);
    --wa-color-danger-20: var(--wa-color-orange-20);
    --wa-color-danger-10: var(--wa-color-orange-10);
    --wa-color-danger-05: var(--wa-color-orange-05);
    --wa-color-danger: var(--wa-color-orange);
    --wa-color-danger-on: var(--wa-color-orange-on);
  }
  .wa-danger-yellow {
    --wa-color-danger-95: var(--wa-color-yellow-95);
    --wa-color-danger-90: var(--wa-color-yellow-90);
    --wa-color-danger-80: var(--wa-color-yellow-80);
    --wa-color-danger-70: var(--wa-color-yellow-70);
    --wa-color-danger-60: var(--wa-color-yellow-60);
    --wa-color-danger-50: var(--wa-color-yellow-50);
    --wa-color-danger-40: var(--wa-color-yellow-40);
    --wa-color-danger-30: var(--wa-color-yellow-30);
    --wa-color-danger-20: var(--wa-color-yellow-20);
    --wa-color-danger-10: var(--wa-color-yellow-10);
    --wa-color-danger-05: var(--wa-color-yellow-05);
    --wa-color-danger: var(--wa-color-yellow);
    --wa-color-danger-on: var(--wa-color-yellow-on);
  }
  .wa-danger-green {
    --wa-color-danger-95: var(--wa-color-green-95);
    --wa-color-danger-90: var(--wa-color-green-90);
    --wa-color-danger-80: var(--wa-color-green-80);
    --wa-color-danger-70: var(--wa-color-green-70);
    --wa-color-danger-60: var(--wa-color-green-60);
    --wa-color-danger-50: var(--wa-color-green-50);
    --wa-color-danger-40: var(--wa-color-green-40);
    --wa-color-danger-30: var(--wa-color-green-30);
    --wa-color-danger-20: var(--wa-color-green-20);
    --wa-color-danger-10: var(--wa-color-green-10);
    --wa-color-danger-05: var(--wa-color-green-05);
    --wa-color-danger: var(--wa-color-green);
    --wa-color-danger-on: var(--wa-color-green-on);
  }
  .wa-danger-cyan {
    --wa-color-danger-95: var(--wa-color-cyan-95);
    --wa-color-danger-90: var(--wa-color-cyan-90);
    --wa-color-danger-80: var(--wa-color-cyan-80);
    --wa-color-danger-70: var(--wa-color-cyan-70);
    --wa-color-danger-60: var(--wa-color-cyan-60);
    --wa-color-danger-50: var(--wa-color-cyan-50);
    --wa-color-danger-40: var(--wa-color-cyan-40);
    --wa-color-danger-30: var(--wa-color-cyan-30);
    --wa-color-danger-20: var(--wa-color-cyan-20);
    --wa-color-danger-10: var(--wa-color-cyan-10);
    --wa-color-danger-05: var(--wa-color-cyan-05);
    --wa-color-danger: var(--wa-color-cyan);
    --wa-color-danger-on: var(--wa-color-cyan-on);
  }
  .wa-danger-blue {
    --wa-color-danger-95: var(--wa-color-blue-95);
    --wa-color-danger-90: var(--wa-color-blue-90);
    --wa-color-danger-80: var(--wa-color-blue-80);
    --wa-color-danger-70: var(--wa-color-blue-70);
    --wa-color-danger-60: var(--wa-color-blue-60);
    --wa-color-danger-50: var(--wa-color-blue-50);
    --wa-color-danger-40: var(--wa-color-blue-40);
    --wa-color-danger-30: var(--wa-color-blue-30);
    --wa-color-danger-20: var(--wa-color-blue-20);
    --wa-color-danger-10: var(--wa-color-blue-10);
    --wa-color-danger-05: var(--wa-color-blue-05);
    --wa-color-danger: var(--wa-color-blue);
    --wa-color-danger-on: var(--wa-color-blue-on);
  }
  .wa-danger-indigo {
    --wa-color-danger-95: var(--wa-color-indigo-95);
    --wa-color-danger-90: var(--wa-color-indigo-90);
    --wa-color-danger-80: var(--wa-color-indigo-80);
    --wa-color-danger-70: var(--wa-color-indigo-70);
    --wa-color-danger-60: var(--wa-color-indigo-60);
    --wa-color-danger-50: var(--wa-color-indigo-50);
    --wa-color-danger-40: var(--wa-color-indigo-40);
    --wa-color-danger-30: var(--wa-color-indigo-30);
    --wa-color-danger-20: var(--wa-color-indigo-20);
    --wa-color-danger-10: var(--wa-color-indigo-10);
    --wa-color-danger-05: var(--wa-color-indigo-05);
    --wa-color-danger: var(--wa-color-indigo);
    --wa-color-danger-on: var(--wa-color-indigo-on);
  }
  .wa-danger-purple {
    --wa-color-danger-95: var(--wa-color-purple-95);
    --wa-color-danger-90: var(--wa-color-purple-90);
    --wa-color-danger-80: var(--wa-color-purple-80);
    --wa-color-danger-70: var(--wa-color-purple-70);
    --wa-color-danger-60: var(--wa-color-purple-60);
    --wa-color-danger-50: var(--wa-color-purple-50);
    --wa-color-danger-40: var(--wa-color-purple-40);
    --wa-color-danger-30: var(--wa-color-purple-30);
    --wa-color-danger-20: var(--wa-color-purple-20);
    --wa-color-danger-10: var(--wa-color-purple-10);
    --wa-color-danger-05: var(--wa-color-purple-05);
    --wa-color-danger: var(--wa-color-purple);
    --wa-color-danger-on: var(--wa-color-purple-on);
  }
  .wa-danger-pink {
    --wa-color-danger-95: var(--wa-color-pink-95);
    --wa-color-danger-90: var(--wa-color-pink-90);
    --wa-color-danger-80: var(--wa-color-pink-80);
    --wa-color-danger-70: var(--wa-color-pink-70);
    --wa-color-danger-60: var(--wa-color-pink-60);
    --wa-color-danger-50: var(--wa-color-pink-50);
    --wa-color-danger-40: var(--wa-color-pink-40);
    --wa-color-danger-30: var(--wa-color-pink-30);
    --wa-color-danger-20: var(--wa-color-pink-20);
    --wa-color-danger-10: var(--wa-color-pink-10);
    --wa-color-danger-05: var(--wa-color-pink-05);
    --wa-color-danger: var(--wa-color-pink);
    --wa-color-danger-on: var(--wa-color-pink-on);
  }
  .wa-danger-gray {
    --wa-color-danger-95: var(--wa-color-gray-95);
    --wa-color-danger-90: var(--wa-color-gray-90);
    --wa-color-danger-80: var(--wa-color-gray-80);
    --wa-color-danger-70: var(--wa-color-gray-70);
    --wa-color-danger-60: var(--wa-color-gray-60);
    --wa-color-danger-50: var(--wa-color-gray-50);
    --wa-color-danger-40: var(--wa-color-gray-40);
    --wa-color-danger-30: var(--wa-color-gray-30);
    --wa-color-danger-20: var(--wa-color-gray-20);
    --wa-color-danger-10: var(--wa-color-gray-10);
    --wa-color-danger-05: var(--wa-color-gray-05);
    --wa-color-danger: var(--wa-color-gray);
    --wa-color-danger-on: var(--wa-color-gray-on);
  }
}




:where(:root),
:host {
  --wa-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-red-key), 1) * 100%));
  --wa-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%));
  --wa-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%));
  --wa-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-green-key), 1) * 100%));
  --wa-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%));
  --wa-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%));
  --wa-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%));
  --wa-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%));
  --wa-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%));
  --wa-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%));
  --wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
  --wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
  --wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
  --wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
  --wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
  --wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
  --wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
  --wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
  --wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
  --wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
}


@layer wa-color-palette {
  :where(:root),
  .wa-palette-default {
    --wa-color-red-95: #fff0ef ;
    --wa-color-red-90: #ffdedc ;
    --wa-color-red-80: #ffb8b6 ;
    --wa-color-red-70: #fd8f90 ;
    --wa-color-red-60: #f3676c ;
    --wa-color-red-50: #dc3146 ;
    --wa-color-red-40: #b30532 ;
    --wa-color-red-30: #8a132c ;
    --wa-color-red-20: #631323 ;
    --wa-color-red-10: #3e0913 ;
    --wa-color-red-05: #2a040b ;
    --wa-color-red: var(--wa-color-red-50);
    --wa-color-red-key: 50;
    --wa-color-orange-95: #fff0e6 ;
    --wa-color-orange-90: #ffdfca ;
    --wa-color-orange-80: #ffbb94 ;
    --wa-color-orange-70: #ff9266 ;
    --wa-color-orange-60: #f46a45 ;
    --wa-color-orange-50: #cd491c ;
    --wa-color-orange-40: #9f3501 ;
    --wa-color-orange-30: #802700 ;
    --wa-color-orange-20: #601b00 ;
    --wa-color-orange-10: #3c0d00 ;
    --wa-color-orange-05: #280600 ;
    --wa-color-orange: var(--wa-color-orange-60);
    --wa-color-orange-key: 60;
    --wa-color-yellow-95: #fef3cd ;
    --wa-color-yellow-90: #ffe495 ;
    --wa-color-yellow-80: #fac22b ;
    --wa-color-yellow-70: #ef9d00 ;
    --wa-color-yellow-60: #da7e00 ;
    --wa-color-yellow-50: #b45f04 ;
    --wa-color-yellow-40: #8c4602 ;
    --wa-color-yellow-30: #6f3601 ;
    --wa-color-yellow-20: #532600 ;
    --wa-color-yellow-10: #331600 ;
    --wa-color-yellow-05: #220c00 ;
    --wa-color-yellow: var(--wa-color-yellow-80);
    --wa-color-yellow-key: 80;
    --wa-color-green-95: #e3f9e3 ;
    --wa-color-green-90: #c2f2c1 ;
    --wa-color-green-80: #93da98 ;
    --wa-color-green-70: #5dc36f ;
    --wa-color-green-60: #00ac49 ;
    --wa-color-green-50: #00883c ;
    --wa-color-green-40: #036730 ;
    --wa-color-green-30: #0a5027 ;
    --wa-color-green-20: #0a3a1d ;
    --wa-color-green-10: #052310 ;
    --wa-color-green-05: #031608 ;
    --wa-color-green: var(--wa-color-green-60);
    --wa-color-green-key: 60;
    --wa-color-cyan-95: #e3f6fb ;
    --wa-color-cyan-90: #c5ecf7 ;
    --wa-color-cyan-80: #7fd6ec ;
    --wa-color-cyan-70: #2fbedc ;
    --wa-color-cyan-60: #00a3c0 ;
    --wa-color-cyan-50: #078098 ;
    --wa-color-cyan-40: #026274 ;
    --wa-color-cyan-30: #014c5b ;
    --wa-color-cyan-20: #003844 ;
    --wa-color-cyan-10: #002129 ;
    --wa-color-cyan-05: #00151b ;
    --wa-color-cyan: var(--wa-color-cyan-70);
    --wa-color-cyan-key: 70;
    --wa-color-blue-95: #e8f3ff ;
    --wa-color-blue-90: #d1e8ff ;
    --wa-color-blue-80: #9fceff ;
    --wa-color-blue-70: #6eb3ff ;
    --wa-color-blue-60: #3e96ff ;
    --wa-color-blue-50: #0071ec ;
    --wa-color-blue-40: #0053c0 ;
    --wa-color-blue-30: #003f9c ;
    --wa-color-blue-20: #002d77 ;
    --wa-color-blue-10: #001a4e ;
    --wa-color-blue-05: #000f35 ;
    --wa-color-blue: var(--wa-color-blue-50);
    --wa-color-blue-key: 50;
    --wa-color-indigo-95: #f0f2ff ;
    --wa-color-indigo-90: #dfe5ff ;
    --wa-color-indigo-80: #bcc7ff ;
    --wa-color-indigo-70: #9da9ff ;
    --wa-color-indigo-60: #808aff ;
    --wa-color-indigo-50: #6163f2 ;
    --wa-color-indigo-40: #4945cb ;
    --wa-color-indigo-30: #3933a7 ;
    --wa-color-indigo-20: #292381 ;
    --wa-color-indigo-10: #181255 ;
    --wa-color-indigo-05: #0d0a3a ;
    --wa-color-indigo: var(--wa-color-indigo-50);
    --wa-color-indigo-key: 50;
    --wa-color-purple-95: #f7f0ff ;
    --wa-color-purple-90: #eedfff ;
    --wa-color-purple-80: #ddbdff ;
    --wa-color-purple-70: #ca99ff ;
    --wa-color-purple-60: #b678f5 ;
    --wa-color-purple-50: #9951db ;
    --wa-color-purple-40: #7936b3 ;
    --wa-color-purple-30: #612692 ;
    --wa-color-purple-20: #491870 ;
    --wa-color-purple-10: #2d0b48 ;
    --wa-color-purple-05: #1e0532 ;
    --wa-color-purple: var(--wa-color-purple-50);
    --wa-color-purple-key: 50;
    --wa-color-pink-95: #feeff9 ;
    --wa-color-pink-90: #feddf0 ;
    --wa-color-pink-80: #fcb5d8 ;
    --wa-color-pink-70: #f78dbf ;
    --wa-color-pink-60: #e66ba3 ;
    --wa-color-pink-50: #c84382 ;
    --wa-color-pink-40: #9e2a6c ;
    --wa-color-pink-30: #7d1e58 ;
    --wa-color-pink-20: #5e1342 ;
    --wa-color-pink-10: #3c0828 ;
    --wa-color-pink-05: #28041a ;
    --wa-color-pink: var(--wa-color-pink-50);
    --wa-color-pink-key: 50;
    --wa-color-gray-95: #f1f2f3 ;
    --wa-color-gray-90: #e4e5e9 ;
    --wa-color-gray-80: #c7c9d0 ;
    --wa-color-gray-70: #abaeb9 ;
    --wa-color-gray-60: #9194a2 ;
    --wa-color-gray-50: #717584 ;
    --wa-color-gray-40: #545868 ;
    --wa-color-gray-30: #424554 ;
    --wa-color-gray-20: #2f323f ;
    --wa-color-gray-10: #1b1d26 ;
    --wa-color-gray-05: #101219 ;
    --wa-color-gray: var(--wa-color-gray-40);
    --wa-color-gray-key: 40;
  }
}


@layer wa-theme {
  :where(:root),
  .wa-theme-default,
  .wa-light,
  .wa-dark .wa-invert,
  .wa-light .wa-theme-default,
  .wa-dark .wa-theme-default.wa-invert,
  .wa-dark .wa-theme-default .wa-invert {
    color-scheme: light;
    color: var(--wa-color-text-normal);
    --wa-color-surface-raised: white;
    --wa-color-surface-default: white;
    --wa-color-surface-lowered: var(--wa-color-neutral-95);
    --wa-color-surface-border: var(--wa-color-neutral-90);
    --wa-color-text-normal: var(--wa-color-neutral-10);
    --wa-color-text-quiet: var(--wa-color-neutral-40);
    --wa-color-text-link: var(--wa-color-brand-40);
    --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
    --wa-color-shadow: color-mix( in oklab, var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), transparent );
    --wa-color-focus: var(--wa-color-brand-60);
    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 10%;
    --wa-color-mix-active: var(--wa-color-surface-default) 10%;
    --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
    --wa-color-brand-fill-normal: var(--wa-color-brand-90);
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --wa-color-brand-border-quiet: var(--wa-color-brand-90);
    --wa-color-brand-border-normal: var(--wa-color-brand-80);
    --wa-color-brand-border-loud: var(--wa-color-brand-60);
    --wa-color-brand-on-quiet: var(--wa-color-brand-40);
    --wa-color-brand-on-normal: var(--wa-color-brand-30);
    --wa-color-brand-on-loud: white;
    --wa-color-success-fill-quiet: var(--wa-color-success-95);
    --wa-color-success-fill-normal: var(--wa-color-success-90);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: var(--wa-color-success-90);
    --wa-color-success-border-normal: var(--wa-color-success-80);
    --wa-color-success-border-loud: var(--wa-color-success-60);
    --wa-color-success-on-quiet: var(--wa-color-success-40);
    --wa-color-success-on-normal: var(--wa-color-success-30);
    --wa-color-success-on-loud: white;
    --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
    --wa-color-warning-fill-normal: var(--wa-color-warning-90);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: var(--wa-color-warning-90);
    --wa-color-warning-border-normal: var(--wa-color-warning-80);
    --wa-color-warning-border-loud: var(--wa-color-warning-60);
    --wa-color-warning-on-quiet: var(--wa-color-warning-40);
    --wa-color-warning-on-normal: var(--wa-color-warning-30);
    --wa-color-warning-on-loud: white;
    --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
    --wa-color-danger-fill-normal: var(--wa-color-danger-90);
    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
    --wa-color-danger-border-quiet: var(--wa-color-danger-90);
    --wa-color-danger-border-normal: var(--wa-color-danger-80);
    --wa-color-danger-border-loud: var(--wa-color-danger-60);
    --wa-color-danger-on-quiet: var(--wa-color-danger-40);
    --wa-color-danger-on-normal: var(--wa-color-danger-30);
    --wa-color-danger-on-loud: white;
    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-on-loud: white;
  }
  .wa-dark,
  .wa-invert,
  .wa-dark .wa-theme-default,
  .wa-light .wa-theme-default.wa-invert,
  .wa-light .wa-theme-default .wa-invert {
    color-scheme: dark;
    color: var(--wa-color-text-normal);
    --wa-color-surface-raised: var(--wa-color-neutral-10);
    --wa-color-surface-default: var(--wa-color-neutral-05);
    --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
    --wa-color-surface-border: var(--wa-color-neutral-20);
    --wa-color-text-normal: var(--wa-color-neutral-95);
    --wa-color-text-quiet: var(--wa-color-neutral-60);
    --wa-color-text-link: var(--wa-color-brand-70);
    --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
    --wa-color-shadow: color-mix( in oklab, var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent );
    --wa-color-focus: var(--wa-color-brand-60);
    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 20%;
    --wa-color-mix-active: var(--wa-color-surface-default) 20%;
    --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
    --wa-color-brand-fill-normal: var(--wa-color-brand-20);
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --wa-color-brand-border-quiet: var(--wa-color-brand-20);
    --wa-color-brand-border-normal: var(--wa-color-brand-30);
    --wa-color-brand-border-loud: var(--wa-color-brand-40);
    --wa-color-brand-on-quiet: var(--wa-color-brand-60);
    --wa-color-brand-on-normal: var(--wa-color-brand-70);
    --wa-color-brand-on-loud: white;
    --wa-color-success-fill-quiet: var(--wa-color-success-10);
    --wa-color-success-fill-normal: var(--wa-color-success-20);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: var(--wa-color-success-20);
    --wa-color-success-border-normal: var(--wa-color-success-30);
    --wa-color-success-border-loud: var(--wa-color-success-40);
    --wa-color-success-on-quiet: var(--wa-color-success-60);
    --wa-color-success-on-normal: var(--wa-color-success-70);
    --wa-color-success-on-loud: white;
    --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
    --wa-color-warning-fill-normal: var(--wa-color-warning-20);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: var(--wa-color-warning-20);
    --wa-color-warning-border-normal: var(--wa-color-warning-30);
    --wa-color-warning-border-loud: var(--wa-color-warning-40);
    --wa-color-warning-on-quiet: var(--wa-color-warning-60);
    --wa-color-warning-on-normal: var(--wa-color-warning-70);
    --wa-color-warning-on-loud: white;
    --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
    --wa-color-danger-fill-normal: var(--wa-color-danger-20);
    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
    --wa-color-danger-border-quiet: var(--wa-color-danger-20);
    --wa-color-danger-border-normal: var(--wa-color-danger-30);
    --wa-color-danger-border-loud: var(--wa-color-danger-40);
    --wa-color-danger-on-quiet: var(--wa-color-danger-60);
    --wa-color-danger-on-normal: var(--wa-color-danger-70);
    --wa-color-danger-on-loud: white;
    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
    --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
  }
  :where(:root),
  .wa-theme-default,
  .wa-light,
  .wa-dark,
  .wa-invert {
    font-family: var(--wa-font-family-body);
    --wa-font-family-body:
      ui-sans-serif,
      system-ui,
      sans-serif;
    --wa-font-family-heading: var(--wa-font-family-body);
    --wa-font-family-code: ui-monospace, monospace;
    --wa-font-family-longform: ui-serif, serif;
    --wa-font-size-scale: 1;
    --wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px);
    --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px);
    --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px);
    --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px);
    --wa-font-size-m: calc(1rem * var(--wa-font-size-scale));
    --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px);
    --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px);
    --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px);
    --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px);
    --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px);
    --wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px);
    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
    --wa-font-weight-light: 300;
    --wa-font-weight-normal: 400;
    --wa-font-weight-semibold: 500;
    --wa-font-weight-bold: 600;
    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-bold);
    --wa-font-weight-code: var(--wa-font-weight-normal);
    --wa-font-weight-longform: var(--wa-font-weight-normal);
    --wa-font-weight-action: var(--wa-font-weight-semibold);
    --wa-line-height-condensed: 1.2;
    --wa-line-height-normal: 1.6;
    --wa-line-height-expanded: 2;
    --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
    --wa-link-decoration-hover: underline;
    --wa-space-scale: 1;
    --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem);
    --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem);
    --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem);
    --wa-space-s: calc(var(--wa-space-scale) * 0.75rem);
    --wa-space-m: calc(var(--wa-space-scale) * 1rem);
    --wa-space-l: calc(var(--wa-space-scale) * 1.5rem);
    --wa-space-xl: calc(var(--wa-space-scale) * 2rem);
    --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem);
    --wa-space-3xl: calc(var(--wa-space-scale) * 3rem);
    --wa-space-4xl: calc(var(--wa-space-scale) * 4rem);
    --wa-space-5xl: calc(var(--wa-space-scale) * 5rem);
    --wa-content-spacing: var(--wa-space-l);
    --wa-border-style: solid;
    --wa-border-width-scale: 1;
    --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
    --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
    --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
    --wa-border-radius-scale: 1;
    --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
    --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
    --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
    --wa-border-radius-pill: 9999px;
    --wa-border-radius-circle: 50%;
    --wa-border-radius-square: 0px;
    --wa-focus-ring-style: solid;
    --wa-focus-ring-width: 0.1875rem;
    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
    --wa-focus-ring-offset: 0.0625rem;
    --wa-shadow-offset-x-scale: 0;
    --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
    --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
    --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
    --wa-shadow-offset-y-scale: 1;
    --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
    --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
    --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
    --wa-shadow-blur-scale: 1;
    --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
    --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
    --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
    --wa-shadow-spread-scale: -0.5;
    --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
    --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
    --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
    --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-shadow-spread-s) var(--wa-color-shadow);
    --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-shadow-spread-m) var(--wa-color-shadow);
    --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-shadow-spread-l) var(--wa-color-shadow);
    --wa-transition-easing: ease;
    --wa-transition-slow: 300ms;
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 75ms;
    --wa-form-control-background-color: var(--wa-color-surface-default);
    --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
    --wa-form-control-border-style: var(--wa-border-style);
    --wa-form-control-border-width: var(--wa-border-width-s);
    --wa-form-control-border-radius: var(--wa-border-radius-m);
    --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
    --wa-form-control-label-color: var(--wa-color-text-normal);
    --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
    --wa-form-control-label-line-height: var(--wa-line-height-condensed);
    --wa-form-control-value-color: var(--wa-color-text-normal);
    --wa-form-control-value-font-weight: var(--wa-font-weight-body);
    --wa-form-control-value-line-height: var(--wa-line-height-condensed);
    --wa-form-control-hint-color: var(--wa-color-text-quiet);
    --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
    --wa-form-control-hint-line-height: var(--wa-line-height-normal);
    --wa-form-control-placeholder-color: var(--wa-color-gray-50);
    --wa-form-control-required-content: "*";
    --wa-form-control-required-content-color: inherit;
    --wa-form-control-required-content-offset: 0.1em;
    --wa-form-control-padding-block: 0.75em;
    --wa-form-control-padding-inline: 1em;
    --wa-form-control-height: round( calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), 1px );
    --wa-form-control-toggle-size: round(1.25em, 1px);
    --wa-button-transform-hover: none;
    --wa-button-transform-active: scale(0.9875);
    --wa-panel-border-style: var(--wa-border-style);
    --wa-panel-border-width: var(--wa-border-width-s);
    --wa-panel-border-radius: var(--wa-border-radius-l);
    --wa-tooltip-arrow-size: 0.375rem;
    --wa-tooltip-background-color: var(--wa-color-text-normal);
    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
    --wa-tooltip-border-style: var(--wa-border-style);
    --wa-tooltip-border-width: var(--wa-border-width-s);
    --wa-tooltip-border-radius: var(--wa-border-radius-s);
    --wa-tooltip-content-color: var(--wa-color-surface-default);
    --wa-tooltip-font-size: var(--wa-font-size-s);
    --wa-tooltip-line-height: var(--wa-line-height-normal);
  }
  :is(html, body):has(wa-page) {
    min-height: 100%;
    padding: 0;
    margin: 0;
  }
}
}


:where(:root) {
  color: revert;
  color-scheme: revert;
  font-family: revert;
}





@property --lf-motion-flash {
  syntax: "<time>";
  inherits: true;
  initial-value: 1200ms;
}
@property --lf-motion-fold {
  syntax: "<time>";
  inherits: true;
  initial-value: 220ms;
}
@property --lf-motion-return {
  syntax: "<time>";
  inherits: true;
  initial-value: 180ms;
}
@property --lf-motion-disclosure {
  syntax: "<time>";
  inherits: true;
  initial-value: 120ms;
}
@property --lf-motion-agent-arrival {
  syntax: "<time>";
  inherits: true;
  initial-value: 520ms;
}
:root {
  
  position: static !important;
  --lf-safe-top: env(safe-area-inset-top, 0px);
  --lf-safe-right: env(safe-area-inset-right, 0px);
  --lf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --lf-safe-left: env(safe-area-inset-left, 0px);
  
  --lf-fp-row-pad: 6px;
  --lf-floating-row: calc(var(--lf-line) + 2 * var(--lf-fp-row-pad));
  --lf-floating-gap: 14px;
  --lf-head-room: var(--lf-safe-top);
  --lf-foot-room: calc(
    var(--lf-floating-row) + 2 * var(--lf-floating-gap) + var(--lf-safe-bottom)
  );
  
  --lf-view-height: calc(100dvh - var(--lf-head-room) - var(--lf-foot-room));
  --lf-top: var(--lf-head-room);
  
  --lf-top-covered: calc(var(--lf-head-room) + var(--lf-root-headers, 0px));
  --lf-landing-room: 12px;
  
  --lf-tabstrip-h: calc(9px + max(38px, var(--aim-floor)));
  
  --lf-z-page-paint: 8890; 
  --lf-z-margin-raised: 8895; 
  --lf-z-page-hints: 8898; 
  --lf-z-margin-preview: 8920; 
  --lf-z-region-capture: 8930; 
  --lf-z-panel: 9000; 
  --lf-z-held-keys: 9030; 
  --lf-z-escaped-control: 9050; 
  --lf-z-chrome-paint: 9060; 
  --lf-z-key-badges: 9070; 
  
  --paper: light-dark(#faf9f5, #191815);
  --ink: light-dark(#1c1b18, #e8e4db);
  --muted: light-dark(#6f6a60, #a09889);
  --rule: light-dark(#e7e3d9, #34312b);
  
  --accent: light-dark(#2f5480, #8fb0d8);
  --ok: light-dark(#3f7d4e, #7fb98c);
  --warn: light-dark(#b4741a, #d8a95c);
  --danger: light-dark(#b4402f, #d98b7a);
  
  --pin-fill: light-dark(#2f5480, #4d74a8);
  --pin-ink: #fff;
  --pin-on-user: light-dark(#2f7d45, #2d8047);
  --pin-on-user-ink: #fff;
  
  --r-s: 3px;
  --r: 6px;
  --r-l: 12px;
  
  --chip-r: var(--r-s);
  --chip-pad: 0 8px;
  --chip-lh: 1.6;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  
  --aim-floor: 24px;
  
  --lf-line: 32px;
  
  --lf-reach-room: max(0px, (var(--aim-floor) - var(--lf-line)) / 2);
  
  --entry-floor: 0px;
  
  --margin-entry: max(32px, var(--aim-floor));
  
  --mark-size: 20px;
  
  --pin-inset: 4px;
  
  --margin-gap: 4px;
  --rail-hang: 22px;
  --rail: calc(
    2 * var(--margin-entry) + var(--margin-gap) + var(--rail-hang) +
      var(--focus-ring-room)
  );
  
  --note: 384px;
  
  --thread-card: 592px;
  --thread-card-min: 320px;
  
  --sidebar: 264px;
  
  --map: 48px;
  
  --sidebar-max: 344px;
  
  --col: 720px;
  --col-pad: 24px;
  
  --page-pad-start: 72px;
  --page-pad-end: 96px;
  
  --pane-bar-pad-block: 10px;
  --pane-bar-pad: var(--pane-bar-pad-block) 14px;
  --pane-inset: 14px;
  
  --wide: calc(109 * 0.61 * var(--code-size) + 10px);
  
  --wide-page-max: 1600px;
  
  --lf-ui-lh: 1.45;
  --details-margin-block: 18px;
  
  --h2-start: 48px;
  --h3-start: 32px;
  --figure-margin-block: 22px;
  --callout-margin-block: 18px;
  --hr-margin-block: 40px;
  
  --t-6: 0.71875rem;
  --t-working-label: 0.8125rem;
  --t-5: 0.875rem;
  --t-4: 1.0625rem;
  --t-3: 1.25rem;
  --t-2: 1.5rem;
  --t-1: 1.9375rem;
  --code-size: 0.84375rem;
  --code-line: 1.25rem;
  
  --msg-size: max(var(--entry-floor), var(--t-5));
  --msg-font: var(--msg-size) / 1.5 var(--sans);
  
  --code-inline-size: 82%;
  --code-inline-pad: 1px 5px;
  --code-inline-r: var(--r-s);
  --quote-rule: 2px solid var(--rule);
  --quote-style: italic;
  --quote-inset: 18px;
  --pre-inset: 14px;
  --list-inset: 24px;
  --link-underline: color-mix(in srgb, var(--accent) 35%, transparent);
  --link-underline-offset: 2px;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, ui-serif, serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --card: light-dark(#fffefb, #201e1a); 
  --field: light-dark(#f4f1e8, #232019); 
  
  --shade: light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.55));
  
  --raise-1-drop: 2px;
  --raise-1-blur: 8px;
  --raise-1: 0 var(--raise-1-drop) var(--raise-1-blur) var(--shade);
  --raise-2-drop: 8px;
  --raise-2-blur: 24px;
  --raise-2: 0 var(--raise-2-drop) var(--raise-2-blur) var(--shade);
  --raise-3-drop: 12px;
  --raise-3-blur: 36px;
  --raise-3: 0 var(--raise-3-drop) var(--raise-3-blur) var(--shade);
  
  --tip-bg: var(--ink);
  --tip-ink: var(--paper);
  --tip-pad: 4px 7px;
  --tip-r: var(--r-s);
  
  --code-bg: light-dark(#ecebe5, #2b2b29);
  --pre-bg: light-dark(#fff, #1b1b1a);
  --code-chrome: light-dark(#f6f8fa, #222220);
  --code-ink: light-dark(#24292f, #e8e7e3);
  --code-muted: light-dark(#57606a, #9b9992);
  --code-border: light-dark(#d0d7de, #3b3a37);
  --chip: light-dark(#eeeade, #2d2922); 
  
  --ink-2: light-dark(#3c3934, #c9c3b6);
  --muted-2: light-dark(#6d6960, #988f7f);
  --border-2: light-dark(#d5cfc2, #453f36);
  
  --veil: color-mix(in srgb, var(--paper) 93.3%, transparent);
  
  --mark: light-dark(#dfd1ed66, #6152a059);
  --mark-hover: light-dark(#dfd1edb3, #6152a079);
  --mark-strong: light-dark(#dfd1ed, #6152a099);
  --mark-ink: light-dark(#4a3b7d, #9d8fd6);
  
  --mark-pending: color-mix(in srgb, var(--accent) 20%, transparent);
  
  --react: light-dark(#dfd1ed40, #6152a036);
  
  --offer-hover: color-mix(in srgb, var(--ink) 7%, transparent);
  --offer-hover-shadow: inset 0 0 0 100px var(--offer-hover);
  
  --focus-ring-w: 2px;
  --focus-ring: var(--focus-ring-w) solid var(--accent);
  
  @media (forced-colors: active) {
    --focus-ring: var(--focus-ring-w) solid Highlight;
  }
  --focus-ring-gap: 3px;
  --focus-ring-room: calc(var(--focus-ring-w) + var(--focus-ring-gap));
  
  --focus-ring-landing: calc(var(--focus-ring-room) + 2px);
  --focus-surface: color-mix(in srgb, var(--accent) 4%, var(--card));
  
  --focus-shadow: 0 0 0 var(--focus-ring-w) var(--accent);
  --target-trace-w: 1.5px;
  --target-trace-ink: color-mix(in srgb, var(--ink-2) 42%, var(--paper));
  
  --mark-contour-w: 1.5px;
  --mark-contour-ink: color-mix(in srgb, var(--accent) 72%, var(--paper));
  
  --accent-tint: color-mix(in srgb, var(--accent) 12%, var(--card));
  
  --ok-tint: light-dark(#dfeddf, #1d2b1f);
  --ok-wash: color-mix(in srgb, var(--ok-tint) 52%, var(--paper));
  --ok-ink: light-dark(#2f6b40, #97cca3);
  
  --turn-wash: var(--ok-wash);
  --turn-ink: var(--ok-ink);
  --warn-tint: light-dark(#f7ecd2, #322715);
  --warn-ink: light-dark(#8a5a12, #e2bb75);
  --danger-tint: light-dark(#f7e0da, #35211b);
  --danger-ink: light-dark(#9c3526, #e0a091);
  --add-tint: light-dark(#e4efe0, #1b2a1c);
  --del-tint: light-dark(#f7e2dc, #33201b);
  --hi-tint: light-dark(#fff8c5, #342d14);
  
  --syn-comment: light-dark(#5a5549, #cac2b3);
  --syn-keyword: light-dark(#8d251d, #efafa0);
  --syn-string: light-dark(#1d4f6b, #9dc4dd);
  --syn-number: light-dark(#2f5480, #a8c4e2);
  --syn-name: light-dark(#573387, #cdb2e8);
  --syn-type: light-dark(#6b4305, #e6bc88);

  
  --series-1: light-dark(#4589d2, #2b8ecd);
  --series-2: light-dark(#b77114, #ce7600);
  --series-3: light-dark(#25966a, #50a069);
  --series-4: light-dark(#6c489a, #7a4faf);
  --series-5: light-dark(#8c2d2a, #b13d54);
}

:is(:root, .density-working) {
  
  --lf-key-badge-size: calc(round(var(--t-6) * 1.478 + 2px, 1px));
  --tip-font: 500 var(--t-6)/1.2 var(--sans);
}

html:not([data-lf-live]) {
  --lf-head-room: 0px;
  --lf-foot-room: 0px;
}

@media (pointer: coarse) {
  :root {
    --aim-floor: 44px;
    --entry-floor: 16px;
    --lf-line: 34px;
    --lf-fp-row-pad: 7px;
    --rail-hang: 10px;
  }
}


:where(.lf-chrome, .lf-ui) {
  --lf-reading-face: 1;
}



@property --lf-frame-start {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --lf-frame-end {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --lf-holds-edge {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --lf-holds-height {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --lf-bound-box {
  syntax: "*";
  inherits: false;
}

@property --lf-wears-ring {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@container style(--lf-block-frame: 1) or style(--lf-block-frame: trim) {
  * {
    --lf-block-frame: 0;
  }
}
@container (style(--lf-block-frame: 1) or style(--lf-block-frame: trim) or style(--lf-frame-start: 1)) and (not style(--lf-holds-edge: 1)) {
  :nth-child(1 of :not(.lf-ui, [data-lf-gen])) {
    margin-block-start: 0;
    --lf-frame-start: 1;
  }
}
@container (style(--lf-block-frame: 1) or style(--lf-block-frame: trim) or style(--lf-frame-end: 1)) and (not style(--lf-holds-edge: 1)) {
  :nth-last-child(1 of :not(.lf-ui, [data-lf-gen])) {
    margin-block-end: 0;
    --lf-frame-end: 1;
  }
}


body {
  position: static !important;
  box-sizing: border-box !important;
  --lf-ground: Canvas;
  overflow-wrap: break-word;
  container: lf-shell / inline-size;
}

@property --lf-panel-reach {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@media screen {
  html[data-lf-live] {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    
    scroll-padding-top: calc(var(--lf-top-covered) + var(--lf-landing-room));
    
    scroll-padding-bottom: calc(
      max(var(--lf-foot-room), var(--lf-panel-reach) + var(--lf-floating-gap)) +
        var(--lf-landing-room)
    );
    
    body {
      padding-bottom: var(--lf-foot-room);
    }
    body::before {
      content: "";
      display: block;
      height: var(--lf-head-room);
    }
  }
  html[data-lf-live][data-lf-layout~="workspace"] {
    overflow-y: auto;
  }
  
  html[data-lf-live][data-lf-sample-block] {
    overflow-y: hidden;
    --page-pad-start: 24px;
    --page-pad-end: 24px;
  }
}

:has(> .lf-markdown-body[data-lf-prepaint]) > pre {
  display: none;
}

html[data-lf-interactive] [data-lf-arriving] {
  display: none;
}

@layer {
  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }
  @media screen {
    
    html[data-lf-interactive] [data-lf-initial-pending] {
      opacity: 0 !important;
      visibility: hidden !important;
    }
    html[data-lf-interactive] body:not([data-lf-presented]),
    html[data-lf-interactive] body:not([data-lf-presented]) > main,
    html[data-lf-interactive] body:not([data-lf-presented]) > main *,
    html[data-lf-interactive] body:not([data-lf-presented]) .lf-ui {
      transition: none !important;
    }
    html[data-lf-interactive] body:not([data-lf-upgraded]) > main .lf-ui {
      visibility: hidden !important;
    }
    
    html[data-lf-interactive] body:not([data-lf-presented]) {
      --lf-before-presentation: 1;
    }
    html[data-lf-interactive] body:not([data-lf-upgraded]) {
      --lf-before-upgrade: 1;
    }
    
    html[data-lf-sample-connecting] {
      opacity: 0 !important;
      visibility: hidden !important;
    }
  }
}

.lf-held-keys {
  position: fixed;
  z-index: var(--lf-z-held-keys);
  pointer-events: none;
  right: calc(18px + var(--lf-safe-right));
  bottom: calc(
    var(--lf-safe-bottom) + (var(--lf-foot-room) - var(--lf-safe-bottom)) / 2
  );
  translate: 0 50%;
  margin: 0;
  padding: 5px 10px;
  max-width: calc(100vw - 36px - var(--lf-safe-left) - var(--lf-safe-right));
  overflow: hidden;
  display: flex;
  gap: 0.4em;
  align-items: center;
  color: var(--muted);
  font: var(--t-6)/var(--lf-ui-lh) var(--sans);
  white-space: nowrap;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--card);
}

@property --lf-field-end-room {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --lf-box-carry {
  syntax: "<length>+ | none";
  inherits: false;
  initial-value: none;
}
@property --lf-box-cut {
  syntax: "<length>+";
  inherits: false;
  initial-value: 0px 0px 0px 0px;
}

@property --lf-field-carry {
  syntax: "<length>+ | none";
  inherits: true;
  initial-value: none;
}
@property --lf-field-cut {
  syntax: "<length>+ | none";
  inherits: true;
  initial-value: none;
}

.lf-ui :is(textarea, leaf-text):where(:not(.lf-fab-input)),
:is(textarea, leaf-text).lf-ui:where(:not(.lf-fab-input)) {
  padding: var(--lf-compose-pad-block, 8px) var(--lf-compose-pad-inline-start, 10px);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--card);
  color: inherit;
  resize: none;
  field-sizing: content;
  max-height: 50vh;
  overflow-y: auto;
}

:where(
  select,
  input:not(
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="color"],
    [type="file"],
    [type="button"],
    [type="submit"],
    [type="reset"],
    [type="image"]
  )
):is(.lf-ui, .field) {
  --lf-field-pad-inline: 8px;
  box-sizing: border-box;
  min-height: var(--lf-line);
  padding: 4px var(--lf-field-pad-inline);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  &[data-lf-focus-visible] {
    outline: var(--focus-ring);
    outline-offset: 0;
    border-color: transparent;
  }
}

:where(select:not([multiple]):is(:not([size]), [size="0"], [size="1"])):is(
  .lf-ui,
  .field
) {
  --lf-select-arrow-wing: 4px;
  appearance: none;
  padding-inline-end: calc(
    2 * (var(--lf-field-pad-inline) + var(--lf-select-arrow-wing))
  );
  background-image:
    linear-gradient(45deg, transparent 25%, currentColor 25% 75%, transparent 75%),
    linear-gradient(135deg, transparent 25%, currentColor 25% 75%, transparent 75%);
  background-size: var(--lf-select-arrow-wing) var(--lf-select-arrow-wing);
  background-repeat: no-repeat;
  background-position:
    right calc(var(--lf-field-pad-inline) + var(--lf-select-arrow-wing)) center,
    right var(--lf-field-pad-inline) center;
  &:dir(rtl) {
    background-position:
      left var(--lf-field-pad-inline) center,
      left calc(var(--lf-field-pad-inline) + var(--lf-select-arrow-wing)) center;
  }
  @media (forced-colors: active) {
    appearance: auto;
    background-image: none;
  }
}
.lf-ui :is(input, textarea)::placeholder,
:is(input, textarea):is(.lf-ui, .field)::placeholder {
  color: var(--muted);
  opacity: 1;
}
.lf-ui :is(textarea, leaf-text):where(:not(.lf-fab-input))[data-lf-focus-visible],
:is(textarea, leaf-text).lf-ui:where(:not(.lf-fab-input))[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: 0;
  border-color: transparent;
}

main {
  position: relative;
  z-index: 0;
  container-name: lf-content-frame;
  --lf-free-l: 0px;
  --lf-free-r: 0px;
}


@property --lf-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --lf-top {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --raise-1-drop {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --raise-1-blur {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --raise-2-drop {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --raise-2-blur {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --raise-3-drop {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --raise-3-blur {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --rail-hang {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --lf-top-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --lf-landing-room-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --lf-bottom {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --lf-free-l {
  syntax: "<length>";
  inherits: true;
  initial-value: 99999px;
}
@property --lf-free-r {
  syntax: "<length>";
  inherits: true;
  initial-value: 99999px;
}

@property --rail {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --map {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sidebar {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --note {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --wide {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@media screen {
  :where(p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, lf-suggestion) {
    max-inline-size: var(--lf-measure);
  }
  
  [data-lf-bound] {
    max-block-size: var(--lf-bound, 28rem);
    overflow: auto;
    --lf-top: 0px;
    --lf-holds-height: 1;
  }
}

@media screen and (max-width: 640px) {
  :root {
    --page-pad-start: 28px;
    --page-pad-end: 72px;
  }
}

.density-working {
  --lf-density: working;
  --page-pad-start: 28px;
  --t-1: 1.375rem;
  --t-2: 1.125rem;
  --t-3: 0.96875rem;
  --t-4: 0.875rem;
  --t-5: 0.78125rem;
  --t-6: 0.65625rem;
  --t-working-label: 0.75rem;
  --sp-1: 3px;
  --sp-2: 6px;
  --sp-3: 10px;
  --sp-4: 14px;
  --sp-5: 18px;
  --code-size: 0.8125rem;
  --code-line: 1.125rem;
  --pane-bar-pad-block: 6px;
  --pane-bar-pad: var(--pane-bar-pad-block) 12px;
  --pane-inset: 12px;
  --h2-start: 18px;
  --h3-start: 12px;
  --figure-margin-block: 10px;
  --callout-margin-block: 10px;
  --hr-margin-block: 14px;
  --details-margin-block: 10px;
  font-size: var(--t-4);
  line-height: 1.45;
}

img,
svg:where(:not([data-lf-icon])),
video {
  max-width: 100%;
  height: auto;
}

img {
  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
}

details::details-content {
  grid-column: 1 / -1;
}

.lf-ref {
  font-size: var(--t-6);
  color: var(--muted-2);
  text-decoration: none;
  white-space: nowrap;
}
.lf-ref:hover {
  color: var(--accent);
  text-decoration: underline;
}


.lf-label,
:where([data-lf-reading-role="pane"]) > header > :is(h2, h3, h4, h5, h6) {
  font: 600 var(--t-6)/1.3 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

aside.sidebar {
  display: flow-root;
  margin: var(--sp-4) 0 30px;
  --lf-block-frame: trim;
}

@media screen {
  html:root {
    .lf-thread-seat {
      display: block;
    }
    .lf-say {
      display: flex;
    }
  }
}


lf-suggestion {
  display: inline;
}
lf-old,
lf-new {
  border-radius: var(--r-s);
  padding: 0 3px;
}

lf-old {
  background: var(--del-tint);
  color: var(--ink-2);
  text-decoration: line-through;
  text-decoration-color: var(--danger);
}
lf-new {
  background: var(--add-tint);
}

::highlight(lf-sug-del) {
  background-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
::highlight(lf-sug-ins) {
  background-color: color-mix(in srgb, var(--ok) 26%, transparent);
}

lf-suggestion:has(
  > :is(lf-old, lf-new)
    > :not(
      a,
      abbr,
      area,
      audio,
      b,
      bdi,
      bdo,
      br,
      button,
      canvas,
      cite,
      code,
      data,
      datalist,
      del,
      dfn,
      em,
      embed,
      i,
      iframe,
      img,
      input,
      ins,
      kbd,
      label,
      link,
      map,
      mark,
      math,
      meta,
      meter,
      noscript,
      object,
      output,
      picture,
      progress,
      q,
      ruby,
      s,
      samp,
      script,
      select,
      slot,
      small,
      span,
      strong,
      sub,
      sup,
      svg,
      template,
      textarea,
      time,
      u,
      var,
      video,
      wbr,
      :where([data-lf-inline])
    )
) {
  display: block;
  & > :is(lf-old, lf-new) {
    display: block;
    padding: 2px 10px;
    margin-top: 10px;
    --lf-block-frame: 1;
    transition: padding var(--lf-motion-fold) ease;
  }
}

lf-suggestion[data-lf-state] > :is(lf-old, lf-new) {
  background: none;
  color: inherit;
  text-decoration: none;
}

lf-suggestion[data-lf-state] > :is(lf-old, lf-new):not([data-lf-retired]) {
  padding: 0;
}

.lf-margin-entry {
  position: relative;
  box-sizing: border-box;
  width: var(--margin-entry);
  min-width: var(--margin-entry);
  height: var(--margin-entry);
  min-height: var(--margin-entry);
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--lf-entry-tint, var(--paper));
  color: var(--lf-entry-ink, var(--ink-2));
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font: 600 var(--t-6)/1 var(--sans);
  white-space: nowrap;
  scroll-margin-block: var(--focus-ring-landing);
  
  --lf-entry-lift: 0 1px 0 var(--border-2), var(--raise-1);
}

.lf-margin-entry[data-lf-behavior="action"] {
  border-width: 2px;
  color: var(--lf-entry-ink, var(--ink));
  box-shadow: var(--lf-entry-lift);
}
.lf-margin-entry[data-lf-behavior="disclosure"] {
  border-color: color-mix(in srgb, var(--ink) 34%, var(--paper));
  color: var(--lf-entry-ink, var(--ink-2));
  box-shadow: none;
}
.lf-margin-entry[data-lf-behavior="status"] {
  border-color: var(--rule);
  color: var(--lf-entry-ink, var(--ink-2));
  box-shadow: none;
  cursor: default;
}

.lf-margin-entry[data-lf-tone="positive"]
  > :is(.lf-margin-entry-icon, .lf-margin-entry-glyph) {
  color: var(--ok-ink);
}
.lf-margin-entry[data-lf-tone="negative"]
  > :is(.lf-margin-entry-icon, .lf-margin-entry-glyph) {
  color: var(--danger-ink);
}

.lf-margin-entry:is(button, [role="button"]):not([data-lf-behavior="status"]):not(
    :disabled
  ):not([aria-disabled="true"]) {
  cursor: pointer;
}
.lf-margin-entry:is(button, [role="button"]):not([data-lf-behavior="status"]):hover:not(
    [aria-disabled="true"]
  ) {
  background: var(--lf-entry-tint, var(--chip));
}

.lf-margin-entry[data-lf-behavior="disclosure"]:is(button, [role="button"]):is(
    :hover,
    [data-lf-focus],
    [aria-expanded="true"]
  ):not([aria-disabled="true"]) {
  border-color: var(--accent);
  color: var(--lf-entry-ink, var(--ink));
}

.lf-margin-entry[data-lf-target-selected] {
  border-color: var(--accent);
}
.lf-margin-entry[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: 1px;
}
.lf-margin-entry[aria-disabled="true"] {
  cursor: default;
}
.lf-margin-entry.lf-react[aria-pressed="true"] {
  background: var(--chip);
}

.lf-react-mark[data-lf-behavior="disclosure"] {
  border-width: 2px;
  border-color: var(--border-2);
  color: var(--lf-entry-ink, var(--ink));
  box-shadow: var(--lf-entry-lift);
}

:where(
    .lf-margin-entry[data-lf-kinds~="comment"],
    .lf-page-map-action[data-lf-map-item^="comment:"],
    .lf-margin-entry[data-lf-agent-workflow],
    .lf-page-map-action[data-lf-agent-workflow]
  )
  > :is(.lf-margin-entry-icon, .lf-margin-entry-glyph, .lf-margin-kind) {
  color: var(--accent);
}
:is(.lf-margin-entry, .lf-page-map-action)[data-lf-turn="user"]
  > :is(.lf-margin-entry-icon, .lf-margin-entry-glyph, .lf-margin-kind) {
  color: var(--turn-ink);
}
:is(.lf-margin-entry, .lf-page-map-action)[data-lf-turn="user"] {
  --lf-entry-tint: var(--turn-wash);
}
:is(.lf-margin-entry, .lf-page-map-action)[data-lf-agent-arrival] {
  animation: lf-runtime-4f3c2a8d-agent-work-arrival var(--lf-motion-agent-arrival)
    ease-out var(--lf-agent-arrival-delay, 0ms) 1;
}
@keyframes lf-runtime-4f3c2a8d-agent-work-arrival {
  0% {
    box-shadow:
      var(--lf-agent-stage-shadow, 0 0 0 0 transparent),
      0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent);
  }
  58% {
    box-shadow:
      var(--lf-agent-stage-shadow, 0 0 0 0 transparent),
      0 0 0 7px color-mix(in srgb, var(--accent) 16%, transparent);
  }
  100% {
    box-shadow:
      var(--lf-agent-stage-shadow, 0 0 0 0 transparent),
      0 0 0 10px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.lf-margin-entry, .lf-page-map-action)[data-lf-agent-arrival] {
    animation: none;
  }
}

.lf-margin-entry[data-lf-agent-workflow="working"][data-lf-behavior="action"] {
  --lf-agent-stage-shadow: var(--lf-entry-lift);
}

.lf-margin-entry[data-lf-unread]::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper);
}
.lf-margin-entry-glyph {
  line-height: 1;
}
.lf-margin-entry > .lf-margin-entry-space {
  display: none;
}
.lf-margin-entry > .lf-margin-entry-label {
  position: absolute;
  z-index: 3;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  display: block;
  width: max-content;
  max-width: min(320px, 100vw - 8px);
  padding: var(--tip-pad);
  border-radius: var(--tip-r);
  background: var(--tip-bg);
  color: var(--tip-ink);
  font: var(--tip-font);
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: var(--raise-1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2px);
  transition:
    opacity 90ms ease,
    transform 90ms ease,
    visibility 0s linear 90ms;
}
.lf-margin-entry-label-word,
.lf-margin-entry-context,
.lf-margin-entry-more {
  display: block;
}

.lf-margin-entry-label-word {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lf-margin-entry-label-word[data-voice="leaf"] {
  font-style: italic;
}
.lf-margin-entry-context,
.lf-margin-entry-more {
  margin-block-start: 2px;
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 450;
}

.lf-margin-entry-more:empty {
  display: none;
}

.lf-margin-projection .lf-margin-entry[data-lf-label-side] > .lf-margin-entry-label {
  inset: auto;
  left: var(--lf-label-x);
  top: var(--lf-label-y);
}

@media (hover: hover) {
  .lf-margin-entry:hover:not([aria-expanded="true"]) > .lf-margin-entry-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 90ms;
  }
}

.lf-margin-entry:is([data-lf-held-word], [data-lf-focus]:not([aria-expanded="true"]))
  > .lf-margin-entry-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: none;
}
@media (hover: none) {
  .lf-margin-entry[data-lf-focus]:not(:focus-visible, [data-lf-held-word])
    > .lf-margin-entry-label {
    opacity: 0;
    visibility: hidden;
  }
}
.lf-margin-projection
  .lf-margin-entry:not([data-lf-label-side])
  > .lf-margin-entry-label {
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.lf-margin-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--paper);
  background: var(--ink);
  color: var(--paper);
  font: 600 10px/14px var(--sans);
  text-align: center;
}



[data-lf-reading-role="pane"] > :not(header, footer)[data-lf-focus-visible] {
  outline: none;
}
[data-lf-reading-role="pane"]:has(> :not(header, footer)[data-lf-focus-visible]) {
  --lf-wears-ring: 1;
}
[data-lf-reading-role="pane"]:has(
    > :not(header, footer)[data-lf-focus-visible]
  )::after {
  content: "";
  grid-row: 2;
  grid-column: 1;
  z-index: 1;
  pointer-events: none;
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
}

[data-lf-reading-role="pane"] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  --lf-block-frame: 1;
}
:where([data-lf-reading-role="pane"]) {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  --lf-ground: var(--paper);
  background: var(--lf-ground);
}
:where([data-lf-reading-role="pane"]) > header {
  padding: var(--pane-bar-pad);
  border-bottom: 1px solid var(--rule);
  font: 600 var(--t-5)/1.4 var(--sans);
  --lf-block-frame: 1;
}

:where([data-lf-reading-role="pane"]) > header > :is(h2, h3, h4, h5, h6) {
  margin: 0;
}
:where([data-lf-reading-role="pane"]) > footer {
  padding: var(--pane-bar-pad);
  border-top: 1px solid var(--rule);
  --lf-block-frame: 1;
}


:where([data-lf-reading-role="pane"]) > :not(header, footer) {
  --lf-pane-top: var(--pane-inset);
  padding: var(--lf-pane-top) var(--pane-inset)
    calc(var(--pane-inset) + var(--lf-end-room));
  container-type: inline-size;
  --lf-block-frame: 1;
}


:where([data-lf-reading-role="pane"]):not(:has(> footer)) > :not(header, footer) {
  --lf-end-room: inherit;
}
@container not style(--lf-end-room: 0px) {
  :where([data-lf-reading-role="pane"]) > footer {
    --lf-end-room: inherit;
    padding-block-end: calc(var(--pane-bar-pad-block) + var(--lf-end-room));
  }
}


.lf-motion-preview {
  box-sizing: border-box;
  max-width: 24rem;
  max-height: 3.5rem;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
.lf-motion-preview.lf-inhand {
  max-width: none; 
  opacity: 1;
  box-shadow: var(--raise-2);
}
}
@layer lf-base {





:is(.lf-chip, :where(lf-option) > .tag) {
  display: inline-block;
  font-size: var(--t-6);
  line-height: var(--chip-lh);
  padding: var(--chip-pad);
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  border-radius: var(--chip-r);
  background: var(--chip);
  color: var(--ink-2);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  align-self: center;
}
:is(.lf-chip, :where(lf-option) > .tag).ok {
  --lf-tone-tint: var(--ok-tint);
  --lf-tone-ink: var(--ok-ink);
}
:is(.lf-chip, :where(lf-option) > .tag).warn {
  --lf-tone-tint: var(--warn-tint);
  --lf-tone-ink: var(--warn-ink);
}
:is(.lf-chip, :where(lf-option) > .tag).danger {
  --lf-tone-tint: var(--danger-tint);
  --lf-tone-ink: var(--danger-ink);
}
:is(.lf-chip, :where(lf-option) > .tag):is(.ok, .warn, .danger) {
  background: var(--lf-tone-tint);
  color: var(--lf-tone-ink);
}

.lf-chip.lf-change-count {
  background: var(--add-tint);
  color: var(--ok-ink);
}


lf-shot {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  margin: var(--sp-3) 0;
  container: lf-shot / inline-size;
  --lf-shot-gap: var(--sp-2);
  --lf-shot-label-height: var(--lf-line);
}
.lf-shot-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "before actions after";
  align-items: center;
  gap: var(--sp-1);
  padding-block: max(var(--sp-1), var(--lf-reach-room));
  flex: none;
  min-inline-size: 0;
  anchor-scope: --lf-shot-options;
  font: var(--t-working-label)/1.4 var(--sans);
}
.lf-shot-actions,
.lf-shot-views,
.lf-shot-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-inline-size: 0;
}
.lf-shot-actions {
  grid-area: actions;
}
.lf-shot-views > .lf-btn,
.lf-shot-tools > .lf-btn,
.lf-shot-scale-options > .lf-btn {
  
  font-weight: 500;
  white-space: nowrap;
}
.lf-shot-toolbar > .lf-shotcap[data-lf-state="before"] {
  grid-area: before;
  justify-self: start;
}
.lf-shot-toolbar > .lf-shotcap[data-lf-state="after"] {
  grid-area: after;
  justify-self: end;
}
.lf-shot-scale {
  flex: none;
  min-inline-size: var(--aim-floor);
  anchor-name: --lf-shot-options;
}
.lf-shotoptions {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  margin: auto;
  inline-size: max-content;
  max-inline-size: calc(100vw - 32px);
  padding: var(--sp-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--raise-2);
  font: var(--t-working-label)/1.4 var(--sans);
}
@supports (position-area: bottom) {
  .lf-shotoptions {
    position-anchor: --lf-shot-options;
    position-area: bottom span-left;
    inset: auto;
    margin: var(--sp-2) 0;
    position-try-fallbacks: flip-block;
  }
}
.lf-shotoptions::backdrop {
  background: transparent;
}
.lf-shot-scale-options {
  display: flex;
  gap: var(--sp-1);
}
.lf-shot-scale-options > button {
  flex: 1;
}
.lf-shotchoice {
  display: flex;
  font: inherit;
}
.lf-shotchoice[hidden] {
  display: none;
}
.lf-shot-open {
  display: block;
  color: inherit;
  text-decoration: none;
}
.lf-shot-open[href] {
  cursor: zoom-in;
}
.lf-shot-open[data-lf-focus-visible] {
  outline: none;
}
.lf-shotframe:has(.lf-shot-open[data-lf-focus-visible]) {
  
  --lf-wears-ring: 1;
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-gap);
}
.lf-shot-pixel-key {
  border-block-start: 1px solid var(--rule);
  margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.lf-shot-key-swatch {
  inline-size: 0.75em;
  block-size: 0.75em;
  flex: none;
  border-radius: var(--r-s);
}

@container lf-shot (max-width: 450px) {
  .lf-shot-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "actions actions" "before after";
    
    grid-template-rows: auto var(--lf-shot-label-height);
  }
  .lf-shot-actions {
    justify-content: space-between;
  }
  .lf-shot-views {
    gap: 0;
  }
  .lf-shot-tools {
    gap: 0;
  }
}

.lf-shotstage,
.lf-shotstage *,
.lf-shotstage *::before,
.lf-shotstage *::after {
  box-sizing: border-box;
}
.lf-shotstage {
  
  --lf-shot-frame-room: calc(var(--raise-1-drop) + var(--raise-1-blur));
  padding: var(--lf-shot-frame-room);
  
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: auto;
  
  overscroll-behavior: auto;
  --lf-top: 0px;
  scrollbar-gutter: stable;
}

@media screen {
  lf-shot[data-lf-shot-mode="compare"] .lf-shotstage {
    
    overflow: hidden;
  }
}
.lf-shotcanvas {
  display: grid;
  justify-content: start;
  align-content: start;
  inline-size: max-content;
  min-inline-size: min(100%, var(--lf-shot-frame-width));
  margin-inline: auto;
  gap: var(--lf-shot-gap);
}
.lf-shotframe {
  inline-size: calc(var(--lf-shot-frame-width) + 2px);
  border: 1px solid transparent;
  background: var(--card);
  overflow: clip;
}
@media screen {
  lf-shot[data-lf-shot-mode="compare"] .lf-shotframe {
    inline-size: calc(var(--lf-shot-viewport-width) + 2px);
  }
}
.lf-shotviewport {
  inline-size: var(--lf-shot-frame-width);
  block-size: var(--lf-shot-frame-height);
}

@media screen {
  lf-shot[data-lf-shot-mode="compare"] .lf-shotviewport {
    --lf-holds-height: 1;
    inline-size: var(--lf-shot-viewport-width);
    block-size: var(--lf-shot-viewport-height);
    overflow: auto;
    overscroll-behavior: auto;
  }
}
.lf-shot-frame-label {
  box-sizing: border-box;
  display: none;
  align-items: center;
  block-size: var(--lf-shot-label-height);
  border-block-end: 1px solid var(--rule);
  font: 600 var(--t-working-label)/1.4 var(--sans);
}
lf-shot[data-lf-shot-mode="compare"][data-lf-shot-layout="stack"] .lf-shot-frame-label {
  display: flex;
}

lf-shot[data-lf-shot-mode="compare"][data-lf-shot-layout="stack"]
  .lf-shot-toolbar
  > .lf-shotcap {
  display: none;
}
.lf-shotcap {
  box-sizing: border-box;
  display: block;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r);
  font: 600 var(--t-working-label)/1.4 var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
}
.lf-shotcap[data-lf-state="before"],
.lf-shot-frame-label[data-lf-state="before"] {
  background: var(--del-tint);
  color: var(--danger-ink);
}
.lf-shotcap[data-lf-state="after"],
.lf-shot-frame-label[data-lf-state="after"] {
  background: var(--add-tint);
  color: var(--ok-ink);
}
.lf-shotcap[data-lf-shot-hidden] {
  background: transparent;
  color: var(--muted);
}

.lf-shotimage {
  --lf-drawing: 1;
  position: relative;
  overflow: clip;
  inline-size: var(--lf-shot-frame-width);
  block-size: var(--lf-shot-frame-height);
  background: var(--card);
}
.lf-shotplane {
  position: absolute;
  inline-size: var(--lf-shot-source-width);
  block-size: var(--lf-shot-source-height);
  left: calc(-1 * var(--lf-shot-crop-x));
  top: calc(-1 * var(--lf-shot-crop-y));
}
.lf-shotplane > img {
  display: block;
  inline-size: 100%;
  max-inline-size: none;
  block-size: auto;
  max-block-size: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
lf-shot[data-lf-shot-mode="compare"][data-lf-shot-layout="side"] .lf-shotcanvas {
  
  inline-size: 100%;
  justify-content: space-between;
  grid-template-columns: repeat(2, calc(var(--lf-shot-viewport-width) + 2px));
}
lf-shot[data-lf-shot-mode="compare"][data-lf-shot-layout="stack"] .lf-shotcanvas {
  grid-template-columns: calc(var(--lf-shot-viewport-width) + 2px);
}
lf-shot:not([data-lf-shot-mode="compare"]) .lf-shotcanvas {
  grid-template-columns: calc(var(--lf-shot-frame-width) + 2px);
  gap: 0;
}
lf-shot:not([data-lf-shot-mode="compare"]) .lf-shotcanvas > .lf-shotframe {
  grid-area: 1 / 1;
}
@media screen {
  lf-shot[data-lf-shot-mode="flip"]
    .lf-shotcanvas
    > .lf-shotframe[data-lf-state="before"] {
    
    clip-path: inset(0 50% 0 0);
    z-index: 1;
  }
  lf-shot[data-lf-shot-mode="pixels"] .lf-shotframe {
    display: none;
  }
}
.lf-shotcomparison {
  display: block;
  grid-area: 1 / 1;
  inline-size: calc(var(--lf-shot-frame-width) + 2px);
  block-size: calc(var(--lf-shot-frame-height) + 2px);
  --divider-width: 2px;
  --handle-size: 30px;
  --wa-color-surface-default: var(--card);
  --wa-color-neutral-on-quiet: var(--ink-2);
  --wa-focus-ring: var(--focus-ring);
  --wa-focus-ring-offset: 1px;
}
.lf-shotcomparison::part(divider) {
  background: var(--ink-2);
}
.lf-shotcomparison .lf-shotframe {
  box-shadow: none;
}
.lf-shotcomparison::part(handle) {
  border: 1px solid var(--ink-2);
  box-shadow: var(--raise-1);
  opacity: 0.52;
}

.lf-shotcomparison::part(handle):hover,
.lf-shotcomparison:is([data-lf-focus-visible-within], :state(dragging))::part(handle) {
  opacity: 1;
}
.lf-shotcomparison:is([position="0"], [position="100"]):not(
    :hover,
    [data-lf-focus-visible-within],
    :state(dragging)
  )::part(handle) {
  opacity: 0.18;
}
.lf-shot-handle {
  display: block;
  box-sizing: border-box;
  inline-size: 12px;
  block-size: 12px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
}
.lf-shotdiff {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lf-shotdiff > span {
  position: absolute;
  left: max(0px, calc(var(--lf-shot-x) - 3px));
  top: max(0px, calc(var(--lf-shot-y) - 3px));
  right: max(0px, calc(100% - var(--lf-shot-x) - var(--lf-shot-w) - 3px));
  bottom: max(0px, calc(100% - var(--lf-shot-y) - var(--lf-shot-h) - 3px));
  border: 1px solid var(--warn);
}
.lf-shotdiff > span[data-lf-shot-mark="moved"] {
  border-color: var(--accent);
}
lf-shot:not([data-lf-shot-outlines="true"]) .lf-shotdiff {
  display: none;
}
lf-shot[data-lf-shot-focus="true"][data-lf-shot-crop="false"]
  .lf-shotframe
  .lf-shotplane::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  left: var(--lf-shot-focus-x);
  top: var(--lf-shot-focus-y);
  width: var(--lf-shot-focus-width);
  height: var(--lf-shot-focus-height);
  border: 2px solid var(--accent);
}
.lf-shotpixels {
  display: none;
  grid-area: 1 / 1;
  inline-size: calc(var(--lf-shot-frame-width) + 2px);
  block-size: calc(var(--lf-shot-frame-height) + 2px);
  border: 1px solid transparent;
}
@media screen {
  lf-shot[data-lf-shot-mode="pixels"] .lf-shotpixels {
    display: block;
  }
}
.lf-shotpixels .lf-shotplane > img {
  filter: grayscale(1);
  opacity: 0.28;
}
.lf-shotpixels .lf-shotplane > span {
  position: absolute;
  inset: 0;
  mask: var(--lf-shot-pixels, linear-gradient(transparent, transparent)) 0 0 / 100% 100%
    no-repeat;
}
.lf-shot-pixel-mask,
.lf-shot-key-swatch {
  background: var(--warn);
}
@container style(--lf-full-height:1) {
  lf-shot {
    --lf-holds-height: 1;
    block-size: 100%;
    overflow: clip;
  }
}

@container style(--lf-holds-height:1) {
  lf-shot > .lf-shotstage {
    --lf-holds-height: 1;
  }
}
@media print {
  lf-shot {
    block-size: auto;
    overflow: visible;
  }
  
  .lf-shotstage,
  .lf-shotcanvas,
  .lf-shotcomparison,
  .lf-shotframe,
  .lf-shot-frame-label,
  .lf-shotviewport,
  .lf-shotimage,
  .lf-shotplane {
    display: block;
    inline-size: 100%;
    block-size: auto;
    visibility: visible;
    overflow: visible;
  }
  
  .lf-shotpixels {
    display: none;
  }
  .lf-shotcomparison::part(after),
  .lf-shotcomparison::part(before) {
    position: static;
    display: block;
    clip-path: none;
  }
  .lf-shotcomparison::part(base) {
    display: flex;
    flex-direction: column;
  }
  
  .lf-shotcomparison::part(before) {
    order: 2;
  }
  .lf-shotcomparison::part(after) {
    order: 1;
  }
  .lf-shotcomparison::part(divider) {
    display: none;
  }
  .lf-shotimage {
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
  }
  .lf-shotplane {
    position: static;
    inline-size: 100%;
    block-size: auto;
  }
  .lf-shotframe {
    margin-block-end: var(--sp-3);
    clip-path: none;
  }
}


lf-gloss {
  display: inline;
}

lf-gloss[tip]::after {
  content: " (" attr(tip) ")";
  color: var(--muted);
}

@scope (html[data-lf-interactive] lf-gloss) {
  :scope:is(lf-gloss)[tip]::after {
    content: none;
  }
}
lf-gloss:has(> [data-lf-said="tip"])::after {
  content: none;
}
@media screen {
  lf-gloss {
    text-decoration-line: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    cursor: help;
  }
}

.lf-gloss-mark {
  min-width: 0;
  min-height: 0;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
lf-gloss:has(> .lf-gloss-mark[data-lf-focus-visible]) {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
  --lf-wears-ring: 1;
}
.lf-gloss-popover {
  --lf-gloss-gap: 8px;
  position: fixed;
  inset: auto;
  position-area: block-end center;
  position-try-fallbacks: flip-block, flip-inline;
  box-sizing: border-box;
  width: max-content;
  max-width: min(22rem, calc(100vw - 24px));
  margin: var(--lf-gloss-gap) 0;
  padding: 10px 13px 11px;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--raise-2);
  font-family: var(--serif);
  font-size: var(--t-5);
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
}

@media screen {
  .lf-gloss-popover::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--lf-gloss-gap)) 0;
    z-index: -1;
  }
}
.lf-gloss-popover::backdrop {
  background: transparent;
}
@media print {
  lf-gloss > .lf-gloss-popover {
    display: inline;
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    box-shadow: none;
    font: inherit;
  }
  lf-gloss > .lf-gloss-popover::before {
    content: " (";
  }
  lf-gloss > .lf-gloss-popover::after {
    content: ")";
  }
}


.lf-shotcap,
lf-sample::before,
lf-sample > [data-lf-said="label"],
lf-column::before,
lf-column > [data-lf-said="label"],
lf-tab::before {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}



@property --lf-options-across {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --lf-option-in-row {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --lf-option-line {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
lf-options {
  display: block;
  margin: 14px 0;
  --lf-joined: 0;
  --lf-option-font: var(--t-4)/1.6 var(--serif);
  --lf-option-line: 1lh;
  --lf-option-pad-min: 5px;
  --lf-option-pad-block: var(--lf-option-pad-min);
  
  --lf-options-row-width: initial;
  container-type: inline-size;
}

@media screen {
  lf-options {
    box-sizing: border-box;
    max-inline-size: var(--lf-measure);
  }
}
lf-options:not(:has(> lf-option > strong)) {
  --lf-option-font: var(--t-5)/1.5 var(--sans);
  font: var(--lf-option-font);
}
lf-options:has(> lf-option > strong) {
  --lf-option-pad-min: var(--sp-3);
}
lf-option {
  display: block;
  position: relative;
}

lf-option > .lf-markdown-words,
lf-option > .lf-option-words {
  white-space: normal;
}

lf-options:has(> lf-option > strong) > lf-option {
  padding: var(--lf-option-pad-block) var(--sp-3);
  --lf-block-frame: 1;
}

lf-options:has(> lf-option > strong) > .lf-another {
  font: inherit;
  color: inherit;
}
@container style(--lf-joined: 0) {
  lf-options:has(> lf-option > strong) > lf-option {
    border: 1px solid var(--rule);
    border-radius: var(--r);
    --lf-ground: var(--card);
    background: var(--lf-ground);
  }
  
  lf-options:has(> lf-option > strong) > .lf-another {
    border: 1px solid transparent;
  }
}

@container not (style(--lf-density: working) and (width >= 30rem)) {
  
  lf-option > strong {
    display: block;
    margin: 0;
  }
  
  lf-option > strong + p {
    margin-block-start: 0;
  }
}
@container style(--lf-density: working) and (width >= 30rem) {
  lf-options:has(> lf-option > strong) > lf-option {
    & > strong {
      margin-inline-end: 0.35em;
    }
    & > .tag {
      float: inline-end;
      margin: 0 0 0 6px;
    }
  }
}

lf-option > .tag {
  margin: 0 6px 2px 0;
}

lf-options:has(> lf-option > strong) {
  display: block;
  & > lf-option {
    display: flow-root;
    margin: 0 0 var(--sp-2);
  }
  & > lf-option:last-child {
    margin-bottom: 0;
  }
  
  & > lf-option {
    container-type: inline-size;
  }
  
  & > lf-option > dl.facts {
    display: block;
    margin: 0 0 var(--sp-2);
    --lf-block-frame: 1;
  }
  @container (min-width: calc(9.5em + 16px + 20em)) {
    & > lf-option > dl.facts {
      float: right;
      clear: right;
      width: 9.5em;
      margin: 0 0 var(--sp-2) var(--sp-3);
    }
  }
  & > lf-option > dl.facts dt {
    color: var(--muted);
    font-size: var(--t-6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 400;
    margin-top: 6px;
    padding: 0;
  }
  & > lf-option > dl.facts dd {
    font-size: var(--t-5);
    margin: 0;
  }
}

@container style(--lf-joined: 0) {
  lf-options:has(> lf-option > strong) > lf-option[chosen] {
    border-color: var(--ok);
  }
}

@media screen {
  lf-options[choose]:not(:where([data-lf-exhibit]) *) > lf-option {
    cursor: pointer;
  }
}

lf-options:has(> lf-option > strong) > lf-option[chosen] {
  padding-bottom: 32px;
}
lf-options:has(> lf-option > strong) > lf-option > .lf-pick {
  position: absolute;
  left: var(--sp-3);
  bottom: 9px;
}
@media screen {
  lf-options[choose]:not(:where([data-lf-exhibit]) *):has(> lf-option > strong) {
    
    --lf-card-state-room: calc(var(--lf-key-badge-size) + var(--sp-2));
    --lf-card-state-height: 22px;
    & > :is(lf-option, .lf-another) {
      padding-inline-start: var(--sp-3);
    }
    & > lf-option {
      padding-bottom: var(--lf-option-pad-block);
    }
    
    & > .lf-another:not([hidden]) {
      padding-block: var(--lf-option-pad-block);
    }
    & > .lf-another > leaf-composition-field > .lf-compose-field {
      min-height: var(--lf-card-state-height);
    }
    
    & > lf-option::before {
      content: "";
      float: inline-end;
      width: var(--lf-card-state-room);
      height: var(--lf-card-state-height);
      pointer-events: none;
    }
    
    & > lf-option > .lf-pick {
      left: auto;
      inset-inline-end: var(--sp-2);
      top: var(--sp-2);
      bottom: auto;
      z-index: 1;
      min-width: var(--lf-key-badge-size);
      min-height: var(--lf-key-badge-size);
      justify-content: center;
    }
    & > lf-option > .lf-key-badge {
      inset-inline-start: auto;
      inset-inline-end: var(--sp-2);
    }
    & > lf-option > .lf-key-badge {
      top: var(--sp-2);
    }
    & > lf-options-done > .lf-done > .lf-key-badge {
      inset-inline-start: auto;
      inset-inline-end: var(--sp-2);
    }
    
    & > .lf-another > .lf-key-badge {
      inset-inline-start: auto;
      inset-inline-end: var(--lf-option-add-badge-inset);
      top: auto;
      bottom: var(--lf-option-add-badge-end);
      margin: 0;
    }
    & > .lf-another {
      --lf-option-action-room: calc(
        var(--lf-option-write-badge-inset) + var(--lf-key-badge-size) + var(--sp-2)
      );
    }
    & > .lf-another:has(.lf-compose-submit:not([data-lf-empty])) > .lf-key-badge {
      inset-inline-end: var(--lf-option-write-badge-inset);
    }
    & > lf-option:has(> .lf-key-badge[data-lf-binding-badge]) > .lf-pick {
      opacity: 0;
    }
  }
}

lf-option .lf-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: var(--t-6);
  line-height: 1.5;
  color: var(--muted);
}

lf-option .lf-pick::before {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border: 1.5px solid var(--muted);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  font-size: 8px;
  line-height: 1;
  color: var(--card);
}

lf-options:not([multiple]) > lf-option > .lf-pick::before {
  border-radius: 50%;
}
lf-options[multiple] > lf-option > .lf-pick::before {
  border-radius: var(--r-s);
}

lf-option .lf-pick[role="checkbox"] {
  cursor: pointer;
}

lf-option .lf-pick:not([data-lf-said]) {
  font-size: 0;
  gap: 0;
}

@media screen {
  lf-options[choose]:not(:where([data-lf-exhibit]) *)
    > lf-option:not([chosen]):is(:hover, :has(> .lf-pick[data-lf-focus]))
    > .lf-pick::before {
    border-color: var(--ink-2);
  }
}

lf-option[chosen] > .lf-pick {
  color: var(--ok-ink);
}
lf-option[chosen] > .lf-pick::before {
  content: "✓";
  border-color: var(--ok);
  background: var(--ok);
}

@media print {
  lf-option[chosen]::after {
    content: "✓";
    color: var(--ok-ink);
    font-family: var(--sans);
    font-weight: 700;
  }
}
lf-option .lf-pick[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-gap);
  border-radius: var(--r-s);
}

lf-option > .lf-key-badge {
  position: absolute;
  z-index: 1;
  inset-inline-start: var(--lf-key-badge-start);
}
lf-options:has(> lf-option > strong) > lf-option > .lf-key-badge {
  top: 8px;
}

lf-options > lf-options-done > .lf-done[aria-pressed="true"] {
  color: var(--ok-ink);
  border-color: var(--ok);
  background: var(--ok-tint);
}
lf-options > lf-options-done {
  position: relative;
  display: grid;
  padding: 0;
}

lf-options > lf-options-done > .lf-done {
  width: 100%;
  padding-block: max(4px, (max(var(--lf-line), var(--aim-floor)) - 1lh) / 2 - 1px);
}

lf-options > lf-options-done > .lf-done > .lf-key-badge {
  z-index: 1;
  inset-inline-start: var(--lf-key-badge-start);
  top: 0;
  bottom: 0;
  margin: auto 0;
}

@media screen {
  :where(lf-options[choose]:not(:where([data-lf-exhibit]) *)) > * {
    padding-inline-start: var(--lf-key-badge-col);
  }
  :where(lf-options[choose]:not([settled]):not(:where([data-lf-exhibit]) *)) > * {
    padding-block: var(--sp-2);
    padding-inline-end: var(--sp-3);
  }
}
@media screen {
  lf-options[choose]:not([settled]):not(:where([data-lf-exhibit]) *) {
    display: grid;
    
    gap: 1px;
    --lf-ground: var(--card);
    background: var(--rule);
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    
    overflow: clip;
    
    --lf-add-cell-height: calc(var(--lf-option-line) + 2 * var(--lf-option-pad-block));
    --lf-done-cell-height: max(var(--lf-line), var(--aim-floor));
    &:has(> lf-option > strong) {
      --lf-add-cell-height: calc(
        max(var(--lf-option-line), var(--lf-card-state-height)) + 2 *
          var(--lf-option-pad-block)
      );
    }
    &:not(:where(.lf-chrome *)):not(:has(> .lf-another)) {
      --lf-missing-cells: var(--lf-add-cell-height);
      --lf-missing-add: calc(var(--lf-add-cell-height) + 1px);
    }
    &[multiple]:not(:has(> lf-options-done)) {
      --lf-missing-cells: calc(var(--lf-done-cell-height) + var(--lf-missing-add, 0px));
    }
    
    &:where([data-lf-interactive] *):not(:where(.lf-chrome *)):not(:has(> .lf-another)),
    &:where([data-lf-interactive] *)[multiple]:not(:has(> lf-options-done)) {
      &::after {
        content: "";
        display: block;
        position: relative;
        grid-column: 1 / -1;
        height: var(--lf-missing-cells);
        background: var(--card);
      }
    }
    & > .lf-another {
      min-height: var(--lf-add-cell-height);
    }
    & > lf-options-done {
      min-height: var(--lf-done-cell-height);
    }
    
    --lf-block-frame: 1;
    --lf-joined: 1;
    
    & > :not(lf-option) {
      grid-column: 1 / -1;
    }
    
    & .lf-btn[data-lf-focus-visible] {
      outline-offset: calc(-1 * var(--focus-ring-w));
    }
    
    & > * {
      margin-block: 0;
      --fill: var(--card);
      --lf-ground: var(--fill);
      background-color: var(--lf-ground);
    }
    
    & > lf-option:is(:hover, :has(> .lf-pick[data-lf-focus])) {
      --lf-ground: color-mix(in srgb, var(--fill) 92%, var(--ink));
    }
    & > lf-option[chosen] {
      --fill: var(--ok-tint);
      box-shadow: inset 0 0 0 2px var(--ok);
    }
    
    & > lf-option[chosen] > .tag.ok {
      background: var(--card);
    }
    
    & > lf-option > .lf-pick[data-lf-focus-visible] {
      outline: none;
    }
  }
  
  @container style(--lf-options-across: 1) {
    lf-options[choose]:not([settled]):not(:where([data-lf-exhibit]) *):has(
        > lf-option > strong
      ) {
      --lf-option-count: 99;
      --lf-options-row-width: calc(var(--lf-option-count) * 14rem);
      &:has(> lf-option:nth-of-type(1):last-of-type) {
        --lf-option-count: 1;
      }
      &:has(> lf-option:nth-of-type(2):last-of-type) {
        --lf-option-count: 2;
      }
      &:has(> lf-option:nth-of-type(3):last-of-type) {
        --lf-option-count: 3;
      }
      &:has(> lf-option:nth-of-type(4):last-of-type) {
        --lf-option-count: 4;
      }
      &:has(> lf-option:nth-of-type(5):last-of-type) {
        --lf-option-count: 5;
      }
      &:has(> lf-option:nth-of-type(6):last-of-type) {
        --lf-option-count: 6;
      }
      grid-template-columns: repeat(
        auto-fit,
        minmax(
          clamp(
            (100% + 1px) / var(--lf-option-count) - 1px,
            (var(--lf-options-row-width) - 100%) * 999,
            100%
          ),
          1fr
        )
      );
      max-inline-size: none;
    }
  }
  
  lf-options:has(> lf-option > strong) > lf-option {
    --lf-option-in-row: clamp(0, sign(100cqi - var(--lf-options-row-width)) + 1, 1);
    align-content: first baseline;
  }
  @container style(--lf-option-in-row: 1) {
    
    lf-option > .tag:has(~ strong) {
      float: inline-start;
      margin-block-end: calc(var(--lf-card-state-height) - 1lh);
    }
    lf-options:has(> lf-option > .tag ~ strong) > lf-option > strong {
      clear: both;
    }
  }
  
  :is(
      lf-activity,
      lf-ask,
      lf-board,
      lf-card,
      lf-chart,
      lf-code,
      lf-column,
      lf-draft,
      lf-gloss,
      lf-note,
      lf-num,
      lf-option,
      lf-options,
      lf-pane,
      lf-part,
      lf-parts,
      lf-sample,
      lf-shot,
      lf-tab,
      lf-tabs,
      lf-tally,
      lf-text-document,
      lf-toc,
      :is(
          lf-activity,
          lf-ask,
          lf-board,
          lf-card,
          lf-chart,
          lf-code,
          lf-column,
          lf-draft,
          lf-gloss,
          lf-note,
          lf-num,
          lf-option,
          lf-options,
          lf-pane,
          lf-part,
          lf-parts,
          lf-sample,
          lf-shot,
          lf-tab,
          lf-tabs,
          lf-tally,
          lf-text-document,
          lf-toc
        )
        *
    )[data-lf-obligation]:has(
      lf-options[choose]:not(:where([data-lf-exhibit]) *) [data-lf-focus-visible]
    ) {
    --lf-obligation-ring: none;
  }
  lf-options[choose]:not([settled]):not(:where([data-lf-exhibit]) *)
    > lf-option:has(> .lf-pick[data-lf-focus-visible]) {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--focus-ring-w));
  }
  
  lf-options[choose]:not([settled]):not(:where([data-lf-exhibit]) *)
    > lf-option:has(> .lf-pick:focus) {
    --lf-wears-ring: 1;
  }
  
  lf-options[choose]:not(:where([data-lf-exhibit]) *)
    > .lf-another:has(leaf-text[data-lf-focus-visible]) {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--focus-ring-w));
    --lf-wears-ring: 1;
  }
  .lf-another {
    --lf-option-add-seat-inset: var(--sp-1);
    
    --lf-option-add-seat-end: calc(
      var(--lf-option-pad-block) +
        (var(--lf-option-line) - var(--lf-icon-action-face)) / 2
    );
    --lf-option-add-badge-inset: calc(
      var(--lf-option-add-seat-inset) +
        (var(--lf-icon-action-hit) - var(--lf-key-badge-size)) / 2
    );
    --lf-option-add-badge-end: calc(
      var(--lf-option-add-seat-end) +
        (var(--lf-icon-action-face) - var(--lf-key-badge-size)) / 2
    );
    --lf-option-write-badge-inset: calc(
      var(--lf-option-add-seat-inset) + var(--lf-icon-action-hit) + var(--sp-2)
    );
    --lf-option-action-room: var(--lf-option-write-badge-inset);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .lf-another:not([hidden]) {
    min-height: var(--aim-floor);
  }
  .lf-another > .lf-key-badge {
    position: absolute;
    z-index: 1;
    inset-inline-start: var(--lf-key-badge-start);
    top: 0;
    bottom: 0;
    margin: auto 0;
  }
  
  .lf-another > leaf-composition-field > .lf-compose-field {
    --lf-compose-pad-block: 0px;
    --lf-compose-pad-inline-start: 0px;
    position: static;
  }
  .lf-another > leaf-composition-field > .lf-compose-field > leaf-text {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin-inline-start: var(--lf-compose-text-margin-inline-start, 0px);
    --lf-field-end-room: var(--lf-option-action-room);
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    
    font: inherit;
    line-height: var(--lf-option-line);
    resize: none;
  }
  .lf-another .lf-compose-placeholder {
    font: inherit;
    line-height: var(--lf-option-line);
  }
  .lf-another .lf-compose-submit {
    inset-inline-end: var(--lf-option-add-seat-inset);
    inset-block-end: var(--lf-option-add-seat-end);
  }
  
  .lf-another .lf-compose-submit[data-lf-empty]:not([data-lf-focus]) {
    visibility: hidden;
  }
  
  lf-options[choose]:not(:where([data-lf-exhibit]) *) {
    
    --lf-option-pad-block: max(
      var(--lf-option-pad-min),
      (var(--lf-icon-action-hit) - var(--lf-option-line)) / 2
    );
    --lf-key-badge-start: var(--sp-2);
    --lf-key-badge-col: calc(
      var(--lf-key-badge-start) + var(--lf-key-badge-size) + 6px
    );
  }
  lf-options[choose]:not(:where([data-lf-exhibit]) *) > lf-option {
    padding-inline-start: var(--lf-key-badge-col);
  }
}

lf-options:not(:has(> lf-option > strong)) > lf-option {
  position: relative;
  display: table;
  width: 100%;
  box-sizing: border-box;
  border-spacing: var(--lf-row-gap) 0;
  padding: var(--lf-option-pad-block) 0;
  --lf-block-frame: 1;
}

lf-options:not(:has(> lf-option > strong)) > :is(lf-option, .lf-another) {
  --lf-pick-col: 17px;
  --lf-row-gap: var(--sp-2);
  padding-inline-start: var(--lf-pick-col);
}
lf-options[choose]:not(:where([data-lf-exhibit]) *):not(:has(> lf-option > strong))
  > :is(lf-option, .lf-another) {
  padding-inline-start: calc(var(--lf-key-badge-col) + var(--lf-pick-col));
}

lf-options:not(:has(> lf-option > strong)) > .lf-another:not([hidden]) {
  gap: 0;
  padding-block: var(--lf-option-pad-block);
  padding-inline-end: var(--lf-row-gap);
}
lf-options:not(:has(> lf-option > strong)) > .lf-another {
  --lf-compose-text-margin-inline-start: var(--lf-row-gap);
}

@container (max-width: 20rem) {
  lf-options:not(:has(> lf-option > strong)) > :is(lf-option, .lf-another) {
    --lf-row-gap: var(--sp-1);
  }
}

@container style(--lf-joined: 0) {
  lf-options:not(:has(> lf-option > strong)) > lf-option {
    border-radius: var(--r);
  }
  lf-options:not(:has(> lf-option > strong)) > lf-option[chosen] {
    --lf-ground: var(--ok-tint);
    background: var(--lf-ground);
    box-shadow: inset 0 0 0 2px var(--ok);
  }
}

@media screen {
  @container style(--lf-joined: 0) {
    lf-options[choose]:not(:where([data-lf-exhibit]) *) > lf-option:hover {
      --lf-ground: var(--chip);
      background: var(--lf-ground);
    }
    lf-options[choose]:not(:where([data-lf-exhibit]) *) > lf-option[chosen]:hover {
      --lf-ground: color-mix(in srgb, var(--ok-tint) 92%, var(--ink));
    }
  }
}

lf-options:not(:has(> lf-option > strong)) > lf-option > .lf-ref {
  float: inline-end;
  margin-inline-start: var(--lf-row-gap);
  line-height: 1lh;
}

lf-options:not(:has(> lf-option > strong)) > lf-option > .lf-pick {
  position: absolute;
  inset-inline-start: var(--lf-key-badge-col, 0px);
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 11px;
}

lf-options:not(:has(> lf-option > strong)) > lf-option > .lf-key-badge {
  top: 0;
  bottom: 0;
  margin: auto 0;
}

lf-options[settled] > .lf-settled {
  display: none;
  width: 100%;
  align-items: baseline;
  min-height: var(--aim-floor);
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  padding: 7px 0;
  font-weight: 600;
  text-align: left;
  background: transparent;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r);
}

lf-options[settled] > .lf-settled::before {
  align-self: center;
  margin: 0;
}
lf-options[settled] > .lf-settled[aria-expanded="false"] {
  margin-bottom: 0;
}
lf-options[settled] > .lf-settled:hover {
  border-color: var(--border-2);
}
lf-options[settled] > .lf-settled[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
}
.lf-settled-diff {
  margin-inline-start: auto;
  font-weight: 400;
}
@media screen {
  lf-options[settled] > .lf-settled {
    display: flex;
  }
  
  lf-options[settled] > [hidden="until-found"] {
    display: block !important;
    block-size: 0 !important;
    min-block-size: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
}




lf-board {
  --lf-board-columns: 1;
  --lf-grip-room: 0px;
  --lf-grip-block: 0px;
  --lf-grip-pad-inline: 10px;
  --lf-grip-pad-block: 8px;
}
@media screen {
  lf-board {
    min-inline-size: min(
      calc(
        var(--lf-board-columns) * var(--lf-reading-column-floor) +
          (var(--lf-board-columns) - 1) * var(--sp-2)
      ),
      var(--lf-reach, min(100%, 100cqi)),
      var(--lf-box-cap, 100vw)
    );
  }
}
lf-board:has(> lf-column:nth-of-type(2)) {
  --lf-board-columns: 2;
}
lf-board:has(> lf-column:nth-of-type(3)) {
  --lf-board-columns: 3;
}
lf-board:has(> lf-column:nth-of-type(4)) {
  --lf-board-columns: 4;
}
lf-board:has(> lf-column:nth-of-type(5)) {
  --lf-board-columns: 5;
}
lf-board:has(> lf-column:nth-of-type(6)) {
  --lf-board-columns: 6;
}
lf-board {
  display: grid;
  grid-auto-flow: column;
  container: lf-board / inline-size;
  --lf-card-measure: 136px;
  --lf-reading-column-inset: 8px;
  --lf-card-inset: 10px;
  --lf-reading-column-floor: calc(
    var(--lf-card-measure) + 2 * var(--lf-reading-column-inset) + 2 *
      var(--lf-card-inset) + var(--lf-grip-room, 0px) + 2px
  ); 
  grid-auto-columns: 1fr;
  gap: var(--sp-2);
  margin: 14px 0;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
  
  --lf-top: 0px;
}

lf-column {
  display: block;
  --lf-ground: var(--field);
  background: var(--lf-ground);
  box-sizing: border-box;
  border-radius: var(--r);
  padding: var(--lf-reading-column-inset);
  min-width: var(--lf-reading-column-floor);
  min-height: calc(64px + 2 * var(--lf-reading-column-inset));
  --lf-block-frame: 1;
}
.lf-board-destinations {
  display: none;
}

@media screen {
  @container lf-board (width <= 640px) {
    lf-column {
      grid-column: 1;
    }
  }
}
@media screen and (pointer: coarse) {
  @container lf-board (width <= 640px) {
    .lf-board-destinations {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--sp-1);
      margin-top: var(--sp-2);
    }
    .lf-board-destinations-label {
      color: var(--muted);
      font-size: var(--t-6);
    }
    .lf-board-destination {
      min-height: var(--aim-floor);
      padding: var(--sp-1) var(--sp-2);
      border: 1px solid var(--border-2);
      border-radius: var(--chip-r);
      background: var(--field);
      color: var(--ink-2);
      cursor: pointer;
    }
  }
}

lf-column::before,
lf-column > [data-lf-said="label"] {
  display: block;
  font-size: var(--t-working-label);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 2px var(--lf-card-inset) 10px;
}
lf-column::before {
  content: attr(label);
}

lf-column {
  position: relative;
  --lf-tone-dot: var(--border-2);
}
lf-column[tone="ok"] {
  --lf-tone-dot: var(--ok);
}
lf-column[tone="warn"] {
  --lf-tone-dot: var(--warn);
}
lf-column[tone="danger"] {
  --lf-tone-dot: var(--danger);
}
lf-column::before,
lf-column > [data-lf-said="label"] {
  padding-left: calc(var(--lf-card-inset) + 14px);
  padding-right: calc(var(--lf-card-inset) + 2.5em);
  background: radial-gradient(circle, var(--lf-tone-dot) 3.5px, transparent 4px)
    no-repeat var(--lf-card-inset) 0.62em / 8px 8px;
}
lf-column > .lf-column-count {
  position: absolute;
  top: calc(var(--lf-reading-column-inset) + 2px);
  right: calc(var(--lf-reading-column-inset) + var(--lf-card-inset));
  font: 600 var(--t-working-label)/1.5 var(--sans);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
lf-column:has(> [data-lf-said="label"])::before {
  content: none;
}
lf-card {
  --lf-card-inset-block: 12px;
  --lf-grip-inset-block: 2px;
  display: block;
  position: relative;
  --lf-ground: var(--card);
  background: var(--lf-ground);
  font: var(--t-5)/1.5 var(--sans);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--lf-card-inset-block) var(--lf-card-inset);
  margin: 0 0 var(--sp-2);
  container-type: inline-size;
  --lf-block-frame: 1;
}

@media screen {
  html[data-lf-interactive] lf-board:not(:where([data-lf-exhibit]) *) {
    --lf-grip-room: max(
      var(--aim-floor),
      calc(var(--t-5) + 2 * var(--lf-grip-pad-inline))
    );
    --lf-grip-block: max(
      var(--aim-floor),
      calc(var(--t-5) + 2 * var(--lf-grip-pad-block))
    );
  }
  html[data-lf-interactive] lf-card:not(:where([data-lf-exhibit]) *)::before {
    content: "";
    float: right;
    inline-size: var(--lf-grip-room);
    block-size: var(--lf-grip-block);
    margin-block-start: calc(var(--lf-grip-inset-block) - var(--lf-card-inset-block));
  }
  lf-card > :not(:first-child) {
    clear: right;
  }
}

lf-card > strong {
  display: block;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
lf-card > strong + p {
  margin-block-start: 0;
}

lf-card .lf-grip {
  position: absolute;
  top: var(--lf-grip-inset-block);
  right: 0;
  color: var(--muted);
  padding: var(--lf-grip-pad-block) var(--lf-grip-pad-inline);
  cursor: grab;
  box-sizing: border-box;
  inline-size: var(--lf-grip-room);
  block-size: var(--lf-grip-block);
  min-height: var(--aim-floor);
  min-width: var(--aim-floor);
  border-radius: var(--r-s);
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
  touch-action: none; 
}

lf-card .lf-grip {
  scroll-margin-inline-start: calc(100cqi + 2 * var(--lf-card-inset));
}
lf-card:hover > .lf-grip {
  color: var(--ink-2);
}
lf-card .lf-grip:hover {
  background: var(--chip);
}

lf-card .lf-grip[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
  color: var(--ink-2);
}

lf-card.lf-ghost {
  opacity: 0.4;
  border-style: dashed;
  border-color: var(--accent);
}

lf-card.lf-lift {
  box-shadow: var(--raise-1);
  border-color: var(--accent);
}



@property --lf-views-flow {
  syntax: "*";
  inherits: false;
  initial-value: box;
}
body > main > lf-tabs:nth-child(1 of lf-tabs):not([list="side"]) {
  --lf-views-flow: page;
}
:where(lf-tabs) {
  --lf-tab-end: calc(var(--sp-4) + var(--lf-end-room));
  display: block;
  margin: 14px 0;
}
:is(lf-tab, lf-parts, lf-part) {
  display: block;
}

:is(lf-tab, lf-part)::before,
.lf-tabstrip .lf-tab-group {
  font-size: var(--t-6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
:is(lf-tab, lf-part)::before {
  content: attr(label);
  display: block;
  margin: 18px 0 8px;
}
lf-tabs.lf-rendered > lf-tab {
  margin-top: 14px;
}

.lf-tabstrip {
  anchor-scope: --lf-tab-mark;
  display: none;
  gap: 2px;
  --lf-tab-focus-gap: 2px;
  --lf-tabstrip-flow: row;
  border-bottom: 1px solid var(--border-2);
}

.lf-tabstrip .lf-tab-btn {
  padding: max(4px, (var(--aim-floor) - 1lh) / 2 - 4px) 7px
    max(6px, (var(--aim-floor) - 1lh) / 2 - 2px);
  min-width: var(--aim-floor);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
}
.lf-tabstrip .lf-tab-btn:hover {
  color: var(--ink-2);
  box-shadow: none;
}
.lf-tabstrip .lf-tab-btn:not([aria-selected="true"]):hover > .lf-tab-name {
  box-shadow: var(--offer-hover-shadow);
}

.lf-tabstrip .lf-tab-btn[data-lf-focus-visible] {
  outline: none;
}
.lf-tabstrip .lf-tab-btn[data-lf-focus-visible] > .lf-tab-name {
  outline: var(--focus-ring);
  outline-offset: var(--lf-tab-focus-gap);
}

.lf-tabstrip .lf-tab-btn > .lf-tab-name {
  position: relative;
  display: inline-block;
  padding: 2px 5px;
  border-bottom: 2px solid transparent;
}
.lf-tab-mark {
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  block-size: 2px;
  visibility: hidden;
  pointer-events: none;
}
.lf-tab-selection {
  position: absolute;
  position-anchor: --lf-tab-mark;
  left: anchor(left);
  top: anchor(top);
  width: anchor-size(width);
  block-size: 2px;
  background: var(--ink);
  pointer-events: none;
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  .lf-tabstrip[data-lf-selection-travel] > .lf-tab-selection {
    transition:
      left 160ms ease,
      top 160ms ease,
      width 160ms ease;
  }
}
.lf-tabstrip .lf-tab-btn[aria-selected="true"] {
  color: var(--ink);
}
.lf-tabstrip .lf-tab-btn[aria-selected="true"] .lf-tab-mark {
  anchor-name: --lf-tab-mark;
  visibility: visible;
}
@container style(--lf-tabstrip-flow: column) {
  .lf-tabstrip .lf-tab-btn {
    padding-block: max(5px, (var(--aim-floor) - 1lh) / 2 - 3px)
      max(7px, (var(--aim-floor) - 1lh) / 2 - 1px);
  }
  .lf-tabstrip .lf-tab-btn > .lf-tab-name {
    border-bottom: 0;
  }
  .lf-tab-mark,
  .lf-tab-selection {
    display: none;
  }
  .lf-tabstrip .lf-tab-btn[aria-selected="true"] > .lf-tab-name {
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--border-2);
  }
}

@media (forced-colors: active) {
  .lf-tabstrip .lf-tab-btn > .lf-tab-name {
    border-bottom-color: Canvas;
  }
  .lf-tab-selection {
    forced-color-adjust: none;
    background: CanvasText;
  }
  @container style(--lf-tabstrip-flow: column) {
    .lf-tabstrip .lf-tab-btn[aria-selected="true"] > .lf-tab-name {
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 2px;
    }
  }
}

.lf-tabdiff {
  font-weight: 400;
  margin-left: 6px;
}
.lf-tabdiff:empty {
  display: none;
}

@media screen {
  
  :is(lf-tabs, lf-tab, .lf-tabstrip) {
    scroll-padding-block-end: var(--lf-end-room);
  }
  
  :where(
    lf-tabs.lf-rendered,
    html[data-lf-interactive] lf-tabs:not(.lf-rendered):has(> lf-tab)
  ) {
    margin: var(--sp-4) 0 32px;
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    --lf-ground: var(--card);
    background: var(--lf-ground);
    --lf-block-frame: 1;
  }
  
  .lf-tabstrip {
    display: flex;
    flex-direction: var(--lf-tabstrip-flow);
    padding: 8px var(--lf-tabstrip-pad) 0;
    --lf-tabstrip-pad: 8px;
    box-sizing: border-box;
    min-block-size: var(--lf-tabstrip-h);
    border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
    --lf-tabstrip-bg: var(--card);
    background: var(--lf-tabstrip-bg);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-padding-inline: var(--lf-tabstrip-press);
    --lf-tabstrip-press: max(36px, var(--aim-floor));
    --lf-more-fade-to: #000;
  }
  lf-tabs.lf-rendered > lf-tab::before,
  html[data-lf-interactive] lf-tabs:not(.lf-rendered):has(> lf-tab) > lf-tab::before {
    content: none;
  } 
  
  lf-tabs.lf-rendered > lf-tab {
    margin: 0;
    padding: 0;
  }
  lf-tabs.lf-rendered > lf-tab:not([hidden]),
  html[data-lf-interactive] lf-tabs:not(.lf-rendered):has(> lf-tab) > lf-tab {
    padding: var(--sp-4) var(--sp-4) var(--lf-tab-end);
    
    --lf-top-start: calc(-1 * var(--sp-4));
    --lf-end-room: inherit;
    --lf-block-frame: 1;
  }
  
  :is(lf-tabs, lf-parts).lf-rendered {
    position: relative;
    anchor-scope: --lf-tab-panel;
  }
  :is(lf-tabs, lf-parts).lf-rendered > :is(lf-tab, lf-part):not([hidden]) {
    position: relative;
    z-index: 0;
    anchor-name: --lf-tab-panel;
  }
  :is(lf-tabs, lf-parts).lf-rendered > :is(lf-tab, lf-part)[data-lf-focus-visible] {
    outline: none;
  }
  :is(lf-tabs, lf-parts).lf-rendered:has(
      > :is(lf-tab, lf-part)[data-lf-focus-visible]
    ) {
    --lf-wears-ring: 1;
  }
  :is(lf-tabs, lf-parts).lf-rendered:has(
      > :is(lf-tab, lf-part)[data-lf-focus-visible]
    )::after {
    content: "";
    position: absolute;
    position-anchor: --lf-tab-panel;
    inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
    z-index: 1;
    pointer-events: none;
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--focus-ring-w));
  }
  
  lf-tabs.lf-rendered > lf-tab[hidden] {
    margin: 0;
  }
  
  :is(lf-tabs, lf-parts).lf-rendered > :is(lf-tab, lf-part)[hidden] {
    overflow-anchor: none;
  }

  
  lf-tabs.lf-rendered[data-lf-views-flow="box"] > lf-tab {
    container-type: inline-size;
  }

  
  :is(lf-tabs[list="side"], lf-parts) {
    --lf-tab-summary-h: 17px;
    --lf-tab-context-h: 0px;
    --lf-tab-outcome-h: 0px;
  }
  lf-tabs[list="side"]:has(> lf-tab[summary]) {
    --lf-tab-context-h: var(--lf-tab-summary-h);
  }
  lf-tabs[list="side"]:has(> lf-tab [data-lf-awaits]) {
    --lf-tab-outcome-h: var(--lf-tab-summary-h);
  }
  lf-tabs[list="side"].lf-rendered,
  html[data-lf-interactive] lf-tabs[list="side"]:not(.lf-rendered):has(> lf-tab) {
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr);
    align-items: start;
  }
  lf-tabs[list="side"].lf-rendered > .lf-tabstrip,
  html[data-lf-interactive]
    lf-tabs[list="side"]:not(.lf-rendered):has(> lf-tab)::before {
    grid-column: 1;
    grid-row: 1;
    --lf-tabstrip-flow: column;
    --lf-tabstrip-bg: var(--field);
    gap: 0;
    overflow: visible;
    
    scroll-padding-inline: 0;
    padding: 8px 8px calc(8px + var(--lf-end-room));
    border-bottom: 0;
    border-inline-end: 1px solid var(--border-2);
    border-radius: calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px);
    align-self: stretch;
  }
  
  :is(lf-tabs[list="side"], lf-parts).lf-rendered > .lf-tabstrip .lf-tab-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    align-items: baseline;
    justify-items: start;
    text-align: start;
    & > .lf-tab-mark {
      position: static;
      grid-column: 1 / -1;
      justify-self: stretch;
    }
    & > .lf-tab-name {
      border-bottom: 0;
    }
    & > .lf-tabdiff {
      margin-left: calc(6px + var(--focus-ring-w) + var(--lf-tab-focus-gap));
    }
  }
  
  lf-tabs[list="side"].lf-rendered > .lf-tabstrip .lf-tab-answer {
    container-type: inline-size;
    grid-column: 1 / -1;
    grid-row: 3;
    block-size: var(--lf-tab-summary-h);
    line-height: var(--lf-tab-summary-h);
    padding-inline: 5px;
    justify-self: stretch;
    display: flex;
    gap: 0.3em;
    font-size: var(--t-6);
    font-weight: 600;
    color: var(--ink-2);
  }
  lf-tabs[list="side"].lf-rendered > .lf-tabstrip .lf-tab-answer::before {
    content: "✓" / "";
    flex: none;
    color: var(--ok-ink);
  }
  lf-tabs[list="side"].lf-rendered
    > .lf-tabstrip
    .lf-tab-answer[data-lf-obligations="open"] {
    font-weight: 400;
    color: var(--muted);
    &::before {
      content: "○" / "";
      color: inherit;
    }
  }
  lf-tabs[list="side"].lf-rendered
    > .lf-tabstrip
    .lf-tab-answer:not([data-lf-obligations]) {
    visibility: hidden;
  }
  lf-tabs[list="side"].lf-rendered > .lf-tabstrip .lf-tab-answer-words {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  :is(lf-tabs[list="side"], lf-parts).lf-rendered > .lf-tabstrip .lf-tab-summary {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0 5px;
    font-size: var(--t-working-label);
    line-height: var(--lf-tab-summary-h);
    color: var(--muted);
  }
  
  lf-tabs[list="side"].lf-rendered > .lf-tabstrip > .lf-tab-run {
    display: flex;
    flex-direction: column;
  }
  lf-tabs[list="side"].lf-rendered > .lf-tabstrip > .lf-tab-run + .lf-tab-run {
    margin-block-start: 2px;
    padding-block-start: 2px;
    border-block-start: 1px solid var(--border-2);
  }
  lf-tabs[list="side"].lf-rendered > .lf-tabstrip .lf-tab-group {
    padding: 4px 12px 2px;
  }
  lf-tabs[list="side"].lf-rendered > lf-tab,
  html[data-lf-interactive]
    lf-tabs[list="side"]:not(.lf-rendered):has(> lf-tab)
    > lf-tab {
    grid-column: 2;
    grid-row: 1;
  }
  @container (width < 36rem) {
    lf-tabs[list="side"].lf-rendered > .lf-tabstrip,
    html[data-lf-interactive]
      lf-tabs[list="side"]:not(.lf-rendered):has(> lf-tab)::before {
      grid-column: 1 / -1;
      grid-row: auto;
      --lf-tabstrip-flow: row;
      --lf-tabstrip-bg: var(--card);
      gap: 2px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-padding-inline: var(--lf-tabstrip-press);
      padding: 8px var(--lf-tabstrip-pad) 0;
      border-inline-end: 0;
      border-bottom: 1px solid var(--border-2);
      border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
    }
    lf-tabs[list="side"].lf-rendered > .lf-tabstrip,
    html[data-lf-interactive]
      lf-tabs[list="side"]:not(.lf-rendered):has(> lf-tab)::before {
      min-block-size: calc(
        var(--lf-tabstrip-h) + var(--lf-tab-context-h) + var(--lf-tab-outcome-h)
      );
    }
    lf-tabs[list="side"].lf-rendered > .lf-tabstrip .lf-tab-btn {
      max-inline-size: 16rem;
    }
    lf-tabs[list="side"].lf-rendered > .lf-tabstrip > .lf-tab-run {
      flex: none;
      flex-direction: row;
      --lf-tab-run-gap: 2px;
      gap: var(--lf-tab-run-gap);
    }
    lf-tabs[list="side"].lf-rendered > .lf-tabstrip > .lf-tab-run + .lf-tab-run {
      margin-block-start: 0;
      padding-block-start: 0;
      border-block-start: 0;
      padding-inline-start: 4px;
      border-inline-start: 1px solid var(--border-2);
    }
    
    lf-tabs[list="side"].lf-rendered > .lf-tabstrip .lf-tab-group {
      flex: none;
      display: flex;
      align-items: center;
      padding: 0 4px;
      position: sticky;
      inset-inline-start: calc(-1 * var(--lf-tabstrip-pad));
      z-index: 1;
      background: var(--lf-tabstrip-bg);
    }
    lf-tabs[list="side"].lf-rendered > .lf-tabstrip[data-lf-more-before] .lf-tab-group {
      inset-inline-start: calc(var(--lf-tabstrip-press) - var(--lf-tabstrip-pad));
    }
    lf-tabs[list="side"].lf-rendered
      > .lf-tabstrip
      > .lf-tab-run:not([data-lf-group-apart])
      > .lf-tab-group
      ~ .lf-tab-btn {
      scroll-margin-inline-start: calc(
        var(--lf-tab-group-size) + var(--lf-tab-run-gap)
      );
    }
    lf-tabs[list="side"].lf-rendered
      > .lf-tabstrip
      > .lf-tab-run[data-lf-group-apart]
      > .lf-tab-group {
      position: static;
    }
    lf-tabs[list="side"].lf-rendered
      > .lf-tabstrip
      .lf-tab-btn
      > :is(.lf-tab-name, .lf-tab-summary) {
      max-inline-size: 100%;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    lf-tabs[list="side"].lf-rendered > lf-tab,
    html[data-lf-interactive]
      lf-tabs[list="side"]:not(.lf-rendered):has(> lf-tab)
      > lf-tab {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }
  
  @container style(--lf-full-height: 1) {
    lf-tabs[list="side"].lf-rendered {
      min-block-size: 0;
      grid-template-rows: auto minmax(0, 1fr);
      --lf-full-height: inherit;
    }
    lf-tabs[list="side"].lf-rendered > .lf-tabstrip {
      grid-row: 1;
    }
    lf-tabs[list="side"].lf-rendered > lf-tab {
      grid-row: 2;
    }
    @container (width >= 36rem) {
      lf-tabs[list="side"].lf-rendered > :is(.lf-tabstrip, lf-tab) {
        grid-row: 1 / -1;
      }
    }
    
    lf-tabs[list="side"].lf-rendered > :is(.lf-tabstrip, lf-tab:not([hidden])) {
      align-self: stretch;
      min-block-size: 0;
      overflow: auto;
      --lf-top: var(--lf-top-start);
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      --lf-holds-height: 1;
    }
  }

  
  :where(
    lf-tabs.lf-rendered[data-lf-views-flow="page"],
    html[data-lf-interactive]
      lf-tabs:not(.lf-rendered)[data-lf-views-flow="page"]:has(> lf-tab)
  ) {
    --lf-tab-end: var(--lf-end-room);
    margin-block: 0 32px;
    min-block-size: calc(100dvh - var(--lf-top));
    border: 0;
    border-radius: 0;
    background: transparent;
    --lf-ground: inherit;
    --lf-block-frame: 0;
  }
  
  lf-tabs:not([list="side"]) {
    isolation: isolate;
    --lf-top-outer: var(--lf-top);
  }
  lf-tabs:not([list="side"]) > lf-tab {
    --lf-top: calc(var(--lf-top-outer) + var(--lf-tabstrip-h));
  }
  lf-tabs:not([list="side"]) > .lf-tabstrip {
    position: sticky;
    top: var(--lf-top);
    --lf-head-inset: 8px;
    z-index: 2;
    block-size: var(--lf-tabstrip-h);
  }
  lf-tabs[data-lf-views-flow="page"] > .lf-tabstrip {
    border-radius: 0;
    --lf-tabstrip-pad: 0px;
    --lf-tabstrip-bg: var(--paper);
  }
  
  .lf-tabstrip-scroll {
    display: none;
    position: sticky;
    z-index: 1;
    flex: none;
    inline-size: 0;
    align-self: stretch;
  }
  .lf-tabstrip-scroll[data-to="start"] {
    inset-inline-start: calc(-1 * var(--lf-tabstrip-pad));
    margin-inline-end: -2px;
  }
  .lf-tabstrip-scroll[data-to="end"] {
    inset-inline-end: calc(-1 * var(--lf-tabstrip-pad));
    margin-inline-start: -2px;
  }
  .lf-tabstrip-scroll > span {
    position: absolute;
    inset-block: 0;
    inline-size: var(--lf-tabstrip-press);
    padding-inline: 8px;
    display: flex;
    align-items: center;
    color: var(--muted);
    cursor: pointer;
  }
  .lf-tabstrip[data-lf-more-before] > .lf-tabstrip-scroll[data-to="start"],
  .lf-tabstrip[data-lf-more-after] > .lf-tabstrip-scroll[data-to="end"] {
    display: block;
  }
  .lf-tabstrip-scroll > span:hover {
    color: var(--ink);
  }
  .lf-tabstrip-scroll[data-to="start"] > span {
    inset-inline-start: 0;
    justify-content: flex-start;
    background: linear-gradient(to right, var(--lf-tabstrip-bg) 75%, transparent);
  }
  .lf-tabstrip-scroll[data-to="end"] > span {
    inset-inline-end: 0;
    justify-content: flex-end;
    background: linear-gradient(to left, var(--lf-tabstrip-bg) 75%, transparent);
  }
  .lf-tabstrip-scroll[data-to="start"]:dir(rtl) > span {
    background: linear-gradient(to left, var(--lf-tabstrip-bg) 75%, transparent);
  }
  .lf-tabstrip-scroll[data-to="end"]:dir(rtl) > span {
    background: linear-gradient(to right, var(--lf-tabstrip-bg) 75%, transparent);
  }
  .lf-tabstrip-scroll:dir(rtl) .lf-tabstrip-scroll-icon {
    scale: -1 1;
  }
  
  lf-tabs.lf-rendered[data-lf-views-flow="page"] > lf-tab:not([hidden]),
  html[data-lf-interactive]
    lf-tabs:not(.lf-rendered)[data-lf-views-flow="page"]:has(> lf-tab)
    > lf-tab {
    padding: var(--sp-4) 0 var(--lf-tab-end);
    --lf-block-frame: trim;
  }
  
  lf-tabs.lf-rendered[data-lf-views-flow="page"] > lf-tab[hidden] {
    height: 0;
    min-height: 0;
    overflow: clip;
    pointer-events: none;
  }
  
  @container style(--lf-full-height: 1) {
    
    lf-tabs.lf-rendered[data-lf-views-flow="page"],
    html[data-lf-interactive]
      lf-tabs:not(.lf-rendered)[data-lf-views-flow="page"]:has(> lf-tab) {
      display: flex;
      flex-direction: column;
      min-block-size: 0;
      margin-block: 0;
      margin-inline: calc(-1 * var(--focus-ring-room));
      padding: 0 var(--focus-ring-room) var(--focus-ring-room);
      --lf-full-height: inherit;
    }
    lf-tabs.lf-rendered[data-lf-views-flow="page"] > .lf-tabstrip,
    html[data-lf-interactive]
      lf-tabs:not(.lf-rendered)[data-lf-views-flow="page"]:has(> lf-tab)::before {
      flex: none;
    }
    lf-tabs.lf-rendered[data-lf-views-flow="page"] > lf-tab:not([hidden]),
    html[data-lf-interactive]
      lf-tabs:not(.lf-rendered)[data-lf-views-flow="page"]:has(> lf-tab)
      > lf-tab[data-lf-opening] {
      flex: 1 0 auto;
    }
    lf-tabs.lf-rendered[data-lf-views-flow="page"]
      > lf-tab:not([hidden]):has(
        > :nth-child(1 of :not(script, style, template)):nth-last-child(
            1 of :not(script, style, template)
          )
      ),
    html[data-lf-interactive]
      lf-tabs:not(.lf-rendered)[data-lf-views-flow="page"]:has(> lf-tab)
      > lf-tab[data-lf-opening]:has(> [data-lf-sole-content]) {
      flex: 1 1 0;
      min-block-size: 0;
      display: flex;
      flex-direction: column;
      --lf-full-height: inherit;
    }
    lf-tabs.lf-rendered[data-lf-views-flow="page"]
      > lf-tab:not([hidden])
      > :nth-child(1 of :not(script, style, template)):nth-last-child(
        1 of :not(script, style, template)
      ),
    html[data-lf-interactive]
      lf-tabs:not(.lf-rendered)[data-lf-views-flow="page"]:has(> lf-tab)
      > lf-tab[data-lf-opening]
      > [data-lf-sole-content] {
      flex: 1 1 0;
      margin-block: 0;
    }
  }

  
  @scope (html[data-lf-interactive] lf-tabs) {
    :scope:is(lf-tabs):not(.lf-rendered):has(> lf-tab) {
      &::before {
        content: "";
        display: block;
        box-sizing: border-box;
        block-size: var(--lf-tabstrip-h);
        border-bottom: 1px solid var(--border-2);
      }
      & > lf-tab:not([data-lf-opening]) {
        display: none;
      }
    }
  }
  @scope (html[data-lf-interactive] body > main > lf-tabs) {
    :scope:is(lf-tabs):not(.lf-rendered)[data-lf-views-flow="page"]:has(
        > lf-tab
      )::before {
      border-radius: 0;
      background: var(--paper);
    }
  }

  
  lf-parts.lf-rendered > lf-part {
    margin: 0;
    padding: 0;
  }
  lf-parts.lf-rendered > lf-part::before {
    content: none;
  }
  lf-parts.lf-rendered > lf-part:not([hidden]) {
    --lf-block-frame: trim;
  }
  
  lf-parts.lf-rendered > lf-part[hidden] {
    block-size: 0;
    min-block-size: 0;
    overflow: clip;
    pointer-events: none;
  }
  @scope (body > main:not(.layout-column, .layout-sidebar, .layout-workspace) > lf-parts) {
    :scope:is(lf-parts).lf-rendered > .lf-tabstrip {
      position: fixed;
      position-anchor: --lf-parts-title;
      top: anchor(bottom, var(--lf-top));
      inline-size: var(--lf-parts-list);
      box-sizing: border-box;
      align-self: start;
      block-size: calc(100dvh - var(--lf-head-room) - anchor-size(height, 0px));
      min-block-size: 0;
      --lf-tabstrip-flow: column;
      gap: 0;
      padding: calc(var(--sp-4) - var(--focus-ring-room)) 8px
        calc(var(--sp-4) + var(--lf-foot-room));
      scroll-padding-block-end: var(--lf-foot-room);
      overflow-x: hidden;
      overflow-y: auto;
      --lf-holds-height: 1;
      border-bottom: 0;
      border-radius: 0;
      --lf-tabstrip-bg: var(--paper);
    }
    :scope:is(lf-parts).lf-rendered > .lf-tabstrip > .lf-tabstrip-scroll {
      display: none;
    }
    :scope:is(lf-parts).lf-rendered > lf-part:not([hidden]) {
      border-inline-start: 1px solid var(--rule);
    }
    
    @container lf-shell (width < 640px) {
      :scope:is(lf-parts) {
        --lf-top-outer: var(--lf-top);
      }
      :scope:is(lf-parts) > lf-part {
        --lf-top: calc(var(--lf-top-outer) + var(--lf-tabstrip-h));
      }
      :scope:is(lf-parts).lf-rendered > .lf-tabstrip {
        position-anchor: normal;
        position: sticky;
        --lf-head-inset: 0px;
        top: var(--lf-top);
        inline-size: auto;
        z-index: 2;
        block-size: var(--lf-tabstrip-h);
        --lf-tabstrip-flow: row;
        gap: 2px;
        padding: 8px var(--lf-tabstrip-pad) 0;
        overflow-x: auto;
        overflow-y: hidden;
        border-bottom: 1px solid var(--border-2);
      }
      :scope:is(lf-parts).lf-rendered > .lf-tabstrip .lf-tab-summary {
        display: none;
      }
      :scope:is(lf-parts).lf-rendered > lf-part:not([hidden]) {
        border-inline-start: 0;
      }
    }
  }
  
  @scope (html[data-lf-interactive] lf-parts) {
    :scope:is(lf-parts):not(.lf-rendered):has(> lf-part) {
      &::before {
        content: "";
        display: block;
        box-sizing: border-box;
        block-size: var(--lf-tabstrip-h);
        border-bottom: 1px solid var(--border-2);
        border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
        background: var(--card);
      }
      & > lf-part {
        margin: 0;
        padding: 0;
        --lf-block-frame: trim;
      }
      & > lf-part::before {
        content: none;
      }
      & > lf-part:not([data-lf-opening]) {
        display: none;
      }
    }
  }
  @scope (html[data-lf-interactive]
      body > main:not(.layout-column, .layout-sidebar, .layout-workspace) > lf-parts) {
    :scope:is(lf-parts):not(.lf-rendered):has(> lf-part) {
      &::before {
        content: none;
      }
      & > lf-part {
        border-inline-start: 1px solid var(--rule);
      }
      @container lf-shell (width < 640px) {
        &::before {
          content: "";
          border-radius: 0;
          background: var(--paper);
        }
        & > lf-part {
          border-inline-start: 0;
        }
      }
    }
  }
}

@media print {
  
  lf-tabs[list="side"] > lf-tab[group]::before {
    content: attr(group) " · " attr(label);
  }
}


@media screen {
  @container not style(--lf-end-room: 0px) {
    lf-tabs
      > lf-tab:not([hidden]):has(
        > :is(lf-tabs, [data-lf-reading-role="pane"]):only-child
      ) {
      --lf-tab-end: 0px;
    }
    lf-tabs
      > lf-tab:not([hidden])
      > :is(lf-tabs, [data-lf-reading-role="pane"]):only-child {
      --lf-end-room: inherit;
      margin-block-end: 0;
    }
    @container (width >= 36rem) {
      lf-tabs[list="side"] > .lf-tabstrip {
        --lf-end-room: inherit;
      }
    }
  }
}


lf-tally {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}
lf-tally .lf-tally-face {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  max-width: 100%;
}
lf-tally:not([data-lf-ready]) .lf-tally-face {
  visibility: hidden;
}
lf-tally .lf-tally-count {
  display: inline-grid;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
lf-tally .lf-tally-count > * {
  grid-area: 1 / 1;
  justify-self: center;
}
lf-tally .lf-tally-room {
  visibility: hidden;
}

lf-tally .lf-tally-next {
  font-size: var(--t-6);
  padding-block: 0;
  min-height: var(--aim-floor);
  margin-inline-end: var(--focus-ring-room);
}


lf-toc {
  display: block;
  margin: var(--sp-4) 0 30px;
}
lf-toc:is(:empty, [data-lf-toc-empty]) {
  display: none;
}
lf-toc .lf-toc-nav {
  position: relative;
  border-left: 1px solid var(--border-2);
  padding-left: var(--sp-3);
  color: var(--muted);
  font: var(--t-5)/1.3 var(--sans);
}
lf-toc .lf-toc-disclosure {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  --lf-block-frame: 0;
}
lf-toc .lf-toc-heading {
  display: none;
  margin: 0 0 7px;
}
lf-toc .lf-toc-toggle {
  margin: 0;
  padding-block: max(7px, (var(--aim-floor) - 1lh) / 2);
}
lf-toc .lf-toc-toggle[data-lf-focus-visible] {
  outline-offset: calc(-1 * var(--focus-ring-w));
}
lf-toc .lf-toc-disclosure[open] .lf-toc-toggle {
  margin-bottom: 7px;
}
@media print {
  lf-toc .lf-toc-heading {
    display: block;
  }
  lf-toc .lf-toc-toggle {
    display: none;
  }
}

@media screen {
  @container style(--lf-sidebar-slot: beside) {
    lf-toc .lf-toc-heading {
      display: block;
    }
    lf-toc .lf-toc-toggle {
      display: none;
    }
    lf-toc a[aria-current="location"] {
      color: var(--ink);
    }
  }
}
lf-toc .lf-toc-start,
lf-toc .lf-toc-window {
  display: none;
}
@media print {
  lf-toc .lf-toc-start {
    display: block;
  }
}
lf-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
lf-toc li {
  --lf-toc-indent: 0px;
  margin: 0 0 0 var(--lf-toc-indent);
}
lf-toc li[data-lf-depth="1"] {
  --lf-toc-indent: 10px;
}
lf-toc li[data-lf-depth="2"] {
  --lf-toc-indent: 20px;
}
lf-toc li[data-lf-depth="3"] {
  --lf-toc-indent: 30px;
}
lf-toc li[data-lf-depth="4"] {
  --lf-toc-indent: 40px;
}

lf-toc a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  padding-block: max(3px, (var(--aim-floor) - 1lh) / 2);
}
lf-toc a:hover,
lf-toc a[data-lf-focus] {
  color: var(--accent);
}


@media screen and (hover: hover) and (pointer: fine) {
  
  @container lf-content-frame style(--lf-sidebar-placement: margin) {
    @container style(--lf-sidebar-slot: margin) {
      lf-toc {
        position: fixed;
        
        left: calc(var(--lf-shell-left, 0px) + var(--sp-4));
        top: var(--lf-head-room, 0px);
        z-index: 4;
        
        width: var(--sp-4);
        box-sizing: border-box;
        pointer-events: none;
        
        height: var(--lf-view-height);
        margin: 0;
      }
      
      lf-toc .lf-toc-nav {
        width: 100%;
        height: 100%;
        border: 0;
        box-sizing: border-box;
        padding: var(--sp-4) 0;
        --lf-toc-label-opacity: 0;
        pointer-events: none;
        transition: background-color 0.24s ease-out;
      }
      lf-toc:is(:hover, [data-lf-focus-within]) .lf-toc-nav {
        width: calc(var(--sidebar-max) - var(--sp-4));
      }
      @scope (body[data-lf-go-to-active] lf-toc) {
        :scope:is(lf-toc) .lf-toc-nav {
          width: calc(var(--sidebar-max) - var(--sp-4));
        }
      }
      lf-toc .lf-toc-toggle {
        display: none;
      }
      lf-toc .lf-toc-disclosure {
        display: contents;
      }
      lf-toc .lf-toc-rows {
        position: relative;
        display: flex;
        
        height: calc(var(--lf-view-height) - 2 * var(--sp-4));
        --lf-toc-spine-width: 1px;
        flex-direction: column;
      }
      
      lf-toc .lf-toc-rows::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: calc(-1 * var(--sp-2));
        width: var(--sp-4);
        pointer-events: auto;
      }
      lf-toc:is(:hover, [data-lf-focus-within], [data-lf-outline]),
      lf-toc:is(:hover, [data-lf-focus-within], [data-lf-outline]) .lf-toc-nav {
        pointer-events: auto;
      }
      @scope (body[data-lf-go-to-active] lf-toc) {
        :is(:scope:is(lf-toc), :scope:is(lf-toc) .lf-toc-nav) {
          pointer-events: auto;
        }
      }
      lf-toc .lf-toc-rows::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--lf-toc-spine-width);
        background: var(--border-2);
      }
      
      lf-toc .lf-toc-window {
        display: block;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: var(--lf-toc-spine-width);
        height: 1px;
        transform-origin: top;
        background: var(--accent);
      }
      
      lf-toc .lf-toc-start,
      lf-toc li {
        --lf-toc-indent: 0px;
        position: relative;
        z-index: 2;
        display: block;
        flex: var(--lf-toc-span, 1) 1 0px;
        min-height: 0;
        margin: 0;
        pointer-events: none;
      }
      lf-toc :is(.lf-toc-start, li)[data-lf-toc-hidden] {
        display: none;
      }
      lf-toc ol {
        display: contents;
      }
      lf-toc .lf-toc-start::before,
      lf-toc li::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: var(--lf-toc-row-shift, 0px);
        transform: translate(-50%, -50%);
        left: calc(var(--lf-toc-spine-width) / 2);
        box-sizing: border-box;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--muted);
      }
      lf-toc .lf-toc-start::before {
        width: 9px;
        height: 9px;
      }
      lf-toc li[data-lf-depth="0"]::before {
        width: 6px;
        height: 6px;
      }
      lf-toc .lf-toc-start::before,
      lf-toc li[data-lf-depth="0"]::before {
        border: 1px solid var(--muted);
        background: var(--paper);
      }
      lf-toc :is(.lf-toc-start, li):has(> a[aria-current="location"])::before {
        background: var(--accent);
        border-color: var(--accent);
      }
      lf-toc .lf-toc-start a,
      lf-toc li a {
        position: absolute;
        z-index: 3;
        display: -webkit-box;
        top: 0;
        left: 0;
        width: calc(var(--sidebar-max) - var(--sp-4));
        overflow: hidden;
        max-height: 2.6em;
        padding: 0 2px 2px calc(14px + var(--lf-toc-indent));
        line-height: 1.3;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        transform: translateY(calc(var(--lf-toc-row-shift, 0px) - 0.5lh));
        opacity: var(--lf-toc-label-opacity);
        pointer-events: none;
        transition:
          color 0.12s ease-out,
          opacity 0.24s ease-out;
      }
      lf-toc .lf-toc-start a {
        font-weight: 650;
        line-height: 1.2;
        max-height: 2.4em;
      }
      lf-toc
        :is(.lf-toc-start a, li a[aria-current="location"]):not(
          :hover,
          [data-lf-focus]
        ) {
        color: var(--ink-2);
      }
      lf-toc a[data-lf-focus-visible] {
        outline: var(--focus-ring);
        outline-offset: calc(-1 * var(--focus-ring-w));
      }
      lf-toc:is(:hover, [data-lf-focus-within]) .lf-toc-nav {
        --lf-toc-label-opacity: 1;
        background: color-mix(in srgb, var(--paper) 92%, transparent);
      }
      @scope (body[data-lf-go-to-active] lf-toc) {
        :scope:is(lf-toc) .lf-toc-nav {
          --lf-toc-label-opacity: 1;
          background: color-mix(in srgb, var(--paper) 92%, transparent);
        }
      }
      lf-toc:is(:hover, [data-lf-focus-within]) .lf-toc-nav a {
        pointer-events: auto;
      }
      @scope (body[data-lf-go-to-active] lf-toc) {
        :scope:is(lf-toc) .lf-toc-nav a {
          pointer-events: auto;
        }
      }
      
      lf-toc[data-lf-compact] :is(.lf-toc-start, li) a {
        max-height: 1.25em;
        font-size: var(--t-6);
        line-height: 1.25;
        -webkit-line-clamp: 1;
      }
      
      lf-toc[data-lf-outline] .lf-toc-nav {
        --lf-toc-label-opacity: 1;
        width: max(
          40px,
          min(320px, calc(var(--lf-beside) + var(--lf-shift, 0px) - 2 * var(--sp-4)))
        );
        background: var(--paper);
        overflow-y: auto;
        pointer-events: auto;
      }
      lf-toc[data-lf-outline] .lf-toc-rows::before,
      lf-toc[data-lf-outline] .lf-toc-window,
      lf-toc[data-lf-outline] :is(.lf-toc-start, li)::before {
        display: none;
      }
      lf-toc[data-lf-outline] .lf-toc-heading {
        display: block;
      }
      lf-toc[data-lf-outline] .lf-toc-rows {
        display: block;
        height: auto;
      }
      lf-toc[data-lf-outline] ol {
        display: block;
      }
      lf-toc[data-lf-outline] :is(.lf-toc-start, li) {
        display: block;
        margin: 0 0 0 var(--lf-toc-indent);
      }
      lf-toc[data-lf-outline] :is(.lf-toc-start, li)[data-lf-toc-hidden] {
        display: none;
      }
      lf-toc[data-lf-outline] :is(.lf-toc-start, li) a {
        position: relative;
        display: block;
        width: 100%;
        max-height: none;
        padding: 3px 0;
        transform: none;
        -webkit-line-clamp: initial;
        opacity: 1;
        pointer-events: auto;
      }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  lf-toc a {
    transition: none;
  }
}
@media (forced-colors: active) {
  lf-toc .lf-toc-rows::before,
  lf-toc .lf-toc-start::before,
  lf-toc li::before,
  lf-toc li[data-lf-depth="0"]::before {
    forced-color-adjust: none;
    background: CanvasText;
    border-color: CanvasText;
  }
  lf-toc .lf-toc-start::before,
  lf-toc li[data-lf-depth="0"]::before {
    background: Canvas;
  }
  lf-toc .lf-toc-window,
  lf-toc :is(.lf-toc-start, li):has(> a[aria-current="location"])::before {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
  }
}


lf-activity {
  display: block;
  margin: var(--sp-3) 0;
  font: var(--t-5)/var(--lf-ui-lh) var(--sans);
  
  --lf-reading-face: 1;
}

lf-activity .lf-activity-news {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: var(--aim-floor);
  min-block-size: var(--aim-floor);
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
lf-activity .lf-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen {
  lf-activity[data-lf-bound] {
    --lf-bound-box: .lf-activity-list;
    max-block-size: none;
    overflow: visible;
    --lf-top: inherit;
  }
  lf-activity[data-lf-bound] > .lf-activity-list {
    max-block-size: var(--lf-bound, 28rem);
    overflow: auto;
    --lf-holds-height: 1;
    --lf-top: 0px;
  }
}
lf-activity .lf-activity-row {
  padding: 7px 0;
  border-top: 1px solid var(--rule);
}
lf-activity .lf-activity-row:first-child {
  border-top: 0;
}
lf-activity .lf-activity-line {
  margin: 0;
  overflow-wrap: anywhere;
}
lf-activity .lf-activity-actor {
  color: var(--ink);
  font-weight: 600;
}
lf-activity .lf-activity-what {
  color: var(--ink-2);
}

lf-activity :is(a[href], button).lf-activity-target {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
  text-decoration-color: var(--link-underline);
}
lf-activity button.lf-activity-target {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
lf-activity :is(a[href], button).lf-activity-target:hover {
  text-decoration-color: currentColor;
}
lf-activity :is(span, a:not([href])).lf-activity-target {
  color: var(--ink-2);
  text-decoration: none;
}
lf-activity .lf-activity-time {
  color: var(--muted);
  white-space: nowrap;
  display: inline-block;
  inline-size: 10ch;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
lf-activity .lf-activity-time::before {
  content: "· ";
}
lf-activity .lf-activity-undone {
  color: var(--muted);
  font-size: var(--t-6);
  border: 1px solid var(--border-2);
  border-radius: var(--chip-r);
  padding: var(--chip-pad);
}
lf-activity
  [data-lf-undone]
  :is(.lf-activity-what, .lf-activity-target, .lf-activity-excerpt) {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}
lf-activity .lf-activity-excerpt {
  margin: 2px 0 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
lf-activity .lf-activity-empty {
  margin: 0;
  color: var(--muted);
  font: var(--t-5) var(--sans);
}


lf-ask {
  display: block;
}

lf-ask[data-lf-obligation] {
  position: relative;
  
  outline: none !important;
}
lf-ask[data-lf-obligation]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  outline: var(--lf-obligation-ring, var(--focus-ring));
  outline-offset: var(--focus-ring-gap);
}
@container style(--lf-full-height: 1) {
  lf-ask[data-lf-obligation]::after {
    outline-offset: calc(-1 * var(--focus-ring-w));
  }
}

@media screen {
  lf-ask {
    box-sizing: border-box;
    max-inline-size: var(--lf-measure);
  }
  lf-ask:has(> [data-lf-space="wide"]) {
    max-inline-size: max(var(--lf-measure), var(--wide));
  }
  lf-ask:has(> [data-lf-space="available"]) {
    max-inline-size: none;
  }
  lf-ask:not([data-lf-space]):has(> [data-lf-space]:not([data-lf-kept])) {
    margin-left: calc(-1 * var(--lf-grow-l));
    margin-right: calc(-1 * var(--lf-grow-r));
    padding-left: var(--lf-grow-l);
    padding-right: var(--lf-grow-r);
    --lf-breakout: 1;
  }
}

lf-ask:has(> :is(figure, img, svg, table, [data-lf-visual]) ~ lf-options):not(
    :has(
      > lf-options
        > lf-option
        :is(figure, img, svg, table, video, [data-lf-visual]):not(.lf-ui *)
    )
  ) {
  --lf-options-across: 1;
}

@container style(--lf-full-height: 1) {
  lf-ask {
    display: flex;
    flex-direction: column;
  }
  lf-ask > * {
    flex: none;
  }
  lf-ask:has(
    > :nth-last-child(1 of :not(script, style, template)):not(
        :nth-child(1 of :not(script, style, template))
      )
  ) {
    --lf-full-height: inherit;
  }
  lf-ask
    > :nth-last-child(1 of :not(script, style, template)):not(
      :nth-child(1 of :not(script, style, template))
    ) {
    flex: 1 1 0;
    margin-block: 0;
  }
}



lf-sample {
  display: table;
  table-layout: fixed;
  width: 100%;
  box-sizing: border-box;
  margin: 18px 0;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--border-2);
  --lf-block-frame: 1;
}

lf-sample > * {
  --lf-box-cap: 100%;
}
lf-sample::before,
lf-sample > [data-lf-said="label"] {
  display: table-caption;
  font-size: var(--t-6);
  margin-bottom: var(--sp-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

lf-sample {
  --lf-sample-word: "quoted";
  --lf-sample-prefix: "quoted · ";
}
lf-sample:is([interactive], :has(> template[data-sample])) {
  --lf-sample-word: none;
  --lf-sample-prefix: "";
}
lf-sample::before {
  content: var(--lf-sample-word);
}
lf-sample[label]::before {
  content: var(--lf-sample-prefix) attr(label);
}
lf-sample:has(> [data-lf-said="label"])::before {
  content: none;
}
lf-sample > [data-lf-said="label"]::before {
  content: var(--lf-sample-prefix);
}

.lf-sample-view {
  position: static;
  display: contents;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}
lf-sample:has(> .lf-sample-view:modal) {
  height: var(--lf-sample-height);
}
lf-sample:has(> template[data-sample]) {
  padding-left: 0;
  border-left: 0;
}
.lf-sample-exhibit {
  display: flex;
  flex-direction: column;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--border-2);
}
.lf-sample-controls {
  margin-bottom: 10px;
}
.lf-sample-controls > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lf-sample-status {
  position: relative;
  flex: 1 1 10em;
  min-width: 0;
  min-height: max(1lh, var(--aim-floor));
  align-content: center;
  white-space: nowrap;
  color: var(--muted);
  font: var(--t-6)/1.4 var(--sans);
}
.lf-sample-failure {
  margin: 0;
  padding: 0;
  border: 0;
}
.lf-sample-failure,
.lf-sample-failure > summary {
  font: inherit;
  color: inherit;
}
.lf-sample-failure > summary {
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-sample-failure[open] > summary {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  white-space: normal;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
}
.lf-sample-frame {
  display: block;
  box-sizing: content-box;
  width: auto;
  height: 32rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--paper);
}

.lf-sample-exhibit:has(> .lf-sample-frame[data-lf-focus]) {
  border-left-color: var(--accent);
}
@media (forced-colors: active) {
  .lf-sample-exhibit:has(> .lf-sample-frame[data-lf-focus]) {
    border-left-color: Highlight;
  }
}
.lf-sample-frame[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

lf-sample[window] .lf-sample-frame {
  box-sizing: border-box;
  height: min(75vh, 48rem);
}
.lf-sample-view:modal {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(var(--sp-3), env(safe-area-inset-top))
    max(var(--sp-3), env(safe-area-inset-right))
    max(var(--sp-3), env(safe-area-inset-bottom))
    max(var(--sp-3), env(safe-area-inset-left));
  background: var(--paper);
  overflow: hidden;
  overscroll-behavior: contain;
}
.lf-sample-view:modal::backdrop {
  background: var(--paper);
}
.lf-sample-view:modal > .lf-sample-controls {
  flex: none;
}

.lf-sample-view:modal > .lf-sample-exhibit {
  flex: 1;
  min-height: 0;
}
.lf-sample-view:modal .lf-sample-frame {
  flex: 1;
  min-height: 0;
}

@scope (html[data-lf-sample-block] lf-sample) {
  :scope:is(lf-sample)[window] .lf-sample-frame {
    height: 32rem;
  }
}
@media print {
  .lf-sample-controls,
  .lf-sample-exhibit,
  .lf-sample-frame {
    display: none;
  }
}



lf-chart .lf-chart-drawing {
  display: block;
  font: 10px var(--sans);
  color: var(--muted);
}

@scope (html[data-lf-interactive] lf-chart) {
  :scope:is(lf-chart):not(.lf-rendered) > pre {
    visibility: hidden;
  }
}

lf-chart .lf-chart-drawing svg {
  display: block;
  font: inherit;
  height: attr(height px, auto);
}
lf-chart .lf-chart-drawing svg[role="img"] {
  --plot-background: var(--paper);
}
lf-chart .lf-chart-drawing [class*="-swatches"] {
  font-family: inherit;
}


lf-code {
  contain: inline-size;
  
  --lf-reading-face: 1;
  --lf-code-gap: 8px;
  --lf-code-inset-inline: 14px;
  --lf-code-inset-block: 12px;
}
@property --lf-code-gutter {
  syntax: "<length>";
  inherits: true;
  initial-value: 38px;
}
lf-code.lf-rendered pre {
  padding: var(--lf-code-inset-block) 0;
  --lf-block-frame: 1;
  --lf-code-gutter: max(38px, calc(var(--lf-code-digits, 2) * 1ch + 16px));
}

lf-code .lf-code-line {
  display: block;
  position: relative;
  --lf-code-hang: calc(min(var(--lf-code-indent, 0), 22) * 1ch + 2ch);
  padding: 0 var(--lf-code-inset-inline) 0
    calc(var(--lf-code-gutter) + var(--lf-code-gap) + var(--lf-code-hang));
  text-indent: calc(-1 * var(--lf-code-hang));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
lf-code :is(.lf-code-line, .lf-code-elided)::before {
  content: attr(data-line);
  display: inline-block;
  width: var(--lf-code-gutter);
  margin-right: var(--lf-code-gap);
  padding-right: 10px;
  box-sizing: border-box;
  border-right: 1px solid var(--code-border);
  background: var(--code-chrome);
  text-align: right;
  color: var(--code-muted);
  font-variant-numeric: tabular-nums;
}
lf-code .lf-code-line::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  text-indent: 0;
}

lf-code .lf-code-elided {
  display: flex;
  align-items: baseline;
  padding: 0 var(--lf-code-inset-inline) 0 0;
  color: var(--code-muted);
  user-select: none;
}
lf-code .lf-code-elided::before {
  content: "⋮";
  flex: none;
  order: -2;
}
lf-code .lf-code-elided::after {
  content: attr(data-elided);
  order: -1;
  flex: none;
}
lf-code .lf-code-elided::after,
lf-code .lf-code-elided > lf-note {
  font-family: var(--sans);
  font-size: var(--t-6);
  font-style: italic;
}
lf-code .lf-code-elided > lf-note {
  display: block;
  min-width: 0;
  margin-inline-start: 0.5em;
  white-space: normal;
  user-select: text;
}
lf-code .lf-code-elided > lf-note::before {
  content: "— ";
}
lf-code :is(.lf-code-line, .lf-code-elided).hi {
  background: var(--hi-tint);
}
lf-code :is(.lf-code-line, .lf-code-elided).hi::before {
  border-right-color: var(--warn);
}

lf-code lf-note {
  display: block;
}

lf-code > lf-note,
lf-code > pre > lf-note {
  margin: 5px 0 6px;
  padding: 7px var(--lf-code-inset-inline) 8px
    calc(var(--lf-code-gutter) + var(--lf-code-gap));
  background: var(--pre-bg);
  border-block: 1px solid var(--code-border);
  color: var(--code-ink);
  font-family: var(--sans);
  font-size: var(--t-5);
  line-height: 1.5;
  white-space: normal;
  --lf-block-frame: 1;
}

@scope (html[data-lf-interactive] lf-code) {
  :scope:is(lf-code):not(.lf-rendered) {
    & > pre {
      background: var(--pre-bg);
      border: 1px solid var(--code-border);
      border-radius: var(--r);
      padding: var(--lf-code-inset-block) var(--lf-code-inset-inline)
        var(--lf-code-inset-block) calc(var(--lf-code-gutter) + var(--lf-code-gap));
      
      padding-block-end: calc(
        var(--lf-code-inset-block) + var(--lf-text-scroll-clearance)
      );
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    & > lf-note {
      margin-inline: 1px;
    }
  }
}


@media screen {
  lf-code[data-lf-reader-wrap="wrap"] .lf-code-line {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
  }
  lf-code[data-lf-reader-wrap="scroll"] .lf-code-line {
    white-space: pre !important;
    overflow-wrap: normal !important;
  }
}

@media print {
  lf-code[data-lf-reader-wrap] .lf-code-line {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
  }
}


lf-text-document {
  display: block;
  margin: 14px 0;
  min-height: 2px;
}
lf-text-document > .lf-text-document-view {
  margin: 0;
  border: 1px solid var(--code-border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--pre-bg);
  --lf-block-frame: 1;
}

lf-text-document figcaption,
html[data-lf-interactive] lf-text-document:not(:has(> *))::before {
  max-inline-size: none;
  padding: 7px 11px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--t-6);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

lf-text-document pre {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  white-space: pre-wrap;
}

lf-text-document .lf-text-document-listing {
  color-scheme: inherit;
  --diffs-font-family: var(--mono);
  --diffs-font-size: var(--code-size);
  --diffs-line-height: var(--code-line);
  --diffs-bg: var(--pre-bg);
  --diffs-bg-buffer: var(--pre-bg);
  --diffs-fg: var(--code-ink);
  --diffs-fg-number: var(--code-muted);
}
lf-text-document [data-number]::before {
  content: attr(data-number);
}

lf-text-document code[data-code] {
  display: grid;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  overscroll-behavior: auto;
}

@media screen {
  lf-text-document[data-lf-bound] {
    max-block-size: none;
    overflow: visible;
    --lf-top: inherit;
  }
  lf-text-document:not([preview])[data-lf-bound] pre {
    block-size: var(--lf-bound, 28rem);
    overflow: auto;
    --lf-holds-height: 1;
    --lf-top: 0px;
  }
  lf-text-document:not([preview])[data-lf-bound] {
    --lf-bound-box: .lf-text-document-listing > pre;
  }
  html[data-lf-interactive] lf-text-document:not(:has(> *)) {
    border: 1px solid var(--code-border);
    border-radius: var(--r);
    background: var(--pre-bg);
    &::before {
      content: attr(label);
      display: block;
    }
    &:not([label])::before {
      content: attr(source);
    }
    &::after {
      content: "";
      display: block;
      block-size: var(--lf-bound, 28rem);
    }
    &[preview]::after {
      block-size: calc(var(--lf-tabstrip-h) + var(--lf-bound, 28rem));
    }
  }
}

lf-text-document .lf-text-document-listing {
  position: relative;
}
lf-text-document .lf-text-document-listing > pre {
  position: relative;
  z-index: 0;
}
lf-text-document .lf-text-document-listing > pre[data-lf-focus-visible] {
  outline: none;
}
lf-text-document .lf-text-document-listing:has(> pre[data-lf-focus-visible])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
}
lf-text-document .lf-text-document-listing:has(> pre[data-lf-focus-visible]) {
  --lf-wears-ring: 1;
}


lf-text-document[preview] > .lf-text-document-view {
  background: var(--paper);
}
lf-text-document[preview] .lf-text-document-view > lf-tabs {
  margin: 0;
  border: 0;
  border-radius: 0;
}
lf-text-document[preview] .lf-text-document-view > lf-tabs > lf-tab {
  margin: 0;
  padding: 0;
}

lf-text-document div.lf-text-document-preview {
  --lf-reading-face: 1;
  padding: var(--sp-4);
  overflow-wrap: anywhere;
}
lf-text-document iframe.lf-text-document-preview {
  display: block;
  inline-size: 100%;
  block-size: var(--lf-bound, 28rem);
  border: 0;
  background: white;
}
@media screen {
  lf-text-document[preview] .lf-text-document-view > lf-tabs > lf-tab:not([hidden]) {
    block-size: var(--lf-bound, 28rem);
    overscroll-behavior: auto;
  }
  lf-text-document iframe.lf-text-document-preview {
    block-size: 100%;
  }
}


lf-draft {
  display: block;
  --lf-draft-inset: 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 10px var(--lf-draft-inset);
  margin: 12px 0;
  background: var(--card);
  font-size: max(var(--entry-floor), 1em);
}
@media screen {
  lf-draft {
    box-sizing: border-box;
    max-inline-size: var(--lf-measure);
  }
}
.lf-draft-body,
lf-draft > .lf-markdown-body {
  white-space: normal;
}
:is(.lf-draft-body, lf-draft > .lf-markdown-body) > :first-child {
  margin-top: 0;
}
:is(.lf-draft-body, lf-draft > .lf-markdown-body) > :last-child {
  margin-bottom: 0;
}

lf-draft > pre {
  white-space: pre-line;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  overflow: visible;
}
.lf-draft-edit.lf-ui {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
.lf-draft-edit.lf-ui[data-lf-focus-visible] {
  outline: none;
  box-shadow: none;
}
@media not screen {
  .lf-draft-tools {
    display: none;
  }
}
@media screen {
  lf-draft:not(:where([data-lf-exhibit], [data-lf-exhibit] *)) {
    position: relative;
  }
  lf-draft:has(.lf-draft-edit) {
    border-color: var(--muted);
  }
  lf-draft:has(.lf-draft-edit[data-lf-focus-visible]) {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--focus-ring-room));
    --lf-wears-ring: 1;
  }
  lf-draft:has(.lf-draft-edit:state(ready)) > .lf-draft-body {
    display: none;
  }
  
  .lf-draft-tools {
    position: absolute;
    z-index: 1;
    inset-block-start: 0;
    
    inset-inline-end: calc(var(--lf-mark-bar-end) - 1px);
    translate: 0 calc(-50% - 0.5px);
    opacity: 0;
    transition: opacity 120ms;
  }
  .lf-draft-status {
    align-self: center;
    padding-inline: 6px 2px;
    color: var(--danger-ink);
    font: var(--t-5)/var(--lf-ui-lh) var(--sans);
    white-space: nowrap;
  }
  .lf-draft-status:empty {
    display: none;
  }
  lf-draft:is(:hover, [data-lf-focus-within], [needed], :has(> .lf-draft-edit))
    .lf-draft-tools {
    opacity: 1;
  }
  
  @media (hover: none) {
    lf-draft {
      padding-block-end: max(10px, var(--aim-floor) / 2);
    }
    .lf-draft-tools {
      inset-block: auto 0;
      translate: 0 calc(50% + 0.5px);
      opacity: 1;
    }
  }
}

}
@layer lf-base {


:root {
  color-scheme: light dark;
  --lf-reading-face: 1;
}
body {
  --lf-ground: var(--paper);
  background: var(--lf-ground);
  color: var(--ink);
  font: var(--t-4)/1.6 var(--serif);
}

html {
  background: var(--paper);
}

@media screen {
  :where(.callout) {
    max-inline-size: var(--lf-measure);
  }
  
  :where(.callout) {
    box-sizing: border-box;
  }
  :where(.callout:has(> [data-lf-space="wide"])) {
    max-inline-size: max(var(--lf-measure), var(--wide));
  }
  :where(.callout:has(> [data-lf-space="available"])) {
    max-inline-size: none;
  }
}

@container style(--lf-wide-page: 1) and (not style(--lf-density: working)) {
  h1 {
    font-size: clamp(36px, 3.2cqi, 46px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
}

@container style(--lf-parts-title: 1) {
  h1 {
    font-size: var(--t-3);
    line-height: 1.25;
    letter-spacing: normal;
  }
}

.eyebrow,
.tag,
dl.facts dt {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}


.tag {
  display: inline-block;
  font-size: var(--t-6);
  line-height: var(--chip-lh);
  padding: var(--chip-pad);
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  border-radius: var(--chip-r);
  background: var(--chip);
  color: var(--ink-2);
}



.eyebrow {
  font-size: var(--t-6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 10px;
}

.eyebrow:has(+ h2) {
  margin-top: var(--h2-start);
}
.eyebrow:has(+ h3) {
  margin-top: var(--h3-start);
}
.eyebrow + :is(h2, h3) {
  margin-top: 0;
}

.lede {
  color: var(--ink-2);
  font-size: var(--t-3);
  line-height: 1.5;
  margin: 0 0 10px;
}

.tag {
  vertical-align: middle;
  align-self: center;
}

.callout {
  --lf-ground: var(--field);
  background: var(--lf-ground);
  padding: 12px 16px;
  margin: var(--callout-margin-block) 0;
  --lf-block-frame: 1;
}

section.panel {
  margin: 18px 0;
  --lf-block-frame: trim;
}
section.panel > :is(h2, h3):first-child {
  margin: 0 0 10px;
}

section.panel > :is(h2, h3):first-child {
  font: 600 var(--t-6)/1.3 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tag.ok,
.callout.ok {
  --lf-tone-tint: var(--ok-tint);
  --lf-tone-ink: var(--ok-ink);
}
.tag.warn,
.callout.warn {
  --lf-tone-tint: var(--warn-tint);
  --lf-tone-ink: var(--warn-ink);
}
.tag.danger,
.callout.danger {
  --lf-tone-tint: var(--danger-tint);
  --lf-tone-ink: var(--danger-ink);
}
.tag:is(.ok, .warn, .danger) {
  background: var(--lf-tone-tint);
  color: var(--lf-tone-ink);
}

.callout:is(.ok, .warn, .danger) {
  --lf-ground: var(--lf-tone-tint);
}
.callout:is(.ok, .warn, .danger) > strong:first-child {
  color: var(--lf-tone-ink);
}

aside.sidenote {
  font-size: var(--t-5);
  line-height: 1.45;
  color: var(--muted);
  margin: 12px 0 12px var(--sp-4);
}
dl.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  margin: 14px 0;
}
dl.facts dt {
  color: var(--muted);
  font-weight: 400;
  font-size: var(--t-5);
}
dl.facts dd {
  margin: 0;
}

dl.metric {
  margin: 0;
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--rule);
  display: grid;
  row-gap: 0;
}
dl.metric:has(> dt:first-child + dd:last-child) {
  grid-row: span 2;
  grid-template-rows: subgrid;
}
dl.metric dt {
  color: var(--muted);
  font: 600 var(--t-6) / 1.3 var(--sans);
}
dl.metric dd {
  margin: var(--sp-1) 0 0;
  font: 600 var(--t-2) / 1.2 var(--sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
dl.metric dd > :is(strong, small) {
  display: inline-block;
}
dl.metric dd small {
  font: 500 var(--t-6) / 1.3 var(--sans);
}
@media screen {
  @container (width <= 640px) {
    
    dl.facts {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }
    dl.facts dd + dt {
      margin-top: var(--sp-2);
    }
  }
}

th.num,
td.num {
  text-align: right;
}

ol.steps > li {
  margin: 10px 0;
}


svg.drawing {
  display: block;
  height: auto;
  font-family: var(--sans);
  font-size: 11px;
}
svg.drawing:not([width]) {
  width: 100%;
}
svg.drawing text {
  fill: var(--muted);
}
svg.drawing .strong {
  fill: var(--ink);
  font-weight: 600;
  font-size: 12px;
}
svg.drawing .small {
  font-size: 10px;
}
svg.drawing .mono {
  font-family: var(--mono);
  font-size: 10.5px;
  fill: var(--ink-2);
}
svg.drawing .frame {
  fill: var(--paper);
  stroke: var(--border-2);
}
svg.drawing .frame-head {
  fill: color-mix(in srgb, var(--ink) 7%, transparent);
}
svg.drawing .box {
  fill: var(--card);
  stroke: var(--border-2);
}
svg.drawing .box.hot {
  fill: color-mix(in srgb, var(--accent) 9%, var(--card));
  stroke: var(--accent);
}
svg.drawing .line {
  fill: color-mix(in srgb, var(--ink) 20%, transparent);
}
svg.drawing .line.soft {
  fill: color-mix(in srgb, var(--ink) 11%, transparent);
}
svg.drawing .highlight {
  fill: color-mix(in srgb, var(--accent) 24%, transparent);
}
svg.drawing .ghost {
  fill: none;
  stroke: var(--muted-2);
  stroke-dasharray: 3 3;
}
svg.drawing .guide {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.5;
  stroke-dasharray: 2 3;
}
svg.drawing .dim {
  fill: none;
  stroke: var(--ink-2);
}
svg.drawing .arrow {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.2;
}
svg.drawing .tip {
  fill: var(--muted);
}
svg.drawing .mark,
svg.drawing .tip.hot {
  fill: var(--accent);
}
svg.drawing .glyph {
  fill: var(--paper);
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
svg.drawing .ok {
  fill: var(--ok);
}
svg.drawing .warn {
  fill: var(--warn);
}
svg.drawing .danger {
  fill: var(--danger);
}
}
@layer lf-base {



lf-diagram {
  box-sizing: border-box;
  --pele-bg: var(--paper);
  --pele-fg: var(--ink);
  --pele-muted: var(--muted);
  --pele-line: var(--muted);
  --pele-surface: color-mix(in srgb, var(--accent) 10%, var(--paper));
  --pele-surface-alt: var(--paper);
  --pele-border: var(--accent);
  --pele-accent: var(--accent);
  --pele-font: var(--sans);
  --pele-font-mono: var(--mono);
}

@scope (html:not([data-lf-interactive]) lf-diagram) {
  :scope:is(lf-diagram)[data-lf-space="available"] {
    --lf-room: 0px;
  }
}

lf-diagram.lf-rendered {
  display: flex;
  justify-content: safe center;
  align-items: flex-start;
  overflow: auto hidden;
}
lf-diagram.lf-rendered::before,
lf-diagram.lf-rendered::after {
  content: "";
  flex: 0 1 auto;
  width: 0;
}
lf-diagram.lf-rendered[data-lf-space="available"]::before {
  width: calc(2 * var(--lf-grow-l));
}
lf-diagram.lf-rendered[data-lf-space="available"]::after {
  width: calc(2 * var(--lf-grow-r));
}
lf-diagram.lf-rendered > * {
  flex: none;
}

@media screen {
  lf-diagram.lf-rendered {
    min-block-size: max(var(--lf-diagram-height), attr(data-lf-height px, 0px));
  }
  
  lf-diagram.lf-rendered > svg:last-child {
    margin-block-end: calc(1px - var(--lf-diagram-padding));
  }
}

lf-diagram.lf-rendered {
  --lf-more-fade: 32px;
  --lf-more-fade-to: rgb(0 0 0 / 0.3);
}


lf-diagram svg {
  display: block;
  margin: 0 auto;
  max-width: none;
}
@media print {
  lf-diagram svg {
    max-width: 100%;
  }
}
}
@layer lf-base {

@media screen and (prefers-reduced-motion: no-preference) {
  @supports (block-size: calc-size(auto, size)) and (interactivity: inert) {
    :is(.lf-diff-fold, .lf-call-group) {
      interpolate-size: allow-keywords;
    }
    :is(.lf-diff-fold, .lf-call-group)::details-content {
      block-size: auto;
      overflow: clip;
      transition:
        block-size var(--lf-motion-fold) ease,
        content-visibility var(--lf-motion-fold) allow-discrete;
    }
    :is(.lf-diff-fold, .lf-call-group):not([open])::details-content {
      block-size: 0;
    }
    :is(.lf-diff-fold, .lf-call-group):not([open]) > :not(summary) {
      interactivity: inert;
    }
    :is(.lf-diff-fold, .lf-call-group)[open]::details-content,
    :is(.lf-diff-fold, .lf-call-group):has(> summary:focus-visible)::details-content {
      transition-duration: 0s;
    }
  }
}




:where(:host(lf-diff.lf-rendered)) :where(.lf-diff-file) > details,
:where(:host(lf-diff.lf-rendered)) .lf-diff-metadata {
  margin: 0;
  padding: 0;
  overflow: clip;
  background: var(--pre-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--lf-diff-r-start) var(--lf-diff-r-start) var(--lf-diff-r-end)
    var(--lf-diff-r-end);
}
:host(lf-diff.lf-rendered) {
  --lf-diff-head-inset: 10px;
}
:host(lf-diff.lf-rendered) :where(.lf-diff-file) > details > summary,
:host(lf-diff.lf-rendered) .lf-diff-metadata {
  padding: 7px var(--lf-diff-head-inset);
  font-size: var(--t-5);
  font-family: var(--sans);
  color: var(--code-ink);
  background: var(--code-chrome);
}
:host(lf-diff.lf-rendered) .lf-diff-fold > .lf-error {
  padding: 10px;
}

:host(lf-diff.lf-rendered) :where(.lf-diff-file) > details > summary,
:host(lf-diff.lf-rendered)
  .lf-diff-file-thread-outlet
  > .lf-resolved-threads
  > .lf-resolved-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  block-size: var(--lf-diff-head-h);
  white-space: nowrap;
  overflow: hidden;
}
:host(lf-diff.lf-rendered) :where(.lf-diff-file) > details > summary::before,
:host(lf-diff.lf-rendered)
  .lf-diff-file-thread-outlet
  > .lf-resolved-threads
  > .lf-resolved-summary::before {
  flex: none;
  font-size: var(--t-5);
}

:host(lf-diff.lf-rendered) :where(.lf-diff-file) > details > summary::before {
  align-self: center;
  margin: 0;
}

.lf-diff-path {
  white-space: pre-wrap;
}
.lf-diff-head > .lf-diff-path {
  display: flex;
  flex: 1;
  min-width: 0;
  white-space: pre;
}

.lf-diff-head :is(.lf-diff-source-path, .lf-diff-destination-path) {
  display: contents;
}
.lf-diff-head .lf-diff-arrow {
  flex: none;
  white-space: normal;
  margin-inline: 0.4ch;
}

.lf-diff-head wbr {
  display: none;
}
.lf-diff-head .lf-diff-dir {
  flex: 0 1 auto;
  min-width: 0;
  max-width: max-content;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-diff-head .lf-diff-dir-ancestor {
  flex: 1 1 0;
}
.lf-diff-head :is(.lf-diff-source-path, .lf-diff-destination-path) .lf-diff-dir {
  flex: 1 1 0;
}

.lf-diff-head .lf-diff-dir::before {
  content: "…" / "";
  position: absolute;
  visibility: hidden;
  inline-size: max-content;
}
.lf-diff-head .lf-diff-dir[data-folder-hidden] {
  opacity: 0;
}
.lf-diff-head .lf-diff-base {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lf-diff-head > .lf-diff-path > .lf-diff-base {
  flex-shrink: 0;
}
.lf-diff-head > .lf-diff-stat {
  flex: none;
}

:host(lf-diff.lf-rendered) :where(.lf-diff-file) > details > summary {
  position: relative;
}
.lf-diff-file:has(
  > .lf-diff-fold
    > .lf-diff-head[data-path-cut]:is([data-lf-held-word], [data-lf-focus])
) {
  z-index: 4;
}
.lf-diff-fold:has(
  > .lf-diff-head[data-path-cut]:is(
      [data-lf-held-word],
      [data-lf-focus],
      [data-lf-focus]
    )
) {
  overflow: visible;
}
:host(lf-diff.lf-rendered)
  :where(.lf-diff-file)
  > details
  > summary[data-path-cut]:is([data-lf-held-word], [data-lf-focus]) {
  overflow: visible;
  border-start-start-radius: calc(var(--lf-diff-r-start) - 1px);
  border-start-end-radius: calc(var(--lf-diff-r-start) - 1px);
}
.lf-diff-fold:not([open])
  > .lf-diff-head[data-path-cut]:is([data-lf-held-word], [data-lf-focus]) {
  border-end-start-radius: calc(var(--lf-diff-r-end) - 1px);
  border-end-end-radius: calc(var(--lf-diff-r-end) - 1px);
}
.lf-diff-head[data-path-cut]:is([data-lf-held-word], [data-lf-focus])
  > .lf-diff-path::after {
  content: attr(data-path) / "";
  position: absolute;
  z-index: 3;
  inset-block-start: calc(100% + 4px);
  padding: var(--tip-pad);
  border-radius: var(--tip-r);
  background: var(--tip-bg);
  color: var(--tip-ink);
  box-shadow: var(--raise-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.lf-diff-head[data-lf-held-word]:not([data-lf-focus]) > .lf-diff-path::after {
  animation: lf-diff-held-word 1ms 300ms backwards;
}
@keyframes lf-diff-held-word {
  from {
    visibility: hidden;
  }
}

@media (pointer: coarse) {
  .lf-diff-head {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }
}

.lf-diff-file:has(> .lf-diff-file-actions > *) > .lf-diff-fold > .lf-diff-head {
  padding-right: calc(10px + var(--lf-diff-actions) + 14px);
}

.lf-diff-file:has(> .lf-diff-file-actions > *) .lf-diff-metadata {
  box-sizing: border-box;
  min-height: calc(var(--lf-diff-action-top) + var(--lf-diff-action-h));
}

.lf-diff-file:has(> .lf-diff-file-actions > *) .lf-diff-metadata::before {
  content: "";
  float: right;
  width: calc(var(--lf-diff-actions) + 14px);
  height: calc(var(--lf-diff-action-top) + var(--lf-diff-action-h) - 12px);
}

.lf-diff-tools {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 var(--lf-diff-gap);
}
.lf-diff-progress {
  color: var(--code-muted);
  font: var(--t-6) var(--sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lf-diff-file {
  position: relative;
  display: flow-root;
  margin: -1px 0 0;
  --lf-diff-r-start: 0px;
  --lf-diff-r-end: 0px;
  --lf-diff-actions: var(--lf-diff-action-h);
  --lf-diff-head-h: var(--lf-diff-head-line);
}
.lf-diff-run-start {
  margin-top: var(--lf-diff-gap);
  --lf-diff-r-start: var(--r);
}
.lf-diff-run-end {
  --lf-diff-r-end: var(--r);
}

.lf-diff-file:first-child {
  margin-top: 0;
}
.lf-diff-file:has(> .lf-diff-file-actions > *) {
  --lf-diff-head-h: var(--lf-diff-head-pressed);
}

@media screen {
  .lf-diff-file:has(> .lf-diff-file-actions > *)
    > :is(.lf-diff-fold, .lf-diff-metadata) {
    margin-top: calc(-1 * (var(--lf-diff-action-h) + var(--lf-diff-action-top)));
  }
}
.lf-diff-file-actions {
  position: relative;
  
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: fit-content;
  height: var(--lf-diff-action-h);
  margin: var(--lf-diff-action-top) 11px 0 auto;
  font-family: var(--sans);
}

.lf-diff-file-actions:empty {
  display: none;
}
.lf-diff-file-comment {
  --lf-icon-action-face: var(--lf-diff-action-h);
}

.lf-diff-fold-all {
  --lf-icon-action-face: 24px;
  margin-inline-end: -3px;
}
.lf-diff-fold-all[data-lf-focus-visible] {
  outline: none;
}
.lf-diff-fold-all[inert] {
  visibility: hidden;
}

.lf-diff-line {
  position: relative;
}
.lf-diff-line > [data-line] {
  display: block;
  min-block-size: 1lh;
  padding-inline: calc(var(--lf-diff-gutter) + 2ch) 8px;
}
.lf-diff-line > [data-line]::before {
  position: absolute;
  
  inset-inline-start: calc(var(--lf-diff-gutter) + 0.5ch);
  user-select: none;
}
.lf-diff-line > [data-line-type="change-addition"]::before {
  content: "+";
  color: var(--ok-ink);
}
.lf-diff-line > [data-line-type="change-deletion"]::before {
  content: "-";
  color: var(--danger-ink);
}
.lf-diff-line-comment {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--lf-diff-gutter);
  height: 100%;
  --aim-floor: 0px;
  min-width: 0;
  min-height: 0;
  padding: 0 1ch 0 2ch;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--code-muted);
  font: inherit;
  display: flex;
  align-items: start;
  justify-content: end;
  text-align: right;
  user-select: none;
  cursor: pointer;
}
.lf-diff-line-comment::before {
  content: "+";
  position: absolute;
  inset-inline-start: 1px;
  inset-block-start: 0;
  width: calc(2ch - 2px);
  border-radius: var(--r-s);
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 700;
  text-align: center;
  opacity: 0;
}
.lf-diff-line:hover > .lf-diff-line-comment::before,
.lf-diff-line-comment[data-lf-focus]::before {
  opacity: 1;
}

.lf-diff-file[hidden="until-found"] {
  margin: 0;
}


.lf-diff-line-comment::after {
  content: none;
}
.lf-diff-comment[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

:host(lf-diff.lf-rendered) .lf-diff-file > details > summary[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
}

:host(lf-diff.lf-rendered) .lf-diff-line > [data-line][data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
}

@media screen {
  :host(lf-diff.lf-rendered[data-lf-diff-pinned]) .lf-diff-file {
    --lf-top-outer: var(--lf-top);
  }
  :host(lf-diff.lf-rendered[data-lf-diff-pinned]) .lf-diff-file > details {
    --lf-top: calc(var(--lf-top-outer) + var(--lf-diff-head-h));
  }
  :host(lf-diff.lf-rendered[data-lf-diff-pinned]) .lf-diff-file > details > summary {
    position: sticky;
    --lf-head-inset: 0px;
    --lf-top: var(--lf-top-outer);
    top: var(--lf-top, 0px);
    
    z-index: 3;
  }
  
  :host(lf-diff.lf-rendered[data-lf-diff-pinned]) .lf-diff-file-actions {
    position: sticky;
    top: calc(var(--lf-top, 0px) + var(--lf-diff-action-top) - 1px);
    --lf-head-inset: calc(var(--lf-diff-action-top) - 1px);
  }
}

.lf-diff-path {
  font-family: var(--mono);
  font-size: var(--t-6);
  overflow-wrap: anywhere;
}
.lf-diff-additions {
  color: var(--ok-ink);
}
.lf-diff-deletions {
  color: var(--danger-ink);
}
.lf-diff-metadata > .lf-diff-stat {
  white-space: normal;
}
.lf-diff-evidence {
  padding: 7px 10px;
  color: var(--code-muted);
  font: var(--t-6)/1.5 var(--sans);
  background: var(--code-chrome);
}
.lf-diff-stat {
  color: var(--code-muted);
  font-weight: 400;
  margin-left: 8px;
  font-size: var(--t-6);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

:host(lf-diff.lf-rendered) .lf-diff-fold > pre {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  border-top: 1px solid var(--code-border);
  border-radius: 0;
  overflow: visible;
  color: var(--code-ink);
  background: var(--pre-bg);
}
:host(lf-diff.lf-rendered) code[data-code] {
  isolation: isolate;
  display: block;
  overflow: auto hidden;
  overscroll-behavior-x: auto;
  container-type: inline-size;
  container-type: inline-size scroll-state;
  font: var(--code-size)/var(--code-line) var(--mono);
  white-space: pre;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
}
.lf-diff-rows {
  width: max-content;
  min-width: 100%;
}
pre[data-overflow="wrap"] .lf-diff-rows {
  width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lf-diff-line[data-line-type="change-deletion"] {
  background: var(--lf-code-del-fill);
}
.lf-diff-line[data-line-type="change-addition"] {
  background: var(--lf-code-add-fill);
}
.lf-diff-line[data-line-type="change-deletion"] > button {
  color: var(--danger-ink);
}
.lf-diff-line[data-line-type="change-addition"] > button {
  color: var(--ok-ink);
}
[data-line-type="change-deletion"] [data-diff-span] {
  background: color-mix(in srgb, var(--danger) 34%, var(--pre-bg));
}
[data-line-type="change-addition"] [data-diff-span] {
  background: color-mix(in srgb, var(--ok) 34%, var(--pre-bg));
}
[data-separator],
[data-no-newline] {
  padding-inline: calc(var(--lf-diff-gutter) + 2ch) 8px;
  color: var(--code-muted);
  background: var(--code-chrome);
  white-space: pre-wrap;
}
[data-separator] svg {
  display: none;
}

:is([data-separator-wrapper], [data-no-newline] > span) {
  display: block;
  font: var(--t-6) / var(--code-line) var(--sans);
}

.lf-diff-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  outline-offset: calc(-1 * var(--focus-ring-w));
}
[data-lf-focus-visible] + .lf-diff-frame {
  outline: var(--focus-ring);
}

.lf-diff-thread-outlet {
  min-width: 0;
  border-block: 1px solid var(--rule);
  background: var(--paper);
  padding: 10px clamp(10px, 2vw, 18px);
  white-space: normal;
  font: var(--t-4)/1.5 var(--sans);
  contain: inline-size;
}
.lf-diff-thread-outlet:not(.lf-diff-file-thread-outlet) {
  box-sizing: border-box;
  position: sticky;
  inset-inline-start: 0;
  inline-size: 100cqw;
}
.lf-diff-file-thread-outlet {
  padding: 0;
  margin-top: 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
}

:host(lf-diff.lf-rendered)
  .lf-diff-file-thread-outlet
  > .lf-resolved-threads
  > .lf-resolved-summary {
  outline-offset: calc(-1 * var(--focus-ring-w));
}

.lf-diff-thread-outlet > :is(.lf-page-thread, .lf-resolved-threads) {
  max-width: 760px;
}
.lf-diff-thread-outlet .lf-page-thread {
  padding: var(--sp-2) 0;
}
.lf-diff-file-thread-outlet :is(.lf-resolved-summary, .lf-page-thread) {
  padding-inline: var(--lf-diff-head-inset);
}

.lf-diff-thread-outlet
  .lf-thread-reply:not(
    :focus-within,
    :has(
      > leaf-composition-field > .lf-composer-media:not([hidden]),
      > leaf-composition-field > .lf-compose-field[data-words],
      .lf-compose-dictate[aria-pressed="true"],
      .lf-compose-error:not([hidden])
    )
  ) {
  margin-top: var(--sp-1);
  > leaf-composition-field > .lf-compose-field {
    border-color: transparent;
    background: transparent;
  }
  > leaf-composition-field > .lf-compose-field > leaf-text {
    min-height: var(--aim-floor);
    padding-block: 0;
    cursor: pointer;
  }
  > leaf-composition-field > .lf-compose-field > .lf-compose-dictate {
    display: none;
  }
}

@media print {
  .lf-diff-line-comment::before {
    display: none;
  }
  :host(lf-diff.lf-rendered) .lf-diff-file > details > summary {
    padding-right: 10px;
  }
  :host(lf-diff.lf-rendered) .lf-diff-metadata {
    padding-right: 0;
  }
  .lf-diff-file > .lf-diff-fold > .lf-diff-head::before,
  .lf-diff-file .lf-diff-metadata::before {
    display: none;
  }
  
  :host(lf-diff.lf-rendered) :where(.lf-diff-file) > details > summary {
    block-size: auto;
    min-block-size: var(--lf-diff-head-h);
    align-items: baseline;
    white-space: normal;
  }
  .lf-diff-head > .lf-diff-path {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .lf-diff-head .lf-diff-dir[data-folder-hidden] {
    opacity: 1;
  }
  .lf-diff-head wbr {
    display: inline;
  }
  .lf-diff-file[hidden="until-found"] {
    content-visibility: visible;
    margin-top: -1px;
  }
  [data-line] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .lf-diff-rows {
    width: 100%;
  }
  .lf-diff-thread-outlet:not(.lf-diff-file-thread-outlet) {
    position: static;
    inline-size: 100%;
  }
}
}
@layer lf-base {

:where(lf-call-diff, lf-diff, lf-worktree, lf-worktree-diffs) {
  --lf-code-add-fill: color-mix(in srgb, var(--ok) 16%, var(--pre-bg));
  --lf-code-del-fill: color-mix(in srgb, var(--danger) 16%, var(--pre-bg));
}


:where(lf-call-diff, lf-diff, lf-worktree, lf-worktree-diffs) {
  --lf-diff-gap: 8px;
  --lf-diff-action-h: 26px;
  --lf-diff-action-top: max(6px, (var(--aim-floor) - var(--lf-diff-action-h)) / 2);
  --lf-diff-head-line: 35px;
  --lf-diff-head-pressed: max(
    var(--lf-diff-head-line),
    calc(var(--lf-diff-action-top) + var(--lf-diff-action-h)),
    var(--aim-floor)
  );
}


@media screen and (prefers-reduced-motion: no-preference) {
  @supports (block-size: calc-size(auto, size)) and (interactivity: inert) {
    :is(.lf-diff-fold, .lf-call-group) {
      interpolate-size: allow-keywords;
    }
    :is(.lf-diff-fold, .lf-call-group)::details-content {
      block-size: auto;
      overflow: clip;
      transition:
        block-size var(--lf-motion-fold) ease,
        content-visibility var(--lf-motion-fold) allow-discrete;
    }
    :is(.lf-diff-fold, .lf-call-group):not([open])::details-content {
      block-size: 0;
    }
    :is(.lf-diff-fold, .lf-call-group):not([open]) > :not(summary) {
      interactivity: inert;
    }
    :is(.lf-diff-fold, .lf-call-group)[open]::details-content,
    :is(.lf-diff-fold, .lf-call-group):has(> summary:focus-visible)::details-content {
      transition-duration: 0s;
    }
  }
}


lf-worktree-diffs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) repeat(5, auto);
  column-gap: var(--sp-3);
  min-width: 0;
  max-width: 100%;
  margin-block: var(--sp-4);
  font-family: var(--sans);
  font-size: var(--t-5);
  line-height: 1.5;
  container-type: inline-size;
}

lf-worktree,
.lf-worktree-disclosure,
.lf-worktree-summary,
.lf-worktree-summary > .lf-worktree-stats {
  column-gap: inherit;
}

lf-worktree {
  
  --lf-reading-face: 1;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-5);
  line-height: 1.5;
}

lf-worktree-diffs > lf-worktree + lf-worktree {
  margin-block-start: var(--sp-2);
}

.lf-worktree-overview {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-block-end: var(--sp-3);
  color: var(--muted);
  font-size: var(--t-6);
}

.lf-worktree-total {
  color: var(--ink);
  font-size: var(--t-5);
}

.lf-worktree-disclosure {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 var(--sp-4);
  border: 0;
}

.lf-worktree-disclosure[open] {
  padding-block-end: var(--sp-4);
}

.lf-worktree-disclosure[open] > .lf-worktree-summary {
  border-block-end: 1px solid var(--rule);
  border-radius: 0;
}

.lf-worktree-summary {
  box-sizing: border-box;
  margin-inline: calc(-1 * var(--sp-4));
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  min-block-size: max(4rem, var(--aim-floor));
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r);
  font-weight: 400;
}

.lf-worktree-summary::before {
  inline-size: 1rem;
  margin: 0;
  justify-self: center;
  color: var(--muted);
}

.lf-worktree-summary:hover {
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
}

.lf-worktree-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.lf-worktree-label {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lf-worktree-ref {
  font-family: var(--mono);
  font-size: var(--t-6);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.lf-worktree-ref:empty {
  display: none;
}

.lf-worktree-status,
.lf-worktree-stats {
  color: var(--muted);
  font-size: var(--t-6);
  font-variant-numeric: tabular-nums;
}

.lf-worktree-stats {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--sp-2);
  row-gap: 0;
}

.lf-worktree-stats > span {
  min-inline-size: max-content;
}

.lf-worktree-summary > .lf-worktree-stats {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 4 / -1;
}

.lf-worktree-additions {
  color: var(--ok-ink);
}

.lf-worktree-deletions {
  color: var(--danger-ink);
}

.lf-worktree-body > :last-child {
  margin-block-end: 0;
}

.lf-worktree-path {
  margin-block-start: var(--sp-3);
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--sp-2);
  color: var(--muted);
  font-size: var(--t-6);
}

.lf-worktree-disclosure code {
  overflow-wrap: anywhere;
}

.lf-worktree-path code {
  min-width: 0;
  padding: 0;
  color: var(--ink);
  background: none;
  font-size: inherit;
}

.lf-worktree-body > p {
  margin-block: var(--sp-2) var(--sp-3);
}

.lf-worktree-body > aside {
  margin-block: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-inline-start: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
}

.lf-worktree-body > aside > :first-child {
  margin-block-start: 0;
}

.lf-worktree-body > aside > :last-child {
  margin-block-end: 0;
}

.lf-worktree-body > details {
  margin-block: var(--sp-2) var(--sp-3);
  padding: 0;
  color: var(--muted);
  font-size: var(--t-6);
}

.lf-worktree-body > details > summary {
  font-size: inherit;
  font-weight: 500;
}

.lf-worktree-disclosure dl {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  margin-block: var(--sp-3);
  font-size: var(--t-6);
}

.lf-worktree-disclosure dt,
.lf-worktree-disclosure dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.lf-worktree-disclosure dt {
  color: var(--muted);
  font-weight: 400;
}

.lf-worktree-disclosure dd {
  color: var(--ink);
}

@container (max-width: 38rem) {
  lf-worktree,
  .lf-worktree-disclosure {
    display: block;
  }

  .lf-worktree-summary {
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    gap: var(--sp-1) var(--sp-2);
    padding-inline: var(--sp-3);
    margin-inline: calc(-1 * var(--sp-3));
  }

  .lf-worktree-summary::before {
    grid-row: 1 / 3;
  }

  .lf-worktree-status {
    align-self: start;
  }

  .lf-worktree-summary > .lf-worktree-stats {
    display: inline-flex;
    grid-column: 2 / -1;
  }

  .lf-worktree-disclosure {
    padding-inline: var(--sp-3);
  }

  .lf-worktree-path {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lf-worktree-disclosure dl {
    grid-template-columns: 1fr;
    row-gap: var(--sp-1);
  }

  .lf-worktree-disclosure dd + dt {
    margin-block-start: var(--sp-2);
  }
}

@media print {
  .lf-worktree-disclosure::details-content {
    content-visibility: visible;
  }
}





lf-diff {
  contain: inline-size;
}
lf-diff.lf-rendered {
  font-family: var(--mono);
  font-size: var(--code-size);
  line-height: var(--code-line);
  font-variant-ligatures: none;
}


html[data-lf-interactive] lf-diff:not(.lf-rendered, :has(> .lf-error)) {
  box-sizing: border-box;
  block-size: calc(
    min(1, var(--lf-diff-files) - 1) * (var(--lf-line) + var(--lf-diff-gap)) + 1px +
      var(--lf-diff-files) *
      (
        var(--lf-diff-head-pressed) + 1px + var(--lf-diff-open) *
          (var(--lf-text-scroll-track) + 1px)
      ) +
      var(--lf-diff-rows) * var(--code-line)
  );
  overflow: clip;
}


lf-call-diff {
  --lf-block-frame: 1;
  display: block;
  max-width: 100%;
  contain: inline-size;
  margin: var(--sp-3) 0;
  overflow: hidden;
  border: 1px solid var(--code-border);
  border-radius: var(--r);
  background: var(--pre-bg);
  color: var(--code-ink);
  font-family: var(--mono);
  font-size: var(--code-size);
  font-variant-ligatures: none;
  line-height: var(--code-line);
  container-type: inline-size;
}

.lf-call-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--code-border);
  background: var(--code-chrome);
  color: var(--code-muted);
  font-family: var(--sans);
}

.lf-call-summary {
  margin: 0;
  font-size: var(--t-6);
}

.lf-call-toggle {
  flex: none;
}

.lf-call-group,
.lf-call-root-location {
  background: var(--pre-bg);
}

.lf-call-group {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}


.lf-call-root-location {
  display: grid;
  grid-template-columns: 1.25rem 2rem minmax(0, 1fr);
  padding-block-start: var(--sp-1);
  padding-inline-end: var(--sp-3);
  border-top: 1px solid var(--code-border);
}

.lf-call-root-location > .lf-call-location {
  grid-column: 3;
  min-width: 0;
  margin-inline-start: 0;
  overflow: hidden;
  font-size: var(--t-6);
  text-overflow: ellipsis;
}

.lf-call-group > summary {
  cursor: pointer;
}

.lf-call-group > summary::before {
  align-self: center;
  justify-self: center;
  margin: 0;
  grid-column: 1;
  grid-row: 1;
  color: var(--code-muted);
}

.lf-call-group-body {
  overflow-x: auto;
  border-top: 1px solid color-mix(in srgb, var(--code-border) 60%, transparent);
}

.lf-call-line {
  display: grid;
  grid-template-columns: 2rem max-content max-content;
  min-width: max-content;
  padding-inline-end: var(--sp-3);
  white-space: pre;
}

.lf-call-group-summary {
  box-sizing: border-box;
  grid-template-columns: 1.25rem 2rem minmax(0, 1fr) max-content;
  grid-template-rows: auto;
  width: 100%;
  min-width: 0;
  padding-block: var(--sp-1);
}

.lf-call-group-summary .lf-call-body {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lf-call-group-count {
  align-self: center;
  grid-column: 4;
  grid-row: 1;
  margin-inline-start: var(--sp-4);
  color: var(--code-muted);
  font-family: var(--sans);
  font-size: var(--t-6);
  text-align: end;
  white-space: nowrap;
}

.lf-call-line + .lf-call-line {
  border-top: 1px solid color-mix(in srgb, var(--code-border) 45%, transparent);
}

.lf-call-group-body .lf-call-line:first-child {
  border-top: 0;
}

:is(.lf-call-line, .lf-call-root-location)[data-status="added"] {
  background: var(--lf-code-add-fill);
}

:is(.lf-call-line, .lf-call-root-location)[data-status="removed"] {
  background: var(--lf-code-del-fill);
}

.lf-call-line[data-root] .lf-call-body {
  font-weight: 700;
}

.lf-call-line[data-meta] {
  grid-template-columns: 2rem minmax(0, 1fr);
  min-width: 0;
  padding-block: var(--sp-1);
  background: var(--code-chrome);
  color: var(--code-muted);
  white-space: normal;
}

.lf-call-line[data-meta] .lf-call-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lf-call-marker {
  padding-inline: var(--sp-2);
  color: var(--code-muted);
  text-align: center;
  user-select: none;
}

.lf-call-line[data-status="added"] .lf-call-marker {
  color: var(--ok-ink);
}

.lf-call-line[data-status="removed"] .lf-call-marker {
  color: var(--danger-ink);
}

.lf-call-location {
  white-space: pre;
  margin-inline-start: var(--sp-4);
  color: var(--code-muted);
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}


.lf-call-location[href]:hover {
  color: var(--accent);
}

.lf-call-missing {
  display: block;
  min-width: 0;
  padding: var(--sp-3);
  color: var(--code-muted);
  font-family: var(--sans);
  white-space: normal;
}

@media print {
  lf-call-diff,
  .lf-call-line[data-meta],
  .lf-call-root-location,
  .lf-call-line[data-status="added"],
  .lf-call-line[data-status="removed"] {
    background: transparent;
  }

  .lf-call-tools {
    background: transparent;
  }

  .lf-call-group:not([open]) > .lf-call-group-body {
    display: block;
  }

  
  .lf-call-group-summary .lf-call-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

@container (max-width: 34rem) {
  .lf-call-tools {
    align-items: flex-start;
    flex-direction: column;
  }

  .lf-call-group-count {
    display: none;
  }

  .lf-call-group-summary {
    grid-template-columns: 1.25rem 2rem minmax(0, 1fr);
  }
}
}
@layer lf-base {

lf-playground {
  --lf-block-frame: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  box-sizing: border-box;
  
  width: 100%;
  margin: var(--sp-4) 0;
  container-type: inline-size;
}


lf-playground:has(> .lf-playground-split) {
  grid-template-rows: minmax(0, 1fr);
}


.lf-playground-split {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
  --lf-track-scroll-behavior: flow;
  --playground-top: var(--lf-top);
}

.lf-playground-rail {
  display: contents;
}

@container (width < 43.5rem) {
  .lf-playground-split:has(> .lf-playground-rail > .lf-playground-controls-region) {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .lf-playground-controls-region {
    grid-row: 1;
  }
  .lf-playground-split:has(.lf-playground-controls-region)
    > .lf-playground-preview-region {
    grid-row: 2;
  }
  .lf-playground-split:has(.lf-playground-controls-region)
    > .lf-playground-rail
    > .lf-playground-instruction-region {
    grid-row: 3;
  }
  @media screen {
    .lf-playground-controls-region {
      position: sticky;
      --lf-head-inset: 0px;
      top: var(--lf-top);
      z-index: 2;
      align-self: start;
      max-block-size: 50dvh;
      min-block-size: 0;
    }
    .lf-playground-controls-region > :not(header, footer) {
      min-block-size: 0;
      overflow: auto;
      --lf-top: 0px;
      --lf-holds-height: 1;
    }
    .lf-playground-split:has(.lf-playground-controls-region)
      > .lf-playground-preview-region {
      --lf-top: calc(var(--playground-top) + var(--playground-controls-height, 0px));
    }
  }
}

@container (min-width: 43.5rem) {
  .lf-playground-split:has(> .lf-playground-rail > .lf-playground-controls-region) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    --lf-track-scroll-behavior: inherit;
  }

  .lf-playground-rail:has(> .lf-playground-controls-region) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-self: start;
    gap: var(--sp-4);
  }
}


@media screen {
  @container style(--lf-full-height: 1) {
    
    lf-playground {
      min-block-size: 0;
      margin-block: 0;
      --lf-full-height: inherit;
    }

    
    lf-playground:has(> .lf-playground-split) {
      grid-template-rows: minmax(min-content, 1fr);
      scroll-padding-block-end: var(--lf-end-room);
    }

    :is(.lf-playground-preview-body, .lf-playground-controls) {
      contain: size;
    }

    :is(.lf-playground-split, .lf-playground-rail) {
      min-block-size: 0;
      --lf-full-height: inherit;
    }

    
    .lf-playground-split:not(
      :has(
        > .lf-playground-controls-region,
        > .lf-playground-rail > .lf-playground-controls-region
      )
    ) {
      grid-template-rows: minmax(max(12rem, 50dvh), 1fr) max-content;
    }

    
    .lf-playground-split:has(> .lf-playground-controls-region) {
      grid-template-rows:
        minmax(min-content, auto) minmax(max(12rem, 50dvh), 1fr)
        max-content;
    }

    @container (min-width: 43.5rem) {
      .lf-playground-rail:has(> .lf-playground-controls-region) {
        align-self: stretch;
        grid-template-rows: minmax(12rem, 1fr) auto;
      }
    }
  }
}


.lf-playground-preview-region {
  border: 0;
  border-radius: 0;
  background: transparent;
}

lf-playground .lf-playground-preview-region > .lf-playground-preview-body {
  display: flex;
  flex-direction: column;
  --lf-pane-top: 0px;
  padding: 0;
}


.lf-playground-preview-body > lf-playground-preview {
  flex: 1 0 auto;
}


:is(.lf-playground-controls-region, .lf-playground-instruction-region) {
  --lf-ground: var(--card);
  border-color: var(--rule);
  background: var(--lf-ground);
}

.lf-playground-controls-region > header {
  padding: 14px 18px 0;
  border: 0;
}

.lf-playground-controls-region > :not(header, footer) {
  --lf-pane-top: 12px;
  padding: var(--lf-pane-top) 18px 16px;
}

.lf-playground-controls-region > header.lf-playground-presets {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.lf-playground-controls {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  min-width: 0;
}

lf-playground-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  color: var(--ink-2);
  font: var(--t-5)/1.35 var(--sans);
}

.lf-playground-control-label {
  min-width: 0;
  font-weight: 600;
}


lf-playground-control > .lf-playground-input {
  grid-column: 1 / -1;
  box-sizing: border-box;
  inline-size: 100%;
  font: inherit;
  accent-color: var(--accent);
}
lf-playground-control > input[type="color"] {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  padding: var(--sp-1) var(--sp-2);
  min-block-size: var(--aim-floor);
}
lf-playground-control > .choice {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  justify-content: center;
}
lf-playground-control > input[type="range"] {
  margin: 0;
  min-block-size: var(--aim-floor);
}
.lf-playground-reading {
  grid-column: 2;
  grid-row: 1;
  color: var(--muted);
  font: var(--t-6)/1.3 var(--mono);
}

.lf-playground-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--focus-ring-room);
}
lf-playground-choice {
  display: contents;
}

.lf-playground-candidates > .lf-playground-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sp-3);
  align-items: start;
}

@container style(--playground-choice-columns) {
  :is(lf-playground-control, .lf-playground-candidates) > .lf-playground-choices {
    display: grid;
    grid-template-columns: var(--playground-choice-columns);
  }
}
:is(.lf-playground-candidates, .lf-playground-candidates > .lf-playground-choices)
  > lf-playground-choice {
  --lf-ground: var(--card);
  display: grid;
  min-inline-size: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--lf-ground);
}
:is(.lf-playground-candidates, .lf-playground-candidates > .lf-playground-choices)
  > lf-playground-choice:has(> .choice > :checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
:is(.lf-playground-candidates, .lf-playground-candidates > .lf-playground-choices)
  > lf-playground-choice
  > .choice {
  justify-content: start;
  justify-self: stretch;
  padding: var(--sp-3) var(--sp-3) 0;
  border: 0;
  border-radius: var(--r);
  font: 600 var(--t-4) / 1.4 var(--sans);
}
.lf-playground-choice-preview {
  min-inline-size: 0;
  padding: var(--sp-3);
}
.lf-playground-choice-heading {
  margin: 0;
  padding: var(--sp-3) var(--sp-3) 0;
  font-weight: 600;
}
.lf-playground-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  
  gap: max(var(--sp-2), 2 * var(--lf-reach-room)) var(--sp-2);
}


lf-playground-preset {
  display: inline-flex;
}

lf-playground-setting {
  display: none;
}


lf-playground-preview {
  --lf-ground: var(--field);
  --lf-block-frame: 1;
  display: grid;
  align-content: start;
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--lf-ground);
}


lf-playground-output {
  --lf-block-frame: 1;
  display: block;
  margin: 0;
  color: var(--ink-2);
  font: var(--t-5)/1.55 var(--sans);
}

lf-playground-value {
  display: inline;
  color: var(--ink);
  font-weight: 600;
}

.lf-playground-actions {
  border-block-start: 0;
  padding: 12px 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.lf-playground-unavailable {
  flex-basis: 100%;
  color: var(--ink-2);
  font: var(--t-6)/1.3 var(--sans);
  text-align: end;
}


.lf-playground-actions > .lf-playground-instruction {
  position: fixed;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  inline-size: min(36rem, calc(100vw - 32px));
  max-block-size: min(32rem, calc(100dvh - 64px));
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--raise-2);
}
.lf-playground-instruction:popover-open {
  display: flex;
  flex-direction: column;
}
.lf-playground-instruction::backdrop {
  background: transparent;
}
.lf-playground-instruction-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 8px 10px 8px 18px;
  border-bottom: 1px solid var(--rule);
}
.lf-playground-instruction-title {
  margin: 0;
}
.lf-playground-instruction-body {
  min-block-size: 0;
  padding: 12px 18px 16px;
  overflow-y: auto;
}

.lf-playground-copy::part(button) {
  box-sizing: border-box;
  min-inline-size: var(--aim-floor);
  min-block-size: var(--aim-floor);
  align-items: center;
  justify-content: center;
}


lf-playground.lf-playground-quoted .lf-playground-candidates {
  grid-template-columns: var(
    --playground-choice-columns,
    repeat(auto-fit, minmax(min(100%, 20rem), 1fr))
  );
}
}
@layer lf-base {

lf-visual-review {
  
  --lf-reading-face: 1;
  display: block;
  min-inline-size: 0;
  container-type: inline-size;
  container-name: visual-review;
  --lf-full-height: inherit;
  --lf-block-frame: 1;
  color: var(--ink);
  font: var(--t-5)/1.5 var(--sans);
}
.lf-vr-dashboard {
  display: grid;
  grid-template-rows: auto minmax(min-content, 1fr);
  min-inline-size: 0;
  --lf-full-height: inherit;
}
.lf-vr-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-block: 12px;
  border-block-end: 1px solid var(--rule);
}
.lf-vr-heading h2 {
  margin: 0;
  font: 500 var(--t-5)/1.4 var(--sans);
}
.lf-vr-progress {
  display: flex;
  gap: 16px;
  color: var(--muted);
  font-size: var(--t-working-label);
  font-variant-numeric: tabular-nums;
}
.lf-vr-progress strong {
  color: var(--ink);
  font-weight: 600;
}
.lf-vr-workspace {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-rows: minmax(min-content, 1fr);
  gap: 24px;
  min-block-size: 0;
  min-inline-size: 0;
  --lf-full-height: inherit;
}
.lf-vr-queue {
  display: grid;
  min-block-size: 0;
  --lf-full-height: inherit;
  padding-block: 16px;
  border: 0;
  border-radius: 0;
  min-inline-size: 0;
}

.lf-vr-case-list {
  display: grid;
  gap: 0;
  align-content: start;
  min-block-size: 0;
  overflow: auto;
  margin-block-start: 0;
  padding: 0;
  --lf-pane-top: 0px;
  container-type: normal;
}

.lf-vr-case-button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  inline-size: 100%;
  border-block-end: 1px solid var(--rule);
  padding: 14px 4px 14px 6px;
  cursor: pointer;
}
.lf-vr-case-number {
  font: var(--t-working-label)/1.5 var(--sans);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lf-vr-case-label {
  display: grid;
  gap: 4px;
}
.lf-vr-case-name {
  font-weight: 550;
  line-height: 1.35;
}
.lf-vr-case-status {
  color: var(--muted);
  font-size: var(--t-working-label);
  font-weight: 400;
}
.lf-vr-case-status[data-approved="true"] {
  color: var(--ok-ink);
}

.lf-vr-case-status[data-approved="false"] {
  visibility: hidden;
}
.lf-vr-detail {
  display: grid;
  grid-template-rows: auto auto minmax(min-content, 1fr) auto;
  min-inline-size: 0;
  min-block-size: 0;
  --lf-full-height: inherit;
}
.lf-vr-case {
  anchor-scope: --review-inspect, --review-threads;
  display: grid;
  grid-area: 1 / 1 / span 4 / 2;
  grid-template-rows: subgrid;
  min-inline-size: 0;
  min-block-size: 0;
  --lf-full-height: inherit;
}

.lf-vr-case[hidden="until-found"] {
  content-visibility: visible;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.lf-vr-caption {
  padding-block: 18px 10px;
  min-inline-size: 0;
}
.lf-vr-caption h3 {
  margin: 0 0 8px;
  font: 500 var(--t-2)/1.2 var(--serif);
  letter-spacing: -0.015em;
}
.lf-vr-claim p {
  margin: 0;
  max-inline-size: 74ch;
}
.lf-vr-claim .lf-vr-action {
  margin-block-start: 6px;
  font-size: var(--t-working-label);
  color: var(--muted);
}
.lf-vr-decision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 4px 12px;
}
.lf-vr-review-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.lf-vr-approval {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: var(--aim-floor);
  font-size: var(--t-working-label);
  cursor: pointer;
}
.lf-vr-approval input {
  margin: 0;
}
.lf-vr-inspect {
  anchor-name: --review-inspect;
}
.lf-vr-details,
.lf-vr-thread-list {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  margin: auto;
  inline-size: min(360px, calc(100vw - 32px));
  max-block-size: calc(100dvh - 100px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--raise-2);
  font: var(--t-5)/1.5 var(--sans);
}
@supports (position-area: bottom) {
  .lf-vr-details,
  .lf-vr-thread-list {
    position-anchor: --review-inspect;
    position-area: bottom span-left;
    inset: auto;
    margin: 8px 0;
    position-try-fallbacks: flip-block;
  }
}
.lf-vr-details::backdrop {
  background: transparent;
}
.lf-vr-provenance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  font-size: var(--t-working-label);
}
.lf-vr-provenance :is(dt, dd) {
  margin: 0;
  overflow-wrap: anywhere;
}
.lf-vr-provenance dt {
  color: var(--muted);
}
.lf-vr-sources {
  display: flex;
  gap: 12px;
}
.lf-vr-evidence {
  min-inline-size: 0;
  min-block-size: 0;
  display: grid;
  grid-template-rows: auto minmax(min-content, 1fr);
  --lf-full-height: inherit;
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
  border: 0;
  border-radius: 0;
}
.lf-vr-evidence > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 12px;
  border-block-end: 1px solid var(--rule);
  background: var(--paper);
}
.lf-vr-evidence-note {
  flex: 1 1 20rem;
  margin: 0;
  color: var(--muted);
  font: 12px/1.4 var(--sans);
}

.lf-vr-capture {
  display: grid;
  grid-template-rows: minmax(12rem, 1fr) auto;
  min-inline-size: 0;
  min-block-size: 0;
  --lf-full-height: inherit;
}
.lf-vr-capture > lf-shot {
  min-inline-size: 0;
  min-block-size: 0;
  margin: 0;
  --lf-full-height: inherit;
}
.lf-vr-discussion {
  display: grid;
  min-block-size: 0;
  --lf-full-height: inherit;
}
.lf-vr-discussion:has(> .lf-vr-threads:empty) {
  display: none;
}
.lf-vr-threads {
  min-block-size: 0;
}
@container style(--lf-full-height:1) {
  .lf-vr-capture {
    grid-template-rows: minmax(10rem, 1fr) auto;
  }
  .lf-vr-capture > lf-shot {
    contain: size;
  }
  .lf-vr-discussion {
    max-block-size: min(18rem, 30vh);
    overflow: clip;
  }
  .lf-vr-threads {
    overflow: auto;
  }
}
@container visual-review (max-width:58rem) {
  .lf-vr-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(min-content, 1fr);
    gap: 0;
  }
  .lf-vr-queue {
    padding-block: 8px 0;
  }
  .lf-vr-case-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(8rem, 1fr);
    margin-block-start: 2px;
  }
  .lf-vr-case-button {
    padding: 10px 8px 10px 6px;
  }
  .lf-vr-caption {
    padding-block: 14px 8px;
  }
}
@container visual-review (max-width:28rem) {
  .lf-vr-heading {
    padding-block: 8px;
  }
  .lf-vr-progress {
    gap: 10px;
    font-size: 12px;
  }
  .lf-vr-case-button {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 8px 6px;
    font-size: 12px;
  }
  .lf-vr-case-number {
    display: none;
  }
  .lf-vr-case-status {
    font-size: 11px;
  }
  .lf-vr-case-label {
    gap: 4px;
  }
  .lf-vr-caption h3 {
    font-size: var(--t-3);
  }
  .lf-vr-claim p {
    font-size: 13px;
  }
  .lf-vr-claim .lf-vr-action {
    font-size: 12px;
  }
  .lf-vr-decision {
    gap: 8px;
  }
}
@container style(--lf-full-height:1) {
  .lf-vr-dashboard {
    block-size: 100%;
    min-block-size: 0;
  }
}
@media print {
  .lf-vr-queue,
  .lf-vr-inspect,
  .lf-vr-decision {
    
    display: none;
  }
  .lf-vr-dashboard,
  .lf-vr-workspace,
  .lf-vr-detail,
  .lf-vr-case {
    display: block;
  }
  .lf-vr-case[hidden="until-found"] {
    visibility: visible;
    opacity: 1;
  }
}

.lf-vr-inspection-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.lf-vr-inspection-heading h4 {
  margin: 0;
  font: 600 15px/1.4 var(--sans);
}

.lf-vr-open-threads {
  anchor-name: --review-threads;
}
.lf-vr-thread-list {
  position-anchor: --review-threads;
}
.lf-vr-thread-link {
  display: block;
  inline-size: 100%;
  text-align: start;
  margin-block-start: var(--sp-2);
}

.lf-vr-claim {
  padding: var(--sp-3);
  background: var(--paper);
}

@container visual-review (max-width:58rem) {
  
  .lf-vr-case-list {
    padding-block-end: 16px;
  }
}
}
@layer lf-base {

lf-trace {
  
  --lf-reading-face: 1;
  --lf-trace-control-size: 44px;
  --lf-trace-small-type: max(12px, var(--t-6));
  
  --lf-trace-stage-height: max(
    320px,
    calc(100dvh - var(--lf-top) - var(--lf-foot-room) - 2 * var(--lf-landing-room))
  );
  --lf-block-frame: 1;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  margin-block: var(--sp-4);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: var(--sp-3);
  background: var(--paper);
  font: var(--t-5) / 1.45 var(--sans);
  overflow-wrap: anywhere;
}

lf-trace:not(:defined)::before {
  content: "";
  display: block;
  block-size: 1lh;
}
.lf-trace-view {
  display: contents;
}
.lf-trace-body {
  min-inline-size: 0;
}
lf-trace[hidden="until-found"] {
  margin: 0;
  padding: 0;
  border: 0;
}
.lf-trace-stage {
  min-inline-size: 0;
}
.lf-trace-stage[data-ready] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(180px, 1fr) auto;
  min-block-size: var(--lf-trace-stage-height);
}
.lf-trace-stage .lf-trace-images {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-block-size: 0;
  contain: size;
}
.lf-trace-stage .lf-trace-image-viewport {
  block-size: 100%;
  min-block-size: 0;
  min-inline-size: 0;
}
.lf-trace-waiting {
  margin: 0;
  color: var(--muted);
}
.lf-trace-controls {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
}
.lf-trace-choices {
  min-inline-size: 0;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.lf-trace-sources {
  --wa-form-control-height: var(--lf-trace-control-size);
  flex: 0 1 auto;
  min-inline-size: 0;
  max-inline-size: 100%;
}
.lf-trace-sources::part(form-control-input) {
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.lf-trace-source {
  margin: 0;
  border-radius: var(--r);
  min-block-size: var(--lf-trace-control-size);
  min-inline-size: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
}
.lf-trace-source::part(label) {
  white-space: normal;
  overflow-wrap: anywhere;
}
.lf-trace-viewer {
  white-space: nowrap;
  min-block-size: var(--lf-trace-control-size);
  display: inline-flex;
  align-items: center;
  font-size: var(--lf-trace-small-type);
}
.lf-trace-position-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  min-inline-size: 0;
  flex: 1;
}

.lf-trace-position {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  min-inline-size: calc(var(--lf-trace-position-chars, 0) * 1ch);
}
.lf-trace-selection {
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}


.lf-trace-timeline {
  direction: ltr;
  --lf-trace-ruler-h: 26px;
  --lf-trace-row-h: 18px;
  --lf-trace-input-h: 36px;
  --lf-trace-capture-h: 14px;
  --lf-trace-mark: color-mix(in srgb, var(--ink) 55%, var(--paper));
  --lf-trace-input: var(--accent);
  position: relative;
  anchor-scope: --lf-trace-tip;
  display: grid;
  
  grid-template-columns: 76px minmax(0, 1fr);
  min-inline-size: 0;
  margin-block-end: var(--sp-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  font: var(--lf-trace-small-type) / 1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.lf-trace-timeline[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.lf-trace-lane-names {
  display: grid;
  align-content: start;
  border-inline-end: 1px solid var(--border-2);
  background: var(--paper);
  color: var(--muted);
}
.lf-trace-lane-name {
  display: flex;
  align-items: center;
  padding-inline: var(--sp-2);
  overflow: hidden;
  white-space: nowrap;
}
.lf-trace-lane-name,
.lf-trace-lane {
  block-size: calc(var(--lf-trace-rows, 1) * var(--lf-trace-row-h) + 6px);
  box-sizing: border-box;
  border-block-start: 1px solid var(--border-2);
}
.lf-trace-lane-name-ruler,
.lf-trace-ruler {
  block-size: var(--lf-trace-ruler-h);
}
.lf-trace-lane-name-ruler {
  border-block-start: 0;
}
.lf-trace-lane-name-input,
.lf-trace-lane-input {
  block-size: var(--lf-trace-input-h);
}
.lf-trace-lane-name-captures,
.lf-trace-lane-captures {
  block-size: var(--lf-trace-capture-h);
}
.lf-trace-scroller {
  --lf-drawing: 1;
  overflow-x: auto;
  overflow-y: hidden;
  min-inline-size: 0;
  scrollbar-width: thin;
}
.lf-trace-track {
  --lf-trace-span: calc(100% - 2 * var(--lf-trace-edge));
  position: relative;
  inline-size: calc(var(--lf-trace-zoom, 1) * 100%);
  min-inline-size: 100%;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
  overflow: hidden;
}
.lf-trace-ruler {
  position: relative;
  color: var(--muted);
}
.lf-trace-lane {
  position: relative;
}
:is(
  .lf-trace-tick,
  .lf-trace-moment-pin,
  .lf-trace-input-label,
  .lf-trace-bar,
  .lf-trace-input-send,
  .lf-trace-capture
) {
  position: absolute;
  left: calc(var(--lf-trace-edge) + var(--t) * var(--lf-trace-span));
}
.lf-trace-tick {
  inset-block-end: 0;
  block-size: 4px;
  border-inline-start: 1px solid var(--border-2);
}
.lf-trace-tick-major {
  block-size: 100%;
  box-sizing: border-box;
  padding-inline-start: 3px;
  padding-block-start: 3px;
  border-inline-start-color: var(--muted);
  white-space: nowrap;
}

.lf-trace-tick-major[data-flip] {
  translate: -100% 0;
  padding-inline: 0 3px;
  border-inline-start: 0;
  border-inline-end: 1px solid var(--muted);
}
.lf-trace-tick-major[data-flip]::after {
  inset-inline: auto -1px;
}

.lf-trace-tick-major::after {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  inset-block-start: 100%;
  block-size: 2000px;
  border-inline-start: 1px dashed color-mix(in srgb, var(--border-2) 70%, transparent);
  pointer-events: none;
}

.lf-trace-bar {
  inline-size: max(2px, calc(var(--d) * var(--lf-trace-span)));
  box-sizing: border-box;
  border-radius: var(--r-s);
  cursor: pointer;
}
.lf-trace-call-bar {
  inset-block-start: calc(3px + var(--row, 0) * var(--lf-trace-row-h));
  block-size: calc(var(--lf-trace-row-h) - 4px);
  background: color-mix(in srgb, var(--ink) 12%, var(--paper));
  border-inline-start: 2px solid var(--lf-trace-mark);
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--ink-2, var(--ink));
}
.lf-trace-call-name {
  min-inline-size: 0;
  padding-inline: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.lf-trace-call-bar[data-error] {
  border-inline-start-color: var(--danger);
  background: var(--danger-tint);
}

.lf-trace-input-bar {
  inset-block-end: 4px;
  block-size: 8px;
  border: 1px solid color-mix(in srgb, var(--lf-trace-input) 70%, transparent);
  background: color-mix(in srgb, var(--lf-trace-input) 14%, transparent);
}
.lf-trace-input-send {
  inset-block-end: 2px;
  block-size: 12px;
  inline-size: 2px;
  translate: -1px 0;
  z-index: 1;
  background: var(--lf-trace-input);
  cursor: pointer;
}

.lf-trace-input-label {
  inset-block-start: 3px;
  padding: 2px 4px 2px 0;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  cursor: pointer;
}

.lf-trace-moment-pin {
  inset-block-start: 3px;
  block-size: calc(var(--lf-trace-row-h) - 2px);
  box-sizing: border-box;
  border-inline-start: 2px solid var(--ink);
  cursor: pointer;
}
.lf-trace-moment-flag {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-inline: 4px;
  line-height: calc(var(--lf-trace-row-h) - 4px);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-inline-start: 0;
  font-weight: 600;
}

:is(.lf-trace-moment-pin, .lf-trace-input-label)[data-flip] {
  translate: -100% 0;
  border-inline-start: 0;
  border-inline-end: 2px solid var(--ink);
}
.lf-trace-input-label[data-flip] {
  border-inline-end: 0;
  padding-inline: 4px 0;
}
.lf-trace-moment-pin[data-flip] .lf-trace-moment-flag {
  border-radius: var(--r-s) 0 0 var(--r-s);
  border-inline-start: 1px solid var(--border-2);
  border-inline-end: 0;
}

.lf-trace-capture {
  inset-block: 4px;
  inline-size: 1px;
  background: var(--border-2);
}
.lf-trace-capture[data-image] {
  inset-block: 2px;
  background: var(--lf-trace-mark);
}
:is(.lf-trace-call-bar, .lf-trace-input-label, .lf-trace-moment-pin):hover {
  z-index: 1;
  filter: brightness(0.94);
}
.lf-trace-input-bar[data-current] {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  border-color: var(--accent);
}

:is(.lf-trace-word, .lf-trace-more)[data-current] {
  border-radius: var(--r-s);
  background: var(--accent);
  color: var(--paper);
  box-shadow: 0 0 0 2px var(--accent);
}

.lf-trace-moment-flag .lf-trace-word[data-current] {
  background: none;
  color: inherit;
  box-shadow: none;
}
.lf-trace-more {
  margin-inline-start: 2px;
  padding-inline: 3px;
  border-radius: var(--r-s);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
}
.lf-trace-call-bar[data-current] {
  background: var(--accent-tint);
  border-inline-start-color: var(--accent);
  color: var(--accent);
}
.lf-trace-bar[data-active] {
  outline: 1px solid var(--accent);
  outline-offset: 0;
}
.lf-trace-moment-pin[data-current] {
  border-inline-start-color: var(--accent);
  border-inline-end-color: var(--accent);
}
.lf-trace-moment-pin[data-current] .lf-trace-moment-flag {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: var(--accent);
}
.lf-trace-capture[data-current] {
  inline-size: 3px;
  translate: -1px 0;
  background: var(--accent);
}

.lf-trace-playhead {
  position: absolute;
  inset-block: 0;
  left: calc(var(--lf-trace-edge) + var(--lf-trace-time, 0) * var(--lf-trace-span));
  inline-size: 2px;
  translate: -1px 0;
  background: var(--accent);
  pointer-events: none;
  z-index: 2;
}

.lf-trace-playhead-handle {
  position: absolute;
  inset-block-start: 0;
  left: 50%;
  inline-size: 28px;
  block-size: var(--lf-trace-ruler-h);
  translate: -50% 0;
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
}
.lf-trace-playhead-handle::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  left: 50%;
  inline-size: 12px;
  block-size: 10px;
  translate: -50% 0;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 100%, 0 40%);
  background: var(--accent);
}
.lf-trace-overview {
  --lf-trace-overview-h: 8px;
  grid-column: -2;
  position: relative;
  block-size: var(--lf-trace-overview-h);
  border-block-start: 1px solid var(--border-2);
  background: var(--paper);
  touch-action: none;
}
.lf-trace-overview-window {
  position: absolute;
  inset-block: 1px;
  left: calc(var(--lf-trace-window-start, 0) * 100%);
  inline-size: calc(var(--lf-trace-window-size, 1) * 100%);
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.lf-trace-overview[data-zoomed] {
  cursor: grab;
}
.lf-trace-overview-time {
  position: absolute;
  inset-block: 0;
  left: calc(var(--lf-trace-time, 0) * 100%);
  inline-size: 2px;
  translate: -1px 0;
  background: var(--accent);
}
.lf-trace-timeline [data-lf-trace-tip-anchor] {
  anchor-name: --lf-trace-tip;
}

.lf-trace-tip {
  position: absolute;
  position-anchor: --lf-trace-tip;
  inset-inline: 0;
  inset-block-start: auto;
  inset-block-end: anchor(top);
  justify-self: anchor-center;
  margin-block-end: 4px;
  box-sizing: border-box;
  inline-size: max-content;
  z-index: 4;
  max-inline-size: min(48ch, 100%);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r);
  background: var(--ink);
  color: var(--paper);
  font: var(--lf-trace-small-type) / 1.4 var(--sans);
  white-space: pre-line;
  pointer-events: none;
}

.lf-trace-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-block-size: var(--lf-trace-control-size);
}
.lf-trace-bookmarks {
  padding: 0;
  border: 0;
  background: none;
  margin: 0;
  min-inline-size: 0;
}
.lf-trace-moments-heading {
  margin: 0;
  font-size: var(--lf-trace-small-type);
  color: var(--muted);
}
.lf-trace-bookmark-list {
  max-inline-size: 44rem;
}

.lf-trace-bookmark {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  min-block-size: var(--lf-trace-control-size);
  padding: var(--sp-2) calc(var(--sp-2) + 1px) var(--sp-2) calc(var(--sp-2) - 1px);
}
.lf-trace-clock,
.lf-trace-readout,
.lf-trace-caption,
.lf-trace-tree-clock {
  color: var(--muted);
  font-size: var(--lf-trace-small-type);
  font-variant-numeric: tabular-nums;
}
.lf-trace-clock {
  margin-block: var(--sp-2) 0;
}

.lf-trace-metadata {
  margin-block-start: var(--sp-3);
  block-size: 14rem;
  overflow: auto;
  scrollbar-gutter: stable;
  --lf-top: 0px;
  --lf-holds-height: 1;
}
.lf-trace-metadata[data-lf-focus-visible] {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
}
.lf-trace-metadata > details > summary[data-lf-focus-visible] {
  outline-offset: calc(-1 * var(--focus-ring-w));
}
.lf-trace-readout {
  margin-block: var(--sp-1) var(--sp-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-trace-action {
  margin-block: var(--sp-2) 0;
  font-weight: 600;
}
.lf-trace-phase {
  margin-block: var(--sp-1) var(--sp-2);
  font: 500 var(--t-5) / 1.4 var(--sans);
  font-variant-numeric: tabular-nums;
}
.lf-trace-no-action :is(.lf-trace-action, .lf-trace-phase, .lf-trace-error) {
  visibility: hidden;
}
.lf-trace-error {
  color: var(--danger);
}

.lf-trace-images {
  overflow-anchor: none;
  min-inline-size: 0;
  position: relative;
}
.lf-trace-image-pending {
  visibility: hidden;
}
.lf-trace-image-viewport {
  position: relative;
  inline-size: 100%;
  margin-inline: auto;
  overflow: clip;
}
.lf-trace-image {
  margin: 0;
  position: absolute;
  inset: 0;
}
.lf-trace-capture-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-1);
  min-inline-size: 0;
}
.lf-trace-caption {
  flex: 1;
  min-inline-size: 0;
  max-inline-size: none;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-trace-full-image[inert] {
  visibility: hidden;
}
.lf-trace-image-viewport[data-sized] > .lf-trace-missing-image {
  position: absolute;
  inset: 0;
  max-inline-size: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  background: var(--paper);
}
.lf-trace-missing-image {
  padding: var(--sp-4);
  border: 1px dashed var(--border-2);
  color: var(--muted);
  margin-block: 0;
}
.lf-trace-tree {
  margin: 0;
  --lf-top: 0px;
  --lf-trace-tree-head: var(--lf-trace-control-size);
}

.lf-trace-tree[open] {
  block-size: 100%;
  box-sizing: border-box;
  overflow: auto;
  scrollbar-gutter: stable;
  --lf-holds-height: 1;
}
.lf-trace-tree > summary {
  block-size: var(--lf-trace-tree-head);
  align-content: center;
  cursor: pointer;
  position: sticky;
  --lf-head-inset: 0px;
  inset-block-start: var(--lf-top);
  background: var(--paper);
  z-index: 1;
}
.lf-trace-tree-clock {
  margin-block: var(--sp-2);
  --lf-top: var(--lf-trace-tree-head);
}
.lf-trace-nodes {
  margin: 0;
  padding-inline-start: 1.4em;
  --lf-top: var(--lf-trace-tree-head);
}
.lf-trace-node {
  padding-block: var(--sp-2);
  scroll-margin-top: var(--lf-trace-tree-head);
}
.lf-trace-node-path {
  display: block;
  color: var(--muted);
  font-size: var(--lf-trace-small-type);
}
lf-trace-bookmark {
  display: none;
}
@media print {
  .lf-trace-tree {
    display: block;
  }
  .lf-trace-nodes {
    display: block;
  }
}
.lf-trace-moment-number {
  display: grid;
  place-items: center;
  min-inline-size: 22px;
  block-size: 22px;
  padding-inline: 3px;
  box-sizing: border-box;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--paper);
}
.lf-trace-full-image {
  flex: 0 0 auto;
  min-block-size: var(--lf-trace-control-size);
  display: inline-flex;
  align-items: center;
  font-size: var(--lf-trace-small-type);
}
.lf-trace-image-status {
  display: none;
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  background: var(--paper);
  color: var(--muted);
}
.lf-trace-image-loading .lf-trace-image-status {
  display: block;
}
.lf-trace-moment-number {
  justify-self: start;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.lf-trace-moment-time {
  color: var(--muted);
  font-size: var(--lf-trace-small-type);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lf-trace-heading {
  position: sticky;
  top: var(--lf-top);
  --lf-head-inset: var(--sp-1);
  z-index: 3;
  background: var(--paper);
  margin-block-end: var(--sp-2);
}
.lf-trace-toolbar {
  padding-block: var(--sp-1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.lf-trace-transport,
.lf-trace-zoom-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.lf-trace-zoom-controls {
  margin-inline-start: auto;
}
.lf-trace-pace {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--muted);
  font-size: var(--lf-trace-small-type);
}
.lf-trace-pace select {
  min-block-size: var(--lf-trace-control-size);
  max-inline-size: 100%;
  font: inherit;
}
.lf-trace-transport-button {
  flex: 0 0 auto;
  min-inline-size: var(--lf-trace-control-size);
  block-size: var(--lf-trace-control-size);
}

.lf-trace-transport-button[data-lf-focus-visible],
.lf-trace-bookmark[data-lf-focus-visible] {
  outline-offset: calc(-1 * var(--focus-ring-w));
}
.lf-trace-play {
  inline-size: var(--lf-trace-control-size);
  min-inline-size: var(--lf-trace-control-size);
}
.lf-trace-play > svg:nth-child(2),
.lf-trace-play[data-playing] > svg:first-child {
  display: none;
}
.lf-trace-play[data-playing] > svg:nth-child(2) {
  display: block;
}
@container (max-width: 480px) {
  .lf-trace-toolbar .lf-trace-position-row {
    flex-basis: 100%;
    order: 1;
  }
  .lf-trace-selection {
    font-size: var(--lf-trace-small-type);
  }
  
  .lf-trace-timeline {
    grid-template-columns: minmax(0, 1fr);
  }
  .lf-trace-lane-names {
    display: none;
  }
}
.lf-trace-canvas {
  --lf-drawing: 1;
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--border-2);
  box-sizing: border-box;
  background: var(--paper);
  z-index: 0;
}

.lf-trace-canvas img {
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}
.lf-trace-canvas > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  border: 0;
}
.lf-trace-canvas .viewer-container {
  background: var(--paper);
  touch-action: pan-y;
}
.lf-trace-canvas .viewer-canvas {
  touch-action: pan-y;
}
.lf-trace-canvas .viewer-canvas img {
  max-inline-size: none;
  margin: 0;
}

.lf-trace-image-tools {
  anchor-scope: --lf-trace-scale;
  display: flex;
  align-items: center;
  gap: var(--focus-ring-room);
  flex-wrap: wrap;
  margin-block: var(--sp-2) 0;
}
.lf-trace-image-tools > button:not(.lf-trace-image-scale) {
  inline-size: var(--lf-line);
}

.lf-trace-tools-status {
  min-block-size: 1lh;
  margin-inline-start: auto;
  inline-size: 24ch;
  flex: 0 0 auto;
  text-align: end;
  white-space: nowrap;
  font-size: var(--lf-trace-small-type);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lf-trace-canvas[data-lf-focus-visible] {
  outline: none;
}
.lf-trace-canvas[data-lf-focus-visible]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
}
.lf-trace-no-moments {
  margin: 0;
  padding: var(--sp-2);
  color: var(--muted);
  font-size: var(--lf-trace-small-type);
}

@container (max-width: 480px) {
  .lf-trace-tools-status {
    margin-inline-start: 0;
    inline-size: 100%;
    text-align: start;
  }
  .lf-trace-capture-footer {
    gap: var(--sp-2);
  }
}


.lf-trace-canvas > .lf-trace-playback-image {
  position: absolute;
  z-index: 1;
  inset: auto;
  max-inline-size: none;
  pointer-events: none;
}

.lf-trace-input-badge {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--sp-2);
  inset-inline-end: var(--sp-2);
  max-inline-size: min(45ch, 85%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: var(--sp-1) var(--sp-2);
  background: var(--paper);
  color: var(--accent);
  font: 600 var(--lf-trace-small-type) / 1.5 var(--sans);
  pointer-events: none;
}
.lf-trace-input-point {
  position: absolute;
  z-index: 2;
  inline-size: 18px;
  block-size: 18px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-tint);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--paper);
  pointer-events: none;
}


lf-trace-compare {
  overflow-anchor: none;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  --lf-trace-control-size: 44px;
  font: var(--t-5) / 1.45 var(--sans);
}
.lf-trace-compare-controls {
  position: sticky;
  top: var(--lf-top);
  --lf-head-inset: var(--sp-2);
  z-index: 4;
  background: var(--paper);
  padding-block: var(--sp-2);
  border-block-end: 1px solid var(--border-2);
}
lf-trace-compare .lf-trace-heading {
  position: static;
}
@media (max-width: 600px) {
  .lf-trace-compare-controls {
    position: static;
    --lf-head-inset: initial;
    padding-block: var(--sp-1);
  }
}
lf-trace-compare > *,
lf-trace-compare lf-trace {
  margin-block: 0;
}


@scope (html[data-lf-interactive] lf-trace-compare) {
  :scope:is(lf-trace-compare):not(:defined) {
    &::before {
      content: "";
      display: block;
      
      block-size: calc(var(--lf-trace-control-size) + 2 * var(--sp-1) + 1px);
      margin-block-end: var(--sp-2);
    }
    & > :is(lf-trace, :has(lf-trace)):not([data-lf-opening]) {
      display: none;
    }
  }
}

.lf-trace-image-scale {
  anchor-name: --lf-trace-scale;
  inline-size: 10ch;
  font-variant-numeric: tabular-nums;
}
.lf-trace-scale-options {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: var(--sp-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--raise-2);
}
@supports (position-area: bottom) {
  .lf-trace-scale-options {
    position-anchor: --lf-trace-scale;
    position-area: bottom span-right;
    inset: auto;
    margin: var(--sp-2) 0;
    position-try-fallbacks: flip-block;
  }
}
}
@layer lf-overrides {



body.site-page {
  --page-pad-start: 28px;
}


body.site-page nav.sitenav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  max-width: var(--col);
  margin: 0 auto 40px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-5);
}

body.site-page nav.sitenav .brand {
  margin-right: auto;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

body.site-page nav.sitenav a {
  color: var(--muted);
  text-decoration: none;
}

body.site-page nav.sitenav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

body.site-page nav.sitenav [aria-current="page"] {
  color: var(--ink);
}

body.site-page header.hero {
  margin-bottom: 40px;
}

body.site-page header.hero h1 {
  font-size: 40px;
  letter-spacing: -0.018em;
}

body.site-page footer.site-footer {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--t-5);
  --lf-block-frame: 1;
}

body.site-page footer.site-footer p {
  margin: 0;
}

body.site-page footer.site-footer p + p {
  margin-top: 6px;
}

.diagram-figure {
  margin-block: var(--sp-4);
  font: 15px/1.5 var(--sans);
}
.diagram-figure figcaption {
  margin-top: var(--sp-3);
  color: var(--muted);
  font: 14px/1.5 var(--sans);
}
.topic-outline {
  margin-block: var(--sp-3) var(--sp-5);
}
.topic-outline nav {
  font: var(--t-5) / 1.5 var(--sans);
}
.topic-outline ul {
  margin-block: var(--sp-2);
}
}


@property --lf-full-height {
  syntax: "*";
  inherits: false;
}

@property --lf-end-room {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@layer lf-layouts {
  
  html:is(
      [data-lf-layout~="column"],
      [data-lf-layout~="sidebar"],
      [data-lf-layout~="workspace"]
    )
    body {
    margin: 0;
  }
  @media screen {
    html[data-lf-live]:is(
        [data-lf-layout~="column"],
        [data-lf-layout~="sidebar"],
        [data-lf-layout~="workspace"]
      ):not([data-lf-sample-block])
      body {
      min-height: 100%;
    }
  }
  
  @property --lf-layout-box {
    syntax: "*";
    inherits: false;
  }
  :is(main, main > *, main > [data-lf-views="parts"] > * > *):is(
    .layout-column,
    .layout-sidebar,
    .layout-workspace
  ) {
    --lf-layout-box: 1;
    --lf-block-frame: trim;
    container-name: lf-content-frame;
  }
  :is(main, main > [data-lf-views="parts"] > *):has(
    > :is(.layout-column, .layout-sidebar, .layout-workspace)
  ) {
    container-type: inline-size;
  }
  
  @media screen {
    html[data-lf-interactive]
      body:has(
        > main:not(.layout-column, .layout-sidebar, .layout-workspace)
          > [data-lf-views="parts"]
      ) {
      padding-bottom: 0;
    }
    html[data-lf-interactive]
      body
      > main:not(.layout-column, .layout-sidebar, .layout-workspace)
      > [data-lf-views="parts"]
      > :not([role="tablist"], [hidden]) {
      padding-block-end: var(--lf-foot-room);
    }
    html[data-lf-interactive]
      body
      > main:not(.layout-column, .layout-sidebar, .layout-workspace):has(
        > [data-lf-views="parts"]
      ) {
      --lf-parts-list: 15rem;
      display: grid;
      grid-template-columns: var(--lf-parts-list) minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      align-items: start;
      box-sizing: border-box;
      min-block-size: calc(100dvh - var(--lf-head-room));
    }
    
    html[data-lf-interactive]
      body
      > main:not(.layout-column, .layout-sidebar, .layout-workspace)
      > :has(~ [data-lf-views="parts"]):not(
        [data-lf-views="parts"],
        [data-lf-views="parts"] ~ *
      ) {
      grid-column: 1;
      grid-row: 1;
      anchor-name: --lf-parts-title;
      position: fixed;
      top: var(--lf-top);
      box-sizing: border-box;
      inline-size: var(--lf-parts-list);
      max-block-size: calc(100dvh - var(--lf-head-room) - 8rem);
      overflow-y: auto;
      --lf-holds-height: 1;
      margin: 0;
      
      padding: var(--sp-4) 20px var(--focus-ring-room);
      --lf-parts-title: 1;
    }
    html[data-lf-interactive]
      body
      > main:not(.layout-column, .layout-sidebar, .layout-workspace)
      > [data-lf-views="parts"] {
      display: contents;
    }
    html[data-lf-interactive]
      body
      > main:not(.layout-column, .layout-sidebar, .layout-workspace)
      > [data-lf-views="parts"]
      > [role="tablist"] {
      grid-column: 1;
      grid-row: 2;
    }
    html[data-lf-interactive]
      body
      > main:not(.layout-column, .layout-sidebar, .layout-workspace)
      > [data-lf-views="parts"]
      > :not([role="tablist"]) {
      grid-column: 2;
      grid-row: 1 / -1;
    }
    html[data-lf-interactive]
      body
      > main:not(.layout-column, .layout-sidebar, .layout-workspace)
      > [data-lf-views="parts"]
      > :not([role="tablist"], [hidden]) {
      align-self: stretch;
    }
    
    @media (min-width: 720px) and (min-height: 480px) {
      html[data-lf-interactive]
        body
        > main:not(.layout-column, .layout-sidebar, .layout-workspace)
        > [data-lf-views="parts"]
        > :not([role="tablist"], [hidden]):has(> .layout-workspace) {
        contain: size;
      }
      html[data-lf-interactive]
        body
        > main:not(.layout-column, .layout-sidebar, .layout-workspace)
        > [data-lf-views="parts"]
        > :not([role="tablist"], [hidden])
        > .layout-workspace {
        block-size: 100%;
      }
    }
    @container lf-shell (width < 640px) {
      html[data-lf-interactive]
        body
        > main:not(.layout-column, .layout-sidebar, .layout-workspace):has(
          > [data-lf-views="parts"]
        ) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        min-block-size: 0;
      }
      html[data-lf-interactive]
        body
        > main:not(.layout-column, .layout-sidebar, .layout-workspace)
        > :has(~ [data-lf-views="parts"]):not(
          [data-lf-views="parts"],
          [data-lf-views="parts"] ~ *
        ),
      html[data-lf-interactive]
        body
        > main:not(.layout-column, .layout-sidebar, .layout-workspace)
        > [data-lf-views="parts"]
        > [role="tablist"],
      html[data-lf-interactive]
        body
        > main:not(.layout-column, .layout-sidebar, .layout-workspace)
        > [data-lf-views="parts"]
        > :not([role="tablist"]) {
        grid-column: 1;
        grid-row: auto;
      }
      
      html[data-lf-interactive]
        body
        > main:not(.layout-column, .layout-sidebar, .layout-workspace)
        > :has(~ [data-lf-views="parts"]):not(
          [data-lf-views="parts"],
          [data-lf-views="parts"] ~ *
        ) {
        position: static;
        inline-size: auto;
        max-block-size: none;
        overflow-y: visible;
        padding-block-end: 0;
      }
      html[data-lf-interactive]
        body
        > main:not(.layout-column, .layout-sidebar, .layout-workspace)
        > [data-lf-views="parts"]
        > :not([role="tablist"], [hidden]) {
        align-self: start;
      }
      
      @media (min-width: 720px) and (min-height: 480px) {
        html[data-lf-interactive]
          body
          > main:not(.layout-column, .layout-sidebar, .layout-workspace)
          > [data-lf-views="parts"]
          > :not([role="tablist"], [hidden]):has(> .layout-workspace) {
          contain: none;
        }
        html[data-lf-interactive]
          body
          > main:not(.layout-column, .layout-sidebar, .layout-workspace)
          > [data-lf-views="parts"]
          > :not([role="tablist"], [hidden])
          > .layout-workspace {
          block-size: var(--lf-view-height);
        }
      }
    }
  }
  
  [data-lf-reading-role="pane"] > header {
    grid-row: 1;
    margin: 0;
  }
  [data-lf-reading-role="pane"] > footer {
    grid-row: 3;
    margin: 0;
  }
  [data-lf-reading-role="pane"] > :not(header, footer) {
    grid-row: 2;
    grid-column: 1;
    min-width: 0;
    margin: 0;
  }
  
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-column {
    max-width: var(--col);
    margin-inline: auto;
    padding-inline: var(--col-pad);
    padding-block: var(--page-pad-start) var(--page-pad-end);
    --lf-measure: var(--col);
    --lf-width: min(var(--col), max(0px, 100cqi - 2 * var(--col-pad)));
    --lf-beside: calc((100cqi - var(--lf-width)) / 2);
    --lf-shift: var(--lf-column-shift, 0px);
    --lf-free-l: max(
      0px,
      calc(var(--lf-beside) + var(--lf-shift) - var(--col-pad) - var(--lf-taken-l, 0px))
    );
    --lf-free-r: max(
      0px,
      calc(var(--lf-beside) - var(--lf-shift) - var(--col-pad) - var(--lf-taken-r, 0px))
    );
    --lf-room: calc(var(--lf-width) + var(--lf-free-l) + var(--lf-free-r));
  }
  @property --lf-column-shell {
    syntax: "*";
    inherits: false;
  }
  @media screen {
    
    [data-lf-column-shell] {
      display: grid;
      align-content: start;
      grid-template-columns:
        max(0px, calc(2 * var(--lf-column-shift, 0px)))
        minmax(0, 1fr) max(0px, calc(-2 * var(--lf-column-shift, 0px)));
    }
    [data-lf-column-shell]:dir(rtl) {
      grid-template-columns:
        max(0px, calc(-2 * var(--lf-column-shift, 0px)))
        minmax(0, 1fr) max(0px, calc(2 * var(--lf-column-shift, 0px)));
    }
    body[data-lf-column-shell]::before,
    [data-lf-column-shell] > :not(.layout-column) {
      grid-column: 1 / -1;
    }
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-column {
      --lf-column-shell: grid;
    }
    [data-lf-column-shell] > .layout-column {
      grid-column: 2;
      justify-self: center;
      width: max(0px, calc(100cqi - 2 * var(--col-pad)));
    }
  }
  
  @property --lf-margin-content {
    syntax: "*";
    inherits: false;
  }
  
  @scope (:is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-column) {
    
    :is(:scope, :scope:not(:has(> aside.sidebar)) > [data-lf-views-flow="page"] > *)
      > aside.sidebar:nth-child(1 of aside.sidebar):has(
        > [data-lf-margin-content="map"]:only-child:empty
      ) {
      display: block;
      margin-block: 0;
    }
    
    :is(:scope, :scope:not(:has(> aside.sidebar)) > [data-lf-views-flow="page"] > *)
      > aside.sidebar:nth-child(1 of aside.sidebar) {
      --lf-margin-content: sidebar;
      --lf-sidebar-slot: margin;
      overflow-anchor: none;
      --lf-reading-region: layout;
    }
    :scope aside.sidenote {
      --lf-margin-content: note;
      overflow-anchor: none;
    }
    @media screen {
      
      :scope[data-lf-margin~="sidebar"] {
        --lf-sidebar-placement: margin;
        --lf-taken-l: calc(var(--lf-beside) + var(--lf-shift));
        --lf-top-outer: var(--lf-top);
      }
      
      :is(
          :scope[data-lf-margin~="sidebar"],
          :scope[data-lf-margin~="sidebar"]:not(:has(> aside.sidebar))
            > [data-lf-views-flow="page"]
            > *
        )
        > aside.sidebar:nth-child(1 of aside.sidebar) {
        float: left;
        clear: left;
        width: calc(var(--sidebar) - var(--sp-4));
        margin: 0 var(--sp-4) var(--sp-4) calc(-1 * var(--sidebar));
      }
    }
    
    @media screen and (hover: hover) and (pointer: fine) {
      :is(:scope, :scope:not(:has(> aside.sidebar)) > [data-lf-views-flow="page"] > *)
        > aside.sidebar:nth-child(1 of aside.sidebar):has(
          [data-lf-margin-content="map"]
        ) {
        --lf-margin-content: sidebar map;
      }
      
      :is(:scope, :scope:not(:has(> aside.sidebar)) > [data-lf-views-flow="page"] > *)
        > aside.sidebar:nth-child(1 of aside.sidebar):has(
          > [data-lf-margin-content="map"]:only-child
        ) {
        --lf-margin-content: map;
      }
      
      :scope[data-lf-margin~="map"] {
        --lf-sidebar-placement: margin;
        --lf-taken-l: var(--map);
      }
      
      :is(
          :scope[data-lf-margin~="map"],
          :scope[data-lf-margin~="map"]:not(:has(> aside.sidebar))
            > [data-lf-views-flow="page"]
            > *
        )
        > aside.sidebar:nth-child(1 of aside.sidebar):has(
          > [data-lf-margin-content="map"]:only-child
        ) {
        display: block;
        margin-block: 0;
      }
    }
  }
  @media screen {
    :is(
        main,
        main > *,
        main > [data-lf-views="parts"] > * > *
      ).layout-column[data-lf-margin~="note"]
      [data-lf-space] {
      clear: right;
    }
    :is(
        main,
        main > *,
        main > [data-lf-views="parts"] > * > *
      ).layout-column[data-lf-margin~="note"]
      aside.sidenote {
      float: right;
      clear: right;
      width: calc(var(--note) - var(--sp-4));
      margin: 0 calc(-1 * var(--note)) 12px 0;
    }
  }
  
  
  @property --lf-breakout {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  @media screen {
    
    [data-lf-space] {
      contain: inline-size;
      --lf-breakout: 1;
    }
    
    :where(
      :is(main, main > *, main > [data-lf-views="parts"] > * > *):is(
        .layout-column,
        .layout-sidebar
      )
    ) {
      :is(
        [data-lf-space],
        [data-lf-content="markup"]:has(> [data-lf-space]:not([data-lf-kept]))
      ) {
        
        --lf-surplus: clamp(
          0px,
          calc(var(--lf-reach) - 100%),
          calc(var(--lf-free-l) + var(--lf-free-r))
        );
        --lf-grow-l: clamp(
          max(0px, calc(var(--lf-surplus) - var(--lf-free-r))),
          calc(var(--lf-surplus) / 2),
          min(var(--lf-surplus), var(--lf-free-l))
        );
        --lf-grow-r: calc(var(--lf-surplus) - var(--lf-grow-l));
      }
      [data-lf-space] {
        max-width: none;
        width: calc(100% + var(--lf-surplus));
        margin-left: calc(-1 * var(--lf-grow-l));
        margin-right: calc(-1 * var(--lf-grow-r));
        
        box-sizing: border-box;
      }
      
      :is(
        [data-lf-space="wide"],
        [data-lf-content="markup"]:has(> [data-lf-space="wide"]:not([data-lf-kept]))
      ) {
        --lf-reach: min(
          var(--wide),
          var(--lf-room, 0px),
          calc(100% + var(--lf-free-r))
        );
        --lf-grow-l: 0px;
        &:dir(rtl) {
          --lf-reach: min(
            var(--wide),
            var(--lf-room, 0px),
            calc(100% + var(--lf-free-l))
          );
          --lf-grow-l: var(--lf-surplus);
        }
      }
      :is(
        [data-lf-space="available"],
        [data-lf-content="markup"]:has(
          > [data-lf-space="available"]:not([data-lf-kept])
        )
      ) {
        --lf-reach: var(--lf-room, 0px);
      }
      [data-lf-space="wide"] {
        max-width: var(--wide);
      }
      
      [data-lf-space] > *,
      [data-lf-kept] {
        --lf-room: 100%;
      }
      
      [data-lf-space]:has(> .lf-error) {
        --lf-room: 0px;
      }
      
      @container style(--lf-block-frame: 1) {
        * {
          --lf-room: 100%;
        }
      }
      
      html[data-lf-startup-error]:not([data-lf-interactive])
        &
        :is([data-lf-space], [data-lf-content="markup"]:has(> [data-lf-space])) {
        --lf-room: 0px;
      }
    }
    
    @container not (style(--lf-room: 100%) or style(--lf-block-frame: 1)) {
      :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-column
        table[data-lf-space]:not([data-lf-space] table, [data-lf-kept]) {
        contain: none;
        container-type: normal;
        container-type: scroll-state;
        width: max-content;
        min-width: 100%;
        max-width: calc(100% + var(--lf-surplus));
        margin-left: calc(-1 * var(--lf-free-l));
        margin-right: auto;
        --lf-over: calc(100% - var(--lf-width));
        --lf-pull: clamp(
          max(0px, var(--lf-over) - var(--lf-free-r)),
          var(--lf-over) / 2,
          min(var(--lf-over), var(--lf-free-l))
        );
        translate: calc(var(--lf-free-l) - var(--lf-pull)) 0;
        &[data-lf-space="wide"] {
          --lf-pull: 0px;
        }
        :dir(rtl) > & {
          margin-left: auto;
          margin-right: calc(-1 * var(--lf-free-r));
          translate: calc(var(--lf-over) - var(--lf-free-r) - var(--lf-pull)) 0;
        }
        :dir(rtl) > &[data-lf-space="wide"] {
          --lf-pull: var(--lf-over);
        }
        & > caption {
          max-inline-size: max(var(--lf-width), var(--lf-reach));
        }
      }
    }
    
    html[data-lf-interactive]
      [data-lf-height]:not([data-lf-height=""], .lf-rendered, :has(> .lf-error)) {
      box-sizing: border-box;
      block-size: attr(data-lf-height px);
      overflow: clip;
    }
  }
  
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar {
    padding-inline: clamp(var(--col-pad), 4cqi, 64px);
    padding-block: var(--page-pad-start) var(--page-pad-end);
    --lf-measure: var(--col);
    max-width: var(--wide-page-max);
    margin-inline: auto;
    --lf-room: 100%;
    --lf-wide-page: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-4);
    --lf-holds-edge: 1;
    --aside: auto;
  }
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar
    > :not(footer) {
    --lf-frame-start: 1;
  }
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar
    > :not(header) {
    --lf-frame-end: 1;
  }
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar
    > :is(header, footer) {
    flex: 1 0 100%;
    margin-block: 0;
  }
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar
    > :not(header, footer) {
    flex: 2 1 30rem;
    margin-block: 0;
  }
  
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar > aside {
    flex: 1 1 18rem;
    --lf-margin-content: track;
    align-self: stretch;
  }
  @container not style(--aside: auto) {
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar
      > :not(header, footer) {
      flex: 1000000 1 30rem;
    }
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar > aside {
      flex: 1 1 var(--aside);
    }
  }
  
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar
    > aside[data-lf-beside] {
    --lf-sidebar-slot: beside;
  }
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar
    > aside
    > [data-lf-track-body] {
    --lf-reading-region: layout;
  }
  @media screen {
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar {
      --lf-top-outer: var(--lf-top);
    }
    
    :has(> [data-lf-track]) {
      --lf-top-outer: var(--lf-top);
    }
    
    @media (min-height: 480px) {
      @container not style(--lf-track-scroll-behavior: flow) {
        :is(
            main,
            main > *,
            main > [data-lf-views="parts"] > * > *
          ).layout-column[data-lf-margin~="sidebar"]
          > aside.sidebar:nth-child(1 of aside.sidebar),
        :is(
            main,
            main > *,
            main > [data-lf-views="parts"] > * > *
          ).layout-column[data-lf-margin~="sidebar"]:not(:has(> aside.sidebar))
          > [data-lf-views-flow="page"]
          > *
          > aside.sidebar:nth-child(1 of aside.sidebar),
        :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar
          > aside[data-lf-beside]
          > [data-lf-track-body],
        [data-lf-track] {
          position: sticky;
          --lf-head-inset: 0px;
          top: calc(var(--lf-top-outer) + var(--sp-4));
          --lf-top: 0px;
          --lf-top-covered: 0px;
          --lf-landing-room: 0px;
          --lf-head-inset: initial;
          --lf-track-scroll-behavior: flow;
          max-height: calc(
            100dvh - var(--lf-foot-room) - var(--lf-top-outer) - 2 * var(--sp-4)
          );
          overflow-y: auto;
          overflow-anchor: none;
          --lf-holds-height: 1;
        }
        
        :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-sidebar
          > aside[data-lf-beside]
          > [data-lf-track-body] {
          box-sizing: border-box;
          padding: var(--focus-ring-room);
          margin-block: calc(-1 * var(--focus-ring-room));
          scroll-padding: var(--focus-ring-room);
        }
      }
    }
  }
  
  .layout-tiles {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  }
  .layout-tiles > * {
    margin: 0;
  }
  
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace {
    --lf-workspace-gutter: 12px;
    padding-inline: var(--lf-workspace-gutter);
    padding-block: var(--sp-2) var(--page-pad-end);
  }
  
  @media screen {
    html[data-lf-live][data-lf-layout~="workspace"] body,
    html[data-lf-live][data-lf-layout~="workspace"] body > main.layout-workspace {
      padding-block-end: 0;
    }
    html[data-lf-live][data-lf-layout~="workspace"]
      body
      > main.layout-workspace
      > :not(header, footer) {
      --lf-end-room: var(--lf-foot-room);
      margin-block-end: 0;
    }
    html[data-lf-live][data-lf-layout~="workspace"]
      body
      > main.layout-workspace:has(> footer)
      > :not(header, footer) {
      --lf-end-room: 0px;
    }
    html[data-lf-live][data-lf-layout~="workspace"]
      body
      > main.layout-workspace
      > footer {
      padding-block-end: var(--lf-foot-room);
    }
    html[data-lf-live][data-lf-layout~="workspace"]
      body
      > main.layout-workspace
      > :not(header, footer)
      > [data-lf-reading-role="pane"] {
      --lf-end-room: inherit;
    }
    html[data-lf-live][data-lf-layout~="workspace"]
      body
      > main.layout-workspace
      > :not(header, footer, [data-lf-reading-role="pane"], [data-lf-views]):not(
        :has(> [data-lf-reading-role="pane"])
      ) {
      padding-block-end: var(--lf-end-room);
    }
  }
  @media screen and (min-width: 720px) and (min-height: 480px) {
    html[data-lf-live][data-lf-layout~="workspace"] body > main.layout-workspace {
      block-size: calc(var(--lf-view-height) + var(--lf-foot-room));
    }
  }
  
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
    > header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-3);
    padding-block: 0 var(--sp-2);
    --lf-block-frame: 1;
  }
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
    > header
    > * {
    margin-block: 0;
  }
  
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
    > :not(header, footer, [data-lf-reading-role="pane"]) {
    --lf-reading-region: layout;
  }
  
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
    > :not(header, footer):has(
      > [data-lf-reading-role="pane"]:not([data-lf-generated])
    ) {
    gap: 1px;
    border: 1px solid var(--rule);
    border-radius: var(--r);
  }
  :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
    > :not(header, footer)
    > [data-lf-reading-role="pane"]:not([data-lf-generated]) {
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--rule);
  }
  
  @media screen and ((width < 720px) or (height < 480px)) {
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace {
      --lf-workspace-top: var(--lf-top);
      padding-block-start: 0;
    }
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
      > header {
      position: sticky;
      --lf-head-inset: 0px;
      top: var(--lf-top);
      z-index: 1;
      padding-block: var(--sp-2);
      background: var(--paper);
      box-shadow:
        calc(-1 * var(--lf-workspace-gutter)) 0 var(--paper),
        var(--lf-workspace-gutter) 0 var(--paper);
    }
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
      > :not(header) {
      --lf-top: calc(var(--lf-workspace-top) + var(--lf-layout-head-h, 0px));
      isolation: isolate;
    }
  }
  @media screen and (min-width: 720px) and (min-height: 480px) {
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace {
      --lf-full-height: 1;
      display: flex;
      flex-direction: column;
      block-size: var(--lf-view-height);
      padding-block-end: 0;
      box-sizing: border-box;
    }
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
      > :is(header, footer) {
      flex: none;
    }
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
      > :not(header, footer) {
      flex: 1 1 0;
      min-block-size: 0;
      margin-block: 0;
    }
    
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
      > :not(header, footer):has(
        > [data-lf-reading-role="pane"]:not([data-lf-generated])
      ) {
      grid-auto-rows: minmax(0, 1fr);
      --lf-full-height: 1;
    }
    
    :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
      > :not(header, footer, [data-lf-reading-role="pane"]) {
      overflow: auto;
      --lf-top: 0px;
      --lf-holds-height: 1;
    }
    
    @container style(--lf-full-height: 1) {
      [data-lf-reading-role="pane"] {
        min-block-size: 0;
        --lf-full-height: inherit;
      }
      [data-lf-reading-role="pane"] > :not(header, footer) {
        min-block-size: 0;
        overflow: auto;
        
        --lf-top-start: calc(-1 * var(--lf-pane-top, 0px));
        --lf-top: var(--lf-top-start);
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        --lf-holds-height: 1;
      }
    }
    
    @container style(--lf-holds-height: 1) {
      :is(
          :is(main, main > *, main > [data-lf-views="parts"] > * > *).layout-workspace
            > :not(header, footer, [data-lf-reading-role="pane"]),
          [data-lf-reading-role="pane"] > :not(header, footer)
        )
        > [data-lf-bound]:only-child {
        max-block-size: min(100%, var(--lf-bound, 100%));
      }
    }
  }
}

@layer lf-state {
  [data-lf-retired] {
    display: none;
  }

  
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition: none;
    }
    
    :where(.lf-chrome, .lf-chrome *, .lf-ui, .lf-ui *),
    :where(.lf-chrome, .lf-chrome *, .lf-ui, .lf-ui *)::before,
    :where(.lf-chrome, .lf-chrome *, .lf-ui, .lf-ui *)::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition: none !important;
    }
  }

  
  [data-lf-scrolls="across"] {
    --lf-top-over: calc(var(--lf-top) - var(--lf-top-covered, var(--lf-top)));
  }
  [data-lf-scrolls="across"] > :not([data-lf-scrolls="across"]) {
    --lf-top: 0px;
    --lf-top-covered: calc(0px - var(--lf-top-over));
  }
  [data-lf-scrolls]:not([data-lf-scrolls="across"]) {
    --lf-top: var(--lf-top-start);
    --lf-top-covered: var(--lf-top-start);
    --lf-landing-room: var(--lf-landing-room-start);
    --lf-track-scroll-behavior: flow;
  }

  

  
  @media print {
    [data-lf-offer]:not([data-lf-said], [data-lf-echo]) {
      display: none !important;
    }
    [data-lf-offer]:is([data-lf-said], [data-lf-echo]) {
      background: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding-inline: 0 !important;
      cursor: default !important;
      text-decoration: none !important;
      list-style: none !important;
    }
    [data-lf-offer]:is([data-lf-said], [data-lf-echo])::-webkit-details-marker {
      display: none !important;
    }
  }
}