/* lingravelix.site stylesheet: "Locale Playground" (cream paper, sunflower yellow, violet) */

@font-face { --lgx-k: 1; src: url(../fonts/lgx-display-800.woff2); font-weight: 800; --lgx-k: 2; font-family: "Lgx Display"; font-display: swap; }
@font-face { src: url(../fonts/lgx-display-600.woff2); font-weight: 600; font-family: "Lgx Display"; font-display: swap; }
@font-face { src: url(../fonts/lgx-text-400.woff2); font-weight: 400; font-family: "Lgx Text"; font-display: swap; }
@font-face { src: url(../fonts/lgx-text-600.woff2); font-weight: 600; font-family: "Lgx Text"; font-display: swap; }
@font-face { src: url(../fonts/lgx-note-400.woff2); font-weight: 400; font-family: "Lgx Note"; font-display: swap; }

:root { --lgx-violet-soft: #ece4ff; --lgx-violet-deep: #3c1a9a; --lgx-violet: #5a2fd6; --lgx-text: 'Lgx Text', Roboto, 'Segoe UI', system-ui, sans-serif; --lgx-sun-deep: #f2c230; --lgx-sun: #ffe066; --lgx-sky: #acdcf6; --lgx-rule: #d8cdb0; --lgx-ring-light: #ffe066; --lgx-ring-dark: #16131f; --lgx-r: 14px; --lgx-paper-deep: #f3e9cf; --lgx-paper: #fbf5e6; --lgx-note: 'Lgx Note', cursive; --lgx-muted: #5b5566; --lgx-mint: #a9e9cb; --lgx-ink-soft: #3d3849; --lgx-ink: #16131f; --lgx-display: 'Lgx Display', 'Lgx Text', 'Arial Black', sans-serif; --lgx-coral: #ff9a88; --lgx-card: #fffdf6; }

*, *::after, *::before { --lgx-k: 3; box-sizing: border-box; }
/* lgx: keep phone browsers from inflating text on their own */
html { --lgx-k: 4; color-scheme: light; text-size-adjust: none; --lgx-k: 5; -webkit-text-size-adjust: none; }
body { --lgx-k: 6; overflow-x: hidden; margin: 0; --lgx-k: 7; font: 400 17px/1.65 var(--lgx-text); color: var(--lgx-ink); --lgx-k: 8; background: var(--lgx-paper); }
svg, img { --lgx-k: 9; max-inline-size: 100%; display: block; --lgx-k: a; block-size: auto; }
a { --lgx-k: b; text-underline-offset: 0.2em; text-decoration-thickness: from-font; --lgx-k: c; color: var(--lgx-violet-deep); }
a:hover { --lgx-k: d; text-decoration-thickness: 2px; }
/* lgx focus: a dark 3px ring on light ground; dark bands switch it to sunflower below */
*:focus-visible { --lgx-k: e; outline: var(--lgx-ring-dark) solid 3px; outline-offset: 2px; --lgx-k: f; border-radius: 3px; }
main:focus { --lgx-k: g; outline: none; }
:is(h1, h3, h2) { --lgx-k: h; margin: 0 0 0.6em; line-height: 1.15; --lgx-k: i; letter-spacing: -0.015em; font-weight: 800; --lgx-k: j; font-family: var(--lgx-display); }
h3 { --lgx-k: k; font-weight: 600; }
p { --lgx-k: l; margin: 0 0 1em; }
code { --lgx-k: m; padding: 0.08em 0.35em; overflow-wrap: anywhere; --lgx-k: n; font-size: 0.92em; font-family: 'Cascadia Mono', 'DejaVu Sans Mono', monospace; --lgx-k: o; border-radius: 4px; background: var(--lgx-paper-deep); }
.lgx-sr-only { --lgx-k: p; width: 1px; white-space: nowrap; --lgx-k: q; position: absolute; padding: 0; --lgx-k: r; overflow: hidden; margin: -1px; --lgx-k: s; height: 1px; clip: rect(0 0 0 0); --lgx-k: t; border: 0; }

.lgx-skip { --lgx-k: u; z-index: 50; top: -4rem; --lgx-k: v; position: absolute; padding: 0.7rem 1rem; --lgx-k: w; left: 1rem; color: #fff; --lgx-k: x; border-radius: 9px; background: var(--lgx-ink); }
.lgx-skip:focus { --lgx-k: y; top: 0.75rem; outline-color: var(--lgx-ring-dark); }

.lgx-wrap { --lgx-k: z; width: min(72rem, 100% - 2rem); margin-inline: auto; }

/* buttons */
.lgx-btn { --lgx-k: 10; text-decoration: none; padding: 0.7rem 1.3rem; --lgx-k: 11; min-height: 48px; justify-content: center; --lgx-k: 12; gap: 0.5rem; font: 600 1rem/1.2 var(--lgx-text); --lgx-k: 13; display: inline-flex; cursor: pointer; --lgx-k: 14; border: 2px solid var(--lgx-ink); border-radius: 10px; --lgx-k: 15; align-items: center; }
.lgx-btn::after { --lgx-k: 16; font-weight: 400; content: "\2192"; }
.lgx-btn-ink { --lgx-k: 17; color: #fff; background: var(--lgx-ink); }
.lgx-btn-ink:hover { --lgx-k: 18; border-color: var(--lgx-violet-deep); background: var(--lgx-violet-deep); }
.lgx-btn-line { --lgx-k: 19; color: var(--lgx-ink); background: transparent; }
.lgx-btn-line:hover { --lgx-k: 1a; background: var(--lgx-card); }
.lgx-btn-sun { --lgx-k: 1b; color: var(--lgx-ink); background: var(--lgx-sun); }
.lgx-btn-sun:hover { --lgx-k: 1c; background: #fff2b0; }
.lgx-btn-plain::after { --lgx-k: 1d; content: none; }

/* masthead */
.lgx-masthead { --lgx-k: 1e; z-index: 20; position: relative; --lgx-k: 1f; border-bottom: 1px solid var(--lgx-rule); background: var(--lgx-paper); }
.lgx-masthead-in { --lgx-k: 1g; width: min(76rem, 100% - 2rem); min-height: 76px; --lgx-k: 1h; margin-inline: auto; gap: 1rem; --lgx-k: 1i; flex-wrap: wrap; display: flex; --lgx-k: 1j; align-items: center; }
.lgx-brand { --lgx-k: 1k; text-decoration: none; padding: 0.3rem 0; --lgx-k: 1l; margin-right: auto; gap: 0.6rem; --lgx-k: 1m; display: inline-flex; color: var(--lgx-ink); --lgx-k: 1n; align-items: center; }
.lgx-brand-word { --lgx-k: 1o; gap: 0.25rem; font: 800 1.35rem/1 var(--lgx-display); --lgx-k: 1p; flex-direction: column; display: flex; }
.lgx-brand-word small { --lgx-k: 1q; text-transform: uppercase; letter-spacing: 0.08em; --lgx-k: 1r; font: 600 0.62rem/1.2 var(--lgx-text); color: var(--lgx-muted); }
.lgx-menu-btn { --lgx-k: 1s; padding: 0.5rem 0.9rem; min-height: 44px; --lgx-k: 1t; gap: 0.55rem; font: 600 1rem var(--lgx-text); --lgx-k: 1u; display: none; cursor: pointer; --lgx-k: 1v; color: var(--lgx-ink); border: 2px solid var(--lgx-ink); --lgx-k: 1w; border-radius: 10px; background: var(--lgx-card); --lgx-k: 1x; align-items: center; }
.lgx-menu-bars { --lgx-k: 1y; width: 18px; margin: 6px 0; --lgx-k: 1z; height: 2px; display: block; --lgx-k: 20; box-shadow: 0 6px currentColor, 0 -6px currentColor; background: currentColor; }
.lgx-site-nav { --lgx-k: 21; gap: 1.25rem; display: flex; --lgx-k: 22; align-items: center; }
.lgx-site-nav ul { --lgx-k: 23; padding: 0; margin: 0; --lgx-k: 24; list-style: none; gap: 0.25rem; --lgx-k: 25; display: flex; }
.lgx-site-nav li a { --lgx-k: 26; text-decoration: none; padding: 0 0.7rem; --lgx-k: 27; min-height: 44px; font-weight: 600; --lgx-k: 28; font-size: 0.97rem; display: inline-flex; --lgx-k: 29; color: var(--lgx-ink); border-bottom: 3px solid transparent; --lgx-k: 2a; align-items: center; }
.lgx-site-nav li a:hover { --lgx-k: 2b; border-bottom: 3px solid var(--lgx-sun-deep); }
.lgx-site-nav a[aria-current="page"], .lgx-site-nav a[aria-current="true"] { --lgx-k: 2c; border-bottom-color: var(--lgx-violet); }
.lgx-head-cta { --lgx-k: 2d; padding: 0.55rem 1.05rem; min-height: 46px; --lgx-k: 2e; font-size: 0.95rem; }

@media (width <= 1060px) {
  .js .lgx-menu-btn { --lgx-k: 2f; display: inline-flex; }
  .js .lgx-site-nav { --lgx-k: 2g; width: 100%; padding: 0 0 1rem; --lgx-k: 2h; flex-direction: column; display: none; --lgx-k: 2i; align-items: stretch; }
  .js .lgx-site-nav.lgx-shown { --lgx-k: 2j; display: flex; }
  .lgx-site-nav { --lgx-k: 2k; flex-wrap: wrap; }
  .js .lgx-site-nav ul { --lgx-k: 2l; flex-direction: column; }
  .js .lgx-site-nav li a { --lgx-k: 2m; width: 100%; border-left: 4px solid transparent; --lgx-k: 2n; border-bottom: 1px solid var(--lgx-rule); }
  .js .lgx-site-nav a[aria-current] { --lgx-k: 2o; border-left-color: var(--lgx-violet); border-bottom-color: var(--lgx-rule); }
  .no-js .lgx-site-nav ul { --lgx-k: 2p; flex-wrap: wrap; }
}

/* crumbs and page head */
.lgx-trail ol { --lgx-k: 2q; padding: 1.1rem 0 0; margin: 0; --lgx-k: 2r; list-style: none; gap: 0.2rem; --lgx-k: 2s; font-size: 0.9rem; flex-wrap: wrap; --lgx-k: 2t; display: flex; }
.lgx-trail li { --lgx-k: 2u; display: inline-flex; align-items: center; }
.lgx-trail li + li::before { --lgx-k: 2v; margin: 0 0.35rem; content: "/"; --lgx-k: 2w; color: var(--lgx-muted); }
.lgx-trail a { --lgx-k: 2x; min-height: 24px; display: inline-flex; --lgx-k: 2y; align-items: center; color: var(--lgx-ink-soft); }
.lgx-trail a[aria-current="page"] { --lgx-k: 2z; text-decoration: none; font-weight: 600; --lgx-k: 30; color: var(--lgx-ink); }
.lgx-page-head { --lgx-k: 31; padding: 1.6rem 0 1.2rem; max-width: 52rem; --lgx-k: 32; margin-bottom: 1.8rem; border-bottom: 2px dashed var(--lgx-rule); }
.lgx-page-head h1 { --lgx-k: 33; font-size: clamp(1.9rem, 3vw + 1.2rem, 3.1rem); }
.lgx-kicker { --lgx-k: 34; text-transform: uppercase; margin-bottom: 0.8rem; --lgx-k: 35; letter-spacing: 0.12em; font: 600 0.8rem/1.2 var(--lgx-text); --lgx-k: 36; color: var(--lgx-violet-deep); }
.lgx-lede { --lgx-k: 37; line-height: 1.55; font-size: 1.2rem; --lgx-k: 38; color: var(--lgx-ink-soft); }
.lgx-byline { --lgx-k: 39; margin: 0; font-size: 0.92rem; --lgx-k: 3a; color: var(--lgx-muted); }

/* body copy */
.lgx-prose { --lgx-k: 3b; max-width: 46rem; }
.lgx-prose h2 { --lgx-k: 3c; margin-top: 2.2rem; font-size: clamp(1.35rem, 1vw + 1.1rem, 1.8rem); }
.lgx-prose h3 { --lgx-k: 3d; margin-top: 1.6rem; font-size: 1.15rem; }
.lgx-prose ul, .lgx-prose ol { --lgx-k: 3e; padding-left: 1.3rem; margin: 0 0 1.2em; }
.lgx-prose li { --lgx-k: 3f; margin-bottom: 0.45em; }
.lgx-prose li::marker { --lgx-k: 3g; color: var(--lgx-violet); }
.lgx-ref { --lgx-k: 3h; line-height: 0; font-size: 0.72em; }
.lgx-ref a { --lgx-k: 3i; text-decoration: none; text-align: center; --lgx-k: 3j; min-width: 24px; min-height: 24px; --lgx-k: 3k; margin-left: 2px; line-height: 24px; --lgx-k: 3l; font-weight: 600; display: inline-block; --lgx-k: 3m; border-radius: 6px; background: var(--lgx-violet-soft); }
.lgx-note { --lgx-k: 3n; margin: 1.5rem 0 1.6rem; padding: 1rem 1.2rem; --lgx-k: 3o; box-shadow: 4px 4px 0 var(--lgx-ink); border-radius: var(--lgx-r); --lgx-k: 3p; background: var(--lgx-sun); }
.lgx-note p { --lgx-k: 3q; margin: 0; }
.lgx-grid-wrap { --lgx-k: 3r; margin: 1.4rem 0 1.5rem; overflow-x: auto; --lgx-k: 3s; border: 2px solid var(--lgx-ink); border-radius: var(--lgx-r); --lgx-k: 3t; background: var(--lgx-card); }
table { --lgx-k: 3u; width: 100%; font-size: 0.95rem; --lgx-k: 3v; border-collapse: collapse; }
caption { --lgx-k: 3w; text-align: left; padding: 0.8rem 1rem; --lgx-k: 3x; font-weight: 600; caption-side: top; --lgx-k: 3y; background: var(--lgx-paper-deep); }
th, td { --lgx-k: 3z; vertical-align: top; text-align: left; --lgx-k: 40; border-top: 1px solid var(--lgx-rule); padding: 0.65rem 1rem; }
thead th { --lgx-k: 41; color: #fff; border-top: 0; --lgx-k: 42; background: var(--lgx-ink); }
tbody th { --lgx-k: 43; font-weight: 600; }
.lgx-qa { --lgx-k: 44; margin: 0 0 0.8rem; border: 2px solid var(--lgx-ink); --lgx-k: 45; border-radius: var(--lgx-r); background: var(--lgx-card); }
.lgx-qa summary { --lgx-k: 46; padding: 0.8rem 1rem; min-height: 48px; --lgx-k: 47; margin-left: 1.2rem; list-style-position: outside; --lgx-k: 48; font-weight: 600; cursor: pointer; }
.lgx-qa p { --lgx-k: 49; padding: 0 1.2rem 1rem; margin: 0; }
.lgx-qa[open] summary { --lgx-k: 4a; margin-bottom: 0.8rem; border-bottom: 1px dashed var(--lgx-rule); }

.lgx-toc { --lgx-k: 4b; padding: 1rem 1.2rem; max-width: 46rem; --lgx-k: 4c; margin: 0 0 2rem; border: 2px solid var(--lgx-ink); --lgx-k: 4d; border-radius: var(--lgx-r); background: var(--lgx-card); }
.lgx-toc h2 { --lgx-k: 4e; margin-bottom: 0.5rem; font-size: 1rem; }
.lgx-toc ol { --lgx-k: 4f; padding-left: 1.2rem; margin: 0; --lgx-k: 4g; columns: 2 16rem; }
.lgx-toc a { --lgx-k: 4h; min-height: 24px; display: inline-block; }

.lgx-sources { --lgx-k: 4i; padding-top: 1.4rem; max-width: 46rem; --lgx-k: 4j; margin-top: 2.6rem; font-size: 0.93rem; --lgx-k: 4k; border-top: 2px dashed var(--lgx-rule); }
.lgx-sources h2 { --lgx-k: 4l; font-size: 1.15rem; }
.lgx-sources li { --lgx-k: 4m; margin-bottom: 0.4rem; }
.lgx-src-meta { --lgx-k: 4n; color: var(--lgx-muted); }

.lgx-related { --lgx-k: 4o; margin: 3rem 0 3.5rem; }
.lgx-related h2 { --lgx-k: 4p; font-size: 1.35rem; }
.lgx-cards { --lgx-k: 4q; padding: 0; margin: 0; --lgx-k: 4r; list-style: none; grid-template: auto / repeat(auto-fit, minmax(15rem, 1fr)); --lgx-k: 4s; gap: 1rem; display: grid; }
.lgx-card a { --lgx-k: 4t; transition: transform .12s ease; text-decoration: none; --lgx-k: 4u; padding: 1.1rem 1.2rem; height: 100%; --lgx-k: 4v; gap: 0.35rem; flex-direction: column; --lgx-k: 4w; display: flex; color: var(--lgx-ink); --lgx-k: 4x; box-shadow: 4px 4px 0 var(--lgx-violet); border: 2px solid var(--lgx-ink); --lgx-k: 4y; border-radius: var(--lgx-r); background: var(--lgx-card); }
.lgx-card a:hover { --lgx-k: 4z; transform: translate(-2px, -2px); }
.lgx-card-k { --lgx-k: 50; text-transform: uppercase; letter-spacing: 0.1em; --lgx-k: 51; font-weight: 600; font-size: 0.75rem; --lgx-k: 52; color: var(--lgx-violet-deep); }
.lgx-card-t { --lgx-k: 53; font: 600 1.05rem/1.3 var(--lgx-display); }
.lgx-card-d { --lgx-k: 54; font-size: 0.95rem; color: var(--lgx-ink-soft); }

.lgx-band { --lgx-k: 55; position: relative; margin-top: 2rem; --lgx-k: 56; color: #fff; background: var(--lgx-violet); }
.lgx-band-in { --lgx-k: 57; width: min(72rem, 100% - 2rem); padding: 3rem 0; --lgx-k: 58; margin-inline: auto; justify-items: start; --lgx-k: 59; gap: 1rem; display: grid; }
.lgx-band h2 { --lgx-k: 5a; margin: 0; font-size: clamp(1.5rem, 2vw + 1.1rem, 2.3rem); }
.lgx-band p { --lgx-k: 5b; max-width: 40rem; margin: 0; --lgx-k: 5c; font-size: 1.08rem; }
.lgx-band :focus-visible, .lgx-svc-band :focus-visible, .lgx-ex-band :focus-visible, .lgx-site-foot :focus-visible { --lgx-k: 5d; outline: 3px solid var(--lgx-ring-light); }

/* footer */
.lgx-site-foot { --lgx-k: 5e; color: #f3eee2; background: var(--lgx-ink); }
.lgx-foot-in { --lgx-k: 5f; width: min(76rem, 100% - 2rem); padding: 3rem 0 1.5rem; --lgx-k: 5g; margin-inline: auto; grid-template-columns: minmax(0px, 1.6fr) repeat(4, minmax(0rem, 1fr)); --lgx-k: 5h; gap: 2rem; display: grid; }
.lgx-brand-foot { --lgx-k: 5i; color: #fff; }
.lgx-foot-brand p { --lgx-k: 5j; margin-top: 0.8rem; font-size: 0.95rem; --lgx-k: 5k; color: #d5cfc2; }
.lgx-foot-h { --lgx-k: 5l; text-transform: uppercase; margin: 0 0 0.6rem; --lgx-k: 5m; letter-spacing: 0.12em; font: 600 0.8rem/1.2 var(--lgx-text); --lgx-k: 5n; color: var(--lgx-sun); }
.lgx-foot-col ul { --lgx-k: 5o; padding: 0; margin: 0; --lgx-k: 5p; list-style: none; }
.lgx-foot-col a { --lgx-k: 5q; text-decoration: none; min-height: 32px; --lgx-k: 5r; font-size: 0.95rem; display: inline-flex; --lgx-k: 5s; color: #f3eee2; align-items: center; }
.lgx-foot-col a:hover { --lgx-k: 5t; text-decoration: underline; }
.lgx-foot-note { --lgx-k: 5u; width: min(76rem, 100% - 2rem); padding: 1.2rem 0 2rem; --lgx-k: 5v; margin-inline: auto; font-size: 0.9rem; --lgx-k: 5w; color: #d5cfc2; border-top: 1px solid #45404f; }
.lgx-foot-note strong { --lgx-k: 5x; color: #fff; }
.lgx-foot-small { --lgx-k: 5y; margin: 0; }
@media (width <= 900px) { .lgx-foot-in { --lgx-k: 5z; grid-template-columns: 1fr 1fr; } .lgx-foot-brand { --lgx-k: 60; grid-column: 1 / -1; } }

/* lgx section: home */
.lgx-hero { --lgx-k: 61; position: relative; padding: 2.6rem 0 4.2rem; --lgx-k: 62; overflow: hidden; background: var(--lgx-sun); }
.lgx-hero::after { --lgx-k: 63; right: 0; position: absolute; --lgx-k: 64; left: 0; height: 34px; --lgx-k: 65; content: ""; clip-path: polygon(13% 70%, 21% 35%, 29% 65%, 37% 45%, 46% 72%, 55% 38%, 63% 64%, 72% 42%, 80% 70%, 89% 40%, 95% 62%, 100% 45%, 100% 100%, 0 100%, 0 60%, 6% 40%); --lgx-k: 66; bottom: -1px; background: var(--lgx-paper); }
.lgx-hero-grid { --lgx-k: 67; width: min(76rem, 100% - 2rem); margin-inline: auto; --lgx-k: 68; grid-template-columns: 1.05fr 1fr; gap: 2.4rem; --lgx-k: 69; display: grid; align-items: center; }
.lgx-scribble { --lgx-k: 6a; transform: rotate(-4deg); margin: 0 0 0.6rem; --lgx-k: 6b; font: 400 1.45rem/1.15 var(--lgx-note); display: inline-block; --lgx-k: 6c; color: var(--lgx-violet-deep); }
.lgx-hero h1 { --lgx-k: 6d; margin-bottom: 1.1rem; line-height: 1.02; --lgx-k: 6e; font-size: clamp(2.35rem, 4.6vw + 1.2rem, 4.4rem); }
.lgx-hero h1 .lgx-accent { --lgx-k: 6f; display: block; color: var(--lgx-violet); }
.lgx-hero h1 .lgx-line { --lgx-k: 6g; display: block; }
.lgx-hero-copy { --lgx-k: 6h; max-width: 35rem; font-size: 1.12rem; --lgx-k: 6i; color: var(--lgx-ink); }
.lgx-hero-actions { --lgx-k: 6j; margin: 1.4rem 0 1.6rem; gap: 0.8rem; --lgx-k: 6k; flex-wrap: wrap; display: flex; }
.lgx-hero-points { --lgx-k: 6l; padding: 0; margin: 0; --lgx-k: 6m; list-style: none; grid-template-columns: repeat(4, minmax(0rem, 1fr)); --lgx-k: 6n; gap: 0.8rem; font-weight: 600; --lgx-k: 6o; font-size: 0.85rem; display: grid; }
.lgx-hero-points li { --lgx-k: 6p; gap: 0.5rem; display: flex; --lgx-k: 6q; align-items: center; }
.lgx-hero-points svg { --lgx-k: 6r; width: 30px; height: 30px; --lgx-k: 6s; flex: 0 0 30px; }

.lgx-playground { --lgx-k: 6t; position: relative; padding: 1rem; --lgx-k: 6u; box-shadow: 8px 8px 0 var(--lgx-ink); border: 2px solid var(--lgx-ink); --lgx-k: 6v; border-radius: 22px; background: var(--lgx-card); }
.lgx-pills { --lgx-k: 6w; padding: 0.4rem; margin-bottom: 0.9rem; --lgx-k: 6x; gap: 0.4rem; flex-wrap: wrap; --lgx-k: 6y; display: flex; border: 1px solid var(--lgx-rule); --lgx-k: 6z; border-radius: 18px; background: var(--lgx-paper); }
.lgx-pill { --lgx-k: 70; padding: 0.3rem 0.85rem; min-width: 44px; --lgx-k: 71; min-height: 44px; font: 600 0.88rem var(--lgx-text); --lgx-k: 72; cursor: pointer; color: var(--lgx-ink); --lgx-k: 73; border: 1px solid var(--lgx-rule); border-radius: 999px; --lgx-k: 74; background: #fff; }
.lgx-pill[aria-pressed="true"] { --lgx-k: 75; color: white; border-color: var(--lgx-violet); --lgx-k: 76; background: var(--lgx-violet); }
.lgx-duo { --lgx-k: 77; overflow: hidden; grid-template-columns: 1fr 1fr; --lgx-k: 78; display: grid; border: 2px solid var(--lgx-ink); --lgx-k: 79; border-radius: 14px; }
.lgx-pane { --lgx-k: 7a; padding: 0.9rem; min-height: 15rem; --lgx-k: 7b; gap: 0.5rem; flex-direction: column; --lgx-k: 7c; display: flex; background: #fff; }
.lgx-pane + .lgx-pane { --lgx-k: 7d; border-left: 2px dashed var(--lgx-ink); background: #fffaf0; }
.lgx-pane-nav { --lgx-k: 7e; padding-bottom: 0.4rem; gap: 0.6rem; --lgx-k: 7f; font-size: 0.72rem; flex-wrap: wrap; --lgx-k: 7g; display: flex; color: var(--lgx-muted); --lgx-k: 7h; border-bottom: 1px solid var(--lgx-rule); }
.lgx-pane-title { --lgx-k: 7i; overflow-wrap: anywhere; margin: 0.3rem 0 0; --lgx-k: 7j; font: 800 1.35rem/1.08 var(--lgx-display); }
.lgx-pane-title .lgx-hl { --lgx-k: 7k; color: #c4421f; }
.lgx-pane p { --lgx-k: 7l; margin: 0; font-size: 0.82rem; --lgx-k: 7m; color: var(--lgx-ink-soft); }
.lgx-pane-btn { --lgx-k: 7n; padding: 0.35rem 0.7rem; font-weight: 600; --lgx-k: 7o; font-size: 0.75rem; color: #fff; --lgx-k: 7p; border-radius: 6px; background: var(--lgx-violet); --lgx-k: 7q; align-self: flex-start; }
.lgx-pane-art { --lgx-k: 7r; position: relative; overflow: hidden; --lgx-k: 7s; margin-top: auto; height: 64px; --lgx-k: 7t; border-radius: 10px; background: linear-gradient(135deg, var(--lgx-mint), var(--lgx-sky)); }
.lgx-pane-art::before { --lgx-k: 7u; width: 46%; position: absolute; --lgx-k: 7v; left: 12%; height: 70%; --lgx-k: 7w; content: ""; clip-path: polygon(100% 40%, 100% 100%, 0 100%, 0 40%, 50% 0); --lgx-k: 7x; bottom: 0; background: var(--lgx-sun-deep); }
.lgx-pane-art::after { --lgx-k: 7y; width: 26%; right: 10%; --lgx-k: 7z; position: absolute; height: 52%; --lgx-k: 80; content: ""; bottom: 0; --lgx-k: 81; border-radius: 50% 50% 0 0; background: var(--lgx-coral); }
.lgx-pg-tag { --lgx-k: 82; top: -14px; text-transform: uppercase; --lgx-k: 83; right: 18px; position: absolute; --lgx-k: 84; padding: 0.25rem 0.6rem; letter-spacing: 0.06em; --lgx-k: 85; font-weight: 600; font-size: 0.72rem; --lgx-k: 86; color: #fff; border-radius: 6px; --lgx-k: 87; background: var(--lgx-ink); }
.lgx-pg-note { --lgx-k: 88; margin: 0.8rem 0 0; font: 400 1.15rem/1.12 var(--lgx-note); --lgx-k: 89; color: var(--lgx-violet-deep); }

.lgx-why { --lgx-k: 8a; padding: 4rem 0 3rem; }
.lgx-why-grid { --lgx-k: 8b; grid-template-columns: 0.9fr 1.2fr 0.8fr; gap: 2rem; --lgx-k: 8c; display: grid; align-items: center; }
.lgx-why h2 { --lgx-k: 8d; font-size: clamp(1.9rem, 2.6vw + 1.2rem, 3rem); }
.lgx-collage { --lgx-k: 8e; position: relative; min-height: 20rem; }
.lgx-collage svg { --lgx-k: 8f; width: 100%; height: auto; }
.lgx-hello { --lgx-k: 8g; position: absolute; padding: 0.55rem 0.85rem; --lgx-k: 8h; font: 600 1.05rem/1 var(--lgx-display); box-shadow: 3px 3px 0 var(--lgx-ink); --lgx-k: 8i; border: 2px solid var(--lgx-ink); border-radius: 10px; }
.lgx-hello.lgx-t1 { --lgx-k: 8j; transform: rotate(-6deg); top: 52%; --lgx-k: 8k; left: 4%; color: #fff; --lgx-k: 8l; background: var(--lgx-violet); }
.lgx-hello.lgx-t2 { --lgx-k: 8m; transform: rotate(4deg); top: 8%; --lgx-k: 8n; left: 30%; background: var(--lgx-sun); }
.lgx-hello.lgx-t3 { --lgx-k: 8o; transform: rotate(-3deg); top: 30%; --lgx-k: 8p; right: 22%; background: var(--lgx-coral); }
.lgx-hello.lgx-t4 { --lgx-k: 8q; transform: rotate(5deg); top: 58%; --lgx-k: 8r; left: 40%; background: var(--lgx-mint); }
.lgx-hello.lgx-t5 { --lgx-k: 8s; transform: rotate(-5deg); top: 64%; --lgx-k: 8t; right: 2%; background: var(--lgx-sky); }
.lgx-hello.lgx-t6 { --lgx-k: 8u; transform: rotate(3deg); top: 4%; --lgx-k: 8v; right: 8%; font-family: var(--lgx-text); --lgx-k: 8w; background: #fff; }
.lgx-checks { --lgx-k: 8x; transform: rotate(1.5deg); padding: 1.1rem 1.2rem; --lgx-k: 8y; box-shadow: 5px 5px 0 var(--lgx-sun-deep); border: 2px solid var(--lgx-ink); --lgx-k: 8z; border-radius: var(--lgx-r); background: var(--lgx-card); }
.lgx-checks h3 { --lgx-k: 90; margin-bottom: 0.6rem; font-size: 1rem; }
.lgx-checks ul { --lgx-k: 91; padding: 0; margin: 0; --lgx-k: 92; list-style: none; font-size: 0.93rem; }
.lgx-checks li { --lgx-k: 93; padding: 0.3rem 0; gap: 0.55rem; --lgx-k: 94; display: flex; border-bottom: 1px dashed var(--lgx-rule); --lgx-k: 95; align-items: flex-start; }
.lgx-checks li::before { --lgx-k: 96; place-items: center; height: 22px; --lgx-k: 97; font-weight: 600; font-size: 0.8rem; --lgx-k: 98; flex: 0 0 22px; display: grid; --lgx-k: 99; content: "\2713"; border: 2px solid var(--lgx-ink); --lgx-k: 9a; border-radius: 4px; }

.lgx-svc-band { --lgx-k: 9b; position: relative; padding: 4rem 0; --lgx-k: 9c; color: #fff; background: var(--lgx-violet); }
.lgx-svc-band::before { --lgx-k: 9d; top: -1px; right: 0; --lgx-k: 9e; position: absolute; left: 0; --lgx-k: 9f; height: 28px; content: ""; --lgx-k: 9g; clip-path: polygon(100% 30%, 92% 70%, 83% 35%, 74% 60%, 64% 30%, 52% 70%, 41% 35%, 30% 62%, 19% 32%, 9% 66%, 0 40%, 0 0, 100% 0); background: var(--lgx-paper); }
.lgx-svc-grid { --lgx-k: 9h; grid-template-columns: 0.9fr 2fr; gap: 2.4rem; --lgx-k: 9i; display: grid; align-items: start; }
.lgx-svc-band h2 { --lgx-k: 9j; font-size: clamp(1.8rem, 2.2vw + 1.2rem, 2.8rem); }
.lgx-svc-band h2 .lgx-sun { --lgx-k: 9k; color: var(--lgx-sun); }
.lgx-svc-list { --lgx-k: 9l; padding: 0; margin: 0; --lgx-k: 9m; list-style: none; grid-template-columns: repeat(4, minmax(0rem, 1fr)); --lgx-k: 9n; gap: 1rem; display: grid; }
.lgx-svc-list a { --lgx-k: 9o; text-decoration: none; padding: 1rem; --lgx-k: 9p; height: 100%; gap: 0.45rem; --lgx-k: 9q; flex-direction: column; display: flex; --lgx-k: 9r; color: #fff; border: 1px solid rgba(255,255,255,0.45); --lgx-k: 9s; border-radius: var(--lgx-r); background: rgba(255,255,255,0.06); }
.lgx-svc-list a:hover { --lgx-k: 9t; background: rgba(255,255,255,0.14); }
.lgx-svc-ico { --lgx-k: 9u; width: 44px; place-items: center; --lgx-k: 9v; height: 44px; display: grid; --lgx-k: 9w; border-radius: 50%; background: #fff; }
.lgx-svc-ico svg { --lgx-k: 9x; width: 26px; height: 26px; }
.lgx-svc-name { --lgx-k: 9y; font: 600 1rem/1.25 var(--lgx-display); }
.lgx-svc-text { --lgx-k: 9z; font-size: 0.9rem; color: #efeaff; }

.lgx-steps-sec { --lgx-k: a0; padding: 4rem 0; }
.lgx-steps-grid { --lgx-k: a1; grid-template-columns: 0.9fr 2.2fr; gap: 2rem; --lgx-k: a2; display: grid; align-items: start; }
.lgx-steps { --lgx-k: a3; padding: 0; margin: 0; --lgx-k: a4; list-style: none; grid-template-columns: repeat(3, minmax(0rem, 1fr)); --lgx-k: a5; gap: 1.2rem; display: grid; --lgx-k: a6; counter-reset: step; }
.lgx-steps li { --lgx-k: a7; padding-left: 1rem; border-left: 2px dashed var(--lgx-rule); }
.lgx-step-n { --lgx-k: a8; width: 52px; place-items: center; --lgx-k: a9; margin-bottom: 0.7rem; height: 52px; --lgx-k: aa; font: 800 1.1rem var(--lgx-display); display: inline-grid; --lgx-k: ab; border: 2px solid var(--lgx-ink); border-radius: 50%; }
.lgx-steps li:nth-child(1) .lgx-step-n { --lgx-k: ac; background: var(--lgx-sun); }
.lgx-steps li:nth-child(2) .lgx-step-n { --lgx-k: ad; background: var(--lgx-violet-soft); }
.lgx-steps li:nth-child(3) .lgx-step-n { --lgx-k: ae; background: var(--lgx-mint); }
.lgx-steps li:nth-child(4) .lgx-step-n { --lgx-k: af; background: var(--lgx-coral); }
.lgx-steps li:nth-child(5) .lgx-step-n { --lgx-k: ag; background: var(--lgx-sky); }
.lgx-steps li:nth-child(6) .lgx-step-n { --lgx-k: ah; background: var(--lgx-sun); }
.lgx-steps h3 { --lgx-k: ai; margin-bottom: 0.35rem; font-size: 1.02rem; }
.lgx-steps p { --lgx-k: aj; margin: 0; font-size: 0.93rem; --lgx-k: ak; color: var(--lgx-ink-soft); }

.lgx-ex-band { --lgx-k: al; padding: 4rem 0; color: #f6f1e5; --lgx-k: am; background: var(--lgx-ink); }
.lgx-ex-grid { --lgx-k: an; grid-template-columns: 0.8fr 2.2fr; gap: 2rem; --lgx-k: ao; display: grid; align-items: center; }
.lgx-ex-band h2 { --lgx-k: ap; font-size: clamp(1.8rem, 2.2vw + 1.2rem, 2.7rem); color: #fff; }
.lgx-ex-band p { --lgx-k: aq; color: #ddd6c8; }
.lgx-ex-cards { --lgx-k: ar; padding: 0; margin: 0; --lgx-k: as; list-style: none; grid-template-columns: repeat(3, minmax(0rem, 1fr)); --lgx-k: at; gap: 1.1rem; display: grid; }
.lgx-ex-card { --lgx-k: au; position: relative; padding: 0.8rem; --lgx-k: av; color: var(--lgx-ink); border: 2px solid #fff; --lgx-k: aw; border-radius: 14px; background: #fff; }
.lgx-ex-tag { --lgx-k: ax; top: -12px; position: absolute; --lgx-k: ay; padding: 0.2rem 0.6rem; left: 12px; --lgx-k: az; font-weight: 600; font-size: 0.75rem; --lgx-k: b0; color: var(--lgx-ink); border: 2px solid var(--lgx-ink); --lgx-k: b1; border-radius: 6px; background: var(--lgx-sun); }
.lgx-ex-screen { --lgx-k: b2; padding: 0.7rem; margin-top: 0.6rem; --lgx-k: b3; border: 1px dashed var(--lgx-rule); border-radius: 7px; --lgx-k: b4; background: var(--lgx-paper); }
.lgx-ex-screen .lgx-pane-title { --lgx-k: b5; font-size: 1.05rem; }
.lgx-ex-screen .lgx-pane-art { --lgx-k: b6; margin-top: 0.6rem; height: 46px; }
.lgx-ex-card .lgx-ex-cap { --lgx-k: b7; margin: 0.6rem 0 0; font-size: 0.8rem; --lgx-k: b8; color: var(--lgx-muted); }

.lgx-home-faq { --lgx-k: b9; padding: 4rem 0 2rem; }
.lgx-home-faq-grid { --lgx-k: ba; grid-template: auto / 1fr 1.6fr; gap: 2rem; --lgx-k: bb; display: grid; }
.lgx-home-faq h2 { --lgx-k: bc; font-size: clamp(1.7rem, 2vw + 1.2rem, 2.4rem); }

.lgx-cta-end { --lgx-k: bd; position: relative; padding: 3.5rem 0 4.5rem; }
.lgx-cta-box { --lgx-k: be; grid-template-columns: 1.6fr 1fr; gap: 2rem; --lgx-k: bf; display: grid; align-items: center; }
.lgx-cta-box h2 { --lgx-k: bg; font-size: clamp(1.8rem, 2.4vw + 1.2rem, 2.8rem); }
.lgx-cta-notes { --lgx-k: bh; justify-content: center; gap: 0.8rem; --lgx-k: bi; flex-wrap: wrap; display: flex; }
.lgx-sticky { --lgx-k: bj; transform: rotate(-4deg); padding: 0.9rem 1rem; --lgx-k: bk; max-width: 10rem; font: 400 1.25rem/1.1 var(--lgx-note); --lgx-k: bl; box-shadow: 3px 4px 0 rgba(22,19,31,0.25); border-radius: 4px; --lgx-k: bm; background: var(--lgx-sun); }
.lgx-sticky:nth-child(2) { --lgx-k: bn; transform: rotate(3deg); background: #fff; }
.lgx-sticky:nth-child(3) { --lgx-k: bo; transform: rotate(-2deg); background: var(--lgx-mint); }

@media (width <= 1000px) {
  .lgx-hero-grid, .lgx-why-grid, .lgx-svc-grid, .lgx-steps-grid, .lgx-ex-grid, .lgx-home-faq-grid, .lgx-cta-box { --lgx-k: bp; grid-template-columns: 1fr; }
  .lgx-svc-list { --lgx-k: bq; grid-template-columns: repeat(2, minmax(0rem, 1fr)); }
  .lgx-steps { --lgx-k: br; grid-template: auto / repeat(2, minmax(9rem, 1fr)); }
  .lgx-ex-cards { --lgx-k: bs; max-width: 28rem; grid-template-columns: 1fr; }
  .lgx-collage { --lgx-k: bt; min-height: 16rem; }
}
@media (width <= 560px) {
  .lgx-hero-points { --lgx-k: bu; grid-template-columns: repeat(2, minmax(0rem, 1fr)); }
  .lgx-duo { --lgx-k: bv; grid-template-columns: 1fr; }
  .lgx-pane + .lgx-pane { --lgx-k: bw; border-top: 2px dashed var(--lgx-ink); border-left: 0; }
  .lgx-svc-list, .lgx-steps { --lgx-k: bx; grid-template-columns: 1fr; }
  .lgx-brand-word small { --lgx-k: by; display: none; }
}

/* lgx section: tools */
.lgx-tool { --lgx-k: bz; padding: 1.3rem; max-width: 52rem; --lgx-k: c0; margin: 1.6rem 0 2rem; box-shadow: 6px 6px 0 var(--lgx-violet); --lgx-k: c1; border: 2px solid var(--lgx-ink); border-radius: 18px; --lgx-k: c2; background: var(--lgx-card); }
.lgx-tool h2 { --lgx-k: c3; margin-top: 0; font-size: 1.3rem; }
.lgx-tool fieldset { --lgx-k: c4; padding: 0.9rem 1rem 1rem; margin: 0 0 1rem; --lgx-k: c5; border: 1px solid var(--lgx-rule); border-radius: var(--lgx-r); }
.lgx-tool legend { --lgx-k: c6; padding: 0 0.4rem; font-weight: 600; }
.lgx-field { --lgx-k: c7; margin-bottom: 0.9rem; gap: 0.3rem; --lgx-k: c8; display: grid; }
.lgx-field label, .lgx-lbl { --lgx-k: c9; font-weight: 600; font-size: 0.95rem; }
.lgx-hint { --lgx-k: ca; margin: 0; font-size: 0.85rem; --lgx-k: cb; color: var(--lgx-muted); }
select, textarea, input:is([type=text], [type=url], [type=email], [type=number]) { --lgx-k: cc; width: 100%; padding: 0.6rem 0.75rem; --lgx-k: cd; min-height: 46px; font: 400 1rem/1.4 var(--lgx-text); --lgx-k: ce; color: var(--lgx-ink); border: 2px solid var(--lgx-ink-soft); --lgx-k: cf; border-radius: 10px; background: #fff; }
textarea { --lgx-k: cg; resize: vertical; min-height: 9rem; }
textarea:focus-visible, select:focus-visible, input:focus-visible { --lgx-k: ch; border-color: var(--lgx-violet); }
.lgx-tick { --lgx-k: ci; padding: 0.35rem 0; gap: 0.6rem; --lgx-k: cj; display: flex; align-items: flex-start; }
.lgx-tick input { --lgx-k: ck; width: 24px; margin: 0.15rem 0 0; --lgx-k: cl; height: 24px; flex: 0 0 24px; --lgx-k: cm; accent-color: var(--lgx-violet); }
.lgx-row-actions { --lgx-k: cn; margin-top: 0.6rem; gap: 0.7rem; --lgx-k: co; flex-wrap: wrap; display: flex; }
.lgx-btn-small { --lgx-k: cp; padding: 0.5rem 1rem; min-height: 44px; --lgx-k: cq; font-size: 0.95rem; }
.lgx-versions { --lgx-k: cr; gap: 0.7rem; display: grid; }
.lgx-version { --lgx-k: cs; padding-bottom: 0.7rem; grid-template-columns: 1fr 1fr 2fr auto; --lgx-k: ct; gap: 0.6rem; display: grid; --lgx-k: cu; border-bottom: 1px dashed var(--lgx-rule); align-items: end; }
.lgx-version .lgx-field { --lgx-k: cv; margin: 0; }
.lgx-out { --lgx-k: cw; white-space: pre-wrap; padding: 1rem; --lgx-k: cx; overflow-wrap: anywhere; min-height: 4rem; --lgx-k: cy; font: 0.88rem/1.5 'Cascadia Mono', 'DejaVu Sans Mono', monospace; color: #f4efe3; --lgx-k: cz; border-radius: 12px; background: var(--lgx-ink); }
.lgx-msgs { --lgx-k: d0; padding: 0; margin: 0.8rem 0; --lgx-k: d1; list-style: none; }
.lgx-msgs li { --lgx-k: d2; padding: 0.5rem 0.75rem; margin-bottom: 0.4rem; --lgx-k: d3; font-size: 0.93rem; border-radius: 8px; }
.lgx-msgs .lgx-warn { --lgx-k: d4; border-left: 5px solid var(--lgx-sun-deep); background: #fff0c2; }
.lgx-msgs .lgx-stop { --lgx-k: d5; border-left: 5px solid #b3341a; background: #ffe0da; }
.lgx-msgs .lgx-fine { --lgx-k: d6; border-left: 5px solid #1d7a4a; background: #e4f7ec; }
.lgx-meter { --lgx-k: d7; overflow: hidden; height: 14px; --lgx-k: d8; border: 2px solid var(--lgx-ink); border-radius: 999px; --lgx-k: d9; background: #fff; }
.lgx-meter span { --lgx-k: da; width: 0; height: 100%; --lgx-k: db; display: block; background: var(--lgx-violet); }
.lgx-demo-grid { --lgx-k: dc; margin-top: 1rem; grid-template: auto / repeat(auto-fit, minmax(14rem, 1fr)); --lgx-k: dd; gap: 0.8rem; display: grid; }
.lgx-demo-cell { --lgx-k: de; padding: 0.8rem; border: 2px solid var(--lgx-ink); --lgx-k: df; border-radius: 12px; background: white; }
.lgx-demo-cell .lgx-k { --lgx-k: dg; text-transform: uppercase; margin: 0 0 0.3rem; --lgx-k: dh; letter-spacing: 0.08em; font-size: 0.78rem; --lgx-k: di; color: var(--lgx-muted); }
.lgx-demo-cell .lgx-v { --lgx-k: dj; overflow-wrap: anywhere; margin: 0; --lgx-k: dk; font-weight: 600; font-size: 1.15rem; }
.lgx-demo-cell .lgx-n { --lgx-k: dl; margin: 0.3rem 0 0; font-size: 0.8rem; --lgx-k: dm; color: var(--lgx-muted); }
.lgx-sample-flag { --lgx-k: dn; padding: 0.1rem 0.5rem; font-weight: 600; --lgx-k: do; font-size: 0.8rem; display: inline-block; --lgx-k: dp; border: 1px solid var(--lgx-ink); border-radius: 6px; --lgx-k: dq; background: var(--lgx-sun); }
.lgx-no-js-note { --lgx-k: dr; padding: 0.8rem 1rem; border-radius: 10px; --lgx-k: ds; background: var(--lgx-paper-deep); }
.js .lgx-no-js-note { --lgx-k: dt; display: none; }

/* lgx section: contact desk */
.lgx-desk { --lgx-k: du; max-width: 40rem; }
.lgx-desk-msg { --lgx-k: dv; margin: 0 0 1.4rem; padding: 1rem 1.2rem; --lgx-k: dw; border: 2px solid var(--lgx-ink); border-radius: 12px; }
.lgx-desk-msg.lgx-ok { --lgx-k: dx; background: #e4f7ec; }
.lgx-desk-msg.lgx-bad { --lgx-k: dy; background: #ffe8e2; }

.lgx-trap { --lgx-k: dz; width: 1px; position: absolute; --lgx-k: e0; overflow: hidden; left: -9999px; --lgx-k: e1; height: 1px; }
.lgx-mailbox { --lgx-k: e2; font-weight: 600; font-size: 1.15rem; }

@media print {
  .lgx-masthead, .lgx-site-foot, .lgx-band, .lgx-related, .lgx-skip { --lgx-k: e3; display: none; }
  body { --lgx-k: e4; background: #fff; }
}
/* lgx: motion preferences */
@media (prefers-reduced-motion: reduce) {
  /* lgx: the only motion on the site is the card lift; switch it off */
  .lgx-card a, .lgx-card a:hover { --lgx-k: e5; transition-duration: 0s; transform: none; }
  html { --lgx-k: e6; scroll-behavior: auto; }
}
.no-js .lgx-pills { --lgx-k: e7; display: none; }
.lgx-kicker-light { --lgx-k: e8; color: var(--lgx-sun); }
.lgx-out code { --lgx-k: e9; padding: 0; font-size: 1em; --lgx-k: ea; color: inherit; background: transparent; }
.lgx-ex-band .lgx-ex-screen p, .lgx-ex-band .lgx-ex-screen .lgx-pane-title { --lgx-k: eb; color: var(--lgx-ink); }
@media (width <= 700px) {
  .lgx-version { --lgx-k: ec; grid-template-columns: 1fr 1fr; }
  .lgx-version .lgx-field:nth-child(3) { --lgx-k: ed; grid-column: 1 / -1; }
  .lgx-version .lgx-v-drop { --lgx-k: ee; justify-self: start; grid-column: 1 / -1; }
}
.lgx-version .lgx-field input { --lgx-k: ef; min-width: 0; }

/* lgx: the Arabic pill sits at the right-hand end of its row */
.lgx-pill[lang="ar"] { --lgx-k: eg; margin-left: auto; }

/* lgx structural hooks: page kinds, lists, footer columns, tables and source lists */
.lgx-k-home, .lgx-k-guide, .lgx-k-service, .lgx-k-tool, .lgx-k-hub, .lgx-k-legal, .lgx-k-page, .lgx-k-contact, .lgx-k-missing { --lgx-k: eh; min-height: 100vh; }
.lgx-ul, .lgx-ol, .lgx-sl, .lgx-tl, .lgx-fl { --lgx-k: ei; overflow-wrap: break-word; }
.lgx-li, .lgx-si, .lgx-ti, .lgx-fi, .lgx-ci, .lgx-ni { --lgx-k: ej; overflow-wrap: anywhere; }
.lgx-c { --lgx-k: ek; white-space: break-spaces; }
.lgx-thead, .lgx-hc, .lgx-rc { --lgx-k: el; vertical-align: bottom; }
.lgx-h1 { --lgx-k: em; text-wrap: balance; }
.lgx-kick, .lgx-fh { --lgx-k: en; hyphens: none; }
.lgx-qs { --lgx-k: eo; text-wrap: pretty; }
.lgx-fc, .lgx-foot, .lgx-menu, .lgx-desk-form { --lgx-k: ep; min-width: 0; }
.lgx-mb, .lgx-cta { --lgx-k: eq; flex-shrink: 0; }
.lgx-i { --lgx-k: er; overflow: visible; }
.lgx-src { --lgx-k: es; overflow-wrap: anywhere; }
.lgx-field-err { --lgx-k: et; color: #8e2614; }
.lgx-desk-msg.lgx-info { --lgx-k: eu; background: var(--lgx-violet-soft); }
.lgx-miss-alt { --lgx-k: ev; color: var(--lgx-ink-soft); }
.lgx-pane-body { --lgx-k: ew; overflow-wrap: anywhere; }
.lgx-lc-group { --lgx-k: ex; min-inline-size: 0; }
.lgx-opt { --lgx-k: ey; font-weight: 400; color: var(--lgx-muted); }
/* lgx: from 1024 pixels the six language pills share one row */
@media (width >= 1024px) { .lgx-pills { --lgx-k: eh; gap: 0.25rem; padding: 0.25rem; } .lgx-pill { --lgx-k: ei; padding: 0.25rem 0.45rem; font-size: 0.8rem; } }