@collectivetrait/lineaui 0.0.0-stage → 1.0.0

package/dist/core.css

@@ -0,0 +1,1641 @@
+@layer external, reset, tokens, base, layout, blocks, helpers, utilities;
+@layer tokens {
+  :root {
+    color-scheme: light dark;
+    --canvas: light-dark(#FAFAFA, #09090B);
+    --surface: light-dark(#FFFFFF, #18181B);
+    --surface-raised: light-dark(#F4F4F5, #2C2C31);
+    --surface-sunken: light-dark(#F4F4F5, #040405);
+    --surface-inverse: light-dark(#18181B, #FAFAFA);
+    --overlay: light-dark(rgba(24,24,27,0.4), rgba(0,0,0,0.6));
+    --text: light-dark(#09090B, #FAFAFA);
+    --c-muted: light-dark(#52525B, #A1A1AA);
+    --c-subtle: light-dark(#71717A, #828289);
+    --c-disabled: light-dark(#A1A1AA, #3F3F46);
+    --c-inverse: light-dark(#FAFAFA, #09090B);
+    --border: light-dark(#E4E4E7, #3F3F46);
+    --border-control: light-dark(#E4E4E7, #3F3F46);
+    --border-strong: light-dark(#52525B, #71717A);
+    --primary: light-dark(#7C3AED, #8B5CF6);
+    --primary-text: light-dark(#7C3AED, #8B5CF6);
+    --on-primary: #FFFFFF;
+    --primary-subtle: color-mix(in srgb, var(--primary) 16%, var(--canvas));
+    --primary-hover: color-mix(in srgb, var(--primary) 88%, var(--canvas));
+    --primary-border: color-mix(in srgb, var(--primary) 40%, var(--canvas));
+    --secondary: #0D9488;
+    --secondary-text: light-dark(#115E59, #2DD4BF);
+    --on-secondary: #FFFFFF;
+    --secondary-subtle: color-mix(in srgb, var(--secondary) 12%, var(--canvas));
+    --secondary-hover: color-mix(in srgb, var(--secondary) 88%, var(--canvas));
+    --secondary-border: color-mix(in srgb, var(--secondary) 40%, var(--canvas));
+    --success: #16A34A;
+    --success-text: light-dark(#15803D, #4ADE80);
+    --on-success: #FFFFFF;
+    --success-subtle: color-mix(in srgb, var(--success) 12%, var(--canvas));
+    --success-hover: color-mix(in srgb, var(--success) 88%, var(--canvas));
+    --success-border: color-mix(in srgb, var(--success) 40%, var(--canvas));
+    --warning: light-dark(#D97706, #FBBF24);
+    --warning-text: light-dark(#92400E, #FBBF24);
+    --on-warning: #FFFFFF;
+    --warning-subtle: color-mix(in srgb, var(--warning) 12%, var(--canvas));
+    --warning-hover: color-mix(in srgb, var(--warning) 88%, var(--canvas));
+    --warning-border: color-mix(in srgb, var(--warning) 40%, var(--canvas));
+    --danger: #DC2626;
+    --danger-text: light-dark(#DC2626, #F87171);
+    --on-danger: #FFFFFF;
+    --danger-subtle: color-mix(in srgb, var(--danger) 12%, var(--canvas));
+    --danger-hover: color-mix(in srgb, var(--danger) 88%, var(--canvas));
+    --danger-border: color-mix(in srgb, var(--danger) 40%, var(--canvas));
+    --info: #2563EB;
+    --info-text: light-dark(#2563EB, #60A5FA);
+    --on-info: #FFFFFF;
+    --info-subtle: color-mix(in srgb, var(--info) 12%, var(--canvas));
+    --info-hover: color-mix(in srgb, var(--info) 88%, var(--canvas));
+    --info-border: color-mix(in srgb, var(--info) 40%, var(--canvas));
+    --neutral: var(--surface-raised);
+    --neutral-text: var(--text);
+    --on-neutral: var(--text);
+    --neutral-subtle: var(--surface-sunken);
+    --neutral-border: light-dark(#E4E4E7, #3F3F46);
+    --link: var(--primary-text);
+    --link-hover: color-mix(in srgb, var(--primary-text) 80%, var(--canvas));
+    --focus: var(--primary);
+    --selection: color-mix(in srgb, var(--primary) 30%, transparent);
+  }
+  [data-theme=light] {
+    color-scheme: light;
+  }
+  [data-theme=dark] {
+    color-scheme: dark;
+  }
+}
+@layer tokens {
+  :root {
+    --f-prose: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
+    --f-ui: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
+    --f-mono: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
+    --t-display-1-s: 5rem;
+    --t-display-1-lh: 6rem;
+    --t-display-2-s: 3.5rem;
+    --t-display-2-lh: 4.5rem;
+    --t-h1-s: 2.5rem;
+    --t-h1-lh: 3rem;
+    --t-h2-s: 2rem;
+    --t-h2-lh: 3rem;
+    --t-h3-s: 1.25rem;
+    --t-h3-lh: 1.5rem;
+    --t-h4-s: 1.125rem;
+    --t-h4-lh: 1.5rem;
+    --t-h5-s: 1rem;
+    --t-h5-lh: 1.5rem;
+    --t-h6-s: 0.75rem;
+    --t-h6-lh: 1rem;
+    --t-lead-s: 1.125rem;
+    --t-lead-lh: 1.5rem;
+    --t-body-prose-s: 1rem;
+    --t-body-prose-lh: 1.5rem;
+    --t-body-lg-s: 1.125rem;
+    --t-body-lg-lh: 1.5rem;
+    --t-body-s: 1rem;
+    --t-body-lh: 1.5rem;
+    --t-body-sm-s: 0.875rem;
+    --t-body-sm-lh: 1.5rem;
+    --t-body-xs-s: 0.75rem;
+    --t-body-xs-lh: 1rem;
+    --t-meta-s: 0.75rem;
+    --t-meta-lh: 1rem;
+    --t-code-s: 0.875rem;
+    --t-code-lh: 1.5rem;
+  }
+}
+@layer tokens {
+  :root {
+    --s-h: 0.25rem;
+    --s1: 0.5rem;
+    --s2: 1rem;
+    --s3: 1.5rem;
+    --s4: 2rem;
+  }
+}
+@layer tokens {
+  :root {
+    --sh0: none;
+    --sh1: 0 0 2px rgb(9 9 11 / 0.05);
+    --sh2: 0 0 12px rgb(9 9 11 / 0.07);
+    --sh3: 0 0 24px rgb(9 9 11 / 0.09);
+    --sh4: 0 0 48px rgb(9 9 11 / 0.12);
+    --sh-inset-1: inset 0 0 2px rgb(0 0 0 / 0.05);
+    --sh-inset-2: inset 0 0 4px rgb(0 0 0 / 0.08);
+    --sh-inset-3: inset 0 0 8px rgb(0 0 0 / 0.12);
+    --sh-inset-4: inset 0 0 16px rgb(0 0 0 / 0.16);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme=light]) {
+      --sh1: 0 0 2px rgb(0 0 0 / 0.40);
+      --sh2: 0 0 12px rgb(0 0 0 / 0.44);
+      --sh3: 0 0 24px rgb(0 0 0 / 0.48);
+      --sh4: 0 0 48px rgb(0 0 0 / 0.56);
+      --sh-inset-1: inset 0 0 2px rgb(0 0 0 / 0.16);
+      --sh-inset-2: inset 0 0 4px rgb(0 0 0 / 0.22);
+      --sh-inset-3: inset 0 0 8px rgb(0 0 0 / 0.28);
+      --sh-inset-4: inset 0 0 16px rgb(0 0 0 / 0.36);
+    }
+  }
+  [data-theme=dark] {
+    --sh1: 0 0 2px rgb(0 0 0 / 0.40);
+    --sh2: 0 0 12px rgb(0 0 0 / 0.44);
+    --sh3: 0 0 24px rgb(0 0 0 / 0.48);
+    --sh4: 0 0 48px rgb(0 0 0 / 0.56);
+    --sh-inset-1: inset 0 0 2px rgb(0 0 0 / 0.16);
+    --sh-inset-2: inset 0 0 4px rgb(0 0 0 / 0.22);
+    --sh-inset-3: inset 0 0 8px rgb(0 0 0 / 0.28);
+    --sh-inset-4: inset 0 0 16px rgb(0 0 0 / 0.36);
+  }
+}
+@layer tokens {
+  :root {
+    --bd1: 1px;
+    --bd2: 2px;
+    --bd3: 3px;
+    --r-none: 0;
+    --r-xs: 2px;
+    --r-sm: 4px;
+    --r-md: 8px;
+    --r-lg: 12px;
+    --r-xl: 16px;
+    --r-pill: 9999px;
+    --r-circle: 50%;
+  }
+}
+@layer tokens {
+  :root {
+    --dur-fast: 120ms;
+    --dur-base: 200ms;
+    --dur-slow: 320ms;
+    --e-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --e-enter: cubic-bezier(0, 0, 0.2, 1);
+    --e-exit: cubic-bezier(0.4, 0, 1, 1);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --dur-fast: 1ms;
+      --dur-base: 1ms;
+      --dur-slow: 1ms;
+    }
+  }
+}
+@layer tokens {
+  :root {
+    --container: 56.25rem;
+    --container-wide: 75rem;
+    --measure: 37.5rem;
+    --gutter: 1rem;
+  }
+  @media (min-width: 768px) {
+    :root {
+      --gutter: 2rem;
+    }
+  }
+}
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  * {
+    margin: 0;
+  }
+  html {
+    line-height: 1.5rem;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+  }
+  body {
+    line-height: 1rem;
+    min-block-size: 100svh;
+    min-width: 320px;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+}
+@layer base {
+  :root {
+    font: 1rem var(--f-ui);
+    color: var(--text);
+    background-color: var(--canvas);
+  }
+  :focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
+  ::selection {
+    background-color: var(--selection);
+  }
+  h1 {
+    font: 400 var(--t-h1-s)/var(--t-h1-lh) var(--f-prose);
+    letter-spacing: -0.01em;
+    margin-bottom: 24px;
+  }
+  h2 {
+    font: 400 var(--t-h2-s)/var(--t-h2-lh) var(--f-prose);
+    letter-spacing: -0.005em;
+    margin-bottom: 24px;
+  }
+  h3 {
+    font: 400 var(--t-h3-s)/var(--t-h3-lh) var(--f-prose);
+    margin-bottom: 24px;
+  }
+  h4 {
+    font: 600 var(--t-h4-s)/var(--t-h4-lh) var(--f-ui);
+    margin-bottom: 24px;
+  }
+  h5 {
+    font: 600 var(--t-h5-s)/var(--t-h5-lh) var(--f-ui);
+    margin-bottom: 8px;
+  }
+  h6 {
+    font: 500 var(--t-h6-s)/var(--t-h6-lh) var(--f-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--c-muted);
+    margin-bottom: 8px;
+  }
+  :is(h1, h2, h3, h4, h5, h6, p, blockquote, dl, ul, ol):last-child {
+    margin-bottom: 0;
+  }
+  @media (max-width: 768px) {
+    h1 {
+      font-size: 2.25rem;
+      line-height: 3rem;
+    }
+  }
+  p {
+    line-height: 1.5rem;
+    margin-bottom: 24px;
+  }
+  .lead {
+    font: var(--t-lead-s)/var(--t-lead-lh) var(--f-prose);
+  }
+  a {
+    color: var(--link);
+    text-decoration: none;
+  }
+  a:hover {
+    color: var(--link-hover);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+    text-decoration-thickness: 2px;
+  }
+  strong,
+  b {
+    font-weight: 600;
+  }
+  em {
+    font-style: italic;
+  }
+  sub,
+  sup {
+    font-size: 0.75em;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  small {
+    font-size: var(--t-body-xs-s);
+    line-height: var(--t-body-xs-lh);
+  }
+  mark {
+    background-color: var(--selection);
+    color: inherit;
+    padding-inline: 0.1em;
+  }
+  abbr[title] {
+    text-decoration: underline dotted;
+    cursor: help;
+  }
+  cite {
+    font-style: italic;
+  }
+  s,
+  del {
+    text-decoration: line-through;
+    color: var(--c-muted);
+  }
+  ins {
+    text-decoration: underline;
+    color: var(--success-text);
+  }
+  address {
+    font-style: normal;
+    line-height: 1.5rem;
+  }
+  blockquote {
+    font-family: var(--f-prose);
+    border-inline-start: var(--bd3) solid var(--primary);
+    padding-inline-start: calc(var(--s3) - var(--bd3));
+    margin: 24px 0;
+    color: var(--c-muted);
+  }
+  hr {
+    border: none;
+    height: 1.5rem;
+    background-image: linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--border) calc(50% - 0.5px), var(--border) calc(50% + 0.5px), transparent calc(50% + 0.5px));
+  }
+  ul,
+  ol {
+    padding-inline-start: var(--s4);
+    margin-bottom: 24px;
+  }
+  li {
+    line-height: 1.5rem;
+  }
+  ol {
+    font-variant-numeric: tabular-nums;
+  }
+  dl {
+    margin: 0 0 24px;
+  }
+  dt {
+    font-weight: 600;
+  }
+  dd {
+    margin-inline-start: var(--s4);
+    color: var(--c-muted);
+  }
+}
+@layer base {
+  :is(code, kbd, samp, var) {
+    font: 0.875em var(--f-mono);
+  }
+  :not(pre) > code {
+    background-color: var(--surface-sunken);
+    border-radius: var(--r-sm);
+    padding-inline: var(--s-h);
+    font-size: var(--t-code-s);
+    line-height: 1rem;
+  }
+  kbd {
+    background-color: var(--surface-raised);
+    border: 1px solid var(--border);
+    border-radius: var(--r-sm);
+    padding: 0.1em var(--s-h);
+    box-shadow: 0 1px 0 var(--border);
+    font-size: var(--t-body-sm-s);
+  }
+  pre {
+    font: var(--t-code-s)/var(--t-code-lh) var(--f-mono);
+    background-color: var(--surface-sunken);
+    border-radius: var(--r-xs);
+    overflow-x: auto;
+    tab-size: 2;
+    margin-bottom: 24px;
+  }
+  pre code {
+    display: block;
+    padding: var(--s3);
+    font: inherit;
+    background: none;
+    border-radius: 0;
+  }
+  pre:last-child {
+    margin-bottom: 0;
+  }
+}
+@layer base {
+  img,
+  video {
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+  figure {
+    margin: 0 0 24px;
+  }
+  figure > img,
+  figure > video,
+  figure > pre {
+    margin: 0 0 0.5rem;
+  }
+  figure:last-child {
+    margin-bottom: 0;
+  }
+  figcaption {
+    font: var(--t-body-sm-s)/var(--t-body-sm-lh) var(--f-ui);
+    color: var(--c-muted);
+  }
+}
+@layer base {
+  table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    margin-bottom: 24px;
+  }
+  table:last-child {
+    margin-bottom: 0;
+  }
+  caption {
+    font: var(--t-meta-s)/var(--t-meta-lh) var(--f-mono);
+    color: var(--c-muted);
+    text-align: start;
+    margin-block-end: var(--s1);
+  }
+  th,
+  td {
+    padding: calc(var(--s3) / 2) var(--s2);
+    line-height: var(--t-body-sm-lh);
+    text-align: start;
+    vertical-align: top;
+    box-shadow: inset 0 -1px 0 var(--border);
+  }
+  th {
+    font-size: var(--t-body-sm-s);
+    font-weight: 600;
+    color: var(--c-muted);
+  }
+  td {
+    font-size: var(--t-body-sm-s);
+  }
+  td[data-numeric],
+  td.numeric,
+  td:is([align=right]) {
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+}
+@layer base {
+  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
+  select) {
+    display: inline-flex;
+    align-items: center;
+    block-size: var(--s4);
+    padding: calc(var(--s2) - 1px - 0.25rem) var(--s2);
+    font: var(--t-body-s)/var(--t-body-lh) var(--f-ui);
+    background-color: var(--surface-sunken);
+    border: 1px solid var(--border-control);
+    color: var(--text);
+    appearance: none;
+  }
+  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
+  select):focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    border-color: var(--primary);
+  }
+  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
+  select):user-invalid {
+    border-color: var(--danger);
+  }
+  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
+  select):disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--s2) center;
+    padding-inline-end: var(--s4);
+  }
+  textarea {
+    display: block;
+    width: 100%;
+    padding: calc(var(--s2) - 1px) var(--s2);
+    font: var(--t-body-s)/1.5rem;
+    background-color: var(--surface-sunken);
+    border: 1px solid var(--border-control);
+    color: var(--text);
+    resize: vertical;
+  }
+  textarea:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    border-color: var(--primary);
+  }
+  textarea:user-invalid {
+    border-color: var(--danger);
+  }
+  textarea:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  label {
+    display: block;
+    font: 500 var(--t-body-sm-s)/var(--t-body-sm-lh) var(--f-ui);
+    color: var(--text);
+  }
+  fieldset {
+    border: 1px solid var(--border);
+    border-radius: var(--r-md);
+    padding: var(--s3);
+  }
+  legend {
+    font-weight: 600;
+    padding-inline: var(--s1);
+  }
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--s4);
+    padding: calc(var(--s2) - 1px) var(--s3);
+    font: 500 var(--t-body-s)/var(--t-body-lh) var(--f-ui);
+    border: 1px solid transparent;
+    cursor: pointer;
+    background-color: transparent;
+    color: inherit;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  button:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
+  button:disabled, button[aria-disabled=true] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+@layer base {
+  details > summary {
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+  }
+  details > summary::-webkit-details-marker {
+    display: none;
+  }
+  dialog {
+    background-color: var(--surface-raised);
+    color: var(--text);
+    border: none;
+    border-radius: var(--r-lg);
+    padding: var(--s4);
+    max-inline-size: min(90vw, 560px);
+    box-shadow: var(--sh4);
+  }
+  dialog::backdrop {
+    background-color: var(--overlay);
+  }
+}
+@layer layout {
+  .ln-shell {
+    display: grid;
+    grid-template-areas: "header header" "sidebar main";
+    grid-template-rows: 48px 1fr;
+    grid-template-columns: 240px 1fr;
+    min-block-size: 100svh;
+    background-color: var(--canvas);
+  }
+  .ln-shell__header {
+    grid-area: header;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: var(--s3);
+    background-color: var(--surface);
+    border-block-end: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+  .ln-shell__sidebar {
+    grid-area: sidebar;
+    overflow-y: auto;
+    border-inline-end: 1px solid var(--border);
+    background-color: var(--surface);
+    padding-block: var(--s3);
+    position: sticky;
+    top: 48px;
+    block-size: calc(100svh - 48px);
+  }
+  .ln-shell__main {
+    grid-area: main;
+    padding: var(--s4);
+    min-inline-size: 0;
+  }
+  @media (max-width: 1024px) {
+    .ln-shell {
+      grid-template-areas: "header" "main";
+      grid-template-columns: 1fr;
+    }
+    .ln-shell__sidebar {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 240px;
+      z-index: 200;
+      transform: translateX(-100%);
+      visibility: hidden;
+      transition: transform var(--dur-base) var(--e-exit), visibility var(--dur-base) var(--e-exit);
+    }
+    .ln-shell[data-sidebar=open] .ln-shell__sidebar {
+      transform: translateX(0);
+      visibility: visible;
+      box-shadow: var(--sh4);
+      transition: transform var(--dur-base) var(--e-enter), visibility var(--dur-base) var(--e-enter), box-shadow var(--dur-base) var(--e-enter);
+    }
+    .ln-shell[data-sidebar=open]::before {
+      content: "";
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: var(--overlay);
+      z-index: 199;
+    }
+  }
+}
+@layer layout {
+  .ln-container {
+    width: 100%;
+    max-width: var(--container);
+    margin-inline: auto;
+    padding-inline: var(--gutter);
+  }
+  .ln-container--narrow {
+    max-width: var(--measure);
+  }
+  .ln-container--wide {
+    max-width: var(--container-wide);
+  }
+  .ln-container--full {
+    max-width: none;
+  }
+  .ln-container--flush {
+    padding-inline: 0;
+  }
+}
+@layer layout {
+  .ln-grid {
+    display: grid;
+    gap: var(--_gap, var(--s3));
+  }
+  .ln-grid--cols-1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+  .ln-grid--cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .ln-grid--cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .ln-grid--cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .ln-grid--cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+  .ln-grid--cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  .ln-grid--cols-12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+  .ln-grid--auto {
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 15rem), 100%), 1fr));
+  }
+  .ln-grid--gap-0 {
+    --_gap: 0;
+  }
+  .ln-grid--gap-xs {
+    --_gap: var(--s1);
+  }
+  .ln-grid--gap-sm {
+    --_gap: var(--s2);
+  }
+  .ln-grid--gap-md {
+    --_gap: var(--s3);
+  }
+  .ln-grid--gap-lg {
+    --_gap: var(--s4);
+  }
+  @media (min-width: 576px) {
+    .ln-grid--cols-1\@sm {
+      grid-template-columns: repeat(1, 1fr);
+    }
+    .ln-grid--cols-2\@sm {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    .ln-grid--cols-3\@sm {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    .ln-grid--cols-4\@sm {
+      grid-template-columns: repeat(4, 1fr);
+    }
+    .ln-grid--cols-5\@sm {
+      grid-template-columns: repeat(5, 1fr);
+    }
+    .ln-grid--cols-6\@sm {
+      grid-template-columns: repeat(6, 1fr);
+    }
+    .ln-grid--cols-12\@sm {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+  @media (min-width: 768px) {
+    .ln-grid--cols-1\@md {
+      grid-template-columns: repeat(1, 1fr);
+    }
+    .ln-grid--cols-2\@md {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    .ln-grid--cols-3\@md {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    .ln-grid--cols-4\@md {
+      grid-template-columns: repeat(4, 1fr);
+    }
+    .ln-grid--cols-5\@md {
+      grid-template-columns: repeat(5, 1fr);
+    }
+    .ln-grid--cols-6\@md {
+      grid-template-columns: repeat(6, 1fr);
+    }
+    .ln-grid--cols-12\@md {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+  @media (min-width: 1024px) {
+    .ln-grid--cols-1\@lg {
+      grid-template-columns: repeat(1, 1fr);
+    }
+    .ln-grid--cols-2\@lg {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    .ln-grid--cols-3\@lg {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    .ln-grid--cols-4\@lg {
+      grid-template-columns: repeat(4, 1fr);
+    }
+    .ln-grid--cols-5\@lg {
+      grid-template-columns: repeat(5, 1fr);
+    }
+    .ln-grid--cols-6\@lg {
+      grid-template-columns: repeat(6, 1fr);
+    }
+    .ln-grid--cols-12\@lg {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+  @media (min-width: 1280px) {
+    .ln-grid--cols-1\@xl {
+      grid-template-columns: repeat(1, 1fr);
+    }
+    .ln-grid--cols-2\@xl {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    .ln-grid--cols-3\@xl {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    .ln-grid--cols-4\@xl {
+      grid-template-columns: repeat(4, 1fr);
+    }
+    .ln-grid--cols-5\@xl {
+      grid-template-columns: repeat(5, 1fr);
+    }
+    .ln-grid--cols-6\@xl {
+      grid-template-columns: repeat(6, 1fr);
+    }
+    .ln-grid--cols-12\@xl {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+  @media (min-width: 1536px) {
+    .ln-grid--cols-1\@2xl {
+      grid-template-columns: repeat(1, 1fr);
+    }
+    .ln-grid--cols-2\@2xl {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    .ln-grid--cols-3\@2xl {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    .ln-grid--cols-4\@2xl {
+      grid-template-columns: repeat(4, 1fr);
+    }
+    .ln-grid--cols-5\@2xl {
+      grid-template-columns: repeat(5, 1fr);
+    }
+    .ln-grid--cols-6\@2xl {
+      grid-template-columns: repeat(6, 1fr);
+    }
+    .ln-grid--cols-12\@2xl {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+  .ln-grid__item--span-1 {
+    grid-column: span 1;
+  }
+  .ln-grid__item--span-2 {
+    grid-column: span 2;
+  }
+  .ln-grid__item--span-3 {
+    grid-column: span 3;
+  }
+  .ln-grid__item--span-4 {
+    grid-column: span 4;
+  }
+  .ln-grid__item--span-5 {
+    grid-column: span 5;
+  }
+  .ln-grid__item--span-6 {
+    grid-column: span 6;
+  }
+  .ln-grid__item--span-7 {
+    grid-column: span 7;
+  }
+  .ln-grid__item--span-8 {
+    grid-column: span 8;
+  }
+  .ln-grid__item--span-9 {
+    grid-column: span 9;
+  }
+  .ln-grid__item--span-10 {
+    grid-column: span 10;
+  }
+  .ln-grid__item--span-11 {
+    grid-column: span 11;
+  }
+  .ln-grid__item--span-12 {
+    grid-column: span 12;
+  }
+  .ln-grid__item--span-full {
+    grid-column: 1/-1;
+  }
+  .ln-grid__item--start-1 {
+    grid-column-start: 1;
+  }
+  .ln-grid__item--start-2 {
+    grid-column-start: 2;
+  }
+  .ln-grid__item--start-3 {
+    grid-column-start: 3;
+  }
+  .ln-grid__item--start-4 {
+    grid-column-start: 4;
+  }
+  .ln-grid__item--start-5 {
+    grid-column-start: 5;
+  }
+  .ln-grid__item--start-6 {
+    grid-column-start: 6;
+  }
+  .ln-grid__item--start-7 {
+    grid-column-start: 7;
+  }
+  .ln-grid__item--start-8 {
+    grid-column-start: 8;
+  }
+  .ln-grid__item--start-9 {
+    grid-column-start: 9;
+  }
+  .ln-grid__item--start-10 {
+    grid-column-start: 10;
+  }
+  .ln-grid__item--start-11 {
+    grid-column-start: 11;
+  }
+  .ln-grid__item--start-12 {
+    grid-column-start: 12;
+  }
+  .ln-grid__item--subgrid {
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-row: span var(--rows, 3);
+  }
+  @media (min-width: 576px) {
+    .ln-grid__item--span-1\@sm {
+      grid-column: span 1;
+    }
+    .ln-grid__item--span-2\@sm {
+      grid-column: span 2;
+    }
+    .ln-grid__item--span-3\@sm {
+      grid-column: span 3;
+    }
+    .ln-grid__item--span-4\@sm {
+      grid-column: span 4;
+    }
+    .ln-grid__item--span-5\@sm {
+      grid-column: span 5;
+    }
+    .ln-grid__item--span-6\@sm {
+      grid-column: span 6;
+    }
+    .ln-grid__item--span-7\@sm {
+      grid-column: span 7;
+    }
+    .ln-grid__item--span-8\@sm {
+      grid-column: span 8;
+    }
+    .ln-grid__item--span-9\@sm {
+      grid-column: span 9;
+    }
+    .ln-grid__item--span-10\@sm {
+      grid-column: span 10;
+    }
+    .ln-grid__item--span-11\@sm {
+      grid-column: span 11;
+    }
+    .ln-grid__item--span-12\@sm {
+      grid-column: span 12;
+    }
+    .ln-grid__item--span-full\@sm {
+      grid-column: 1/-1;
+    }
+    .ln-grid__item--start-1\@sm {
+      grid-column-start: 1;
+    }
+    .ln-grid__item--start-2\@sm {
+      grid-column-start: 2;
+    }
+    .ln-grid__item--start-3\@sm {
+      grid-column-start: 3;
+    }
+    .ln-grid__item--start-4\@sm {
+      grid-column-start: 4;
+    }
+    .ln-grid__item--start-5\@sm {
+      grid-column-start: 5;
+    }
+    .ln-grid__item--start-6\@sm {
+      grid-column-start: 6;
+    }
+    .ln-grid__item--start-7\@sm {
+      grid-column-start: 7;
+    }
+    .ln-grid__item--start-8\@sm {
+      grid-column-start: 8;
+    }
+    .ln-grid__item--start-9\@sm {
+      grid-column-start: 9;
+    }
+    .ln-grid__item--start-10\@sm {
+      grid-column-start: 10;
+    }
+    .ln-grid__item--start-11\@sm {
+      grid-column-start: 11;
+    }
+    .ln-grid__item--start-12\@sm {
+      grid-column-start: 12;
+    }
+  }
+  @media (min-width: 768px) {
+    .ln-grid__item--span-1\@md {
+      grid-column: span 1;
+    }
+    .ln-grid__item--span-2\@md {
+      grid-column: span 2;
+    }
+    .ln-grid__item--span-3\@md {
+      grid-column: span 3;
+    }
+    .ln-grid__item--span-4\@md {
+      grid-column: span 4;
+    }
+    .ln-grid__item--span-5\@md {
+      grid-column: span 5;
+    }
+    .ln-grid__item--span-6\@md {
+      grid-column: span 6;
+    }
+    .ln-grid__item--span-7\@md {
+      grid-column: span 7;
+    }
+    .ln-grid__item--span-8\@md {
+      grid-column: span 8;
+    }
+    .ln-grid__item--span-9\@md {
+      grid-column: span 9;
+    }
+    .ln-grid__item--span-10\@md {
+      grid-column: span 10;
+    }
+    .ln-grid__item--span-11\@md {
+      grid-column: span 11;
+    }
+    .ln-grid__item--span-12\@md {
+      grid-column: span 12;
+    }
+    .ln-grid__item--span-full\@md {
+      grid-column: 1/-1;
+    }
+    .ln-grid__item--start-1\@md {
+      grid-column-start: 1;
+    }
+    .ln-grid__item--start-2\@md {
+      grid-column-start: 2;
+    }
+    .ln-grid__item--start-3\@md {
+      grid-column-start: 3;
+    }
+    .ln-grid__item--start-4\@md {
+      grid-column-start: 4;
+    }
+    .ln-grid__item--start-5\@md {
+      grid-column-start: 5;
+    }
+    .ln-grid__item--start-6\@md {
+      grid-column-start: 6;
+    }
+    .ln-grid__item--start-7\@md {
+      grid-column-start: 7;
+    }
+    .ln-grid__item--start-8\@md {
+      grid-column-start: 8;
+    }
+    .ln-grid__item--start-9\@md {
+      grid-column-start: 9;
+    }
+    .ln-grid__item--start-10\@md {
+      grid-column-start: 10;
+    }
+    .ln-grid__item--start-11\@md {
+      grid-column-start: 11;
+    }
+    .ln-grid__item--start-12\@md {
+      grid-column-start: 12;
+    }
+  }
+  @media (min-width: 1024px) {
+    .ln-grid__item--span-1\@lg {
+      grid-column: span 1;
+    }
+    .ln-grid__item--span-2\@lg {
+      grid-column: span 2;
+    }
+    .ln-grid__item--span-3\@lg {
+      grid-column: span 3;
+    }
+    .ln-grid__item--span-4\@lg {
+      grid-column: span 4;
+    }
+    .ln-grid__item--span-5\@lg {
+      grid-column: span 5;
+    }
+    .ln-grid__item--span-6\@lg {
+      grid-column: span 6;
+    }
+    .ln-grid__item--span-7\@lg {
+      grid-column: span 7;
+    }
+    .ln-grid__item--span-8\@lg {
+      grid-column: span 8;
+    }
+    .ln-grid__item--span-9\@lg {
+      grid-column: span 9;
+    }
+    .ln-grid__item--span-10\@lg {
+      grid-column: span 10;
+    }
+    .ln-grid__item--span-11\@lg {
+      grid-column: span 11;
+    }
+    .ln-grid__item--span-12\@lg {
+      grid-column: span 12;
+    }
+    .ln-grid__item--span-full\@lg {
+      grid-column: 1/-1;
+    }
+    .ln-grid__item--start-1\@lg {
+      grid-column-start: 1;
+    }
+    .ln-grid__item--start-2\@lg {
+      grid-column-start: 2;
+    }
+    .ln-grid__item--start-3\@lg {
+      grid-column-start: 3;
+    }
+    .ln-grid__item--start-4\@lg {
+      grid-column-start: 4;
+    }
+    .ln-grid__item--start-5\@lg {
+      grid-column-start: 5;
+    }
+    .ln-grid__item--start-6\@lg {
+      grid-column-start: 6;
+    }
+    .ln-grid__item--start-7\@lg {
+      grid-column-start: 7;
+    }
+    .ln-grid__item--start-8\@lg {
+      grid-column-start: 8;
+    }
+    .ln-grid__item--start-9\@lg {
+      grid-column-start: 9;
+    }
+    .ln-grid__item--start-10\@lg {
+      grid-column-start: 10;
+    }
+    .ln-grid__item--start-11\@lg {
+      grid-column-start: 11;
+    }
+    .ln-grid__item--start-12\@lg {
+      grid-column-start: 12;
+    }
+  }
+  @media (min-width: 1280px) {
+    .ln-grid__item--span-1\@xl {
+      grid-column: span 1;
+    }
+    .ln-grid__item--span-2\@xl {
+      grid-column: span 2;
+    }
+    .ln-grid__item--span-3\@xl {
+      grid-column: span 3;
+    }
+    .ln-grid__item--span-4\@xl {
+      grid-column: span 4;
+    }
+    .ln-grid__item--span-5\@xl {
+      grid-column: span 5;
+    }
+    .ln-grid__item--span-6\@xl {
+      grid-column: span 6;
+    }
+    .ln-grid__item--span-7\@xl {
+      grid-column: span 7;
+    }
+    .ln-grid__item--span-8\@xl {
+      grid-column: span 8;
+    }
+    .ln-grid__item--span-9\@xl {
+      grid-column: span 9;
+    }
+    .ln-grid__item--span-10\@xl {
+      grid-column: span 10;
+    }
+    .ln-grid__item--span-11\@xl {
+      grid-column: span 11;
+    }
+    .ln-grid__item--span-12\@xl {
+      grid-column: span 12;
+    }
+    .ln-grid__item--span-full\@xl {
+      grid-column: 1/-1;
+    }
+    .ln-grid__item--start-1\@xl {
+      grid-column-start: 1;
+    }
+    .ln-grid__item--start-2\@xl {
+      grid-column-start: 2;
+    }
+    .ln-grid__item--start-3\@xl {
+      grid-column-start: 3;
+    }
+    .ln-grid__item--start-4\@xl {
+      grid-column-start: 4;
+    }
+    .ln-grid__item--start-5\@xl {
+      grid-column-start: 5;
+    }
+    .ln-grid__item--start-6\@xl {
+      grid-column-start: 6;
+    }
+    .ln-grid__item--start-7\@xl {
+      grid-column-start: 7;
+    }
+    .ln-grid__item--start-8\@xl {
+      grid-column-start: 8;
+    }
+    .ln-grid__item--start-9\@xl {
+      grid-column-start: 9;
+    }
+    .ln-grid__item--start-10\@xl {
+      grid-column-start: 10;
+    }
+    .ln-grid__item--start-11\@xl {
+      grid-column-start: 11;
+    }
+    .ln-grid__item--start-12\@xl {
+      grid-column-start: 12;
+    }
+  }
+  @media (min-width: 1536px) {
+    .ln-grid__item--span-1\@2xl {
+      grid-column: span 1;
+    }
+    .ln-grid__item--span-2\@2xl {
+      grid-column: span 2;
+    }
+    .ln-grid__item--span-3\@2xl {
+      grid-column: span 3;
+    }
+    .ln-grid__item--span-4\@2xl {
+      grid-column: span 4;
+    }
+    .ln-grid__item--span-5\@2xl {
+      grid-column: span 5;
+    }
+    .ln-grid__item--span-6\@2xl {
+      grid-column: span 6;
+    }
+    .ln-grid__item--span-7\@2xl {
+      grid-column: span 7;
+    }
+    .ln-grid__item--span-8\@2xl {
+      grid-column: span 8;
+    }
+    .ln-grid__item--span-9\@2xl {
+      grid-column: span 9;
+    }
+    .ln-grid__item--span-10\@2xl {
+      grid-column: span 10;
+    }
+    .ln-grid__item--span-11\@2xl {
+      grid-column: span 11;
+    }
+    .ln-grid__item--span-12\@2xl {
+      grid-column: span 12;
+    }
+    .ln-grid__item--span-full\@2xl {
+      grid-column: 1/-1;
+    }
+    .ln-grid__item--start-1\@2xl {
+      grid-column-start: 1;
+    }
+    .ln-grid__item--start-2\@2xl {
+      grid-column-start: 2;
+    }
+    .ln-grid__item--start-3\@2xl {
+      grid-column-start: 3;
+    }
+    .ln-grid__item--start-4\@2xl {
+      grid-column-start: 4;
+    }
+    .ln-grid__item--start-5\@2xl {
+      grid-column-start: 5;
+    }
+    .ln-grid__item--start-6\@2xl {
+      grid-column-start: 6;
+    }
+    .ln-grid__item--start-7\@2xl {
+      grid-column-start: 7;
+    }
+    .ln-grid__item--start-8\@2xl {
+      grid-column-start: 8;
+    }
+    .ln-grid__item--start-9\@2xl {
+      grid-column-start: 9;
+    }
+    .ln-grid__item--start-10\@2xl {
+      grid-column-start: 10;
+    }
+    .ln-grid__item--start-11\@2xl {
+      grid-column-start: 11;
+    }
+    .ln-grid__item--start-12\@2xl {
+      grid-column-start: 12;
+    }
+  }
+}
+@layer layout {
+  .ln-cluster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--_gap, var(--s1));
+    align-items: center;
+  }
+  .ln-cluster--gap-xs {
+    --_gap: var(--s1);
+  }
+  .ln-cluster--gap-sm {
+    --_gap: var(--s2);
+  }
+  .ln-cluster--gap-md {
+    --_gap: var(--s3);
+  }
+  .ln-cluster--justify-start {
+    justify-content: flex-start;
+  }
+  .ln-cluster--justify-center {
+    justify-content: center;
+  }
+  .ln-cluster--justify-end {
+    justify-content: flex-end;
+  }
+  .ln-cluster--justify-between {
+    justify-content: space-between;
+  }
+  .ln-cluster--align-start {
+    align-items: flex-start;
+  }
+  .ln-cluster--align-center {
+    align-items: center;
+  }
+  .ln-cluster--align-baseline {
+    align-items: baseline;
+  }
+  .ln-cluster--align-end {
+    align-items: flex-end;
+  }
+  .ln-cluster--nowrap {
+    flex-wrap: nowrap;
+  }
+  @media (min-width: 576px) {
+    .ln-cluster--justify-start\@sm {
+      justify-content: flex-start;
+    }
+    .ln-cluster--justify-center\@sm {
+      justify-content: center;
+    }
+    .ln-cluster--justify-end\@sm {
+      justify-content: flex-end;
+    }
+    .ln-cluster--justify-between\@sm {
+      justify-content: space-between;
+    }
+    .ln-cluster--align-start\@sm {
+      align-items: flex-start;
+    }
+    .ln-cluster--align-center\@sm {
+      align-items: center;
+    }
+    .ln-cluster--align-baseline\@sm {
+      align-items: baseline;
+    }
+    .ln-cluster--align-end\@sm {
+      align-items: flex-end;
+    }
+    .ln-cluster--nowrap\@sm {
+      flex-wrap: nowrap;
+    }
+  }
+  @media (min-width: 768px) {
+    .ln-cluster--justify-start\@md {
+      justify-content: flex-start;
+    }
+    .ln-cluster--justify-center\@md {
+      justify-content: center;
+    }
+    .ln-cluster--justify-end\@md {
+      justify-content: flex-end;
+    }
+    .ln-cluster--justify-between\@md {
+      justify-content: space-between;
+    }
+    .ln-cluster--align-start\@md {
+      align-items: flex-start;
+    }
+    .ln-cluster--align-center\@md {
+      align-items: center;
+    }
+    .ln-cluster--align-baseline\@md {
+      align-items: baseline;
+    }
+    .ln-cluster--align-end\@md {
+      align-items: flex-end;
+    }
+    .ln-cluster--nowrap\@md {
+      flex-wrap: nowrap;
+    }
+  }
+  @media (min-width: 1024px) {
+    .ln-cluster--justify-start\@lg {
+      justify-content: flex-start;
+    }
+    .ln-cluster--justify-center\@lg {
+      justify-content: center;
+    }
+    .ln-cluster--justify-end\@lg {
+      justify-content: flex-end;
+    }
+    .ln-cluster--justify-between\@lg {
+      justify-content: space-between;
+    }
+    .ln-cluster--align-start\@lg {
+      align-items: flex-start;
+    }
+    .ln-cluster--align-center\@lg {
+      align-items: center;
+    }
+    .ln-cluster--align-baseline\@lg {
+      align-items: baseline;
+    }
+    .ln-cluster--align-end\@lg {
+      align-items: flex-end;
+    }
+    .ln-cluster--nowrap\@lg {
+      flex-wrap: nowrap;
+    }
+  }
+  @media (min-width: 1280px) {
+    .ln-cluster--justify-start\@xl {
+      justify-content: flex-start;
+    }
+    .ln-cluster--justify-center\@xl {
+      justify-content: center;
+    }
+    .ln-cluster--justify-end\@xl {
+      justify-content: flex-end;
+    }
+    .ln-cluster--justify-between\@xl {
+      justify-content: space-between;
+    }
+    .ln-cluster--align-start\@xl {
+      align-items: flex-start;
+    }
+    .ln-cluster--align-center\@xl {
+      align-items: center;
+    }
+    .ln-cluster--align-baseline\@xl {
+      align-items: baseline;
+    }
+    .ln-cluster--align-end\@xl {
+      align-items: flex-end;
+    }
+    .ln-cluster--nowrap\@xl {
+      flex-wrap: nowrap;
+    }
+  }
+  @media (min-width: 1536px) {
+    .ln-cluster--justify-start\@2xl {
+      justify-content: flex-start;
+    }
+    .ln-cluster--justify-center\@2xl {
+      justify-content: center;
+    }
+    .ln-cluster--justify-end\@2xl {
+      justify-content: flex-end;
+    }
+    .ln-cluster--justify-between\@2xl {
+      justify-content: space-between;
+    }
+    .ln-cluster--align-start\@2xl {
+      align-items: flex-start;
+    }
+    .ln-cluster--align-center\@2xl {
+      align-items: center;
+    }
+    .ln-cluster--align-baseline\@2xl {
+      align-items: baseline;
+    }
+    .ln-cluster--align-end\@2xl {
+      align-items: flex-end;
+    }
+    .ln-cluster--nowrap\@2xl {
+      flex-wrap: nowrap;
+    }
+  }
+}
+@layer layout {
+  .ln-section {
+    padding-block: var(--s4);
+    position: relative;
+  }
+  .ln-section__inner {
+    max-width: var(--container);
+    margin-inline: auto;
+    padding-inline: var(--gutter);
+  }
+  .ln-section--narrow .ln-section__inner {
+    max-width: var(--measure);
+  }
+  .ln-section--wide .ln-section__inner {
+    max-width: var(--container-wide);
+  }
+  .ln-section--space-lg {
+    padding-block: 48px;
+  }
+  .ln-section--space-xl {
+    padding-block: 72px;
+  }
+  .ln-section--space-2xl {
+    padding-block: 96px;
+  }
+  .ln-section--space-3xl {
+    padding-block: 144px;
+  }
+  @media (max-width: 768px) {
+    .ln-section--space-xl {
+      padding-block: 48px;
+    }
+    .ln-section--space-2xl {
+      padding-block: 48px;
+    }
+    .ln-section--space-3xl {
+      padding-block: 72px;
+    }
+  }
+  .ln-section--surface-sunken {
+    background: var(--surface-sunken);
+  }
+  .ln-section--surface-raised {
+    background: var(--surface);
+  }
+  .ln-section--surface-inverse {
+    background: var(--surface-inverse);
+    color: var(--c-inverse);
+  }
+  .ln-section--center {
+    text-align: center;
+  }
+  .ln-section__header {
+    margin-bottom: var(--s4);
+  }
+  .ln-section__eyebrow {
+    font: 500 var(--t-meta-s)/var(--t-meta-lh) var(--f-mono);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--c-muted);
+    margin-bottom: var(--s1);
+  }
+  .ln-section__title {
+    font: 400 var(--t-h2-s)/var(--t-h2-lh) var(--f-prose);
+    letter-spacing: -0.005em;
+    text-wrap: balance;
+  }
+  .ln-section__lead {
+    font-size: var(--t-lead-s);
+    line-height: var(--t-lead-lh);
+    color: var(--c-muted);
+  }
+}
+@layer helpers {
+  .show-grid {
+    --grid-line: rgb(124 58 237 / 0.30);
+    --grid-base: rgb(124 58 237 / 0.15);
+    position: relative;
+  }
+  .show-grid::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9999;
+    background-image: repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 1.5rem), repeating-linear-gradient(to bottom, var(--grid-base) 0 1px, transparent 1px 0.5rem);
+  }
+  @media (prefers-color-scheme: dark) {
+    .show-grid:not([data-theme=light]) {
+      --grid-line: rgb(139 92 246 / 0.30);
+      --grid-base: rgb(139 92 246 / 0.15);
+    }
+  }
+  [data-theme=dark] .show-grid,
+  .show-grid[data-theme=dark] {
+    --grid-line: rgb(139 92 246 / 0.30);
+    --grid-base: rgb(139 92 246 / 0.15);
+  }
+  .grid-toggle {
+    position: fixed;
+    bottom: var(--s3);
+    right: var(--s3);
+    z-index: 10000;
+    display: inline-grid;
+    place-items: center;
+    width: var(--s4);
+    height: var(--s4);
+    padding: 0;
+    border: none;
+    border-radius: var(--r-sm);
+    background: transparent;
+    color: var(--c-muted);
+    cursor: pointer;
+  }
+  .grid-toggle > i {
+    font-size: 1rem;
+  }
+  .grid-toggle:hover {
+    color: var(--text);
+    background: var(--surface-raised);
+  }
+  .grid-toggle[aria-pressed=true] {
+    color: var(--primary-text);
+    background: var(--primary-subtle);
+    box-shadow: inset 0 0 0 1px var(--primary-border);
+  }
+}
+@layer helpers {}