@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Paper and ink, set in one code face. The only colour is the art itself and PFP mint for whatever is live:
   the cursor, a hovered row, a copied link. */
:root {
  --bg: #f5f4f0;
  --surface: #ffffff;
  --ink: #121212;
  --ink-2: #45464a;
  --ink-3: #6b6c70;
  --line: rgb(18 18 18 / 0.1);
  --line-strong: rgb(18 18 18 / 0.18);
  --mint: #2ff0b8;
  --mint-wash: rgb(47 240 184 / 0.16);
  --mint-ink: #04392a;
  --verified: #1d9bf0;
  --html: #e34c26;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.45, 0.64, 1);
  --shadow-1: 0 0 0 1px rgb(18 18 18 / 0.06), 0 1px 2px rgb(18 18 18 / 0.04), 0 10px 24px -14px rgb(18 18 18 / 0.22);
  --shadow-print: 0 0 0 1px rgb(18 18 18 / 0.05), 0 2px 4px rgb(18 18 18 / 0.05), 0 24px 44px -22px rgb(18 18 18 / 0.45);
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --col: 720px;
  --gutter: 24px;
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  scrollbar-color: #bdbcb7 transparent;
  scroll-behavior: smooth;
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.7 var(--mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--ink);
  overflow-x: clip;
}

::selection { background: var(--mint); color: var(--mint-ink); }

[hidden] { display: none !important; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ic { width: 16px; height: 16px; flex: none; }

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 6px;
  z-index: 20;
}
.skip:focus { top: 16px; }

/* Backdrop: paper grain, and a dot grid like a notebook page that fades out under the header. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgb(18 18 18 / 0.13) 1px, transparent 1.3px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to bottom, #000, transparent 420px);
}
.grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.07 0 0 0 0 0.07 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
}

.shell { width: min(var(--col), 100% - 2 * var(--gutter)); margin: 0 auto; }

/* Top bar: where you are, as a path, and the two places you can go. */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.crumbs { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { text-decoration: none; }
.crumbs a:not(.logo):hover { text-decoration: underline; }
.crumb-sep { padding: 0 8px; color: var(--ink-3); }
[data-crumb] { color: var(--ink-3); }

/* The logo: the penguin's mint visor and gold beak on a dark tile, then the name. The tile tips a few degrees on hover. */
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo-mark { width: 28px; height: 28px; flex: none; border-radius: 8px; box-shadow: 0 1px 2px rgb(18 18 18 / 0.2), 0 6px 14px -8px rgb(18 18 18 / 0.5); transition: rotate 380ms var(--ease-bounce); }
.logo-word { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.logo:hover .logo-mark { rotate: -8deg; }
.logo:active .logo-mark { rotate: -4deg; scale: 0.96; }
.nav { display: flex; align-self: stretch; gap: 22px; }
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 160ms ease;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--ink); }
.nav-mark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  view-transition-name: nav-mark;
}

/* Buttons: square-ish keys, the way a terminal draws them. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 0 rgb(18 18 18 / 0.06);
  font: 500 13px/1 var(--mono);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease;
}
.btn .ic { width: 14px; height: 14px; }
.btn:hover { box-shadow: inset 0 0 0 1px rgb(18 18 18 / 0.3), 0 4px 10px -6px rgb(18 18 18 / 0.3); }
.btn:active { transform: scale(0.96); }
.btn-primary,
.btn-ink { background: var(--ink); color: var(--bg); box-shadow: 0 1px 0 rgb(18 18 18 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.12); }
.btn-primary:hover,
.btn-ink:hover { background: #2b2b2e; box-shadow: 0 6px 14px -8px rgb(18 18 18 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.12); }
.btn.is-off { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.btn.is-off:active { transform: none; }
.btn-ink.is-off { background: transparent; color: var(--ink-3); }

.btn[data-copied] { background: var(--mint); color: var(--mint-ink); box-shadow: none; }

.copy-icons { position: relative; width: 14px; height: 14px; flex: none; }
.copy-icons .ic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1), filter 200ms cubic-bezier(0.2, 0, 0, 1);
}
.copy-icons .i-check { opacity: 0; transform: scale(0.25); filter: blur(4px); }
[data-copied] .copy-icons .i-copy { opacity: 0; transform: scale(0.25); filter: blur(4px); }
[data-copied] .copy-icons .i-check { opacity: 1; transform: none; filter: none; }

/* Hero: the banner as a print, the round PFP hanging off its lower-left edge, name beside it, contact keys on the right. */

