@layer lf-reset, lf-base, lf-layouts, lf-shadow, lf-theme, lf-state;
@layer lf-base {
/* Generated from skills/leaf/assets/styles/shadow.css by build/styles.mjs. */
/* skills/leaf/assets/styles/components/surfaces.css */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}
: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;
  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: 4px;
  background: var(--chip);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-6);
  line-height: 1.478;
  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: .75em;
  height: .75em;
  margin-inline-start: .24em;
  vertical-align: .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]) {
  outline: var(--focus-ring);
  --lf-focus-ring: focus;
  outline-offset: var(--focus-ring-gap);
}
:where(:focus, [data-lf-focus]) {
  scroll-margin-block: var(--focus-ring-room);
}
:where([data-lf-sticks]) {
  --lf-head-inset: 0px;
}
: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-room) + 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: .55;
}
[data-lf-offer]:where(:not([data-lf-offer=""]))[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: pressable;
  outline-offset: var(--focus-ring-gap);
}
[data-lf-offer]:where(:not([data-lf-offer=""], [data-lf-offer=checkbox], [data-lf-offer=radio], .lf-skip)),
.lf-btn,
.button,
.lf-outline-chip:is(button, [role=button]),
.lf-thread-notice:is(button),
.lf-react,
.lf-msg-control,
.lf-margin-entry,
.lf-thread-action,
.lf-preview,
.lf-layer-reference,
.lf-version-diff,
.lf-version-row,
.lf-command-reference-command,
.lf-quote {
  min-width: var(--aim-floor);
}
[data-lf-offer]:where(:not([data-lf-offer=""], [data-lf-offer=checkbox], [data-lf-offer=radio], .lf-skip, .lf-btn, .lf-version-row, .lf-version-diff)),
.lf-outline-chip:is(button, [role=button]),
.lf-thread-notice:is(button),
.lf-react,
.lf-msg-control,
.lf-margin-entry,
.lf-thread-action,
.lf-command-reference-command,
.lf-quote {
  min-height: var(--aim-floor);
}
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[data-lf-focus-within] {
  outline: none;
  border-radius: var(--r);
  background: var(--focus-surface);
}
.lf-page-thread[data-lf-focus] {
  outline: none;
}
.lf-page-thread[data-lf-focus]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  outline: var(--focus-ring);
  --lf-focus-ring: page-thread;
  outline-offset: calc(-1 * var(--focus-ring-w));
}
@media (forced-colors: active) {
  .lf-page-thread[data-lf-focus-within] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
    box-shadow: none;
  }
}
.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;
}
.lf-page-thread + :is(.lf-page-thread, .lf-resolved-threads) {
  margin-top: calc(2 * var(--sp-3));
}
.lf-page-thread + :is(.lf-page-thread, .lf-resolved-threads)::before {
  content: "";
  position: absolute;
  inset-inline: var(--sp-1);
  inset-block-start: calc(-1 * var(--sp-3));
  border-top: 1px solid var(--rule);
  pointer-events: none;
}
:root,
.lf-page-thread,
.lf-thread,
.lf-fab-bar {
  --lf-thread-text-inset: 13px;
  --lf-group-ring-end: 6px;
  --lf-msg-head-height: max(28px, var(--aim-floor));
  --lf-msg-body-gap: 4px;
}
.lf-thread-transcript {
  min-width: 0;
  padding-inline: var(--lf-thread-text-inset) 0;
}
.lf-thread-content {
  display: flow-root;
  min-width: 0;
  anchor-scope: --lf-thread-headline;
  --lf-thread-action-room: var(--lf-msg-head-height);
  --lf-thread-notice-room: var(--lf-msg-head-height);
  --lf-thread-message-control-room: 0px;
}
.lf-read-boundary {
  height: 0;
}
@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-primary-message > .lf-msg-head {
  position: relative;
  --lf-msg-head-room: 5rem;
  padding-inline-end: var(--lf-msg-head-room);
}
.lf-primary-part {
  position: relative;
}
.lf-primary-part[data-lf-part=reply] {
  padding-block-start: max(28px, var(--aim-floor));
}
.lf-primary-news {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: var(--lf-msg-control-room, var(--lf-msg-control, 0px));
  max-inline-size: 5rem;
  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 1 auto;
  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;
}
.lf-thread-checkpoint[hidden] {
  display: none;
}
.lf-thread-checkpoint[data-expanded=true] {
  position: relative;
}
.lf-thread-checkpoint[data-expanded=true]::before {
  content: "";
  position: absolute;
  inset-block: -7px;
  inset-inline: -12px calc(-1 * var(--lf-group-ring-end));
  border: 1px solid var(--rule);
  border-radius: 5px;
  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 {
  min-height: var(--aim-floor);
  max-inline-size: 100%;
  flex-shrink: 0;
  border: 0;
  padding: 4px 0;
  background: transparent;
  color: var(--accent);
  font: 600 11px/1.4 var(--sans);
  cursor: pointer;
}
.lf-msg-head:has(> .lf-summary-expand) {
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
  row-gap: 0;
}
.lf-msg-head > .lf-thread-disclosure {
  padding-block: 0;
}
.lf-thread-disclosure:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lf-summary-required {
  margin-top: 6px;
  color: var(--turn-ink);
  font: 600 11px/1.4 var(--sans);
}
.lf-summary-originals {
  min-width: 0;
}
.lf-summary-originals[hidden] {
  display: none;
}
.lf-summary-originals > .lf-msg {
  margin-block: 8px;
}
.lf-thread-working {
  margin-top: 16px;
  --lf-working-dim: color-mix(in oklab, var(--muted) 80%, var(--paper));
}
.lf-thread-working-words {
  margin-top: var(--lf-msg-body-gap);
  inline-size: fit-content;
  max-inline-size: 100%;
  font: max(var(--entry-floor), var(--t-5))/1.5 var(--sans);
  color: var(--lf-working-dim);
}
.lf-thread-working[data-lf-live] .lf-thread-working-words {
  color: transparent;
  background:
    linear-gradient(
      110deg,
      var(--lf-working-dim) 42%,
      var(--ink) 50%,
      var(--lf-working-dim) 58%);
  background-size: 200% 100%;
  background-clip: text;
  animation: lf-working-sheen 2s ease-in-out infinite alternate;
}
@keyframes lf-working-sheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lf-thread-working[data-lf-live] .lf-thread-working-words {
    animation: none;
    background: none;
    color: var(--lf-working-dim);
  }
}
@media (forced-colors: active) {
  .lf-thread-working-words,
  .lf-thread-working[data-lf-live] .lf-thread-working-words {
    animation: none;
    background: none;
    color: GrayText;
  }
}
.lf-thread-disclosure[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: summary-fold;
  outline-offset: calc(-1 * var(--focus-ring-w));
}
.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: anchor(left);
  inset-block-start: anchor(center);
  translate: 0 -50%;
  inline-size: calc(anchor-size(width) + var(--lf-thread-action-room) + var(--sp-2));
  block-size: var(--lf-thread-action-room);
  display: flex;
  align-items: center;
  pointer-events: none;
  font-size: var(--t-6);
}
.lf-thread-controls > * {
  pointer-events: auto;
}
.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(max(26px, var(--aim-floor)) + 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(max(52px, var(--aim-floor)) + 4px + max(40px, var(--aim-floor)) + 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-controls > .lf-thread-news {
  position: absolute;
  inset-inline-start: calc(var(--lf-thread-news-start, 0px) + var(--sp-2));
  inline-size: var(--lf-reserved-width, max-content);
  max-inline-size: max(0px, min(calc(100% - var(--lf-thread-news-start, 0px) - 2 * var(--sp-2) - var(--lf-thread-action-room) - var(--lf-thread-message-control-room)), calc(var(--lf-thread-news-visible-end, 100%) - 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-notice {
  color: var(--accent);
  font: 700 10px/14px var(--sans);
  white-space: nowrap;
}
.lf-thread-notice-news {
  color: var(--danger);
}
button.lf-thread-notice {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.lf-thread-notice:hover {
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.lf-thread-notice[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: thread-notice;
  outline-offset: 1px;
}
.lf-thread-news {
  flex: none;
  align-self: center;
}
.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;
}

/* skills/leaf/assets/styles/components/reading.css */
:where(:root, .lf-thread-transcript) a {
  color: var(--accent);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-color: var(--link-underline);
}
:where(:root, .lf-thread-transcript) a:hover {
  text-decoration-color: currentColor;
}
:where(:root, .lf-thread-transcript) code {
  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);
  overflow-wrap: anywhere;
  box-decoration-break: slice;
  display: inline;
  contain: none;
  isolation: auto;
}
:where(:root, .lf-thread-transcript) pre {
  background: var(--pre-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--r);
  padding: 12px var(--pre-inset);
  overflow-x: auto;
  font-size: var(--code-size);
  line-height: var(--code-line);
  font-family: var(--mono);
  color: var(--code-ink);
  font-variant-ligatures: none;
  contain: inline-size;
  container-type: scroll-state;
}
:where(:root, .lf-thread-transcript) pre > code {
  background: none;
  padding: 0;
  font-size: 100%;
}
.lf-text-scroller {
  container-type: scroll-state;
}
@container scroll-state(scrollable: inline) {
  .lf-text-scroller::after,
  :where(:root, .lf-thread-transcript) :is(pre, table)::after {
    content: "";
    float: inline-start;
    inline-size: 100%;
    block-size: 15px;
    grid-column: 1 / -1;
  }
  :where(:root, .lf-thread-transcript) :is(pre, table)::after {
    block-size: 8px;
  }
}
@media print {
  :where(:root, .lf-thread-transcript) pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}
:where(:root, .lf-thread-transcript) 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;
}
:where(:root, .lf-thread-transcript) table {
  display: block;
  overflow-x: auto;
  container-type: inline-size scroll-state;
  --lf-top: 0px;
  border-collapse: collapse;
  font: var(--t-5)/1.5 var(--sans);
  margin: 18px 0;
  font-variant-numeric: tabular-nums;
}
@property --lf-fills-frame { syntax: "<integer>"; inherits: false; initial-value: 0; }
:where(:root, .lf-thread-transcript) table:where([data-lf-space], [data-lf-space] *) {
  --lf-fills-frame: 1;
}
:where(:root, .lf-thread-transcript) table:where([data-lf-space]:not([data-lf-space=column])) {
  --lf-fills-frame: 0;
}
@container style(--lf-block-frame: 1) {
  :where(:root, .lf-thread-transcript) table {
    --lf-fills-frame: 1;
  }
}
@container style(--lf-fills-frame: 1) {
  :where(:root, .lf-thread-transcript) table::before {
    content: "";
    display: table-caption;
    min-inline-size: 100cqi;
  }
}
:where(:root, .lf-thread-transcript) :is(th, td) code:not(pre code) {
  padding: 0;
  background: none;
  font-size: 0.9em;
}
:where(:root, .lf-thread-transcript) caption {
  text-align: left;
  font-size: var(--t-6);
  color: var(--muted);
  margin-bottom: 6px;
  position: sticky;
  inset-inline-start: 0;
  max-inline-size: 100cqi;
}
:where(:root, .lf-thread-transcript) :is(th, td) {
  text-align: left;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  --lf-block-frame: 1;
}
@media screen and (max-width: 640px) {
  :where(:root, .lf-thread-transcript) :is(th, td) {
    padding-inline: 8px;
  }
}
:where(:root, .lf-thread-transcript) tr > :first-child {
  padding-left: 0;
}
:where(:root, .lf-thread-transcript) tr > :last-child {
  padding-right: 0;
}
:where(:root, .lf-thread-transcript) :where(th, td)[data-lf-focus] {
  outline-offset: calc(-1 * var(--focus-ring-w));
}
:where(:root, .lf-thread-transcript) th:not([scope=row]) {
  font-size: var(--t-working-label);
  color: var(--muted);
  font-weight: 600;
  border-bottom-color: var(--border-2);
}
:where(:root, .lf-thread-transcript) th[scope=row] {
  font-weight: 600;
}
:where(:root, .lf-thread-transcript) table:has(> * > tr > td > img:only-child, > * > tr > td > a:only-child > img:only-child) > * > tr > :is(th, td) {
  vertical-align: middle;
}
:where(:root, .lf-thread-transcript) 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);
}
:where(:root, .lf-thread-transcript) :is(ul, ol) {
  margin: 10px 0;
  padding-inline-start: 24px;
}
:where(:root, .lf-thread-transcript) li {
  margin: 6px 0;
}
:where(:root, .lf-thread-transcript) hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--hr-margin-block) 0;
}
:is(.lf-thread-transcript, .lf-thread-reply, .lf-general) {
  --quote-inset: 10px;
  --pre-inset: 10px;
}
leaf-text.lf-fab-input,
.lf-msg-body {
  font: max(var(--entry-floor), var(--t-5))/1.5 var(--sans);
  color: var(--ink);
}
.lf-msg-body {
  min-width: 0;
  margin: var(--lf-msg-body-gap) 0 0;
  overflow-wrap: anywhere;
  --lf-measure: var(--col);
}
.lf-msg-text {
  display: block;
  padding-block: var(--lf-thread-text-pad-block, 0px);
}
.lf-msg-text > :first-child {
  margin-top: 0;
}
.lf-msg-body > :last-child,
.lf-msg-text > :last-child {
  margin-bottom: 0;
}
.lf-msg-body :is(p, ul, ol, pre, blockquote, table, hr) {
  margin: 6px 0;
}
.lf-msg-text > p {
  font: inherit;
  white-space: break-spaces;
  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: 8px;
}
: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;
  line-height: inherit;
  overflow: visible;
}

/* skills/leaf/assets/styles/components/controls.css */
.lf-drawing-reference {
  display: block;
  margin-top: 2px;
  color: var(--muted-2);
  font: 500 var(--t-6)/1.35 var(--sans);
}
.lf-page-thread-open {
  margin-top: var(--sp-2);
}
.lf-resolved-threads {
  position: relative;
  min-width: 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: 600 var(--t-5)/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] {
  outline: var(--focus-ring);
  outline-offset: 1px;
  --lf-focus-ring: thread;
}
@media print {
  .lf-page-thread,
  .lf-page-thread .lf-msg {
    display: block !important;
  }
  .lf-page-thread :is(.lf-thread-reply, .lf-say, button, .lf-msg-sending) {
    display: none !important;
  }
}
.lf-outline-chip {
  appearance: none;
  margin: 0;
  padding: var(--chip-pad);
  white-space: nowrap;
  border: 1px solid var(--border-2);
  border-radius: var(--chip-r);
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-family: var(--sans);
  font-size: var(--t-6);
  line-height: var(--chip-lh);
}
.lf-outline-chip:is(button, [role=button]) {
  cursor: pointer;
}
.lf-outline-chip:is(button, [role=button]):hover {
  background: var(--chip);
}
@media (pointer: coarse) {
  .lf-outline-chip:is(button, [role=button]) {
    display: inline-flex;
    align-items: center;
  }
}
.lf-outline-chip[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: chip;
  outline-offset: 1px;
}
.lf-msg-control {
  color: var(--muted);
  border: 1px solid transparent;
  background: transparent;
}
.lf-msg-control:is(:hover, [data-lf-focus], [aria-expanded=true]) {
  color: var(--ink-2);
  border-color: var(--border-2);
  background: var(--chip);
}
.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([aria-pressed=true], :hover, [data-lf-focus], [data-lf-focus], [aria-busy=true]) {
  color: var(--ink-2);
  border-color: var(--border-2);
  background: var(--chip);
}
.lf-react.lf-response-action:not([aria-pressed=true]) {
  background: var(--card);
}
.lf-react[aria-busy=true] {
  opacity: .55;
}
.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: 4px 7px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 2px 8px var(--shade);
  font: 500 var(--t-6)/1.2 var(--sans);
  white-space: nowrap;
  pointer-events: none;
}
.lf-react-palette {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.lf-react-open > .lf-react-trigger {
  display: none;
}
.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-msg-control: max(26px, var(--aim-floor));
  padding-inline-end: calc(var(--lf-msg-control-room, var(--lf-msg-control)) + var(--lf-msg-head-room, 0px));
}
.lf-msg:has(> .lf-msg-body > .lf-msg-editor) {
  scroll-margin-block-end: var(--sp-2);
}
.lf-msg:has(> .lf-msg-body > .lf-msg-editor) > .lf-msg-head {
  --lf-msg-control-room: calc(max(52px, var(--aim-floor)) + 4px + max(40px, var(--aim-floor)));
}
.lf-msg:has(> .lf-msg-body > .lf-msg-editor) > .lf-msg-head > .lf-msg-meta {
  display: none;
}
.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: 26px;
  block-size: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  opacity: 0;
  cursor: pointer;
}
svg[data-lf-icon] {
  max-width: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lf-msg-control-icon {
  inline-size: 16px;
  block-size: 16px;
}
.lf-msg:is(:hover, [data-lf-focus-within]) .lf-msg-control,
.lf-msg-control[data-lf-focus] {
  opacity: 1;
}
.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-open > .lf-react-trigger {
  display: inline-flex;
}
.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: 0 4px 12px var(--shade);
}
: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-control {
    opacity: 1;
  }
}
@media (pointer: coarse), (hover: none) {
  .lf-msg:is(.agent, .user) > .lf-msg-head {
    --lf-msg-control: max(26px, var(--aim-floor));
    padding-inline-end: calc(var(--lf-msg-control-room, 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);
  font-weight: 600;
  white-space: nowrap;
}
.lf-msg-sending::before {
  content: "·";
  margin-inline-end: 6px;
  color: var(--muted-2);
}
.lf-msg-meta > time {
  flex: none;
}
[data-lf-holds] {
  position: relative;
}
@media screen {
  [data-lf-more-after]:where([data-lf-scroll-direction=ltr]:not([data-lf-more-before])),
  [data-lf-more-before]:where([data-lf-scroll-direction=rtl]:not([data-lf-more-after])) {
    -webkit-mask-image:
      linear-gradient(
        to right,
        #000 calc(100% - var(--lf-more-fade, 24px)),
        var(--lf-more-fade-to, transparent));
    mask-image:
      linear-gradient(
        to right,
        #000 calc(100% - 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])),
  [data-lf-more-after]:where([data-lf-scroll-direction=rtl]:not([data-lf-more-before])) {
    -webkit-mask-image:
      linear-gradient(
        to right,
        var(--lf-more-fade-to, transparent),
        #000 var(--lf-more-fade, 24px));
    mask-image:
      linear-gradient(
        to right,
        var(--lf-more-fade-to, transparent),
        #000 var(--lf-more-fade, 24px));
  }
  [data-lf-more-before][data-lf-more-after] {
    -webkit-mask-image:
      linear-gradient(
        to right,
        var(--lf-more-fade-to, transparent),
        #000 var(--lf-more-fade, 24px),
        #000 calc(100% - var(--lf-more-fade, 24px)),
        var(--lf-more-fade-to, transparent));
    mask-image:
      linear-gradient(
        to right,
        var(--lf-more-fade-to, transparent),
        #000 var(--lf-more-fade, 24px),
        #000 calc(100% - var(--lf-more-fade, 24px)),
        var(--lf-more-fade-to, transparent));
  }
  :is([data-lf-more-before], [data-lf-more-after]):is([data-lf-focus], :has([data-lf-focus])) {
    -webkit-mask-image: none;
    mask-image: none;
  }
  [data-lf-more-below] {
    box-shadow: inset 0 -8px 8px -8px var(--shade);
  }
}
@media print {
  details:not([open])::details-content {
    content-visibility: visible;
  }
  details > summary {
    list-style: none;
  }
  details > summary::-webkit-details-marker {
    display: none;
  }
}
:is(.lf-btn, .button) {
  width: var(--lf-reserved-width, auto);
  padding: max(4px, (var(--aim-floor) - 1lh) / 2 - 1px) 10px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink);
  display: inline-block;
}
:is(.lf-btn, .button)[hidden]:not([hidden=until-found]) {
  display: none;
}
:is(.lf-btn, .button):not(:disabled, [aria-disabled=true]):hover {
  background: var(--chip);
}
:is(.lf-btn, .button).primary {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--card));
}
: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: .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)[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: btn;
  outline-offset: 2px;
}

/* skills/leaf/assets/styles/components/response.css */
:root,
.lf-compose-field,
.lf-icon-action {
  --lf-icon-action-hit: max(28px, var(--aim-floor));
}
:root,
.lf-compose-field {
  --lf-compose-h: calc(var(--lf-icon-action-hit) + 12px);
}
.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-key-badge {
  background: transparent;
  color: var(--muted);
}
.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-icon-action-hit) + 12px - var(--lf-compose-pad-inline-start));
}
.lf-icon-action {
  box-sizing: border-box;
  width: var(--lf-icon-action-hit);
  height: var(--lf-icon-action-hit);
  min-width: var(--lf-icon-action-hit);
  min-height: var(--lf-icon-action-hit);
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r);
}
.lf-icon-action[hidden] {
  display: none;
}
.lf-action-icon {
  position: relative;
  z-index: 1;
  inline-size: 16px;
  block-size: 16px;
  pointer-events: none;
}
.lf-close-action {
  border: 0;
  background: transparent;
  color: var(--muted);
}
.lf-close-action:hover {
  background: var(--chip);
  color: var(--ink);
}
:is(.lf-compose-submit, .lf-compose-dictate),
:is(.lf-resolve, .lf-reopen).lf-icon-action {
  border: 0;
  background: transparent;
  box-shadow: none;
}
:is(.lf-compose-submit, .lf-compose-dictate, .lf-resolve.lf-icon-action, .lf-reopen.lf-icon-action)::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--r);
  background: transparent;
}
:is(.lf-compose-submit, .lf-compose-dictate, .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: 6px;
  inset-block-end: 6px;
  color: var(--accent);
}
:is(.lf-compose-submit, .lf-compose-dictate):not(:disabled, [aria-disabled=true]):hover::before {
  background: var(--accent-tint);
}
:is(.lf-compose-submit, .lf-compose-dictate):is(:disabled, [aria-disabled=true]) {
  opacity: 1;
  color: var(--muted);
}
.lf-compose-dictate {
  color: var(--muted);
}
.lf-compose-dictate: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 {
  color: var(--ok-ink);
}
.lf-resolve.lf-icon-action:not([aria-disabled=true]):hover::before {
  background: var(--ok-tint);
}
: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(> .lf-composer-media:not([hidden])) {
  flex-wrap: wrap;
}
.lf-composer-media {
  display: flex;
  flex: 1 0 100%;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
  box-sizing: border-box;
}
.lf-composer-media[hidden] {
  display: none !important;
}
.lf-composer-media-item {
  flex: none;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--paper);
  overflow: hidden;
}
.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] {
  outline: var(--focus-ring);
  --lf-focus-ring: media;
  outline-offset: 2px;
}
.lf-composer-media-open {
  width: 68px;
  height: 52px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  align-self: center;
}
.lf-composer-media-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lf-composer-drawing > .lf-composer-media-open {
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
.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-composer-media-item > button:not(.lf-media-open) {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: max(26px, var(--aim-floor));
  min-block-size: var(--aim-floor);
  padding: 0;
  border: 0;
  font: inherit;
  border-inline-start: 1px solid var(--border-2);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.lf-composer-media-item > button:not(.lf-media-open):hover {
  color: var(--accent);
  background: var(--chip);
}
.lf-composer-media-item > button:not(.lf-media-open)[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: composer-media;
  outline-offset: calc(-1 * var(--focus-ring-w));
}
.lf-composer-media-item > button:not(.lf-media-open) > svg {
  inline-size: 14px;
  block-size: 14px;
}
.lf-composer-media-item > .lf-media-open[data-lf-focus] {
  outline-offset: calc(-1 * var(--focus-ring-w));
}
.lf-comment-box > .lf-compose-field,
.lf-response-control {
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--card);
}
.lf-comment-box > .lf-compose-field:has(> leaf-text[data-lf-focus]),
.lf-response-control[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: text-box;
  outline-offset: 0;
  border-color: transparent;
}
.lf-page-comment-card,
.lf-response-control {
  filter: drop-shadow(0 2px 4px var(--shade));
}
.lf-comment-box > .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 > .lf-compose-field > leaf-text[data-lf-focus] {
  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;
}
.lf-thread-transcript .lf-msg-editor {
  margin-inline-start: calc(-1 * var(--lf-thread-text-inset));
}
.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: 4px;
}
.lf-msg-edit-actions > .lf-msg-control {
  position: static;
  translate: none;
  opacity: 1;
  block-size: max(24px, var(--aim-floor));
  min-width: 0;
  min-height: 0;
  font: 600 var(--t-6)/1 var(--sans);
}
.lf-msg-edit-actions > .lf-msg-edit-cancel {
  inline-size: max(52px, var(--aim-floor));
}
.lf-msg-edit-actions > .lf-msg-edit-save {
  inline-size: max(40px, var(--aim-floor));
}
.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-fab-bar, .lf-margin-preview) {
  --lf-response-height: max(32px, var(--aim-floor));
}
:is(.lf-fab-bar, .lf-margin-preview) {
  --lf-thread-text-pad-block: calc((var(--lf-response-height) - 1lh) / 2);
  --lf-comment-text-pad-end: var(--lf-thread-text-inset);
  --lf-comment-send-inset: calc((var(--lf-response-height) - var(--lf-icon-action-hit)) / 2);
  --lf-comment-send-room: calc(var(--lf-icon-action-hit) + var(--lf-comment-send-inset) - var(--lf-comment-text-pad-end));
}
.lf-fab-bar .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 {
  width: 100%;
  min-width: 0;
  padding-inline: var(--lf-compose-pad-inline-start) calc(var(--lf-comment-text-pad-end) - 1px);
  --lf-field-end-room: var(--lf-comment-send-room);
  overflow-y: auto;
}
.lf-fab-bar :is(.lf-compose-submit, .lf-compose-dictate) {
  inset-inline-end: var(--lf-comment-send-inset);
  inset-block-end: var(--lf-comment-send-inset);
}
.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[hidden] {
  display: none;
}
.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,
.lf-fab-bar:not(.lf-response-open) > .lf-response-options {
  display: none !important;
}
.lf-fab-bar.lf-response-open {
  flex-wrap: wrap;
}
.lf-fab-bar.lf-response-open > .lf-response-options {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}
.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-fab-bar {
  font: var(--t-5)/1.5 var(--sans);
}
.lf-fab-bar[data-lf-presentation=inline] {
  display: inline-flex;
  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] .lf-composer {
  display: contents;
}
.lf-fab-bar[data-lf-presentation=inline] .lf-composer > :not(.lf-compose-field, .lf-composer-media) {
  display: none !important;
}
.lf-fab-bar[data-lf-presentation=inline] leaf-text.lf-fab-input {
  display: block;
  max-width: none;
  max-height: 50vh;
  margin: 0;
}
.lf-fab-bar[data-lf-presentation=inline].lf-response-open > .lf-response-options {
  flex-basis: 100%;
}
.lf-fab-bar[data-lf-presentation=inline] > .lf-surface-grip {
  display: none;
}
.lf-fab-bar .lf-composer-media {
  flex: none;
  max-width: 148px;
  padding: 0;
}
.lf-fab-bar .lf-composer-media:has(> .lf-composer-drawing) {
  --lf-drawing-preview-width: 96px;
  max-width: calc(var(--lf-drawing-preview-width) + 2 * max(26px, var(--aim-floor)) + 2px);
}
.lf-fab-bar .lf-composer-media-open {
  width: 42px;
  height: 34px;
}
.lf-fab-bar .lf-composer-drawing > .lf-composer-media-open {
  width: var(--lf-drawing-preview-width);
  height: 64px;
}
@media print {
  .lf-fab-bar[data-lf-presentation=inline] {
    display: none !important;
  }
}
@media (forced-colors: active) {
  .lf-response-control[data-lf-focus] {
    outline: var(--focus-ring-w) solid Highlight;
    outline-offset: 2px;
    filter: none;
  }
}

