@font-face {
  font-family: Poppins;
  src: url("assets/fonts/poppins-400.woff2") format("woff2");
  font-display: swap;
}

:root {
  --page: #fff;
  --ink: #111;
  --muted: #969696;
  --link: #777;
  --tooltip-bg: #171717;
  --tooltip-fg: #fff;
}

:root[data-theme="dark"] {
  --page: #171717;
  --ink: #f3f1ed;
  --muted: #9a9a9a;
  --link: #b3b0ab;
  --tooltip-bg: #f3f1ed;
  --tooltip-fg: #171717;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #171717;
    --ink: #f3f1ed;
    --muted: #9a9a9a;
    --link: #b3b0ab;
    --tooltip-bg: #f3f1ed;
    --tooltip-fg: #171717;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Poppins, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  transition: background-color .45s ease, color .45s ease;
}

h1,
.location,
.projects-toggle,
.project-list a,
.theme-toggle { transition: color .45s ease; }

.theme-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  height: 38px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 32px;
  top: 0;
  touch-action: manipulation;
  transition: background-color .3s ease, color .45s ease, transform .3s ease;
  user-select: none;
  -webkit-touch-callout: none;
  width: 38px;
  z-index: 3;
}

.theme-toggle:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); transform: rotate(12deg); }
.theme-toggle.is-auto-flash { animation: theme-auto-pulse .55s ease-out; }

@keyframes theme-auto-pulse {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 30%, transparent); }
  to { box-shadow: 0 0 0 14px transparent; }
}

.theme-icon { height: 18px; position: absolute; width: 18px; transition: opacity .3s ease, transform .35s ease; }
.icon-sun { opacity: 0; transform: scale(.6) rotate(-90deg); }
.icon-moon { opacity: 1; transform: scale(1) rotate(0); }
:root[data-theme="dark"] .icon-sun { opacity: 1; transform: scale(1) rotate(0); }
:root[data-theme="dark"] .icon-moon { opacity: 0; transform: scale(.6) rotate(90deg); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { opacity: 1; transform: scale(1) rotate(0); }
  :root:not([data-theme="light"]) .icon-moon { opacity: 0; transform: scale(.6) rotate(90deg); }
}

main {
  width: min(640px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(150px, 19vh, 250px) 0 120px;
}

header { margin-bottom: 20px; position: relative; }

.art-credit {
  display: inline-block;
  margin: 0 0 13px;
  position: relative;
}

.art-link { display: block; width: fit-content; }

.qifrey {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: contain;
  image-rendering: pixelated;
  margin: 0;
  animation: float 4s ease-in-out infinite;
}

.tooltip {
  align-items: center;
  background: var(--tooltip-bg);
  border-radius: 999px;
  color: var(--tooltip-fg);
  display: flex;
  font-size: 12px;
  gap: 4px;
  left: var(--cursor-x, calc(100% + 12px));
  line-height: 1;
  opacity: 0;
  padding: 9px 12px;
  pointer-events: none;
  position: absolute;
  top: var(--cursor-y, 50%);
  transform: translate(14px, 14px);
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
  z-index: 1;
}

.tooltip a { color: var(--tooltip-fg); text-decoration: underline; text-underline-offset: 2px; }

.art-credit.is-pointer .tooltip {
  opacity: 1;
  pointer-events: auto;
}

h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}

.location {
  margin: 0;
  color: var(--muted);
}

.country-wrap { position: relative; width: fit-content; }
.country-trigger { cursor: default; }

.country-cards {
  height: 120px;
  left: calc(100% + 22px);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%) scale(.94);
  transition: opacity .22s ease, transform .22s ease;
  width: 172px;
  z-index: 2;
}

.country-card {
  background: var(--page);
  border: 4px solid var(--page);
  border-radius: 14px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
  height: 92px;
  object-fit: cover;
  position: absolute;
  transition: transform .25s ease;
  width: 132px;
}