.hero { padding-top: 32px; }
.banner {
  position: relative;
  aspect-ratio: 3 / 1;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #d8dad6;
  box-shadow: var(--shadow-1);
}
.banner img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; object-position: center 40%; }
.banner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(18 18 18 / 0.08); pointer-events: none; }

.id {
  --size: 112px;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-top: calc(var(--size) * -0.4);
  padding-left: 22px;
}
/* The ring is PFP mint, held a few pixels off the picture by a band of paper. */
.avatar {
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5.5px var(--mint), 0 18px 36px -16px rgb(18 18 18 / 0.45);
}
/* Name and keys hang from the banner's lower edge rather than sitting on the PFP's baseline, so they never touch the picture. */
.id-name { flex: 1; min-width: 0; align-self: flex-start; margin-top: calc(var(--size) * 0.4 + 10px); }
.id-name h1 { display: flex; align-items: center; gap: 8px; font-size: 30px; line-height: 1.1; letter-spacing: -0.03em; }
.verified { width: 22px; height: 22px; color: var(--verified); flex: none; }
.handle { color: var(--ink-3); font-size: 14px; }

.links { display: flex; gap: 8px; align-self: flex-start; margin-top: calc(var(--size) * 0.4 + 14px); }
.key {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 0 rgb(18 18 18 / 0.06);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out), box-shadow 160ms ease;
}
.key .ic { width: 18px; height: 18px; }
.key:hover { background: var(--ink); color: var(--bg); box-shadow: 0 6px 14px -8px rgb(18 18 18 / 0.6); }
.key:active { transform: scale(0.96); }
.key.is-off { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.key.is-off:hover { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.key.is-off:active { transform: none; }

/* whoami: a prompt, the bio typed out after it, then the profile as key and value. */

.whoami { margin-top: 40px; }
.prompt { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 14px; }
/* Every section is marked by its own icon rather than one shared glyph. */
/* Nudged down 1px: lowercase labels sit below the middle of the line box, so a centred icon reads high. */
.sec-ic { width: 16px; height: 16px; flex: none; color: var(--mint-ink); translate: 0 1px; }
.section-head h2,
.readme h2 { display: flex; align-items: center; gap: 8px; }
.section-head h2 .sec-ic,
.readme h2 .sec-ic { width: 17px; height: 17px; }
.ps1 { color: var(--mint-ink); font-weight: 600; }
.ps1::selection { color: var(--mint-ink); }
.bio { position: relative; margin-top: 6px; font-size: 16px; line-height: 1.75; color: var(--ink); }
.bio.is-typing .bio-text { color: transparent; }
.whoami .prompt + .about,
.whoami .prompt + .hobbies { margin-top: 6px; }
.whoami .bio + .prompt,
.whoami .about + .prompt { margin-top: 22px; }
.about { display: grid; gap: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.8; max-width: 66ch; }

.hobbies { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hobbies li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 10px;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.7);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px;
}
.hobbies .ic { width: 16px; height: 16px; color: var(--ink-2); }
.bio-typed { position: absolute; inset: 0; }

.kv {
  display: grid;
  gap: 4px;
  margin: 24px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.6);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
}
.kv > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.kv dt { color: var(--ink-3); }
.kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.kv strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.comment { color: var(--ink-3); }
.site-link a { font-weight: 500; text-decoration-color: var(--mint); text-decoration-thickness: 2px; }
.site-link a:hover { text-decoration-color: var(--ink); }
.copy-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
/* The visible square stays small; the hit area does not. */
.copy-link::after { content: ""; position: absolute; inset: -8px; }
.copy-link .copy-icons { width: 13px; height: 13px; }
.copy-link:hover { color: var(--ink); background: var(--surface); }
.copy-link:active { transform: scale(0.96); }
.copy-link[data-copied] { color: var(--mint-ink); background: var(--mint); box-shadow: none; }

/* Sections: a hairline, then a markdown heading. */