/* skills/leaf/assets/styles/components/integration.css */
.lf-message-media img {
  display: block;
  max-width: 100%;
  max-height: min(60vh, 480px);
  border-radius: var(--r);
}
:is(.lf-btn, .button):is(.on, [aria-pressed=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) {
  :host * {
    cursor: crosshair !important;
  }
  :host [data-lf-runtime],
  :host [data-lf-runtime] * {
    cursor: auto !important;
  }
}
:root {
  --lf-code-copy-size: max(32px, var(--aim-floor));
  --lf-code-copy-inset: 4px;
}
.lf-code-copy {
  position: absolute;
  top: calc(anchor(top, -9999px) + var(--lf-code-copy-inset));
  left: calc(anchor(right, -9999px) - var(--lf-code-copy-size) - var(--lf-code-copy-inset));
  width: var(--lf-code-copy-size);
  height: var(--lf-code-copy-size);
  z-index: 1;
  white-space: normal;
  font-size: 0;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
}
.lf-code-copy.lf-code-copy-away {
  display: none;
}
:not(.lf-chrome):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-code-copy::part(button) {
  width: var(--lf-code-copy-size);
  height: var(--lf-code-copy-size);
  padding: 6px;
  border: 1px solid var(--code-border);
  border-radius: var(--r);
  background: var(--pre-bg);
  color: var(--muted);
  display: flex;
  font-size: var(--t-5);
}
.lf-code-copy::part(button):hover {
  color: var(--ink);
}
.lf-code-copy::part(lf-focus) {
  outline: var(--focus-ring);
  --lf-focus-ring: code-copy;
}
@media print {
  .lf-code-copy {
    display: none;
  }
}
.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: var(--lf-thread-body-extent, 0px);
}
.lf-reply-space {
  flex: 1 0 0;
  min-block-size: 0;
}
.lf-reply-continuity > .lf-thread-reply leaf-text:not(:state(placeholder-shown)) {
  block-size: var(--lf-reply-writing-room, auto);
}

/* skills/leaf/assets/styles/shadow.css */
}
@layer lf-base {
/* Generated from skills/leaf/assets/styles/theme.css by build/styles.mjs. */
/* skills/leaf/assets/styles/theme.css */
@property --lf-banner-rows { syntax: "<integer>"; inherits: true; initial-value: 1; }
@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-agent-arrival { syntax: "<time>"; inherits: true; initial-value: 520ms; }
@property --lf-thread-panel-default-width { syntax: "<length>"; inherits: true; initial-value: 420px; }
:root {
  --lf-banner-face: desk;
  position: static !important;
  color-scheme: light dark;
  --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-banner-row: max(42px, calc(var(--t-5) * var(--lf-ui-lh) + 19px), calc(var(--aim-floor) + 9px));
  --lf-banner-status-row: max(36px, calc(var(--t-5) * var(--lf-ui-lh) + 4px));
  --lf-banner-actions-w: calc(37 * var(--t-5));
  --lf-banner-rows: clamp(1, round(up, calc((var(--lf-banner-actions-w) + 4 * var(--t-5) + 220px + var(--lf-safe-left) + var(--lf-safe-right)) / 100vw)), 2);
  --lf-banner-h: calc(var(--lf-banner-status-row) * (var(--lf-banner-rows) - 1) + var(--lf-banner-row) + var(--lf-safe-top));
  --lf-bottom-bar-h: calc(44px + var(--lf-safe-bottom));
  --lf-bottom-status-bottom: calc(var(--lf-safe-bottom) + (var(--lf-bottom-bar-h) - var(--lf-safe-bottom)) / 2);
  --lf-bottom-status-translate: 0 50%;
  --lf-view-height: calc(100dvh - var(--lf-banner-h) - var(--lf-bottom-bar-h));
  --lf-top: var(--lf-banner-h);
  --lf-top-covered: calc(var(--lf-banner-h) + 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-surface: 8900;
  --lf-z-margin-preview: 8920;
  --lf-z-region-capture: 8930;
  --lf-z-shortcut-bar: 8940;
  --lf-z-banner: 9000;
  --lf-z-scrim: 9010;
  --lf-z-covering-surface: 9020;
  --lf-z-covering-band: 9025;
  --lf-z-bottom-status: 9030;
  --lf-z-escaped-control: 9050;
  --lf-z-chrome-paint: 9060;
  --lf-z-key-badges: 9070;
  --lf-z-page-search: 9080;
  --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(var(--accent), #4d74a8);
  --pin-on-user: light-dark(#2f7d45, #2d8047);
  --r: 6px;
  --chip-r: 3px;
  --chip-pad: 0 8px;
  --chip-lh: 1.6;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --aim-floor: 24px;
  --entry-floor: 0px;
  --margin-entry: max(32px, var(--aim-floor));
  --pin-inset: 4px;
  --rail: calc(2 * var(--margin-entry) + 4px + 22px + 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: 10px 14px;
  --pane-inset: 14px;
  --wide: 1080px;
  --wide-page-max: 1600px;
  --lf-ui-lh: 1.45;
  --details-padding-block: 8px;
  --details-margin-block: 18px;
  --details-border: 1px;
  --h2-start: 48px;
  --h3-start: 32px;
  --figure-margin-block: 22px;
  --callout-margin-block: 18px;
  --hr-margin-block: 40px;
  --t-6: 11.5px;
  --t-working-label: 13px;
  --t-5: 14px;
  --t-4: 17px;
  --t-3: 20px;
  --t-2: 24px;
  --t-1: 31px;
  --code-size: 12.5px;
  --code-line: 19px;
  --code-inline-size: 82%;
  --code-inline-pad: 1px 5px;
  --code-inline-r: 4px;
  --quote-rule: 2px solid var(--rule);
  --quote-style: italic;
  --quote-inset: 18px;
  --pre-inset: 14px;
  --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 / .14), rgb(0 0 0 / .55));
  --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-shadow: inset 0 0 0 100px color-mix(in srgb, var(--ink) 7%, transparent);
  --focus-ring-w: 2px;
  --focus-ring: var(--focus-ring-w) solid var(--accent);
  --focus-ring-gap: 3px;
  --focus-ring-room: calc(var(--focus-ring-w) + var(--focus-ring-gap));
  --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));
  --lf-key-badge-size: calc(round(var(--t-6) * 1.478 + 2px, 1px));
  --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);
}
@media screen and (width <= 480px) {
  :root {
    --lf-banner-face: phone;
    --lf-banner-row: max(52px, calc(var(--t-5) * var(--lf-ui-lh) + 19px), calc(var(--aim-floor) + 9px));
    --lf-banner-rows: 1;
  }
}
html:not([data-lf-live]) {
  --lf-banner-h: 0px;
  --lf-bottom-bar-h: 0px;
  --lf-bottom-status-bottom: calc(14px + var(--lf-safe-bottom));
  --lf-bottom-status-translate: none;
}
@media screen and (pointer: coarse) {
  :root {
    --lf-bottom-bar-h: 0px;
    --lf-bottom-status-bottom: calc(14px + var(--lf-safe-bottom));
    --lf-bottom-status-translate: none;
  }
}
html[data-lf-live][data-lf-floating-chrome] {
  --lf-floating-row: max(48px, calc(var(--aim-floor) + 8px));
  --lf-floating-gap: 14px;
  --lf-banner-h: var(--lf-safe-top);
  --lf-bottom-bar-h: calc(var(--lf-floating-row) + 2 * var(--lf-floating-gap) + var(--lf-safe-bottom));
  --lf-bottom-status-bottom: calc(var(--lf-bottom-bar-h) + 4px);
  --lf-bottom-status-translate: none;
}
@media (pointer: coarse) {
  :root {
    --aim-floor: 44px;
    --entry-floor: 16px;
  }
}
@property --lf-focus-ring { syntax: "<custom-ident>"; inherits: false; initial-value: none; }
@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; }
@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;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-4)/1.6 var(--serif);
  overflow-wrap: break-word;
  container: lf-shell / inline-size;
}
html {
  background: var(--paper);
}
@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(var(--lf-bottom-bar-h) + max(12px, var(--focus-ring-room)));
    body {
      padding-bottom: var(--lf-bottom-bar-h);
    }
    body::before {
      content: "";
      display: block;
      height: var(--lf-banner-h);
    }
  }
  html[data-lf-live][data-lf-sample-block] {
    --lf-banner-row: 48px;
    --lf-banner-rows: 1;
    --lf-bottom-bar-h: 0px;
    --lf-bottom-status-bottom: calc(14px + var(--lf-safe-bottom));
    --lf-bottom-status-translate: none;
    overflow-y: hidden;
    --page-pad-start: 24px;
    --page-pad-end: 24px;
  }
}
@media screen {
  html[data-lf-live][data-lf-covering-surface] {
    overflow-y: hidden;
  }
}
@property --lf-auxiliary-beside { syntax: "<length>"; inherits: false; initial-value: 0px; }
body {
  --lf-auxiliary-beside: clamp(0px, (100vw - var(--lf-auxiliary-width, 100vw) - 319.5px) * 1000000, var(--lf-auxiliary-width, 0px));
}
@media screen {
  html[data-lf-live] body:is([data-lf-auxiliary-surface=threads], [data-lf-auxiliary-surface=queue]) {
    --lf-auxiliary-width: var(--lf-thread-panel-width, var(--lf-thread-panel-default-width));
  }
}
[data-lf-prepaint] {
  visibility: hidden;
}
.lf-markdown-body[data-lf-prepaint] {
  visibility: visible;
}
:has(> .lf-markdown-body[data-lf-prepaint]) > pre {
  display: none;
}
html:not([data-lf-interactive]) [data-lf-prepaint]:not(.lf-markdown-body) {
  display: none;
}
@layer {
  @media screen {
    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-bottom-status);
  pointer-events: none;
  right: calc(18px + var(--lf-safe-right));
  bottom: var(--lf-bottom-status-bottom);
  translate: var(--lf-bottom-status-translate);
  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; }
.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: 6px;
  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) {
  box-sizing: border-box;
  min-height: max(var(--aim-floor), calc(1em * var(--lf-ui-lh) + 10px));
  padding: 4px 8px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
}
: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)[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: text-box;
  outline-offset: 0;
  border-color: transparent;
}
.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],
:is(textarea, leaf-text).lf-ui:where(:not(.lf-fab-input))[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: text-box;
  outline-offset: 0;
  border-color: transparent;
}
main {
  position: relative;
  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 --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; }
@media screen {
  :where(p, li, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6, [data-lf-space=column]) {
    max-inline-size: var(--lf-measure);
  }
  :where([data-lf-space=column]) {
    box-sizing: border-box;
    --lf-reach: min(var(--lf-measure), var(--lf-room, 0px));
  }
  :where([data-lf-space=column]:has(> [data-lf-space=wide])) {
    max-inline-size: max(var(--lf-measure), var(--wide));
  }
  :where([data-lf-space=column]:has(> [data-lf-space=available])) {
    max-inline-size: none;
  }
  [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;
  }
}
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;
}
@container style(--lf-wide-page: 1) {
  h1 {
    font-size: clamp(36px, 3.2cqi, 46px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
}
p {
  margin: 13px 0;
}
.density-working {
  --lf-density: working;
  --t-1: 22px;
  --t-2: 18px;
  --t-3: 15.5px;
  --t-4: 14px;
  --t-5: 12.5px;
  --t-6: 10.5px;
  --t-working-label: 12px;
  --sp-1: 3px;
  --sp-2: 6px;
  --sp-3: 10px;
  --sp-4: 14px;
  --code-size: 12px;
  --code-line: 17px;
  --lf-key-badge-size: calc(round(var(--t-6) * 1.478 + 2px, 1px));
  --pane-bar-pad: 6px 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;
}
:where(.density-working) :is(p, ul, ol) {
  margin-block: 6px;
}
:where(.density-working) li {
  margin-block: 3px;
}
:where(.density-working) h2 {
  margin-block-end: 6px;
}
:where(.density-working) h3 {
  margin-block-end: 4px;
}
:where(.density-working) h4 {
  margin: 10px 0 4px;
}
:where(.density-working) :is(th, td) {
  padding: 4px 10px;
}
figure {
  margin: var(--figure-margin-block) 0;
}
figcaption {
  font-size: var(--t-6);
  color: var(--muted);
  margin-top: 8px;
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
}
img {
  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
}
img {
  box-shadow: 0 0 0 1px var(--border-2), 0 2px 8px var(--shade);
}
details {
  border: var(--details-border) solid var(--rule);
  border-radius: var(--r);
  padding: var(--details-padding-block) 14px;
  margin: var(--details-margin-block) 0;
  --lf-block-frame: 1;
}
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;
}
.eyebrow,
.tag,
figcaption,
caption,
th:not([scope=row]),
.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);
}
.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;
}
.eyebrow {
  font-size: var(--t-6);
  letter-spacing: .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 {
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 12px 16px;
  margin: var(--callout-margin-block) 0;
  --lf-block-frame: 1;
}
section.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 14px 18px 16px;
  margin: 18px 0;
  --lf-block-frame: 1;
}
section.panel > :is(h2, h3):first-child {
  margin: 0 0 10px;
  font: 600 var(--t-6)/1.3 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
section.panel > :last-child {
  margin-bottom: 0;
}
.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) {
  background: var(--lf-tone-tint);
  border-color: color-mix(in srgb, var(--lf-tone-ink) 22%, transparent);
}
.callout:is(.ok, .warn, .danger) > strong:first-child {
  color: var(--lf-tone-ink);
}
aside.sidebar {
  display: flow-root;
  margin: var(--sp-4) 0 30px;
}
aside.sidebar > :first-child {
  margin-top: 0;
}
aside.sidebar > :last-child {
  margin-bottom: 0;
}
main > aside.sidebar:nth-child(1 of aside.sidebar) {
  --lf-sidebar-slot: margin;
}
aside.sidenote {
  font-size: var(--t-5);
  line-height: 1.45;
  color: var(--muted);
  margin: 12px 0 12px var(--sp-4);
}
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  margin: 14px 0;
}
.facts dt {
  color: var(--muted);
  font-weight: 400;
  font-size: var(--t-5);
}
.facts dd {
  margin: 0;
}
@media screen {
  @container (width <= 640px) {
    .facts {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }
    .facts dd + dt {
      margin-top: var(--sp-2);
    }
  }
}
th.num,
td.num {
  text-align: right;
}
ol.steps {
  list-style: none;
  counter-reset: step;
  padding-inline-start: 0;
}
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 34px;
  margin: 10px 0;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.5lh;
  transform: translateY(-50%);
  line-height: 1lh;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--card);
  font-size: 12px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
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: .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);
}
@media screen {
  html:root {
    .lf-thread-seat:not([hidden]) {
      display: block;
    }
    .lf-say:not([hidden]) {
      display: flex;
    }
  }
}
lf-suggestion {
  display: inline;
}
lf-old,
lf-new {
  border-radius: 3px;
  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;
  padding: 0;
}
.lf-margin-entry > :is(.lf-margin-entry-space, .lf-margin-entry-label) {
  display: none;
}
.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: 50%;
  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-room);
}
.lf-margin-entry[hidden] {
  display: none;
}
.lf-margin-entry[data-lf-behavior=action] {
  border-width: 2px;
  color: var(--lf-entry-ink, var(--ink));
  box-shadow: 0 1px 0 var(--border-2), 0 3px 6px var(--shade);
}
.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] {
  outline: var(--focus-ring);
  --lf-focus-ring: margin-entry;
  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: 0 1px 0 var(--border-2), 0 3px 6px var(--shade);
}
: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: 0 1px 0 var(--border-2), 0 3px 6px var(--shade);
}
.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);
}
.lf-margin-entry-glyph {
  line-height: 1;
}
.lf-margin-entry-icon {
  inline-size: 16px;
  block-size: 16px;
}
.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: 4px 7px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font: 500 var(--t-6)/1.2 var(--sans);
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 8px var(--shade);
  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 {
  display: block;
}
.lf-margin-entry-label-word {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-margin-entry-context {
  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-projection .lf-margin-entry[data-lf-label-side] > .lf-margin-entry-label {
  inset: auto;
  left: var(--lf-label-x);
  top: var(--lf-label-y);
}
.lf-margin-entry:is(:hover, [data-lf-focus]):not([aria-expanded=true]) > .lf-margin-entry-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 90ms;
}
.lf-margin-entry[data-lf-held-word] > .lf-margin-entry-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: none;
}
.lf-margin-entry[data-lf-focus]:not([aria-expanded=true]) > .lf-margin-entry-label {
  transition: none;
}
.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] {
  outline: none;
}
[data-lf-reading-role=pane]:has(> :not(header, footer)[data-lf-focus])::after {
  content: "";
  grid-row: 2;
  grid-column: 1;
  z-index: 1;
  pointer-events: none;
  outline: var(--focus-ring);
  --lf-focus-ring: pane-body;
  outline-offset: calc(-1 * var(--focus-ring-w));
}
:where([data-lf-reading-role=pane]) {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper);
}
: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;
  font: 600 var(--t-6)/1.3 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