.country-card-one { left: 0; top: 0; transform: rotate(-8deg); z-index: 3; }
.country-card-two { left: 20px; top: 13px; transform: rotate(3deg); z-index: 2; }
.country-card-three { left: 40px; top: 26px; transform: rotate(10deg); z-index: 1; }
.country-wrap:hover .country-cards,
.country-wrap:focus-within .country-cards { opacity: 1; pointer-events: auto; transform: translate(0, -50%) scale(1); }
.country-wrap:hover .country-card-one,
.country-wrap:focus-within .country-card-one { transform: translate(-5px, -4px) rotate(-8deg); }
.country-wrap:hover .country-card-two,
.country-wrap:focus-within .country-card-two { transform: translate(0, 0) rotate(3deg); }
.country-wrap:hover .country-card-three,
.country-wrap:focus-within .country-card-three { transform: translate(5px, 4px) rotate(10deg); }

section { max-width: 620px; }

section p { margin: 0 0 12px; }

.quote {
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

.quote p { font-style: italic; }

.quote footer {
  color: var(--muted);
  font-size: 14px;
}

.quote cite { font-style: normal; }

.projects {
  margin-top: 28px;
  width: fit-content;
}

.projects-toggle {
  appearance: none;
  background: none;
  border: 0;
  color: var(--link);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  padding: 0;
  text-align: left;
  list-style: none;
  transition: color .45s ease;
  user-select: none;
}

.projects-toggle span { display: inline-block; margin-left: 5px; transition: transform .22s ease; }
.projects-toggle[aria-expanded="true"] { color: var(--ink); }
.projects-toggle[aria-expanded="true"] span { transform: rotate(45deg); }

.project-list {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows .28s ease, opacity .2s ease;
}

.projects-toggle[aria-expanded="true"] + .project-list {
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: visible;
}

.project-list > div {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding-top: 0;
  transition: padding-top .28s ease;
}

.project-item {
  --logo-shift: 2px;
  --logo-tilt: 3deg;
  position: relative;
  width: fit-content;
}

.project-item:nth-child(2) { --logo-shift: -2px; --logo-tilt: -4deg; }
.project-item:nth-child(3) { --logo-shift: 3px; --logo-tilt: 6deg; }
.project-item:nth-child(4) { --logo-shift: -1px; --logo-tilt: -6deg; }
.project-item:nth-child(5) { --logo-shift: 4px; --logo-tilt: 2deg; }
.project-item:nth-child(6) { --logo-shift: -3px; --logo-tilt: 5deg; }
.project-item:nth-child(7) { --logo-shift: 1px; --logo-tilt: -3deg; }
.project-item:nth-child(8) { --logo-shift: -2px; --logo-tilt: 7deg; }
.project-item:nth-child(9) { --logo-shift: 3px; --logo-tilt: -5deg; }
.project-item:nth-child(10) { --logo-shift: -1px; --logo-tilt: 4deg; }
.project-item:nth-child(11) { --logo-shift: 2px; --logo-tilt: -7deg; }
.project-item:nth-child(12) { --logo-shift: -3px; --logo-tilt: 2deg; }

.projects-toggle[aria-expanded="true"] + .project-list > div { padding-top: 17px; }

.project-list a {
  color: var(--link);
  font-size: 14px;
  text-decoration: none;
  transition: color .45s ease, transform .18s ease;
}

.project-list span {
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: inherit;
  line-height: inherit;
  opacity: .55;
}

.project-logo {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  height: 54px;
  left: calc(100% + 8px);
  object-fit: contain;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-5px, -50%) scale(.86) rotate(var(--logo-tilt));
  transition: opacity .2s ease, transform .2s ease;
  width: 90px;
  z-index: 3;
}

.project-item:hover .project-logo,
.project-item:focus-within .project-logo {
  opacity: 1;
  transform: translate(var(--logo-shift), -50%) scale(1) rotate(var(--logo-tilt));
}

.project-preview {
  height: 66px;
  left: calc(100% + 8px);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-5px, -50%) scale(.86);
  transition: opacity .2s ease, transform .2s ease;
  width: 108px;
  z-index: 3;
}

.project-soon-tag {
  align-items: center;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--ink) 20%, transparent);
  color: var(--page);
  display: flex;
  font-size: 10px;
  font-weight: 500;
  height: 22px;
  justify-content: center;
  letter-spacing: .04em;
  line-height: 1;
  position: absolute;
  right: -4px;
  top: -5px;
  transform: rotate(5deg);
  width: 44px;
  z-index: 4;
}

