/**********/
/* RESETS */
/**********/

*,
*::before,
*::after {
  margin: 0;
}

/**************/
/* ANIMATIONS */
/**************/

@keyframes move-in {
  0% {
    translate: 0 10px;
    pointer-events: none;
  }
  100% {
    pointer-events: none;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    pointer-events: none;
  }
  100% {
    pointer-events: none;
  }
}

/*********************/
/* COMMON PROPERTIES */
/*********************/

:root {
  /* COLORS */
  --color-bg-aside: #f6f6f7;
  --color-bg-main: #fff;
  --color-fg-primary: #3c3c43;
  --color-fg-secondary: #67676c;
  --color-fg-accent-1: #3451b2;
  --color-fg-accent-2: #3a5ccc;
  --color-border-1: #e2e2e3;
  --color-border-2: var(--color-border-1);
  
  /* BORDERS */
  --border-1: 1px solid var(--color-border-1);
  --border-2: 1px solid var(--color-border-2);

  /* SPACING */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
  --inline-margin: 0; /* gets set in media query */

  /* PAGEFIND */
  /* Colors */
  --pf-text: var(--color-fg-primary);
  --pf-text-secondary: var(--color-fg-secondary);
  --pf-text-muted: var(--color-fg-secondary);
  --pf-background: var(--color-bg-main);
  --pf-border: var(--color-border-1);
  --pf-border-focus: var(--color-fg-accent-2);
  --pf-skeleton: var(--color-bg-aside);
  --pf-skeleton-shine: var(--color-bg-aside);
  --pf-hover: var(--color-bg-aside);
  --pf-mark: #1a1a1a;
  --pf-outline-focus: var(--color-fg-accent-2);
  --pf-font: sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-aside: #161618;
    --color-bg-main: #1b1b1f;
    --color-fg-primary: #dfdfd6;
    --color-fg-secondary: #98989f;
    --color-fg-accent-1: #a8b1ff;
    --color-fg-accent-2: #5c73e7;
    --color-border-1: #2e2e32;
    --color-border-2: #000;
  }
}

/*****************/
/* COMMON STYLES */
/*****************/

html {
  text-size-adjust: none;
  scrollbar-gutter: stable both-edges;
}

body {
  min-block-size: 100dvh;
  background-color: var(--color-bg-main);
  color: var(--color-fg-primary);
  font-family: sans-serif;
  line-height: 1.7;
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: var(--color-fg-accent-1);
  transition: color 250ms;
}

a:hover,
a:focus {
  color: var(--color-fg-accent-2);
}

summary::marker {
  content: "";
}

a.lfp-secondary {
  color: var(--color-fg-secondary);
  text-decoration: none;
}

a.lfp-secondary:hover,
a.lfp-secondary:focus {
  color: var(--color-fg-primary);
}

button {
  cursor: pointer;
}

/*************/
/* UTILITIES */
/*************/

.lfp-collapsible-arrow {
  --_color-arrow: var(--color-fg-secondary);
  display: grid;
  grid-template-columns: 1fr min-content;
  align-items: center;
  gap: var(--spacing-sm);
}

.lfp-collapsible-arrow svg {
  fill: var(--color-fg-secondary);
  rotate: var(--_rotate, 0);
  transition:
    fill 250ms,
    rotate 250ms;
}

.lfp-collapsible-arrow:hover svg {
  fill: var(--color-fg-primary);
}

.lfp-collapsible-arrow::after {
  rotate: var(--_rotate, -45deg);
  transition:
    border-color 250ms,
    rotate 250ms;
}

.lfp-collapsible-arrow:hover::after {
  --_color-arrow: var(--color-fg-primary);
}

.lfp-with-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/*
Source - https://stackoverflow.com/a/19758620
Posted by anon, modified by community. See post 'Timeline' for change history
Retrieved 2026-05-23, License - CC BY-SA 4.0
*/
.lfp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/***************/
/* MAIN LAYOUT */
/***************/

/* HEADER */
.lfp-site-header {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  block-size: var(--spacing-xl);
  padding-inline: var(--spacing-lg);
  border-block-end: var(--border-2);
  z-index: 2;
}

.lfp-site-title {
  justify-self: end;
  display: grid;
  place-content: center;
  block-size: inherit;
}

.lfp-site-title a {
  color: var(--color-fg-secondary);
  font-weight: 600;
  text-decoration: none;
  transition: color 250ms;
}

.lfp-site-title a:hover,
.lfp-site-title a:focus {
  color: var(--color-fg-primary);
}

.lfp-site-menu {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  block-size: inherit;
  background-color: var(--color-bg-main);
}

.lfp-site-menu ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0;
}

/* NAVIGATION */
.lfp-navigation {
  position: sticky;
  inset-block-start: 0;
  margin-inline-start: var(--inline-margin);
  background-color: var(--color-bg-main);
  border-block-end: var(--border-1);
  z-index: 1;
}