: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) var(--pane-inset);
  container-type: inline-size;
  --lf-block-frame: 1;
}
.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: 0 8px 24px var(--shade);
}
}
@layer lf-base {
@scope (: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-sample, lf-shot, lf-tab, lf-tabs, lf-tally, lf-text-document, lf-toc)) {
/* Generated from skills/leaf/packages/default/styles/theme.css by build/styles.mjs. */
/* skills/leaf/packages/default/styles/shot.css */
:scope:is(lf-shot) {
  display: block;
  margin: 16px 0;
  container: lf-shot / inline-size;
  --lf-shot-rail-size: max(34px, var(--aim-floor));
}
:scope:is(lf-shot):has(.lf-shotframe) {
  display: grid;
}
@scope (html[data-lf-interactive] :scope) {
  :scope:is(lf-shot):not(:has(> .lf-shotrail)) {
    &::before {
      content: "";
      display: block;
      height: var(--lf-shot-rail-size);
      border: 1px solid var(--rule);
      border-bottom: 0;
      border-radius: var(--r) var(--r) 0 0;
      background: var(--card);
    }
    &::after {
      content: "";
      display: block;
      box-sizing: border-box;
      aspect-ratio: attr(data-lf-media-width type(<number>)) / attr(data-lf-media-height type(<number>));
      border: 1px solid var(--rule);
      border-radius: 0 0 var(--r) var(--r);
      background: var(--card);
    }
  }
}
:scope:is(lf-shot) .lf-shotcomparison {
  grid-area: 2 / 1;
  aspect-ratio: var(--lf-shot-ratio);
  border: 1px solid var(--rule);
  border-radius: 0 0 var(--r) var(--r);
  background: var(--card);
  --divider-width: 2px;
  --handle-size: 38px;
  --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-focus-ring: shot;
}
:scope:is(lf-shot) .lf-shotcomparison::part(divider) {
  background: color-mix(in srgb, var(--ink-2) 48%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--card) 72%, transparent);
  transition: background-color 120ms ease;
}
:scope:is(lf-shot) .lf-shotcomparison::part(handle) {
  border: 1px solid var(--ink-2);
  box-shadow: 0 1px 3px var(--shade);
  opacity: .52;
  scale: .88;
  transition: opacity 120ms ease, scale 120ms ease;
}
:scope:is(lf-shot) .lf-shot-handle {
  display: block;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
}
:scope:is(lf-shot) .lf-shotcomparison::part(before),
:scope:is(lf-shot) .lf-shotcomparison::part(after) {
  cursor: pointer;
}
:scope:is(lf-shot) .lf-shotcomparison:is(:hover, [data-lf-focus-within], :state(dragging))::part(divider) {
  background: var(--ink-2);
}
:scope:is(lf-shot) .lf-shotcomparison:is(:hover, [data-lf-focus-within], :state(dragging))::part(handle) {
  opacity: 1;
  scale: 1;
}
:scope:is(lf-shot) .lf-shotcomparison:is([position="0"], [position="100"]):not(:hover, [data-lf-focus-within])::part(handle) {
  opacity: .18;
  scale: .68;
}
:scope:is(lf-shot) .lf-shotframe {
  position: relative;
  overflow: clip;
  background: var(--card);
}
:scope:is(lf-shot) .lf-shotframe img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--card);
}
:scope:is(lf-shot) .lf-shotrail {
  display: grid;
  grid-area: 1 / 1;
  align-items: center;
  grid-template: var(--lf-shot-rail-size) / auto auto minmax(0, 1fr) auto auto;
  height: var(--lf-shot-rail-size);
  padding: 0;
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  color: var(--muted);
  background: var(--card);
}
@media screen {
  :scope:is(lf-shot) {
    --lf-top-outer: var(--lf-top);
  }
  :scope:is(lf-shot) > .lf-shotrail {
    position: sticky;
    top: var(--lf-top);
    z-index: 1;
    --lf-head-inset: 1px;
  }
  :scope:is(lf-shot):not([data-lf-shot-controls=off]):has(> .lf-shotrail) > :is(.lf-shotcomparison, .lf-shotframe) {
    --lf-top: calc(var(--lf-top-outer) + var(--lf-shot-rail-size) + 1px);
  }
}
:scope:is(lf-shot) .lf-shotcap {
  display: flex;
  align-items: center;
  align-self: stretch;
  font-size: var(--t-6);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 5px;
  color: var(--muted);
}
:scope:is(lf-shot) .lf-shotcap[data-lf-state=before] {
  grid-column: 1;
  border-start-start-radius: calc(var(--r) - 1px);
}
:scope:is(lf-shot) .lf-shot-open[data-lf-shot-open=before] {
  grid-column: 2;
}
:scope:is(lf-shot) .lf-shot-open[data-lf-shot-open=after] {
  grid-column: 4;
}
:scope:is(lf-shot) .lf-shotcap[data-lf-state=after] {
  grid-column: 5;
  border-start-end-radius: calc(var(--r) - 1px);
}
:scope:is(lf-shot) .lf-shot-open {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: max(28px, var(--aim-floor));
  color: var(--muted);
}
:scope:is(lf-shot) .lf-shot-open:hover {
  color: var(--ink);
  background: var(--chip);
}
:scope:is(lf-shot) .lf-shotdelta {
  grid-area: 1 / 3;
  justify-self: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-inline: 4px;
  text-align: center;
  line-height: 1.2;
}
:scope:is(lf-shot) .lf-shotviews {
  display: flex;
  align-items: center;
  gap: 12px;
}
:scope:is(lf-shot) .lf-shotview {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  min-width: var(--aim-floor);
  min-height: var(--lf-shot-rail-size);
  cursor: pointer;
  color: var(--muted);
  font: 700 10px/14px var(--sans);
  white-space: nowrap;
  outline-offset: 1px;
}
:scope:is(lf-shot) .lf-shotview[aria-checked=true] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
:scope:is(lf-shot) .lf-shotview:hover {
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
:scope:is(lf-shot) .lf-shotoutlines {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}
:scope:is(lf-shot) .lf-shotoutlines:is(:hover, [data-lf-focus], [data-lf-held-word])::after {
  content: attr(aria-description);
  position: absolute;
  z-index: 2;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100cqi - 24px);
  box-sizing: border-box;
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 2px 8px var(--shade);
  font: 500 var(--t-6)/1.2 var(--sans);
  white-space: normal;
  pointer-events: none;
}
@media screen {
  @container lf-shot (width < 400px) {
    :scope:is(lf-shot):is([outlines], [pixels]) > .lf-shotrail {
      grid-template-rows: repeat(2, var(--lf-shot-rail-size));
      height: calc(2 * var(--lf-shot-rail-size));
    }
    :scope:is(lf-shot):is([outlines], [pixels]) .lf-shotdelta {
      grid-area: 2 / 1 / 3 / -1;
    }
    :scope:is(lf-shot):is([outlines], [pixels]):not([data-lf-shot-controls=off]):has(> .lf-shotrail) > :is(.lf-shotcomparison, .lf-shotframe) {
      --lf-top: calc(var(--lf-top-outer) + 2 * var(--lf-shot-rail-size) + 1px);
    }
    :scope:is(lf-shot):is([outlines], [pixels]):not(:has(> .lf-shotrail))::before {
      height: calc(2 * var(--lf-shot-rail-size));
    }
  }
}
:scope:is(lf-shot) .lf-shotcap[data-lf-state] {
  outline-offset: -2px;
}
:scope:is(lf-shot) .lf-shotcap[data-lf-state=before] {
  --lf-shot-side-tint: var(--del-tint);
  --lf-shot-side-ink: var(--danger-ink);
}
:scope:is(lf-shot) .lf-shotcap[data-lf-state=after] {
  --lf-shot-side-tint: var(--add-tint);
  --lf-shot-side-ink: var(--ok-ink);
}
:scope:is(lf-shot) .lf-shotcap:hover {
  background: var(--chip);
}
:scope:is(lf-shot) .lf-shotcap[aria-pressed=true] {
  color: var(--lf-shot-side-ink);
  background: var(--lf-shot-side-tint);
  box-shadow: inset 0 -3px var(--lf-shot-side-ink);
}
:scope:is(lf-shot) .lf-shotcap[aria-pressed=false] {
  color: var(--muted);
  box-shadow: none;
}
:scope:is(lf-shot):not([data-lf-shot-view=pixels], :has(.lf-shotcap[aria-pressed=true])) .lf-shotcap {
  color: var(--lf-shot-side-ink);
}
:scope:is(lf-shot) .lf-shotdiff {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: var(--lf-shot-ratio);
  pointer-events: none;
}
:scope:is(lf-shot) .lf-shotdiff > span {
  position: absolute;
  left: max(0px, calc(var(--lf-shot-x) - 4px));
  top: max(0px, calc(var(--lf-shot-y) - 4px));
  right: max(0px, calc(100% - var(--lf-shot-x) - var(--lf-shot-w) - 4px));
  bottom: max(0px, calc(100% - var(--lf-shot-y) - var(--lf-shot-h) - 4px));
  border: 2px solid var(--warn);
  border-radius: 2px;
}
:scope:is(lf-shot) .lf-shotdiff > span[data-lf-shot-mark=moved] {
  border-style: dashed;
  border-color: var(--accent);
}
:scope:is(lf-shot) .lf-shotdelta {
  font-size: var(--t-6);
  color: var(--muted);
}
:scope:is(lf-shot) .lf-shotdelta:is([data-lf-shot-delta=identical], [data-lf-shot-delta=slight]) {
  color: var(--warn-ink);
  font-weight: 650;
}
:scope:is(lf-shot):not([data-lf-shot-view=outlines]) .lf-shotdiff,
:scope:is(lf-shot):not([outlines], [pixels]) .lf-shotdelta[data-lf-shot-delta=areas] {
  display: none;
}
:scope:is(lf-shot) > .lf-shotpixels {
  display: none;
  position: relative;
  grid-area: 2 / 1;
  z-index: 1;
  overflow: clip;
  cursor: pointer;
  border: 1px solid var(--rule);
  border-radius: 0 0 var(--r) var(--r);
  background: var(--card);
}
:scope:is(lf-shot)[data-lf-shot-view=pixels] > .lf-shotpixels {
  display: block;
}
:scope:is(lf-shot) > .lf-shotpixels > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  filter: grayscale(1);
  opacity: .28;
}
:scope:is(lf-shot) > .lf-shotpixels > span {
  position: absolute;
  inset: 0;
  background: var(--warn);
  mask: var(--lf-shot-pixels, linear-gradient(transparent, transparent)) 0 0 / 100% 100% no-repeat;
}
:scope:is(lf-shot) > .lf-shotpixels > span[data-lf-shot-side=before] {
  background: var(--danger);
}
:scope:is(lf-shot) > .lf-shotpixels > span[data-lf-shot-side=after] {
  background: var(--accent);
}
:scope:is(lf-shot) > input.lf-shotflip {
  display: none;
  grid-area: 2 / 1;
  z-index: 2;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  opacity: 0;
  cursor: pointer;
}
:scope:is(lf-shot):not([data-lf-shot-mode=compare], [data-lf-shot-mode=overlay]):not(:has(> .lf-shotcomparison)) > .lf-shotframe {
  grid-area: 2 / 1;
  border: 1px solid var(--rule);
  border-radius: 0 0 var(--r) var(--r);
}
:scope:is(lf-shot):not([data-lf-shot-mode=compare], [data-lf-shot-mode=overlay]):not(:has(> .lf-shotcomparison)) > .lf-shotframe[data-lf-state=after] {
  visibility: hidden;
}
:scope:is(lf-shot):not([data-lf-shot-mode=compare], [data-lf-shot-mode=overlay]):not(:has(> .lf-shotcomparison)):has(input:checked) > .lf-shotframe[data-lf-state=before] {
  visibility: hidden;
}
:scope:is(lf-shot):not([data-lf-shot-mode=compare], [data-lf-shot-mode=overlay]):not(:has(> .lf-shotcomparison)):has(input:checked) > .lf-shotframe[data-lf-state=after] {
  visibility: visible;
}
:scope:is(lf-shot):not(:has(> .lf-shotcomparison)) > input.lf-shotflip {
  display: block;
}
:scope:is(lf-shot):has(> input.lf-shotflip[data-lf-focus]) {
  outline: var(--focus-ring);
  --lf-focus-ring: shot;
  outline-offset: 1px;
  border-radius: var(--r);
}
@media print {
  :scope:is(lf-shot),
  :scope:is(lf-shot):has(.lf-shotframe) {
    display: block !important;
  }
  :scope:is(lf-shot) > .lf-shotrail {
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--sp-2);
  }
  :scope:is(lf-shot) .lf-shotcap {
    color: var(--ink) !important;
    background: none !important;
    box-shadow: none !important;
  }
  :scope:is(lf-shot) .lf-shotcap[data-lf-state=before]::after {
    content: " · top";
  }
  :scope:is(lf-shot) .lf-shotcap[data-lf-state=after]::after {
    content: " · bottom";
  }
  :scope:is(lf-shot) > input.lf-shotflip,
  :scope:is(lf-shot) > .lf-shotpixels {
    display: none !important;
  }
  :scope:is(lf-shot) > .lf-shotrail {
    height: auto;
  }
  :scope:is(lf-shot) > .lf-shotcomparison {
    display: block;
    aspect-ratio: auto;
    border: 0;
    overflow: visible;
  }
  :scope:is(lf-shot) > .lf-shotcomparison::part(comparison) {
    display: flex;
    flex-direction: column-reverse;
  }
  :scope:is(lf-shot) > .lf-shotcomparison::part(before),
  :scope:is(lf-shot) > .lf-shotcomparison::part(after) {
    position: relative;
    width: auto;
    height: auto;
    clip-path: none !important;
  }
  :scope:is(lf-shot) > .lf-shotcomparison::part(divider) {
    display: none;
  }
  :scope:is(lf-shot) .lf-shotframe {
    visibility: visible !important;
    margin-bottom: var(--sp-2);
    border: 1px solid var(--rule);
    border-radius: var(--r);
  }
}
@property --lf-shot-frame-border { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --lf-shot-label-height { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --lf-shot-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
:scope:is(lf-shot) {
  --lf-shot-frame-border: 1px;
  --lf-shot-label-height: 24px;
  --lf-shot-gap: var(--sp-2);
}
:scope:is(lf-shot)[data-lf-shot-mode] {
  margin: 0;
  width: calc(var(--lf-shot-frame-width, calc(100% - 2 * var(--lf-shot-frame-border))) + 2 * var(--lf-shot-frame-border));
  max-width: none;
}
:scope:is(lf-shot)[data-lf-shot-mode] .lf-shotcomparison {
  border-width: var(--lf-shot-frame-border);
}
@media screen {
  :scope:is(lf-shot)[data-lf-shot-mode=compare],
  :scope:is(lf-shot)[data-lf-shot-mode=overlay] {
    display: grid;
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare][data-lf-shot-layout=side] {
    grid-template-columns: repeat(2, calc(var(--lf-shot-frame-width) + 2 * var(--lf-shot-frame-border)));
    gap: var(--lf-shot-gap);
    width: max-content;
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare][data-lf-shot-layout=stack],
  :scope:is(lf-shot)[data-lf-shot-mode=overlay] {
    grid-template-columns: calc(var(--lf-shot-frame-width) + 2 * var(--lf-shot-frame-border));
  }
  :scope:is(lf-shot)[data-lf-shot-mode]:not([data-lf-shot-mode=flip]) .lf-shotrail,
  :scope:is(lf-shot)[data-lf-shot-mode]:not([data-lf-shot-mode=flip]) .lf-shotflip {
    display: none;
  }
  :scope:is(lf-shot)[data-lf-shot-mode]:not([data-lf-shot-mode=flip]) .lf-shotframe {
    border: var(--lf-shot-frame-border) solid var(--rule);
    display: grid;
    visibility: visible;
    border-radius: var(--r);
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare][data-lf-shot-layout=side] .lf-shotframe {
    grid-row: 1;
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare][data-lf-shot-layout=side] .lf-shotframe[data-lf-state=before] {
    grid-column: 1;
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare][data-lf-shot-layout=side] .lf-shotframe[data-lf-state=after] {
    grid-column: 2;
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare][data-lf-shot-layout=stack] .lf-shotframe {
    grid-column: 1;
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare][data-lf-shot-layout=stack] .lf-shotframe[data-lf-state=before] {
    grid-row: 1;
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare][data-lf-shot-layout=stack] .lf-shotframe[data-lf-state=after] {
    grid-row: 2;
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare] .lf-shot-frame-label {
    box-sizing: border-box;
    display: block;
    height: var(--lf-shot-label-height);
    padding: 5px 8px;
    border-bottom: 1px solid var(--rule);
    background: var(--card);
    color: var(--ink-2);
    font: 650 var(--t-6) / 1 var(--sans);
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare] .lf-shot-frame-label::before {
    content: attr(data-label);
  }
  :scope:is(lf-shot)[data-lf-shot-mode=overlay] .lf-shotframe {
    grid-row: 1;
    grid-column: 1;
  }
  :scope:is(lf-shot)[data-lf-shot-mode=overlay] .lf-shotframe[data-lf-state=after] {
    z-index: 1;
    opacity: var(--lf-shot-opacity);
  }
  :scope:is(lf-shot) .lf-shotframe img {
    width: 100%;
    max-width: none;
  }
  :scope:is(lf-shot)[data-lf-shot-crop=true] .lf-shotframe {
    height: var(--lf-shot-focus-height);
  }
  :scope:is(lf-shot)[data-lf-shot-crop=true] .lf-shotcomparison {
    aspect-ratio: auto;
    height: var(--lf-shot-focus-height);
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare][data-lf-shot-crop=true] .lf-shotframe {
    height: calc(var(--lf-shot-focus-height) + var(--lf-shot-label-height));
    grid-template-rows: var(--lf-shot-label-height) var(--lf-shot-focus-height);
  }
  :scope:is(lf-shot)[data-lf-shot-crop=true] .lf-shotframe img {
    width: var(--lf-shot-focus-width);
    height: var(--lf-shot-focus-height);
    object-view-box: var(--lf-shot-focus-view);
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare] .lf-shotdiff {
    top: var(--lf-shot-label-height);
  }
  :scope:is(lf-shot)[data-lf-shot-crop=true] .lf-shotdiff {
    display: none;
  }
  :scope:is(lf-shot)[data-lf-shot-focus=true][data-lf-shot-crop=false] .lf-shotframe::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: var(--lf-shot-focus-y);
    left: var(--lf-shot-focus-x);
    box-sizing: border-box;
    width: var(--lf-shot-focus-width);
    height: var(--lf-shot-focus-height);
    border: 2px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    pointer-events: none;
  }
  :scope:is(lf-shot)[data-lf-shot-mode=compare][data-lf-shot-focus=true][data-lf-shot-crop=false] .lf-shotframe::after {
    top: calc(var(--lf-shot-focus-y) + var(--lf-shot-label-height));
  }
}
@media print {
  :scope:is(lf-shot)[data-lf-shot-mode] {
    width: min(100%, var(--lf-shot-capture-width, 100%));
    max-width: 100%;
  }
  .lf-shot-frame-label {
    display: none !important;
  }
}

/* skills/leaf/packages/default/styles/gloss.css */
:scope:is(lf-gloss) {
  display: inline;
}
:scope:is(lf-gloss)[tip]::after {
  content: " (" attr(tip) ")";
  color: var(--muted);
}
@scope (html[data-lf-interactive] :scope) {
  :scope:is(lf-gloss)[tip]::after {
    content: none;
  }
}
:scope:is(lf-gloss):has(> [data-lf-said=tip])::after {
  content: none;
}
@media screen {
  :scope:is(lf-gloss) {
    text-decoration-line: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .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;
}
:scope:is(lf-gloss):has(> .lf-gloss-mark[data-lf-focus]) {
  outline: var(--focus-ring);
  --lf-focus-ring: gloss-mark;
  outline-offset: calc(-1 * var(--focus-ring-w));
}
.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: 0 10px 28px var(--shade);
  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 {
  :scope:is(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;
  }
  :scope:is(lf-gloss) > .lf-gloss-popover::before {
    content: " (";
  }
  :scope:is(lf-gloss) > .lf-gloss-popover::after {
    content: ")";
  }
}

/* skills/leaf/packages/default/styles/apparatus.css */
.lf-shotcap,
.lf-shotdelta,
:scope:is(lf-sample)::before,
:scope:is(lf-sample) > [data-lf-said=label],
:scope:is(lf-column)::before,
:scope:is(lf-column) > [data-lf-said=label],
:scope:is(lf-tab)::before {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

/* skills/leaf/packages/default/styles/options.css */
@property --lf-options-across { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --lf-option-line { syntax: "<length>"; inherits: true; initial-value: 0px; }
:scope:is(lf-options) {
  display: block;
  margin: 14px 0;
  --lf-joined: 0;
  --lf-option-font: var(--t-4)/1.6 var(--serif);
  --lf-option-line: 1lh;
  container-type: inline-size;
}
:scope:is(lf-options):not(:has(> lf-option > strong)) {
  --lf-option-font: var(--t-5)/1.5 var(--sans);
  font: var(--lf-option-font);
}
:scope:is(lf-option) {
  display: block;
  position: relative;
}
:scope:is(lf-option) > .lf-markdown-words,
:scope:is(lf-option) > .lf-option-words {
  white-space: normal;
}
:scope:is(lf-options):has(> lf-option > strong) > lf-option {
  padding: var(--sp-3);
  --lf-block-frame: 1;
  --lf-lift: 0 0 #0000;
  box-shadow: var(--lf-lift);
}
@container style(--lf-joined: 0) {
  :scope:is(lf-options):has(> lf-option > strong) > lf-option {
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--card);
  }
  :scope:is(lf-options):has(> lf-option > strong) > .lf-another {
    border: 1px solid transparent;
  }
}
@container not (style(--lf-density: working) and (width >= 30rem)) {
  :scope:is(lf-option) > strong {
    display: block;
    margin: 0 0 4px;
  }
}
@container style(--lf-density: working) and (width >= 30rem) {
  :scope:is(lf-options):has(> lf-option > strong) > lf-option {
    & > strong {
      margin-inline-end: .35em;
    }
    & > .tag {
      float: inline-end;
      margin: 0 0 0 6px;
    }
  }
}
:scope:is(lf-option) > .tag {
  margin: 0 6px 2px 0;
}
:scope:is(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 > .facts {
    display: block;
    margin: 0 0 var(--sp-2);
    --lf-block-frame: 1;
  }
  @container (min-width: calc(9.5em + 16px + 20em)) {
    & > lf-option > .facts {
      float: right;
      clear: right;
      width: 9.5em;
      margin: 0 0 var(--sp-2) var(--sp-3);
    }
  }
  & > lf-option > .facts dt {
    color: var(--muted);
    font-size: var(--t-6);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 400;
    margin-top: 6px;
    padding: 0;
  }
  & > lf-option > .facts dd {
    font-size: var(--t-5);
    margin: 0;
  }
}
@container style(--lf-joined: 0) {
  :scope:is(lf-options):has(> lf-option > strong) > lf-option[chosen] {
    border-color: var(--ok);
  }
}
@media screen {
  :scope:is(lf-options)[choose]:not(:where([data-lf-exhibit]) *) > lf-option {
    cursor: pointer;
  }
  @container style(--lf-joined: 0) {
    :scope:is(lf-options)[choose]:not(:where([data-lf-exhibit]) *) > lf-option {
      transition: box-shadow .12s ease, transform .12s ease;
    }
    :scope:is(lf-options)[choose]:not(:where([data-lf-exhibit]) *):has(> lf-option > strong) > lf-option:hover {
      transform: translateY(-1px);
      --lf-lift: 0 3px 10px var(--shade);
    }
  }
}
:scope:is(lf-options):has(> lf-option > strong) > lf-option[chosen] {
  padding-bottom: 32px;
}
:scope:is(lf-options):has(> lf-option > strong) > lf-option > .lf-pick {
  position: absolute;
  left: var(--sp-3);
  bottom: 9px;
}
@media screen {
  :scope:is(lf-options)[choose]:not(:where([data-lf-exhibit]) *):has(> lf-option > strong) {
    --lf-card-state-room: 80px;
    --lf-card-state-height: 22px;
    & > :is(lf-option, .lf-another) {
      padding-inline-start: var(--sp-3);
    }
    & > lf-option {
      padding-bottom: var(--sp-3);
    }
    & > .lf-another:not([hidden]) {
      padding-block: var(--sp-3);
    }
    & > .lf-another > .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[chosen] > .lf-pick {
      padding: var(--chip-pad);
      border-radius: var(--chip-r);
      background: var(--ok);
      color: var(--card);
      font-size: var(--t-6);
      line-height: var(--chip-lh);
      gap: 4px;
    }
    & > lf-option[chosen] > .lf-pick::before {
      width: auto;
      height: auto;
      border: 0;
      background: transparent;
      color: inherit;
    }
    & > 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-add-seat-end: calc(var(--sp-3) + (var(--lf-option-line) - var(--lf-option-action-size)) / 2);
      --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;
    }
  }
}
:scope:is(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);
}
:scope:is(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);
}
:scope:is(lf-options):not([multiple]) > lf-option > .lf-pick::before {
  border-radius: 50%;
}
:scope:is(lf-options)[multiple] > lf-option > .lf-pick::before {
  border-radius: 3px;
}
:scope:is(lf-option) .lf-pick[role=checkbox] {
  cursor: pointer;
}
:scope:is(lf-option) .lf-pick:not([data-lf-said]) {
  font-size: 0;
  gap: 0;
}
@media screen {
  :scope:is(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);
  }
}
:scope:is(lf-option)[chosen] > .lf-pick {
  color: var(--ok-ink);
}
:scope:is(lf-option)[chosen] > .lf-pick::before {
  content: "✓";
  border-color: var(--ok);
  background: var(--ok);
}
@media print {
  :scope:is(lf-option)[chosen]::after {
    content: "✓";
    color: var(--ok-ink);
    font-family: var(--sans);
    font-weight: 700;
  }
}
:scope:is(lf-option) .lf-pick[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: options-pick;
  outline-offset: var(--focus-ring-gap);
  border-radius: 4px;
}
:scope:is(lf-option) > .lf-key-badge {
  position: absolute;
  z-index: 1;
  inset-inline-start: var(--lf-key-badge-start);
}
:scope:is(lf-options):has(> lf-option > strong) > lf-option > .lf-key-badge {
  top: 8px;
}
:scope:is(lf-options) > lf-options-done > .lf-done[aria-pressed=true] {
  color: var(--ok-ink);
  border-color: var(--ok);
  background: var(--ok-tint);
}
:scope:is(lf-options) > lf-options-done {
  position: relative;
  display: grid;
  padding: 0;
}
:scope:is(lf-options) > lf-options-done > .lf-done {
  width: 100%;
}
:scope:is(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(:scope:is(lf-options)[choose]:not(:where([data-lf-exhibit]) *)) > * {
    padding-inline-start: var(--lf-key-badge-col);
  }
  :where(:scope:is(lf-options)[choose]:not([settled]):not(:where([data-lf-exhibit]) *)) > * {
    padding-block: var(--sp-2);
    padding-inline-end: var(--sp-3);
  }
}
@media screen {
  :scope:is(lf-options)[choose]:not([settled]):not(:where([data-lf-exhibit]) *) {
    display: grid;
    background: var(--card);
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    overflow: clip;
    --lf-add-cell-height: calc(var(--lf-option-line) + 2 * 5px);
    --lf-done-cell-height: 32px;
    &:has(> lf-option > strong) {
      --lf-add-cell-height: calc(max(var(--lf-option-line), var(--lf-card-state-height)) + 2 * var(--sp-3));
    }
    &:not(:where(.lf-chrome *)):not(:has(> .lf-another)) {
      --lf-missing-cells: var(--lf-add-cell-height);
      --lf-missing-add: var(--lf-add-cell-height);
    }
    &[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);
        box-shadow: var(--lf-cell-rule);
      }
    }
    & > .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;
    & > * {
      margin-block: 0;
    }
    & > :not(lf-option) {
      grid-column: 1 / -1;
    }
    & .lf-btn[data-lf-focus] {
      outline-offset: calc(-1 * var(--focus-ring-w));
    }
    --lf-cell-rule: 0 0 0 1px var(--rule);
    & > * {
      box-shadow: var(--lf-cell-rule);
      --fill: var(--card);
      background-color: var(--fill);
    }
    & > lf-option:is(:hover, :has(> .lf-pick[data-lf-focus])) {
      background: color-mix(in srgb, var(--fill) 92%, var(--ink));
    }
    & > lf-option[chosen] {
      --fill: var(--ok-tint);
    }
    & > lf-option[chosen] > .tag.ok {
      background: var(--card);
    }
    & > lf-option > .lf-pick[data-lf-focus] {
      outline: none;
    }
  }
  @container style(--lf-options-across: 1) {
    :scope:is(lf-options)[choose]:not([settled]):not(:where([data-lf-exhibit]) *):has(> lf-option > strong) {
      --lf-option-count: 99;
      &: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(min(100%, max(14rem, 100% / var(--lf-option-count))), 1fr));
      max-inline-size: none;
    }
  }
  :is(:scope, :scope *)[data-lf-ask]:has(lf-options[choose]:not(:where([data-lf-exhibit]) *) [data-lf-focus]) {
    --lf-ask-ring: none;
  }
  :scope:is(lf-options)[choose]:not([settled]):not(:where([data-lf-exhibit]) *) > lf-option:has(> .lf-pick[data-lf-focus]) {
    outline: var(--focus-ring);
    --lf-focus-ring: options-row;
    outline-offset: calc(-1 * var(--focus-ring-w));
    z-index: 1;
  }
  :scope:is(lf-options)[choose]:not(:where([data-lf-exhibit]) *) > .lf-another:has(leaf-text[data-lf-focus]) {
    outline: var(--focus-ring);
    --lf-focus-ring: options-row;
    outline-offset: calc(-1 * var(--focus-ring-w));
    z-index: 1;
  }
  .lf-another {
    --lf-option-action-size: max(28px, var(--aim-floor));
    --lf-option-add-seat-inset: var(--sp-1);
    --lf-option-add-seat-end: var(--lf-option-add-seat-inset);
    --lf-option-add-badge-inset: calc(var(--lf-option-add-seat-inset) + (var(--lf-option-action-size) - var(--lf-key-badge-size)) / 2);
    --lf-option-add-badge-end: calc(var(--lf-option-add-seat-end) + (var(--lf-option-action-size) - var(--lf-key-badge-size)) / 2);
    --lf-option-write-badge-inset: calc(var(--lf-option-add-seat-inset) + var(--lf-option-action-size) + var(--sp-2));
    --lf-option-action-room: calc(var(--lf-option-add-seat-inset) + var(--lf-option-action-size) + var(--sp-2));
    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 > .lf-compose-field {
    --lf-icon-action-hit: var(--lf-option-action-size);
    --lf-compose-pad-block: 0px;
    --lf-compose-pad-inline-start: 0px;
    position: static;
  }
  .lf-another > .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: var(--lf-option-font);
    line-height: var(--lf-option-line);
    resize: none;
  }
  .lf-another .lf-compose-placeholder {
    font: var(--lf-option-font);
    line-height: var(--lf-option-line);
  }
  .lf-another .lf-compose-submit {
    --lf-icon-action-hit: var(--lf-option-action-size);
    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;
  }
  :scope:is(lf-options)[choose]:not(:where([data-lf-exhibit]) *) {
    --lf-key-badge-start: var(--sp-2);
    --lf-key-badge-col: calc(var(--lf-key-badge-start) + var(--lf-key-badge-size) + 6px);
  }
  :scope:is(lf-options)[choose]:not(:where([data-lf-exhibit]) *) > lf-option {
    padding-inline-start: var(--lf-key-badge-col);
  }
}
@media print {
  :scope:is(lf-options) > :is(.lf-another, lf-options-done) {
    display: none;
  }
}
:scope:is(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: 5px 0;
  --lf-block-frame: 1;
}
:scope:is(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);
}
:scope:is(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));
}
:scope:is(lf-options):not(:has(> lf-option > strong)) > .lf-another:not([hidden]) {
  gap: 0;
  padding-block: 5px;
  padding-inline-end: var(--lf-row-gap);
}
:scope:is(lf-options):not(:has(> lf-option > strong)) > .lf-another {
  --lf-compose-text-margin-inline-start: var(--lf-row-gap);
}
@container (max-width: 20rem) {
  :scope:is(lf-options):not(:has(> lf-option > strong)) > :is(lf-option, .lf-another) {
    --lf-row-gap: var(--sp-1);
  }
}
@container style(--lf-joined: 0) {
  :scope:is(lf-options):not(:has(> lf-option > strong)) > lf-option {
    border-radius: 6px;
  }
  :scope:is(lf-options):not(:has(> lf-option > strong)) > lf-option[chosen] {
    background: var(--ok-tint);
  }
}
@media screen {
  @container style(--lf-joined: 0) {
    :scope:is(lf-options)[choose]:not(:where([data-lf-exhibit]) *):not(:has(> lf-option > strong)) > lf-option:hover {
      background: var(--chip);
    }
    :scope:is(lf-options)[choose]:not(:where([data-lf-exhibit]) *):not(:has(> lf-option > strong)) > lf-option[chosen]:hover {
      background: var(--ok-tint);
    }
  }
}
:scope:is(lf-options):not(:has(> lf-option > strong)) > lf-option > .lf-ref {
  display: table-cell;
  width: 0;
  white-space: nowrap;
  vertical-align: middle;
}
:scope:is(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;
}
:scope:is(lf-options):not(:has(> lf-option > strong)) > lf-option > .lf-key-badge {
  top: 0;
  bottom: 0;
  margin: auto 0;
}
:scope:is(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 12px;
  font-weight: 600;
  text-align: left;
  background: var(--field);
  cursor: pointer;
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
:scope:is(lf-options)[settled] > .lf-settled[aria-expanded=false] {
  margin-bottom: 0;
}
:scope:is(lf-options)[settled] > .lf-settled:hover {
  border-color: var(--border-2);
}
:scope:is(lf-options)[settled] > .lf-settled[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: options-settled;
  outline-offset: 1px;
}
.lf-settled::before {
  content: "▸";
  color: var(--muted);
  font-weight: 400;
}
.lf-settled[aria-expanded=true]::before {
  content: "▾";
}
.lf-settled-count {
  margin-left: auto;
  font-weight: 400;
  font-size: var(--t-6);
  color: var(--muted);
  white-space: nowrap;
}
.lf-settled-diff {
  font-weight: 400;
  font-size: var(--t-6);
  padding: var(--chip-pad);
  line-height: var(--chip-lh);
  border-radius: var(--chip-r);
  background: var(--add-tint);
  color: var(--ok-ink);
}
@media screen {
  :scope:is(lf-options)[settled] > .lf-settled {
    display: flex;
  }
  :scope:is(lf-options)[settled] > lf-option[hidden] {
    display: block;
    padding: 0;
    border: 0;
    box-shadow: none;
    margin: 0;
  }
  :scope:is(lf-options)[settled] > lf-option[hidden]:not([hidden=until-found]) {
    display: none;
  }
}
@media print {
  :scope:is(lf-options)[settled] > lf-option {
    content-visibility: visible !important;
  }
}

/* skills/leaf/packages/default/styles/board.css */
:scope:is(lf-board) {
  --lf-board-columns: 1;
}
@media screen {
  :scope:is(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));
  }
}
:scope:is(lf-board):has(> lf-column:nth-of-type(2)) {
  --lf-board-columns: 2;
}
:scope:is(lf-board):has(> lf-column:nth-of-type(3)) {
  --lf-board-columns: 3;
}
:scope:is(lf-board):has(> lf-column:nth-of-type(4)) {
  --lf-board-columns: 4;
}
:scope:is(lf-board):has(> lf-column:nth-of-type(5)) {
  --lf-board-columns: 5;
}
:scope:is(lf-board):has(> lf-column:nth-of-type(6)) {
  --lf-board-columns: 6;
}
:scope:is(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;
}
:scope:is(lf-column) {
  display: block;
  background: var(--field);
  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) {
    :scope:is(lf-column) {
      min-width: max(var(--lf-reading-column-floor), calc(100cqi - var(--sp-4)));
      scroll-snap-align: start;
    }
  }
}
@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;
    }
  }
}
:scope:is(lf-column)::before,
:scope:is(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;
}
:scope:is(lf-column)::before {
  content: attr(label);
}
:scope:is(lf-column) {
  position: relative;
  --lf-tone-dot: var(--border-2);
}
:scope:is(lf-column)[tone=ok] {
  --lf-tone-dot: var(--ok);
}
:scope:is(lf-column)[tone=warn] {
  --lf-tone-dot: var(--warn);
}
:scope:is(lf-column)[tone=danger] {
  --lf-tone-dot: var(--danger);
}
:scope:is(lf-column)::before,
:scope:is(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;
}
:scope:is(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;
}
:scope:is(lf-column):has(> [data-lf-said=label])::before {
  content: none;
}
:scope:is(lf-card) {
  display: block;
  position: relative;
  background: var(--card);
  font: var(--t-5)/1.5 var(--sans);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 12px var(--lf-card-inset);
  margin: 0 0 var(--sp-2);
  container-type: inline-size;
  --lf-block-frame: 1;
}
@media screen {
  :scope:is(lf-card)::before {
    content: "";
    float: right;
    inline-size: var(--lf-grip-room, 0px);
    block-size: var(--lf-grip-block, 0px);
    margin-block-start: -10px;
  }
  :scope:is(lf-card) > :not(:first-child) {
    clear: right;
  }
}
:scope:is(lf-card):last-child {
  margin-bottom: 0;
}
:scope:is(lf-card) > strong {
  display: block;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 2px;
}
:scope:is(lf-card) .lf-grip {
  position: absolute;
  top: 2px;
  right: 0;
  color: var(--muted);
  padding: 8px 10px;
  cursor: grab;
  min-height: var(--aim-floor);
  min-width: var(--aim-floor);
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
  touch-action: none;
}
:scope:is(lf-card) .lf-grip {
  scroll-margin-inline-start: calc(100cqi + 2 * var(--lf-card-inset));
}
:scope:is(lf-card):hover > .lf-grip {
  color: var(--ink-2);
}
:scope:is(lf-card) .lf-grip:hover {
  background: var(--chip);
}
:scope:is(lf-card) .lf-grip[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: card-grip;
  outline-offset: calc(-1 * var(--focus-ring-w));
  color: var(--ink-2);
}
:scope:is(lf-card).lf-ghost {
  opacity: .4;
  border-style: dashed;
  border-color: var(--accent);
}
:scope:is(lf-card).lf-lift {
  box-shadow: 0 2px 8px var(--shade);
  border-color: var(--accent);
}