.section { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-head h2 { font-size: 16px; }
.hash { color: var(--ink-3); font-weight: 400; }

/* Repos: a square icon, the name in bold, one line about it. A repo opens in place into its features and
   screenshots; the panel grows from nothing to its own height and the contents rise in after it. */

.repos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.repo {
  border-radius: 14px;
  background: rgb(255 255 255 / 0.7);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.repo:hover,
.repo.is-open { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), 0 12px 28px -18px rgb(18 18 18 / 0.35); }
.repo-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px 12px 12px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.repo-head:focus-visible { outline-offset: -2px; border-radius: 14px; }
.repo-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--mint);
  box-shadow: inset 0 0 0 1px rgb(18 18 18 / 0.08);
}
.repo-monogram { display: grid; place-items: center; color: var(--mint-ink); font-size: 20px; font-weight: 700; }
.repo-text { display: flex; flex-direction: column; min-width: 0; }
.repo-title { font-size: 15px; font-weight: 700; line-height: 1.4; }
.repo-desc { overflow: hidden; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }
.repo-side { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.repo-chevron { width: 16px; height: 16px; color: var(--ink-3); transition: transform 360ms var(--ease-out), color 160ms ease; }
.repo-head:hover .repo-chevron { color: var(--ink); }
.repo.is-open .repo-chevron { transform: rotate(180deg); color: var(--ink); }

.repo-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-out); }
.repo.is-open .repo-panel { grid-template-rows: 1fr; }
.repo-panel-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 16px 0 74px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 240ms ease, transform 420ms var(--ease-out), padding-bottom 420ms var(--ease-out);
}
.repo.is-open .repo-panel-inner { padding-bottom: 18px; opacity: 1; transform: none; transition-delay: 60ms, 60ms, 0ms; }

.features { display: grid; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 14px; }
.features li { display: grid; grid-template-columns: 18px minmax(0, 1fr); }
.features li::before { content: "+"; color: var(--mint-ink); font-weight: 600; }

.repo-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.repo-shots a { display: block; padding: 4px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1); transition: transform 220ms var(--ease-out), box-shadow 220ms ease; }
.repo-shots a:hover { transform: translateY(-2px); box-shadow: var(--shadow-print); }
.repo-shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 7px; }