.project-item-soon .project-logo {
  left: 0;
  opacity: 1;
  top: 0;
  transform: rotate(var(--logo-tilt));
}

.project-item-soon:hover .project-preview,
.project-item-soon:focus-within .project-preview {
  opacity: 1;
  transform: translate(var(--logo-shift), -50%) scale(1);
}

.project-item-soon:hover .project-logo,
.project-item-soon:focus-within .project-logo {
  transform: translate(-3px, -2px) rotate(var(--logo-tilt));
}

.project-list a:hover,
.project-list a:focus-visible { color: var(--ink); transform: translateX(3px); }

.tools,
.notes { margin-top: 8px; }

.section-title,
.tools-toggle,
.notes-toggle {
  color: var(--link);
  font-size: 14px;
  font-weight: 400;
}

.section-title { margin: 0 0 14px; }

.tools-toggle {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-align: left;
  transition: color .45s ease;
  user-select: none;
}

.notes-toggle {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-align: left;
  transition: color .45s ease;
  user-select: none;
}

.tools-toggle span { display: inline-block; margin-left: 5px; transition: transform .22s ease; }
.tools-toggle[aria-expanded="true"] { color: var(--ink); }
.tools-toggle[aria-expanded="true"] span { transform: rotate(45deg); }

.notes-toggle span { display: inline-block; margin-left: 5px; transition: transform .22s ease; }
.notes-toggle[aria-expanded="true"] { color: var(--ink); }
.notes-toggle[aria-expanded="true"] span { transform: rotate(45deg); }

.tool-list {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows .28s ease, opacity .2s ease;
}

.tools-toggle[aria-expanded="true"] + .tool-list {
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: visible;
}

.tool-list-inner {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding-top: 0;
  transition: padding-top .28s ease;
}

.tools-toggle[aria-expanded="true"] + .tool-list .tool-list-inner { padding-top: 14px; }
.tool-item { --tool-tilt: 3deg; position: relative; width: fit-content; }
.tool-item:nth-child(2) { --tool-tilt: -4deg; }
.tool-item:nth-child(3) { --tool-tilt: 5deg; }
.tool-item:nth-child(4) { --tool-tilt: -3deg; }
.tool-item:nth-child(5) { --tool-tilt: 4deg; }
.tool-item:nth-child(6) { --tool-tilt: -5deg; }
.tool-item:nth-child(7) { --tool-tilt: 2deg; }
.tool-item > a { color: var(--link); font-size: 14px; text-decoration: none; transition: color .45s ease; }
.tool-item > a:hover,
.tool-item > a:focus-visible { color: var(--ink); }


.tool-preview {
  background: var(--page);
  border-radius: 15px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 15%, transparent);
  height: 112px;
  left: calc(100% + 12px);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%) scale(.92) rotate(var(--tool-tilt));
  transform-origin: left center;
  transition: opacity .22s ease, transform .22s ease;
  width: 206px;
  z-index: 3;
}