/* skills/leaf/packages/default/styles/tabs.css */
:where(:scope:is(lf-tabs)) {
  display: block;
  margin: 14px 0;
}
:scope:is(lf-tab) {
  display: block;
}
:scope:is(lf-tab)::before,
.lf-tabstrip .lf-tab-group {
  font-size: var(--t-6);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
:scope:is(lf-tab)::before {
  content: attr(label);
  display: block;
  margin: 18px 0 8px;
}
:scope:is(lf-tabs).lf-rendered > lf-tab {
  margin-top: 14px;
}
.lf-tabstrip {
  display: none;
  gap: 2px;
  --lf-tab-focus-gap: 2px;
  border-bottom: 1px solid var(--border-2);
}
.lf-tabstrip .lf-tab-btn {
  padding: max(5px, (var(--aim-floor) - 1lh) / 2 - 3px) 7px max(7px, (var(--aim-floor) - 1lh) / 2 - 1px);
  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] {
  outline: none;
}
.lf-tabstrip .lf-tab-btn[data-lf-focus] > .lf-tab-name {
  outline: var(--focus-ring);
  --lf-focus-ring: tab-btn;
  outline-offset: var(--lf-tab-focus-gap);
}
.lf-tabstrip .lf-tab-btn > .lf-tab-name {
  display: inline-block;
  padding: 2px 5px;
}
.lf-tabstrip .lf-tab-btn[aria-selected=true] > .lf-tab-name {
  background: var(--card);
  color: var(--ink);
}
@media (forced-colors: active) {
  .lf-tabstrip .lf-tab-btn[aria-selected=true] > .lf-tab-name {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
  :scope:is(lf-tabs)[data-lf-tabs-flow=page] > .lf-tabstrip .lf-tab-btn:not([aria-selected=true]) > .lf-tab-name {
    border-bottom-color: Canvas;
  }
  :scope:is(lf-tabs)[data-lf-tabs-flow=page] > .lf-tabstrip .lf-tab-btn[aria-selected=true] > .lf-tab-name {
    text-decoration: none;
  }
}
.lf-tabdiff {
  font-size: var(--t-6);
  margin-left: 6px;
  padding: var(--chip-pad);
  line-height: var(--chip-lh);
  border-radius: var(--chip-r);
}
.lf-tabdiff:empty {
  display: none;
}
.lf-tabdiff {
  font-weight: 400;
  background: var(--add-tint);
  color: var(--ok-ink);
}
@media screen {
  :where(:scope:is(lf-tabs).lf-rendered) {
    margin: var(--sp-4) 0 32px;
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    background: var(--card);
    --lf-block-frame: 1;
  }
  .lf-tabstrip {
    display: flex;
    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(--field);
    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: 36px;
    --lf-more-fade-to: #000;
  }
  :scope:is(lf-tabs).lf-rendered > lf-tab::before {
    content: none;
  }
  :scope:is(lf-tabs).lf-rendered > lf-tab {
    margin: 0;
    padding: 0;
  }
  :scope:is(lf-tabs).lf-rendered > lf-tab:not([hidden]) {
    padding: var(--sp-4);
    --lf-block-frame: 1;
  }
  :scope:is(lf-tabs).lf-rendered > lf-tab[hidden] {
    margin: 0;
  }
  :scope:is(lf-tabs).lf-rendered > lf-tab[hidden]:not([hidden=until-found]) {
    display: none;
  }
  :scope:is(lf-tabs).lf-rendered[data-lf-tabs-flow=box] > lf-tab {
    container-type: inline-size;
  }
  :scope:is(lf-tabs)[list=side] {
    --lf-tab-summary-h: 17px;
  }
  :scope:is(lf-tabs)[list=side].lf-rendered {
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
    align-items: start;
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding: 8px;
    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;
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: calc(var(--focus-ring-w) + var(--lf-tab-focus-gap));
    align-items: baseline;
    justify-items: start;
    text-align: start;
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-btn:has(> .lf-tab-answer) {
    grid-template-columns: minmax(0, max-content) minmax(1.25em, 1fr) auto;
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-answer {
    container-type: inline-size;
    justify-self: stretch;
    display: flex;
    gap: 0.3em;
    font-size: var(--t-6);
    font-weight: 600;
    color: var(--ink-2);
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-answer::before {
    content: "✓" / "";
    flex: none;
    color: var(--ok-ink);
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-answer[data-lf-asks=open]::before {
    content: "○" / "";
    font-weight: 400;
    color: var(--muted);
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-answer:not([data-lf-asks]) {
    visibility: hidden;
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-answer-words {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @container (width < 5em) {
    :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-answer-words {
      display: none;
    }
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-summary {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0 5px;
    font-size: var(--t-6);
    line-height: var(--lf-tab-summary-h);
    color: var(--muted);
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip > .lf-tab-run {
    display: flex;
    flex-direction: column;
  }
  :scope:is(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);
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-group {
    padding: 4px 12px 2px;
  }
  :scope:is(lf-tabs)[list=side].lf-rendered > lf-tab {
    grid-column: 2;
    grid-row: 1;
  }
  @container (width < 36rem) {
    :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip {
      grid-column: 1 / -1;
      grid-row: auto;
      flex-direction: row;
      gap: 2px;
      overflow-x: auto;
      overflow-y: hidden;
      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;
    }
    :scope:is(lf-tabs)[list=side].lf-rendered:has(> lf-tab[summary]) > .lf-tabstrip {
      min-block-size: calc(var(--lf-tabstrip-h) + var(--lf-tab-summary-h));
    }
    :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-btn {
      max-inline-size: 16rem;
    }
    :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip > .lf-tab-run {
      flex: none;
      flex-direction: row;
      gap: 2px;
    }
    :scope:is(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);
    }
    :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip .lf-tab-group {
      flex: none;
      align-self: center;
      padding: 0 4px;
    }
    :scope:is(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;
    }
    :scope:is(lf-tabs)[list=side].lf-rendered > lf-tab {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }
  @container style(--lf-full-height: 1) {
    :scope:is(lf-tabs)[list=side].lf-rendered {
      grid-template-rows: auto minmax(0, 1fr);
      --lf-full-height: inherit;
    }
    :scope:is(lf-tabs)[list=side].lf-rendered > .lf-tabstrip {
      grid-row: 1;
    }
    :scope:is(lf-tabs)[list=side].lf-rendered > lf-tab {
      grid-row: 2;
    }
    @container (width >= 36rem) {
      :scope:is(lf-tabs)[list=side].lf-rendered > :is(.lf-tabstrip, lf-tab) {
        grid-row: 1 / -1;
      }
    }
    :scope:is(lf-tabs)[list=side].lf-rendered > :is(.lf-tabstrip, lf-tab:not([hidden])) {
      align-self: stretch;
      min-block-size: 0;
      overflow: auto;
      --lf-top: 0px;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      --lf-holds-height: 1;
    }
  }
  :where(:scope:is(lf-tabs).lf-rendered[data-lf-tabs-flow=page]) {
    margin-block: 0 32px;
    min-block-size: calc(100dvh - var(--lf-top));
    border: 0;
    border-radius: 0;
    background: transparent;
    --lf-block-frame: 0;
  }
  :scope:is(lf-tabs):not([list=side]) {
    isolation: isolate;
    --lf-top-outer: var(--lf-top);
  }
  :scope:is(lf-tabs):not([list=side]) > lf-tab {
    --lf-top: calc(var(--lf-top-outer) + var(--lf-tabstrip-h));
  }
  :scope:is(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);
  }
  :scope:is(lf-tabs)[data-lf-tabs-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 1px;
    inline-size: var(--lf-tabstrip-press);
    display: flex;
    align-items: center;
    font-size: 22px;
    line-height: 1;
    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::before {
    content: "‹" / "";
  }
  .lf-tabstrip-scroll[data-to=end] > span::before {
    content: "›" / "";
  }
  .lf-tabstrip-scroll[data-to=start] > span {
    inset-inline-start: 0;
    justify-content: flex-start;
    background:
      linear-gradient(
        to right,
        var(--lf-tabstrip-bg) 55%,
        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) 55%,
        transparent);
  }
  .lf-tabstrip-scroll[data-to=start]:dir(rtl) > span {
    background:
      linear-gradient(
        to left,
        var(--lf-tabstrip-bg) 55%,
        transparent);
  }
  .lf-tabstrip-scroll[data-to=end]:dir(rtl) > span {
    background:
      linear-gradient(
        to right,
        var(--lf-tabstrip-bg) 55%,
        transparent);
  }
  .lf-tabstrip-scroll[data-to=start]:dir(rtl) > span::before {
    content: "›" / "";
  }
  .lf-tabstrip-scroll[data-to=end]:dir(rtl) > span::before {
    content: "‹" / "";
  }
  :scope:is(lf-tabs)[data-lf-tabs-flow=page] > .lf-tabstrip .lf-tab-btn {
    padding-block: max(5px, (var(--aim-floor) - 1lh) / 2 - 4px) max(7px, (var(--aim-floor) - 1lh) / 2 - 2px);
  }
  :scope:is(lf-tabs)[data-lf-tabs-flow=page] > .lf-tabstrip .lf-tab-btn > .lf-tab-name {
    border-bottom: 2px solid transparent;
    background: transparent;
  }
  :scope:is(lf-tabs)[data-lf-tabs-flow=page] > .lf-tabstrip .lf-tab-btn[aria-selected=true] > .lf-tab-name {
    border-bottom-color: currentColor;
    background: transparent;
  }
  :scope:is(lf-tabs).lf-rendered[data-lf-tabs-flow=page] > lf-tab:not([hidden]) {
    padding: var(--sp-4) 0 0;
    --lf-block-frame: trim;
  }
  :scope:is(lf-tabs).lf-rendered[data-lf-tabs-flow=page] > lf-tab[hidden] {
    align-self: start;
    height: 0;
    min-height: 0;
    overflow: clip;
    pointer-events: none;
  }
  @scope (html[data-lf-interactive] :scope) {
    :where(:scope:is(lf-tabs):not(.lf-rendered):has(> lf-tab)) {
      margin: var(--sp-4) 0 32px;
    }
    :scope:is(lf-tabs):not(.lf-rendered):has(> lf-tab) {
      border: 1px solid var(--border-2);
      border-radius: var(--r);
      background: var(--card);
      --lf-block-frame: 1;
      &::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(--field);
      }
      & > lf-tab {
        padding: var(--sp-4);
        --lf-block-frame: 1;
      }
      & > lf-tab::before {
        content: none;
      }
      & > lf-tab:not([data-lf-opening]) {
        display: none;
      }
    }
  }
  @scope (html[data-lf-interactive] body > main > :scope) {
    :where(:scope:is(lf-tabs):not(.lf-rendered):nth-child(1 of lf-tabs):not([list=side]):has(> lf-tab)) {
      margin-block: 0 32px;
    }
    :scope:is(lf-tabs):not(.lf-rendered):nth-child(1 of lf-tabs):not([list=side]):has(> lf-tab) {
      border: 0;
      border-radius: 0;
      background: transparent;
      min-block-size: calc(100dvh - var(--lf-top));
      --lf-block-frame: 0;
      &::before {
        border-radius: 0;
        background: var(--paper);
      }
      & > lf-tab {
        padding: var(--sp-4) 0 0;
        --lf-block-frame: trim;
      }
    }
  }
  @scope (html[data-lf-interactive] :scope) {
    :scope:is(lf-tabs)[list=side]:not(.lf-rendered):has(> lf-tab) {
      container-type: inline-size;
      display: grid;
      grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
      align-items: start;
      &::before {
        grid-column: 1;
        grid-row: 1;
        align-self: stretch;
        border-bottom: 0;
        border-inline-end: 1px solid var(--border-2);
        border-radius: calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px);
      }
      & > lf-tab {
        grid-column: 2;
        grid-row: 1;
      }
      @container (width < 36rem) {
        &::before {
          grid-column: 1 / -1;
          grid-row: auto;
          border-inline-end: 0;
          border-bottom: 1px solid var(--border-2);
          border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
        }
        &:has(> lf-tab[summary])::before {
          block-size: calc(var(--lf-tabstrip-h) + var(--lf-tab-summary-h));
        }
        & > lf-tab {
          grid-column: 1 / -1;
          grid-row: auto;
        }
      }
    }
  }
}
@media print {
  :scope:is(lf-tabs).lf-rendered > lf-tab {
    content-visibility: visible !important;
  }
  :scope:is(lf-tabs)[list=side] > lf-tab[group]::before {
    content: attr(group) " · " attr(label);
  }
}

/* skills/leaf/packages/default/styles/tally.css */
:scope:is(lf-tally) {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}
:scope:is(lf-tally) .lf-tally-face {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  max-width: 100%;
}
:scope:is(lf-tally):not([data-lf-ready]) .lf-tally-face {
  visibility: hidden;
}
:scope:is(lf-tally):not([next]) .lf-tally-next {
  display: none;
}
:scope:is(lf-tally) .lf-tally-count {
  display: inline-grid;
  font-family: var(--sans);
  font-size: var(--t-6);
  line-height: var(--chip-lh);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: var(--chip-pad);
  border-radius: var(--chip-r);
  background: var(--chip);
  color: var(--ink-2);
}
:scope:is(lf-tally) .lf-tally-count > * {
  grid-area: 1 / 1;
  justify-self: center;
}
:scope:is(lf-tally) .lf-tally-room {
  visibility: hidden;
}
:scope:is(lf-tally)[data-lf-done] .lf-tally-count {
  background: var(--ok-tint);
  color: var(--ok-ink);
}
:scope:is(lf-tally) .lf-tally-next {
  font-size: var(--t-6);
  padding-block: 0;
  min-height: var(--aim-floor);
}

/* skills/leaf/packages/default/styles/toc.css */
:scope:is(lf-toc) {
  display: block;
  margin: var(--sp-4) 0 30px;
}
:scope:is(lf-toc):is(:empty, [data-lf-toc-empty]) {
  display: none;
}
:scope:is(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);
}
:scope:is(lf-toc) .lf-toc-heading {
  margin: 0 0 7px;
  color: var(--ink-2);
  font-size: var(--t-6);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:scope:is(lf-toc) .lf-toc-start,
:scope:is(lf-toc) .lf-toc-window {
  display: none;
}
@media print {
  :scope:is(lf-toc) .lf-toc-start {
    display: block;
  }
}
:scope:is(lf-toc) ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
:scope:is(lf-toc) li {
  --lf-toc-indent: 0px;
  margin: 0 0 0 var(--lf-toc-indent);
}
:scope:is(lf-toc) li[data-lf-depth="1"] {
  --lf-toc-indent: 10px;
}
:scope:is(lf-toc) li[data-lf-depth="2"] {
  --lf-toc-indent: 20px;
}
:scope:is(lf-toc) li[data-lf-depth="3"] {
  --lf-toc-indent: 30px;
}
:scope:is(lf-toc) li[data-lf-depth="4"] {
  --lf-toc-indent: 40px;
}
:scope:is(lf-toc) a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  padding-block: max(3px, (var(--aim-floor) - 1lh) / 2);
}
:scope:is(lf-toc) a:hover,
:scope:is(lf-toc) a[data-lf-focus] {
  color: var(--accent);
}
@media screen and (hover: hover) and (pointer: fine) {
  @container lf-content-frame style(--lf-sidebar-posture: margin) {
    @container style(--lf-sidebar-slot: margin) {
      :scope:is(lf-toc) {
        position: fixed;
        left: var(--sp-4);
        top: var(--lf-banner-h, 0px);
        z-index: 4;
        width: calc(var(--sidebar-max) - var(--sp-4));
        box-sizing: border-box;
        padding-block: var(--sp-4);
        pointer-events: none;
        height: var(--lf-view-height);
        margin: 0;
      }
      :scope:is(lf-toc) .lf-toc-nav {
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        --lf-toc-label-opacity: 0;
        pointer-events: none;
        transition: background-color .24s ease-out;
      }
      :scope:is(lf-toc) .lf-toc-heading {
        display: none;
      }
      :scope:is(lf-toc) .lf-toc-rows {
        position: relative;
        display: flex;
        height: 100%;
        --lf-toc-spine-width: 1px;
        flex-direction: column;
      }
      :scope:is(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;
      }
      :scope:is(lf-toc):is(:hover, [data-lf-focus-within], [data-lf-outline]),
      :scope:is(lf-toc):is(:hover, [data-lf-focus-within], [data-lf-outline]) .lf-toc-nav {
        pointer-events: auto;
      }
      @scope (body[data-lf-go-to-active] :scope) {
        :is(:scope:is(lf-toc), :scope:is(lf-toc) .lf-toc-nav) {
          pointer-events: auto;
        }
      }
      :scope:is(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);
      }
      :scope:is(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(--ink-2);
      }
      :scope:is(lf-toc) .lf-toc-start,
      :scope:is(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;
      }
      :scope:is(lf-toc) :is(.lf-toc-start, li)[data-lf-toc-hidden] {
        display: none;
      }
      :scope:is(lf-toc) ol {
        display: contents;
      }
      :scope:is(lf-toc) .lf-toc-start::before,
      :scope:is(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);
      }
      :scope:is(lf-toc) .lf-toc-start::before {
        width: 9px;
        height: 9px;
      }
      :scope:is(lf-toc) li[data-lf-depth="0"]::before {
        width: 6px;
        height: 6px;
      }
      :scope:is(lf-toc) .lf-toc-start::before,
      :scope:is(lf-toc) li[data-lf-depth="0"]::before {
        border: 1px solid var(--muted);
        background: var(--paper);
      }
      :scope:is(lf-toc) :is(.lf-toc-start, li):has(> a[aria-current=location])::before {
        background: var(--ink-2);
        border-color: var(--ink-2);
      }
      :scope:is(lf-toc) li[data-lf-depth="1"] {
        --lf-toc-indent: 10px;
      }
      :scope:is(lf-toc) li[data-lf-depth="2"] {
        --lf-toc-indent: 20px;
      }
      :scope:is(lf-toc) li[data-lf-depth="3"] {
        --lf-toc-indent: 30px;
      }
      :scope:is(lf-toc) li[data-lf-depth="4"] {
        --lf-toc-indent: 40px;
      }
      :scope:is(lf-toc) .lf-toc-start a,
      :scope:is(lf-toc) li a {
        position: absolute;
        z-index: 3;
        display: -webkit-box;
        top: 0;
        left: 0;
        width: 100%;
        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) - .5lh));
        opacity: var(--lf-toc-label-opacity);
        pointer-events: none;
        transition: color .12s ease-out, opacity .24s ease-out;
      }
      :scope:is(lf-toc) .lf-toc-start a {
        color: var(--ink-2);
        font-weight: 650;
        line-height: 1.2;
        max-height: 2.4em;
      }
      :scope:is(lf-toc) li a[aria-current=location]:not(:hover, [data-lf-focus]) {
        color: var(--ink-2);
      }
      :scope:is(lf-toc) a[data-lf-focus] {
        outline: var(--focus-ring);
        --lf-focus-ring: toc-link;
        outline-offset: calc(-1 * var(--focus-ring-w));
      }
      :scope:is(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] :scope) {
        :scope:is(lf-toc) .lf-toc-nav {
          --lf-toc-label-opacity: 1;
          background: color-mix(in srgb, var(--paper) 92%, transparent);
        }
      }
      :scope:is(lf-toc):is(:hover, [data-lf-focus-within]) .lf-toc-nav a {
        pointer-events: auto;
      }
      @scope (body[data-lf-go-to-active] :scope) {
        :scope:is(lf-toc) .lf-toc-nav a {
          pointer-events: auto;
        }
      }
      :scope:is(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;
      }
      :scope:is(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;
      }
      :scope:is(lf-toc)[data-lf-outline] .lf-toc-rows::before,
      :scope:is(lf-toc)[data-lf-outline] .lf-toc-window,
      :scope:is(lf-toc)[data-lf-outline] :is(.lf-toc-start, li)::before {
        display: none;
      }
      :scope:is(lf-toc)[data-lf-outline] .lf-toc-heading {
        display: block;
      }
      :scope:is(lf-toc)[data-lf-outline] .lf-toc-rows {
        display: block;
        height: auto;
      }
      :scope:is(lf-toc)[data-lf-outline] ol {
        display: block;
      }
      :scope:is(lf-toc)[data-lf-outline] :is(.lf-toc-start, li) {
        display: block;
        margin: 0 0 0 var(--lf-toc-indent);
      }
      :scope:is(lf-toc)[data-lf-outline] :is(.lf-toc-start, li)[data-lf-toc-hidden] {
        display: none;
      }
      :scope:is(lf-toc)[data-lf-outline] :is(.lf-toc-start, li) a {
        position: relative;
        display: block;
        max-height: none;
        padding: 3px 0;
        transform: none;
        -webkit-line-clamp: initial;
        opacity: 1;
        pointer-events: auto;
      }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  :scope:is(lf-shot) .lf-shotcomparison::part(divider),
  :scope:is(lf-shot) .lf-shotcomparison::part(handle),
  :scope:is(lf-toc) a {
    transition: none;
  }
}
@media (forced-colors: active) {
  :scope:is(lf-toc) .lf-toc-rows::before,
  :scope:is(lf-toc) .lf-toc-start::before,
  :scope:is(lf-toc) li::before,
  :scope:is(lf-toc) li[data-lf-depth="0"]::before {
    forced-color-adjust: none;
    background: CanvasText;
    border-color: CanvasText;
  }
  :scope:is(lf-toc) .lf-toc-start::before,
  :scope:is(lf-toc) li[data-lf-depth="0"]::before {
    background: Canvas;
  }
  :scope:is(lf-toc) .lf-toc-window,
  :scope:is(lf-toc) :is(.lf-toc-start, li):has(> a[aria-current=location])::before {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
  }
}

/* skills/leaf/packages/default/styles/activity.css */
:scope:is(lf-activity) {
  display: block;
  margin: var(--sp-3) 0;
}
:scope:is(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);
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--accent);
  font: 600 var(--t-5)/var(--lf-ui-lh) var(--sans);
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
:scope:is(lf-activity) .lf-activity-news[data-lf-news] {
  color: var(--danger);
}
:scope:is(lf-activity) .lf-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font: var(--t-5)/var(--lf-ui-lh) var(--sans);
}
:scope:is(lf-activity) .lf-activity-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--rule);
}
:scope:is(lf-activity) .lf-activity-row:first-child {
  border-top: 0;
}
:scope:is(lf-activity) .lf-activity-avatar {
  grid-row: span 2;
  align-self: start;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 var(--t-6) var(--sans);
  background: var(--accent-tint);
  color: var(--accent);
}
:scope:is(lf-activity) [data-lf-activity-author=user] > .lf-activity-avatar {
  background: var(--chip);
  color: var(--ink-2);
}
:scope:is(lf-activity) [data-lf-activity-author=page] > .lf-activity-avatar {
  background: var(--field);
  color: var(--muted);
}
:scope:is(lf-activity) .lf-activity-line {
  margin: 0;
  overflow-wrap: anywhere;
}
:scope:is(lf-activity) .lf-activity-actor {
  color: var(--ink);
  font-weight: 600;
}
:scope:is(lf-activity) .lf-activity-what {
  color: var(--ink-2);
}
:scope:is(lf-activity) :is(a[href], button).lf-activity-target {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
:scope:is(lf-activity) button.lf-activity-target {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
:scope:is(lf-activity) :is(a[href], button).lf-activity-target:hover {
  text-decoration-color: currentColor;
}
:scope:is(lf-activity) :is(span, a:not([href])).lf-activity-target {
  color: var(--ink-2);
  text-decoration: none;
}
:scope:is(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;
}
:scope:is(lf-activity) .lf-activity-time::before {
  content: "· ";
}
:scope:is(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);
}
:scope:is(lf-activity) [data-lf-undone] :is(.lf-activity-what, .lf-activity-target, .lf-activity-excerpt) {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}
:scope:is(lf-activity) .lf-activity-excerpt {
  grid-column: 2;
  margin: 2px 0 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:scope:is(lf-activity) .lf-activity-empty {
  margin: 0;
  color: var(--muted);
  font: var(--t-5) var(--sans);
}
@media print {
  :scope:is(lf-activity) .lf-activity-news {
    display: none;
  }
}

/* skills/leaf/packages/default/styles/ask.css */
:scope:is(lf-ask) {
  display: block;
}
@media screen {
  :scope:is(lf-ask)[data-lf-space=column]:has(> [data-lf-space=wide]:not([data-lf-arranged])) {
    --lf-reach: min(var(--wide), var(--lf-room, 0px));
  }
  :scope:is(lf-ask)[data-lf-space=column]:has(> [data-lf-space=available]:not([data-lf-arranged])) {
    --lf-reach: var(--lf-room, 0px);
  }
  :scope:is(lf-ask)[data-lf-space=column]:has(> :is([data-lf-space=wide], [data-lf-space=available]):not([data-lf-arranged])) {
    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);
  }
}
:scope:is(lf-ask):has(> :is(h1, h2, h3, h4, h5, h6):first-child ~ :is(figure, img, svg, table, lf-chart, lf-shot) ~ lf-options:last-child) {
  --lf-options-across: 1;
}
@container style(--lf-full-height: 1) {
  :scope:is(lf-ask) {
    display: flex;
    flex-direction: column;
  }
  :scope:is(lf-ask):has(> :nth-child(2 of :not(script, style, template)):nth-last-child(1 of :not(script, style, template))) {
    --lf-full-height: inherit;
  }
  :scope:is(lf-ask) > :nth-child(2 of :not(script, style, template)):nth-last-child(1 of :not(script, style, template)) {
    flex: 1 1 0;
    min-block-size: 0;
    margin-block-end: 0;
  }
}

/* skills/leaf/packages/default/styles/sample.css */
:scope:is(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;
}
:scope:is(lf-sample) > * {
  --lf-box-cap: 100%;
}
:scope:is(lf-sample)::before,
:scope:is(lf-sample) > [data-lf-said=label] {
  display: table-caption;
  font-size: var(--t-6);
  margin-bottom: var(--sp-1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
:scope:is(lf-sample)::before {
  content: "quoted";
}
:scope:is(lf-sample)[label]::before {
  content: "quoted · " attr(label);
}
:scope:is(lf-sample):has(> [data-lf-said=label])::before {
  content: none;
}
:scope:is(lf-sample) > [data-lf-said=label]::before {
  content: "quoted · ";
}
:scope:is(lf-sample)[data-lf-sample-live]::before {
  content: "live sample";
}
:scope:is(lf-sample)[data-lf-sample-live][label]::before {
  content: "live sample · " attr(label);
}
:scope:is(lf-sample)[data-lf-sample-live]:has(> [data-lf-said=label])::before {
  content: none;
}
:scope:is(lf-sample)[data-lf-sample-live] > [data-lf-said=label]::before {
  content: "live sample · ";
}
.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;
}
:scope:is(lf-sample):has(> .lf-sample-view:modal) {
  height: var(--lf-sample-height);
}
:scope:is(lf-sample)[data-lf-sample-live] {
  padding-left: 0;
  border-left: 0;
}
.lf-sample-exhibit {
  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: border-box;
  width: 100%;
  height: 32rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--paper);
}
:scope:is(lf-sample)[window] .lf-sample-frame {
  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;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
}
.lf-sample-view:modal .lf-sample-frame {
  flex: 1;
  min-height: 0;
}
@scope (html[data-lf-sample-block] :scope) {
  :scope:is(lf-sample)[window] .lf-sample-frame {
    height: 32rem;
  }
}
@media print {
  .lf-sample-controls,
  .lf-sample-exhibit,
  .lf-sample-frame {
    display: none;
  }
}

/* skills/leaf/packages/default/styles/chart.css */
:scope:is(lf-chart) .lf-chart-drawing {
  display: block;
  font: 10px var(--sans);
  color: var(--muted);
}
@scope (html[data-lf-interactive] :scope) {
  :scope:is(lf-chart):not(.lf-rendered) > pre {
    visibility: hidden;
  }
}
:scope:is(lf-chart) .lf-chart-drawing svg {
  display: block;
  font: inherit;
  height: attr(height px, auto);
}
:scope:is(lf-chart) .lf-chart-drawing svg[role=img] {
  --plot-background: var(--paper);
}
:scope:is(lf-chart) .lf-chart-drawing [class*=-swatches] {
  font-family: inherit;
}

/* skills/leaf/packages/default/styles/code.css */
:scope:is(lf-code) {
  contain: inline-size;
}
@property --lf-code-gutter { syntax: "<length>"; inherits: true; initial-value: 38px; }
:scope:is(lf-code).lf-rendered pre {
  padding: 12px 0;
  --lf-block-frame: 1;
  --lf-code-gutter: max(38px, calc(var(--lf-code-digits, 2) * 1ch + 16px));
}
:scope:is(lf-code) .lf-code-line {
  display: block;
  position: relative;
  --lf-code-hang: calc(min(var(--lf-code-indent, 0), 22) * 1ch + 2ch);
  padding: 0 14px 0 calc(var(--lf-code-gutter) + 8px + var(--lf-code-hang));
  text-indent: calc(-1 * var(--lf-code-hang));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
:scope:is(lf-code) :is(.lf-code-line, .lf-code-elided)::before {
  content: attr(data-line);
  display: inline-block;
  width: var(--lf-code-gutter);
  margin-right: 8px;
  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;
}
:scope:is(lf-code) .lf-code-line::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  text-indent: 0;
}
:scope:is(lf-code) .lf-code-elided {
  display: flex;
  align-items: baseline;
  padding: 0 14px 0 0;
  color: var(--code-muted);
  user-select: none;
}
:scope:is(lf-code) .lf-code-elided::before {
  content: "⋮";
  flex: none;
  order: -2;
}
:scope:is(lf-code) .lf-code-elided::after {
  content: attr(data-elided);
  order: -1;
  flex: none;
}
:scope:is(lf-code) .lf-code-elided::after,
:scope:is(lf-code) .lf-code-elided > lf-note {
  font-family: var(--sans);
  font-size: var(--t-6);
  font-style: italic;
}
:scope:is(lf-code) .lf-code-elided > lf-note {
  display: block;
  min-width: 0;
  margin-inline-start: 0.5em;
  white-space: normal;
  user-select: text;
}
:scope:is(lf-code) .lf-code-elided > lf-note::before {
  content: "— ";
}
:scope:is(lf-code) :is(.lf-code-line, .lf-code-elided).hi {
  background: var(--hi-tint);
}
:scope:is(lf-code) :is(.lf-code-line, .lf-code-elided).hi::before {
  border-right-color: var(--warn);
}
:scope:is(lf-code) :is(.lf-code-line, .lf-code-elided)[data-lf-indicated] {
  outline: none;
}
:scope:is(lf-code) :is(.lf-code-line, .lf-code-elided)[data-lf-indicated]:not(.hi) {
  background: var(--accent-tint);
}
:scope:is(lf-code) :is(.lf-code-line, .lf-code-elided)[data-lf-indicated]::before {
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent);
  font-weight: 600;
}
:scope:is(lf-code) lf-note {
  display: block;
}
:scope:is(lf-code) > lf-note,
:scope:is(lf-code) > pre > lf-note {
  margin: 5px 0 6px;
  padding: 7px 14px 8px calc(var(--lf-code-gutter) + 8px);
  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] :scope) {
  :scope:is(lf-code):not(.lf-rendered) {
    & > pre {
      background: var(--pre-bg);
      border: 1px solid var(--code-border);
      border-radius: var(--r);
      padding: 12px 14px 12px calc(var(--lf-code-gutter) + 8px);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    & > lf-note {
      margin-inline: 1px;
    }
  }
}

/* skills/leaf/packages/default/styles/text-document.css */
:scope:is(lf-text-document) {
  display: block;
  margin: 14px 0;
  min-height: 2px;
}
:scope:is(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;
}
:scope:is(lf-text-document) figcaption {
  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;
}
:scope:is(lf-text-document) pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  white-space: pre-wrap;
}
@media screen {
  :scope:is(lf-text-document)[data-lf-bound] {
    max-block-size: none;
    overflow: visible;
    --lf-top: inherit;
  }
  :scope:is(lf-text-document):not([preview])[data-lf-bound] pre {
    max-block-size: var(--lf-bound, 28rem);
    overflow: auto;
    --lf-bound-box: 1;
    --lf-holds-height: 1;
    --lf-top: 0px;
  }
}
:scope:is(lf-text-document) pre[data-lf-focus] {
  outline-offset: calc(-1 * var(--focus-ring-w));
}
:scope:is(lf-text-document)[preview] > .lf-text-document-view {
  background: var(--paper);
}
:scope:is(lf-text-document)[preview] .lf-text-document-view > lf-tabs {
  margin: 0;
  border: 0;
  border-radius: 0;
}
:scope:is(lf-text-document)[preview] .lf-text-document-view > lf-tabs > lf-tab {
  margin: 0;
  padding: 0;
}
:scope:is(lf-text-document) div.lf-text-document-preview {
  padding: var(--sp-4);
  overflow-wrap: anywhere;
}
:scope:is(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 {
  :scope:is(lf-text-document)[preview] .lf-text-document-view > lf-tabs > lf-tab:not([hidden]) {
    block-size: var(--lf-bound, 28rem);
    overscroll-behavior: auto;
  }
  :scope:is(lf-text-document) iframe.lf-text-document-preview {
    block-size: 100%;
  }
}

/* skills/leaf/packages/default/styles/draft.css */
:scope:is(lf-draft) {
  display: block;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0;
  background: var(--card);
  font-size: max(var(--entry-floor), 1em);
}
.lf-draft-body,
:scope:is(lf-draft) > .lf-markdown-body {
  white-space: normal;
}
:is(.lf-draft-body, :scope:is(lf-draft) > .lf-markdown-body) > :first-child {
  margin-top: 0;
}
:is(.lf-draft-body, :scope:is(lf-draft) > .lf-markdown-body) > :last-child {
  margin-bottom: 0;
}
:scope:is(lf-draft) > pre {
  white-space: pre-line;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 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] {
  outline: none;
  box-shadow: none;
  --lf-focus-ring: none;
}
.lf-draft-footer {
  display: none;
}
@media screen {
  @scope (html[data-lf-interactive] :scope) {
    :scope:is(lf-draft):not(:where([data-lf-exhibit], [data-lf-exhibit] *)) {
      display: grid;
      grid-template-rows: minmax(min-content, auto) minmax(max(32px, var(--aim-floor)), auto);
      gap: 8px;
    }
    :scope:is(lf-draft) > .lf-draft-edit {
      margin-right: calc(var(--lf-code-copy-size) + var(--lf-code-copy-inset) + 6px - 14px - 1px);
    }
  }
  :scope:is(lf-draft):has(.lf-draft-edit) {
    border-color: var(--muted);
  }
  :scope:is(lf-draft):has(.lf-draft-edit[data-lf-focus]) {
    outline: var(--focus-ring);
    --lf-focus-ring: draft-editor;
    outline-offset: calc(-1 * (var(--focus-ring-w) + var(--focus-ring-gap)));
  }
  :scope:is(lf-draft):has(.lf-draft-edit:state(ready)) > .lf-draft-body {
    display: none;
  }
  .lf-draft-footer {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
    font: var(--t-5)/var(--lf-ui-lh) var(--sans);
  }
  .lf-draft-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-inline-start: auto;
  }
  .lf-draft-action {
    min-height: max(32px, var(--aim-floor));
  }
  .lf-draft-status {
    color: var(--danger-ink);
    align-self: center;
  }
  .lf-draft-status:empty {
    display: none;
  }
}
@media (forced-colors: active) {
  :scope:is(lf-draft):has(.lf-draft-edit[data-lf-focus]) {
    outline: 2px solid Highlight;
    outline-offset: -5px;
    box-shadow: none;
  }
}