.repo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.repo-loading { height: 74px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.state { margin-top: 12px; color: var(--ink-2); font-size: 14px; }
.dot { width: 8px; height: 8px; border-radius: 2px; background: var(--html); }

/* On first paint the repos rise in one after another. */
.js-motion .repo { animation: rise 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* Donate: one card per chain with its QR code, the full address always visible so it can be checked by eye. */
.heart { width: 15px; height: 15px; margin-left: 4px; color: #e5484d; vertical-align: -2px; transition: scale 260ms var(--ease-bounce); }
main:has(.wallet:hover) .heart { scale: 1.2; }
.heart-lg { width: 28px; height: 28px; margin-left: 0; vertical-align: -2px; }

.wallets { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* A wallet row opens its receive card from anywhere on the row; the copy key sits above that and copies at once. */
.wallet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 12px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.7);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.wallet:hover,
.wallet:has(.wallet-main:focus-visible) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), 0 12px 28px -18px rgb(18 18 18 / 0.35); }
.wallet-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wallet-main::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.wallet-main:focus-visible { outline: none; }
.wallet:has(.wallet-main:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.wallet-copy { position: relative; z-index: 2; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 10px; }
.wallet-copy .copy-icons { width: 16px; height: 16px; }
.wallet-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.wallet-icon .ic { width: 20px; height: 20px; }
.wallet-text { display: grid; min-width: 0; }
.wallet-name { font-size: 15px; font-weight: 700; }
.wallet-address { color: var(--ink-3); font-size: 13px; }
.wallet-open { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--ink-3); transition: background-color 160ms ease, color 160ms ease; }
.wallet-open .ic { width: 18px; height: 18px; }
.wallet:has(.wallet-main:hover) .wallet-open { background: var(--ink); color: var(--bg); }

/* Receive sheet: a wallet-style card in the middle of the screen over a dimmed page. It is a popover, so a click
   on the dark area, the close key or Escape dismisses it without any script. */
.receive {
  width: min(360px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 18px 20px 20px;
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgb(18 18 18 / 0.06), 0 40px 90px -24px rgb(0 0 0 / 0.55);
  text-align: center;
  opacity: 1;
  transform: none;
  transition: opacity 180ms ease, transform 280ms var(--ease-out), overlay 280ms allow-discrete, display 280ms allow-discrete;
}
.receive:not(:popover-open) { opacity: 0; transform: translateY(10px) scale(0.96); }
@starting-style {
  .receive:popover-open { opacity: 0; transform: translateY(10px) scale(0.96); }
}
.receive::backdrop {
  background: rgb(10 10 12 / 0.55);
  backdrop-filter: blur(3px);
  transition: background-color 280ms ease, backdrop-filter 280ms ease, overlay 280ms allow-discrete, display 280ms allow-discrete;
}
.receive:not(:popover-open)::backdrop { background: rgb(10 10 12 / 0); backdrop-filter: blur(0); }
@starting-style {
  .receive:popover-open::backdrop { background: rgb(10 10 12 / 0); backdrop-filter: blur(0); }
}
html:has(.receive:popover-open) { overflow: hidden; }

.receive-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; }
.receive-head h2 { grid-column: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; }
.receive-head h2 .ic { width: 18px; height: 18px; }
.receive-close {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.receive-close::after { content: ""; position: absolute; inset: -4px; }
.receive-close:hover { background: rgb(18 18 18 / 0.06); color: var(--ink); }
.receive-close:active { transform: scale(0.94); }
.receive-close .ic { width: 18px; height: 18px; }

.receive-qr { position: relative; width: 232px; margin: 16px auto 0; padding: 8px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.receive-qr img { width: 100%; height: auto; image-rendering: pixelated; }
.receive-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 3px #fff, inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
}
.receive-badge .ic { width: 22px; height: 22px; }
.receive-label { margin-top: 16px; font-size: 14px; font-weight: 600; }
.receive-address {
  display: block;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 500 14px/1.6 var(--mono);
  overflow-wrap: anywhere;
  user-select: all;
}
.receive-copy { width: 100%; height: 44px; justify-content: center; margin-top: 12px; border-radius: 12px; font-size: 14px; }
.receive-copy[data-copied] { background: var(--mint); color: var(--mint-ink); }

/* Gallery: one row of white prints, tilted and dropped a little out of line, centred under the column and
   allowed to run wider than it. On arrival they fly out of a single stack, then each drifts at its own depth as
   the page scrolls. When the row is wider than the window it scrolls sideways, so it carries enough padding for
   the tilt, the drop and the shadow. */

.strip {
  --overlap: 22px;
  --bleed: calc(50vw - 50%);
  display: flex;
  margin: -24px calc(var(--bleed) * -1) -56px;
  padding: 48px var(--gutter) 88px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.frame {
  --py: calc(var(--p, 0) * var(--depth, 0.08) * 0.6px);
  position: relative;
  flex: 0 0 auto;
  width: 176px;
  padding: 5px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-print);
  translate: 0 calc(var(--dy, 0px) + var(--py));
  rotate: var(--rot, 0deg);
  scroll-snap-align: center;
  transition: translate 700ms var(--ease-out), rotate 450ms var(--ease-out), scale 450ms var(--ease-out), box-shadow 300ms ease;
}
.frame + .frame { margin-left: calc(var(--overlap) * -1); }
/* Auto margins centre the row while it fits and fall back to zero once it has to scroll. */
.frame:first-child { margin-left: auto; }
.frame:last-child { margin-right: auto; }
.frame img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; outline: 1px solid rgb(18 18 18 / 0.06); outline-offset: -1px; }
.frame:hover {
  z-index: 10;
  rotate: 0deg;
  scale: 1.08;
  translate: 0 calc(var(--dy, 0px) * 0.3 - 14px + var(--py));
  box-shadow: 0 0 0 1px rgb(18 18 18 / 0.06), 0 4px 8px rgb(18 18 18 / 0.05), 0 40px 64px -26px rgb(18 18 18 / 0.55);
}
.badge {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgb(18 18 18 / 0.8);
  color: #fff;
  font: 600 10px/1.5 var(--mono);
  letter-spacing: 0.04em;
}
.js-motion .strip:not(.is-in) .frame {
  opacity: 0;
  scale: 0.72;
  rotate: calc(var(--rot, 0deg) * -0.5);
  translate: var(--gx, 0px) 24px;
  transition: none;
}
.js-motion .strip.is-in:not(.is-settled) .frame {
  transition:
    translate 1150ms var(--ease-bounce) var(--delay, 0ms),
    rotate 1150ms var(--ease-bounce) var(--delay, 0ms),
    scale 900ms var(--ease-spring) var(--delay, 0ms),
    opacity 450ms ease var(--delay, 0ms);
}

/* Footer */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 80px;
  padding: 20px 0 36px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px;
}

/* Source page */

.page-head { padding: 48px 0 28px; }
.page-head h1 { margin-top: 6px; font-size: 40px; line-height: 1.1; letter-spacing: -0.04em; }
.page-sub { margin-top: 10px; color: var(--ink-2); }
.page-head .comment { margin-top: 6px; font-size: 13px; }
.page-head .comment:not(:empty)::before { content: "// "; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.search:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px var(--mono); color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 400 13px/1 var(--mono);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }

