@layer lf-reset, lf-base, lf-layouts, lf-shadow, lf-theme, lf-controls, lf-state;
@layer lf-base {
/* @noformat 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: 0.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: 0.75em;
  height: 0.75em;
  margin-inline-start: 0.24em;
  vertical-align: 0.03em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}
:where([data-lf-focus]) {
  outline: var(--focus-ring);
  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: 0.55;
}
[data-lf-offer]:where(:not([data-lf-offer=""]))[data-lf-focus] {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-gap);
}
[data-lf-offer]:where(:not([data-lf-offer=""], [data-lf-offer=checkbox], [data-lf-offer=radio], .lf-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);
  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: 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-2));
  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 0 auto;
  max-inline-size: 40%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--lf-msg-name-size);
  font-weight: 600;
  color: var(--ink);
}
.lf-thread-checkpoint {
  margin-block: 16px;
}
.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 > .lf-msg {
  margin-block: 8px;
}
.lf-thread-working {
  margin-top: 16px;
}
.lf-thread-working-words {
  margin-top: var(--lf-msg-body-gap);
  inline-size: fit-content;
  max-inline-size: 100%;
  font: max(var(--entry-floor), var(--t-5))/1.5 var(--sans);
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.lf-thread-working[data-lf-live] .lf-thread-working-words {
  animation: lf-sheen 2s ease-in-out infinite alternate;
}
@keyframes lf-sheen {
  from, to {
    color: var(--ink);
    mask-image:
      linear-gradient(
        110deg,
        rgb(0 0 0 / var(--lf-sheen-rest, 0.5)) 42%,
        #000 50%,
        rgb(0 0 0 / var(--lf-sheen-rest, 0.5)) 58%);
    mask-size: 200% 100%;
  }
  from {
    mask-position: 100% 0;
  }
  to {
    mask-position: 0% 0;
  }
}
@media (forced-colors: active) {
  @keyframes lf-sheen {
    from, to {
      mask-image: none;
    }
  }
}
.lf-thread-disclosure[data-lf-focus] {
  outline: var(--focus-ring);
  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: 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);
  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;
  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;
}
: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: var(--t-6)/var(--lf-ui-lh) var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-resolved-summary:hover {
  color: var(--ink-2);
}
.lf-page-thread .lf-btn {
  font: inherit;
}
:is(.lf-page-thread :is(.lf-btn, summary), .lf-resolved-summary)[data-lf-focus] {
  outline: var(--focus-ring);
  outline-offset: 1px;
}
@media print {
  .lf-page-thread,
  .lf-resolved-threads,
  .lf-page-thread .lf-msg {
    display: block !important;
  }
  .lf-page-thread :is(button, .lf-msg-sending) {
    display: none !important;
  }
}
.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);
  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: 0.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: var(--tip-pad);
  border-radius: var(--tip-r);
  background: var(--tip-bg);
  color: var(--tip-ink);
  box-shadow: var(--raise-1);
  font: var(--tip-font);
  white-space: nowrap;
  pointer-events: none;
}
.lf-react-palette {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.lf-react-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: var(--raise-2);
}
:where(.lf-react-strip > .lf-react-palette:popover-open) > .lf-react {
  box-sizing: border-box;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  font-size: 16px;
}
@media (hover: none) {
  .lf-msg-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);
  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,
  [hidden=until-found] {
    content-visibility: visible;
  }
  details > summary {
    list-style: none;
  }
  details > summary::-webkit-details-marker {
    display: none;
  }
}
:is(.lf-btn, .button) {
  padding: max(4px, (var(--aim-floor) - 1lh) / 2 - 1px) 10px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
  color: var(--ink);
  display: inline-block;
}
:where([data-lf-room]) {
  display: inline-block;
  max-inline-size: 100%;
}
[data-lf-room]::before {
  content: attr(data-lf-room);
  display: block;
  block-size: 0;
  overflow: hidden;
  visibility: hidden;
  white-space: pre-line;
}
[data-lf-room] > * {
  display: block;
  inline-size: 0;
  min-inline-size: 100%;
  overflow: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}
: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: 0.55;
  cursor: default;
}
:is(.lf-btn, .button).primary:is(:disabled, [aria-disabled=true]) {
  opacity: 1;
  color: var(--muted);
  background: var(--paper);
  border-color: var(--border-2);
}
:is(.lf-btn, .button)[data-lf-focus] {
  outline: var(--focus-ring);
  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-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-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);
  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);
  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);
  outline-offset: 0;
  border-color: transparent;
}
.lf-page-comment-card,
.lf-response-control {
  filter: drop-shadow(var(--raise-1));
}
.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-send-inset: calc( (var(--lf-response-height) - var(--lf-icon-action-hit)) / 2 );
  --lf-comment-text-end: calc(var(--lf-icon-action-hit) + var(--lf-comment-send-inset));
}
.lf-margin-preview .lf-msg-text {
  padding-inline-end: var(--lf-comment-text-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-response-control {
  scroll-padding-block: var(--lf-compose-pad-block);
}
leaf-text.lf-fab-input {
  display: none;
  width: 100%;
  min-width: 0;
  padding-inline: var(--lf-compose-pad-inline-start) calc(var(--lf-comment-text-end) - 1px);
  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: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-composer {
  display: none;
}
.lf-composer[data-lf-open] {
  display: contents;
}
.lf-composer[data-lf-open] leaf-text.lf-fab-input {
  display: block;
}
.lf-fab-bar {
  display: none;
  font: var(--t-5)/1.5 var(--sans);
}
.lf-fab-bar:is([data-lf-target-only], :has(> .lf-composer[data-lf-open])) {
  display: var(--lf-response-display, inline-flex);
}
.lf-fab-bar[data-lf-presentation=inline] {
  position: static;
  box-sizing: border-box;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  max-width: 760px;
  white-space: nowrap;
  color: var(--ink);
}
.lf-fab-bar[data-lf-presentation=inline] *,
.lf-fab-bar[data-lf-presentation=inline] *::before,
.lf-fab-bar[data-lf-presentation=inline] *::after {
  box-sizing: inherit;
}
.lf-fab-bar[data-lf-presentation=inline] .lf-composer > :not(.lf-compose-field, .lf-composer-media) {
  display: none !important;
}
.lf-fab-bar[data-lf-presentation=inline] leaf-text.lf-fab-input {
  max-width: none;
  max-height: 50vh;
  margin: 0;
}
.lf-fab-bar[data-lf-presentation=inline].lf-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;
}
.lf-code-copy-home {
  display: contents;
}
.lf-code-copy-cut {
  pointer-events: none;
  z-index: 1;
}
.lf-code-copy-cut > .lf-code-copy {
  position: fixed;
}
:not(.lf-chrome, .lf-code-copy-home):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-msg-body a.detached {
  color: var(--muted-2);
  text-decoration: underline dashed;
  cursor: default;
}
.lf-suggest-body > .lf-msg-text {
  white-space: pre-wrap;
}
.lf-suggest-label {
  color: var(--muted-2);
}
.lf-react-said {
  font-family: var(--sans);
  color: var(--mark-ink);
}
.lf-reply-continuity[open]::details-content,
.lf-reply-continuity:not(details) {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}
.lf-reply-space {
  flex: 0 1 auto;
  block-size: var(--lf-reply-space, 0px);
  min-block-size: 0;
  max-block-size: 100%;
}
.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 {
/* @noformat 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 / 0.14), rgb(0 0 0 / 0.55));
  --raise-1: 0 2px 8px var(--shade);
  --raise-2: 0 8px 24px var(--shade);
  --raise-3: 0 12px 36px var(--shade);
  --tip-bg: var(--ink);
  --tip-ink: var(--paper);
  --tip-pad: 4px 7px;
  --tip-r: 4px;
  --tip-font: 500 var(--t-6)/1.2 var(--sans);
  --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) );
}
@media (pointer: coarse) {
  :root {
    --aim-floor: 44px;
    --entry-floor: 16px;
  }
}
@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 {
  [hidden]:not([hidden=until-found]) {
    display: none !important;
  }
  @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);
  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);
  outline-offset: 0;
  border-color: transparent;
}
main {
  position: relative;
  z-index: 0;
  container-name: lf-content-frame;
  --lf-free-l: 0px;
  --lf-free-r: 0px;
}
@property --lf-width { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --lf-top { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --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, .callout, lf-suggestion) {
    max-inline-size: var(--lf-measure);
  }
  :where(.callout) {
    box-sizing: border-box;
  }
  :where(.callout:has(> [data-lf-space=wide])) {
    max-inline-size: max(var(--lf-measure), var(--wide));
  }
  :where(.callout:has(> [data-lf-space=available])) {
    max-inline-size: none;
  }
  [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));
  --tip-font: 500 var(--t-6)/1.2 var(--sans);
  --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), var(--raise-1);
}
img,
svg,
video,
canvas {
  vertical-align: middle;
}
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: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 10px;
}
.eyebrow:has(+ h2) {
  margin-top: var(--h2-start);
}
.eyebrow:has(+ h3) {
  margin-top: var(--h3-start);
}
.eyebrow + :is(h2, h3) {
  margin-top: 0;
}
.lede {
  color: var(--ink-2);
  font-size: var(--t-3);
  line-height: 1.5;
  margin: 0 0 10px;
}
.tag {
  vertical-align: middle;
  align-self: center;
}
.callout {
  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;
}
.lf-label,
section.panel > :is(h2, h3):first-child,
:where([data-lf-reading-role=pane]) > header > :is(h2, h3, h4, h5, h6) {
  font: 600 var(--t-6)/1.3 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.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;
  --lf-block-frame: trim;
}
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 > li {
  margin: 10px 0;
}
ol.steps > li::marker {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
svg.drawing {
  display: block;
  height: auto;
  font-family: var(--sans);
  font-size: 11px;
}
svg.drawing:not([width]) {
  width: 100%;
}
svg.drawing text {
  fill: var(--muted);
}
svg.drawing .strong {
  fill: var(--ink);
  font-weight: 600;
  font-size: 12px;
}
svg.drawing .small {
  font-size: 10px;
}
svg.drawing .mono {
  font-family: var(--mono);
  font-size: 10.5px;
  fill: var(--ink-2);
}
svg.drawing .frame {
  fill: var(--paper);
  stroke: var(--border-2);
}
svg.drawing .frame-head {
  fill: color-mix(in srgb, var(--ink) 7%, transparent);
}
svg.drawing .box {
  fill: var(--card);
  stroke: var(--border-2);
}
svg.drawing .box.hot {
  fill: color-mix(in srgb, var(--accent) 9%, var(--card));
  stroke: var(--accent);
}
svg.drawing .line {
  fill: color-mix(in srgb, var(--ink) 20%, transparent);
}
svg.drawing .line.soft {
  fill: color-mix(in srgb, var(--ink) 11%, transparent);
}
svg.drawing .highlight {
  fill: color-mix(in srgb, var(--accent) 24%, transparent);
}
svg.drawing .ghost {
  fill: none;
  stroke: var(--muted-2);
  stroke-dasharray: 3 3;
}
svg.drawing .guide {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.5;
  stroke-dasharray: 2 3;
}
svg.drawing .dim {
  fill: none;
  stroke: var(--ink-2);
}
svg.drawing .arrow {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.2;
}
svg.drawing .tip {
  fill: var(--muted);
}
svg.drawing .mark,
svg.drawing .tip.hot {
  fill: var(--accent);
}
svg.drawing .glyph {
  fill: var(--paper);
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
svg.drawing .ok {
  fill: var(--ok);
}
svg.drawing .warn {
  fill: var(--warn);
}
svg.drawing .danger {
  fill: var(--danger);
}
@media screen {
  html:root {
    .lf-thread-seat {
      display: block;
    }
    .lf-say {
      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;
}
lf-suggestion[data-lf-state] > :is(lf-old, lf-new):not([data-lf-retired]) {
  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-entry-lift: 0 1px 0 var(--border-2), var(--raise-1);
}
.lf-margin-entry[data-lf-behavior=action] {
  border-width: 2px;
  color: var(--lf-entry-ink, var(--ink));
  box-shadow: var(--lf-entry-lift);
}
.lf-margin-entry[data-lf-behavior=disclosure] {
  border-color: color-mix(in srgb, var(--ink) 34%, var(--paper));
  color: var(--lf-entry-ink, var(--ink-2));
  box-shadow: none;
}
.lf-margin-entry[data-lf-behavior=status] {
  border-color: var(--rule);
  color: var(--lf-entry-ink, var(--ink-2));
  box-shadow: none;
  cursor: default;
}
.lf-margin-entry[data-lf-tone=positive] > :is(.lf-margin-entry-icon, .lf-margin-entry-glyph) {
  color: var(--ok-ink);
}
.lf-margin-entry[data-lf-tone=negative] > :is(.lf-margin-entry-icon, .lf-margin-entry-glyph) {
  color: var(--danger-ink);
}
.lf-margin-entry:is(button, [role=button]):not([data-lf-behavior=status]):not(:disabled):not([aria-disabled=true]) {
  cursor: pointer;
}
.lf-margin-entry:is(button, [role=button]):not([data-lf-behavior=status]):hover:not([aria-disabled=true]) {
  background: var(--lf-entry-tint, var(--chip));
}
.lf-margin-entry[data-lf-behavior=disclosure]:is(button, [role=button]):is(:hover, [data-lf-focus], [aria-expanded=true]):not([aria-disabled=true]) {
  border-color: var(--accent);
  color: var(--lf-entry-ink, var(--ink));
}
.lf-margin-entry[data-lf-target-selected] {
  border-color: var(--accent);
}
.lf-margin-entry[data-lf-focus] {
  outline: var(--focus-ring);
  outline-offset: 1px;
}
.lf-margin-entry[aria-disabled=true] {
  cursor: default;
}
.lf-margin-entry.lf-react[aria-pressed=true] {
  background: var(--chip);
}
.lf-react-mark[data-lf-behavior=disclosure] {
  border-width: 2px;
  border-color: var(--border-2);
  color: var(--lf-entry-ink, var(--ink));
  box-shadow: var(--lf-entry-lift);
}
:where(.lf-margin-entry[data-lf-kinds~=comment], .lf-page-map-action[data-lf-map-item^="comment:"], .lf-margin-entry[data-lf-agent-workflow], .lf-page-map-action[data-lf-agent-workflow]) > :is(.lf-margin-entry-icon, .lf-margin-entry-glyph, .lf-margin-kind) {
  color: var(--accent);
}
:is(.lf-margin-entry, .lf-page-map-action)[data-lf-turn=user] > :is(.lf-margin-entry-icon, .lf-margin-entry-glyph, .lf-margin-kind) {
  color: var(--turn-ink);
}
:is(.lf-margin-entry, .lf-page-map-action)[data-lf-turn=user] {
  --lf-entry-tint: var(--turn-wash);
}
:is(.lf-margin-entry, .lf-page-map-action)[data-lf-agent-arrival] {
  animation: lf-runtime-4f3c2a8d-agent-work-arrival var(--lf-motion-agent-arrival) ease-out var(--lf-agent-arrival-delay, 0ms) 1;
}
@keyframes lf-runtime-4f3c2a8d-agent-work-arrival {
  0% {
    box-shadow: var(--lf-agent-stage-shadow, 0 0 0 0 transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent);
  }
  58% {
    box-shadow: var(--lf-agent-stage-shadow, 0 0 0 0 transparent), 0 0 0 7px color-mix(in srgb, var(--accent) 16%, transparent);
  }
  100% {
    box-shadow: var(--lf-agent-stage-shadow, 0 0 0 0 transparent), 0 0 0 10px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.lf-margin-entry, .lf-page-map-action)[data-lf-agent-arrival] {
    animation: none;
  }
}
.lf-margin-entry[data-lf-agent-workflow=working][data-lf-behavior=action] {
  --lf-agent-stage-shadow: var(--lf-entry-lift);
}
.lf-margin-entry[data-lf-unread]::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.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: var(--tip-pad);
  border-radius: var(--tip-r);
  background: var(--tip-bg);
  color: var(--tip-ink);
  font: var(--tip-font);
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: var(--raise-1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2px);
  transition:
    opacity 90ms ease,
    transform 90ms ease,
    visibility 0s linear 90ms;
}
.lf-margin-entry-label-word,
.lf-margin-entry-context {
  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);
  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;
}
: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: var(--raise-2);
}
}
@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)) {
/* @noformat 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;
}
: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: var(--raise-1);
  opacity: 0.52;
  scale: 0.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: 0.18;
  scale: 0.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;
  padding: 0 5px;
}
: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: var(--tip-pad);
  border-radius: var(--tip-r);
  background: var(--tip-bg);
  color: var(--tip-ink);
  box-shadow: var(--raise-1);
  font: var(--tip-font);
  white-space: 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: 0.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);
  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: 0.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: 0.18em;
    cursor: help;
  }
}
.lf-gloss-mark {
  min-width: 0;
  min-height: 0;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
:scope:is(lf-gloss):has(> .lf-gloss-mark[data-lf-focus]) {
  outline: var(--focus-ring);
  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: var(--raise-2);
  font-family: var(--serif);
  font-size: var(--t-5);
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
}
@media screen {
  .lf-gloss-popover::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--lf-gloss-gap)) 0;
    z-index: -1;
  }
}
.lf-gloss-popover::backdrop {
  background: transparent;
}
@media print {
  :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;
}
@media screen {
  :scope:is(lf-options) {
    box-sizing: border-box;
    max-inline-size: var(--lf-measure);
  }
}
: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: 0.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: 0.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 0.12s ease, transform 0.12s ease;
    }
    :scope:is(lf-options)[choose]:not(:where([data-lf-exhibit]) *):has(> lf-option > strong) > lf-option:hover {
      transform: translateY(-1px);
      --lf-lift: var(--raise-1);
    }
  }
}
: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);
  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);
    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);
    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);
  }
}
: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);
  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;
  }
}

/* skills/leaf/packages/default/styles/board.css */
:scope:is(lf-board) {
  --lf-board-columns: 1;
  --lf-grip-room: 0px;
  --lf-grip-block: 0px;
}
@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 {
  html[data-lf-interactive] :scope:is(lf-board):not(:where([data-lf-exhibit]) *) {
    --lf-grip-room: max(var(--aim-floor), calc(var(--t-5) + 20px));
    --lf-grip-block: max(var(--aim-floor), calc(var(--t-5) + 16px));
  }
  html[data-lf-interactive] :scope:is(lf-card):not(:where([data-lf-exhibit]) *)::before {
    content: "";
    float: right;
    inline-size: var(--lf-grip-room);
    block-size: var(--lf-grip-block);
    margin-block-start: -10px;
  }
  :scope:is(lf-card) > :not(:first-child) {
    clear: right;
  }
}
: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;
  box-sizing: border-box;
  inline-size: var(--lf-grip-room);
  block-size: var(--lf-grip-block);
  min-height: var(--aim-floor);
  min-width: var(--aim-floor);
  border-radius: 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);
  outline-offset: calc(-1 * var(--focus-ring-w));
  color: var(--ink-2);
}
:scope:is(lf-card).lf-ghost {
  opacity: 0.4;
  border-style: dashed;
  border-color: var(--accent);
}
:scope:is(lf-card).lf-lift {
  box-shadow: var(--raise-1);
  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: 0.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);
  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[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)[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;
}
: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: var(--sp-4);
        box-sizing: border-box;
        pointer-events: none;
        height: var(--lf-view-height);
        margin: 0;
      }
      :scope:is(lf-toc) .lf-toc-nav {
        width: 100%;
        height: 100%;
        border: 0;
        box-sizing: border-box;
        padding: var(--sp-4) 0;
        --lf-toc-label-opacity: 0;
        pointer-events: none;
        transition: background-color 0.24s ease-out;
      }
      :scope:is(lf-toc):is(:hover, [data-lf-focus-within]) .lf-toc-nav {
        width: calc(var(--sidebar-max) - var(--sp-4));
      }
      @scope (body[data-lf-go-to-active] :scope) {
        :scope:is(lf-toc) .lf-toc-nav {
          width: calc(var(--sidebar-max) - var(--sp-4));
        }
      }
      :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) .lf-toc-start a,
      :scope:is(lf-toc) li a {
        position: absolute;
        z-index: 3;
        display: -webkit-box;
        top: 0;
        left: 0;
        width: calc(var(--sidebar-max) - var(--sp-4));
        overflow: hidden;
        max-height: 2.6em;
        padding: 0 2px 2px calc(14px + var(--lf-toc-indent));
        line-height: 1.3;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        transform: translateY(calc(var(--lf-toc-row-shift, 0px) - 0.5lh));
        opacity: var(--lf-toc-label-opacity);
        pointer-events: none;
        transition: color 0.12s ease-out, opacity 0.24s ease-out;
      }
      :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);
        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;
        width: 100%;
        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);
}