/* skills/leaf/packages/default/styles/theme.css */
}
}
@layer lf-base {
@scope (:is(lf-diagram)) {
/* The diagram package's presentation. Everything here was in the default package's
 * theme until the diagram renderer left every page carrying a large bundle most never
 * draw with. The shared declaration-driven allocation stays in core; this package owns
 * the diagram's natural-size alignment and scrolling. */

/* Inherited palette aliases keep the generated SVG responsive to the live page's
 * scheme without redrawing its nodes or replacing Comment coordinates. */
:scope:is(lf-diagram) { --lf-diagram-paper: var(--paper); --lf-diagram-ink: var(--ink);
             --lf-diagram-muted: var(--muted); --lf-diagram-accent: var(--accent);
             }
/* Without the runtime, or once it could not start (runtime/prepaint.js), nothing will
 * draw, and the box holds authored source for good. That source reads from the
 * column's left edge instead of taking the available allocation. Where the runtime
 * runs, the box takes the drawing's allocation from first paint, at the height its
 * occurrence reserves (x-height), so the drawing lands in the box it already has. A
 * failed render becomes `.lf-error`; core's fail-soft room rule then gives the message
 * the column. */
@scope (html:not([data-lf-interactive]) :scope) {
  :scope:is(lf-diagram)[data-lf-space="available"]{
    --lf-room: 0px;
  }
}
/* The drawing keeps its natural size, between two spacers. Where the runtime allocated
 * room, the spacers spend it on each side so a drawing that fits remains on the prose
 * axis; when it does not fit they give way before the drawing and this box scrolls.
 * Where nothing allocated room — a thread's message — they are empty and the drawing
 * centres. This arrangement belongs to the diagram, independently of the `available`
 * capacity it requests from core. */
:scope:is(lf-diagram).lf-rendered { display: flex;
                         justify-content: safe center; overflow-x: auto; }
:scope:is(lf-diagram).lf-rendered::before,
:scope:is(lf-diagram).lf-rendered::after { content: ""; flex: 0 1 auto; width: 0; }
:scope:is(lf-diagram).lf-rendered[data-lf-space="available"]::before {
  width: calc(2 * var(--lf-grow-l)); }
:scope:is(lf-diagram).lf-rendered[data-lf-space="available"]::after {
  width: calc(2 * var(--lf-grow-r)); }
:scope:is(lf-diagram).lf-rendered > * { flex: none; }
/* A declared reservation stays the drawing's minimum room. Native font metrics
 * can make Mermaid's natural box slightly shorter on another machine; finishing
 * the drawing must not pull the page back into that spare room. */
:scope:is(lf-diagram).lf-rendered[data-lf-height] {
  min-block-size: attr(data-lf-height px);
}
/* The layer marks each edge a scrolled box has more beyond (shadow.css, at
 * [data-lf-more-before/after]) by fading the content there toward the page's ground, and
 * a drawing takes that fade with two settings of its own. A fade all the way to the
 * ground reads as the drawing's end: three agent-written plans drawn `flowchart LR`
 * showed two and a half of five steps at 1440px, the third fading out, and every reader
 * took the plan for three steps. What says "cut" is the drawing touching the edge: a
 * node's fill and rules, or an arrow's line, running into the scrollport's side rather
 * than stopping short of it. So the fade stops at 30% of the drawing, and is 32px wide,
 * a few letters of a label, so the cut node's words stay readable up to where they are
 * cut. A grey shadow over the edge said the same and read as a stray shadow instead.
 * The drawing itself is never scaled or re-laid out. */
:scope:is(lf-diagram).lf-rendered { --lf-more-fade: 32px; --lf-more-fade-to: rgb(0 0 0 / .3); }

/* A rendered diagram keeps its natural size rather than scaling a wide flowchart's
 * labels below legibility, so a wide one
 * scrolls in its own box, the same answer a wide table gets, instead of painting over
 * the margin. max-width: none escapes the page-wide svg rule in the kernel theme, which
 * would scale it right back down. Paper cannot scroll, so print restores the fit: width
 * and viewBox stay in the markup, and max-width alone scales the drawing whole. */
:scope:is(lf-diagram) svg { display: block; margin: 0 auto; max-width: none; }
/* The diagram owns its horizontal scrollport. Reserve the overlay track below its
 * drawing only while it scrolls, so chart marks at the SVG's edge remain visible. */
:scope:is(lf-diagram).lf-rendered { container-type: scroll-state; }
@container scroll-state(scrollable: inline) {
  :scope:is(lf-diagram).lf-rendered > svg { margin-block-end: 15px; }
}
@media print {
  :scope:is(lf-diagram) svg { max-width: 100%; }
}
}
}
@layer lf-base {
@scope (:is(lf-call-diff, lf-diff)) {
/* Generated from skills/leaf/packages/diff/styles/shadow.css by build/styles.mjs. */
/* skills/leaf/packages/diff/styles/palette.css */
:where(:scope, :scope:host) {
  --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));
}