.lfp-navigation-toggle-set {
  display: flex;
  justify-content: space-between;
}

.lfp-navigation button {
  padding: var(--spacing-md);
  border: none;
  background: none;
  color: var(--color-fg-secondary);
  font-size: small;
}

.lfp-navigation:has(.lfp-page-navigation:popover-open) .lfp-page-navigation-toggle {
  --_rotate: 90deg;
}

.lfp-page-navigation-toggle {
  anchor-name: --page-navigation-anchor;
}

.lfp-site-navigation {
  all: unset;
  position: fixed;
  inset: 0 auto 0 0;
  display: grid;
  background-color: var(--color-bg-aside);
  transition: translate 250ms;
  translate: -100%;
}

.lfp-site-navigation:popover-open {
  translate: 0;
}

.lfp-site-navigation:popover-open::backdrop {
  background-color: #0003;
  transition: background-color 250ms;

  @starting-style {
    background-color: transparent;
  }
}

.lfp-site-navigation nav {
  justify-self: end;
  max-inline-size: 30ch;
  margin: 0 var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-xs);
  border-block-start: var(--border-1);
  overflow-x: auto;
}

.lfp-site-navigation li:not(:first-child) details {
  border-block-start: var(--border-1);
}

.lfp-site-navigation details {
  margin-block: var(--spacing-sm);
  padding-block-start: var(--spacing-sm);
}

.lfp-site-navigation summary {
  padding-block: 0.25em;
  font-weight: 600;
  cursor: pointer;
}

.lfp-site-navigation [open] summary {
  --_rotate: 90deg;
}

.lfp-site-navigation ul {
  list-style-type: none;
  padding: 0;
}

.lfp-site-navigation a {
  display: block;
  padding-block: 0.25em;
  color: var(--color-fg-secondary);
  text-decoration: none;
}

.lfp-site-navigation a:hover,
.lfp-site-navigation a:focus,
.lfp-site-navigation a[aria-current="page"] {
  color: var(--color-fg-accent-1);
}

.lfp-page-navigation {
  position: absolute;
  position-anchor: --page-navigation-anchor;
  inset: anchor(end) anchor(end) auto auto;
  border: var(--border-1);
  border-radius: var(--spacing-sm);
  background-color: var(--color-bg-aside);
  animation: move-in 250ms ease, fade-in 250ms ease;
  overflow: hidden;
}

.lfp-page-navigation:popover-open {
  box-shadow: 2px 2px 12px #0003;
}

.lfp-page-navigation h2 {
  padding-inline: var(--spacing-md);
  color: var(--color-fg-primary);
  font-size: inherit;
}

.lfp-page-navigation ul {
  list-style-type: none;
  padding: 0;
}

.lfp-page-navigation li {
  padding-inline: var(--spacing-md);
}

/* MAIN CONTENT */
.lfp-site-main {
  margin-inline: var(--inline-margin) 0;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
}

.lfp-page-main {
  max-inline-size: 688px;
  margin-inline: auto;
}

.lfp-page-main .header-anchor {
  position: relative;
  color: var(--color-fg-primary);
  text-decoration: none;
}

.lfp-page-main .header-anchor::before,
.lfp-page-main .header-anchor::before {
  content: "#";
  position: absolute;
  inset: 0 auto auto 0;
  color: var(--color-fg-accent-1);
  line-height: 1;
  opacity: 0;
  transition: opacity 250ms;
  translate: calc(-100% - var(--spacing-sm));
}

.lfp-page-main .header-anchor:hover::before,
.lfp-page-main .header-anchor:focus::before {
  opacity: 1;
}

/* FOOTER */
.lfp-site-footer {
  margin-inline-start: var(--inline-margin);
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
}

@media (min-width: 800px) {
  :root {
    --inline-margin: max(20rem, 25dvw);
  }

  .lfp-site-header {
    position: sticky;
    inset-block-start: 0;
    grid-template-columns: var(--inline-margin) 1fr;
    padding: 0;
    background-color: var(--color-bg-aside);
    border: none;
  }

  .lfp-site-title {
    margin-inline: var(--spacing-xl) var(--spacing-lg);
  }

  .lfp-site-menu {
    padding-inline: var(--spacing-lg);
    border-block-end: var(--border-2);
  }

  .lfp-navigation {
    inset-block-start: var(--spacing-xl);
  }

  .lfp-navigation .lfp-site-navigation-toggle {
    display: none;
  }

  .lfp-site-navigation {
    inline-size: var(--inline-margin);
    translate: 0;
  }

  .lfp-site-navigation nav {
    margin-block-start: var(--spacing-xl);
  }

  .lfp-page-navigation {
    inset: anchor(end) auto auto anchor(self-start);
  }
}

