/* Lil Cactus tutorials (/learn/). Graphite like the editor and the About page; one stylesheet,
   no frameworks. Built by src/learn/render.ts. */
@font-face { font-family: 'Lil Gabarito'; src: url('gabarito.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

:root {
  --ground: #1b1b1b;
  --raise: #232323;
  --raise-2: #2a2a2a;
  --line: rgb(255 255 255 / 0.08);
  --line-2: rgb(255 255 255 / 0.14);
  --ink: #f4f1eb;
  --text: #c9c6c0;
  --muted: #94918b;
  --lime: #a6cf6b;
  --lime-deep: #6c9e26;
  --lime-ink: #10180a;
  --coral: #ff7a59;
  --pin: #b6e07a;
  --radius: 14px;
  --gutter: clamp(18px, 4vw, 48px);
  --col: 720px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Lil Gabarito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; color: var(--text); font: 400 17.5px/1.7 var(--font);
  background: radial-gradient(1200px 700px at 85% -10%, #262626, var(--ground) 70%) var(--ground);
  overflow-x: hidden;
}
::selection { color: var(--lime-ink); background: var(--lime); }
a { color: var(--lime); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #cdeaa0; }
:focus-visible { outline: none; }
/* Only for keyboard movement (learn.js marks the input): a faint dotted line, never for pointer focus or headings. */
html[data-input='keyboard'] :is(a[href], button, input, summary, [tabindex]:not([tabindex='-1'])):focus { outline: 1.5px dotted #d8d5cf; outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { color: var(--ink); font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
b, strong { color: var(--ink); font-weight: 600; }
.lc-skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 10; padding: 8px 14px; border-radius: 8px; background: var(--raise-2); color: var(--ink); }
.lc-skip:focus { top: 12px; }
.lc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ top bar */
.lc-top {
  position: sticky; top: 0; z-index: 5; height: 60px;
  background: rgb(27 27 27 / 0.72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
}
.lc-top-in { height: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lc-brand { font: 700 20px/1 var(--display); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.lc-brand > span { color: var(--lime); }
.lc-top nav { display: flex; align-items: center; gap: 18px; font-size: 14.5px; }
.lc-top nav > a:not(.lc-btn) { color: var(--text); text-decoration: none; }
.lc-top nav > a:not(.lc-btn):hover { color: var(--ink); }

/* ------------------------------------------------------------ buttons */
.lc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border-radius: 23px; font: 600 15.5px/1 var(--font); color: var(--lime-ink); text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #b9dc85, #94c158); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 8px 24px -8px rgb(130 184 52 / 0.55);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms;
}
.lc-btn:hover { color: var(--lime-ink); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 12px 28px -8px rgb(130 184 52 / 0.7); }
.lc-btn svg { transition: transform 160ms; }
.lc-btn:hover svg { transform: translateX(2px); }
.lc-btn-sm { min-height: 36px; padding: 0 16px; font-size: 14px; border-radius: 18px; }
.lc-btn-ghost { color: var(--ink); background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px var(--line-2); }
.lc-btn-ghost:hover { color: var(--ink); background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }

/* ------------------------------------------------------------ layout */
.lc-page { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); }
.lc-main { min-width: 0; }
.lc-main article { max-width: var(--col); margin: 0 auto; padding: 28px 0 40px; }
@media (min-width: 1180px) {
  .lc-page { grid-template-columns: 240px minmax(0, 1fr); column-gap: 56px; }
  .lc-main article { margin: 0; max-width: 780px; }
}
.lc-toc { display: none; }
@media (min-width: 1180px) {
  .lc-toc { display: block; position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow: auto; padding: 36px 0 24px; font-size: 14px; scrollbar-width: thin; }
}
.lc-toc-h { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.lc-toc ol, .lc-toc ul { list-style: none; margin: 0 0 22px; padding: 0; }
.lc-toc li { margin: 0; }
.lc-toc a { display: flex; gap: 10px; padding: 5px 8px; margin-inline-start: -8px; border-radius: 8px; color: var(--text); text-decoration: none; line-height: 1.4; }
.lc-toc a:hover { color: var(--ink); background: rgb(255 255 255 / 0.05); }
.lc-toc a span { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 0; border-radius: 50%; font-size: 11.5px; font-weight: 700; color: var(--lime-ink); background: var(--lime); }
.lc-toc-cta { padding: 16px; border-radius: var(--radius); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.lc-toc-cta p { margin: 0 0 12px; color: var(--ink); font-weight: 500; line-height: 1.45; }
.lc-toc .lc-toc-cta .lc-btn { display: inline-flex; margin: 0; padding: 0 16px; color: var(--lime-ink); line-height: 1; }
.lc-toc .lc-toc-cta .lc-btn:hover { color: var(--lime-ink); background: linear-gradient(180deg, #c3e293, #9cc85f); }

/* ------------------------------------------------------------ article head */
.lc-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.lc-crumbs a { color: var(--muted); text-decoration: none; }
.lc-crumbs a:hover { color: var(--ink); }
.lc-crumbs i { font-style: normal; opacity: 0.6; }
h1 { margin: 14px 0 12px; font-size: clamp(32px, 5.2vw, 50px); line-height: 1.08; letter-spacing: -0.025em; }
.lc-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 26px; font-size: 14px; color: var(--muted); }
.lc-meta span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 0 2px; margin-inline: -12px 14px; border-radius: 50%; background: currentColor; opacity: 0.6; vertical-align: middle; }
@media (max-width: 560px) { .lc-meta span:last-child { flex-basis: 100%; } .lc-meta span:last-child::before { display: none; } }

.lc-answer { position: relative; margin: 0 0 28px; padding: 20px 22px 20px 24px; border-radius: var(--radius); background: linear-gradient(135deg, rgb(166 207 107 / 0.1), rgb(166 207 107 / 0.03)); box-shadow: inset 0 0 0 1px rgb(166 207 107 / 0.22); }
.lc-answer h2 { margin: 0 0 6px; font: 600 12.5px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.lc-answer p { margin: 0; color: var(--ink); font-size: 18.5px; line-height: 1.6; }

/* ------------------------------------------------------------ menu paths and keys */
.lc-menu { display: inline; white-space: normal; font-weight: 600; color: var(--ink); }
.lc-menu > span { padding: 1px 7px; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 6px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.lc-menu i { font-style: normal; margin: 0 4px; color: var(--muted); }
.lc-nowrap, .lc-byline time, .lc-foot time { white-space: nowrap; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 7px; border-radius: 6px; font: 600 0.84em/1.5 var(--font); color: var(--ink); text-align: center; white-space: nowrap; background: linear-gradient(#333, #2a2a2a); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.5), inset 0 0 0 1px var(--line-2); }
.is-mac .k-win, .is-mac .k-or, .is-win .k-mac, .is-win .k-or { display: none; }
/* Phone readers will follow along on a computer that may be either: show both spellings. */
html.is-phone .lc-keys .k-win, html.is-phone .lc-keys .k-mac, html.is-phone .lc-keys .k-or { display: inline-block; }
html.is-phone .lc-keys .k-or { display: inline; }
.lc-ui { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------ compare */
.lc-compare { max-width: var(--w, none); margin: 0 auto 26px; }
.lc-compare-frame { position: relative; aspect-ratio: var(--ar); border-radius: var(--radius); overflow: hidden; background: #111; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.8), 0 0 0 1px var(--line); --pos: 50%; }
.lc-compare.on-checks .lc-compare-frame { background-color: #fff; background-image: conic-gradient(#e6e6e6 25%, #fff 0 50%, #e6e6e6 0 75%, #fff 0); background-size: 22px 22px; }
.lc-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lc-before-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.lc-compare[style] .lc-compare-frame { --pos: inherit; }
.lc-compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgb(0 0 0 / 0.5); pointer-events: none; }
.lc-compare-line span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat; box-shadow: 0 4px 16px rgb(0 0 0 / 0.45); }
.lc-compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
html[data-input='keyboard'] .lc-compare-frame:has(.lc-compare-range:focus) { outline: 1.5px dotted #d8d5cf; outline-offset: 2px; }
.lc-tag { position: absolute; top: 14px; padding: 4px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgb(0 0 0 / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.lc-tag-before { left: 14px; }
.lc-tag-after { right: 14px; }
.no-js .lc-before-clip, .no-js .lc-compare-line, .no-js .lc-tag, .no-js .lc-compare-range { display: none; }
.lc-compare figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.no-js .lc-compare figcaption { display: none; }

.lc-hero { max-width: var(--w, none); margin: 0 auto 26px; }
.lc-hero .lc-shot { border-radius: var(--radius); box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.8), 0 0 0 1px var(--line); }
.lc-hero figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.lc-hero figcaption > span { display: block; }

/* ------------------------------------------------------------ at a glance + cta */
.lc-glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 22px; border-radius: var(--radius); overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.lc-glance div { padding: 14px 18px; background: var(--raise); }
.lc-glance dt { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.lc-glance dd { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.5; }
@media (min-width: 720px) { .lc-glance { grid-template-columns: 0.6fr 0.8fr 1.3fr 1.3fr; } }
.lc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 30px; }
.lc-cta-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; flex-basis: 100%; font-size: 14px; color: var(--muted); }
.lc-cta-files > span { margin-inline-end: 2px; }
.lc-cta-note { flex-basis: 100%; margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.lc-intro { margin-bottom: 8px; }
.lc-intro p:first-child { margin-top: 0; }

/* ------------------------------------------------------------ sections */
.lc-sec { margin: 56px 0 0; }
.lc-sec h2 { margin: 0 0 16px; font-size: clamp(26px, 3.4vw, 33px); line-height: 1.18; }
.lc-sec h3 { margin: 28px 0 8px; font-size: 21px; line-height: 1.3; }
.lc-sec p { margin: 0 0 16px; }
.lc-sec ul, .lc-sec ol:not(.lc-steps):not(.lc-key) { margin: 0 0 18px; padding-inline-start: 22px; }
.lc-sec li { margin: 0 0 8px; }
.lc-sec li::marker { color: var(--lime); }

/* ------------------------------------------------------------ tables */
.lc-table-wrap { max-width: 100%; margin: 0 0 18px; overflow-x: auto; border-radius: 12px; }
.lc-table-wrap > .lc-table { margin: 0; }
.lc-table { width: 100%; margin: 0 0 18px; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; }
.lc-table th, .lc-table td { padding: 11px 16px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.lc-table th { color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; background: var(--raise-2); }
.lc-table td { background: var(--raise); }
.lc-table td:first-child { color: var(--ink); }
.lc-table tr:last-child td { border-bottom: 0; }
.lc-table td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ steps */
.lc-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.lc-step { position: relative; margin: 0 0 40px; padding-inline-start: 58px; }
.lc-step::before { content: ''; position: absolute; inset-inline-start: 19px; top: 46px; bottom: -34px; width: 2px; background: linear-gradient(var(--line-2), transparent); }
.lc-step:last-child::before { display: none; }
.lc-step-head { display: flex; align-items: flex-start; gap: 18px; margin-inline-start: -58px; }
.lc-step-n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 700 18px/1 var(--display); color: var(--lime-ink); background: linear-gradient(180deg, #c3e293, #94c158); box-shadow: 0 0 0 5px var(--ground), 0 6px 18px -6px rgb(130 184 52 / 0.6); }
.lc-step h3 { margin: 4px 0 10px; font-size: clamp(21px, 2.6vw, 25px); line-height: 1.3; }
.lc-step-body p { margin: 0 0 14px; }
.lc-tip { padding: 12px 16px; border-radius: 10px; background: rgb(255 255 255 / 0.04); box-shadow: inset 3px 0 0 var(--lime); font-size: 16px; }
.lc-tip > b:first-child { color: var(--lime); margin-inline-end: 4px; }
@media (max-width: 560px) {
  .lc-step { padding-inline-start: 0; }
  .lc-step::before { display: none; }
  .lc-step-head { margin-inline-start: 0; gap: 14px; }
  .lc-step-n { width: 34px; height: 34px; font-size: 16px; }
}

/* ------------------------------------------------------------ figures */
.lc-fig { margin: 18px 0 8px; }
.lc-fig .lc-shot { max-width: var(--w, 100%); }
.lc-shot { position: relative; border-radius: 12px; overflow: hidden; background: #111; box-shadow: 0 24px 60px -28px rgb(0 0 0 / 0.9), 0 0 0 1px var(--line-2); }
.lc-shot img { width: 100%; }
@media (min-width: 1180px) { .lc-step .lc-fig.is-wide { margin-inline-start: -58px; } }
.lc-pin {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  font: 700 14px/1 var(--font); color: var(--lime-ink); background: var(--pin);
  box-shadow: 0 0 0 3px rgb(16 24 10 / 0.85), 0 4px 14px rgb(0 0 0 / 0.55);
}
.lc-ring { position: absolute; z-index: 1; border-radius: 9px; box-shadow: 0 0 0 2.5px var(--pin), 0 0 0 7px rgb(166 207 107 / 0.22), 0 0 30px rgb(166 207 107 / 0.35); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .lc-ring { animation: lc-ring 2.4s ease-in-out infinite; }
  @keyframes lc-ring { 50% { box-shadow: 0 0 0 2.5px var(--pin), 0 0 0 10px rgb(166 207 107 / 0.12), 0 0 36px rgb(166 207 107 / 0.3); } }
}
.lc-fig figcaption { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.lc-fig figcaption > span { display: block; }
.lc-key { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.lc-key li { display: flex; gap: 10px; align-items: baseline; color: var(--text); }
.lc-key li::before { content: attr(value); flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--lime-ink); background: var(--pin); transform: translateY(4px); }
@media (max-width: 560px) { .lc-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 12px; } }

.lc-problem { margin: 16px 0; padding: 12px 16px; border-radius: 10px; color: #fff; background: #8a1f1f; font: 600 15px/1.4 var(--mono); }

/* ------------------------------------------------------------ band */
.lc-band { margin: 52px 0 0; padding: 30px; border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, rgb(166 207 107 / 0.16), transparent 60%), radial-gradient(90% 120% at 100% 100%, rgb(255 122 89 / 0.12), transparent 60%), var(--raise); box-shadow: inset 0 0 0 1px var(--line-2); }
.lc-band h2 { margin: 0 0 8px; font-size: 26px; }
.lc-band p { margin: 0 0 20px; }
.lc-band .lc-cta { margin: 0; }

/* ------------------------------------------------------------ elsewhere, faq, related */
.lc-else { margin: 0; display: grid; gap: 10px; }
.lc-else div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 18px; border-radius: 12px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.lc-else dt { color: var(--ink); font-weight: 600; }
.lc-else dd { margin: 0; }
@media (max-width: 560px) { .lc-else div { grid-template-columns: 1fr; gap: 4px; } .lc-table th, .lc-table td { padding: 9px 10px; } .lc-table { font-size: 15px; } .lc-table th { letter-spacing: 0.03em; } }
.lc-faq { display: grid; gap: 12px; }
.lc-qa { padding: 18px 20px; border-radius: 12px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.lc-qa h3 { margin: 0 0 6px; font-size: 18.5px; font-family: var(--font); font-weight: 650; letter-spacing: -0.01em; }
.lc-qa p { margin: 0; }
.lc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.lc-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms; }
.lc-card:hover { color: var(--text); transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -20px rgb(0 0 0 / 0.8); }
.lc-card-img { aspect-ratio: 3 / 2; overflow: hidden; background: #111; }
.lc-card-img.on-checks { background-color: #fff; background-image: conic-gradient(#e6e6e6 25%, #fff 0 50%, #e6e6e6 0 75%, #fff 0); background-size: 16px 16px; }
.lc-card-img img { width: 100%; height: 100%; object-fit: cover; }
/* Single-image heroes are UI screenshots: show them whole. */
.lc-card-img.is-contain { background: #141414; }
.lc-card-img.is-contain img { object-fit: contain; padding: 10px; }
.lc-card-text { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; font-size: 14.5px; line-height: 1.5; }
.lc-card-text b { font-size: 16.5px; line-height: 1.3; color: var(--ink); }
.lc-card-text small { margin-top: auto; padding-top: 4px; color: var(--muted); font-size: 13px; }
.lc-byline { margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------ hub */
.lc-hub { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) 40px; }
.lc-hub-head { max-width: 760px; padding: 56px 0 18px; }
.lc-hub-head p { font-size: 19px; color: var(--text); }
.lc-hub-group { margin: 40px 0 0; }
.lc-hub-group h2 { margin: 0 0 4px; font-size: 27px; }
.lc-hub-group > p { margin: 0 0 18px; color: var(--muted); }

/* ------------------------------------------------------------ footer */
.lc-foot { margin-top: 72px; border-top: 1px solid var(--line); background: #171717; }
.lc-foot-in { max-width: 1320px; margin: 0 auto; padding: 36px var(--gutter) 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.lc-foot-in p { margin: 10px 0 0; max-width: 380px; font-size: 14.5px; color: var(--muted); }
.lc-foot nav { display: flex; flex-wrap: wrap; align-items: flex-start; align-self: flex-start; gap: 10px 24px; font-size: 14.5px; }
.lc-foot nav a { color: var(--text); text-decoration: none; }
.lc-foot nav a:hover { color: var(--ink); }
.lc-foot-note { max-width: 1320px; margin: 0 auto; padding: 8px var(--gutter) 32px; font-size: 13px; color: #6f6c67; }
@media (max-width: 560px) { .lc-top nav { gap: 14px; } body { font-size: 17px; } }
@media (max-width: 360px) { .lc-top nav > a:not(.lc-btn) { display: none; } }

/* ------------------------------------------------------------ languages */
/* Gabarito covers Latin only: headings in other scripts use the system face rather than mixing two in a line. */
:root:is(:lang(uk), :lang(ar), :lang(zh)) { --display: var(--font); }
:root:lang(ar) { --font: -apple-system, BlinkMacSystemFont, 'SF Arabic', 'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif; }
:root:lang(zh) { --font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }
:root:is(:lang(ar), :lang(zh)) h1, :root:is(:lang(ar), :lang(zh)) h2, :root:is(:lang(ar), :lang(zh)) h3 { letter-spacing: 0; }
:root:is(:lang(ar), :lang(zh)) :is(.lc-toc-h, .lc-glance dt, .lc-table th) { letter-spacing: 0; text-transform: none; }
[dir='rtl'] .lc-btn svg { transform: scaleX(-1); }
[dir='rtl'] .lc-btn:hover svg { transform: scaleX(-1) translateX(2px); }
.lc-lang { position: relative; }
.lc-lang summary { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; color: var(--text); cursor: pointer; list-style: none; white-space: nowrap; }
.lc-lang summary::-webkit-details-marker { display: none; }
.lc-lang summary:hover, .lc-lang[open] summary { color: var(--ink); background: rgb(255 255 255 / 0.06); }
.lc-lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 6; min-width: 190px; margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: var(--raise-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -12px rgb(0 0 0 / 0.6); }
.lc-lang li a, .lc-lang li span { display: block; padding: 7px 12px; border-radius: 8px; color: var(--text); text-decoration: none; white-space: nowrap; }
.lc-lang li a:hover { color: var(--ink); background: rgb(255 255 255 / 0.07); }
.lc-lang li span[aria-current] { color: var(--lime); }
@media (max-width: 560px) { .lc-lang summary > span { display: none; } }
.lc-all { margin: 16px 0 0; font-size: 15px; }
/* Editor labels and shortcuts keep their own direction inside right-to-left text. */
[dir='rtl'] :is(.lc-ui, .lc-menu > span) { unicode-bidi: isolate; }
/* Shortcuts read left to right in every language (⌘O, Ctrl+Shift+S). */
[dir='rtl'] kbd { direction: ltr; unicode-bidi: isolate; }