/* skills/leaf/packages/diff/styles/shadow.css */
:where(:scope:host(.lf-rendered)) :where(.lf-diff-file) > details,
:where(:scope:host(.lf-rendered)) .lf-diff-metadata {
  margin: 0;
  padding: 0;
  overflow: clip;
  background: var(--pre-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--r);
}
:scope:host(.lf-rendered) :where(.lf-diff-file) > details > summary,
:scope:host(.lf-rendered) .lf-diff-metadata {
  padding: 7px 10px;
  font-size: var(--t-5);
  font-family: var(--sans);
  color: var(--code-ink);
  background: var(--code-chrome);
}
:scope:host(.lf-rendered) .lf-diff-fold > .lf-error {
  padding: 10px;
}
:scope:host(.lf-rendered) :where(.lf-diff-file) > details > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  block-size: var(--lf-diff-head-h);
  white-space: nowrap;
  overflow: hidden;
}
:scope:host(.lf-rendered) :where(.lf-diff-file) > details > summary::before {
  content: "▶" / "";
  flex: none;
  font-size: .7em;
}
:scope:host(.lf-rendered) :where(.lf-diff-file) > details[open] > summary::before {
  content: "▼" / "";
}
.lf-diff-head > .lf-diff-path {
  display: flex;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
.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: .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;
}
:scope:host(.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;
}
:scope:host(.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(--r) - 1px);
  border-start-end-radius: calc(var(--r) - 1px);
}
.lf-diff-fold:not([open]) > .lf-diff-head[data-path-cut]:is([data-lf-held-word], [data-lf-focus]) {
  border-radius: calc(var(--r) - 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: 4px 7px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 2px 8px var(--shade);
  white-space: normal;
  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 8px;
}
.lf-diff-progress {
  width: var(--lf-reserved-width, auto);
  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: 8px 0 0;
  --lf-diff-action-h: max(26px, var(--aim-floor));
  --lf-diff-action-top: 6px;
  --lf-diff-actions: var(--lf-diff-action-h);
  --lf-diff-head-h: 35px;
}
.lf-diff-file:has(> .lf-diff-file-actions > *) {
  --lf-diff-head-h: max(35px, calc(var(--lf-diff-action-top) + var(--lf-diff-action-h)));
}
.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: 3;
  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;
}
:is(.lf-diff-comment, .lf-diff-fold-all) {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.lf-diff-file-comment {
  --lf-icon-action-hit: var(--lf-diff-action-h);
}
:is(.lf-diff-file-comment, .lf-diff-fold-all):is(:hover, [data-lf-focus]) {
  background: var(--chip);
  color: var(--ink);
}
.lf-diff-fold-all {
  --lf-icon-action-hit: max(24px, var(--aim-floor));
  margin-inline-end: -3px;
}
.lf-diff-fold-all[data-lf-focus] {
  outline: none;
}
.lf-diff-fold-all[inert] {
  visibility: hidden;
}
[data-gutter] > :has(> .lf-diff-line-comment) {
  position: relative;
}
.lf-diff-line-comment {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  --aim-floor: 0px;
  cursor: pointer;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  opacity: 0;
}
.lf-diff-line-plus {
  position: absolute;
  inset-inline-start: 1px;
  inset-block-start: 50%;
  translate: 0 -50%;
  width: calc(2ch - 2px);
  border-radius: 3px;
  background: var(--accent-tint);
  font: 700 13px/1.2 var(--mono);
  text-align: center;
}
[data-gutter] > :hover > .lf-diff-line-comment,
[data-gutter] > .lf-diff-line-hover > .lf-diff-line-comment,
.lf-diff-line-comment[data-lf-focus] {
  opacity: 1;
}
.lf-diff-filtered {
  display: none !important;
}
.lf-diff-comment[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: diff-tools;
  outline-offset: 1px;
}
:scope:host(.lf-rendered) .lf-diff-file > details > summary[data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: code-summary;
  outline-offset: calc(-1 * var(--focus-ring-w));
}
:scope:host(.lf-rendered) [data-content] > [data-line][data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: code-line;
  outline-offset: calc(-1 * var(--focus-ring-w));
}
@media screen {
  :scope:host(.lf-rendered[data-lf-diff-pinned]) .lf-diff-file {
    --lf-top-outer: var(--lf-top);
  }
  :scope:host(.lf-rendered[data-lf-diff-pinned]) .lf-diff-file > details {
    --lf-top: calc(var(--lf-top-outer) + var(--lf-diff-head-h));
  }
  :scope:host(.lf-rendered[data-lf-diff-pinned]) .lf-diff-file > details > summary {
    position: sticky;
    --lf-top: var(--lf-top-outer);
    top: var(--lf-top, 0px);
    z-index: 2;
  }
  :scope:host(.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);
  }
}
:scope:host(.lf-rendered[data-lf-diff-pinned]) [data-line] {
  scroll-margin-top: var(--lf-diff-head-h);
}
:scope:host(.lf-rendered[data-lf-diff-pinned]) .lf-diff-file .lf-text-scroller {
  scroll-margin-top: calc(var(--lf-diff-head-h) + var(--focus-ring-room));
}
.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;
}
:scope:host(.lf-rendered) {
  background: none;
  color: inherit;
  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-bg-context: var(--pre-bg);
  --diffs-bg-context-gutter: color-mix(in srgb, var(--code-ink) 4%, var(--pre-bg));
  --diffs-bg-separator: var(--code-chrome);
  --diffs-fg: var(--code-ink);
  --diffs-fg-number: var(--code-muted);
  --diffs-fg-number-addition-override: var(--ok-ink);
  --diffs-fg-number-deletion-override: var(--danger-ink);
  --diffs-addition-base: var(--ok);
  --diffs-deletion-base: var(--danger);
  --diffs-bg-addition: var(--lf-code-add-fill);
  --diffs-bg-deletion: var(--lf-code-del-fill);
  --diffs-bg-addition-emphasis: color-mix(in srgb, var(--ok) 34%, var(--pre-bg));
  --diffs-bg-deletion-emphasis: color-mix(in srgb, var(--danger) 34%, var(--pre-bg));
}
:scope:host(.lf-rendered) code[data-code] {
  overscroll-behavior-x: auto;
  --diffs-code-grid: var(--diffs-grid-number-column-width) minmax(var(--lf-diff-row-fill, max-content), 1fr);
}
:scope:host(.lf-rendered) .lf-diff-fold > pre {
  margin: 0;
  border: none;
  border-top: 1px solid var(--code-border);
  border-radius: 0;
  overflow-x: auto;
  color: var(--code-ink);
}
:scope:host(.lf-rendered) code[data-code][data-lf-focus] {
  outline: var(--focus-ring);
  --lf-focus-ring: code-pre-shadow;
  outline-offset: calc(-1 * var(--focus-ring-w));
}
.lf-diff-thread-outlet,
.lf-diff-thread-gutter {
  min-width: 0;
  border-block: 1px solid var(--rule);
  background: var(--paper);
}
.lf-diff-thread-gutter {
  border-inline-end: 1px solid var(--rule);
}
.lf-diff-thread-outlet {
  padding: 10px clamp(10px, 2vw, 18px);
  white-space: normal;
  contain: inline-size;
}
.lf-diff-thread-outlet:not(.lf-diff-file-thread-outlet) {
  box-sizing: border-box;
  position: sticky;
  inset-inline-start: var(--lf-diff-gutter-width);
  max-inline-size: var(--lf-diff-thread-width);
}
.lf-diff-file-thread-outlet {
  margin-top: 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.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;
}
@media print {
  .lf-diff-tools,
  .lf-diff-file-actions,
  .lf-diff-comment {
    display: none !important;
  }
  .lf-diff-file > :is(.lf-diff-fold, .lf-diff-metadata) {
    margin-top: 0 !important;
  }
  :scope:host(.lf-rendered) .lf-diff-file > details > summary {
    padding-right: 10px;
  }
  :scope:host(.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;
  }
  :scope:host(.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: normal;
    overflow-wrap: anywhere;
  }
  .lf-diff-head .lf-diff-dir[data-folder-hidden] {
    opacity: 1;
  }
  .lf-diff-head wbr {
    display: inline;
  }
  .lf-diff-filtered {
    display: block !important;
  }
  [data-line] {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
  }
  code[data-code] {
    overflow-x: visible !important;
    --lf-diff-row-fill: 0;
  }
  .lf-diff-thread-outlet:not(.lf-diff-file-thread-outlet) {
    position: static;
    max-inline-size: none;
  }
}
}
}
@layer lf-base {
@scope (:is(lf-call-diff, lf-diff)) {
/* Generated from skills/leaf/packages/diff/styles/theme.css by build/styles.mjs. */
/* skills/leaf/packages/diff/styles/palette.css */
:where(:scope, :scope:host) {
  --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));
}

/* skills/leaf/packages/diff/styles/theme.css */
:scope:is(lf-diff) {
  contain: inline-size;
}
:scope:is(lf-diff).lf-rendered {
  font-family: var(--mono);
  font-size: var(--code-size);
  line-height: var(--code-line);
  font-variant-ligatures: none;
}
:scope:is(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-7);
  text-overflow: ellipsis;
}
.lf-call-group > summary {
  list-style: none;
  cursor: pointer;
}
.lf-call-group > summary::-webkit-details-marker {
  display: none;
}
.lf-call-group > summary::before {
  content: "›";
  align-self: center;
  grid-column: 1;
  grid-row: 1;
  color: var(--code-muted);
  font-family: var(--sans);
  font-weight: 700;
  text-align: center;
  transition: transform 120ms ease;
}
.lf-call-group[open] > summary::before {
  transform: rotate(90deg);
}
.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-7);
  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 {
  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,
.lf-call-invalid {
  display: block;
  min-width: 0;
  padding: var(--sp-3);
  color: var(--code-muted);
  font-family: var(--sans);
  white-space: normal;
}
.lf-call-invalid {
  color: var(--danger-ink);
}
@media print {
  :scope:is(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 {
@scope (:is(lf-playground, lf-playground-choice, lf-playground-control, lf-playground-output, lf-playground-preset, lf-playground-preview, lf-playground-setting, lf-playground-value)) {
/* A playground is an instrument laid out as a sidebar page's body beside its aside: the
 * real preview is the stage and owns the larger field, and the controls that change all
 * of it stand above the instruction they write, with its actions, in a rail beside it. A
 * control written inside the preview stands there, beside the item it changes, and the
 * rail then holds only what is left. Its regions are up to three generated panes
 * (data-lf-reading-role="pane", the kernel's theme.css), whose bodies scroll where a
 * workspace Layout fills the window (layouts.css); here the playground only places the
 * panes and draws them.
 *
 * Each region is drawn once. The playground itself is no card: the stage is the
 * preview's own well, and each rail pane is a panel as a sidebar page draws its regions
 * (theme.css, section.panel), so a candidate the page draws on the stage is the only
 * surface inside the well rather than a card in a well in a card. */
:scope:is(lf-playground) {
  --lf-block-frame: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  box-sizing: border-box;
  /* A grid box keeps the width it states, so it fills its holder, and a granted
   * `data-width` widens it (layouts.css). */
  width: 100%;
  margin: var(--sp-4) 0;
  container-type: inline-size;
}

/* Built, the playground holds its grid of regions alone, which takes the height it is
 * given in a bounded workspace and its content's anywhere else. */
:scope:is(lf-playground):has(> .lf-playground-split) {
  grid-template-rows: minmax(0, 1fr);
}

/* The stage beside a rail: the preview takes two thirds and spans the rail's two rows; the
 * controls take their content's height and the instruction stands under them. Narrower
 * than 43.5rem, a document's column included, a rail would be too narrow for the controls
 * it holds, so the regions stack in reading order: the stage, the controls, the
 * instruction. */
.lf-playground-split {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 43.5rem) {
  .lf-playground-split {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .lf-playground-preview-region {
    grid-row: 1 / span 2;
    align-self: stretch;
  }

  .lf-playground-instruction-region {
    align-self: start;
  }
}

/* Full-height (a workspace Layout gives it a definite height to fill, `--lf-full-height`),
 * the playground and its split take that height, the controls give up height and scroll
 * while the instruction and its actions stay whole under them, down to the controls'
 * floor; below it the instruction takes its track rather than its content's height, and
 * its body scrolls instead of running past the window. */
@media screen {
  @container style(--lf-full-height: 1) {
    /* Each box passes the height on, so the panes in the split are told they have one
       (`--lf-full-height`, layouts.css) and scroll their bodies. */
    :scope:is(lf-playground) {
      min-block-size: 0;
      margin-block: 0;
      --lf-full-height: inherit;
    }

    .lf-playground-split {
      min-block-size: 0;
      --lf-full-height: inherit;
    }

    @container (min-width: 43.5rem) {
      .lf-playground-split {
        grid-template-rows: minmax(12rem, 1fr) auto;
      }

      .lf-playground-instruction-region {
        align-self: stretch;
      }
    }
  }
}

/* The stage draws nothing of its own: the preview's well is its surface. */
.lf-playground-preview-region {
  border: 0;
  border-radius: 0;
  background: transparent;
}

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

/* The well fills the stage however tall the rail beside it stands, and is never held
 * shorter than what it shows: a held stage scrolls instead. */
.lf-playground-preview-body > lf-playground-preview {
  flex: 1 0 auto;
}

/* A rail pane is a panel: the card a sidebar page draws each region in, titled in the panel's
 * small capitals. Only a playground draws these regions, so the rules name no scope
 * root: `:scope` would weigh a class, and the presets band's rule below would lose its
 * bottom rule and padding to the generic header's. */
:is(.lf-playground-controls-region, .lf-playground-instruction-region) {
  border-color: var(--rule);
  background: var(--card);
}

:is(.lf-playground-controls-region, .lf-playground-instruction-region) > header {
  padding: 14px 18px 0;
  border: 0;
}

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

:is(.lf-playground-controls-region, .lf-playground-instruction-region) > footer {
  padding: 12px 18px;
}

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

.lf-playground-instruction-title {
  color: var(--muted);
  font: 600 var(--t-6)/1.3 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.lf-playground-controls-title {
  margin: 0;
  color: var(--muted);
  font: 600 var(--t-6)/1.3 var(--sans);
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

:scope:is(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;
}

/* Native fields have their full platform geometry before any component upgrade. */
:scope:is(lf-playground-control) > .lf-playground-input {
  grid-column: 1 / -1;
  box-sizing: border-box;
  inline-size: 100%;
  font: inherit;
  accent-color: var(--accent);
}
:scope:is(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);
}
:scope:is(lf-playground-control) > input[type="checkbox"] {
  grid-column: 2;
  grid-row: 1;
  inline-size: max(1.2rem, var(--aim-floor));
  block-size: max(1.2rem, var(--aim-floor));
  justify-self: end;
  cursor: pointer;
}
:scope:is(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: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
  gap: var(--sp-1);
}
:scope:is(lf-playground-choice) {
  display: contents;
}
.lf-playground-choice-face {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--sp-1) var(--sp-2);
  min-block-size: var(--aim-floor);
  box-sizing: border-box;
  cursor: pointer;
  font: var(--t-5)/1.55 var(--sans);
}
.lf-playground-choice-face:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.lf-playground-radio {
  margin: 0;
  accent-color: var(--accent);
}
.lf-playground-radio[data-lf-focus] {
  outline: none;
}
.lf-playground-choice-face:has(> input[data-lf-focus]) {
  outline: var(--focus-ring);
  outline-offset: 2px;
  --lf-focus-ring: playground-choice;
}

.lf-playground-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.lf-playground-presets-title {
  margin-right: var(--sp-2);
  color: var(--muted);
  font: 600 var(--t-6)/1.3 var(--sans);
}

:scope:is(lf-playground-preset) {
  display: contents;
}

:scope:is(lf-playground-setting) {
  display: none;
}

/* The stage: one well the preview's artifacts stand on. A stage the rail beside it holds
 * taller than the artifacts sets them in its middle rather than leaving its lower half
 * bare, and one they overflow starts them at its top. */
:scope:is(lf-playground-preview) {
  --lf-block-frame: 1;
  display: grid;
  align-content: safe center;
  min-width: 0;
  min-height: 18rem;
  padding: var(--sp-4);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--field);
}

/* The instruction is the task the agent receives, read at the size of the controls
 * that wrote it rather than as a caption under them. */
:scope:is(lf-playground-output) {
  --lf-block-frame: 1;
  display: block;
  margin: 0;
  color: var(--ink-2);
  font: var(--t-5)/1.55 var(--sans);
}

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

.lf-playground-actions {
  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;
}

/* All feedback words occupy the same grid cell, so CSS reserves their real
 * wrapped extent rather than measuring and fixing a width after startup. */
.lf-playground-copy-trigger {
  display: inline-grid;
}
.lf-playground-copy-label {
  grid-area: 1 / 1;
  visibility: hidden;
}
.lf-playground-copy-trigger[data-copy-state="rest"] .rest,
.lf-playground-copy-trigger[data-copy-state="success"] .success,
.lf-playground-copy-trigger[data-copy-state="error"] .error {
  visibility: visible;
}
.lf-playground-copy-trigger[data-copy-state="success"] {
  border-color: var(--ok);
  background: var(--ok-tint);
  color: var(--ok-ink);
}
.lf-playground-copy-trigger[data-copy-state="error"] {
  color: var(--danger-ink);
}

/* A quoted playground is its preview and instruction as authored, without the controls
 * written in either place. */
:scope:is(lf-playground).lf-playground-quoted lf-playground-control,
:scope:is(lf-playground).lf-playground-quoted > lf-playground-preset {
  display: none;
}

@container (max-width: 38rem) {
  :scope:is(lf-playground-preview) {
    min-height: 14rem;
  }
}
}
}
@layer lf-base {
@scope (:is(lf-visual-review)) {
/* Generated from skills/leaf/packages/visual-review/styles/theme.css by build/styles.mjs. */
/* skills/leaf/packages/visual-review/styles/theme.css */
:scope:is(lf-visual-review) {
  --lf-block-frame: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-sizing: border-box;
  margin-block: var(--sp-4);
  overflow: clip;
  border: 1px solid var(--border-2);
  border-radius: calc(var(--r) * 1.25);
  background: var(--paper);
  font: var(--t-5) / 1.4 var(--sans);
  container-type: inline-size;
}
@media screen {
  @container style(--lf-full-height: 1) {
    :scope:is(lf-visual-review) {
      min-block-size: 0;
      margin-block: 0;
      --lf-full-height: inherit;
    }
  }
}
.lf-vr-title,
.lf-vr-case-position,
.lf-vr-provenance,
.lf-vr-progress {
  margin: 0;
}
.lf-vr-case-position {
  color: var(--muted);
  font: 600 var(--t-6) / 1.35 var(--sans);
  letter-spacing: .055em;
  text-transform: uppercase;
}
.lf-vr-title {
  margin-top: 2px;
  font: 700 var(--t-3) / 1.2 var(--sans);
}
.lf-vr-head {
  --lf-block-frame: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 94%, var(--accent));
}
.lf-vr-progress {
  flex: none;
  color: var(--muted);
  font: 600 var(--t-6) / 1.35 var(--sans);
}
.lf-vr-evidence-region {
  border: 0;
  border-radius: 0;
}
.lf-vr-queue {
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
}
.lf-vr-queue-region {
  display: grid;
  --lf-vr-step-width: max(4.5rem, var(--aim-floor));
  grid-template-columns: minmax(0, 1fr) repeat(2, var(--lf-vr-step-width));
  gap: var(--sp-2);
}
.lf-vr-case-select,
.lf-vr-inspector-group,
.lf-vr-inspector-choice {
  --wa-form-control-height: max(30px, var(--aim-floor));
}
.lf-vr-case-select {
  min-width: 0;
  width: 100%;
}
.lf-vr-previous,
.lf-vr-next {
  padding-inline: var(--sp-2);
}
.lf-vr-case-select::part(display-input) {
  text-overflow: ellipsis;
}
.lf-vr-inspector {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
}
.lf-vr-inspection-summary {
  width: fit-content;
  color: var(--accent);
  cursor: pointer;
}
.lf-vr-inspection {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.lf-vr-inspection[open] > .lf-vr-inspector {
  margin-block: var(--sp-2);
}
.lf-vr-toolbar-slot {
  padding-block: var(--focus-ring-w);
}
@media screen {
  .lf-vr-evidence-region {
    --lf-vr-queue-h: calc(max(30px, var(--aim-floor)) + 2 * var(--sp-2) + 1px);
    --lf-top-outer: var(--lf-top);
  }
  .lf-vr-queue {
    position: sticky;
    top: var(--lf-top);
    z-index: 2;
    box-sizing: border-box;
    block-size: var(--lf-vr-queue-h);
    background: var(--paper);
  }
  .lf-vr-cases {
    --lf-top: calc(var(--lf-top-outer) + var(--lf-vr-queue-h));
  }
  .lf-vr-toolbar-slot {
    position: sticky;
    top: var(--lf-top);
    z-index: 1;
    margin-inline: calc(-1 * var(--sp-3));
    padding: var(--focus-ring-room) var(--sp-3) var(--focus-ring-w);
    background: var(--paper);
  }
  .lf-vr-shot-host {
    isolation: isolate;
  }
}
.lf-vr-inspector[hidden] {
  display: none;
}
.lf-vr-inspector-group[hidden] {
  display: none;
}
.lf-vr-inspector-group {
  min-width: 0;
}
.lf-vr-case-select::part(form-control-label),
.lf-vr-inspector-group::part(form-control-label),
.lf-vr-opacity::part(label) {
  display: none;
}
.lf-vr-inspector-group::part(form-control-input) {
  gap: 0;
}
.lf-vr-inspector-label {
  margin-right: var(--sp-2);
  color: var(--muted);
  font: 600 var(--t-6) / 1.3 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lf-vr-opacity-control {
  display: none;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1 1 11rem;
}
.lf-vr-opacity-control[data-active=true] {
  display: grid;
}
.lf-vr-opacity-control > .lf-vr-inspector-label {
  grid-column: 1 / -1;
  margin: 0;
  white-space: normal;
}
.lf-vr-opacity {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.lf-vr-opacity-value {
  min-width: 3ch;
  margin: 0;
  color: var(--ink-2);
  font: var(--t-6) / 1.3 var(--mono);
  text-align: end;
  white-space: nowrap;
}
.lf-vr-cases {
  min-width: 0;
  --lf-pane-top: 0px;
  padding: 0;
}
.lf-vr-case {
  box-sizing: border-box;
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
}
.lf-vr-case[hidden] {
  display: none;
}
.lf-vr-case-head {
  min-width: 0;
}
.lf-vr-case-heading {
  display: grid;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}
.lf-vr-case-title {
  margin: 0;
  font: 700 var(--t-4) / 1.25 var(--sans);
}
.lf-vr-claim {
  display: grid;
  grid-template-areas: "action-term result-term" "action result";
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
  gap: 0 var(--sp-4);
  margin: 0;
}
.lf-vr-claim dt {
  color: var(--muted);
  font: 600 var(--t-6) / 1.4 var(--sans);
}
.lf-vr-claim dd {
  margin: 0;
  color: var(--ink-2);
  font: var(--t-5) / 1.4 var(--sans);
}
.lf-vr-action-term {
  grid-area: action-term;
}
.lf-vr-action {
  grid-area: action;
}
.lf-vr-result-term {
  grid-area: result-term;
}
.lf-vr-result {
  grid-area: result;
}
.lf-vr-links,
.lf-vr-dispositions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.lf-vr-links > a {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  text-decoration: none;
}
.lf-vr-links .lf-external-mark {
  width: .9em;
  height: .9em;
  margin: 0;
  vertical-align: 0;
}
.lf-vr-candidate-link {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-2));
  color: var(--accent);
}
.lf-vr-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule);
}
.lf-vr-details {
  grid-column: 1 / -1;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.lf-vr-details[open] {
  display: grid;
  gap: var(--sp-2);
  width: auto;
}
.lf-vr-details-summary {
  width: fit-content;
  margin-inline-start: auto;
  color: var(--muted);
  font: 600 var(--t-6) / 1.4 var(--sans);
  white-space: nowrap;
}
.lf-vr-provenance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: var(--sp-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--card);
  color: var(--muted);
  font: var(--t-6) / 1.4 var(--sans);
}
.lf-vr-detail:not([hidden]) {
  display: grid;
  align-content: start;
  gap: 1px;
  min-width: 0;
}
.lf-vr-detail > dt {
  font-weight: 650;
}
.lf-vr-detail > dd {
  margin: 0;
}
.lf-vr-revisions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.lf-vr-detail :is(.lf-vr-base-revision, .lf-vr-candidate-revision) {
  overflow-wrap: anywhere;
}
.lf-vr-provenance :is(code, time) {
  color: var(--ink-2);
  font: inherit;
}
.lf-vr-shot-host {
  box-sizing: border-box;
  display: grid;
  align-items: start;
  justify-items: center;
  min-width: 0;
  width: 100%;
  overflow: auto hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--field) 42%, var(--paper));
}
.lf-vr-review {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
}
.lf-vr-review-status {
  flex: 1 1 12rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-6);
}
.lf-vr-next-remaining {
  min-height: max(38px, var(--aim-floor));
}
.lf-vr-disposition {
  min-height: max(38px, var(--aim-floor));
  padding-inline: var(--sp-3);
  border-color: var(--ink-2);
  font-weight: 700;
}
.lf-vr-thread-outlet:empty {
  display: none;
}
.lf-vr-empty {
  margin: 0;
  padding: var(--sp-5);
  color: var(--muted);
  font: var(--t-5) var(--sans);
  text-align: center;
}
@container (max-width: 28rem) {
  .lf-vr-claim {
    grid-template-areas: "action-term" "action" "result-term" "result";
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .lf-vr-head,
  .lf-vr-case-head,
  .lf-vr-support {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }
  .lf-vr-head,
  .lf-vr-support {
    flex-direction: column;
  }
  .lf-vr-provenance {
    grid-template-columns: minmax(0, 1fr);
  }
  .lf-vr-detail > dd {
    overflow-wrap: anywhere;
  }
  .lf-vr-revisions {
    grid-template-columns: minmax(0, 1fr);
  }
  .lf-vr-inspector {
    gap: var(--sp-2);
  }
  .lf-vr-opacity-control {
    margin-top: 2px;
  }
}
@container (max-width: 18rem) {
  .lf-vr-queue-region {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lf-vr-case-select {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .lf-vr-evidence-region {
    --lf-vr-queue-h: calc(2 * max(30px, var(--aim-floor)) + 3 * var(--sp-2) + 1px);
  }
}
@media print {
  .lf-vr-review,
  .lf-vr-queue,
  .lf-vr-inspection {
    display: none !important;
  }
  .lf-vr-case[hidden] {
    display: grid !important;
  }
  .lf-vr-case + .lf-vr-case {
    border-top: 1px solid var(--rule);
    break-before: page;
  }
  .lf-vr-shot-host {
    overflow: visible;
  }
  .lf-vr-details > summary {
    display: none;
  }
  .lf-vr-details > .lf-vr-provenance {
    display: grid;
  }
  :scope:is(lf-visual-review),
  .lf-vr-head {
    background: transparent;
  }
}
.lf-vr-analysis {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}
}
}
@layer lf-base {
@scope (:is(lf-trace, lf-trace-bookmark, lf-trace-compare)) {
/* The page sets scope; the timeline places every mark on one time scale. One
 * flexible viewport holds empty and captured states; short stages grow in flow.
 * Parents own spacing: theme steps separate groups; smaller steps join their parts. */
:scope:is(lf-trace) {
  --lf-trace-control-size: 44px;
  --lf-trace-small-type: max(12px, var(--t-6));
  /* Aim for the reading band; the stage's intrinsic minimum preserves detail. */
  --lf-trace-stage-height: max(320px, calc(100dvh - var(--lf-top) - var(--lf-bottom-bar-h) - 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-body { min-inline-size: 0; }
:scope:is(lf-trace)[hidden]:not([hidden="until-found"]) { display: none; }
:scope:is(lf-trace)[hidden="until-found"] { margin: 0; padding: 0; border: 0; }
.lf-trace-stage { 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); min-inline-size: 0; }
.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:not([hidden]) { 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:not([hidden]) { min-inline-size: 0; flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
/* Keep source names visible and let the shared control own keyboard selection. */
.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:not([hidden]) { 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; }
/* Digits narrower than 0 and the shorter "." and " s" keep any label within its
 * reserve, in fonts without tabular figures too. */
.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); }

/* The timeline: lane names, then a native horizontal scroller holding the ruler,
 * the lanes and the playhead. Every mark's left edge is its time:
 * left = edge + t × (track − 2 × edge), with t the fraction of the recording.
 * The scale runs left to right in every text direction, as a chart's time axis
 * does; the step arrows read their direction from it (`rowArrows`). */
.lf-trace-timeline:not([hidden]) {
  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;
  display: grid;
  /* A fixed name column: a font arriving cannot move the time scale. */
  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] { --lf-focus-ring: trace-timeline; 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-2, var(--paper)); color: var(--muted); }
.lf-trace-lane-name { display: flex; align-items: center; padding-inline: var(--sp-2); overflow: hidden; white-space: nowrap; 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 { block-size: var(--lf-trace-ruler-h); border-block-start: 0; }
.lf-trace-lane-name-input { block-size: var(--lf-trace-input-h); }
.lf-trace-lane-name-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; block-size: var(--lf-trace-ruler-h); color: var(--muted); }
.lf-trace-lane { position: relative; 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-input { block-size: var(--lf-trace-input-h); }
.lf-trace-lane-captures { block-size: var(--lf-trace-capture-h); }
: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; }
/* The last label reads back from its tick, inside the scale. */
.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; }
/* Grid lines continue the major ticks through the lanes. */
.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; }
/* Bars span their recorded call; a 2px floor keeps an instant visible. */
.lf-trace-bar { inline-size: max(2px, calc(var(--d) * var(--lf-trace-span))); box-sizing: border-box; border-radius: 2px; 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, var(--paper-2)); }
/* An input bar is its call's window, drawn open so it cannot read as a key held
 * down; the solid notch is the Action checkpoint, just before the input is sent. */
.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; }
/* A label sits above its first call's bar, its left edge on that bar's start. */
.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; }
/* A moment flag's staff stands on its time; its numbers read to the right. */
.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 8px 8px 0; background: var(--paper-2, var(--paper)); border: 1px solid var(--border-2); border-inline-start: 0; font-weight: 600; }
/* Near the end of the scale a label points back from its staff. */
: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: 8px 0 0 8px; border-inline-start: 1px solid var(--border-2); border-inline-end: 0; }
/* Ticks with an image are the strong ones; a checkpoint without one is faint. */
.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); }
/* The selected mark's own name is highlighted, inside a shared label too. */
:is(.lf-trace-word, .lf-trace-more)[data-current] { border-radius: 2px; background: var(--accent); color: var(--paper); box-shadow: 0 0 0 2px var(--accent); }
/* A moment flag shows its selection on its staff and pill instead. */
.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: 6px; background: var(--paper-2, 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); }
/* The playhead: one line across every lane on the shared time coordinate. */
.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; }
/* The handle's box is its hit target, the ruler's height and wider than the mark it
 * draws; the mark sits below the ruler's labels so no time label hides behind it. */
