:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-optical-sizing: auto;
  background: #f6f4ef;
  color: #112626;
  --muted: #526563;
  --ink: #102526;
  --lime: #dafa8b;
}
* { box-sizing: border-box }
body { margin: 0; background: radial-gradient(ellipse at top, #ede8df, transparent 620px) }
main { max-width: 510px; margin: auto; padding: max(18px, env(safe-area-inset-top)) 16px max(30px, env(safe-area-inset-bottom)) }
a { color: inherit; text-decoration: none; touch-action: manipulation }
:focus-visible { outline: 3px solid #437741; outline-offset: 3px }
svg { width: 22px; height: 22px; display: block; flex: none }
.wordmark { display: block; object-fit: contain; object-position: left center }
h1 { font-size: clamp(28px, 7.7vw, 40px); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; margin: 0; text-wrap: balance }
.identity p { margin: 8px 0 0; font-size: 15px; color: #dcebdc }
.action {
  min-height: 55px; display: flex; align-items: center; gap: 11px;
  border-radius: 17px; padding: 0 15px; background: var(--lime); color: #142921;
  font-size: 16px; font-weight: 600;
}
.action span { flex: 1 }
.action svg:last-child { width: 17px }
.action:active { transform: scale(.975); background: #ccea78 }
h2 { font-size: 20px; font-weight: 600; letter-spacing: -.012em; margin: 0 3px 10px }
.links { margin: 0; padding: 0; list-style: none }
.links li + li { border-top: 1px solid rgb(255 255 255 / 17%) }
.links a { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 8px 3px; min-height: 58px }
.links a:active { background: rgb(255 255 255 / 13%); border-radius: 10px }
.link-icon { width: 38px; height: 38px; border-radius: 50%; background: rgb(255 255 255 / 10%); display: grid; place-items: center }
.link-icon svg { width: 19px }
.link-icon img { display: block; object-fit: contain }
.link-copy { display: grid; gap: 2px; overflow-wrap: anywhere }
.link-copy strong { font-size: 16px; font-weight: 600; letter-spacing: 0 }
.link-copy small { color: #f3f2ef; font-size: 13px; line-height: 1.3 }
.arrow { color: #f3f2ef }
.arrow svg { width: 17px }
@media (prefers-reduced-motion: no-preference) {
  .action { transition: transform 170ms ease-out, background-color 170ms ease-out }
  .action:active { transition-duration: 75ms }
}

/* Keep the photograph behind the whole profile, including the contact sheet. */
html:has(body.scene), body.scene {
  background: var(--scene-top, #202522);
  overscroll-behavior-y: none;
}
body.scene { position: relative; min-height: 100svh }
.scene > main { position: relative; z-index: 1 }
html:has(.scene-studio) { scroll-padding-top: 90px }
main:has(.wallet-preview) {
  max-width: none;
  min-height: 100svh;
  padding: 0;
}
html:has(.profile), body:has(.profile) { background: #fff }
main:has(.profile) {
  max-width: 556px;
  min-height: 100svh;
  padding: max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}
.profile {
  --frame-radius: 32px;
  --frame-inset: 13px;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  overflow: hidden;
  padding: var(--frame-inset);
  border: 1px solid #e8edef;
  border-radius: var(--frame-radius);
  background: #1d201e padding-box;
  box-shadow: 0 4px 12px rgb(34 44 50 / 5%), 0 15px 36px rgb(34 44 50 / 9%);
}
.profile > .profile-backdrop {
  z-index: -1;
  overflow: hidden;
  border-radius: calc(var(--frame-radius) - 1px);
  clip-path: inset(0 round calc(var(--frame-radius) - 1px));
}
.profile::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
  pointer-events: none;
}
.profile-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  background: #1d201e;
  background: color-mix(in srgb, var(--photo-tone) 10%, #181b19);
  pointer-events: none;
}
.portrait-ambient {
  position: absolute;
  inset: -45px;
}
.portrait-ambient img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: blur(34px);
}
.portrait-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 27%, rgb(16 18 17 / 58%) 45%, rgb(16 18 17 / 42%) 100%);
}
.portrait-stage {
  position: absolute;
  inset: 0 0 auto;
  overflow: clip;
  mask-image: linear-gradient(#000 38%, rgb(0 0 0 / 68%) 53%, transparent 82%);
}
.portrait-scene { display: block; width: 100%; height: auto }
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 36%, #181a168f 53%, #191a17d4 100%);
}
.profile:not(:has(.portrait-stage)) .hero { padding-top: 32px }
.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: clamp(245px, 79cqw, 390px);
  color: #fff;
  overflow-wrap: anywhere;
}
.connections {
  margin-top: 16px;
  padding: 16px 15px 4px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: calc(var(--frame-radius) - var(--frame-inset));
  color: #fff;
  background: rgb(255 255 255 / 20%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 12px 28px #0e110f18;
  background-image: linear-gradient(rgb(17 21 19 / 22%), rgb(17 21 19 / 22%));
}
.connections h2 { margin: 0 3px 7px; font-weight: 600; letter-spacing: -.012em }
@media (max-height: 650px) {
  .connections { background-image: linear-gradient(rgb(17 21 19 / 34%), rgb(17 21 19 / 34%)); }
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .connections { background: #222624 }
}
.profile-brand {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin-inline: auto;
  padding-block: 3px 6px;
  pointer-events: none;
}
.profile-brand .wordmark { width: 72px; height: 27px; margin-inline: auto; object-position: center }
.hero-content { position: relative; width: 100% }
.identity h1 { font-size: clamp(29px, 7.8vw, 42px) }
.identity p { font-size: 15px; color: #fff; margin-top: 7px }
.hero-line {
  margin: 17px 0 15px;
  padding: 12px 0;
  border-block: 1px solid #ffffff73;
  font-size: clamp(17px, 4.7vw, 22px);
  line-height: 1.24;
  letter-spacing: -.012em;
}
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px }
.contact-actions .action {
  justify-content: center;
  flex: 1 1 124px;
  gap: 7px;
  min-height: 49px;
  padding: 10px;
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
}
.contact-actions .action span { flex: none }
.contact-actions .action svg { width: 18px; height: 18px }
.contact-actions .action:active { background: #e6ebe4 }
.profile :focus-visible { outline-color: #fff }
.action { border: 0; cursor: pointer; font-family: inherit; text-align: left }
.action.secondary { background: #eaf0e7 }
.action.secondary:active { background: #dce8d8 }
html:has(.wallet-preview), body:has(.wallet-preview) { background: #fff }
.wallet-preview {
  max-width: 450px;
  min-height: 100svh;
  margin-inline: auto;
  padding: max(22px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  color: #1f1f1f;
}
.wallet-header { position: sticky; top: env(safe-area-inset-top); z-index: 2; display: grid; place-items: center; min-height: 44px; background: #fff }
.wallet-header .wordmark, .studio-head .wordmark { width: 80px; height: auto }
.wallet-back {
  position: absolute;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f2f2f4;
  border: 1px solid #e5e5e8;
}
.wallet-back svg { transform: rotate(180deg) }
.wallet-header h1 {
  width: calc(100% - 150px);
  min-width: 0;
  font-size: clamp(13px, 3.9vw, 17px);
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.studio-back {
  position: absolute;
  inset-inline-start: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgb(31 31 31 / 72%);
  border: 1px solid rgb(255 255 255 / 24%);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  pointer-events: auto;
}
.profile-brand:has(.studio-back) { width: 100%; display: grid; place-items: center }
.wallet-header .studio-back { color: #1f1f1f; background: #f2f2f4; border-color: #e5e5e8 }
.wallet-preview-add {
  position: absolute;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: #0074e8;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.wallet-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 450px;
  aspect-ratio: 1085 / 1510;
  margin-top: clamp(45px, 10svh, 105px);
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 13px;
  background: var(--wallet-bg);
  color: var(--wallet-fg);
  box-shadow: 0 16px 26px #10121255;
}
.signed-wallet-card .wallet-primary { margin-bottom: 42px }
.wallet-pass-top { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-bottom: 24px }
.wallet-logo { display: block; width: 96px; max-height: 37px; object-fit: contain; object-position: left center }
.wallet-logo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 600; color: var(--wallet-label) }
.wallet-fields { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 16px }
.wallet-fields:empty { display: none }
.wallet-fields div { min-width: 0; overflow-wrap: anywhere }
.wallet-fields dt { color: var(--wallet-label); font-size: 10px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 3px }
.wallet-fields dd { margin: 0; line-height: 1.18 }
.wallet-primary dd { font-size: clamp(22px, 6.3vw, 31px); font-weight: 400; letter-spacing: -.025em }
.wallet-secondary dd { font-size: 17px }
.scan { margin: auto 0 0; padding-top: 12px }
.scan img { display: block; width: min(100%, 148px); height: auto; margin-inline: auto; background: #fff; border-radius: 4px }
.wallet-preview-note, .wallet-compare { display: block; text-align: center; color: #4b4b50; font-size: 13px; margin: 12px 0 0 }
.wallet-compare { text-decoration: underline; text-underline-offset: 3px; padding: 8px }

.studio {
  max-width: 650px;
  min-height: 100svh;
  color: #fff;
}
.scene-studio .profile-backdrop { background: #242827 }
.studio-head {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: max(9px, env(safe-area-inset-top)) 0 12px;
  text-align: center;
  pointer-events: none;
}
.studio-head::before {
  content: "";
  position: absolute;
  inset: calc(-22px - env(safe-area-inset-top)) -16px -12px;
  z-index: -1;
  background: linear-gradient(#171d1bed, #171d1bbb 68%, transparent);
}
.studio-head .wordmark { width: 68px; margin: 0 auto 7px }
.studio-head h1 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: -.012em; line-height: 1.3 }
.studio-intro { text-align: center; font-size: 14px; margin: 3px 0 18px }
.studio-intro, .studio-panel p { color: #f3f2ef; line-height: 1.5 }
.studio-panel p { margin: 9px 0 }
.studio-panel {
  border: 1px solid rgb(255 255 255 / 28%);
  background: rgb(255 255 255 / 20%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 12px 28px #0e110f18;
  background-image: linear-gradient(rgb(17 21 19 / 20%), rgb(17 21 19 / 20%));
}
.studio-panel { border-radius: 24px; padding: 18px; margin: 0 0 13px }
.studio-panel h2 { margin: 0 0 12px; font-size: 17px; line-height: 1.3 }
.studio-panel h2:not(:first-child) { margin-top: 18px }
.studio-panel label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; align-content: start }
.studio-panel label small { color: #f3f2ef; font-weight: 400; line-height: 1.45 }
.studio-panel input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 14px;
  background: rgb(255 255 255 / 9%);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color-scheme: dark;
}
.studio-panel input::placeholder { color: #e8e8e3 }
.studio-panel input::file-selector-button { border: 0; padding: 4px 9px; margin-right: 8px; border-radius: 999px; background: #fff; color: #182822 }
.studio-panel .action, .studio-panel .action.secondary {
  width: fit-content;
  margin-top: 14px;
  padding: 10px 19px;
  min-height: 46px;
  border-radius: 999px;
  background: #fff;
  color: #182822;
  font-size: 15px;
  font-weight: 600;
}
.studio-panel .action:active { background: #e8ede7 }
.studio-panel a, .studio-nav a { color: #fff; text-decoration: underline; text-underline-offset: 4px }
.studio-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 15px; padding-inline: 3px; font-size: 14px }
.studio-nav form { margin-left: auto }
.studio-nav button, .add-link, .remove-link {
  min-height: 44px;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 26%);
  padding: 6px 12px;
  background: rgb(255 255 255 / 15%);
  color: #fff;
  font: inherit;
}
.studio :focus-visible { outline-color: #fff }
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .studio-panel { background: #222624 }
  .studio-panel input { background: #343935 }
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.add-link { margin-top: 10px }
.notice { background: #fff; color: #182822; padding: 12px; border-radius: 13px }
@media (max-width: 410px) {
  .field-grid { grid-template-columns: minmax(0, 1fr) }
}
.card-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; list-style: none; margin: 0 0 15px; padding: 0 }
.card-picker a { display: grid; gap: 3px; padding: 10px 12px; min-height: 50px; border-radius: 13px; background: rgb(255 255 255 / 10%); text-decoration: none; overflow-wrap: anywhere }
.card-picker a[aria-current] { background: rgb(255 255 255 / 23%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 42%) }
.card-picker small { color: #f3f2ef }
.cards-panel details form, .wallet-controls details { margin-top: 11px }
.wallet-controls details > form { margin-top: 9px }
.wallet-controls a.action { text-decoration: none }

/* Compact editor rows keep inputs and touch targets comfortably sized. */
.studio-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.studio-account span { overflow-wrap: anywhere }
.studio-account { font-size: 14px; margin: 0 3px 9px }
.wallet-status { margin: 10px 0 0; font-size: 13px }
.studio-text-button {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 22px;
  background: rgb(255 255 255 / 12%);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.studio-panel { padding: 13px 15px; margin-bottom: 9px }
.studio-panel summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 500;
}
.studio-panel summary::-webkit-details-marker { display: none }
.studio-panel summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 4px 0 auto;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: .8;
}
.studio-panel details[open] > summary::after,
details.studio-panel[open] > summary::after { transform: rotate(135deg) }
.card-picker strong { font-size: 15px; font-weight: 600 }
.studio-inline-form { display: flex; align-items: end; gap: 8px }
.studio-inline-form label { flex: 1; min-width: 0 }
.editor-section + .editor-section { border-top: 1px solid rgb(255 255 255 / 17%) }
.editor-section > summary small { margin-inline-start: 7px; color: #e3e7e3 }
.editor-section[open] { padding-bottom: 10px }
.editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px }
.editor-actions .action { margin-top: 0 }
.editor-actions .discard-changes {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 14px;
  text-decoration: none;
}
.editor-actions .discard-changes:active { opacity: .75 }
.profile-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.photo-control {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.photo-control label { flex: 1; min-width: 0 }
.photo-control input { padding-inline: 6px }
.photo-preview { width: 60px; height: 64px; border-radius: 10px; object-fit: cover }
.photo-preview[hidden] { display: none }
.studio-panel input { min-height: 44px; padding-block: 8px }
.link-editor-row {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr) 44px;
  gap: 5px 8px;
  padding: 7px 0;
}
.link-editor-row + .link-editor-row { border-top: 1px solid rgb(255 255 255 / 14%) }
.link-editor-row select {
  min-width: 0; width: 100%; min-height: 44px;
  border-radius: 12px; border: 1px solid rgb(255 255 255 / 25%);
  background: #454a46; color: #fff; padding: 0 5px;
  font: inherit; font-size: 16px; color-scheme: dark;
}
.link-editor-row .remove-link { width: 44px; padding: 0; font-size: 20px }
.link-editor-row .link-custom { grid-column: 1 / -1; grid-row: 2 }
.link-custom[hidden], .add-link[hidden] { display: none }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.wallet-controls { scroll-margin-top: 12px }
.wallet-controls .wallet-add { margin-top: 0 }
.wallet-controls > p { font-size: 13px; margin: 4px 0 }
.wallet-controls details { margin-top: 3px }
.pass-import { padding-inline: 8px }
@media (max-width: 355px) {
  .link-editor-row { grid-template-columns: minmax(0, 1fr) 44px }
  .link-editor-row .remove-link { grid-column: 2; grid-row: 1 }
  .link-editor-row .link-value { grid-column: 1 / -1; grid-row: 2 }
  .link-editor-row .link-custom { grid-row: 3 }
}

.saved-actions { margin-top: 4px }
.saved-actions .action, .saved-actions .action.secondary { margin: 0; text-decoration: none }
.saved-actions .action.secondary { background: rgb(255 255 255 / 14%); color: #fff }

.logo-preview { width: 60px; height: 54px; object-fit: contain }
.logo-preview[hidden] { display: none }
.studio-panel .logo-reset { grid-column: 1 / -1; display: flex; align-items: center; min-height: 44px }
.studio-panel .logo-reset input { width: 18px; height: 18px; min-height: 0; margin: 0 7px 0 0 }