.tool-item:hover .tool-preview,
.tool-item:focus-within .tool-preview { opacity: 1; pointer-events: auto; transform: translate(0, -50%) scale(1) rotate(var(--tool-tilt)); }
.window-bar { align-items: center; background: color-mix(in srgb, var(--ink) 7%, var(--page)); color: var(--muted); display: flex; gap: 4px; height: 25px; padding: 0 9px; }
.window-bar i { background: var(--muted); border-radius: 50%; height: 5px; opacity: .65; width: 5px; }
.window-bar span { font-size: 8px; margin-left: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-body { background: color-mix(in srgb, var(--tool-accent, var(--link)) 13%, var(--page)); color: var(--ink); display: flex; flex-direction: column; height: calc(100% - 25px); justify-content: center; padding: 13px 15px; }
.window-body strong { font-size: 18px; font-weight: 400; letter-spacing: -.04em; }
.window-body small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.window-body b { color: var(--tool-accent, var(--link)); font-size: 10px; font-weight: 400; margin-top: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="dark"] .window-body { background: color-mix(in srgb, var(--tool-accent, var(--link)) 22%, var(--page)); }
:root[data-theme="dark"] .window-body b { color: color-mix(in srgb, var(--tool-accent, var(--link)) 55%, #fff); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .window-body { background: color-mix(in srgb, var(--tool-accent, var(--link)) 22%, var(--page)); }
  :root:not([data-theme="light"]) .window-body b { color: color-mix(in srgb, var(--tool-accent, var(--link)) 55%, #fff); }
}
.tool-alcove { --tool-accent: #7652b8; }
.tool-raycast { --tool-accent: #d74444; }
.tool-obsidian { --tool-accent: #7458c2; }
.tool-anki { --tool-accent: #227aa6; }
.tool-excalidraw { --tool-accent: #2f9567; }
.tool-figma { --tool-accent: #d94d62; }
.tool-chatgpt { --tool-accent: #357bc4; }

.notes-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows .28s ease, opacity .2s ease;
}

.notes-toggle[aria-expanded="true"] + .notes-content {
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: visible;
}

.notes-categories {
  display: grid;
  gap: 18px;
  min-height: 0;
  padding-top: 0;
  transition: padding-top .28s ease;
}

.notes-toggle[aria-expanded="true"] + .notes-content .notes-categories { padding-top: 14px; }

.notes-category h3 {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  margin: 0 0 7px;
}

.note-list { display: grid; gap: 7px; }
.note-item { --note-tilt: 3deg; position: relative; width: fit-content; }
.note-item:nth-child(2) { --note-tilt: -4deg; }
.note-trigger {
  appearance: none;
  background: none;
  border: 0;
  color: var(--link);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  padding: 0;
  text-align: left;
  transition: color .45s ease, transform .18s ease;
}

.note-trigger:hover,
.note-trigger:focus-visible { color: var(--ink); transform: translateX(3px); }

.note-preview {
  height: 154px;
  left: calc(100% + 14px);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%) scale(.92) rotate(var(--note-tilt));
  transition: opacity .22s ease, transform .22s ease;
  width: 112px;
  z-index: 4;
}

.note-item:hover .note-preview,
.note-item:focus-within .note-preview {
  opacity: 1;
  transform: translate(0, -50%) scale(1) rotate(var(--note-tilt));
}

.note-card {
  background: var(--page);
  border-radius: 14px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
  height: 154px;
  overflow: hidden;
  padding: 8px;
  position: absolute;
  width: 112px;
}

.note-card img {
  border-radius: 8px;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.note-card-front { left: 0; top: 0; }
.note-preview-stack .note-card-one { left: 0; top: 0; transform: rotate(-8deg); z-index: 3; }
.note-preview-stack .note-card-two { left: 17px; top: 10px; transform: rotate(3deg); z-index: 2; }
.note-preview-stack .note-card-three { left: 34px; top: 20px; transform: rotate(10deg); z-index: 1; }
.note-item:hover .note-preview-stack .note-card-one,
.note-item:focus-within .note-preview-stack .note-card-one { transform: translate(-4px, -3px) rotate(-8deg); }
.note-item:hover .note-preview-stack .note-card-two,
.note-item:focus-within .note-preview-stack .note-card-two { transform: translate(0, 0) rotate(3deg); }
.note-item:hover .note-preview-stack .note-card-three,
.note-item:focus-within .note-preview-stack .note-card-three { transform: translate(4px, 3px) rotate(10deg); }

.notes-empty {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.note-modal {
  background: var(--page);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 60px color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--ink);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px;
  position: relative;
  width: min(640px, calc(100% - 48px));
}

.note-modal::backdrop { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.note-modal[open] { animation: note-modal-in .18s ease both; }
.note-modal-close {
  appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  padding: 2px 5px;
  position: absolute;
  right: 15px;
  top: 13px;
}

.note-modal-close:hover,
.note-modal-close:focus-visible { color: var(--ink); }
.note-modal-media { margin: 0 0 22px; }

.note-modal-card {
  background: var(--page);
  border-radius: 14px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
  display: block;
  height: 190px;
  overflow: hidden;
  padding: 8px;
  width: 140px;
}

.note-modal-card img {
  border-radius: 8px;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.note-modal-card.is-single { margin-left: 4px; transform: rotate(-2deg); }

.note-modal-stack {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  height: 216px;
  padding: 0;
  position: relative;
  width: 182px;
}

.note-modal-stack .note-modal-card { position: absolute; transition: transform .22s ease; }
.note-modal-stack .note-modal-card-one { left: 4px; top: 0; transform: rotate(-2deg); z-index: 3; }
.note-modal-stack .note-modal-card-two { left: 22px; top: 12px; transform: rotate(4deg); z-index: 2; }
.note-modal-stack .note-modal-card-three { left: 40px; top: 24px; transform: rotate(9deg); z-index: 1; }
.note-modal-stack:hover .note-modal-card-one,
.note-modal-stack:focus-visible .note-modal-card-one { transform: translate(-4px, -3px) rotate(-4deg); }
.note-modal-stack:hover .note-modal-card-two,
.note-modal-stack:focus-visible .note-modal-card-two { transform: translate(3px, 2px) rotate(5deg); }
.note-modal-stack:hover .note-modal-card-three,
.note-modal-stack:focus-visible .note-modal-card-three { transform: translate(9px, 6px) rotate(11deg); }
.note-modal-stack.is-turning .note-modal-card-one { animation: note-card-turn .28s ease; }

.note-modal-count { color: var(--muted); display: block; font-size: 12px; margin-top: 6px; }

@keyframes note-card-turn {
  from { opacity: .35; transform: translate(10px, 6px) rotate(6deg) scale(.96); }
  to { opacity: 1; }
}

[hidden] { display: none !important; }

.note-stars { color: var(--ink); display: inline-flex; gap: 3px; }
.star-icon { height: 15px; width: 15px; }
.note-modal-stars { margin: -8px 0 14px; }

.note-modal-meta { color: var(--muted); font-size: 12px; margin: 0 0 3px; }
.note-modal h2 { font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0 0 14px; }
.note-modal-review { font-size: 14px; line-height: 1.65; margin: 0; }
.note-modal-review p { margin: 0 0 12px; }
.note-modal-review p:last-child { margin-bottom: 0; }

@keyframes note-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(6px); }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  main { padding-top: 120px; }
  header { margin-bottom: 18px; }
  .qifrey { width: 120px; height: 120px; }
  .theme-toggle { right: 0; top: 0; }
  .tooltip {
    left: var(--cursor-x, 50%);
    top: var(--cursor-y, calc(100% + 8px));
    transform: translate(14px, 14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qifrey { animation: none; }
  .theme-toggle.is-auto-flash { animation: none; }
  .note-modal-stack.is-turning .note-modal-card-one { animation: none; }
  .project-list,
  .project-list > div,
  .projects-toggle,
  .projects-toggle span,
  .tools-toggle,
  .tools-toggle span,
  .notes-toggle,
  .notes-toggle span,
  .notes-content,
  .notes-categories,
  .note-trigger,
  .note-preview,
  .note-card,
  .note-modal-card,
  .note-modal,
  .tooltip,
  .project-logo,
  .country-cards,
  .country-card,
  .tool-preview,
  .tool-list,
  .tool-list-inner,
  .elsewhere a { transition: none; }
}

.elsewhere {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
  --elsewhere-transition: .75s ease-in-out;
}

.elsewhere a {
  align-items: center;
  color: var(--link);
  display: inline-flex;
  flex-direction: row;
  font-size: 13px;
  gap: 7px;
  height: 24px;
  justify-content: center;
  min-width: 24px;
  overflow: hidden;
  text-decoration: none;
  transition: color .45s ease, width var(--elsewhere-transition);
  width: 24px;
}

.elsewhere a:nth-child(1) { --expanded-width: 61px; --label-width: 37px; }
.elsewhere a:nth-child(2) { --expanded-width: 104px; --label-width: 80px; }
.elsewhere a:nth-child(3) { --expanded-width: 72px; --label-width: 48px; }

.elsewhere svg {
  display: block;
  font-size: 17px;
  flex: none;
}

.elsewhere a span {
  font-size: 11px;
  line-height: 1;
  max-width: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-width var(--elsewhere-transition), opacity var(--elsewhere-transition);
  visibility: hidden;
  white-space: nowrap;
}

.elsewhere a:hover,
.elsewhere a:focus-visible {
  color: var(--ink);
  width: var(--expanded-width);
}

.elsewhere a:hover span,
.elsewhere a:focus-visible span {
  max-width: var(--label-width);
  opacity: 1;
  visibility: visible;
}