/* skills/leaf/packages/default/styles/ask.css */
:scope:is(lf-ask) {
  display: block;
}
@media screen {
  :scope:is(lf-ask) {
    box-sizing: border-box;
    max-inline-size: var(--lf-measure);
  }
  :scope:is(lf-ask):has(> [data-lf-space=wide]) {
    max-inline-size: max(var(--lf-measure), var(--wide));
  }
  :scope:is(lf-ask):has(> [data-lf-space=available]) {
    max-inline-size: none;
  }
  :scope:is(lf-ask):not([data-lf-space]):has(> [data-lf-space]:not([data-lf-kept])) {
    margin-left: calc(-1 * var(--lf-grow-l));
    margin-right: calc(-1 * var(--lf-grow-r));
    padding-left: var(--lf-grow-l);
    padding-right: var(--lf-grow-r);
    --lf-breakout: 1;
  }
}
:scope:is(lf-ask):has(> :is(figure, img, svg, table, lf-chart, lf-shot) ~ lf-options) {
  --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: 0.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 {
  display: flex;
  flex-direction: column;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--border-2);
}
.lf-sample-controls {
  margin-bottom: 10px;
}
.lf-sample-controls > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.lf-sample-status {
  position: relative;
  flex: 1 1 10em;
  min-width: 0;
  min-height: max(1lh, var(--aim-floor));
  align-content: center;
  white-space: nowrap;
  color: var(--muted);
  font: var(--t-6)/1.4 var(--sans);
}
.lf-sample-failure {
  margin: 0;
  padding: 0;
  border: 0;
}
.lf-sample-failure,
.lf-sample-failure > summary {
  font: inherit;
  color: inherit;
}
.lf-sample-failure > summary {
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-sample-failure[open] > summary {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  white-space: normal;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
}
.lf-sample-frame {
  display: block;
  box-sizing: content-box;
  width: auto;
  height: 32rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--paper);
}
:scope:is(lf-sample)[window] .lf-sample-frame {
  box-sizing: border-box;
  height: min(75vh, 48rem);
}
.lf-sample-view:modal {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(var(--sp-3), env(safe-area-inset-top)) max(var(--sp-3), env(safe-area-inset-right)) max(var(--sp-3), env(safe-area-inset-bottom)) max(var(--sp-3), env(safe-area-inset-left));
  background: var(--paper);
  overflow: hidden;
  overscroll-behavior: contain;
}
.lf-sample-view:modal::backdrop {
  background: var(--paper);
}
.lf-sample-view:modal > .lf-sample-controls {
  flex: none;
}
.lf-sample-view:modal > .lf-sample-exhibit {
  flex: 1;
  min-height: 0;
  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;
  padding: 0;
  border: 0;
  border-radius: 0;
  white-space: pre-wrap;
}
:scope:is(lf-text-document) .lf-text-document-listing {
  color-scheme: inherit;
  --diffs-font-family: var(--mono);
  --diffs-font-size: var(--code-size);
  --diffs-line-height: var(--code-line);
  --diffs-bg: var(--pre-bg);
  --diffs-bg-buffer: var(--pre-bg);
  --diffs-fg: var(--code-ink);
  --diffs-fg-number: var(--code-muted);
}
:scope:is(lf-text-document) [data-line-number-content]::before {
  content: attr(data-number);
}
:scope:is(lf-text-document) code[data-code] {
  display: grid;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  overscroll-behavior: auto;
}
@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);
}
@media screen {
  :scope:is(lf-draft) {
    box-sizing: border-box;
    max-inline-size: var(--lf-measure);
  }
}
.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-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);
    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 / 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)) {
/* @noformat 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) {
  --lf-diff-head-inset: 10px;
}
:scope:host(.lf-rendered) :where(.lf-diff-file) > details > summary,
:scope:host(.lf-rendered) .lf-diff-metadata {
  padding: 7px var(--lf-diff-head-inset);
  font-size: var(--t-5);
  font-family: var(--sans);
  color: var(--code-ink);
  background: var(--code-chrome);
}
:scope:host(.lf-rendered) .lf-diff-fold > .lf-error {
  padding: 10px;
}
:scope:host(.lf-rendered) :where(.lf-diff-file) > details > summary,
:scope:host(.lf-rendered) .lf-diff-file-thread-outlet > .lf-resolved-threads > .lf-resolved-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  block-size: var(--lf-diff-head-h);
  white-space: nowrap;
  overflow: hidden;
}
:scope:host(.lf-rendered) :where(.lf-diff-file) > details > summary::before,
:scope:host(.lf-rendered) .lf-diff-file-thread-outlet > .lf-resolved-threads > .lf-resolved-summary::before {
  content: "▶" / "";
  flex: none;
  font-size: calc(0.7 * var(--t-5));
}
:scope:host(.lf-rendered) :where(.lf-diff-file) > details[open] > summary::before,
:scope:host(.lf-rendered) .lf-diff-file-thread-outlet > .lf-resolved-threads[open] > .lf-resolved-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: 0.4ch;
}
.lf-diff-head wbr {
  display: none;
}
.lf-diff-head .lf-diff-dir {
  flex: 0 1 auto;
  min-width: 0;
  max-width: max-content;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-diff-head .lf-diff-dir-ancestor {
  flex: 1 1 0;
}
.lf-diff-head :is(.lf-diff-source-path, .lf-diff-destination-path) .lf-diff-dir {
  flex: 1 1 0;
}
.lf-diff-head .lf-diff-dir::before {
  content: "…" / "";
  position: absolute;
  visibility: hidden;
  inline-size: max-content;
}
.lf-diff-head .lf-diff-dir[data-folder-hidden] {
  opacity: 0;
}
.lf-diff-head .lf-diff-base {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-diff-head > .lf-diff-path > .lf-diff-base {
  flex-shrink: 0;
}
.lf-diff-head > .lf-diff-stat {
  flex: none;
}
: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: var(--tip-pad);
  border-radius: var(--tip-r);
  background: var(--tip-bg);
  color: var(--tip-ink);
  box-shadow: var(--raise-1);
  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 {
  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);
  outline-offset: 1px;
}
:scope:host(.lf-rendered) .lf-diff-file > details > summary[data-lf-focus] {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-w));
}
:scope:host(.lf-rendered) [data-content] > [data-line][data-lf-focus] {
  outline: var(--focus-ring);
  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);
  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(--diffs-column-number-width);
  max-inline-size: var(--diffs-column-content-width);
}
.lf-diff-file-thread-outlet {
  padding: 0;
  margin-top: 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
:scope:host(.lf-rendered) .lf-diff-file-thread-outlet > .lf-resolved-threads > .lf-resolved-summary {
  outline-offset: calc(-1 * var(--focus-ring-w));
}
.lf-diff-thread-outlet > :is(.lf-page-thread, .lf-resolved-threads) {
  max-width: 760px;
}
.lf-diff-thread-outlet .lf-page-thread {
  padding: var(--sp-2) 0;
}
.lf-diff-file-thread-outlet :is(.lf-resolved-summary, .lf-page-thread) {
  padding-inline: var(--lf-diff-head-inset);
}
@media print {
  .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)) {
/* @noformat 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-6);
  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-6);
  text-align: end;
  white-space: nowrap;
}
.lf-call-line + .lf-call-line {
  border-top: 1px solid color-mix(in srgb, var(--code-border) 45%, transparent);
}
.lf-call-group-body .lf-call-line:first-child {
  border-top: 0;
}
:is(.lf-call-line, .lf-call-root-location)[data-status=added] {
  background: var(--lf-code-add-fill);
}
:is(.lf-call-line, .lf-call-root-location)[data-status=removed] {
  background: var(--lf-code-del-fill);
}
.lf-call-line[data-root] .lf-call-body {
  font-weight: 700;
}
.lf-call-line[data-meta] {
  grid-template-columns: 2rem minmax(0, 1fr);
  min-width: 0;
  padding-block: var(--sp-1);
  background: var(--code-chrome);
  color: var(--code-muted);
  white-space: normal;
}
.lf-call-line[data-meta] .lf-call-body {
  min-width: 0;
  overflow-wrap: anywhere;
}
.lf-call-marker {
  padding-inline: var(--sp-2);
  color: var(--code-muted);
  text-align: center;
  user-select: none;
}
.lf-call-line[data-status=added] .lf-call-marker {
  color: var(--ok-ink);
}
.lf-call-line[data-status=removed] .lf-call-marker {
  color: var(--danger-ink);
}
.lf-call-location {
  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. With all controls inline, presets precede
 * the full-width preview and its instruction follows. 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);
}

/* With shared controls, 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:has(> .lf-playground-controls-region > .lf-playground-controls) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .lf-playground-split:has(> .lf-playground-controls-region > .lf-playground-controls)
    > .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;
    }

    /* Below the combined floors, the ancestor scrolls both the inline evidence
     * and the instruction rather than hiding either one. */
    .lf-playground-split:not(
      :has(> .lf-playground-controls-region > .lf-playground-controls)
    ) {
      grid-template-rows: minmax(12rem, 1fr) minmax(9rem, auto);
    }

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

    @container (min-width: 43.5rem) {
      .lf-playground-split:has(
        > .lf-playground-controls-region > .lf-playground-controls
      ) {
        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-controls {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  min-width: 0;
}

.lf-playground-controls-title {
  margin: 0;
}

: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-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)) {
/* @noformat 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-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-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);
  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);
}
@media screen {
  .lf-vr-case:not([data-selected]) {
    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, 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: 0.35em;
  text-decoration: none;
}
.lf-vr-links .lf-external-mark {
  width: 0.9em;
  height: 0.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 {
  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-4);
  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 + .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-view {
  display: contents;
}
.lf-trace-body {
  min-inline-size: 0;
}
:scope:is(lf-trace)[hidden="until-found"] {
  margin: 0;
  padding: 0;
  border: 0;
}
.lf-trace-stage {
  min-inline-size: 0;
}
.lf-trace-stage[data-ready] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(180px, 1fr) auto;
  min-block-size: var(--lf-trace-stage-height);
}
.lf-trace-stage .lf-trace-images {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-block-size: 0;
  contain: size;
}
.lf-trace-stage .lf-trace-image-viewport {
  block-size: 100%;
  min-block-size: 0;
  min-inline-size: 0;
}
.lf-trace-waiting {
  margin: 0;
  color: var(--muted);
}
.lf-trace-controls {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
}
.lf-trace-choices {
  min-inline-size: 0;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
/* 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 {
  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, so its step arrows are always ArrowLeft and ArrowRight (lf-trace.js). */
.lf-trace-timeline {
  direction: ltr;
  --lf-trace-ruler-h: 26px;
  --lf-trace-row-h: 18px;
  --lf-trace-input-h: 36px;
  --lf-trace-capture-h: 14px;
  --lf-trace-mark: color-mix(in srgb, var(--ink) 55%, var(--paper));
  --lf-trace-input: var(--accent);
  position: relative;
  anchor-scope: --lf-trace-tip;
  display: grid;
  /* 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] {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.lf-trace-lane-names {
  display: grid;
  align-content: start;
  border-inline-end: 1px solid var(--border-2);
  background: var(--paper);
  color: var(--muted);
}
.lf-trace-lane-name {
  display: flex;
  align-items: center;
  padding-inline: var(--sp-2);
  overflow: hidden;
  white-space: nowrap;
  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);
}
/* 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);
  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);
  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);
  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-timeline [data-lf-trace-tip-anchor] {
  anchor-name: --lf-trace-tip;
}
/* The tooltip may stand above its timeline, while safe inline alignment keeps its
 * full words inside that timeline's width. Native anchoring follows the mark's pan. */
.lf-trace-tip {
  position: absolute;
  position-anchor: --lf-trace-tip;
  inset-inline: 0;
  inset-block-start: auto;
  inset-block-end: anchor(top);
  justify-self: anchor-center;
  margin-block-end: 4px;
  box-sizing: border-box;
  inline-size: max-content;
  z-index: 4;
  max-inline-size: min(48ch, 100%);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r);
  background: var(--ink);
  color: var(--paper);
  font: var(--lf-trace-small-type) / 1.4 var(--sans);
  white-space: pre-line;
  pointer-events: none;
}

.lf-trace-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-block-size: var(--lf-trace-control-size);
}
.lf-trace-bookmarks {
  padding: 0;
  border: 0;
  background: none;
  margin: 0;
  min-inline-size: 0;
}
.lf-trace-moments-heading {
  margin: 0;
  font-size: var(--lf-trace-small-type);
  color: var(--muted);
}
.lf-trace-bookmark-list {
  max-inline-size: 44rem;
}
.lf-trace-bookmark {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  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] {
  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] {
  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 {
  position: absolute;
  inset: 0;
  max-inline-size: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  background: var(--paper);
}
.lf-trace-missing-image {
  padding: var(--sp-4);
  border: 1px dashed var(--border-2);
  color: var(--muted);
  margin-block: 0;
}
.lf-trace-tree {
  margin: 0;
  --lf-top: 0px;
  --lf-trace-tree-head: var(--lf-trace-control-size);
}
/* 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 {
  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-heading {
  position: sticky;
  top: var(--lf-top);
  --lf-head-inset: var(--sp-1);
  z-index: 3;
  background: var(--paper);
  margin-block-end: var(--sp-2);
}
.lf-trace-toolbar {
  padding-block: var(--sp-1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.lf-trace-transport,
.lf-trace-zoom-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.lf-trace-zoom-controls {
  margin-inline-start: auto;
}
.lf-trace-pace {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--muted);
  font-size: var(--lf-trace-small-type);
}
.lf-trace-pace select {
  min-block-size: var(--lf-trace-control-size);
  max-inline-size: 100%;
  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] {
  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(--chip);
}
.lf-trace-transport-button[data-lf-focus] {
  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 {
    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);
}
.lf-trace-canvas > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  border: 0;
}
.lf-trace-canvas .viewer-container {
  background: var(--paper);
  touch-action: pan-y;
}
.lf-trace-canvas .viewer-canvas {
  touch-action: pan-y;
}
.lf-trace-canvas .viewer-canvas img {
  max-inline-size: none;
  margin: 0;
}
.lf-trace-image-tools {
  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[data-lf-focus] {
  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 view, whether the recording or a wrapper
 * holding it, and a recording inside a wrapper take no block margin, so a hidden view
 * leaves no blank band under the shown one for the sticky chooser to hang over. */
:scope:is(lf-trace-compare) {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  --lf-trace-control-size: 44px;
  font: var(--t-5) / 1.45 var(--sans);
}
.lf-trace-compare-controls {
  margin-block-end: var(--sp-2);
  padding-block: var(--sp-1);
}
:scope:is(lf-trace-compare) .lf-trace-stage[data-ready] {
  grid-template-rows: auto auto auto minmax(180px, 1fr) auto;
}
:scope:is(lf-trace-compare) > *,
:scope:is(lf-trace-compare) lf-trace {
  margin-block: 0;
}

/* 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) {
    & lf-trace::before {
      content: "";
      display: block;
      block-size: calc(var(--lf-trace-control-size) + 2 * var(--sp-1));
      margin-block-end: var(--sp-2);
    }
    & > :is(lf-trace, :has(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, in `lf-layouts`, above the base
 * layer the kernel and widget packages share and below theme packages, semantic state
 * and the page's unlayered sheet. A Layout resets what the base sets on the boxes it
 * arranges; a page adjusts it with ordinary rules; nothing reads a Layout back. Appended
 * after every package (layer.py, composed_sheets). */
/* `--lf-full-height: 1`: this box's children have a definite height to fill. It does
 * not inherit, so a style query holds only for a child of a box that says so; a widget
 * that fills the height passes it to its own parts (`--lf-full-height: inherit`). */
@property --lf-full-height {
  syntax: "*";
  inherits: false;
}
@layer lf-layouts {
  /* Each page Layout owns its page's geometry, the body's included; a page with no
   * Layout keeps the browser's. The body drops its margin and, on a live page other than
   * a block sample, fills the window's height. Body rules key on the root's
   * `data-lf-layout` (revision_delivery.py), since the body is styled before the parser
   * reaches `main`. The column and sidebar page are documents: they set the text measure
   * (`--lf-measure`, read by theme.css) and allocate each block's declared room
   * (`data-lf-space`), whose rules name the document Layouts in one list (Breakouts,
   * below). A workspace does neither: its grid sizes its regions. */
  /* The pane role's grammar (theme.css owns its look): which row each child stands in,
   * and a body held to the pane's width. Not a page Layout, but it resets what a widget
   * sets on the box it arranges, 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 (100cqi), with one
   * option, a breakout, which `data-width` or a widget's x-space asks for. The breakout
   * reads the free room beside the column from the lengths resolved here. Whatever
   * stands in a margin states the room it takes there (`--lf-taken-l`, `--lf-taken-r`).
   * `--lf-shift` moves the column off centre where a resident needs more room on one
   * side (prepaint.js, `residency`). */
  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 is placed through the body's shell tracks (requested by
     * --lf-column-shell, published on body before the room is measured) rather than an
     * inset, transform or margin, which on a reading's ancestor would suppress native
     * scroll anchoring as residents enter or leave. Other body rows keep 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. Its first sidebar and every sidenote are margin residents
   * (`--lf-resident`, naming the postures each may take in order of preference); the
   * margin pass admits each where the room beside the column holds it (prepaint.js,
   * `residency`) and writes the postures granted to `main`'s `data-lf-margin`. Screen
   * only. A sidebar in the margin stands sticky in --sidebar left of the column; with a
   * fine pointer, one holding a contents map may stand as the map's spine alone, in --map.
   * A sidenote hangs in the right margin and claims nothing: a wide exhibit level with it
   * clears it, and a margin row level with it stands as a pin (margin-layout.js). */
  @property --lf-resident {
    syntax: "*";
    inherits: false;
  }
  /* An empty map-only slot already has its margin posture: no margin and no
   * formatting context between the blocks around 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 anchors no scroll (its passage does), and is a reading region of the
   * Layout's own in either posture (`--lf-reading-region`, reading-regions.js), so the
   * reader's place in it survives a change of posture. */
  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, so it takes its whole side. */
    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 restarts `--lf-top` and its landing band
     * (theme.css), and a focused link keeps the ring's room (`--lf-head-inset`). */
    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 (whatever declares `x-resident: map`, painted as
   * `data-lf-resident`) rests as a spine in that slot and reveals its labels over the
   * page; its package draws it there once the slot is in the margin. */
  @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 stands as 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, so a breakout stops short of it. */
    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);
    }
    /* A sidebar whose map stands alone takes no room in the flow. */
    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] {
      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;
    }
  }
  /* Breakouts: content wider than the argument about it. The prose axis never moves and
   * there is one wider width, so wide evidence is in the column or at --wide. Which
   * widgets break out is the registry's (x-space), painted as `data-lf-space`, so this
   * reaches a widget nobody has written yet.
   *
   * The element grows out of the column rather than widening the prose, so a margin with
   * no room gives nothing and an undeclared widget stays the column's width. Growth stops
   * at main's gutters less the residents' claims (`--lf-taken-l/r`); the rail claims
   * nothing, and a margin row level with a breakout stands on it as a pin
   * (margin-placement.js), since nothing Leaf draws moves the page's content. Where one
   * side has less room, the freer side takes what the other lacks; with both free the
   * element keeps the prose axis.
   *
   * Screen only: paper is the column's width. `body` is the size container, and no
   * surface Leaf opens changes its inline size.
   *
   * A breakout states its width as well as its negative margins, because a box with a
   * width of its own (a table box, an iframe) does not widen from margins. It outranks a
   * widget's own width; a page rule sizing a breakout moves it off the prose axis, which
   * the render check names (layout.js, `off-axis`).
   *
   * A block breaks out only from a holder whose content box is the column's, such as
   * `main` itself, a section or an Ask standing in it. One in a box standing in from the
   * column (a list item, a quotation, a page's own indented block) or one the page
   * arranged keeps to its holder, and the runtime marks it so (`data-lf-kept`,
   * prepaint.js `breakouts`): the room beside it is not the page's to give, and its
   * holder's axis is not the prose's. */
  /* `--lf-breakout: 1`: the theme lets this box stand past its holder. Each rule that
   * lets one break out says so, so a reader (the render check, layout.js) asks the box.
   * It does not inherit. */
  @property --lf-breakout {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  @media screen {
    /* `data-lf-space` is the room a block takes past the measure: its tag's x-space, or
     * the occurrence's `data-width`, painted by delivery (`mark_declared`) so the width
     * is in the first paint. A message's room is withheld by not painting it.
     *
     * A block declaring a wider room than the measure is never as wide as its content,
     * on any page: what it holds scrolls inside it. Size containment keeps its content's
     * minimum out of every shrink-to-fit ancestor (a row-form option, a pane), which
     * would otherwise grow past its own clip. So this rule is held to no Layout. */
    [data-lf-space] {
      contain: inline-size;
      --lf-breakout: 1;
    }
    /* Only a document allocates. This nesting parent names the document Layouts once, so
     * a new one joins its list. `:where()` adds no specificity; `@scope` was rejected
     * because its proximity outranks order, letting these rules beat a later rule of
     * equal specificity in this layer, such as a tile's margin (`.layout-tiles > *`).
     * A widget holding authored blocks (`x-content: markup`), one of which breaks out,
     * shares the arithmetic, so it may span that block: an Ask does (ask.css). `wide`
     * and `available` each refine the second rule. */
    :where(main.layout-column, main.layout-sidebar) {
      :is(
        [data-lf-space],
        [data-lf-content="markup"]:has(> [data-lf-space]:not([data-lf-kept]))
      ) {
        /* Held to the free room beside the page (--lf-free-l/r) and spent evenly about
         * the prose axis where both sides have it. Neither side 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-free-r))
        );
        --lf-grow-l: clamp(
          max(0px, calc(var(--lf-surplus) - var(--lf-free-r))),
          calc(var(--lf-surplus) / 2),
          min(var(--lf-surplus), var(--lf-free-l))
        );
        --lf-grow-r: calc(var(--lf-surplus) - var(--lf-grow-l));
      }
      [data-lf-space] {
        max-width: none;
        width: calc(100% + var(--lf-surplus));
        margin-left: calc(-1 * var(--lf-grow-l));
        margin-right: calc(-1 * var(--lf-grow-r));
        /* The allocation is the outer width, as the column's is (theme.css). */
        box-sizing: border-box;
      }
      /* `wide` is one width wherever the block stands: capped at --wide even in a holder
       * already wider, such as a sidebar page's body; `available` takes everything. A
       * widget holding a block that breaks out reaches as far as that block. */
      :is(
        [data-lf-space="wide"],
        [data-lf-content="markup"]:has(> [data-lf-space="wide"]:not([data-lf-kept]))
      ) {
        --lf-reach: min(var(--wide), var(--lf-room, 0px));
      }
      :is(
        [data-lf-space="available"],
        [data-lf-content="markup"]:has(
          > [data-lf-space="available"]:not([data-lf-kept])
        )
      ) {
        --lf-reach: var(--lf-room, 0px);
      }
      [data-lf-space="wide"] {
        max-width: var(--wide);
      }
      /* What a breakout holds, and a breakout kept to its holder (`data-lf-kept`),
       * take their holder's width: the room past it is the breakout's or the page's own.
       * `--lf-room` inherits, so a block at any depth inside a breakout gets none. */
      [data-lf-space] > *,
      [data-lf-kept] {
        --lf-room: 100%;
      }
      /* A widget that failed soft shows its message and source (`.lf-error`), which are
       * prose, so it takes the column; the source's `pre` scrolls inside the message. */
      [data-lf-space]:has(> .lf-error) {
        --lf-room: 0px;
      }
      /* A box that draws a frame keeps a wide widget inside it: the room is the page's to
       * give, and inside a callout or disclosure the page is not what holds the widget. A
       * box declares it draws one where it draws it (`--lf-block-frame: 1`), and the room
       * follows from that one declaration. `--lf-room` inherits, so one rule reaches a
       * widget at any depth, and `--lf-block-frame` resets one level in.
       *
       * A box that trims its edges but draws nothing says `trim` (`main`, a page tab's
       * panel, a command's goal), so the room passes through it. A transparent wrapper
       * declares nothing. `page check --render` reports a box that draws without
       * declaring. */
      @container style(--lf-block-frame: 1) {
        * {
          --lf-room: 100%;
        }
      }
      /* When startup is incomplete, undrawn widgets show source in the column. */
      html[data-lf-startup-error]:not([data-lf-interactive])
        &
        :is([data-lf-space], [data-lf-content="markup"]:has(> [data-lf-space])) {
        --lf-room: 0px;
      }
    }
    /* A table breakout paints only its columns' rules, so its room is a limit, not a
     * size: its box takes the columns' natural width (`max-content`), at least its
     * holder's and at most the breakout's, and stands where a breakout of that width
     * would, by the same arithmetic about the prose axis (`--lf-over` is how far it
     * passes the column). One that fits the column starts where the prose does.
     *
     * The margin sets the box at the edge of the free room on its holder's start side,
     * and a translation, which can use the box's own width (`--lf-pull` is how far a
     * breakout of that width grows left), moves it the rest. Laying it out inside the
     * room keeps Firefox from counting an untranslated overhang in what the page
     * scrolls. A box wider than its holder is placed from the holder's start whatever
     * margin the other side states, so each direction sets its own start.
     *
     * Its width is its content's, so it gives up size containment; a table the page
     * arranged, in a frame, or inside another breakout stays the contained table
     * reading.css makes it. Its caption is held to the breakout's width. It says
     * `normal` before `scroll-state` because Firefox and WebKit drop the second, and a
     * size container would zero its `max-content`. */
    @container not (style(--lf-room: 100%) or style(--lf-block-frame: 1)) {
      main.layout-column
        table[data-lf-space]:not([data-lf-space] table, [data-lf-kept]) {
        contain: none;
        container-type: normal;
        container-type: scroll-state;
        width: max-content;
        min-width: 100%;
        max-width: calc(100% + var(--lf-surplus));
        margin-left: calc(-1 * var(--lf-free-l));
        margin-right: auto;
        --lf-over: calc(100% - var(--lf-width));
        --lf-pull: clamp(
          max(0px, var(--lf-over) - var(--lf-free-r)),
          var(--lf-over) / 2,
          min(var(--lf-over), var(--lf-free-l))
        );
        translate: calc(var(--lf-free-l) - var(--lf-pull)) 0;
        :dir(rtl) > & {
          margin-left: auto;
          margin-right: calc(-1 * var(--lf-free-r));
          translate: calc(var(--lf-over) - var(--lf-free-r) - var(--lf-pull)) 0;
        }
        & > caption {
          max-inline-size: max(var(--lf-width), var(--lf-reach));
        }
      }
    }
    /* A widget with a stated height (x-height, or `data-height`) has that box from the
     * first paint until its module draws (`lf-rendered`), clipping its source meanwhile,
     * so the drawing lands in room already laid out. Once drawn the box is the drawing's;
     * a failure is shown whole. */
    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, capped at the widest page (`--lf-wide-page`). The track is the
   * Layout's `aside`: written before the body it stands left, after it right, so source
   * order is reading order at every width. Body and track take 2:1 of the room from
   * bases of 30rem and 18rem, and stack where they no longer fit or where the body would
   * lose its content's minimum. A header or footer takes the whole row. Flex margins do
   * not collapse, so the items' block margins go. */
  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 holding one block keeps it in view beside the scrolling body: sticky below
   * the banner and any tab strip, scrolling what it holds within the window, and only
   * inside its own flex line. The track itself never scrolls, so it keeps its flex
   * sizing. Whether the track stands beside the body depends on widths no query reads,
   * so the margin reading marks it (`data-lf-beside`, prepaint.js `residency`). Like a
   * margin sidebar, the block restarts the slot and landing band, keeps the ring's room,
   * anchors no reading, and is a reading region of the Layout's own. */
  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 row's cells one height.
   * How a row wraps is the page's to judge (page-checkpoints.md). */
  .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 between the banner and the bottom bar. Header and
   * footer take their content's height and the body the rest, arranged as the body says:
   * a grid of panes, a pane, or a widget composing its own regions. Each pane's body
   * scrolls on its own, and `--lf-full-height` on main tells a body widget it has a
   * definite height to fill. Where the window is too small, the workspace flows and the
   * page scrolls.
   *
   * A pane is any element in the pane role (`data-lf-reading-role="pane"`, theme.css),
   * painted by delivery; a widget-generated one also carries `data-lf-generated`. The
   * workspace takes the whole window, with minimal gutter, gap and header, since every
   * pixel of frame comes from the panes. Type is the theme's (`.density-working`). */
  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 is one row: the title with the page's status beside it, wrapping only
   * where the row runs out. A lede 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
   * (reading-regions.js, `syncLayoutRegion`). */
  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 meeting at a hairline: the
   * grid draws the frame with a 1px gap, and each pane trades its own border for a 1px
   * ring outside its box, so neighbours' rings fill the gap as one line and an empty
   * cell shows the page's ground. A pane a body widget generates
   * (`data-lf-generated`) is that widget's region, so neither 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;
    }
    /* Only a page's grid of panes shares the body's height among its rows and gives its
     * panes a definite height; a body widget lays out its own tracks. */
    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 passes the window's height to its panes; one that is not a pane scrolls
     * as a whole. Each box that scrolls here stops sticking boxes at its own top
     * (`--lf-top: 0px`; the theme's banner offset is the window's) and holds its height
     * on purpose (`--lf-holds-height`, theme.css). */
    main.layout-workspace > :not(header, footer, [data-lf-reading-role="pane"]) {
      overflow: auto;
      --lf-top: 0px;
      --lf-holds-height: 1;
    }
    /* A pane (a grid of header, body and footer, theme.css) told it has a definite height
     * by its holder may shrink below its content and scrolls its body; a pane not told,
     * inside a section or another pane's body, is content and scrolls with its holder. */
    @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 the scroller's padding edge, so the body's top inset is
         * taken back (`--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 bounded block that is all a workspace scroller holds takes that height, or its
     * stated bound where less (`[data-lf-bound]`, theme.css), rather than scrolling inside
     * a box that also scrolls. */
    @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. */

  /* Paper takes no input, so what a widget injects to be worked goes: the control, and
     the box that holds controls. Here the document and every declared shadow tree read
     it; important in the top tier, it outranks every ordinary display and yields to a
     widget's own important print rule (threads, controls.css). What stays is a control
     whose label is words the page keeps: one it speaks (data-lf-said, a pick mark
     reading "chosen") or one it echoes off another element (data-lf-echo, a roster
     row's name), keyed on the declaration each label makes (see relabel) rather than on
     .lf-ui, whose question is anchoring's. Those give up the shape that promises a
     press; colour stays, being part of what the control says. */
  @media print {
    [data-lf-offer]:not([data-lf-said], [data-lf-echo]) {
      display: none !important;
    }
    [data-lf-offer]:is([data-lf-said], [data-lf-echo]) {
      background: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding-inline: 0 !important;
      cursor: default !important;
      text-decoration: none !important;
      list-style: none !important;
    }
    [data-lf-offer]:is([data-lf-said], [data-lf-echo])::-webkit-details-marker {
      display: none !important;
    }
  }
}