/* Repo review page: a README. */

.review-head { padding-top: 40px; }
.review-head h1 { margin-top: 6px; font-size: 40px; line-height: 1.1; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.tagline { margin-top: 12px; max-width: 60ch; color: var(--ink-2); font-size: 16px; }
.review-head .kv { margin-top: 20px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.shot {
  margin: 36px 0 0;
  padding: 6px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-print);
}
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 11px; outline: 1px solid rgb(18 18 18 / 0.06); outline-offset: -1px; }
.shot:empty { display: none; }

.readme { margin-top: 56px; }
.readme .lead { font-size: 16px; line-height: 1.8; }
.readme .block { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.readme h2 { margin-bottom: 12px; font-size: 16px; }
.readme .block p { color: var(--ink-2); }
.points { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); }
.points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); }
.points li::before { content: "+"; color: var(--mint-ink); font-weight: 600; }

.shots-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.shots-grid figure { margin: 0; }
.shots-grid a { display: block; padding: 5px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); transition: transform 220ms var(--ease-out), box-shadow 220ms ease; }
.shots-grid a:hover { transform: translateY(-2px); box-shadow: var(--shadow-print); }
.shots-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 8px; }
.shots-grid figcaption { margin-top: 8px; color: var(--ink-3); font-size: 13px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 13px; }

.code { position: relative; border-radius: 10px; background: var(--ink); color: #eeeeea; }
.code pre { margin: 0; padding: 18px 100px 18px 18px; overflow-x: auto; font: 14px/1.8 var(--mono); }
.code .line { display: block; }
.code .line::before { content: "$ "; color: var(--mint); }
.code pre::selection,
.code code::selection,
.code .line::selection { background: var(--mint); color: var(--ink); }
.copy {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.1);
  color: #eeeeea;
  font: 500 12px/1 var(--mono);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.copy:hover { background: rgb(255 255 255 / 0.18); }
.copy:active { transform: scale(0.96); }
.copy:focus-visible { outline-color: var(--mint); }
.copy .i-check { color: var(--mint); }

/* Entrance: the banner settles from a slow zoom. Without JS it is simply there. */
.js-motion .banner img { animation: settle 1500ms var(--ease-out) both; }
@keyframes settle { from { scale: 1.08; opacity: 0; } 35% { opacity: 1; } to { scale: 1; } }

@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: 180ms ease both fade-out; }
::view-transition-new(root) { animation: 320ms var(--ease-out) 60ms both fade-up; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Small screens: rows stack into name, then about, then the facts. */

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 14px; }
  .topbar { height: 56px; font-size: 13px; }
  .nav { gap: 16px; }
  .hero { padding-top: 20px; }
  .banner { aspect-ratio: 2 / 1; border-radius: 12px; }
  .id { --size: 84px; gap: 12px; padding-left: 12px; }
  .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--mint), 0 14px 28px -14px rgb(18 18 18 / 0.45); }
  .id-name h1 { font-size: 24px; }
  .verified { width: 19px; height: 19px; }
  .links { gap: 6px; }
  .key { width: 36px; height: 36px; border-radius: 9px; }
  .key .ic { width: 16px; height: 16px; }
  .whoami { margin-top: 32px; }
  .bio { font-size: 15px; }
  .kv { padding: 12px; font-size: 13px; }
  .kv > div { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
  .comment { font-size: 12px; }
  .section { margin-top: 48px; }
  .repo-head { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 12px; padding: 10px 12px 10px 10px; }
  .repo-icon { width: 40px; height: 40px; border-radius: 10px; }
  .repo-side { display: none; }
  .repo-desc { white-space: normal; }
  .repo-panel-inner { padding: 0 12px 0 12px; }
  .repo.is-open .repo-panel-inner { padding-bottom: 14px; }
  .repo-shots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; margin-inline: -12px; padding: 4px 12px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .repo-shots li { scroll-snap-align: start; }
  .shots-grid { grid-template-columns: 1fr; }
  .frame { width: clamp(140px, 40vw, 176px); }
  .page-head { padding: 32px 0 20px; }
  .page-head h1,
  .review-head h1 { font-size: 32px; }
  .code pre { padding-right: 18px; padding-top: 48px; }
  .wallet { grid-template-columns: minmax(0, 1fr) auto 32px; gap: 8px; padding: 10px 10px 10px 10px; }
  .wallet-main { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .wallet-icon { width: 40px; height: 40px; }
  .wallet-open { width: 32px; height: 32px; }
  .foot { margin-top: 56px; }
}