/* src/styles/index.css */
:root {
  --h-accent: 292.7deg;
  --c-50: .015;
  --c-100: .033;
  --c-200: .06;
  --c-300: .12;
  --c-400: .2;
  --c-500: .25;
  --c-600: .29;
  --c-700: .27;
  --c-800: .22;
  --c-900: .18;
  --c-950: .11;
  --l-50: 98.5%;
  --l-100: 96.7%;
  --l-200: 93%;
  --l-300: 87%;
  --l-400: 71%;
  --l-500: 55%;
  --l-600: 45%;
  --l-700: 37%;
  --l-800: 27.8%;
  --l-900: 20%;
  --l-950: 14%;
  --color-accent-l50: oklch(var(--l-50) var(--c-50) var(--h-accent));
  --color-accent-l100: oklch(var(--l-100) var(--c-100) var(--h-accent));
  --color-accent-l200: oklch(var(--l-200) var(--c-200) var(--h-accent));
  --color-accent-l300: oklch(var(--l-300) var(--c-300) var(--h-accent));
  --color-accent-l400: oklch(var(--l-400) var(--c-400) var(--h-accent));
  --color-accent-l500: oklch(var(--l-500) var(--c-500) var(--h-accent));
  --color-accent-l600: oklch(var(--l-600) var(--c-600) var(--h-accent));
  --color-accent-l700: oklch(var(--l-700) var(--c-700) var(--h-accent));
  --color-accent-l800: oklch(var(--l-800) var(--c-800) var(--h-accent));
  --color-accent-l900: oklch(var(--l-900) var(--c-900) var(--h-accent));
  --color-accent-l950: oklch(var(--l-950) var(--c-950) var(--h-accent));
  --color-accent-d50: var(--color-accent-l950);
  --color-accent-d100: var(--color-accent-l900);
  --color-accent-d200: var(--color-accent-l800);
  --color-accent-d300: var(--color-accent-l700);
  --color-accent-d400: var(--color-accent-l600);
  --color-accent-d500: var(--color-accent-l500);
  --color-accent-d600: var(--color-accent-l400);
  --color-accent-d700: var(--color-accent-l300);
  --color-accent-d800: var(--color-accent-l200);
  --color-accent-d900: var(--color-accent-l100);
  --color-accent-d950: var(--color-accent-l50);
  --spacing-xs: .4rem;
  --spacing-sm: .71rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-icon: .4em;
  --blur-radius: 5px;
  --width-desktop-nav: 300px;
  --border-radius: 1rem;
  font-family: IBM Plex Sans, San Francisco, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--color-accent-50);
  color: var(--color-accent-950);
  display: grid;
  grid-template-columns: [full-start wide-start] var(--spacing-md) [content-start] var(--spacing-sm) [nav-start] 1fr [nav-end] var(--spacing-sm) [content-end] var(--spacing-md) [full-end wide-end];
  --color-accent-50: var(--color-accent-l50);
  --color-accent-100: var(--color-accent-l100);
  --color-accent-200: var(--color-accent-l200);
  --color-accent-300: var(--color-accent-l300);
  --color-accent-400: var(--color-accent-l400);
  --color-accent-500: var(--color-accent-l500);
  --color-accent-600: var(--color-accent-l600);
  --color-accent-700: var(--color-accent-l700);
  --color-accent-800: var(--color-accent-l800);
  --color-accent-900: var(--color-accent-l900);
  --color-accent-950: var(--color-accent-l950);
  margin: 0;
  transition: background-color .3s ease-out;
}

@media screen and (prefers-color-scheme: dark) {
  body:not(.light) {
    --color-accent-50: var(--color-accent-d50);
    --color-accent-100: var(--color-accent-d100);
    --color-accent-200: var(--color-accent-d200);
    --color-accent-300: var(--color-accent-d300);
    --color-accent-400: var(--color-accent-d400);
    --color-accent-500: var(--color-accent-d500);
    --color-accent-600: var(--color-accent-d600);
    --color-accent-700: var(--color-accent-d700);
    --color-accent-800: var(--color-accent-d800);
    --color-accent-900: var(--color-accent-d900);
    --color-accent-950: var(--color-accent-d950);
  }
}

body.dark {
  --color-accent-50: var(--color-accent-d50);
  --color-accent-100: var(--color-accent-d100);
  --color-accent-200: var(--color-accent-d200);
  --color-accent-300: var(--color-accent-d300);
  --color-accent-400: var(--color-accent-d400);
  --color-accent-500: var(--color-accent-d500);
  --color-accent-600: var(--color-accent-d600);
  --color-accent-700: var(--color-accent-d700);
  --color-accent-800: var(--color-accent-d800);
  --color-accent-900: var(--color-accent-d900);
  --color-accent-950: var(--color-accent-d950);
}