@media (min-width: 1200px) {
  .lfp-site-menu {
    padding-inline-end: max(var(--spacing-lg), 15dvw);
  }

  .lfp-navigation .lfp-navigation-toggle-set {
    display: none;
  }

  /* TABLE OF CONTENT */
  .lfp-page-navigation {
    all: unset;
    position: fixed;
    inset: var(--spacing-xl) 0 0 auto;
    inline-size: var(--inline-margin);
    padding-block-start: var(--spacing-xl);
    background-color: initial;
    overflow-y: auto;
  }
 
  .lfp-page-navigation nav {
    padding-block: var(--spacing-xs);
    border-inline-start:var(--border-1);
  }

  .lfp-site-main {
    margin-inline-end: var(--inline-margin);
  }
}

/**************/
/* COMPONENTS */
/**************/

/* PAGE CONTENT */
.lfp-page-content p,
.lfp-page-content ul,
.lfp-page-content ol {
  margin-block: 1lh;
}

.lfp-page-content h2 {
  margin-block: var(--spacing-lg) var(--spacing-md);
  padding-block-start: var(--spacing-xs);
  border-block-start: var(--border-1);
}

.lfp-page-content h3 {
  margin-block: var(--spacing-lg) var(--spacing-sm);
}

/* TABLES */
table {
  display: block;
  border-collapse: collapse;
  overflow-x: auto;
}

thead,
tr:nth-child(even) {
  background-color: var(--color-bg-aside);
}

td,
th {
  border: var(--border-1);
  text-align: start;
  padding: var(--spacing-sm) var(--spacing-md);
}

/* PAGE METADATA */
.lfp-page-metadata {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-block: var(--spacing-lg);
  font-size: smaller;
}

.lfp-edit-link {
  text-decoration: none;
}

.lfp-edit-time {
  color: var(--color-fg-secondary);
}

/* PAGINATION */
.lfp-pagination ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  padding-block: var(--spacing-lg);
  border-block-start: var(--border-1);
}

.lfp-pagination-next {
  text-align: end;
}

.lfp-pagination-link {
  display: grid;
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-1);
  border-radius: var(--spacing-sm);
  text-decoration: none;
  transition: border-color 250ms;
}

.lfp-pagination-link:hover,
.lfp-pagination-link:focus {
  border-color: var(--color-fg-accent-2);
}

.lfp-pagination-link small {
  color: var(--color-fg-primary);
}

@media (min-width: 640px) {
  .lfp-pagination ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .lfp-pagination-previous {
    grid-column: 1;
  }

  .lfp-pagination-next {
    grid-column: 2;
  }
}

/* GITHUB-STYLE ALERTS */
.lfp-alert {
  margin-block: var(--spacing-lg);
  padding: var(--spacing-md);
  border: var(--border-1);
  border-color: var(--_c);
  border-radius: var(--spacing-sm);
  background-color: rgb(from var(--_c) r g b / 0.05);
}

.lfp-alert .lfp-alert-title {
  display: flex;
  align-items: center;
  gap: 1ch;
  margin: 0;
  color: var(--_c);
  font: revert;
}

.lfp-alert .lfp-alert-title + * {
  margin-block-start: 0;
}

.lfp-alert > :last-child {
  margin-block-end: 0;
}

.lfp-alert.lfp-alert-note { --_c: #0969da; }
.lfp-alert.lfp-alert-tip { --_c: #1a7f37; }
.lfp-alert.lfp-alert-warning { --_c: #9a6700; }
.lfp-alert.lfp-alert-caution { --_c: #d1242f; }
.lfp-alert.lfp-alert-important { --_c: #8250df; }

@media (prefers-color-scheme: dark) {
  .lfp-alert.lfp-alert-note { --_c: #2f81f7; }
  .lfp-alert.lfp-alert-tip { --_c: #3fb950; }
  .lfp-alert.lfp-alert-warning { --_c: #d29922; }
  .lfp-alert.lfp-alert-caution { --_c: #f85149; }
  .lfp-alert.lfp-alert-important { --_c: #a371f7; }
}

/* CODEBLOCK */
.lfp-codeblock {
  position: relative;
}

.lfp-codeblock .lfp-copy-button {
  position: absolute;
  inset: var(--spacing-sm) var(--spacing-sm) auto auto;
  padding: var(--spacing-sm);
  border: var(--border-1);
  border-radius: var(--spacing-sm);
  background-color: var(--color-bg-main);
  color: var(--color-fg-secondary);
  opacity: 0;
  transition: opacity 250ms;
}

.lfp-codeblock .lfp-copy-button:hover,
.lfp-codeblock .lfp-copy-button:focus,
.lfp-codeblock:hover .lfp-copy-button,
.lfp-codeblock:focus .lfp-copy-button {
  opacity: 1;
}