.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-start: calc(var(--lf-trace-ruler-h) - 10px); 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-2, 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: 2px; 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-legend { grid-column: 1 / -1; margin: 0; padding: var(--sp-1) var(--sp-2); border-block-start: 1px solid var(--border-2); color: var(--muted); font: var(--lf-trace-small-type) / 1.4 var(--sans); max-inline-size: none; }
.lf-trace-tip:not([hidden]) { position: absolute; 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:not([hidden]) { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); inline-size: 100%; block-size: var(--lf-trace-control-size); border: 0; border-radius: var(--r); padding: var(--sp-2); background: none; color: var(--ink); text-align: start; font: inherit; cursor: pointer; }
.lf-trace-moment-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lf-trace-bookmark[data-lf-focus] { --lf-focus-ring: trace-bookmark; outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-w)); }
.lf-trace-bookmark:hover, .lf-trace-bookmark[aria-current] { color: var(--accent); background: var(--accent-tint); }
.lf-trace-bookmark:disabled { color: var(--muted); cursor: default; }
.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; }
/* Point metadata owns its scroll. Frame gaps and disclosure cannot shrink the
 * surrounding page or pull a control out from under a reader during playback. */
.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] { --lf-focus-ring: trace-metadata; outline: var(--focus-ring); 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 { 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:not([hidden]) { position: absolute; inset: 0; max-inline-size: none; display: grid; place-items: center; box-sizing: border-box; background: var(--paper-2, 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); }
/* An open saved tree keeps one inspection extent as checkpoints replace its
 * nodes. Its own scroll exposes long trees without carrying adjacent targets. */
.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; 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); }
:scope:is(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:not([hidden]) { 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; }
/* A sticky header: its controls stand its top padding below where it sticks, which
 * the layer's focus margin reads (`--lf-head-inset`, kernel shadow.css). */
.lf-trace-toolbar { position: sticky; top: var(--lf-top); --lf-head-inset: var(--sp-1); z-index: 3; background: var(--paper); padding-block: var(--sp-1); margin-block-end: var(--sp-2); display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.lf-trace-transport, .lf-trace-zoom-controls:not([hidden]) { 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%; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; padding-inline: var(--sp-2); }
.lf-trace-pace select[data-lf-focus] { --lf-focus-ring: trace-pace; outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-w)); }
.lf-trace-transport-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); flex: 0 0 auto; min-inline-size: var(--lf-trace-control-size); block-size: var(--lf-trace-control-size); padding: 0 var(--sp-2); border: 0; border-radius: var(--r); background: none; color: var(--ink); font: 500 var(--lf-trace-small-type)/1 var(--sans); cursor: pointer; }
.lf-trace-transport-button:hover { background: var(--paper-2); }
.lf-trace-transport-button[data-lf-focus] { --lf-focus-ring: trace-transport-button; outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-w)); }
.lf-trace-transport-button:disabled { color: var(--muted); cursor: default; }
/* One width for Play and Pause, so the readout beside it never moves when playback ends. */
.lf-trace-play { inline-size: 6.5em; min-inline-size: 86px; background: var(--accent-tint); color: var(--accent); }
.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-play { inline-size: var(--lf-trace-control-size); min-inline-size: var(--lf-trace-control-size); }
  .lf-trace-play > span { display: none; }
  .lf-trace-selection { font-size: var(--lf-trace-small-type); }
  /* Lane names give way to the time scale on narrow screens. */
  .lf-trace-timeline:not([hidden]) { 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-2, var(--paper)); }
.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-2, 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:not([hidden]) { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin-block: var(--sp-2) 0; }
.lf-trace-image-tools button { min-block-size: var(--lf-trace-control-size); }
.lf-trace-image-tools button[aria-label] { inline-size: var(--lf-trace-control-size); }
/* Status changes share one slot; loading a frame cannot wrap the tools into a new row. */
.lf-trace-image-zoom { 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 > img[hidden] { display: none; }
.lf-trace-canvas[data-lf-focus] { --lf-focus-ring: trace-canvas; 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-image-zoom { margin-inline-start: 0; inline-size: 100%; text-align: start; }
  .lf-trace-capture-footer { gap: var(--sp-2); }
}

/* A playback frame stands exactly where lf-trace.js places it, over the committed
   capture, rather than stretched to the canvas as its source image is. */
.lf-trace-canvas > .lf-trace-playback-image { position: absolute; z-index: 1; inset: auto; max-inline-size: none; pointer-events: none; }
/* The image names the input its capture belongs to. */
.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; }

/* The workspace spaces its parts itself; a recording inside it takes no margin. */
:scope:is(lf-trace-compare) { display: flex; flex-direction: column; min-inline-size: 0; --lf-trace-control-size: 44px; --lf-trace-compare-top: var(--lf-top); --lf-trace-compare-head: 44px; font: var(--t-5) / 1.45 var(--sans); }
.lf-trace-compare-controls { margin-block-end: var(--sp-2); position: sticky; inset-block-start: var(--lf-trace-compare-top); z-index: 4; background: var(--paper); padding-block: var(--sp-1); }
:scope:is(lf-trace-compare) > lf-trace { margin-block: 0; --lf-top: calc(var(--lf-trace-compare-top) + var(--lf-trace-compare-head)); }

/* Prepaint chooses the same recording as the upgraded workspace. Without an
 * interactive runtime, every labeled recording remains available in page flow. */
@scope (html[data-lf-interactive] :scope) {
  :scope:is(lf-trace-compare):not(:defined):has(> lf-trace) {
    &::before { content: ""; display: block; block-size: calc(var(--lf-trace-control-size) + 2 * var(--sp-1)); margin-block-end: var(--sp-2); }
    & > lf-trace:not([data-lf-opening]) { display: none; }
  }
}
}
}
@layer lf-theme {
/* Product-site furniture. Published examples keep their authored Leaf layer. */

/* Leaf's banner already opens every product page, so the column starts at the runtime's
 * narrow-screen top padding at every width. Every Layout reads the room above the page
 * from this token. */
body.site-page {
  --page-pad-start: 28px;
}

/* The nav holds the reading column whatever Layout the page gives main, so the brand
 * and routes stay in one place from page to page. */
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;
}
}
/* Layouts: starting points a page pulls on by class. They are plain CSS above the
 * layer the kernel and every widget package share (lf-base), below theme packages,
 * semantic state and the page's own stylesheet, which is unlayered. So a Layout
 * resets what the base and widgets set on the boxes it arranges, and a page adjusts a
 * Layout with ordinary rules or writes its own; nothing reads a Layout back. The layer
 * merge appends this file after every package (layer.py, composed_sheets). */
/* `--lf-full-height: 1` says a box was given a definite height for its children to fill.
 * It does not inherit, so a style query, which asks the queried box's parent, holds only
 * for a child of a box that says so: the workspace's `main` says it of its body, and a
 * widget that fills the height it was given says it again for its own parts
 * (`--lf-full-height: inherit`), as a playground does for its panes. A widget deeper in
 * the body, in a section or a tab, is not told, and takes its content's height. */