@media screen and (min-width: 820px) {
  body {
    grid-template-columns: [full-start] minmax(0, .9fr) [wide-start] minmax(0, .1fr) [nav-start content-start] 800px [nav-end content-end] minmax(0, .1fr) [wide-end] minmax(0, .9fr) [full-end];
  }
}

body ::selection {
  color: var(--color-accent-50);
  background-color: var(--color-accent-600);
}

@media screen and (min-width: 820px) {
  .mobile.header {
    display: none;
  }
}

.mobile.header .title {
  display: flex;
  cursor: default;
  align-items:  center;
  gap: .3em;
  font-size: 1.7rem;
  font-weight: 700;
}

.mobile.header .title .icon {
  color: var(--color-accent-600);
}

.header {
  display: flex;
  grid-column: content-start / content-end;
  padding: var(--spacing-md) 0;
  justify-content: space-between;
  align-items:  center;
}

@media screen and (min-width: 820px) {
  .header {
    grid-column: nav-start / nav-end;
    padding: var(--spacing-xl) 0 calc(var(--spacing-xl) / 2) 0;
  }
}

.header .title {
  color: inherit;
  text-decoration: none;
  display: flex;
  overflow: visible;
  border-radius: 999px;
  align-items:  center;
  gap: .3em;
  font-size: 1.7rem;
  font-weight: 700;
}

@media screen and (min-width: 820px) {
  .header .title {
    font-size: 2rem;
  }
}

.header .title .icon {
  color: var(--color-accent-600);
}

.header .title .icon path {
  transition: d .1s ease-out;
}

.header .title:hover .icon path {
  d: path("M12 21L3 21L12 4L21 21M20 4L29 21");
}

.header .title:active .icon path {
  d: path("M12 21L3 21L12 4L21 21M12 4L21 21");
}

.header .title:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 16px;
}

.header .title:link {
  color: inherit;
  text-decoration: none;
  display: flex;
  overflow: visible;
  border-radius: 999px;
  align-items:  center;
  gap: .3em;
  font-size: 1.7rem;
  font-weight: 700;
}

@media screen and (min-width: 820px) {
  .header .title:link {
    font-size: 2rem;
  }
}

.header .title:link .icon {
  color: var(--color-accent-600);
}

.header .title:link .icon path {
  transition: d .1s ease-out;
}

.header .title:link:hover .icon path {
  d: path("M12 21L3 21L12 4L21 21M20 4L29 21");
}

.header .title:link:active .icon path {
  d: path("M12 21L3 21L12 4L21 21M12 4L21 21");
}

.header .title:link:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 16px;
}

.header .title:visited {
  color: inherit;
  text-decoration: none;
  display: flex;
  overflow: visible;
  border-radius: 999px;
  align-items:  center;
  gap: .3em;
  font-size: 1.7rem;
  font-weight: 700;
}

@media screen and (min-width: 820px) {
  .header .title:visited {
    font-size: 2rem;
  }
}

.header .title:visited .icon {
  color: var(--color-accent-600);
}

.header .title:visited .icon path {
  transition: d .1s ease-out;
}

.header .title:visited:hover .icon path {
  d: path("M12 21L3 21L12 4L21 21M20 4L29 21");
}

.header .title:visited:active .icon path {
  d: path("M12 21L3 21L12 4L21 21M12 4L21 21");
}

.header .title:visited:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 16px;
}

.header .desktop.nav {
  display: none;
  gap: var(--spacing-xs);
}

@media screen and (min-width: 820px) {
  .header .desktop.nav {
    display: flex;
  }
}

.header .desktop.nav a {
  display: flex;
  gap: var(--spacing-icon);
  color: inherit;
  text-decoration: none;
  padding: var(--spacing-sm) calc(var(--spacing-sm) * 2);
  border-radius: 9999px;
  flex-grow: 1;
  justify-content: center;
  align-items:  center;
  transition: background-color .1s ease-out;
  font-weight: 600;
}

.header .desktop.nav a:hover {
  background-color: var(--color-accent-100);
}

.header .desktop.nav a.viewing {
  background-color: var(--color-accent-200);
}

.header .desktop.nav a:active {
  background-color: var(--color-accent-200);
}

.header .desktop.nav a .icon {
  color: var(--color-accent-600);
}

.header .desktop.nav a:link {
  display: flex;
  gap: var(--spacing-icon);
  color: inherit;
  text-decoration: none;
  padding: var(--spacing-sm) calc(var(--spacing-sm) * 2);
  border-radius: 9999px;
  flex-grow: 1;
  justify-content: center;
  align-items:  center;
  transition: background-color .1s ease-out;
  font-weight: 600;
}

.header .desktop.nav a:link:hover {
  background-color: var(--color-accent-100);
}

.header .desktop.nav a:link.viewing {
  background-color: var(--color-accent-200);
}

.header .desktop.nav a:link:active {
  background-color: var(--color-accent-200);
}

.header .desktop.nav a:link .icon {
  color: var(--color-accent-600);
}

.header .desktop.nav a:visited {
  display: flex;
  gap: var(--spacing-icon);
  color: inherit;
  text-decoration: none;
  padding: var(--spacing-sm) calc(var(--spacing-sm) * 2);
  border-radius: 9999px;
  flex-grow: 1;
  justify-content: center;
  align-items:  center;
  transition: background-color .1s ease-out;
  font-weight: 600;
}

.header .desktop.nav a:visited:hover {
  background-color: var(--color-accent-100);
}

.header .desktop.nav a:visited.viewing {
  background-color: var(--color-accent-200);
}

.header .desktop.nav a:visited:active {
  background-color: var(--color-accent-200);
}

.header .desktop.nav a:visited .icon {
  color: var(--color-accent-600);
}

.header .desktop.nav a:active {
  display: flex;
  gap: var(--spacing-icon);
  color: inherit;
  text-decoration: none;
  padding: var(--spacing-sm) calc(var(--spacing-sm) * 2);
  border-radius: 9999px;
  flex-grow: 1;
  justify-content: center;
  align-items:  center;
  transition: background-color .1s ease-out;
  font-weight: 600;
}

.header .desktop.nav a:active:hover {
  background-color: var(--color-accent-100);
}

.header .desktop.nav a:active.viewing {
  background-color: var(--color-accent-200);
}

.header .desktop.nav a:active:active {
  background-color: var(--color-accent-200);
}

.header .desktop.nav a:active .icon {
  color: var(--color-accent-600);
}

.header .desktop.nav a:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}

.main-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: wide-start / wide-end;
  padding-bottom: var(--spacing-md);
}

main {
  display: contents;
}

main .wide {
  grid-column-start: wide-start;
  grid-column-end: wide-end;
}

main .typography {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: wide-start / wide-end;
  line-height: 1.7;
}

main .typography * {
  grid-column: content-start / content-end;
}

main .typography .wide {
  grid-column: wide-start / wide-end;
}

main .typography .title {
  font-size: 3rem;
  line-height: 1;
}

@media screen and (min-width: 820px) {
  main .typography .title {
    grid-column: wide-start / wide-end;
    font-size: 5rem;
  }
}

main .typography > * {
  margin: 0 0 var(--spacing-md) 0;
}

main .typography h1 {
  margin-bottom: var(--spacing-sm);
}

main .typography h2 {
  margin-bottom: var(--spacing-sm);
}

main .typography h3 {
  margin-bottom: var(--spacing-sm);
}

main .typography h4 {
  margin-bottom: var(--spacing-sm);
}

main .typography h5 {
  margin-bottom: var(--spacing-sm);
}

main .typography h6 {
  margin-bottom: var(--spacing-sm);
}

main .typography pre {
  overflow-x: scroll;
  background-color: var(--color-accent-100);
  grid-column: wide-start / wide-end;
  padding: var(--spacing-md);
}

@media screen and (min-width: 820px) {
  main .typography pre {
    grid-column: content-start / content-end;
    border-radius: var(--border-radius);
  }
}

main .typography p {
  color: var(--color-accent-900);
}

main .typography p img {
  text-align: center;
  max-width: 100%;
}

main .typography p svg {
  text-align: center;
  max-width: 100%;
}

main .typography p a {
  text-decoration-thickness: 1px;
  color: var(--color-accent-600);
  transition: text-decoration-thickness 50ms ease-out;
}

main .typography p a:active {
  text-decoration-thickness: 3px;
  color: var(--color-accent-500);
}

main .typography p a:hover {
  text-decoration-thickness: 3px;
  color: var(--color-accent-500);
}

main .typography p a:link {
  text-decoration-thickness: 1px;
  color: var(--color-accent-600);
  transition: text-decoration-thickness 50ms ease-out;
}

main .typography p a:link:active {
  text-decoration-thickness: 3px;
  color: var(--color-accent-500);
}

main .typography p a:link:hover {
  text-decoration-thickness: 3px;
  color: var(--color-accent-500);
}

main .typography p a:visited {
  text-decoration-thickness: 1px;
  color: var(--color-accent-600);
  transition: text-decoration-thickness 50ms ease-out;
}

main .typography p a:visited:active {
  text-decoration-thickness: 3px;
  color: var(--color-accent-500);
}

main .typography p a:visited:hover {
  text-decoration-thickness: 3px;
  color: var(--color-accent-500);
}

footer {
  display: grid;
  grid-column: full-start / full-end;
  grid-template-columns: subgrid;
  color: var(--color-accent-d950);
  background-color: var(--color-accent-d200);
  padding: var(--spacing-xl) 0;
}