@property --lf-full-height {
  syntax: "*";
  inherits: false;
}
@layer lf-layouts {
  /* Each page Layout below owns its page's whole geometry, the body's included, so a
   * page with no Layout keeps the browser's. A Layout takes the window from its edges:
   * the body drops its margin and, on a live page other than a block sample (whose frame
   * takes the body's height, theme.css), fills the window's height. The body is styled
   * before the parser reaches `main`, so its rules read the Layout delivery repeats on
   * the root (`data-lf-layout`, revision_delivery.py) rather than `main`'s class, which
   * would hold the body at the browser's margin until then. On `main` it sets its gutter,
   * its room above and below its blocks, and whether its first and last blocks' margins
   * trim. The column and the sidebar page are documents, and they alone set the measure
   * their text keeps (`--lf-measure`), which theme.css reads at the base layer, where a
   * widget's own rule outranks it, and allocate the room each block declares
   * (`data-lf-space`, below). A workspace does neither: the page's grid sizes its
   * regions, so a block fills the region it stands in whatever it declares, and there is
   * nothing for the workspace to switch off. */
  /* The pane role's grammar (theme.css, where its look and the rest of its contract
   * are): which row each child stands in, and a body held to the pane's width with no
   * margin of its own. It is not a Layout a page pulls on, but it resets what a widget
   * sets on the box it arranges as a Layout does, so it shares their tier. */
  [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;
  }
  [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;
  }
  /* The column: prose at the reading measure, centred in the shell, and one option, a
   * breakout, which `data-width` on a block (or a widget's preferred x-space) asks for.
   * The breakout reads the room free beside the column from the lengths resolved here,
   * so it is the same arithmetic wherever the column stands. Whatever stands in a
   * margin states the room it takes there (`--lf-taken-l`, `--lf-taken-r`), which comes
   * off that side's free room: the contents map's spine, a sidebar, a project widget's
   * own resident.
   *
   * The column moves off centre by `--lf-shift` where a sidebar or sidenote needs more
   * room on one side than centring leaves it; the margin pass measures and writes it
   * (prepaint.js, `residency`), and the free room on each side follows.
   *
   * The free room is the shell's (100cqi), so the column is a page's shape, on `main`,
   * and arranges no other box. */
  html[data-lf-layout~="column"] body { margin: 0; }
  @media screen {
    html[data-lf-live][data-lf-layout~="column"]:not([data-lf-sample-block]) body {
      min-height: 100%;
    }
  }
  main.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-block-frame: trim;
    --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 {
    /* The column requests its shell tracks through --lf-column-shell; the initial
     * geometry reader publishes that request on body before measuring the room.
     * Place the column through shell tracks. An inset, transform or margin changing
     * on a reading's ancestor suppresses native scroll anchoring just when residents
     * enter or leave the flow. Edge tracks move the same axis without suppressing it.
     * The column keeps its shell-based measure even where the middle track is narrow;
     * other body rows, including the banner spacer, retain the whole shell. */
    body[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)));
    }
    body[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,
    body[data-lf-column-shell] > :not(main) { grid-column: 1 / -1; }
    body > main.layout-column {
      --lf-column-shell: grid;
      grid-column: 2; justify-self: center;
      width: max(0px, calc(100cqi - 2 * var(--col-pad)));
    }
  }
  /* The column's margins. A column's first sidebar is a margin resident, as is every
   * sidenote: each states which it is (`--lf-resident`), and the margin pass admits it
   * where the room beside the column holds it (prepaint.js, `residency`),
   * moving the column over where one side lacks it. Each names the postures it may take,
   * in order of preference; these rules read the answer off `main`'s `data-lf-margin`,
   * one token per posture granted. Screen only: paper has no drawer and no margin to
   * grant. A sidebar in the margin stands sticky below the banner in the room its
   * --sidebar takes left of the column box. A contents map rests as a spine a few pixels
   * wide and reveals its labels over the page, so with a fine pointer a sidebar holding
   * one stands as the map alone, in --map, where the sidebar does not fit or the map is
   * all it holds. A sidenote hangs in the right margin where the pass admits it. It claims
   * nothing: a wide exhibit level with a note drops below it (`clear`) and then takes the
   * room, and a margin row level with a note stands on it as a pin (margin-layout.js). */
  @property --lf-resident { syntax: "*"; inherits: false; }
  /* An empty map-only slot is already in its eventual margin posture: no margin
   * and no formatting context separating the blocks on either side of it. */
  main.layout-column > aside.sidebar:nth-child(1 of aside.sidebar):has(> [data-lf-resident="map"]:only-child:empty) {
    display: block; margin-block: 0; }
  /* A resident changes its relationship to the flow; anchor the reading to its
   * passage instead of choosing the complementary text as a native scroll anchor. It is
   * a reading region of the Layout's own in either posture (`--lf-reading-region`,
   * reading-regions.js), scrolling in the margin and flowing in the column, so the
   * reader's place in it survives the change between them. */
  main.layout-column > aside.sidebar:nth-child(1 of aside.sidebar) {
    --lf-resident: sidebar; overflow-anchor: none; --lf-reading-region: layout; }
  main.layout-column aside.sidenote { --lf-resident: note; overflow-anchor: none; }
  @media screen {
    /* Sticky, it can stand level with any band of the page, so it takes its whole side: a
     * breakout grows only rightward past it. */
    main.layout-column[data-lf-margin~="sidebar"] {
      --lf-sidebar-posture: margin; --lf-taken-l: calc(var(--lf-beside) + var(--lf-shift));
      --lf-top-outer: var(--lf-top); }
    /* It scrolls what it holds, so it starts `--lf-top` and its landing band again for
     * that (theme.css) and sticks at the value its column met. What it holds is not a
     * stuck header's controls, so a focused link keeps the focus ring's room
     * (`--lf-head-inset`, shadow.css). */
    main.layout-column[data-lf-margin~="sidebar"] > aside.sidebar:nth-child(1 of aside.sidebar) {
      float: left; clear: left; position: sticky;
      top: calc(var(--lf-top-outer) + var(--sp-4)); --lf-top: 0px;
      --lf-top-covered: 0px; --lf-landing-room: 0px; --lf-head-inset: initial;
      width: calc(var(--sidebar) - var(--sp-4));
      max-height: calc(var(--lf-view-height) - 2 * var(--sp-4));
      overflow-y: auto;
      margin: 0 var(--sp-4) var(--sp-4) calc(-1 * var(--sidebar));
    }
  }
  /* A contents map in that slot rests as a spine a few pixels wide and reveals its labels
   * over the page; its package draws it there once this says the slot is in the margin,
   * as the map alone or in a sidebar standing there. A map is whatever declares
   * `x-resident: map`, which delivery paints as `data-lf-resident`. */
  @media screen and (hover: hover) and (pointer: fine) {
    main.layout-column > aside.sidebar:nth-child(1 of aside.sidebar):has([data-lf-resident="map"]) {
      --lf-resident: sidebar map; }
    /* A sidebar holding only the map has nothing for a float to hold, so the map alone. */
    main.layout-column > aside.sidebar:nth-child(1 of aside.sidebar):has(> [data-lf-resident="map"]:only-child) {
      --lf-resident: map; }
    main.layout-column[data-lf-margin~="map"] { --lf-sidebar-posture: margin; }
    /* At rest the map is its spine, chrome fixed in the left margin, so a breakout stops
     * short of it (the column's free room, above); its labels reveal over the page. */
    main.layout-column:is([data-lf-margin~="map"], [data-lf-margin~="sidebar"]):has(
      > aside.sidebar:nth-child(1 of aside.sidebar) [data-lf-resident="map"]) { --lf-taken-l: var(--map); }
    /* Standing alone, a map that was all its sidebar held leaves nothing in the flow, so the
     * sidebar takes no room there: without margins or a formatting context of its own, the
     * blocks on either side meet as they do where the sidebar floats. */
    main.layout-column[data-lf-margin~="map"]
      > aside.sidebar:nth-child(1 of aside.sidebar):has(> [data-lf-resident="map"]:only-child) {
      display: block; margin-block: 0; }
  }
  @media screen {
    main.layout-column[data-lf-margin~="note"] [data-lf-space]:not([data-lf-space="column"]) {
      clear: right; }
    main.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; }
  }
  /* Content that needs more space than the argument about it. The column above is the measure
   * prose is read at, and a board's columns or a diagram's graph are as wide as what they
   * hold — so a page carrying one was a cramped board, or a page whose every paragraph had
   * been widened to suit its widest exhibit. Neither is a choice a page should have to
   * make, and the tradition this borrows from doesn't: Distill sets text at l-body and
   * figures at l-page, Tufte holds the column and lets a figure go fullwidth. What keeps it
   * reading as design is that the prose axis never moves and there is one wider width, so
   * wide evidence is either in the column or at --wide and never at a number of its own.
   *
   * Which widgets those are is the registry's to say (x-space) and not this file's: a rule
   * naming lf-board would work perfectly for lf-board and do nothing at all for the
   * twelfth widget, which is the failure the whole vocabulary is arranged against. The
   * runtime marks what the registry declares, so this reaches a widget nobody has written
   * yet.
   *
   * The element grows out of the column rather than widening the prose around it. That is
   * the floor for free — a margin with nothing
   * to give gives nothing, and a widget nobody has stated a room for is exactly the column,
   * which is the layout the page already had. It is what makes an estimate safe to state,
   * too: a room read short can only fail to widen an exhibit, never narrow one below the
   * measure its own page is set to.
   *
   * The growth stops at main's gutters, less what the page's own residents take in each
   * margin (`--lf-taken-l`, `--lf-taken-r`, layouts.css). The rail takes nothing, so an
   * exhibit may grow into the room it would stand in. What stands level with an exhibit in
   * the margin is decided by what put it there. A sidenote is the page's own, so the exhibit
   * clears it (`clear`, at aside.sidenote). A margin row is Leaf's, so where a block grows
   * into the rail, the row stands on it as a pin (margin-placement.js): nothing Leaf draws
   * moves the page's content, and an exhibit keeps the same width however many comments
   * arrive beside it.
   *
   * Where one side has less room than the other, the freer side takes what the other
   * lacks instead of losing half the allocation to symmetry. With both sides equally free,
   * the element keeps the prose axis.
   *
   * Screen only. Paper has no window to take room from and a printed page is the column's
   * width, so leaving the rule out of print is the whole of what paper needs. On screen,
   * `body` is the size container. No surface Leaf opens changes its inline size, since each
   * stands over the page, and `main` subtracts the page's own two margin claims from that
   * one browser reading.
   *
   * The negative margins widen a box whose width is its holder's less its margins, which
   * an auto-width block is and a box with a width of its own is not: a table box (a
   * sample) moved left by the margin and kept the column's width, and an iframe, whose
   * size containment leaves it no intrinsic width, collapsed to its borders at the room's
   * left edge. So a breakout states its width as well, the room's: its holder's, and the
   * breakout's surplus on top where the box takes one. It outranks a widget's own width,
   * so a widget whose box fills its holder needs no part in the breakout. A page rule
   * sizing a breakout replaces the width and keeps the margins, which moves the box off
   * the prose axis; the render check names it (layout.js, `off-axis`). */
  /* Measured on each breakout alone, so they do not inherit: a block inside one stands in
   * its own holder. Zero until read, the holder taken as the column. */
  @property --lf-indent-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
  @property --lf-indent-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
  @media screen {
    /* `data-lf-space` is the room an element takes: what its tag or idiom declares
     * (x-space), or the page's own occurrence saying so (`data-width`). Delivery paints
     * it into the
     * served document (revision_delivery.py, `mark_declared`), so a width is in the first
     * paint rather than a reflow once leaf.js resolves. In a message the runtime withholds
     * the room deliberately, the document's rather than the panel's, by not painting it.
     * `column` is the measure text keeps rather than a breakout, so theme.css sets it in
     * the rule that sets the text's; the second rule grows `wide` and `available`, at the
     * weight of one attribute so each value's rule below refines it.
     *
     * Only a document allocates it: every rule below but the one that keeps a block's
     * content from widening its holder is held to the column and the sidebar page, so
     * a workspace, or a page with no Layout, gives a block the box it stands in.
     *
     * The first rule is the room's arithmetic, read on every allocated box. A box allocated
     * the column reaches no further than its holder, so it has no surplus, unless it spans
     * a breakout among its own blocks, as an Ask does (the default package's ask.css), and
     * reaches as far as that block. */
    :where(main.layout-column, main.layout-sidebar) [data-lf-space] {
      /* Held to what is free beside the page (main's --lf-free-l and --lf-free-r), and
       * spent so the box stands even about the prose axis where both sides have the
       * room; otherwise the freer side takes what the other lacks. A holder that stands
       * in from the column, as a list item does, has that much more room on that side
       * (`--lf-indent-l`, `--lf-indent-r`, which the runtime measures for each breakout,
       * prepaint.js `indent`), and the box grows that much more that way, so it keeps the
       * prose axis rather than the holder's own, which three nested items had moved 36px
       * right. Neither side's growth goes below zero, so the box always covers its
       * holder. */
      --lf-surplus: clamp(0px, calc(var(--lf-reach) - 100%),
        calc(var(--lf-free-l) + var(--lf-indent-l) + var(--lf-free-r) + var(--lf-indent-r)));
      --lf-grow-l: clamp(
        max(0px, calc(var(--lf-surplus) - var(--lf-free-r) - var(--lf-indent-r))),
        calc((var(--lf-surplus) + var(--lf-indent-l) - var(--lf-indent-r)) / 2),
        min(var(--lf-surplus), calc(var(--lf-free-l) + var(--lf-indent-l))));
      --lf-grow-r: calc(var(--lf-surplus) - var(--lf-grow-l));
    }
    :where(main.layout-column, main.layout-sidebar) [data-lf-space]:where(:not([data-lf-space="column"])) {
      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));
      /* The allocation is the box's outer width, as the column's is (theme.css), so a
       * padded callout granted `wide` stands at `--wide` beside a wide table rather than
       * its padding and border past it. */
      box-sizing: border-box;
    }
    /* A block that declares a wider room than the measure has a width that is its
     * holder's or its room's and never its content's, on every page, a workspace's
     * included: what it holds scrolls inside it. Without that the content's minimum is
     * what every shrink-to-fit holder is floored at, and the row-form option is one: a
     * table box hugging its label hugged a 985px graph instead, grew past the joined
     * group's border, and the group's clip cut the exhibit off with nothing reported; a
     * diagram in a workspace's 400px option group widened its row to 1,142px. Size
     * containment zeroes the box's say in any ancestor's intrinsic width. So this one
     * rule is held to no Layout. */
    [data-lf-space]:where(:not([data-lf-space="column"])) {
      contain: inline-size;
    }
    /* `wide` is one width wherever the block stands in a document. The breakout above
     * only grows a block past its holder, so in a holder already wider than `--wide`,
     * such as a sidebar page's body, the block would take the holder's width; the cap
     * holds it to the evidence width there, at the holder's start. A holder narrower than
     * `--wide` still bounds it, and `available` is the width that takes everything. */
    :where(main.layout-column, main.layout-sidebar) [data-lf-space="wide"] {
      --lf-reach: min(var(--wide), var(--lf-room, 0px));
      max-width: var(--wide);
    }
    :where(main.layout-column, main.layout-sidebar) [data-lf-space="available"] {
      --lf-reach: var(--lf-room, 0px);
    }
    /* A table is the one breakout whose box paints nothing of its own, only its columns'
     * rules, so the room it was granted is a limit rather than a size: spread across its
     * columns, an eight-column table stood at 1080px with 30px of nothing between each
     * pair. Its box takes the columns' natural width instead (`max-content`), at least its
     * holder's and at most an even span about the prose axis (`--lf-table-span`), so it
     * grows the same distance each way.
     *
     * One that fits its holder stays with it, starting where the holder's text does,
     * however far a list has indented it. One wider than its holder breaks out: it keeps
     * the holder's far edge until it is as wide as the column, then stands centred on
     * the prose axis, so it covers its holder at every width and never jumps. Its place
     * is the larger of the two offsets that rule gives from the holder's inline start,
     * each in the box's own width and the column's (`--lf-width`) less how far the holder
     * stands in from it (`--lf-indent-l`, `--lf-indent-r`, measured by the runtime).
     *
     * The box's own width over-constrains it, and the browser keeps it at the margin on
     * its holder's inline start, so that margin, and the offset's sign, follow the
     * holder's direction rather than the table's own: keyed to the table's, a
     * right-to-left table in a left-to-right page stood at 555..1664, not 165..1275. The
     * margin sets the box at the start of the span, which percentages of the holder can
     * say, and a translation, which can say the box's own width, moves it the rest of the
     * way. Firefox counts a translated box's untranslated place in what the page scrolls,
     * so a box laid out at the holder's start and translated back hung its far edge past
     * the window: 10px on a phone for a table in a step list. Laid out in the span, it
     * has nowhere past the window to hang.
     *
     * Where the margins are uneven, beside a contents map's spine or a column moved over
     * for a sidenote, the even span is twice the narrower side's room, so a grid wider
     * than it wraps or scrolls that much sooner: 48px sooner beside a map's spine at
     * 1440px. Where the left margin is spoken for, as by a sidebar standing there, an even
     * span would be the column alone, so a table wider than its holder starts at the
     * prose's left edge and grows right, in either direction, since the sidebar stands on
     * the left in both; there the span starts at the prose's left edge.
     *
     * The box's width is its content's, so it gives up the size containment above, and
     * would widen any holder that sizes itself to what it holds. It breaks out only down a
     * chain of block flow, where no holder does (prepaint.js, `indents`); a table the page
     * arranged itself (`data-lf-arranged`), as in a grid track, stays the contained table
     * reading.css makes it, its columns scrolling in its box. Nor is the table the
     * container its caption reads its width from (reading.css), so the caption is held to
     * the span, which is the box's width wherever the columns scroll. Only where the room
     * is the page's: in a frame or inside another breakout, the table fills or starts at
     * its holder as every table there does. Margins, percentages and translation place it
     * the same in every engine. Two layouts this replaced did not: aligning the anonymous
     * table grid inside a box the allocation's width (Firefox and WebKit left it at the
     * box's left edge), and translating the table's parts (column backgrounds and
     * collapsed borders stayed behind). A display of grid on the table set its head and
     * body apart. */
    @container not (style(--lf-room: 100%) or style(--lf-block-frame: 1)) {
      main.layout-column table:is([data-lf-space="wide"], [data-lf-space="available"]):not(
        :is([data-lf-space="wide"], [data-lf-space="available"]) table, [data-lf-arranged]) {
        contain: none;
        container-type: scroll-state;
        width: max-content;
        min-width: 100%;
        max-width: var(--lf-table-span);
        margin-left: calc(var(--lf-width) / 2 - var(--lf-indent-l) - var(--lf-table-span) / 2);
        margin-right: 0;
        translate: min(
          calc(var(--lf-table-span) / 2 - var(--lf-width) / 2 + var(--lf-indent-l)),
          max(calc(var(--lf-table-span) / 2 + var(--lf-width) / 2 - var(--lf-indent-r) - 100%),
            calc(var(--lf-table-span) / 2 - 50%))) 0;
        --lf-table-span: calc(var(--lf-width) + 2 * min(var(--lf-free-l), var(--lf-free-r)));
      }
      main.layout-column table[data-lf-space="wide"]:not(
        :is([data-lf-space="wide"], [data-lf-space="available"]) table, [data-lf-arranged]) {
        --lf-table-span: min(var(--wide),
          var(--lf-width) + 2 * min(var(--lf-free-l), var(--lf-free-r)));
      }
      :is(main.layout-column, main.layout-column *):dir(rtl)
        > table:is([data-lf-space="wide"], [data-lf-space="available"]):not(
        :is([data-lf-space="wide"], [data-lf-space="available"]) table, [data-lf-arranged]) {
        margin-left: 0;
        margin-right: calc(var(--lf-width) / 2 - var(--lf-indent-r) - var(--lf-table-span) / 2);
        translate: max(
          calc(var(--lf-width) / 2 - var(--lf-indent-r) - var(--lf-table-span) / 2),
          min(calc(100% - var(--lf-width) / 2 + var(--lf-indent-l) - var(--lf-table-span) / 2),
            calc(50% - var(--lf-table-span) / 2))) 0;
      }
      main.layout-column[data-lf-margin~="sidebar"]
        table:is([data-lf-space="wide"], [data-lf-space="available"]):not(
        :is([data-lf-space="wide"], [data-lf-space="available"]) table, [data-lf-arranged]) {
        margin-left: calc(-1 * var(--lf-indent-l));
        margin-right: 0;
        translate: min(var(--lf-indent-l),
          max(calc(var(--lf-width) - var(--lf-indent-r) - 100%), 0px)) 0;
        --lf-table-span: calc(var(--lf-width) + var(--lf-free-r));
      }
      main.layout-column[data-lf-margin~="sidebar"]
        table[data-lf-space="wide"]:not(
        :is([data-lf-space="wide"], [data-lf-space="available"]) table, [data-lf-arranged]) {
        --lf-table-span: min(var(--wide), var(--lf-width) + var(--lf-free-r));
      }
      :is(main.layout-column[data-lf-margin~="sidebar"],
        main.layout-column[data-lf-margin~="sidebar"] *):dir(rtl)
        > table:is([data-lf-space="wide"], [data-lf-space="available"]):not(
        :is([data-lf-space="wide"], [data-lf-space="available"]) table, [data-lf-arranged]) {
        margin-left: 0;
        margin-right: calc(var(--lf-width) - var(--lf-indent-r) - var(--lf-table-span));
        translate: max(calc(var(--lf-width) - var(--lf-indent-r) - var(--lf-table-span)),
          calc(100% - var(--lf-table-span))) 0;
      }
      main.layout-column table:is([data-lf-space="wide"], [data-lf-space="available"]):not(
        :is([data-lf-space="wide"], [data-lf-space="available"]) table,
        [data-lf-arranged]) > caption {
        max-inline-size: var(--lf-table-span);
      }
    }
    /* A breakout inside another takes its holder's width, and so does one the page
     * arranged itself (`data-lf-arranged`, prepaint.js `indents`): the room beside its box
     * is the page's own, such as a sibling track's words. A box allocated the column is
     * no holder of that kind: one that draws a frame withholds the room as any frame does
     * (below), and one that does not, such as an Ask, lets a breakout through as a section
     * does, and widens to one of its own blocks in a wider flow (theme.css). */
    :where(main.layout-column, main.layout-sidebar) [data-lf-space]:not([data-lf-space="column"]) [data-lf-space],
    :where(main.layout-column, main.layout-sidebar) [data-lf-arranged] {
      --lf-room: 100%;
    }
    /* A widget whose upgrade failed is showing the message and the source it choked on
     * (failSoft), and prose is the column's. The room it declared was for the drawing it
     * did not manage to make, so a parse error came out as a red slab across the whole
     * window with its message set on one 1600px line — the degrade path, which is the
     * worst place to be shouting. `.lf-error` is the layer's own word for this rather than
     * any widget's, so the next widget to fail soft is covered by having failed.
     *
     * The box is the message's holder here and not a clip, so the message fills it and
     * wraps. Both halves of that are said: a flex item is floored at its own content's
     * minimum unless told otherwise, and the source it holds is a `pre` that never wraps,
     * so the box came out as wide as the longest line — 854px of it in a 720px column,
     * scrolling, on the first real diagram source anyone fed it. The `pre` scrolls inside
     * the message instead, which is what a `pre` does everywhere else on the page. */
    :where(main.layout-column, main.layout-sidebar) [data-lf-space]:has(> .lf-error) { --lf-room: 0px; }
    /* A box that draws one of its own is a box a wide widget stays inside. The room is the
     * page's to give, and inside a disclosure or a callout the page is not what holds the
     * widget — a board that took the window from inside a <details> hung out over both
     * edges of the frame it was filed under, which reads as a broken page rather than as a
     * wide exhibit. Stated as the holder's own width rather than as an exception to the
     * rule above, so the widget fills its holder exactly.
     *
     * A box declares that it frames what it holds in the rule where it draws the frame
     * (`--lf-block-frame`), and the room is the second thing the layer reads out of that one
     * declaration: whoever draws a box gets both by saying one thing, in the layer that
     * draws it, and a project's card is covered the day it says it. Two lists of tags said
     * it before, one here and one in packages/default/theme.css, and a list beside a declaration is
     * a copy of it — every tag in them declared the frame, five boxes that declared were in
     * neither, and `figure`, which draws no box at all, was withholding the room.
     *
     * `--lf-room` inherits, so one rule at a box's own children reaches a widget however
     * deep inside it sits, and `--lf-block-frame` is reset one level in (above), so no box
     * answers for its grandparent's frame.
     *
     * Only a box that draws withholds the room (`--lf-block-frame: 1`). A box whose edges
     * trim but which draws nothing says `trim` instead: `main`, a page tab's panel, which
     * is a section of the page shown one at a time, and a command's goal, whose float
     * containment traps its children's margins. The room passes through each to what it
     * holds, so a wide exhibit in a page tab grows out as it would on a page without
     * tabs. The gate walks up no further than `main`.
     *
     * A transparent wrapper declares nothing: a section is the page's own flow, and an
     * exhibit breaking out through one is the point. What says so when a
     * box that draws has not declared is `page check --render`, which measures every
     * wide element against the nearest ancestor that draws one. It could not see through a
     * scroll container until a diagram in a board card was drawn 332px across the next
     * column, and four widgets letting a diagram out were found the day it could. */
    @container style(--lf-block-frame: 1) {
      :where(main.layout-column, main.layout-sidebar) * { --lf-room: 100%; }
    }
    /* When startup is incomplete, undrawn widgets show source in the column. */
    html[data-lf-startup-error]:not([data-lf-interactive]) :where(main.layout-column, main.layout-sidebar) [data-lf-space] {
      --lf-room: 0px;
    }

    /* A widget with a stated height (x-height, or data-height on an occurrence) has that
     * box from the first paint until its module has drawn (`lf-rendered`), so the drawing
     * lands in room the page already laid out. What the element holds before then is its
     * source, which the box clips rather than grows around. Once drawn, the box is the
     * drawing's: one drawn at the stated height keeps it, and one whose content has a
     * height of its own takes that. A failure is shown whole, since the user has to read
     * it. */
    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;
    }
  }
  /* The sidebar page: a body beside its side track, as wide as the window, with a gutter
   * that grows with it and a cap at the widest page. It says so (`--lf-wide-page`), and
   * the theme sets the title a size up for a page that wide; the type is the theme's.
   *
   * The track is the Layout's `aside`, wherever it is written: one written before the
   * body stands on the left and comes first where the two stack, as on a phone, and one
   * written after it stands on the right and comes last. So the page's source order is
   * the reading order at every width. The body takes two parts of the room and the track
   * one, from bases of 30rem and 18rem, and the two stack where they no longer fit beside
   * each other at those bases or where the body could not keep its content's minimum: a
   * board declaring the width its columns need wraps the track below it rather than
   * clipping. A header or footer takes the whole row. The items' own block margins go,
   * since flex margins don't collapse into the gap. */
  html[data-lf-layout~="sidebar"] body { margin: 0; }
  @media screen {
    html[data-lf-live][data-lf-layout~="sidebar"]:not([data-lf-sample-block]) body {
      min-height: 100%;
    }
  }
  main.layout-sidebar {
    padding-inline: clamp(var(--col-pad), 4cqi, 64px);
    padding-block: var(--page-pad-start) var(--page-pad-end);
    --lf-block-frame: trim;
    --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);
  }
  main.layout-sidebar > :is(header, footer) { flex: 1 0 100%; margin-block: 0; }
  main.layout-sidebar > :not(header, footer) { flex: 2 1 30rem; margin-block: 0; }
  main.layout-sidebar > aside { flex: 1 1 18rem; --lf-resident: track; }
  main.layout-sidebar > :not(header, footer) > :first-child { margin-top: 0; }
  /* A track that holds one block keeps that block in view while the body scrolls beside
   * it: the block sticks a gap below Leaf's banner and any page tab strip, and scrolls
   * what it holds within the window, so a track taller than the window keeps its end
   * reachable. The track itself is never the scroller: it keeps the flex sizing that
   * placed it, its content's minimum included, and runs its line's height, so the block
   * sticks only inside that line, never past the body it stands beside, over a footer, or
   * into the next row. Stacked, the block flows with the page. Which of the two it is
   * depends on the window's width, the shares the page gives the track and the body, and
   * what the body's content needs, which no query reads, so the margin reading says so
   * on the track (`data-lf-beside`, prepaint.js `residency`).
   *
   * Like a column's sidebar standing in the margin, the block starts the slot and landing
   * band again for what it holds, keeps a focused control's ring room
   * (`--lf-head-inset`), and anchors no reading (`overflow-anchor`). It is a reading
   * region of the Layout's own in either posture (`--lf-reading-region`,
   * reading-regions.js), bounded beside the body and flowing stacked, so the reader's
   * place in it survives the change between them. */
  main.layout-sidebar > aside:has(> :only-child) { align-self: stretch; }
  main.layout-sidebar > aside > :only-child { --lf-reading-region: layout; }
  @media screen {
    main.layout-sidebar { --lf-top-outer: var(--lf-top); }
    main.layout-sidebar > aside[data-lf-beside] > :only-child {
      position: sticky;
      top: calc(var(--lf-top-outer) + var(--sp-4));
      --lf-top: 0px; --lf-top-covered: 0px; --lf-landing-room: 0px;
      --lf-head-inset: initial;
      max-height: calc(var(--lf-view-height) - 2 * var(--sp-4));
      overflow-y: auto;
      overflow-anchor: none;
    }
  }
  /* Tiles: equal cells, as many to a row as fit at 9rem each, and every cell in a row
   * as tall as the row. How a row wraps is the page's to judge: the pre-handover review
   * (page-authoring.md) names a lone tile on its own row as a look to avoid, and the
   * page sets its own columns where it does. */
  .layout-tiles {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  }
  .layout-tiles > * { margin: 0; }
  /* Workspace: a full-height page, filling the window between the banner and the bottom
   * bar: its header and footer take their content's height, the body takes the rest,
   * arranged as the body itself says: a page's grid of panes, a pane, or a widget that
   * composes its own regions. Each pane's body scrolls on its own, a widget's generated
   * panes included, and `--lf-full-height` on main tells a widget that is the body it has
   * a definite height to fill (a style query). A widget that fills it fits what it shows
   * to that height, so the reader moves through the workspace rather than scrolling it.
   * Where the window is too small to hold the regions, the workspace flows and the page
   * scrolls.
   *
   * A pane is any element in the pane role (`data-lf-reading-role="pane"`, theme.css),
   * which delivery paints into the served document from the element's declaration, so
   * the first paint already holds the panes. A box a widget generates in that role also
   * carries `data-lf-generated`, which the widget writes as it builds the box.
   *
   * The window is the workspace's, so it takes the whole of it: no cap at the widest
   * page, and a gutter, a gap between panes and a header only as large as keeps them
   * apart. Each pixel of frame is one the panes give up, and at 1920px the cap and the
   * sidebar page's gutters held them to 1,472px of the 1,896px this leaves. The type is the
   * theme's: a workspace usually takes working density (`.density-working`, theme.css),
   * which the Layout neither sets nor reads. */
  html[data-lf-layout~="workspace"] body { margin: 0; }
  @media screen {
    html[data-lf-live][data-lf-layout~="workspace"]:not([data-lf-sample-block]) body {
      min-height: 100%;
    }
  }
  main.layout-workspace {
    padding-inline: 12px;
    padding-block: var(--sp-2) var(--page-pad-end);
    --lf-block-frame: trim;
  }
  /* The header takes the window's height before the panes do, so it is one row: the
   * title with the page's status beside it, wrapping only where the row runs out. What
   * a lede would say belongs in a pane. */
  main.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;
  }
  main.layout-workspace > header > * { margin-block: 0; }
  /* A body that is not itself a pane is a reading region of the Layout's own, which the
   * runtime registers from this mark (reading-regions.js, `syncLayoutRegion`), so a pane
   * it carries scrolls with it wherever something asks which box scrolls that pane. */
  main.layout-workspace > :not(header, footer, [data-lf-reading-role="pane"]) {
    --lf-reading-region: layout;
  }
  /* A page's grid of panes is one frame split into regions, as a terminal multiplexer's
   * or an editor's are: the panes meet at a hairline rather than standing apart as
   * cards. The page says where the panes stand, and the workspace how they meet. The
   * grid draws the frame and leaves a 1px gap, and each pane trades the border and
   * corners it draws standing alone for a 1px ring outside its box, so two neighbours'
   * rings fill the gap between them as one hairline. Drawn by the panes rather than
   * painted under them, so an empty cell, or a wider gap a page sets, shows the page's
   * ground and not a band of rule colour.
   *
   * The grid is of the panes the page wrote. A widget that is the body composes its
   * own regions and draws its own frame, and a pane it generates may stand directly in
   * it (`data-lf-generated`), as a visual review's evidence does; that pane is the
   * widget's region rather than a cell of a page's grid, so neither the frame nor the
   * ring is drawn for it. */
  main.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);
  }
  main.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 (min-width: 720px) and (min-height: 480px) {
    main.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;
    }
    main.layout-workspace > :is(header, footer) { flex: none; }
    main.layout-workspace > :not(header, footer) {
      flex: 1 1 0;
      min-block-size: 0;
      margin-block: 0;
    }
    /* A page's grid of panes shares the body's height among its rows, so it gives each
     * pane in it a definite height and says so (`--lf-full-height`). Only that grid: a
     * Layout sets the size of the box it arranges, and a widget that is the body lays
     * out its own tracks, so a row rule written on every body held a side list's row to
     * the window and drew its rows over one another. */
    main.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;
    }
    /* The body takes the window's height to pass on to its panes. A pane it does not
     * pass the height to, one inside a section of the body, takes its content's height
     * instead, so the body scrolls as a whole rather than run past the window's foot. A
     * body that is a pane scrolls its own body already.
     *
     * Each box that scrolls here also says where a box sticking inside it stops
     * (`--lf-top`, theme.css): at its own top edge. The theme's answer, the banner's
     * height, is the window's, whose scroller the banner covers; a pane's scrollport
     * starts below the banner already, so that offset pinned a diff's file name 42px
     * down while the rows it names scrolled past above it.
     *
     * Each box the workspace scrolls holds the height the window gives it, on purpose,
     * and says so (`--lf-holds-height`, theme.css), as a bounded block does. */
    main.layout-workspace > :not(header, footer, [data-lf-reading-role="pane"]) {
      overflow: auto;
      --lf-top: 0px;
      --lf-holds-height: 1;
    }
    /* A pane is already a grid of header, body and footer (theme.css), whose body row
     * takes what a definite height leaves and its content's height otherwise. A pane told
     * it has a definite height, by the box holding it (`--lf-full-height`: main for a
     * pane that is the body, the body for a cell of its grid of panes, a widget for a
     * pane it generates), may shrink below its content and scrolls its body. An authored
     * pane inside a section of the body, or inside another pane's body, is not told, so
     * it is content there and scrolls with what holds it. */
    @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;
        /* A sticking box stops at its scroller's padding edge, so the body's own top
         * inset is taken back to put the stop at the scrollport's top: the body's own
         * start (`--lf-top-start`, theme.css). */
        --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;
      }
    }
    /* A box the workspace scrolls has the window's height to give, so a bounded block
     * that is all it holds takes that height, or the bound its page stated where that is
     * less, rather than scrolling 28rem of it inside a box that would scroll too
     * (`[data-lf-bound]`, theme.css). Only these boxes: one that holds its height with a
     * cap alone, as a bounded block does, has no height for a percentage to take. */
    @container style(--lf-holds-height: 1) {
      :is(main.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%));
      }
    }
  }
}
/* Semantic presentation above widget defaults and Layouts (layer.py, CASCADE_LAYERS).
 * A decision in force retires the slots its registry relation names, regardless of
 * their package's default display. Inline widget motion may keep a slot visible
 * until it settles; authored unlayered styles retain the page's final say. */
@layer lf-state {
  [data-lf-retired] { display: none; }

  /* A box that scrolls starts the sticky-header slot again at its own top (theme.css, at
     `--lf-top`), whoever made it scroll: reachScrollers marks it. Above a package's
     value and a Layout's, since one stacked onto a box that scrolls reaches nothing
     the box holds; a box that starts its slot elsewhere says so in `--lf-top-start`.
     Its landing band starts there too (`--lf-top-covered`, theme.css), with the room
     the box states below it, none unless it pads its scroll edge. A box that sticks is
     not marked, since it reads the slot for its own `top`; one that scrolls what it
     holds restarts all three itself (a column's sidebar, layouts.css). */
  [data-lf-scrolls] { --lf-top: var(--lf-top-start); --lf-top-covered: var(--lf-top-start);
    --lf-landing-room: var(--lf-landing-room-start); }

  /* Retiring the only slot leaves its wrapper empty. Keep that wrapper in the
     layout tree so Undo can restore the text in the same place. */
}