footer .footer-content {
  grid-column: content-start / content-end;
  display: flex;
  flex-direction: column;
}

footer .footer-content .title {
  display: flex;
  align-items:  center;
  gap: var(--spacing-icon);
  font-weight: 700;
}

footer .footer-content .byline {
  color: var(--color-accent-d800);
}

footer .footer-content .copyright {
  margin-top: var(--spacing-md);
  cursor: default;
  color: var(--color-accent-d700);
  font-size: .8rem;
}

.mobile.nav {
  grid-column: nav-start / nav-end;
  display: flex;
  justify-content: stretch;
  gap: var(--spacing-xs);
  background-color: oklch(from var(--color-accent-50) l c h / 80%);
  border: 1px solid oklch(from var(--color-accent-200) l c h / 85%);
  backdrop-filter: blur(var(--blur-radius));
  padding: calc(var(--spacing-sm) / 2);
  position: sticky;
  bottom: var(--spacing-sm);
  border-radius: 9999px;
}

@media screen and (min-width: 820px) {
  .mobile.nav {
    display: none;
  }
}

.mobile.nav a {
  display: flex;
  justify-content: center;
  gap: var(--spacing-icon);
  color: inherit;
  text-decoration: none;
  padding: calc(var(--spacing-sm) / 2) var(--spacing-sm);
  border-radius: 9999px;
  flex-grow: 1;
  transition: background-color .1s ease-out;
  font-weight: 600;
}

.mobile.nav a:hover {
  background-color: var(--color-accent-100);
}

.mobile.nav a.viewing {
  background-color: var(--color-accent-200);
}

.mobile.nav a:active {
  background-color: var(--color-accent-200);
}

.mobile.nav a .icon {
  color: var(--color-accent-600);
}

.mobile.nav a:link {
  display: flex;
  justify-content: center;
  gap: var(--spacing-icon);
  color: inherit;
  text-decoration: none;
  padding: calc(var(--spacing-sm) / 2) var(--spacing-sm);
  border-radius: 9999px;
  flex-grow: 1;
  transition: background-color .1s ease-out;
  font-weight: 600;
}

.mobile.nav a:link:hover {
  background-color: var(--color-accent-100);
}

.mobile.nav a:link.viewing {
  background-color: var(--color-accent-200);
}

.mobile.nav a:link:active {
  background-color: var(--color-accent-200);
}

.mobile.nav a:link .icon {
  color: var(--color-accent-600);
}

.mobile.nav a:visited {
  display: flex;
  justify-content: center;
  gap: var(--spacing-icon);
  color: inherit;
  text-decoration: none;
  padding: calc(var(--spacing-sm) / 2) var(--spacing-sm);
  border-radius: 9999px;
  flex-grow: 1;
  transition: background-color .1s ease-out;
  font-weight: 600;
}

.mobile.nav a:visited:hover {
  background-color: var(--color-accent-100);
}

.mobile.nav a:visited.viewing {
  background-color: var(--color-accent-200);
}

.mobile.nav a:visited:active {
  background-color: var(--color-accent-200);
}

.mobile.nav a:visited .icon {
  color: var(--color-accent-600);
}

.mobile.nav a:active {
  display: flex;
  justify-content: center;
  gap: var(--spacing-icon);
  color: inherit;
  text-decoration: none;
  padding: calc(var(--spacing-sm) / 2) var(--spacing-sm);
  border-radius: 9999px;
  flex-grow: 1;
  transition: background-color .1s ease-out;
  font-weight: 600;
}

.mobile.nav a:active:hover {
  background-color: var(--color-accent-100);
}

.mobile.nav a:active.viewing {
  background-color: var(--color-accent-200);
}

.mobile.nav a:active:active {
  background-color: var(--color-accent-200);
}

.mobile.nav a:active .icon {
  color: var(--color-accent-600);
}

.mobile.nav a:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}

.nav a .lucide-signpost .animate-path {
  transform-origin: 50%;
  transition: transform .2s ease-out;
}

.nav a .lucide-notebook-pen .animate-path {
  transform-origin: 50%;
  transition: transform .1s ease-out;
}

.nav a .lucide-user .animate-head {
  transition: all .1s ease-out;
}

.nav a .lucide-user .animate-hair {
  opacity: 0;
  transition: all .1s ease-out;
}

.nav a:hover .lucide-signpost .animate-path {
  transform: rotateY(-180deg);
}

.nav a:hover .lucide-notebook-pen .animate-path {
  transform: translate(-2px, 2px);
}

.nav a:hover .lucide-user .animate-head {
  cy: 8px;
}

.nav a:hover .lucide-user .animate-hair {
  r: 5px;
  cy: 6px;
  opacity: 1;
}